/* spatial-light-surfaces.css — parte din creator-portal-spatial.css (liniile 921-1151).
   Tema LIGHT (partea 2): input-uri/chips, status pills, auth, drawere, notificări,
   profil public, avatare, scrollbars, bara de tab-uri mobilă. Se încarcă ULTIMA.
   MUTARE PURĂ: conținutul de mai jos e identic cu sursa. Ordinea de încărcare
   a bucăților contează (cascada) — vezi src/components/styles/. */
/* ---------- L10 · INPUTS / SELECTS / CHIPS ---------- */
body.cp-spatial[data-theme="light"] .ct-input,
body.cp-spatial[data-theme="light"] .cp-sel,
body.cp-spatial[data-theme="light"] .cp-input,
body.cp-spatial[data-theme="light"] .cp-find input,
body.cp-spatial[data-theme="light"] .cp-rate .inp {
  background: oklch(1 0 0 / .70);
  border-color: oklch(0.24 0.02 265 / .18);
  color: var(--ink);
}
body.cp-spatial[data-theme="light"] .ct-input::placeholder,
body.cp-spatial[data-theme="light"] .cp-input::placeholder { color: var(--faint); }
body.cp-spatial[data-theme="light"] .ct-input:hover,
body.cp-spatial[data-theme="light"] .cp-sel:hover,
body.cp-spatial[data-theme="light"] .cp-find input:hover {
  background: oklch(1 0 0 / .70) !important;
  transition: border-color .18s, background-color 100000s 0s !important;
}
body.cp-spatial[data-theme="light"] .ct-input:focus,
body.cp-spatial[data-theme="light"] .cp-sel:focus,
body.cp-spatial[data-theme="light"] .cp-input:focus,
body.cp-spatial[data-theme="light"] .cp-find input:focus { border-color: oklch(0.24 0.02 265 / .5); background: oklch(1 0 0 / .88); }
body.cp-spatial[data-theme="light"] .cp-rate { border-color: oklch(0.24 0.02 265 / .12); }
body.cp-spatial[data-theme="light"] .cp-rate .inp input { color: var(--ink); }
/* native option popups: dark-on-light, readable on the light theme. Same three
   select classes as the dark rule (.cp-sel / select.cp-input / select.ct-input
   — the profil platform network picker). */
body.cp-spatial[data-theme="light"] .cp-sel option,
body.cp-spatial[data-theme="light"] select.cp-input option,
body.cp-spatial[data-theme="light"] select.ct-input option { background: #fff; color: #111; }

/* autofill: keep the light glass, opaque pale fill */
body.cp-spatial[data-theme="light"] input:-webkit-autofill,
body.cp-spatial[data-theme="light"] input:-webkit-autofill:hover,
body.cp-spatial[data-theme="light"] input:-webkit-autofill:focus,
body.cp-spatial[data-theme="light"] textarea:-webkit-autofill,
body.cp-spatial[data-theme="light"] select:-webkit-autofill,
body.cp-spatial[data-theme="light"] input:autofill,
body.cp-spatial[data-theme="light"] textarea:autofill,
body.cp-spatial[data-theme="light"] select:autofill,
body.cp-spatial[data-theme="light"] input:-internal-autofill-previewed,
body.cp-spatial[data-theme="light"] input:-internal-autofill-selected {
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink) !important;
  -webkit-box-shadow: 0 0 0 1000px oklch(0.99 0.004 250) inset !important;
  box-shadow: 0 0 0 1000px oklch(0.99 0.004 250) inset !important;
  border-color: oklch(0.24 0.02 265 / .18) !important;
  transition: background-color 100000s 0s, color 100000s 0s !important;
}

/* service / niche chips */
body.cp-spatial[data-theme="light"] .ct-svc span { border-color: oklch(0.24 0.02 265 / .2); color: var(--ink-2); }
body.cp-spatial[data-theme="light"] .ct-svc label:hover span { border-color: oklch(0.24 0.02 265 / .4); color: var(--ink); }
body.cp-spatial[data-theme="light"] .ct-svc input:checked + span { background: oklch(0.22 0.02 265); color: oklch(0.99 0.004 250); border-color: transparent; }

/* pricing mode segmented control */
body.cp-spatial[data-theme="light"] .cp-price-modes span { border-color: oklch(0.24 0.02 265 / .2); }
body.cp-spatial[data-theme="light"] .cp-price-modes label:hover span { border-color: oklch(0.24 0.02 265 / .4); }
body.cp-spatial[data-theme="light"] .cp-price-modes input:checked + span {
  border-color: oklch(0.24 0.02 265 / .5);
  background: oklch(0.24 0.02 265 / .05);
  box-shadow: inset 0 0 0 1px oklch(0.24 0.02 265 / .35);
}
body.cp-spatial[data-theme="light"] .cp-price-note { border-color: oklch(0.24 0.02 265 / .2); }

