/*
  Мобильная версия (телефон, узкий экран). Подключается последним в base.html, поэтому перекрывает стили страниц.
  Принципы: ничего не шире экрана; широкие таблицы листаются внутри собственной рамки; окна — на весь экран;
  кнопки и поля удобны для пальца (≥ 40 px, шрифт полей 16 px — иначе iOS приближает страницу).
*/
/* Вне узкого экрана: ☰, подложка меню и переключатель вида не нужны; на ПК нет и «телефонного» виденья */
.m-burger, .m-backdrop, .m-nav-me { display: none; }
/* Иконки в nav-меню: видны только в мобильном drawer, на ПК скрыты */
.nav-icon { display: none; }
.m-switch { text-align: center; padding: 6px 12px 20px; }
.view-desktop .m-switch-btn { font-size: 30px; padding: 24px 30px; border: 0; background: none; color: #1d4ed8; text-decoration: underline; }
@media (max-width: 740px), (max-width: 932px) and (max-height: 500px), (max-width: 1400px) and (pointer: coarse) {
  .m-nav-me { display: block; }
  html, body { max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
  img, video, canvas, svg { max-width: 100%; }

  /* Верхняя панель: ☰ + логотип слева, колокольчик, поиск (значок) и имя справа. Меню разделов — выезжающая панель слева */
  .topbar { display: flex; flex-wrap: nowrap; gap: 6px; padding: 8px 10px; position: sticky; top: 0; z-index: 900; }
  .topbar-logout { display: none; }
  .topbar-left { flex: 0 0 auto; order: 1; display: flex; align-items: center; gap: 8px; }
  .topbar-right { flex: 1 1 0; min-width: 0; order: 2; justify-content: flex-end; margin-left: auto; gap: 8px; }
  .m-burger { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid #e5e7eb; background: #fff; border-radius: 10px; font-size: 22px; line-height: 1; padding: 0; cursor: pointer; color: #111827; }
  .me-chip { max-width: 100%; min-width: 0; }
  .me-name { display: none; }
  .nav { position: fixed; left: 0; top: 0; bottom: 0; width: min(310px, 86vw); z-index: 3200; background: #fff; box-shadow: 8px 0 30px rgba(17, 24, 39, .25);
         display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; gap: 4px; padding: 14px 12px 20px;
         overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(-105%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
  .m-nav-open .nav { transform: none; visibility: visible; transition: transform .22s ease; }
  .m-nav-open { overflow: hidden; }
  .m-nav-open .aiw-fab { display: none !important; }
  .m-backdrop { display: block; position: fixed; inset: 0; background: rgba(17, 24, 39, .45); z-index: 3100; }
  .m-backdrop[hidden] { display: none; }
  .nav > *, .nav form { flex: 0 0 auto; }
  .nav-link, .nav-btn { display: flex; align-items: center; justify-content: flex-start; white-space: normal; padding: 12px 14px; font-size: 15px; min-height: 48px; width: 100%; box-sizing: border-box; border-radius: 10px; text-align: left; }
  .nav-icon { display: inline; margin-right: 8px; font-size: 18px; }
  .nav form { margin-top: auto !important; padding-top: 10px; display: block !important; }
  .nav-divider { display: block; height: 1px; width: 100%; background: #e5e7eb; margin: 6px 0; }
  .m-nav-me { padding: 4px 6px 12px; border-bottom: 1px solid #e5e7eb; margin-bottom: 6px; }
  .m-nav-me b { display: block; font-size: 16px; color: #111827; }
  .m-nav-me span { font-size: 12px; color: #6b7280; }

  /* Поиск: значок; по касанию раскрывается на всю ширину экрана. Колокольчик и панели — на всю ширину */
  .topbar .gs { position: static; }
  .topbar .gs-box { width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 10px; cursor: pointer; }
  .topbar .gs-box .gs-ico { font-size: 20px; }
  .topbar .gs-input { width: 0; padding: 0; min-height: 0 !important; }
  .topbar .gs-box:focus-within { position: fixed; left: 8px; right: 8px; top: 8px; width: auto; height: 46px; padding: 0 12px; justify-content: flex-start; z-index: 3300; box-shadow: 0 8px 24px rgba(17, 24, 39, .25); border-color: #1d4ed8; background: #fff; }
  .topbar .gs-box:focus-within .gs-input { width: 100%; }
  .topbar .gs .gs-panel { position: fixed; left: 8px; right: 8px; top: 62px; width: auto; max-height: calc(100dvh - 76px); z-index: 3300; }
  .topbar .bell { margin-right: 0; position: static; }
  .topbar .bell .bell-btn { width: 42px; height: 42px; border-radius: 10px; font-size: 18px; }
  .topbar .bell .bell-panel { position: fixed; left: 8px; right: 8px; top: 60px; width: auto; max-height: calc(100dvh - 76px); z-index: 3300; }
}

@media (max-width: 740px), (max-width: 932px) and (max-height: 500px) {
  /* Крупные кнопки под палец */
  .primary-btn, .secondary-btn, .danger-btn, .toolbar-btn { min-height: 44px; font-size: 14px; }

  /* Переключатель вида — внизу страницы */
  .m-switch { text-align: center; padding: 6px 12px 28px; }
  .m-switch-btn { border: 0; background: none; color: #1d4ed8; font-size: 14px; text-decoration: underline; padding: 10px 14px; cursor: pointer; min-height: 44px; }

  .content { padding: 0 12px 32px; }
  .alert-banner { padding: 10px 12px; flex-wrap: wrap; }
  .page-header { padding-top: 14px; }
  h1, .page-title { font-size: 22px; line-height: 1.25; }

  /* Панели кнопок и фильтров переносятся, поля и кнопки на всю ширину строки */
  .toolbar, .page-actions { gap: 8px; }
  .toolbar > .primary-btn, .toolbar > .secondary-btn, .toolbar > .toolbar-btn, .toolbar > .ai-btn, .toolbar > .danger-btn,
  .page-actions > .primary-btn, .page-actions > .secondary-btn, .page-actions > .toolbar-btn, .page-actions > .ai-btn, .page-actions > .danger-btn,
  .toolbar > input.toolbar-btn, .toolbar > .search-box, .toolbar > input[type="search"], .toolbar > select.toolbar-btn { height: 40px; font-size: 13px; }
  .toolbar > .board-search, .toolbar > .search-box, .toolbar > input[type="search"] { width: 100%; flex: 1 1 100%; }
  .page-actions { justify-content: stretch; }
  .page-actions > * { flex: 1 1 auto; }

  /* Поля ввода: 16 px, чтобы телефон не приближал страницу при касании */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px; max-width: 100%; min-height: 40px; }
  button, .btn, [role=button] { min-height: 36px; }

  /* Таблицы: внутри своей рамки листаются вбок, страница при этом не уезжает */
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table td, table th { padding-left: 8px; padding-right: 8px; }

  /* Строка показателей: плитки в 2–3 колонки вместо одной длинной строки */
  .metrics-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px 4px; padding: 14px 8px; justify-items: stretch; }
  .metrics-bar .metric-divider { display: none; }
  .metric { padding: 0 6px; min-width: 0; overflow-wrap: anywhere; }
  .metrics-bar .hint-btn { top: 6px; right: 6px; }
  .hint-btn { min-height: 0 !important; width: 22px; height: 22px; font-size: 12px; }

  /* Кнопки панели: две в ряд, главная и поиск — на всю строку */
  .toolbar > button, .toolbar > a, .toolbar > label { flex: 1 1 calc(50% - 8px); min-width: 0; white-space: normal !important; text-align: center; line-height: 1.2 !important; padding-top: 6px !important; padding-bottom: 6px !important; height: auto !important; min-height: 40px; }
  .toolbar > .primary-btn { flex-basis: 100%; }

  /* Доска заказов: колонки почти на всю ширину экрана, листаются пальцем с «прилипанием» */
  .board-row { scroll-snap-type: x mandatory; gap: 10px; margin-left: -12px; margin-right: -12px; width: calc(100% + 24px); padding: 0 12px 10px; scroll-padding: 0 12px; }
  .kanban-column { flex: 0 0 86vw; min-width: 86vw; max-width: 86vw; scroll-snap-align: center; }

  /* Заголовок блока: название, значки и поля переносятся на следующую строку */
  .block { padding: 14px; }
  .block-head { flex-wrap: wrap; gap: 8px; }
  .block-title { flex: 1 1 auto; min-width: 0; }
  .block-spacer, .spacer { display: none; }
  .search-box { max-width: 100%; width: 100%; flex: 1 1 100%; }
  .search-box input { min-width: 0; width: 100%; }
  .block-head > select, .block-head > .filter-select, .block-head > .secondary-btn, .block-head > .primary-btn { flex: 1 1 auto; min-width: 0; }
  select.filter-select { max-width: 100%; }
  .an-clock { min-width: 0; }

  /* Рамка таблицы сама листается и вбок, и вниз */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap > table { display: table; }
  .tt-wrap, .table-wrap { overflow-x: auto !important; }

  /* График смены: шкала времени не сжимается, график листается вбок */
  .gantt-labels { width: 96px; }
  .gantt-row-label { font-size: 11px; overflow: hidden; }
  .gantt-timeline { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .gantt-canvas, .gantt-timeline > #gantt-ticks, .gantt-timeline > #gantt-rows { min-width: 900px; }
  .gantt-card, .gantt-body, .gantt-timeline, .gantt-scroll { min-width: 0; max-width: 100%; }
  .gantt-head, .day-pager { flex-wrap: wrap; max-width: 100%; }
  .gantt-legend { max-width: 100%; }

  /* Окна — на весь экран, содержимое прокручивается внутри */
  .modal, .ca-modal, .aiw-modal, .task-modal-backdrop { padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; }
  .modal-content, .modal-content.modal-content-wide, .modal-content-wide, .ca-dialog, .ca-dialog.rep-dialog, .task-modal, .aiw-dialog {
      width: 100vw !important; max-width: 100vw !important; height: 100dvh; max-height: 100dvh !important; min-width: 0 !important;
      border-radius: 0 !important; margin: 0 !important; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 14px !important; }
  .modal-content .modal-body, .modal-body { padding: 8px 0 !important; max-height: none !important; overflow: visible; }
  .modal-header { position: sticky; top: -14px; z-index: 2; background: var(--c-surface); padding: 10px 0; margin-bottom: 8px; }
  .modal-close, .task-modal-close { min-width: 40px; min-height: 40px; font-size: 24px; }
  .modal-footer, .task-modal-foot, .ca-actions { flex-wrap: wrap; gap: 8px; }
  .modal-footer > button, .task-modal-foot > button { flex: 1 1 auto; }
  /* Формы в окнах: поля в один столбец */
  .modal .form-row, .modal .row, .modal [class*="grid"], .ca-dialog [class*="grid"], .ca-dialog .al-cols, .rep-pick { grid-template-columns: 1fr !important; }
  .modal .form-row, .modal .row { flex-direction: column; }

  /* Подсказки (?), плавающая кнопка помощника не должна закрывать содержимое */
  .aiw-fab { width: 56px !important; height: 56px !important; right: 12px !important; bottom: 12px !important; opacity: .92; }
  .aiw-fab-label { display: none !important; }
  .aiw-fab-icon { font-size: 26px !important; }
}

@media (max-width: 480px) {
  .logo { height: 24px; }
}

/* Таблицы-карточки (класс ставит mobile.js): каждая строка — карточка, подпись столбца слева */
@media (max-width: 740px), (max-width: 932px) and (max-height: 500px) {
  table.m-cards, table.m-cards tbody, table.m-cards tr, table.m-cards td { display: block; width: auto; max-width: 100%; }
  table.m-cards { overflow: visible; }
  table.m-cards thead { display: none; }
  table.m-cards tr { margin: 0 0 10px; padding: 6px 0; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 10px; }
  table.m-cards td { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 12px !important;
                     border: 0 !important; text-align: right; overflow-wrap: anywhere; white-space: normal !important; }
  table.m-cards td::before { content: attr(data-label); flex: 0 0 38%; max-width: 38%; text-align: left; font-size: 11px; font-weight: 600;
                             color: var(--c-muted); text-transform: none; }
  table.m-cards td[data-label=""]::before, table.m-cards td:not([data-label])::before { display: none; }
  table.m-cards td:empty { display: none; }
  table.m-cards td[colspan] { display: block; text-align: center; }
  table.m-cards td[colspan]::before { display: none; }
  table.m-cards td > button, table.m-cards td > a.btn { margin-left: auto; }
  .table-wrap:has(> table.m-cards), .tt-wrap:has(> table.m-cards) { border: 0; background: transparent; }
}
@media (max-width: 740px), (max-width: 932px) and (max-height: 500px) {
  table.m-cards td[data-label=""], table.m-cards td:not([data-label]) { justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
  .icon-btn { width: 38px; height: 38px; font-size: 15px; }
}
@media (max-width: 740px), (max-width: 932px) and (max-height: 500px) {
  table.m-scroll { display: table; table-layout: auto !important; width: max-content !important; min-width: 100%; }
  table.m-scroll td, table.m-scroll th { white-space: nowrap !important; overflow-wrap: normal !important; }
}

@media (max-width: 740px), (max-width: 932px) and (max-height: 500px) {
  .modal input:not([type=checkbox]):not([type=radio]):not([type=file]), .modal select, .modal textarea,
  .ca-dialog input:not([type=checkbox]):not([type=radio]):not([type=file]), .ca-dialog select, .ca-dialog textarea,
  .task-modal input:not([type=checkbox]):not([type=radio]):not([type=file]), .task-modal select, .task-modal textarea { width: 100%; }
}

@media (max-width: 740px), (max-width: 932px) and (max-height: 500px) {
  /* Карточка заказа: поля в два столбца, на узком телефоне — в один */
  .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .op-row { grid-template-columns: 1fr 70px 70px 24px; }
}
@media (max-width: 480px) {
  .field-grid { grid-template-columns: 1fr; }
}
@media (max-width: 740px), (max-width: 932px) and (max-height: 500px) { [class*="legend"] { flex-wrap: wrap; } }
@media (max-width: 740px), (max-width: 932px) and (max-height: 500px) { .kb-tabs { flex-wrap: wrap; } .kb-tab { flex: 1 1 auto; padding: 0 10px; } }