/* ==========================================================================
   Hockey Drop-In — v2 Shell
   --------------------------------------------------------------------------
   The navigation shell. Replaces the three-way split (public navbar / app
   shell / auth dead-end) with one responsive model:

     < 992px   top bar + slide-in drawer + bottom tab bar
     ≥ 992px   top bar + fixed sidebar (collapsible to a 68px icon rail)
     ≥ 1600px  wider content column, sidebar stays

   The top bar is visible at EVERY size. That is the single biggest win for
   "no hamburger on desktop" — there is always a persistent, clickable brand
   and a menu affordance.
   ========================================================================== */

/* ==========================================================================
   SHELL FRAME
   ========================================================================== */
.app-shell,
.v2-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--v2-bg);
}

.v2-body {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    min-height: 0;
    width: 100%;
}

.v2-main {
    flex: 1 1 auto;
    min-width: 0;          /* lets long tables shrink instead of overflowing */
    padding: var(--v2-space-5) var(--v2-gutter) var(--v2-space-8);
    /* Never let a wide child blow out the layout */
    overflow-x: clip;
}

/* ==========================================================================
   TOP BAR — visible at all sizes
   ========================================================================== */
.v2-topbar {
    position: sticky;
    top: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: var(--v2-space-3);
    height: var(--v2-topbar-h);
    padding: 0 var(--v2-gutter);
    background: var(--v2-surface);
    background: color-mix(in srgb, var(--v2-surface) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--v2-line);
    /* Clear the iOS notch in landscape */
    padding-top: env(safe-area-inset-top, 0);
    height: calc(var(--v2-topbar-h) + env(safe-area-inset-top, 0));
}

.v2-topbar__brand {
    display: flex;
    align-items: center;
    gap: var(--v2-space-3);
    font-weight: 800;
    font-size: var(--v2-text-md);
    letter-spacing: -0.02em;
    color: var(--v2-ink);
    text-decoration: none;
    flex-shrink: 0;
    min-width: 0;
}
.v2-topbar__brand span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.v2-topbar__brand:hover { color: var(--v2-pri); }

.v2-topbar__spacer { flex: 1 1 auto; }

.v2-topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--v2-space-2);
    flex-shrink: 0;
}

/* Icon button — 40px visual, 44px hit area */
.v2-iconbtn {
    position: relative;
    width: 40px; height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-sm);
    background: var(--v2-surface);
    color: var(--v2-ink-2);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--v2-fast);
}
.v2-iconbtn:hover {
    background: var(--v2-surface-2);
    color: var(--v2-ink);
    border-color: var(--v2-ink-3);
}
.v2-iconbtn:focus-visible { box-shadow: var(--v2-ring); outline: none; }
@media (pointer: coarse) {
    .v2-iconbtn::after {
        content: '';
        position: absolute;
        inset: -2px;        /* grow the tap target to 44px */
    }
}

/* Avatar chip */
.v2-avatar {
    width: 34px; height: 34px;
    border-radius: var(--v2-r-full);
    background: linear-gradient(140deg, var(--v2-blue-500), var(--v2-blue-700));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--v2-text-xs);
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: .02em;
    border: 0;
    cursor: pointer;
}

/* Desktop inline nav — hidden below 992px */
.v2-topnav {
    display: none;
    align-items: center;
    gap: 2px;
}
@media (min-width: 992px) {
    .v2-topnav { display: flex; }
}
.v2-topnav__link {
    padding: 0.5rem 0.75rem;
    border-radius: var(--v2-r-sm);
    font-size: var(--v2-text-sm);
    font-weight: 600;
    color: var(--v2-ink-2);
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--v2-fast);
}
.v2-topnav__link:hover { background: var(--v2-surface-2); color: var(--v2-ink); }
.v2-topnav__link.is-active { color: var(--v2-pri); background: var(--v2-pri-soft); }

/* ==========================================================================
   SIDEBAR — ≥992px only
   ========================================================================== */
