/* =========================================================================
   ApnaLead Suite — application stylesheet

   Mobile-first. Base styles target a 360px viewport; every media query is
   min-width, with ONE documented exception (the table→card collapse, which is
   genuinely phone-only and cheaper to express as max-width).

   Theming is done entirely with custom properties. The light palette is
   defined on bare :root; dark redefines only the token values, under both
   prefers-color-scheme (for the "system" default) and [data-theme="dark"]
   (for the manual toggle). No colour is ever declared only inside a media
   query, so a value always exists.

   DENSITY
   -------
   This is a working tool people spend a day inside, so rows are tight and
   chrome is quiet. The 44px minimum applies to things a thumb must hit — nav
   items, buttons, the bottom bar — not to every input on a desktop form,
   where 40px reads as considered and 48px reads as a toy.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------- */

:root {
    /* Brand — indigo. One accent, used for interaction and nothing else, so
       "blue" always means "you can act on this". */
    --brand-700: #3730a3;
    --brand-600: #4338ca;
    --brand-500: #4f46e5;
    --brand-400: #6366f1;
    --brand-100: #e0e7ff;
    --brand-50:  #eef2ff;

    /* Tint used behind selected rows and active nav, so the accent can appear
       as a wash without a second hue. */
    --brand-wash: rgba(79, 70, 229, .08);

    /* Semantic. Text steps are darker than the fill steps: a badge needs a
       readable label on its own tinted background. */
    --success:     #15803d;
    --success-ink: #166534;
    --success-bg:  #dcfce7;
    --warning:     #b45309;
    --warning-ink: #92400e;
    --warning-bg:  #fef3c7;
    --danger:      #dc2626;
    --danger-ink:  #b91c1c;
    --danger-bg:   #fee2e2;
    --info:        #0369a1;
    --info-ink:    #075985;
    --info-bg:     #e0f2fe;

    /* Chart severity ramp.
       -------------------------------------------------------------------
       Ageing is ordered severity, so warning → critical is ONE hue getting
       darker (an ordinal ramp), not three separate warm hues. Amber-vs-orange
       is the classic mistake here: it measures ΔE 0.4 under deuteranopia — two
       bars a red-green reader cannot tell apart at all.

       "Not yet due" is deliberately neutral slate rather than green. Green
       against red is inseparable under protanopia, and "not overdue" is not a
       *good* state anyway — it is simply not a problem yet. Neutral-vs-red is
       a chroma difference, which survives every kind of colour blindness.

       Validated with the dataviz validator in --ordinal mode against both
       surfaces: monotone lightness, ΔL >= 0.06 per step, light end over 3:1.
       Every bar also carries its bucket name and its amount in text, so hue is
       never the only channel regardless. */
    --state-neutral:  #7b8798;
    --state-warning:  #dd7064;
    --state-serious:  #cf4a40;
    --state-critical: #a8241f;

    /* Kept separate from the ramp: green only ever means "collected", against
       indigo "invoiced" — a two-series pair that passes the categorical checks
       outright (ΔE 41.8 normal, 35.0 deutan). */
    --state-good:     #12915a;

    /* Surfaces — four planes: page, raised, sunken, and a hover wash. */
    --bg:         #f6f7f9;
    --surface:    #ffffff;
    --surface-2:  #f9fafb;
    --surface-3:  #f3f4f6;
    --border:     #e5e7eb;
    --border-strong: #d1d5db;

    /* Text. All pairings below meet WCAG AA on their stated surface. */
    --text:         #111827;
    --text-muted:   #6b7280;
    --text-subtle:  #9ca3af;
    --text-inverse: #ffffff;

    /* Elevation. Two-layer shadows — a tight contact shadow plus a soft
       ambient one — because a single large blur reads as a drop shadow from
       2012 rather than as a raised surface. */
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
    --shadow-md: 0 2px 4px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .08);
    --shadow-lg: 0 8px 16px rgba(16, 24, 40, .08), 0 20px 40px rgba(16, 24, 40, .12);

    --ring: 0 0 0 3px rgba(79, 70, 229, .28);

    /* Geometry */
    --radius-xs: 5px;
    --radius-sm: 7px;
    --radius:    10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    /* Spacing scale */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;

    /* Layout */
    --sidebar-w: 248px;
    --sidebar-w-collapsed: 72px;
    --topbar-h: 60px;
    --bottom-nav-h: 62px;

    /* The minimum comfortable touch target. Every interactive element
       inherits from this rather than hard-coding 44px in ten places. */
    --tap: 44px;

    /* Control height — desktop density. Distinct from --tap on purpose. */
    --control-h: 40px;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto,
            "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

    color-scheme: light;
}

/* Dark palette — token values only. Guarded so an explicit light choice wins
   over the OS preference. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --brand-700: #a5b4fc;
        --brand-600: #818cf8;
        --brand-500: #6366f1;
        --brand-400: #4f46e5;
        --brand-100: #312e81;
        --brand-50:  #1e1b4b;
        --brand-wash: rgba(129, 140, 248, .14);

        --success:     #4ade80;
        --success-ink: #86efac;
        --success-bg:  #052e16;
        --warning:     #fbbf24;
        --warning-ink: #fcd34d;
        --warning-bg:  #3b2607;
        --danger:      #f87171;
        --danger-ink:  #fca5a5;
        --danger-bg:   #3f1414;
        --info:        #38bdf8;
        --info-ink:    #7dd3fc;
        --info-bg:     #0b2c40;

        /* Chart colours are re-chosen for the dark surface, not flipped —
           the light steps sit too close to #131a24 to read. Same ordinal
           validation, run with --surface #131a24. */
        --state-neutral:  #6b7787;
        --state-warning:  #f2a094;
        --state-serious:  #e4695c;
        --state-critical: #cc4038;
        --state-good:     #35b47c;

        --bg:        #0b1017;
        --surface:   #131a24;
        --surface-2: #182029;
        --surface-3: #1e2733;
        --border:    #263141;
        --border-strong: #38455a;

        --text:        #e8ecf3;
        --text-muted:  #97a3b6;
        --text-subtle: #6b7789;
        --text-inverse: #0b1017;

        --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .5);
        --shadow-md: 0 2px 6px rgba(0, 0, 0, .5), 0 8px 20px rgba(0, 0, 0, .45);
        --shadow-lg: 0 12px 28px rgba(0, 0, 0, .55), 0 24px 56px rgba(0, 0, 0, .5);

        --ring: 0 0 0 3px rgba(129, 140, 248, .35);

        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --brand-700: #a5b4fc;
    --brand-600: #818cf8;
    --brand-500: #6366f1;
    --brand-400: #4f46e5;
    --brand-100: #312e81;
    --brand-50:  #1e1b4b;
    --brand-wash: rgba(129, 140, 248, .14);

    --success:     #4ade80;
    --success-ink: #86efac;
    --success-bg:  #052e16;
    --warning:     #fbbf24;
    --warning-ink: #fcd34d;
    --warning-bg:  #3b2607;
    --danger:      #f87171;
    --danger-ink:  #fca5a5;
    --danger-bg:   #3f1414;
    --info:        #38bdf8;
    --info-ink:    #7dd3fc;
    --info-bg:     #0b2c40;

    /* Same re-chosen chart steps as the prefers-color-scheme block above. */
    --state-neutral:  #6b7787;
    --state-warning:  #f2a094;
    --state-serious:  #e4695c;
    --state-critical: #cc4038;
    --state-good:     #35b47c;

    --bg:        #0b1017;
    --surface:   #131a24;
    --surface-2: #182029;
    --surface-3: #1e2733;
    --border:    #263141;
    --border-strong: #38455a;

    --text:        #e8ecf3;
    --text-muted:  #97a3b6;
    --text-subtle: #6b7789;
    --text-inverse: #0b1017;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .5);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, .5), 0 8px 20px rgba(0, 0, 0, .45);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, .55), 0 24px 56px rgba(0, 0, 0, .5);

    --ring: 0 0 0 3px rgba(129, 140, 248, .35);

    color-scheme: dark;
}

