/* Navigation — colors from public/branding/branding.css */
.pantas-header {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 1050;
    font-family: var(--brand-font-family, 'Inter', sans-serif);
}

.pantas-header .header-logo-img {
    height: 32px;
    width: auto;
}

.pantas-header #routeWrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
    align-items: center;
}

.pantas-header .btn0,
.pantas-header .btn2,
.pantas-header .nav-dropdown-button {
    font-weight: 600;
    font-size: 0.8rem;
    padding: 5px 15px;
    margin-top: 8px;
    font-family: var(--brand-font-family, 'Inter', sans-serif);
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
    transition: color 0.2s, background-color 0.2s;
    color: var(--brand-nav-link, #29abe2);
    background: none;
    border: none;
    cursor: pointer;
    letter-spacing: -0.01em;
}

.pantas-header .btn0:hover,
.pantas-header .btn0.active,
.pantas-header .btn2:hover,
.pantas-header .btn2.active,
.pantas-header .nav-dropdown-button:hover,
.pantas-header .nav-dropdown-button.active {
    color: var(--brand-nav-link-hover, #1a8fc4);
}

.pantas-header .btn5 {
    background-color: var(--brand-logout-bg, #29abe2);
    font-weight: 600;
    font-size: 0.8rem;
    border-radius: 10px;
    padding: 5px 15px;
    margin-top: 8px;
    font-family: var(--brand-font-family, 'Inter', sans-serif);
    color: var(--brand-logout-text, #fff);
    border: none;
    cursor: pointer;
    letter-spacing: -0.01em;
}

.pantas-header .btn5:hover {
    background-color: var(--brand-logout-hover-bg, #ffb845);
    color: var(--brand-logout-hover-text, #22333b);
}

.pantas-header .nav-dropdown {
    position: relative;
    display: inline-block;
}

.pantas-header .nav-dropdown-button:focus {
    outline: none;
}

.pantas-header .nav-dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: #fff;
    min-width: 210px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    z-index: 1100;
    border-radius: 4px;
    padding: 0.25rem 0;
    border-top: 3px solid var(--brand-nav-link, #29abe2);
}

.pantas-header .nav-dropdown:hover .nav-dropdown-content {
    display: block;
}

.pantas-header .nav-dropdown-content a {
    color: var(--brand-nav-link, #29abe2);
    padding: 10px 16px;
    text-decoration: none;
    display: block;
    font-weight: 600;
    font-size: 0.8rem;
    font-family: var(--brand-font-family, 'Inter', sans-serif);
    letter-spacing: -0.01em;
}

.pantas-header .nav-dropdown-content a:hover,
.pantas-header .nav-dropdown-content a.active {
    background-color: var(--brand-nav-dropdown-hover-bg, #e3f4fc);
    color: var(--brand-nav-dropdown-hover-text, #125a82);
}

/* ── Bannernew.jpg photo banner ─────────────────────────────────────────────
   Pure proportional display across ALL devices. width:100% + height:auto
   preserves the 3905×1056 (≈3.7:1) ratio so the whole image is always shown:
     Desktop 1366px → ~369px tall   Tablet 768px → ~208px   Phone 375px → ~101px
   max-width:100% is the safety net that prevents any horizontal overflow.
   ────────────────────────────────────────────────────────────────────────── */
.acd-banner-photo {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* Legacy static banner image (kept for backward compat) */
.pantas-banner .banner-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Banner positioning inside main ────────────────────────────────────────
   The banner is now inside <main> so it inherits the sidebar margin.
   We pull it to the edges of main's container to keep it full-width.
   ────────────────────────────────────────────────────────────────────────── */

/* Admin layout: cancel the admin-main top padding and stretch to edges */
.pantas-banner--admin {
    margin-top: -24px;   /* cancel admin-main's padding-top: 24px */
    margin-bottom: 24px;
}

/* Public layout: cancel py-3 top padding and stretch past container */
.pantas-banner--public {
    margin-top: -1rem;   /* cancel py-3 padding-top */
    margin-bottom: 1.25rem;
}

/* On mobile cancel both negative margins so the photo never clips at the top */
@media (max-width: 991.98px) {
    .pantas-banner--admin,
    .pantas-banner--public {
        margin-top: 0;
    }
}

/* ─── Responsive HTML Banner (.acd-banner) ─────────────────────────────────
   Replaces Bannernew.jpg with a fully responsive CSS component.
   Works on any screen size from 320px to 4K.
   ────────────────────────────────────────────────────────────────────────── */

.acd-banner {
    position: relative;
    width: 100%;
    /* Height scales smoothly: 90px on tiny phones → 230px on desktop */
    height: clamp(90px, 20vw, 230px);
    overflow: hidden;
    /* Same gradient direction as the original image */
    background: linear-gradient(120deg, #cce8f7 0%, #ddf0fb 25%, #eef7fd 55%, #f7fbff 80%, #fff 100%);
    display: flex;
    align-items: center;
}

/* ── Watermark: ghosted seal, far-left background ── */
.acd-banner-watermark {
    position: absolute;
    left: -3%;
    top: 50%;
    transform: translateY(-50%);
    height: 145%;
    pointer-events: none;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.acd-banner-watermark img {
    height: 100%;
    width: auto;
    max-width: none;
    opacity: 0.07;
    filter: grayscale(100%);
}

/* ── Decorative wave lines: top-right ── */
.acd-banner-waves {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    /* Waves take 35% of width on desktop, shrink on mobile */
    width: clamp(120px, 35%, 420px);
    pointer-events: none;
}

.acd-banner-waves svg {
    width: 100%;
    height: 100%;
}

/* ── Main content row ── */
.acd-banner-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    /* vw units avoid the clamp()+% browser quirk where % can resolve
       relative to a different reference than the element's own width.
       3vw = 44px on 1366px, 45px on 1497px — always at least 24px minimum. */
    padding: 0 clamp(24px, 3vw, 56px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(8px, 2vw, 24px);
    box-sizing: border-box;
}

/* ── Left: text block ── */
.acd-banner-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(3px, 0.6vw, 10px);
}

/* Main headline — uses Barlow Condensed for the bold condensed look */
.acd-banner-title {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    font-family: 'Barlow Condensed', 'Arial Narrow', 'Impact', sans-serif;
    font-weight: 900;
    /*
     * Reduced from 5.5vw: the sidebar consumes ~260px of the viewport,
     * so 5.5vw was over-sizing the text and clipping it at the left edge.
     * 3.8vw keeps the headline fully visible in both admin and public layouts.
     */
    font-size: clamp(1.4rem, 3.8vw, 4.5rem);
    line-height: 0.9;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #1a6dc9;
    word-break: break-word;          /* last-resort: never clip past left edge */
    overflow-wrap: break-word;
    text-shadow: 2px 3px 8px rgba(26, 109, 201, 0.15);
}

.acd-banner-line {
    display: block;
}

/* Horizontal rule below the title */
.acd-banner-rule {
    width: clamp(48px, 18%, 180px);
    height: 2px;
    background: #1a6dc9;
    opacity: 0.35;
    border-radius: 2px;
    margin-top: clamp(2px, 0.5vw, 6px);
}

/* "POWERED BY PANTAS" subtitle */
.acd-banner-powered {
    margin: 0;
    font-family: var(--brand-font-family, 'Inter', sans-serif);
    font-size: clamp(0.42rem, 1.1vw, 0.82rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #1a6dc9;
    opacity: 0.65;
}

/* ── Right: ACD seal ── */
/* Crops pantasLogo.png to show only the left portion (the circular seal) */
.acd-banner-seal {
    flex-shrink: 0;
    width: clamp(68px, 17vw, 196px);
    height: clamp(68px, 17vw, 196px);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
}

.acd-banner-seal img {
    /* Set to full container height so width scales proportionally.
       pantasLogo.png is ~4:1 wide — this shows only the left ¼ (the seal). */
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 100%;
    width: auto;
    max-width: none; /* prevent img max-width: 100% from compressing it */
}

/* ── Responsive: tablet (640px – 768px) ── */
@media (max-width: 768px) {
    .acd-banner-title {
        font-size: clamp(1.4rem, 6vw, 3.2rem);
    }
    .acd-banner-waves {
        width: 25%;
        opacity: 0.7;
    }
}

/* ── Responsive: mobile (max 480px) ── */
@media (max-width: 480px) {
    .acd-banner {
        height: clamp(80px, 22vw, 130px);
    }
    .acd-banner-title {
        font-size: clamp(1.2rem, 7vw, 2rem);
        text-shadow: 1px 2px 4px rgba(26, 109, 201, 0.15);
    }
    .acd-banner-rule {
        display: none;
    }
    .acd-banner-powered {
        font-size: clamp(0.38rem, 1.5vw, 0.6rem);
    }
    .acd-banner-waves {
        width: 18%;
        opacity: 0.5;
    }
    .acd-banner-seal {
        width: clamp(52px, 15vw, 80px);
        height: clamp(52px, 15vw, 80px);
    }
    .acd-banner-watermark {
        opacity: 0.5; /* watermark less visible on small screens */
    }
}

/* ── Responsive: very small (max 360px) ── */
@media (max-width: 360px) {
    .acd-banner-seal {
        display: none;
    }
    .acd-banner-title {
        font-size: clamp(1.1rem, 8vw, 1.6rem);
    }
}

/* ── Admin dashboard: compact banner height + smaller headline ─────────────
   The sidebar already anchors the brand; a shorter banner looks better here.
   The public page gets the full-size banner.
   ────────────────────────────────────────────────────────────────────────── */
.pantas-banner--admin .acd-banner {
    height: clamp(80px, 12vw, 150px);
}

.pantas-banner--admin .acd-banner-title {
    /* Relative to the narrower content area (viewport minus 260px sidebar) */
    font-size: clamp(1.2rem, 3vw, 3rem);
}

/* Admin inner padding: use absolute px so there is never ambiguity about the
   reference used for percentage resolution inside clamp(). The left value
   ensures the headline starts well clear of the sidebar's right edge. */
.pantas-banner--admin .acd-banner-inner {
    padding-left: clamp(20px, 2.5vw, 40px);
    padding-right: clamp(16px, 1.8vw, 32px);
}

.pantas-banner--admin .acd-banner-seal {
    width: clamp(60px, 11vw, 140px);
    height: clamp(60px, 11vw, 140px);
}

/* On mobile the admin banner uses the same full height as public */
@media (max-width: 991.98px) {
    .pantas-banner--admin .acd-banner {
        height: clamp(80px, 20vw, 180px);
    }
    .pantas-banner--admin .acd-banner-title {
        font-size: clamp(1.4rem, 4vw, 3.5rem);
    }
}

.toggle-btn,
.close-btn {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
    color: var(--brand-nav-link, #29abe2);
}

.close-btn {
    display: none;
}

@media (max-width: 768px) {
    .pantas-header #routeWrapper {
        display: none !important;
        flex-direction: column;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        background-color: #fff;
        width: 100%;
        padding: 1rem;
        z-index: 1100;
        text-align: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .pantas-header #routeWrapper.open {
        display: flex !important;
    }

    .pantas-header #customMenuToggle {
        display: block !important;
        margin-left: auto;
    }

    .pantas-header .close-btn {
        display: block;
        align-self: flex-end;
    }

    .pantas-header .nav-dropdown {
        width: 100%;
    }

    .pantas-header .nav-dropdown-content {
        position: static;
        display: none;
        box-shadow: none;
        border-left: 3px solid var(--brand-nav-link, #29abe2);
        margin: 0.25rem 0 0.5rem;
        text-align: left;
        border-top: none;
    }

    .pantas-header .nav-dropdown.open .nav-dropdown-content {
        display: block;
    }

    .pantas-header .nav-dropdown-button::after {
        content: ' ▾';
        font-size: 0.7rem;
    }
}

@media (min-width: 769px) {
    .pantas-header #customMenuToggle,
    .pantas-header #customMenuClose {
        display: none !important;
    }
}

/* ── SidebarProvider ─────────────────────────────────────────────────────────
   Body-level state management (mirrors shadcn/ui SidebarProvider).
   .sidebar-collapsed is toggled by the SidebarTrigger button.
   ────────────────────────────────────────────────────────────────────────── */
/* Admin sidebar */
.admin-shell-body {
    min-height: 100vh;
    font-family: var(--brand-font-family, 'Inter', sans-serif);
}

/* ── SidebarTrigger ───────────────────────────────────────────────────────── */
/* ── SidebarTrigger: fixed at the sidebar's right edge ───────────────────── */
.admin-sidebar-trigger {
    position: fixed;
    top: 18px;
    left: 268px; /* 260px sidebar + 8px so it straddles the edge */
    z-index: 1059;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(17, 24, 39, 0.1);
    border-radius: 6px;
    background: #ffffff;
    color: #4b0082;
    cursor: pointer;
    box-shadow: 0 1px 6px rgba(17, 24, 39, 0.1);
    /* Slides with the sidebar during collapse/expand */
    transition: left 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.15s, color 0.15s, border-color 0.15s;
}
.admin-sidebar-trigger:hover {
    background: rgba(41, 171, 226, 0.08);
    color: var(--brand-primary, #29abe2);
    border-color: rgba(41, 171, 226, 0.3);
}
.admin-sidebar-trigger svg {
    width: 15px; height: 15px;
    stroke: currentColor; fill: none;
    stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;
}
/* Move trigger with the collapsed sidebar */
.sidebar-collapsed .admin-sidebar-trigger {
    left: 80px; /* 72px collapsed sidebar + 8px */
}
/* Trigger bar wrapper: zero-out now that button is fixed */
.admin-sidebar-trigger-bar {
    height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
}
/* Hidden on mobile — hamburger handles it */
@media (max-width: 991.98px) {
    .admin-sidebar-trigger { display: none; }
}

/* ── Sidebar (Sidebar component) ─────────────────────────────────────────── */
.admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1060;
    width: 260px;
    max-width: calc(100vw - 24px);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 16px 10px 12px;
    background: #4b0082;
    border-right: 1px solid rgba(17, 24, 39, 0.08);
    box-shadow: 4px 0 20px rgba(17, 24, 39, 0.05);
    color: #111827;
    /* Smooth collapse/expand transition */
    transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* Offset main content to match sidebar */
.admin-main {
    transition: margin-left 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Collapsed rail (72 px icon-only) ────────────────────────────────────── */
.sidebar-collapsed .admin-sidebar { width: 72px; }
.sidebar-collapsed .admin-main    { margin-left: 72px; }

/* Brand: swap to seal thumbnail */
.sidebar-collapsed .admin-sidebar-brand {
    padding: 10px 8px;
    align-items: center;
    justify-content: center;
}
.sidebar-collapsed .admin-sidebar-brand-img  { display: none; }
.sidebar-collapsed .admin-sidebar-brand-role { display: none; }
.sidebar-collapsed .admin-sidebar-brand-seal { display: flex !important; }

/* Seal thumbnail */
.admin-sidebar-brand-seal {
    display: none;
    width: 40px; height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}
.admin-sidebar-brand-seal img {
    height: 100%;
    width: auto;
}

/* Nav links: switch from grid to flex so icon is perfectly centered */
.sidebar-collapsed .admin-sidebar-link {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    min-height: 42px;
}
.sidebar-collapsed .admin-sidebar-link > span,
.sidebar-collapsed .admin-sidebar-link--parent > span { display: none; }
.sidebar-collapsed .admin-sidebar-caret               { display: none !important; }

/* Make icon slightly larger in rail mode */
.sidebar-collapsed .admin-sidebar-link svg:first-child {
    width: 20px;
    height: 20px;
}

/* Active indicator: full-width pill instead of left border */
.sidebar-collapsed .admin-sidebar-link.active::before { display: none; }
.sidebar-collapsed .admin-sidebar-link.active {
    background: rgb(255, 208, 55);
}

/* User footer: icon-only rail */
.sidebar-collapsed .admin-sidebar-user {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px 8px;
    gap: 6px;
}
.sidebar-collapsed .admin-sidebar-logout-btn span { display: none; }
.sidebar-collapsed .admin-sidebar-logout-btn {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    justify-content: center;
    border-radius: 50% !important;
}

.admin-sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 8px 8px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(17, 24, 39, 0.08);
    text-decoration: none;
    margin-bottom: 16px;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.admin-sidebar-brand:hover {
    border-color: rgba(41, 171, 226, 0.35);
    box-shadow: 0 2px 8px rgba(255, 221, 51, 0.12);
}

/* Full pantasLogo.png — seal + school name — at natural proportions */
.admin-sidebar-brand-img {
    display: block;
    width: 100%;
    height: auto;
}

/* Small role label beneath the logo */
.admin-sidebar-brand-role {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-primary, #29abe2);
    text-align: center;
}

.admin-sidebar-user-copy strong {
    overflow: hidden;
    color: #111827;
    font-size: 0.88rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-sidebar-user-copy span {
    overflow: hidden;
    color: #6b7280;
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-sidebar-user button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.25;
}

.admin-sidebar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0;
    scrollbar-width: thin;
    scrollbar-color: white;
}

.admin-sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.admin-sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.admin-sidebar-nav::-webkit-scrollbar-thumb {
    background: white;
    border-radius: 99px;
}

.admin-sidebar-section {
    margin-bottom: 1.4rem;
}

.admin-sidebar-section p {
    margin: 0 0 0.4rem;
    padding: 0 8px;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-sidebar-link {
    position: relative;
    display: grid;
    grid-template-columns: 20px 1fr 16px;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 7px 10px;
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.admin-sidebar-link:hover {
    background: rgba(255, 255, 255, 0.984);
    color: #000;
}

.admin-sidebar-link.active {
    background: rgba(255, 255, 255, 0.984) ;
    color: #000;
    font-weight: 600;
}

.admin-sidebar-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #ffffff;
}

.admin-sidebar-link svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.admin-sidebar-link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-sidebar-link .admin-sidebar-caret {
    justify-self: end;
    width: 14px;
    height: 14px;
    opacity: 0.4;
    transition: opacity 0.15s ease;
}

.admin-sidebar-link:hover .admin-sidebar-caret,
.admin-sidebar-link.active .admin-sidebar-caret {
    opacity: 0.7;
}

.admin-sidebar-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(17, 24, 39, 0.08);
    margin-top: 12px;
}

.admin-sidebar-avatar {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-primary, #29abe2), var(--brand-primary-dark, #1a8fc4));
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
}

.admin-sidebar-user-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.admin-sidebar-user form {
    margin: 0;
}

.admin-sidebar-user button {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: #6b7280;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.admin-sidebar-user button:hover {
    background: #ffffff;
    border-color: rgba(239, 68, 68, 0.2);
    color: #fff;
}

.admin-sidebar-logout-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    width: auto !important;
    height: auto !important;
    padding: 0.38rem 0.8rem !important;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: 'Segoe UI', sans-serif;
    letter-spacing: 0.01em;
    border-radius: 8px !important;
    border: 1.5px solid rgba(220, 38, 38, 0.3) !important;
    color: #dc2626 !important;
    background: rgba(254, 242, 242, 0.85) !important;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease,
                color 0.18s ease, box-shadow 0.18s ease, transform 0.13s ease;
    flex-shrink: 0;
    white-space: nowrap;
}
.admin-sidebar-logout-btn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.admin-sidebar-logout-btn span {
    line-height: 1;
}
.admin-sidebar-logout-btn:hover {
    background: #fee2e2 !important;
    border-color: rgba(220, 38, 38, 0.55) !important;
    color: #b91c1c !important;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.18);
    transform: translateY(-1px);
}
.admin-sidebar-logout-btn:active {
    transform: translateY(0);
    box-shadow: none !important;
}

.admin-main {
    min-height: 100vh;
    padding: 24px 0;
    margin-left: 260px;
}

.admin-sidebar-toggle,
.admin-sidebar-overlay {
    display: none;
}

/* ── SidebarMenuItem with submenu ────────────────────────────────────────── */

/* Parent trigger — visually identical to a link but rendered as <button> */
.admin-sidebar-link--parent {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

/* Caret flips 180° when open — use > to avoid affecting nested items */
.admin-sidebar-item > .admin-sidebar-link--parent .admin-sidebar-caret,
.admin-sidebar-subitem > .admin-sidebar-link--parent .admin-sidebar-caret {
    transition: transform 0.2s ease;
}
.admin-sidebar-item.open > .admin-sidebar-link--parent .admin-sidebar-caret,
.admin-sidebar-subitem.open > .admin-sidebar-link--parent .admin-sidebar-caret {
    transform: rotate(180deg);
}

/* Level-1 submenu */
.admin-sidebar-submenu {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    padding-left: 14px;
    border-left: 2px solid rgba(17, 24, 39, 0.07);
    margin-left: 9px;
    margin-top: 2px;
    margin-bottom: 2px;
}

.admin-sidebar-item.open > .admin-sidebar-submenu {
    max-height: 600px;
}

/* Level-2 submenu (Accounts inside Admin) */
.admin-sidebar-subsubmenu {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    padding-left: 12px;
    border-left: 2px solid rgba(17, 24, 39, 0.06);
    margin-left: 7px;
    margin-top: 2px;
}

.admin-sidebar-subitem.open > .admin-sidebar-subsubmenu {
    max-height: 200px;
}

/* Child links — no caret column, slightly smaller */
.admin-sidebar-link.admin-sidebar-link--child {
    grid-template-columns: 15px 1fr;
    font-size: 0.85rem;
    min-height: 32px;
    padding: 5px 8px;
    color: #ffffff;
}

.admin-sidebar-link.admin-sidebar-link--child svg:first-child {
    width: 15px;
    height: 15px;
}

.admin-sidebar-link.admin-sidebar-link--child:hover {
    color: var(--brand-primary, #000);
}

.admin-sidebar-link.admin-sidebar-link--child.active {
    color: var(--brand-primary-darker, #000);
    font-weight: 600;
}

/* Child that is also a parent (Accounts button) — restore caret column */
.admin-sidebar-link.admin-sidebar-link--child.admin-sidebar-link--parent {
    grid-template-columns: 15px 1fr 14px;
}

/* Collapsed: hide all submenus */
.sidebar-collapsed .admin-sidebar-submenu { display: none; }

@media (max-width: 991.98px) {
    .admin-sidebar {
        transform: translateX(-105%);
        transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .admin-sidebar-open .admin-sidebar {
        transform: translateX(0);
    }

    .admin-main {
        margin-left: 0;
        padding-top: 72px;
    }

    .admin-sidebar-toggle {
        position: fixed;
        top: 14px;
        left: 14px;
        z-index: 1055;
        width: 40px;
        height: 40px;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border: 1px solid rgba(17, 24, 39, 0.1);
        border-radius: 9px;
        background: #fff;
        box-shadow: 0 2px 12px rgba(17, 24, 39, 0.1);
    }

    .admin-sidebar-toggle span {
        width: 16px;
        height: 2px;
        border-radius: 99px;
        background: #4b0082;
        transition: background-color 0.15s ease;
    }

    .admin-sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 1050;
        background: rgba(15, 23, 42, 0.4);
        backdrop-filter: blur(2px);
    }

    .admin-sidebar-open .admin-sidebar-overlay {
        display: block;
    }
}