/* ═══════════════════════════════════════════════════════════════════════════
   SHARED TOP NAVIGATION — the single source of truth for the nav bar.
   ═══════════════════════════════════════════════════════════════════════════

   WHY THIS FILE EXISTS (owner-reported 2026-07-25)
   The "Winning Predictions" dropdown rendered WHITE on /analyse and DARK on /,
   because index.html, analyse.html, team_dashboard.html and league_dashboard.html
   are each standalone documents with their own <head> — and only some of them
   load iddaakolik-pro.css, which is where the navbar rules lived. Pages without
   it fell through to Bootstrap's default white dropdown.

   Bolting the whole 64KB pro.css onto the dashboards would have restyled far
   more than the nav, so the navbar rules are extracted here instead. Load THIS
   on every page that renders a navbar and the bar is identical everywhere.

   ── RULES FOR EDITING ──────────────────────────────────────────────────────
   * Change nav styling HERE, never in a page's inline <style>. A per-page
     override is exactly how the two versions drifted apart.
   * Every colour uses `var(--token, literal)`. Pages that also load
     iddaakolik-pro.css pick up the live theme tokens; standalone pages fall
     back to the literals, which are copied from pro.css :root. Keep the two
     in sync if the palette changes.
   * The bar is deliberately BLACK in light mode too — the logo asset is drawn
     white-on-dark, so a light bar washes it out (owner 2026-07-24).
   ═════════════════════════════════════════════════════════════════════════ */

.main-nav,
.navbar.bg-dark {
  background: var(--bg-secondary, #11151b) !important;
  border-bottom: 1px solid var(--border, #2d3748);
}

.navbar.bg-dark .nav-link,
.navbar.bg-dark .navbar-brand,
.navbar.bg-dark .dropdown-toggle {
  color: var(--text-secondary, #94a3b8) !important;
}

.navbar.bg-dark .nav-link:hover,
.navbar.bg-dark .nav-link:focus,
.navbar.bg-dark .navbar-brand:hover,
.navbar.bg-dark .dropdown-toggle:hover {
  color: var(--text-primary, #f1f5f9) !important;
}

.navbar.bg-dark .nav-link.pro-link      { color: var(--brand, #009C3B) !important; }
.navbar.bg-dark .nav-link.pro-link:hover { color: var(--brand-bright, #00C950) !important; }

/* Hamburger — needs to stay visible on both themes. */
.navbar.bg-dark .navbar-toggler { border-color: var(--border, #2d3748); }
.navbar.bg-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ── The dropdown: the bit that was white on /analyse ───────────────────── */
.navbar.bg-dark .dropdown-menu {
  background: var(--surface-elevated, #232936) !important;
  border: 1px solid var(--border, #2d3748) !important;
}

.navbar.bg-dark .dropdown-item {
  color: var(--text-secondary, #94a3b8) !important;
  /* One dropdown size on EVERY page (owner 2026-07-29): index pinned this
     locally at 12px while analyse fell back to Bootstrap's 16px default. */
  font-size: 12px;
  padding: 6px 10px;
}

.navbar.bg-dark .dropdown-item:hover,
.navbar.bg-dark .dropdown-item:focus {
  background: var(--surface-hover, #2a3142) !important;
  color: var(--text-primary, #f1f5f9) !important;
}

.navbar.bg-dark .dropdown-divider { border-top-color: var(--border, #2d3748); }

/* ── Light theme: bar stays black, logo un-filtered ─────────────────────── */
[data-theme="light"] .navbar.bg-dark {
  background: #000000 !important;
  border-bottom: 1px solid #2a2f37;
  box-shadow: none;
}
[data-theme="light"] .navbar.bg-dark .navbar-brand img { filter: none; }
[data-theme="light"] .navbar.bg-dark .nav-link,
[data-theme="light"] .navbar.bg-dark .navbar-brand,
[data-theme="light"] .navbar.bg-dark .dropdown-toggle { color: #c9ced6 !important; }
[data-theme="light"] .navbar.bg-dark .nav-link:hover,
[data-theme="light"] .navbar.bg-dark .nav-link:focus,
[data-theme="light"] .navbar.bg-dark .navbar-brand:hover { color: #ffffff !important; }

/* ── DELIBERATELY NO POSITION/LAYOUT RULES HERE ────────────────────────────
   This file owns COLOUR and the dropdown only. Positioning is page-specific
   and coupled to each page's own body padding: base/index/analyse use
   `position: sticky`, while team_dashboard and league_dashboard use
   `position: fixed` paired with `body { padding-top: 60px }`. Setting
   `position` here would out-specify `nav.navbar` (0,1,1) with `.navbar.bg-dark`
   (0,2,0) and silently open a 60px gap at the top of both dashboards.
   Keep layout in the page; keep the look here. */
