/* ==========================================================================
   ChitPro — Premium design system
   ========================================================================== */
:root {
    /* Brand (indigo / violet) */
    --brand-50:  #eef2ff;
    --brand-100: #e0e7ff;
    --brand-200: #c7d2fe;
    --brand-300: #a5b4fc;
    --brand-400: #818cf8;
    --brand-500: #6366f1;
    --brand-600: #4f46e5;
    --brand-700: #4338ca;
    --brand-800: #3730a3;
    --brand-900: #312e81;

    --primary: var(--brand-600);
    --primary-hover: var(--brand-700);
    --accent: #f59e0b;
    --accent-soft: #fef3c7;

    /* Neutrals */
    --ink: #0f172a;
    --ink-soft: #1e293b;
    --muted: #64748b;
    --muted-2: #94a3b8;
    --line: #e6e8f0;
    --line-soft: #eef0f6;
    --surface: #f5f6fb;
    --card: #ffffff;

    /* Status */
    --success: #10b981;
    --success-soft: #d1fae5;
    --danger: #ef4444;
    --danger-soft: #fee2e2;
    --warning: #f59e0b;
    --warning-soft: #fef3c7;
    --info: #3b82f6;
    --info-soft: #dbeafe;

    /* Sidebar */
    --sidebar-w: 268px;
    --sidebar-bg: linear-gradient(185deg, #1b1740 0%, #14112e 55%, #0d0b20 100%);
    --sidebar-ink: #c7cce0;
    --sidebar-ink-dim: #8b90ad;
    --sidebar-active: #ffffff;

    /* Shape & depth */
    --radius: 16px;
    --radius-sm: 12px;
    --radius-xs: 8px;
    --radius-pill: 999px;
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, .06);
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-md: 0 6px 18px -4px rgba(16, 24, 40, .12), 0 2px 6px -2px rgba(16, 24, 40, .06);
    --shadow-lg: 0 24px 48px -12px rgba(16, 24, 40, .22);
    --topbar-h: 70px;

    /* Type scale — every size on the app resolves to one of these. Integers only: fractional px
       (the old 14.5/13.8/13.6/12.5/11.8/11.5/10.5) round differently across zoom levels and DPI,
       so the same label rendered a hair apart from machine to machine. */
    --text-2xs:  11px;   /* uppercase micro-labels */
    --text-xs:   12px;   /* column heads, captions, badges */
    --text-sm:   13px;   /* secondary lines under a value */
    --text-md:   14px;   /* table data, controls, buttons, nav */
    --text-base: 15px;   /* body prose */
    --text-lg:   16px;
    --text-xl:   18px;
    --text-2xl:  20px;
    --text-3xl:  24px;
    --text-4xl:  30px;
    --text-5xl:  36px;

    /* Spacing scale — a 4px grid. Before this the stylesheet used 31 different gaps
       (1,2,3,5,6,7,9,10,11,13,14,15,18,22,26,30,34,38,42,46...), so no two components were
       ever quite aligned. 1-3px stays literal: that is optical correction, not spacing. */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-14: 56px;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* No font-feature-settings here, on purpose. The self-hosted Inter is a latin subset and its
       character variants did not survive the subsetting, so asking for the tailed l (cv05) or the
       single-storey a (cv11) is a no-op. Measured in the browser at 200px: cv01, cv05 and cv11 each
       leave the glyph metrics untouched while "tnum" moves them 92.91px to 129.55px — the file does
       honour features, just not those. Restoring them means shipping a fuller Inter build.
       Tabular figures DO survive, and every register asks for them with font-variant-numeric. */
    background: var(--surface);
    color: var(--ink);
    font-size: var(--text-base);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 { letter-spacing: -.015em; color: var(--ink); font-weight: 650; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }

/* ====== App shell ====================================================== */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: var(--sidebar-bg);
    color: var(--sidebar-ink);
    position: fixed;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-5) var(--space-4);
}
.sidebar__logo {
    width: 40px; height: 40px;
    border-radius: var(--radius-sm);
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--brand-400), var(--brand-600));
    color: #fff; font-weight: 800; font-size: var(--text-2xl);
    box-shadow: 0 6px 16px rgba(79, 70, 229, .45);
}
/* An uploaded logo replaces the gradient initial. Company artwork is drawn for white, so keep a light
   tile under it rather than letting it sit on the dark sidebar; contain preserves any aspect ratio. */
.sidebar__logo--img {
    background: #fff;
    padding: var(--space-1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .28);
}
.sidebar__logo--img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

.sidebar__brand-name { color: #fff; font-weight: 700; font-size: var(--text-xl); line-height: 1.1; }
.sidebar__brand-sub { color: var(--sidebar-ink-dim); font-size: var(--text-xs); letter-spacing: .04em; text-transform: uppercase; }

/* Company-logo preview on the Companies form — same light-tile reasoning as the sidebar mark. */
.logo-preview {
    display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
    min-height: 74px; padding: var(--space-2) var(--space-3);
    border: 1px dashed var(--line-soft); border-radius: var(--radius-sm);
}
.logo-preview img {
    max-height: 54px; max-width: 190px; object-fit: contain;
    background: #fff; border-radius: var(--radius-xs); padding: var(--space-1);
}

.sidebar__nav { flex: 1 1 auto; overflow-y: auto; padding: var(--space-1) var(--space-3) var(--space-5); }
.sidebar__nav::-webkit-scrollbar { width: 6px; }
.sidebar__nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: var(--radius-xs); }

.nav-section { margin-top: var(--space-4); }
.nav-section__label {
    font-size: var(--text-2xs); font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--sidebar-ink-dim);
    padding: 0 var(--space-3) var(--space-2);
}

.nav-item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2) var(--space-3); margin: 2px 0;
    border-radius: var(--radius-sm);
    color: var(--sidebar-ink);
    font-weight: 500; font-size: var(--text-md);
    position: relative;
    transition: background .15s, color .15s;
}
.nav-item i { font-size: var(--text-xl); width: 20px; text-align: center; color: var(--sidebar-ink-dim); transition: color .15s; }
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item:hover i { color: var(--brand-300); }
.nav-item.active { background: rgba(99,102,241,.18); color: #fff; }
.nav-item.active i { color: var(--brand-300); }
.nav-item.active::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 22px; border-radius: 0 4px 4px 0;
    background: linear-gradient(var(--brand-300), var(--brand-500));
}
.nav-item .badge { margin-left: auto; }

/* ====== Main column ==================================================== */
.main {
    flex: 1 1 auto;
    margin-left: var(--sidebar-w);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    height: var(--topbar-h);
    position: sticky; top: 0; z-index: 1030;
    display: flex; align-items: center; gap: var(--space-4);
    padding: 0 var(--space-6);
    background: rgba(255,255,255,.82);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
}
.topbar__title { font-size: var(--text-2xl); font-weight: 680; margin: 0; }
.topbar__subtitle { font-size: var(--text-xs); color: var(--muted); margin: 0; }
.topbar__spacer { flex: 1 1 auto; }

.topbar__search {
    display: flex; align-items: center; gap: var(--space-2);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); min-width: 260px; color: var(--muted);
}
.topbar__search input { border: 0; background: transparent; outline: none; width: 100%; font-size: var(--text-sm); color: var(--ink); }

.icon-btn {
    width: 40px; height: 40px; border-radius: var(--radius-sm);
    display: grid; place-items: center; border: 1px solid var(--line);
    background: #fff; color: var(--ink-soft); cursor: pointer; position: relative;
    transition: background .15s, border-color .15s;
}
.icon-btn:hover { background: var(--surface); border-color: var(--brand-200); }
.icon-btn .dot { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); border: 2px solid #fff; }

.menu-toggle { display: none; }

/* User chip */
.user-chip { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; padding: var(--space-1) var(--space-1) var(--space-1) var(--space-1); border-radius: var(--radius-sm); }
.user-chip:hover { background: var(--surface); }
.avatar {
    width: 38px; height: 38px; border-radius: var(--radius-sm); flex: 0 0 38px;
    display: grid; place-items: center; font-weight: 650; font-size: var(--text-md); color: #fff;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
}
.avatar--sm { width: 30px; height: 30px; flex-basis: 30px; font-size: var(--text-xs); border-radius: var(--radius-xs); }
.user-chip__name { font-size: var(--text-sm); font-weight: 620; line-height: 1.15; }
.user-chip__role { font-size: var(--text-xs); color: var(--muted); }

/* ---- Theme switcher (built at runtime by js/theme.js) ---- */
/* The light/dark toggle and the colour-scheme picker are injected into the topbar rather than
   written into the markup, so their styling lives here — without it the picker has no collapsed
   state and every swatch renders at once. */
.theme-toggle,
.color-scheme-btn {
    width: 40px; height: 40px; border-radius: var(--radius-sm);
    display: grid; place-items: center; border: 1px solid var(--line);
    background: #fff; color: var(--ink-soft); cursor: pointer;
    font-size: var(--text-lg); line-height: 1; padding: 0;
    transition: background .15s, border-color .15s, color .15s;
}
.theme-toggle:hover,
.color-scheme-btn:hover { background: var(--surface); border-color: var(--brand-200); }
.theme-toggle:focus-visible,
.color-scheme-btn:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }

