/* ──────────────────────────────────────────────────────────
 * OTS LMS — Responsive
 * v3.0.0
 * ────────────────────────────────────────────────────────── */

/* ═══════ TABLET — max 1024px ═══════ */
@media (max-width: 1024px) {
    /* Header */
    .ots-header__nav { display: none; }
    .ots-header__mobile-toggle { display: flex; }

    /* Course hero */
    .ots-course-hero__inner {
        grid-template-columns: 1fr;
        gap: var(--ots-space-6);
    }
    .ots-course-sidebar-card { max-width: 400px; }

    /* Course body */
    .ots-course-body {
        grid-template-columns: 1fr;
    }
    .ots-course-body__sidebar {
        position: static;
    }

    /* Dashboard */
    .ots-dashboard__sidebar {
        position: fixed;
        left: -260px;
        top: 0;
        height: 100vh;
        z-index: var(--ots-z-sidebar);
        transition: left var(--ots-transition);
    }
    .ots-dashboard__sidebar.is-open {
        left: 0;
    }
    .ots-dashboard__content {
        padding: var(--ots-space-6);
    }

    /* Focus mode */
    .ots-focus-mode__sidebar {
        position: fixed;
        left: -320px;
        top: 0;
        height: 100vh;
        z-index: var(--ots-z-sidebar);
        transition: left var(--ots-transition);
    }
    .ots-focus-mode__sidebar.is-open {
        left: 0;
    }
    .ots-focus-mode__body {
        padding: var(--ots-space-6);
    }

    /* Footer */
    .ots-footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Auth */
    .ots-auth__feature { display: none; }

    /* Stats */
    .ots-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Course grid */
    .ots-course-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ═══════ PHONE — max 768px ═══════ */
@media (max-width: 768px) {
    :root {
        --ots-text-3xl: 1.75rem;
        --ots-text-2xl: 1.375rem;
    }

    /* Containers */
    .ots-container,
    .ots-container-sm,
    .ots-container-lg,
    .ots-container-xl {
        padding-left: var(--ots-space-4);
        padding-right: var(--ots-space-4);
    }

    /* Header */
    .ots-header__inner { height: 56px; padding: 0 var(--ots-space-4); }

    /* Mobile nav overlay */
    .ots-mobile-nav {
        position: fixed;
        inset: 0;
        background: var(--ots-white);
        z-index: var(--ots-z-modal);
        display: none;
        flex-direction: column;
        padding: var(--ots-space-6);
    }
    .ots-mobile-nav.is-open { display: flex; }
    .ots-mobile-nav__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--ots-space-6);
    }
    .ots-mobile-nav__links {
        list-style: none;
        padding: 0;
    }
    .ots-mobile-nav__links a {
        display: block;
        padding: var(--ots-space-3) 0;
        font-size: var(--ots-text-lg);
        font-weight: 500;
        color: var(--ots-gray-700);
        text-decoration: none;
        border-bottom: var(--ots-border);
    }

    /* Course card */
    .ots-course-grid {
        grid-template-columns: 1fr;
    }

    /* Dashboard content */
    .ots-dashboard__content {
        padding: var(--ots-space-4);
    }
    .ots-dashboard__content-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ots-space-3);
    }

    /* Stats */
    .ots-stats-grid {
        grid-template-columns: 1fr;
    }

    /* Tabs */
    .ots-tabs {
        gap: 0;
    }
    .ots-tab {
        padding: var(--ots-space-3) var(--ots-space-3);
        font-size: var(--ots-text-xs);
    }

    /* Table */
    .ots-table-responsive {
        display: block;
    }
    .ots-table-responsive thead { display: none; }
    .ots-table-responsive tbody tr {
        display: block;
        padding: var(--ots-space-4);
        border-bottom: var(--ots-border);
    }
    .ots-table-responsive td {
        display: flex;
        justify-content: space-between;
        padding: var(--ots-space-2) 0;
        border: none;
    }
    .ots-table-responsive td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--ots-gray-600);
    }

    /* Modal */
    .ots-modal {
        margin: var(--ots-space-4);
        max-height: 85vh;
    }
    .ots-modal-body { padding: var(--ots-space-4); }
    .ots-modal-footer { padding: var(--ots-space-3) var(--ots-space-4); }

    /* Footer */
    .ots-footer__grid {
        grid-template-columns: 1fr;
        gap: var(--ots-space-8);
    }
    .ots-footer {
        padding: var(--ots-space-10) 0 var(--ots-space-4);
    }

    /* Archive */
    .ots-archive-header {
        padding: var(--ots-space-8) 0;
    }
    .ots-archive-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    /* Focus mode */
    .ots-focus-mode__body {
        padding: var(--ots-space-4);
    }
    .ots-focus-mode__toolbar {
        padding: var(--ots-space-2) var(--ots-space-4);
    }

    /* Auth */
    .ots-auth__form-wrap {
        max-width: 100%;
    }
    .ots-auth__panel {
        padding: var(--ots-space-5);
    }

    /* Section */
    .ots-section {
        padding: var(--ots-space-10) 0;
    }
}


/* ═══════ SMALL PHONE — max 480px ═══════ */
@media (max-width: 480px) {
    /* Buttons */
    .ots-btn { padding: 0.5rem 0.875rem; font-size: var(--ots-text-xs); }
    .ots-btn-lg { padding: 0.625rem 1rem; font-size: var(--ots-text-sm); }

    /* Card */
    .ots-card-body { padding: var(--ots-space-4); }
    .ots-card-header { padding: var(--ots-space-3) var(--ots-space-4); }

    /* Stat card */
    .ots-stat-card { padding: var(--ots-space-4); }
    .ots-stat-card__value { font-size: var(--ots-text-xl); }

    /* Course hero */
    .ots-course-hero { padding: var(--ots-space-8) 0; }
    .ots-course-hero__title { font-size: 1.5rem; }

    /* Toast */
    .ots-toast-container {
        left: var(--ots-space-2);
        right: var(--ots-space-2);
        top: auto;
        bottom: var(--ots-space-4);
    }
    .ots-toast {
        min-width: 0;
        max-width: none;
    }

    /* Pagination */
    .ots-pagination {
        gap: 0;
    }
    .ots-pagination__item {
        padding: var(--ots-space-2);
        font-size: var(--ots-text-xs);
    }
}


/* ═══════ PRINT ═══════ */
@media print {
    .ots-header,
    .ots-footer,
    .ots-dashboard__sidebar,
    .ots-btn,
    .ots-toast-container,
    .ots-modal-backdrop {
        display: none !important;
    }
    .ots-dashboard__content {
        padding: 0;
    }
    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }
}