/* toggles */
body.cp-spatial[data-theme="light"] .cp-toggle i { background: oklch(0.24 0.02 265 / .18); }
body.cp-spatial[data-theme="light"] .cp-toggle input:checked + i { background: var(--signal); }

/* ---------- L11 · STATUS PILLS / TAGS / BADGES ---------- */
body.cp-spatial[data-theme="light"] .cp-status--new { color: var(--signal); background: var(--signal-bg); }
body.cp-spatial[data-theme="light"] .cp-status--active { color: var(--ink); background: oklch(0.24 0.02 265 / .08); }
body.cp-spatial[data-theme="light"] .cp-status--done { color: var(--muted); background: oklch(0.24 0.02 265 / .06); }
body.cp-spatial[data-theme="light"] .cp-status--rej { color: var(--danger); background: var(--danger-bg); }
body.cp-spatial[data-theme="light"] .cp-verbadge { color: var(--signal); background: var(--signal-bg); border-color: oklch(0.55 0.11 162 / .4); }
body.cp-spatial[data-theme="light"] .cp-verbadge.pend { color: var(--pending); background: var(--pending-bg); border-color: oklch(0.58 0.12 70 / .4); }

/* ---------- L12 · AUTH SCREENS (floating glass slab) ---------- */
body.cp-spatial[data-theme="light"] .cp-auth {
  border: 1px solid oklch(0.24 0.02 265 / .12);
  box-shadow: var(--glass-edge), 0 60px 120px -50px oklch(0.30 0.04 265 / .35);
}
body.cp-spatial[data-theme="light"] .cp-auth-aside {
  background: oklch(0.22 0.02 280 / .92);
  border-right: 1px solid oklch(1 0 0 / .12);
}
/* the aside stays a deep slab for contrast against its own white-on-dark copy;
   the form half is the light glass surface */
body.cp-spatial[data-theme="light"] .cp-auth-main {
  background: oklch(1 0 0 / .80);
}
body.cp-spatial[data-theme="light"] .cp-auth-form > h2,
body.cp-spatial[data-theme="light"] .cp-auth-form > .sub,
body.cp-spatial[data-theme="light"] .cp-fset-h h3 { color: var(--ink); }
body.cp-spatial[data-theme="light"] .cp-fset-h .n { background: oklch(0.22 0.02 265); color: oklch(0.99 0.004 250); }
body.cp-spatial[data-theme="light"] .cp-done .seal { background: var(--signal-bg); color: var(--signal); border-color: oklch(0.55 0.11 162 / .45); }
body.cp-spatial[data-theme="light"] .cp-done-steps .ord { border-color: oklch(0.24 0.02 265 / .22); color: var(--muted); }
body.cp-spatial[data-theme="light"] .cr-consent a { color: var(--ink); }
body.cp-spatial[data-theme="light"] .cr-consent { color: var(--ink-2); }

