/* ============================================================================
   sage-mobile.css — ОБЩИЙ мобильный фундамент CRM (без пер-экранной вёрстки).
   Подключается через UNFOLD["STYLES"] ПОСЛЕ admin-theme.css.

   Что здесь:
     1) Брейкпоинт-токены (--bp-*) — единый ориентир для пер-экранных адаптаций,
        которые делают отдельные билдеры ПОСЛЕ этого слоя.
     2) Drawer-скрим мобильного меню (подложка под сайдбар unfold; сам механизм
        показа/скрытия — штатный `sidebarOpen`/`sidebarToggle()` unfold, мы лишь
        добавляем затемнение + клик-вне-закрывает; см. templates/admin/nav_sidebar.html).
     3) Общие мобильные правила: сброс глобального zoom, гарантия отсутствия
        горизонтального скролла корня, контент на всю ширину.
     4) Утилиты-хелперы (.sage-m-hide / .sage-m-only / .sage-m-stack / .sage-m-full),
        которыми будут пользоваться пер-экранные адаптации. ПЕР-ЭКРАННОЙ вёрстки тут НЕТ.

   Брейкпоинт сайдбара — родной unfold (xl = 1280px): на ≤1280px сайдбар уходит
   в выдвижное меню по гамбургеру (переиспользуем, не ломаем). --bp-mobile (768px)
   — ориентир для КОНТЕНТА страниц (одноколоночная раскладка и т.п.), его применяют
   пер-экранные слои. Скрим завязан на unfold-брейкпоинт сайдбара (класс xl:hidden!
   в шаблоне), поэтому media-порог скрима — тоже 1279.98px.
   ============================================================================ */

:root {
  /* Брейкпоинты (ориентиры). --bp-desktop = родной unfold xl. */
  --bp-mobile:  768px;    /* телефон / одноколоночная раскладка контента   */
  --bp-tablet:  1024px;   /* планшет                                        */
  --bp-desktop: 1280px;   /* десктоп (= unfold xl, порог сворачивания меню) */

  /* Затемнение подложки выдвижного меню. */
  --scrim-bg: rgba(28, 33, 23, .44);   /* base-900 с прозрачностью */
}

/* [x-cloak] — не мигать скримом до инициализации Alpine. */
[x-cloak] { display: none !important; }

/* ── Drawer-скрим мобильного меню ─────────────────────────────────────────────
   Виден только когда открыт сайдбар (x-show="sidebarOpen") И только на узких
   экранах (класс xl:hidden! в шаблоне гасит на десктопе). Лежит под сайдбаром
   (z сайдбара — z-60), выше контента. Клик по нему закрывает меню. */
.sage-nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;                 /* < сайдбар (z-60), > контент */
  background: var(--scrim-bg);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}
/* Плавность появления/исчезновения (Alpine x-transition хуки). */
.sage-nav-scrim--enter { transition: opacity .18s ease-out; }
.sage-nav-scrim--leave { transition: opacity .15s ease-in; }
.sage-nav-scrim[style*="display: none"] { opacity: 0; }

/* ── Мобильный слой (≤ unfold xl): контент на всю ширину, без h-скролла ────────
   Порог 1279.98px совпадает с моментом, когда unfold переводит сайдбар в overlay
   (xl:relative → fixed). Так меню-drawer и мобильные правила контента включаются
   синхронно. */
@media (max-width: 1279.98px) {
  /* Сброс глобального zoom (--crm-ui-scale ≈ 0.9): на телефоне нужен «настоящий»
     масштаб — читаемый текст и корректные тач-цели, а не уменьшенный десктоп.
     zoom мультипликативен → обратный множитель гасит унаследованный body-zoom. */
  body {
    zoom: 1 !important;
  }

  /* Никакого горизонтального скролла у корневых контейнеров. Контент — во всю
     доступную ширину (сайдбар на мобиле уходит в overlay и место не занимает). */
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }
  #page,
  #main,
  #content {
    max-width: 100%;
    min-width: 0;
  }
  /* unfold-контейнер контента центрируется как .container с фикс-ширинами —
     на мобиле растягиваем на всю ширину вьюпорта. */
  #main .container {
    width: 100%;
    max-width: 100%;
  }
}

/* ── Утилиты-хелперы (для пер-экранных адаптаций, применяют билдеры далее) ──────
   Именование: .sage-m-* = «sage mobile». Только общие примитивы раскладки.
   НЕ пер-экранная вёрстка. */
