/* ===== Subscriber Console shell (light, professional) ===== */

:root {
  --console-bg:            #f4f6fb;
  --console-surface:         #ffffff;
  --console-surface-2:       #fcfbfd;
  --console-border:          #e4e7eb;
  --console-border-dark:     #d1d6dc;
  --console-text:            #1f2937;
  --console-text-muted:      #6b7280;
  --console-sidebar-bg:      #f8fafc;
  --console-sidebar-fg:      #33415a;
  --console-sidebar-fg-muted:#64748b;
  --console-accent:          #2563eb;
  --console-accent-bg:       #2563eb14;
  --console-accent-border:   #bfdbfe;
  --console-card-shadow:     0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --console-radius:          .6rem;
}

body { background: var(--console-bg); color: var(--console-text); }

/* ---- Topbar ---- */
.console-topbar {
  background: var(--console-surface);
  box-shadow: var(--console-card-shadow);
  border-bottom: 1px solid var(--console-border-dark);
}
.console-topbar .navbar-brand {
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--console-text);
}
.console-topbar .btn-link,
.console-topbar .navbar-nav .nav-link { color: var(--console-text); }

/* ---- Sidebar: light skin (shared by the desktop aside AND its offcanvas twin) ---- */
.console-sidebar {
  background: var(--console-sidebar-bg);
  padding-bottom: 2rem;
  border-right: 1px solid var(--console-border);
}

/* Sticky in-flow layout — DESKTOP ASIDE ONLY (lg+).
   The offcanvas twin carries .console-sidebar too, for the light skin. It must
   keep Bootstrap's `position: fixed`, because .offcanvas and .console-sidebar
   have the same specificity and this file loads AFTER bootstrap, so a blanket
   `position: sticky` here would also hit the offcanvas. That turned the hidden
   offcanvas into an in-flow, full-viewport-height, 400px-wide block inside the
   .row, which wrapped the row and pushed <main> (the right panel) to the very
   bottom of the page. Scoping to :not(.offcanvas) keeps it out of the flow. */
.console-sidebar:not(.offcanvas) {
  min-height: calc(100vh - 56px);
  position: sticky;
  top: 56px;
  overflow-y: auto;
}
.console-sidebar .nav { padding: .5rem 0; }

.console-sidebar .nav-section-label {
  color: var(--console-sidebar-fg-muted);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 1.1rem 1rem .35rem;
}

