/* =========================================================================
   LITTEN — телефон: плотность интерфейса (stage 115)

   Почему отдельный файл и почему он вообще понадобился.

   Дизайн-система свёрстана в px под 100% зума, но на десктопе всё полотно
   ужато до 0.8 (html{zoom} — см. «UI scale» в app.css), и именно эта оптика
   принята за норму. На тач-устройствах масштаб намеренно НЕ включается (11px
   подписи на телефоне нечитаемы), поэтому телефон получал те же числа без
   сжатия: каждый отступ, заголовок, плитка и иконка оказывались на четверть
   крупнее задуманного. Отсюда «на телефоне всё огромное»: одна метрика на всю
   ширину экрана, пять карточек до начала списка, шапка из пяти больших кнопок,
   строка чата в три этажа.

   Правило файла: ужимаем ОБВЯЗКУ (отступы, заголовки, плитки, иконки, высоты
   служебных контролов) до той же оптики, что на десктопе, а размер основного
   ТЕКСТА не трогаем — 14px в кабинете сотрудника остаются 14px. Поля ввода,
   наоборот, получают 16px: меньший шрифт заставляет Safari на iOS зумить
   страницу на каждый тап по полю.

   Ничего своего в палитре и никаких новых компонентов — только геометрия под
   ширину телефона. Файл подключается ПОСЛЕ app.css (base.html), поэтому
   правила равной специфичности перебивают базовые по порядку, без !important.
   Порог 819px — тот же, что у мобильной ветки app.css (таб-панель, drawer).
   ========================================================================= */

