/* =============================================================================
   cinti-theme.css — CINTI OS universal theme tokens
   CW Project #63 / Wave 0 / 2026-05-08

   Single source of truth for both dark and light themes across every
   user-facing surface (admin, portals, avatar, public). Load this at
   the top of <head>, BEFORE any inline styles that depend on tokens,
   so first paint already has the right colors.

   Token contract:
     --cinti-bg-*       background surfaces (base → elevated → panel)
     --cinti-text-*     text colors (primary → secondary → dim → mute)
     --cinti-accent     brand accent (cyan dark, teal-blue light)
     --cinti-success/warn/danger   semantic colors
     --cinti-border*    panel/input borders
     --cinti-shadow     elevation shadow
     --cinti-grid-opacity   dot-grid bg pattern (lower in light mode)
     --cinti-blur      glassmorphism blur radius

   Theme switching:
     <html data-theme="dark">  → dark (default; matches :root)
     <html data-theme="light"> → light
   ============================================================================= */

:root,
[data-theme="dark"] {
  /* surfaces */
  --cinti-bg-base:        #0a0e1a;
  --cinti-bg-elevated:    #0e1420;
  --cinti-bg-panel:       rgba(18, 28, 52, 0.9);
  --cinti-bg-input:       rgba(10, 18, 35, 0.8);
  --cinti-bg-hover:       rgba(38, 189, 214, 0.06);
  --cinti-bg-dock:        #080c1a;
  --cinti-bg-desktop:     #141e33;

  /* text */
  --cinti-text-primary:   #e8edf5;
  --cinti-text-secondary: #cfd6e2;
  --cinti-text-dim:       #8a92a3;
  --cinti-text-mute:      #5e6675;
  --cinti-text-inverse:   #0a0e1a;

  /* accent + semantic */
  --cinti-accent:         #26bdd6;
  --cinti-accent-bright:  #3dd8f0;
  --cinti-accent-soft:    rgba(38, 189, 214, 0.18);
  /* Unprefixed accent tokens + RGB channels so raw cyan literals
     (#26bdd6 / rgba(38,189,214,α)) converted to var(--accent…) flip by
     theme. Dark = exact cyan; light block below flips to navy. (2026-07-09) */
  --accent:               #26bdd6;
  --bright:               #3dd8f0;
  --accent-rgb:           38, 189, 214;
  --bright-rgb:           61, 216, 240;
  --cinti-success:        #00e676;
  --cinti-warn:           #ffb74d;
  --cinti-danger:         #ff4060;
  --cinti-info:           #3dd8f0;

  /* structure */
  --cinti-border:         rgba(38, 189, 214, 0.18);
  --cinti-border-strong:  rgba(38, 189, 214, 0.35);
  --cinti-border-mute:    rgba(38, 189, 214, 0.08);
  --cinti-shadow:         rgba(0, 0, 0, 0.4);
  --cinti-shadow-strong:  rgba(0, 0, 0, 0.6);

  /* effects */
  --cinti-grid-opacity:   0.8;
  --cinti-grid-color:     rgba(38, 189, 214, 0.015);
  --cinti-blur:           20px;

  /* tables / lists */
  --cinti-row-alt:        rgba(38, 189, 214, 0.03);
  --cinti-row-hover:      rgba(38, 189, 214, 0.08);

  /* layout (theme-invariant) */
  --cinti-topbar-h:       38px;
  --cinti-dock-w:         56px;
  --cinti-taskbar-h:      52px;

  --cinti-color-scheme:   dark;
}

