/* ==================================================================
   MODERN SIDEBAR NAVIGATION - Admin Console Style
================================================================== */

/* Sidebar Container */
#sidebar {
    width: 260px;
    position: fixed;
    top: 0; /* Start from top */
    left: 0;
    height: 100vh; /* Full viewport height */
    z-index: 998; /* Below header (999) but above content */
    background: var(--card-background, #FFFFFF);
    color: var(--text-primary, #1F2428);
    transition: all 0.3s ease;
    overflow-y: auto;
    overflow-x: hidden;
    /* Remove box shadow to unify with header */
    border-right: 1px solid var(--border-color, #E9ECEF);
    display: flex;
    flex-direction: column;
    visibility: visible;
    opacity: 1;
}

/* Collapsed State */
#sidebar.collapsed {
    width: 70px;
    overflow-x: visible; /* Allow tooltips to show outside sidebar */
}

/* Ensure menu items don't clip tooltips when collapsed */
#sidebar.collapsed .sidebar-menu-item {
    overflow: visible;
}

#sidebar.collapsed .sidebar-link {
    overflow: visible;
}

/* Mobile: Hidden by default, slides in when active */
@media (max-width: 991px) {
    #sidebar {
        top: 0;
        height: 100vh;
        height: 100dvh;
        left: -100%;
        z-index: 1001;
        width: 100%;
        max-width: 100%;
        transition: left 0.3s ease;
    }

    #sidebar.active {
        left: 0;
        width: 100%;
        max-width: 100%;
    }

    #sidebar.collapsed {
        width: 100%;
        max-width: 100%;
        top: 0;
        height: 100vh;
        height: 100dvh;
        left: -100%;
    }
    
    #sidebar.collapsed.active {
        left: 0;
        width: 100%;
        max-width: 100%;
    }
    
    /* On mobile, reset header */
    .sidebar-header {
        margin-top: 0;
        height: auto;
        min-height: 56px;
        padding: 0;
        position: relative;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: visible;
    }

    .sidebar-header-inner {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        min-height: 0;
        padding: 0;
    }

    .sidebar-header-top {
        width: 100%;
        height: 56px;
        min-height: 56px;
        padding: 0 48px 0 16px;
        box-sizing: border-box;
    }

    .sidebar-header-context {
        display: block !important;
        width: 100%;
        padding: 0 12px 10px;
        box-sizing: border-box;
    }
    
    /* On mobile, menu starts below brand bar */
    .sidebar-menu {
        margin-top: 0;
        padding-top: 8px;
    }
    
    /* Hide desktop collapse on mobile */
    #sidebar.active .sidebar-toggle-btn {
        display: none !important;
    }
    
    /* Show mobile close button when sidebar is open */
    #sidebar.active .sidebar-close-btn {
        display: flex !important;
    }
    
    /* Hide mobile close button when sidebar is closed */
    #sidebar:not(.active) .sidebar-close-btn {
        display: none !important;
    }
    
    .sidebar-close-btn {
        position: absolute;
        top: 28px;
        right: 14px;
        transform: translateY(-50%);
    }
    
    .restaurant-name-text {
        font-size: 16px;
        font-weight: 700;
        line-height: 1.2;
    }
}

/* Sidebar brand bar — restaurant name + collapse */
.sidebar-header {
    flex-shrink: 0;
    height: auto;
    min-height: 70px;
    margin-top: 0;
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 10;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    overflow: visible;
}

.sidebar-header-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    height: auto;
    min-height: 70px;
    padding: 0;
}

.sidebar-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 70px;
    height: 70px;
    padding: 0 14px 0 16px;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Restaurant name / logo brand */
.sidebar-restaurant-name {
    position: static;
    flex: 1;
    min-width: 0;
    max-width: calc(100% - 36px);
    display: flex;
    align-items: center;
    z-index: auto;
    overflow: hidden;
}

.sidebar-restaurant-logo-wrap {
    flex: 1;
    min-width: 0;
    max-width: 168px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}

.restaurant-name-text {
    font-size: 15px;
    font-weight: 700;
    color: #002359;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    letter-spacing: -0.2px;
    line-height: 1.3;
}

.restaurant-name-text:hover {
    color: #002359;
}

