/* public_html/css/app-sidebar.css */

:root {
    --app-sidebar-collapsed-width: 72px;
    --app-sidebar-expanded-width: 220px;

    --owner-sidebar-collapsed-width: 72px;
    --owner-sidebar-expanded-width: 250px;

    --app-sidebar-gap: 16px;
    --owner-sidebar-gap: 12px;

    /*
     * Keep all role sidebars below the visible top navigation area.
     * The owner and teacher sidebars should use the same sticky offset.
     */
    --app-sidebar-sticky-top: 85px;

    /* Unified AhMath LC deep charcoal-green rail (see css/custom.css brand
     * system). Role templates set --sidebar-bg to the same value; this
     * --sidebar-background is what the owner rail + fallbacks use. */
    --sidebar-background: #18332D;
    --sidebar-hover-background: #294A42;
    --sidebar-button-background: #294A42;

    /*
     * Flyout submenu (.owner-menu-sub) colors -- same green family so the
     * flyout reads as part of the rail.
     */
    --sidebar-flyout-header-background: #1f3d36;
    --sidebar-flyout-body-background: #294A42;
    --sidebar-flyout-hover-background: #35594f;
}


/* =====================================================
   Shared App Sidebar
   Teacher / Student / Parent
   ===================================================== */

.app-dashboard-layout {
    display: grid;
    grid-template-columns:
        var(--app-sidebar-collapsed-width)
        minmax(0, 1fr);
    gap: var(--app-sidebar-gap);
    align-items: start;
    transition: grid-template-columns 0.25s ease;
}

.app-dashboard-layout.sidebar-open {
    grid-template-columns:
        var(--app-sidebar-expanded-width)
        minmax(0, 1fr);
}

.app-sidebar {
    position: sticky;
    top: var(--app-sidebar-sticky-top);
    align-self: start;

    width: 100%;
    max-height: none;

    padding: 12px;

    /*
     * Visible on both axes so the Classes flyout submenu (.owner-menu-sub,
     * shared with the owner sidebar) can extend outside this narrow column
     * instead of being clipped.
     */
    overflow: visible;

    color: #fff;
    background: var(--sidebar-background);
    border-radius: 10px;

    /*
     * High enough to clear ordinary page content (e.g. a sticky table
     * header elsewhere at z-index: 10 -- at that value it was a tie, and
     * the tie went to whichever painted later in the HTML, which was never
     * the sidebar) so the Classes/Assignments flyout it contains can
     * actually render above the page, not just above other sidebar rows.
     * Still far below the site header (#header, z-index: 1030 in
     * theme.css) so it can never cover that. Matches .owner-sidebar-porto's
     * z-index below, which got this same fix already.
     */
    z-index: 100;
}

.app-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 52px !important;

    padding: 0;
    margin: 0 0 12px !important;

    color: #fff;
    background: var(--sidebar-button-background);

    border: 0;
    border-radius: 8px;

    cursor: pointer;
}

.app-sidebar h5,
.app-sidebar .menu-text {
    display: none;
}

.staff-workspace-marker {
    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    border: 1px solid #d7dde3;
    border-radius: 6px;
    color: #26323f;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.app-dashboard-layout.sidebar-open .staff-workspace-marker {
    display: none;
}

.app-dashboard-layout.sidebar-open .app-sidebar h5 {
    display: block;
}

.app-dashboard-layout.sidebar-open .app-sidebar .menu-text {
    display: inline;
}

.app-sidebar h5 {
    margin: 10px 0 6px !important;
    padding: 0 0 4px !important;

    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);

    font-size: 15px;
    line-height: 1.2 !important;
}

.app-sidebar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 30px !important;

    padding: 6px 4px !important;
    margin: 0 !important;

    color: #cfd8dc;
    text-decoration: none;
    white-space: nowrap;

    font-size: 14px;
    line-height: 1.2 !important;

    border-radius: 6px;
}

.app-dashboard-layout.sidebar-open .app-sidebar a {
    justify-content: flex-start;
}

.app-sidebar i {
    width: 22px;
    flex: 0 0 22px;

    text-align: center;
    font-size: 15px;
}

.app-sidebar a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

/* =====================================================
   Sidebar categories  (Phase 2 brand system)
   Each <h5> carries style="--cat-accent: #xxxxxx".
   ===================================================== */

/* Expanded rail / mobile: a slim vertical marker in the category colour. */
.app-sidebar h5[style*="--cat-accent"] {
    border-left: 3px solid var(--cat-accent);
    padding-left: 8px !important;
}

