/* spatial-light-shell.css — parte din creator-portal-spatial.css (liniile 668-920).
   Tema LIGHT (partea 1): tokeni, ambient, bara demo, panouri, sidebar, topbar,
   interioare, tab-uri, butoane. Tot ce e aici e scopat pe [data-theme="light"].
   MUTARE PURĂ: conținutul de mai jos e identic cu sursa. Ordinea de încărcare
   a bucăților contează (cascada) — vezi src/components/styles/. */
/* ============================================================================
   LIGHT THEME for the SPATIAL portal + admin (fix/light-theme)
   ----------------------------------------------------------------------------
   The spatial skin (above) is built dark-only: its token block resolves both
   [data-theme] values to the same dark glass, every per-surface rule hardcodes
   white translucency (oklch(1 0 0 / .xx)) which only reads on a dark backdrop,
   and the toggle is hidden because flipping it changed nothing.

   This block delivers a REAL light glass theme. Everything is scoped to
   body.cp-spatial[data-theme="light"] so DARK MODE IS UNTOUCHED. Loaded after
   creator-portal.css, so these overrides also beat the base light tokens.

   Approach:
   1. Re-point the glass token set to a light palette (white-translucent
      surfaces, near-black ink, dark hairlines).
   2. Re-tune the ambient backdrop + scrim so the floating glass reads on a
      bright atmosphere instead of a dark one.
   3. Override every per-surface rule that hardcoded white translucency, mapping
      it to a dark-tinted equivalent so borders/fills/hover stay visible on light.
   4. Un-hide the toggle (it now does something).

   Contrast: body text uses --ink (oklch ~0.24) on white-ish glass ⇒ >7:1;
   --ink-2 (~0.40) ⇒ ~4.8:1; --muted (~0.50) reserved for non-essential labels.
   ============================================================================ */

/* ---------- L0 · UN-HIDE THE TOGGLE (both themes) ----------
   It is meaningful now, so it must be reachable in light AND dark to switch
   back. Restores the .cp-icon-btn display the base rule (line ~210) removed. */
body.cp-spatial .js-theme-toggle { display: grid; }
/* Icon swap — the portal toggle (.cp-icon-btn) never had one (it was hidden),
   so both SVGs would stack. Show the MOON in light (= "go dark"), the SUN in
   dark (= "go light"), matching the .db-theme / .theme-btn convention. */
body.cp-spatial .js-theme-toggle .ic-sun { display: none; }
body.cp-spatial .js-theme-toggle .ic-moon { display: block; }
body.cp-spatial[data-theme="dark"] .js-theme-toggle .ic-moon { display: none; }
body.cp-spatial[data-theme="dark"] .js-theme-toggle .ic-sun { display: block; }

/* ---------- L1 · LIGHT GLASS TOKENS ----------
   Overrides the dark token block for the light theme only. Higher specificity
   ([data-theme="light"] is already in the base selector, but we re-declare to
   win source order) — appended last, so it wins regardless. */
body.cp-spatial[data-theme="light"] {
  --paper:     oklch(0.22 0.02 265);          /* dark — text ON light/ink fills */
  --paper-2:   oklch(0.22 0.02 265 / .05);    /* faint inner tint               */
  --surface:   oklch(1 0 0 / .42);            /* card glass fill (light) — clear, not white */
  --ink:       oklch(0.24 0.018 265);         /* primary text (near-black)      */
  --ink-2:     oklch(0.40 0.016 265);         /* secondary text  ~4.8:1         */
  --muted:     oklch(0.50 0.014 265);         /* labels                         */
  --faint:     oklch(0.58 0.012 265);         /* faintest readable              */
  --line:      oklch(0.24 0.02 265 / .14);    /* hairline (dark on light)       */
  --line-2:    oklch(0.24 0.02 265 / .24);    /* stronger border                */
  --signal:    oklch(0.52 0.11 162);          /* green that pops on light       */
  --signal-bg: oklch(0.70 0.10 162 / .18);
  --pending:    oklch(0.58 0.12 70);
  --pending-bg: oklch(0.74 0.12 70 / .20);
  --danger:     oklch(0.55 0.16 25);
  --danger-bg:  oklch(0.70 0.15 25 / .14);

  /* light glass recipe knobs — lower opacity = transparent glass over the bright
     photo (not a white wash); blur stays high so text over it keeps legible. */
  --glass-tint:   oklch(1 0 0 / .42);
  --glass-tint-2: oklch(1 0 0 / .48);
  --glass-blur:   blur(34px) saturate(1.4);
  --glass-edge:   inset 0 1px 0 oklch(1 0 0 / .65), inset 0 0 0 1px oklch(0.24 0.02 265 / .06);
  --glass-shadow: 0 28px 60px -30px oklch(0.30 0.04 265 / .28), 0 4px 14px -8px oklch(0.30 0.04 265 / .18);
  color-scheme: light;
}

