/* ==========================================
   FOCUS — мобильная версия (этап 7, ветка feature/mobile).
   Подключается последним: base.html (после crm.css), public.html (после public.css), b2b.html.
   Все правила — только для экранов до 768 px (и для сенсорных экранов — кнопка Яндекс Музыки):
   на ПК (от 769 px) вид прежний. Цвета — только токены static/css/theme.css.
   Что здесь:
    - поля ввода не мельче 16px (iPhone не увеличивает страницу при фокусе);
    - таблицы-списки → карточки (класс m-cards ставит static/js/crm.js, без JS остаётся прокрутка вбок);
    - широкие таблицы: закреплённая первая колонка (чистый CSS), затухание края и подсказка «листайте вбок»;
    - зоны нажатия от 40×40, расстояние между кнопками от 8 px, текст не мельче 11px;
    - «Трек дня» с Яндекс Музыки: кнопка вместо виджета (виджет на телефоне показывает заглушку).
   ========================================== */

/* Android/Chrome: браузер сам не увеличивает текст (размер задаёт страница и переключатель «Размер текста») */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Переключатель «Размер текста» (кнопки А−, А, А+ создаёт static/js/crm.js в меню; размер — html font-size 90/100/115/130%) */
.text-size { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin-top: 8px; padding: 6px 4px; border-radius: 14px; border: 1px solid var(--focus-glass-line); background: rgba(255, 255, 255, .03); }
.text-size-title { font-size: .55rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; text-align: center; color: var(--focus-muted); line-height: 1.2; }
.text-size-row { display: flex; gap: 2px; }
.text-size button { flex: 1 1 0; min-width: 0; padding: 4px 0; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--focus-text-2); font-family: var(--focus-font-body); font-weight: 800; font-size: .75rem; line-height: 1.2; }
.text-size button:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.text-size button:focus-visible { outline: 0; box-shadow: var(--focus-focus-ring); }
.text-size button[aria-pressed="true"] { color: #fff; background: var(--focus-grad-soft); border-color: rgba(160, 139, 255, .4); }
.text-size button:disabled { opacity: .45; }

/* «Слушать в Яндекс Музыке» — только на телефоне и сенсорных экранах; на ПК — прежний плеер */
.music-open { display: none; }
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .music-open { display: flex; align-items: center; justify-content: center; min-height: 44px; }
    .music-frame-touch { display: none; }
}

