/* ============================================================================
   ЧистоШава · Админ-панель :8091 — МОБИЛЬНЫЙ СЛОЙ (PWA)
   Создан 10.09.2026 по решению Ильи (отменяет канон 02.08.2026 «админка только десктоп»).

   ПРАВИЛА ФАЙЛА:
   · Всё живёт внутри @media (max-width: 900px) — десктоп не трогаем НИКОГДА.
   · Цвета только через var(--…) из style.css → тёмная тема работает сама.
   · Тач-цель минимум 44×44 px, шрифт полей 16px (иначе iOS зумит страницу).
   · Никакого дублирования списка разделов: меню строится из уже отрендеренного
     сайдбара (#sb), поэтому права наследуются с сервера один в один.
   ============================================================================ */

@media (max-width: 900px) {

/* iOS самовольно увеличивает шрифт в блоках с длинным текстом (text autosizing):
   на главной строки «Сайт сегодня / На смене / Монеты ЧШ» вырастали крупнее
   заголовков карточек. Фиксируем масштаб — размеры берём из макета. */
html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ---------- 0. Каркас страницы ---------------------------------------- */

:root {
    --mob-tabbar-h: 58px;
    --mob-header-h: 54px;
    /* Нижний запас под панелью: не меньше 12px (≈1/5 высоты панели). Илья 02.10.2026: «нижние кнопки
       режутся углами скругления айфона — подними на 1/6–1/5». В Safari без viewport-fit=cover
       env(safe-area-inset-bottom) = 0, и панель лежала вплотную к скруглённому краю экрана.
       Все, кто ставит элементы над панелью (ИИ-кнопка, подсказка ПВА, панели действий), берут эту же
       переменную — поднимаются вместе с ней. */
    --mob-safe-b: max(env(safe-area-inset-bottom, 0px), 12px);
    --mob-gap: 12px;
}

body.mob-on {
    /* Контент не должен уезжать под нижнюю панель */
    padding-bottom: calc(var(--mob-tabbar-h) + var(--mob-safe-b)) !important;
    overscroll-behavior-y: contain;
}

body.mob-on .main {
    padding: 12px 12px 20px !important;
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Сайдбар и бургер на телефоне не используем — навигация внизу (решение Ильи 10.09.2026) */
body.mob-on #sb,
body.mob-on #ov,
body.mob-on .menu-toggle { display: none !important; }

/* Прокрутка страницы не должна «дёргаться» под фиксированными панелями */
body.mob-on.mob-locked { overflow: hidden; position: fixed; width: 100%; }


/* ---------- 1. Верхняя шапка ------------------------------------------ */

body.mob-on .header,
body.mob-on header.header,
body.mob-on header.mobile-header {
    position: sticky; top: 0; z-index: 40;
    height: var(--mob-header-h);
    min-height: var(--mob-header-h);
    padding: 0 8px 0 4px !important;
    display: flex; align-items: center; gap: 6px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(15, 15, 18, 0.04);
}

/* Кнопка «назад» — появляется на всех страницах кроме главной */
.mob-back {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    display: none;                       /* включает JS */
    align-items: center; justify-content: center;
    border: 0; background: transparent; cursor: pointer;
    color: var(--text-2); border-radius: var(--radius-sm);
    -webkit-tap-highlight-color: transparent;
}
body.mob-on .mob-back.is-on { display: flex; }
.mob-back:active { background: var(--surface-2); }
.mob-back svg { width: 22px; height: 22px; stroke-width: 2.2; }

/* Заголовок текущего раздела вместо крупного логотипа */
.mob-title {
    display: none;
    flex: 1 1 auto; min-width: 0;
    font-size: 16px; font-weight: 700; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.25;
}
body.mob-on .mob-title.is-on { display: block; }

/* Логотип в шапке — только на главной, и компактный */
body.mob-on .header .header-logo,
body.mob-on .header .brand-logo,
body.mob-on .mobile-header .logo-mobile img,
body.mob-on .mobile-header img { max-height: 30px; width: auto; }
body.mob-on .header .header-left { min-width: 0; overflow: hidden; }
body.mob-on .header.mob-has-title .header-logo,
body.mob-on .header.mob-has-title .header-left,
body.mob-on .mobile-header.mob-has-title .logo-mobile { display: none !important; }

/*  Колокольчик уведомлений. В десктопной вёрстке он внизу сайдбара, а сайдбар на
    телефоне скрыт — mobile.js переносит сам элемент в шапку, а список под неё.    */
body.mob-on .mob-bell {
    flex: 0 0 auto;
    margin-left: auto;                       /* прижат к правому краю шапки */
    width: 44px; min-width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    padding: 0; font-size: 0; line-height: 1;          /* гасим остатки эмодзи */
    position: relative;
    /* У кнопки классы .btn .btn-sm — на десктопе это рамка и фон. В шапке
       телефона значок должен быть просто значком, как в сайдбаре. */
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--text-2);
}
body.mob-on .mob-bell .ic,
body.mob-on .mob-theme .ic { width: 22px; height: 22px; opacity: 1; }
body.mob-on .mob-bell:active { background: var(--surface-2); border-radius: var(--radius-sm); }
body.mob-on .mob-bell #cs-bell-badge {
    top: 3px !important; right: 3px !important;
}

