/* =========================================================================
   FIRMEZA "LEDGER" PAGE PATTERNS
   Shared by the redesigned screens: panels, toolbars, segmented filters,
   tab bars, avatars, person cells, two-column layouts, timeline bars.
   ========================================================================= */

/* KPI bar tones */
.fz-kpi__bar--navy { background: var(--navy-800) !important; }
.fz-kpi__bar--ok   { background: var(--success-dot) !important; }
.fz-kpi__bar--warn { background: var(--warning-dot) !important; }
.fz-kpi__bar--bad  { background: var(--danger-dot) !important; }
.fz-kpi__bar--info { background: var(--info-dot) !important; }
.fz-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }

/* Avatars: photo, else initials on a tint */
.fz-av { flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 700; object-fit: cover; }
.fz-av--0 { background: var(--navy-100); color: var(--navy-800); }
.fz-av--1 { background: var(--amber-50); color: var(--amber-700); }
.fz-av--2 { background: var(--success-bg); color: var(--success); }
.fz-av--3 { background: var(--info-bg); color: var(--info); }
.fz-av--4 { background: #F4F3FF; color: #5925DC; }

/* Person cell: avatar, name, mono ID */
.fz-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fz-person__text { display: flex; flex-direction: column; min-width: 0; }
.fz-person__name { font-weight: 600; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.fz-person__name:hover { color: var(--navy-700); text-decoration: underline; }
.fz-person__id { font-family: var(--mono); font-weight: 500; font-size: 12px; color: var(--muted); }

/* Page greeting (Dashboard) */
.fz-greeting { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; }
.fz-greeting__date { font-size: 14px; color: var(--muted); }
.fz-greeting__title { margin: 6px 0 0; font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -.02em; }
.fz-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Panel: card with a header row and optional body */
.fz-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 0; }
.fz-panel__head { padding: 18px 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.fz-panel__title { margin: 0; font-size: 18px; line-height: 26px; font-weight: 700; }
.fz-panel__sub { font-size: 13px; color: var(--muted); }
.fz-panel__body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.fz-panel__link { font-size: 14px; font-weight: 600; text-decoration: none; }

/* Two columns that wrap by themselves: main flexes wide, side holds ~320px */
.fz-split { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.fz-split__main { flex: 999 1 560px; min-width: 0; }
.fz-split__side { flex: 1 1 320px; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.fz-stack { display: flex; flex-direction: column; gap: 24px; }

/* Toolbar above a table: search, selects, segmented status filter */
.fz-toolbar { padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; border-bottom: 1px solid var(--line); }
.fz-toolbar__spacer { flex: 1; }
.fz-field-search { position: relative; flex: 1 1 240px; max-width: 340px; display: flex; }
.fz-field-search .fz-icon { position: absolute; left: 12px; top: 11px; color: var(--muted); pointer-events: none; }
.fz-field-search input { width: 100%; padding-left: 40px; }
.fz-toolbar .form-select { width: auto; max-width: 220px; font-weight: 500; }

.fz-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
.fz-seg > button, .fz-seg > a { height: 38px; padding: 0 14px; border: 0; border-left: 1px solid var(--line-strong); background: #fff; color: var(--slate); font: 500 13px var(--font); display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; }
.fz-seg > :first-child { border-left: 0; }
.fz-seg > .is-on, .fz-seg > [aria-pressed="true"] { background: var(--navy-100); color: var(--navy-800); font-weight: 600; }

/* Tab bar (role=tablist). Links or buttons. */
.fz-tabbar { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; }
.fz-tabbar > a, .fz-tabbar > button { height: 44px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font: 500 14px var(--font); color: var(--slate); text-decoration: none; margin-bottom: -1px; }
.fz-tabbar > .is-on, .fz-tabbar > [aria-selected="true"] { border-bottom-color: var(--navy-800); color: var(--navy-800); font-weight: 700; }
.fz-tabbar__count { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: #FEF0C7; color: var(--warning); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

/* Table footer: "Showing 1-6 of 6" + pager */
.fz-tablefoot { padding: 12px 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: var(--slate); border-top: 1px solid var(--line); }

/* Tags inside table cells ("On time", "Late") */
.fz-tag { font-size: 12px; font-weight: 600; }
.fz-tag--ok { color: var(--success); }
.fz-tag--warn { color: var(--warning); }
.fz-tag--bad { color: var(--danger); }

/* Callout (amber = needs a decision) */
.fz-callout { background: var(--warning-bg); border: 1px solid #F7D9A4; border-radius: var(--radius-md); padding: 18px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Attention rows (Dashboard side panel) */
.fz-attn { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
a.fz-attn-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--ink); }
a.fz-attn-link:hover { background: var(--header-row); color: var(--ink); }
.fz-attn-link__sub { display: block; font-size: 13px; color: var(--muted); }
.fz-count-pill { height: 22px; padding: 0 8px; border-radius: 999px; background: #FEF0C7; color: var(--warning); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; }

/* Horizontal bars (time by project) */
.fz-bar { height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.fz-bar > span { display: block; height: 100%; background: var(--navy-800); }

/* Wide tables scroll inside their box on phones */
.fz-tablewrap { overflow-x: auto; }
.fz-tablewrap > table { min-width: 720px; }

@media (max-width: 767.98px) {
    .fz-greeting__title { font-size: 26px; line-height: 34px; }
    .fz-toolbar .form-select, .fz-field-search { max-width: none; flex: 1 1 100%; }
}

/* KPI sub line */
.fz-kpi__sub { font-size: 13px; color: var(--muted); }

/* Date navigator (Attendance) */
.fz-datenav { display: inline-flex; align-items: center; height: 40px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; }
.fz-datenav > button { width: 40px; height: 38px; border: 0; background: transparent; color: var(--slate); display: inline-flex; align-items: center; justify-content: center; }
.fz-datenav > button:disabled { color: var(--neutral-dot); }
.fz-datenav > input[type="date"] { height: 38px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); padding: 0 8px; font: 600 14px var(--font); color: var(--ink); background: transparent; }
.fz-datenav > input[type="date"]:focus { box-shadow: var(--focus-ring); outline: none; }
.fz-datenav__tag { padding: 0 10px; font-size: 12px; font-weight: 700; color: var(--success); display: none; }
.fz-datenav__tag.is-on { display: inline; }

/* Timeline legend + rows */
.fz-legend { display: inline-flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--slate); }
.fz-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.fz-legend i { display: inline-block; width: 12px; height: 8px; border-radius: 2px; }
.fz-legend .fz-legend__now { width: 2px; height: 12px; border-radius: 0; background: var(--danger); }
.fz-att-table th.fz-att-axis { padding: 0 20px; }
.fz-axis { display: flex; justify-content: space-between; font-family: var(--mono); font-weight: 500; font-size: 12px; color: var(--slate); }
.fz-track { position: relative; height: 28px; border-radius: var(--radius-sm); background: repeating-linear-gradient(90deg, #F2F4F7 0, #F2F4F7 calc(var(--grid) - 1px), var(--line) calc(var(--grid) - 1px), var(--line) var(--grid)); }
.fz-track__seg { position: absolute; top: 6px; bottom: 6px; border-radius: 4px; min-width: 3px; }
.fz-track__seg--work { background: var(--navy-800); }
.fz-track__seg--break { background: var(--amber-500); }
.fz-track__now { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--danger); }

/* Run steps (Salary slips) */
.fz-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.fz-steps > li { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.fz-steps__n { width: 24px; height: 24px; flex: none; border-radius: 999px; background: var(--navy-100); color: var(--navy-800); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.fz-steps > li > div { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.fz-steps > li > div > span { font-size: 13px; color: var(--muted); }

/* Breadcrumb */
.fz-crumbs { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); margin-bottom: 16px; }
.fz-crumbs a { font-weight: 600; text-decoration: none; }
.fz-stack > .card, .fz-stack > .fz-panel { margin-bottom: 0; }
.fz-pane > .fz-stack, .fz-split__main.fz-stack { margin: 0; }

/* =========================================================================
   Employee form shell (Add employee, Edit employee): horizontal tabs, plain
   fields, flat hero, sticky save bar. Markup stays as is; this re-skins it.
   ========================================================================= */
.fz-profile-shell { border-radius: var(--radius-md); }
.fz-profile-hero { background: #fff; border-bottom: 1px solid var(--line); padding: 20px 24px; gap: 16px; }
.fz-profile-hero .fz-avatar-wrap, .fz-profile-hero .fz-avatar-wrap img, .fz-profile-hero .fz-avatar-wrap .fz-avatar-fallback { width: 72px; height: 72px; font-size: 24px; }
.fz-profile-hero .fz-avatar-wrap img, .fz-profile-hero .fz-avatar-wrap .fz-avatar-fallback { border: 0; background-color: var(--navy-100); color: var(--navy-800); }
.fz-profile-hero .fz-avatar-edit-btn { background: var(--navy-800); border-color: #fff; color: #fff; }
.fz-hero-name { color: var(--ink); font-size: 24px; letter-spacing: -.015em; margin-bottom: 8px; }
.fz-hero-chip { background: var(--header-row); color: var(--slate); border: 1px solid var(--line); }
.fz-hero-chip .material-icons-outlined { color: var(--muted); }

.fz-profile-body { flex-direction: column; }
.fz-profile-nav { width: 100%; flex-direction: row !important; gap: 4px; padding: 0 16px; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--line); background: #fff; }
.fz-tab { width: auto; flex: none; height: 44px; padding: 0 14px; border-radius: 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; font: 500 14px var(--font); color: var(--slate); box-shadow: none; }
.fz-tab:hover { background: transparent; color: var(--ink); }
.fz-tab .fz-tab-icon, .fz-tab .fz-tab-sub { display: none; }
.fz-tab .fz-tab-title { font-size: 14px; font-weight: inherit; }
.fz-tab.active { background: transparent; color: var(--navy-800); font-weight: 700; border-bottom-color: var(--navy-800); box-shadow: none; }
.fz-profile-content .tab-content { padding: 24px; }
.fz-profile-content .tab-pane > .card > .card-header { display: none !important; }
.fz-profile-content .tab-pane > .card > .card-header + .card-body { border-top: 0; padding-top: 0 !important; }
.fz-form-section { color: var(--slate); }
.fz-save-bar { padding: 14px 24px; }

/* Fields: plain, no icon prefixes */
.fz-profile-content .input-group { flex-wrap: nowrap; }
.fz-profile-content .input-group > .input-group-text:has(> .material-icons-outlined) { display: none; }
.fz-profile-content .input-group > .form-control,
.fz-profile-content .input-group > .form-select,
.fz-profile-content .input-group > .select2-container,
.fz-profile-content .input-group > select { margin-left: 0 !important; border-radius: var(--radius-sm) !important; }
.fz-profile-content .col-form-label { font-size: 13px; font-weight: 600; color: var(--ink); padding-bottom: 0; }
@media (max-width: 991.98px) {
    .fz-profile-nav { padding: 0 8px; }
    .fz-profile-content .tab-content { padding: 16px; }
    .fz-save-bar { padding: 12px 16px; }
}

/* =========================================================================
   Employee Home: clock hub, "I'm now" picker, timeline
   ========================================================================= */
.fz-stat { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.fz-datechip { width: 44px; height: 44px; flex: none; border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.fz-datechip span { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--amber-700); }
.fz-datechip b { font-size: 16px; }

.fz-hub { padding: 24px; display: flex; flex-direction: column; gap: 20px; margin-bottom: 0; }
.fz-hub__state { display: flex; flex-direction: column; gap: 20px; }
.fz-hub__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 20px; }
.fz-hub__time { font-size: 48px; line-height: 1.1; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin: 6px 0; }
.fz-hub__title { margin: 8px 0 4px; font-size: 18px; font-weight: 700; }
.fz-hub__sub { margin: 0; font-size: 14px; color: var(--slate); }
.fz-hub__label { display: block; font-size: 13px; font-weight: 600; color: var(--slate); margin-bottom: 10px; }
.fz-hub__busy { display: flex; gap: 16px; align-items: center; }
.fz-hub__busy[hidden] { display: none; }
.fz-hub__spin { width: 28px; height: 28px; border-radius: 999px; border: 3px solid var(--line); border-top-color: var(--navy-800); animation: fz-spin .9s linear infinite; flex: none; }
@keyframes fz-spin { to { transform: rotate(360deg); } }
.fz-busy-steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.fz-busy-steps li.is-done { color: var(--success); }
.fz-busy-steps .fz-step-check { display: none; }

.fz-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.fz-pick { min-height: 52px; padding: 0 12px; display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); border-radius: 8px; font: 600 14px var(--font); }
.fz-pick > span { display: flex; flex-direction: column; line-height: 1.25; }
.fz-pick small { font-size: 11px; font-weight: 500; color: var(--muted); }
.fz-pick:hover:not(:disabled) { background: var(--header-row); }
.fz-pick:disabled { opacity: .55; cursor: not-allowed; }
.fz-pick.is-on { border: 2px solid var(--navy-800); background: var(--navy-100); color: var(--navy-800); opacity: 1; }

.fz-hub-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.fz-hub-row > .fz-panel { flex: 1 1 320px; }
.fz-hub-row__side { flex: 1 1 320px; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.fz-hub-row__side > .card { margin-bottom: 0; }

.fz-tl2 { list-style: none; margin: 0; padding: 8px 20px 12px; }
.fz-tl2__item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.fz-tl2__item:last-child { border-bottom: 0; }
.fz-tl2__dot { width: 8px; height: 8px; border-radius: 999px; border: 1.5px solid var(--neutral-dot); box-sizing: border-box; flex: none; }
.fz-tl2__item.is-done .fz-tl2__dot, .fz-tl2__item.is-working .fz-tl2__dot { background: var(--success-dot); border-color: var(--success-dot); }
.fz-tl2__item.is-active .fz-tl2__dot { background: var(--warning-dot); border-color: var(--warning-dot); }
.fz-tl2__label { flex: 1; font-weight: 600; }
.fz-tl2__time { color: var(--slate); }
.fz-tl2__state { min-width: 96px; text-align: right; }

@media (max-width: 767.98px) {
    .fz-hub { padding: 20px 16px; }
    .fz-hub__time { font-size: 40px; }
    .fz-hub__head > .btn-lg, .fz-hub__head > .d-flex { width: 100%; }
    .fz-hub__head > .d-flex > .btn { flex: 1; min-height: 48px; }
}

/* My attendance: calendar + recent days */
.fz-datenav__label { padding: 0 12px; height: 38px; display: inline-flex; align-items: center; font-weight: 600; font-size: 14px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.fz-cal__dow, .fz-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.fz-cal__dow { font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; }
.fz-cal__cell { min-height: 64px; border-radius: 8px; padding: 8px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; background: var(--neutral-bg); color: var(--slate); }
.fz-cal__cell b { font-size: 14px; }
.fz-cal__cell span { font-size: 11px; font-variant-numeric: tabular-nums; }
.fz-cal__cell.is-blank { background: transparent; }
.fz-cal__cell.is-present { background: var(--navy-800); color: #fff; }
.fz-cal__cell.is-absent { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-dot); }
.fz-cal__cell.is-future { background: transparent; border: 1px dashed var(--line); color: var(--neutral-dot); }
.fz-cal__cell.is-off, .fz-cal-off-key { background: repeating-linear-gradient(45deg, var(--neutral-bg) 0 4px, #fff 4px 8px); border: 1px solid var(--line); color: var(--muted); }
.fz-cal-off-key { display: inline-block; width: 12px; height: 8px; border-radius: 2px; }
.fz-cal__cell.is-today { box-shadow: 0 0 0 2px var(--amber-500); }
.fz-day { padding: 14px 20px; border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 8px; }
.fz-day__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font-size: 13px; }
.fz-day__grid span { display: flex; flex-direction: column; }
.fz-day__grid small { color: var(--muted); }
@media (max-width: 575.98px) { .fz-cal__cell { min-height: 48px; padding: 6px 4px; } .fz-cal__cell span { display: none; } }

/* Feature card (latest payslip) and payslip rows */
.fz-feature { background: var(--navy-800); color: #fff; border-radius: var(--radius-md); padding: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.fz-feature > div:first-child { display: flex; flex-direction: column; gap: 8px; }
.fz-feature__label { font-size: 13px; font-weight: 600; color: #C9D2E6; }
.fz-feature__value { font-size: 44px; line-height: 1.1; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fz-feature__sub { font-size: 14px; color: #C9D2E6; }
.fz-feature__ghost { background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; }
.fz-feature__ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
.fz-feature__solid { background: #fff; border: 0; color: var(--navy-800); font-weight: 700; }
.fz-feature__solid:hover { background: #F2F4F7; color: var(--navy-800); }
.fz-slip { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.fz-slip:last-child { border-bottom: 0; }
.fz-slip__month { flex: 1 1 160px; display: flex; flex-direction: column; }
.fz-slip__net { width: 120px; text-align: right; font-weight: 600; }
.fz-slip__act { width: 96px; text-align: right; }
@media (max-width: 575.98px) { .fz-feature { padding: 20px; } .fz-feature__value { font-size: 36px; } .fz-slip__net { width: auto; margin-left: auto; } }

/* Inline apply-leave panel: one column at any width */
#apply-leave-modal .row { margin: 0; }
#apply-leave-modal .row > [class*="col-"] { width: 100%; flex: 0 0 100%; max-width: 100%; padding: 0; }
#apply-leave-modal .fz-panel__body { gap: 14px; }
#apply-leave-modal label.form-label, #apply-leave-modal label { font-size: 13px; font-weight: 600; }
#apply-leave-modal .text-danger { color: var(--danger) !important; }
.fz-split > .fz-split__main > .card { margin-bottom: 0; }

/* Announcements (shared by admin and employee): pill category chips, flat cards */
.fz-ann-tabs { gap: 8px; margin-bottom: 16px; }
.fz-ann-tab { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; color: var(--ink-2); font-size: 14px; font-weight: 500; }
.fz-ann-tab:hover { background: var(--header-row); }
.fz-ann-tab.active { background: var(--navy-800); border-color: var(--navy-800); color: #fff; font-weight: 700; }
.fz-ann-card { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 20px; background: #fff; }
.fz-ann-new-dot { background: var(--amber-500); }

/* =========================================================================
   Phase 5: settings shell, plain fields on every form, list pages
   ========================================================================= */
.fz-settings-nav { position: sticky; top: calc(var(--fz-topbar-h, 64px) + 16px); }
.fz-settings-nav .card-body { padding: 12px !important; }
.fz-settings-nav-label { margin: 12px 0 6px; padding: 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fz-settings-nav-label:first-child { margin-top: 0; }
.fz-settings-nav-item { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: var(--slate); text-decoration: none; }
.fz-settings-nav-item:hover { background: var(--header-row); color: var(--ink); }
.fz-settings-nav-item.active { background: var(--navy-100); color: var(--navy-800); font-weight: 600; }
.fz-settings-nav-item .fz-icon { flex: none; }
@media (max-width: 991.98px) {
    .fz-settings-nav { position: static; }
    .fz-settings-nav .card-body { display: flex; gap: 4px; overflow-x: auto; padding: 8px !important; }
    .fz-settings-nav-label { display: none; }
    .fz-settings-nav-item { flex: none; white-space: nowrap; }
}

/* No icon prefixes inside input groups, on any page: plain labelled fields */
.fz-content .input-group { flex-wrap: nowrap; }
.fz-content .input-group > .input-group-text:has(> .material-icons-outlined),
.fz-content .input-group > .input-group-text:has(> i.material-icons-outlined) { display: none; }
.fz-content .input-group > .form-control:not(:first-child),
.fz-content .input-group > .form-select:not(:first-child) { margin-left: 0; border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }

/* Settings cards: flat, section title only */
.fz-content .card > .card-header .card-title { font-size: 16px; }
.fz-content .card.rounded-4 > .card-body.p-4 { padding: 24px !important; }
/* KPI tiles carry no icon tile (Projects, Work updates) */
.fz-proj-stat-icon { display: none !important; }

/* Profile save bar: only while the open section has changes; sits above the phone tabs */
@media (max-width: 767.98px) { body.fz-has-tabs .fz-save-bar { bottom: 72px; } }
.fz-field-error { font-size: 12px; font-weight: 500; color: var(--danger); margin-top: 4px; }
/* overflow:hidden on the profile card made the save bar's `position: sticky` inert; clip keeps the rounded corners */
.fz-profile-shell { overflow: clip; }
@media (max-width: 767.98px) {
    #profile_savebar { gap: 8px; padding: 10px 16px; }
    #profile_savebar_text { display: none; }
    #profile_savebar .btn { flex: 1 1 0; min-width: 0; min-height: 44px; }
    #profile_savebar #profile_save_btn { flex: 2 1 0; }
}