/*
 * responsive.css — Mobile & tablet responsiveness for Techbridge Online LMS
 * Covers: dashboard, catalog, course detail, profile, forms, enroll, certificates,
 *         teacher pages, admin pages.
 */

/* ─── Base: make sure containers don't overflow ────────────────────────── */
* { box-sizing: border-box; }
img { max-width: 100%; }

/* ─── Viewport body padding for bottom nav bar ─────────────────────────── */
@media (max-width: 768px) {
    body { padding-bottom: 72px !important; }

    /* ── Containers fluid on mobile ── */
    .container, .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }

    /* ── Typography scale-down ── */
    h1, .h1 { font-size: 1.6rem !important; }
    h2, .h2 { font-size: 1.35rem !important; }
    h3, .h3 { font-size: 1.15rem !important; }
    h4, .h4 { font-size: 1.05rem !important; }
    h5, .h5 { font-size: 0.95rem !important; }
    .fw-800 { font-weight: 800; }

    /* ── Student main content: remove fixed margin ── */
    .student-main-content { margin-left: 0 !important; padding-top: 0 !important; }

    /* ── Dashboard: right sidebar col goes below on mobile ── */
    .col-lg-8, .col-lg-4 { margin-bottom: 16px; }
    .row.g-4 > .col-lg-4 { order: 2; }
    .row.g-4 > .col-lg-8 { order: 1; }

    /* ── Stat cards: 2-column grid ── */
    .stat-card { padding: 12px !important; }
    .stat-val   { font-size: 1.6rem !important; }
    .stat-label { font-size: 11px !important; }

    /* ── tbi-card: remove heavy shadow on mobile ── */
    .tbi-card { border-radius: 10px !important; box-shadow: 0 2px 8px rgba(0,0,0,.06) !important; }

    /* ── Grid columns: single column on phones ── */
    .row.g-3 > .col-md-6:not(.col-6),
    .row.g-4 > .col-md-6:not(.col-6),
    .row.g-3 > .col-md-4,
    .row.g-3 > .col-lg-3,
    .row.g-4 > .col-lg-3 { 
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* ── Forms: full-width inputs ── */
    .form-control, .form-select, .input-group {
        font-size: 16px !important; /* prevents iOS zoom */
        touch-action: manipulation;
    }
    .btn { min-height: 44px; touch-action: manipulation; }
    .btn-sm { min-height: 38px !important; }

    /* ── Catalog: filter bar stacks vertically ── */
    .catalog-filter-bar,
    .d-flex.gap-2.flex-wrap.align-items-center { gap: 8px !important; }
    
    .catalog-filter-bar .form-control,
    .catalog-filter-bar .form-select { font-size: 14px !important; }

    /* Course cards in catalog: ensure full width */
    [class*="col-md-6"]:has(.tbi-card .tbi-progress) {
        width: 100% !important;
    }

    /* ── Table: enable horizontal scroll on all tables ── */
    table { min-width: 480px; }
    .tbi-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

    /* ── Hero banner (course_detail, teacher_profile) ── */
    .hero-banner, .profile-hero {
        padding: 28px 0 24px !important;
    }
    .hero-banner h1, .profile-hero h2 { font-size: 1.4rem !important; }

    /* ── Sticky CTA card (course detail) ── */
    .sticky-cta { position: static !important; }

    /* ── Certificates page ── */
    .tbi-cert-card { padding: 16px !important; }

    /* ── Button groups: wrap on mobile ── */
    .d-flex.gap-2.flex-wrap { flex-wrap: wrap !important; }
    .d-flex.gap-2 > .flex-grow-1 { min-width: 120px; }

    /* ── Profile page: avatar and info stack ── */
    .profile-header-row { flex-direction: column !important; align-items: center !important; text-align: center; }

    /* ── Auth pages (login / register) ── */
    .auth-card { padding: 24px 16px !important; }
    .auth-wrap { padding: 12px !important; }

    /* ── Admin finance table ── */
    .admin-body .tbi-card { padding: 12px !important; }

    /* ── Course player header: wrap ── */
    .d-flex.align-items-center.justify-content-between.p-3.border-bottom {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 8px 12px !important;
    }
    /* Hide desktop Pomodoro timer text on mobile to save space */
    #focusTimeDisplay { font-size: 0.9rem !important; min-width: 42px !important; }

    /* ── Offcanvas syllabus button: hide since we have inline ─── */
    .btn[data-bs-target="#sidebarOffcanvas"] { display: none !important; }

    /* ── Referral page ── */
    .referral-hero { padding: 28px 20px !important; }
    .code-box { font-size: 1.5rem !important; letter-spacing: 2px !important; }

    /* ── Modals: full width ── */
    .modal-dialog { margin: 8px !important; }
    .modal-content { border-radius: 12px !important; }

    /* ── Leaderboard widget on mobile: compact ── */
    .list-group-item { padding: 8px 12px !important; }

    /* ── Planner / calendar ── */
    .planner-grid { grid-template-columns: 1fr !important; }

    /* ── Remove hover transforms that can feel jarring on touch ── */
    [onmouseover], [onmouseout] { transform: none !important; }
}

