/* =============================================================================
   theme.css — CINTI OS Admin Theme
   CSS custom properties, resets, typography, scrollbars, grid background,
   keyframe animations, selection styles
   ============================================================================= */

  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
  :root, [data-theme="dark"] {
    --bg-desktop: #141e33;
    --bg-dock: #080c1a;
    --panel-bg: rgba(18, 28, 52, 0.9);
    --panel-border: rgba(38, 189, 214, 0.18);
    --panel-header: rgba(12, 20, 40, 0.7);
    --accent: #26bdd6;
    --bright: #3dd8f0;
    /* RGB channel tokens — let raw rgba(38,189,214,α) cyan literals flip by
       theme. Dark keeps the exact cyan; light flips to navy. (Gene 2026-07-09) */
    --accent-rgb: 38, 189, 214;
    --bright-rgb: 61, 216, 240;
    --text: #e8edf5;
    --dim: #6b7d9a;
    --green: #00e676;
    --red: #ff4060;
    --gold: #ffb74d;
    --topbar-h: 36px;
    --dock-w: 56px;
    --taskbar-h: 52px;
    --grid-opacity: 0.8;
    --shadow-color: rgba(0,0,0,0.4);
    --table-row-alt: rgba(38,189,214,0.03);
    --input-bg: rgba(10,18,35,0.8);
  }
  [data-theme="light"] {
    --bg-desktop: #eef2f7;
    --bg-dock: #dce3ec;
    /* Gene 2026-05-14 — surface tier pass. Translucent white panels on a
       near-white page were invisible (no lift, no hierarchy). Replaced
       with a 4-tier solid system: page < raised < card < header-tint.
       Borders softened from 0.32 (loud teal frame) to 0.16 (a subtle
       seam). Shadow tokens added so cards lift instead of stickering.
       Dark mode untouched. */
    --panel-bg: #ffffff;                              /* was rgba(255,255,255,0.85) — translucent white invisible on #eef2f7 */
    --panel-raised: #f7f9fc;                          /* NEW — hover/elevated rows */
    --panel-sunk: #e6ebf2;                            /* NEW — input wells, table-stripes */
    --panel-header: #f3f6fa;                          /* was rgba(240,244,250,0.9) — now solid + distinguishable from #fff card */
    --panel-border: rgba(13, 80, 100, 0.16);          /* was 0.32 — softer seam, not a teal frame */
    --panel-border-strong: rgba(13, 80, 100, 0.32);   /* NEW — keep old value for accent edges/inputs */
    --panel-shadow: 0 1px 0 rgba(20,30,50,0.04), 0 8px 24px rgba(20,30,50,0.06);          /* NEW — card lift */
    --panel-shadow-hover: 0 1px 0 rgba(20,30,50,0.06), 0 14px 36px rgba(20,30,50,0.10);   /* NEW — hover lift */
    /* Emmanuel 2026-05-13 — light mode text + border legibility pass.
       Targets: WCAG AA 4.5:1 on text, ≥3:1 on borders. */
    --accent: #1b2a63;        /* darker teal, AA-readable on light */
    --bright: #0f1d4d;        /* darker hover */
    --accent-rgb: 27, 42, 99;   /* navy — flips raw rgba(38,189,214,α) cyan */
    --bright-rgb: 15, 29, 77;
    --text: #0e1726;          /* deep slate primary text */
    --dim: #3a4458;           /* dark slate secondary text */
    --green: #007a32;
    --red: #b21f1f;
    --gold: #a85a00;
    --grid-opacity: 1;        /* was 0.3 — was hiding grid; opacity now lives on the gradient itself */
    --shadow-color: rgba(0,0,0,0.1);
    --table-row-alt: rgba(13,80,100,0.04);
    --input-bg: rgba(240,244,250,0.95);
  }
  /* KEYSTONE (Gene 2026-07-09): some pages/portals define --accent:#26bdd6 in
     a plain :root block that, by source order, was overriding the light navy
     above — so var(--accent) resolved to cyan even in light mode. This
     html[data-theme="light"] selector has higher specificity than :root and
     wins regardless of load order, forcing every accent token to navy in
     light. Dark mode is untouched (this only matches [data-theme="light"]). */
  html[data-theme="light"] {
    --accent: #1b2a63;
    --bright: #0f1d4d;
    --accent-rgb: 27, 42, 99;
    --bright-rgb: 15, 29, 77;
    --cinti-accent: #1b2a63;
    --cinti-accent-bright: #0f1d4d;
  }
  html, body {
    height: 100%; overflow: hidden; color: var(--text); font-family: 'Inter', -apple-system, sans-serif; font-size: 13px;
    background: var(--bg-desktop);
    background-image:
      radial-gradient(ellipse at 30% 20%, rgba(38,189,214,0.06) 0%, transparent 50%),
      radial-gradient(ellipse at 70% 80%, rgba(38,189,214,0.04) 0%, transparent 50%);
  }

  /* Smooth grid background — no aliasing */
  body::before {
    content: ''; position: fixed; inset: 0;
    background-image:
      linear-gradient(rgba(38,189,214,0.015) 1px, transparent 1px),
      linear-gradient(90deg, rgba(38,189,214,0.015) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none; z-index: 0;
    opacity: var(--grid-opacity);
    image-rendering: auto;
  }
  /* Gene 2026-05-14 — light-mode grid lines. The dark-mode gradient
     (cyan @ 0.015) is invisible on #eef2f7. Override with a darker
     slate stroke so the page has texture instead of looking dead-flat.
     Dark mode pulls the original rule unchanged. */
  body[data-theme="light"]::before {
    background-image:
      linear-gradient(rgba(13, 80, 100, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(13, 80, 100, 0.05) 1px, transparent 1px);
  }
  /* Global anti-aliasing */
  * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

  ::-webkit-scrollbar { width: 5px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(38,189,214,0.2); border-radius: 3px; }

  /* === KEYFRAMES === */
  @keyframes pulseGreen {
    0%, 100% { box-shadow: 0 0 4px var(--green); }
    50% { box-shadow: 0 0 10px var(--green), 0 0 20px rgba(0,230,118,0.3); }
  }
  @keyframes pulseRed {
    0%, 100% { box-shadow: 0 0 4px var(--red); }
    50% { box-shadow: 0 0 10px var(--red), 0 0 20px rgba(255,64,96,0.3); }
  }
  @keyframes fadeInPanel {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes slideInToast {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes slideOutToast {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(100%); }
  }
  @keyframes scanline {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }
  @keyframes glowPulse {
    0%, 100% { text-shadow: 0 0 12px rgba(61,216,240,0.3); }
    50% { text-shadow: 0 0 24px rgba(61,216,240,0.6); }
  }

  /* Scanline accent */
  .scanline-bar {
    display: none;
  }

  /* Responsive */
  @media (max-width: 900px) {
    .dash-grid { grid-template-columns: 1fr; }
    .tiles-grid { grid-template-columns: 1fr; }
    .settings-grid { grid-template-columns: 1fr; }
  }

  @media (max-width: 768px) {
    .dock-left { display: none; }
    .desktop { left: 0; }
    .taskbar-services { gap: 10px; }
  }

/* ============================================================================
   LIGHT-MODE TEXT CONTRAST — systemic pass (Gene 2026-07-09).
   Principle: in light mode EVERY text must be dark + saturated on the light
   page. Pale accent-blue, grey, thin black, yellow, light purple, light
   pink/red all fail. The UI palette is tuned for DARK backgrounds, so the same
   bright hexes are unreadable on white. This layer remaps every bright text
   color the components use — including INLINE + JS-computed ones via
   [style*="#hex"] substring selectors — to a dark, AA-contrast equivalent.
   color-only + !important, so it can't affect layout or backgrounds.
   ============================================================================ */
[data-theme="light"] .dock-icon .tooltip,
[data-theme="light"] .dock-toggle .label,
[data-theme="light"] .dock-icon { color: var(--text) !important; }
[data-theme="light"] .tile-picker h3,
[data-theme="light"] .modal h3,
[data-theme="light"] .btn-tab.active,
[data-theme="light"] .badge-admin { color: var(--accent) !important; }

/* ── LIGHT-MODE HARD RULE (Gene 2026-07-10): EVERY light/bright color → dark,
   text AND design, anywhere. Catches inline + JS-computed colors via
   [style*="#hex"] substring selectors, for BOTH `color` and SVG `fill`.
   color/fill only + !important — never touches layout/backgrounds. Whole
   block is [data-theme="light"] so DARK MODE IS UNTOUCHED. ────────────────── */
/* Reds / pinks (bad / error / overdue) → dark red */
[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; }
/* Yellows / golds / ambers (warn) → dark amber */
[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; }
/* Greens (ok / good) → dark green */
[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]{ color:#0a7a2f !important; fill:#0a7a2f !important; }
/* Blues / cyans / teals → dark navy */
[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; border-color:#1b2a63 !important; }
/* Purples / violets → dark purple */
[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; }
/* Light greys / slates (dim text unreadable on white) → dark slate */
[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]{ color:#3a4458 !important; fill:#3a4458 !important; }
/* Domain-status dot uses a JS-set brand background (#00e5ff for cyfertech) —
   a background my color/fill overrides can't catch. Force it navy in light. */
[data-theme="light"] #domain-indicator { background: var(--accent) !important; }
/* Blues / cyans (accent / info) → dark teal */
[data-theme="light"] [style*="#26bdd6" i],[data-theme="light"] [style*="#00e5ff" i],
[data-theme="light"] [style*="#38d6c4" i],[data-theme="light"] [style*="#60a5fa" i],
[data-theme="light"] [style*="#5b9cf5" i],[data-theme="light"] [style*="#42a5f5" i],
[data-theme="light"] [style*="#26c6da" i],[data-theme="light"] [style*="#2bd4e0" i]{ color:#1b2a63 !important; }
/* Purples → dark purple */
[data-theme="light"] [style*="#b388ff" i],[data-theme="light"] [style*="#c792ea" i],
[data-theme="light"] [style*="#c084fc" i],[data-theme="light"] [style*="#b39ddb" i],
[data-theme="light"] [style*="#8f9bff" i]{ color:#6b21a8 !important; }
/* Pale greys used as text → dark slate */
[data-theme="light"] [style*="#5c6a82" i],[data-theme="light"] [style*="#546e7a" i],
[data-theme="light"] [style*="#8aa0b8" i],[data-theme="light"] [style*="#8a93a8" i],
[data-theme="light"] [style*="#9ca3af" i],[data-theme="light"] [style*="#a4a8b8" i],
[data-theme="light"] [style*="#5a6378" i],[data-theme="light"] [style*="#cdd6e3" i]{ color:#33415c !important; }
/* Near-white text meant for dark bg → near-black on light */
[data-theme="light"] [style*="#e6edf6" i],[data-theme="light"] [style*="#eafcff" i],
[data-theme="light"] [style*="#ecf0f6" i],[data-theme="light"] [style*="#cdd8e6" i]{ color:#0e1726 !important; }