.v2-sidebar {
    display: none;
    position: fixed;
    left: 0;
    top: calc(var(--v2-topbar-h) + env(safe-area-inset-top, 0));
    width: var(--v2-rail);
    height: calc(100vh - var(--v2-topbar-h) - env(safe-area-inset-top, 0));
    height: calc(100dvh - var(--v2-topbar-h) - env(safe-area-inset-top, 0));
    background: var(--v2-surface);
    border-right: 1px solid var(--v2-line);
    flex-direction: column;
    overflow: hidden;
    transition: width var(--v2-slow), transform var(--v2-med);
    z-index: 100;
}
@media (min-width: 992px) {
    .v2-sidebar { display: flex; }
}

/* The content column is offset by the sidebar width. The v2 sidebar is a
   sibling of the legacy .app-shell wrapper, so it cannot be a flex child —
   fixed positioning + margin keeps this independent of the wrapper tree. */
@media (min-width: 992px) {
    body:has(.v2-sidebar) .app-main { margin-left: var(--v2-rail); }
    body:has(.v2-sidebar) .app-main,
    body:has(.v2-sidebar) .public-main { transition: margin-left var(--v2-slow); }
    html[data-v2-rail="1"] body:has(.v2-sidebar) .app-main { margin-left: var(--v2-rail-collapsed); }
}

.v2-sidebar__nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--v2-space-3) var(--v2-space-3);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.v2-sidebar__nav::-webkit-scrollbar { width: 6px; }
.v2-sidebar__nav::-webkit-scrollbar-thumb {
    background: var(--v2-line);
    border-radius: var(--v2-r-full);
}

.v2-navlink {
    display: flex;
    align-items: center;
    gap: var(--v2-space-3);
    padding: 0.625rem 0.75rem;
    border-radius: var(--v2-r-sm);
    color: var(--v2-ink-2);
    font-size: var(--v2-text-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--v2-fast);
}
.v2-navlink i, .v2-navlink .v2-navlink__ico {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.v2-navlink:hover { background: var(--v2-surface-2); color: var(--v2-ink); }
.v2-navlink.is-active {
    background: var(--v2-pri-soft);
    color: var(--v2-pri);
    font-weight: 700;
}

.v2-navlink__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.v2-navlink__badge {
    background: var(--v2-bad);
    color: #fff;
    border-radius: var(--v2-r-full);
    font-size: var(--v2-text-2xs);
    font-weight: 700;
    padding: 1px 7px;
    min-width: 20px;
    text-align: center;
}

.v2-sidebar__section {
    font-size: var(--v2-text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--v2-ink-3);
    padding: var(--v2-space-4) 0.75rem var(--v2-space-2);
    white-space: nowrap;
}
.v2-sidebar__section:first-child { padding-top: var(--v2-space-1); }

.v2-sidebar__foot {
    padding: var(--v2-space-3);
    border-top: 1px solid var(--v2-line-soft);
    display: flex;
    flex-direction: column;
    gap: var(--v2-space-2);
}

/* --- Collapsed / rail mode --- */
.v2-shell.is-rail .v2-sidebar { width: var(--v2-rail-collapsed); }
.v2-shell.is-rail .v2-navlink { justify-content: center; padding-left: 0; padding-right: 0; }
.v2-shell.is-rail .v2-navlink__label,
.v2-shell.is-rail .v2-navlink__badge,
.v2-shell.is-rail .v2-sidebar__section,
.v2-shell.is-rail .v2-sidebar__foot .v2-navlink__label { display: none; }
.v2-shell.is-rail .v2-navlink i,
.v2-shell.is-rail .v2-navlink .v2-navlink__ico { width: auto; }

/* Rail state is stored on <html> so it survives page loads */
@media (min-width: 992px) {
    html[data-v2-rail="1"] .v2-sidebar { width: var(--v2-rail-collapsed); }
    html[data-v2-rail="1"] .v2-navlink { justify-content: center; padding-left: 0; padding-right: 0; }
    html[data-v2-rail="1"] .v2-navlink__label,
    html[data-v2-rail="1"] .v2-navlink__badge,
    html[data-v2-rail="1"] .v2-sidebar__section { display: none; }
}

/* ==========================================================================
   MOBILE DRAWER — <992px
   ========================================================================== */
.v2-scrim {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--v2-med), visibility var(--v2-med);
    z-index: 900;
}
.v2-scrim.is-open { opacity: 1; visibility: visible; }
@media (min-width: 992px) { .v2-scrim { display: none; } }

