/* ---- THEME TOKENS ---- */
:root, html[data-theme="dark"] {
  --bg:#0f1115; --text:#e7e9ee; --muted:#8a91a5;
  --card:#171a21; --card2:#0f121a; --border:#232737; --accent:#2b70ff;

  /* table (index table only) */
  --thead-bg:#0d131d; --thead-text:#e6edf6; --row-border:#223049; --row-hover:#1a2333;

  /* buttons (solid, high contrast) */
  --btn-bg:#2b70ff; --btn-text:#ffffff; --btn-hover:brightness(1.15);
}
html[data-theme="light"] {
  --bg:#f7f9fc; --text:#111827; --muted:#4b5563;
  --card:#ffffff; --card2:#f3f4f6; --border:#e5e7eb; --accent:#2563eb;

  /* table */
  --thead-bg:#f1f5f9; --thead-text:#0f172a; --row-border:#e5e7eb; --row-hover:#f9fafb;

  /* buttons */
  --btn-bg:#2563eb; --btn-text:#ffffff; --btn-hover:brightness(1.10);
}

/* ---- CORE STYLES ---- */
html, body { margin:0; background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; }
.wrap { min-height:100vh; display:grid; place-items:center; padding:24px; }
/* Note: width is set by craps.css's .card rule (100% of container).
   The legacy `min(900px, 95vw)` was causing horizontal overflow on phones. */
h1 { margin:0 0 12px; font-size:20px; }
.controls { display:flex; gap:10px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }

button, .csv { background:var(--btn-bg); color:var(--btn-text); border:1px solid transparent;
  padding:8px 12px; border-radius:8px; cursor:pointer; text-decoration:none; display:inline-block;
  font-weight:600; transition:transform .08s ease, filter .2s ease; }
button:hover, .csv:hover { filter:var(--btn-hover); transform:translateY(-1px); }

#dateInput, #startInput, #endInput, #teamSelect {
  padding:8px; border-radius:8px; border:1px solid var(--border);
  background:var(--card2); color:var(--text);
}

/* ---- INDEX TABLE ---- */
#tbl { width:100%; border-collapse:collapse; }
#tbl thead th { text-align:left; font-weight:600; font-size:13px; padding:10px 8px;
  background:var(--thead-bg); color:var(--thead-text); border-bottom:1px solid var(--border); }
#tbl td { padding:10px 8px; border-bottom:1px solid var(--row-border); font-size:14px; }
#tbl tbody tr:hover { background:var(--row-hover); }

/* ---- THEME TOGGLE ---- */
.theme-toggle{ display:flex; align-items:center; gap:8px; }
.switch-input{ position:absolute; opacity:0; pointer-events:none; }
.switch{ width:46px; height:26px; border-radius:999px; cursor:pointer;
  background:var(--border); border:1px solid var(--border); position:relative; }
.switch .knob{ position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%;
  background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.25); transition:transform .2s ease; }
.switch-input:checked + .switch{ background:var(--accent); border-color:var(--accent); }
.switch-input:checked + .switch .knob{ transform:translateX(20px); }
.switch-text{ font-weight:600; color:var(--muted); }