/* ============================================================================
   DoubleEntry — design system
   Calm, professional, data-first. Built for accountants who live in this all day.

   Principles
   ----------
   1. Numbers are the hero. Tabular figures everywhere money appears, so digits
      line up in columns and the eye can scan a ledger.
   2. Restraint. One accent colour. Colour is reserved for MEANING (money in/out,
      confidence, risk) — never decoration.
   3. Quiet chrome. Subtle borders over heavy shadows; the data should be the
      loudest thing on the page.
   4. Full light/dark parity — every token is themed.
   ========================================================================== */

:root {
    /* ---- Neutrals (slate) ---- */
    --c-bg:            #f7f8fa;
    --c-surface:       #ffffff;
    --c-surface-2:     #f2f4f7;
    --c-surface-hover: #f7f8fa;
    --c-border:        #e3e6ea;
    --c-border-strong: #cfd4da;

    --c-text:          #12161c;
    --c-text-muted:    #5c6572;
    --c-text-subtle:   #8b939f;

    /* ---- Accent (single, restrained) ---- */
    --c-accent:        #3355e0;
    --c-accent-hover:  #2944c4;
    --c-accent-soft:   #eef1fd;
    --c-accent-text:   #ffffff;

    /* ---- Semantic — used for MEANING only ---- */
    --c-pos:           #0f7a4d;   /* money in */
    --c-pos-soft:      #e6f5ee;
    --c-neg:           #c0392f;   /* money out */
    --c-neg-soft:      #fdeceb;
    --c-warn:          #a86400;
    --c-warn-soft:     #fdf3e3;
    --c-info:          #1f6f8b;
    --c-info-soft:     #e8f3f7;

    /* ---- Radii / shadow / spacing ---- */
    --r-sm: 6px;
    --r-md: 9px;
    --r-lg: 14px;

    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, .07);
    --shadow-lg: 0 12px 32px rgba(16, 24, 40, .12);

    --sidebar-w: 244px;
    --topbar-h: 58px;

    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
}

/* Dark mode: follow the OS by default... */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --c-bg:            #0e1116;
        --c-surface:       #161a21;
        --c-surface-2:     #1d222b;
        --c-surface-hover: #1f242e;
        --c-border:        #272d38;
        --c-border-strong: #39414f;

        --c-text:          #e8eaee;
        --c-text-muted:    #99a2b0;
        --c-text-subtle:   #6d7686;

        --c-accent:        #6b86f5;
        --c-accent-hover:  #839af7;
        --c-accent-soft:   #1c2440;
        --c-accent-text:   #0e1116;

        --c-pos:           #3ecf8e;
        --c-pos-soft:      #10291f;
        --c-neg:           #f0736a;
        --c-neg-soft:      #2c1917;
        --c-warn:          #e0a44a;
        --c-warn-soft:     #2a2114;
        --c-info:          #5bb3ce;
        --c-info-soft:     #13252c;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
        --shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
    }
}

/* ...but an explicit toggle always wins, in both directions. */
:root[data-theme="dark"] {
    --c-bg:            #0e1116;
    --c-surface:       #161a21;
    --c-surface-2:     #1d222b;
    --c-surface-hover: #1f242e;
    --c-border:        #272d38;
    --c-border-strong: #39414f;

    --c-text:          #e8eaee;
    --c-text-muted:    #99a2b0;
    --c-text-subtle:   #6d7686;

    --c-accent:        #6b86f5;
    --c-accent-hover:  #839af7;
    --c-accent-soft:   #1c2440;
    --c-accent-text:   #0e1116;

    --c-pos:           #3ecf8e;
    --c-pos-soft:      #10291f;
    --c-neg:           #f0736a;
    --c-neg-soft:      #2c1917;
    --c-warn:          #e0a44a;
    --c-warn-soft:     #2a2114;
    --c-info:          #5bb3ce;
    --c-info-soft:     #13252c;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
}

/* ============================================================================
   Base
   ========================================================================== */

* { box-sizing: border-box; }

body {
    font-family: var(--font);
    background: var(--c-bg);
    color: var(--c-text);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--c-text);
    font-weight: 600;
    letter-spacing: -0.011em;
    margin: 0;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; }
h4, h5, h6 { font-size: .9375rem; }

a { color: var(--c-accent); text-decoration: none; }
a:hover { color: var(--c-accent-hover); text-decoration: underline; }

