/* Future Pro theme + custom component styles */

/* ── Theme variables ──────────────────────────────────────────────────────── */
:root {
  --fp-bg:     36 34 37;
  --fp-bg-l:   46 43 48;
  --fp-bg-ll:  58 55 64;
  --fp-fg:     217 215 218;
  --fp-teal:   65 164 139;
  --fp-green:  89 162 87;
  --fp-red:    194 91 91;
  --fp-orange: 176 110 74;
  --fp-gold:   193 153 68;
  --fp-blue:   91 145 179;
  --fp-purple: 148 103 173;
  --fp-pink:   187 93 136;
}

html.light {
  --fp-bg:     228 228 231;
  --fp-bg-l:   214 214 218;
  --fp-bg-ll:  196 196 202;
  --fp-fg:     51 49 53;
  --fp-teal:   32 130 110;
  --fp-green:  68 128 66;
  --fp-red:    165 55 55;
  --fp-orange: 148 86 50;
  --fp-gold:   160 124 40;
  --fp-blue:   60 112 145;
  --fp-purple: 118 78 143;
  --fp-pink:   157 64 108;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
body { background-color: rgb(var(--fp-bg)); color: rgb(var(--fp-fg)); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgb(var(--fp-bg-l)); }
::-webkit-scrollbar-thumb { background: rgb(var(--fp-bg-ll)); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--fp-teal)); }

/* ── Table rows ───────────────────────────────────────────────────────────── */
.table-row-alt:nth-child(even) { background-color: rgb(var(--fp-bg-l)); }
.table-row-alt:nth-child(odd)  { background-color: rgb(var(--fp-bg) / 0.6); }
.table-row-alt:hover           { filter: brightness(1.05); }
td { font-variant-numeric: tabular-nums; }

/* ── Player roster toggle ─────────────────────────────────────────────────── */
.toggle-btn {
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  color: rgb(var(--fp-fg) / 0.25);
  transition: background 0.12s, color 0.12s;
  cursor: pointer;
  background: transparent;
  border: none;
  letter-spacing: 0.04em;
}
.toggle-btn:hover { color: rgb(var(--fp-fg) / 0.6); }
.toggle-btn.active-in      { background: rgb(var(--fp-teal)); color: rgb(var(--fp-bg)); border-radius: 2px 0 0 2px; }
.toggle-btn.active-neutral { background: rgb(var(--fp-bg-ll)); color: rgb(var(--fp-fg)); }
.toggle-btn.active-out     { background: rgb(var(--fp-red)); color: rgb(var(--fp-fg)); border-radius: 0 2px 2px 0; }

/* Row states driven by data-status attribute */
tr[data-status="neutral"] td { color: rgb(var(--fp-fg) / 0.45); }
tr[data-status="in"]         { background-color: rgb(var(--fp-teal) / 0.12) !important; }
tr[data-status="in"] td      { color: rgb(var(--fp-fg)); }
tr[data-status="out"] td     {
  color: rgb(var(--fp-fg) / 0.2);
  text-decoration: line-through;
  text-decoration-color: rgb(var(--fp-fg) / 0.3);
}

/* ── Achievement matrix ───────────────────────────────────────────────────── */
.ach-cell { min-width: 72px; text-align: center; }
.ach-cell.earned { background-color: rgb(var(--fp-teal) / 0.1); }
.reward-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 800;
  cursor: default;
}
.reward-coin  { background: rgb(var(--fp-gold)); color: rgb(var(--fp-bg)); }
.reward-pin   { background: #9ca3af; color: rgb(var(--fp-bg)); }
.reward-patch { background: rgb(var(--fp-green)); color: rgb(var(--fp-bg)); }
.reward-empty { background: rgb(var(--fp-bg-ll)); color: rgb(var(--fp-fg) / 0.2); }

/* Modal */
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 100;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open { display: flex; }

/* ── Badges ───────────────────────────────────────────────────────────────── */
.badge-coin   { background: rgb(var(--fp-gold)); color: rgb(var(--fp-bg)); }
.badge-pin    { background: #9ca3af; color: rgb(var(--fp-bg)); }
.badge-patch  { background: rgb(var(--fp-green)); color: #fff; }

/* ── Theme toggle button ──────────────────────────────────────────────────── */
#theme-toggle {
  background: rgb(var(--fp-bg-ll));
  color: rgb(var(--fp-fg) / 0.6);
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
#theme-toggle:hover { background: rgb(var(--fp-bg-l)); color: rgb(var(--fp-fg)); }

/* ── Print ────────────────────────────────────────────────────────────────── */
@media print {
  nav, footer { display: none; }
  body { background: white; color: black; }
}