/* ============================================================================
   REDESIGN DASHBOARD - Full Width Layout (Desktop Only)
   ============================================================================
   
   Autor: AI Assistant
   Data: 2026-02-18
   Branch: main
   
   SCOP: Eliminare spații laterale pe desktop, layout full-width
   METODĂ: CSS overrides pentru desktop (min-width: 1024px)
   
   MODIFICĂRI:
   - Sidebar: 280px → 220px
   - Container: max-width removed, full viewport
   - Main-content: padding redus
   - Dashboard cards: full width
   
   REVERT: Șterge acest fișier și referința din index.html
   ============================================================================ */

/* ============================================================================
   DESKTOP ONLY - min-width: 1024px
   Nu afectează mobile/tablet
   ============================================================================ */
@media (min-width: 1024px) {
    
    /* ==========================================================================
       CONTAINER - FULL WIDTH
       ========================================================================== */
    .container.dashboard {
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    
    /* Body - remove centering padding if any */
    body {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* ==========================================================================
       SIDEBAR - MAI ÎNGUST (280px → 220px)
       ========================================================================== */
    .sidebar {
        width: 220px !important;
        min-width: 220px !important;
        padding: 20px 14px !important;
    }
    
    /* Sidebar Header - mai compact */
    .sidebar-header {
        margin-bottom: 24px !important;
        padding-bottom: 16px !important;
        text-align: center !important;
    }
    
    .sidebar-header img {
        width: 42px !important;
        margin-bottom: 8px !important;
    }
    
    .sidebar-header h2 {
        font-size: 18px !important;
        margin-bottom: 2px !important;
    }
    
    .sidebar-header p {
        font-size: 11px !important;
    }
    
    /* User Info - mai compact */
    .user-info {
        padding: 12px !important;
        margin-bottom: 16px !important;
    }
    
    .user-info .user-name {
        font-size: 13px !important;
    }
    
    .user-info .user-role {
        font-size: 10px !important;
    }
    
    .user-info .user-company {
        font-size: 10px !important;
    }
    
    /* User action buttons */
    .user-actions {
        margin-top: 8px !important;
        gap: 6px !important;
    }
    
    .user-action-btn {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }
    
    /* Nav Items - mai compacte */
    .nav-item {
        padding: 10px 12px !important;
        font-size: 13px !important;
        margin-bottom: 3px !important;
    }
    
    /* Nav Group Headers */
    .nav-group-header {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
    
    .nav-group-items {
        margin-left: 12px !important;
    }
    
    .nav-group-items .nav-item {
        padding-left: 16px !important;
        font-size: 12px !important;
    }
    
    /* Logout button */
    .logout-btn {
        padding: 10px 14px !important;
        font-size: 13px !important;
        margin-top: 16px !important;
    }
    
    /* ==========================================================================
       MAIN CONTENT - FULL WIDTH, LESS PADDING
       ========================================================================== */
    .main-content {
        padding: 24px 28px !important;
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    /* Page Header - mai compact */
    .page-header {
        margin-bottom: 20px !important;
    }
    
    .page-header h1 {
        font-size: 26px !important;
    }
    
    .page-header p {
        font-size: 14px !important;
    }
    
    /* ==========================================================================
       DASHBOARD CARDS - STATS GRID
       ========================================================================== */
    .stats-grid {
        gap: 16px !important;
        margin-bottom: 24px !important;
    }
    
    .stat-card {
        padding: 20px !important;
    }
    
    .stat-value {
        font-size: 32px !important;
    }
    
    /* Dashboard specific cards grid */
    .dashboard-cards {
        gap: 16px !important;
    }
    
    .dashboard-card {
        padding: 20px !important;
    }
    
    /* ==========================================================================
       CARDS - GENERAL OPTIMIZATIONS
       ========================================================================== */
    .card {
        padding: 20px !important;
        margin-bottom: 20px !important;
        border-radius: 14px !important;
    }
    
    .card h3 {
        font-size: 18px !important;
        margin-bottom: 16px !important;
    }
    
    /* ==========================================================================
       DASHBOARD SECTIONS
       ========================================================================== */
    .dashboard-section {
        margin-bottom: 20px !important;
    }
    
    .dashboard-section h3 {
        font-size: 16px !important;
        margin-bottom: 12px !important;
    }
    
    /* Dashboard alerts */
    .dashboard-alerts {
        padding: 16px !important;
    }
    
    /* Dashboard actions row */
    .dashboard-actions {
        gap: 12px !important;
        padding: 16px !important;
    }
    
    /* ==========================================================================
       OVERVIEW SECTION - PEAK HOURS & ALERTS
       ========================================================================== */
    #overviewSection .card {
        padding: 20px !important;
    }
    
    /* Peak hours bars */
    #overviewSection .card div[style*="display: flex"][style*="margin-bottom"] {
        margin-bottom: 12px !important;
    }
    
    /* Alert boxes */
    #overviewSection > div > div[style*="background"] {
        padding: 16px !important;
        margin-bottom: 16px !important;
    }
}

/* ============================================================================
   EXTRA LARGE SCREENS - 1600px+
   Optimizări suplimentare pentru monitoare mari
   ============================================================================ */
@media (min-width: 1600px) {
    .main-content {
        padding: 28px 36px !important;
    }
    
    .stats-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    .stat-card {
        padding: 24px !important;
    }
    
    .stat-value {
        font-size: 36px !important;
    }
}

/* ============================================================================
   ULTRA WIDE SCREENS - 1920px+
   ============================================================================ */
@media (min-width: 1920px) {
    .sidebar {
        width: 240px !important;
        min-width: 240px !important;
        padding: 24px 16px !important;
    }
    
    .main-content {
        padding: 32px 48px !important;
    }
    
    .page-header h1 {
        font-size: 28px !important;
    }
}

/* ============================================================================
   TRANSITIONS - SMOOTH RESIZE
   ============================================================================ */
.sidebar,
.main-content,
.container.dashboard {
    transition: all 0.2s ease !important;
}

/* ============================================================================
   PRINT - HIDE SIDEBAR
   ============================================================================ */
@media print {
    .sidebar {
        display: none !important;
    }
    
    .main-content {
        padding: 20px !important;
    }
    
    .container.dashboard {
        display: block !important;
    }
}