/* ========================================
   THEME 0: Amazon (Green + Yellow + Dark Gray)
   ======================================== */
body.theme-amazon {
  --bg: #232f3e;
  --fg: #ffffff;
  --accent: #ff9900;
  --accent2: #febd69;
  --border: #37475a;
  --header: #131921;
}
body.theme-amazon {
  background: var(--bg);
  color: var(--fg);
}
body.theme-amazon header {
  background: var(--header);
  border-bottom: 1px solid var(--accent);
}
body.theme-amazon .btn {
  background: var(--accent);
  color: #000;
  border-color: var(--accent2);
}
body.theme-amazon .panel,
body.theme-amazon fieldset,
body.theme-amazon .tab,
body.theme-amazon .tabpanes {
  background: #232f3e;
  border: 1px solid var(--border);
  color: var(--fg);
}
/* ========================================
   THEME 1: Dark (Black + Neon Green)
   ======================================== */
body.theme-dark {
  --bg: #0a0a0a;
  --fg: #e5ffe5;
  --accent: #00ff80;
  --accent2: #00ffaa;
  --border: #111;
  --header: #111;
}
body.theme-dark {
  background: var(--bg);
  color: var(--fg);
}
body.theme-dark header {
  background: var(--header);
  border-bottom: 1px solid var(--accent);
}
body.theme-dark .btn {
  background: var(--accent);
  color: #000;
  border-color: var(--accent2);
}
body.theme-dark .panel,
body.theme-dark fieldset,
body.theme-dark .tab,
body.theme-dark .tabpanes {
  background: #111;
  border: 1px solid var(--accent2);
  color: var(--fg);
}

/* ========================================
   THEME 2: Light (Clean White + Blue)
   ======================================== */
body.theme-light {
  --bg: #fafafa;
  --fg: #222;
  --accent: #007bff;
  --accent2: #339dff;
  --border: #ddd;
  --header: #fdfdfd;
}
body.theme-light {
  background: var(--bg);
  color: var(--fg);
}
body.theme-light header {
  background: var(--header);
  border-bottom: 1px solid var(--border);
}
body.theme-light .btn {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent2);
}
body.theme-light .panel,
body.theme-light fieldset,
body.theme-light .tab,
body.theme-light .tabpanes {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--fg);
}

/* ========================================
   THEME 4: Beach (Teal + Sand + Sky)
   ======================================== */
body.theme-beach {
  --bg: #fdf6e3;
  --fg: #005f73;
  --accent: #0a9396;
  --accent2: #94d2bd;
  --border: #e9d8a6;
  --header: #ee9b00;
}
body.theme-beach {
  background: var(--bg);
  color: var(--fg);
}
body.theme-beach header {
  background: var(--header);
  color: #fff;
  border-bottom: 1px solid var(--accent);
}
body.theme-beach .btn {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent2);
}
body.theme-beach .panel,
body.theme-beach fieldset,
body.theme-beach .tab,
body.theme-beach .tabpanes {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--fg);
}

/* ========================================
   THEME 5: Dealer’s Choice (Cyberpunk Purple + Neon Pink)
   ======================================== */
body.theme-cyberpunk {
  --bg: #1a001f;
  --fg: #f5e6ff;
  --accent: #ff00ff;
  --accent2: #ff4da6;
  --border: #3d004d;
  --header: #2a0033;
}
body.theme-cyberpunk {
  background: var(--bg);
  color: var(--fg);
}
body.theme-cyberpunk header {
  background: var(--header);
  border-bottom: 1px solid var(--accent2);
}
body.theme-cyberpunk .btn {
  background: var(--accent);
  color: #000;
  border-color: var(--accent2);
}
body.theme-cyberpunk .panel,
body.theme-cyberpunk fieldset,
body.theme-cyberpunk .tab,
body.theme-cyberpunk .tabpanes {
  background: #2a0033;
  border: 1px solid var(--accent);
  color: var(--fg);
}
.theme-switcher {
  display:flex; align-items:center; gap:8px;
  padding:4px 8px; border:1px solid var(--border); border-radius:10px;
  background:#0e1110;
}
.theme-switcher label { font-size:12px; color:yellowgreen; }
.theme-switcher select {
  font:inherit; padding:6px 8px; border-radius:8px; border:1px solid var(--border);
  background:#0f1113; color:yellowgreen;
}
/* Make the entire right column the collapsible wrapper */
.container { grid-template-columns: 1fr 380px; }
.container.fa-collapsed { grid-template-columns: 1fr 44px; }

