/* ============================================================
   IT Solution Services — base.css
   Design tokens, reset, typography, and core primitives
   (buttons, inputs, tables, badges, alerts, cards, modal).
   Light mode is the default; add .dark to <html> for night.
   ============================================================ */
:root {
    /* Day (default) — clean white */
    --bg: #FFFFFF;
    --bg-soft: #F4F5F7;
    --card: #FFFFFF;
    --card-border: #E6E8EC;
    --brand: #C2410C;
    --brand-dim: #F97316;
    --brand-contrast: #FFFFFF;
    --gold: #855A12;
    --gold-dim: #C7A05A;
    --text: #1B1E25;
    --muted: #4B5563;
    --muted-dim: #5C6472;
    --nav: #384252;
    --error: #B4402A;
    --success: #157F4F;
    --info: #2F64A8;
    --sidebar-bg: rgba(255, 255, 255, 0.85);
    --topbar-bg: rgba(255, 255, 255, 0.85);
    --hover: rgba(0, 0, 0, 0.04);
    --hover-row: rgba(0, 0, 0, 0.022);
    --card-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
    --star-opacity: 0;
    --radius: 14px;
    --radius-sm: 8px;
    /* 222px is the mockup's rail. The brand row and the topbar are both 52px so the
       two meet on one line across the top of the app. */
    --sidebar-w: 222px;
    /* ---------- Type scale ----------
       The seven sizes the inventory surfaces are built from, named once so the
       numbers stop being copied into every scoped block. Each name says what the
       text IS, not how big it is — so a later retune changes one line here rather
       than forty declarations across four files.

       Deliberately NOT applied to the base primitives (.tbl, .input, .btn, …).
       Those still carry their original literals, so only the surfaces that opt in
       — .dt-card, .cfl-modal, .doc-form — read from this scale. Pointing the
       primitives here is the separate, wider change.

       Sizes do not vary by theme, so there is no counterpart in html.dark. */
    --fs-micro: 10.5px; /* column headers, uppercase micro-caps */
    --fs-sub: 11px; /* the sub-line under a value */
    --fs-meta: 11.5px; /* footers, field labels, chips */
    --fs-num: 12px; /* numeric cells */
    --fs-body: 12.5px; /* cell text, form controls, buttons */
    --fs-title: 13px; /* section and card titles */
    --fs-page: 20px; /* page title */
    /* Control heights: full for form fields, small for toolbar rows */
    --control-h: 32px;
    --control-h-sm: 30px;
}

html.dark {
    /* Night — warm charcoal */
    --bg: #131110;
    --bg-soft: #181614;
    --card: #1D1A17;
    --card-border: #2E2A26;
    --brand: #FB923C;
    --brand-dim: #C2410C;
    --brand-contrast: #201207;
    --text: #F5F0EB;
    --muted: #B3AAA1;
    --muted-dim: #8F8379;
    --nav: #E0D8D0;
    --error: #E88A7D;
    --success: #86CDA8;
    --info: #85B2E0;
    --sidebar-bg: rgba(29, 26, 23, 0.75);
    --topbar-bg: rgba(19, 17, 16, 0.75);
    --hover: rgba(255, 255, 255, 0.03);
    --hover-row: rgba(255, 255, 255, 0.015);
    --card-shadow: none;
    --star-opacity: 1;
    /* Night */
    /*--bg: #0A0E1A;
    --bg-soft: #0D1220;
    --card: #131A2C;
    --card-border: #232B42;
    --brand: #F97316;
    --brand-dim: #C2410C;
    --brand-contrast: #04122B;
    --gold: #D4A853;
    --gold-dim: #8A6E38;
    --text: #F0EEE9;
    --muted: #9AA6C0;
    --muted-dim: #7E89A6;
    --nav: #D2D9E6;
    --error: #E88A7D;
    --success: #86CDA8;
    --sidebar-bg: rgba(19, 26, 44, 0.72);
    --topbar-bg: rgba(10, 14, 26, 0.72);
    --hover: rgba(255, 255, 255, 0.03);
    --hover-row: rgba(255, 255, 255, 0.015);
    --card-shadow: none;
    --star-opacity: 1;*/
}