hr { border-color: var(--c-border); opacity: 1; }

code {
    font-family: var(--font-mono);
    font-size: .85em;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    padding: .1em .38em;
    border-radius: 4px;
    color: var(--c-text);
}

::selection { background: var(--c-accent-soft); }

/* THE most important rule in an accounting app: digits must line up. */
.num, .money, td.num, th.num,
table.data td:last-child, .stat-value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.money-pos { color: var(--c-pos); }
.money-neg { color: var(--c-neg); }

.text-muted   { color: var(--c-text-muted) !important; }
.text-subtle  { color: var(--c-text-subtle) !important; }
.text-pos     { color: var(--c-pos) !important; }
.text-neg     { color: var(--c-neg) !important; }
.text-warn    { color: var(--c-warn) !important; }

.mono { font-family: var(--font-mono); }

/* ============================================================================
   App shell
   ========================================================================== */

.app {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: var(--c-surface);
    border-right: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;

    /* Custom properties don't transition, so animate the real properties.
       Slight ease-out so it decelerates into place rather than stopping dead. */
    transition:
        width .24s cubic-bezier(.32, .72, 0, 1),
        flex-basis .24s cubic-bezier(.32, .72, 0, 1);
}

.sidebar-brand-row {
    display: flex;
    align-items: center;
    height: var(--topbar-h);
    border-bottom: 1px solid var(--c-border);
    padding-right: .5rem;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 1.1rem;
    font-weight: 650;
    font-size: .98rem;
    letter-spacing: -.01em;
    color: var(--c-text);
}
.sidebar-brand:hover { text-decoration: none; color: var(--c-text); }

/* Collapse control */
.nav-collapse {
    width: 24px; height: 24px;
    flex: 0 0 24px;
    display: grid; place-items: center;
    border: 0;
    background: transparent;
    color: var(--c-text-subtle);
    border-radius: 5px;
    cursor: pointer;
    padding: 0;
    font-size: .78rem;
    transition: background .12s ease, color .12s ease;
}
.nav-collapse:hover { background: var(--c-surface-hover); color: var(--c-text); }

.sidebar-brand .mark {
    width: 26px; height: 26px;
    border-radius: 7px;
    background: var(--c-accent);
    color: var(--c-accent-text);
    display: grid; place-items: center;
    font-weight: 700; font-size: .78rem;
    flex: 0 0 26px;
}

.sidebar-nav {
    padding: .75rem .6rem;
    overflow-y: auto;
    flex: 1;
}

.nav-section {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 600;
    color: var(--c-text-subtle);
    padding: .9rem .55rem .35rem;
}

.nav-item-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .48rem .55rem;
    border-radius: var(--r-sm);
    color: var(--c-text-muted);
    font-weight: 500;
    font-size: .875rem;
    margin-bottom: 1px;
    transition: background .12s ease, color .12s ease;
}
.nav-item-link:hover {
    background: var(--c-surface-hover);
    color: var(--c-text);
    text-decoration: none;
}
.nav-item-link.active {
    background: var(--c-accent-soft);
    color: var(--c-accent);
    font-weight: 600;
}
.nav-item-link i { font-size: 1rem; width: 18px; text-align: center; }

.nav-item-link .count {
    margin-left: auto;
    font-size: .72rem;
    font-weight: 600;
    background: var(--c-surface-2);
    color: var(--c-text-muted);
    border-radius: 20px;
    padding: .05rem .42rem;
    font-variant-numeric: tabular-nums;
}
.nav-item-link .count.alert {
    background: var(--c-neg-soft);
    color: var(--c-neg);
}

.sidebar-foot {
    border-top: 1px solid var(--c-border);
    padding: .6rem;
}

/* Sign out sits alongside the theme toggle. */
.foot-row {
    display: flex;
    align-items: center;
    gap: .35rem;
}
.foot-row .icon-btn { flex: 0 0 32px; }

/* ============================================================================
   Collapsed sidebar — an icon rail.
   Labels are hidden rather than removed, so the DOM (and screen readers) are
   unaffected; native title tooltips carry the names.
   ========================================================================== */

:root[data-nav="collapsed"] {
    --sidebar-w: 62px;
}

/* Labels collapse rather than vanish, so the transition has something to animate.
   (display:none can't be tweened.) They fade a touch faster than the rail moves,
   which stops the text visibly squashing as the width shrinks. */
