/* Телефон и узкие окна. ВСЕ правила — только внутри @media (max-width: 768px): вид на компьютере не меняется.
   Подключается последним (после extra_css страниц); многие страницы задают раскладку атрибутом style,
   поэтому здесь местами !important и селекторы по style. */
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }

    /* --- шапка: строка 1 — логотип и пользователь, строка 2 — разделы секции, прокручиваются вбок --- */
    .main-header { padding: 8px 0; }
    .main-header nav { flex-wrap: wrap; row-gap: 6px; }
    .main-header .nav-left { display: contents; }
    .main-header .logo { order: 1; padding-right: 0; }
    .main-header .nav-right { order: 2; margin-left: auto; gap: 0; min-width: 0; }
    .main-header .nav-left > ul {
        order: 3; flex: 1 0 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
        -webkit-overflow-scrolling: touch; padding-bottom: 2px;
    }
    .main-header .nav-left > ul::-webkit-scrollbar { display: none; }
    .main-header ul li { flex-shrink: 0; white-space: nowrap; }
    .main-header ul li a { padding: 6px 10px; }
    .main-header .nav-right ul { gap: 2px; }
    .main-header .nav-right ul li a { padding: 6px 8px; }
    .logo-img { height: 34px; }
}

@media (max-width: 768px) {
    /* Typst: узкая версия вместо широкой (на телефоне широкая ужималась втрое) */
    .typst-wide { display: none !important; }
    .typst-narrow { display: block !important; }

    /* --- общее --- */
    h1 { font-size: 1.5rem; line-height: 1.3; }
    h2 { font-size: 1.25rem; }
    .container { padding: 0 12px; }
    .card { padding: 14px; }
    .form-container { padding: 16px; }
    .wide-admin-area-inner { padding: 0 12px; }
    .admin-section { padding: 16px 0 !important; }
    .admin-tabs { gap: 2px; margin-bottom: 16px; scrollbar-width: none; }
    .admin-tab { padding: 10px 12px; }
    main select, main textarea,
    main input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]) { max-width: 100%; box-sizing: border-box; }
    main img, main video { max-width: 100%; height: auto; }
    main pre { white-space: pre-wrap; word-break: break-word; }
    /* заголовок с кнопками справа — кнопки уходят под заголовок */
    main [style*="justify-content: space-between"], main [style*="justify-content:space-between"] { flex-wrap: wrap; gap: 10px; }
    /* строки кнопок и полей (раскладка задана атрибутом style) переносятся, а не уезжают за край */
    main [style*="display: flex"], main [style*="display:flex"] { flex-wrap: wrap; }
    main [style*="display: flex"] > *, main [style*="display:flex"] > * { max-width: 100%; box-sizing: border-box; }
    /* чекбокс/радио с подписью — в одной строке, подпись переносится сама */
    main label[style*="display: flex"], main label[style*="display:flex"],
    main label[style*="display: inline-flex"], main label[style*="display:inline-flex"],
    main [style*="display: flex"]:has(> input[type=checkbox], > input[type=radio]),
    main [style*="display:flex"]:has(> input[type=checkbox], > input[type=radio]) { flex-wrap: nowrap; }
    /* колонки (заданы атрибутом style) — одна под другой; авто-сетки (auto-fill/auto-fit) подстраиваются сами */
    main [style*="grid-template-columns"]:not([style*="auto-fill"]):not([style*="auto-fit"]) { grid-template-columns: 1fr !important; }
    main { overflow-wrap: break-word; }
    /* широкие таблицы — в обёртке с прокруткой вбок (обёртку ставит скрипт в base.html) */
    .mobile-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
    /* таблицы плотнее: на телефоне поля ячеек съедали ширину */
    main th, main td { padding: 8px 6px !important; }
    main table { font-size: 0.9rem; }

    /* --- шапка урока: выбор группы под названием, вкладки — одной строкой с прокруткой --- */
    .lesson-head-row { flex-wrap: wrap; gap: 8px; }
    .lesson-head-group { width: 100%; box-sizing: border-box; }
    .lesson-head-group select { max-width: 100%; }
    .lesson-tabs { flex-wrap: nowrap !important; gap: 0 !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
    .lesson-tabs::-webkit-scrollbar { display: none; }
    .lesson-tabs a { padding: 10px 10px !important; white-space: nowrap; flex-shrink: 0; }
}

@media (max-width: 768px) {
    /* права админов: колонка с именем закреплена, флаги прокручиваются вбок */
    .perm-table th:first-child, .perm-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--color-surface); min-width: 120px; }
    .perm-table th { font-size: 0.8rem; }

    /* плашка «← 3/14 →» на странице задачи висит внизу экрана — конец страницы не должен оставаться под ней */
    .task-nav { left: 8px; bottom: 8px; }
    body:has(.task-nav) main { padding-bottom: 70px; }

    /* ответы всех учеников на вопрос теста: вместо узкой колонки — карточка «имя, оценка / дата / ответ во всю ширину» */
    .answers-table, .answers-table tbody { display: block; }
    .answers-table thead { display: none; }
    .answers-table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; padding: 8px 0; }
    .answers-table td { padding: 2px 0 !important; }
    .answers-table td.ans-name { grid-row: 1; grid-column: 1; font-weight: 600; }
    .answers-table td.ans-mark { grid-row: 1; grid-column: 2; }
    .answers-table td.ans-date { grid-row: 2; grid-column: 1 / -1; font-size: 0.8rem !important; }
    .answers-table td.ans-text { grid-row: 3; grid-column: 1 / -1; }
    .answers-table td[colspan] { grid-column: 1 / -1; }
}