.color-scheme-menu { position: relative; display: inline-flex; }

.color-scheme-dropdown {
    /* Collapsed by default — this is what .show toggles against. */
    display: none;
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 1040;
    min-width: 208px; padding: var(--space-1);
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    animation: popIn .16s cubic-bezier(.2, .8, .3, 1);
}
.color-scheme-dropdown.show { display: block; }
/* theme.js also sets `hidden`; this keeps the rule above from overriding it, so the collapsed state
   holds even if the class and the attribute ever disagree. */
.color-scheme-dropdown[hidden] { display: none; }

.color-scheme-option {
    display: block; width: 100%; text-align: left;
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-xs);
    border: 0; border-left: 3px solid currentColor;   /* colour comes from the inline style theme.js sets */
    background: transparent; color: var(--ink-soft);
    font: inherit; font-size: var(--text-sm); cursor: pointer;
    transition: background .15s, color .15s;
}
.color-scheme-option + .color-scheme-option { margin-top: 2px; }
.color-scheme-option:hover { background: var(--surface); }
.color-scheme-option.active { background: var(--brand-50); color: var(--brand-600); font-weight: 600; }

/* Below the tablet breakpoint the topbar is already tight — the picker is a preference, not a
   task, so it gives up its space first. The same choice is available in the user menu. */
@media (max-width: 900px) {
    .theme-toggle, .color-scheme-menu { display: none; }
}

/* ====== Content ======================================================== */
.content { padding: var(--space-6) var(--space-6) var(--space-10); flex: 1 1 auto; }
.page-head { margin-bottom: var(--space-5); }
.page-head h1 { font-size: var(--text-3xl); margin: 0 0 3px; }
.page-head p { color: var(--muted); margin: 0; font-size: var(--text-sm); }

/* ====== Cards ========================================================== */
.card {
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.card-header { background: transparent; border-bottom: 1px solid var(--line-soft); padding: var(--space-4) var(--space-5); font-weight: 650; }
.card-body { padding: var(--space-5); }

.stat-card {
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
    position: relative;
    overflow: hidden;
    transition: transform .18s, box-shadow .18s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-card__icon {
    width: 46px; height: 46px; border-radius: var(--radius-sm);
    display: grid; place-items: center; font-size: var(--text-3xl); margin-bottom: var(--space-3);
}
.stat-card__label { color: var(--muted); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.stat-card__value { font-size: var(--text-4xl); font-weight: 720; letter-spacing: -.02em; margin: var(--space-1) 0 var(--space-1); font-variant-numeric: tabular-nums; }
.stat-card__trend { font-size: var(--text-xs); font-weight: 600; display: inline-flex; align-items: center; gap: var(--space-1); }
.trend-up { color: var(--success); }
.trend-down { color: var(--danger); }

.tint-indigo { background: var(--brand-50); color: var(--brand-600); }
.tint-emerald { background: var(--success-soft); color: var(--success); }
.tint-amber { background: var(--warning-soft); color: var(--warning); }
.tint-rose { background: var(--danger-soft); color: var(--danger); }
.tint-blue { background: var(--info-soft); color: var(--info); }

/* ====== Buttons ======================================================== */
.btn { border-radius: var(--radius-sm); font-weight: 600; font-size: var(--text-md); padding: var(--space-2) var(--space-4); transition: all .15s; }
.btn-brand {
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    border: none; color: #fff; box-shadow: 0 6px 16px -4px rgba(79,70,229,.5);
}
.btn-brand:hover { color: #fff; filter: brightness(1.06); box-shadow: 0 10px 22px -6px rgba(79,70,229,.6); }
.btn-soft { background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-100); }
.btn-soft:hover { background: var(--brand-100); color: var(--brand-800); }
.btn-ghost { background: #fff; color: var(--ink-soft); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--surface); border-color: var(--brand-200); }

/* ====== Badges ========================================================= */
.badge-soft { font-weight: 600; padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); font-size: var(--text-xs); }
.badge-success { background: var(--success-soft); color: #047857; }
.badge-danger { background: var(--danger-soft); color: #b91c1c; }
.badge-warning { background: var(--warning-soft); color: #b45309; }
.badge-info { background: var(--info-soft); color: #1d4ed8; }
.badge-muted { background: #f1f5f9; color: var(--muted); }

/* ====== Tables ========================================================= */
.table-premium { width: 100%; border-collapse: separate; border-spacing: 0; }
.table-premium thead th {
    text-align: left; font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted); padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--line); background: var(--surface);
}
.table-premium tbody td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line-soft); font-size: var(--text-md); vertical-align: middle; }
.table-premium tbody tr:hover { background: var(--brand-50); }
.table-premium tbody tr:last-child td { border-bottom: none; }

/* ====== Forms ========================================================== */
.form-label { font-weight: 600; font-size: var(--text-sm); color: var(--ink-soft); margin-bottom: var(--space-1); }
.form-control, .form-select {
    border-radius: var(--radius-sm); border: 1px solid var(--line); padding: var(--space-2) var(--space-3); font-size: var(--text-md);
    background: #fff; transition: border-color .15s, box-shadow .15s;
}
.form-control:hover, .form-select:hover { border-color: var(--brand-300); }
.form-control:focus, .form-select:focus {
    border-color: var(--brand-400); box-shadow: 0 0 0 4px var(--brand-100);
}
/* Browsers paint their own pale-blue over an autofilled field and ignore background-color;
   a full-bleed inset shadow is the only way to keep the field on-palette. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:active {
    -webkit-text-fill-color: var(--ink);
    -webkit-box-shadow: 0 0 0 1000px var(--card) inset;
    caret-color: var(--ink);
    transition: background-color 5000s ease-in-out 0s;
}
.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ink);
    -webkit-box-shadow: 0 0 0 1000px var(--card) inset, 0 0 0 4px var(--brand-100);
}

.input-icon { position: relative; }
/* direct child only — a trailing action button carries its own icon that must not be
   dragged to the left edge by this rule */
.input-icon > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted-2); font-size: var(--text-xl); pointer-events: none; }
.input-icon .form-control { padding-left: var(--space-10); }
.input-icon--action .form-control { padding-right: var(--space-12); }
.input-icon__action {
    position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; display: grid; place-items: center;
    padding: 0; border: none; border-radius: var(--radius-xs); background: transparent;
    color: var(--muted-2); line-height: 1; cursor: pointer;
    transition: color .15s, background .15s;
}
.input-icon__action i { font-size: var(--text-xl); }
.input-icon__action:hover { color: var(--ink-soft); background: var(--surface); }
.input-icon__action:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 1px; color: var(--ink-soft); }

/* ====== Auth pages ===================================================== */
.auth-wrap { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 100vh; }
.auth-brand {
    position: relative; color: #fff;
    background: linear-gradient(160deg, #2a2069 0%, #1a1545 50%, #0e0b26 100%);
    padding: clamp(32px, 4.8vh, 56px) clamp(28px, 4vw, 56px);
    display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-6);
    /* clip, not hidden: both contain the glow blobs, but `hidden` makes the panel a scroll
       container, which lets a short viewport crop the copy instead of growing the row */
    overflow: hidden;
    overflow: clip;
}
.auth-brand::before, .auth-brand::after {
    content: ""; position: absolute; border-radius: 50%; filter: blur(10px); opacity: .55;
}
.auth-brand::before { width: 360px; height: 360px; background: radial-gradient(circle, rgba(129,140,248,.5), transparent 65%); top: -90px; right: -80px; }
.auth-brand::after { width: 320px; height: 320px; background: radial-gradient(circle, rgba(245,158,11,.32), transparent 65%); bottom: -100px; left: -60px; }
.auth-brand > * { position: relative; z-index: 1; }
.auth-brand__logo { display: flex; align-items: center; gap: var(--space-3); font-weight: 700; font-size: var(--text-2xl); }
/* the global h1–h5 rule paints headings ink-dark; on this dark panel that is invisible */
.auth-brand__headline {
    color: #fff; font-size: clamp(27px, 2.5vw, 34px); font-weight: 720;
    line-height: 1.18; letter-spacing: -.02em; max-width: 460px;
}
.auth-brand__lead { color: #c5c9e6; font-size: var(--text-base); max-width: 420px; margin-top: var(--space-3); }
.auth-feature { display: flex; align-items: center; gap: var(--space-3); margin-top: clamp(12px, 1.7vh, 16px); color: #d7daf0; font-size: var(--text-md); }
.auth-feature i { color: var(--brand-300); font-size: var(--text-2xl); }
.auth-brand__legal { color: var(--sidebar-ink-dim); font-size: var(--text-sm); }

.auth-form-side { display: flex; align-items: center; justify-content: center; padding: clamp(28px, 5vh, 48px) 24px; background: var(--card); }
.auth-card { width: 100%; max-width: 410px; }
.auth-card h2 { font-size: var(--text-3xl); margin-bottom: var(--space-1); }
.auth-card .muted { color: var(--muted); margin-bottom: var(--space-6); }
/* the brand panel is hidden below 768px, so the card carries the mark and legal line there */
.auth-card__mark { display: none; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); font-weight: 700; font-size: var(--text-2xl); }
.auth-card__legal { display: none; margin: var(--space-6) 0 0; text-align: center; color: var(--muted-2); font-size: var(--text-xs); }

/* ====== Utilities ====================================================== */
.text-muted-2 { color: var(--muted) !important; }
.divider { height: 1px; background: var(--line-soft); margin: var(--space-4) 0; }
.soft-scroll::-webkit-scrollbar { height: 8px; width: 8px; }
.soft-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--radius-xs); }