@media (max-width: 768px) {
    /* --- А. Поля ввода: не мельче 16px (в том числе -sm и с инлайновым размером шрифта) --- */
    .form-control, .form-select, textarea, select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]),
    .form-control-sm, .form-select-sm, .input-group-sm > .form-control, .input-group-sm > .form-select { font-size: max(16px, 1rem) !important; }
    .form-control-sm, .form-select-sm, .input-group-sm > .form-control, .input-group-sm > .form-select, .input-group-sm > .input-group-text { min-height: 40px; }
    .input-group-sm > .input-group-text { font-size: .875rem; }

    /* --- Д. Кнопки и цели нажатия: от 40×40, между соседними — от 8 px --- */
    /* Отступы, а не display:flex: у кнопки с иконкой и текстом перенос строки остаётся прежним */
    .btn { --bs-btn-padding-y: .5rem; min-height: 40px; min-width: 40px; }
    .btn-sm { --bs-btn-padding-y: .55rem; --bs-btn-padding-x: .75rem; --bs-btn-font-size: .875rem; }
    .btn-link.p-0 { min-width: 0; padding: 0 2px !important; }
    .btn-close { width: 40px; height: 40px; padding: 0; background-size: 14px; }
    .d-flex.gap-1:has(> .btn), .d-flex.gap-1:has(> form > .btn), .d-flex.gap-2:has(> .btn), .d-flex.gap-2:has(> form > .btn) { gap: 8px !important; }
    .btn + .btn:not(.w-100), .btn + form.d-inline, form.d-inline + form.d-inline, form.d-inline + .btn { margin-left: 8px; }
    .btn.me-1, .btn.me-2, .btn.ms-1 + .btn { margin-right: 8px !important; }
    .btn-group > .btn + .btn, .input-group > .btn + .btn { margin-left: 0; }
    .form-check { min-height: 40px; display: flex; align-items: center; gap: .55rem; padding-left: 0; position: relative; }
    .form-check .form-check-input { float: none; margin: 0; flex: 0 0 auto; }
    .form-check-input { width: 22px; height: 22px; }
    .form-switch .form-check-input { width: 44px; height: 24px; }
    .form-check-label { flex: 1 1 auto; }
    /* Расширение зоны нажатия без изменения вида: класс m-hit ставит crm.js маленьким кнопкам и ссылкам */
    .m-hit { position: relative; }
    .m-hit::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
    /* Чекбокс без подписи: зона нажатия — подпись-обёртка или сам чекбокс крупнее */
    .form-check > .form-check-input { position: relative; z-index: 1; }
    .kpi-hint-btn { position: relative; padding: 0 .35rem; }
    .kpi-hint-btn::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
    .d-flex:has(> * > .kpi-hint-btn), .d-flex:has(> .kpi-hint-btn) { min-height: 44px; align-items: center; }
    /* Числа с окном «как посчитано» (role=button ставит metric_explain.js) */
    .metric-explainable { position: relative; }
    .metric-explainable::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
    /* Чекбокс с подписью: вся строка .form-check нажимается (через подпись), сама строка от 40 px */
    .form-check { padding-left: 10px; }
    .form-check > .form-check-label::after { content: ''; position: absolute; inset: 0; }
    .form-check-inline { margin-right: 8px; }
    /* Чекбокс внутри подписи без классов Bootstrap */
    label:has(> input[type="checkbox"]:first-child), label:has(> input[type="radio"]:first-child) { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding-left: 10px; }
    label > input[type="checkbox"]:first-child, label > input[type="radio"]:first-child { width: 22px; height: 22px; flex: 0 0 auto; margin: 0; }
    /* Ссылки на профиль в списках и вкладки рейтинга — от 40 px в высоту */
    .main-content a[href^="/profile/"]:not(.btn), .table td a:not(.btn):not(.badge), .table th a:not(.btn):not(.badge), .metric-link { display: inline-flex; align-items: center; min-height: 40px; min-width: 40px; }
    .neon-stat-box h3.metric-explainable { padding: 6px 0; margin-bottom: 14px !important; }
    .rating-tabs { gap: 8px; }
    .rating-tab { display: inline-flex; align-items: center; min-height: 40px; }
    .city-filters { gap: 8px; }
    .filter-btn { min-height: 44px; }
    .metric-catalog-list { gap: 8px; margin-top: 8px; }
    .metric-catalog-item { min-height: 40px; }
    .metric-ops .btn, .metric-actions .btn, .profit-actions .btn { min-width: 40px; }
    .pagination .page-link { min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center; }

    /* --- Текст не мельче 11px --- */
    .small, small { font-size: max(.875em, 12px); }
    .table th, .table-custom th { font-size: max(.72rem, 11px) !important; }
    .stat-tile h6 { font-size: max(.6875rem, 11px) !important; }
    h6.small, .h6.small { font-size: max(.75rem, 12px); }
    .badge { font-size: max(.75em, 11px); }
    .login-divider { font-size: max(.6875rem, 11px); }
    .metric-step-num { font-size: max(.6875rem, 11px); min-width: 1.4em; height: 1.4em; line-height: 1.4em; }

    /* Нижний док: подписи 11px при любом «Размере текста» (5 колонок по ~70 px: крупнее «Сотрудники» не помещается), строчными */
    .sidebar.dock-ready:not(.show) .is-dock, .sidebar.dock-ready:not(.show) .dock-more {
        font-size: 11px; letter-spacing: -.01em; text-transform: none; line-height: 1.15; padding: 6px 1px; min-height: 60px; overflow-wrap: anywhere; hyphens: auto;
    }
    .sidebar.dock-ready:not(.show) .is-dock i, .sidebar.dock-ready:not(.show) .dock-more i { font-size: 1.25rem; }
    /* На узких экранах (355 px) «Сотрудники» помещается целиком: поля дока 4 px, без промежутков */
    .sidebar.dock-ready:not(.show) { padding-left: 4px; padding-right: 4px; gap: 0; }
    .sidebar.dock-ready:not(.show) .dock-more { flex: .7 1 0; }   /* «Ещё» короткое — его колонка уже */
    /* Отступ снизу = высота дока (её ставит motion.js в --focus-dock-h, при крупном тексте док выше) + 24 px */
    .sidebar.dock-ready ~ .main-wrapper .main-content { padding-bottom: calc(var(--focus-dock-h, 72px) + 24px + env(safe-area-inset-bottom, 0px)); }
    /* Шторка меню: подписи пунктов и разделов не мельче 11px */
    .sidebar.dock-ready.show .nav-link, .sidebar.dock-ready.show .sidebar-quick > a { font-size: clamp(11px, .6875rem, 12.5px); letter-spacing: .02em; overflow-wrap: normal; }
    /* Плитка пунктов: 4 колонки при обычном тексте, 3 — при крупном (ширина колонки в rem) */
    .sidebar.dock-ready.show > ul.nav { grid-template-columns: repeat(auto-fill, minmax(max(4.6rem, calc((100% - 12px) / 4)), 1fr)); }
    .sidebar.dock-ready.show .nav-category { font-size: max(.6875rem, 11px); }
    .sidebar.dock-ready.show > .sidebar-user { font-size: max(.75rem, 12px); }
    .sidebar-user a { width: 44px; height: 44px; }
    /* «Размер текста»: в закрытом доке не показывается, в шторке «Ещё» — строка из крупных кнопок */
    .sidebar.dock-ready:not(.show) > .text-size { display: none; }
    .sidebar.show > .text-size { flex-direction: row; align-items: center; gap: 8px; padding: 8px 10px; margin: 10px 0 0; }
    .sidebar.show .text-size-title { font-size: max(.75rem, 12px); text-align: left; flex: 0 0 auto; letter-spacing: .03em; }
    .sidebar.show .text-size-row { flex: 1 1 auto; gap: 8px; }
    .sidebar.show .text-size button { min-height: 44px; font-size: 1rem; }

    /* --- Ж. Вкладки: обычный перенос строк, без «таблетки»-контейнера --- */
    .nav-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-radius: 18px; padding: 6px; width: 100%; }
    .nav-tabs .nav-link { min-height: 40px; display: flex; align-items: center; padding: 8px 14px; background: rgba(255, 255, 255, .04); }
    .nav-tabs .nav-item { flex: 0 1 auto; }
    /* Плашки уровней (города) в Центре настроек: читаемый текст, не похожи на выключенные */
    .settings-scope .btn-outline-secondary { --bs-btn-color: #fff; --bs-btn-border-color: rgba(127, 179, 255, .45); background-color: var(--focus-surface-3); }
    .settings-scope .btn-outline-secondary i { color: var(--focus-link); }
    /* «Из HH.ru» на «Лидах»: белый текст на фирменной синей кнопке */
    .hh-sync-btn { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; color: #fff !important;
        background: var(--focus-blue-strong); background-image: var(--focus-grad); border-color: rgba(160, 139, 255, .45); }

    /* --- В. Таблицы-карточки (класс m-cards ставит crm.js: строка = карточка, подпись колонки из data-label) --- */
    .table-responsive:has(> table.m-cards) { overflow: visible; }
    table.m-cards { min-width: 0 !important; width: 100% !important; border: 0; white-space: normal; }
    table.m-cards > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    table.m-cards tr.m-head-row { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0 !important; border: 0 !important; }
    table.m-cards > tbody, table.m-cards > tfoot, table.m-cards > tbody > tr, table.m-cards > tfoot > tr { display: block; width: 100%; }
    table.m-cards > tbody > tr, table.m-cards > tfoot > tr {
        background: var(--focus-surface-2); border: 1px solid var(--focus-line-strong); border-radius: 16px; padding: 8px 14px; margin: 0 0 12px;
    }
    table.m-cards > tbody > tr > td, table.m-cards > tbody > tr > th, table.m-cards > tfoot > tr > td, table.m-cards > tfoot > tr > th {
        display: block; position: relative; width: auto !important; min-width: 0 !important; max-width: none !important;
        padding: 8px 0 8px calc(38% + 12px) !important; border: 0 !important; border-bottom: 1px solid var(--focus-line) !important;
        text-align: left !important; white-space: normal !important; overflow-wrap: anywhere; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; min-height: 40px;
    }
    table.m-cards > * > tr > :last-child { border-bottom: 0 !important; }
    table.m-cards > * > tr > [data-label]::before {
        content: attr(data-label); position: absolute; left: 0; top: 10px; width: 38%;
        font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--focus-muted); text-transform: none; letter-spacing: 0; overflow-wrap: anywhere;
    }
    table.m-cards > * > tr > :not([data-label]), table.m-cards > * > tr.m-row-full > * { padding-left: 0 !important; }
    table.m-cards > * > tr.m-row-full > *::before { display: none; }
    table.m-cards > * > tr.m-row-full { text-align: center; }
    table.m-cards > * > tr > .m-empty { display: none; }
    /* Ячейка с кнопками или выпадающим списком: подпись сверху, элементы на всю ширину */
    table.m-cards > * > tr > td.m-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; padding-left: 0 !important; }
    table.m-cards > * > tr > td.m-act[data-label]::before { position: static; flex: 1 1 100%; width: auto; }
    table.m-cards td.m-act > *, table.m-cards td.m-act > form, table.m-cards td.m-act > .d-flex, table.m-cards td.m-act > .d-inline-flex { flex: 1 1 0; min-width: 0; margin: 0 !important; display: flex; gap: 8px; flex-wrap: wrap; }
    table.m-cards td.m-act .btn, table.m-cards td.m-act select, table.m-cards td.m-act .form-select, table.m-cards td.m-act .form-control, table.m-cards td.m-act > a {
        flex: 1 1 0; width: 100% !important; min-height: 40px; min-width: 0; margin: 0 !important;
    }
    table.m-cards td.m-act .btn.border-0 { border: 1px solid var(--focus-line-strong) !important; }
    table.m-cards td.m-act .btn-outline-danger.border-0 { border-color: rgba(255, 90, 110, .6) !important; }
    table.m-cards td.m-act .btn-outline-warning.border-0 { border-color: rgba(255, 201, 60, .55) !important; }
    /* /b2b: кнопки ссылок партнёра — подпись в одну строку, по ширине текста, по 2–3 в ряд */
    table.m-cards td.m-act.b2b-links > a.btn { flex: 1 1 calc(33% - 8px); width: auto !important; min-width: 6.5rem; border-radius: 12px; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; }
    /* Поля внутри карточек — на всю ширину (инлайновые ширины колонок таблицы не мешают) */
    table.m-cards .form-control, table.m-cards .form-select, table.m-cards .input-group { width: 100% !important; max-width: none !important; }
    table.m-cards .d-flex.gap-1 { gap: 8px !important; }
    table.m-cards td .d-flex { flex-wrap: wrap; }   /* «− 6 +» и подобное переносятся при крупном тексте, а не вылезают из карточки */
    table.m-cards .d-flex.justify-content-center { justify-content: flex-start !important; }
    table.m-cards .text-nowrap { white-space: normal !important; }
    table.m-cards img { max-width: 100%; height: auto; }
    table.m-cards .mt-3 { margin-top: 0 !important; }

    /* Календарь контент-плана: дни друг под другом */
    table.m-days { min-width: 0 !important; width: 100% !important; }
    table.m-days > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    table.m-days > tbody, table.m-days > tbody > tr { display: block; width: 100%; }
    table.m-days > tbody > tr > td { display: block; width: auto !important; text-align: left !important; border-radius: 14px; border: 1px solid var(--focus-line-strong) !important; margin-bottom: 8px; padding: 10px 14px; min-height: 48px; }
    table.m-days > tbody > tr > td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 2.2em; margin-right: 8px; font-weight: 800; text-transform: uppercase; font-size: max(.75rem, 12px); opacity: .85; }
    table.m-days > tbody > tr > td > .fw-bold { display: inline-block; }
    table.m-days > tbody > tr > td.m-empty { display: none; }

    /* --- Г. Широкие таблицы: первая колонка закреплена, правый край затухает, подсказка «листайте вбок» --- */
    .table-responsive > .table:not(.m-cards):not(.m-days) > * > tr > :first-child { position: sticky; left: 0; z-index: 1; background-color: var(--focus-sticky-bg); box-shadow: 1px 0 0 var(--focus-line-strong); }
    .table-responsive > .table:not(.m-cards):not(.m-days) > * > tr.table-dark > :first-child,
    .table-responsive > .table:not(.m-cards):not(.m-days) > thead > tr > :first-child,
    .table-responsive > .table:not(.m-cards):not(.m-days) > thead.table-dark > tr > :first-child,
    .table-responsive > .table:not(.m-cards):not(.m-days) > thead.table-light > tr > :first-child { background-color: var(--focus-sticky-head-bg) !important; }   /* !important: crm.css делает фон заголовков прозрачным с !important — иначе прокрученный заголовок просвечивает */
    .table-responsive > .table:not(.m-cards):not(.m-days) > * > tr > :first-child { max-width: 46vw; white-space: normal; }
    .table-responsive.m-scroll:not(.is-end) { -webkit-mask-image: linear-gradient(to right, #000 82%, rgba(0, 0, 0, .35)); mask-image: linear-gradient(to right, #000 82%, rgba(0, 0, 0, .35)); }
    .m-swipe-hint { display: flex; align-items: center; gap: 6px; font-size: max(.75rem, 12px); font-weight: 700; color: var(--focus-text-2); margin: 0 0 6px; padding: 0 2px; }
    .m-swipe-hint i { color: var(--focus-link); }
    .table-responsive.m-scroll.is-end + .m-swipe-hint, .m-swipe-hint.is-hidden { visibility: hidden; }

    /* --- Крупный текст (переключатель «Размер текста», системный шрифт Android) --- */
    /* Поля страницы в rem (14px при 100%): не меньше половины промежутка сетки Bootstrap (.75rem), иначе .row вылезает вбок */
    .main-content { padding-left: .875rem; padding-right: .875rem; }
    /* «Из HH.ru» уходит на следующую строку, если рядом не помещается */
    .d-flex:has(> .hh-sync-btn) { flex-wrap: wrap; gap: 8px; }
    /* Длинные слова и значки не вылезают за экран: переносятся только то, что не помещается (при 100% вид прежний) */
    .main-content { overflow-wrap: break-word; }
    /* Заголовок страницы при крупном тексте не растёт (он и так крупный): длинное «Инвентаризация» не рвётся */
    .page-head h3 { font-size: min(1.15rem, 18.4px) !important; overflow-wrap: anywhere; hyphens: auto; min-width: 0; max-width: 100%; }
    .main-content .form-select, .main-content .form-control, .main-content .form-select.w-auto { max-width: 100%; }
    .main-content .badge { white-space: normal; max-width: 100%; overflow-wrap: anywhere; text-align: start; }
    .audit-row > * { min-width: 0; overflow-wrap: anywhere; }
    /* Строки из кнопок и полей переносятся, если не помещаются (в ячейках таблиц — нет: иначе сожмутся колонки) */
    .main-content .d-flex:not(.flex-nowrap):not(.flex-column):not(td *):not(th *) { flex-wrap: wrap; }
    .main-content .d-flex > .form-select, .main-content .d-flex > .form-control { min-width: 0; }

    /* --- Мелочи --- */
    .main-content form.d-flex { flex-wrap: wrap; }   /* строка формы (подпись + поле + кнопка) не вылезает за экран */
    .card.p-4 { padding: 1rem !important; }
    .hh-sync-btn { white-space: nowrap; }
    table.m-days { border-collapse: separate; border-spacing: 0; }
    .card.p-0 > .m-swipe-hint, .card.p-0 > .table-responsive + .m-swipe-hint { padding: 10px 14px 0; }
    .page-head h3 form .form-select, .page-head h3 form .form-control { min-height: 40px; }
    .modal-dialog { margin: .5rem; }
    .modal-body { padding: 1rem; }
    img, iframe, video { max-width: 100%; }
}