/* ═══════════════════════════════════════════
   MARKER — LIGHT THEME
   Overrides :root variables + component styles
═══════════════════════════════════════════ */

/* ── CSS variable overrides ── */
[data-theme="light"] {
  --bg: #F0EDFF;
  --surface: #E8E3FF;
  --elevated: #D8D0FF;
  --white: #0C0032;
  --muted: rgba(12,0,50,.44);
  --secondary: rgba(12,0,50,.70);
  --border: rgba(53,0,211,.22);
  --border-soft: rgba(53,0,211,.11);
  --green: #00904A;
  --red: #CC2222;
}

/* ── Base ── */
[data-theme="light"] body { background: var(--bg); }
[data-theme="light"] body::before { opacity: .05; }
[data-theme="light"] body::after  { opacity: .07; filter: invert(1); }

/* ── Header ── */
[data-theme="light"] header {
  background: rgba(240,237,255,.92);
  border-bottom-color: rgba(53,0,211,.15);
}

/* ── Sidebar ── */
[data-theme="light"] .sidebar { border-right-color: rgba(53,0,211,.12); }
[data-theme="light"] .nav-item:hover  { background: rgba(53,0,211,.09); }
[data-theme="light"] .nav-item.active { background: rgba(53,0,211,.18); }

/* ── Cards ── */
[data-theme="light"] .card {
  background: linear-gradient(145deg,#EBE8FF 0%,#F2F0FF 100%);
  border-color: rgba(53,0,211,.18);
}

/* ── Groups grid ── */
[data-theme="light"] .group-card { background: rgba(53,0,211,.03); }
[data-theme="light"] .group-card-head { background: rgba(53,0,211,.07); }
[data-theme="light"] .group-player-row:hover { background: rgba(53,0,211,.06); }
[data-theme="light"] .group-player-row.selected {
  background: rgba(53,0,211,.16);
  outline-color: var(--accent);
}
[data-theme="light"] .group-player-row.swap-target {
  background: rgba(53,0,211,.05);
  outline-color: rgba(53,0,211,.3);
}
[data-theme="light"] .group-player-row.drag-over {
  background: rgba(53,0,211,.14) !important;
  outline-color: var(--accent);
}

/* ── Tables ── */
[data-theme="light"] .tbl-wrap {
  background: rgba(53,0,211,.03);
  border-color: rgba(53,0,211,.11);
}
[data-theme="light"] .tbl th { border-bottom-color: rgba(53,0,211,.1); }
[data-theme="light"] .tbl td { border-bottom-color: rgba(53,0,211,.05); }
[data-theme="light"] .tbl tr:hover td { background: rgba(53,0,211,.05); }

/* ── Forms ── */
[data-theme="light"] .form-input,
[data-theme="light"] .form-select {
  background: rgba(53,0,211,.06);
  border-color: rgba(53,0,211,.22);
  color: var(--white);
}
[data-theme="light"] .form-input::placeholder { color: rgba(12,0,50,.28); }
[data-theme="light"] .form-select option { background: #EBE8FF; color: #0C0032; }

/* ── Toggle ── */
[data-theme="light"] .toggle-slider { background: rgba(53,0,211,.14); }
[data-theme="light"] .toggle-slider::before { background: #0C0032; }

/* ── Size picker ── */
[data-theme="light"] .size-opt { background: rgba(53,0,211,.04); }

/* ── HCP ranges ── */
[data-theme="light"] .hcp-range { background: rgba(53,0,211,.04); }
[data-theme="light"] .hcp-range input[type=number] {
  background: rgba(53,0,211,.07);
  color: var(--white);
}

/* ── Options panel ── */
[data-theme="light"] .options-panel { background: rgba(53,0,211,.03); }

/* ── Tabs ── */
[data-theme="light"] .detail-tabs { border-bottom-color: rgba(53,0,211,.14); }

/* ── Info boxes ── */
[data-theme="light"] .info-box.tip     { background: rgba(53,0,211,.07); }
[data-theme="light"] .info-box.warn    { background: rgba(255,140,0,.08); }
[data-theme="light"] .info-box.success { background: rgba(0,200,100,.08); }

/* ── Toast ── */
[data-theme="light"] .toast {
  background: #EBE8FF;
  border-color: rgba(53,0,211,.3);
}
[data-theme="light"] .toast.success { border-color: rgba(0,144,74,.4); }
[data-theme="light"] .toast.error   { border-color: rgba(204,34,34,.4); }

/* ── Modal ── */
[data-theme="light"] .overlay { background: rgba(12,0,50,.52); }
[data-theme="light"] .modal {
  background: linear-gradient(160deg,#EBE8FF 0%,#F2F0FF 100%);
  border-color: rgba(53,0,211,.28);
}
[data-theme="light"] .modal-head { background: #EBE8FF; }
[data-theme="light"] .modal-close {
  background: rgba(53,0,211,.1);
  color: #0C0032;
}
[data-theme="light"] .modal-close:hover { background: rgba(53,0,211,.18); }

/* ── User chip ── */
[data-theme="light"] .user-chip {
  background: rgba(53,0,211,.1);
  border-color: rgba(53,0,211,.2);
}

/* ── Scrollbar ── */
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(53,0,211,.28); }

/* ── Theme toggle button (shared across pages) ── */
.theme-btn { display: none; }