/* ============================================================
   МОБИЛЬНЫЙ ВИЗУАЛЬНЫЙ СЛОЙ — перенесён из прототипа
   D:\grok\mobcrm\designs\mobile-ui (скин «quiet», по умолчанию в прототипе).

   Правила разделов, названия и вложенность НЕ трогает — только цвет, тип,
   отступы, поверхности, состояния и движение. Загружается ПОСЛЕ ui.css
   и побеждает его на общих именах классов без !important, за счёт
   порядка подключения (см. cabinet/base.html).

   Сознательно НЕ перенесено из прототипа:
   — поддельная строка статуса Android (время/сеть/батарея): в самом
     Android-приложении статус-бар уже настоящий, а в мобильном браузере
     подделывать чужой системный UI как минимум странно;
   — имитатор состояний loading/empty/error/success через localStorage —
     это инструмент витрины прототипа, в бою состояния настоящие;
   — скрытие demo-strip/verify-strip: у прототипа это была одна тестовая
     компания без реальных сроков подписки, а в бою эти полосы несут
     реальную информацию (счётчик демо, предупреждение о подписке,
     подтверждение почты) — их прячем только когда прячет сам ui.css.

   Перенесено ДОПОЛНИТЕЛЬНО (не было в первом заходе, добавлено по месту):
   — кнопка-меню «Приход/Расход/Перевод» (fab-speed-*) и лист быстрого
     ввода платежа (.cx-*) с разделов «Финансы» и «Счёт» прототипа —
     см. _money_sheet.html и mobile-shell.js. В отличие от прототипа лист
     не считает баланс сам и не хранит операции в памяти — отправляет
     настоящую форму на /app/finance/create и /app/finance/transfer.
   ============================================================ */

@media (max-width: 700px) {
  :root {
    /* Крупнее прежнего: прототип поднял цель нажатия и скругления */
    --tap: 48px;
    --r-sm: 8px;
    --r: 12px;
    --r-lg: 16px;

    /* Раньше здесь стояли #55647A/#7E90AC — темнее ради голого числа
       контраста (WCAG), но на глаз это уже спорит с содержимым, а не
       тихо его отделяет, — не тот сдержанный цвет, что заявлен в шапке
       этого файла. Возвращаем мягкие тона, ближе к исходным десктопным,
       чуть темнее для читаемости, но без жёсткого контура. */
    --ink-3: #7A879C;   /* было #6B7A90 на десктопе, #55647A — прошлый вариант */
    --line: #E3E8F0;    /* было #DFE5EE на десктопе, #7E90AC — прошлый вариант */
  }

  body {
    -webkit-font-smoothing: antialiased;
  }

  /* Тянуть лист снизу за ручку не должно запускать системный
     pull-to-refresh браузера — тот слушает overscroll именно на html/body.
     Для приложения на телефоне (WebView с SwipeRefreshLayout) этого мало,
     добивается мостиком AndroidUi — см. mobile-shell.js и MainActivity.kt */
  html, body { overscroll-behavior-y: contain; }

  /* ---------- Ряд вкладок карточки сделки/настроек: подсказка о скролле —
     тот же приём, что у стадий-пилюль (.stage-strip-wrap::after), но без
     обёртки: .tabs2 сам является скроллящимся контейнером, а маска, в
     отличие от псевдоэлемента-child, не едет вместе с содержимым ---------- */
  .tabs2 {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
  }

  /* ---------- Карточки списков: без тени, тонкая рамка ---------- */
  .dcard,
  .card-row,
  .line-card,
  .visit-card,
  .acc-card {
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    box-shadow: none;
  }
  .dcard-sum,
  .col-sum,
  .big-sum,
  .kpi-tile b {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
  }
  .kpi-tile { border-radius: var(--r-lg); }

  /* ---------- Стадии-пилюли ---------- */
  .stage-pill {
    border-radius: 999px;
    box-shadow: none;
  }
  .stage-pill.on { box-shadow: none; }

  /* ---------- Кнопки ---------- */
  .btn { border-radius: var(--r); }
  .icon-btn { border-radius: 50%; }

  /* ---------- Круглая кнопка действия: только значок, без подписи —
     прототип сознательно убрал текст на телефоне: рука закрывает подпись
     кнопки прежде, чем успевает её прочитать ---------- */
  .fab {
    width: 56px;
    height: 56px;
    min-width: 56px;
    max-width: 56px;
    padding: 0;
    gap: 0;
    border-radius: 50%;
    font-size: 0;
    overflow: hidden;
  }
  .fab-txt { display: none !important; }
  .fab svg, .fab .ico { width: 22px; height: 22px; display: block; flex: none; }
  .fab:active { transform: scale(.97); }

  /* ---------- Вкладки снизу: чуть спокойнее движение ---------- */
  .app-tab {
    touch-action: manipulation;
    transition: color 180ms ease, transform 160ms var(--ease-out, ease);
  }
  .app-tab:active { transform: scale(.97); }

  /* ---------- Лист снизу: те же пропорции, что и раньше — здесь только
     добавка для перетаскивания (см. mobile-shell.js) ---------- */
  .drawer {
    transition: transform 400ms cubic-bezier(0.32, 0.72, 0, 1);
    touch-action: pan-y;
    overscroll-behavior: contain;
  }
  .drawer.is-drag { transition: none; }
  .drawer-head {
    position: relative;
    cursor: grab;
    touch-action: none;
  }

  /* Фокус — клавиатура и внешняя кнопка, не палец/мышь */
  .btn:focus-visible,
  .icon-btn:focus-visible,
  .app-tab:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }

  /* ---------- Плавное появление содержимого при переключении разделов
     (см. mobile-shell.js — класс ставится и снимается им) ---------- */
  .app-main.meb-swap-in {
    animation: meb-fade-in 160ms var(--ease-out, ease);
  }
  @keyframes meb-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (max-width: 700px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --shadow-pop: none; }
}
:root[data-theme="dark"] { --shadow-pop: none; }

