/* dark-mode.css — neutral-charcoal token flip (spec 2026-07-04-writer-reskin-foundation §2).
   The flip re-values the shared brand tokens; every site.css rule written against
   var(--…) inverts automatically. Chrome tokens are NOT flipped — the ink navbar and
   banners are constant across modes. The remaining rules below are structural overrides
   for surfaces that don't inherit tokens (Bootstrap .table, Syncfusion's light theme). */
body.dark-mode {
    --paper: #121214;
    --panel: #1a1a1c;
    --ink: #f2f2f0;
    --muted: #9a9a97;
    --hairline: rgba(255, 255, 255, .10);
    --clay: #C96A3F;
}

/* Bootstrap surfaces that hardcode light colors */
.dark-mode .card,
.dark-mode .modal-content,
.dark-mode .table {
    background-color: var(--panel) !important;
    color: var(--ink) !important;
    border-color: var(--hairline) !important;
}

/* Inputs, dropdowns, Syncfusion form components */
.dark-mode .form-control,
.dark-mode .e-ddl.e-control,
.dark-mode .e-input-group,
.dark-mode .e-numeric.e-control,
.dark-mode .e-datepicker.e-control {
    background-color: var(--panel) !important;
    color: var(--ink) !important;
    border-color: var(--hairline) !important;
}

/* Syncfusion grids */
.dark-mode .e-grid .e-gridheader,
.dark-mode .e-grid .e-gridcontent,
.dark-mode .e-grid .e-rowcell,
.dark-mode .e-grid .e-headercell {
    background-color: var(--panel) !important;
    color: var(--ink) !important;
    border-color: var(--hairline) !important;
}

    .dark-mode .e-grid .e-rowcell:hover,
    .dark-mode .e-grid .e-row:hover {
        background-color: color-mix(in srgb, var(--clay) 12%, var(--panel)) !important;
    }

/* Grid pager — Syncfusion's light theme paints the whole bottom bar white */
.dark-mode .e-pager,
.dark-mode .e-pager .e-pagercontainer,
.dark-mode .e-pager .e-numericitem,
.dark-mode .e-pager .e-parentmsgbar,
.dark-mode .e-pager div.e-icons {
    background-color: var(--panel) !important;
    color: var(--ink) !important;
    border-color: var(--hairline) !important;
}

    .dark-mode .e-pager .e-numericitem:hover {
        background-color: color-mix(in srgb, var(--clay) 12%, var(--panel)) !important;
        color: var(--ink) !important;
    }

    .dark-mode .e-pager .e-currentitem,
    .dark-mode .e-pager .e-currentitem:hover {
        background-color: var(--clay) !important;
        color: #fff !important;
    }

    .dark-mode .e-pager div.e-icons.e-disable {
        color: var(--muted) !important;
    }

/* Outline buttons */
.dark-mode .btn-outline-secondary,
.dark-mode .btn-outline-primary {
    color: var(--muted) !important;
    border-color: var(--hairline) !important;
}

    .dark-mode .btn-outline-secondary:hover,
    .dark-mode .btn-outline-primary:hover {
        background-color: color-mix(in srgb, var(--ink) 12%, transparent) !important;
        color: var(--ink) !important;
    }

/* SfDropDownList popup */
body.dark-mode .e-dropdownlist,
body.dark-mode .e-ddl.e-popup,
body.dark-mode .e-list-item,
body.dark-mode .e-input-group.e-control-wrapper.e-input.e-ddl,
body.dark-mode .e-input-filter {
    background-color: var(--panel) !important;
    color: var(--ink) !important;
    border-color: var(--hairline) !important;
}

    body.dark-mode .e-list-item.e-hover,
    body.dark-mode .e-list-item.e-active {
        background-color: var(--clay) !important;
        color: #fff !important;
    }

body.dark-mode .e-ddl-icon {
    color: var(--ink) !important;
}

/* ---- Screen Help drawer (dark) ---- */
body.dark-mode .screen-help-sidebar.e-sidebar,
body.dark-mode .screen-help-panel {
    background: var(--panel) !important;
    color: var(--ink) !important;
}

body.dark-mode .screen-help-body,
body.dark-mode .screen-help-title {
    color: var(--ink) !important;
}

body.dark-mode .screen-help-body a {
    color: var(--clay) !important;
}

/* Bootstrap's close icon is dark; invert it so it's visible on the dark drawer. */
body.dark-mode .screen-help-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

body.dark-mode .screen-help-header {
    border-bottom-color: var(--hairline);
}

body.dark-mode .screen-help-body td,
body.dark-mode .screen-help-body th {
    border-bottom-color: var(--hairline);
}

body.dark-mode .screen-help-body code {
    background: color-mix(in srgb, var(--ink) 12%, transparent);
}

/* ---- Long-tail dark polish (spec 2026-07-05-longtail-dark-polish) ---- */

/* Fallback error banner: lightyellow survives the token flip, but the text was
   inheriting the flipped (light) ink. Pin constant-dark text; keep it alarming. */
body.dark-mode #blazor-error-ui {
    color: #1C1917;
}

/* Selected cells regain the clay tint — the dark .e-rowcell rule above outranked
   the light-mode selection rule on specificity. */
.dark-mode .e-grid td.e-rowcell.e-active,
.dark-mode .e-grid .e-row.e-active .e-rowcell {
    background-color: color-mix(in srgb, var(--clay) 22%, var(--panel)) !important;
    color: var(--ink) !important;
}

/* Empty grid band ("No records to display") was stuck white. */
.dark-mode .e-grid .e-emptyrow td {
    background-color: var(--panel) !important;
    color: var(--muted) !important;
}

/* Custom select caret (register-card form-select) — recolor for dark visibility. */
body.dark-mode .register-card .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239a9a97' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}