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

/* League staff roster: retain one set of fields/actions at every viewport. */
.league-roster {
    min-width: 0;
    max-width: 100%;
}
.league-roster-summary,
.league-roster-notes {
    overflow-wrap: anywhere;
}
.league-roster-status .badge {
    white-space: normal;
    text-align: left;
    line-height: 1.4;
}

.league-roster-scrollbar[hidden] { display: none; }
.league-roster-notes summary { cursor: pointer; }
.league-player-list .le-player-team-name {
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (min-width: 768px) {
    .league-roster-summary h1 {
        font-size: 1.75rem;
        line-height: 1.25;
    }
    .league-roster-summary > p { font-size: .875rem; }
    .league-roster-notes { padding: .75rem 1rem; }
    .league-roster-scrollbar {
        position: sticky;
        top: var(--roster-sticky-top, 0px);
        z-index: 5;
        overflow-x: scroll;
        overflow-y: hidden;
        background: var(--le-surface);
    }
    .league-roster-scrollbar > div { height: 1px; }
    .league-roster-scrollbar,
    .league-roster-table-wrap {
        scrollbar-color: var(--le-text-muted) var(--le-surface-3);
        scrollbar-width: auto;
    }
    .league-roster-table-wrap {
        overflow-x: scroll;
        width: 100%;
    }
    table.league-roster-table {
        width: max-content;
        min-width: 100%;
        margin-bottom: 0;
        overflow: visible;
        border-collapse: separate;
        border-spacing: 0;
    }
    table.league-roster-table > :not(caption) > * > * {
        padding: .55rem .75rem;
        white-space: nowrap;
        font-size: .875rem;
    }
    table.league-roster-table tr > :first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        min-width: 12rem;
        max-width: 18rem;
        white-space: normal;
        overflow-wrap: anywhere;
        background: var(--le-surface);
        box-shadow: 1px 0 0 var(--le-border);
    }
    table.league-roster-table thead th {
        position: relative;
        z-index: 3;
        transform: translateY(var(--roster-heading-offset, 0px));
        background: var(--le-surface);
        box-shadow: 0 1px 0 var(--le-border);
    }
    table.league-roster-table thead th:first-child {
        position: sticky;
        z-index: 4;
    }
    .league-roster-action > .d-flex { flex-wrap: nowrap !important; }
}

@media (max-width: 767.98px) {
    .league-roster-scrollbar { display: none; }
    .league-player-list td.text-end { text-align: left !important; }
    .league-player-list .input-group > .form-control {
        flex: 1 0 100%;
        width: 100%;
        min-width: 0;
    }
    .league-player-list .input-group { gap: .25rem; }
    .league-roster {
        overflow-wrap: anywhere;
    }
    .league-roster-summary h1 {
        font-size: clamp(1.35rem, 5vw, 1.75rem);
        line-height: 1.25;
    }
    .league-roster-summary .le-eyebrow {
        font-size: .7rem;
        letter-spacing: .08em;
    }
    .league-roster-summary > p,
    .league-roster-notes {
        font-size: .875rem;
    }
    .league-roster-notes {
        padding: .875rem;
    }
    .league-roster-notes strong {
        display: block;
        margin-bottom: .25rem;
    }
    .league-roster .btn {
        min-height: 44px;
        white-space: normal;
    }
    .league-roster-table-wrap {
        overflow: visible;
    }
    table.league-roster-table,
    table.league-roster-table > tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }
    /* Each card supplies visible field labels; hide desktop sort controls. */
    table.league-roster-table > thead {
        display: none;
    }
    table.league-roster-table > tbody > tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem 1rem;
        padding: 1rem;
        margin-bottom: .875rem;
        border: 1px solid var(--le-border);
        border-radius: var(--le-radius);
        background: var(--le-surface);
        box-shadow: var(--le-shadow-xs);
    }
    table.league-roster-table > tbody > tr > td {
        display: block;
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        white-space: normal;
        font-size: .875rem;
    }
    table.league-roster-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .2rem;
        color: var(--le-text-muted);
        font-size: .75rem;
        font-weight: 600;
    }
    table.league-roster-table > tbody > tr > .league-roster-player {
        grid-column: 1 / -1;
        padding-bottom: .625rem;
        border-bottom: 1px solid var(--le-border-soft);
        font-size: 1.0625rem;
        font-weight: 700;
    }
    .league-roster-player a {
        display: flex;
        align-items: center;
        min-height: 44px;
    }
    .league-roster-table .league-roster-action {
        grid-column: 1 / -1;
    }
    .league-roster-table .league-roster-action:empty,
    .league-roster-table .league-roster-action-empty {
        display: none;
    }
    .league-roster-table .badge {
        max-width: 100%;
        white-space: normal;
        text-align: left;
        line-height: 1.4;
    }
}

/* ---------- Fonts ---------- */
/* Self-hosted variable fonts keep typography consistent and remove a
   render-blocking dependency on Google Fonts at runtime. */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("/fonts/plus-jakarta-sans-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: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("/fonts/plus-jakarta-sans-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"] {
    /* Product defaults for a new or unconfigured club. Tenant branding emitted
       by TeamTheme overrides these values, while Jazz Bantam is explicitly
       scoped below instead of leaking into every club. */
    --le-team-primary:   #0D6EFD;
    --le-team-secondary: #6C757D;
    --le-team-accent:    #06B6D4;
    --le-team-primary-rgb:   13,110,253;
    --le-team-secondary-rgb: 108,117,125;
    --le-team-accent-rgb:    6,182,212;

    /* 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: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --le-font-display: "Plus Jakarta Sans", 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:          #1C1E23;
    --le-surface:     #272A31;
    --le-surface-2:   #23262C;
    --le-surface-3:   #30343C;
    --le-border:      #454A55;
    --le-border-soft: #363B44;
    --le-divider:     #363B44;

    --le-text:        #E6E8ED;
    --le-text-muted:  #B6BBC6;
    --le-text-soft:   #A0A7B5;
    --le-text-invert: #1C1E23;

    --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, #23262C 0%, #1C1E23 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(39, 42, 49, .94);
    --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:       color-mix(in srgb, var(--le-team-primary, #0D6EFD) 48%, white);
    --bs-link-hover-color: color-mix(in srgb, var(--le-team-primary, #0D6EFD) 30%, white);
    --bs-secondary-color:  var(--le-text-muted);
    --bs-tertiary-color:   var(--le-text-soft);

    color-scheme: dark;
}

/* Jazz Bantam League Manager dark mode uses the program identity directly:
   soft charcoal surfaces, purple interaction states, and softened typography. */
[data-bs-theme="dark"] body.le-area-leagueadmin.le-jazz-bantam-shell {
    --le-bg:          #1C1E23;
    --le-surface:     #272A31;
    --le-surface-2:   #23262C;
    --le-surface-3:   #30343C;
    --le-border:      #454A55;
    --le-border-soft: #363B44;
    --le-divider:     #363B44;

    --le-text:        #E6E8ED;
    --le-text-muted:  #B6BBC6;
    --le-text-soft:   #A0A7B5;
    --le-text-invert: #1C1E23;

    --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, #23262C 0%, #1C1E23 100%);
    --le-gradient-brand: linear-gradient(135deg, #A855D4 0%, #7B2CBF 48%, #4E008E 100%);
    --le-glass-bg: rgba(39, 42, 49, .94);
    --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-jazz-bantam-shell .le-sidebar-link:hover .le-sidebar-icon,
[data-bs-theme="dark"] body.le-area-leagueadmin.le-jazz-bantam-shell .le-sidebar-link.active .le-sidebar-icon {
    color: #FFFFFF;
    background: none;
}
[data-bs-theme="dark"] body.le-area-leagueadmin.le-jazz-bantam-shell .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.le-jazz-bantam-shell .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);
    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);
}

/* Keep dark backgrounds clean; the page watermark is light-mode only. */
[data-bs-theme="dark"] body::after {
    background-image: none;
}

