/* ============================================================================
   Оркестратор — per-page/per-concern мобильные правила (mobile-pages.css)
   Сгенерировано workflow (6 агентов) по РЕАЛЬНЫМ селекторам бандла + Codex-ревью.
   ВСЁ под html.orq-m (JS ставит при <=768px) → десктоп не затронут. Токены штатные.
   Порядок: grids → forms → kanban → tables → charts → overlays/calendar.
   v=20260712-02
   ============================================================================ */

/* =========================================================
   ORQ-MOBILE :: ZONE "grids"
   Схлопывание многоколоночных сеток на телефоне (<=768px).
   Активируется ТОЛЬКО когда JS повесил html.orq-m.
   Правило:
     - .grid.grid-cols-3/4/5/6 и их sm/md/lg/xl-варианты -> 1 колонка
     - grid-cols-2 (в т.ч. рядом с адаптивными вариантами) -> ОСТАЁТСЯ 2
     - grid-cols-7 и grid-cols-[...] (КАЛЕНДАРЬ / кастомные раскладки) НЕ трогаем
   Специфичность html.orq-m .grid.<util> = (0,3,1) уже бьёт утилиту (0,1,0);
   !important добавлен только чтобы гарантированно перебить утилиту/инлайн
   и корректно разрулить конфликт "collapse vs keep-2" порядком правил.
   ========================================================= */

/* --- 1. Схлопнуть 3/4/5/6-колоночные сетки в одну колонку --- */
html.orq-m .grid.grid-cols-3,
html.orq-m .grid.grid-cols-4,
html.orq-m .grid.grid-cols-5,
html.orq-m .grid.grid-cols-6,
html.orq-m .grid.sm\:grid-cols-3,
html.orq-m .grid.sm\:grid-cols-4,
html.orq-m .grid.sm\:grid-cols-6,
html.orq-m .grid.md\:grid-cols-3,
html.orq-m .grid.md\:grid-cols-4,
html.orq-m .grid.md\:grid-cols-6,
html.orq-m .grid.lg\:grid-cols-3,
html.orq-m .grid.lg\:grid-cols-4,
html.orq-m .grid.lg\:grid-cols-5,
html.orq-m .grid.xl\:grid-cols-3,
html.orq-m .grid.xl\:grid-cols-4 {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

/* --- 2. Восстановить 2 колонки там, где базовый класс grid-cols-2      ---
   --- (статистика "2-в-ряд"): идёт ПОСЛЕ п.1, при равной специфичности  ---
   --- (0,3,1) выигрывает по порядку => grid-cols-2 рядом с md/lg:cols-4  ---
   --- останется 2, а не схлопнется.                                     --- */
html.orq-m .grid.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}


/* ============================================================
   ORQ MOBILE OVERRIDE — ЗОНА «forms-toolbars»
   Активна только при html.orq-m (JS ставит класс при <=768px).
   Десктоп не затрагивается. Только штатные токены/утилиты.
   Раскладка: многоколоночные формы -> в колонку; тулбары -> wrap;
   первичные кнопки модалок/шитов -> на всю ширину.
   ============================================================ */

/* 1) Многоколоночные ФОРМЫ -> одна колонка на телефоне.
   Строго внутри <form> и внутри модалок/шитов ([role="dialog"]),
   и строго grid-cols-2/3/4 — календарные/пикер-сетки grid-cols-5/6/7
   (напр. недельная сетка PayCalendar) НЕ трогаем. Канбан/карты/
   стат-плитки вне form/dialog — тоже не трогаем. */
html.orq-m form .grid.grid-cols-2,
html.orq-m form .grid.grid-cols-3,
html.orq-m form .grid.grid-cols-4,
html.orq-m [role="dialog"] .grid.grid-cols-2,
html.orq-m [role="dialog"] .grid.grid-cols-3,
html.orq-m [role="dialog"] .grid.grid-cols-4 {
  grid-template-columns: 1fr !important; /* бьёт Tailwind grid-cols-N */
}

/* 2) ТУЛБАРЫ/ФИЛЬТРЫ/шапки (flex со space-between) -> перенос строк,
   чтобы группы кнопок не вылезали за вьюпорт. flex-wrap инертен,
   пока контент влезает в строку, поэтому blast-radius минимальный. */
html.orq-m .flex.justify-between:not(button):not([role="button"]):not([role="menuitem"]):not([role="tab"]):not(a) {
  flex-wrap: wrap;
}

/* 3) ПЕРВИЧНЫЕ КНОПКИ в футере модалки/шита -> на всю ширину.
   Точный хук — шадсн-футер: flex flex-col-reverse ... sm:justify-end.
   На мобиле он уже колонка (flex-col-reverse); фиксируем 100% ширину,
   чтобы кнопки с sm:w-auto не «съёживались». Тост-контейнер и
   бар-чарты (flex-col-reverse без sm:justify-end) не затронуты. */