.right-panel { position: relative; min-width: 320px; transition: width .18s ease, min-width .18s ease; }
.right-panel.collapsed { min-width: 44px; width: 44px; }

/* Header layout: keep the chevron visible at all widths */
.panel-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 40px; padding: 10px 8px;
}
.panel-header span {
  flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.panel-toggle {
  flex: 0 0 28px; width: 28px; height: 28px;
  display: inline-grid; place-items: center; border-radius: 8px;
  cursor: pointer; user-select: none; z-index: 3;
}

/* Collapsed state: hide title so the button fits */
.right-panel.collapsed .panel-header span { display: none; }
/* Keep controls & table hidden when collapsed, as before */
.right-panel.collapsed .fa-controls,
.right-panel.collapsed #faTableWrap,
.right-panel.collapsed h3 { display: none; }

/* Chev rotation */
.right-panel.collapsed .panel-toggle { transform: rotate(180deg); }

/* Optional: make the toggle always “look” present even without theme icons */
.panel-toggle::after { content: "⟩"; font-weight: 700; line-height: 1; }

.teamcard-proj{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:6px; font-weight:700; font-size:14px;
  padding:6px 10px; border-radius:999px; border:1px solid transparent;
  font-variant-numeric: tabular-nums;
}
.teamcard-proj .value{ 
    letter-spacing:.2px;
      font-variant-numeric: tabular-nums;
  color: var(--brand, inherit); /* neon if your theme defines --brand */
}

.teamcard-proj.win  { background: rgba(16,185,129,.16); border-color: rgba(16,185,129,.45); }
.teamcard-proj.win .value  { color:#10b981; }

.teamcard-proj.lose { background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.45); }
.teamcard-proj.lose .value { color:#ef4444; }

.teamcard-proj.tie  { background: rgba(148,163,184,.16); border-color: rgba(148,163,184,.45); }
.teamcard-proj.tie .value  { color:#9aa4af; }
/* highlight the Team <select> when it's "ISS" */
select.hl-iss{
  background: #9acd32 !important;   /* yellowgreen */
  color: #0a0a0a !important;        /* readable text */
  border-color: #7fbf00 !important;
  box-shadow: 0 0 0 2px rgba(154,205,50,.35) inset;
}
/* ===== Table banding (zebra) + hover ===== */
:root{
  /* sensible defaults; themes below override */
  --row-odd:  rgba(0,0,0,.03);
  --row-even: rgba(0,0,0,.06);
  --row-hover:rgba(0,0,0,.10);
  --table-head-bg: rgba(0,0,0,.07);
}

/* apply to every data table */
table thead th{
  background: var(--table-head-bg);
  position: sticky; top: 0; z-index: 1;
}
table tbody tr:nth-child(odd){  background: var(--row-odd); }
table tbody tr:nth-child(even){ background: var(--row-even); }
table tbody tr:hover{           background: var(--row-hover); }

/* Theme overrides */
body.theme-dark{
  --row-odd:  rgba(255,255,255,.02);
  --row-even: rgba(255,255,255,.06);
  --row-hover:rgba(0,255,128,.15);
  --table-head-bg: rgba(0,255,128,.12);
}
body.theme-amazon{
  --row-odd:  rgba(255,255,255,.02);
  --row-even: rgba(255,255,255,.06);
  --row-hover:rgba(255,153,0,.20);
  --table-head-bg: rgba(255,153,0,.16);
}
body.theme-light{
  --row-odd:  #ffffff;
  --row-even: #f5f8ff;
  --row-hover:#eaf3ff;
  --table-head-bg:#f1f5fb;
}
body.theme-beach{
  --row-odd:  #ffffff;
  --row-even: #f8f3e7;
  --row-hover:#f2ead8;
  --table-head-bg:#efe3c7;
}
body.theme-cyberpunk{
  --row-odd:  rgba(245,230,255,.03);
  --row-even: rgba(255,0,255,.10);
  --row-hover:rgba(255,77,166,.20);
  --table-head-bg: rgba(255,0,255,.18);
}
/* --- darker tints for Bench & IR (fallbacks) --- */
:root{
  --row-bench: rgba(0,0,0,.10);
  --row-ir:    rgba(0,0,0,.14);
}

/* apply on top of zebra banding */
.zebra tbody tr.is-bench { background: var(--row-bench); }
.zebra tbody tr.is-ir    { background: var(--row-ir); }

/* optional subtle left accent */
.zebra tbody tr.is-bench td:first-child,
.zebra tbody tr.is-ir td:first-child{
  border-left: 3px solid currentColor;
  opacity: .95;
}

/* Theme overrides (slightly darker than each theme’s normal rows) */
body.theme-dark{
  --row-bench: rgba(255,255,255,.08);
  --row-ir:    rgba(255,255,255,.12);
}
body.theme-amazon{
  --row-bench: rgba(255,255,255,.08);
  --row-ir:    rgba(255,255,255,.12);
}
body.theme-light{
  --row-bench: #eef3fa;
  --row-ir:    #e8eef7;
}
body.theme-beach{
  --row-bench: #f3eddf;
  --row-ir:    #ede6d5;
}
body.theme-cyberpunk{
  --row-bench: rgba(255,77,166,.14);
  --row-ir:    rgba(255,0,255,.18);
}
.teamcard-fmv{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px; font-weight:600;
  background: var(--chip-bg, #f2f3f5); color: var(--chip-fg, #111);
  font-size: 12px; line-height: 1;
}
.teamcard-fmv .value{ min-width:4ch; text-align:right; font-variant-numeric: tabular-nums; }

.teamcard-fmv.win  { background:#e8f7ed; color:#0a7a3d; } /* green winner (lower FMV) */
.teamcard-fmv.lose { background:#ffefef; color:#c12525; } /* red loser  (higher FMV) */
/* Suggested FA buttons */
.suggest-btn {
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--chip-bg, #f2f3f5);
  color: var(--fg);
  font-size: 12px;
}
.suggest-btn:hover { filter: brightness(1.05); }
.row.bye { opacity:.8 }
.badge.bye { background:#555; color:#fff; padding:2px 6px; border-radius:6px; font-size:11px; margin-left:6px; }
.is-bye-row { opacity:.9; }
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:10px; text-decoration:none;
  border:1px solid color-mix(in oklab, CanvasText 25%, transparent);
  background: color-mix(in oklab, Canvas 95%, CanvasText 5%);
  font-size: 14px; cursor:pointer;
}
.btn:hover { background: color-mix(in oklab, Canvas 92%, CanvasText 8%); }
.bye-btn::before {
  content: "🏖️"; /* beach umbrella = bye vibes */
  font-size: 16px; line-height: 1;
}
/* Hidden by default; toggled by JS */
#loadingOverlay {
  position: fixed; inset: 0;
  display: none; place-items: center;
  background: rgba(0,0,0,.35); z-index: 9999;
  backdrop-filter: blur(1px);
}
body.loading #loadingOverlay { display: grid; }
#loadingOverlay .loading-card {
  padding: 16px 20px; border-radius: 12px;
  background: var(--panel-bg, #111); color: var(--fg, #fff);
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  display: grid; gap: 10px; justify-items: center;
  min-width: 220px;
}
#loadingOverlay .msg { font-weight: 600; }

/* Optional: inline spinners for specific areas */
.loading-inline {
  display: inline-grid; place-items: center; min-height: 28px; min-width: 28px;
}
.loading-inline::after {
  content: ""; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: r .8s linear infinite;
}
@keyframes r { to { transform: rotate(360deg) } }
.pfmv-badge{
  display:inline-block; margin-left:6px; padding:0 6px;
  font-size:.72rem; line-height:1.2; border-radius:8px;
  border:1px solid rgba(148,163,184,.4);
  background:rgba(148,163,184,.12);
}
/* Setup tabs container highlight when marked .selected */
 /* Tabs */
  .tabs { display:flex; gap:4px; }
  .tab { padding:8px 12px; border-radius:10px 10px 0 0; cursor:pointer; font-size:13px; user-select:none; }
  .tabpanes { border-radius:0 10px 10px 10px; padding:12px; margin-bottom:16px; }

.tab[aria-selected="true"] {
  border: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent2) 12%, transparent);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 0 8px var(--accent2);
}