/* 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 {
    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-product-logo {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex: 0 0 auto;
}
.le-product-logo--sidebar {
    width: 34px;
    height: 34px;
}
.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;
}

/* Jazz Bantam uses one program masthead across every authenticated role. The
   menu stays first, followed immediately by the official white Bantam badge. */
.le-jazz-bantam-masthead {
    position: sticky;
    top: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 71px;
    padding: 5px 17px;
    background: #050505;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.le-jazz-bantam-menu {
    width: 44px;
    height: 44px;
    place-items: center;
    flex: 0 0 auto;
    padding: 0;
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 10px;
}
.le-jazz-bantam-menu:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .5);
}
.le-jazz-bantam-menu svg {
    width: 23px;
    height: 23px;
}
.le-jazz-bantam-masthead-brand {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
}
.le-jazz-bantam-masthead-brand img {
    display: block;
    width: 50px;
    height: 50px;
    object-fit: contain;
}
body.le-jazz-bantam-shell .le-sidebar-panel > .le-sidebar-panel-head {
    display: none;
}
.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-global-search {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .4rem;
    padding: .25rem .75rem .75rem;
}
.le-sidebar-global-search input {
    width: 100%;
    min-width: 0;
    height: 2.55rem;
    padding: .55rem .7rem .55rem 2.35rem;
    border: 1px solid var(--le-border, #D7DCE3);
    border-radius: .65rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}
.le-sidebar-global-search input:focus {
    border-color: var(--le-team-primary, #4E008E);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--le-team-primary, #4E008E) 18%, transparent);
    outline: 0;
}
.le-sidebar-global-search-icon {
    position: absolute;
    z-index: 1;
    left: 1.45rem;
    top: .91rem;
    color: var(--bs-secondary-color);
    pointer-events: none;
}
.le-sidebar-global-search-icon svg { width: 1rem; height: 1rem; }
.le-sidebar-global-search button {
    border: 0;
    border-radius: .65rem;
    padding: 0 .7rem;
    background: var(--le-team-primary, #4E008E);
    color: #fff;
    font-weight: 700;
}
.le-global-search-page {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    max-width: 62rem;
    padding: .65rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .85rem;
    background: var(--bs-body-bg);
    box-shadow: 0 .35rem 1.2rem rgba(24, 24, 31, .08);
}
.le-global-search-page svg { width: 1.35rem; height: 1.35rem; color: var(--bs-secondary-color); }
.le-global-search-page input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--bs-body-color); font-size: 1.05rem; }
.le-global-search-results { display: grid; gap: 1rem; max-width: 62rem; }

@media (min-width: 992px) {
    body.le-has-family-sidebar.le-family-sidebar-hidden .le-sidebar-global-search {
        display: none;
    }
}
.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 .le-sidebar-version {
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    text-transform: none;
}
.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),
       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-jazz-bantam-shell .le-family-sidebar {
        top: 71px;
        height: calc(100vh - 71px);
    }
    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. The rail never widens on hover — pointing at one icon opens
       that icon's own flyout beside the rail (.le-sidebar-flyout, built by
       site.js), so the content underneath never shifts and the menu you asked
       for is the only one that opens. */
    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 .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 .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 .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 .le-family-sidebar .le-sidebar-environment strong {
        font-size: .56rem;
        letter-spacing: .04em;
    }
    body.le-has-family-sidebar.le-family-sidebar-hidden .le-family-sidebar {
        transition: width .18s ease, max-width .18s ease, transform .2s ease;
    }
    /* 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; }

/* Compact operational counts used beside league-dashboard report tables. */
.le-dashboard-metric {
    height: 100%;
    padding: .85rem;
    background: var(--le-surface-2);
    border: 1px solid var(--le-divider);
    border-radius: var(--le-radius-sm);
}
.le-dashboard-metric-value {
    margin-top: .2rem;
    font-family: var(--le-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
}
.le-dashboard-metric-value-danger { color: var(--le-danger); }

a.le-dashboard-metric {
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

a.le-dashboard-metric:hover,
a.le-dashboard-metric:focus-visible {
    transform: translateY(-1px);
    border-color: var(--le-accent);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
}

/* League dashboard team balance. Each age group stacks a full-width boys bar
   above a girls bar so Mountain/City/Desert labels stay readable inside the
   constrained dashboard column, even when a season grows to dozens of teams. */
.le-team-balance {
    margin-top: 1rem;
}
.le-team-balance-row {
    padding: .9rem 0;
    border-top: 1px solid var(--le-divider);
}
.le-team-balance-row:first-child {
    border-top: 0;
}
.le-team-balance-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .55rem;
}
.le-team-balance-gender {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) 1.5rem;
    align-items: center;
    gap: .45rem;
    margin-top: .4rem;
}
.le-team-balance-gender-label,
.le-team-balance-gender-total {
    color: var(--le-text-muted);
    font-size: .72rem;
}
.le-team-balance-gender-total {
    font-variant-numeric: tabular-nums;
    text-align: right;
    text-decoration: none;
}
.le-team-balance-lane {
    display: flex;
    align-items: center;
    min-width: 0;
}
.le-team-balance-bar {
    display: flex;
    min-width: 0;
    width: 100%;
    height: 2.35rem;
    overflow: hidden;
    border-radius: .45rem;
}
.le-team-balance-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-basis: 0;
    min-width: 0;
    padding: 0 .25rem;
    overflow: hidden;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.le-team-balance-mountain {
    background: var(--le-brand-700);
    color: #fff;
}
.le-team-balance-city {
    background: var(--le-brand-500);
    color: #fff;
}
.le-team-balance-desert {
    background: var(--le-brand-200);
    color: #2d123c;
}
.le-team-balance-other {
    background: var(--le-surface-3);
    color: var(--le-text);
}
.le-team-balance-empty {
    color: var(--le-text-soft);
}
.le-team-balance-age {
    font-weight: 700;
    text-decoration: none;
}
.le-team-balance-metrics {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem .75rem;
    text-align: right;
}
.le-team-balance-metrics a {
    display: inline-flex;
    align-items: baseline;
    gap: .22rem;
    color: var(--le-text);
    text-decoration: none;
}
.le-team-balance-metrics strong,
.le-team-balance-metrics span {
    display: inline;
}
.le-team-balance-metrics strong {
    font-size: .88rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.le-team-balance-metrics span {
    color: var(--le-text-muted);
    font-size: .65rem;
}
.le-team-balance-unspecified {
    margin-top: .45rem;
    color: var(--le-text-muted);
    font-size: .7rem;
    text-align: right;
}
.le-team-balance-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    padding-top: .85rem;
    border-top: 1px solid var(--le-divider);
}
.le-team-balance-legend,
.le-team-balance-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem .85rem;
    color: var(--le-text-muted);
    font-size: .72rem;
}
.le-team-balance-legend span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.le-team-balance-legend i {
    width: .65rem;
    height: .65rem;
    border-radius: .18rem;
}
.le-team-balance-summary {
    justify-content: flex-end;
}
.le-team-balance-summary strong {
    color: var(--le-text);
    font-variant-numeric: tabular-nums;
}
[data-bs-theme="dark"] body.le-area-leagueadmin .le-team-balance-mountain {
    background: var(--le-brand-200);
    color: #fff;
}
[data-bs-theme="dark"] body.le-area-leagueadmin .le-team-balance-city {
    background: var(--le-brand-400);
    color: #fff;
}
[data-bs-theme="dark"] body.le-area-leagueadmin .le-team-balance-desert {
    background: var(--le-brand-700);
    color: var(--le-text-invert);
}
@media (max-width: 767.98px) {
    .le-team-balance-row-head {
        align-items: flex-start;
    }
    .le-team-balance-bar {
        height: 2rem;
    }
    .le-team-balance-segment {
        padding-inline: .15rem;
        font-size: .64rem;
    }
    .le-team-balance-metrics a:nth-child(n + 2) {
        display: none;
    }
    .le-team-balance-footer {
        align-items: flex-start;
        flex-direction: column;
    }
    .le-team-balance-summary {
        justify-content: flex-start;
    }
}

