/* =====================================================================
   TechLog · desktop.css — ПК-режим (v1.07.15)

   ЗОЛОТОЕ ПРАВИЛО ЭТОГО ФАЙЛА (однонаправленная зависимость):
   ┌───────────────────────────────────────────────────────────────────┐
   │ 1. КАЖДЫЙ селектор начинается с `html.tl-desktop`. Без этого      │
   │    класса (его ставит viewmode.js) ни одно правило не действует,  │
   │    поэтому мобильная версия физически не может пострадать.        │
   │ 2. Здесь ТОЛЬКО переопределения стилей поверх мобильной разметки. │
   │    Никакого своего HTML, никакого своего JS, никаких правок       │
   │    app.js / styles.css ради десктопа.                             │
   │ 3. Мобильная версия — источник истины: новые блоки, появившиеся   │
   │    в мобильной, автоматически наследуются десктопом (они просто   │
   │    отрисуются мобильным стилем в широкой колонке, пока при        │
   │    желании не получат здесь свою «широкую» полировку).            │
   │ 4. Если файл не загрузился или содержит ошибку — приложение       │
   │    остаётся полностью рабочей мобильной версией.                  │
   └───────────────────────────────────────────────────────────────────┘

   Все «широкие» правила дополнительно завёрнуты в @media (min-width),
   поэтому узкое окно браузера в ПК-режиме безопасно откатывается к
   мобильной вёрстке — ничего не наезжает и не ломается.
   ===================================================================== */

