/* ===== G777 Backoffice v2 — ElephantPink visual system =====
   Based on the EP proposal landing (gameworldbet-landing)
   Mono-first, dark, thin hairlines, uppercase micro-copy.

   2026-08 "pro" pass: the chrome accent moved from brand pink to a
   restrained amber (money reads warm in a financial terminal). Pink is
   now brand-only and lives in --brand-pink: use it for the wordmark and
   nothing else. Every accent below carries MEANING, so never pick one
   for looks:
     --accent / --gold  revenue, GGR, the money number, active state
     --green            money coming in (deposits, house wins)
     --red              money going out (cashouts, losses)
     --steel            volume without direction (registrations, visits)
     --teal             the secondary vertical (sport vs casino)
     --violet           acquisition (FTD, funnel)
   ============================================================== */
:root {
  /* ── EP brand (wordmark only, do NOT use for chrome) ── */
  --brand-pink:      #EA8FD7;
  --brand-pink-deep: #D76BBF;

  /* ── Chrome accent (was brand pink until 2026-08) ── */
  --color-brand:     #D9A441;
  --color-brand-deep:#B9862C;
  --accent:          var(--color-brand);
  --accent-soft:     rgba(217,164,65,0.12);

  /* ── Surfaces (pure neutrals, elevated v2u) ── */
  --bg:          #0A0A0A;
  --bg-elev:     #141414;
  --bg-deep:     #050505;
  --bg-panel:    #1C1C1C;

  /* legacy token aliases for existing components */
  --s1: var(--bg-elev);
  --s2: #1A1A1A;
  --s3: #222;

  /* ── Shadow tokens (v2u, elevated surfaces) ── */
  --shadow-card: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
  --shadow-card-hover: 0 4px 12px rgba(0,0,0,.4);

  /* ── Ink ── */
  --ink:         #FFFFFF;
  --t1:          #FFFFFF;
  --t2:          #C7C7C7;
  --t3:          #9A9A9A;
  --t4:          #6D6D6D;
  --t5:          #444444;

  /* ── Hairlines ── */
  --hair:        rgba(255,255,255,0.08);
  --hair-strong: rgba(255,255,255,0.18);
  --b1: var(--hair);
  --b2: var(--hair-strong);
  /* v2u overrides: slightly softer hairlines for elevated surfaces */
  /* (kept original values so sharp editorial sections remain intact) */

  /* ── Data accents (semantic, see header) ──
     Desaturated on purpose: on pure black, saturated hues vibrate and
     read cheap. These sit around 55-70% saturation so a full dashboard
     of them still looks like one system. */
  --gold: var(--accent);          /* revenue / GGR / the money number */
  --gg:   var(--accent-soft);

  --green: #4CD17A;               /* money in */
  --gbg:   rgba(76, 209, 122,0.10);
  --red:   #FF5A5A;               /* money out */
  --rbg:   rgba(255, 90, 90,0.10);

  --steel:  #4FA0FF;              /* volume without direction */
  --teal:   #4FD4DC;              /* secondary vertical (sport) */
  --violet: #A489FF;              /* acquisition (FTD, funnel) */
  --meta:   #1877F2;              /* Meta brand, keep as-is */

  /* legacy aliases so older pages keep working while they migrate */
  --blue:   var(--steel);
  --purple: var(--violet);
  --cyan:   var(--teal);

  /* ── Radius (v2u: elevated surfaces softened, editorial sections keep sharp via overrides) ── */
  --r:    14px;
  --r-s:   8px;
  --r-l:  18px;
  /* legacy aliases */
  --r-sm: var(--r-s);
  --r-lg: var(--r-l);

  /* ── Layout ── */
  --sidebar-w:          240px;
  --sidebar-w-expanded: 240px;
  --topbar-h:           64px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

/* Numbers always tabular so columns line up */
.val, .val.xl, .sub, table td, table th, .dp-days, .tb-clock-str,
.quick-value, .metric-value, .cover-kpi .val,
.card .val, .card .sub, [class*="number"], [class*="metric"] {
  font-variant-numeric: tabular-nums;
}

::selection { background: var(--color-brand); color: #000; }
::-moz-selection { background: var(--color-brand); color: #000; }

/* ═══════════════════════════════════════════════════════════════
   Light theme overrides — applied when body.theme-light is set.
   The toggle lives in topbar-right. Persistence: localStorage.theme.
   Note: ECharts currently use hardcoded colors (e.g. #FFFFFF labels)
   in several pages, so their axis text may appear washed out in
   light mode. We keep the core layout (topbar, sidebar, cards,
   tables, text) readable — charts are a follow-up polish.
   ═══════════════════════════════════════════════════════════════ */
body.theme-light {
  --bg:          #FAFAFA;
  --bg-elev:     #FFFFFF;
  --bg-deep:     #F4F4F4;
  --bg-panel:    #F7F7F7;

  --s1: var(--bg-elev);
  --s2: #F1F1F1;
  --s3: #E8E8E8;

  --ink:         #0A0A0A;
  --t1:          #0A0A0A;
  --t2:          #2E2E2E;
  --t3:          #6B6B6B;
  --t4:          #9A9A9A;
  --t5:          #C7C7C7;

  --hair:        rgba(0,0,0,0.10);
  --hair-strong: rgba(0,0,0,0.22);
  --b1: var(--hair);
  --b2: var(--hair-strong);
}

body.theme-light .topbar {
  background: rgba(255,255,255,0.88);
  border-bottom-color: var(--hair);
}

body.theme-light .sidebar {
  background: #FFFFFF;
  border-right-color: var(--hair);
}

body.theme-light .topbar-left .topbar-logo-link svg path {
  fill: #0A0A0A !important;
}

body.theme-light .topbar-left .brand-tag {
  background: #F1F1F1;
  border-color: rgba(0,0,0,0.12);
}
body.theme-light .topbar-left .brand-tag-label { color: #555; }
body.theme-light .topbar-left .brand-tag-ver   { color: #2E2E2E; }

body.theme-light .tb-clock {
  background: linear-gradient(180deg, #FFFFFF, #F1F1F1);
  border-color: rgba(0,0,0,0.12);
}
body.theme-light .tb-clock-str {
  color: #8A6410;
  text-shadow: none;
}

body.theme-light .sidebar-item:hover {
  background: rgba(0,0,0,0.03);
}