/* /Layout/HomeLayout.razor.rz.scp.css */
/* ============================================================
   HomeLayout.razor.css  –  Main layout shell
   ============================================================ */

.home-shell[b-4jpfc5fo3x] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: #F4F1EC;
}

.layout-content[b-4jpfc5fo3x] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 640px) {
    .layout-content[b-4jpfc5fo3x] {
        padding-bottom: 0;
    }
}

@media (min-width: 640px) {
    .home-shell[b-4jpfc5fo3x] {
        flex-direction: row;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.main-plain[b-x8m2uo2aul] {
    min-height: 100dvh;
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* ============================================================
   NavMenu.razor.css  –  HB-Staff Sidebar Navigation
   Mobile-first · Navy / Gold / Warm-Gray palette

   < 640px  : sticky bottom tab bar (icons only)
   ≥ 640px  : icon-only vertical sidebar (80px)
   ≥ 900px  : full sidebar with labels (224px)

   NOTE: No CSS variables — Blazor scoped CSS breaks :root vars.
   Palette:
     sidebar bg ........... #111d33
     inactive pill ........ #2E384C
     inactive pill hover .. #3C4658
     active pill .......... #F4F1EC  (cream)
     gold ................. #C9A84C
     navy ................. #1B2A4A
     text dim ............. #9499A3
     text hover ........... #E7E8EB
   ============================================================ */


/* ═══════════════════════════════════════════════════════════
   MOBILE  (< 640px)  ·  sticky bottom tab bar
   ═══════════════════════════════════════════════════════════ */

.sidebar[b-c67rqfofva] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 300;
    order: 2;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    height: calc(68px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #111d33;
    border-top: 1px solid #293447;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .25);
}

.sidebar__brand[b-c67rqfofva]  { display: none; }
.sidebar__bottom[b-c67rqfofva] { display: none; }

.sidebar__nav[b-c67rqfofva] {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    padding: 6px 8px;
    gap: 4px;
}

.sidebar__link--sub[b-c67rqfofva] { display: none; }

/* Each tab is a pill that hugs its icon */
.sidebar__link[b-c67rqfofva] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 6px 5px;
    border-radius: 14px;
    font-family: 'Arial', sans-serif;
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: #9499A3;
    text-decoration: none;
    background: #2E384C;
    border: none;
    cursor: pointer;
    position: relative;
    transition: background .18s, color .18s;
}


.sidebar__link span[b-c67rqfofva] { display: none; }

.sidebar__link:hover[b-c67rqfofva] {
    color: #C9A84C;
    background: rgba(201, 168, 76, 0.12);
}

/* Active tab: dark olive pill + gold icon */
.sidebar__link.active[b-c67rqfofva] {
    color: #E7E8EB;
    background: #3a3820;
    border-radius: 14px;
    border-top: none;
}

.sidebar__link.active .sidebar__icon[b-c67rqfofva] {
    color: #C9A84C;
    opacity: 1;
}

.sidebar__icon[b-c67rqfofva] {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    opacity: .65;
    transition: opacity .18s, color .18s;
}

.sidebar__link:hover .sidebar__icon[b-c67rqfofva]  { opacity: .9; }
.sidebar__link.active .sidebar__icon[b-c67rqfofva] { opacity: 1; }


/* ═══════════════════════════════════════════════════════════
   MEDIUM  (≥ 640px)  ·  icon-only vertical sidebar (80px)
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 640px) {

    .sidebar[b-c67rqfofva] {
        position: sticky;
        top: 0;
        left: auto; right: auto; bottom: auto;
        order: 0;
        flex-direction: column;
        width: 80px;
        height: 100dvh;
        min-height: 100dvh;
        border-top: none;
        border-right: 1.5px solid rgba(201,168,76,.22);
        box-shadow: none;
        overflow-y: auto;
        padding-bottom: 0;
    }

    .sidebar__brand[b-c67rqfofva] {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 56px;
        padding: 0;
        flex-shrink: 0;
        border-bottom: 1.5px solid rgba(201,168,76,.22);
        font-family: 'Arial Narrow', 'Arial', sans-serif;
        font-weight: 800;
        font-size: 1rem;
        letter-spacing: .14em;
        text-transform: uppercase;
    }

    .sidebar__logo-hb[b-c67rqfofva]    { color: #C9A84C; }
    .sidebar__logo-staff[b-c67rqfofva] { display: none; }

    .sidebar__nav[b-c67rqfofva] {
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: .75rem 8px;
        gap: 5px;
    }

    .sidebar__link--sub[b-c67rqfofva] { display: none; }

    /* Icon pill: always visible background */
    .sidebar__link[b-c67rqfofva] {
        flex: none;
        width: 68px;
        height: 68px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0;
        padding: 8px;
        border-radius: 18px;
        font-size: .7rem;
        color: #9499A3;
        background: #2E384C;
        border-top: none;
        position: relative;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .30);
        transition: background .18s, color .18s, transform .15s, box-shadow .18s;
    }

    .sidebar__link span[b-c67rqfofva] { display: none; }

    .sidebar__link:hover[b-c67rqfofva] {
        background: rgba(201, 168, 76, 0.12);
        color: #C9A84C;
        transform: scale(1.06);
        box-shadow: 0 4px 14px rgba(0, 0, 0, .40);
    }

    /* Active: dark olive pill + gold ring accent + gold icon */
    .sidebar__link.active[b-c67rqfofva] {
        background: #3a3820;
        color: #E7E8EB;
        box-shadow: 0 0 0 2px #C9A84C, 0 4px 12px rgba(0, 0, 0, .35);
        border-radius: 18px;
        border-top: none;
        transform: none;
    }

    .sidebar__link.active .sidebar__icon[b-c67rqfofva] {
        color: #C9A84C;
        opacity: 1;
    }

    .sidebar__icon[b-c67rqfofva] {
        width: 28px;
        height: 28px;
        opacity: .7;
    }

    .sidebar__link:hover .sidebar__icon[b-c67rqfofva]  { opacity: 1; }
    .sidebar__link.active .sidebar__icon[b-c67rqfofva] { opacity: 1; }

    .sidebar__bottom[b-c67rqfofva] {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 32px;
        box-sizing: border-box;
        padding: 0 8px;
        border-top: 1.5px solid rgba(201,168,76,.22);
        flex-shrink: 0;
    }

    .sidebar__logout[b-c67rqfofva] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: auto;
        height: 24px;
        padding: 0 10px;
        border-radius: 6px;
        font-family: 'Arial', sans-serif;
        font-size: .7rem;
        font-weight: 600;
        color: #F5D98A;
        background: rgba(201, 168, 76, .15);
        border: none;
        cursor: pointer;
        transition: background .18s;
    }

    .sidebar__logout span[b-c67rqfofva] { display: none; }
    .sidebar__logout .sidebar__logout-label[b-c67rqfofva] { display: inline; }
    .sidebar__logout-info[b-c67rqfofva] { display: contents; }
    .sidebar__logout .sidebar__logout-name[b-c67rqfofva] { display: none; }

    .sidebar__logout:hover[b-c67rqfofva] { background: rgba(201, 168, 76, .28); }
}


/* ═══════════════════════════════════════════════════════════
   LARGE  (≥ 900px)  ·  full sidebar with labels (224px)
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 900px) {

    .sidebar[b-c67rqfofva] { width: 256px; }

    .sidebar__brand[b-c67rqfofva] {
        justify-content: flex-start;
        padding: 0 1.5rem;
        font-size: 1rem;
        height: 56px;
        border-bottom: 1.5px solid rgba(201,168,76,.22);
    }

    .sidebar__logo-staff[b-c67rqfofva] {
        display: inline;
        color: #fff;
        margin-left: .3em;
    }

    .sidebar__nav[b-c67rqfofva] {
        align-items: stretch;
        padding: .75rem .75rem;
        gap: 6px;
    }

    /* Full-width rounded-rect container for each nav item */
    .sidebar__link[b-c67rqfofva] {
        width: auto;
        height: auto;
        flex-direction: row;
        justify-content: flex-start;
        padding: 1rem 1.4rem;
        margin: 0;
        border-radius: 12px;
        gap: 1rem;
        font-size: .94rem;
        font-weight: 600;
        letter-spacing: .02em;
        color: #9499A3;
        background: #1E2D47;
        border-top: none;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .20);
        transition: background .18s, color .18s, transform .12s, box-shadow .18s;
    }

    .sidebar__link span[b-c67rqfofva] { display: inline; }

    .sidebar__link:hover[b-c67rqfofva] {
        background: rgba(201, 168, 76, 0.16);
        color: #C9A84C;
        transform: translateX(3px);
        box-shadow: inset 3px 0 0 rgba(201, 168, 76, 0.45), 0 2px 8px rgba(0, 0, 0, .20);
    }

    .sidebar__link:hover .sidebar__icon[b-c67rqfofva] { color: #C9A84C; opacity: 1; }

    /* Active: gold-tinted container + strong gold left bar + gold icon + gold text */
    .sidebar__link.active[b-c67rqfofva] {
        background: rgba(201, 168, 76, 0.13);
        color: #C9A84C;
        box-shadow: inset 4px 0 0 #C9A84C, 0 2px 10px rgba(201, 168, 76, 0.12);
        border-radius: 12px;
        padding-left: 1.4rem;
        transform: none;
    }

    .sidebar__link.active .sidebar__icon[b-c67rqfofva] {
        color: #C9A84C;
        opacity: 1;
    }

.sidebar__link--sub[b-c67rqfofva] {
        display: flex;
        padding: .85rem 1.4rem;
        font-size: .84rem;
        font-weight: 500;
        color: #9499A3;
        border-radius: 12px;
        background: #192538;
    }

    .sidebar__link--sub:hover[b-c67rqfofva] {
        color: #C9A84C;
        background: rgba(201, 168, 76, 0.16);
        box-shadow: inset 3px 0 0 rgba(201, 168, 76, 0.45);
        transform: translateX(3px);
    }

    .sidebar__link--sub.active[b-c67rqfofva] {
        background: rgba(201, 168, 76, 0.13);
        color: #C9A84C;
        box-shadow: inset 4px 0 0 #C9A84C;
        border-radius: 12px;
        padding-left: 1.4rem;
    }

    .sidebar__link--sub.active .sidebar__icon[b-c67rqfofva] {
        color: #C9A84C;
        opacity: 1;
    }

    .sidebar__icon[b-c67rqfofva] {
        width: 20px;
        height: 20px;
        opacity: .7;
    }

    .sidebar__bottom[b-c67rqfofva] {
        height: 32px;
        box-sizing: border-box;
        padding: 0 .75rem;
        border-top: 1.5px solid rgba(201,168,76,.22);
    }

    .sidebar__logout[b-c67rqfofva] {
        width: auto;
        height: 24px;
        justify-content: center;
        align-items: center;
        padding: 0 10px;
        gap: 5px;
        border-radius: 6px;
        background: rgba(201, 168, 76, .15);
        border: none;
        color: #F5D98A;
        box-shadow: none;
        transition: background .18s;
    }

    .sidebar__logout:hover[b-c67rqfofva] { background: rgba(201, 168, 76, .28); }
}
/* /Pages/AccessDenied.razor.rz.scp.css */
.denied-wrapper[b-jsiyknuqjd] {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F4F1EC;
    padding: 2rem 1.25rem;
}

.denied-card[b-jsiyknuqjd] {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(27,42,74,.10);
    border: 0.5px solid #EAE6DF;
    padding: 2.5rem 2rem;
    text-align: center;
    max-width: 380px;
    width: 100%;
}

.denied-icon[b-jsiyknuqjd] {
    width: 52px;
    height: 52px;
    margin: 0 auto 1.25rem;
    background: #FCEBEB;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #E24B4A;
}

.denied-icon svg[b-jsiyknuqjd] {
    width: 26px;
    height: 26px;
}

.denied-title[b-jsiyknuqjd] {
    font-family: 'Arial Narrow', Arial, sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #1B2A4A;
    margin: 0 0 .6rem;
}

.denied-msg[b-jsiyknuqjd] {
    font-family: Arial, sans-serif;
    font-size: .78rem;
    color: #6B7A99;
    margin: 0 0 1.5rem;
    line-height: 1.5;
}

.denied-btn[b-jsiyknuqjd] {
    background: #C9A84C;
    color: #1B2A4A;
    border: none;
    border-radius: 8px;
    padding: 9px 20px;
    font-size: .82rem;
    font-weight: 700;
    font-family: Arial, sans-serif;
    cursor: pointer;
    transition: background .15s;
}

.denied-btn:hover[b-jsiyknuqjd] { background: #E2C07A; }
/* /Pages/AccountingExpensesReport.razor.rz.scp.css */
/* ============================================================
   AccountingExpensesReport.razor.css
   Mobile-first · Navy / Gold / Warm-Gray palette
   ============================================================ */

/* ── Wrapper ────────────────────────────────────────────────── */
.acct-report-wrapper[b-ncdk74hb3c] {
    --navy:        #1B2A4A;
    --gold:        #C9A84C;
    --gold-light:  #E2C07A;
    --warm-gray:   #F4F1EC;
    --warm-gray-2: #EAE6DF;
    --text-muted:  #6B7A99;
    --radius-card: 10px;
    --accent:      #0F6E56;
    --pdf-col-hdr: #BDD0EF;
    --pdf-border:  #D0D7E3;

    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--warm-gray);
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero[b-ncdk74hb3c] {
    padding: 1.5rem 1.5rem 2.2rem;
    background: var(--accent);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.hero-arc[b-ncdk74hb3c] {
    position: absolute;
    bottom: -1px;
    left: -5%;
    width: 110%;
    height: 32px;
    background: var(--warm-gray);
    border-radius: 50% 50% 0 0;
}

.hero__greeting[b-ncdk74hb3c] {
    font-size: .75rem;
    color: #E2C07A;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-family: 'Arial Narrow', Arial, sans-serif;
    margin-bottom: .2rem;
}

.hero__name[b-ncdk74hb3c] {
    font-size: 1.4rem;
    font-weight: 700;
    font-family: Georgia, serif;
    line-height: 1.15;
    color: #fff;
    margin-bottom: .15rem;
}

.hero__sub[b-ncdk74hb3c] {
    font-size: .78rem;
    color: rgba(255,255,255,.55);
    font-family: Arial, sans-serif;
}

/* ── Section / Empty state ─────────────────────────────────── */
.section[b-ncdk74hb3c] {
    flex: 1;
    padding: 1.75rem 1.25rem 1.5rem;
}

.empty-state[b-ncdk74hb3c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border: 1.5px solid var(--warm-gray-2);
    border-radius: 14px;
    padding: 2.5rem 1.5rem;
    box-shadow: 0 1px 4px rgba(27,42,74,.07);
}

.empty-state__icon[b-ncdk74hb3c] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(201,168,76,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.empty-state__icon svg[b-ncdk74hb3c] {
    width: 26px;
    height: 26px;
    stroke: var(--navy);
}

.empty-state__title[b-ncdk74hb3c] {
    font-size: .9rem;
    font-weight: 700;
    font-family: Arial, sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: .3rem;
}

.empty-state__desc[b-ncdk74hb3c] {
    font-size: .78rem;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
}

/* ── Controls row ───────────────────────────────────────────── */
.controls[b-ncdk74hb3c] {
    display: grid;
    grid-template-columns: 1fr;
    gap: .85rem;
    margin-bottom: 1.5rem;
}

.controls__label[b-ncdk74hb3c] {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    font-family: 'Arial', sans-serif;
    margin-bottom: .35rem;
}

.controls__select[b-ncdk74hb3c] {
    width: 100%;
    padding: 6px 10px;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 7px;
    font-size: .78rem;
    font-family: 'Arial', sans-serif;
    color: var(--navy);
    background: #fff;
    cursor: pointer;
    transition: border-color .15s;
}

.controls__select:focus[b-ncdk74hb3c] {
    border-color: var(--gold);
    outline: none;
}

/* ── Loading ────────────────────────────────────────────────── */
.acct-loading[b-ncdk74hb3c] {
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
    font-size: .82rem;
    font-family: 'Arial', sans-serif;
}

/* ── Report table (mirrors the PDF report's header/border colors) ── */
.acct-table-wrap[b-ncdk74hb3c] {
    overflow-x: auto;
    border-radius: var(--radius-card);
    border: 0.5px solid var(--warm-gray-2);
    background: #fff;
}

.acct-table[b-ncdk74hb3c] {
    width: 100%;
    min-width: 1160px;
    border-collapse: collapse;
    font-family: 'Arial', sans-serif;
    font-size: .78rem;
    color: var(--navy);
}

.acct-table thead th[b-ncdk74hb3c] {
    background: var(--pdf-col-hdr);
    border: 0.5px solid var(--pdf-border);
    padding: 7px 8px;
    font-weight: 700;
    font-size: .72rem;
    text-align: left;
    white-space: nowrap;
}

.acct-table tbody td[b-ncdk74hb3c],
.acct-table tfoot td[b-ncdk74hb3c] {
    border: 0.5px solid var(--pdf-border);
    padding: 6px 8px;
}

.acct-table__num[b-ncdk74hb3c] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.acct-table__totals[b-ncdk74hb3c] {
    background: var(--navy);
    color: #fff;
    font-weight: 700;
}

.acct-table__totals td[b-ncdk74hb3c] {
    border-color: var(--pdf-border);
}

/* ── Split-group rows ───────────────────────────────────────── */
.acct-row--split td[b-ncdk74hb3c] {
    background: rgba(15,110,86,.05);
}

/* ── Per-row editable inputs ────────────────────────────────── */
.acct-input[b-ncdk74hb3c] {
    width: 100%;
    padding: .4rem .5rem;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 7px;
    font-size: .78rem;
    background: #fff;
    color: var(--navy);
    font-family: 'Arial', sans-serif;
}

.acct-input:focus[b-ncdk74hb3c] {
    border-color: var(--gold);
    outline: none;
}

.acct-input--nc[b-ncdk74hb3c]      { width: 72px; }
.acct-input--name[b-ncdk74hb3c]    { width: 190px; }
.acct-input--vat[b-ncdk74hb3c]     { width: 76px; cursor: pointer; }
.acct-input--exclvat[b-ncdk74hb3c] { width: 90px; text-align: right; }
.acct-input--comment[b-ncdk74hb3c] { width: 140px; }
.acct-input--totals[b-ncdk74hb3c]  { width: 90px; text-align: right; }

.acct-input--mismatch[b-ncdk74hb3c] {
    background: #FCEBEB;
    border-color: #f5c6c6;
}

.acct-input--readonly[b-ncdk74hb3c] {
    border-color: transparent;
    background: transparent;
    color: var(--navy);
    cursor: default;
}

.acct-input--readonly:focus[b-ncdk74hb3c] {
    border-color: transparent;
    outline: none;
}

.acct-input--capped[b-ncdk74hb3c] {
    background: #FAEEDA;
    border-color: var(--gold-light);
}

.acct-totals-cell[b-ncdk74hb3c] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
}

.acct-capped-mark[b-ncdk74hb3c] {
    font-weight: 700;
    color: #633806;
    cursor: default;
}

/* ── Footnotes ──────────────────────────────────────────────── */
.acct-footnote[b-ncdk74hb3c] {
    margin-top: .6rem;
    font-size: .68rem;
    color: var(--text-muted);
    font-family: 'Arial', sans-serif;
}

.acct-input--nc[b-ncdk74hb3c]::-webkit-outer-spin-button,
.acct-input--nc[b-ncdk74hb3c]::-webkit-inner-spin-button,
.acct-input--exclvat[b-ncdk74hb3c]::-webkit-outer-spin-button,
.acct-input--exclvat[b-ncdk74hb3c]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.acct-input--nc[b-ncdk74hb3c],
.acct-input--exclvat[b-ncdk74hb3c] {
    -moz-appearance: textfield;
}

/* ── Receipt column ─────────────────────────────────────────── */
.acct-table__receipt[b-ncdk74hb3c] {
    text-align: center;
    width: 44px;
}

.acct-table__no-receipt[b-ncdk74hb3c] {
    color: var(--text-muted);
}

.act-btn[b-ncdk74hb3c] {
    background: none;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 6px;
    padding: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition, all .2s cubic-bezier(.4,0,.2,1));
}

.act-btn svg[b-ncdk74hb3c] { width: 14px; height: 14px; stroke-width: 1.8; }

.act-btn:hover:not(:disabled)[b-ncdk74hb3c] { border-color: var(--gold); background: #FFF8EC; }
.act-btn:disabled[b-ncdk74hb3c]             { opacity: .5; cursor: not-allowed; }

.act-btn--view svg[b-ncdk74hb3c] { stroke: var(--navy); }

/* ── VAT split / unsplit ───────────────────────────────────────── */
.acct-vat-cell[b-ncdk74hb3c] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.acct-vat-cell .acct-input--vat[b-ncdk74hb3c] { flex: 1; }

.act-btn--split svg[b-ncdk74hb3c] { stroke: var(--navy); }

.act-btn--unsplit svg[b-ncdk74hb3c]          { stroke: #E24B4A; }
.act-btn--unsplit:hover:not(:disabled)[b-ncdk74hb3c] { border-color: #E24B4A; background: #FCEBEB; }

/* ── Generate PDF ───────────────────────────────────────────── */
.acct-actions[b-ncdk74hb3c] {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

.btn-primary[b-ncdk74hb3c] {
    background: var(--gold);
    color: var(--navy);
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: .82rem;
    border: none;
    cursor: pointer;
    transition: background .15s;
}

.btn-primary:hover:not(:disabled)[b-ncdk74hb3c] {
    background: var(--gold-light);
}

.btn-primary:disabled[b-ncdk74hb3c] {
    opacity: .5;
    cursor: not-allowed;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (min-width: 640px) {
    .hero[b-ncdk74hb3c] { padding: 2rem 2rem 2.5rem; }
    .hero__name[b-ncdk74hb3c] { font-size: 1.7rem; }
    .section[b-ncdk74hb3c] { padding: 2rem 1.5rem; }
    .controls[b-ncdk74hb3c] { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
    .hero[b-ncdk74hb3c] { padding: 2.5rem 2rem 2.5rem; }
    .hero__name[b-ncdk74hb3c] { font-size: 2rem; }
    .section[b-ncdk74hb3c] { padding: 2.5rem 2rem; }
}
/* /Pages/AdminAnalytics.razor.rz.scp.css */
/* ============================================================
   AdminAnalytics.razor.css — HB-Staff Analytics Dashboard
   Mobile-first · Design tokens only
   ============================================================ */

.analytics-wrapper[b-nuibyqdw21] {
    --navy:        #1B2A4A;
    --navy-light:  #243560;
    --navy-dark:   #111d33;
    --gold:        #C9A84C;
    --gold-light:  #E2C07A;
    --gold-muted:  #F5D98A;
    --warm-gray:   #F4F1EC;
    --warm-gray-2: #EAE6DF;
    --text-muted:  #6B7A99;
    --text-light:  #aab0c0;
    --radius-card: 10px;
    --transition:  all .2s cubic-bezier(.4,0,.2,1);
    --accent:      #534AB7;

    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--warm-gray);
    font-family: 'Arial', sans-serif;
}

/* ── Hero ────────────────────────────────────────────────── */
.hero[b-nuibyqdw21] {
    padding: 1.5rem 1.25rem 2.2rem;
    background: var(--navy);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.hero-arc[b-nuibyqdw21] {
    position: absolute;
    bottom: -1px;
    left: -5%;
    width: 110%;
    height: 32px;
    background: var(--warm-gray);
    border-radius: 50% 50% 0 0;
}

.hero__greeting[b-nuibyqdw21] {
    font-size: .75rem;
    color: var(--gold-light);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-family: 'Arial Narrow', Arial, sans-serif;
    margin-bottom: .2rem;
}

.hero__name[b-nuibyqdw21] {
    font-size: 1.4rem;
    font-weight: 700;
    font-family: Georgia, serif;
    line-height: 1.15;
    color: #fff;
    margin-bottom: .15rem;
}

.hero__sub[b-nuibyqdw21] {
    font-size: .78rem;
    color: rgba(255,255,255,.55);
    font-family: 'Arial', sans-serif;
}

/* ── Section ─────────────────────────────────────────────── */
.section[b-nuibyqdw21] {
    flex: 1;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ── Filter Bar ──────────────────────────────────────────── */
.filter-bar[b-nuibyqdw21] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.filter-presets[b-nuibyqdw21] {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

.filter-btn[b-nuibyqdw21] {
    padding: 5px 12px;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 20px;
    background: #fff;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 600;
    font-family: 'Arial Narrow', Arial, sans-serif;
    letter-spacing: .04em;
    cursor: pointer;
    transition: var(--transition);
}

.filter-btn:hover[b-nuibyqdw21] { border-color: var(--accent); color: var(--accent); }

.filter-btn--active[b-nuibyqdw21] {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.filter-custom[b-nuibyqdw21] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.filter-date[b-nuibyqdw21] {
    padding: 5px 8px;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 7px;
    font-size: .75rem;
    font-family: 'Arial', sans-serif;
    color: var(--navy);
    background: #fff;
}
.filter-date:focus[b-nuibyqdw21] { border-color: var(--gold); outline: none; }

.filter-sep[b-nuibyqdw21]   { font-size: .72rem; color: var(--text-muted); }

.filter-apply[b-nuibyqdw21] {
    padding: 5px 14px;
    background: var(--gold);
    color: var(--navy);
    border: none;
    border-radius: 7px;
    font-size: .75rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}
.filter-apply:hover[b-nuibyqdw21] { background: var(--gold-light); }

/* ── Loading / Empty ─────────────────────────────────────── */
.loading-state[b-nuibyqdw21] {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--text-muted);
    font-size: .8rem;
    padding: 2rem 0;
}

.spinner[b-nuibyqdw21] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--warm-gray-2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin-b-nuibyqdw21 .65s linear infinite;
    flex-shrink: 0;
}

@keyframes spin-b-nuibyqdw21 {
    to { transform: rotate(360deg); }
}

.empty-state[b-nuibyqdw21] {
    color: var(--text-muted);
    font-size: .82rem;
    padding: 1.5rem 0;
    text-align: center;
}

/* ── KPI / Pulse band ────────────────────────────────────── */
.kpi-band[b-nuibyqdw21] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.kpi-tile[b-nuibyqdw21] {
    position: relative;
    background: #fff;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: var(--radius-card);
    padding: .85rem 1rem;
    box-shadow: 0 1px 4px rgba(27,42,74,.07);
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.kpi-tile--plain[b-nuibyqdw21] { justify-content: center; }

/* The tile can land in any grid column depending on breakpoint, so anchor the
   tooltip to the tile's own width (guaranteed to fit) instead of the small
   inline info-wrap, which would risk overflowing the viewport near an edge column. */
.kpi-tile .info-wrap[b-nuibyqdw21] { position: static; }
.kpi-tile .info-tooltip[b-nuibyqdw21] {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
}

.kpi-tile__label-row[b-nuibyqdw21] {
    display: flex;
    align-items: center;
    gap: .3rem;
    min-width: 0;
}

.kpi-tile__label[b-nuibyqdw21] {
    min-width: 0;
    font-size: .62rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-family: 'Arial Narrow', Arial, sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kpi-tile__label-row .info-wrap[b-nuibyqdw21] { flex-shrink: 0; }

.kpi-tile__value[b-nuibyqdw21] {
    font-size: 1.35rem;
    font-weight: 700;
    font-family: Georgia, serif;
    color: var(--navy);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kpi-tile__delta[b-nuibyqdw21] {
    font-size: .65rem;
    color: var(--text-muted);
    font-family: 'Arial Narrow', Arial, sans-serif;
}

.kpi-tile__spark[b-nuibyqdw21] {
    margin-top: .25rem;
    height: 32px;
}

/* ── Analytics Panel ─────────────────────────────────────── */
.analytics-panel[b-nuibyqdw21] {
    background: #fff;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: var(--radius-card);
    padding: 1.1rem 1rem 1rem;
    box-shadow: 0 1px 4px rgba(27,42,74,.07);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.analytics-panel--bottom[b-nuibyqdw21] {
    border-top: 3px solid var(--accent);
}

.panel-header[b-nuibyqdw21] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
}

.panel-title[b-nuibyqdw21] {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--navy);
    font-family: 'Arial Narrow', Arial, sans-serif;
}

.panel-title-wrap[b-nuibyqdw21] {
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* Positions the tap-to-open tooltip bubble relative to its trigger button */
.info-wrap[b-nuibyqdw21] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.info-btn[b-nuibyqdw21] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 0.5px solid var(--warm-gray-2);
    background: transparent;
    color: var(--text-muted);
    font-size: .6rem;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, serif;
    line-height: 1;
    padding: 0;
    cursor: help;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: var(--transition);
}
.info-btn:hover[b-nuibyqdw21],
.info-btn:focus-visible[b-nuibyqdw21],
.info-btn--active[b-nuibyqdw21] {
    border-color: var(--gold);
    background: #FFF8EC;
    color: var(--navy);
    outline: none;
}

/* Tap/click-toggled bubble — works on touch devices, unlike a native title hover */
.info-tooltip[b-nuibyqdw21] {
    position: absolute;
    z-index: 250;
    top: calc(100% + 6px);
    left: 0;
    width: 240px;
    max-width: min(240px, calc(100vw - 2.5rem));
    background: #fff;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: var(--radius-card);
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    padding: .6rem .7rem;
    font-size: .68rem;
    line-height: 1.45;
    font-family: Arial, sans-serif;
    color: var(--text-muted);
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    animation: fadeIn-b-nuibyqdw21 .18s ease;
}

.section__title[b-nuibyqdw21] {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    font-family: 'Arial Narrow', Arial, sans-serif;
}

/* ── Toggle ──────────────────────────────────────────────── */
.toggle-bar[b-nuibyqdw21] {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
}

.toggle-btn[b-nuibyqdw21] {
    padding: 4px 12px;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 20px;
    background: #fff;
    color: var(--text-muted);
    font-size: .7rem;
    font-weight: 600;
    font-family: 'Arial Narrow', Arial, sans-serif;
    letter-spacing: .04em;
    cursor: pointer;
    transition: var(--transition);
}

.toggle-btn:hover[b-nuibyqdw21] { border-color: var(--accent); color: var(--accent); }

.toggle-btn--active[b-nuibyqdw21] {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ── Charts Grid ─────────────────────────────────────────── */
.charts-grid[b-nuibyqdw21] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.charts-grid--halves[b-nuibyqdw21] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.chart-card[b-nuibyqdw21] {
    background: var(--warm-gray);
    border: 0.5px solid var(--warm-gray-2);
    border-radius: var(--radius-card);
    padding: .9rem 1rem .75rem;
    min-width: 0;
}

.chart-card--tall[b-nuibyqdw21] { padding-bottom: 1.25rem; }

.chart-card__title[b-nuibyqdw21] {
    display: block;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    font-family: 'Arial Narrow', Arial, sans-serif;
    margin-bottom: .4rem;
}

.chart-hint[b-nuibyqdw21] {
    text-align: center;
    font-size: .62rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-family: 'Arial Narrow', Arial, sans-serif;
    margin: 0 0 .1rem;
}

.chart-selection-name[b-nuibyqdw21] {
    min-height: 1.8rem;
    text-align: center;
    font-size: .78rem;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: .03em;
    padding: .25rem .5rem .4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity .15s, color .15s;
}
.chart-selection-name:empty[b-nuibyqdw21] { opacity: 0; }
.chart-selection-name--locked[b-nuibyqdw21] { color: var(--accent); }

.others-detail[b-nuibyqdw21] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    justify-content: center;
    padding: 0 .5rem .5rem;
    min-height: 0;
}
.others-detail:empty[b-nuibyqdw21] { display: none; }
.others-chip[b-nuibyqdw21] {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 2px 7px;
    border-radius: 20px;
    background: rgba(83,74,183,.1);
    color: #534AB7;
    border: 0.5px solid rgba(83,74,183,.25);
    white-space: nowrap;
    animation: fadeIn-b-nuibyqdw21 .15s ease;
}

@keyframes fadeIn-b-nuibyqdw21 {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Spotlight ───────────────────────────────────────────── */
.spotlight[b-nuibyqdw21] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    border-top: 0.5px solid var(--warm-gray-2);
    padding-top: 1rem;
}

.spotlight__controls[b-nuibyqdw21] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.spotlight__label[b-nuibyqdw21] {
    display: block;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    font-family: 'Arial Narrow', Arial, sans-serif;
    margin-bottom: .35rem;
}

.spotlight__select[b-nuibyqdw21] {
    width: 100%;
    padding: 6px 10px;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 7px;
    font-size: .78rem;
    font-family: 'Arial', sans-serif;
    color: var(--navy);
    background: #fff;
    cursor: pointer;
    transition: border-color .15s;
}
.spotlight__select:focus[b-nuibyqdw21] { border-color: var(--gold); outline: none; }

.spotlight__group-btns[b-nuibyqdw21] {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}

.spotlight__section[b-nuibyqdw21] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.spotlight__kpis[b-nuibyqdw21] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.spotlight__kpi[b-nuibyqdw21] {
    background: var(--warm-gray);
    border-radius: 8px;
    padding: .7rem .9rem;
    text-align: center;
    min-width: 0;
}

.spotlight__kpi-n[b-nuibyqdw21] {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: Georgia, serif;
    color: var(--accent);
    line-height: 1.2;
}

.spotlight__kpi-l[b-nuibyqdw21] {
    display: block;
    font-size: .6rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: .2rem;
    font-family: 'Arial Narrow', Arial, sans-serif;
}

.spotlight__kpi-sub[b-nuibyqdw21] {
    display: block;
    font-size: .7rem;
    color: var(--text-muted);
    margin-top: .15rem;
    font-family: 'Arial Narrow', Arial, sans-serif;
}

.spotlight__loading-bar[b-nuibyqdw21] {
    height: 2px;
    background: transparent;
    margin-bottom: .25rem;
    border-radius: 2px;
    overflow: hidden;
}
.spotlight__loading-bar--active[b-nuibyqdw21] {
    background: var(--warm-gray-2);
    position: relative;
}
.spotlight__loading-bar--active[b-nuibyqdw21]::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 40%;
    background: var(--accent);
    border-radius: 2px;
    animation: loadingSlide-b-nuibyqdw21 .9s ease-in-out infinite;
}
@keyframes loadingSlide-b-nuibyqdw21 {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* ── Identity strip ──────────────────────────────────────── */
.identity-strip[b-nuibyqdw21] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .25rem 0 .5rem;
}

.identity-strip__avatar[b-nuibyqdw21] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gold);
    border: 2px solid var(--gold-light);
    color: var(--navy-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 800;
    font-family: 'Arial Narrow', Arial, sans-serif;
    flex-shrink: 0;
}

.identity-strip__info[b-nuibyqdw21] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.identity-strip__name[b-nuibyqdw21] {
    font-size: .95rem;
    font-weight: 700;
    color: var(--navy);
    font-family: Georgia, serif;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.identity-strip__position[b-nuibyqdw21] {
    font-size: .72rem;
    color: var(--text-muted);
}

/* ── Badges ──────────────────────────────────────────────── */
.badge[b-nuibyqdw21] {
    display: inline-block;
    font-size: .6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: .05em;
    font-family: 'Arial Narrow', Arial, sans-serif;
    flex-shrink: 0;
}

.badge--approved[b-nuibyqdw21] {
    background: #EAF3DE;
    color: #27500A;
    border: 1px solid #B8DABB;
}

.badge--pending[b-nuibyqdw21] {
    background: #FAEEDA;
    color: #633806;
}

.badge--inactive[b-nuibyqdw21] {
    background: var(--warm-gray-2);
    color: var(--text-muted);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (min-width: 480px) {
    .kpi-band[b-nuibyqdw21]            { grid-template-columns: repeat(3, 1fr); }
    .spotlight__kpis[b-nuibyqdw21]     { grid-template-columns: repeat(4, 1fr); }
    .charts-grid--halves[b-nuibyqdw21] { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 640px) {
    .hero[b-nuibyqdw21]        { padding: 2rem 2rem 2.5rem; }
    .hero__name[b-nuibyqdw21]  { font-size: 1.7rem; }
    .section[b-nuibyqdw21]     { padding: 1.5rem 2rem; }
    .kpi-band[b-nuibyqdw21]    { grid-template-columns: repeat(3, 1fr); }
    .charts-grid[b-nuibyqdw21] { grid-template-columns: repeat(2, 1fr); }
    .chart-card--wide[b-nuibyqdw21] { grid-column: 1 / -1; }

    .spotlight__controls[b-nuibyqdw21] {
        flex-direction: row;
        align-items: flex-end;
        gap: 1.5rem;
    }
    .spotlight__user-wrap[b-nuibyqdw21] { flex: 1; }
}

@media (min-width: 860px) {
    .hero__name[b-nuibyqdw21] { font-size: 2rem; }
}

@media (min-width: 900px) {
    .analytics-wrapper[b-nuibyqdw21] {
        box-shadow: 0 0 0 1px var(--warm-gray-2);
    }
}
/* /Pages/AdminCalendar.razor.rz.scp.css */
/* ── Design tokens ───────────────────────────────────────────────────────── */
.admin-cal-wrapper[b-epbafjp0sn] {
    --navy:        #1B2A4A;
    --navy-light:  #243560;
    --navy-dark:   #111d33;
    --gold:        #C9A84C;
    --gold-light:  #E2C07A;
    --gold-muted:  #F5D98A;
    --warm-gray:   #F4F1EC;
    --warm-gray-2: #EAE6DF;
    --text-muted:  #6B7A99;
    --text-light:  #aab0c0;
    --radius-card: 10px;
    --transition:  all .2s cubic-bezier(.4,0,.2,1);
    --accent:      #1B2A4A;

    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--warm-gray);
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero[b-epbafjp0sn] {
    padding: 1.5rem 1.5rem 2.2rem;
    background: var(--navy);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.hero__greeting[b-epbafjp0sn] {
    font-size: .75rem;
    color: var(--gold-light);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-family: 'Arial', sans-serif;
    margin: 0 0 .3rem;
}

.hero__name[b-epbafjp0sn] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    font-family: 'Georgia', serif;
    margin: 0 0 .3rem;
}

.hero__sub[b-epbafjp0sn] {
    font-size: .78rem;
    color: rgba(255,255,255,.55);
    font-family: 'Arial', sans-serif;
    margin: 0;
}

.hero__body[b-epbafjp0sn] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hero__text[b-epbafjp0sn] {
    flex: 1;
    min-width: 0;
}

.hero-nav-card[b-epbafjp0sn] {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    grid-template-rows: auto auto;
    column-gap: .75rem;
    align-items: center;
    background: #fff;
    border: 1.5px solid rgba(255,255,255,.2);
    border-radius: 14px;
    padding: .8rem .9rem;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: border-color .2s, transform .18s;
    flex-shrink: 0;
    width: 172px;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

.hero-nav-card[b-epbafjp0sn]::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--navy);
    transition: background .2s, width .18s;
}

.hero-nav-card:hover[b-epbafjp0sn] {
    border-color: var(--gold);
    transform: translateY(-2px);
}

.hero-nav-card:hover[b-epbafjp0sn]::before { background: var(--gold); width: 5px; }

.hero-nav-card__icon[b-epbafjp0sn] {
    grid-row: 1 / 3;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(27,42,74,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hero-nav-card__icon svg[b-epbafjp0sn] {
    width: 20px;
    height: 20px;
    stroke: var(--navy);
}

.hero-nav-card__title[b-epbafjp0sn] {
    grid-column: 2;
    grid-row: 1;
    font-size: .78rem;
    font-weight: 700;
    font-family: Arial, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--navy);
    line-height: 1.2;
}

.hero-nav-card__desc[b-epbafjp0sn] {
    grid-column: 2;
    grid-row: 2;
    font-size: .65rem;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
    margin-top: .05rem;
}

.hero-nav-card__arrow[b-epbafjp0sn] {
    grid-column: 3;
    grid-row: 1 / 3;
    font-size: 1rem;
    color: var(--gold);
    padding-right: .1rem;
    transition: transform .18s;
}

.hero-nav-card:hover .hero-nav-card__arrow[b-epbafjp0sn] { transform: translateX(3px); }

.hero-arc[b-epbafjp0sn] {
    position: absolute;
    bottom: -1px;
    left: -5%;
    width: 110%;
    height: 32px;
    background: var(--warm-gray);
    border-radius: 50% 50% 0 0;
}

/* ── Stats bar ───────────────────────────────────────────────────────────── */
.stats[b-epbafjp0sn] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 1.75rem 1.25rem 1rem;
}

.stat[b-epbafjp0sn] {
    background: #fff;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: var(--radius-card);
    padding: .85rem 1rem;
    text-align: center;
    box-shadow: 0 1px 4px rgba(27,42,74,.07);
}

.stat__n[b-epbafjp0sn] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--navy);
    font-family: 'Georgia', serif;
}

.stat__l[b-epbafjp0sn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: .65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: .25rem;
}

.stat__dot[b-epbafjp0sn] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.stat__dot--green[b-epbafjp0sn] { background: #27500A; }
.stat__dot--gold[b-epbafjp0sn]  { background: var(--gold); }
.stat__dot--navy[b-epbafjp0sn]  { background: var(--navy); }

/* ── Section ─────────────────────────────────────────────────────────────── */
.section[b-epbafjp0sn] {
    flex: 1;
    padding: 0 1.25rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Month navigation ────────────────────────────────────────────────────── */
.cal-nav[b-epbafjp0sn] {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.cal-nav__label[b-epbafjp0sn] {
    font-size: .82rem;
    font-weight: 700;
    color: var(--navy);
    font-family: 'Arial Narrow', 'Arial', sans-serif;
    text-transform: uppercase;
    letter-spacing: .07em;
    flex: 1;
    text-align: center;
}

.cal-nav__week[b-epbafjp0sn] {
    font-weight: 400;
    color: var(--text-muted);
    margin-left: .35em;
}

.cal-nav__btn[b-epbafjp0sn] {
    width: 32px;
    height: 32px;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 6px;
    background: #fff;
    color: var(--gold);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.cal-nav__btn:hover[b-epbafjp0sn] {
    border-color: var(--gold);
    background: #FFF8EC;
}

.cal-nav__btn--today[b-epbafjp0sn] {
    width: auto;
    padding: 0 10px;
    font-size: .72rem;
    font-weight: 700;
    font-family: 'Arial Narrow', 'Arial', sans-serif;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.cal-nav__loading[b-epbafjp0sn] {
    font-size: .65rem;
    color: var(--text-muted);
    font-family: 'Arial', sans-serif;
    letter-spacing: .04em;
    animation: calPulse-b-epbafjp0sn .8s ease-in-out infinite alternate;
}

@keyframes calPulse-b-epbafjp0sn {
    from { opacity: 0.4; }
    to   { opacity: 1; }
}

/* ── Legend ──────────────────────────────────────────────────────────────── */
.cal-legend[b-epbafjp0sn] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.legend-pill[b-epbafjp0sn] {
    font-size: .6rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.legend-pill--holiday[b-epbafjp0sn]    { background: #E8C547; color: #7A5A00; }
.legend-pill--sick[b-epbafjp0sn]       { background: #F9A8A8; color: #7A1A1A; }
.legend-pill--paternity[b-epbafjp0sn]  { background: #93C5FD; color: #1E3A5F; }
.legend-pill--maternity[b-epbafjp0sn]  { background: #FBCFE8; color: #7A2050; }
.legend-pill--compassion[b-epbafjp0sn] { background: #C4B5FD; color: #4C1D95; }
.legend-pill--study[b-epbafjp0sn]      { background: #67E8F9; color: #134E4A; }
.legend-pill--unpaid[b-epbafjp0sn]     { background: #CBD5E1; color: #334155; }
.legend-pill--other[b-epbafjp0sn]      { background: #A7F3C0; color: #14532D; }
.legend-pill--pending[b-epbafjp0sn]    { background: #FD8C4A; color: #7A2F00; }
.legend-pill--bank[b-epbafjp0sn]       { background: rgba(100,149,237,.15); color: #2a5fc4; border: 1px solid rgba(100,149,237,.35); }

/* ── Calendar scroll wrapper ─────────────────────────────────────────────── */
.calendar-scroll[b-epbafjp0sn] {
    overflow-x: auto;
    border-radius: var(--radius-card);
    border: 0.5px solid var(--warm-gray-2);
    background: #fff;
    box-shadow: 0 1px 4px rgba(27,42,74,.07);
}

/* ── Calendar table ──────────────────────────────────────────────────────── */
.cal-table[b-epbafjp0sn] {
    border-collapse: separate;
    border-spacing: 0;
    white-space: nowrap;
    font-size: .72rem;
    font-family: 'Arial', sans-serif;
    width: 100%;
}

/* Sticky name column */
.cal-name-header[b-epbafjp0sn],
.cal-name[b-epbafjp0sn] {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    min-width: 120px;
    max-width: 160px;
    padding: .4rem .75rem;
    border-right: 1.5px solid var(--warm-gray-2);
}

.cal-name-header[b-epbafjp0sn] {
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    background: var(--navy);
    color: rgba(255,255,255,.6);
}

.cal-name-header--day[b-epbafjp0sn] {
    background: #f8f7f5;
    color: var(--text-muted);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--warm-gray-2);
}

/* Month group headers */
.cal-month-header[b-epbafjp0sn] {
    background: var(--navy);
    color: rgba(255,255,255,.9);
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    text-align: center;
    padding: .4rem .25rem;
    border-left: 1px solid rgba(255,255,255,.1);
}

/* Day number headers */
.cal-day-header[b-epbafjp0sn] {
    width: 28px;
    min-width: 28px;
    text-align: center;
    padding: .2rem 0;
    font-size: .6rem;
    color: var(--text-muted);
    background: #f8f7f5;
    border-bottom: 1px solid var(--warm-gray-2);
    border-left: 0.5px solid var(--warm-gray-2);
}

.cal-day-hd[b-epbafjp0sn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.cal-day-dow[b-epbafjp0sn] {
    font-size: .52rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: .03em;
    line-height: 1;
}

/* Data rows */
.cal-row:nth-child(even) .cal-name[b-epbafjp0sn] {
    background: #fafafa;
}

.cal-row:nth-child(even) .cal-name-header[b-epbafjp0sn],
.cal-row:nth-child(even) .cal-day:not(.cal-day--leave):not(.cal-day--weekend):not(.cal-day--bank-holiday)[b-epbafjp0sn] {
    background: #fafafa;
}

.cal-row:hover .cal-name[b-epbafjp0sn] {
    background: #FFF8EC;
}

.cal-name[b-epbafjp0sn] {
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 0.5px solid var(--warm-gray-2);
}

.cal-name__link[b-epbafjp0sn] {
    display: block;
    color: var(--navy);
    font-weight: 600;
    font-size: .75rem;
    text-decoration: none;
    transition: var(--transition);
}

.cal-name__link:hover[b-epbafjp0sn] {
    color: var(--gold);
    text-decoration: underline;
}

/* Day cells */
.cal-day[b-epbafjp0sn] {
    width: 28px;
    min-width: 28px;
    height: 26px;
    text-align: center;
    padding: 2px 1px;
    border-left: 0.5px solid var(--warm-gray-2);
    border-bottom: 0.5px solid var(--warm-gray-2);
}

.cal-day--weekend[b-epbafjp0sn] {
    background: var(--warm-gray);
}

.cal-day-header.cal-day--today[b-epbafjp0sn] {
    background: var(--navy);
    color: #fff;
    font-weight: 800;
    border-left: 2px solid var(--navy-light);
}

.cal-day.cal-day--today:not(.cal-day--leave)[b-epbafjp0sn] {
    border-left: 2px solid var(--navy);
}

.cal-day.cal-day--leave.cal-day--today[b-epbafjp0sn] {
    border-left: 2px solid var(--navy);
    outline: 1.5px solid var(--navy);
    outline-offset: -1px;
}

.cal-day--leave[b-epbafjp0sn] {
    cursor: pointer;
    border-radius: 0;
    transition: filter .15s;
}

.cal-day--leave:hover[b-epbafjp0sn] {
    filter: brightness(.9);
}

/* ── Name / initials toggle ──────────────────────────────────────────────── */
.name-initials[b-epbafjp0sn] { display: none; }

@media (max-width: 479px) {
    .name-full[b-epbafjp0sn] { display: none; }

    .name-initials[b-epbafjp0sn] {
        position: relative;
        display: inline-block;
        font-size: .65rem;
        font-weight: 700;
        letter-spacing: .03em;
    }

    .cal-name-header[b-epbafjp0sn],
    .cal-name[b-epbafjp0sn] {
        min-width: 36px;
        max-width: 36px;
        padding: .4rem .3rem;
        text-align: center;
        overflow: visible;
    }

    .name-expand[b-epbafjp0sn] {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        z-index: 6;
        display: flex;
        align-items: center;
        height: 22px;
        background: #fff;
        border: 1px solid var(--gold);
        color: var(--navy);
        font-family: 'Arial', sans-serif;
        font-size: .7rem;
        font-weight: 600;
        letter-spacing: normal;
        text-transform: none;
        white-space: nowrap;
        padding: 0 .6rem;
        border-radius: 6px;
        box-shadow: 2px 2px 8px rgba(27,42,74,.18);
        animation: expandIn-b-epbafjp0sn .16s cubic-bezier(.4,0,.2,1);
        transform-origin: left center;
    }
}

@keyframes expandIn-b-epbafjp0sn {
    from { opacity: 0; transform: translateY(-50%) scaleX(.85); }
    to   { opacity: 1; transform: translateY(-50%) scaleX(1); }
}

/* ── Loading / empty ─────────────────────────────────────────────────────── */
.loading-state[b-epbafjp0sn],
.empty-state[b-epbafjp0sn] {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-muted);
    font-size: .78rem;
    font-family: 'Arial', sans-serif;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
:deep(.footer)[b-epbafjp0sn] {
    padding: .65rem 1.25rem;
    font-size: .62rem;
    letter-spacing: .12em;
    color: var(--text-muted);
    text-transform: uppercase;
    border-top: 1px solid var(--warm-gray-2);
    height: 32px;
    font-family: 'Arial', sans-serif;
}

/* ── Fullscreen section ──────────────────────────────────────────────────── */
.section:fullscreen[b-epbafjp0sn],
.section:-webkit-full-screen[b-epbafjp0sn],
.section--soft-fs[b-epbafjp0sn] {
    background: var(--warm-gray);
    padding: 1.25rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.section--soft-fs[b-epbafjp0sn] {
    position: fixed;
    inset: 0;
    z-index: 250;
    padding-top: max(1.25rem, env(safe-area-inset-top));
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
    .hero[b-epbafjp0sn] {
        padding: 2rem 2rem 2.5rem;
    }

    .stats[b-epbafjp0sn] {
        padding: 1.75rem 2rem 1rem;
    }

    .section[b-epbafjp0sn] {
        padding: 0 2rem 2rem;
    }
}

@media (min-width: 900px) {
    .hero__name[b-epbafjp0sn] {
        font-size: 1.7rem;
    }
}

/* ── Hero CTA button ─────────────────────────────────────────────────────── */
.btn-new[b-epbafjp0sn] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .75rem;
    background: var(--gold);
    color: var(--navy);
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: .78rem;
    border: none;
    cursor: pointer;
    font-family: 'Arial', sans-serif;
    letter-spacing: .03em;
    transition: background .15s;
}

.btn-new:hover[b-epbafjp0sn] { background: var(--gold-light); }

/* ── Collective leave panel ──────────────────────────────────────────────── */
@keyframes slideInRight-b-epbafjp0sn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

.panel-overlay[b-epbafjp0sn] {
    position: fixed;
    inset: 0;
    background: rgba(27,42,74,.35);
    z-index: 299;
}

.collective-panel[b-epbafjp0sn] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: 400px;
    background: #fff;
    box-shadow: -4px 0 24px rgba(27,42,74,.15);
    animation: slideInRight-b-epbafjp0sn .26s cubic-bezier(.4,0,.2,1);
    z-index: 300;
    display: flex;
    flex-direction: column;
}

@media (max-width: 480px) {
    .collective-panel[b-epbafjp0sn] { width: 100%; }
}

.collective-panel__header[b-epbafjp0sn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--navy);
    color: #fff;
    padding: 1.1rem 1.25rem;
    flex-shrink: 0;
}

.collective-panel__title[b-epbafjp0sn] {
    font-size: .88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-family: 'Arial Narrow', 'Arial', sans-serif;
}

.collective-panel__close[b-epbafjp0sn] {
    background: none;
    border: none;
    color: rgba(255,255,255,.7);
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    line-height: 1;
    transition: color .15s, background .15s;
}

.collective-panel__close:hover[b-epbafjp0sn] {
    color: #fff;
    background: rgba(255,255,255,.1);
}

.collective-panel__body[b-epbafjp0sn] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.collective-panel__footer[b-epbafjp0sn] {
    display: flex;
    gap: .75rem;
    justify-content: flex-end;
    padding: .9rem 1.25rem;
    border-top: 1px solid var(--warm-gray-2);
    flex-shrink: 0;
}

/* ── Form fields ─────────────────────────────────────────────────────────── */
.col-form-row--2col[b-epbafjp0sn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.col-field[b-epbafjp0sn] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.col-label[b-epbafjp0sn] {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    font-family: 'Arial', sans-serif;
}

.col-required[b-epbafjp0sn] { color: #E24B4A; }

.col-input[b-epbafjp0sn] {
    padding: .5rem .7rem;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 7px;
    font-size: .78rem;
    background: #fff;
    color: var(--navy);
    font-family: 'Arial', sans-serif;
    transition: border-color .15s;
    outline: none;
}

.col-input:focus[b-epbafjp0sn] { border-color: var(--gold); }

.col-textarea[b-epbafjp0sn] {
    resize: vertical;
    min-height: 64px;
}

/* ── Staff selector ──────────────────────────────────────────────────────── */
.col-staff-header[b-epbafjp0sn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .1rem;
}

.col-select-all[b-epbafjp0sn] {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .7rem;
    color: var(--text-muted);
    cursor: pointer;
    font-family: 'Arial', sans-serif;
}

.col-select-all input[b-epbafjp0sn] { cursor: pointer; accent-color: var(--gold); }

.user-check-list[b-epbafjp0sn] {
    max-height: 220px;
    overflow-y: auto;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 7px;
}

.user-check-item[b-epbafjp0sn] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .75rem;
    cursor: pointer;
    font-size: .78rem;
    color: var(--navy);
    font-family: 'Arial', sans-serif;
    transition: background .12s;
    border-bottom: 0.5px solid var(--warm-gray-2);
}

.user-check-item:last-child[b-epbafjp0sn] { border-bottom: none; }

.user-check-item:hover[b-epbafjp0sn] { background: rgba(27,42,74,.04); }

.user-check-item input[b-epbafjp0sn] { cursor: pointer; accent-color: var(--gold); flex-shrink: 0; }

/* ── Error message ───────────────────────────────────────────────────────── */
.col-error[b-epbafjp0sn] {
    font-size: .75rem;
    color: #E24B4A;
    background: #FCEBEB;
    border: 0.5px solid #f5c6c6;
    border-radius: 7px;
    padding: .5rem .75rem;
    margin: 0;
    font-family: 'Arial', sans-serif;
}

/* ── Panel buttons ───────────────────────────────────────────────────────── */
.col-btn[b-epbafjp0sn] {
    padding: 9px 18px;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Arial', sans-serif;
    transition: background .15s, border-color .15s;
}

.col-btn:disabled[b-epbafjp0sn] {
    opacity: .5;
    cursor: not-allowed;
}

.col-btn--cancel[b-epbafjp0sn] {
    background: transparent;
    color: var(--text-muted);
    border: 0.5px solid var(--warm-gray-2);
}

.col-btn--cancel:hover:not(:disabled)[b-epbafjp0sn] { border-color: var(--gold); }

.col-btn--submit[b-epbafjp0sn] {
    background: var(--gold);
    color: var(--navy);
    border: none;
}

.col-btn--submit:hover:not(:disabled)[b-epbafjp0sn] { background: var(--gold-light); }

/* ── Bank holidays ───────────────────────────────────────────────────────── */
.cal-day-header.cal-day--bank-holiday[b-epbafjp0sn] {
    background: #c7d9ff;
    color: #1a3a8f;
}

.cal-day.cal-day--bank-holiday[b-epbafjp0sn] {
    background: #dce8ff;
}

.cal-bh-dot[b-epbafjp0sn] {
    display: block;
    font-size: .48rem;
    font-weight: 800;
    color: #1a3a8f;
    letter-spacing: .04em;
    line-height: 1;
    margin-top: 1px;
    text-align: center;
}

/* ── Sticky header rows (stay below the topbar while scrolling) ─────────── */
.cal-month-header[b-epbafjp0sn],
.cal-day-header[b-epbafjp0sn] {
    position: sticky;
    z-index: 4;
}

.cal-month-header[b-epbafjp0sn] {
    top: 56px;
    height: 26px;
    box-sizing: border-box;
}

.cal-day-header[b-epbafjp0sn] {
    top: 82px;
}

.cal-name-header:not(.cal-name-header--day)[b-epbafjp0sn] {
    top: 56px;
    z-index: 5;
}

.cal-name-header--day[b-epbafjp0sn] {
    top: 82px;
    z-index: 5;
}
/* /Pages/AdminDashboard.razor.rz.scp.css */
/* ============================================================
   AdminDashboard.razor.css — HB-Staff Admin Hub
   Mobile-first · Navy / Gold / Warm-Gray palette
   ============================================================ */

.admin-hub-wrapper[b-ko5mh2rtqn] {
    font-family: Georgia, serif;
    background: #F4F1EC;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}


/* ── Hero ────────────────────────────────────────────────────── */
.hero[b-ko5mh2rtqn] {
    padding: 1.5rem 1.5rem 2.2rem;
    min-height: 148px;
    background: #1B2A4A;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.hero-arc[b-ko5mh2rtqn] {
    position: absolute;
    bottom: -1px;
    left: -5%;
    width: 110%;
    height: 32px;
    background: #F4F1EC;
    border-radius: 50% 50% 0 0;
}

.hero__greeting[b-ko5mh2rtqn] {
    font-size: .75rem;
    color: #E2C07A;
    letter-spacing: .08em;
    font-family: 'Arial Narrow', Arial, sans-serif;
    text-transform: uppercase;
    margin-bottom: .2rem;
}

.hero__name[b-ko5mh2rtqn] {
    font-size: 1.4rem;
    font-weight: 700;
    font-family: Georgia, serif;
    line-height: 1.15;
    color: #fff;
    margin-bottom: .15rem;
}

.hero__sub[b-ko5mh2rtqn] {
    font-size: .78rem;
    color: rgba(255,255,255,.55);
    font-family: Arial, sans-serif;
}

/* ── Module Grid ─────────────────────────────────────────────── */
.modules[b-ko5mh2rtqn] {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.75rem 1.25rem 1.5rem;
}

/* ── Module Card ─────────────────────────────────────────────── */
.module-card[b-ko5mh2rtqn] {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    grid-template-rows: auto auto;
    column-gap: .85rem;
    align-items: center;
    background: #fff;
    border: 1.5px solid #EAE6DF;
    border-radius: 14px;
    padding: 1rem;
    text-align: left;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color .2s, transform .18s;
    box-shadow: 0 1px 4px rgba(27,42,74,.07);
}

.module-card[b-ko5mh2rtqn]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #1B2A4A;
    transition: background .2s, width .18s;
}

.module-card:not([disabled]):hover[b-ko5mh2rtqn],
.module-card:not([disabled]):focus-visible[b-ko5mh2rtqn] {
    border-color: #C9A84C;
    transform: translateY(-2px);
    outline: none;
}

.module-card:not([disabled]):hover[b-ko5mh2rtqn]::before { background: #C9A84C; width: 5px; }

.module-card[disabled][b-ko5mh2rtqn] {
    opacity: .6;
    cursor: not-allowed;
}

/* Icon */
.module-card__icon[b-ko5mh2rtqn] {
    grid-row: 1 / 3;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(201,168,76,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.module-card__icon svg[b-ko5mh2rtqn] {
    width: 22px;
    height: 22px;
    stroke: #1B2A4A;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Title */
.module-card__title[b-ko5mh2rtqn] {
    grid-column: 2;
    grid-row: 1;
    font-size: .9rem;
    font-weight: 700;
    font-family: Arial, sans-serif;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #1B2A4A;
    line-height: 1.2;
}

/* Description */
.module-card__desc[b-ko5mh2rtqn] {
    grid-column: 2;
    grid-row: 2;
    font-size: .72rem;
    color: #6B7A99;
    font-family: Arial, sans-serif;
    margin-top: .1rem;
}

/* Arrow */
.module-card__arrow[b-ko5mh2rtqn] {
    grid-column: 3;
    grid-row: 1 / 3;
    font-size: 1rem;
    color: #C9A84C;
    padding-right: .25rem;
    transition: transform .18s;
}

.module-card:not([disabled]):hover .module-card__arrow[b-ko5mh2rtqn] { transform: translateX(3px); }

/* Notification badge */
.module-card__badge[b-ko5mh2rtqn] {
    position: absolute;
    top: 8px;
    right: 8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 10px;
    background: #E24B4A;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: .62rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* Coming soon badge */
.module-card__soon[b-ko5mh2rtqn] {
    grid-column: 3;
    grid-row: 1 / 3;
    font-family: Arial, sans-serif;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(27,42,74,.08);
    color: #6B7A99;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

/* ── Per-card accents ────────────────────────────────────────── */
.module-card--staff .module-card__icon[b-ko5mh2rtqn] { background: rgba(27,42,74,.1); }
.module-card--staff .module-card__icon svg[b-ko5mh2rtqn] { stroke: #1B2A4A; }
.module-card--staff:hover[b-ko5mh2rtqn]::before { background: #1B2A4A; }

.module-card--forms .module-card__icon[b-ko5mh2rtqn] { background: rgba(15,110,86,.1); }
.module-card--forms .module-card__icon svg[b-ko5mh2rtqn] { stroke: #0F6E56; }
.module-card--forms:not([disabled]):hover[b-ko5mh2rtqn]::before { background: #0F6E56; }
.module-card--forms:not([disabled]):hover[b-ko5mh2rtqn] { border-color: #0F6E56; }

.module-card--analytics .module-card__icon[b-ko5mh2rtqn] { background: rgba(83,74,183,.1); }
.module-card--analytics .module-card__icon svg[b-ko5mh2rtqn] { stroke: #534AB7; }
.module-card--analytics:not([disabled]):hover[b-ko5mh2rtqn]::before { background: #534AB7; }
.module-card--analytics:not([disabled]):hover[b-ko5mh2rtqn] { border-color: #534AB7; }

.module-card--expenses .module-card__icon[b-ko5mh2rtqn] { background: rgba(122,63,27,.1); }
.module-card--expenses .module-card__icon svg[b-ko5mh2rtqn] { stroke: #7A3F1B; }
.module-card--expenses:not([disabled]):hover[b-ko5mh2rtqn]::before { background: #7A3F1B; }
.module-card--expenses:not([disabled]):hover[b-ko5mh2rtqn] { border-color: #7A3F1B; }

.module-card--leave .module-card__icon[b-ko5mh2rtqn] { background: rgba(74,42,122,.1); }
.module-card--leave .module-card__icon svg[b-ko5mh2rtqn] { stroke: #4A2A7A; }
.module-card--leave:not([disabled]):hover[b-ko5mh2rtqn]::before { background: #4A2A7A; }
.module-card--leave:not([disabled]):hover[b-ko5mh2rtqn] { border-color: #4A2A7A; }

.module-card--leave-requests .module-card__icon[b-ko5mh2rtqn] { background: rgba(74,42,122,.1); }
.module-card--leave-requests .module-card__icon svg[b-ko5mh2rtqn] { stroke: #4A2A7A; }
.module-card--leave-requests[b-ko5mh2rtqn]::before { background: #4A2A7A; }
.module-card--leave-requests:not([disabled]):hover[b-ko5mh2rtqn]::before { background: #4A2A7A; }
.module-card--leave-requests:not([disabled]):hover[b-ko5mh2rtqn] { border-color: #4A2A7A; }

/* ── Footer ─────────────────────────────────────────────────── */

/* ── Responsive ─────────────────────────────────────────────── */
@media (min-width: 500px) {
    .modules[b-ko5mh2rtqn] {
        grid-template-columns: 1fr 1fr;
        padding: 1.75rem 1.5rem 1.5rem;
    }

    .module-card[b-ko5mh2rtqn] {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        text-align: center;
        justify-items: center;
        padding: 1.4rem 1rem 1.2rem;
        min-height: 160px;
        column-gap: 0;
    }

    .module-card[b-ko5mh2rtqn]::before {
        left: 0; top: 0; right: 0; bottom: auto;
        width: auto; height: 4px;
        border-radius: 4px 4px 0 0;
    }

    .module-card:not([disabled]):hover[b-ko5mh2rtqn]::before { width: auto; height: 5px; }

    .module-card__icon[b-ko5mh2rtqn]  { grid-row: 1; grid-column: 1; margin-bottom: .4rem; }
    .module-card__title[b-ko5mh2rtqn] { grid-column: 1; grid-row: 2; }
    .module-card__desc[b-ko5mh2rtqn]  { grid-column: 1; grid-row: 3; }
    .module-card__arrow[b-ko5mh2rtqn] { display: none; }

    .module-card__soon[b-ko5mh2rtqn] {
        grid-column: 1;
        grid-row: 4;
        margin-top: .4rem;
    }
}

@media (min-width: 640px) {
    .hero[b-ko5mh2rtqn] { padding: 2rem 2rem 2.5rem; min-height: 178px; }
    .hero__name[b-ko5mh2rtqn] { font-size: 1.7rem; }
}

@media (min-width: 860px) {
    .hero[b-ko5mh2rtqn]    { padding: 2.5rem 2rem 2.5rem; min-height: 200px; }
    .hero__name[b-ko5mh2rtqn] { font-size: 2rem; }

    .modules[b-ko5mh2rtqn] {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.25rem;
        padding: 2.5rem 2rem 2rem;
    }
}
/* /Pages/AdminExpenses.razor.rz.scp.css */
/* ============================================================
   AdminExpenses.razor.css — HB-Staff Expense Review
   Mobile-first · Teal accent #0F6E56
   ============================================================ */

.expenses-wrapper[b-epub175oif] {
    --navy:        #1B2A4A;
    --navy-light:  #243560;
    --navy-dark:   #111d33;
    --gold:        #C9A84C;
    --gold-light:  #E2C07A;
    --gold-muted:  #F5D98A;
    --warm-gray:   #F4F1EC;
    --warm-gray-2: #EAE6DF;
    --text-muted:  #6B7A99;
    --text-light:  #aab0c0;
    --radius-card: 10px;
    --transition:  all .2s cubic-bezier(.4,0,.2,1);
    --accent:      #0F6E56;
    --accent-light:#2A7A5A;
    --accent-bg:   rgba(15,110,86,.08);
    --info-bg:     #EAF0FA;
    --info-border: #BDD0EF;

    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--warm-gray);
    font-family: 'Arial Narrow', 'Arial', sans-serif;
}

/* ── Hero ────────────────────────────────────────────────── */
.hero[b-epub175oif] {
    padding: 1.5rem 1.5rem 2.2rem;
    min-height: 148px;
    background: var(--accent);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.hero-arc[b-epub175oif] {
    position: absolute;
    bottom: -1px;
    left: -5%;
    width: 110%;
    height: 32px;
    background: var(--warm-gray);
    border-radius: 50% 50% 0 0;
}

.hero__greeting[b-epub175oif] {
    font-size: .75rem;
    color: rgba(255,255,255,.7);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-family: 'Arial Narrow', Arial, sans-serif;
    margin-bottom: .2rem;
}

.hero__name[b-epub175oif] {
    font-size: 1.4rem;
    font-weight: 700;
    font-family: Georgia, serif;
    line-height: 1.15;
    color: #fff;
    margin-bottom: .15rem;
}

.hero__sub[b-epub175oif] {
    font-size: .78rem;
    color: rgba(255,255,255,.6);
    font-family: Arial, sans-serif;
}

/* ── Stats ───────────────────────────────────────────────── */
.stats[b-epub175oif] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 1.75rem 1.25rem 1rem;
}

.stat[b-epub175oif] {
    background: #fff;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: var(--radius-card);
    padding: .85rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
}

.stat__n[b-epub175oif] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--navy);
    font-family: Georgia, serif;
}

.stat__l[b-epub175oif] {
    font-size: .65rem;
    color: var(--text-muted);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
    display: flex;
    align-items: center;
    gap: 4px;
}

.stat__dot[b-epub175oif] {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.stat__dot--green[b-epub175oif] { background: #27500A; }
.stat__dot--gold[b-epub175oif]  { background: var(--gold); }
.stat__dot--red[b-epub175oif]   { background: #E24B4A; }

/* ── Section ─────────────────────────────────────────────── */
.section[b-epub175oif] {
    flex: 1;
    padding: 0 1.25rem 1.5rem;
}

.section__title[b-epub175oif] {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--navy);
    font-family: Arial, sans-serif;
}

/* ── States ──────────────────────────────────────────────── */
.loading-state[b-epub175oif],
.empty-state[b-epub175oif] {
    text-align: center;
    padding: 2rem;
    font-size: .82rem;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
}

/* ── Badges ──────────────────────────────────────────────── */
.badge[b-epub175oif] {
    display: inline-block;
    font-size: .6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: .05em;
    font-family: Arial, sans-serif;
}

.badge--approved[b-epub175oif]  { background: #EAF3DE; color: #27500A; }
.badge--pending[b-epub175oif]   { background: #FAEEDA; color: #633806; }
.badge--flagged[b-epub175oif]   { background: #FCEBEB; color: #E24B4A; }
.badge--cap-warn[b-epub175oif]  { background: #FAEEDA; color: #633806; border: 1px solid #f0c98a; }

/* ── Action buttons ──────────────────────────────────────── */
.act-btn[b-epub175oif] {
    background: none;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .07em;
    white-space: nowrap;
    transition: border-color .18s, background .18s, opacity .18s;
}

.act-btn svg[b-epub175oif] { width: 14px; height: 14px; stroke-width: 1.8; flex-shrink: 0; }

.act-btn--approve[b-epub175oif]                           { background: #fff; border-color: #B8DABB; color: #27500A; }
.act-btn--approve:hover[b-epub175oif]                     { background: #EAF3DE; border-color: #B8DABB; color: #27500A; }
.act-btn--approve.act-btn--active[b-epub175oif]           { background: #EAF3DE; border-color: #27500A; color: #27500A; }
.act-btn--flag[b-epub175oif]                              { background: #fff; border-color: #f5c6c6; color: #E24B4A; }
.act-btn--flag:hover[b-epub175oif]                        { background: #FCEBEB; border-color: #f5c6c6; color: #E24B4A; }
.act-btn--flag.act-btn--flagged[b-epub175oif]             { background: #FCEBEB; border-color: #E24B4A; color: #E24B4A; }

.act-btn--approve.act-btn--active ~ .act-btn--flag[b-epub175oif]          { opacity: .25; }
.act-btn--approve.act-btn--active ~ .act-btn--flag:hover[b-epub175oif]    { opacity: 1; }
.exp-row__actions:has(.act-btn--flagged) .act-btn--approve[b-epub175oif]  { opacity: .25; }
.exp-row__actions:has(.act-btn--flagged) .act-btn--approve:hover[b-epub175oif] { opacity: 1; }

.act-btn--main[b-epub175oif]                       { background: #fff; border-color: var(--warm-gray-2); color: var(--text-muted); }
.act-btn--main:hover[b-epub175oif]                 { background: #FFF8EC; border-color: var(--gold); color: var(--navy); }
.act-btn--main.act-btn--active[b-epub175oif]       { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.act-btn--main.act-btn--active:hover[b-epub175oif] { background: var(--gold-light); border-color: var(--gold-light); color: var(--navy); }

.act-btn--delete[b-epub175oif]                 { background: #fff; transition: border-color .18s, background .18s, padding .22s cubic-bezier(.4,0,.2,1); }
.act-btn--delete svg[b-epub175oif]             { stroke: #E24B4A; }
.act-btn--delete:hover[b-epub175oif]           { background: #FCEBEB; border-color: #E24B4A; }

.act-btn--delete .del-label[b-epub175oif] {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    margin-left: 0;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    white-space: nowrap;
    color: #E24B4A;
    transition: max-width .22s cubic-bezier(.4,0,.2,1),
                opacity .15s .07s,
                margin-left .22s cubic-bezier(.4,0,.2,1);
}

.act-btn--delete--confirm[b-epub175oif]            { background: #FCEBEB; border-color: #E24B4A; padding: 5px 8px; }
.act-btn--delete--confirm:hover[b-epub175oif]      { background: #f0c8c8; border-color: #E24B4A; }
.act-btn--delete--confirm .del-label[b-epub175oif] { max-width: 50px; opacity: 1; margin-left: 4px; }

/* ── Search wrap ─────────────────────────────────────────── */
.search-wrap[b-epub175oif] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-wrap svg[b-epub175oif] {
    position: absolute;
    left: 8px;
    width: 14px;
    height: 14px;
    stroke: var(--text-muted);
    pointer-events: none;
}

.search-wrap input[b-epub175oif] {
    padding: 6px 10px 6px 28px;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 7px;
    font-size: .75rem;
    background: #fff;
    color: var(--navy);
    width: 150px;
    outline: none;
    transition: border-color .18s;
    font-family: Arial, sans-serif;
}

.search-wrap input:focus[b-epub175oif] { border-color: var(--accent); }

/* ── Detail grid (left: info+comments | right: photo) ───── */
.exp-detail-grid[b-epub175oif] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.exp-detail-left[b-epub175oif] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.exp-info[b-epub175oif] {
    background: #fff;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: var(--radius-card);
    padding: .75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.exp-photo-col[b-epub175oif] {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    position: relative;
    transition: flex-basis .3s cubic-bezier(.4,0,.2,1);
}

.exp-photo-placeholder[b-epub175oif] {
    flex: 1;
    min-height: 160px;
    border: 1.5px dashed var(--warm-gray-2);
    border-radius: var(--radius-card);
    background: var(--warm-gray);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 1rem;
}

.exp-photo-placeholder svg[b-epub175oif] {
    width: 32px;
    height: 32px;
    stroke: var(--text-light);
}

@media (min-width: 480px) {
    .exp-detail-grid[b-epub175oif] {
        flex-direction: row;
        align-items: flex-start;
    }

    .exp-photo-col[b-epub175oif] {
        flex: 0 0 50%;
        position: sticky;
        top: 80px;
    }

    .exp-photo-col--small[b-epub175oif] { flex: 0 0 25%; }
}

.exp-card__row[b-epub175oif] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
}

.exp-card__amount[b-epub175oif] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent);
    font-family: Georgia, serif;
}

.exp-card__amount-wrap[b-epub175oif] {
    display: flex;
    align-items: baseline;
    gap: .45rem;
}

.exp-card__amount-original[b-epub175oif] {
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-muted);
    opacity: .55;
    font-family: 'Arial', sans-serif;
}

.exp-card__tags[b-epub175oif] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.exp-card__tag[b-epub175oif] {
    font-size: .65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--accent-bg);
    color: var(--accent);
    letter-spacing: .04em;
    font-family: Arial, sans-serif;
}

.exp-card__tag--photo[b-epub175oif] {
    background: rgba(27,42,74,.07);
    color: var(--text-muted);
}

.exp-card__fields[b-epub175oif] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 12px;
}

.task-field[b-epub175oif] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.task-field__lbl[b-epub175oif] {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
}

.task-field__val[b-epub175oif] {
    font-size: .72rem;
    color: var(--navy);
    font-family: Arial, sans-serif;
}

.exp-card__desc[b-epub175oif] {
    font-size: .72rem;
    color: #4B5C78;
    font-style: italic;
    font-family: Arial, sans-serif;
    margin: 0;
    line-height: 1.45;
}

/* ── Receipt photo ───────────────────────────────────────── */
.exp-photo-wrap[b-epub175oif] {
    position: relative;
}

.exp-photo-wrap--doc[b-epub175oif] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 1rem;
    background: #FFF8EC;
    border: 1px solid var(--gold);
    border-radius: var(--radius-card);
    min-height: 100px;
}

.exp-doc-icon[b-epub175oif] {
    width: 36px;
    height: 36px;
    color: var(--gold);
}

.exp-doc-label[b-epub175oif] {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.exp-photo-wrap--doc .exp-photo-fs-btn[b-epub175oif] {
    position: static;
    background: var(--gold);
    border-color: var(--gold);
    color: var(--navy);
    text-decoration: none;
    margin-top: 2px;
}

.exp-photo-wrap--doc .exp-photo-fs-btn:hover[b-epub175oif] {
    background: var(--gold-light);
    border-color: var(--gold-light);
}

.exp-photo-fs-btn[b-epub175oif] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: 0.5px solid rgba(255,255,255,.4);
    border-radius: 5px;
    background: rgba(0,0,0,.45);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.exp-photo-fs-btn svg[b-epub175oif] { width: 14px; height: 14px; flex-shrink: 0; }

.exp-photo-fs-btn:hover[b-epub175oif] {
    background: rgba(0,0,0,.7);
    border-color: rgba(255,255,255,.7);
}

.exp-photo-rotate-group[b-epub175oif] {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 2;
}

.exp-photo-rotate-btn[b-epub175oif] {
    width: 28px;
    height: 28px;
    border: 0.5px solid rgba(255,255,255,.4);
    border-radius: 5px;
    background: rgba(17,29,51,.75);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
}

.exp-photo-rotate-btn svg[b-epub175oif] { width: 14px; height: 14px; flex-shrink: 0; }

.exp-photo-rotate-btn:hover:not(:disabled)[b-epub175oif] {
    background: rgba(17,29,51,.92);
    border-color: rgba(255,255,255,.7);
}

.exp-photo-rotate-btn:disabled[b-epub175oif] {
    opacity: .4;
    cursor: not-allowed;
}

/* ── Fullscreen overlay ──────────────────────────────────── */
.photo-fs-overlay[b-epub175oif] {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(0,0,0,.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn .2s cubic-bezier(.4,0,.2,1);
    cursor: zoom-out;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.photo-fs-download[b-epub175oif],
.photo-fs-close[b-epub175oif],
.photo-fs-rotate[b-epub175oif] {
    position: absolute;
    top: 1rem;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 8px;
    background: rgba(17,29,51,.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s;
    z-index: 4;
    flex-shrink: 0;
}

.photo-fs-download[b-epub175oif] { left: 1rem; }
.photo-fs-close[b-epub175oif]     { right: 1rem; }

.photo-fs-download svg[b-epub175oif],
.photo-fs-close svg[b-epub175oif],
.photo-fs-rotate svg[b-epub175oif] { width: 14px; height: 14px; }

.photo-fs-download:hover[b-epub175oif],
.photo-fs-close:hover[b-epub175oif],
.photo-fs-rotate:hover:not(:disabled)[b-epub175oif] {
    background: rgba(17,29,51,.92);
    border-color: rgba(255,255,255,.6);
}

.photo-fs-rotate--left[b-epub175oif]  { left: 3.75rem; }
.photo-fs-rotate--right[b-epub175oif] { left: 6.75rem; }

.photo-fs-rotate:disabled[b-epub175oif] {
    opacity: .4;
    cursor: not-allowed;
}

.photo-fs-content[b-epub175oif] {
    position: relative;
    display: inline-flex;
    max-width: 100%;
    max-height: calc(100dvh - 2rem);
    cursor: default;
}

.photo-fs-img[b-epub175oif] {
    max-width: 100%;
    max-height: calc(100dvh - 2rem);
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0,0,0,.5);
    display: block;
}

.photo-fs-ui[b-epub175oif] {
    position: absolute;
    inset: 0;
    animation: fsInfoFade-b-epub175oif 5s cubic-bezier(.4,0,.2,1) forwards;
}

.photo-fs-info[b-epub175oif] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2.5rem 1rem .9rem;
    background: linear-gradient(to top, rgba(0,0,0,.78) 0%, transparent 100%);
    border-radius: 0 0 8px 8px;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    pointer-events: none;
}

.photo-fs-info__name[b-epub175oif] {
    font-size: .78rem;
    font-weight: 700;
    color: #fff;
    font-family: Arial, sans-serif;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.photo-fs-info__amount[b-epub175oif] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--gold-light);
    font-family: Georgia, serif;
    line-height: 1.1;
}

.photo-fs-info__date[b-epub175oif] {
    font-size: .72rem;
    color: rgba(255,255,255,.7);
    font-family: Arial, sans-serif;
}

@keyframes fsInfoFade-b-epub175oif {
    0%   { opacity: 1; visibility: visible; }
    60%  { opacity: 1; visibility: visible; }
    99%  { opacity: 0; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}

@keyframes fsInfoBtnAppear-b-epub175oif {
    0%, 60% { opacity: 0; visibility: hidden; }
    100%    { opacity: 1; visibility: visible; }
}

.photo-fs-info-btn[b-epub175oif] {
    position: absolute;
    bottom: 8px;
    left: 8px;
    width: 28px;
    height: 28px;
    border: 0.5px solid rgba(255,255,255,.4);
    border-radius: 50%;
    background: rgba(17,29,51,.75);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    font-family: Georgia, serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
    z-index: 3;
    line-height: 1;
    animation: fsInfoBtnAppear-b-epub175oif 5s cubic-bezier(.4,0,.2,1) forwards;
}

.photo-fs-info-btn:hover[b-epub175oif] {
    background: rgba(17,29,51,.92);
    border-color: rgba(255,255,255,.7);
}

.photo-fs-nav[b-epub175oif] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50%;
    background: rgba(17,29,51,.75);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s, opacity .15s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
    z-index: 2;
    flex-shrink: 0;
}

.photo-fs-nav svg[b-epub175oif] { width: 18px; height: 18px; }

.photo-fs-nav--prev[b-epub175oif] { left: 1.25rem; }
.photo-fs-nav--next[b-epub175oif] { right: 1.25rem; }

.photo-fs-nav:hover:not(:disabled)[b-epub175oif] {
    background: rgba(17,29,51,.92);
    border-color: rgba(255,255,255,.6);
}

.photo-fs-nav:disabled[b-epub175oif] {
    opacity: .18;
    cursor: not-allowed;
}

.exp-photo-controls[b-epub175oif] {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 3px;
    z-index: 2;
}

.exp-photo-size-btn[b-epub175oif] {
    width: 24px;
    height: 24px;
    border: 0.5px solid rgba(255,255,255,.4);
    border-radius: 5px;
    background: rgba(0,0,0,.45);
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s;
    backdrop-filter: blur(4px);
}

.exp-photo-size-btn:hover:not(:disabled)[b-epub175oif] {
    background: rgba(0,0,0,.7);
    border-color: rgba(255,255,255,.7);
}

.exp-photo-size-btn:disabled[b-epub175oif] {
    opacity: .3;
    cursor: not-allowed;
}

.exp-photo[b-epub175oif] {
    width: 100%;
    display: block;
    object-fit: cover;
    border-radius: 8px;
    border: 0.5px solid var(--warm-gray-2);
    background: #111;
    aspect-ratio: 3 / 4;
}

.exp-photo-loading[b-epub175oif] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .72rem;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
    padding: .25rem 0;
}

.exp-photo-spinner[b-epub175oif] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--warm-gray-2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: photoSpin-b-epub175oif .65s cubic-bezier(.4,0,.2,1) infinite;
    flex-shrink: 0;
}

@keyframes photoSpin-b-epub175oif { to { transform: rotate(360deg); } }

.exp-photo-error[b-epub175oif] {
    font-size: .72rem;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
    font-style: italic;
    margin: 0;
    padding: .1rem 0;
}

/* ── Split panel ─────────────────────────────────────────── */
.split-panel[b-epub175oif] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Left: user panel ────────────────────────────────────── */
.user-panel[b-epub175oif] {
    background: #fff;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.user-panel__header[b-epub175oif] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem 1rem;
    border-bottom: 0.5px solid var(--warm-gray-2);
    gap: .5rem;
    flex-wrap: wrap;
}

.user-list[b-epub175oif] {
    display: flex;
    flex-direction: column;
}

.user-item[b-epub175oif] {
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: center;
    gap: 10px;
    padding: .65rem 1rem;
    background: transparent;
    border: none;
    border-bottom: 0.5px solid var(--warm-gray-2);
    border-left: 3px solid transparent;
    cursor: pointer;
    text-align: left;
    transition: background .15s, border-left-color .15s;
    width: 100%;
}

.user-item:last-child[b-epub175oif] { border-bottom: none; }
.user-item:hover[b-epub175oif]      { background: var(--warm-gray); }

.user-item--in-period[b-epub175oif] {
    background: var(--info-bg);
    border-left: 4px solid var(--info-border);
}
.user-item--in-period:hover[b-epub175oif] { background: var(--info-bg); }

.user-item--selected[b-epub175oif] {
    background: var(--accent-bg);
    border-left-color: var(--accent);
}
.user-item--selected:hover[b-epub175oif] { background: var(--accent-bg); }

.user-item__avatar[b-epub175oif] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    font-family: Arial, sans-serif;
    flex-shrink: 0;
}

.user-item__info[b-epub175oif] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.user-item__name[b-epub175oif] {
    font-size: .82rem;
    font-weight: 700;
    color: var(--navy);
    font-family: Arial, sans-serif;
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.user-item__name-text[b-epub175oif] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.badge-new[b-epub175oif] {
    flex-shrink: 0;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .07em;
    padding: 2px 5px;
    border-radius: 4px;
    background: var(--gold);
    color: var(--navy);
    line-height: 1;
    text-transform: uppercase;
}


.user-item__meta[b-epub175oif] {
    font-size: .68rem;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Count chips */
.chip[b-epub175oif] {
    font-size: .58rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 20px;
    font-family: Arial, sans-serif;
    line-height: 1.4;
}

.chip--pending[b-epub175oif]  { background: #FAEEDA; color: #633806; }
.chip--flagged[b-epub175oif]  { background: #FCEBEB; color: #E24B4A; }
.chip--approved[b-epub175oif] { background: #EAF3DE; color: #27500A; }
.chip--period[b-epub175oif]   { background: var(--info-bg); color: var(--navy); border: 1px solid var(--info-border); }

/* ── Right: detail panel ─────────────────────────────────── */
.detail-panel[b-epub175oif] {
    flex: 1;
    min-width: 0;
}

.detail-header[b-epub175oif] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    padding: .6rem 1rem;
    background: #fff;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: var(--radius-card);
    margin-bottom: .75rem;
    min-height: 42px;
    position: sticky;
    top: 64px;
    z-index: 10;
}

.title-sort[b-epub175oif] {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex: 1;
    min-width: 0;
}

.detail-header__title[b-epub175oif] {
    font-size: .82rem;
    font-weight: 700;
    color: var(--navy);
    font-family: Arial, sans-serif;
    letter-spacing: .04em;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-sort[b-epub175oif] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 6px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: #fff;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .15s, color .15s, background .15s;
}

.btn-sort:hover[b-epub175oif] {
    border-color: var(--gold);
    color: var(--navy);
}

.btn-sort--asc[b-epub175oif] {
    border-color: var(--gold);
    background: #FFF8EC;
    color: var(--gold);
}

.btn-sort--asc svg[b-epub175oif] { stroke: var(--gold); }

/* ── Status filter pills ─────────────────────────────────── */
.status-filter[b-epub175oif] {
    display: flex;
    align-items: stretch;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    transition: border-color .15s;
}

.status-filter__btn[b-epub175oif] {
    height: 26px;
    padding: 0 8px;
    border: none;
    border-left: 0.5px solid var(--warm-gray-2);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: .6rem;
    font-weight: 600;
    font-family: Arial, sans-serif;
    white-space: nowrap;
    transition: background .15s, color .15s;
}

.status-filter__btn:first-child[b-epub175oif] { border-left: none; }

.status-filter__btn:hover:not(.status-filter__btn--active)[b-epub175oif] {
    background: rgba(27,42,74,.07);
    color: var(--navy);
}

.status-filter__btn--active[b-epub175oif] { background: var(--navy); color: #fff; }

.status-filter__btn--active.status-filter__btn--pending[b-epub175oif]  { background: #FAEEDA; color: #633806; }
.status-filter__btn--active.status-filter__btn--accepted[b-epub175oif] { background: #EAF3DE; color: #27500A; }
.status-filter__btn--active.status-filter__btn--refused[b-epub175oif]  { background: #FCEBEB; color: #E24B4A; }

.detail-header__controls[b-epub175oif] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dh-btn[b-epub175oif] {
    width: 30px;
    height: 30px;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s, background .15s, color .15s;
    flex-shrink: 0;
}

.dh-btn svg[b-epub175oif] { width: 14px; height: 14px; }

.dh-btn:hover:not(:disabled)[b-epub175oif] {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-bg);
}

.dh-btn:disabled[b-epub175oif] { opacity: .4; cursor: not-allowed; }

.dh-btn--size[b-epub175oif] {
    font-size: .9rem;
    font-weight: 700;
    font-family: Arial, sans-serif;
    line-height: 1;
}

.dh-btn--dl[b-epub175oif] {
    width: auto;
    min-width: 30px;
    transition: border-color .15s, background .15s, color .15s,
                padding .22s cubic-bezier(.4,0,.2,1),
                min-width .22s cubic-bezier(.4,0,.2,1);
}

.dh-btn--dl .dh-label[b-epub175oif] {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    margin-left: 0;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .09em;
    white-space: nowrap;
    font-family: Arial, sans-serif;
    transition: max-width .22s cubic-bezier(.4,0,.2,1),
                opacity .15s .07s,
                margin-left .22s cubic-bezier(.4,0,.2,1);
}

.dh-btn--dl.dh-btn--confirm[b-epub175oif] {
    background: #EAF0FA;
    border-color: var(--accent);
    color: var(--accent);
    padding: 5px 8px;
}

.dh-btn--dl.dh-btn--confirm:hover:not(:disabled)[b-epub175oif] {
    background: #d8e8f8;
    border-color: var(--accent);
    color: var(--accent);
}

.dh-btn--dl.dh-btn--confirm .dh-label[b-epub175oif] {
    max-width: 60px;
    opacity: 1;
    margin-left: 4px;
}

.dh-divider[b-epub175oif] {
    width: 1px;
    height: 20px;
    background: var(--warm-gray-2);
    margin: 0 2px;
}

.dh-spinner[b-epub175oif] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--warm-gray-2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: photoSpin-b-epub175oif .65s cubic-bezier(.4,0,.2,1) infinite;
}

.detail-empty[b-epub175oif] {
    text-align: center;
    padding: 3rem 1rem;
    font-size: .82rem;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
}

/* ── Expense list + entries ──────────────────────────────── */
.exp-list[b-epub175oif] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.exp-entry[b-epub175oif] {
    display: flex;
    flex-direction: column;
}

.exp-row[b-epub175oif] {
    background: #fff;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: var(--radius-card);
    padding: .75rem 1rem;
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: border-color .18s, background .18s;
}

.exp-row:hover[b-epub175oif] { border-color: var(--gold); }

.exp-row--fade-out[b-epub175oif] {
    opacity: .2;
    transition: opacity .4s cubic-bezier(.4,0,.2,1);
}

@keyframes exp-row-fade-in-b-epub175oif {
    from { opacity: .2; }
    to   { opacity: 1; }
}

.exp-row--fade-in[b-epub175oif] {
    animation: exp-row-fade-in-b-epub175oif .8s cubic-bezier(.4,0,.2,1);
}

.exp-entry--open .exp-row[b-epub175oif] {
    border-color: var(--accent);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    background: rgba(15,110,86,.04);
}

.exp-row__icon[b-epub175oif] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.exp-row__icon svg[b-epub175oif] { width: 18px; height: 18px; }

.exp-row__icon--pending[b-epub175oif]  { background: rgba(15,110,86,.1); }
.exp-row__icon--pending svg[b-epub175oif]  { stroke: var(--accent); }
.exp-row__icon--approved[b-epub175oif] { background: rgba(39,80,10,.1); }
.exp-row__icon--approved svg[b-epub175oif] { stroke: #27500A; }
.exp-row__icon--flagged[b-epub175oif]  { background: rgba(226,75,74,.1); }
.exp-row__icon--flagged svg[b-epub175oif]  { stroke: #E24B4A; }

.exp-row__info[b-epub175oif] { min-width: 0; }

.exp-row__title[b-epub175oif] {
    font-size: .9rem;
    font-weight: 700;
    color: var(--navy);
    font-family: Georgia, serif;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: .1rem;
}

.exp-row__meta[b-epub175oif] {
    font-size: .7rem;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exp-row__actions[b-epub175oif] {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* ── Accordion ───────────────────────────────────────────── */
.exp-accordion[b-epub175oif] {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows .38s cubic-bezier(.4,0,.2,1),
                border-color .2s cubic-bezier(.4,0,.2,1);
    background: #fff;
    border: 0.5px solid transparent;
    border-top: none;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
}

.exp-accordion--open[b-epub175oif] {
    grid-template-rows: 1fr;
    border-color: var(--accent);
}

.exp-accordion__inner[b-epub175oif] {
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    transition: opacity .2s cubic-bezier(.4,0,.2,1);
}

.exp-accordion--open .exp-accordion__inner[b-epub175oif] {
    opacity: 1;
    transition: opacity .22s .14s cubic-bezier(.4,0,.2,1);
}

.exp-detail[b-epub175oif] {
    padding: .75rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Detail tabs ──────────────────────────────────────────── */
.detail-tabs[b-epub175oif] {
    display: flex;
    border-bottom: 1.5px solid var(--warm-gray-2);
    margin-bottom: .75rem;
}

.detail-tab[b-epub175oif] {
    padding: .42rem .9rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color .15s, border-color .15s;
}

.detail-tab:hover:not(.detail-tab--active):not(:disabled)[b-epub175oif] { color: var(--navy); }

.detail-tab--active[b-epub175oif] {
    color: var(--navy);
    border-bottom-color: var(--accent);
}

.detail-tab--disabled[b-epub175oif],
.detail-tab:disabled[b-epub175oif] {
    cursor: not-allowed;
    opacity: .5;
}

.detail-tab__count[b-epub175oif] {
    font-size: .6rem;
    background: var(--warm-gray-2);
    color: var(--text-muted);
    border: 1px solid var(--warm-gray-2);
    border-radius: 20px;
    padding: 1px 6px;
    font-weight: 700;
    line-height: 1.4;
}

.detail-tab--active .detail-tab__count[b-epub175oif] {
    background: var(--accent-bg);
    color: var(--accent);
    border-color: rgba(15,110,86,.3);
}

.detail-tab__count--zero[b-epub175oif] {
    background: transparent;
    color: var(--text-light);
    border-color: var(--warm-gray-2);
}

/* ── Attachments tab ──────────────────────────────────────── */
.att-section[b-epub175oif] { display: flex; flex-direction: column; gap: .45rem; }
.att-section + .att-section[b-epub175oif] { margin-top: .85rem; }

.att-section__title[b-epub175oif] {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
    margin: 0;
}

.att-grid[b-epub175oif] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .65rem;
}

.doc-preview[b-epub175oif] {
    border: 0.5px solid var(--warm-gray-2);
    border-radius: var(--radius-card);
    overflow: hidden;
    background: #fff;
}

.doc-preview__img[b-epub175oif] {
    width: 100%;
    display: block;
    max-height: 200px;
    object-fit: contain;
    background: var(--warm-gray);
    border-bottom: 0.5px solid var(--warm-gray-2);
    padding: .35rem;
    box-sizing: border-box;
}

.doc-preview__placeholder[b-epub175oif] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    background: var(--warm-gray);
    border-bottom: 0.5px solid var(--warm-gray-2);
}

.doc-preview__file-type[b-epub175oif] {
    font-size: .62rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--warm-gray-2);
    padding: 3px 7px;
    border-radius: 4px;
    font-family: Arial, sans-serif;
    letter-spacing: .05em;
}

.doc-preview__spinner[b-epub175oif] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--warm-gray-2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: photoSpin-b-epub175oif .65s cubic-bezier(.4,0,.2,1) infinite;
}

.doc-preview__footer[b-epub175oif] {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .5rem;
}

.doc-preview__name[b-epub175oif] {
    flex: 1;
    font-size: .62rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: Arial, sans-serif;
    min-width: 0;
}

.doc-preview__size[b-epub175oif] {
    font-size: .6rem;
    color: var(--text-light);
    white-space: nowrap;
    font-family: Arial, sans-serif;
    flex-shrink: 0;
}

.doc-preview__open[b-epub175oif] {
    font-size: .62rem;
    font-weight: 700;
    color: var(--accent);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: Arial, sans-serif;
    transition: color .15s;
    text-decoration: none;
    display: inline-block;
}

.doc-preview__open:hover[b-epub175oif] { color: var(--accent-light); }

.doc-preview__dl[b-epub175oif] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 5px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}

.doc-preview__dl svg[b-epub175oif] { width: 12px; height: 12px; }

.doc-preview__dl:hover[b-epub175oif] {
    border-color: var(--accent);
    background: var(--accent-bg);
    color: var(--accent);
}

.doc-att-list[b-epub175oif] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.doc-att-row[b-epub175oif] {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 7px;
    padding: .45rem .7rem;
    cursor: pointer;
    transition: border-color .15s;
}

.doc-att-row:hover[b-epub175oif] { border-color: var(--gold); }

.doc-att-row__icon[b-epub175oif] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--warm-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .55rem;
    font-weight: 700;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
    flex-shrink: 0;
}

.doc-att-row__info[b-epub175oif] { min-width: 0; }

.doc-att-row__name[b-epub175oif] {
    font-size: .75rem;
    font-weight: 600;
    color: var(--navy);
    font-family: Arial, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-att-row__meta[b-epub175oif] {
    font-size: .62rem;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
}

.doc-att-row__open[b-epub175oif] {
    font-size: .62rem;
    font-weight: 700;
    color: var(--accent);
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    padding: 0;
    font-family: Arial, sans-serif;
    transition: color .15s;
    flex-shrink: 0;
}

.doc-att-row__actions[b-epub175oif] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* ── Comment thread ──────────────────────────────────────── */
.comment-thread[b-epub175oif] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comment-thread__title[b-epub175oif] {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
}

.comment-thread__empty[b-epub175oif] {
    font-size: .72rem;
    color: var(--text-muted);
    font-style: italic;
    font-family: Arial, sans-serif;
    margin: 0;
}

.comment[b-epub175oif] {
    padding: .6rem .75rem;
    border-radius: 8px;
    border: 0.5px solid var(--warm-gray-2);
    background: var(--warm-gray);
    max-width: 92%;
}

.comment--admin[b-epub175oif] {
    background: rgba(15,110,86,.06);
    border-color: rgba(15,110,86,.2);
}

.comment__header[b-epub175oif] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
    flex-wrap: wrap;
}

.comment__author[b-epub175oif] {
    font-size: .68rem;
    font-weight: 700;
    color: var(--navy);
    font-family: Arial, sans-serif;
}

.comment__badge[b-epub175oif] {
    font-size: .56rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 20px;
    background: rgba(15,110,86,.15);
    color: var(--accent);
    letter-spacing: .05em;
    font-family: Arial, sans-serif;
}

.comment__time[b-epub175oif] {
    font-size: .62rem;
    color: var(--text-light);
    font-family: Arial, sans-serif;
    margin-left: auto;
}

.comment__text[b-epub175oif] {
    font-size: .75rem;
    color: var(--navy);
    font-family: Arial, sans-serif;
    margin: 0;
    line-height: 1.45;
}

/* ── Comment attachment chips ── */
.doc-att-chips[b-epub175oif] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 5px;
}

.doc-att-item[b-epub175oif] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.doc-att-chip[b-epub175oif] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .62rem;
    font-family: Arial, sans-serif;
    color: var(--accent);
    background: rgba(15,110,86,.07);
    border: 0.5px solid rgba(15,110,86,.2);
    border-radius: 5px;
    padding: 2px 7px;
    cursor: pointer;
    transition: background .15s;
}

.doc-att-chip:hover[b-epub175oif] { background: rgba(15,110,86,.14); }

.doc-att-chip svg[b-epub175oif] {
    width: 10px;
    height: 10px;
    stroke: var(--accent);
    flex-shrink: 0;
}

.doc-att-thumb[b-epub175oif] {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    overflow: hidden;
    border: 0.5px solid var(--warm-gray-2);
    background: var(--warm-gray);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color .15s, transform .15s;
}

.doc-att-thumb:hover[b-epub175oif] {
    border-color: var(--gold);
    transform: scale(1.05);
}

.doc-att-thumb__img[b-epub175oif] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.doc-att-thumb__spinner[b-epub175oif] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--warm-gray-2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: photoSpin-b-epub175oif .65s cubic-bezier(.4,0,.2,1) infinite;
}

.doc-att-thumb__icon[b-epub175oif] {
    font-size: .55rem;
    font-weight: 700;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
    letter-spacing: .04em;
}


/* ── Compose box ─────────────────────────────────────────── */
.comment-compose[b-epub175oif] {
    display: flex;
    gap: 6px;
    align-items: flex-end;
    margin-top: 2px;
}

.comment-compose__input[b-epub175oif] {
    flex: 1;
    padding: .5rem .7rem;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 7px;
    font-size: .78rem;
    background: #fff;
    color: var(--navy);
    font-family: Arial, sans-serif;
    resize: none;
    outline: none;
    transition: border-color .15s;
    line-height: 1.4;
}

.comment-compose__input:focus[b-epub175oif] { border-color: var(--accent); }
.comment-compose__input[b-epub175oif]::placeholder { color: var(--text-light); }

.comment-compose__send[b-epub175oif] {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: .5rem .9rem;
    font-size: .75rem;
    font-weight: 700;
    font-family: Arial, sans-serif;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
    height: 36px;
}

.comment-compose__send:hover:not(:disabled)[b-epub175oif] { background: var(--accent-light); }
.comment-compose__send:disabled[b-epub175oif] { opacity: .5; cursor: not-allowed; }

/* ── Responsive ──────────────────────────────────────────── */
@media (min-width: 640px) {
    .hero[b-epub175oif]       { padding: 2rem 2rem 2.5rem; min-height: 178px; }
    .hero__name[b-epub175oif] { font-size: 1.7rem; }
    .stats[b-epub175oif]      { padding: 1.75rem 2rem 1rem; }
    .section[b-epub175oif]    { padding: 0 2rem 2rem; }
}

@media (min-width: 720px) {
    .split-panel[b-epub175oif] {
        flex-direction: row;
        align-items: flex-start;
        gap: 1.25rem;
    }

    .user-panel[b-epub175oif] {
        width: 240px;
        flex-shrink: 0;
        position: sticky;
        top: 72px;
        max-height: calc(100dvh - 90px);
        overflow-y: auto;
    }

    .detail-panel[b-epub175oif] { flex: 1; }
}

@media (min-width: 860px) {
    .hero__name[b-epub175oif] { font-size: 2rem; }
    .user-panel[b-epub175oif] { width: 260px; }
}

@media (min-width: 900px) {
    .expenses-wrapper[b-epub175oif] {
        box-shadow: 0 0 0 1px var(--warm-gray-2);
    }
}

@media (max-width: 479px) {
    .exp-photo-controls[b-epub175oif] { display: none; }
    .dh-btn--size[b-epub175oif]       { display: none; }
    .dh-divider--size[b-epub175oif]   { display: none; }
}

/* ── Period selector ─────────────────────────────────────── */
.period-selector[b-epub175oif] {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* bar wrapper — owns the outer border and radius */
.period-btns[b-epub175oif] {
    display: flex;
    align-items: stretch;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 6px;
    overflow: hidden;
    transition: border-color .15s;
}

.period-btns--month-on[b-epub175oif]  { border-color: var(--navy); }
.period-btns--edit-open[b-epub175oif] { border-color: var(--gold); }

/* prev / next month arrows */
.period-nav-btn[b-epub175oif] {
    width: 22px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: .9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
.period-nav-btn:hover:not(:disabled)[b-epub175oif]                           { background: rgba(27,42,74,.07); color: var(--navy); }
.period-nav-btn:disabled[b-epub175oif]                                       { opacity: .3; cursor: default; }
.period-btns--month-on .period-nav-btn[b-epub175oif]                         { color: var(--navy); }
.period-btns--month-on .period-nav-btn:hover:not(:disabled)[b-epub175oif]    { background: rgba(27,42,74,.07); color: var(--navy); }

/* month label button */
.period-month-btn[b-epub175oif] {
    height: 28px;
    min-width: 90px;
    padding: 0 6px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: .68rem;
    font-weight: 600;
    font-family: Arial, sans-serif;
    white-space: nowrap;
    text-align: center;
    transition: background .15s, color .15s;
}

.period-month-btn:hover[b-epub175oif]       { background: rgba(27,42,74,.07); color: var(--navy); }
.period-month-btn--on[b-epub175oif]         { background: var(--navy); color: #fff; }
.period-month-btn--on:hover[b-epub175oif]   { background: var(--navy-light); color: #fff; }

/* "Edit" icon button — internal separator via border-left */
.period-edit-btn[b-epub175oif] {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-left: 0.5px solid var(--warm-gray-2);
    background: transparent;
    color: var(--gold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s, color .15s, border-left-color .15s;
}

.period-edit-btn svg[b-epub175oif] { width: 13px; height: 13px; }

.period-edit-btn:hover[b-epub175oif]                        { background: rgba(201,168,76,.13); }
.period-edit-btn--open[b-epub175oif]                        { background: var(--gold); color: var(--navy); }
.period-edit-btn--open:hover[b-epub175oif]                  { background: var(--gold-light); color: var(--navy); }
.period-btns--month-on  .period-edit-btn[b-epub175oif]      { border-left-color: rgba(27,42,74,.25); }
.period-btns--edit-open .period-edit-btn[b-epub175oif]      { border-left-color: rgba(201,168,76,.35); }

/* "All time" toggle button */
.period-alltime-btn[b-epub175oif] {
    height: 28px;
    padding: 0 10px;
    font-size: .72rem;
    font-weight: 700;
    font-family: 'Arial Narrow', 'Arial', sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: transparent;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s;
}
.period-alltime-btn:hover[b-epub175oif]     { background: rgba(27,42,74,.07); color: var(--navy); border-color: var(--navy); }
.period-alltime-btn--on[b-epub175oif]       { background: var(--navy); color: #fff; border-color: var(--navy); }
.period-alltime-btn--on:hover[b-epub175oif] { background: var(--navy-light); color: #fff; }

.period-picker[b-epub175oif] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    background: #fff;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    padding: .85rem 1rem 1rem;
    width: 230px;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    animation: fadeScaleIn-b-epub175oif .18s cubic-bezier(.4,0,.2,1);
}

.period-picker__row[b-epub175oif] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.period-picker__lbl[b-epub175oif] {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
}

.period-picker__input[b-epub175oif] {
    padding: .38rem .6rem;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 7px;
    font-size: .75rem;
    background: #fff;
    color: var(--navy);
    font-family: Arial, sans-serif;
    outline: none;
    transition: border-color .15s;
    width: 100%;
}

.period-picker__input:focus[b-epub175oif] { border-color: var(--accent); }

.period-picker__actions[b-epub175oif] {
    display: flex;
    gap: 6px;
    margin-top: 2px;
}

.period-picker__cancel[b-epub175oif] {
    background: transparent;
    color: var(--text-muted);
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 7px;
    padding: .4rem .7rem;
    font-size: .72rem;
    font-weight: 600;
    font-family: Arial, sans-serif;
    cursor: pointer;
    transition: border-color .15s;
}

.period-picker__cancel:hover[b-epub175oif] { border-color: var(--accent); }

.period-picker__apply[b-epub175oif] {
    flex: 1;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: .4rem .7rem;
    font-size: .72rem;
    font-weight: 700;
    font-family: Arial, sans-serif;
    cursor: pointer;
    transition: background .15s;
}

.period-picker__apply:hover:not(:disabled)[b-epub175oif] { background: var(--accent-light); }
.period-picker__apply:disabled[b-epub175oif]             { opacity: .5; cursor: not-allowed; }

/* ── Content area — fades while reloading (period changes) ── */
.exp-content-area[b-epub175oif] {
    transition: opacity .2s cubic-bezier(.4,0,.2,1);
}
.exp-content-area--reloading[b-epub175oif] {
    opacity: 0.45;
    pointer-events: none;
}

/* ── Segment totals bar ──────────────────────────────────── */
.seg-totals[b-epub175oif] {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: #fff;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: var(--radius-card);
    padding: .6rem 1rem;
    margin-bottom: .75rem;
    flex-wrap: wrap;
}

.seg-totals--loading[b-epub175oif] {
    justify-content: center;
    font-size: .75rem;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
}

.seg-totals__segments[b-epub175oif] {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex: 1;
    flex-wrap: wrap;
}

.seg-total-item[b-epub175oif] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: .3rem .7rem;
    background: var(--accent-bg);
    border-radius: 7px;
    min-width: 64px;
}

.seg-total-item__name[b-epub175oif] {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
    white-space: nowrap;
}

.seg-total-item__val[b-epub175oif] {
    font-size: .82rem;
    font-weight: 700;
    color: var(--accent);
    font-family: Georgia, serif;
}

.seg-totals__grand[b-epub175oif] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    padding-left: .75rem;
    border-left: 1px solid var(--warm-gray-2);
    flex-shrink: 0;
}

.seg-totals__grand-lbl[b-epub175oif] {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
}

.seg-totals__grand-val[b-epub175oif] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy);
    font-family: Georgia, serif;
}

@keyframes fadeScaleIn-b-epub175oif {
    from { opacity: 0; transform: scale(.95); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Toast ──────────────────────────────────────────────────── */
.toast[b-epub175oif] {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 600;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem 1.1rem;
    border-radius: 10px;
    font-size: .78rem;
    font-weight: 600;
    font-family: Arial, sans-serif;
    box-shadow: 0 4px 18px rgba(27,42,74,.22);
    white-space: nowrap;
    animation: toastIn-b-epub175oif .22s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}

@keyframes toastIn-b-epub175oif {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.toast svg[b-epub175oif] { width: 15px; height: 15px; flex-shrink: 0; }

.toast--success[b-epub175oif] {
    background: #EAF3DE;
    color: #27500A;
    border: 0.5px solid #B8DABB;
}

.toast--success svg[b-epub175oif] { stroke: #27500A; }

.toast--error[b-epub175oif] {
    background: #FCEBEB;
    color: #c73b3a;
    border: 0.5px solid #F5C6C6;
}

.toast--error svg[b-epub175oif] { stroke: #c73b3a; }
/* /Pages/AdminForms.razor.rz.scp.css */
/* ============================================================
   AdminForms.razor.css — HB-Staff Forms Management
   Mobile-first · Navy / Gold / Warm-Gray palette
   ============================================================ */

.forms-wrapper[b-qotsq0alzp] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: #F4F1EC;
    font-family: 'Arial Narrow', 'Arial', sans-serif;
}


/* ── Hero ────────────────────────────────────────────────── */
.hero[b-qotsq0alzp] {
    padding: 1.5rem 1.5rem 2.2rem;
    min-height: 148px;
    background: #1B2A4A;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.hero__row[b-qotsq0alzp] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.hero-arc[b-qotsq0alzp] {
    position: absolute;
    bottom: -1px;
    left: -5%;
    width: 110%;
    height: 32px;
    background: #F4F1EC;
    border-radius: 50% 50% 0 0;
}

.hero__greeting[b-qotsq0alzp] {
    font-size: .75rem;
    color: #E2C07A;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-family: 'Arial Narrow', Arial, sans-serif;
    margin-bottom: .2rem;
}

.hero__name[b-qotsq0alzp] {
    font-size: 1.4rem;
    font-weight: 700;
    font-family: Georgia, serif;
    line-height: 1.15;
    color: #fff;
    margin-bottom: .15rem;
}

.hero__sub[b-qotsq0alzp] {
    font-size: .78rem;
    color: rgba(255,255,255,.55);
    font-family: Arial, sans-serif;
}

/* ── Stats ───────────────────────────────────────────────── */
.stats[b-qotsq0alzp] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 1.75rem 1.25rem 1rem;
}

.stat[b-qotsq0alzp] {
    background: #fff;
    border: 0.5px solid #EAE6DF;
    border-radius: 10px;
    padding: .85rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
}

.stat__n[b-qotsq0alzp] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1B2A4A;
    font-family: Georgia, serif;
}

.stat__l[b-qotsq0alzp] {
    font-size: .65rem;
    color: #6B7A99;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
    display: flex;
    align-items: center;
    gap: 4px;
}

.stat__dot[b-qotsq0alzp] {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.stat__dot--green[b-qotsq0alzp] { background: #27500A; }
.stat__dot--gold[b-qotsq0alzp]  { background: #C9A84C; }
.stat__dot--red[b-qotsq0alzp]   { background: #E24B4A; }

/* ── Section ─────────────────────────────────────────────── */
.section[b-qotsq0alzp] {
    flex: 1;
    padding: 0 1.25rem 1.5rem;
}

.section__header[b-qotsq0alzp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
    flex-wrap: wrap;
    gap: .5rem;
}

.section__title[b-qotsq0alzp] {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
}

.title-sort[b-qotsq0alzp] {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.btn-sort[b-qotsq0alzp] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border: 0.5px solid #EAE6DF;
    border-radius: 6px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: #fff;
    color: #6B7A99;
    font-family: Arial, sans-serif;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}

.btn-sort:hover[b-qotsq0alzp] {
    border-color: #C9A84C;
    color: #1B2A4A;
}

.btn-sort--asc[b-qotsq0alzp] {
    border-color: #C9A84C;
    background: #FFF8EC;
    color: #C9A84C;
}

.btn-sort--asc svg[b-qotsq0alzp] { stroke: #C9A84C; }

/* Search + Filter controls */
.section__controls[b-qotsq0alzp] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.search-wrap[b-qotsq0alzp] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 100px;
}

.search-wrap svg[b-qotsq0alzp] {
    position: absolute;
    left: 8px;
    width: 14px;
    height: 14px;
    stroke: #6B7A99;
    pointer-events: none;
}

.search-wrap input[b-qotsq0alzp] {
    padding: 6px 10px 6px 28px;
    border: 0.5px solid #EAE6DF;
    border-radius: 7px;
    font-size: .75rem;
    background: #fff;
    color: #1B2A4A;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    outline: none;
    transition: border-color .18s;
}

.search-wrap input:focus[b-qotsq0alzp] { border-color: #C9A84C; }

/* Filter */
.filter-wrap[b-qotsq0alzp] { display: flex; align-items: center; }

.filter-select[b-qotsq0alzp] {
    padding: 6px 10px;
    border: 0.5px solid #EAE6DF;
    border-radius: 7px;
    font-size: .75rem;
    background: #fff;
    color: #1B2A4A;
    outline: none;
    cursor: pointer;
    font-family: Arial, sans-serif;
    transition: border-color .18s;
}

.filter-select:focus[b-qotsq0alzp] { border-color: #C9A84C; }

/* Date toggle button */
.btn-date-toggle[b-qotsq0alzp] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border: 0.5px solid #EAE6DF;
    border-radius: 7px;
    font-size: .75rem;
    background: #fff;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .18s, background .18s, color .18s;
}

.btn-date-toggle:hover[b-qotsq0alzp] { border-color: #C9A84C; }

.btn-date-toggle--active[b-qotsq0alzp] {
    border-color: #C9A84C;
    background: #FFF8EC;
    color: #C9A84C;
}

.btn-date-toggle--active svg[b-qotsq0alzp] { stroke: #C9A84C; }

/* Expanding date picker row */
.date-picker-row[b-qotsq0alzp] {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0 2px;
    animation: fadeIn .18s ease;
}

.date-picker-row--hidden[b-qotsq0alzp] {
    display: none;
}

.date-input[b-qotsq0alzp] {
    padding: 6px 8px;
    border: 0.5px solid #EAE6DF;
    border-radius: 7px;
    font-size: .72rem;
    background: #fff;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
    outline: none;
    cursor: pointer;
    transition: border-color .18s;
    box-sizing: border-box;
    min-width: 130px;
    width: 130px;
}

.date-input:focus[b-qotsq0alzp] { border-color: #C9A84C; }

.date-range-sep[b-qotsq0alzp] {
    font-size: .78rem;
    color: #6B7A99;
    flex-shrink: 0;
    user-select: none;
}

.btn-date-clear[b-qotsq0alzp] {
    padding: 5px 10px;
    border: 0.5px solid #EAE6DF;
    border-radius: 7px;
    font-size: .72rem;
    background: transparent;
    color: #6B7A99;
    font-family: Arial, sans-serif;
    cursor: pointer;
    transition: border-color .18s, color .18s;
}

.btn-date-clear:hover[b-qotsq0alzp] { border-color: #C9A84C; color: #1B2A4A; }

.btn-close-all[b-qotsq0alzp] {
    display: flex; align-items: center; justify-content: center;
    padding: 5px; border: 0.5px solid var(--warm-gray-2);
    border-radius: 6px; background: transparent;
    color: var(--text-muted); cursor: pointer;
    transition: var(--transition);
}
.btn-close-all:hover[b-qotsq0alzp] { border-color: var(--gold); background: #FFF8EC; color: var(--navy); }
.btn-close-all:disabled[b-qotsq0alzp] { opacity: 0.35; cursor: not-allowed; }

/* ── Form List ───────────────────────────────────────────── */
.form-list[b-qotsq0alzp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-row[b-qotsq0alzp] {
    background: #fff;
    border: 0.5px solid #EAE6DF;
    border-radius: 10px;
    padding: .75rem 1rem;
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 12px;
    transition: border-color .18s;
}

.form-row:hover[b-qotsq0alzp] { border-color: #C9A84C; }

.form-icon[b-qotsq0alzp] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.form-icon svg[b-qotsq0alzp] { width: 18px; height: 18px; }

.form-icon--dars[b-qotsq0alzp]         { background: rgba(27,42,74,.1);  }
.form-icon--dars svg[b-qotsq0alzp]     { stroke: #1B2A4A; }
.form-icon--daily-exp[b-qotsq0alzp]    { background: rgba(15,110,86,.1); }
.form-icon--daily-exp svg[b-qotsq0alzp] { stroke: #0F6E56; }
.form-icon--car-exp[b-qotsq0alzp]      { background: rgba(122,63,27,.1); }
.form-icon--car-exp svg[b-qotsq0alzp]  { stroke: #7A3F1B; }
.form-icon--leave[b-qotsq0alzp]        { background: rgba(74,42,122,.1); }
.form-icon--leave svg[b-qotsq0alzp]    { stroke: #4A2A7A; }

.form-title[b-qotsq0alzp] {
    font-size: .82rem;
    font-weight: 700;
    color: #1B2A4A;
    margin-bottom: .1rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    font-family: Arial, sans-serif;
}

.form-info[b-qotsq0alzp] {
    min-width: 0;
}

.form-meta[b-qotsq0alzp] {
    font-size: .7rem;
    color: #6B7A99;
    font-family: Arial, sans-serif;
}

.form-comment-preview[b-qotsq0alzp] {
    font-size: .68rem;
    color: #38308f;
    font-family: Arial, sans-serif;
    font-style: italic;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    background: rgba(83,74,183,.06);
    border: 0.5px solid rgba(83,74,183,.2);
    border-left: 3px solid rgba(83,74,183,.45);
    border-radius: 5px;
    padding: .25rem .5rem;
}

/* Badges */
.badge[b-qotsq0alzp] {
    display: inline-block;
    font-size: .6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: .05em;
    font-family: Arial, sans-serif;
}

.badge--approved[b-qotsq0alzp]  { background: #EAF3DE; color: #27500A; }
.badge--pending[b-qotsq0alzp]   { background: #FAEEDA; color: #633806; }
.badge--flagged[b-qotsq0alzp]   { background: #FCEBEB; color: #E24B4A; }
.badge--rejected[b-qotsq0alzp]  { background: #FCEBEB; color: #E24B4A; }
/* ── Action Buttons ──────────────────────────────────────── */
.form-actions[b-qotsq0alzp] {
    display: flex;
    gap: 4px;
    align-items: center;
}

.act-btn[b-qotsq0alzp] {
    background: none;
    border: 0.5px solid #EAE6DF;
    border-radius: 6px;
    padding: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .18s, background .18s;
}

.act-btn svg[b-qotsq0alzp] { width: 14px; height: 14px; stroke-width: 1.8; }

.act-btn:hover[b-qotsq0alzp]         { border-color: #C9A84C; background: #FFF8EC; }
.act-btn--delete:hover[b-qotsq0alzp] { border-color: #E24B4A; background: #FCEBEB; }
.act-btn--delete svg[b-qotsq0alzp]   { stroke: #E24B4A; }
.act-btn--delete[b-qotsq0alzp]       { transition: border-color .18s, background .18s, padding .22s cubic-bezier(.4,0,.2,1); }

.act-btn--delete .del-label[b-qotsq0alzp] {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    margin-left: 0;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    white-space: nowrap;
    color: #E24B4A;
    transition: max-width .22s cubic-bezier(.4,0,.2,1),
                opacity .15s .07s,
                margin-left .22s cubic-bezier(.4,0,.2,1);
}

.act-btn--delete--confirm[b-qotsq0alzp]              { background: #FCEBEB; border-color: #E24B4A; padding: 5px 8px; }
.act-btn--delete--confirm:hover[b-qotsq0alzp]        { background: #f0c8c8; border-color: #E24B4A; }
.act-btn--delete--confirm .del-label[b-qotsq0alzp]   { max-width: 50px; opacity: 1; margin-left: 4px; }

.act-btn--edit svg[b-qotsq0alzp]   { stroke: #C9A84C; }
.act-btn--edit:hover[b-qotsq0alzp] { border-color: #C9A84C; background: #FFF8EC; }

/* ── Edit Date Modal ─────────────────────────────────────── */

.modal-overlay[b-qotsq0alzp] {
    position: fixed;
    inset: 0;
    background: rgba(27,42,74,.35);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-card[b-qotsq0alzp] {
    background: #fff;
    border-radius: 12px;
    max-width: 420px;
    width: 92%;
    box-shadow: 0 8px 40px rgba(0,0,0,.35);
    animation: fadeScaleIn-b-qotsq0alzp .2s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}

@keyframes fadeScaleIn-b-qotsq0alzp {
    from { opacity: 0; transform: scale(.95); }
    to   { opacity: 1; transform: scale(1); }
}

.modal-header[b-qotsq0alzp] {
    background: #1B2A4A;
    color: #fff;
    padding: 1.1rem 1.25rem;
    font-size: .88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-family: Arial, sans-serif;
}

.modal-body[b-qotsq0alzp] { padding: 1.25rem 1.25rem .75rem; }

.modal-msg[b-qotsq0alzp] {
    font-size: .82rem;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
    line-height: 1.5;
}

.modal-footer[b-qotsq0alzp] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .75rem 1.25rem 1.1rem;
}

.btn-cancel[b-qotsq0alzp] {
    background: transparent;
    color: #6B7A99;
    border: 0.5px solid #EAE6DF;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: .82rem;
    cursor: pointer;
    font-family: Arial, sans-serif;
    transition: border-color .15s;
}

.btn-cancel:hover[b-qotsq0alzp] { border-color: #C9A84C; }

.btn-confirm[b-qotsq0alzp] {
    background: #C9A84C;
    color: #1B2A4A;
    border: none;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    font-family: Arial, sans-serif;
    transition: background .15s;
}

.btn-confirm:hover[b-qotsq0alzp]    { background: #E2C07A; }
.btn-confirm:disabled[b-qotsq0alzp] { opacity: .5; cursor: not-allowed; }

/* ── States ──────────────────────────────────────────────── */
.loading-state[b-qotsq0alzp],
.empty-state[b-qotsq0alzp] {
    text-align: center;
    padding: 2rem;
    font-size: .82rem;
    color: #6B7A99;
    font-family: Arial, sans-serif;
}

/* ── Footer ──────────────────────────────────────────────── */

/* ── Accordion ───────────────────────────────────────────── */
.form-entry[b-qotsq0alzp] {
    display: flex;
    flex-direction: column;
}

.form-entry--open .form-row[b-qotsq0alzp] {
    border-color: #C9A84C;
    border-radius: 10px 10px 0 0;
    background: #FFFBF2;
}

.form-accordion[b-qotsq0alzp] {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
    background: #fff;
    border: 0.5px solid transparent;
    border-top: none;
    border-radius: 0 0 10px 10px;
}

.form-accordion--open[b-qotsq0alzp] {
    max-height: 5000px;
    border-color: #C9A84C;
}

.accordion-body[b-qotsq0alzp] {
    padding: .75rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.accordion-loading[b-qotsq0alzp] {
    text-align: center;
    padding: 1.5rem;
    font-size: .82rem;
    color: #6B7A99;
    font-family: Arial, sans-serif;
}

.accordion-meta[b-qotsq0alzp] {
    font-size: .72rem;
    color: #6B7A99;
    font-family: Arial, sans-serif;
    margin-bottom: .1rem;
}

/* ── Task card ───────────────────────────────────────────── */
.task-card[b-qotsq0alzp] {
    background: #fff;
    border: 0.5px solid #EAE6DF;
    border-radius: 10px;
    padding: .75rem 1rem;
}

.task-card__header[b-qotsq0alzp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .4rem;
}

.task-card__num[b-qotsq0alzp] {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
    padding: 2px 7px;
    border-radius: 20px;
}
.task-card__num--task[b-qotsq0alzp]   { background: #EAF0FA; color: #1B2A4A; border: .5px solid #BDD0EF; }
.task-card__num--travel[b-qotsq0alzp] { background: #FAEEDA; color: #633806; border: .5px solid #e8c97a; }

.task-card__time[b-qotsq0alzp] {
    font-size: .7rem;
    color: #6B7A99;
    font-family: Arial, sans-serif;
}

.task-del-btn[b-qotsq0alzp] {
    margin-left: auto;
    flex-shrink: 0;
}

.task-card__desc[b-qotsq0alzp] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: .35rem;
}

.task-card__desc span[b-qotsq0alzp] {
    font-size: .68rem;
    background: rgba(27,42,74,.07);
    color: #1B2A4A;
    padding: 2px 7px;
    border-radius: 20px;
    font-family: Arial, sans-serif;
}

.task-card__fields[b-qotsq0alzp] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 8px;
    margin-bottom: .45rem;
}

.task-field--full[b-qotsq0alzp] {
    grid-column: 1 / -1;
}

.task-field__val--na[b-qotsq0alzp] {
    color: #aab0c0;
    font-style: italic;
}

.task-field__val--comment[b-qotsq0alzp] {
    font-style: italic;
    color: #2E3D58;
    background: #EEF1F7;
    border: 0.5px solid #BDD0EF;
    border-left: 3px solid #6B7A99;
    border-radius: 5px;
    padding: .35rem .55rem;
    line-height: 1.45;
}

.task-counters[b-qotsq0alzp] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.counter-chip[b-qotsq0alzp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #F4F1EC;
    border: 0.5px solid #EAE6DF;
    border-radius: 7px;
    padding: 3px 7px;
    min-width: 38px;
}

.counter-chip__val[b-qotsq0alzp] {
    font-size: .75rem;
    font-weight: 700;
    color: #1B2A4A;
    font-family: Georgia, serif;
    line-height: 1.2;
}

.counter-chip__lbl[b-qotsq0alzp] {
    font-size: .56rem;
    color: #6B7A99;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
}

/* ── Daily Expense accordion card ───────────────────────── */
.exp-card[b-qotsq0alzp] {
    background: #fff;
    border: 0.5px solid #EAE6DF;
    border-radius: 10px;
    padding: .75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.exp-card__row[b-qotsq0alzp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
}

.exp-card__amount[b-qotsq0alzp] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0F6E56;
    font-family: Georgia, serif;
}

.exp-card__tags[b-qotsq0alzp] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.exp-card__tag[b-qotsq0alzp] {
    font-size: .65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(15,110,86,.08);
    color: #0F6E56;
    letter-spacing: .04em;
    font-family: Arial, sans-serif;
}

.exp-card__tag--photo[b-qotsq0alzp] {
    background: rgba(27,42,74,.07);
    color: #6B7A99;
}

.exp-card__fields[b-qotsq0alzp] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 12px;
}

.task-field[b-qotsq0alzp] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.task-field__lbl[b-qotsq0alzp] {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6B7A99;
    font-family: Arial, sans-serif;
}

.task-field__val[b-qotsq0alzp] {
    font-size: .72rem;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
}

.exp-card__desc[b-qotsq0alzp] {
    font-size: .72rem;
    color: #4B5C78;
    font-style: italic;
    font-family: Arial, sans-serif;
    margin: 0;
    line-height: 1.45;
}

/* ── Receipt photo section ───────────────────────────────── */
.exp-photo-section[b-qotsq0alzp] {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.exp-photo-btn[b-qotsq0alzp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #0F6E56;
    border-radius: 8px;
    background: transparent;
    color: #0F6E56;
    font-size: .72rem;
    font-weight: 700;
    font-family: Arial, sans-serif;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    align-self: flex-start;
}

.exp-photo-btn svg[b-qotsq0alzp] { width: 14px; height: 14px; flex-shrink: 0; }

.exp-photo-btn:hover[b-qotsq0alzp] {
    background: rgba(15,110,86,.08);
    border-color: #2A7A5A;
}

.exp-photo-btn--hide[b-qotsq0alzp] {
    border-color: #EAE6DF;
    color: #6B7A99;
}

.exp-photo-btn--hide:hover[b-qotsq0alzp] {
    background: #F4F1EC;
    border-color: #6B7A99;
}

.exp-photo[b-qotsq0alzp] {
    width: 100%;
    display: block;
    object-fit: contain;
    max-height: 420px;
    border-radius: 8px;
    border: 0.5px solid #EAE6DF;
    background: #000;
}

.exp-photo-loading[b-qotsq0alzp] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .72rem;
    color: #6B7A99;
    font-family: Arial, sans-serif;
    padding: .25rem 0;
}

.exp-photo-spinner[b-qotsq0alzp] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #EAE6DF;
    border-top-color: #0F6E56;
    border-radius: 50%;
    animation: photoSpin-b-qotsq0alzp .65s linear infinite;
    flex-shrink: 0;
}

@keyframes photoSpin-b-qotsq0alzp { to { transform: rotate(360deg); } }

.exp-photo-error[b-qotsq0alzp] {
    font-size: .72rem;
    color: #6B7A99;
    font-family: Arial, sans-serif;
    font-style: italic;
    margin: 0;
    padding: .1rem 0;
}

/* ── Cluster (user + day grouping) ──────────────────────── */
.cluster-entry[b-qotsq0alzp] {
    display: flex;
    flex-direction: column;
}

.cluster-row[b-qotsq0alzp] {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 0.5px solid #EAE6DF;
    border-radius: 10px;
    padding: .75rem 1rem;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.cluster-row:hover[b-qotsq0alzp] { border-color: #C9A84C; }

.cluster-entry--open .cluster-row[b-qotsq0alzp] {
    border-color: #C9A84C;
    border-radius: 10px 10px 0 0;
    background: #FFFBF2;
}

.cluster-avatar[b-qotsq0alzp] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #1B2A4A;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .04em;
    font-family: Arial, sans-serif;
    flex-shrink: 0;
}

.cluster-info[b-qotsq0alzp] { min-width: 0; }

.cluster-name[b-qotsq0alzp] {
    font-size: .82rem;
    font-weight: 700;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cluster-meta[b-qotsq0alzp] {
    font-size: .7rem;
    color: #6B7A99;
    font-family: Arial, sans-serif;
    margin-top: 1px;
}

.cluster-tags[b-qotsq0alzp] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}

.cluster-type-chip[b-qotsq0alzp] {
    font-size: .6rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 20px;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: rgba(27,42,74,.08);
    color: #1B2A4A;
    font-family: Arial, sans-serif;
}

.cluster-status-chip[b-qotsq0alzp] {
    font-size: .6rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 20px;
    letter-spacing: .04em;
    font-family: Arial, sans-serif;
}

.chip--pending[b-qotsq0alzp]  { background: #FAEEDA; color: #633806; }
.chip--approved[b-qotsq0alzp] { background: #EAF3DE; color: #27500A; }
.chip--flagged[b-qotsq0alzp]  { background: #FCEBEB; color: #E24B4A; }

.cluster-comment-chip[b-qotsq0alzp] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .6rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 20px;
    letter-spacing: .04em;
    font-family: Arial, sans-serif;
    background: rgba(83,74,183,.08);
    color: #534AB7;
    border: 0.5px solid rgba(83,74,183,.18);
}

.cluster-actions[b-qotsq0alzp] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.cluster-chevron[b-qotsq0alzp] {
    font-size: 1.15rem;
    color: #6B7A99;
    transition: transform .2s cubic-bezier(.4,0,.2,1);
    display: inline-block;
    line-height: 1;
    width: 18px;
    text-align: center;
}

.cluster-chevron.chevron--open[b-qotsq0alzp] { transform: rotate(90deg); }

.cluster-accordion[b-qotsq0alzp] {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(.4,0,.2,1),
                border-color .2s cubic-bezier(.4,0,.2,1);
    background: #F4F1EC;
    border: 0.5px solid transparent;
    border-top: none;
    border-radius: 0 0 10px 10px;
}

.cluster-accordion--open[b-qotsq0alzp] {
    max-height: 9000px;
    border-color: #C9A84C;
}

.cluster-body[b-qotsq0alzp] {
    padding: .5rem .6rem .6rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Inner form rows — tighten shadow and radius when nested */
.cluster-body .form-entry[b-qotsq0alzp] { box-shadow: none; }
.cluster-body .form-row[b-qotsq0alzp]   { border-radius: 8px; }

/* ── Load More ───────────────────────────────────────────── */
.load-more-wrap[b-qotsq0alzp] {
    text-align: center;
    padding: 1rem 0 1.5rem;
}

.btn-load-more[b-qotsq0alzp] {
    background: transparent;
    color: var(--navy);
    border: 0.5px solid var(--warm-gray-2);
    padding: 9px 22px;
    border-radius: 8px;
    font-size: .82rem;
    font-family: 'Arial', sans-serif;
    cursor: pointer;
    transition: var(--transition);
}

.btn-load-more:hover:not(:disabled)[b-qotsq0alzp] {
    border-color: var(--gold);
    background: #FFF8EC;
}

.btn-load-more:disabled[b-qotsq0alzp] { opacity: .6; cursor: not-allowed; }

.load-more-end[b-qotsq0alzp] {
    text-align: center;
    padding: .6rem 0 1.5rem;
    font-size: .68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin: 0;
}

/* ── Filter User Chip ────────────────────────────────────── */
.filter-user-chip[b-qotsq0alzp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(201,168,76,.12);
    border: 1px solid rgba(201,168,76,.35);
    border-radius: 20px;
    padding: 4px 10px 4px 8px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--navy);
    margin: 0 0 .75rem 0;
}

.filter-user-chip .chip-icon[b-qotsq0alzp] {
    display: flex;
    color: var(--gold);
}

.filter-user-chip .chip-label[b-qotsq0alzp] {
    letter-spacing: .03em;
}

.filter-user-chip .chip-clear[b-qotsq0alzp] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: .85rem;
    line-height: 1;
    padding: 0 0 0 2px;
}

.filter-user-chip .chip-clear:hover[b-qotsq0alzp] {
    color: #E24B4A;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 479px) {
    .section__controls[b-qotsq0alzp] {
        width: 100%;
    }

    .filter-wrap[b-qotsq0alzp] {
        flex: 1;
        min-width: 0;
    }

    .filter-select[b-qotsq0alzp] {
        width: 100%;
        box-sizing: border-box;
    }

    .date-picker-row[b-qotsq0alzp] {
        justify-content: space-between;
    }

    .date-input[b-qotsq0alzp] {
        flex: 1;
        min-width: 0;
        width: auto;
        box-sizing: border-box;
    }
}

@media (min-width: 640px) {
    .hero[b-qotsq0alzp]    { padding: 2rem 2rem 2.5rem; min-height: 178px; }
    .hero__name[b-qotsq0alzp] { font-size: 1.7rem; }
    .section[b-qotsq0alzp] { padding: 0 2rem 2rem; }
    .stats[b-qotsq0alzp]   { padding: 1.75rem 2rem 1rem; }
}

@media (min-width: 860px) {
    .hero[b-qotsq0alzp]    { padding: 2.5rem 2rem 2.5rem; min-height: 200px; }
    .hero__name[b-qotsq0alzp] { font-size: 2rem; }
}

@media (min-width: 900px) {
    .forms-wrapper[b-qotsq0alzp] {
        box-shadow: 0 0 0 1px #EAE6DF;
    }
}

/* ── Leave type badge ────────────────────────────────────── */
.leave-type-badge[b-qotsq0alzp] {
    font-size: .6rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
}

.leave-type--holiday[b-qotsq0alzp]   { background: #EAF0FA; color: #1B2A4A; }
.leave-type--sick[b-qotsq0alzp]      { background: #FAEEDA; color: #633806; }
.leave-type--paternity[b-qotsq0alzp] { background: rgba(27,42,74,.1); color: #1B2A4A; }
.leave-type--maternity[b-qotsq0alzp] { background: rgba(27,42,74,.1); color: #1B2A4A; }
.leave-type--other[b-qotsq0alzp]     { background: #EAE6DF; color: #6B7A99; }

.leave-days[b-qotsq0alzp] {
    font-size: .72rem;
    font-weight: 600;
    color: #6B7A99;
    font-family: Arial, sans-serif;
}
/* /Pages/AdminLeave.razor.rz.scp.css */
/* ── Design tokens ── */
.admin-leave-wrapper[b-sjfp9f43am] {
    --navy:        #1B2A4A;
    --navy-light:  #243560;
    --navy-dark:   #111d33;
    --gold:        #C9A84C;
    --gold-light:  #E2C07A;
    --warm-gray:   #F4F1EC;
    --warm-gray-2: #EAE6DF;
    --text-muted:  #6B7A99;
    --text-light:  #aab0c0;
    --radius-card: 10px;
    --transition:  all .2s cubic-bezier(.4,0,.2,1);
    --accent:      #0F6E56;
    --accent-light:#2A7A5A;
    --accent-bg:   rgba(15,110,86,.08);

    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--warm-gray);
    font-family: 'Arial Narrow', 'Arial', sans-serif;
}

/* ── Hero ── */
.hero[b-sjfp9f43am] {
    padding: 1.5rem 1.5rem 2.2rem;
    min-height: 148px;
    background: var(--accent);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.hero__body[b-sjfp9f43am] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hero__text[b-sjfp9f43am] {
    flex: 1;
    min-width: 0;
}

.hero-nav-card[b-sjfp9f43am] {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    grid-template-rows: auto auto;
    column-gap: .75rem;
    align-items: center;
    background: #fff;
    border: 1.5px solid rgba(255,255,255,.2);
    border-radius: 14px;
    padding: .8rem .9rem;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: border-color .2s, transform .18s;
    flex-shrink: 0;
    width: 172px;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

.hero-nav-card[b-sjfp9f43am]::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--accent);
    transition: background .2s, width .18s;
}

.hero-nav-card:hover[b-sjfp9f43am] {
    border-color: var(--gold);
    transform: translateY(-2px);
}

.hero-nav-card:hover[b-sjfp9f43am]::before { background: var(--gold); width: 5px; }

.hero-nav-card__icon[b-sjfp9f43am] {
    grid-row: 1 / 3;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(15,110,86,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hero-nav-card__icon svg[b-sjfp9f43am] {
    width: 20px;
    height: 20px;
    stroke: var(--accent);
}

.hero-nav-card__title[b-sjfp9f43am] {
    grid-column: 2;
    grid-row: 1;
    font-size: .78rem;
    font-weight: 700;
    font-family: Arial, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--navy);
    line-height: 1.2;
}

.hero-nav-card__desc[b-sjfp9f43am] {
    grid-column: 2;
    grid-row: 2;
    font-size: .65rem;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
    margin-top: .05rem;
}

.hero-nav-card__arrow[b-sjfp9f43am] {
    grid-column: 3;
    grid-row: 1 / 3;
    font-size: 1rem;
    color: var(--gold);
    padding-right: .1rem;
    transition: transform .18s;
}

.hero-nav-card:hover .hero-nav-card__arrow[b-sjfp9f43am] { transform: translateX(3px); }

.hero-arc[b-sjfp9f43am] {
    position: absolute;
    bottom: -1px;
    left: -5%;
    width: 110%;
    height: 32px;
    background: var(--warm-gray);
    border-radius: 50% 50% 0 0;
}

.hero__greeting[b-sjfp9f43am] {
    font-size: .75rem;
    color: rgba(255,255,255,.7);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-family: 'Arial Narrow', Arial, sans-serif;
    margin-bottom: .2rem;
}

.hero__name[b-sjfp9f43am] {
    font-size: 1.4rem;
    font-weight: 700;
    font-family: Georgia, serif;
    line-height: 1.15;
    color: #fff;
    margin-bottom: .15rem;
}

.hero__sub[b-sjfp9f43am] {
    font-size: .78rem;
    color: rgba(255,255,255,.6);
    font-family: Arial, sans-serif;
}

/* ── Stats ── */
.stats[b-sjfp9f43am] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 1.75rem 1.25rem 1rem;
}

.stat[b-sjfp9f43am] {
    background: #fff;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: var(--radius-card);
    padding: .85rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
}

.stat__n[b-sjfp9f43am] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--navy);
    font-family: Georgia, serif;
}

.stat__l[b-sjfp9f43am] {
    font-size: .65rem;
    color: var(--text-muted);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
    display: flex;
    align-items: center;
    gap: 4px;
}

.stat__dot[b-sjfp9f43am] {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.stat__dot--green[b-sjfp9f43am] { background: #27500A; }
.stat__dot--gold[b-sjfp9f43am]  { background: var(--gold); }
.stat__dot--red[b-sjfp9f43am]   { background: #E24B4A; }

/* ── Section ── */
.section[b-sjfp9f43am] {
    flex: 1;
    padding: 0 1.25rem 1.5rem;
}

.section__title[b-sjfp9f43am] {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--navy);
    font-family: Arial, sans-serif;
}

/* ── States ── */
.loading-state[b-sjfp9f43am],
.empty-state[b-sjfp9f43am] {
    text-align: center;
    padding: 2rem;
    font-size: .82rem;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
}

/* ── Badges ── */
.badge[b-sjfp9f43am] {
    display: inline-block;
    font-size: .6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: .05em;
    font-family: Arial, sans-serif;
}

.badge--active[b-sjfp9f43am]   { background: #EAF3DE; color: #27500A; border: 1px solid #B8DABB; }
.badge--pending[b-sjfp9f43am]  { background: #FAEEDA; color: #633806; border: 1px solid #F0D8A8; }
.badge--delete[b-sjfp9f43am]   { background: #FCEBEB; color: #E24B4A; border: 1px solid #f5c6c6; }
.badge--extended[b-sjfp9f43am] { background: #EAF0FA; color: #1B2A4A; border: 1px solid #BDD0EF; }

/* ── Type badges (colours match admin calendar legend) ── */
.type-badge[b-sjfp9f43am] {
    font-size: .6rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid transparent;
}

.type-badge--holiday[b-sjfp9f43am]    { background: #E8C547; color: #7A5A00; border-color: #C9A93A; }
.type-badge--sick[b-sjfp9f43am]       { background: #F9A8A8; color: #7A1A1A; border-color: #E88484; }
.type-badge--paternity[b-sjfp9f43am]  { background: #93C5FD; color: #1E3A5F; border-color: #6DA9F0; }
.type-badge--maternity[b-sjfp9f43am]  { background: #FBCFE8; color: #7A2050; border-color: #F0A8D0; }
.type-badge--compassion[b-sjfp9f43am] { background: #C4B5FD; color: #4C1D95; border-color: #A78BFA; }
.type-badge--study[b-sjfp9f43am]      { background: #67E8F9; color: #134E4A; border-color: #3FD4E8; }
.type-badge--unpaid[b-sjfp9f43am]     { background: #CBD5E1; color: #334155; border-color: #A9B6C5; }
.type-badge--other[b-sjfp9f43am]      { background: #A7F3C0; color: #14532D; border-color: #7FE3A0; }
.type-badge--sick-certified[b-sjfp9f43am] { background: #F9A8A8; color: #7A1A1A; border-color: #7A1A1A; }
.type-badge--sick-selfcert[b-sjfp9f43am]  { background: #F9A8A8; color: #7A1A1A; border-color: #E88484; border-style: dashed; }

/* ── Certification status pill (Sick leave only) ── */
.cert-badge[b-sjfp9f43am] {
    display: inline-block;
    font-size: .6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid transparent;
}

.cert-badge--certified[b-sjfp9f43am] { background: #EAF3DE; color: #27500A; border-color: #B8DABB; }
.cert-badge--selfcert[b-sjfp9f43am]  { background: rgba(27,42,74,.1); color: #1B2A4A; }

/* ── Certification toggle (Details tab, Sick leave only) ── */
.cert-toggle-section[b-sjfp9f43am] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding-bottom: .85rem;
    margin-bottom: .85rem;
    border-bottom: 0.5px solid var(--warm-gray-2);
}

.cert-toggle-section__title[b-sjfp9f43am] {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
}

.cert-toggle-section__hint[b-sjfp9f43am] {
    font-size: .68rem;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
}

/* ── Per-user type totals (Detail Header) ── */
.type-totals[b-sjfp9f43am] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}

.type-total-badge[b-sjfp9f43am] {
    font-size: .6rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: filter .15s, box-shadow .15s, transform .15s;
}

.type-total-badge:hover[b-sjfp9f43am]  { filter: brightness(.96); transform: translateY(-1px); }
.type-total-badge--active[b-sjfp9f43am] { box-shadow: 0 0 0 2px currentColor; }

.type-total-badge__days[b-sjfp9f43am] {
    font-size: .68rem;
    font-weight: 700;
    background: rgba(255,255,255,.55);
    border: 1px solid currentColor;
    border-radius: 20px;
    padding: 1px 6px;
    line-height: 1.3;
}

.days-chip[b-sjfp9f43am] {
    font-size: .65rem;
    font-weight: 700;
    color: var(--navy);
    background: var(--warm-gray);
    border: 1px solid var(--warm-gray-2);
    padding: 1px 6px;
    border-radius: 4px;
}

.half-day-chip[b-sjfp9f43am] {
    font-size: .62rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-bg);
    padding: 0 4px;
    border-radius: 4px;
}

/* ── Action buttons ── */
.act-btn[b-sjfp9f43am] {
    background: none;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .07em;
    white-space: nowrap;
    transition: border-color .18s, background .18s, opacity .18s;
}

.act-btn svg[b-sjfp9f43am] { width: 14px; height: 14px; }

.act-btn--approve[b-sjfp9f43am]                  { background: #fff; border-color: #B8DABB; color: #27500A; }
.act-btn--approve:hover[b-sjfp9f43am]            { background: #EAF3DE; border-color: #B8DABB; }
.act-btn--approve.act-btn--active[b-sjfp9f43am]  { background: #EAF3DE; border-color: #27500A; color: #27500A; }

.act-btn--flag[b-sjfp9f43am]                     { background: #fff; border-color: #f5c6c6; color: #E24B4A; }
.act-btn--flag:hover[b-sjfp9f43am]               { background: #FCEBEB; }
.act-btn--flag.act-btn--active-red[b-sjfp9f43am] { background: #FCEBEB; border-color: #E24B4A; }

.act-btn--delete[b-sjfp9f43am]                 { background: #fff; transition: border-color .18s, background .18s, padding .22s cubic-bezier(.4,0,.2,1); }
.act-btn--delete svg[b-sjfp9f43am]             { stroke: #E24B4A; }
.act-btn--delete:hover[b-sjfp9f43am]           { background: #FCEBEB; border-color: #E24B4A; }

.act-btn--delete .del-label[b-sjfp9f43am] {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    margin-left: 0;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    white-space: nowrap;
    color: #E24B4A;
    transition: max-width .22s cubic-bezier(.4,0,.2,1),
                opacity .15s .07s,
                margin-left .22s cubic-bezier(.4,0,.2,1);
}

.act-btn--delete--confirm[b-sjfp9f43am]            { background: #FCEBEB; border-color: #E24B4A; padding: 5px 8px; }
.act-btn--delete--confirm:hover[b-sjfp9f43am]      { background: #f0c8c8; border-color: #E24B4A; }
.act-btn--delete--confirm .del-label[b-sjfp9f43am] { max-width: 50px; opacity: 1; margin-left: 4px; }

/* ── Search wrap ── */
.search-wrap[b-sjfp9f43am] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-wrap svg[b-sjfp9f43am] {
    position: absolute;
    left: 8px;
    width: 14px;
    height: 14px;
    stroke: var(--text-muted);
    pointer-events: none;
}

.search-wrap input[b-sjfp9f43am] {
    padding: 6px 10px 6px 28px;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 7px;
    font-size: .75rem;
    background: #fff;
    color: var(--navy);
    width: 150px;
    outline: none;
    transition: border-color .18s;
    font-family: Arial, sans-serif;
}

.search-wrap input:focus[b-sjfp9f43am] { border-color: var(--accent); }

/* ── Split panel ── */
.split-panel[b-sjfp9f43am] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── User panel ── */
.user-panel[b-sjfp9f43am] {
    background: #fff;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.user-panel__header[b-sjfp9f43am] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem 1rem;
    border-bottom: 0.5px solid var(--warm-gray-2);
    gap: .5rem;
    flex-wrap: wrap;
}

.user-list[b-sjfp9f43am] {
    display: flex;
    flex-direction: column;
}

.user-item[b-sjfp9f43am] {
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: center;
    gap: 10px;
    padding: .65rem 1rem;
    background: transparent;
    border: none;
    border-bottom: 0.5px solid var(--warm-gray-2);
    border-left: 3px solid transparent;
    cursor: pointer;
    text-align: left;
    transition: background .15s, border-left-color .15s;
    width: 100%;
}

.user-item:last-child[b-sjfp9f43am] { border-bottom: none; }
.user-item:hover[b-sjfp9f43am]      { background: var(--warm-gray); }

.user-item--selected[b-sjfp9f43am] {
    background: var(--accent-bg);
    border-left-color: var(--accent);
}

.user-item__avatar[b-sjfp9f43am] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    font-family: Arial, sans-serif;
    flex-shrink: 0;
}

.user-item__info[b-sjfp9f43am] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.user-item__name[b-sjfp9f43am] {
    font-size: .82rem;
    font-weight: 700;
    color: var(--navy);
    font-family: Arial, sans-serif;
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.user-item__name-text[b-sjfp9f43am] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.badge-new[b-sjfp9f43am] {
    flex-shrink: 0;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .07em;
    padding: 2px 5px;
    border-radius: 4px;
    background: var(--gold);
    color: var(--navy);
    line-height: 1;
    text-transform: uppercase;
}

.user-item__meta[b-sjfp9f43am] {
    font-size: .68rem;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
    display: flex;
    align-items: center;
    gap: 4px;
}

.chip[b-sjfp9f43am] {
    font-size: .6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    font-family: Arial, sans-serif;
    line-height: 1.4;
    border: 1px solid transparent;
}

.chip--pending[b-sjfp9f43am] { background: #FAEEDA; color: #633806; border-color: #F0D8A8; }

/* ── Detail panel ── */
.detail-panel[b-sjfp9f43am] {
    flex: 1;
    min-width: 0;
}

.detail-header[b-sjfp9f43am] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .6rem 1rem;
    background: #fff;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: var(--radius-card);
    margin-bottom: .75rem;
    min-height: 42px;
    position: sticky;
    top: 64px;
    z-index: 10;
}

.detail-header__row[b-sjfp9f43am] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    width: 100%;
}

.detail-header__title[b-sjfp9f43am] {
    font-size: .82rem;
    font-weight: 700;
    color: var(--navy);
    font-family: Arial, sans-serif;
    letter-spacing: .04em;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-empty[b-sjfp9f43am] {
    text-align: center;
    padding: 3rem 1rem;
    font-size: .82rem;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
}

/* ── Detail header controls ── */
.detail-header__controls[b-sjfp9f43am] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dh-btn[b-sjfp9f43am] {
    width: 30px;
    height: 30px;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s, background .15s, color .15s;
    flex-shrink: 0;
}

.dh-btn svg[b-sjfp9f43am] { width: 14px; height: 14px; }

.dh-btn:hover[b-sjfp9f43am] {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-bg);
}

/* ── Status filter ── */
.status-filter[b-sjfp9f43am] {
    display: flex;
    align-items: stretch;
    align-self: flex-start;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.status-filter__btn[b-sjfp9f43am] {
    height: 26px;
    padding: 0 8px;
    border: none;
    border-left: 0.5px solid var(--warm-gray-2);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: .6rem;
    font-weight: 600;
    font-family: Arial, sans-serif;
    white-space: nowrap;
    transition: background .15s, color .15s;
}

.status-filter__btn:first-child[b-sjfp9f43am] { border-left: none; }
.status-filter__btn:hover:not(.status-filter__btn--active):not(:disabled)[b-sjfp9f43am] { background: rgba(27,42,74,.07); color: var(--navy); }
.status-filter__btn--active[b-sjfp9f43am] { background: var(--navy); color: #fff; }
.status-filter__btn:disabled[b-sjfp9f43am] { opacity: .5; cursor: not-allowed; }

/* ── Request list ── */
.req-list[b-sjfp9f43am] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Entry (accordion) ── */
.exp-entry[b-sjfp9f43am] {
    display: flex;
    flex-direction: column;
}

.exp-row[b-sjfp9f43am] {
    background: #fff;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: var(--radius-card);
    padding: .75rem 1rem;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: border-color .18s, background .18s;
}

.exp-row:hover[b-sjfp9f43am] { border-color: var(--gold); }

.exp-entry--open .exp-row[b-sjfp9f43am] {
    border-color: var(--accent);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    background: rgba(15,110,86,.04);
}

.exp-row__info[b-sjfp9f43am] { min-width: 0; }

.exp-row__title[b-sjfp9f43am] {
    font-size: .82rem;
    font-weight: 600;
    color: var(--navy);
    font-family: Arial, sans-serif;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: .15rem;
}

.exp-row__meta[b-sjfp9f43am] {
    font-size: .7rem;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.exp-row__actions[b-sjfp9f43am] {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
}

/* ── Detail body ── */
.exp-detail[b-sjfp9f43am] {
    padding: .75rem 1rem 1rem;
    background: #fff;
}

.exp-detail-left[b-sjfp9f43am] {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

/* ── Detail tabs ── */
.detail-tabs[b-sjfp9f43am] {
    display: flex;
    border-bottom: 1.5px solid var(--warm-gray-2);
    margin-bottom: .75rem;
}

.detail-tab[b-sjfp9f43am] {
    padding: .42rem .9rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color .15s, border-color .15s;
}

.detail-tab:hover:not(.detail-tab--active):not(:disabled)[b-sjfp9f43am] { color: var(--navy); }

.detail-tab--active[b-sjfp9f43am] {
    color: var(--navy);
    border-bottom-color: var(--accent);
}

.detail-tab--disabled[b-sjfp9f43am],
.detail-tab:disabled[b-sjfp9f43am] {
    cursor: not-allowed;
    opacity: .5;
}

.detail-tab__count[b-sjfp9f43am] {
    font-size: .6rem;
    background: var(--warm-gray-2);
    color: var(--text-muted);
    border: 1px solid var(--warm-gray-2);
    border-radius: 20px;
    padding: 1px 6px;
    font-weight: 700;
    line-height: 1.4;
}

.detail-tab--active .detail-tab__count[b-sjfp9f43am] {
    background: rgba(15,110,86,.12);
    color: var(--accent);
    border-color: rgba(15,110,86,.3);
}

.detail-tab__count--zero[b-sjfp9f43am] {
    background: transparent;
    color: var(--text-light);
    border-color: var(--warm-gray-2);
}

.req-notes[b-sjfp9f43am] {
    font-size: .85rem;
    color: var(--navy);
    margin: 0;
    font-style: italic;
    line-height: 1.5;
    font-family: Arial, sans-serif;
}

.req-no-note[b-sjfp9f43am] {
    background: #EAF0FA;
    border: 1px solid #BDD0EF;
    border-radius: 6px;
    padding: .45rem .75rem;
    font-family: Arial, sans-serif;
}

.req-no-note--empty[b-sjfp9f43am] {
    font-size: .8rem;
    color: var(--text-muted);
    font-style: italic;
}

.req-no-note .req-notes[b-sjfp9f43am] {
    margin: 0;
}

.req-meta[b-sjfp9f43am] {
    font-size: .75rem;
    color: var(--text-muted);
    margin: 0;
    font-family: Arial, sans-serif;
}

.req-meta--duration[b-sjfp9f43am] {
    font-size: .82rem;
    color: var(--navy);
    font-weight: 600;
    margin-bottom: .5rem;
}

.req-meta--extended[b-sjfp9f43am] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--navy);
    margin-bottom: .5rem;
}

/* ── Doc previews ── */

.doc-preview[b-sjfp9f43am] {
    border: 0.5px solid var(--warm-gray-2);
    border-radius: var(--radius-card);
    overflow: hidden;
    background: #fff;
}

.doc-preview__img[b-sjfp9f43am] {
    width: 100%;
    display: block;
    max-height: 200px;
    object-fit: contain;
    background: var(--warm-gray);
    border-bottom: 0.5px solid var(--warm-gray-2);
    padding: .35rem;
    box-sizing: border-box;
}

.doc-preview__placeholder[b-sjfp9f43am] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    background: var(--warm-gray);
    border-bottom: 0.5px solid var(--warm-gray-2);
}

.doc-preview__file-type[b-sjfp9f43am] {
    font-size: .62rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--warm-gray-2);
    padding: 3px 7px;
    border-radius: 4px;
    font-family: Arial, sans-serif;
    letter-spacing: .05em;
}

.doc-preview__spinner[b-sjfp9f43am] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--warm-gray-2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin-b-sjfp9f43am .65s cubic-bezier(.4,0,.2,1) infinite;
}

@keyframes spin-b-sjfp9f43am { to { transform: rotate(360deg); } }

.doc-preview__footer[b-sjfp9f43am] {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .5rem;
}

.doc-preview__name[b-sjfp9f43am] {
    flex: 1;
    font-size: .62rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: Arial, sans-serif;
    min-width: 0;
}

.doc-preview__size[b-sjfp9f43am] {
    font-size: .6rem;
    color: var(--text-light);
    white-space: nowrap;
    font-family: Arial, sans-serif;
    flex-shrink: 0;
}

.doc-preview__open[b-sjfp9f43am] {
    font-size: .62rem;
    font-weight: 700;
    color: var(--accent);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: Arial, sans-serif;
    transition: color .15s;
}

.doc-preview__open:hover[b-sjfp9f43am] { color: var(--accent-light); }

.doc-preview__dl[b-sjfp9f43am] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 5px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}

.doc-preview__dl svg[b-sjfp9f43am] { width: 12px; height: 12px; }

.doc-preview__dl:hover[b-sjfp9f43am] {
    border-color: var(--accent);
    background: var(--accent-bg);
    color: var(--accent);
}

/* ── Attachment tab ── */
.att-section[b-sjfp9f43am] { display: flex; flex-direction: column; gap: .45rem; }
.att-section + .att-section[b-sjfp9f43am] { margin-top: .85rem; }

.att-section__title[b-sjfp9f43am] {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
    margin: 0;
}

.att-grid[b-sjfp9f43am] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .65rem;
}

.doc-att-list[b-sjfp9f43am] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.doc-att-row[b-sjfp9f43am] {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 7px;
    padding: .45rem .7rem;
    transition: border-color .15s;
}

.doc-att-row:hover[b-sjfp9f43am] { border-color: var(--gold); }

.doc-att-row__icon[b-sjfp9f43am] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--warm-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .55rem;
    font-weight: 700;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
    flex-shrink: 0;
}

.doc-att-row__info[b-sjfp9f43am] { min-width: 0; }

.doc-att-row__name[b-sjfp9f43am] {
    font-size: .75rem;
    font-weight: 600;
    color: var(--navy);
    font-family: Arial, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-att-row__meta[b-sjfp9f43am] {
    font-size: .62rem;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
}

.doc-att-row__open[b-sjfp9f43am] {
    font-size: .62rem;
    font-weight: 700;
    color: var(--accent);
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    padding: 0;
    font-family: Arial, sans-serif;
    transition: color .15s;
    flex-shrink: 0;
}

.doc-att-row__open:hover[b-sjfp9f43am] { color: var(--accent-light); }

/* ── Comment attachment chips ── */
.doc-att-chips[b-sjfp9f43am] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}

.doc-att-chip[b-sjfp9f43am] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .62rem;
    font-family: Arial, sans-serif;
    color: var(--accent);
    background: rgba(15,110,86,.07);
    border: 0.5px solid rgba(15,110,86,.2);
    border-radius: 5px;
    padding: 2px 7px;
    cursor: pointer;
    transition: background .15s;
}

.doc-att-chip:hover[b-sjfp9f43am] { background: rgba(15,110,86,.14); }

.doc-att-chip svg[b-sjfp9f43am] {
    width: 10px;
    height: 10px;
    stroke: var(--accent);
    flex-shrink: 0;
}

/* image thumbnails inside comment bubbles */
.doc-att-thumb[b-sjfp9f43am] {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    overflow: hidden;
    border: 0.5px solid var(--warm-gray-2);
    background: var(--warm-gray);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color .15s, transform .15s;
}

.doc-att-thumb:hover[b-sjfp9f43am] {
    border-color: var(--gold);
    transform: scale(1.05);
}

.doc-att-thumb__img[b-sjfp9f43am] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.doc-att-thumb__spinner[b-sjfp9f43am] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--warm-gray-2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin-b-sjfp9f43am .65s cubic-bezier(.4,0,.2,1) infinite;
}

.doc-att-thumb__icon[b-sjfp9f43am] {
    font-size: .55rem;
    font-weight: 700;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
    letter-spacing: .04em;
}

/* ── Accordion ── */
.exp-accordion[b-sjfp9f43am] {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows .38s cubic-bezier(.4,0,.2,1),
                border-color .2s cubic-bezier(.4,0,.2,1);
    background: #fff;
    border: 0.5px solid transparent;
    border-top: none;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
}

.exp-accordion--open[b-sjfp9f43am] {
    grid-template-rows: 1fr;
    border-color: var(--accent);
}

.exp-accordion__inner[b-sjfp9f43am] {
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    transition: opacity .2s cubic-bezier(.4,0,.2,1);
}

.exp-accordion--open .exp-accordion__inner[b-sjfp9f43am] {
    opacity: 1;
    transition: opacity .22s .14s cubic-bezier(.4,0,.2,1);
}

/* ── Comments ── */
.comment-thread[b-sjfp9f43am] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comment-thread__title[b-sjfp9f43am] {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
}

.comment-thread__empty[b-sjfp9f43am] {
    font-size: .72rem;
    color: var(--text-muted);
    font-style: italic;
    font-family: Arial, sans-serif;
    margin: 0;
}

.comment[b-sjfp9f43am] {
    padding: .6rem .75rem;
    border-radius: 8px;
    border: 0.5px solid var(--warm-gray-2);
    background: var(--warm-gray);
    max-width: 92%;
}

.comment--admin[b-sjfp9f43am] {
    background: rgba(15,110,86,.06);
    border-color: rgba(15,110,86,.2);
}

.comment__header[b-sjfp9f43am] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
    flex-wrap: wrap;
}

.comment__author[b-sjfp9f43am] {
    font-size: .68rem;
    font-weight: 700;
    color: var(--navy);
    font-family: Arial, sans-serif;
}

.comment__badge[b-sjfp9f43am] {
    font-size: .56rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 20px;
    background: rgba(15,110,86,.15);
    color: var(--accent);
    letter-spacing: .05em;
    font-family: Arial, sans-serif;
}

.comment__time[b-sjfp9f43am] {
    font-size: .62rem;
    color: var(--text-light);
    font-family: Arial, sans-serif;
    margin-left: auto;
}

.comment__text[b-sjfp9f43am] {
    font-size: .75rem;
    color: var(--navy);
    font-family: Arial, sans-serif;
    margin: 0;
    line-height: 1.45;
}

.comment-compose[b-sjfp9f43am] {
    display: flex;
    gap: 6px;
    align-items: flex-end;
    margin-top: 2px;
}

.comment-compose__input[b-sjfp9f43am] {
    flex: 1;
    padding: .5rem .7rem;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 7px;
    font-size: .78rem;
    background: #fff;
    color: var(--navy);
    font-family: Arial, sans-serif;
    resize: none;
    outline: none;
    transition: border-color .15s;
    line-height: 1.4;
}

.comment-compose__input:focus[b-sjfp9f43am] { border-color: var(--accent); }
.comment-compose__input[b-sjfp9f43am]::placeholder { color: var(--text-light); }

.comment-compose__send[b-sjfp9f43am] {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: .5rem .9rem;
    font-size: .75rem;
    font-weight: 700;
    font-family: Arial, sans-serif;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
    height: 36px;
}

.comment-compose__send:hover:not(:disabled)[b-sjfp9f43am] { background: var(--accent-light); }
.comment-compose__send:disabled[b-sjfp9f43am] { opacity: .5; cursor: not-allowed; }

/* ── Animations ── */
@keyframes fadeIn-b-sjfp9f43am {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ── */
@media (min-width: 640px) {
    .hero[b-sjfp9f43am]       { padding: 2rem 2rem 2.5rem; min-height: 178px; }
    .hero__name[b-sjfp9f43am] { font-size: 1.7rem; }
    .stats[b-sjfp9f43am]      { padding: 1.75rem 2rem 1rem; }
    .section[b-sjfp9f43am]    { padding: 0 2rem 2rem; }
}

@media (min-width: 720px) {
    .split-panel[b-sjfp9f43am] {
        flex-direction: row;
        align-items: flex-start;
        gap: 1.25rem;
    }

    .user-panel[b-sjfp9f43am] {
        width: 240px;
        flex-shrink: 0;
        position: sticky;
        top: 72px;
        max-height: calc(100dvh - 90px);
        overflow-y: auto;
    }

    .detail-panel[b-sjfp9f43am] { flex: 1; }
}

@media (min-width: 860px) {
    .hero__name[b-sjfp9f43am] { font-size: 2rem; }
    .user-panel[b-sjfp9f43am] { width: 260px; }
}

@media (min-width: 900px) {
    .admin-leave-wrapper[b-sjfp9f43am] {
        box-shadow: 0 0 0 1px var(--warm-gray-2);
    }
}

/* ── Attachment chip ── */
.attach-chip[b-sjfp9f43am] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: .6rem;
    color: var(--text-muted);
    background: var(--warm-gray);
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 4px;
    padding: 1px 5px;
    vertical-align: middle;
}
.attach-chip svg[b-sjfp9f43am] { width: 10px; height: 10px; }

/* ── New Leave CTA ── */
.btn-new[b-sjfp9f43am] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .75rem;
    background: var(--gold);
    color: var(--navy);
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: .78rem;
    border: none;
    cursor: pointer;
    font-family: 'Arial', sans-serif;
    letter-spacing: .03em;
    transition: background .15s;
}

.btn-new:hover[b-sjfp9f43am] { background: var(--gold-light); }

/* ── New Leave panel ── */
@keyframes slideInRight-b-sjfp9f43am {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

.panel-overlay[b-sjfp9f43am] {
    position: fixed;
    inset: 0;
    background: rgba(27,42,74,.35);
    z-index: 299;
}

.new-leave-panel[b-sjfp9f43am] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: 400px;
    background: #fff;
    box-shadow: -4px 0 24px rgba(27,42,74,.15);
    animation: slideInRight-b-sjfp9f43am .26s cubic-bezier(.4,0,.2,1);
    z-index: 300;
    display: flex;
    flex-direction: column;
}

@media (max-width: 480px) {
    .new-leave-panel[b-sjfp9f43am] { width: 100%; }
}

.new-leave-panel__header[b-sjfp9f43am] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--navy);
    color: #fff;
    padding: 1.1rem 1.25rem;
    flex-shrink: 0;
}

.new-leave-panel__title[b-sjfp9f43am] {
    font-size: .88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-family: 'Arial Narrow', 'Arial', sans-serif;
}

.new-leave-panel__close[b-sjfp9f43am] {
    background: none;
    border: none;
    color: rgba(255,255,255,.7);
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    line-height: 1;
    transition: color .15s, background .15s;
}

.new-leave-panel__close:hover[b-sjfp9f43am] {
    color: #fff;
    background: rgba(255,255,255,.1);
}

.new-leave-panel__body[b-sjfp9f43am] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.new-leave-panel__footer[b-sjfp9f43am] {
    display: flex;
    gap: .75rem;
    justify-content: flex-end;
    padding: .9rem 1.25rem;
    border-top: 1px solid var(--warm-gray-2);
    flex-shrink: 0;
}

/* ── New Leave balance KPIs ── */
.nl-kpis[b-sjfp9f43am] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.nl-kpis__empty[b-sjfp9f43am] {
    grid-column: 1 / -1;
    text-align: center;
    font-size: .72rem;
    color: var(--text-muted);
    padding: .65rem;
    background: var(--warm-gray);
    border: 0.5px solid var(--warm-gray-2);
    border-radius: var(--radius-card);
    font-family: 'Arial', sans-serif;
}

.nl-kpi[b-sjfp9f43am] {
    background: #fff;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: var(--radius-card);
    padding: .6rem .5rem;
    text-align: center;
}

.nl-kpi__n[b-sjfp9f43am] {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--navy);
    font-family: 'Georgia', serif;
}

.nl-kpi__l[b-sjfp9f43am] {
    display: block;
    font-size: .6rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: 2px;
    font-family: 'Arial', sans-serif;
}

/* ── New Leave form fields ── */
.nl-form-row--2col[b-sjfp9f43am] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.nl-field[b-sjfp9f43am] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.nl-label[b-sjfp9f43am] {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    font-family: 'Arial', sans-serif;
}

.nl-required[b-sjfp9f43am] { color: #E24B4A; }

.nl-input[b-sjfp9f43am] {
    padding: .5rem .7rem;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 7px;
    font-size: .78rem;
    background: #fff;
    color: var(--navy);
    font-family: 'Arial', sans-serif;
    transition: border-color .15s;
    outline: none;
}

.nl-input:focus[b-sjfp9f43am] { border-color: var(--gold); }

.nl-textarea[b-sjfp9f43am] {
    resize: vertical;
    min-height: 64px;
}

.nl-toggle-row[b-sjfp9f43am] {
    display: flex;
    align-items: center;
    gap: .55rem;
    cursor: pointer;
    padding: .55rem .75rem;
    background: var(--warm-gray);
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 8px;
    font-size: .75rem;
    color: var(--navy);
    font-family: 'Arial', sans-serif;
    transition: border-color .18s cubic-bezier(.4,0,.2,1);
    margin-bottom: .5rem;
}

.nl-toggle-row:hover[b-sjfp9f43am] { border-color: var(--gold); }

.nl-error[b-sjfp9f43am] {
    font-size: .75rem;
    color: #E24B4A;
    background: #FCEBEB;
    border: 0.5px solid #f5c6c6;
    border-radius: 7px;
    padding: .5rem .75rem;
    margin: 0;
    font-family: 'Arial', sans-serif;
}

.nl-btn[b-sjfp9f43am] {
    padding: 9px 18px;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Arial', sans-serif;
    transition: background .15s, border-color .15s;
}

.nl-btn:disabled[b-sjfp9f43am] {
    opacity: .5;
    cursor: not-allowed;
}

.nl-btn--cancel[b-sjfp9f43am] {
    background: transparent;
    color: var(--text-muted);
    border: 0.5px solid var(--warm-gray-2);
}

.nl-btn--cancel:hover:not(:disabled)[b-sjfp9f43am] { border-color: var(--gold); }

.nl-btn--submit[b-sjfp9f43am] {
    background: var(--gold);
    color: var(--navy);
    border: none;
}

.nl-btn--submit:hover:not(:disabled)[b-sjfp9f43am] { background: var(--gold-light); }

/* ── Duration pills (shared by New Leave panel) ── */
.day-mode-pills[b-sjfp9f43am] {
    display: flex;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 8px;
    overflow: hidden;
    background: var(--warm-gray);
}

.day-pill[b-sjfp9f43am] {
    flex: 1;
    padding: .45rem .5rem;
    font-size: .72rem;
    font-weight: 600;
    font-family: 'Arial', sans-serif;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.day-pill + .day-pill[b-sjfp9f43am] { border-left: 0.5px solid var(--warm-gray-2); }

.day-pill--active[b-sjfp9f43am] {
    background: var(--accent);
    color: #fff;
}

.day-pill:not(.day-pill--active):hover[b-sjfp9f43am] {
    background: var(--warm-gray-2);
    color: var(--navy);
}
/* /Pages/AdminStaff.razor.rz.scp.css */
/* ============================================================
   AdminStaff.razor.css — HB-Staff Staff Management
   Mobile-first · Navy / Gold / Warm-Gray palette
   ============================================================ */

.staff-wrapper[b-if48dt6785] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: #F4F1EC;
    font-family: 'Arial Narrow', 'Arial', sans-serif;
}


/* ── Hero ────────────────────────────────────────────────── */
.hero[b-if48dt6785] {
    padding: 1.5rem 1.5rem 2.2rem;
    min-height: 148px;
    background: #1B2A4A;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.hero-arc[b-if48dt6785] {
    position: absolute;
    bottom: -1px;
    left: -5%;
    width: 110%;
    height: 32px;
    background: #F4F1EC;
    border-radius: 50% 50% 0 0;
}

.hero__greeting[b-if48dt6785] {
    font-size: .75rem;
    color: #E2C07A;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-family: 'Arial Narrow', Arial, sans-serif;
    margin-bottom: .2rem;
}

.hero__name[b-if48dt6785] {
    font-size: 1.4rem;
    font-weight: 700;
    font-family: Georgia, serif;
    line-height: 1.15;
    color: #fff;
    margin-bottom: .15rem;
}

.hero__sub[b-if48dt6785] {
    font-size: .78rem;
    color: rgba(255,255,255,.55);
    font-family: Arial, sans-serif;
}

.btn-new[b-if48dt6785] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #C9A84C;
    border: none;
    color: #1B2A4A;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s;
}

.btn-new svg[b-if48dt6785]    { width: 14px; height: 14px; }
.btn-new:hover[b-if48dt6785]  { background: #E2C07A; }

/* ── Stats ───────────────────────────────────────────────── */
.stats[b-if48dt6785] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 1.75rem 1.25rem 1rem;
}

.stat[b-if48dt6785] {
    background: #fff;
    border: 0.5px solid #EAE6DF;
    border-radius: 10px;
    padding: .85rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
}

.stat__n[b-if48dt6785] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1B2A4A;
    font-family: Georgia, serif;
}

.stat__l[b-if48dt6785] {
    font-size: .65rem;
    color: #6B7A99;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
    display: flex;
    align-items: center;
    gap: 4px;
}

.stat__dot[b-if48dt6785] {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.stat__dot--green[b-if48dt6785] { background: #27500A; }
.stat__dot--gold[b-if48dt6785]  { background: #C9A84C; }
.stat__dot--navy[b-if48dt6785]  { background: #1B2A4A; }
.stat__dot--red[b-if48dt6785]   { background: #E24B4A; }

/* ── Section ─────────────────────────────────────────────── */
.section[b-if48dt6785] {
    flex: 1;
    padding: 0 1.25rem 1.5rem;
}

.section__header[b-if48dt6785] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
    flex-wrap: wrap;
    gap: .5rem;
}

.section__title[b-if48dt6785] {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
}

/* Search + New button */
.section__controls[b-if48dt6785] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.search-wrap[b-if48dt6785] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-wrap svg[b-if48dt6785] {
    position: absolute;
    left: 8px;
    width: 14px;
    height: 14px;
    stroke: #6B7A99;
    pointer-events: none;
}

.search-wrap input[b-if48dt6785] {
    padding: 6px 10px 6px 28px;
    border: 0.5px solid #EAE6DF;
    border-radius: 7px;
    font-size: .75rem;
    background: #fff;
    color: #1B2A4A;
    width: 180px;
    outline: none;
    transition: border-color .18s;
}

.search-wrap input:focus[b-if48dt6785] { border-color: #C9A84C; }

/* ── User List ───────────────────────────────────────────── */
.user-list[b-if48dt6785] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.user-row-wrap[b-if48dt6785] {
    display: flex;
    flex-direction: column;
}

.user-row[b-if48dt6785] {
    background: #fff;
    border: 0.5px solid #EAE6DF;
    border-radius: 10px;
    padding: .75rem 1rem;
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 12px;
    transition: border-color .18s, border-radius .18s;
}

.user-row:hover[b-if48dt6785] { border-color: #C9A84C; }

.user-row--activity[b-if48dt6785] {
    border-left: 2.5px solid #C9A84C;
}

.user-row--mileage-pending[b-if48dt6785] {
    border-color: #7A3F1B;
    background: #FAEEDA;
}

.user-row--mileage-pending.user-row--expanded[b-if48dt6785] {
    border-color: #C9A84C;
    background: #fff;
}

.user-row--reset-req[b-if48dt6785] {
    border-color: #E24B4A;
    background: #FCEBEB;
}

.user-row--reset-req.user-row--expanded[b-if48dt6785] {
    border-color: #C9A84C;
    background: #fff;
}

.user-row--expanded[b-if48dt6785] {
    border-color: #C9A84C;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: #EAE6DF;
}

/* ── User Info Panel ─────────────────────────────────────── */
.user-panel[b-if48dt6785] {
    background: #fff;
    border: 0.5px solid #C9A84C;
    border-top: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: .85rem 1rem .9rem;
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    animation: panelSlide-b-if48dt6785 .2s cubic-bezier(.4,0,.2,1);
}

@keyframes panelSlide-b-if48dt6785 {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.user-panel__avatar[b-if48dt6785] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    font-family: Arial, sans-serif;
    flex-shrink: 0;
}

.user-panel__fields[b-if48dt6785] {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem .75rem;
}

.user-panel__field[b-if48dt6785] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-panel__label[b-if48dt6785] {
    font-size: .6rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #6B7A99;
    font-family: Arial, sans-serif;
}

.user-panel__value[b-if48dt6785] {
    font-size: .78rem;
    font-weight: 600;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
}


.act-btn--view-active[b-if48dt6785] {
    border-color: #1B2A4A;
    background: rgba(27,42,74,.08);
}

.act-btn--edit-active[b-if48dt6785] {
    border-color: #C9A84C;
    background: #FFF8EC;
}

/* ── Reset Request Panel ─────────────────────────────────── */
.user-panel--reset[b-if48dt6785] {
    flex-direction: column;
    gap: 0;
    padding: 0;
    border-color: #E24B4A;
}

.reset-panel__body[b-if48dt6785] {
    padding: .85rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.reset-panel__icon[b-if48dt6785] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #FCEBEB;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reset-panel__icon svg[b-if48dt6785] {
    width: 16px;
    height: 16px;
    stroke: #E24B4A;
}

.reset-panel__text[b-if48dt6785] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.reset-panel__title[b-if48dt6785] {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #E24B4A;
    font-family: Arial, sans-serif;
}

.reset-panel__desc[b-if48dt6785] {
    font-size: .76rem;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
    line-height: 1.45;
    margin: 0;
}

.reset-panel__footer[b-if48dt6785] {
    padding: .65rem 1rem;
    border-top: 1px solid #F5C6C6;
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
}

/* ── Edit Panel ──────────────────────────────────────────── */
.user-panel--edit[b-if48dt6785] {
    flex-direction: column;
    gap: 0;
    padding: 0;
}

.edit-panel__body[b-if48dt6785] {
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.edit-panel__row[b-if48dt6785] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
}

.edit-panel__toggles[b-if48dt6785] {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.edit-panel__footer[b-if48dt6785] {
    padding: .65rem 1rem;
    border-top: 1px solid #EAE6DF;
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
}

/* Shared field styles (edit panel) */
.field[b-if48dt6785] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.field__label[b-if48dt6785] {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
}

.field__req[b-if48dt6785] { color: #E24B4A; }

.field__input[b-if48dt6785] {
    padding: .5rem .7rem;
    border: 0.5px solid #EAE6DF;
    border-radius: 7px;
    font-size: .8rem;
    background: #fff;
    color: #1B2A4A;
    outline: none;
    transition: border-color .18s;
    font-family: Arial, sans-serif;
    width: 100%;
    box-sizing: border-box;
}

.field__input:focus[b-if48dt6785]        { border-color: #C9A84C; }
.field__input[b-if48dt6785]::placeholder { color: #6B7A99; }

.field__input--short[b-if48dt6785] { max-width: 120px; }

.field__notice[b-if48dt6785] {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin: .15rem 0 0;
    padding: .4rem .55rem;
    background: #EAF0FA;
    color: #1B2A4A;
    border: 0.5px solid #BDD0EF;
    border-radius: 6px;
    font-size: .68rem;
    font-family: Arial, sans-serif;
    line-height: 1.45;
}

.field__notice svg[b-if48dt6785] {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    margin-top: 1px;
    stroke: #1B2A4A;
}

.toggle-row[b-if48dt6785] {
    display: flex;
    align-items: center;
    gap: .55rem;
    cursor: pointer;
    padding: .55rem .75rem;
    background: #F4F1EC;
    border: 0.5px solid #EAE6DF;
    border-radius: 8px;
    transition: border-color .18s;
    flex: 1;
}

.toggle-row:hover[b-if48dt6785] { border-color: #C9A84C; }

.toggle-label[b-if48dt6785] {
    font-size: .75rem;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
}

.btn-cancel[b-if48dt6785] {
    background: none;
    border: 0.5px solid #EAE6DF;
    border-radius: 8px;
    padding: 7px 16px;
    font-size: .75rem;
    font-weight: 600;
    color: #6B7A99;
    cursor: pointer;
    transition: border-color .18s, color .18s;
    font-family: Arial, sans-serif;
}

.btn-cancel:hover[b-if48dt6785] { border-color: #C9A84C; color: #1B2A4A; }

.btn-confirm[b-if48dt6785] {
    background: #C9A84C;
    border: none;
    border-radius: 8px;
    padding: 7px 16px;
    font-size: .75rem;
    font-weight: 700;
    color: #1B2A4A;
    cursor: pointer;
    letter-spacing: .04em;
    transition: background .2s;
    font-family: Arial, sans-serif;
}

.btn-confirm:hover:not(:disabled)[b-if48dt6785] { background: #E2C07A; }
.btn-confirm:disabled[b-if48dt6785]              { opacity: .45; cursor: not-allowed; }

.user-avatar[b-if48dt6785] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 700;
    font-family: Arial, sans-serif;
    flex-shrink: 0;
}

.avatar--navy[b-if48dt6785] { background: rgba(27,42,74,.12);  color: #1B2A4A; }
.avatar--gold[b-if48dt6785] { background: rgba(201,168,76,.18); color: #7A5C10; }

.user-name[b-if48dt6785] {
    font-size: .82rem;
    font-weight: 700;
    color: #1B2A4A;
    margin-bottom: .1rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-family: Arial, sans-serif;
}

.user-email[b-if48dt6785] {
    font-size: .7rem;
    color: #6B7A99;
    font-family: Arial, sans-serif;
}

/* Badges */
.badge[b-if48dt6785] {
    display: inline-block;
    font-size: .6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: .05em;
    font-family: Arial, sans-serif;
}

.badge--active[b-if48dt6785]   { background: #EAF3DE; color: #27500A; }
.badge--pending[b-if48dt6785]  { background: #FAEEDA; color: #633806; }
.badge--admin[b-if48dt6785]    { background: rgba(27,42,74,.1); color: #1B2A4A; }
.badge--comment[b-if48dt6785]  { background: #C9A84C; color: #1B2A4A; }
.badge--expense[b-if48dt6785]  { background: #FAEEDA; color: #633806; }
.badge--new[b-if48dt6785]      { background: #E24B4A; color: #fff; }

/* ── Action Buttons ──────────────────────────────────────── */
.user-actions[b-if48dt6785] {
    display: flex;
    gap: 4px;
    align-items: center;
}

.act-btn[b-if48dt6785] {
    background: none;
    border: 0.5px solid #EAE6DF;
    border-radius: 6px;
    padding: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .18s, background .18s;
}

.act-btn svg[b-if48dt6785] { width: 14px; height: 14px; stroke-width: 1.8; }

.act-btn:hover[b-if48dt6785]            { border-color: #C9A84C; background: #FFF8EC; }
.act-btn--view svg[b-if48dt6785]        { stroke: #1B2A4A; }
.act-btn--edit svg[b-if48dt6785]        { stroke: #C9A84C; }
.act-btn--forms svg[b-if48dt6785]       { stroke: #534AB7; }
.act-btn--reinvite svg[b-if48dt6785]        { stroke: #0F6E56; }
.act-btn--reinvite:hover[b-if48dt6785]      { border-color: #0F6E56; background: #EAF3DE; }
.act-btn--reset-req svg[b-if48dt6785]       { stroke: #E24B4A; }
.act-btn--reset-req:hover[b-if48dt6785]     { border-color: #E24B4A; background: #FCEBEB; }
.act-btn--reset-req-active[b-if48dt6785]    { border-color: #E24B4A; background: #FCEBEB; }
.act-btn--delete:hover[b-if48dt6785]        { border-color: #E24B4A; background: #FCEBEB; }
.act-btn--delete svg[b-if48dt6785]          { stroke: #E24B4A; }

.act-btn--vehicles[b-if48dt6785]            { position: relative; }
.act-btn--vehicles svg[b-if48dt6785]        { stroke: #7A3F1B; }
.act-btn--vehicles:hover[b-if48dt6785]      { border-color: #7A3F1B; background: rgba(122,63,27,.08); }
.act-btn--vehicles-active[b-if48dt6785]     { border-color: #7A3F1B; background: rgba(122,63,27,.08); }
.act-btn--vehicles-pending[b-if48dt6785]::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E24B4A;
    border: 1.5px solid #fff;
}

/* ── States ──────────────────────────────────────────────── */
.loading-state[b-if48dt6785],
.empty-state[b-if48dt6785] {
    text-align: center;
    padding: 2rem;
    font-size: .82rem;
    color: #6B7A99;
    font-family: Arial, sans-serif;
}

/* ── Footer ──────────────────────────────────────────────── */

/* ── Responsive ──────────────────────────────────────────── */
@media (min-width: 640px) {
    .hero[b-if48dt6785]    { padding: 2rem 2rem 2.5rem; min-height: 178px; }
    .hero__name[b-if48dt6785] { font-size: 1.7rem; }
    .section[b-if48dt6785] { padding: 0 2rem 2rem; }
    .stats[b-if48dt6785]   { padding: 1.75rem 2rem 1rem; }
}

@media (min-width: 860px) {
    .hero[b-if48dt6785]    { padding: 2.5rem 2rem 2.5rem; min-height: 200px; }
    .hero__name[b-if48dt6785] { font-size: 2rem; }
}

@media (min-width: 900px) {
    .staff-wrapper[b-if48dt6785] {
        box-shadow: 0 0 0 1px #EAE6DF;
    }
}

/* ── Toast ───────────────────────────────────────────────── */
.toast[b-if48dt6785] {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 600;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem 1.1rem;
    border-radius: 10px;
    font-size: .78rem;
    font-weight: 600;
    font-family: Arial, sans-serif;
    box-shadow: 0 4px 18px rgba(27,42,74,.22);
    white-space: nowrap;
    animation: toastIn-b-if48dt6785 .22s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}

@keyframes toastIn-b-if48dt6785 {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.toast svg[b-if48dt6785] { width: 15px; height: 15px; flex-shrink: 0; }

.toast--success[b-if48dt6785] {
    background: #EAF3DE;
    color: #27500A;
    border: 0.5px solid #B8DABB;
}

.toast--success svg[b-if48dt6785] { stroke: #27500A; }

.toast--error[b-if48dt6785] {
    background: #FCEBEB;
    color: #c73b3a;
    border: 0.5px solid #F5C6C6;
}

/* ── Pagination ──────────────────────────────────────────────── */
.pagination[b-if48dt6785] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1rem 0 .5rem;
}

.pagination__btn[b-if48dt6785] {
    width: 30px;
    height: 30px;
    border: 0.5px solid #EAE6DF;
    border-radius: 6px;
    background: #fff;
    color: #1B2A4A;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination__btn:hover:not(:disabled)[b-if48dt6785] { border-color: #C9A84C; background: #FFF8EC; }
.pagination__btn:disabled[b-if48dt6785] { opacity: .4; cursor: not-allowed; }

.pagination__info[b-if48dt6785] {
    font-size: .72rem;
    font-family: Arial, sans-serif;
    color: #6B7A99;
    min-width: 48px;
    text-align: center;
}

.toast--error svg[b-if48dt6785] { stroke: #c73b3a; }
/* /Pages/Calendar.razor.rz.scp.css */
/* ── Design tokens ───────────────────────────────────────────────────────── */
.colleague-cal-wrapper[b-y64rqam070] {
    --navy:        #1B2A4A;
    --navy-light:  #243560;
    --navy-dark:   #111d33;
    --gold:        #C9A84C;
    --gold-light:  #E2C07A;
    --gold-muted:  #F5D98A;
    --warm-gray:   #F4F1EC;
    --warm-gray-2: #EAE6DF;
    --text-muted:  #6B7A99;
    --text-light:  #aab0c0;
    --radius-card: 10px;
    --transition:  all .2s cubic-bezier(.4,0,.2,1);
    --accent:      #1A6B8A;

    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--warm-gray);
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero[b-y64rqam070] {
    padding: 1.5rem 1.5rem 2.2rem;
    background: var(--navy);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.hero__greeting[b-y64rqam070] {
    font-size: .75rem;
    color: var(--gold-light);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-family: 'Arial', sans-serif;
    margin: 0 0 .3rem;
}

.hero__name[b-y64rqam070] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    font-family: 'Georgia', serif;
    margin: 0 0 .3rem;
}

.hero__sub[b-y64rqam070] {
    font-size: .78rem;
    color: rgba(255,255,255,.55);
    font-family: 'Arial', sans-serif;
    margin: 0;
}

.hero__body[b-y64rqam070] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hero__text[b-y64rqam070] {
    flex: 1;
    min-width: 0;
}

.hero-arc[b-y64rqam070] {
    position: absolute;
    bottom: -1px;
    left: -5%;
    width: 110%;
    height: 32px;
    background: var(--warm-gray);
    border-radius: 50% 50% 0 0;
}

/* ── Stats bar ───────────────────────────────────────────────────────────── */
.stats[b-y64rqam070] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 1.75rem 1.25rem 1rem;
}

.stat[b-y64rqam070] {
    background: #fff;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: var(--radius-card);
    padding: .85rem 1rem;
    text-align: center;
    box-shadow: 0 1px 4px rgba(27,42,74,.07);
}

.stat__n[b-y64rqam070] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--navy);
    font-family: 'Georgia', serif;
}

.stat__l[b-y64rqam070] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: .65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: .25rem;
}

.stat__dot[b-y64rqam070] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.stat__dot--green[b-y64rqam070] { background: #27500A; }
.stat__dot--red[b-y64rqam070]   { background: #E24B4A; }
.stat__dot--gold[b-y64rqam070]  { background: var(--gold); }

/* ── Section ─────────────────────────────────────────────────────────────── */
.section[b-y64rqam070] {
    flex: 1;
    padding: 0 1.25rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Month navigation ────────────────────────────────────────────────────── */
.cal-nav[b-y64rqam070] {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.cal-nav__label[b-y64rqam070] {
    font-size: .82rem;
    font-weight: 700;
    color: var(--navy);
    font-family: 'Arial Narrow', 'Arial', sans-serif;
    text-transform: uppercase;
    letter-spacing: .07em;
    flex: 1;
    text-align: center;
}

.cal-nav__week[b-y64rqam070] {
    font-weight: 400;
    color: var(--text-muted);
    margin-left: .35em;
}

.cal-nav__btn[b-y64rqam070] {
    width: 32px;
    height: 32px;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 6px;
    background: #fff;
    color: var(--gold);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.cal-nav__btn:hover[b-y64rqam070] {
    border-color: var(--gold);
    background: #FFF8EC;
}

.cal-nav__btn--today[b-y64rqam070] {
    width: auto;
    padding: 0 10px;
    font-size: .72rem;
    font-weight: 700;
    font-family: 'Arial Narrow', 'Arial', sans-serif;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.cal-nav__loading[b-y64rqam070] {
    font-size: .65rem;
    color: var(--text-muted);
    font-family: 'Arial', sans-serif;
    letter-spacing: .04em;
    animation: calPulse-b-y64rqam070 .8s ease-in-out infinite alternate;
}

@keyframes calPulse-b-y64rqam070 {
    from { opacity: 0.4; }
    to   { opacity: 1; }
}

/* ── Legend ──────────────────────────────────────────────────────────────── */
.cal-legend[b-y64rqam070] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.legend-pill[b-y64rqam070] {
    font-size: .6rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.legend-pill--unavailable[b-y64rqam070] { background: var(--navy); color: #fff; }
.legend-pill--bank[b-y64rqam070]        { background: rgba(100,149,237,.15); color: #2a5fc4; border: 1px solid rgba(100,149,237,.35); }

/* ── Calendar scroll wrapper ─────────────────────────────────────────────── */
.calendar-scroll[b-y64rqam070] {
    overflow-x: auto;
    border-radius: var(--radius-card);
    border: 0.5px solid var(--warm-gray-2);
    background: #fff;
    box-shadow: 0 1px 4px rgba(27,42,74,.07);
}

/* ── Calendar table ──────────────────────────────────────────────────────── */
.cal-table[b-y64rqam070] {
    border-collapse: separate;
    border-spacing: 0;
    white-space: nowrap;
    font-size: .72rem;
    font-family: 'Arial', sans-serif;
    width: 100%;
}

/* Sticky name column */
.cal-name-header[b-y64rqam070],
.cal-name[b-y64rqam070] {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    min-width: 120px;
    max-width: 160px;
    padding: .4rem .75rem;
    border-right: 1.5px solid var(--warm-gray-2);
}

.cal-name-header[b-y64rqam070] {
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    background: var(--navy);
    color: rgba(255,255,255,.6);
}

.cal-name-header--day[b-y64rqam070] {
    background: #f8f7f5;
    color: var(--text-muted);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--warm-gray-2);
}

/* Month group headers */
.cal-month-header[b-y64rqam070] {
    background: var(--navy);
    color: rgba(255,255,255,.9);
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    text-align: center;
    padding: .4rem .25rem;
    border-left: 1px solid rgba(255,255,255,.1);
}

/* Day number headers */
.cal-day-header[b-y64rqam070] {
    width: 28px;
    min-width: 28px;
    text-align: center;
    padding: .2rem 0;
    font-size: .6rem;
    color: var(--text-muted);
    background: #f8f7f5;
    border-bottom: 1px solid var(--warm-gray-2);
    border-left: 0.5px solid var(--warm-gray-2);
}

.cal-day-hd[b-y64rqam070] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.cal-day-dow[b-y64rqam070] {
    font-size: .52rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: .03em;
    line-height: 1;
}

.cal-day--leave .cal-day-hd[b-y64rqam070] {
    color: #fff;
}

/* Data rows */
.cal-row:nth-child(even) .cal-name[b-y64rqam070] {
    background: #fafafa;
}

.cal-row:nth-child(even) .cal-name-header[b-y64rqam070],
.cal-row:nth-child(even) .cal-day:not(.cal-day--leave):not(.cal-day--weekend):not(.cal-day--bank-holiday)[b-y64rqam070] {
    background: #fafafa;
}

.cal-row:hover .cal-name[b-y64rqam070] {
    background: #FFF8EC;
}

.cal-name[b-y64rqam070] {
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 0.5px solid var(--warm-gray-2);
    color: var(--navy);
    font-weight: 600;
    font-size: .75rem;
}

/* Day cells */
.cal-day[b-y64rqam070] {
    width: 28px;
    min-width: 28px;
    height: 26px;
    text-align: center;
    padding: 2px 1px;
    border-left: 0.5px solid var(--warm-gray-2);
    border-bottom: 0.5px solid var(--warm-gray-2);
}

.cal-day--weekend[b-y64rqam070] {
    background: var(--warm-gray);
}

.cal-day-header.cal-day--today[b-y64rqam070] {
    background: var(--navy);
    color: #fff;
    font-weight: 800;
    border-left: 2px solid var(--navy-light);
}

.cal-day.cal-day--today:not(.cal-day--leave)[b-y64rqam070] {
    border-left: 2px solid var(--navy);
}

.cal-day.cal-day--leave.cal-day--today[b-y64rqam070] {
    border-left: 2px solid var(--navy);
    outline: 1.5px solid var(--navy);
    outline-offset: -1px;
}

.cal-day--leave[b-y64rqam070] {
    border-radius: 0;
}

/* ── Name / initials toggle ──────────────────────────────────────────────── */
.name-initials[b-y64rqam070] { display: none; }

@media (max-width: 479px) {
    .name-full[b-y64rqam070] { display: none; }

    .name-initials[b-y64rqam070] {
        position: relative;
        display: inline-block;
        font-size: .65rem;
        font-weight: 700;
        letter-spacing: .03em;
        cursor: pointer;
    }

    .cal-name-header[b-y64rqam070],
    .cal-name[b-y64rqam070] {
        min-width: 36px;
        max-width: 36px;
        padding: .4rem .3rem;
        text-align: center;
        overflow: visible;
    }

    .name-expand[b-y64rqam070] {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        z-index: 6;
        display: flex;
        align-items: center;
        height: 22px;
        background: #fff;
        border: 1px solid var(--gold);
        color: var(--navy);
        font-family: 'Arial', sans-serif;
        font-size: .7rem;
        font-weight: 600;
        letter-spacing: normal;
        text-transform: none;
        white-space: nowrap;
        padding: 0 .6rem;
        border-radius: 6px;
        box-shadow: 2px 2px 8px rgba(27,42,74,.18);
        animation: expandIn-b-y64rqam070 .16s cubic-bezier(.4,0,.2,1);
        transform-origin: left center;
    }
}

@keyframes expandIn-b-y64rqam070 {
    from { opacity: 0; transform: translateY(-50%) scaleX(.85); }
    to   { opacity: 1; transform: translateY(-50%) scaleX(1); }
}

/* ── Loading / empty ─────────────────────────────────────────────────────── */
.loading-state[b-y64rqam070],
.empty-state[b-y64rqam070] {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-muted);
    font-size: .78rem;
    font-family: 'Arial', sans-serif;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
:deep(.footer)[b-y64rqam070] {
    padding: .65rem 1.25rem;
    font-size: .62rem;
    letter-spacing: .12em;
    color: var(--text-muted);
    text-transform: uppercase;
    border-top: 1px solid var(--warm-gray-2);
    height: 32px;
    font-family: 'Arial', sans-serif;
}

/* ── Fullscreen section ──────────────────────────────────────────────────── */
.section:fullscreen[b-y64rqam070],
.section:-webkit-full-screen[b-y64rqam070],
.section--soft-fs[b-y64rqam070] {
    background: var(--warm-gray);
    padding: 1.25rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.section--soft-fs[b-y64rqam070] {
    position: fixed;
    inset: 0;
    z-index: 250;
    padding-top: max(1.25rem, env(safe-area-inset-top));
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
    .hero[b-y64rqam070] {
        padding: 2rem 2rem 2.5rem;
    }

    .stats[b-y64rqam070] {
        padding: 1.75rem 2rem 1rem;
    }

    .section[b-y64rqam070] {
        padding: 0 2rem 2rem;
    }
}

@media (min-width: 900px) {
    .hero__name[b-y64rqam070] {
        font-size: 1.7rem;
    }
}

/* ── Bank holidays ───────────────────────────────────────────────────────── */
.cal-day-header.cal-day--bank-holiday[b-y64rqam070] {
    background: #c7d9ff;
    color: #1a3a8f;
}

.cal-day.cal-day--bank-holiday[b-y64rqam070] {
    background: #dce8ff;
}

.cal-bh-dot[b-y64rqam070] {
    display: block;
    font-size: .48rem;
    font-weight: 800;
    color: #1a3a8f;
    letter-spacing: .04em;
    line-height: 1;
    margin-top: 1px;
    text-align: center;
}

/* ── Sticky header rows (stay below the topbar while scrolling) ─────────── */
.cal-month-header[b-y64rqam070],
.cal-day-header[b-y64rqam070] {
    position: sticky;
    z-index: 4;
}

.cal-month-header[b-y64rqam070] {
    top: 56px;
    height: 26px;
    box-sizing: border-box;
}

.cal-day-header[b-y64rqam070] {
    top: 82px;
}

.cal-name-header:not(.cal-name-header--day)[b-y64rqam070] {
    top: 56px;
    z-index: 5;
}

.cal-name-header--day[b-y64rqam070] {
    top: 82px;
    z-index: 5;
}
/* /Pages/CarExp.razor.rz.scp.css */
/* ── Design tokens ── */
.car-exp-wrapper[b-uxn1mljfm8] {
    --navy:        #1B2A4A;
    --navy-light:  #243560;
    --navy-dark:   #111d33;
    --gold:        #C9A84C;
    --gold-light:  #E2C07A;
    --gold-muted:  #F5D98A;
    --warm-gray:   #F4F1EC;
    --warm-gray-2: #EAE6DF;
    --text-muted:  #6B7A99;
    --text-light:  #aab0c0;
    --radius-card: 10px;
    --transition:  all .2s cubic-bezier(.4,0,.2,1);
    --accent:      #4A2A7A;
    --accent-light:#5E3A96;
    --accent-bg:   rgba(74,42,122,.08);

    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--warm-gray);
    position: relative;
}

/* ── Overlays & toasts ── */
.send-overlay[b-uxn1mljfm8] {
    position: fixed;
    inset: 0;
    background: rgba(27,42,74,.45);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 400;
}

.send-overlay__spinner[b-uxn1mljfm8] {
    width: 38px;
    height: 38px;
    border: 3px solid rgba(255,255,255,.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-uxn1mljfm8 .65s linear infinite;
}

.send-overlay__label[b-uxn1mljfm8] {
    margin-top: .85rem;
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .05em;
}

@keyframes spin-b-uxn1mljfm8 {
    to { transform: rotate(360deg); }
}

.toast[b-uxn1mljfm8] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.25rem;
    z-index: 400;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    border-left: 4px solid var(--accent);
    border-radius: 8px;
    padding: .65rem 1rem;
    font-size: .78rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    animation: fadeIn-b-uxn1mljfm8 .18s ease;
}

.toast--success[b-uxn1mljfm8] { border-left-color: #27500A; color: #27500A; }
.toast--error[b-uxn1mljfm8]   { border-left-color: #E24B4A; color: #E24B4A; }

@keyframes fadeIn-b-uxn1mljfm8 {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero ── */
.hero[b-uxn1mljfm8] {
    position: relative;
    padding: 1.5rem 1.5rem 2.4rem;
    background: var(--accent);
    color: #fff;
    overflow: hidden;
}

.hero__greeting[b-uxn1mljfm8] {
    font-size: .72rem;
    color: rgba(255,255,255,.7);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-family: 'Arial', sans-serif;
    font-weight: 600;
    margin: 0 0 .35rem;
}

.hero__name[b-uxn1mljfm8] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    font-family: 'Georgia', serif;
    margin: 0 0 .3rem;
    line-height: 1.2;
}

.hero__sub[b-uxn1mljfm8] {
    font-size: .78rem;
    color: rgba(255,255,255,.6);
    font-family: 'Arial', sans-serif;
    margin: 0;
}

.hero-arc[b-uxn1mljfm8] {
    position: absolute;
    bottom: -1px;
    left: -5%;
    width: 110%;
    height: 32px;
    background: var(--warm-gray);
    border-radius: 50% 50% 0 0;
}

/* ── Content ── */
.exp-content[b-uxn1mljfm8] {
    flex: 1;
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
}

.exp-form[b-uxn1mljfm8] {
    background: #fff;
    border-radius: var(--radius-card);
    padding: 1.5rem;
    box-shadow: 0 1px 4px rgba(27,42,74,.07);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ── Two-column grid ── */
.exp-grid[b-uxn1mljfm8] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.exp-fields[b-uxn1mljfm8] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Field rows ── */
.field-row[b-uxn1mljfm8] {
    display: grid;
    gap: .75rem;
}

.field-row--2[b-uxn1mljfm8] { grid-template-columns: 1fr 1fr; }
.field-row--3[b-uxn1mljfm8] { grid-template-columns: 1fr 1fr 1fr; }

.field-group[b-uxn1mljfm8] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.field-label[b-uxn1mljfm8] {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    font-family: 'Arial', sans-serif;
}

.field-label__ref[b-uxn1mljfm8] {
    font-size: .65rem;
    font-weight: 400;
    color: var(--text-light);
    letter-spacing: .03em;
    text-transform: none;
    float: right;
}

.field-required[b-uxn1mljfm8] {
    color: #E24B4A;
}

.field-input[b-uxn1mljfm8] {
    padding: .5rem .7rem;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 7px;
    font-size: .78rem;
    background: #fff;
    color: var(--navy);
    font-family: 'Arial', sans-serif;
    transition: var(--transition);
    height: 36px;
    box-sizing: border-box;
}

.field-input[type="date"][b-uxn1mljfm8] {
    height: auto;
    min-height: 44px;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
}

.field-input:focus[b-uxn1mljfm8] {
    outline: none;
    border-color: var(--accent);
    background: #fff;
}

.field-input:disabled[b-uxn1mljfm8] {
    background: var(--warm-gray);
    color: var(--text-muted);
    border-color: var(--warm-gray-2);
    cursor: default;
    opacity: 1;
}

.field-input--error[b-uxn1mljfm8] {
    border-color: #E24B4A;
    background: #FCEBEB;
}

.field-input[b-uxn1mljfm8]::placeholder {
    color: var(--text-light);
}

.field-textarea[b-uxn1mljfm8] {
    height: auto;
    resize: vertical;
    min-height: 90px;
    line-height: 1.5;
}

.field-error-msg[b-uxn1mljfm8] {
    font-size: .68rem;
    color: #E24B4A;
    font-weight: 600;
    letter-spacing: .03em;
}

.field-hint-msg[b-uxn1mljfm8] {
    font-size: .68rem;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: .03em;
}

/* ── Vehicle picker helpers ── */
.field-label-row[b-uxn1mljfm8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .3rem;
}

.field-label-row .field-label[b-uxn1mljfm8] {
    margin-bottom: 0;
}

.btn-manage-cars[b-uxn1mljfm8] {
    background: transparent;
    color: var(--text-muted);
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-family: 'Arial', sans-serif;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.btn-manage-cars:hover[b-uxn1mljfm8] {
    border-color: var(--accent);
    color: var(--accent);
}

.field-input-row[b-uxn1mljfm8] {
    display: flex;
    gap: .45rem;
    align-items: center;
}

.field-input-row .field-input[b-uxn1mljfm8] {
    flex: 1;
    min-width: 0;
}

.btn-add-car[b-uxn1mljfm8] {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: var(--gold);
    color: var(--navy);
    border: none;
    border-radius: 8px;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}

.btn-add-car:hover[b-uxn1mljfm8] { background: var(--gold-light); }

.btn-link[b-uxn1mljfm8] {
    background: none;
    border: none;
    color: var(--accent);
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-top: .25rem;
    font-family: 'Arial', sans-serif;
    text-align: left;
    letter-spacing: .02em;
}

.btn-link:hover[b-uxn1mljfm8] { text-decoration: underline; }

/* ── Manage panel ── */
.panel-overlay[b-uxn1mljfm8] {
    position: fixed;
    inset: 0;
    background: rgba(27,42,74,.35);
    z-index: 299;
}

/* Mobile: bottom sheet */
.manage-panel[b-uxn1mljfm8] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 78dvh;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(27,42,74,.18);
    animation: slideUpSheet-b-uxn1mljfm8 .28s cubic-bezier(.4,0,.2,1);
    z-index: 300;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@keyframes slideUpSheet-b-uxn1mljfm8 {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* Desktop: side panel */
@media (min-width: 640px) {
    .manage-panel[b-uxn1mljfm8] {
        top: 0;
        right: 0;
        bottom: auto;
        left: auto;
        height: 100dvh;
        max-height: none;
        width: 340px;
        border-radius: 0;
        box-shadow: -4px 0 24px rgba(27,42,74,.15);
        animation: slideInRight .26s cubic-bezier(.4,0,.2,1);
    }
}

.manage-panel__handle[b-uxn1mljfm8] {
    width: 36px;
    height: 4px;
    background: var(--warm-gray-2);
    border-radius: 2px;
    margin: .65rem auto .2rem;
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .manage-panel__handle[b-uxn1mljfm8] { display: none; }
}

.manage-panel__header[b-uxn1mljfm8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1.25rem;
    background: var(--accent);
    flex-shrink: 0;
}

.manage-panel__title[b-uxn1mljfm8] {
    font-size: .88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #fff;
    font-family: 'Arial', sans-serif;
}

.manage-panel__close[b-uxn1mljfm8] {
    background: none;
    border: none;
    color: rgba(255,255,255,.8);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 4px;
    transition: background .15s;
}

.manage-panel__close:hover[b-uxn1mljfm8] { background: rgba(255,255,255,.15); }

.manage-panel__header-left[b-uxn1mljfm8] {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.manage-panel__back[b-uxn1mljfm8] {
    background: rgba(255,255,255,.12);
    border: none;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 4px;
    transition: background .15s;
    flex-shrink: 0;
}

.manage-panel__back:hover[b-uxn1mljfm8] { background: rgba(255,255,255,.22); }

.manage-panel__body[b-uxn1mljfm8] {
    flex: 1;
    overflow-y: auto;
    padding: .35rem 0 env(safe-area-inset-bottom, .75rem);
}

.manage-panel__empty[b-uxn1mljfm8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 2.5rem 1.5rem 2rem;
    text-align: center;
}

.manage-panel__empty-icon[b-uxn1mljfm8] {
    width: 46px;
    height: 46px;
    color: var(--warm-gray-2);
    margin-bottom: .25rem;
}

.manage-panel__empty-title[b-uxn1mljfm8] {
    font-size: .82rem;
    font-weight: 700;
    color: var(--navy);
    font-family: 'Arial', sans-serif;
    margin: 0;
}

.manage-panel__empty-hint[b-uxn1mljfm8] {
    font-size: .7rem;
    color: var(--text-muted);
    font-family: 'Arial', sans-serif;
    margin: 0;
    line-height: 1.45;
}

.manage-panel__section-label[b-uxn1mljfm8] {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-light);
    padding: .65rem 1.25rem .25rem;
    font-family: 'Arial', sans-serif;
}

.manage-panel__section-label--retired[b-uxn1mljfm8] {
    margin-top: .35rem;
    border-top: 0.5px solid var(--warm-gray-2);
    padding-top: .85rem;
}

/* ── Car rows ── */
.car-row[b-uxn1mljfm8] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1.25rem;
    border-bottom: 0.5px solid var(--warm-gray-2);
    transition: background .15s;
}

.car-row:last-child[b-uxn1mljfm8] { border-bottom: none; }
.car-row:hover[b-uxn1mljfm8] { background: var(--warm-gray); }

.car-row__info[b-uxn1mljfm8] {
    display: flex;
    flex-direction: column;
    gap: .18rem;
    min-width: 0;
}

.car-row__reg[b-uxn1mljfm8] {
    font-size: .85rem;
    font-weight: 700;
    color: var(--navy);
    font-family: 'Arial', sans-serif;
    letter-spacing: .06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.car-row__meta[b-uxn1mljfm8] {
    font-size: .68rem;
    color: var(--text-muted);
    font-family: 'Arial', sans-serif;
}

.car-row__meta-sep[b-uxn1mljfm8] {
    opacity: .5;
}

.car-row__actions[b-uxn1mljfm8] {
    display: flex;
    gap: .35rem;
    align-items: center;
}

.car-row--retired[b-uxn1mljfm8] { opacity: .55; }

.car-row--retired .car-row__reg[b-uxn1mljfm8] {
    color: var(--text-muted);
    font-weight: 600;
}

/* ── Action buttons ── */
.act-btn[b-uxn1mljfm8] {
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 6px;
    padding: 6px;
    background: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s, background .15s;
    flex-shrink: 0;
}

.act-btn svg[b-uxn1mljfm8] {
    width: 15px;
    height: 15px;
    display: block;
}

.act-btn--delete[b-uxn1mljfm8] { color: #E24B4A; }
.act-btn--delete:hover[b-uxn1mljfm8] { border-color: #f5c6c6; background: #FCEBEB; }

.act-btn--restore[b-uxn1mljfm8] { color: #27500A; }
.act-btn--restore:hover[b-uxn1mljfm8] { border-color: #B8DABB; background: #EAF3DE; }

.act-btn--edit[b-uxn1mljfm8] { color: var(--gold); }
.act-btn--edit:hover[b-uxn1mljfm8] { border-color: var(--gold); background: #FFF8EC; }

.car-row__correction-badge[b-uxn1mljfm8] {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 20px;
    background: #FAEEDA;
    color: #633806;
    white-space: nowrap;
    font-family: 'Arial', sans-serif;
}

/* ── Read-only display ── */
.readonly-field[b-uxn1mljfm8] {
    height: 36px;
    padding: .5rem .7rem;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 7px;
    font-size: .78rem;
    background: var(--warm-gray);
    color: var(--text-muted);
    font-family: 'Arial', sans-serif;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    font-weight: 600;
}

/* ── Days badge ── */
.days-badge[b-uxn1mljfm8] {
    display: inline-flex;
    align-items: center;
    font-size: .6rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 20px;
    letter-spacing: .04em;
    background: #EAF3DE;
    color: #27500A;
    text-transform: none;
}

.days-badge--warning[b-uxn1mljfm8] {
    background: #FAEEDA;
    color: #633806;
}

/* ── Photo column ── */
.photo-col[b-uxn1mljfm8] {
    display: flex;
    flex-direction: column;
}

.photo-notice[b-uxn1mljfm8] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    background: #FAEEDA;
    border: 1px solid #f0d4a8;
    border-radius: 7px;
    padding: .5rem .75rem;
    margin-bottom: .5rem;
}

.photo-notice__item[b-uxn1mljfm8] {
    font-size: .68rem;
    font-weight: 700;
    color: #633806;
    letter-spacing: .04em;
    font-family: 'Arial', sans-serif;
    text-transform: uppercase;
}

.photo-area[b-uxn1mljfm8] {
    flex: 1;
    min-height: 180px;
    border: 1.5px dashed var(--warm-gray-2);
    border-radius: var(--radius-card);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.photo-area:hover[b-uxn1mljfm8] {
    border-color: var(--accent);
    background: var(--accent-bg);
}

.photo-area--has-image[b-uxn1mljfm8] {
    border-style: solid;
    border-color: var(--accent);
    background: #000;
    max-height: 240px;
    cursor: zoom-in;
}

.photo-area--error[b-uxn1mljfm8] {
    border-color: #E24B4A;
    background: #FCEBEB;
}

.photo-area--on-file[b-uxn1mljfm8] {
    border-color: var(--warm-gray-2);
    background: var(--warm-gray);
}

.photo-area--has-doc[b-uxn1mljfm8] {
    border-color: var(--gold);
    background: #FFF8EC;
}

.photo-icon--on-file[b-uxn1mljfm8] {
    opacity: 1;
    color: #27500A;
}

.field-input--readonly[b-uxn1mljfm8] {
    background: var(--warm-gray);
    color: var(--navy);
    cursor: default;
    font-weight: 700;
    letter-spacing: .06em;
}

.photo-placeholder[b-uxn1mljfm8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding: 1.5rem;
    text-align: center;
}

.photo-icon[b-uxn1mljfm8] {
    width: 40px;
    height: 40px;
    color: var(--accent);
    opacity: .7;
}

.photo-label[b-uxn1mljfm8] {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
    font-family: 'Arial', sans-serif;
}

.photo-sub[b-uxn1mljfm8] {
    font-size: .68rem;
    color: var(--text-light);
    margin: 0;
    font-family: 'Arial', sans-serif;
}

.photo-preview[b-uxn1mljfm8] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.photo-remove[b-uxn1mljfm8] {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(226,75,74,.9);
    color: #fff;
    border: none;
    font-size: .8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: var(--transition);
}

.photo-remove:hover[b-uxn1mljfm8] {
    background: #E24B4A;
    transform: scale(1.1);
}

/* ── Action buttons ── */
.send-blockers[b-uxn1mljfm8] {
    margin: 0 0 .5rem;
    padding: .45rem .75rem .45rem 1.4rem;
    background: #FAEEDA;
    border-radius: 7px;
    font-size: .72rem;
    color: #633806;
    font-weight: 600;
    list-style: disc;
}

.send-blockers li + li[b-uxn1mljfm8] {
    margin-top: .2rem;
}

.exp-warning-notice[b-uxn1mljfm8] {
    font-size: .75rem;
    font-weight: 700;
    color: #633806;
    background: #FAEEDA;
    border-radius: 7px;
    padding: .5rem .85rem;
    margin: 0;
    letter-spacing: .03em;
}

.exp-actions[b-uxn1mljfm8] {
    display: flex;
    gap: .75rem;
}

.btn-send[b-uxn1mljfm8] {
    flex: 1;
    background: #2D8A3E;
    color: #fff;
    font-weight: 700;
    padding: 11px 18px;
    border-radius: 8px;
    font-size: .82rem;
    border: none;
    cursor: pointer;
    letter-spacing: .06em;
    font-family: 'Arial', sans-serif;
    transition: var(--transition);
}

.btn-send:hover:not(:disabled)[b-uxn1mljfm8] {
    background: #3aA84E;
}

.btn-send:disabled[b-uxn1mljfm8] {
    opacity: .5;
    cursor: not-allowed;
}

.btn-cancel[b-uxn1mljfm8] {
    flex: 1;
    background: #E24B4A;
    color: #fff;
    border: none;
    padding: .8rem 1rem;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-family: 'Arial Narrow', Arial, sans-serif;
    cursor: pointer;
    transition: opacity .2s;
}

.btn-cancel:hover[b-uxn1mljfm8] {
    opacity: .85;
}

/* ── Footer ── */
.exp-footer[b-uxn1mljfm8] {
    padding: .65rem 1.25rem;
    font-size: .62rem;
    letter-spacing: .12em;
    color: var(--text-muted);
    text-transform: uppercase;
    border-top: 1px solid var(--warm-gray-2);
    height: 32px;
    display: flex;
    align-items: center;
    font-family: 'Arial', sans-serif;
}

/* ── Time drum pickers ── */
.time-wheels[b-uxn1mljfm8] {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.time-wheels[b-uxn1mljfm8]  .drum-wrap {
    flex: 1;
}

.time-wheel__sep[b-uxn1mljfm8] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--navy);
    flex-shrink: 0;
}

/* ── Full-screen image viewer ── */
.photo-fullscreen[b-uxn1mljfm8] {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(0,0,0,.92);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-uxn1mljfm8 .18s ease;
    cursor: zoom-out;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.photo-fullscreen__img[b-uxn1mljfm8] {
    max-width: 96vw;
    max-height: 96dvh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0,0,0,.6);
}

.photo-fullscreen__download[b-uxn1mljfm8] {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.photo-fullscreen__download svg[b-uxn1mljfm8] { width: 14px; height: 14px; }

.photo-fullscreen__download:hover[b-uxn1mljfm8] { background: rgba(255,255,255,.28); }

.photo-fullscreen__close[b-uxn1mljfm8] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.photo-fullscreen__close:hover[b-uxn1mljfm8] {
    background: rgba(255,255,255,.28);
}

/* ── Crop modal ── */
.crop-overlay[b-uxn1mljfm8] {
    position: fixed;
    inset: 0;
    background: rgba(27,42,74,.35);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn-b-uxn1mljfm8 .18s ease;
}

.crop-card[b-uxn1mljfm8] {
    background: #fff;
    border-radius: 12px;
    max-width: 420px;
    width: 92%;
    box-shadow: 0 8px 40px rgba(0,0,0,.35);
    animation: fadeScaleIn-b-uxn1mljfm8 .2s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.crop-processing-overlay[b-uxn1mljfm8] {
    position: absolute;
    inset: 0;
    background: rgba(27,42,74,.6);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.crop-spinner[b-uxn1mljfm8] {
    width: 34px;
    height: 34px;
    border: 3px solid rgba(255,255,255,.25);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin-b-uxn1mljfm8 .65s linear infinite;
}

.crop-processing-label[b-uxn1mljfm8] {
    margin-top: .7rem;
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .05em;
    font-family: Arial, sans-serif;
}

@keyframes fadeScaleIn-b-uxn1mljfm8 {
    from { opacity: 0; transform: scale(.95); }
    to   { opacity: 1; transform: scale(1); }
}

.crop-header[b-uxn1mljfm8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1.1rem;
    background: var(--navy);
    border-radius: 12px 12px 0 0;
    flex-shrink: 0;
}

.crop-header__title[b-uxn1mljfm8] {
    font-size: .88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #fff;
    font-family: Arial, sans-serif;
}

.crop-header__close[b-uxn1mljfm8] {
    background: none;
    border: none;
    color: rgba(255,255,255,.7);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 4px;
    transition: background .18s;
}

.crop-header__close:hover[b-uxn1mljfm8] { background: rgba(255,255,255,.15); }

.crop-body[b-uxn1mljfm8] {
    height: 55vh;
    max-height: 55vh;
    overflow: hidden;
    background: #111;
    position: relative;
    contain: strict;
    transform: translateZ(0);
}

.crop-body img[b-uxn1mljfm8] { display: block; max-width: 100%; }

.crop-footer[b-uxn1mljfm8] {
    display: flex;
    gap: .6rem;
    justify-content: flex-end;
    padding: .85rem 1.1rem;
    border-top: 1px solid var(--warm-gray-2);
    flex-shrink: 0;
}

.btn-crop-cancel[b-uxn1mljfm8] {
    background: transparent;
    color: var(--text-muted);
    border: 0.5px solid var(--warm-gray-2);
    padding: 9px 18px;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    font-family: Arial, sans-serif;
    transition: border-color .18s, color .18s;
}

.btn-crop-cancel:hover[b-uxn1mljfm8] { border-color: var(--navy); color: var(--navy); }

.btn-crop-confirm[b-uxn1mljfm8] {
    background: var(--gold);
    color: var(--navy);
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 8px;
    border: none;
    font-size: .78rem;
    font-family: Arial, sans-serif;
    cursor: pointer;
    letter-spacing: .04em;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    transition: background .18s;
}

.btn-crop-confirm:hover[b-uxn1mljfm8] { background: var(--gold-light); }
.btn-crop-confirm:disabled[b-uxn1mljfm8] { opacity: .45; cursor: not-allowed; }
.btn-crop-confirm--busy[b-uxn1mljfm8] { opacity: 1 !important; }

.btn-crop-spinner[b-uxn1mljfm8] {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(27,42,74,.25);
    border-top-color: var(--navy);
    border-radius: 50%;
    animation: spin-b-uxn1mljfm8 .6s linear infinite;
    flex-shrink: 0;
}

/* ── Retire/Delete confirmation modal ── */
.confirm-overlay[b-uxn1mljfm8] {
    position: fixed;
    inset: 0;
    background: rgba(27,42,74,.35);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn-b-uxn1mljfm8 .18s ease;
}

.confirm-overlay--danger[b-uxn1mljfm8] { background: rgba(27,42,74,.45); }

.confirm-card[b-uxn1mljfm8] {
    background: #fff;
    border-radius: 12px;
    max-width: 380px;
    width: 92%;
    box-shadow: 0 8px 40px rgba(0,0,0,.35);
    animation: fadeScaleIn-b-uxn1mljfm8 .2s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}

.confirm-card__header[b-uxn1mljfm8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem;
    background: var(--navy);
    border-radius: 12px 12px 0 0;
}

.confirm-card__header--danger[b-uxn1mljfm8] { background: #E24B4A; }

.confirm-card__title[b-uxn1mljfm8] {
    font-size: .88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #fff;
    font-family: Arial, sans-serif;
}

.confirm-card__close[b-uxn1mljfm8] {
    background: none;
    border: none;
    color: rgba(255,255,255,.7);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 4px;
    transition: background .18s;
}

.confirm-card__close:hover[b-uxn1mljfm8] { background: rgba(255,255,255,.15); }

.confirm-card__body[b-uxn1mljfm8] {
    padding: 1.1rem 1.25rem;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--navy);
    font-family: Arial, sans-serif;
}

.confirm-card__body p[b-uxn1mljfm8] { margin: 0 0 .5rem; }
.confirm-card__body p:last-child[b-uxn1mljfm8] { margin-bottom: 0; }

.confirm-card__hint[b-uxn1mljfm8] { color: var(--text-muted); font-size: .74rem; }

.confirm-card__footer[b-uxn1mljfm8] {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    padding: .9rem 1.25rem;
    border-top: 1px solid var(--warm-gray-2);
}

.btn-confirm-danger[b-uxn1mljfm8] {
    background: #E24B4A;
    color: #fff;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: .82rem;
    border: none;
    cursor: pointer;
    font-family: Arial, sans-serif;
    transition: background .18s;
}

.btn-confirm-danger:hover[b-uxn1mljfm8] { background: #c93f3e; }

/* ── Mileage correction form ── */
.correction-form[b-uxn1mljfm8] {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: 1rem 1.25rem 1.25rem;
}

.correction-form__current[b-uxn1mljfm8] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    background: var(--warm-gray);
    border: 0.5px solid var(--warm-gray-2);
    border-radius: var(--radius-card);
    padding: .65rem .85rem;
}

.correction-form__current-value[b-uxn1mljfm8] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy);
    font-family: 'Georgia', serif;
}

.correction-photo-area[b-uxn1mljfm8] {
    min-height: 140px;
}

.correction-form__actions[b-uxn1mljfm8] {
    display: flex;
    gap: .6rem;
    margin-top: .25rem;
}

/* ── Responsive ── */
@media (min-width: 560px) {
    .exp-grid[b-uxn1mljfm8] {
        flex-direction: row;
        align-items: flex-start;
    }

    .exp-fields[b-uxn1mljfm8] {
        flex: 1;
    }

    .photo-col[b-uxn1mljfm8] {
        width: 220px;
        flex-shrink: 0;
    }

    .photo-area[b-uxn1mljfm8] {
        min-height: 260px;
    }
}

@media (max-width: 480px) {
    .field-row--3[b-uxn1mljfm8] {
        grid-template-columns: 1fr;
    }

    .field-row--2[b-uxn1mljfm8] {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 640px) {
    .hero[b-uxn1mljfm8] {
        padding: 2rem 2rem 2.8rem;
    }

    .hero__name[b-uxn1mljfm8] {
        font-size: 1.7rem;
    }

    .exp-content[b-uxn1mljfm8] {
        padding: 1.75rem 2rem;
    }
}

@media (min-width: 900px) {
    .car-exp-wrapper[b-uxn1mljfm8] {
        box-shadow: 0 0 0 1px var(--warm-gray-2);
    }

    .exp-content[b-uxn1mljfm8] {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
}
/* /Pages/ChangePassword.razor.rz.scp.css */
/* ============================================================
   ChangePassword.razor.css — HB-Staff Change Password
   Mobile-first · Navy / Gold / Warm-Gray palette
   ============================================================ */

/* ── Wrapper ─────────────────────────────────────────────── */
.cp-wrapper[b-kdftxky442] {
    font-family: 'Arial Narrow', Arial, sans-serif;
    background: #F4F1EC;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}


/* ── Hero ────────────────────────────────────────────────── */
.hero[b-kdftxky442] {
    padding: 1.5rem 1.5rem 2.2rem;
    min-height: 148px;
    background: #1B2A4A;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.hero-arc[b-kdftxky442] {
    position: absolute;
    bottom: -1px;
    left: -5%;
    width: 110%;
    height: 32px;
    background: #F4F1EC;
    border-radius: 50% 50% 0 0;
}

.hero__greeting[b-kdftxky442] {
    font-size: .75rem;
    color: #E2C07A;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .2rem;
    font-family: 'Arial Narrow', Arial, sans-serif;
}

.hero__name[b-kdftxky442] {
    font-size: 1.4rem;
    font-weight: 700;
    font-family: Georgia, serif;
    line-height: 1.15;
    color: #fff;
    margin-bottom: .15rem;
}

.hero__sub[b-kdftxky442] {
    font-size: .78rem;
    color: rgba(255,255,255,.55);
    font-family: Arial, sans-serif;
}

/* ── Body ────────────────────────────────────────────────── */
.cp-body[b-kdftxky442] {
    flex: 1;
    padding: 1.75rem 1.25rem 1.5rem;
}

.cp-card[b-kdftxky442] {
    background: #fff;
    border: 0.5px solid #EAE6DF;
    border-radius: 10px;
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* ── Fields ──────────────────────────────────────────────── */
.cp-field[b-kdftxky442] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.cp-label[b-kdftxky442] {
    font-size: .72rem;
    font-weight: 600;
    color: #1B2A4A;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
}

.cp-req[b-kdftxky442] { color: #E24B4A; }

.pw-wrap[b-kdftxky442] {
    position: relative;
    display: flex;
    align-items: center;
}

.cp-input[b-kdftxky442] {
    width: 100%;
    padding: 6px 36px 6px 10px;
    border: 0.5px solid #EAE6DF;
    border-radius: 7px;
    font-size: .75rem;
    font-family: Arial, sans-serif;
    color: #1B2A4A;
    background: #fff;
    outline: none;
    transition: border-color .18s;
    box-sizing: border-box;
}

.cp-input:focus[b-kdftxky442]        { border-color: #C9A84C; }
.cp-input--error[b-kdftxky442]       { border-color: #E24B4A; }

.pw-toggle[b-kdftxky442] {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #6B7A99;
    display: flex;
    align-items: center;
}

.pw-toggle svg[b-kdftxky442] { width: 16px; height: 16px; }

/* ── Password requirements ───────────────────────────────── */
.pw-requirements[b-kdftxky442] {
    list-style: none;
    padding: 0;
    margin: .15rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .75rem;
}

.pw-requirements li[b-kdftxky442] {
    font-size: .68rem;
    font-family: Arial, sans-serif;
    padding-left: 1rem;
    position: relative;
}

.pw-requirements li[b-kdftxky442]::before {
    content: '✕';
    position: absolute;
    left: 0;
    font-size: .6rem;
}

.req--met[b-kdftxky442]            { color: #27500A; }
.req--unmet[b-kdftxky442]          { color: #6B7A99; }
.req--met[b-kdftxky442]::before    { content: '✓'; }
.req--unmet[b-kdftxky442]::before  { content: '✕'; }

/* ── Hints / errors ──────────────────────────────────────── */
.cp-hint-error[b-kdftxky442] {
    font-size: .7rem;
    color: #E24B4A;
    font-family: Arial, sans-serif;
}

.cp-error[b-kdftxky442] {
    font-size: .78rem;
    color: #E24B4A;
    background: #FCEBEB;
    border-radius: 6px;
    padding: .5rem .75rem;
    font-family: Arial, sans-serif;
}

/* ── Submit button ───────────────────────────────────────── */
.cp-btn[b-kdftxky442] {
    width: 100%;
    background: #C9A84C;
    color: #1B2A4A;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: .78rem;
    font-weight: 700;
    font-family: Arial, sans-serif;
    cursor: pointer;
    transition: background .18s;
    margin-top: .25rem;
    letter-spacing: .04em;
}

.cp-btn:hover:not(:disabled)[b-kdftxky442] { background: #E2C07A; }
.cp-btn:disabled[b-kdftxky442]              { opacity: .5; cursor: not-allowed; }

/* ── Success state ───────────────────────────────────────── */
.cp-success[b-kdftxky442] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 1rem 0;
    text-align: center;
}

.cp-success__icon[b-kdftxky442] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #EAF3DE;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #27500A;
}

.cp-success__icon svg[b-kdftxky442] { width: 28px; height: 28px; }

.cp-success__title[b-kdftxky442] {
    font-family: Georgia, serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1B2A4A;
}

.cp-success__sub[b-kdftxky442] {
    font-size: .8rem;
    color: #6B7A99;
    margin: 0;
    font-family: Arial, sans-serif;
}

/* ── Footer ──────────────────────────────────────────────── */

/* ── Tablet ──────────────────────────────────────────────── */
@media (min-width: 640px) {
    .hero[b-kdftxky442]      { padding: 2rem 2rem 2.5rem; min-height: 178px; }
    .hero__name[b-kdftxky442] { font-size: 1.7rem; }
    .cp-body[b-kdftxky442]   { padding: 2rem 2rem 1.5rem; }
    .cp-card[b-kdftxky442]   { padding: 2rem 1.75rem; max-width: 480px; margin: 0 auto; width: 100%; }
}

/* ── Desktop ─────────────────────────────────────────────── */
@media (min-width: 860px) {
    .hero[b-kdftxky442]       { padding: 2.5rem 2rem 2.5rem; min-height: 200px; }
    .hero__name[b-kdftxky442] { font-size: 2rem; }
}
/* /Pages/DailyExp.razor.rz.scp.css */
/* ── Design tokens ── */
.daily-exp-wrapper[b-8hp5ctxryx] {
    --navy:        #1B2A4A;
    --navy-light:  #243560;
    --navy-dark:   #111d33;
    --gold:        #C9A84C;
    --gold-light:  #E2C07A;
    --gold-muted:  #F5D98A;
    --warm-gray:   #F4F1EC;
    --warm-gray-2: #EAE6DF;
    --text-muted:  #6B7A99;
    --text-light:  #aab0c0;
    --radius-card: 10px;
    --transition:  all .2s cubic-bezier(.4,0,.2,1);
    --accent:      #0F6E56;
    --accent-light:#2A7A5A;
    --accent-bg:   rgba(15,110,86,.08);

    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--warm-gray);
    position: relative;
}

/* ── Overlays & toasts ── */
.send-overlay[b-8hp5ctxryx] {
    position: fixed;
    inset: 0;
    background: rgba(27,42,74,.45);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 400;
}

.send-overlay__spinner[b-8hp5ctxryx] {
    width: 38px;
    height: 38px;
    border: 3px solid rgba(255,255,255,.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-8hp5ctxryx .65s linear infinite;
}

.send-overlay__label[b-8hp5ctxryx] {
    margin-top: .85rem;
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .05em;
}

@keyframes spin-b-8hp5ctxryx {
    to { transform: rotate(360deg); }
}

.toast[b-8hp5ctxryx] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.25rem;
    z-index: 400;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    border-left: 4px solid var(--accent);
    border-radius: 8px;
    padding: .65rem 1rem;
    font-size: .78rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    animation: fadeIn-b-8hp5ctxryx .18s ease;
}

.toast--success[b-8hp5ctxryx] { border-left-color: #27500A; color: #27500A; }
.toast--error[b-8hp5ctxryx]   { border-left-color: #E24B4A; color: #E24B4A; }

@keyframes fadeIn-b-8hp5ctxryx {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero ── */
.hero[b-8hp5ctxryx] {
    position: relative;
    padding: 1.5rem 1.5rem 2.4rem;
    background: var(--accent);
    color: #fff;
    overflow: hidden;
}

.hero__greeting[b-8hp5ctxryx] {
    font-size: .72rem;
    color: rgba(255,255,255,.7);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-family: 'Arial', sans-serif;
    font-weight: 600;
    margin: 0 0 .35rem;
}

.hero__name[b-8hp5ctxryx] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    font-family: 'Georgia', serif;
    margin: 0 0 .3rem;
    line-height: 1.2;
}

.hero__sub[b-8hp5ctxryx] {
    font-size: .78rem;
    color: rgba(255,255,255,.6);
    font-family: 'Arial', sans-serif;
    margin: 0;
}

.hero-arc[b-8hp5ctxryx] {
    position: absolute;
    bottom: -1px;
    left: -5%;
    width: 110%;
    height: 32px;
    background: var(--warm-gray);
    border-radius: 50% 50% 0 0;
}

/* ── Content ── */
.exp-content[b-8hp5ctxryx] {
    flex: 1;
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
}

.exp-form[b-8hp5ctxryx] {
    background: #fff;
    border-radius: var(--radius-card);
    padding: 1.5rem;
    box-shadow: 0 1px 4px rgba(27,42,74,.07);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ── Two-column grid ── */
.exp-grid[b-8hp5ctxryx] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.exp-fields[b-8hp5ctxryx] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Field rows ── */
.field-row[b-8hp5ctxryx] {
    display: grid;
    gap: .75rem;
}

.field-row--2[b-8hp5ctxryx] { grid-template-columns: 1fr 1fr; }
.field-row--3[b-8hp5ctxryx] { grid-template-columns: 1fr 1fr 1fr; }

.field-group[b-8hp5ctxryx] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.field-label[b-8hp5ctxryx] {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    font-family: 'Arial', sans-serif;
}

.field-required[b-8hp5ctxryx] {
    color: #E24B4A;
}

.field-input[b-8hp5ctxryx] {
    padding: .5rem .7rem;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 7px;
    font-size: .78rem;
    background: #fff;
    color: var(--navy);
    font-family: 'Arial', sans-serif;
    transition: var(--transition);
    height: 36px;
    box-sizing: border-box;
}

.field-input[type="date"][b-8hp5ctxryx] {
    height: auto;
    min-height: 44px;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
}

.field-input:focus[b-8hp5ctxryx] {
    outline: none;
    border-color: var(--accent);
    background: #fff;
}

.field-input:disabled[b-8hp5ctxryx] {
    background: var(--warm-gray);
    color: var(--text-muted);
    border-color: var(--warm-gray-2);
    cursor: default;
    opacity: 1;
}

.field-input--error[b-8hp5ctxryx] {
    border-color: #E24B4A;
    background: #FCEBEB;
}

.field-input[b-8hp5ctxryx]::placeholder {
    color: var(--text-light);
}

.field-textarea[b-8hp5ctxryx] {
    height: auto;
    resize: vertical;
    min-height: 90px;
    line-height: 1.5;
}

.field-error-msg[b-8hp5ctxryx] {
    font-size: .68rem;
    color: #E24B4A;
    font-weight: 600;
    letter-spacing: .03em;
}

.field-warn-msg[b-8hp5ctxryx] {
    font-size: .68rem;
    color: #633806;
    font-weight: 600;
    letter-spacing: .03em;
}

.field-hint-msg[b-8hp5ctxryx] {
    font-size: .68rem;
    color: var(--accent);
    font-weight: 600;
    letter-spacing: .03em;
}

/* ── Photo column ── */
.photo-col[b-8hp5ctxryx] {
    display: flex;
    flex-direction: column;
}

.photo-notice[b-8hp5ctxryx] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    background: #FAEEDA;
    border: 1px solid #f0d4a8;
    border-radius: 7px;
    padding: .5rem .75rem;
    margin-bottom: .5rem;
}

.photo-notice__item[b-8hp5ctxryx] {
    font-size: .68rem;
    font-weight: 700;
    color: #633806;
    letter-spacing: .04em;
    font-family: 'Arial', sans-serif;
    text-transform: uppercase;
}

.photo-area[b-8hp5ctxryx] {
    flex: 1;
    min-height: 180px;
    border: 1.5px dashed var(--warm-gray-2);
    border-radius: var(--radius-card);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.photo-area:hover[b-8hp5ctxryx] {
    border-color: var(--accent);
    background: var(--accent-bg);
}

.photo-area--has-image[b-8hp5ctxryx] {
    border-style: solid;
    border-color: var(--accent);
    background: #000;
    max-height: 240px;
    cursor: zoom-in;
}

.photo-area--error[b-8hp5ctxryx] {
    border-color: #E24B4A;
    background: #FCEBEB;
}

.photo-area--on-file[b-8hp5ctxryx] {
    border-color: var(--warm-gray-2);
    background: var(--warm-gray);
}

.photo-area--has-doc[b-8hp5ctxryx] {
    border-color: var(--gold);
    background: #FFF8EC;
}

.photo-icon--on-file[b-8hp5ctxryx] {
    opacity: 1;
    color: #27500A;
}

.photo-placeholder[b-8hp5ctxryx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding: 1.5rem;
    text-align: center;
}

.photo-icon[b-8hp5ctxryx] {
    width: 40px;
    height: 40px;
    color: var(--accent);
    opacity: .7;
}

.photo-label[b-8hp5ctxryx] {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
    font-family: 'Arial', sans-serif;
}

.photo-sub[b-8hp5ctxryx] {
    font-size: .68rem;
    color: var(--text-light);
    margin: 0;
    font-family: 'Arial', sans-serif;
}

.photo-preview[b-8hp5ctxryx] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.photo-remove[b-8hp5ctxryx] {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(226,75,74,.9);
    color: #fff;
    border: none;
    font-size: .8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: var(--transition);
}

.photo-remove:hover[b-8hp5ctxryx] {
    background: #E24B4A;
    transform: scale(1.1);
}

/* ── Action buttons ── */
.exp-warning-notice[b-8hp5ctxryx] {
    font-size: .75rem;
    font-weight: 700;
    color: #633806;
    background: #FAEEDA;
    border-radius: 7px;
    padding: .5rem .85rem;
    margin: 0;
    letter-spacing: .03em;
}

.send-blockers[b-8hp5ctxryx] {
    margin: 0;
    padding: .45rem .75rem .45rem 1.4rem;
    background: #FAEEDA;
    border-radius: 7px;
    font-size: .72rem;
    color: #633806;
    font-weight: 600;
    list-style: disc;
}

.send-blockers li + li[b-8hp5ctxryx] {
    margin-top: .2rem;
}

.exp-actions[b-8hp5ctxryx] {
    display: flex;
    gap: .75rem;
}

.btn-send[b-8hp5ctxryx] {
    flex: 1;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    padding: 11px 18px;
    border-radius: 8px;
    font-size: .82rem;
    border: none;
    cursor: pointer;
    letter-spacing: .06em;
    font-family: 'Arial', sans-serif;
    transition: var(--transition);
}

.btn-send:hover:not(:disabled)[b-8hp5ctxryx] {
    background: var(--accent-light);
}

.btn-send:disabled[b-8hp5ctxryx] {
    opacity: .5;
    cursor: not-allowed;
}

.btn-cancel[b-8hp5ctxryx] {
    flex: 1;
    background: #E24B4A;
    color: #fff;
    border: none;
    padding: .8rem 1rem;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-family: 'Arial Narrow', Arial, sans-serif;
    cursor: pointer;
    transition: opacity .2s;
}

.btn-cancel:hover[b-8hp5ctxryx] {
    opacity: .85;
}

/* ── Footer ── */
.exp-footer[b-8hp5ctxryx] {
    padding: .65rem 1.25rem;
    font-size: .62rem;
    letter-spacing: .12em;
    color: var(--text-muted);
    text-transform: uppercase;
    border-top: 1px solid var(--warm-gray-2);
    height: 32px;
    display: flex;
    align-items: center;
    font-family: 'Arial', sans-serif;
}

/* ── Responsive ── */
@media (min-width: 560px) {
    .exp-grid[b-8hp5ctxryx] {
        flex-direction: row;
        align-items: flex-start;
    }

    .exp-fields[b-8hp5ctxryx] {
        flex: 1;
    }

    .photo-col[b-8hp5ctxryx] {
        width: 220px;
        flex-shrink: 0;
    }

    .photo-area[b-8hp5ctxryx] {
        min-height: 260px;
    }
}

@media (max-width: 480px) {
    .field-row--3[b-8hp5ctxryx] {
        grid-template-columns: 1fr;
    }

    .field-row--2[b-8hp5ctxryx] {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 640px) {
    .hero[b-8hp5ctxryx] {
        padding: 2rem 2rem 2.8rem;
    }

    .hero__name[b-8hp5ctxryx] {
        font-size: 1.7rem;
    }

    .exp-content[b-8hp5ctxryx] {
        padding: 1.75rem 2rem;
    }
}

@media (min-width: 900px) {
    .daily-exp-wrapper[b-8hp5ctxryx] {
        box-shadow: 0 0 0 1px var(--warm-gray-2);
    }

    .exp-content[b-8hp5ctxryx] {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
}


/* ── Time drum pickers ── */
.time-wheels[b-8hp5ctxryx] {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.time-wheels[b-8hp5ctxryx]  .drum-wrap {
    flex: 1;
}

.time-wheel__sep[b-8hp5ctxryx] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--navy);
    flex-shrink: 0;
}

/* ── Crop modal ── */
/* ── Full-screen image viewer ── */
.photo-fullscreen[b-8hp5ctxryx] {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(0,0,0,.92);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-8hp5ctxryx .18s ease;
    cursor: zoom-out;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.photo-fullscreen__img[b-8hp5ctxryx] {
    max-width: 96vw;
    max-height: 96dvh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0,0,0,.6);
}

.photo-fullscreen__download[b-8hp5ctxryx] {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.photo-fullscreen__download svg[b-8hp5ctxryx] { width: 14px; height: 14px; }

.photo-fullscreen__download:hover[b-8hp5ctxryx] { background: rgba(255,255,255,.28); }

.photo-fullscreen__close[b-8hp5ctxryx] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.photo-fullscreen__close:hover[b-8hp5ctxryx] {
    background: rgba(255,255,255,.28);
}

.crop-overlay[b-8hp5ctxryx] {
    position: fixed;
    inset: 0;
    background: rgba(27,42,74,.35);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn-b-8hp5ctxryx .18s ease;
}

.crop-card[b-8hp5ctxryx] {
    background: #fff;
    border-radius: 12px;
    max-width: 420px;
    width: 92%;
    box-shadow: 0 8px 40px rgba(0,0,0,.35);
    animation: fadeScaleIn-b-8hp5ctxryx .2s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.crop-processing-overlay[b-8hp5ctxryx] {
    position: absolute;
    inset: 0;
    background: rgba(27,42,74,.6);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.crop-spinner[b-8hp5ctxryx] {
    width: 34px;
    height: 34px;
    border: 3px solid rgba(255,255,255,.25);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin-b-8hp5ctxryx .65s linear infinite;
}

.crop-processing-label[b-8hp5ctxryx] {
    margin-top: .7rem;
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .05em;
    font-family: Arial, sans-serif;
}

@keyframes fadeScaleIn-b-8hp5ctxryx {
    from { opacity: 0; transform: scale(.95); }
    to   { opacity: 1; transform: scale(1); }
}

.crop-header[b-8hp5ctxryx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1.1rem;
    background: var(--navy);
    border-radius: 12px 12px 0 0;
    flex-shrink: 0;
}

.crop-header__title[b-8hp5ctxryx] {
    font-size: .88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #fff;
    font-family: Arial, sans-serif;
}

.crop-header__close[b-8hp5ctxryx] {
    background: none;
    border: none;
    color: rgba(255,255,255,.7);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 4px;
    transition: background .18s;
}

.crop-header__close:hover[b-8hp5ctxryx] { background: rgba(255,255,255,.15); }

.crop-body[b-8hp5ctxryx] {
    height: 55vh;
    max-height: 55vh;
    overflow: hidden;
    background: #111;
    position: relative;
    contain: strict;
    transform: translateZ(0);
}

.crop-body img[b-8hp5ctxryx] { display: block; max-width: 100%; }

.crop-footer[b-8hp5ctxryx] {
    display: flex;
    gap: .6rem;
    justify-content: flex-end;
    padding: .85rem 1.1rem;
    border-top: 1px solid var(--warm-gray-2);
    flex-shrink: 0;
}

.btn-crop-cancel[b-8hp5ctxryx] {
    background: transparent;
    color: var(--text-muted);
    border: 0.5px solid var(--warm-gray-2);
    padding: 9px 18px;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    font-family: Arial, sans-serif;
    transition: border-color .18s, color .18s;
}

.btn-crop-cancel:hover[b-8hp5ctxryx] { border-color: var(--navy); color: var(--navy); }

.btn-crop-confirm[b-8hp5ctxryx] {
    background: var(--gold);
    color: var(--navy);
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 8px;
    border: none;
    font-size: .78rem;
    font-family: Arial, sans-serif;
    cursor: pointer;
    letter-spacing: .04em;
    transition: background .18s;
}

.btn-crop-confirm[b-8hp5ctxryx] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.btn-crop-confirm:hover[b-8hp5ctxryx] { background: var(--gold-light); }

.btn-crop-confirm:disabled[b-8hp5ctxryx] { opacity: .45; cursor: not-allowed; }

.btn-crop-confirm--busy[b-8hp5ctxryx] { opacity: 1 !important; }

.btn-crop-spinner[b-8hp5ctxryx] {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(27,42,74,.25);
    border-top-color: var(--navy);
    border-radius: 50%;
    animation: spin-b-8hp5ctxryx .6s linear infinite;
    flex-shrink: 0;
}
/* /Pages/Dars.razor.rz.scp.css */
/* ── Design tokens ── */
.dars-wrapper[b-soitebcb88] {
    --navy:        #1B2A4A;
    --navy-light:  #243560;
    --navy-dark:   #111d33;
    --gold:        #C9A84C;
    --gold-light:  #E2C07A;
    --warm-gray:   #F4F1EC;
    --warm-gray-2: #EAE6DF;
    --text-muted:  #6B7A99;
    --radius-card: 10px;
    --transition:  all .2s cubic-bezier(.4,0,.2,1);
}

/* ── Wrapper ── */
.dars-wrapper[b-soitebcb88] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--warm-gray);
    font-family: Arial, sans-serif;
    overflow-x: hidden;
}


/* ── Hero ── */
.hero[b-soitebcb88] {
    padding: 1.5rem 1.5rem 2.2rem;
    min-height: 148px;
    background: var(--navy);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.hero__greeting[b-soitebcb88] {
    font-size: .75rem;
    color: var(--gold-light);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-family: 'Arial Narrow', Arial, sans-serif;
    margin-bottom: .2rem;
}
.hero__name[b-soitebcb88] {
    font-size: 1.4rem;
    font-weight: 700;
    font-family: Georgia, serif;
    line-height: 1.15;
    color: #fff;
    margin-bottom: .15rem;
}
.hero__sub[b-soitebcb88] {
    font-size: .78rem;
    color: rgba(255,255,255,.55);
    font-family: Arial, sans-serif;
    margin: 0;
}
.hero-arc[b-soitebcb88] {
    position: absolute;
    bottom: -1px;
    left: -5%;
    width: 110%;
    height: 32px;
    background: var(--warm-gray);
    border-radius: 50% 50% 0 0;
}

/* ── Content ── */
.dars-content[b-soitebcb88] {
    flex: 1;
    padding: 1.25rem 1rem 2rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

/* ── Activity Strip ── */
.activity-strip[b-soitebcb88] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.activity-strip__box[b-soitebcb88] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 4px;
    border-radius: 7px;
    border: 0.5px solid var(--warm-gray-2);
    background: #fff;
    transition: border-color .15s cubic-bezier(.4,0,.2,1);
    min-width: 0;
}

.activity-strip__box--off[b-soitebcb88] {
    background: var(--warm-gray-2);
    border-color: transparent;
    opacity: 0.55;
}

.activity-strip__box--worked[b-soitebcb88] {
    background: #EAF3DE;
    border-color: #B8DABB;
}

.activity-strip__box--skeleton[b-soitebcb88] {
    background: var(--warm-gray-2);
    border-color: transparent;
    animation: shimmer-b-soitebcb88 1.4s ease infinite;
}

.activity-strip__day[b-soitebcb88] {
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    font-family: 'Arial Narrow', Arial, sans-serif;
}

.activity-strip__box--worked .activity-strip__day[b-soitebcb88] { color: #27500A; }
.activity-strip__box--off    .activity-strip__day[b-soitebcb88] { color: #aab0c0; }

.activity-strip__date[b-soitebcb88] {
    font-size: .78rem;
    font-weight: 700;
    color: var(--navy);
    font-family: Georgia, serif;
    line-height: 1;
}

.activity-strip__box--worked .activity-strip__date[b-soitebcb88] { color: #27500A; }
.activity-strip__box--off    .activity-strip__date[b-soitebcb88] { color: var(--text-muted); }

.activity-strip__hours[b-soitebcb88] {
    font-size: .6rem;
    font-weight: 600;
    color: #27500A;
    min-height: .8rem;
    letter-spacing: .02em;
}

@keyframes shimmer-b-soitebcb88 {
    0%, 100% { opacity: 0.55; }
    50%       { opacity: 0.9; }
}

/* ── Date Card ── */
.date-card[b-soitebcb88] {
    background: #fff;
    border: .5px solid var(--warm-gray-2);
    border-radius: var(--radius-card);
    padding: .9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.date-sub-row[b-soitebcb88] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
}

/* ── Field primitives ── */
.field-group[b-soitebcb88] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.field-label[b-soitebcb88] {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    font-family: 'Arial Narrow', Arial, sans-serif;
}

.field-input[b-soitebcb88] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: .5rem .7rem;
    border: .5px solid var(--warm-gray-2);
    border-radius: 7px;
    font-size: .78rem;
    color: var(--navy);
    background: #fff;
    outline: none;
    font-family: Arial, sans-serif;
    transition: border-color .18s;
    appearance: none;
    -webkit-appearance: none;
    overflow: hidden;
    text-overflow: ellipsis;
}
.field-input:focus[b-soitebcb88] { border-color: var(--gold); }
.field-input--error[b-soitebcb88] { border-color: #E24B4A; background: #FCEBEB; }
.field-input--error:focus[b-soitebcb88] { border-color: #E24B4A; }
.field-input:disabled[b-soitebcb88] { opacity: .45; cursor: not-allowed; background: var(--warm-gray); }

.field-required[b-soitebcb88] { color: #E24B4A; margin-left: 2px; }

.field-error-msg[b-soitebcb88] {
    font-size: .62rem;
    color: #E24B4A;
    font-weight: 600;
    letter-spacing: .04em;
}

.toggle-row[b-soitebcb88] {
    display: flex;
    align-items: center;
    gap: .55rem;
    cursor: pointer;
    padding: .55rem .75rem;
    background: var(--warm-gray);
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 8px;
    transition: border-color .18s cubic-bezier(.4,0,.2,1);
}
.toggle-row:hover[b-soitebcb88] { border-color: var(--gold); }

.toggle-label[b-soitebcb88] {
    font-size: .75rem;
    color: var(--navy);
    font-family: 'Arial', sans-serif;
}

.num-fields-error[b-soitebcb88] {
    margin-right: auto;
    align-self: center;
}

.field-textarea[b-soitebcb88] {
    resize: vertical;
    min-height: 56px;
}

.field-chip[b-soitebcb88] {
    padding: .5rem .7rem;
    border: .5px solid var(--warm-gray-2);
    border-radius: 7px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--navy);
    background: var(--warm-gray);
    font-family: Arial, sans-serif;
    text-transform: capitalize;
    min-height: 34px;
    display: flex;
    align-items: center;
}

/* ── Field rows ── */
.field-row[b-soitebcb88] {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

/* ── Task list ── */
.task-list-section[b-soitebcb88] {
    background: #fff;
    border: .5px solid var(--warm-gray-2);
    border-radius: var(--radius-card);
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.task-list__heading[b-soitebcb88] {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    font-family: 'Arial Narrow', Arial, sans-serif;
    margin: 0 0 .1rem;
}

.task-list__empty[b-soitebcb88] {
    font-size: .72rem;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
    font-style: italic;
    margin: .1rem 0 0;
}

.task-chip[b-soitebcb88] {
    display: flex;
    flex-direction: column;
    background: var(--warm-gray);
    border: .5px solid var(--warm-gray-2);
    border-radius: 7px;
    padding: .5rem .75rem;
    gap: 0;
    overflow: hidden;
    min-width: 0;
    transition: border-color .15s;
}
.task-chip--open[b-soitebcb88] { border-color: var(--navy); }

.task-chip__body[b-soitebcb88] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    font-size: .72rem;
    color: var(--navy);
    min-width: 0;
    overflow: hidden;
}

.task-chip__time[b-soitebcb88] {
    font-weight: 700;
    font-family: 'Arial Narrow', Arial, sans-serif;
    letter-spacing: .04em;
    flex-shrink: 0;
}
.task-chip__cat[b-soitebcb88]  { color: var(--navy); word-break: break-word; }
.task-chip__code[b-soitebcb88] { color: var(--text-muted); overflow-wrap: break-word; word-break: break-word; min-width: 0; }
.task-chip__loc[b-soitebcb88]  { color: var(--text-muted); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100px; }
.task-chip__sep[b-soitebcb88]  { color: var(--warm-gray-2); flex-shrink: 0; }
.task-chip__sep--dash[b-soitebcb88] { color: var(--text-muted); }

@media (max-width: 479px) {
    .task-chip__cat[b-soitebcb88],
    .task-chip__sep--cat[b-soitebcb88],
    .task-chip__loc[b-soitebcb88],
    .task-chip__sep--loc[b-soitebcb88] { display: none; }
}

.task-chip__tag[b-soitebcb88] {
    font-size: .6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: .05em;
    flex-shrink: 0;
}
.task-chip__tag--task[b-soitebcb88]   { background: #EAF0FA; color: #1B2A4A; border: .5px solid #BDD0EF; }
.task-chip__tag--travel[b-soitebcb88] { background: #FAEEDA; color: #633806; border: .5px solid #e8c97a; }

.task-chip__remove[b-soitebcb88] {
    background: none;
    border: none;
    color: #E24B4A;
    font-size: .78rem;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    flex-shrink: 0;
    transition: background .15s;
}
.task-chip__remove:hover[b-soitebcb88] { background: #FCEBEB; }

.task-chip__header[b-soitebcb88] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    cursor: pointer;
    user-select: none;
}

.task-chip__actions[b-soitebcb88] {
    display: flex;
    align-items: center;
    gap: .2rem;
    flex-shrink: 0;
}

.task-chip__chevron[b-soitebcb88] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    width: 18px;
    height: 18px;
    border-radius: 4px;
    transition: transform .2s cubic-bezier(.4,0,.2,1), color .15s;
}
.task-chip__chevron--open[b-soitebcb88] {
    transform: rotate(180deg);
    color: var(--navy);
}

.task-chip__dur[b-soitebcb88] {
    color: var(--text-muted);
    font-family: 'Arial Narrow', Arial, sans-serif;
    letter-spacing: .03em;
}

.task-chip__detail[b-soitebcb88] {
    margin-top: .6rem;
    padding-top: .6rem;
    border-top: .5px solid var(--warm-gray-2);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    animation: fadeIn .15s cubic-bezier(.4,0,.2,1);
}

.chip-detail-fields[b-soitebcb88] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .3rem .75rem;
}

.chip-detail-field[b-soitebcb88] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}
.chip-detail-field--full[b-soitebcb88] { grid-column: 1 / -1; }

.chip-detail-field__lbl[b-soitebcb88] {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    font-family: 'Arial Narrow', Arial, sans-serif;
}

.chip-detail-field__val[b-soitebcb88] {
    font-size: .75rem;
    color: var(--navy);
    font-family: Arial, sans-serif;
    word-break: break-word;
}

.chip-detail-counters[b-soitebcb88] {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.chip-counter[b-soitebcb88] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: #fff;
    border: .5px solid var(--warm-gray-2);
    border-radius: 5px;
    padding: 2px 7px;
    font-size: .65rem;
    font-family: 'Arial Narrow', Arial, sans-serif;
    letter-spacing: .03em;
}
.chip-counter__lbl[b-soitebcb88] { color: var(--text-muted); }
.chip-counter__val[b-soitebcb88] { color: var(--navy); font-weight: 700; }

/* ── Form card ── */
.form-card[b-soitebcb88] {
    background: #fff;
    border: .5px solid var(--warm-gray-2);
    border-radius: var(--radius-card);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    border-left: 4px solid var(--navy);
}

.form-card__last-activity[b-soitebcb88] {
    margin: 0;
    padding: .3rem .6rem;
    border-radius: 6px;
    font-size: .68rem;
    font-family: 'Arial', sans-serif;
    font-weight: 500;
    letter-spacing: .02em;
    min-height: 28px;
}

@keyframes shimmer-pulse-b-soitebcb88 {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

.form-card__last-activity--skeleton[b-soitebcb88] {
    background: linear-gradient(90deg, #EAF0FA 25%, #dce8f5 50%, #EAF0FA 75%);
    background-size: 200% 100%;
    border: 1px solid #d4dff5;
    animation: shimmer-pulse-b-soitebcb88 1.4s infinite linear;
}

.form-card__last-activity--visible[b-soitebcb88] {
    background: #EAF0FA;
    border: 1px solid #BDD0EF;
    color: #1B2A4A;
    animation: fadeIn .25s cubic-bezier(.4,0,.2,1) both;
}

.form-card__heading[b-soitebcb88] {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--navy);
    font-family: 'Arial Narrow', Arial, sans-serif;
    margin: 0;
}

/* ── Numeric grid ── */
@keyframes numGridIn-b-soitebcb88 {
    from { opacity: 0; transform: scaleY(.96); }
    to   { opacity: 1; transform: scaleY(1); }
}
@keyframes numGridOut-b-soitebcb88 {
    from { opacity: 1; transform: scaleY(1); }
    to   { opacity: 0; transform: scaleY(.96); }
}
@keyframes numFieldIn-b-soitebcb88 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes numFieldOut-b-soitebcb88 {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; }
}

.num-grid[b-soitebcb88] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .45rem;
    opacity: 0;
    pointer-events: none;
    transform-origin: top;
}
.num-grid--visible[b-soitebcb88] {
    animation: numGridIn-b-soitebcb88 220ms cubic-bezier(.4,0,.2,1) both;
    opacity: 1;
    pointer-events: auto;
}
.num-grid--hiding[b-soitebcb88] {
    animation: numGridOut-b-soitebcb88 180ms cubic-bezier(.4,0,.2,1) both;
    pointer-events: none;
}

.num-grid-toggle-row[b-soitebcb88] {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    margin-bottom: .1rem;
}

.input-mode-toggle[b-soitebcb88] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: .5px solid var(--warm-gray-2);
    border-radius: 6px;
    background: transparent;
    font-size: .65rem;
    font-weight: 700;
    font-family: 'Arial Narrow', Arial, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .15s cubic-bezier(.4,0,.2,1), background .15s cubic-bezier(.4,0,.2,1);
}
.input-mode-toggle:hover[b-soitebcb88] {
    border-color: var(--gold);
    background: #FFFBF0;
}
.input-mode-toggle--active[b-soitebcb88] {
    border-color: var(--gold);
    background: #FFFBF0;
}
.input-mode-toggle__option[b-soitebcb88] {
    color: var(--text-muted);
    transition: color .15s cubic-bezier(.4,0,.2,1);
}
.input-mode-toggle__option--active[b-soitebcb88] {
    color: var(--navy);
    font-weight: 800;
}
.input-mode-toggle__sep[b-soitebcb88] {
    color: var(--warm-gray-2);
    font-weight: 400;
}

.num-field[b-soitebcb88] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    opacity: 0;
}
.num-field--in[b-soitebcb88] {
    animation: numFieldIn-b-soitebcb88 180ms cubic-bezier(.4,0,.2,1) both;
}
.num-field--exit[b-soitebcb88] {
    animation: numFieldOut-b-soitebcb88 150ms cubic-bezier(.4,0,.2,1) both;
    pointer-events: none;
}

.num-label[b-soitebcb88] {
    font-size: .55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    font-family: 'Arial Narrow', Arial, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.num-input[b-soitebcb88] {
    width: 100%;
    box-sizing: border-box;
    border: .5px solid var(--warm-gray-2);
    border-radius: 6px;
    padding: .38rem .3rem;
    font-size: .75rem;
    color: var(--navy);
    background: #fff;
    text-align: center;
    outline: none;
    font-family: Arial, sans-serif;
    transition: border-color .18s;
    -moz-appearance: textfield;
}
.num-input:focus[b-soitebcb88] { border-color: var(--gold); }
.num-input[b-soitebcb88]::-webkit-outer-spin-button,
.num-input[b-soitebcb88]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── Error ── */
.form-error[b-soitebcb88] {
    font-size: .7rem;
    color: #E24B4A;
    font-family: Arial, sans-serif;
    margin: 0;
}

/* ── Time wheels ── */
.time-wheels[b-soitebcb88] {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.time-wheel[b-soitebcb88] {
    flex: 1;
    appearance: none;
    -webkit-appearance: none;
    border: .5px solid var(--warm-gray-2);
    border-radius: 7px;
    padding: .5rem .4rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--navy);
    background: #fff;
    text-align: center;
    outline: none;
    cursor: pointer;
    font-family: 'Arial Narrow', Arial, sans-serif;
    transition: border-color .18s;
}
.time-wheel:focus[b-soitebcb88] { border-color: var(--gold); }

.time-wheels[b-soitebcb88]  .drum-wrap {
    flex: 1;
}

.time-wheel__sep[b-soitebcb88] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--navy);
    flex-shrink: 0;
}

/* ── Duration presets ── */
.duration-presets[b-soitebcb88] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.duration-pill[b-soitebcb88] {
    padding: .38rem .65rem;
    border: .5px solid var(--warm-gray-2);
    border-radius: 20px;
    background: var(--warm-gray);
    color: var(--navy);
    font-size: .72rem;
    font-weight: 600;
    font-family: 'Arial Narrow', Arial, sans-serif;
    cursor: pointer;
    transition: all .15s;
}
.duration-pill:hover[b-soitebcb88] { border-color: var(--gold); }
.duration-pill--active[b-soitebcb88] {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}

.duration-presets--error .duration-pill[b-soitebcb88] {
    border-color: #f5c6c6;
    background: #FCEBEB;
}

/* ── Task-added flash ── */
@keyframes task-added-flash-b-soitebcb88 {
    0%   { background: #d4f0dc; transform: scale(1.015); }
    60%  { background: #d4f0dc; transform: scale(1.015); }
    100% { background: var(--warm-gray); transform: scale(1); }
}
.task-chip--new[b-soitebcb88] {
    animation: task-added-flash-b-soitebcb88 .7s cubic-bezier(.4,0,.2,1) forwards;
}

/* ── Form card success flash ── */
@keyframes form-card-success-b-soitebcb88 {
    0%   { border-left-color: #27A44A; box-shadow: 0 0 0 3px rgba(39,164,74,.22); background: #EAF3DE; }
    65%  { border-left-color: #27A44A; box-shadow: 0 0 0 2px rgba(39,164,74,.08); background: #EAF3DE; }
    100% { border-left-color: var(--navy); box-shadow: none; background: #fff; }
}
.form-card--success[b-soitebcb88] {
    animation: form-card-success-b-soitebcb88 .6s cubic-bezier(.4,0,.2,1) forwards;
}

/* ── Form card ready flash ── */
@keyframes form-card-ready-b-soitebcb88 {
    0%   { border-left-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,76,.25); }
    65%  { border-left-color: var(--gold); box-shadow: 0 0 0 2px rgba(201,168,76,.1); }
    100% { border-left-color: var(--navy); box-shadow: none; }
}
.form-card--ready[b-soitebcb88] {
    animation: form-card-ready-b-soitebcb88 .7s cubic-bezier(.4,0,.2,1) forwards;
}

/* ── Review warning ── */
.form-review-warning[b-soitebcb88] {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: .5rem .75rem;
    background: #FCEBEB;
    border: .5px solid #f5c6c6;
    border-radius: 7px;
    font-size: .72rem;
    font-weight: 700;
    color: #E24B4A;
    font-family: 'Arial Narrow', Arial, sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    animation: fadeIn .18s cubic-bezier(.4,0,.2,1);
}

/* ── ADD TASK button ── */
.btn-add-task[b-soitebcb88] {
    width: 100%;
    background: var(--navy);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: .75rem 1rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-family: 'Arial Narrow', Arial, sans-serif;
    cursor: pointer;
    transition: background .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 42px;
}
.btn-add-task:hover:not(:disabled)[b-soitebcb88] { background: var(--navy-light); }
.btn-add-task--loading[b-soitebcb88] { opacity: .75; cursor: default; }

@keyframes btn-spin-b-soitebcb88 {
    to { transform: rotate(360deg); }
}
.btn-spinner[b-soitebcb88] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-spin-b-soitebcb88 .6s linear infinite;
    flex-shrink: 0;
}

/* ── Form actions ── */
.form-actions[b-soitebcb88] {
    display: flex;
    gap: .75rem;
}

.btn-send[b-soitebcb88],
.btn-cancel[b-soitebcb88] {
    flex: 1;
    border: none;
    border-radius: 8px;
    padding: .8rem 1rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-family: 'Arial Narrow', Arial, sans-serif;
    cursor: pointer;
    transition: opacity .2s;
}
.btn-send[b-soitebcb88]   { background: #27A44A; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; }
.btn-cancel[b-soitebcb88] { background: #E24B4A; color: #fff; }
.btn-send:hover:not(:disabled)[b-soitebcb88] { opacity: .85; }
.btn-cancel:hover[b-soitebcb88] { opacity: .85; }
.btn-send:disabled[b-soitebcb88] { opacity: .45; cursor: default; }
.btn-send__row[b-soitebcb88] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
}
.btn-send__count[b-soitebcb88] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .35rem;
    background: rgba(255,255,255,.25);
    border-radius: 20px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
}
.btn-send__date[b-soitebcb88] {
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: rgba(255,255,255,.75);
}

/* ── Send overlay ── */
.send-overlay[b-soitebcb88] {
    position: fixed;
    inset: 0;
    background: rgba(27,42,74,.72);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 500;
}

@keyframes overlay-spin-b-soitebcb88 {
    to { transform: rotate(360deg); }
}

.send-overlay__spinner[b-soitebcb88] {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(255,255,255,.25);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: overlay-spin-b-soitebcb88 .75s linear infinite;
}

.send-overlay__label[b-soitebcb88] {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    font-family: 'Arial Narrow', Arial, sans-serif;
    margin: 0;
}

/* ── Toast ── */
@keyframes toast-in-b-soitebcb88 {
    from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.toast[b-soitebcb88] {
    position: fixed;
    top: 68px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem 1.1rem;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 700;
    font-family: 'Arial Narrow', Arial, sans-serif;
    letter-spacing: .06em;
    white-space: nowrap;
    z-index: 600;
    box-shadow: 0 4px 16px rgba(27,42,74,.18);
    animation: toast-in-b-soitebcb88 .22s cubic-bezier(.4,0,.2,1);
}

.toast--success[b-soitebcb88] {
    background: #EAF3DE;
    color: #27500A;
    border: 1px solid #c3e2a0;
}

.toast--error[b-soitebcb88] {
    background: #FCEBEB;
    color: #E24B4A;
    border: 1px solid #f5c6c6;
}

.date-block-overlay[b-soitebcb88] {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(27,42,74,.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.date-block-modal[b-soitebcb88] {
    background: #fff;
    border-radius: 12px;
    max-width: 360px;
    width: 92%;
    box-shadow: 0 8px 40px rgba(0,0,0,.35);
    animation: fadeScaleIn .2s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}

.date-block-modal__header[b-soitebcb88] {
    background: var(--navy);
    color: #fff;
    padding: 1rem 1.25rem;
    font-size: .88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-family: 'Arial Narrow', Arial, sans-serif;
}

.date-block-modal__body[b-soitebcb88] {
    padding: 1.25rem 1.25rem .75rem;
}

.date-block-modal__body p[b-soitebcb88] {
    margin: 0;
    font-size: .82rem;
    color: var(--navy);
    font-family: Arial, sans-serif;
    line-height: 1.5;
}

.date-block-modal__footer[b-soitebcb88] {
    padding: .75rem 1.25rem 1.1rem;
    display: flex;
    justify-content: flex-end;
}

.date-block-modal__btn[b-soitebcb88] {
    background: var(--gold);
    color: var(--navy);
    font-weight: 700;
    padding: 9px 22px;
    border-radius: 8px;
    font-size: .82rem;
    border: none;
    cursor: pointer;
    font-family: 'Arial Narrow', Arial, sans-serif;
    letter-spacing: .05em;
    transition: background .15s;
}
.date-block-modal__btn:hover[b-soitebcb88] { background: var(--gold-light); }

.toast__icon[b-soitebcb88] { font-size: .85rem; }

/* ── Footer ── */

/* ── Responsive ── */
@media (min-width: 500px) {
    .field-row--2[b-soitebcb88] {
        flex-direction: row;
    }
    .field-row--2 .field-group[b-soitebcb88] { flex: 1; min-width: 0; }

    .num-grid[b-soitebcb88] { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 640px) {
    .field-row--3[b-soitebcb88] {
        flex-direction: row;
    }
    .field-row--3 .field-group[b-soitebcb88] { flex: 1; min-width: 0; }

    .hero[b-soitebcb88] { padding: 2rem 2rem 2.5rem; min-height: 178px; }
    .hero__name[b-soitebcb88] { font-size: 1.7rem; }
    .dars-content[b-soitebcb88] { padding: 1.75rem 1.5rem 2.5rem; }
}

@media (min-width: 860px) {
    .hero[b-soitebcb88] { padding: 2.5rem 2rem 2.5rem; min-height: 200px; }
    .hero__name[b-soitebcb88] { font-size: 2rem; }
}

@media (min-width: 860px) {
    .num-grid[b-soitebcb88] { grid-template-columns: repeat(6, 1fr); }
}

@media (min-width: 900px) {
    .dars-wrapper[b-soitebcb88] {
        box-shadow: 0 0 0 1px var(--warm-gray-2);
    }
    .dars-content[b-soitebcb88] { padding: 1.75rem 2rem 2.5rem; }
}

/* ── Quick-preset area ─────────────────────────────────── */
.quick-presets[b-soitebcb88] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-bottom: .75rem;
}

.quick-presets__label[b-soitebcb88] {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-family: 'Arial', sans-serif;
}

.quick-presets__chips[b-soitebcb88] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.preset-chip[b-soitebcb88] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 4px 10px;
    background: #FFF8EC;
    border: 1px solid var(--gold);
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
    transition: all .15s cubic-bezier(.4,0,.2,1);
    font-family: 'Arial', sans-serif;
    max-width: 200px;
}

.preset-chip:hover[b-soitebcb88] {
    background: var(--gold);
    color: var(--navy);
}

.preset-chip__text[b-soitebcb88] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.preset-chip__del[b-soitebcb88] {
    font-size: .75rem;
    font-weight: 700;
    color: var(--text-muted);
    line-height: 1;
    padding: 0 2px;
    border-radius: 50%;
    transition: color .15s;
    cursor: pointer;
    background: none;
    border: none;
}

.preset-chip__del:hover[b-soitebcb88] {
    color: #E24B4A;
}

/* ── Save preset button (below Code dropdown) ──────────── */
.preset-save-btn[b-soitebcb88] {
    margin-top: .35rem;
    padding: 4px 10px;
    background: transparent;
    border: 0.5px solid var(--gold);
    border-radius: 6px;
    font-size: .68rem;
    font-weight: 700;
    color: var(--gold);
    cursor: pointer;
    transition: all .15s cubic-bezier(.4,0,.2,1);
    font-family: 'Arial', sans-serif;
    letter-spacing: .04em;
    width: 100%;
}

.preset-save-btn:hover:not(:disabled)[b-soitebcb88] {
    background: #FFF8EC;
    border-color: var(--gold);
}

.preset-save-btn--dim[b-soitebcb88],
.preset-save-btn:disabled[b-soitebcb88] {
    opacity: 0.38;
    cursor: not-allowed;
}
/* /Pages/Expenses.razor.rz.scp.css */
/* ============================================================
   Expenses.razor.css  –  HB-Staff Expenses Hub Page
   Mobile-first · Navy / Gold / Warm-Gray palette
   ============================================================ */

/* ── Wrapper ────────────────────────────────────────────────── */
.expenses-wrapper[b-etfx9lcfeo] {
    font-family: Georgia, serif;
    background: #F4F1EC;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero[b-etfx9lcfeo] {
    padding: 1.5rem 1.5rem 2.2rem;
    min-height: 148px;
    background: #1B2A4A;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.hero-arc[b-etfx9lcfeo] {
    position: absolute;
    bottom: -1px;
    left: -5%;
    width: 110%;
    height: 32px;
    background: #F4F1EC;
    border-radius: 50% 50% 0 0;
}

.hero__greeting[b-etfx9lcfeo] {
    font-size: .75rem;
    color: #E2C07A;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-family: 'Arial Narrow', Arial, sans-serif;
    margin-bottom: .2rem;
}

.hero__name[b-etfx9lcfeo] {
    font-size: 1.4rem;
    font-weight: 700;
    font-family: Georgia, serif;
    line-height: 1.15;
    color: #fff;
    margin-bottom: .15rem;
}

.hero__sub[b-etfx9lcfeo] {
    font-size: .78rem;
    color: rgba(255,255,255,.55);
    font-family: Arial, sans-serif;
}

/* ── Module Grid ────────────────────────────────────────────── */
.modules[b-etfx9lcfeo] {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.75rem 1.25rem 1.5rem;
}

/* ── Module Card ─────────────────────────────────────────────── */
.module-card[b-etfx9lcfeo] {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    grid-template-rows: auto auto;
    column-gap: .85rem;
    align-items: center;
    background: #fff;
    border: 1.5px solid #EAE6DF;
    border-radius: 14px;
    padding: 1rem;
    text-align: left;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color .2s, transform .18s;
    box-shadow: 0 1px 4px rgba(27,42,74,.07);
}

.module-card[b-etfx9lcfeo]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #1B2A4A;
    border-radius: 0;
    transition: background .2s, width .18s;
}

.module-card:hover[b-etfx9lcfeo],
.module-card:focus-visible[b-etfx9lcfeo] {
    border-color: #C9A84C;
    transform: translateY(-2px);
    outline: none;
}

.module-card:hover[b-etfx9lcfeo]::before,
.module-card:focus-visible[b-etfx9lcfeo]::before {
    background: #C9A84C;
    width: 5px;
}

/* Icon */
.module-card__icon[b-etfx9lcfeo] {
    grid-row: 1 / 3;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(201,168,76,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.module-card__icon svg[b-etfx9lcfeo] {
    width: 22px;
    height: 22px;
    stroke: #1B2A4A;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Title */
.module-card__title[b-etfx9lcfeo] {
    grid-column: 2;
    grid-row: 1;
    font-size: .9rem;
    font-weight: 700;
    font-family: Arial, sans-serif;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #1B2A4A;
    line-height: 1.2;
}

/* Description */
.module-card__desc[b-etfx9lcfeo] {
    grid-column: 2;
    grid-row: 2;
    font-size: .72rem;
    color: #6B7A99;
    font-family: Arial, sans-serif;
    margin-top: .1rem;
}

/* Arrow */
.module-card__arrow[b-etfx9lcfeo] {
    grid-column: 3;
    grid-row: 1 / 3;
    font-size: 1rem;
    color: #C9A84C;
    padding-right: .25rem;
    transition: transform .18s;
}

.module-card:hover .module-card__arrow[b-etfx9lcfeo],
.module-card:focus-visible .module-card__arrow[b-etfx9lcfeo] {
    transform: translateX(3px);
}

/* ── Disabled card ───────────────────────────────────────────── */
.module-card--disabled[b-etfx9lcfeo] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.module-card--disabled:hover[b-etfx9lcfeo],
.module-card--disabled:focus-visible[b-etfx9lcfeo] {
    border-color: #EAE6DF;
    transform: none;
}

.module-card--disabled:hover[b-etfx9lcfeo]::before,
.module-card--disabled:focus-visible[b-etfx9lcfeo]::before {
    width: 4px;
}

/* ── Coming Soon badge ───────────────────────────────────────── */
.badge--soon[b-etfx9lcfeo] {
    position: absolute;
    top: .5rem;
    right: .6rem;
    font-size: .6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
    background: #FAEEDA;
    color: #633806;
}

.badge--testing[b-etfx9lcfeo] {
    position: absolute;
    top: .5rem;
    right: .6rem;
    font-size: .6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
    background: rgba(15,110,86,.12);
    color: #0F6E56;
    border: 1px solid rgba(15,110,86,.3);
}

/* ── Per-card accent colours ─────────────────────────────────── */
.module-card--daily .module-card__icon[b-etfx9lcfeo] { background: rgba(15,110,86,.10); }
.module-card--daily .module-card__icon svg[b-etfx9lcfeo] { stroke: #0F6E56; }
.module-card--daily:hover[b-etfx9lcfeo]::before { background: #0F6E56; }

.module-card--car .module-card__icon[b-etfx9lcfeo] { background: rgba(122,63,27,.10); }
.module-card--car .module-card__icon svg[b-etfx9lcfeo] { stroke: #7A3F1B; }
.module-card--car:hover[b-etfx9lcfeo]::before { background: #7A3F1B; }

/* ============================================================
   Responsive — >= 500 px  (2-column card layout)
   ============================================================ */
@media (min-width: 500px) {

    .modules[b-etfx9lcfeo] {
        grid-template-columns: 1fr 1fr;
        padding: 1.75rem 1.5rem 1.5rem;
    }

    .module-card[b-etfx9lcfeo] {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        text-align: center;
        justify-items: center;
        padding: 1.4rem 1rem 1.2rem;
        min-height: 160px;
        column-gap: 0;
    }

    .module-card[b-etfx9lcfeo]::before {
        left: 0;
        top: 0;
        right: 0;
        bottom: auto;
        width: auto;
        height: 4px;
        border-radius: 4px 4px 0 0;
    }

    .module-card:hover[b-etfx9lcfeo]::before,
    .module-card:focus-visible[b-etfx9lcfeo]::before {
        width: auto;
        height: 5px;
    }

    .module-card__icon[b-etfx9lcfeo] {
        grid-row: 1;
        grid-column: 1;
        margin-bottom: .4rem;
    }

    .module-card__title[b-etfx9lcfeo] {
        grid-column: 1;
        grid-row: 2;
    }

    .module-card__desc[b-etfx9lcfeo] {
        grid-column: 1;
        grid-row: 3;
    }

    .module-card__arrow[b-etfx9lcfeo] { display: none; }
}

@media (min-width: 640px) {
    .hero[b-etfx9lcfeo] { padding: 2rem 2rem 2.5rem; min-height: 178px; }
    .hero__name[b-etfx9lcfeo] { font-size: 1.7rem; }
}

@media (min-width: 860px) {
    .hero[b-etfx9lcfeo] { padding: 2.5rem 2rem 2.5rem; min-height: 200px; }
    .hero__name[b-etfx9lcfeo] { font-size: 2rem; }

    .modules[b-etfx9lcfeo] {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.25rem;
        padding: 2.5rem 2rem 2rem;
    }
}
/* /Pages/ForgotPassword.razor.rz.scp.css */
/* ============================================================
   ForgotPassword.razor.css  –  HB-Staff Password Recovery
   ============================================================ */

/* ── Page shell ─────────────────────────────────────────────── */
.fp-page[b-uuausotok2] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #1B2A4A;
    padding: 1.5rem 1.25rem;
    font-family: 'Arial', sans-serif;
}

/* ── Card ─────────────────────────────────────────────────────── */
.fp-card[b-uuausotok2] {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 16px;
    padding: 2.5rem 2rem 2rem;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .35);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* ── Brand ────────────────────────────────────────────────────── */
.fp-brand[b-uuausotok2] {
    font-family: 'Arial Narrow', 'Arial', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1;
    margin-bottom: .1rem;
}

.fp-brand__hb[b-uuausotok2]   { color: #C9A84C; }
.fp-brand__staff[b-uuausotok2] { color: #1B2A4A; margin-left: .25em; }

.fp-subtitle[b-uuausotok2] {
    text-align: center;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #6B7A99;
    margin: -.6rem 0 .2rem;
}

/* ── Instruction text ─────────────────────────────────────────── */
.fp-instruction[b-uuausotok2] {
    font-size: .8rem;
    color: #6B7A99;
    text-align: center;
    margin: -.2rem 0 .2rem;
    line-height: 1.5;
}

/* ── Field ───────────────────────────────────────────────────── */
.fp-field[b-uuausotok2] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.fp-label[b-uuausotok2] {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #1B2A4A;
}

.fp-input[b-uuausotok2] {
    width: 100%;
    padding: .7rem .9rem;
    border: 1.5px solid #EAE6DF;
    border-radius: 8px;
    font-size: .88rem;
    font-family: 'Arial', sans-serif;
    color: #1B2A4A;
    background: #F4F1EC;
    outline: none;
    transition: border-color .18s, background .18s;
    box-sizing: border-box;
}

.fp-input:focus[b-uuausotok2] {
    border-color: #C9A84C;
    background: #fff;
}

.fp-input[b-uuausotok2]::placeholder { color: #aab0c0; }

/* ── Error ───────────────────────────────────────────────────── */
.fp-error[b-uuausotok2] {
    background: #FCEBEB;
    border: 1px solid #f5c6c6;
    border-radius: 8px;
    padding: .6rem .9rem;
    font-size: .78rem;
    font-weight: 600;
    color: #c0392b;
}

/* ── Primary button ──────────────────────────────────────────── */
.fp-btn[b-uuausotok2] {
    width: 100%;
    padding: .82rem 1rem;
    background: #C9A84C;
    color: #1B2A4A;
    border: none;
    border-radius: 8px;
    font-family: 'Arial Narrow', 'Arial', sans-serif;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .18s, transform .15s;
    margin-top: .2rem;
}

.fp-btn:hover:not(:disabled)[b-uuausotok2] {
    background: #E2C07A;
    transform: translateY(-1px);
}

.fp-btn:disabled[b-uuausotok2] {
    opacity: .6;
    cursor: not-allowed;
}

/* ── Back link ───────────────────────────────────────────────── */
.fp-back[b-uuausotok2] {
    text-align: center;
    font-size: .75rem;
    color: #6B7A99;
    text-decoration: none;
    letter-spacing: .04em;
    transition: color .15s;
}

.fp-back:hover[b-uuausotok2] { color: #C9A84C; }

/* ── Result state ─────────────────────────────────────────────── */
.fp-result[b-uuausotok2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    text-align: center;
}

.fp-result__icon[b-uuausotok2] {
    width: 52px;
    height: 52px;
    background: rgba(201, 168, 76, .12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C9A84C;
}

.fp-result__icon svg[b-uuausotok2] { width: 26px; height: 26px; }

.fp-result__icon--muted[b-uuausotok2] {
    background: rgba(107, 122, 153, .1);
    color: #6B7A99;
}

.fp-result__title[b-uuausotok2] {
    font-family: 'Georgia', serif;
    font-size: 1.2rem;
    color: #1B2A4A;
    margin: 0;
}

.fp-result__sub[b-uuausotok2] {
    font-size: .8rem;
    color: #6B7A99;
    line-height: 1.5;
    margin: 0;
}

/* ── Reset link box ──────────────────────────────────────────── */
.fp-link-box[b-uuausotok2] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #F4F1EC;
    border: 1px solid #EAE6DF;
    border-radius: 8px;
    padding: .6rem .75rem;
    box-sizing: border-box;
}

.fp-link-text[b-uuausotok2] {
    flex: 1;
    font-size: .68rem;
    color: #1B2A4A;
    word-break: break-all;
    text-align: left;
    line-height: 1.4;
}

.fp-copy-btn[b-uuausotok2] {
    flex-shrink: 0;
    padding: .3rem .7rem;
    background: #C9A84C;
    color: #1B2A4A;
    border: none;
    border-radius: 6px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s;
}

.fp-copy-btn:hover[b-uuausotok2] { background: #E2C07A; }

/* ── Footer ──────────────────────────────────────────────────── */
.fp-footer[b-uuausotok2] {
    margin-top: 1.5rem;
    font-size: .62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .35);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (min-width: 480px) {
    .fp-card[b-uuausotok2] { padding: 3rem 2.5rem 2.5rem; }
    .fp-brand[b-uuausotok2] { font-size: 2rem; }
}
/* /Pages/Home.razor.rz.scp.css */
/* ============================================================
   Home.razor.css  –  HB-Staff Home Page
   Mobile-first · Navy / Gold / Warm-Gray palette
   ============================================================ */

/* ── Wrapper ────────────────────────────────────────────────── */
.home-wrapper[b-wnsr22bwvn] {
    font-family: Georgia, serif;
    background: #F4F1EC;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}


/* ── Hero / Greeting ────────────────────────────────────────── */
.hero[b-wnsr22bwvn] {
    padding: 1.5rem 1.5rem 2.2rem;
    min-height: 148px;
    background: #1B2A4A;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.hero-arc[b-wnsr22bwvn] {
    position: absolute;
    bottom: -1px;
    left: -5%;
    width: 110%;
    height: 32px;
    background: #F4F1EC;
    border-radius: 50% 50% 0 0;
}

.hero__greeting[b-wnsr22bwvn] {
    font-size: .75rem;
    color: #E2C07A;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-family: 'Arial Narrow', Arial, sans-serif;
    margin-bottom: .2rem;
}

.hero__name[b-wnsr22bwvn] {
    font-size: 1.4rem;
    font-weight: 700;
    font-family: Georgia, serif;
    line-height: 1.15;
    color: #fff;
    margin-bottom: .15rem;
}

.hero__sub[b-wnsr22bwvn] {
    font-size: .78rem;
    color: rgba(255,255,255,.55);
    font-family: Arial, sans-serif;
}

/* ── Module Grid ────────────────────────────────────────────── */
.modules[b-wnsr22bwvn] {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.75rem 1.25rem 1.5rem;
}

/* ── Module Card ─────────────────────────────────────────────── */
.module-card[b-wnsr22bwvn] {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    grid-template-rows: auto auto;
    column-gap: .85rem;
    align-items: center;
    background: #fff;
    border: 1.5px solid #EAE6DF;
    border-radius: 14px;
    padding: 1rem;
    text-align: left;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color .2s, transform .18s;
    box-shadow: 0 1px 4px rgba(27,42,74,.07);
}

.module-card[b-wnsr22bwvn]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #1B2A4A;
    border-radius: 0;
    transition: background .2s, width .18s;
}

.module-card:hover[b-wnsr22bwvn],
.module-card:focus-visible[b-wnsr22bwvn] {
    border-color: #C9A84C;
    transform: translateY(-2px);
    outline: none;
}

.module-card:hover[b-wnsr22bwvn]::before,
.module-card:focus-visible[b-wnsr22bwvn]::before {
    background: #C9A84C;
    width: 5px;
}

/* Icon */
.module-card__icon[b-wnsr22bwvn] {
    grid-row: 1 / 3;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(201,168,76,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.module-card__badge[b-wnsr22bwvn] {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #E24B4A;
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 20px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Arial', sans-serif;
    border: 2px solid #fff;
    line-height: 1;
    animation: badgePing-b-wnsr22bwvn 2s cubic-bezier(.4,0,.2,1) infinite;
}

@keyframes badgePing-b-wnsr22bwvn {
    0%, 100% { box-shadow: 0 0 0 0 rgba(226,75,74,.55); }
    60%       { box-shadow: 0 0 0 6px rgba(226,75,74,0); }
}

.module-card__icon svg[b-wnsr22bwvn] {
    width: 22px;
    height: 22px;
    stroke: #1B2A4A;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Title */
.module-card__title[b-wnsr22bwvn] {
    grid-column: 2;
    grid-row: 1;
    font-size: .9rem;
    font-weight: 700;
    font-family: Arial, sans-serif;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #1B2A4A;
    line-height: 1.2;
}

/* Description */
.module-card__desc[b-wnsr22bwvn] {
    grid-column: 2;
    grid-row: 2;
    font-size: .72rem;
    color: #6B7A99;
    font-family: Arial, sans-serif;
    margin-top: .1rem;
}

/* Arrow */
.module-card__arrow[b-wnsr22bwvn] {
    grid-column: 3;
    grid-row: 1 / 3;
    font-size: 1rem;
    color: #C9A84C;
    padding-right: .25rem;
    transition: transform .18s;
}

.module-card:hover .module-card__arrow[b-wnsr22bwvn],
.module-card:focus-visible .module-card__arrow[b-wnsr22bwvn] {
    transform: translateX(3px);
}

/* ── Card spinner ────────────────────────────────────────────── */
.card-spinner[b-wnsr22bwvn] {
    display: block;
    width: 22px;
    height: 22px;
    border: 2.5px solid rgba(201,168,76,.22);
    border-top-color: #C9A84C;
    border-radius: 50%;
    animation: cardSpin-b-wnsr22bwvn .65s cubic-bezier(.4,0,.2,1) infinite;
}

@keyframes cardSpin-b-wnsr22bwvn {
    to { transform: rotate(360deg); }
}

/* ── Disabled card ───────────────────────────────────────────── */
.module-card:disabled:not(.module-card--disabled)[b-wnsr22bwvn] {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
    transform: none;
}

.module-card--disabled[b-wnsr22bwvn] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.module-card--disabled:hover[b-wnsr22bwvn],
.module-card--disabled:focus-visible[b-wnsr22bwvn] {
    border-color: #EAE6DF;
    transform: none;
}

.module-card--disabled:hover[b-wnsr22bwvn]::before,
.module-card--disabled:focus-visible[b-wnsr22bwvn]::before {
    width: 4px;
}

/* ── Badges ───────────────────────────────────────────────────── */
.badge--testing[b-wnsr22bwvn] {
    position: absolute;
    top: .5rem;
    right: .6rem;
    font-size: .6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
    background: #EAF0FA;
    color: #1B2A4A;
    border: 1px solid #BDD0EF;
}

.badge--soon[b-wnsr22bwvn] {
    position: absolute;
    top: .5rem;
    right: .6rem;
    font-size: .6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
    background: #FAEEDA;
    color: #633806;
}

/* ── Per-card accent colours ─────────────────────────────────── */
.module-card--daily .module-card__icon[b-wnsr22bwvn] { background: rgba(42,122,90,.10); }
.module-card--daily .module-card__icon svg[b-wnsr22bwvn] { stroke: #2A7A5A; }
.module-card--daily:hover[b-wnsr22bwvn]::before { background: #2A7A5A; }

.module-card--leave .module-card__icon[b-wnsr22bwvn] { background: rgba(26,107,138,.10); }
.module-card--leave .module-card__icon svg[b-wnsr22bwvn] { stroke: #1A6B8A; }
.module-card--leave:hover[b-wnsr22bwvn]::before { background: #1A6B8A; }

.badge--soon[b-wnsr22bwvn] { background: #FAEEDA; color: #633806; font-size: .55rem; font-weight: 700; padding: 2px 6px; border-radius: 20px; letter-spacing: .05em; text-transform: uppercase; vertical-align: middle; }

.module-card--inactive[b-wnsr22bwvn] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.module-card--inactive:hover[b-wnsr22bwvn] { transform: none; border-color: var(--warm-gray-2); box-shadow: 0 1px 4px rgba(27,42,74,.07); }
.module-card--inactive:hover[b-wnsr22bwvn]::before { background: var(--navy); width: 4px; }

.module-card--logs .module-card__icon[b-wnsr22bwvn] { background: rgba(74,42,122,.10); }
.module-card--logs .module-card__icon svg[b-wnsr22bwvn] { stroke: #4A2A7A; }
.module-card--logs:hover[b-wnsr22bwvn]::before { background: #4A2A7A; }

.module-card--cpd .module-card__icon[b-wnsr22bwvn] { background: rgba(44,95,138,.10); }
.module-card--cpd .module-card__icon svg[b-wnsr22bwvn] { stroke: #2C5F8A; }

/* ── Footer ─────────────────────────────────────────────────── */

/* ============================================================
   Responsive — >= 500 px  (2-column card layout)
   ============================================================ */
@media (min-width: 500px) {

    .modules[b-wnsr22bwvn] {
        grid-template-columns: 1fr 1fr;
        padding: 1.75rem 1.5rem 1.5rem;
    }

    .module-card[b-wnsr22bwvn] {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        text-align: center;
        justify-items: center;
        padding: 1.4rem 1rem 1.2rem;
        min-height: 160px;
        column-gap: 0;
    }

    .module-card[b-wnsr22bwvn]::before {
        left: 0;
        top: 0;
        right: 0;
        bottom: auto;
        width: auto;
        height: 4px;
        border-radius: 4px 4px 0 0;
    }

    .module-card:hover[b-wnsr22bwvn]::before,
    .module-card:focus-visible[b-wnsr22bwvn]::before {
        width: auto;
        height: 5px;
    }

    .module-card__icon[b-wnsr22bwvn] {
        grid-row: 1;
        grid-column: 1;
        margin-bottom: .4rem;
    }

    .module-card__title[b-wnsr22bwvn] {
        grid-column: 1;
        grid-row: 2;
    }

    .module-card__desc[b-wnsr22bwvn] {
        grid-column: 1;
        grid-row: 3;
    }

    .module-card__arrow[b-wnsr22bwvn] { display: none; }
}

/* center the lone 5th card in the 2-col range (500–639px) */
@media (min-width: 500px) and (max-width: 639px) {
    .modules > :last-child:nth-child(odd)[b-wnsr22bwvn] {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - .5rem);
    }
}

@media (min-width: 640px) {
    .hero[b-wnsr22bwvn] { padding: 2rem 2rem 2.5rem; min-height: 178px; }
    .hero__name[b-wnsr22bwvn] { font-size: 1.7rem; }

    .modules[b-wnsr22bwvn] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================================
   Responsive — >= 860 px  (5-column card layout)
   ============================================================ */
@media (min-width: 860px) {

    .home-wrapper[b-wnsr22bwvn] {
        min-height: 100dvh;
    }


    .hero[b-wnsr22bwvn] { padding: 2.5rem 2rem 2.5rem; min-height: 200px; }

    .hero__name[b-wnsr22bwvn] { font-size: 2rem; }

    .modules[b-wnsr22bwvn] {
        grid-template-columns: repeat(5, 1fr);
        gap: 1.25rem;
        padding: 2.5rem 2rem 2rem;
    }
}
/* /Pages/Join.razor.rz.scp.css */
/* ============================================================
   Join.razor.css — Account Setup Page
   Mobile-first · Navy / Gold / Warm-Gray palette
   ============================================================ */

.join-wrapper[b-1319qqt5d3] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #F4F1EC;
    padding: 1.5rem 1rem;
    font-family: 'Arial Narrow', 'Arial', sans-serif;
}

/* ── Card ──────────────────────────────────────────────────── */
.join-card[b-1319qqt5d3] {
    background: #fff;
    border: 0.5px solid #EAE6DF;
    border-radius: 14px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 4px 24px rgba(27,42,74,.1);
    overflow: hidden;
}

/* ── Logo ──────────────────────────────────────────────────── */
.join-logo[b-1319qqt5d3] {
    background: #1B2A4A;
    padding: 1.1rem 1.5rem;
    font-family: Arial, sans-serif;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}

.logo-hb[b-1319qqt5d3]    { color: #C9A84C; }
.logo-staff[b-1319qqt5d3] { color: #fff; margin-left: .3em; }

/* ── Section ───────────────────────────────────────────────── */
.join-section[b-1319qqt5d3] {
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.join-section--success[b-1319qqt5d3] {
    align-items: center;
    text-align: center;
    padding: 2.25rem 1.5rem;
}

/* ── Loading ───────────────────────────────────────────────── */
.join-loading[b-1319qqt5d3] {
    padding: 2.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
    color: #6B7A99;
    font-size: .82rem;
    font-family: Arial, sans-serif;
}

.loading-spinner[b-1319qqt5d3] {
    width: 28px;
    height: 28px;
    border: 3px solid #EAE6DF;
    border-top-color: #C9A84C;
    border-radius: 50%;
    animation: spin-b-1319qqt5d3 .7s linear infinite;
}

@keyframes spin-b-1319qqt5d3 {
    to { transform: rotate(360deg); }
}

/* ── Text ──────────────────────────────────────────────────── */
.join-title[b-1319qqt5d3] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1B2A4A;
    margin: 0;
    font-family: Georgia, serif;
}

.join-sub[b-1319qqt5d3] {
    font-size: .8rem;
    color: #6B7A99;
    font-family: Arial, sans-serif;
    margin: 0;
    line-height: 1.5;
}

.join-sub strong[b-1319qqt5d3] { color: #1B2A4A; }

/* ── User chip ─────────────────────────────────────────────── */
.join-user-chip[b-1319qqt5d3] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .85rem;
    background: #F4F1EC;
    border: 0.5px solid #EAE6DF;
    border-radius: 8px;
    font-size: .78rem;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
}

.join-user-chip svg[b-1319qqt5d3] {
    width: 15px;
    height: 15px;
    stroke: #6B7A99;
    flex-shrink: 0;
}

/* ── Fields ────────────────────────────────────────────────── */
.field[b-1319qqt5d3] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.field__label[b-1319qqt5d3] {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
}

.field__req[b-1319qqt5d3] { color: #E24B4A; }

.field__input[b-1319qqt5d3] {
    padding: .6rem .75rem;
    border: 0.5px solid #EAE6DF;
    border-radius: 7px;
    font-size: .82rem;
    background: #fff;
    color: #1B2A4A;
    outline: none;
    transition: border-color .18s;
    font-family: Arial, sans-serif;
    width: 100%;
    box-sizing: border-box;
}

.field__input:focus[b-1319qqt5d3]         { border-color: #C9A84C; }
.field__input[b-1319qqt5d3]::placeholder  { color: #6B7A99; }
.field__input:disabled[b-1319qqt5d3]      { background: #F4F1EC; color: #6B7A99; }
.field__input--error[b-1319qqt5d3]        { border-color: #E24B4A; }

.field__hint-error[b-1319qqt5d3] {
    font-size: .7rem;
    color: #E24B4A;
    font-family: Arial, sans-serif;
}

/* ── Password show/hide ────────────────────────────────────── */
.pw-wrap[b-1319qqt5d3] {
    position: relative;
}

.pw-wrap .field__input[b-1319qqt5d3] {
    padding-right: 2.4rem;
}

.pw-toggle[b-1319qqt5d3] {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: #6B7A99;
    display: flex;
    align-items: center;
    line-height: 1;
    transition: color .15s;
}

.pw-toggle:hover[b-1319qqt5d3] { color: #C9A84C; }

.pw-toggle svg[b-1319qqt5d3] {
    width: 16px;
    height: 16px;
}

/* ── Password requirements ─────────────────────────────────── */
.pw-requirements[b-1319qqt5d3] {
    list-style: none;
    margin: 0;
    padding: .5rem .75rem;
    background: #F4F1EC;
    border: 0.5px solid #EAE6DF;
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.pw-requirements li[b-1319qqt5d3] {
    font-size: .7rem;
    font-family: Arial, sans-serif;
    padding-left: 1.25rem;
    position: relative;
}

.pw-requirements li[b-1319qqt5d3]::before {
    content: '✕';
    position: absolute;
    left: 0;
    font-size: .65rem;
    font-weight: 700;
}

.req--met[b-1319qqt5d3]  { color: #27500A; }
.req--met[b-1319qqt5d3]::before  { content: '✓'; }
.req--unmet[b-1319qqt5d3] { color: #6B7A99; }

/* ── Form error ────────────────────────────────────────────── */
.form-error[b-1319qqt5d3] {
    font-size: .74rem;
    color: #E24B4A;
    background: #FCEBEB;
    border: 0.5px solid #F5C6C6;
    border-radius: 7px;
    padding: .5rem .75rem;
    font-family: Arial, sans-serif;
    margin: 0;
}

/* ── Submit button ─────────────────────────────────────────── */
.btn-submit[b-1319qqt5d3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #C9A84C;
    border: none;
    border-radius: 9px;
    padding: .75rem 1rem;
    font-size: .82rem;
    font-weight: 700;
    color: #1B2A4A;
    cursor: pointer;
    letter-spacing: .04em;
    transition: background .2s;
    font-family: Arial, sans-serif;
    text-decoration: none;
    width: 100%;
    text-align: center;
}

.btn-submit:hover:not(:disabled)[b-1319qqt5d3] { background: #E2C07A; }
.btn-submit:disabled[b-1319qqt5d3]              { opacity: .5; cursor: not-allowed; }

.btn-spinner[b-1319qqt5d3] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(27,42,74,.25);
    border-top-color: #1B2A4A;
    border-radius: 50%;
    animation: spin-b-1319qqt5d3 .7s linear infinite;
    flex-shrink: 0;
}

/* ── Back to login link ────────────────────────────────────── */
.btn-back-login[b-1319qqt5d3] {
    display: inline-block;
    font-size: .78rem;
    color: #C9A84C;
    font-family: Arial, sans-serif;
    text-decoration: none;
    font-weight: 600;
    align-self: flex-start;
}

.btn-back-login:hover[b-1319qqt5d3] { text-decoration: underline; }

/* ── Success icon ──────────────────────────────────────────── */
.success-icon[b-1319qqt5d3] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #EAF3DE;
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-icon svg[b-1319qqt5d3] {
    width: 30px;
    height: 30px;
    stroke: #27500A;
}

/* ── Footer ────────────────────────────────────────────────── */
.join-footer[b-1319qqt5d3] {
    margin-top: 1.25rem;
    font-size: .62rem;
    letter-spacing: .12em;
    color: #6B7A99;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
}
/* /Pages/Leave.razor.rz.scp.css */
/* ── Design tokens ── */
.leave-wrapper[b-mdywrktqyk] {
    --navy:        #1B2A4A;
    --navy-light:  #243560;
    --navy-dark:   #111d33;
    --gold:        #C9A84C;
    --gold-light:  #E2C07A;
    --gold-muted:  #F5D98A;
    --warm-gray:   #F4F1EC;
    --warm-gray-2: #EAE6DF;
    --text-muted:  #6B7A99;
    --text-light:  #aab0c0;
    --radius-card: 10px;
    --transition:  all .2s cubic-bezier(.4,0,.2,1);
    --accent:      #0F6E56;
    --accent-light:#2A7A5A;
    --accent-bg:   rgba(15,110,86,.08);

    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--warm-gray);
    position: relative;
}

/* ── Overlays & toasts ── */
.send-overlay[b-mdywrktqyk] {
    position: fixed;
    inset: 0;
    background: rgba(27,42,74,.45);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 400;
}

.send-overlay__spinner[b-mdywrktqyk] {
    width: 38px;
    height: 38px;
    border: 3px solid rgba(255,255,255,.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-mdywrktqyk .65s linear infinite;
}

.send-overlay__label[b-mdywrktqyk] {
    margin-top: .85rem;
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .05em;
}

@keyframes spin-b-mdywrktqyk {
    to { transform: rotate(360deg); }
}

.toast[b-mdywrktqyk] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.25rem;
    z-index: 400;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    border-left: 4px solid var(--accent);
    border-radius: 8px;
    padding: .65rem 1rem;
    font-size: .78rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    animation: fadeIn-b-mdywrktqyk .18s ease;
}

.toast--success[b-mdywrktqyk] { border-left-color: #27500A; color: #27500A; }
.toast--error[b-mdywrktqyk]   { border-left-color: #E24B4A; color: #E24B4A; }

@keyframes fadeIn-b-mdywrktqyk {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero (teal) ── */
.hero[b-mdywrktqyk] {
    background: var(--accent);
    color: #fff;
    padding: 1.5rem 1.5rem 2.2rem;
    position: relative;
    overflow: hidden;
}

.hero__greeting[b-mdywrktqyk] {
    font-size: .75rem;
    color: rgba(255,255,255,.65);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-family: 'Arial', sans-serif;
    margin: 0 0 .25rem;
}

.hero__name[b-mdywrktqyk] {
    font-size: 1.4rem;
    font-weight: 700;
    font-family: 'Georgia', serif;
    color: #fff;
    margin: 0 0 .3rem;
}

.hero__sub[b-mdywrktqyk] {
    font-size: .78rem;
    color: rgba(255,255,255,.55);
    margin: 0;
}

.hero-arc[b-mdywrktqyk] {
    position: absolute;
    bottom: -1px;
    left: -5%;
    width: 110%;
    height: 32px;
    background: var(--warm-gray);
    border-radius: 50% 50% 0 0;
}

/* ── Stats bar ── */
.stats[b-mdywrktqyk] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 1.75rem 1.25rem 1rem;
}

.stat[b-mdywrktqyk] {
    background: #fff;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: var(--radius-card);
    padding: .85rem 1rem;
    text-align: center;
    box-shadow: 0 1px 4px rgba(27,42,74,.07);
}

.stat__n[b-mdywrktqyk] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--navy);
    font-family: 'Georgia', serif;
}

.stat__l[b-mdywrktqyk] {
    display: block;
    font-size: .62rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: .2rem;
}

.stat--loading .stat__n[b-mdywrktqyk] {
    visibility: hidden;
}

.stat-spinner[b-mdywrktqyk] {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--warm-gray-2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin-b-mdywrktqyk .65s linear infinite;
}

/* ── Form ── */
.leave-form-wrap[b-mdywrktqyk] {
    padding: 0 1.25rem 1.5rem;
}

.leave-form[b-mdywrktqyk] {
    background: #fff;
    border-radius: var(--radius-card);
    padding: 1.5rem;
    box-shadow: 0 1px 4px rgba(27,42,74,.07);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.leave-dates[b-mdywrktqyk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* ── Required items hint ── */
.send-blockers[b-mdywrktqyk] {
    margin: 0;
    padding: .45rem .75rem .45rem 1.4rem;
    background: #FAEEDA;
    border-radius: 7px;
    font-size: .72rem;
    color: #633806;
    font-weight: 600;
    list-style: disc;
}

.send-blockers li + li[b-mdywrktqyk] {
    margin-top: .2rem;
}

/* ── Field styles ── */
.field-group[b-mdywrktqyk] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.field-label[b-mdywrktqyk] {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}

.field-required[b-mdywrktqyk] { color: #E24B4A; }

.field-input[b-mdywrktqyk] {
    padding: .5rem .7rem;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 7px;
    font-size: .78rem;
    background: #fff;
    color: var(--navy);
    transition: border-color .15s cubic-bezier(.4,0,.2,1);
    font-family: 'Arial', sans-serif;
    width: 100%;
    box-sizing: border-box;
}

.field-input:focus[b-mdywrktqyk] {
    border-color: var(--accent);
    outline: none;
}

.field-input:disabled[b-mdywrktqyk] {
    opacity: .45;
    cursor: not-allowed;
}

.field-input--error[b-mdywrktqyk] { border-color: #E24B4A; background: #FCEBEB; }

.field-textarea[b-mdywrktqyk] { resize: vertical; min-height: 72px; }

.field-error-msg[b-mdywrktqyk] {
    font-size: .68rem;
    color: #E24B4A;
}

/* ── Duration mode pills ── */
.day-mode-row[b-mdywrktqyk] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.day-mode-pills[b-mdywrktqyk] {
    display: flex;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 8px;
    overflow: hidden;
    background: var(--warm-gray);
}

.day-pill[b-mdywrktqyk] {
    flex: 1;
    padding: .45rem .5rem;
    font-size: .72rem;
    font-weight: 600;
    font-family: 'Arial', sans-serif;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background .15s cubic-bezier(.4,0,.2,1), color .15s cubic-bezier(.4,0,.2,1);
}

.day-pill + .day-pill[b-mdywrktqyk] { border-left: 0.5px solid var(--warm-gray-2); }

.day-pill--active[b-mdywrktqyk] {
    background: var(--accent);
    color: #fff;
}

.day-pill:not(.day-pill--active):hover[b-mdywrktqyk] {
    background: var(--warm-gray-2);
    color: var(--navy);
}

/* ── Multi-day first/last half-day toggles ── */
.half-day-toggles[b-mdywrktqyk] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.toggle-row[b-mdywrktqyk] {
    display: flex;
    align-items: center;
    gap: .55rem;
    cursor: pointer;
    padding: .55rem .75rem;
    background: var(--warm-gray);
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 8px;
    transition: border-color .18s cubic-bezier(.4,0,.2,1);
}

.toggle-row:hover[b-mdywrktqyk] { border-color: var(--gold); }

.toggle-label[b-mdywrktqyk] {
    font-size: .75rem;
    color: var(--navy);
    font-family: 'Arial', sans-serif;
}

.half-day-note[b-mdywrktqyk] {
    font-size: .62rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-bg);
    border-radius: 4px;
    padding: 0 4px;
    flex-shrink: 0;
}

/* ── Days preview ── */
.days-preview[b-mdywrktqyk] {
    font-size: .78rem;
    color: var(--accent);
    font-weight: 600;
    margin: 0;
}

.days-preview--warn[b-mdywrktqyk] {
    color: #E24B4A;
    font-weight: 600;
}

.days-preview__note[b-mdywrktqyk] {
    font-size: .68rem;
    color: var(--text-muted);
    margin: .2rem 0 0;
}

.days-preview__note--extended[b-mdywrktqyk] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--navy);
}

/* ── Action buttons ── */
.leave-actions[b-mdywrktqyk] {
    display: flex;
    gap: .75rem;
    padding-top: .25rem;
}

.btn-send[b-mdywrktqyk] {
    background: var(--gold);
    color: var(--navy);
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: .82rem;
    border: none;
    cursor: pointer;
    flex: 1;
    transition: background .15s cubic-bezier(.4,0,.2,1);
}

.btn-send:hover:not(:disabled)[b-mdywrktqyk] { background: var(--gold-light); }
.btn-send:disabled[b-mdywrktqyk] { opacity: .5; cursor: not-allowed; }

.btn-cancel[b-mdywrktqyk] {
    background: transparent;
    color: var(--text-muted);
    border: 0.5px solid var(--warm-gray-2);
    padding: 9px 18px;
    border-radius: 8px;
    font-size: .82rem;
    cursor: pointer;
    flex: 1;
    transition: border-color .15s cubic-bezier(.4,0,.2,1);
}

.btn-cancel:hover[b-mdywrktqyk] { border-color: var(--gold); }

/* ── History section ── */
.history-section[b-mdywrktqyk] {
    padding: 0 1.25rem 2rem;
    flex: 1;
}

.section__title[b-mdywrktqyk] {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-muted);
    margin: 0 0 .75rem;
}

.history-list[b-mdywrktqyk] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.loading-state[b-mdywrktqyk],
.empty-state[b-mdywrktqyk] {
    font-size: .78rem;
    color: var(--text-muted);
    text-align: center;
    padding: 2rem 1rem;
}

/* ── Leave entry (accordion) ── */
.leave-entry[b-mdywrktqyk] {
    background: #fff;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: border-color .15s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 1px 4px rgba(27,42,74,.07);
}

.leave-entry--open[b-mdywrktqyk] { border-color: var(--accent); }

.leave-row[b-mdywrktqyk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .75rem 1rem;
    cursor: pointer;
    gap: .5rem;
}

.leave-row:hover[b-mdywrktqyk] { background: rgba(15,110,86,.04); }

.leave-row__left[b-mdywrktqyk] {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    flex: 1;
}

.leave-row__right[b-mdywrktqyk] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

.leave-row__dates[b-mdywrktqyk] {
    font-size: .78rem;
    color: var(--navy);
    font-weight: 500;
}

.leave-row__dates--short[b-mdywrktqyk] { display: none; }

.leave-row__days[b-mdywrktqyk] {
    font-size: .68rem;
    color: var(--text-muted);
    background: var(--warm-gray);
    padding: 1px 6px;
    border-radius: 4px;
}

.leave-row__chevron[b-mdywrktqyk] {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    transition: transform .2s cubic-bezier(.4,0,.2,1);
}

.leave-entry--open .leave-row__chevron[b-mdywrktqyk] { transform: rotate(180deg); }

.unread-dot[b-mdywrktqyk] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

/* ── Type badges (colours match admin calendar legend) ── */
.type-badge[b-mdywrktqyk] {
    font-size: .6rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid transparent;
}

.type-badge--holiday[b-mdywrktqyk]    { background: #E8C547; color: #7A5A00; border-color: #C9A93A; }
.type-badge--sick[b-mdywrktqyk]       { background: #F9A8A8; color: #7A1A1A; border-color: #E88484; }
.type-badge--paternity[b-mdywrktqyk]  { background: #93C5FD; color: #1E3A5F; border-color: #6DA9F0; }
.type-badge--maternity[b-mdywrktqyk]  { background: #FBCFE8; color: #7A2050; border-color: #F0A8D0; }
.type-badge--compassion[b-mdywrktqyk] { background: #C4B5FD; color: #4C1D95; border-color: #A78BFA; }
.type-badge--study[b-mdywrktqyk]      { background: #67E8F9; color: #134E4A; border-color: #3FD4E8; }
.type-badge--unpaid[b-mdywrktqyk]     { background: #CBD5E1; color: #334155; border-color: #A9B6C5; }
.type-badge--other[b-mdywrktqyk]      { background: #A7F3C0; color: #14532D; border-color: #7FE3A0; }

/* ── Status badges ── */
.badge[b-mdywrktqyk] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.badge--active[b-mdywrktqyk]   { background: #EAF3DE; color: #27500A; border: 1px solid #B8DABB; }
.badge--pending[b-mdywrktqyk]  { background: #FAEEDA; color: #633806; }
.badge--delete[b-mdywrktqyk]   { background: #FCEBEB; color: #E24B4A; border: 1px solid #f5c6c6; }
.badge--extended[b-mdywrktqyk] { background: #EAF0FA; color: #1B2A4A; border: 1px solid #BDD0EF; }

.badge__icon[b-mdywrktqyk] {
    display: none;
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

/* ── Detail / comments ── */
.leave-detail[b-mdywrktqyk] {
    padding: .75rem 1rem 1rem;
    border-top: 0.5px solid var(--warm-gray-2);
    display: flex;
    flex-direction: column;
    gap: .6rem;
    animation: fadeIn-b-mdywrktqyk .18s ease;
}

.leave-detail__notes[b-mdywrktqyk] {
    font-size: .85rem;
    color: var(--navy);
    margin: 0;
    font-style: italic;
    font-family: Arial, sans-serif;
}

.leave-detail__empty[b-mdywrktqyk] {
    font-size: .72rem;
    color: var(--text-muted);
    font-style: italic;
    font-family: Arial, sans-serif;
    margin: 0;
}

/* ── Detail tabs ── */
.detail-tabs[b-mdywrktqyk] {
    display: flex;
    border-bottom: 1.5px solid var(--warm-gray-2);
    margin-bottom: -.1rem;
}

.detail-tab[b-mdywrktqyk] {
    padding: .42rem .9rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color .15s, border-color .15s;
}

.detail-tab:hover:not(.detail-tab--active):not(:disabled)[b-mdywrktqyk] { color: var(--navy); }

.detail-tab--active[b-mdywrktqyk] {
    color: var(--navy);
    border-bottom-color: var(--accent);
}

.detail-tab--disabled[b-mdywrktqyk],
.detail-tab:disabled[b-mdywrktqyk] {
    cursor: not-allowed;
    opacity: .5;
}

.detail-tab__count[b-mdywrktqyk] {
    font-size: .6rem;
    background: var(--warm-gray-2);
    color: var(--text-muted);
    border: 1px solid var(--warm-gray-2);
    border-radius: 20px;
    padding: 1px 6px;
    font-weight: 700;
    line-height: 1.4;
}

.detail-tab--active .detail-tab__count[b-mdywrktqyk] {
    background: rgba(15,110,86,.12);
    color: var(--accent);
    border-color: rgba(15,110,86,.3);
}

.detail-tab__count--zero[b-mdywrktqyk] {
    background: transparent;
    color: var(--text-light);
    border-color: var(--warm-gray-2);
}

.leave-detail__meta[b-mdywrktqyk] {
    font-size: .75rem;
    color: var(--text-muted);
    margin: 0;
    font-family: Arial, sans-serif;
}

.leave-detail__meta--duration[b-mdywrktqyk] {
    font-size: .82rem;
    color: var(--navy);
    font-weight: 600;
}

.leave-detail__meta--extended[b-mdywrktqyk] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--navy);
}

/* ── Action buttons ── */
.act-btn[b-mdywrktqyk] {
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 6px;
    padding: 5px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: var(--transition);
}

.act-btn svg[b-mdywrktqyk] { width: 14px; height: 14px; }

.act-btn--delete svg[b-mdywrktqyk]   { stroke: #E24B4A; }
.act-btn--delete:hover[b-mdywrktqyk] { border-color: #E24B4A; background: #FCEBEB; }
.act-btn--delete[b-mdywrktqyk]       { transition: border-color .18s, background .18s, padding .22s cubic-bezier(.4,0,.2,1); }

.act-btn--delete .del-label[b-mdywrktqyk] {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    margin-left: 0;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    white-space: nowrap;
    color: #E24B4A;
    transition: max-width .22s cubic-bezier(.4,0,.2,1),
                opacity .15s .07s,
                margin-left .22s cubic-bezier(.4,0,.2,1);
}

.act-btn--delete--confirm[b-mdywrktqyk]              { background: #FCEBEB; border-color: #E24B4A; padding: 5px 8px; }
.act-btn--delete--confirm:hover[b-mdywrktqyk]        { background: #f0c8c8; border-color: #E24B4A; }
.act-btn--delete--confirm .del-label[b-mdywrktqyk]   { max-width: 50px; opacity: 1; margin-left: 4px; }

.act-btn--edit svg[b-mdywrktqyk]   { stroke: var(--gold); }
.act-btn--edit:hover[b-mdywrktqyk] { border-color: var(--gold); background: #FFF8EC; }

/* ── Comment thread ── */
.comment-loading[b-mdywrktqyk] {
    font-size: .72rem;
    color: var(--text-muted);
}

.comment-thread[b-mdywrktqyk] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.comment[b-mdywrktqyk] {
    padding: .4rem .65rem;
    border-radius: 6px;
    font-size: .75rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.comment--admin[b-mdywrktqyk] {
    background: rgba(27,42,74,.06);
    border-left: 3px solid var(--navy);
}

.comment--user[b-mdywrktqyk] {
    background: var(--accent-bg);
    border-left: 3px solid var(--accent);
}

.comment__author[b-mdywrktqyk] {
    font-weight: 700;
    font-size: .68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.comment__text[b-mdywrktqyk] { color: var(--navy); }

.comment__time[b-mdywrktqyk] {
    font-size: .65rem;
    color: var(--text-light);
    margin-top: .1rem;
}

/* ── Comment compose (user reply box) ── */
.comment-compose[b-mdywrktqyk] {
    display: flex;
    flex-direction: column;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 7px;
    background: #fff;
    transition: border-color .15s;
}

.comment-compose:focus-within[b-mdywrktqyk] { border-color: var(--accent); }

.comment-compose__input[b-mdywrktqyk] {
    flex: 1;
    padding: .45rem .65rem;
    border: none;
    border-radius: 7px 7px 0 0;
    font-size: .75rem;
    background: transparent;
    color: var(--navy);
    resize: none;
    min-height: 38px;
    max-height: 120px;
    font-family: 'Arial', sans-serif;
    outline: none;
}

.comment-compose__input[b-mdywrktqyk]::placeholder { color: var(--text-light); }

.comment-compose__bar[b-mdywrktqyk] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-top: 0.5px solid var(--warm-gray-2);
    flex-wrap: wrap;
}

.comment-compose__btn[b-mdywrktqyk] {
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: .72rem;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
    transition: background .15s;
}

.comment-compose__btn:hover:not(:disabled)[b-mdywrktqyk] { background: var(--accent-light); }
.comment-compose__btn:disabled[b-mdywrktqyk] { opacity: .4; cursor: not-allowed; }

/* ── Comment attachments ── */
.comment__attachments[b-mdywrktqyk] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 5px;
    margin-top: 5px;
}

.comment__attach-chip[b-mdywrktqyk] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 20px;
    background: #fff;
    font-size: .65rem;
    color: var(--navy);
    cursor: pointer;
    font-family: Arial, sans-serif;
    transition: background .15s;
}

.comment__attach-chip:hover[b-mdywrktqyk] { background: var(--warm-gray); border-color: var(--accent); }

.comment__attach-icon[b-mdywrktqyk] { font-size: .62rem; font-weight: 700; color: var(--text-muted); }

.comment__attach-name[b-mdywrktqyk] {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comment__attach-thumb[b-mdywrktqyk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.comment__attach-thumb:hover[b-mdywrktqyk] {
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

.comment__attach-img[b-mdywrktqyk] {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 5px;
    display: block;
}

.comment__attach-fname[b-mdywrktqyk] {
    font-size: .58rem;
    color: var(--text-muted);
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: Arial, sans-serif;
}

.btn-load-more[b-mdywrktqyk] {
    width: 100%;
    padding: .65rem;
    background: transparent;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: var(--radius-card);
    font-size: .75rem;
    color: var(--text-muted);
    cursor: pointer;
    margin-top: .25rem;
    transition: border-color .15s cubic-bezier(.4,0,.2,1);
}

.btn-load-more:hover[b-mdywrktqyk] { border-color: var(--gold); }

/* ── Responsive ── */
@media (min-width: 640px) {
    .hero[b-mdywrktqyk] { padding: 2rem 2rem 2.5rem; }
    .hero__name[b-mdywrktqyk] { font-size: 1.7rem; }
    .stats[b-mdywrktqyk] { padding: 1.75rem 2rem 1rem; }
    .leave-form-wrap[b-mdywrktqyk] { padding: 0 2rem 1.5rem; max-width: 800px; margin-left: auto; margin-right: auto; width: 100%; }
    .history-section[b-mdywrktqyk] { padding: 0 2rem 2rem; }
}

@media (min-width: 900px) {
    .leave-wrapper[b-mdywrktqyk] { box-shadow: 0 0 0 1px var(--warm-gray-2); }
    .stats[b-mdywrktqyk] { max-width: 800px; margin-left: auto; margin-right: auto; width: 100%; }
    .history-section[b-mdywrktqyk] { max-width: 800px; margin-left: auto; margin-right: auto; width: 100%; }
}

@media (max-width: 480px) {
    .leave-dates[b-mdywrktqyk] { grid-template-columns: 1fr; }

    .badge[b-mdywrktqyk] {
        padding: 4px;
        border-radius: 50%;
    }
    .badge__icon[b-mdywrktqyk] { display: block; }
    .badge__text[b-mdywrktqyk] { display: none; }

    .leave-row__dates--full[b-mdywrktqyk]  { display: none; }
    .leave-row__dates--short[b-mdywrktqyk] { display: inline; }
}

/* ── Attachment picker ── */
.field-optional[b-mdywrktqyk] {
    font-size: .65rem;
    font-weight: 400;
    color: var(--text-light);
    text-transform: none;
    letter-spacing: 0;
}

.attach-drop-area[b-mdywrktqyk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    border: 1.5px dashed var(--warm-gray-2);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s cubic-bezier(.4,0,.2,1);
    user-select: none;
}
.attach-drop-area:hover[b-mdywrktqyk],
.attach-drop-area--has-files[b-mdywrktqyk] { border-color: var(--accent); }

.attach-icon[b-mdywrktqyk] { width: 22px; height: 22px; color: var(--text-muted); }
.attach-label[b-mdywrktqyk] { font-size: .78rem; font-weight: 600; color: var(--text-muted); }
.attach-sub[b-mdywrktqyk]   { font-size: .65rem; color: var(--text-light); }

.attach-list[b-mdywrktqyk] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: .5rem;
}

.attach-item[b-mdywrktqyk] {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--warm-gray);
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 6px;
    padding: .35rem .6rem;
    font-size: .72rem;
}
.attach-item__icon[b-mdywrktqyk] {
    font-size: .58rem;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 28px;
    text-align: center;
    background: var(--warm-gray-2);
    padding: 2px 4px;
    border-radius: 3px;
}
.attach-item__name[b-mdywrktqyk] {
    flex: 1;
    color: var(--navy);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.attach-item__size[b-mdywrktqyk]  { color: var(--text-light); font-size: .65rem; white-space: nowrap; }
.attach-item__remove[b-mdywrktqyk] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: .82rem;
    padding: 0 2px;
    line-height: 1;
    transition: color .15s cubic-bezier(.4,0,.2,1);
}
.attach-item__remove:hover[b-mdywrktqyk] { color: #E24B4A; }

/* paperclip chip in history row */
.attach-chip[b-mdywrktqyk] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: .6rem;
    color: var(--text-muted);
    background: var(--warm-gray);
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 4px;
    padding: 1px 5px;
}
.attach-chip svg[b-mdywrktqyk] { width: 10px; height: 10px; }

/* attachment viewer in accordion body */
.attach-viewer[b-mdywrktqyk] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-bottom: .5rem;
}
.attach-viewer__label[b-mdywrktqyk] {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}
.attach-viewer__list[b-mdywrktqyk] { display: flex; flex-direction: column; gap: .3rem; }
.attach-viewer__item[b-mdywrktqyk] {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: transparent;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 6px;
    padding: .35rem .6rem;
    cursor: pointer;
    font-size: .72rem;
    color: var(--navy);
    text-align: left;
    width: 100%;
    transition: border-color .15s cubic-bezier(.4,0,.2,1), background .15s cubic-bezier(.4,0,.2,1);
}
.attach-viewer__item:hover[b-mdywrktqyk] { border-color: var(--accent); background: var(--accent-bg); }
.attach-viewer__icon[b-mdywrktqyk] {
    font-size: .58rem;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 28px;
    text-align: center;
    background: var(--warm-gray-2);
    padding: 2px 4px;
    border-radius: 3px;
}
.attach-viewer__name[b-mdywrktqyk] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.attach-viewer__size[b-mdywrktqyk]  { color: var(--text-light); font-size: .65rem; white-space: nowrap; }
.attach-viewer__open-hint[b-mdywrktqyk] {
    font-size: .6rem;
    color: var(--text-muted);
    white-space: nowrap;
    margin-left: auto;
}
/* /Pages/Login.razor.rz.scp.css */
/* ============================================================
   Login.razor.css  –  HB-Staff Login Page
   Full-page centred card · Navy / Gold / Warm-Gray palette
   ============================================================ */

/* ── Page shell ─────────────────────────────────────────────── */
.login-page[b-o7tcdl65p5] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #1B2A4A;         /* navy full-page bg */
    padding: 1.5rem 1.25rem;
    font-family: 'Arial', sans-serif;
}

/* ── Card ────────────────────────────────────────────────────── */
.login-card[b-o7tcdl65p5] {
    width: 100%;
    max-width: 380px;
    background: #fff;
    border-radius: 16px;
    padding: 2.5rem 2rem 2rem;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .35);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* ── Brand / Logo ────────────────────────────────────────────── */
.login-brand[b-o7tcdl65p5] {
    font-family: 'Arial Narrow', 'Arial', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1;
    margin-bottom: .1rem;
}

.login-brand__hb[b-o7tcdl65p5]   { color: #C9A84C; }
.login-brand__staff[b-o7tcdl65p5] { color: #1B2A4A; margin-left: .25em; }

.login-subtitle[b-o7tcdl65p5] {
    text-align: center;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #6B7A99;
    margin: -.6rem 0 .4rem;
}

/* ── Form fields ─────────────────────────────────────────────── */
.login-field[b-o7tcdl65p5] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.login-label[b-o7tcdl65p5] {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #1B2A4A;
}

.login-input[b-o7tcdl65p5] {
    width: 100%;
    padding: .7rem .9rem;
    border: 1.5px solid #EAE6DF;
    border-radius: 8px;
    font-size: .88rem;
    font-family: 'Arial', sans-serif;
    color: #1B2A4A;
    background: #F4F1EC;
    outline: none;
    transition: border-color .18s, background .18s;
    box-sizing: border-box;
}

.login-input:focus[b-o7tcdl65p5] {
    border-color: #C9A84C;
    background: #fff;
}

.login-input[b-o7tcdl65p5]::placeholder { color: #aab0c0; }

/* ── Password show/hide ──────────────────────────────────────── */
.pw-wrap[b-o7tcdl65p5] {
    position: relative;
}

.pw-wrap .login-input[b-o7tcdl65p5] {
    padding-right: 2.4rem;
}

.pw-toggle[b-o7tcdl65p5] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: #6B7A99;
    display: flex;
    align-items: center;
    line-height: 1;
    transition: color .15s;
}

.pw-toggle:hover[b-o7tcdl65p5] { color: #C9A84C; }

.pw-toggle svg[b-o7tcdl65p5] {
    width: 16px;
    height: 16px;
}

/* ── Error message ───────────────────────────────────────────── */
.login-error[b-o7tcdl65p5] {
    background: #FCEBEB;
    border: 1px solid #f5c6c6;
    border-radius: 8px;
    padding: .6rem .9rem;
    font-size: .78rem;
    font-weight: 600;
    color: #c0392b;
}

/* ── Warming-up banner ───────────────────────────────────────── */
.login-warming[b-o7tcdl65p5] {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #EAF0FA;
    color: #1B2A4A;
    border: 1px solid #BDD0EF;
    border-radius: 7px;
    padding: .55rem .85rem;
    font-size: .75rem;
    font-weight: 600;
}

.login-warming__dot[b-o7tcdl65p5] {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1B2A4A;
    animation: pulse-b-o7tcdl65p5 1s cubic-bezier(.4,0,.2,1) infinite;
}

@keyframes pulse-b-o7tcdl65p5 {
    0%, 100% { opacity: 1; }
    50%       { opacity: .3; }
}

/* ── Sign-in button ──────────────────────────────────────────── */
.login-btn[b-o7tcdl65p5] {
    width: 100%;
    padding: .82rem 1rem;
    background: #C9A84C;
    color: #1B2A4A;
    border: none;
    border-radius: 8px;
    font-family: 'Arial Narrow', 'Arial', sans-serif;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .18s, transform .15s;
    margin-top: .4rem;
}

.login-btn:hover:not(:disabled)[b-o7tcdl65p5] {
    background: #E2C07A;
    transform: translateY(-1px);
}

.login-btn:disabled[b-o7tcdl65p5] {
    opacity: .6;
    cursor: not-allowed;
}

/* ── Forgot password link ────────────────────────────────────── */
.login-forgot[b-o7tcdl65p5] {
    text-align: center;
    font-size: .75rem;
    color: #6B7A99;
    text-decoration: none;
    letter-spacing: .04em;
    margin-top: -.2rem;
    transition: color .15s;
}

.login-forgot:hover[b-o7tcdl65p5] { color: #C9A84C; }

/* ── Footer ──────────────────────────────────────────────────── */
.login-footer[b-o7tcdl65p5] {
    margin-top: 1.5rem;
    font-size: .62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .35);
}

/* ── Responsive — wider card on tablet ──────────────────────── */
@media (min-width: 480px) {
    .login-card[b-o7tcdl65p5] { padding: 3rem 2.5rem 2.5rem; }
    .login-brand[b-o7tcdl65p5] { font-size: 2rem; }
}
/* /Pages/ResetPassword.razor.rz.scp.css */
/* ============================================================
   ResetPassword.razor.css  –  HB-Staff Reset Password Page
   ============================================================ */

/* ── Page shell ─────────────────────────────────────────────── */
.rp-page[b-zsebfgj9mz] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #1B2A4A;
    padding: 1.5rem 1.25rem;
    font-family: 'Arial', sans-serif;
}

/* ── Card ─────────────────────────────────────────────────────── */
.rp-card[b-zsebfgj9mz] {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 16px;
    padding: 2.5rem 2rem 2rem;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .35);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* ── Brand ────────────────────────────────────────────────────── */
.rp-brand[b-zsebfgj9mz] {
    font-family: 'Arial Narrow', 'Arial', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1;
    margin-bottom: .1rem;
}

.rp-brand__hb[b-zsebfgj9mz]   { color: #C9A84C; }
.rp-brand__staff[b-zsebfgj9mz] { color: #1B2A4A; margin-left: .25em; }

.rp-subtitle[b-zsebfgj9mz] {
    text-align: center;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #6B7A99;
    margin: -.6rem 0 .2rem;
}

/* ── Instruction ─────────────────────────────────────────────── */
.rp-instruction[b-zsebfgj9mz] {
    font-size: .8rem;
    color: #6B7A99;
    text-align: center;
    margin: -.2rem 0 .1rem;
}

/* ── User chip ───────────────────────────────────────────────── */
.rp-user-chip[b-zsebfgj9mz] {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #F4F1EC;
    border: 1px solid #EAE6DF;
    border-radius: 8px;
    padding: .55rem .85rem;
    font-size: .78rem;
    color: #1B2A4A;
    font-weight: 600;
}

.rp-user-chip svg[b-zsebfgj9mz] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: #6B7A99;
}

/* ── Fields ──────────────────────────────────────────────────── */
.rp-field[b-zsebfgj9mz] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.rp-label[b-zsebfgj9mz] {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #1B2A4A;
}

.rp-req[b-zsebfgj9mz] { color: #C9A84C; }

.rp-input[b-zsebfgj9mz] {
    width: 100%;
    padding: .7rem .9rem;
    border: 1.5px solid #EAE6DF;
    border-radius: 8px;
    font-size: .88rem;
    font-family: 'Arial', sans-serif;
    color: #1B2A4A;
    background: #F4F1EC;
    outline: none;
    transition: border-color .18s, background .18s;
    box-sizing: border-box;
}

.rp-input:focus[b-zsebfgj9mz] { border-color: #C9A84C; background: #fff; }
.rp-input--error[b-zsebfgj9mz],
.rp-input--error:focus[b-zsebfgj9mz] { border-color: #E24B4A; }
.rp-input[b-zsebfgj9mz]::placeholder { color: #aab0c0; }

.rp-hint-error[b-zsebfgj9mz] {
    font-size: .7rem;
    color: #E24B4A;
    font-weight: 600;
}

/* ── Password show/hide ──────────────────────────────────────── */
.pw-wrap[b-zsebfgj9mz] {
    position: relative;
}

.pw-wrap .rp-input[b-zsebfgj9mz] {
    padding-right: 2.4rem;
}

.pw-toggle[b-zsebfgj9mz] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: #6B7A99;
    display: flex;
    align-items: center;
    line-height: 1;
    transition: color .15s;
}

.pw-toggle:hover[b-zsebfgj9mz] { color: #C9A84C; }

.pw-toggle svg[b-zsebfgj9mz] {
    width: 16px;
    height: 16px;
}

/* ── Password requirements ───────────────────────────────────── */
.pw-requirements[b-zsebfgj9mz] {
    list-style: none;
    margin: 0;
    padding: .5rem .75rem;
    background: #F4F1EC;
    border: 1px solid #EAE6DF;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.pw-requirements li[b-zsebfgj9mz] {
    font-size: .72rem;
    font-family: Arial, sans-serif;
    padding-left: 1.25rem;
    position: relative;
}

.pw-requirements li[b-zsebfgj9mz]::before {
    content: '✕';
    position: absolute;
    left: 0;
    font-size: .65rem;
    font-weight: 700;
}

.req--met[b-zsebfgj9mz]        { color: #27500A; }
.req--met[b-zsebfgj9mz]::before { content: '✓'; }
.req--unmet[b-zsebfgj9mz]      { color: #6B7A99; }

/* ── Error box ───────────────────────────────────────────────── */
.rp-error[b-zsebfgj9mz] {
    background: #FCEBEB;
    border: 1px solid #f5c6c6;
    border-radius: 8px;
    padding: .6rem .9rem;
    font-size: .78rem;
    font-weight: 600;
    color: #c0392b;
}

/* ── Primary button / link button ───────────────────────────── */
.rp-btn[b-zsebfgj9mz] {
    width: 100%;
    padding: .82rem 1rem;
    background: #C9A84C;
    color: #1B2A4A;
    border: none;
    border-radius: 8px;
    font-family: 'Arial Narrow', 'Arial', sans-serif;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .18s, transform .15s;
    text-align: center;
    text-decoration: none;
    display: block;
    box-sizing: border-box;
    margin-top: .2rem;
}

.rp-btn:hover:not(:disabled)[b-zsebfgj9mz] {
    background: #E2C07A;
    transform: translateY(-1px);
}

.rp-btn:disabled[b-zsebfgj9mz] {
    opacity: .6;
    cursor: not-allowed;
}

/* ── State panels (invalid / success) ────────────────────────── */
.rp-state[b-zsebfgj9mz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    text-align: center;
}

.rp-state__icon[b-zsebfgj9mz] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rp-state__icon svg[b-zsebfgj9mz] { width: 26px; height: 26px; }

.rp-state__icon--success[b-zsebfgj9mz] {
    background: rgba(39, 80, 10, .1);
    color: #27500A;
}

.rp-state__icon--error[b-zsebfgj9mz] {
    background: #FCEBEB;
    color: #E24B4A;
}

.rp-state__title[b-zsebfgj9mz] {
    font-family: 'Georgia', serif;
    font-size: 1.2rem;
    color: #1B2A4A;
    margin: 0;
}

.rp-state__sub[b-zsebfgj9mz] {
    font-size: .8rem;
    color: #6B7A99;
    line-height: 1.5;
    margin: 0;
}

/* ── Loading spinner ─────────────────────────────────────────── */
.rp-loading[b-zsebfgj9mz] {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
}

.rp-spinner[b-zsebfgj9mz] {
    width: 28px;
    height: 28px;
    border: 3px solid #EAE6DF;
    border-top-color: #C9A84C;
    border-radius: 50%;
    animation: rp-spin-b-zsebfgj9mz .7s linear infinite;
}

@keyframes rp-spin-b-zsebfgj9mz { to { transform: rotate(360deg); } }

/* ── Footer ──────────────────────────────────────────────────── */
.rp-footer[b-zsebfgj9mz] {
    margin-top: 1.5rem;
    font-size: .62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .35);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (min-width: 480px) {
    .rp-card[b-zsebfgj9mz] { padding: 3rem 2.5rem 2.5rem; }
    .rp-brand[b-zsebfgj9mz] { font-size: 2rem; }
}
/* /Pages/Submissions.razor.rz.scp.css */
/* ============================================================
   Submissions.razor.css — HB-Staff My Submissions
   Mobile-first · Navy / Gold / Warm-Gray palette
   Module accent: purple #4A2A7A
   ============================================================ */

/* ── Wrapper ─────────────────────────────────────────────── */
.submissions-wrapper[b-qhlh92i004] {
    --navy:        #1B2A4A;
    --navy-dark:   #111d33;
    --gold:        #C9A84C;
    --gold-light:  #E2C07A;
    --warm-gray:   #F4F1EC;
    --warm-gray-2: #EAE6DF;
    --text-muted:  #6B7A99;
    --purple:      #4A2A7A;
    --radius-card: 10px;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: #F4F1EC;
    font-family: 'Arial Narrow', 'Arial', sans-serif;
}


/* ── Hero ────────────────────────────────────────────────── */
.hero[b-qhlh92i004] {
    padding: 1.5rem 1.5rem 2.2rem;
    min-height: 148px;
    background: #1B2A4A;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.hero-arc[b-qhlh92i004] {
    position: absolute;
    bottom: -1px;
    left: -5%;
    width: 110%;
    height: 32px;
    background: #F4F1EC;
    border-radius: 50% 50% 0 0;
}

.hero__greeting[b-qhlh92i004] {
    font-size: .75rem;
    color: #E2C07A;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-family: 'Arial Narrow', Arial, sans-serif;
    margin-bottom: .2rem;
}

.hero__name[b-qhlh92i004] {
    font-size: 1.4rem;
    font-weight: 700;
    font-family: Georgia, serif;
    line-height: 1.15;
    color: #fff;
    margin-bottom: .15rem;
}

.hero__sub[b-qhlh92i004] {
    font-size: .78rem;
    color: rgba(255,255,255,.55);
    font-family: Arial, sans-serif;
}

/* ── Stats ───────────────────────────────────────────────── */
.stats[b-qhlh92i004] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 1.75rem 1.25rem 1rem;
}

.stat[b-qhlh92i004] {
    background: #fff;
    border: 0.5px solid #EAE6DF;
    border-radius: 10px;
    padding: .75rem .5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
}

.stat__n[b-qhlh92i004] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1B2A4A;
    font-family: Georgia, serif;
}

.stat__l[b-qhlh92i004] {
    font-size: .65rem;
    color: #6B7A99;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
    display: flex;
    align-items: center;
    gap: 4px;
}

.stat__dot[b-qhlh92i004] {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.stat__dot--navy[b-qhlh92i004]  { background: #1B2A4A; }
.stat__dot--green[b-qhlh92i004] { background: #27500A; }
.stat__dot--gold[b-qhlh92i004]  { background: #C9A84C; }
.stat__dot--red[b-qhlh92i004]   { background: #E24B4A; }

/* Stat download button */
.stat__dl[b-qhlh92i004] {
    background: none;
    border: 0.5px solid #EAE6DF;
    border-radius: 6px;
    padding: 3px 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    transition: border-color .15s, background .15s;
}

.stat__dl svg[b-qhlh92i004] {
    width: 12px;
    height: 12px;
    stroke: #6B7A99;
    transition: stroke .15s;
}

.stat__dl:hover[b-qhlh92i004] {
    border-color: #C9A84C;
    background: #FFF8EC;
}

.stat__dl:hover svg[b-qhlh92i004] { stroke: #C9A84C; }

.stat--active[b-qhlh92i004] { box-shadow: 0 1px 4px rgba(27,42,74,.07); }
.stat--active-navy[b-qhlh92i004]  { border-color: #1B2A4A; background: rgba(27,42,74,.06); }
.stat--active-green[b-qhlh92i004] { border-color: #B8DABB; background: #EAF3DE; }
.stat--active-gold[b-qhlh92i004]  { border-color: #C9A84C; background: #FAEEDA; }
.stat--active-red[b-qhlh92i004]   { border-color: #f5c6c6; background: #FCEBEB; }

/* ── Section ─────────────────────────────────────────────── */
.section[b-qhlh92i004] {
    flex: 1;
    padding: 0 1.25rem 1.5rem;
}

.history-section[b-qhlh92i004] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: .75rem;
}

.section__header[b-qhlh92i004] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--warm-gray-2);
    flex-wrap: wrap;
    gap: .5rem;
}

.section__title[b-qhlh92i004] {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
}

.title-sort[b-qhlh92i004] {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.btn-sort[b-qhlh92i004] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid #D5CFCA;
    border-radius: 6px;
    font-size: .7rem;
    font-weight: 700;
    color: #3D4F6E;
    background: #fff;
    cursor: pointer;
    letter-spacing: .04em;
    transition: border-color .15s, color .15s, background .15s;
}

.btn-sort svg[b-qhlh92i004] { stroke: #3D4F6E; transition: stroke .15s; }

.btn-sort:hover[b-qhlh92i004] {
    border-color: #C9A84C;
    color: #1B2A4A;
    background: #FDFAF4;
}

.btn-sort:hover svg[b-qhlh92i004] { stroke: #1B2A4A; }

.btn-sort--asc[b-qhlh92i004] {
    border-color: #C9A84C;
    background: #FFF5E0;
    color: #9A6E1A;
}

.btn-sort--asc svg[b-qhlh92i004] { stroke: #9A6E1A; }

/* Search + Filter controls */
.section__controls[b-qhlh92i004] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.search-wrap[b-qhlh92i004] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-wrap svg[b-qhlh92i004] {
    position: absolute;
    left: 8px;
    width: 14px;
    height: 14px;
    stroke: #6B7A99;
    pointer-events: none;
}

.search-wrap input[b-qhlh92i004] {
    padding: 6px 10px 6px 28px;
    border: 0.5px solid #EAE6DF;
    border-radius: 7px;
    font-size: .75rem;
    background: #fff;
    color: #1B2A4A;
    width: 150px;
    outline: none;
    transition: border-color .18s;
    font-family: Arial, sans-serif;
}

.search-wrap input:focus[b-qhlh92i004] { border-color: #C9A84C; }

.filter-wrap[b-qhlh92i004] { display: flex; align-items: center; }

.filter-select[b-qhlh92i004] {
    padding: 6px 10px;
    border: 0.5px solid #EAE6DF;
    border-radius: 7px;
    font-size: .75rem;
    background: #fff;
    color: #1B2A4A;
    outline: none;
    cursor: pointer;
    font-family: Arial, sans-serif;
    transition: border-color .18s;
}

.filter-select:focus[b-qhlh92i004] { border-color: #C9A84C; }

.btn-close-all[b-qhlh92i004] {
    display: flex; align-items: center; justify-content: center;
    padding: 5px; border: 0.5px solid var(--warm-gray-2);
    border-radius: 6px; background: transparent;
    color: var(--text-muted); cursor: pointer;
    transition: var(--transition);
}
.btn-close-all:hover[b-qhlh92i004] { border-color: var(--gold); background: #FFF8EC; color: var(--navy); }
.btn-close-all:disabled[b-qhlh92i004] { opacity: 0.35; cursor: not-allowed; }

/* ── Form List ───────────────────────────────────────────── */
.form-list[b-qhlh92i004] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-entry[b-qhlh92i004] {
    display: flex;
    flex-direction: column;
}

.form-entry--open .form-row[b-qhlh92i004] {
    border-color: #C9A84C;
    border-radius: 10px 10px 0 0;
    background: #FFFBF2;
}

/* Notification zone items */
.form-entry--notification .form-row[b-qhlh92i004] {
    background: #F2F6FD;
    border-color: #BDD0EF;
    border-left: 2px solid #7AAAD8;
}

.form-entry--notification .form-row:hover[b-qhlh92i004] {
    border-color: #8BBAE8;
    background: #EBF2FB;
}

.form-entry--notification.form-entry--open .form-row[b-qhlh92i004] {
    background: #EBF2FB;
    border-left-color: #1B2A4A;
}

.form-entry--notification .form-accordion--open[b-qhlh92i004] {
    background: #F4F8FD;
    border-color: #BDD0EF;
}

/* ── Flat notification items ─────────────────────────────── */
.notif-item[b-qhlh92i004] {
    display: flex;
    flex-direction: column;
}

.notif-item__row[b-qhlh92i004] {
    background: #F2F6FD;
    border: 0.5px solid #BDD0EF;
    border-left: 3px solid #7AAAD8;
    border-radius: 10px;
    padding: .65rem 1rem;
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 12px;
    transition: border-color .18s, background .18s;
}

.notif-item__row:hover[b-qhlh92i004] {
    background: #EBF2FB;
    border-color: #8BBAE8;
}

.notif-item--open .notif-item__row[b-qhlh92i004] {
    background: #EBF2FB;
    border-left-color: #1B2A4A;
    border-radius: 10px 10px 0 0;
}

.notif-item__info[b-qhlh92i004] { min-width: 0; }

.notif-item__title[b-qhlh92i004] {
    font-size: .82rem;
    font-weight: 700;
    color: #1B2A4A;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    font-family: Arial, sans-serif;
    margin-bottom: .15rem;
}

.notif-item__meta[b-qhlh92i004] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: .15rem;
}

.notif-item__amount[b-qhlh92i004] {
    font-size: .88rem;
    font-weight: 700;
    color: #0F6E56;
    font-family: Georgia, serif;
}

.notif-item__tags[b-qhlh92i004] {
    font-size: .68rem;
    color: #6B7A99;
    font-family: Arial, sans-serif;
}

.notif-chevron[b-qhlh92i004] {
    width: 14px;
    height: 14px;
    stroke: #6B7A99;
    flex-shrink: 0;
    transition: transform .2s cubic-bezier(.4,0,.2,1);
    transform: rotate(-90deg);
}

.notif-chevron--open[b-qhlh92i004] { transform: rotate(0deg); }

.notif-item__accordion[b-qhlh92i004] {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(.4,0,.2,1);
    background: #F4F8FD;
    border: 0.5px solid transparent;
    border-top: none;
    border-radius: 0 0 10px 10px;
}

.notif-item__accordion--open[b-qhlh92i004] {
    max-height: 5000px;
    border-color: #BDD0EF;
}

.form-row[b-qhlh92i004] {
    background: #fff;
    border: 0.5px solid #EAE6DF;
    border-radius: 10px;
    padding: .75rem 1rem;
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 12px;
    transition: border-color .18s;
}

.form-row:hover[b-qhlh92i004] { border-color: #C9A84C; }

/* Purple-accented DARS icon for submissions */
.form-icon[b-qhlh92i004] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(74,42,122,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.form-icon svg[b-qhlh92i004] {
    width: 18px;
    height: 18px;
    stroke: #4A2A7A;
}

/* Teal icon for Daily Exp */
.form-icon--teal[b-qhlh92i004] {
    background: rgba(15,110,86,.1);
}

.form-icon--teal svg[b-qhlh92i004] {
    stroke: #0F6E56;
}

/* Brown icon for Car Exp */
.form-icon--brown[b-qhlh92i004] {
    background: rgba(122,63,27,.1);
}

.form-icon--brown svg[b-qhlh92i004] {
    stroke: #7A3F1B;
}

/* Green icon for Leave */
.form-icon--green[b-qhlh92i004] {
    background: rgba(27,110,74,.1);
}

.form-icon--green svg[b-qhlh92i004] {
    stroke: #1B6E4A;
}

.form-info[b-qhlh92i004] { min-width: 0; }

.form-title[b-qhlh92i004] {
    font-size: .82rem;
    font-weight: 700;
    color: #1B2A4A;
    margin-bottom: .1rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    font-family: Arial, sans-serif;
}

.form-meta[b-qhlh92i004] {
    font-size: .7rem;
    color: #6B7A99;
    font-family: Arial, sans-serif;
}

/* ── Badges ──────────────────────────────────────────────── */
.badge[b-qhlh92i004] {
    display: inline-block;
    font-size: .6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: .05em;
    font-family: Arial, sans-serif;
}

.badge--accepted[b-qhlh92i004] { background: #EAF3DE; color: #27500A; }
.badge--pending[b-qhlh92i004]  { background: #FAEEDA; color: #633806; }
.badge--refused[b-qhlh92i004]  { background: #FCEBEB; color: #E24B4A; }
.badge--new[b-qhlh92i004]      { background: #E24B4A; color: #fff; }
.badge--comments[b-qhlh92i004] {
    background: rgba(83,74,183,.08);
    color: #534AB7;
    border: .5px solid rgba(83,74,183,.18);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.form-badges[b-qhlh92i004] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: .25rem;
}

/* ── Action Buttons ──────────────────────────────────────── */
.form-actions[b-qhlh92i004] {
    display: flex;
    gap: 4px;
    align-items: center;
    min-width: 28px;
}

.act-btn[b-qhlh92i004] {
    background: none;
    border: 0.5px solid #EAE6DF;
    border-radius: 6px;
    padding: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .18s, background .18s;
}

.act-btn svg[b-qhlh92i004] { width: 14px; height: 14px; stroke-width: 1.8; }

.act-btn--download svg[b-qhlh92i004]   { stroke: #1B2A4A; }
.act-btn--download:hover[b-qhlh92i004] { border-color: #C9A84C; background: #FFF8EC; }

.act-btn--delete svg[b-qhlh92i004]   { stroke: #E24B4A; }
.act-btn--delete:hover[b-qhlh92i004] { border-color: #E24B4A; background: #FCEBEB; }
.act-btn--delete[b-qhlh92i004]       { transition: border-color .18s, background .18s, padding .22s cubic-bezier(.4,0,.2,1); }

.act-btn--edit svg[b-qhlh92i004]   { stroke: var(--gold); }
.act-btn--edit:hover[b-qhlh92i004] { border-color: var(--gold); background: #FFF8EC; }

.act-btn--delete .del-label[b-qhlh92i004] {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    margin-left: 0;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    white-space: nowrap;
    color: #E24B4A;
    transition: max-width .22s cubic-bezier(.4,0,.2,1),
                opacity .15s .07s,
                margin-left .22s cubic-bezier(.4,0,.2,1);
}

.act-btn--delete--confirm[b-qhlh92i004]              { background: #FCEBEB; border-color: #E24B4A; padding: 5px 8px; }
.act-btn--delete--confirm:hover[b-qhlh92i004]        { background: #f0c8c8; border-color: #E24B4A; }
.act-btn--delete--confirm .del-label[b-qhlh92i004]   { max-width: 50px; opacity: 1; margin-left: 4px; }

/* ── States ──────────────────────────────────────────────── */
.list-section-header[b-qhlh92i004] {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6B7A99;
    padding: .4rem 0;
    border-bottom: 1px solid #EAE6DF;
    margin-bottom: .6rem;
}

.list-section-header--new[b-qhlh92i004] {
    background: #EAF0FA;
    border: 1px solid #BDD0EF;
    border-left: 3px solid #1B2A4A;
    border-radius: 10px;
    padding: .55rem .75rem;
    margin-bottom: 0;
    color: #1B2A4A;
    cursor: pointer;
    justify-content: space-between;
    user-select: none;
}

.list-section-header--new-open[b-qhlh92i004] {
    border-radius: 10px 10px 0 0;
    border-bottom-color: transparent;
}

.list-section-header--new[b-qhlh92i004]::before {
    display: none;
}

.notif-panel[b-qhlh92i004] {
    background: #EAF0FA;
    border: 1px solid #BDD0EF;
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: .5rem .5rem .6rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: -8px;
    margin-bottom: .3rem;
}

.list-section-header--history[b-qhlh92i004] {
    margin-top: .9rem;
}

.section-header__right[b-qhlh92i004] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-left: auto;
}

.notif-count-badge[b-qhlh92i004] {
    font-size: .58rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 20px;
    background: #E24B4A;
    color: #fff;
    letter-spacing: .04em;
    font-family: Arial, sans-serif;
}

.notif-recent-badge[b-qhlh92i004] {
    font-size: .58rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 20px;
    background: #FAEEDA;
    color: #633806;
    letter-spacing: .04em;
    font-family: Arial, sans-serif;
}

.notif-mark-all-btn[b-qhlh92i004] {
    font-size: .58rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    background: transparent;
    color: var(--navy);
    border: 1px solid #BDD0EF;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
    cursor: pointer;
    transition: var(--transition);
}

.notif-mark-all-btn:hover[b-qhlh92i004] {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}

.section-chevron[b-qhlh92i004] {
    width: 14px;
    height: 14px;
    stroke: #6B7A99;
    flex-shrink: 0;
    transition: transform .2s cubic-bezier(.4,0,.2,1);
    transform: rotate(-90deg);
}

.section-chevron--open[b-qhlh92i004] {
    transform: rotate(0deg);
}

.list-section-header--history[b-qhlh92i004] {
    margin-top: 1.1rem;
}

.no-new-notice[b-qhlh92i004] {
    text-align: center;
    font-size: .73rem;
    color: #aab0c0;
    padding: .7rem 0 .9rem;
    font-style: italic;
    letter-spacing: .02em;
}

.loading-state[b-qhlh92i004],
.empty-state[b-qhlh92i004] {
    text-align: center;
    padding: 2rem;
    font-size: .82rem;
    color: #6B7A99;
    font-family: Arial, sans-serif;
}

/* ── Accordion ───────────────────────────────────────────── */
.form-accordion[b-qhlh92i004] {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(.4,0,.2,1),
                border-color .2s cubic-bezier(.4,0,.2,1);
    background: #fff;
    border: 0.5px solid transparent;
    border-top: none;
    border-radius: 0 0 10px 10px;
}

.form-accordion--open[b-qhlh92i004] {
    max-height: 5000px;
    border-color: #C9A84C;
}

.accordion-body[b-qhlh92i004] {
    padding: .75rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.accordion-loading[b-qhlh92i004] {
    text-align: center;
    padding: 1.5rem;
    font-size: .82rem;
    color: #6B7A99;
    font-family: Arial, sans-serif;
}

.accordion-meta[b-qhlh92i004] {
    font-size: .72rem;
    color: #6B7A99;
    font-family: Arial, sans-serif;
    margin-bottom: .1rem;
}

/* ── Task card ───────────────────────────────────────────── */
.task-card[b-qhlh92i004] {
    background: #fff;
    border: 0.5px solid #EAE6DF;
    border-radius: 10px;
    padding: .75rem 1rem;
}

.task-card__header[b-qhlh92i004] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .4rem;
}

.task-card__num[b-qhlh92i004] {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
    padding: 2px 7px;
    border-radius: 20px;
}
.task-card__num--task[b-qhlh92i004]   { background: #EAF0FA; color: #1B2A4A; border: .5px solid #BDD0EF; }
.task-card__num--travel[b-qhlh92i004] { background: #FAEEDA; color: #633806; border: .5px solid #e8c97a; }

.task-card__time[b-qhlh92i004] {
    font-size: .7rem;
    color: #6B7A99;
    font-family: Arial, sans-serif;
}

.task-del-btn[b-qhlh92i004] {
    margin-left: auto;
    flex-shrink: 0;
}

.task-card__desc[b-qhlh92i004] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: .35rem;
}

.task-card__desc span[b-qhlh92i004] {
    font-size: .68rem;
    background: rgba(74,42,122,.07);
    color: #4A2A7A;
    padding: 2px 7px;
    border-radius: 20px;
    font-family: Arial, sans-serif;
}

/* ── Uploaded datetime row ───────────────────────────────── */
.accordion-submitted[b-qhlh92i004] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .68rem;
    color: #6B7A99;
    font-family: Arial, sans-serif;
    letter-spacing: .04em;
    padding: .1rem 0 .25rem;
}

.accordion-submitted > svg[b-qhlh92i004] {
    width: 12px;
    height: 12px;
    stroke: #C9A84C;
    flex-shrink: 0;
}

.dars-item-del[b-qhlh92i004] {
    margin-left: auto;
    flex-shrink: 0;
}

/* ── Task fields grid (Location / SRRno / Units / Comment) ── */
.task-card__fields[b-qhlh92i004] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 8px;
    margin-bottom: .45rem;
}

.task-field[b-qhlh92i004] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.task-field--full[b-qhlh92i004] {
    grid-column: 1 / -1;
}

.task-field__lbl[b-qhlh92i004] {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6B7A99;
    font-family: Arial, sans-serif;
}

.task-field__val[b-qhlh92i004] {
    font-size: .72rem;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
    word-break: break-word;
}

.task-field__val--na[b-qhlh92i004] {
    color: #aab0c0;
    font-style: italic;
}

.task-field__val--comment[b-qhlh92i004] {
    font-style: italic;
    color: #4B5C78;
}

.task-counters[b-qhlh92i004] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.counter-chip[b-qhlh92i004] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #F4F1EC;
    border: 0.5px solid #EAE6DF;
    border-radius: 7px;
    padding: 3px 7px;
    min-width: 38px;
}

.counter-chip__val[b-qhlh92i004] {
    font-size: .75rem;
    font-weight: 700;
    color: #1B2A4A;
    font-family: Georgia, serif;
    line-height: 1.2;
}

.counter-chip__lbl[b-qhlh92i004] {
    font-size: .56rem;
    color: #6B7A99;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
}

/* ── Daily Expense card (accordion) ─────────────────────── */
.exp-card[b-qhlh92i004] {
    background: #fff;
    border: 0.5px solid #EAE6DF;
    border-radius: 10px;
    padding: .75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.exp-card__row[b-qhlh92i004] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.exp-card__del[b-qhlh92i004] {
    margin-left: auto;
    flex-shrink: 0;
}

.exp-card__amount[b-qhlh92i004] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0F6E56;
    font-family: Georgia, serif;
}

.exp-card__amount--leave[b-qhlh92i004] {
    font-size: .82rem;
    font-weight: 600;
    color: var(--navy);
    font-family: Arial, sans-serif;
}

.exp-card__tags[b-qhlh92i004] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.exp-card__tag[b-qhlh92i004] {
    font-size: .65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(15,110,86,.08);
    color: #0F6E56;
    letter-spacing: .04em;
    font-family: Arial, sans-serif;
}

.exp-card__tag--photo[b-qhlh92i004] {
    background: rgba(27,42,74,.07);
    color: #6B7A99;
}

.exp-card__desc[b-qhlh92i004] {
    font-size: .72rem;
    color: #4B5C78;
    font-style: italic;
    font-family: Arial, sans-serif;
    margin: 0;
    line-height: 1.45;
}

/* ── Bulk Download Modal ─────────────────────────────────── */
.modal-overlay[b-qhlh92i004] {
    position: fixed;
    inset: 0;
    background: rgba(27,42,74,.35);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-card[b-qhlh92i004] {
    background: #fff;
    border-radius: 12px;
    max-width: 420px;
    width: 92%;
    box-shadow: 0 8px 40px rgba(0,0,0,.35);
    animation: fadeScaleIn-b-qhlh92i004 .2s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}

@keyframes fadeScaleIn-b-qhlh92i004 {
    from { opacity: 0; transform: scale(.95); }
    to   { opacity: 1; transform: scale(1); }
}

.modal-header[b-qhlh92i004] {
    background: #1B2A4A;
    color: #fff;
    padding: 1.1rem 1.25rem;
    font-size: .88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-family: Arial, sans-serif;
}

.modal-body[b-qhlh92i004] {
    padding: 1.25rem 1.25rem .75rem;
}

.modal-msg[b-qhlh92i004] {
    font-size: .82rem;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
    line-height: 1.5;
}

.modal-footer[b-qhlh92i004] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .75rem 1.25rem 1.1rem;
}

.btn-cancel[b-qhlh92i004] {
    background: transparent;
    color: #6B7A99;
    border: 0.5px solid #EAE6DF;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: .82rem;
    cursor: pointer;
    font-family: Arial, sans-serif;
    transition: border-color .15s;
}

.btn-cancel:hover[b-qhlh92i004] { border-color: #C9A84C; }

.btn-confirm[b-qhlh92i004] {
    background: #C9A84C;
    color: #1B2A4A;
    border: none;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    font-family: Arial, sans-serif;
    transition: background .15s;
}

.btn-confirm:hover[b-qhlh92i004]    { background: #E2C07A; }
.btn-confirm:disabled[b-qhlh92i004] { opacity: .5; cursor: not-allowed; }

/* ── Footer ──────────────────────────────────────────────── */

/* ── Responsive ──────────────────────────────────────────── */
@media (min-width: 640px) {
    .hero[b-qhlh92i004]    { padding: 2rem 2rem 2.5rem; min-height: 178px; }
    .stats[b-qhlh92i004]   { padding: 1.75rem 2rem 1rem; }
    .section[b-qhlh92i004] { padding: 0 2rem 2rem; }
    .hero__name[b-qhlh92i004] { font-size: 1.7rem; }
    .search-wrap input[b-qhlh92i004] { width: 200px; }
}

@media (min-width: 860px) {
    .hero[b-qhlh92i004]    { padding: 2.5rem 2rem 2.5rem; min-height: 200px; }
    .hero__name[b-qhlh92i004] { font-size: 2rem; }
}

@media (min-width: 900px) {
    .submissions-wrapper[b-qhlh92i004] {
        box-shadow: 0 0 0 1px #EAE6DF;
    }
}

/* ── Load More ───────────────────────────────────────────────── */
.load-more-wrap[b-qhlh92i004] {
    text-align: center;
    padding: 1rem 0 1.5rem;
}

.btn-load-more[b-qhlh92i004] {
    background: transparent;
    color: var(--navy);
    border: 0.5px solid var(--warm-gray-2);
    padding: 9px 22px;
    border-radius: 8px;
    font-size: .82rem;
    font-family: 'Arial', sans-serif;
    cursor: pointer;
    transition: var(--transition);
}

.btn-load-more:hover:not(:disabled)[b-qhlh92i004] {
    border-color: var(--gold);
    background: #FFF8EC;
}

.btn-load-more:disabled[b-qhlh92i004] { opacity: .6; cursor: not-allowed; }

.load-more-end[b-qhlh92i004] {
    text-align: center;
    padding: .6rem 0 1.5rem;
    font-size: .68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin: 0;
}

/* ── Toast ────────────────────────────────────────────────── */
.sub-toast[b-qhlh92i004] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.25rem;
    z-index: 600;
    background: #fff;
    border-left: 4px solid #C9A84C;
    border-radius: 8px;
    padding: .65rem 1rem;
    font-size: .78rem;
    font-weight: 600;
    font-family: Arial, sans-serif;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    animation: subToastIn-b-qhlh92i004 .18s ease;
}

.sub-toast--error[b-qhlh92i004] {
    border-left-color: #E24B4A;
    color: #E24B4A;
}

@keyframes subToastIn-b-qhlh92i004 {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Receipt photo section ───────────────────────────────── */
.exp-photo-section[b-qhlh92i004] {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.exp-photo-btn[b-qhlh92i004] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #0F6E56;
    border-radius: 8px;
    background: transparent;
    color: #0F6E56;
    font-size: .72rem;
    font-weight: 700;
    font-family: Arial, sans-serif;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    align-self: flex-start;
}

.exp-photo-btn svg[b-qhlh92i004] { width: 14px; height: 14px; flex-shrink: 0; }

.exp-photo-btn:hover[b-qhlh92i004] {
    background: rgba(15,110,86,.08);
    border-color: #2A7A5A;
}

.exp-photo-btn--hide[b-qhlh92i004] {
    border-color: #EAE6DF;
    color: #6B7A99;
}

.exp-photo-btn--hide:hover[b-qhlh92i004] {
    background: #F4F1EC;
    border-color: #6B7A99;
}

.exp-photo[b-qhlh92i004] {
    width: 100%;
    display: block;
    object-fit: contain;
    max-height: 420px;
    border-radius: 8px;
    border: 0.5px solid #EAE6DF;
    background: #000;
}

.exp-photo-loading[b-qhlh92i004] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .72rem;
    color: #6B7A99;
    font-family: Arial, sans-serif;
    padding: .25rem 0;
}

.exp-photo-spinner[b-qhlh92i004] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #EAE6DF;
    border-top-color: #0F6E56;
    border-radius: 50%;
    animation: photoSpin-b-qhlh92i004 .65s linear infinite;
    flex-shrink: 0;
}

@keyframes photoSpin-b-qhlh92i004 { to { transform: rotate(360deg); } }

.exp-photo-error[b-qhlh92i004] {
    font-size: .72rem;
    color: #6B7A99;
    font-family: Arial, sans-serif;
    font-style: italic;
    margin: 0;
    padding: .1rem 0;
}

/* ── Comment thread (read-only) ──────────────────────────── */
/* ── Leave detail tabs (Details / Attachments) ── */
.detail-tabs[b-qhlh92i004] {
    display: flex;
    border-bottom: 1.5px solid var(--warm-gray-2);
    margin: .5rem 0 .6rem;
}

.detail-tab[b-qhlh92i004] {
    padding: .42rem .9rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color .15s cubic-bezier(.4,0,.2,1), border-color .15s cubic-bezier(.4,0,.2,1);
}

.detail-tab:hover:not(.detail-tab--active):not(:disabled)[b-qhlh92i004] { color: var(--navy); }

.detail-tab--active[b-qhlh92i004] {
    color: var(--navy);
    border-bottom-color: #1B6E4A;
}

.detail-tab--disabled[b-qhlh92i004],
.detail-tab:disabled[b-qhlh92i004] {
    cursor: not-allowed;
    opacity: .5;
}

.detail-tab__count[b-qhlh92i004] {
    font-size: .6rem;
    background: var(--warm-gray-2);
    color: var(--text-muted);
    border: 1px solid var(--warm-gray-2);
    border-radius: 20px;
    padding: 1px 6px;
    font-weight: 700;
    line-height: 1.4;
}

.detail-tab--active .detail-tab__count[b-qhlh92i004] {
    background: rgba(27,110,74,.12);
    color: #1B6E4A;
    border-color: rgba(27,110,74,.3);
}

.detail-tab__count--zero[b-qhlh92i004] {
    background: transparent;
    color: var(--text-light, #aab0c0);
    border-color: var(--warm-gray-2);
}

.leave-detail__empty[b-qhlh92i004] {
    font-size: .72rem;
    color: var(--text-muted);
    font-style: italic;
    font-family: Arial, sans-serif;
    margin: 0;
}

/* attachment viewer in accordion body */
.attach-viewer[b-qhlh92i004] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-bottom: .5rem;
}
.attach-viewer__label[b-qhlh92i004] {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}
.attach-viewer__list[b-qhlh92i004] { display: flex; flex-direction: column; gap: .3rem; }
.attach-viewer__item[b-qhlh92i004] {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: transparent;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 6px;
    padding: .35rem .6rem;
    cursor: pointer;
    font-size: .72rem;
    color: var(--navy);
    text-align: left;
    width: 100%;
    font-family: Arial, sans-serif;
    transition: border-color .15s cubic-bezier(.4,0,.2,1), background .15s cubic-bezier(.4,0,.2,1);
}
.attach-viewer__item:hover[b-qhlh92i004] { border-color: #1B6E4A; background: rgba(27,110,74,.08); }
.attach-viewer__icon[b-qhlh92i004] {
    font-size: .58rem;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 28px;
    text-align: center;
    background: var(--warm-gray-2);
    padding: 2px 4px;
    border-radius: 3px;
}
.attach-viewer__name[b-qhlh92i004] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.attach-viewer__size[b-qhlh92i004]  { color: var(--text-light, #aab0c0); font-size: .65rem; white-space: nowrap; }
.attach-viewer__open-hint[b-qhlh92i004] {
    font-size: .6rem;
    color: var(--text-muted);
    white-space: nowrap;
    margin-left: auto;
}

.comment-thread[b-qhlh92i004] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: .25rem;
}

.comment-thread__title[b-qhlh92i004] {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #6B7A99;
    font-family: Arial, sans-serif;
}

.comment-thread__empty[b-qhlh92i004] {
    font-size: .72rem;
    color: #6B7A99;
    font-style: italic;
    font-family: Arial, sans-serif;
    margin: 0;
}

.comment[b-qhlh92i004] {
    padding: .6rem .75rem;
    border-radius: 8px;
    border: 0.5px solid #EAE6DF;
    background: #F4F1EC;
    max-width: 92%;
}

.comment--admin[b-qhlh92i004] {
    background: rgba(15,110,86,.06);
    border-color: rgba(15,110,86,.2);
}

.comment__header[b-qhlh92i004] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
    flex-wrap: wrap;
}

.comment__author[b-qhlh92i004] {
    font-size: .68rem;
    font-weight: 700;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
}

.comment__badge[b-qhlh92i004] {
    font-size: .56rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 20px;
    background: rgba(15,110,86,.15);
    color: #0F6E56;
    letter-spacing: .05em;
    font-family: Arial, sans-serif;
}

.comment__time[b-qhlh92i004] {
    font-size: .62rem;
    color: #aab0c0;
    font-family: Arial, sans-serif;
    margin-left: auto;
}

.comment__text[b-qhlh92i004] {
    font-size: .75rem;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
    margin: 0;
    line-height: 1.45;
}

/* ── Comment compose (user reply box) ────────────────────── */
.comment-compose[b-qhlh92i004] {
    display: flex;
    flex-direction: column;
    margin-top: .75rem;
    border: 0.5px solid var(--warm-gray-2);
    border-radius: 7px;
    background: #fff;
    transition: border-color .15s;
}

.comment-compose:focus-within[b-qhlh92i004] {
    border-color: var(--gold);
}

.comment-compose__input[b-qhlh92i004] {
    flex: 1;
    padding: .45rem .65rem;
    border: none;
    border-radius: 7px 7px 0 0;
    font-size: .75rem;
    background: transparent;
    color: var(--navy);
    resize: none;
    min-height: 38px;
    max-height: 120px;
    font-family: 'Arial', sans-serif;
    outline: none;
}

.comment-compose__input[b-qhlh92i004]::placeholder { color: var(--text-light); }
.comment-compose__input:disabled[b-qhlh92i004] { opacity: .6; }

.comment-compose__bar[b-qhlh92i004] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-top: 0.5px solid var(--warm-gray-2);
    flex-wrap: wrap;
}

.comment-compose__btn[b-qhlh92i004] {
    background: var(--gold);
    color: var(--navy);
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: .75rem;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
    flex-shrink: 0;
    margin-left: auto;
}

.comment-compose__btn:hover:not(:disabled)[b-qhlh92i004] { background: var(--gold-light); }
.comment-compose__btn:disabled[b-qhlh92i004] { opacity: .5; cursor: not-allowed; }

/* ── Comment attachments ──────────────────────────────────── */

.comment__attachments[b-qhlh92i004] {
    display:     flex;
    flex-wrap:   wrap;
    align-items: flex-start;
    gap:         5px;
    margin-top:  5px;
}

.comment__attach-chip[b-qhlh92i004] {
    display:       flex;
    align-items:   center;
    gap:           4px;
    padding:       3px 8px;
    border:        0.5px solid var(--warm-gray-2);
    border-radius: 20px;
    background:    #fff;
    font-size:     .65rem;
    color:         var(--navy);
    cursor:        pointer;
    font-family:   Arial, sans-serif;
    transition:    background .15s;
}

.comment__attach-chip:hover[b-qhlh92i004] { background: var(--warm-gray); border-color: var(--gold); }

.comment__attach-icon[b-qhlh92i004] { font-size: .78rem; }

.comment__attach-name[b-qhlh92i004] {
    max-width:     110px;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.comment__attach-thumb[b-qhlh92i004] {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            3px;
    padding:        4px;
    border:         0.5px solid var(--warm-gray-2);
    border-radius:  8px;
    background:     #fff;
    cursor:         pointer;
    transition:     border-color .15s, box-shadow .15s;
}

.comment__attach-thumb:hover[b-qhlh92i004] {
    border-color: var(--gold);
    box-shadow:   0 2px 8px rgba(0,0,0,.1);
}

.comment__attach-img[b-qhlh92i004] {
    width:         64px;
    height:        64px;
    object-fit:    cover;
    border-radius: 5px;
    display:       block;
}

.comment__attach-fname[b-qhlh92i004] {
    font-size:     .58rem;
    color:         var(--text-muted);
    max-width:     72px;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    font-family:   Arial, sans-serif;
}
/* /Shared/AdminUserVehiclesPanel.razor.rz.scp.css */
/* ============================================================
   AdminUserVehiclesPanel.razor.css
   Navy / Gold / Warm-Gray palette, Car Exp module accent (brown)
   ============================================================ */

.user-panel--vehicles[b-j6vt94nxrq] {
    background: #fff;
    border: 0.5px solid #7A3F1B;
    border-top: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: .85rem 1rem .9rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    animation: panelSlide-b-j6vt94nxrq .2s cubic-bezier(.4,0,.2,1);
}

@keyframes panelSlide-b-j6vt94nxrq {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.vehicles-panel__empty[b-j6vt94nxrq] {
    font-size: .78rem;
    color: #6B7A99;
    font-family: Arial, sans-serif;
    margin: .35rem 0;
}

/* ── Vehicle row ── */
.vehicle-row[b-j6vt94nxrq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .5rem .1rem;
    border-bottom: 0.5px solid #EAE6DF;
}

.vehicle-row:last-of-type[b-j6vt94nxrq] { border-bottom: none; }
.vehicle-row--retired[b-j6vt94nxrq] { opacity: .6; }

.vehicle-row__info[b-j6vt94nxrq] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.vehicle-row__reg[b-j6vt94nxrq] {
    font-size: .82rem;
    font-weight: 700;
    color: #1B2A4A;
    letter-spacing: .05em;
    font-family: Arial, sans-serif;
}

.vehicle-row__meta[b-j6vt94nxrq] {
    font-size: .68rem;
    color: #6B7A99;
    font-family: Arial, sans-serif;
}

/* ── Correction card ── */
.correction-card[b-j6vt94nxrq] {
    background: #F4F1EC;
    border: 0.5px solid #EAE6DF;
    border-left: 4px solid #7A3F1B;
    border-radius: 10px;
    padding: .65rem .8rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin: -.15rem 0 .3rem;
}

.correction-card__row[b-j6vt94nxrq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.correction-card__mileage[b-j6vt94nxrq] {
    font-size: .82rem;
    font-weight: 700;
    color: #1B2A4A;
    font-family: 'Georgia', serif;
}

.correction-card__notes[b-j6vt94nxrq] {
    font-size: .72rem;
    color: #6B7A99;
    font-style: italic;
    margin: 0;
    font-family: Arial, sans-serif;
}

.correction-card__meta[b-j6vt94nxrq] {
    font-size: .65rem;
    color: #6B7A99;
    margin: 0;
    font-family: Arial, sans-serif;
}

.correction-card__footer[b-j6vt94nxrq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .2rem;
}

.correction-card__actions[b-j6vt94nxrq] {
    display: flex;
    gap: .35rem;
}

/* ── History ── */
.vehicles-panel__history-toggle[b-j6vt94nxrq] {
    background: none;
    border: none;
    color: #7A3F1B;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    padding: .3rem 0;
    text-align: left;
    font-family: Arial, sans-serif;
}

.vehicles-panel__history-toggle:hover[b-j6vt94nxrq] { text-decoration: underline; }

.vehicles-panel__history[b-j6vt94nxrq] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.history-row[b-j6vt94nxrq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .4rem .5rem;
    background: #F4F1EC;
    border-radius: 7px;
    font-family: Arial, sans-serif;
}

.history-row__reg[b-j6vt94nxrq] {
    font-size: .72rem;
    font-weight: 700;
    color: #1B2A4A;
}

.history-row__mileage[b-j6vt94nxrq] {
    font-size: .7rem;
    color: #6B7A99;
    flex: 1;
    text-align: right;
    padding-right: .5rem;
}

/* ── Badges ── */
.badge[b-j6vt94nxrq] {
    display: inline-block;
    font-size: .6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: .05em;
    font-family: Arial, sans-serif;
    white-space: nowrap;
}

.badge--active[b-j6vt94nxrq]  { background: #EAF3DE; color: #27500A; }
.badge--pending[b-j6vt94nxrq] { background: #FAEEDA; color: #633806; }
.badge--flagged[b-j6vt94nxrq] { background: #FCEBEB; color: #E24B4A; }

/* ── Action buttons ── */
.act-btn[b-j6vt94nxrq] {
    background: none;
    border: 0.5px solid #EAE6DF;
    border-radius: 6px;
    padding: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .18s, background .18s;
}

.act-btn svg[b-j6vt94nxrq] { width: 14px; height: 14px; stroke-width: 1.8; }
.act-btn:disabled[b-j6vt94nxrq] { opacity: .45; cursor: not-allowed; }

.act-btn--approve svg[b-j6vt94nxrq]      { stroke: #27500A; }
.act-btn--approve:hover:not(:disabled)[b-j6vt94nxrq]    { border-color: #B8DABB; background: #EAF3DE; }
.act-btn--flag svg[b-j6vt94nxrq]         { stroke: #E24B4A; }
.act-btn--flag:hover:not(:disabled)[b-j6vt94nxrq]       { border-color: #E24B4A; background: #FCEBEB; }

.btn-cancel[b-j6vt94nxrq] {
    background: none;
    border: 0.5px solid #EAE6DF;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: .7rem;
    font-weight: 600;
    color: #6B7A99;
    cursor: pointer;
    transition: border-color .18s, color .18s;
    font-family: Arial, sans-serif;
}

.btn-cancel:hover[b-j6vt94nxrq] { border-color: #C9A84C; color: #1B2A4A; }
/* /Shared/AppFooter.razor.rz.scp.css */
.app-footer[b-0paw2jaiq7] {
    height: 32px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.25rem;
    text-align: center;
    font-size: .62rem;
    letter-spacing: .12em;
    font-family: Arial, sans-serif;
    color: #6B7A99;
    text-transform: uppercase;
    border-top: 1px solid #EAE6DF;
}
/* /Shared/AppTopbar.razor.rz.scp.css */
/* ============================================================
   AppTopbar.razor.css — Shared top navigation bar
   ============================================================ */

:root[b-b1ogs1jvun] {
    --navy:        #1B2A4A;
    --navy-light:  #243560;
    --navy-dark:   #111d33;
    --gold:        #C9A84C;
    --gold-light:  #E2C07A;
    --warm-gray-2: #EAE6DF;
}

.topbar[b-b1ogs1jvun] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    height: 56px;
    background: #111d33;
    border-bottom: 1.5px solid rgba(201,168,76,.22);
    position: sticky;
    top: 0;
    z-index: 200;
    flex-shrink: 0;
    box-shadow: 0 2px 12px rgba(0,0,0,.32);
}

.topbar__left[b-b1ogs1jvun] {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.topbar__back[b-b1ogs1jvun] {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: rgba(201,168,76,.15);
    border: none;
    color: #F5D98A;
    font-size: 1.5rem;
    font-family: Arial, sans-serif;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
}

.topbar__back:hover[b-b1ogs1jvun] { background: rgba(201,168,76,.28); }

.logo[b-b1ogs1jvun] {
    font-family: 'Arial Narrow', 'Arial', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

.logo-hb[b-b1ogs1jvun]    { color: #C9A84C; }
.logo-staff[b-b1ogs1jvun] { color: #fff; margin-left: .3em; }

.topbar__avatar[b-b1ogs1jvun] {
    margin-left: auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(201,168,76,.15);
    border: 2px solid #F5D98A;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s, transform .18s;
    padding: 0;
}

.topbar__avatar:hover[b-b1ogs1jvun],
.topbar__avatar:focus-visible[b-b1ogs1jvun] {
    background: rgba(201,168,76,.28);
    transform: scale(1.08);
    outline: none;
}

.avatar-initials[b-b1ogs1jvun] {
    font-size: .7rem;
    font-weight: 700;
    font-family: Arial, sans-serif;
    color: #F5D98A;
    letter-spacing: .04em;
}

.avatar-menu-backdrop[b-b1ogs1jvun] {
    position: fixed;
    inset: 0;
    z-index: 150;
}

.avatar-menu[b-b1ogs1jvun] {
    position: absolute;
    top: 52px;
    right: 1.25rem;
    background: #fff;
    border: 1px solid var(--warm-gray-2);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(27,42,74,.14);
    padding: .75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 160px;
    z-index: 201;
}

.avatar-menu-name[b-b1ogs1jvun] {
    font-family: Arial, sans-serif;
    font-size: .82rem;
    font-weight: 600;
    color: var(--navy);
}

.avatar-menu-change-pw[b-b1ogs1jvun] {
    font-family: Arial, sans-serif;
    font-size: .78rem;
    font-weight: 600;
    color: var(--navy);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

.avatar-menu-change-pw:hover[b-b1ogs1jvun] { text-decoration: underline; }

.avatar-menu-logout[b-b1ogs1jvun] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-family: Arial, sans-serif;
    font-size: .78rem;
    font-weight: 600;
    color: #F5D98A;
    background: #111d33;
    border: none;
    border-radius: 6px;
    padding: 5px 10px;
    cursor: pointer;
    transition: background .18s;
    width: 100%;
}

.avatar-menu-logout svg[b-b1ogs1jvun] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #F5D98A;
}

.avatar-menu-logout:hover[b-b1ogs1jvun] { background: #F5D98A; color: #111d33; }
.avatar-menu-logout:hover svg[b-b1ogs1jvun] { color: #111d33; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (min-width: 640px) {
    .topbar[b-b1ogs1jvun] { padding: 0 2rem; }
}
/* /Shared/CommentAttachmentPicker.razor.rz.scp.css */
:root[b-ujjskqb9mv] {
    --navy:        #1B2A4A;
    --navy-light:  #243560;
    --gold:        #C9A84C;
    --gold-light:  #E2C07A;
    --warm-gray:   #F4F1EC;
    --warm-gray-2: #EAE6DF;
    --text-muted:  #6B7A99;
    --text-light:  #aab0c0;
    --radius-card: 10px;
    --transition:  all .2s cubic-bezier(.4,0,.2,1);
}

/* ── Inline picker row (buttons + chips in one flex row) ─────────────────── */

.ca-picker[b-ujjskqb9mv] {
    display:     flex;
    align-items: center;
    gap:         5px;
    flex:        1;
    flex-wrap:   wrap;
    min-width:   0;
}

.ca-picker__btn[b-ujjskqb9mv] {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           26px;
    height:          26px;
    border:          0.5px solid var(--warm-gray-2);
    border-radius:   6px;
    background:      transparent;
    cursor:          pointer;
    color:           var(--navy);
    transition:      var(--transition);
    padding:         0;
    flex-shrink:     0;
}

.ca-picker__btn svg[b-ujjskqb9mv] {
    width:  14px;
    height: 14px;
    stroke: var(--navy);
}

.ca-picker__btn:hover[b-ujjskqb9mv] {
    border-color: var(--gold);
    background:   #FFF8EC;
}

.ca-error[b-ujjskqb9mv] {
    font-size:   .65rem;
    color:       #E24B4A;
    font-family: Arial, sans-serif;
}

.ca-chip[b-ujjskqb9mv] {
    display:       flex;
    align-items:   center;
    gap:           4px;
    padding:       3px 8px;
    border:        0.5px solid var(--warm-gray-2);
    border-radius: 20px;
    background:    #fff;
    font-size:     .65rem;
    font-family:   Arial, sans-serif;
    color:         var(--navy);
    max-width:     220px;
}

.ca-chip__icon[b-ujjskqb9mv] {
    font-size:   .78rem;
    flex-shrink: 0;
}

.ca-chip__name-input[b-ujjskqb9mv] {
    flex:         1;
    min-width:    50px;
    max-width:    140px;
    background:   none;
    border:       none;
    border-bottom: 1px solid transparent;
    font-size:    .68rem;
    font-family:  Arial, sans-serif;
    color:        var(--navy);
    padding:      0;
    outline:      none;
    cursor:       text;
    transition:   border-color .15s;
    white-space:  nowrap;
    overflow:     hidden;
    text-overflow: ellipsis;
}

.ca-chip__name-input:focus[b-ujjskqb9mv] {
    border-bottom-color: var(--gold);
}

.ca-chip__name-input[b-ujjskqb9mv]::placeholder {
    color: var(--text-light);
}

.ca-chip__pen[b-ujjskqb9mv] {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
    color:       var(--text-light);
    transition:  color .15s;
    pointer-events: none;
}

.ca-chip__pen svg[b-ujjskqb9mv] {
    width:  9px;
    height: 9px;
    stroke: currentColor;
}

.ca-chip:hover .ca-chip__pen[b-ujjskqb9mv] {
    color: var(--gold);
}

.ca-chip__name-input:focus ~ .ca-chip__pen[b-ujjskqb9mv] {
    display: none;
}

.ca-chip__remove[b-ujjskqb9mv] {
    border:     none;
    background: transparent;
    color:      var(--text-muted);
    cursor:     pointer;
    font-size:  .78rem;
    padding:    0 2px;
    line-height: 1;
    flex-shrink: 0;
}

.ca-chip__remove:hover[b-ujjskqb9mv] { color: #E24B4A; }

/* ── Modal overlay ───────────────────────────────────────────────────────── */

.ca-modal-overlay[b-ujjskqb9mv] {
    position:        fixed;
    inset:           0;
    background:      rgba(27,42,74,.5);
    z-index:         500;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

/* ── Camera modal ────────────────────────────────────────────────────────── */

.ca-modal[b-ujjskqb9mv] {
    background:    #fff;
    border-radius: 12px;
    max-width:     480px;
    width:         94%;
    box-shadow:    0 8px 40px rgba(0,0,0,.35);
    animation:     fadeScaleIn-b-ujjskqb9mv .2s cubic-bezier(.4,0,.2,1);
    overflow:      hidden;
}

.ca-modal-header[b-ujjskqb9mv] {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    background:      var(--navy);
    color:           #fff;
    padding:         .9rem 1.1rem;
    font-size:       .82rem;
    font-weight:     700;
    letter-spacing:  .05em;
    text-transform:  uppercase;
    font-family:     'Arial Narrow', Arial, sans-serif;
}

.ca-modal-close[b-ujjskqb9mv] {
    border:     none;
    background: transparent;
    color:      rgba(255,255,255,.7);
    font-size:  1.2rem;
    cursor:     pointer;
    line-height: 1;
}

.ca-modal-close:hover[b-ujjskqb9mv] { color: #fff; }

.ca-modal-body[b-ujjskqb9mv] {
    padding:    1rem;
    background: #000;
}

.ca-video[b-ujjskqb9mv] {
    width:         100%;
    border-radius: 6px;
    display:       block;
    max-height:    60dvh;
    object-fit:    cover;
}

.ca-camera-error[b-ujjskqb9mv] {
    color:       #fca5a5;
    font-size:   .78rem;
    text-align:  center;
    padding:     .5rem 0 0;
    margin:      0;
    font-family: Arial, sans-serif;
}

/* ── Crop modal ──────────────────────────────────────────────────────────── */

.ca-crop-modal[b-ujjskqb9mv] {
    background:    #fff;
    border-radius: 12px;
    max-width:     520px;
    width:         96%;
    box-shadow:    0 8px 40px rgba(0,0,0,.35);
    animation:     fadeScaleIn-b-ujjskqb9mv .2s cubic-bezier(.4,0,.2,1);
    overflow:      hidden;
}

.ca-crop-body[b-ujjskqb9mv] {
    padding:    1rem;
    background: #f0f0f0;
    min-height: 260px;
    display:    flex;
    align-items: center;
    justify-content: center;
}

.ca-crop-img[b-ujjskqb9mv] {
    max-width:  100%;
    max-height: 55dvh;
    display:    block;
}

/* ── Shared modal actions ────────────────────────────────────────────────── */

.ca-modal-actions[b-ujjskqb9mv] {
    display:         flex;
    justify-content: space-between;
    gap:             8px;
    padding:         .75rem 1rem;
    background:      #fff;
    border-top:      1px solid var(--warm-gray-2);
}

.ca-btn-cancel[b-ujjskqb9mv] {
    background:    transparent;
    color:         var(--text-muted);
    border:        0.5px solid var(--warm-gray-2);
    padding:       8px 16px;
    border-radius: 8px;
    font-size:     .78rem;
    font-family:   Arial, sans-serif;
    cursor:        pointer;
    transition:    border-color .15s;
}

.ca-btn-cancel:hover[b-ujjskqb9mv] { border-color: var(--gold); }

.ca-btn-primary[b-ujjskqb9mv] {
    background:    var(--gold);
    color:         var(--navy);
    border:        none;
    padding:       8px 16px;
    border-radius: 8px;
    font-size:     .78rem;
    font-weight:   700;
    font-family:   Arial, sans-serif;
    cursor:        pointer;
    transition:    background .15s;
}

.ca-btn-primary:hover[b-ujjskqb9mv]    { background: var(--gold-light); }
.ca-btn-primary:disabled[b-ujjskqb9mv] { opacity: .5; cursor: not-allowed; }

@keyframes fadeScaleIn-b-ujjskqb9mv {
    from { opacity: 0; transform: scale(.95); }
    to   { opacity: 1; transform: scale(1); }
}
/* /Shared/DeleteUserModal.razor.rz.scp.css */
/* ============================================================
   DeleteUserModal.razor.css
   ============================================================ */

.modal-overlay[b-uvnbptzdr9] {
    position: fixed;
    inset: 0;
    background: rgba(27,42,74,.45);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn-b-uvnbptzdr9 .18s ease;
}

@keyframes fadeIn-b-uvnbptzdr9 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-card[b-uvnbptzdr9] {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(27,42,74,.25);
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    animation: scaleIn-b-uvnbptzdr9 .2s cubic-bezier(.4,0,.2,1);
}

.modal-card--sm[b-uvnbptzdr9] { max-width: 360px; }

@keyframes scaleIn-b-uvnbptzdr9 {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

.modal-header[b-uvnbptzdr9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1.1rem;
    background: #E24B4A;
    border-radius: 12px 12px 0 0;
}

.modal-title[b-uvnbptzdr9] {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #fff;
    font-family: Arial, sans-serif;
}

.modal-close[b-uvnbptzdr9] {
    background: none;
    border: none;
    color: rgba(255,255,255,.75);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 4px;
    transition: background .18s;
}

.modal-close:hover[b-uvnbptzdr9] { background: rgba(255,255,255,.15); }

.modal-body[b-uvnbptzdr9] {
    padding: 1.25rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.modal-footer[b-uvnbptzdr9] {
    padding: .85rem 1.1rem;
    border-top: 1px solid #EAE6DF;
    display: flex;
    gap: .6rem;
    justify-content: flex-end;
}

/* ── Confirm text ── */
.confirm-text[b-uvnbptzdr9] {
    font-size: .8rem;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
    line-height: 1.5;
    margin: 0;
}

.confirm-target[b-uvnbptzdr9] {
    font-size: .78rem;
    font-family: monospace;
    font-weight: 700;
    color: #1B2A4A;
    background: #F4F1EC;
    border: 0.5px solid #EAE6DF;
    border-radius: 6px;
    padding: .5rem .75rem;
    letter-spacing: .02em;
}

/* ── Field ── */
.field[b-uvnbptzdr9] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.field__input[b-uvnbptzdr9] {
    padding: .55rem .75rem;
    border: 0.5px solid #EAE6DF;
    border-radius: 7px;
    font-size: .82rem;
    background: #fff;
    color: #1B2A4A;
    outline: none;
    transition: border-color .18s;
    font-family: Arial, sans-serif;
    width: 100%;
    box-sizing: border-box;
}

.field__input:focus[b-uvnbptzdr9]        { border-color: #E24B4A; }
.field__input[b-uvnbptzdr9]::placeholder { color: #6B7A99; }

/* ── Buttons ── */
.btn-cancel[b-uvnbptzdr9] {
    background: none;
    border: 0.5px solid #EAE6DF;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: .78rem;
    font-weight: 600;
    color: #6B7A99;
    cursor: pointer;
    transition: border-color .18s, color .18s;
    font-family: Arial, sans-serif;
}

.btn-cancel:hover[b-uvnbptzdr9] { border-color: #C9A84C; color: #1B2A4A; }

.btn-danger[b-uvnbptzdr9] {
    background: #E24B4A;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: .78rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    letter-spacing: .04em;
    transition: background .2s;
    font-family: Arial, sans-serif;
}

.btn-danger:hover:not(:disabled)[b-uvnbptzdr9] { background: #c73b3a; }
.btn-danger:disabled[b-uvnbptzdr9]              { opacity: .4; cursor: not-allowed; }
/* /Shared/DrumPicker.razor.rz.scp.css */
/* ── Drum Picker ── */
.drum-wrap[b-15eyxx0pls] {
    position: relative;
    width: 100%;
    height: 73px; /* 72px content (3 × 24px) + 2 × .5px border, box-sizing: border-box from global reset */
    overflow: hidden;
    border: .5px solid var(--warm-gray-2, #EAE6DF);
    border-radius: 6px;
    background: #fff;
    -webkit-user-select: none;
    user-select: none;
    touch-action: pan-y;
    cursor: ns-resize;
}

.drum-scroll[b-15eyxx0pls] {
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
}
.drum-scroll[b-15eyxx0pls]::-webkit-scrollbar { display: none; }

.drum-item[b-15eyxx0pls] {
    height: 24px;
    scroll-snap-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    color: var(--navy, #1B2A4A);
    font-family: 'Arial Narrow', Arial, sans-serif;
}

.drum-pad[b-15eyxx0pls] {
    height: 24px;
    flex-shrink: 0;
}

/* Fade masks */
.drum-mask[b-15eyxx0pls] {
    position: absolute;
    left: 0; right: 0;
    height: 24px;
    pointer-events: none;
    z-index: 2;
}
.drum-mask--top[b-15eyxx0pls] {
    top: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,.96) 40%, transparent);
}
.drum-mask--bot[b-15eyxx0pls] {
    bottom: 0;
    background: linear-gradient(to top, rgba(255,255,255,.96) 40%, transparent);
}

/* Gold selection lines */
.drum-line[b-15eyxx0pls] {
    position: absolute;
    left: 10%; right: 10%;
    height: 1px;
    background: var(--gold, #C9A84C);
    z-index: 3;
    pointer-events: none;
}
.drum-line--top[b-15eyxx0pls] { top:  calc(50% - 12px); }
.drum-line--bot[b-15eyxx0pls] { top:  calc(50% + 12px); }

/* Disabled state */
.drum-wrap--disabled[b-15eyxx0pls] {
    opacity: 0.32;
    pointer-events: none;
    cursor: default;
}

/* Number input mode */
.drum-num-input[b-15eyxx0pls] {
    width: 100%;
    height: 72px;
    padding: .5rem .7rem;
    border: .5px solid var(--warm-gray-2, #EAE6DF);
    border-radius: 6px;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: 'Arial Narrow', Arial, sans-serif;
    color: var(--navy, #1B2A4A);
    background: #fff;
    text-align: center;
    box-sizing: border-box;
    -moz-appearance: textfield;
    transition: border-color .15s cubic-bezier(.4,0,.2,1), background .15s cubic-bezier(.4,0,.2,1);
}
.drum-num-input[b-15eyxx0pls]::-webkit-outer-spin-button,
.drum-num-input[b-15eyxx0pls]::-webkit-inner-spin-button { -webkit-appearance: none; }
.drum-num-input:focus[b-15eyxx0pls] {
    border-color: var(--gold, #C9A84C);
    outline: none;
    background: #FFFBF0;
}
.drum-num-input--active[b-15eyxx0pls] {
    border-color: var(--gold, #C9A84C);
    background: #FFFBF0;
}
.drum-num-input--disabled[b-15eyxx0pls] {
    opacity: 0.32;
    pointer-events: none;
}

/* Active state — value is non-zero */
.drum-wrap--active[b-15eyxx0pls] {
    border-color: var(--gold, #C9A84C);
    background: #FFFBF0;
}
.drum-wrap--active .drum-mask--top[b-15eyxx0pls] {
    background: linear-gradient(to bottom, rgba(255,251,240,.96) 40%, transparent);
}
.drum-wrap--active .drum-mask--bot[b-15eyxx0pls] {
    background: linear-gradient(to top, rgba(255,251,240,.96) 40%, transparent);
}
/* /Shared/EditUserModal.razor.rz.scp.css */
/* ============================================================
   EditUserModal.razor.css
   ============================================================ */

.modal-overlay[b-kkmcgxy4oy] {
    position: fixed;
    inset: 0;
    background: rgba(27,42,74,.45);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn-b-kkmcgxy4oy .18s ease;
}

@keyframes fadeIn-b-kkmcgxy4oy {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-card[b-kkmcgxy4oy] {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(27,42,74,.25);
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    animation: scaleIn-b-kkmcgxy4oy .2s cubic-bezier(.4,0,.2,1);
}

@keyframes scaleIn-b-kkmcgxy4oy {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

.modal-header[b-kkmcgxy4oy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1.1rem;
    background: #1B2A4A;
    border-radius: 12px 12px 0 0;
}

.modal-title[b-kkmcgxy4oy] {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #fff;
    font-family: Arial, sans-serif;
}

.modal-close[b-kkmcgxy4oy] {
    background: none;
    border: none;
    color: #C9A84C;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 4px;
    transition: background .18s;
}

.modal-close:hover[b-kkmcgxy4oy] { background: rgba(255,255,255,.12); }

.modal-body[b-kkmcgxy4oy] {
    padding: 1.25rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.modal-footer[b-kkmcgxy4oy] {
    padding: .85rem 1.1rem;
    border-top: 1px solid #EAE6DF;
    display: flex;
    gap: .6rem;
    justify-content: flex-end;
}

/* ── Fields ── */
.field[b-kkmcgxy4oy] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.field__label[b-kkmcgxy4oy] {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
}

.field__req[b-kkmcgxy4oy] { color: #E24B4A; }

.field__input[b-kkmcgxy4oy] {
    padding: .55rem .75rem;
    border: 0.5px solid #EAE6DF;
    border-radius: 7px;
    font-size: .82rem;
    background: #fff;
    color: #1B2A4A;
    outline: none;
    transition: border-color .18s;
    font-family: Arial, sans-serif;
    width: 100%;
    box-sizing: border-box;
}

.field__input:focus[b-kkmcgxy4oy]        { border-color: #C9A84C; }
.field__input[b-kkmcgxy4oy]::placeholder { color: #6B7A99; }

/* ── Toggles ── */
.toggle-row[b-kkmcgxy4oy] {
    display: flex;
    align-items: center;
    gap: .65rem;
    cursor: pointer;
    padding: .7rem .85rem;
    background: #F4F1EC;
    border: 0.5px solid #EAE6DF;
    border-radius: 8px;
    transition: border-color .18s;
}

.toggle-row:hover[b-kkmcgxy4oy] { border-color: #C9A84C; }

.toggle-label[b-kkmcgxy4oy] {
    font-size: .78rem;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
}

/* ── Buttons ── */
.btn-cancel[b-kkmcgxy4oy] {
    background: none;
    border: 0.5px solid #EAE6DF;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: .78rem;
    font-weight: 600;
    color: #6B7A99;
    cursor: pointer;
    transition: border-color .18s, color .18s;
    font-family: Arial, sans-serif;
}

.btn-cancel:hover[b-kkmcgxy4oy] { border-color: #C9A84C; color: #1B2A4A; }

.btn-confirm[b-kkmcgxy4oy] {
    background: #C9A84C;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: .78rem;
    font-weight: 700;
    color: #1B2A4A;
    cursor: pointer;
    letter-spacing: .04em;
    transition: background .2s;
    font-family: Arial, sans-serif;
}

.btn-confirm:hover:not(:disabled)[b-kkmcgxy4oy] { background: #E2C07A; }
.btn-confirm:disabled[b-kkmcgxy4oy]              { opacity: .45; cursor: not-allowed; }
/* /Shared/InviteUserModal.razor.rz.scp.css */
/* ============================================================
   InviteUserModal.razor.css — New User Slide Panel
   ============================================================ */

/* ── Backdrop ──────────────────────────────────────────────── */
.panel-backdrop[b-8dyn0zg00t] {
    position: fixed;
    inset: 0;
    background: rgba(27,42,74,.35);
    z-index: 400;
    animation: backdropIn-b-8dyn0zg00t .22s ease;
}

@keyframes backdropIn-b-8dyn0zg00t {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Panel ─────────────────────────────────────────────────── */
.slide-panel[b-8dyn0zg00t] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(400px, 100vw);
    background: #fff;
    z-index: 401;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 28px rgba(27,42,74,.2);
    animation: panelIn-b-8dyn0zg00t .26s cubic-bezier(.4,0,.2,1);
}

@keyframes panelIn-b-8dyn0zg00t {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* ── Header ────────────────────────────────────────────────── */
.slide-panel__header[b-8dyn0zg00t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: #1B2A4A;
    flex-shrink: 0;
}

.slide-panel__header--success[b-8dyn0zg00t] {
    background: #27500A;
}

.slide-panel__title[b-8dyn0zg00t] {
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #fff;
    font-family: Arial, sans-serif;
}

.slide-panel__close[b-8dyn0zg00t] {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C9A84C;
    border-radius: 6px;
    transition: background .18s;
}

.slide-panel__header--success .slide-panel__close[b-8dyn0zg00t] { color: #A8D87A; }

.slide-panel__close:hover[b-8dyn0zg00t] { background: rgba(255,255,255,.12); }
.slide-panel__close svg[b-8dyn0zg00t]   { width: 16px; height: 16px; }

/* ── Body ──────────────────────────────────────────────────── */
.slide-panel__body[b-8dyn0zg00t] {
    flex: 1;
    padding: 1.5rem 1.25rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* ── Loading state ─────────────────────────────────────────── */
.panel-loading[b-8dyn0zg00t] {
    align-items: center;
    justify-content: center;
    color: #6B7A99;
    font-size: .82rem;
    font-family: Arial, sans-serif;
    gap: .9rem;
}

.loading-spinner[b-8dyn0zg00t] {
    width: 28px;
    height: 28px;
    border: 3px solid #EAE6DF;
    border-top-color: #C9A84C;
    border-radius: 50%;
    animation: spin-b-8dyn0zg00t .7s linear infinite;
}

@keyframes spin-b-8dyn0zg00t {
    to { transform: rotate(360deg); }
}

/* ── Fields ────────────────────────────────────────────────── */
.field[b-8dyn0zg00t] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.field__label[b-8dyn0zg00t] {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
}

.field__req[b-8dyn0zg00t] { color: #E24B4A; }

.field__input[b-8dyn0zg00t] {
    padding: .55rem .75rem;
    border: 0.5px solid #EAE6DF;
    border-radius: 7px;
    font-size: .82rem;
    background: #fff;
    color: #1B2A4A;
    outline: none;
    transition: border-color .18s;
    font-family: Arial, sans-serif;
    width: 100%;
    box-sizing: border-box;
}

.field__input:focus[b-8dyn0zg00t]        { border-color: #C9A84C; }
.field__input[b-8dyn0zg00t]::placeholder { color: #6B7A99; }

/* ── Toggle Row ────────────────────────────────────────────── */
.toggle-row[b-8dyn0zg00t] {
    display: flex;
    align-items: center;
    gap: .65rem;
    cursor: pointer;
    padding: .7rem .85rem;
    background: #F4F1EC;
    border: 0.5px solid #EAE6DF;
    border-radius: 8px;
    transition: border-color .18s;
}

.toggle-row:hover[b-8dyn0zg00t] { border-color: #C9A84C; }

.toggle-label[b-8dyn0zg00t] {
    font-size: .78rem;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
}

/* ── Form error ────────────────────────────────────────────── */
.form-error[b-8dyn0zg00t] {
    font-size: .74rem;
    color: #E24B4A;
    background: #FCEBEB;
    border: 0.5px solid #F5C6C6;
    border-radius: 7px;
    padding: .5rem .75rem;
    font-family: Arial, sans-serif;
    margin: 0;
}

/* ── Success hint ──────────────────────────────────────────── */
.success-hint[b-8dyn0zg00t] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    background: #EAF3DE;
    border: 0.5px solid #B8DABB;
    border-radius: 8px;
    padding: .75rem .85rem;
    font-size: .78rem;
    color: #27500A;
    font-family: Arial, sans-serif;
    line-height: 1.4;
}

.success-hint svg[b-8dyn0zg00t] {
    width: 18px;
    height: 18px;
    stroke: #27500A;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Email preview ─────────────────────────────────────────── */
.email-preview[b-8dyn0zg00t] {
    border: 0.5px solid #EAE6DF;
    border-radius: 8px;
    overflow: hidden;
    flex: 1;
}

.email-preview__row[b-8dyn0zg00t] {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    padding: .65rem .85rem;
    background: #F4F1EC;
}

.email-preview__label[b-8dyn0zg00t] {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6B7A99;
    font-family: Arial, sans-serif;
    flex-shrink: 0;
    width: 52px;
}

.email-preview__value[b-8dyn0zg00t] {
    font-size: .78rem;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
    font-weight: 600;
}

.email-preview__divider[b-8dyn0zg00t] {
    height: 0.5px;
    background: #EAE6DF;
}

.email-preview__body[b-8dyn0zg00t] {
    padding: .85rem;
    font-size: .75rem;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
    background: #fff;
}

/* ── Footer ────────────────────────────────────────────────── */
.slide-panel__footer[b-8dyn0zg00t] {
    padding: 1rem 1.25rem;
    border-top: 1px solid #EAE6DF;
    display: flex;
    gap: .6rem;
    justify-content: flex-end;
    flex-shrink: 0;
}

.btn-cancel[b-8dyn0zg00t] {
    background: none;
    border: 0.5px solid #EAE6DF;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: .78rem;
    font-weight: 600;
    color: #6B7A99;
    cursor: pointer;
    transition: border-color .18s, color .18s;
    font-family: Arial, sans-serif;
}

.btn-cancel:hover[b-8dyn0zg00t] { border-color: #C9A84C; color: #1B2A4A; }

.btn-confirm[b-8dyn0zg00t] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #C9A84C;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: .78rem;
    font-weight: 700;
    color: #1B2A4A;
    cursor: pointer;
    letter-spacing: .04em;
    transition: background .2s;
    font-family: Arial, sans-serif;
}

.btn-confirm svg[b-8dyn0zg00t] { width: 14px; height: 14px; }

.btn-confirm:hover:not(:disabled)[b-8dyn0zg00t] { background: #E2C07A; }
.btn-confirm:disabled[b-8dyn0zg00t]              { opacity: .45; cursor: not-allowed; }

.btn-confirm--copied[b-8dyn0zg00t] {
    background: #EAF3DE;
    color: #27500A;
}

.btn-confirm--copied:hover:not(:disabled)[b-8dyn0zg00t] { background: #D4EAB8; }
/* /Shared/IssueResetModal.razor.rz.scp.css */
/* ============================================================
   IssueResetModal.razor.css — Issue Password Reset Slide Panel
   ============================================================ */

/* ── Backdrop ── */
.panel-backdrop[b-tohyejidf5] {
    position: fixed;
    inset: 0;
    background: rgba(27,42,74,.35);
    z-index: 400;
    animation: backdropIn-b-tohyejidf5 .22s ease;
}

@keyframes backdropIn-b-tohyejidf5 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Panel ── */
.slide-panel[b-tohyejidf5] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(400px, 100vw);
    background: #fff;
    z-index: 401;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 28px rgba(27,42,74,.2);
    animation: panelIn-b-tohyejidf5 .26s cubic-bezier(.4,0,.2,1);
}

@keyframes panelIn-b-tohyejidf5 {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* ── Header ── */
.slide-panel__header[b-tohyejidf5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: #1B2A4A;
    flex-shrink: 0;
}

.slide-panel__header--success[b-tohyejidf5] { background: #27500A; }

.slide-panel__title[b-tohyejidf5] {
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #fff;
    font-family: Arial, sans-serif;
}

.slide-panel__close[b-tohyejidf5] {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C9A84C;
    border-radius: 6px;
    transition: background .18s;
}

.slide-panel__header--success .slide-panel__close[b-tohyejidf5] { color: #A8D87A; }
.slide-panel__close:hover[b-tohyejidf5] { background: rgba(255,255,255,.12); }
.slide-panel__close svg[b-tohyejidf5]   { width: 16px; height: 16px; }

/* ── Body ── */
.slide-panel__body[b-tohyejidf5] {
    flex: 1;
    padding: 1.5rem 1.25rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* ── User row ── */
.reinvite-user[b-tohyejidf5] {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1rem;
    background: #F4F1EC;
    border: 0.5px solid #EAE6DF;
    border-radius: 10px;
}

.reinvite-avatar[b-tohyejidf5] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    font-family: Arial, sans-serif;
    flex-shrink: 0;
}

.avatar--navy[b-tohyejidf5] { background: rgba(27,42,74,.12);   color: #1B2A4A; }
.avatar--gold[b-tohyejidf5] { background: rgba(201,168,76,.18);  color: #7A5C10; }

.reinvite-meta[b-tohyejidf5] { display: flex; flex-direction: column; gap: 2px; }

.reinvite-name[b-tohyejidf5] {
    font-size: .82rem;
    font-weight: 700;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
}

.reinvite-email[b-tohyejidf5] {
    font-size: .72rem;
    color: #6B7A99;
    font-family: Arial, sans-serif;
}

/* ── Info banner ── */
.reinvite-info[b-tohyejidf5] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    background: #EAF0FA;
    border: 0.5px solid #BDD0EF;
    border-radius: 8px;
    padding: .75rem .85rem;
    font-size: .78rem;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
    line-height: 1.4;
}

.reinvite-info svg[b-tohyejidf5] {
    width: 18px;
    height: 18px;
    stroke: #1B2A4A;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Warning banner variant ── */
.reinvite-info--warn[b-tohyejidf5] {
    background: #FAEEDA;
    border-color: #E8C98A;
    color: #633806;
}

.reinvite-info--warn svg[b-tohyejidf5] { stroke: #633806; }

/* ── Loading ── */
.panel-loading[b-tohyejidf5] {
    align-items: center;
    justify-content: center;
    color: #6B7A99;
    font-size: .82rem;
    font-family: Arial, sans-serif;
    gap: .9rem;
}

.loading-spinner[b-tohyejidf5] {
    width: 28px;
    height: 28px;
    border: 3px solid #EAE6DF;
    border-top-color: #C9A84C;
    border-radius: 50%;
    animation: spin-b-tohyejidf5 .7s linear infinite;
}

@keyframes spin-b-tohyejidf5 { to { transform: rotate(360deg); } }

/* ── Success hint ── */
.success-hint[b-tohyejidf5] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    background: #EAF3DE;
    border: 0.5px solid #B8DABB;
    border-radius: 8px;
    padding: .75rem .85rem;
    font-size: .78rem;
    color: #27500A;
    font-family: Arial, sans-serif;
    line-height: 1.4;
}

.success-hint svg[b-tohyejidf5] {
    width: 18px;
    height: 18px;
    stroke: #27500A;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Email preview ── */
.email-preview[b-tohyejidf5] {
    border: 0.5px solid #EAE6DF;
    border-radius: 8px;
    overflow: hidden;
    flex: 1;
}

.email-preview__row[b-tohyejidf5] {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    padding: .65rem .85rem;
    background: #F4F1EC;
}

.email-preview__label[b-tohyejidf5] {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6B7A99;
    font-family: Arial, sans-serif;
    flex-shrink: 0;
    width: 52px;
}

.email-preview__value[b-tohyejidf5] {
    font-size: .78rem;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
    font-weight: 600;
}

.email-preview__divider[b-tohyejidf5] { height: 0.5px; background: #EAE6DF; }

.email-preview__body[b-tohyejidf5] {
    padding: .85rem;
    font-size: .75rem;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
    background: #fff;
}

/* ── Form error ── */
.form-error[b-tohyejidf5] {
    font-size: .74rem;
    color: #E24B4A;
    background: #FCEBEB;
    border: 0.5px solid #F5C6C6;
    border-radius: 7px;
    padding: .5rem .75rem;
    font-family: Arial, sans-serif;
    margin: 0;
}

/* ── Footer ── */
.slide-panel__footer[b-tohyejidf5] {
    padding: 1rem 1.25rem;
    border-top: 1px solid #EAE6DF;
    display: flex;
    gap: .6rem;
    justify-content: flex-end;
    flex-shrink: 0;
}

/* ── Buttons ── */
.btn-cancel[b-tohyejidf5] {
    background: none;
    border: 0.5px solid #EAE6DF;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: .78rem;
    font-weight: 600;
    color: #6B7A99;
    cursor: pointer;
    transition: border-color .18s, color .18s;
    font-family: Arial, sans-serif;
}

.btn-cancel:hover[b-tohyejidf5] { border-color: #C9A84C; color: #1B2A4A; }

.btn-confirm[b-tohyejidf5] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #C9A84C;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: .78rem;
    font-weight: 700;
    color: #1B2A4A;
    cursor: pointer;
    letter-spacing: .04em;
    transition: background .2s;
    font-family: Arial, sans-serif;
}

.btn-confirm svg[b-tohyejidf5] { width: 14px; height: 14px; }
.btn-confirm:hover:not(:disabled)[b-tohyejidf5] { background: #E2C07A; }

.btn-confirm--copied[b-tohyejidf5] {
    background: #EAF3DE;
    color: #27500A;
}

.btn-confirm--copied:hover:not(:disabled)[b-tohyejidf5] { background: #D4EAB8; }
/* /Shared/ReissueInviteModal.razor.rz.scp.css */
/* ============================================================
   ReissueInviteModal.razor.css — Re-issue Invite Slide Panel
   ============================================================ */

/* ── Backdrop ── */
.panel-backdrop[b-25fgzxvygo] {
    position: fixed;
    inset: 0;
    background: rgba(27,42,74,.35);
    z-index: 400;
    animation: backdropIn-b-25fgzxvygo .22s ease;
}

@keyframes backdropIn-b-25fgzxvygo {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Panel ── */
.slide-panel[b-25fgzxvygo] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(400px, 100vw);
    background: #fff;
    z-index: 401;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 28px rgba(27,42,74,.2);
    animation: panelIn-b-25fgzxvygo .26s cubic-bezier(.4,0,.2,1);
}

@keyframes panelIn-b-25fgzxvygo {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* ── Header ── */
.slide-panel__header[b-25fgzxvygo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: #1B2A4A;
    flex-shrink: 0;
}

.slide-panel__header--success[b-25fgzxvygo] { background: #27500A; }

.slide-panel__title[b-25fgzxvygo] {
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #fff;
    font-family: Arial, sans-serif;
}

.slide-panel__close[b-25fgzxvygo] {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C9A84C;
    border-radius: 6px;
    transition: background .18s;
}

.slide-panel__header--success .slide-panel__close[b-25fgzxvygo] { color: #A8D87A; }
.slide-panel__close:hover[b-25fgzxvygo] { background: rgba(255,255,255,.12); }
.slide-panel__close svg[b-25fgzxvygo]   { width: 16px; height: 16px; }

/* ── Body ── */
.slide-panel__body[b-25fgzxvygo] {
    flex: 1;
    padding: 1.5rem 1.25rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* ── User row in confirm step ── */
.reinvite-user[b-25fgzxvygo] {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1rem;
    background: #F4F1EC;
    border: 0.5px solid #EAE6DF;
    border-radius: 10px;
}

.reinvite-avatar[b-25fgzxvygo] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    font-family: Arial, sans-serif;
    flex-shrink: 0;
}

.avatar--navy[b-25fgzxvygo] { background: rgba(27,42,74,.12);   color: #1B2A4A; }
.avatar--gold[b-25fgzxvygo] { background: rgba(201,168,76,.18);  color: #7A5C10; }

.reinvite-meta[b-25fgzxvygo] { display: flex; flex-direction: column; gap: 2px; }

.reinvite-name[b-25fgzxvygo] {
    font-size: .82rem;
    font-weight: 700;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
}

.reinvite-email[b-25fgzxvygo] {
    font-size: .72rem;
    color: #6B7A99;
    font-family: Arial, sans-serif;
}

/* ── Info banner ── */
.reinvite-info[b-25fgzxvygo] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    background: #EAF0FA;
    border: 0.5px solid #BDD0EF;
    border-radius: 8px;
    padding: .75rem .85rem;
    font-size: .78rem;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
    line-height: 1.4;
}

.reinvite-info svg[b-25fgzxvygo] {
    width: 18px;
    height: 18px;
    stroke: #1B2A4A;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Loading ── */
.panel-loading[b-25fgzxvygo] {
    align-items: center;
    justify-content: center;
    color: #6B7A99;
    font-size: .82rem;
    font-family: Arial, sans-serif;
    gap: .9rem;
}

.loading-spinner[b-25fgzxvygo] {
    width: 28px;
    height: 28px;
    border: 3px solid #EAE6DF;
    border-top-color: #C9A84C;
    border-radius: 50%;
    animation: spin-b-25fgzxvygo .7s linear infinite;
}

@keyframes spin-b-25fgzxvygo { to { transform: rotate(360deg); } }

/* ── Success hint ── */
.success-hint[b-25fgzxvygo] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    background: #EAF3DE;
    border: 0.5px solid #B8DABB;
    border-radius: 8px;
    padding: .75rem .85rem;
    font-size: .78rem;
    color: #27500A;
    font-family: Arial, sans-serif;
    line-height: 1.4;
}

.success-hint svg[b-25fgzxvygo] {
    width: 18px;
    height: 18px;
    stroke: #27500A;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Email preview ── */
.email-preview[b-25fgzxvygo] {
    border: 0.5px solid #EAE6DF;
    border-radius: 8px;
    overflow: hidden;
    flex: 1;
}

.email-preview__row[b-25fgzxvygo] {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    padding: .65rem .85rem;
    background: #F4F1EC;
}

.email-preview__label[b-25fgzxvygo] {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6B7A99;
    font-family: Arial, sans-serif;
    flex-shrink: 0;
    width: 52px;
}

.email-preview__value[b-25fgzxvygo] {
    font-size: .78rem;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
    font-weight: 600;
}

.email-preview__divider[b-25fgzxvygo] { height: 0.5px; background: #EAE6DF; }

.email-preview__body[b-25fgzxvygo] {
    padding: .85rem;
    font-size: .75rem;
    color: #1B2A4A;
    font-family: Arial, sans-serif;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
    background: #fff;
}

/* ── Form error ── */
.form-error[b-25fgzxvygo] {
    font-size: .74rem;
    color: #E24B4A;
    background: #FCEBEB;
    border: 0.5px solid #F5C6C6;
    border-radius: 7px;
    padding: .5rem .75rem;
    font-family: Arial, sans-serif;
    margin: 0;
}

/* ── Footer ── */
.slide-panel__footer[b-25fgzxvygo] {
    padding: 1rem 1.25rem;
    border-top: 1px solid #EAE6DF;
    display: flex;
    gap: .6rem;
    justify-content: flex-end;
    flex-shrink: 0;
}

/* ── Buttons ── */
.btn-cancel[b-25fgzxvygo] {
    background: none;
    border: 0.5px solid #EAE6DF;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: .78rem;
    font-weight: 600;
    color: #6B7A99;
    cursor: pointer;
    transition: border-color .18s, color .18s;
    font-family: Arial, sans-serif;
}

.btn-cancel:hover[b-25fgzxvygo] { border-color: #C9A84C; color: #1B2A4A; }

.btn-confirm[b-25fgzxvygo] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #C9A84C;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: .78rem;
    font-weight: 700;
    color: #1B2A4A;
    cursor: pointer;
    letter-spacing: .04em;
    transition: background .2s;
    font-family: Arial, sans-serif;
}

.btn-confirm svg[b-25fgzxvygo] { width: 14px; height: 14px; }
.btn-confirm:hover:not(:disabled)[b-25fgzxvygo] { background: #E2C07A; }

.btn-confirm--copied[b-25fgzxvygo] {
    background: #EAF3DE;
    color: #27500A;
}

.btn-confirm--copied:hover:not(:disabled)[b-25fgzxvygo] { background: #D4EAB8; }
/* /Shared/Toast.razor.rz.scp.css */
.toast-container[b-mhuou85krf] {
    --navy:  #1B2A4A;
    --gold:  #C9A84C;

    position: fixed;
    bottom: 1.5rem;
    right: 1.25rem;
    z-index: 400;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.toast[b-mhuou85krf] {
    background: #fff;
    border-left: 4px solid var(--gold);
    border-radius: 8px;
    padding: .65rem 1rem;
    font-size: .78rem;
    font-weight: 600;
    font-family: 'Arial', sans-serif;
    color: var(--navy);
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    animation: toastFadeIn-b-mhuou85krf .18s ease;
    cursor: pointer;
    max-width: 320px;
}

.toast--success[b-mhuou85krf] {
    border-left-color: #27500A;
    color: #27500A;
}

.toast--error[b-mhuou85krf] {
    border-left-color: #E24B4A;
    color: #E24B4A;
}

@keyframes toastFadeIn-b-mhuou85krf {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* /Shared/UserFormsModal.razor.rz.scp.css */
.modal-overlay[b-k673323jfa] {
    position: fixed;
    inset: 0;
    background: rgba(27,42,74,.35);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn-b-k673323jfa .18s cubic-bezier(.4,0,.2,1);
}

@keyframes fadeIn-b-k673323jfa {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-card[b-k673323jfa] {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0,0,0,.35);
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    animation: scaleIn-b-k673323jfa .2s cubic-bezier(.4,0,.2,1);
}

@keyframes scaleIn-b-k673323jfa {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

.modal-header[b-k673323jfa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1.1rem;
    background: #1B2A4A;
    border-radius: 12px 12px 0 0;
}

.modal-title[b-k673323jfa] {
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #fff;
    font-family: 'Arial Narrow', Arial, sans-serif;
}

.modal-close[b-k673323jfa] {
    background: none;
    border: none;
    color: rgba(255,255,255,.7);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    transition: color .15s;
}

.modal-close:hover[b-k673323jfa] { color: #fff; }

.modal-body[b-k673323jfa] {
    padding: 1.25rem 1.1rem;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state[b-k673323jfa] {
    font-size: .78rem;
    color: #6B7A99;
    font-family: Arial, sans-serif;
    text-align: center;
}

.modal-footer[b-k673323jfa] {
    display: flex;
    justify-content: flex-end;
    padding: .75rem 1.1rem 1rem;
    border-top: 0.5px solid #EAE6DF;
}

.btn-confirm[b-k673323jfa] {
    background: #C9A84C;
    color: #1B2A4A;
    border: none;
    border-radius: 8px;
    padding: 9px 18px;
    font-size: .82rem;
    font-weight: 700;
    font-family: Arial, sans-serif;
    cursor: pointer;
    transition: background .15s;
}

.btn-confirm:hover[b-k673323jfa] { background: #E2C07A; }
/* /Shared/ViewUserModal.razor.rz.scp.css */
.modal-overlay[b-le92x5jstw] {
    position: fixed;
    inset: 0;
    background: rgba(27,42,74,.35);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn-b-le92x5jstw .18s cubic-bezier(.4,0,.2,1);
}

@keyframes fadeIn-b-le92x5jstw {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-card[b-le92x5jstw] {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0,0,0,.35);
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    animation: scaleIn-b-le92x5jstw .2s cubic-bezier(.4,0,.2,1);
}

@keyframes scaleIn-b-le92x5jstw {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

.modal-header[b-le92x5jstw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1.1rem;
    background: #1B2A4A;
    border-radius: 12px 12px 0 0;
}

.modal-title[b-le92x5jstw] {
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #fff;
    font-family: 'Arial Narrow', Arial, sans-serif;
}

.modal-close[b-le92x5jstw] {
    background: none;
    border: none;
    color: rgba(255,255,255,.7);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    transition: color .15s;
}

.modal-close:hover[b-le92x5jstw] { color: #fff; }

.modal-body[b-le92x5jstw] {
    padding: 1.25rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.view-avatar[b-le92x5jstw] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: Arial, sans-serif;
    margin: 0 auto .5rem;
    background: #1B2A4A;
    color: #fff;
}

.view-field[b-le92x5jstw] {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .78rem;
    font-family: Arial, sans-serif;
    color: #1B2A4A;
    border-bottom: 0.5px solid #EAE6DF;
    padding-bottom: .6rem;
}

.view-field:last-child[b-le92x5jstw] { border-bottom: none; padding-bottom: 0; }

.view-label[b-le92x5jstw] {
    min-width: 60px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6B7A99;
    font-family: 'Arial Narrow', Arial, sans-serif;
}

.badge[b-le92x5jstw] {
    font-size: .6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: .05em;
    font-family: Arial, sans-serif;
}

.badge--active[b-le92x5jstw]  { background: #EAF3DE; color: #27500A; border: 0.5px solid #B8DABB; }
.badge--pending[b-le92x5jstw] { background: #FAEEDA; color: #633806; }
.badge--admin[b-le92x5jstw]   { background: rgba(27,42,74,.1); color: #1B2A4A; }

.modal-footer[b-le92x5jstw] {
    display: flex;
    justify-content: flex-end;
    padding: .75rem 1.1rem 1rem;
    border-top: 0.5px solid #EAE6DF;
}

.btn-confirm[b-le92x5jstw] {
    background: #C9A84C;
    color: #1B2A4A;
    border: none;
    border-radius: 8px;
    padding: 9px 18px;
    font-size: .82rem;
    font-weight: 700;
    font-family: Arial, sans-serif;
    cursor: pointer;
    transition: background .15s;
}

.btn-confirm:hover[b-le92x5jstw] { background: #E2C07A; }