.v2-drawer {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(310px, 86vw);
    background: var(--v2-surface);
    border-right: 1px solid var(--v2-line);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transform: translateX(-102%);
    transition: transform var(--v2-slow);
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: var(--v2-e3);
    overscroll-behavior: contain;
}
.v2-drawer.is-open { transform: translateX(0); }
@media (min-width: 992px) { .v2-drawer { display: none; } }

.v2-drawer__head {
    display: flex;
    align-items: center;
    gap: var(--v2-space-3);
    padding: var(--v2-space-4);
    border-bottom: 1px solid var(--v2-line-soft);
    min-height: var(--v2-topbar-h);
}
.v2-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--v2-space-3);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.v2-drawer__foot {
    padding: var(--v2-space-3);
    border-top: 1px solid var(--v2-line-soft);
}

/* Drawer nav links get bigger tap targets on touch */
.v2-drawer__body .v2-navlink {
    padding: 0.8125rem 0.875rem;
    font-size: var(--v2-text-base);
}

/* ==========================================================================
   BOTTOM TAB BAR — mobile only, thumb reach
   ========================================================================== */
.v2-tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 200;
    display: flex;
    background: var(--v2-surface);
    background: color-mix(in srgb, var(--v2-surface) 92%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--v2-line);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (min-width: 992px) { .v2-tabbar { display: none; } }

.v2-tabbar__link {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px 10px;
    min-height: var(--v2-tabs-h);
    color: var(--v2-ink-3);
    font-size: var(--v2-text-2xs);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--v2-fast);
    position: relative;
}
.v2-tabbar__link i { font-size: 1.25rem; }
.v2-tabbar__link.is-active { color: var(--v2-pri); }
.v2-tabbar__link.is-active::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 28px; height: 2.5px;
    border-radius: var(--v2-r-full);
    background: var(--v2-pri);
}

/* Body gets bottom padding so the tab bar never covers content */
body.has-v2-tabs { padding-bottom: calc(var(--v2-tabs-h) + env(safe-area-inset-bottom, 0)); }
@media (min-width: 992px) { body.has-v2-tabs { padding-bottom: 0; } }

/* ==========================================================================
   PUBLIC / MARKETING NAV
   ========================================================================== */
.v2-pnavbar {
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--v2-surface);
    background: color-mix(in srgb, var(--v2-surface) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--v2-line);
}
.v2-pnavbar__inner {
    display: flex;
    align-items: center;
    gap: var(--v2-space-4);
    height: var(--v2-topbar-h);
    padding-top: env(safe-area-inset-top, 0);
    height: calc(var(--v2-topbar-h) + env(safe-area-inset-top, 0));
}
.v2-pnavbar__links { display: none; align-items: center; gap: 2px; }
@media (min-width: 992px) { .v2-pnavbar__links { display: flex; } }
.v2-pnavbar__actions { display: flex; align-items: center; gap: var(--v2-space-2); }