/* -------------------------------------------------------------------------
   2. Reset & base
   ---------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14.5px;
    line-height: 1.5;
    letter-spacing: -0.006em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    margin: 0 0 var(--sp-2);
    line-height: 1.25;
    font-weight: 640;
    letter-spacing: -0.018em;
}
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }
h4 { font-size: .9rem; }

.h2 { font-size: 1.25rem; font-weight: 640; letter-spacing: -0.018em; }
.h3 { font-size: 1rem; font-weight: 640; }

p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }

a {
    color: var(--brand-600);
    text-decoration: none;
    text-underline-offset: 2px;
}
a:hover { text-decoration: underline; }

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

hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-5) 0; }

code, pre { font-family: var(--font-mono); }

/* A single, consistent focus ring. Never remove it — keyboard users navigate
   the whole invoice form with it. */
:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

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

.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 100;
    padding: var(--sp-3) var(--sp-4);
    background: var(--brand-600);
    color: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}
.skip-link:focus { left: var(--sp-3); top: var(--sp-3); }

.text-muted   { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-right   { text-align: right; }
.text-nowrap  { white-space: nowrap; }
.d-block      { display: block; }
.d-inline     { display: inline; }
.mt-3         { margin-top: var(--sp-3); }

/* Monospace for identifiers. NO letter-spacing: a GSTIN rendered with tracking
   reads as "2 7 A A P F U…" — broken, rather than precise. */
.mono {
    font-family: var(--font-mono);
    font-size: .92em;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

/* Money and quantity columns line up only with tabular figures. */
.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* -------------------------------------------------------------------------
   3. App shell
   ---------------------------------------------------------------------- */

.app { min-height: 100vh; }

.app__body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app__main {
    flex: 1;
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding: var(--sp-4);
    /* Room for the bottom tab bar plus the iOS home indicator. */
    padding-bottom: calc(var(--bottom-nav-h) + var(--sp-5) + env(safe-area-inset-bottom, 0px));
}
.app__main:focus { outline: none; }

/* --- Topbar ------------------------------------------------------------ */

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-3);
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    backdrop-filter: saturate(1.6) blur(12px);
    -webkit-backdrop-filter: saturate(1.6) blur(12px);
    border-bottom: 1px solid var(--border);
}

/* color-mix is recent; a solid background is the fallback everywhere else. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .topbar { background: var(--surface); }
}

.topbar__title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 1rem;
    font-weight: 640;
    letter-spacing: -0.018em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar__search { display: none; }

.topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin-left: auto;
}

/* --- Sidebar ----------------------------------------------------------- */

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    width: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-right: 1px solid var(--border);
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
body.sidebar-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-lg); }

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    height: var(--topbar-h);
    padding: 0 var(--sp-3);
    border-bottom: 1px solid var(--border);
}

.sidebar__logo {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
    color: var(--text);
    font-weight: 640;
    letter-spacing: -0.018em;
}
.sidebar__logo:hover { text-decoration: none; }

.sidebar__mark {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(140deg, var(--brand-500), var(--brand-700));
    color: #fff;
    font-size: .7rem;
    font-weight: 750;
    letter-spacing: .02em;
}

.sidebar__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .92rem;
}

.sidebar__collapse {
    display: none;
    margin-left: auto;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-subtle);
    cursor: pointer;
}
.sidebar__collapse:hover { background: var(--surface-3); color: var(--text); }

.sidebar__nav {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--sp-3) var(--sp-2) var(--sp-4);
}

/* Group headings. Small, tracked, muted — a label for a region rather than a
   heading competing with the items under it. */
.sidebar__heading {
    margin: var(--sp-4) 0 var(--sp-1);
    padding: 0 var(--sp-3);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-subtle);
}
.sidebar__nav > .sidebar__heading:first-child { margin-top: 0; }

.sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--tap);
    padding: 0 var(--sp-3);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: .9rem;
    font-weight: 520;
    transition: background .12s ease, color .12s ease;
}
.sidebar__link:hover {
    background: var(--surface-3);
    color: var(--text);
    text-decoration: none;
}

/* The active item is a filled pill, not just coloured text — at a glance the
   eye finds the block, not the hue. */
.sidebar__link.active {
    background: var(--brand-wash);
    color: var(--brand-600);
    font-weight: 620;
}
.sidebar__link.active .sidebar__icon { color: var(--brand-600); }

.sidebar__link--pending { opacity: .4; pointer-events: none; }

.sidebar__icon {
    color: var(--text-subtle);
    font-size: 1.05rem;
}
.sidebar__link:hover .sidebar__icon { color: var(--text-muted); }

.sidebar__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar__footer {
    padding: var(--sp-2);
    border-top: 1px solid var(--border);
}

.sidebar__user {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2);
    border-radius: var(--radius-sm);
    min-width: 0;
}