/* ============ Базовая широкая рамка (окно от 980px) ============ */
@media (min-width: 980px){

  /* Слева резервируем место под вертикальную панель навигации */
  html.tl-desktop{ --tl-padl:128px; }         /* v1.07.49: для full-bleed доски */
  html.tl-desktop.tl-staff{ --tl-padl:236px; }
  html.tl-desktop body{
    padding-left:128px;
    padding-right:16px;
    padding-bottom:32px;             /* нижней панели больше нет */
  }
  html.tl-desktop #app{
    max-width:920px;
    padding:16px 20px 24px;
  }
  /* v1.08.02: боковое меню — фиксированное, 96px шириной при left:16px, то есть
     занимает первые 112px окна. Колонка страницы центрируется, и пока окно шире
     примерно 1150px свободного поля хватает. На окне 1033px по бокам остаётся
     всего 56px — меню ложилось поверх содержимого, и первые кнопки справочников
     («Цены», «Склад», «Сотрудники», «Контрагенты») оказывались недоступны.
     Ниже этой ширины прижимаем страницу к меню и отдаём ей остаток окна. */
  @media (max-width:1150px){
    html.tl-desktop #app{
      max-width:none;
      margin-left:124px; margin-right:12px;
    }
  }

  /* ---------- Шапка: прилипает к верху при прокрутке ---------- */
  /* v1.07.83: --tbh — высота этой шапки, её меряет desktop.js. На неё
     сдвигаются шапка документа и поповеры: раньше .docbar прилипала к
     top:0 поверх логотипа, и «Назад»/«Сохранить» наезжали на шапку. */
  html.tl-desktop .docbar{ top:var(--tbh, 88px); }
  html.tl-desktop .topbar{
    position:sticky; top:0; z-index:45;
    background:var(--bg,#0F171B);
    margin:-16px -20px 12px;
    padding:12px 20px;
    border-bottom:2px solid var(--line-soft,#26363E);
  }

  /* ---------- Нижняя панель → левая вертикальная панель ---------- */
  html.tl-desktop .tabbar{
    left:16px; right:auto; top:50%; bottom:auto;
    transform:translateY(-50%);
    width:96px; max-width:none;
    max-height:calc(100dvh - 32px); overflow:auto;
    flex-direction:column; justify-content:flex-start; gap:6px;
    padding:12px 8px;
    border:2px solid var(--line,#31434C);
    border-radius:20px;
    background:var(--panel,#17232A);
  }
  html.tl-desktop .tab{
    max-width:none; width:100%; flex:0 0 auto;
    padding:10px 4px; gap:4px; border-radius:14px;
  }
  html.tl-desktop .tab svg{ width:26px; height:26px; }
  html.tl-desktop .tab span{ font-size:.6rem; }

  /* ---------- Плавающая кнопка «＋» — в правый нижний угол ---------- */
  html.tl-desktop .fab{ right:28px; left:auto; bottom:28px; }

  /* ---------- Футер: без запаса под нижнюю панель ---------- */
  html.tl-desktop .app-footer{ margin-bottom:32px; }

  /* ---------- Карта: на десктопе выше ---------- */
  html.tl-desktop .map-box{ height:66vh; min-height:420px; }

  /* ---------- Модалки: шире и просторнее ---------- */
  html.tl-desktop .overlay{ padding:28px; }
  html.tl-desktop .modal{ max-width:680px; padding:18px 20px; }

  /* ---------- Формы: сетки плотнее используют ширину ---------- */
  html.tl-desktop .grid-2{ grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
  html.tl-desktop .grid-3{ grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); }

  /* ---------- Тосты: место выбирает пользователь (v1.07.83) ----------
     Раньше на ПК они безусловно уезжали в правый верхний угол — прямо на
     аватар и роль в шапке. Теперь по умолчанию сверху по центру, а
     «Сбоку» включается в настройках. */
  html.tl-desktop.tl-pop-side #toasts{ left:auto; right:20px; align-items:flex-end; }

  /* ---------- Диагностика: длиннее лог ---------- */
  html.tl-desktop .diag-pre{ max-height:62vh; }

  /* ---------- Ховеры для мыши (на тачах не мешают) ---------- */
  @media (hover:hover){
    html.tl-desktop .item.clicky:hover{
      border-color:var(--blue,#1CB0F6);
      transition:border-color .12s;
    }
    html.tl-desktop .day-cell:hover{ border-color:var(--dim,#8AA0AB); }
    html.tl-desktop .btn:hover{ filter:brightness(1.06); }
    html.tl-desktop .tab:hover{ color:var(--text,#F1F7FB); background:rgba(255,255,255,.05); }
    html.tl-desktop .tab.active:hover{ color:var(--blue,#1CB0F6); background:rgba(28,176,246,.1); }
    html.tl-desktop .opt:hover{ border-color:var(--dim,#8AA0AB); }
    html.tl-desktop .icon-btn:hover, html.tl-desktop .sync-btn:hover{ border-color:var(--blue,#1CB0F6); }
  }

  /* v1.07.48: тонкий скроллбар переехал в базовые стили (все режимы). */

  /* ---------- v1.07.49: ДОСКА во всю ширину окна ----------
     #app зажат в 1080px — доска выпрыгивает из него на ширину зоны контента
     (окно минус левая панель и правый паддинг). Отрицательные margin-inline
     центрируют блок ровно по этой зоне. Ширина колонки: 260px по умолчанию
     или из личной настройки профиля (--bcolw ставит app.js). */
  html.tl-desktop .board{
    width:calc(100vw - var(--tl-padl,128px) - 28px);
    margin-inline:calc((100% - (100vw - var(--tl-padl,128px) - 28px))/2);
  }
  html.tl-desktop .bcol{ flex:0 0 var(--dsk-fit, var(--bcolw,260px)); max-width:var(--dsk-fit, var(--bcolw,260px));
    container-type:inline-size; }               /* v1.07.52: колонка — контейнер для ужимок;
                                                   v1.07.59: --dsk-fit (авто-подгон) в приоритете над личной --bcolw */
  html.tl-desktop .bcol.bday-sel{ border-color:var(--blue,#1CB0F6); }
  /* v1.07.52: минимум N сотрудников без скролла — на узких колонках карточки
     компактнеют: меньше паддинги/шрифты/аватар, у счётчиков остаются числа. */
  @container (max-width: 200px){
    .bcol-h .avatar{ width:26px; height:26px; font-size:.62rem; }
    .bcol-h .grow b{ font-size:.78rem; }
    .bunit{ display:none; }
    .bjob{ padding:5px 22px 5px 18px; }
    .bjob .bmain b{ font-size:.8rem; }
    .bjob .bwt{ font-size:.58rem; }
    .bnum{ font-size:.6rem; }
    .car-no{ display:none; }
  }
  @container (max-width: 150px){
    .bcol-h .grow .tiny{ font-size:.56rem; letter-spacing:0; }
    .bjob{ padding:4px 16px 4px 14px; }
    .brail{ display:none; }                      /* стрелкам негде жить — двигать через широкий режим */
  }
}

/* ============ Широкий экран (окно от 1180px): две колонки ============ */
@media (min-width: 1180px){

  html.tl-desktop #app{ max-width:1080px; }

  /* Лента дня и результаты поиска — сеткой в две колонки.
     Заголовки секций, баннеры-пустышки и кнопки растягиваются на обе. */
  html.tl-desktop #day-list,
  html.tl-desktop #search-area{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    align-items:start;
  }
  html.tl-desktop #day-list > .section-title,
  html.tl-desktop #day-list > .list-empty,
  html.tl-desktop #day-list > .btn,
  html.tl-desktop #search-area > .lang-seg,
  html.tl-desktop #search-area > .list-empty,
  html.tl-desktop #search-area > .tiny{
    grid-column:1 / -1;
  }
  html.tl-desktop #day-list > .section-title{ margin:8px 0 0; }
  html.tl-desktop #day-list .item,
  html.tl-desktop #search-area .item{ margin-bottom:0; }
}

/* =====================================================================
   ============ v1.07.16 · ПК-режим: сотрудники, бланк, полные названия,
   ============ справочники. Все правила — строго под html.tl-desktop.
   ===================================================================== */

/* ---------- Колонка сотрудников (создаёт desktop.js) ---------- */
html.tl-desktop #dsk-staff{ display:none; }           /* узкое окно — скрыта */

@media (min-width: 1180px){
  /* когда колонка реально показана, desktop.js вешает html.tl-staff —
     сдвигаем контент правее (навигация 16+96, колонка 124+88, зазор) */
  html.tl-desktop.tl-staff body{ padding-left:236px; }

  html.tl-desktop #dsk-staff{
    position:fixed; left:124px; top:50%; transform:translateY(-50%); z-index:39;
    display:flex; flex-direction:column; align-items:center; gap:8px;
    width:88px; max-height:calc(100dvh - 32px); overflow:auto;
    padding:12px 6px;
    background:var(--panel,#17232A);
    border:2px solid var(--line,#31434C); border-radius:20px;
    scrollbar-width:thin;
  }
  html.tl-desktop #dsk-staff .dsk-staff-title{
    font-size:.56rem; font-weight:900; letter-spacing:.6px; text-transform:uppercase;
    color:var(--dim-2,#5D737E);
  }
  html.tl-desktop #dsk-staff .dsk-all{
    font:inherit; font-weight:900; font-size:.66rem; letter-spacing:.4px; text-transform:uppercase;
    color:var(--dim,#8AA0AB); background:var(--panel-2,#1C2B33);
    border:2px solid var(--line,#31434C); border-radius:999px;
    padding:6px 0; width:100%; cursor:pointer;
  }
  html.tl-desktop #dsk-staff .dsk-all.on{
    background:var(--green,#58CC02); border-color:var(--green,#58CC02); color:var(--green-ink,#0E2A00);
  }
  html.tl-desktop #dsk-staff .dsk-av{
    display:flex; flex-direction:column; align-items:center; gap:2px;
    background:none; border:none; padding:2px 0; width:100%; cursor:pointer;
  }
  html.tl-desktop #dsk-staff .dsk-ini{
    width:46px; height:46px; border-radius:50%;
    display:grid; place-items:center;
    background:var(--panel-2,#1C2B33); border:3px solid var(--line,#31434C);
    font-weight:900; font-size:.92rem;
  }
  /* палитра ролей — та же, что в мобильной шапке */
  html.tl-desktop #dsk-staff .dsk-av.role-tech .dsk-ini{ border-color:var(--blue,#1CB0F6); color:var(--blue,#1CB0F6); }
  html.tl-desktop #dsk-staff .dsk-av.role-manager .dsk-ini{ border-color:var(--red,#FF4B4B); color:var(--red,#FF4B4B); }
  html.tl-desktop #dsk-staff .dsk-av.role-admin .dsk-ini{ border-color:var(--purple,#CE82FF); color:var(--purple,#CE82FF); }
  html.tl-desktop #dsk-staff .dsk-nm{
    max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-size:.6rem; font-weight:800; color:var(--dim,#8AA0AB);
  }
  html.tl-desktop #dsk-staff .dsk-av.on .dsk-ini{
    border-color:var(--green,#58CC02); color:var(--green,#58CC02);
    box-shadow:0 0 0 3px rgba(88,204,2,.25);
  }
  html.tl-desktop #dsk-staff .dsk-av.on .dsk-nm{ color:var(--green,#58CC02); }
  @media (hover:hover){
    html.tl-desktop #dsk-staff .dsk-av:hover .dsk-ini{ border-color:var(--text,#F1F7FB); color:var(--text,#F1F7FB); }
    html.tl-desktop #dsk-staff .dsk-all:hover{ color:var(--text,#F1F7FB); }
  }
}

/* ---------- Меньше сокращений: тексты не обрезаем (окно от 1180px) ---------- */
@media (min-width: 1180px){
  html.tl-desktop .item .info .t,
  html.tl-desktop .item .info .s{ white-space:normal; overflow:visible; text-overflow:clip; }
  html.tl-desktop .wt-line .wt-nm{ white-space:normal; overflow:visible; text-overflow:clip; }
  html.tl-desktop .eq-name .nm,
  html.tl-desktop .eq-name .pr{ white-space:normal; overflow:visible; text-overflow:clip; }
  html.tl-desktop .avatar-wrap{ width:auto; min-width:52px; }
  html.tl-desktop .login-pill{ max-width:140px; }
  html.tl-desktop .brand .sub{ overflow:visible; text-overflow:clip; }
}

/* ---------- Full HD (окно от 1580px): полные названия оборудования ----------
   Мобильная разметка кладёт полное имя в title — раскрываем его через
   attr(title), ничего не меняя в app.js. */
@media (min-width: 1580px){
  /* карточка дня «Пикапы»: BLW 5 → [BLW] Blower · 5 */
  html.tl-desktop .eq-badge{
    flex-direction:row; align-items:center; gap:8px;
    background:var(--panel-2,#1C2B33); border:2px solid var(--line,#31434C);
    border-radius:999px; padding:3px 12px 3px 4px;
  }
  html.tl-desktop .eq-badge[title]::after{
    content:attr(title); order:2;
    font-size:.74rem; font-weight:800; color:var(--text,#F1F7FB);
  }
  html.tl-desktop .eq-badge b{ order:3; font-size:.85rem; color:var(--dim,#8AA0AB); }

  /* цветные точки количества на карточках пикапов: 2 → пилюля «2 Dehumidifier» */
  html.tl-desktop .eq-dot{
    width:auto; min-width:26px; border-radius:999px; padding:2px 10px;
    display:inline-flex; align-items:center; gap:6px;
  }
  html.tl-desktop .eq-dot[title]::after{
    content:attr(title);
    font-size:.7rem; font-weight:800;
    max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    display:inline-block;
  }
  html.tl-desktop .eq-dots{ gap:6px; }
}

/* ---------- Форма инвойса как бумажный бланк (окно от 1180px) ----------
   PDF — это таблица SERVICES | DESCRIPTION | AMOUNT со строкой-секцией на
   каждый вид услуг и итогом справа внизу. Собираем ту же геометрию из
   мобильной разметки: .inv-head → колонка «услуга», .inv-body → «описание»,
   сумма секции — в правой колонке. Экран формы находим по наличию .inv-sec. */
@media (min-width: 1180px){

  /* --- реквизиты сверху: слева дата/статус, справа бригада (как шапка бланка) --- */
  html.tl-desktop #app:has(.inv-sec) .docbar + .card{
    display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start;
  }
  html.tl-desktop #app:has(.inv-sec) .docbar + .card > div:first-child{ grid-column:1 / -1; }
  html.tl-desktop #app:has(.inv-sec) .docbar + .card > .grid-2{ grid-column:1; margin-top:0; align-content:start; }
  html.tl-desktop #app:has(.inv-sec) .docbar + .card > .crew-box{
    grid-column:2; grid-row:2; margin:0; padding:10px 12px;
    border:2px dashed var(--line,#31434C); border-radius:12px;
  }
  html.tl-desktop #app:has(.inv-sec) .docbar + .card > .note-green{ grid-column:1 / -1; }
  html.tl-desktop #app:has(.inv-sec) .docbar + .card > .inv-tools{ grid-column:1 / -1; }   /* v1.08.38 */

  /* --- секции → непрерывная таблица бланка --- */
  html.tl-desktop #app:has(.inv-sec) .inv-sec{
    display:grid; grid-template-columns:200px minmax(0,1fr) 120px;
    position:relative; overflow:visible;
    margin-bottom:0; border-radius:0; border-top-width:0;
  }
  /* первая строка таблицы: верхняя граница, скругление, подписи колонок */
  html.tl-desktop #app:has(.inv-sec) .card + .inv-sec{
    margin-top:36px; border-top-width:2px; border-radius:16px 16px 0 0;
  }
  html.tl-desktop #app:has(.inv-sec) .card + .inv-sec::before,
  html.tl-desktop #app:has(.inv-sec) .card + .inv-sec::after,
  html.tl-desktop #app:has(.inv-sec) .card + .inv-sec .inv-head::after{
    position:absolute; top:-24px;
    font-size:.62rem; font-weight:900; letter-spacing:1.2px;
    color:var(--dim-2,#5D737E); text-align:center;
  }
  html.tl-desktop #app:has(.inv-sec) .card + .inv-sec::before{ content:"SERVICES"; left:0; width:200px; }
  html.tl-desktop #app:has(.inv-sec) .card + .inv-sec::after{ content:"AMOUNT"; right:0; width:120px; }
  /* v1.08.38: подпись DESCRIPTION висит на заголовке (он есть и у свёрнутой
     секции; .inv-head в ПК-режиме position:static — координаты от .inv-sec) */
  html.tl-desktop #app:has(.inv-sec) .card + .inv-sec .inv-head::after{ content:"DESCRIPTION"; left:200px; right:120px; }
  /* последняя строка (перед галочкой «Работа выполнена») — низ таблицы */
  html.tl-desktop #app:has(.inv-sec) .inv-sec:has(+ .opt){
    border-radius:0 0 16px 16px; margin-bottom:14px;
  }

  /* колонка «SERVICES» */
  html.tl-desktop #app:has(.inv-sec) .inv-head{
    grid-column:1; position:static;
    flex-wrap:wrap; align-content:flex-start; row-gap:4px;
    background:transparent; padding:12px;
    border-right:2px solid var(--line-soft,#26363E);
  }
  /* колонка «DESCRIPTION» */
  html.tl-desktop #app:has(.inv-sec) .inv-body{
    grid-column:2; position:relative; padding:12px 14px;
    border-right:2px solid var(--line-soft,#26363E);
  }
  /* колонка «AMOUNT»: сумма секции по центру правой полосы */
  html.tl-desktop #app:has(.inv-sec) .inv-head .amt{
    position:absolute; top:0; bottom:0; right:0; transform:none;
    width:120px; margin-left:0; text-align:center; font-size:1.02rem;
    display:grid; place-items:center;
    border-left:2px solid var(--line-soft,#26363E);   /* v1.08.38: разделитель AMOUNT есть и у свёрнутой строки */
  }
  /* v1.08.38: свёрнутая секция в бланке — одна строка «услуга | — | сумма».
     Стрелка спойлера уходит на левое поле колонки SERVICES (абсолютно, от
     .inv-sec), чтобы не отъедать ширину у названия и не ломать его в две
     строки; заголовку — отступ под неё. */
  html.tl-desktop #app:has(.inv-sec) .inv-sec.sec-closed .inv-head{ min-height:44px; }
  html.tl-desktop #app:has(.inv-sec) .inv-head{ padding-left:28px; }
  html.tl-desktop #app:has(.inv-sec) .inv-head .sec-chev{ position:absolute; left:6px; top:13px; margin:0; }

  /* --- подвал бланка: итог и действия правым столбцом, как GRAND TOTAL --- */
  html.tl-desktop #app:has(.inv-sec) > .opt{ width:max-content; }
  html.tl-desktop #app:has(.inv-sec) > .btn.btn-ghost{ width:max-content; }
  html.tl-desktop #app:has(.inv-sec) .total-bar{ width:380px; margin-left:auto; }
  html.tl-desktop #app:has(.inv-sec) .total-bar + .btn{ width:380px; margin-left:auto; }
  html.tl-desktop #app:has(.inv-sec) .btn-row3{ width:380px; margin-left:auto; }
  html.tl-desktop #app:has(.inv-sec) .card[style*="--purple"]{ width:520px; margin-left:auto; }
}

/* ---------- Справочники: вкладки слева, содержимое справа (окно от 1180px) ---------- */
@media (min-width: 1180px){
  html.tl-desktop #app:has(#dir-tabs){
    display:grid; grid-template-columns:200px minmax(0,1fr);
    column-gap:18px; align-items:start;
  }
  html.tl-desktop #app:has(#dir-tabs) > *{ grid-column:2; min-width:0; }
  /* Карточки справочника считаем независимо друг от друга: правка одной
     строки прайса не тянет пересчёт всей страницы.
     content-visibility для строк пробовал — она меняет высоту документа под
     прокруткой (2694 → 2786 px) и полоса дёргается сильнее прежнего. */
  html.tl-desktop #app:has(#dir-tabs) > .card{ contain:layout style; }
  /* v1.07.82: во всю ширину — только шапка и заголовок страницы
     «Справочники» (он единственный стоит перед колонкой кнопок). Раньше
     правило ловило и второй заголовок — название открытого справочника;
     элемент на обе колонки не может встать в строки 3…92, занятые
     колонкой кнопок, поэтому он вместе со всем содержимым уезжал вниз,
     под кнопки. Теперь он живёт в правой колонке и начинается вровень
     с первой кнопкой. */
  html.tl-desktop #app:has(#dir-tabs) > .topbar,
  html.tl-desktop #app:has(#dir-tabs) > .section-title:has(+ .tabs-nav){ grid-column:1 / -1; }
  /* v1.08.00: колонка кнопок — липкая внутри сетки на 90 строк. Браузер на
     каждом кадре прокрутки пересчитывал раскладку всей сетки, и на самом
     длинном справочнике («Цены» — 38 строк с полями) это чувствуется рывками.
     contain отрезает её от пересчёта соседей, отдельный слой снимает перерисовку. */
  html.tl-desktop #app:has(#dir-tabs) > .tabs-nav{
    contain:layout paint; will-change:transform;
  }
  html.tl-desktop #app:has(#dir-tabs) > .tabs-nav{
    grid-column:1; grid-row:3 / span 90;
    display:block; margin:0;
    position:sticky; top:84px; align-self:start;
  }
  html.tl-desktop #app:has(#dir-tabs) .tabs-arr{ display:none; }
  html.tl-desktop #app:has(#dir-tabs) #dir-tabs{
    flex-direction:column; align-items:stretch; gap:6px;
    overflow:visible; margin:0; padding:0; cursor:default;
  }
  html.tl-desktop #app:has(#dir-tabs) #dir-tabs .tabbtn{
    width:100%; text-align:left; font-size:.8rem; padding:10px 12px; border-radius:12px;
    /* v1.07.79: колонка вкладок фиксированной ширины (200px), а названия
       вроде «Контрагенты» при шрифте ×1.6 в неё не влезали и распирали
       сетку. Длинному слову разрешаем перенос — колонка остаётся на месте. */
    white-space:normal; overflow-wrap:anywhere; hyphens:auto;
  }
  /* строки справочников: просторнее, полный текст, подсветка под мышью */
  html.tl-desktop #app:has(#dir-tabs) .rowline{ padding:10px 8px; border-radius:10px; }
  html.tl-desktop #app:has(#dir-tabs) .rowline .tiny{ white-space:normal; }
  html.tl-desktop #app:has(#dir-tabs) .price-input{ max-width:130px; }
  @media (hover:hover){
    html.tl-desktop #app:has(#dir-tabs) .rowline:hover{ background:rgba(255,255,255,.03); }
  }
}

/* =====================================================================
   ============ v1.07.17 · переключатель в шапке, фикс карточек,
   ============ подвал формы в три зоны, полировка. Всё под html.tl-desktop.
   ===================================================================== */

/* v1.07.40: центральной пилюли на ПК больше нет — переключатель рисует
   сама шапка (#vm-slot), одинаково с мобильной версией. Прежние правила
   позиционирования .vm-seg удалены. */

/* ---------- ФИКС: текст в карточках сжимался в столбик ----------
   Причина: пилюли полных названий оборудования (v1.07.16) распирали
   правую часть .item, а .info с min-width:0 схлопывался до одной буквы.
   Правая часть теперь ограничена по ширине и живёт колонкой, у текста
   есть гарантированный минимум. */
@media (min-width: 1180px){
  html.tl-desktop .item{ align-items:flex-start; }
  html.tl-desktop .item .info{ min-width:190px; }
  html.tl-desktop .item .right{
    flex:0 1 auto; min-width:190px; max-width:280px;
    display:flex; flex-direction:column; align-items:flex-end; gap:8px;
  }
  html.tl-desktop .eq-dots{ row-gap:6px; }
}
@media (min-width: 1580px){
  /* пилюли с полным названием — компактнее, чтобы влезали в правую колонку */
  html.tl-desktop .eq-dot[title]::after{ max-width:120px; }
}

/* v1.07.41: компенсации v1.07.20 удалены — рейл ▲▼ теперь прижат к нижней
   границе карточки в базовых стилях (номер сверху, степпер снизу), а
   треугольник приоритета живёт в конце названия комплекса, не в углу. */
@media (min-width: 1180px){
  html.tl-desktop .item.dragging{ z-index:6; }
}

/* ---------- Подвал формы инвойса: три зоны (окно от 1420px) ----------
   Слева — «История работы» и «Назад»; по центру — карточка апрува;
   справа — Итого, Сохранить, PDF и Удалить. Собрано CSS-гридом прямо на
   #app: элементы подвала расставлены по фиксированным номерам строк
   (100+), всё остальное растянуто на всю ширину и лежит как раньше.
   Ниже 1420px действует прежняя компоновка v1.07.16 (правый столбец). */
@media (min-width: 1420px){
  html.tl-desktop #app:has(.inv-sec){
    display:grid;
    grid-template-columns:220px 1fr minmax(380px,max-content) 1fr 205px 205px;
    /* v1.07.46: центр не уже min-width карточки апрува (иначе при узком #app
       карточка вылезала из трека под Итого); правые 205px + компактный шрифт
       кнопок ниже — «Скачать PDF-инвойс» и «Просмотр PDF» в одну строку. */
    column-gap:12px; row-gap:0;
  }
  html.tl-desktop #app:has(.inv-sec) > *{ grid-column:1 / -1; min-width:0; }

  /* галочка «Работа выполнена» — своей строкой над подвалом */
  html.tl-desktop #app:has(.inv-sec) > .opt{
    grid-row:100; grid-column:1 / -1; width:max-content; margin:14px 0 10px;
  }
  /* ЛЕВАЯ зона.
     v1.08.41: селектор был «любой прямой .btn-ghost» и писался, когда такая
     кнопка была одна. С v1.08.33 рядом появилась «Создать такую же» — и обе
     ложились в одну ячейку (grid-row 101 / column 1), кнопка накрывала кнопку.
     Теперь у каждой свой класс и своя строка: История · Создать такую же ·
     Назад — сверху вниз, в том же порядке, в каком они идут в разметке
     (порядок табуляции больше не скачет). */
  html.tl-desktop #app:has(.inv-sec) > .btn.btn-ghost.jb-hist{   /* История работы */
    grid-row:101; grid-column:1; width:100%; margin:0 0 8px;
  }
  html.tl-desktop #app:has(.inv-sec) > .tpl-row{                 /* Создать такую же + «?» */
    grid-row:103; grid-column:1; width:100%; margin:0 0 8px;
  }
  html.tl-desktop #app:has(.inv-sec) .btn-row3{ display:contents; }
  html.tl-desktop #app:has(.inv-sec) .btn-row3 > *:nth-child(1){ /* Назад */
    grid-row:104; grid-column:1; width:100%; margin:0;
  }
  /* ЦЕНТР — карточка апрува (или зелёная пометка «апрувнуто» у не-админа) */
  html.tl-desktop #app:has(.inv-sec) > .card[style*="--purple"]{
    grid-row:101 / span 3; grid-column:3; align-self:start;
    width:auto; max-width:520px; min-width:380px; margin:0;
  }
  html.tl-desktop #app:has(.inv-sec) > .note-purple{
    grid-row:101; grid-column:3; align-self:start; margin:0;
  }
  /* ПРАВАЯ зона */
  html.tl-desktop #app:has(.inv-sec) > .total-bar{
    grid-row:101; grid-column:5 / span 2; width:auto; margin:0 0 8px;
  }
  html.tl-desktop #app:has(.inv-sec) > .btn.btn-green{           /* Сохранить */
    grid-row:102; grid-column:5 / span 2; width:auto; margin:0 0 8px;
  }
  /* v1.08.41: Просмотр/Печать идут в разметке РАНЬШЕ Скачать/Удалить — держим
     тот же порядок и на экране (было наоборот: фокус с «Печать» прыгал вверх). */
  html.tl-desktop #app:has(.inv-sec) .btn-row3 > *:nth-child(2){ /* Скачать PDF */
    grid-row:104; grid-column:5; margin:0 0 8px;
  }
  html.tl-desktop #app:has(.inv-sec) .btn-row3 > *:nth-child(3){ /* Удалить */
    grid-row:104; grid-column:6; margin:0 0 8px;
  }
  /* Просмотр/Печать — та же правая пара колонок (перенесено сюда из блока
     980px в v1.07.83: без сетки эти правила ломали подвал) */
  html.tl-desktop #app:has(.inv-sec) > .btn-rowpp{ display:contents; width:auto; margin:0; }
  html.tl-desktop #app:has(.inv-sec) .btn-rowpp > *:nth-child(1){ grid-row:103; grid-column:5; margin:0 0 8px; }
  html.tl-desktop #app:has(.inv-sec) .btn-rowpp > *:nth-child(2){ grid-row:103; grid-column:6; margin:0 0 8px; }
}