/* 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; }

/* Family registrations stay tabular on larger screens and become readable,
   full-width player cards on phones. */
.le-registration-player-copy { min-width: 0; }
.le-registration-player-name,
.le-registration-club { overflow-wrap: anywhere; }
.le-registration-status-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

@media (max-width: 767.98px) {
    .le-registration-table-surface .table-responsive { overflow: visible; }
    .le-registration-table,
    .le-registration-table > tbody { display: block; width: 100%; }
    .le-registration-table > thead { display: none; }
    .le-registration-table > tbody > tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .75rem 1rem;
        padding: 1rem;
    }
    .le-registration-table > tbody > tr + tr {
        border-top: 1px solid var(--le-divider);
    }
    .le-registration-table > tbody > tr > td {
        padding: 0 !important;
        border: 0 !important;
    }
    .le-registration-table .le-registration-player {
        grid-column: 1 / -1;
    }
    .le-registration-table .le-registration-player .le-avatar {
        flex: 0 0 auto;
    }
    .le-registration-table .le-registration-club,
    .le-registration-table .le-registration-balance,
    .le-registration-table .le-registration-status {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: .5rem;
    }
    .le-registration-table .le-registration-balance {
        grid-column: 1 / -1;
        justify-content: start;
        text-align: left !important;
    }
    .le-registration-table .le-registration-club {
        grid-column: 1 / -1;
    }
    .le-registration-table .le-registration-status {
        grid-column: 1 / -1;
        justify-content: start;
    }
    .le-registration-table td[data-label]::before {
        content: attr(data-label);
        color: var(--le-text-muted);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
    }
    .le-registration-table .le-registration-status .le-chip {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .le-registration-table .le-registration-actions {
        grid-column: 1 / -1;
        text-align: left !important;
    }
    .le-registration-table .le-registration-actions > div {
        display: flex !important;
        width: 100%;
    }
    .le-registration-table .le-registration-actions .btn {
        flex: 1 1 8rem;
    }
}

/* ---------- 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); }

/* ---------- Floating, role-aware help ---------- */
.le-user-help {
    position: relative;
    z-index: 1055;
}

.le-user-help-launcher {
    position: fixed;
    right: max(1.25rem, env(safe-area-inset-right));
    bottom: max(1.25rem, env(safe-area-inset-bottom));
    z-index: 1056;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 46px;
    padding: .65rem 1rem;
    border: 1px solid color-mix(in srgb, var(--le-brand-500) 65%, white);
    border-radius: 999px;
    background: var(--le-brand-500);
    color: #fff;
    box-shadow: 0 14px 36px rgba(10, 18, 35, .24);
    font-weight: 750;
    letter-spacing: -.01em;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.le-user-help-launcher:hover,
.le-user-help-launcher:focus-visible {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(10, 18, 35, .3);
}

.le-user-help-launcher svg {
    width: 21px;
    height: 21px;
}

.le-user-help-panel {
    position: fixed;
    top: 5.25rem;
    right: max(1.25rem, env(safe-area-inset-right));
    bottom: 5.25rem;
    z-index: 1055;
    display: flex;
    flex-direction: column;
    width: min(430px, calc(100vw - 2.5rem));
    overflow: hidden;
    border: 1px solid var(--le-border);
    border-radius: 18px;
    background: var(--le-surface);
    color: var(--le-text);
    box-shadow: 0 24px 70px rgba(10, 18, 35, .28);
    opacity: 0;
    visibility: hidden;
    transform: translateX(calc(100% + 2rem));
    transition: transform .22s ease, opacity .18s ease, visibility 0s linear .22s;
}

.le-user-help.is-open .le-user-help-panel {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition-delay: 0s;
}

.le-user-help.is-open .le-user-help-launcher {
    pointer-events: none;
    opacity: 0;
    transform: translateY(8px);
}

.le-user-help-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.15rem 1rem;
    border-bottom: 1px solid var(--le-border-soft);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--le-brand-500) 12%, var(--le-surface)),
        var(--le-surface));
}

.le-user-help-role {
    display: block;
    margin-bottom: .25rem;
    color: var(--le-brand-500);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.le-user-help-header h2 {
    margin: 0;
    font-size: 1.18rem;
    letter-spacing: -.025em;
}

.le-user-help-close {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--le-border);
    border-radius: 10px;
    background: var(--le-surface);
    color: var(--le-text-muted);
}

.le-user-help-close:hover,
.le-user-help-close:focus-visible {
    border-color: var(--le-brand-500);
    color: var(--le-brand-500);
}

.le-user-help-close svg { width: 19px; height: 19px; }

.le-user-help-content {
    min-height: 0;
    padding: 1rem 1.15rem 1.25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.le-user-help-intro {
    margin: 0 0 .75rem;
    color: var(--le-text-muted);
    font-size: .9rem;
    line-height: 1.5;
}

.le-user-help-hint {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 1rem;
    padding: .55rem .65rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--le-brand-500) 8%, var(--le-surface-2));
    color: var(--le-text-muted);
    font-size: .78rem;
}

.le-user-help-hint svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--le-brand-500);
}

.le-user-help-tasks {
    display: grid;
    gap: .65rem;
}

.le-user-help-task {
    overflow: clip;
    border: 1px solid var(--le-border-soft);
    border-radius: 12px;
    background: var(--le-surface-2);
}

.le-user-help-task.is-current {
    border-color: color-mix(in srgb, var(--le-brand-500) 55%, var(--le-border));
}

.le-user-help-task summary {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: start;
    gap: .55rem;
    padding: .8rem;
    cursor: pointer;
    list-style: none;
}

.le-user-help-task summary::-webkit-details-marker { display: none; }

.le-user-help-task summary:hover,
.le-user-help-task summary:focus-visible {
    background: color-mix(in srgb, var(--le-brand-500) 6%, transparent);
    outline: none;
}

.le-user-help-task-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: .05rem;
    border-radius: 7px;
    background: color-mix(in srgb, var(--le-brand-500) 12%, var(--le-surface));
    color: var(--le-brand-500);
}

.le-user-help-task-icon svg {
    width: 14px;
    height: 14px;
    transition: transform .16s ease;
}

.le-user-help-task[open] .le-user-help-task-icon svg { transform: rotate(90deg); }

.le-user-help-task summary strong {
    display: block;
    color: var(--le-text);
    font-size: .9rem;
    line-height: 1.3;
}

.le-user-help-task summary small {
    display: block;
    margin-top: .15rem;
    color: var(--le-text-muted);
    font-size: .76rem;
    line-height: 1.35;
}

.le-user-help-current {
    align-self: center;
    padding: .2rem .4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--le-brand-500) 14%, var(--le-surface));
    color: var(--le-brand-500);
    font-size: .64rem;
    font-weight: 800;
    white-space: nowrap;
}

.le-user-help-task-body {
    padding: 0 .85rem .9rem 2.95rem;
}

.le-user-help-task-body ol {
    margin: 0 0 .85rem;
    padding-left: 1.15rem;
}

.le-user-help-task-body li {
    padding-left: .2rem;
    color: var(--le-text-muted);
    font-size: .84rem;
    line-height: 1.48;
}

.le-user-help-task-body li + li { margin-top: .42rem; }

.le-user-help-task-body li::marker {
    color: var(--le-brand-500);
    font-weight: 800;
}

.le-user-help-task-body .btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.le-user-help-task-body .btn svg { width: 15px; height: 15px; }

