/* =========================================================================
   FIRMEZA DESIGN SYSTEM
   Layered over Bootstrap 5 + the Maxton template. This file loads last, so
   plain declarations win by source order.

   1. Tokens            — the single source of truth for every visual value
   2. Bootstrap bridge  — maps tokens onto Bootstrap's own CSS variables so
                          utilities and components inherit them automatically
   3. Base              — typography rhythm, surfaces, focus
   4. Components        — buttons, forms, cards, tables, badges, avatars,
                          tabs, overlays, states, page headers
   5. Feature blocks    — page-specific styles further down this file, all
                          consuming the tokens above
   ========================================================================= */

/* =========================================================================
   1. TOKENS
   ========================================================================= */
:root {
    /* --- Typeface: one modern sans for the whole app --------------------- */
    --fz-font: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --bs-font-sans-serif: var(--fz-font);
    --bs-body-font-family: var(--fz-font);

    /* --- Brand ------------------------------------------------------- */
    --fz-navy: #16294d;
    --fz-primary: #1e3a63;
    --fz-primary-dark: #16294d;
    --fz-gold: #c99a3c;
    --fz-gold-dark: #b8892f;
    --fz-gold-soft: rgba(201, 154, 60, .16);

    --fz-accent: var(--fz-primary);
    --fz-accent-soft: rgba(30, 58, 99, .12);

    /* --- Ink (text) --------------------------------------------------- */
    --fz-ink: #1f2a44;          /* headings, key figures */
    --fz-ink-body: #384158;     /* body copy, nav items */
    --fz-ink-muted: #64748b;    /* labels, captions, secondary text */
    --fz-ink-subtle: #98a2b3;   /* placeholders, disabled, empty states */
    --fz-ink-inverse: #ffffff;

    /* --- Surfaces ----------------------------------------------------- */
    --fz-bg: #f8f9fc;           /* app canvas — barely tinted */
    --fz-surface: #ffffff;      /* cards, menus, sheets */
    --fz-surface-alt: #f9fafc;  /* table heads, inset panels */
    --fz-border: rgba(22, 41, 77, .10);
    --fz-border-strong: rgba(22, 41, 77, .18);
    --fz-hover: rgba(130, 130, 150, .10);

    /* --- Semantic status ---------------------------------------------- */
    /* Each: readable text color + soft background for pills/tints */
    --fz-success: #16a34a;  --fz-success-soft: rgba(34, 197, 94, .14);
    --fz-warning: #b45309;  --fz-warning-soft: rgba(245, 158, 11, .16);
    --fz-danger:  #dc2626;  --fz-danger-soft:  rgba(239, 68, 68, .12);
    --fz-info:    #0891b2;  --fz-info-soft:    rgba(6, 182, 212, .14);
    --fz-neutral: #475569;  --fz-neutral-soft: rgba(100, 116, 139, .14);

    /* --- Radius scale -------------------------------------------------- */
    --fz-radius-xs: 6px;
    --fz-radius-sm: 8px;
    --fz-radius-md: 10px;
    --fz-radius-lg: 12px;
    --fz-radius-xl: 16px;
    --fz-radius-pill: 999px;
    --fz-radius: var(--fz-radius-lg);   /* default surface radius */

    /* --- Spacing scale (4pt) ------------------------------------------- */
    --fz-space-1: .25rem;
    --fz-space-2: .5rem;
    --fz-space-3: .75rem;
    --fz-space-4: 1rem;
    --fz-space-5: 1.25rem;
    --fz-space-6: 1.5rem;
    --fz-space-7: 2rem;

    /* --- Type scale ---------------------------------------------------- */
    --fz-text-2xs: .6875rem;   /* 11 — micro labels */
    --fz-text-xs:  .75rem;     /* 12 — table heads, captions */
    --fz-text-sm:  .8125rem;   /* 13 — secondary text */
    --fz-text-base: .875rem;   /* 14 — app body */
    --fz-text-md:  .9375rem;   /* 15 — card titles */
    --fz-text-lg:  1.0625rem;  /* 17 — section titles */
    --fz-text-xl:  1.25rem;    /* 20 — page titles */
    --fz-text-2xl: 1.5rem;     /* 24 — key figures */

    --fz-weight-medium: 500;
    --fz-weight-semibold: 600;
    --fz-weight-bold: 700;

    /* --- Elevation ----------------------------------------------------- */
    --fz-shadow-xs: 0 1px 1px rgba(16, 24, 40, .02);
    --fz-shadow-sm: 0 1px 2px rgba(16, 24, 40, .03);
    --fz-shadow-md: 0 2px 6px rgba(16, 24, 40, .04);
    --fz-shadow-lg: 0 6px 16px rgba(16, 24, 40, .06);

    /* --- Icons ---------------------------------------------------------- */
    --fz-icon-sm: 16px;
    --fz-icon: 18px;
    --fz-icon-lg: 22px;

    /* --- Control sizing -------------------------------------------------- */
    --fz-control-height: 38px;
    --fz-control-height-sm: 32px;
}

/* =========================================================================
   2. BOOTSTRAP BRIDGE
   Point Bootstrap's own variables at the tokens. Every utility class and
   component (rounded-*, .card, .btn, .badge, .modal, .table …) then follows
   the design system without touching a single template.
   ========================================================================= */
:root {
    /* Surfaces & ink */
    --bs-body-bg: var(--fz-bg);
    --bs-body-color: var(--fz-ink-body);
    --bs-emphasis-color: var(--fz-ink);
    --bs-secondary-color: var(--fz-ink-muted);
    --bs-border-color: var(--fz-border);
    --bs-border-color-translucent: var(--fz-border);

    /* Type */
    --bs-body-font-size: var(--fz-text-base);
    --bs-body-line-height: 1.5;

    /* Radius — remaps rounded-1…5 and every component corner */
    --bs-border-radius: var(--fz-radius-md);
    --bs-border-radius-sm: var(--fz-radius-sm);
    --bs-border-radius-lg: var(--fz-radius-lg);
    --bs-border-radius-xl: var(--fz-radius-lg);   /* .rounded-4 */
    --bs-border-radius-xxl: var(--fz-radius-xl);  /* .rounded-5 */
    --bs-border-radius-pill: var(--fz-radius-pill);

    /* Brand + semantic palette */
    --bs-primary: var(--fz-primary);
    --bs-primary-rgb: 30, 58, 99;
    --bs-link-color: var(--fz-primary);
    --bs-link-color-rgb: 30, 58, 99;
    --bs-link-hover-color: var(--fz-primary-dark);
    --bs-success: var(--fz-success);
    --bs-danger: var(--fz-danger);
    --bs-warning: var(--fz-warning);
    --bs-info: var(--fz-info);
}

/* Radius utilities the templates use but Bootstrap doesn't ship (Tailwind
   names that were silently doing nothing). Aliased onto the scale so the
   markup using them lands on-system instead of square. */
.rounded-sm { border-radius: var(--fz-radius-sm) !important; }
.rounded-md { border-radius: var(--fz-radius-md) !important; }
.rounded-lg { border-radius: var(--fz-radius-lg) !important; }
.rounded-full { border-radius: var(--fz-radius-pill) !important; }

/* =========================================================================
   3. BASE
   ========================================================================= */
body {
    font-family: var(--fz-font) !important;
    font-size: var(--fz-text-base);
    color: var(--fz-ink-body);
    letter-spacing: -0.01em;
}
h1, h2, h3, h4, h5, h6,
.btn, .form-control, .form-select, .form-label,
input, button, select, textarea,
.metismenu, .dropdown-menu, .badge, .card, .nav, .modal, table {
    font-family: inherit !important;
}

/* Compact, consistent heading scale */
h1, .h1 { font-size: var(--fz-text-2xl); }
h2, .h2 { font-size: 1.375rem; }
h3, .h3 { font-size: var(--fz-text-xl); }
h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: var(--fz-text-lg); }
h6, .h6 { font-size: var(--fz-text-md); }
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--fz-ink);
    font-weight: var(--fz-weight-semibold);
    line-height: 1.3;
}

small, .small { font-size: var(--fz-text-sm); }
hr { border-color: var(--fz-border); opacity: 1; }

/* App canvas — cards visibly float above this */
body,
.main-wrapper,
.page-wrapper,
.main-content {
    background: var(--fz-bg);
}

/* One focus treatment everywhere */
.form-control:focus,
.form-select:focus,
.btn:focus-visible,
.form-check-input:focus {
    border-color: var(--fz-primary);
    box-shadow: 0 0 0 .18rem rgba(30, 58, 99, .16);
}

/* =========================================================================
   4. COMPONENTS
   ========================================================================= */

/* ---------- Buttons ------------------------------------------------- */
.btn {
    --bs-btn-border-radius: var(--fz-radius-md);
    font-size: var(--fz-text-base);
    font-weight: var(--fz-weight-medium);
    padding: .45rem .9rem;
}
.btn-sm {
    --bs-btn-border-radius: var(--fz-radius-sm);
    font-size: var(--fz-text-sm);
    padding: .3rem .6rem;
}
.btn-lg { font-size: var(--fz-text-md); padding: .6rem 1.2rem; }

.btn-primary {
    --bs-btn-bg: var(--fz-primary);
    --bs-btn-border-color: var(--fz-primary);
    --bs-btn-hover-bg: var(--fz-primary-dark);
    --bs-btn-hover-border-color: var(--fz-primary-dark);
    --bs-btn-active-bg: var(--fz-primary-dark);
    --bs-btn-active-border-color: var(--fz-primary-dark);
    --bs-btn-disabled-bg: var(--fz-primary);
    --bs-btn-disabled-border-color: var(--fz-primary);
}

/* `.btn-default` is used widely by the templates (modal Cancel/Close) but
   isn't a Bootstrap variant — it rendered as an unstyled button. Defined
   here as the neutral/secondary action. */
.btn-default {
    --bs-btn-color: var(--fz-ink-body);
    --bs-btn-bg: var(--fz-surface);
    --bs-btn-border-color: var(--fz-border-strong);
    --bs-btn-hover-color: var(--fz-ink);
    --bs-btn-hover-bg: var(--fz-surface-alt);
    --bs-btn-hover-border-color: var(--fz-border-strong);
    --bs-btn-active-color: var(--fz-ink);
    --bs-btn-active-bg: var(--fz-surface-alt);
    --bs-btn-active-border-color: var(--fz-border-strong);
}

/* Gold accent button (secondary CTA) */
.btn-gold {
    --bs-btn-bg: var(--fz-gold);
    --bs-btn-border-color: var(--fz-gold);
    --bs-btn-hover-bg: var(--fz-gold-dark);
    --bs-btn-hover-border-color: var(--fz-gold-dark);
    --bs-btn-color: var(--fz-ink-inverse);
    --bs-btn-hover-color: var(--fz-ink-inverse);
    color: var(--fz-ink-inverse);
}

/* Maxton gradient buttons → flat brand navy (no decorative gradients) */
.btn-grd-primary {
    background: var(--fz-primary) !important;
    color: var(--fz-ink-inverse) !important;
    border: 0 !important;
}

.btn-primary,
.btn-gold,
.btn-grd-primary {
    box-shadow: var(--fz-shadow-xs);
    transition: box-shadow .15s ease, background-color .15s ease;
}
.btn-primary:hover,
.btn-gold:hover,
.btn-grd-primary:hover { box-shadow: var(--fz-shadow-sm); }

/* Square icon-only button */
.btn-icon {
    width: var(--fz-control-height);
    height: var(--fz-control-height);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-icon.btn-sm { width: var(--fz-control-height-sm); height: var(--fz-control-height-sm); }
.btn .material-icons-outlined { font-size: var(--fz-icon); }

/* ---------- Forms ---------------------------------------------------- */
.form-label,
.col-form-label {
    font-size: var(--fz-text-sm);
    font-weight: var(--fz-weight-medium);
    color: var(--fz-ink-body);
    margin-bottom: .3rem;
}
.form-control,
.form-select {
    font-size: var(--fz-text-base);
    border-radius: var(--fz-radius-md);
    border-color: var(--fz-border-strong);
    color: var(--fz-ink-body);
    padding: .4rem .7rem;
    min-height: var(--fz-control-height);
}
.form-control::placeholder { color: var(--fz-ink-subtle); }
.form-control:disabled,
.form-control[readonly],
.form-select:disabled { background-color: var(--fz-surface-alt); color: var(--fz-ink-muted); }
.input-group-text {
    background: var(--fz-surface-alt);
    border-color: var(--fz-border-strong);
    color: var(--fz-ink-muted);
    font-size: var(--fz-text-sm);
    border-radius: var(--fz-radius-md);
}
textarea.form-control { min-height: 84px; }
.form-check-input:checked { background-color: var(--fz-primary); border-color: var(--fz-primary); }
.invalid-feedback { font-size: var(--fz-text-xs); }

/* Section divider inside long forms */
.fz-form-section {
    display: flex;
    align-items: center;
    gap: var(--fz-space-2);
    font-size: var(--fz-text-xs);
    font-weight: var(--fz-weight-bold);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--fz-primary);
    margin: var(--fz-space-6) 0 var(--fz-space-3);
}
.fz-form-section:first-child { margin-top: 0; }
.fz-form-section .material-icons-outlined { font-size: var(--fz-icon-sm); }
.fz-form-section::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--fz-border);
}

/* ---------- Cards ---------------------------------------------------- */
.card {
    background: var(--fz-surface);
    border: 1px solid var(--fz-border);
    border-radius: var(--fz-radius);
    box-shadow: var(--fz-shadow-sm);
    margin-bottom: var(--fz-space-4);
}
.card > .card-body { padding: var(--fz-space-5); }
.card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--fz-border);
    padding: var(--fz-space-4) var(--fz-space-5);
}
.card .card-header .card-title,
.card .card-title {
    font-size: var(--fz-text-md);
    font-weight: var(--fz-weight-semibold);
    color: var(--fz-ink);
    margin-bottom: 0;
}
.card .card-footer {
    background: transparent;
    border-top: 1px solid var(--fz-border);
    padding: var(--fz-space-3) var(--fz-space-5);
}

/* ---------- Page header ---------------------------------------------- */
/* The templates' original breadcrumb block, restyled as the standard page
   title so every existing page picks up the new header without edits. */
.page-breadcrumb { margin-bottom: var(--fz-space-4); }
.page-breadcrumb .breadcrumb-title {
    font-size: var(--fz-text-xl);
    font-weight: var(--fz-weight-bold);
    color: var(--fz-ink);
    border: 0;
}

/* Richer header (icon + title + subtitle) for pages that opt in */
.fz-page-head {
    display: flex;
    align-items: center;
    gap: var(--fz-space-3);
    margin-bottom: var(--fz-space-4);
}
.fz-page-head-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--fz-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--fz-accent-soft);
    color: var(--fz-accent);
}
.fz-page-head-icon .material-icons-outlined { font-size: var(--fz-icon-lg); }
.fz-page-head-icon--primary { background: var(--fz-accent-soft); color: var(--fz-primary); }
.fz-page-head-icon--success { background: var(--fz-success-soft); color: var(--fz-success); }
.fz-page-head-icon--danger  { background: var(--fz-danger-soft);  color: var(--fz-danger); }
.fz-page-head-icon--warning { background: var(--fz-warning-soft); color: var(--fz-warning); }
.fz-page-head-icon--info    { background: var(--fz-info-soft);    color: var(--fz-info); }
.fz-page-head-icon--neutral { background: var(--fz-neutral-soft); color: var(--fz-neutral); }
.fz-page-title {
    font-size: var(--fz-text-xl);
    font-weight: var(--fz-weight-bold);
    color: var(--fz-ink);
    margin: 0;
    line-height: 1.25;
}
.fz-page-subtitle {
    font-size: var(--fz-text-sm);
    color: var(--fz-ink-muted);
    margin: 0;
}

/* ---------- Tables ---------------------------------------------------- */
.card .table { margin-bottom: 0; }
.table-responsive .table tbody tr { transition: background-color .15s ease-in-out; }
.card .table > thead > tr > th {
    text-transform: uppercase;
    font-size: var(--fz-text-xs);
    letter-spacing: .04em;
    font-weight: var(--fz-weight-bold);
    color: var(--fz-ink-muted);
    background: transparent;
    border-bottom: 1px solid var(--fz-border-strong);
    padding: .7rem .75rem;
    white-space: nowrap;
}
.card .table > tbody > tr > td {
    padding: .7rem .75rem;
    vertical-align: middle;
    font-size: var(--fz-text-base);
    border-bottom: 1px solid var(--fz-border);
}
.card .table.table-striped { --bs-table-striped-bg: rgba(130, 130, 150, .035); }
.card .table > tbody > tr:hover > * { background-color: var(--fz-accent-soft) !important; }
.card .table > tbody > tr:last-child > td { border-bottom: 0; }