.sidebar-restaurant-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: left center;
    flex-shrink: 1;
}

/* Hide name fallback while logo is visible (shown via onerror if logo fails) */
.sidebar-restaurant-name-fallback {
    display: none;
}

/* Hide restaurant name text when collapsed; keep logo if present */
#sidebar.collapsed .sidebar-restaurant-name {
    display: flex;
    justify-content: center;
    flex: 0;
}

#sidebar.collapsed .restaurant-name-text,
#sidebar.collapsed .sidebar-restaurant-name-fallback {
    display: none;
}

#sidebar.collapsed .sidebar-restaurant-logo-wrap {
    max-width: 40px;
    height: 40px;
    justify-content: center;
}

#sidebar.collapsed .sidebar-restaurant-logo {
    max-width: 100%;
    max-height: 100%;
}

#sidebar:not(.collapsed) .sidebar-restaurant-name:not(:has(.sidebar-restaurant-logo)) {
    flex: 1;
}

#sidebar.collapsed .sidebar-header-inner {
    justify-content: center;
    min-height: 70px;
    height: 70px;
}

#sidebar.collapsed .sidebar-header-top {
    justify-content: center;
    padding: 0 8px;
    width: 100%;
}

@media (min-width: 992px) {
    .sidebar-header {
        height: 70px;
        min-height: 70px;
    }

    .sidebar-header-inner {
        flex-direction: row;
        align-items: center;
        height: 70px;
        min-height: 70px;
        padding: 0 14px 0 16px;
    }

    .sidebar-header-top {
        flex: 1;
        min-width: 0;
        height: 100%;
        min-height: 0;
        padding: 0;
    }
}

#sidebar.collapsed .sidebar-header {
    min-height: 70px;
    height: 70px;
    margin-top: 0;
    padding: 0;
}

/* Collapse toggle */
.sidebar-toggle-btn {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #6b7280;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    border-radius: 6px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    box-shadow: none;
    position: static;
    margin: 0;
    visibility: visible !important;
    opacity: 1 !important;
}

.sidebar-toggle-btn:hover {
    background: #f3f4f6;
    color: #002359;
    border-color: #d1d5db;
    box-shadow: none;
    transform: none;
}

.sidebar-toggle-btn:active {
    background: #eef1f6;
    transform: none;
    box-shadow: none;
}

.sidebar-toggle-btn i {
    transition: transform 0.2s ease;
    line-height: 1;
}

/* Hide button on mobile - use mobile menu toggle instead */
@media (max-width: 991px) {
    .sidebar-toggle-btn {
        display: none !important;
    }
    
    .sidebar-close-btn {
        display: none !important;
        background: transparent;
        border: none;
        color: #6b7280;
        font-size: 20px;
        cursor: pointer;
        padding: 0;
        border-radius: 6px;
        transition: background 0.15s ease, color 0.15s ease;
        width: 32px;
        height: 32px;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        z-index: 1002;
        line-height: 1;
    }
    
    .sidebar-close-btn:hover {
        background: #f3f4f6;
        color: #002359;
        transform: translateY(-50%);
    }
    
    .sidebar-close-btn:active {
        background: #eef1f6;
    }
}

@media (min-width: 992px) {
    .sidebar-toggle-btn {
        display: flex !important;
    }
    
    .sidebar-close-btn {
        display: none !important;
    }
}

/* Sidebar Menu */
.sidebar-menu {
    flex: 1;
    padding: 8px 0 12px;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
}

/* When collapsed, allow tooltips to overflow */
#sidebar.collapsed .sidebar-menu {
    overflow-x: visible;
}

.sidebar-menu-item {
    margin: 2px 12px;
    position: relative;
}

.sidebar-menu-item:first-child {
    margin-top: 0; /* Remove top margin from first item */
}

/* Ensure first menu item starts immediately after header */
.sidebar-menu > .sidebar-menu-item:first-child {
    margin-top: 0;
}

.sidebar-menu > .sidebar-menu-item:first-child > .sidebar-link {
    margin-top: 0;
    padding-top: 8px; /* Small top padding for first item */
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    color: #3d4450;
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
    font-size: 13.5px;
    font-weight: 500;
    position: relative;
    white-space: nowrap;
}

