/* ═══════════════════════════════════════════════════════════════════
   Flux colour theme (NEWYES CRM, 2026) — OPT-IN, per tenant
   ─────────────────────────────────────────────────────────────────────
   Every rule here is scoped under html[data-palette="flux"]. A tenant
   that has not chosen Flux never matches a single selector in this file,
   so the existing "Atlas" look (main.css) is untouched for them.

   Only token VALUES are remapped — the Atlas token names stay, so every
   existing component keeps working:
     dark  → Flux "aurora"  (mint #98C9A3 → teal #5EEAD4)
     light → Flux "pearl"   (indigo #5B5BF0 → violet #8B5CF6)

   The sidebar stays dark in both modes, as it does in Atlas; it simply
   takes the aurora surface. Source of truth for the values:
   ProjectsClaude_KOYA/newyes-flux-design/flux-tokens.css
   ═══════════════════════════════════════════════════════════════════ */

/* ── Dark · aurora ───────────────────────────────────────────────── */
html[data-palette="flux"] {
  --bg-deep:      #0A0E13;
  --bg-dark:      #11171F;
  --bg-card:      #172029;
  --primary:      #0D131A;
  --primary-mid:  #1E2833;
  --bg-sidebar:   #0E141B;

  --accent:          #98C9A3;
  --accent-ink:      #A9DBB5;
  --accent-dim:      #7DB389;
  --accent-glow:     rgba(94,234,212,.22);
  --accent-soft:     rgba(152,201,163,.14);
  --accent-contrast: #06130C;
  --border-a:        rgba(152,201,163,.30);

  --t1: #E6ECEF;
  --t2: #9AA7B3;
  --t3: #66737F;

  --border:        rgba(255,255,255,.075);
  --border-strong: rgba(255,255,255,.14);

  --clr-critical:    #F48C8C;
  --clr-high:        #F3A877;
  --clr-medium:      #F2C46D;
  --clr-low:         #6EDFA4;
  --clr-open:        #7EB8F6;
  --clr-in_progress: #C5A3F5;
  --clr-pending:     #F2C46D;
  --clr-resolved:    #6EDFA4;
  --clr-closed:      #8592A0;

  --glass: rgba(16,22,30,.72);
  --blur:  blur(22px) saturate(160%);

  --sh-sm: 0 1px 2px rgba(0,0,0,.28), 0 10px 28px -14px rgba(0,0,0,.55);
  --sh-md: inset 0 1px 0 rgba(255,255,255,.045), 0 1px 2px rgba(0,0,0,.28), 0 12px 32px -16px rgba(0,0,0,.6);
  --sh-lg: 0 0 0 1px rgba(255,255,255,.08), 0 40px 90px -24px rgba(0,0,0,.75);
  --sh-a:  0 0 0 4px var(--accent-soft);

  --input-bg:     #0D131A;
  --input-border: rgba(255,255,255,.10);
  --input-text:   #E6ECEF;
  --input-ph:     #66737F;

  --scroll-track: transparent;
  --scroll-thumb: rgba(255,255,255,.14);

  /* the ambient light Flux paints behind the whole app */
  --flux-ambient:
    radial-gradient(1100px 620px at 88% -12%, rgba(94,234,212,.11), transparent 62%),
    radial-gradient(900px 640px at -6% 108%, rgba(152,201,163,.09), transparent 60%),
    radial-gradient(700px 480px at 42% 38%, rgba(125,96,250,.045), transparent 70%);

  color-scheme: dark;
  accent-color: var(--accent);
}