/* Row action buttons */
.card .table td .btn.btn-outline-primary { border-color: transparent; background: var(--fz-accent-soft); color: var(--fz-primary); }
.card .table td .btn.btn-outline-primary:hover { background: var(--fz-primary); color: var(--fz-ink-inverse); }
.card .table td .btn.btn-outline-danger { border-color: transparent; background: var(--fz-danger-soft); color: var(--fz-danger); }
.card .table td .btn.btn-outline-danger:hover { background: var(--fz-danger); color: var(--fz-ink-inverse); }

/* ---------- Badges ---------------------------------------------------- */
.badge {
    border-radius: var(--fz-radius-pill);
    font-size: var(--fz-text-xs);
    font-weight: var(--fz-weight-semibold);
    padding: .35em .7em;
    line-height: 1.4;
}
.badge.bg-success   { background: var(--fz-success-soft) !important; color: var(--fz-success) !important; }
.badge.bg-danger    { background: var(--fz-danger-soft) !important;  color: var(--fz-danger) !important; }
.badge.bg-warning   { background: var(--fz-warning-soft) !important; color: var(--fz-warning) !important; }
.badge.bg-info      { background: var(--fz-info-soft) !important;    color: var(--fz-info) !important; }
.badge.bg-primary   { background: var(--fz-accent-soft) !important;  color: var(--fz-primary) !important; }
.badge.bg-secondary { background: var(--fz-neutral-soft) !important; color: var(--fz-neutral) !important; }
.badge.bg-light     { background: var(--fz-surface-alt) !important;  color: var(--fz-ink-muted) !important; }

/* Status pill with a leading dot — the shared status vocabulary */
.fz-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: var(--fz-radius-pill);
    font-size: var(--fz-text-xs);
    font-weight: var(--fz-weight-semibold);
    padding: .35em .7em;
}
.fz-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.fz-status--success { background: var(--fz-success-soft); color: var(--fz-success); }
.fz-status--warning { background: var(--fz-warning-soft); color: var(--fz-warning); }
.fz-status--danger  { background: var(--fz-danger-soft);  color: var(--fz-danger); }
.fz-status--info    { background: var(--fz-info-soft);    color: var(--fz-info); }
.fz-status--neutral { background: var(--fz-neutral-soft); color: var(--fz-neutral); }

/* ---------- Avatars ---------------------------------------------------- */
.fz-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fz-weight-bold);
    font-size: var(--fz-text-sm);
    color: var(--fz-ink);
    object-fit: cover;
    flex-shrink: 0;
}
.fz-avatar-sm { width: 32px; height: 32px; font-size: var(--fz-text-xs); }
.fz-avatar-lg { width: 56px; height: 56px; font-size: var(--fz-text-md); }
.fz-avatar-xl { width: 96px; height: 96px; font-size: var(--fz-text-xl); }

/* ---------- Tabs ------------------------------------------------------- */
.nav-tabs {
    border-bottom: 1px solid var(--fz-border);
    gap: .25rem;
}
.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: .5rem .85rem;
    font-size: var(--fz-text-base);
    font-weight: var(--fz-weight-medium);
    color: var(--fz-ink-muted);
}
.nav-tabs .nav-link:hover { color: var(--fz-ink); border-bottom-color: var(--fz-border-strong); }
.nav-tabs .nav-link.active {
    color: var(--fz-primary);
    background: transparent;
    border-bottom-color: var(--fz-primary);
}
.nav-pills .nav-link {
    border-radius: var(--fz-radius-md);
    font-size: var(--fz-text-base);
    font-weight: var(--fz-weight-medium);
    color: var(--fz-ink-body);
    padding: .4rem .8rem;
}
.nav-pills .nav-link.active { background: var(--fz-accent-soft); color: var(--fz-primary); }

/* ---------- Overlays: dropdowns, modals, offcanvas --------------------- */
.dropdown-menu,
.modal-content,
.offcanvas,
.select2-dropdown {
    border: 1px solid var(--fz-border) !important;
    border-radius: var(--fz-radius) !important;
    box-shadow: var(--fz-shadow-lg) !important;
}
.dropdown-menu {
    padding: .3rem;
    font-size: var(--fz-text-base);
}
.dropdown-item {
    border-radius: var(--fz-radius-sm);
    padding: .45rem .6rem;
    color: var(--fz-ink-body);
}
.dropdown-item:hover,
.dropdown-item:focus { background: var(--fz-hover); color: var(--fz-ink); }
.dropdown-divider { border-color: var(--fz-border); }

.modal-header,
.offcanvas-header {
    border-bottom: 1px solid var(--fz-border);
    padding: var(--fz-space-4) var(--fz-space-5);
}
.modal-title { font-size: var(--fz-text-lg); font-weight: var(--fz-weight-semibold); color: var(--fz-ink); }
.modal-body { padding: var(--fz-space-5); }
.modal-footer {
    border-top: 1px solid var(--fz-border);
    padding: var(--fz-space-3) var(--fz-space-5);
    gap: var(--fz-space-2);
}
.modal-backdrop.show { opacity: .35; }

/* ---------- Alerts ------------------------------------------------------ */
.alert {
    border-radius: var(--fz-radius);
    border: 1px solid var(--fz-border);
    font-size: var(--fz-text-base);
    padding: var(--fz-space-3) var(--fz-space-4);
}

/* ---------- Pagination --------------------------------------------------- */
.pagination { --bs-pagination-border-radius: var(--fz-radius-sm); }
.pagination .page-link {
    border: 0;
    border-radius: var(--fz-radius-sm);
    margin: 0 2px;
    color: var(--fz-ink-body);
    font-size: var(--fz-text-sm);
}
.pagination .page-item.active .page-link { background: var(--fz-accent); color: var(--fz-ink-inverse); }
.pagination .page-link:hover { background: var(--fz-accent-soft); }
.pagination .page-item.disabled .page-link { opacity: .5; }

/* ---------- States: empty / loading / error ------------------------------ */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--fz-space-7) var(--fz-space-4);
    color: var(--fz-ink-muted);
}
.empty-state .empty-state-icon {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: var(--fz-space-2);
    color: var(--fz-ink-subtle);
}
.empty-state .empty-state-title {
    font-weight: var(--fz-weight-semibold);
    color: var(--fz-ink);
    margin-bottom: .2rem;
}
.empty-state .empty-state-text {
    margin-bottom: var(--fz-space-4);
    font-size: var(--fz-text-sm);
}

.ajax-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--fz-space-2);
    min-height: 150px;
    font-size: var(--fz-text-sm);
    color: var(--fz-ink-muted);
}
.ajax-loading .spinner-border { width: 1.25rem; height: 1.25rem; }

.fz-error-state {
    display: flex;
    align-items: center;
    gap: var(--fz-space-2);
    padding: var(--fz-space-3) var(--fz-space-4);
    border-radius: var(--fz-radius);
    background: var(--fz-danger-soft);
    color: var(--fz-danger);
    font-size: var(--fz-text-sm);
}

/* ---------- App chrome: sidebar + header --------------------------------- */
.sidebar-wrapper { box-shadow: var(--fz-shadow-md); }
.top-header { box-shadow: var(--fz-shadow-sm); }

.fz-timer-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .55rem;
    border-radius: var(--fz-radius-md);
    background: var(--fz-accent-soft);
    font-size: var(--fz-text-sm);
}
.fz-timer-chip .material-icons-outlined { font-size: var(--fz-icon); color: var(--fz-primary); }
.fz-timer-chip .fz-timer { color: var(--fz-primary); }

/* ---------- Detail lists (label / value pairs on record screens) --------- */
.fz-detail-list {
    display: flex;
    flex-direction: column;
}
.fz-detail-row {
    display: flex;
    align-items: baseline;
    gap: var(--fz-space-3);
    padding: .55rem 0;
    border-bottom: 1px solid var(--fz-border);
}
.fz-detail-row:last-child { border-bottom: 0; }
.fz-detail-label {
    flex: 0 0 40%;
    max-width: 180px;
    font-size: var(--fz-text-sm);
    color: var(--fz-ink-muted);
}
.fz-detail-value {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--fz-text-base);
    font-weight: var(--fz-weight-medium);
    color: var(--fz-ink);
    word-break: break-word;
}
.fz-detail-value.is-empty { color: var(--fz-ink-subtle); font-weight: 400; }

/* Stacked amount rows (salary breakdown) */
.fz-amount-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fz-space-3);
    padding: .5rem 0;
    border-bottom: 1px dashed var(--fz-border);
    font-size: var(--fz-text-base);
}
.fz-amount-row:last-child { border-bottom: 0; }
.fz-amount-row .fz-amount-value { font-weight: var(--fz-weight-semibold); color: var(--fz-ink); white-space: nowrap; }
.fz-amount-row.is-total {
    border-top: 1px solid var(--fz-border-strong);
    border-bottom: 0;
    margin-top: .25rem;
    padding-top: .6rem;
    font-weight: var(--fz-weight-semibold);
}

/* ---------- Reveal toggle (sensitive data hidden until asked for) -------- */
/* Pairs with a Bootstrap collapse trigger: Bootstrap keeps `.collapsed` on
   the button while the target is hidden, so the label/icon swap needs no JS. */
.fz-reveal-hide { display: none; }
[data-bs-toggle="collapse"]:not(.collapsed) .fz-reveal-show { display: none; }
[data-bs-toggle="collapse"]:not(.collapsed) .fz-reveal-hide { display: inline; }

.fz-reveal-placeholder {
    display: flex;
    align-items: center;
    gap: var(--fz-space-2);
    font-size: var(--fz-text-sm);
    color: var(--fz-ink-subtle);
}
/* Swap the placeholder out once its sibling collapse opens. The trigger lives
   in the card header, so :has() on the shared parent is what links them. */
:has(> .collapse.show) > .fz-reveal-placeholder { display: none; }

/* ---------- Document chip (uploaded files on record screens) ------------- */
.fz-doc-chip {
    display: flex;
    align-items: center;
    gap: var(--fz-space-3);
    padding: var(--fz-space-3);
    border: 1px solid var(--fz-border);
    border-radius: var(--fz-radius-md);
    background: var(--fz-surface);
}
.fz-doc-chip-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--fz-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--fz-accent-soft);
    color: var(--fz-primary);
}
.fz-doc-chip-meta { min-width: 0; flex: 1 1 auto; }
.fz-doc-chip-name {
    font-size: var(--fz-text-base);
    font-weight: var(--fz-weight-medium);
    color: var(--fz-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fz-doc-chip-sub { font-size: var(--fz-text-xs); color: var(--fz-ink-muted); }

/* ---------- Text helpers (so templates stop reaching for inline styles) --- */
.fz-text-xs { font-size: var(--fz-text-xs); }
.fz-text-sm { font-size: var(--fz-text-sm); }
.fz-text-md { font-size: var(--fz-text-md); }
.fz-muted { color: var(--fz-ink-muted); }
.fz-subtle { color: var(--fz-ink-subtle); }

/* =========================================================================
   RESPONSIVE PASS
   Desktop-first; these only tighten things down as the viewport narrows.
   ========================================================================= */
@media (max-width: 991.98px) {
    .card > .card-body { padding: var(--fz-space-4); }
    .card .card-header { padding: var(--fz-space-3) var(--fz-space-4); }
    .modal-header,
    .modal-body { padding: var(--fz-space-4); }
    .modal-footer { padding: var(--fz-space-3) var(--fz-space-4); }
}

@media (max-width: 767.98px) {
    .fz-page-head { gap: var(--fz-space-2); flex-wrap: wrap; }
    .fz-page-head-icon { width: 38px; height: 38px; }
    .fz-page-title { font-size: var(--fz-text-lg); }
    /* Page actions drop to their own row and stretch, rather than squeezing */
    .fz-page-head > .d-flex.flex-shrink-0 { width: 100%; }
    .fz-page-head > .d-flex.flex-shrink-0 > .btn { flex: 1 1 auto; justify-content: center; }

    .card > .card-body { padding: var(--fz-space-3); }
    .card .table > thead > tr > th,
    .card .table > tbody > tr > td { padding: .6rem .5rem; }

    /* Full-width form controls and buttons in stacked layouts */
    .modal-footer > .btn { flex: 1 1 auto; }
}

@media (max-width: 575.98px) {
    .fz-page-subtitle { display: none; }   /* keep the title, drop the blurb */
    .empty-state { padding: var(--fz-space-5) var(--fz-space-3); }
}

/* =========================================================================
   5. FEATURE BLOCKS
   ========================================================================= */

/* Section labels — compact SaaS scale. A proper muted tone (the same
   secondary color used everywhere else in the app), not an opacity fade,
   which was washing the labels out to near-illegible. */
.sidebar-wrapper .metismenu .menu-label {
    text-transform: uppercase;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .10em;
    color: var(--fz-primary);
    padding: 0 1.1rem;
    margin: .95rem 0 .25rem;
}
.sidebar-wrapper .metismenu > li:first-child.menu-label { margin-top: .1rem; }

/* A rule closes each section: drawn above every label but the first, so
   it sits under the previous section's last item. */
.sidebar-wrapper .metismenu > li.menu-label:not(:first-child) {
    border-top: 1px solid var(--fz-border);
    margin: .7rem .6rem .25rem;
    padding: .75rem .5rem 0;
}

/* Navy disappears on the dark sidebar — use a lighter tint of the brand. */
[data-bs-theme="dark"] .sidebar-wrapper .metismenu .menu-label { color: #8fb0e0; }
[data-bs-theme="dark"] .sidebar-wrapper .metismenu > li.menu-label:not(:first-child) { border-top-color: rgba(255, 255, 255, .10); }

/* Top-level items — smaller text, tighter spacing. One neutral ink color
   for every item's text + icon (icons carry no color of their own, so they
   always match the label — no more mismatched per-item rainbow icons). */
.sidebar-wrapper .metismenu > li { margin: 1px 0; }
.sidebar-wrapper .metismenu li a {
    border-radius: var(--fz-radius-sm);
    margin: 0 9px;
    padding: 7px 11px;
    font-size: .84rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--fz-ink-body);
    transition: background-color .15s ease, color .15s ease;
}
.sidebar-wrapper .metismenu li a .parent-icon { transition: color .15s ease; }
.sidebar-wrapper .metismenu li a .parent-icon .material-icons-outlined,
.sidebar-wrapper .metismenu li a .parent-icon i {
    font-size: 20px;
    color: inherit;
}
.sidebar-wrapper .metismenu li a .menu-title { font-size: .84rem; }

/* Hover (non-active) — icon + text both shift to the brand accent, not just the background */
.sidebar-wrapper .metismenu li a:hover {
    background: var(--fz-hover);
    color: var(--fz-accent);
}

/* Active state — soft brand pill; icon inherits the same accent color */
.sidebar-wrapper .metismenu li.mm-active > a,
.sidebar-wrapper .metismenu li a.mm-active {
    background: var(--fz-accent-soft) !important;
    color: var(--fz-accent) !important;
    font-weight: 600;
}

/* Submenu (e.g. Branch → Department) */
.sidebar-wrapper .metismenu ul { padding-left: .3rem; }
.sidebar-wrapper .metismenu ul li a {
    padding: 6px 11px;
    font-size: .82rem;
}

/* Announcement counter badge stays aligned */
.sidebar-wrapper .metismenu .menu-title.justify-content-between { display: flex; align-items: center; }

/* =========================================================
   Sidebar shell — logo / scrolling nav / pinned account.
   The template scrolled the whole aside and pinned the header
   with position:fixed; a flex column instead lets the nav
   scroll on its own so the account block stays put at the
   bottom (simplebar now wraps .sidebar-nav, not the aside).
   ========================================================= */
.sidebar-wrapper {
    display: flex;
    flex-direction: column;
}
.sidebar-wrapper .sidebar-header {
    position: static;
    width: auto;
    flex-shrink: 0;
    border-bottom: 1px solid var(--fz-border);
    gap: .75rem;
}
/* Brand lockup: the logo and wordmark are the first thing on every screen,
   so they get real weight instead of the template's small default. Header
   height stays 70px to line up with the top bar. */
.sidebar-wrapper .sidebar-header .logo-img {
    width: auto;
    height: 44px;
    max-width: 56px;
    object-fit: contain;
}
.sidebar-wrapper .sidebar-header .logo-name h2 {
    font-size: 1.6rem !important;
    font-weight: var(--fz-weight-bold);
    letter-spacing: -.02em;
    line-height: 1;
    color: var(--fz-navy);
}
[data-bs-theme="dark"] .sidebar-wrapper .sidebar-header .logo-name h2 { color: var(--fz-ink-inverse); }
.sidebar-wrapper .sidebar-nav {
    margin-top: 0;
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.fz-sidebar-footer {
    flex-shrink: 0;
    padding: .6rem;
    border-top: 1px solid var(--fz-border);
    background: var(--fz-surface);
}

.fz-sidebar-user {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .45rem .5rem;
    border-radius: var(--fz-radius-md);
    color: var(--fz-ink-body);
    text-decoration: none;
    transition: background-color .15s ease;
}
.fz-sidebar-user:hover { background: var(--fz-hover); color: var(--fz-ink-body); }

.fz-sidebar-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.fz-sidebar-avatar--initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--fz-accent-soft);
    color: var(--fz-accent);
    font-size: .78rem;
    font-weight: 700;
}

.fz-sidebar-user-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.2;
}
.fz-sidebar-user-name {
    font-size: .84rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fz-sidebar-user-sub {
    font-size: .72rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fz-sidebar-user-caret {
    font-size: 18px;
    color: var(--bs-secondary-color);
    flex-shrink: 0;
}

/* Collapsed rail (body.toggled): avatar only */
@media screen and (min-width: 1199px) {
    body.toggled:not(.sidebar-hovered) .fz-sidebar-footer { padding: .6rem .5rem; }
    body.toggled:not(.sidebar-hovered) .fz-sidebar-user { justify-content: center; }
    body.toggled:not(.sidebar-hovered) .fz-sidebar-user-meta,
    body.toggled:not(.sidebar-hovered) .fz-sidebar-user-caret { display: none; }
}

/* =========================================================
   Header greeting
   ========================================================= */
.header-greeting { line-height: 1.15; }
.header-greeting .greeting-line {
    font-size: 1.05rem;
    font-weight: 600;
}
.header-greeting .greeting-name {
    font-weight: 700;
    color: var(--fz-accent);
}
.header-greeting .greeting-sub {
    display: block;
    font-size: .78rem;
    opacity: .6;
    margin-top: 1px;
}
.header-greeting .greeting-wave {
    display: inline-block;
    transform-origin: 70% 70%;
    animation: fzWave 2.4s ease-in-out infinite;
}
@keyframes fzWave {
    0%, 60%, 100% { transform: rotate(0deg); }
    10%, 30% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    40% { transform: rotate(-4deg); }
}
@media (max-width: 575.98px) {
    .header-greeting .greeting-line { font-size: .95rem; }
    .header-greeting .greeting-sub { display: none; }
}

/* =========================================================
   List / DataTable pages (shared by every list view)
   ========================================================= */

/* Page title */
.page-breadcrumb .breadcrumb-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--bs-emphasis-color);
}

