/*
 * mobile.css — единая точка для мобильных правил DecorBuro CRM.
 *
 * Подключается ПОСЛЕДНИМ в <head> каждой страницы (после inline <style>),
 * чтобы каскадно перебивать существующие правила.
 *
 * Брейкпоинты (см. plane/mobile-2026-04-28.md):
 *   (max-width: 700px) — phone-режим (карточки, fullscreen drawer)
 *   (max-width: 360px) — small phone (iPhone SE 1-го поколения)
 *   (pointer: coarse) — touch-устройства (phone + tablet + тач-ноут)
 *
 * iPad portrait (768×1024) намеренно НЕ попадает в mobile-режим — у него
 * есть screen real estate под desktop-таблицы. Touch-фиксы накрывают его
 * через (pointer: coarse).
 *
 * NOTE: board.html имеет собственный @media (max-width: 768px) с body padding
 * — на 701–768px он один работает (mobile.css неактивен), на ≤700px перебивается
 * этим файлом. При рефакторинге board.html в P2/P3 удалить дубликат.
 */

/* ===== Safe-area переменные (iPhone notch + home indicator) ===== */
/* На desktop возвращают 0px — никому не вредят, можно использовать безусловно. */
:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
}

/* ===== iOS Safari автозум на инпутах < 16px ===== */
/* design.html:161 (.cell-input) и accounting.html:578 (.fin-input) — 13px,
 * запускают зум при фокусе на iPhone. Перебиваем глобально на тач-устройствах. */
@media (pointer: coarse) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* ===== Touch targets ≥ 44×44 (Apple HIG) ===== */
/* Только самостоятельные иконочные кнопки. .btn НЕ трогаем — он используется
 * как inline-кнопка в drawer-формах с компактной высотой ~32px. */