.sidebar__user-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.sidebar__user-name {
    font-size: .85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar__user-role {
    font-size: .72rem;
    color: var(--text-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar__theme { justify-content: flex-start; gap: var(--sp-2); }

.sidebar-scrim {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(8, 12, 20, .55);
    backdrop-filter: blur(2px);
}
.sidebar-scrim[hidden] { display: none; }

/* --- Bottom navigation (phones) ---------------------------------------- */

.bottom-nav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 35;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: saturate(1.6) blur(12px);
    -webkit-backdrop-filter: saturate(1.6) blur(12px);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .bottom-nav { background: var(--surface); }
}

.bottom-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.bottom-nav__item { flex: 1; display: flex; }

.bottom-nav__link {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: var(--bottom-nav-h);
    padding: var(--sp-1) 2px;
    color: var(--text-subtle);
    font-size: .66rem;
    font-weight: 560;
}
.bottom-nav__link:hover { text-decoration: none; color: var(--text-muted); }
.bottom-nav__link .icon { font-size: 1.2rem; }

/* Active gets both a colour and a weight change, so the current tab is
   findable without relying on hue alone. */
.bottom-nav__link.active { color: var(--brand-600); font-weight: 680; }
.bottom-nav__link.is-disabled { opacity: .4; pointer-events: none; }

.bottom-nav__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* --- Page header -------------------------------------------------------- */

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.page-header__title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 660;
    letter-spacing: -0.022em;
}

.page-header__subtitle {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: .875rem;
}

.page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

/* -------------------------------------------------------------------------
   4. Buttons
   ---------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--control-h);
    padding: 0 var(--sp-4);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .875rem;
    font-weight: 580;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .06s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(.5px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

.btn--primary {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
    box-shadow: var(--shadow-xs);
}
.btn--primary:hover { background: var(--brand-500); border-color: var(--brand-500); }

.btn--ghost {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text);
    box-shadow: var(--shadow-xs);
}
.btn--ghost:hover { background: var(--surface-3); }

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

.btn--link {
    background: none;
    border: 0;
    padding: 0;
    min-height: 0;
    color: var(--brand-600);
    font-weight: 560;
    box-shadow: none;
}
.btn--link:hover { text-decoration: underline; }

.btn--sm {
    min-height: 32px;
    padding: 0 var(--sp-3);
    font-size: .8rem;
    border-radius: var(--radius-xs);
}

.btn--block { display: flex; width: 100%; }

.btn-icon {
    display: inline-grid;
    place-items: center;
    position: relative;
    width: var(--tap);
    height: var(--tap);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.btn-icon:hover { background: var(--surface-3); color: var(--text); }
.btn-icon .icon { font-size: 1.1rem; }

/* -------------------------------------------------------------------------
   5. Forms
   ---------------------------------------------------------------------- */

.field { margin-bottom: var(--sp-4); }

.label {
    display: block;
    margin-bottom: 6px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.006em;
}
.label__required { color: var(--danger); }

.input, .select, .textarea {
    display: block;
    width: 100%;
    min-height: var(--control-h);
    padding: 9px var(--sp-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .875rem;
    transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
    -webkit-appearance: none;
    appearance: none;
}

.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }

.input:hover, .select:hover, .textarea:hover { border-color: var(--text-subtle); }

.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: var(--ring);
}

.textarea { min-height: 84px; resize: vertical; line-height: 1.5; }

/* The native arrow is inconsistent across platforms; this one is ours and
   inherits the text colour. */
.select {
    padding-right: var(--sp-6);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-3) center;
    background-size: 15px;
}
.select::-ms-expand { display: none; }

.input:disabled, .select:disabled, .textarea:disabled,
.input[readonly], .textarea[readonly] {
    background: var(--surface-3);
    color: var(--text-muted);
    cursor: not-allowed;
}

.input.is-invalid, .select.is-invalid, .textarea.is-invalid {
    border-color: var(--danger);
}
.input.is-invalid:focus, .select.is-invalid:focus, .textarea.is-invalid:focus {
    box-shadow: 0 0 0 3px var(--danger-bg);
}

.input--sm {
    min-height: 34px;
    max-width: 9rem;
    margin-left: auto;
    padding: 5px var(--sp-2);
    font-size: .82rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.input--static {
    background: var(--surface-3);
    border-style: dashed;
    color: var(--text-muted);
}

.input--search {
    padding-left: var(--sp-6);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left var(--sp-3) center;
    background-size: 16px;
}

.field__error {
    display: block;
    margin-top: 5px;
    color: var(--danger);
    font-size: .78rem;
    font-weight: 520;
}

.field__hint {
    display: block;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: .78rem;
    line-height: 1.45;
}

/* Checkbox and radio — a real control, sized for a thumb, with the accent
   colour applied natively so no custom box has to be maintained. */
.checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 32px;
    font-size: .875rem;
    cursor: pointer;
}
.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    accent-color: var(--brand-600);
    cursor: pointer;
}

input[type="file"].input {
    padding: 7px var(--sp-3);
    line-height: 1.6;
}
input[type="file"]::file-selector-button {
    margin-right: var(--sp-3);
    padding: 5px var(--sp-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xs);
    background: var(--surface-3);
    color: var(--text);
    font: inherit;
    font-size: .8rem;
    font-weight: 560;
    cursor: pointer;
}

.form-grid {
    display: grid;
    gap: 0 var(--sp-4);
    grid-template-columns: 1fr;
}
.form-grid .field--full { grid-column: 1 / -1; }

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}

.inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: flex-end;
}

/* Sticky action bar for long forms. */
.sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    margin-top: var(--sp-4);
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .sticky-actions { background: var(--surface); }
}

/* -------------------------------------------------------------------------
   6. Cards
   ---------------------------------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    margin-bottom: var(--sp-4);
    overflow: hidden;
}

.card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.card__title {
    margin: 0;
    font-size: .95rem;
    font-weight: 640;
    letter-spacing: -0.012em;
}

/* Everything after the title in a header drifts right — so a card header is
   written title-first without a spacer div. */
.card__header > *:not(:first-child) { margin-left: auto; }
.card__header > .text-muted { font-size: .8rem; }

.card__body { padding: var(--sp-4); }

.card__footer {
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

.card__footer--actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
}
.card__footer--actions form { display: contents; }

/* A settings entry is its own card — the markup carries only .settings-card,
   so the surface has to be declared here rather than inherited from .card. */