/* Collapsed icon rail: the label is hidden, so the header becomes a thin
   coloured divider that still visually groups the icons under it. */
.app-dashboard-layout:not(.sidebar-open) .app-sidebar h5[style*="--cat-accent"] {
    display: block;
    height: 3px;
    margin: 12px 8px 8px !important;
    padding: 0 !important;
    border: 0;
    border-radius: 2px;
    background: var(--cat-accent);
    overflow: hidden;
    text-indent: -999px;
}

/* Active category — the section that holds the current page (marked by
   js/app-sidebar.js). */
.app-sidebar h5.is-current-cat {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 0 4px 4px 0;
}

/* Active page — role-accent bar down the left edge. */
.app-sidebar a.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
    box-shadow: inset 3px 0 0 var(--role-accent, #fff);
}

.staff-context-switcher {
    margin: 0 0 12px;
}

.staff-context-switcher label {
    display: none;
    margin: 0 0 5px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.staff-context-switcher select {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 5px 7px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 5px;
    background: #fff;
    color: #26323f;
    font-size: 12px;
}

.app-dashboard-layout:not(.sidebar-open)
.staff-context-switcher {
    display: none;
}

.app-dashboard-layout.sidebar-open .staff-context-switcher label {
    display: block;
}

.app-main {
    min-width: 0;
}


/* =====================================================
   Owner Dashboard Layout
   ===================================================== */

.owner-dashboard-layout {
    position: relative;
    isolation: isolate;

    display: grid;
    grid-template-columns:
        var(--owner-sidebar-collapsed-width)
        minmax(0, 1fr);
    gap: var(--owner-sidebar-gap);
    align-items: start;
}

/*
 * Keep the page content below the owner sidebar and its flyouts.
 * This is especially important for tables with sticky columns.
 */
.owner-dashboard-layout > main {
    position: relative;
    z-index: 1;
    min-width: 0;
}

/*
 * Modern browsers:
 * enlarge the grid column when the owner sidebar is open.
 */
.owner-dashboard-layout:has(.owner-sidebar-porto.is-open) {
    grid-template-columns:
        var(--owner-sidebar-expanded-width)
        minmax(0, 1fr);
}


/* =====================================================
   Owner Sidebar
   Collapsed Porto-style flyout
   ===================================================== */

.owner-sidebar-porto {
    position: sticky !important;
    top: var(--app-sidebar-sticky-top) !important;
    align-self: start;

    width: var(--owner-sidebar-collapsed-width);
    max-height: calc(100vh - var(--app-sidebar-sticky-top) - 6px);

    padding: 10px 10px;

    color: #fff;
    background: var(--sidebar-background);
    border-radius: 12px;

    /*
     * Flyout menus must be able to extend outside the narrow sidebar.
     */
    overflow: visible !important;

    /*
     * This replaces the previous 99999.
     * It remains above ordinary page content but below the site header.
     */
    z-index: 100;

    transition: width 0.25s ease;
}

.owner-sidebar-porto.is-open {
    width: var(--owner-sidebar-expanded-width);
}


/* =====================================================
   Owner Sidebar Toggle
   ===================================================== */

.owner-sidebar-porto .owner-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 46px;

    padding: 0;
    margin: 0 0 8px;

    color: #fff;
    background: var(--sidebar-button-background);

    border: 0;
    border-radius: 8px;

    cursor: pointer;
}

.owner-sidebar-porto .owner-sidebar-toggle:hover,
.owner-sidebar-porto .owner-sidebar-toggle:focus {
    color: #fff;
    background: #0077b3;
}


/* =====================================================
   Owner First-Level Menu Rows
   ===================================================== */

.owner-menu-item {
    position: relative;
}

.owner-menu-main {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 18px;
    align-items: center;
    column-gap: 12px;

    height: 42px;
    padding: 0 12px;

    color: #fff;
    border-radius: 8px;

    cursor: pointer;
}

.owner-menu-main > i:first-child {
    width: 28px;
    min-width: 28px;

    margin: 0;

    text-align: center;
    font-size: 17px;
    line-height: 1;
}

