/* ==========================================================================
   Classroom menu rail
   The "My Digital Classroom" sidebar used to collapse to nothing (legacy
   .page-sidebar-hidden is width 0). It now collapses to a 64px icon rail:
   each step keeps its icon. The controller collapses it
   automatically on the wide tabs (Student Coursework, Grading Center,
   Progress Tracker) and a manual toggle pins the choice.
   Scoped to .cls-page so the ~90 other pages using .page-sidebar-hidden are
   untouched. The legacy rule carries padding: 0 !important, so the one
   !important here is needed to win it back.
   ========================================================================== */
.nui-on .cls-page .animation_hide-sidebar.page-sidebar-hidden {
    width: 64px;
    height: 100%;
    overflow: visible;
    padding: 0 9px 0 0 !important;
}
.nui-on .cls-page .page-sidebar-hidden > .panel {
    min-width: 0;
    width: 100%;     /* legacy collapses the panel itself to width 0 */
}
.nui-on .cls-page .page-content-woSidebar {
    float: left;
    width: calc(100% - 64px);
    padding: 0 0 0 9px;
}

/* rail contents: brand bar on top, icons only, nothing else */
.nui-on .cls-page .page-sidebar-hidden .panel-body {
    padding: 9px 6px;
}
.nui-on .cls-page .page-sidebar-hidden .wh-card-header {
    justify-content: center;
    padding: 6px 0;
    cursor: default;
}
.nui-on .cls-page .page-sidebar-hidden .wh-card-header > i,

.nui-on .cls-page .page-sidebar-hidden .wh-card-header .wh-card-header-left,

.nui-on .cls-page .page-sidebar-hidden .wh-card-subheader,

.nui-on .cls-page .page-sidebar-hidden .wh-menu-item a > span:not(.wh-menu-icon),

.nui-on .cls-page .page-sidebar-hidden .panel-body > .wh-card ~ .wh-card,

.nui-on .cls-page .page-sidebar-hidden .panel-body > .wh-card ~ div {
    display: none;
}
.nui-on .cls-page .page-sidebar-hidden .wh-menu-item a {
    justify-content: center;
    padding: 10px 0;
}
.nui-on .cls-page .page-sidebar-hidden .wh-menu-icon {
    margin: 0;
}
.nui-on .cls-page .page-sidebar-hidden .wh-menu-item.active a {
    border-radius: 8px;
}

/* ---- collapse/expand handle: a small round button on the seam between
   menu and content instead of an 18x36 square hanging in an 18px gutter.
   Same button in both states; the chevron inside flips with the state. */