@media (pointer: coarse) {
  .icon-btn,
  .avatar-pill,
  .btn-search,
  .btn-bell,
  .btn-logout,
  .drawer-close {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ===== Phone-режим (≤ 700px) ===== */
@media (max-width: 700px) {
  body {
    padding:
      max(12px, var(--safe-top))
      max(8px,  var(--safe-right))
      max(12px, var(--safe-bottom))
      max(8px,  var(--safe-left));
  }

  .page {
    max-width: 100%;
    border-radius: 16px;
  }
}

/* ===== Small phone (≤ 360px) ===== */
@media (max-width: 360px) {
  .page {
    border-radius: 12px;
  }
}

/* ============================================================
 * Мобильный топбар (бургер удалён 2026-05-05; логотип кликабелен)
 * ============================================================ */

@media (max-width: 700px) {
  /* ----- Топбар компактнее ----- */
  .header-top {
    height: 52px;
    /* padding-left: 6px — логотип ближе к левому краю.
     * max(6px, env(safe-area-inset-left)) защищает от нотча в landscape.
     * В обычном portrait safe-area-inset-left = 0 → 6px от края. */
    padding: 0 max(6px, env(safe-area-inset-right)) 0 max(6px, env(safe-area-inset-left));
    gap: 6px;
    /* Без overflow:hidden — year-dropdown абсолютно позиционирован и должен
     * выйти за границу шапки. Вместо обрезания управляем flex-shrink на детях:
     * topbar-center сжимается, topbar__right (с avatar/logout) — нет. */
  }
  /* Логотип уменьшаем. Финальный размер управляется из employee-colors.js
   * (height:28px !important в @media 700px) — это правило резервное. */
  .logo__icon { height: 28px; }
  /* Разделитель между логотипом и заголовком — скрываем, экономим ~11px */
  .header-sep { display: none; }
  /* Центральная часть: сжимаема, не выталкивает кнопки вправо за экран.
   * overflow НЕ задаём — year-dropdown абсолютно позиционирован и должен
   * выйти за пределы .topbar-center вниз. min-width:0 — ключевое: без него
   * flex-child не сжимается ниже своего min-content (заголовок страницы). */
  .topbar-center {
    min-width: 0;
    flex: 1 1 0;
    justify-content: flex-start;
    gap: 6px;
  }
  /* Заголовок страницы: оставляем для landscape; в portrait скрывается
   * отдельным блоком ниже. Здесь — ellipsis на случай если всё же отображается. */
  .header-page-name {
    font-size: 15px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    min-width: 0;
    flex-shrink: 1;
  }
  /* Имя пользователя в avatar-pill на мобильном скрываем.
   * Окончательное скрытие управляется из employee-colors.js через !important
   * (тот <style> добавляется в DOM позже этого <link>). Это — fallback. */
  .avatar-pill__name { display: none; }
  /* Year-pill: компактнее, flex-shrink:1 — сожмётся если не хватит места */
  .year-current-btn {
    padding: 3px 8px;
    font-size: 11px;
    flex-shrink: 1;
  }
  /* topbar-right И topbar__right — класс отличается по файлам.
   * flex-shrink:0 — правая часть НЕ сжимается: avatar/logout всегда видимы. */
  .topbar-right,
  .topbar__right {
    gap: 4px;
    flex-shrink: 0;
    align-items: center;
    display: flex;
  }

  /* ── Скрываем элементы, переполняющие шапку на ≤700px ──────────────────
   * Приоритет видимости: logout > avatar > bell > search > year-pill > btn-add > title
   * ──────────────────────────────────────────────────────────────────────── */
  /* project_schedule: встроенный поиск-инпут + «Фильтры» */
  .search-wrap { display: none; }
  .filter-toggle-btn { display: none; }
  /* «Добавить проект» — убрано из шапки */
  #btnAddProject { display: none; }
  /* users.html: «Добавить сотрудника» ~160px → avatar уезжает за край.
   * Только кнопки .btn-add/.btn-add-top внутри topbar-right/topbar__right. */
  .topbar__right .btn-add,
  .topbar-right .btn-add,
  .topbar__right .btn-add-top,
  .topbar-right .btn-add-top { display: none; }
}

/* ── Portrait: скрываем название страницы ────────────────────────────────
 * В вертикальной ориентации шапка узкая — название только занимает место.
 * Year-pill (year-current-btn) ОСТАВЛЯЕМ — он функционален на графиках.
 * Landscape (ширина > высоты) — название остаётся: там места достаточно.
 * ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 700px) and (orientation: portrait) {
  .header-page-name { display: none; }
}

/* ============================================================
 * P5 — Drawer fullscreen + модалки + native пикеры + hover→tap
 * ============================================================ */

/*
 * .drawer на ≤700px — общий fullscreen-override.
 *
 * В CRM два типа drawer'ов с одинаковым селектором .drawer:
 *   A — side-drawer (right:-540px → right:0) в project_schedule, information,
 *       accounting, users.
 *   B — centered modal (translate(-50%,-50%) + scale) в clients, vacation_schedule,
 *       tasks.
 *
 * На mobile оба становятся fullscreen с fade-in. Анимация slide заменена на
 * opacity, чтобы обойти конфликт между двумя transform-моделями. Класс
 * .drawer--modal не вводим — нет HTML-разметки для него и JS-функций openDrawer
 * со множеством call-sites.
 */

@media (max-width: 700px) {
  .drawer {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    transform: none !important;
    /* fade-вход вместо slide — обходит обе оригинальные анимации */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s;
  }
  .drawer.open {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  /* drawer-body — растягивается, скроллится */
  .drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
  }
  /* drawer-footer — прилипает снизу с safe-area, не уезжает за клавиатуру (100dvh) */
  .drawer-footer {
    position: sticky;
    bottom: 0;
    padding-bottom: max(14px, var(--safe-bottom));
    background: var(--bg-surface, #F0F2FA);
    z-index: 1;
  }
  /* drawer-close 32→44 (Apple HIG) */
  .drawer-close {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px;
  }
}

/* my_tasks.html .modal — отдельная центральная модалка */
@media (max-width: 700px) {
  .modal {
    max-height: 92dvh;
  }
}

/* board.html — fin-modal, miss-modal, lead-modal уже responsive (95% / 92%),
 * не трогаем. */

/* ============================================================
 * Hover→tap (8 точечных правил из полного грепа :hover по всем HTML)
 * ============================================================
 *
 * @media (hover: none) — true только на тач-устройствах. Не зависит от
 * breakpoint'а — корректно отключается на iPad с trackpad/мышью (там hover:hover).
 *
 * Правила точечные: только action-кнопки, скрытые-через-hover. Tooltip'ы и
 * подсказки оставляем (.cell-editable::after, .audit-ico) — они не блокируют
 * функциональность на тач-устройствах.
 */

@media (hover: none) {
  /* index.html — кнопка удаления проекта в виджете «Мои проекты» */
  .proj-row-del { display: inline-flex !important; }

  /* project_schedule.html — действия в строке таблицы проектов */
  tr .row-action,
  .row-action { opacity: 1 !important; }

  /* clients.html — удаление пункта истории клиента */
  .hist-del { opacity: 1 !important; }

  /* workspace.html — удаление комментария проекта */
  .comment-del { opacity: 1 !important; }

  /* information.html — upload-overlay над картинкой vcard */
  .vcard__img.is-editable .vcard__upload-hover { opacity: 1 !important; }
  .led-card__img.has-img .led-upload-hover { opacity: 1 !important; }

  /* information.html — удаление кастомной категории */
  .cat-tab-del { display: inline-flex !important; }

  /* accounting.html — действия в строке организаций */
  .org-row__actions { opacity: 1 !important; }
}

/* ============================================================
 * P3 — Таблицы → карточки на ≤700px
 * ============================================================
 *
 * Стратегия: thead скрываем, tr становится карточкой, td — flex-строка
 * с подписью слева (через td::before { content: attr(data-label) }).
 * Подписи добавляются в JS-рендере таблиц как атрибут data-label="...".
 * Скрываемые на mobile колонки помечаются классом col-hide-mobile.
 *
 * Применяется только к перечисленным таблицам — чтобы не задеть фильтры,
 * служебные таблицы и таблицы внутри drawer.
 *
 * accounting.html намеренно НЕ включён — там CSS Grid layout (.trow), не
 * настоящий <table>. Адресуется отдельно.
 */

@media (max-width: 700px) {
  .projects-table,
  .vacation-table,
  .design-table {
    display: block;
    width: 100%;
  }
  .projects-table thead,
  .vacation-table thead,
  .design-table thead {
    display: none;
  }
  .projects-table tbody,
  .vacation-table tbody,
  .design-table tbody {
    display: block;
    width: 100%;
  }

  /* Строка-карточка */
  .projects-table tbody tr,
  .vacation-table tbody tr,
  .design-table tbody tr {
    display: block;
    padding: 12px 14px;
    margin: 0 0 10px;
    border-radius: 12px;
    background: var(--bg-surface, #F0F2FA);
    box-shadow: var(--shadow-raise-sm, 3px 3px 8px #C8CAD8, -2px -2px 6px #FAFAFF);
    border: none;
  }

  /* Ячейки внутри карточки — лейбл слева, значение справа */
  .projects-table tbody td,
  .vacation-table tbody td,
  .design-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    border: none !important;
    padding: 4px 0 !important;
    font-size: 13px;
    text-align: left !important;
  }
  .projects-table tbody td::before,
  .vacation-table tbody td::before,
  .design-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-muted, #707388);
    flex-shrink: 0;
    min-width: 90px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  /* td без data-label (project name, action arrow) — без подписи, на всю ширину */
  .projects-table tbody td:not([data-label])::before,
  .projects-table tbody td[data-label=""]::before,
  .vacation-table tbody td:not([data-label])::before,
  .vacation-table tbody td[data-label=""]::before,
  .design-table tbody td:not([data-label])::before,
  .design-table tbody td[data-label=""]::before {
    display: none;
  }
  .projects-table tbody td:not([data-label]),
  .projects-table tbody td[data-label=""],
  .vacation-table tbody td:not([data-label]),
  .vacation-table tbody td[data-label=""],
  .design-table tbody td:not([data-label]),
  .design-table tbody td[data-label=""] {
    justify-content: flex-start;
  }
  /* design.html — снимаем inline max-width:180px на mobile, чтобы ячейка занимала ширину карточки */
  .design-table tbody td { max-width: none !important; }
  /* Скрытые на mobile колонки */
  .col-hide-mobile { display: none !important; }

  /* project_schedule.html и design.html — month-header-row остаётся «разделителем», не карточкой */
  .projects-table tr.month-header-row,
  .design-table tr.month-header-row {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: 16px;
  }
  .projects-table tr.month-header-row td,
  .design-table tr.month-header-row td {
    display: block !important;
    padding: 8px 0 !important;
    text-align: center !important;
  }
  .projects-table tr.month-header-row td::before,
  .design-table tr.month-header-row td::before {
    display: none !important;
  }
}

/* P4 (канбан tasks.html) удалён 2026-06-09: страница tasks.html ретайрнута
 * 2026-06-02, класс .kanban больше нигде не используется. Мобильные правила
 * .kanban были мёртвым кодом — удалены. my_tasks.html (без DnD) адаптируется
 * card-режимом выше. */

/* ============================================================
 * P8 — board.html: компактная доска на ≤700px (свимлейн + колонки)
 * ============================================================
 *
 * board.html — координаторская доска: 9 колонок × 280px на desktop. На phone —
 * горизонтальный скролл с компактными колонками 200px и gap 8px.
 *
 * КЛЮЧЕВОЕ: свимлейн-полоса (.board-swimlanes) и колонки (.board-columns) лежат
 * в ОДНОМ скролл-контейнере (.board-wrap, overflow-x), поэтому двигаются
 * синхронно — заголовок группы «ПРОЕКТЫ» едет ровно над своими колонками
 * «Предварительный проект» + «В работе». Чтобы полоса точно накрывала колонки,
 * ширина каждого свима = N*200px + (N-1)*8px (N — число колонок в группе),
 * а padding-left/gap полосы совпадают с колонками. Сумма свимов === сумма
 * колонок (1864px), поэтому полоса не разъезжается при скролле.
 *
 * Pill-навигация (.swim-pills) ОТКЛЮЧЕНА: пользователь предпочёл заголовки-группы
 * над колонками, а не отдельное меню сверху, которое скроллилось независимо.
 */
@media (max-width: 700px) {
  .swim-pills { display: none !important; }
  #boardViewSegment { width: 100%; justify-content: center; }

  .board-swimlanes {
    gap: 8px;
    padding: 10px 16px 6px;
    min-width: calc(9 * 200px + 8 * 8px + 2 * 16px);
  }
  .swim { padding: 7px 10px; font-size: 11px; }
  /* Ширины свимов под мобильную колонку 200px + gap 8px (см. board.html:185). */
  .swim-sales   { width: calc(2 * 200px + 1 * 8px); }
  .swim-docs    { width: calc(3 * 200px + 2 * 8px); }
  .swim-finance { width: calc(1 * 200px); }
  .swim-closing { width: calc(3 * 200px + 2 * 8px); }

  .board-columns {
    gap: 8px;
    padding: 4px 16px 16px;
    min-width: calc(9 * 200px + 8 * 8px + 2 * 16px);
  }
  .board-col {
    flex: 0 0 200px;
    min-height: 320px;
  }
  .col-head {
    padding: 10px 10px 8px;
    font-size: 11px;
  }
}

/* accounting.html — CSS Grid layout (.trow), не <table>.
 * Стратегия P3 td::before не применима. Минимальный mobile-фикс: один
 * столбец вместо 7-8, чтобы строки не выходили за экран и не требовали
 * горизонтального скролла. Подписей нет (UX компромисс — accounting в
 * рефакторинге CSS-grid → table запланирован отдельно). */
@media (max-width: 700px) {
  .table-surface .col-header { display: none; }
  .table-surface .trow {
    grid-template-columns: 1fr !important;
    border-top: none !important;
    margin: 0 0 8px;
    padding: 12px 14px !important;
    border-radius: 12px;
    background: var(--bg-surface, #F0F2FA);
    box-shadow: var(--shadow-raise-sm, 3px 3px 8px #C8CAD8, -2px -2px 6px #FAFAFF);
  }
  .table-surface .trow > div { padding: 2px 0; }
}

/* users.html — .srow: 7-колоночный CSS-grid (имя/логин/роль/отдел/пароль/дата/›).
 * На ≤700px колонки схлопывались и текст с роль-чипами наезжал друг на друга.
 * Переключаем строку в одноколоночную карточку: ячейки складываются столбиком,
 * сжаты по содержимому (justify-items:start), чтобы цветные роль-чипы не
 * растягивались в полосу; шапка таблицы и стрелка скрыты. */
@media (max-width: 700px) {
  .col-header { display: none; }
  .srow {
    grid-template-columns: 1fr !important;
    justify-items: start;
    align-items: start !important;
    gap: 6px !important;
    padding: 12px 14px !important;
    border-top: none !important;
    margin: 0 0 8px;
    border-radius: 12px;
    background: var(--bg-surface, #F0F2FA);
    box-shadow: var(--shadow-raise-sm, 3px 3px 8px #C8CAD8, -2px -2px 6px #FAFAFF);
  }
  .srow > .staff-info { justify-self: stretch; width: 100%; }
  .srow > .arr { display: none; }
}

/* ============================================================
 * index.html — hero-блок: stats не уезжают за экран
 * ============================================================
 *
 * На desktop hero использует flex justify-content:space-between.
 * hero__stats имеет flex-shrink:0 — на узком экране это выталкивает
 * блок «Завершённые задачи» за правую границу viewport.
 * На мобильном переключаем на column-wrap. */
@media (max-width: 700px) {
  .hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
  }
  .hero__stats {
    flex-shrink: 1;
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
  }
  .stat {
    flex: 0 0 auto;
    padding: 8px 14px;
    min-width: 60px;
  }
}

/* ============================================================
 * clients.html — .client-row: карточка на мобильном
 * ============================================================
 *
 * Desktop: 7-колоночная grid с minmax. На ≤700px все 7 ячеек
 * выходят за экран. Переключаем строку на flex-column карточку:
 * показываем только основную информацию (имя + статус-чип),
 * остальные колонки скрываем. */
@media (max-width: 700px) {
  .client-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 12px 14px !important;
    overflow: hidden;
  }
  /* Первый ребёнок — .client-info (аватар + имя) — растягиваем на всю ширину */
  .client-row > .client-info {
    width: 100%;
  }
  /* Второй ребёнок — тип (type-chip) — показываем */
  /* Третий — статус-чип — показываем */
  /* Остальные (менеджер, долг, проекты, дата) — скрываем, экономим место */
  .client-row > div:nth-child(n+4) { display: none !important; }
  /* Статус-чип не выезжает за карточку */
  .status-chip {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