/* ─── Small phones (< 480px) ─────────────────────────────────────────────── */
@media (max-width: 480px) {
    /* Stats: 2-column forced */
    .row.g-3 > .col-6 { flex: 0 0 50% !important; max-width: 50% !important; }

    /* Prevent 1-column stat cards on tiny screens */
    .stat-card { min-height: 80px; }
    .stat-val { font-size: 1.4rem !important; }
    .stat-icon i { font-size: 1.4rem !important; }

    /* Page titles smaller */
    h3.fw-800 { font-size: 1.1rem !important; }

    /* Bottom nav labels even smaller */
    .s-label { font-size: 0.45rem !important; }

    /* Hero section */
    .hero-banner h1, .profile-hero h2 { font-size: 1.2rem !important; }
    .hero-banner p, .profile-hero p { font-size: 13px !important; }
    
    /* Enroll page: price display */
    div[style*="font-size:28px"] { font-size: 20px !important; }
}

/* ─── Tablets (768px – 991px) ────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 991px) {
    /* 2-column grids on tablet */
    .col-lg-3 { flex: 0 0 50% !important; max-width: 50% !important; }
    .col-lg-4 { flex: 0 0 100% !important; max-width: 100% !important; }

    /* Slightly smaller main padding */
    .container { padding-left: 20px !important; padding-right: 20px !important; }

    /* Sticky CTA: don't stick on tablet either */
    .sticky-cta { position: static !important; }
}

/* ─── Touch target sizing (applies to all small screens) ─────────────────── */
@media (max-width: 1024px) {
    a.student-nav-link,
    .s-icon { min-height: 44px; min-width: 44px; }
    
    input[type="checkbox"],
    input[type="radio"] { width: 20px; height: 20px; }
}

/* ─── T16: Teacher pages — consolidated mobile rules ─────────────────────── */
/* Replaces the inline Teacher Mobile Fixes blocks in teacher/*.php            */
@media (max-width: 768px) {

    /* Column overrides specific to teacher layouts */
    .col-md-4, .col-md-6, .col-lg-4, .col-lg-5,
    .col-lg-6, .col-lg-7, .col-lg-8 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    /* Keep 2-column for stat card halves */
    .col-6.col-md-4, .col-6.col-lg-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Teacher heading scale */
    h3.fw-800, h4.fw-800 { font-size: 1.1rem !important; }

    /* Scrollable tables on teacher pages */
    .tbi-table-wrap, .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Stacked flex toolbars */
    .d-flex.justify-content-between { flex-wrap: wrap !important; gap: 8px !important; }

    /* Smaller button text on sm buttons (grading cards, enroll) */
    .btn-sm { font-size: 12px !important; }

    /* Canvas/chart: never overflow */
    canvas { max-width: 100% !important; }

    /* Table action cells wrap gracefully */
    td .d-flex { flex-wrap: wrap !important; gap: 4px !important; }
}