[data-theme="light"] {
  /* surfaces — Gene 2026-05-14 surface-tier pass.
     Light mode was reading as "flat white" because every card sat on
     a translucent-white panel (no lift, no hierarchy). Replaced the
     core panel with solid #ffffff and added explicit raised/sunk
     tiers so the eye has a layer hierarchy instead of one mushed
     plane. Dark mode untouched. */
  --cinti-bg-base:        #f4f7fb;
  --cinti-bg-elevated:    #ffffff;
  --cinti-bg-panel:       #ffffff;                /* was rgba(255,255,255,0.85) — translucent white invisible on near-white page */
  --cinti-bg-raised:      #f7f9fc;                /* NEW — hover state / sub-panel one tier above base */
  --cinti-bg-sunk:        #e6ebf2;                /* NEW — input wells, table-stripe rows */
  --cinti-bg-input:       rgba(240, 244, 250, 0.9);
  --cinti-bg-hover:       rgba(26, 154, 181, 0.08);
  --cinti-bg-dock:        #dce3ec;
  --cinti-bg-desktop:     #eef2f7;
  --cinti-panel-shadow:        0 1px 0 rgba(20,30,50,0.04), 0 8px 24px rgba(20,30,50,0.06);    /* NEW — card lift */
  --cinti-panel-shadow-hover:  0 1px 0 rgba(20,30,50,0.06), 0 14px 36px rgba(20,30,50,0.10);   /* NEW — hover lift */

  /* text — Emmanuel 2026-05-13 readability pass: previous values
     (text-dim #5c6a82, text-mute #8a92a3) failed AA on the off-white
     background. Bumped to dark slate / dark grey so secondary text
     reads cleanly. Primary text deepened slightly. Dark mode unchanged. */
  --cinti-text-primary:   #0e1726;
  --cinti-text-secondary: #1f2a3e;
  --cinti-text-dim:       #3a4458;
  --cinti-text-mute:      #4d566b;
  --cinti-text-inverse:   #ffffff;

  /* accent + semantic — darker accent for AA contrast on light */
  --cinti-accent:         #1b2a63;
  --cinti-accent-bright:  #0f1d4d;
  --cinti-accent-soft:    rgba(13, 80, 100, 0.14);
  /* Navy overrides for the unprefixed accent tokens + RGB channels — this is
     what turns every converted cyan literal navy in light mode. (2026-07-09) */
  --accent:               #1b2a63;
  --bright:               #0f1d4d;
  --accent-rgb:           27, 42, 99;
  --bright-rgb:           15, 29, 77;
  --cinti-success:        #007a32;
  --cinti-warn:           #a85a00;
  --cinti-danger:         #b21f1f;
  --cinti-info:           #0f1d4d;

  /* structure — darker borders so panels read as defined regions
     instead of fading into the bg. */
  --cinti-border:         rgba(13, 80, 100, 0.32);
  --cinti-border-strong:  rgba(13, 80, 100, 0.5);
  --cinti-border-mute:    rgba(13, 80, 100, 0.16);
  --cinti-shadow:         rgba(20, 30, 50, 0.08);
  --cinti-shadow-strong:  rgba(20, 30, 50, 0.16);

  /* effects — grid lines bumped from 0.04@0.3opacity (= ~0.012 net,
     invisible on light bg) to 0.06@1.0opacity so the page has the
     same subtle texture as dark mode instead of looking dead-flat. */
  --cinti-grid-opacity:   1;
  --cinti-grid-color:     rgba(13, 80, 100, 0.05);
  --cinti-blur:           16px;

  /* tables / lists */
  --cinti-row-alt:        rgba(26, 154, 181, 0.03);
  --cinti-row-hover:      rgba(26, 154, 181, 0.06);

  --cinti-color-scheme:   light;
}

/* KEYSTONE (Gene 2026-07-09): individual portals define --accent:#26bdd6 in a
   plain :root block that, by source order, overrode the light navy above — so
   converted var(--accent…) literals stayed cyan in light. html[data-theme=
   "light"] outranks :root by specificity and wins regardless of load order,
   forcing every accent token navy in light. Dark mode untouched. */