/* ---------- Reset ---------- */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    font-family: 'Inter', sans-serif;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.3s ease, color 0.3s ease;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: 'Inter', sans-serif;
    cursor: pointer;
}

img, svg {
    max-width: 100%;
}

h1, h2, h3 {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    margin: 0;
}

/* Starfield canvas (shared by every page) */
#stars {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: var(--star-opacity);
    transition: opacity 0.4s ease;
}

/* ---------- Cards ---------- */
.panel {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 20px 22px;
    box-shadow: var(--card-shadow);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

    .panel-head h2 {
        font-size: 16px;

        button {
            margin-left: 8px;
        }
    }

    .panel-head .hint {
        font-size: 12px;
        color: var(--muted);
    }

/* ---------- Page head / breadcrumbs ---------- */
.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

    .page-head h2 {
        font-size: 22px;
    }

    /* One line of orientation under the title, for pages whose name doesn't say
       what they hold. 12.5px against the mockup's own subtitle. */
    .page-head .lead {
        margin: 4px 0 0;
        font-size: var(--fs-body);
        line-height: 1.5;
        color: var(--muted);
        max-width: 72ch;
    }

/* .page-head centres its two columns, which is right for a title beside a
   breadcrumb trail and wrong the moment the left column grows a lead — the
   crumbs would drift to the middle of it. */
.page-head.stacked {
    align-items: flex-start;
}

    /* The mockup's page title is 20px, tightened. Kept in Fraunces — the size is
       the mockup's, the typeface stays the app's. */
    .page-head.stacked h2 {
        font-size: var(--fs-page);
        letter-spacing: -0.02em;
    }

/* ---------- Small shared utilities ----------
   Each of these replaced an inline style repeated across pages. */

/* The "hide password" eye. Both icons ship in the markup and tss-auth.js swaps
   which is shown; this is only the starting state, which was written inline on
   five buttons across Login, Register and Manage users. The script sets
   element.style.display at runtime, so it still wins over this rule. */
.icon-eye-off {
    display: none;
}

/* Server validation arrives as one newline-joined string; without this the
   breaks collapse and several errors run together as one sentence. */
.pre-line {
    white-space: pre-line;
}

/* Colour key dot beside a legend entry or a count. Size and shape come from the
   context that holds it (.mg-card .l i, .chart-legend i) — these only name the
   colour, so a swatch cannot drift away from the palette it is keying. */
.swatch-success {
    background: var(--success);
}

.swatch-error {
    background: var(--error);
}

.swatch-gold {
    background: var(--gold);
}

.swatch-muted {
    background: var(--muted);
}

/* A lone field at the foot of a panel needs no trailing margin — the panel's own
   padding already provides it. Was style="margin:0" on the form pages. */
.field:last-child {
    margin-bottom: 0;
}

/* ---------- Secondary text ---------- */

/* A sub-line under a value, a count under a table, an explanatory aside.
   Every module already marks these up as .hint; until now the class carried
   no rule, so <small> shrank the text without ever quieting it. */
.hint {
    color: var(--muted);
}

/* A hint that belongs UNDER the value it qualifies rather than beside it. */
.mg-sub {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-meta);
    line-height: 1.35;
}

.crumbs {
    font-size: 13px;
    color: var(--muted);
    margin-left: auto;
}

    .crumbs a:hover {
        color: var(--brand);
    }

    .crumbs .sep {
        margin: 0 7px;
        color: var(--muted-dim);
    }

    .crumbs .here {
        color: var(--brand);
    }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 18px;
    border: 1px solid transparent;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.1s ease;
}

    .btn:active {
        transform: scale(0.98);
    }

    .btn svg {
        width: 16px;
        height: 16px;
    }

.btn-primary {
    background: var(--brand);
    color: var(--brand-contrast);
}

    .btn-primary:hover {
        filter: brightness(1.12);
    }