.sidebar-link i {
    font-size: 16px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    color: #6b7280;
    transition: color 0.15s ease;
}

/* Active icon color handled in active link rules below */

.sidebar-link-text {
    transition: opacity 0.3s ease;
    flex: 1;
}

.sidebar-badge {
    margin-left: auto;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    border-radius: 4px;
    padding: 1px 6px;
    line-height: 1.4;
    flex-shrink: 0;
}

#sidebar.collapsed .sidebar-badge {
    display: none;
}

#sidebar.collapsed .sidebar-link-text {
    display: none;
}

/* Center icon in collapsed state */
#sidebar.collapsed .sidebar-link {
    justify-content: center;
    padding: 12px;
    gap: 0; /* Remove gap to center icon */
}

#sidebar.collapsed .sidebar-link i {
    margin: 0 auto;
    width: auto;
}

.sidebar-link:hover {
    background: #f3f4f6;
    color: #1f2937;
}

.sidebar-link:hover i {
    color: #374151;
}

/* Active — subtle accent, no gradient */
.sidebar-menu-item.active > .sidebar-link:active,
.sidebar-link.active:active,
.sidebar-menu-item.active > .sidebar-link:focus,
.sidebar-link.active:focus {
    background: #eef1f6 !important;
    color: #002359 !important;
    outline: none;
}

.sidebar-menu-item.active > .sidebar-link:active i,
.sidebar-link.active:active i,
.sidebar-menu-item.active > .sidebar-link:focus i,
.sidebar-link.active:focus i {
    color: #002359 !important;
}

.sidebar-menu-item.active > .sidebar-link,
.sidebar-link.active {
    background: #eef1f6 !important;
    color: #002359 !important;
    box-shadow: none !important;
    font-weight: 600;
}

.sidebar-menu-item.active > .sidebar-link::before,
.sidebar-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    bottom: 7px;
    width: 3px;
    background: #F5C21A;
    border-radius: 0 2px 2px 0;
}

.sidebar-menu-item.active > .sidebar-link i,
.sidebar-link.active i,
.sidebar-menu-item.active > .sidebar-link i.fa,
.sidebar-link.active i.fa,
.sidebar-menu-item.active > .sidebar-link i[class*="fa-"],
.sidebar-link.active i[class*="fa-"] {
    color: #002359 !important;
}

.sidebar-menu-item.active > .sidebar-link:hover,
.sidebar-link.active:hover {
    background: #e8ecf2 !important;
    color: #002359 !important;
}

.sidebar-menu-item.active > .sidebar-link:hover i,
.sidebar-link.active:hover i {
    color: #002359 !important;
}

/* Dropdown Menu */
.sidebar-dropdown {
    position: relative;
}

.sidebar-dropdown-toggle {
    position: relative;
}

/* Ensure dropdown doesn't clip submenu when collapsed */
#sidebar.collapsed .sidebar-dropdown {
    overflow: visible;
}

#sidebar.collapsed .sidebar-dropdown-toggle {
    overflow: visible;
}

/* Hide tooltip for dropdown toggles - submenu shows instead */
#sidebar.collapsed .sidebar-dropdown-toggle .sidebar-tooltip {
    display: none !important;
}

#sidebar.collapsed .sidebar-dropdown-toggle {
    /* Ensure full visibility in collapsed state */
    padding-right: 12px;
}

.sidebar-dropdown-icon {
    margin-left: auto;
    font-size: 11px;
    color: #9ca3af;
    transition: transform 0.2s ease, color 0.15s ease;
    flex-shrink: 0;
}

#sidebar.collapsed .sidebar-dropdown-icon {
    display: none;
}

/* Rotate chevron when submenu is open */
.sidebar-dropdown.open > .sidebar-dropdown-toggle .sidebar-dropdown-icon,
.sidebar-dropdown-toggle[aria-expanded="true"] .sidebar-dropdown-icon {
    transform: rotate(180deg);
    color: #6b7280;
}

.sidebar-dropdown.open > .sidebar-dropdown-toggle {
    color: #002359;
    font-weight: 600;
    background: #f8f9fb;
}

