/* ==========================================================================
   QZONE OMS — DESIGN TOKENS
   Design language: "Command Console" — dark-first, high contrast, compact
   density, tabular figures, sharp geometry, accent reserved for state.

   No glassmorphism, no backdrop blur, no gradient chrome, no glow shadows.
   Depth here comes from layered opaque surfaces and hairline rules, never
   from blur.

   One scoped exception: the card header band (.qz-surface__head, and the
   legacy .card-header the bridge maps onto it) carries an "accent glass"
   fill — a low-alpha brand tint under a top sheen. It is a flat fill, not a
   blur. Note it is tinted with the ACCENT and never with white: a
   white-alpha lift is a dark-mode-only illusion, since the light scheme's
   card is already #ffffff. See --qz-head-fill-* below, which is why those
   tokens are redeclared per scheme.

   The canvas is a blue-shifted graphite so the QZONE blue sits on a ground
   of its own family rather than fighting a neutral grey. The accent is the
   only saturated hue on the page, so it reads as signal, not decoration.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Brand ---------------------------------------------------------- */
  --qz-brand:            #004a73;  /* logo blue, deep   */
  --qz-brand-light:      #0d6eaa;  /* logo blue, light  */
  --qz-brand-dark:       #003355;  /* logo blue, darkest */
  --qz-brand-gold:       #c28a00;  /* secondary, gold   */

  /* ---- Canvas: blue-shifted graphite, five opaque steps --------------- */
  --qz-bg:               #070b0f;  /* app background        */
  --qz-surface-1:        #0d1319;  /* rail / panel          */
  --qz-surface-2:        #121a22;  /* cards, table headers  */
  --qz-surface-3:        #18222c;  /* raised, popovers      */
  --qz-surface-4:        #1f2c38;  /* hover / pressed       */
  --qz-surface-inset:    #0a0f14;  /* wells, inputs, code   */

  /* ---- Hairlines ------------------------------------------------------ */
  --qz-line:             #1f2a35;  /* default rule          */
  --qz-line-soft:        #161f28;  /* internal dividers     */
  --qz-line-strong:      #2d3d4b;  /* emphasized edge       */

  /* ---- Text ----------------------------------------------------------- */
  --qz-text:             #e6edf3;  /* primary               */
  --qz-text-dim:         #9fb0bf;  /* secondary             */
  --qz-text-mute:        #6b7f8f;  /* tertiary / labels     */
  --qz-text-faint:       #47586a;  /* disabled              */
  --qz-text-invert:      #070b0f;

  /* ---- Accent (interactive + brand) -----------------------------------
     #004a73 is too dark to carry interaction on a dark canvas, so the dark
     scheme uses a lifted rendering of the same blue (6.5:1 on --qz-bg) and
     keeps the literal brand value for pressed states and light mode. */
  --qz-accent:           #2e9fd4;
  --qz-accent-hi:        #5cbce8;
  --qz-accent-lo:        #0d6eaa;
  --qz-accent-weak:      rgba(46, 159, 212, 0.14);
  --qz-accent-weaker:    rgba(46, 159, 212, 0.07);
  --qz-accent-line:      rgba(46, 159, 212, 0.32);
  --qz-on-accent:        #05141d;

  /* ---- Status ---------------------------------------------------------
     Info is cyan rather than blue: the accent already owns blue here, so a
     blue "info" would be indistinguishable from an interactive element. */
  --qz-ok:               #2ecc85;
  --qz-ok-weak:          rgba(46, 204, 133, 0.13);
  --qz-ok-line:          rgba(46, 204, 133, 0.30);

  --qz-warn:             #e9b949;
  --qz-warn-weak:        rgba(233, 185, 73, 0.13);
  --qz-warn-line:        rgba(233, 185, 73, 0.30);

  --qz-crit:             #ff4a5c;
  --qz-crit-weak:        rgba(255, 74, 92, 0.13);
  --qz-crit-line:        rgba(255, 74, 92, 0.30);

  --qz-info:             #22d3ee;
  --qz-info-weak:        rgba(34, 211, 238, 0.13);
  --qz-info-line:        rgba(34, 211, 238, 0.30);

  --qz-idle:             #7d8695;
  --qz-idle-weak:        rgba(125, 134, 149, 0.13);
  --qz-idle-line:        rgba(125, 134, 149, 0.28);

  /* ---- Card header fill — "accent glass" -------------------------------
     The header band on every card surface. Tinted with the ACCENT rather
     than white on purpose: a white-alpha lift is a dark-mode-only illusion,
     because in the light scheme the card is already #ffffff and white on
     white renders nothing. Tinting with the brand hue gives a header that
     reads in both schemes, so these are redeclared in the light block below.
     The sheen is a top inner highlight; it works in light too because the
     band underneath it is darker than the card. */
  --qz-head-fill-hi:     rgba(46, 159, 212, 0.13);
  --qz-head-fill-lo:     rgba(46, 159, 212, 0.04);
  --qz-head-sheen:       rgba(255, 255, 255, 0.08);

  /* ---- Tone gradients — saturated panel fills ---------------------------
     Carried over from the pre-overhaul stat cards, where the header block was
     a solid brand gradient carrying white text in BOTH schemes. They are
     deliberately declared once on the base :root and not re-declared in the
     light block: the panel is its own colour field, so it does not flip with
     the surface tokens. Use only where the fill spans a whole block and the
     content on top is white — never as a text or hairline colour. */
  --qz-grad-accent:      linear-gradient(135deg, #00365a 0%, #0d6eaa 100%);
  --qz-grad-ok:          linear-gradient(135deg, #12855a 0%, #2ab879 100%);
  --qz-grad-warn:        linear-gradient(135deg, #c47a12 0%, #e2a33d 100%);
  --qz-grad-crit:        linear-gradient(135deg, #a32330 0%, #e0424f 100%);
  --qz-grad-info:        linear-gradient(135deg, #0d6eaa 0%, #2e9fd4 100%);

  /* Categorical series — for charts. Ordered for maximum adjacent contrast. */
  --qz-series-1: #2e9fd4;
  --qz-series-2: #2ecc85;
  --qz-series-3: #e9b949;
  --qz-series-4: #b07cff;
  --qz-series-5: #ff4a5c;
  --qz-series-6: #22d3ee;
  --qz-series-7: #ff9f45;
  --qz-series-8: #8c98a8;

  /* ---- Typography ----------------------------------------------------- */
  --qz-font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --qz-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --qz-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — compact. Console density means small, tight, legible. */
  --qz-fs-2xs:  0.6875rem;  /* 11px — micro labels, table meta   */
  --qz-fs-xs:   0.75rem;    /* 12px — labels, badges, captions   */
  --qz-fs-sm:   0.8125rem;  /* 13px — table body, secondary      */
  --qz-fs-base: 0.875rem;   /* 14px — body default               */
  --qz-fs-md:   1rem;       /* 16px — lead                       */
  --qz-fs-lg:   1.25rem;    /* 20px — section title              */
  --qz-fs-xl:   1.625rem;   /* 26px — page title                 */
  --qz-fs-2xl:  2.25rem;    /* 36px — metric figure              */
  --qz-fs-3xl:  3rem;       /* 48px — hero figure                */

  --qz-lh-tight: 1.2;
  --qz-lh-snug:  1.4;
  --qz-lh-base:  1.55;

  /* Letterspacing — small caps labels are a signature of this design */
  --qz-track-label: 0.09em;
  --qz-track-tight: -0.015em;

  /* ---- Geometry — sharp surfaces, pill controls ------------------------ */
  --qz-r-xs:  2px;
  --qz-r-sm:  3px;
  --qz-r-md:  4px;
  --qz-r-lg:  6px;
  --qz-r-xl:  8px;
  --qz-r-pill: 999px;   /* every button is a pill */

  /* ---- Spacing (4px base) --------------------------------------------- */
  --qz-s-1:  4px;
  --qz-s-2:  8px;
  --qz-s-3:  12px;
  --qz-s-4:  16px;
  --qz-s-5:  20px;
  --qz-s-6:  24px;
  --qz-s-8:  32px;
  --qz-s-10: 40px;
  --qz-s-12: 48px;
  --qz-s-16: 64px;

  /* ---- Density -------------------------------------------------------- */
  --qz-row-h:      40px;   /* table row       */
  --qz-control-h:  34px;   /* input / button  */
  --qz-control-h-sm: 28px;
  --qz-control-h-lg: 40px;

  /* ---- Elevation — flat rings + hard shadows, never glow --------------- */
  --qz-ring:        inset 0 0 0 1px var(--qz-line);
  --qz-ring-strong: inset 0 0 0 1px var(--qz-line-strong);
  --qz-focus:       0 0 0 2px var(--qz-bg), 0 0 0 4px var(--qz-accent);
  --qz-shadow-1:    0 1px 2px rgba(0, 0, 0, 0.5);
  --qz-shadow-2:    0 4px 12px rgba(0, 0, 0, 0.55);
  --qz-shadow-3:    0 12px 32px rgba(0, 0, 0, 0.65);

  /* ---- Shell metrics --------------------------------------------------- */
  --qz-rail-w:     50px;
  --qz-panel-w:    200px;
  --qz-topbar-h:   52px;
  --qz-tabbar-h:   58px;
  /* The content well runs full-bleed up to this width and centres beyond it.
     Set high enough that ordinary laptop and 1080p screens use every pixel;
     it only starts holding the measure back on genuinely ultra-wide displays.
     The topbar padding is calculated from this value, so the breadcrumb and
     account button stay aligned with the page content whatever it is set to. */
  --qz-content-max: 1900px;

  /* ---- Motion ---------------------------------------------------------- */
  --qz-ease:      cubic-bezier(0.2, 0, 0.13, 1);
  --qz-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --qz-dur-fast:  120ms;
  --qz-dur:       180ms;
  --qz-dur-slow:  280ms;

  --qz-z-rail: 60;
  --qz-z-panel: 55;
  --qz-z-topbar: 50;
  --qz-z-tabbar: 65;
  --qz-z-scrim: 70;
  --qz-z-drawer: 75;
  --qz-z-dropdown: 3000;
  --qz-z-modal: 1060;
  --qz-z-toast: 1090;
}

/* ==========================================================================
   LIGHT MODE
   Not a tint of the dark theme — a separately reasoned paper-and-ink scheme.
   Same structure, same density, same sharp geometry.

   The surface and text steps are carried over from the previous QZONE light
   theme, so the light rendering stays recognisably the product it was.
   ========================================================================== */

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

  --qz-bg:               #f4f7fb;
  --qz-surface-1:        #ffffff;
  --qz-surface-2:        #ffffff;
  --qz-surface-3:        #ffffff;
  --qz-surface-4:        #e2ebf5;
  --qz-surface-inset:    #f7f9fc;

  --qz-line:             #d7e2ee;
  --qz-line-soft:        #e6edf5;
  --qz-line-strong:      #b9cbdd;

  --qz-text:             #1a2d44;
  --qz-text-dim:         #3d5c78;
  --qz-text-mute:        #6c8ea8;
  --qz-text-faint:       #9db2c6;
  --qz-text-invert:      #ffffff;

  /* Light mode can use the literal brand blue: #004a73 is 9.4:1 on white. */
  --qz-accent:           #004a73;
  --qz-accent-hi:        #003355;
  --qz-accent-lo:        #0d6eaa;
  --qz-accent-weak:      rgba(0, 74, 115, 0.10);
  --qz-accent-weaker:    rgba(0, 74, 115, 0.05);
  --qz-accent-line:      rgba(0, 74, 115, 0.28);
  --qz-on-accent:        #ffffff;

  --qz-ok:               #198754;
  --qz-ok-weak:          rgba(25, 135, 84, 0.10);
  --qz-ok-line:          rgba(25, 135, 84, 0.26);

  --qz-warn:             #c28a00;
  --qz-warn-weak:        rgba(194, 138, 0, 0.10);
  --qz-warn-line:        rgba(194, 138, 0, 0.26);

  --qz-crit:             #dc3545;
  --qz-crit-weak:        rgba(220, 53, 69, 0.10);
  --qz-crit-line:        rgba(220, 53, 69, 0.26);

  --qz-info:             #0e7490;
  --qz-info-weak:        rgba(14, 116, 144, 0.10);
  --qz-info-line:        rgba(14, 116, 144, 0.26);

  --qz-idle:             #6c757d;
  --qz-idle-weak:        rgba(108, 117, 125, 0.10);
  --qz-idle-line:        rgba(108, 117, 125, 0.24);

  /* Same tint at the same strength, keyed to the light scheme's accent
     (#004a73) so the header band stays visible on a white card. */
  --qz-head-fill-hi:     rgba(0, 74, 115, 0.13);
  --qz-head-fill-lo:     rgba(0, 74, 115, 0.04);
  --qz-head-sheen:       rgba(255, 255, 255, 0.55);

  --qz-series-1: #004a73;
  --qz-series-2: #198754;
  --qz-series-3: #c28a00;
  --qz-series-4: #7c3aed;
  --qz-series-5: #dc3545;
  --qz-series-6: #0e7490;
  --qz-series-7: #c2410c;
  --qz-series-8: #52525b;

  --qz-ring:        inset 0 0 0 1px var(--qz-line);
  --qz-ring-strong: inset 0 0 0 1px var(--qz-line-strong);
  --qz-focus:       0 0 0 2px #ffffff, 0 0 0 4px var(--qz-accent);
  --qz-shadow-1:    0 1px 2px rgba(0, 74, 115, 0.08);
  --qz-shadow-2:    0 4px 12px rgba(0, 74, 115, 0.10);
  --qz-shadow-3:    0 12px 32px rgba(0, 74, 115, 0.14);
}

/* The rail keeps its dark identity in light mode — it is the app's spine and
   stays constant across themes, the way a titlebar does in a desktop tool.
   `:root` and `[data-theme="light"]` have equal specificity, so the light
   override must come second to win. */
:root {
  --qz-rail-bg:     var(--qz-surface-1);
  --qz-rail-line:   var(--qz-line);
  --qz-rail-text:   var(--qz-text-mute);
  --qz-rail-active: var(--qz-text);
}

[data-theme="light"] {
  --qz-rail-bg:     #0d1319;
  --qz-rail-line:   #223140;
  --qz-rail-text:   #8fa3b5;
  --qz-rail-active: #ffffff;
}