/* ==========================================================================
   STCP — Mockup — Shared theme
   ========================================================================== */

/* Light theme (issue #117, 2026-09-14) — the former hand-reproduced Figma
   palette (issue #103) has been replaced by the *real* Quantum Design
   System bundle, now vendored locally at css/vendor/quantum/ (quantum.css +
   quantum-tokens-light.css, loaded before this file in every page's
   <head>). Every value below is a direct alias of a real Quantum CSS
   variable — no more hand-picked hex approximations. Variable NAMES are
   kept unchanged from before on purpose: every component file already
   consumes these tokens by name, so remapping their values to real Quantum
   tokens here re-themes the whole app without touching each file
   individually — only structural/markup differences need dedicated
   component-level rewrites (buttons/tags/alerts/inputs/etc. moving to the
   real .qtm-* classes) on top of this. */
:root {
  --bg-void: var(--color-background-default);      /* --color-bluegrey-25 — page canvas */
  --bg-panel: var(--color-white-100);               /* card/panel surface */
  --bg-panel-alt: var(--color-background-default);  /* recessed section within a card */
  --bg-elevated: var(--color-white-100);            /* buttons/inputs, defined by their border */
  --bg-titlebar: var(--color-bluegrey-50);          /* panel title bars (Figma "Title panel"/"Title chat") */
  --border-soft: var(--color-bluegrey-100);
  --border-strong: var(--color-bluegrey-300);

  --text-primary: var(--color-font-on-background-default); /* --color-bluegrey-900 */
  --text-secondary: var(--color-bluegrey-700);
  --text-muted: var(--color-bluegrey-500);

  --accent: var(--color-primary-default);   /* --color-blue-500 */
  --accent-hover: var(--color-primary-hover);
  --accent-pressed: var(--color-primary-pressed);
  --accent-soft: var(--color-blue-100);     /* solid light tint (was accent+alpha on the old dark theme) */
  --accent-glow: rgba(4, 18, 149, 0.25);    /* no Quantum "glow" token — kept literal, same blue-500 base */
  --accent-cyan: var(--accent); /* was a separate lightblue/500 (#00bbdd); aliased to the same navy used everywhere else, per user request */
  --accent-dark: var(--color-blue-900);     /* text on an --accent-soft fill (Figma "Tag - Primary", unselected state) */

  /* Quantum has no "risk"/"status" vocabulary of its own — only the generic
     semantic colors below (primary/success/warning/danger/neutral). Mapped
     onto our domain vocabulary here so every component file keeps using
     --risk-* / --status-* by name. Space kept between the star and the
     slash on purpose (found live, 2026-09-16): written back to back, that
     pair forms an early, unintended comment-close mid-sentence, and
     --risk-high below got silently swallowed as part of the resulting
     invalid declaration all the way to the next semicolon — present in
     every browser, not a rendering fluke. var(--risk-high) came back empty
     everywhere it's used (this rule's own consumers below, chat.css,
     notifications.css's unread bell dot), yet --risk-high-bg right after
     it, a separate declaration past that semicolon, was never affected. */
  --risk-high: var(--color-danger-default);    /* --color-red-500 */
  --risk-high-bg: #e01e0022;
  --risk-medium: var(--color-warning-default); /* --color-orange-500 — was a hand-picked orange/400, now the real semantic warning token */
  --risk-medium-bg: #e0790022;
  --risk-low: var(--color-success-default);    /* --color-green-500 */
  --risk-low-bg: #17824422;

  --status-none: var(--color-bluegrey-500);
  --status-progress: var(--color-primary-default);
  --status-resolved: var(--color-success-default);
  --status-no-action: var(--color-bluegrey-500);
  --status-no-action-bg: #5d607e22;
  --status-archived: var(--color-bluegrey-300);
  /* Pending negotiation/closure state (Figma "chat" section, node 1:7312) —
     no semantic Quantum token for this state, but the exact hex matches
     --color-purple-500 in the raw palette scale, so aliased to that. */
  --status-pending: var(--color-purple-500);

  --premium: var(--color-yellow-500);
  --premium-bg: #fdda2422;

  --radius-sm: var(--border-radius-medium); /* 0.125rem = 2px */
  --radius-md: var(--border-radius-large);  /* 0.25rem = 4px */
  --radius-lg: 8px; /* no Quantum radius token this large (largest named scale step is --border-radius-large = 4px) */

  --shadow-soft: var(--shadow-s-light);
  --font-main: var(--font-family-roboto), "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

/* Same-specificity trap already hit once in this codebase (issue #53,
   admin.html's action menu): the Quantum bundle sets `display: flex` (or
   grid/block) on several of its own component classes (.qtm-datatable-row,
   .qtm-modal, .qtm-dropdown-overlay's JS-toggled parent, ...) at the same
   0-1-0 specificity as the browser's own `[hidden]{display:none}` rule —
   and author stylesheets always win that tie regardless of source order, so
   a plain `hidden` attribute on any of those elements silently stops
   hiding them. Force it back everywhere, once. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-main);
  height: 100vh;
}

a { color: inherit; }

/* Brand mark (logo + name) — shared by dashboard.html's header and
   admin.html's topbar (both override the border/padding below, see
   .app-header-left .brand in header.css and .admin-topbar .brand in
   admin.css — this border-bottom only ever made sense for the old
   vertical sidebar-top layout, pre-#103). */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px 14px;
  border-bottom: 1px solid var(--border-soft);
}

