/* ============================================================
   FPL TEAM VIEWER — theme-toggle.css
   Theme selector toggle — sits at the bottom of the results panel.
   Load after style.css.
   ============================================================ */

/* ── Container row ── */
.fplv-widget .fplv-theme-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 0 4px;
  margin-top: 4px;
}

.fplv-widget .fplv-theme-label {
  font-family: 'Aldrich', sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--fplv-muted, #7a7f9a);
  user-select: none;
  flex-shrink: 0;
}

/* ── Toggle group ── */
.fplv-widget .fplv-theme-toggle {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid var(--fplv-border, #e1e4ee);
  border-radius: 24px;
  background: var(--fplv-bg, #f4f5f9);
  overflow: hidden;
  gap: 0;
}

/* ── Individual option buttons — full reset first ── */
.fplv-widget .fplv-theme-opt {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  line-height: 1;
  font-family: 'Aldrich', 'Roboto', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--fplv-muted, #7a7f9a);
  background: transparent;
  transition: background 0.15s, color 0.15s;
}

.fplv-widget .fplv-theme-opt + .fplv-theme-opt {
  border-left: 1px solid var(--fplv-border, #e1e4ee);
}

.fplv-widget .fplv-theme-opt:hover {
  color: var(--fplv-text, #0d1117);
  background: var(--fplv-surface, #fff);
}

.fplv-widget .fplv-theme-opt--active {
  background: var(--fplv-text, #0d1117);
  color: var(--fplv-bg, #f4f5f9);
}

.fplv-widget .fplv-theme-opt--active:hover {
  background: var(--fplv-text, #0d1117);
  color: var(--fplv-bg, #f4f5f9);
  opacity: 0.88;
}

/* ── theme-simple ── */
.fplv-widget.theme-simple .fplv-theme-label {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  letter-spacing: 0.5px;
}
.fplv-widget.theme-simple .fplv-theme-toggle {
  border-color: #d1d5db;
  background: #f3f4f6;
  border-radius: 6px;
}
.fplv-widget.theme-simple .fplv-theme-opt {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #9ca3af;
}
.fplv-widget.theme-simple .fplv-theme-opt + .fplv-theme-opt { border-left-color: #d1d5db; }
.fplv-widget.theme-simple .fplv-theme-opt:hover { background: #fff; color: #111827; }
.fplv-widget.theme-simple .fplv-theme-opt--active { background: #2563eb; color: #fff; }
.fplv-widget.theme-simple .fplv-theme-opt--active:hover { background: #1d4ed8; opacity: 1; }

/* ── theme-cool ── */
.fplv-widget.theme-cool .fplv-theme-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 2px;
  color: rgba(240,240,255,0.35);
}
.fplv-widget.theme-cool .fplv-theme-toggle {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
}
.fplv-widget.theme-cool .fplv-theme-opt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: rgba(240,240,255,0.35);
}
.fplv-widget.theme-cool .fplv-theme-opt + .fplv-theme-opt { border-left: 1px solid rgba(255,255,255,0.08); }
.fplv-widget.theme-cool .fplv-theme-opt:hover { background: rgba(34,211,238,0.10); color: #22d3ee; }
.fplv-widget.theme-cool .fplv-theme-opt--active { background: rgba(34,211,238,0.20); color: #22d3ee; }
.fplv-widget.theme-cool .fplv-theme-opt--active:hover { background: rgba(34,211,238,0.28); opacity: 1; }