/* Base Sidebar Styling */
:root {
  --sidebar-width: 250px;
  --header-height: 60px;
  --bg-color: #f4f7f6;
  --text-color: #333;
  --hover-bg: #e2e8f0;
  --active-bg: #cbd5e1;
  --brand-color: #0056b3;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg-color);
}

/* The Mobile Header (Hidden on Desktop) */
/* The Mobile Header (Hidden on Desktop) */
.mobile-header {
  display: none;
}

@media (max-width: 768px) {
  .mobile-header {
    display: grid;
    /* Equal side columns keep the logo dead-center regardless of whether
       the LIVE pill is present on the right (rest days have no pill). */
    grid-template-columns: 1fr auto 1fr;
    background-color: white;
    height: var(--header-height);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    align-items: center;
    padding: 0 15px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    width: 100%;
    box-sizing: border-box;
  }

  .mobile-logo-link {
    text-align: center;
    display: flex;
    justify-content: center;
  }

  .mobile-header .hamburger {
    justify-self: start;
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--brand-color);
  }

  .mobile-header .mobile-logo {
    height: 40px;
    max-width: 120px; /* Prevent logo from pushing other elements out */
    object-fit: contain;
  }

  .mobile-live-link {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 5px;
    /* Match the tile live badge (.match-card .live-badge): pink field, red
       text + dot, and the same opacity pulse — so the top pill and the
       in-overlay tiles look and behave identically. Sizes unchanged. */
    background: #fee2e2;
    color: #ef4444;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: none;
    border: none;
    box-shadow: none;
    animation: pulse 2s infinite;
    position: relative;
    z-index: 3000;
    pointer-events: auto !important;
  }

  /* The whole pill already pulses (above), so the dot rides that fade rather
     than running its own faster blink — exactly like the tile badge, where
     the "●" pulses together with the label. */
  .mobile-live-link .live-dot {
    animation: none;
  }

  /* No live match right now — same pill, muted, links to the next-24h
     games in the overlay. Kept visible so the logo stays centered. */
  .mobile-live-link--idle {
    background: #e5e7eb;
    color: #4b5563;
    box-shadow: none;
    /* No match on right now — stay calm, don't pulse. */
    animation: none;
  }

  .mobile-live-link--idle .live-dot {
    background-color: #9ca3af;
    color: #9ca3af;
    animation: none;
  }
}

.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background-color: currentColor;
  border-radius: 50%;
  flex-shrink: 0;
  animation: blink 1.5s infinite;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}

/* The Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh; /* Fallback */
  height: 100dvh; /* Use dynamic viewport height for mobile browsers */
  background-color: white;
  box-shadow: 2px 0 5px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  /* Must beat the mobile header (z-index 2000) and the overlay (2500)
     so it covers the burger / FIFA logo / LIVE pill while open. */
  z-index: 2600;
  overflow-y: auto;
  overflow-x: hidden;
}

/* The slide is only enabled once the page has settled (.anim added by JS).
   Keeping it off on load / bfcache restore means the sidebar never animates
   into view when navigating Back — it's simply already collapsed. */
.sidebar.anim {
  transition: transform 0.3s ease-in-out;
}

.sidebar-header {
  padding: 15px;
  text-align: center;
  border-bottom: 1px solid #eee;
  flex-shrink: 0; /* Don't squash the header */
}

.sidebar-header img {
  max-width: 80px;
  margin-bottom: 5px;
}

/* Match the login header exactly: wordmark 22px/800, tournament line 15px/500.
   Only the colour differs (white here for the dark sidebar). */
.sidebar-wordmark {
  font-weight: 800;
  font-size: var(--fs-heading);
  color: #fff;
  margin: 2px 0 1px;
}

.sidebar-header h2 {
  font-size: 15px;
  font-weight: 500;
  margin: 0;
  color: var(--brand-color);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Instance Switcher in Sidebar */
.sidebar-context {
  padding: 10px 15px;
  background-color: var(--bg-color);
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}

.sidebar-context span {
  display: block;
  font-size: var(--fs-label);
  color: #666;
  margin-bottom: 5px;
}

/* Sidebar context select styling lives in modern_base.css so the colors
   work with the dark navy sidebar — keep this file from re-introducing
   the legacy "white box on dark bg" look. */

/* Navigation Links */
.sidebar-nav {
  flex-grow: 1;
  padding: 10px 0;
}

.sidebar-nav a {
  display: block;
  padding: 12px 20px;
  color: var(--text-color);
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.2s;
}

.sidebar-nav a:hover {
  background-color: var(--hover-bg);
}

.sidebar-nav a.active {
  background-color: var(--active-bg);
  color: var(--brand-color);
  border-left: 4px solid var(--brand-color);
}

/* User Section at Bottom */
.sidebar-footer {
  padding: 10px 0;
  border-top: 1px solid #eee;
  flex-shrink: 0;
}

.sidebar-footer a {
  display: block;
  padding: 12px 20px;
  color: var(--text-color);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--fs-ui);
}

.sidebar-footer a:hover {
  background-color: var(--hover-bg);
}

.sidebar-meta-link {
  font-size: var(--fs-xs) !important;
  color: #aaa !important;
  padding: 4px 20px !important;
}

/* Donate: a small "🍺 Beer" link centered at the bottom of the footer.
   Uses the same --text-color as the nav and other footer links so every
   item reads at one consistent brightness; just smaller and centered, with
   a gentle lift on hover. text-align/centering and the small size override
   the mobile `.sidebar-footer a` rule, which left-aligns links and bumps
   them to --fs-ui. */
.sidebar-donate {
  display: block;
  text-align: center;
  padding: 10px 20px;
  font-size: var(--fs-meta) !important;
  color: var(--text-color);
  text-decoration: none;
  transition: transform 0.15s ease;
}

.sidebar-donate:hover {
  transform: scale(1.15);
  background-color: transparent;
}

/* Main Content Area */
.main-wrapper {
  margin-left: var(--sidebar-width);
  padding: 20px;
  transition: margin-left 0.3s ease-in-out;
}

/* Mobile Overlay (Darken background when sidebar open) */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  /* Must sit above the mobile header (z-index 2000) so the dim layer
     covers it, but under the sidebar itself. */
  z-index: 2500;
}

/* When the sidebar is open, hide the mobile header completely.
   The sidebar already has its own brand and the user is in
   navigation mode — the hamburger / FIFA logo / LIVE pill would
   only add clutter and compete for taps in the dim area. */
@media (max-width: 768px) {
  body:has(.sidebar.open) .mobile-header {
    display: none;
  }
}

/* Mobile Specific Styles */
@media (max-width: 768px) {
  .mobile-header {
    display: grid;
  }

  .sidebar {
    transform: translateX(-100%);
  }
  
  .sidebar.open {
    transform: translateX(0);
  }
  
  .sidebar-overlay.open {
    display: block;
  }
  
  .sidebar-nav a,
  .sidebar-footer a {
    padding: 15px 20px;
    font-size: var(--fs-ui);
  }

  .sidebar-context select {
    font-size: var(--fs-ui); /* 16px — prevents iOS auto-zoom on focus */
    padding: 10px;
  }

  .sidebar-header h2 {
    font-size: 15px; /* match the login header's tournament line (15px/500) */
  }

  .main-wrapper {
    margin-left: 0;
    padding: 10px;
    padding-top: calc(var(--header-height) + 10px);
  }
}