.sidebar .label {
    max-width: 170px;
    overflow: hidden;
    white-space: nowrap;
    opacity: 1;
    transition:
        max-width .24s cubic-bezier(.32, .72, 0, 1),
        opacity .14s ease;
}
[data-nav="collapsed"] .sidebar .label {
    max-width: 0;
    opacity: 0;
}

[data-nav="collapsed"] .sidebar-brand-row {
    flex-direction: column;
    justify-content: center;
    gap: .2rem;
    height: auto;
    padding: .55rem 0;
}
[data-nav="collapsed"] .sidebar-brand {
    padding: 0;
    justify-content: center;
    gap: 0;
}

/* Brand: the wordmark logo when expanded, the DE monogram when collapsed. Both are
   dark-on-white, so they sit in a small white chip to stay legible on either theme. */
.sidebar-logo {
    height: 36px; width: auto;
    background: #fff;
    padding: 5px 10px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.sidebar-logo-mini { display: none; }
[data-nav="collapsed"] .sidebar-logo { display: none; }
[data-nav="collapsed"] .sidebar-logo-mini {
    display: block;
    height: 34px; width: auto;
    background: #fff;
    padding: 4px;
    border-radius: 7px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

[data-nav="collapsed"] .sidebar-nav { padding: .75rem .5rem; }

.nav-item-link { transition: background .12s ease, color .12s ease, gap .24s cubic-bezier(.32,.72,0,1); }

[data-nav="collapsed"] .nav-item-link {
    justify-content: center;
    padding: .55rem 0;
    gap: 0;
}
[data-nav="collapsed"] .nav-item-link i { width: auto; font-size: 1.05rem; }

/* The chevron rotates rather than swapping glyphs — reads as one continuous motion. */
.nav-collapse i { transition: transform .24s cubic-bezier(.32, .72, 0, 1); }

/* A section heading with no text would just be dead space - swap it for a rule. */
[data-nav="collapsed"] .nav-section {
    padding: .65rem .5rem .35rem;
    border-top: 1px solid var(--c-border);
    margin-top: .35rem;
    height: 0;
    overflow: hidden;
}

/* Counts can't fit, so surface unread/alert state as a dot on the icon. */
[data-nav="collapsed"] .nav-item-link .count { display: none; }
[data-nav="collapsed"] .nav-item-link:has(.count.alert) { position: relative; }
[data-nav="collapsed"] .nav-item-link:has(.count.alert)::after {
    content: "";
    position: absolute;
    top: .42rem; right: .78rem;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--c-neg);
    box-shadow: 0 0 0 2px var(--c-surface);
}

[data-nav="collapsed"] .foot-row { flex-direction: column; gap: .25rem; }
[data-nav="collapsed"] .foot-row .grow { width: 100%; }

/* --- Main column --- */
.main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    height: var(--topbar-h);
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.35rem;
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar .spacer { flex: 1; }

.page {
    padding: 1.5rem 1.75rem 3rem;
    max-width: 1440px;
    width: 100%;

    /* Without this the content hugs the left edge of the main column and leaves
       dead space on the right on wide screens. Centre it in the available area. */
    margin-inline: auto;
}

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.page-title { font-size: 1.375rem; font-weight: 650; letter-spacing: -.015em; }
.page-sub { color: var(--c-text-muted); font-size: .875rem; margin-top: .12rem; }

/* Breadcrumb */
.crumbs { font-size: .8rem; color: var(--c-text-subtle); margin-bottom: .3rem; }
.crumbs a { color: var(--c-text-muted); }
.crumbs .sep { margin: 0 .35rem; opacity: .5; }

/* ============================================================================
   Icon button / theme toggle
   ========================================================================== */

.icon-btn {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text-muted);
    cursor: pointer;
    transition: all .12s ease;
    padding: 0;
}
.icon-btn:hover {
    background: var(--c-surface-hover);
    color: var(--c-text);
    border-color: var(--c-border-strong);
}

/* ============================================================================
   Cards / surfaces
   ========================================================================== */

.card,
.panel {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
}

.panel-head {
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.panel-title { font-weight: 600; font-size: .9375rem; }
.panel-body { padding: 1.1rem; }
.panel-body.tight { padding: 0; }

/* --- Stat tiles --- */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .85rem;
    margin-bottom: 1.35rem;
}

