/* ============================================================================
   Easy Moni — application shell & design tokens
   ----------------------------------------------------------------------------
   Palette is Project Five's, taken from the real logo files in /branding
   (see docs/PROJECT-ROADMAP.md §1.1):

     --brand-red   #CE152C   sampled from the logo — primary / committing actions
     --brand-slate #596475   sampled from the logo — secondary text, muted chrome

   DELIBERATE DEVIATION: the dark app chrome (sidebar, wizard bar) uses charcoal
   #14181D, not the brand slate. Charcoal reads better as a dark UI surface than
   the lighter slate, and it matches the published wireframes. This is a recorded
   design choice, not drift — revisit only if the brand system later mandates the
   exact slate everywhere. The wireframes' accent #E5342A is superseded here by
   the exact logo red #CE152C.
   ========================================================================== */

:root {
    --brand-red: #CE152C;
    --brand-red-hover: #AE1125;
    --brand-red-wash: rgba(206, 21, 44, 0.10);
    --brand-slate: #596475;

    --chrome-dark: #14181D;      /* wizard top bar (see note above) */
    --chrome-dark-muted: #8A8F98;
    --chrome-dark-faint: #4A4E55;

    /* Left rail — the one chrome that tracks the OS colour scheme. Light values here,
       flipped in the prefers-color-scheme: dark block below. */
    --sidebar-bg: var(--surface);
    --sidebar-border: var(--line);
    --sidebar-ink: var(--ink);              /* active label / icon */
    --sidebar-ink-muted: var(--ink-soft);   /* resting label / icon */
    --sidebar-hover-bg: var(--surface-sunk);
    --sidebar-hover-ink: var(--ink);
    --sidebar-active-ink: var(--brand-red);
    --sidebar-active-bg: var(--brand-red-wash);
    --sidebar-control-border: var(--line-strong);

    --ink: #1A1A1A;
    --ink-soft: #6B6B68;
    --ink-faint: #8A8F98;

    --surface: #FFFFFF;
    --surface-sunk: #FAFAFA;
    --line: #E2E2E0;
    --line-soft: #F0F0EE;
    --line-strong: #D8D8D6;

    --ok: #1A8A5A;
    --ok-ink: #166B47;
    --ok-wash: rgba(26, 138, 90, 0.10);
    --warn-ink: #9A6A00;
    --warn-wash: #FFF6E6;
    --warn-line: #F0DCA8;
    --danger-ink: #A31221;
    --danger-wash: rgba(206, 21, 44, 0.09);

    --radius: 8px;
    --radius-sm: 7px;
    --radius-lg: 10px;

    --font: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --type-page-title: 24px;
    --type-section-title: 16px;
    --type-body: 14px;
    --type-label: 13px;
    --type-helper: 13px;
    --type-table: 14px;
    --type-table-head: 12px;
    --leading-body: 1.48;
    --leading-data: 1.4;
    --control-height: 38px;
    --shadow-drawer: -8px 0 24px rgba(0, 0, 0, 0.12);
}

/* Dark mode is scoped to the left rail only — the rest of the app is light-only for now.
   Light: white rail, black icons/labels. Dark: charcoal rail, white icons/labels. */
@media (prefers-color-scheme: dark) {
    :root {
        --sidebar-bg: #14181D;
        --sidebar-border: rgba(255, 255, 255, 0.08);
        --sidebar-ink: #FFFFFF;
        --sidebar-ink-muted: #C7CBD1;
        --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
        --sidebar-hover-ink: #FFFFFF;
        --sidebar-active-ink: #FF8791;
        --sidebar-active-bg: rgba(255, 135, 145, 0.14);
        --sidebar-control-border: rgba(255, 255, 255, 0.16);
    }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: var(--surface-sunk);
    font-size: 14px;
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-red); text-decoration: none; }
a:hover { color: var(--brand-red-hover); }

h1, h2, h3 { font-weight: 700; margin: 0; }

/* ── App shell ─────────────────────────────────────────────────────────────── */

.app-shell { display: flex; height: 100vh; overflow: hidden; }

/* ── Navigation tree ──────────────────────────────────────────────────────── */
.app-nav {
    width: 232px;
    flex-shrink: 0;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    padding: 12px 10px;
    gap: 3px;
    overflow-y: auto;
    overflow-x: hidden;
}
.app-nav-spacer { flex: 1; min-height: 12px; }

.app-nav-group { display: flex; flex-direction: column; }