@media (max-width: 575.98px) {
    .le-user-help-launcher {
        right: max(.85rem, env(safe-area-inset-right));
        bottom: max(.85rem, env(safe-area-inset-bottom));
        min-height: 44px;
        padding: .6rem .85rem;
    }

    .le-user-help-panel {
        top: max(4.5rem, calc(env(safe-area-inset-top) + 3.75rem));
        right: .6rem;
        bottom: max(.6rem, env(safe-area-inset-bottom));
        width: calc(100vw - 1.2rem);
        border-radius: 16px;
        transform: translateY(calc(100% + 5rem));
    }

    .le-user-help.is-open .le-user-help-panel { transform: translateY(0); }

    .le-user-help-content { padding-inline: .9rem; }
    .le-user-help-task-body { padding-left: 2.7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .le-user-help-launcher,
    .le-user-help-panel,
    .le-user-help-task-icon svg { transition: none; }
}

/* ---------- Utilities ---------- */
/* Bootstrap 5.3 ships no min-width utilities, but a dozen views pair
   `.flex-grow-1 .min-w-0` to let a flex child shrink below its content's
   intrinsic width — without this rule the child refuses to shrink and long
   names or button rows spill outside their card. */
.min-w-0 { min-width: 0; }
.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%;
}
.team-roster-selector {
    flex: 0 1 520px;
    min-width: min(480px, 72vw);
}
.team-roster-selector .form-select {
    width: 100%;
    min-width: 0;
    padding-right: 2.75rem;
}
@media (max-width: 767.98px) {
    .team-roster-selector {
        width: 100%;
        min-width: 0;
    }
}
@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;
}
.team-roster-actions__group {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.team-roster-actions--roster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.team-roster-actions--roster > .team-roster-action--invite,
.team-roster-actions--roster > .team-roster-action--waivers {
    grid-column: 1 / -1;
}
.team-roster-actions--roster > .team-roster-action--invite { order: 1; }
.team-roster-actions--roster > .team-roster-action--events { order: 2; }
.team-roster-actions--roster > .team-roster-action--complete { order: 3; }
.team-roster-actions--roster > .team-roster-action--waivers { order: 4; }
.team-roster-actions--roster > form .btn { width: 100%; }
@media (min-width: 576px) {
    .team-roster-actions {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .team-roster-actions__group {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }
    .team-roster-actions__group--primary {
        margin-left: auto;
    }
    .team-roster-actions--roster {
        display: flex;
        flex-wrap: wrap;
    }
    .team-roster-actions--roster > .team-roster-action--events { order: 1; }
    .team-roster-actions--roster > .team-roster-action--waivers { order: 2; }
    .team-roster-actions--roster > .team-roster-action--invite {
        order: 3;
        margin-left: auto;
    }
    .team-roster-actions--roster > .team-roster-action--complete { order: 4; }
}
.roster-filter-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem 1rem;
}
.roster-filter-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}
.roster-filter-label {
    color: var(--le-text-muted);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.roster-filter-scroll {
    display: flex;
    gap: .35rem;
}
.roster-filter-scroll .btn {
    border-radius: var(--le-radius-pill);
    white-space: nowrap;
}
.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: 40px minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
}
.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 {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.roster-player-card__actions {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding-block: .1rem .15rem;
}
.roster-player-card__actions .btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.roster-player-card__actions .dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.roster-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin: 0;
}
.roster-detail-grid > div {
    min-width: 0;
}
.roster-detail-grid__wide {
    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;
}
.roster-parent-email-form {
    min-width: 20rem;
}
.roster-parent-email-form .form-control {
    min-width: 14rem;
}
.roster-mobile-parent-email-form {
    width: 100%;
}
.roster-mobile-parent-email-form .form-control {
    min-width: 0;
}
.roster-pending-email-form {
    min-width: 24rem;
}
.roster-pending-email-form .form-control {
    min-width: 14rem;
}
@media (max-width: 575.98px) {
    .roster-pending-email-form {
        min-width: 0;
        width: 100%;
        flex-direction: column;
    }
    .roster-pending-email-form .form-control {
        min-width: 0;
    }
    .roster-pending-email-form .btn {
        width: 100%;
    }
    .roster-filter-panel {
        display: grid;
        gap: .65rem;
        margin-inline: -.1rem;
    }
    .roster-filter-row {
        display: grid;
        gap: .3rem;
    }
    .roster-filter-scroll {
        overflow-x: auto;
        scrollbar-width: none;
        padding: .1rem .1rem .25rem;
        margin-inline: -.1rem;
        overscroll-behavior-inline: contain;
    }
    .roster-filter-scroll::-webkit-scrollbar { display: none; }
    .roster-filter-scroll .btn {
        min-height: 40px;
        padding-inline: .9rem;
    }
    .roster-player-card {
        padding: .9rem;
    }
    .roster-avatar {
        width: 40px;
        height: 40px;
    }
    .roster-player-card__actions .btn {
        min-height: 44px;
    }
    .roster-detail-grid {
        gap: .8rem .65rem;
    }
}

/* 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; }

/* Compact filters use the resolved tenant palette. Bootstrap's stock nav-pill
   active state is blue, which breaks the Jazz Bantam purple identity. */
.le-brand-pills .nav-link.active {
    color: #fff;
    background-color: var(--le-brand-500);
    background-image: var(--le-gradient-brand);
    box-shadow: 0 6px 14px -7px rgba(var(--le-brand-primary-rgb), .7);
}

/* 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;
}
.coach-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: .75rem;
}
.coach-season-filter {
    min-width: 12rem;
    width: auto;
}
.coach-team-card {
    min-width: 0;
    border-radius: 14px;
    box-shadow: var(--le-shadow-xs);
}
.coach-team-card .card-body {
    padding: .85rem 1rem;
}
.coach-team-card__title {
    min-width: 0;
    font-family: var(--le-font-display);
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.3;
}
.coach-team-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .65rem;
    font-size: .76rem;
}
.coach-team-card__meta span + span::before {
    margin-right: .65rem;
    content: "·";
}
.coach-team-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.coach-team-card__actions form {
    display: inline-flex;
    margin: 0;
}
.coach-team-card .btn-sm {
    padding: .25rem .65rem;
    font-size: .78rem;
}
.household-player-hero {
    overflow: hidden;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--le-brand-500) 7%, var(--le-surface)), var(--le-surface) 58%);
    border-color: color-mix(in srgb, var(--le-brand-500) 25%, var(--le-border));
    box-shadow: var(--le-shadow-sm);
}
.household-player-hero .card-body {
    padding: clamp(1.15rem, 2vw, 1.5rem);
}
.household-player-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: .85rem;
}
.household-player-tile {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    padding: 1rem 1.1rem;
    background: color-mix(in srgb, var(--le-surface) 94%, transparent);
    border: 1px solid var(--le-border);
    border-radius: 14px;
}
.household-player-avatar {
    display: inline-flex;
    flex: 0 0 64px;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    object-fit: cover;
    color: var(--le-text-invert);
    background: var(--le-text-soft);
    border-radius: 50%;
    font-family: var(--le-font-display);
    font-size: 1.25rem;
}
.household-player-name {
    font-family: var(--le-font-display);
    font-size: 1.15rem;
    font-weight: 700;
}
.household-payment-summary .card-body {
    padding: .85rem 1rem;
}
.household-payment-summary__icon {
    display: inline-grid;
    flex: 0 0 42px;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--le-brand-700);
    background: var(--le-brand-50);
    border-radius: 12px;
}
.le-stat {
    height: 100%;
    box-shadow: var(--le-shadow-xs);
}
.le-stat-caption {
    margin-top: .2rem;
    color: var(--le-text-muted);
    font-size: .78rem;
}
.reconciliation-summary .le-stat {
    align-items: flex-start;
}
.reconciliation-summary .le-stat > div {
    width: 100%;
}
.reconciliation-summary .le-stat-label {
    min-height: 1.25rem;
}
.reconciliation-summary .le-stat-value {
    margin-top: .15rem;
    white-space: nowrap;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
}
.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) ---------- */

/* Live team-registration progress. The form is intentionally long, so the
   tracker remains alongside it on desktop and becomes a normal compact card
   above/below the content on smaller screens. */