@media (max-width: 1279.98px) {
  .sage-m-hide { display: none !important; }               /* скрыть на мобиле */
  .sage-m-full { width: 100% !important; max-width: 100% !important; }
  .sage-m-stack {                                          /* строки → колонки */
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .sage-m-scroll-x {                                       /* локальный h-скролл  */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
/* Показывать элемент ТОЛЬКО на мобиле (по умолчанию скрыт на десктопе). */
.sage-m-only { display: none; }
@media (max-width: 1279.98px) {
  .sage-m-only { display: revert; }
}

/* ============================================================================
   ПЕР-ЭКРАННЫЙ СЛОЙ (≤767px): admin changelist «Клиенты»/«Контакты» + форма.
   ----------------------------------------------------------------------------
   Порог --bp-mobile (767.98px) — ТОЛЬКО телефон. Десктоп (≥768px) НЕ трогаем:
   там работает штатная unfold-раскладка (таблица включается на lg=1024px, а на
   768–1023px — родные unfold-карточки, которые мы тоже не ломаем).

   ЧТО ДЕЛАЕМ. unfold уже превращает строки в карточки (block/lg:table), но для
   CRM-списков с кастомными ячейками (аватар-чип контакта, много колонок клиента)
   дефолтная «метка: значение» вёрстка налезает друг на друга и нечитаема. Здесь
   переопределяем её в аккуратные строки-карточки по эталонам dop-ekrany
   (clients-list-mobile / contacts-list-mobile): карточка = surface + sage-border
   + радиус + тень; первая колонка (имя/чип) — крупный заголовок без метки;
   остальные колонки — компактные строки «метка … значение». Токены берём из
   sage-tokens.css (грузится глобально). Функционал (чекбоксы, сортировка через
   шапку, фильтры, выбор колонок, ссылки) не трогаем — только вид.
   ============================================================================ */
@media (max-width: 767.98px) {

  /* ── ОБЩЕЕ ДЛЯ СПИСКОВ (change-list) ─────────────────────────────────────── */

  /* Убираем обёрточную рамку/тень/скролл-контейнер таблицы — карточки сами себе
     контейнеры, горизонтальный скролл на мобиле не нужен. */
  .change-list #result_list {
    display: block;
    width: 100%;
  }
  /* Прячем thead: заголовки-колонки не нужны в карточной раскладке (метки
     дублируются через data-label у ячеек). Сортировка/выбор доступны через
     фильтры и десктоп; на мобиле список — просмотр. */
  .change-list #result_list > thead {
    display: none;
  }

  /* Карточка = один tbody (в unfold внутри tbody — один tr.data-row). */
  .change-list #result_list > tbody {
    display: block;
    position: relative;        /* система координат для absolute-чекбокса */
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e3e6dd);
    border-radius: var(--r-12, 12px);
    box-shadow: var(--sh-card, 0 1px 2px rgba(28,33,23,.06), 0 1px 1px rgba(28,33,23,.04));
    margin-bottom: 9px;
    overflow: hidden;          /* клип под скруглённые углы (высота теперь верна) */
  }
  /* tr — блок карточки. КЛЮЧЕВОЕ: height:max-content. У переопределённого <tr>
     (display:block из table-row) Chromium некорректно считает АВТО-высоту бокса —
     она схлопывается в ~1 строку, содержимое ячеек вытекает поверх соседних
     карточек, а overflow:hidden режет карточку по ложной высоте. max-content
     заставляет бокс вырасти под реальное содержимое ячеек. (Дефолт unfold страдает
     тем же — на многоколоночных CRM-списках его карточка тоже «течёт».) */
  .change-list #result_list > tbody > tr.data-row {
    display: block !important;
    height: max-content !important;
    border: 0 !important;      /* убрать unfold-рамку/скругление у самой строки */
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 4px 0;
  }

  /* Ячейка-строка внутри карточки: блок «метка: значение». Метку рисует unfold
     псевдоэлементом ::before (content из data-label); держим её и значение в
     одной строке (метка слева приглушённая, значение — справа тянется). */
  .change-list #result_list > tbody > tr.data-row > td,
  .change-list #result_list > tbody > tr.data-row > th {
    display: block !important;
    width: auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-width: 100%;
    overflow: hidden !important;   /* обрезаем сверхдлинные значения без h-скролла */
    border: 0 !important;
    padding: 5px 14px !important;
    text-align: left;
    font-size: 13px;
    line-height: 1.35;
    color: var(--text, #2a3024);
    white-space: normal;
  }
  /* Метка колонки (::before из data-label) — приглушённая, инлайн перед значением. */
  .change-list #result_list > tbody > tr.data-row > td::before,
  .change-list #result_list > tbody > tr.data-row > th::before {
    display: inline !important;
    margin-right: 6px !important;    /* убираем mr-auto */
    color: var(--text-3, #97a08c);
    font-size: 12px;
    font-weight: 600;
  }
  /* Значение ячейки — инлайн после метки, обычным цветом. */
  .change-list #result_list > tbody > tr.data-row > td > *,
  .change-list #result_list > tbody > tr.data-row > th > * {
    display: inline;
    min-width: 0;
    color: var(--text, #2a3024);
  }

  /* Строка-чекбокс: прячем текстовую метку «Select record», сам чекбокс
     оставляем в углу карточки — массовые действия остаются рабочими. */
  .change-list #result_list > tbody > tr.data-row > td.action-checkbox {
    position: absolute;
    top: 13px;
    right: 13px;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    overflow: visible !important;   /* иначе чекбокс режется до полоски */
    z-index: 2;
  }
  .change-list #result_list > tbody > tr.data-row > td.action-checkbox::before {
    display: none !important;      /* «Select record» не нужен */
  }
  /* Сам чекбокс — квадратная тач-цель, не растянутая полоса. display:block
     обязателен: общий «td > * {display:inline}» превращал его в 2px-полоску
     (inline replaced + appearance:none схлопывает ширину). */
  .change-list #result_list > tbody > tr.data-row > td.action-checkbox input[type="checkbox"] {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
  }

  /* ПЕРВАЯ смысловая колонка (имя клиента / чип контакта) — заголовок карточки:
     крупнее, без метки, во всю ширину, с местом под чекбокс справа, отчёркнут. */
  .change-list #result_list > tbody > tr.data-row > td.field-name_link,
  .change-list #result_list > tbody > tr.data-row > th.field-name_chip {
    padding: 12px 44px 9px 14px !important;   /* правый отступ под чекбокс */
    border-bottom: 1px solid var(--divider, #ecefe7) !important;
    margin-bottom: 3px;
  }
  .change-list #result_list > tbody > tr.data-row > td.field-name_link::before,
  .change-list #result_list > tbody > tr.data-row > th.field-name_chip::before {
    display: none !important;      /* заголовку метка не нужна */
  }
  .change-list #result_list > tbody > tr.data-row > td.field-name_link > *,
  .change-list #result_list > tbody > tr.data-row > th.field-name_chip > * {
    display: block;
    text-align: left;
  }
  .change-list #result_list > tbody > tr.data-row > td.field-name_link a,
  .change-list #result_list > tbody > tr.data-row > th.field-name_chip a {
    font-size: 15px;
    font-weight: 600;
    color: var(--text, #2a3024);
    line-height: 1.3;
  }

  /* Контакты: чип «аватар + имя» уже есть в разметке (.crm-owner). Держим его
     в ряд, аватар покрупнее — как в contacts-list-mobile. */
  .change-list.model-contact #result_list .crm-owner {
    display: flex;
    align-items: center;
    gap: 11px;
  }
  .change-list.model-contact #result_list .crm-avatar {
    width: 40px;
    height: 40px;
    font-size: 14px;
    flex: 0 0 auto;
  }
  .change-list.model-contact #result_list .crm-contact-name {
    font-size: 15px;
    font-weight: 600;
  }

  /* Тулбар над списком (поиск / фильтры / колонки) — в колонку, во всю ширину. */
  .change-list #toolbar,
  .change-list #toolbar form#changelist-search,
  .change-list #toolbar #searchbar-submit + * ,
  .change-list #changelist-search > div {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Кнопка «Колонки» и «Фильтры» — на всю ширину, удобные тач-цели. */
  .change-list #changelist .column-config-toggle,
  .change-list #changelist [data-filter-toggle] {
    width: 100%;
  }

  /* ── ФОРМА КОНТАКТА (change-form) ─────────────────────────────────────────── */

  /* Контейнер формы — во всю ширину телефона (эталон contact-form-mobile). */
  .change-form #content .form-rows,
  .change-form #content form > .flex {
    width: 100%;
  }

  /* Каждая строка поля — колонка (метка сверху, поле снизу), во всю ширину.
     unfold стекает через flex-col уже сейчас; фиксируем ширину и снимаем
     lg-only фикс-ширину метки на случай узких переопределений. */
  .change-form .field-line {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .change-form .field-line > * {
    width: 100%;
    min-width: 0;
  }
  /* Метка поля — блоком над полем. */
  .change-form .field-line label {
    display: block;
    margin-bottom: 6px;
  }

  /* Ширина поля-ввода / textarea / select — во всю карточку. */
  .change-form .field-line input[type="text"],
  .change-form .field-line input[type="email"],
  .change-form .field-line input[type="url"],
  .change-form .field-line input[type="tel"],
  .change-form .field-line input[type="number"],
  .change-form .field-line input[type="password"],
  .change-form .field-line textarea,
  .change-form .field-line select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  /* select2 (autocomplete «Клиент») рендерит инлайн style="width:NNNpx" —
     распираем на всю ширину, иначе поле уже строки и создаёт «ступеньку». */
  .change-form .field-line .select2,
  .change-form .field-line .select2-container {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Панель отправки формы (submit-row) — во всю ширину, кнопки-строки удобные
     для пальца; unfold сам делает её липкой снизу — не переопределяем механику,
     только ширину/тап-цели. */
  .change-form .submit-row {
    width: 100%;
  }
  .change-form .submit-row input[type="submit"],
  .change-form .submit-row button[type="submit"],
  .change-form .submit-row .button {
    min-height: 44px;
  }
}