.stat {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: .9rem 1rem;
    box-shadow: var(--shadow-sm);
}
.stat-label {
    font-size: .75rem;
    color: var(--c-text-muted);
    font-weight: 500;
    display: flex; align-items: center; gap: .3rem;
    margin-bottom: .25rem;
}
.stat-value {
    font-size: 1.375rem;
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.stat-hint { font-size: .74rem; color: var(--c-text-subtle); margin-top: .15rem; }

.stat.pos .stat-value { color: var(--c-pos); }
.stat.neg .stat-value { color: var(--c-neg); }
.stat.warn .stat-value { color: var(--c-warn); }

/* ============================================================================
   Tables — the workhorse
   ========================================================================== */

.table-wrap {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.table-scroll { overflow-x: auto; }

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: .8125rem;
}

table.data thead th {
    background: var(--c-surface-2);
    border-bottom: 1px solid var(--c-border);
    padding: .58rem .85rem;
    text-align: left;
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .045em;
    color: var(--c-text-muted);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

table.data tbody td {
    padding: .62rem .85rem;
    border-bottom: 1px solid var(--c-border);
    vertical-align: middle;
    color: var(--c-text);
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--c-surface-hover); }

table.data td.right, table.data th.right { text-align: right; }

/* Sortable column header: looks like the header, not a link. */
a.th-sort {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
a.th-sort:hover { color: var(--c-accent); }
.th-sort-icon { font-size: .68rem; margin-left: .12rem; opacity: .3; vertical-align: -1px; }
a.th-sort:hover .th-sort-icon { opacity: .65; }
.th-sort-icon.active { opacity: 1; color: var(--c-accent); }
table.data td.amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 550;
    white-space: nowrap;
}

table.data tr.row-flag { background: var(--c-neg-soft); }
table.data tr.row-flag:hover { background: var(--c-neg-soft); filter: brightness(.98); }

table.data tr.selected { background: var(--c-accent-soft); }

/* Focused row for keyboard nav */
table.data tr.kb-focus {
    box-shadow: inset 3px 0 0 var(--c-accent);
    background: var(--c-surface-hover);
}

.cell-primary { font-weight: 500; }
.cell-sub { font-size: .74rem; color: var(--c-text-subtle); margin-top: .1rem; }

/* ============================================================================
   Badges / pills
   ========================================================================== */

.pill {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .7rem;
    font-weight: 600;
    padding: .13rem .48rem;
    border-radius: 20px;
    white-space: nowrap;
    line-height: 1.5;
    border: 1px solid transparent;
}
.pill-neutral { background: var(--c-surface-2); color: var(--c-text-muted); border-color: var(--c-border); }
.pill-accent  { background: var(--c-accent-soft); color: var(--c-accent); }
.pill-pos     { background: var(--c-pos-soft); color: var(--c-pos); }
.pill-neg     { background: var(--c-neg-soft); color: var(--c-neg); }
.pill-warn    { background: var(--c-warn-soft); color: var(--c-warn); }
.pill-info    { background: var(--c-info-soft); color: var(--c-info); }

/* Confidence, given its own scale so it reads at a glance */
.conf-strong { background: var(--c-pos-soft); color: var(--c-pos); }
.conf-medium { background: var(--c-warn-soft); color: var(--c-warn); }
.conf-weak   { background: var(--c-warn-soft); color: var(--c-warn); opacity: .8; }
.conf-none   { background: var(--c-surface-2); color: var(--c-text-muted); border-color: var(--c-border); }
.conf-manual { background: var(--c-accent-soft); color: var(--c-accent); }

/* ============================================================================
   Buttons (override Bootstrap)
   ========================================================================== */

.btn {
    font-size: .8125rem;
    font-weight: 550;
    border-radius: var(--r-sm);
    padding: .38rem .8rem;
    border: 1px solid transparent;
    transition: all .12s ease;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    line-height: 1.5;
}
.btn:focus, .btn:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 1px;
    box-shadow: none;
}

.btn-primary {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: var(--c-accent-text);
}
.btn-primary:hover {
    background: var(--c-accent-hover);
    border-color: var(--c-accent-hover);
    color: var(--c-accent-text);
}

.btn-secondary,
.btn-outline-secondary {
    background: var(--c-surface);
    border-color: var(--c-border-strong);
    color: var(--c-text);
}
.btn-secondary:hover,
.btn-outline-secondary:hover {
    background: var(--c-surface-hover);
    border-color: var(--c-text-subtle);
    color: var(--c-text);
}

