/* spatial-forms.css — parte din creator-portal-spatial.css (liniile 253-404).
   Butoane, input-uri / select-uri / chips (inclusiv autofill), toggles și status pills.
   MUTARE PURĂ: conținutul de mai jos e identic cu sursa. Ordinea de încărcare
   a bucăților contează (cascada) — vezi src/components/styles/. */
/* ---------- 9 · BUTTONS ---------- */
body.cp-spatial .cp-btn-pri,
body.cp-spatial .ct-submit {
  background: oklch(1 0 0 / .95);
  color: oklch(0.16 0.02 265);
  box-shadow: 0 8px 22px -12px oklch(0 0 0 / .7);
}
body.cp-spatial .cp-btn-pri:hover,
body.cp-spatial .ct-submit:hover { background: #fff; box-shadow: 0 14px 30px -12px oklch(0 0 0 / .7); }
body.cp-spatial .cp-btn-ghost {
  background: oklch(1 0 0 / .08);
  color: var(--ink);
  border-color: oklch(1 0 0 / .22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.cp-spatial .cp-btn-ghost:hover { background: oklch(1 0 0 / .16); border-color: oklch(1 0 0 / .4); color: #fff; }
body.cp-spatial .cp-btn-ok { background: var(--signal); color: oklch(0.15 0.05 162); }
body.cp-spatial .cp-btn-rej { color: var(--danger); border-color: oklch(0.7 0.13 25 / .45); background: oklch(0.7 0.14 25 / .08); }
body.cp-spatial .cp-btn-rej:hover { background: oklch(0.7 0.14 25 / .18); }

/* ---------- 10 · INPUTS / SELECTS / CHIPS ---------- */
body.cp-spatial .ct-input,
body.cp-spatial .cp-sel,
body.cp-spatial .cp-find input,
body.cp-spatial .cp-rate .inp {
  background: oklch(1 0 0 / .08);
  border-color: oklch(1 0 0 / .18);
  color: var(--ink);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.cp-spatial .ct-input::placeholder { color: var(--faint); }
/* Keep the frosted bg on hover and freeze any autofill background paint so
   Chrome's white preview box can never flash in over the glass inputs. */
body.cp-spatial .ct-input:hover,
body.cp-spatial .cp-sel:hover,
body.cp-spatial .cp-find input:hover {
  background: oklch(1 0 0 / .08) !important;
  transition: border-color .18s, background-color 100000s 0s !important;
}
/* ROOT CAUSE of the "white box on hover": the register form reuses the
   .ct-row/.ct-field table classes, so the light-theme comparison-table rule
   `.ct-row:hover > div { background: oklch(0.97 0.006 80) }` (creator-portal.css)
   bleeds in and paints opaque near-white boxes over the field WRAPPERS on hover.
   Not autofill, not the input — the .ct-field wrapper. Keep wrappers transparent
   so the glass inputs show through. (Recommendation: stop reusing .ct-* table
   classes for the form — give it its own .reg-row/.reg-field names.) */
body.cp-spatial .ct-form .ct-row:not(.ct-head):not(.ct-verdict):hover > div { background: transparent; }
body.cp-spatial .ct-input:focus,
body.cp-spatial .cp-sel:focus,
body.cp-spatial .cp-find input:focus { border-color: oklch(1 0 0 / .5); background: oklch(1 0 0 / .12); }
body.cp-spatial .cp-rate { border-color: oklch(1 0 0 / .12); }
body.cp-spatial .cp-rate .inp input { color: var(--ink); }
/* Native <option> popups need explicit colors — the glass theme can't style
   them, so without this they inherit the OS default (often dark-on-dark =
   unreadable). Covers EVERY portal select: .cp-sel (auth/register networks),
   select.cp-input (brief modal status), and select.ct-input (the profil
   platform network picker, which reuses the .ct-input class). */
body.cp-spatial .cp-sel option,
body.cp-spatial select.cp-input option,
body.cp-spatial select.ct-input option { background: oklch(0.2 0.02 265); color: #fff; }

/* Brief allocation list on the glass theme. */
body.cp-spatial .cp-alloc-list { border-color: oklch(1 0 0 / .14); background: oklch(1 0 0 / .04); }
body.cp-spatial .cp-alloc-item:hover { background: oklch(1 0 0 / .07); }
body.cp-spatial .cp-alloc-nm { color: var(--ink); }
body.cp-spatial .cp-alloc-ni { color: var(--ink-2); }

/* Brief logo controls on the glass theme. */
body.cp-spatial .cp-logo-preview { border-color: oklch(1 0 0 / .18); background: oklch(1 0 0 / .06); }
body.cp-spatial .cp-logo-ph { color: var(--ink-2); }

/* ---- Autofill: keep the glass look, never let Chrome's pale fill show through.
   The inset box-shadow MUST be opaque — a translucent one (e.g. /.55) lets
   Chrome's pale autofill background bleed through as a white box, including the
   hover/preview state. One opaque dark tone for every autofill pseudo. Each
   pseudo gets its OWN rule so an unknown one can't invalidate the whole list. */
body.cp-spatial input:-webkit-autofill,
body.cp-spatial input:-webkit-autofill:hover,
body.cp-spatial input:-webkit-autofill:focus,
body.cp-spatial input:-webkit-autofill:active,
body.cp-spatial textarea:-webkit-autofill,
body.cp-spatial textarea:-webkit-autofill:hover,
body.cp-spatial textarea:-webkit-autofill:focus,
body.cp-spatial select:-webkit-autofill,
body.cp-spatial select:-webkit-autofill:hover,
body.cp-spatial select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink) !important;
  -webkit-box-shadow: 0 0 0 1000px oklch(0.23 0.02 265) inset !important;
  box-shadow: 0 0 0 1000px oklch(0.23 0.02 265) inset !important;
  border-color: oklch(1 0 0 / .18) !important;
  transition: background-color 100000s 0s, color 100000s 0s !important;
}
body.cp-spatial input:-webkit-autofill:focus { border-color: oklch(1 0 0 / .5) !important; }

/* Standard :autofill pseudo (modern Chrome / Safari) — own rule. */
body.cp-spatial input:autofill,
body.cp-spatial textarea:autofill,
body.cp-spatial select:autofill {
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink) !important;
  -webkit-box-shadow: 0 0 0 1000px oklch(0.23 0.02 265) inset !important;
  box-shadow: 0 0 0 1000px oklch(0.23 0.02 265) inset !important;
  border-color: oklch(1 0 0 / .18) !important;
  transition: background-color 100000s 0s, color 100000s 0s !important;
}

/* Chrome's preview/selected state (hovering an empty field Chrome can fill) —
   this is the one that flashed the pale box. Own rule, opaque fill. */
body.cp-spatial input:-internal-autofill-previewed,
body.cp-spatial input:-internal-autofill-selected,
body.cp-spatial textarea:-internal-autofill-previewed,
body.cp-spatial textarea:-internal-autofill-selected,
body.cp-spatial select:-internal-autofill-previewed,
body.cp-spatial select:-internal-autofill-selected {
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink) !important;
  -webkit-box-shadow: 0 0 0 1000px oklch(0.23 0.02 265) inset !important;
  box-shadow: 0 0 0 1000px oklch(0.23 0.02 265) inset !important;
  border-color: oklch(1 0 0 / .18) !important;
  transition: background-color 100000s 0s, color 100000s 0s !important;
}

/* service / niche chips */
body.cp-spatial .ct-svc span { border-color: oklch(1 0 0 / .2); color: var(--ink-2); }
body.cp-spatial .ct-svc label:hover span { border-color: oklch(1 0 0 / .4); color: #fff; }
body.cp-spatial .ct-svc input:checked + span { background: oklch(1 0 0 / .92); color: oklch(0.18 0.02 265); border-color: transparent; }

/* pricing mode segmented control */
body.cp-spatial .cp-price-modes span { border-color: oklch(1 0 0 / .2); }
body.cp-spatial .cp-price-modes label:hover span { border-color: oklch(1 0 0 / .4); }
body.cp-spatial .cp-price-modes input:checked + span {
  border-color: oklch(1 0 0 / .5);
  background: oklch(1 0 0 / .1);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / .35);
}
body.cp-spatial .cp-price-note { border-color: oklch(1 0 0 / .2); }

/* toggles */
body.cp-spatial .cp-toggle i { background: oklch(1 0 0 / .18); }
body.cp-spatial .cp-toggle input:checked + i { background: var(--signal); }

/* ---------- 11 · STATUS PILLS / TAGS / BADGES ---------- */
body.cp-spatial .cp-status--new { color: var(--signal); background: var(--signal-bg); }
body.cp-spatial .cp-status--active { color: #fff; background: oklch(1 0 0 / .12); }
body.cp-spatial .cp-status--done { color: var(--muted); background: oklch(1 0 0 / .08); }
body.cp-spatial .cp-status--rej { color: var(--danger); background: var(--danger-bg); }
body.cp-spatial .cp-verbadge { color: var(--signal); background: var(--signal-bg); border-color: oklch(0.7 0.12 162 / .4); }
body.cp-spatial .cp-verbadge.pend { color: var(--pending); background: var(--pending-bg); border-color: oklch(0.78 0.12 80 / .4); }