/* ============================================================
   Proten LMS — Responsive / Mobile-First Styles
   ============================================================ */

/* ── TABLET (max 1024px) ─────────────────────────────────────── */
@media (max-width: 1024px) {
    .proten-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .proten-grid-4 { grid-template-columns: repeat(2, 1fr); }

    .proten-course-hero-inner { grid-template-columns: 1fr; }
    .proten-course-hero-inner .proten-course-sidebar {
        position: static;
        max-width: 480px;
        margin: 0 auto;
    }

    .proten-course-body-inner { grid-template-columns: 1fr; }
    .proten-course-body-inner .proten-course-sidebar { position: static; }

    .proten-dashboard-stats    { grid-template-columns: repeat(2, 1fr); }
    .proten-analytics-grid     { grid-template-columns: repeat(2, 1fr); }
    .proten-dashboard-content  { grid-template-columns: 1fr; }
    .proten-gamification-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* ── MOBILE (max 768px) ──────────────────────────────────────── */
@media (max-width: 768px) {
    .proten-container { padding: 0 16px; }

    /* Grid collapses */
    .proten-grid-3,
    .proten-grid-4  { grid-template-columns: 1fr; }

    /* Course hero */
    .proten-course-hero { padding: 24px 0; }
    .proten-course-hero h1 { font-size: 22px; }
    .proten-course-hero-meta { gap: 12px; font-size: 13px; }

    /* Lesson layout — stack on mobile */
    .proten-lesson-layout { grid-template-columns: 1fr; }
    .proten-lesson-sidebar {
        position: fixed; left: -300px; top: 0;
        width: 300px; height: 100vh;
        z-index: 9990; transition: left .3s ease;
        box-shadow: var(--proten-shadow-lg);
    }
    .proten-lesson-sidebar.open { left: 0; }
    .proten-lesson-overlay {
        display: none; position: fixed; inset: 0;
        background: rgba(0,0,0,.5); z-index: 9989;
    }
    .proten-lesson-overlay.open { display: block; }
    .proten-lesson-main { padding: 20px 16px; }
    .proten-lesson-title { font-size: 20px; }

    /* Dashboard */
    .proten-dashboard-header { padding: 24px 20px; }
    .proten-dashboard-name   { font-size: 22px; }
    .proten-dashboard-stats  { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .proten-stat-value       { font-size: 22px; }
    .proten-analytics-grid   { grid-template-columns: repeat(2, 1fr); }
    .proten-gamification-panel { grid-template-columns: 1fr; }

    /* My course row */
    .proten-my-course { grid-template-columns: 80px 1fr; }
    .proten-my-course > .proten-btn { display: none; }

    /* Filters */
    .proten-filters { flex-direction: column; align-items: stretch; }
    .proten-filter-search { min-width: unset; }

    /* Section header */
    .proten-section-title { font-size: 22px; }
    .proten-section-header { flex-direction: column; align-items: flex-start; }

    /* AI widget */
    .proten-ai-panel { width: calc(100vw - 48px); right: 0; }

    /* Badges */
    .proten-badges-grid { grid-template-columns: repeat(3, 1fr); }

    /* Quiz */
    .proten-quiz-wrap { padding: 16px 0; }
    .proten-quiz-score { font-size: 48px; }

    /* Certificate */
    .proten-cert-recipient { font-size: 26px; }
    .proten-cert-footer { flex-direction: column; align-items: center; gap: 16px; }

    /* Category tabs */
    .proten-category-tabs { gap: 6px; }
    .proten-category-tab  { padding: 6px 14px; font-size: 12px; }

    /* Forum */
    .proten-forum-post { grid-template-columns: 36px 1fr; }
    .proten-forum-avatar img { width: 36px; height: 36px; }

    /* Buttons */
    .proten-btn-full-mobile { width: 100%; }

    /* Modals */
    .proten-modal { margin: 10px; max-height: 95vh; }
    .proten-modal-body { padding: 16px; }

    /* Instructor header */
    .proten-instructor-header { padding: 24px 20px; }
}

/* ── SMALL MOBILE (max 480px) ────────────────────────────────── */
@media (max-width: 480px) {
    .proten-dashboard-stats { grid-template-columns: 1fr 1fr; }
    .proten-analytics-grid  { grid-template-columns: 1fr 1fr; }
    .proten-badges-grid     { grid-template-columns: repeat(3, 1fr); }
    .proten-quiz-meta       { flex-direction: column; gap: 6px; }
    .proten-course-footer   { flex-direction: column; align-items: flex-start; }
    .proten-cert-actions    { flex-direction: column; }
    .proten-cert-actions .proten-btn { width: 100%; }

    .proten-lesson-complete-bar { flex-direction: column; gap: 12px; }
    .proten-lesson-complete-bar .proten-btn { width: 100%; justify-content: center; }

    .proten-course-sidebar-body .proten-btn { width: 100%; }
}

/* ── PRINT (certificate) ─────────────────────────────────────── */
@media print {
    .proten-cert-actions,
    .proten-ai-widget,
    .proten-toast-container { display: none !important; }

    .proten-cert-wrap {
        box-shadow: none;
        border: 2px solid var(--proten-gray-200);
    }
}

/* ── DARK MODE (optional, respects OS preference) ────────────── */
@media (prefers-color-scheme: dark) {
    /* Only apply if user hasn't set a custom theme */
    .proten-dark-mode .proten-card,
    .proten-dark-mode .proten-course-card,
    .proten-dark-mode .proten-forum-post,
    .proten-dark-mode .proten-quiz-question,
    .proten-dark-mode .proten-my-course {
        background: #1e1e1e;
        border-color: #333;
        color: #e0e0e0;
    }
}