.le-team-registration-tracker {
    position: sticky;
    top: calc(var(--le-header-height, 72px) + 1rem);
    padding: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--le-brand-500) 24%, var(--le-border));
    border-radius: var(--le-radius-lg);
    background: var(--le-surface);
    box-shadow: var(--le-shadow-md);
}
.le-team-registration-tracker__eyebrow {
    color: var(--le-brand-600);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.le-team-registration-tracker__heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .25rem;
}
.le-team-registration-tracker__heading h2 {
    margin: 0;
    font-size: 1.15rem;
}
.le-team-registration-tracker__heading span {
    flex: 0 0 auto;
    color: var(--le-text-muted);
    font-size: .78rem;
    font-weight: 650;
}
.le-team-registration-tracker__progress {
    height: 6px;
    margin: .8rem 0 1rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--le-surface-3);
}
.le-team-registration-tracker__progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--le-gradient-brand);
    transition: width .24s ease;
}
.le-team-registration-tracker__steps {
    display: grid;
    gap: .3rem;
    padding: 0;
    margin: 0;
    list-style: none;
}
.le-team-registration-tracker__steps a,
.le-team-registration-step__locked {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: .7rem;
    align-items: start;
    padding: .55rem;
    border-radius: var(--le-radius-sm);
    color: var(--le-text-muted);
    text-decoration: none;
    transition: background-color .16s ease, color .16s ease;
}
.le-team-registration-tracker__steps a:hover {
    color: var(--le-text);
    background: var(--le-surface-2);
}
.le-team-registration-step__marker {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid var(--le-border);
    border-radius: 50%;
    background: var(--le-surface-2);
    color: var(--le-text-muted);
    font-size: .76rem;
    font-weight: 800;
}
.le-team-registration-tracker__steps strong,
.le-team-registration-tracker__steps small {
    display: block;
}
.le-team-registration-tracker__steps strong {
    color: inherit;
    font-size: .9rem;
    line-height: 1.25;
}
.le-team-registration-tracker__steps small {
    margin-top: .1rem;
    color: var(--le-text-soft);
    font-size: .75rem;
    line-height: 1.3;
}
.le-team-registration-tracker__steps .is-current a {
    color: var(--le-text);
    background: color-mix(in srgb, var(--le-brand-500) 9%, var(--le-surface));
}
.le-team-registration-tracker__steps .is-current .le-team-registration-step__marker {
    border-color: var(--le-brand-500);
    color: var(--le-text-invert);
    background: var(--le-brand-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--le-brand-500) 15%, transparent);
}
.le-team-registration-tracker__steps .is-complete a {
    color: var(--le-text-muted);
}
.le-team-registration-tracker__steps .is-complete .le-team-registration-step__marker {
    border-color: color-mix(in srgb, var(--le-success) 42%, var(--le-border));
    color: var(--le-success);
    background: color-mix(in srgb, var(--le-success) 13%, var(--le-surface));
}
.le-team-registration-tracker__steps .is-locked {
    opacity: .64;
}
.le-team-registration-tracker__hint {
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid var(--le-border-soft);
    color: var(--le-text-soft);
    font-size: .76rem;
}
[data-registration-section] {
    scroll-margin-top: calc(var(--le-header-height, 72px) + 1.25rem);
}
@media (max-width: 991.98px) {
    .le-team-registration-layout > aside { order: -1; }
    .le-team-registration-tracker { position: static; padding: 1rem; }
    .le-team-registration-tracker__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .le-team-registration-tracker__steps a,
    .le-team-registration-step__locked { padding: .45rem; }
    .le-team-registration-tracker__steps small { display: none; }
}
@media (max-width: 575.98px) {
    .le-team-registration-tracker__steps { grid-template-columns: 1fr; }
}

/* 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
   uses the same neutral charcoal as the app shell, which
   also prevents Edge mobile from applying its own muddy auto-dark transform. */