.btn-outline {
    background: transparent;
    color: var(--text);
    border-color: var(--card-border);
}

    .btn-outline:hover {
        border-color: var(--brand-dim);
        color: var(--brand);
    }

.btn-ghost {
    background: transparent;
    color: var(--muted);
}

    .btn-ghost:hover {
        background: var(--hover);
        color: var(--text);
    }

.btn-success {
    background: var(--success);
    color: #fff;
}

    .btn-success:hover {
        filter: brightness(1.1);
    }

html.dark .btn-success {
    color: #06281A;
}

.btn-danger {
    background: var(--error);
    color: #fff;
}

    .btn-danger:hover {
        filter: brightness(1.1);
    }

html.dark .btn-danger {
    color: #2B0B06;
}

.btn-sm {
    padding: 7px 13px;
    font-size: 13px;
}

.btn-lg {
    padding: 13px 24px;
    font-size: 15px;
}

.btn-block {
    width: 100%;
}

.btn:disabled, .btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-icon {
    padding: 10px;
}

    .btn-icon.btn-sm {
        padding: 7px;
    }

/* ---------- Form controls ---------- */
.field {
    margin-bottom: 18px;
}

    .field > label {
        display: block;
        font-size: 13px;
        color: var(--muted);
        margin-bottom: 7px;
        letter-spacing: 0.02em;
        font-weight: 500;
    }

    .field label .req {
        color: #F04438;
    }

/* Two fields side by side (e.g. first + last name) */
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 480px) {
    .field-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.input, .select, .textarea {
    width: 100%;
    background: var(--bg-soft);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 11px 13px;
    font-size: 14px;
    color: var(--text);
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .input::placeholder, .textarea::placeholder {
        color: var(--muted-dim);
    }

    .input:focus, .select:focus, .textarea:focus {
        border-color: var(--brand-dim);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent);
    }

    .input:disabled, .select:disabled, .textarea:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

    /* Browsers tint recognised credential fields (username/password) with their own
       autofill background, which makes exactly those two inputs look different from the
       rest of the form. Repaint them to match .input so every field stays consistent. */
    .input:-webkit-autofill,
    .input:-webkit-autofill:hover,
    .input:-webkit-autofill:focus,
    .input:-webkit-autofill:active {
        -webkit-text-fill-color: var(--text);
        -webkit-box-shadow: 0 0 0 40px var(--bg-soft) inset;
        box-shadow: 0 0 0 40px var(--bg-soft) inset;
        caret-color: var(--text);
        /* Push the autofill background swap effectively forever into the future */
        transition: background-color 9999s ease-in-out 0s;
    }

.textarea {
    min-height: 110px;
    resize: vertical;
}

.input.is-error {
    border-color: var(--error);
}

    .input.is-error:focus {
        box-shadow: 0 0 0 3px rgba(224, 119, 107, 0.18);
    }

.input.is-success {
    border-color: var(--success);
}

/* A value the form shows but nobody types — a figure another document owns.
   Reads as system data rather than an empty box somebody forgot to fill.

   Item's "On hand" / "On order" carried this as style="background:var(--surface-2)",
   a token that is defined in no stylesheet, so the declaration was dropped and the
   fields rendered as ordinary editable-looking inputs. Same intent as .ib-ro on the
   stock grid, but available here — that class lives in the inventory sheet, which
   the management forms do not load. */
.input.is-readonly {
    /* The border carries the signal, not the fill: .input is ALREADY var(--bg-soft),
       so tinting the background changed precisely nothing — the field still looked
       exactly like one you could type in. A dashed edge reads as "not a box you fill"
       in both themes without inventing a colour. */
    border-style: dashed;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    cursor: default;
}

.field .help {
    font-size: 12px;
    color: var(--muted);
    margin-top: 6px;
}

    .field .help.error {
        color: var(--error);
    }

    .field .help.success {
        color: var(--success);
    }

/* Input with leading icon */
.input-icon {
    position: relative;
}

    .input-icon svg {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        color: var(--muted-dim);
        pointer-events: none;
    }

    .input-icon .input {
        padding-left: 38px;
    }

/* Checkbox + radio */
.check {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    margin-bottom: 10px;
}

    .check input {
        width: 16px;
        height: 16px;
        accent-color: var(--brand);
        cursor: pointer;
    }

    .check.disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Toggle switch */
.switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    cursor: pointer;
}

    .switch input {
        display: none;
    }

    .switch .track {
        width: 40px;
        height: 22px;
        border-radius: 20px;
        background: var(--card-border);
        position: relative;
        transition: background 0.2s ease;
        flex-shrink: 0;
    }

        .switch .track::after {
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #fff;
            transition: transform 0.2s ease;
            box-shadow: 0 1px 2px rgba(0,0,0,0.25);
        }

    .switch input:checked + .track {
        background: var(--brand);
    }

        .switch input:checked + .track::after {
            transform: translateX(18px);
        }

