/* /assets/css/responsive.css */

/* ========================================
   Mobile-First Responsive Design
   ======================================== */

/* Base styles are mobile-first in global.css */

/* ========================================
   Small devices (landscape phones, 576px and up)
   ======================================== */
@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
    
    .btn-group {
        flex-direction: row;
    }
    
    .form-row {
        display: flex;
        gap: var(--space-4);
    }
    
    .form-row .form-group {
        flex: 1;
    }
}

/* ========================================
   Medium devices (tablets, 768px and up)
   ======================================== */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
    
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .module-header {
        flex-direction: row;
    }
    
    .module-nav {
        flex-direction: row;
    }
    
    .table-toolbar {
        flex-direction: row;
    }
}

/* ========================================
   Large devices (desktops, 992px and up)
   ======================================== */
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
    
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .sidebar {
        width: 250px;
    }
}

/* ========================================
   Extra large devices (large desktops, 1200px and up)
   ======================================== */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    
    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ========================================
   Mobile-specific overrides
   ======================================== */
@media (max-width: 767.98px) {
    .hide-mobile {
        display: none !important;
    }
    
    .table-responsive {
        overflow-x: auto;
    }
    
    .btn-group {
        flex-direction: column;
    }
    
    .modal-content {
        margin: var(--space-4);
        width: calc(100% - var(--space-8));
    }
}