.settings-card {
    display: block;
    height: 100%;
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.settings-card__title {
    display: block;
    font-weight: 620;
    color: var(--text);
    margin-bottom: 3px;
}
.settings-card__description {
    display: block;
    color: var(--text-muted);
    font-size: .82rem;
    line-height: 1.5;
}
a.settings-card:hover {
    text-decoration: none;
    border-color: var(--brand-400);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.empty-state {
    padding: var(--sp-7) var(--sp-4);
    text-align: center;
    color: var(--text-muted);
}
.empty-state p { margin-bottom: var(--sp-3); }
.empty-state p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   7. Tables
   ---------------------------------------------------------------------- */

.table-wrap { width: 100%; }

/* Only tables that genuinely cannot stack scroll sideways. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 46rem; }

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

.table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--sp-2) var(--sp-4);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 620;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}
.table thead th.num { text-align: right; }

.table tbody td,
.table tbody th {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-weight: 400;
    vertical-align: middle;
}
.table tbody th { font-weight: 560; }
.table tbody td.num, .table tbody th.num { text-align: right; }

.table tbody tr:last-child td,
.table tbody tr:last-child th { border-bottom: 0; }

.table tbody tr { transition: background .1s ease; }
.table tbody tr:hover { background: var(--surface-2); }

.table tfoot th, .table tfoot td {
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--border-strong);
    background: var(--surface-2);
    font-weight: 620;
    text-align: left;
}
.table tfoot td.num, .table tfoot th.num { text-align: right; }

.table a { font-weight: 560; }

.is-muted { opacity: .55; }

.row-actions {
    display: flex;
    gap: var(--sp-1);
    justify-content: flex-end;
    align-items: center;
}
.row-actions form { display: contents; }

.row--invalid-detail td { background: var(--danger-bg); }
.row-errors { color: var(--danger-ink); font-size: .8rem; }

/* Sort links in a header cell keep the header's own type treatment. */
.table thead a {
    color: inherit;
    font: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.table thead a:hover { color: var(--text); text-decoration: none; }

/* --- Totals table (invoice summaries) ---------------------------------- */

.totals-table {
    width: 100%;
    max-width: 22rem;
    margin-left: auto;
    font-size: .875rem;
}
.totals-table th, .totals-table td {
    padding: 5px 0;
    border: 0;
    background: none;
}
.totals-table th {
    text-align: left;
    font-weight: 450;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
    font-size: .875rem;
    position: static;
}
.totals-table td { text-align: right; font-variant-numeric: tabular-nums; }
.totals-table tbody tr:hover { background: none; }
.totals-table__grand th,
.totals-table__grand td {
    padding-top: var(--sp-2);
    border-top: 1px solid var(--border-strong);
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--text);
}

/* --- Pagination --------------------------------------------------------- */

/* Sits inside a card, directly under the table, so it carries the card's own
   gutter — without it the row count is flush against the card edge while every
   cell above it is indented. */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--border);
}

.pagination__summary { color: var(--text-muted); font-size: .82rem; }

.pagination__list {
    list-style: none;
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
}

.pagination__link {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 var(--sp-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--surface);
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 560;
}
.pagination__link:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.pagination__link[aria-current="page"] {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
}
.pagination__gap { display: inline-grid; place-items: center; min-width: 24px; color: var(--text-subtle); }

/* --- List filter bar ---------------------------------------------------- */

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
}
.filters__search { flex: 1 1 14rem; min-width: 0; }
.filters .select { width: auto; min-width: 9rem; }

/* -------------------------------------------------------------------------
   8. Badges, chips, avatars
   ---------------------------------------------------------------------- */

/* Sentence case, not shouting. A tinted pill with a readable ink colour reads
   as a state; an uppercase saturated block reads as an alarm. */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: 1px;
}
.badge--success { background: var(--success-bg); color: var(--success-ink); }
.badge--warning { background: var(--warning-bg); color: var(--warning-ink); }
.badge--danger  { background: var(--danger-bg);  color: var(--danger-ink); }
.badge--info    { background: var(--info-bg);    color: var(--info-ink); }
.badge--muted   { background: var(--surface-3);  color: var(--text-muted); }

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 34px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 560;
    white-space: nowrap;
}
.chip:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }

.chip--active {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
}
.chip--active:hover { background: var(--brand-500); color: #fff; }

.chip__count {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--text-muted);
    font-size: .7rem;
    font-weight: 700;
}
.chip--active .chip__count { background: rgba(255, 255, 255, .22); color: #fff; }

.chip__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.avatar {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--brand-500), var(--brand-700));
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    flex: 0 0 auto;
}
.avatar--sm { width: 28px; height: 28px; font-size: .66rem; }

/* -------------------------------------------------------------------------
   9. Stats & charts
   ---------------------------------------------------------------------- */

.stat-row {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin-bottom: var(--sp-4);
}

.stat {
    padding: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

.stat__label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 560;
    letter-spacing: -0.004em;
}

/* The number is the point of the tile, so it gets real size and proportional
   figures — tabular figures are for columns that must align, not for a
   headline standing on its own. */
.stat__value {
    display: block;
    font-size: 1.5rem;
    font-weight: 660;
    line-height: 1.15;
    letter-spacing: -0.028em;
    color: var(--text);
}

.stat__note {
    display: block;
    margin-top: 5px;
    color: var(--text-subtle);
    font-size: .75rem;
}

.stat--warning { border-color: color-mix(in srgb, var(--warning) 35%, var(--border)); }
.stat--warning .stat__value { color: var(--warning); }

/* --- Bars ---------------------------------------------------------------
   Horizontal bars drawn with widths rather than a charting library. No
   dependency, no canvas, prints correctly, and readable by a screen reader
   because the number sits in the DOM beside the bar rather than inside it.

   Every bar is labelled in text, so colour is never the only channel — which
   is what lets the ageing ramp use status colours safely. */

.bar {
    display: grid;
    grid-template-columns: minmax(5.5rem, 8rem) 1fr minmax(5.5rem, auto);
    align-items: center;
    gap: var(--sp-3);
    padding: 5px 0;
}

.bar__label {
    font-size: .82rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
}

.bar__track {
    position: relative;
    height: 9px;
    border-radius: 999px;
    /* Recessive: the track is a guide, not data. */
    background: var(--surface-3);
    overflow: hidden;
}

.bar__fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 999px;
    background: var(--brand-500);
    transition: width .35s cubic-bezier(.4, 0, .2, 1);
}

/* Ordered severity, not a rainbow: current → 90+ runs good → critical. */
.bar__fill--neutral  { background: var(--state-neutral); }
.bar__fill--warn     { background: var(--state-warning); }
.bar__fill--serious  { background: var(--state-serious); }
.bar__fill--danger   { background: var(--state-critical); }
.bar__fill--ok       { background: var(--state-good); }

/* Two series per row — invoiced and collected — as a GROUPED pair of thin
   tracks, not one bar overlaid on another.

   The overlay version was wrong and the screenshots showed why: in a month
   where more was collected than invoiced (payments landing against older
   invoices, which is normal), the overlay covered the bar underneath and the
   row read as a single green bar. A reader cannot see a series that is drawn
   behind another one. Grouped, both lengths are always visible and the
   comparison the chart exists to make is the comparison you actually see. */
.bar__group {
    display: grid;
    gap: 3px;
    min-width: 0;
}
.bar__group .bar__track { height: 5px; }