.owner-menu-main span {
    min-width: 0;

    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.owner-menu-arrow {
    width: 18px;

    text-align: center;
    font-size: 12px;
}

.owner-menu-main span,
.owner-menu-arrow {
    display: none;
}

.owner-sidebar-porto.is-open .owner-menu-main span,
.owner-sidebar-porto.is-open .owner-menu-arrow {
    display: inline-block;
}


/* Collapsed owner sidebar */

.owner-sidebar-porto:not(.is-open) .owner-menu-main {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
}

.owner-sidebar-porto:not(.is-open) .owner-menu-main > i:first-child {
    width: 24px;
    min-width: 24px;

    margin: 0;

    text-align: center;
}

.owner-sidebar-porto:not(.is-open) .owner-menu-arrow {
    display: none;
}

.owner-menu-item:hover .owner-menu-main,
.owner-menu-item:focus-within .owner-menu-main {
    background: var(--sidebar-hover-background);
}


/* =====================================================
   Hover Bridge
   Prevents the flyout from closing across the gap
   ===================================================== */

.owner-menu-item::after {
    content: "";

    position: absolute;
    top: 0;
    left: 100%;

    width: 14px;
    height: 100%;
}


/* =====================================================
   Owner Second-Level Flyout
   ===================================================== */

.owner-menu-sub {
    display: none;
    text-align: left !important;

    position: absolute;
    left: calc(100% + 10px);
    top: 0;

    width: max-content;
    min-width: 260px;
    max-width: min(520px, calc(100vw - 360px));

    /*
     * Prevent long menus from extending beyond
     * the visible browser window.
     */
    max-height: calc(100vh - 110px);

    padding: 0;

    background: #343a40;

    /*
     * Full border + rounding on every side (not just the right corners) --
     * a flush left edge made this look like the sidebar itself had grown
     * broken edges into the page instead of a distinct floating panel.
     */
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;

    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);

    /*
     * Keep long flyouts inside the viewport.
     */
    overflow-x: visible;
    overflow-y: auto;

    z-index: 200;
}

.owner-menu-item:hover .owner-menu-sub,
.owner-menu-item:focus-within .owner-menu-sub,
.owner-menu-item.is-open .owner-menu-sub {
    display: block;
}


/* =====================================================
   Teacher (.app-sidebar) Classes Flyout
   Reuses the owner-menu-* structure/positioning/flyout
   above, but matches the plain nav-link look (color, icon
   size/alignment) used by every other .app-sidebar item
   instead of the wider owner-sidebar-porto treatment.
   ===================================================== */

.app-sidebar .owner-menu-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 30px !important;
    height: auto;

    padding: 6px 4px !important;

    color: #cfd8dc;

    font-size: 14px;
    line-height: 1.2 !important;

    border-radius: 6px;

    cursor: pointer;
}

.app-dashboard-layout.sidebar-open .app-sidebar .owner-menu-main {
    justify-content: flex-start;
}

.app-sidebar .owner-menu-main > i:first-child {
    width: 22px;
    min-width: 22px;
    flex: 0 0 22px;

    margin: 0;

    text-align: center;
    font-size: 15px;
}