body.mob-on .mob-bell-wrap {
    position: fixed !important;
    top: var(--mob-header-h); left: 8px; right: 8px;
    z-index: 95;                             /* выше шапки .mobile-header (90) */
    max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    margin-top: 0 !important;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius, 14px);
    box-shadow: var(--shadow-md, 0 10px 25px rgba(15, 15, 18, 0.12));
}
body.mob-on .mob-bell-wrap > * { font-size: 13.5px; line-height: 1.45; }
body.mob-on .mob-bell-wrap a { padding: 6px 0; display: inline-block; }

/* Переключатель день/ночь — рядом с колокольчиком, в том же размере */
body.mob-on .mob-theme {
    flex: 0 0 auto;
    width: 44px; min-width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    padding: 0; font-size: 0; line-height: 1;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--text-2);
}
/*  Внутри переключателя два состояния (день/ночь); какое показать — решают
    правила style.css по data-theme. Своим display их перекрывать НЕЛЬЗЯ, иначе
    видно оба значка сразу. Центрируем, не трогая видимость. */
body.mob-on .mob-theme .giro-day,
body.mob-on .mob-theme .giro-night { align-items: center; justify-content: center; line-height: 0; }
body.mob-on .mob-theme:active { background: var(--surface-2); border-radius: var(--radius-sm); }
/*  В сайдбаре переключатель позиционирован абсолютно (он «висит» на логотипе).
    В шапке это клало его поверх колокольчика — оба оказывались в одной точке.
    Возвращаем в поток; вправо прижимает колокольчик, тема встаёт следом за ним. */
body.mob-on .mob-theme {
    position: static !important;
    top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
    transform: none !important;
    margin: 0 !important;
}

/* Правые кнопки шапки (тема, уведомления) — 44px */
body.mob-on .header button,
body.mob-on .header .header-right a,
body.mob-on .mobile-header button:not(.mob-back),
body.mob-on .mobile-header a {
    min-width: 44px; min-height: 44px;
}


/* ---------- 2. Нижняя панель (таб-бар) -------------------------------- */

.mob-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: flex;
    height: calc(var(--mob-tabbar-h) + var(--mob-safe-b));
    padding-bottom: var(--mob-safe-b);
    /* крайние вкладки («Главная», «Разделы») — подальше от скруглённых углов */
    padding-left: max(env(safe-area-inset-left, 0px), 10px);
    padding-right: max(env(safe-area-inset-right, 0px), 10px);
    box-sizing: border-box;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 10px rgba(15, 15, 18, 0.05);
}
html[data-theme="dark"] .mob-tabbar { box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.35); }

