/*
 * Shared administration navigation.
 * The interaction and responsive layout follow student-request-feature.php.
 */
.sidebar {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    padding: 1.5rem 1rem !important;
    overflow: hidden !important;
    border: 1px solid #dbe3ed !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05) !important;
    transition: width .2s ease, min-width .2s ease, max-width .2s ease, box-shadow .2s ease !important;
}

.sidebar:hover {
    width: 340px !important;
    min-width: 340px !important;
    max-width: 340px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .05), 0 4px 6px -2px rgba(0, 0, 0, .03) !important;
}

.sidebar-menu,
.sidebar:hover .sidebar-menu {
    width: 306px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.sidebar .menu-section { display: none !important; }

.sidebar:hover .menu-section {
    display: block !important;
    width: 306px !important;
    margin-top: .5rem !important;
    padding: .75rem 1rem .25rem !important;
    color: #64748b !important;
    font-size: .65rem !important;
    font-weight: 700 !important;
}

.sidebar .menu-item,
.sidebar:hover .menu-item {
    width: 306px !important;
}

.sidebar .menu-item a,
.sidebar:hover .menu-item a {
    display: flex !important;
    width: 306px !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    align-items: center !important;
    gap: .75rem !important;
    padding: 0 1rem !important;
    overflow: hidden !important;
    border-radius: 7px !important;
    color: #64748b !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: .95rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.sidebar:not(:hover) .menu-item a {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
}

.sidebar .menu-item.active a,
.sidebar .menu-item a:hover {
    color: #0b6a4b !important;
    background: linear-gradient(100deg, #d9f9e7 0%, #effcf5 100%) !important;
    font-weight: 600 !important;
}

.sidebar:hover .menu-item a:hover {
    width: 100% !important;
    box-sizing: border-box !important;
    border-left: 4px solid #10a76f !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 14px rgba(16, 185, 129, .1) !important;
}

.sidebar:hover .menu-item,
.sidebar:hover .menu-item:hover {
    width: 306px !important;
    min-width: 306px !important;
    max-width: 306px !important;
}

.sidebar:hover .menu-item a,
.sidebar:hover .menu-item:hover a {
    width: 306px !important;
    min-width: 306px !important;
    max-width: 306px !important;
}

.sidebar .menu-item a svg,
.sidebar:hover .menu-item a svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    flex: 0 0 1.25rem !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: currentColor !important;
}

.sidebar .menu-api-mark,
.sidebar:hover .menu-api-mark {
    display: inline-grid !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    flex: 0 0 1.25rem !important;
    place-items: center !important;
    color: currentColor !important;
    border: 1.5px solid currentColor !important;
    border-radius: .25rem !important;
    font: 800 .48rem/1 Outfit, Arial, sans-serif !important;
    letter-spacing: -.04em !important;
}

@media (max-width: 1100px) {
    /* All admin pages retain the desktop icon rail on compact screens.
       The expanded menu is a drawer layered over page content. */
    html body .admin-view {
        display: grid !important;
        grid-template-columns: 72px minmax(0, 1fr) !important;
        gap: 1rem !important;
        align-items: start !important;
        isolation: isolate !important;
    }

    html body .admin-view > .sidebar,
    html body .admin-view > .sidebar:hover,
    html body .admin-view > .sidebar.menu-open,
    html body .admin-view > .sidebar:focus-within {
        display: block !important;
        position: relative !important;
        z-index: 20 !important;
        align-self: start !important;
        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;
        height: fit-content !important;
        padding: 1.5rem 1rem !important;
        overflow: hidden !important;
        border: 1px solid #dbe3ed !important;
        border-radius: 12px !important;
        background: var(--bg-card, #fff) !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .05) !important;
    }

    html body .admin-view > .sidebar:hover,
    html body .admin-view > .sidebar.menu-open,
    html body .admin-view > .sidebar:focus-within {
        width: 340px !important;
        min-width: 340px !important;
        max-width: 340px !important;
        box-shadow: 0 12px 24px rgba(15, 23, 42, .16) !important;
    }

    html body .admin-view > .sidebar .sidebar-menu,
    html body .admin-view > .sidebar:hover .sidebar-menu,
    html body .admin-view > .sidebar.menu-open .sidebar-menu,
    html body .admin-view > .sidebar:focus-within .sidebar-menu {
        display: block !important;
        flex-flow: column !important;
        width: 306px !important;
        min-width: 306px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    html body .admin-view > .sidebar .menu-item,
    html body .admin-view > .sidebar:hover .menu-item,
    html body .admin-view > .sidebar.menu-open .menu-item,
    html body .admin-view > .sidebar:focus-within .menu-item {
        width: 306px !important;
        min-width: 306px !important;
        max-width: 306px !important;
    }

    html body .admin-view > .sidebar .menu-item a,
    html body .admin-view > .sidebar:hover .menu-item a,
    html body .admin-view > .sidebar.menu-open .menu-item a,
    html body .admin-view > .sidebar:focus-within .menu-item a {
        display: flex !important;
        width: 306px !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 40px !important;
        justify-content: flex-start !important;
        gap: .75rem !important;
        padding: 0 1rem !important;
        overflow: hidden !important;
        border-left: 0 !important;
        font-size: .95rem !important;
    }

    html body .admin-view > .sidebar:not(:hover):not(.menu-open):not(:focus-within) .menu-item a {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        justify-content: center !important;
        gap: 0 !important;
        padding: 0 !important;
        font-size: 0 !important;
    }

    html body .admin-view > .sidebar .menu-section { display: none !important; }

    html body .admin-view > .sidebar:hover .menu-section,
    html body .admin-view > .sidebar.menu-open .menu-section,
    html body .admin-view > .sidebar:focus-within .menu-section {
        display: block !important;
        width: 306px !important;
        margin: .5rem 0 0 !important;
        padding: .75rem 1rem .25rem !important;
        color: var(--text-muted, #64748b) !important;
        font-size: .65rem !important;
    }

    html body .admin-view > .dashboard-content {
        position: relative !important;
        z-index: 1 !important;
    }
}

/* Unified desktop icon-rail navigation.  All pages that include admin-menu.php
   load this file, so menu targets stay in the same position everywhere. */
@media (min-width: 1101px) {
    .admin-view { isolation: isolate !important; }

    .sidebar,
    .sidebar:hover {
        position: sticky !important;
        z-index: 1000 !important;
        width: 72px !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 1.5rem 1rem !important;
        overflow: hidden !important;
        border: 1px solid var(--border-color, #dbe3ed) !important;
        border-radius: var(--radius-md, 12px) !important;
        background: var(--bg-card, #fff) !important;
        box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .05)) !important;
    }

    .sidebar:hover {
        width: 340px !important;
        box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(16, 24, 40, .08)) !important;
    }

    .dashboard-content {
        position: relative !important;
        z-index: 1 !important;
    }

    .sidebar-menu,
    .sidebar:hover .sidebar-menu { width: 306px !important; }

    .sidebar .menu-item,
    .sidebar:hover .menu-item { width: 306px !important; }

    .sidebar .menu-item a,
    .sidebar:hover .menu-item a {
        width: 306px !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 40px !important;
        justify-content: flex-start !important;
        gap: .75rem !important;
        padding: 0 1rem !important;
        overflow: hidden !important;
        font-size: .95rem !important;
    }

    .sidebar:not(:hover) .menu-item a {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        justify-content: center !important;
        gap: 0 !important;
        padding: 0 !important;
        font-size: 0 !important;
    }

    /* Active page treatment shared by every menu item, including rounds.php. */
    .sidebar:hover .menu-item.active a {
        box-sizing: border-box !important;
        border-left: 4px solid #10a76f !important;
        border-radius: 12px !important;
        color: #075d40 !important;
        background: linear-gradient(105deg, #d8f8e7, #effcf5) !important;
        box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .05), 0 4px 12px rgba(16, 185, 129, .10) !important;
        font-weight: 600 !important;
    }

    .sidebar .menu-section,
    .sidebar:hover .menu-section {
        display: block !important;
        position: relative !important;
        width: 306px !important;
        height: 34px !important;
        margin: .6rem 0 !important;
        padding: .75rem 1rem .25rem !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        color: transparent !important;
        font-size: .65rem !important;
        line-height: 1 !important;
    }

    .sidebar .menu-section::before {
        content: '' !important;
        position: absolute !important;
        top: 50% !important;
        left: 9px !important;
        width: 22px !important;
        border-top: 1px solid #dbe4ec !important;
    }

    .sidebar:hover .menu-section { color: var(--text-muted, #64748b) !important; }
    .sidebar:hover .menu-section::before { display: none !important; }
}

/* Student-request-feature.php previously carried several page-only sidebar
   rules. These selectors intentionally win over those legacy rules so that
   page now renders with this shared navigation, just like rounds.php. */
@media (min-width: 1101px) {
    html body .admin-view .sidebar,
    html body .admin-view.sidebar-collapsed .sidebar {
        width: 72px !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 1.5rem 1rem !important;
        overflow: hidden !important;
    }
    html body .admin-view .sidebar:hover,
    html body .admin-view.sidebar-collapsed .sidebar:hover {
        width: 340px !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 1.5rem 1rem !important;
    }
    html body .admin-view .sidebar .sidebar-menu,
    html body .admin-view.sidebar-collapsed .sidebar .sidebar-menu {
        width: 306px !important;
        overflow: visible !important;
    }
    html body .admin-view .sidebar .menu-item,
    html body .admin-view.sidebar-collapsed .sidebar .menu-item {
        width: 306px !important;
        overflow: visible !important;
    }
    html body .admin-view .sidebar .menu-item a,
    html body .admin-view.sidebar-collapsed .sidebar .menu-item a {
        width: 306px !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 40px !important;
        justify-content: flex-start !important;
        gap: .75rem !important;
        padding: 0 1rem !important;
        overflow: hidden !important;
        font-size: .95rem !important;
    }
    html body .admin-view .sidebar:not(:hover) .menu-item a,
    html body .admin-view.sidebar-collapsed .sidebar:not(:hover) .menu-item a {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        justify-content: center !important;
        gap: 0 !important;
        padding: 0 !important;
        font-size: 0 !important;
    }
    html body .admin-view .sidebar .menu-section,
    html body .admin-view.sidebar-collapsed .sidebar .menu-section {
        display: block !important;
        width: 306px !important;
        height: 34px !important;
        margin: .6rem 0 !important;
        padding: .75rem 1rem .25rem !important;
        overflow: hidden !important;
        color: transparent !important;
        font-size: .65rem !important;
        line-height: 1 !important;
    }
    html body .admin-view .sidebar:hover .menu-section,
    html body .admin-view.sidebar-collapsed .sidebar:hover .menu-section {
        color: var(--text-muted, #64748b) !important;
    }
}

/* Keep the icon rail fixed while labels are revealed.  Expanding the sidebar
   must only add content to the right; it must not move any menu target. */
html body .admin-view .sidebar .menu-item a,
html body .admin-view .sidebar:hover .menu-item a,
html body .admin-view .sidebar.menu-open .menu-item a,
html body .admin-view .sidebar:focus-within .menu-item a {
    padding-left: 10px !important;
    padding-right: 1rem !important;
}

html body .admin-view .sidebar:not(:hover):not(.menu-open):not(:focus-within) .menu-item a {
    padding: 0 !important;
}

/* The active/hover border is 4px wide, so reduce its inner padding by 4px to
   keep the icon centre exactly aligned with the collapsed icon rail. */
html body .admin-view .sidebar:hover .menu-item a:hover,
html body .admin-view .sidebar:hover .menu-item.active a,
html body .admin-view .sidebar.menu-open .menu-item a:hover,
html body .admin-view .sidebar.menu-open .menu-item.active a,
html body .admin-view .sidebar:focus-within .menu-item a:hover,
html body .admin-view .sidebar:focus-within .menu-item.active a {
    padding-left: 6px !important;
}

@media (max-width: 1100px) {
    /* Reserve the heading rows even while their labels are hidden.  Without
       this, every item below a section jumps down when the drawer expands. */
    html body .admin-view > .sidebar .menu-section,
    html body .admin-view > .sidebar:hover .menu-section,
    html body .admin-view > .sidebar.menu-open .menu-section,
    html body .admin-view > .sidebar:focus-within .menu-section {
        display: block !important;
        position: relative !important;
        width: 306px !important;
        height: 34px !important;
        margin: .6rem 0 !important;
        padding: .75rem 1rem .25rem !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        color: transparent !important;
        font-size: .65rem !important;
        line-height: 1 !important;
    }

    html body .admin-view > .sidebar .menu-section::before {
        content: '' !important;
        position: absolute !important;
        top: 50% !important;
        left: 9px !important;
        width: 22px !important;
        border-top: 1px solid #dbe4ec !important;
    }

    html body .admin-view > .sidebar:hover .menu-section,
    html body .admin-view > .sidebar.menu-open .menu-section,
    html body .admin-view > .sidebar:focus-within .menu-section {
        color: var(--text-muted, #64748b) !important;
    }

    html body .admin-view > .sidebar:hover .menu-section::before,
    html body .admin-view > .sidebar.menu-open .menu-section::before,
    html body .admin-view > .sidebar:focus-within .menu-section::before {
        display: none !important;
    }
}

/* One consistent location for feedback after admin actions such as add, edit,
   delete, import, or changing a status.  Individual pages use different toast
   implementations, so these rules deliberately override their local location. */
html body .toast {
    position: fixed !important;
    top: 1.25rem !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    z-index: 2000 !important;
    max-width: min(calc(100vw - 2rem), 30rem) !important;
    transform: translateX(-50%) !important;
}

html body .toast.show {
    transform: translateX(-50%) !important;
}

/* This page creates its notifications inside a container. Keep the stack
   centred as a group, while preserving its existing slide-in animation. */
html body .toast-container {
    position: fixed !important;
    top: 1.25rem !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    z-index: 2000 !important;
    width: min(calc(100vw - 2rem), 30rem) !important;
    transform: translateX(-50%) !important;
    align-items: stretch !important;
}

html body .toast-container .toast {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: none !important;
    transform: translateY(1rem) !important;
}

html body .toast-container .toast.show {
    transform: translateY(0) !important;
}

@media (max-width: 640px) {
    html body .toast,
    html body .toast-container {
        top: .75rem !important;
    }
}