html.orq-m .flex-col-reverse.sm\:justify-end > button,
html.orq-m .flex-col-reverse.sm\:justify-end > a {
  width: 100%;
}


/* ============================================================
   ЗОНА: fixed-width-kanban  (моб. оверрайд, только <=768px)
   Все правила под html.orq-m — десктоп не затронут.
   Селекторы взяты из живого бандла ui-dist/assets/index-E-mBSQff-ofs28.js
   Логика:
     1) Родитель-лента канбан-колонок (flex+overflow) -> touch-скролл + scroll-snap,
        сама лента не толкает body (max-width:100%). overflow-x уже стоит в Tailwind.
     2) Канбан-колонки (min-w-[320px] min-h-0) ОСТАЮТСЯ фикс-ширины,
        добавлен только scroll-snap-align:start — их НЕ делаем 100%.
     3) Одиночные фикс-ширины блоков-карточек, занимающих строку,
        -> max-width:100% (каппинг ниже ширины контейнера, без слома).
   Исключено умышленно: w-[277px] — это Radix-поповер, уже имеет
   max-w-[calc(100vw-1rem)], трогать не нужно (низкий blast-radius).
   ============================================================ */

/* 1) Ленты канбан-колонок (Спринты / Сделки / Гипотезы) — родитель-скроллер */
html.orq-m .flex.gap-3.overflow-x-auto.pb-2,
html.orq-m .flex.gap-3.overflow-x-auto.pb-4.-mx-2.px-2 {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}

/* 2) Сами колонки остаются фиксированными — только выравнивание по снапу.
      Единственное вхождение в бандле: "w-80 flex-1 flex flex-col min-w-[320px] min-h-0" */
html.orq-m .min-w-\[320px\].min-h-0 {
  scroll-snap-align: start;
}

/* 3) Одиночные фикс-ширины блоков-карточек (в строку) -> не шире контейнера.
      max-width:100% каппит только когда контейнер уже указанной ширины,
      иначе ширина сохраняется — канбан-колонки (min-w-[320px]) сюда НЕ попадают. */
html.orq-m .w-\[200px\],
html.orq-m .w-\[220px\],
html.orq-m .w-\[240px\],
html.orq-m .w-\[260px\] {
  max-width: 100%;
}

/* Инпуты/селекты с min-w-[140px] flex-1 — тоже не шире строки */
html.orq-m .min-w-\[140px\] {
  min-width: 0 !important;
  max-width: 100%;
}


/* ============================================================
   orq-mobile override — ZONE: tables-lists
   Активна только при html.orq-m (JS ставит класс при <=768px).
   Десктоп не затрагивается. Только штатные токены.
   ------------------------------------------------------------
   Логика:
   - Каждый <table> сам становится горизонтальным скролл-контейнером
     (display:block + width:max-content + max-width:100% + overflow-x:auto),
     чтобы широкая таблица (напр. Серверы) скроллилась ВНУТРИ себя, а не
     давала горизонтальный скролл всему body. CSS-only, обёртку добавить
     нельзя — используем классический github-паттерн на самом table.
   - overflow-x:auto + width пробивают Tailwind-утилиты overflow-hidden / w-full
     (единственные два !important в блоке — узкий blast-radius).
   - Ячейки без явных классов переноса — white-space:nowrap (числа «1 234»
     не рвутся); ячейки с break-* / whitespace-* / прозаические оставляем как есть.
   - Списки divide-y — каждая строка получает тап-таргет >=44px.
   - Markdown-таблицы (.paperclip-markdown-table-scroll) уже имеют свой скролл —
     их table оставляем нетронутым.
   ============================================================ */

/* --- Таблицы: сам <table> = горизонтальный скролл --- */
html.orq-m :not(.table-scroll):not(.paperclip-markdown-table-scroll) > table {
  display: block;
  width: max-content !important;      /* пробить w-full (width:100%) */
  max-width: 100%;
  overflow-x: auto !important;        /* пробить utility overflow-hidden */
  overflow-y: visible;               /* sticky thead работает от скролла страницы */
  -webkit-overflow-scrolling: touch;
}

/* Markdown-таблицы уже обёрнуты в свой скролл — не трогаем их table */
html.orq-m .paperclip-markdown-table-scroll table {
  display: table;
  width: 100% !important;
  overflow: visible !important;
}

/* --- Ячейки: числовые/короткие не переносим; прозаические/код оставляем --- */
html.orq-m table th:not([class*="break-"]):not([class*="whitespace-"]),
html.orq-m table td:not([class*="break-"]):not([class*="whitespace-"]) {
  white-space: nowrap;
}
/* внутри markdown — перенос как задумано автором */
html.orq-m .paperclip-markdown-table-scroll th,
html.orq-m .paperclip-markdown-table-scroll td {
  white-space: normal;
}

