/* ================================================================
   FIGIG EXAMS - RESPONSIVE DESIGN (MOBILE-FIRST)
   Mobile-first responsive design for all screen sizes
   ================================================================ */

/* ================================================================
   RESPONSIVE BREAKPOINTS
   ================================================================ */
/*
   xs: < 576px (mobile portrait)
   sm: 576px - 768px (mobile landscape / small tablets)
   md: 768px - 992px (tablets)
   lg: 992px - 1200px (laptops)
   xl: 1200px+ (desktops)
*/

/* ================================================================
   BASE MOBILE STYLES (Applied to all screens by default)
   ================================================================ */

/* Typography Adjustments for Mobile */
@media (max-width: 576px) {
    h1 { font-size: 1.75rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.25rem !important; }
    h4 { font-size: 1.125rem !important; }
    h5 { font-size: 1rem !important; }
    h6 { font-size: 0.875rem !important; }

    body {
        font-size: 0.9375rem;
    }
}

/* ================================================================
   CATALOG PAGE - MOBILE OPTIMIZATIONS
   ================================================================ */

/* Catalog Container */
@media (max-width: 768px) {
    .catalog-container {
        padding: var(--space-4) !important;
    }
}

@media (max-width: 576px) {
    .catalog-container {
        padding: var(--space-3) !important;
    }
}

/* Catalog Hero Section */
@media (max-width: 768px) {
    .catalog-hero {
        padding: var(--space-8) var(--space-4) !important;
        margin-bottom: var(--space-6) !important;
    }

    .catalog-hero h1 {
        font-size: 1.75rem !important;
    }

    .catalog-hero p {
        font-size: 1rem !important;
    }
}

@media (max-width: 576px) {
    .catalog-hero {
        padding: var(--space-6) var(--space-3) !important;
        margin-bottom: var(--space-4) !important;
        border-radius: var(--radius-lg) !important;
    }

    .catalog-hero h1 {
        font-size: 1.5rem !important;
    }

    .catalog-hero h1 i {
        font-size: 1.25rem !important;
        margin-right: var(--space-2) !important;
    }

    .catalog-hero p {
        font-size: 0.875rem !important;
    }
}

/* Catalog Filters - MAJOR FIX FOR MOBILE */
@media (max-width: 992px) {
    .catalog-filters {
        padding: var(--space-4) !important;
        margin-bottom: var(--space-4) !important;
    }

    .catalog-filters .row {
        row-gap: var(--space-3) !important;
    }

    .catalog-filters .col-md-4,
    .catalog-filters .col-md-2 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .catalog-filters .text-end {
        text-align: left !important;
    }

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

@media (max-width: 576px) {
    .catalog-filters {
        padding: var(--space-3) !important;
        border-radius: var(--radius-lg) !important;
    }

    .catalog-filters .input-group-text,
    .catalog-filters .form-control,
    .catalog-filters .form-select {
        font-size: 0.875rem !important;
        padding: var(--space-2) var(--space-3) !important;
    }

    .catalog-filters .btn {
        padding: var(--space-2) var(--space-4) !important;
        font-size: 0.875rem !important;
    }
}

/* Catalog Stats Cards */
@media (max-width: 992px) {
    .catalog-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-3) !important;
        margin-bottom: var(--space-4) !important;
    }
}

@media (max-width: 576px) {
    .catalog-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-2) !important;
        padding: var(--space-2) !important;
    }

    .stat-box {
        padding: var(--space-3) !important;
    }

    .stat-box h3 {
        font-size: 1.25rem !important;
        margin-bottom: var(--space-1) !important;
    }

    .stat-box p {
        font-size: 0.75rem !important;
    }
}

/* Exam Grid - MAJOR FIX FOR MOBILE */
@media (max-width: 1200px) {
    .exam-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-4) !important;
    }
}

@media (max-width: 768px) {
    .exam-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-3) !important;
    }
}

@media (max-width: 576px) {
    .exam-grid {
        gap: var(--space-3) !important;
    }
}

/* Exam Card - Mobile Optimizations */
@media (max-width: 768px) {
    .exam-card {
        margin-bottom: 0 !important;
    }

    .exam-card-header {
        height: 160px !important;
    }

    .exam-card-body {
        padding: var(--space-4) !important;
    }

    .exam-card-body h5 {
        font-size: 1.125rem !important;
    }

    .exam-card-body p {
        font-size: 0.875rem !important;
        -webkit-line-clamp: 2 !important;
    }
}