.mob-tab {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    padding: 6px 2px 4px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 10.5px; font-weight: 600; line-height: 1.15;
    letter-spacing: -0.01em;
    background: none; border: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    transition: color 0.15s var(--ease-out, ease-out);
}
.mob-tab svg { width: 22px; height: 22px; stroke-width: 1.9; flex: 0 0 auto; }
.mob-tab span {
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mob-tab:active { color: var(--text-2); }

.mob-tab.is-active { color: var(--text); }
.mob-tab.is-active svg { stroke-width: 2.3; }
/* Активная вкладка помечается брендовой чертой сверху, а не заливкой */
.mob-tab.is-active::before {
    content: "";
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 26px; height: 3px; border-radius: 0 0 3px 3px;
    background: var(--brand-yellow);
}

/* Счётчик «требует внимания» на вкладке */
.mob-tab-badge {
    position: absolute; top: 4px; left: calc(50% + 7px);
    min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 999px;
    background: var(--danger, #E84855); color: #fff;
    font-size: 10px; font-weight: 800; line-height: 17px;
    text-align: center;
    border: 2px solid var(--surface);
    box-sizing: content-box;
}


/*  Внутри Telegram нижняя панель прижимается к самому краю: у мини-приложения
    своя нижняя зона (полоса «домой» на iPhone), и env(safe-area-inset-bottom)
    там не даёт нужного запаса — подписи кнопок подрезаются. Добавляем свой.   */
body.mob-in-tg {
    padding-bottom: calc(var(--mob-tabbar-h) + max(var(--mob-safe-b), 22px)) !important;
}
body.mob-in-tg .mob-tabbar {
    height: calc(var(--mob-tabbar-h) + max(var(--mob-safe-b), 22px));
    padding-bottom: max(var(--mob-safe-b), 22px);
}
body.mob-in-tg .mob-sheet-body {
    padding-bottom: calc(30px + max(var(--mob-safe-b), 22px));
}


/* ---------- 3. Экран «Разделы» ---------------------------------------- */

.mob-sheet {
    position: fixed; inset: 0; z-index: 60;
    background: var(--bg);
    display: flex; flex-direction: column;
    /* Появление: снизу вверх, затухающее ускорение */
    transform: translateY(100%);
    transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mob-sheet.is-open { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .mob-sheet { transition: none; }
}

.mob-sheet-head {
    flex: 0 0 auto;
    padding: 10px 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.mob-sheet-headrow {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.mob-sheet-h {
    flex: 1 1 auto;
    font-size: 17px; font-weight: 800; color: var(--text); margin: 0;
    letter-spacing: -0.01em;
}
.mob-sheet-close {
    flex: 0 0 auto; width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border: 0; background: transparent; color: var(--text-2);
    border-radius: var(--radius-sm); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-sheet-close:active { background: var(--surface-2); }
.mob-sheet-close svg { width: 22px; height: 22px; stroke-width: 2.2; }

.mob-search {
    width: 100%; box-sizing: border-box;
    height: 44px; padding: 0 14px;
    font-size: 16px;                      /* < 16px → iOS зумит страницу */
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    -webkit-appearance: none;
}
.mob-search::placeholder { color: var(--text-muted); }
.mob-search:focus {
    outline: none;
    border-color: var(--brand-yellow);
    background: var(--surface);
}

.mob-sheet-body {
    flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 14px 12px calc(24px + var(--mob-safe-b));
}

/* Блок «Уведомления на телефон» — первым на экране «Разделы»:
   включать их надо по нажатию (iOS отклоняет автоматический запрос навсегда),
   поэтому кнопка должна попасться на глаза. */
.mob-push {
    margin-bottom: 16px; padding: 13px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius, 14px);
}
.mob-push-h {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 10px;
}
.mob-push-h svg { width: 18px; height: 18px; stroke-width: 2; color: var(--brand-yellow-deep, #16A34A); }
html[data-theme="dark"] .mob-push-h svg { color: var(--brand-yellow); }
.mob-push-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mob-push-btn {
    flex: 1 1 auto; min-height: 44px; padding: 0 14px;
    border: 1px solid var(--border); border-radius: var(--radius-sm, 10px);
    background: var(--surface-2); color: var(--text-2);
    font-size: 14px; font-weight: 650; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-push-btn:active { background: var(--border); }
.mob-push-btn[disabled] { opacity: 0.55; }
.mob-push-on {
    background: var(--brand-yellow); border-color: var(--brand-yellow);
    color: var(--brand-black, #1A2B4B); font-weight: 800;
}
.mob-push-off { flex: 0 0 auto; color: var(--text-muted); }
.mob-push-ok {
    flex: 1 1 auto; display: flex; align-items: center;
    font-size: 14px; font-weight: 700; color: var(--success, #10B981);
}
.mob-push-note {
    margin-top: 9px; font-size: 12.5px; line-height: 1.45; color: var(--text-muted);
}
.mob-push-link {
    display: block; margin-top: 10px; min-height: 24px;
    font-size: 13.5px; font-weight: 600; color: var(--text-2);
    text-decoration: none; text-underline-offset: 3px;
}
.mob-push-link:active { text-decoration: underline; }

/* Блок «Недавние» — чипами, потому что это ярлыки, а не раздел каталога */
.mob-recent { margin-bottom: 18px; }
.mob-sub {
    font-size: 11px; font-weight: 700; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--text-subtle);
    margin: 0 2px 8px;
}
.mob-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.mob-chip {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 38px; padding: 0 13px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 13.5px; font-weight: 600; color: var(--text-2);
    text-decoration: none;
    max-width: 100%;
}
.mob-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mob-chip:active { background: var(--surface-2); }

/* Плитки групп */
.mob-tiles {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.mob-tile {
    display: flex; flex-direction: column; gap: 8px;
    min-height: 96px; padding: 13px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius, 14px);
    text-align: left; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    transition: transform 0.12s var(--ease-out, ease-out), border-color 0.12s;
}
.mob-tile:active { transform: scale(0.975); border-color: var(--text-subtle); }
.mob-tile-ico {
    width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-2); color: var(--text-2);
}
.mob-tile-ico svg { width: 19px; height: 19px; stroke-width: 1.9; }
.mob-tile-name {
    font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.28;
    letter-spacing: -0.01em;
}
.mob-tile-cnt { font-size: 11.5px; color: var(--text-muted); font-weight: 500; }
.mob-tile-badge {
    position: absolute; top: 10px; right: 10px;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px;
    background: var(--danger, #E84855); color: #fff;
    font-size: 11px; font-weight: 800; line-height: 20px; text-align: center;
}

/* Список разделов внутри выбранной группы / результаты поиска */
.mob-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius, 14px);
    overflow: hidden;
}
.mob-row {
    display: flex; align-items: center; gap: 11px;
    min-height: 52px; padding: 8px 12px;
    color: var(--text-2); text-decoration: none;
    border-bottom: 1px solid var(--border-soft, var(--border));
    -webkit-tap-highlight-color: transparent;
}
.mob-row:last-child { border-bottom: 0; }
.mob-row:active { background: var(--surface-2); }
.mob-row-ico { flex: 0 0 auto; width: 20px; height: 20px; color: var(--text-subtle); }
.mob-row-ico svg { width: 20px; height: 20px; stroke-width: 1.8; }
.mob-row-name {
    flex: 1 1 auto; min-width: 0;
    font-size: 14.5px; font-weight: 600; line-height: 1.3;
}
.mob-row-grp { display: block; font-size: 11.5px; color: var(--text-muted); font-weight: 500; margin-top: 1px; }
.mob-row.is-active { background: var(--surface-2); }
.mob-row.is-active .mob-row-name { color: var(--text); }
.mob-row-chev { flex: 0 0 auto; color: var(--text-subtle); }
.mob-row-chev svg { width: 17px; height: 17px; stroke-width: 2; }

/* Кнопка «закрепить внизу» — персональный набор вкладок у каждого админа */
.mob-pin {
    flex: 0 0 auto; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border: 0; background: transparent; cursor: pointer;
    color: var(--text-subtle); border-radius: 999px;
    -webkit-tap-highlight-color: transparent;
}
.mob-pin:active { background: var(--surface-2); }
.mob-pin svg { width: 18px; height: 18px; stroke-width: 1.9; }
.mob-pin.is-pinned { color: var(--brand-yellow-deep, #16A34A); }
html[data-theme="dark"] .mob-pin.is-pinned { color: var(--brand-yellow); }
.mob-pin.is-pinned svg { fill: currentColor; stroke-width: 1.4; }

.mob-grp-back {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 40px; margin-bottom: 10px; padding: 0 12px 0 8px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 13.5px; font-weight: 650; color: var(--text-2);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mob-grp-back svg { width: 17px; height: 17px; stroke-width: 2.2; }

.mob-empty {
    padding: 34px 16px; text-align: center;
    color: var(--text-muted); font-size: 14px;
}


/* ---------- 4. Таблицы → карточки ------------------------------------- */
/*  Класс .mob-cards ставит JS: он же проставляет каждой ячейке data-label
    из заголовка колонки. Разметка <table> сохраняется, поэтому все обработчики
    строк (клик по тикету, выделение) продолжают работать.                    */

.main table.mob-cards {
    display: block;
    overflow: visible;                    /* перебиваем Фазу 0 с overflow-x:auto */
    border: 0; background: transparent;
    box-shadow: none;
    /* Шаблоны задают таблицам inline min-width (например 520px) под десктоп.
       В режиме карточек он не нужен, а inline-стиль перебивается только !important —
       иначе таблица распирает страницу и утаскивает за собой нижнюю панель. */
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}
.main table.mob-cards tbody,
.main table.mob-cards tfoot,
.main table.mob-cards tbody tr,
.main table.mob-cards tfoot tr { min-width: 0 !important; max-width: 100%; }
.main table.mob-cards thead { display: none; }
.main table.mob-cards tbody { display: block; }

.main table.mob-cards tbody tr {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 10px);
    padding: 10px 12px;
    margin-bottom: 8px;
}
.main table.mob-cards tbody tr:last-child { margin-bottom: 0; }

.main table.mob-cards tbody td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    border: 0;
    text-align: right;
    font-size: 13.5px;
    line-height: 1.4;
    /* Десктопные ячейки часто идут с white-space:nowrap — в карточке это распирает
       страницу вбок, поэтому перенос включаем принудительно. */
    white-space: normal !important;
    width: auto !important;
    min-width: 0;
    max-width: 100%;
}
.main table.mob-cards tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 48%;
    text-align: left;
    font-size: 12px; font-weight: 600;
    color: var(--text-muted);
    letter-spacing: -0.005em;
}
/* Ячейка без подписи (пустой заголовок колонки — кнопки действий) занимает всю ширину */
.main table.mob-cards tbody td[data-label=""]::before,
.main table.mob-cards tbody td:not([data-label])::before { content: none; }
.main table.mob-cards tbody td[data-label=""],
.main table.mob-cards tbody td:not([data-label]) {
    justify-content: flex-start; text-align: left;
}

/* Первая ячейка строки — заголовок карточки */
.main table.mob-cards tbody td.mob-cell-head {
    display: block; text-align: left;
    white-space: normal !important;
    padding: 0 0 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border-soft, var(--border));
    font-size: 15px; font-weight: 700; color: var(--text);
}
.main table.mob-cards tbody td.mob-cell-head::before { content: none; }

/* Пустые ячейки не занимают место в карточке */
.main table.mob-cards tbody td.mob-cell-empty { display: none; }

/* Итоговая строка (tfoot) — отдельная карточка с акцентом, а не хвост таблицы */
.main table.mob-cards tfoot { display: block; }
.main table.mob-cards tfoot tr {
    display: block;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 10px);
    padding: 10px 12px;
    margin-top: 8px;
}
.main table.mob-cards tfoot td,
.main table.mob-cards tfoot th {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; padding: 4px 0; border: 0;
    text-align: right; font-size: 13.5px; font-weight: 700;
    white-space: normal !important; width: auto !important; max-width: 100%;
}
.main table.mob-cards tfoot td::before,
.main table.mob-cards tfoot th::before {
    content: attr(data-label);
    flex: 0 0 auto; max-width: 48%; text-align: left;
    font-size: 12px; font-weight: 600; color: var(--text-muted);
}
.main table.mob-cards tfoot td.mob-cell-empty,
.main table.mob-cards tfoot th.mob-cell-empty { display: none; }

/* Строки-итоги и подзаголовки внутри таблицы остаются во всю ширину */
.main table.mob-cards tbody tr.mob-row-span td { display: block; text-align: left; }
.main table.mob-cards tbody tr.mob-row-span td::before { content: none; }
.main table.mob-cards tbody tr.mob-row-span {
    background: var(--surface-2); font-weight: 700;
}

/* Управляющие элементы внутри карточки не должны слипаться */
.main table.mob-cards tbody td .btn,
.main table.mob-cards tbody td button,
.main table.mob-cards tbody td a.btn { min-height: 40px; }
.main table.mob-cards tbody td form { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* Таблицы, оставшиеся таблицами (узкие), скроллятся в своей обёртке */
.main .mob-scroll {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin: 0 -12px; padding: 0 12px;
}
.main .mob-scroll > table { min-width: max-content; }
.main .mob-scroll::-webkit-scrollbar { height: 5px; }
.main .mob-scroll::-webkit-scrollbar-thumb {
    background: var(--border); border-radius: 999px;
}
/* Подсказка, что таблицу можно листать вбок */
.mob-scroll-hint {
    font-size: 11.5px; color: var(--text-muted);
    margin: 0 0 6px; display: flex; align-items: center; gap: 5px;
}


/* ---------- 5. Общая правка мелочей под палец ------------------------- */

body.mob-on .main .btn,
body.mob-on .main button:not(.mob-pin):not(.mob-sheet-close),
body.mob-on .main input[type="submit"],
body.mob-on .main a.btn {
    min-height: 44px;
    padding-top: 9px; padding-bottom: 9px;
    font-size: 14.5px;
}
body.mob-on .main .btn-sm,
body.mob-on .main .btn.btn-sm { min-height: 40px; font-size: 13.5px; }

body.mob-on .main input,
body.mob-on .main select,
body.mob-on .main textarea {
    font-size: 16px !important;           /* без этого iOS зумит при фокусе */
    min-height: 44px;
    box-sizing: border-box;
    max-width: 100%;
}
body.mob-on .main textarea { min-height: 88px; }

/* Ссылки в тексте страницы получают зону нажатия, не ломая строку */
body.mob-on .main .card a:not(.btn):not(.mob-row):not(.nav-item) {
    padding: 2px 0;
    text-underline-offset: 2px;
}

/* Карточки и гриды — в одну колонку, без горизонтального выезда.
   Десктоп раскладывает карточки флексом с жёсткой основой (например flex:2 1 440px).
   На экране 390px такая основа шире контейнера и распирает ВСЮ страницу, утаскивая
   за собой нижнюю панель. Поэтому на телефоне карточка всегда во всю ширину. */
body.mob-on .main .card {
    padding: 14px 13px;
    border-radius: var(--radius, 14px);
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
}
/* Флекс-дети внутри карточек тоже должны уметь сжиматься */
body.mob-on .main .card > div,
body.mob-on .main .card > div > div { min-width: 0; }

/* Блок, который всё равно шире экрана (широкий график, жёсткая таблица), получает
   собственную прокрутку и больше не распирает страницу. Класс ставит mobile.js. */
body.mob-on .main .mob-wide {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
body.mob-on .main .mob-wide::-webkit-scrollbar { height: 5px; }
body.mob-on .main .mob-wide::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
body.mob-on .main .grid,
body.mob-on .main .cards,
body.mob-on .main .stats-grid,
body.mob-on .main div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}
/* Ряды, сверстанные флексом (фильтры, тулбары, шапки карточек), на узком экране
   обязаны переноситься: без wrap их дети просто вылезают за границы контейнера и
   распирают страницу — при этом сам контейнер остаётся нормальной ширины, поэтому
   поймать это по ширине родителя нельзя. Для не-флекс элементов свойство безвредно.
   Ленты, которые задуманы как горизонтальный скролл, исключены ниже. */
body.mob-on .main *:not(.tabs):not(.chips):not(.seg):not(.mob-nowrap) {
    flex-wrap: wrap;
}
/* Исключение: «галочка + подпись». Общий перенос выше выбрасывал подпись на
   следующую строку, и между квадратиком и текстом зияла дыра в пол-экрана
   (Илья прислал такой экран 11.09.2026). Подпись сама переносится внутри себя. */
body.mob-on .main *:has(> input[type="checkbox"]),
body.mob-on .main *:has(> input[type="radio"]) {
    flex-wrap: nowrap !important;
    align-items: center !important;
}

/* Заголовок страницы: 30px по макету десктопа занимают на телефоне две-три строки */
body.mob-on .main .page-title { font-size: 20px !important; line-height: 1.25 !important; }
body.mob-on .main .page-subtitle { font-size: 13px !important; line-height: 1.4 !important; }

/* Флекс-дети должны уметь сжиматься ниже своего контента */
body.mob-on .main form > *,
body.mob-on .main .card > * { min-width: 0; }

/*  Шрифты дашборда. Шаблоны задают размеры инлайном под десктоп (18–22px жирным),
    на 390px такие строки переносятся по два-три раза и «съедают» экран.
    Inline перебивается только !important. Соотношения сохраняем: герой крупнее
    заголовка, заголовок крупнее строки.                                        */
body.mob-on .main [style*="font-size:22px"],
body.mob-on .main [style*="font-size: 22px"] { font-size: 19px !important; }
body.mob-on .main [style*="font-size:19px"],
body.mob-on .main [style*="font-size: 19px"],
body.mob-on .main [style*="font-size:18px"],
body.mob-on .main [style*="font-size: 18px"] { font-size: 15.5px !important; }
body.mob-on .main [style*="font-size:17px"],
body.mob-on .main [style*="font-size: 17px"],
body.mob-on .main [style*="font-size:16px"],
body.mob-on .main [style*="font-size: 16px"] { font-size: 14.5px !important; }
body.mob-on .main h2.card-title { font-size: 16px !important; line-height: 1.25; }

/* Длинные цифры с запретом переноса распирают карточку — на телефоне перенос разрешаем */
body.mob-on .main .card [style*="nowrap"] { white-space: normal !important; }

/* Заголовки страниц — компактнее, чем на десктопе */
body.mob-on .main h1 { font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 4px; }
body.mob-on .main h2 { font-size: 18px; line-height: 1.25; letter-spacing: -0.015em; }
body.mob-on .main h3 { font-size: 15.5px; line-height: 1.3; }

/* Графики Chart.js не должны распирать карточку */
body.mob-on .main canvas { max-width: 100% !important; height: auto !important; }
body.mob-on .main img, body.mob-on .main iframe, body.mob-on .main video,
body.mob-on .main embed, body.mob-on .main object { max-width: 100%; }

/* Длинные значения (телефоны, id, ссылки) переносятся, а не рвут раскладку */
body.mob-on .main td, body.mob-on .main .card { overflow-wrap: anywhere; }

/* Горизонтальные ленты вкладок внутри страниц — свайпом */
body.mob-on .main .tabs,
body.mob-on .main .chips,
body.mob-on .main .seg {
    display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap; gap: 6px; scrollbar-width: none;
}
body.mob-on .main .tabs::-webkit-scrollbar,
body.mob-on .main .chips::-webkit-scrollbar { display: none; }


/* ---------- 5a. ИИ-помощник на телефоне -------------------------------- */
/*  Кнопка висела в правом нижнем углу и накрывала «Разделы» — поднимаем над
    нижней панелью. Сам чат на телефоне разворачиваем почти на весь экран:
    в узкой плашке 70vh длинные ответы про смены и выручку читать невозможно.  */
body.mob-on #aiw-fab {
    bottom: calc(var(--mob-tabbar-h) + var(--mob-safe-b) + 12px) !important;
    right: 12px !important;
    width: 50px !important; height: 50px !important;
    z-index: 44 !important;
}

body.mob-on #aiw-panel {
    position: fixed !important;
    left: 0 !important; right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;             /* иначе остаётся calc(100vw - 24px) из base.html */
    max-height: none !important;
    border-radius: 0 !important;
    z-index: 200 !important;                /* выше нижней панели, экрана «Разделы» и шапки .mobile-header (z-index 90) */
    flex-direction: column;
    padding-bottom: var(--mob-safe-b);
}
/* ⛔ display здесь НЕ задаём: видимостью управляет класс .open из base.html
   (`#aiw-panel{display:none}` / `#aiw-panel.open{display:flex}`). Селектор
   `body.mob-on #aiw-panel` специфичнее одиночного `#aiw-panel`, поэтому свой
   display:flex держал бы чат раскрытым всегда и перекрывал бы всю страницу. */
body.mob-on #aiw-panel.open { display: flex; }
body.mob-on #aiw-header {
    flex: 0 0 auto;
    padding-top: calc(env(safe-area-inset-top, 0px) + 6px);
    min-height: 52px;
}
body.mob-on #aiw-header .aiw-title { font-size: 15px; }
body.mob-on #aiw-body {
    flex: 1 1 auto;
    max-height: none !important;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    font-size: 14.5px; line-height: 1.5;
}
body.mob-on #aiw-suggestions {
    flex: 0 0 auto;
    display: flex; gap: 6px; overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
body.mob-on #aiw-suggestions::-webkit-scrollbar { display: none; }
body.mob-on #aiw-suggestions button { white-space: nowrap; min-height: 38px; }
body.mob-on #aiw-input-box { flex: 0 0 auto; align-items: flex-end; gap: 6px; }
body.mob-on #aiw-input {
    font-size: 16px !important;             /* без этого iOS зумит страницу при фокусе */
    max-height: 30vh;
}
body.mob-on #aiw-mic,
body.mob-on #aiw-send,
body.mob-on #aiw-header button,
body.mob-on .aiw-actions button { min-width: 44px; min-height: 44px; }
/* «Открыть на всю страницу» на телефоне бессмысленна — чат и так во весь экран */
body.mob-on #aiw-header button[onclick*="aiwExpand"] { display: none; }


/* ---------- 6. Подсказка «поставить на телефон» ----------------------- */
/*  Подсказка #pwaHint прибита к низу экрана инлайном (bottom:10px) и закрывала
    нижнюю панель — поднимаем её НАД панелью. Inline-стиль перебивается только
    через !important.                                                        */
body.mob-on #pwaHint {
    bottom: calc(var(--mob-tabbar-h) + var(--mob-safe-b) + 10px) !important;
    left: 10px !important; right: 10px !important;
    z-index: 47 !important;
}