.sidebar-dropdown.open > .sidebar-dropdown-toggle i:not(.sidebar-dropdown-icon) {
    color: #002359;
}

.sidebar-submenu {
    margin: 2px 0 6px 0;
    margin-left: 22px;
    padding: 2px 0 4px 10px;
    background: transparent;
    border-radius: 0;
    overflow: hidden;
    border-left: 1px solid #e5e7eb;
}

/* Bootstrap 3 (.in) and Bootstrap 4+ (.show) */
.sidebar-submenu.in,
.sidebar-submenu.show {
    display: block !important;
}

#sidebar.collapsed .sidebar-submenu {
    position: fixed !important; /* Use fixed to avoid clipping */
    left: calc(70px + 10px) !important; /* 70px sidebar width + 10px gap */
    top: 0; /* Will be set dynamically by JavaScript */
    min-width: 240px;
    max-width: 240px;
    background: var(--card-background, #FFFFFF);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1005 !important; /* Above header, button, and tooltips */
    border-radius: 8px;
    padding: 8px 0;
    display: none !important; /* Hidden by default */
    max-height: 420px; /* Max height - content will scroll if exceeds */
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Hide horizontal scroll */
    margin-top: 0; /* Remove top margin to align with toggle */
}

/* Ensure submenu is visible above everything when shown */
#sidebar.collapsed .sidebar-submenu.show-on-hover {
    display: block !important; /* Show when hovered in collapsed state */
    z-index: 1005 !important;
}

/* Invisible bridge across the gap between sidebar and flyout (collapsed hover) */
#sidebar.collapsed .sidebar-submenu.show-on-hover::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 0;
    width: 12px;
    height: 100%;
    background: transparent;
}

.sidebar-submenu li {
    margin: 0;
}

.sidebar-submenu-heading {
    padding: 10px 12px 4px;
    font-size: 10px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    cursor: default;
    user-select: none;
    pointer-events: none;
}

.sidebar-submenu-heading:first-child {
    padding-top: 4px;
}

.sidebar-submenu-divider {
    height: 1px;
    margin: 6px 12px;
    background: #e5e7eb;
    pointer-events: none;
}

#sidebar.collapsed .sidebar-submenu-heading {
    padding-left: 16px;
}

.sidebar-submenu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    color: #4b5563;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
    border-radius: 5px;
    border-left: none;
}

/* Ensure submenu links always show text, even when sidebar is collapsed */
.sidebar-submenu-link .sidebar-link-text {
    display: inline-block;
    white-space: nowrap;
}

#sidebar.collapsed .sidebar-submenu-link {
    padding-left: 16px;
}

/* Show both icon and text in submenu when collapsed - override the general collapsed rule */
#sidebar.collapsed .sidebar-submenu-link .sidebar-link-text {
    display: inline-block !important; /* Always show text in submenu */
    opacity: 1 !important;
    visibility: visible !important;
}

/* Hide tooltips for submenu links */
#sidebar.collapsed .sidebar-submenu-link .sidebar-tooltip {
    display: none !important;
}

.sidebar-submenu-link i {
    font-size: 14px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    display: inline-block;
    color: #9ca3af;
}

.sidebar-submenu-link:hover:not(.active) {
    background: #f3f4f6;
    color: #1f2937;
}

.sidebar-submenu-link:hover:not(.active) i {
    color: #6b7280;
}

.sidebar-submenu-link.active,
.sidebar-submenu li.active .sidebar-submenu-link,
.sidebar-submenu li.active > .sidebar-submenu-link,
.sidebar-submenu li.active a.sidebar-submenu-link {
    background: rgba(245, 194, 26, 0.14) !important;
    color: #002359 !important;
    border-left: none !important;
    box-shadow: none !important;
    font-weight: 600;
}

.sidebar-submenu-link.active i,
.sidebar-submenu li.active .sidebar-submenu-link i,
.sidebar-submenu li.active > .sidebar-submenu-link i,
.sidebar-submenu li.active a.sidebar-submenu-link i {
    color: #002359 !important;
}

.sidebar-submenu-link.active:hover,
.sidebar-submenu li.active .sidebar-submenu-link:hover,
.sidebar-submenu li.active > .sidebar-submenu-link:hover,
.sidebar-submenu li.active a.sidebar-submenu-link:hover {
    background: rgba(245, 194, 26, 0.2) !important;
    color: #002359 !important;
}

