/* ============================================================
   School Management System - Responsive CSS
   ============================================================ */

/* ============================================================
   Extra Large Screens (1400px+)
   ============================================================ */
@media (min-width: 1400px) {
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
    .page-content { padding: 2rem 2.5rem; }
}

/* ============================================================
   Large Desktop (1200px - 1399px)
   ============================================================ */
@media (max-width: 1399px) {
    .grid-4 { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Laptop (992px - 1199px)
   ============================================================ */
@media (max-width: 1199px) {
    :root { --sidebar-width: 240px; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .login-wrapper { max-width: 820px; }
    .topbar-search input { width: 160px; }
}

/* ============================================================
   Tablet (768px - 991px)
   ============================================================ */
@media (max-width: 991px) {
    :root { --topbar-height: 60px; }

    /* Sidebar becomes overlay */
    .sidebar {
        transform: translateX(-100%);
        box-shadow: var(--shadow-lg);
    }

    .sidebar.open { transform: translateX(0); }

    .sidebar-close { display: flex; }

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

    .main-wrapper { margin-left: 0; }

    .menu-toggle { display: flex; }

    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-2 { grid-template-columns: 1fr; }

    .login-wrapper {
        grid-template-columns: 1fr;
        max-width: 500px;
    }

    .login-promo { display: none; }
    .login-form-side { padding: 2.5rem; }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-content { padding: 1.25rem; }

    .topbar-search { display: none; }

    .profile-name { display: none; }

    .breadcrumb span:not(.breadcrumb-current):not(:last-child) { display: none; }
    .breadcrumb i:not(:last-child) { display: none; }
}

/* ============================================================
   Mobile (max 767px)
   ============================================================ */
@media (max-width: 767px) {
    html { font-size: 14px; }

    .page-content { padding: 1rem; }

    .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
    .grid-auto { grid-template-columns: 1fr; }

    /* Stats grid: 2 columns on mobile */
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }

    .stat-card { padding: 1rem; }
    .stat-value { font-size: 1.4rem; }
    .stat-icon { width: 42px; height: 42px; }

    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .filter-bar { flex-direction: column; }
    .filter-bar > * { width: 100%; }
    .search-input-wrapper { min-width: unset; }

    .form-row { grid-template-columns: 1fr; }

    /* Table: enable horizontal scroll */
    .table-wrapper { -webkit-overflow-scrolling: touch; }
    table { min-width: 600px; }

    .modal { border-radius: 16px; }
    .modal-body { padding: 1.1rem; }
    .modal-header { padding: 1.1rem 1.1rem 0.75rem; }
    .modal-footer { padding: 0.75rem 1.1rem; flex-direction: column; }
    .modal-footer .btn { width: 100%; justify-content: center; }

    .page-actions { width: 100%; }
    .page-actions .btn { flex: 1; justify-content: center; }

    .tabs { overflow-x: auto; white-space: nowrap; padding-bottom: 2px; }
    .tab-btn { flex-shrink: 0; }

    .topbar { padding: 0 1rem; }

    .login-form-side { padding: 1.75rem 1.5rem; }
    .login-title { font-size: 1.3rem; }

    .actions { flex-wrap: wrap; }
}

/* ============================================================
   Small Mobile (max 480px)
   ============================================================ */
@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr; }
    .stat-card { gap: 0.75rem; }
    .btn-lg { padding: 10px 20px; font-size: 0.875rem; }
    .page-title { font-size: 1.2rem; }
    .breadcrumb { display: none; }
}

/* ============================================================
   Print Media
   ============================================================ */
@media print {
    body { background: white; }
    .sidebar, .topbar, .sidebar-overlay { display: none !important; }
    .main-wrapper { margin-left: 0 !important; }
    .page-content { padding: 0 !important; }
    .no-print { display: none !important; }
    .card { break-inside: avoid; page-break-inside: avoid; }
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
}