/* --- Списки divide-y: строка = тап-таргет >=44px --- */
html.orq-m [class~="divide-y"] > * {
  min-height: 44px;
}


/* ═══════════════════════════════════════════════════════════════════
   ЗОНА: charts-dashboard   (ТОЛЬКО мобилка: html.orq-m ставится JS при ≤768px)
   Держим svg/canvas-графики в границах карточки, даём бар-чартам
   горизонтальный скролл ВНУТРИ карточки вместо разрыва вёрстки страницы,
   KPI/стат-числа — читаемо и без обрезки.
   Grid-коллапс строк метрик в одну колонку — в концерне grids, тут НЕ дублируем.
   Врапперы графиков (.h-24/.h-32/.h-40 .w-full) уже w-full+фикс-высота —
   их НЕ трогаем: те же утилиты носят скелетоны/баннеры (blast-radius).
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Рисующая поверхность canvas-графика не шире карточки → нет гор.скролла
      всей страницы. height:auto сохраняет пропорции при уменьшении ширины. */
html.orq-m canvas {
  max-width: 100%;
  height: auto;
}

/* 2. Бар-чарт (столбики) на узком экране скроллится внутри своей карточки,
      а не ломает ширину страницы; столбики не сплющиваются в ноль. */
html.orq-m .flex.items-end.gap-\[3px\].h-20 {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

/* 3. KPI/стат-числа: остаются крупными и читаемыми, но помещаются в узкую
      плитку и переносятся вместо обрезки. Специфичность (3 класса) бьёт
      Tailwind .text-2xl без !important. */
html.orq-m .text-2xl.font-bold.tabular-nums {
  font-size: 1.375rem;   /* было 1.5rem — на волосок меньше, всё ещё крупно/читаемо */
  line-height: 1.2;
  min-width: 0;
  overflow-wrap: anywhere;
}


/* ============================================================================
   Оркестратор — мобильные правила зоны «overlays-calendar»
   (iframe-оверлей модульных страниц #orq-embed + PayCalendar .dp-*).
   ВСЁ под html.orq-m — класс ставит JS только при ширине <=768px, поэтому
   десктоп/планшет >768px не затрагиваются. Токены — только штатные. Бандл не
   трогаем: чистая инъекция CSS (кладётся в mobile-pages.css / соседний блок).
   ============================================================================ */

/* --- iframe-ОВЕРЛЕЙ модульных страниц (Гипотезы/Спринты/Карты/Реестр платежей/
   Content/Промпты и пр. mode:"iframe"). sidebar-nav.js создаёт ОДИН
   <iframe id="orq-embed"> (инлайн: position:fixed;z-index:40;border:0;
   background:#0f1115;display:none) и в position() выставляет инлайном
   left/top/width/height относительно <aside>. На телефоне <aside> уходит в
   off-canvas (.orq-m-aside-wrap width:0), поэтому JS растянул бы оверлей на весь
   экран ПОВЕРХ наших баров. Прибиваем его строго МЕЖДУ верхним и нижним баром.
   !important здесь — единственный способ перебить инлайн-стиль от JS. --- */
html.orq-m #orq-embed {
  left: 0 !important;
  right: 0 !important;
  top: calc(var(--orq-mtop-h) + var(--orq-msafe-t)) !important;
  bottom: calc(var(--orq-mbar-h) + var(--orq-msafe-b)) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: calc(100dvh - var(--orq-mtop-h) - var(--orq-msafe-t) - var(--orq-mbar-h) - var(--orq-msafe-b)) !important; /* явная высота: iframe (replaced) не тянется от top+bottom */
  background: var(--background) !important; /* вместо зашитого #0f1115 — под текущую тему */
}
/* z-index(40), display(none/'') и border(0) НЕ трогаем — открытие/закрытие
   оверлея и слои (scrim 1000 / drawer 1001 / бары 1002–1004 поверх) продолжают
   работать штатно; оверлей вставлен между барами и их не перекрывает. */

/* --- PayCalendar (двойной месяц). .dp-pop уже адаптивной ширины в paycal.css
   (max-width:calc(100vw-16px)). На узком экране два месяца (2×232px + gap) не
   влезают. НЕ прячем второй месяц (это ломает выбор диапазона range) — вместо
   этого даём горизонтальный скролл ленты из двух месяцев внутри popover.
   Специфичность html.orq-m перебивает paycal.css без !important. --- */
html.orq-m .dp-pop {
  max-width: calc(100vw - 16px);
}
html.orq-m .dp-cals {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  gap: 14px;            /* было 22px — плотнее, скролл нужен реже */
  padding-bottom: 2px;  /* место под тонкий скроллбар, не режет нижний ряд дат */
}
html.orq-m .dp-cal {
  flex: 0 0 auto;       /* месяцы не сжимаются → уходят в горизонтальный скролл, а не в «кашу» */
}