/**
 * Styles responsive pour tous les écrans
 */

/* Variables responsive */
:root {
    --sidebar-width: 280px;
    --header-height: 70px;
    --mobile-header-height: 60px;
}

/* Breakpoints personnalisés */
@media (max-width: 1400px) {
    .container-fluid {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
}

@media (max-width: 1200px) {
    :root {
        --sidebar-width: 260px;
    }
    
    .content-wrapper {
        padding: var(--spacing-md);
    }
    
    /* Réduction des espacements sur écrans moyens */
    .app-header {
        padding: var(--spacing-lg) var(--spacing-md);
    }
    
    .header-image {
        width: 280px;
        height: 180px;
    }
    
    /* Adaptation des grilles */
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: var(--spacing-md);
    }
    
    .actions-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--spacing-md);
    }
}

@media (max-width: 992px) {
    :root {
        --header-height: 65px;
    }
    
    /* Layout adaptatif */
    .dashboard-main {
        margin-left: 0 !important;
        width: 100%;
    }
    
    .sidebar {
        transform: translateX(-100%);
        z-index: 1050;
    }
    
    .sidebar.show {
        transform: translateX(0);
    }
    
    /* Header mobile */
    .main-header {
        position: sticky;
        top: 0;
        z-index: 1040;
    }
    
    .sidebar-toggle {
        display: block !important;
    }
    
    /* Ajustement des cartes */
    .stat-card {
        padding: var(--spacing-lg);
        margin-bottom: var(--spacing-md);
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .action-card .card-body {
        padding: var(--spacing-lg);
    }
    
    /* Tables responsive */
    .data-table {
        font-size: 0.9rem;
    }
    
    .data-table .table thead th,
    .data-table .table tbody td {
        padding: var(--spacing-sm);
    }
    
    /* Formulaires */
    .modal-form .form-row {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    /* Navigation */
    .quick-nav {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .filter-buttons {
        justify-content: center;
        gap: var(--spacing-xs);
    }
    
    .filter-buttons .btn {
        flex: 1;
        min-width: 100px;
        font-size: 0.85rem;
    }
}

@media (max-width: 768px) {
    :root {
        --header-height: var(--mobile-header-height);
        --spacing-section: var(--spacing-md);
    }
    
    /* Layout mobile */
    body {
        font-size: 13px;
    }
    
    .app-container {
        min-height: 100vh;
    }
    
    /* Login responsive */
    .login-section {
        padding: var(--spacing-md);
    }
    
    .login-card {
        margin: 0;
        border-radius: var(--border-radius-md);
    }
    
    .login-header {
        padding: var(--spacing-lg);
    }
    
    .login-logo {
        height: 60px;
    }
    
    .login-title {
        font-size: 1.3rem;
    }
    
    .login-body {
        padding: var(--spacing-lg);
    }
    
    /* Header mobile */
    .app-header {
        padding: var(--spacing-md);
        text-align: center;
    }
    
    .header-logo {
        position: static;
        width: 50px;
        height: 50px;
        margin: 0 auto var(--spacing-md);
    }
    
    .header-image {
        width: 250px;
        height: 150px;
        margin: var(--spacing-md) 0;
    }
    
    /* Dashboard mobile */
    .content-wrapper {
        padding: var(--spacing-sm);
    }
    
    .module-section {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-md);
        border-left-width: 2px;
    }
    
    .filter-section {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }
    
    /* Grilles mobile */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    .actions-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    /* Header utilisateur mobile */