.sidebar-backdrop { display: none; }

/* ====== Responsive ===================================================== */
@media (max-width: 992px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
    .main { margin-left: 0; }
    .menu-toggle { display: grid; }
    .topbar__search { display: none; }
    .sidebar-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 1035; }
}
@media (max-width: 768px) {
    .auth-wrap { grid-template-columns: 1fr; }
    .auth-brand { display: none; }
    .auth-card__mark, .auth-card__legal { display: flex; }
    .auth-card__legal { display: block; }
    .content { padding: var(--space-5) var(--space-4) var(--space-8); }
    .topbar { padding: 0 var(--space-4); }
    .user-chip__name, .user-chip__role { display: none; }
}

/* ====== Status banners ================================================= */
.status-banner {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); margin-bottom: var(--space-4);
    font-size: var(--text-md); font-weight: 500; border: 1px solid transparent;
}
.status-banner i { font-size: var(--text-xl); }
.status-banner__close { margin-left: auto; background: none; border: 0; font-size: var(--text-3xl); line-height: 1; color: inherit; opacity: .55; cursor: pointer; }
.status-banner__close:hover { opacity: 1; }
.status-banner--success { background: var(--success-soft); color: #047857; border-color: #a7f3d0; }
.status-banner--error { background: var(--danger-soft); color: #b91c1c; border-color: #fecaca; }
.status-banner--warning { background: var(--warning-soft); color: #b45309; border-color: #fde68a; }
.status-banner--info { background: var(--info-soft); color: #1d4ed8; border-color: #bfdbfe; }

/* ====== List toolbar =================================================== */
.list-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }

/* Bootstrap ships .form-select and .form-control at width:100%. As a flex item that resolves against
   the toolbar, not the control, so every filter claims a full row of its own and a three-filter bar
   renders as three stacked bars. In a toolbar a filter is as wide as its content and no wider; the
   cap keeps a select from stretching to its longest option when a tenant has 400 groups. */
.list-toolbar .form-select,
.list-toolbar .form-control { width: auto; max-width: 100%; }
.list-toolbar .form-select { max-width: 260px; }
.list-toolbar .form-check { margin-bottom: 0; }

/* ====== DataTables polish ============================================= */
.dt-container .dt-search { margin-bottom: var(--space-1); }
.dt-container .dt-search input {
    border-radius: var(--radius-sm) !important; border: 1px solid var(--line) !important;
    padding: var(--space-2) var(--space-3) !important; min-width: 240px; font-size: var(--text-sm);
}
.dt-container .dt-search input:focus { border-color: var(--brand-400) !important; box-shadow: 0 0 0 4px var(--brand-100) !important; outline: none; }
.dt-container .dt-info { color: var(--muted); font-size: var(--text-xs); padding-top: var(--space-3); }
.dt-container .dt-paging { padding-top: var(--space-2); }
.dt-container .pagination { margin: 0; gap: var(--space-1); }
.dt-container .page-link { border-radius: var(--radius-xs) !important; border: 1px solid var(--line); color: var(--ink-soft); padding: var(--space-1) var(--space-3); }
.dt-container .active > .page-link { background: var(--primary); border-color: var(--primary); color: #fff; }
.dt-container .page-link:hover { background: var(--surface); }

table.dataTable { border-collapse: separate !important; border-spacing: 0; width: 100% !important; }
table.dataTable thead th {
    text-align: left; font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted); padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--line) !important; background: var(--surface);
}
table.dataTable tbody td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line-soft) !important; font-size: var(--text-md); vertical-align: middle; }
table.dataTable tbody tr:hover td { background: var(--brand-50); }
table.dataTable.no-footer { border-bottom: 0 !important; }

/* ====== Row actions =================================================== */
.row-actions { display: inline-flex; gap: var(--space-1); }
.action-btn {
    width: 36px; height: 36px; border-radius: var(--radius-xs); display: inline-grid; place-items: center;
    border: 1px solid var(--line); background: #fff; color: var(--ink-soft); cursor: pointer; font-size: var(--text-base);
}
.action-btn:hover { background: var(--surface); border-color: var(--brand-200); color: var(--primary); }
.action-btn--danger:hover { color: var(--danger); border-color: #fecaca; background: var(--danger-soft); }
.action-btn[disabled] { opacity: .4; cursor: not-allowed; }

/* ====== Cell helpers ================================================== */
.cell-title { font-weight: 600; color: var(--ink); }
.cell-sub { font-size: var(--text-sm); color: var(--muted); }
.chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px var(--space-2); border-radius: var(--radius-xs); font-size: var(--text-xs); font-weight: 600; background: var(--brand-50); color: var(--brand-700); }
.chip-stack { display: flex; flex-wrap: wrap; gap: var(--space-1); }

/* ====== Forms ========================================================= */
.form-section { margin-bottom: var(--space-2); }
.form-section__title { font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: var(--space-1) 0 var(--space-3); }
.form-card { max-width: 1680px; }   /* forms fill the available width; capped so they don't stretch absurdly on ultra-wide screens */
.required:after { content: " *"; color: var(--danger); }

/* ====== Permission matrix ============================================= */
.perm-group { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0; margin-bottom: var(--space-3); overflow: hidden; }
.perm-group__head {
    display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4);
    background: var(--surface); border-bottom: 1px solid var(--line-soft);
}
.perm-group__head .form-check { margin: 0; }
.perm-group__title { font-weight: 650; }
.perm-group__count { margin-left: auto; font-size: var(--text-xs); color: var(--muted); }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); }
.perm-item { display: flex; align-items: flex-start; gap: var(--space-2); }
.perm-item label { font-size: var(--text-sm); cursor: pointer; }
.perm-item .perm-desc { font-size: var(--text-xs); color: var(--muted); }

/* ====== Empty state =================================================== */
.empty-state { text-align: center; padding: var(--space-12) var(--space-5); color: var(--muted); }
.empty-state i { font-size: var(--text-5xl); color: var(--muted-2); }

/* ====== Misc ========================================================== */
.form-switch .form-check-input { width: 2.6em; height: 1.4em; cursor: pointer; }
.form-switch .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.section-divider { display: flex; align-items: center; gap: var(--space-3); color: var(--muted); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin: var(--space-2) 0 var(--space-4); }
.section-divider::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }

