/* ==========================================================================
   Sidebar

   Layered over SB Admin 2 rather than editing the vendor theme. Colours come
   from the site settings palette, so this follows whatever the superuser sets.

   This theme pins the sidebar to 6.5rem (104px) in both the toggled and
   untoggled state, so everything below is built for one narrow column with
   the icon stacked above its label. There is no wide variant to style.
   ========================================================================== */

#accordionSidebar {
    /* Overrides the repeating background image in global.css so the
       configurable sidebar colour is what actually shows. */
    background: var(--sidebar-bg, var(--primary)) !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 10px;
    overflow-x: hidden;

    /* The card is a floating panel inside the 100vh sticky container, with 1rem
       of margin above and below. Cap it to what is left so a long menu scrolls
       inside the card instead of running off the bottom of the screen. The
       vendor's min-height: 96.5vh would otherwise keep it from shrinking. */
    height: calc(100vh - 2rem);
    min-height: 0 !important;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;

    /* Thin scrollbar, so it does not eat into a 104px-wide column. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

#accordionSidebar::-webkit-scrollbar { width: 4px; }
#accordionSidebar::-webkit-scrollbar-track { background: transparent; }

#accordionSidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

#accordionSidebar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); }

/* In a scrolling flex column, items would otherwise squash to fit instead of
   overflowing, which is what makes the scrollbar appear. */
#accordionSidebar > * { flex-shrink: 0; }

/* --- brand ------------------------------------------------------------ */

.sidebar .sidebar-brand {
    height: auto;
    padding: 18px 10px 14px;
    margin: 0;
}

.sidebar .sidebar-brand-icon { margin: 0; }

.sidebar .sidebar-brand-icon img {
    display: block;
    width: 58px;
    height: 58px;
    object-fit: cover;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    padding: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
    transition: transform 0.18s ease;
}

.sidebar .sidebar-brand:hover .sidebar-brand-icon img { transform: scale(1.04); }

/* --- section headings -------------------------------------------------- */
/* The vendor left-aligns these above 768px; centred reads better in a column
   this narrow. Long single words are wrapped rather than allowed to spill. */

.sidebar .sidebar-heading {
    padding: 6px 4px;
    margin: 8px 0 2px;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.3;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
}

/* --- dividers ---------------------------------------------------------- */

.sidebar hr.sidebar-divider {
    width: 56%;
    margin: 8px auto;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    opacity: 1;
}

/* --- nav items --------------------------------------------------------- */

.sidebar .nav-item {
    margin: 3px 10px;
    display: flex;
    justify-content: center;
}

/* The vendor pins .nav-link to width:6.5rem, the full sidebar width, which
   combined with the margins above pushed each item off-centre and past the
   right edge. Let it fill the margined item instead. */
.sidebar .nav-item .nav-link {
    width: 100%;
    padding: 10px 4px;
    border-radius: 12px;
    text-align: center;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 500;
    transition: background 0.16s ease, color 0.16s ease;
}

.sidebar .nav-item .nav-link i {
    display: block;
    margin: 0 auto 5px;
    font-size: 1.05rem;
    line-height: 1;
    color: inherit;
    opacity: 0.95;
}

.sidebar .nav-item .nav-link span {
    display: block;
    font-size: 0.66rem;
    line-height: 1.25;
    letter-spacing: 0.01em;
    overflow-wrap: break-word;
}

.sidebar .nav-item .nav-link:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* --- current page ------------------------------------------------------ */
/* A filled pill rather than an edge bar: the sidebar is a floating rounded
   card, so anything anchored to its edge sits outside the card. */

.sidebar .nav-item.active .nav-link {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.sidebar .nav-item.active .nav-link i { opacity: 1; }

/* --- collapse control -------------------------------------------------- */

.sidebar .sidebar-toggle-wrap {
    margin-top: auto;
    padding-top: 12px;
    text-align: center;
}

.sidebar #sidebarToggle {
    width: 32px;
    height: 32px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.14);
    opacity: 1;
    transition: background 0.16s ease;
}

.sidebar #sidebarToggle:hover { background: rgba(255, 255, 255, 0.26); }
.sidebar #sidebarToggle::after { color: #fff; }
.sidebar #sidebarToggle:focus { outline: none; box-shadow: none; }