/* logo_light_mode.png is a wide mark (~2.1:1, a thin orbit line extends
   past the circle on both sides) — object-fit: cover into a square box
   cropped those tips off. Sized by height, full width shown instead. */
.brand img {
  height: 36px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 8px var(--accent-glow));
}

.brand-name {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.03em;
}

/* Form fields — real Quantum components now (.qtm-form-label + .qtm-text-input
   + .qtm-form-caption for validation text, .qtm-dropdown-select for
   <select>), used directly in markup across the login/signup/change-password
   screens and admin.html's own forms (invitation, inline user actions). Only
   layout glue lives here — the "field" grouping/spacing wrapper and the
   trailing icon-as-button override .qtm-text-input needs for the password
   show/hide toggle (Quantum's trailing .qtm-icon is decorative by default,
   pointer-events:none — this class re-enables it for that one interactive
   case). */
.field {
  text-align: left;
  margin-bottom: 16px;
}

.field .qtm-form-label {
  display: block;
  margin-bottom: 6px;
}

.field .qtm-text-input {
  width: 100%;
}

/* Quantum's .qtm-dropdown-select is a JS-driven custom combobox (trigger
   input + overlay), not a skin for a native <select> — there is no
   .qtm-<x> class in the bundle that styles a bare <select> element. Native
   <select> stays (keyboard/accessibility semantics for free) but is
   reskinned by hand using the same --input-* tokens .qtm-text-input itself
   consumes, so it still matches the real design system's input look. */
.qtm-native-select {
  width: 100%;
  height: var(--input-medium-height);
  padding: var(--input-medium-padding-top) var(--input-medium-padding-right) var(--input-medium-padding-bottom) var(--input-medium-padding-left);
  font-family: var(--input-font-family, var(--font-main));
  font-size: var(--input-medium-font-size);
  line-height: var(--input-medium-line-height);
  color: var(--input-text-color);
  background-color: var(--input-background-color);
  border: var(--input-border-width) var(--input-border-style) var(--input-border-color);
  border-radius: var(--input-border-radius);
  cursor: pointer;
}

.qtm-native-select:hover:not(:disabled) { background-color: var(--input-hover-background-color); }
.qtm-native-select:focus { outline: none; border-color: var(--input-focus-border-color); }
.qtm-native-select:disabled {
  color: var(--input-disabled-text-color);
  background-color: var(--input-disabled-background-color);
  border-color: var(--input-disabled-border-color);
  cursor: not-allowed;
}

.qtm-text-input .qtm-icon.icon-button-in-input {
  pointer-events: auto;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
}

.btn-block {
  width: 100%;
  margin-top: 8px;
}

/* Custom number-input stepper: the native browser up/down arrows look
   inconsistent and clash with the dark theme, so we hide them and draw our
   own compact, theme-colored ones instead (see .number-stepper below). */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.number-stepper {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.number-stepper input[type="number"] {
  width: 100%;
  padding-right: 18px;
}

.number-stepper-controls {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.number-stepper-btn {
  width: 13px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.number-stepper-btn:hover {
  background: var(--accent);
  color: white;
}

.number-stepper-btn::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}

.number-stepper-btn.up::before { border-bottom: 4px solid currentColor; }
.number-stepper-btn.down::before { border-top: 4px solid currentColor; }

button {
  font-family: inherit;
  cursor: pointer;
}

/* Thin themed scrollbars for every internal scroll region */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar { width: 7px; height: 7px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Every .qtm-tooltip in this app uses a light card, matching the rest of
   the light theme — the bundle's own default is a dark/high-contrast
   tooltip (--tooltip-highcontrast-background-color = bluegrey-900, white
   text), which read as an out-of-place dark patch on an otherwise all-light
   page (user request). Overriding the underlying custom properties (not
   just .qtm-tooltip-container's background/color directly) so the little
   arrow — a pseudo-element that reads the same --tooltip-highcontrast-*
   variable for its own fill — stays the same color as the body instead of
   staying dark against a now-light box. */
.qtm-tooltip {
  --tooltip-highcontrast-background-color: var(--bg-panel);
  --tooltip-font-color: var(--text-primary);
}

.qtm-tooltip-container {
  border: 1px solid var(--border-soft);
}

.qtm-tooltip-title {
  color: var(--accent);
  font-weight: 700;
}