.btn-danger {
    background: var(--c-neg);
    border-color: var(--c-neg);
    color: #fff;
}
.btn-danger:hover { filter: brightness(.92); color: #fff; }

.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--c-text-muted);
}
.btn-ghost:hover { background: var(--c-surface-hover); color: var(--c-text); }

.btn-sm { font-size: .75rem; padding: .28rem .6rem; }
.btn-lg { font-size: .9rem; padding: .55rem 1.1rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.disabled { opacity: .4; pointer-events: none; }

/* Reusable confirm modal (window.confirmDialog). */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: rgba(15, 23, 42, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: modalFade .12s ease;
}
.modal-backdrop[hidden] { display: none; }
.modal-card {
    width: 100%;
    max-width: 380px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: 1.6rem 1.5rem 1.35rem;
    text-align: center;
    animation: modalPop .14s ease;
}
.modal-icon {
    width: 46px;
    height: 46px;
    margin: 0 auto .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.35rem;
    background: var(--c-accent-soft);
    color: var(--c-accent);
}
.modal-icon.danger { background: var(--c-neg-soft); color: var(--c-neg); }
.modal-title { margin: 0 0 .35rem; font-size: 1.05rem; font-weight: 650; color: var(--c-text); }
.modal-msg { margin: 0 0 1.35rem; font-size: .85rem; color: var(--c-text-muted); line-height: 1.5; }
.modal-actions { display: flex; gap: .55rem; justify-content: center; }
.modal-actions .btn { min-width: 96px; justify-content: center; }

/* The base .modal-card is a narrow, centred confirmation box. This variant is a
   wider, left-aligned panel for a form, where centred labels read badly and the
   actions belong at the end. */
.modal-card.modal-wide {
    max-width: 520px;
    text-align: left;
}
.modal-card.modal-wide .modal-actions { justify-content: flex-end; }
@keyframes modalFade { from { opacity: 0; } }
@keyframes modalPop { from { opacity: 0; transform: translateY(8px) scale(.97); } }

/* Per-row actions kebab (⋮) and its menu. The menu is position:fixed and lives
   outside the scrolling table, so it is never clipped. */
.kebab-cell { text-align: center; }
.kebab-trigger {
    background: none;
    border: 0;
    padding: .2rem .35rem;
    line-height: 1;
    border-radius: var(--r-sm);
    color: var(--c-text-subtle);
    cursor: pointer;
}
.kebab-trigger:hover { color: var(--c-text); background: var(--c-surface-hover); }

.rowmenu-pop {
    position: fixed;
    z-index: 200;
    min-width: 160px;
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-lg);
    padding: 4px;
}
.rowmenu-pop[hidden] { display: none; }
.rowmenu-pop button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: .42rem .55rem;
    border-radius: var(--r-sm);
    cursor: pointer;
    font-size: .8125rem;
    color: var(--c-text);
}
.rowmenu-pop button[hidden] { display: none; }
.rowmenu-pop button:hover { background: var(--c-surface-hover); }
.rowmenu-pop button.danger { color: var(--c-neg); }

/* In-page refresh: gently dim the results while the swap is in flight. */
#registerResults.is-loading { opacity: .55; transition: opacity .1s ease; pointer-events: none; }

/* Standard pagination (the shared _Pagination partial). */
.pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.25rem;
    margin-top: 1rem;
    padding-bottom: 1rem;
}
.pager-size {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
}
.pager-size-label { font-size: .75rem; color: var(--c-text-subtle); }
.pager-size select { width: auto; }
.pager-nav {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.pager-status {
    font-size: .8rem;
    color: var(--c-text-subtle);
    min-width: 9ch;
    text-align: center;
}

/* ============================================================================
   Forms
   ========================================================================== */

.form-label {
    font-size: .78rem;
    font-weight: 550;
    color: var(--c-text-muted);
    margin-bottom: .28rem;
}

.form-control,
.form-select {
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-sm);
    color: var(--c-text);
    font-size: .8125rem;
    padding: .4rem .6rem;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.form-control::placeholder { color: var(--c-text-subtle); }

/* A required <select> still on its empty placeholder option reads muted, like an
   input placeholder - so it doesn't look like a chosen value. */
.form-select:required:invalid { color: var(--c-text-subtle); }
.form-select:required:invalid option { color: var(--c-text); }
.form-control:focus,
.form-select:focus {
    background: var(--c-surface);
    color: var(--c-text);
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-soft);
    outline: none;
}
.form-control-sm, .form-select-sm { font-size: .78rem; padding: .28rem .5rem; }