/* Brand focus ring on inputs / selects */
.form-control:focus,
.form-select:focus {
    border-color: var(--fz-primary);
    box-shadow: 0 0 0 .18rem rgba(30, 58, 99, .16);
}

/* Table card body a touch airier */
.card > .card-body { padding: 1.1rem 1.25rem; }
.card .table { margin-bottom: 0; }

/* =========================================================
   Form section dividers — break up long/dense forms into
   clearly labelled logical groups (e.g. employee create/edit).
   ========================================================= */
.fz-form-section {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--fz-primary);
    margin: 1.4rem 0 .9rem;
}
.fz-form-section:first-child { margin-top: 0; }
.fz-form-section .material-icons-outlined { font-size: 16px; }
.fz-form-section::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--fz-border-strong);
}

/* Table header — uppercase, muted, subtle divider */
.card .table > thead > tr > th {
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .04em;
    font-weight: 700;
    color: var(--bs-secondary-color);
    border-bottom: 1px solid var(--fz-border-strong);
    padding: .85rem .75rem;
    white-space: nowrap;
}

/* Table body — comfortable rows, soft separators, hover */
.card .table > tbody > tr > td {
    padding: .8rem .75rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--fz-border);
}
.card .table.table-striped { --bs-table-striped-bg: rgba(130, 130, 150, .035); }
.card .table > tbody > tr:hover > * { background-color: rgba(30, 58, 99, .05) !important; }
.card .table > tbody > tr:last-child > td { border-bottom: 0; }

/* Soft pill status badges */
.badge { border-radius: var(--fz-radius-pill); font-weight: 600; padding: .38em .72em; }
.badge.bg-success { background: rgba(34, 197, 94, .14) !important; color: var(--fz-success) !important; }
.badge.bg-danger  { background: rgba(239, 68, 68, .14) !important; color: var(--fz-danger) !important; }
.badge.bg-warning { background: rgba(245, 158, 11, .16) !important; color: var(--fz-warning) !important; }
.badge.bg-info    { background: rgba(6, 182, 212, .14) !important; color: var(--fz-info) !important; }
.badge.bg-primary { background: rgba(30, 58, 99, .14) !important; color: var(--fz-primary) !important; }
.badge.bg-secondary { background: rgba(100, 116, 139, .16) !important; color: var(--fz-neutral) !important; }

/* Row action buttons — soft recolor of the common edit/delete icons
   (scoped to outline variants so text buttons keep their own sizing) */
.card .table td .btn.btn-outline-primary { border-color: transparent; background: rgba(30, 58, 99, .12); color: var(--fz-primary); }
.card .table td .btn.btn-outline-primary:hover { background: var(--fz-primary); color: var(--fz-surface); }
.card .table td .btn.btn-outline-danger { border-color: transparent; background: rgba(239, 68, 68, .12); color: var(--fz-danger); }
.card .table td .btn.btn-outline-danger:hover { background: var(--fz-danger); color: var(--fz-surface); }

/* Search + Create toolbar → merged into the top of the table card
   (one continuous white block, all list pages) */
.row.justify-content-between:has(#input_search) {
    background: var(--bs-card-bg);
    margin: 0;
    padding: 1rem 1.25rem;
    border-radius: var(--fz-radius) var(--fz-radius) 0 0;
    border-bottom: 1px solid var(--fz-border);
    box-shadow: var(--fz-shadow-sm);
    align-items: center;
    row-gap: .5rem;
}
/* The table card sits flush beneath the toolbar as the same block */
.row.justify-content-between:has(#input_search) + .card {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 0;
    margin-top: 0;
}

/* Remove the "Show N entries" length control everywhere */
.dataTables_wrapper .dataTables_length,
.dataTables_length { display: none !important; }

/* DataTables chrome (search / length / info / pagination) */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: var(--fz-radius-md);
    border: 1px solid var(--fz-border-strong);
    padding: .35rem .6rem;
}
.dataTables_wrapper .dataTables_info {
    color: var(--bs-secondary-color);
    font-size: .85rem;
    padding-top: 1rem;
}
.dataTables_wrapper .pagination { margin-top: .5rem; }
.dataTables_wrapper .pagination .page-link {
    border: 0;
    border-radius: var(--fz-radius-sm);
    margin: 0 3px;
    color: var(--bs-body-color);
    font-size: .88rem;
}
.dataTables_wrapper .pagination .page-item.active .page-link {
    background: var(--fz-accent);
    color: var(--fz-surface);
}
.dataTables_wrapper .pagination .page-link:hover { background: rgba(30, 58, 99, .10); }

/* =========================================================
   Attendance — card grid view (stat cards, filter toolbar,
   employee cards, grid/list toggle).
   ========================================================= */
.fz-productivity-delta {
    font-size: .78rem;
    font-weight: 600;
}

.fz-attendance-toolbar .form-select,
.fz-attendance-toolbar .form-control {
    border-radius: var(--fz-radius-md);
}
.fz-view-toggle .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .45rem .6rem;
}
.fz-view-toggle .btn.active {
    background: var(--fz-primary);
    border-color: var(--fz-primary);
    color: var(--fz-surface);
}

.fz-attendance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
@media (max-width: 1199.98px) {
    .fz-attendance-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
    .fz-attendance-grid { grid-template-columns: 1fr; }
}
.fz-attendance-grid.fz-attendance-grid--list {
    grid-template-columns: 1fr;
}

.fz-emp-card {
    border: 1px solid var(--fz-border-strong);
    border-radius: var(--fz-radius);
    padding: 1.1rem;
    background: var(--fz-surface);
    transition: box-shadow .15s ease-in-out, border-color .15s ease-in-out;
}
.fz-emp-card:hover {
    box-shadow: var(--fz-shadow-md);
}
.fz-emp-card.is-present {
    background: rgba(40, 167, 69, .06);
    border-color: rgba(40, 167, 69, .25);
}

.fz-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .82rem;
    color: var(--fz-ink);
    object-fit: cover;
    flex-shrink: 0;
}

.fz-emp-card .btn-icon-only {
    background: transparent;
    border: 0;
    line-height: 1;
}

.fz-emp-card-row {
    border-top: 1px dashed var(--fz-border-strong);
    border-bottom: 1px dashed var(--fz-border-strong);
    padding: .6rem 0;
}
.fz-emp-stat-label {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .72rem;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.fz-emp-stat-label .material-icons-outlined {
    font-size: 14px;
}
.fz-emp-stat-value {
    font-weight: 600;
    font-size: .92rem;
}
.dataTables_wrapper .pagination .page-item.disabled .page-link { opacity: .5; }

/* =========================================================
   Employees — list/grid view (status dot on avatar, department
   badges, action menu). Shares .fz-avatar / .fz-emp-card /
   .fz-attendance-grid / .fz-view-toggle with the Attendance page.
   ========================================================= */
.fz-status-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--fz-surface);
}
.fz-dot-success { background: var(--fz-success); }
.fz-dot-secondary { background: var(--fz-ink-subtle); }

.fz-dept-badge {
    font-weight: 600;
    font-size: .74rem;
    padding: .35em .65em;
}

.fz-employee-table thead th {
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
    border-bottom: 1px solid var(--fz-border-strong);
    white-space: nowrap;
}
.fz-employee-table td {
    border-bottom: 1px solid var(--fz-border);
    vertical-align: middle;
}
.fz-employee-table tbody tr:last-child td {
    border-bottom: 0;
}

/* =========================================================
   Attendance Details modal — summary tiles, punch timeline,
   activity-summary table (shared by admin + employee).
   ========================================================= */
.fz-ad-status-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-weight: 600;
    padding: .4em .75em;
}
.fz-ad-status-badge .material-icons-outlined {
    font-size: 10px;
}

.fz-ad-tile {
    display: flex;
    align-items: center;
    gap: .75rem;
    border: 1px solid var(--fz-border-strong);
    border-radius: var(--fz-radius-lg);
    padding: .75rem .9rem;
    height: 100%;
}
.fz-ad-tile-highlight {
    background: rgba(13, 110, 253, .05);
    border-color: rgba(13, 110, 253, .2);
}
.fz-ad-tile-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fz-ad-timeline {
    display: flex;
    align-items: flex-start;
    gap: 0;
    overflow-x: auto;
    padding: .5rem 0 .25rem;
    position: relative;
}
.fz-ad-timeline-item {
    flex: 1 0 90px;
    text-align: center;
    position: relative;
    padding-top: 10px;
}
.fz-ad-timeline-item::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--fz-border-strong);
}
.fz-ad-timeline-item:first-child::before { left: 50%; }
.fz-ad-timeline-item:last-child::before { right: 50%; }
.fz-ad-dot {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--fz-surface);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
}
.fz-ad-time {
    font-size: .74rem;
    font-weight: 700;
    color: var(--fz-ink);
    margin-top: .5rem;
}
.fz-ad-label {
    font-size: .7rem;
    color: var(--bs-secondary-color);
}

.fz-ad-total-break {
    background: rgba(30, 58, 99, .08);
    color: var(--fz-primary);
    border-radius: var(--fz-radius-sm);
    padding: .35em .7em;
    font-size: .82rem;
}

.fz-ad-type-icon {
    width: 30px;
    height: 30px;
    border-radius: var(--fz-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: .5rem;
}
.fz-ad-type-icon .material-icons-outlined {
    font-size: 16px;
}
.fz-ad-duration-pill {
    border-radius: var(--fz-radius-sm);
    padding: .3em .65em;
    font-weight: 700;
    font-size: .78rem;
}

/* =========================================================
   Admin Leaves list — clickable stat-card filters, status
   badges, leave-type badges.
   ========================================================= */
.fz-leave-stat-card {
    cursor: pointer;
    border: 1px solid transparent;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.fz-leave-stat-card:hover {
    box-shadow: var(--fz-shadow-md);
}
.fz-leave-stat-card.active {
    border-color: var(--fz-primary);
}

.fz-leave-type-badge {
    border-radius: var(--fz-radius-sm);
    padding: .3em .7em;
    font-size: .78rem;
    font-weight: 700;
}

.fz-leave-status-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border-radius: var(--fz-radius-sm);
    padding: .35em .75em;
    font-size: .78rem;
    font-weight: 700;
}
.fz-leave-status-badge .material-icons-outlined {
    font-size: 9px;
}

/* =========================================================
   Row action dropdown clipped by .table-responsive's implicit
   overflow-y — see include/script.blade.php for the JS that
   toggles this class while the menu is open.
   ========================================================= */
.table-responsive.fz-dropdown-open {
    overflow: visible;
}

/* =========================================================
   Settings — side nav + shared form chrome.
   Mirrors the main sidebar's ink/accent-pill language so the
   two navigations read as one system.
   ========================================================= */
.fz-settings-nav-label {
    text-transform: uppercase;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .10em;
    color: var(--bs-secondary-color);
    padding: 0 .75rem;
    margin: .85rem 0 .3rem;
}
.fz-settings-nav .card-body > .fz-settings-nav-label:first-child { margin-top: .25rem; }

.fz-settings-nav-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .75rem;
    border-radius: var(--fz-radius-sm);
    font-size: .84rem;
    font-weight: 500;
    color: var(--fz-ink-body);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.fz-settings-nav-item .material-icons-outlined { font-size: 20px; color: inherit; }
.fz-settings-nav-item:hover {
    background: var(--fz-hover);
    color: var(--fz-accent);
}
.fz-settings-nav-item.active {
    background: var(--fz-accent-soft);
    color: var(--fz-accent);
    font-weight: 600;
}

/* Signature capture pads (Software Setup). The canvas keeps its intrinsic
   400x200 size — scaling it with CSS would skew SignaturePad's pointer
   coordinates — so the wrapper scrolls instead of stretching it. */
.fz-sign-pad {
    border: 1px solid var(--fz-border);
    border-radius: var(--fz-radius-lg);
    background: var(--fz-surface);
    max-width: 100%;
    overflow: auto;
}
.fz-sign-pad canvas { display: block; touch-action: none; }

/* Salary Settings — earning/deduction repeater rows.
   The repeater plugin rebuilds cloned rows as a bare <div class="items">,
   so row styling lives on the inner .fz-repeat-row wrapper (which is part
   of the cloned innerHTML) rather than on .items itself. */
.fz-repeat-row,
.fz-repeat-head {
    display: grid;
    gap: .6rem;
    align-items: center;
}
.fz-repeat-row--earning { grid-template-columns: minmax(0, 1fr) 190px 42px; }
.fz-repeat-row--deduction { grid-template-columns: minmax(0, 1fr) 170px 170px 42px; }
.fz-repeat-row--statutory { grid-template-columns: minmax(0, 1fr) 160px 180px auto; }

.fz-repeat-head {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
    padding: 0 .75rem .35rem;
}

.fz-salary-repeat .items + .items,
.fz-salary-repeat #repeater .items,
.fz-salary-repeat #repeater_deduction .items { margin-top: .5rem; }

.fz-repeat-row {
    border: 1px solid var(--fz-border);
    border-radius: var(--fz-radius-lg);
    background: var(--fz-surface);
    padding: .6rem .75rem;
}

.fz-repeat-remove {
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: transparent;
    background: rgba(239, 68, 68, .1);
    color: var(--fz-danger);
}
.fz-repeat-remove:hover { background: var(--fz-danger); color: var(--fz-surface); }

.fz-repeat-total {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .9rem;
    padding: .4rem .75rem;
    border-radius: var(--fz-radius-pill);
    font-size: .8rem;
    font-weight: 600;
}
.fz-repeat-total.is-ok { background: rgba(34, 197, 94, .14); color: var(--fz-success); }
.fz-repeat-total.is-off { background: rgba(245, 158, 11, .16); color: var(--fz-warning); }

@media (max-width: 767.98px) {
    .fz-repeat-head { display: none; }
    .fz-repeat-row--earning,
    .fz-repeat-row--deduction { grid-template-columns: minmax(0, 1fr) 42px; }
    .fz-repeat-row--statutory,
    .fz-repeat-row--deduction > select,
    .fz-repeat-row--deduction > input[type="number"] { grid-column: 1 / -1; }
}

/* Small square preview for logo/favicon uploads */
.fz-setting-thumb {
    width: 44px;
    height: 44px;
    border-radius: var(--fz-radius-md);
    object-fit: contain;
    border: 1px solid var(--fz-border);
    background: var(--fz-surface);
    padding: 3px;
    flex-shrink: 0;
}

/* =========================================================================
   LIST SURFACE (x-table-card)
   One card for every list screen: page name left, search / filters / actions
   right, table below, pager bottom-right.
   ========================================================================= */
.fz-table-card { margin-bottom: var(--fz-space-4); }

.fz-table-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fz-space-3);
    flex-wrap: wrap;
    padding: var(--fz-space-4) var(--fz-space-5);
    border-bottom: 1px solid var(--fz-border);
}
.fz-table-card-heading { min-width: 0; }
.fz-table-card-title {
    margin: 0;
    font-size: var(--fz-text-md);
    font-weight: var(--fz-weight-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fz-ink);
}
.fz-table-card-subtitle {
    margin: 2px 0 0;
    font-size: var(--fz-text-sm);
    color: var(--fz-ink-muted);
}