.bar__value {
    text-align: right;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Legend — present whenever a chart carries two series, because identity must
   never be colour-alone. */
.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin-bottom: var(--sp-3);
    font-size: .8rem;
    color: var(--text-muted);
}
.chart-legend__item { display: inline-flex; align-items: center; gap: 7px; }

/* The swatch defaults to the same colour .bar__fill does, and the modifiers
   mirror the fill modifiers one-for-one — a legend that drifts from its chart
   is worse than no legend. */
.chart-legend__swatch {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    flex: 0 0 auto;
    background: var(--brand-500);
}
.chart-legend__swatch--ok      { background: var(--state-good); }
.chart-legend__swatch--neutral { background: var(--state-neutral); }
.chart-legend__swatch--warn    { background: var(--state-warning); }
.chart-legend__swatch--serious { background: var(--state-serious); }
.chart-legend__swatch--danger  { background: var(--state-critical); }

/* Twelve rows of bars is a block, not a list — tightening the row rhythm and
   hairlining the rows keeps a year of data inside one screenful. */
.bar-chart { display: flex; flex-direction: column; }
.bar--compact { padding: 4px 0; gap: var(--sp-2); }
.bar--compact .bar__label { font-size: .75rem; }
.bar--compact .bar__value { font-size: .78rem; }

.progress {
    height: 7px;
    border-radius: 999px;
    background: var(--surface-3);
    overflow: hidden;
}
.progress__bar { height: 100%; background: var(--brand-500); border-radius: 999px; }

/* -------------------------------------------------------------------------
   10. Alerts, toasts, modals
   ---------------------------------------------------------------------- */

.alert {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border);
    border-left: 3px solid var(--text-subtle);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    margin-bottom: var(--sp-4);
    font-size: .875rem;
}
.alert__icon { flex: 0 0 auto; margin-top: 1px; font-size: 1.05rem; }
.alert__message { flex: 1; min-width: 0; }
.alert__message p { margin-bottom: var(--sp-2); }
.alert__message p:last-child { margin-bottom: 0; }
.alert__close {
    flex: 0 0 auto;
    border: 0;
    background: none;
    color: var(--text-subtle);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
}
.alert__close:hover { color: var(--text); }

.alert--success { border-left-color: var(--success); background: var(--success-bg); border-color: transparent; }
.alert--success .alert__icon { color: var(--success); }
.alert--warning { border-left-color: var(--warning); background: var(--warning-bg); border-color: transparent; }
.alert--warning .alert__icon { color: var(--warning); }
.alert--error   { border-left-color: var(--danger);  background: var(--danger-bg);  border-color: transparent; }
.alert--error .alert__icon { color: var(--danger); }
.alert--info    { border-left-color: var(--info);    background: var(--info-bg);    border-color: transparent; }
.alert--info .alert__icon { color: var(--info); }

.flash-stack { display: none; }

.toast-stack {
    position: fixed;
    right: var(--sp-3);
    bottom: calc(var(--bottom-nav-h) + var(--sp-3) + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    width: min(24rem, calc(100vw - var(--sp-5)));
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    font-size: .875rem;
    pointer-events: auto;
    animation: toast-in .22s cubic-bezier(.4, 0, .2, 1);
}
.toast--success { border-left: 3px solid var(--success); }
.toast--error   { border-left: 3px solid var(--danger); }
.toast--warning { border-left: 3px solid var(--warning); }
.toast--info    { border-left: 3px solid var(--info); }

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

.modal {
    width: min(28rem, calc(100vw - var(--sp-5)));
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}
.modal::backdrop { background: rgba(8, 12, 20, .55); backdrop-filter: blur(2px); }
.modal__panel { padding: var(--sp-5); }
.modal__title { margin: 0 0 var(--sp-2); font-size: 1.05rem; }
.modal__body { margin: 0 0 var(--sp-5); color: var(--text-muted); }
.modal__actions { display: flex; gap: var(--sp-2); justify-content: flex-end; }
.modal__actions .btn { flex: 1 1 auto; }

/* -------------------------------------------------------------------------
   11. Detail lists, timelines, checklists
   ---------------------------------------------------------------------- */

.detail-list { margin: 0; }
.detail-list__row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border);
}
.detail-list__row:first-child { padding-top: 0; }
.detail-list__row:last-child { border-bottom: 0; padding-bottom: 0; }
.detail-list dt {
    font-size: .78rem;
    font-weight: 560;
    color: var(--text-muted);
}
.detail-list dd { margin: 0; font-size: .9rem; }

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist__item {
    position: relative;
    padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
    font-size: .875rem;
}
.checklist__item::before {
    content: "○";
    position: absolute;
    left: 0;
    color: var(--text-subtle);
}
.checklist__item--done::before { content: "✓"; color: var(--success); font-weight: 700; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline > li {
    position: relative;
    padding: 0 0 var(--sp-4) var(--sp-5);
    border-left: 1px solid var(--border);
    margin-left: 7px;
}
.timeline > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline__marker {
    position: absolute;
    left: -5px;
    top: 4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--brand-500);
    box-shadow: 0 0 0 3px var(--surface);
}
.timeline__body { font-size: .875rem; }
.timeline__meta { color: var(--text-subtle); font-size: .75rem; margin-top: 2px; }
.timeline__description { margin: 0; }
.timeline__changes {
    margin-top: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-xs);
    background: var(--surface-3);
    font-size: .78rem;
    font-family: var(--font-mono);
}

.task-list { list-style: none; margin: 0; padding: 0; }
.task {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border);
}
.task:last-child { border-bottom: 0; padding-bottom: 0; }
.task__body { flex: 1; min-width: 0; }
.task__toggle { flex: 0 0 auto; order: -1; }

/* The tick is the tap target, so it carries the full 44px even though the
   glyph inside it is small. */
.task__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-xs);
    background: var(--surface);
    color: var(--brand-600);
    font-size: .8rem;
    line-height: 1;
    cursor: pointer;
}
button.task__check:hover { border-color: var(--brand-500); }

.task__title { font-weight: 560; font-size: .9rem; margin: 0; }
.task__description { color: var(--text-muted); font-size: .82rem; margin: 2px 0 0; }
.task__meta { color: var(--text-subtle); font-size: .75rem; margin: 4px 0 0; }

/* Done is struck through as well as dimmed — two channels, so it survives a
   greyscale print and a low-contrast screen. */