body.cp-spatial[data-theme="light"] { color: var(--ink); }

/* ---------- L2 · AMBIENT BACKDROP (bright atmosphere) ----------
   The dark mountain photo is brightened to a soft daylight wash, the aurora
   fallback turns pastel, and the legibility scrim flips to a faint LIGHT wash
   so the white glass keeps separation without a dark overlay fighting it. */
body.cp-spatial[data-theme="light"] .cp-ambient {
  /* Neutral light backdrop — clean off-white with only a faint cool tint.
     The old aurora used hue 285/320 (purple/magenta) and read as PINK. */
  background:
    radial-gradient(120% 100% at 50% 0%, oklch(0.985 0.004 250 / .9), transparent 60%),
    linear-gradient(180deg, oklch(0.975 0.004 250), oklch(0.945 0.005 250));
}
/* Show the photo essentially as-is — a hair of lift, NO white wash. The old
   brightness(1.55) blew it toward white and read as a "white film". */
body.cp-spatial[data-theme="light"] .cp-ambient .cp-bg-img {
  filter: brightness(1.08) saturate(1.02);
}
body.cp-spatial[data-theme="light"] .cp-ambient::after {
  /* WEAK black veil (not white) — much lighter than dark mode's scrim. Keeps the
     photo clean but adds a touch of depth/legibility. Dark mode uses ~.10–.24;
     this stays ~.04–.12. */
  background:
    radial-gradient(140% 100% at 50% 0%, transparent 58%, oklch(0.15 0.02 265 / .10) 100%),
    linear-gradient(180deg, oklch(0.15 0.02 265 / .04), oklch(0.12 0.02 265 / .12));
}
/* ---------- L3 · DEMO BAR (top switcher) ---------- */
body.cp-spatial[data-theme="light"] .demo-bar {
  background: oklch(1 0 0 / .62);
  border-bottom: 1px solid oklch(0.24 0.02 265 / .10);
  box-shadow: 0 8px 30px -18px oklch(0.30 0.04 265 / .35);
}
body.cp-spatial[data-theme="light"] .db-brand,
body.cp-spatial[data-theme="light"] .db-brand .db-sep { color: var(--ink); }
body.cp-spatial[data-theme="light"] .db-sep::before { background: oklch(0.24 0.02 265 / .22); }
body.cp-spatial[data-theme="light"] .db-tag { background: oklch(0.24 0.02 265 / .08); color: var(--ink-2); }
body.cp-spatial[data-theme="light"] .db-switch { background: oklch(0.24 0.02 265 / .07); }
body.cp-spatial[data-theme="light"] .db-switch button { color: var(--ink-2); }
body.cp-spatial[data-theme="light"] .db-switch button:hover { color: var(--ink); }
body.cp-spatial[data-theme="light"] .db-switch button.active {
  background: oklch(0.22 0.02 265);
  color: oklch(0.99 0.004 250);
  box-shadow: 0 2px 10px -4px oklch(0.30 0.04 265 / .35);
}
body.cp-spatial[data-theme="light"] .db-brand .mark { background: oklch(0.22 0.02 265); color: oklch(0.99 0.004 250); }
body.cp-spatial[data-theme="light"] .db-bg {
  background: oklch(0.24 0.02 265 / .07);
  border-color: oklch(0.24 0.02 265 / .14);
  color: var(--ink);
}
body.cp-spatial[data-theme="light"] .db-bg:hover { background: oklch(0.24 0.02 265 / .12); border-color: oklch(0.24 0.02 265 / .26); }
body.cp-spatial[data-theme="light"] .db-theme { background: oklch(0.24 0.02 265 / .07); color: var(--ink); }
body.cp-spatial[data-theme="light"] .db-theme:hover { background: oklch(0.24 0.02 265 / .12); }