html[data-theme="light"] {
  /* !important so these beat a per-tenant BRAND accent that admin.js applies as
     an INLINE style on <html> (documentElement.style.setProperty('--accent',
     branding.accentColor) — a cyan brand color for some tenants). A normal
     inline style beats a stylesheet rule, but a stylesheet !important beats a
     NORMAL inline style — which is why a portal could stay cyan in light mode
     despite the keystone. Dark mode untouched. */
  --accent:               #1b2a63 !important;
  --bright:               #0f1d4d !important;
  --accent-2:             #1b2a63 !important;
  --teal:                 #1b2a63 !important;
  --accent-rgb:           27, 42, 99 !important;
  --bright-rgb:           15, 29, 77 !important;
  --cinti-accent:         #1b2a63 !important;
  --cinti-accent-bright:  #0f1d4d !important;
  /* Borders (Gene 2026-07-10): "every box, every card, every line — DARK in
     light mode." The old light border was a pale grey (#b8c5d6) that vanished
     on white. Force a strong dark slate on every var(--border) surface. */
  --border:               #475569 !important;
  --border-strong:        #334155 !important;
  /* (2026-09-07) --panel-border-strong was never defined in EITHER theme, so
     every `var(--panel-border-strong,#24304d)` in the portal modules resolved
     to its DARK navy fallback on white. Defined here, light-only, so dark mode
     keeps resolving the per-call-site fallback exactly as before. */
  --panel-border-strong:  #334155 !important;
  --border-dim:           #64748b !important;
  --cinti-border:         #475569 !important;
  --card-border:          #475569 !important;
  --line:                 #475569 !important;
  --divider:              #475569 !important;
  /* Secondary / "dim" TEXT tokens (Gene 2026-07-13): the monitoring + many
     tables use var(--dim) — it was still resolving pale grey on white ("can't
     read"). Force all dim/secondary/muted text to a dark slate in light mode.
     HARD RULE: no light text in light mode. */
  --dim:                  #33415c !important;
  --dim-2:                #232e42 !important;
  --text-2:               #1a2233 !important;
  --muted:                #2a3344 !important;
  --cinti-text-secondary: #33415c !important;
}
/* Catch hardcoded PALE borders (inline + class) that don't use the token —
   any element whose inline style sets a near-white border colour gets the
   dark slate in light mode. Border-only; never touches text or fill. */