/* File input */
.file {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-soft);
    border: 1px dashed var(--card-border);
    border-radius: var(--radius-sm);
    padding: 14px;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
    transition: border-color 0.2s ease;
}

    .file:hover {
        border-color: var(--brand-dim);
    }

    .file input {
        display: none;
    }

    .file .file-btn {
        background: var(--brand);
        color: var(--brand-contrast);
        font-size: 12px;
        font-weight: 600;
        border-radius: 6px;
        padding: 6px 12px;
        flex-shrink: 0;
    }

/* ---------- Tables ---------- */
.table-wrap {
    overflow-x: auto;
}

table.tbl {
    width: 100%;
    border-collapse: collapse;
}

.tbl th {
    text-align: left;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-dim);
    font-weight: 600;
    padding: 12px 12px 12px;
    border-bottom: 1px solid var(--card-border);
    white-space: nowrap;
}

.tbl td {
    padding: 13px 12px;
    font-size: 13.5px;
    border-bottom: 1px solid var(--card-border);
    transition: background-color 0.15s;
}

.tbl tr:last-child td {
    border-bottom: none;
}

.tbl tbody tr:hover td {
    background: var(--hover-row);
}

/* ---------- Status pills & badges ---------- */
.status {
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

    .status::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
    }

    .status.done, .status.ok {
        color: var(--success);
        background: rgba(21, 127, 79, 0.10);
    }

    .status.pending {
        color: var(--brand);
        background: color-mix(in srgb, var(--brand) 14%, transparent);
    }

    .status.missed, .status.bad {
        color: var(--error);
        background: rgba(180, 64, 42, 0.10);
    }

html.dark .status.done, html.dark .status.ok {
    background: rgba(134, 205, 168, 0.10);
}

html.dark .status.missed, html.dark .status.bad {
    background: rgba(232, 138, 125, 0.10);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    padding: 3px 11px;
    white-space: nowrap;
}

    .badge svg {
        width: 12px;
        height: 12px;
    }

.badge-sm {
    font-size: 11px;
    padding: 2px 8px;
}
/* light (tint) variants */
.badge-brand {
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 14%, transparent);
}

.badge-success {
    color: var(--success);
    background: rgba(21, 127, 79, 0.10);
}

.badge-error {
    color: var(--error);
    background: rgba(180, 64, 42, 0.10);
}

.badge-info {
    color: var(--info);
    background: rgba(47, 100, 168, 0.10);
}

.badge-gray {
    color: var(--muted);
    background: var(--hover);
}

/* ---------- Document state ----------
   Applied by SmartEnums.DocStatusBadge alongside the palette class. A leading dot
   gives the state a shape to scan for rather than a block of colour to read, and
   separates the two grey states from each other.

   The transparent border is load-bearing: only Draft draws an outline, and without
   every state reserving the same 1px edge the draft badge would sit 2px taller than
   its neighbours and knock a table row out of alignment. */
.badge-state {
    border: 1px solid transparent;
}

    .badge-state::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        flex: 0 0 auto;
    }

/* Provisional — nothing about a draft is committed, so nothing about it is filled.
   Cancelled keeps the solid grey of the other settled states, which is what finally
   tells the two apart at a glance. */
