/* ============================================================
   ClubManager — Modern design system
   Linear/Stripe polish with athletic energy. Multi-sport neutral.
   Works with Bootstrap 5.3 via --bs-* variable overrides.
   ============================================================ */

/* ---------- Fonts ---------- */
/* Self-hosted variable fonts keep typography consistent and remove a
   render-blocking dependency on Google Fonts at runtime. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("/fonts/inter-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("/fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("/fonts/space-grotesk-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("/fonts/space-grotesk-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Design tokens (light) ---------- */
:root,
[data-bs-theme="light"] {
    /* Jazz Bantam (6/24/26): app-wide default palette — purple primary, near-black
       secondary, brighter-purple accent (white is used for ink/CTAs at the page
       level). Per-club branding still overrides via the TeamTheme component, which
       emits its own :root{--le-team-*} block after this stylesheet loads. */
    --le-team-primary:   #4E008E; /* Jazz Bantam purple — matched to logo banner */
    --le-team-secondary: #15091F; /* purple-tinted near-black */
    --le-team-accent:    #8A2AE0; /* bright Jazz Bantam purple */
    --le-team-primary-rgb:   78,0,142;
    --le-team-secondary-rgb: 21,9,31;
    --le-team-accent-rgb:    138,42,224;

    /* Utah Jazz (6/18/26): default page watermark = the Jazz logo, so every team
       (and every page) shows it unless a club/team overrides with its own logo
       via the TeamTheme component. */
    --le-brand-logo-url: url("/images/teams/jazz-watermark.svg");

    /* Brand */
    --le-brand-primary-rgb: var(--le-team-primary-rgb, 79,70,229);
    --le-brand-secondary-rgb: var(--le-team-secondary-rgb, 67,56,202);
    --le-brand-accent-rgb: var(--le-team-accent-rgb, 6,182,212);
    --le-brand-50:  color-mix(in srgb, var(--le-team-primary, #4F46E5) 8%, white);
    --le-brand-100: color-mix(in srgb, var(--le-team-primary, #4F46E5) 14%, white);
    --le-brand-200: color-mix(in srgb, var(--le-team-primary, #4F46E5) 24%, white);
    --le-brand-300: color-mix(in srgb, var(--le-team-primary, #4F46E5) 42%, white);
    --le-brand-400: color-mix(in srgb, var(--le-team-primary, #4F46E5) 72%, white);
    --le-brand-500: var(--le-team-primary, #4F46E5);
    --le-brand-600: color-mix(in srgb, var(--le-team-primary, #4F46E5) 86%, black);
    --le-brand-700: color-mix(in srgb, var(--le-team-primary, #4F46E5) 72%, black);
    --le-brand-800: color-mix(in srgb, var(--le-team-primary, #4F46E5) 58%, black);
    --le-brand-900: color-mix(in srgb, var(--le-team-primary, #4F46E5) 42%, black);

    --le-accent-500: var(--le-team-accent, #06B6D4);
    --le-accent-600: color-mix(in srgb, var(--le-team-accent, #06B6D4) 82%, black);

    --le-success: #10B981;
    --le-warning: #F59E0B;
    --le-danger:  #F43F5E;
    --le-info:    #0EA5E9;

    /* Surfaces */
    --le-bg:          #F7F8FC;
    --le-surface:     #FFFFFF;
    --le-surface-2:   #FAFBFE;
    --le-surface-3:   #F1F3F9;
    --le-border:      #E5E7EF;
    --le-border-soft: #EEF0F6;
    --le-divider:     #EEF0F6;

    /* Text */
    --le-text:        #0B1220;
    --le-text-muted:  #556074;
    --le-text-soft:   #8892A6;
    --le-text-invert: #FFFFFF;

    /* Effects */
    --le-shadow-xs:  0 1px 2px rgba(16,24,40,.04);
    --le-shadow-sm:  0 2px 6px rgba(16,24,40,.05), 0 1px 2px rgba(16,24,40,.04);
    --le-shadow-md:  0 8px 20px rgba(16,24,40,.06), 0 2px 6px rgba(16,24,40,.04);
    --le-shadow-lg:  0 22px 45px -12px rgba(16,24,40,.18), 0 8px 16px rgba(16,24,40,.06);
    --le-ring:       0 0 0 3px rgba(var(--le-brand-primary-rgb), .18);
    --le-gradient-hero:  radial-gradient(1200px 600px at 85% -10%, rgba(var(--le-brand-primary-rgb), .16), transparent 60%),
                         radial-gradient(900px 500px at -10% 30%, rgba(var(--le-brand-accent-rgb), .12), transparent 55%),
                         linear-gradient(180deg, #FFFFFF 0%, #F5F7FD 100%);
    --le-gradient-brand: linear-gradient(135deg, color-mix(in srgb, var(--le-brand-500) 76%, white) 0%, var(--le-brand-500) 45%, var(--le-team-secondary, #4338CA) 100%);
    --le-gradient-accent: linear-gradient(135deg, color-mix(in srgb, var(--le-accent-500) 76%, white) 0%, var(--le-accent-500) 50%, var(--le-accent-600) 100%);
    --le-glass-bg:       rgba(255,255,255,.72);
    --le-glass-border:   rgba(15,23,42,.06);

    /* Radii */
    --le-radius-xs: 6px;
    --le-radius-sm: 10px;
    --le-radius:    14px;
    --le-radius-lg: 20px;
    --le-radius-xl: 28px;
    --le-radius-pill: 999px;

    /* Bootstrap variable overrides ------------------------------- */
    --bs-primary:     var(--le-brand-500);
    --bs-primary-rgb: var(--le-brand-primary-rgb);
    --bs-success:     var(--le-success);
    --bs-success-rgb: 16,185,129;
    --bs-danger:      var(--le-danger);
    --bs-danger-rgb:  244,63,94;
    --bs-warning:     var(--le-warning);
    --bs-warning-rgb: 245,158,11;
    --bs-info:        var(--le-info);
    --bs-info-rgb:    14,165,233;

    --bs-body-bg:          var(--le-bg);
    --bs-body-color:       var(--le-text);
    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --le-font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
    --bs-body-font-size:   1rem;
    --bs-body-line-height: 1.55;

    --bs-border-color:      var(--le-border);
    --bs-border-radius:     var(--le-radius-sm);
    --bs-border-radius-sm:  var(--le-radius-xs);
    --bs-border-radius-lg:  var(--le-radius);
    --bs-border-radius-xl:  var(--le-radius-lg);

    --bs-link-color:        var(--le-brand-600);
    --bs-link-hover-color:  var(--le-brand-700);

    --bs-secondary-color: var(--le-text-muted);
    --bs-tertiary-color:  var(--le-text-soft);

    color-scheme: light;
}

/* ---------- Design tokens (dark) ---------- */
[data-bs-theme="dark"] {
    --le-bg:          #0A0F1E;
    --le-surface:     #111829;
    --le-surface-2:   #0F1626;
    --le-surface-3:   #161E32;
    --le-border:      #22304C;
    --le-border-soft: #1A2440;
    --le-divider:     #1A2440;

    --le-text:        #ECEFF7;
    --le-text-muted:  #A5AFC5;
    --le-text-soft:   #7A8399;
    --le-text-invert: #0A0F1E;

    --le-shadow-xs:  0 1px 2px rgba(0,0,0,.25);
    --le-shadow-sm:  0 2px 6px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.3);
    --le-shadow-md:  0 10px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
    --le-shadow-lg:  0 30px 60px rgba(0,0,0,.55), 0 10px 20px rgba(0,0,0,.35);
    --le-ring:       0 0 0 3px rgba(var(--le-brand-primary-rgb), .28);

    --le-gradient-hero: radial-gradient(1200px 600px at 85% -10%, rgba(var(--le-brand-primary-rgb), .28), transparent 60%),
                        radial-gradient(900px 500px at -10% 30%, rgba(var(--le-brand-accent-rgb), .18), transparent 55%),
                        linear-gradient(180deg, #0A0F1E 0%, #0C1326 100%);
    --le-gradient-brand: linear-gradient(135deg, color-mix(in srgb, var(--le-brand-500) 58%, white) 0%, var(--le-brand-500) 45%, color-mix(in srgb, var(--le-team-secondary, #4338CA) 64%, white) 100%);
    --le-glass-bg:     rgba(17,24,41,.72);
    --le-glass-border: rgba(255,255,255,.06);

    --bs-body-bg:    var(--le-bg);
    --bs-body-color: var(--le-text);
    --bs-border-color: var(--le-border);
    --bs-link-color:       #C9A8EC;
    --bs-link-hover-color: #DCC6F4;
    --bs-secondary-color:  var(--le-text-muted);
    --bs-tertiary-color:   var(--le-text-soft);

    color-scheme: dark;
}

/* League Manager dark mode uses the Jazz identity directly: black surfaces,
   purple interaction states, and high-contrast white/neutral typography. */
[data-bs-theme="dark"] body.le-area-leagueadmin {
    --le-bg:          #050507;
    --le-surface:     #0D0A10;
    --le-surface-2:   #141018;
    --le-surface-3:   #1D1623;
    --le-border:      #3B2845;
    --le-border-soft: #291D30;
    --le-divider:     #291D30;

    --le-text:        #FFFFFF;
    --le-text-muted:  #D3C8D9;
    --le-text-soft:   #AD98B7;
    --le-text-invert: #09060B;

    --le-brand-50:  rgba(78, 0, 142, .24);
    --le-brand-100: rgba(98, 18, 168, .32);
    --le-brand-200: #6F249F;
    --le-brand-300: #8E3CC1;
    --le-brand-400: #A855D4;
    --le-brand-500: #7B2CBF;
    --le-brand-600: #963FD0;
    --le-brand-700: #D09AF4;
    --le-brand-800: #B66DE5;
    --le-brand-900: #8F38C7;

    --le-ring: 0 0 0 3px rgba(168, 85, 212, .34);
    --le-gradient-hero:
        radial-gradient(900px 480px at 84% -12%, rgba(78, 0, 142, .30), transparent 62%),
        linear-gradient(180deg, #09060B 0%, #050507 100%);
    --le-gradient-brand: linear-gradient(135deg, #A855D4 0%, #7B2CBF 48%, #4E008E 100%);
    --le-glass-bg: rgba(13, 10, 16, .92);
    --le-glass-border: rgba(208, 154, 244, .14);

    --bs-body-bg: var(--le-bg);
    --bs-body-color: var(--le-text);
    --bs-border-color: var(--le-border);
    --bs-link-color: #D09AF4;
    --bs-link-hover-color: #E5C5FA;
    --bs-primary: #7B2CBF;
    --bs-primary-rgb: 123, 44, 191;
    --bs-secondary-color: var(--le-text-muted);
    --bs-tertiary-color: var(--le-text-soft);
}

[data-bs-theme="dark"] body.le-area-leagueadmin .le-sidebar-link:hover .le-sidebar-icon,
[data-bs-theme="dark"] body.le-area-leagueadmin .le-sidebar-link.active .le-sidebar-icon {
    color: #FFFFFF;
    background: none;
}
[data-bs-theme="dark"] body.le-area-leagueadmin .le-sidebar-pin[aria-pressed="true"] {
    color: #FFFFFF;
    background: rgba(123, 44, 191, .36);
    border-color: rgba(208, 154, 244, .30);
}

[data-bs-theme="dark"] body.le-area-leagueadmin .alert-info {
    --bs-alert-color: #F3E7FC;
    --bs-alert-bg: rgba(78, 0, 142, .20);
    --bs-alert-border-color: rgba(168, 85, 212, .44);
}

/* Respect OS preference if no explicit choice has been made */
@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme]) {
        color-scheme: dark;
    }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html, body { min-height: 100%; }

body {
    margin: 0;
    background: var(--le-bg);
    color: var(--le-text);
    font-family: var(--bs-body-font-family);
    font-feature-settings: "cv02","cv03","cv04","cv11";
    letter-spacing: -0.005em;
    --le-header-height: 73px;
    --le-sidebar-width: 322px;
    --le-sidebar-width-collapsed: 72px;
}

/* Subtle animated ambient glow on the page background */
body::before {
    content: "";
    position: fixed;
    inset: -20% -10% auto -10%;
    height: 55vh;
    z-index: -1;
    background: var(--le-gradient-hero);
    filter: saturate(1.05);
    pointer-events: none;
}

/* Faint brand-logo watermark behind the page. --le-brand-logo-url is set by the
   TeamTheme view component for team, family, and club contexts; when it is
   absent the var() falls back to `none` and nothing paints. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--le-brand-logo-url, var(--le-team-logo-url, none));
    background-repeat: no-repeat;
    background-position: center 58%;
    background-size: min(58vw, 620px);
    opacity: 0.045;
    filter: grayscale(0.15);
}

/* The logo can be light-on-transparent; lift it a touch on dark backgrounds so
   it stays just visible without competing with content. */
[data-bs-theme="dark"] body::after {
    background-image: var(--le-brand-logo-dark-url, var(--le-team-logo-dark-url, var(--le-brand-logo-url, var(--le-team-logo-url, none))));
    opacity: 0.06;
}

/* Render both sources so a live theme toggle can switch logos without a page
   reload. Each variant remains available as the other's defensive fallback. */
.le-theme-logo--dark { display: none !important; }
[data-bs-theme="dark"] .le-theme-logo--light { display: none !important; }
[data-bs-theme="dark"] .le-theme-logo--dark { display: inline-block !important; }

main.page-main { padding-block: 28px 56px; }

@media (max-width: 767.98px) {
    body {
        --le-header-height: 60px;
    }

    main.page-main {
        padding-block: 14px 40px;
    }
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--le-font-display);
    color: var(--le-text);
    letter-spacing: -0.022em;
    font-weight: 700;
    line-height: 1.15;
}

h1 { font-size: clamp(1.8rem, 2.4vw, 2.25rem); margin-bottom: .75rem; }
h2 { font-size: clamp(1.5rem, 2vw, 1.75rem); }
h3 { font-size: 1.25rem; }
.lead { color: var(--le-text-muted); font-weight: 400; }

.display-4 {
    /* Space Grotesk tops out at 700 — 800 would render as synthesized faux bold */
    font-weight: 700;
    font-size: clamp(2.2rem, 5vw, 3.75rem);
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.text-muted { color: var(--le-text-muted) !important; }
.text-soft  { color: var(--le-text-soft); }

a { color: var(--bs-link-color); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--bs-link-hover-color); }

::selection { background: rgba(99,102,241,.22); color: inherit; }

code, kbd, samp, pre { font-family: var(--bs-font-monospace); }

/* ---------- Focus ring ---------- */
:focus-visible {
    outline: none;
    box-shadow: var(--le-ring);
    border-radius: var(--le-radius-xs);
}
.btn:focus, .btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    box-shadow: var(--le-ring);
    border-color: var(--le-brand-500);
}

/* ---------- Navbar (glass) ---------- */
.le-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    /* Glass lives on ::before, not the bar itself. backdrop-filter on the navbar
       would establish a containing block and trap the position:fixed offcanvas
       drawer inside the bar (clipping it to header height). */
    background: transparent;
    border-bottom: 1px solid var(--le-glass-border);
}
.le-navbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--le-glass-bg);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
}
.le-navbar .container-xxl {
    min-height: var(--le-header-height);
    gap: .75rem;
}
.le-navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--le-text);
}
.le-navbar .navbar-brand:hover { color: var(--le-text); }
.le-navbar-team-logo {
    display: block;
    /* Height-driven with auto width so wide wordmark lockups (e.g. the Jazz
       Bantam logo, ~4:1) render at full size instead of being shrunk to fit a
       square box. Square team/club logos still resolve to ~52x52. */
    height: 52px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
}

.le-logo-copyright {
    color: currentColor;
    font-size: .68rem;
    font-weight: 500;
    line-height: 1;
    opacity: .72;
    white-space: nowrap;
}
.le-brand-mark {
    width: 30px; height: 30px;
    border-radius: 9px;
    background: var(--le-gradient-brand);
    display: inline-grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: -0.02em;
    box-shadow: 0 6px 14px -6px rgba(79,70,229,.6);
}
.le-navbar .nav-link {
    color: var(--le-text-muted) !important;
    font-weight: 500;
    padding: .5rem .85rem;
    border-radius: var(--le-radius-sm);
    transition: background .15s ease, color .15s ease;
    white-space: nowrap; /* never break a label mid-phrase ("Player registration") */
}
.le-navbar .nav-link:hover,
.le-navbar .nav-link.active {
    color: var(--le-text) !important;
    background: var(--le-surface-3);
}
.le-navbar .navbar-toggler {
    border: 1px solid var(--le-border);
    border-radius: var(--le-radius-sm);
    padding: .4rem .55rem;
}

.le-navbar-public .navbar-brand { margin-right: 0; }

/* ===== Public top navbar — black bar, white text (jazzyouth.com style) =====
   A horizontal sticky bar across the top for unauthenticated visitors. The glass
   ::before is repainted solid near-black so the bar (and the expanded mobile
   menu it grows to hold) reads as a flat black surface in any theme. */
.le-navbar-public::before {
    background: #0B0A0F;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.le-navbar-public { border-bottom-color: rgba(255, 255, 255, .08); }
.le-navbar-public .navbar-brand,
.le-navbar-public .navbar-brand:hover { color: #fff; }
.le-navbar-public .nav-link { color: rgba(255, 255, 255, .82) !important; }
.le-navbar-public .nav-link:hover,
.le-navbar-public .nav-link.active {
    color: #fff !important;
    background: rgba(255, 255, 255, .12);
}
/* Hamburger + theme toggle sit on black: light outline, light glyph. */
.le-navbar-public .le-shell-toggle,
.le-navbar-public .le-theme-toggle {
    color: rgba(255, 255, 255, .85);
    border-color: rgba(255, 255, 255, .35);
}
.le-navbar-public .le-shell-toggle:hover,
.le-navbar-public .le-theme-toggle:hover {
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .5);
}
/* Sign-in stays a quiet white link; the primary CTA is the purple Jazz pill. */
.le-navbar-public .btn-link {
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
}
.le-navbar-public .btn-link:hover { color: #fff; }
.le-navbar-public .btn-primary {
    --bs-btn-bg: #4E008E; --bs-btn-border-color: #4E008E;
    --bs-btn-hover-bg: #6218A8; --bs-btn-hover-border-color: #6218A8;
    --bs-btn-active-bg: #3E0072; --bs-btn-active-border-color: #3E0072;
    border-radius: var(--le-radius-pill);
    font-weight: 700;
}
/* Expanded mobile menu: give the stacked links breathing room. */
@media (max-width: 991.98px) {
    .le-public-collapse { padding: .5rem 0 .75rem; }
    .le-navbar-public .le-public-nav-actions { margin-top: .25rem; }
}

/* ===== Public pinnable left sidebar nav =====
   A vertical menu fixed to the left. Pinned open by default on desktop (pushes
   the page content right, no top bar); slides in as an overlay on mobile or
   when unpinned. Pin state persists (see site.js). */
:root { --le-pubnav-width: 264px; }

.le-public-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--le-pubnav-width);
    z-index: 1045;
    display: flex;
    flex-direction: column;
    padding: 1rem .85rem;
    background: var(--le-surface);
    border-right: 1px solid var(--le-border);
    box-shadow: var(--le-shadow-sm);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .2s ease;
}
body.le-pubnav-open .le-public-sidebar { transform: none; }

.le-public-sidebar-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
}
.le-public-sidebar-head .navbar-brand { margin: 0 auto 0 0; }

.le-public-nav { display: flex; flex-direction: column; gap: .15rem; }

.le-public-nav-actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: 1rem;
    padding-top: .85rem;
    border-top: 1px solid var(--le-border);
}
.le-public-nav-actions .btn { width: 100%; }
.le-public-nav-actions .nav-link { padding: .4rem .6rem; }
/* In the horizontal top navbar the divider reads as a stray line above the
   sign-in link — drop it on desktop; keep it for the stacked mobile menu. */
@media (min-width: 992px) {
    .le-navbar-public .le-public-nav-actions {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }
}

.le-pubnav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1044;
    border: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}
body.le-pubnav-open .le-pubnav-backdrop { opacity: 1; visibility: visible; }

.le-public-topbar { position: sticky; top: 0; z-index: 1030; }

/* Desktop default: pinned. Sidebar shown, content shifted right, top bar gone. */
@media (min-width: 992px) {
    body.le-pubnav-pinned .le-public-sidebar { transform: none; }
    body.le-pubnav-pinned .le-public-topbar { display: none; }
    body.le-pubnav-pinned .le-pubnav-backdrop { display: none; }
    body.le-pubnav-pinned .page-main,
    body.le-pubnav-pinned .le-footer { padding-left: var(--le-pubnav-width); }
}
/* Pinning is a desktop affordance; on mobile the menu is always an overlay. */
@media (max-width: 991.98px) {
    [data-le-pubnav-pin] { display: none !important; }
}
.le-shell-toggle {
    background: transparent;
    border: 1px solid var(--le-border);
    color: var(--le-text-muted);
    border-radius: var(--le-radius-sm);
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.le-shell-toggle:hover {
    color: var(--le-text);
    background: var(--le-surface-3);
    transform: translateY(-1px);
}
.le-shell-toggle svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 767.98px) {
    .le-navbar .container-xxl {
        min-height: var(--le-header-height);
        gap: .5rem;
        padding-top: .35rem;
        padding-bottom: .35rem;
    }
    .le-navbar .navbar-brand {
        gap: .45rem;
        font-size: 1rem;
    }
    .le-brand-mark {
        width: 26px;
        height: 26px;
        border-radius: 8px;
        font-size: 12px;
    }
    .le-shell-toggle {
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }
    .le-shell-toggle svg {
        width: 16px;
        height: 16px;
    }
}

/* ---------- Family sidebar ---------- */
.le-shell {
    display: block;
}
.le-shell-content {
    min-width: 0;
}
.le-family-sidebar {
    display: none;
}
.le-sidebar-panel {
    --le-sidebar-tree-line: #DDD6E7;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    overflow: hidden;
    background: var(--le-surface);
    border: 1px solid var(--le-border);
    border-radius: 18px;
    box-shadow: var(--le-shadow-xs);
    padding: 1.15rem .95rem .9rem;
    font-family: var(--bs-body-font-family);
}
[data-bs-theme="dark"] .le-sidebar-panel {
    --le-sidebar-tree-line: rgba(208, 154, 244, .34);
}
.le-sidebar-panel-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .85rem;
}
.le-sidebar-copy {
    min-width: 0;
    flex: 1 1 auto;
}
.le-sidebar-kicker {
    display: block;
    color: var(--le-text-soft);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: .3rem;
}
.le-sidebar-title {
    margin: 0;
    font-family: var(--bs-body-font-family);
    font-size: 1.38rem;
    font-weight: 800;
    letter-spacing: -.035em;
}
/* Non-league brand lockup (logo, or gradient mark + wordmark). League scope
   restyles .le-sidebar-brand-logo more specifically, so these are fallbacks. */
.le-sidebar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    flex: 1 1 auto;
    color: var(--le-text);
}
.le-sidebar-brand:hover { color: var(--le-text); }
.le-sidebar-brand-logo {
    height: 32px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    flex: 0 0 auto;
}
.le-sidebar-brandmark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    background: var(--le-gradient-brand);
}
.le-sidebar-brand-name {
    min-width: 0;
    font-family: var(--bs-body-font-family);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -.03em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.le-sidebar-head-actions {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex: 0 0 auto;
}
.le-sidebar-pin,
.le-sidebar-hamburger {
    background: transparent;
    border: 1px solid var(--le-border);
    color: var(--le-text-muted);
    border-radius: 12px;
    width: 46px;
    height: 46px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.le-sidebar-pin:hover,
.le-sidebar-hamburger:hover {
    color: var(--le-text);
    background: var(--le-surface-3);
    transform: translateY(-1px);
}
.le-sidebar-pin[aria-pressed="true"] {
    color: var(--le-brand-700);
    background: var(--le-brand-50);
    border-color: rgba(79,70,229,.22);
}
.le-sidebar-pin[aria-pressed="true"] svg {
    fill: none;
    stroke: currentColor;
}
[data-bs-theme="dark"] .le-sidebar-pin[aria-pressed="true"] {
    color: #d7dcff;
    background: rgba(99,102,241,.18);
    border-color: rgba(129,140,248,.24);
}
.le-sidebar-pin svg,
.le-sidebar-hamburger svg {
    width: 18px;
    height: 18px;
}
.le-sidebar-nav {
    display: grid;
    gap: .22rem;
}
.le-sidebar-sections {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: .9rem;
    overflow-y: auto;
    scrollbar-gutter: stable;
}
.le-sidebar-footer {
    display: grid;
    flex: 0 0 auto;
    gap: .28rem;
    padding-top: .5rem;
    border-top: 1px solid var(--le-border-soft);
}
.le-sidebar-section {
    display: grid;
    gap: .42rem;
}
.le-sidebar-section-title {
    color: var(--le-text-soft);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding-inline: .35rem;
}
.le-sidebar-subgroup-title {
    color: var(--le-text-soft);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding-inline: .55rem;
    margin-top: .5rem;
    opacity: .8;
}
.le-sidebar-subgroup-title:first-child {
    margin-top: 0;
}
/* Collapsible nav group: a parent link plus a caret that reveals nested pages. */
.le-sidebar-group {
    display: grid;
    gap: .18rem;
}
.le-sidebar-group-row {
    display: flex;
    align-items: center;
    gap: .35rem;
}
.le-sidebar-group-row .le-sidebar-link {
    flex: 1 1 auto;
    min-width: 0;
}
/* Standalone destinations exist in several role-specific menus. Keep them on
   the same full-width top-level grid as grouped destinations while preserving
   the intentionally inset treatment of submenu links. */
.le-sidebar-nav > .le-sidebar-link {
    width: 100%;
    min-width: 0;
    justify-self: stretch;
}
.le-sidebar-caret {
    background: transparent;
    border: 1px solid transparent;
    color: var(--le-text-muted);
    border-radius: 9px;
    width: 30px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.le-sidebar-caret:hover {
    color: var(--le-text);
    background: var(--le-surface-3);
    border-color: var(--le-border-soft);
}
.le-sidebar-caret svg {
    width: 16px;
    height: 16px;
    transition: transform .15s ease;
}
.le-sidebar-caret[aria-expanded="true"] svg {
    transform: rotate(180deg);
}
.le-sidebar-group-items {
    position: relative;
    display: grid;
    gap: .05rem;
    margin-left: 1.48rem;
    padding: .12rem 0 .12rem 1.05rem;
    border-left: 0;
}
.le-sidebar-group-items::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: calc(.12rem + 16px);
    width: 1.5px;
    border-radius: 999px;
    background: var(--le-sidebar-tree-line);
}
.le-sidebar-group-items[hidden] {
    display: none;
}
.le-sidebar-group-items .le-sidebar-icon {
    width: .38rem;
    height: .38rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--le-brand-700) 78%, transparent);
}
.le-sidebar-group-items .le-sidebar-icon svg { display: none; }
.le-sidebar-group-items .le-sidebar-link {
    gap: .72rem;
    min-height: 32px;
    padding: .35rem .25rem;
    border-radius: 8px;
    font-weight: 500;
}
.le-sidebar-group-items .le-sidebar-link::after {
    content: "";
    position: absolute;
    left: -1.05rem;
    top: 50%;
    width: 1.3rem;
    height: 1.5px;
    border-radius: 999px;
    background: var(--le-sidebar-tree-line);
    transform: translateY(-50%);
}
.le-sidebar-group-items .le-sidebar-label {
    margin-inline-start: 0;
}
.le-sidebar-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .72rem;
    min-height: 44px;
    padding: .28rem .48rem;
    color: var(--le-text-muted);
    border: 1px solid transparent;
    border-radius: 10px;
    font-weight: 600;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.le-sidebar-link-button {
    width: 100%;
    text-align: left;
    background: transparent;
    cursor: pointer;
}
.le-sidebar-link-button,
.le-sidebar-link-button:hover,
.le-sidebar-link-button:focus-visible {
    border-width: 1px;
}
.le-sidebar-link:hover {
    color: var(--le-text);
    background: var(--le-surface-2);
    border-color: var(--le-border-soft);
    transform: translateX(2px);
}
.le-sidebar-link.active {
    color: #fff;
    background: var(--le-brand-600);
    border-color: transparent;
    box-shadow: 0 6px 16px -8px rgba(var(--le-brand-primary-rgb), .7);
}
/* Keep content + absolute positioning so nested-item dots (which reuse this
   pseudo-element) still render; hidden by default so top-level pills show no
   left bar. Scopes that want the dot re-enable it with display:block. */
.le-sidebar-link.active::before { content: ""; position: absolute; display: none; }
.le-sidebar-group-items .le-sidebar-link.active::before { display: none; }
.le-sidebar-icon {
    width: 22px;
    height: 22px;
    background: none;
    color: var(--le-text-muted);
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    transition: color .15s ease;
}
.le-sidebar-link:hover .le-sidebar-icon {
    color: var(--le-brand-700);
}
.le-sidebar-link.active .le-sidebar-icon {
    color: #fff;
    background: none;
}
[data-bs-theme="dark"] .le-sidebar-link.active {
    color: #fff;
    background: var(--le-brand-500);
    border-color: transparent;
}
[data-bs-theme="dark"] .le-sidebar-link:hover .le-sidebar-icon {
    color: #c7cdff;
}
[data-bs-theme="dark"] .le-sidebar-link.active .le-sidebar-icon {
    color: #fff;
    background: none;
}
.le-sidebar-offcanvas { --bs-offcanvas-width: 86vw; max-width: 360px; }
.le-sidebar-offcanvas .offcanvas-body {
    background: var(--le-bg);
    display: flex;
    min-height: 0;
    overflow: hidden;
}
.le-sidebar-offcanvas .le-sidebar-panel {
    width: 100%;
    height: 100%;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}
.le-sidebar-offcanvas .le-sidebar-panel-head,
.le-sidebar-offcanvas .le-sidebar-pin {
    display: none;
}
.le-sidebar-icon svg {
    width: 20px;
    height: 20px;
}
.le-sidebar-label {
    min-width: 0;
    line-height: 1.2;
    text-transform: none;
    font-size: .875rem;
    letter-spacing: -.018em;
}
.le-sidebar-badge {
    margin-left: auto;
    flex: none;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--bs-danger, #dc3545);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
}
.le-season-banner {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1.1rem;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(79,70,229,.10) 0%, rgba(6,182,212,.06) 100%);
    border: 1px solid rgba(79,70,229,.18);
}
.le-season-banner-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--le-brand-50, rgba(79,70,229,.12));
    color: var(--le-brand-700, #4338ca);
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}
.le-season-banner-name {
    font-weight: 700;
    line-height: 1.2;
}
[data-bs-theme="dark"] .le-season-banner {
    background: linear-gradient(135deg, rgba(99,102,241,.18) 0%, rgba(6,182,212,.12) 100%);
    border-color: rgba(129,140,248,.22);
}

@media (max-width: 767.98px) {
    .le-season-banner {
        gap: .7rem;
        padding: .65rem .85rem;
        border-radius: 16px;
        margin-bottom: .6rem;
    }
    .le-season-banner-icon {
        width: 36px;
        height: 36px;
        border-radius: 12px;
    }
    .le-season-banner-name {
        font-size: 1rem;
    }
}
.le-sidebar-usercard {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .65rem .75rem;
    border: 1px solid var(--le-border-soft);
    border-radius: 12px;
    background: var(--le-surface-2);
}
.le-sidebar-usercard-button {
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.le-sidebar-usercard-button:hover {
    background: var(--le-surface-3);
    border-color: var(--le-border);
}
.le-sidebar-usercard-chev {
    margin-left: auto;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--le-text-soft);
    display: inline-grid;
    place-items: center;
    transition: transform .15s ease;
}
.le-sidebar-usercard-button[aria-expanded="true"] .le-sidebar-usercard-chev {
    transform: rotate(180deg);
}
.le-sidebar-usercopy {
    min-width: 0;
}
.le-sidebar-userlabel {
    color: var(--le-text-soft);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.le-sidebar-username {
    color: var(--le-text);
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
}
.le-account-menu-wrap {
    width: 100%;
}
.le-sidebar-environment {
    display: flex;
    align-items: center;
    gap: .38rem;
    margin: .15rem .55rem 0;
    color: var(--le-text-soft);
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
}
.le-sidebar-environment strong {
    color: var(--le-text);
    font-size: .68rem;
    letter-spacing: .08em;
}
.le-sidebar-environment-dot {
    width: .45rem;
    height: .45rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--le-text-soft);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--le-text-soft) 18%, transparent);
}
.le-sidebar-environment-local .le-sidebar-environment-dot {
    background: #16A34A;
    box-shadow: 0 0 0 2px color-mix(in srgb, #16A34A 20%, transparent);
}
.le-sidebar-environment-uat .le-sidebar-environment-dot {
    background: #D97706;
    box-shadow: 0 0 0 2px color-mix(in srgb, #D97706 20%, transparent);
}
.le-sidebar-environment-prod .le-sidebar-environment-dot {
    background: #DC2626;
    box-shadow: 0 0 0 2px color-mix(in srgb, #DC2626 20%, transparent);
}
.le-account-menu {
    --bs-dropdown-min-width: 15rem;
    border-color: var(--le-border);
    box-shadow: var(--le-shadow-md);
}
.le-account-menu .dropdown-header {
    max-width: 18rem;
}
.le-account-menu-item {
    display: flex;
    align-items: center;
    gap: .65rem;
}
.le-account-menu-icon {
    width: 1.25rem;
    height: 1.25rem;
    display: inline-grid;
    place-items: center;
    color: var(--le-text-soft);
    flex: 0 0 auto;
}
.le-account-menu-icon svg {
    width: 1.05rem;
    height: 1.05rem;
}
.le-account-menu .le-theme-toggle,
.le-settings-theme-toggle.le-theme-toggle {
    width: auto;
    height: auto;
}
.le-account-menu .le-theme-toggle {
    border: 0;
    border-radius: 0;
    color: var(--bs-dropdown-link-color);
    background: transparent;
    justify-content: flex-start;
}
.le-account-menu .le-theme-toggle:hover {
    transform: none;
    color: var(--bs-dropdown-link-hover-color);
    background: var(--bs-dropdown-link-hover-bg);
}
.le-account-menu-danger {
    color: var(--le-danger);
}
.le-account-menu-danger .le-account-menu-icon {
    color: var(--le-danger);
}
.le-sidebar-link.le-sidebar-link-danger {
    color: var(--le-danger);
}
.le-sidebar-link.le-sidebar-link-danger .le-sidebar-icon {
    color: var(--le-danger);
    background: color-mix(in srgb, var(--le-danger) 12%, var(--le-surface-3));
}
.le-sidebar-link.le-sidebar-link-danger:hover {
    background: color-mix(in srgb, var(--le-danger) 8%, var(--le-surface-2));
    border-color: color-mix(in srgb, var(--le-danger) 24%, var(--le-border-soft));
}
@media (min-width: 992px) {
    body.le-has-family-sidebar .le-shell {
        display: grid;
        grid-template-columns: var(--le-sidebar-width) minmax(0, 1fr);
        align-items: start;
        overflow-x: clip;
        transition: grid-template-columns .2s ease;
    }
    /* Keep the main content locked to the wide second track. When the sidebar
       lifts out of the grid flow (position: fixed for the unpinned overlay or
       the collapsed-rail hover/focus peek), the content would otherwise be the
       only in-flow child and auto-place back into the narrow first track,
       collapsing to a sliver. Pinning it to column 2 leaves the first track as
       the intended reserved gutter behind the floating menu. */
    body.le-has-family-sidebar .le-shell-content {
        grid-column: 2;
    }
    /* Hidden = collapsed to a rail that keeps the hamburger reachable (there is
       no other desktop toggle — the header hamburger was removed). */
    body.le-has-family-sidebar.le-family-sidebar-hidden .le-shell {
        grid-template-columns: var(--le-sidebar-width-collapsed) minmax(0, 1fr);
    }
    body.le-has-family-sidebar .le-family-sidebar {
        display: block;
        position: sticky;
        top: 0;
        align-self: start;
        z-index: 1040;
        width: var(--le-sidebar-width);
        max-width: var(--le-sidebar-width);
        height: 100vh;
        padding: 0;
        transition: width .2s ease, max-width .2s ease, transform .2s ease, opacity .2s ease, visibility .2s ease;
    }
    body.le-has-family-sidebar .le-family-sidebar .le-sidebar-panel {
        min-height: 100%;
        border-radius: 0;
        border-top: 0;
        border-bottom: 0;
        border-left: 0;
    }
    body.le-has-family-sidebar.le-family-sidebar-hidden .le-family-sidebar {
        width: var(--le-sidebar-width-collapsed);
        max-width: var(--le-sidebar-width-collapsed);
    }
    /* Collapsed = a modern icon-only rail (not a blank strip). Icons stay
       tappable; text, section labels, the pin, nested groups and inline forms
       fold away. Hovering — or keyboard-focusing — the rail flies the full menu
       open as an overlay, so the content underneath never shifts.

       Whether the flyout is showing is owned by site.js (body.le-sidebar-peeking)
       rather than a bare :hover on the rail. Collapsing the menu leaves the
       pointer parked on the rail, so :hover matched the instant the click
       landed: the sidebar snapped straight back to full width and floated over
       the page while the content track had already widened behind it. That is
       the "minimize widens the content but never shrinks the sidebar" bug. The
       script suppresses the flyout until the pointer actually leaves the rail. */
    body.le-has-family-sidebar.le-family-sidebar-hidden .le-family-sidebar .le-sidebar-panel {
        padding-inline: .5rem;
    }
    body.le-has-family-sidebar.le-family-sidebar-hidden:not(.le-sidebar-peeking) .le-family-sidebar :is(
        .le-sidebar-label,
        .le-sidebar-section-title,
        .le-sidebar-subgroup-title,
        .le-sidebar-copy,
        .le-sidebar-brand,
        .le-sidebar-brand-name,
        .le-sidebar-brand-logo,
        .le-sidebar-pin,
        .le-sidebar-caret,
        .le-sidebar-group-items,
        .le-sidebar-badge,
        .le-sidebar-usercopy,
        .le-sidebar-usercard-chev,
        .le-sidebar-environment span,
        .le-sidebar-environment-dot,
        .le-sidebar-section > form
    ) {
        display: none;
    }
    /* Center the surviving icons/avatar/hamburger in the narrow rail. */
    body.le-has-family-sidebar.le-family-sidebar-hidden:not(.le-sidebar-peeking) .le-family-sidebar :is(
        .le-sidebar-panel-head,
        .le-sidebar-head-actions,
        .le-sidebar-link,
        .le-sidebar-usercard
    ) {
        justify-content: center;
        padding-inline: 0;
    }
    body.le-has-family-sidebar.le-family-sidebar-hidden:not(.le-sidebar-peeking) .le-family-sidebar .le-sidebar-environment {
        justify-content: center;
        width: var(--le-nav-rail-tile);
        margin: .15rem auto 0;
        font-size: .56rem;
        letter-spacing: .04em;
    }
    body.le-has-family-sidebar.le-family-sidebar-hidden:not(.le-sidebar-peeking) .le-family-sidebar .le-sidebar-environment strong {
        font-size: .56rem;
        letter-spacing: .04em;
    }
    /* Fly the full menu open as an overlay above the page. */
    body.le-has-family-sidebar.le-family-sidebar-hidden .le-family-sidebar {
        transition: width .18s ease, max-width .18s ease, transform .2s ease;
    }
    body.le-has-family-sidebar.le-family-sidebar-hidden.le-sidebar-peeking .le-family-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--le-sidebar-width);
        max-width: var(--le-sidebar-width);
        height: 100vh;
        z-index: 1050;
        box-shadow: 0 24px 64px rgba(15, 23, 42, .3);
    }
    /* Unpinned + expanded: the menu floats over the page (the rail-width gutter
       stays reserved behind it) and closes on any click outside. */
    body.le-has-family-sidebar.le-family-sidebar-unpinned:not(.le-family-sidebar-hidden) .le-shell {
        grid-template-columns: var(--le-sidebar-width-collapsed) minmax(0, 1fr);
    }
    body.le-has-family-sidebar.le-family-sidebar-unpinned:not(.le-family-sidebar-hidden) .le-family-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        box-shadow: 0 24px 64px rgba(15, 23, 42, .28);
    }
    body.le-has-family-sidebar .page-main {
        padding-left: 16px;
    }
}

/* Theme toggle button */
.le-theme-toggle {
    background: transparent;
    border: 1px solid var(--le-border);
    color: var(--le-text-muted);
    border-radius: var(--le-radius-pill);
    width: 38px; height: 38px;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.le-theme-toggle:hover { color: var(--le-text); background: var(--le-surface-3); border-color: var(--le-border); transform: translateY(-1px); }
.le-theme-toggle svg { width: 18px; height: 18px; }
[data-bs-theme="light"] .le-theme-toggle .le-icon-sun { display: block; }
[data-bs-theme="light"] .le-theme-toggle .le-icon-moon { display: none; }
[data-bs-theme="dark"]  .le-theme-toggle .le-icon-sun { display: none; }
[data-bs-theme="dark"]  .le-theme-toggle .le-icon-moon { display: block; }

/* ---------- Buttons ---------- */
.btn {
    --bs-btn-padding-y: .55rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--le-radius-sm);
    letter-spacing: -0.005em;
    transition: transform .12s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
    --bs-btn-bg: var(--le-brand-500);
    --bs-btn-border-color: var(--le-brand-500);
    --bs-btn-hover-bg: var(--le-brand-600);
    --bs-btn-hover-border-color: var(--le-brand-600);
    --bs-btn-active-bg: var(--le-brand-700);
    --bs-btn-active-border-color: var(--le-brand-700);
    --bs-btn-disabled-bg: var(--le-brand-300);
    --bs-btn-disabled-border-color: var(--le-brand-300);
    color: #fff;
    background-image: var(--le-gradient-brand);
    border: 0;
    box-shadow: 0 6px 14px -6px rgba(79,70,229,.55), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-primary:hover { box-shadow: 0 10px 22px -8px rgba(79,70,229,.6), inset 0 1px 0 rgba(255,255,255,.2); }

.btn-outline-primary {
    --bs-btn-color: var(--le-brand-600);
    --bs-btn-border-color: var(--le-border);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--le-surface-3);
    --bs-btn-hover-border-color: var(--le-brand-300);
    --bs-btn-hover-color: var(--le-brand-700);
    --bs-btn-active-bg: var(--le-brand-50);
    --bs-btn-active-border-color: var(--le-brand-400);
    --bs-btn-active-color: var(--le-brand-700);
}
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #A3ABFF; --bs-btn-hover-color: #E0E4FF; --bs-btn-active-bg: rgba(99,102,241,.15); }

.btn-secondary,
.btn-light {
    --bs-btn-bg: var(--le-surface);
    --bs-btn-border-color: var(--le-border);
    --bs-btn-color: var(--le-text);
    --bs-btn-hover-bg: var(--le-surface-3);
    --bs-btn-hover-border-color: var(--le-border);
    --bs-btn-hover-color: var(--le-text);
    --bs-btn-active-bg: var(--le-surface-3);
    --bs-btn-active-border-color: var(--le-border);
    --bs-btn-active-color: var(--le-text);
    box-shadow: var(--le-shadow-xs);
}

.btn-link {
    --bs-btn-color: var(--le-brand-600);
    --bs-btn-hover-color: var(--le-brand-700);
    font-weight: 600;
    text-decoration: none;
}
[data-bs-theme="dark"] .btn-link { --bs-btn-color: #A3ABFF; --bs-btn-hover-color: #C5CBFF; }

.btn-lg { --bs-btn-padding-y: .85rem; --bs-btn-padding-x: 1.5rem; font-size: 1.02rem; }
.btn-sm { --bs-btn-padding-y: .35rem; --bs-btn-padding-x: .75rem; font-size: .85rem; }

/* ---------- Cards ---------- */
.card {
    --bs-card-bg: var(--le-surface);
    --bs-card-border-color: var(--le-border);
    --bs-card-border-radius: var(--le-radius);
    --bs-card-inner-border-radius: calc(var(--le-radius) - 1px);
    --bs-card-cap-bg: transparent;
    box-shadow: var(--le-shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card:hover { box-shadow: var(--le-shadow-md); }
.card.le-card-flat { box-shadow: none; }
.card.le-card-accent {
    background: linear-gradient(180deg, var(--le-surface) 0%, var(--le-surface-2) 100%);
}
.card-header, .card-footer {
    background: transparent;
    border-color: var(--le-divider);
    padding: 1rem 1.25rem;
}
.card-body { padding: 1.25rem 1.4rem; }

/* Elevated "stat" card */
.le-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--le-surface);
    border: 1px solid var(--le-border);
    border-radius: var(--le-radius);
    box-shadow: var(--le-shadow-sm);
}
.le-stat-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--le-brand-50);
    color: var(--le-brand-600);
    display: grid; place-items: center;
}
[data-bs-theme="dark"] .le-stat-icon { background: rgba(99,102,241,.15); color: #C5CBFF; }
/* Stat cards rendered as links (e.g. dashboard "This season") get a hover lift. */
a.le-stat { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
a.le-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--le-shadow-md);
    border-color: color-mix(in srgb, var(--le-brand-500) 22%, var(--le-border));
}
.le-stat-label { color: var(--le-text-muted); font-size: .82rem; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.le-stat-value { font-family: var(--le-font-display); font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }

/* Attention cards on dashboards use theme surfaces rather than hard-coded
   white so the text stays readable in dark mode. */
.le-attention {
    background: linear-gradient(180deg, var(--le-surface) 0%, var(--le-surface-2) 100%);
    border: 1px solid var(--le-border);
    border-radius: var(--le-radius);
    box-shadow: var(--le-shadow-sm);
    color: var(--le-text);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.le-attention:hover {
    transform: translateY(-2px);
    box-shadow: var(--le-shadow-md);
    border-color: color-mix(in srgb, var(--le-brand-500) 22%, var(--le-border));
}
.le-attention .text-primary {
    color: var(--bs-link-color) !important;
    font-weight: 600;
}

/* ---------- Forms ---------- */
.form-label {
    font-weight: 500;
    font-size: .9rem;
    color: var(--le-text);
    margin-bottom: .35rem;
}
.form-control,
.form-select {
    background-color: var(--le-surface);
    border: 1px solid var(--le-border);
    color: var(--le-text);
    border-radius: var(--le-radius-sm);
    padding: .6rem .85rem;
    box-shadow: var(--le-shadow-xs);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.form-control::placeholder { color: var(--le-text-soft); }
.form-control:focus,
.form-select:focus {
    background-color: var(--le-surface);
    border-color: var(--le-brand-400);
    box-shadow: var(--le-ring);
    color: var(--le-text);
}

/* Keep compact team-registration selects wide enough for their value and reserve
   a dedicated gutter for Bootstrap's dropdown indicator. The table is already
   horizontally scrollable, so these minimums do not squeeze adjacent columns. */
.season-registration-teams .form-select {
    padding-right: 2.25rem;
}
.season-registration-teams .team-gender-select { min-width: 6.5rem; }
.season-registration-teams .team-flight-select { min-width: 9rem; }
.season-registration-teams .team-division-select { min-width: 9rem; }

.form-text { color: var(--le-text-muted); }
.form-check-input {
    border: 1px solid var(--le-border);
    background-color: var(--le-surface);
}
.form-check-input:checked {
    background-color: var(--le-brand-500);
    border-color: var(--le-brand-500);
}
/* Unchecked controls need a definite edge on white cards and forms. Keep this
   light-theme-only so the existing dark palette retains its tuned contrast. */
[data-bs-theme="light"] .form-check-input {
    border: 2px solid #667085;
    background-color: #ffffff;
}
[data-bs-theme="light"] .form-check-input:checked,
[data-bs-theme="light"] .form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--le-brand-600);
    border-color: var(--le-brand-600);
}
fieldset { border: 0; padding: 0; margin: 0; }
fieldset > legend {
    font-size: 1rem;
    font-weight: 600;
    color: var(--le-text);
    margin-bottom: .65rem;
}

/* Validation */
.text-danger { color: var(--le-danger) !important; font-size: .85rem; }
.invalid-feedback { color: var(--le-danger); }

/* ---------- Tables ---------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--le-text);
    --bs-table-border-color: var(--le-divider);
    --bs-table-striped-bg: var(--le-surface-2);
    border-radius: var(--le-radius);
    overflow: hidden;
}
.table > :not(caption) > * > * {
    padding: .85rem 1rem;
    background-color: var(--bs-table-bg);
    border-bottom-color: var(--le-divider);
}
.table thead th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    color: var(--le-text-muted);
    border-bottom: 1px solid var(--le-border);
    background: transparent;
}
.table tbody tr:nth-of-type(even) {
    /* Gentle zebra striping across every application table. Mixing only a
       trace of the active brand color keeps it useful without looking busy. */
    background-color: color-mix(in srgb, var(--le-brand-500) 2.5%, var(--le-surface));
}
[data-bs-theme="dark"] .table tbody tr:nth-of-type(even) {
    background-color: color-mix(in srgb, var(--le-brand-400) 4%, var(--le-surface));
}
.table tbody tr { transition: background .12s ease; }
.table tbody tr:hover { background: var(--le-surface-3); }

/* Click-to-sort headers (wired up globally by makeTablesSortable in site.js). */
.table thead th.le-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.table thead th.le-sortable::after {
    content: "\2195"; /* ↕ neutral */
    margin-left: .4em;
    font-size: .85em;
    opacity: .3;
}
.table thead th.le-sortable:hover::after { opacity: .6; }
.table thead th.le-sortable[aria-sort="ascending"]::after { content: "\2191"; opacity: 1; }
.table thead th.le-sortable[aria-sort="descending"]::after { content: "\2193"; opacity: 1; }
.table thead th.le-sortable:focus-visible {
    outline: 2px solid var(--le-accent, #7EB5EC);
    outline-offset: -2px;
}

/* Wrap tables in a card-like surface for polish */
.le-table-surface {
    background: var(--le-surface);
    border: 1px solid var(--le-border);
    border-radius: var(--le-radius);
    box-shadow: var(--le-shadow-sm);
    overflow: hidden;
}
.le-table-surface .table { margin: 0; }

/* ---------- Alerts ---------- */
.alert {
    border-radius: var(--le-radius);
    border: 1px solid var(--le-border);
    background: var(--le-surface);
    color: var(--le-text);
    padding: .9rem 1.1rem;
    box-shadow: var(--le-shadow-xs);
}
.alert-success { border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.08); color: #056149; }
.alert-danger  { border-color: rgba(244,63,94,.35);  background: rgba(244,63,94,.08);  color: #9B1B36; }
.alert-warning { border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.08); color: #8A5A00; }
.alert-info    { border-color: rgba(14,165,233,.35); background: rgba(14,165,233,.08); color: #075985; }
[data-bs-theme="dark"] .alert-success { color: #6EE7B7; }
[data-bs-theme="dark"] .alert-danger  { color: #FDA4AF; }
[data-bs-theme="dark"] .alert-warning { color: #FCD34D; }
[data-bs-theme="dark"] .alert-info    { color: #7DD3FC; }

/* ---------- Badges ---------- */
.badge {
    font-weight: 600;
    letter-spacing: .01em;
    padding: .4em .7em;
    border-radius: var(--le-radius-pill);
}
.badge.bg-primary { background: var(--le-brand-500) !important; }
.badge.bg-success { background: var(--le-success) !important; }
.badge.bg-danger  { background: var(--le-danger)  !important; }
.badge.bg-warning { background: var(--le-warning) !important; color: #1f1300 !important; }
.le-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border-radius: var(--le-radius-pill);
    background: var(--le-surface-3);
    color: var(--le-text-muted);
    font-size: .78rem;
    font-weight: 500;
    border: 1px solid var(--le-border-soft);
}
.le-chip-brand { background: var(--le-brand-50); color: var(--le-brand-700); border-color: transparent; }
[data-bs-theme="dark"] .le-chip-brand { background: rgba(99,102,241,.16); color: #C5CBFF; }

/* ---------- Hero ---------- */
.le-hero {
    position: relative;
    padding: clamp(56px, 9vw, 120px) 0 clamp(48px, 7vw, 96px);
    overflow: hidden;
    isolation: isolate;
}
.le-hero::before {
    content: "";
    position: absolute; inset: -20% -10% auto -10%; height: 90%;
    z-index: -1;
    background: var(--le-gradient-hero);
    pointer-events: none;
}
.le-hero-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .35rem .8rem;
    background: var(--le-surface);
    border: 1px solid var(--le-border);
    border-radius: var(--le-radius-pill);
    box-shadow: var(--le-shadow-xs);
    color: var(--le-text-muted);
    font-weight: 500;
    font-size: .85rem;
}
.le-hero-eyebrow .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--le-success);
    box-shadow: 0 0 0 3px rgba(16,185,129,.15);
}
.le-hero-title {
    font-family: var(--le-font-display);
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.02;
    margin: 1rem 0 1rem;
}
.le-hero-title .le-grad {
    background: linear-gradient(135deg, #4F46E5 0%, #06B6D4 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.le-hero-sub { color: var(--le-text-muted); font-size: clamp(1.05rem, 1.4vw, 1.2rem); max-width: 620px; }

/* Sport pills row */
.le-sport-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }
.le-sport-row .le-chip { backdrop-filter: blur(6px); background: var(--le-glass-bg); border-color: var(--le-glass-border); }

/* ---------- Feature grid ---------- */
.le-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}
.le-feature {
    background: var(--le-surface);
    border: 1px solid var(--le-border);
    border-radius: var(--le-radius);
    padding: 1.4rem;
    box-shadow: var(--le-shadow-xs);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.le-feature:hover { transform: translateY(-2px); box-shadow: var(--le-shadow-md); border-color: var(--le-border); }
.le-feature-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: var(--le-brand-50);
    color: var(--le-brand-600);
    display: grid; place-items: center;
    margin-bottom: .85rem;
}
[data-bs-theme="dark"] .le-feature-icon { background: rgba(99,102,241,.15); color: #C5CBFF; }
.le-feature h3 { font-size: 1.05rem; margin: 0 0 .35rem; letter-spacing: -0.01em; }
.le-feature p  { color: var(--le-text-muted); margin: 0; font-size: .95rem; }

/* Section helpers */
.le-section { padding: clamp(40px,5vw,72px) 0; }
.le-eyebrow {
    color: var(--le-brand-600);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .8rem;
}
[data-bs-theme="dark"] .le-eyebrow { color: #A3ABFF; }

/* CTA band */
.le-cta {
    position: relative;
    border-radius: var(--le-radius-lg);
    padding: clamp(32px,4vw,56px);
    background: var(--le-gradient-brand);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 25px 50px -20px rgba(67,56,202,.55);
}
.le-cta::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(500px 240px at 90% 0%, rgba(34,211,238,.35), transparent 60%);
}
.le-cta h2 { color: #fff; letter-spacing: -0.025em; font-weight: 700; }
.le-cta p  { color: rgba(255,255,255,.85); }
.le-cta .btn { box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); }
.le-cta .btn-light { background: #fff; color: var(--le-brand-700); }
.le-cta .btn-light:hover { background: #F1F3F9; color: var(--le-brand-700); }
.le-cta .btn-outline-light { border-color: rgba(255,255,255,.55); color: #fff; }
.le-cta .btn-outline-light:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.9); color: #fff; }

/* ---------- Auth layout ---------- */
.le-auth {
    min-height: calc(100vh - 72px);
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}
@media (min-width: 992px) {
    .le-auth { grid-template-columns: 1fr 1fr; }
}
.le-auth-panel {
    padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
    display: flex; align-items: center; justify-content: center;
}
.le-auth-panel > form, .le-auth-panel > .le-auth-inner { width: 100%; max-width: 420px; }
.le-auth-art {
    display: none;
    position: relative;
    background: var(--le-gradient-brand);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
@media (min-width: 992px) { .le-auth-art { display: flex; align-items: center; padding: 3rem; } }
.le-auth-art::before {
    content: ""; position: absolute; inset: -40% -20% auto -20%; height: 140%;
    background: radial-gradient(600px 360px at 75% 20%, rgba(34,211,238,.35), transparent 60%),
                radial-gradient(500px 300px at 10% 80%, rgba(255,255,255,.14), transparent 60%);
    z-index: -1;
}
.le-auth-art h2 { color: #fff; font-size: clamp(1.8rem, 2.6vw, 2.5rem); letter-spacing: -0.03em; font-weight: 700; }
.le-auth-art p  { color: rgba(255,255,255,.85); }
.le-auth-art ul { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .8rem; }
.le-auth-art ul li { display: flex; align-items: center; gap: .6rem; color: rgba(255,255,255,.92); }
.le-auth-art ul li::before {
    content: ""; width: 22px; height: 22px; border-radius: 50%;
    background: rgba(255,255,255,.22);
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
}

/* ---------- Footer ---------- */
.le-footer {
    padding: 32px 0 40px;
    color: var(--le-text-muted);
    border-top: 1px solid var(--le-border-soft);
    background: transparent;
}
.le-footer a { color: var(--le-text-muted); }
.le-footer a:hover { color: var(--le-text); }

/* ---------- Utilities ---------- */
.le-divider { height: 1px; background: var(--le-divider); margin: 2rem 0; }
.le-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--le-gradient-brand);
    color: #fff;
    display: inline-grid; place-items: center;
    font-weight: 700; font-size: .82rem;
    letter-spacing: -0.01em;
}
.le-avatar-image { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.le-app-bar-logo { width: 34px; height: 34px; border-radius: 9px; object-fit: contain; background: #fff; }

.le-account-logo-preview {
    position: sticky;
    top: 1.5rem;
    overflow: hidden;
    border: 1px solid var(--le-border);
    border-radius: 20px;
    background: var(--le-surface-2);
    box-shadow: var(--le-shadow-sm);
}
.le-account-logo-preview > .le-brand-preview-label { padding: 1rem 1.25rem 0; }
.le-account-logo-preview-bar { display: flex; align-items: center; gap: .85rem; padding: 1.25rem; color: var(--le-text); background: var(--le-surface); border-bottom: 1px solid var(--le-border); }
.le-account-logo-preview-bar > div:last-child { display: grid; gap: .1rem; }
.le-account-logo-preview-bar span { color: var(--le-text-muted); font-size: .78rem; }
.le-account-logo-preview-mark { width: 58px; height: 58px; display: grid; place-items: center; overflow: hidden; border-radius: 14px; color: #fff; background: var(--le-gradient-brand); font-size: 1.4rem; font-weight: 800; }
.le-account-logo-preview-mark img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.le-account-logo-preview-page { padding: 1.5rem; }
.le-account-logo-preview-line { width: 48%; height: 10px; margin-bottom: .65rem; border-radius: 999px; background: var(--le-surface-3); }
.le-account-logo-preview-line.wide { width: 72%; height: 15px; background: color-mix(in srgb, var(--le-brand-500) 20%, var(--le-surface-3)); }
.le-account-logo-preview-card { height: 130px; margin-top: 1.25rem; border: 1px solid var(--le-border); border-radius: 14px; background: var(--le-surface); }

/* ---------- Team roster ---------- */
.team-roster-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (min-width: 768px) {
    .team-roster-header {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}
.team-roster-count {
    width: 100%;
}
@media (min-width: 576px) {
    .team-roster-count {
        width: auto;
        min-width: 180px;
    }
}
.team-roster-actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: 1rem;
}
.team-roster-actions .btn {
    justify-content: center;
}
@media (min-width: 576px) {
    .team-roster-actions {
        flex-direction: row;
        align-items: center;
    }
}
.roster-mobile-list {
    display: grid;
    gap: .85rem;
}
.roster-player-card {
    position: relative;
    display: grid;
    gap: .9rem;
    background: var(--le-surface);
    border: 1px solid var(--le-border);
    border-radius: var(--le-radius);
    box-shadow: var(--le-shadow-sm);
    padding: 1rem;
}
.roster-player-card__header {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
    padding-right: 6.5rem;
}
.roster-player-card__header h2 {
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: 0;
}
.roster-player-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .65rem;
    color: var(--le-text-muted);
    font-size: .86rem;
}
.roster-player-card__status {
    position: absolute;
    top: 1rem;
    right: 1rem;
}
.roster-player-card__status + .roster-detail-grid {
    padding-top: .2rem;
}
.roster-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin: 0;
}
.roster-detail-grid > div {
    min-width: 0;
}
.roster-detail-grid > div:last-child {
    grid-column: 1 / -1;
}
.roster-detail-grid dt {
    color: var(--le-text-soft);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.roster-detail-grid dd {
    margin: .15rem 0 0;
    color: var(--le-text);
    overflow-wrap: anywhere;
}
.roster-uniform-list {
    margin: 0;
    padding-left: 1rem;
}
.roster-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}
.roster-avatar--empty {
    background: var(--le-gradient-brand);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
}
.roster-table {
    min-width: 1080px;
}
.roster-table td:first-child,
.roster-table th:first-child {
    width: 56px;
}
@media (max-width: 575.98px) {
    .roster-player-card {
        padding: .9rem;
    }
    .roster-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* Team branding editor — a live, app-like preview beside the controls. */
.le-brand-preview {
    position: sticky;
    top: 1.5rem;
    min-height: 34rem;
    padding: 1.35rem;
    border: 1px solid var(--le-border);
    border-radius: calc(var(--le-radius) + 4px);
    background:
        radial-gradient(circle at 86% 8%, color-mix(in srgb, var(--preview-accent) 18%, transparent), transparent 29%),
        linear-gradient(145deg, color-mix(in srgb, var(--preview-primary) 8%, var(--le-surface)) 0%, var(--le-surface-2) 100%);
    box-shadow: var(--le-shadow-sm);
}
.le-brand-preview-label {
    margin-bottom: .85rem;
    color: var(--le-text-soft);
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.le-brand-preview-shell {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--preview-primary) 16%, var(--le-border));
    border-radius: 20px;
    background: var(--le-surface);
    box-shadow: 0 22px 50px color-mix(in srgb, var(--preview-secondary) 18%, transparent);
}
.le-brand-preview-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 13rem;
    padding: 2rem;
    color: #fff;
    background:
        linear-gradient(125deg, color-mix(in srgb, var(--preview-primary) 92%, #111827), var(--preview-secondary));
}
.le-brand-preview-logo-wrap {
    width: 94px;
    height: 94px;
    flex: 0 0 94px;
    display: grid;
    place-items: center;
    padding: .65rem;
    border: 1px solid rgba(255,255,255,.36);
    border-radius: 24px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
.le-brand-preview-logo { width: 100%; height: 100%; object-fit: contain; }
.le-brand-preview-logo-fallback {
    color: var(--preview-primary);
    font-family: var(--le-font-display);
    font-size: 2.25rem;
    font-weight: 800;
}
.le-brand-preview-eyebrow { opacity: .72; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.le-brand-preview-hero h2 { margin: .2rem 0 .75rem; color: #fff; font-size: clamp(1.5rem, 2.2vw, 2.25rem); }
.le-brand-preview-pill {
    display: inline-flex;
    padding: .3rem .7rem;
    border-radius: 999px;
    color: color-mix(in srgb, var(--preview-secondary) 86%, #111827);
    background: var(--preview-accent);
    font-size: .76rem;
    font-weight: 700;
}
.le-brand-preview-body { padding: 1.5rem; }
.le-brand-preview-kicker { margin: 0 0 .7rem; color: var(--preview-primary); font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
.le-brand-preview-event { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--le-border); border-radius: 14px; }
.le-brand-preview-event > div:last-child { display: grid; gap: .2rem; }
.le-brand-preview-event span { color: var(--le-text-muted); font-size: .85rem; }
.le-brand-preview-date { width: 48px; height: 52px; display: grid; place-content: center; text-align: center; border-radius: 11px; color: #fff; background: var(--preview-primary); line-height: 1; }
.le-brand-preview-date strong { font-size: 1.25rem; }
.le-brand-preview-date span { margin-top: .2rem; color: rgba(255,255,255,.78); font-size: .62rem; font-weight: 700; }
.le-brand-preview-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-top: 1rem; }
.le-brand-preview-actions span { padding: .75rem; border-radius: 10px; text-align: center; color: #fff; background: var(--preview-primary); font-size: .82rem; font-weight: 700; }
.le-brand-preview-actions span:last-child { color: var(--preview-primary); background: color-mix(in srgb, var(--preview-primary) 10%, var(--le-surface)); }
.le-brand-preview-note { margin: 1rem 0 0; color: var(--le-text-muted); font-size: .78rem; text-align: center; }
@media (max-width: 991.98px) {
    .le-brand-preview { position: static; min-height: 0; }
}

/* Fade-in for page transitions */
/* Fill mode must be `backwards`, never `both`/`forwards`: a retained transform
   fill computes to an identity matrix (not `none`) in Chromium, so the page
   `<main>` keeps a stacking context forever and traps Bootstrap modals/offcanvas
   below the body-level .modal-backdrop — the dialog greys out the screen but is
   invisible and can't be dismissed. `backwards` drops the animated transform
   entirely once the animation finishes. */
@keyframes le-fade-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
.le-fade-in { animation: le-fade-up .35s ease backwards; }

/* Floating label fix for Bootstrap */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--le-text-soft);
    text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Dropdown menu polish */
.dropdown-menu {
    --bs-dropdown-bg: var(--le-surface);
    --bs-dropdown-border-color: var(--le-border);
    --bs-dropdown-border-radius: var(--le-radius);
    --bs-dropdown-link-color: var(--le-text);
    --bs-dropdown-link-hover-bg: var(--le-surface-3);
    --bs-dropdown-link-hover-color: var(--le-text);
    box-shadow: var(--le-shadow-md);
    padding: .4rem;
}
.dropdown-menu .dropdown-item { border-radius: var(--le-radius-xs); padding: .5rem .7rem; }

/* Nav tabs */
.nav-tabs {
    border-bottom: 1px solid var(--le-divider);
    gap: .25rem;
}
.nav-tabs .nav-link {
    border: 0;
    color: var(--le-text-muted);
    border-radius: var(--le-radius-sm) var(--le-radius-sm) 0 0;
    padding: .6rem .9rem;
    font-weight: 500;
}
.nav-tabs .nav-link:hover { background: var(--le-surface-3); color: var(--le-text); }
.nav-tabs .nav-link.active {
    color: var(--le-brand-600);
    background: transparent;
    border-bottom: 2px solid var(--le-brand-500);
}
[data-bs-theme="dark"] .nav-tabs .nav-link.active { color: #C5CBFF; border-bottom-color: #818CF8; }

/* Stacked tables on phones — opt-in via .le-stack-sm on a <table>.
   Below the sm breakpoint each row turns into a label/value list so wide
   ledger and payment tables read top-to-bottom instead of scrolling sideways.
   Each <td> shows its column header from a data-label attribute; cells left
   empty (e.g. a charge with no matching payment) drop out. */
@media (max-width: 575.98px) {
    table.le-stack-sm,
    table.le-stack-sm > tbody { display: block; width: 100%; }
    table.le-stack-sm > thead { display: none; }
    table.le-stack-sm > tbody > tr {
        display: block;
        padding: .6rem 0;
        border-top: 1px solid var(--le-divider);
    }
    table.le-stack-sm > tbody > tr:first-child { border-top: 0; padding-top: 0; }
    table.le-stack-sm > tbody > tr > td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        padding: .15rem 0 !important;
        border: 0 !important;
        text-align: right !important;
    }
    table.le-stack-sm > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        color: var(--le-text-muted);
        white-space: nowrap;
    }
    table.le-stack-sm > tbody > tr > td:empty { display: none; }
}

/* Household team calendar (month grid) */
.le-cal-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}
.le-cal-title { flex: 1 1 auto; text-align: center; }

.le-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--le-border);
    border: 1px solid var(--le-border);
    border-radius: var(--le-radius-sm);
    overflow: hidden;
}
.le-cal-weekday {
    background: var(--le-surface-3);
    color: var(--le-text-muted);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: center;
    padding: .4rem 0;
}
.le-cal-day {
    background: var(--le-surface);
    min-height: 6.25rem;
    padding: .3rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    position: relative;
}
.le-cal-day--muted { background: var(--le-surface-2); }
.le-cal-day--muted .le-cal-daynum { color: var(--le-text-soft); }
.le-cal-day--has-events {
    background: color-mix(in srgb, var(--le-brand-500) 10%, var(--le-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--le-brand-500) 22%, var(--le-border));
}
[data-bs-theme="dark"] .le-cal-day--has-events {
    background: color-mix(in srgb, var(--le-brand-400) 16%, var(--le-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--le-brand-300) 26%, var(--le-border));
}
.le-cal-daynum {
    font-size: .8rem;
    font-weight: 600;
    color: var(--le-text-muted);
    align-self: flex-end;
    line-height: 1.4;
}
.le-cal-day--today .le-cal-daynum {
    background: var(--le-brand-500);
    color: #fff;
    border-radius: 999px;
    width: 1.4rem;
    height: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.le-cal-daybadge {
    position: absolute;
    left: .35rem;
    bottom: .35rem;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .35rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--le-brand-500);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
}
.le-cal--compact .le-cal-grid {
    border-radius: var(--le-radius);
}
.le-cal-grid--compact .le-cal-weekday {
    font-size: .66rem;
    padding: .32rem 0;
}
.le-cal-day--compact {
    min-height: 3.3rem;
    padding: .28rem;
}
.le-cal-day--compact .le-cal-daynum {
    align-self: flex-start;
}
.le-dashboard-next-list {
    display: grid;
    gap: .85rem;
}
.le-dashboard-next-item {
    padding-top: .85rem;
    border-top: 1px solid var(--le-divider);
}
.le-dashboard-next-item:first-child {
    padding-top: 0;
    border-top: 0;
}

/* ---------- Team dashboard branding ---------- */
.team-brand-hero {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: clamp(1.35rem, 3vw, 2rem);
    background:
        radial-gradient(420px 220px at 100% 0%, rgba(var(--le-brand-primary-rgb), .18), transparent 60%),
        linear-gradient(145deg, color-mix(in srgb, var(--le-brand-500) 10%, #fff) 0%, var(--le-surface) 52%, color-mix(in srgb, var(--le-team-secondary, #111111) 6%, #fff) 100%);
    border: 1px solid color-mix(in srgb, var(--le-brand-500) 18%, var(--le-border));
    box-shadow: var(--le-shadow-md);
}
.team-brand-hero::after {
    content: "";
    position: absolute;
    inset: auto -4rem -4rem auto;
    width: 18rem;
    height: 18rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--le-brand-primary-rgb), .16) 0%, rgba(var(--le-brand-primary-rgb), 0) 72%);
    pointer-events: none;
}
.team-brand-hero__top {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    z-index: 1;
}
.team-brand-hero__identity {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}
.team-brand-hero__logo {
    width: 78px;
    height: 78px;
    flex: 0 0 auto;
    border-radius: 22px;
    background: rgba(255,255,255,.82);
    border: 1px solid color-mix(in srgb, var(--le-brand-500) 18%, var(--le-border));
    box-shadow: 0 16px 34px -26px rgba(var(--le-brand-primary-rgb), .55);
    padding: .6rem;
    object-fit: contain;
}
.team-brand-hero__eyebrow {
    color: color-mix(in srgb, var(--le-team-secondary, #111111) 70%, var(--le-text));
}
.team-brand-hero__title {
    margin: .35rem 0 0;
}
.team-brand-hero__meta {
    margin: .45rem 0 0;
    color: var(--le-text-muted);
    font-size: .98rem;
}
.team-brand-hero__wordmark {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.team-brand-hero__wordmark img {
    max-width: min(100%, 26rem);
    width: 100%;
    height: auto;
}
.team-brand-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}
.team-brand-hero__actions .btn-secondary {
    --bs-btn-bg: color-mix(in srgb, var(--le-team-secondary, #111111) 92%, white);
    --bs-btn-border-color: color-mix(in srgb, var(--le-team-secondary, #111111) 92%, white);
    --bs-btn-hover-bg: color-mix(in srgb, var(--le-team-secondary, #111111) 78%, white);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--le-team-secondary, #111111) 78%, white);
    --bs-btn-active-bg: color-mix(in srgb, var(--le-team-secondary, #111111) 68%, white);
    --bs-btn-active-border-color: color-mix(in srgb, var(--le-team-secondary, #111111) 68%, white);
    --bs-btn-disabled-bg: color-mix(in srgb, var(--le-team-secondary, #111111) 40%, white);
    --bs-btn-disabled-border-color: color-mix(in srgb, var(--le-team-secondary, #111111) 40%, white);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}
[data-bs-theme="dark"] .team-brand-hero {
    background:
        radial-gradient(420px 220px at 100% 0%, rgba(var(--le-brand-primary-rgb), .24), transparent 60%),
        linear-gradient(145deg, color-mix(in srgb, var(--le-brand-500) 16%, #111829) 0%, #111829 52%, color-mix(in srgb, var(--le-team-secondary, #111111) 18%, #111829) 100%);
    border-color: color-mix(in srgb, var(--le-brand-500) 22%, var(--le-border));
}
[data-bs-theme="dark"] .team-brand-hero__logo {
    background: rgba(17,24,41,.84);
    border-color: rgba(255,255,255,.08);
}
@media (min-width: 992px) {
    .team-brand-hero__top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(220px, 360px);
        align-items: center;
    }
    .team-brand-hero__actions {
        grid-column: 1 / -1;
    }
    .team-brand-hero__wordmark {
        justify-content: flex-end;
    }
}
@media (max-width: 575.98px) {
    .team-brand-hero__logo {
        width: 64px;
        height: 64px;
        border-radius: 18px;
    }
    .team-brand-hero__meta {
        font-size: .92rem;
    }
}

/* ---------- Operational page hierarchy ---------- */
html:not([data-le-scope="league"]) body.le-has-family-sidebar {
    --le-sidebar-width: 280px;
}
body.le-has-family-sidebar::after {
    opacity: .025;
}
[data-bs-theme="dark"] body.le-has-family-sidebar::after {
    opacity: .035;
}

.le-page-header {
    position: relative;
    display: grid;
    gap: 1.25rem;
    padding: clamp(1.25rem, 2.4vw, 1.75rem);
    background: var(--le-surface);
    border: 1px solid var(--le-border);
    border-radius: 18px;
    box-shadow: var(--le-shadow-xs);
}
.le-page-header__main {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-width: 0;
}
.le-page-header__title {
    margin: .25rem 0 0;
    font-size: clamp(1.65rem, 2.2vw, 2.1rem);
}
.le-page-header__meta {
    margin-top: .35rem;
    color: var(--le-text-muted);
    font-size: .95rem;
}
.le-page-header__actions {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}
.le-page-header__actions .dropdown {
    position: relative;
    z-index: 3;
}

.team-brand-hero {
    overflow: visible;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--le-brand-500) 6%, var(--le-surface)), var(--le-surface) 45%);
    border-color: var(--le-border);
    border-radius: 18px;
    box-shadow: var(--le-shadow-xs);
}
.team-brand-hero::after {
    inset: 0 0 0 auto;
    width: min(32%, 20rem);
    height: 100%;
    border-radius: 0 18px 18px 0;
    background: linear-gradient(90deg, transparent, rgba(var(--le-brand-primary-rgb), .07));
}
.team-brand-hero__logo {
    width: 68px;
    height: 68px;
    border-radius: 16px;
    box-shadow: none;
}
.team-brand-hero__wordmark {
    position: relative;
    z-index: 1;
    justify-content: flex-end;
    flex: 0 1 18rem;
}
.team-brand-hero__wordmark img {
    max-width: 18rem;
    max-height: 64px;
    object-fit: contain;
}
[data-bs-theme="dark"] .team-brand-hero {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--le-brand-500) 10%, var(--le-surface)), var(--le-surface) 45%);
    border-color: var(--le-border);
}

.le-action-center {
    box-shadow: var(--le-shadow-xs);
}
.le-action-item {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: .9rem;
    padding: .9rem 1.25rem;
    color: var(--le-text);
    background: var(--le-surface);
}
.le-action-item__status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--le-warning);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--le-warning) 14%, transparent);
}
.le-action-item__status.is-urgent {
    background: var(--le-danger);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--le-danger) 14%, transparent);
}
.le-action-item__arrow {
    color: var(--le-text-soft);
    font-size: 1.1rem;
}

.le-next-event {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.4rem;
    color: var(--le-text);
    background: var(--le-surface);
    border: 1px solid color-mix(in srgb, var(--le-brand-500) 24%, var(--le-border));
    border-left: 4px solid var(--le-brand-500);
    border-radius: 16px;
    box-shadow: var(--le-shadow-sm);
}
.le-next-event__date {
    display: grid;
    place-items: center;
    width: 62px;
    min-height: 64px;
    padding: .4rem;
    color: var(--le-brand-700);
    background: var(--le-brand-50);
    border-radius: 12px;
    line-height: 1;
}
.le-next-event__date span {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.le-next-event__date strong {
    font-family: var(--le-font-display);
    font-size: 1.65rem;
}
.le-next-event__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
}
.le-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .85rem;
}
.le-stat {
    height: 100%;
    box-shadow: var(--le-shadow-xs);
}
.le-stat-caption {
    margin-top: .2rem;
    color: var(--le-text-muted);
    font-size: .78rem;
}
.le-schedule-card {
    overflow: hidden;
    box-shadow: var(--le-shadow-xs);
}
.le-operational-table thead th {
    padding: .75rem 1rem;
    color: var(--le-text-soft);
    background: var(--le-surface-2);
    border-bottom-color: var(--le-border);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.le-operational-table tbody td {
    padding: .85rem 1rem;
    border-color: var(--le-divider);
}
.le-operational-table tbody tr:hover td {
    background: color-mix(in srgb, var(--le-brand-500) 3%, var(--le-surface));
}

@media (max-width: 991.98px) {
    .le-page-header__main {
        align-items: flex-start;
    }
    .team-brand-hero__wordmark {
        display: none;
    }
    .le-next-event {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .le-next-event__actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}
@media (max-width: 575.98px) {
    .le-page-header {
        padding: 1rem;
    }
    .le-page-header__actions > .btn,
    .le-page-header__actions > .dropdown,
    .le-page-header__actions > .dropdown > .btn {
        flex: 1 1 auto;
    }
    .le-page-header__actions > .dropdown > .btn {
        width: 100%;
    }
    .le-next-event {
        gap: .9rem;
        padding: 1rem;
    }
    .le-next-event__date {
        width: 54px;
        min-height: 58px;
    }
    .le-next-event__actions .btn,
    .le-next-event__actions .dropdown,
    .le-next-event__actions .dropdown > .btn {
        flex: 1 1 auto;
    }
    .le-next-event__actions .dropdown > .btn {
        width: 100%;
    }
    .le-operational-table {
        min-width: 660px;
    }
}

.le-cal-chip {
    display: block;
    text-decoration: none;
    font-size: .72rem;
    line-height: 1.2;
    padding: .12rem .3rem;
    border-radius: var(--le-radius-xs);
    border-left: 3px solid currentColor;
    background: var(--le-surface-3); /* fallback where color-mix is unsupported */
    background: color-mix(in srgb, currentColor 14%, var(--le-surface));
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.le-cal-chip:hover { background: color-mix(in srgb, currentColor 24%, var(--le-surface)); }
.le-cal-chip-time { font-weight: 700; }
.le-cal-chip-text { color: var(--le-text); }

/* Per-type accent: currentColor drives both the border and the tint. */
.le-cal-chip--game      { color: var(--le-danger); }
.le-cal-chip--practice  { color: var(--le-brand-500); }
.le-cal-chip--skills    { color: var(--le-info); }
.le-cal-chip--scrimmage { color: var(--le-accent-600); }
.le-cal-chip--tournament{ color: var(--le-warning); }
.le-cal-chip--meeting   { color: var(--le-text-soft); }
.le-cal-chip--club      { color: var(--le-accent-500); }
.le-cal-chip--travel    { color: var(--le-success); }
.le-cal-chip--tryout    { color: var(--le-brand-700); }
.le-cal-chip--training  { color: var(--le-success); }

.le-cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin-top: 1rem;
    font-size: .8rem;
    color: var(--le-text-muted);
}
.le-cal-legend-item { display: inline-flex; align-items: center; gap: .4rem; }
.le-cal-legend-dot {
    width: .8rem;
    height: .8rem;
    border-radius: 3px;
    background: currentColor;
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .le-cal-day { min-height: 4.5rem; padding: .2rem; }
    .le-cal-chip-text { display: none; }
    .le-cal-chip { text-align: center; padding: .1rem; }
    .le-cal-day--compact {
        min-height: 3rem;
        padding: .24rem;
    }
    .le-cal-daybadge {
        left: .24rem;
        bottom: .24rem;
        min-width: 1.2rem;
        height: 1.2rem;
        font-size: .64rem;
    }
}

/* ---------- Dashboard messages card ---------- */
/* Two presentations share one list: coach messages render email-style
   (le-msg--email), every other sender renders text-message-style
   (le-msg--text). Unread rows get a brand accent + heavier weight. */
.le-msg-list { display: flex; flex-direction: column; gap: .85rem; }

.le-msg { display: block; }
.le-msg .le-msg-subject { font-weight: 600; }
.le-msg .le-msg-preview { color: var(--le-text-soft); }
.le-msg .le-msg-time { color: var(--le-text-soft); font-size: .78rem; }

/* Email style: avatar + subject-led block, like an inbox row. */
.le-msg--email {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .75rem .85rem;
    border: 1px solid var(--le-border);
    border-radius: 12px;
    background: var(--le-surface);
    transition: border-color .12s ease, background .12s ease;
}
.le-msg--email:hover { border-color: var(--le-brand-500); }
.le-msg--email .le-msg-avatar { flex: 0 0 auto; }
.le-msg--email .le-msg-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.le-msg--email .le-msg-line { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.le-msg--email .le-msg-from { font-weight: 600; }
.le-msg--email .le-msg-time { margin-left: auto; }
.le-msg--email .le-msg-preview {
    font-size: .85rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Text style: a left-aligned chat bubble with the sender above and time below. */
.le-msg--text { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; }
.le-msg--text .le-msg-sender { font-size: .78rem; color: var(--le-text-soft); padding-left: .25rem; }
.le-msg--text .le-msg-bubble {
    display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
    max-width: min(85%, 32rem);
    padding: .55rem .8rem;
    border-radius: 14px 14px 14px 4px;
    background: var(--le-brand-50, color-mix(in srgb, var(--le-brand-500) 10%, var(--le-surface)));
    color: var(--le-text);
}
.le-msg--text .le-msg-preview { font-size: .9rem; }
.le-msg--text .le-msg-time { padding-left: .25rem; }
[data-bs-theme="dark"] .le-msg--text .le-msg-bubble {
    background: color-mix(in srgb, var(--le-brand-500) 22%, transparent);
}

/* Unread accent for both styles. */
.le-msg--unread.le-msg--email { border-color: color-mix(in srgb, var(--le-brand-500) 45%, var(--le-border)); }
.le-msg--unread .le-msg-from,
.le-msg--unread .le-msg-sender,
.le-msg--unread .le-msg-subject { font-weight: 700; }
.le-msg--unread .le-msg-preview { color: var(--le-text); }

/* ---------- Parent-to-parent chat thread ---------- */
.le-chat { display: flex; flex-direction: column; gap: .6rem; }
.le-chat-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 80%; }
.le-chat-msg--mine { align-self: flex-end; align-items: flex-end; }
.le-chat-bubble {
    padding: .55rem .8rem;
    border-radius: 14px 14px 14px 4px;
    background: var(--le-surface-2, color-mix(in srgb, var(--le-text) 6%, var(--le-surface)));
    color: var(--le-text);
    white-space: pre-wrap; word-break: break-word;
}
.le-chat-msg--mine .le-chat-bubble {
    border-radius: 14px 14px 4px 14px;
    background: var(--le-brand-500);
    color: #fff;
}
.le-chat-time { font-size: .72rem; color: var(--le-text-soft); margin-top: .15rem; padding: 0 .25rem; }

/* Directory rows reuse the avatar; keep the inline message form from overflowing. */
.le-dir-row .form-control { min-width: 0; }

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--le-border) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--le-border); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--le-text-soft); background-clip: padding-box; border: 2px solid transparent; }

/* ---------- Setup wizards (Player / Coach / Club / League onboarding) ---------- */

/* Dashboard "finish your setup" banner. Brand-tinted surface so it reads as a
   gentle prompt, not an error. */
.le-setup-banner {
    background: var(--le-gradient-hero), var(--le-surface);
    border: 1px solid color-mix(in srgb, var(--le-brand-500) 22%, var(--le-border));
    border-radius: var(--le-radius);
    box-shadow: var(--le-shadow-sm);
    padding: 1.1rem 1.35rem;
}
.le-setup-banner__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.le-setup-banner__title { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; margin-top: .15rem; }
.le-setup-banner__meta { color: var(--le-text-muted); font-size: .9rem; }
.le-setup-banner__actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.le-setup-banner__dismiss { color: var(--le-text-muted); text-decoration: none; }

/* Slim progress bar reused by the banner and the overview. */
.le-setup-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--le-surface-3);
    overflow: hidden;
    max-width: 360px;
}
.le-setup-progress__bar {
    height: 100%;
    border-radius: 999px;
    background: var(--le-gradient-brand);
    transition: width .3s ease;
}

/* Horizontal step indicator on each wizard page. */
.le-setup-steps { margin-bottom: 1.5rem; }
.le-setup-steps__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.25rem;
    padding: 0;
    margin: 0;
}
.le-setup-steps__link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    color: var(--le-text-soft);
    font-weight: 500;
    font-size: .92rem;
}
.le-setup-steps__marker {
    width: 26px; height: 26px;
    border-radius: 999px;
    display: grid; place-items: center;
    font-size: .8rem; font-weight: 700;
    background: var(--le-surface-3);
    color: var(--le-text-muted);
    border: 1px solid var(--le-border);
    flex-shrink: 0;
}
.le-setup-steps__item.is-current .le-setup-steps__link { color: var(--le-text); }
.le-setup-steps__item.is-current .le-setup-steps__marker {
    background: var(--le-brand-500);
    color: var(--le-text-invert);
    border-color: var(--le-brand-500);
}
.le-setup-steps__item.is-done .le-setup-steps__link { color: var(--le-text-muted); }
.le-setup-steps__item.is-done .le-setup-steps__marker {
    background: color-mix(in srgb, var(--le-success) 16%, var(--le-surface));
    color: var(--le-success);
    border-color: color-mix(in srgb, var(--le-success) 40%, var(--le-border));
}

/* Overview checklist rows. */
.le-setup-list { display: grid; gap: .75rem; }
.le-setup-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--le-surface);
    border: 1px solid var(--le-border);
    border-radius: var(--le-radius);
    box-shadow: var(--le-shadow-xs);
}
.le-setup-row__check {
    width: 30px; height: 30px;
    border-radius: 999px;
    display: grid; place-items: center;
    flex-shrink: 0;
    border: 2px solid var(--le-border);
    color: var(--le-text-soft);
}
.le-setup-row.is-done .le-setup-row__check {
    background: var(--le-success);
    border-color: var(--le-success);
    color: var(--le-text-invert);
}
.le-setup-row__title { font-weight: 600; }
.le-setup-row__blurb { color: var(--le-text-muted); font-size: .9rem; margin-top: .1rem; }
.le-setup-row__action { margin-left: auto; align-self: center; flex-shrink: 0; }

/* Step page card wrapper. */
.le-setup-card {
    background: var(--le-surface);
    border: 1px solid var(--le-border);
    border-radius: var(--le-radius);
    box-shadow: var(--le-shadow-sm);
    padding: clamp(1.25rem, 3vw, 2rem);
    max-width: 720px;
}
.le-setup-card__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1.5rem;
}

/* ---------- Liability waiver consent (read-in-popout + signature pad) ---------- */

/* Scrollable inline preview of the full waiver text. */
.le-waiver-preview {
    max-height: 20rem;
    overflow-y: auto;
    background: var(--le-surface);
    border: 2px solid color-mix(in srgb, var(--le-text) 48%, var(--le-border)) !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .08), inset 0 0 0 1px rgba(15, 23, 42, .04);
    scrollbar-color: color-mix(in srgb, var(--le-text) 42%, transparent) var(--le-surface-3);
}
.le-waiver-preview__heading {
    position: sticky;
    top: -1rem;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: -1rem -1rem 1rem;
    padding: .75rem 1rem;
    color: var(--le-text);
    background: var(--le-surface);
    border-bottom: 1px solid color-mix(in srgb, var(--le-text) 22%, var(--le-border));
}
.le-waiver-preview__heading span {
    color: var(--le-text-muted);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.le-waiver-text p { font-size: .95rem; line-height: 1.62; margin-bottom: .8rem; }
.le-waiver-text p:last-child { margin-bottom: 0; }

/* "and confirm" divider between the drawn signature and the digital accept. */
.le-waiver-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    letter-spacing: .08em;
    font-weight: 600;
}
.le-waiver-divider::before,
.le-waiver-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--le-border);
}

/* Signature pad: keep a paper-white surface with dark ink in both themes so
   the captured legal signature remains readable everywhere. touch-action:none
   keeps a finger drag from scrolling while signing. */
.le-sigpad {
    position: relative;
    border: 2px solid var(--le-border);
    border-radius: var(--le-radius-sm);
    background: #ffffff;
    max-width: 30rem;
    color-scheme: light;
}
[data-bs-theme="dark"] .le-sigpad,
[data-bs-theme="dark"] .le-signature-canvas {
    background: #ffffff !important;
    border-color: #64748b !important;
}
[data-bs-theme="dark"] .le-sigpad__canvas {
    background: #ffffff !important;
}
[data-bs-theme="dark"] .le-sigpad__clear {
    color: #334155;
}
[data-bs-theme="dark"] .le-waiver-consent .form-check {
    padding: .85rem .9rem .85rem 2.8rem;
    color: var(--le-text);
    background: #172033;
    border: 1px solid #64748b;
    border-radius: .75rem;
}
[data-bs-theme="dark"] .le-waiver-consent .form-check-input {
    width: 1.3rem;
    height: 1.3rem;
    margin-left: -1.9rem;
    margin-top: .05rem;
    background-color: #0b1220;
    border: 2px solid #cbd5e1;
    color-scheme: light;
    -webkit-appearance: none;
    appearance: none;
}
[data-bs-theme="dark"] .le-waiver-consent .form-check-input:hover {
    border-color: #ffffff;
}
[data-bs-theme="dark"] .le-waiver-consent .form-check-input:focus {
    border-color: #c4b5fd;
    box-shadow: 0 0 0 .22rem rgba(167, 139, 250, .3);
}
[data-bs-theme="dark"] .le-waiver-consent .form-check-input:checked {
    background-color: #8b5cf6;
    border-color: #ddd6fe;
}
[data-bs-theme="dark"] .le-waiver-consent .form-check-label {
    color: #f8fafc;
}
[data-bs-theme="dark"] :where(.le-waiver-page, .le-waiver-consent) .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: .1rem;
    background-color: #f8fafc;
    border: 2px solid #cbd5e1;
}
[data-bs-theme="dark"] :where(.le-waiver-page, .le-waiver-consent) .form-check-input:hover {
    border-color: #ffffff;
}
[data-bs-theme="dark"] :where(.le-waiver-page, .le-waiver-consent) .form-check-input:focus {
    border-color: #c4b5fd;
    box-shadow: 0 0 0 .22rem rgba(167, 139, 250, .28);
}
[data-bs-theme="dark"] :where(.le-waiver-page, .le-waiver-consent) .form-check-input:checked {
    background-color: #8b5cf6;
    border-color: #c4b5fd;
}
[data-bs-theme="dark"] :where(.le-waiver-page, .le-waiver-consent) .form-check-label {
    padding-left: .15rem;
    color: var(--le-text);
}

/* Public signup follows the sending club's public-site theme. Its dark variant
   is deliberately neutral black rather than the app shell's blue-black, which
   also prevents Edge mobile from applying its own muddy auto-dark transform. */
[data-bs-theme="dark"] body.le-public-registration-page {
    --le-bg: #000000;
    --le-surface: #101012;
    --le-surface-2: #0a0a0c;
    --le-surface-3: #19191c;
    --le-border: #34343a;
    --le-border-soft: #252529;
    --le-divider: #252529;
    --le-gradient-hero: linear-gradient(#000000, #000000);
    --bs-body-bg: var(--le-bg);
}
[data-bs-theme="dark"] body.le-public-registration-page::after {
    display: none;
}
[data-bs-theme="dark"] body.le-public-registration-page .le-navbar-public::before {
    background: #000000;
}
.le-sigpad__canvas {
    display: block;
    width: 100%;
    height: 120px;
    touch-action: none;
    cursor: crosshair;
    border-radius: var(--le-radius-sm);
}
.le-sigpad__clear {
    position: absolute;
    top: .25rem;
    right: .5rem;
    padding: 0;
    color: var(--le-text-muted);
    text-decoration: none;
}

/* Parent-facing waiver canvases must read as interactive fields, particularly
   on the white surfaces used throughout registration in light mode. */
[data-bs-theme="light"] .le-sigpad,
[data-bs-theme="light"] .le-signature-canvas {
    border: 2px solid #667085 !important;
    box-shadow: inset 0 0 0 1px rgba(11, 18, 32, .05);
}

/* ===== League-manager shell — jazzyouth.com look (purple / white / black) =====
   Scoped to the LeagueAdmin area (see _Layout.cshtml stamps data-le-scope
   ="league" on <html>). Renders in light mode — the app default — like the
   public Jazz Bantam site: white content, black top nav, Jazz purple gradient
   branding. Pins the Jazz purple brand so the league manager always reads as
   jazzyouth.com even when the admin's own club has different configured colors.
   Club, coach, and parent screens are untouched and keep their club branding. */
html[data-le-scope="league"] {
    /* Jazz purple brand — the --le-brand-* scale is color-mixed from these. */
    --le-team-primary:   #4E008E; /* Jazz Bantam purple — matched to logo banner */
    --le-team-secondary: #3A1259; /* deep purple — gradient anchor */
    --le-team-accent:    #8A2AE0; /* bright Jazz Bantam purple — accents */
    --le-team-primary-rgb:   78,0,142;
    --le-team-secondary-rgb: 58,18,89;
    --le-team-accent-rgb:    138,42,224;
}
/* Black top navbar with white text/logo — the jazzyouth.com signature. Repaint
   the glass ::before solid near-black (matches the public top navbar). */
html[data-le-scope="league"] .le-navbar::before {
    background: #0B0A0F;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html[data-le-scope="league"] .le-navbar { border-bottom-color: rgba(255, 255, 255, .08); }
html[data-le-scope="league"] .le-navbar .navbar-brand,
html[data-le-scope="league"] .le-navbar .navbar-brand:hover { color: #fff; }
html[data-le-scope="league"] .le-navbar .le-shell-toggle {
    color: rgba(255, 255, 255, .85);
    border-color: rgba(255, 255, 255, .35);
}
html[data-le-scope="league"] .le-navbar .le-shell-toggle:hover {
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .5);
}
/* Bold Jazz purple gradient banner with white text and a white pill CTA — the
   jazzyouth.com Jazz Bantam hero banner, applied to the dashboard setup banner. */
html[data-le-scope="league"] .le-setup-banner {
    background: var(--le-gradient-brand);
    border: none;
    color: #fff;
    box-shadow: 0 18px 40px -18px rgba(78, 0, 142, .7);
}
html[data-le-scope="league"] .le-setup-banner .le-setup-banner__title,
html[data-le-scope="league"] .le-setup-banner .le-setup-banner__meta { color: #fff; }
html[data-le-scope="league"] .le-setup-banner .le-eyebrow { color: rgba(255, 255, 255, .82); }
html[data-le-scope="league"] .le-setup-banner .le-setup-progress { background: rgba(255, 255, 255, .28); }
html[data-le-scope="league"] .le-setup-banner .le-setup-progress__bar { background: #fff; }
html[data-le-scope="league"] .le-setup-banner .le-setup-banner__dismiss { color: rgba(255, 255, 255, .85); }
html[data-le-scope="league"] .le-setup-banner .btn-primary {
    --bs-btn-bg: #fff; --bs-btn-border-color: #fff; --bs-btn-color: #4E008E;
    --bs-btn-hover-bg: #F2ECF8; --bs-btn-hover-border-color: #F2ECF8; --bs-btn-hover-color: #3E0072;
    --bs-btn-active-bg: #E9DFF4; --bs-btn-active-border-color: #E9DFF4; --bs-btn-active-color: #3E0072;
    border-radius: var(--le-radius-pill);
    font-weight: 700;
}
/* League shares the portal sidebar design; only the header and brand colour
   differ (colour flows from --le-team-primary, pinned to Jazz purple here). */
[data-bs-theme="light"][data-le-scope="league"] .le-sidebar-link.active .le-sidebar-icon {
    color: #FFFFFF;
    background: linear-gradient(145deg, #6320A6 0%, #4E008E 100%);
}

/* Light navigation treatment. Accent states follow the resolved tenant
   palette emitted by TeamTheme; neutral text and surfaces stay fixed for
   readability. */
[data-bs-theme="light"] body.le-has-family-sidebar {
    --le-sidebar-width: 322px;
}
[data-bs-theme="light"] .le-sidebar-panel {
    /* Sidebar accent follows the club/team brand (pinned to Jazz purple in the
       league scope); each club/team colours its own menu. */
    --le-sidebar-purple: var(--le-team-primary, #4E008E);
    --le-sidebar-purple-light: color-mix(in srgb, var(--le-team-primary, #4E008E) 12%, white);
    --le-sidebar-brand: var(--le-brand-600);
    --le-sidebar-brand-soft: var(--le-brand-50);
    --le-sidebar-text: #111827;
    --le-sidebar-text-secondary: #6B7280;
    --le-sidebar-hover: #F9FAFB;
    --le-sidebar-tree-line: #ECECEC;
    padding: 20px 16px 16px;
    background: #FFFFFF;
    border-color: #E5E7EB;
    box-shadow: 0 0 20px rgba(0, 0, 0, .05);
}
[data-bs-theme="light"] .le-sidebar-panel-head {
    padding: 0 4px 4px;
}
[data-bs-theme="light"] .le-sidebar-sections,
[data-bs-theme="light"] .le-sidebar-section,
[data-bs-theme="light"] .le-sidebar-nav {
    gap: 0;
}
[data-bs-theme="light"] .le-sidebar-section-title {
    padding: 20px 8px 8px;
    color: var(--le-sidebar-brand);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
}
[data-bs-theme="light"] .le-sidebar-link {
    min-height: 48px;
    gap: 12px;
    margin: 2px 0;
    padding: 4px 10px;
    border: 0;
    border-radius: 10px;
    color: var(--le-sidebar-text);
    font-size: 14px;
    font-weight: 500;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}
[data-bs-theme="light"] .le-sidebar-nav > .le-sidebar-link {
    color: var(--le-sidebar-text);
}
[data-bs-theme="light"] .le-sidebar-link:hover {
    color: var(--le-sidebar-text);
    background: var(--le-sidebar-hover);
    border-color: transparent;
}
[data-bs-theme="light"] .le-sidebar-link.active,
[data-bs-theme="light"][data-le-scope="league"] .le-sidebar-link.active {
    color: #fff;
    background: var(--le-sidebar-brand);
    border-color: transparent;
    font-weight: 600;
    box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--le-sidebar-brand) 70%, transparent);
}
/* Solid filled pill now carries the active state, so the left accent bar is gone. */
[data-bs-theme="light"] .le-sidebar-link.active::before {
    display: none;
}
/* Flat glyphs, no grey tile — matches the Stripe-style mockup. */
[data-bs-theme="light"] .le-sidebar-icon {
    width: 22px;
    height: 22px;
    border-radius: 0;
    color: #6B7280;
    background: none;
}
[data-bs-theme="light"] .le-sidebar-link.active .le-sidebar-icon,
[data-bs-theme="light"][data-le-scope="league"] .le-sidebar-link.active .le-sidebar-icon {
    color: #FFFFFF;
    background: none;
}
[data-bs-theme="light"] .le-sidebar-label {
    flex: 1;
    font-size: 14px;
    font-weight: inherit;
    letter-spacing: -.01em;
}
[data-bs-theme="light"] .le-sidebar-group-row {
    gap: 0;
}
[data-bs-theme="light"] .le-sidebar-caret {
    width: 36px;
    height: 36px;
    color: #9CA3AF;
}
[data-bs-theme="light"] .le-sidebar-group-items {
    --le-sidebar-tree-line: #C3B8D9;
    gap: 0;
    margin: 2px 0 8px 21px;
    padding: 0 0 0 16px;
}
[data-bs-theme="light"] .le-sidebar-group-items::before {
    top: 2px;
    bottom: 6px;
    left: 0;
    width: 1px;
    background: var(--le-sidebar-tree-line);
}
/* No per-item dots and no horizontal branch stubs — a clean vertical rail with a
   single dot on the active item (matches the mockup). */
[data-bs-theme="light"] .le-sidebar-group-items .le-sidebar-icon {
    display: none;
}
[data-bs-theme="light"] .le-sidebar-group-items .le-sidebar-link::after {
    display: none;
}
[data-bs-theme="light"] .le-sidebar-group-items .le-sidebar-link {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 0;
    margin: 2px 0;
    padding: 8px 0;
    border-radius: 12px;
    color: var(--le-sidebar-text-secondary);
    font-size: 14px;
    font-weight: 500;
}
[data-bs-theme="light"] .le-sidebar-group-items .le-sidebar-link:hover {
    color: var(--le-sidebar-brand);
    background: var(--le-sidebar-hover);
}
[data-bs-theme="light"] .le-sidebar-group-items .le-sidebar-link.active {
    color: var(--le-sidebar-brand);
    background: transparent;
    font-weight: 600;
}
/* A node on the rail for every nested item; the active one is emphasised. */
[data-bs-theme="light"] .le-sidebar-group-items .le-sidebar-link::before {
    content: "";
    display: block;
    position: absolute;
    left: -16px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--le-sidebar-tree-line, #C3B8D9);
    transform: translate(-50%, -50%);
}
[data-bs-theme="light"] .le-sidebar-group-items .le-sidebar-link.active::before {
    width: 8px;
    height: 8px;
    background: var(--le-sidebar-brand);
}
/* Active parent row becomes the pill so the expand chevron lives inside it. */
[data-bs-theme="light"] .le-sidebar-group-row:has(> .le-sidebar-link.active) {
    border-radius: 10px;
    background: var(--le-sidebar-brand);
}
[data-bs-theme="light"] .le-sidebar-group-row:has(> .le-sidebar-link.active) > .le-sidebar-link.active {
    color: #fff;
    background: transparent;
    box-shadow: none;
}
[data-bs-theme="light"] .le-sidebar-group-row:has(> .le-sidebar-link.active) > .le-sidebar-link.active .le-sidebar-icon {
    color: #fff;
}
[data-bs-theme="light"] .le-sidebar-group-row:has(> .le-sidebar-link.active) > .le-sidebar-caret {
    color: #fff;
}
[data-bs-theme="light"] .le-sidebar-usercard {
    padding: 14px;
    border: 1px solid #ECECEC;
    border-radius: 16px;
    background: #FAFAFA;
}
[data-bs-theme="light"] .le-account-menu-wrap {
    padding-inline: 3px;
}
[data-bs-theme="light"] .le-sidebar-usercard:hover {
    background: var(--le-sidebar-hover);
}
[data-bs-theme="light"] .le-sidebar-usercard .le-avatar {
    width: 42px;
    height: 42px;
    background: var(--le-gradient-brand);
    font-weight: 700;
}
[data-bs-theme="light"] .le-sidebar-userlabel { color: var(--le-sidebar-text-secondary); }
[data-bs-theme="light"] .le-sidebar-username { color: var(--le-sidebar-text); }

/* Dark navigation treatment: deep navy chrome with a high-contrast Jazz
   gradient for the selected destination. */
[data-bs-theme="dark"] .le-sidebar-panel,
[data-bs-theme="dark"][data-le-scope="league"] body.le-area-leagueadmin .le-sidebar-panel {
    --le-sidebar-tree-line: rgba(255, 255, 255, .12);
    background: #0C1020;
    border-color: rgba(255, 255, 255, .08);
    box-shadow: none;
}
[data-bs-theme="dark"] .le-sidebar-link,
[data-bs-theme="dark"][data-le-scope="league"] body.le-area-leagueadmin .le-sidebar-link {
    color: rgba(255, 255, 255, .80);
}
[data-bs-theme="dark"] .le-sidebar-link:hover,
[data-bs-theme="dark"][data-le-scope="league"] body.le-area-leagueadmin .le-sidebar-link:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, .06);
    border-color: transparent;
}
[data-bs-theme="dark"] .le-sidebar-link.active,
[data-bs-theme="dark"][data-le-scope="league"] body.le-area-leagueadmin .le-sidebar-link.active {
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--le-team-accent, #7C3AED), var(--le-team-primary, #5B21B6));
    border-color: transparent;
}
[data-bs-theme="dark"] .le-sidebar-link.active::before {
    display: none;
}
[data-bs-theme="dark"] .le-sidebar-link.active .le-sidebar-icon,
[data-bs-theme="dark"][data-le-scope="league"] body.le-area-leagueadmin .le-sidebar-link.active .le-sidebar-icon {
    color: #FFFFFF;
    background: none;
    border-color: transparent;
}

/* Dark: mirror the light nested treatment — clean rail, single dot on the active
   item only, and the expand chevron inside the active parent pill. */
[data-bs-theme="dark"] .le-sidebar-group-items {
    --le-sidebar-tree-line: rgba(255, 255, 255, .16);
    margin: 2px 0 8px 21px;
    padding: 0 0 0 16px;
}
[data-bs-theme="dark"] .le-sidebar-group-items::before {
    top: 2px;
    bottom: 6px;
    left: 0;
    width: 1px;
    background: var(--le-sidebar-tree-line);
}
[data-bs-theme="dark"] .le-sidebar-group-items .le-sidebar-icon { display: none; }
[data-bs-theme="dark"] .le-sidebar-group-items .le-sidebar-link::after { display: none; }
[data-bs-theme="dark"] .le-sidebar-group-items .le-sidebar-link {
    color: rgba(255, 255, 255, .66);
}
[data-bs-theme="dark"] .le-sidebar-group-items .le-sidebar-link:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, .06);
}
[data-bs-theme="dark"] .le-sidebar-group-items .le-sidebar-link.active {
    color: #C4B5FD;
    background: transparent;
    box-shadow: none;
    font-weight: 600;
}
[data-bs-theme="dark"] .le-sidebar-group-items .le-sidebar-link::before {
    content: "";
    display: block;
    position: absolute;
    left: -16px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    transform: translate(-50%, -50%);
}
[data-bs-theme="dark"] .le-sidebar-group-items .le-sidebar-link.active::before {
    width: 8px;
    height: 8px;
    background: #A78BFA;
}
[data-bs-theme="dark"] .le-sidebar-group-row:has(> .le-sidebar-link.active) {
    border-radius: 10px;
    background: linear-gradient(135deg, var(--le-team-accent, #7C3AED), var(--le-team-primary, #5B21B6));
}
[data-bs-theme="dark"] .le-sidebar-group-row:has(> .le-sidebar-link.active) > .le-sidebar-link.active {
    color: #FFFFFF;
    background: transparent;
    box-shadow: none;
}
[data-bs-theme="dark"] .le-sidebar-group-row:has(> .le-sidebar-link.active) > .le-sidebar-link.active .le-sidebar-icon {
    color: #FFFFFF;
    background: none;
}
[data-bs-theme="dark"] .le-sidebar-group-row:has(> .le-sidebar-link.active) > .le-sidebar-caret {
    color: #FFFFFF;
}

/* League Admin keeps its distinct branded header (logo lockup + collapse button);
   the navigation itself now uses the shared portal design (no bespoke nav
   overrides), so every profile's menu matches — only the brand colour differs. */
html[data-le-scope="league"] body.le-area-leagueadmin {
    --le-sidebar-width: 320px;
}
html[data-le-scope="league"] body.le-area-leagueadmin .le-sidebar-panel-head {
    min-height: 42px;
    margin: 2px 0 20px;
    padding: 0 2px;
}
html[data-le-scope="league"] body.le-area-leagueadmin .le-sidebar-brand-logo {
    display: block;
    height: 40px;
    width: auto;
    max-width: calc(100% - 52px);
    object-fit: contain;
    object-position: left center;
    /* Source logo is white; darken to navy so it reads on the light panel. */
    filter: brightness(0) saturate(100%) invert(12%) sepia(15%) saturate(979%) hue-rotate(183deg) brightness(93%) contrast(96%);
}
html[data-le-scope="league"] body.le-area-leagueadmin .le-sidebar-collapse {
    width: 40px;
    height: 40px;
    margin-left: auto;
    border-radius: 50%;
    color: #94A3B8;
    background: #F8FAFC;
    border-color: #EEF2F7;
}
html[data-le-scope="league"] body.le-area-leagueadmin .le-sidebar-collapse:hover {
    color: var(--le-brand-600);
    background: var(--le-brand-50);
    transform: none;
}
[data-bs-theme="dark"][data-le-scope="league"] body.le-area-leagueadmin .le-sidebar-brand-logo {
    filter: none;
}
[data-bs-theme="dark"][data-le-scope="league"] body.le-area-leagueadmin .le-sidebar-collapse {
    color: #FFFFFF;
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .08);
}
[data-bs-theme="dark"][data-le-scope="league"] body.le-area-leagueadmin .le-sidebar-collapse:hover {
    background: rgba(255, 255, 255, .08);
}

html[data-le-scope="league"] .le-event-form {
    max-width: 960px;
}

html[data-le-scope="league"] .le-event-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    align-items: start;
}

html[data-le-scope="league"] .le-event-form-grid__span-2 {
    grid-column: span 2;
}

html[data-le-scope="league"] .le-event-form-grid__full {
    grid-column: 1 / -1;
}

@media (max-width: 767.98px) {
    html[data-le-scope="league"] .le-event-form-grid {
        grid-template-columns: 1fr;
    }

    html[data-le-scope="league"] .le-event-form-grid__span-2 {
        grid-column: auto;
    }
}

/* Jeff 7/3/26: shared row-action icons (_IconPencil / _IconTrash partials).
   Outlined SVGs that stroke currentColor — the pencil stays monochrome inside
   btn-outline-secondary, the trash goes red inside btn-outline-danger. */
.icon-action {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    vertical-align: -0.155em;
}

/* Monochrome outline icon system. Sidebar icons are rendered from the shared
   navigation partial, so desktop/mobile copies remain identical. */
[data-le-icon],
.icon-action,
.le-sidebar-icon svg,
.le-account-menu-icon svg,
.le-stat-icon svg,
.le-kpi-icon svg,
.le-event-icon svg,
.btn > svg,
.dropdown-toggle > svg,
.le-shell-toggle svg,
.le-app-bar-btn svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    shape-rendering: geometricPrecision;
}

.btn > svg,
.dropdown-toggle > svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    vertical-align: -0.15em;
}

.le-sidebar-icon svg,
.le-stat-icon svg,
.le-kpi-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* League-manager delivery guide for the Jazz Bantam requirements. */
.le-jazz-help-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    padding: .5rem 0 1.5rem;
    border-bottom: 1px solid var(--le-border);
}
.le-jazz-help-head h1 {
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    letter-spacing: 0;
}
.le-jazz-help-head p {
    max-width: 760px;
}
.le-jazz-help-status {
    display: grid;
    gap: .5rem;
    flex: 0 0 auto;
    color: var(--le-text-muted);
    font-size: .82rem;
}
.le-jazz-help-status span {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
}
.le-jazz-help-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: #16835d;
    box-shadow: 0 0 0 3px color-mix(in srgb, #16835d 16%, transparent);
}
.le-jazz-help-dot.is-open {
    background: #b96b12;
    box-shadow: 0 0 0 3px color-mix(in srgb, #b96b12 16%, transparent);
}
.le-jazz-help-jumps {
    display: flex;
    gap: .5rem 1.25rem;
    overflow-x: auto;
    padding: 1rem 0;
    border-bottom: 1px solid var(--le-border-soft);
    scrollbar-width: thin;
}
.le-jazz-help-jumps a {
    color: var(--le-text-muted);
    font-size: .84rem;
    font-weight: 650;
    white-space: nowrap;
    text-decoration: none;
}
.le-jazz-help-jumps a:hover,
.le-jazz-help-jumps a:focus-visible {
    color: var(--le-brand-700);
}
.le-jazz-help-launch {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0 2.75rem;
    padding: 1rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--le-brand-500) 24%, var(--le-border));
    border-radius: 8px;
    background: var(--le-surface-2);
}
.le-jazz-help-launch-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--le-brand-700);
    background: var(--le-brand-50);
}
.le-jazz-help-launch-icon svg,
.le-jazz-help-launch .btn svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.le-jazz-help-launch .btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.le-jazz-help-url {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--le-brand-700);
    font-family: var(--bs-font-monospace);
    font-size: .86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.le-jazz-help-body {
    max-width: 1080px;
}
.le-jazz-help-section {
    scroll-margin-top: 1rem;
    padding: 0 0 3.25rem;
}
.le-jazz-help-section + .le-jazz-help-section {
    padding-top: 2.5rem;
    border-top: 1px solid var(--le-border);
}
.le-jazz-help-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.4rem;
}
.le-jazz-help-section-head > div {
    display: flex;
    align-items: baseline;
    gap: .8rem;
}
.le-jazz-help-section-head h2 {
    margin: 0;
    font-size: 1.45rem;
    letter-spacing: 0;
}
.le-jazz-help-number {
    color: var(--le-text-soft);
    font-family: var(--bs-font-monospace);
    font-size: .76rem;
    font-weight: 700;
}
.le-jazz-help-badge {
    flex: 0 0 auto;
    padding: .3rem .58rem;
    border: 1px solid color-mix(in srgb, #16835d 30%, var(--le-border));
    border-radius: 999px;
    color: #116746;
    background: color-mix(in srgb, #16835d 9%, var(--le-surface));
    font-size: .72rem;
    font-weight: 700;
}
.le-jazz-help-badge.is-open {
    color: #8a4d08;
    border-color: color-mix(in srgb, #b96b12 32%, var(--le-border));
    background: color-mix(in srgb, #b96b12 9%, var(--le-surface));
}
[data-bs-theme="dark"] .le-jazz-help-badge.is-live { color: #7de0b9; }
[data-bs-theme="dark"] .le-jazz-help-badge.is-open { color: #ffc878; }
.le-jazz-help-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 2.5rem;
}
.le-jazz-help-grid article {
    min-width: 0;
    padding: 1.1rem 0 1.2rem;
    border-top: 1px solid var(--le-border-soft);
}
.le-jazz-help-grid h3 {
    margin: 0 0 .45rem;
    font-size: .98rem;
    letter-spacing: 0;
}
.le-jazz-help-grid p {
    margin: 0;
    color: var(--le-text-muted);
    font-size: .9rem;
    line-height: 1.65;
}
.le-jazz-help-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem 1.4rem;
    padding-top: .8rem;
}
.le-jazz-help-actions a {
    color: var(--le-brand-700);
    font-size: .86rem;
    font-weight: 700;
    text-decoration: none;
}
.le-jazz-help-actions a::after {
    content: " \2192";
}
.le-jazz-help-actions a:hover,
.le-jazz-help-actions a:focus-visible {
    text-decoration: underline;
}
.le-jazz-help-section-open {
    margin-bottom: 2rem;
    padding: 2rem !important;
    border: 1px solid color-mix(in srgb, #b96b12 30%, var(--le-border)) !important;
    border-radius: 8px;
    background: color-mix(in srgb, #b96b12 5%, var(--le-surface));
}
.le-jazz-help-open-list {
    display: grid;
    gap: .8rem;
    margin: 0;
    padding-left: 1.2rem;
    color: var(--le-text-muted);
    font-size: .9rem;
    line-height: 1.55;
}
.le-jazz-help-open-list strong {
    color: var(--le-text);
}
@media (max-width: 767.98px) {
    .le-jazz-help-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
    }
    .le-jazz-help-status {
        display: flex;
        flex-wrap: wrap;
        gap: .6rem 1rem;
    }
    .le-jazz-help-launch {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .le-jazz-help-launch .btn {
        grid-column: 1 / -1;
        justify-content: center;
    }
    .le-jazz-help-grid {
        grid-template-columns: 1fr;
    }
    .le-jazz-help-section-head {
        align-items: flex-start;
    }
    .le-jazz-help-section-open {
        padding: 1.25rem !important;
    }
}

/* ===== Club dashboard (Jeff 7/3/26) — KPI cards, invoice table, event list,
   team fee-funding bars. Built entirely on the design tokens so club branding
   and dark mode both hold. ===== */

/* KPI card: tinted icon tile, uppercase label, display-font value, trend line. */
.le-kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    padding: 1.25rem 1.4rem;
    background: var(--le-surface);
    border: 1px solid var(--le-border);
    border-radius: var(--le-radius);
    box-shadow: var(--le-shadow-sm);
    color: var(--le-text);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.le-kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--le-shadow-md);
    border-color: color-mix(in srgb, var(--le-brand-500) 22%, var(--le-border));
    color: var(--le-text);
}
.le-kpi-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: grid; place-items: center;
    margin-bottom: .5rem;
}
.le-kpi-label {
    color: var(--le-text-muted);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.le-kpi-value {
    font-family: var(--le-font-display);
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.le-kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .84rem;
    font-weight: 600;
}
.le-kpi-trend.up   { color: var(--le-success); }
.le-kpi-trend.down { color: var(--le-danger); }
.le-kpi-trend.muted { color: var(--le-text-muted); font-weight: 500; }
.le-kpi-trend.down svg { transform: none; }

/* Soft icon tints shared by KPI icons and event tiles. */
.le-tint-green  { background: color-mix(in srgb, var(--le-success) 14%, var(--le-surface)); color: var(--le-success); }
.le-tint-orange { background: color-mix(in srgb, #F97316 14%, var(--le-surface)); color: #F97316; }
.le-tint-red    { background: color-mix(in srgb, var(--le-danger) 13%, var(--le-surface)); color: var(--le-danger); }
.le-tint-blue   { background: color-mix(in srgb, #4F6BF6 14%, var(--le-surface)); color: #4F6BF6; }

/* Status pill (Overdue / Declined / Pending / Paid). */
.le-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .28rem .65rem;
    border-radius: var(--le-radius-pill);
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}
.le-pill-danger {
    background: color-mix(in srgb, var(--le-danger) 12%, var(--le-surface));
    color: color-mix(in srgb, var(--le-danger) 85%, var(--le-text));
}
.le-pill-warning {
    background: color-mix(in srgb, var(--le-warning) 16%, var(--le-surface));
    color: color-mix(in srgb, var(--le-warning) 62%, var(--le-text));
}
.le-pill-success {
    background: color-mix(in srgb, var(--le-success) 14%, var(--le-surface));
    color: color-mix(in srgb, var(--le-success) 75%, var(--le-text));
}

/* Small neutral count chip ("9 / 11", competitive level). */
.le-chip {
    display: inline-flex;
    align-items: center;
    padding: .25rem .6rem;
    border-radius: var(--le-radius-pill);
    background: var(--le-surface-3);
    color: var(--le-text-muted);
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Card-header action link ("Open billing →", "All"). */
.le-dash-link {
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
}
.le-dash-link:hover { text-decoration: underline; }

/* Outstanding-invoices table. */
.le-dash-table thead th {
    color: var(--le-text-soft);
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--le-divider);
    padding: .5rem .75rem;
}
.le-dash-table tbody td {
    padding: .8rem .75rem;
    border-bottom: 1px solid var(--le-divider);
}
.le-dash-table tbody tr:last-child td { border-bottom: 0; }
/* Flagged rows get a faint danger wash fading out to the right. */
.le-dash-table tr.le-row-flagged td {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--le-danger) 5%, transparent) 0%,
        transparent 85%);
}

/* Upcoming-events rows. */
.le-dash-event {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--le-divider);
}
.le-dash-event:last-child { border-bottom: 0; }
.le-dash-event .min-width-0 { min-width: 0; }

/* Colored letter/icon tile for events and team rows. */
.le-event-icon {
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: 11px;
    display: grid; place-items: center;
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    font-family: var(--le-font-display);
}
.le-tile-orange { background: linear-gradient(135deg, #FB923C, #F0570A); }
.le-tile-green  { background: linear-gradient(135deg, #34D399, #0D9F6E); }
.le-tile-blue   { background: linear-gradient(135deg, #60A5FA, #2563EB); }
.le-tile-purple { background: linear-gradient(135deg, #A78BFA, #7C3AED); }
.le-tile-teal   { background: linear-gradient(135deg, #2DD4BF, #0D9488); }
.le-tile-slate  { background: linear-gradient(135deg, #94A3B8, #475569); }

/* Team fee-funding rows. */
.le-dash-team {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--le-divider);
}
.le-dash-team:last-child { border-bottom: 0; }
.le-dash-team-name { min-width: 0; flex-basis: 200px; flex-shrink: 0; }
.le-dash-team-name a:hover { color: var(--bs-link-color) !important; }
.le-dash-team-pct {
    font-family: var(--le-font-display);
    font-weight: 700;
    font-size: 1.05rem;
    min-width: 3.2rem;
    text-align: right;
}
.le-progress {
    height: 8px;
    min-width: 80px;
    border-radius: var(--le-radius-pill);
    background: var(--le-surface-3);
    overflow: hidden;
}
.le-progress-bar {
    height: 100%;
    border-radius: var(--le-radius-pill);
    background: linear-gradient(90deg, #FB923C, #F0570A);
    transition: width .4s ease;
}
.le-progress-bar.danger { background: linear-gradient(90deg, #FB7185, #E11D48); }

/* Empty states inside dashboard cards. */
.le-dash-empty {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1.25rem .25rem;
    color: var(--le-text-muted);
}
.le-dash-empty svg { color: var(--le-success); flex-shrink: 0; }

/* On small screens stack the funding row: name on top, bar full-width below. */
@media (max-width: 575.98px) {
    .le-dash-team { flex-wrap: wrap; }
    .le-dash-team-name { flex-basis: calc(100% - 56px); }
    .le-progress { flex-basis: 100%; order: 5; }
}

/* =====================================================================
   Sidebar polish — layout, motion and shape only (colours unchanged).
   Complements the icon-rail + hover-peek collapse defined in the desktop
   shell media query above.
   ===================================================================== */
@media (min-width: 992px) {
    /* Collapsed rail: evenly-sized, centred icon buttons so the active pill
       reads as a neat rounded square rather than a stretched bar. */
    body.le-has-family-sidebar.le-family-sidebar-hidden:not(.le-sidebar-peeking) .le-family-sidebar .le-sidebar-nav {
        justify-items: center;
    }
    body.le-has-family-sidebar.le-family-sidebar-hidden:not(.le-sidebar-peeking) .le-family-sidebar .le-sidebar-link {
        width: 48px;
        margin-inline: auto;
        gap: 0;
    }
    body.le-has-family-sidebar.le-family-sidebar-hidden:not(.le-sidebar-peeking) .le-family-sidebar .le-sidebar-usercard {
        width: 52px;
        margin-inline: auto;
        gap: 0;
    }

    /* When the rail flies open it floats over the page, so give it a rounded
       outer edge for a modern, detached feel. */
    body.le-has-family-sidebar.le-family-sidebar-hidden.le-sidebar-peeking .le-family-sidebar .le-sidebar-panel {
        border-radius: 0 16px 16px 0;
    }
}

/* Slim, unobtrusive scrollbar for the (often long) nav list. */
.le-sidebar-sections { scrollbar-width: thin; }
.le-sidebar-sections::-webkit-scrollbar { width: 8px; }
.le-sidebar-sections::-webkit-scrollbar-thumb {
    background: var(--le-border);
    border-radius: 999px;
}
.le-sidebar-sections::-webkit-scrollbar-thumb:hover { background: var(--le-border-strong, var(--le-text-soft)); }

/* Respect reduced-motion: no sliding/peek animation for users who opt out. */
@media (prefers-reduced-motion: reduce) {
    body.le-has-family-sidebar .le-shell,
    body.le-has-family-sidebar .le-family-sidebar,
    .le-sidebar-link,
    .le-sidebar-caret svg,
    .le-sidebar-group-items {
        transition: none !important;
    }
}

/* =====================================================================
   Sidebar — modern refinements (2026): clearer grouping, smoother
   open/close motion, and a more polished, responsive shape. CSS-only;
   the pin / collapse / group-toggle behaviour is unchanged.
   ===================================================================== */

/* ---- Panel shell: a touch more air and a softer, layered surface ---- */
.le-sidebar-panel {
    gap: .5rem;
    padding: 1rem .8rem .85rem;
    border-radius: 20px;
    scrollbar-gutter: stable;
}

/* ---- Grouping: hairline dividers give each section a clear boundary
       without heavy boxes, so scanning the nav is easier. ---- */
.le-sidebar-sections { gap: .3rem; }
.le-sidebar-section { gap: .28rem; padding-block: .1rem; }
.le-sidebar-section + .le-sidebar-section {
    margin-top: .5rem;
    padding-top: .75rem;
    border-top: 1px solid var(--le-border-soft);
}

/* Section + subgroup headings: quieter, tighter, unmistakably a label. */
.le-sidebar-section-title {
    font-size: .66rem;
    letter-spacing: .14em;
    padding-inline: .55rem;
    margin-bottom: .1rem;
    opacity: .9;
}
.le-sidebar-subgroup-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .62rem;
    opacity: .72;
}
.le-sidebar-subgroup-title::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, var(--le-border-soft), transparent);
}

/* ---- Links: modern pill with a smoother, springier hover. The active
       pill's colour is owned by the per-club team theme, so only motion and
       shape are refined here. ---- */
.le-sidebar-link {
    min-height: 42px;
    border-radius: 11px;
    transition: background .16s ease, color .16s ease, border-color .16s ease,
                transform .16s cubic-bezier(.2, .8, .3, 1), box-shadow .16s ease;
}
.le-sidebar-link:hover {
    transform: translateX(3px);
}

/* ---- Header buttons: slightly smaller, better proportioned, springy. ---- */
.le-sidebar-pin,
.le-sidebar-hamburger {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    transition: background .16s ease, color .16s ease, border-color .16s ease,
                transform .16s cubic-bezier(.2, .8, .3, 1);
}
.le-sidebar-pin:active,
.le-sidebar-hamburger:active { transform: scale(.94); }
.le-sidebar-pin svg,
.le-sidebar-hamburger svg { width: 17px; height: 17px; }

/* ---- Smooth open/close for collapsible nav groups. The toggle flips the
       [hidden] attribute; animate height + fade instead of snapping. In the
       collapsed icon-rail the higher-specificity rule above still hides these
       outright, so this only affects the expanded menu. ---- */
.le-sidebar-group-items {
    overflow: hidden;
    max-height: 30rem;
    opacity: 1;
    transition: max-height .26s cubic-bezier(.2, .8, .3, 1), opacity .2s ease;
}
.le-sidebar-group-items[hidden] {
    display: grid;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: max-height .24s cubic-bezier(.4, 0, .2, 1), opacity .16s ease,
                visibility 0s linear .24s;
}

/* ---- Responsive: give the mobile off-canvas the same rounded, roomy feel
       and comfortable touch targets. ---- */
@media (max-width: 991.98px) {
    .le-sidebar-offcanvas .le-sidebar-link { min-height: 46px; }
    .le-sidebar-offcanvas .le-sidebar-section + .le-sidebar-section {
        border-top-color: var(--le-border);
    }
    /* Anchor the account dropdown to the trigger width so it never spills off
       a narrow screen. */
    .le-account-menu { width: max-content; max-width: min(20rem, calc(100vw - 2rem)); }
}

/* =====================================================================
   Account dropdown — modern refinements (2026). Fixes the dark-mode row
   (it stacked because .le-theme-toggle's grid base beat the flex item
   layout) and gives the whole menu a rounded, card-like feel with a real
   on/off switch for the theme.
   ===================================================================== */
.le-account-menu {
    --bs-dropdown-min-width: 16.5rem;
    --bs-dropdown-padding-x: .4rem;
    --bs-dropdown-padding-y: .4rem;
    --bs-dropdown-border-radius: 16px;
    --bs-dropdown-item-padding-x: .6rem;
    --bs-dropdown-item-padding-y: .5rem;
    border-color: var(--le-border);
    box-shadow: var(--le-shadow-lg, var(--le-shadow-md));
    margin-bottom: .55rem;
}
.le-account-menu .dropdown-header {
    padding: .55rem .6rem .35rem;
    line-height: 1.25;
}
.le-account-menu-item {
    border-radius: 10px;
    font-weight: 500;
    transition: background .14s ease, color .14s ease;
}
.le-account-menu-item:hover .le-account-menu-icon,
.le-account-menu-item:focus-visible .le-account-menu-icon {
    color: var(--le-text);
}
.le-account-menu .dropdown-divider {
    margin: .35rem .35rem;
    opacity: .55;
}

/* Dark-mode row: force the horizontal item layout (the .le-theme-toggle
   grid/centred base is what pushed the icon, label and state into a stack),
   then render the state as an iOS-style switch driven by aria-pressed. */
.le-account-menu .le-theme-toggle {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    justify-content: flex-start;
}
.le-account-menu .le-theme-toggle:hover { transform: none; }
.le-account-menu .le-theme-state {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: var(--le-border-strong, #9aa4b2);
    color: transparent;
    font-size: 0;
    transition: background .18s ease;
}
.le-account-menu .le-theme-state::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    transition: transform .2s cubic-bezier(.2, .8, .3, 1);
}
.le-account-menu .le-theme-toggle[aria-pressed="true"] .le-theme-state {
    background: var(--le-brand-500);
}
.le-account-menu .le-theme-toggle[aria-pressed="true"] .le-theme-state::before {
    transform: translateX(18px);
}

/* Sign-out: a gentle danger-tinted hover rather than the default grey. */
.le-account-menu-danger:hover,
.le-account-menu-danger:focus-visible {
    background: color-mix(in srgb, var(--le-danger) 12%, transparent);
    color: var(--le-danger);
}

@media (prefers-reduced-motion: reduce) {
    .le-account-menu .le-theme-state,
    .le-account-menu .le-theme-state::before { transition: none; }
}

/* =====================================================================
   Global page loader — a branded dark "splash" overlay shown by site.js
   during navigation (link clicks, form submits) and while the next page
   loads. The centred logo breathes over a soft halo, with an indeterminate
   bar beneath. Dark backdrop so the logo reads in either theme.
   ===================================================================== */
.le-loader {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Dim + blur the page behind so the loader reads as a modal popup on top
       of the current page rather than replacing it. */
    background: rgba(8, 8, 16, .55);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    /* Fade out, then flip visibility off so it stops catching clicks. */
    transition: opacity .32s ease, visibility 0s linear .32s;
}
.le-loader.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity .22s ease;
}
/* The popup card that floats over the page. */
.le-loader-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 2.6rem 3rem;
    max-width: calc(100vw - 2rem);
    border-radius: 24px;
    overflow: hidden;
    background:
        radial-gradient(135% 130% at 50% 12%,
            color-mix(in srgb, var(--le-team-primary, #4E008E) 38%, #15131f) 0%,
            color-mix(in srgb, var(--le-team-secondary, #15091F) 28%, #11111c) 55%,
            #0c0c14 100%);
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow:
        0 30px 90px -20px rgba(0, 0, 0, .7),
        inset 0 1px 0 rgba(255, 255, 255, .06);
    /* Pop in with a small rise + scale. */
    transform: translateY(12px) scale(.94);
    opacity: .5;
    transition: transform .34s cubic-bezier(.2, .8, .3, 1), opacity .28s ease;
}
.le-loader.is-active .le-loader-stage {
    transform: none;
    opacity: 1;
}
@media (max-width: 480px) {
    .le-loader-stage { padding: 2rem 1.7rem; border-radius: 20px; gap: 1.2rem; }
}
.le-loader-logo {
    position: relative;
    display: grid;
    place-items: center;
    animation: leLoaderBreathe 1.9s ease-in-out infinite;
}
.le-loader-logo img {
    position: relative;
    z-index: 1;
    width: min(58vw, 216px);
    height: auto;
    display: block;
    filter: drop-shadow(0 10px 34px rgba(124, 58, 237, .5));
}
/* Soft pulsing glow behind the mark. */
.le-loader-halo {
    position: absolute;
    inset: -55% -22%;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(closest-side,
        rgba(124, 58, 237, .42), rgba(124, 58, 237, 0) 72%);
    animation: leLoaderHalo 1.9s ease-in-out infinite;
}
.le-loader-bar {
    position: relative;
    width: min(46vw, 190px);
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
}
.le-loader-bar span {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 40%;
    border-radius: inherit;
    background: linear-gradient(90deg,
        rgba(109, 94, 252, 0), #6d5efc 30%, #a855f7 55%, rgba(168, 85, 247, 0));
    animation: leLoaderSlide 1.15s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes leLoaderBreathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
@keyframes leLoaderHalo {
    0%, 100% { opacity: .5; transform: scale(.96); }
    50% { opacity: 1; transform: scale(1.06); }
}
@keyframes leLoaderSlide {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(360%); }
}
@media (prefers-reduced-motion: reduce) {
    .le-loader-logo,
    .le-loader-halo { animation: none; }
    .le-loader-bar span { animation-duration: 2.2s; animation-timing-function: linear; }
    .le-loader-stage { transition: none; transform: none; opacity: 1; }
}

/* ---- Spinner variant: a compact circular loader, no logo. Hide the logo +
       bar and render a rotating gradient ring inside the popup card. ---- */
.le-loader-logo,
.le-loader-bar { display: none; }
.le-loader-stage {
    padding: 2.1rem;
    gap: 0;
}
.le-loader-stage::before {
    content: "";
    width: 56px;
    height: 56px;
    border-radius: 50%;
    /* The active TeamTheme palette supplies these colors, so the busy
       indicator follows the logged-in club or team instead of staying purple. */
    background: conic-gradient(from 90deg,
        rgba(var(--le-team-primary-rgb, 78,0,142), 0) 0%,
        var(--le-team-primary, #4E008E) 62%,
        var(--le-team-accent, #8A2AE0) 100%);
    /* Punch out the middle to leave a ring. */
    -webkit-mask: radial-gradient(farthest-side,
        transparent calc(100% - 5px), #000 calc(100% - 5px));
    mask: radial-gradient(farthest-side,
        transparent calc(100% - 5px), #000 calc(100% - 5px));
    animation: leLoaderSpin .8s linear infinite;
}
@keyframes leLoaderSpin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .le-loader-stage::before { animation-duration: 1.8s; }
}

/* Software administration is product infrastructure, not a tenant-branded
   experience. Keep it blue/white in light mode and blue/black in dark mode,
   even when an app admin opens a league- or club-scoped screen. */
html[data-le-scope="software-admin"] body.le-software-admin {
    --le-team-primary: #2563EB;
    --le-team-secondary: #0B3B8C;
    --le-team-accent: #60A5FA;
    --le-team-primary-rgb: 37, 99, 235;
    --le-team-secondary-rgb: 11, 59, 140;
    --le-team-accent-rgb: 96, 165, 250;

    --le-brand-50: #EFF6FF;
    --le-brand-100: #DBEAFE;
    --le-brand-200: #BFDBFE;
    --le-brand-300: #93C5FD;
    --le-brand-400: #60A5FA;
    --le-brand-500: #2563EB;
    --le-brand-600: #1D4ED8;
    --le-brand-700: #1E40AF;
    --le-brand-800: #1E3A8A;
    --le-brand-900: #172554;

    --le-bg: #F7FAFF;
    --le-surface: #FFFFFF;
    --le-surface-2: #FFFFFF;
    --le-surface-3: #EFF6FF;
    --le-border: #D7E4F7;
    --le-border-soft: #E8F0FC;
    --le-divider: #E8F0FC;
    --le-text: #0A1830;
    --le-text-muted: #4B607D;
    --le-text-soft: #7185A1;
    --le-text-invert: #FFFFFF;
    --le-ring: 0 0 0 3px rgba(37, 99, 235, .22);
    --le-gradient-hero:
        radial-gradient(900px 480px at 84% -12%, rgba(37, 99, 235, .14), transparent 62%),
        linear-gradient(180deg, #FFFFFF 0%, #F7FAFF 100%);
    --le-gradient-brand: linear-gradient(135deg, #60A5FA 0%, #2563EB 48%, #0B3B8C 100%);
    --le-glass-bg: rgba(255, 255, 255, .92);
    --le-glass-border: rgba(30, 64, 175, .10);
    --bs-primary: #2563EB;
    --bs-primary-rgb: 37, 99, 235;
    --bs-body-bg: var(--le-bg);
    --bs-body-color: var(--le-text);
    --bs-border-color: var(--le-border);
    --bs-link-color: #1D4ED8;
    --bs-link-hover-color: #1E40AF;
}

html[data-le-scope="software-admin"] body.le-software-admin::after {
    background-image: none;
}

html[data-le-scope="software-admin"] body.le-software-admin .le-sidebar-brandmark,
html[data-le-scope="software-admin"] body.le-software-admin .le-brand-mark {
    background: var(--le-gradient-brand);
}

html[data-le-scope="software-admin"] body.le-software-admin .le-sidebar-link.active .le-sidebar-icon,
html[data-le-scope="software-admin"] body.le-software-admin .le-sidebar-group-row:has(> .le-sidebar-link.active) {
    background: linear-gradient(145deg, #3B82F6 0%, #1D4ED8 100%);
}

html[data-le-scope="software-admin"] body.le-software-admin .le-loader-stage::before {
    background: conic-gradient(from 90deg, rgba(37, 99, 235, 0) 0%, #2563EB 62%, #60A5FA 100%);
}

[data-bs-theme="dark"][data-le-scope="software-admin"] body.le-software-admin {
    --le-bg: #000000;
    --le-surface: #050A12;
    --le-surface-2: #02060D;
    --le-surface-3: #0A1424;
    --le-border: #16325B;
    --le-border-soft: #0E2443;
    --le-divider: #0E2443;
    --le-text: #FFFFFF;
    --le-text-muted: #B8C9E2;
    --le-text-soft: #8298B8;
    --le-text-invert: #000000;
    --le-ring: 0 0 0 3px rgba(59, 130, 246, .36);
    --le-gradient-hero:
        radial-gradient(900px 480px at 84% -12%, rgba(37, 99, 235, .28), transparent 62%),
        linear-gradient(180deg, #030914 0%, #000000 100%);
    --le-gradient-brand: linear-gradient(135deg, #60A5FA 0%, #2563EB 48%, #0B3B8C 100%);
    --le-glass-bg: rgba(0, 0, 0, .94);
    --le-glass-border: rgba(96, 165, 250, .14);
    --bs-body-bg: #000000;
    --bs-body-color: #FFFFFF;
    --bs-border-color: var(--le-border);
    --bs-link-color: #60A5FA;
    --bs-link-hover-color: #93C5FD;
    --bs-primary: #2563EB;
    --bs-primary-rgb: 37, 99, 235;
}

[data-bs-theme="dark"][data-le-scope="software-admin"] body.le-software-admin .le-family-sidebar,
[data-bs-theme="dark"][data-le-scope="software-admin"] body.le-software-admin .le-sidebar-panel {
    background: #000000;
    border-color: #16325B;
}

[data-bs-theme="dark"][data-le-scope="software-admin"] body.le-software-admin .le-sidebar-group-items .le-sidebar-link.active {
    color: #93C5FD;
}

[data-bs-theme="dark"][data-le-scope="software-admin"] body.le-software-admin .le-sidebar-group-items .le-sidebar-link.active::before {
    background: #60A5FA;
}

[data-bs-theme="dark"][data-le-scope="software-admin"] body.le-software-admin .le-sidebar-pin[aria-pressed="true"] {
    color: #FFFFFF;
    background: rgba(37, 99, 235, .34);
    border-color: rgba(96, 165, 250, .34);
}

/* Compact club-admin roster: keep the wide player dataset readable without
   letting long contact values or standard button sizing dominate the table. */
.le-players-table {
    font-size: .78rem;
    line-height: 1.15;
}
.le-players-table > :not(caption) > * > * {
    padding: .28rem .32rem;
}
.le-players-table th {
    white-space: nowrap;
}
.le-players-table .badge {
    font-size: .66rem;
    padding: .25em .42em;
}
.le-players-table .btn-sm {
    --bs-btn-padding-y: .22rem;
    --bs-btn-padding-x: .38rem;
    --bs-btn-font-size: .72rem;
}
.le-player-email {
    display: block;
    max-width: 9.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Apply title casing to headings supplied by both views and dynamic records. */
h1,
h2,
h3,
h4,
h5,
h6,
.card-title,
.modal-title {
    text-transform: capitalize;
}

/* =====================================================================
   Sidebar — corporate refresh (2026)

   Structure and rhythm only: the accent colour still comes from the club /
   team palette that TeamTheme emits, and the light and dark identities above
   (white chrome with a solid brand pill; deep navy with a brand gradient) are
   preserved. What changes is what reads as "consumer app" rather than
   "enterprise console" — the slide-on-hover, the diffuse panel glow, the
   brand-coloured section headings and the loose 48px row rhythm.

   Rules here are prefixed with :root and an ancestor so they outrank the
   [data-bs-theme="…"] blocks earlier in this file without needing !important.
   Top-level destinations are addressed through .le-sidebar-nav > .le-sidebar-link
   and .le-sidebar-group-row > .le-sidebar-link so the nested submenu treatment
   (tree rail, dot markers) is left exactly as it is.
   ===================================================================== */

.le-sidebar-panel {
    --le-nav-row-height: 40px;
    --le-nav-radius: 9px;
    --le-nav-gutter: 11px;
    --le-nav-icon: 20px;
    /* 44px keeps every rail target at the accessible minimum, and still leaves
       breathing room inside the 72px rail once the panel padding is taken. */
    --le-nav-rail-tile: 44px;
}

/* ---- Panel: a hairline divider instead of a soft glow. A docked panel that
       fades into the page reads unfinished; enterprise shells separate the nav
       from the work area with a single crisp rule. ---- */
:root[data-bs-theme="light"] .le-sidebar-panel {
    padding: 16px 12px 14px;
    border-color: #E4E7EC;
    box-shadow: none;
}
:root[data-bs-theme="dark"] .le-sidebar-panel {
    padding: 16px 12px 14px;
    border-color: rgba(255, 255, 255, .09);
    box-shadow: none;
}
@media (min-width: 992px) {
    /* Docked, the only edge the panel shows is the one facing the content. */
    body.le-has-family-sidebar .le-family-sidebar .le-sidebar-panel {
        border-right-width: 1px;
        border-right-style: solid;
    }
}

/* ---- Header: the brand lockup gets its own band, closed off by a hairline,
       so the menu has a masthead rather than a link that happens to be first. */
:root .le-sidebar-panel .le-sidebar-panel-head {
    min-height: 44px;
    padding-block: 0 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--le-border-soft);
}
:root .le-sidebar-panel .le-sidebar-brand-logo {
    height: 30px;
}
:root .le-sidebar-panel .le-sidebar-brand-name {
    font-size: 1.02rem;
    letter-spacing: -.02em;
}
/* Header buttons sit quietly until they are reached for. */
:root .le-sidebar-panel .le-sidebar-pin,
:root .le-sidebar-panel .le-sidebar-hamburger {
    width: 34px;
    height: 34px;
    border-color: transparent;
    border-radius: 8px;
    background: transparent;
}
:root .le-sidebar-panel .le-sidebar-pin:hover,
:root .le-sidebar-panel .le-sidebar-hamburger:hover {
    transform: none;
    background: var(--le-surface-3);
    border-color: var(--le-border-soft);
}
/* The transparent treatment above outranks the older pressed-pin rules, so
   restate them here — the pin must still read as "on" while the menu is
   docked, otherwise the only cue that pinning did anything is gone. */
:root .le-sidebar-panel .le-sidebar-pin[aria-pressed="true"] {
    color: var(--le-brand-700);
    background: color-mix(in srgb, var(--le-team-primary, #4E008E) 10%, transparent);
    border-color: color-mix(in srgb, var(--le-team-primary, #4E008E) 24%, transparent);
}
:root[data-bs-theme="dark"] .le-sidebar-panel .le-sidebar-pin[aria-pressed="true"] {
    color: #FFFFFF;
    background: color-mix(in srgb, var(--le-team-primary, #7B2CBF) 40%, transparent);
    border-color: rgba(255, 255, 255, .18);
}
:root .le-sidebar-panel .le-sidebar-pin svg,
:root .le-sidebar-panel .le-sidebar-hamburger svg {
    width: 16px;
    height: 16px;
}

/* ---- Section headings: neutral micro-caps. A coloured heading competes with
       the selected row for attention; grey lets the accent mean one thing. ---- */
:root[data-bs-theme="light"] .le-sidebar-panel .le-sidebar-section-title,
:root[data-bs-theme="dark"] .le-sidebar-panel .le-sidebar-section-title {
    padding: 14px 10px 5px;
    color: var(--le-text-soft);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    opacity: 1;
}
:root .le-sidebar-panel .le-sidebar-section + .le-sidebar-section {
    margin-top: .3rem;
    padding-top: .3rem;
    border-top: 1px solid var(--le-border-soft);
}

/* ---- Rows: denser, quieter, aligned. 40px is the enterprise nav rhythm, and
       the fixed icon column keeps every label on one x-position. ---- */
:root .le-sidebar-panel .le-sidebar-nav > .le-sidebar-link,
:root .le-sidebar-panel .le-sidebar-group-row > .le-sidebar-link {
    min-height: var(--le-nav-row-height);
    gap: var(--le-nav-gutter);
    margin: 1px 0;
    padding: 4px 10px;
    border: 0;
    border-radius: var(--le-nav-radius);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -.006em;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
/* Top-level rows only — nested submenu items use .le-sidebar-icon as a small
   tree dot, and resizing that would break the rail they hang off. */
:root .le-sidebar-panel .le-sidebar-nav > .le-sidebar-link .le-sidebar-icon,
:root .le-sidebar-panel .le-sidebar-group-row > .le-sidebar-link .le-sidebar-icon {
    width: var(--le-nav-icon);
    height: 20px;
}
:root .le-sidebar-panel .le-sidebar-nav > .le-sidebar-link .le-sidebar-icon svg,
:root .le-sidebar-panel .le-sidebar-group-row > .le-sidebar-link .le-sidebar-icon svg {
    width: 18px;
    height: 18px;
}
/* No slide on hover. Nav rows are a fixed reference frame; moving them on
   pointer-over is the most toy-like behaviour in the old menu. */
:root .le-sidebar-panel .le-sidebar-link:hover,
:root .le-sidebar-panel .le-sidebar-link:focus-visible {
    transform: none;
}
:root .le-sidebar-panel .le-sidebar-link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--le-team-primary, #4E008E) 55%, transparent);
    outline-offset: 1px;
}

/* ---- Selected row: same brand fill, flatter seat. The old 16px coloured drop
       shadow made the pill hover above the panel; a tight shadow keeps it
       attached. Colour still resolves from the tenant palette. ---- */
:root .le-sidebar-panel .le-sidebar-nav > .le-sidebar-link.active,
:root .le-sidebar-panel .le-sidebar-group-row:has(> .le-sidebar-link.active) {
    border-radius: var(--le-nav-radius);
    font-weight: 600;
}
:root[data-bs-theme="light"] .le-sidebar-panel .le-sidebar-nav > .le-sidebar-link.active,
:root[data-bs-theme="light"] .le-sidebar-panel .le-sidebar-group-row:has(> .le-sidebar-link.active) {
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
:root[data-bs-theme="dark"] .le-sidebar-panel .le-sidebar-nav > .le-sidebar-link.active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* ---- Badges: pill counters sized to sit inside a 40px row. ---- */
:root .le-sidebar-panel .le-sidebar-badge {
    min-width: 1.15rem;
    height: 1.15rem;
    font-size: .66rem;
    font-weight: 700;
}

/* ---- Account card: a footer, not another card. Separated by the same hairline
       used everywhere else, with no competing border or fill. ---- */
:root[data-bs-theme="light"] .le-sidebar-panel .le-sidebar-usercard,
:root[data-bs-theme="dark"] .le-sidebar-panel .le-sidebar-usercard {
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
}
:root .le-sidebar-panel .le-sidebar-usercard-button:hover {
    background: var(--le-surface-3);
    border-color: var(--le-border-soft);
}
:root .le-sidebar-panel .le-sidebar-userlabel {
    font-size: .64rem;
    letter-spacing: .1em;
}
:root .le-sidebar-panel .le-sidebar-username {
    font-size: .84rem;
    font-weight: 600;
}

/* =====================================================================
   Collapsed rail + flyout — corporate refresh
   ===================================================================== */
@media (min-width: 992px) {
    /* Square, evenly-spaced tiles. An icon rail only looks deliberate when
       every glyph lands on the same optical centre line. */
    body.le-has-family-sidebar.le-family-sidebar-hidden:not(.le-sidebar-peeking) .le-family-sidebar .le-sidebar-link,
    body.le-has-family-sidebar.le-family-sidebar-hidden:not(.le-sidebar-peeking) .le-family-sidebar .le-sidebar-usercard {
        width: var(--le-nav-rail-tile);
        height: var(--le-nav-rail-tile);
        min-height: var(--le-nav-rail-tile);
        padding: 0;
        border-radius: 10px;
    }
    /* With the headings gone, the section hairlines carry the grouping. */
    body.le-has-family-sidebar.le-family-sidebar-hidden:not(.le-sidebar-peeking) .le-family-sidebar .le-sidebar-panel-head {
        padding-block: 0 10px;
        margin-bottom: 6px;
    }
    body.le-has-family-sidebar.le-family-sidebar-hidden:not(.le-sidebar-peeking) .le-family-sidebar .le-sidebar-section + .le-sidebar-section {
        margin-top: .45rem;
        padding-top: .45rem;
    }

    /* The flyout floats over the page, so it needs a real edge and a real
       shadow to separate from the content it covers. */
    body.le-has-family-sidebar.le-family-sidebar-hidden.le-sidebar-peeking .le-family-sidebar .le-sidebar-panel {
        border-radius: 0 14px 14px 0;
        border-right: 1px solid var(--le-border);
    }
    body.le-has-family-sidebar.le-family-sidebar-hidden.le-sidebar-peeking .le-family-sidebar {
        box-shadow: 0 18px 48px -12px rgba(16, 24, 40, .28), 0 4px 12px rgba(16, 24, 40, .10);
    }
    [data-bs-theme="dark"] body.le-has-family-sidebar.le-family-sidebar-hidden.le-sidebar-peeking .le-family-sidebar {
        box-shadow: 0 18px 48px -12px rgba(0, 0, 0, .6), 0 4px 12px rgba(0, 0, 0, .4);
    }
}