/* ========================================
   Curupira Sports — Professional Theme
   ======================================== */

:root{
  --ink:#0a1e3f;
  --sub:#5c6f8f;
  --bg:#f2f5fa;
  --bg-grad:linear-gradient(180deg,#f7f9fd 0%,#eef2f9 100%);
  --card:#ffffff;
  --card-solid:#ffffff;
  --brand:#1a3a6e;
  --accent:#3b8f4a;
  --pill:#e6ecf6;
  --line:#c5d3ea;
  --line-soft:#dfe7f4;
  --line-strong:#2b5296;
  --shadow:0 1px 8px rgba(0,20,60,.05);
  --sidebar:#0f172a;
  --sidebar-d:#0f172a;
  --link:#ffffff;
  --linkhover:rgba(255,255,255,.07);
  --radius:10px;
}

[data-theme="dark"]{
  --ink:#dce6f8;
  --sub:#7a90b8;
  --bg:#060d1c;
  --bg-grad:linear-gradient(180deg,#0a1428 0%,#060d1c 100%);
  --card:#0c1830;
  --card-solid:#0c1830;
  --brand:#a8c0ea;
  --pill:#12253e;
  --line:#1c3050;
  --line-soft:#162844;
  --line-strong:#5080c0;
  --shadow:0 2px 12px rgba(0,0,0,.25);
  --sidebar:#0f172a;
  --sidebar-d:#0f172a;
  --link:#e8f0ff;
  --linkhover:rgba(255,255,255,.07);
}

*{box-sizing:border-box;margin:0;padding:0}
html{height:100%;-webkit-text-size-adjust:100%}
body{
  height:100%;
  background:var(--bg-grad);
  background-color:var(--bg);
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* ====== LAYOUT ====== */
.layout{display:grid;grid-template-columns:290px 1fr;min-height:100vh}

/* ====== SIDEBAR ====== */
.sidebar{
  background:var(--sidebar);
  padding:0;
  min-height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  position:sticky;
  top:0;
  height:100vh;
  border-right:1px solid rgba(255,255,255,.04);
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.1) transparent;
}
.sidebar::-webkit-scrollbar{width:4px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:4px}

.sidebar-brand{
  padding:22px 20px 8px;
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
}
.sidebar-brand img{
  width:80px;height:80px;
  border-radius:12px;
  object-fit:contain;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
.sidebar-brand-info{display:flex;flex-direction:column}
.sidebar-brand-text{color:#fff;font-size:17px;font-weight:700;letter-spacing:.3px;line-height:1.2}
.sidebar-brand-sub{color:rgba(255,255,255,.45);font-size:12px;font-weight:500;margin-top:3px}

/* ====== SIDEBAR CALENDAR ====== */
.sb-cal{
  padding:18px 18px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.sb-cal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.sb-cal-title{
  color:#fff;
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  cursor:default;
}
.sb-cal-nav{display:flex;gap:6px}
.sb-cal-nav a{
  color:rgba(255,255,255,.5);
  text-decoration:none;
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  border-radius:6px;
  font-size:18px;font-weight:700;
  transition:all .15s;
}
.sb-cal-nav a:hover{color:#fff;background:rgba(255,255,255,.08)}

.sb-cal-dow{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  margin-bottom:6px;
}
.sb-cal-dow span{
  text-align:center;
  font-size:12px;
  font-weight:600;
  color:rgba(255,255,255,.35);
  padding:4px 0;
}

.sb-cal-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:3px;
}
.sb-cal-empty{height:34px}
.sb-cal-day{
  height:34px;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;
  color:rgba(255,255,255,.55);
  border-radius:50%;
  text-decoration:none;
  transition:all .15s;
}
.sb-cal-day:hover{color:#fff;background:rgba(255,255,255,.08)}
.sb-cal-day.today{
  background:var(--accent);
  color:#fff;
  font-weight:700;
}
.sb-cal-day.selected:not(.today){
  background:rgba(255,255,255,.14);
  color:#fff;
  font-weight:700;
}
.sb-cal-day.today.selected{
  background:var(--accent);
  color:#fff;
  box-shadow:0 0 0 2px rgba(59,143,74,.35);
}

/* ====== SIDEBAR MENU ====== */
.menu{
  display:flex;
  flex-direction:column;
  padding:8px 12px;
  gap:2px;
}

.menu-section{
  font-size:11px;
  font-weight:700;
  color:rgba(255,255,255,.25);
  text-transform:uppercase;
  letter-spacing:.1em;
  padding:18px 14px 8px;
}

.menu-item{
  display:flex;
  align-items:center;
  gap:12px;
  color:rgba(255,255,255,.65);
  text-decoration:none;
  padding:11px 14px;
  border-radius:8px;
  font-size:15px;
  font-weight:600;
  transition:all .15s;
  cursor:pointer;
  position:relative;
  user-select:none;
}
.menu-item:hover{color:#fff;background:rgba(255,255,255,.06)}
.menu-item.active{color:#fff;background:rgba(255,255,255,.1)}

.menu-item .mi-icon{
  width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  flex:0 0 22px;
  opacity:.65;
}
.menu-item.active .mi-icon,
.menu-item:hover .mi-icon{opacity:1}
.menu-item .mi-icon svg{width:20px;height:20px}

.menu-item .mi-text{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-item a.mi-text{color:inherit;text-decoration:none}

.menu-item .mi-chevron{
  font-size:14px;
  color:rgba(255,255,255,.3);
  transition:transform .2s;
  margin-left:auto;
  flex:0 0 auto;
}
.menu-item.expanded .mi-chevron{transform:rotate(90deg)}

/* ====== EXPANDABLE SUB MENUS ====== */
.menu-sub{
  display:none;
  flex-direction:column;
  padding:0 0 4px;
  gap:0;
}
.menu-sub.open{display:flex}

.menu-sub .sub-group{margin:0}
.menu-sub .sub-group-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 14px 8px 48px;
  color:rgba(255,255,255,.5);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  border-radius:6px;
  transition:all .15s;
}
.menu-sub .sub-group-head:hover{color:rgba(255,255,255,.85);background:rgba(255,255,255,.04)}
.menu-sub .sub-group-head .sg-caret{
  font-size:10px;
  color:rgba(255,255,255,.25);
  transition:transform .2s;
}
.menu-sub .sub-group.open .sg-caret{transform:rotate(90deg)}

.menu-sub .sub-items{display:none;padding:2px 0}
.menu-sub .sub-group.open .sub-items{display:block}

.menu-sub .subitem{
  display:block;
  color:rgba(255,255,255,.5);
  text-decoration:none;
  padding:7px 14px 7px 58px;
  font-size:14px;
  font-weight:500;
  border-radius:6px;
  transition:all .15s;
}
.menu-sub .subitem:hover{color:rgba(255,255,255,.85);background:rgba(255,255,255,.04)}
.menu-sub .subitem.active{color:#fff;background:rgba(255,255,255,.09);font-weight:600}

/* ====== MOBILE HEADER ====== */
.mobile-header{
  display:none;
  position:fixed;top:0;left:0;right:0;
  height:56px;
  background:var(--sidebar);
  z-index:100;
  align-items:center;
  padding:0 14px;
  gap:12px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.hamburger{
  width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:#fff;
  cursor:pointer;border-radius:8px;
  transition:background .15s;
}
.hamburger:hover{background:rgba(255,255,255,.08)}
.hamburger svg{width:24px;height:24px}
.mobile-title{color:#fff;font-size:16px;font-weight:700;letter-spacing:.2px}

.sidebar-overlay{
  display:none;
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.55);
  z-index:199;
  opacity:0;
  transition:opacity .25s;
}
.sidebar-overlay.show{display:block;opacity:1}

.sidebar-close{
  display:none;
  position:absolute;top:14px;right:14px;
  width:34px;height:34px;
  background:rgba(255,255,255,.08);
  border:none;color:rgba(255,255,255,.6);
  border-radius:8px;cursor:pointer;
  align-items:center;justify-content:center;
  font-size:20px;
  transition:all .15s;
}
.sidebar-close:hover{background:rgba(255,255,255,.14);color:#fff}

/* ====== CONTENT — full width, centered header ====== */
.content{
  padding:28px 32px 48px;
  position:relative;
  width:100%;
}

h1{
  font-size:32px;
  line-height:1.2;
  margin:0 0 16px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--ink);
  text-align:center;
}
[data-theme="dark"] h1{color:#eaf0ff}

.meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center;margin-bottom:16px}
.pill{
  background:var(--pill);
  color:var(--brand);
  padding:5px 12px;
  border-radius:6px;
  font-weight:600;
  font-size:14px;
  border:1px solid var(--line-soft);
}

.daynav{display:flex;gap:8px;align-items:center;justify-content:center;margin:0 0 20px;flex-wrap:wrap}
.btn{
  background:var(--card-solid);
  border:1px solid var(--line);
  padding:8px 16px;
  border-radius:8px;
  color:var(--brand);
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  transition:all .15s;
  cursor:pointer;
  white-space:nowrap;
}
.btn:hover{
  border-color:var(--line-strong);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.btn.subtle{background:var(--pill);border-color:var(--line-soft)}
.jump{display:flex;gap:6px;align-items:center}
.jump input[type=date]{
  border:1px solid var(--line);
  background:var(--card-solid);
  color:var(--ink);
  border-radius:8px;
  padding:8px 12px;
  font-weight:600;
  font-size:14px;
}

.notice{
  background:#fff8eb;
  color:#7a5200;
  border:1px solid #f0d890;
  padding:10px 16px;
  border-radius:8px;
  margin:12px 0;
  text-align:center;
  font-size:16px;
  font-weight:500;
}
[data-theme="dark"] .notice{
  background:#1e1a0f;
  color:#d4a84a;
  border-color:#3d3018;
}

/* ====== STANDINGS ====== */
.standings-wrap{
  background:var(--card);
  border-radius:var(--radius);
  border:1px solid var(--line-soft);
  box-shadow:var(--shadow);
  padding:16px;
  margin:0 0 16px;
}
.standings-title{font-weight:800;color:var(--brand);text-align:center;margin:0 0 6px;font-size:22px}
.standings-sub{text-align:center;color:var(--sub);font-size:12px;margin-bottom:10px;font-weight:600}
.standings-table{width:100%;border-collapse:collapse;font-size:15px}
.standings-table th,.standings-table td{border-top:1px solid var(--line-soft);padding:7px 6px;text-align:center}
.standings-table th{color:var(--sub);font-weight:700;font-size:12px}
.standings-table td.team{text-align:left;font-weight:600}
.stand-team{display:flex;align-items:center;gap:8px}

/* ====== WC CALENDAR — hidden (using sidebar calendar instead) ====== */
.wc-calendar{display:none}

/* ====== SECTIONS / CARDS — full width ====== */
section{
  background:var(--card);
  border-radius:var(--radius);
  padding:0;
  margin:16px 0;
  border:1px solid var(--line-soft);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.section-title{
  font-weight:700;
  color:var(--brand);
  padding:16px 24px;
  font-size:20px;
  letter-spacing:.01em;
  border-bottom:1px solid var(--line-soft);
  background:var(--pill);
}

.game{
  display:grid;
  grid-template-columns:100px 1fr;
  gap:16px;
  align-items:center;
  padding:14px 24px;
  border-top:1px solid var(--line-soft);
}
.game:first-of-type{border-top:0}

.time{font-weight:800;font-size:28px;letter-spacing:-.01em;color:var(--ink)}
[data-theme="dark"] .time{color:#edf3ff}
.tiny{font-size:13px;color:var(--sub);font-weight:500;margin-top:2px}

.versus{display:flex;flex-direction:column;gap:6px}
.versus-main{
  display:grid;
  grid-template-columns:1fr 120px 1fr;
  gap:10px;
  align-items:center;
}
.match-stage{
  text-align:center;
  font-size:14px;
  font-weight:600;
  color:var(--sub);
  line-height:1.2;
  margin-bottom:2px;
}
.side{display:flex;align-items:center;gap:10px;min-width:0;width:100%}
.side.home{justify-content:flex-end}
.side.away{justify-content:flex-start}
.team{
  font-weight:600;
  font-size:18px;
  color:var(--ink);
  line-height:1.2;
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.side.home .team{text-align:right}
.side.away .team{text-align:left}

.scorebox{
  display:flex;
  flex-direction:column;
  gap:2px;
  align-items:center;
  justify-content:center;
  width:120px;
}
.scoreval{font-weight:800;font-size:28px;color:var(--ink);letter-spacing:-.02em;min-width:60px;text-align:center;display:inline-block}
.scoremeta{font-size:10px;font-weight:700;color:var(--sub);letter-spacing:.05em;text-transform:uppercase}
.scoremeta.sub{font-size:10px;letter-spacing:0;text-transform:none}

.league{color:var(--sub);font-size:15px;display:flex;align-items:center;gap:8px;max-width:100%;overflow:hidden;white-space:nowrap}
.badge{
  background:var(--pill);
  color:var(--brand);
  padding:5px 10px;
  border-radius:4px;
  font-weight:600;
  font-size:14px;
  border:1px solid var(--line-soft);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.country{flex:0 0 auto;white-space:nowrap}

.crest{
  width:52px;height:52px;
  border-radius:50%;
  background:var(--pill);
  display:flex;align-items:center;justify-content:center;
  flex:0 0 52px;
  border:1px solid var(--line-soft);
  overflow:hidden;
}
.crest img{width:100%;height:100%;object-fit:contain}
.crest .fallback{font-size:15px;font-weight:700;color:var(--brand)}

.live{
  background:#e8f5e9;
  color:#2e7d32;
  border:1px solid #a5d6a7;
  padding:3px 8px;
  border-radius:4px;
  font-size:11px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
}
.live.end{background:#f5f5f5;color:#757575;border-color:#e0e0e0}
[data-theme="dark"] .live{background:#1b3a1f;color:#66bb6a;border-color:#2e5e33}
[data-theme="dark"] .live.end{background:#1a1a1e;color:#aaa;border-color:#333}

.theme-toggle{
  position:fixed;right:18px;top:16px;z-index:20;
}
.theme-toggle button{
  background:var(--card-solid);
  border:1px solid var(--line);
  color:var(--brand);
  padding:7px 14px;
  border-radius:6px;
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  transition:all .15s;
}
.theme-toggle button:hover{border-color:var(--line-strong)}

/* ====== HOME ====== */
.content.home-wrap{max-width:none;margin:0;padding:0;position:relative}
.home-hero{
  min-height:100vh;
  background:
    radial-gradient(800px 300px at 20% 0%,rgba(255,255,255,.3),transparent),
    url('/static/home-hero.png') center center / contain no-repeat;
  display:flex;align-items:center;justify-content:center;
}
[data-theme="dark"] .home-hero{
  background:
    radial-gradient(800px 300px at 20% 0%,rgba(255,255,255,.05),transparent),
    url('/static/home-hero.png') center center / contain no-repeat;
}

/* ====== RESPONSIVE ====== */
@media(max-width:1100px){
  .layout{grid-template-columns:270px 1fr}
  .game{grid-template-columns:76px 1fr;padding:12px 18px}
  .time{font-size:22px}
  .team{font-size:15px}
  .scoreval{font-size:22px}
  .versus-main{grid-template-columns:1fr 100px 1fr}
}

@media(max-width:768px){
  .layout{grid-template-columns:1fr}

  .mobile-header{display:flex}

  .sidebar{
    position:fixed;
    left:-300px;
    top:0;bottom:0;
    width:290px;
    z-index:200;
    transition:left .3s cubic-bezier(.4,0,.2,1);
    height:100%;
    min-height:auto;
  }
  .sidebar.open{left:0}
  .sidebar-close{display:flex}

  .content{padding:66px 14px 36px}

  .theme-toggle{top:12px;right:12px}
  .theme-toggle button{font-size:12px;padding:6px 10px}

  h1{font-size:24px;margin-bottom:10px}
  .meta{gap:4px}
  .pill{font-size:11px;padding:4px 8px}
  .daynav{gap:5px}
  .btn{font-size:13px;padding:6px 12px}

  .section-title{font-size:14px;padding:12px 14px}
  .game{grid-template-columns:60px 1fr;gap:10px;padding:10px 14px}
  .time{font-size:18px}

  .versus-main{
    grid-template-columns:1fr 70px 1fr;
    gap:6px;
  }
  .team{font-size:13px}
  .scoreval{font-size:18px}
  .scorebox{width:70px}

  .crest{width:40px;height:40px;flex:0 0 40px}
  .crest .fallback{font-size:12px}

  .standings-table{font-size:11px}
  .standings-table th,.standings-table td{padding:5px 4px}
}

@media(max-width:400px){
  .versus-main{
    grid-template-columns:1fr;
    gap:6px;
  }
  .side{justify-content:center !important}
  .side.home .team,.side.away .team{text-align:center}
  .scorebox{width:auto;margin:2px 0}
  .game{grid-template-columns:1fr;text-align:center}
  .time{font-size:16px}
  .daynav{justify-content:center}
  .meta{justify-content:center}
}