.badge-state.is-draft {
    background: none;
    border-style: dashed;
    border-color: currentColor;
}

    .badge-state.is-draft::before {
        background: none;
        border: 1px solid currentColor;
    }

html.dark .badge-success {
    background: rgba(134, 205, 168, 0.10);
}

html.dark .badge-error {
    background: rgba(232, 138, 125, 0.10);
}

html.dark .badge-info {
    background: rgba(133, 178, 224, 0.10);
}
/* solid variants */
.badge-solid-brand {
    color: var(--brand-contrast);
    background: var(--brand);
}

.badge-solid-success {
    color: #fff;
    background: var(--success);
}

.badge-solid-error {
    color: #fff;
    background: var(--error);
}

.badge-solid-info {
    color: #fff;
    background: var(--info);
}

html.dark .badge-solid-success {
    color: #06281A;
}

html.dark .badge-solid-error {
    color: #2B0B06;
}

html.dark .badge-solid-info {
    color: #071B2E;
}

/* ---------- Alerts ---------- */
.alert {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    border: 1px solid var(--card-border);
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    padding: 15px 16px;
    background: var(--card);
    box-shadow: var(--card-shadow);
}

    .alert .a-ico {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        margin-top: 1px;
    }

    .alert .a-body {
        flex: 1;
        min-width: 0;
    }

    .alert .a-title {
        font-weight: 600;
        font-size: 14px;
        margin-bottom: 3px;
    }

    .alert .a-desc {
        font-size: 13px;
        color: var(--muted);
        line-height: 1.5;
    }

        .alert .a-desc a {
            color: var(--brand);
            text-decoration: underline;
        }

    .alert .a-close {
        background: none;
        border: none;
        color: var(--muted-dim);
        padding: 2px;
        flex-shrink: 0;
        border-radius: 5px;
    }

        .alert .a-close:hover {
            color: var(--text);
            background: var(--hover);
        }

        .alert .a-close svg {
            width: 15px;
            height: 15px;
            display: block;
        }

.alert-success {
    border-left-color: var(--success);
}

    .alert-success .a-ico, .alert-success .a-title {
        color: var(--success);
    }

.alert-warning {
    border-left-color: var(--brand);
}

    .alert-warning .a-ico, .alert-warning .a-title {
        color: var(--brand);
    }

.alert-error {
    border-left-color: var(--error);
}

    .alert-error .a-ico, .alert-error .a-title {
        color: var(--error);
    }

.alert-info {
    border-left-color: var(--info);
}

    .alert-info .a-ico, .alert-info .a-title {
        color: var(--info);
    }

/* ---------- Modal ---------- */
.modal-veil {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(12, 9, 7, 0.6);
    backdrop-filter: blur(3px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    /* Let the veil scroll if a modal is ever taller than the viewport,
       so the top of the dialog can never be clipped out of reach. */
    overflow-y: auto;
}

    .modal-veil.open {
        display: flex;
    }

.modal {
    width: 100%;
    max-width: 430px;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 26px 26px 22px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
    /* Never exceed the viewport (minus the veil's 20px top/bottom padding);
       long forms scroll inside the dialog instead of overflowing the screen. */
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

    .modal h3 {
        font-size: 18px;
        margin-bottom: 4px;
    }

    .modal .m-sub {
        font-size: 13px;
        color: var(--muted);
        margin: 0 0 20px;
    }

    .modal .m-actions {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        margin-top: 22px;
    }

/* ---------- Misc ---------- */
.divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
    font-size: 12px;
    color: var(--muted);
}

    .divider::before, .divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--card-border);
    }

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}

.password-wrap {
    position: relative;
}

    .password-wrap input {
        padding-right: 40px;
    }

.toggle-password {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #98A2B3;
    cursor: pointer;
    transition: color 0.15s ease;
}

    .toggle-password:hover {
        color: #667085;
    }

/* ============================================================
   Date picker (.dp-*)
   Component: Components/Shared/DatePicker.razor

   Lives in the base sheet so any module can use it. Replaces
   <input type="date">, whose popup the browser draws itself —
   unstyleable, and different in every browser.
   ============================================================ */