@media (max-width: 576px) {
    .exam-card-header {
        height: 140px !important;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    }

    .exam-card-body {
        padding: var(--space-3) !important;
    }

    .exam-card-body h5 {
        font-size: 1rem !important;
        margin-bottom: var(--space-2) !important;
    }

    .exam-card-body p {
        font-size: 0.8125rem !important;
        margin-bottom: var(--space-3) !important;
    }

    .exam-card-body .badge {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
    }

    .exam-card-footer .btn {
        padding: var(--space-2) var(--space-3) !important;
        font-size: 0.875rem !important;
    }

    .exam-card-logo {
        padding: var(--space-2) !important;
    }

    .exam-card-logo img {
        height: 20px !important;
    }

    .exam-card-logo span {
        font-size: 0.75rem !important;
    }
}

/* Pagination - Mobile Fix */
@media (max-width: 768px) {
    .pagination-container {
        flex-wrap: wrap !important;
        gap: var(--space-2) !important;
    }

    .pagination-container button {
        padding: var(--space-2) var(--space-3) !important;
        font-size: 0.875rem !important;
        min-width: 40px !important;
    }
}

@media (max-width: 576px) {
    .pagination-container > div {
        order: 2;
        width: 100%;
        justify-content: center;
        margin-top: var(--space-2);
    }

    .pagination-container button:first-child,
    .pagination-container button:last-child {
        flex: 1;
    }
}

/* ================================================================
   HOME PAGE - MOBILE OPTIMIZATIONS
   ================================================================ */

@media (max-width: 992px) {
    .hero-section-modern {
        padding: var(--space-12) var(--space-4) !important;
    }

    .hero-title {
        font-size: 2rem !important;
    }

    .hero-subtitle {
        font-size: 1rem !important;
    }
}

@media (max-width: 768px) {
    .hero-section-modern {
        padding: var(--space-8) var(--space-4) !important;
        min-height: 500px !important;
    }

    .hero-title {
        font-size: 1.75rem !important;
    }

    .hero-subtitle {
        font-size: 0.9375rem !important;
    }

    .hero-badge {
        padding: var(--space-2) var(--space-3) !important;
        font-size: 0.75rem !important;
    }
}

@media (max-width: 576px) {
    .hero-section-modern {
        padding: var(--space-6) var(--space-3) !important;
        min-height: 450px !important;
    }

    .hero-title {
        font-size: 1.5rem !important;
        margin-bottom: var(--space-3) !important;
    }

    .hero-subtitle {
        font-size: 0.875rem !important;
        margin-bottom: var(--space-4) !important;
    }

    .hero-badge {
        padding: var(--space-2) var(--space-3) !important;
        font-size: 0.625rem !important;
        margin-bottom: var(--space-3) !important;
    }

    .hero-badge i {
        font-size: 0.75rem !important;
    }
}

/* Quick Stats - Mobile */
@media (max-width: 768px) {
    .quick-stats {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: var(--space-3) !important;
        padding: var(--space-4) !important;
    }

    .stat-item {
        flex-direction: column !important;
        text-align: center !important;
        gap: var(--space-2) !important;
    }

    .stat-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.25rem !important;
    }

    .stat-value {
        font-size: 1.25rem !important;
    }

    .stat-label {
        font-size: 0.75rem !important;
    }
}

@media (max-width: 576px) {
    .quick-stats {
        grid-template-columns: 1fr !important;
        gap: var(--space-2) !important;
        padding: var(--space-3) !important;
    }

    .stat-item {
        flex-direction: row !important;
        text-align: left !important;
        padding: var(--space-3) !important;
    }
}

/* Hero Actions - Mobile */
@media (max-width: 768px) {
    .hero-actions {
        flex-direction: column !important;
        gap: var(--space-3) !important;
        width: 100% !important;
    }

    .hero-actions a,
    .hero-actions .btn-modern {
        width: 100% !important;
        justify-content: center !important;
    }
}

@media (max-width: 576px) {
    .btn-modern {
        padding: var(--space-3) var(--space-4) !important;
        font-size: 0.9375rem !important;
    }

    .btn-modern i {
        font-size: 1rem !important;
    }
}

/* ================================================================
   LOGIN / REGISTER PAGES - MOBILE OPTIMIZATIONS
   ================================================================ */

@media (max-width: 768px) {
    .login-container,
    .register-container {
        padding: var(--space-4) !important;
    }

    .login-card,
    .register-card {
        padding: var(--space-6) var(--space-5) !important;
        max-width: 100% !important;
    }
}