.task--done .task__title { text-decoration: line-through; color: var(--text-subtle); }
.task--done .task__check { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.task--overdue .task__meta { color: var(--danger); font-weight: 560; }

.note {
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    margin-bottom: var(--sp-2);
}
.note:last-child { margin-bottom: 0; }
.note--pinned {
    border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
    background: var(--warning-bg);
}
.note__body { font-size: .9rem; margin: 0; }
.note__meta { color: var(--text-subtle); font-size: .75rem; margin: 6px 0 0; }

.address-grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
.address-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    overflow: hidden;
}
.address-card__header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border);
    font-size: .8rem;
    font-weight: 600;
}
.address-card__body { padding: var(--sp-3); font-size: .875rem; }
.address-card__label { color: var(--text-muted); }

.code-block {
    margin: var(--sp-2) 0 0;
    padding: var(--sp-3);
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    border: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: .78rem;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre;
}

.diff { font-family: var(--font-mono); font-size: .78rem; }

.split { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; align-items: start; }

.settings-grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }

.tabs {
    display: flex;
    gap: var(--sp-1);
    overflow-x: auto;
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--sp-4);
    -webkit-overflow-scrolling: touch;
}
.tabs a,
.tabs__tab {
    padding: var(--sp-3) var(--sp-3);
    color: var(--text-muted);
    font-size: .875rem;
    font-weight: 560;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.tabs a:hover,
.tabs__tab:hover { color: var(--text); text-decoration: none; }

/* Both spellings: the shared partials use `.active`, clients/show uses the
   BEM modifier. Same rule rather than two that drift apart. */
.tabs a.active,
.tabs__tab--active {
    color: var(--brand-600);
    border-bottom-color: var(--brand-600);
    font-weight: 650;
}

/* --- Permissions editor ------------------------------------------------- */

.permission-module { margin-bottom: var(--sp-4); }
.permission-module__grid { display: grid; gap: var(--sp-2); grid-template-columns: 1fr; }
.permission-group { margin-bottom: var(--sp-5); }
.permission-group__module { font-weight: 620; margin-bottom: var(--sp-2); }
.permission-list { display: grid; gap: var(--sp-2); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }

.permission-check {
    padding: var(--sp-2);
    border-radius: var(--radius-xs);
}
.permission-check:hover { background: var(--surface-3); }

/* A permission this role cannot be granted is shown, not hidden — seeing the
   boundary is the point. The cursor and the dimming say "not yours to set"
   before the disabled input does. */
.permission-check.is-locked {
    opacity: .55;
    cursor: not-allowed;
}
.permission-check.is-locked:hover { background: none; }

/* A field that is locked by the document rather than by permission — the GST
   column on a bill of supply. Deliberately not `disabled`: the line fields are
   parallel arrays, and a disabled control submits nothing, which would shift
   every rate onto the wrong line. See documents/form.php. */
.select.is-locked,
.input.is-locked {
    background: var(--surface-3);
    color: var(--text-subtle);
    pointer-events: none;
}

/* --- Notifications ------------------------------------------------------ */

.notification-list { list-style: none; margin: 0; padding: 0; }
.notification + .notification { border-top: 1px solid var(--border); }
.notification__link {
    display: block;
    padding: var(--sp-3) var(--sp-4);
    min-height: var(--tap);
    color: inherit;
}
.notification__link:hover { background: var(--surface-2); text-decoration: none; }
.notification__title { display: block; font-weight: 600; font-size: .9rem; }
.notification__body  { display: block; margin-top: 2px; color: var(--text-muted); font-size: .85rem; }
.notification__time  { display: block; margin-top: 4px; color: var(--text-subtle); font-size: .75rem; }

/* An unread one gets a bar rather than a colour change, so it still reads
   correctly for anyone who cannot distinguish the two colours. */
.notification--unread { position: relative; }
.notification--unread::before {
    content: "";
    position: absolute;
    inset: var(--sp-3) auto var(--sp-3) 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--brand-500);
}
.notification--unread .notification__title { font-weight: 700; }

.notification-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: .65rem;
    line-height: 17px;
    text-align: center;
    font-weight: 700;
    border: 2px solid var(--surface);
}

/* --- User menu ---------------------------------------------------------- */

.user-menu { position: relative; }
.user-menu__trigger {
    display: grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    cursor: pointer;
    list-style: none;
    border-radius: var(--radius-sm);
}
.user-menu__trigger::-webkit-details-marker { display: none; }
.user-menu__trigger:hover { background: var(--surface-3); }

.user-menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 40;
    width: 15rem;
    padding: var(--sp-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}
.user-menu__identity {
    display: flex;
    flex-direction: column;
    padding: var(--sp-3);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--sp-1);
    font-size: .82rem;
}
.user-menu__identity .text-muted { font-size: .75rem; }

.user-menu__link {
    display: block;
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: 0;
    border-radius: var(--radius-xs);
    background: none;
    color: var(--text);
    font: inherit;
    font-size: .85rem;
    text-align: left;
    cursor: pointer;
}
.user-menu__link:hover { background: var(--surface-3); text-decoration: none; }
.user-menu__link--danger { color: var(--danger); }

.search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 40;
    max-height: 22rem;
    overflow-y: auto;
    padding: var(--sp-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}
.search-results a {
    display: block;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-xs);
    color: var(--text);
    font-size: .85rem;
}
.search-results a:hover { background: var(--surface-3); text-decoration: none; }

/* --- Reports ------------------------------------------------------------ */

.report-filters {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: 1fr;
    align-items: end;
}
.report-filters .field { margin-bottom: 0; }

.report-list { list-style: none; margin: 0; padding: 0; }
.report-list__item + .report-list__item { border-top: 1px solid var(--border); }
.report-list__link { display: block; padding: var(--sp-3) 0; color: inherit; }
.report-list__link:hover { text-decoration: none; }
.report-list__link:hover .report-list__title { text-decoration: underline; }
.report-list__title { display: block; font-weight: 620; color: var(--brand-600); }
.report-list__summary { display: block; margin-top: 2px; font-size: .85rem; color: var(--text-muted); }

.numbering-preview {
    font-family: var(--font-mono);
    font-size: .9rem;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-xs);
    background: var(--surface-3);
    display: inline-block;
}

.image-preview {
    max-height: 5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-3);
    padding: var(--sp-2);
}

/* --- Document line editor ----------------------------------------------- */

/* The line table cannot stack: entering a row means seeing qty, rate and
   discount together. It scrolls inside its own container so the page does not,
   and the inputs are compact enough that a phone shows the important columns
   without much travel. */