/* ---------- 7. Документы и база знаний -------------------------------- */
/*  Раздел, который Илья просил открыть с телефона: список файлов и чтение
    регламентов. Строки-файлы делаем крупными, PDF открывается во весь экран. */

/*  Карточка документа на десктопе — один ряд «иконка · название · кнопки».
    На 390px кнопки съедали всю ширину, а название сжималось до колонки в одно
    слово. Перестраиваем в сетку: иконка и название сверху, кнопки — отдельной
    строкой во всю ширину.                                                     */
body.mob-on .main .doc-card {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 8px 10px;
    padding: 12px 13px;
}
body.mob-on .main .doc-icon { grid-column: 1; font-size: 20px; line-height: 1.2; }
body.mob-on .main .doc-info { grid-column: 2; min-width: 0; }
body.mob-on .main .doc-name { font-size: 14.5px; line-height: 1.3; }
body.mob-on .main .doc-meta { font-size: 12px; line-height: 1.35; }
body.mob-on .main .doc-actions {
    grid-column: 1 / -1;
    display: flex; gap: 8px; width: 100%;
    flex-shrink: 1;
}
body.mob-on .main .doc-actions .doc-btn {
    flex: 1 1 0; min-width: 0;
    justify-content: center;
    min-height: 44px;
    white-space: nowrap;
}
/*  Удаление документа необратимо, а на телефоне палец легко промахивается мимо
    «Скачать». Кнопку не растягиваем, оставляем узкой и с отступом справа.      */
