/* [p0210-front] Д12 — телефон и планшет. Все правила узких экранов — здесь, файл подключается последним.
   ≤ 1024 px — меню выезжает поверх содержимого по кнопке ☰ верхней строки (закрывается выбором пункта, Esc, фоном),
               вкладки разделов — прокручиваемая строка, скоринг — очередь или документ по одному;
   ≤ 900 px  — в документе «Отчёт | Проверка» по одному;
   ≤ 760 px  — таблицы карточками, сетки в одну колонку, окна на весь экран, документ прокручивается целиком.
   Короткий экран (телефон лёжа, высота ≤ 520 px) — документ и диалог тоже прокручиваются целиком. */

.mbar, .side-back, .side-x, .wsb-seg { display: none; }

@media (max-width: 1024px) {
  /* ——— каркас: верхняя строка с кнопкой меню, меню поверх содержимого ——— */
  .app { padding: 0; gap: 0; height: 100vh; height: 100dvh; }
  .main { padding: 0 8px 8px; }
  .mbar { display: flex; align-items: center; gap: 6px; height: 52px; flex: none; padding: 0 2px; }
  .mbar .icon-btn { width: 40px; height: 40px; }
  .mbar .icon-btn svg { width: 22px; height: 22px; }
  .mbar-logo { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; }
  .mbar-logo .mark { width: 26px; height: 26px; flex: none; }
  .mbar .grow { flex: 1; }
  .mbar-bell { position: relative; }
  .mbar-bell .nav-b { position: absolute; top: 0; right: -2px; pointer-events: none; }
  .mbar-bell .nav-b .badge { height: 18px; min-width: 18px; padding: 0 5px; font-size: 11px; background: var(--accent); color: #fff; }

  .side { position: fixed; z-index: 250; top: 8px; bottom: 8px; left: 8px; width: min(300px, calc(100vw - 56px));
    transform: translateX(calc(-100% - 16px)); transition: transform .22s var(--ease); box-shadow: var(--sh-modal); }
  .app.menu-open .side { transform: none; }
  .side-back { display: block; position: fixed; inset: 0; z-index: 249; background: rgba(48, 50, 74, .45); opacity: 0;
    pointer-events: none; transition: opacity .2s; }
  .app.menu-open .side-back { opacity: 1; pointer-events: auto; }
  .side-tg { display: none; }
  .side-x { display: inline-grid; }
  .side-nav .nav-i { height: 44px; }

  /* ——— шапка раздела: заголовок, вкладки — прокручиваемая строка (переносится под заголовок, если не помещается) ——— */
  .topbar { flex-wrap: wrap; gap: 8px 12px; padding: 2px 4px 12px; min-height: 0; }
  .topbar .tb-title { flex: 1 1 auto; flex-wrap: wrap; row-gap: 2px; min-width: 0; }
  .topbar h1 { font-size: 20px; }
  .sub-tabs { flex: none; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .sub-tabs::-webkit-scrollbar { display: none; }
  .sub-tabs button { flex: none; white-space: nowrap; }
  .page { padding: 2px 0 24px; }

  /* сегменты (фильтры, переключатели) — подписи в одну строку, лишнее прокручивается */
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg button { flex: none; white-space: nowrap; }

  /* ——— окна: не шире экрана ——— */
  .modal-back { padding: 12px; }
  .modal { max-width: 100%; }
  .modal-foot { flex-wrap: wrap; }
  .pop { max-width: calc(100vw - 16px); }

  /* ——— скоринг: очередь или документ по одному ——— */
  .sc-body:not(.page) { gap: 0; }
  .qp { width: 100%; flex: 1; min-width: 0; transition: none; }
  .qp.off { display: none; }
  .qp:not(.off) ~ .ws { display: none; }
  .qp-head, .qp-list, .qp-foot { min-width: 0; }
  .qp [data-act="qhide"] { display: none; }
  .ws { gap: 8px; }
  .ws-empty .btn { max-width: 100%; white-space: normal; height: auto; min-height: 40px; padding: 10px 16px; line-height: 1.3; }
  .ph { flex-wrap: wrap; gap: 8px 12px; padding: 12px 14px; min-height: 0; }
  .ph-t { flex: 1 1 260px; }
  .ph-1 { flex-wrap: wrap; row-gap: 4px; }
  .ph-1 h2 { white-space: normal; font-size: 17px; line-height: 1.3; }
  .ph-a { flex: 1 1 100%; flex-wrap: wrap; min-width: 0; }

  /* ——— главная, аналитика, ФК: сетки в две колонки ——— */
  .home-work, .home-two { grid-template-columns: minmax(0, 1fr); }
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fk-search { width: auto; flex: 1 1 200px; min-width: 0; }
  .sx-rules { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .sx-types { flex-direction: row; flex-wrap: wrap; align-self: stretch; }
  .sx-types .sx-type { width: auto; height: 36px; }
  .sx-types-sep { display: none; }
}

@media (max-width: 900px) {
  /* в документе — «Отчёт» или «Проверка» по одному */
  .wsb-seg { display: inline-flex; align-self: flex-start; flex: none; }
  .wsb-seg button svg { width: 15px; height: 15px; }
  .wsb { flex-direction: column; }
  .wsb .ag { width: auto; flex: 1; }
  .wsb:not(.show-ag) .ag, .wsb.show-ag .rp { display: none; }
  .rp-h { padding: 14px 16px 4px 18px; }
  .rp-scroll { padding: 4px 16px 20px; }
  .rp-dec { padding: 10px 14px 12px 18px; }
  .dc { flex-wrap: wrap; row-gap: 8px; }
  .dc-t { flex: 1 1 100%; }
  .ag-h { padding: 14px 16px 4px; }
  .ag-scroll { padding: 4px 16px 14px; }

  /* настройки скоринга: колонки таблицы качества уже */
  .ss-q col.c-n { width: 104px; }
  .ss-q col.c-st { width: 104px; }
  .ss-thr { white-space: normal; }
  .ss-row { flex-wrap: wrap; gap: 6px 16px; }
}

@media (max-width: 760px) {
  .main { padding: 0 6px 6px; }
  .topbar h1 { font-size: 18px; }
  .panel { border-radius: 18px; }
  /* заголовки секций: подпись справа переносится под заголовок, а не сжимает его */
  .fk-sec-h, .sx-h, .ss-h, .hp-h, .adm-h, .rs-hr { flex-wrap: wrap; row-gap: 2px; }
  .fk-sec-h h3, .sx-h h3, .ss-h h3, .hp-h h3 { flex: 1 1 auto; }

  /* ——— окна — на весь экран, кнопки переносятся ——— */
  .modal-back { padding: 0; place-items: stretch; }
  .modal, .modal.mid, .modal.wide { width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .modal-head { padding: 16px 16px 8px; }
  .modal-head h2 { font-size: 18px; }
  .modal-body { padding: 6px 16px 16px; }
  .modal-foot { padding: 10px 16px 16px; gap: 8px; }
  .modal-foot .btn { flex: 1 1 auto; }
  .modal-foot .sp { flex: 1 1 100%; height: 0; }

  /* окно параметра: вывод сверху, документ ниже — всё одной прокруткой */
  .dm-modal .modal-body { overflow-y: auto; display: block; }
  .dm { display: flex; flex-direction: column; min-height: 100%; }
  .dm-side { order: -1; border-left: 0; border-bottom: 1px solid var(--hair); }
  .dm-scroll { overflow: visible; padding: 8px 16px 14px; }
  .dm-view { min-height: 75vh; }
  .dm-bar { flex-wrap: wrap; padding: 4px 10px 4px 14px; gap: 4px 10px; }
  .dm-tabs { gap: 16px; }
  .dm-tabs button { height: 44px; }
  .dm-canvas { padding: 10px; }
  .dm-cap { white-space: normal; padding: 8px 14px; }
  .dm-foot { position: sticky; bottom: 0; background: #fff; z-index: 2; }
  .dm-cmp { grid-template-columns: minmax(0, 1fr); }
  .fv-r { grid-template-columns: minmax(0, 1fr); gap: 2px; }

  /* ——— скоринг: документ одной прокруткой, решение — внизу экрана ——— */
  .ws { overflow-y: auto; overscroll-behavior: contain; }
  .ws > * { flex-shrink: 0; }
  .wsb { flex: none; }
  .wsb .rp, .wsb .ag { overflow: visible; min-height: auto; }
  .rp-scroll, .ag-scroll { overflow: visible; flex: none; }
  .rp-dec { position: sticky; bottom: 0; z-index: 3; background: #fff; border-radius: 0 0 18px 18px; }
  .dc .dc-dev span { display: none; }
  .dc .btn:not(.dc-dev) { flex: 1 1 auto; }
  .rv.card { padding: 14px 14px 12px; }
  .rv.card h2 { font-size: 20px; }
  .rv-cnts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fi { gap: 10px; padding: 12px 4px; flex-wrap: wrap; }
  .fi-b { flex: 1 1 200px; }
  .fi-cmp { white-space: normal; }
  .fi.man .fi-act { flex: 1 1 100%; justify-content: flex-end; }
  .ct-r { grid-template-columns: 22px minmax(0, 1fr) auto; row-gap: 2px; }
  .ct-r .ct-c { grid-column: 2; grid-row: 2; }
  .ct-r .ct-n { grid-column: 2; grid-row: 1; white-space: normal; }
  .ct-r .ct-s { grid-column: 3; grid-row: 1; }
  .ct-r .ct-w { display: block; grid-column: 2 / -1; grid-row: 3; white-space: normal; }
  .rp.narrow .ct-r { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .rp.narrow .ct-w { display: block; }
  .rv-doc { font-size: 12px; }
  .qi-1 b { white-space: normal; }

  /* ——— таблицы карточками (m-cards — у таблиц экранов, у ФК — по классам таблиц) ——— */
  .tbl.m-cards, .tbl.m-cards tbody, .fk-tbl, .fk-tbl tbody, .fk-gtbl, .fk-gtbl tbody { display: block; width: 100%; }
  .tbl.m-cards colgroup, .tbl.m-cards thead, .fk-tbl colgroup, .fk-tbl thead, .fk-gtbl colgroup, .fk-gtbl thead { display: none; }
  .tbl.m-cards tr, .fk-tbl tr, .fk-gtbl tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 4px;
    border-top: 1px solid var(--hair); }
  .tbl.m-cards tr:first-child, .fk-tbl tr:first-child, .fk-gtbl tr:first-child { border-top: 0; }
  .tbl.m-cards td, .fk-tbl td, .fk-gtbl td { display: block; padding: 0; border: 0; min-width: 0; text-align: left; }
  .tbl.m-cards td:first-child, .fk-tbl td:first-child, .fk-gtbl td:nth-child(2) { flex: 1 1 100%; }
  .tbl.m-cards td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-3); font-size: 12.5px; }
  .tbl.m-cards td.m-hide { display: none; }
  .tbl.m-cards .sx-clip, .tbl.m-cards .ss-clip { white-space: normal; }
  .fk-gtbl td:nth-child(1) { order: -1; flex: none; font-size: 12.5px; color: var(--ink-3); }
  .fk-gtbl td:nth-child(2) { order: -1; flex: 1 1 calc(100% - 60px); }
  .fk-tbl tr.fk-prep td { flex: 1 1 100%; }
  .fk-stepper { flex-wrap: wrap; row-gap: 8px; }

  /* уведомления: кнопки окна переносятся */
  .ntf-f { flex-wrap: wrap; gap: 8px; }
  .ntf-f .btn { white-space: nowrap; }
  /* правила проверок: виды документов — прокручиваемая строка */
  .sx-types { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 8px; }
  .sx-types::-webkit-scrollbar { display: none; }
  .sx-types .sx-type { flex: none; }

  /* ——— главная ——— */
  .home-hi { padding: 4px 4px 12px; }
  .home-hi h1 { font-size: 20px; }
  .work { gap: 12px; padding: 14px 14px 14px 10px; }
  .work .w-img { width: 64px; height: 64px; }
  .work .w-n .big-num { font-size: 28px; }
  .work .w-n { flex-wrap: wrap; }
  .hp { padding: 16px 16px 10px; }
  .hp-k { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .hp-k .big-num { font-size: 22px; }
  .news-grid { grid-template-columns: minmax(0, 1fr); }

  /* ——— аналитика, правила, журнал, настройки ——— */
  .sx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 16px; gap: 14px 12px; }
  .sx-kpi + .sx-kpi { border-left: 0; padding-left: 0; }
  .sx-card { padding: 14px 14px 12px; }
  .sx-an-bar { padding: 10px 12px; }
  .sx-an-bar .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .sx-an-bar .seg button { flex: none; }
  .sx-an-sel { flex: 1 1 140px; max-width: none; }
  .sx-an-dates { flex-wrap: wrap; }
  .sx-an-dates .input { width: 140px; }
  .sx-bar { flex-wrap: wrap; gap: 8px; }
  .sx-search { flex: 1 1 100%; width: auto; }
  .sx-bar .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .sx-bar .seg button { flex: none; }
  .sx-chart svg { max-width: 100%; height: auto; }
  .ss-sec { padding: 14px 14px 12px; }
  .ss-row { align-items: flex-start; }
  .ss-seg { max-width: 100%; }
  .ss-num-l { font-size: 13.5px; }
  .ss-mline { gap: 8px; }
  .sr-formulas { grid-template-columns: minmax(0, 1fr); }
  .sr-rule { padding: 10px 2px; }
  .sr-dfoot .btn { flex: 1 1 auto; }

  /* ——— ФинКонсьерж: обзор и база знаний ——— */
  .fk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 16px; row-gap: 14px; }
  .fk-kpis .fk-kpi + .fk-kpi { border-left: 0; padding-left: 0; }
  .fk-topics { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .fk-sec { padding: 14px 14px 12px; }
  .fk-tools .btn { flex: 1 1 auto; white-space: normal; height: auto; min-height: 40px; }
  .fk-kbsegs, .fk-kbsegs .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .fk-kbsum { gap: 8px 18px; padding: 14px 16px; }
  .fk-hist { flex-wrap: wrap; }
  .fk-rule-in.fk-rule-date { max-width: 100%; }
  /* «Диалоги»: открыт диалог — фильтры списка не нужны («← Диалоги» в шапке диалога возвращает к списку) */
  .fk-dg.dv-open > .fk-tools { display: none; }
  .fk-tools > .seg { flex: 1 1 100%; }

  /* ——— администрирование и «Качество»: таблицы — карточками (колонки фиксированной ширины на телефон не влезают) ——— */
  .adm-card { padding: 14px 14px 12px; }
  .adm-map-g { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .adm-map-i, .adm-map-i:first-child { padding: 0; }
  .adm-map-i + .adm-map-i { border-left: 0; border-top: 1px solid var(--hair); padding-top: 10px; }
  .adm-t, .adm-t tbody { display: block; width: 100%; }
  .adm-t colgroup, .adm-t thead { display: none; }
  .adm-t tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 2px; border-top: 1px solid var(--hair); }
  .adm-t tr:first-child { border-top: 0; }
  .adm-t td { display: block; padding: 0; border: 0; min-width: 0; text-align: left; }
  .adm-t td:first-child { flex: 1 1 100%; }
  .adm-t td.r { text-align: left; }
  .adm-t td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-3); font-size: 12.5px; }
}

/* короткий экран (телефон лёжа, высота ≤ 520 px): прокручивается вся страница — шапка раздела уезжает вверх, очередь,
   документ и диалог — без внутренних прокруток; верхняя строка с меню остаётся сверху, решение — внизу экрана */
@media (max-height: 520px) and (max-width: 1024px) {
  .main { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
  .mbar { position: sticky; top: 0; z-index: 20; height: 44px; background: var(--bg); }
  .view { flex: none; min-height: auto; }
  .sc, .fk, .adm { height: auto; }
  .page, .sc-body.page, .fk-body, .fk-body.fixed { flex: none; overflow: visible; }
  .fk-body.fixed { display: block; }
  .topbar { padding-bottom: 8px; }
  .sc-body:not(.page) { flex: none; display: block; }
  .qp { overflow: visible; }
  .qp-list { flex: none; overflow: visible; }
  .ws { overflow: visible; }
  .ws > * { flex-shrink: 0; }
  .ws > * + * { margin-top: 8px; }
  .wsb { flex: none; }
  .wsb .rp, .wsb .ag { overflow: visible; min-height: auto; }
  .rp-scroll, .ag-scroll { overflow: visible; flex: none; }
  .rp-dec { position: sticky; bottom: 0; z-index: 3; background: #fff; }
  .fk-dg, .fk-dg-main { flex: none; }
  .fk-list, .fk-dv { overflow: visible; }
  .fk-items, .fk-dv-scroll { overflow: visible; flex: none; }
  .fk-reply { position: sticky; bottom: 0; background: #fff; z-index: 2; }
}

/* [03.10 роли] таблица «профиль 1С → роль» на телефоне: название — во всю ширину */
@media (max-width: 760px) {
  .adm-mr { grid-template-columns: minmax(0, 1fr) 32px; }
  .adm-mr [data-kind], .adm-mr [data-role] { grid-column: 1 / 2; }
  .adm-mr [data-name] { grid-column: 1 / -1; grid-row: 1; }
}

/* [t010-front] Т-010 на узком экране: строка «Изменился файл …» переносится, шапка окна файла — кнопки значками */
@media (max-width: 1024px) {
  .ph-3 { flex: 1 1 100%; }
  .ph-ver { display: block; }
  .ph-ver > svg { display: inline-block; vertical-align: -3px; margin-right: 6px; }
  .ph-vt { white-space: normal; overflow-wrap: anywhere; }
  .ph-prev { margin-left: 6px; }
}
@media (max-width: 760px) {
  .mh-acts { gap: 6px; }
  .mh-acts .btn { width: 36px; height: 36px; padding: 0; }
  .mh-acts .btn span { display: none; }
  .mh-none { max-width: 96px; font-size: 12px; line-height: 1.3; }
  .fpop { width: calc(100vw - 16px); }
  .tech-g { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tech-g span { margin-top: 8px; }
  .ag-nofile { padding: 12px 14px; }
  .ag-nofile .btn { align-self: stretch; }
}