/* WSBCO Golf Coach — Phase 5.3B7 source-derived shell recovery. */

:root {
    --sidebar-width: 270px;
    --navigation-green: #123f38;
    --navigation-green-dark: #0b302b;
    --navigation-gold: #cda767;
}

/* Desktop uses a fixed navigation rail. This avoids the three-column grid
   collision that previously squeezed page content into the sidebar. */
@media (min-width: 993px) {
    .app-layout {
        display: block !important;
        min-height: 100vh;
    }

    .sidebar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        z-index: 1000;
        display: flex !important;
        width: var(--sidebar-width) !important;
        height: 100vh !important;
        overflow-x: hidden;
        overflow-y: auto;
        color: #fff !important;
        background: linear-gradient(180deg, var(--navigation-green), var(--navigation-green-dark)) !important;
    }

    .app-main {
        display: flex !important;
        flex-direction: column;
        width: calc(100% - var(--sidebar-width)) !important;
        min-width: 0;
        min-height: 100vh;
        margin-left: var(--sidebar-width) !important;
    }

    .sidebar-backdrop,
    .sidebar__close,
    .topbar__menu-button,
    #sidebar-open-button {
        display: none !important;
    }

    /* Legacy pages use .app-shell > .sidebar + .main-content instead of
       .app-layout. Give them the same stable desktop rail. */
    div.app-shell {
        display: block !important;
        min-height: 100vh;
    }

    div.app-shell > .sidebar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        z-index: 1000;
        display: flex !important;
        width: var(--sidebar-width) !important;
        height: 100vh !important;
        overflow-x: hidden;
        overflow-y: auto;
        color: #fff !important;
        background: linear-gradient(180deg, var(--navigation-green), var(--navigation-green-dark)) !important;
    }

    div.app-shell > .main-content {
        display: block !important;
        width: calc(100% - var(--sidebar-width)) !important;
        min-width: 0;
        min-height: 100vh;
        margin-left: var(--sidebar-width) !important;
    }

    .universal-menu-button,
    .universal-sidebar-close {
        display: none !important;
    }
}

.sidebar-nav__link.is-active,
.sidebar-nav__link.active {
    color: var(--navigation-green) !important;
    background: #fff !important;
}

.sidebar-nav__link:hover {
    background: rgba(205, 167, 103, 0.19) !important;
}

.brand__mark {
    color: var(--navigation-green) !important;
}

/* The repeated title/profile header is removed, but its mobile menu control
   remains available at small widths. */
.topbar {
    position: relative !important;
    z-index: 1050;
    display: block !important;
    width: 100%;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.topbar > *,
.topbar__left > div,
.topbar__actions,
.coach-profile,
#theme-toggle-button {
    display: none !important;
}

.page-content,
.assistant-shell {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.assistant-shell {
    max-width: 1180px;
}

@media (max-width: 992px) {
    .app-layout {
        display: block !important;
        grid-template-columns: none !important;
        min-height: 100vh;
    }

    /* The active Students, Sessions, Garmin Import, Analysis, and swing
       workspace templates use this legacy wrapper. At narrow widths it must
       stop being a 252px + content grid or the page is trapped in column one. */
    div.app-shell {
        display: block !important;
        grid-template-columns: none !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 100vh;
    }

    .app-main {
        width: 100% !important;
        min-width: 0;
        margin-left: 0 !important;
    }

    .sidebar,
    div.app-shell > .sidebar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        z-index: 1200;
        display: flex !important;
        width: min(var(--sidebar-width), 86vw) !important;
        height: 100vh !important;
        overflow-y: auto;
        color: #fff !important;
        background: linear-gradient(180deg, var(--navigation-green), var(--navigation-green-dark)) !important;
        transform: translateX(-105%);
        transition: transform 180ms ease;
    }

    .app-layout > .sidebar.is-open,
    div.app-shell > .sidebar.is-open,
    .sidebar.is-open {
        left: 0 !important;
        transform: translateX(0) !important;
    }

    div.app-shell > .main-content {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0;
        margin-left: 0 !important;
        padding-top: 4.6rem !important;
    }

    .sidebar-backdrop.is-visible,
    .sidebar-backdrop.is-open {
        position: fixed;
        inset: 0;
        z-index: 1150;
        display: block !important;
        background: rgba(6, 22, 35, 0.55);
    }

    .topbar .topbar__left {
        display: block !important;
        width: 0;
        height: 0;
    }

    .topbar .topbar__menu-button,
    .topbar #sidebar-open-button,
    .universal-menu-button {
        position: fixed !important;
        top: 0.85rem;
        left: 0.85rem;
        z-index: 1100;
        display: grid !important;
        width: 2.9rem;
        height: 2.9rem;
        padding: 0 !important;
        place-items: center;
        border: 1px solid rgba(18, 63, 56, 0.22) !important;
        border-radius: 0.7rem;
        color: var(--navigation-green);
        background: #fff !important;
        box-shadow: 0 0.45rem 1.2rem rgba(15, 31, 54, 0.14);
    }

    .universal-sidebar-close {
        position: absolute !important;
        top: 0.9rem;
        right: 0.9rem;
        z-index: 2;
        display: grid !important;
        width: 2.5rem;
        height: 2.5rem;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, 0.32);
        border-radius: 0.6rem;
        color: #fff;
        background: rgba(255, 255, 255, 0.1);
        cursor: pointer;
    }

    .page-content,
    .page-content:has(.landing-page) {
        padding-top: 4.6rem !important;
    }
}

body.navigation-open {
    overflow: hidden;
}