/* ---------- L4 · SHARED GLASS PANELS ---------- */
body.cp-spatial[data-theme="light"] .cp-stat,
body.cp-spatial[data-theme="light"] .cp-panel,
body.cp-spatial[data-theme="light"] .cp-brief,
body.cp-spatial[data-theme="light"] .cp-brief-card,
body.cp-spatial[data-theme="light"] .cp-card-form,
body.cp-spatial[data-theme="light"] .cp-table,
body.cp-spatial[data-theme="light"] .cp-verif,
body.cp-spatial[data-theme="light"] .cp-pub-stat,
body.cp-spatial[data-theme="light"] .cp-rate-pub,
body.cp-spatial[data-theme="light"] .cm-budget-row > div,
body.cp-spatial[data-theme="light"] .cr-consents,
body.cp-spatial[data-theme="light"] .cp-empty {
  background: var(--glass-tint);
  border: 1px solid oklch(0.24 0.02 265 / .10);
  box-shadow: var(--glass-edge), var(--glass-shadow);
}
body.cp-spatial[data-theme="light"] .cp-brief:hover,
body.cp-spatial[data-theme="light"] .cp-brief-card:hover {
  border-color: oklch(0.24 0.02 265 / .26);
  box-shadow: var(--glass-edge), 0 36px 70px -28px oklch(0.30 0.04 265 / .30);
}
body.cp-spatial[data-theme="light"] .cp-stat:hover,
body.cp-spatial[data-theme="light"] .cp-pub-stat:hover { border-color: oklch(0.24 0.02 265 / .20); }