@media (max-width: 700px), (prefers-reduced-motion: reduce) {
  @media (prefers-reduced-motion: reduce) {
    .drawer { transition-duration: 200ms; }
    .app-tab:active, .fab:active, .dcard:active { transform: none; }
    .app-main.meb-swap-in { animation: none; }
  }
}

/* ============================================================
   Круглая кнопка с меню (Приход / Расход / Перевод) — «Финансы» и «Счёт».
   Один тег .fab на странице JS превращает в кнопку с раскрывающимся
   веером — сама разметка кнопки в шаблоне не меняется.
   ============================================================ */
@media (max-width: 700px) {
  .fab-speed-scrim {
    position: fixed;
    inset: 0;
    z-index: 41;
    background: rgba(8, 12, 20, .32);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 200ms var(--ease-out, ease), visibility 200ms var(--ease-out, ease);
  }
  body.fab-speed-open .fab-speed-scrim {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .fab-speed-list {
    position: fixed;
    right: 16px;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px + 56px + 16px);
    z-index: 43;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .fab-speed-btn {
    box-sizing: border-box;
    width: 172px;
    height: 56px;
    min-height: 56px;
    padding: 0 20px 0 16px;
    border: 0;
    border-radius: 28px;
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: center;
    column-gap: 10px;
    font: inherit;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 6px 16px rgba(27, 36, 48, .18);
    cursor: pointer;
    opacity: 0;
    transform: translateY(12px) scale(.95);
    pointer-events: none;
    transition: opacity 200ms var(--ease-out, ease), transform 200ms var(--ease-out, ease);
  }
  .fab-speed-btn .ico { width: 20px; height: 20px; display: block; justify-self: center; }
  .fab-speed-btn span { font-size: 15px; font-weight: 600; line-height: 1; text-align: left; }
  .fab-speed-btn:nth-child(1) { transition-delay: 0ms; }
  .fab-speed-btn:nth-child(2) { transition-delay: 40ms; }
  .fab-speed-btn:nth-child(3) { transition-delay: 80ms; }
  body.fab-speed-open .fab-speed-btn {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  body.fab-speed-open .fab-speed-btn:nth-child(1) { transition-delay: 80ms; }
  body.fab-speed-open .fab-speed-btn:nth-child(2) { transition-delay: 40ms; }
  body.fab-speed-open .fab-speed-btn:nth-child(3) { transition-delay: 0ms; }
  body.fab-speed-open .fab-speed-btn:active { transform: scale(.97); }
  .fab.has-speed svg { transition: transform 200ms var(--ease-out, ease); }
  .fab.has-speed.is-open svg { transform: rotate(45deg); }
}

/* ============================================================
   Лист быстрого ввода платежа (.cx-*) — Приход/Расход/Перевод одним
   листом вместо трёх разных форм. Цвета и отступы — те же переменные,
   что у остальной мобильной темы, вместо своего набора токенов
   ============================================================ */
@media (max-width: 700px) {
  .cx-sum-wrap {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 0 4px;
    border-bottom: 1px solid var(--line);
  }
  .cx-sum {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 32px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    color: var(--ink);
  }
  .cx-sum:focus { outline: none; }
  .cx-k { font-size: 13px; font-weight: 500; color: var(--ink-3); }
  .cx-meta { font-size: 12px; color: var(--ink-3); }
  .cx-ok { color: var(--ok, #16803C); }
  .cx-bad { color: var(--danger, #9F1239); }

  .cx-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    width: 100%;
    padding: 8px 12px;
    margin-top: 6px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface-2);
    text-align: left;
    font: inherit;
    color: var(--ink);
    cursor: pointer;
  }
  .cx-tile b { display: block; font-size: 15px; font-weight: 600; }
  .cx-tile.on { background: var(--brand-soft); border-color: var(--brand-line); }

  .cx-more {
    display: block;
    margin-top: 14px;
    min-height: var(--tap);
    color: var(--brand);
    font-size: 14px;
    font-weight: 600;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: left;
  }
  #msExtra .field { margin-top: 10px; }

  /* ---------- Счёт / статья / сделка / поставщик внутри листа: плитка-
     кнопка вместо системного <select> — тап открывает список поверх
     листа (#msPicker), а не системный пикер. Без явного размера у
     .cx-chev — стрелка рисуется без width/height из .ico (см. icon()
     в _icons.html — класс подменяется целиком), браузер разворачивает
     такой <svg> в контент кнопки на весь блок. ---------- */
  .cx-tile-picker { justify-content: space-between; }
  .cx-tile-picker .cx-chev { width: 16px; height: 16px; flex: none; color: var(--ink-3); }
}

/* ============================================================
   Список выбора (счёт/статья/сделка/поставщик) внутри листа быстрого
   ввода — не шторка снизу, а простая карточка, всплывающая по центру
   экрана поверх #moneySheet: без поиска и без явной кнопки закрытия,
   тап мимо карточки (по самой #msPicker — она же подложка) закрывает.
   #msPicker остаётся .drawer ради общей логики закрытия (Escape,
   переход между разделами — см. closeChrome/closeDrawer), но вся его
   геометрия переопределена: не «снизу-вверх», а «по центру, вспышкой».
   ============================================================ */
@media (max-width: 700px) {
  #msPicker {
    top: 0; right: 0; bottom: 0; left: 0;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 12, 20, .32);
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
    z-index: 76;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none;
    transition: opacity 160ms var(--ease-out, ease), visibility 160ms var(--ease-out, ease);
  }
  #msPicker.open { opacity: 1; visibility: visible; pointer-events: auto; }
  .ms-pick-card {
    width: min(300px, calc(100vw - 64px));
    max-height: 60vh;
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: 0 24px 60px rgba(8, 12, 20, .4);
    padding: 10px;
    display: flex;
    flex-direction: column;
    transform: scale(.94);
    transition: transform 160ms var(--ease-out, ease);
  }
  #msPicker.open .ms-pick-card { transform: scale(1); }
  .ms-pick-title { padding: 4px 6px 8px; }
  .ms-pick-list { overflow-y: auto; }
  .ms-pick-row { justify-content: flex-start; }
}

/* ============================================================
   Финансы: сумма и счета так же, как на экране «Финансы» прототипа —
   один крупный итог наверху, компактная сетка показателей под ним и
   счета растущим списком карточек, а не сеткой квадратов/полоской чипов.
   ============================================================ */
.mob-only { display: none; }
@media (max-width: 700px) {
  .mob-hide { display: none !important; }
  .mob-only { display: block; }

  .cx-money-head {
    margin-bottom: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 16px;
  }
  .cx-total {
    font-size: 32px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    color: var(--ink);
    margin-top: 2px;
  }
  .cx-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    margin-top: 14px;
  }
  .cx-stats-grid b {
    display: block;
    margin-top: 2px;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
  }

  .cx-acc-wrap {
    margin-bottom: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 12px 14px 14px;
  }
  .cx-acc-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: var(--tap);
    padding: 0 2px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
  }
  .cx-acc-toggle .cx-meta { font-weight: 500; margin-left: 4px; }
  .cx-acc-toggle .cx-chev { width: 18px; height: 18px; transform: rotate(180deg); transition: transform 160ms var(--ease-out, ease); }
  .cx-acc-wrap.collapsed .cx-acc-toggle .cx-chev { transform: rotate(0deg); }
  .cx-acc-wrap.collapsed .cx-acc-list { display: none; }
  .cx-acc-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
  .cx-acc-row {
    display: block;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 14px;
    color: inherit;
    text-decoration: none;
  }
  .cx-acc-row-top { display: flex; align-items: flex-start; gap: 10px; }
  .cx-acc-row .cx-name { font-size: 15px; font-weight: 600; }
  .cx-acc-row .cx-k { margin-top: 2px; }
  .cx-acc-row .cx-chev { width: 18px; height: 18px; margin-left: auto; margin-top: 2px; }
  .cx-acc-row .cx-num {
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    margin-top: 8px;
  }
  .cx-acc-row .cx-k:last-child { margin-top: 2px; }

  /* ---------- Значок вида счёта: кошелёк — наличные, банк — расчётный,
     видно с одного взгляда на список, не читая подпись ---------- */
  .cx-acc-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink-3);
    flex: none;
  }
  .ms-pick-row .cx-acc-ico { background: var(--surface-2); }
}