/* Mobile dropdown panel for the marketing nav */
.v2-pmenu {
    display: flex;
    flex-direction: column;
    padding: var(--v2-space-3) var(--v2-gutter) var(--v2-space-4);
    border-top: 1px solid var(--v2-line-soft);
    background: var(--v2-surface);
}
.v2-pmenu[hidden] { display: none; }
.v2-pmenu__link {
    display: flex;
    align-items: center;
    gap: var(--v2-space-3);
    padding: 0.875rem 0.75rem;
    border-radius: var(--v2-r-sm);
    color: var(--v2-ink-2);
    font-weight: 600;
    font-size: var(--v2-text-base);
    text-decoration: none;
    min-height: 48px;
}
.v2-pmenu__link:hover, .v2-pmenu__link.is-active {
    background: var(--v2-surface-2);
    color: var(--v2-ink);
}
.v2-pmenu__link i { width: 22px; text-align: center; color: var(--v2-ink-3); }
.v2-pmenu__divider { height: 1px; background: var(--v2-line-soft); margin: var(--v2-space-2) 0; }

/* ==========================================================================
   PUBLIC MAIN / FOOTER
   ========================================================================== */
.v2-pmain { padding: var(--v2-section) 0; }

.v2-hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 4rem); }
.v2-hero h1 {
    font-size: var(--v2-text-3xl);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.05;
    margin-bottom: var(--v2-space-4);
}
.v2-hero p {
    font-size: var(--v2-text-md);
    color: var(--v2-ink-2);
    max-width: 54ch;
    line-height: 1.65;
}

.v2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--v2-pri-soft);
    color: var(--v2-pri);
    border-radius: var(--v2-r-full);
    padding: 0.375rem 0.875rem;
    font-size: var(--v2-text-xs);
    font-weight: 700;
    margin-bottom: var(--v2-space-4);
}

.v2-footer {
    background: var(--v2-surface);
    border-top: 1px solid var(--v2-line);
    padding: var(--v2-section) 0 var(--v2-space-6);
    margin-top: var(--v2-space-8);
    color: var(--v2-ink-2);
    font-size: var(--v2-text-sm);
}
.v2-footer a { color: var(--v2-ink-2); }
.v2-footer a:hover { color: var(--v2-pri); }
.v2-footer h5 {
    font-size: var(--v2-text-2xs);
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--v2-ink-3);
    font-weight: 700;
    margin-bottom: var(--v2-space-3);
}

/* ==========================================================================
   RESPONSIVE GRID — the layout primitive most views lean on
   ========================================================================== */
/* Below 768px, force every Bootstrap col-* to full width unless opted out.
   This is what makes 90 legacy views usable on a phone without editing them. */
@media (max-width: 767.98px) {
    .row > [class*="col-"]:not([class*="col-sm-"]):not([class*="col-md-"]):not([class*="col-lg-"])
        :not([class*="col-xl-"]) {
        flex: 0 0 100%;
        max-width: 100%;
    }
    /* Sticky-ish action bars become full-width stacks */
    .d-flex.gap-2 > .btn { flex: 1 1 auto; }
    .text-end, .text-start { text-align: left !important; }
    .float-end, .float-start { float: none !important; }
}

/* Very small phones (iPhone SE and older) */
@media (max-width: 374px) {
    :root { --v2-gutter: 0.875rem; }
    .v2-tabbar__link { font-size: 0.625rem; }
    .v2-tabbar__link i { font-size: 1.125rem; }
    h1 { letter-spacing: -0.03em; }
}

/* ==========================================================================
   ACCESSIBILITY / PRINT
   ========================================================================== */