/* registration accordion (light glass) */
body.cp-spatial[data-theme="light"] .cp-acc .cp-fset {
  border: 1px solid oklch(0.24 0.02 265 / .12);
  background: oklch(1 0 0 / .55);
}
body.cp-spatial[data-theme="light"] .cp-acc .cp-fset.open {
  border-color: oklch(0.24 0.02 265 / .26);
  background: oklch(1 0 0 / .75);
  box-shadow: 0 18px 40px -28px oklch(0.30 0.04 265 / .30);
}
body.cp-spatial[data-theme="light"] .cp-acc .cp-fset-h:hover { background: oklch(0.24 0.02 265 / .03); }
body.cp-spatial[data-theme="light"] .cp-acc .cp-fset.done .cp-fset-h .n { background: var(--signal); color: #fff; }
body.cp-spatial[data-theme="light"] .cp-acc .cp-fset.open .cp-acc-chev { color: var(--ink); }
body.cp-spatial[data-theme="light"] .cp-acc-done { color: var(--signal); background: var(--signal-bg); border-color: oklch(0.55 0.11 162 / .45); }

/* ---------- L13 · DRAWERS ---------- */
body.cp-spatial[data-theme="light"] .cp-drawer.open .cp-drawer-scrim { background: oklch(0.30 0.04 265 / .28); }
body.cp-spatial[data-theme="light"] .cp-drawer-panel {
  background: oklch(1 0 0 / .82);
  border-left: 1px solid oklch(0.24 0.02 265 / .12);
  box-shadow: -40px 0 100px -50px oklch(0.30 0.04 265 / .35), var(--glass-edge);
}
body.cp-spatial[data-theme="light"] .cp-drawer-top,
body.cp-spatial[data-theme="light"] .cp-drawer-foot { border-color: oklch(0.24 0.02 265 / .12); }
body.cp-spatial[data-theme="light"] .cp-drawer-foot { background: oklch(0.24 0.02 265 / .03); }
body.cp-spatial[data-theme="light"] .rv-name h2 { color: var(--ink); }
body.cp-spatial[data-theme="light"] .rv-acc,
body.cp-spatial[data-theme="light"] .cm-deliv-row,
body.cp-spatial[data-theme="light"] .al-row { background: oklch(1 0 0 / .55); border-color: oklch(0.24 0.02 265 / .12); }
body.cp-spatial[data-theme="light"] .cm-deliv-row.done { background: oklch(0.70 0.10 162 / .14); border-color: oklch(0.55 0.11 162 / .35); }
body.cp-spatial[data-theme="light"] .al-row:hover { border-color: oklch(0.24 0.02 265 / .4); }
body.cp-spatial[data-theme="light"] .al-row:has(input:checked) { background: oklch(0.70 0.10 162 / .14); border-color: var(--signal); }
body.cp-spatial[data-theme="light"] .rv-pill { border-color: oklch(0.24 0.02 265 / .2); color: var(--ink-2); }
body.cp-spatial[data-theme="light"] .rv-pill.ok { color: var(--signal); background: var(--signal-bg); border-color: oklch(0.55 0.11 162 / .35); }
body.cp-spatial[data-theme="light"] .rv-pill.warn { color: var(--pending); background: var(--pending-bg); border-color: oklch(0.58 0.12 70 / .4); }
body.cp-spatial[data-theme="light"] .cm-note { background: oklch(0.24 0.02 265 / .04); border-color: oklch(0.24 0.02 265 / .12); }
body.cp-spatial[data-theme="light"] .cm-stepper .dot { background: oklch(1 0 0 / .80); border-color: oklch(0.24 0.02 265 / .2); color: var(--muted); }
body.cp-spatial[data-theme="light"] .cm-stepper li.done .dot { background: var(--signal); border-color: var(--signal); color: #fff; }
body.cp-spatial[data-theme="light"] .cm-stepper li.current .dot { border-color: var(--signal); color: var(--signal); }
body.cp-spatial[data-theme="light"] .cm-deliv-check { background: oklch(0.24 0.02 265 / .06); border-color: oklch(0.24 0.02 265 / .18); }
body.cp-spatial[data-theme="light"] .cm-deliv-row.done .cm-deliv-check { background: var(--signal); border-color: var(--signal); color: #fff; }
body.cp-spatial[data-theme="light"] .cm-deliv-up { background: oklch(1 0 0 / .60); border-color: oklch(0.24 0.02 265 / .2); color: var(--ink); }
body.cp-spatial[data-theme="light"] .cm-deliv-up:hover { border-color: var(--ink); }

/* brief drawer logo + allocation list (light glass) */
body.cp-spatial[data-theme="light"] .cp-alloc-list { border-color: oklch(0.24 0.02 265 / .12); background: oklch(1 0 0 / .45); }
body.cp-spatial[data-theme="light"] .cp-alloc-item:hover { background: oklch(0.24 0.02 265 / .05); }
body.cp-spatial[data-theme="light"] .cp-alloc-nm { color: var(--ink); }
body.cp-spatial[data-theme="light"] .cp-alloc-ni { color: var(--ink-2); }
body.cp-spatial[data-theme="light"] .cp-logo-preview { border-color: oklch(0.24 0.02 265 / .18); background: oklch(1 0 0 / .55); }
body.cp-spatial[data-theme="light"] .cp-logo-ph { color: var(--ink-2); }

/* ---------- L14 · NOTIFICATIONS DROPDOWN ---------- */
body.cp-spatial[data-theme="light"] .cp-notif {
  background: oklch(1 0 0 / .88);
  border-color: oklch(0.24 0.02 265 / .12);
  box-shadow: 0 40px 80px -34px oklch(0.30 0.04 265 / .35), var(--glass-edge);
}
body.cp-spatial[data-theme="light"] .cp-notif-h,
body.cp-spatial[data-theme="light"] .cp-notif-item,
body.cp-spatial[data-theme="light"] .cp-notif-foot { border-color: oklch(0.24 0.02 265 / .10); }
body.cp-spatial[data-theme="light"] .cp-notif-item.unread { background: oklch(0.70 0.10 162 / .12); }
body.cp-spatial[data-theme="light"] .cp-notif-foot:hover { background: oklch(0.24 0.02 265 / .05); }

/* ---------- L15 · PUBLIC PROFILE ---------- */
body.cp-spatial[data-theme="light"] .cp-public { color: var(--ink); }
body.cp-spatial[data-theme="light"] .cp-pub-name h1,
body.cp-spatial[data-theme="light"] .cp-pub-h2 { color: var(--ink); }
body.cp-spatial[data-theme="light"] .cp-pub-head { border-color: oklch(0.24 0.02 265 / .12); }
body.cp-spatial[data-theme="light"] .cp-pub-av { background: oklch(0.22 0.02 265); color: oklch(0.99 0.004 250); }

/* ---------- L16 · AVATARS / MARKS ----------
   The light skin re-tints EVERY initials/logo avatar to an ink slab with light
   text (drawer/admin/side-card/review row + brief-logo + alloc). All of them are
   now the single .cp-ava primitive, so one rule covers the whole family. */
body.cp-spatial[data-theme="light"] .cp-ava {
  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 / .14);
}
body.cp-spatial[data-theme="light"] image-slot { box-shadow: inset 0 0 0 1px oklch(0.24 0.02 265 / .14); }
body.cp-spatial[data-theme="light"] .cp-gallery .add-slot { border-color: oklch(0.24 0.02 265 / .25); color: var(--muted); }
body.cp-spatial[data-theme="light"] .cp-gallery .add-slot:hover { border-color: oklch(0.24 0.02 265 / .5); color: var(--ink); }
/* image-slot placeholder caption: dark text reads on the light glass (revert the
   spatial dark-only white override) */
body.cp-spatial[data-theme="light"] image-slot.cp-av,
body.cp-spatial[data-theme="light"] image-slot.cp-pub-av { color: oklch(0.24 0.02 265 / .72); }
body.cp-spatial[data-theme="light"] image-slot.cp-av::part(empty),
body.cp-spatial[data-theme="light"] image-slot.cp-pub-av::part(empty) { color: oklch(0.24 0.02 265 / .72); }
body.cp-spatial[data-theme="light"] image-slot.cp-av::part(ring),
body.cp-spatial[data-theme="light"] image-slot.cp-pub-av::part(ring) { border-color: oklch(0.24 0.02 265 / .30); }

/* ---------- L17 · SCROLLBARS / SELECTION / MISC TEXT ---------- */
body.cp-spatial[data-theme="light"] *::-webkit-scrollbar-thumb { background: oklch(0.24 0.02 265 / .22); }
body.cp-spatial[data-theme="light"] *::-webkit-scrollbar-thumb:hover { background: oklch(0.24 0.02 265 / .34); }
body.cp-spatial[data-theme="light"] ::selection { background: oklch(0.22 0.02 265); color: #fff; }
body.cp-spatial[data-theme="light"] .cp-sec-h h2 { color: var(--ink); }
body.cp-spatial[data-theme="light"] .cp-sec-h .more { color: var(--muted); }
body.cp-spatial[data-theme="light"] .cp-sec-h .more:hover { color: var(--ink); }
body.cp-spatial[data-theme="light"] .cp-pub-back:hover,
body.cp-spatial[data-theme="light"] .cp-login-forgot { color: var(--signal); }
body.cp-spatial[data-theme="light"] .cp-login-alt a { color: var(--ink); }
body.cp-spatial[data-theme="light"] .cp-empty-row { color: var(--muted); }

/* ---------- L18 · DARK-ONLY AMBIENT TWEAK GUARD ----------
   The base rule `[data-theme="dark"] .cp-ambient { filter: brightness(.85) }`
   is scoped to dark and untouched. Our light brightness lives on the photo via
   L2, so the two never collide. (Documented for the next reader.) */

/* ---------- L19 · MOBILE BOTTOM TAB BAR (Variant C) ----------
   The mobile nav is a fixed bottom bar (icon + short label). Override the earlier
   pill treatment (L?/base) so tabs are transparent with an icon highlight; the
   bar itself is frosted glass. Appended last → wins on source order. */
@media (max-width: 820px) {
  body.cp-spatial .cp-mob-tabs {
    background: var(--glass-tint-2);
    backdrop-filter: blur(22px) saturate(1.4);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    border-top: 1px solid var(--line);
  }
  body.cp-spatial .cp-mob-tabs a,
  body.cp-spatial .cp-mob-tabs a.active,
  body.cp-spatial[data-theme="light"] .cp-mob-tabs a,
  body.cp-spatial[data-theme="light"] .cp-mob-tabs a.active {
    background: transparent; border-color: transparent;
  }
  body.cp-spatial .cp-mob-tabs a { color: var(--muted); }
  body.cp-spatial .cp-mob-tabs a.active { color: var(--ink); }
  body.cp-spatial .cp-mob-tabs a.active .mt-ic { background: var(--signal-bg); color: var(--signal); }
}