[data-bs-theme="dark"] body.le-public-registration-page {
    --le-bg: #1C1E23;
    --le-surface: #272A31;
    --le-surface-2: #23262C;
    --le-surface-3: #30343C;
    --le-border: #454A55;
    --le-border-soft: #363B44;
    --le-divider: #363B44;
    --le-gradient-hero: linear-gradient(var(--le-bg), var(--le-bg));
    --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: var(--le-bg);
}
.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-brand="jazz-bantam"] {
    /* 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;
    --le-brand-logo-url: url("/images/teams/jazz-watermark.svg");
}
/* 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-brand="jazz-bantam"] .le-navbar::before {
    background: #0B0A0F;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html[data-le-brand="jazz-bantam"] .le-navbar { border-bottom-color: rgba(255, 255, 255, .08); }
html[data-le-brand="jazz-bantam"] .le-navbar .navbar-brand,
html[data-le-brand="jazz-bantam"] .le-navbar .navbar-brand:hover { color: #fff; }
html[data-le-brand="jazz-bantam"] .le-navbar .le-shell-toggle {
    color: rgba(255, 255, 255, .85);
    border-color: rgba(255, 255, 255, .35);
}
html[data-le-brand="jazz-bantam"] .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-brand="jazz-bantam"] .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-brand="jazz-bantam"] .le-setup-banner .le-setup-banner__title,
html[data-le-brand="jazz-bantam"] .le-setup-banner .le-setup-banner__meta { color: #fff; }
html[data-le-brand="jazz-bantam"] .le-setup-banner .le-eyebrow { color: rgba(255, 255, 255, .82); }
html[data-le-brand="jazz-bantam"] .le-setup-banner .le-setup-progress { background: rgba(255, 255, 255, .28); }
html[data-le-brand="jazz-bantam"] .le-setup-banner .le-setup-progress__bar { background: #fff; }
html[data-le-brand="jazz-bantam"] .le-setup-banner .le-setup-banner__dismiss { color: rgba(255, 255, 255, .85); }
html[data-le-brand="jazz-bantam"] .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-brand="jazz-bantam"] .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);
}
/* Nested pages are a menu, not a list of bare links: each one is a full row
   with its own padding, a hover surface, and a tinted state with a marker on
   the rail when it is the page you are on. No per-item dots or branch stubs —
   the single vertical rail carries the grouping. */
[data-bs-theme="light"] .le-sidebar-group-items .le-sidebar-icon,
[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 {
    min-height: 36px;
    margin: 1px 0;
    padding: 6px 10px;
    border-radius: 8px;
    color: var(--le-sidebar-text-secondary);
    font-size: 13.5px;
    font-weight: 500;
}
[data-bs-theme="light"] .le-sidebar-group-items .le-sidebar-link:hover {
    color: var(--le-sidebar-text);
    background: var(--le-sidebar-hover);
    transform: none;
}
[data-bs-theme="light"] .le-sidebar-group-items .le-sidebar-link.active {
    color: var(--le-sidebar-brand);
    background: var(--le-sidebar-brand-soft);
    box-shadow: none;
    font-weight: 600;
}
/* Marker sits on the rail itself, so the active page reads at a glance. */
[data-bs-theme="light"] .le-sidebar-group-items .le-sidebar-link.active::before {
    content: "";
    display: block;
    position: absolute;
    left: -16px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    border-radius: 999px;
    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 the active tenant palette
   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, #06B6D4), var(--le-team-primary, #0D6EFD));
    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 — menu rows on a clean rail, a marker
   on the active row, 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,
[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 {
    min-height: 36px;
    margin: 1px 0;
    padding: 6px 10px;
    border-radius: 8px;
    color: rgba(255, 255, 255, .66);
    font-size: 13.5px;
    font-weight: 500;
}
[data-bs-theme="dark"] .le-sidebar-group-items .le-sidebar-link:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, .06);
    transform: none;
}
[data-bs-theme="dark"] .le-sidebar-group-items .le-sidebar-link.active {
    color: color-mix(in srgb, var(--le-team-primary, #0D6EFD) 28%, white);
    background: rgba(255, 255, 255, .09);
    box-shadow: none;
    font-weight: 600;
}
[data-bs-theme="dark"] .le-sidebar-group-items .le-sidebar-link.active::before {
    content: "";
    display: block;
    position: absolute;
    left: -16px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    border-radius: 999px;
    background: var(--le-team-primary, #0D6EFD);
}
[data-bs-theme="dark"] .le-sidebar-group-row:has(> .le-sidebar-link.active) {
    border-radius: 10px;
    background: linear-gradient(135deg, var(--le-team-accent, #06B6D4), var(--le-team-primary, #0D6EFD));
}
[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;
}
/* Branded operational portals use the same masthead geometry and circular
   collapse affordance as League Admin, regardless of tenant scope. */
html body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-panel-head.le-sidebar-panel-head-portal {
    min-height: 42px;
    margin: 2px 0 20px;
    padding: 0 2px;
    border-bottom: 0;
}
html body.le-has-family-sidebar .le-sidebar-prolook-brand {
    min-width: 0;
    text-decoration: none;
}
html body.le-has-family-sidebar .le-sidebar-prolook-wordmark {
    color: var(--le-text);
    font-size: 1.2rem;
    font-weight: 850;
    letter-spacing: .08em;
    line-height: 1;
}
html body.le-has-family-sidebar .le-sidebar-panel-head-portal .le-sidebar-collapse {
    width: 40px;
    height: 40px;
    margin-left: auto;
    border-radius: 50%;
    color: #94A3B8;
    background: #F8FAFC;
    border-color: #EEF2F7;
}
html body.le-has-family-sidebar .le-sidebar-panel-head-portal .le-sidebar-collapse:hover {
    color: var(--le-brand-600);
    background: var(--le-brand-50);
    transform: none;
}
html body.le-has-family-sidebar .le-sidebar-brand-logo-jazz {
    display: block;
    width: auto;
    max-width: calc(100% - 52px);
    object-fit: contain;
    object-position: left center;
    /* The supplied Jazz Youth lockup is white; render it navy on light panels. */
    filter: brightness(0) saturate(100%) invert(12%) sepia(15%) saturate(979%) hue-rotate(183deg) brightness(93%) contrast(96%);
}
[data-bs-theme="dark"] body.le-has-family-sidebar .le-sidebar-brand-logo-jazz {
    filter: none;
}
/* The official Bantam badge is white-on-transparent. Recolor it to Jazz navy
   on light surfaces and preserve the supplied white artwork in dark mode. */
.le-jazz-bantam-theme-logo {
    filter: brightness(0) saturate(100%) invert(12%) sepia(15%) saturate(979%) hue-rotate(183deg) brightness(93%) contrast(96%);
}
[data-bs-theme="dark"] .le-jazz-bantam-theme-logo {
    filter: none;
}
html body.le-has-family-sidebar .le-sidebar-brand-logo-bantam {
    width: 44px;
    height: 44px;
    max-width: 44px;
}
[data-bs-theme="dark"] body.le-has-family-sidebar .le-sidebar-panel-head-portal .le-sidebar-collapse {
    color: #FFFFFF;
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .08);
}
[data-bs-theme="dark"] body.le-has-family-sidebar .le-sidebar-panel-head-portal .le-sidebar-collapse:hover {
    background: rgba(255, 255, 255, .08);
}
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;
}

/* Jazz Bantam league-admin help and operating guide. */
.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; }

.le-player-team-cell {
    max-width: 22rem;
}

.le-player-parent-cell {
    min-width: 18rem;
}

.le-player-team-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Jazz Bantam league-admin tables paginate in viewport-sized pages. Rows are
   hidden with a class (instead of the hidden attribute) so existing client-side
   filters can keep owning their own visibility state. */
.le-client-pager-hidden {
    display: none !important;
}

.le-client-table-pager .page-link {
    min-width: 2.6rem;
    text-align: center;
}

/* 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 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 .le-family-sidebar .le-sidebar-nav {
        justify-items: center;
    }
    body.le-has-family-sidebar.le-family-sidebar-hidden .le-family-sidebar .le-sidebar-link {
        width: 48px;
        margin-inline: auto;
        gap: 0;
    }
    body.le-has-family-sidebar.le-family-sidebar-hidden .le-family-sidebar .le-sidebar-usercard {
        width: 52px;
        margin-inline: auto;
        gap: 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 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; }
/* Show the chevrons that point where the menu is going: « « while it is open
   (click sends it back to the rail), » » while it is collapsed. */
.le-collapse-show { display: none; }
body.le-family-sidebar-hidden .le-collapse-hide { display: none; }
body.le-family-sidebar-hidden .le-collapse-show { display: inline; }

/* ---- 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/charcoal 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: #1C1E23;
    --le-surface: #272A31;
    --le-surface-2: #23262C;
    --le-surface-3: #30343C;
    --le-border: #454A55;
    --le-border-soft: #363B44;
    --le-divider: #363B44;
    --le-text: #E6E8ED;
    --le-text-muted: #B6BBC6;
    --le-text-soft: #A0A7B5;
    --le-text-invert: #1C1E23;
    --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, #23262C 0%, #1C1E23 100%);
    --le-gradient-brand: linear-gradient(135deg, #60A5FA 0%, #2563EB 48%, #0B3B8C 100%);
    --le-glass-bg: rgba(39, 42, 49, .94);
    --le-glass-border: rgba(96, 165, 250, .14);
    --bs-body-bg: var(--le-bg);
    --bs-body-color: var(--le-text);
    --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: var(--le-bg);
    border-color: var(--le-border);
}

[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 .le-family-sidebar .le-sidebar-link,
    body.le-has-family-sidebar.le-family-sidebar-hidden .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 .le-family-sidebar .le-sidebar-panel-head {
        padding-block: 0 10px;
        margin-bottom: 6px;
    }
    body.le-has-family-sidebar.le-family-sidebar-hidden .le-family-sidebar .le-sidebar-section + .le-sidebar-section {
        margin-top: .45rem;
        padding-top: .45rem;
    }
}

/* Collapsed-rail flyout — the hovered icon's own menu. Lives on <body> (not in
   the rail) so the rail's scroll container cannot clip it; site.js positions it
   beside the hovered tile and owns show/hide. Two shapes: a panel of menu rows
   for an icon that has nested pages, and a plain label chip (.is-tip) for one
   that does not. */
.le-sidebar-flyout {
    position: fixed;
    z-index: 1060;
    display: grid;
    gap: 1px;
    min-width: 208px;
    max-width: 264px;
    padding: 6px;
    border: 1px solid var(--le-border);
    border-radius: 12px;
    background: var(--le-surface);
    box-shadow: 0 18px 48px -12px rgba(16, 24, 40, .28), 0 4px 12px rgba(16, 24, 40, .10);
}
.le-sidebar-flyout[hidden] {
    display: none;
}
.le-sidebar-flyout.is-tip {
    min-width: 0;
    padding: 5px 10px;
    border-radius: 8px;
    color: var(--le-text);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.le-sidebar-flyout-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    color: var(--le-text-muted);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
}
.le-sidebar-flyout-link:hover {
    color: var(--le-text);
    background: var(--le-surface-2);
}
.le-sidebar-flyout-link.active {
    color: var(--le-brand-600);
    background: var(--le-brand-50);
    font-weight: 600;
}
/* The parent page heads its own menu, with a hairline between it and its pages. */
.le-sidebar-flyout-link.is-parent {
    margin-bottom: 4px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--le-border-soft);
    border-radius: 8px 8px 0 0;
    color: var(--le-text);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
}
.le-sidebar-flyout-badge {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--le-brand-600);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}
[data-bs-theme="dark"] .le-sidebar-flyout {
    box-shadow: 0 18px 48px -12px rgba(0, 0, 0, .6), 0 4px 12px rgba(0, 0, 0, .4);
}

/* Keep export column names visible while reviewing long files. Sticky positioning
   belongs on the header cells for reliable behavior inside responsive tables. */
.le-export-preview-scroll {
    max-height: 65vh;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
.le-export-preview-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--le-surface, var(--bs-body-bg));
    box-shadow: inset 0 -1px 0 var(--le-border, var(--bs-border-color));
}
.le-export-preview-scroll .le-prolook-order-row > * {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background: var(--le-surface-2, var(--bs-tertiary-bg));
    border-top-width: 2px;
    box-shadow: inset 0 -1px 0 var(--le-border, var(--bs-border-color));
}

/* Large front/back preview above the Bantam Pack Plus benefit copy. */
.bantam-pack-plus-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.bantam-pack-plus-images {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 13rem));
    justify-content: center;
    gap: clamp(1rem, 4vw, 2.5rem);
    width: 100%;
}

