/* Shared mobile shell and theme for member, guardian and coach portals.
   Admin keeps its established admin_mobile.css interaction and dark palette. */
body:is(.portal-member, .portal-guardian, .portal-coach) {
    --portal-mobile-gutter: 14px;
    min-width: 320px;
}
body:is(.portal-member, .portal-guardian, .portal-coach) .portal-mobile-record-list { display: none; }

@media (max-width: 1023.98px) {
    body:is(.portal-member, .portal-guardian, .portal-coach) {
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }

    body:is(.portal-member, .portal-guardian, .portal-coach) > header {
        padding: 9px 12px 10px;
    }

    body:is(.portal-member, .portal-guardian, .portal-coach) > header .header-shell,
    body:is(.portal-member, .portal-guardian, .portal-coach) > header .header-top {
        width: 100%;
        min-width: 0;
    }

    body:is(.portal-member, .portal-guardian, .portal-coach) > header .header-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px 10px;
    }

    body:is(.portal-member, .portal-guardian, .portal-coach) > header .header-top > div:first-child {
        grid-column: 1;
        grid-row: 1;
        width: auto;
        max-width: 100%;
        min-width: 0;
    }

    body:is(.portal-member, .portal-guardian, .portal-coach) > header .header-top > .mobile-menu-toggle {
        grid-column: 2;
        grid-row: 1;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 48px;
        min-height: 48px !important;
        padding: 8px 11px !important;
        border-radius: 12px !important;
    }

    body:is(.portal-member, .portal-guardian, .portal-coach) > header .header-top > .language-selector {
        grid-column: 1 / -1;
        grid-row: 2;
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-width: 0;
        margin: 0;
    }

    body:is(.portal-member, .portal-guardian, .portal-coach) > header .language-selector select {
        min-width: 0;
        max-width: 9rem;
        min-height: 44px;
    }

    body:is(.portal-member, .portal-guardian, .portal-coach) .brand-title {
        min-width: 0;
        font-size: clamp(17px, 5vw, 20px);
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    body:is(.portal-member, .portal-guardian, .portal-coach) .mobile-menu-toggle:focus-visible,
    body:is(.portal-member, .portal-guardian, .portal-coach) .main-navigation :focus-visible,
    body:is(.portal-member, .portal-guardian, .portal-coach) main :focus-visible {
        outline: 3px solid #9fc5ff !important;
        outline-offset: 2px;
        box-shadow: 0 0 0 2px #14243d !important;
    }

    body:is(.portal-member, .portal-guardian, .portal-coach) .mobile-scan-cta {
        margin-top: 8px;
    }

    body:is(.portal-member, .portal-guardian, .portal-coach) .mobile-scan-cta a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 46px;
        max-width: 100%;
        padding: 9px 14px;
        border-radius: 12px;
        white-space: normal;
    }

    body:is(.portal-member, .portal-guardian, .portal-coach) .portal-drawer-backdrop {
        position: fixed;
        inset: 0;
        z-index: 3500;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        background: rgba(10, 20, 35, .58);
        transition: opacity .16s ease, visibility 0s linear .16s;
    }

    body:is(.portal-member, .portal-guardian, .portal-coach) .portal-drawer-heading,
    body:is(.portal-member, .portal-guardian, .portal-coach) .portal-drawer-close {
        display: none;
    }

    body:is(.portal-member, .portal-guardian, .portal-coach) .main-navigation {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        z-index: 3502 !important;
        display: block !important;
        width: min(88vw, 368px);
        height: 100vh;
        height: 100dvh;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        padding: max(12px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        border: 0 !important;
        border-right: 1px solid rgba(255, 255, 255, .12);
        border-radius: 0 18px 18px 0 !important;
        background: #14243d !important;
        box-shadow: 18px 0 48px rgba(4, 12, 25, .25) !important;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translateX(-102%);
        transition: transform .18s ease, opacity .18s ease, visibility 0s linear .18s;
    }

    body:is(.portal-member, .portal-guardian, .portal-coach) .main-navigation.is-open {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
        transition: transform .18s ease, opacity .18s ease, visibility 0s;
    }

    body:is(.portal-member, .portal-guardian, .portal-coach) .portal-drawer-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 52px;
        margin: 0 0 12px;
        padding: 0 2px 12px;
        border-bottom: 1px solid rgba(255, 255, 255, .16);
        color: #f7faff;
        font-size: 15px;
    }

    body:is(.portal-member, .portal-guardian, .portal-coach) .portal-drawer-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-width: 44px;
        min-height: 44px;
        padding: 7px 10px;
        border: 1px solid rgba(255, 255, 255, .32);
        border-radius: 10px;
        background: rgba(255, 255, 255, .10);
        color: #fff;
        font: inherit;
        font-weight: 700;
        cursor: pointer;
    }

    body:is(.portal-member, .portal-guardian, .portal-coach) .portal-drawer-close > span:first-child { font-size: 20px; line-height: 1; }
    body:is(.portal-member, .portal-guardian, .portal-coach) .portal-drawer-close:hover { background: rgba(255, 255, 255, .18); }
    body:is(.portal-member, .portal-guardian, .portal-coach) .main-navigation .nav-search { display: block !important; margin-bottom: 12px !important; }
    body:is(.portal-member, .portal-guardian, .portal-coach) .main-navigation .nav-search-input {
        min-height: 46px !important;
        border: 1px solid rgba(255, 255, 255, .28) !important;
        background: #1d3455 !important;
        color: #f4f7fb !important;
    }
    body:is(.portal-member, .portal-guardian, .portal-coach) .main-navigation .nav-search-input::placeholder { color: #bdcadd !important; opacity: 1; }
    body:is(.portal-member, .portal-guardian, .portal-coach) .main-navigation .nav-sections { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 7px !important; }
    body:is(.portal-member, .portal-guardian, .portal-coach) .main-navigation .nav-section { position: static !important; min-width: 0; }
    body:is(.portal-member, .portal-guardian, .portal-coach) .main-navigation .nav-top-link,
    body:is(.portal-member, .portal-guardian, .portal-coach) .main-navigation .nav-top-trigger { min-height: 46px !important; white-space: normal; text-align: left; }
    body:is(.portal-member, .portal-guardian, .portal-coach) .main-navigation .nav-panel,
    body:is(.portal-member, .portal-guardian, .portal-coach) .main-navigation .nav-account .nav-panel {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        margin-top: 6px;
        padding: 7px !important;
        grid-template-columns: minmax(0, 1fr) !important;
        border-radius: 12px !important;
        box-shadow: none !important;
    }
    body:is(.portal-member, .portal-guardian, .portal-coach) .main-navigation .nav-subgroup-trigger,
    body:is(.portal-member, .portal-guardian, .portal-coach) .main-navigation .nav-item,
    body:is(.portal-member, .portal-guardian, .portal-coach) .main-navigation .nav-logout-button { min-height: 44px !important; }

    body.portal-nav-open > header {
        z-index: 3501 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    body.portal-nav-open > header .header-shell > :not(.main-navigation) { visibility: hidden; pointer-events: none; }
    body.portal-nav-open .portal-drawer-backdrop {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transition: opacity .16s ease, visibility 0s;
    }
    body.portal-nav-open > main,
    body.portal-nav-open .pwa-bottom-back { pointer-events: none; }

    body:is(.portal-member, .portal-guardian, .portal-coach) > main {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding: 14px var(--portal-mobile-gutter) 24px;
    }
    body:is(.portal-member, .portal-guardian, .portal-coach) > main > .page-shell {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding: 14px;
        border-radius: 16px;
    }
    body:is(.portal-member, .portal-guardian, .portal-coach) main :is(.stack, .dashboard-grid, .grid-2, .grid-3, .grid-4, .auto-grid, .metric-grid, .stats-grid, .form-row, .info-list, .d-flex, .flex-wrap, .actions, .form-actions) {
        min-width: 0;
        max-width: 100%;
    }
    body:is(.portal-member, .portal-guardian, .portal-coach) main :is(.stack, .dashboard-grid, .grid-2, .grid-3, .grid-4, .auto-grid, .metric-grid, .stats-grid, .form-row, .info-list, .d-flex, .flex-wrap, .actions, .form-actions) > * { min-width: 0; }
    body:is(.portal-member, .portal-guardian, .portal-coach) main :is(h1, h2, h3, h4, p, li, dd, .badge, .status-badge) { overflow-wrap: anywhere; }
    body:is(.portal-member, .portal-guardian, .portal-coach) main :is(.card, .section-card, .panel, .card-body, form, fieldset) { min-width: 0; max-width: 100%; }
    body:is(.portal-member, .portal-guardian, .portal-coach) main :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        min-height: 44px;
    }
    body:is(.portal-member, .portal-guardian, .portal-coach) main :is(.btn, button, input[type="submit"], input[type="button"]) { min-height: 44px; }
    body:is(.portal-member, .portal-guardian, .portal-coach) main .member-portal-hero { display: grid; gap: 12px; }
    body:is(.portal-member, .portal-guardian, .portal-coach) main .member-card-cta { width: 100%; max-width: none; margin: 0; }
    body:is(.portal-member, .portal-guardian, .portal-coach) main .member-portal-actions > .btn { flex: 1 1 100%; }
    body:is(.portal-member, .portal-guardian, .portal-coach) main .guardian-child-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    body.portal-guardian main .guardian-child-identity {
        background: linear-gradient(135deg, #1f4b99 0%, #275bb6 100%) !important;
        border-radius: var(--ak-radius-md) !important;
        margin-bottom: 10px;
        padding: 14px 16px !important;
        color: #fff !important;
    }
    body.portal-guardian main .guardian-child-identity :is(h3, p) { color: #fff !important; }
    body:is(.portal-member, .portal-guardian, .portal-coach) main .guardian-child-actions > .btn { flex: 1 1 100%; min-height: 44px; }
    body:is(.portal-member, .portal-guardian, .portal-coach) main .guardian-status-grid { grid-template-columns: minmax(0, 1fr); gap: 9px; }
    body:is(.portal-member, .portal-guardian, .portal-coach) main .info-item { min-width: 0; overflow-wrap: anywhere; }
    body:is(.portal-member, .portal-guardian, .portal-coach) main .portal-desktop-record-table { display: none !important; }
    body:is(.portal-member, .portal-guardian, .portal-coach) main .portal-mobile-record-list { display: grid !important; }
    body:is(.portal-member, .portal-guardian, .portal-coach) main .portal-mobile-record-list { gap: 9px; min-width: 0; }
    body:is(.portal-member, .portal-guardian, .portal-coach) main .portal-record-card {
        display: grid;
        gap: 7px;
        min-width: 0;
        padding: 12px;
        border: 1px solid #dce5f0;
        border-radius: 12px;
        background: #fff;
    }
    body:is(.portal-member, .portal-guardian, .portal-coach) main .portal-record-card__head {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 5px 10px;
        min-width: 0;
    }
    body:is(.portal-member, .portal-guardian, .portal-coach) main .portal-record-card__label { color: #52647b; font-size: .78rem; font-weight: 750; }
    body:is(.portal-member, .portal-guardian, .portal-coach) main .portal-record-card p { margin: 0; overflow-wrap: anywhere; }
}

@media (max-width: 420px) {
    body:is(.portal-member, .portal-guardian, .portal-coach) { --portal-mobile-gutter: 10px; }
    body:is(.portal-member, .portal-guardian, .portal-coach) > header { padding-inline: 9px; }
    body:is(.portal-member, .portal-guardian, .portal-coach) > main > .page-shell { padding: 11px; border-radius: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    body:is(.portal-member, .portal-guardian, .portal-coach) .portal-drawer-backdrop,
    body:is(.portal-member, .portal-guardian, .portal-coach) .main-navigation { transition: none !important; animation: none !important; }
}

/* Optional mobile dark mode shares the existing account setting and localStorage key. */
@media (max-width: 1023.98px) {
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) {
        color-scheme: dark;
        --bg: #0c1523;
        --surface: #142238;
        --surface-muted: #192a40;
        --text: #e8eef7;
        --muted: #afbdd0;
        --line: #33465f;
        --primary: #8bb8ff;
        --primary-dark: #a8c8ff;
        --success: #69d5a2;
        --danger: #ff929e;
        --ak-bg: #0c1523;
        --ak-bg-elevated: #101d30;
        --ak-surface: #142238;
        --ak-surface-soft: #192a40;
        --ak-ink: #e8eef7;
        --ak-ink-soft: #c2cede;
        --ak-muted: #afbdd0;
        --ak-line: #33465f;
        --ak-line-strong: #526a87;
        background: #0c1523 !important;
        color: #e8eef7 !important;
    }
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) > main { color: #e8eef7; }
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) main :is(h1, h2, h3, h4, strong, .stat-value, .stat-label) { color: #f1f5fb !important; }
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) main :is(.text-muted, small, .muted, .text-secondary) { color: #afbdd0 !important; }
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) main :is(.page-shell, .section-card, .card, .panel, .info-item, .stat-card, .portal-record-card, .dashboard-card, .dashboard-panel, .schedule-entry-card, .guardian-competition-card) {
        background: #142238 !important;
        border-color: #33465f !important;
        color: #e8eef7 !important;
        box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
    }
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) main :is(.card-header, .table thead th) {
        background: #192a40 !important;
        border-color: #33465f !important;
        color: #e8eef7 !important;
    }
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) main :is(th, td, .list-group-item) { border-color: #33465f !important; color: #e8eef7; }
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) main tbody tr:hover { background: #203650 !important; }
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) main :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
        background: #101d30 !important;
        border-color: #526a87 !important;
        color: #f1f5fb !important;
    }
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) main :is(input, textarea)::placeholder { color: #afbdd0 !important; opacity: 1; }
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) main :is(input[type="checkbox"], input[type="radio"]) { accent-color: #8bb8ff; }
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) main :is(.btn-outline-primary, .btn-outline-secondary) {
        background: #17273d !important;
        border-color: #617895 !important;
        color: #e8eef7 !important;
    }
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) main :is(.bg-success, .alert-success, .status-ok, .goe-positive) { background: #173b32 !important; border-color: #36735e !important; color: #b7f0d3 !important; }
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) main :is(.bg-danger, .alert-danger, .status-danger, .goe-negative) { background: #46252d !important; border-color: #8c4752 !important; color: #ffd0d5 !important; }
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) main :is(.bg-warning, .alert-warning, .status-warning) { background: #45381f !important; border-color: #88713c !important; color: #ffe4a2 !important; }
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) main :is(.bg-info, .alert-info, .status-info) { background: #183748 !important; border-color: #3b6b83 !important; color: #c3eafa !important; }
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) main .member-card-cta { background: linear-gradient(135deg, #192d49, #1d3554) !important; border-color: #405a78 !important; }
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) main .ready-box { background: #173b32; color: #b7f0d3; }
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) main .guardian-child-identity { background: linear-gradient(135deg, #1f4b99 0%, #275bb6 100%) !important; }
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) .main-navigation {
        --nav-panel-bg: #17273d;
        --nav-panel-text: #e8eef7;
        --nav-muted: #afbdd0;
        --nav-border: #33465f;
        --nav-soft: #1d3049;
        --nav-active: #28476c;
        --nav-primary: #a8c8ff;
    }
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) .main-navigation .nav-subgroup { background: #17273d; border-color: #33465f; }
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) .main-navigation .nav-subgroup-trigger,
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) .main-navigation .nav-panel .nav-item,
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) .main-navigation .nav-panel .nav-logout-button { color: #e8eef7 !important; }
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) .appearance-option { background: #17273d; border-color: #465d79; color: #e8eef7; }
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) .appearance-option__copy strong { color: #f1f5fb; }
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) .appearance-option__copy small { color: #afbdd0; }
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) .appearance-option:hover,
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) .appearance-option[aria-pressed="true"] { background: #223b5b; border-color: #789ac2; }
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) main .schedule-page { --sch-ink: #e8eef7; --sch-muted: #afbdd0; --sch-line: #33465f; color: #e8eef7; }
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) main .schedule-field { color: #e8eef7 !important; }
    html[data-aksel-admin-theme="dark"] body.portal-guardian > header .language-selector select,
    html[data-aksel-admin-theme="dark"] body.portal-guardian > header .language-selector select option { color: #172033 !important; }
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) main .schedule-toolbar,
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) main .schedule-day,
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) main .session-card { background: #142238 !important; border-color: #33465f !important; color: #e8eef7; }
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) main .session-count { color: #b7f0d3; background: #173b32; border-color: #36735e; }
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) main .session-kind,
    html[data-aksel-admin-theme="dark"] body:is(.portal-member, .portal-guardian, .portal-coach) main .session-action { color: #a8c8ff; }
}

@media (min-width: 1024px) {
    body:is(.portal-member, .portal-guardian, .portal-coach) .appearance-option--admin-dark { display: none; }
}