.form-text { font-size: .74rem; color: var(--c-text-subtle); }

/* Combobox: a free-text input with a capped, scrollable suggestion list.
   Replaces the native <datalist>, whose dropdown height the browser controls. */
.combo { position: relative; }
.combo-menu {
    position: absolute;
    z-index: 40;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    max-height: 260px;
    overflow-y: auto;
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-lg);
    padding: 4px;
}
.combo-menu[hidden] { display: none; }
.combo-option {
    padding: .4rem .55rem;
    border-radius: var(--r-sm);
    cursor: pointer;
    font-size: .8125rem;
    color: var(--c-text);
    line-height: 1.25;
}
.combo-option[hidden] { display: none; }
.combo-option:hover,
.combo-option.active { background: var(--c-surface-hover); }
.combo-option .combo-hint {
    display: block;
    font-size: .7rem;
    color: var(--c-text-subtle);
}
.combo-empty {
    padding: .5rem .55rem;
    font-size: .78rem;
    color: var(--c-text-subtle);
}

.form-check-input {
    border-color: var(--c-border-strong);
    background-color: var(--c-surface);
}
.form-check-input:checked {
    background-color: var(--c-accent);
    border-color: var(--c-accent);
}
.form-check-input:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-soft);
}
.form-check-label { font-size: .8125rem; color: var(--c-text); }

/* -----------------------------------------------------------
   Toggle switch — for settings that are genuinely on/off policy,
   where a tick box reads as "I have selected this" rather than
   "this is currently in force".

   The input stays a real checkbox, just visually hidden, so keyboard
   focus, screen readers and form posting all behave normally.
   ----------------------------------------------------------- */
.switch {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    cursor: pointer;
}

/* Visually hidden, not display:none — that would drop it from the tab order. */
.switch > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.switch .track {
    flex: 0 0 auto;
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: var(--c-border-strong);
    transition: background .15s ease;
}

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

.switch > input:checked + .track { background: var(--c-accent); }
.switch > input:checked + .track::after { transform: translateX(16px); }

.switch > input:focus-visible + .track {
    box-shadow: 0 0 0 3px var(--c-accent-soft);
}

.switch > input:disabled + .track {
    opacity: .5;
    cursor: not-allowed;
}

.switch .switch-label {
    font-size: .8125rem;
    color: var(--c-text);
}

@media (prefers-reduced-motion: reduce) {
    .switch .track,
    .switch .track::after { transition: none; }
}

/* Filter bar */
.filters {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: .75rem .9rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
}
.filters .row { --bs-gutter-x: .6rem; --bs-gutter-y: .5rem; }

/* ============================================================================
   Alerts / callouts
   ========================================================================== */

.callout {
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-text-subtle);
    background: var(--c-surface);
    border-radius: var(--r-sm);
    padding: .75rem .95rem;
    font-size: .8125rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
}
.callout-title { font-weight: 600; margin-bottom: .15rem; }

.callout-accent { border-left-color: var(--c-accent); background: var(--c-accent-soft); }
.callout-pos    { border-left-color: var(--c-pos);    background: var(--c-pos-soft); }
.callout-neg    { border-left-color: var(--c-neg);    background: var(--c-neg-soft); }
.callout-warn   { border-left-color: var(--c-warn);   background: var(--c-warn-soft); }
.callout-info   { border-left-color: var(--c-info);   background: var(--c-info-soft); }

/* Bootstrap alert fallbacks, themed */
.alert {
    border-radius: var(--r-sm);
    font-size: .8125rem;
    border: 1px solid var(--c-border);
    border-left-width: 3px;
    padding: .7rem .9rem;
}
.alert-info    { background: var(--c-info-soft);  color: var(--c-text); border-left-color: var(--c-info); }
.alert-success { background: var(--c-pos-soft);   color: var(--c-text); border-left-color: var(--c-pos); }
.alert-danger  { background: var(--c-neg-soft);   color: var(--c-text); border-left-color: var(--c-neg); }
.alert-warning { background: var(--c-warn-soft);  color: var(--c-text); border-left-color: var(--c-warn); }
.alert-light   { background: var(--c-surface-2);  color: var(--c-text-muted); }

/* ============================================================================
   Toasts
   ========================================================================== */