.line-table { min-width: 58rem; }
.line-table td { vertical-align: top; padding: var(--sp-2); }
.line-table thead th { padding: var(--sp-2); }
.line-table .input,
.line-table .select,
.line-table .textarea {
    min-height: 34px;
    padding: 5px var(--sp-2);
    font-size: .82rem;
    margin-bottom: 5px;
}
.line-table .textarea { min-height: 34px; }
.line-table .line-name { font-weight: 520; }
.line-table .num input,
.line-table input.num,
.line-table select.num { text-align: right; }
.line-remove {
    width: 30px;
    height: 30px;
    font-size: 1.1rem;
    color: var(--text-subtle);
}
.line-remove:hover { color: var(--danger); background: var(--danger-bg); }

/* -------------------------------------------------------------------------
   12. Auth pages
   ---------------------------------------------------------------------- */

body.auth {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: var(--sp-4);
    /* A soft radial wash so the card sits on something, rather than on a flat
       field of colour. */
    background:
        radial-gradient(1200px 600px at 50% -10%, var(--brand-wash), transparent 70%),
        var(--bg);
}

.auth__panel { width: min(26rem, 100%); }

.auth__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.auth__mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(140deg, var(--brand-500), var(--brand-700));
    color: #fff;
    font-weight: 750;
    font-size: .85rem;
    letter-spacing: .02em;
    box-shadow: var(--shadow-sm);
}

.auth__name { font-size: 1.05rem; font-weight: 640; letter-spacing: -0.018em; }

.auth__card {
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.auth__options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    font-size: .85rem;
}

.auth__secondary { margin-top: var(--sp-4); font-size: .85rem; }

.auth__footer {
    margin-top: var(--sp-4);
    text-align: center;
    color: var(--text-subtle);
    font-size: .8rem;
}

/* --- Error pages -------------------------------------------------------- */

.error-page { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-5); text-align: center; }
.error-page__inner { max-width: 34rem; }
.error-page__code { font-size: 3.5rem; font-weight: 750; line-height: 1; margin: 0 0 var(--sp-2); color: var(--brand-600); }
.error-page__heading { font-size: 1.35rem; }
.error-page__message { color: var(--text-muted); }
.error-page__actions { margin-top: var(--sp-4); }
.error-page__ref { font-family: var(--font-mono); letter-spacing: .08em; }
.error-page__debug { margin-top: var(--sp-5); text-align: left; }
.error-page__debug pre {
    overflow-x: auto;
    padding: var(--sp-3);
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    font-size: .72rem;
}

/* --- Public (shared document) page --------------------------------------- */

.public { background: var(--bg); padding: var(--sp-5) var(--sp-3); }
.public__sheet { max-width: 52rem; margin: 0 auto; }
.public__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}
.public__company { margin: var(--sp-2) 0 0; font-size: 1.1rem; }
.public__meta { text-align: right; }
.public__type {
    margin: 0 0 var(--sp-1);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--brand-600);
}
.public__footer { padding: var(--sp-5) 0; text-align: center; font-size: .82rem; color: var(--text-muted); }

/* --- Offline banner ------------------------------------------------------ */

.offline-banner {
    display: none;
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 60;
    padding: 7px var(--sp-4);
    padding-top: calc(7px + env(safe-area-inset-top, 0px));
    background: var(--warning);
    color: #1a1200;
    font-size: .82rem;
    font-weight: 620;
    text-align: center;
}
body.is-offline .offline-banner { display: block; }
body.is-offline .topbar { top: 32px; }

/* -------------------------------------------------------------------------
   13. Breakpoints
   ---------------------------------------------------------------------- */

/* --- Table → cards, below the tablet breakpoint --------------------------

   THE ONE max-width QUERY IN THIS FILE, and the reason is worth stating: a
   <table> cannot be turned into cards additively. Writing the stacked form as
   the base would mean undoing every part of it — display, borders, the
   generated labels — at 768px, which is more code and easier to get wrong.

   The container must NOT scroll here. It used to, which meant the "stacked"
   rows kept the table's full width and every value sat off the right edge of
   a phone — the list screens were unusable and looked broken. */
@media (max-width: 767.98px) {
    .table-wrap:not(.table-scroll) { overflow: visible; }

    .table--stacked { min-width: 0; display: block; }
    .table--stacked thead { display: none; }
    .table--stacked tbody, .table--stacked tfoot { display: block; }

    .table--stacked tbody tr {
        display: block;
        padding: var(--sp-3) var(--sp-4);
        border-bottom: 1px solid var(--border);
    }
    .table--stacked tbody tr:last-child { border-bottom: 0; }

    /* The row header is the card's title: full width, larger, no label. */
    .table--stacked tbody th[scope="row"] {
        display: block;
        width: auto;
        padding: 0 0 var(--sp-2);
        border: 0;
        font-size: .95rem;
        font-weight: 620;
    }

    /* Every other cell becomes a label above its value.
       -----------------------------------------------------------------
       This was a two-item flex row — label left, value right — until the
       screenshots showed the invoice list running off the side of a 390px
       screen. The reason: a cell is not always ONE value. `<td>Acme<span
       class="d-block">Owner</span></td>` is three flex items (label, text
       node, span), and space-between pushed the last one past the edge,
       which widened the document and clipped every other element on the
       page with it.

       A block label over a block value has no such assumption — it is
       correct for one child or five. It costs a little height and buys a
       layout that cannot be broken by a view adding a second line. */
    .table--stacked tbody td {
        display: block;
        width: auto;
        padding: var(--sp-2) 0 0;
        border: 0;
        text-align: left;
        font-size: .875rem;
        overflow-wrap: anywhere;
    }
    .table--stacked tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 1px;
        color: var(--text-muted);
        font-size: .72rem;
        font-weight: 560;
        letter-spacing: .02em;
    }
    /* .num right-aligns to line decimals up against other rows; inside a
       card there is no column to line up with, so it reads left like the
       rest. */
    .table--stacked tbody td.num { text-align: left; }

    /* Progressive densification. A cell carrying a second line (.d-block —
       "Acme Ltd / Owner: Priya") must stay stacked, but the great majority
       hold one value and a stacked label wastes a whole line on each.

       Those collapse back to label-left / value-right, which halves the
       height of a list card. Written as :has() on purpose: a browser
       without it simply keeps the stacked layout above, which is correct —
       just taller. Nothing breaks, it only gets less tidy. */
    .table--stacked tbody td[data-label]:not(:has(.d-block)):not(:has(input, select, textarea)) {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--sp-3);
        padding: var(--sp-1) 0;
    }
    .table--stacked tbody td[data-label]:not(:has(.d-block)):not(:has(input, select, textarea))::before {
        margin-bottom: 0;
        flex: 0 0 auto;
    }

    /* A cell holding a form control keeps the label ABOVE it: a 44px control
       squeezed into half a row is not a target you can hit with a thumb. */
    .table--stacked tbody td .input,
    .table--stacked tbody td .select,
    .table--stacked tbody td .textarea { width: 100%; }

    /* The line editor is the one table that carries an explicit min-width for
       desktop; it has to be undone here or the card never narrows. Specificity
       has to beat `.table-scroll table`, hence the descendant selector. */
    .table-scroll .table--stacked { min-width: 0; }
    .table-scroll:has(.table--stacked) { overflow: visible; }

    /* A field/value table is ALREADY a label and a value, so the generic
       stacking turns each row into "Entity type / Value: Private limited" —
       ten repetitions of the word "Value" down a client page. Here the row
       header IS the label, so it goes back to sitting beside its value and
       the redundant data-label is dropped. */
    .table--stacked.table--detail tbody tr {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--sp-3);
        padding: var(--sp-2) var(--sp-4);
    }
    .table--stacked.table--detail tbody th[scope="row"] {
        padding: 0;
        flex: 0 0 auto;
        color: var(--text-muted);
        font-size: .8rem;
        font-weight: 560;
    }
    /* Selector deliberately as heavy as the compact-cell rule above, which
       carries two :has() clauses; anything lighter loses to it. */
    .table--stacked.table--detail tbody td[data-label],
    .table--stacked.table--detail tbody td {
        display: block;
        padding: 0;
        text-align: right;
        font-size: .875rem;
    }
    .table--stacked.table--detail tbody td[data-label]::before,
    .table--stacked.table--detail tbody td::before { content: none; }

    /* A cell with no label is an action row, not a value. */
    .table--stacked tbody td:not([data-label]) {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--sp-2);
        padding-top: var(--sp-3);
    }

    .table--stacked tfoot tr { display: block; padding: var(--sp-3) var(--sp-4); }
    .table--stacked tfoot th, .table--stacked tfoot td {
        display: flex;
        justify-content: space-between;
        gap: var(--sp-3);
        padding: 3px 0;
        border: 0;
    }

    .table--stacked .row-actions { justify-content: flex-end; width: 100%; }

    /* The totals table is already a label/value list; leave it alone. */
    .totals-table { max-width: none; }

    /* Three columns on a 390px screen leaves the bar itself about 80px — too
       short to compare lengths, which is the only thing a bar chart is for.
       Label and value share the first line; the bar gets the full width of the
       card underneath. */
    .bar {
        grid-template-columns: 1fr auto;
        gap: 2px var(--sp-3);
        padding: var(--sp-2) 0;
    }
    .bar__label { grid-row: 1; }
    .bar__value { grid-row: 1; }
    .bar__track,
    .bar__group { grid-column: 1 / -1; grid-row: 2; }

    /* Long unbroken values — GSTINs, emails, document numbers — break rather
       than widen the document. Deliberately NOT `body { overflow-x: hidden }`:
       that hides the symptom, and it kills position:sticky on the top bar. */
    .card, .page-header, .app__main { overflow-wrap: anywhere; }
}

