/* === Color theme: "Fairway & Sky" ===
   One cohesive palette instead of stock Bootstrap blue/green/red/yellow,
   same semantic roles as before (primary=Open Division, success=Mixed
   Division, danger=alerts/live, warning=pending, secondary=neutral/
   friendly, dark=navbar), just intentionally-chosen colors that relate to
   each other instead of generic framework defaults. Overriding Bootstrap's
   own CSS variables means every button, background, text, and border
   utility class across the whole site picks this up automatically - no
   template needs to change which class it uses, just what that class
   renders as. */
:root {
  --bs-primary:            #2E6F9E;
  --bs-primary-rgb:        46, 111, 158;
  --bs-secondary:          #707A72;
  --bs-secondary-rgb:      112, 122, 114;
  --bs-success:            #2F7A40;
  --bs-success-rgb:        47, 122, 64;
  --bs-info:               #3E8FB0;
  --bs-info-rgb:           62, 143, 176;
  --bs-warning:            #D99A2B;
  --bs-warning-rgb:        217, 154, 43;
  --bs-danger:             #C0392B;
  --bs-danger-rgb:         192, 57, 43;
  --bs-dark:               #16232B;
  --bs-dark-rgb:           22, 35, 43;
  --bs-light:              #F3F5F3;
  --bs-light-rgb:          243, 245, 243;
  --bs-body-bg:            #F3F5F3;
  --bs-link-color:         #2E6F9E;
  --bs-link-color-rgb:     46, 111, 158;
  --bs-link-hover-color:   #24597E;
  --bs-link-hover-color-rgb: 36, 89, 126;
}

/* Bootstrap's compiled CSS bakes a few hover/focus shades in directly
   rather than deriving them from the variables above at runtime (no Sass
   build step here) - patched by hand so hover states stay in-palette. */
.btn-primary:hover, .btn-primary:focus { background-color: #24597E; border-color: #24597E; }
.btn-success:hover, .btn-success:focus { background-color: #245F32; border-color: #245F32; }
.btn-danger:hover,  .btn-danger:focus  { background-color: #9C2E23; border-color: #9C2E23; }
.btn-warning:hover, .btn-warning:focus { background-color: #C08A26; border-color: #C08A26; }
.btn-info:hover,    .btn-info:focus    { background-color: #35798F; border-color: #35798F; }

/* -- General -- */
body {
  background: var(--bs-body-bg);
  font-family: 'Segoe UI', system-ui, sans-serif;
}

.container-fluid {
  max-width: 1400px;
}

/* -- Navbar -- */
.navbar-brand {
  letter-spacing: 0.5px;
}

/* Desktop-only polish (matches navbar-expand-lg's own breakpoint) - the
   collapsed mobile menu below 992px is left exactly as Bootstrap renders
   it, since that one's already fine stacked/expanded full-width. Above
   992px the row was cramped enough (11 items) that icon+label wrapped
   onto two lines per item; consolidating into fewer top-level items
   (see base.html) plus this spacing/no-wrap pass fixes that. */
@media (min-width: 992px) {
  .navbar-nav {
    gap: 2px;
  }
  .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: .5rem .75rem;
    border-radius: 6px;
    transition: background-color .15s;
  }
  .navbar-nav .nav-link:hover {
    background: rgba(255,255,255,.08);
  }
  .navbar-nav .dropdown-menu {
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.15);
    border: none;
    padding: 6px;
  }
  .navbar-nav .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 5px;
    padding: .4rem .65rem;
  }
  .navbar-nav .dropdown-item:hover {
    background: var(--bs-light);
  }
  .navbar-nav .dropdown-item.active {
    background: var(--bs-primary);
    color: #fff;
  }
}

.nav-link.active {
  background: rgba(255,255,255,.16);
  border-radius: 6px;
  font-weight: 600;
}

/* -- Cards -- */
.card {
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  border-radius: 8px;
}

.card-header {
  font-size: .95rem;
}

/* -- Dashboard stat boxes -- */
.stat-box {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 10px 6px;
}

.stat-num {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
}

.stat-lbl {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: #6c757d;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* -- Match cards (knockout) -- */
.match-card {
  transition: box-shadow .15s;
}

.match-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

/* -- Score input -- */
.score-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb),.15);
}

/* -- Player badges -- */
.player-badge {
  font-size: .8rem;
  padding: .35em .65em;
}

/* -- Tables -- */
.table th {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #495057;
}

/* -- Round Robin result colours -- */
.result-win   { color: var(--bs-success); font-weight: 600; }
.result-draw  { color: var(--bs-warning); font-weight: 600; }
.result-loss  { color: var(--bs-danger); }

/* -- Standings position badges -- */
.pos-1 { background: #ffc107; color: #000; }
.pos-2 { background: #adb5bd; color: #fff; }
.pos-3 { background: #cd7f32; color: #fff; }

/* -- Print -- */
@media print {
  .navbar, .btn, .alert-dismissible .btn-close,
  button, .no-print { display: none !important; }
  body { background: white; }
  .card { box-shadow: none; border: 1px solid #ccc; }
  .d-print-block { display: block !important; }
}

/* -- Responsive tweaks -- */
@media (max-width: 576px) {
  .stat-num { font-size: 1.3rem; }
  h2 { font-size: 1.3rem; }
}

/* -- Bracket connector lines (visual) -- */
.bracket-col {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

/* -- Animations -- */
.fade-in {
  animation: fadeIn .3s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}