/* ====== Analytics / reports =========================================== */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-4); }
.mini-stat { display: flex; flex-direction: column; gap: 2px; }
.mini-stat__label { font-size: var(--text-xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.mini-stat__value { font-size: var(--text-2xl); font-weight: 720; letter-spacing: -.02em; }
.mini-stat__sub { font-size: var(--text-xs); color: var(--muted); }

/* horizontal progress meter used in efficiency tables */
.meter { height: 8px; border-radius: var(--radius-xs); background: var(--line-soft); overflow: hidden; min-width: 90px; }
.meter > span { display: block; height: 100%; border-radius: var(--radius-xs); background: linear-gradient(90deg, var(--brand-400), var(--brand-600)); }
.meter--good > span { background: linear-gradient(90deg, #34d399, #10b981); }
.meter--warn > span { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.meter--bad  > span { background: linear-gradient(90deg, #f87171, #ef4444); }

.report-canvas-wrap { position: relative; }

/* print letterhead — hidden on screen, shown on paper */
.print-only { display: none; }
.print-header__row { display: flex; justify-content: space-between; align-items: flex-start; }
.print-header__brand { font-size: var(--text-2xl); font-weight: 750; color: var(--ink); }
.print-header__title { font-size: var(--text-base); font-weight: 650; color: var(--brand-700); }
.print-header__logo { font-weight: 800; color: var(--brand-600); letter-spacing: -.02em; }
.print-header__meta { color: var(--muted); font-size: var(--text-xs); margin-top: var(--space-1); }
.print-header__sep { margin: 0 var(--space-1); }

/* ====== Print ========================================================= */
@media print {
    /* @page, with one sign, not two. The doubled sign made this a parse error, so the margins
       never applied and every report has printed with browser defaults. The original also asked
       for A4 landscape; that is deliberately left out, because the notices, receipts and staff
       letters have been laid out against portrait for months. Add it per report where a wide
       register actually needs it. */
    @page { margin: 14mm 12mm; }
    html, body { background: #fff !important; }
    body { font-size: var(--text-xs); }
    /* Two selector-less print-color-adjust declarations used to sit here. A declaration cannot
       live directly in a media block, so it was a parse error, and CSS error recovery swallowed
       the rule below it as part of the bad prelude — printouts silently lost every background
       fill. Verified in the DOM: 13 rules parsed where 14 were written. */
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

    .sidebar, .sidebar-backdrop, .topbar, .menu-toggle, .no-print,
    .dt-container .dt-search, .dt-container .dt-paging, .dt-container .dt-length,
    .dt-container .dt-info { display: none !important; }

    .main { margin-left: 0 !important; }
    .content { padding: 0 !important; }

    .print-only { display: block !important; }
    .print-header { border-bottom: 2px solid var(--brand-600); padding-bottom: var(--space-2); margin-bottom: var(--space-4); }

    .card { box-shadow: none !important; border: 1px solid #d7dae6 !important; break-inside: avoid; }
    .stat-card { box-shadow: none !important; border: 1px solid #d7dae6 !important; }
    .card, .stat-card, table { break-inside: avoid; }
    canvas { max-width: 100% !important; }
    a[href]:after { content: ""; }   /* don't print URLs after links */
    .crumbs, .rowmenu__btn { display: none !important; }
}

/* ==========================================================================
   Provider letterhead — printed quotations & invoices (software-provider header)
   ========================================================================== */
.doc-letterhead {
    display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-6);
    padding-bottom: var(--space-4); margin-bottom: var(--space-5); border-bottom: 2px solid var(--brand-600);
}
.doc-letterhead__brand { display: flex; align-items: center; gap: var(--space-3); }
.doc-letterhead__logo { width: 48px; height: 48px; flex: 0 0 48px; }
.doc-letterhead__logo-img { width: 48px; height: 48px; flex: 0 0 48px; object-fit: contain; border-radius: var(--radius-sm); }
.doc-letterhead__brandname { font-size: var(--text-3xl); font-weight: 800; letter-spacing: -.02em; color: var(--brand-700); line-height: 1.1; }
.doc-letterhead__tagline { font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.doc-letterhead__contact { text-align: right; font-size: var(--text-xs); color: var(--muted); line-height: 1.6; max-width: 280px; }
.doc-letterhead__ids { margin-top: 3px; font-weight: 600; color: var(--ink-soft); }
.doc-letterhead__sep { margin: 0 var(--space-1); color: var(--muted-2); }

/* Bill-to / document parties block */
.doc-parties { display: flex; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-4); }
.doc-party__label { font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: var(--space-1); }
.doc-party__name { font-weight: 700; color: var(--ink); }
.doc-party__line { font-size: var(--text-xs); color: var(--muted); }
.doc-meta { text-align: right; }
.doc-meta__row { font-size: var(--text-xs); color: var(--muted); }
.doc-meta__row strong { color: var(--ink); }

@media print {
    /* Vendor documents print portrait, unlike the landscape analytics reports. */
    .doc-print-page { }
    .doc-letterhead { break-inside: avoid; }
    .doc-parties { break-inside: avoid; }
}

/* ==========================================================================
   Enterprise UI components (breadcrumbs · KPI cards · row-action menu · pills)
   ========================================================================== */

/* Breadcrumbs in the topbar */
.crumbs { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--muted); margin: 0 0 2px; line-height: 1; }
.crumbs a { color: var(--muted); display: inline-flex; align-items: center; gap: var(--space-1); }
.crumbs a:hover { color: var(--primary); }
.crumbs .sep { color: var(--muted-2); font-size: var(--text-2xs); }
.crumbs .current { color: var(--ink-soft); font-weight: 600; }

/* KPI cards row (list-page metrics) */
.kpi-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.kpi {
    background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius);
    box-shadow: var(--shadow-xs); padding: var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2);
    transition: transform .15s, box-shadow .15s;
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi__top { display: flex; align-items: center; gap: var(--space-2); }
.kpi__icon { width: 36px; height: 36px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: var(--text-xl); flex: 0 0 36px; }
.kpi__label { font-size: var(--text-xs); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.kpi__value { font-size: var(--text-3xl); font-weight: 730; letter-spacing: -.02em; line-height: 1.1; }
.kpi__sub { font-size: var(--text-xs); color: var(--muted); }

/* Row-action overflow menu (⋯) */
.rowmenu { position: relative; display: inline-block; text-align: left; }
.rowmenu__btn {
    width: 36px; height: 36px; border-radius: var(--radius-xs); border: 1px solid var(--line); background: #fff;
    color: var(--ink-soft); cursor: pointer; display: inline-grid; place-items: center; font-size: var(--text-xl); line-height: 0;
}
.rowmenu__btn:hover, .rowmenu.open .rowmenu__btn { background: var(--surface); border-color: var(--brand-200); color: var(--primary); }
.rowmenu__list {
    position: absolute; right: 0; top: calc(100% + 5px); min-width: 190px; background: #fff;
    border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: var(--space-1); z-index: 70; display: none;
}
.rowmenu.open .rowmenu__list { display: block; animation: menuIn .12s ease; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.rowmenu__item {
    display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2) var(--space-2); border-radius: var(--radius-xs);
    font-size: var(--text-sm); font-weight: 500; color: var(--ink-soft); background: none; border: 0; text-align: left;
    cursor: pointer; text-decoration: none;
}
.rowmenu__item:hover { background: var(--surface); color: var(--primary); }
.rowmenu__item i { width: 16px; text-align: center; color: var(--muted); font-size: var(--text-base); }
.rowmenu__item:hover i { color: var(--primary); }
.rowmenu__item--danger { color: var(--danger); }
.rowmenu__item--danger i { color: var(--danger); }
.rowmenu__item--danger:hover { background: var(--danger-soft); color: #b91c1c; }
.rowmenu__divider { height: 1px; background: var(--line-soft); margin: var(--space-1) var(--space-1); }

/* Status pills (dot + label) */
.pill { display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px var(--space-3); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill-green { background: var(--success-soft); color: #047857; }
.pill-gray { background: #eef1f6; color: var(--muted); }
.pill-red { background: var(--danger-soft); color: #b91c1c; }
.pill-amber { background: var(--warning-soft); color: #b45309; }
.pill-blue { background: var(--info-soft); color: #1d4ed8; }
.pill-violet { background: var(--brand-50); color: var(--brand-700); }

/* Page toolbar (title + actions row used above content) */
.page-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.page-toolbar__title { font-size: var(--text-2xl); font-weight: 680; margin: 0; }
.page-toolbar__sub { font-size: var(--text-sm); color: var(--muted); margin: 0; }

/* Numeric / money helpers */
.mono { font-variant-numeric: tabular-nums; }
.amount-pos { color: var(--success); }
.amount-neg { color: var(--danger); }

/* Slightly tighter, cleaner data rows for dense enterprise tables */
.table-premium tbody td, table.dataTable tbody td { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.table-premium tbody tr, table.dataTable tbody tr { transition: background .12s; }

/* ==========================================================================
   Usability layer — command palette · toasts · shortcuts · nav · dark mode
   ========================================================================== */

/* ---- kbd hint chip ---- */
.kbd {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 19px; padding: 0 var(--space-1); font-size: var(--text-2xs); font-weight: 600;
    font-family: inherit; color: var(--muted); background: var(--surface);
    border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--radius-xs);
    line-height: 1; white-space: nowrap;
}

/* ---- Topbar search → palette trigger ---- */
.topbar__search { cursor: text; user-select: none; font-family: inherit; transition: border-color .15s, background .15s; }
.topbar__search:hover { border-color: var(--brand-200); background: #fff; }
.topbar__search-placeholder { flex: 1 1 auto; text-align: left; font-size: var(--text-sm); }
.topbar__search .kbd { margin-left: var(--space-1); }
.topbar__search-mobile { display: none; }

/* ---- Notifications dropdown ---- */
.notif-menu { border-radius: var(--radius); border-color: var(--line); min-width: 300px; padding: 0; overflow: hidden; }
.notif-menu__head { padding: var(--space-3) var(--space-4); font-weight: 650; border-bottom: 1px solid var(--line-soft); }
.notif-menu__empty { padding: var(--space-6) var(--space-4); text-align: center; color: var(--muted); }
.notif-menu__empty i { font-size: var(--text-3xl); color: var(--muted-2); display: block; margin-bottom: var(--space-2); }
.notif-menu__foot {
    display: flex; align-items: center; justify-content: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line-soft); font-weight: 600; font-size: var(--text-sm);
}
.notif-menu__foot:hover { background: var(--surface); }

/* ====== Command palette ================================================ */
.cmdk { position: fixed; inset: 0; z-index: 1090; display: flex; align-items: flex-start; justify-content: center; }
.cmdk[hidden] { display: none; }
.cmdk__backdrop { position: absolute; inset: 0; background: rgba(15, 19, 36, .55); backdrop-filter: blur(2px); animation: fadeIn .15s ease; }
.cmdk__panel {
    position: relative; width: min(640px, calc(100vw - 32px)); margin-top: 11vh;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); overflow: hidden; animation: popIn .16s cubic-bezier(.2, .8, .3, 1);
}
.cmdk__search { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-4); border-bottom: 1px solid var(--line-soft); }
.cmdk__search > i { font-size: var(--text-2xl); color: var(--muted); }
.cmdk__search input { flex: 1 1 auto; border: 0; outline: none; background: transparent; font-size: var(--text-lg); color: var(--ink); }
.cmdk__results { max-height: min(56vh, 440px); overflow-y: auto; padding: var(--space-2); }
.cmdk__group-label { font-size: var(--text-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); padding: var(--space-2) var(--space-3) var(--space-1); }
.cmdk__item {
    display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
    cursor: pointer; color: var(--ink-soft); text-decoration: none;
}
.cmdk__item-icon { width: 32px; height: 32px; flex: 0 0 32px; border-radius: var(--radius-xs); display: grid; place-items: center; font-size: var(--text-lg); background: var(--brand-50); color: var(--brand-600); }
.cmdk__item-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.cmdk__item-label { font-size: var(--text-md); font-weight: 550; }
.cmdk__item-sub { font-size: var(--text-xs); color: var(--muted-2); margin-top: 1px; }
.cmdk__item-section { font-size: var(--text-xs); color: var(--muted-2); white-space: nowrap; }
.cmdk__item.is-active { background: var(--brand-50); }
.cmdk__item.is-active .cmdk__item-icon { background: var(--brand-600); color: #fff; }
.cmdk__item.is-active .cmdk__item-section { color: var(--brand-600); }
.cmdk__empty { text-align: center; color: var(--muted); padding: var(--space-8) var(--space-4); }
.cmdk__empty i { font-size: var(--text-4xl); color: var(--muted-2); display: block; margin-bottom: var(--space-2); }
.cmdk__foot { display: flex; gap: var(--space-4); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--line-soft); font-size: var(--text-xs); color: var(--muted); background: var(--surface); }
.cmdk__foot .kbd { margin-right: 3px; }

/* ====== Shortcuts modal ================================================ */
.shortcuts {
    position: relative; width: min(620px, calc(100vw - 32px)); margin-top: 12vh;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg);
    animation: popIn .16s cubic-bezier(.2, .8, .3, 1); overflow: hidden;
}
.shortcuts__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line-soft); font-weight: 680; font-size: var(--text-lg); }
.shortcuts__body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-8); padding: var(--space-4) var(--space-5) var(--space-5); }
.shortcuts__group-title { font-size: var(--text-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: var(--space-1) 0 var(--space-2); }
.shortcuts__row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-1) 0; font-size: var(--text-sm); border-bottom: 1px solid var(--line-soft); }
.shortcuts__row > span:last-child { display: inline-flex; gap: var(--space-1); }
@media (max-width: 600px) { .shortcuts__body { grid-template-columns: 1fr; } }

/* ====== Toasts ========================================================= */
.toast-stack { position: fixed; top: 18px; right: 18px; z-index: 1100; display: flex; flex-direction: column; gap: var(--space-3); width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.toast-item {
    display: flex; align-items: flex-start; gap: var(--space-3); pointer-events: auto;
    background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--muted-2);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: var(--space-3) var(--space-3);
    animation: toastIn .26s cubic-bezier(.2, .8, .3, 1);
}
.toast-item.is-leaving { animation: toastOut .22s ease forwards; }
.toast-item__icon { font-size: var(--text-2xl); line-height: 1.3; }
.toast-item__body { flex: 1 1 auto; min-width: 0; }
.toast-item__title { font-weight: 650; font-size: var(--text-md); }
.toast-item__msg { font-size: var(--text-sm); color: var(--muted); margin-top: 1px; overflow-wrap: anywhere; }
.toast-item__close { background: none; border: 0; color: var(--muted-2); font-size: var(--text-lg); cursor: pointer; padding: 2px; line-height: 1; }
.toast-item__close:hover { color: var(--ink); }
.toast-item--success { border-left-color: var(--success); }
.toast-item--success .toast-item__icon { color: var(--success); }
.toast-item--error { border-left-color: var(--danger); }
.toast-item--error .toast-item__icon { color: var(--danger); }
.toast-item--info { border-left-color: var(--info); }
.toast-item--info .toast-item__icon { color: var(--info); }
.toast-item--warning { border-left-color: var(--warning); }
.toast-item--warning .toast-item__icon { color: var(--warning); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toastIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(16px); } }

/* ====== Sidebar — collapsible sections ================================ */
.nav-section__label--toggle { display: flex; align-items: center; cursor: pointer; user-select: none; border-radius: var(--radius-xs); transition: color .15s; }
.nav-section__label--toggle:hover { color: var(--sidebar-ink); }
.nav-section__chevron { margin-left: auto; font-size: var(--text-xs); transition: transform .2s ease; }
.nav-section.collapsed .nav-section__chevron { transform: rotate(-90deg); }
.nav-section__items { overflow: hidden; transition: max-height .26s ease, opacity .2s ease; max-height: 1200px; opacity: 1; }
.nav-section.collapsed .nav-section__items { max-height: 0; opacity: 0; }

/* ---- Categorised Reports menu (3-level nested sections) -------------- */
/* The parent wrap holds several sub-categories, so it needs more headroom. */
.nav-section--reports > .nav-section__items { max-height: 3000px; }
.nav-section .nav-section { margin-top: 0; }
/* Level-2 sub-category headers read as rows, not tiny uppercase labels. */
.nav-section .nav-section > .nav-section__label {
    text-transform: none; letter-spacing: 0;
    font-size: var(--text-xs); font-weight: 600;
    color: var(--sidebar-ink);
    padding: var(--space-2) var(--space-3); margin: 1px 0; border-radius: var(--radius-sm);
}
.nav-section .nav-section > .nav-section__label:hover { background: rgba(255,255,255,.06); color: #fff; }
/* Level-3 report links indented under their sub-category. */
.nav-section .nav-section .nav-item { padding-left: var(--space-8); font-size: var(--text-sm); }

/* ====== Sidebar — rail (collapsed) mode, desktop only ================= */
.nav-rail-toggle { display: grid; }
@media (min-width: 993px) {
    html.nav-rail { --sidebar-w: 78px; }
    html.nav-rail .sidebar__brand { justify-content: center; padding: var(--space-5) 0 var(--space-4); }
    html.nav-rail .sidebar__brand-text { display: none; }
    html.nav-rail .nav-section__label { display: none; }
    html.nav-rail .nav-section { margin-top: var(--space-1); padding-top: var(--space-2); border-top: 1px solid rgba(255, 255, 255, .07); }
    html.nav-rail .sidebar__nav > .nav-section:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
    html.nav-rail .nav-item { justify-content: center; padding: var(--space-3) 0; margin: 3px 0; }
    html.nav-rail .nav-item span { display: none; }
    html.nav-rail .nav-item i { width: auto; }
    html.nav-rail .nav-item.active::before { display: none; } /* centered icon + bg is enough in rail */
    html.nav-rail .nav-section.collapsed .nav-section__items { max-height: 1200px; opacity: 1; }
    /* Nested report sub-sections collapse to a flat icon list in rail mode. */
    html.nav-rail .nav-section .nav-section { margin-top: 0; padding-top: 0; border-top: 0; }
    html.nav-rail .nav-section .nav-section .nav-item { padding-left: 0; }
}

/* ====== Focus visibility (a11y polish) ================================ */
:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }
.nav-item:focus-visible { outline-offset: -2px; }
.cmdk__item:focus-visible { outline: none; }

@media (max-width: 992px) {
    .nav-rail-toggle { display: none; }
    .topbar__search-mobile { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ====== Dark theme ===================================================== */
html[data-theme="dark"] {
    --ink: #e7ebf6;
    --ink-soft: #c6cde1;
    --muted: #98a2be;
    --muted-2: #6e7795;
    --line: #2b3350;
    --line-soft: #232a44;
    --surface: #0d1222;
    --card: #161d33;
    --brand-50: #1f2748;
    --brand-100: #2b356099;
    --success-soft: rgba(16, 185, 129, .16);
    --danger-soft: rgba(239, 68, 68, .16);
    --warning-soft: rgba(245, 158, 11, .16);
    --info-soft: rgba(59, 130, 246, .16);
    --accent-soft: rgba(245, 158, 11, .16);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-md: 0 6px 18px -4px rgba(0, 0, 0, .55), 0 2px 6px -2px rgba(0, 0, 0, .4);
    --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, .7);
    color-scheme: dark;
}
html[data-theme="dark"] body { background: var(--surface); }
html[data-theme="dark"] .topbar { background: rgba(15, 20, 38, .82); }
html[data-theme="dark"] .topbar__search:hover { background: var(--card); }
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .action-btn,
html[data-theme="dark"] .rowmenu__btn,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .color-scheme-btn,
html[data-theme="dark"] .topbar__search { background: var(--card); color: var(--ink-soft); }
html[data-theme="dark"] .icon-btn:hover,
html[data-theme="dark"] .btn-ghost:hover,
html[data-theme="dark"] .action-btn:hover,
html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .color-scheme-btn:hover,
html[data-theme="dark"] .rowmenu__btn:hover { background: #1d2541; }
html[data-theme="dark"] .color-scheme-dropdown { background: var(--card); border-color: var(--line); }
html[data-theme="dark"] .color-scheme-option { color: var(--ink-soft); }
html[data-theme="dark"] .color-scheme-option:hover { background: #1d2541; }
html[data-theme="dark"] .color-scheme-option.active { background: #1d2541; color: var(--brand-300); }
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select { background: #10162a; border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .form-control::placeholder { color: var(--muted-2); }
html[data-theme="dark"] .form-check-input { background-color: #10162a; border-color: var(--line); }
html[data-theme="dark"] .dropdown-menu { background: var(--card); border-color: var(--line); }
html[data-theme="dark"] .dropdown-item { color: var(--ink-soft); }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus { background: #1d2541; color: var(--ink); }
html[data-theme="dark"] .dropdown-divider { border-color: var(--line); }
html[data-theme="dark"] .modal-content { background: var(--card); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { border-color: var(--line); }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
html[data-theme="dark"] .table { color: var(--ink-soft); --bs-table-bg: transparent; --bs-table-color: var(--ink-soft); }
html[data-theme="dark"] code { color: var(--brand-300); }
html[data-theme="dark"] .btn-soft { color: var(--brand-300); border-color: var(--brand-100); }
html[data-theme="dark"] .btn-soft:hover { color: #fff; background: var(--brand-100); }
html[data-theme="dark"] .chip { color: var(--brand-300); }
html[data-theme="dark"] .cmdk__item-icon { color: var(--brand-300); }
html[data-theme="dark"] .badge-success, html[data-theme="dark"] .pill-green { color: #6ee7b7; }
html[data-theme="dark"] .badge-danger, html[data-theme="dark"] .pill-red { color: #fca5a5; }
html[data-theme="dark"] .badge-warning, html[data-theme="dark"] .pill-amber { color: #fcd34d; }
html[data-theme="dark"] .badge-info, html[data-theme="dark"] .pill-blue { color: #93c5fd; }
html[data-theme="dark"] .scheme-card__note { color: #93c5fd; }
html[data-theme="dark"] .pill-violet { color: var(--brand-300); }
html[data-theme="dark"] .badge-muted, html[data-theme="dark"] .pill-gray { background: #222a44; color: var(--muted); }
html[data-theme="dark"] .status-banner--success { background: rgba(16, 185, 129, .14); color: #6ee7b7; border-color: rgba(16, 185, 129, .3); }
html[data-theme="dark"] .status-banner--error { background: rgba(239, 68, 68, .14); color: #fca5a5; border-color: rgba(239, 68, 68, .3); }
html[data-theme="dark"] .status-banner--warning { background: rgba(245, 158, 11, .14); color: #fcd34d; border-color: rgba(245, 158, 11, .3); }
html[data-theme="dark"] .status-banner--info { background: rgba(59, 130, 246, .14); color: #93c5fd; border-color: rgba(59, 130, 246, .3); }

/* ====== Dashboard liquidity cards (cash / bank / total) =============== */
.balance-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: var(--space-4); margin: var(--space-4) 0 2px; }
.balance-card { border-radius: var(--radius); padding: var(--space-4) var(--space-5); border: 1px solid transparent; box-shadow: var(--shadow-xs); transition: transform .15s, box-shadow .15s; }
.balance-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.balance-card__label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .045em; display: flex; align-items: center; gap: var(--space-2); }
.balance-card__label i { font-size: var(--text-base); }
.balance-card__value { font-size: var(--text-4xl); font-weight: 760; letter-spacing: -.02em; margin: var(--space-2) 0 var(--space-1); font-variant-numeric: tabular-nums; }
.balance-card__value.is-neg { color: var(--danger) !important; }
.balance-card__sub { font-size: var(--text-xs); font-weight: 500; opacity: .9; }

.balance-card--cash { background: linear-gradient(135deg, #fdf4cf, #fbe7a6); border-color: #f1d486; color: #97650c; }
.balance-card--cash .balance-card__value { color: #7a4906; }
.balance-card--bank { background: linear-gradient(135deg, #e8f0fe, #d3e2fc); border-color: #b4ccf5; color: #1d4ed8; }
.balance-card--bank .balance-card__value { color: #1e3a8a; }
.balance-card--total { background: linear-gradient(135deg, #dafae8, #bfeecf); border-color: #95ddb6; color: #047857; }
.balance-card--total .balance-card__value { color: #065f46; }

html[data-theme="dark"] .balance-card--cash { background: rgba(245, 158, 11, .13); border-color: rgba(245, 158, 11, .30); color: #fcd34d; }
html[data-theme="dark"] .balance-card--cash .balance-card__value { color: #fde68a; }
html[data-theme="dark"] .balance-card--bank { background: rgba(59, 130, 246, .14); border-color: rgba(59, 130, 246, .30); color: #93c5fd; }
html[data-theme="dark"] .balance-card--bank .balance-card__value { color: #bfdbfe; }
html[data-theme="dark"] .balance-card--total { background: rgba(16, 185, 129, .14); border-color: rgba(16, 185, 129, .30); color: #6ee7b7; }
html[data-theme="dark"] .balance-card--total .balance-card__value { color: #a7f3d0; }

/* ====== Import result panel =========================================== */
.import-errors { margin-bottom: var(--space-4); border-color: #fecaca; }
.import-errors .card-header { background: var(--danger-soft); border-bottom-color: #fecaca; }
.import-errors__list { margin: 0; padding-left: var(--space-4); max-height: 260px; overflow-y: auto; }
.import-errors__list li { font-size: var(--text-sm); color: var(--ink-soft); padding: 2px 0; }
html[data-theme="dark"] .import-errors { border-color: rgba(239, 68, 68, .35); }
html[data-theme="dark"] .import-errors .card-header { background: rgba(239, 68, 68, .14); border-bottom-color: rgba(239, 68, 68, .3); }

/* ====== Scheme card / brochure (FixedSchedule catalogue) ============== */
.scheme-card { max-width: 720px; margin: 0 auto; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: hidden; }
.scheme-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); color: #fff; background: linear-gradient(135deg, var(--brand-600), var(--brand-800)); }
.scheme-card__sub { font-size: var(--text-sm); opacity: .9; font-weight: 600; }
.scheme-card__value { font-size: var(--text-4xl); font-weight: 780; letter-spacing: -.02em; margin: 2px 0 var(--space-1); }
.scheme-card__meta { font-size: var(--text-xs); opacity: .92; }
.scheme-card__badge { background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .3); color: #fff; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.scheme-card__body { padding: var(--space-2) var(--space-2) var(--space-3); }
.scheme-table { border-collapse: separate; border-spacing: 0; }
.scheme-table thead th { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); }
.scheme-table tbody td { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); border-bottom: 1px solid var(--line-soft); }
.scheme-table tbody tr:nth-child(even) td { background: var(--surface); }
.scheme-table tfoot td { padding: var(--space-3) var(--space-3); font-size: var(--text-md); border-top: 2px solid var(--brand-200); }
.scheme-card__foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-1); font-size: var(--text-xs); color: var(--muted); font-weight: 600; }
.scheme-card__note { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-3) var(--space-3) 0; padding: var(--space-2) var(--space-3); font-size: var(--text-xs); line-height: 1.45; font-weight: 600; color: #1d4ed8; background: var(--info-soft); border-radius: var(--radius-sm); }
.scheme-card__note i { font-size: var(--text-base); line-height: 1.2; }

/* ====== CRM — pipeline Kanban board ================================== */
.kanban { display: flex; gap: var(--space-3); overflow-x: auto; padding: 2px 2px var(--space-3); align-items: flex-start; }
.kanban__col { flex: 0 0 286px; max-width: 286px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; max-height: calc(100vh - 240px); }
.kanban__col-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-3); border-bottom: 1px solid var(--line); }
.kanban__col-head .k-title { font-weight: 700; font-size: var(--text-sm); display: flex; align-items: center; gap: var(--space-2); }
.kanban__col-head .k-count { font-size: var(--text-2xs); font-weight: 700; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 1px var(--space-2); }
.kanban__col-sub { padding: 0 var(--space-3) var(--space-2); font-size: var(--text-xs); color: var(--muted); font-weight: 600; }
.kanban__col-body { padding: var(--space-2); overflow-y: auto; flex: 1; min-height: 80px; }
.kanban__col.drop-hover { outline: 2px dashed var(--brand-400); outline-offset: -5px; background: var(--brand-50); }
.kanban__card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-3); margin-bottom: var(--space-2); box-shadow: var(--shadow-xs); cursor: grab; transition: transform .12s, box-shadow .12s; text-decoration: none; display: block; color: inherit; }
.kanban__card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color: var(--brand-200); }
.kanban__card:active { cursor: grabbing; }
.kanban__card.dragging { opacity: .45; }
.kanban__card-name { font-weight: 650; font-size: var(--text-sm); color: var(--ink); }
.kanban__card-meta { font-size: var(--text-xs); color: var(--muted); margin-top: 2px; }
.kanban__card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1); margin-top: var(--space-2); }
.kanban__empty { font-size: var(--text-xs); color: var(--muted-2); text-align: center; padding: var(--space-3) var(--space-1); }

/* ====== CRM — activity timeline ===================================== */
.timeline { position: relative; padding-left: var(--space-6); margin: var(--space-1) 0; }
.timeline__item { position: relative; padding: 0 0 var(--space-4); }
.timeline__item:last-child { padding-bottom: 2px; }
.timeline__item::before { content: ""; position: absolute; left: -18px; top: 3px; width: 11px; height: 11px; border-radius: 50%; background: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-50); z-index: 1; }
.timeline__item::after { content: ""; position: absolute; left: -13px; top: 14px; bottom: 0; width: 2px; background: var(--line); }
.timeline__item:last-child::after { display: none; }
.timeline__item.is-due::before { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); }
.timeline__item.is-overdue::before { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.timeline__head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.timeline__title { font-weight: 650; font-size: var(--text-sm); }
.timeline__time { font-size: var(--text-xs); color: var(--muted); }
.timeline__body { font-size: var(--text-sm); color: var(--ink-soft); margin-top: 3px; white-space: pre-wrap; }

/* ====== CRM — detail key/value list + tabs ========================== */
.detail-list { margin: 0; }
.detail-list > div { display: flex; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--line-soft); }
.detail-list > div:last-child { border-bottom: 0; }
.detail-list dt { flex: 0 0 130px; margin: 0; font-size: var(--text-xs); font-weight: 600; color: var(--muted); }
.detail-list dd { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); }
.nav-tabs { border-bottom: 1px solid var(--line); gap: 2px; }
.nav-tabs .nav-link { border: none; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 600; font-size: var(--text-sm); padding: var(--space-2) var(--space-3); background: none; }
.nav-tabs .nav-link:hover { color: var(--ink); border-bottom-color: var(--line); }
.nav-tabs .nav-link.active { color: var(--brand-600); border-bottom-color: var(--brand-600); background: none; }
html[data-theme="dark"] .nav-tabs .nav-link.active { color: var(--brand-300); border-bottom-color: var(--brand-400); }

/* ====== Report filters (built by js/report-filters.js) =============== */
/* One recessed strip above the table: search, column dropdowns and the amount
   threshold on the left, the live row count and Clear pushed right by the spacer.
   Every control here is a Bootstrap .form-control/.form-select, which is width:100%
   by default — each needs an explicit width or the row stacks into a column. */
.report-filters {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
    margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3);
    background: var(--surface); border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    transition: background .15s, border-color .15s;
}
.report-filters.is-filtered { background: var(--brand-50); border-color: var(--brand-200); }

.report-filters__search { position: relative; flex: 1 1 210px; min-width: 168px; max-width: 300px; }
.report-filters__search > i {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    font-size: var(--text-sm); color: var(--muted-2); pointer-events: none;
}
.report-filters__search input { width: 100%; padding-left: var(--space-8); }

/* auto-width so a select is only as wide as its longest value, capped so one long
   facet ("Description") can't push the count chip onto its own line */
.report-filters__facet { flex: 0 1 auto; width: auto; min-width: 116px; max-width: 210px; }

.report-filters__num { display: inline-flex; align-items: center; gap: var(--space-2); }
.report-filters__num-label { font-size: var(--text-xs); font-weight: 600; color: var(--muted); white-space: nowrap; }
.report-filters__num input { width: 118px; }

.report-filters__spacer { flex: 1 1 auto; }

.report-filters__count {
    font-size: var(--text-xs); font-weight: 650; color: var(--muted); white-space: nowrap;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-pill);
    padding: 3px var(--space-3); font-variant-numeric: tabular-nums;
}
.report-filters__count.is-filtered { color: var(--brand-700); border-color: var(--brand-200); }

/* the DataTables variant carries dropdowns only — it sits above DataTables' own toolbar */
.report-filters--dt { margin-bottom: var(--space-2); }

/* Filtered-out rows and cards. !important so a row keeps its hidden state through
   .table-premium's own tbody rules and on to the printout. */
.report-filters__hidden { display: none !important; }

/* Off-page rather than filtered out. Kept separate from __hidden so that print can bring
   these back: a printed report is the whole filtered set, not whichever page was on screen.
   Rows the filter excluded stay excluded on paper, which is the point of filtering. */
.report-filters__paged-out { display: none !important; }

@media print {
    .report-filters__paged-out { display: table-row !important; }
}

/* ====== Report pager (built by js/report-filters.js) ================= */

.report-pager {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--space-2) var(--space-3);
    margin-top: var(--space-2); padding-top: var(--space-2);
    border-top: 1px solid var(--line-soft);
}

.report-pager__info { font-size: var(--text-xs); font-weight: 600; color: var(--muted); }

.report-pager__nav { display: inline-flex; align-items: center; gap: var(--space-1); }
.report-pager__pages { display: inline-flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }

.report-pager__btn {
    min-width: 32px; height: 32px; padding: 0 var(--space-2);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--text-sm); font-weight: 600; line-height: 1;
    color: var(--ink-soft); background: var(--surface);
    border: 1px solid var(--line-soft); border-radius: var(--radius-xs);
    cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}

/* Rendered as <a> by the server pager and <button> by the client one — both look the same. */
a.report-pager__btn { text-decoration: none; }
.report-pager__btn:hover:not(:disabled):not(.is-current):not(.is-disabled) { background: var(--brand-50); border-color: var(--brand-200); }
.report-pager__btn:disabled, .report-pager__btn.is-disabled { opacity: .45; cursor: default; }

.report-pager__btn.is-current {
    color: #fff; background: var(--primary); border-color: var(--primary); cursor: default;
}

.report-pager__gap { padding: 0 2px; color: var(--muted); font-size: var(--text-sm); }

.report-pager__size { display: inline-flex; align-items: center; gap: var(--space-2); }
.report-pager__size-label { font-size: var(--text-xs); font-weight: 600; color: var(--muted); white-space: nowrap; }
.report-pager__size select { width: auto; min-width: 74px; }

tr.report-filters__empty > td, .report-filters__empty-list {
    padding: var(--space-5) var(--space-4); text-align: center; font-style: italic; color: var(--muted); font-size: var(--text-sm);
}
.table-premium tbody tr.report-filters__empty:hover { background: none; }
/* the injected empty row is structurally last, so hand its borderless-last-row
   treatment back to the last real row */
.table-premium tbody tr:has(+ tr.report-filters__empty) td { border-bottom: none; }

/* Totals recomputed over the visible rows only — flagged so a filtered footer is never
   read as the report's grand total. */
.table-premium tfoot.is-filtered td, table.dataTable tfoot.is-filtered td {
    box-shadow: inset 0 2px 0 var(--brand-300);
}

/* Printed under the report so a filtered page explains itself on paper. */
.report-filters__applied { font-size: var(--text-xs); font-weight: 600; color: var(--muted); margin-bottom: var(--space-2); }
.report-filters__applied:empty { display: none !important; }

/* A running-balance column pauses while a filter hides rows — every figure in it is the one above
   plus this row's movement, so a hidden row makes the column step by an amount that isn't on
   screen. !important beats the .fw-semibold/.amount-neg the cell was rendered with; the figure
   itself is held on the cell and comes straight back when the filter is cleared. */
.report-filters__paused { color: var(--muted) !important; font-weight: 400 !important; font-style: italic; }

.report-filters__lock {
    display: flex; align-items: flex-start; gap: var(--space-2);
    margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3);
    background: var(--warning-soft); border: 1px solid #fcd9a0; border-radius: var(--radius-sm);
    font-size: var(--text-sm); line-height: 1.45; color: #8a5a09;
}
.report-filters__lock::before { content: "⚠"; line-height: 1.35; }

html[data-theme="dark"] .report-filters__lock { background: #3a2c10; border-color: #6b5320; color: #fcd34d; }

html[data-theme="dark"] .report-filters.is-filtered { border-color: var(--brand-100); }
html[data-theme="dark"] .report-filters__count.is-filtered { color: var(--brand-300); border-color: var(--brand-100); }

/* ====== Searchable picker (combobox) ==================================
   Upgrades a long <select> into a type-to-filter control. The native <select>
   stays in the DOM as the posted value, so model binding and jQuery-validation
   keep working untouched — it is only moved out of sight (1×1, not display:none,
   because unobtrusive validation skips fields it considers hidden).           */
.picker { position: relative; }
.picker__native {
    position: absolute; left: 0; bottom: 0; width: 1px; height: 1px;
    opacity: 0; pointer-events: none; border: 0; padding: 0; margin: 0;
}
.picker__control { position: relative; }
.picker__input { padding-right: var(--space-10); cursor: text; text-overflow: ellipsis; }
.picker__caret {
    position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
    font-size: var(--text-sm); color: var(--muted-2); pointer-events: none; transition: transform .15s ease;
}
.picker.is-open .picker__caret { transform: translateY(-50%) rotate(180deg); }
.picker__clear {
    position: absolute; right: 32px; top: 50%; transform: translateY(-50%);
    border: 0; background: transparent; color: var(--muted-2); font-size: var(--text-sm);
    line-height: 1; padding: var(--space-1); border-radius: var(--radius-xs); cursor: pointer; display: none;
}
.picker.has-value .picker__clear { display: block; }
.picker__clear:hover { color: var(--danger); background: var(--danger-soft); }

.picker__menu {
    position: absolute; z-index: 1080; left: 0; right: 0; top: calc(100% + 5px);
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md); padding: var(--space-1); max-height: 280px; overflow-y: auto;
    animation: menuIn .13s ease;
}
.picker__menu[hidden] { display: none; }
/* A picker inside a modal/offcanvas can be clipped by the parent's overflow;
   the menu is short enough that flipping it above the field is the better fix. */
.picker.is-up .picker__menu { top: auto; bottom: calc(100% + 5px); }

.picker__option {
    display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-xs); font-size: var(--text-md); color: var(--ink); cursor: pointer;
}
.picker__option-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker__option-tick { font-size: var(--text-sm); color: var(--brand-600); visibility: hidden; }
.picker__option[aria-selected="true"] .picker__option-tick { visibility: visible; }
.picker__option.is-active { background: var(--brand-50); }
.picker__option.is-disabled { opacity: .45; cursor: not-allowed; }
.picker__note { padding: var(--space-4) var(--space-3); text-align: center; font-size: var(--text-sm); color: var(--muted); }
.picker__note i { display: block; font-size: var(--text-3xl); color: var(--muted-2); margin-bottom: var(--space-1); }

html[data-theme="dark"] .picker__option.is-active { background: #1d2541; }
html[data-theme="dark"] .picker__option-tick { color: var(--brand-300); }

/* ====== Busy submit buttons ===========================================
   A form that is on its way to the server disables its submit control and says
   so. In an app that posts money this is not decoration: a second click on
   "Generate receipt" is a second receipt, a second journal and doubled cash.  */
.btn.is-busy { pointer-events: none; opacity: .72; }
/* the spinner stands in for the button's own icon while the post is in flight */
.btn.is-busy > i { display: none; }
.btn.is-busy > .btn-spinner {
    display: inline-block; width: 13px; height: 13px; margin-right: var(--space-2);
    vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; animation: btnSpin .6s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .btn.is-busy > .btn-spinner { animation-duration: 2s; }
    .picker__menu { animation: none; }
}

/* ====== Action inbox (topbar bell) ====================================
   The bell reports work that is actually waiting on this user — a mobile receipt
   nobody approved, a refund nobody released — rather than the fixed "all caught
   up" placeholder it used to show. Filled by initActionInbox() in chitpro.js.  */
.notif-menu { min-width: 340px; }
.notif-menu__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.notif-menu__loading { padding: var(--space-5) var(--space-4); text-align: center; color: var(--muted); font-size: var(--text-sm); }
.notif-menu__loading .btn-spinner {
    display: inline-block; width: 13px; height: 13px; margin-right: var(--space-2); vertical-align: -2px;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: btnSpin .6s linear infinite;
}

.inbox__btn { position: relative; overflow: visible; }
.inbox__badge {
    position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 var(--space-1);
    border-radius: var(--radius-xs); background: var(--danger); color: #fff; border: 2px solid var(--card);
    font-size: var(--text-2xs); font-weight: 700; line-height: 14px; text-align: center;
}
.inbox__badge[hidden] { display: none; }

.inbox__refresh {
    border: 0; background: transparent; color: var(--muted-2); font-size: var(--text-sm);
    padding: 3px var(--space-1); border-radius: var(--radius-xs); cursor: pointer; line-height: 1;
}
.inbox__refresh:hover { background: var(--surface); color: var(--ink-soft); }
.inbox__refresh.is-spinning i { display: inline-block; animation: btnSpin .7s linear infinite; }

.inbox__list { max-height: min(60vh, 420px); overflow-y: auto; padding: var(--space-1); }
.inbox__list[hidden] { display: none; }
.inbox__row {
    display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm); color: var(--ink); text-decoration: none;
}
.inbox__row:hover { background: var(--surface); color: var(--ink); }
.inbox__row-icon {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: var(--radius-sm);
    display: grid; place-items: center; font-size: var(--text-lg);
}
.inbox__row-body { flex: 1 1 auto; min-width: 0; }
.inbox__row-label { font-size: var(--text-sm); font-weight: 600; }
.inbox__row-hint { font-size: var(--text-xs); color: var(--muted-2); margin-top: 1px; }
.inbox__row-count {
    flex: 0 0 auto; min-width: 26px; height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-xs);
    font-size: var(--text-xs); font-weight: 700; display: grid; place-items: center;
}
.inbox__row--danger  .inbox__row-icon { background: var(--danger-soft);  color: var(--danger); }
.inbox__row--warning .inbox__row-icon { background: var(--warning-soft); color: var(--warning); }
.inbox__row--info    .inbox__row-icon { background: var(--brand-50);     color: var(--brand-600); }
.inbox__row--danger  .inbox__row-count { background: var(--danger-soft);  color: var(--danger); }
.inbox__row--warning .inbox__row-count { background: var(--warning-soft); color: var(--warning); }
.inbox__row--info    .inbox__row-count { background: var(--brand-50);     color: var(--brand-600); }

html[data-theme="dark"] .inbox__badge { border-color: var(--card); }
html[data-theme="dark"] .inbox__row:hover { background: #1d2541; }
html[data-theme="dark"] .inbox__refresh:hover { background: #1d2541; }
html[data-theme="dark"] .inbox__row--info .inbox__row-icon,
html[data-theme="dark"] .inbox__row--info .inbox__row-count { color: var(--brand-300); }

/* ====== Registers: figures, filter bars, sticky headers ================ */
/* Money has to line up column to column or a register is unreadable at a glance, so every figure on
   a data surface asks Inter for its tabular figures. Scoped to tables and stat values rather than
   set on body, because running prose still reads better with proportional ones. */
.table-premium tbody td,
.table-premium tfoot td,
table.dataTable tbody td,
table.dataTable tfoot td { font-variant-numeric: tabular-nums; }

/* A filter row reads as one control surface rather than three loose widgets adrift on the page. */
.filter-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
    padding: var(--space-2) var(--space-3);
}
.filter-bar__label {
    font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--muted-2); padding-right: 2px;
}
.filter-bar .form-select, .filter-bar .form-control { border-radius: var(--radius-xs); }
.filter-bar .form-check { margin-bottom: 0; }
.filter-bar__sep { width: 1px; align-self: stretch; background: var(--line-soft); margin: 1px 2px; }

/* One number is usually the reason anyone opened a page like this. The hero card gives it the room
   and the tiles beside it stay legible without competing for the same weight. */
.stat-card--hero { padding: var(--space-5) var(--space-6); height: 100%; }
.stat-card--hero::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px;
    background: linear-gradient(180deg, var(--danger), #fb923c);
}
.stat-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.stat-card--hero .stat-card__icon { margin-bottom: 0; width: 52px; height: 52px; font-size: var(--text-3xl); }
.stat-card--hero .stat-card__value { font-size: var(--text-5xl); line-height: 1.05; margin: var(--space-2) 0 var(--space-2); }
.stat-card__facts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.stat-card__fact { font-size: var(--text-xs); color: var(--muted); font-weight: 600; }
.stat-card__fact b { color: var(--ink-soft); font-weight: 700; font-variant-numeric: tabular-nums; }

.stat-card--tile { padding: var(--space-4); height: 100%; }
.stat-card--tile .stat-card__icon { width: 34px; height: 34px; font-size: var(--text-xl); border-radius: var(--radius-sm); margin-bottom: var(--space-2); }
.stat-card--tile .stat-card__value { font-size: var(--text-3xl); margin: 2px 0 var(--space-1); }
.stat-card--tile .stat-card__trend { display: block; font-size: var(--text-xs); line-height: 1.35; }

/* A 50-row page of a register runs several screens deep, and the column labels are the only thing
   that makes row 40 readable. Sticky resolves against the nearest scrollport, so this works only
   while nothing between the table and the page establishes one — which is why .table-sticky REPLACES
   .table-responsive instead of sitting inside it, and takes the horizontal scroll back only on the
   narrow screens where the table genuinely cannot fit. */
.table-sticky { position: relative; }
.table-sticky .table-premium thead th {
    position: sticky; top: var(--topbar-h); z-index: 5;
    background: var(--surface);
    box-shadow: 0 1px 0 var(--line), 0 10px 14px -14px rgba(16, 24, 40, .55);
}
@media (max-width: 1199.98px) {
    .table-sticky { overflow-x: auto; }
}
@media print {
    .table-sticky { overflow: visible; }
    .table-sticky .table-premium thead th { position: static; box-shadow: none; }
}

/* An absent value is not a value: it stays quiet rather than reading as data. */
.cell-empty { color: var(--muted-2); }

/* A status pill earns its colour twice — once in the fill, once in a dot that survives a mono print. */
.badge-dot { display: inline-flex; align-items: center; gap: var(--space-1); }
.badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 6px; }

/* ====== Touch targets ================================================== */
/* 36-40px is comfortable under a mouse and too small under a finger. Every platform guideline puts
   the floor at 44px, and ChitPro installs as a PWA, so on a coarse pointer the row actions, the
   topbar icons and the pager buttons all grow to it. Behind the media query on purpose: the dense
   desktop register should not pay for a phone. */
@media (pointer: coarse) {
    .action-btn,
    .rowmenu__btn,
    .icon-btn,
    .theme-toggle,
    .color-scheme-btn { width: 44px; height: 44px; }
    .report-pager__btn { min-width: 44px; height: 44px; }
    .form-check-input { width: 22px; height: 22px; }
}