body.mob-on .main .doc-actions form { flex: 0 0 auto; margin-left: auto !important; }
body.mob-on .main .doc-actions form .doc-btn {
    flex: 0 0 auto;
    width: 44px; padding-left: 0; padding-right: 0;
    opacity: 0.75;
}

body.mob-on .main .doc-row,
body.mob-on .main .kb-item {
    min-height: 56px; padding: 12px 0;
}
body.mob-on .main .kb-sec h3,
body.mob-on .main .kb-item h3 { font-size: 15px; }

/* Встроенный просмотр PDF на телефоне бесполезен в мелкой рамке */
body.mob-on .main embed[type="application/pdf"],
body.mob-on .main iframe.pdf-view {
    width: 100%; height: 70vh; min-height: 420px;
}

/* ---------- Окно «Включите уведомления» -------------------------------- */
/*  Показывается при заходе, пока уведомления не разрешены. Поверх всего,
    кнопка во всю ширину: на телефоне в неё попадают, не целясь.           */
.mob-gate {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(15, 15, 18, 0.55);
    display: flex; align-items: flex-end; justify-content: center;
    padding: 16px calc(12px + env(safe-area-inset-right, 0px))
             calc(16px + env(safe-area-inset-bottom, 0px)) calc(12px + env(safe-area-inset-left, 0px));
    animation: mobGateIn .18s ease-out;
}
@keyframes mobGateIn { from { opacity: 0 } to { opacity: 1 } }