.console-sidebar .nav-link {
  color: var(--console-sidebar-fg-muted);
  padding: .55rem 1rem;
  margin: .1rem .6rem;
  border-radius: .6rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  font-weight: 500;
  font-size: .925rem;
  text-decoration: none;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.console-sidebar .nav-link:hover {
  color: var(--console-accent);
  background: var(--console-accent-bg);
}
.console-sidebar .nav-link.active {
  color: var(--console-accent);
  background: var(--console-accent-bg);
  font-weight: 600;
  border-right: 3px solid var(--console-accent);
}
.console-sidebar .nav-divider {
  border-color: var(--console-border);
  margin: .75rem 1rem;
}
.console-sidebar .nav-logout {
  color: var(--console-sidebar-fg-muted);
}
.console-sidebar .nav-logout:hover {
  color: var(--console-accent);
  background: var(--console-accent-bg);
}
.console-sidebar .offcanvas-title { color: inherit; }

/* Offcanvas twin shares the light skin — and is explicitly pinned to
   position:fixed so it can never become an in-flow block in the grid row. */
.offcanvas.console-sidebar {
  background: var(--console-surface);
  position: fixed;
}

/* ---- Icons (GLOBAL) ----
   Sizing/stroke must be global, not scoped to .console-sidebar. When it was
   scoped, any <svg class="nav-icon"> outside the sidebar (e.g. the Overview stat
   cards) had no width/height, so it fell back to the browser's default SVG box
   (300x150) and blew out of its container, and the fill/stroke rules were not
   applied either. */
.nav-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Icon that sits inside a line of text (e.g. the Next Fixture date row) */
.nav-icon-inline {
  width: 1rem;
  height: 1rem;
  vertical-align: -.15em;
}

/* ---- Stat cards (Overview) ----
   These used to live in an inline <style> in dashboard.html. Keeping them here
   means every console page shares one icon box size, and the inline <svg> inside
   is sized by the global .nav-icon rule above (it previously had no width/height
   outside the sidebar and fell back to the browser's 300x150 default). */
.stat-card { border: 0; border-radius: 1rem; }
.stat-card .stat-icon {
  width: 48px;
  height: 48px;
  border-radius: .75rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.stat-card .stat-icon .nav-icon { width: 1.5rem; height: 1.5rem; }
.stat-card .stat-num { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.stat-card a, .stat-card .stretched-link { text-decoration: none; }
.stat-card:hover { border-color: var(--console-accent-border); }

.panel-card .card-header { background: transparent; border-bottom: 1px solid var(--console-border); }
.quick-actions .btn { border-radius: .65rem; }

/* ---- Auth pages (login) — same light language as the console ---- */
.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background:
    radial-gradient(1100px 480px at 15% -10%, #dbeafe55, transparent 70%),
    radial-gradient(900px 420px at 100% 0%, #e0e7ff55, transparent 65%),
    var(--console-bg);
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--console-surface);
  border: 1px solid var(--console-border);
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(16,24,40,.08), 0 1px 3px rgba(16,24,40,.06);
  padding: 2.25rem 2rem;
}
.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--console-text);
  font-size: 1.15rem;
  margin-bottom: .35rem;
}
.auth-brand .auth-mark {
  width: 34px;
  height: 34px;
  border-radius: .6rem;
  background: var(--console-accent);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.auth-brand .auth-mark .nav-icon { width: 1.15rem; height: 1.15rem; }
.auth-subtitle {
  text-align: center;
  color: var(--console-text-muted);
  font-size: .9rem;
  margin-bottom: 1.5rem;
}
.auth-card .form-control { padding: .6rem .8rem; }
.auth-card .btn-auth {
  width: 100%;
  padding: .65rem 1rem;
  font-weight: 600;
  border-radius: var(--console-radius);
  margin-top: 1.35rem;
}
.auth-footer {
  text-align: center;
  margin-top: 1.35rem;
  font-size: .9rem;
  color: var(--console-text-muted);
}
.auth-footer a { font-weight: 600; text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; }

/* ---- Cards (unified across dashboard + list pages) ---- */
.card {
  border: 1px solid var(--console-border);
  border-radius: .75rem;
  box-shadow: var(--console-card-shadow);
  background: var(--console-surface);
}
.card-header {
  border-bottom: 1px solid var(--console-border);
  background: var(--console-surface-2);
  padding: .85rem 1rem;
  font-weight: 600;
  color: var(--console-text);
}

/* ---- Tables ---- */
.console-table th {
  background: var(--console-surface-2);
  border-bottom: 2px solid var(--console-border);
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--console-text-muted);
  padding: .6rem .75rem;
}
.console-table td { padding: .6rem .75rem; }
.console-table tbody tr { border-bottom: 1px solid var(--console-border); }
.console-table tbody tr:last-child { border-bottom: none; }
.console-table tbody tr:hover { background: var(--console-surface-2); }
.console-table a.btn { white-space: nowrap; }

/* ---- Forms ---- */
.form-label { font-size: .85rem; font-weight: 600; color: var(--console-text); }
.form-control, .form-select { border-radius: var(--console-radius); }
.input-group .form-control { border-top-left-radius: var(--console-radius); }

/* ---- Buttons / badges ---- */
.btn { border-radius: var(--console-radius); font-weight: 500; }
.btn-sm { border-radius: .45rem; }
.badge { font-weight: 600; }

/* ---- Alerts ---- */
.alert { border-radius: var(--console-radius); }

/* ---- Full-width footer ---- */
.console-footer {
  border-top: 1px solid var(--console-border);
  color: var(--console-text-muted);
  font-size: .85rem;
  padding: 1.1rem 0;
  background: var(--console-surface);
}