/* Parent dropdown when a child route is active — keep sober, not full yellow */
.sidebar-dropdown.active > .sidebar-link {
    background: #f8f9fb !important;
    color: #002359 !important;
    box-shadow: none !important;
    font-weight: 600;
}

.sidebar-dropdown.active > .sidebar-link i,
.sidebar-dropdown.active > .sidebar-link i.fa,
.sidebar-dropdown.active > .sidebar-link i[class*="fa-"] {
    color: #002359 !important;
}

.sidebar-dropdown.active > .sidebar-link .sidebar-dropdown-icon {
    color: #6b7280;
}

/* Tooltip for collapsed state */
.sidebar-tooltip {
    position: fixed !important; /* Use fixed to avoid clipping by parent overflow */
    left: calc(70px + 10px) !important; /* 70px sidebar width + 10px gap */
    top: auto;
    transform: translateY(-50%);
    background: var(--text-primary, #1F2428);
    color: var(--text-light, #FFFFFF);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    white-space: nowrap;
    z-index: 1004 !important; /* Above submenu and header */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    margin-left: 5px; /* Add small gap */
}

/* When sidebar is expanded, tooltip should be relative to the link */
#sidebar:not(.collapsed) .sidebar-tooltip {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
}

.sidebar-tooltip::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: var(--text-primary, #1F2428);
}

/* Sidebar Footer */
.sidebar-footer {
    padding: 20px;
    border-top: 1px solid var(--border-color, #E9ECEF);
    background: var(--page-background, #FFFFFF);
    flex-shrink: 0;
}

#sidebar.collapsed .sidebar-footer {
    display: none;
}

.sidebar-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-user-info i {
    font-size: 32px;
    color: var(--text-secondary, #4B5563);
    flex-shrink: 0;
}

.sidebar-user-details {
    flex: 1;
    min-width: 0;
}

.sidebar-user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #1F2428);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sidebar header context — outlet panel (mobile drawer) */
.sidebar-header-context {
    display: none;
    box-sizing: border-box;
    max-width: 100%;
}

.sidebar-outlet-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    background: #f7f7f5;
    border: 1px solid var(--border-color, #E9ECEF);
    border-radius: 10px;
    min-width: 0;
}

.sidebar-outlet-panel__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-outlet-panel__label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
    line-height: 1.2;
}

.sidebar-outlet-panel__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary, #1F2428);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-outlet-panel__switch {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 10px;
    border: 1px solid rgba(245, 194, 26, 0.45);
    border-radius: 8px;
    background: #fff;
    color: #8a6100;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.sidebar-outlet-panel__switch:hover {
    background: #fff8e6;
    border-color: rgba(245, 194, 26, 0.65);
}

.sidebar-outlet-panel__switch .fa {
    font-size: 11px;
    color: #d4820a;
}

/* Sidebar footer — mobile user + logout strip */
.sidebar-footer-mobile {
    display: none;
}

.sidebar-footer-mobile__user {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.sidebar-footer-mobile__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(145deg, #f5c21a, #e5a800);
    color: #1f2428;
    font-size: 14px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-footer-mobile__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary, #1F2428);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-footer-mobile__logout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #b42318;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.sidebar-footer-mobile__logout:hover {
    background: #fef2f2;
    color: #991b1b;
    text-decoration: none;
}

@media (max-width: 991px) {
    .sidebar-header {
        height: auto;
        min-height: 56px;
        overflow: visible;
    }

    #sidebar.collapsed .sidebar-header {
        height: auto;
        min-height: 56px;
    }

    #sidebar.collapsed .sidebar-header-inner {
        height: auto;
        min-height: 0;
    }

    .sidebar-header-context {
        border-bottom: none;
    }

    .sidebar-footer {
        padding: 12px 16px 16px;
        margin-top: auto;
        background: var(--card-background, #fff);
        border-top: 1px solid var(--border-color, #E9ECEF);
    }

    .sidebar-footer-compact {
        display: none;
    }

    .sidebar-footer-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    #sidebar.collapsed .sidebar-footer {
        display: block;
    }
}

@media (min-width: 992px) {
    .sidebar-header-context {
        display: none !important;
    }

    .sidebar-footer-mobile {
        display: none !important;
    }

    .sidebar-footer-compact {
        display: block;
    }
}

/* Overlay */
.overlay {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
}

.overlay.show {
    display: block;
}

/* Mobile Menu Toggle Button (inside .header-mobile-actions on mobile) */
.mobile-menu-toggle {
    position: relative;
    z-index: 1;
    background: transparent;
    border: none;
    padding: 0;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    cursor: pointer;
    display: none;
    color: var(--text-primary, #1F2428);
    transition: background 0.2s ease;
    flex-shrink: 0;
    line-height: 1;
}

.mobile-menu-toggle .fa {
    font-size: 20px;
    line-height: 1;
    pointer-events: none;
}

.mobile-menu-toggle:hover {
    background: var(--page-background, #FFFFFF);
    box-shadow: none;
}

@media (max-width: 991px) {
    .mobile-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Hide header hamburger when sidebar drawer is open */
    body.sidebar-drawer-open .mobile-menu-toggle {
        visibility: hidden;
        pointer-events: none;
    }
}

/* Legacy icon-bar markup (kept for backwards compatibility) */
.mobile-menu-toggle .icon-bar {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 1px;
    background: var(--text-primary, #1F2428);
    margin: 3px 0;
}

/* Scrollbar Styling */
#sidebar::-webkit-scrollbar {
    width: 6px;
}

#sidebar::-webkit-scrollbar-track {
    background: transparent;
}

#sidebar::-webkit-scrollbar-thumb {
    background: var(--border-color, #E9ECEF);
    border-radius: 3px;
}

#sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary, #4B5563);
}

/* Scrollbar styling for collapsed submenu */
#sidebar.collapsed .sidebar-submenu::-webkit-scrollbar {
    width: 6px;
}

