/* Inter, bundled locally (same files as the native PayrollApp.App). The Inter files are a Latin
   subset without the peso sign, so the stack falls back to Segoe UI for it - keep it in the stack.
   Licence: fonts/Inter-OFL.txt. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Inter-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/Inter-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/Inter-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/Inter-Bold.ttf') format('truetype');
}

html, body {
    height: 100%;
    margin: 0;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    background: #EEF2ED;
}

/* Left drawer: the menu scrolls inside its own region and the footer sits BELOW it in normal flow,
   so a long menu (or a small window) can never run underneath the footer text. .mud-drawer-content
   is already a fixed-height flex column, which is what makes flex:1 + min-height:0 work here. */
.app-drawer-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(207, 227, 214, 0.35) transparent;
}

    /* Slightly tighter rows than MudBlazor's default (8px) so the whole menu fits more screens. */
    .app-drawer-nav .mud-nav-link {
        padding-top: 6px;
        padding-bottom: 6px;
    }

.app-drawer-footer {
    flex: 0 0 auto;
    padding: 10px 16px;
    color: #8FAE9C;
    border-top: 1px solid rgba(207, 227, 214, 0.15);
}

.loading-splash {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    color: #0F5132;
    font-size: 1.1rem;
}

#blazor-error-ui {
    background: #B3261E;
    color: white;
    bottom: 0;
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.75rem 1.25rem 0.75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 10000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* Zebra striping + sticky header for the dense grids this app is built around (DTR review,
   contribution tables, payroll run lines) -- MudTable's own Hover/Striped props handle most of
   this, this is just the horizontal-scroll affordance for wide grids on a locked-width column set. */
.dense-grid-scroll {
    overflow-x: auto;
}

.status-badge {
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.78rem;
    color: white;
    display: inline-block;
}

/* Employee Schedule grid: 7 day columns x 4 time fields each runs wide, and the employee list can
   run long, so this table scrolls in both directions inside its own box (rather than the whole
   page) with the header row and the employee-name column pinned, so you never lose track of which
   row/column you're looking at. */
/* MudSimpleTable wraps the <table> in its own .mud-table-container (overflow-x:auto), which makes
   that inner div - not this outer wrapper - the scroll container that position:sticky attaches to.
   If the outer div is the one with the max-height, the inner one never scrolls vertically and the
   sticky header has nothing to stick against. So the height limit and scrolling live on the inner
   container, and the outer wrapper just stays out of the way. */
.schedule-scroll {
    overflow: visible;
}

    .schedule-scroll .mud-table-container {
        max-height: calc(100vh - 260px);
        overflow: auto;
    }

.schedule-table thead th {
    position: sticky;
    top: 0;
    background: #FFFFFF;
    z-index: 2;
}

.schedule-table td:first-child,
.schedule-table th:first-child {
    position: sticky;
    left: 0;
    background: #FFFFFF;
    z-index: 1;
    box-shadow: 1px 0 0 #DDE5DD;
}

.schedule-table thead th:first-child {
    z-index: 3;
}

/* Clear separation between employees (thick row dividers, tinted name column with an accent bar)
   and between days (a vertical rule on every day column, padded cells so fields never touch it).
   border-collapse must be "separate" for borders to stay attached to sticky header/name cells
   while scrolling. */
.schedule-table table {
    border-collapse: separate !important;
    border-spacing: 0;
}

.schedule-table thead th {
    padding: 8px 6px !important;
    text-align: center;
    font-weight: 600;
    background: #E6EEE6;
    border-bottom: 2px solid #0F5132 !important;
    border-left: 1px solid #B8C6B8 !important;
}

    .schedule-table thead th:first-child {
        text-align: left;
        border-left: none !important;
        border-right: 2px solid #8FA58F !important;
    }

    .schedule-table thead th.schedule-weekend-col {
        background: #F1E8C8;
    }

.schedule-table tbody td {
    padding: 10px 12px !important;
    vertical-align: top;
    border-left: 1px solid #B8C6B8 !important;
    border-bottom: 3px solid #8FA58F !important;
}

.schedule-table tbody tr:last-child td {
    border-bottom: 3px solid #8FA58F !important;
}

.schedule-table tbody td.schedule-emp-cell {
    vertical-align: middle;
    background: #EEF3EE !important;
    border-left: none !important;
    border-right: 2px solid #8FA58F !important;
    box-shadow: inset 5px 0 0 #0F5132;
    padding-left: 18px !important;
    min-width: 170px;
}