.bantam-pack-plus-image-link {
    display: grid;
    gap: 0.4rem;
    color: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.bantam-pack-plus-image-link:hover,
.bantam-pack-plus-image-link:focus-visible {
    color: inherit;
}

.bantam-pack-plus-image-link:focus-visible {
    border-radius: 0.5rem;
    outline: 3px solid rgba(var(--bs-primary-rgb), 0.35);
    outline-offset: 0.25rem;
}

.bantam-pack-plus-image {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 0.5rem;
    cursor: zoom-in;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.bantam-pack-plus-image-link:hover .bantam-pack-plus-image,
.bantam-pack-plus-image-link:focus-visible .bantam-pack-plus-image {
    transform: scale(1.025);
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.14);
}

.bantam-shirt-preview-body {
    display: grid;
    place-items: center;
    min-height: min(70vh, 50rem);
    padding: 1rem;
    background: var(--bs-tertiary-bg);
}

.bantam-shirt-preview-body img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 75vh;
    object-fit: contain;
}

.bantam-pack-description,
.bantam-upsell-description {
    min-width: 0;
    white-space: pre-line;
}

/* =====================================================================
   Primary sidebar — console refresh (every scope)
   ---------------------------------------------------------------------
   One structure for App Admin, league, club, team, family, distributor and
   fulfillment menus: they are the same partial, and until now each scope
   restated density and colour separately, so the same menu changed shape
   depending on who was signed in.

   Structure is shared, identity is not. Every accent below resolves from
   --le-team-primary, the palette TeamTheme emits for the signed-in club or
   team, so a club menu stays that club's colour and the platform menu stays
   platform blue. Neutrals (label, glyph, heading, hairline) are fixed —
   tinting body text with a tenant colour is what made the old menus read as
   consumer apps.

   Three things change: density (34px rows on a fixed icon column), hierarchy
   (one tracked micro-cap per section, a quieter step below it), and what
   "selected" looks like — a tinted seat with a 3px bar on the leading edge
   instead of a saturated fill competing with every other row.
   ===================================================================== */

:root body.le-has-family-sidebar .le-sidebar-panel {
    --le-nav-row: 34px;
    --le-nav-radius: 7px;
    --le-nav-glyph-size: 18px;
    --le-nav-accent: var(--le-team-primary, #2563EB);
    --le-nav-seat: color-mix(in srgb, var(--le-team-primary, #2563EB) 10%, #FFFFFF);
    --le-nav-label: #253549;
    --le-nav-glyph: #93A3B8;
    /* Both headings clear 4.5:1 on white — they are labels people read, not
       decoration, and the greys they replace sat under 3:1. Hierarchy comes
       from size and tracking instead of from fading the second level out. */
    --le-nav-heading: #5C6C82;
    --le-nav-subheading: #6F8098;
    --le-nav-hover: #F4F7FC;
    --le-nav-hairline: #E9EEF6;
    --le-sidebar-tree-line: #E9EEF6;
    padding: 14px 10px 12px;
    box-shadow: none;
}
:root[data-bs-theme="dark"] body.le-has-family-sidebar .le-sidebar-panel {
    --le-nav-accent: color-mix(in srgb, var(--le-team-primary, #2563EB) 45%, #FFFFFF);
    --le-nav-seat: color-mix(in srgb, var(--le-team-primary, #2563EB) 26%, transparent);
    --le-nav-label: #D7E2F2;
    --le-nav-glyph: #7C93B4;
    --le-nav-heading: #9DB0CB;
    --le-nav-subheading: #8598B4;
    --le-nav-hover: rgba(255, 255, 255, .06);
    --le-nav-hairline: rgba(255, 255, 255, .10);
    --le-sidebar-tree-line: rgba(255, 255, 255, .12);
}

/* Jazz Bantam's dark shell uses charcoal and purple. Keep the shared
   sidebar geometry and charcoal surface, with purple accents
   matching the league workspace. */
:root[data-bs-theme="dark"] body.le-jazz-bantam-shell.le-has-family-sidebar .le-sidebar-panel {
    --le-nav-accent: #D09AF4;
    --le-nav-seat: rgba(123, 44, 191, .26);
    --le-nav-label: #E1D8E5;
    --le-nav-glyph: #A28EA9;
    --le-nav-heading: #B9A5C1;
    --le-nav-subheading: #9F8AA7;
    --le-nav-hover: rgba(208, 154, 244, .08);
    --le-nav-hairline: rgba(208, 154, 244, .14);
    --le-sidebar-tree-line: rgba(208, 154, 244, .20);
    background: var(--le-surface);
    border-color: rgba(208, 154, 244, .14);
}

/* ---- Masthead: a brand band closed off by a hairline, with the two controls
       receding until they are reached for. ---- */
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-panel-head {
    gap: .55rem;
    min-height: 40px;
    padding-block: 0 12px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--le-nav-hairline);
}
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-brand-name {
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.015em;
}
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-pin,
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-hamburger {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border-color: transparent;
    background: transparent;
    color: var(--le-nav-glyph);
}
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-pin svg,
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-hamburger svg {
    width: 15px;
    height: 15px;
}
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-pin:hover,
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-hamburger:hover {
    color: var(--le-nav-label);
    background: var(--le-nav-hover);
    border-color: transparent;
    transform: none;
}
/* Pinned is a status, not the loudest thing in the masthead. */
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-pin[aria-pressed="true"] {
    color: var(--le-nav-accent);
    background: var(--le-nav-hover);
    border-color: transparent;
}

/* ---- Headings ---- */
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-section-title {
    padding: 15px 8px 4px;
    color: var(--le-nav-heading);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .085em;
    opacity: 1;
}
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-subgroup-title {
    margin-top: 11px;
    padding-inline: 8px;
    color: var(--le-nav-subheading);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .07em;
    opacity: 1;
}
/* The gradient rule trailing each subgroup heading was decoration standing in
   for structure; the space above the heading already separates the groups. */
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-subgroup-title::after {
    display: none;
}
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-section + .le-sidebar-section {
    margin-top: .25rem;
    padding-top: .25rem;
    border-top: 1px solid var(--le-nav-hairline);
}

/* ---- Rows: geometry is skipped while the menu is collapsed to the icon rail,
       which sizes its own tiles. ---- */
:root body.le-has-family-sidebar:not(.le-family-sidebar-hidden) .le-sidebar-panel .le-sidebar-nav > .le-sidebar-link,
:root body.le-has-family-sidebar:not(.le-family-sidebar-hidden) .le-sidebar-panel .le-sidebar-group-row > .le-sidebar-link {
    min-height: var(--le-nav-row);
    gap: 10px;
    margin: 1px 0;
    padding: 3px 8px;
    border-radius: var(--le-nav-radius);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -.004em;
}
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-nav > .le-sidebar-link,
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-group-row > .le-sidebar-link {
    color: var(--le-nav-label);
}
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-label {
    font-size: 13px;
    letter-spacing: -.004em;
}
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-nav > .le-sidebar-link .le-sidebar-icon,
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-group-row > .le-sidebar-link .le-sidebar-icon {
    width: var(--le-nav-glyph-size);
    height: var(--le-nav-glyph-size);
    color: var(--le-nav-glyph);
    background: none;
}
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-nav > .le-sidebar-link .le-sidebar-icon svg,
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-group-row > .le-sidebar-link .le-sidebar-icon svg {
    width: 17px;
    height: 17px;
}
/* The shared icon set is drawn at 2px for a larger row and reads as heavy line
   art at this density. */
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-icon svg {
    stroke-width: 1.7;
}
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-link:hover {
    color: var(--le-nav-label);
    background: var(--le-nav-hover);
    transform: none;
}
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-link:hover .le-sidebar-icon {
    color: var(--le-nav-label);
}
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--le-nav-accent) 55%, transparent);
    outline-offset: 1px;
}

/* ---- Selected: tinted seat, brand bar on the leading edge, brand label. ---- */
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-nav > .le-sidebar-link.active,
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-group-row:has(> .le-sidebar-link.active),
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-group-row > .le-sidebar-link.active {
    color: var(--le-nav-accent);
    background: var(--le-nav-seat);
    border-radius: var(--le-nav-radius);
    box-shadow: none;
    font-weight: 600;
}
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-nav > .le-sidebar-link.active .le-sidebar-icon,
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-group-row > .le-sidebar-link.active .le-sidebar-icon {
    color: var(--le-nav-accent);
    background: none;
}
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-nav > .le-sidebar-link.active::before,
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-group-row > .le-sidebar-link.active::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 18px;
    border-radius: 0 999px 999px 0;
    background: var(--le-nav-accent);
    transform: translateY(-50%);
}

/* ---- Submenu items: the tree rail stays, tuned to the same neutral. ---- */
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-group-items .le-sidebar-link {
    min-height: 30px;
    color: var(--le-nav-label);
    font-size: 12.5px;
}
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-group-items .le-sidebar-link.active {
    color: var(--le-nav-accent);
    background: var(--le-nav-seat);
    font-weight: 600;
}
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-group-items .le-sidebar-icon {
    background: color-mix(in srgb, var(--le-nav-glyph) 80%, transparent);
}
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-group-items .le-sidebar-link.active .le-sidebar-icon {
    background: var(--le-nav-accent);
}
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-caret {
    width: 26px;
    height: 30px;
    color: var(--le-nav-glyph);
}

/* ---- Scroll: a thin rail thumb. The platform scrollbar takes 15px out of a
       280px rail, which is a whole word off the end of every long label. ---- */
:root body.le-has-family-sidebar .le-sidebar-sections {
    scrollbar-width: thin;
    scrollbar-color: #CBD6E6 transparent;
}
:root body.le-has-family-sidebar .le-sidebar-sections::-webkit-scrollbar {
    width: 6px;
}
:root body.le-has-family-sidebar .le-sidebar-sections::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #CBD6E6;
}
:root body.le-has-family-sidebar .le-sidebar-sections::-webkit-scrollbar-track {
    background: transparent;
}
:root[data-bs-theme="dark"] body.le-has-family-sidebar .le-sidebar-sections {
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
:root[data-bs-theme="dark"] body.le-has-family-sidebar .le-sidebar-sections::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
}

/* ---- Footer: the account row and the environment stamp are chrome, not two
       more destinations. ---- */
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-footer {
    padding-top: .4rem;
    border-top-color: var(--le-nav-hairline);
}
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-userlabel {
    color: var(--le-nav-heading);
    font-size: .6rem;
    letter-spacing: .09em;
}
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-username {
    color: var(--le-nav-label);
    font-size: .8rem;
    font-weight: 600;
}

/* ---- Collapsed rail: the glyph is the whole label there, so it carries the
       label's contrast rather than the resting icon grey. ---- */
@media (min-width: 992px) {
    :root body.le-has-family-sidebar.le-family-sidebar-hidden .le-family-sidebar .le-sidebar-link .le-sidebar-icon {
        color: var(--le-nav-label);
    }
    :root body.le-has-family-sidebar.le-family-sidebar-hidden .le-family-sidebar .le-sidebar-link.active .le-sidebar-icon {
        color: var(--le-nav-accent);
    }
}

/* ---- Touch: the phone off-canvas keeps a comfortable target height. ---- */
@media (max-width: 991.98px) {
    :root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-nav > .le-sidebar-link,
    :root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-group-row > .le-sidebar-link {
        min-height: 42px;
        font-size: 14px;
    }
    :root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-label {
        font-size: 14px;
    }
}

/* ---- App Admin only: software administration is product infrastructure, so
       its panel stays white-on-white in light and charcoal in dark rather than
       taking a tenant surface. ---- */
html[data-le-scope="software-admin"] body.le-software-admin .le-sidebar-panel {
    background: #FFFFFF;
    border-color: var(--le-nav-hairline);
}
[data-bs-theme="dark"][data-le-scope="software-admin"] body.le-software-admin .le-sidebar-panel {
    background: var(--le-bg);
    border-color: var(--le-border);
    --le-nav-hairline: var(--le-border);
    --le-sidebar-tree-line: var(--le-border);
}
html[data-le-scope="software-admin"] body.le-software-admin .le-sidebar-brandmark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: .78rem;
}

