/* =====================================================================
   theme.css — design tokens for the app (light + dark mode)
   ---------------------------------------------------------------------
   The single source of truth for color. Works with public/css/ds.css
   (component layer). Every stylesheet/inline style is being migrated from
   hardcoded hex/rgb to var(--token) references.

   PALETTE: Light = Sellevry blue #0350a6 (the blue of the se. logo tile),
   violet #6337ad as its second colour; Dark = "Graphite & Signal", amber
   accent #e6a32e (the logo's orange dot). Shared token values
   here mirror docs/UI rules/app-ds/ds.css so ds.css components and legacy
   pages render on one palette.

   NOTE: as of the 2026-06-14 reskin, light mode is intentionally NOT the
   old literal palette — it adopts the refined primary blue tokens globally.

   data-theme is set on <html> before paint by a tiny inline head script
   (no FOUC); the toggle lives in the user-avatar menu (see theme.js).
   ===================================================================== */

:root {
  color-scheme: light;

  /* — surfaces — */
  --bg:           #eef0f3;   /* Trimble Gray-Light canvas */
  --surface:      #ffffff;   /* cards, panels, modals, inputs */
  --surface-2:    #e7eaef;   /* hover rows, soft containers, locked inputs */
  --surface-3:    #d9dee5;   /* meta tags, subtle fills */
  --input-bg:     #ffffff;
  --surface-gradient: linear-gradient(135deg, #ffffff 0%, #e7eaef 100%); /* card faces */
  --info-widget-bg:     var(--surface);  /* dashboard info widgets — same fill as tiles, set apart by a bold accent frame */
  --info-widget-border: var(--accent);
  --dash-divider:       #f6a31c;  /* dashboard section divider — Trimble Yellow */

  /* — text — */
  --text:         #283740;   /* Trimble Gray — body / default text */
  --text-strong:  #1b2730;   /* headings */
  --text-subtle:  #4e5a65;   /* secondary labels */
  --text-muted:   #6c7883;   /* helper text, metadata */
  --text-faint:   #9aa6b1;   /* placeholders, faded */
  --text-inverse: #ffffff;   /* text on dark/colored surfaces — stays light */

  /* — borders — */
  --border:        #d3d8e0;  /* default borders / dividers / grid lines */
  --border-subtle: #dadfe6;  /* input borders */
  --border-light:  #e6e9ee;  /* faint dividers */
  --rule:          1px solid var(--border-light);

  /* — accents / state — */
  --accent:        #0350a6;  /* Sellevry blue (logo) — primary action, links, focus */
  --accent-strong: #023f86;  /* Sellevry blue dark — header base, button hover */
  --brand:         var(--accent);
  --info:          #1f88c7;
  /* Accent gradients — shared by CTA buttons, header-icon chips, top accent
     bars. --accent-end is the far end of every filled accent gradient (primary
     buttons included). Light = blue → violet, the first leg of the se. logo;
     dark overrides it to stay amber so the fade never bleeds into blue. */
  --accent-end:      #6337ad;
  --accent-gradient: linear-gradient(135deg, var(--accent), var(--accent-end));
  --accent-bar:      linear-gradient(90deg, var(--accent), var(--info), var(--info-light));
  --success:       #1a7a4e;
  /* Presence badge (the "who's online" count in the topbar). Deliberately NOT
     --success: that green is chosen to read on a page surface, and the badge
     sits on the TOPBAR — which is Trimble Blue in light and near-black in dark.
     Dark green on that blue is 1.16:1, i.e. invisible. This mint reads on both
     bars (3.7:1 on the blue, 10.9:1 on the dark) with a very dark green label,
     so ONE pair serves both themes and the dark block overrides nothing. */
  --presence-bg:   #6fdca8;
  --presence-text: #0b3d26;
  --danger:        #d23b2e;
  --warning:       #b97e09;
  --signal:        #f6a31c;  /* Trimble Yellow — attention/secondary signal */
  --on-brand:      #ffffff;  /* text on accent fills */
  --link:          #0350a6;
  --accent-focus-ring: rgba(3, 80, 166, 0.22);
  --chat-out-bg:   #0350a6;  /* outbound (our) chat bubble — Sellevry blue, white text */
  --chat-out-text: #ffffff;

  /* — effects (layered for depth so cards read dimensional, not flat) — */
  --shadow-sm: 0 1px 2px rgba(12, 36, 64, 0.08), 0 1px 3px rgba(12, 36, 64, 0.11);
  --shadow-md: 0 2px 6px rgba(12, 36, 64, 0.10), 0 10px 24px rgba(12, 36, 64, 0.15);
  --shadow-lg: 0 8px 18px rgba(12, 36, 64, 0.14), 0 24px 56px rgba(12, 36, 64, 0.23);
  --overlay:   rgba(12, 23, 40, 0.45);

  /* — type & shape — */
  --font-display:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --radius:12px; --radius-lg:16px; --radius-sm:8px;

  /* — toast anchor (THE one corner: TOP-RIGHT, on every page) —
     Every transient notice in the app renders in the shared .toast-region
     (app.css) anchored here. 72px = the fixed .topbar's 60px + 12px breathing
     room, so a toast never hides behind it. Not theme-dependent — declared once
     in :root so a page with no topbar (login/2fa) can override the ONE token
     instead of re-implementing a corner. */
  --toast-top:   72px;
  --toast-right: 22px;
  --toast-gap:   10px;
  --toast-width: min(420px, calc(100vw - 44px));

  /* — dropdown arrow — THE one chevron every single-value <select> paints
     (app.css "ONE DROPDOWN ARROW"), and the .inv-dropdown checkbox dropdown
     mirrors. Lucide chevron-down, 14px. A data URI cannot read a CSS variable,
     so its stroke is a fixed mid-grey that reads on BOTH themes' input
     surfaces — declared once in :root, not per theme. */
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23808a99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

  /* — header / topbar (deep → Sellevry blue, dark in BOTH themes) — */
  --header-bg:   linear-gradient(135deg, #023f86 0%, #0350a6 100%);
  --header-text: #ffffff;
  /* solid table / column header bar (deep Sellevry blue, white labels) */
  --th-bg: #023f86;  --th-text: #ffffff;
  /* The accent AS IT READS ON THAT BAR — the sort-column arrows, and anything
     else that wants the primary colour inside a table header. --accent
     (#0350a6) on --th-bg (#023f86) is 1.5:1, i.e. invisible: same trap as the
     presence badge above. This is a light sky blue at 5.2:1 on the bar. Dark's header is slate, so there the amber --accent already reads
     (5.9:1) and the token just points at it. */
  --th-accent: #7cc0ee;

  /* — status pills: bg / text / border — */
  --pill-green-bg: #e3f3ec;  --pill-green-text: #15663f;  --pill-green-border: #b3ddc6;
  --pill-blue-bg:  #e3ecf8;  --pill-blue-text:  #0350a6;  --pill-blue-border:  #b8cdea;
  --pill-amber-bg: #fdf0d6;  --pill-amber-text: #8a5a08;  --pill-amber-border: #f1d79c;
  --pill-red-bg:   #fbeae8;  --pill-red-text:   #b3271a;  --pill-red-border:   #f1c2bc;
  --pill-gray-bg:  #eceef1;  --pill-gray-text:  #505b66;  --pill-gray-border:  #ced5dd;

  /* — listing-goal result cells: solid, high-contrast fills (both themes) — */
  --goal-achieved-bg: #2e9e63;  --goal-over-bg: #14653d;  --goal-missed-bg: #cf3b2e;  --goal-avg-bg: #1f88c7;  --goal-fg: #ffffff;
  --pill-purple-bg:#efe9f8;  --pill-purple-text:#6337ad;  --pill-purple-border:#d5c6ee;  /* the logo's violet */

  /* — extended tokens (added during the 2026-06-14 reskin sweep) — */
  /* soft accent fill/border for chips & icon badges */
  --accent-soft:   #e3ecf8;  --accent-border: #b8cdea;
  /* a hover/emphasis border darker than --border */
  --border-strong: #b4bcc8;
  /* light frosted scrim (e.g. lock overlay) — becomes a dark scrim in dark mode */
  --scrim-light:   rgba(255, 255, 255, 0.9);
  /* state-color light/strong variants for gradients & button hovers */
  --success-light: #2a9a66;  --success-strong: #15663f;
  --danger-light:  #e05546;  --danger-strong:  #a31f14;
  --info-light:    #5aa9e0;
  /* soft callout surfaces: bg + (darker) text + border, per state */
  --warning-surface: #fdf0d6;  --warning-surface-text: #7a5208;  --warning-surface-border: #f1d79c;
  --danger-surface:  #fbeae8;  --danger-surface-text:  #7a1c12;  --danger-surface-border:  #f1c2bc;
  --success-surface: #e3f3ec;  --success-surface-text: #13502f;  --success-surface-border: #b3ddc6;
}

html[data-theme="dark"] {
  color-scheme: dark;

  /* — surfaces ("Graphite") — */
  --bg:           #121820;
  --surface:      #1d2530;
  --surface-2:    #262f3b;
  --surface-3:    #313c4a;
  --input-bg:     #161d26;   /* recessed below cards so fields are distinct */
  --surface-gradient: linear-gradient(135deg, #1d2530 0%, #262f3b 100%);
  --info-widget-bg:     var(--surface);  /* same fill as tiles, set apart by a bold accent frame */
  --info-widget-border: var(--accent);

  /* — text — */
  --text:         #d3dce7;
  --text-strong:  #f3f6fb;
  --text-subtle:  #aeb9c7;
  --text-muted:   #8392a2;
  --text-faint:   #5d6b7a;
  --text-inverse: #ffffff;

  /* — borders (kept clearly visible on dark so sections keep structure) — */
  --border:        #33404f;
  --border-subtle: #3b4857;
  --border-light:  #29323d;

  /* — accents / state ("Signal" amber). --on-brand is DARK text since the
     amber accent is light; --link/--info stay blue for legible inline links. — */
  --accent:        #e6a32e;
  --accent-strong: #f2bb52;
  --info:          #5aa9ef;
  /* Keep accent gradients within the amber hue in dark mode — no blue bleed. */
  --accent-end:      var(--accent-strong);
  --accent-gradient: linear-gradient(135deg, var(--accent), var(--accent-end));
  --accent-bar:      linear-gradient(90deg, var(--accent-strong), var(--accent), var(--accent-strong));
  --success:       #3fb46b;
  --danger:        #f0746b;
  --warning:       #e6a32e;
  --signal:        #e6a32e;
  --on-brand:      #1b1304;
  --link:          #5aa9ef;
  --accent-focus-ring: rgba(230, 163, 46, 0.35);
  --chat-out-bg:   #2c6cb8;  /* outbound chat stays blue so white bubble text reads */
  --chat-out-text: #ffffff;

  /* — effects (deeper; soft light-mode shadows vanish on dark) — */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.65);
  --overlay:   rgba(0, 0, 0, 0.65);

  /* — header / topbar (graphite gradient) — */
  --header-bg:   linear-gradient(135deg, #151b22 0%, #232d38 100%);
  --header-text: #e9eef4;
  /* solid table / column header bar (lighter slate so it separates on dark) */
  --th-bg: #28333f;  --th-text: #e7ecf1;
  --th-accent: var(--accent);

  /* — status pills: translucent dark fills + lighter text — */
  --pill-green-bg: rgba(63, 180, 107, 0.16);  --pill-green-text: #86e0a8;  --pill-green-border: rgba(63, 180, 107, 0.42);
  --pill-blue-bg:  rgba(90, 169, 239, 0.16);  --pill-blue-text:  #9cc8f5;  --pill-blue-border:  rgba(90, 169, 239, 0.42);
  --pill-amber-bg: rgba(230, 163, 46, 0.20);  --pill-amber-text: #f3c969;  --pill-amber-border: rgba(230, 163, 46, 0.5);
  --pill-red-bg:   rgba(240, 116, 107, 0.16); --pill-red-text:   #f4a59d;  --pill-red-border:   rgba(240, 116, 107, 0.42);
  --pill-gray-bg:  rgba(132, 147, 162, 0.16); --pill-gray-text:  #c3ccd6;  --pill-gray-border:  rgba(132, 147, 162, 0.4);
  --pill-purple-bg:rgba(128, 90, 213, 0.20);  --pill-purple-text:#d6bcfa;  --pill-purple-border:rgba(128, 90, 213, 0.45);

  /* — listing-goal result cells: solid, high-contrast fills (both themes) — */
  --goal-achieved-bg: #2f9b5e;  --goal-over-bg: #1c6e44;  --goal-missed-bg: #cf4034;  --goal-avg-bg: #2b86c4;  --goal-fg: #ffffff;

  /* — extended tokens (dark variants) — */
  --accent-soft:   rgba(230, 163, 46, 0.16);  --accent-border: rgba(230, 163, 46, 0.42);
  --border-strong: #4a5867;
  --scrim-light:   rgba(18, 24, 32, 0.85);   /* light scrim flips to a dark scrim on dark */
  --success-light: #5cc283;  --success-strong: #2f9d5d;
  --danger-light:  #f4938b;  --danger-strong:  #d9544b;
  --info-light:    #7cbcf3;
  --warning-surface: rgba(230, 163, 46, 0.14);  --warning-surface-text: #f3c969;  --warning-surface-border: rgba(230, 163, 46, 0.4);
  --danger-surface:  rgba(240, 116, 107, 0.14); --danger-surface-text:  #f4a59d;  --danger-surface-border:  rgba(240, 116, 107, 0.4);
  --success-surface: rgba(63, 180, 107, 0.14);  --success-surface-text: #86e0a8;  --success-surface-border: rgba(63, 180, 107, 0.4);
}

/* Native checkboxes/radios: keep them clearly visible + on-brand in dark. */
html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"] {
  accent-color: var(--accent);
}

/* =====================================================================
   VIEWPORT HEIGHT — `--vh` is THE unit for anything sized to the screen
   (a fixed panel, a modal's ceiling, a scroll box inside the page).
   `100vh` is the LARGEST viewport on a phone: it ignores the browser's
   collapsible address/toolbar, so a panel sized with it runs under that
   bar and its bottom row of buttons is unreachable (iOS Safari, Chrome
   Android). `100dvh` follows the bar as it shows and hides. Write
   `calc(var(--vh) - 60px)` / `calc(var(--vh) * .9)`, never a bare `100vh`
   or `90vh`, and every panel fits the screen the operator actually has.
   Page-height minimums (body / .main min-height) may keep `100vh` — a page
   that grows when the bar collapses is fine; a panel that hides its
   buttons is not. (2026-09-26)
   ===================================================================== */
:root { --vh: 100vh; }
@supports (height: 100dvh) {
  :root { --vh: 100dvh; }
}