@media (max-width: 819px) {
  /* ---- Оболочка: шапка, полотно, место под таб-панель ---------------------
     --topbar-h переопределяем на корне, а не на .topbar: от него считается и
     высота страницы чата (.page:has(> .chat-card)), и сама шапка. */
  :root {
    --topbar-h: 54px;
    /* Высота таб-панели: ряд .tabbar__item (54px) + подписи и кромка = 58px.
       Одно число на всё — отступ страницы, высота чата, подъём плавающих
       кнопок; менять вместе с .tabbar__item в app.css. */
    --tabbar-h: 58px;
    --tabbar-space: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  }

  .topbar { gap: 8px; }
  .topbar__actions { gap: 6px; }
  .topbar .btn-icon {
    width: 36px; height: 36px; border-radius: 11px;
  }
  .topbar .btn-icon svg { width: 18px; height: 18px; }
  .topbar__user-button { padding: 2px; border-radius: 50%; }
  .topbar__user-avatar { width: 32px; height: 32px; font-size: 11.5px; }
  .topbar__bell-count {
    top: -4px; right: -4px; min-width: 16px; height: 16px; font-size: 10px;
    box-shadow: 0 0 0 2px var(--color-bg);
  }
  /* Переключатель темы — под размер соседних кнопок (60x32 в ряду из 36px
     смотрелся тумблером от другого интерфейса). Сдвиг бегунка обязан
     пересчитаться вместе с шириной: 50 - 22 - 2*2 = 24. */
  .theme-toggle__track { width: 50px; height: 28px; }
  .theme-toggle__thumb { top: 2px; left: 2px; width: 22px; height: 22px; }
  .theme-toggle__icon { width: 13px; height: 13px; }
  html[data-theme="dark"] .theme-toggle__thumb { transform: translateX(24px); }
  /* «Выйти» есть в меню профиля — шестая кнопка в шапке телефона лишняя. */
  .topbar__logout { display: none; }
  /* Поиск на телефоне скрыт, и слева от кнопок оставалась пустая полоса:
     ставим в неё логотип — шапка перестаёт быть безымянным рядом иконок. */
  .topbar__brand { display: inline-flex; margin-right: auto; min-width: 0; }
  .topbar__brand .brand-logo__img { height: 26px; max-width: 118px; }

  .page {
    --edge-pad: 14px;
    padding-top: 14px;
    padding-bottom: calc(16px + var(--tabbar-space));
    gap: 14px;
  }
  .page__head { gap: 10px; }
  .page__title { font-size: 20px; }
  .page__subtitle { font-size: 13px; margin-top: 2px; }
  .page__head-lead { gap: 9px; }
  .page-back { width: 32px; height: 32px; }
  .page-back svg { width: 16px; height: 16px; }
  /* Кнопки заголовка делят строку между собой: две встают парой, одинокая
     растягивается на всю ширину — главное действие под большим пальцем,
     вместо «лесенки» из пилюль разной ширины. Базис 42%, а не auto: иначе
     длинная подпись («Диалоги сотрудника») уводила соседа на строку ниже. */
  .page__actions { gap: 8px; width: 100%; }
  .page__actions > .btn,
  .page__actions > form > .btn { flex: 1 1 42%; min-height: 40px; }
  /* Прозрачная кнопка в паре с цветной читалась как подпись, а не как
     действие: на телефоне даём ей поверхность и кромку. */
  .page__actions > .btn-ghost { background: var(--color-surface); border-color: var(--color-border); }
  .btn-lg { padding: 12px 18px; font-size: 14.5px; }

  /* Drawer полного меню: уже, чем на планшете — экран 390pt, и 260px drawer'а
     закрывал его почти целиком. */
  .sidebar { --sidebar-w: 244px; padding: 14px 10px; }
  .sidebar__brand { padding: 4px 6px 14px; }
  .sidebar__brand .brand-logo__img { height: 34px; }

  /* ---- Карточки и типографика разделов ---------------------------------- */
  .card { padding: 14px; gap: 11px; border-radius: 14px; }
  .card__title { font-size: 14.5px; }
  .card__subtitle { font-size: 12.5px; }
  .card__foot { padding-top: 10px; font-size: 12.5px; }
  .empty-state { padding: 26px 14px; gap: 9px; }
  .empty-state__icon { width: 46px; height: 46px; border-radius: 14px; }
  .empty-state__icon svg { width: 24px; height: 24px; }
  .empty-state__title { font-size: 15px; }
  /* Вкладки хабов: одна строка с горизонтальной прокруткой (padding и шрифт
     ужаты так, чтобы четыре вкладки влезали в 390pt без прокрутки вовсе).
     flex: none — иначе flex сжимал последнюю вкладку и обрезал подпись. */
  .hub-tabs { margin-bottom: 12px; }
  .eco-tabs,
  .hub-tabs { gap: 3px; padding: 3px; }
  .eco-tabs__tab,
  .hub-tabs__tab { flex: none; padding: 7px 12px; font-size: 12.5px; }
  .chips { gap: 6px; }
  .chip { padding: 5px 10px; font-size: 12px; }

  /* ---- Метрики ----------------------------------------------------------
     Главная причина «всё огромное»: сетки метрик сворачивались в одну колонку
     (auto-fit от 190px), и каждая цифра занимала полосу во всю ширину экрана —
     до содержимого раздела приходилось прокручивать пять карточек. На телефоне
     метрики — это плотная плитка 2×N, как в нативных приложениях. */
  .metrics,
  .metric-grid,
  .metric-grid--pvz,
  .metric-grid--shift,
  .metric-grid--opening,
  .metric-grid--acceptance,
  .metric-grid--violations,
  .metric-grid--claims,
  .dash-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .metric-card {
    padding: 11px 12px; gap: 6px; border-radius: 12px;
    /* Ряд плиток одной высоты: подпись в две строки больше не делает соседа
       выше. Значение прижато к низу базовым правилом margin-top: auto. */
    min-height: 78px;
  }
  /* Место под иконку в углу — только там, где иконка есть: в справочниках
     (ПВЗ, смены) плитки без иконки, и глухой отступ справа их только раздувал. */
  .metric-card:has(> .metric-card__icon) { padding-right: 44px; }
  /* Иконка — в правый верхний угол: в узкой плитке она стоила целой строки
     высоты, а как акцент в углу читается не хуже. Плитка уже position:
     relative и overflow: hidden — новых слоёв не нужно. */
  .metric-card__icon {
    position: absolute; top: 10px; right: 10px;
    width: 28px; height: 28px; border-radius: 9px;
  }
  .metric-card__icon svg { width: 15px; height: 15px; }
  .metric-card__label { font-size: 11.5px; line-height: 1.3; }
  .metric-card__value { font-size: 20px; }
  /* Расшифровка под цифрой — не больше двух строк: у алертов там перечисление
     точек, и плитка вырастала втрое выше соседней. */
  .metric-card__delta {
    font-size: 11px; line-height: 1.3;
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  }
  /* Плитка на всю ширину остаётся только там, где её просит сам раздел. */
  .metric-card--wide { grid-column: 1 / -1; }

  /* ---- Списки «значение справа» ----------------------------------------- */
  .stat-list__item { padding: 10px 0; font-size: 13px; }
  .stat-list__value { font-size: 15px; }
  .dash-list__label { font-size: 13px; }
  .dash-list__sub { font-size: 11.5px; }
  .dash-list__value { font-size: 14px; }
  /* Сигналы «Требует внимания»: на телефоне они идут в одну колонку, поэтому
     цифре хватает 16px — иначе счётчик перевешивает сам текст проблемы. */
  .dash-alert__link { padding: 10px 12px 10px 10px; gap: 10px; }
  .dash-alert__value { font-size: 16px; }
  .dash-alert__label { font-size: 13px; }

  /* ---- Дашборды --------------------------------------------------------- */
  .dash-group { gap: 10px; margin-top: 2px; }
  .dash-group__title { font-size: 14px; }
  .dash-cards { grid-template-columns: 1fr; gap: 12px; }
  .dash-widget { gap: 10px; }
  .dash-widget__body { gap: 8px; }
  .dash-chart__row { font-size: 12.5px; grid-template-columns: minmax(76px, 40%) 1fr minmax(46px, max-content); gap: 8px; }
  .dash-linechart__plot svg { height: 132px; }
  .chart-legend { gap: 10px 14px; font-size: 11.5px; }

  /* ---- Панель «Отчёты OZON» --------------------------------------------
     Структуру панели не трогаем (отрывной листок + подпись + кнопка) — только
     плотность. Ниже 720px базовые правила уводили пилюлю срока и кнопку в
     отдельную строку на всю ширину, и один срок занимал полтора экрана. */
  .repcal { padding: 12px 14px; margin-bottom: 12px; border-radius: 16px; }
  .repcal__head { gap: 10px; margin-bottom: 10px; align-items: flex-start; }
  /* Кнопка панели ниже 720px растягивалась на всю ширину и с центрированной
     подписью читалась как второй заголовок. Ужимаем до обычной кнопки. */
  .repcal__cta { width: auto; min-height: 34px; padding: 8px 13px; font-size: 12.5px; }
  .repcal__title { font-size: 15px; }
  .repcal__summary { font-size: 12px; }
  .repcal__slots { gap: 8px; }
  .repslot { flex-wrap: nowrap; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; }
  .repslot__leaf { width: 44px; height: 46px; grid-template-rows: 15px 1fr; }
  /* Не мельче 10px: «авг» на отрывном листке 8.5px читался как пятно. */
  .repslot__month { font-size: 10px; letter-spacing: 0.04em; }
  .repslot__month::before,
  .repslot__month::after { top: 5px; width: 2px; height: 2px; }
  .repslot__month::before { left: 5px; }
  .repslot__month::after { right: 5px; }
  .repslot__day { font-size: 21px; }
  .repslot__title { font-size: 13px; }
  .repslot__sub,
  .repslot__fact { font-size: 11.5px; }
  .repslot__side { flex: 0 0 auto; grid-auto-flow: row; justify-items: end; align-items: center; gap: 5px; }
  .repslot__when { padding: 2px 7px; font-size: 10.5px; text-align: right; }
  .repslot__action { min-height: 30px; padding: 6px 11px; font-size: 12px; }

  /* ---- Таблицы реестров -------------------------------------------------
     Таблица на 390pt всё равно уезжает в горизонтальный скролл (.table-wrap),
     поэтому строка обязана быть строкой: без nowrap адрес переносился на
     четыре этажа и одна запись занимала 110px высоты. Полный текст виден в
     карточке записи (строки кликабельны) и в Excel-выгрузке. */
  .table { font-size: 12.5px; }
  .table thead th { padding: 8px 10px; font-size: 10px; }
  .table tbody td { padding: 9px 10px; white-space: nowrap; }
  .table tbody td.td-wrap { white-space: normal; }
  .table td.cell-clip,
  .table-cell-address,
  .table-cell-pvz {
    min-width: 0; max-width: 158px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .cell-sub { font-size: 11px; }
  .badge { font-size: 10.5px; padding: 2px 7px; }
  .role-badge,
  .status-badge { font-size: 10.5px; padding: 3px 8px; }

  /* ---- Плашка «укажите свою почту» (компонент stage 116) ----------------
     Живёт над каждой страницей, и в исходных размерах занимала на телефоне
     почти весь первый экран. Плотность правим здесь, а не в её собственном
     блоке: компонент новый и ещё дорабатывается. */
  .mail-cta { padding: 12px 14px; gap: 8px 10px; margin-bottom: 12px; border-radius: 12px; }
  .mail-cta__icon { width: 30px; height: 30px; border-radius: 9px; }
  .mail-cta__icon svg { width: 17px; height: 17px; }
  .mail-cta__eyebrow { font-size: 10.5px; }
  .mail-cta__title { font-size: 15px; }
  .mail-cta__text { font-size: 12.5px; margin-top: 4px; }
  .mail-cta__btn { min-height: 40px; }

  /* ---- Дропзона импорта ------------------------------------------------- */
  .dropbay__zone { padding: 22px 14px; gap: 6px; }
  .dropbay__icon { width: 42px; height: 42px; }
  .dropbay__icon svg { width: 20px; height: 20px; }
  .dropbay__title { font-size: 14px; }
  .dropbay__hint { font-size: 12px; }
  .dropbay__kind { padding: 4px 9px; font-size: 11.5px; }

  /* ---- Матрица графика --------------------------------------------------
     Липкая колонка ПВЗ в 208–260px съедала экран телефона целиком: справа от
     неё оставалось место ровно под один день. Ужимаем колонку и день — в
     видимую область попадают три дня, и матрица снова читается как матрица. */
  .sched-matrix__corner,
  .sched-matrix__pvz { min-width: 146px; max-width: 172px; padding: 7px 9px; }
  .sched-matrix__pvz a { font-size: 12.5px; }
  .sched-matrix__meta { gap: 5px; margin-top: 2px; flex-wrap: wrap; }
  .sched-matrix__code { font-size: 10.5px; }
  /* Чип города — лишняя строка в узкой колонке: город и так стоит первым
     словом в коде точки (ПСКОВ_173, БОРИСОВИЧИ_18). */
  .sched-matrix__city { display: none; }
  .sched-matrix__day { min-width: 84px; }
  .mx-chip { font-size: 11px; }

  /* ---- Формы -----------------------------------------------------------
     16px в полях — не «крупнее», а защита от автозума Safari: с меньшим
     шрифтом iOS увеличивает страницу на каждом фокусе и оставляет её
     сдвинутой. Высота контролов при этом остаётся прежней (палец). */
  input.input,
  input.form-control,
  textarea.input,
  textarea.form-control { font-size: 16px; }
  /* Панель фильтров ниже 720px сворачивалась в одну колонку, и пять полей с
     кнопкой занимали первый экран целиком — до списка, за которым человек и
     пришёл. На телефоне поля идут по двое, поиск — во всю ширину. */
  .filters-bar { padding: 12px; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters-bar__search,
  .filters-bar .form-field--full,
  /* Кнопка, стоящая прямо в сетке фильтров, занимает строку целиком: в одной
     колонке из двух она выглядела обрезанной по ширине. */
  .filters-bar > .btn { grid-column: 1 / -1; }
  .filters-bar select.input,
  .filters-bar select.form-control { font-size: 13px; padding-right: 26px; }
  .form-grid { gap: 12px; }
  .field__label,
  .form-label { font-size: 12.5px; }

  /* ---- Плавающие элементы ---------------------------------------------- */
  .fb-fab {
    right: 14px; bottom: calc(14px + var(--tabbar-space));
    height: 42px; padding: 0 12px;
  }
  .fb-fab svg { width: 19px; height: 19px; }
  /* Скрытие кнопки на экране чата переехало в app.css: перекрытие «Отправить»
     воспроизводится и на планшете, и на невысоком окне десктопа. */
  .toast-stack { bottom: calc(14px + var(--tabbar-space)); left: 12px; right: 12px; }

  /* ---- Чаты -------------------------------------------------------------
     Две поломки разом. Первая: страница чата считала высоту как «экран минус
     шапка», ничего не зная про таб-панель и вырезы, — композер уезжал под
     панель, кнопка «Отправить» не нажималась (её и было видно на скриншотах с
     iPhone). Вторая: строка списка шла в три этажа (имя + роль + «Личные
     сообщения» + превью), и на экран влезало четыре контакта. */
  .page:has(> .chat-card) {
    height: calc(100dvh - var(--topbar-h) - env(safe-area-inset-top) - var(--tabbar-space));
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 10px;
  }
  .chat-card { padding: 10px; gap: 10px; }
  /* min-height базовых 300px не давал ленте сжаться, и композер выдавливало за
     нижнюю кромку окна. */
  .chat-box { min-height: 120px; padding: 10px; gap: 8px; }
  .chat-msg__bubble { max-width: 88%; padding: 8px 11px; }
  .chat-msg__meta { font-size: 11px; gap: 6px; }
  .chat-msg__text { font-size: 13.5px; }
  /* Эмодзи-пикер на телефоне не нужен: смайлики есть в системной клавиатуре,
     а 34px в узком композере — это место под текст. */
  .chat-form__tools .chat-emoji { display: none; }
  /* Композер снова одной строкой: колонкой (правило ≤720px) он забирал у
     короткой ленты ещё 46px высоты, а место в строке появилось, как только из
     неё ушёл эмодзи-пикер. */
  .chat-form__row { flex-direction: row; align-items: flex-end; gap: 6px; flex-wrap: nowrap; }
  .chat-form__tools { gap: 6px; }
  textarea.chat-form__input { min-height: 40px; max-height: 120px; border-radius: 18px; padding: 9px 13px; }
  .chat-form__tools .btn { min-height: 40px; padding: 0 13px; font-size: 13px; }
  .chat-attach { width: 36px; height: 36px; }
  .chat-attach svg { width: 18px; height: 18px; }

  .chat-list-group + .chat-list-group { margin-top: 12px; }
  .chat-list-group__title { padding: 2px 8px 6px; font-size: 10.5px; }
  .chat-thread__link { padding: 9px 6px; gap: 10px; }
  .chat-thread__name { flex-wrap: nowrap; gap: 6px; min-width: 0; }
  .chat-thread__name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Роль контакта в списке прячем: она есть в карточке человека, а в строке
     обрезалась многоточием и уводила превью на третий этаж. */
  .chat-thread__name .role-badge { display: none; }
  .chat-thread__main .cell-sub {
    font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .chat-thread__preview { font-size: 12.5px; }
  .chat-thread__aside { font-size: 10.5px; text-align: right; }

  /* ---- Вход ------------------------------------------------------------- */
  .signin { padding: 14px; }
  .signin__logo { height: 46px; max-width: 200px; }
  .signin__tagline { font-size: 11px; letter-spacing: .05em; margin-bottom: 16px; }
  .signin__title { font-size: 23px; }
  .signin__subtitle { font-size: 13.5px; margin-top: 6px; }
  .signin__form { gap: 14px; margin-top: 20px; }
  .signin__form .field__label { font-size: 13px; line-height: 18px; }
  .signin__form .input { padding: 12px 15px; border-radius: 13px; }
  .signin__form .input--affixed { padding-left: 42px; }
  .signin__row { font-size: 13px; }
  .signin__row .checkbox { font-size: 13px; }
  .signin__submit { height: 48px; font-size: 15.5px; border-radius: 13px; margin-top: 4px; }
  .signin__hint { font-size: 12px; }
  .auth-shell { padding: 14px; }
  .auth-card { padding: 20px 16px; gap: 14px; }
  .auth-card__title { font-size: 21px; }
}

/* Совсем узкие экраны (iPhone SE/mini и телефоны в масштабе «крупный текст»):
   боковые поля ещё уже, а карточка входа не должна упираться в кромки. */
@media (max-width: 400px) {
  .page { --edge-pad: 12px; }
  .topbar { --edge-pad: 12px; }
  .topbar__brand .brand-logo__img { max-width: 96px; }
  .signin__card { padding: 22px 16px 20px; border-radius: 18px; }
  .metrics,
  .metric-grid,
  .dash-metrics { gap: 7px; }
  .metric-card { padding: 10px; min-height: 86px; }
  .metric-card__value { font-size: 19px; }
}