.app-sidebar .owner-menu-item:hover .owner-menu-main,
.app-sidebar .owner-menu-item.is-open .owner-menu-main {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

/*
 * The flyout's own <a> rows also match the plain ".app-sidebar a" nav-link
 * rule above (same ancestor, same element), which carries !important on
 * padding/margin/min-height/line-height and a stray 6px border-radius --
 * that's what was overriding this component's own indent and rounding
 * every row's corners. Re-declare with higher specificity (and matching
 * !important where needed) so this flyout renders identically to the one
 * on the owner sidebar, which never had ".owner-sidebar-porto a" to
 * collide with in the first place.
 */
.app-sidebar .owner-menu-sub a {
    display: flex !important;
    justify-content: flex-start !important;

    min-height: 0 !important;
    margin: 0 !important;
    padding: 11px 18px 11px 28px !important;

    border-radius: 0;

    line-height: 1.25 !important;
}


/* =====================================================
   Flyout Position by Menu Group
   Named classes are more reliable than nth-of-type()
   ===================================================== */

/*
 * Users:
 * Open level with the Users row.
 */
.owner-menu-users .owner-menu-sub {
    top: 0;
    bottom: auto;
}


/*
 * Curriculum:
 * This is the longest menu.
 * Open it near the top of the sidebar so that it remains
 * inside the visible browser area.
 */
.owner-menu-curriculum .owner-menu-sub {
    top: -58px;
    bottom: auto;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}


/*
 * Question Bank:
 * Move upward because it contains several links.
 */
.owner-menu-questions .owner-menu-sub {
    top: -110px;
    bottom: auto;
}


/*
 * Lower menu groups:
 * Open upward by aligning the bottom of the flyout
 * with the bottom of the selected menu row.
 */
.owner-menu-communication .owner-menu-sub,
.owner-menu-analytics .owner-menu-sub,
.owner-menu-administration .owner-menu-sub,
.owner-menu-view-as .owner-menu-sub {
    top: auto;
    bottom: 0;
}


/* =====================================================
   Owner Flyout Heading
   ===================================================== */

.owner-menu-sub-title {
    position: sticky;
    top: 0;

    padding: 12px 18px;

    color: #fff;
    background: var(--sidebar-flyout-header-background);

    border-bottom: 1px solid rgba(255, 255, 255, 0.18);

    font-size: 15px;
    font-weight: 700;

    z-index: 1;
}


/* =====================================================
   Owner Flyout Links
   ===================================================== */

.owner-menu-sub a {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;

    width: 100%;
    box-sizing: border-box;

    /* Indented under the bold .owner-menu-sub-title above it. */
    padding: 11px 18px 11px 28px;

    color: #fff !important;
    background: var(--sidebar-flyout-body-background);

    border-bottom: 1px solid rgba(255, 255, 255, 0.14);

    text-align: left !important;
    text-decoration: none;
    white-space: nowrap;

    font-size: 14px;
    line-height: 1.25;
}

.owner-menu-sub a:last-child {
    border-bottom: 0;
}

.owner-menu-sub a:hover,
.owner-menu-sub a:focus {
    color: #fff !important;
    background: var(--sidebar-flyout-hover-background);
}


/* =====================================================
   Desktop flyout: always flush against the sidebar rail
   on the left (no left border/radius), regardless of role.
   Guards against the mobile stacked-card radius below ever
   winning at desktop widths.
   ===================================================== */

@media (min-width: 992px) {
    .owner-menu-sub {
        border-left: 0;
        border-radius: 0 10px 10px 0;
    }
}


/* =====================================================
   Smaller Desktop / Tablet
   ===================================================== */

@media (max-width: 1199px) and (min-width: 992px) {
    :root {
        --owner-sidebar-expanded-width: 230px;
    }

    .owner-menu-sub {
        width: max-content;
        min-width: 240px;
        max-width: calc(100vw - 340px);
    }
}

/* =====================================================
   Mobile and Narrow Screens
   ===================================================== */

@media (max-width: 991px) {
    .app-dashboard-layout,
    .app-dashboard-layout.sidebar-open,
    .owner-dashboard-layout,
    .owner-dashboard-layout:has(.owner-sidebar-porto.is-open) {
        grid-template-columns: minmax(0, 1fr);
    }

    /*
     * Disable sticky positioning when the sidebar drops below the page
     * content on narrow screens.
     */
    .app-sidebar,
    .owner-sidebar-porto,
    .owner-sidebar-porto.is-open {
        position: static !important;
        top: auto !important;

        /*
         * Render as a left-aligned drawer, not a full-bleed band of
         * mostly-empty sidebar color. Every nav row is just an icon plus a
         * short label, so a wider panel only paints dark space to their
         * right on narrow tablets and large phones. The <= 575px block
         * below drops the cap again once the column itself is this narrow.
         */
        width: 100%;
        max-width: 320px;
        justify-self: start;

        max-height: none;

        align-self: auto;

        z-index: auto;
    }

    .app-sidebar {
        overflow-x: hidden;
        overflow-y: visible;
    }

    .app-sidebar h5,
    .app-sidebar .menu-text {
        display: inline;
    }

    .staff-workspace-marker {
        display: none;
    }

    .staff-context-switcher label {
        display: block;
    }

    .app-dashboard-layout:not(.sidebar-open) .staff-context-switcher select {
        padding: 5px 7px;
        color: #26323f;
    }

    .app-sidebar h5 {
        display: block;
    }

    /*
     * On narrow screens each category header is a full tap-to-open row, not
     * the collapsed icon-rail's 3px colour bar -- undo that bar styling
     * (same selector as the rule above, so it wins on source order) so the
     * label and the accordion arrow are actually visible. Without this the
     * headers render as blank coloured stripes (e.g. Chrome vertical tabs
     * narrow the viewport below 992px).
     */
    .app-dashboard-layout:not(.sidebar-open) .app-sidebar h5[style*="--cat-accent"] {
        height: auto;
        margin: 10px 0 6px !important;
        padding: 0 0 4px 8px !important;
        border: 0;
        border-left: 3px solid var(--cat-accent);
        border-radius: 0;
        background: transparent;
        overflow: visible;
        text-indent: 0;
    }

    .app-sidebar a {
        justify-content: flex-start;
    }

    .app-sidebar .owner-menu-main {
        justify-content: flex-start;
    }

    /*
     * On narrow screens, always show owner menu labels.
     */
    .owner-sidebar-porto .owner-menu-main,
    .owner-sidebar-porto:not(.is-open) .owner-menu-main {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr) 18px;
        justify-content: initial;

        padding: 0 12px;
    }

    .owner-sidebar-porto .owner-menu-main span,
    .owner-sidebar-porto .owner-menu-arrow,
    .owner-sidebar-porto:not(.is-open) .owner-menu-main span,
    .owner-sidebar-porto:not(.is-open) .owner-menu-arrow {
        display: inline-block;
    }

    .owner-sidebar-porto:not(.is-open) .owner-menu-main > i:first-child {
        width: 28px;
        min-width: 28px;
    }

    /*
     * Flyouts become inline blocks on mobile.
     */
    .owner-menu-sub {
        position: static;

        width: 100%;
        min-width: 100%;
        max-width: 100%;

        margin: 4px 0 8px;

        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 8px;

        box-shadow: none;
    }

    .owner-menu-item::after {
        display: none;
    }

    .owner-menu-item:nth-last-child(1) .owner-menu-sub,
    .owner-menu-item:nth-last-child(2) .owner-menu-sub {
        top: auto;
        bottom: auto;
    }
}