/* ── Light · pearl ───────────────────────────────────────────────── */
html[data-palette="flux"][data-theme="light"] {
  --bg-deep:      #F4F5F9;
  --bg-dark:      #FFFFFF;
  --bg-card:      #FFFFFF;
  --primary:      #F2F3F8;
  --primary-mid:  #E6E8F0;

  --accent:          #5B5BF0;
  --accent-ink:      #4F46E5;
  --accent-dim:      #4A4AE0;
  --accent-glow:     rgba(91,91,240,.18);
  --accent-soft:     rgba(91,91,240,.10);
  --accent-contrast: #FFFFFF;
  --border-a:        rgba(91,91,240,.30);

  --t1: #0F172A;
  --t2: #4B5568;
  --t3: #8A93A5;

  --border:        rgba(15,23,42,.08);
  --border-strong: rgba(15,23,42,.15);

  --clr-critical:    #D23F3F;
  --clr-high:        #BF5B14;
  --clr-medium:      #A86A0A;
  --clr-low:         #12875A;
  --clr-open:        #2763D6;
  --clr-in_progress: #7444C9;
  --clr-pending:     #A86A0A;
  --clr-resolved:    #12875A;
  --clr-closed:      #667085;

  --glass: rgba(255,255,255,.74);

  --sh-sm: 0 1px 2px rgba(15,23,42,.04), 0 10px 28px -14px rgba(15,23,42,.14);
  --sh-md: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px -16px rgba(15,23,42,.16);
  --sh-lg: 0 0 0 1px rgba(15,23,42,.06), 0 40px 90px -24px rgba(15,23,42,.35);

  --input-bg:     #F7F8FB;
  --input-border: rgba(15,23,42,.12);
  --input-text:   #0F172A;
  --input-ph:     #8A93A5;

  --scroll-thumb: rgba(15,23,42,.15);

  --flux-ambient:
    radial-gradient(1100px 620px at 90% -14%, rgba(99,102,241,.12), transparent 62%),
    radial-gradient(900px 640px at -8% 110%, rgba(139,92,246,.08), transparent 60%),
    radial-gradient(700px 480px at 45% 40%, rgba(14,165,233,.04), transparent 70%);

  color-scheme: light;
}

/* ── Ambient light — both modes (Atlas draws it in dark only) ───── */
html[data-palette="flux"] body::before {
  content: '';
  position: fixed; inset: 0;
  background: var(--flux-ambient);
  opacity: 1;
  pointer-events: none; z-index: 0;
}

/* ── Sidebar — aurora surface in both modes ─────────────────────── */
html[data-palette="flux"] .sidebar,
html[data-palette="flux"][data-theme="light"] .sidebar {
  background: #0E141B;
  border-inline-end: 1px solid rgba(255,255,255,.06);
  /* text tokens inside the sidebar must stay light even in pearl */
  --t1: #E6ECEF;
  --t2: #9AA7B3;
  --t3: #66737F;
  --border: rgba(255,255,255,.075);
  --accent: #98C9A3;
  --accent-ink: #A9DBB5;
  --accent-soft: rgba(152,201,163,.14);
  --border-a: rgba(152,201,163,.30);
}

/* ── Topbar — glass ──────────────────────────────────────────────── */
html[data-palette="flux"] .topbar {
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

/* ── Light-mode surfaces that Atlas hard-codes ──────────────────── */
html[data-palette="flux"][data-theme="light"] .tbl thead th              { background: var(--primary) }
html[data-palette="flux"][data-theme="light"] .tbl tbody tr:hover        { background: rgba(15,23,42,.04) }
html[data-palette="flux"][data-theme="light"] .tbl tbody tr:nth-child(even)       { background: rgba(15,23,42,.018) }
html[data-palette="flux"][data-theme="light"] .tbl tbody tr:nth-child(even):hover { background: rgba(15,23,42,.04) }
html[data-palette="flux"][data-theme="light"] .filter-panel               { background: var(--bg-dark) }
html[data-palette="flux"][data-theme="light"] .fp-head,
html[data-palette="flux"][data-theme="light"] .fp-footer,
html[data-palette="flux"][data-theme="light"] .tkp-head                   { background: var(--primary) }
html[data-palette="flux"][data-theme="light"] .modal-overlay              { background: rgba(15,23,42,.38) }
html[data-palette="flux"][data-theme="light"] .msg.internal .msg-bubble   {
  background: rgba(168,106,10,.08);
  border-color: rgba(168,106,10,.22);
}

/* ── Primary button — Flux gradient ─────────────────────────────── */
html[data-palette="flux"] .btn-primary {
  background: linear-gradient(135deg, #98C9A3 0%, #5EEAD4 100%);
  color: var(--accent-contrast);
  border-color: transparent;
  box-shadow: 0 10px 30px -10px rgba(94,234,212,.45);
}
html[data-palette="flux"][data-theme="light"] .btn-primary {
  background: linear-gradient(135deg, #5B5BF0 0%, #8B5CF6 100%);
  box-shadow: 0 10px 26px -10px rgba(91,91,240,.55);
}