.schedule-emp-last {
    font-weight: 700;
    color: #1B1D1B;
    line-height: 1.25;
}

.schedule-emp-first {
    color: #65706A;
    font-size: 0.8rem;
    line-height: 1.25;
}

/* Day-off cells: center the label vertically in the full row height. */
.schedule-table tbody td.schedule-day-cell .schedule-day-off-cell {
    min-height: 120px;
}

/* Subtle gold tint on Saturday/Sunday headers and cells so weekends read at a glance, independent
   of whether a given employee is actually scheduled off that day (day-off shading already covers
   that per-cell). */
.schedule-weekend-col {
    background-color: rgba(201, 162, 39, 0.08);
}

.schedule-day-off-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 64px;
}

.schedule-day-off-label {
    color: #65706A;
}

/* Cards view (grouped): two drop zones side by side, each a wrapping row of draggable cards.
   Dragging a card from one zone to the other is how a day is flipped between "working" and
   "day off" — see OnCardDropped in EmployeeSchedule.razor. */
.schedule-drop-container {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.schedule-dropzone {
    flex: 1 1 320px;
    min-height: 140px;
    background: rgba(15, 81, 50, 0.03);
    border: 1px dashed #DDE5DD;
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 12px;
}

.schedule-dropzone-off {
    background: rgba(201, 162, 39, 0.05);
}

/* Applied by schedule-dragdrop.js while a dragged card is hovering this zone. */
.schedule-dropzone-hover {
    border-color: #0F5132;
    background: rgba(15, 81, 50, 0.08);
}

.schedule-dropzone-title {
    width: 100%;
    display: flex;
    align-items: center;
    color: #1B1D1B;
    font-weight: 600;
    margin-bottom: 4px;
}

.schedule-drag-card {
    width: 260px;
    cursor: grab;
    /* Let schedule-dragdrop.js own touch gestures on the card instead of the browser trying to
       scroll or select text with them. */
    touch-action: none;
}

    .schedule-drag-card:active {
        cursor: grabbing;
    }

/* Applied by schedule-dragdrop.js to the card currently being dragged (it's switched to
   position:fixed and follows the pointer while this class is present). */
.schedule-drag-card-dragging {
    opacity: 0.85;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* DTR Import > Add Entries grid: same employee/day separation as the Employee Schedule table
   (thick divider under each employee, tinted name column with an accent bar, a vertical rule per
   day). Scrolling lives on MudSimpleTable's inner container so the header row and the name column
   stay pinned - see the note on .schedule-scroll. */
.dtr-scroll {
    overflow: visible;
}

    .dtr-scroll .mud-table-container {
        max-height: calc(100vh - 340px);
        overflow: auto;
    }

.dtr-table table {
    border-collapse: separate !important;
    border-spacing: 0;
}

.dtr-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px 6px !important;
    text-align: center;
    font-weight: 600;
    background: #E6EEE6;
    border-bottom: 2px solid #0F5132 !important;
    border-left: 1px solid #B8C6B8 !important;
}

    .dtr-table thead th:first-child {
        position: sticky;
        left: 0;
        z-index: 3;
        text-align: left;
        border-left: none !important;
        border-right: 2px solid #8FA58F !important;
    }

.dtr-table tbody td {
    padding: 10px 12px !important;
    vertical-align: top;
    border-left: 1px solid #B8C6B8 !important;
    border-bottom: 3px solid #8FA58F !important;
}

    .dtr-table tbody td.dtr-emp-cell {
        position: sticky;
        left: 0;
        z-index: 1;
        vertical-align: middle;
        min-width: 170px;
        padding-left: 18px !important;
        background: #EEF3EE !important;
        border-left: none !important;
        border-right: 2px solid #8FA58F !important;
        box-shadow: inset 5px 0 0 #0F5132;
    }

    .dtr-table tbody td.dtr-total-cell {
        vertical-align: middle;
        text-align: center;
        font-weight: 600;
        white-space: nowrap;
        background: #EEF3EE;
    }

.dtr-table thead th:last-child {
    background: #E6EEE6;
}

/* Payslip preview dialog: the rendered pages sit on a grey "desk" and scroll inside the dialog. */
.payslip-preview-scroll {
    max-height: 70vh;
    overflow: auto;
    padding: 12px;
    background: #DDE5DD;
    border-radius: 4px;
}

.payslip-preview-page {
    display: block;
    width: 100%;
    max-width: 640px;
    margin: 0 auto 12px auto;
    background: #FFFFFF;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

/* Holiday Calendar cards: each holiday looks like a tear-off calendar page (colored month band,
   big day number, weekday) next to its name, type and rate. --cal-color is set inline per card:
   red for a regular holiday, gold for a special non-working one. */
.holiday-month-title {
    margin: 18px 0 8px;
    padding-bottom: 4px;
    font-weight: 700;
    color: #0F5132;
    letter-spacing: 0.02em;
    border-bottom: 2px solid #DDE5DD;
}

    .holiday-month-title:first-child {
        margin-top: 0;
    }

.holiday-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.holiday-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 6px 10px 10px;
    background: #FFFFFF;
    border: 1px solid #DDE5DD;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.holiday-card-past {
    opacity: 0.6;
}

.holiday-card-next {
    border-color: var(--cal-color);
    box-shadow: 0 0 0 2px var(--cal-color);
}

.cal-tile {
    flex: 0 0 68px;
    overflow: hidden;
    text-align: center;
    background: #FFFFFF;
    border: 1px solid #C9D3C9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.cal-tile-month {
    padding: 3px 0;
    background: var(--cal-color);
    color: #FFFFFF;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.cal-tile-day {
    padding-top: 4px;
    color: #1B1D1B;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
}

.cal-tile-dow {
    padding-bottom: 5px;
    color: #65706A;
    font-size: 0.72rem;
    text-transform: uppercase;
}

.holiday-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.holiday-card-name {
    font-weight: 600;
    line-height: 1.25;
}

.holiday-card-rate {
    color: #65706A;
    font-size: 0.78rem;
}

.holiday-next-tag {
    color: var(--cal-color);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ---- Dashboard (mirrors the native PayrollApp.App DashboardPage: stat cards with a colored left
   bar, white bordered section cards, a bar chart for recent net payroll, backup + workflow cards) ---- */
.dash-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 60vh;
    color: #65706A;
    font-size: 0.8rem;
}

.dash-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 8px 12px;
}