/* Toolbar: search first, then filters, then the page's primary action. */
.fz-table-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--fz-space-2);
    flex-wrap: wrap;
    margin-left: auto;
}
.fz-table-tools .form-select,
.fz-table-tools .form-control,
.fz-table-tools .select2-container { min-width: 160px; width: auto; }
.fz-table-tools .btn { white-space: nowrap; }

/* Search box with a leading icon, sized so it never dominates the header. */
.fz-table-search { position: relative; flex: 0 1 260px; min-width: 200px; }
.fz-table-search .material-icons-outlined {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    font-size: var(--fz-icon);
    color: var(--fz-ink-subtle);
    pointer-events: none;
}
.fz-table-search .form-control {
    padding-left: 34px;
    border-radius: var(--fz-radius-pill);
    background: var(--fz-surface-alt);
    border-color: var(--fz-border);
    min-width: 0;
    width: 100%;
}
.fz-table-search .form-control:focus { background: var(--fz-surface); }

/* The table itself sits edge-to-edge; the head/foot carry the padding. */
.fz-table-card-body { padding: 0; }
.fz-table-card .table { margin-bottom: 0; }
.fz-table-card .table > thead > tr > th { background: var(--fz-surface-alt); }
.fz-table-card .table > thead > tr > th:first-child,
.fz-table-card .table > tbody > tr > td:first-child { padding-left: var(--fz-space-5); }
.fz-table-card .table > thead > tr > th:last-child,
.fz-table-card .table > tbody > tr > td:last-child { padding-right: var(--fz-space-5); }

.fz-table-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fz-space-3);
    flex-wrap: wrap;
    padding: var(--fz-space-3) var(--fz-space-5);
    border-top: 1px solid var(--fz-border);
}
.fz-table-card-foot .pagination { margin-bottom: 0; margin-left: auto; }

@media (max-width: 767.98px) {
    .fz-table-card-head { align-items: stretch; }
    .fz-table-tools { width: 100%; justify-content: flex-start; }
    .fz-table-search { flex: 1 1 100%; }
}

/* =========================================================================
   DATATABLES CHROME — info bottom-left, pager bottom-right, both inside the
   card footer rule so plugin tables match the hand-rolled ones.
   ========================================================================= */
.fz-table-card .dataTables_wrapper { position: relative; }
.fz-table-card .dataTables_wrapper .dataTables_filter { display: none; }

.fz-dt-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fz-space-3);
    flex-wrap: wrap;
    padding: var(--fz-space-3) var(--fz-space-5);
    border-top: 1px solid var(--fz-border);
}
.fz-dt-foot .dataTables_info {
    padding: 0 !important;
    font-size: var(--fz-text-sm);
    color: var(--fz-ink-muted);
}
.fz-dt-foot .dataTables_paginate { margin-left: auto; }
.fz-dt-foot .pagination { margin: 0; }

/* Pager: pill buttons, navy active state, muted arrows. */
.fz-table-card .pagination .page-link,
.fz-pager .page-link {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 2px;
    padding: 0 .5rem;
    border: 1px solid transparent;
    border-radius: var(--fz-radius-sm);
    background: transparent;
    color: var(--fz-ink-body);
    font-size: var(--fz-text-sm);
    font-weight: var(--fz-weight-medium);
    transition: background-color .15s ease, color .15s ease;
}
.fz-table-card .pagination .page-link:hover,
.fz-pager .page-link:hover { background: var(--fz-accent-soft); color: var(--fz-primary); }
.fz-table-card .pagination .page-item.active .page-link,
.fz-pager .page-item.active .page-link {
    background: var(--fz-primary);
    border-color: var(--fz-primary);
    color: var(--fz-ink-inverse);
}
.fz-table-card .pagination .page-item.disabled .page-link,
.fz-pager .page-item.disabled .page-link { color: var(--fz-ink-subtle); background: transparent; opacity: 1; }

/* Empty state rendered by DataTables. */
.fz-table-card .dataTables_empty {
    padding: var(--fz-space-7) var(--fz-space-5) !important;
    color: var(--fz-ink-subtle);
    font-size: var(--fz-text-sm);
}

/* Column headings are uppercase on every table, not only inside .card. */
.table > thead > tr > th {
    text-transform: uppercase;
    font-size: var(--fz-text-xs);
    letter-spacing: .04em;
    font-weight: var(--fz-weight-bold);
    color: var(--fz-ink-muted);
}

/* =========================================================================
   Leave review dialog — label/value pairs the admin reads before deciding.
   ========================================================================= */
.fz-review-list {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: .55rem 1rem;
    padding: var(--fz-space-3) var(--fz-space-4);
    background: var(--fz-surface-alt);
    border: 1px solid var(--fz-border);
    border-radius: var(--fz-radius-md);
}
.fz-review-list dt {
    font-size: var(--fz-text-xs);
    font-weight: var(--fz-weight-semibold);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--fz-ink-muted);
    padding-top: 1px;
}
.fz-review-list dd { margin: 0; font-size: var(--fz-text-base); color: var(--fz-ink); }
.fz-review-reason { white-space: pre-line; }

/* Employee side: the admin's reason under a rejected request. */
.fz-leave-reject-note {
    display: flex;
    gap: .35rem;
    margin-top: .35rem;
    padding: .4rem .6rem;
    font-size: var(--fz-text-sm);
    color: var(--fz-danger);
    background: var(--fz-danger-soft);
    border-radius: var(--fz-radius-sm);
    white-space: pre-line;
}
.fz-leave-reject-note .material-icons-outlined { font-size: var(--fz-icon-sm); margin-top: 2px; }

/* Dashboard clock card: the meeting in progress. */
.fz-clock-meeting {
    display: flex;
    gap: var(--fz-space-3);
    align-items: flex-start;
    padding: var(--fz-space-3) var(--fz-space-4);
    border-radius: var(--fz-radius-md);
    background: var(--fz-accent-soft);
    border: 1px solid var(--fz-border);
}
.fz-clock-meeting-icon { color: var(--fz-primary); font-size: var(--fz-icon-lg); margin-top: 1px; }
.fz-clock-meeting-summary {
    font-size: var(--fz-text-sm);
    white-space: pre-line;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================================================================
   Admin dashboard KPI cards
   ========================================================================= */
.fz-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--fz-space-4);
}
@media (max-width: 1199.98px) { .fz-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px)  { .fz-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 419.98px)  { .fz-kpi-grid { grid-template-columns: 1fr; } }

.fz-kpi { padding: var(--fz-space-4) var(--fz-space-5); }
.fz-kpi-top { display: flex; align-items: center; gap: var(--fz-space-3); }
.fz-kpi-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.fz-kpi-icon .material-icons-outlined { font-size: 24px; }
.fz-kpi-icon--primary { background: rgba(59, 130, 246, .14); color: #3b82f6; }
.fz-kpi-icon--success { background: var(--fz-success-soft); color: var(--fz-success); }
.fz-kpi-icon--warning { background: var(--fz-warning-soft); color: #d97706; }
.fz-kpi-icon--danger  { background: var(--fz-danger-soft);  color: var(--fz-danger); }
.fz-kpi-text { min-width: 0; }
.fz-kpi-value { font-size: var(--fz-text-2xl); font-weight: var(--fz-weight-bold); color: var(--fz-ink); line-height: 1.1; }
.fz-kpi-label { font-size: var(--fz-text-sm); color: var(--fz-ink-body); margin-top: 2px; }

.fz-kpi-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin: var(--fz-space-3) 0 0 calc(52px + var(--fz-space-3));
    padding: 3px 10px;
    border-radius: var(--fz-radius-sm);
    font-size: var(--fz-text-xs);
    font-weight: var(--fz-weight-semibold);
    width: fit-content;
}
.fz-kpi-pill .material-icons-outlined { font-size: 14px; }
.fz-kpi-pill--success { background: var(--fz-success-soft); color: var(--fz-success); }
.fz-kpi-pill--warning { background: var(--fz-warning-soft); color: var(--fz-warning); }
.fz-kpi-pill--danger  { background: var(--fz-danger-soft);  color: var(--fz-danger); }
.fz-kpi-pill--neutral { background: var(--fz-neutral-soft); color: var(--fz-neutral); }

/* Compact variant: pill sits inline at the end of the top row instead of on
   its own line below, so the card doesn't carry extra empty height when
   there's nothing else under the icon/value. Scoped so the default
   pill-below layout (Home, Project Time report) is untouched. */
.fz-kpi-grid--compact .fz-kpi { padding: var(--fz-space-3) var(--fz-space-4); }
.fz-kpi-grid--compact .fz-kpi-pill { margin: 0 0 0 auto; flex-shrink: 0; }

/* =========================================================================
   Admin dashboard — Team Status card
   ========================================================================= */
.fz-team-card { margin-top: var(--fz-space-4); }
.fz-team-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fz-space-3);
    flex-wrap: wrap;
    padding: var(--fz-space-4) var(--fz-space-5);
    border-bottom: 1px solid var(--fz-border);
}
.fz-team-title {
    margin: 0;
    font-size: var(--fz-text-md);
    font-weight: var(--fz-weight-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fz-ink);
}
.fz-team-subtitle { margin: 2px 0 0; font-size: var(--fz-text-sm); color: var(--fz-ink-muted); }
.fz-team-updated { font-size: var(--fz-text-xs); color: var(--fz-ink-subtle); }

.fz-team-row {
    display: grid;
    grid-template-columns: 28px minmax(180px, 320px) 150px minmax(140px, 1fr) 100px 110px 140px 40px;
    align-items: center;
    gap: var(--fz-space-3);
    padding: var(--fz-space-3) var(--fz-space-5);
    border-bottom: 1px solid var(--fz-border);
}
.fz-team-row:last-child { border-bottom: 0; }
.fz-team-row--head {
    padding-top: var(--fz-space-2);
    padding-bottom: var(--fz-space-2);
    background: var(--fz-surface-alt);
    font-size: var(--fz-text-xs);
    font-weight: var(--fz-weight-semibold);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--fz-ink-muted);
}
.fz-team-cell { min-width: 0; color: var(--fz-ink-body); font-size: var(--fz-text-sm); text-align: left; }
.fz-team-cell-num { color: var(--fz-ink-subtle); }
.fz-team-cell-muted { color: var(--fz-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fz-team-cell-person { display: flex; align-items: center; gap: var(--fz-space-3); }
.fz-team-cell-label { display: none; }
.fz-team-person { flex: 1 1 auto; min-width: 0; }
.fz-team-name { font-weight: var(--fz-weight-semibold); color: var(--fz-ink); }
.fz-team-meta {
    font-size: var(--fz-text-xs);
    color: var(--fz-ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fz-team-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--fz-text-sm);
    font-weight: var(--fz-weight-semibold);
    white-space: nowrap;
    color: var(--fz-ink-body);
}
.fz-team-status .fz-team-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.fz-team-status--success .fz-team-status-dot { background: var(--fz-success); }
.fz-team-status--primary .fz-team-status-dot { background: var(--fz-primary); }
.fz-team-status--warning .fz-team-status-dot { background: var(--fz-warning); }
.fz-team-status--info    .fz-team-status-dot { background: var(--fz-info); }
.fz-team-status--neutral .fz-team-status-dot { background: var(--fz-neutral); }

.fz-team-avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.fz-team-avatar-dot {
    position: absolute; right: -1px; bottom: -1px;
    width: 10px; height: 10px; border-radius: 50%;
    border: 2px solid var(--fz-surface);
}
.fz-team-avatar-dot--success { background: var(--fz-success); }
.fz-team-avatar-dot--primary { background: var(--fz-primary); }
.fz-team-avatar-dot--warning { background: var(--fz-warning); }
.fz-team-avatar-dot--info    { background: var(--fz-info); }
.fz-team-avatar-dot--neutral { background: var(--fz-neutral); }

.fz-team-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    margin-left: 6px;
    border-radius: var(--fz-radius-pill);
    font-size: var(--fz-text-2xs);
    font-weight: var(--fz-weight-semibold);
}
.fz-team-tag--success { background: var(--fz-success-soft); color: var(--fz-success); }
.fz-team-tag--danger  { background: var(--fz-danger-soft);  color: var(--fz-danger); }

.fz-device-badge { display: inline-flex; align-items: center; gap: .3rem; justify-content: flex-start; flex-shrink: 0; color: var(--fz-ink-body); }
.fz-device-badge .material-icons-outlined { font-size: 18px; color: var(--fz-ink-muted); }

.fz-team-duration {
    font-size: var(--fz-text-sm);
    font-weight: var(--fz-weight-semibold);
    color: var(--fz-ink);
    font-variant-numeric: tabular-nums;
}
.fz-team-empty { padding: var(--fz-space-7); text-align: center; color: var(--fz-ink-subtle); font-size: var(--fz-text-sm); }

.fz-team-action-btn {
    width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent;
    color: var(--fz-ink-muted);
    transition: background .15s ease, color .15s ease;
}
.fz-team-action-btn:hover { background: var(--fz-surface-alt); color: var(--fz-ink); }
.fz-team-cell-action { display: flex; justify-content: flex-end; }

@media (max-width: 767.98px) {
    .fz-team-row--head { display: none; }
    .fz-team-row {
        display: flex;
        flex-wrap: wrap;
        row-gap: var(--fz-space-2);
        column-gap: var(--fz-space-4);
    }
    .fz-team-cell-num { display: none; }
    .fz-team-cell-person { flex: 1 1 100%; }
    .fz-team-cell { flex: 1 1 auto; }
    .fz-team-cell-label {
        display: inline-block;
        font-size: var(--fz-text-2xs);
        font-weight: var(--fz-weight-semibold);
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--fz-ink-subtle);
        margin-right: 4px;
    }
}

/* =========================================================================
   Work log — project time entries (clock-card modal, Project Time report).
   Built on the existing repeater rows, KPI tiles and status pills; only the
   layout specifics live here.
   ========================================================================= */

/* Four KPI tiles instead of five, same responsive steps as .fz-kpi-grid */
.fz-kpi-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1199.98px) { .fz-kpi-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 419.98px)  { .fz-kpi-grid--4 { grid-template-columns: 1fr; } }

/* Repeater row: project | hours | minutes | remove, description underneath */
.fz-repeat-row--worklog { grid-template-columns: minmax(0, 1fr) 96px 96px 42px; }
.fz-repeat-row--worklog .fz-repeat-desc { grid-column: 1 / -1; }
.fz-worklog-rows .fz-repeat-row + .fz-repeat-row { margin-top: .5rem; }
@media (max-width: 575.98px) {
    .fz-repeat-row--worklog { grid-template-columns: 1fr 1fr 42px; }
    .fz-repeat-row--worklog .fz-repeat-project { grid-column: 1 / -1; }
    .fz-repeat-head.fz-repeat-row--worklog { display: none; }
}

/* Worked / assigned / left readout above the rows */
.fz-worklog-meter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--fz-space-3);
    padding: var(--fz-space-3) var(--fz-space-4);
    margin-bottom: var(--fz-space-4);
    background: var(--fz-surface-alt);
    border: 1px solid var(--fz-border);
    border-radius: var(--fz-radius-lg);
}
.fz-worklog-meter-stats { display: flex; flex-wrap: wrap; gap: var(--fz-space-6); }
.fz-worklog-meter .fz-emp-stat-value { display: block; font-size: var(--fz-text-md); color: var(--fz-ink); }
.fz-worklog-meter .fz-emp-stat-value.is-over { color: var(--fz-danger); }
.fz-worklog-meter .fz-emp-stat-value.is-done { color: var(--fz-success); }

