/**
 * Sidebar Collapse/Expand Styles
 * Quản lý animation và styling cho sidebar có thể thu gọn/mở rộng
 */

/* ============================================
   VARIABLES - Biến CSS
   ============================================ */
:root {
    /* Widths */
    --sidebar-width-expanded: 256px;
    --sidebar-width-collapsed: 85px;
    
    /* Transitions */
    --sidebar-transition-duration: 300ms;
    --sidebar-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Colors */
    --sidebar-bg: #ffffff;
    --sidebar-hover-bg: #f3f4f6;
    --sidebar-active-bg: #eff6ff;
    --sidebar-active-text: #2563eb;
    --sidebar-text: #374151;
    --sidebar-border: #e5e7eb;
    
    /* Shadows */
    --sidebar-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

/* ============================================
   SIDEBAR CONTAINER
   ============================================ */
.sidebar-container {
    position: sticky;
    top: 0;
    height: 100vh;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    box-shadow: var(--sidebar-shadow);
    transition: width var(--sidebar-transition-duration) var(--sidebar-transition-timing);
    overflow: hidden;
    z-index: 30;
    flex-shrink: 0;
}

/* Expanded State */
.sidebar-container:not(.collapsed) {
    width: var(--sidebar-width-expanded);
}

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

/* ============================================
   SIDEBAR CONTENT
   ============================================ */
.sidebar-content {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
}

/* Custom Scrollbar */
.sidebar-content::-webkit-scrollbar {
    width: 6px;
}

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

.sidebar-content::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.sidebar-content::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ============================================
   BADGE - Parent Subsidy Type Display
   ============================================ */
.sidebar-badge {
    position: relative;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
    transition: all var(--sidebar-transition-duration) var(--sidebar-transition-timing);
    overflow: hidden;
}

/* Decorative background pattern */
.sidebar-badge::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.sidebar-badge-text {
    position: relative;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    transition: all var(--sidebar-transition-duration) var(--sidebar-transition-timing);
    display: block;
}

.sidebar-badge-text-full {
    display: block;
}

.sidebar-badge-text-short {
    display: none;
    font-size: 1.25rem;
    font-weight: 800;
}

/* Collapsed Badge - Show 2 first characters */
.sidebar-container.collapsed .sidebar-badge {
    padding: 0.75rem 0.5rem;
    border-radius: 12px;
}

.sidebar-container.collapsed .sidebar-badge-text-full {
    display: none;
}

.sidebar-container.collapsed .sidebar-badge-text-short {
    display: block;
}

/* ============================================
   NAVIGATION MENU
   ============================================ */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Menu Group */
.sidebar-menu-group {
    margin-bottom: 0.5rem;
}

.sidebar-menu-group-divider {
    height: 1px;
    background: var(--sidebar-border);
    margin: 1rem 0;
    transition: margin var(--sidebar-transition-duration) var(--sidebar-transition-timing);
}

.sidebar-container.collapsed .sidebar-menu-group-divider {
    margin: 0.5rem 0;
}

/* Menu Item */
.sidebar-menu-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    color: var(--sidebar-text);
    border-radius: 8px;
    transition: all 200ms ease;
    text-decoration: none;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}

.sidebar-menu-item:hover {
    background: var(--sidebar-hover-bg);
}

/* Active State */
.sidebar-menu-item.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    font-weight: 500;
}

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

/* Menu Icon */
.sidebar-menu-icon {
    width: 20px;
    height: 20px;
    margin-right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: margin var(--sidebar-transition-duration) var(--sidebar-transition-timing);
}

.sidebar-container.collapsed .sidebar-menu-icon {
    margin-right: 0;
}

/* Menu Text */
.sidebar-menu-text {
    flex: 1;
    opacity: 1;
    transition: opacity var(--sidebar-transition-duration) var(--sidebar-transition-timing);
}

.sidebar-container.collapsed .sidebar-menu-text {
    opacity: 0;
    width: 0;
}

/* ============================================
   TOGGLE BUTTON
   ============================================ */
.sidebar-toggle-btn {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2rem);
    padding: 0.75rem;
    background: #f9fafb;
    border: 1px solid var(--sidebar-border);
    border-radius: 8px;
    color: var(--sidebar-text);
    cursor: pointer;
    transition: all 200ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.sidebar-toggle-btn:hover {
    background: var(--sidebar-hover-bg);
    border-color: #d1d5db;
}

.sidebar-toggle-icon {
    transition: transform var(--sidebar-transition-duration) var(--sidebar-transition-timing);
}

.sidebar-container.collapsed .sidebar-toggle-icon {
    transform: rotate(180deg);
}

.sidebar-toggle-text {
    font-size: 0.875rem;
    font-weight: 500;
    opacity: 1;
    transition: opacity var(--sidebar-transition-duration) var(--sidebar-transition-timing);
}

.sidebar-container.collapsed .sidebar-toggle-text {
    opacity: 0;
    width: 0;
}

/* ============================================
   TOOLTIPS (Collapsed State)
   ============================================ */
.sidebar-tooltip {
    position: absolute;
    left: calc(100% + 0.5rem);
    top: 50%;
    transform: translateY(-50%);
    background: #1f2937;
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 200ms ease;
    z-index: 1000;
}

.sidebar-tooltip::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: #1f2937;
}

.sidebar-container.collapsed .sidebar-menu-item:hover .sidebar-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Hide tooltips when expanded */
.sidebar-container:not(.collapsed) .sidebar-tooltip {
    display: none;
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Tablet & Mobile - Hide sidebar on small screens */
@media (max-width: 767px) {
    .sidebar-container {
        display: none;
    }
}

/* Desktop - Show sidebar */
@media (min-width: 768px) {
    .sidebar-container {
        display: block;
    }
}

/* ============================================
   ANIMATIONS
   ============================================ */

/* Fade In Animation for initial load only */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* No stagger animations - removed for performance */

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Focus States */
.sidebar-menu-item:focus,
.sidebar-toggle-btn:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .sidebar-container,
    .sidebar-menu-item,
    .sidebar-toggle-btn,
    .sidebar-toggle-icon,
    .sidebar-toggle-text,
    .sidebar-menu-text,
    .sidebar-menu-icon,
    .sidebar-badge,
    .sidebar-badge-text {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .sidebar-container {
        display: none;
    }
}