/* ---------- Полировка ---------- */
@media (min-width: 980px){
  html.tl-desktop .overlay{ backdrop-filter:blur(3px); }
  /* v1.07.83: отступ сверху = липкая шапка + зазор; сторону и верх/низ
     выбирает пользователь в настройках (класс tl-pop-* на <html>) */
  html.tl-desktop{ --pop-top:calc(var(--tbh, 88px) + 10px); }
  html.tl-desktop .card{ padding:14px 16px; }
  html.tl-desktop .item{ padding:11px 14px; }
}

/* =====================================================================
   ============ v1.07.18 · панель формы, фиолетовый апрув, чипы периодов,
   ============ плотность. Всё под html.tl-desktop.
   ===================================================================== */
@media (min-width: 980px){

  /* ---------- Верхняя панель формы (создаёт desktop.js) ----------
     Липнет сразу под шапкой; дубли действий подвала — иконками. */
  html.tl-desktop #dsk-jobbar{
    position:sticky; top:72px; z-index:44;
    display:flex; align-items:center; gap:8px;
    width:max-content; margin:0 auto 12px;
    background:var(--panel,#17232A);
    border:2px solid var(--line,#31434C); border-radius:999px;
    padding:6px 10px;
  }
  /* v1.07.45: кнопки дока — пилюли «иконка + подпись» вместо кружков */
  html.tl-desktop .djb-btn{
    height:38px; border-radius:999px; padding:0 14px 0 10px;
    display:inline-flex; align-items:center; gap:7px; cursor:pointer;
    background:var(--panel-2,#1C2B33);
    border:2px solid var(--line,#31434C); color:var(--dim,#8AA0AB);
    font:inherit;
  }
  html.tl-desktop .djb-btn svg{ width:20px; height:20px; flex:0 0 auto; }
  html.tl-desktop .djb-lbl{
    font-weight:800; font-size:.72rem; letter-spacing:.35px;
    text-transform:uppercase; white-space:nowrap; line-height:1;
  }
  html.tl-desktop .djb-pdf{ color:var(--blue,#1CB0F6); }
  /* «работа выполнена»: включена — зелёная */
  html.tl-desktop .djb-done.on{
    background:var(--green,#58CC02); border-color:var(--green,#58CC02);
    color:var(--green-ink,#0E2A00);
  }
  /* индикатор апрува — ФИОЛЕТОВЫЙ, только состояние (не кнопка) */
  html.tl-desktop .djb-appr{ cursor:default; color:var(--dim-2,#5D737E); }
  html.tl-desktop .djb-appr.on{
    background:var(--purple,#CE82FF); border-color:var(--purple,#CE82FF); color:#2A0A45;
  }
  html.tl-desktop .djb-total{
    font-weight:900; color:var(--green,#58CC02);
    background:var(--panel-2,#1C2B33);
    border:2px solid var(--line,#31434C); border-radius:999px;
    padding:6px 14px; min-width:74px; text-align:center;
  }
  @media (hover:hover){
    html.tl-desktop .djb-btn:not(.djb-appr):hover{ border-color:var(--blue,#1CB0F6); color:var(--blue,#1CB0F6); }
    html.tl-desktop .djb-done.on:hover{ border-color:var(--green,#58CC02); color:var(--green-ink,#0E2A00); }
  }

  /* v1.07.20: фиолетовый апрув переехал в мобильное ядро (styles.css +
     разметка) — принудительная перекраска здесь больше не нужна. */

  /* ---------- Кнопка плотности (низ левого края) ---------- */
  html.tl-desktop #dsk-density{
    position:fixed; left:16px; bottom:16px; z-index:39;
    width:40px; height:40px; border-radius:12px; cursor:pointer;
    display:grid; place-items:center;
    background:var(--panel,#17232A);
    border:2px solid var(--line,#31434C); color:var(--dim,#8AA0AB);
  }
  html.tl-desktop #dsk-density svg{ width:20px; height:20px; }
  html.tl-desktop #dsk-density.on{ color:var(--blue,#1CB0F6); border-color:var(--blue,#1CB0F6); }

  /* ---------- Компактная плотность ---------- */
  html.tl-desktop.tl-compact .card{ padding:10px 12px; }
  html.tl-desktop.tl-compact .item{ padding:8px 10px; gap:8px; }
  html.tl-desktop.tl-compact .rowline{ padding:7px 6px; }
  html.tl-desktop.tl-compact .inv-head{ padding:9px 10px; }
  html.tl-desktop.tl-compact .inv-body{ padding:8px 10px; }
  html.tl-desktop.tl-compact .btn{ padding:11px 14px; }
  html.tl-desktop.tl-compact #day-list,
  html.tl-desktop.tl-compact #search-area{ gap:8px; }
  html.tl-desktop.tl-compact .item .info .s{ font-size:.72rem; }
}

/* ---------- Чипы периодов при выбранном сотруднике ---------- */
@media (min-width: 1180px){
  html.tl-desktop #dsk-periods{
    display:flex; align-items:center; gap:6px; margin:0 0 10px;
  }
  html.tl-desktop .dsk-chip{
    font:inherit; font-weight:800; font-size:.74rem; cursor:pointer;
    color:var(--dim,#8AA0AB); background:var(--panel,#17232A);
    border:2px solid var(--line,#31434C); border-radius:999px; padding:6px 12px;
  }
  html.tl-desktop .dsk-chip.on{
    background:var(--blue,#1CB0F6); border-color:var(--blue,#1CB0F6); color:#04314A;
  }
  html.tl-desktop #dsk-periods .dsk-hid{ margin-left:6px; }
  /* в двухколоночной сетке результатов чипы занимают всю ширину */
  html.tl-desktop #search-area{ }
}

/* =====================================================================
   ============ v1.07.19 · сплит «форма | живой предпросмотр PDF».
   ============ Окно от 1800px. Всё под html.tl-desktop.
   ===================================================================== */
@media (min-width: 1800px){

  /* панель занимает 580px + 16 отступ справа + 20 зазор = 616px.
     Контент формы сдвигается ровно на эту величину. */
  html.tl-desktop.tl-pdfprev body{ padding-right:616px; }

  html.tl-desktop #dsk-pdfpane{
    position:fixed; top:72px; right:16px; bottom:16px; width:580px; z-index:38;
    background:var(--panel,#17232A);
    border:2px solid var(--line,#31434C); border-radius:16px;
    overflow:hidden;
  }
  html.tl-desktop #dsk-pdfpane .dpp-f{
    position:absolute; inset:0; width:100%; height:100%; border:0;
    background:transparent; opacity:1; transition:opacity .18s ease;
  }
  html.tl-desktop #dsk-pdfpane .dpp-f.hid{ opacity:0; pointer-events:none; }
  html.tl-desktop #dsk-pdfpane .dpp-busy{
    position:absolute; top:10px; right:10px; z-index:2;
    min-width:30px; height:30px; padding:0 9px; border-radius:999px;
    display:grid; place-items:center; font-weight:900;
    background:var(--panel-2,#1C2B33); color:var(--dim,#8AA0AB);
    border:2px solid var(--line,#31434C);
  }
  html.tl-desktop #dsk-pdfpane .dpp-busy.hid{ display:none; }

  /* кнопка-глаз в панели формы: включённый предпросмотр — синий */
  html.tl-desktop .djb-eye.on{
    background:var(--blue,#1CB0F6); border-color:var(--blue,#1CB0F6); color:#04314A;
  }

  /* тосты — левее панели, чтобы не накрывали бланк */
  html.tl-desktop.tl-pdfprev.tl-pop-side #toasts{ right:632px; }
  html.tl-desktop.tl-pdfprev.tl-pop-side .mq-pop{ right:632px; }
}

/* ===== v1.07.27: пилюля не растягивается; Просмотр/Печать в сетке формы ===== */
@media (min-width: 980px){
  /* Просмотр/Печать — той же правой колонкой, что и Скачать/Удалить:
     работает и в блочном потоке (width+margin-left:auto), и если форма
     свёрстана гридом (row/column заданы блоку целиком). */
  /* v1.07.46: Просмотр/Печать кладём в ТЕ ЖЕ колонки грида, что Скачать и
     Удалить — ширины совпадают по построению, хак width:380px удалён. */
  /* v1.07.83: display:contents тут больше нет. Сетка подвала живёт только
     от 1420px, а это правило работало с 980px — на окнах 1280…1419 кнопки
     «Просмотр PDF» и «Печать» вываливались из правого столбца и растягивались
     во всю ширину страницы, пока «Итого», «Сохранить» и «Скачать PDF» стояли
     справа. Ниже 1420px пара живёт своей строкой той же ширины, что .btn-row3. */
  html.tl-desktop #app:has(.inv-sec) > .btn-rowpp{ width:380px; margin-left:auto; }
  html.tl-desktop #app:has(.inv-sec) .btn-rowpp > span{ display:none; }
  /* кнопки правой зоны — компакт как у btn-row3, текст в одну строку при 205px */
  html.tl-desktop #app:has(.inv-sec) .btn-row3 > .btn,
  html.tl-desktop #app:has(.inv-sec) .btn-rowpp > .btn{
    font-size:.8rem; padding:12px 6px; letter-spacing:.2px;
    /* v1.08.41: white-space:nowrap убран — при системном шрифте ×1.6 подпись
       «Скачать PDF инвойс» вылезала из колонки на 21px. Теперь переносится. */
    white-space:normal; overflow-wrap:anywhere; line-height:1.1;
  }
  html.tl-desktop .pstrip{ padding-left:0; padding-right:0; }
  /* v1.07.78: подписи полос (пропозалы, работы без исполнителя) — по той же сетке */
  html.tl-desktop .strip-h{ margin-left:0; margin-right:0; }
  /* v1.07.49: ширина .bcol задаётся выше через var(--bcolw,260px) — старый фикс 260px удалён */
}

/* ===== v1.07.30: ПК — тосты в правом верхнем углу, Пропозалы читабельной ширины ===== */
@media (min-width: 980px){
  html.tl-desktop.tl-pop-side #toasts{left:auto;right:16px;align-items:flex-end}
  /* v1.07.95: мини-журнал отправки был прибит к нижней панели телефона
     (bottom:66px). В ПК-режиме панель — слева, и полоса висела в пустоте. */
  html.tl-desktop .mq-mini{ left:auto; right:16px; width:min(520px, 44vw);
    bottom:calc(16px + env(safe-area-inset-bottom)); }
  html.tl-desktop .prop-wrap{display:block;max-width:780px;margin:0 auto}
}

/* v1.07.40: колонка роли (пилюля режима над бейджем) живёт и на ПК —
   раскладка шапки едина с мобильной; прежний display:contents удалён. */

/* ===== v1.07.40: мини-пилюля в шапке видна и на ПК (правило скрытия из
   v1.07.38 удалено вместе с центральной пилюлей) ===== */


/* =====================================================================
   ====== v1.07.59/60 · АВТО-УПЛОТНЕНИЕ ДОСКИ (html.tl-fit) ======
   Класс ставит desktop.js, когда колонки сотрудников перестают влезать
   по ширине. v1.07.60: меню больше не переезжает вниз — оно ПЛАВНО
   уезжает за левый край, контент забирает его полосу (~112px). У края
   остаётся язычок #dsk-menu-tab: наведение выдвигает меню поверх
   контента, клик закрепляет. Ширину колонок задаёт --dsk-fit.
   Всё строго под html.tl-desktop — мобильная версия этих правил не видит.
   ===================================================================== */
@media (min-width: 980px){

  /* меню всегда двигается плавно (и уезд, и возврат) */
  html.tl-desktop .tabbar{ transition:transform .28s ease, box-shadow .28s ease; }

  /* ---------- Контент забирает полосу меню ---------- */
  html.tl-desktop.tl-fit{ --tl-padl:16px; }
  html.tl-desktop.tl-fit.tl-staff{ --tl-padl:124px; }
  html.tl-desktop.tl-fit body{ padding-left:16px; }
  html.tl-desktop.tl-fit.tl-staff body{ padding-left:124px; }
  html.tl-desktop.tl-fit #dsk-staff{ left:16px; }

  /* ---------- Меню уезжает влево; наведение/закрепление возвращает ---------- */
  html.tl-desktop.tl-fit .tabbar{ transform:translate(calc(-100% - 22px), -50%); }
  html.tl-desktop.tl-fit .tabbar:hover,
  html.tl-desktop.tl-fit.tl-menu-open .tabbar{
    transform:translate(0, -50%);
    box-shadow:10px 0 26px rgba(0,0,0,.45);
  }

  /* ---------- Язычок вызова меню у левого края ---------- */
  html.tl-desktop #dsk-menu-tab{ display:none; }
  html.tl-desktop.tl-fit #dsk-menu-tab{
    display:grid; place-items:center;
    position:fixed; left:0; top:50%; transform:translateY(-50%); z-index:47;
    width:20px; height:72px; padding:0; cursor:pointer;
    font:inherit; font-weight:900; font-size:1rem;
    background:var(--panel,#17232A); color:var(--dim,#8AA0AB);
    border:2px solid var(--line,#31434C); border-left:none;
    border-radius:0 12px 12px 0; user-select:none;
  }
  html.tl-desktop.tl-fit.tl-menu-open #dsk-menu-tab{
    color:var(--blue,#1CB0F6); border-color:var(--blue,#1CB0F6);
  }
  @media (hover:hover){
    html.tl-desktop.tl-fit #dsk-menu-tab:hover{ color:var(--blue,#1CB0F6); }
  }

  /* ---------- Узкая колонка: шапка сотрудника вертикально ----------
     Триггер — фактическая ширина колонки (container query), поэтому
     работает и при авто-подгоне, и при узкой личной настройке. */
  @container (max-width: 190px){
    .bcol-h{ flex-direction:column; align-items:center; gap:2px; margin-bottom:4px; text-align:center; }
    .bcol-h .avatar{ width:30px; height:30px; font-size:.7rem; }
    .bcol-h .grow{ width:100%; min-width:0; }
    .bcol-h .grow b{ display:inline-block; max-width:100%; font-size:.74rem; line-height:1.15;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom; }
    .bcol-h .grow .tiny{ font-size:.6rem; }
    .bempty{ text-align:center; }
  }
  @container (max-width: 140px){
    .bcol-h .grow b{ font-size:.68rem; }
    .bcol-h .grow .tiny{ font-size:.54rem; }
    .bjob{ padding:4px 14px 4px 12px; }
    .bjob .bnum{ left:4px; font-size:.56rem; }
    .bjob .bst{ left:3px; width:8px; height:8px; }   /* v1.07.79: точка статуса — в левом жёлобе */
  }
}

/* v1.07.78: шапка документа (.docbar) заменила .back-top — ПК-раскладка
   карточки работы цепляется теперь за неё. Оформление календаря (#dsk-cal)
   переехало в styles.css —
   он теперь общий для телефона и ПК (см. ui.js). */

/* ===== v1.08.32: карта — панель пробега справа от карты ===== */
html.tl-desktop .map-flex{display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:12px;align-items:start}
html.tl-desktop .bn-stats{position:sticky;top:10px;margin-top:0}
html.tl-desktop .map-flex .map-box{height:60vh}

/* ===================== v1.08.33 ===================== */
.tl-desktop .srch-res{ max-height:52vh }
.tl-desktop .overlay .modal:has(#srch-q){ width:min(620px,92vw) }
.tl-desktop .overlay .modal:has(.opt-list){ width:min(640px,92vw) }
.tl-desktop .opt-list{ max-height:48vh }

/* =====================================================================
   v1.08.35: «компактно» теперь реально ужимает интерфейс, а не только
   срезает пару отступов. Базовый rem уменьшен — всё, что задано в rem,
   пропорционально плотнее; px-элементы управления подтянуты отдельно.
   ===================================================================== */
/* база шрифта 14px ставится из ui.js (inline перебивает CSS) */
html.tl-desktop.tl-compact input,
html.tl-desktop.tl-compact select,
html.tl-desktop.tl-compact textarea{ min-height:32px; padding:6px 9px; }
html.tl-desktop.tl-compact .btn{ padding:8px 11px; }
html.tl-desktop.tl-compact .icon-btn,
html.tl-desktop.tl-compact .sync-btn{ width:32px; height:32px; }
html.tl-desktop.tl-compact .card{ padding:8px 10px; }
html.tl-desktop.tl-compact .section-title{ margin:6px 0 5px; }
html.tl-desktop.tl-compact .topbar{ margin-bottom:2px; }
html.tl-desktop.tl-compact .form-row{ margin-bottom:6px; }
html.tl-desktop.tl-compact .day-cell{ padding:5px 2px; }

/* =====================================================================
   v1.08.39: бухгалтерия на ПК — реестр как таблица с шапкой
   ===================================================================== */
html.tl-desktop .acc-wrap{max-width:1080px;margin:0 auto}
html.tl-desktop .acc-tbl:not(.acc-tbl-staff) .acc-line{
  display:grid;align-items:center;gap:4px 8px;padding:8px 0;
  grid-template-columns:104px minmax(150px,1.6fr) repeat(4,minmax(64px,.8fr)) minmax(70px,.9fr) minmax(76px,.9fr) 120px 44px;
}
html.tl-desktop .acc-tbl .acc-head{display:grid;font-size:.64rem;font-weight:900;text-transform:uppercase;color:var(--dim);letter-spacing:.3px;cursor:default;border-bottom:2px solid var(--line)}
html.tl-desktop .acc-tbl .acc-head .acc-c-num{text-align:right}
html.tl-desktop .acc-tbl .acc-c-num{text-align:right;font-size:.82rem}
html.tl-desktop .acc-tbl .acc-c-doc b{font-size:.84rem}
html.tl-desktop .acc-tbl .acc-c-st,html.tl-desktop .acc-tbl .acc-c-num,html.tl-desktop .acc-tbl .acc-c-note{order:0;flex:none}
html.tl-desktop .acc-tbl .acc-c-num[data-l]::before{content:none}
html.tl-desktop .acc-tbl .acc-rent-by{display:block;margin:0;font-size:.62rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.tl-desktop .acc-tbl .acc-c-st{flex-direction:column;align-items:flex-start;gap:3px}
html.tl-desktop .acc-tbl .acc-c-note{margin-left:0;justify-content:flex-end}
html.tl-desktop .acc-tbl .acc-prev{padding:0 0 8px 112px}
html.tl-desktop .acc-tbl .acc-body{padding:4px 0 12px 112px}
html.tl-desktop .acc-tbl .acc-foot{cursor:default}
html.tl-desktop .acc-tbl .acc-foot .acc-c-num{font-size:.86rem}
html.tl-desktop .acc-tbl-staff .acc-line{display:grid;grid-template-columns:48px 1fr 140px 140px 44px;gap:8px}
html.tl-desktop .acc-tbl-staff .acc-c-num{text-align:right}
html.tl-desktop .acc-tbl-staff .acc-c-num[data-l]::before{content:none}
html.tl-desktop .acc-sum-btns .btn{flex:0 1 auto}
html.tl-desktop .acc-actions .btn{flex:0 1 auto}
html.tl-desktop .acc-rate-rows{max-width:640px}
html.tl-desktop .acc-map-rows{max-width:640px}
@media (max-width:1100px){
  html.tl-desktop .acc-tbl:not(.acc-tbl-staff) .acc-line{
    grid-template-columns:86px minmax(130px,1.4fr) repeat(4,minmax(58px,.8fr)) minmax(66px,.9fr) minmax(70px,.9fr) 104px 36px;
  }
}