/* ============================================================
   RESPONSIVE BREAKPOINTS — Mobile-First Adjustments
   ============================================================ */

/* ── Tablet (< 1024px) ── */
@media (max-width: 1024px) {
    :root {
        --header-height: 64px;
    }

    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }

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

    .section { padding: var(--space-12) 0; }

    .container {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    /* Admin Sidebar */
    .admin-sidebar {
        transform: translateX(-100%);
        position: fixed;
        z-index: var(--z-overlay);
    }
    .admin-sidebar.open { transform: translateX(0); }
    .admin-main { margin-left: 0; }

    /* Nav */
    .nav-links { display: none; }
    .nav-mobile-toggle { display: flex !important; }
    .mobile-nav.active { display: flex; }
}

/* ── Mobile (< 768px) ── */
@media (max-width: 768px) {
    h1 { font-size: var(--text-2xl); }
    h2 { font-size: var(--text-xl); }
    h3 { font-size: var(--text-lg); }

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

    .grid-auto-fill {
        grid-template-columns: 1fr;
    }

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

    .section { padding: var(--space-10) 0; }
    .section-lg { padding: var(--space-12) 0; }

    .page-header {
        padding: var(--space-8) 0 var(--space-6);
    }

    .page-header h1 { font-size: var(--text-2xl); }

    /* Cards */
    .card-image { height: 180px; }

    /* Tables - horizontal scroll */
    .table-wrapper { overflow-x: auto; }
    .data-table { min-width: 600px; }

    /* Stat cards in 2-column grid */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Modal full-width on mobile */
    .modal {
        width: 95%;
        max-height: 90vh;
        border-radius: var(--radius-lg);
    }

    /* Toast */
    .toast-container {
        left: var(--space-4);
        right: var(--space-4);
    }
    .toast { min-width: auto; }

    /* Hide on mobile */
    .hide-mobile { display: none !important; }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr !important;
        text-align: center;
    }

    /* Hero */
    .hero-content { text-align: center; }
    .hero-stats {
        justify-content: center !important;
        flex-wrap: wrap;
    }
}

/* ── Small Mobile (< 480px) ── */
@media (max-width: 480px) {
    :root {
        --header-height: 56px;
    }

    body { font-size: var(--text-sm); }
    h1 { font-size: var(--text-xl); }

    .container {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }

    .btn-lg {
        padding: var(--space-3) var(--space-6);
        font-size: var(--text-sm);
    }

    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    .stat-card { padding: var(--space-4); }
    .stat-card .stat-value { font-size: var(--text-2xl); }
}

/* ── Desktop+ (> 1200px) ── */
@media (min-width: 1200px) {
    .show-mobile  { display: none !important; }
    .show-tablet  { display: none !important; }
}

/* ── Print ── */
@media print {
    .site-header,
    .site-footer,
    .admin-sidebar,
    .btn,
    .pagination,
    .search-bar,
    .modal-overlay,
    .toast-container {
        display: none !important;
    }

    body { background: white; color: black; font-size: 12pt; }
    .container { max-width: 100%; padding: 0; }
    .card { box-shadow: none; border: 1px solid #ccc; page-break-inside: avoid; }
}