/* Feature Gating - Lock Icons & Locked Menu Items */

/* ============================================================
   Lock Icon on LEFT side of menu items
   ============================================================ */

/* Lock icon styling - appears BEFORE the menu icon */
.app-sidebar .side-menu__item .feature-lock-icon {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-inline-end: 0.5rem;
    color: var(--bs-success) !important;
    align-items: center;
    justify-content: center;
}

/* Ensure lock icon shows in child menus */
.app-sidebar .slide-menu .side-menu__item .feature-lock-icon {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 0.85rem;
    margin-inline-end: 0.4rem;
}

/* ============================================================
   Locked Menu Item Styling
   ============================================================ */

/* Style for locked menu items - clickable for upgrade */
.app-sidebar .side-menu__item.feature-locked {
    cursor: pointer !important;
}

/* Dim the text slightly to indicate locked state */
.app-sidebar .side-menu__item.feature-locked .side-menu__label,
.app-sidebar .side-menu__item.feature-locked .side-menu__icon {
    opacity: 0.6;
}

/* Hover state for locked items - show as interactive */
.app-sidebar .side-menu__item.feature-locked:hover {
    background-color: rgba(var(--success-rgb), 0.1) !important;
}

.app-sidebar .side-menu__item.feature-locked:hover .feature-lock-icon {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* ============================================================
   Collapsed Sidebar - Icon Only Mode
   ============================================================ */

/* In collapsed mode, hide lock icon (only show main icon) */
[data-toggled="icon-overlay-close"]:not([data-icon-overlay="open"]) .app-sidebar .side-menu__item .feature-lock-icon,
[data-toggled="detached-close"]:not([data-icon-overlay="open"]) .app-sidebar .side-menu__item .feature-lock-icon,
[data-toggled="icon-text-close"]:not([data-icon-text="open"]) .app-sidebar .side-menu__item .feature-lock-icon,
[data-toggled="icon-click-closed"] .app-sidebar .main-menu > .slide > .side-menu__item .feature-lock-icon,
[data-toggled="icon-hover-closed"] .app-sidebar .main-menu > .slide > .side-menu__item .feature-lock-icon {
    display: none !important;
}

/* Show lock in expanded state */
[data-toggled="icon-overlay-close"][data-icon-overlay="open"] .app-sidebar .side-menu__item .feature-lock-icon,
[data-toggled="detached-close"][data-icon-overlay="open"] .app-sidebar .side-menu__item .feature-lock-icon,
[data-toggled="icon-text-close"][data-icon-text="open"] .app-sidebar .side-menu__item .feature-lock-icon {
    display: inline-flex !important;
}

/* ============================================================
   Submenu Arrow Positioning
   ============================================================ */

/* Keep the dropdown arrow in reserved space so badges never sit under it. */
.app-sidebar .side-menu__angle {
    inset-inline-end: 0.75rem !important;
    margin-inline-start: 0.5rem;
    flex: 0 0 auto;
}

/* ============================================================
   Sidebar Width — Responsive via CSS Custom Property

   Default: 15rem (theme default, no badges)
   When .has-upgrade-badges: fluid 16rem–18rem via clamp()

   All sidebar-related width references use --sidebar-w so a
   single variable controls sidebar, header, content offset.

   Breakpoints follow Bootstrap 5:
     < 992px  — sidebar is off-canvas (mobile/tablet), no override
     ≥ 992px  — sidebar visible, apply --sidebar-w
     ≥ 1400px — wider screens get more room for badges
   ============================================================ */

:root {
    --sidebar-w: 15rem;
}

html.has-upgrade-badges {
    --sidebar-w: clamp(17rem, 14rem + 3vw, 20rem);
}

.has-upgrade-badges-expanded .app-sidebar .side-menu__item {
    min-width: 0;
}

.has-upgrade-badges-expanded .app-sidebar .slide.has-sub > .side-menu__item {
    padding-inline-end: 2.5rem;
}

/* Prevent badge clipping — label shrinks, badge never does */
.has-upgrade-badges-expanded .app-sidebar .side-menu__label {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 0;
}

.has-upgrade-badges-expanded .app-sidebar .badge {
    flex-shrink: 0;
    white-space: nowrap;
}

@media (min-width: 992px) {
    html.has-upgrade-badges-expanded .app-sidebar.has-upgrade-badges,
    html.has-upgrade-badges-expanded .app-sidebar.has-upgrade-badges .main-sidebar {
        width: var(--sidebar-w) !important;
    }
    html.has-upgrade-badges-expanded .app-sidebar.has-upgrade-badges .main-sidebar-header {
        width: var(--sidebar-w) !important;
    }
    html.has-upgrade-badges-expanded .app-content {
        margin-inline-start: var(--sidebar-w) !important;
    }
    html.has-upgrade-badges-expanded .app-header {
        padding-inline-start: var(--sidebar-w) !important;
    }
    html.has-upgrade-badges-expanded[data-nav-layout=vertical] .footer {
        padding-inline-start: var(--sidebar-w) !important;
    }
}

/* Mobile / tablet — sidebar is off-canvas, full viewport overlay */
@media (max-width: 991.98px) {
    .app-sidebar.has-upgrade-badges {
        width: min(var(--sidebar-w), calc(100vw - 1rem)) !important;
        max-width: calc(100vw - 1rem);
    }

    .app-sidebar.has-upgrade-badges .side-menu__item {
        min-width: 0;
    }

    .app-sidebar.has-upgrade-badges .slide.has-sub > .side-menu__item {
        padding-inline-end: 2.5rem;
    }

    .app-sidebar.has-upgrade-badges .side-menu__label {
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        flex: 1 1 0;
    }

    .app-sidebar.has-upgrade-badges .badge {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

/* ============================================================
   Dynamic Sidebar Width

   JS sets --sidebar-w from the visible menu branch. Desktop pushes
   the content/header over; mobile keeps the sidebar off-canvas and
   caps it to the viewport.
   ============================================================ */

html.has-dynamic-sidebar,
html.has-upgrade-badges {
    --sidebar-w: clamp(16rem, 14rem + 4vw, 22rem);
}

html.has-dynamic-sidebar-expanded .app-sidebar .side-menu__item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    width: 100%;
}

html.has-dynamic-sidebar-expanded .app-sidebar .slide.has-sub > .side-menu__item {
    padding-inline-end: 2.75rem !important;
}

/* The label is the only flexible part; badges and icons keep their full width. */
html.has-dynamic-sidebar-expanded .app-sidebar .side-menu__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}

html.has-dynamic-sidebar-expanded .app-sidebar .side-menu__icon,
html.has-dynamic-sidebar-expanded .app-sidebar .side-menu__item > i:not(.side-menu__angle) {
    flex: 0 0 auto;
}

html.has-dynamic-sidebar-expanded .app-sidebar .badge {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (min-width: 992px) {
    html.has-dynamic-sidebar-expanded[data-nav-layout=vertical] .app-sidebar.has-dynamic-sidebar,
    html.has-dynamic-sidebar-expanded[data-nav-layout=vertical] .app-sidebar.has-dynamic-sidebar .main-sidebar {
        width: var(--sidebar-w) !important;
    }

    html.has-dynamic-sidebar-expanded[data-nav-layout=vertical] .app-sidebar.has-dynamic-sidebar .main-sidebar-header {
        width: var(--sidebar-w) !important;
    }

    html.has-dynamic-sidebar-expanded[data-nav-layout=vertical] .app-content {
        margin-inline-start: var(--sidebar-w) !important;
    }

    html.has-dynamic-sidebar-expanded[data-nav-layout=vertical] .app-header {
        padding-inline-start: var(--sidebar-w) !important;
    }

    html.has-dynamic-sidebar-expanded[data-nav-layout=vertical] .footer {
        padding-inline-start: var(--sidebar-w) !important;
    }
}

/* Mobile/tablet: use the measured width, capped to the viewport. */
@media (max-width: 991.98px) {
    html.has-dynamic-sidebar-expanded .app-sidebar.has-dynamic-sidebar,
    html.has-dynamic-sidebar-expanded .app-sidebar.has-dynamic-sidebar .main-sidebar {
        width: min(var(--sidebar-w), calc(100vw - 1rem)) !important;
        max-width: calc(100vw - 1rem);
    }

    html.has-dynamic-sidebar-expanded .app-sidebar.has-dynamic-sidebar .side-menu__item {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }

    html.has-dynamic-sidebar-expanded .app-sidebar.has-dynamic-sidebar .slide.has-sub > .side-menu__item {
        padding-inline-end: 2.75rem !important;
    }

    html.has-dynamic-sidebar-expanded .app-sidebar.has-dynamic-sidebar .side-menu__label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
        flex: 1 1 auto;
    }

    html.has-dynamic-sidebar-expanded .app-sidebar.has-dynamic-sidebar .badge {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* ============================================================
   Sidebar Toggle Button - Arrow Icons
   ============================================================ */

/* Hide the old span-based hamburger/X completely */
.animated-arrow span,
.animated-arrow span:before,
.animated-arrow span:after {
    display: none !important;
}

/* Base icon styling for sidebar toggle */
.animated-arrow .sidebar-expand-icon,
.animated-arrow .sidebar-collapse-icon {
    font-size: 1.25rem;
    line-height: 1;
    color: var(--header-prime-color);
}

/* Default state (sidebar open): show collapse arrow, hide expand */
.animated-arrow .sidebar-collapse-icon {
    display: inline-block;
}
.animated-arrow .sidebar-expand-icon {
    display: none;
}

/* Closed states: show expand arrow, hide collapse */
[data-toggled="close-menu-close"] .animated-arrow .sidebar-collapse-icon,
[data-toggled="detached-close"] .animated-arrow .sidebar-collapse-icon,
[data-toggled="icon-click-closed"] .animated-arrow .sidebar-collapse-icon,
[data-toggled="icon-hover-closed"] .animated-arrow .sidebar-collapse-icon,
[data-toggled="icon-overlay-close"] .animated-arrow .sidebar-collapse-icon,
[data-toggled="icon-text-close"] .animated-arrow .sidebar-collapse-icon,
[data-toggled="menu-click-closed"] .animated-arrow .sidebar-collapse-icon,
[data-toggled="menu-hover-closed"] .animated-arrow .sidebar-collapse-icon,
[data-toggled="close"] .animated-arrow .sidebar-collapse-icon {
    display: none;
}

[data-toggled="close-menu-close"] .animated-arrow .sidebar-expand-icon,
[data-toggled="detached-close"] .animated-arrow .sidebar-expand-icon,
[data-toggled="icon-click-closed"] .animated-arrow .sidebar-expand-icon,
[data-toggled="icon-hover-closed"] .animated-arrow .sidebar-expand-icon,
[data-toggled="icon-overlay-close"] .animated-arrow .sidebar-expand-icon,
[data-toggled="icon-text-close"] .animated-arrow .sidebar-expand-icon,
[data-toggled="menu-click-closed"] .animated-arrow .sidebar-expand-icon,
[data-toggled="menu-hover-closed"] .animated-arrow .sidebar-expand-icon,
[data-toggled="close"] .animated-arrow .sidebar-expand-icon {
    display: inline-block;
}