.dp {
    position: relative;
}

/* Closed state — matches .input so it lines up with other fields */
.dp-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    background: var(--bg-soft);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 11px 13px;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .dp-trigger:hover {
        border-color: var(--brand-dim);
    }

    .dp-trigger:focus-visible,
    .dp-trigger.on {
        outline: none;
        border-color: var(--brand);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
    }

    .dp-trigger svg {
        width: 17px;
        height: 17px;
        flex: 0 0 auto;
        color: var(--muted-dim);
    }

.dp-value.placeholder {
    color: var(--muted-dim);
}

.dp-disabled .dp-trigger {
    opacity: .55;
    pointer-events: none;
}

/* Invisible catcher so a click anywhere else closes the panel */
.dp-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
}

.dp-panel {
    position: absolute;
    z-index: 61;
    top: calc(100% + 6px);
    left: 0;
    width: 300px;
    max-width: 92vw;
    padding: 14px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
}

    /* Flip to the right edge when the field sits near the viewport edge */
    .dp-panel.right {
        left: auto;
        right: 0;
    }

/* ---- Header ---- */
.dp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.dp-nav {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--muted);
    cursor: pointer;
    transition: background .15s, color .15s;
}

    .dp-nav:hover {
        background: var(--hover);
        color: var(--brand);
    }

    .dp-nav svg {
        width: 16px;
        height: 16px;
    }

.dp-title {
    flex: 1;
    padding: 6px 8px;
    border: 0;
    border-radius: 8px;
    background: none;
    font-family: 'Fraunces', serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    transition: background .15s;
}

    .dp-title:hover {
        background: var(--hover);
    }

/* ---- Day grid ---- */
.dp-dows,
.dp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.dp-dow {
    padding: 6px 0;
    text-align: center;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted);
}

.dp-day {
    aspect-ratio: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 50%;
    background: none;
    font-size: 13px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

    .dp-day:hover:not(:disabled) {
        background: var(--hover);
    }

    /* Leading/trailing days from the neighbouring months */
    .dp-day.muted {
        color: var(--muted-dim);
    }

    /* Today is outlined, not filled — the filled treatment means "selected" */
    .dp-day.today {
        border-color: var(--card-border);
        font-weight: 600;
    }

    .dp-day.on,
    .dp-day.on.today {
        background: var(--brand);
        border-color: var(--brand);
        color: var(--brand-contrast);
        font-weight: 600;
    }

    .dp-day:disabled {
        opacity: .35;
        cursor: not-allowed;
    }

/* ---- Month view ---- */
.dp-months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.dp-month {
    padding: 10px 0;
    border: 1px solid transparent;
    border-radius: 9px;
    background: none;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

    .dp-month:hover {
        background: var(--hover);
    }

    .dp-month.on {
        background: var(--brand);
        border-color: var(--brand);
        color: var(--brand-contrast);
        font-weight: 600;
    }

/* ---- Footer ---- */
.dp-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--card-border);
}

.dp-link {
    border: 0;
    background: none;
    padding: 2px 4px;
    font-size: 12.5px;
    color: var(--muted);
    cursor: pointer;
    transition: color .15s;
}

    .dp-link:hover {
        color: var(--brand);
    }

    .dp-link.strong {
        font-weight: 600;
        color: var(--brand);
    }

    .dp-link:disabled {
        opacity: .45;
        pointer-events: none;
    }

    .dp-nav:focus-visible,
    .dp-title:focus-visible,
    .dp-day:focus-visible,
    .dp-month:focus-visible,
    .dp-link:focus-visible {
        outline: 2px solid var(--brand);
        outline-offset: 1px;
    }

/* ============================================================
   Print
   Until now printing any page produced the whole application —
   sidebar, topbar, toolbars, buttons — around a table clipped to
   whatever its scroller happened to show. This strips the shell and
   lays the document itself out for paper.

   Lives in base.css rather than beside the Print button: printing is
   Ctrl+P on every screen, not a feature of one form.
   ============================================================ */