.dash-welcome {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0F5132;
}

.dash-sub {
    font-size: 0.8rem;
    color: #65706A;
}

.dash-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.dash-stat {
    display: grid;
    grid-template-columns: 6px 1fr;
    background: #FFFFFF;
    border: 1px solid #DDE5DD;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(15, 81, 50, 0.08);
    overflow: hidden;
}

.dash-stat-bar {
    background: var(--bar, #0F5132);
}

.dash-stat-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dash-stat-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #65706A;
}

.dash-stat-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1B1D1B;
}

.dash-stat-value-sm {
    font-size: 0.8rem;
}

.dash-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px;
    background: #FFFFFF;
    border: 1px solid #DDE5DD;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(15, 81, 50, 0.08);
}

.dash-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0F5132;
}

.dash-note {
    font-size: 0.75rem;
    color: #65706A;
}

.dash-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.mud-button-root.dash-btn {
    text-transform: none;
    font-weight: 600;
    color: #FFFFFF !important;
    box-shadow: none !important;
}

.mud-button-root.dash-btn-accent {
    background-color: #C9A227 !important;
}

    .mud-button-root.dash-btn-accent:hover {
        background-color: #B08E20 !important;
    }

.mud-button-root.dash-btn-green {
    background-color: #1F7A4D !important;
}

    .mud-button-root.dash-btn-green:hover {
        background-color: #196540 !important;
    }

.dash-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
}

