/* Professional Design System for Grassroots Team Manager */
/* Colors dynamically generated from team logo */

/* Font Stack & Dynamic Color Variables */
:root {
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* These were hard-coded to Pulford's gold and grey, and nothing ever re-themed
     them — base.html only drives the --pp-* / --club-* tokens from the club's own
     Appearance settings. So every plain Bootstrap .btn-primary, .btn-outline-primary
     and .btn-secondary in the app (≈390 of them across 195 templates) rendered in
     Pulford's colours no matter whose club it was. Ben, first-run feedback
     2026-08-11: "Im seeing a lot of buttons not keeping with the clubs colour
     scheme". Pointing them at the club tokens re-themes the lot in one place; the
     literals stay as fallbacks so the file still stands up on its own. */
  --primary-color: var(--pp-accent, #f7c500);
  --primary-hover: var(--pp-accent-hover, #ac8900);
  --primary-light:   color-mix(in srgb, var(--pp-accent, #f7c500) 55%, #fff);
  --primary-lighter: color-mix(in srgb, var(--pp-accent, #f7c500) 25%, #fff);
  --secondary-color: #dbd6d6;
  --secondary-hover: #999595;
  --secondary-light: #e9e6e6;
  /* The second club colour (Pulford: navy), not a fixed red. */
  --accent-color: var(--club-primary, #d61c1f);
  --accent-hover: color-mix(in srgb, var(--club-primary, #d61c1f) 80%, #000);
  --accent-light:  color-mix(in srgb, var(--club-primary, #d61c1f) 45%, #fff);
  --neutral-white: #ffffff;
  --neutral-light-gray: #f9fafb;
  --neutral-medium-gray: #6b7280;
  --neutral-dark-gray: #374151;
  --neutral-black: #111827;
  --status-success: #10b981;
  --status-warning: #f59e0b;
  --status-error: #ef4444;
  --status-info: #3b82f6;
  --border-color: var(--neutral-light-gray);
  --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  --card-shadow-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

html, body {
  max-width: 100vw;
  height: 100%;
}

body {
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 1.5;
  color: var(--neutral-dark-gray);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh; /* uses small viewport height — excludes mobile URL bar */
}

/* Sticky footer: main grows to push footer down */
main.container-fluid {
  flex: 1 0 auto;
}

/* Contain decorative ::before pseudo-elements that use negative insets */
.p-shell, .fd-shell, .we-shell, .feed-shell {
  overflow: hidden;
}

/* Professional Card System */
.card {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--card-shadow);
  background: white;
  transition: all 0.2s ease;
}

.card:hover {
  box-shadow: var(--card-shadow-hover);
}

.card-header {
  background: var(--neutral-light-gray);
  border-bottom: 1px solid var(--border-color);
  border-radius: 8px 8px 0 0 !important;
  padding: 1rem 1.5rem;
  font-weight: 600;
}

/* Section Titles */
.section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--neutral-black);
  margin-bottom: 1rem;
}

.subsection-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--neutral-dark-gray);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Professional Buttons */
.btn {
  font-weight: 500;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

/* Bootstrap's "brand" colours, mapped onto the club's own palette. Bootstrap
   ships #0d6efd blue for anything -primary; without these rules a club with a
   red or green kit still gets blue chrome scattered through the app.

   Text colour is NOT the accent — see .pp-btn / --pp-accent-text. A fill colour
   chosen to sit behind white type is usually unreadable AS type (the default
   gold manages 1.6:1 on white), which is what made outline buttons ghosts. */
.btn-primary {
  background-color: var(--pp-accent, var(--primary-color));
  border-color: var(--pp-accent, var(--primary-color));
  color: var(--pp-accent-on, #fff);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-check:checked + .btn-primary {
  background-color: var(--pp-accent-hover, var(--primary-hover));
  border-color: var(--pp-accent-hover, var(--primary-hover));
  color: var(--pp-accent-on, #fff);
}

.btn-outline-primary {
  color: var(--pp-accent-text, var(--primary-color));
  border-color: var(--pp-accent-text, var(--primary-color));
  background-color: transparent;
}

.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active,
.btn-check:checked + .btn-outline-primary {
  background-color: var(--pp-accent, var(--primary-color));
  border-color: var(--pp-accent, var(--primary-color));
  color: var(--pp-accent-on, #fff);
}

/* Was white type on #dbd6d6 — about 1.5:1, i.e. an invisible label on a pale
   grey slab. It's a neutral button, so give it neutral-button colours. */
.btn-secondary {
  background-color: var(--pp-surface-2, var(--secondary-color));
  border-color: var(--pp-stroke, var(--secondary-hover));
  color: var(--pp-ink, #111827);
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
  background-color: var(--pp-surface-3, var(--secondary-light));
  border-color: var(--pp-stroke, var(--secondary-hover));
  color: var(--pp-ink, #111827);
}

/* The utility classes. Their COLOUR is already the club's: base.html points
   Bootstrap's --bs-primary-rgb at the club accent, so .bg-primary,
   .border-primary and friends re-theme themselves and the bg-opacity-* washes
   still wash. What Bootstrap can't get right is the text that sits on them.

   A solid accent fill needs on-accent type — templates habitually write
   "bg-primary text-white", and white on a pale club colour is the
   invisible-label bug all over again, hence the !important. */
.bg-primary { color: var(--pp-accent-on, #fff) !important; }

/* text-/border- are ink, not fill: they use the darkened accent that actually
   reads on a light card (the raw accent manages 1.6:1 as type). */
.text-primary   { color: var(--pp-accent-text, var(--primary-color)) !important; }
.border-primary { border-color: var(--pp-accent, var(--primary-color)) !important; }
a.text-primary:hover { color: var(--pp-accent-hover, var(--primary-hover)) !important; }

/* bg-opacity-* turns the fill into a pale wash, so on-accent text (which may be
   white) would vanish. A wash is a light card: give it ink, not on-accent. */
.bg-primary[class*="bg-opacity-"] {
  color: var(--pp-accent-text, var(--primary-color)) !important;
}

/* Bootstrap's pastel pair, likewise blue out of the box. */
.bg-primary-subtle {
  background-color: color-mix(in srgb, var(--pp-accent, var(--primary-color)) 18%, #fff) !important;
}
.text-primary-emphasis { color: var(--pp-accent-text, var(--primary-color)) !important; }
html.dark-mode .bg-primary-subtle {
  background-color: color-mix(in srgb, var(--pp-accent, var(--primary-color)) 22%, #0b1220) !important;
}

/* Match Plan Specific Styles */
.match-header {
  background: linear-gradient(135deg, var(--neutral-light-gray) 0%, var(--primary-lighter) 100%);
  border-bottom: 2px solid var(--primary-color);
  padding: 2rem;
  margin: -1.5rem -1.5rem 1.5rem -1.5rem;
  border-radius: 8px 8px 0 0;
}

.match-header h1 {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--neutral-black);
  margin-bottom: 0.5rem;
}

.match-header .subtitle {
  font-size: 1.125rem;
  color: var(--neutral-medium-gray);
  margin-bottom: 0.25rem;
}

.match-header .meta {
  font-size: 0.875rem;
  color: var(--neutral-medium-gray);
}

/* Training Blocks */
.training-blocks {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.training-block {
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: white;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.training-block:hover {
  border-color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
}

.training-block.highlighted {
  background-color: var(--accent-light);
  border-color: var(--accent-color);
  border-width: 2px;
}

.training-block .block-number {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--neutral-medium-gray);
  margin-bottom: 0.25rem;
}

.training-block .block-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--neutral-black);
  line-height: 1.3;
}

/* Rotation Grid */
.rotation-grid {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.rotation-grid table {
  margin: 0;
  border-collapse: collapse;
  width: 100%;
}

.rotation-grid th {
  background: var(--neutral-light-gray);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--neutral-medium-gray);
  border-bottom: 1px solid var(--border-color);
  padding: 0.75rem;
  text-align: center;
}

.rotation-grid th:first-child {
  text-align: left;
  padding-left: 1rem;
}

.rotation-grid td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--neutral-light-gray);
  vertical-align: middle;
}

.rotation-grid td:first-child {
  padding-left: 1rem;
  font-weight: 500;
  color: var(--neutral-dark-gray);
}

.rotation-grid .quarter-cell {
  text-align: center;
  width: 60px;
}

.rotation-grid .checkbox-large {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

/* Evaluation Dots */
.evaluation-dots {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dot:hover {
  border-color: var(--primary-color);
}

.dot.filled {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* Theme Observations */
.observation-row {
  display: grid;
  grid-template-columns: 2fr 60px 60px 60px 60px 1fr;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--neutral-light-gray);
}

.observation-row:last-child {
  border-bottom: none;
}

.observation-theme {
  font-weight: 500;
  color: var(--neutral-dark-gray);
}

.observation-quarter {
  text-align: center;
}

/* Form Controls */
.form-control, .form-select {
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  transition: all 0.2s ease;
}

.form-control:focus, .form-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(247, 197, 0, 0.15);
}

/* Thumb-sized form controls, everywhere, in one place.
   Bootstrap's default control lands at 38-39px and the -sm variants at 31px,
   both under the 44px a thumb needs. Rather than patch this page by page --
   it was showing up on every audited screen -- lift them here, and only on
   touch-width screens so the desktop keeps its tighter rhythm.
   Deliberately excludes .form-check-input (checkboxes/radios size themselves)
   and any control a page has explicitly sized with .pp-input-tight. */
@media (max-width: 991.98px) {
  .form-control:not(.pp-input-tight),
  .form-select:not(.pp-input-tight) { min-height: 44px; }
  textarea.form-control { min-height: 88px; }
}

/* Status Badges */
.badge {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.badge-home {
  background-color: var(--primary-light);
  color: var(--primary-color);
}

.badge-away {
  background-color: var(--secondary-light);
  color: var(--secondary-color);
}

.badge-scheduled {
  background-color: var(--status-info);
  color: white;
}

.badge-played {
  background-color: var(--status-success);
  color: white;
}

/* Dashboard Cards */
.dashboard-card {
  border: none;
  border-radius: 16px;
  padding: 1.5rem;
  background: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.fixture-card {
  border-left: 4px solid var(--primary-color);
  background: linear-gradient(135deg, #ffffff 0%, #fefce8 100%);
}

.quick-action-card {
  text-align: center;
  padding: 1.5rem 1rem;
  text-decoration: none !important;
  color: inherit;
  display: block;
  border-radius: 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 2px solid transparent;
}

.quick-action-card:hover {
  border-color: var(--primary-color);
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  color: inherit;
}

.quick-action-card .icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

/* Navbar Styling */
.navbar {
  padding: 0.75rem 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.navbar .navbar-brand {
  flex-shrink: 0;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: transform 0.2s ease;
}

.navbar-brand:hover {
  transform: scale(1.02);
}

.navbar-brand img {
  height: 32px;
  width: auto;
}

.navbar .nav-link {
  font-weight: 500;
  padding: 0.5rem 1rem !important;
  border-radius: 6px;
  transition: all 0.2s ease;
  margin: 0 2px;
}

.navbar .nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.navbar .nav-link.active,
.navbar .nav-item.active .nav-link {
  background: rgba(255, 255, 255, 0.15);
}

.navbar .dropdown-menu {
  border: none;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  padding: 0.5rem;
  margin-top: 0.5rem;
}

.navbar .dropdown-item {
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  transition: all 0.15s ease;
}

.navbar .dropdown-item:hover {
  background: var(--primary-lighter);
  transform: translateX(4px);
}

.navbar .dropdown-item i {
  width: 20px;
  margin-right: 8px;
  opacity: 0.7;
}

/* Print Styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  .page-break {
    page-break-after: always;
  }
  
  body {
    font-size: 12px;
    line-height: 1.4;
  }
  
  .card {
    border: 1px solid #000;
    box-shadow: none;
    page-break-inside: avoid;
  }
  
  .match-header {
    background: white !important;
    border-bottom: 2px solid #000 !important;
  }
  
  .training-block.highlighted {
    background-color: var(--accent-light) !important;
    border: 2px solid #000 !important;
  }
  
  .rotation-grid {
    page-break-inside: avoid;
  }
  
  .rotation-grid table {
    border: 1px solid #000;
  }
  
  .rotation-grid th,
  .rotation-grid td {
    border: 1px solid #000;
  }
  
  .dot.filled {
    background-color: #000 !important;
    border-color: #000 !important;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .training-blocks {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .observation-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .observation-quarter {
    text-align: left;
  }
  
  .container {
    padding: 0 1rem;
  }
}

@media (max-width: 576px) {
  .training-blocks {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .match-header {
    padding: 1rem;
    margin: -1rem -1rem 1rem -1rem;
  }
  
  .match-header h1 {
    font-size: 1.5rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PULFORD PIRATES — DESIGN SYSTEM TOKENS (global layer)
   All pp-* classes reference these. Never override these in templates.
═══════════════════════════════════════════════════════════════════ */
:root {
  /* Brand — default: navy/gold/red (Pirates) */
  --pp-navy:         #0b1220;
  --pp-navy-mid:     #111a33;
  --pp-navy-deep:    #0a2550;
  --pp-gold:         #f7c500;
  --pp-gold-hover:   #d4a800;
  --pp-red:          #d61c1f;
  --pp-red-hover:    #b01618;

  /* Accent — the "team colour" that themes can override */
  --pp-accent:       #f7c500;
  --pp-accent-hover: #d4a800;
  --pp-accent-on:    #0b1220;   /* text colour on top of accent */
  /* The accent used as TEXT on a light card. The fill accent is chosen to look
     good behind white type, so on white it can be near-invisible (the default
     gold scores 1.6:1). This is the same hue walked dark enough to clear WCAG
     AA. Dark surfaces put the raw accent back — see the override below. */
  --pp-accent-text:  #8a6e00;

  /* Navbar gradient — themes can override */
  --pp-nav-bg:       linear-gradient(135deg, #0b1220 0%, #111a33 50%, #0a2550 100%);

  /* Neutrals */
  --pp-ink:          #0f172a;
  --pp-muted:        #64748b;
  --pp-light:        #94a3b8;
  --pp-surface:      #fafbfc;
  --pp-surface-2:    #f3f5f7;
  --pp-surface-3:    #edf0f3;
  --pp-bg:           #e8ecf0;
  --pp-stroke:       rgba(15,23,42,0.08);

  /* Status */
  --pp-success:      #16a34a;
  --pp-warning:      #f59e0b;
  --pp-danger:       #ef4444;
  --pp-info:         #2563eb;

  /* Section accents */
  --pp-accent-blue:    #2563eb;
  --pp-accent-teal:    #0891b2;
  --pp-accent-green:   #16a34a;
  --pp-accent-amber:   #d97706;
  --pp-accent-orange:  #ea580c;
  --pp-accent-purple:  #7c3aed;
  --pp-accent-indigo:  #4f46e5;

  /* Shadows */
  --pp-shadow-sm:  0 2px 8px rgba(15,23,42,0.07), 0 0 0 1px rgba(15,23,42,0.06);
  --pp-shadow-md:  0 8px 24px rgba(15,23,42,0.12);
  --pp-shadow-lg:  0 18px 48px rgba(15,23,42,0.16);

  /* Radii */
  --pp-r-sm:   8px;
  --pp-r-md:   12px;
  --pp-r-lg:   16px;
  --pp-r-xl:   22px;
  --pp-r-pill: 999px;

  --pp-ease: cubic-bezier(.2,.8,.2,1);
}

/* ───────────────────────────────────────────────────────────────
   COLOUR THEMES — applied as body class e.g. body.theme-blue
   Each theme overrides: accent, accent-hover, accent-on, nav-bg
─────────────────────────────────────────────────────────────── */

/* Gold/Navy — default Pirates, same as :root, no class needed */

html.theme-red {
  --pp-accent:       #dc2626;
  --pp-accent-hover: #b91c1c;
  --pp-accent-on:    #ffffff;
  --pp-accent-text:  #dc2626;
  --pp-nav-bg:       linear-gradient(135deg, #1c0505 0%, #3b0a0a 50%, #5c1010 100%);
}

html.theme-blue {
  --pp-accent:       #2563eb;
  --pp-accent-hover: #1d4ed8;
  --pp-accent-on:    #ffffff;
  --pp-accent-text:  #2563eb;
  --pp-nav-bg:       linear-gradient(135deg, #0c1a3a 0%, #1e3a8a 50%, #1e40af 100%);
}

html.theme-green {
  --pp-accent:       #16a34a;
  --pp-accent-hover: #15803d;
  --pp-accent-on:    #ffffff;
  --pp-accent-text:  #117f3a;
  --pp-nav-bg:       linear-gradient(135deg, #052e16 0%, #14532d 50%, #166534 100%);
}

html.theme-purple {
  --pp-accent:       #7c3aed;
  --pp-accent-hover: #6d28d9;
  --pp-accent-on:    #ffffff;
  --pp-accent-text:  #7c3aed;
  --pp-nav-bg:       linear-gradient(135deg, #1e0050 0%, #3b0764 50%, #4c1d95 100%);
}

html.theme-orange {
  --pp-accent:       #ea580c;
  --pp-accent-hover: #c2410c;
  --pp-accent-on:    #ffffff;
  --pp-accent-text:  #c64a0a;
  --pp-nav-bg:       linear-gradient(135deg, #1c0800 0%, #431407 50%, #7c2d12 100%);
}

html.theme-teal {
  --pp-accent:       #0891b2;
  --pp-accent-hover: #0e7490;
  --pp-accent-on:    #ffffff;
  --pp-accent-text:  #077b97;
  --pp-nav-bg:       linear-gradient(135deg, #042c3b 0%, #0c4a6e 50%, #075985 100%);
}

/* Apply nav-bg to the actual navbar when a theme is active */
html[class*="theme-"] .navbar,
html.theme-red .navbar,
html.theme-blue .navbar,
html.theme-green .navbar,
html.theme-purple .navbar,
html.theme-orange .navbar,
html.theme-teal .navbar {
  background: var(--pp-nav-bg) !important;
}

/* Accent bar at bottom of navbar follows theme accent */
html[class*="theme-"] .pp-navbar-accent,
html.theme-red .pp-navbar-accent,
html.theme-blue .pp-navbar-accent,
html.theme-green .pp-navbar-accent,
html.theme-purple .pp-navbar-accent,
html.theme-orange .pp-navbar-accent,
html.theme-teal .pp-navbar-accent {
  background: linear-gradient(90deg, var(--pp-accent) 0%, var(--pp-accent-hover) 50%, var(--pp-accent) 100%) !important;
}

/* On a dark surface the bright accent IS the legible one, so hand the raw
   accent back to --pp-accent-text. This is what lets every accent-coloured
   link in the app use one token instead of each site having to decide whether
   it happens to be sitting on a white card or a navy hero. */
.navbar,
.pp-hero,
html.dark-mode {
  --pp-accent-text: var(--pp-accent);
}

/* ───────────────────────────────────────────────────────────────
   INLINE CREATE — "…or create a new one right here"
   Paired with static/js/pp-inline-create.js + club/inline_create.py.
   Lives here rather than in one template because six forms use it.
─────────────────────────────────────────────────────────────── */
.pp-inline-create-option { font-weight: 700; }
.pp-inline-create-body {
  border: 1px dashed color-mix(in srgb, var(--pp-accent) 45%, var(--pp-stroke));
  border-left: 3px solid var(--pp-accent);
  border-radius: 10px;
  padding: 0.75rem;
  margin-top: 0.5rem;
  background: color-mix(in srgb, var(--pp-accent) 6%, transparent);
}
.pp-inline-create-body[hidden] { display: none; }
.pp-inline-create-title {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--pp-accent-text);
  margin-bottom: 0.5rem;
}
/* Steppers — chunky enough to hit with a thumb. Any number input inside a
   .pp-stepper gets them; the JS decides which fields qualify. */
.pp-stepper { display: flex; align-items: stretch; gap: 0; }
.pp-stepper input[type="number"] {
  text-align: center;
  border-radius: 0;
  -moz-appearance: textfield;
  appearance: textfield;
  min-width: 0;
  flex: 1 1 auto;
}
.pp-stepper input::-webkit-outer-spin-button,
.pp-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pp-stepper button {
  width: 44px;
  min-height: 44px;
  flex: 0 0 auto;
  border: 1px solid var(--pp-stroke);
  background: var(--pp-surface-2);
  color: var(--pp-ink);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
}
.pp-stepper button:first-child { border-radius: 8px 0 0 8px; border-right: 0; }
.pp-stepper button:last-child { border-radius: 0 8px 8px 0; border-left: 0; }
.pp-stepper button:active { background: var(--pp-surface-3); }
.pp-stepper button:disabled { opacity: 0.45; cursor: not-allowed; }

/* ───────────────────────────────────────────────────────────────
   DARK MODE — applied as body.dark-mode
   Only overrides surfaces, backgrounds, text — never brand colours.
   Bespoke pages (match companion, feed, etc.) have dark-compatible
   own styles and will not be affected.
─────────────────────────────────────────────────────────────── */
html.dark-mode {
  --pp-ink:      #f1f5f9;
  --pp-muted:    #94a3b8;
  --pp-light:    #64748b;
  --pp-surface:  #1e2433;
  --pp-surface-2:#252d3d;
  --pp-surface-3:#2d3748;
  --pp-bg:       #141922;
  --pp-stroke:   rgba(255,255,255,0.08);

  /* Bootstrap overrides */
  --bs-body-bg:   #141922;
  --bs-body-color:#f1f5f9;
  color-scheme: dark;
}

html.dark-mode body {
  background-color: var(--pp-bg) !important;
  color: var(--pp-ink);
}

/* Cards */
html.dark-mode .card {
  background: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink);
}
html.dark-mode .card-header:not([class*='bg-']):not([style*='background']) {
  background: var(--pp-surface-2);
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink);
}

/* pp-cards */
html.dark-mode .pp-card,
html.dark-mode .pp-filter-card,
html.dark-mode .pp-shell-body {
  background: var(--pp-surface) !important;
  color: var(--pp-ink);
}
html.dark-mode .pp-card-header {
  background: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .pp-card-footer {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .pp-kpi {
  background: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .pp-table {
  background: var(--pp-surface) !important;
  color: var(--pp-ink);
}
html.dark-mode .pp-table thead th {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-muted);
}
html.dark-mode .pp-table tbody td {
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink);
}
html.dark-mode .pp-table tbody tr:hover td {
  background: var(--pp-surface-2) !important;
}
html.dark-mode .pp-result-row:hover {
  background: var(--pp-surface-2) !important;
}
html.dark-mode .pp-ql-btn {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink);
}
html.dark-mode .pp-input {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink);
}

/* Bootstrap form controls */
html.dark-mode .form-control,
html.dark-mode .form-select {
  background-color: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink) !important;
}

/* Bootstrap utility overrides */
html.dark-mode .bg-light,
html.dark-mode .bg-white {
  background-color: var(--pp-surface) !important;
}
html.dark-mode .bg-light-subtle {
  background-color: var(--pp-surface-2) !important;
}
html.dark-mode .text-dark { color: var(--pp-ink) !important; }
html.dark-mode .text-muted { color: var(--pp-muted) !important; }
html.dark-mode .border,
html.dark-mode .border-bottom,
html.dark-mode .border-top { border-color: var(--pp-stroke) !important; }

/* Dropdowns */
html.dark-mode .dropdown-menu {
  background-color: var(--pp-surface) !important;
  border: 1px solid var(--pp-stroke) !important;
  color: var(--pp-ink);
}
html.dark-mode .dropdown-item {
  color: var(--pp-ink) !important;
}
html.dark-mode .dropdown-item:hover,
html.dark-mode .dropdown-item:focus {
  background-color: var(--pp-surface-2) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .dropdown-divider {
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .dropdown-header {
  color: var(--pp-muted) !important;
}

/* Alerts */
html.dark-mode .alert {
  border-color: var(--pp-stroke);
}

/* Footer */
html.dark-mode footer.bg-dark {
  background-color: #0a0d12 !important;
}
html.dark-mode .pp-navbar-accent {
  opacity: 0.7;
}

/* Theme picker panel in dropdown */
.pp-theme-picker {
  padding: 0.6rem 0.85rem;
}
.pp-theme-picker-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bs-secondary-color, #6c757d);
  margin-bottom: 0.45rem;
  display: block;
}
.pp-theme-swatches {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.pp-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
  position: relative;
}
.pp-swatch:hover { transform: scale(1.2); }
.pp-swatch.active {
  border-color: var(--pp-ink, #0f172a);
  transform: scale(1.15);
}
.pp-swatch.active::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.7);
}
.pp-dark-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: inherit;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  transition: background 0.15s;
  border-radius: 6px;
}
.pp-dark-toggle:hover {
  background: var(--bs-tertiary-bg, #f8f9fa);
}
.pp-dark-toggle-track {
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: #cbd5e1;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}
.pp-dark-toggle-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 2px; left: 2px;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
html.dark-mode .pp-dark-toggle-track {
  background: var(--pp-accent, #f7c500);
}
html.dark-mode .pp-dark-toggle-thumb {
  transform: translateX(14px);
}
html.dark-mode .pp-dark-toggle:hover {
  background: var(--pp-surface-2) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PP COMPONENT LIBRARY — centralised definitions
   These replace all per-template <style> blocks.
   Use pp-* classes in any template; styling comes from here.
═══════════════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────────── */
/* ── Page shell ─────────────────────────────────────────────────────────── */
.pp-page-shell {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 0 2rem;
}
.pp-page-shell-wide {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 0 2rem;
}
.pp-page-inner {
  padding: 0 0.5rem;
}
@media (min-width: 576px) {
  .pp-page-inner { padding: 0; }
}

.pp-hero {
  background: linear-gradient(135deg, var(--pp-navy) 0%, var(--pp-navy-mid) 60%, var(--pp-navy-deep) 100%);
  border-radius: var(--pp-r-lg);
  padding: 0.75rem 1.25rem;
  color: #fff;
  margin-bottom: 0.75rem;
}
.pp-hero-kicker {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
  font-weight: 700;
  margin-bottom: 0.15rem;
}
.pp-hero-title {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.02em;
}
.pp-hero-subtitle {
  font-size: 0.78rem;
  opacity: 0.75;
  margin-top: 0.1rem;
}
.pp-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--pp-r-pill);
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
}

/* Stat cards — the central KPI-tile component. Use instead of hand-rolled
   pastel Bootstrap cards so every dashboard shares one look. Variant classes
   (pp-stat--danger/info/success/warning/…) tint only the number + icon; the
   card itself stays on the neutral surface for a calm, unified grid. */
.pp-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.pp-stat {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  /* Was a hard-coded #fff card reaching for --pp-border / --pp-shadow, neither of
     which has ever been defined — so it silently used the light-mode fallbacks and
     stayed a white slab in dark mode. The real tokens are --pp-stroke/--pp-shadow-sm. */
  background: var(--pp-surface);
  border: 1px solid var(--pp-stroke);
  border-radius: var(--pp-r-lg);
  padding: 1rem 1.15rem;
  box-shadow: var(--pp-shadow-sm);
}
.pp-stat-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pp-muted);
}
.pp-stat-value {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.1;
  margin-top: 0.15rem;
  color: var(--pp-ink);
}
.pp-stat-icon { font-size: 1.35rem; opacity: 0.28; color: var(--pp-muted); }
.pp-stat--danger  .pp-stat-value, .pp-stat--danger  .pp-stat-icon { color: #dc2626; }
.pp-stat--info    .pp-stat-value, .pp-stat--info    .pp-stat-icon { color: var(--pp-accent-blue); }
.pp-stat--success .pp-stat-value, .pp-stat--success .pp-stat-icon { color: var(--pp-accent-green); }
.pp-stat--warning .pp-stat-value, .pp-stat--warning .pp-stat-icon { color: var(--pp-accent-amber); }
.pp-stat--danger  { border-top: 3px solid #dc2626; }
.pp-stat--info    { border-top: 3px solid var(--pp-accent-blue); }
.pp-stat--success { border-top: 3px solid var(--pp-accent-green); }
.pp-stat--warning { border-top: 3px solid var(--pp-accent-amber); }

/* ── Card ───────────────────────────────────────────────────────── */
.pp-card {
  background: var(--pp-surface);
  border: 1px solid var(--pp-stroke);
  border-radius: var(--pp-r-md);
  box-shadow: var(--pp-shadow-sm);
  overflow: visible; /* was hidden — that silently broke table-responsive inside cards */
  margin-bottom: 1rem;
}
/* Restore rounded corners on first/last card children (lost when overflow:hidden removed) */
.pp-card > .pp-card-header:first-child { border-radius: 11px 11px 0 0; }
.pp-card > .pp-card-body:first-child  { border-radius: 11px 11px 0 0; }
.pp-card > .pp-card-footer:last-child { border-radius: 0 0 11px 11px; }
.pp-card > div:first-child:not(.pp-card-header):not(.pp-card-body) { border-radius: 11px 11px 0 0; }
.pp-card > div:last-child:not(.pp-card-footer) { border-radius: 0 0 11px 11px; }
.pp-card-header {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--pp-stroke);
  background: var(--pp-surface-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-width: 0;
}
.pp-card-header-title {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pp-muted);
  min-width: 0;
  word-break: break-word;
}
.pp-card-body {
  padding: 1.1rem 1.25rem;
}
.pp-card-footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--pp-stroke);
  background: var(--pp-surface-2);
}

/* ── Alerts ──────────────────────────────────────────────────
   These classes were in use on several pages (invite, messages, coaching
   staff) but had never been defined outside the design-system preview, so
   they rendered as bare unstyled divs — part of why /accounts/invite/ looked
   off-brand. Same shape as the preview, plus dark mode. */
.pp-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.95rem;
  border: 1px solid transparent;
  border-radius: var(--pp-r-md);
  font-size: 0.88rem;
  margin-bottom: 1rem;
}
.pp-alert-icon { font-size: 0.95rem; flex-shrink: 0; margin-top: 1px; }
.pp-alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.pp-alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.pp-alert-danger  { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.pp-alert-info    { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.pp-alert a { color: inherit; text-decoration: underline; }
html.dark-mode .pp-alert-success { background: rgba(34,197,94,0.12);  border-color: rgba(34,197,94,0.35);  color: #86efac; }
html.dark-mode .pp-alert-warning { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.35); color: #fcd34d; }
html.dark-mode .pp-alert-danger  { background: rgba(239,68,68,0.12);  border-color: rgba(239,68,68,0.35);  color: #fca5a5; }
html.dark-mode .pp-alert-info    { background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.35); color: #93c5fd; }

/* ── Chip (a small pill of read-only info, often a link) ────── */
.pp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.65rem;
  background: var(--pp-surface-2);
  border: 1px solid var(--pp-stroke);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--pp-ink);
  text-decoration: none;
}
a.pp-chip:hover { border-color: var(--pp-accent); color: var(--pp-ink); }

/* ── Filter card ────────────────────────────────────────────────── */
.pp-filter-card {
  background: var(--pp-surface);
  border: 1px solid var(--pp-stroke);
  border-radius: var(--pp-r-md);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--pp-shadow-sm);
}

/* ── Form section (used in incident form etc.) ──────────────────── */
.pp-form-section {
  background: var(--pp-surface);
  border: 1px solid var(--pp-stroke);
  border-radius: var(--pp-r-md);
  box-shadow: var(--pp-shadow-sm);
  overflow: hidden;
  margin-bottom: 1rem;
}
.pp-form-section-header {
  padding: 0.65rem 1.1rem;
  border-bottom: 1px solid var(--pp-stroke);
  background: var(--pp-surface-2);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pp-muted);
}
.pp-form-section-body {
  padding: 1rem 1.1rem;
}

/* ── KPI grid ───────────────────────────────────────────────────── */
.pp-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 576px) {
  .pp-kpi-grid { grid-template-columns: 1fr; }
}

/* ── Global mobile polish ────────────────────────────────── */
@media (max-width: 575.98px) {
  /* Compact hero headers — long titles were wrapping to 3+ lines */
  .pp-hero { padding: 0.55rem 0.9rem; }
  .pp-hero-title { font-size: 1.05rem; letter-spacing: -0.01em; }
  .pp-hero-kicker { font-size: 0.58rem; }
  /* Compact tables on mobile */
  .pp-table { font-size: 0.78rem; }
  .pp-table th, .pp-table td { padding: 0.45rem 0.6rem; }
  /* Button rows in heroes should wrap not overflow */
  .pp-hero .d-flex { flex-wrap: wrap; }
}
.pp-kpi-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) {
  .pp-kpi-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
.pp-kpi {
  background: var(--pp-surface);
  border: 1px solid var(--pp-stroke);
  border-radius: var(--pp-r-md);
  padding: 1rem 1.25rem;
  box-shadow: var(--pp-shadow-sm);
}
.pp-kpi-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pp-muted);
  margin-bottom: 0.2rem;
}
.pp-kpi-value {
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--pp-ink);
}
.pp-kpi-sub {
  font-size: 0.75rem;
  color: var(--pp-muted);
  margin-top: 0.1rem;
}

/* ── Table ──────────────────────────────────────────────────────── */
.pp-table {
  width: 100%;
  border-collapse: collapse;
}
.pp-table thead th {
  padding: 0.65rem 1rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pp-muted);
  background: var(--pp-surface-2);
  border-bottom: 1px solid var(--pp-stroke);
  white-space: nowrap;
}
.pp-table tbody td {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--pp-stroke);
  vertical-align: middle;
  color: var(--pp-ink);
}
.pp-table tbody tr:last-child td {
  border-bottom: none;
}
.pp-table tbody tr:hover td {
  background: var(--pp-surface-2);
}

/* ── Badges ─────────────────────────────────────────────────────── */
.pp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--pp-r-pill);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}
.pp-badge-success  { background: #dcfce7; color: #15803d; }
.pp-badge-danger   { background: #fee2e2; color: #b91c1c; }
.pp-badge-warning  { background: #fef9c3; color: #a16207; }
.pp-badge-info     { background: #dbeafe; color: #1d4ed8; }
.pp-badge-neutral  { background: var(--pp-surface-3); color: var(--pp-muted); }
.pp-badge-urgent   { background: #dc2626; color: #fff; }
.pp-badge-high     { background: #ea580c; color: #fff; }
.pp-badge-medium   { background: #d97706; color: #fff; }
.pp-badge-low      { background: var(--pp-surface-3); color: var(--pp-muted); }

/* Notification dropdown rows: Bootstrap's .dropdown-item is white-space:nowrap,
   so a long verb ("New kit sizes submitted for Harry Lindgren") overflowed and
   got clipped by the menu edge. Let these rows wrap; min-width:0 lets the text
   column shrink inside the flex row instead of pushing the badge off-screen. */
.notification-item { white-space: normal; }
.notification-item .flex-grow-1 { min-width: 0; }
.notification-item .flex-grow-1 .small { overflow-wrap: anywhere; }

/* ── Buttons ────────────────────────────────────────────────────── */
.pp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 1.1rem;
  border-radius: var(--pp-r-pill);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s var(--pp-ease);
  white-space: nowrap;
}
.pp-btn:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 2px; }

.pp-btn-primary { background: var(--pp-accent); color: var(--pp-accent-on); }
.pp-btn-primary:hover { background: var(--pp-accent-hover); color: var(--pp-accent-on); text-decoration: none; }

/* Ghost is light-surface-safe by default (readable dark text on a subtle fill).
   The translucent-white treatment is scoped to the dark .pp-hero below, so ghost
   buttons on light cards/pages are never white-on-white. */
.pp-btn-ghost { background: var(--pp-surface-2); color: var(--pp-ink); border-color: var(--pp-stroke); }
.pp-btn-ghost:hover { background: var(--pp-surface-3, var(--pp-stroke)); color: var(--pp-ink); text-decoration: none; }
.pp-hero .pp-btn-ghost { background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.3); }
.pp-hero .pp-btn-ghost:hover { background: rgba(255,255,255,0.25); color: #fff; text-decoration: none; }

.pp-btn-outline { background: var(--pp-surface); color: var(--pp-ink); border-color: var(--pp-stroke); }
.pp-btn-outline:hover { background: var(--pp-surface-2); text-decoration: none; color: var(--pp-ink); }

.pp-btn-secondary { background: var(--pp-surface-2); color: var(--pp-ink); border-color: var(--pp-stroke); }
.pp-btn-secondary:hover { background: var(--pp-surface-3, var(--pp-stroke)); color: var(--pp-ink); text-decoration: none; }

.pp-btn-success { background: #dcfce7; color: #15803d; border-color: #86efac; }
.pp-btn-success:hover { background: #bbf7d0; color: #15803d; text-decoration: none; }

.pp-btn-danger { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.pp-btn-danger:hover { background: #fecaca; color: #991b1b; text-decoration: none; }

.pp-btn-sm { padding: 0.3rem 0.7rem; font-size: 0.75rem; }
.pp-btn-lg { padding: 0.65rem 1.5rem; font-size: 0.95rem; }

/* ── Labels / section typography ───────────────────────────────── */
.pp-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pp-muted);
  display: block;
  margin-bottom: 0.3rem;
}
.pp-section-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pp-muted);
  margin: 1.1rem 0 0.6rem;
}
.pp-section-label:first-child { margin-top: 0; }
.pp-section-value {
  font-size: 0.9rem;
  color: var(--pp-ink);
  white-space: pre-wrap;
  line-height: 1.6;
}
.pp-field-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pp-muted);
  margin-bottom: 0.2rem;
}
.pp-field-value {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--pp-ink);
}

/* ── Input ──────────────────────────────────────────────────────── */
.pp-input {
  display: block;
  width: 100%;
  padding: 0.45rem 0.7rem;
  font-size: 0.875rem;
  border: 1px solid var(--pp-stroke);
  border-radius: var(--pp-r-sm);
  background: var(--pp-surface-2);
  color: var(--pp-ink);
  transition: border-color 0.15s;
}
.pp-input:focus {
  outline: none;
  border-color: var(--pp-accent);
  box-shadow: 0 0 0 3px rgba(247,197,0,0.15);
}

/* ── Divider ────────────────────────────────────────────────────── */
.pp-divider {
  border: none;
  border-top: 1px solid var(--pp-stroke);
  margin: 1.25rem 0;
}

/* ── Info / referee box ─────────────────────────────────────────── */
.pp-info-box {
  background: var(--pp-surface-2);
  border: 1px solid var(--pp-stroke);
  border-radius: var(--pp-r-sm);
  padding: 0.75rem 1rem;
  font-size: 0.8rem;
  color: var(--pp-muted);
  margin-top: 0.5rem;
}
.pp-referee-box {
  background: var(--pp-surface-2);
  border: 1px solid var(--pp-stroke);
  border-radius: var(--pp-r-sm);
  padding: 1rem;
  margin-bottom: 1rem;
}
.pp-referee-box-title {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pp-muted);
  margin-bottom: 0.75rem;
}

/* ── Summary bar ────────────────────────────────────────────────── */
.pp-summary {
  background: var(--pp-surface);
  border: 1px solid var(--pp-stroke);
  border-radius: var(--pp-r-md);
  padding: 1rem 1.25rem;
  margin-top: 0.75rem;
}

/* ── Stat (used in division cards etc.) ─────────────────────────── */
.pp-stat { text-align: center; }
.pp-stat-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pp-muted);
}
.pp-stat-value {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--pp-ink);
}

/* ── Division card (club pages) ─────────────────────────────────── */
.pp-division-card {
  background: var(--pp-surface);
  border: 1px solid var(--pp-stroke);
  border-radius: var(--pp-r-md);
  box-shadow: var(--pp-shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.pp-division-card-header {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--pp-stroke);
  background: var(--pp-surface-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pp-division-card-body {
  padding: 0.75rem 1rem;
  flex: 1;
}
.pp-division-card-footer {
  padding: 0.65rem 1rem;
  border-top: 1px solid var(--pp-stroke);
  background: var(--pp-surface-2);
  display: flex;
  gap: 0.5rem;
}

/* ── Budget progress bar ────────────────────────────────────────── */
.pp-budget-item {
  background: var(--pp-surface);
  border: 1px solid var(--pp-stroke);
  border-radius: var(--pp-r-md);
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
}
.pp-budget-item:last-child { margin-bottom: 0; }
.pp-progress-track {
  height: 10px;
  background: var(--pp-surface-3);
  border-radius: 999px;
  overflow: hidden;
  margin: 0.4rem 0;
}
.pp-progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}
.pp-progress-ok     { background: #16a34a; }
.pp-progress-warn   { background: #d97706; }
.pp-progress-danger { background: #dc2626; }

/* ── Session link ───────────────────────────────────────────────── */
.pp-session-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--pp-stroke);
  font-size: 0.875rem;
  color: var(--pp-ink);
  text-decoration: none;
}
.pp-session-link:last-child { border-bottom: none; }
.pp-session-link:hover { color: var(--pp-accent-text); text-decoration: none; }

/* ── Dark mode overrides for new components ─────────────────────── */
html.dark-mode .pp-form-section,
html.dark-mode .pp-referee-box,
html.dark-mode .pp-info-box,
html.dark-mode .pp-budget-item,
html.dark-mode .pp-division-card,
html.dark-mode .pp-summary {
  background: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .pp-form-section-header,
html.dark-mode .pp-division-card-header,
html.dark-mode .pp-division-card-footer,
html.dark-mode .pp-referee-box-title {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-muted) !important;
}
html.dark-mode .pp-form-section-body {
  color: var(--pp-ink);
}
html.dark-mode .pp-progress-track {
  background: var(--pp-surface-3) !important;
}
html.dark-mode .pp-btn-outline {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .pp-btn-outline:hover {
  background: var(--pp-surface-3) !important;
}
html.dark-mode .pp-badge-success { background: #14532d; color: #86efac; }
html.dark-mode .pp-badge-danger  { background: #7f1d1d; color: #fca5a5; }
html.dark-mode .pp-badge-warning { background: #78350f; color: #fcd34d; }
html.dark-mode .pp-badge-info    { background: #1e3a8a; color: #93c5fd; }
html.dark-mode .pp-badge-neutral { background: var(--pp-surface-3); color: var(--pp-muted); }
/* .pp-hero needs no dark-mode override — uses --pp-navy vars which are dark */
html.dark-mode .pp-input {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .pp-session-link { color: var(--pp-ink); }
html.dark-mode .pp-session-link:hover { color: var(--pp-accent-text); }

/* ===============================================================
   DARK MODE - EXTENDED COVERAGE
   Feed page local vars, Bootstrap components, utilities.
   =============================================================== */

/* Feed page local CSS variables override for dark mode */
html.dark-mode {
  --panel:        rgba(30, 36, 51, 0.97);
  --panel-strong: rgba(37, 45, 61, 0.99);
  --stroke:       rgba(255, 255, 255, 0.09);
  --stroke-2:     rgba(255, 255, 255, 0.15);
  --text:         #f1f5f9;
  --muted:        #94a3b8;
}

/* Bootstrap: Tables */
html.dark-mode table,
html.dark-mode .table {
  color: var(--pp-ink) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .table > :not(caption) > * > * {
  background-color: transparent !important;
  color: var(--pp-ink) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255,255,255,0.03) !important;
}
html.dark-mode .table-hover > tbody > tr:hover > * {
  background-color: var(--pp-surface-2) !important;
}
html.dark-mode thead th,
html.dark-mode thead td {
  background-color: var(--pp-surface-2) !important;
  color: var(--pp-muted) !important;
  border-color: var(--pp-stroke) !important;
}

/* Bootstrap: Modal */
html.dark-mode .modal-content {
  background-color: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .modal-header {
  background-color: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .modal-footer {
  background-color: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .modal-body { color: var(--pp-ink); }
html.dark-mode .btn-close { filter: invert(1) grayscale(1); }

/* Bootstrap: List Group */
html.dark-mode .list-group-item {
  background-color: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .list-group-item-action:hover,
html.dark-mode .list-group-item-action:focus {
  background-color: var(--pp-surface-2) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .list-group-item.active {
  background-color: var(--pp-accent) !important;
  border-color: var(--pp-accent) !important;
  color: var(--pp-accent-on) !important;
}

/* Bootstrap: Nav Tabs and Pills */
html.dark-mode .nav-tabs { border-color: var(--pp-stroke) !important; }
html.dark-mode .nav-tabs .nav-link { color: var(--pp-muted) !important; }
html.dark-mode .nav-tabs .nav-link:hover {
  border-color: var(--pp-stroke) var(--pp-stroke) transparent !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .nav-tabs .nav-link.active {
  background-color: var(--pp-surface) !important;
  border-color: var(--pp-stroke) var(--pp-stroke) var(--pp-surface) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .nav-pills .nav-link { color: var(--pp-muted) !important; }
html.dark-mode .nav-pills .nav-link.active {
  background-color: var(--pp-accent) !important;
  color: var(--pp-accent-on) !important;
}

/* Bootstrap: Input Group */
html.dark-mode .input-group-text {
  background-color: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink) !important;
}

/* Bootstrap: Breadcrumb */
html.dark-mode .breadcrumb-item,
html.dark-mode .breadcrumb-item a { color: var(--pp-muted) !important; }
html.dark-mode .breadcrumb-item.active { color: var(--pp-ink) !important; }
html.dark-mode .breadcrumb-item + .breadcrumb-item::before { color: var(--pp-light) !important; }

/* Bootstrap: Pagination */
html.dark-mode .page-item .page-link {
  background-color: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .page-item .page-link:hover {
  background-color: var(--pp-surface-2) !important;
  color: var(--pp-accent-text) !important;
}
html.dark-mode .page-item.active .page-link {
  background-color: var(--pp-accent) !important;
  border-color: var(--pp-accent) !important;
  color: var(--pp-accent-on) !important;
}
html.dark-mode .page-item.disabled .page-link {
  background-color: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-light) !important;
}

/* Bootstrap: Accordion */
html.dark-mode .accordion-item {
  background-color: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .accordion-button {
  background-color: var(--pp-surface-2) !important;
  color: var(--pp-ink) !important;
  box-shadow: none !important;
}
html.dark-mode .accordion-button:not(.collapsed) {
  background-color: var(--pp-surface-3) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .accordion-button::after { filter: invert(1); }
html.dark-mode .accordion-body {
  background-color: var(--pp-surface) !important;
  color: var(--pp-ink);
}

/* Bootstrap: Alerts */
html.dark-mode .alert-success {
  background-color: #14532d !important; border-color: #166534 !important; color: #86efac !important;
}
html.dark-mode .alert-danger {
  background-color: #7f1d1d !important; border-color: #991b1b !important; color: #fca5a5 !important;
}
html.dark-mode .alert-warning {
  background-color: #78350f !important; border-color: #92400e !important; color: #fcd34d !important;
}
html.dark-mode .alert-info {
  background-color: #1e3a8a !important; border-color: #1d4ed8 !important; color: #93c5fd !important;
}
html.dark-mode .alert-light {
  background-color: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .alert-secondary {
  background-color: var(--pp-surface-3) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-muted) !important;
}

/* Bootstrap: Badges */
html.dark-mode .badge.bg-light,
html.dark-mode .badge.text-bg-light {
  background-color: var(--pp-surface-3) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .badge.bg-secondary,
html.dark-mode .badge.text-bg-secondary {
  background-color: var(--pp-surface-3) !important;
  color: var(--pp-muted) !important;
}

/* Bootstrap: Progress */
html.dark-mode .progress { background-color: var(--pp-surface-3) !important; }

/* Bootstrap: Offcanvas */
html.dark-mode .offcanvas {
  background-color: var(--pp-surface) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .offcanvas-header { border-color: var(--pp-stroke) !important; }

/* Notification panel hover */
html.dark-mode .notification-item:hover {
  background-color: var(--pp-surface-2) !important;
}

/* Feed: composer card */
html.dark-mode .composer-card {
  background: var(--panel) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .composer-body-area {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
html.dark-mode .composer-body-area:focus-within {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(59,130,246,0.5) !important;
}
html.dark-mode .composer-body-area textarea,
html.dark-mode .composer-title-input {
  color: var(--pp-ink) !important;
}
html.dark-mode .composer-body-area textarea::placeholder,
html.dark-mode .composer-title-input::placeholder {
  color: var(--pp-light) !important;
}
html.dark-mode .composer-link-preview {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .composer-settings .form-select,
html.dark-mode .composer-settings select {
  background-color: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .reactors-chip {
  background: rgba(255,255,255,0.08) !important;
}
html.dark-mode .reactors-chip:hover {
  background: rgba(255,255,255,0.14) !important;
}

/* Feed: comment input */
html.dark-mode .ajax-comment-form textarea,
html.dark-mode .ajax-comment-form input[type="text"] {
  background-color: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink) !important;
}

/* Text colour utilities */
html.dark-mode .text-body      { color: var(--pp-ink) !important; }
html.dark-mode .text-secondary { color: var(--pp-muted) !important; }
html.dark-mode .text-black     { color: var(--pp-ink) !important; }

/* Headings */
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3,
html.dark-mode h4, html.dark-mode h5, html.dark-mode h6 {
  color: var(--pp-ink);
}

/* HR and code */
html.dark-mode hr { border-color: var(--pp-stroke) !important; opacity: 1; }
html.dark-mode code { background: var(--pp-surface-3) !important; color: #f472b6 !important; }
html.dark-mode pre {
  background: var(--pp-surface-2) !important;
  color: var(--pp-ink) !important;
  border-color: var(--pp-stroke) !important;
}

/* Feed: hardcoded colour overrides */
html.dark-mode .feed-engagement {
  color: var(--pp-muted) !important;
}
html.dark-mode .feed-engagement .small {
  color: var(--pp-muted) !important;
}
html.dark-mode .badge-visibility {
  background: rgba(14,165,233,0.22) !important;
  color: #7dd3fc !important;
}
html.dark-mode .badge-teams {
  background: rgba(16,185,129,0.22) !important;
  color: #6ee7b7 !important;
}
html.dark-mode .attachment-chip {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .comment-block {
  background: rgba(255,255,255,0.04) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .comment-bubble {
  background: rgba(255,255,255,0.07) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .comment-reaction-chips {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .comment-reaction-chips .cr-count {
  color: var(--pp-muted) !important;
}
html.dark-mode .cmt-react-picker {
  background: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .source-card {
  background: linear-gradient(135deg, rgba(14,165,233,0.12), rgba(37,99,235,0.12)) !important;
  border-color: rgba(37,99,235,0.25) !important;
}
html.dark-mode .source-card .source-subtitle {
  color: var(--pp-muted) !important;
}
html.dark-mode .source-card .meta-item {
  background: rgba(255,255,255,0.07) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .source-card .meta-item span {
  color: var(--pp-muted) !important;
}
html.dark-mode .source-card .source-pill {
  background: rgba(255,255,255,0.10) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .source-card .status-chip {
  background: rgba(255,255,255,0.08) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .spotlight-card {
  background: linear-gradient(120deg, rgba(120,53,15,0.55), rgba(120,53,15,0.35) 45%, rgba(49,46,129,0.35)) !important;
  border-color: rgba(249,115,22,0.30) !important;
}
html.dark-mode .spotlight-pill {
  background: rgba(255,255,255,0.10) !important;
  color: var(--pp-ink) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .bc-strip {
  background: rgba(255,255,255,0.05) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .bc-strip-btn {
  background: rgba(255,255,255,0.08) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-muted) !important;
}
html.dark-mode .bc-strip-btn:hover {
  background: rgba(255,255,255,0.12) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .bc-chip {
  background: rgba(255,255,255,0.07) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .bc-chip:hover {
  background: rgba(255,255,255,0.11) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .link-preview {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .mention-suggestions {
  background: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .mention-suggestions button {
  color: var(--pp-ink) !important;
}
html.dark-mode .giphy-modal {
  background: var(--pp-surface) !important;
}
html.dark-mode .giphy-modal-header {
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .giphy-modal-header input {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .giphy-modal-close {
  color: var(--pp-muted) !important;
}
html.dark-mode .giphy-modal-close:hover {
  background: var(--pp-surface-2) !important;
}
html.dark-mode .giphy-modal-footer {
  border-color: var(--pp-stroke) !important;
}

/* Feed: additional hardcoded colour overrides */
html.dark-mode .comment-box {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .emoji-picker-panel {
  background: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .reaction-bar {
  background: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .reaction-count {
  color: var(--pp-muted) !important;
}
html.dark-mode .poll-option {
  background: rgba(255,255,255,0.05) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .feed-overflow-menu {
  background: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .feed-overflow-item {
  color: var(--pp-ink) !important;
}
html.dark-mode .feed-overflow-item:hover {
  background: var(--pp-surface-2) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .feed-actions {
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .pdf-preview-card {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .pdf-preview-card .fw-semibold {
  color: var(--pp-ink) !important;
}
html.dark-mode .text-muted {
  color: var(--pp-muted) !important;
}



/* Squad dashboard local vars */
html.dark-mode {
  --db-surface:  #1e2433;
  --db-bg:       #141922;
  --db-stroke:   rgba(255,255,255,0.08);
  --db-text:     #f1f5f9;
  --db-muted:    #94a3b8;
}
html.dark-mode main.container-fluid {
  background: var(--db-bg) !important;
}
html.dark-mode .db-card {
  background: var(--db-surface) !important;
  border-color: var(--db-stroke) !important;
}
html.dark-mode .db-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important;
}
html.dark-mode .db-header {
  background: var(--db-surface) !important;
  border-color: var(--db-stroke) !important;
}
html.dark-mode .db-body {
  background: var(--db-surface) !important;
}
html.dark-mode .db-header-title {
  color: var(--db-text) !important;
}
html.dark-mode .db-header-meta {
  color: var(--db-muted) !important;
}

/* Dashboard: event cards (fixture/training grids) */
html.dark-mode .event-card {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .event-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important;
}
html.dark-mode .event-card .card-body {
  color: var(--db-text);
}
html.dark-mode .event-card h6.card-title {
  color: var(--db-text) !important;
}
html.dark-mode .event-card p {
  color: var(--db-muted) !important;
}

/* Dashboard: header icon pastel backgrounds — darken for dark mode */
html.dark-mode .db-fixtures .db-header-icon    { background: rgba(37,99,235,0.18) !important; }
html.dark-mode .db-feed .db-header-icon        { background: rgba(8,145,178,0.18) !important; }
html.dark-mode .db-broadcasts .db-header-icon  { background: rgba(217,119,6,0.18) !important; }
html.dark-mode .db-tournaments .db-header-icon { background: rgba(180,83,9,0.18) !important; }
html.dark-mode .db-training .db-header-icon    { background: rgba(22,163,74,0.18) !important; }
html.dark-mode .db-results .db-header-icon     { background: rgba(234,88,12,0.18) !important; }
html.dark-mode .db-quicklinks .db-header-icon  { background: rgba(255,255,255,0.08) !important; }
html.dark-mode .db-whosgoin .db-header-icon    { background: rgba(15,52,96,0.35) !important; }
html.dark-mode .db-fundraisers .db-header-icon { background: rgba(124,58,237,0.18) !important; }
html.dark-mode .db-wrapped .db-header-icon     { background: rgba(79,70,229,0.18) !important; }

/* Dashboard: recent results */
html.dark-mode .recent-result-row {
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .recent-result-row:hover {
  background: var(--pp-surface-2) !important;
}
html.dark-mode .match-teams {
  color: var(--db-text);
}
html.dark-mode .match-teams .team-name.win {
  color: #86efac !important;
}
html.dark-mode .score-display {
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}
html.dark-mode .match-meta .pill {
  background: rgba(255,255,255,0.08) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--db-muted) !important;
}
html.dark-mode .goal-scorers .chip {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--db-text) !important;
}

/* Dashboard: Who's Going panels */
html.dark-mode .whosgoin-panel {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .whosgoin-panel.fixture-panel {
  background: rgba(37,99,235,0.10) !important;
}
html.dark-mode .whosgoin-panel.training-panel {
  background: rgba(22,163,74,0.10) !important;
}
html.dark-mode .whosgoin-panel .fw-bold[style*="color:#0f3460"],
html.dark-mode .whosgoin-panel .fw-bold[style*="color:#14532d"] {
  color: var(--db-text) !important;
}

/* Dashboard: attendance badges (inline styles need specificity) */
html.dark-mode .whosgoin-panel .badge[style*="background:#d1fae5"] {
  background: rgba(22,163,74,0.25) !important;
  color: #86efac !important;
}
html.dark-mode .whosgoin-panel .badge[style*="background:#fef9c3"] {
  background: rgba(234,179,8,0.25) !important;
  color: #fcd34d !important;
}
html.dark-mode .whosgoin-panel .badge[style*="background:#fee2e2"] {
  background: rgba(239,68,68,0.25) !important;
  color: #fca5a5 !important;
}

/* Dashboard: Quick Links */
html.dark-mode .ql-btn {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--db-text) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important;
}
html.dark-mode .ql-btn:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.3) !important;
  color: var(--db-text) !important;
}
html.dark-mode .ql-catalogue-item {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--db-text) !important;
}
html.dark-mode .ql-catalogue-item.selected {
  background: rgba(15,52,96,0.4) !important;
  border-color: rgba(59,130,246,0.5) !important;
  color: #93c5fd !important;
}
html.dark-mode .ql-catalogue-item.selected::after {
  color: #93c5fd !important;
}

/* Dashboard: Fundraiser cards (override inline styles) */
html.dark-mode .db-fundraisers .border.rounded-3[style*="background:#faf5ff"] {
  background: rgba(124,58,237,0.12) !important;
  border-color: rgba(124,58,237,0.25) !important;
}
html.dark-mode .db-fundraisers .fw-bold[style*="color:#4f46e5"] {
  color: #a78bfa !important;
}
html.dark-mode .db-fundraisers .progress[style*="background:#e9d5ff"] {
  background: rgba(124,58,237,0.20) !important;
}
html.dark-mode .db-fundraisers .fw-bold[style*="color:#4f46e5;"] {
  color: #a78bfa !important;
}

/* Dashboard: btn-outline-secondary in dark */
html.dark-mode .db-card .btn-outline-secondary {
  color: var(--db-muted) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .db-card .btn-outline-secondary:hover {
  background: rgba(255,255,255,0.08) !important;
  color: var(--db-text) !important;
}
html.dark-mode .db-card .btn-outline-dark {
  color: var(--db-text) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .db-card .btn-outline-dark:hover {
  background: rgba(255,255,255,0.08) !important;
}

/* Dashboard: trend pills (in results header) */
html.dark-mode .trend-pills {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* 
   TRAINING DASHBOARD dark mode
    */
html.dark-mode {
  --tm-bg:        rgba(30, 36, 51, 0.97);
  --tm-bg-strong: rgba(37, 45, 61, 0.99);
  --tm-stroke:    rgba(255,255,255,0.09);
  --tm-text:      #f1f5f9;
  --tm-muted:     #94a3b8;
}
html.dark-mode .tm-card {
  background: var(--tm-bg) !important;
  border-color: var(--tm-stroke) !important;
  color: var(--tm-text);
}
html.dark-mode .tm-card .card-header {
  background: rgba(255,255,255,0.04) !important;
  border-color: var(--tm-stroke) !important;
  color: var(--tm-text);
}
html.dark-mode .tm-card .card-header h5,
html.dark-mode .tm-card .card-body {
  color: var(--tm-text);
}
html.dark-mode .tm-table {
  background: var(--tm-bg) !important;
  border-color: var(--tm-stroke) !important;
}
html.dark-mode .tm-table thead th {
  background: rgba(255,255,255,0.05) !important;
  border-color: var(--tm-stroke) !important;
  color: var(--tm-muted) !important;
}
html.dark-mode .tm-table tbody td {
  border-color: var(--tm-stroke) !important;
  color: var(--tm-text);
}
html.dark-mode .tm-table tbody tr:hover {
  background: rgba(255,255,255,0.04) !important;
}
html.dark-mode .tm-table tbody tr.table-warning {
  background: linear-gradient(90deg, rgba(245,158,11,0.12), transparent 65%) !important;
}
html.dark-mode .tm-alert {
  background: rgba(245,158,11,0.08) !important;
  border-color: rgba(245,158,11,0.25) !important;
  color: var(--tm-text);
}
html.dark-mode .tm-alert h5 { color: #fde68a; }
html.dark-mode .modal-body { background: var(--pp-surface) !important; color: var(--pp-ink); }

/* 
   PITCHES pages dark mode  all share --panel/--text/--muted
   already overridden globally; add component-specific overrides
    */

/* Shared p-btn and p-title/p-subtitle */
html.dark-mode .p-title    { color: var(--pp-ink) !important; }
html.dark-mode .p-subtitle { color: var(--pp-muted) !important; }
html.dark-mode .p-btn {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .p-btn:hover { color: var(--pp-ink) !important; }
html.dark-mode .p-empty {
  background: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-muted) !important;
}

/* Pitch list */
html.dark-mode .pitch-card {
  background: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .pitch-card-header {
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .pitch-card-name  { color: var(--pp-ink) !important; }
html.dark-mode .pitch-card-loc   { color: var(--pp-muted) !important; }
html.dark-mode .pitch-pill {
  background: var(--pp-surface-3) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-muted) !important;
}
html.dark-mode .pitch-card-img-placeholder { color: rgba(255,255,255,0.10) !important; }

/* Weather dashboard */
html.dark-mode .wx-card {
  background: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .wx-card-head  { border-color: var(--pp-stroke) !important; }
html.dark-mode .wx-card-name  { color: var(--pp-ink) !important; }
html.dark-mode .wx-card-loc   { color: var(--pp-muted) !important; }
html.dark-mode .wx-card-foot  { border-color: var(--pp-stroke) !important; }
html.dark-mode .wx-cell {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .wx-cell .wx-t,
html.dark-mode .wx-cell .wx-temp { color: var(--pp-ink) !important; }
html.dark-mode .wx-cell .wx-rain,
html.dark-mode .wx-cell .wx-wind { color: var(--pp-muted) !important; }
html.dark-mode .wx-cell--danger { background: rgba(239,68,68,0.12) !important; border-color: rgba(239,68,68,0.20) !important; }
html.dark-mode .wx-cell--warn   { background: rgba(251,191,36,0.10) !important; border-color: rgba(251,191,36,0.20) !important; }
html.dark-mode .wx-cell--frost  { background: rgba(147,197,253,0.08) !important; border-color: rgba(147,197,253,0.18) !important; }
html.dark-mode .wx-suitability--ok  { background: rgba(16,185,129,0.08) !important; }
html.dark-mode .wx-suitability--bad { background: rgba(239,68,68,0.08) !important; }
html.dark-mode .wx-empty {
  background: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-muted) !important;
}
html.dark-mode .alert-banner {
  background: rgba(251,191,36,0.06) !important;
  border-color: rgba(251,191,36,0.18) !important;
}
html.dark-mode .alert-banner-text { color: var(--pp-ink) !important; }

/* Threshold list */
html.dark-mode .thr-card {
  background: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .thr-card-head  { border-color: var(--pp-stroke) !important; }
html.dark-mode .thr-team       { color: var(--pp-ink) !important; }
html.dark-mode .thr-row        { border-color: var(--pp-stroke) !important; }
html.dark-mode .thr-label      { color: var(--pp-muted) !important; }
html.dark-mode .thr-val        { color: var(--pp-ink) !important; }
html.dark-mode .thr-card-foot  { border-color: var(--pp-stroke) !important; }
html.dark-mode .thr-edit {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-muted) !important;
}

/* Alert list */
html.dark-mode .alert-card {
  background: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .alert-headline { color: var(--pp-ink) !important; }
html.dark-mode .alert-meta     { color: var(--pp-muted) !important; }

/* Clash report */
html.dark-mode .clash-card {
  background: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
  border-left-color: #ef4444 !important;
}
html.dark-mode .clash-pitch         { color: var(--pp-ink) !important; }
html.dark-mode .clash-booking {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .clash-booking-title { color: var(--pp-ink) !important; }
html.dark-mode .clash-booking-time  { color: var(--pp-muted) !important; }
html.dark-mode .clash-vs            { color: var(--pp-muted) !important; }

/* Pitch calendar  FullCalendar overrides */
html.dark-mode .cal-wrap {
  background: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .cal-filters select {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .fc .fc-toolbar-title       { color: var(--pp-ink) !important; }
html.dark-mode .fc .fc-col-header-cell     { color: var(--pp-muted) !important; }
html.dark-mode .fc .fc-button {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .fc td, html.dark-mode .fc th { border-color: var(--pp-stroke) !important; }
html.dark-mode .fc .fc-scrollgrid          { border-color: var(--pp-stroke) !important; }
html.dark-mode .fc .fc-daygrid-day         { background: transparent; }
html.dark-mode .fc .fc-daygrid-day-number  { color: var(--pp-ink); }
html.dark-mode .fc .fc-timegrid-axis,
html.dark-mode .fc .fc-timegrid-slot-label { color: var(--pp-muted); }
html.dark-mode .fc .fc-list-day-text,
html.dark-mode .fc .fc-list-day-side-text  { color: var(--pp-ink); }
html.dark-mode .fc .fc-list-event-title    { color: var(--pp-ink); }
html.dark-mode .fc-theme-standard .fc-scrollgrid { border-color: var(--pp-stroke) !important; }
html.dark-mode .fc-theme-standard td,
html.dark-mode .fc-theme-standard th      { border-color: var(--pp-stroke) !important; }

/* 
   QUALIFICATION DASHBOARD + FORM dark mode
    */
html.dark-mode {
  --ink:    #f1f5f9;
  --card:   #1e2433;
  --bg:     #141922;
  --border: rgba(255,255,255,0.09);
}
html.dark-mode .metric {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--ink);
}
html.dark-mode .metric .value { color: var(--ink) !important; }
html.dark-mode .metric .icon  { background: var(--pp-surface-2) !important; border-color: var(--border) !important; }
html.dark-mode .soft-card {
  background: var(--card) !important;
  border-color: var(--border) !important;
}
html.dark-mode .soft-card .card-header {
  background: rgba(255,255,255,0.04) !important;
  border-color: var(--border) !important;
}
html.dark-mode .soft-card .card-header h5,
html.dark-mode .soft-card .card-header h6 { color: var(--ink) !important; }
html.dark-mode .soft-card .card-body      { color: var(--ink); }
html.dark-mode .alert-block {
  background: rgba(245,158,11,0.08) !important;
  border-color: rgba(245,158,11,0.22) !important;
}
html.dark-mode .alert-block h6 { color: #fde68a !important; }
html.dark-mode .alert-row {
  background: rgba(255,255,255,0.04) !important;
  border-color: var(--border) !important;
}
html.dark-mode .table thead th { background: var(--pp-surface-2) !important; border-color: var(--border) !important; }
html.dark-mode .badge-expired  { background: rgba(100,116,139,.18) !important; color: #94a3b8 !important; }

/* 
   MATCHPLANS pages dark mode
    */

/* matchplan_list.html  --sx-* vars */
html.dark-mode {
  --sx-text:   #f1f5f9;
  --sx-muted:  #94a3b8;
  --sx-stroke: rgba(255,255,255,0.09);
  --sx-bg:     rgba(30,36,51,0.97);
}
html.dark-mode .section-card {
  background: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .section-card .card-header {
  background: rgba(255,255,255,0.04) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .mp-row-title { color: var(--pp-ink) !important; }
html.dark-mode .mp-sub       { color: var(--pp-muted) !important; }
html.dark-mode .mp-card {
  background: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
}

/* matchplan_detail.html  --card-border / --card-bg / --header-bg */
html.dark-mode {
  --card-border: rgba(255,255,255,0.09);
  --card-bg:     #1e2433;
  --header-bg:   rgba(255,255,255,0.04);
}
html.dark-mode .avail-bar {
  background: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .section-header {
  background: var(--header-bg) !important;
  border-color: var(--card-border) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .section-body   { color: var(--pp-ink); }
html.dark-mode .player-avail-card.unknown {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #94a3b8 !important;
}
html.dark-mode .player-avail-card.present {
  background: rgba(22,163,74,0.10) !important;
  border-color: rgba(22,163,74,0.22) !important;
}
html.dark-mode .player-avail-card.absent {
  background: rgba(220,38,38,0.08) !important;
  border-color: rgba(220,38,38,0.18) !important;
}
html.dark-mode .player-avail-card.late {
  background: rgba(217,119,6,0.10) !important;
  border-color: rgba(217,119,6,0.22) !important;
}
html.dark-mode .rot-table th { color: var(--pp-muted) !important; border-color: var(--pp-stroke) !important; }
html.dark-mode .rot-table td { border-color: var(--pp-stroke) !important; }
html.dark-mode .rot-table tr.absent-row { background: rgba(255,255,255,0.02) !important; }
html.dark-mode .q-off { background: rgba(255,255,255,0.10) !important; color: #64748b !important; }
html.dark-mode .post-match-zone {
  background: rgba(240,253,244,0.04) !important;
  border-color: rgba(191,219,254,0.15) !important;
}
html.dark-mode .post-match-zone h6 { color: #93c5fd !important; }
html.dark-mode .sh-badge { background: rgba(3,105,161,0.18) !important; color: #7dd3fc !important; }

/* match_analysis.html  reuses --ink/--card/--border already set; add analysis-specific */
html.dark-mode .rating-tile {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .rating-label { color: var(--pp-muted) !important; }
html.dark-mode .player-row {
  background: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
}

/* 
   CLUB CALENDAR (club_calendar.html)  full dark mode overrides
   All colours in this template are hardcoded, so every component
   needs an explicit override.
    */

/*  Layout shells  */
html.dark-mode .cal-topbar {
  background: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .cal-topbar h1 { color: var(--pp-ink) !important; }
html.dark-mode .cal-filters {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
}

/*  Buttons  */
html.dark-mode .btn-cal-outline {
  background: var(--pp-surface) !important;
  color: var(--pp-ink) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .btn-cal-outline:hover { background: var(--pp-surface-2) !important; }
html.dark-mode .btn-cal-today {
  background: var(--pp-surface-2) !important;
  color: var(--pp-ink) !important;
  border-color: var(--pp-stroke) !important;
}

/*  View toggle  */
html.dark-mode .view-toggle {
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .view-toggle button {
  background: var(--pp-surface) !important;
  color: var(--pp-muted) !important;
  border-color: transparent !important;
}
html.dark-mode .view-toggle button.active {
  background: #1e40af !important;
  color: #fff !important;
}

/*  Filter chips  */
html.dark-mode .filter-chip {
  background: var(--pp-surface-2) !important;
  color: var(--pp-ink) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .filter-chip.active {
  background: #1e40af !important;
  color: #fff !important;
  border-color: #1e40af !important;
}

/*  Period nav  */
html.dark-mode .period-nav button {
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink) !important;
  background: transparent !important;
}
html.dark-mode .period-nav button:hover { background: var(--pp-surface-2) !important; }
html.dark-mode .period-label { color: var(--pp-ink) !important; }

/*  Action queue  */
html.dark-mode .action-queue {
  background: rgba(245,158,11,0.08) !important;
  border-color: rgba(253,230,138,0.15) !important;
}
html.dark-mode .action-chip.rsvp {
  background: rgba(254,243,199,0.08) !important;
  color: #fbbf24 !important;
  border-color: rgba(253,230,138,0.2) !important;
}
html.dark-mode .action-chip.payment {
  background: rgba(254,226,226,0.08) !important;
  color: #fca5a5 !important;
  border-color: rgba(252,165,165,0.2) !important;
}
html.dark-mode .action-chip.volunteer {
  background: rgba(219,234,254,0.08) !important;
  color: #93c5fd !important;
  border-color: rgba(147,197,253,0.2) !important;
}

/*  Month grid  */
html.dark-mode .month-grid { background: var(--pp-stroke) !important; }
html.dark-mode .month-header-row {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .month-header-cell { color: var(--pp-muted) !important; }
html.dark-mode .month-cell {
  background: var(--pp-surface) !important;
}
html.dark-mode .month-cell.other-month { background: var(--pp-surface-2) !important; }
html.dark-mode .month-cell.today { background: rgba(30,64,175,0.12) !important; }
html.dark-mode .month-cell-date { color: var(--pp-ink) !important; }
html.dark-mode .more-events { color: var(--pp-muted) !important; }
html.dark-mode .more-events:hover { color: #60a5fa !important; }

/*  Week view  */
html.dark-mode .week-header {
  background: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .week-header-cell .wh-day { color: var(--pp-muted) !important; }
html.dark-mode .week-header-cell .wh-date { color: var(--pp-ink) !important; }
html.dark-mode .time-slot-label { color: var(--pp-muted) !important; }
html.dark-mode .week-col { border-color: var(--pp-stroke) !important; }
html.dark-mode .week-hour-line { border-color: var(--pp-stroke) !important; }

/*  Agenda view  */
html.dark-mode .agenda-date-header {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-muted) !important;
}
html.dark-mode .agenda-date-header.today {
  background: rgba(30,64,175,0.12) !important;
  color: #60a5fa !important;
}
html.dark-mode .cal-main,
html.dark-mode .cal-body,
html.dark-mode .cal-page,
html.dark-mode .agenda-group,
html.dark-mode #calMain { background: var(--pp-bg) !important; }
html.dark-mode .agenda-event {
  background: var(--pp-bg) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .agenda-event:hover { background: var(--pp-surface-2) !important; }
html.dark-mode .agenda-event .ae-time { color: var(--pp-ink) !important; }
html.dark-mode .agenda-event .ae-title { color: var(--pp-ink) !important; }
html.dark-mode .agenda-event .ae-meta { color: var(--pp-muted) !important; }
html.dark-mode .badge-action {
  background: rgba(254,243,199,0.1) !important;
  color: #fbbf24 !important;
}
html.dark-mode .badge-cancelled {
  background: rgba(254,226,226,0.1) !important;
  color: #fca5a5 !important;
}
html.dark-mode .badge-volunteer {
  background: rgba(219,234,254,0.1) !important;
  color: #93c5fd !important;
}

/*  Event drawer  */
html.dark-mode .event-drawer {
  background: var(--pp-surface) !important;
  box-shadow: -4px 0 24px rgba(0,0,0,0.4) !important;
}
html.dark-mode .drawer-header {
  background: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .drawer-title { color: var(--pp-ink) !important; }
html.dark-mode .drawer-meta { color: var(--pp-muted) !important; }
html.dark-mode .drawer-close { color: var(--pp-muted) !important; }
html.dark-mode .drawer-close:hover {
  background: var(--pp-surface-2) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .drawer-section-title { color: var(--pp-muted) !important; }

/*  RSVP buttons in drawer  */
html.dark-mode .rsvp-btn {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .rsvp-row .child-name { color: var(--pp-ink) !important; }
html.dark-mode .att-chip.no-resp {
  background: var(--pp-surface-2) !important;
  color: var(--pp-muted) !important;
}

/*  Volunteer / audit in drawer  */
html.dark-mode .volunteer-role {
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .vol-role-name { color: var(--pp-ink) !important; }
html.dark-mode .vol-slots { color: var(--pp-muted) !important; }
html.dark-mode .vol-progress { background: var(--pp-surface-2) !important; }
html.dark-mode .audit-entry {
  border-color: var(--pp-stroke) !important;
  color: var(--pp-muted) !important;
}
html.dark-mode .audit-entry strong { color: var(--pp-ink) !important; }

/*  Create/edit modal  */
html.dark-mode .modal-box {
  background: var(--pp-surface) !important;
}
html.dark-mode .modal-header {
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .modal-header h3 { color: var(--pp-ink) !important; }
html.dark-mode .modal-footer {
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .form-group label { color: var(--pp-ink) !important; }
html.dark-mode .modal-box .form-control {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink) !important;
}

/*  Search input in topbar  */
html.dark-mode .cal-topbar .form-control {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .cal-topbar .form-control::placeholder { color: var(--pp-muted) !important; }

/*  Type filter select  */
html.dark-mode #typeFilter {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink) !important;
}

/*  Personal event badge  */
html.dark-mode .personal-badge {
  background: var(--pp-surface-2) !important;
  color: var(--pp-muted) !important;
}

/*  Divider lines in filters bar  */
html.dark-mode .cal-filters span[style*="background:#e5e7eb"] {
  background: var(--pp-stroke) !important;
}

/* ===============================================================
   DARK MODE — PARENT PORTAL
   Covers parent_dashboard.html, parent_children.html and other
   parent-facing pages that still carry hardcoded colours.
   =============================================================== */

/* Page wrappers */
html.dark-mode .children-page,
html.dark-mode .parent-portal-shell {
  background: var(--pp-bg) !important;
}

/* Section / event / stat cards */
html.dark-mode .section-card,
html.dark-mode .event-card,
html.dark-mode .stat-card {
  background: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .section-card .card-header,
html.dark-mode .event-card .card-header {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .section-card .card-body,
html.dark-mode .event-card .card-body,
html.dark-mode .stat-card .card-body {
  background: var(--pp-surface) !important;
  color: var(--pp-ink) !important;
}

/* Onboarding shell body */
html.dark-mode .onboarding-body {
  background: var(--pp-surface) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .onboarding-shell {
  box-shadow: 0 18px 45px rgba(0,0,0,0.45) !important;
}

/* Timeline steps */
html.dark-mode .timeline-step {
  background: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .timeline-step.completed {
  background: rgba(16,185,129,0.10) !important;
  border-color: rgba(16,185,129,0.3) !important;
}
html.dark-mode .timeline-step p,
html.dark-mode .timeline-step h4 {
  color: var(--pp-ink) !important;
}

/* Support cards */
html.dark-mode .support-card {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .support-card h5 { color: var(--pp-ink) !important; }
html.dark-mode .support-card p { color: var(--pp-muted) !important; }

/* Attendance rows */
html.dark-mode .attendance-row {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .attendance-row .child-name { color: var(--pp-ink) !important; }

/* Attendance pills — keep status colours, just adjust neutral */
html.dark-mode .attendance-pill.pending {
  background: rgba(100,116,139,0.18) !important;
  color: var(--pp-muted) !important;
}
html.dark-mode .attendance-link.secondary {
  background: var(--pp-surface-3) !important;
  color: var(--pp-muted) !important;
}

/* Footer links */
html.dark-mode .footer-link {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink) !important;
}
html.dark-mode .footer-link:hover {
  background: var(--pp-surface-3) !important;
}
html.dark-mode .footer-link.danger {
  background: rgba(185,28,28,0.12) !important;
  border-color: rgba(220,38,38,0.25) !important;
  color: #fca5a5 !important;
}
html.dark-mode .footer-links {
  border-color: var(--pp-stroke) !important;
}

/* Profile prompt */
html.dark-mode .profile-prompt {
  background: var(--pp-surface-2) !important;
  border-color: rgba(37,99,235,0.35) !important;
}

/* KPI tiles */
html.dark-mode .kpi-tile {
  background: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .kpi-tile .kpi-value { color: var(--pp-ink) !important; }
html.dark-mode .kpi-tile .kpi-label { color: var(--pp-muted) !important; }
html.dark-mode .kpi-tile .kpi-sub { color: var(--pp-muted) !important; }

/* Performance rows (children page) */
html.dark-mode .perf-row-parent {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
}

/* Soft/recent boxes (children page) */
html.dark-mode .soft-box {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .recent-box {
  background: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
}

/* Children page card headers */
html.dark-mode .children-page .card {
  background: var(--pp-surface) !important;
}
html.dark-mode .children-page .card-footer {
  background: var(--pp-surface) !important;
  border-color: var(--pp-stroke) !important;
}
html.dark-mode .children-page .card-header.bg-light {
  background: var(--pp-surface-2) !important;
  color: var(--pp-ink) !important;
}

/* Form inputs inside children page */
html.dark-mode .children-page input[type="text"],
html.dark-mode .children-page input[type="email"],
html.dark-mode .children-page input[type="tel"],
html.dark-mode .children-page input[type="number"],
html.dark-mode .children-page input[type="date"],
html.dark-mode .children-page select,
html.dark-mode .children-page textarea {
  background: var(--pp-surface-2) !important;
  border-color: var(--pp-stroke) !important;
  color: var(--pp-ink) !important;
}

/* Progress bars background */
html.dark-mode .children-page .progress {
  background: var(--pp-surface-3) !important;
}

/* Quick action buttons */
html.dark-mode .quick-action-btn {
  border-color: var(--pp-stroke) !important;
  background: var(--pp-surface) !important;
  color: var(--pp-ink) !important;
}

/* Champion row in league table */
html.dark-mode .table tbody tr.champion-row {
  background: linear-gradient(90deg, rgba(245,158,11,0.12), rgba(245,158,11,0.04)) !important;
}

/* Inline bg-white / bg-light fixes on parent portal cards */
html.dark-mode [style*="background: #fff"],
html.dark-mode [style*="background:#fff"],
html.dark-mode [style*="background: white"],
html.dark-mode [style*="background:white"] {
  background: var(--pp-surface) !important;
}
html.dark-mode [style*="background: #f8fafc"],
html.dark-mode [style*="background:#f8fafc"] {
  background: var(--pp-surface-2) !important;
}
html.dark-mode [style*="color: #0f172a"],
html.dark-mode [style*="color:#0f172a"],
html.dark-mode [style*="color: #1e293b"],
html.dark-mode [style*="color:#1e293b"] {
  color: var(--pp-ink) !important;
}
html.dark-mode [style*="color: #64748b"],
html.dark-mode [style*="color:#64748b"],
html.dark-mode [style*="color: #475569"],
html.dark-mode [style*="color:#475569"] {
  color: var(--pp-muted) !important;
}
html.dark-mode [style*="border-color: rgba(2,6,23"],
html.dark-mode [style*="border-color:rgba(2,6,23"],
html.dark-mode [style*="border: 1px solid rgba(2,6,23"],
html.dark-mode [style*="border:1px solid rgba(2,6,23"] {
  border-color: var(--pp-stroke) !important;
}

/* PP Header - always dark so no dark mode override needed */
html.dark-mode .pp-header {
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
}
html.dark-mode .pp-header-sub {
  color: rgba(255,255,255,0.6);
}


/* ═══════════════════════════════════════════════════════════════════════
   PP MOTION SYSTEM — the one consistent animation language for the app.
   1) .pp-loader        the Sprout leaf loader (replaces Bootstrap spinners)
   2) #main-content     subtle page fade-in on every navigation
   Everything respects prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Sprout leaf loader ──
   THE real brand mark (static/img/sprout-mark-white.png used as a CSS mask,
   painted with currentColor) gently growing from the ground. Pixel-identical
   to the logo — no redrawn shapes. Sizes: default 44px, --lg 64px, --sm 18px
   inline (inherits the button's text colour). */
.pp-loader {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--club-primary, #16a34a);
}
.pp-loader-mark {
  display: block; width: 44px; height: 44px;
  background: currentColor;
  -webkit-mask: url('/static/img/sprout-mark-white.png') center / contain no-repeat;
          mask: url('/static/img/sprout-mark-white.png') center / contain no-repeat;
  transform-origin: 50% 94%;
  animation: pplGrow 1.4s cubic-bezier(0.45, 0.05, 0.35, 1) infinite;
}
.pp-loader--lg .pp-loader-mark { width: 64px; height: 64px; }
.pp-loader--sm { display: inline-flex; flex-direction: row; gap: 6px; color: inherit; vertical-align: -0.35em; }
.pp-loader--sm .pp-loader-mark { width: 18px; height: 18px; }
.pp-loader-label {
  font-size: 0.82rem; font-weight: 700; color: var(--pp-muted, #64748b);
  letter-spacing: 0.01em;
}
.pp-loader--sm .pp-loader-label { font-size: inherit; color: inherit; font-weight: inherit; }
@keyframes pplGrow {
  0%   { transform: scale(0.82); opacity: 0.5; }
  50%  { transform: scale(1);    opacity: 1; }
  100% { transform: scale(0.82); opacity: 0.5; }
}

/* ── Page entrance: one subtle, consistent fade on every page ── */
@keyframes ppPageIn { from { opacity: 0; } to { opacity: 1; } }
#main-content { animation: ppPageIn 0.22s ease-out both; }

/* Optional utility for cards/sections that want the same language. */
@keyframes ppFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pp-anim { animation: ppFadeUp 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

@media (prefers-reduced-motion: reduce) {
  #main-content, .pp-anim { animation: none !important; opacity: 1; }
  .pp-loader-mark { animation: none !important; transform: scale(1); opacity: 1; }
}


/* ── Working overlay ──
   For a POST that takes seconds rather than milliseconds because it is sending
   email: the page dims, the real sprout mark grows in brand gold, and the
   steps the server is working through are listed underneath.

   Deliberately NOT a progress bar. Nothing on the page knows how far through
   the send the server is, and a bar that fills on a timer is a claim the page
   cannot support. The steps say what is being done, in the order the server
   does it, and none of them is ever marked finished.

   Dark navy on gold rather than the page's own colours: it is the same frame
   as the launch splash and the navigation overlay, so it reads as the app
   working rather than as a card that has appeared on the form.

   .pp-working uses display:flex, so the hidden attribute has to be given back
   its meaning explicitly -- an author display value beats the UA sheet. */
.pp-working {
  position: fixed; inset: 0; z-index: 99998;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(11, 18, 32, 0.92);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.pp-working[hidden] { display: none !important; }
.pp-working__box {
  width: 100%; max-width: 320px;
  text-align: center; color: #fff;
}
.pp-working__mark {
  display: block; width: 56px; height: 56px; margin: 0 auto 18px;
  background: #f7c500;
  -webkit-mask: url('/static/img/sprout-mark-white.png') center / contain no-repeat;
          mask: url('/static/img/sprout-mark-white.png') center / contain no-repeat;
  transform-origin: 50% 94%;
  animation: pplGrow 1.4s cubic-bezier(0.45, 0.05, 0.35, 1) infinite;
  filter: drop-shadow(0 0 12px rgba(247, 197, 0, 0.35));
}
.pp-working__t {
  margin: 0 0 14px; font-size: 1.05rem; font-weight: 800; line-height: 1.3;
}
.pp-working__steps {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 9px;
  text-align: left;
}
/* The step being worked on is white; the rest are dim. No ticks: the page is
   not told when a step finishes, so it must not draw one as finished. */
.pp-working__step {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.9rem; font-weight: 600; line-height: 1.35;
  color: rgba(255, 255, 255, 0.42);
  transition: color 0.25s ease;
}
.pp-working__step::before {
  content: ''; flex: 0 0 auto;
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}
.pp-working__step.is-now { color: #fff; }
.pp-working__step.is-now::before {
  background: #f7c500;
  box-shadow: 0 0 0 4px rgba(247, 197, 0, 0.18);
}

/* Steps the page has told the overlay are finished (ppWorkingStep and
   ppWorkingDone in partials/pp_working.html). Only a page that drives the
   work a request at a time sets these; the timer alone never does, because
   it does not know. */
.pp-working__step.is-done {
  color: rgba(255, 255, 255, 0.72);
}
.pp-working__step.is-done::before {
  content: '\2713';
  width: 7px;
  height: auto;
  border-radius: 0;
  background: none;
  text-align: center;
  overflow: visible;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
  color: #f7c500;
  box-shadow: none;
}
.pp-working.is-done .pp-working__mark {
  animation: none;
  transform: scale(1);
}
.pp-working.is-done .pp-working__t {
  color: #f7c500;
}
/* Left, with the steps. Centred under a left-aligned list it read as an
   indent nobody had asked for. */
.pp-working__note {
  margin: 18px 0 0; text-align: left;
  font-size: 0.78rem; line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  .pp-working__mark { animation: none; transform: scale(1); }
  .pp-working__step { transition: none; }
}

/* ── Page-to-page: cross-document View Transitions ──
   Chrome 126+ / Safari 18.2+ crossfade whole page navigations, so the
   server-rendered app moves like a SPA — no white flash between pages.
   Older browsers ignore this and keep the #main-content fade below. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.16s; animation-timing-function: ease; }
@supports (view-transition-name: root) {
  /* The document already crossfades — don't double-fade the content. */
  #main-content { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}


/* ── Tactile press feedback ──
   Every control compresses slightly under the finger — the instant physical
   response that makes taps feel native, before the page even responds. */
.pp-btn, .btn, .composer-action-btn, .feed-action-btn, .dropdown-item,
.ck-card, a.sp-tile, .cd-edit, .np-item, .pp-drawer-link, .pp-drawer-tools-btn {
  -webkit-tap-highlight-color: transparent;
}
.pp-btn:active, .btn:active, .composer-action-btn:active, .feed-action-btn:active,
.ck-card:active, a.sp-tile:active, .cd-edit:active, .pp-drawer-tools-btn:active {
  transform: scale(0.97);
  transition: transform 0.08s ease;
}
@media (prefers-reduced-motion: reduce) {
  .pp-btn:active, .btn:active, .composer-action-btn:active, .feed-action-btn:active,
  .ck-card:active, a.sp-tile:active, .cd-edit:active, .pp-drawer-tools-btn:active {
    transform: none;
  }
}

/* =========================================================================
   MOBILE FOUNDATIONS (backlog Phase 0)
   Five shared primitives that replace the per-page re-inventions. Everything
   here is token-driven -- pages must not redeclare these colours locally.
     .pp-page       the one page container (P0-5)
     .pp-page-head  the one page header (P0-2)
     .pp-collapse   the one disclosure (P0-3)
     .pp-tile-grid  equal-height tiles (P0-4)
     .pp-btn-group  uniform, wrapping button rows (P0-4)
   The pass/fail bar for all of it is 360px wide.
   ========================================================================= */

/* -- P0-5  The page container --------------------------------------------
   Replaces `container-fluid px-4` on <main>. That combination spent a flat
   48px of gutter at every width; on a 360px phone that is 13% of the screen
   handed to empty margin. This scales the gutter with the viewport instead. */
.pp-page {
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(12px, 4vw, 24px);
  --bs-gutter-x: 1.5rem;          /* rows still expect the Bootstrap gutter */
}
/* A container nested inside an already-padded page just double-pads. On a
   phone that is another 24px gone, so below the desktop breakpoint the inner
   one stops contributing gutter. */
@media (max-width: 991.98px) {
  .pp-page .container-fluid,
  .pp-page .container { padding-inline: 0; max-width: none; }
}

/* -- P0-4  Buttons: one size everywhere, and a row that wraps -------------
   .pp-btn ships `white-space:nowrap`, which sets an unbreakable min-content
   floor -- a long label simply pushes off the screen. Below the phone
   breakpoint the label wraps and the box is allowed to shrink instead. */
@media (max-width: 575.98px) {
  .pp-btn {
    white-space: normal;
    min-width: 0;
    max-width: 100%;
    text-align: center;
    overflow-wrap: anywhere;
  }
  /* 44px is the tap-target floor, applied to every variant so a row of mixed
     buttons lines up on one baseline. */
  .pp-btn, .pp-btn-sm, .pp-btn-lg { min-height: 44px; }
  .pp-table thead th { white-space: normal; }
}
/* A row of actions: uniform height, wraps to a grid rather than overflowing. */
.pp-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}
.pp-btn-group > .pp-btn,
.pp-btn-group > .btn,
.pp-btn-group > form > .pp-btn,
.pp-btn-group > form > .btn { flex: 1 1 auto; min-width: 0; }
.pp-btn-group > form { display: contents; }
/* One per row on a phone. Two-up looks tidier until a label wraps: at ~147px
   "New purchase request" takes two lines and its neighbours do not, so the row
   comes out 77px / 77px / 44px -- exactly the ragged buttons this backlog is
   about. Full width is uniform whatever the labels say, which is the only
   version that holds across hundreds of pages. Use .pp-btn-group-2up where the
   labels are genuinely short (Save / Cancel, Yes / No). */
@media (max-width: 575.98px) {
  .pp-btn-group > .pp-btn,
  .pp-btn-group > .btn,
  .pp-btn-group > form > .pp-btn,
  .pp-btn-group > form > .btn { flex: 1 1 100%; }
  .pp-btn-group.pp-btn-group-2up > .pp-btn,
  .pp-btn-group.pp-btn-group-2up > .btn,
  .pp-btn-group.pp-btn-group-2up > form > .pp-btn,
  .pp-btn-group.pp-btn-group-2up > form > .btn { flex: 1 1 calc(50% - 8px); }
}

/* -- P0-4  Tiles: equal height in a row, text truncates instead of spilling
   Retires the hand-added `h-100` workarounds. Grid rows are equal-height by
   default, which is the whole point of using grid here. */
.pp-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  /* Equal rows, not just equal columns: with plain auto rows a grid that wraps
     onto two lines gives the second line its own height, so the last tile ends
     up a few pixels shorter than the rest. */
  grid-auto-rows: 1fr;
  gap: 10px;
}
.pp-tile-grid-sm { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
.pp-tile-grid > * { min-width: 0; height: 100%; }
.pp-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  height: 100%;
  padding: 12px;
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-stroke, #e5e7eb);
  border-radius: var(--pp-r-lg, 16px);
  text-decoration: none;
  color: inherit;
}
a.pp-tile:hover { text-decoration: none; color: inherit; border-color: var(--pp-accent); }
.pp-tile-value {
  font-size: 1.35rem; font-weight: 900; line-height: 1.05;
  color: var(--pp-ink, #0f172a);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.pp-tile-label {
  font-size: .72rem; font-weight: 700; line-height: 1.25;
  color: var(--pp-muted, #64748b);
  /* Two lines, then ellipsis -- never spills out of the tile. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pp-tile-sub { font-size: .68rem; color: var(--pp-muted, #64748b); overflow-wrap: anywhere; }
.pp-tile-icon { font-size: 1rem; line-height: 1; margin-bottom: 3px; color: var(--pp-accent-text, #2563eb); }

/* -- P0-2  The page header -----------------------------------------------
   Modelled on templates/training/session_detail.html, the calm header Ben
   signed off. Deliberately has no back or home slot: base.html already ships
   the floating back button, the bottom-nav home and the navbar brand, so a
   per-page copy is the third one on screen. */
.pp-page-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
  min-width: 0;
}
.pp-page-head-main { flex: 1 1 auto; min-width: 0; }
.pp-page-head-kicker {
  font-size: .64rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--pp-muted, #64748b);
  margin: 0 0 3px; overflow-wrap: anywhere;
}
.pp-page-head-title {
  font-size: 1.15rem; font-weight: 900; letter-spacing: -.02em;
  color: var(--pp-ink, #0f172a); line-height: 1.2; margin: 0;
  overflow-wrap: anywhere; text-wrap: balance;
}
.pp-page-head-sub {
  font-size: .8rem; color: var(--pp-muted, #64748b);
  margin: 4px 0 0; line-height: 1.35; overflow-wrap: anywhere;
}
.pp-page-head-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
@media (min-width: 576px) { .pp-page-head-title { font-size: 1.4rem; } }

/* -- P0-3  The disclosure ------------------------------------------------
   Native <details>, so the open/closed state, keyboard handling and screen
   reader semantics are free and it still works if the JS never loads. The
   chevron is pure CSS. Replaces five separate hand-rolled collapse patterns. */
.pp-collapse {
  background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-stroke, #e5e7eb);
  border-radius: var(--pp-r-lg, 16px);
  overflow: hidden;
  margin-bottom: 10px;
}
.pp-collapse-sum {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 14px; cursor: pointer; list-style: none;
  min-height: 44px;                      /* tap target */
  -webkit-tap-highlight-color: transparent;
}
.pp-collapse-sum::-webkit-details-marker { display: none; }
.pp-collapse-sum:hover { background: var(--pp-surface-2, #f8fafc); }
.pp-collapse-sum:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: -2px; }
.pp-collapse[open] > .pp-collapse-sum { border-bottom: 1px solid var(--pp-stroke, #e5e7eb); }
.pp-collapse-title {
  flex: 1 1 auto; min-width: 0;
  font-size: .9rem; font-weight: 800; line-height: 1.25;
  color: var(--pp-ink, #0f172a); overflow-wrap: anywhere;
}
.pp-collapse-title small { display: block; font-size: .72rem; font-weight: 600; color: var(--pp-muted, #64748b); }
.pp-collapse-chev {
  flex: 0 0 auto; color: var(--pp-muted, #64748b); font-size: .72rem;
  transition: transform .18s var(--pp-ease, ease);
}
.pp-collapse[open] > .pp-collapse-sum .pp-collapse-chev { transform: rotate(180deg); }
.pp-collapse-body { padding: 12px 14px 14px; }
.pp-collapse-body > :last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .pp-collapse-chev { transition: none; } }

/* The right-hand status indicator: action required / complete / neutral. */
.pp-status {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: .68rem; font-weight: 900; letter-spacing: .01em; white-space: nowrap;
}
.pp-status i { font-size: .66rem; }
.pp-status-action  { background: rgba(245,158,11,.16); color: #b45309; }
.pp-status-done    { background: rgba(16,185,129,.14); color: #047857; }
.pp-status-neutral { background: color-mix(in srgb, var(--pp-ink, #0f172a) 7%, transparent); color: var(--pp-muted, #64748b); }
.pp-status-danger  { background: rgba(239,68,68,.14); color: #b91c1c; }
/* Below 380px the label alone eats the row, so it collapses to its icon. */
@media (max-width: 379.98px) {
  .pp-status-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pp-status { padding: 4px 7px; }
}

/* Expand-all / collapse-all control that pairs with .pp-collapse. */
.pp-collapse-all {
  background: none; border: 0; padding: 4px 8px;
  font-size: .76rem; font-weight: 800; color: var(--pp-accent-text, #8a6e00);
  /* 44px, not the 32px it started at: it is a real control on a phone and the
     backlog's tap-target floor applies to text buttons too. */
  cursor: pointer; min-height: 44px; display: inline-flex; align-items: center;
}

/* -- P0-5  Dev-only overflow guard ---------------------------------------
   Painted by static/js/pp-overflow-guard.js, which only runs when DEBUG is on. */
[data-pp-overflow] { outline: 2px dashed #ef4444 !important; outline-offset: -2px; }

/* -- Calendar-sync options -----------------------------------------------
   Lifted out of templates/calendar_events/_cal_sync_options.html, which is
   included by the parent dashboard (v2), the coach dashboard and the club
   calendar page (both still v1). It lives here rather than in sprout-ui.css
   because app.css is the one stylesheet loaded by both shells, so a single
   copy covers all three. When the last of those surfaces moves to base_v2,
   re-skin the partial on s-* components and delete this block. */
.ppcal-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px;
  padding: 11px 12px; margin: 0 0 8px;
  border: 1px solid var(--pp-stroke, #e6e8ec); border-radius: 12px;
  background: var(--pp-surface, #fff); color: var(--pp-ink, #0f172a);
  font-size: .88rem; font-weight: 700; text-decoration: none; cursor: pointer; text-align: left;
}
.ppcal-opt i { width: 20px; text-align: center; font-size: 1.05rem; }
.ppcal-opt:active { transform: translateY(1px); }
.ppcal-steps {
  border: 1px solid var(--pp-stroke, #e6e8ec); border-radius: 12px;
  padding: 11px 13px; margin: 0 0 8px;
  background: var(--pp-surface-2, #f6f8fa); font-size: .84rem; color: var(--pp-ink, #0f172a);
}
.ppcal-steps-t { font-weight: 800; color: #15803d; margin-bottom: 6px; }
.ppcal-steps ol { margin: 0; padding-left: 20px; }
.ppcal-steps li { margin-bottom: 4px; line-height: 1.45; }
.ppcal-steps a { font-weight: 700; }
.ppcal-copy { display: flex; gap: 6px; margin: 2px 0 6px; }
/* The link box and its Copy button are the whole point of this panel on
   Android, where the Google route is copy-and-paste. They were 36px. */
.ppcal-copy input {
  flex: 1; min-width: 0; min-height: 44px; font-size: .78rem; padding: 8px 10px;
  border: 1px solid var(--pp-stroke, #e6e8ec); border-radius: 10px;
  background: var(--pp-surface-2, #f6f8fa); color: var(--pp-muted, #64748b);
}
.ppcal-copy button {
  flex-shrink: 0; min-height: 44px; font-size: .8rem; font-weight: 800; padding: 8px 13px;
  border: none; border-radius: 10px; background: var(--club-primary, #0D1B2A); color: #fff; cursor: pointer;
}
.ppcal-note { font-size: .72rem; color: var(--pp-muted, #64748b); }

html.dark-mode .ppcal-opt { background: #1e2433; border-color: rgba(255,255,255,.12); color: #f1f5f9; }
html.dark-mode .ppcal-steps { background: #252d3d; border-color: rgba(255,255,255,.12); color: #f1f5f9; }
html.dark-mode .ppcal-copy input { background: #252d3d; border-color: rgba(255,255,255,.12); color: #94a3b8; }

/* -- Sponsor strip --------------------------------------------------------
   templates/club/_sponsor_strip.html, included by the parent dashboard (v2)
   and the coach dashboard (v1). Here rather than sprout-ui.css for the same
   reason as .ppcal-* above; re-skin as an s-* component once both are v2. */
.sp-strip {
  padding: 14px 16px; background: var(--pp-surface, #fff);
  border: 1px solid var(--pp-stroke, rgba(15,23,42,.08));
  border-radius: 16px; margin: 14px 0; box-shadow: 0 4px 14px rgba(2,6,23,.04);
}
.sp-strip-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sp-strip-label { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--pp-muted, #64748b); }
.sp-strip-more { font-size: .76rem; font-weight: 700; color: #16a34a; text-decoration: none; white-space: nowrap; }
.sp-strip-more:hover { text-decoration: underline; }

.sp-strip-feature { display: flex; align-items: center; gap: 12px; }
.sp-strip-flogo {
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: 12px;
  background: var(--pp-surface-2, #f6f8fa); border: 1px solid var(--pp-stroke, rgba(15,23,42,.06));
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.sp-strip-flogo img { max-width: 80%; max-height: 80%; object-fit: contain; }
.sp-strip-fini { font-weight: 900; font-size: 1.3rem; color: #16a34a; }
.sp-strip-fbody { flex: 1; min-width: 0; }
.sp-strip-fname {
  font-weight: 800; color: var(--pp-ink, #0f172a); font-size: .98rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-strip-ftier { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #d97706; }
.sp-strip-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.sp-strip-act {
  width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, #16a34a 10%, transparent); color: #15803d; font-size: .85rem;
  text-decoration: none; transition: background .15s;
}
.sp-strip-act:hover { background: color-mix(in srgb, #16a34a 18%, transparent); color: #14532d; }

.sp-strip-logos {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--pp-stroke, rgba(15,23,42,.06));
}
.sp-strip-item { display: inline-flex; align-items: center; }
.sp-strip-item img { height: 26px; max-width: 100px; object-fit: contain; filter: grayscale(15%); opacity: .9; transition: opacity .15s, filter .15s; }
.sp-strip-item:hover img { filter: none; opacity: 1; }
.sp-strip-name { font-weight: 700; font-size: .82rem; color: var(--pp-muted, #64748b); }

/* -- Birthday cake card ---------------------------------------------------
   templates/includes/birthday_popup.html, shown on both dashboards on the day.
   Here rather than sprout-ui.css for the same reason as .sp-strip-* above. */
.bdaypop {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff;
  background: linear-gradient(120deg, #ff6ec4 0%, #7873f5 55%, #4ade80 100%); border-radius: 16px;
  padding: 12px 14px; margin: 0 0 14px; box-shadow: 0 8px 24px rgba(120,115,245,.30);
  position: relative; overflow: hidden; animation: bdayPopIn .5s cubic-bezier(.2,.9,.3,1.25);
}
@keyframes bdayPopIn { from { transform: translateY(-10px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.bdaypop-cake { font-size: 30px; line-height: 1; flex-shrink: 0; animation: bdayWiggle 1.4s ease-in-out infinite; }
@keyframes bdayWiggle { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg) translateY(-2px); } }
.bdaypop-txt { flex: 1; min-width: 0; line-height: 1.25; }
.bdaypop-txt b { display: block; font-size: .98rem; font-weight: 900; }
.bdaypop-txt span { font-size: .8rem; opacity: .95; }
.bdaypop-x {
  flex-shrink: 0; background: rgba(255,255,255,.25); border: 0; color: #fff; width: 26px; height: 26px;
  border-radius: 50%; font-size: 1.15rem; line-height: 1; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) { .bdaypop, .bdaypop-cake { animation: none; } }
/* The v2 shell floats the drawer button over the top-right of whatever comes
   first on the page. On both dashboards that is this card, so it stops short of
   the button — otherwise the circle lands squarely on the dismiss × and neither
   one is tappable. */
.s-v2 .bdaypop { margin-right: 52px; }

/* -- Explore Sprout: the feature tour ------------------------------------
   templates/includes/setup_tour.html, included by BOTH shells. Here rather
   than sprout-ui.css for the same reason as .sp-strip-* above: the partial is
   shared with v1 pages, which never load sprout-ui.css. It moved out of
   base.html's <style> block when base_v2 started including it — a v2 page may
   not carry styling of its own, and that rule reaches partials too. */
#sgBtn {
  position: fixed;
  bottom: calc(72px + env(safe-area-inset-bottom));
  right: 16px;
  z-index: 8500;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(16,185,129,.45);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  transition: transform .2s, box-shadow .2s;
}
#sgBtn:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(16,185,129,.55); }
#sgBadge {
  position: absolute;
  top: -3px; right: -3px;
  background: #f59e0b;
  color: #fff;
  border-radius: 50%;
  width: 18px; height: 18px;
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #030d07;
}
#sgPanel {
  position: fixed;
  bottom: 144px;
  right: 16px;
  z-index: 8499;
  width: 340px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
  background: #0f1a14;
  border: 1px solid rgba(16,185,129,.25);
  border-radius: 20px;
  box-shadow: 0 16px 48px rgba(0,0,0,.55);
  transform: scale(.9) translateY(20px);
  opacity: 0;
  pointer-events: none;
  transform-origin: bottom right;
  transition: transform .2s, opacity .2s;
}
@media (max-width: 600px) {
  #sgPanel { bottom: calc(136px + env(safe-area-inset-bottom)); right: 10px; left: 10px; width: auto; max-width: 100%; }
  #sgBtn   { right: 12px; }
}
/* Snooze context menu */
#sgContextMenu {
  position: fixed; z-index: 9000;
  background: #1a2035; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px;
  padding: 4px 0; min-width: 170px; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
#sgContextMenu button {
  display: block; width: 100%; padding: 10px 16px; background: none; border: none;
  color: rgba(255,255,255,0.8); font-size: 0.85rem; text-align: left; cursor: pointer;
  transition: background 0.15s;
}
#sgContextMenu button:hover { background: rgba(255,255,255,0.08); color: #fff; }
#sgContextMenu button.danger { color: #f87171; }
#sgPanel.open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
/* The tour's own hide flag. It used to be an inline style="display:none" plus
   JS writing el.style.display, which the house-style gate forbids on any page
   the partial reaches. A class does both jobs and the element keeps its own
   display value when it comes back. */
.sg-hidden { display: none !important; }
.sg-header {
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.sg-header-row { display: flex; align-items: center; justify-content: space-between; }
.sg-x {
  background: none; border: none; color: rgba(255,255,255,.4);
  font-size: 1.1rem; cursor: pointer; padding: 4px;
  min-width: 44px; min-height: 44px;
}
.sg-title { font-size: 1rem; font-weight: 800; color: #fff; margin: 0; }
.sg-subtitle { font-size: .78rem; color: rgba(255,255,255,.45); margin: 3px 0 0; }
.sg-progress-track {
  background: rgba(255,255,255,.08);
  border-radius: 99px;
  height: 5px;
  margin-top: 12px;
  overflow: hidden;
}
.sg-progress-fill {
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #10b981, #6ee7b7);
  transition: width .4s;
}
.sg-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  max-height: 360px;
  overflow-y: auto;
}
.sg-loading {
  padding: 20px; text-align: center;
  color: rgba(255,255,255,.4); font-size: .85rem;
}
.sg-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 18px;
  cursor: pointer;
  transition: background .15s;
  text-decoration: none;
}
.sg-item:hover { background: rgba(255,255,255,.04); }
.sg-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem;
  color: transparent;
  margin-top: 2px;
  transition: all .2s;
}
.sg-item.done .sg-check {
  background: #10b981;
  border-color: #10b981;
  color: #fff;
}
.sg-item-body { flex: 1; min-width: 0; }
.sg-item-title {
  font-size: .84rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sg-item-ic { font-size: .75rem; opacity: .7; }
.sg-item.done .sg-item-title { color: rgba(255,255,255,.45); text-decoration: line-through; }
.sg-item-desc { display: block; font-size: .73rem; color: rgba(255,255,255,.4); line-height: 1.4; margin-top: 2px; }
.sg-item-go {
  font-size: .72rem;
  color: #10b981;
  font-weight: 700;
  white-space: nowrap;
  margin-top: 6px;
  /* Must be a block-level flex row -- as inline-flex it butted straight up
     against the end of the description ("...right context.Go ->"). */
  display: flex;
  align-items: center;
  gap: 3px;
}
.sg-item.done .sg-item-go { display: none; }
/* P0-5. Three nowrap items on one row: at 360px the panel is narrower than
   they are, so Dismiss ran off the right edge and was unreachable. Wrap
   instead -- the buttons drop to their own line. */
.sg-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
  padding: 12px 18px;
  border-top: 1px solid rgba(255,255,255,.07);
  text-align: center;
  font-size: .75rem;
  color: rgba(255,255,255,.3);
}
.sg-footer-actions { display: flex; gap: 6px; flex: 1 1 auto; justify-content: flex-end; }
/* Thumb-sized: the footer link was 16px tall and the two buttons 24px. */
.sg-help {
  min-height: 44px; display: inline-flex; align-items: center;
  color: rgba(255,255,255,.55); text-decoration: none; white-space: nowrap;
}
.sg-fbtn {
  min-height: 44px; display: inline-flex; align-items: center;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.55); border-radius: 8px; padding: 0 12px;
  font-size: .72rem; cursor: pointer; white-space: nowrap;
}
.sg-fbtn--danger {
  background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.2); color: #f87171;
}
.sg-all-done {
  padding: 24px 18px;
  text-align: center;
  color: #10b981;
  font-size: .95rem;
  font-weight: 700;
}
.sg-all-done span { font-size: .8rem; color: rgba(255,255,255,.5); font-weight: 400; }
.sg-mi { opacity: .6; }