@media (max-width: 576px) {
    .login-container,
    .register-container {
        padding: var(--space-3) !important;
    }

    .login-card,
    .register-card {
        padding: var(--space-4) !important;
        border-radius: var(--radius-lg) !important;
    }

    .login-logo img,
    .register-logo img {
        width: 70px !important;
        height: 70px !important;
    }

    .login-card h2,
    .register-card h2 {
        font-size: 1.5rem !important;
    }

    .form-control,
    .form-select {
        padding: 0.75rem !important;
        font-size: 0.9375rem !important;
    }

    .form-label {
        font-size: 0.875rem !important;
    }

    .btn.w-100 {
        padding: 0.875rem !important;
        font-size: 1rem !important;
    }
}

/* ================================================================
   EXAM PAGE - MOBILE OPTIMIZATIONS
   ================================================================ */

@media (max-width: 992px) {
    .exam-container {
        padding: var(--space-4) !important;
    }

    .exam-header {
        flex-direction: column !important;
        gap: var(--space-3) !important;
        padding: var(--space-4) !important;
    }

    .exam-timer {
        width: 100% !important;
        justify-content: center !important;
    }
}

@media (max-width: 768px) {
    .exam-container {
        padding: var(--space-3) !important;
    }

    .exam-header {
        padding: var(--space-3) !important;
    }

    .exam-question-card {
        padding: var(--space-4) !important;
    }

    .exam-navigation {
        flex-direction: column !important;
        gap: var(--space-3) !important;
        padding: var(--space-4) !important;
    }

    .exam-navigation button {
        width: 100% !important;
    }
}

@media (max-width: 576px) {
    .exam-question-card {
        padding: var(--space-3) !important;
    }

    .question-text {
        font-size: 0.9375rem !important;
    }

    .answer-option {
        padding: var(--space-3) !important;
        font-size: 0.875rem !important;
    }

    .exam-timer {
        font-size: 1rem !important;
        padding: var(--space-2) var(--space-3) !important;
    }

    .exam-navigation {
        padding: var(--space-3) !important;
    }

    .exam-navigation button {
        padding: var(--space-2) var(--space-3) !important;
        font-size: 0.875rem !important;
    }
}

/* Question Number Grid */
@media (max-width: 768px) {
    .question-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: var(--space-2) !important;
    }
}

@media (max-width: 576px) {
    .question-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: var(--space-2) !important;
    }

    .question-number-btn {
        width: 100% !important;
        aspect-ratio: 1 !important;
        font-size: 0.75rem !important;
        padding: var(--space-2) !important;
    }
}

/* ================================================================
   RESULTS PAGE - MOBILE OPTIMIZATIONS
   ================================================================ */

@media (max-width: 992px) {
    .results-container {
        padding: var(--space-4) !important;
    }

    .results-header {
        padding: var(--space-6) var(--space-4) !important;
    }
}

@media (max-width: 768px) {
    .results-container {
        padding: var(--space-3) !important;
    }

    .results-header {
        padding: var(--space-4) var(--space-3) !important;
    }

    .results-score {
        font-size: 3rem !important;
    }

    .results-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-3) !important;
    }
}

@media (max-width: 576px) {
    .results-header h1 {
        font-size: 1.5rem !important;
    }

    .results-score {
        font-size: 2.5rem !important;
    }

    .results-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-2) !important;
    }

    .result-stat-card {
        padding: var(--space-3) !important;
    }

    .result-stat-card h3 {
        font-size: 1.125rem !important;
    }
}

/* ================================================================
   PROFILE PAGE - MOBILE OPTIMIZATIONS
   ================================================================ */

@media (max-width: 768px) {
    .profile-container {
        padding: var(--space-4) !important;
    }

    .profile-header {
        flex-direction: column !important;
        text-align: center !important;
        gap: var(--space-4) !important;
        padding: var(--space-4) !important;
    }

    .profile-avatar {
        width: 80px !important;
        height: 80px !important;
    }
}

@media (max-width: 576px) {
    .profile-container {
        padding: var(--space-3) !important;
    }

    .profile-header {
        padding: var(--space-3) !important;
    }

    .profile-section {
        padding: var(--space-3) !important;
    }
}

/* ================================================================
   SIDEBAR / NAVIGATION - MOBILE OPTIMIZATIONS
   ================================================================ */

@media (max-width: 992px) {
    .sidebar {
        transform: translateX(-100%) !important;
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        height: 100vh !important;
        z-index: 1000 !important;
        box-shadow: var(--shadow-2xl) !important;
    }

    .sidebar.show {
        transform: translateX(0) !important;
    }

    .sidebar-overlay {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 999 !important;
    }

    .sidebar-toggle {
        display: block !important;
        position: fixed !important;
        top: var(--space-4) !important;
        left: var(--space-4) !important;
        z-index: 998 !important;
        background: var(--primary-600) !important;
        color: white !important;
        border: none !important;
        padding: var(--space-3) !important;
        border-radius: var(--radius-md) !important;
        box-shadow: var(--shadow-lg) !important;
    }
}

