/* ─────────────────────────────────────────────────────────────────────────────
   IPL 2026 Playoff Predictor — styles.css
   Star Cricket–inspired palette. Light + Dark themes.
───────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Light theme — Star Cricket sky blue + white ────────────────────────── */
:root {
  --font:            -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bg:              #dff1fa;
  --surface:         #ffffff;
  --surface-raised:  #f0f9ff;
  --border:          #b3e0f5;
  --border-strong:   #6ec6ea;
  --text-primary:    #00344d;
  --text-secondary:  #005f8a;
  --text-hint:       #5aaac8;
  --gold:            #0094c6;
  --gold-light:      #d6f0fa;
  --gold-mid:        #6ec6ea;
  --green:           #006d2e;
  --green-light:     #d4edda;
  --green-mid:       #4caf7d;
  --amber:           #b85c00;
  --amber-light:     #fff4e6;
  --red:             #b91c1c;
  --red-light:       #fef2f2;
  --header-bg:       #0094c6;
  --header-text:     #ffffff;
  --card-header-bg:  linear-gradient(180deg, #ffffff 0%, #e8f4fb 100%);
  --shadow-card:     0 2px 10px rgba(0,100,160,0.14), 0 0 0 1px rgba(0,148,198,0.08);
  --r-sm:6px; --r-md:10px; --r-lg:14px;
  --toggle-bg:       #d6f0fa;
  --toggle-icon:     #005f8a;
}

/* ── Dark theme — deep teal Star Cricket ────────────────────────────────── */
html.dark {
  --bg:              #00111a;
  --surface:         #001f2e;
  --surface-raised:  #002e42;
  --border:          #004060;
  --border-strong:   #0077aa;
  --text-primary:    #d6f0fb;
  --text-secondary:  #6ec0e0;
  --text-hint:       #3a8aaa;
  --gold:            #33bbdd;
  --gold-light:      #001828;
  --gold-mid:        #006688;
  --green:           #2ecc71;
  --green-light:     #001f12;
  --green-mid:       #1a7a42;
  --amber:           #f59e0b;
  --amber-light:     #261804;
  --red:             #f87171;
  --red-light:       #2a0808;
  --header-bg:       #000d14;
  --header-text:     #ffffff;
  --card-header-bg:  #001825;
  --shadow-card:     0 2px 12px rgba(0,0,0,0.6);
  --toggle-bg:       #002030;
  --toggle-icon:     #33bbdd;
}

/* ── Browser dark fallback (before JS sets class) ────────────────────────── */
@media (prefers-color-scheme: dark) {
  html:not(.light) {
    --bg:#00111a; --surface:#001f2e; --surface-raised:#002e42;
    --border:#004060; --border-strong:#0077aa;
    --text-primary:#d6f0fb; --text-secondary:#6ec0e0; --text-hint:#3a8aaa;
    --gold:#33bbdd; --gold-light:#001828; --gold-mid:#006688;
    --green:#2ecc71; --green-light:#001f12; --green-mid:#1a7a42;
    --amber:#f59e0b; --amber-light:#261804;
    --red:#f87171; --red-light:#2a0808;
    --header-bg:#000d14; --card-header-bg:#001825;
    --shadow-card:0 2px 12px rgba(0,0,0,0.6);
    --toggle-bg:#002030; --toggle-icon:#33bbdd;
  }
}

html { font-size: 16px; }
body {
  font-family: var(--font);
  background:  var(--bg);
  color:       var(--text-primary);
  line-height: 1.5;
  min-height:  100vh;
  transition:  background 0.25s, color 0.25s;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.app-header {
  background:    var(--header-bg);
  padding:       0 16px;
  position:      sticky;
  top:           0;
  z-index:       100;
  box-shadow:    0 2px 10px rgba(0,0,0,0.35);
  border-bottom: 2px solid var(--gold);
}
.app-header__inner {
  max-width:       1200px;
  margin:          0 auto;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  height:          56px;
}
.app-header__title { display:flex; align-items:baseline; gap:10px; }
.app-header__title h1 {
  font-size:1.05rem; font-weight:700; color:var(--header-text); letter-spacing:0.01em;
}
.app-header__title .season {
  font-size:0.72rem; color:rgba(0,40,80,0.75); font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase;
}
html.dark .app-header__title .season {
  color:rgba(255,255,255,0.75);
}
@media (prefers-color-scheme: dark) {
  html:not(.light) .app-header__title .season { color:rgba(255,255,255,0.75); }
}
.app-header__right { display:flex; align-items:center; gap:10px; }
.app-header__status { font-size:0.72rem; color:rgba(255,255,255,0.55); }

/* Feedback button */
.feedback-btn {
  font-family:   var(--font);
  font-size:     0.72rem;
  font-weight:   600;
  padding:       5px 11px;
  border-radius: 20px;
  border:        1px solid rgba(255,255,255,0.35);
  color:         rgba(255,255,255,0.85);
  text-decoration: none;
  white-space:   nowrap;
  transition:    background 0.15s, border-color 0.15s;
  letter-spacing: 0.03em;
}
.feedback-btn:hover {
  background:    rgba(255,255,255,0.12);
  border-color:  rgba(255,255,255,0.6);
  color:         #ffffff;
}
@media (max-width: 480px) { .feedback-btn { display: none; } }

/* Theme toggle */
.theme-toggle {
  background:    var(--toggle-bg);
  border:        1px solid var(--border-strong);
  border-radius: 20px;
  padding:       5px 11px;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  gap:           5px;
  min-height:    30px;
  transition:    background 0.2s, border-color 0.2s;
  font-family:   var(--font);
}
.theme-toggle:hover { border-color:var(--gold); }
.theme-toggle .toggle-icon  { font-size:0.9rem; line-height:1; }
.theme-toggle .toggle-label {
  font-size:0.7rem; font-weight:600; color:var(--toggle-icon);
  letter-spacing:0.04em; text-transform:uppercase;
}

.status-dot {
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,0.25); margin-right:4px; vertical-align:middle;
}
.status-dot--live  { background:#2ecc71; animation:pulse 2s infinite; }
.status-dot--error { background:var(--red); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.main-content { max-width:1200px; margin:0 auto; padding:16px; }
.layout { display:flex; flex-direction:column; gap:16px; }
@media (min-width:900px) {
  .layout { flex-direction:row; align-items:flex-start; }
  .layout__matches   { flex:1; min-width:0; }
  .layout__standings { width:340px; flex-shrink:0; position:sticky; top:116px; }
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-top:    2px solid var(--gold);
  border-radius: var(--r-lg);
  overflow:      hidden;
  box-shadow:    var(--shadow-card);
  transition:    background 0.25s, border-color 0.25s;
}
/* Light mode silver sheen on cards */
html:not(.dark) .card {
  background: linear-gradient(160deg, #ffffff 0%, #f0f8ff 60%, #e6f4fc 100%);
}
.card__header {
  padding:12px 14px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:var(--card-header-bg); transition:background 0.25s;
}
/* Light mode silver header */
html:not(.dark) .card__header {
  background: linear-gradient(180deg, #f8fcff 0%, #e8f4fb 100%);
  border-bottom: 1px solid #c8e8f5;
}
.card__header h2 {
  font-size:0.82rem; font-weight:700; color:var(--text-primary);
  text-transform:uppercase; letter-spacing:0.06em;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  font-family:var(--font); font-size:0.78rem; padding:6px 12px;
  border-radius:var(--r-sm); border:1px solid var(--border-strong);
  background:var(--surface); color:var(--text-primary); cursor:pointer;
  min-height:32px; display:inline-flex; align-items:center;
  transition:background 0.12s, border-color 0.12s; white-space:nowrap;
}
.btn:hover  { background:var(--surface-raised); border-color:var(--gold); }
.btn:active { transform:scale(0.97); }
.btn--sm    { font-size:0.72rem; padding:4px 8px; min-height:26px; }
.btn--reset { color:var(--red); }
.btn--reset:hover { background:var(--red-light); border-color:var(--red); }

/* Completed toggle */
.completed-toggle {
  display:block; width:100%; padding:9px 14px; text-align:center;
  font-size:0.8rem; font-weight:600; color:var(--gold);
  background:var(--card-header-bg); border:none; border-bottom:1px solid var(--border);
  cursor:pointer; font-family:var(--font); letter-spacing:0.02em;
  transition:background 0.15s;
}
.completed-toggle:hover { background:var(--gold-light); }

/* ── Match items ─────────────────────────────────────────────────────────── */
.match-item {
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  border-bottom:1px solid var(--border); flex-wrap:wrap; transition:background 0.15s;
}
.match-item:last-child  { border-bottom:none; }
.match-item--completed  { background:var(--surface-raised); }
.match-item--nr         { border-left:3px solid var(--amber); padding-left:11px; }

.match-item__meta { display:flex; flex-direction:column; min-width:72px; }
.match-item__num   { font-size:0.68rem; color:var(--gold); font-weight:700; }
.match-item__date  { font-size:0.76rem; color:var(--text-secondary); }
.match-item__venue { font-size:0.68rem; color:var(--text-hint); margin-top:1px; }

.match-item__picks {
  display:flex; align-items:center; gap:6px;
  flex:1; min-width:200px; flex-wrap:wrap;
}

/* Pick buttons */
.pick-btn {
  font-family:var(--font); font-size:0.84rem; font-weight:700;
  padding:7px 16px; border-radius:var(--r-sm);
  border:1px solid var(--border-strong);
  border-bottom:3px solid var(--border-strong);
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface-raised) 100%);
  color:var(--text-primary); cursor:pointer;
  min-height:38px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.10);
  transition:background 0.1s, border-color 0.1s, color 0.1s, transform 0.08s, box-shadow 0.08s;
  white-space:nowrap; letter-spacing:0.02em;
  position:relative; top:0;
}
.pick-btn:hover {
  border-color:var(--gold);
  border-bottom-color:var(--gold);
  color:var(--gold);
  box-shadow: 0 3px 6px rgba(0,0,0,0.14);
  top:-1px;
}
.pick-btn:active {
  transform:scale(0.97);
  top:2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  border-bottom-width:1px;
}

.pick-btn--selected {
  background:linear-gradient(180deg, var(--green-light) 0%, #c8ebd4 100%);
  border-color:var(--green-mid);
  border-bottom-color:var(--green);
  color:var(--green);
  box-shadow: 0 2px 4px rgba(46,125,50,0.18);
}
.pick-btn--selected:hover {
  border-color:var(--green);
  border-bottom-color:var(--green);
  color:var(--green);
  box-shadow: 0 3px 6px rgba(46,125,50,0.25);
}

.pick-btn--nr {
  font-size:0.72rem; padding:7px 10px; color:var(--text-hint);
}
.pick-btn--nr-selected {
  background:linear-gradient(180deg, var(--amber-light) 0%, #ffe0b2 100%);
  border-color:var(--amber);
  border-bottom-color:var(--amber);
  color:var(--amber);
  box-shadow: 0 2px 4px rgba(184,92,0,0.18);
}

.pick-vs { font-size:0.72rem; color:var(--text-hint); flex-shrink:0; }
.pick-btn:disabled { cursor:default; opacity:0.45; pointer-events:none; }


/* ── Dark mode pick button contrast ─────────────────────────────────────── */
html.dark .pick-btn {
  background: linear-gradient(180deg, #005a80 0%, #004060 100%);
  border-color: #0088bb;
  border-bottom-color: #00aadd;
  color: #d6f0fb;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
html.dark .pick-btn:hover {
  background: linear-gradient(180deg, #006a96 0%, #004e72 100%);
  border-color: var(--gold);
  border-bottom-color: var(--gold);
  color: var(--gold);
}
@media (prefers-color-scheme: dark) {
  html:not(.light) .pick-btn {
    background: linear-gradient(180deg, #005a80 0%, #004060 100%);
    border-color: #0088bb;
    border-bottom-color: #00aadd;
    color: #d6f0fb;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  }
}
/* Badges */
.match-badge {
  font-size:0.68rem; padding:3px 8px; border-radius:20px;
  white-space:nowrap; font-weight:700; margin-left:auto; letter-spacing:0.03em;
}
.match-badge--result  { background:var(--green-light); color:var(--green);  border:1px solid var(--green-mid); }
.match-badge--nr      { background:var(--amber-light); color:var(--amber);  border:1px solid var(--amber); }
.match-badge--pick    { background:var(--green-light); color:var(--green);  border:1px solid var(--green-mid); }
.match-badge--nr-pick { background:var(--amber-light); color:var(--amber);  border:1px solid var(--amber); }

/* ── Standings ───────────────────────────────────────────────────────────── */
.standings-table { width:100%; border-collapse:collapse; font-size:0.82rem; }
.standings-table th {
  padding:7px 10px; text-align:left; font-weight:700; font-size:0.68rem;
  color:var(--gold); background:var(--card-header-bg); border-bottom:1px solid var(--border);
  white-space:nowrap; text-transform:uppercase; letter-spacing:0.06em; transition:background 0.25s;
}
.standings-table th.r, .standings-table td.r { text-align:right; }
.standings-table td {
  padding:7px 10px; border-bottom:1px solid var(--border);
  color:var(--text-primary); transition:background 0.15s;
}
.standings-table tr:last-child td  { border-bottom:none; }
.standings-table tr:hover td       { background:var(--surface-raised); }
.standings-table tr.qualify td     { background:var(--green-light); }
.standings-table tr.qualify:hover td { filter:brightness(0.97); }
.standings-table tr.qualify td:first-child { border-left:3px solid var(--green); padding-left:7px; }
.standings-table .team-name  { font-weight:600; }
.standings-table .team-code  { font-size:0.65rem; color:var(--gold); font-weight:700; letter-spacing:0.05em; }

.standings-legend {
  padding:8px 12px; font-size:0.68rem; color:var(--text-hint);
  display:flex; gap:12px; flex-wrap:wrap; border-top:1px solid var(--border);
  background:var(--card-header-bg); transition:background 0.25s;
}
.standings-legend span { display:flex; align-items:center; gap:5px; }
.legend-box { width:10px; height:10px; border-radius:2px; flex-shrink:0; }
.legend-box--qualify { background:var(--green-light); border:1px solid var(--green-mid); }

/* ── States ──────────────────────────────────────────────────────────────── */
.loading-state { padding:40px 20px; text-align:center; color:var(--text-hint); font-size:0.9rem; }
.empty-state   { padding:32px 20px; text-align:center; color:var(--text-hint); font-size:0.88rem; }

.error-state {
  padding:16px; margin:12px; background:var(--red-light);
  border:1px solid var(--red); border-radius:var(--r-md); color:var(--red); font-size:0.85rem; text-align:center;
}
.error-state button {
  margin-top:10px; font-family:var(--font); font-size:0.82rem; padding:6px 14px;
  border:1px solid var(--red); border-radius:var(--r-sm); background:transparent; color:var(--red); cursor:pointer;
}

.sync-bar {
  position:fixed; bottom:16px; right:16px; background:var(--header-bg); color:#fff;
  font-size:0.75rem; padding:7px 14px; border-radius:20px; border:1px solid var(--gold);
  opacity:0; transition:opacity 0.3s; pointer-events:none; z-index:200;
}
.sync-bar--visible { opacity:1; }
.sync-bar--error   { background:var(--red); border-color:var(--red); }

.completed-section--hidden { display:none; }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.pick-btn:focus-visible,
.btn:focus-visible,
.theme-toggle:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }

@media (max-width:480px) {
  .app-header__status { display:none; }
  .main-content { padding:10px; }
  .toggle-label { display:none; }
  .pick-btn { font-size:0.78rem; padding:7px 9px; }
}

/* ── Header hint bar ─────────────────────────────────────────────────────── */
.app-header__hint {
  font-size:      0.75rem;
  color:          rgba(255,255,255,0.75);
  padding:        5px 16px 8px;
  border-top:     1px solid rgba(255,255,255,0.12);
  letter-spacing: 0.01em;
  text-align:     center;
}
.hint-nr {
  display:        inline-block;
  background:     rgba(255,255,255,0.15);
  color:          #ffffff;
  border:         1px solid rgba(255,255,255,0.35);
  border-radius:  3px;
  padding:        0px 5px;
  font-size:      0.72rem;
  font-weight:    700;
  vertical-align: middle;
}
@media (max-width: 480px) {
  .app-header__hint { font-size: 0.7rem; padding: 4px 12px 7px; }
}

/* ── Table subtitle ─────────────────────────────────────────────────────── */
.table-subtitle { font-size:0.72rem; color:var(--gold); font-weight:600; letter-spacing:0.04em; }

/* ── Points column emphasis ──────────────────────────────────────────────── */
.pts-col { font-weight:700; }

/* ── Mobile floating points bar ──────────────────────────────────────────── */
/* Hidden on desktop, shown on mobile */
.mobile-pts-bar {
  display:         none;
}
@media (max-width: 899px) {
  .mobile-pts-bar {
    display:         flex;
    align-items:     center;
    gap:             8px;
    position:        fixed;
    bottom:          0;
    left:            0;
    right:           0;
    z-index:         150;
    background:      var(--header-bg);
    border-top:      2px solid var(--gold);
    padding:         8px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    cursor:          pointer;
    transition:      background 0.2s;
    /* Force GPU layer — prevents disappearing on mobile browser scroll */
    transform:       translateZ(0);
    -webkit-transform: translateZ(0);
    will-change:     transform;
  }
  .mobile-pts-bar:hover { background:var(--surface); }
  .mobile-pts-bar__label {
    font-size:    0.7rem;
    font-weight:  700;
    color:        rgba(255,255,255,0.9);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space:  nowrap;
    flex-shrink:  0;
  }
  .mobile-pts-bar__teams {
    display:      flex;
    gap:          5px;
    flex:         1;
    overflow-x:   auto;
    flex-wrap:    nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    min-width:    0;
  }
  .mobile-pts-bar__teams::-webkit-scrollbar { display: none; } /* Chrome/Safari */
  .pts-chip {
    font-size:     0.7rem;
    padding:       3px 7px;
    border-radius: 20px;
    background:    var(--surface);
    color:         var(--text-hint);
    white-space:   nowrap;
    border:        1px solid var(--border);
    flex-shrink:   0;
  }
  .pts-chip--qualify {
    background:   var(--green-light);
    color:        var(--green);
    border-color: var(--green-mid);
    font-weight:  700;
  }
  .pts-chip b { font-weight:700; }

  /* Push page content up so it doesn't sit behind the bar */
  .main-content { padding-bottom: 60px; }
}

/* ── Mobile full-screen table overlay ───────────────────────────────────── */
.mobile-table-overlay {
  display:    none;
}
@media (max-width: 899px) {
  .mobile-table-overlay {
    display:    block;
    position:   fixed;
    inset:      0;
    z-index:    200;
    background: rgba(0,0,0,0.5);
    opacity:    0;
    pointer-events: none;
    transition: opacity 0.2s;
  }
  .mobile-table-overlay.is-open {
    opacity:         1;
    pointer-events:  all;
  }
  .mobile-table-sheet {
    position:       absolute;
    bottom:         0;
    left:           0;
    right:          0;
    background:     var(--surface);
    border-top:     2px solid var(--gold);
    border-radius:  var(--r-lg) var(--r-lg) 0 0;
    max-height:     80vh;
    overflow-y:     auto;
    transform:      translateY(100%);
    transition:     transform 0.25s cubic-bezier(0.4,0,0.2,1);
  }
  .mobile-table-overlay.is-open .mobile-table-sheet {
    transform: translateY(0);
  }
  .mobile-table-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         12px 16px;
    font-weight:     700;
    font-size:       0.9rem;
    color:           var(--gold);
    border-bottom:   1px solid var(--border);
    position:        sticky;
    top:             0;
    background:      var(--surface);
    z-index:         1;
  }
  .mobile-table-header button {
    background:  transparent;
    border:      none;
    font-size:   1.1rem;
    cursor:      pointer;
    color:       var(--text-hint);
    padding:     4px 8px;
  }

  /* Hide the sidebar standings on mobile — use the overlay instead */
  .layout__standings { display: none; }
}