/*
 * GenomOnline — Global responsive helpers.
 *
 * Loaded from layouts/head-assets.blade.php so every page gets it.
 * Goals:
 *   - Make rigid CSS grids collapse to 1 column on phones.
 *   - Let wide <table>s scroll horizontally instead of overflowing.
 *   - Tighten card paddings on small screens.
 *   - Keep desktop layout untouched.
 *
 * Selectors are intentionally generic but deliberate — they target patterns
 * already present in the project (.container, .header, .grid-template-columns).
 * Existing per-page styles can override when needed.
 */

/* === Phones === */
@media (max-width: 600px) {
    /* Auth card padding (login/register/verify/forgot/reset) */
    body > .container,
    body > div > .container {
        padding: 24px 18px !important;
        border-radius: 16px !important;
    }

    /* Headings inside auth cards */
    .header h1 {
        font-size: 22px !important;
    }
    .header p {
        font-size: 13px !important;
    }

    /* Generic header bars at the top of admin pages */
    .header,
    .header-section {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 18px !important;
    }
    .header-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .header-actions > * {
        width: 100% !important;
        justify-content: center !important;
        text-align: center;
    }

    /* Stats / mini cards */
    .header-stats {
        width: 100%;
    }
    .stat-item {
        flex: 1;
        min-width: 100px;
    }

    /* Generic action buttons on mobile */
    .btn,
    .btn-primary,
    .btn-secondary {
        font-size: 14px;
    }

    /* Make tables horizontally scrollable instead of overflowing */
    .users-table,
    .subscriptions-table,
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .users-table table,
    .subscriptions-table table {
        min-width: 640px;
    }

    /* Force the lesson 2-col layout to single column */
    .lesson-layout {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Subject card row layout → column on phones */
    .subject-card {
        flex-direction: column !important;
        height: auto !important;
    }
    .subject-image-wrapper {
        width: 100% !important;
        height: 180px !important;
    }

    /* Dashboard: stacks tight */
    .dashboard-grid,
    .info-grid,
    .quizzes-grid,
    .units-grid,
    .reviews-grid,
    .inquiries-grid,
    .classes-grid {
        grid-template-columns: 1fr !important;
    }

    /* Messages: chat bubbles */
    .bubble-row {
        flex-direction: column !important;
    }

    /* Pad page-level body containers */
    body {
        padding: 12px !important;
    }
}

/* === Small tablets === */
@media (max-width: 900px) and (min-width: 601px) {
    .lesson-layout {
        grid-template-columns: 1fr !important;
    }
    .header,
    .header-section {
        flex-wrap: wrap !important;
    }
    /* 2-column grid for subject grids on tablets */
    .subjects-grid,
    .quizzes-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    }
}

/* === Touch-friendly hit areas everywhere === */
@media (pointer: coarse) {
    .btn,
    .btn-action,
    .btn-primary,
    .btn-secondary,
    button[type="submit"] {
        min-height: 44px;
    }
    .password-toggle {
        min-width: 44px;
        min-height: 44px;
    }
}

/* === Long-form content: prevent horizontal overflow from images/iframes === */
.lesson-content img,
.lesson-content video,
.lesson-content iframe,
.review-comment img,
.bubble-body img {
    max-width: 100%;
    height: auto;
}

/* === Smooth scroll on anchored links === */
html {
    scroll-behavior: smooth;
}

/* === Better default for very small screens === */
@media (max-width: 360px) {
    .header h1 {
        font-size: 20px !important;
    }
    .form-group input,
    .form-group select {
        font-size: 14px !important;
        padding: 10px 12px !important;
    }
    .btn-primary {
        font-size: 14px !important;
        padding: 12px !important;
    }
}