.mob-gate-card {
    width: 100%; max-width: 460px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 18px;
    padding: 20px 18px 16px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
    text-align: center;
}
.mob-gate-ico {
    width: 46px; height: 46px; margin: 0 auto 10px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px; background: var(--brand-yellow, #22C55E); color: #1A2B4B;
}
.mob-gate-ico svg { width: 24px; height: 24px; }
.mob-gate-h { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.mob-gate-t { font-size: 13.5px; line-height: 1.45; color: var(--text-muted); }
.mob-gate-note { font-size: 12px; line-height: 1.4; color: var(--text-subtle, var(--text-muted)); margin-top: 8px; }
.mob-gate-row { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.mob-gate-go {
    min-height: 48px; border: 0; border-radius: 12px; cursor: pointer;
    background: var(--brand-yellow, #22C55E); color: #1A2B4B;
    font-size: 15px; font-weight: 700;
}
.mob-gate-go[disabled] { opacity: .6; }
.mob-gate-skip {
    min-height: 42px; border: 0; background: transparent; cursor: pointer;
    color: var(--text-muted); font-size: 13.5px; font-weight: 600;
}

} /* /@media (max-width: 900px) */


/* ============================================================================
   Экран «Разделы» скрыт вне мобильного режима, чтобы разметка не мелькала
   на десктопе до инициализации скрипта.
   ============================================================================ */
.mob-sheet, .mob-tabbar { display: none; }
@media (max-width: 900px) {
    body.mob-on .mob-tabbar { display: flex; }
    body.mob-on .mob-sheet { display: flex; }
}

/* ═══════ Поехавший текст — правка 23.09.2026 (задача Ильи, жалоба Оксаны на тикет) ═══════ */

/* Колонки не переносим: при фиксированной высоте перенос уводит элементы в новую
   колонку справа (лента переписки тикета). Колонки из классов добивает mobile.js. */
body.mob-on .main [style*="flex-direction:column"],
body.mob-on .main [style*="flex-direction: column"] {
    flex-wrap: nowrap !important;
}

/* Шапка таблицы, записанная обычной строкой (без <thead>), в карточках не нужна */
.main table.mob-cards tr.mob-head-row { display: none !important; }

/* Узкие таблицы (2–3 колонки) остаются таблицей, но текст в ячейках переносится.
   Раньше таблица растягивалась по самой длинной фразе в одну строку (max-content):
   история ставок уходила на 2 774 px, и видна была одна первая колонка. */
.main .mob-scroll > table.mob-narrow {
    min-width: 0 !important;
    width: 100% !important;
}
.main .mob-scroll > table.mob-narrow td,
.main .mob-scroll > table.mob-narrow th {
    white-space: normal !important;
    overflow-wrap: break-word;   /* не anywhere: тот ломал по буквам колонку ставок (23.09) */
}

/* Таблицы без заголовков (журналы, топы): строка — карточка, ячейки стопкой */
.main table.mob-stack {
    display: block;
    width: 100% !important; min-width: 0 !important; max-width: 100% !important;
    border: 0; background: transparent; box-shadow: none;
}
.main table.mob-stack thead { display: none; }
.main table.mob-stack tbody { display: block; }
.main table.mob-stack tr {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 10px);
    padding: 8px 12px;
    margin-bottom: 8px;
}
.main table.mob-stack tr:last-child { margin-bottom: 0; }
.main table.mob-stack td,
.main table.mob-stack th {
    display: block;
    border: 0; padding: 2px 0;
    text-align: left !important;
    white-space: normal !important;
    width: auto !important; min-width: 0 !important;
    font-size: 13.5px; line-height: 1.4;
    overflow-wrap: anywhere;
}
.main table.mob-stack td:first-child { font-weight: 600; }
.main table.mob-stack td:empty { display: none; }

/* Формы, сверстанные сеткой (завести контрагента, выплата в карточке сотрудника, финансы,
   найм): в одну колонку, как блоки выше. Раньше правило ловило только div — поле «Комментарий»
   сжималось до 26 px, а кнопки «Зафиксировать» и «Завести контрагента» уезжали за край. */
body.mob-on .main form[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}

/* Логи и служебный вывод: переносим строки вместо прокрутки на полторы тысячи пикселей */
body.mob-on .main pre {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere;
    max-width: 100%;
}