/**
 * ExamActive - Global Responsive Styles
 * Centralized responsive CSS for all pages and components
 * Mobile-first approach with breakpoints: Mobile (<768px), Tablet (768-1023px), Desktop (≥1024px)
 */

/* ===================================
   RESPONSIVE UTILITIES
   =================================== */

/* Mobile: Hide elements */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }
}

/* Tablet and Desktop: Hide mobile-only elements */
@media (min-width: 768px) {
    .show-mobile {
        display: none !important;
    }
}

/* Tablet: Hide elements */
@media (min-width: 768px) and (max-width: 1023px) {
    .hide-tablet {
        display: none !important;
    }

    .show-tablet {
        display: block !important;
    }
}

/* Desktop: Hide elements */
@media (min-width: 1024px) {
    .hide-desktop {
        display: none !important;
    }

    .show-desktop {
        display: block !important;
    }
}

/* ===================================
   HEADER RESPONSIVE
   =================================== */

@media (max-width: 767px) {
    /* Mobile: Compact header */
    .top-header {
        padding: var(--spacing-3) var(--spacing-4) !important;
    }

    .header-breadcrumbs {
        display: none !important;
    }

    .header-search {
        display: none !important;
    }

    .profile-name,
    .profile-chevron {
        display: none !important;
    }

    .profile-btn {
        padding-left: var(--spacing-3) !important;
        border-left: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    /* Tablet: Reduced search width */
    .header-search input {
        width: 12rem !important; /* 192px */
    }
}

/* ===================================
   TABLE VS CARDS RESPONSIVE
   =================================== */

/* Mobile: Hide tables, show cards */
@media (max-width: 767px) {
    .table-container,
    .exams-table-container,
    .templates-table-container,
    .students-table-container,
    .assignments-table-container {
        display: none !important;
    }

    .cards-container,
    .exams-cards-container,
    .templates-cards-container,
    .students-cards-container,
    .assignments-cards-container {
        display: block !important;
    }
}

/* Desktop: Show tables, hide cards */
@media (min-width: 768px) {
    .table-container,
    .exams-table-container,
    .templates-table-container,
    .students-table-container,
    .assignments-table-container {
        display: block !important;
    }

    .cards-container,
    .exams-cards-container,
    .templates-cards-container,
    .students-cards-container,
    .assignments-cards-container {
        display: none !important;
    }
}

/* ===================================
   PAGE LAYOUT RESPONSIVE
   =================================== */

@media (max-width: 767px) {
    /* Mobile: Reduced padding */
    .page-container,
    .exams-page,
    .dashboard-page,
    .templates-page {
        padding: var(--spacing-4) !important;
    }

    /* Mobile: Stack header content vertically */
    .page-header .header-content {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--spacing-3) !important;
    }

    /* Mobile: Full-width buttons */
    .header-content .btn-primary,
    .header-content .create-btn,
    .header-content .action-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Mobile: Stack filters vertically */
    .filter-controls,
    .filters-section .filter-controls {
        flex-direction: column !important;
        gap: var(--spacing-3) !important;
    }

    .filter-group {
        width: 100% !important;
    }

    .filter-select {
        width: 100% !important;
    }

    /* Mobile: Full-width clear filters button */
    .clear-filters-btn {
        width: 100% !important;
    }
}

/* ===================================
   SIDEBAR RESPONSIVE
   =================================== */

@media (max-width: 767px) {
    /* Mobile: No margin for sidebar (overlay mode) */
    .content-wrapper {
        margin-left: 0 !important;
    }

    .main-content {
        padding: var(--spacing-5) !important;
    }
}

/* ===================================
   GRID RESPONSIVE
   =================================== */

@media (max-width: 767px) {
    /* Mobile: Single column grids */
    .metric-cards-grid,
    .dashboard-metrics,
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-3) !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    /* Tablet: Two column grids */
    .metric-cards-grid,
    .dashboard-metrics,
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--spacing-4) !important;
    }
}

@media (min-width: 1024px) {
    /* Desktop: Multi-column grids */
    .metric-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    }

    .dashboard-metrics {
        grid-template-columns: repeat(5, 1fr) !important;
    }

    .stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ===================================
   MODAL RESPONSIVE
   =================================== */

@media (max-width: 767px) {
    .modal-content,
    .dialog-content {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: var(--spacing-4) !important;
    }
}

/* ===================================
   CARD RESPONSIVE
   =================================== */

@media (max-width: 767px) {
    .exam-card,
    .template-card,
    .student-card,
    .assignment-card {
        margin-bottom: var(--spacing-3) !important;
    }

    .exam-card-actions,
    .template-card-actions {
        flex-wrap: wrap !important;
        gap: var(--spacing-2) !important;
    }

    .action-btn {
        flex: 1 1 auto !important;
        min-width: 44px !important; /* Touch target size */
    }
}

/* ===================================
   FONT RESPONSIVE
   =================================== */

@media (max-width: 767px) {
    .page-title {
        font-size: var(--font-size-2xl) !important;
    }

    .page-subtitle {
        font-size: var(--font-size-sm) !important;
    }

    .section-title {
        font-size: var(--font-size-xl) !important;
    }
}

/* ===================================
   PAGINATION RESPONSIVE
   =================================== */

@media (max-width: 767px) {
    .pagination-container {
        flex-direction: column !important;
        gap: var(--spacing-3) !important;
    }

    .pagination-btn {
        width: 100% !important;
    }

    .page-info {
        order: -1 !important; /* Show page info at top on mobile */
    }
}

/* ===================================
   FORM RESPONSIVE
   =================================== */

@media (max-width: 767px) {
    .form-row {
        flex-direction: column !important;
        gap: var(--spacing-3) !important;
    }

    .form-group {
        width: 100% !important;
    }

    .form-actions {
        flex-direction: column-reverse !important;
        gap: var(--spacing-2) !important;
    }

    .form-actions .btn {
        width: 100% !important;
    }
}

/* ===================================
   LANDING PAGE RESPONSIVE
   =================================== */

@media (max-width: 767px) {
    .hero-section {
        padding: var(--spacing-8) var(--spacing-4) !important;
    }

    .hero-title {
        font-size: var(--font-size-3xl) !important;
    }

    .hero-subtitle {
        font-size: var(--font-size-base) !important;
    }

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

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

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

@media (min-width: 768px) and (max-width: 1023px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .pricing-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}