/* Share-of-total bar in report tables (same gradient as the attendance progress bars) */
.fz-share { display: flex; align-items: center; gap: var(--fz-space-3); min-width: 140px; }
.fz-share .progress { flex: 1 1 auto; height: 6px; }
.fz-share .progress-bar { background: linear-gradient(90deg, var(--fz-navy), var(--fz-gold)); }
.fz-share small { color: var(--fz-ink-muted); font-variant-numeric: tabular-nums; min-width: 2.5rem; text-align: right; }


/* =========================================================================
   Employee clock hub (Home): clock in/out states, transitions, timeline
   ========================================================================= */
.fz-clock-hub {
    --clock-accent: var(--fz-primary);
    --clock-strong: var(--fz-primary);
    --clock-blue: #2563eb;
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
}
.fz-clock--working { --clock-accent: var(--fz-success); --clock-strong: #15803d; }
.fz-clock--meeting { --clock-accent: var(--clock-blue); --clock-strong: #2563eb; }
.fz-clock--break   { --clock-accent: #f59e0b; --clock-strong: #b45309; }
.fz-clock--lunch   { --clock-accent: var(--fz-gold); --clock-strong: #8a640f; }
.fz-clock--call    { --clock-accent: var(--fz-info); --clock-strong: #0e7490; }
.fz-clock--done    { --clock-accent: var(--fz-success); --clock-strong: #15803d; }
.fz-clock--leave   { --clock-accent: var(--fz-warning); }

.fz-clock-stage { padding: var(--fz-space-5) var(--fz-space-6); }
.fz-clock-panel { animation: fzPanelIn .35s ease both; }
.fz-clock-panel[hidden] { display: none !important; }
@keyframes fzPanelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.fz-clock-main { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--fz-space-6); align-items: center; }
.fz-clock-body { min-width: 0; }
.fz-clock-title { margin: .45rem 0 .15rem; font-size: 1.45rem; font-weight: var(--fz-weight-bold); color: var(--fz-ink); line-height: 1.2; }
.fz-clock-sub { margin: 0; color: var(--fz-ink-muted); font-size: var(--fz-text-base); }
.fz-clock-leave { display: flex; align-items: center; gap: var(--fz-space-4); }
.fz-clock-leave > .material-icons-outlined { font-size: 40px; color: var(--fz-warning); }

/* Progress ring with the live timer inside */
.fz-ring-wrap { position: relative; width: 190px; margin: 0 auto; text-align: center; }
.fz-ring-svg { width: 190px; height: 190px; transform: rotate(-90deg); display: block; }
.fz-ring-track { fill: none; stroke: color-mix(in srgb, var(--clock-accent) 16%, transparent); stroke-width: 10; }
.fz-ring-bar {
    fill: none; stroke: var(--clock-accent); stroke-width: 10; stroke-linecap: round;
    transition: stroke-dashoffset 1s linear;
}
.fz-clock--meeting .fz-ring-bar, .fz-clock--break .fz-ring-bar, .fz-clock--lunch .fz-ring-bar, .fz-clock--call .fz-ring-bar {
    animation: fzRingBreath 2.8s ease-in-out infinite;
}
@keyframes fzRingBreath { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.fz-ring-center {
    position: absolute; top: 0; left: 0; width: 190px; height: 190px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
}
.fz-ring-time { font-size: 1.65rem; font-weight: var(--fz-weight-bold); color: var(--fz-ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.fz-ring-label { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fz-text-xs); font-weight: var(--fz-weight-bold); letter-spacing: .06em; color: var(--clock-accent); }
.fz-clock--break .fz-ring-label { color: var(--clock-strong); }
.fz-ring-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--clock-accent); display: inline-block; animation: fzPulse 1.8s ease-in-out infinite; }
.fz-ring-foot { margin-top: .5rem; font-size: var(--fz-text-sm); color: var(--fz-ink-muted); }
@keyframes fzPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .6; } }

/* Idle and busy rings: a soft orbit around a core icon */
.fz-ring { position: relative; width: 170px; height: 170px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.fz-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--clock-accent) 20%, transparent); }
.fz-ring::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px dotted color-mix(in srgb, var(--clock-accent) 45%, transparent); animation: fzSpin 18s linear infinite; }
.fz-ring--busy::after { animation-duration: 3.2s; border-style: solid; border-color: transparent; border-top-color: var(--clock-accent); border-right-color: color-mix(in srgb, var(--clock-accent) 35%, transparent); }
.fz-ring-core {
    width: 88px; height: 88px; border-radius: 50%; background: var(--fz-surface);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--clock-accent) 14%, transparent);
    color: var(--clock-accent); z-index: 1; transition: background .3s ease, color .3s ease;
}
.fz-ring-core .material-icons-outlined { font-size: 38px; }
.fz-ring-core--solid { background: var(--clock-accent); color: #fff; animation: fzPop .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.fz-orbit-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--clock-accent); animation: fzPulse 2.2s ease-in-out infinite; z-index: 1; }
.fz-orbit-dot--1 { top: 6px; left: 50%; }
.fz-orbit-dot--2 { bottom: 14px; left: 14px; animation-delay: .5s; }
.fz-orbit-dot--3 { bottom: 14px; right: 14px; animation-delay: 1s; }
@keyframes fzSpin { to { transform: rotate(360deg); } }
@keyframes fzPop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.fz-clock--busy, .fz-clock-hub.is-busy { --clock-accent: var(--clock-blue); }
.fz-clock-hub.is-busy .fz-ring--busy { --clock-accent: var(--clock-blue); }

/* Pills, chips and fact tiles */
.fz-clock-pill {
    display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .65rem; border-radius: var(--fz-radius-pill);
    font-size: var(--fz-text-xs); font-weight: var(--fz-weight-bold); background: var(--fz-accent-soft); color: var(--fz-primary);
}
.fz-clock-pill .material-icons-outlined { font-size: 15px; }
.fz-clock-pill--success { background: var(--fz-success-soft); color: #15803d; }
.fz-clock-pill--primary { background: rgba(37, 99, 235, .12); color: var(--clock-blue); }
.fz-clock-pill--break   { background: rgba(245, 158, 11, .16); color: #b45309; }
.fz-clock-pill--lunch   { background: var(--fz-gold-soft); color: #8a640f; }
.fz-clock-pill--call    { background: var(--fz-info-soft); color: #0e7490; }
.fz-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; animation: fzPulse 1.8s ease-in-out infinite; }

.fz-clock-headrow { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--fz-space-4); flex-wrap: wrap; }
.fz-clock-since { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; text-align: right; }
.fz-clock-since small { color: var(--fz-ink-muted); font-size: var(--fz-text-xs); }
.fz-clock-since .fz-timer { font-variant-numeric: tabular-nums; }
.fz-clock-since-chip {
    display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: var(--fz-radius-md);
    background: var(--fz-success-soft); color: #15803d; font-weight: var(--fz-weight-semibold); font-size: var(--fz-text-base);
}
.fz-clock-since-chip .material-icons-outlined { font-size: 18px; }
.fz-clock-since--box {
    align-items: stretch; text-align: center; min-width: 170px; padding: .7rem .9rem;
    border: 1px solid var(--fz-border); border-radius: var(--fz-radius-lg); background: var(--fz-surface-alt);
}
.fz-clock-since--box strong { font-size: var(--fz-text-lg); color: var(--fz-ink); }

.fz-clock-perks { list-style: none; padding: 0; margin: .9rem 0 1.1rem; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }
.fz-clock-perks li { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--fz-text-sm); color: var(--fz-ink-body); }
.fz-clock-perks .material-icons-outlined { font-size: 18px; color: var(--fz-primary); background: var(--fz-accent-soft); border-radius: 50%; padding: 5px; }

.fz-clock-facts { display: flex; flex-wrap: wrap; gap: var(--fz-space-3); margin-top: var(--fz-space-4); }
.fz-clock-fact {
    display: flex; align-items: center; gap: .65rem; padding: .6rem .9rem; border: 1px solid var(--fz-border);
    border-radius: var(--fz-radius-lg); background: var(--fz-surface-alt);
}
.fz-clock-fact > .material-icons-outlined { font-size: 22px; color: var(--clock-accent); }
.fz-clock-fact small { display: block; color: var(--fz-ink-muted); font-size: var(--fz-text-xs); }
.fz-clock-fact strong { font-size: var(--fz-text-md); color: var(--fz-ink); font-variant-numeric: tabular-nums; }

/* Action buttons */
.fz-clock-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: var(--fz-space-4); }
.fz-act {
    display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .95rem; border-radius: var(--fz-radius-md);
    font-size: var(--fz-text-base); font-weight: var(--fz-weight-semibold); border: 1px solid transparent; background: var(--fz-surface);
    transition: background .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.fz-act .material-icons-outlined { font-size: 18px; }
.fz-act:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--fz-shadow-sm); }
.fz-act:active:not(:disabled) { transform: translateY(0) scale(.98); }
.fz-act:disabled { opacity: .45; cursor: not-allowed; }
.fz-act--log     { color: var(--clock-blue); border-color: rgba(37, 99, 235, .45); }
.fz-act--log:hover:not(:disabled) { background: rgba(37, 99, 235, .08); color: var(--clock-blue); }
.fz-act--break   { color: var(--fz-ink-body); border-color: var(--fz-border-strong); }
.fz-act--break:hover:not(:disabled) { background: var(--fz-hover); color: var(--fz-ink); }
.fz-act--lunch   { color: #8a640f; border-color: rgba(201, 154, 60, .6); }
.fz-act--lunch:hover:not(:disabled) { background: var(--fz-gold-soft); color: #8a640f; }
.fz-act--call    { color: #0e7490; border-color: rgba(8, 145, 178, .5); }
.fz-act--call:hover:not(:disabled) { background: var(--fz-info-soft); color: #0e7490; }
.fz-act--meeting { color: var(--clock-blue); border-color: rgba(37, 99, 235, .45); }
.fz-act--meeting:hover:not(:disabled), .fz-act--meeting.is-active { background: var(--clock-blue); color: #fff; }
.fz-act--out     { background: var(--fz-danger); color: #fff; }
.fz-act--out:hover:not(:disabled) { background: #b91c1c; color: #fff; }
.fz-act--start {
    padding: .75rem 2.2rem; font-size: var(--fz-text-md); color: #fff; border-radius: var(--fz-radius-pill);
    background: linear-gradient(135deg, var(--fz-navy), var(--fz-primary)); box-shadow: 0 3px 10px rgba(22, 41, 77, .14);
}
.fz-act--start:hover:not(:disabled) { color: #fff; box-shadow: 0 4px 12px rgba(22, 41, 77, .18); }
.fz-act--end { background: var(--clock-strong); color: #fff; justify-content: center; margin-top: .55rem; }
.fz-act--end:hover:not(:disabled) { color: #fff; filter: brightness(1.08); }

.fz-clock-nudge {
    display: flex; align-items: center; gap: .7rem; margin-top: var(--fz-space-4); padding: .65rem .9rem;
    border-radius: var(--fz-radius-md); background: var(--fz-success-soft); color: #166534; font-size: var(--fz-text-base);
}
.fz-clock-nudge-icon { display: inline-flex; background: rgba(22, 163, 74, .18); border-radius: var(--fz-radius-sm); padding: 5px; }
.fz-clock-nudge-icon .material-icons-outlined { font-size: 18px; }
.fz-clock-nudge-link { display: inline-flex; align-items: center; gap: .25rem; font-weight: var(--fz-weight-semibold); color: var(--fz-ink); text-decoration: none; white-space: nowrap; }
.fz-clock-nudge-link .material-icons-outlined { font-size: 16px; transition: transform .15s ease; }
.fz-clock-nudge-link:hover .material-icons-outlined { transform: translateX(3px); }

/* Transition panel: a checklist that ticks as the action is saved */
.fz-busy-steps { list-style: none; padding: 0; margin: .9rem 0 0; display: grid; gap: .5rem; }
.fz-busy-steps li { display: flex; align-items: center; gap: .6rem; color: var(--fz-ink-subtle); font-size: var(--fz-text-base); transition: color .3s ease; }
.fz-step-check {
    width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--fz-border-strong); display: inline-flex;
    align-items: center; justify-content: center; transition: background .3s ease, border-color .3s ease;
}
.fz-step-check .material-icons-outlined { font-size: 13px; color: #fff; opacity: 0; transform: scale(.4); transition: opacity .25s ease, transform .25s ease; }
.fz-busy-steps li.is-done { color: var(--fz-ink-body); }
.fz-busy-steps li.is-done .fz-step-check { background: var(--clock-blue); border-color: var(--clock-blue); }
.fz-busy-steps li.is-done .fz-step-check .material-icons-outlined { opacity: 1; transform: scale(1); }

/* Workday complete */
.fz-ring--done::after { animation: none; border-color: transparent; }
.fz-confetti { position: absolute; width: 8px; height: 8px; border-radius: 2px; opacity: 0; animation: fzConfetti 1.6s ease-out .2s both; }
.fz-confetti--1 { background: var(--fz-gold); top: 12px; left: 18px; --dx: -16px; --dy: -14px; }
.fz-confetti--2 { background: var(--clock-blue); top: 8px; right: 22px; --dx: 18px; --dy: -12px; border-radius: 50%; }
.fz-confetti--3 { background: var(--fz-danger); bottom: 18px; left: 10px; --dx: -18px; --dy: 12px; }
.fz-confetti--4 { background: var(--fz-success); bottom: 10px; right: 14px; --dx: 16px; --dy: 16px; border-radius: 50%; }
@keyframes fzConfetti { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(160deg) scale(1); } }

/* Today's timeline + activity */
.fz-day-row { margin-top: var(--fz-space-4); }
.fz-day-head { display: flex; align-items: center; justify-content: space-between; gap: var(--fz-space-3); margin-bottom: var(--fz-space-3); }
.fz-day-link {
    display: inline-flex; align-items: center; gap: .25rem; padding: .3rem .7rem; border-radius: var(--fz-radius-sm);
    background: var(--fz-surface-alt); border: 1px solid var(--fz-border); color: var(--fz-ink-body); font-size: var(--fz-text-sm);
    font-weight: var(--fz-weight-semibold); text-decoration: none;
}
.fz-day-link .material-icons-outlined { font-size: 15px; }
.fz-day-link:hover { background: var(--fz-hover); color: var(--fz-ink); }

.fz-tone-success { background: var(--fz-success-soft); color: var(--fz-success); }
.fz-tone-danger  { background: var(--fz-danger-soft); color: var(--fz-danger); }
.fz-tone-warning { background: rgba(245, 158, 11, .16); color: #b45309; }
.fz-tone-info    { background: var(--fz-info-soft); color: var(--fz-info); }
.fz-tone-primary { background: rgba(37, 99, 235, .12); color: #2563eb; }
.fz-tone-neutral { background: var(--fz-neutral-soft); color: var(--fz-neutral); }

.fz-tl { list-style: none; margin: 0; padding: 0; }
.fz-tl-item { position: relative; display: grid; grid-template-columns: 18px 38px minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .55rem 0; border-bottom: 1px solid var(--fz-border); }
.fz-tl-item:last-child { border-bottom: 0; }
.fz-tl-rail { position: relative; align-self: stretch; display: flex; justify-content: center; align-items: center; }
.fz-tl-rail::before { content: ""; position: absolute; top: -.55rem; bottom: -.55rem; width: 2px; background: var(--fz-border); }
.fz-tl-item:first-child .fz-tl-rail::before { top: 50%; }
.fz-tl-item:last-child .fz-tl-rail::before { bottom: 50%; }
.fz-tl-dot { position: relative; width: 11px; height: 11px; border-radius: 50%; background: var(--fz-surface); border: 2px solid var(--fz-border-strong); }
.fz-tl-item.is-working .fz-tl-dot, .fz-tl-item.is-done .fz-tl-dot { background: var(--fz-success); border-color: var(--fz-success); }
.fz-tl-item.is-active .fz-tl-dot { background: #2563eb; border-color: #2563eb; animation: fzPulse 1.8s ease-in-out infinite; }
.fz-tl-icon { width: 38px; height: 38px; border-radius: var(--fz-radius-md); display: inline-flex; align-items: center; justify-content: center; }
.fz-tl-icon .material-icons-outlined { font-size: 20px; }
.fz-tl-item.is-not_started .fz-tl-icon, .fz-tl-item.is-pending .fz-tl-icon { filter: saturate(.5); opacity: .8; }
.fz-tl-text strong { display: block; font-size: var(--fz-text-base); color: var(--fz-ink); }
.fz-tl-text small { color: var(--fz-ink-muted); font-size: var(--fz-text-xs); }
.fz-tl-state { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; }
.fz-tl-state small { color: var(--fz-ink-muted); font-size: var(--fz-text-xs); font-variant-numeric: tabular-nums; }
.fz-tl-pill { padding: .15rem .6rem; border-radius: var(--fz-radius-pill); background: var(--fz-neutral-soft); color: var(--fz-neutral); font-size: var(--fz-text-xs); font-weight: var(--fz-weight-semibold); white-space: nowrap; }
.fz-tl-pill--success, .fz-tl-pill--done { background: var(--fz-success-soft); color: #15803d; }
.fz-tl-pill--active { background: rgba(37, 99, 235, .12); color: #2563eb; }

/* Ongoing projects card beside the timeline */
.fz-proj-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 .4rem;
    border-radius: var(--fz-radius-pill); background: var(--fz-accent-soft); color: var(--fz-primary);
    font-size: var(--fz-text-xs); font-weight: var(--fz-weight-bold);
}
.fz-proj-count[hidden] { display: none; }
.fz-proj-search { margin-bottom: var(--fz-space-3); }
.fz-proj-search .fz-table-search { flex: 1 1 100%; width: 100%; }
.fz-proj-list { display: flex; flex-direction: column; gap: .5rem; min-height: 140px; overflow-y: auto; }
.fz-proj-row {
    text-decoration: none; color: inherit;
    display: flex; align-items: center; gap: .8rem; padding: .65rem .8rem; cursor: pointer;
    border: 1px solid var(--fz-border); border-radius: var(--fz-radius-lg); background: var(--fz-surface);
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.fz-proj-row:hover, .fz-proj-row:focus-visible { background: var(--fz-surface-alt); border-color: var(--fz-border-strong); transform: translateY(-1px); outline: 0; }
.fz-proj-avatar {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--fz-radius-md); display: inline-flex; align-items: center; justify-content: center;
    background: var(--fz-accent-soft); color: var(--fz-primary); font-weight: var(--fz-weight-bold); font-size: var(--fz-text-md);
}
.fz-proj-text { min-width: 0; flex: 1 1 auto; line-height: 1.25; }
.fz-proj-text strong { display: block; color: var(--fz-ink); font-size: var(--fz-text-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fz-proj-text small { display: block; color: var(--fz-ink-muted); font-size: var(--fz-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fz-proj-go { color: var(--fz-ink-subtle); transition: transform .15s ease, color .15s ease; }
.fz-proj-row:hover .fz-proj-go { transform: translateX(2px); color: var(--fz-primary); }

@media (max-width: 767.98px) {
    .fz-clock-stage { padding: var(--fz-space-4); }
    .fz-clock-main { grid-template-columns: 1fr; gap: var(--fz-space-4); text-align: center; }
    .fz-clock-headrow { justify-content: center; }
    .fz-clock-since { align-items: center; text-align: center; }
    .fz-clock-actions, .fz-clock-perks, .fz-clock-facts { justify-content: center; }
    .fz-busy-steps { justify-items: center; }
    .fz-clock-nudge { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
    .fz-clock-panel, .fz-ring::after, .fz-orbit-dot, .fz-ring-dot, .fz-pill-dot, .fz-ring-bar, .fz-confetti, .fz-ring-core--solid, .fz-tl-dot { animation: none !important; }
    .fz-ring-bar, .fz-act, .fz-step-check, .fz-step-check .material-icons-outlined { transition: none !important; }
}


/* Project updates dialog: the employee's own logged work, day by day */
.fz-pu-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--fz-space-4); flex-wrap: wrap; margin-bottom: var(--fz-space-4); }
.fz-pu-title { margin: 0; font-size: var(--fz-text-xl); font-weight: var(--fz-weight-bold); color: var(--fz-ink); }
.fz-pu-desc { margin: .2rem 0 0; color: var(--fz-ink-muted); font-size: var(--fz-text-base); }
.fz-pu-stats { display: flex; gap: var(--fz-space-3); }
.fz-pu-stats > div { padding: .5rem .9rem; border: 1px solid var(--fz-border); border-radius: var(--fz-radius-lg); background: var(--fz-surface-alt); min-width: 92px; }
.fz-pu-stats small { display: block; color: var(--fz-ink-muted); font-size: var(--fz-text-xs); }
.fz-pu-stats strong { color: var(--fz-ink); font-size: var(--fz-text-md); font-variant-numeric: tabular-nums; }
.fz-pu-day { margin-bottom: var(--fz-space-4); }
.fz-pu-day-head { display: flex; align-items: center; justify-content: space-between; padding: .45rem .75rem; margin-bottom: .4rem; border-radius: var(--fz-radius-md); background: var(--fz-accent-soft); }
.fz-pu-date { display: inline-flex; align-items: center; gap: .4rem; font-weight: var(--fz-weight-bold); color: var(--fz-primary); font-size: var(--fz-text-base); }
.fz-pu-date .material-icons-outlined { font-size: 18px; }
.fz-pu-day-total { font-size: var(--fz-text-sm); font-weight: var(--fz-weight-semibold); color: var(--fz-ink-body); font-variant-numeric: tabular-nums; }
.fz-pu-entry { display: flex; gap: .8rem; padding: .5rem .75rem; border-bottom: 1px solid var(--fz-border); }
.fz-pu-entry:last-child { border-bottom: 0; }
.fz-pu-mins { flex: 0 0 72px; font-weight: var(--fz-weight-bold); color: var(--fz-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fz-pu-text { white-space: pre-line; color: var(--fz-ink-body); min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .fz-pu-entry { flex-direction: column; gap: .15rem; } .fz-pu-mins { flex-basis: auto; } }


/* Shared by Home and Attendance: card titles, summary rows, 70:30 split */
/* Section header used across the cards below the hero — icon + title,
   same rhythm as fz-form-section but for a card body, not a form. */
.fz-home-card-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--fz-text-md);
    font-weight: var(--fz-weight-bold);
    color: var(--fz-ink);
    margin: 0;
}
.fz-home-card-title .material-icons-outlined { font-size: 20px; }
.fz-att-month {
    font-size: var(--fz-text-xs);
    font-weight: var(--fz-weight-semibold);
    color: var(--fz-ink-muted);
    background: var(--fz-surface-alt);
    border: 1px solid var(--fz-border);
    border-radius: var(--fz-radius-sm);
    padding: .25rem .6rem;
    white-space: nowrap;
}
.fz-att-list { display: flex; flex-direction: column; gap: var(--fz-space-2); }
.fz-att-row {
    display: flex;
    align-items: center;
    gap: var(--fz-space-3);
    padding: .7rem .9rem;
    border-radius: var(--fz-radius-lg);
    text-decoration: none;
    color: var(--fz-ink-body);
    background: var(--row-soft);
    transition: transform .15s ease, box-shadow .15s ease;
}
.fz-att-row:hover { transform: translateY(-1px); box-shadow: var(--fz-shadow-sm); color: var(--fz-ink); }
.fz-att-row--warning { --row-soft: var(--fz-warning-soft); --row-ink: #b45309; }
.fz-att-row--primary { --row-soft: rgba(59, 130, 246, .12); --row-ink: #2563eb; }
.fz-att-row--success { --row-soft: var(--fz-success-soft); --row-ink: #15803d; }
.fz-att-row--danger  { --row-soft: var(--fz-danger-soft); --row-ink: var(--fz-danger); }
.fz-att-icon {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--fz-surface); color: var(--row-ink);
}
.fz-att-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.2; }
.fz-att-text strong { font-size: var(--fz-text-xl); color: var(--fz-ink); }
.fz-att-text small { font-size: var(--fz-text-sm); color: var(--fz-ink-body); }
.fz-att-chevron { color: var(--fz-ink-subtle); }

.fz-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: var(--fz-space-4); align-items: start; }
.fz-split-col { display: flex; flex-direction: column; gap: var(--fz-space-4); min-width: 0; }
@media (max-width: 991.98px) { .fz-split { grid-template-columns: minmax(0, 1fr); } }

/* Attendance page */
.fz-att-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fz-space-3); }
@media (max-width: 1199.98px) { .fz-att-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { .fz-att-metrics { grid-template-columns: minmax(0, 1fr); } }
.fz-att-metrics .fz-kpi { padding: var(--fz-space-3) var(--fz-space-3); }
.fz-att-metrics .fz-kpi-top { gap: var(--fz-space-2); align-items: flex-start; }
.fz-att-metrics .fz-kpi-icon { width: 40px; height: 40px; }
.fz-att-metrics .fz-kpi-icon .material-icons-outlined { font-size: 22px; }
.fz-att-metrics .fz-kpi-value { font-size: 1.35rem; }
.fz-att-metrics .fz-kpi-label { margin-top: 0; font-size: var(--fz-text-xs); color: var(--fz-ink-muted); }
.fz-metric-sub { margin-top: 3px; font-size: var(--fz-text-xs); color: var(--fz-ink-muted); display: flex; align-items: center; gap: 2px; }
.fz-metric-sub.is-up { color: var(--fz-success); }
.fz-metric-sub.is-down { color: var(--fz-danger); }
.fz-metric-sub .material-icons-outlined { font-size: 13px; }
.fz-kpi-icon--violet { background: rgba(124, 58, 237, .12); color: #7c3aed; }
.fz-chart-tabs { display: inline-flex; padding: 3px; border-radius: var(--fz-radius-md); background: var(--fz-surface-alt); border: 1px solid var(--fz-border); }
.fz-chart-tabs button { border: 0; background: transparent; padding: .25rem .8rem; border-radius: var(--fz-radius-sm); font-size: var(--fz-text-sm); font-weight: var(--fz-weight-semibold); color: var(--fz-ink-muted); }
.fz-chart-tabs button.active { background: var(--fz-surface); color: var(--fz-ink); box-shadow: var(--fz-shadow-xs); }
.fz-chart-legend { display: flex; justify-content: center; gap: var(--fz-space-5); flex-wrap: wrap; margin-top: var(--fz-space-2); font-size: var(--fz-text-sm); font-weight: var(--fz-weight-semibold); color: var(--fz-ink-body); }
.fz-chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .4rem; }
.fz-holiday-row { display: flex; align-items: center; gap: var(--fz-space-3); padding: .6rem 0; border-bottom: 1px solid var(--fz-border); }
.fz-holiday-row:last-child { border-bottom: 0; }
.fz-holiday-icon { width: 38px; height: 38px; border-radius: var(--fz-radius-md); background: var(--fz-info-soft); color: var(--fz-info); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fz-holiday-day { margin-left: auto; font-size: var(--fz-text-sm); color: var(--fz-ink-muted); white-space: nowrap; }
.fz-att-row--violet { --row-soft: rgba(124, 58, 237, .1); --row-ink: #7c3aed; }
div.fz-att-row:hover { transform: none; box-shadow: none; }

/* =========================================================================
   APP CHROME v2 — full-width primary top bar + sidebar beneath it
   Brand, greeting, timer, user menu and logout live in the top bar; the
   sidebar is navigation only.
   ========================================================================= */
:root { --fz-topbar-h: 64px; --fz-sidebar-w: 248px; --fz-sidebar-w-mini: 68px; }

/* ---- Top bar ---- */
.top-header .navbar {
    left: 0 !important;
    height: var(--fz-topbar-h);
    padding: 0 1.25rem 0 .75rem;
    background: linear-gradient(90deg, var(--fz-navy) 0%, var(--fz-primary) 100%);
    color: #fff;
    z-index: 20;
    box-shadow: 0 1px 4px rgba(16, 24, 40, .08);
}
.top-header .btn-toggle a {
    width: 40px; height: 40px;
    color: #fff;
}
.top-header .btn-toggle a:hover,
.top-header .btn-toggle a:focus { background: rgba(255, 255, 255, .14); color: #fff; }

.fz-brand {
    display: flex; align-items: center; gap: .6rem;
    min-width: 0; padding-right: 1rem; margin-right: .25rem;
    border-right: 1px solid rgba(255, 255, 255, .18);
    color: #fff; text-decoration: none; cursor: default;
}
.fz-brand-logo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0;
    background: #fff; border-radius: var(--fz-radius-md); padding: 4px;
}
.fz-brand-logo .logo-img { width: 100%; height: 100%; object-fit: contain; }
.fz-brand-name h2,
.fz-brand-name h5 {
    margin: 0; color: #fff; font-size: 1.15rem !important; font-weight: 700;
    letter-spacing: -.01em; line-height: 1; white-space: nowrap;
}

.top-header .header-greeting .greeting-line { color: #fff; font-size: .95rem; }
.top-header .header-greeting .greeting-name { color: var(--fz-gold); }
.top-header .header-greeting .greeting-sub { color: rgba(255, 255, 255, .75); opacity: 1; }
.top-header .search-bar { cursor: default; }

.top-header .fz-timer-chip {
    background: rgba(255, 255, 255, .14);
    padding: .35rem .7rem;
}
.top-header .fz-timer-chip .material-icons-outlined,
.top-header .fz-timer-chip .fz-timer { color: #fff; }

.top-header .navbar .nav-item { position: relative; }
.fz-top-user {
    display: flex; align-items: center; gap: .55rem;
    padding: .25rem .5rem .25rem .3rem;
    border-radius: var(--fz-radius-pill);
    color: #fff; text-decoration: none;
    transition: background-color .15s ease;
}
.fz-top-user:hover, .fz-top-user.show { background: rgba(255, 255, 255, .14); color: #fff; }
.fz-top-avatar {
    width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, .5);
}
.fz-top-avatar--initials {
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: var(--fz-primary); font-size: .75rem; font-weight: 700;
}
.fz-top-user-meta { flex-direction: column; line-height: 1.15; min-width: 0; }
.fz-top-user-name { font-size: .84rem; font-weight: 600; max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fz-top-user-sub { font-size: .7rem; color: rgba(255, 255, 255, .72); }
.fz-top-user-caret { font-size: 18px; color: rgba(255, 255, 255, .8); }
.fz-top-menu { min-width: 200px; margin-top: .6rem !important; }
.fz-top-menu::after { display: none; }

.fz-logout-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    height: 36px; padding: 0 .8rem;
    border-radius: var(--fz-radius-pill);
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff; font-size: .82rem; font-weight: 600; text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.fz-logout-btn i { font-size: 18px; }
.fz-logout-btn:hover { background: #fff; color: var(--fz-primary); }

/* ---- Sidebar (navigation only, sits under the top bar) ---- */
.sidebar-wrapper {
    top: var(--fz-topbar-h);
    height: calc(100% - var(--fz-topbar-h));
    width: var(--fz-sidebar-w);
    z-index: 12;
    box-shadow: none;
    border-right: 1px solid var(--fz-border);
}
.sidebar-wrapper .sidebar-nav { padding: .5rem 0 1rem; }
.main-wrapper {
    margin-top: var(--fz-topbar-h);
    margin-left: var(--fz-sidebar-w);
    min-height: calc(100vh - var(--fz-topbar-h));
}
body.toggled .main-wrapper { margin-left: var(--fz-sidebar-w-mini); }

/* Active item: solid primary pill with a gold edge */
.sidebar-wrapper .metismenu li.mm-active > a,
.sidebar-wrapper .metismenu li a.mm-active {
    background: var(--fz-primary) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 var(--fz-gold);
}
.sidebar-wrapper .metismenu li.mm-active > a .parent-icon i,
.sidebar-wrapper .metismenu li.mm-active > a .parent-icon span { color: #fff; }
/* Sub-items inside an open group keep a light treatment */
.sidebar-wrapper .metismenu ul li.mm-active > a {
    background: var(--fz-accent-soft) !important;
    color: var(--fz-primary) !important;
    box-shadow: none;
}

/* Collapsed rail (desktop) */
@media screen and (min-width: 1199px) {
    body.toggled:not(.sidebar-hovered) .sidebar-wrapper { width: var(--fz-sidebar-w-mini); }
    body.toggled .sidebar-wrapper:hover { width: var(--fz-sidebar-w); }
}

/* Mobile / tablet: drawer under the top bar */
@media only screen and (max-width: 1199px) {
    .sidebar-wrapper { left: calc(-1 * var(--fz-sidebar-w)); }
    .toggled .sidebar-wrapper { left: 0; width: var(--fz-sidebar-w); box-shadow: var(--fz-shadow-lg); }
    .main-wrapper, body.toggled .main-wrapper { margin-left: 0; }
}
@media (max-width: 575.98px) {
    .fz-brand { border-right: 0; padding-right: 0; }
    .fz-brand-name { display: none; }
    .top-header .header-greeting { display: none; }
}

[data-bs-theme="dark"] .fz-top-menu { background: var(--fz-surface); }

/* =========================================================================
   GREETING BANNER — sky scene driven by data-scene (morning / afternoon /
   evening / night). Each scene only sets variables; layout is shared.
   ========================================================================= */
.fz-greet {
    --sky-a: #e4f1fd; --sky-b: #d3e8fb;
    --ink: #14284b; --ink-soft: #3f526f;
    --orb: #ffc83d; --orb-glow: rgba(255, 200, 61, .35);
    --hill-far: #dbe9fb; --hill-mid: #8db8ee; --hill-near: #5b97e6;
    --accent: #f5b301;
    position: relative; overflow: hidden; display: flex; align-items: center;
    min-height: 150px; padding: 1.5rem 1.75rem;
    border-radius: var(--fz-radius-xl);
    background: linear-gradient(120deg, var(--sky-a), var(--sky-b));
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: var(--fz-shadow-sm);
    transition: background .6s ease;
}
.fz-greet[data-scene="morning"] {
    --sky-a: #fff3df; --sky-b: #ffe0c2; --ink: #4a2a14; --ink-soft: #7a5a44;
    --orb: #ffb347; --orb-glow: rgba(255, 179, 71, .38); --accent: #f08a24;
    --hill-far: #fde9d2; --hill-mid: #f5b98a; --hill-near: #7fc08a;
}
.fz-greet[data-scene="evening"] {
    --sky-a: #ffe3d1; --sky-b: #d9c6f0; --ink: #2e1f4d; --ink-soft: #5d4b7d;
    --orb: #ff7a59; --orb-glow: rgba(255, 122, 89, .35); --accent: #ff7a59;
    --hill-far: #ecd3e8; --hill-mid: #b58ccf; --hill-near: #6c4fa3;
}
.fz-greet[data-scene="night"] {
    --sky-a: #1b2a52; --sky-b: #2d3f7a; --ink: #fff; --ink-soft: rgba(255, 255, 255, .78);
    --orb: #f4f1d0; --orb-glow: rgba(244, 241, 208, .22); --accent: #ffd86b;
    --hill-far: #2e407c; --hill-mid: #25356b; --hill-near: #1a2750;
}
.fz-greet-copy { position: relative; z-index: 2; max-width: 62%; }
.fz-greet-eyebrow { display: flex; align-items: center; gap: .5rem; margin: 0 0 .15rem; color: var(--ink); font-size: 1rem; font-weight: 500; }
.fz-greet-icon { color: var(--accent); font-size: 26px; }
.fz-greet-name { margin: 0 0 .35rem; color: var(--ink); font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.fz-greet-wave { display: inline-block; transform-origin: 70% 70%; animation: fzWave 2.4s ease-in-out infinite; }
.fz-greet-quote { margin: 0; color: var(--ink-soft); font-style: italic; font-size: .92rem; }

.fz-greet-art { position: absolute; inset: 0 0 0 auto; width: 48%; pointer-events: none; }
.fz-greet-hills { position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; }
.fz-greet-hills .hill-far  { fill: var(--hill-far);  transition: fill .6s; }
.fz-greet-hills .hill-mid  { fill: var(--hill-mid);  transition: fill .6s; }
.fz-greet-hills .hill-near { fill: var(--hill-near); transition: fill .6s; }
.fz-greet-orb {
    position: absolute; right: 22%; top: 24%; width: 74px; height: 74px; border-radius: 50%;
    background: var(--orb-glow); display: flex; align-items: center; justify-content: center;
    animation: fzFloat 6s ease-in-out infinite;
}
.fz-greet-orb span { width: 30px; height: 30px; border-radius: 50%; background: var(--orb); }
.fz-greet[data-scene="night"] .fz-greet-orb span { box-shadow: inset -9px -3px 0 0 #cfd0b8; }
.fz-greet[data-scene="evening"] .fz-greet-orb { top: 38%; }
.fz-greet[data-scene="morning"] .fz-greet-orb { top: 42%; }
.fz-greet-stars { display: none; position: absolute; inset: 0; }
.fz-greet[data-scene="night"] .fz-greet-stars {
    display: block;
    background-image:
        radial-gradient(2px 2px at 20% 25%, #fff, transparent), radial-gradient(1.5px 1.5px at 45% 55%, #fff, transparent),
        radial-gradient(2px 2px at 70% 18%, #fff, transparent), radial-gradient(1.5px 1.5px at 88% 48%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 33% 80%, #fff, transparent), radial-gradient(2px 2px at 60% 35%, #fff, transparent);
    animation: fzTwinkle 3.5s ease-in-out infinite;
}
.fz-greet-msg {
    position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%);
    max-width: 110px; text-align: left; color: var(--ink); font-weight: 700; font-size: 1rem; line-height: 1.25;
}
@keyframes fzFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes fzTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (max-width: 767.98px) {
    .fz-greet-copy { max-width: 100%; }
    .fz-greet-art { width: 100%; opacity: .45; }
    .fz-greet-msg { display: none; }
    .fz-greet-name { font-size: 1.7rem; }
}

/* Holiday emoji tile (picked from the holiday name) */
.fz-holiday-emoji {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--fz-radius-md);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; line-height: 1;
}
/* Greeting banner: keep the sun clear of the side message, soften the hill edge */
.fz-greet-orb { right: 36%; }
.fz-greet-hills { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }

/* Keep every elevation very light: Bootstrap + template defaults */
:root {
    --bs-box-shadow: 0 .25rem .6rem rgba(16, 24, 40, .04);
    --bs-box-shadow-sm: 0 .1rem .25rem rgba(16, 24, 40, .03);
    --bs-box-shadow-lg: 0 .5rem 1rem rgba(16, 24, 40, .06);
}
.dropdown-menu { box-shadow: 0 6px 16px rgba(16, 24, 40, .07) !important; }
.modal-content { box-shadow: 0 8px 24px rgba(16, 24, 40, .08); }
.shadow { box-shadow: var(--bs-box-shadow) !important; }
.shadow-sm { box-shadow: var(--bs-box-shadow-sm) !important; }
.shadow-lg { box-shadow: var(--bs-box-shadow-lg) !important; }
.sidebar-wrapper, .top-header .navbar, .card { box-shadow: var(--fz-shadow-sm); }
.top-header .navbar { box-shadow: 0 1px 4px rgba(16, 24, 40, .08) !important; }

/* Subtle canvas: page background stays a whisper off-white, cards stay white */
html, body { background-color: var(--fz-bg) !important; }
[data-bs-theme="dark"] html, [data-bs-theme="dark"] body { background-color: var(--bs-body-bg) !important; }

/* Sidebar section headings in brand gold */
.sidebar-wrapper .metismenu .menu-label { color: var(--fz-gold-dark); }
[data-bs-theme="dark"] .sidebar-wrapper .metismenu .menu-label { color: var(--fz-gold); }

/* No top progress bar (Pace) — the full-page loader is enough */
.pace, .pace-progress, .pace-activity { display: none !important; }

/* Section headings (BANK, TAX & IDENTITY, FAMILY DETAILS…) in brand gold */
.fz-form-section { color: var(--fz-gold-dark); }
[data-bs-theme="dark"] .fz-form-section { color: var(--fz-gold); }

/* ---- Employee form shell: header + vertical tabs (Profile page and admin employee forms) ---- */
/* ---- Profile shell: identity header + vertical tabs ---- */
.fz-profile-shell { overflow: hidden; }
.fz-profile-hero {
    display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
    padding: 1.4rem 1.75rem;
    background: linear-gradient(110deg, var(--fz-navy) 0%, var(--fz-primary) 60%, #2d5287 100%);
    border-bottom: 3px solid var(--fz-gold);
}
.fz-profile-hero .fz-avatar-wrap, .fz-profile-hero .fz-avatar-wrap img, .fz-profile-hero .fz-avatar-wrap .fz-avatar-fallback { width: 88px; height: 88px; font-size: 1.7rem; }
.fz-profile-hero .fz-avatar-wrap img, .fz-profile-hero .fz-avatar-wrap .fz-avatar-fallback { border: 3px solid rgba(255,255,255,.9); box-shadow: none; background-color: #fff; }
.fz-profile-hero .fz-avatar-edit-btn { width: 30px; height: 30px; background: var(--fz-gold); border-color: var(--fz-navy); color: #fff; }
.fz-profile-hero .fz-avatar-edit-btn:hover { background: var(--fz-gold-dark); }
.fz-hero-info { min-width: 0; }
.fz-hero-name { margin: 0 0 .55rem; color: #fff; font-size: 1.4rem; font-weight: 800; letter-spacing: -.01em; }
.fz-hero-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.fz-hero-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: var(--fz-radius-pill); background: rgba(255,255,255,.14); color: #fff; font-size: .78rem; font-weight: 500; }
.fz-hero-chip .material-icons-outlined { font-size: 15px; color: var(--fz-gold); }
@media (max-width: 575.98px) { .fz-profile-hero { padding: 1.1rem 1rem; } .fz-hero-name { font-size: 1.15rem; } }
.fz-profile-body { display: flex; align-items: stretch; }
.fz-profile-nav { width: 280px; flex-shrink: 0; padding: .9rem; gap: .35rem; border-right: 1px solid var(--fz-border); background: var(--fz-surface-alt); }
.fz-tab {
    display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left;
    padding: .7rem .8rem; border: 0; border-radius: var(--fz-radius-md);
    background: transparent; color: var(--fz-ink-body); cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.fz-tab:hover { background: var(--fz-hover); }
.fz-tab-icon {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--fz-radius-md);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--tab-bg, var(--fz-surface)); color: var(--tab-c, var(--fz-ink-muted)); border: 1px solid transparent;
    transition: all .15s ease;
}
.fz-tab-icon .material-icons-outlined { font-size: 20px; }
.fz-tab-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.fz-tab-title { font-size: .88rem; font-weight: 600; }
.fz-tab-sub { font-size: .72rem; color: var(--fz-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fz-tab.active { background: var(--fz-primary); color: #fff; box-shadow: inset 3px 0 0 var(--fz-gold); }
.fz-tab.active .fz-tab-sub { color: rgba(255,255,255,.75); }
.fz-tab.active .fz-tab-icon { background: rgba(255,255,255,.16); border-color: transparent; color: #fff; }

.fz-profile-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.fz-profile-content .tab-content { flex: 1 1 auto; padding: 1.5rem 1.75rem; }
/* The old stand-alone cards become plain panes with a title */
.fz-profile-content .tab-pane > .card { border: 0; box-shadow: none; background: transparent; margin: 0 !important; }
.fz-profile-content .tab-pane > .card > .card-header { background: transparent; border: 0; padding: 0 0 1rem; }
.fz-profile-content .tab-pane > .card > .card-header h6 { font-size: 1.15rem; font-weight: 700; color: var(--fz-ink); }
.fz-profile-content .tab-pane > .card > .card-body { padding: 0 !important; }
.fz-profile-content .tab-pane > .card > .card-header + .card-body { border-top: 1px solid var(--fz-border); padding-top: .5rem !important; }
.fz-profile-content .tab-pane.fade { transition: opacity .2s ease; }
.fz-save-bar {
    position: sticky; bottom: 0; z-index: 5;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .8rem 1.75rem; background: var(--fz-surface); border-top: 1px solid var(--fz-border);
}
@media (max-width: 991.98px) {
    .fz-profile-body { flex-direction: column; }
    .fz-profile-nav { width: 100%; flex-direction: row !important; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--fz-border); }
    .fz-tab { width: auto; flex-shrink: 0; }
    .fz-tab-sub { display: none; }
    .fz-profile-content .tab-content { padding: 1.1rem 1rem; }
    .fz-save-bar { padding: .7rem 1rem; }
}

/* =========================================================================
   PROJECTS — stat tiles, toolbar, card grid, detail hero
   ========================================================================= */
.fz-proj-stat { display: flex; align-items: center; gap: .85rem; padding: .95rem 1.1rem; background: var(--fz-surface); border: 1px solid var(--fz-border); border-radius: var(--fz-radius-lg); box-shadow: var(--fz-shadow-sm); height: 100%; }
.fz-proj-stat-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--fz-radius-md); display: inline-flex; align-items: center; justify-content: center; }
.fz-proj-stat-icon .material-icons-outlined { font-size: 24px; }
.fz-proj-stat-value { font-size: 1.4rem; font-weight: 800; color: var(--fz-ink); line-height: 1.1; }
.fz-proj-stat-label { font-size: .78rem; color: var(--fz-ink-muted); font-weight: 500; }

.fz-proj-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.fz-pl-search { position: relative; flex: 1 1 280px; max-width: 380px; }
.fz-pl-search .material-icons-outlined { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--fz-ink-subtle); pointer-events: none; }
.fz-pl-search .form-control { padding-left: 2.4rem; }
.fz-proj-filter { display: inline-flex; padding: 3px; background: var(--fz-surface); border: 1px solid var(--fz-border); border-radius: var(--fz-radius-pill); }
.fz-proj-filter button { border: 0; background: transparent; padding: .35rem .9rem; border-radius: var(--fz-radius-pill); font-size: .82rem; font-weight: 600; color: var(--fz-ink-muted); display: inline-flex; align-items: center; gap: .4rem; }
.fz-proj-filter button span { font-size: .7rem; padding: 1px 6px; border-radius: 999px; background: var(--fz-neutral-soft); }
.fz-proj-filter button.active { background: var(--fz-primary); color: #fff; }
.fz-proj-filter button.active span { background: rgba(255,255,255,.2); }

.fz-proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.fz-proj-card { display: flex; flex-direction: column; gap: .55rem; padding: 1.1rem 1.15rem; background: var(--fz-surface); border: 1px solid var(--fz-border); border-radius: var(--fz-radius-lg); box-shadow: var(--fz-shadow-sm); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.fz-proj-card:hover { border-color: var(--fz-gold); transform: translateY(-2px); box-shadow: var(--fz-shadow-md); }
.fz-proj-card-top { display: flex; align-items: center; justify-content: space-between; }
.fz-proj-logo { width: 46px; height: 46px; border-radius: var(--fz-radius-md); object-fit: cover; flex-shrink: 0; background: var(--fz-surface-alt); }
.fz-proj-logo--initial { display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 800; }
.fz-proj-title { font-size: 1.02rem; font-weight: 700; color: var(--fz-ink); text-decoration: none; margin-top: .25rem; }
.fz-proj-title:hover { color: var(--fz-primary); }
.fz-proj-desc { margin: 0; font-size: .82rem; color: var(--fz-ink-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.fz-proj-metrics { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .15rem; }
.fz-proj-metrics > span { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .6rem; border-radius: var(--fz-radius-pill); background: var(--fz-surface-alt); border: 1px solid var(--fz-border); font-size: .76rem; font-weight: 600; color: var(--fz-ink-body); }
.fz-proj-metrics .material-icons-outlined { font-size: 15px; color: var(--fz-gold-dark); }
.fz-proj-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--fz-border); }
.fz-proj-team { display: flex; align-items: center; }
.fz-proj-av { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--fz-surface); margin-left: -8px; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; font-size: .66rem; font-weight: 700; flex-shrink: 0; }
.fz-proj-team .fz-proj-av:first-child { margin-left: 0; }
.fz-proj-av--more { background: var(--fz-neutral-soft); color: var(--fz-neutral); }
.fz-proj-noteam { font-size: .78rem; color: var(--fz-ink-subtle); }
.fz-proj-actions { display: flex; gap: .25rem; }
.fz-proj-icon-btn { width: 32px; height: 32px; border-radius: var(--fz-radius-sm); border: 0; background: transparent; color: var(--fz-ink-muted); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.fz-proj-icon-btn .material-icons-outlined { font-size: 19px; }
.fz-proj-icon-btn:hover { background: var(--fz-accent-soft); color: var(--fz-primary); }
.fz-proj-icon-btn--danger:hover { background: var(--fz-danger-soft); color: var(--fz-danger); }

/* detail page */
.fz-projd-hero { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; padding: 1.25rem 1.5rem; border-radius: var(--fz-radius-xl); color: #fff; background: linear-gradient(110deg, var(--fz-navy) 0%, var(--fz-primary) 60%, #2d5287 100%); border-bottom: 3px solid var(--fz-gold); }
.fz-projd-hero .fz-proj-logo { width: 64px; height: 64px; font-size: 1.6rem; border: 2px solid rgba(255,255,255,.85); }
.fz-projd-title { margin: 0 0 .25rem; font-size: 1.4rem; font-weight: 800; color: #fff; }
.fz-projd-desc { margin: 0; color: rgba(255,255,255,.8); font-size: .88rem; max-width: 70ch; }
.fz-projd-hero .fz-status { background: rgba(255,255,255,.16); color: #fff; }
.fz-projd-member { display: flex; align-items: center; gap: .7rem; padding: .6rem 0; border-bottom: 1px solid var(--fz-border); }
.fz-projd-member:last-child { border-bottom: 0; }
.fz-projd-member .fz-proj-av { width: 38px; height: 38px; margin: 0; font-size: .75rem; }
.fz-projd-member-name { font-weight: 600; font-size: .88rem; color: var(--fz-ink); line-height: 1.2; }
.fz-projd-member-sub { font-size: .74rem; color: var(--fz-ink-muted); }
.fz-projd-member-time { margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--fz-primary); background: var(--fz-accent-soft); padding: .15rem .55rem; border-radius: 999px; white-space: nowrap; }

/* Project work history (detail page + client report) */
.fz-wh-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; }
.fz-wh-summary > div { display: flex; flex-direction: column; padding: .8rem 1rem; border: 1px solid var(--fz-border); border-radius: var(--fz-radius-md); background: var(--fz-surface-alt); }
.fz-wh-summary span { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--fz-gold-dark); }
.fz-wh-summary strong { font-size: 1.35rem; color: var(--fz-ink); line-height: 1.2; }
.fz-wh-summary small { font-size: .74rem; color: var(--fz-ink-muted); }
.fz-wh-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .75rem 1.5rem; margin-top: 1rem; font-size: .82rem; }
.fz-wh-bar { height: 6px; border-radius: 99px; background: var(--fz-neutral-soft); margin-top: 4px; overflow: hidden; }
.fz-wh-bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--fz-gold), var(--fz-primary)); }

.fz-wd { border: 1px solid var(--fz-border); border-radius: var(--fz-radius-lg); background: var(--fz-surface); margin-bottom: .9rem; overflow: hidden; break-inside: avoid; }
.fz-wd-head { display: flex; align-items: center; gap: .9rem; padding: .7rem 1rem; background: var(--fz-surface-alt); border-bottom: 1px solid var(--fz-border); flex-wrap: wrap; }
.fz-wd-date { width: 46px; text-align: center; border-radius: var(--fz-radius-md); background: var(--fz-primary); color: #fff; padding: .2rem 0; line-height: 1; flex-shrink: 0; }
.fz-wd-dnum { display: block; font-size: 1.2rem; font-weight: 800; }
.fz-wd-dmon { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fz-gold); font-weight: 700; margin-top: 2px; }
.fz-wd-title { display: flex; flex-direction: column; line-height: 1.2; }
.fz-wd-title strong { font-size: .92rem; color: var(--fz-ink); }
.fz-wd-title span { font-size: .76rem; color: var(--fz-ink-muted); }
.fz-wd-meta { margin-left: auto; display: flex; gap: .6rem; align-items: center; font-size: .78rem; color: var(--fz-ink-muted); }
.fz-wd-meta > span { display: inline-flex; align-items: center; gap: .3rem; }
.fz-wd-meta .material-icons-outlined { font-size: 16px; color: var(--fz-gold-dark); }
.fz-wd-total { font-weight: 700; color: var(--fz-primary); background: var(--fz-accent-soft); padding: .2rem .65rem; border-radius: 99px; }
.fz-wd-total .material-icons-outlined { color: var(--fz-primary) !important; }
.fz-wd-row { display: grid; grid-template-columns: 220px 1fr 90px; gap: 1rem; padding: .8rem 1rem; border-top: 1px solid var(--fz-border); align-items: start; }
.fz-wd-row:first-child { border-top: 0; }
.fz-wd-who { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.fz-wd-av { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; }
.fz-wd-name { display: flex; flex-direction: column; font-size: .84rem; font-weight: 600; color: var(--fz-ink); line-height: 1.2; min-width: 0; }
.fz-wd-name small { font-size: .7rem; color: var(--fz-ink-muted); font-weight: 400; }
.fz-wd-desc { font-size: .86rem; color: var(--fz-ink-body); line-height: 1.5; }
.fz-wt-h { font-weight: 700; color: var(--fz-ink); margin: .35rem 0 .15rem; font-size: .84rem; }
.fz-wt-h:first-child { margin-top: 0; }
.fz-wt-p { margin: 0; }
.fz-wt-ul { margin: .15rem 0 .35rem; padding-left: 1.1rem; }
.fz-wt-ul li { margin: .1rem 0; padding-left: .1rem; }
.fz-wt-ul li::marker { color: var(--fz-gold-dark); }
.fz-wd-dur { text-align: right; font-weight: 700; font-size: .84rem; color: var(--fz-primary); white-space: nowrap; }
@media (max-width: 767.98px) {
    .fz-wd-row { grid-template-columns: 1fr auto; }
    .fz-wd-desc { grid-column: 1 / -1; order: 3; }
}
.fz-proj-stat-hint { font-size: .7rem; color: var(--fz-ink-subtle); }

/* Work-history matrix: days down the side, employees across (40% each, scrolls sideways) */
.fz-mx-wrap { container-type: inline-size; }
.fz-mx-scroll { overflow-x: auto; border: 1px solid var(--fz-border); border-radius: var(--fz-radius-lg); background: var(--fz-surface); }
.fz-mx { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; table-layout: fixed; }
.fz-mx th, .fz-mx td { border-bottom: 1px solid var(--fz-border); border-right: 1px solid var(--fz-border); vertical-align: top; }
.fz-mx th:last-child, .fz-mx td:last-child { border-right: 0; }
.fz-mx tbody tr:last-child > * { border-bottom: 0; }
.fz-mx-daycol { width: 104px; min-width: 104px; position: sticky; left: 0; z-index: 2; background: var(--fz-surface-alt); text-align: left; }
.fz-mx thead th { position: sticky; top: 0; z-index: 3; background: var(--fz-surface-alt); padding: .7rem .85rem; }
.fz-mx thead .fz-mx-daycol { z-index: 4; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fz-gold-dark); font-weight: 700; vertical-align: middle; }
.fz-mx-empcol { width: max(40cqw, 260px); }
.fz-mx-emp { display: flex; align-items: center; gap: .55rem; }
.fz-mx-emptotal { margin-left: auto; font-size: .74rem; font-weight: 700; color: var(--fz-primary); background: var(--fz-accent-soft); padding: .12rem .5rem; border-radius: 99px; white-space: nowrap; }
.fz-mx-dayrow { padding: .7rem .75rem; display: table-cell; }
.fz-mx-date { display: inline-block; width: 40px; text-align: center; border-radius: var(--fz-radius-sm); background: var(--fz-primary); color: #fff; padding: .2rem 0; line-height: 1; vertical-align: middle; }
.fz-mx-dayinfo { display: inline-flex; flex-direction: column; margin-left: .5rem; vertical-align: middle; line-height: 1.25; }
.fz-mx-dayinfo strong { font-size: .82rem; color: var(--fz-ink); }
.fz-mx-dayinfo span { font-size: .72rem; color: var(--fz-primary); font-weight: 600; }
.fz-mx-cell { padding: .7rem .85rem; }
.fz-mx-cell.is-empty { background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(100,116,139,.05) 8px 16px); }
.fz-mx-none { color: var(--fz-ink-subtle); }
.fz-mx-entry + .fz-mx-entry { margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed var(--fz-border); }
.fz-mx-dur { display: inline-block; font-size: .74rem; font-weight: 700; color: var(--fz-primary); background: var(--fz-accent-soft); padding: .1rem .55rem; border-radius: 99px; margin-bottom: .3rem; }
.fz-mx-hint { display: flex; align-items: center; gap: .35rem; justify-content: flex-end; margin-top: .4rem; font-size: .74rem; color: var(--fz-ink-muted); }
.fz-mx-hint .material-icons-outlined { font-size: 16px; }

.fz-view-toggle { display: inline-flex; padding: 3px; background: var(--fz-surface); border: 1px solid var(--fz-border); border-radius: var(--fz-radius-pill); }
.fz-view-toggle button { border: 0; background: transparent; padding: .28rem .8rem; border-radius: var(--fz-radius-pill); font-size: .78rem; font-weight: 600; color: var(--fz-ink-muted); display: inline-flex; align-items: center; gap: .3rem; }
.fz-view-toggle button .material-icons-outlined { font-size: 16px; }
.fz-view-toggle button.active { background: var(--fz-primary); color: #fff; }
@media (max-width: 767.98px) { .fz-mx-empcol { width: max(78cqw, 230px); } }

/* ---- Work history colours: each employee keeps one colour; the day column is navy/gold ---- */
.fz-mx thead .fz-mx-daycol { background: var(--fz-navy); color: var(--fz-gold); border-right-color: rgba(255,255,255,.12); }
.fz-mx-empcol { background: var(--bg); border-top: 4px solid var(--c); }
.fz-mx thead th.fz-mx-empcol { background: var(--bg); }
.fz-mx-empcol .fz-wd-name { color: var(--c); }
.fz-mx-empcol .fz-wd-name small { color: var(--fz-ink-muted); }
.fz-mx-empcol .fz-mx-emptotal { background: var(--c); color: #fff; }
.fz-mx-cell { background: color-mix(in srgb, var(--bg) 38%, #fff); border-left: 3px solid var(--c); }
.fz-mx-cell.is-empty { background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(100,116,139,.06) 8px 16px); border-left-color: transparent; }
.fz-mx-dur { background: var(--c); color: #fff; }
.fz-mx-entry .fz-wt-h { color: var(--c); }
.fz-mx-entry .fz-wt-ul li::marker { color: var(--c); }

.fz-mx-dayrow { background: linear-gradient(90deg, rgba(30,58,99,.10), rgba(30,58,99,.04)); border-left: 4px solid var(--fz-primary); }
.fz-mx-dayrow.is-weekend { background: linear-gradient(90deg, rgba(217,119,6,.18), rgba(217,119,6,.07)); border-left-color: var(--fz-gold); }
.fz-mx-dayrow.is-weekend .fz-mx-date { background: var(--fz-gold-dark); }
.fz-mx-dayrow.is-weekend .fz-wd-dmon { color: #fff; }
.fz-mx-daytotal { display: inline-block; margin-top: 2px; font-size: .7rem !important; font-weight: 700; color: #fff !important; background: var(--fz-primary); border-radius: 99px; padding: 0 .5rem; }
.fz-mx-dayrow.is-weekend .fz-mx-daytotal { background: var(--fz-gold-dark); }

/* day-wise cards: employee colour on avatar, time and bullets */
.fz-wd-row { border-left: 3px solid var(--c, transparent); }
.fz-wd-row .fz-wd-name { color: var(--c); }
.fz-wd-row .fz-wd-name small { color: var(--fz-ink-muted); }
.fz-wd-row .fz-wd-dur { color: var(--c); }
.fz-wd-row .fz-wt-h { color: var(--c); }
.fz-wd-row .fz-wt-ul li::marker { color: var(--c); }

/* Clear separator between each day in the matrix */
.fz-mx tbody tr > th, .fz-mx tbody tr > td { border-bottom: 2px solid rgba(30, 58, 99, .28); }
.fz-mx tbody tr:last-child > th, .fz-mx tbody tr:last-child > td { border-bottom: 0; }
.fz-mx tbody tr > td, .fz-mx tbody tr > th { padding-top: .9rem; padding-bottom: .9rem; }
.fz-mx tbody tr:hover > td { filter: brightness(.985); }

/* Logout: red, so it stands out against the navy top bar */
.fz-logout-btn { background: #dc2626; border-color: #dc2626; color: #fff; box-shadow: 0 1px 4px rgba(220, 38, 38, .35); }
.fz-logout-btn:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }

/* Match old updates screen */
.fz-mt-bulk { position: sticky; top: calc(var(--fz-topbar-h) + 6px); z-index: 6; background: var(--fz-surface); border: 1px solid var(--fz-border); border-radius: var(--fz-radius-lg); padding: .65rem .9rem; margin-bottom: .9rem; box-shadow: var(--fz-shadow-sm); }
.fz-mt-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fz-gold-dark); }
.fz-mt-text { font-size: .85rem; max-height: 9.5em; overflow: hidden; line-height: 1.5; }
.fz-mt-text.is-open { max-height: none; }
.fz-mt-sug { border: 1px dashed var(--fz-primary); background: var(--fz-accent-soft); color: var(--fz-primary); border-radius: 99px; padding: .2rem .65rem; font-size: .76rem; font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; }
.fz-mt-sug .material-icons-outlined { font-size: 14px; color: var(--fz-gold-dark); }
.fz-mt-sug:hover { background: var(--fz-primary); color: #fff; border-style: solid; }
.fz-mt-amb { display: inline-block; font-size: .74rem; font-weight: 600; color: var(--fz-warning); background: var(--fz-warning-soft); border-radius: 8px; padding: .2rem .5rem; }
.row-project.is-matched { border-color: var(--fz-success); background-color: var(--fz-success-soft); font-weight: 600; }

/* Earlier (pre-hours) updates shown in project work history */
.fz-mx-dur--legacy { background: var(--fz-neutral-soft) !important; color: var(--fz-neutral) !important; font-weight: 600; }
.fz-mx-entry.is-legacy .fz-wd-desc { color: var(--fz-ink-muted); }
.fz-wd-dur--legacy { font-size: .7rem; font-weight: 600; line-height: 1.25; color: var(--fz-neutral) !important; }
.fz-wd-row.is-legacy { background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(100,116,139,.04) 10px 20px); }

/* ---- Admin team Work Update screen ---- */
.fz-tw-update + .fz-tw-update { margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed var(--fz-border); }
.fz-tw-proj { display: inline-block; font-size: .72rem; font-weight: 700; color: var(--c, var(--fz-primary)); background: var(--bg, var(--fz-accent-soft)); border-radius: 99px; padding: .1rem .55rem; margin-bottom: .3rem; }
.fz-tw-proj.is-none { color: var(--fz-neutral); background: var(--fz-neutral-soft); font-weight: 600; }
.fz-tw-time { margin-top: .75rem; padding: .55rem .65rem; border-radius: var(--fz-radius-md); background: rgba(255,255,255,.7); border: 1px solid var(--fz-border); }
.fz-tw-time-head { display: flex; align-items: center; gap: .3rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--fz-gold-dark); margin-bottom: .35rem; }
.fz-tw-time-head .material-icons-outlined { font-size: 15px; }
.fz-tw-time-head strong { margin-left: auto; color: var(--fz-primary); font-size: .76rem; letter-spacing: 0; text-transform: none; }
.fz-tw-time-row + .fz-tw-time-row { margin-top: .4rem; padding-top: .4rem; border-top: 1px dashed var(--fz-border); }
.fz-tw-time-row .fz-tw-proj { margin-bottom: 0; }
.fz-tw-time-desc { font-size: .78rem; color: var(--fz-ink-muted); margin-top: .2rem; }
.fz-tw-row { grid-template-columns: 220px 1fr 90px; }
.fz-tw-body { min-width: 0; }
.fz-tw-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.fz-tw-card { background: var(--fz-surface); border: 1px solid var(--fz-border); border-top: 4px solid var(--c); border-radius: var(--fz-radius-lg); overflow: hidden; }
.fz-tw-card-head { display: flex; align-items: center; gap: .6rem; padding: .65rem .85rem; background: var(--bg); }
.fz-tw-card-head .fz-wd-name { color: var(--c); }
.fz-tw-card-date { margin-left: auto; font-size: .74rem; font-weight: 700; color: var(--fz-ink-body); white-space: nowrap; }
.fz-tw-card-body { padding: .8rem .9rem; }
@media (max-width: 767.98px) { .fz-tw-row { grid-template-columns: 1fr auto; } .fz-tw-body { grid-column: 1 / -1; order: 3; } }

/* Resigned / access-revoked employees keep their history, marked "Former" */
.fz-former { display: inline-block; vertical-align: middle; margin-left: .3rem; padding: 0 .45rem; border-radius: 99px; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fz-neutral); background: var(--fz-neutral-soft); }

/* Employee documents (multi-upload) */
.fz-doc-list { display: flex; flex-direction: column; gap: .5rem; }
.fz-doc-drop { border: 2px dashed var(--fz-border-strong); border-radius: var(--fz-radius-lg); padding: .9rem 1rem; background: var(--fz-surface-alt); }
.fz-doc-pick { display: flex; align-items: center; gap: .75rem; cursor: pointer; margin: 0; color: var(--fz-ink-body); }
.fz-doc-pick .material-icons-outlined { font-size: 30px; color: var(--fz-gold-dark); }
.fz-doc-pick:hover strong { color: var(--fz-primary); }
.fz-doc-picked { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.fz-doc-picked:empty { display: none; }
.fz-doc-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .35rem .25rem .6rem; border-radius: 99px; background: var(--fz-surface); border: 1px solid var(--fz-border); font-size: .78rem; font-weight: 600; }
.fz-doc-pill .material-icons-outlined { font-size: 16px; color: var(--fz-gold-dark); }
.fz-doc-pill small { color: var(--fz-ink-muted); font-weight: 500; }
.fz-doc-pill-x { border: 0; background: var(--fz-neutral-soft); border-radius: 50%; width: 20px; height: 20px; line-height: 18px; padding: 0; color: var(--fz-neutral); }
.fz-doc-pill-x:hover { background: var(--fz-danger-soft); color: var(--fz-danger); }