/* --- 768px: tablet — sidebar becomes permanent, bottom nav disappears --- */
@media (min-width: 768px) {
    :root { --control-h: 38px; }

    .app__body { margin-left: var(--sidebar-w); }

    .app__main {
        padding: var(--sp-5);
        padding-bottom: var(--sp-6);
    }

    .sidebar { transform: none; }
    .sidebar__collapse { display: grid; place-items: center; }

    .topbar { padding: 0 var(--sp-5); }
    .topbar__menu { display: none; }

    .topbar__search {
        display: block;
        position: relative;
        flex: 1 1 22rem;
        max-width: 28rem;
        margin-inline: auto;
    }

    .bottom-nav { display: none; }

    .toast-stack { bottom: var(--sp-4); right: var(--sp-4); }

    .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .report-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .permission-module__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .permission-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .address-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .split { grid-template-columns: 3fr 2fr; }

    .detail-list__row { flex-direction: row; align-items: baseline; gap: var(--sp-4); }
    .detail-list dt { flex: 0 0 10rem; }
    .detail-list dd { flex: 1 1 auto; }

    .modal__actions .btn { flex: 0 0 auto; min-width: 7rem; }

    .sticky-actions { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}

/* --- 1024px: desktop --------------------------------------------------- */
@media (min-width: 1024px) {
    .app__main { padding: var(--sp-5) var(--sp-6); }

    .form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .permission-module__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .permission-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .settings-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* Collapsed sidebar mode, toggled by the chevron and remembered in
       localStorage. Labels hide; icons stay, centred. */
    body.sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed); }
    body.sidebar-collapsed .app__body { margin-left: var(--sidebar-w-collapsed); }
    body.sidebar-collapsed .sidebar__label,
    body.sidebar-collapsed .sidebar__name,
    body.sidebar-collapsed .sidebar__heading,
    body.sidebar-collapsed .sidebar__user-text { display: none; }
    body.sidebar-collapsed .sidebar__link { justify-content: center; padding: 0; }
    body.sidebar-collapsed .sidebar__user { justify-content: center; }
    body.sidebar-collapsed .sidebar__collapse { transform: rotate(180deg); }
}

/* --- 1440px ------------------------------------------------------------ */
@media (min-width: 1440px) {
    .app__main { padding: var(--sp-6); }
}

/* --- Print ------------------------------------------------------------- */
@media print {
    .sidebar, .bottom-nav, .topbar, .toast-stack, .sticky-actions,
    .skip-link, .offline-banner, .page-header__actions { display: none !important; }

    .app__body { margin-left: 0; }
    .app__main { padding: 0; max-width: none; }

    .card { box-shadow: none; border-color: #ccc; break-inside: avoid; }

    /* Printers drop background colours by default, so bars are re-drawn in
       greys that survive. They are still told apart: greys of different value
       for the ordinal ramp, and the legend swatches print the same greys, so a
       black-and-white page carries the same reading as the screen. */
    .bar__track { border: 1px solid #999; }
    .bar__fill               { background: #8c8c8c !important; }
    .bar__fill--ok           { background: #c9c9c9 !important; }
    .bar__fill--neutral      { background: #d4d4d4 !important; }
    .bar__fill--warn         { background: #a6a6a6 !important; }
    .bar__fill--serious      { background: #6e6e6e !important; }
    .bar__fill--danger       { background: #333333 !important; }

    .chart-legend__swatch               { background: #8c8c8c !important; }
    .chart-legend__swatch--ok           { background: #c9c9c9 !important; }
    .chart-legend__swatch--neutral      { background: #d4d4d4 !important; }
    .chart-legend__swatch--warn         { background: #a6a6a6 !important; }
    .chart-legend__swatch--serious      { background: #6e6e6e !important; }
    .chart-legend__swatch--danger       { background: #333333 !important; }

    .bar__fill, .chart-legend__swatch {
        -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
    }
}