.dash-step-num {
    width: 24px;
    height: 24px;
    border-radius: 14px;
    background: #C9A227;
    color: #2B2200;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

/* Net payroll cost bar chart: gridlines at 0 / 50 / 100 % of a rounded-up axis max, one bar per
   finalized/paid run (oldest to newest, left to right), value above the bar, period end below. */
.trend {
    padding: 16px 12px 0 56px;
}

.trend-empty {
    padding: 24px 0;
    text-align: center;
    color: #65706A;
    font-size: 0.8rem;
}

.trend-plot {
    position: relative;
    height: 180px;
}

.trend-grid {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px solid #DDE5DD;
}

    .trend-grid:first-child {
        border-top: 1.5px solid #DDE5DD;
    }

.trend-y-label {
    position: absolute;
    right: 100%;
    margin-right: 8px;
    transform: translateY(-50%);
    font-size: 0.62rem;
    color: #65706A;
    white-space: nowrap;
}

.trend-bars {
    position: absolute;
    inset: 0;
    display: flex;
}

.trend-slot {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.trend-bar {
    position: relative;
    width: 55%;
    max-width: 48px;
    background: #0F5132;
    border-radius: 4px;
}

.trend-value {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 2px;
    font-size: 0.62rem;
    color: #1B1D1B;
    white-space: nowrap;
}

.trend-x {
    display: flex;
    margin-top: 6px;
    padding-bottom: 10px;
}

.trend-x-label {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 0.62rem;
    color: #65706A;
}

@media (max-width: 900px) {
    .dash-stats {
        grid-template-columns: 1fr;
    }
}

/* ---- Employees page: card grid. Click a card to open the edit dialog. ---- */
.emp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.emp-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: #FFFFFF;
    border: 1px solid #DDE5DD;
    border-left: 4px solid #0F5132;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s;
}

    .emp-card:hover,
    .emp-card:focus-visible {
        box-shadow: 0 4px 12px rgba(15, 81, 50, 0.18);
        transform: translateY(-1px);
        outline: none;
    }

.emp-card-inactive {
    border-left-color: #B7BEB9;
    opacity: 0.7;
}

.emp-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.emp-avatar {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #0F5132;
    color: #F3E6BE;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
}

.emp-card-inactive .emp-avatar {
    background: #8A948E;
    color: #FFFFFF;
}

.emp-card-id {
    flex: 1;
    min-width: 0;
}

.emp-card-name {
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.emp-card-pos {
    color: #65706A;
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.emp-badge {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.emp-badge-active {
    background: #DCEFE3;
    color: #1E7145;
}

.emp-badge-inactive {
    background: #ECEEEC;
    color: #65706A;
}

.emp-card-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    font-size: 0.85rem;
}

    .emp-card-meta > div {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .emp-card-meta span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.emp-meta-label {
    color: #65706A;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.emp-card-rate {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px dashed #DDE5DD;
}

.emp-rate-value {
    color: #0F5132;
    font-weight: 700;
}

/* Employment status row on a card (probationary / casual / contractual) and its deadline text. */
.emp-card-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
}

.emp-badge-employment {
    background: #F3E6BE;
    color: #7A5F0B;
}

.emp-due {
    font-weight: 600;
}

.emp-due-ontrack { color: #65706A; }
.emp-due-duesoon { color: #8A6D00; }
.emp-due-overdue { color: #B3261E; }


/* ---- Light / dark theme --------------------------------------------------------------------
   MudBlazor components follow the MudThemeProvider (see AppTheme.cs). Everything hand-styled in
   this file uses fixed light colors, so js/theme.js sets html[data-theme="light|dark"] and the
   block below re-colors those pieces for dark. The variables are also what pages use for inline
   colors (AppTheme.*Css), so a page never needs to know which theme is active. */
:root {
    --app-bg: #EEF2ED;
    --app-surface: #FFFFFF;
    --app-surface-2: #E6EEE6;
    --app-surface-3: #EEF3EE;
    --app-border: #DDE5DD;
    --app-border-strong: #8FA58F;
    --app-text: #1B1D1B;
    --app-muted: #65706A;
    --app-primary-text: #0F5132;
    --app-accent-soft: #F3E6BE;
    --app-positive: #1E7145;
    --app-negative: #B3261E;
    --app-holiday: #2C5F8A;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --app-bg: #121614;
    --app-surface: #1C211E;
    --app-surface-2: #232A26;
    --app-surface-3: #212824;
    --app-border: #33403A;
    --app-border-strong: #4A5B52;
    --app-text: #E6EBE7;
    --app-muted: #9AA69F;
    --app-primary-text: #6FD9A0;
    --app-accent-soft: #4A3F14;
    --app-positive: #5FCB90;
    --app-negative: #F2766E;
    --app-holiday: #7DB4E6;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
    background: var(--app-bg);
}

html[data-theme="dark"] .loading-splash { color: var(--app-primary-text); }

/* Schedule + DTR grids */
html[data-theme="dark"] .schedule-table thead th,
html[data-theme="dark"] .dtr-table thead th,
html[data-theme="dark"] .dtr-table thead th:last-child {
    background: var(--app-surface-2);
    border-bottom-color: var(--app-primary-text) !important;
    border-left-color: var(--app-border-strong) !important;
}

html[data-theme="dark"] .schedule-table thead th.schedule-weekend-col { background: #3A3314; }

html[data-theme="dark"] .schedule-table td:first-child,
html[data-theme="dark"] .schedule-table th:first-child {
    background: var(--app-surface);
    box-shadow: 1px 0 0 var(--app-border);
}

html[data-theme="dark"] .schedule-table thead th:first-child,
html[data-theme="dark"] .dtr-table thead th:first-child {
    background: var(--app-surface-2);
    border-right-color: var(--app-border-strong) !important;
}

html[data-theme="dark"] .schedule-table tbody td,
html[data-theme="dark"] .dtr-table tbody td {
    border-left-color: var(--app-border-strong) !important;
    border-bottom-color: var(--app-border-strong) !important;
}

html[data-theme="dark"] .schedule-table tbody td.schedule-emp-cell,
html[data-theme="dark"] .dtr-table tbody td.dtr-emp-cell {
    background: var(--app-surface-3) !important;
    border-right-color: var(--app-border-strong) !important;
    box-shadow: inset 5px 0 0 var(--app-primary-text);
}

html[data-theme="dark"] .dtr-table tbody td.dtr-total-cell { background: var(--app-surface-3); }

html[data-theme="dark"] .schedule-emp-last,
html[data-theme="dark"] .schedule-dropzone-title,
html[data-theme="dark"] .cal-tile-day,
html[data-theme="dark"] .dash-stat-value,
html[data-theme="dark"] .trend-value { color: var(--app-text); }

html[data-theme="dark"] .schedule-emp-first,
html[data-theme="dark"] .schedule-day-off-label,
html[data-theme="dark"] .cal-tile-dow,
html[data-theme="dark"] .holiday-card-rate,
html[data-theme="dark"] .dash-loading,
html[data-theme="dark"] .dash-sub,
html[data-theme="dark"] .dash-stat-label,
html[data-theme="dark"] .dash-note,
html[data-theme="dark"] .trend-empty,
html[data-theme="dark"] .trend-y-label,
html[data-theme="dark"] .trend-x-label,
html[data-theme="dark"] .emp-card-pos,
html[data-theme="dark"] .emp-meta-label { color: var(--app-muted); }

html[data-theme="dark"] .schedule-dropzone { border-color: var(--app-border); }
html[data-theme="dark"] .schedule-dropzone-hover { border-color: var(--app-primary-text); }

/* The payslip itself is a picture of a white sheet and stays white; only the "desk" changes. */
html[data-theme="dark"] .payslip-preview-scroll { background: var(--app-surface-2); }

/* Holiday calendar, dashboard, employee cards */
html[data-theme="dark"] .holiday-month-title {
    color: var(--app-primary-text);
    border-bottom-color: var(--app-border);
}

html[data-theme="dark"] .holiday-card,
html[data-theme="dark"] .cal-tile,
html[data-theme="dark"] .dash-stat,
html[data-theme="dark"] .dash-card,
html[data-theme="dark"] .emp-card {
    background: var(--app-surface);
    border-color: var(--app-border);
}

html[data-theme="dark"] .emp-card { border-left-color: var(--app-primary-text); }
html[data-theme="dark"] .emp-card-inactive { border-left-color: #5A645E; }

html[data-theme="dark"] .dash-welcome,
html[data-theme="dark"] .dash-card-title,
html[data-theme="dark"] .emp-rate-value { color: var(--app-primary-text); }

html[data-theme="dark"] .trend-grid,
html[data-theme="dark"] .trend-grid > * { border-top-color: var(--app-border); }
html[data-theme="dark"] .trend-bar { background: #3FA36F; }

html[data-theme="dark"] .emp-card-rate { border-top-color: var(--app-border); }
html[data-theme="dark"] .emp-avatar { background: #1F7A4D; color: #F3E6BE; }
html[data-theme="dark"] .emp-card-inactive .emp-avatar { background: #4A544E; }
html[data-theme="dark"] .emp-badge-active { background: #173A28; color: #6FD9A0; }
html[data-theme="dark"] .emp-badge-inactive { background: #2A302C; color: var(--app-muted); }
html[data-theme="dark"] .emp-badge-employment { background: var(--app-accent-soft); color: #F3E6BE; }
html[data-theme="dark"] .emp-due-ontrack { color: var(--app-muted); }
html[data-theme="dark"] .emp-due-duesoon { color: #E3C45A; }
html[data-theme="dark"] .emp-due-overdue { color: var(--app-negative); }

/* Status badges take their background from the theme colors, which are light in dark mode. */
html[data-theme="dark"] .status-badge { color: #0E1210; }