/* ============================================
   SIDEBAR STYLES
   ============================================ */

.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    z-index: var(--z-sidebar);
    transition: width var(--duration-normal) var(--ease-smooth),
                transform var(--duration-normal) var(--ease-smooth);
    overflow: hidden;
}

/* === Sidebar Header === */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-4);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    min-height: 68px;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.brand-icon-sm {
    width: 36px;
    height: 36px;
    color: var(--primary-400);
    flex-shrink: 0;
}

.brand-text {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    transition: opacity var(--duration-fast);
}

.sidebar-toggle {
    color: var(--gray-400);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    transition: all var(--duration-fast);
    display: none;
}

.sidebar-toggle:hover {
    background: var(--sidebar-hover);
    color: #fff;
}

.sidebar-toggle svg { width: 20px; height: 20px; }

/* === Navigation === */
.sidebar-nav {
    flex: 1;
    padding: var(--space-4) var(--space-3);
    overflow-y: auto;
    overflow-x: hidden;
}

.nav-section {
    margin-bottom: var(--space-6);
}

.nav-section-title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0 var(--space-3);
    margin-bottom: var(--space-2);
    white-space: nowrap;
    overflow: hidden;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3);
    margin-bottom: 2px;
    border-radius: var(--radius-md);
    color: var(--sidebar-text);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-smooth);
    white-space: nowrap;
    position: relative;
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.nav-item:hover {
    background: var(--sidebar-hover);
    color: #fff;
}

.nav-item.active {
    background: rgba(99, 102, 241, 0.15);
    color: var(--primary-400);
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--primary-400);
    border-radius: 0 3px 3px 0;
}

.nav-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.7;
}

.nav-item.active svg { opacity: 1; }
.nav-item:hover svg { opacity: 1; }

.nav-item-text {
    transition: opacity var(--duration-fast);
}

.nav-item .nav-badge {
    margin-left: auto;
    background: var(--danger-500);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    min-width: 20px;
    text-align: center;
}

/* === Sidebar Footer === */
.sidebar-footer {
    padding: var(--space-4);
    border-top: 1px solid rgba(255,255,255,0.08);
}

.user-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

.user-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.user-name {
    color: #fff;
    font-weight: 600;
    font-size: var(--font-size-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role {
    color: var(--gray-500);
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

.btn-logout {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    color: var(--gray-400);
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: all var(--duration-fast);
}

.btn-logout:hover {
    background: rgba(244, 63, 94, 0.15);
    color: var(--danger-400);
}

.btn-logout svg {
    width: 18px;
    height: 18px;
}

/* === Collapsed State === */
.sidebar.collapsed {
    width: var(--sidebar-collapsed);
}

.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-section-title,
.sidebar.collapsed .nav-item-text,
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .user-info,
.sidebar.collapsed .btn-logout span {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.sidebar.collapsed .sidebar-brand { justify-content: center; }
.sidebar.collapsed .nav-item { justify-content: center; padding: var(--space-3); }
.sidebar.collapsed .user-card { justify-content: center; }
.sidebar.collapsed .btn-logout { justify-content: center; }

/* === Mobile Overlay === */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-sidebar) - 1);
    backdrop-filter: blur(4px);
}

.sidebar-overlay.active { display: block; }

/* === Responsive === */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width);
    }
    .sidebar.mobile-open {
        transform: translateX(0);
    }
    .sidebar-toggle { display: block; }
    .mobile-menu-btn { display: flex !important; }
}

@media (min-width: 769px) {
    .mobile-menu-btn { display: none !important; }
}