/* ============================================
   SIDEBAR CORE TOKEN SYSTEM
   Version: 1.0.0
   Description: Immutable sidebar dimensions
   Dependencies: None (foundational)
   ============================================ */

@layer sidebar-foundation {
    :root {
        /* Sidebar Dimensional Constants */
        --sidebar-width-collapsed: var(--width-sidebar-collapsed, 4rem); /* Align with design tokens */
        --sidebar-width-expanded: 20rem; /* 320px */
        --sidebar-width-left-nav: 17.5rem; /* 280px */
        /* Ensure consistency across all pages */
        --sidebar-system-spacer: 1rem; /* Don't use --spacer */
        --sidebar-system-icon: 1.25rem; /* Don't use --icon-font-size */
    }

    /* Ensure sidebar nav icons render at canonical size regardless of icon pack defaults. */
    .sidebar .nav-sidebar .nav-link > i.ph,
    .sidebar .nav-sidebar .nav-link > i[class^="ph-"],
    .sidebar .nav-sidebar .nav-link > i[class*=" ph-"],
    .sidebar .nav-sidebar .nav-item-header > i.ph,
    .sidebar .nav-sidebar .nav-item-header > i[class^="ph-"],
    .sidebar .nav-sidebar .nav-item-header > i[class*=" ph-"] {
        font-size: var(--sidebar-system-icon);
        width: var(--sidebar-system-icon);
        min-width: var(--sidebar-system-icon);
        height: var(--sidebar-system-icon);
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Override theme's calc() approach globally */
    .sidebar-main-resized:not(.sidebar-main-unfold),
    .sidebar-secondary.sidebar-collapsed,
    .sidebar-end.sidebar-collapsed,
    [class*="sidebar-"][class*="collapsed"] {
        --sidebar-width: var(--sidebar-width-collapsed) !important;
        width: var(--sidebar-width-collapsed) !important;
        min-width: var(--sidebar-width-collapsed) !important;
        max-width: var(--sidebar-width-collapsed) !important;
    }

    /* Keep collapsed section marker icon (three dots) horizontally centered. */
    .sidebar-expand-lg.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-item-header > .sidebar-resize-show,
    .sidebar-expand.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-item-header > .sidebar-resize-show {
        display: flex !important;
        justify-content: center;
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}