/* =====================================================
   Very Small Screens
   ===================================================== */

@media (max-width: 575px) {
    .app-dashboard-layout,
    .owner-dashboard-layout {
        gap: 10px;
    }

    .app-sidebar,
    .owner-sidebar-porto {
        padding: 10px;
        border-radius: 10px;
    }

    /*
     * On true phone widths the column is already narrow enough that the
     * drawer cap only leaves an awkward sliver beside the panel -- let it
     * span the full column and sit flush with the content below it.
     */
    .app-sidebar,
    .owner-sidebar-porto,
    .owner-sidebar-porto.is-open {
        max-width: none;
    }

    .owner-menu-sub a {
        white-space: normal;
    }
}


/* =====================================================
   Narrow-screen sidebar accordion  (js/app-sidebar.js)
   Each <h5> section becomes a tap-to-open header; its rows live in the
   .app-sidebar-acc-body that follows and are hidden until the header
   gets .is-open. Only active <= 991px, where js/app-sidebar.js adds the
   .app-sidebar-accordion class.
   ===================================================== */

@media (max-width: 991px) {
    .app-sidebar.app-sidebar-accordion .app-sidebar-acc-header {
        position: relative;
        cursor: pointer;
        user-select: none;
        padding-right: 22px !important;
    }

    .app-sidebar.app-sidebar-accordion .app-sidebar-acc-header::after {
        content: "\25B8";                 /* ▸ collapsed */
        position: absolute;
        right: 2px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 11px;
        color: rgba(255, 255, 255, 0.75);
    }

    .app-sidebar.app-sidebar-accordion .app-sidebar-acc-header.is-open::after {
        content: "\25BE";                 /* ▾ expanded */
    }

    .app-sidebar.app-sidebar-accordion .app-sidebar-acc-header:hover {
        color: #fff;
    }

    .app-sidebar.app-sidebar-accordion .app-sidebar-acc-body {
        display: none;
        margin: 2px 0 8px;
    }

    .app-sidebar.app-sidebar-accordion .app-sidebar-acc-header.is-open + .app-sidebar-acc-body {
        display: block;
    }

    /* Narrow-mode 2nd-level flyout (Classes list, Assignments list, ...):
       drop the repeated title and nest the rows under their parent with a
       left indent. Desktop keeps the titled floating flyout untouched. */
    .app-sidebar .owner-menu-sub-title {
        display: none;
    }

    .app-sidebar .owner-menu-sub {
        margin-left: 18px;
        width: auto;
        min-width: 0;
        max-width: calc(100% - 18px);

        /* Inline list that grows the sidebar -- no inner scrollbars. */
        max-height: none;
        overflow: visible;
    }

    .app-sidebar .owner-menu-sub a {
        padding-left: 18px;

        /* Let long class names wrap instead of forcing a horizontal
           scrollbar inside the submenu. */
        white-space: normal;
        overflow-wrap: anywhere;
    }
}