@media (max-width: 576px) {
    .sidebar {
        width: 280px !important;
    }
}

/* ================================================================
   MODALS - MOBILE OPTIMIZATIONS
   ================================================================ */

@media (max-width: 768px) {
    .modal-dialog {
        margin: var(--space-3) !important;
        max-width: calc(100% - var(--space-6)) !important;
    }

    .modal-content {
        border-radius: var(--radius-lg) !important;
    }

    .modal-body {
        padding: var(--space-4) !important;
    }

    .modal-header,
    .modal-footer {
        padding: var(--space-4) !important;
    }
}

@media (max-width: 576px) {
    .modal-dialog {
        margin: var(--space-2) !important;
        max-width: calc(100% - var(--space-4)) !important;
    }

    .modal-body {
        padding: var(--space-3) !important;
    }

    .modal-header h5,
    .modal-header h4 {
        font-size: 1.125rem !important;
    }

    .modal-body .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .modal-body .col-md-6 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: var(--space-2) !important;
    }
}

/* ================================================================
   ALERTS & NOTIFICATIONS - MOBILE OPTIMIZATIONS
   ================================================================ */

@media (max-width: 576px) {
    .alert {
        padding: var(--space-3) !important;
        font-size: 0.875rem !important;
        border-radius: var(--radius-md) !important;
    }

    .alert h5,
    .alert h6 {
        font-size: 1rem !important;
    }
}

/* ================================================================
   TABLES - MOBILE OPTIMIZATIONS
   ================================================================ */

@media (max-width: 768px) {
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    table {
        font-size: 0.875rem !important;
    }

    th, td {
        padding: var(--space-2) !important;
    }
}

/* ================================================================
   IMAGE OPTIMIZATIONS - MOBILE
   ================================================================ */

/* Better image rendering */
img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

@media (max-width: 992px) {
    /* Better image sizing for tablet/mobile */
    .exam-card-header-bg img,
    .catalog-hero-bg img,
    .hero-background img {
        object-fit: cover !important;
        object-position: center !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Reduce parallax/transform effects on mobile for performance */
    .exam-card:hover .exam-card-header-bg img {
        transform: scale(1.05) !important;
    }
}

@media (max-width: 768px) {
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Disable hover transforms on mobile for better performance */
    .exam-card:hover .exam-card-header-bg img,
    .exam-card:active .exam-card-header-bg img {
        transform: none !important;
    }

    /* Sharper images on mobile */
    .exam-card-header-bg img,
    .catalog-hero-bg img {
        image-rendering: auto !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
    }
}

@media (max-width: 576px) {
    /* Force cover fit on very small screens */
    .exam-card-header-bg img {
        min-width: 100% !important;
        min-height: 100% !important;
        object-fit: cover !important;
    }
}

/* ================================================================
   GENERAL MOBILE SPACING FIXES
   ================================================================ */

@media (max-width: 768px) {
    .py-5 {
        padding-top: var(--space-6) !important;
        padding-bottom: var(--space-6) !important;
    }

    .px-4 {
        padding-left: var(--space-4) !important;
        padding-right: var(--space-4) !important;
    }

    .mb-5 {
        margin-bottom: var(--space-6) !important;
    }

    .mt-5 {
        margin-top: var(--space-6) !important;
    }
}

@media (max-width: 576px) {
    .py-5 {
        padding-top: var(--space-4) !important;
        padding-bottom: var(--space-4) !important;
    }

    .px-4 {
        padding-left: var(--space-3) !important;
        padding-right: var(--space-3) !important;
    }

    .mb-5 {
        margin-bottom: var(--space-4) !important;
    }

    .mt-5 {
        margin-top: var(--space-4) !important;
    }
}

/* ================================================================
   TOUCH IMPROVEMENTS - MOBILE
   ================================================================ */

@media (max-width: 768px) {
    /* Larger touch targets */
    button,
    .btn,
    a.btn,
    input[type="button"],
    input[type="submit"] {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* Better tap highlighting */
    button,
    a,
    input,
    select,
    textarea {
        -webkit-tap-highlight-color: rgba(99, 102, 241, 0.2);
    }

    /* Smooth scrolling */
    * {
        -webkit-overflow-scrolling: touch;
    }
}

/* ================================================================
   LANDSCAPE ORIENTATION - MOBILE
   ================================================================ */

@media (max-width: 896px) and (orientation: landscape) {
    .hero-section-modern {
        min-height: auto !important;
        padding: var(--space-6) var(--space-4) !important;
    }

    .exam-container {
        padding: var(--space-3) !important;
    }

    .modal-dialog {
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
}