/* ---------- L5 · APP SHELL: floating sidebar ---------- */
body.cp-spatial[data-theme="light"] .cp-side {
  border: 1px solid oklch(0.24 0.02 265 / .10);
  background: var(--glass-tint-2);
  box-shadow: var(--glass-edge), var(--glass-shadow);
}
body.cp-spatial[data-theme="light"] .cp-side-brand,
body.cp-spatial[data-theme="light"] .cp-side-brand .db-sep { color: var(--ink); }
body.cp-spatial[data-theme="light"] .cp-side-brand .mark { background: oklch(0.22 0.02 265); color: oklch(0.99 0.004 250); }
body.cp-spatial[data-theme="light"] .cp-nav a { color: var(--ink-2); }
body.cp-spatial[data-theme="light"] .cp-nav a .ic { color: var(--muted); }
body.cp-spatial[data-theme="light"] .cp-nav a:hover { background: oklch(0.24 0.02 265 / .06); color: var(--ink); }
body.cp-spatial[data-theme="light"] .cp-nav a:hover .ic { color: var(--ink); }
body.cp-spatial[data-theme="light"] .cp-nav a.active {
  background: oklch(0.22 0.02 265);
  color: oklch(0.99 0.004 250);
  box-shadow: inset 0 0 0 1px oklch(0.24 0.02 265 / .3);
}
body.cp-spatial[data-theme="light"] .cp-nav a.active .ic { color: oklch(0.99 0.004 250); }
body.cp-spatial[data-theme="light"] .cp-nav a .badge { background: var(--signal); color: #fff; }
body.cp-spatial[data-theme="light"] .cp-nav a.active .badge { background: oklch(0.99 0.004 250); color: var(--ink); }
body.cp-spatial[data-theme="light"] .cp-nav-admin,
body.cp-spatial[data-theme="light"] .cp-nav-admin .ic { color: var(--signal) !important; }
body.cp-spatial[data-theme="light"] .cp-side-card {
  border-color: oklch(0.24 0.02 265 / .12);
  background: oklch(1 0 0 / .38);
}

/* ---------- L6 · TOPBAR (floating frosted bar) ---------- */
body.cp-spatial[data-theme="light"] .cp-top {
  border: 1px solid oklch(0.24 0.02 265 / .10);
  background: oklch(1 0 0 / .46);
  box-shadow: var(--glass-edge), 0 20px 44px -28px oklch(0.30 0.04 265 / .25);
}
body.cp-spatial[data-theme="light"] .cp-top h1 { color: var(--ink); }
body.cp-spatial[data-theme="light"] .cp-icon-btn {
  background: oklch(0.24 0.02 265 / .06);
  border-color: oklch(0.24 0.02 265 / .14);
  color: var(--ink-2);
}
body.cp-spatial[data-theme="light"] .cp-icon-btn:hover { background: oklch(0.24 0.02 265 / .10); border-color: oklch(0.24 0.02 265 / .28); color: var(--ink); }
body.cp-spatial[data-theme="light"] .cp-icon-btn .dot { border-color: oklch(1 0 0 / .85); }
body.cp-spatial[data-theme="light"] .cp-mob-tabs button,
body.cp-spatial[data-theme="light"] .cp-mob-tabs a {
  background: oklch(0.24 0.02 265 / .06);
  border-color: oklch(0.24 0.02 265 / .14);
  color: var(--ink-2);
}
body.cp-spatial[data-theme="light"] .cp-mob-tabs button.active,
body.cp-spatial[data-theme="light"] .cp-mob-tabs a.active { background: oklch(0.22 0.02 265); color: oklch(0.99 0.004 250); border-color: transparent; }

/* ---------- L7 · STAT / VERIF / PANELS internals ---------- */
body.cp-spatial[data-theme="light"] .cp-stat .l,
body.cp-spatial[data-theme="light"] .cp-stat .d { color: var(--muted); }
body.cp-spatial[data-theme="light"] .cp-verif.ok { background: oklch(0.70 0.10 162 / .15); border-color: oklch(0.55 0.11 162 / .35); }
body.cp-spatial[data-theme="light"] .cp-verif.pend { background: oklch(0.74 0.12 70 / .16); border-color: oklch(0.58 0.12 70 / .38); }
body.cp-spatial[data-theme="light"] .cp-verif .vic { background: oklch(0.24 0.02 265 / .08); }
body.cp-spatial[data-theme="light"] .cp-progress { background: oklch(0.24 0.02 265 / .10); }
body.cp-spatial[data-theme="light"] .cp-payrow,
body.cp-spatial[data-theme="light"] .cp-toggle,
body.cp-spatial[data-theme="light"] .cp-tr,
body.cp-spatial[data-theme="light"] .cp-review-row,
body.cp-spatial[data-theme="light"] .cp-login-alt,
body.cp-spatial[data-theme="light"] .cm-stepper li,
body.cp-spatial[data-theme="light"] .cp-check li { border-color: oklch(0.24 0.02 265 / .10); }
body.cp-spatial[data-theme="light"] .cp-tr.head { background: oklch(0.24 0.02 265 / .04); }
body.cp-spatial[data-theme="light"] .cp-review-row:hover,
body.cp-spatial[data-theme="light"] .cp-tr:not(.head):hover { background: oklch(0.24 0.02 265 / .04); }
body.cp-spatial[data-theme="light"] .cp-check .box { border-color: oklch(0.24 0.02 265 / .24); }
body.cp-spatial[data-theme="light"] .cp-brief .blogo,
body.cp-spatial[data-theme="light"] .cp-brief-card .cb-logo,
body.cp-spatial[data-theme="light"] .cm-logo,
body.cp-spatial[data-theme="light"] .ni-ic { background: oklch(0.24 0.02 265 / .06); border-color: oklch(0.24 0.02 265 / .12); color: var(--ink); }

/* ---------- L8 · TABS / FILTER PILLS ---------- */
body.cp-spatial[data-theme="light"] .cp-tabs {
  background: oklch(1 0 0 / .50);
  border-color: oklch(0.24 0.02 265 / .12);
}
body.cp-spatial[data-theme="light"] .cp-tabs button { color: var(--ink-2); }
body.cp-spatial[data-theme="light"] .cp-tabs button:hover { color: var(--ink); }
body.cp-spatial[data-theme="light"] .cp-tabs button.active {
  background: oklch(1 0 0 / .92);
  color: var(--ink);
  box-shadow: 0 2px 10px -4px oklch(0.30 0.04 265 / .30);
}

/* ---------- L9 · BUTTONS ---------- */
body.cp-spatial[data-theme="light"] .cp-btn-pri,
body.cp-spatial[data-theme="light"] .ct-submit {
  background: oklch(0.22 0.02 265);
  color: oklch(0.99 0.004 250);
  box-shadow: 0 8px 22px -12px oklch(0.30 0.04 265 / .45);
}
body.cp-spatial[data-theme="light"] .cp-btn-pri:hover,
body.cp-spatial[data-theme="light"] .ct-submit:hover { background: oklch(0.16 0.02 265); box-shadow: 0 14px 30px -12px oklch(0.30 0.04 265 / .45); }
body.cp-spatial[data-theme="light"] .cp-btn-ghost {
  background: oklch(1 0 0 / .55);
  color: var(--ink);
  border-color: oklch(0.24 0.02 265 / .18);
}
body.cp-spatial[data-theme="light"] .cp-btn-ghost:hover { background: oklch(1 0 0 / .80); border-color: oklch(0.24 0.02 265 / .4); color: var(--ink); }
body.cp-spatial[data-theme="light"] .cp-btn-ok { background: var(--signal); color: #fff; }
body.cp-spatial[data-theme="light"] .cp-btn-rej { color: var(--danger); border-color: oklch(0.55 0.16 25 / .4); background: oklch(0.70 0.15 25 / .06); }
body.cp-spatial[data-theme="light"] .cp-btn-rej:hover { background: oklch(0.70 0.15 25 / .14); }