html[data-theme="light"] [style*="border"][style*="#e5e7eb" i],
html[data-theme="light"] [style*="border"][style*="#e2e8f0" i],
html[data-theme="light"] [style*="border"][style*="#eef2f7" i],
html[data-theme="light"] [style*="border"][style*="#edeff3" i],
html[data-theme="light"] [style*="border"][style*="#f1f5f9" i],
html[data-theme="light"] [style*="border"][style*="#d1d5db" i],
html[data-theme="light"] [style*="border"][style*="#dbe3ec" i]{ border-color:#475569 !important; }

/* Catch hardcoded DARK panel/input BACKGROUNDS set inline by portal modules
   that predate the token pass (#18233f input wells, #0f1524 modals). Without
   this they stay near-black boxes on a white page. Background only — never
   text, never layout. (2026-09-07) */
html[data-theme="light"] [style*="background"][style*="#18233f" i],
html[data-theme="light"] [style*="background"][style*="#0f1524" i]{ background-color:#ffffff !important; }
/* NOT #0a0e1a. That is the page's own base colour, so an element painted with
   it inline is usually saying "this is deliberately the dark product" — the
   Forms builder's live preview mocks the PUBLISHED public form, which really is
   #0a0e1a, and whitening its ground left dark-mode text on white at 1.18:1.
   Caught by measuring the builder after adding the rule. (2026-09-07) */

/* ── LIGHT-MODE HARD RULE (Gene 2026-07-10): entire CINTI OS, ALL portals —
   EVERY light/bright color → dark in light mode (text AND design). Catches
   inline + JS-computed colors via [style*="#hex"] substring selectors for
   `color` + SVG `fill`. color/fill-only + !important, never layout. Whole
   block is [data-theme="light"] → DARK MODE UNTOUCHED. ───────────────────── */
[data-theme="light"] [style*="#ff8a8a" i],[data-theme="light"] [style*="#ffb0b0" i],
[data-theme="light"] [style*="#ff8a80" i],[data-theme="light"] [style*="#ff7878" i],
[data-theme="light"] [style*="#ff6b6b" i],[data-theme="light"] [style*="#f85149" i],
[data-theme="light"] [style*="#ec407a" i],[data-theme="light"] [style*="#e57373" i],
[data-theme="light"] [style*="#f472b6" i],[data-theme="light"] [style*="#fb7185" i]{ color:#b01818 !important; fill:#b01818 !important; }
[data-theme="light"] [style*="#ffb84d" i],[data-theme="light"] [style*="#ffb74d" i],
[data-theme="light"] [style*="#f7dc6f" i],[data-theme="light"] [style*="#ffcb6b" i],
[data-theme="light"] [style*="#ff9800" i],[data-theme="light"] [style*="#ffd7b0" i],
[data-theme="light"] [style*="#f5a623" i],[data-theme="light"] [style*="#fbbf24" i],
[data-theme="light"] [style*="#f59e0b" i]{ color:#8a5300 !important; fill:#8a5300 !important; }
[data-theme="light"] [style*="#9be15d" i],[data-theme="light"] [style*="#c3e88d" i],
[data-theme="light"] [style*="#4ade80" i],[data-theme="light"] [style*="#26a69a" i],
[data-theme="light"] [style*="#00c853" i],[data-theme="light"] [style*="#7adfba" i],
[data-theme="light"] [style*="#7ee2a8" i],[data-theme="light"] [style*="#5eead4" i],
[data-theme="light"] [style*="#4ecdc4" i],[data-theme="light"] [style*="#4caf50" i],
[data-theme="light"] [style*="#2ecc71" i],[data-theme="light"] [style*="#22c55e" i],
[data-theme="light"] [style*="#66bb6a" i],[data-theme="light"] [style*="#81c784" i]{ color:#0a7a2f !important; fill:#0a7a2f !important; }
[data-theme="light"] [style*="#26bdd6" i],[data-theme="light"] [style*="#3dd8f0" i],
[data-theme="light"] [style*="#67e8f9" i],[data-theme="light"] [style*="#22d3ee" i],
[data-theme="light"] [style*="#00e5ff" i],[data-theme="light"] [style*="#26c6da" i],
[data-theme="light"] [style*="#5b9cf5" i],[data-theme="light"] [style*="#60a5fa" i],
[data-theme="light"] [style*="#42a5f5" i],[data-theme="light"] [style*="#2bd4e0" i],
[data-theme="light"] [style*="#38d6c4" i],[data-theme="light"] [style*="#2ee6d6" i]{ color:#1b2a63 !important; fill:#1b2a63 !important; }
[data-theme="light"] [style*="#b388ff" i],[data-theme="light"] [style*="#c792ea" i],
[data-theme="light"] [style*="#a78bfa" i],[data-theme="light"] [style*="#7a88ff" i],
[data-theme="light"] [style*="#b478ff" i],[data-theme="light"] [style*="#8b5cf6" i]{ color:#4a2a80 !important; fill:#4a2a80 !important; }
[data-theme="light"] [style*="#94a3b8" i],[data-theme="light"] [style*="#cbd5e1" i],
[data-theme="light"] [style*="#8a92a3" i],[data-theme="light"] [style*="#8a9ab8" i],
[data-theme="light"] [style*="#7a8699" i],[data-theme="light"] [style*="#8b93a7" i],
[data-theme="light"] [style*="#6f7688" i],[data-theme="light"] [style*="#a0a8b8" i],
[data-theme="light"] [style*="#8f97a8" i],[data-theme="light"] [style*="#6b7285" i],
[data-theme="light"] [style*="#8b93a6" i]{ color:#3a4458 !important; fill:#3a4458 !important; }

/* ...EXCEPT where the hex is the element's own BACKGROUND.
   The catches above are substring matches on the whole style attribute, so
   they cannot tell `color:#26bdd6` from `background:var(--accent,#26bdd6)` —
   and a filled accent button written the second way had its INK forced to the
   same navy as its fill: 1:1, invisible text, on "+ Add a secret",
   "+ Build a custom integration" and "Import OpenAPI".
   It had been hidden by a token cycle. `--accent: var(--cinti-accent)` and
   portal-shell's inline `--cinti-accent: var(--accent, #26bdd6)` referenced
   each other, so --accent computed to nothing, the background declaration was
   invalid at computed-value time (a var() fallback does NOT rescue a
   guaranteed-invalid reference) and the button rendered transparent with dark
   text. Fixing the cycle gave it a real navy fill and exposed this.
   These selectors are one specificity step above the catches (an element name
   plus the two attribute matches), so they win, and they only ever apply to an
   element that inline-set its background to the accent. Light only.
   (2026-09-08) */
html[data-theme="light"] [style*="background:var(--accent"],
html[data-theme="light"] [style*="background: var(--accent"],
html[data-theme="light"] [style*="background-color:var(--accent"],
html[data-theme="light"] [style*="background-color: var(--accent"]{ color:#ffffff !important; }

/* Tell the browser's form controls + scrollbars to follow the theme */
html[data-theme] {
  color-scheme: var(--cinti-color-scheme);
}

/* Smooth transitions on theme flip — applied broadly so layout doesn't jar.
   Only color/bg/border properties — NOT layout properties (transitioning
   width/height etc. would cause unrelated animations). */
html[data-theme] body,
html[data-theme] .panel,
html[data-theme] .card,
html[data-theme] button,
html[data-theme] input,
html[data-theme] select,
html[data-theme] textarea,
html[data-theme] .topbar,
html[data-theme] .dock,
html[data-theme] .taskbar {
  transition:
    background-color 240ms cubic-bezier(0.4, 0, 0.2, 1),
    color 240ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 240ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Form controls in light mode -----------------------------------------
   Native <select> + <option> elements render their dropdown popup using
   the element's own colors (not the page color-scheme). On systems where
   the OS is in dark mode but the page is in light mode, options can
   end up rendering with dark popup background, then the page's own
   color: var(--text) cascade makes the option text dark too — black-on-
   black. Force option/optgroup colors explicitly per theme. */
[data-theme="light"] select,
[data-theme="light"] option,
[data-theme="light"] optgroup {
  background-color: #ffffff;
  color: #1a2332;
}
[data-theme="dark"] select,
[data-theme="dark"] option,
[data-theme="dark"] optgroup {
  background-color: #0e1420;
  color: #e8edf5;
}
/* Inline-styled buttons that hardcode background:var(--input-bg) +
   color:var(--text) — common pattern in older portals. In light mode
   the resulting pale-on-pale combination has poor contrast. Bump the
   visible style for light mode by overriding background to a more
   solid light-surface and tightening the border. */
[data-theme="light"] button[style*="var(--input-bg)"],
[data-theme="light"] select[style*="var(--input-bg)"] {
  background: #ffffff !important;
  border-color: rgba(26, 154, 181, 0.35) !important;
  color: #1a2332 !important;
}

/* --- Material accent colors → darker shades in light mode ----------------
   The portals (accounting, sales, productivity, etc.) use Material 500-
   range hex literals (#4caf50 green, #ff9800 orange, #f44336 red, #ffb74d
   amber) for status, badges, KPI deltas, etc. On a dark page bg they're
   readable; on white the same hue looks washed out (Gene 2026-05-08
   called it "light yellow on white"). Bump each to a darker Material
   shade in light mode for AAA contrast, and bump rgba badge alphas so
   tinted backgrounds stay visible on white.

   Both class-based (.acc-pos / .badge-paid / .monitor-healthy) and
   inline `style="color:#<hex>"` usages are targeted. Inline-style
   targeting uses attribute selectors with !important so the in-CSS
   override beats the inline literal. Dark mode is unchanged. */
[data-theme="light"] .acc-pos,
[data-theme="light"] .badge-paid,
[data-theme="light"] .monitor-healthy,
[data-theme="light"] .pill-low,
[data-theme="light"] [style*="color:#4caf50"],
[data-theme="light"] [style*="color: #4caf50"],
[data-theme="light"] [style*="color:#76d275"],
[data-theme="light"] [style*="color: #76d275"],
[data-theme="light"] [style*="color:#7ee2a8"],
[data-theme="light"] [style*="color: #7ee2a8"] {
  color: #1b5e20 !important;  /* Material green 900 */
}
[data-theme="light"] .acc-warn,
[data-theme="light"] .pill-warn,
[data-theme="light"] .monitor-review,
[data-theme="light"] [style*="color:#ff9800"],
[data-theme="light"] [style*="color: #ff9800"],
[data-theme="light"] [style*="color:#ffa000"],
[data-theme="light"] [style*="color: #ffa000"],
[data-theme="light"] [style*="color:#ffb454"],
[data-theme="light"] [style*="color: #ffb454"],
[data-theme="light"] [style*="color:#ffb74d"],
[data-theme="light"] [style*="color: #ffb74d"] {
  color: #b75500 !important;  /* deep orange — readable on white */
}
[data-theme="light"] .acc-neg,
[data-theme="light"] .badge-overdue,
[data-theme="light"] .monitor-incomplete,
[data-theme="light"] .pill-high,
[data-theme="light"] [style*="color:#f44336"],
[data-theme="light"] [style*="color: #f44336"],
[data-theme="light"] [style*="color:#d32f2f"],
[data-theme="light"] [style*="color: #d32f2f"],
[data-theme="light"] [style*="color:#ff5e57"],
[data-theme="light"] [style*="color: #ff5e57"],
[data-theme="light"] [style*="color:#ff6b6b"],
[data-theme="light"] [style*="color: #ff6b6b"],
[data-theme="light"] [style*="color:#ff7a7a"],
[data-theme="light"] [style*="color: #ff7a7a"] {
  color: #b71c1c !important;  /* Material red 900 */
}
/* Brand cyan in inline styles → darker teal in light mode (matches
   --cinti-accent for [data-theme="light"]). */
[data-theme="light"] [style*="color:#26bdd6"],
[data-theme="light"] [style*="color: #26bdd6"],
[data-theme="light"] [style*="color:#3dd8f0"],
[data-theme="light"] [style*="color: #3dd8f0"],
[data-theme="light"] [style*="color:#00e5ff"],
[data-theme="light"] [style*="color: #00e5ff"] {
  color: #0d6c81 !important;  /* deep teal */
}

/* Soft tinted backgrounds — bump alpha + saturation in light mode so
   the badge/pill remains visible on white. The hue stays the same. */
[data-theme="light"] [style*="rgba(76,175,80,0.1)"],
[data-theme="light"] [style*="rgba(76, 175, 80, 0.1)"],
[data-theme="light"] [style*="rgba(76,175,80,0.12)"],
[data-theme="light"] [style*="rgba(76, 175, 80, 0.12)"] {
  background-color: rgba(27, 94, 32, 0.12) !important;
}
[data-theme="light"] [style*="rgba(255,152,0,0.1)"],
[data-theme="light"] [style*="rgba(255, 152, 0, 0.1)"],
[data-theme="light"] [style*="rgba(255,152,0,0.12)"] {
  background-color: rgba(183, 85, 0, 0.14) !important;
}
[data-theme="light"] [style*="rgba(244,67,54,0.1)"],
[data-theme="light"] [style*="rgba(244, 67, 54, 0.1)"],
[data-theme="light"] [style*="rgba(244,67,54,0.12)"] {
  background-color: rgba(183, 28, 28, 0.12) !important;
}

/* Aging bars + status dots that use the Material 500 hex as background
   directly — saturate for visibility on white. */
[data-theme="light"] .aging-current { background: #2e7d32 !important; }
[data-theme="light"] .aging-30      { background: #b75500 !important; }
[data-theme="light"] .aging-60      { background: #b71c1c !important; }
[data-theme="light"] .aging-90      { background: #8e1010 !important; }
[data-theme="light"] .aging-90plus  { background: #5e0a0a !important; }

/* --- Backwards-compat aliases --------------------------------------------
   The existing admin/css/theme.css uses --bg-desktop / --accent / --text /
   --panel-bg / etc. (no --cinti- prefix). We map those to the new tokens so
   any legacy CSS that references them stays correct under both themes
   without per-file rewrites.
   ---------------------------------------------------------------------- */
:root, [data-theme] {
  --bg-desktop:    var(--cinti-bg-desktop);
  --bg-dock:       var(--cinti-bg-dock);
  --panel-bg:      var(--cinti-bg-panel);
  --panel-border:  var(--cinti-border);
  --panel-header:  var(--cinti-bg-elevated);
  --accent:        var(--cinti-accent);
  --bright:        var(--cinti-accent-bright);
  --text:          var(--cinti-text-primary);
  --dim:           var(--cinti-text-mute);
  --green:         var(--cinti-success);
  --red:           var(--cinti-danger);
  --gold:          var(--cinti-warn);
  --topbar-h:      var(--cinti-topbar-h);
  --dock-w:        var(--cinti-dock-w);
  --taskbar-h:     var(--cinti-taskbar-h);
  --grid-opacity:  var(--cinti-grid-opacity);
  --shadow-color:  var(--cinti-shadow);
  --table-row-alt: var(--cinti-row-alt);
  --input-bg:      var(--cinti-bg-input);
}