@media print {
    /* Print light even from dark mode. html.dark outranks :root, so it has to be
       named here or a printed page comes out white-on-charcoal — unreadable on
       paper and a waste of most of a toner cartridge. */
    :root,
    html.dark {
        --bg: #FFFFFF;
        --bg-soft: #FFFFFF;
        --card: #FFFFFF;
        --card-border: #C7CBD2;
        --text: #000000;
        --muted: #3A3F49;
        --muted-dim: #555B66;
        --brand: #8A2E08;
        --brand-contrast: #FFFFFF;
        --hover: transparent;
        --hover-row: transparent;
        --card-shadow: none;
        --star-opacity: 0;
    }

    /* The application around the document */
    .sidebar,
    .topbar,
    .backdrop,
    #stars,
    .crumbs {
        display: none !important;
    }

    /* Controls: nothing here can be operated on paper, and the Print button
       printing itself is the giveaway that nobody tried it. */
    .mg-page-actions,
    .dt-controls,
    .mg-toolbar,
    .cfl-toolbar,
    .perm-foot,
    .mg-act,
    .mg-actions,
    .mg-pager {
        display: none !important;
    }

    /* Advisory UI — feedback and guidance about the document, not the document.

       Every one of these tells the reader what to do NEXT in the application:
       FormFeedback's save errors and confirmations (.mg-error / .mg-success),
       ClosedDocumentNotice on the transfer and receipt forms (.mg-note), and
       the status notes on the request form (.ib-note). On screen they are the
       point; on a printed record they are a page telling a sheet of paper to
       click something. The document's real status is in the letterhead. */
    .mg-error,
    .mg-success,
    .mg-note,
    .ib-note {
        display: none !important;
    }

    .layout,
    .main {
        display: block;
    }

    .content {
        padding: 0;
    }

    /* Scrollers hold the document's own content — on screen they clip to a box,
       on paper they must give up everything they have. */
    .table-wrap,
    .perm-scroll,
    .cfl-table,
    .perm-roles {
        overflow: visible !important;
        max-height: none !important;
    }

    /* Minimum widths exist to force horizontal SCROLLING, which paper cannot do */
    .tbl {
        min-width: 0 !important;
    }

    /* The summary belongs under the document once there is no second column */
    .doc-form {
        display: block;
    }

    .doc-side {
        position: static;
        margin-top: 12px;
    }

    .panel {
        border: 1px solid var(--card-border);
        box-shadow: none;
        break-inside: avoid;
    }

    /* A row split across a page break is unreadable on both halves */
    .tbl tr,
    .doc-sum-row {
        break-inside: avoid;
    }

    .tbl thead {
        display: table-header-group; /* repeat headings on every page */
    }

    a[href]::after {
        content: ""; /* no URL dumps after every link */
    }

    /* ---- Content that exists only on paper ---- */
    .print-only {
        display: block !important;
    }

    /* ============================================================
       Document form
       On screen the document is a stack of cards, which is right for
       a UI and wrong for a sheet of paper — a printed record wants
       ruled sections and a totals block, not borders and radii.
       ============================================================ */

    /* The letterhead states the document; the page head would repeat it */
    .page-head {
        display: none !important;
    }

    .doc-letterhead {
        display: flex;
        align-items: flex-start;
        gap: 24px;
        margin-bottom: 16px;
        padding-bottom: 9px;
        border-bottom: 2px solid var(--text);
    }

    .dl-org-name {
        font-size: 15px;
        font-weight: 700;
    }

    .dl-org-sub {
        margin-top: 2px;
        font-size: 9.5px;
        color: var(--muted);
    }

    .dl-doc {
        margin-left: auto;
        text-align: right;
    }

    .dl-doc-type {
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    /* display:contents on the wrapper lets each dt/dd pair land in the two
       grid tracks instead of the wrapper occupying one cell as a block. */
    .dl-doc-meta {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: end;
        gap: 1px 10px;
        margin: 6px 0 0;
    }

        .dl-doc-meta div {
            display: contents;
        }

        .dl-doc-meta dt {
            font-size: 9.5px;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: var(--muted);
        }

        .dl-doc-meta dd {
            margin: 0;
            font-size: 10.5px;
            font-weight: 600;
        }

    /* Cards stop being cards */
    .panel {
        border: 0;
        padding: 0;
        margin-bottom: 13px;
    }

    /* Section headings become ruled captions */
    .doc-form .tr-head {
        margin: 0 0 7px;
        padding: 0 0 3px;
        border-radius: 0;
        border-bottom: 1px solid var(--card-border);
    }

        .doc-form .tr-head h3 {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        /* The status is in the letterhead; a pill here says it twice */
        .doc-form .tr-head .badge {
            display: none;
        }

    /* Party / reference details, invoice style */
    .doc-form .mg-view {
        padding: 0;
        gap: 7px 24px;
    }

        .doc-form .mg-view dt {
            font-size: 9.5px;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: var(--muted);
        }

        .doc-form .mg-view dd {
            font-size: 11px;
            font-weight: 500;
        }

    /* Defensive: if an editable document is ever printed, the controls read as
       values rather than as empty boxes and dropdown arrows. */
    .doc-form .input,
    .doc-form .select,
    .doc-form .dp-trigger {
        height: auto;
        padding: 0;
        border: 0;
        background: none;
    }

    /* Line items as an invoice table: ruled top and bottom, no fills */
    .doc-form .tbl {
        border-top: 1px solid var(--text);
        border-bottom: 1px solid var(--text);
    }

        .doc-form .tbl thead th {
            padding: 5px 6px;
            font-size: 9.5px;
            background: none;
            border-bottom: 1px solid var(--text);
        }

        .doc-form .tbl td {
            padding: 5px 6px;
            font-size: 10.5px;
            border-bottom: 1px solid var(--card-border);
        }

        .doc-form .tbl th:first-child,
        .doc-form .tbl td:first-child {
            padding-left: 0;
        }

        .doc-form .tbl th:last-child,
        .doc-form .tbl td:last-child {
            padding-right: 0;
        }

    /* Totals sit bottom-right, where an invoice puts them */
    .doc-side {
        width: 46%;
        margin-left: auto;
    }

    .panel.doc-sum {
        padding: 0;
    }

    .doc-sum h3 {
        display: none; /* "Summary" is obvious once it is a totals block */
    }

    .doc-sum-row {
        padding: 3px 0;
        border-bottom: 1px dotted var(--card-border);
    }

    .doc-sum-k,
    .doc-sum-v {
        font-size: 10.5px;
    }

    /* The figure the document settles on */
    .doc-sum-row.main {
        padding: 5px 0;
        border-top: 1px solid var(--text);
        border-bottom: 2px solid var(--text);
    }

        .doc-sum-row.main .doc-sum-k {
            color: var(--text);
            font-weight: 700;
        }

        .doc-sum-row.main .doc-sum-v {
            font-family: inherit; /* Fraunces is display type, wrong for a total */
            font-size: 13px;
            font-weight: 700;
        }

    /* Signature block. break-inside:avoid keeps the rules with their captions —
       a rule stranded at the foot of page one with "Received by" at the top of
       page two is worse than no block at all. */
    .doc-sign {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 26px 22px;
        margin-top: 30px;
        break-inside: avoid;
    }

    .doc-sign-col {
        break-inside: avoid;
    }

    /* Height, not just a border: somebody has to fit a signature above the line */
    .doc-sign-line {
        height: 34px;
        border-bottom: 1px solid var(--text);
    }

    .doc-sign-role {
        margin-top: 5px;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .doc-sign-hint {
        margin-top: 1px;
        font-size: 9.5px;
        color: var(--muted);
    }

    .doc-sign-stamp {
        margin: 18px 0 0;
        font-size: 9.5px;
        color: var(--muted);
    }

    @page {
        margin: 14mm;
    }
}

/* Paper-only content, hidden on screen. Paired with the .print-only rule inside
   the print block above — declared out here so it is hidden by default. */
.print-only {
    display: none;
}