.app-nav-row {
    display: flex; align-items: center;
    border-radius: var(--radius);
    color: var(--sidebar-ink-muted);
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.app-nav-row:hover { background: var(--sidebar-hover-bg); box-shadow: 0 1px 2px rgba(26, 26, 26, 0.025); }
.app-nav-row.active { background: var(--sidebar-active-bg); }
.app-nav-row.active .app-nav-label,
.app-nav-row.active .app-nav-ic { color: var(--sidebar-active-ink); }
.app-nav-group.current > .app-nav-row { box-shadow: inset 2px 0 0 var(--brand-red); }
.app-nav-group.current > .app-nav-row .app-nav-ic { color: var(--sidebar-active-ink); }

.app-nav-link {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 11px;
    padding: 9px 8px;
    color: inherit; text-decoration: none;
    font-size: 13px; font-weight: 600; line-height: 1.35;
}
.app-nav-link:hover { color: var(--sidebar-hover-ink); }
.app-nav-ic { display: flex; flex-shrink: 0; color: var(--sidebar-ink-muted); }
.app-nav-ic svg { width: 20px; height: 20px; }
.app-nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* "Lite" marker on the Payroll rail entry while full Payroll isn't entitled. */
.app-nav-pill {
    flex-shrink: 0; margin-left: auto;
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 1px 5px; border-radius: 999px;
    color: var(--sidebar-ink-muted); border: 1px solid currentColor; opacity: 0.7;
}

.app-nav-chevron {
    flex-shrink: 0;
    width: 26px; height: 30px; margin-right: 2px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: transparent; cursor: pointer;
    color: var(--sidebar-ink-muted); border-radius: 7px;
    transition: transform .18s cubic-bezier(.2, .8, .2, 1), color .16s ease, background .16s ease;
}
.app-nav-chevron:hover { color: var(--sidebar-hover-ink); background: var(--sidebar-hover-bg); }
.app-nav-chevron.open { transform: rotate(180deg); }

/* Subtree open/close — animate the row track from 0fr→1fr so it slides,
   with the content fading in. The inner wrapper clips during the slide. */
.app-nav-sub {
    display: grid;
    grid-template-rows: 0fr;
    margin-bottom: 0;
    will-change: grid-template-rows;
    transition: grid-template-rows .2s cubic-bezier(.2, .8, .2, 1), margin-bottom .2s cubic-bezier(.2, .8, .2, 1);
}
.app-nav-sub.open { grid-template-rows: 1fr; margin-bottom: 6px; }
.app-nav-sub-inner {
    min-height: 0;
    overflow: hidden;
    display: flex; flex-direction: column; gap: 2px;
    padding-left: 31px;
    opacity: 0;
    transition: opacity .14s ease;
}
.app-nav-sub.open .app-nav-sub-inner { opacity: 1; transition-delay: .04s; }

.app-nav-subitem {
    padding: 7px 9px;
    font-size: 12.5px; font-weight: 550; line-height: 1.4;
    color: var(--sidebar-ink-muted);
    text-decoration: none;
    border-radius: 7px;
    border-left: 2px solid transparent;
    transition: background .12s ease, color .12s ease;
}
.app-nav-subitem:hover { color: var(--sidebar-hover-ink); background: var(--sidebar-hover-bg); }
.app-nav-subitem.active {
    color: var(--sidebar-active-ink);
    background: var(--sidebar-active-bg);
    border-left-color: var(--brand-red);
}

@media (prefers-reduced-motion: reduce) {
    .app-nav-sub, .app-nav-sub-inner, .app-nav-chevron,
    .app-nav-row, .app-nav-subitem { transition: none; }
}

/* ── Account access — login and company registration ─────────────────────── */

.auth-form { width: 100%; }

.auth-form-heading { margin-bottom: 30px; }
.auth-eyebrow {
    margin: 0 0 8px;
    color: var(--brand-red);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.auth-form-heading h1 {
    color: #181a1c;
    font-size: clamp(28px, 3vw, 38px);
    letter-spacing: -.05em;
    line-height: 1.08;
}
.auth-form-heading > p:last-child {
    margin: 13px 0 0;
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.55;
}
.auth-field { margin-top: 17px; }
.auth-field label {
    display: block;
    margin-bottom: 8px;
    color: #34373a;
    font-size: 13px;
    font-weight: 700;
}
.auth-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.auth-label-row a { font-size: 12px; font-weight: 650; }
.auth-field input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #d8dadd;
    border-radius: 9px;
    outline: none;
    background: #fff;
    color: var(--ink);
    font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-field input::placeholder { color: #a1a5aa; }
.auth-hint { margin: 6px 2px 0; color: #6b6f74; font-size: 12px; }
.auth-field input:focus {
    border-color: var(--brand-red);
    box-shadow: 0 0 0 4px var(--brand-red-wash);
}
.auth-submit,
.auth-secondary-action {
    display: flex;
    width: 100%;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
}
.auth-submit {
    margin-top: 25px;
    border: 1px solid var(--brand-red);
    background: var(--brand-red);
    color: #fff;
    box-shadow: 0 7px 14px rgba(206, 21, 44, .16);
}
.auth-submit:hover { border-color: var(--brand-red-hover); background: var(--brand-red-hover); }
.auth-secondary-action {
    border: 1px solid #d9dcde;
    background: #fff;
    color: #2c3034;
}
.auth-secondary-action:hover { border-color: #bfc3c7; color: #151719; }
.auth-external {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.auth-external form { margin: 0; }
.auth-external-action {
    display: flex;
    width: 100%;
    height: 48px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 9px;
    border: 1px solid #d9dcde;
    background: #fff;
    color: #2c3034;
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
}
.auth-external-action:hover { border-color: #bfc3c7; color: #151719; }
.auth-provider-icon { width: 18px; height: 18px; flex-shrink: 0; }
.auth-inline-link {
    margin: 0 0 18px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f7f8f9;
    font-size: 12px;
    line-height: 1.5;
    word-break: break-all;
}
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 25px 0;
    color: var(--ink-faint);
    font-size: 12px;
}
.auth-divider::before, .auth-divider::after {
    height: 1px;
    flex: 1;
    background: var(--line);
    content: "";
}
.auth-build-note, .auth-terms, .auth-switch {
    margin: 20px 0 0;
    color: var(--ink-faint);
    font-size: 12px;
    line-height: 1.55;
}
.auth-error {
    margin: 0 0 18px;
    padding: 11px 12px;
    border: 1px solid rgba(206, 21, 44, .22);
    border-radius: 8px;
    background: var(--danger-wash);
    color: var(--danger-ink);
    font-size: 13px;
    line-height: 1.45;
}
.auth-note {
    margin: 0 0 18px;
    padding: 11px 12px;
    border: 1px solid rgba(26, 138, 90, .22);
    border-radius: 8px;
    background: var(--ok-wash);
    color: var(--ok-ink);
    font-size: 13px;
    line-height: 1.45;
}
.auth-terms { margin-top: 16px; }
.auth-switch { text-align: center; }
.auth-switch a { font-weight: 700; }

.ledger-eyebrow {
    margin-bottom: 3px;
    color: var(--brand-red);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .055em;
    text-transform: uppercase;
}
.ledger-inquiry-card { overflow-x: auto; }
.ledger-inquiry-card .grid-table { min-width: 635px; }
.ledger-row-link { color: inherit; text-decoration: none; }
.ledger-row-link:hover { color: inherit; }
.ledger-period-filter { min-width: 210px; }
.ledger-balance-summary {
    display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr));
    gap: 0; margin-bottom: 14px; padding: 0;
}
.ledger-balance-summary > div { display: grid; gap: 3px; padding: 13px 16px; border-right: 1px solid var(--line); }
.ledger-balance-summary > div:last-child { border-right: 0; }
.ledger-balance-summary span { color: var(--ink-soft); font-size: var(--type-label); font-weight: 600; }
.ledger-balance-summary strong { font-size: var(--type-section); font-variant-numeric: tabular-nums; }
.ledger-transaction-card { padding: 0; }
.ledger-transaction-table { min-width: 760px; }
.ledger-running-balance { font-weight: 650; }
.ledger-dimension {
    display: inline-block; margin-left: 6px; padding: 1px 5px;
    color: var(--ink-soft); font-size: 10.5px; line-height: 1.4;
    border: 1px solid var(--line-strong); border-radius: 4px;
}
@media (max-width: 640px) {
    .ledger-balance-summary { grid-template-columns: 1fr; }
    .ledger-balance-summary > div { border-right: 0; border-bottom: 1px solid var(--line); }
    .ledger-balance-summary > div:last-child { border-bottom: 0; }
}
.ledger-row-action { color: var(--brand-red); font-size: 12px; font-weight: 650; text-align: right; white-space: nowrap; }
.ledger-source { font-size: 11px; }


.app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.app-topbar {
    height: 52px; flex-shrink: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center;
    padding: 0 20px; gap: 14px;
}

.business-switcher {
    display: inline-flex; align-items: center; gap: 10px;
    min-width: 260px;
    max-width: 380px;
    padding: 8px 12px 8px 10px;
    border: 1px solid rgba(26, 26, 26, 0.08);
    border-radius: 14px;
    font-size: 13px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFBFA 100%);
    color: var(--ink);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.business-switcher:hover {
    border-color: rgba(206, 21, 44, 0.20);
    box-shadow: 0 4px 14px rgba(26, 26, 26, 0.06);
    transform: translateY(-1px);
}
.business-switcher:focus-within {
    border-color: rgba(206, 21, 44, 0.28);
    box-shadow: 0 0 0 4px var(--brand-red-wash);
}

.business-switcher-badge {
    width: 30px; height: 30px;
    border-radius: 10px;
    background: var(--brand-red-wash);
    color: var(--brand-red);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.business-switcher-body {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1;
}
.business-switcher select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    background: transparent;
    font: inherit;
    font-weight: 700;
    color: inherit;
    cursor: pointer;
    outline: none;
    padding: 0;
}
.business-switcher-select {
    width: 100%;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.business-switcher-caret {
    color: var(--ink-faint);
    flex-shrink: 0;
}

/* Module title, promoted into the topbar next to the company switcher. Every page in a
   module shows the module name here; the active tab below names the page within it. */
.app-topbar-divider { width: 1px; height: 20px; background: var(--line); flex-shrink: 0; }
.app-topbar-title {
    font-size: 15px; font-weight: 700; color: var(--ink);
    letter-spacing: -.01em; white-space: nowrap;
}

.topbar-spacer { flex: 1; }

.avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--brand-red); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
}
.account-menu { position: relative; }
.account-menu summary { list-style: none; cursor: pointer; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu-panel {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; width: 224px;
    padding: 8px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px;
    box-shadow: 0 12px 28px rgba(26,26,26,.14);
}
.account-menu-user { padding: 8px 10px 10px; font-size: 12px; color: var(--ink-faint); overflow-wrap: anywhere; border-bottom: 1px solid var(--line); }
.account-menu-panel a, .account-menu-panel button { display: block; box-sizing: border-box; width: 100%; padding: 9px 10px; border: 0; background: transparent; color: var(--ink); text-align: left; font: inherit; font-size: 13px; text-decoration: none; border-radius: 7px; cursor: pointer; }
.account-menu-panel a:hover, .account-menu-panel button:hover { background: var(--surface-sunk); }
.account-menu-panel form { margin: 0; }

/* Company workspace switcher — a real popover keyed to the app's surfaces, replacing the
   native <select> whose OS-drawn option list never matched the styled trigger. */
.business-menu { position: relative; display: inline-flex; }
.business-menu > summary { list-style: none; }
.business-menu > summary::-webkit-details-marker { display: none; }
.business-menu[open] .business-switcher-caret { transform: rotate(180deg); }
.business-switcher-caret { transition: transform .15s ease; }
.business-switcher-select { display: block; font-weight: 700; line-height: 1.25; }
.business-menu-panel {
    position: absolute; left: 0; top: calc(100% + 10px); z-index: 30;
    width: min(320px, calc(100vw - 32px)); max-height: 62vh; overflow: auto;
    padding: 6px; background: var(--surface); border: 1px solid var(--line-strong);
    border-radius: 12px; box-shadow: 0 12px 28px rgba(26, 26, 26, .14);
}
.business-menu-head {
    padding: 8px 10px 9px; font-size: 10px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-faint); border-bottom: 1px solid var(--line);
    margin-bottom: 4px;
}
.business-menu-item {
    display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%;
    padding: 9px 10px; border: 0; border-radius: 8px; background: transparent;
    font: inherit; font-size: 13px; color: var(--ink); text-align: left; cursor: pointer;
}
.business-menu-item:hover { background: var(--surface-sunk); }
.business-menu-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.business-menu-item[aria-current="true"] { font-weight: 700; }
.business-menu-item .tick { margin-left: auto; color: var(--brand-red); flex-shrink: 0; }
.business-menu-head-sub {
    margin-top: 6px; border-top: 1px solid var(--line); border-bottom: 0; padding-top: 10px;
}
.business-menu-empty { padding: 4px 10px 9px; font-size: 12px; color: var(--ink-faint); }
.business-menu-item-closed > span:first-child { color: var(--ink-soft); }
.business-menu-tag {
    margin-left: auto; flex-shrink: 0; font-size: 10px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-faint);
    background: var(--surface-sunk); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px;
}
.business-menu-item-closed .tick { margin-left: 8px; }
.business-menu-foot { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.business-menu-foot a {
    display: block; padding: 9px 10px; border-radius: 8px; font-size: 13px;
    font-weight: 600; color: var(--brand-red); text-decoration: none;
}
.business-menu-foot a:hover { background: var(--brand-red-wash); }

/* ── Operator Console ─────────────────────────────────────────────────────────
   A deliberately separate surface from the customer workspace: cooler, denser,
   internal-tool aesthetic (think a control panel, not the branded product).
   Its own token set so it can never drift into the customer app's styling. */
.pc {
    --pc-bg: #0f1115;
    --pc-panel: #ffffff;
    --pc-ink: #1a1f29;
    --pc-ink-soft: #5b6472;
    --pc-ink-faint: #8b94a3;
    --pc-line: #e4e7ec;
    --pc-line-soft: #eef0f3;
    --pc-accent: #4f46e5;
    --pc-rail: #14181f;
    --pc-rail-ink: #aab3c1;
    --pc-rail-ink-dim: #6b7482;
    --pc-ok: #157a4a;
    --pc-warn: #9a6a00;
    --pc-danger: #b3261e;
}

.pc-shell { height: 100vh; overflow: hidden; display: flex; background: #f6f7f9; color: var(--pc-ink); }

.pc-rail {
    width: 248px; flex-shrink: 0; background: var(--pc-rail); color: var(--pc-rail-ink);
    display: flex; flex-direction: column; padding: 16px 12px;
    overflow-y: auto; overflow-x: hidden;
}
.pc-rail-brand { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px 16px; }
.pc-rail-brand strong { color: #fff; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.pc-rail-brand span {
    font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: #ff8791;
}
.pc-rail nav { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.pc-rail nav a {
    display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 7px;
    color: var(--pc-rail-ink); text-decoration: none; font-size: 14px; font-weight: 550;
}
.pc-rail nav a svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.pc-rail nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.pc-rail nav a.active { background: rgba(255,255,255,.09); color: #fff; }
.pc-rail-spacer { flex: 1; }
.pc-rail-foot { border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; margin-top: 10px; }
.pc-rail-foot a {
    display: flex; align-items: center; gap: 8px; padding: 10px 11px; border-radius: 7px;
    color: var(--pc-rail-ink-dim); text-decoration: none; font-size: 13px; font-weight: 600;
}
.pc-rail-foot a svg { width: 17px; height: 17px; flex-shrink: 0; }
.pc-rail-foot a:hover { color: #fff; background: rgba(255,255,255,.05); }

.pc-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.pc-header {
    height: 56px; flex-shrink: 0; background: var(--pc-panel); border-bottom: 1px solid var(--pc-line);
    display: flex; align-items: center; gap: 12px; padding: 0 24px;
}
.pc-badge {
    font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: #fff; background: #1a1f29; border-radius: 5px; padding: 3px 7px;
}
.pc-header-spacer { flex: 1; }
.pc-header .pc-user { font-size: 13px; color: var(--pc-ink-soft); font-weight: 600; }
.pc-header form { margin: 0; }
.pc-header button {
    border: 1px solid var(--pc-line); background: var(--pc-panel); color: var(--pc-ink-soft);
    font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 7px; cursor: pointer;
}
.pc-header button:hover { border-color: var(--pc-ink-faint); color: var(--pc-ink); }

.pc-content { flex: 1; min-height: 0; overflow: auto; padding: 28px 32px; max-width: 1180px; width: 100%; }
.pc-page-head { margin-bottom: 22px; }
.pc-page-head h1 { font-size: 23px; letter-spacing: -.02em; }
.pc-page-head p { margin: 5px 0 0; color: var(--pc-ink-soft); font-size: 13.5px; max-width: 70ch; }

.pc-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.pc-kpi {
    background: var(--pc-panel); border: 1px solid var(--pc-line); border-radius: 10px; padding: 15px 16px;
    display: flex; flex-direction: column; gap: 3px;
}
.pc-kpi .k-label { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pc-ink-faint); }
.pc-kpi .k-value { font-size: 27px; font-weight: 700; letter-spacing: -.02em; }
.pc-kpi .k-sub { font-size: 12px; color: var(--pc-ink-soft); }

.pc-panel { background: var(--pc-panel); border: 1px solid var(--pc-line); border-radius: 10px; margin-bottom: 16px; }
.pc-panel-head { padding: 16px 18px; border-bottom: 1px solid var(--pc-line-soft); }
.pc-panel-head h2 { font-size: 15px; }
.pc-panel-head p { margin: 3px 0 0; color: var(--pc-ink-soft); font-size: 12.5px; }
.pc-panel-body { padding: 16px 18px; }

.pc-table { width: 100%; }
.pc-table .tr {
    display: grid; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--pc-line-soft);
    align-items: center; font-size: 13.5px;
}
.pc-table .tr:last-child { border-bottom: none; }
.pc-table .tr.th {
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--pc-ink-faint); background: #fafbfc;
}
.pc-table .tr small { display: block; color: var(--pc-ink-faint); font-size: 11px; margin-top: 2px; }
.pc-table a.pc-row-link { color: inherit; text-decoration: none; cursor: pointer; }
.pc-table a.pc-row-link:hover { background: #f7f9fc; }

.pc-tag {
    display: inline-block; font-size: 11.5px; font-weight: 650; padding: 2px 8px; border-radius: 20px;
    background: var(--pc-line-soft); color: var(--pc-ink-soft);
}
.pc-tag.ok { background: rgba(21,122,74,.1); color: var(--pc-ok); }
.pc-tag.warn { background: rgba(154,106,0,.12); color: var(--pc-warn); }
.pc-tag.danger { background: rgba(179,38,30,.1); color: var(--pc-danger); }

.pc-soon { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-soon span {
    font-size: 12.5px; color: var(--pc-ink-soft); background: #f2f4f7; border: 1px dashed var(--pc-line);
    border-radius: 7px; padding: 6px 10px;
}
.pc-note { display: flex; gap: 10px; font-size: 13px; color: var(--pc-ink-soft); background: #f7f8fa; border: 1px solid var(--pc-line-soft); border-radius: 8px; padding: 12px 14px; }

.pc-btn {
    display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--pc-line);
    background: var(--pc-panel); color: var(--pc-ink); font: inherit; font-size: 13px; font-weight: 600;
    padding: 8px 13px; border-radius: 7px; cursor: pointer; text-decoration: none;
}
.pc-btn:hover { border-color: var(--pc-ink-faint); }
.pc-btn.primary { background: var(--pc-accent); border-color: var(--pc-accent); color: #fff; }
.pc-btn.primary:hover { background: #4338ca; }
.pc-btn.danger { color: var(--pc-danger); border-color: rgba(179,38,30,.35); }
.pc-btn.danger:hover { border-color: var(--pc-danger); background: rgba(179,38,30,.06); }
.pc-btn:disabled { opacity: .5; cursor: not-allowed; }

.pc-field { display: flex; flex-direction: column; gap: 5px; }
.pc-field label { font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--pc-ink-faint); }
.pc-field input {
    border: 1px solid var(--pc-line); border-radius: 7px; padding: 8px 10px; font: inherit; font-size: 13.5px;
    background: var(--pc-panel); color: var(--pc-ink);
}
.pc-field input:focus { outline: none; border-color: var(--pc-accent); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
.pc-filter {
    width: 100%; max-width: 320px; border: 1px solid var(--pc-line); border-radius: 7px;
    padding: 8px 11px; font: inherit; font-size: 13px; background: var(--pc-panel); color: var(--pc-ink);
}
.pc-filter:focus { outline: none; border-color: var(--pc-accent); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
.pc-callout { border-radius: 8px; padding: 11px 13px; font-size: 12.5px; margin-top: 12px; }
.pc-callout.ok { background: rgba(21,122,74,.08); color: var(--pc-ok); }
.pc-callout.warn { background: var(--warn-wash); color: var(--pc-warn); }

@media (max-width: 900px) {
    .pc-rail { display: none; }
    .pc-content { padding: 20px 16px; }
    .pc-kpis { grid-template-columns: repeat(2, 1fr); }

}

.app-tabs {
    display: flex; gap: 22px;
    border-bottom: 1px solid var(--line);
    padding: 0 24px;
    background: var(--surface);
}

/* Support-access session / request ribbon — sits under the topbar, full width. */
.support-ribbon {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 8px 24px; font-size: 12.5px;
    background: #14181d; color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.support-ribbon.pending { background: #9a6a00; }
.support-ribbon.info { background: #1f4e79; }
.support-ribbon-tag {
    font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    background: rgba(255,255,255,.16); border-radius: 4px; padding: 2px 7px;
}
.support-ribbon a { color: #fff; font-weight: 700; text-decoration: underline; margin-left: auto; }

/* "Finish setting up" nudge — slim strip under the topbar until onboarding completes.
   Segmented meter (one tick per step) keeps it distinct from a generic progress bar. */
.setup-nudge {
    display: flex; align-items: center; gap: 12px;
    padding: 7px 24px; font-size: 12.5px;
    background: var(--warn-wash); color: var(--ink);
    border-bottom: 1px solid var(--warn-line);
}
.setup-nudge-meter { display: inline-flex; gap: 3px; }
.setup-nudge-meter span {
    width: 16px; height: 5px; border-radius: 2px;
    background: var(--warn-line);
}
.setup-nudge-meter span.on { background: var(--brand-red); }
.setup-nudge-copy { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.setup-nudge-copy strong { font-weight: 700; }
.setup-nudge-count { color: var(--warn-ink); font-size: 11.5px; }
.setup-nudge-go {
    margin-left: auto; font-weight: 700; color: var(--brand-red);
    text-decoration: none; white-space: nowrap;
}
.setup-nudge-go:hover { text-decoration: underline; }
.setup-nudge-dismiss {
    border: 0; background: transparent; cursor: pointer;
    color: var(--warn-ink); font-size: 12px; line-height: 1; padding: 4px;
}
.setup-nudge-dismiss:hover { color: var(--ink); }
@media (max-width: 640px) {
    .setup-nudge { padding-inline: 14px; }
    .setup-nudge-count { display: none; }
}

/* /onboarding checklist page */
.setup-progress {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 14px 16px; margin-bottom: 16px;
}
.setup-progress .btn { margin-left: auto; }
.setup-done {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 18px 18px;
}
.setup-done .btn { margin-left: auto; }
.setup-done-tick {
    display: grid; place-items: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--ok-wash); color: var(--ok-ink); font-weight: 800;
}
.setup-checklist { list-style: none; margin: 0; padding: 0; counter-reset: setup; }
.setup-checklist li {
    counter-increment: setup;
    display: flex; align-items: flex-start; gap: 14px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--line-soft);
}
.setup-checklist li:last-child { border-bottom: 0; }
.setup-checklist-dot {
    flex: none; display: grid; place-items: center;
    width: 24px; height: 24px; border-radius: 50%;
    border: 1.5px solid var(--line-strong); background: var(--surface);
    font-size: 12px; font-weight: 800; color: var(--ink-faint);
}
.setup-checklist-dot::before { content: counter(setup); }
.setup-checklist li.is-done .setup-checklist-dot {
    border-color: var(--ok-ink); background: var(--ok-ink); color: #fff;
}
.setup-checklist li.is-done .setup-checklist-dot::before { content: ""; }
.setup-checklist li.is-next .setup-checklist-dot {
    border-color: var(--brand-red); color: var(--brand-red);
}
.setup-checklist-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.setup-checklist-title { font-weight: 650; display: flex; align-items: center; gap: 8px; }
.setup-checklist li.is-done .setup-checklist-title { color: var(--ink-soft); }
.setup-checklist-optional {
    font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--ink-faint); border: 1px solid var(--line-strong); border-radius: 4px; padding: 1px 5px;
}
.setup-checklist-blurb { font-size: 12.5px; }
.setup-checklist li > .btn { flex: none; margin-top: 2px; }
.app-tabs a {
    padding: 11px 2px;
    font-size: 13px; font-weight: 600;
    color: var(--ink-faint);
    border-bottom: 2px solid transparent;
}
.app-tabs a:hover { color: var(--ink); }
.app-tabs a.active { color: var(--ink); border-bottom-color: var(--brand-red); }

.app-content { flex: 1; min-height: 0; overflow: auto; padding: 20px 24px; }

/* Standard module-landing header (see ModuleLanding.razor — title is in the topbar). */
.module-landing { margin-bottom: 18px; }
.module-landing-desc { margin: 0 0 12px; color: var(--ink-faint); font-size: 12.5px; max-width: 72ch; }
.module-landing-desc:last-child { margin-bottom: 0; }
.module-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Subscription gate panel (ModuleGate.razor) shown when a module is not in the plan. */
.module-gate { max-width: 460px; margin: 40px auto; padding: 32px 28px; text-align: center; }
.module-gate-icon { color: var(--ink-soft); margin-bottom: 10px; }
.module-gate-icon svg { width: 28px; height: 28px; }
.module-gate h2 { font-size: 17px; margin-bottom: 8px; }
.module-gate p { color: var(--ink-faint); font-size: 12.5px; margin: 0 0 18px; }

/* Dashboard overview */
.dashboard-alert { margin: 0 0 18px; padding: 12px 15px; gap: 11px; border-radius: 10px; }
.dashboard-alert-icon {
    width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(154,106,0,.12); font-weight: 800; flex-shrink: 0;
}
.dashboard-alert-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dashboard-alert-copy span { font-weight: 500; font-size: 12px; }
.dashboard-alert-link { font-size: 12px; font-weight: 700; white-space: nowrap; }
/* Position figures — one connected panel divided by hairlines, like a ledger summary
   line rather than a wall of separate KPI cards. */
.dashboard-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; overflow: hidden; }
.dashboard-figure {
    display: flex; flex-direction: column; gap: 7px; padding: 16px 20px 15px;
    border-right: 1px solid var(--line-soft); border-top: 2px solid transparent;
}
.dashboard-figure:last-child { border-right: 0; }
.dashboard-figure-label {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--ink-soft);
}
.dashboard-figure-value {
    font-size: 23px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.dashboard-figure-value.is-muted { font-size: 16px; font-weight: 600; color: var(--ink-faint); }
.dashboard-figure-link { font-size: 11px; font-weight: 600; margin-top: auto; padding-top: 4px; }
.fig-cash { border-top-color: var(--brand-red); }
.fig-owed { border-top-color: var(--ok); }
.fig-owe  { border-top-color: #D28B2C; }
.fig-vat  { border-top-color: var(--brand-slate); }

/* Monthly returns — the current-period call-to-action + year accordions. */
.return-current {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 20px; margin-bottom: 16px; cursor: pointer;
    border-left: 3px solid var(--brand-red); transition: border-color .15s ease, box-shadow .15s ease;
}
.return-current:hover { box-shadow: 0 6px 18px rgba(26,26,26,.06); }
.return-empty-shell { max-width: 620px; }
.return-year { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 8px; }
.return-year > summary { cursor: pointer; font-weight: 650; font-size: 13px; list-style: none; }
.return-year > summary::-webkit-details-marker { display: none; }
.return-year > summary::before { content: '▸ '; color: var(--ink-soft); }
.return-year[open] > summary::before { content: '▾ '; }
.dashboard-status-strip {
    display: flex; align-items: center; gap: 0; min-height: 70px; margin-top: 14px; padding: 13px 16px;
}
.dashboard-status-item { display: flex; flex-direction: column; gap: 4px; padding: 0 20px; border-right: 1px solid var(--line-soft); }
.dashboard-status-item:first-child { padding-left: 0; }
.dashboard-status-label { color: var(--ink-faint); font-size: 11px; }
.dashboard-status-item strong { font-size: 13px; }
.dashboard-status-item .status-good { color: var(--ok-ink); }
.dashboard-status-item .status-warn { color: var(--warn-ink); }
.dashboard-status-year { margin-left: 20px; }
.dashboard-settings-link { margin-left: auto; color: var(--ink-faint); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.dashboard-settings-link:hover { color: var(--brand-red); }
.dashboard-destinations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.dashboard-destination {
    display: flex; align-items: center; gap: 13px; min-height: 84px; padding: 17px 18px; color: inherit;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.dashboard-destination:hover { color: inherit; border-color: rgba(206,21,44,.25); box-shadow: 0 8px 20px rgba(26,26,26,.05); transform: translateY(-2px); }
.dashboard-destination-icon {
    width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 11px; background: var(--chrome-dark); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .04em; flex-shrink: 0;
}
.dashboard-destination-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dashboard-destination-copy strong { font-size: 14px; }
.dashboard-destination-copy span { color: var(--ink-faint); font-size: 12px; }
.dashboard-destination-arrow { margin-left: auto; color: var(--brand-red); font-size: 17px; }

.font-numeric { font-variant-numeric: tabular-nums; }

/* Dashboard — quick actions */
.dashboard-quick-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.dashboard-quick-action {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    color: var(--ink); font-size: 12px; font-weight: 600;
    transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.dashboard-quick-action span { color: var(--ink-faint); font-weight: 700; display: inline-flex; }
.dashboard-quick-action span svg { width: 15px; height: 15px; }
.dashboard-quick-action:hover { color: var(--brand-red); border-color: rgba(206,21,44,.3); box-shadow: 0 4px 12px rgba(26,26,26,.05); }
.dashboard-quick-action:hover span { color: var(--brand-red); }

/* Dashboard — module overview cards (Sales / Purchases / Banking) */
.dashboard-modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.dashboard-module {
    display: flex; flex-direction: column; min-height: 250px; padding: 17px 18px 15px; color: inherit;
    border-color: var(--line); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.dashboard-module:hover { color: inherit; transform: translateY(-2px); border-color: rgba(206,21,44,.22); box-shadow: 0 8px 22px rgba(26,26,26,.06); }
.dashboard-module-head { display: flex; align-items: center; gap: 8px; }
.dashboard-module-icon { display: inline-flex; color: var(--ink-soft); }
.dashboard-module-icon svg { width: 16px; height: 16px; }
.dashboard-module-head h3 { font-size: 13px; color: var(--ink-soft); }
.dashboard-module-arrow { margin-left: auto; display: inline-flex; color: var(--brand-red); }
.dashboard-module-arrow svg { width: 15px; height: 15px; }
.dashboard-module:hover .dashboard-module-icon { color: var(--brand-red); }
.dashboard-module-bars { flex: 1; display: flex; align-items: stretch; gap: 6px; margin: 16px 0 4px; }
.dashboard-module-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.dashboard-module-bar-slot { position: relative; width: 100%; height: 96px; display: flex; justify-content: center; align-items: flex-end; }
.dashboard-module-bar {
    display: block; width: 100%; max-width: 30px; min-height: 2px; border-radius: 3px 3px 0 0;
    background: var(--brand-red-wash); border-top: 3px solid var(--brand-red);
}
.dashboard-module-bars.signed .dashboard-module-bar-slot { align-items: center; }
.dashboard-module-bars.signed .dashboard-module-bar-slot::before {
    content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--line-strong);
}
.dashboard-module-bars.signed .dashboard-module-bar { position: absolute; left: 50%; transform: translateX(-50%); }
.dashboard-module-bars.signed .dashboard-module-bar.pos { bottom: 50%; }
.dashboard-module-bars.signed .dashboard-module-bar.neg {
    top: 50%; border-radius: 0 0 3px 3px; border-top: none;
    border-bottom: 3px solid var(--brand-slate); background: var(--surface-sunk);
}
.dashboard-module-bar-label { font-size: 10px; color: var(--ink-faint); }
.dashboard-module-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.dashboard-module-figure { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dashboard-module-figure span { font-size: 11px; }
.dashboard-module-figure strong { font-size: 14px; letter-spacing: -.02em; }
.dashboard-module-figure strong.is-alert { color: var(--danger-ink); }

/* Dashboard — recent activity + due lists */
.dashboard-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.dashboard-list { padding: 16px 18px; }
.dashboard-list-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.dashboard-list-head h3 { font-size: 13px; }
.dashboard-list-head a { font-size: 11.5px; font-weight: 600; }
.dashboard-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dashboard-activity li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.dashboard-activity li:last-child { border-bottom: none; }
.dashboard-activity li a { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; color: inherit; }
.dashboard-activity-title { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-activity-meta { font-size: 11px; }
.dashboard-activity li a:hover .dashboard-activity-title { color: var(--brand-red); }
.dashboard-activity-amount { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.dashboard-due { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dashboard-due li { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.dashboard-due li:last-child { border-bottom: none; }
.dashboard-due-icon {
    width: 22px; height: 22px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--surface-sunk); color: var(--ink-soft); font-size: 11px; font-weight: 800;
}
.dashboard-due li.is-alert .dashboard-due-icon { background: var(--danger-wash); color: var(--danger-ink); }
.dashboard-due-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dashboard-due-copy strong { font-size: 12.5px; }
.dashboard-due-copy span { font-size: 11px; }
.dashboard-due-link { font-size: 11.5px; font-weight: 700; white-space: nowrap; }

/* Bank & Cash account overview */
.bank-account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; align-items: stretch; }
.bank-account-card {
    display: flex; flex-direction: column; min-height: 248px; padding: 18px 19px 16px;
    border-color: var(--line); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.bank-account-card:hover { transform: translateY(-2px); border-color: rgba(206,21,44,.22); box-shadow: 0 8px 22px rgba(26,26,26,.06); }
.bank-account-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 43px; }
.bank-account-identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.bank-account-type-icon {
    width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    border-radius: 10px; background: var(--brand-red-wash); color: var(--brand-red); font-size: 15px; font-weight: 800;
}
.bank-account-name-wrap { min-width: 0; }
.bank-account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 750; }
.bank-account-meta { margin-top: 3px; color: var(--ink-faint); font-size: 11.5px; }
.bank-account-meta span { color: var(--line-strong); padding: 0 2px; }
.bank-status { flex-shrink: 0; max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-account-stats { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 16px; margin-top: 22px; padding: 13px 0 12px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.bank-account-stat { min-width: 0; }
.bank-account-stat + .bank-account-stat { padding-left: 16px; border-left: 1px solid var(--line-soft); }
.bank-account-stat .kpi-label { min-height: 27px; line-height: 1.25; }
.bank-account-value { margin-top: 5px; color: var(--ink); font-size: 20px; font-weight: 750; letter-spacing: -.025em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bank-account-note { min-height: 37px; padding-top: 11px; color: var(--ink-faint); font-size: 11.5px; line-height: 1.45; }
.bank-account-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 14px; }
.bank-account-actions .btn { min-height: 31px; }
.bank-account-actions .btn-primary { box-shadow: 0 3px 9px rgba(206,21,44,.13); }

@media (max-width: 900px) {
    .dashboard-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-figure:nth-child(2) { border-right: 0; }
    .dashboard-figure:nth-child(1), .dashboard-figure:nth-child(2) { border-bottom: 1px solid var(--line-soft); }
    .dashboard-status-strip { align-items: flex-start; flex-wrap: wrap; row-gap: 12px; }
    .dashboard-settings-link { margin-left: 0; width: 100%; }
    .dashboard-modules { grid-template-columns: 1fr; }
    .dashboard-lists { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .app-content { padding: 16px; }
    .app-topbar { padding: 0 12px; gap: 8px; }
    .business-switcher { min-width: 0; max-width: 235px; flex: 1; }
    .app-topbar > .faint { display: none; }
    .app-topbar-divider { display: none; }
    .dashboard-figures, .dashboard-destinations, .bank-account-grid { grid-template-columns: 1fr; }
    .dashboard-figure { border-right: 0; border-bottom: 1px solid var(--line-soft); }
    .dashboard-figure:last-child { border-bottom: 0; }
    .dashboard-quick-action { flex: 1; justify-content: center; }
    .dashboard-alert { align-items: flex-start; flex-wrap: wrap; }
    .dashboard-alert-link { margin-left: 35px; }
    .dashboard-status-item { padding: 0 12px; }
    .dashboard-status-item:first-child { padding-left: 0; }
    .bank-account-grid { gap: 12px; }
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: 12.5px; font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary, .btn-primary:visited { background: var(--brand-red); color: #fff; }
.btn-primary:hover:not(:disabled), .btn-primary:focus-visible { background: var(--brand-red-hover); color: #fff; }
.btn-ok, .btn-ok:visited { background: var(--ok); color: #fff; border-color: var(--ok); }
.btn-ok:hover:not(:disabled), .btn-ok:focus-visible { background: var(--ok-ink); border-color: var(--ok-ink); color: #fff; }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); font-weight: 600; }
.btn-ghost:hover:not(:disabled) { background: var(--surface-sunk); }
.btn-link { background: transparent; color: var(--ink-faint); border-color: transparent; font-weight: 600; padding: 6px 8px; }
.btn-link:hover:not(:disabled) { color: var(--ink); text-decoration: underline; }
.btn-sm { padding: 6px 11px; font-size: 12px; }

/* ── Cards, tables ─────────────────────────────────────────────────────────── */

.page-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; gap: 16px; }
.page-head h1 { font-size: 18px; }
.page-head .sub { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.head-actions { display: flex; gap: 8px; }

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.card:has(.search-select.open) {
    position: relative;
    z-index: 5;
    overflow: visible;
}

.grid-table { width: 100%; }
.grid-table .row {
    display: grid;
    align-items: center;
    column-gap: 10px;
    padding: 9px 14px;
    font-size: 12.5px;
    border-top: 1px solid var(--line-soft);
}
.grid-table .row > input,
.grid-table .row > select,
.grid-table .row > textarea,
.grid-table .row > div { min-width: 0; }
.grid-table .row.head {
    border-top: none;
    border-bottom: 1px solid var(--line);
    font-size: 11px; font-weight: 700;
    color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: .03em;
}
.grid-table .row.group {
    background: var(--surface-sunk);
    font-size: 11.5px; font-weight: 700; text-transform: uppercase;
    color: var(--ink); letter-spacing: .02em;
    border-top: 1px solid var(--line);
}
.grid-table .row.total {
    background: var(--surface-sunk);
    font-weight: 700;
    border-top: 1.5px solid var(--line-strong);
}
.grid-table .row.clickable { cursor: pointer; }
.grid-table .row.clickable:hover { background: var(--brand-red-wash); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.dash { color: #C8C8C6; }

/* Accessible data-register foundation, piloted on Invoices. */
.table-scroll { width: 100%; overflow-x: auto; }
.table-scroll:focus-visible { outline: 3px solid var(--brand-red-wash); outline-offset: 2px; }
.data-table { width: 100%; border-collapse: collapse; color: var(--ink); font-size: var(--type-table); line-height: var(--leading-data); }
.data-table th,
.data-table td { padding: 13px 14px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: middle; }
.data-table th {
    color: var(--ink-soft); font-size: var(--type-table-head); font-weight: 700;
    letter-spacing: .02em; text-transform: uppercase; background: var(--surface);
    border-bottom-color: var(--line); white-space: nowrap;
}
.data-table th.num,
.data-table td.num { text-align: right; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--brand-red-wash); }
.data-table a { font-weight: 600; }
.data-table .document-ref { white-space: nowrap; }
.data-table .table-actions { display: flex; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.data-table .empty-cell { padding: 24px; color: var(--ink-soft); text-align: center; }

/* ── Row selection + per-row overflow menu (list screens) ──────────────────── */
.select-col { text-align: center; }
.data-table .select-col { width: 40px; padding-left: 14px; padding-right: 0; }
.grid-table .select-col { display: flex; align-items: center; justify-content: center; }
.select-col input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; vertical-align: middle; margin: 0; }
.data-table tr.is-selected,
.grid-table .row.is-selected { background: var(--brand-red-wash); }
/* Show the ⋯ trigger on row hover / focus / when its menu is open; always on touch. */
.row-actions .row-actions-trigger { opacity: 0; transition: opacity .12s; }
.data-table tr:hover .row-actions-trigger,
.data-table tr:focus-within .row-actions-trigger,
.grid-table .row:hover .row-actions-trigger,
.grid-table .row:focus-within .row-actions-trigger,
.row-actions[open] .row-actions-trigger { opacity: 1; }
@media (hover: none) { .row-actions .row-actions-trigger { opacity: 1; } }
.grid-table .row .table-actions { display: flex; justify-content: flex-end; }

.row-actions { position: relative; display: inline-flex; }
.row-actions > summary { list-style: none; cursor: pointer; }
.row-actions > summary::-webkit-details-marker { display: none; }
.row-actions-trigger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 7px; font-size: 16px; line-height: 1;
    color: var(--ink-soft); border: 1px solid transparent;
}
.row-actions-trigger:hover, .row-actions[open] .row-actions-trigger {
    background: var(--surface-sunk); border-color: var(--line); color: var(--ink);
}
.row-actions-panel {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 40;
    min-width: 176px; padding: 4px; background: var(--surface); border: 1px solid var(--line);
    border-radius: 9px; box-shadow: 0 10px 30px rgba(0,0,0,.14); display: grid; gap: 1px;
}
.row-actions.up .row-actions-panel { top: auto; bottom: calc(100% + 4px); }
.row-actions-panel a, .row-actions-panel button {
    display: block; box-sizing: border-box; width: 100%; text-align: left;
    padding: 8px 10px; border: 0; background: transparent; color: var(--ink);
    font: inherit; font-size: 13px; text-decoration: none; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.row-actions-panel a:hover, .row-actions-panel button:hover:not(:disabled) { background: var(--surface-sunk); }
.row-actions-panel button:disabled { opacity: .4; cursor: default; }
.row-actions-panel .danger { color: var(--brand-red); }
.row-actions-panel hr { border: 0; border-top: 1px solid var(--line-soft); margin: 3px 0; }

/* Bulk-action bar: sits in the top-right of the list's controls row (the empty space
   beside the quick-view tabs / filters), so selecting rows never reflows the table.
   Light raised surface with a brand accent — a deliberate product control. */
.list-controls { position: relative; }
.list-selection-bar {
    position: absolute; top: 0; right: 0; z-index: 4;
    display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
    max-width: calc(100% - 2px);
    padding: 7px 10px 7px 14px; border-radius: 9px;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line); border-left: 3px solid var(--brand-red);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
    animation: list-selection-in 100ms ease-out;
}
/* While a selection is active, hide the toolbar's trailing bits (result count, the
   More/Clear-filters buttons) it sits on top of — the search box and filters stay usable. */
.list-controls:has(> .list-selection-bar) .list-toolbar-count,
.list-controls:has(> .list-selection-bar) .list-toolbar-row > .btn { visibility: hidden; }
@keyframes list-selection-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.list-selection-count { font-weight: 700; font-size: 13px; white-space: nowrap; }
.list-selection-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.list-selection-actions .btn:disabled { opacity: .45; }
.list-selection-clear {
    margin-left: 2px; border: 0; background: transparent; color: var(--ink-soft);
    font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: underline; white-space: nowrap;
}
.list-selection-clear:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
    .list-selection-bar { animation: none; }
}
/* Narrow: the controls row wraps and there's no spare width — drop the bar into flow. */
@media (max-width: 760px) {
    .list-selection-bar {
        position: static; max-width: none; margin-bottom: 12px; animation: none;
    }
}

.bulk-email-list { border: 1px solid var(--line); border-radius: 8px; max-height: 320px; overflow-y: auto; }
.bulk-email-row {
    display: grid; grid-template-columns: 120px 1fr 1.2fr; gap: 10px; align-items: baseline;
    padding: 8px 12px; font-size: 12.5px; border-top: 1px solid var(--line-soft);
}
.bulk-email-row:first-child { border-top: 0; }
.bulk-email-row .bulk-email-doc { font-weight: 600; font-variant-numeric: tabular-nums; }
.bulk-email-row .bulk-email-addr { color: var(--ink-soft); overflow-wrap: anywhere; }
.bulk-email-row.is-skip { opacity: .55; }
.bulk-email-row.is-skip .bulk-email-addr { color: var(--brand-red); }
.invoice-table { min-width: 1040px; }
.invoice-table .actions-col { min-width: 56px; }
.bill-table { min-width: 1080px; }
.bill-table .actions-col { width: 82px; }
.invoice-page-head { align-items: center; margin-bottom: 20px; }
.invoice-page-head h1 { font-size: var(--type-page-title); line-height: 1.2; letter-spacing: -.025em; }
.invoice-heading-copy { min-width: 0; }
.page-kicker { display: inline-block; margin-bottom: 5px; font-size: 12px; font-weight: 650; }
.invoice-heading-meta { display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; margin-top: 7px; color: var(--ink-soft); font-size: var(--type-helper); line-height: 1.45; }
.invoice-heading-meta > span:not(:first-child) { position: relative; }
.invoice-heading-meta > span:not(:first-child)::before { position: absolute; left: -10px; color: var(--line-strong); content: "•"; }
.invoice-party { color: var(--ink); font-weight: 600; }
.invoice-alert { margin: 0 0 16px; padding-block: 12px; line-height: 1.45; }
.invoice-summary-card, .record-summary-card { padding: 0; margin-bottom: 16px; overflow: hidden; }
.invoice-summary-grid, .record-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); margin: 0; }
.invoice-summary-item, .record-summary-item { min-width: 0; padding: 16px 20px; border-right: 1px solid var(--line-soft); }
.invoice-summary-item:last-child, .record-summary-item:last-child { border-right: 0; }
.invoice-summary-item dt, .record-summary-item dt { margin: 0 0 5px; color: var(--ink-soft); font-size: 11px; font-weight: 700; letter-spacing: .04em; line-height: 1.3; text-transform: uppercase; }
.invoice-summary-item dd, .record-summary-item dd { min-height: 22px; margin: 0; color: var(--ink); font-size: 15px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.invoice-summary-item dd.num, .record-summary-item dd.num { text-align: left; }
.invoice-summary-emphasis dd, .record-summary-emphasis dd { font-size: 17px; }
.invoice-summary-notes, .record-summary-notes { padding: 12px 20px; border-top: 1px solid var(--line-soft); color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.invoice-audit-meta, .record-audit-meta { padding: 12px 20px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 12px; font-weight: 600; letter-spacing: .01em; line-height: 1.5; }
.invoice-section-title { font-size: var(--type-section-title); }
.field-error { color: var(--danger-ink); font-size: var(--type-helper); line-height: 1.35; }
.quick-views { display: flex; align-items: center; gap: 4px; margin: -2px 0 12px; flex-wrap: wrap; }
.link-button { padding: 0; border: 0; background: none; color: var(--brand-red); font: inherit; font-weight: 650; cursor: pointer; }
.link-button:hover { color: var(--brand-red-hover); text-decoration: underline; }
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Pills / filters ───────────────────────────────────────────────────────── */

.filters { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.pill {
    padding: 5px 11px; border-radius: 20px;
    font-size: 12px; font-weight: 600;
    color: var(--ink-soft); cursor: pointer;
    border: none; background: transparent;
}
.pill:hover { color: var(--ink); }
.pill.active { background: var(--chrome-dark); color: #fff; }
.pill.active.accent { background: var(--brand-red-wash); color: var(--brand-red); }

.search-input {
    flex: 1; max-width: 260px;
    height: var(--control-height); padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 12.5px; font: inherit; font-size: 12.5px;
    background: var(--surface);
}

/* Older report and payroll filter rows share the same field geometry while they
   transition to ListToolbar. Pills remain compact because they represent views. */
.filters > select.field-input,
.filters > input.field-input,
.filters > .search-input,
.filters > .btn,
.filters > .field > select.field-input,
.filters > .field > input.field-input { height: var(--control-height); }

/* ── Form fields ───────────────────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
    font-size: 11.5px; font-weight: 700; color: var(--ink-soft);
    text-transform: uppercase; letter-spacing: .03em;
}
.field-label .req { color: var(--danger-ink); margin-left: 1px; }
.field input.invalid, .field select.invalid, .field-input.invalid {
    border-color: var(--danger-ink);
    outline: 2px solid var(--danger-wash);
}
.field-input, .field select, .field input, .field textarea {
    padding: 9px 11px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    font: inherit; font-size: 13px;
    background: var(--surface);
    color: var(--ink);
    width: 100%;
}
.field-input:focus, .field select:focus, .field input:focus, .field textarea:focus {
    outline: 2px solid var(--brand-red-wash);
    border-color: var(--brand-red);
}
.field-row { display: flex; align-items: flex-start; gap: 12px; }
.field-row > .field { flex: 1; min-width: 160px; }
.field textarea { min-height: 86px; resize: vertical; line-height: 1.45; }

/* Checkbox + label sitting on one baseline. Also used inside a .field-row, where it
   aligns to the bottom of the taller label+input siblings. */
.check-field {
    display: flex; flex-direction: row; align-items: center; gap: 8px;
    align-self: flex-end; min-height: 38px; padding-bottom: 3px; cursor: pointer;
}
.check-field input[type="checkbox"] {
    width: 16px; height: 16px; min-width: 16px; margin: 0; padding: 0;
    border: 1px solid var(--line-strong); border-radius: 3px;
    flex: 0 0 auto; accent-color: var(--brand-red); cursor: pointer;
}
.check-field > span {
    font-size: 13px; font-weight: 500; line-height: 1.3;
    text-transform: none; letter-spacing: 0; color: var(--ink);
}
.row-inline > input[type="checkbox"],
.row-inline > input[type="radio"] {
    flex: 0 0 auto; margin: 0; accent-color: var(--brand-red);
}
.grid-table .row input[type="checkbox"] { margin: 0; vertical-align: middle; }

.hint {
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 11px 14px;
    font-size: 11.5px; color: var(--ink-soft); line-height: 1.5;
    display: flex; gap: 9px;
}

/* Toggle */
.toggle { width: 36px; height: 20px; border-radius: 10px; background: var(--line-strong); position: relative; border: none; cursor: pointer; padding: 0; }
.toggle.on { background: var(--brand-red); }
.toggle .knob { width: 16px; height: 16px; border-radius: 50%; background: #fff; position: absolute; top: 2px; left: 2px; transition: left .12s; }
.toggle.on .knob { left: 18px; }

/* ── Badges / callouts ─────────────────────────────────────────────────────── */

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.badge.ok, .badge.approved { background: var(--ok-wash); color: var(--ok-ink); }
.badge.neutral { background: var(--surface-sunk); color: var(--ink-soft); border: 1px solid var(--line); }
.badge.warn, .badge.submitted { background: var(--warn-wash); color: var(--warn-ink); border: 1px solid var(--warn-line); }
.badge.danger, .badge.rejected { background: var(--danger-wash); color: var(--danger-ink); border: 1px solid rgba(206,21,44,.22); }
.badge.info { background: rgba(89,100,117,.10); color: var(--brand-slate); border: 1px solid rgba(89,100,117,.22); }

.callout { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--radius); font-size: 12.5px; font-weight: 600; margin: 12px 0; }
.callout.ok { background: var(--ok-wash); border: 1px solid rgba(26,138,90,.25); color: var(--ok-ink); }
.callout.warn { background: #FFF6E6; border: 1px solid #F0DCA8; color: var(--warn-ink); }
.callout.info { background: var(--surface-sunk); border: 1px solid var(--line); color: var(--ink-soft); font-weight: 500; }

.note { font-size: 11.5px; color: var(--ink-faint); margin-top: 8px; }

/* ── General journal editor ───────────────────────────────────────────────── */

.gj-page-head { margin-bottom: 12px; }
.gj-meta-card {
    display: grid;
    grid-template-columns: 170px minmax(320px, 1fr) 170px;
    gap: 14px;
    align-items: end;
    padding: 13px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}
.gj-reference {
    min-height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}
.gj-reference strong { margin-top: 3px; font-size: 13px; }
.gj-reference > span:last-child { margin-top: 1px; color: var(--ink-faint); font-size: 10.5px; }
.gj-lines-card { overflow: visible; }
.gj-lines .row { column-gap: 8px; padding: 7px 12px; }
.gj-lines .row.head { padding-block: 8px; }
.gj-lines .field-input { padding: 7px 8px; }
.gj-line { position: relative; }
.gj-account-picker { position: relative; min-width: 0; }
.gj-account-menu {
    position: absolute;
    z-index: 25;
    top: calc(100% + 4px);
    left: 0;
    width: max(100%, 330px);
    max-height: 260px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-drawer);
}
.gj-account-menu button {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    padding: 8px 9px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
}
.gj-account-menu button:hover,
.gj-account-menu button:focus { outline: none; background: var(--brand-red-wash); }
.gj-account-menu button span { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.gj-account-menu button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gj-account-empty { padding: 10px; color: var(--ink-faint); font-size: 12px; }
.gj-line-actions { display: flex; justify-content: flex-end; gap: 7px; }
.gj-line-actions .icon-btn { padding: 5px; border-radius: var(--radius-sm); }
.gj-line-actions .icon-btn:hover:not(:disabled) { background: var(--surface-sunk); }
.gj-line-actions .icon-btn:disabled { opacity: .35; cursor: not-allowed; }
.gj-table-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 5px 12px;
    border-top: 1px solid var(--line-soft);
}
.gj-add-line { color: var(--brand-red); }
.gj-totals > div:nth-child(2) { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gj-balance-state { color: var(--warn-ink); font-size: 11px; font-weight: 600; }
.gj-balance-state.balanced { color: var(--ok-ink); }
.gj-period-note { margin-top: 7px; color: var(--ink-faint); font-size: 11px; }
.gj-footer-spacer { height: 72px; }
.gj-action-bar {
    position: fixed;
    z-index: 20;
    left: 232px;
    right: 0;
    bottom: 0;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 24px;
    border-top: 1px solid var(--line);
    background: var(--surface);
    transition: left .16s ease;
}
.gj-action-summary { flex: 1; color: var(--ink-faint); font-size: 12px; }
.gj-footer-balanced { color: var(--ok-ink); font-weight: 700; }
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 900px) {
    .gj-meta-card { grid-template-columns: 150px minmax(250px, 1fr); }
    .gj-reference { grid-column: 1 / -1; align-items: flex-start; }
    .gj-lines-card { overflow-x: auto; }
    .gj-lines { min-width: 850px; }
}

@media (max-width: 680px) {
    .field-row { flex-direction: column; }
    .field-row > .field { width: 100%; max-width: none !important; }
    .gj-meta-card { grid-template-columns: 1fr; }
    .gj-reference { grid-column: auto; }
    .gj-action-bar,
    .app-nav + .app-main .gj-action-bar { left: 0; padding-inline: 14px; }
    .gj-action-summary { display: none; }
}

/* ── Slide-over drawer ─────────────────────────────────────────────────────── */

.drawer-scrim {
    position: fixed; inset: 0;
    background: rgba(20, 24, 29, 0.35);
    display: flex; justify-content: flex-end;
    z-index: 40;
}
.drawer {
    width: 440px; max-width: 92vw; height: 100%;
    background: var(--surface);
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-drawer);
}
.drawer-head { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; }
.drawer-head .eyebrow { font-size: 11px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .03em; }
.drawer-head h2 { font-size: 17px; margin-top: 3px; }
.drawer-body { flex: 1; overflow: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; }
.drawer-foot { padding: 16px 22px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; }
.icon-btn { border: none; background: transparent; cursor: pointer; color: var(--ink-faint); padding: 2px; line-height: 0; }
.icon-btn:hover { color: var(--ink); }

/* The shared "centred workspace" modal for editing a record (an item, a fixed asset, …) —
   a proper centred dialog with a card-sectioned two-column body, not a narrow slide-over.
   `.item-modal-*` is the original name kept for the Items editor; `.record-modal-*` is the
   same pattern for every other record editor. */
.item-modal-scrim, .record-modal-scrim {
    position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px;
    background: rgba(20, 24, 29, 0.42); backdrop-filter: blur(2px);
}
.item-modal, .record-modal {
    width: min(980px, calc(100vw - 48px)); max-height: calc(100vh - 48px); overflow: hidden;
    display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px;
    background: var(--surface); box-shadow: 0 24px 70px rgba(16, 20, 24, .28);
}
.item-modal-head, .record-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.item-modal-head .eyebrow, .record-modal-head .eyebrow { font-size: 11px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
.item-modal-head h2, .record-modal-head h2 { margin: 3px 0 0; font-size: 18px; }
.item-modal-body, .record-modal-body { flex: 1; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding: 18px 22px; background: var(--surface-sunk); }
.item-form-section, .record-form-section { display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); min-width: 0; }
.item-details-section, .record-section-wide { grid-column: 1 / -1; }
/* The section cards sit in a ~440px column — too narrow for a 3-field row, which
   otherwise spills over the card edge into its neighbour. Let the fields wrap and
   keep them inside the card. */
.item-form-section .field-row, .record-form-section .field-row { flex-wrap: wrap; }
.item-form-section .field-row > .field, .record-form-section .field-row > .field { min-width: 130px; }
.item-form-section .section-title, .record-form-section .section-title { margin: 0; padding: 0 0 10px; border-top: 0; border-bottom: 1px solid var(--line-soft); }
.item-modal-foot, .record-modal-foot { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--line); background: var(--surface); }
.item-modal-foot > div, .record-modal-foot > div { flex: 1; }
.record-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.item-adjustment-card { padding: 18px; margin-bottom: 16px; overflow: visible; }
.item-adjustment-card .section-title { margin: 0 0 14px; padding: 0 0 10px; border-top: 0; border-bottom: 1px solid var(--line-soft); }
.item-adjustment-date, .item-adjustment-number { max-width: 170px; }
.item-adjustment-opening { gap: 7px; margin-top: 8px; font-size: 12.5px; }
.inline-record-link { margin-left: 8px; white-space: nowrap; }
.stocktake-date { display: flex; align-items: center; gap: 8px; }
.stocktake-date .field-label { margin: 0; white-space: nowrap; }
.stocktake-date .field-input { width: 170px; }
.stocktake-count .field-input { width: 110px; margin-left: auto; }
.contact-list-toolbar .contact-filter { width: 160px; }
.contact-editor { max-width: 920px; }
.contact-form-stack { display: grid; gap: 14px; }
.contact-form-section { padding: 20px; overflow: visible; }
.contact-section-heading { padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.contact-section-heading p { margin: 3px 0 0; color: var(--ink-faint); font-size: 12.5px; line-height: 1.45; }
.contact-active-toggle { align-self: end; min-width: 150px; min-height: 38px; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-sunk); }
@media (max-width: 760px) {
    .contact-list-toolbar .contact-filter { width: 100%; }
    .contact-form-section { padding: 16px; }
}
@media (max-width: 760px) {
    .item-modal-scrim, .record-modal-scrim { padding: 10px; place-items: end center; }
    .item-modal, .record-modal { width: 100%; max-height: calc(100vh - 20px); border-radius: 12px 12px 0 0; }
    .item-modal-body, .record-modal-body { grid-template-columns: 1fr; padding: 14px; }
    .item-details-section, .record-section-wide { grid-column: auto; }
}

/* ── Wizard ────────────────────────────────────────────────────────────────── */

.wizard { display: flex; flex-direction: column; height: 100%; background: var(--surface-sunk); }
.wizard-bar { height: 56px; flex-shrink: 0; background: var(--chrome-dark); display: flex; align-items: center; padding: 0 28px; gap: 10px; }
.wizard-bar .brand-mark { width: 26px; height: 26px; border-radius: 6px; font-size: 11px; margin: 0; }
.wizard-bar .title { color: #fff; font-size: 13px; font-weight: 700; }
.wizard-bar .biz { color: var(--chrome-dark-muted); font-size: 12px; }

.steps { display: flex; align-items: center; justify-content: center; padding: 22px 0 8px; }
.steps .step { display: flex; align-items: center; gap: 8px; }
.steps .dot {
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--ink-faint);
}
.steps .step.current .dot { background: var(--brand-red); border-color: var(--brand-red); color: #fff; }
.steps .step.done .dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.steps .step .label { font-size: 12.5px; font-weight: 600; color: var(--ink-faint); }
.steps .step.current .label { color: var(--ink); font-weight: 700; }
.steps .connector { width: 56px; height: 1px; background: var(--line-strong); margin: 0 10px; }

.wizard-body { flex: 1; overflow: auto; padding: 14px 40px; }
.wizard-body.center { display: flex; align-items: center; justify-content: center; }
.wizard-card { width: 460px; max-width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 34px 38px; }
.wizard-foot { height: 64px; flex-shrink: 0; border-top: 1px solid var(--line); background: var(--surface); display: flex; align-items: center; justify-content: space-between; padding: 0 28px; }

.import-row { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }

/* ── Misc ──────────────────────────────────────────────────────────────────── */

.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.seg button { border: none; background: var(--surface); padding: 7px 12px; font-size: 12px; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.seg button.active { background: var(--chrome-dark); color: #fff; font-weight: 700; }
.seg button:disabled { cursor: not-allowed; opacity: .6; }

.stack { display: flex; flex-direction: column; gap: 4px; }
.row-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

#blazor-error-ui {
    background: #FFF6E6; border-top: 1px solid #F0DCA8;
    bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.06);
    display: none; left: 0; padding: 0.9rem 1.4rem; position: fixed;
    width: 100%; z-index: 1000; font-size: 13px;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: 0.7rem; }

.blazor-error-boundary {
    background: var(--brand-red); padding: 1rem; color: #fff; border-radius: var(--radius);
}

/* ── Payment run stepper (Purchases → Payment runs) ─────────────────────────── */
.step-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    font-size: 12px; font-weight: 700;
    background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-soft);
}
.step-badge.current { background: var(--brand-red); border-color: var(--brand-red); color: #fff; }
.step-badge.done { background: var(--chrome-dark); border-color: var(--chrome-dark); color: #fff; }
.audit { font-size: 11px; font-style: italic; }

/* ── KPI tiles (dashboard) ─────────────────────────────────────────────────── */
.kpi-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
.kpi-value { font-size: 22px; font-weight: 700; margin-top: 6px; }
.kpi-sub { font-size: 11.5px; margin-top: 4px; display: block; }

/* ── Payment-run: cancelled state ──────────────────────────────────────────── */
.badge.muted { background: var(--surface-sunk); color: var(--ink-faint); border: 1px solid var(--line); text-decoration: line-through; }
.grid-table .row.cancelled { opacity: .6; }

/* ── Record detail pages (Receipts / Payments / Transfers / Bills / Invoices) ─ */
.audit-strip .faint { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
/* Themed quote / invoice preview embedded on the detail page. */
.doc-preview { display: block; width: 100%; height: 820px; border: 0; background: #fff; }
/* Document-theme editor: form beside a live preview. */
.theme-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .theme-editor { grid-template-columns: 1fr; } }
.theme-manager { padding: 16px 20px; margin-bottom: 16px; }
.theme-manager-main { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.theme-manager-select { flex: 1 1 260px; max-width: 360px; }
.theme-manager-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.control-button { min-height: var(--control-height); padding-block: 0; }
.theme-assignments {
    display: grid; grid-template-columns: 82px minmax(0, auto) minmax(180px, 1fr);
    align-items: center; gap: 10px 16px; margin-top: 14px; padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}
.theme-assignment-options { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; }
.theme-assignment-options .check-field { min-height: 24px; padding: 0; }
.theme-assignment-note { color: var(--ink-faint); font-size: 11.5px; line-height: 1.4; }
/* Theme-editor option checkboxes — a tight vertical list, checkbox and label on one line. */
.theme-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.theme-opts label {
    display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
    font-size: 12.5px; font-weight: 500; color: var(--ink); cursor: pointer; line-height: 1.3;
}
.theme-opts input[type="checkbox"] {
    width: 15px; height: 15px; min-width: 15px; margin: 0; flex: 0 0 auto;
    accent-color: var(--brand-red); cursor: pointer;
}
/* Logo thumbnail well on the Business details page. */
.logo-well { width: 120px; height: 72px; border: 1px dashed var(--line-strong); border-radius: 8px;
    display: flex; align-items: center; justify-content: center; background: var(--surface-sunk); overflow: hidden; flex: none; }
.logo-well img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Type-to-filter combobox (SearchSelect). */
.search-select { position: relative; }
.search-select .ss-input { width: 100%; padding-right: 24px; }
.search-select.disabled .ss-caret { opacity: .45; }
/* Closed state renders the chip via the placeholder — show it at full strength. */
.search-select .ss-input::placeholder { color: var(--ink); opacity: 1; }
.search-select.open .ss-input::placeholder { color: var(--ink-faint); }
.search-select .ss-input.ss-empty-val::placeholder { color: var(--ink-faint); font-style: italic; }
.search-select .ss-caret { position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
    font-size: 10px; color: var(--ink-faint); pointer-events: none; }
.search-select .ss-pop { position: absolute; z-index: 40; top: calc(100% + 3px); left: 0;
    min-width: max(100%, 240px); max-width: 360px; max-height: 260px; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 4px; }
.search-select .ss-opt { padding: 7px 9px; border-radius: 5px; cursor: pointer; font-size: 12.5px;
    display: flex; flex-direction: column; gap: 1px; white-space: normal; }
.search-select .ss-opt:hover, .search-select .ss-opt.active { background: var(--surface-sunk); }
.search-select .ss-opt.sel { color: var(--brand-red); font-weight: 600; }
.search-select .ss-opt.ss-clear { color: var(--ink-faint); font-style: italic; }
.search-select .ss-sub { color: var(--ink-faint); font-size: 11px; }
.search-select .ss-empty { padding: 8px 9px; color: var(--ink-faint); font-size: 12px; }

/* Application-owned menu for short, fixed-choice <select> controls. The native
   element remains the form control and no-JS fallback; only its popup is replaced. */
select.app-select-open {
    border-color: var(--brand-red) !important;
    box-shadow: 0 0 0 3px var(--focus-ring) !important;
}
.app-select-pop {
    position: fixed;
    z-index: 1200;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(16, 20, 24, .17), 0 2px 7px rgba(16, 20, 24, .08);
}
.app-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 34px;
    padding: 7px 9px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 12.5px;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}
.app-select-option:hover,
.app-select-option.active { background: var(--surface-sunk); }
.app-select-option.selected { color: var(--brand-red); font-weight: 650; }
.app-select-option:disabled { color: var(--ink-faint); cursor: not-allowed; opacity: .55; }
.app-select-option:focus { outline: none; }
.app-select-option-label { min-width: 0; overflow-wrap: anywhere; }
.app-select-check { flex: 0 0 auto; color: var(--brand-red); font-weight: 800; }
.app-select-group {
    padding: 8px 9px 4px;
    color: var(--ink-faint);
    font-size: 10.5px;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Expiry row on the quote form — checkbox + "valid for N days" on one line. */
.expiry-row { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.expiry-row input[type="checkbox"] { width: 16px; height: 16px; min-width: 16px; margin: 0; flex: 0 0 auto; accent-color: var(--brand-red); }
.expiry-row input[type="number"] { width: 64px; flex: 0 0 auto; text-align: center; }
.expiry-row .faint { white-space: nowrap; }

/* Reusable line-item editor (SalesLinesEditor) — quotes & invoices. */
.lines-editor-grid { border: 1px solid var(--line); border-radius: 8px; }
.lines-editor .ler { display: grid; grid-template-columns: 34px minmax(180px,1.25fr) minmax(180px,1fr) 76px 104px 88px 96px 40px;
    gap: 8px; align-items: start; padding: 7px 10px; }
.lines-editor.with-items .ler:not(.dims) {
    grid-template-columns: 30px minmax(140px,.9fr) minmax(150px,1.05fr) minmax(140px,.95fr) 64px 90px 78px 86px 34px; }
/* Business not registered for VAT — the VAT column is dropped from the header and every row. */
.lines-editor.no-vat .ler:not(.dims) {
    grid-template-columns: 34px minmax(180px,1.25fr) minmax(180px,1fr) 76px 104px 96px 40px; }
.lines-editor.no-vat.with-items .ler:not(.dims) {
    grid-template-columns: 30px minmax(140px,.9fr) minmax(150px,1.05fr) minmax(140px,.95fr) 64px 90px 86px 34px; }
/* Keep plain-text cells (row #, line total) level with the first line of the inputs beside them. */
.lines-editor .ler:not(.head):not(.dims) > .num { padding-top: 7px; }
.lines-editor.with-items .ler.dims { grid-template-columns: 30px 1fr; }
.lines-editor .ler.head { background: var(--surface-sunk); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
    font-weight: 700; color: var(--ink-soft); padding-top: 9px; padding-bottom: 9px; border-radius: 7px 7px 0 0; }
.lines-editor .ler:not(.head):not(.dims) { border-top: 1px solid var(--line); }
.lines-editor .ler.dims { display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 0 10px 8px; }
.lines-editor .ler .field-input { padding: 6px 8px; font-size: 12.5px; }
.lines-editor .ler:not(.head):not(.dims) input.field-input,
.lines-editor .ler:not(.head):not(.dims) select.field-input,
.lines-editor .ler:not(.head):not(.dims) .search-select .ss-input,
.lines-editor .ler:not(.head):not(.dims) .line-control-static {
    min-height: var(--control-height); height: var(--control-height); padding-top: 0; padding-bottom: 0;
}
.lines-editor .ler:not(.head):not(.dims) .line-control-static { display: flex; align-items: center; }
.lines-editor .ler:not(.head):not(.dims) textarea.field-input {
    min-height: var(--control-height); padding-top: 9px; padding-bottom: 9px;
}
.lines-editor .ler .num { text-align: right; }
/* Multi-line description: starts one row tall, grows to fit as the user types (Enter = new line). */
textarea.autogrow { resize: none; overflow: hidden; min-height: calc(1.4em + 14px); line-height: 1.4;
    white-space: pre-wrap; font: inherit; field-sizing: content; }
/* While empty, size to the single `rows` line — otherwise `field-sizing: content` grows the
   box to fit a wrapped placeholder in a narrow column. Content restores content-sizing. */
textarea.autogrow:placeholder-shown { field-sizing: fixed; }
.line-del { border: 1px solid transparent; background: transparent; cursor: pointer; font-size: 14px; line-height: 1;
    padding: 5px 7px; border-radius: 6px; opacity: .55; }
.line-del:hover:not(:disabled) { opacity: 1; background: var(--danger-wash); }
.line-del:disabled { opacity: .2; cursor: default; }
.lines-editor-actions { display: flex; align-items: center; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.lines-editor-actions .add-line { border-style: dashed; }
.lines-editor-actions .from-item { display: flex; align-items: center; gap: 8px; }
.lines-editor-actions .from-item select { max-width: 220px; }
.card > .section-title:first-child { padding-top: 0; border-top: none; margin-top: 0; margin-bottom: 12px; }
/* Totals summary under a line-item editor. */
.doc-totals { margin: 16px 0 0; margin-left: auto; width: 280px; display: grid; gap: 6px; }
.doc-totals > div { display: flex; justify-content: space-between; align-items: baseline; }
.doc-totals .num { font-variant-numeric: tabular-nums; }
.doc-totals .grand { border-top: 2px solid var(--brand-red); padding-top: 8px; font-weight: 800; font-size: 14px; }
@media (max-width: 900px) {
    .lines-editor .ler { grid-template-columns: 1fr 1fr; grid-auto-rows: min-content; }
    .lines-editor .ler.head { display: none; }
    .lines-editor .ler:not(.head) > div:first-child { display: none; }
}
.dim-tag {
    font-size: 10.5px; border: 1px solid var(--line-strong); border-radius: 4px;
    padding: 0 4px; margin-left: 6px; color: var(--ink-soft); white-space: nowrap;
}
.tax-tag {
    font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
    border: 1px solid var(--line-strong); border-radius: 4px;
    padding: 0 4px; margin-left: 6px; color: var(--ink-soft); white-space: nowrap;
}

/* ── Worksheet layout with a left step rail (Payment runs; reused by Payroll) ─ */
.worksheet { display: grid; grid-template-columns: 210px 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .worksheet { grid-template-columns: 1fr; } }

.step-rail { display: flex; flex-direction: column; gap: 2px; }
.step-rail-node {
    display: flex; align-items: center; gap: 10px; text-align: left;
    padding: 10px 12px; border: none; background: transparent; cursor: pointer;
    border-radius: var(--radius-sm); font-size: 12.5px; color: var(--ink-soft); width: 100%;
    position: relative;
}
.step-rail-node + .step-rail-node::before {
    content: ""; position: absolute; left: 23px; top: -2px; height: 12px; width: 2px;
    background: var(--line-strong);
}
.step-rail-node:hover { background: var(--surface-sunk); }
.step-rail-node.active { background: var(--brand-red-wash); color: var(--ink); font-weight: 700; }
.step-rail-badge {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700;
    background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-soft);
}
.step-rail-node.current .step-rail-badge { background: var(--brand-red); border-color: var(--brand-red); color: #fff; }
.step-rail-node.done .step-rail-badge { background: var(--chrome-dark); border-color: var(--chrome-dark); color: #fff; }
.step-rail-node.blocked .step-rail-badge { background: var(--brand-red); border-color: var(--brand-red); color: #fff; }
.step-rail-label { line-height: 1.25; }

.worksheet-exceptions {
    margin-top: 10px; width: 100%; text-align: left; cursor: pointer;
    border: 1px solid #F0DCA8; background: #FFF6E6; color: var(--warn-ink);
    border-radius: var(--radius-sm); padding: 8px 10px; font-size: 11.5px; font-weight: 700;
}
.worksheet-main { display: flex; flex-direction: column; gap: 14px; }
.worksheet-summary {
    padding: 14px 20px;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); gap: 12px 24px;
}
.ws-metric { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ws-metric-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--ink-faint);
}
.ws-metric-value {
    font-size: 15px; font-weight: 600; line-height: 1.3;
    font-variant-numeric: tabular-nums; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.ws-metric-value .badge { font-variant-numeric: normal; vertical-align: 1px; }
.worksheet-panel { padding: 20px; }
.worksheet-notes { margin: 10px 0 0; font-size: 11.5px; color: var(--ink-soft); white-space: pre-wrap; font-family: inherit; }
.worksheet-problems { margin: 4px 0 0; padding-left: 18px; font-size: 12px; color: var(--warn-ink); }
.worksheet-problems li { margin: 2px 0; }

/* ── Payroll processing worksheet ─────────────────────────────────────────── */
.worksheet-progress {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: var(--ink-faint); margin-bottom: 8px; padding-left: 12px;
}
.wf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; }
.wf-kpi { padding: 14px 16px; display: flex; flex-direction: column; }
.worksheet .grid-table .row .field-input { padding: 5px 7px; font-size: 12px; }
.worksheet .grid-table .row input.num { text-align: right; }

@media (max-width: 900px) {
    .worksheet-progress { padding-left: 0; }
    .worksheet .grid-table { overflow-x: auto; }
}

/* ── Leave entitlement rule cards ─────────────────────────────────────────── */
.rule-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; }
.rule-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; border-top: 3px solid var(--line-strong); }
.rule-card.leave-annual { border-top-color: #2563EB; }
.rule-card.leave-sick { border-top-color: #D97706; }
.rule-card.leave-other { border-top-color: var(--brand-slate); }
.rule-card h3 { font-size: 14px; }
.rule-type { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; }
.rule-card.leave-annual .rule-type { color: #2563EB; }
.rule-card.leave-sick .rule-type { color: #B45309; }
.rule-card.leave-other .rule-type { color: var(--brand-slate); }
.rule-entitlement { font-size: 26px; font-weight: 700; line-height: 1.1; }
.rule-entitlement small { font-size: 12px; font-weight: 600; color: var(--ink-faint); margin-left: 5px; }
.rule-facts { display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.rule-fact { display: flex; justify-content: space-between; gap: 10px; }
.rule-fact .yes { color: var(--ok-ink); font-weight: 700; }
.rule-fact .no { color: var(--ink-faint); font-weight: 700; }
.rule-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; }

/* ── Modal (tabbed dialogs) ───────────────────────────────────────────────── */
.modal-scrim { position: fixed; inset: 0; background: rgba(20,24,29,.4); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.modal-panel { width: 560px; max-width: 100%; max-height: 92vh; display: flex; flex-direction: column; background: var(--surface); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.22); overflow: hidden; }
.modal-head { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.modal-head h2 { font-size: 16px; }
.modal-tabs { display: flex; gap: 18px; padding: 0 20px; border-bottom: 1px solid var(--line); background: var(--surface-sunk); }
.modal-tabs button { border: none; background: transparent; cursor: pointer; padding: 10px 2px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-faint); border-bottom: 2px solid transparent; }
.modal-tabs button:hover { color: var(--ink); }
.modal-tabs button.active { color: var(--ink); border-bottom-color: var(--brand-red); }
.modal-body { padding: 20px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; }
.confirm-panel { width: 440px; }
.confirm-panel .modal-body { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

/* ── Analytics dashboard ──────────────────────────────────────────────────── */
.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 16px; }
.dash-kpi { padding: 16px 18px; display: flex; flex-direction: column; }
.dash-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-bottom: 16px; }
.chart-card { padding: 16px 18px; }
.chart-card h3 { font-size: 13px; margin-bottom: 4px; }
.chart-note { font-size: 11.5px; color: var(--ink-faint); margin-bottom: 12px; }
.chart-empty { padding: 26px 0; text-align: center; color: var(--ink-faint); font-size: 12.5px; }

.chart-line { width: 100%; height: 180px; overflow: visible; }
.chart-line .plot-line { fill: none; stroke: var(--brand-red); stroke-width: 2; }
.chart-line .plot-area { fill: var(--brand-red-wash); }
.chart-line .axis { stroke: var(--line-strong); stroke-width: 1; }
.chart-line .gridline { stroke: var(--line-soft); stroke-width: 1; }
.chart-line .dot { fill: var(--brand-red); }

.chart-bars { display: flex; align-items: flex-end; gap: 10px; height: 180px; padding-top: 8px; }
.chart-bar-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; min-width: 0; }
.chart-bar { width: 100%; max-width: 46px; border-radius: 4px 4px 0 0; background: var(--brand-red); min-height: 2px; }
.chart-bar.stacked { display: flex; flex-direction: column-reverse; background: transparent; border-radius: 4px 4px 0 0; overflow: hidden; }
.chart-bar-seg { width: 100%; }
.chart-bar-label { font-size: 10.5px; color: var(--ink-faint); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.chart-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; font-size: 11.5px; }
.chart-legend span.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.chart-pie-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.chart-pie { width: 156px; height: 156px; flex: 0 0 auto; }
.chart-pie-legend { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 7px; font-size: 12px; }
.chart-pie-legend .row-inline { justify-content: space-between; }

.multiselect { max-height: 132px; overflow: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 7px 9px; background: var(--surface); display: flex; flex-direction: column; gap: 4px; }
.multiselect label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; cursor: pointer; }

/* ── Pay period setup wizard ──────────────────────────────────────────────── */
.freq-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.freq-choice { text-align: left; padding: 14px 16px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 4px; }
.freq-choice:hover { border-color: var(--brand-red); }
.freq-choice.selected { border-color: var(--brand-red); background: var(--brand-red-wash); }
.freq-choice strong { font-size: 13.5px; }
.freq-choice span { font-size: 11.5px; color: var(--ink-soft); }
.period-preview { max-height: 460px; overflow: auto; }
.period-preview .row.next { background: var(--ok-wash); }

/* ── Shared page primitives (payroll consistency pass) ────────────────────────
   In-card tab bar (employee record), hub tiles (report hubs), readiness
   checklists (PAYE annual return) and the warning button variant. These replace
   the Bootstrap-shaped markup that had crept into some payroll pages — Bootstrap
   is NOT loaded, so those classes rendered unstyled. */

.btn-warn { background: var(--warn-wash); color: var(--warn-ink); border-color: var(--warn-line); font-weight: 700; }
.btn-warn:hover:not(:disabled) { background: #FCEFD4; }

.tabs { display: flex; gap: 18px; padding: 0 18px; border-bottom: 1px solid var(--line); background: var(--surface-sunk); }
.tabs .tab, button.tab {
    border: none; background: transparent; cursor: pointer; padding: 11px 2px; font: inherit;
    font-size: 12.5px; font-weight: 600; color: var(--ink-faint); border-bottom: 2px solid transparent;
}
.tabs .tab:hover, button.tab:hover { color: var(--ink); }
.tabs .tab.active, button.tab.active { color: var(--ink); border-bottom-color: var(--brand-red); font-weight: 700; }
.tab-content { padding: 18px; display: flex; flex-direction: column; gap: 14px; }

.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 14px; }
.tile { padding: 18px; display: block; color: inherit; }
.tile:hover { border-color: var(--brand-red); color: inherit; }
.tile-title { font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.tile-note { color: var(--ink-faint); font-size: 12.5px; }

.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.checklist li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line-soft); }
.checklist li:last-child { border-bottom: none; }
.checklist .mark { font-size: 13px; line-height: 1.35; font-weight: 700; }
.checklist li.pass .mark { color: var(--ok-ink); }
.checklist li.fail .mark { color: var(--brand-red); }
.checklist li.pending .mark { color: var(--warn-ink); }
.checklist .label { display: block; font-weight: 650; font-size: 12.5px; }
.checklist .detail { display: block; color: var(--ink-faint); font-size: 11.5px; margin-top: 2px; line-height: 1.4; }

.validation-message { color: var(--brand-red); font-size: 11.5px; font-weight: 600; }
.invalid { border-color: var(--brand-red); }

/* Section heading inside a tab or panel — separates a long form into readable groups. */
.section-title {
    margin: 6px 0 0; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--ink-faint); padding-top: 12px; border-top: 1px solid var(--line-soft);
}
.tab-content > .section-title:first-child { padding-top: 0; border-top: none; }

/* File-picker drop zone (employee documents): a real <label> so no JS click shim is needed. */
.upload-drop:hover { border-color: var(--brand-red); }
.upload-drop:focus-within { border-color: var(--brand-red); box-shadow: 0 0 0 3px var(--brand-red-wash); }

/* Selectable KPI card, used to choose the kind of payroll being run. */
.wf-kpi.selected { background: var(--brand-red-wash); }

.empty-state { padding: 34px 20px; text-align: center; }
.empty-state-icon { display: inline-flex; margin-bottom: 8px; color: var(--ink-faint); }
.empty-state-icon svg { width: 30px; height: 30px; }
.empty-state b { display: block; font-size: 13.5px; }
.empty-state p { margin: 6px auto 14px; max-width: 420px; color: var(--ink-faint); font-size: 12.5px; }

/* Worksheet variant: main content with a narrower sidebar on the right (PAYE return). */
.worksheet.return-layout { grid-template-columns: 1fr 320px; }

@media (max-width: 900px) {
    .worksheet, .worksheet.return-layout { grid-template-columns: 1fr; }
    .app-content { padding: 16px 14px; }
    .page-head { flex-direction: column; align-items: stretch; }
    .head-actions { flex-wrap: wrap; }
}

/* ── RM205 VAT & PAYE return worksheet ─────────────────────────────────────── */
table.rm-form { width: 100%; border-collapse: collapse; font-size: 13px; }
table.rm-form td { padding: 9px 14px; border-bottom: 1px solid var(--line-soft); }
table.rm-form tr.rm-section td {
    background: var(--surface-sunk); font-weight: 700; font-size: 11px; text-transform: uppercase;
    letter-spacing: .06em; color: var(--ink-soft); border-bottom: 1px solid var(--line);
}
table.rm-form td.rm-no { width: 44px; color: var(--ink-faint); font-variant-numeric: tabular-nums; text-align: right; }
table.rm-form td.rm-amt { width: 170px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.rm-form tr.rm-emph td { font-weight: 700; background: var(--surface-sunk); }
table.rm-form tr.rm-input td { background: var(--brand-red-wash); }
table.rm-form tr.rm-row:last-child td { border-bottom: none; }

table.rm-recon { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.rm-recon td { padding: 7px 12px; border-bottom: 1px solid var(--line-soft); }
table.rm-recon td.rm-amt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.rm-recon tr:last-child td { border-bottom: none; }

/* ── Cashbook Receipts / Payments filter bar ───────────────────────────────── */
.cash-filter-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 12px;
}
.cash-filter-grid > label { display: flex; flex-direction: column; gap: 3px; }
.cash-filter-grid .field-label { margin: 0; }
.cash-filter .field-input { padding: 6px 9px; font-size: 12.5px; }
@media (max-width: 640px) { .cash-filter-grid { grid-template-columns: 1fr 1fr; } }

/* ── Shared list pager (Pager.razor) ───────────────────────────────────────── */
.list-pager {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 10px; flex-wrap: wrap;
}
.list-pager-count { font-size: 12px; }
.list-pager-summary { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.list-page-size { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 12px; }
.list-page-size select { padding: 5px 24px 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font: inherit; }
.list-pager-controls { display: flex; align-items: center; gap: 6px; }

/* ── Shared list toolbar (ListToolbar.razor) ───────────────────────────────── */
.list-toolbar { margin-bottom: 14px; }
.list-toolbar-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.list-toolbar-spacer { flex: 1 1 auto; }
.list-toolbar-count { font-size: 12px; white-space: nowrap; }
.list-search { position: relative; display: flex; align-items: center; flex: 0 1 320px; min-width: 200px; }
.list-search svg { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--ink-faint); pointer-events: none; }
.list-search-input {
    width: 100%; height: var(--control-height); padding: 0 30px 0 32px; font: inherit; font-size: 13px;
    border: 1px solid var(--line); border-radius: 8px; background: var(--surface, #fff); color: inherit;
}
.list-search-input:focus { outline: none; border-color: var(--brand-red); box-shadow: 0 0 0 4px var(--brand-red-wash); }
.list-search-input::-webkit-search-cancel-button { display: none; }
.list-search-clear {
    position: absolute; right: 8px; border: 0; background: none; cursor: pointer;
    color: var(--ink-faint); font-size: 12px; line-height: 1; padding: 4px;
}
.list-search-clear:hover { color: var(--ink); }
.list-toolbar-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.list-toolbar-filters select, .list-toolbar-filters input {
    height: var(--control-height); padding: 0 9px; font: inherit; font-size: 12.5px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--surface, #fff); color: inherit;
}
.list-toolbar-row > .btn,
.list-toolbar-filters .btn { min-height: var(--control-height); padding-block: 0; }
.list-toolbar-advanced {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px 12px;
    margin-top: 10px; padding: 12px; border: 1px solid var(--line-soft); border-radius: 10px;
    background: var(--surface-sunk, #fafafa);
}
.list-toolbar-advanced > label { display: flex; flex-direction: column; gap: 3px; }
.list-toolbar-advanced .field-label { margin: 0; }
.list-toolbar-advanced .field-input { height: var(--control-height); padding: 0 9px; font-size: 12.5px; }
.list-toolbar-applied { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.filter-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-soft); font: inherit; font-size: 12px; line-height: 1.25; cursor: pointer; }
.filter-chip span { color: var(--ink-faint); font-size: 14px; line-height: 1; }
.filter-chip:hover, .filter-chip:focus-visible { border-color: rgba(206, 21, 44, .35); color: var(--brand-red); outline: none; box-shadow: 0 0 0 3px var(--brand-red-wash); }

@media (max-width: 720px) {
    .invoice-page-head { align-items: stretch; }
    .invoice-heading-meta { align-items: flex-start; flex-direction: column; gap: 3px; }
    .invoice-heading-meta > span:not(:first-child)::before { display: none; }
    .invoice-summary-grid, .record-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .invoice-summary-item, .record-summary-item { border-bottom: 1px solid var(--line-soft); }
    .invoice-summary-item:nth-child(2n), .record-summary-item:nth-child(2n) { border-right: 0; }
}

/* Cashbook keeps high-use transaction filters in one deliberate row rather than
   letting date fields and selects spill into a form-shaped header. */
.cashbook-list-toolbar .list-toolbar-row { gap: 8px; }
.cashbook-list-toolbar .list-search { flex-basis: 290px; }
.cashbook-list-toolbar .list-toolbar-filters { gap: 7px; flex: 0 1 auto; }
.cashbook-list-toolbar .cashbook-contact { width: 190px; }
.cashbook-list-toolbar .cashbook-funds { width: 210px; }
.cashbook-date-range { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-faint); }
.cashbook-date-range .field-input { width: 132px; }
.table-sort {
    display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0;
    color: inherit; background: transparent; font: inherit; font-weight: inherit;
    cursor: pointer; text-transform: inherit; letter-spacing: inherit;
}
.table-sort span { color: var(--ink-faint); font-size: 11px; line-height: 1; }
.table-sort:hover, .table-sort:focus-visible { color: var(--brand-red); outline: none; }
.table-sort.active span { color: var(--brand-red); }

/* Document registers share the same disciplined control geometry as Cashbook.
   Search, status and date range are the primary actions; refinements stay under More. */
.document-list-toolbar .document-status { width: 160px; }
.inventory-list-toolbar .inventory-filter { width: 150px; }
.inventory-pagination { justify-content: center; gap: 8px; margin-top: 14px; }

/* Sales setup is a small, distinct work area beneath the primary Sales tabs. */
.subnav {
    display: flex; align-items: center; gap: 4px; margin: -4px 0 16px;
    border-bottom: 1px solid var(--line); padding-bottom: 8px;
}
.subnav a {
    padding: 6px 10px; border-radius: 6px; color: var(--ink-soft); font-size: 12.5px;
    font-weight: 650; text-decoration: none;
}
.subnav a:hover { background: var(--surface-sunk); color: var(--ink); }
.subnav a.active { background: var(--brand-red-wash); color: var(--brand-red); }
.configuration-panel { max-width: 640px; padding: 18px; }
.configuration-panel h2 { font-size: 15px; }

/* Settings area — one shell for every /settings/* page (SettingsShell.razor) so the
   secondary-nav tabs feel like one screen. Pages drop their ad-hoc page-head + inline
   card padding/width and just put plain .card blocks in here. */
.settings-body { max-width: 680px; }
.settings-body--wide { max-width: 980px; }
.settings-body--full { max-width: none; }   /* pages with their own wide layout (theme editor) */
.settings-body > .card { padding: 20px; }
.settings-body > .card + .card { margin-top: 14px; }
.settings-body > .callout { margin-bottom: 14px; }
.settings-body > p.faint { max-width: 72ch; margin-top: -4px; }
.settings-general-card { overflow: visible; }

/* <Feature> in the GreyedUpsell state — visible but not usable, with a way-in hint
   (AccessMap: e.g. a non-VAT business seeing Tax codes / the VAT reporting basis). */
.feature-greyed { position: relative; }
.feature-greyed .feature-greyed-body { opacity: 0.45; pointer-events: none; user-select: none; }
.feature-greyed .feature-greyed-hint {
    margin: 6px 0 0; font-size: 12px; color: var(--ink-faint);
    display: flex; gap: 6px; align-items: baseline;
}
.feature-greyed .feature-greyed-hint::before { content: "🔒"; font-size: 11px; }

/* Plan / add-on rows — the onboarding "Choose your plan" step and Billing & plan. */
.plan-line {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
    padding: 14px 16px; margin-bottom: 10px;
    border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface);
}
.plan-line.picked { border-color: var(--brand-red); box-shadow: 0 0 0 3px var(--brand-red-soft, rgba(200,30,40,.12)); }
.plan-line-name { font-weight: 700; font-size: 13.5px; }
.plan-line-price { font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.settings-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; }
.field-with-action { display: flex; align-items: center; gap: 8px; }
.field-with-action > input { min-width: 0; }
.settings-preference {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    margin-top: 20px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface-sunk);
}
.settings-preference-title { font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.settings-preference-copy { max-width: 50ch; margin-top: 3px; color: var(--ink-soft); font-size: 12px; line-height: 1.45; }
.settings-preference-control { align-self: center; min-width: 112px; padding: 0; justify-content: flex-end; }
.settings-context-note { margin: 14px 0 0; color: var(--ink-faint); font-size: 11.5px; line-height: 1.45; }
.settings-actions { display: flex; justify-content: flex-end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.settings-numbering-card { overflow: visible; }
.numbering-format { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.numbering-heading { margin-bottom: 14px; }
.numbering-heading p { margin: 3px 0 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.45; }
.numbering-format-fields { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; align-items: end; gap: 12px 20px; }
.numbering-year-option { min-height: var(--control-height); padding-bottom: 0; }
.numbering-groups { display: grid; }
.numbering-group { padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.numbering-group:last-child { border-bottom: 0; padding-bottom: 2px; }
.numbering-group-heading { margin-bottom: 12px; }
.numbering-group-heading h2 { font-size: var(--type-section); line-height: var(--leading-heading); }
.numbering-prefix-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.numbering-sample { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 6px; }
.numbering-sample span { color: var(--ink-faint); font-size: 11.5px; }
.numbering-sample strong { color: var(--ink); font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.cash-line-actions { display: flex; align-items: center; justify-content: center; min-height: var(--control-height); }
.line-remove-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm);
    background: transparent; color: var(--ink-faint); cursor: pointer;
}
.line-remove-btn svg { width: 16px; height: 16px; }
.line-remove-btn:hover, .line-remove-btn:focus-visible {
    border-color: rgba(206, 21, 44, .24); background: var(--danger-wash); color: var(--danger-ink);
}
@media (max-width: 640px) {
    .numbering-format-fields, .numbering-prefix-grid { grid-template-columns: 1fr; }
}

/* Compact operational control bars. */
.compact-page-head { margin-bottom: 12px; }
.compact-page-head h1 { margin: 0; }
.ledger-toolbar, .run-control-bar {
    display: flex; align-items: end; gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
}
.ledger-list-toolbar {
    margin-bottom: 14px; padding: 12px;
    border: 1px solid var(--line-soft); border-radius: 10px;
    background: var(--surface-sunk);
}
.ledger-list-toolbar .list-toolbar-row { align-items: center; }
.ledger-list-toolbar .list-search { width: min(360px, 100%); }
.ledger-list-toolbar .list-toolbar-filters { align-items: center; gap: 8px; }
.ledger-toolbar .search-input { width: min(360px, 100%); }
.ledger-zero-toggle {
    align-self: auto; min-height: var(--control-height); padding: 0 12px;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--surface); white-space: nowrap;
}
.ledger-as-at {
    display: flex; align-items: center; gap: 0; height: var(--control-height);
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--surface); color: var(--ink-soft); overflow: hidden;
}
.ledger-as-at .field-label { margin: 0; padding: 0 10px 0 12px; white-space: nowrap; }
.ledger-as-at .field-input {
    width: 150px; height: calc(var(--control-height) - 2px); padding: 0 9px;
    border: 0; border-left: 1px solid var(--line-soft); border-radius: 0; background: transparent;
}
.ledger-as-at .field-input:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--brand-red-wash); }
.bill-entry-page-head { align-items: center; margin-bottom: 18px; }
.bill-entry-page-head h1 { margin-bottom: 2px; }
.bill-entry-card { padding: 20px; margin-bottom: 16px; }
.compact-field { min-width: 190px; max-width: 210px; }
.run-control-bar { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.analytics-filter-actions { justify-content: flex-end; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-heading h2, .section-heading h3 { margin: 0; font-size: 15px; }
@media (max-width: 640px) {
    .list-search { flex-basis: 100%; }
    .list-toolbar-advanced { grid-template-columns: 1fr 1fr; }
    .cashbook-list-toolbar .cashbook-contact, .cashbook-list-toolbar .cashbook-funds { width: 100%; }
    .cashbook-date-range { width: 100%; }
    .cashbook-date-range .field-input { flex: 1; width: 0; }
    .document-list-toolbar .document-status, .inventory-list-toolbar .inventory-filter { width: 100%; }
    .ledger-toolbar, .run-control-bar { align-items: stretch; }
    .ledger-zero-toggle, .ledger-as-at { width: 100%; }
    .ledger-as-at { justify-content: space-between; }
    .ledger-as-at .field-input { flex: 1; width: 0; }
    .ledger-list-toolbar .list-toolbar-filters { width: 100%; align-items: stretch; }
    .settings-form-grid { grid-template-columns: 1fr; }
    .settings-preference { align-items: flex-start; flex-direction: column; }
    .settings-preference-control { justify-content: flex-start; }
    .theme-manager-main, .theme-manager-actions { align-items: stretch; }
    .theme-manager-select, .theme-manager-actions { width: 100%; max-width: none; }
    .theme-manager-actions .btn { flex: 1; justify-content: center; }
    .theme-assignments { grid-template-columns: 1fr; }
}

/* One cross-browser contract for every dropdown. Native Safari selects can ignore
   vertical padding and collapse to their intrinsic 20px height, so size and arrow
   are explicit instead of relying on browser appearance. */
select:not([multiple]):not([size]) {
    appearance: none;
    -webkit-appearance: none;
    min-height: var(--control-height);
    height: var(--control-height);
    padding-top: 0 !important;
    padding-right: 34px !important;
    padding-bottom: 0 !important;
    line-height: 1.2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%236B6B68' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
}

/* Reports catalogue: clear page and category spacing without changing other hubs. */
.reports-home { padding: 8px 8px 24px; }
.reports-home-header { margin-bottom: 32px; }
.reports-home-header h1 { margin: 0 0 8px; font-size: var(--type-page-title); line-height: 1.3; }
.reports-home-header p { margin: 0; color: var(--ink-soft); font-size: var(--type-helper); line-height: 1.6; }
.reports-home .reports-group-heading { margin: 28px 0 12px; font-size: var(--type-section-title); font-weight: 600; line-height: 1.5; }
.reports-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.reports-card { display: block; padding: 20px; color: inherit; text-decoration: none; }
.reports-card:hover { border-color: var(--line-strong); background: var(--surface-sunk); }
.reports-card:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 3px; }
.reports-card-title { margin-bottom: 6px; font-size: var(--type-body); font-weight: 600; line-height: 1.5; }
.reports-card-description { color: var(--ink-soft); font-size: var(--type-helper); line-height: 1.6; }
.reports-home-hint { margin-top: 28px; }
@media (max-width: 767px) {
    .reports-home { padding: 4px 0 16px; }
    .reports-home-header { margin-bottom: 24px; }
    .reports-home .reports-group-heading { margin-top: 24px; }
    .reports-card { padding: 16px; }
}

/* Payroll task hubs use the shared tile geometry but keep comfortable spacing on wide pages. */
.payroll-hub-grid { max-width: 960px; }

/* UX-13: setup and administration reflow, readable fields and persistent navigation. */
.auth-brand span { line-height: 1.3; }
.ux-setup .wizard-foot { height: auto; min-height: 64px; padding-block: 12px; gap: 12px; flex-wrap: wrap; }
.ux-setup .wizard-foot > .row-inline { flex-wrap: wrap; justify-content: flex-end; }
.ux-setup .wizard-body.center { align-items: flex-start; }
.ux-setup .steps { overflow-x: auto; flex-shrink: 0; }
.ux-setup .step { flex-shrink: 0; }
.ux-setup .grid-table { overflow-x: auto; }
.ux-setup .grid-table > .row { min-width: 620px; }
.access-row { flex-wrap: wrap; overflow-wrap: anywhere; }
.pc .pc-field label, .pc .pc-table .tr.th { color: var(--pc-ink-soft); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: normal; }
.pc .pc-table .tr small { color: var(--pc-ink-soft); font-size: 13px; }
.pc :is(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--pc-accent); outline-offset: 3px; }
@media (max-width: 900px) {
    .pc-shell { flex-direction: column; overflow: auto; }
    .pc-rail { display: block; width: 100%; flex-shrink: 0; padding: 12px 16px; }
    .pc-rail nav { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px; }
    .pc-rail nav a { padding: 8px 10px; }
    .pc-rail-brand { margin-bottom: 10px; }
    .pc-rail-spacer { display: none; }
    .pc-main { overflow: visible; flex-shrink: 0; }
    .pc-content { overflow: visible; }
    .pc-header { flex-wrap: wrap; height: auto; min-height: 56px; gap: 8px; padding: 12px 16px; }
    .pc-user { overflow-wrap: anywhere; min-width: 0; }
    .pc-table { overflow-x: auto; }
    .pc-table .tr { min-width: 640px; }
    .pc-table .tr.th { display: grid; }
}
@media (max-width: 600px) {
    .ux-setup .wizard-bar { height: auto; min-height: 56px; padding: 12px 16px; flex-wrap: wrap; }
    .ux-setup .wizard-body { padding: 16px; }
    .ux-setup .wizard-card { padding: 20px; }
    .ux-setup .wizard-foot { padding-inline: 16px; }
    .ux-setup .type-grid { grid-template-columns: 1fr; }
    .ux-setup .row-inline { flex-wrap: wrap; }
}