/* ============================================================
   Кнопка создания документа (приход/расход/перевод, замер, монтаж) —
   удержание 2 секунды вместо тапа. Случайное касание в очереди/кармане
   не заведёт лишний платёж или выезд — а сознательное решение видно
   и самому нажимающему (полоса заполнения), и потом подтверждается
   (зелёная галочка) прежде, чем лист закроется. Применяется через
   data-hold-submit — см. mobile-shell.js, bindHoldSubmit().
   ============================================================ */
@media (max-width: 700px) {
  .btn-hold {
    position: relative;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
  }
  .btn-hold-fill {
    position: absolute;
    inset: 0;
    width: 0%;
    background: rgba(255, 255, 255, .3);
    pointer-events: none;
  }
  .btn-hold.is-holding .btn-hold-fill { width: 100%; transition: width 2000ms linear; }
  .btn-hold-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
  }
  .btn-hold-check { width: 20px; height: 20px; display: none; }
  .btn-hold.is-success {
    background: var(--ok, #0B7A57) !important;
    border-color: var(--ok, #0B7A57) !important;
    color: #fff !important;
  }
  .btn-hold.is-success .btn-hold-fill { display: none; }
  .btn-hold.is-success .btn-hold-text { display: none; }
  .btn-hold.is-success .btn-hold-check {
    display: inline-flex;
    animation: btn-hold-pop 220ms var(--ease-out, ease);
  }
  @keyframes btn-hold-pop {
    from { transform: scale(.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .btn-hold.is-holding .btn-hold-fill { transition-duration: 1ms; }
    .btn-hold.is-success .btn-hold-check { animation: none; }
  }
}

/* ============================================================
   Уведомления (toast) на телефоне — сверху, под шапкой, а не в
   правом нижнем углу: там их легко не заметить или закрыть пальцем,
   да и снизу и так таббар с FAB. Подсказка про успех создания
   документа (см. bindHoldSubmit) приходит именно сюда.
   ============================================================ */
@media (max-width: 700px) {
  .toasts {
    top: calc(var(--head-h) + env(safe-area-inset-top) + 10px);
    bottom: auto;
    left: 12px;
    right: 12px;
  }
  .toast { animation: meb-toast-in-top 180ms var(--ease-out, ease); }
  @keyframes meb-toast-in-top {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: none; }
  }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .toast { animation-duration: 1ms; }
}

/* ============================================================
   Фильтр списком (Финансы, Замеры, Монтаж): три строки сворачиваются
   в одну кнопку рядом с шестерёнкой настроек, сам отбор — в выезжающей
   панели. Кнопка — просто .btn.btn-ghost, как и у настроек: одинаковое
   оформление за счёт общего класса, не своего собственного вида.
   .filter-btn здесь только показывает/прячет — на компьютере фильтр
   и так виден целиком строкой выше, эта кнопка там не нужна.
   ============================================================ */
.filter-btn { display: none; }
@media (max-width: 700px) {
  .filter-btn { display: inline-flex; position: relative; }
  .filter-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 2px var(--surface);
  }
  /* значок без подписи — независимо от того, внутри .page-head кнопка
     или сама по себе (на Финансах она отдельно, без соседней шестерёнки) */
  .filter-btn .btn-txt { display: none; }
}