@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

:root[data-theme="dark"] {
  --bg-base: #001718;
  --bg-surface: #002a2c;
  --bg-elevated: #003a3c;
  --bg-hover: #004a4c;
  --bg-input: #002020;

  --border-subtle: rgba(0, 200, 160, 0.10);
  --border-default: rgba(0, 200, 160, 0.20);
  --border-strong: rgba(0, 200, 160, 0.40);

  --accent: #00e5cc;
  --accent-dim: rgba(0, 229, 204, 0.12);

  --green: #27ae60;
  --green-dim: rgba(39, 174, 96, 0.15);
  --green-border: rgba(39, 174, 96, 0.35);
  --amber: #e67e22;
  --amber-dim: rgba(230, 126, 34, 0.12);
  --red: #c0392b;
  --red-dim: rgba(192, 57, 43, 0.10);
  --live-red: #ff4444;
  --ht-amber: #ffaa00;
  --up-blue: #3a7bfd;

  --text-primary: #c8e8e0;
  --text-secondary: #7a9890;
  --text-muted: #5a7870;
  --text-accent: #00e5cc;

  --odds-home: #c8e8e0;
  --odds-draw: #7a9890;
  --odds-away: #ef9a9a;

  --font-mono: 'JetBrains Mono', 'Courier New', Consolas, monospace;

  --shadow-sidebar: 4px 0 16px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.4);
  --shadow-row: 0 1px 4px rgba(0, 0, 0, 0.3);
}

:root[data-theme="light"] {
  --bg-base: #f0f4f0;
  --bg-surface: #ffffff;
  --bg-elevated: #e4ece4;
  --bg-hover: #dceadc;
  --bg-input: #ffffff;

  --border-subtle: rgba(0,0,0,.08);
  --border-default: rgba(0,0,0,.15);
  --border-strong: rgba(0,0,0,.28);

  --accent: #1a6b1a;
  --accent-dim: rgba(26,107,26,.10);
  --accent-glow: none;

  --green: #1a7a1a;
  --green-dim: rgba(26,122,26,.12);
  --green-border: rgba(26,122,26,.30);
  --amber: #b85c00;
  --amber-dim: rgba(184,92,0,.10);
  --red: #b71c1c;
  --red-dim: rgba(183,28,28,.08);
  --live-red: #ff4444;
  --ht-amber: #ffaa00;
  --up-blue: #3a7bfd;

  --text-primary: #1a2a1a;
  --text-secondary: #3a5a3a;
  --text-muted: #6a8a6a;
  --text-accent: #1a6b1a;

  --odds-home: #1a2a1a;
  --odds-draw: #4a6a4a;
  --odds-away: #b71c1c;

  --font-mono: 'JetBrains Mono', 'Courier New', Consolas, monospace;

  --shadow-sidebar: 4px 0 16px rgba(0,0,0,.12);
  --shadow-card: 0 2px 10px rgba(0,0,0,.08);
  --shadow-row: none;

  --topbar-bg: #1a6b1a;
  --topbar-text: #ffffff;
  --topbar-border: rgba(0,0,0,.15);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
}

.layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.topbar {
  background: linear-gradient(135deg, #001718 0%, #003030 50%, #004040 100%);
  border-bottom: 1px solid rgba(0,200,160,.20);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}

.topbar-title { color: #00e5cc; }

.topbar .search {
  background: #002020;
  border: 1px solid rgba(0,200,160,.20);
  color: #c8e8e0;
}

.topbar .search::placeholder { color: #5a7870; }

.topbar .sort-btn {
  border: 1px solid rgba(0,200,160,.20);
  color: #7a9890;
}

.topbar .sort-btn.active {
  border-color: #00e5cc;
  color: #00e5cc;
  background: rgba(0,229,204,.12);
}

.topbar .theme-btn {
  border: 1px solid rgba(0,200,160,.40);
  color: #00e5cc;
  background: rgba(0,229,204,.12);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  box-shadow: var(--shadow-sidebar);
  z-index: 90;
}

[data-theme="light"] .sidebar {
  background: #e8f0e8;
  border-right: 1px solid rgba(0,0,0,.12);
  box-shadow: 4px 0 16px rgba(0,0,0,.08);
}

[data-theme="light"] .sb-box {
  background: #ffffff;
  border-color: rgba(0,0,0,.12);
}

[data-theme="light"] .sb-hd {
  background: #f0f5f0;
  color: #1a6b1a;
}

[data-theme="light"] .sb-item {
  color: #3a5a3a;
}

[data-theme="light"] .sb-item:hover {
  background: #dceadc;
  color: #1a2a1a;
}

[data-theme="light"] .sb-item.active {
  background: linear-gradient(90deg, rgba(26,107,26,.10), transparent);
  border-left-color: #1a6b1a;
  color: #1a6b1a;
}

[data-theme="light"] .time-main {
  color: #1a2a1a;
}

[data-theme="light"] .time-date {
  color: #3a5a3a;
}

.main {
  flex: 1;
  overflow-y: auto;
  height: 100vh;
}

/* ── Custom scrollbars — global, theme-aware (DAY 67) ── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:2px; }
::-webkit-scrollbar-thumb:hover { background:var(--accent); }
::-webkit-scrollbar-corner { background:transparent; }

/* Firefox */
* { scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR ENGINE — DAY 72
   Collapsed/expanded desktop state + mobile drawer
   ═══════════════════════════════════════════════════════════════ */

/* ── Z-index register ── */
/* header         : 100  (tf-header)          */
/* sidebar mobile : 200  (inside media query) */
/* overlay mobile : 190                       */
/* detail panel   : 300  (detail-panel)       */

/* ── Desktop sidebar base ── */
.sidebar {
  transition: width 0.15s ease, flex 0.15s ease;
  position: relative;
  overflow: hidden;
}

/* ── Expanded (default, body.sb-expanded) ── */
body.sb-expanded .sidebar {
  /* width stays as set by CSS or resize */
}

/* ── Collapsed: icons-only ── */
body.sb-collapsed .sidebar {
  width: 48px !important;
  flex: 0 0 48px !important;
  overflow: hidden;
}

/* In collapsed: remove horizontal margins from boxes so icons center in 48px */
body.sb-collapsed .sidebar .sidebar-box {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* In collapsed: hide text, meta, items body */
body.sb-collapsed .sidebar-header .sb-section-title,
body.sb-collapsed .sidebar-box .sidebar-item,
body.sb-collapsed .sidebar-box .sidebar-header + *,
body.sb-collapsed .tl-search-wrap,
body.sb-collapsed .tl-all-btn,
body.sb-collapsed .tl-region,
body.sb-collapsed .sb-collapse-label {
  display: none !important;
}

/* In collapsed: show only the icon row in each header */
body.sb-collapsed .sidebar-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  cursor: pointer;
  position: relative;
}

body.sb-collapsed .sidebar-header:hover {
  background: var(--bg-hover);
}

/* Collapse button in collapsed mode: center the icon */
body.sb-collapsed .sb-collapse-btn {
  justify-content: center;
}

/* ── Tooltip in collapsed: only on hover ── */
body.sb-collapsed .sidebar-header:hover .sb-tooltip {
  display: block;
}

/* ── Mobile overlay ── */
.tf-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 190;
}

/* ── Mobile breakpoint ── */
@media (max-width: 900px) {
  /* Sidebar: hidden off-screen left, slides in as drawer */
  .sidebar {
    position: fixed !important;
    left: 0;
    top: 0;
    bottom: 0;
    width: 270px !important;
    flex: none !important;
    z-index: 200;
    transform: translateX(-100%);
    transition: none;
    overflow-y: auto;
  }

  body.sb-drawer-open .sidebar {
    transform: translateX(0);
  }

  /* Reset collapsed state on mobile — not applicable */
  body.sb-collapsed .sidebar {
    width: 270px !important;
    flex: none !important;
    overflow-y: auto;
  }

  /* Re-show all content in drawer even if desktop was collapsed */
  body.sb-collapsed .sidebar-header .sb-section-title,
  body.sb-collapsed .sidebar-box .sidebar-item,
  body.sb-collapsed .sidebar-box .sidebar-header + *,
  body.sb-collapsed .tl-search-wrap,
  body.sb-collapsed .tl-all-btn,
  body.sb-collapsed .tl-region,
  body.sb-collapsed .sb-collapse-label {
    display: revert !important;
  }

  body.sb-collapsed .sidebar-header {
    justify-content: flex-start;
    padding: 5px 8px;
    cursor: default;
  }

  /* Hide resize handle on mobile */
  .sidebar-resize-handle {
    display: none !important;
  }

  /* Collapse button hidden on mobile */
  .sb-collapse-btn {
    display: none !important;
  }
}
/* Popular Leagues — disabled state for incompatible views */
.league-item-disabled {
  opacity: 0.35;
  cursor: not-allowed !important;
  pointer-events: auto !important;
}