.skip-link {
    position: absolute;
    left: var(--v2-space-3);
    top: -100px;
    z-index: 1100;
    background: var(--v2-pri);
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: var(--v2-r-sm);
    font-weight: 700;
    text-decoration: none;
    transition: top var(--v2-fast);
}
.skip-link:focus { top: var(--v2-space-3); color: #fff; }

@media print {
    .v2-topbar, .v2-sidebar, .v2-tabbar, .v2-drawer, .v2-scrim,
    .v2-pnavbar, .app-topbar, .app-bottom-tabs, .app-sidebar { display: none !important; }
    .v2-main, .app-main { padding: 0 !important; }
    body { background: #fff; color: #000; }
    .card { box-shadow: none; border: 1px solid #ccc; }
}

/* ==========================================================================
   MOTION SAFETY
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .v2-drawer, .v2-scrim, .v2-sidebar { transition: none !important; }
    .group-card:hover, .event-card:hover, .stat-card:hover,
    a.card:hover, .card-link:hover { transform: none; }
}

/* ==========================================================================
   LEGACY CHROME NEUTRALISED
   --------------------------------------------------------------------------
   The old public navbar / app topbar / app drawer / app popover / app sidebar
   / app bottom tabs are still in the DOM (deleting them would balloon this
   commit and make it hard to revert). They are hidden instead, and their
   JS handlers stay harmless because no trigger element is visible.
   ========================================================================== */
.public-navbar,
.app-topbar,
.app-drawer,
.app-popover,
.app-drawer-backdrop,
.app-popover-backdrop,
.app-sidebar,
.app-bottom-tabs {
    display: none !important;
}

/* The old shell wrappers become transparent pass-through containers. */
.app-shell, .app-body { display: contents; }
.app-main { min-height: auto; overflow: visible; }

/* Public layout: single main column, full bleed. */
body:has(.v2-topbar) .public-main,
body:has(.v2-topbar) .app-main {
    min-height: calc(100dvh - var(--v2-topbar-h));
}

/* Relocated from v2.css §19 (cascade: this file loads after v2.css,
   so shell overrides must live here to win at equal specificity). */

/* ==========================================================================
   DARK SIDEBAR (both modes — the app's signature surface)
   ========================================================================== */
@media (min-width: 992px) {
    .v2-sidebar {
        background: linear-gradient(180deg, var(--v2-navy-900) 0%, var(--v2-navy-950) 100%);
        border-right: 1px solid rgba(255, 255, 255, .07);
    }
    .v2-sidebar__section { color: rgba(148, 178, 205, .55); }
    .v2-navlink { color: rgba(203, 224, 242, .72); }
    .v2-navlink:hover { background: rgba(255, 255, 255, .07); color: #fff; }
    .v2-navlink.is-active {
        background: linear-gradient(135deg, rgba(0, 150, 199, .28), rgba(0, 119, 182, .22));
        color: #fff;
        box-shadow: inset 2px 0 0 var(--v2-cyan-400);
    }
    .v2-sidebar__foot { border-top-color: rgba(255, 255, 255, .08); }
    .v2-sidebar__foot .v2-navlink { color: rgba(203, 224, 242, .6); }
    .v2-sidebar__foot .v2-navlink:hover { color: #fff; }
}

/* ==========================================================================
   TOPBAR — crisper, stronger blur
   ========================================================================== */
.v2-topbar {
    background: var(--v2-surface);
    background: color-mix(in srgb, var(--v2-surface) 82%, transparent);
    border-bottom: 1px solid var(--v2-line);
    box-shadow: 0 1px 12px -4px rgba(15, 23, 42, .08);
}
.v2-topbar__brand { font-weight: 800; letter-spacing: -0.025em; }

/* ==========================================================================
   MOBILE TAB BAR — floating pill
   ========================================================================== */
@media (max-width: 991.98px) {
    .v2-tabbar {
        left: var(--v2-space-3);
        right: var(--v2-space-3);
        bottom: calc(var(--v2-space-3) + env(safe-area-inset-bottom, 0));
        border: 1px solid var(--v2-line);
        border-radius: 22px;
        box-shadow: 0 12px 32px -8px rgba(6, 13, 26, .35);
        overflow: hidden;
        padding-bottom: 0;
    }
    body.has-v2-tabs {
        padding-bottom: calc(var(--v2-tabs-h) + var(--v2-space-3) + env(safe-area-inset-bottom, 0));
    }
    .v2-tabbar__link.is-active::before { display: none; }
    .v2-tabbar__link.is-active { color: var(--v2-pri); }
    .v2-tabbar__link.is-active i {
        background: var(--v2-pri-soft);
        border-radius: 12px;
        padding: 2px 12px;
    }
}

/* ==========================================================================