#sidebar.collapsed .sidebar-submenu::-webkit-scrollbar-track {
    background: transparent;
}

#sidebar.collapsed .sidebar-submenu::-webkit-scrollbar-thumb {
    background: var(--border-color, #E9ECEF);
    border-radius: 3px;
}

#sidebar.collapsed .sidebar-submenu::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary, #4B5563);
}

/* Content adjustment when sidebar is visible */
@media (min-width: 992px) {
    /* Default: sidebar is visible (260px) */
    #site-content {
        margin-left: 260px;
        transition: margin-left 0.3s ease;
    }
    
    body.sidebar-visible #site-content {
        margin-left: 260px;
        transition: margin-left 0.3s ease;
    }

    body.sidebar-collapsed #site-content {
        margin-left: 70px !important;
        transition: margin-left 0.3s ease;
    }
    
    /* Fallback: if body classes aren't set yet, check localStorage via inline style */
    body:not(.sidebar-collapsed):not(.sidebar-visible) #site-content {
        margin-left: 260px;
    }
    
    /* Footer adjustment when sidebar is visible - match content margin */
    #footer {
        margin-left: 260px;
        transition: margin-left 0.3s ease;
    }
    
    body.sidebar-visible #footer {
        margin-left: 260px;
        transition: margin-left 0.3s ease;
    }

    body.sidebar-collapsed #footer {
        margin-left: 70px !important;
        transition: margin-left 0.3s ease;
    }
    
    /* Fallback: if body classes aren't set yet, check localStorage via inline style */
    body:not(.sidebar-collapsed):not(.sidebar-visible) #footer {
        margin-left: 260px;
    }
}

@media (max-width: 991px) {
    /* On mobile, content should not have left margin */
    #site-content {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    body.sidebar-visible #site-content,
    body.sidebar-collapsed #site-content {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* On mobile, footer should not have left margin */
    #footer {
        margin-left: 0 !important;
    }
    
    body.sidebar-visible #footer,
    body.sidebar-collapsed #footer {
        margin-left: 0 !important;
    }
    
    /* On mobile, header should span full width */
    .app-header-top {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }

    body {
        overflow-x: hidden;
    }
}

/* Legacy support - keep old dismiss button hidden */
#dismiss {
    display: none;
}