/* MatchPoint Live View — Custom styles */

/* ─── Theme Variables (RGB triplets for Tailwind alpha support) ─── */

/* Light theme (default) */
:root {
  --lv-surface: 245 247 255;
  --lv-surface-bright: 255 255 255;
  --lv-surface-low: 238 240 248;
  --lv-surface-container: 232 234 243;
  --lv-surface-high: 221 224 238;
  --lv-surface-highest: 210 213 233;
  --lv-accent: 0 122 61;
  --lv-accent-dim: 0 93 44;
  --lv-on-accent: 255 255 255;
  --lv-secondary: 0 88 202;
  --lv-on-surface: 26 31 54;
  --lv-on-surface-variant: 77 85 107;
  --lv-outline: 109 117 140;
  --lv-outline-variant: 176 184 209;
  --lv-win: 22 163 74;
  --lv-loss: 239 68 68;
  color-scheme: light;
}

/* Dark theme */
.dark {
  --lv-surface: 6 14 32;
  --lv-surface-bright: 31 43 73;
  --lv-surface-low: 9 19 40;
  --lv-surface-container: 15 25 48;
  --lv-surface-high: 20 31 56;
  --lv-surface-highest: 25 37 64;
  --lv-accent: 63 255 139;
  --lv-accent-dim: 36 240 126;
  --lv-on-accent: 0 93 44;
  --lv-secondary: 110 155 255;
  --lv-on-surface: 222 229 255;
  --lv-on-surface-variant: 163 170 196;
  --lv-outline: 109 117 140;
  --lv-outline-variant: 64 72 93;
  --lv-win: 74 222 128;
  --lv-loss: 248 113 113;
  color-scheme: dark;
}

/* ─── Transitions ──────────────────────────────────────────────── */

#tab-content {
  animation: fadeIn 0.15s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hide scrollbar on tab bar */
#tab-bar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#tab-bar::-webkit-scrollbar {
  display: none;
}

/* Bracket horizontal scrolling hint */
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}

/* Drag-to-scroll for bracket areas */
#tab-content .overflow-x-auto {
  cursor: grab;
  user-select: none;
}
#tab-content .overflow-x-auto.lv-grabbing {
  cursor: grabbing;
}

/* Pulse animation for live badge */
@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.animate-pulse {
  animation: pulse-live 1.5s ease-in-out infinite;
}

/* ─── Scrollbar & Selection ────────────────────────────────────── */

* {
  scrollbar-color: rgb(var(--lv-outline-variant)) rgb(var(--lv-surface-container));
}

::selection {
  background-color: rgb(var(--lv-accent) / 0.2);
  color: rgb(var(--lv-on-surface));
}

/* ─── Theme Toggle Button ──────────────────────────────────────── */

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  background: rgb(var(--lv-surface-high));
  color: rgb(var(--lv-on-surface-variant));
  transition: background 200ms, color 200ms;
}
.theme-toggle:hover {
  background: rgb(var(--lv-surface-highest));
  color: rgb(var(--lv-on-surface));
}