.nui-on .cls-page .animation_hide-sidebar.page-sidebar-hidden {
    padding-right: 0 !important;
}
.nui-on .cls-page .page-content-woSidebar {
    width: calc(100% - 64px);
    padding-left: 10px;
}
.nui-on .cls-page .btn.btn-toggle-sidebar {   /* .btn.is-btn-white rules in the New UI sheets set radius 8px at higher specificity */
    width: 24px;
    height: 24px;
    top: 14px;
    left: 0;
    transform: translateX(-50%);
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--aa-grey-100, #EEF1F2);
    background: var(--aa-white, #fff);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(26,26,26,0.06), 0 1px 3px rgba(26,26,26,0.08));
    color: var(--aa-grey-500, #7B8E92);
    font-size: 12px;
    line-height: 22px;
    z-index: 5;
}
.nui-on .cls-page .btn.btn-toggle-sidebar:hover {
    color: var(--aa-blue, #0074C5);
    border-color: var(--aa-blue, #0074C5);
}
.nui-on .cls-page .page-sidebar-hidden ~ .page-content-woSidebar .btn-toggle-sidebar {
    left: 0;
}

/* ---- hover: one flyout per item. Hovering an icon slides that item's name
   out to the right as a small pill; nothing else moves or appears. The full
   menu (with the classroom picker) is the pinned state via the chevron or
   the classroom icon at the top of the rail. The panel must not clip, so
   its overflow is visible while collapsed (eight rows, no scrolling). */
.nui-on .cls-page .animation_hide-sidebar.page-sidebar-hidden {
    position: relative;
    z-index: 5;              /* the panel's backdrop-filter makes a stacking context; lift it above the content */
}
.nui-on .cls-page .page-sidebar-hidden > .panel,

.nui-on .cls-page .page-sidebar-hidden .wh-card,

.nui-on .cls-page .page-sidebar-hidden .wh-card-body {
    /* .wh-card is overflow:hidden (rounded-corner clipping) at higher
       specificity in the New UI sheets and .wh-card-body is auto - both
       would clip the flyouts, so this one has to be forced */
    overflow: visible !important;
}
.nui-on .cls-page .page-sidebar-hidden .wh-menu-item a {
    position: relative;
}
.nui-on .cls-page .page-sidebar-hidden .wh-menu-item a > span:not(.wh-menu-icon),

.nui-on .cls-page .page-sidebar-hidden .cls-flyout {
    display: block;
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
    padding: 6px 12px;
    background: var(--aa-white, #fff);
    color: var(--aa-ink, #222831);
    border: 1px solid var(--aa-grey-100, #EEF1F2);
    border-radius: 8px;
    box-shadow: var(--shadow-md, 0 2px 6px rgba(26,26,26,0.08), 0 6px 16px rgba(26,26,26,0.08));
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.12s ease;
    z-index: 40;
}
.nui-on .cls-page .page-sidebar-hidden .wh-menu-item a:hover > span:not(.wh-menu-icon),

.nui-on .cls-page .page-sidebar-hidden .wh-card-header:hover .cls-flyout {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
/* the classroom button: shown only in the rail, in the brand bar */
.nui-on .cls-page .cls-rail-classroom { display: none; }
.nui-on .cls-page .page-sidebar-hidden .cls-rail-classroom {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 44px;
    cursor: pointer;
}
/* the New UI paints the card header white, so the switcher is a blue mark
   in a tinted circle rather than white-on-brand */
.nui-on .cls-page .page-sidebar-hidden .cls-rail-classroom > i {
    font-size: 20px;
    color: var(--aa-blue, #0074C5);
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%;
    background: rgba(0, 116, 197, 0.10);
}
.nui-on .cls-page .page-sidebar-hidden .cls-rail-classroom:hover > i {
    background: rgba(0, 116, 197, 0.18);
}
.nui-on .cls-page .page-sidebar-hidden .wh-card-header {
    position: relative;
    padding: 0;
    cursor: pointer;
}

/* ---- District Coursework (course-view.html, .cls-rail-groups): the menu has
   three groups (Course Content, Communication, Course Banks). All three stay
   in the rail as icon groups with a hairline between them; the group headers,
   the "add unit" dropdown, the unit shortcut toggle and the nested unit list
   are rail-only noise. Item names are wrapped in <span> there so the shared
   flyout rule above picks them up. */
.nui-on .cls-rail-groups .page-sidebar-hidden .panel-body > .wh-card ~ .wh-card {
    display: flex;
}
.nui-on .cls-rail-groups .page-sidebar-hidden .wh-card-header {
    display: none;
}
.nui-on .cls-rail-groups .page-sidebar-hidden .panel-body > .wh-card + .wh-card {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--aa-grey-100, #EEF1F2);
}
.nui-on .cls-rail-groups .page-sidebar-hidden .wh-menu-item a .dropdown,
.nui-on .cls-rail-groups .page-sidebar-hidden .wh-menu-item a .btn,
.nui-on .cls-rail-groups .page-sidebar-hidden .wh-menu .wh-menu {
    display: none;          /* nested unit list under "Modules" is text-only - not rail material */
}

/* ---- Filter sidebars (Grading Center grading.html, Admin > Classroom
   Management management.html, .cls-filter-rail): same rail, one icon. The
   .cls-rail-filters block is the panel header ("Filters") while expanded and
   the rail's single icon (click to expand, hover for the name) while
   collapsed. The filter controls themselves are untouched. */
.nui-on .cls-filter-rail .cls-rail-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-family: var(--font-display, "Montserrat", sans-serif);
    font-size: 13px;
    font-weight: 700;
    color: var(--aa-ink, #222831);
    border-bottom: 1px solid var(--aa-grey-100, #EEF1F2);
}
.nui-on .cls-filter-rail .cls-rail-filters > i {
    font-size: 20px;
    color: var(--aa-blue, #0074C5);
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%;
    background: rgba(0, 116, 197, 0.10);
}
.nui-on .cls-filter-rail .page-sidebar .cls-rail-filters .cls-flyout {
    display: none;                         /* expanded: the label is the header text */
}
.nui-on .cls-filter-rail .page-sidebar-hidden .cls-rail-filters {
    position: relative;
    justify-content: center;
    height: 44px;
    padding: 6px 0;
    border-bottom: 0;
    cursor: pointer;
}
.nui-on .cls-filter-rail .page-sidebar-hidden .cls-rail-filters:hover > i {
    background: rgba(0, 116, 197, 0.18);
}
.nui-on .cls-filter-rail .page-sidebar-hidden .cls-rail-filters .cls-filter-label,
.nui-on .cls-filter-rail .page-sidebar-hidden .panel-body,
.nui-on .cls-filter-rail .page-sidebar-hidden .panel > .f00auto {
    display: none;
}
.nui-on .cls-filter-rail .page-sidebar-hidden .cls-rail-filters:hover .cls-flyout {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
.nui-on .cls-filter-rail .sidebar-form label {
    font-family: var(--font-display, "Montserrat", sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--aa-grey-500, #7B8E92);
}