/* =========================================================================
   H&T 1.0 — COLOUR THEME LAYER
   -------------------------------------------------------------------------
   Loaded after app.css and before mobile.css, so it repaints the app without
   any view being touched and the phone layout still wins on equal weight.

   Nothing here moves anything. Every rule sets a colour, a gradient, a tint
   or a shadow — no widths, no paddings, no display, no grid tracks. If a rule
   would change where something sits, it does not belong in this file.

   The rules the palette follows:
     · Meaning is untouched. green = done, blue = working, amber = waiting,
       red = needs a decision, violet = warehouse. app.css assigns those and
       this file only makes them richer, never swaps one for another.
     · Colour lives on the CHROME — sidebar, headers, tiles, buttons, accents.
       Data surfaces stay white and the figures stay near-black, because a
       twelve-column dispatch table is read, not admired.
     · Every area of work gets its own hue, carried from the sidebar group
       through to the screens under it, so the eye learns where it is.
   ========================================================================= */

:root {
  /* ---- The accent wheel ------------------------------------------------
     Eight hues, evenly spread and all legible on white at 12px. These are
     additions; the semantic tokens in app.css (--blue/--green/--amber/--red/
     --violet) keep their jobs and their values. */
  --c-indigo:  #4f46e5;  --c-indigo-d:  #3730a3;  --c-indigo-s:  #e8e7ff;
  --c-blue:    #2563eb;  --c-blue-d:    #1d4ed8;  --c-blue-s:    #dbeafe;
  --c-sky:     #0ea5e9;  --c-sky-d:     #0369a1;  --c-sky-s:     #e0f2fe;
  --c-teal:    #0d9488;  --c-teal-d:    #0f766e;  --c-teal-s:    #d6f5f0;
  --c-emerald: #10b981;  --c-emerald-d: #047857;  --c-emerald-s: #d7f7e7;
  --c-amber:   #f59e0b;  --c-amber-d:   #b45309;  --c-amber-s:   #fef3c7;
  --c-orange:  #f97316;  --c-orange-d:  #c2410c;  --c-orange-s:  #ffedd5;
  --c-rose:    #f43f5e;  --c-rose-d:    #be123c;  --c-rose-s:    #ffe4e8;
  --c-pink:    #ec4899;  --c-pink-d:    #be185d;  --c-pink-s:    #fce7f3;
  --c-violet:  #8b5cf6;  --c-violet-d:  #6d28d9;  --c-violet-s:  #ede9fe;

  /* ---- Shared gradients ---- */
  --g-brand:   linear-gradient(135deg, #6366f1 0%, #2563eb 48%, #06b6d4 100%);
  --g-side:    linear-gradient(178deg, #1b2450 0%, #141d40 38%, #0d1730 72%, #0a1226 100%);
  --g-spectrum: linear-gradient(90deg,
                  #6366f1 0%, #2563eb 17%, #06b6d4 34%,
                  #10b981 51%, #f59e0b 68%, #f43f5e 85%, #ec4899 100%);

  /* Default card / tile accent — overridden per position and per state. */
  --ca: var(--c-blue);
  --ka: var(--c-blue);
  --kaw: rgba(37, 99, 235, .07);
}

/* =========================================================================
   1 · THE PAGE ITSELF
   A flat slate field made every card look like a cut-out. Three very wide,
   very weak colour washes sit behind everything instead: enough for the page
   to feel lit, far too weak to compete with a number.
   ========================================================================= */
body {
  background-color: var(--sf-7);
  background-image:
    radial-gradient(1200px 520px at -8% -12%, rgba(99, 102, 241, .13), transparent 62%),
    radial-gradient(1000px 480px at 108% -4%, rgba(6, 182, 212, .12), transparent 60%),
    radial-gradient(900px 520px at 45% 112%, rgba(236, 72, 153, .07), transparent 62%);
  background-attachment: fixed;
}

/* =========================================================================
   2 · SIDEBAR
   One deep indigo-navy field, and one hue per area of work. The group icon,
   the rail down its children and the active pill all carry that hue, so the
   menu says which half of the business you are in before you read a word.
   ========================================================================= */
.sidebar {
  background: var(--g-side);
  border-right: 1px solid rgba(148, 163, 184, .14);
}

/* The brand block sits on its own slightly lighter shelf. */
.brand {
  background: linear-gradient(180deg, rgba(99, 102, 241, .22), rgba(99, 102, 241, 0));
  border-bottom: 1px solid rgba(148, 163, 184, .16);
}
.brand .logo {
  background: var(--g-brand);
  box-shadow: 0 4px 14px rgba(59, 130, 246, .45), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.brand .t1 {
  /* Literal on purpose. This gradient is CLIPPED TO THE TEXT of the wordmark,
     which sits on the navy rail — and the rail is navy in both themes. Themed
     as surfaces these three stops went dark and the wordmark vanished. */
  background: linear-gradient(92deg, #ffffff 0%, #c7d2fe 55%, #a5f3fc 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #fff;
}
.brand .t2 { color: var(--ink-8); }

/* ---- Per-group hue. The two pinned dashboards first, then the groups in
        menu order. Each sets --g (the hue), --g2 (its dark end) and --gs
        (the same hue at rail strength). ---- */
.nav > a:nth-of-type(1)   { --g: #38bdf8; --g2: #0284c7; --gs: rgba(56, 189, 248, .45); }
.nav > a:nth-of-type(2)   { --g: #34d399; --g2: #059669; --gs: rgba(52, 211, 153, .45); }
.nav .navg:nth-of-type(1) { --g: #22d3ee; --g2: #0891b2; --gs: rgba(34, 211, 238, .40); }
.nav .navg:nth-of-type(2) { --g: #a78bfa; --g2: #7c3aed; --gs: rgba(167, 139, 250, .40); }
.nav .navg:nth-of-type(3) { --g: #fbbf24; --g2: #d97706; --gs: rgba(251, 191, 36, .40); }
.nav .navg:nth-of-type(4) { --g: #4ade80; --g2: #16a34a; --gs: rgba(74, 222, 128, .40); }
.nav .navg:nth-of-type(5) { --g: #f472b6; --g2: #db2777; --gs: rgba(244, 114, 182, .40); }
.nav .navg:nth-of-type(6) { --g: #fb7185; --g2: #e11d48; --gs: rgba(251, 113, 133, .40); }
.nav .navg:nth-of-type(7) { --g: #818cf8; --g2: #4f46e5; --gs: rgba(129, 140, 248, .40); }
.nav .navg:nth-of-type(8) { --g: #2dd4bf; --g2: #0d9488; --gs: rgba(45, 212, 191, .40); }

/* The icon is the hue's home. It stays lit whether the group is open or not,
   which is what makes the closed menu readable as a colour key. */
.nav > a svg,
.navg-h svg { color: var(--g, var(--ink-8)); opacity: 1; }
.nav > a { color: #c2cee2; }
.nav > a:hover,
.navg-h:hover { background: rgba(255, 255, 255, .07); color: #fff; }

.nav > a.active,
.navg-b a.active {
  background: linear-gradient(135deg, var(--g, #3b82f6), var(--g2, #1d4ed8));
  color: #fff;
  box-shadow: 0 4px 14px rgba(8, 15, 35, .5), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.nav > a.active svg,
.navg-b a.active svg { color: #fff; }

.navg.open > .navg-h {
  background: rgba(255, 255, 255, .05);
  color: #fff;
}
.navg-b { border-left: 2px solid var(--gs, rgba(148, 163, 184, .3)); }
.navg-b a { color: #b8c5db; }
.navg-b a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.navg:not(.open) > .navg-h.has-active { background: rgba(255, 255, 255, .08); }
.navg:not(.open) > .navg-h.has-active::after { background: var(--g, #3b82f6); }
.navg.open .navg-c { color: var(--g, var(--ink-7)); }

/* The user block gets the same shelf treatment as the brand, mirrored. */
.side-user {
  background: linear-gradient(0deg, rgba(99, 102, 241, .18), rgba(99, 102, 241, 0));
  border-top: 1px solid rgba(148, 163, 184, .16);
}
.side-user .avatar { background: var(--g-brand); }
.online { color: #4ade80; }

/* A dark scrollbar, so the menu does not grow a white stripe when it overflows. */
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, .28); border-radius: 8px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, .45); }

/* =========================================================================
   3 · TOPBAR
   White, with the whole accent wheel drawn as a 2px rule underneath — the one
   place in the app that shows the palette in full.
   ========================================================================= */
.topbar {
  background: linear-gradient(180deg, var(--sf-1) 0%, var(--sf-1) 100%);
  border-bottom: 2px solid transparent;
  border-image: var(--g-spectrum) 1;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .05);
}
.topbar h1 {
  /* Clipped to the text, so these two stops ARE the page title's colour — the
     `color` below is only the fallback for browsers that will not clip. Left
     literal they stayed near-black on a dark topbar and the title disappeared. */
  background: linear-gradient(92deg, var(--ink) 0%, var(--on-blue-4) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--ink);
}
.datebox {
  background: linear-gradient(180deg, var(--sf-2), var(--sf-3));
  border-color: var(--tint-blue-7); color: var(--ink-4);
}
.topbar .avatar { background: var(--g-brand); box-shadow: 0 3px 10px rgba(59, 130, 246, .35); }
.bellwrap svg { color: var(--ink-6); }
.bellwrap .bcount { background: linear-gradient(135deg, #fb7185, #e11d48); box-shadow: 0 2px 6px rgba(225, 29, 72, .45); }
.menu-btn { background: linear-gradient(180deg, var(--sf-1), var(--sf-2)); border-color: var(--tint-blue-13); color: var(--on-blue-4); }

/* =========================================================================
   4 · CARDS
   Each card carries a 3px accent along its top edge, cycling through the
   wheel down the page, so a long screen reads as sections rather than as one
   undifferentiated stack. The accent is an inset shadow, not a pseudo-element,
   so nothing inside the card has to move for it.
   ========================================================================= */
.card:nth-of-type(7n+1) { --ca: var(--c-blue); }
.card:nth-of-type(7n+2) { --ca: var(--c-violet); }
.card:nth-of-type(7n+3) { --ca: var(--c-teal); }
.card:nth-of-type(7n+4) { --ca: var(--c-orange); }
.card:nth-of-type(7n+5) { --ca: var(--c-pink); }
.card:nth-of-type(7n+6) { --ca: var(--c-emerald); }
.card:nth-of-type(7n+7) { --ca: var(--c-indigo); }

.card {
  background: linear-gradient(180deg, var(--sf-1) 0%, var(--sf-1) 100%);
  border-color: var(--bd-2);
  box-shadow:
    inset 0 3px 0 var(--ca),
    0 1px 2px rgba(15, 23, 42, .04),
    0 8px 24px rgba(15, 23, 42, .045);
}

/* The card's own title wears the accent as a short bar in front of it. */
.card > h2 { position: relative; }
.card > h2::before {
  content: ""; display: inline-block; vertical-align: 1px;
  width: 4px; height: 14px; border-radius: 3px; margin-right: 8px;
  background: var(--ca);
}
.card h3 { color: var(--ink-5); }

/* =========================================================================
   5 · KPI TILES
   Every kpi_card() already declares what it means through its icon colour.
   That class is the hook: the tile borrows its own icon's hue for the edge
   bar and for a wash under the headline, so a row of tiles is a row of
   colours rather than six identical white boxes.
   ========================================================================= */
.k-ico.blue   { background: linear-gradient(135deg, #60a5fa, #2563eb); color: #fff; }
.k-ico.green  { background: linear-gradient(135deg, #4ade80, #16a34a); color: #fff; }
.k-ico.orange { background: linear-gradient(135deg, #fbbf24, #ea580c); color: #fff; }
.k-ico.purple,
.k-ico.violet { background: linear-gradient(135deg, #a78bfa, #7c3aed); color: #fff; }
.k-ico.cyan   { background: linear-gradient(135deg, #22d3ee, #0891b2); color: #fff; }
.k-ico.red    { background: linear-gradient(135deg, #fb7185, #dc2626); color: #fff; }
.k-ico.slate  { background: linear-gradient(135deg, var(--fill-3), #475569); color: #fff; }
.k-ico { box-shadow: 0 3px 9px rgba(15, 23, 42, .16), inset 0 1px 0 rgba(255, 255, 255, .3); }

.kpi:has(.k-ico.blue)   { --ka: var(--c-blue);    --kaw: rgba(37, 99, 235, .09); }
.kpi:has(.k-ico.green)  { --ka: var(--c-emerald); --kaw: rgba(16, 185, 129, .10); }
.kpi:has(.k-ico.orange) { --ka: var(--c-orange);  --kaw: rgba(249, 115, 22, .10); }
.kpi:has(.k-ico.purple),
.kpi:has(.k-ico.violet) { --ka: var(--c-violet);  --kaw: rgba(139, 92, 246, .10); }
.kpi:has(.k-ico.cyan)   { --ka: var(--c-sky);     --kaw: rgba(14, 165, 233, .10); }
.kpi:has(.k-ico.red)    { --ka: var(--c-rose);    --kaw: rgba(244, 63, 94, .10); }
.kpi:has(.k-ico.slate)  { --ka: #94a3b8;          --kaw: rgba(100, 116, 139, .08); }

.kpi {
  background-color: var(--sf-1);
  background-image: linear-gradient(180deg, var(--kaw), rgba(255, 255, 255, 0) 76px);
  border-color: var(--bd-2);
  box-shadow: inset 3px 0 0 var(--ka), 0 1px 2px rgba(15, 23, 42, .04);
}
.kpi .k-value { color: var(--on-blue-1); }
a.kpi-link:hover { box-shadow: inset 3px 0 0 var(--ka), 0 10px 24px rgba(15, 23, 42, .12); }

/* The dashboard's four headline tiles keep their own top bars — give those
   bars the full gradient rather than a flat fill. */
.dash-kpi .kpi:nth-child(1)::before { background: linear-gradient(90deg, #4ade80, #059669); }
.dash-kpi .kpi:nth-child(2)::before { background: linear-gradient(90deg, #60a5fa, #1d4ed8); }
.dash-kpi .kpi:nth-child(3)::before { background: linear-gradient(90deg, #a78bfa, #6d28d9); }
.dash-kpi .kpi:nth-child(4)::before { background: linear-gradient(90deg, #fbbf24, #ea580c); }

/* By Road headline tiles — the same idea, their own class. */
.rd-kpi.green::before  { background: linear-gradient(90deg, #4ade80, #059669); }
.rd-kpi.blue::before   { background: linear-gradient(90deg, #60a5fa, #1d4ed8); }
.rd-kpi.violet::before,
.rd-kpi.purple::before { background: linear-gradient(90deg, #a78bfa, #6d28d9); }
.rd-kpi.orange::before { background: linear-gradient(90deg, #fbbf24, #ea580c); }
.rd-kpi.red::before    { background: linear-gradient(90deg, #fb7185, #be123c); }
.rd-kpi.slate::before  { background: linear-gradient(90deg, var(--fill-2), #64748b); }

/* Tracker tiles and figure tiles pick up the wheel by position. */
.tracker .tk:nth-child(6n+1) { border-left: 3px solid var(--c-blue); }
.tracker .tk:nth-child(6n+2) { border-left: 3px solid var(--c-violet); }
.tracker .tk:nth-child(6n+3) { border-left: 3px solid var(--c-teal); }
.tracker .tk:nth-child(6n+4) { border-left: 3px solid var(--c-orange); }
.tracker .tk:nth-child(6n+5) { border-left: 3px solid var(--c-pink); }
.tracker .tk:nth-child(6n+6) { border-left: 3px solid var(--c-emerald); }
.tk { background: linear-gradient(180deg, var(--sf-1), var(--sf-2)); }

.fig.blue::before   { background: linear-gradient(90deg, #60a5fa, #1d4ed8); }
.fig.orange::before { background: linear-gradient(90deg, #fbbf24, #ea580c); }
.fig.violet::before { background: linear-gradient(90deg, #a78bfa, #6d28d9); }
.fig.green::before  { background: linear-gradient(90deg, #4ade80, #059669); }

/* =========================================================================
   6 · BUTTONS
   Each variant becomes a two-stop fill with a shadow in its own hue, so the
   primary action on a screen is found without reading it. Every variant is
   restated here at its own weight, because app.css sets `background` as a
   shorthand and a shorthand clears the gradient underneath it.
   ========================================================================= */
.btn {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  border-color: #1d4ed8;
  box-shadow: 0 1px 2px rgba(29, 78, 216, .35), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn:hover { background: linear-gradient(180deg, #2563eb 0%, #1a3fb8 100%); box-shadow: 0 4px 12px rgba(29, 78, 216, .38); }

.btn.secondary {
  background: linear-gradient(180deg, var(--sf-1) 0%, var(--sf-2) 100%);
  border-color: var(--tint-blue-13); color: var(--on-blue-4);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.btn.secondary:hover { background: linear-gradient(180deg, var(--sf-2) 0%, var(--tint-blue-2) 100%); border-color: var(--edge-blue-4); }

.btn.green { background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%); border-color: #15803d;
  box-shadow: 0 1px 2px rgba(21, 128, 61, .35), inset 0 1px 0 rgba(255, 255, 255, .22); }
.btn.green:hover { background: linear-gradient(180deg, #16a34a 0%, #128040 100%); box-shadow: 0 4px 12px rgba(21, 128, 61, .38); }

.btn.red { background: linear-gradient(180deg, #f43f5e 0%, #dc2626 100%); border-color: #b91c1c;
  box-shadow: 0 1px 2px rgba(185, 28, 28, .35), inset 0 1px 0 rgba(255, 255, 255, .22); }
.btn.red:hover { background: linear-gradient(180deg, #dc2626 0%, #a81919 100%); box-shadow: 0 4px 12px rgba(185, 28, 28, .38); }

.btn.amber { background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%); border-color: #b45309; color: #fff;
  box-shadow: 0 1px 2px rgba(180, 83, 9, .35), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn.amber:hover { background: linear-gradient(180deg, #d97706 0%, #a3560a 100%); box-shadow: 0 4px 12px rgba(180, 83, 9, .38); }

/* The two loud buttons on the order panel keep their loudness, in colour —
   and they keep it in BOTH themes. These are the panel's primary actions and
   the whole point of them is that they shout; a dark-mode version that faded
   into the page would be the wrong fix. So the fills and their dark lettering
   are literal on purpose, and neither follows the theme. */
.btn.add-order { background: linear-gradient(180deg, #dcfce7, #bbf7d0); border-color: #22c55e; color: #14532d; }
.btn.add-order:hover { background: linear-gradient(180deg, #bbf7d0, #86efac); }
.btn.submit-all {
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 100%);
  border-color: #b45309; color: #4a2c05;
  box-shadow: 0 4px 14px rgba(180, 83, 9, .35), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.btn.submit-all:hover { background: linear-gradient(180deg, #facc15 0%, #d97706 100%); }
.btn.ebtn-on { background: linear-gradient(180deg, #3b82f6, #1d4ed8); border-color: #1d4ed8; }

/* =========================================================================
   7 · FORMS
   One indigo focus ring everywhere, with a soft halo so the field being typed
   into is obvious on a dense entry screen.
   ========================================================================= */
input[type=text], input[type=number], input[type=password], input[type=date],
input[type=datetime-local], select, textarea {
  border-color: var(--tint-blue-12);
  background: linear-gradient(180deg, var(--sf-1), var(--sf-1));
}
input[type=text]:focus, input[type=number]:focus, input[type=password]:focus,
input[type=date]:focus, input[type=datetime-local]:focus, select:focus, textarea:focus {
  border-color: var(--c-indigo);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .16);
  outline: none;
}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible { outline-color: var(--c-indigo); }
label.f { color: var(--ink-5); }
.flt-check input, .flt-panel input[type=checkbox],
input[type=checkbox], input[type=radio] { accent-color: var(--c-indigo); }

/* =========================================================================
   8 · TABLES
   The one place colour is rationed. The head takes a cool tint and a firm
   rule so it separates from the body without a heavy fill; the body stays
   white and the hover row takes the faintest blue there is.
   ========================================================================= */
table.data th {
  background: linear-gradient(180deg, var(--sf-2) 0%, var(--tint-blue-1) 100%);
  color: var(--ink-4);
  border-bottom: 2px solid var(--tint-blue-9);
}
table.data tr:hover td { background: var(--sf-3); }
table.data td { border-bottom-color: var(--bd-1); }
.reg-grid th.reg-dmg { background: linear-gradient(180deg, var(--tint-red-1), var(--tint-red-3)); color: var(--on-red-2); }

/* =========================================================================
   9 · PILLS, CHIPS, TAGS
   Two-stop fills and a matching hairline. A status pill is a small object and
   a flat wash makes it look unfinished next to a gradient button.
   ========================================================================= */
.pill { border: 1px solid transparent; }
.pill.pending  { background: linear-gradient(180deg, var(--tint-amber-2), var(--tint-amber-4)); color: var(--on-orange-4); border-color: var(--edge-amber-2); }
.pill.active   { background: linear-gradient(180deg, var(--tint-blue-4), var(--tint-blue-11)); color: var(--on-blue-6); border-color: var(--edge-blue-3); }
.pill.done     { background: linear-gradient(180deg, var(--tint-green-1), var(--tint-green-2)); color: var(--on-green-3); border-color: var(--edge-green-4); }
.pill.alert    { background: linear-gradient(180deg, var(--tint-red-2), var(--tint-red-5)); color: var(--on-red-3); border-color: var(--edge-red-1); }
.pill.neutral  { background: linear-gradient(180deg, var(--sf-7), var(--sf-10)); color: var(--ink-2); border-color: var(--bd-3); }
.pill.violet   { background: linear-gradient(180deg, var(--tint-violet-1), var(--tint-violet-2)); color: var(--on-violet-1); border-color: var(--tint-violet-4); }
.pill.inward   { background: linear-gradient(180deg, var(--tint-green-1), var(--tint-green-2)); color: var(--on-green-3); border-color: var(--edge-green-4); }
.pill.outward  { background: linear-gradient(180deg, var(--tint-red-2), var(--tint-red-5)); color: var(--on-red-3); border-color: var(--edge-red-1); }
.pill.transfer { background: linear-gradient(180deg, var(--tint-blue-4), var(--tint-blue-11)); color: var(--on-blue-6); border-color: var(--edge-blue-3); }
.pill.adjust   { background: linear-gradient(180deg, var(--tint-violet-1), var(--tint-violet-2)); color: var(--on-violet-1); border-color: var(--tint-violet-4); }

.chip.alert   { background: linear-gradient(180deg, var(--tint-red-2), var(--tint-red-4)); }
.chip.pending { background: linear-gradient(180deg, var(--tint-amber-2), var(--tint-amber-4)); }
.chip.active  { background: linear-gradient(180deg, var(--tint-blue-4), var(--tint-blue-10)); }
.chip.neutral { background: linear-gradient(180deg, var(--sf-7), var(--sf-10)); }

/* =========================================================================
   10 · FLASHES AND BANNERS
   A coloured bar down the left edge, so the kind of message is readable from
   the corner of the eye before the words are.
   ========================================================================= */
.flash { border-left: 4px solid transparent; }
.flash.success { background: linear-gradient(90deg, var(--tint-green-1), var(--sf-6)); border-color: var(--edge-green-1); border-left-color: #16a34a; color: var(--on-green-1); }
.flash.error   { background: linear-gradient(90deg, var(--tint-red-2), var(--sf-5)); border-color: var(--tint-red-5); border-left-color: #dc2626; color: var(--on-red-2); }
.flash.info    { background: linear-gradient(90deg, var(--tint-blue-4), var(--sf-2)); border-color: var(--tint-blue-11); border-left-color: #2563eb; color: var(--on-blue-5); }

.banner      { background: linear-gradient(90deg, var(--tint-amber-1), var(--sf-5)); border-left: 4px solid #f59e0b; }
.banner.warn { background: linear-gradient(90deg, var(--tint-amber-2), var(--sf-5)); border-left-color: #d97706; }
.banner.ok   { background: linear-gradient(90deg, var(--tint-green-1), var(--sf-2)); border-left-color: #16a34a; }

/* =========================================================================
   11 · TABS, LINKS, PICKERS
   ========================================================================= */
.tabs { border-bottom-color: var(--tint-blue-6); }
.tabs a.active {
  color: var(--c-indigo-d);
  background: linear-gradient(180deg, var(--sf-2), var(--tint-blue-2));
  border-bottom-color: var(--c-indigo);
}
.tabs a:hover { background: var(--sf-2); }
.tabs.stage-tabs a.active .tab-n { background: linear-gradient(135deg, #6366f1, #2563eb); }
.rp-list a.active { background: linear-gradient(90deg, var(--tint-violet-1), var(--sf-2)); border-color: var(--tint-violet-4); color: var(--c-indigo-d); }
.qa:hover { border-color: var(--c-indigo); color: var(--c-indigo-d); background: linear-gradient(180deg, var(--sf-2), var(--tint-blue-1)); }
.fl-i:hover { border-color: var(--c-indigo); background: linear-gradient(180deg, var(--sf-3), var(--tint-blue-2)); }
.ss-item.on { background: linear-gradient(90deg, var(--tint-violet-1), var(--sf-2)); }
.ss-item:hover { background: linear-gradient(90deg, var(--tint-blue-4), var(--sf-3)); }

/* =========================================================================
   12 · BARS AND METERS
   Anything that reads as a proportion gets a two-stop fill, which also makes
   a very short segment visible where a flat one disappeared.
   ========================================================================= */
.pbar > span { background: linear-gradient(90deg, #6366f1, #06b6d4); }
.minibar > span { background: linear-gradient(90deg, #6366f1, #3b82f6); }
.bars .bar.f { background: linear-gradient(180deg, #4ade80, #16a34a); }
.bars .bar.s { background: linear-gradient(180deg, #60a5fa, #2563eb); }
.reg-bar .b-close { background: linear-gradient(90deg, #a78bfa, #6d28d9); }
.reg-bar .b-out   { background: linear-gradient(90deg, #fb7185, #dc2626); }
.cork-bar > span  { background: linear-gradient(90deg, #6366f1, #06b6d4 55%, #10b981 100%); }

/* =========================================================================
   13 · ACCENTED BLOCKS ELSEWHERE IN THE APP
   Small pieces that already carried one flat colour and read better with two.
   ========================================================================= */
.avatar { background: var(--g-brand); }
.onum   { background: linear-gradient(135deg, #6366f1, #2563eb); box-shadow: 0 2px 6px rgba(37, 99, 235, .35); }
.totalbox        { background: linear-gradient(180deg, var(--sf-2), var(--sf-7)); }
.totalbox.green  { background: linear-gradient(180deg, var(--tint-green-1), var(--sf-6)); border-color: var(--edge-green-3); }
.totalbox.blue   { background: linear-gradient(180deg, var(--tint-blue-4), var(--tint-blue-1)); border-color: var(--edge-blue-1); }
.totalbox.violet { background: linear-gradient(180deg, var(--tint-violet-1), var(--sf-3)); border-color: var(--tint-violet-3); }
.panel-title { background: linear-gradient(90deg, var(--tint-amber-3), var(--sf-5)); border-color: var(--edge-amber-3); }
.cat-head.fert { background: linear-gradient(90deg, var(--tint-green-1), var(--sf-6)); }
.cat-head.snd  { background: linear-gradient(90deg, var(--tint-blue-4), var(--sf-2)); }
.ob-label      { background: linear-gradient(90deg, var(--tint-orange-2), var(--tint-orange-1)); }
.hero-top { background: linear-gradient(115deg, #131c3f 0%, #1e2f78 40%, #1d4ed8 74%, #0891b2 100%); }
.export-group.inhouse  { background: linear-gradient(180deg, var(--sf-3), var(--tint-violet-1)); }
.export-group.external { background: linear-gradient(180deg, var(--sf-3), var(--tint-blue-1)); }
.export-group.all      { background: linear-gradient(180deg, var(--sf-6), var(--tint-green-1)); }
.xpanel { background: linear-gradient(180deg, var(--tint-green-1), var(--sf-6)); }
.preset { background: linear-gradient(180deg, var(--sf-2), var(--sf-7)); }
.preset.danger { background: linear-gradient(180deg, var(--tint-red-2), var(--sf-4)); }
.firm.owns { background: linear-gradient(180deg, var(--tint-green-1), var(--sf-2)); }
.reg-step.in    { background: linear-gradient(180deg, var(--tint-green-1), var(--sf-6)); }
.reg-step.out   { background: linear-gradient(180deg, var(--tint-red-2), var(--sf-4)); }
.reg-step.close { background: linear-gradient(180deg, var(--tint-violet-1), var(--sf-3)); }
.co-nums .in  { background: linear-gradient(180deg, var(--tint-green-1), var(--sf-6)); }
.co-nums .out { background: linear-gradient(180deg, var(--tint-red-2), var(--sf-4)); }
.co-nums .cl  { background: linear-gradient(180deg, var(--tint-violet-1), var(--sf-3)); }
.callwho { background: linear-gradient(90deg, var(--tint-blue-4), var(--sf-2)); }
.lookat .la-h.bad { background: linear-gradient(90deg, var(--tint-red-2), var(--sf-4)); }
.rd-new .qact a.lead.in  { background: linear-gradient(180deg, var(--tint-blue-4), var(--tint-blue-1)); }
.rd-new .qact a.lead.out { background: linear-gradient(180deg, var(--tint-green-1), var(--sf-6)); }

/* =========================================================================
   14 · LOGIN
   The only screen with nothing on it, so it is the one screen that can carry
   the whole palette. The gradient drifts slowly; it stands still for anyone
   who has asked their system for less motion.
   ========================================================================= */
.login-wrap {
  background: linear-gradient(125deg, #0d1730 0%, #1e2f78 28%, #4c1d95 52%, #0e7490 78%, #0f766e 100%);
  background-size: 320% 320%;
  animation: ht-drift 22s ease-in-out infinite;
}
@keyframes ht-drift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) { .login-wrap { animation: none; } }
.login-card {
  border-top: 4px solid transparent;
  border-image: var(--g-spectrum) 1;
  box-shadow: 0 30px 70px rgba(4, 10, 26, .45);
}
.login-card .logo { background: var(--g-brand) !important; box-shadow: 0 6px 18px rgba(59, 130, 246, .45); }
.login-card h1 {
  background: linear-gradient(92deg, #0f172a, #2563eb);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =========================================================================
   15 · SCROLLBARS
   ========================================================================= */
body::-webkit-scrollbar, .table-wrap::-webkit-scrollbar,
.content ::-webkit-scrollbar { width: 11px; height: 11px; }
body::-webkit-scrollbar-track, .table-wrap::-webkit-scrollbar-track,
.content ::-webkit-scrollbar-track { background: var(--sf-7); }
body::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb,
.content ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #93a8d6, var(--fill-4)); border-radius: 8px; border: 2px solid var(--bd-1);
}
body::-webkit-scrollbar-thumb:hover, .table-wrap::-webkit-scrollbar-thumb:hover,
.content ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #6366f1, #2563eb); }

/* =========================================================================
   16 · PRINT
   None of this belongs on a challan. Everything painted above is stripped
   back to ink on white so a printed document costs no toner and no clarity.
   ========================================================================= */
@media print {
  body { background: #fff !important; background-image: none !important; }
  .card, .kpi { box-shadow: none !important; background-image: none !important; }
  .btn, .topbar, .hero-top { background-image: none !important; }
  .card > h2::before { display: none; }
  table.data th { background: #f1f5f9 !important; color: #334155 !important; }
  .pill, .chip, .flash, .banner { background-image: none !important; }
}