.toast-stack {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.toast-item {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-accent);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-lg);
    padding: .7rem .9rem;
    font-size: .8125rem;
    min-width: 280px;
    max-width: 420px;
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    animation: toast-in .22s cubic-bezier(.2,.9,.3,1);
}
.toast-item.pos  { border-left-color: var(--c-pos); }
.toast-item.neg  { border-left-color: var(--c-neg); }
.toast-item.warn { border-left-color: var(--c-warn); }
.toast-item .close {
    margin-left: auto; background: none; border: 0;
    color: var(--c-text-subtle); cursor: pointer; padding: 0 .1rem;
    line-height: 1;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* ============================================================================
   Empty states — never show a blank box
   ========================================================================== */

.empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--c-text-muted);
}
.empty .glyph {
    width: 46px; height: 46px;
    border-radius: var(--r-md);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    display: grid; place-items: center;
    margin: 0 auto .85rem;
    font-size: 1.25rem;
    color: var(--c-text-subtle);
}
.empty h3 { font-size: .9375rem; margin-bottom: .3rem; color: var(--c-text); }
.empty p { font-size: .8125rem; margin: 0 auto 1rem; max-width: 380px; }

/* ============================================================================
   Tabs (client workspace)
   ========================================================================== */

.tabs {
    display: flex;
    gap: .15rem;
    border-bottom: 1px solid var(--c-border);
    margin-bottom: 1.35rem;

    /* overflow-x:auto alone makes overflow-y compute to auto as well, and the
       -1px margin on .tab (which lets the active underline sit on this border)
       overflows by exactly that pixel - enough to summon a vertical scrollbar.
       Pin the y axis shut. */
    overflow-x: auto;
    overflow-y: hidden;

    /* Only show the horizontal bar when the tabs genuinely don't fit. */
    scrollbar-width: thin;
}
.tabs::-webkit-scrollbar { height: 4px; }
.tabs::-webkit-scrollbar-thumb {
    background: var(--c-border-strong);
    border-radius: 4px;
}
.tabs::-webkit-scrollbar-track { background: transparent; }
.tab {
    padding: .55rem .85rem;
    font-size: .8125rem;
    font-weight: 550;
    color: var(--c-text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.tab:hover { color: var(--c-text); text-decoration: none; }
.tab.active { color: var(--c-accent); border-bottom-color: var(--c-accent); }
.tab .count {
    font-size: .7rem; font-weight: 600;
    background: var(--c-surface-2); color: var(--c-text-muted);
    border-radius: 20px; padding: 0 .38rem;
    font-variant-numeric: tabular-nums;
}
.tab.active .count { background: var(--c-accent-soft); color: var(--c-accent); }
.tab .count.alert { background: var(--c-neg-soft); color: var(--c-neg); }

/* ============================================================================
   Progress / meter
   ========================================================================== */

.meter {
    height: 5px;
    border-radius: 20px;
    background: var(--c-surface-2);
    overflow: hidden;
}
.meter > span {
    display: block;
    height: 100%;
    background: var(--c-accent);
    border-radius: 20px;
}
.meter.pos > span  { background: var(--c-pos); }
.meter.warn > span { background: var(--c-warn); }
.meter.neg > span  { background: var(--c-neg); }

/* Profit & loss statement (vertical): section headers, subtotals, net line. */
table.data.pnl tbody tr:hover { background: transparent; }
table.data.pnl tbody tr:not(.pnl-head):not(.pnl-subtotal):not(.pnl-net):not(.pnl-spacer):hover {
    background: var(--c-surface-hover);
}
.pnl-section-title {
    font-weight: 700;
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: .05em;
}
.pnl-head td { border-bottom: 0; padding-bottom: .3rem; }
.pnl-subtotal td { border-top: 1px solid var(--c-border-strong); border-bottom: 0; font-weight: 650; }
.pnl-subtotal td.amount { font-weight: 750; }
.pnl-spacer td { height: 1rem; border: 0; padding: 0; }
.pnl-net td {
    border-top: 2px solid var(--c-border-strong);
    border-bottom: 0;
    font-weight: 700;
    padding-top: .7rem;
    padding-bottom: .7rem;
}
.pnl-net.pos td.amount { color: var(--c-pos); }
.pnl-net.neg td.amount { color: var(--c-neg); }
.pnl-margin { text-align: right; font-size: .75rem; font-weight: 500; color: var(--c-text-subtle); }
.pnl-bar { vertical-align: middle; }
.pnl-bar .meter { margin: 0; }

/* ============================================================================
   Auth pages (centred, no shell)
   ========================================================================== */

.auth-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
    background: var(--c-bg);
}
.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    padding: 1.85rem;
}
.auth-brand {
    display: flex; align-items: center; justify-content: center;
    gap: .55rem; margin-bottom: 1.35rem;
    font-weight: 650; font-size: 1.05rem;
}
.auth-brand .mark {
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--c-accent); color: var(--c-accent-text);
    display: grid; place-items: center; font-weight: 700; font-size: .82rem;
}
/* The logo is a dark-text wordmark on white, so it sits in a white "chip" to stay
   legible on any theme. "Admin" keeps the operator console visually distinct. */