/* =====================================================================
   Signed-in top bar — aligned with the sidebar masthead
   ---------------------------------------------------------------------
   The bar carried a 52px logo in a 73px band, so it stood 90px tall next to
   a 66px sidebar masthead: two brand lockups at two different sizes, on two
   different baselines, 280px apart. It read as a banner rather than as app
   chrome.

   It is now the same band as the sidebar masthead — 66px, closing on the
   same hairline, with the lockup at the same 30px as the one beside it — so
   the shell reads as one header split by the nav rail instead of two headers
   competing. Public marketing pages keep their taller glass bar; this is the
   signed-in shell only.
   ===================================================================== */

body.le-has-family-sidebar {
    --le-header-height: 66px;
}
body.le-has-family-sidebar .le-shell-content .le-navbar {
    /* Solid, not glass: a blurred bar over a white work area reads as haze,
       and the hairline is doing the separating anyway. */
    background: var(--le-surface);
    border-bottom: 1px solid var(--le-border-soft);
}
body.le-has-family-sidebar .le-shell-content .le-navbar::before {
    display: none;
}
body.le-has-family-sidebar .le-shell-content .le-navbar .container-xxl {
    min-height: var(--le-header-height);
}
body.le-has-family-sidebar .le-shell-content .le-navbar .navbar-brand {
    gap: .55rem;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.015em;
}
body.le-has-family-sidebar .le-shell-content .le-navbar .le-navbar-team-logo {
    height: 30px;
    max-width: 180px;
}
body.le-has-family-sidebar .le-shell-content .le-navbar .le-brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 12.5px;
    box-shadow: none;
}
body.le-has-family-sidebar .le-shell-content .le-navbar .le-shell-toggle {
    width: 34px;
    height: 34px;
    border-radius: 8px;
}

@media (max-width: 991.98px) {
    /* Phones get the same band as the off-canvas menu header. */
    body.le-has-family-sidebar {
        --le-header-height: 56px;
    }
}

/* Bootstrap's own navbar and brand padding sat outside the band token, so the
   bar measured 83px while the token said 66. Zero it and let the container's
   min-height be the single source of the bar's height. */
body.le-has-family-sidebar .le-shell-content .le-navbar {
    padding-block: 0;
}
body.le-has-family-sidebar .le-shell-content .le-navbar .navbar-brand {
    padding-block: 0;
    margin-right: 0;
}

/* Where the bar would only repeat what the rail already shows, it is not
   chrome — it is a second copy of the same logo 280px to the right. The App
   Admin sidebar carries the Club Manager lockup itself, so on a desktop the
   bar goes and the page starts at the top of the work area. Phones keep it:
   that is where the menu button lives. Tenant shells keep it too — their rail
   masthead carries the platform wordmark, while the bar carries the club's
   own crest. */
@media (min-width: 992px) {
    body.le-has-family-sidebar.le-software-admin .le-shell-content > header {
        display: none;
    }
    body.le-has-family-sidebar.le-software-admin .le-shell-content main.page-main {
        padding-block-start: 24px;
    }
}

/* A long display name in the account row was compressing the avatar into an
   ellipse — it is a fixed 34px circle, not a flexible one. */
:root body.le-has-family-sidebar .le-sidebar-panel .le-sidebar-usercard .le-avatar {
    flex: 0 0 auto;
}