.auth-logo {
    height: 40px; width: auto;
    background: #fff;
    padding: 8px 14px;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.auth-suffix { font-weight: 650; font-size: .95rem; color: var(--c-text-muted); }

/* ============================================================================
   Keyboard shortcut hints
   ========================================================================== */

kbd {
    font-family: var(--font-mono);
    font-size: .68rem;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-strong);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: .06rem .3rem;
    color: var(--c-text-muted);
}

.shortcut-bar {
    display: flex; gap: .9rem; flex-wrap: wrap;
    font-size: .72rem; color: var(--c-text-subtle);
    padding: .5rem .1rem 0;
}
.shortcut-bar span { display: inline-flex; align-items: center; gap: .28rem; }

/* ============================================================================
   Utilities
   ========================================================================== */

.stack   { display: flex; flex-direction: column; gap: 1rem; }
.row-gap { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.grow    { flex: 1; }
.divider { height: 1px; background: var(--c-border); margin: 1rem 0; }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================================
   Accessibility — honour a reduced-motion preference
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    .sidebar,
    .sidebar .label,
    .nav-item-link,
    .nav-collapse i {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================================
   Responsive — sidebar collapses on small screens
   ========================================================================== */

@media (max-width: 900px) {
    .sidebar {
        position: fixed;
        left: 0; top: 0;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: var(--shadow-lg);
    }
    .sidebar.open { transform: none; }
    .page { padding: 1.1rem 1rem 2.5rem; }
    .stats { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

@media (min-width: 901px) {
    /* The topbar only existed to hold the mobile menu button and the theme
       toggle. The toggle now lives in the sidebar, so on desktop the topbar is
       dead space - reclaim it. */
    .topbar { display: none; }
    .sidebar-toggle { display: none; }
}

/* -------------------------------------------------------------------------
   Statement coverage grid (gap detection on the client Overview)
   ------------------------------------------------------------------------- */
.cov-scroll { overflow-x: auto; }

.cov-grid { border-collapse: collapse; width: 100%; }
.cov-grid th,
.cov-grid td { text-align: center; padding: .25rem .3rem; font-size: .75rem; }
.cov-grid thead th { color: var(--c-text-subtle); font-weight: 600; }
.cov-grid td.cov-acc,
.cov-grid th.cov-acc { text-align: left; white-space: nowrap; font-weight: 600; padding-right: .75rem; }
.cov-grid td.cov-note,
.cov-grid th.cov-note { text-align: left; white-space: nowrap; padding-left: .75rem; font-size: .72rem; }

.cov-cell {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 3px;
    vertical-align: middle;
    background: var(--c-surface-hover);
    border: 1px solid var(--c-border);
}
.cov-covered { background: var(--c-pos); border-color: var(--c-pos); }
.cov-gap { background: var(--c-warn); border-color: var(--c-warn); }
.cov-pending { background: var(--c-surface-hover); border-color: var(--c-border); }

.cov-legend {
    display: flex;
    gap: 1.1rem;
    margin-top: .7rem;
    font-size: .72rem;
    color: var(--c-text-subtle);
    flex-wrap: wrap;
}
.cov-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.cov-legend .cov-cell { width: 12px; height: 12px; }

/* Inline seed-rule pattern editor. Only rendered for rules that match nothing,
   because editing a used seed rule would re-categorise other accountants' books. */
.rule-edit-form {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
}
.rule-edit-form input[name="pattern"] {
    font-family: var(--font-mono);
    font-size: .78rem;
    max-width: 18rem;
}
.rule-edit-form .btn { padding: .1rem .45rem; font-size: .72rem; }