/* CarRentSoft — общий стиль кабинета. Раскладка копирует RentSyst, палитра наша. */
/* Шрифт значков fico подключён ОТСЮДА, а не ссылкой на каждой странице (#232). Ссылку забыли
   на девяти страницах из двадцати — в том числе на «Плане дня», где значки строки как раз и
   живут: разметка <i class="fico"> там была, а шрифта не было, и вместо значка не рисовалось
   НИЧЕГО. cabinet.css лежит на каждой странице кабинета, значит и шрифт теперь лежит. */
@import url('/admin/fico.css');
:root{
  --bg:#eef0f6; --card:#fff; --ink:#2b3240; --muted:#9aa3b5; --line:#eaecf4;
  --brand:#fc3f1d; --primary:#12a594; --yellow:#ffc531; --blue:#3f7fd6; --green:#22c55e; --amber:#f59e0b; --red:#ef4444; --cyan:#14b8c6;
  /* Фиолетовый уже жил в продукте безымянным (статус «На сервисе» на ленте планнера, звёзды
     состояния в карточке авто, «Депозит» на графике дашборда). Имя ему дала карта типов
     событий плана дня (#229): «с сервиса» — фиолетовый, и брать его надо из палитры. */
  --violet:#8b5cf6;
  /* Карта цветов ТИПОВ СОБЫТИЯ плана дня (#229) — объявлена ОДИН раз и здесь, потому что ею
     красят два разных экрана: полосы и чипы «Плана дня» (planner.html) и виджет «План дня» на
     дашборде (index.html + dashboard.js, #234). Пока карта жила копией в каждом, выдача и возврат
     на дашборде оказались поменяны местами: человек видел оранжевое и читал «возврат», а в плане
     дня это была выдача. Имена повторяют КОДЫ типов события с сервера (rental/return/to_service/
     from_service) — тогда цвет берётся как var('--ev-'+type), без второй таблицы соответствия. */
  /* СООТВЕТСТВИЕ типов снято с эталона (computed style полос /order/daily-plan/, сверено
     09-09-2026): выдача — оранжевый, возврат — зелёный, «на сервис» — насыщенный оранжевый,
     «с сервиса» — бирюза. Раньше выдача и возврат были покрашены наоборот, и человек читал
     строку с точностью до наоборот.
     ОТТЕНКИ — наши, из палитры выше (решение владельца 10-09-2026, вариант «всё на палитру»):
     сырые hex эталона (#ff9d21/#6fbf1f/#f55800/#029d9d) заменены токенами. Своего тёмно-оранжевого
     в палитре нет, поэтому «на сервис» берёт фирменный --brand — владелец видел, что он краснее
     эталонного, и выбрал этот вариант. */
  --ev-rental:var(--amber); --ev-return:var(--green); --ev-to_service:var(--brand); --ev-from_service:var(--cyan);
  /* Разделитель ячеек строки и цвет просрочки — тоже сняты с эталона (план дня). */
  --row-sep:#adabc1; --late:#eb3f57;
  /* Мягкие подложки фирменного (#136): светлая и на ступень темнее. Цвет текста на них —
     --active #0e8f80 (тон статуса «Активен»), контраст проверен на дата-карточке брони. */
  --primary-soft:#e6f4f2; --primary-soft-2:#d6ebe8; --active:#0e8f80;
  --grad:linear-gradient(135deg,#fc3f1d,#ff7a3d);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:Poppins,Roboto,Arial,sans-serif;font-size:14px}
a{color:inherit}

/* Шапка */
header.cab{display:flex;align-items:center;gap:16px;padding:16px 26px}
.cab .brand{display:flex;align-items:center;gap:12px}
.cab .company{font-weight:700;font-size:23px;letter-spacing:-.3px}
.cab .sp{flex:1}
.balance{color:var(--muted);font-weight:600}
.balance b{color:var(--ink)}
.hicons{display:flex;align-items:center;gap:18px;color:#b8c0d0}
.hicons .ic{position:relative;width:20px;height:20px;display:grid;place-items:center;cursor:pointer}
.hicons .ic svg{width:20px;height:20px;stroke:#aab2c4;fill:none;stroke-width:1.8}
.hicons .ic.hot svg{stroke:#5b6472}
.badge-count{position:absolute;top:-7px;right:-9px;min-width:16px;height:16px;padding:0 4px;
  background:var(--brand);color:#fff;font-size:10px;font-weight:700;line-height:1;border-radius:999px;
  display:grid;place-items:center;border:2px solid #fff;font-family:Poppins}
.badge-dot{position:absolute;top:-2px;right:-2px;width:9px;height:9px;background:var(--brand);border-radius:50%;border:2px solid #fff}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--grad);border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer}
.burger{display:none;flex-direction:column;gap:4px;cursor:pointer}
.burger span{width:22px;height:2.5px;background:var(--primary);border-radius:2px}

/* Навигация — только меню прилипает к верху при прокрутке */
.navwrap{padding:0 26px;position:sticky;top:0;z-index:30;background:var(--bg)}
nav.cab{background:var(--card);border-radius:14px 14px 0 0;display:flex;gap:2px;padding:0 10px;box-shadow:0 1px 2px rgba(20,30,60,.04)}
nav.cab a{display:flex;align-items:center;gap:10px;padding:18px 20px;color:#5b6472;font-weight:600;font-size:15px;text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap}
nav.cab a svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9}
nav.cab a .chev{width:12px;height:12px;opacity:.6}
nav.cab a:hover{color:var(--ink)}
nav.cab a.active{color:var(--primary);border-bottom-color:var(--primary)}

main{padding:22px 26px 28px}
.titlebar{display:flex;align-items:center;margin:6px 2px 18px;gap:12px;flex-wrap:wrap}
.titlebar h1{margin:0;font-size:22px;font-weight:700}
.titlebar .sp{flex:1}
.btn{background:#fff;color:#e0a400;border:1.5px solid #e0a400;border-radius:10px;padding:11px 18px;font-weight:600;font-family:inherit;cursor:pointer;box-shadow:none;text-decoration:none;display:inline-block}
.btn:hover{background:#fffdf3}
.btn.dark{background:#1b1b1b;color:#fff;border-color:#1b1b1b}
.btn.ghost{background:#fff;border:1px solid var(--line);color:var(--ink);box-shadow:none;font-weight:600}
.btn:disabled,.btn[disabled]{opacity:.5;color:#9aa3b2;border-color:#d6dbe4;cursor:not-allowed}

/* Кнопка «наверх» — как в RentSyst: 40×40, полупрозрачная, мягкая тень, тонет в отступе подвала */
/* FIX-4: `body .to-top` — специфичность выше, чем у [data-tip]{position:relative} (кнопке i18n добавляет
   data-tip), иначе fixed перебивается на relative и кнопку сносит влево. Отступы ≈1см/2см от углов. */
body .to-top{position:fixed;right:38px;bottom:76px;width:40px;height:40px;border-radius:50%;background:var(--primary);cursor:pointer;
  display:grid;place-items:center;cursor:pointer;box-shadow:0 0 15px 1px rgba(69,65,78,.2);
  opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .2s,transform .2s;z-index:10}
.to-top.show{opacity:.55;pointer-events:auto;transform:none}
.to-top:hover{opacity:1;background:#0e8f80}
.to-top svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.4}

/* Подвал (как в RentSyst): большой верхний отступ уводит текст из-под кнопки «наверх», мягкий лавандово-серый */
footer.cab{display:flex;align-items:center;gap:12px;padding:60px 26px 50px;color:#adabc1;font-size:13px;border-top:1px solid var(--line);margin-top:12px}
footer.cab .sp{flex:1}
footer.cab a{color:#adabc1;text-decoration:none;font-weight:500}
footer.cab a:hover{color:var(--ink)}

/* Карточки-виджеты */
.w{background:var(--card);border-radius:14px;padding:20px 22px;box-shadow:0 1px 2px rgba(20,30,60,.04);border:1px solid #eef1f6;margin-bottom:18px}
.w-head{display:flex;align-items:center;gap:10px;height:50px;padding-bottom:15px;margin:-2px -22px 16px;padding-left:22px;padding-right:22px;border-bottom:1px solid var(--line)}
/* Контрол-кнопка в шапке виджета (выбор даты, локация) */
.hdr-ctl{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 12px;font-size:13px;color:var(--muted);cursor:pointer;font-weight:500}
.hdr-ctl svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}
.hdr-ctl:hover{border-color:#cdd3e0;color:var(--ink)}
/* Жёлтая контурная кнопка (не залитая) */
.btn.outy{background:#fff;border:1.5px solid #e0a400;color:#e0a400;box-shadow:none;font-weight:600}
.btn.outy:hover{background:#fffdf3}
.w-head h2{margin:0;font-size:17px;font-weight:600}
.w-head .filter{color:#c2c9d6}
.w-head .sp{flex:1}
.toggle{font-size:13px;color:var(--muted);font-weight:600}
.toggle b{color:var(--ink);border-bottom:2px solid var(--primary);padding-bottom:3px}
.dot{width:11px;height:11px;border-radius:50%;flex:none;display:inline-block}
.cols{display:grid;grid-template-columns:1fr 1.6fr;gap:18px}

/* Дашборд: выручка — сетка 1fr/1.6fr как у ряда ниже, чтобы график встал над графиком «Аренд» */
.revenue{display:grid;grid-template-columns:1fr 1.6fr;gap:18px;align-items:start;margin-top:14px}
.rev-left{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.rev-right{min-width:0}
.pay .lbl{color:var(--muted)}
.pay .lbl.h{color:var(--ink);font-weight:700;font-size:15px;margin-bottom:2px}
.pay .big{font-size:26px;font-weight:800;margin:2px 0 12px}
/* Фон по умолчанию — НЕЙТРАЛЬНОЕ кольцо: до ответа сервера доли неизвестны, а прежний
   сплошной фирменный читался как «100 % одним способом оплаты» (A15). */
.donut{width:150px;height:150px;border-radius:50%;background:conic-gradient(var(--line) 0 100%);
  -webkit-mask:radial-gradient(circle 46px at center,transparent 98%,#000 100%);mask:radial-gradient(circle 46px at center,transparent 98%,#000 100%)}
/* Легенда способов оплаты: показываются ВСЕ включённые в настройках, а их может быть до семи
   (карта, электронные деньги, банковский перевод, наличные, POS-терминал, криптовалюта, программа
   лояльности). Поэтому шаг строк умеренный, а сама легенда при нехватке места переносится в две
   колонки — иначе семь строк вылезают за карточку. */
.pmlegend{display:grid;gap:9px;font-size:13px;align-content:start}
@media (max-height:900px){.pmlegend{gap:7px}}
.pmlegend.pm-many{grid-template-columns:1fr 1fr;column-gap:18px}
.pmlegend .r{display:flex;align-items:center;gap:9px}
.pmlegend b{font-weight:600}.pmlegend small{color:var(--muted);display:block;margin-top:1px}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 22px}
.metric{display:flex;gap:9px;align-items:flex-start}
.metric .v{font-weight:700}.metric .n{color:var(--muted);font-size:12px}
/* min-height: разметка графиков больше не содержит демо-кривых (A15) — до первого ответа
   сервера блок пуст, и без резерва высоты виджет схлопывался бы и дёргал страницу. */
.chart{margin-top:8px;position:relative;min-height:210px}
.chart svg{width:100%;height:210px;display:block}
.chart .xlbl{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;margin-top:8px;padding-bottom:4px}
.chart.withaxis{padding-left:44px}
/* Ховер точек графика + подсказка (как у RentSyst) */
.chart svg circle.pt{cursor:pointer;transition:r .08s ease}
.chart svg circle.pt:hover{r:6}
/* Дольки пончика (CRSfmt.donutSegments): наведение подсвечивает сегмент, подсказку показывает
   тот же механизм .chart-tip, что и точки графиков. */
svg.dn .dn-seg{cursor:pointer;transition:opacity .1s}
svg.dn:hover .dn-seg{opacity:.55}
svg.dn .dn-seg:hover{opacity:1}
.chart svg line.hoverline{opacity:0;pointer-events:none;transition:opacity .08s}
.chart-tip{position:fixed;z-index:60;background:#1b1b1b;color:#fff;font-size:12px;font-weight:600;line-height:1.4;
  padding:7px 11px;border-radius:9px;pointer-events:none;opacity:0;transform:translate(-50%,-125%);transition:opacity .08s;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.chart-tip.show{opacity:1}
.chart-tip .k{color:#cfd3dc;font-weight:500}
.chart-tip:after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#1b1b1b}
.chart .yaxis{position:absolute;left:0;top:0;height:210px;display:flex;flex-direction:column;justify-content:space-between;color:var(--muted);font-size:10px;text-align:right;width:34px}
.bar{height:9px;border-radius:6px;background:linear-gradient(90deg,var(--green) 0 40%,var(--amber) 40% 66%,var(--cyan) 66% 100%);margin:14px 0 4px}
.plan-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.plan-row .sp{flex:1}.plan-row b{font-size:15px}
.rentals-legend{display:flex;gap:26px;margin:6px 0 10px;padding-left:44px;flex-wrap:wrap}
.rentals-legend .r{display:flex;gap:9px;align-items:center}
.rentals-legend b{font-size:18px;font-weight:700}
.rentals-legend small{color:var(--muted);display:block;font-size:12px}
/* Легенда-переключатель рядов («Выручка»/«Аренды», dashboard.js): строка легенды — кнопка,
   клик/Enter/Пробел прячет ряд графика. .lg-off = ряд выключен: цифра и подпись зачёркнуты и
   приглушены, точка бледнеет; сама цифра НЕ пересчитывается (у эталона она просто зачёркнута).
   Состояние — классом, не инлайн-стилем: одно правило на обе легенды (DRY). Блок стоит ПОСЛЕ
   .metric .v/.rentals-legend b: при равной специфичности приглушение должно побеждать. */
.lg-item{cursor:pointer;user-select:none}
.lg-off{text-decoration:line-through;color:var(--muted)}
.lg-off b,.lg-off small,.lg-off .v,.lg-off .n{color:var(--muted);text-decoration:line-through}
.lg-off .dot{opacity:.35}
/* Ряд донатов в шапке карточки (авто/клиент) — общий компонент CRSfmt.donut (web/admin/fmt.js).
   Размер самого кольца (170px) задаёт компонент; здесь только раскладка ряда. Один стиль на обе
   карточки: раньше он был в vehicle.html, и карточка клиента рисовала своё (#185). */
.cl-donuts{display:flex;gap:16px;align-items:center;margin-left:auto}
.cl-donuts:empty{display:none}
/* Телефон: два доната в ряд — 170px не влезают, ужимаем (эталон ~130px). */
@media(max-width:480px){
  .cl-donuts{gap:10px}
  .cl-donut{width:auto!important;max-width:calc(50% - 5px);aspect-ratio:1/1;height:auto!important}
}

.park{display:flex;gap:24px;align-items:center;margin-top:10px;flex-wrap:wrap}
.park-donut{width:150px;height:150px;border-radius:50%;flex:none;
  background:conic-gradient(var(--line) 0 100%);   /* A15: было 20/8/72 % — демо-доли парка */
  -webkit-mask:radial-gradient(circle 46px at center,transparent 98%,#000 100%);mask:radial-gradient(circle 46px at center,transparent 98%,#000 100%)}
.park-legend{display:grid;gap:13px;font-size:14px}
.park-legend .r{display:flex;align-items:center;gap:10px}
.park-legend b{font-weight:700;min-width:34px}.park-legend small{color:var(--muted)}
.map{height:240px;border-radius:12px;overflow:hidden;position:relative;border:1px solid var(--line);margin-top:8px}
.map svg.bg{position:absolute;inset:0;width:100%;height:100%}
.map .seg{position:absolute;top:12px;left:12px;display:flex;background:#fff;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.12);overflow:hidden;font-size:12px;font-weight:600}
.map .seg span{padding:6px 12px;color:var(--muted)}
.map .seg span.on{background:#fff;color:var(--ink)}
.map .seg span+span{border-left:1px solid var(--line)}
.pin{position:absolute;transform:translate(-50%,-100%);width:26px;height:26px;border-radius:50% 50% 50% 0;background:var(--primary);rotate:45deg;box-shadow:0 3px 6px rgba(0,0,0,.25);border:2px solid #fff}
.pin.cluster{width:34px;height:34px;border-radius:50%;rotate:0deg;background:#1b1b1b;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;transform:translate(-50%,-50%)}
.selbox{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:7px 12px;color:var(--muted);font-size:13px}

/* Тулбар списка + таблица (Аренды/Автопарк/Клиенты) */
.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.search{flex:1;min-width:220px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font:inherit;color:var(--ink)}
.chip{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 14px;color:var(--ink);font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
/* Сворачиваемая панель фильтров (раскрывается по «Фильтры», как RentSyst) */
.filters-panel{display:none;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin-bottom:16px;box-shadow:0 1px 2px rgba(20,30,60,.04)}
.filters-panel.open{display:block}
.filters-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 18px}
.filters-grid label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;font-weight:600}
.filters-grid select,.filters-grid input{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 11px;font:inherit;color:var(--ink);background:#fff}
.filters-actions{display:flex;gap:10px;margin-top:16px;justify-content:flex-end}
/* Флажок в панели фильтров (#228 «Показать просроченные задачи»): подпись справа, а не сверху,
   и он не должен растягиваться на всю ячейку — общее правило .filters-grid input его бы
   раздуло до ширины селекта. Ячейка прижата к низу, чтобы флажок встал на одну линию с полями. */
.filters-grid .filters-check,.filters-row .filters-check{display:flex;align-items:center;gap:9px;align-self:end;min-height:38px;margin:0;cursor:pointer}
.filters-grid .filters-check input,.filters-row .filters-check input{width:16px;height:16px;flex:none;margin:0;padding:0;accent-color:var(--primary)}
.filters-check span{font-size:13px;font-weight:600;color:var(--ink)}
/* Панель-ряд (эталон списков «Обслуживание» #168 / «Клиенты» #177): просто ряд полей с подписью
   сверху — без карточки-обёртки и без пустых колонок справа (потому не .filters-grid с фиксированными
   4 колонками). Кнопок применения у неё нет: выбор применяется сразу. */
.filters-panel.flat{background:none;border:0;box-shadow:none;border-radius:0;padding:2px 2px 6px}
.filters-row{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-start}
.filters-row>div{min-width:210px}
.filters-row label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;font-weight:600}
.filters-row select,.filters-row input{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 11px;font:inherit;color:var(--ink);background:var(--card)}
/* Поле-диапазон «от — до» внутри одной колонки панели (эталон: «Date of creation» с «To» посередине) */
.filters-range{display:flex;align-items:center;gap:8px;min-width:290px}
.filters-range span{color:var(--muted);font-size:12px;flex:none}
/* Поле шире одной колонки сетки — пара дат «с — по» (реестр аренд, «Дата создания»): в колонку
   шириной в четверть панели два поля даты не помещаются, а собственная min-width пары раздвинула
   бы свою колонку за счёт соседних. Две колонки из четырёх — и сетка остаётся ровной. */
.filters-grid>.wide{grid-column:span 2}
/* Настройки: сайдбар + контент */
.settings{display:grid;grid-template-columns:270px 1fr;gap:20px;align-items:start}
.set-nav{background:var(--card);border:1px solid #eef1f6;border-radius:14px;padding:12px;box-shadow:0 1px 2px rgba(20,30,60,.04)}
.set-nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap}
.set-nav a:hover{background:#f5f7fb}
.set-nav a.active{color:var(--primary)}
.set-nav .num{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:12px;font-weight:700;background:#22c55e;color:#fff}
.set-nav a.active .num{background:var(--primary)}
.set-nav .num svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2.8}
.set-content{background:var(--card);border:1px solid #eef1f6;border-radius:14px;padding:24px 26px;box-shadow:0 1px 2px rgba(20,30,60,.04)}
.set-sec{display:none}
.set-sec.active{display:block}
.set-sec-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.set-sec-head h2{margin:0;font-size:25px;font-weight:700;color:#454b59}
.zone-search{width:320px;max-width:48%;margin:0;border:1px solid var(--line);border-radius:9px;padding:9px 13px;font:inherit;color:var(--ink);background:#fff}
.zone-search::placeholder{color:var(--muted)}
.set-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 20px}
.set-grid.two{grid-template-columns:repeat(2,1fr)}
.rng-pair{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;align-items:start}
.set-grid label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:600}
.set-grid label .qh,.qh{position:relative;display:inline-grid;place-items:center;width:18px;height:18px;margin-left:4px;border-radius:50%;
  border:1.5px solid #b3bccb;background:transparent;color:#9aa3b5;font-size:11px;font-weight:700;line-height:1;vertical-align:middle;cursor:help;font-family:Poppins}
.qh:hover{border-color:var(--primary);color:var(--primary)}
/* кастомная подсказка — всплывает сразу при наведении на ЛЮБОЙ элемент с data-tip */
[data-tip]{position:relative}
/* Подсказка верхним слоем (portal на body, position:fixed) — НЕ обрезается overflow/модалками. Показ — shell.js. */
.qh-tip{position:fixed;z-index:2000;background:#2b3240;color:#fff;font-size:12px;font-weight:500;line-height:1.45;text-align:left;
  padding:9px 12px;border-radius:9px;max-width:280px;white-space:normal;box-shadow:0 8px 24px rgba(20,30,60,.28);
  pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .1s,transform .1s}
.qh-tip.show{opacity:1;transform:none}
.qh-tip::after{content:"";position:absolute;left:var(--arrow,50%);border:6px solid transparent;transform:translateX(-50%)}
.qh-tip.below::after{bottom:100%;border-bottom-color:#2b3240}
.qh-tip.above::after{top:100%;border-top-color:#2b3240}
/* Подсказка-СЧЁТЧИК ([data-tip-strong]) — жирная целиком: у эталона это <b>4</b>, голое число.
   Текстовые подсказки («Aggressive style: 7») остаются обычными — там жирного начертания нет. */
.qh-tip.strong{font-weight:700}
/* Всплывашка по КЛИКУ (#139): тот же слой и та же геометрия, что у [data-tip], но многострочная,
   шире и кликабельная (в отличие от hover-подсказки с pointer-events:none). */
.qh-tip.click{pointer-events:auto;max-width:320px}
.qh-tip.click ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.qh-tip.click .grey{color:#b9c0cd}
.qh-tip.click .lighten{color:#9aa3b5}
.qh-tip.click .time{margin-left:5px}
/* Иконки нарушений под именем клиента в строке аренды (#140, эталон ul.vehicle-sensors). */
.viol-sensors{list-style:none;display:flex;gap:7px;margin:3px 0 0;padding:0}
/* Выпадашка колонки «Действия» (#142, эталон .fadebox): список документов и меню статусов. */
.act-menu{position:fixed;z-index:2100;background:var(--card,#fff);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 10px 28px rgba(20,30,60,.18);padding:6px;min-width:170px;display:flex;flex-direction:column;gap:2px}
.act-menu a{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:7px;color:var(--ink);text-decoration:none;font-size:13px}
.act-menu a:hover{background:var(--bg,#f5f6fa)}
.act-menu a.active{background:var(--bg,#f5f6fa);font-weight:600}
.act-menu a[data-off]:hover{background:transparent}
.act-menu .fico{color:var(--muted);font-size:14px;width:14px;text-align:center}
.set-grid input:not([type=checkbox]),.set-grid select{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 11px;font:inherit;color:var(--ink);background:#fff}
.set-block{margin-top:24px;border-top:1px solid var(--line);padding-top:18px}
/* панели-аккордеон (раздел 1): один разделитель только МЕЖДУ панелями, без двойной линии под заголовком */
.set-block[data-accordion]{margin-top:0;border-top:0;padding-top:16px}
.set-block[data-accordion] + .set-block[data-accordion]{margin-top:6px}
.set-block-head{display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:var(--ink);font-weight:600;font-size:15px;margin-bottom:16px}
.set-block[data-collapse] > .set-block-head{font-size:25px;font-weight:700;color:#454b59;margin-bottom:20px}
.set-block[data-collapse] > .set-block-head .chev{width:22px;height:22px;stroke-width:2.4}
.set-block-head .chev{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .15s}
.set-block.closed .chev{transform:rotate(-90deg)}
.set-block.closed .set-block-head{margin-bottom:0}
.set-block.closed .set-grid,.set-block.closed .mods,.set-block.closed .set-subhead{display:none}
.set-actions{display:flex;justify-content:center;gap:12px;margin-top:26px}
/* пагинация как в оригинале: селект «на странице» + кнопки « ‹ [1] 2 › » */
.set-pager{display:flex;align-items:center;justify-content:space-between;margin:14px 2px 4px}
.set-pager .pp{border:1px solid var(--line);border-radius:8px;padding:7px 10px;font:inherit;font-size:13px;color:var(--ink);background:#fff;cursor:pointer}
/* Пейджер настроек — тот же компонент, что в реестрах: кнопки рисует crsPager (.pg), и стили
   у них общие (см. .pager .pg ниже). Своих «квадратиков» у настроек больше нет. */
.pgn{display:flex;gap:4px;margin:0;padding:0}

/* Изменённое, но не сохранённое поле настроек — жёлтая подсветка до нажатия «Сохранить» */
.set-sec input.dirty,
.set-sec .cs.dirty .cs-toggle{border-color:#e0a400 !important;background:#fff8e1 !important}
.set-sec .rng.dirty,
.set-sec .mod-row.dirty,
.set-sec .wh-row.dirty,
.set-sec .dlv-row.dirty{background:#fff8e1;box-shadow:inset 4px 0 0 #e0a400;border-radius:8px}
/* §6 матрица уведомлений: switch-тумблер скрыт (opacity:0), поэтому подсветку «не сохранено» несёт строка */
.notif-grid tr:has(input.dirty) td{background:#fff8e1}
.notif-grid tr:has(input.dirty) td:first-child{box-shadow:inset 4px 0 0 #e0a400}
/* §10 карточки интеграций: тумблер .sw скрыт (opacity:0) — подсветку «не сохранено» несёт карточка (как §6) */
.int-card:has(input.dirty){background:#fff8e1;border-color:#e0a400;box-shadow:inset 4px 0 0 #e0a400}

/* Зоны обслуживания: подсказка над картой (пока зон нет) + красная ошибка адреса вне зоны */
.zone-hint{background:#fff8e1;border:1px solid #ffe08a;color:#8a6d00;border-radius:10px;padding:11px 14px;font-size:13.5px;line-height:1.5;margin-bottom:10px}
.addr-error,.fld-err{color:#e5484d;font-size:12.5px;margin-top:6px;font-weight:500}
.dup-hi{border-color:#e5484d !important}
.cs.dup-hi .cs-toggle{border-color:#e5484d !important}

/* Drag-сортировка строк таблиц настроек (ручка .drag) */
.set-table td.drag{cursor:grab;touch-action:none;color:#c2c9d6}
.set-table td.drag:hover{color:var(--primary)}
.set-table tr.dragging{opacity:.6;background:#eef4ff;box-shadow:0 4px 14px rgba(20,30,60,.12)}
.set-actions .btn.ghost{background:#fff;color:#5b6472;border:1.5px solid #e3e7ef}

/* подзаголовок блока внутри раздела */
.set-subhead{font-size:15px;font-weight:600;color:var(--ink);margin:26px 0 14px}
.set-subhead-row{display:flex;align-items:center;justify-content:space-between;margin:26px 0 14px}
.set-subhead-row .set-subhead{margin:0}
.set-subhead-row .set-add{margin-top:0;min-width:200px;justify-content:center}
.set-subhead-row .sh-tools{display:flex;align-items:center;gap:10px}
.sh-tools .inl-label{font-size:13px;color:var(--muted);font-weight:600;white-space:nowrap}
.sh-tools .inl-sel{border:1px solid var(--line);border-radius:8px;padding:8px 11px;font:inherit;color:var(--ink);background:#fff;cursor:pointer}
.set-subhead:first-child{margin-top:0}
/* Гейтинг модулей (§1 «Включённые модули»): выключенный модуль прячет свои разделы/подсекции.
   !important — перебивает .set-sec.active (display:block) и flex у .set-nav a. */
.mod-off{display:none !important}
/* Гейт прав (G1, «владелец / сотрудник»): недоступное действие не показываем, а не отдаём 403
   после клика. Правило то же, что у модулей, — общий класс для всех страниц кабинета. */
.perm-off{display:none !important}
/* Обёртка-гейт не должна схлопывать верхний отступ подзаголовка без «Добавить …» (GPS). */
[data-mod-gate]>.set-subhead:first-child{margin-top:26px}
.set-hint{font-size:12px;color:var(--muted);margin:-6px 0 14px}

/* карта рабочей гео-зоны */
.set-map{position:relative;height:300px;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:#e8edf2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20h40M20 0v40' stroke='%23d5dde6' stroke-width='1'/%3E%3C/svg%3E")}
.set-map .zone{position:absolute;left:32%;top:24%;width:36%;height:46%;border:2px solid var(--primary);
  background:rgba(18,165,148,.12);border-radius:44% 56% 52% 48%/48% 44% 56% 52%}
.set-map .mbtn{position:absolute;top:12px;right:12px;background:#fff;border:1px solid #e3e7ef;border-radius:8px;
  padding:7px 12px;font:inherit;font-weight:600;font-size:12px;color:#5b6472;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.set-map .mradius{position:absolute;left:12px;bottom:12px;background:#fff;border:1px solid #e3e7ef;border-radius:8px;
  padding:6px 11px;font-weight:600;font-size:12px;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* таблицы разделов (локации, группы, менеджеры, страховки…) */
.set-table{width:100%;border-collapse:collapse;margin:2px 0 6px}
.set-table th{text-align:left;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;
  letter-spacing:.4px;padding:0 14px 10px;border-bottom:1px solid var(--line)}
.set-table td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.set-table tr:last-child td{border-bottom:0}
.set-table td b{font-weight:600}
.set-table .muted{color:var(--muted)}
.set-table .wh{display:flex;gap:4px}
.set-table .wh span{width:20px;height:20px;border-radius:5px;display:grid;place-items:center;font-size:10px;font-weight:700;
  background:#eef1f6;color:#aab2c4}
.set-table .wh span.on{background:#e2f7f4;color:var(--primary)}
.set-table .racts{display:flex;gap:12px}
.set-table .racts a{color:var(--primary);cursor:pointer;display:grid;place-items:center}
.set-table .racts a svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9}
.set-table .racts a.del{color:var(--brand)}
/* Недоступное действие строки (карандаш у главного пользователя, #449): значок на месте, но он
   приглушён и не кликается — оператор видит, что действие есть, и что оно закрыто. */
.set-table .racts span.off{color:var(--muted);opacity:.45;cursor:not-allowed;display:grid;place-items:center}
.set-table .racts span.off svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9}
/* §5 логотип юрлица + «корона» дефолтной компании (амбер-индикатор у лого, как в оригинале) */
.set-table .le-logo{position:relative;display:inline-grid;place-items:center;width:34px;height:34px}
.set-table .le-logo img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.set-table .le-logo .on{width:34px;height:34px;border-radius:50%;background:#e2f7f4;color:var(--primary);display:grid;place-items:center;font-size:12px;font-weight:700}
.set-table .le-crown{position:absolute;right:-5px;bottom:-5px;width:18px;height:18px;border-radius:50%;background:var(--amber);color:#fff;display:grid;place-items:center;box-shadow:0 1px 3px rgba(20,30,60,.25);cursor:help}
.set-table .le-crown svg{width:11px;height:11px;fill:currentColor;stroke:none}
.set-table td.drag{width:34px;text-align:center;color:#b8c0d0;cursor:move}
.set-table td.drag svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.set-table th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
.set-table th.sortable:hover{color:var(--primary)}
.set-table th .sc{width:12px;height:12px;stroke:#b8c0d0;fill:none;stroke-width:2;vertical-align:middle;margin-left:3px}
.set-table th.sortable:hover .sc{stroke:var(--primary)}
.perms{display:flex;flex-wrap:wrap;gap:5px;max-width:660px}
.perm-badge{font-size:11px;font-weight:600;padding:3px 9px;border-radius:6px;white-space:nowrap;cursor:help}
.perm-badge.on{background:#e2f7f4;color:var(--primary)}
.perm-badge.off{background:#eef1f6;color:#aab2c4}
/* §5 инлайн-форма одной компании (sub_companies=ВЫКЛ, эталон #98): логотип + поля + карточки-редакторы */
.le-inline{margin-top:6px}
.le-inline>.logo-up{margin-bottom:22px}
.le-inline .set-grid input:focus{border-color:var(--primary);outline:none}
.doc-btns{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0 4px}
.doc-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:106px;
  padding:20px;background:#fff;border:1px solid var(--line);border-radius:12px;color:var(--ink);
  font:inherit;font-weight:600;font-size:14px;text-align:center;cursor:pointer;transition:border-color .15s,box-shadow .15s,color .15s}
.doc-btn:hover{border-color:var(--primary);color:var(--primary);box-shadow:0 4px 14px rgba(18,165,148,.12)}
.doc-btn svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6}
/* «Реквизиты документов» — сворачиваемый блок обычного размера (не §1-гигант 25px) */
.le-inline .le-docfields{margin-top:24px;border-top:1px solid var(--line);padding-top:20px}
.le-inline .le-docfields.set-block>.set-block-head{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:16px}
.le-inline .le-docfields.set-block.closed>.set-block-head{margin-bottom:0}
.le-inline .le-docfields.set-block>.set-block-head .chev{width:16px;height:16px;stroke-width:2}
.le-inline-actions{justify-content:flex-start;margin-top:24px}
@media(max-width:720px){.doc-btns{grid-template-columns:1fr}}
.set-add{display:inline-flex;align-items:center;gap:7px;margin-top:6px;background:#fff;border:1.5px dashed #cfd6e2;
  border-radius:9px;padding:9px 15px;font:inherit;font-weight:600;font-size:13px;color:var(--primary);cursor:pointer}
.set-add svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2}
.notif-grid{width:100%;border-collapse:collapse}
.notif-grid th{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;padding:0 10px 12px;text-align:center}
.notif-grid th:first-child{text-align:left}
.notif-grid td{padding:12px 10px;border-top:1px solid var(--line);text-align:center}
.notif-grid td:first-child{text-align:left;font-weight:600}
.notif-grid .sw{display:inline-block}

/* интеграции — сетка карточек */
.int-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:2px 0 8px}
.int-card{border:1px solid #eef1f6;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:12px;background:#fff}
.int-card .top{display:flex;align-items:center;justify-content:space-between}
.int-card .logo{width:40px;height:40px;border-radius:9px;display:grid;place-items:center;font-weight:700;font-size:13px;
  background:#f2f4f8;color:#5b6472;letter-spacing:-.3px}
.int-card .nm{font-weight:600;font-size:13px}
.int-card .dsc{font-size:11px;color:var(--muted);line-height:1.35}
.int-card.on{border-color:#bfe9e2;background:#f4fbfa}
@media(max-width:1000px){.int-grid{grid-template-columns:1fr 1fr}}

/* промо-баннер «Свой сайт» */
.promo-banner{display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:linear-gradient(135deg,#12a594,#0e857a);color:#fff;border-radius:14px;padding:22px 26px;margin-bottom:4px}
.promo-banner h3{margin:0 0 8px;font-size:18px;font-weight:700}
.promo-banner ul{margin:0;padding-left:18px;font-size:13px;opacity:.95;line-height:1.75}
.promo-banner .pcta{flex:none;background:#fff;color:#0e857a;border:0;border-radius:10px;padding:12px 22px;
  font:inherit;font-weight:700;cursor:pointer;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.12)}
/* отложенные (as needed) промо-действия: видимы по мокапу, но инертны + подсказка «Скоро» */
.soon-wrap{flex:none;display:inline-flex;cursor:not-allowed}
.promo-banner .pcta[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none;box-shadow:none}
.add-link.is-soon{color:var(--muted);cursor:not-allowed}
.add-link.is-soon:hover{text-decoration:none}
/* поля настроек, за которыми ещё нет сущности: подпись + метка «Скоро», контрол выключен */
.soon-badge{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:#eef1f6;
  border:1px solid #e0e5ee;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.02em;text-transform:none;vertical-align:1px}
.cs.cs-off{cursor:not-allowed}
.cs.cs-off .cs-toggle{background:#f5f7fa;color:var(--muted);cursor:not-allowed}
.cs.cs-off .cs-toggle:after{opacity:.4}
/* то же для строк-таблиц (§9 GPS): выключенный тумблер и ползунок обязаны выглядеть выключенными */
.sw input:disabled{cursor:not-allowed}
.sw input:disabled + .track{opacity:.45}
input[type=range]:disabled{opacity:.45;cursor:not-allowed}
tr[data-soon] .gps-slval{opacity:.55}

/* агенты — чипы */
.agent-chips{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:2px 0 6px}
.agent-chip{display:inline-flex;align-items:center;gap:8px;background:#f2f4f8;border:1px solid #e7ebf2;
  border-radius:999px;padding:8px 15px;font-weight:600;font-size:13px;color:var(--ink);font-family:Poppins}
.agent-chip .adj{color:var(--primary);font-weight:700;font-size:12px}
.agent-chip .x{color:var(--muted);cursor:pointer;text-decoration:none}
.agent-chip.add-agent{border-style:dashed;border-color:#cfd6e2;color:var(--primary);cursor:pointer;background:#fff}
/* Модули-тумблеры */
/* range-слайдер (срок аренды / возраст водителя) — как в оригинале RentSyst */
.rng{padding-top:2px}
.rng-out{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:11px}
.rng-track{position:relative;height:6px;background:#e3e7ef;border-radius:6px;margin:0 8px}
.rng-fill{position:absolute;top:0;bottom:0;background:var(--primary);border-radius:6px}
.rng-h{position:absolute;top:50%;width:16px;height:16px;background:#fff;border:3px solid var(--primary);border-radius:50%;
  transform:translate(-50%,-50%);cursor:grab;box-shadow:0 1px 4px rgba(0,0,0,.22);touch-action:none}
.rng-h:active{cursor:grabbing}
.rng-lbl{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin:9px 8px 0}
/* Точный ввод границ слайдера (#132): на шкале 0–720 мышью в конкретный час не попасть, поэтому
   у границ — маленькие поля, а на ручке бейдж с текущим числом (эталон показывает его так же). */
.rng-out .rng-num{width:62px;flex:0 0 62px;min-width:0;padding:3px 6px;border:1px solid var(--line);border-radius:6px;
  background:var(--card,#fff);color:var(--ink);font:inherit;font-weight:600;text-align:center;box-sizing:border-box}
.rng-out .rng-num:focus{outline:none;border-color:var(--primary)}
.rng-unit{margin-left:6px}
.rng-out{width:100%}
/* Правая граница прижата к правому краю дорожки (просьба владельца): space-between одного
   не гарантирует — margin-left:auto держит её справа при любом содержимом соседей. */
.rng-out .rng-from,.rng-out .rng-to{display:inline-flex;align-items:center;white-space:nowrap}
.rng-out .rng-to{margin-left:auto;justify-content:flex-end;padding-right:8px}
.rng-out .rng-from{padding-left:8px}
.rng-badge{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--ink,#243044);
  color:#fff;border-radius:5px;padding:1px 6px;font-size:11px;font-weight:600;line-height:1.6;white-space:nowrap;
  opacity:0;transition:opacity .12s;pointer-events:none}
.rng-h:focus .rng-badge,.rng-h.drag .rng-badge{opacity:1}
.rng-h:focus{outline:2px solid var(--primary);outline-offset:2px}

.mods{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
.mod-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.sw{position:relative;display:inline-block;width:38px;height:22px;flex:none}
.sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.sw .track{position:absolute;inset:0;background:#d5dae4;border-radius:999px;transition:.15s}
.sw .track:before{content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.sw input:checked + .track{background:var(--primary)}
.sw input:checked + .track:before{transform:translateX(16px)}
/* Выключенный тумблер обязан и выглядеть выключенным: сам <input> прозрачный и лежит поверх
   дорожки, поэтому без этих двух правил disabled не было видно вовсе (как было с .cs-выпадашкой). */
.sw input:disabled{cursor:not-allowed}
.sw input:disabled + .track{opacity:.45}
@media(max-width:1000px){.settings{grid-template-columns:1fr}.set-grid,.set-grid.two{grid-template-columns:1fr 1fr}.rng-pair{grid-template-columns:1fr}.mods{grid-template-columns:1fr}}

/* Кастомный селект (стилизованная выпадашка, как bootstrap-select RentSyst) */
.cs{position:relative}
.cs-toggle{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 30px 9px 11px;background:#fff;color:var(--ink);font:inherit;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-toggle:after{content:"";position:absolute;right:12px;top:44%;width:7px;height:7px;border-right:2px solid #9aa3b5;border-bottom:2px solid #9aa3b5;transform:rotate(45deg)}
.cs-toggle.ph{color:var(--muted)}
.cs.open .cs-toggle{border-color:var(--primary)}
.cs.open .cs-toggle:after{transform:rotate(-135deg);top:50%}
/* Выпадашка кастом-селекта — ПОВЕРХ всего (position:fixed, не режется overflow модалок/скролла).
   Позицию (вверх/вниз + max-height для скролла по краям экрана) задаёт shell.js. */
.cs-menu{display:none;position:fixed;z-index:2000;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 28px rgba(20,30,60,.16);max-height:250px;overflow:auto;padding:5px}
.cs.open .cs-menu{display:block}
.cs-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;cursor:pointer;font-size:13px}
.cs-item:hover{background:#f2f4f8}
.cs-item.sel{color:var(--primary);font-weight:600}
.cs-check{width:16px;height:16px;border:1.5px solid #cdd3e0;border-radius:4px;flex:none;position:relative}
.cs-item.sel .cs-check{background:var(--primary);border-color:var(--primary)}
.cs-item.sel .cs-check:after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}

/* Календарь-диапазон «от — до» */
/* Календарь живёт в body, а открывают его и ИЗ МОДАЛКИ (история перемещений авто): при z-index
   ниже оверлея (.modal-ov z-index:1000) он честно открывался, но целиком уходил ПОД модалку —
   человек видел, что ничего не произошло. Слой держим выше модалки и ниже подсказок (.qh-tip). */
.dr-pop{position:absolute;z-index:1100;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px rgba(20,30,60,.20);padding:12px;width:264px;user-select:none;font-family:Poppins}
.dr-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-weight:600;font-size:13px}
.dr-nav{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;cursor:pointer;color:var(--muted);font-size:16px}
.dr-nav:hover{background:#f2f4f8;color:var(--ink)}
.dr-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;font-size:12px}
.dr-grid .wd{color:var(--muted);text-align:center;font-size:10px;padding:3px 0;text-transform:uppercase}
.dr-day{height:30px;display:grid;place-items:center;border-radius:8px;cursor:pointer}
.dr-day:hover{background:#eef7f5}
.dr-day.other{color:#c5cbd6;cursor:default}
.dr-day.other:hover{background:transparent}
.dr-day.in{background:#e2f7f4;border-radius:0}
.dr-day.edge{background:var(--primary);color:#fff}
.dr-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.chip.active{border-color:var(--primary);color:var(--primary)}
/* Счётчик применённых фильтров у чипа «Фильтры» (#233). Значок ставит и обновляет ОДИН общий
   window.filterPanel (shell.js) — потому он и одинаков на всех страницах с панелью. Ноль
   фильтров → [hidden]; собственный display у значка сильнее правила браузера для [hidden],
   поэтому скрытие прописано явно. */
.chip .chip-cnt{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--primary);color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.chip .chip-cnt[hidden]{display:none}
@media(max-width:1000px){.filters-grid{grid-template-columns:1fr 1fr}}
/* Телефон: два столбца фильтров по 168px не помещаются в карточку (панель 358px), правый столбец
   выходил за экран на 3px и выглядел обрезанным. Один столбец — поля во всю ширину. */
@media(max-width:560px){.filters-grid{grid-template-columns:minmax(0,1fr)}}

.tablecard{background:var(--card);border-radius:14px;box-shadow:0 1px 2px rgba(20,30,60,.04);overflow:hidden}
table.grid{width:100%;border-collapse:collapse;font-size:13px}
table.grid thead th{text-align:left;color:var(--muted);font-weight:600;font-size:13px;padding:14px 16px;border-bottom:1px solid var(--line);background:#fafbfd}
/* Сортировка по колонке (реестр автопарка): заголовок-кнопка + стрелка направления в data-dir.
   Стрелка — псевдоэлемент, а не узел: applyI18n переписывает textContent заголовка. */
table.grid thead th[data-sort]{cursor:pointer;user-select:none}
table.grid thead th[data-sort]:hover{color:var(--ink)}
table.grid thead th[data-sort][data-dir]{color:var(--primary)}
table.grid thead th[data-sort][data-dir]::after{content:attr(data-dir);margin-left:4px}
table.grid tbody td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
/* Планшет и телефон: клетка теснее — как в эталоне (у него 10px на этой ширине). Реестр всё равно
   шире экрана и ездит вбок, и каждые лишние 6px на колонку — это ещё сотня пикселей прокрутки:
   на 768px наша таблица была 1199px против 1041px у эталона. Десктоп (≥1001px) не трогаем — там
   отступы утверждены владельцем. */
@media(max-width:1000px){
  table.grid thead th,table.grid tbody td{padding:10px}
}
/* Подсветка строки под курсором одна на кабинет: реестры (.grid) и таблица подбора (.vehsel-table). */
table.grid tbody tr:hover,.vehsel-table tbody tr:hover{background:#fafbfd}
table.grid .muted{color:var(--muted);font-size:12px}
.veh{display:flex;align-items:center;gap:10px}
/* Миниатюра сущности (fmt.js vehThumb): фон-картинка ОБЯЗАНА закрывать рамку — center/cover.
   Правило висит на самом классе, а не на `.veh .thumb`: vehThumb зовут и вне блока `.veh`
   (карта повреждений, подбор авто в брони), и там миниатюра оставалась без размера и без
   center/cover — фото либо не было видно вовсе (0x0), либо в рамку вставал кусок кадра в
   натуральную величину (#249). Страница меняет только размер и радиус. */
.thumb{width:40px;height:40px;border-radius:50%;background:#e7ebf3 center/cover no-repeat;flex:none}
.thumb-empty{display:flex;align-items:center;justify-content:center;color:var(--muted)}
/* Колонка «Инфо» строки заказа (#190): подпись «Создан:» со знаком «?» — отдельной строкой,
   дата со временем — следующей; время серым и без запятой перед ним (эталон).
   .dates-col — тот же вид у колонки с НЕСКОЛЬКИМИ датами: «Период» наряда обслуживания печатает
   обе границы одна под другой (#405). Правило одно: дата блоком, время серым рядом. */
.created-info__label,.created-info .date,.dates-col .date{display:block}
.created-info .time,.dates-col .time{color:var(--muted);margin-left:5px}
/* Ячейка «Тип» наряда обслуживания: глиф вида работ, НАЗВАНИЕ и состав работ отдельными строками
   (#405, замечание владельца «в колонке Тип всё написано в одну строку»). Стиль общий — ту же
   ячейку рисуют реестр обслуживания (services.js) и вкладка карточки авто (vehicle.js), и в
   <style> одной страницы вторая осталась бы без оформления (то же правило, что у .vio-*).
   Название набрано КАПСОМ регистром показа: в справочнике ТО и в импорте имя хранится как есть. */
.svc-type{display:flex;align-items:flex-start;gap:8px}
.svc-type .fico{color:var(--primary);font-size:20.8px;line-height:1.1}
.svc-type b{font-weight:600;text-transform:uppercase}
.svc-type .sub{color:var(--muted);font-size:12px}
/* Галерея фото авто (FIX-9) */
.vc-gmain{display:block;width:100%;max-width:480px;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:#e7ebf3}
.vc-gstrip{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.vc-gthumb{padding:0;border:2px solid transparent;border-radius:9px;background:none;cursor:pointer;overflow:hidden;line-height:0}
.vc-gthumb.on{border-color:var(--primary)}
.vc-gthumb img{width:72px;height:54px;object-fit:cover;display:block}
.veh b{font-weight:600;color:var(--primary);cursor:pointer}
.cust{display:flex;align-items:center;gap:10px}
.cust .av{width:34px;height:34px;border-radius:50%;background:var(--grad) center/cover no-repeat;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.cust b{color:var(--primary);cursor:pointer;display:block;margin-bottom:3px}
/* Имя клиента в списках печатаем КАПСОМ (эталон). Только вид: в базе имя остаётся как введено —
   оно уходит в договоры и инвойсы, ломать его регистр ради строки таблицы нельзя (#172). */
.cust b.up{text-transform:uppercase}
/* Фото контакта в реестре клиентов (#172): своя безымянная колонка между «Инфо» и «Имя», 50×50,
   круг. Фото нет — кружок с инициалами приглушённого серо-лилового (--muted), а не брендового:
   заглушка не должна спорить с фирменным цветом строки. */
.ava{width:50px;height:50px;border-radius:50%;background:var(--muted) center/cover no-repeat;color:#fff;display:grid;place-items:center;font-size:15px;font-weight:700;flex:none}
/* Портрет в кружке: лицо стоит в ВЕРХНЕЙ части кадра, поэтому показываем не центр, а верхнюю
   треть — иначе у людей срезается макушка и в списке видно лоб и подбородок вместо лица.
   Эталон отдаёт уже кадрированную миниатюру (/cache/thumbnail/), мы кадрируем сами из оригинала,
   и центр кадра там приходится на шею. */
.av img, .ava img, .thumb img, .user-ava img{object-position:50% 25%}
/* Строка реестра клиентов выше обычной (эталон 95px): в неё встаёт фото 50×50 (#172).
   Селектор с двумя классами — иначе общее `table.grid tbody td` перебивает по специфичности. */
table.grid.cust-grid tbody td{padding-top:22px;padding-bottom:22px}
.amount b{font-weight:700}
.due{color:var(--muted);font-size:12px}
.due.unpaid{color:var(--brand);font-weight:600}
/* Плашка «список сужен до одной сущности» (#175): реестр аренд/нарушений, открытый ссылкой из
   списка клиентов. Стоит рядом с заголовком, крестик снимает сужение. Цвета — мягкая подложка
   фирменного (те же токены, что у дата-карточки брони), своих не заводим. */
.scope-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 8px 5px 12px;border-radius:999px;
  background:var(--primary-soft);color:var(--active);font-size:13px;line-height:1}
.scope-chip .scope-lbl{color:var(--active);opacity:.75}
.scope-chip .scope-name{font-weight:600;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scope-chip .scope-x{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;
  color:var(--active);text-decoration:none;font-size:11px;background:var(--primary-soft-2)}
.scope-chip .scope-x:hover{background:var(--active);color:#fff}

/* Строка нарушения (#200) — стили ОБЩЕЙ строки CRSfmt.violRow, поэтому живут здесь, а не в
   violations.html: ту же строку рисует вкладка «Нарушения» карточки клиента, и в отдельном
   <style> одной страницы вторая осталась бы без оформления. Реюз .veh/.cust/.st/.plate/.acts. */
.vio-type{font-weight:600}
.vio-msg{color:var(--muted);font-size:12px;max-width:190px;white-space:normal}
.vio-loc{color:var(--blue);font-weight:600;display:inline-flex;align-items:center;gap:4px;text-decoration:none;cursor:pointer}
.vio-loc svg{width:13px;height:13px}
.vio-warn{color:var(--amber);vertical-align:-2px;margin-left:3px}
.vio-none{color:var(--muted)}
/* Прочитано / не прочитано (#199) — логика почтового ящика.
   Непрочитанное: точка-маркер слева от Id + полужирные Id и Тип, обычный фон.
   Прочитанное: точки нет, обычное начертание, строка приглушена. Точка читается с одного
   взгляда даже при 50 строках на экране, в отличие от разницы в насыщенности фона. */
.vio-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--primary);margin-right:7px;vertical-align:1px}
tr.vio-read{background:#fafbfd;color:var(--muted)}
tr.vio-read .vio-dot{visibility:hidden}
tr.vio-read td b,tr.vio-read .vio-type{font-weight:400}

.acts{display:flex;gap:10px}
.acts a{width:26px;height:26px;border:0;display:grid;place-items:center;color:var(--primary);cursor:pointer}
.acts a:hover{color:#0e8f80}
.acts a.doc{color:#e0a400}
.acts a.doc:hover{color:#c99200}
.acts svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}

/* Статус-пилюли (воркфлоу заказа) */
/* Пилюли-статусы — единый стиль (владелец): прямоугольник со скруглением, БЕЗ заливки (прозрачный),
   рамка+текст = цвет статуса (currentColor); не жирный. Каждый статус — свой цвет. Один вид во всей программе. */
.st{display:inline-flex;align-items:center;font-size:12px;font-weight:500;padding:5px 13px;border-radius:12px;white-space:nowrap;background:transparent;border:2px solid currentColor}
.st.draft{color:#6b7280}
.st.booking{color:#2b6cb0}
.st.reserved{color:#7c3aed}
.st.rental{color:#c47510}
.st.done{color:#1f9d46}
.st.active{color:#0e8f80}
.st.cancel,.st.reject{color:#d5330f}
/* СТАТУСЫ НАРЯДА НА ОБСЛУЖИВАНИЕ (#425) — свои цвета, снятые с эталона 13-09-2026:
   Open #00C5DC, In service #F55800, Done service #029D9D, Cancel #EB3F57.
   Почему не классы статусов АРЕНДЫ, которыми чип красился раньше: наряд и бронь — разные сущности,
   и в эталоне у них разные цвета (наш «Open» брони синий, наряда — бирюзовый). Это ЕДИНСТВЕННОЕ
   место, где записаны эти четыре цвета; соответствие «код статуса → класс» — тоже одно
   (CRSfmt.maintStatusChip), поэтому реестр обслуживания, карточка авто и карточка наряда красят
   один статус одинаково.

   БЕЙДЖ НАРЯДА — ЗАЛИТЫЙ, а не обводка (#426): у эталона это плашка цвета статуса с белым текстом,
   11px, скругление 9px (computed style, снят 13-09-2026 — docs/reference/service-entity-from-rentsyst.md
   §3). Обводка .st осталась там, где она и в эталоне, — у статусов АРЕНДЫ; наряд красится своей
   заливкой. Рамку не убираем, а делаем прозрачной: так чип сохраняет прежний габарит и не «прыгает»
   рядом с чипом брони в соседней строке. */
.st.svc-open,.st.svc-in-service,.st.svc-done,.st.svc-cancel{
  color:#fff;border-color:transparent;font-size:11px;border-radius:9px}
.st.svc-open{background:#00c5dc}
.st.svc-in-service{background:#f55800}
.st.svc-done{background:#029d9d}
.st.svc-cancel{background:#eb3f57}
/* Действие строки, которое СЕЙЧАС недоступно (правка завершённого наряда, смена статуса без права
   владельца). Кнопка остаётся на месте и с подсказкой: пропавшее действие читается как «такого в
   программе нет», а колонка действий при этом ещё и прыгает от строки к строке.
   Разметка та же, что у доступного действия (.acts), поэтому иконка стоит ровно там же. */
.acts .off{width:26px;height:26px;display:grid;place-items:center;color:var(--muted);opacity:.45;cursor:not-allowed}
.km{color:var(--muted);font-size:11px;margin-top:3px}

/* Уточнения по сверке с RentSyst */
.plate{display:inline-block;font:700 11px/1.4 Poppins;padding:1px 6px;border:1px solid #cfd6e4;border-radius:4px;background:#f6f8fc;letter-spacing:.5px;color:#3b4250}
/* Счётчик повреждений в колонке таблицы (#249): значок и число в одну строку, как в эталоне.
   Разметку собирает CRSfmt.vehDamagesCount — стиль живёт рядом с ней, а не на странице. */
.dmg-count{display:inline-flex;align-items:center;gap:6px}
.grp{display:inline-block;font-size:11px;font-weight:600;padding:1px 7px;border-radius:6px;background:#eef1f6;color:#5b6472;margin-right:6px}
.tp{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.tp.ind{background:#e7eefc;color:#2b6cb0}
.tp.co{background:#f0e7fc;color:#7c3bed}
/* Плашка «Тип» с ЗАЛИВКОЙ (#172, эталон .badge: белый текст, 11px, радиус 9, высота 18). Цвета те
   же, что у светлого варианта, только местами — фон вместо текста. Светлая подложка остаётся
   в реестре аренд: её вид уже утверждён, и менять его эта карточка не просит. */
.tp.fill{display:inline-flex;align-items:center;height:18px;padding:0 9px;border-radius:9px;color:#fff}
.tp.ind.fill{background:#2b6cb0}
.tp.co.fill{background:#7c3bed}
.loc{display:inline-flex;align-items:center;gap:5px;color:var(--primary);text-decoration:none}
.loc svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8}
td .lnk{color:var(--primary);text-decoration:none;border-bottom:1px dashed rgba(18,165,148,.4)}
.cellico{display:inline-flex;align-items:center;gap:6px}
.cellico svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
/* Колонка «Контакты» реестра клиентов (#173, эталон ul.icons-list): только иконки — телефон и
   мессенджеры. Значение показывает подсказка [data-tip], клик кладёт его в буфер. */
.icons-list{list-style:none;display:flex;align-items:center;gap:14px;margin:0;padding:0}
.icons-list .ico-copy{display:inline-flex;cursor:pointer;color:var(--primary);line-height:1}
.icons-list .ico-copy:hover{color:var(--active)}
.icons-list .fico{font-size:16px}
.fuel{display:inline-flex;flex-direction:column;align-items:center;gap:2px;line-height:1}
.fuel svg{width:26px;height:16px}
.odo{display:inline-flex;gap:2px}
.odo span{background:#f2f4f8;color:#2b3240;border:1px solid #dbe0ea;font:700 12px/1 Poppins;padding:4px 3px;border-radius:2px}
.upd{display:inline-flex;align-items:center;gap:6px}
.upd svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;color:var(--muted)}
.upd.auto{color:var(--green)}
.upd.auto svg{color:var(--green)}
/* FIX-10: Manual (трекера нет / молчит) — нейтральный info-значок */
.upd.manual{color:var(--muted)}
.upd.manual svg{color:var(--muted)}
.upd[data-tip]{cursor:default}
/* Пагинация таблицы */
.pager{display:flex;align-items:center;gap:4px;padding:14px 6px;color:var(--muted);font-size:13px;flex-wrap:wrap}
.pager .sp{flex:1}
/* Кнопки страниц — по эталону (снято с RentSyst 21-09-2026): 30×30, радиус 3, номера БЕЗ рамки;
   серую подложку носят только «шаг назад/вперёд» (‹ ›), а «в начало/в конец» (« ») — без неё.
   Текущая страница залита нашим акцентом (--primary), как активная вкладка кабинета. */
.pager .pg,.pgn .pg{min-width:30px;height:30px;padding:0 6px;border-radius:3px;background:transparent;color:#646c9a;
  display:inline-grid;place-items:center;cursor:pointer;font-weight:400;font-size:13px;user-select:none}
.pager .pg.on,.pgn .pg.on{background:var(--primary);color:#fff}
.pager .pg.step,.pgn .pg.step{background:#ebe9f2}
.pager .pg.off,.pgn .pg.off{color:#c2c9d6;cursor:default}
.pager .pg.step.off,.pgn .pg.step.off{background:#f4f3f8}
.pager .pg:not(.on):not(.off):hover,.pgn .pg:not(.on):not(.off):hover{color:var(--primary)}
.pager select{border:1px solid var(--line);border-radius:8px;padding:6px 8px;font:inherit;color:var(--ink);background:#fff}

/* Адаптив — как у RentSyst */
@media(max-width:1000px){
  .hicons .ic, .balance{display:none}
  .burger{display:flex}
  nav.cab{display:none;flex-direction:column}
  .navwrap{padding:0 16px}
  header.cab{padding:14px 16px}
  main{padding:16px}
  .metrics{grid-template-columns:1fr 1fr}
  footer.cab{flex-direction:column;align-items:flex-start;gap:6px;padding:16px}
  .tablecard{overflow-x:auto}
  table.grid{min-width:900px}
}

/* ПЛАНШЕТ (768–1000px) — две колонки, как в эталоне. Он складывает плитки в одну колонку только
   на телефоне (его сетка — bootstrap col-md, порог 767px): на 768px у него «План дня» стоит рядом
   с «Арендами», а «Статус парка» — рядом с картой. Мы же схлопывали всё уже на 1000px, и планшет
   выглядел вытянутым телефоном. Виджет выручки на этой ширине тоже остаётся одной карточкой с
   внутренним делением — как у эталона. */
@media(max-width:767px){
  .revenue{grid-template-columns:1fr;justify-items:start}
  .cols{grid-template-columns:1fr}
}

/* ── Модальные окна (Добавить локацию / группу и т.п.) ── */
.modal-ov{position:fixed;inset:0;background:rgba(30,34,45,.5);display:none;align-items:flex-start;justify-content:center;z-index:1000;overflow:auto;padding:24px 16px}
.modal-ov.open{display:flex}
/* Флекс-колонка + max-height: шапка/подвал фиксированы, тело скроллится — кнопки Отмена/Сохранить всегда на экране */
.modal-dlg{background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.28);width:100%;max-width:520px;margin:0 auto;display:flex;flex-direction:column;max-height:calc(100vh - 48px)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line);flex-shrink:0}
.modal-head h3{font-size:19px;font-weight:700;color:var(--ink)}
.modal-x{cursor:pointer;color:var(--muted);width:28px;height:28px;display:grid;place-items:center;border-radius:7px;font-size:16px}
.modal-x:hover{background:#f1f3f7;color:var(--ink)}
.modal-body{padding:20px 22px;overflow-y:auto;flex:1 1 auto;min-height:0}
.modal-body .fld{margin-bottom:14px}
/* §4: цены позиции по единицам тарификации (#375). Единиц у компании от одной до пяти — поля
   раскладываются в сетку, чтобы модалка не вытягивалась в столбик на пять экранов. */
.modal-body .unit-prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 12px}
.modal-body .fld>label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:600}
.modal-body .fld input[type=text]:not(.pct-out),.modal-body .fld input[type=password],.modal-body .fld input[type=number],.modal-body .fld input[type=email]{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 11px;font:inherit;color:var(--ink);background:#fff}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 22px;border-top:1px solid var(--line);flex-shrink:0}
/* #58 Диалог подтверждения confirmDialog — поверх .modal-ov/.modal-dlg: бирюзовое «Да» / красное «Нет». */
.modal-ov.cdlg{align-items:center}
.modal-ov.cdlg .modal-dlg{max-width:430px}
.cdlg-text{margin:0;color:var(--ink);font-size:15px;line-height:1.55}
.btn.cdlg-yes{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn.cdlg-yes:hover{background:#0e8c7e;border-color:#0e8c7e}
.btn.cdlg-no{background:var(--red);color:#fff;border-color:var(--red)}
.btn.cdlg-no:hover{background:#dc2f2f;border-color:#dc2f2f}
.mod-sub{font-size:15px;font-weight:700;color:var(--ink);margin:20px 0 12px}
/* #55 Онбординг-подсказка: указатель на шестерёнку «Настройки» при первом входе тенанта. */
.onbd-callout{position:fixed;z-index:1200;max-width:300px;background:var(--primary);color:#fff;border-radius:12px;
  padding:14px 16px 16px;box-shadow:0 16px 44px rgba(18,165,148,.42);opacity:0;transform:translateY(-6px);
  transition:opacity .18s,transform .18s;font-size:14px;line-height:1.5}
.onbd-callout.show{opacity:1;transform:none}
.onbd-callout .onbd-arrow{position:absolute;bottom:100%;left:var(--ax,50%);transform:translateX(-50%);
  border:8px solid transparent;border-bottom-color:var(--primary)}
.onbd-callout .onbd-text{font-weight:500;margin:0 0 12px;padding-right:16px}
.onbd-callout .onbd-x{position:absolute;top:7px;right:9px;background:none;border:0;color:#d6fff8;font-size:15px;line-height:1;cursor:pointer;padding:2px}
.onbd-callout .onbd-x:hover{color:#fff}
.onbd-callout .onbd-ok{background:#fff;color:var(--primary);border:0;border-radius:8px;padding:8px 16px;font-weight:700;font-family:inherit;cursor:pointer}
.onbd-callout .onbd-ok:hover{background:#f0fffd}
.hicons .ic.onbd-hl{color:#fff}
.hicons .ic.onbd-hl svg{fill:#fff;filter:drop-shadow(0 0 6px rgba(18,165,148,.95))}
/* Автодополнение адреса (OpenStreetMap/Nominatim) — выпадашка под полем «Адрес» */
.addr-fld{position:relative}
.addr-sugg{display:none;position:absolute;left:0;right:0;top:calc(100% + 3px);z-index:70;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 28px rgba(20,30,60,.16);max-height:230px;overflow:auto;padding:4px}
.addr-sugg.open{display:block}
.addr-sugg .as-item{padding:8px 10px;border-radius:7px;cursor:pointer;font-size:13px;color:var(--ink);line-height:1.35}
.addr-sugg .as-item:hover,.addr-sugg .as-item.act{background:#f2f4f8}
/* Метка точности подсказки адреса (город/район/улица) — чтобы не выбрать район вместо города. */
.addr-sugg .as-kind{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;background:var(--line);color:var(--muted);font-size:11px;vertical-align:1px}
.addr-sugg .as-empty{padding:9px 10px;font-size:12px;color:var(--muted)}
/* Логотип компании (модалка) */
.logo-up{text-align:center;margin-bottom:16px}
.logo-ph{position:relative;width:88px;height:88px;margin:0 auto 8px;border:2px solid var(--line);border-radius:50%;display:grid;place-items:center;color:#b3bccb}
.logo-ph>svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.5}
.logo-edit{position:absolute;right:0;top:2px;width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--primary);cursor:pointer;box-shadow:0 2px 6px rgba(20,30,60,.12)}
.logo-edit svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.logo-cap{font-size:13px;font-weight:600;color:var(--muted)}
/* §5 M3 — загрузка изображений (лого/подпись) */
.logo-ph .logo-img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
.logo-ph.has-img>svg{display:none}                 /* показан логотип → прячем плейсхолдер-«персону» */
.set-table .racts a.act-sign{position:relative}
.set-table .racts a.has-sign{color:var(--primary)} /* подпись загружена */
.set-table .racts a.has-sign::after{content:"";position:absolute;right:-4px;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--primary);border:1.5px solid #fff}
/* Окно подписи (signature.js): холст на всю ширину окна, рамка — как у полей ввода. Подпись
   рисуют пальцем на планшете, поэтому прокрутку страницы над холстом гасим (touch-action). */
.sig-dlg{max-width:680px}
.sig-hint{color:var(--muted);font-size:13px;margin-bottom:10px}
.sig-canvas{display:block;width:100%;height:auto;aspect-ratio:600/220;border:1px solid var(--line);border-radius:10px;
  background:#fff;cursor:crosshair;touch-action:none}
.sig-dlg .modal-foot{justify-content:flex-start}

.sig-toast,.crs-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(8px);background:#1e2a3a;color:#fff;font-size:13px;font-weight:600;padding:10px 16px;border-radius:8px;box-shadow:0 6px 20px rgba(20,30,60,.25);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:9999}
.sig-toast.show,.crs-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.sig-toast.err,.crs-toast.err{background:#b8322f}
/* Чекбокс-строка (перечни/права) */
.chk{display:flex;align-items:flex-start;gap:9px;cursor:pointer;font-size:13px;color:var(--ink);line-height:1.4;margin:7px 0}
.chk input{width:16px;height:16px;accent-color:var(--primary);flex:none;margin-top:1px}
.chk-center{justify-content:center;align-items:center;margin:0 0 16px}
.perm-title{text-align:center;font-weight:700;color:var(--ink);font-size:15px;margin:18px 0 6px}
.perm-cat{font-weight:700;color:var(--ink);font-size:13px;margin:16px 0 6px}
.add-link{display:inline-block;margin-top:8px;color:var(--primary);font-size:13px;font-weight:600;text-decoration:none}
.add-link:hover{text-decoration:underline}
/* Чип-плейсхолдер ‹Токен› в канве редактора шаблонов (doc-editor.js) */
.tvar{display:inline-block;background:#e2f7f4;color:#0c7d6e;border:1px solid #b7e6df;border-radius:6px;padding:0 6px;font-size:12px;font-weight:600;white-space:nowrap;user-select:none}
.mod-hint{font-size:12px;color:var(--muted);margin:-6px 0 10px}
/* часы работы: чекбокс + день + слайдер времени */
.wh-row{display:grid;grid-template-columns:40px 30px 1fr;align-items:center;gap:14px;margin-bottom:16px}
.wh-day{font-size:13px;font-weight:600;color:var(--ink)}
.wh-row .rng{padding-top:0}
/* Выключенный день — прятать бегунок времени (реактивно по состоянию чекбокса) */
.wh-row:has(.sw input:not(:checked)) .rng{display:none}
/* доставка: тумблер-строка + раскрывающийся под-блок */
.dlv-row{display:flex;align-items:center;gap:10px;margin:12px 0;font-size:13px;color:var(--ink)}
.dlv-sub{display:none;grid-template-columns:1fr 1fr;gap:12px;margin:2px 0 14px;padding:14px;background:#f7f8fb;border-radius:10px}
.dlv-sub.open{display:grid}
.dlv-sub>div>label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;font-weight:600}
.dlv-sub input[type=text]{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;background:#fff}

/* Замок часов работы (групповое редактирование) */
.wh-head{display:flex;align-items:center;gap:8px}
.wh-lock{border:1px solid var(--line);background:#fff;border-radius:8px;width:30px;height:30px;display:inline-grid;place-items:center;cursor:pointer;color:var(--muted);padding:0}
.wh-lock svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.wh-lock.on{border-color:var(--primary);color:var(--primary);background:#e9f7f5}

/* Карта OSM рабочей гео-зоны */
.set-map{height:380px}
#osm-map{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.set-map .mbtn{z-index:600}
.leaflet-container{font-family:inherit}

/* Вложенные блоки доставки в модалке локации */
.dlv-block{display:none;margin:2px 0 10px 34px;padding-left:12px;border-left:2px solid var(--line)}
.dlv-block.open{display:block}
.dlv-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0 12px;padding:12px;background:#f7f8fb;border-radius:10px}
.dlv-fields>div>label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;font-weight:600}
.dlv-fields input[type=text]{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;background:#fff}

/* Одиночное поле в под-блоке доставки + радиус во всю ширину */
.dlv-sub.one{grid-template-columns:1fr}
.dlv-fields .wide{grid-column:1/-1}

/* Парные поля в модалках (период/даты/лимит) */
.modal-body .two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Кнопки-чипы «Выбрать все / Снять все» в метке мультиселекта */
.modal-body .fld > label.lbl-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mini-actions{display:flex;gap:6px;flex:none}
.mini-link{font-size:11px;font-weight:600;color:var(--primary);cursor:pointer;text-decoration:none;border:1px solid var(--primary);border-radius:6px;padding:2px 8px;background:#fff;text-transform:none;letter-spacing:0}
.mini-link:hover{background:#e9f7f5}

/* День-месяц календарь (период сезона; год не важен) */
.dmp{position:relative}
.dmp>input{width:100%;cursor:pointer;background:#fff}
.dmp-cal{position:absolute;z-index:1100;top:calc(100% + 4px);left:0;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.16);padding:10px;width:238px;display:none}
.dmp-cal.open{display:block}
.dmp-head{display:flex;align-items:center;justify-content:space-between;font-weight:600;margin-bottom:8px;color:var(--ink)}
.dmp-head button{border:none;background:#f1f3f7;border-radius:6px;width:26px;height:26px;cursor:pointer;font-size:16px;color:var(--ink);line-height:1}
.dmp-wd{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;color:var(--muted);font-size:11px;text-align:center;margin-bottom:4px}
.dmp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dmp-grid>span{height:28px}
.dmp-day{border:none;background:none;border-radius:6px;height:28px;cursor:pointer;font:inherit;color:var(--ink)}
.dmp-day:hover:not(:disabled){background:#e9f7f5}
.dmp-day.sel{background:var(--primary);color:#fff}
.dmp-day:disabled{color:#cbd2df;cursor:default}

/* Ползунок процента скидки/наценки (−100…+500) + поле справа */
.pct{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.pct-slider{-webkit-appearance:none;appearance:none;height:6px;border-radius:6px;background:#e3e7ef;outline:none;cursor:pointer}
.pct-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--primary);cursor:pointer}
.pct-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--primary);cursor:pointer}
.pct-out{width:62px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;text-align:center;color:var(--ink);background:#fff}
.pct-valwrap{display:flex;align-items:center;gap:7px}
.pct-suffix{font-weight:600;color:var(--ink);font-size:14px}
.unit-row{display:flex;align-items:center;gap:8px}
.unit-row input{flex:1;min-width:0;width:auto}
.unit{font-weight:600;color:var(--ink);white-space:nowrap;font-size:14px}

/* «Выбрать все / Снять все» внутри выпадашки группового мультиселекта */
.cs-actions{display:flex;gap:6px;padding:8px;border-bottom:1px solid var(--line)}
.cs-actions button{flex:1;font-size:11px;font-weight:600;color:var(--primary);background:#fff;border:1px solid var(--primary);border-radius:6px;padding:5px 8px;cursor:pointer;font-family:inherit}
.cs-actions button:hover{background:#e9f7f5}

/* §4 «Оборудование и Страховки»: иконки (набор оригинала, тил #12a594), пикер иконок, замок дефолтной страховки */
/* Значок позиции §4 — ГЛИФ шрифта fico (#232), а не svg: размер задаёт font-size (его ставит
   ficoIcon), цвет — color. Прежние stroke/fill/width на глиф не действуют вовсе, и значок
   получался цветом текста вместо тила. */
.set-table .ico{color:var(--primary)}
.set-table .ico-cell{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:7px;background:#e9f7f5}
.icon-pick{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.icon-pick .ico-sw{width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer;display:grid;place-items:center;color:var(--muted);font-size:16px;transition:.12s}
.icon-pick .ico-sw:hover{border-color:var(--primary)}
.icon-pick .ico-sw.sel{border-color:var(--primary);box-shadow:0 0 0 2px rgba(18,165,148,.18);background:#e9f7f5}
.icon-pick .ico-sw .ico{color:var(--primary)}
.set-table .racts .del-lock{color:#b8c0d0;display:grid;place-items:center;cursor:help}
.set-table .racts .del-lock svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9}

/* ═══════════════ §5 M2 Движок шаблонов документов (doc-editor.js) ═══════════════ */
/* Полноэкранный оверлей поверх модалок (.modal-ov z-index:1000). Namespaced .doc-*; чипы токенов — .tvar. */
.doc-editor{position:fixed;inset:0;z-index:1200;display:none;background:rgba(30,34,45,.55);padding:2.4vh 2vw}
.doc-editor.open{display:flex}
.doc-editor-panel{background:var(--card);border-radius:14px;box-shadow:0 24px 60px rgba(20,30,60,.32);display:flex;flex-direction:column;width:100%;max-width:1080px;margin:auto;max-height:95.2vh;overflow:hidden}
.doc-editor-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
.doc-editor-title{font-size:16px;font-weight:700;margin:0;color:var(--ink)}
.doc-editor-x{border:none;background:transparent;font-size:26px;line-height:1;color:var(--muted);cursor:pointer;padding:0 6px}
.doc-editor-x:hover{color:var(--brand)}
.doc-editor-body{display:flex;flex:1;min-height:0}
.doc-rubricator{width:210px;flex:0 0 210px;border-right:1px solid var(--line);background:#fafbfd;overflow:auto;padding:10px 8px}
.doc-rub-cap{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);padding:6px 10px}
.doc-rub-list{list-style:none;margin:0;padding:0}
.doc-rub-list li{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:9px 10px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--ink)}
.doc-rub-list li:hover{background:#eef7f5}
.doc-rub-list li.active{background:var(--primary);color:#fff}
.doc-rub-ver{font-size:10px;font-weight:700;color:var(--muted);background:#eef0f6;border-radius:5px;padding:1px 5px;white-space:nowrap}
.doc-rub-ver.seed{color:#8a6d00;background:#fff3cf}
.doc-rub-list li.active .doc-rub-ver{background:rgba(255,255,255,.25);color:#fff}
.doc-editor-main{flex:1;display:flex;flex-direction:column;min-width:0}
.doc-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:3px;padding:8px 10px;background:#f7f8fb;border-bottom:1px solid var(--line)}
.doc-tb{min-width:30px;height:30px;padding:0 8px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--ink);font:inherit;font-size:13px;cursor:pointer;display:inline-grid;place-items:center}
.doc-tb:hover{background:#e9edf4;border-color:var(--line)}
.doc-tb-sep{width:1px;height:20px;background:var(--line);margin:0 4px}
.doc-tb-spacer{flex:1}
.doc-var-wrap{position:relative}
.doc-varbtn{height:30px;padding:0 12px;border:1px solid var(--primary);border-radius:7px;background:#fff;color:var(--primary);font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.doc-varbtn:hover{background:var(--primary);color:#fff}
.doc-varmenu{display:none;position:absolute;right:0;top:calc(100% + 5px);z-index:20;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 28px rgba(20,30,60,.18);padding:6px;min-width:230px;max-height:360px;overflow:auto}
.doc-varmenu.open{display:block}
.doc-var-cur{font-size:12px;color:var(--muted);padding:6px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.doc-var-cur b{color:var(--primary)}
.doc-var-grp{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);padding:8px 10px 4px}
.doc-varitem{display:block;width:100%;text-align:left;padding:7px 10px;border:none;background:transparent;border-radius:7px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer}
.doc-varitem:hover{background:#eef7f5;color:var(--primary)}
.doc-var-empty{padding:12px;color:var(--muted);font-size:13px}
.doc-canvas{flex:1;overflow:auto;padding:22px 26px;font-size:13.5px;line-height:1.6;color:var(--ink);background:#fff;outline:none}
.doc-canvas:focus{box-shadow:inset 0 0 0 2px rgba(18,165,148,.14)}
.doc-canvas h3{font-size:15px;font-weight:700;margin:16px 0 10px}
.doc-canvas .doc-band{background:#1f4e79;color:#fff;font-weight:700}
.doc-canvas h3.doc-band{padding:6px 11px;border-radius:3px;margin:16px 0 8px}
.doc-canvas table.doc-cols{width:100%;border-collapse:collapse;margin:0}
.doc-canvas table.doc-cols>tbody>tr>td{vertical-align:top;padding:0 14px 0 0}
.doc-canvas table.doc-cols>tbody>tr>td:last-child{padding-right:0;padding-left:14px;border-left:1px solid var(--line)}
.doc-canvas p{margin:0 0 9px}
.doc-canvas ul,.doc-canvas ol{margin:0 0 10px;padding-left:22px}
.doc-canvas ol.doc-terms li{margin-bottom:8px}
.doc-canvas a{color:var(--primary)}
.doc-canvas .doc-loading{color:var(--muted)}
/* раскладка seed-тел (шапка/таблицы-реквизиты/схема повреждений/подписи) */
.doc-canvas .doc-head{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:12px}
.doc-canvas .doc-brand{font-size:15px}
.doc-canvas .doc-hcenter{flex:1;text-align:center;font-size:12px;line-height:1.35;color:var(--ink)}
.doc-canvas .doc-tags{text-align:right;font-size:11px;font-style:italic;letter-spacing:.02em;color:var(--ink);white-space:nowrap}
.doc-canvas .doc-slogan,.doc-canvas .doc-note{color:var(--muted);font-size:12px}
.doc-canvas .doc-contacts{text-align:right;font-size:12px;color:var(--ink)}
.doc-canvas .doc-cline{display:block}
.doc-canvas .doc-cline:empty{display:none}
.doc-canvas .doc-c:empty{display:none}
.doc-canvas .doc-c:not(:empty) + .doc-c:not(:empty)::before{content:" · "}
.doc-canvas .doc-creg:not(:empty)::before{content:"Company Reg. No. "}
.doc-canvas .doc-cvat:not(:empty)::before{content:"V.A.T./T.I.C. No. "}
.doc-canvas .doc-titlebar{display:flex;align-items:stretch;gap:8px;margin:0 0 12px}
.doc-canvas .doc-tb-main{display:flex;gap:2px}
.doc-canvas .doc-tb-name{display:flex;align-items:center;min-width:150px;padding:8px 12px;font-size:14px}
.doc-canvas .doc-tb-title{display:flex;align-items:center;min-width:210px;padding:8px 12px;font-size:14px;letter-spacing:.03em}
.doc-canvas .doc-tb-reg{display:flex;flex-direction:column;justify-content:center;margin-left:auto;padding:6px 12px;font-size:11px;line-height:1.35;white-space:nowrap}
.doc-canvas .doc-line{margin:0 0 5px}
.doc-canvas .doc-bl{display:inline-block;border-bottom:1px solid var(--muted);min-width:70px;height:.9em;vertical-align:-2px}
.doc-canvas .doc-frow{display:flex;gap:16px;margin:0 0 6px;align-items:baseline}
.doc-canvas .doc-fld{display:flex;flex:1;align-items:baseline;gap:6px;min-width:0}
.doc-canvas .doc-fld>b{white-space:nowrap}
.doc-canvas .doc-fld .doc-bl{flex:1;min-width:28px}
.doc-canvas table.doc-params{width:100%;border-collapse:collapse;margin:0 0 8px}
.doc-canvas .doc-params-label{width:120px;padding:8px 10px;font-size:12px;vertical-align:middle;border-radius:3px}
.doc-canvas .doc-params-body{padding:2px 0 2px 12px;vertical-align:middle;font-size:12px;line-height:1.6}
.doc-canvas .doc-sum{margin:0 0 6px;line-height:1.9}
.doc-canvas .doc-total{margin:6px 0 0;font-size:13.5px}
.doc-canvas table.doc-grid{width:100%;border-collapse:collapse;margin:0 0 12px;font-size:12.5px}
.doc-canvas table.doc-grid td{border:1px solid var(--line);padding:5px 8px;vertical-align:top}
.doc-canvas table.doc-grid thead td{background:#1f4e79;color:#fff;font-weight:700}
.doc-canvas .doc-damagemap{border:1.5px dashed #c4ccdb;border-radius:10px;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted);margin:12px 0;font-size:13px;font-weight:600}
.doc-canvas .doc-damagemap svg{max-width:100%;height:auto;max-height:340px}
.doc-canvas .doc-scheme-sm{min-height:0;margin:6px 0;padding:4px}
.doc-canvas .doc-scheme-sm svg{max-height:240px}
.doc-canvas .doc-sign{margin-top:14px;font-size:12.5px}
.doc-canvas .doc-sign-company{margin-top:16px;border-top:1px solid #d0d0d0;padding-top:10px;font-weight:600}
.doc-canvas .doc-sign-img{max-height:44px;max-width:220px;vertical-align:middle;margin:0 6px}
.doc-canvas hr.doc-pagebreak{border:none;border-top:2px dashed var(--line);margin:22px 0}
.doc-editor-foot{display:flex;align-items:center;gap:14px;padding:12px 18px;border-top:1px solid var(--line)}
.doc-ver{font-size:12.5px;color:var(--muted)}
.doc-ver.seed{color:#8a6d00}
.doc-toast{font-size:13px;font-weight:600;opacity:0;transition:opacity .2s}
.doc-toast.show{opacity:1}
.doc-toast.ok{color:var(--primary)}
.doc-toast.err{color:var(--brand)}
.doc-editor-foot .doc-pdf{margin-left:auto}
.doc-editor-foot .doc-save{margin-left:10px}
@media (max-width:720px){.doc-rubricator{width:150px;flex-basis:150px}.doc-editor-panel{max-width:100%}}

/* Мега-меню навигации (#nav-megamenu) — панель подпунктов под верхним пунктом */
.nav-item{position:relative;display:inline-flex}
.nav-item>a{position:relative;cursor:default} /* FIX-5: родитель с подменю не кликабелен */
.nav-sub{position:absolute;top:100%;left:0;min-width:172px;background:var(--card);border:1px solid var(--line);border-radius:0 10px 10px 10px;box-shadow:0 12px 28px rgba(20,30,60,.16);padding:6px;display:none;flex-direction:column;gap:2px;z-index:40}
.nav-item.open>.nav-sub{display:flex}
.nav-item.open>a{background:var(--card);border-radius:14px 14px 0 0;color:var(--primary)}
.nav-item.open>a svg{stroke:var(--primary)}
.nav-item.open>a .chev{transform:rotate(180deg)}
.nav-sub-a{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:8px;font-size:13.5px;color:var(--ink);text-decoration:none;white-space:nowrap}
.nav-sub-a svg{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:1.9}
.nav-sub-a:hover{background:#f2f4f8}
.nav-sub-a.sel{color:var(--primary);font-weight:600}
.nav-sub-a.sel svg{stroke:var(--primary)}
@media (max-width:1000px){.nav-item{display:block}.nav-sub{position:static;display:none;box-shadow:none;border:0;border-radius:0;padding:2px 0 2px 22px;min-width:0}.nav-item.open>.nav-sub{display:flex}}

/* Модалка карты (#198): режим «во весь экран» — кнопка в шапке модалки.
   Диалог растягивается на всё окно, карта занимает всю высоту минус шапка и подписи. */
.crs-map-ov.full .modal-dlg{max-width:none!important;width:100vw;height:100vh;border-radius:0;margin:0}
.crs-map-ov.full .modal-body{border-radius:0!important}
.crs-map-ov.full .veh-map-canvas{height:calc(100vh - 190px)}

/* ── Общие блоки карточек (#219) ───────────────────────────────────────────────────────────────
   Эти правила лежали ОДИНАКОВЫМИ копиями в vehicle.html и client.html; страница заведения авто
   стала третьим потребителем — держим их в одном месте, чтобы карточка, клиент и мастер не
   разъезжались по вёрстке одних и тех же строк «название/значение». */
.cl-row{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));gap:12px 28px}
.cl-kv .k{font-size:12px;color:var(--muted)}
.cl-kv .v{font-weight:600;margin-top:2px;overflow-wrap:anywhere}
/* Телефон: три колонки по 120px + отступы шире карточки (310px на 390px экрана) — правый столбец
   («WhatsApp», длинный e-mail) уезжал за край. Два столбца помещаются и на 390px. */
@media (max-width:640px){
  .cl-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
}
.cl-empty{text-align:center;color:var(--muted);padding:36px 12px}
/* Полоса вкладок карточки (#435). Те же четыре правила лежали копиями в vehicle.html и
   client.html, а компонент, который их рисует, — ОБЩИЙ (fmt.js cardPanel): страница наряда стала
   третьим потребителем, и держать вид вкладок в <style> каждой страницы больше нельзя — на
   странице без копии вкладки остались бы голыми кнопками. */
.cl-tabs{display:flex;gap:20px;border-bottom:1px solid var(--line);padding:0 4px;flex-wrap:wrap}
.cl-tab{padding:12px 2px;font-weight:600;color:var(--muted);cursor:pointer;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;font-size:14px}
.cl-tab.on{color:var(--primary);border-bottom:2px solid var(--primary)}
.cl-tabbody{padding-top:16px}
/* Счётчик у названия вкладки («Плановые 3» эталона): число рядом с подписью, а не вместо неё. */
.cl-tab-n{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:9px;background:var(--line);color:var(--muted);font-size:11px;font-weight:700}
.cl-tab.on .cl-tab-n{background:var(--primary);color:#fff}
/* Счётчика нет (данные ещё не приехали или ручка не ответила) — нет и пустой капсулы: пустой
   кружок рядом с подписью читался бы как «ноль». */
.cl-tab-n:empty{display:none}
/* Состояние «данные не загрузились» (A15/A16): текст отказа + «Повторить». Один класс на все
   места — строки реестра и тело виджета дашборда: пустой экран и «Ничего не найдено» оператор
   читает как факт, а отказ бэкенда фактом не является. Компонент — CRSfmt.tableError/blockError. */
.load-err{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;color:var(--muted);padding:28px 12px}
.load-err .btn{padding:9px 16px}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 auto;border:0;border-radius:6px;background:none;color:var(--muted);cursor:pointer;padding:0;line-height:1}
.iconbtn:hover{background:var(--line);color:var(--ink)}
.veh-cf-del:hover{color:var(--red)}
.linklike:hover{text-decoration:none!important}
/* Модалка карточек (эталон gps-location-show / gps-show-history) — разметку даёт CRSfmt.modal(). */
.gps-ov{position:fixed;inset:0;background:rgba(20,30,60,.45);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}
.gps-modal{background:var(--card);border-radius:14px;width:100%;box-shadow:0 20px 60px rgba(20,30,60,.3);overflow:hidden;display:flex;flex-direction:column;max-height:90vh}
.gps-mhead{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
.gps-mhead b{font-size:16px}
.gps-x{border:0;background:none;font-size:18px;cursor:pointer;color:var(--muted);line-height:1}
.gps-mbody{padding:16px 18px;overflow:auto}
.gps-mbody .leaflet-container{font:inherit}

/* Мастер заведения авто — гармошка из четырёх шагов (#219, эталон vehicle/vehicle/create).
   Нумерованные заголовки, раскрытый шаг подсвечен; цвета — токены палитры, своих нет. */
.wz-step{border-bottom:1px solid var(--line)}
.wz-step:last-of-type{border-bottom:0}
.wz-head{display:flex;align-items:center;gap:14px;width:100%;background:none;border:0;padding:22px 24px;cursor:pointer;text-align:left}
.wz-num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
  background:var(--line);color:var(--muted);font-weight:700;font-size:14px;flex:none}
.wz-title{font-size:16px;font-weight:700;color:var(--muted)}
.wz-open>.wz-head .wz-num{background:var(--primary);color:#fff}
.wz-open>.wz-head .wz-title{color:var(--primary)}
.wz-body{display:none;padding:0 24px 24px}
.wz-open>.wz-body{display:block}
.wz-foot{display:flex;align-items:center;gap:10px;padding:20px 24px;border-top:1px solid var(--line)}
.wz-foot .nf-err{color:var(--red);font-size:13px;margin-right:auto;min-height:18px}
.wz-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 18px}
.wz-fld{display:flex;flex-direction:column;gap:5px;min-width:0}
/* Свой display сильнее правила браузера для [hidden] — иначе скрытое поле (напр. «Компания»
   у физлица) остаётся видимым. Та же оговорка, что у .chip .chip-cnt[hidden]. */
.wz-fld[hidden]{display:none}
/* Кружок-образец цвета в общей выпадашке (.cs): и в списке, и в свёрнутом состоянии. */
/* Распознавание документа при заведении клиента (#253): подсказка над формой и пометка полей,
   которые заполнила машина, — оператор должен видеть, что не он это вводил. */
.cl-docscan-hint{font-size:13px;color:var(--muted);margin:0 0 16px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--card)}
.cl-docscan-hint.busy{color:var(--primary);border-color:var(--primary)}
.cl-docscan-hint.ok{color:var(--primary);border-color:var(--primary)}
.cl-docscan-hint.bad{color:var(--red);border-color:var(--red)}
.wz-fld.from-doc>label::after{content:attr(data-doc-mark);margin-left:6px;font-size:11px;font-weight:600;color:var(--primary)}

/* ── Редактор контакта — ОБЩИЙ блок кабинета (window.crsCustomerEditor, shell.js) ──────────────
   Ряды полей эталона: аватар+имя/фамилия/пол/дата, адрес шестью колонками, контакты, документы.
   Стили лежат ЗДЕСЬ, а не в client.html: ту же форму раскрывает карточка брони (#340), и вторая
   копия раскладки разъехалась бы с первой. Само поле рисует общий .wz-fld (выше). */
.cl-form h3{margin:0 0 14px;font-size:15px}
.cl-av{width:150px;height:150px;border-radius:50%;flex:none;font-size:44px;font-weight:700;display:flex;align-items:center;justify-content:center;background:var(--line);color:var(--muted)}
/* Превью скана документа: размер эталона 80x60, клик открывает лайтбокс-галерею (#181). */
.cl-doc-ph{width:80px;height:60px;object-fit:cover;border-radius:4px;border:1px solid var(--line);cursor:zoom-in;display:block}
.cl-frow{display:grid;gap:14px 20px;align-items:end;margin-bottom:16px}
.cl-frow-head{grid-template-columns:150px repeat(4,minmax(120px,1fr))}
.cl-frow-6{grid-template-columns:repeat(6,minmax(110px,1fr))}
.cl-frow-3{grid-template-columns:repeat(3,minmax(160px,1fr))}
.cl-frow-1{grid-template-columns:1fr}
.cl-frow-doc{grid-template-columns:repeat(4,minmax(140px,1fr)) 30px}
/* Мессенджер: тип + хэндл встают под E-mail/Телефоном (две колонки из трёх), «×» — третьей. */
.cl-rep{display:grid;grid-template-columns:minmax(140px,1fr) minmax(160px,1fr) 30px;gap:14px 20px;align-items:end;margin-bottom:10px;max-width:67%}
/* Телефон: жёсткие колонки строк под-формы (140px×N + 30px под «×») шире экрана — «×» и правое
   поле уезжали за край. Разрешаем колонкам сжиматься и убираем нижний порог ширины. */
@media (max-width:640px){
  .cl-frow-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cl-frow-6,.cl-frow-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cl-frow-doc{grid-template-columns:repeat(2,minmax(0,1fr)) 30px}
  .cl-frow{gap:12px}
  .cl-rep{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 30px;max-width:100%;gap:12px}
}
/* Документ — вложенный блок: линия-«ветка» слева, как в остальных карточках кабинета. */
.cl-doc{border-left:2px solid var(--line);padding-left:14px;margin:0 0 16px}
/* «Документы» ПЕРВЫМ блоком под-формы контакта в брони (#343, осознанное отличие от эталона):
   документ грузят первым, распознавание заполняет остальное. Отделяем блок чертой — сверху
   грузят, ниже проверяют, и это разные шаги. */
.cl-docs-first{margin-bottom:18px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.cl-scans{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cl-scan{position:relative;display:inline-block}
.cl-scan .iconbtn{position:absolute;top:-9px;right:-9px;width:20px;height:20px;background:var(--card);border:1px solid var(--line);border-radius:50%}
/* Скан без изображения (файл импорта лежит внешней ссылкой, байтов у нас нет): на месте миниатюры
   та же скрепка, что печатает таблица документов карточки, — плитка нужна ради «×». */
.cl-scan-nopic{display:flex;align-items:center;justify-content:center;cursor:default;color:var(--muted)}
.cl-avbox{position:relative;width:110px}
.cl-av-sm{width:110px;height:110px;font-size:34px}
.cl-avacts{position:absolute;left:50%;transform:translateX(-50%);bottom:-8px;display:flex;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:9px;padding:1px}
/* Кнопка сохранения — одна и по центру (в эталоне других кнопок в форме нет). */
.cl-formacts{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:22px}
@media(max-width:1100px){
  .cl-frow-head{grid-template-columns:150px repeat(2,minmax(120px,1fr))}
  .cl-frow-6{grid-template-columns:repeat(3,minmax(120px,1fr))}
  .cl-frow-doc{grid-template-columns:repeat(2,minmax(140px,1fr)) 30px}
}
@media(max-width:640px){
  .cl-frow-head{grid-template-columns:110px 1fr}
  .cl-frow-6,.cl-frow-3{grid-template-columns:repeat(2,minmax(110px,1fr))}
  .cl-rep{max-width:100%}
}
.cs-sw{width:12px;height:12px;border-radius:50%;border:1px solid var(--line);display:inline-block;flex:none;margin-right:8px;vertical-align:-1px}
.wz-fld label{font-size:12px;color:var(--muted);font-weight:600}
.wz-fld input,.wz-fld select,.wz-fld textarea{border:1px solid var(--line);background:var(--card);border-radius:9px;padding:10px 12px;font-size:14px;color:var(--ink);width:100%;font-family:inherit}
.wz-opts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 18px;margin-top:22px}
.wz-opt{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--ink)}
.wz-next{margin-top:22px}
/* ── Загрузчик фотографий (#241) ─────────────────────────────────────────────────────────────
   ОДИН компонент на весь кабинет — как в эталоне, где .rs-uploader переиспользован формой авто,
   модалкой состояния и подписью, а экран меняет только размер (модификаторы --xs/--sm/--lg) и
   стиль рамки. Своей копии на странице заводить нельзя: карточка #241 прямо требует «тот же
   аплоадер, что в карточке; не заводить второй».
   Геометрия снята с эталона (.rs-uploader__input / .rs-preview-thumb): зона 200x140, СПЛОШНАЯ
   рамка 2px, радиус 10, значок фото 42px и подпись под ним; плитка превью того же размера,
   кнопка удаления — белый кружок 19x19 ВНУТРИ плитки, краснеет по наведению. */
.up-sub{margin:26px 0 12px;font-size:16px;font-weight:700;color:var(--ink)}
.up-row{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.up-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;
  width:200px;height:140px;border:2px solid var(--line);border-radius:10px;cursor:pointer;
  color:var(--muted);font-size:14px;font-weight:500;text-align:center}
.up-drop:hover,.up-drop.on{border-color:var(--primary);color:var(--primary)}
.up-drop .fico{font-size:42px}
.up-drop .fico + span{display:block;width:100%;padding-top:10px}
.up-drop input[type=file]{display:none}
.up-thumbs{display:flex;gap:10px;flex-wrap:wrap}
.up-thumb{position:relative;width:200px;height:140px;border-radius:10px;border:1px solid var(--line);
  background:var(--line) center/cover no-repeat}
/* Кнопка-корона «сделать главным» — как у эталона (rs-preview-thumb__btn-primary, fico-crown);
   выбранная плитка обводится основным цветом, чтобы главное фото было видно без наведения. */
.up-thumb__primary{position:absolute;top:5px;left:5px;width:19px;height:19px;border-radius:50%;border:0;
  background:#fff;color:var(--muted);display:grid;place-items:center;cursor:pointer;font-size:11px;padding:0}
.up-thumb__primary:hover{color:var(--primary)}
.up-thumb.is-primary{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary) inset}
.up-thumb.is-primary .up-thumb__primary{color:var(--primary)}
.up-thumb__rm{position:absolute;top:5px;right:5px;width:19px;height:19px;border-radius:50%;border:0;
  display:flex;align-items:center;justify-content:center;background:#fff;cursor:pointer;padding:0}
.up-thumb__rm .fico{font-size:11px;color:var(--muted)}
.up-thumb__rm:hover{background:var(--red)}
.up-thumb__rm:hover .fico{color:#fff}
@media(max-width:1100px){.wz-grid,.wz-opts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.wz-grid,.wz-opts{grid-template-columns:1fr}}

/* Окно комментариев заказа (план дня): три строки «подпись — заголовок — текст», как у эталона
   (Loc 1 / Loc 2 / General). Подпись — узкой колонкой слева, чтобы тексты выстроились в столбец. */
.pl-cmt{display:grid;grid-template-columns:104px 1fr;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line)}
.pl-cmt:last-child{border-bottom:0}
.pl-cmt-lbl{color:var(--ink);white-space:nowrap}
.pl-cmt-text{color:var(--muted);white-space:pre-wrap;line-height:1.5}
.pl-cmt-text b{color:var(--ink)}

/* ── Карточка заказа: общие блоки ─────────────────────────────────────────────────────────────
   Раскладка «содержимое + панель Итог», строки панели, сворачиваемые блоки и кнопки действий.
   Жили в <style> карточки заказа, пока страница была одна; их же слово в слово потребовала
   страница «Проверить заказ», поэтому правила переехали сюда — вторая копия неизбежно разъехалась
   бы с первой. Порядок правил сохранён (кнопки идут после .btn:disabled из шапки файла). */
.ord-grid{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
@media (max-width:900px){.ord-grid{grid-template-columns:1fr}}
.ord-summary{position:sticky;top:18px;padding:0;overflow:hidden}
.ord-summary .sum-head{background:var(--primary);color:#fff;padding:12px 16px;font-weight:700;display:flex;align-items:center;justify-content:space-between}
.ord-summary .sum-body{padding:6px 16px 14px}
.ord-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.ord-row:last-child{border-bottom:0}
.ord-row .k{color:var(--muted)}
.ord-row .v{font-weight:600;font-variant-numeric:tabular-nums}
.ord-row.strong{font-size:15px}
.ord-row.strong .v{color:var(--primary);font-weight:800}
.ord-block{padding:16px}
.ord-block h3{margin:0 0 12px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
/* R8: основное действие — сплошной бирюзовый бренд; деструктив тише (контур), не кричит */
/* Просьба владельца: у главных кнопок кабинета («Далее», «Сохранить изменения», «Проверить бронь»,
   «Сохранить цену», «Проверить», «Готово») НЕТ заливки — только зелёная обводка. Заливку держим
   лишь там, где кнопка подтверждает необратимое действие в диалоге (.cdlg-yes / .btn.fill). */
.btn.primary{background:#fff;color:var(--primary);border-color:var(--primary)}
.btn.primary:hover{background:#f2fbf9}
.btn.danger{background:#fff;color:#b8322f;box-shadow:inset 0 0 0 1.5px #e3b6b4}
.btn.danger:hover{background:#fdf4f3}
.btn:disabled{opacity:.55;pointer-events:none}
/* OC-5/6/7: сворачиваемые блоки (как в эталоне — чек + иконка + primary/secondary + шеврон) */
/* Отступ РАЗДЕЛЯЕТ свёрнутые секции, поэтому у первой его быть не должно: из-за него левая колонка
   начиналась на 14 px ниже панели «Итог», и две колонки не сходились по верхней кромке. */
.ord-coll{padding:0;margin-top:14px}
.ord-grid>div>.ord-coll:first-child{margin-top:0}
.coll-head{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;border-radius:16px}
.coll-head:hover{background:rgba(18,165,148,.04)}
.coll-check{width:22px;height:22px;flex:none;border-radius:50%;background:#1f9d46;color:#fff;display:inline-flex;align-items:center;justify-content:center}
.coll-check svg{width:13px;height:13px}
.coll-check.off{background:var(--line)}
/* Обязательный и незаполненный раздел карточки заказа — красный «!» вместо серого кружка. */
.coll-check.warn{background:#e53935;font:700 14px/1 var(--font, inherit);color:#fff}
.coll-ic{width:22px;height:22px;flex:none;color:var(--muted)}
.coll-av{width:30px;height:30px;font-size:12px;flex:none}
.coll-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.coll-main>b{font-size:14px}
.coll-sub{font-size:12.5px;color:var(--muted)}
.coll-chev{width:18px;height:18px;flex:none;color:var(--muted);transition:transform .15s}
.ord-coll.open .coll-chev{transform:rotate(180deg)}
.coll-body{display:none;padding:2px 16px 14px}
.ord-coll.open .coll-body{display:block;border-top:1px solid var(--line)}
/* OC-4: Summary — под-карточка авто + секции */
.sum-veh{background:rgba(18,165,148,.06);border-radius:12px;padding:2px 12px;margin:4px 0 8px}
.sum-veh-h{font-weight:700;padding:9px 0 2px;color:var(--primary);font-size:13px}
/* «Доставка», «Доп. услуги», «Налоги» — НАЗВАНИЯ РАЗДЕЛОВ калькулятора, а не подписи строк:
   у эталона они крупнее строк и отделены отчерком от предыдущего блока. Первый заголовок в блоке
   деталей отчерка не получает — над ним и так граница подложки. Кегль — просьба владельца (#350):
   раздел должен читаться не тише суммы строки, поэтому берём её же размер (16px), а не средний. */
.sum-sec{font-weight:700;font-size:16px;padding:14px 0 4px;margin-top:10px;color:var(--ink);
         border-top:1px solid rgba(43,50,64,.10)}
.sum-details-body > .sum-sec:first-child{margin-top:0;border-top:0}
/* «Исправленная цена» принадлежит СВОЕЙ строке — вплотную под ней, без отступа между ними.
   Подпись — обычным текстом строки: тот же кегль, вес и цвет, что у марки и модели машины
   (.ord-row 14px / 400 / --ink), потому что это про деньги брони, а не служебная подстрока. */
.ord-row.sum-custom{margin-top:-8px;padding-top:0}
.ord-row.sum-custom .k{color:var(--ink);font-size:14px;font-weight:400}
/* …но когда между строкой и её «Исправленной ценой» стоит НДС, подтяжка вверх приклеивает цену к
   налогу, и читается это как «налог = столько-то» (просьба владельца, #350). После подстроки
   возвращаем строке обычный отступ — цена отделена от НДС. */
.ord-row.sub + .ord-row.sum-custom{margin-top:0;padding-top:9px}
/* .sum-small — ВСПОМОГАТЕЛЬНОЕ число строки (ставка за единицу, факт там, где прайса нет): мельче
   и тише суммы. Насыщенность задаём принудительно: у значения строки она 600-700, а у вложенного
   span — 400, и числа одного ряда выглядели набранными по-разному. */
.sum-small{font-size:12.5px;color:var(--muted);font-weight:400}
/* РАЗМЕРЫ СНЯТЫ С ЭТАЛОНА (computed style, бронь 2776041, #350): фактическая сумма строки — 16px
   жирным, вспомогательные числа (ставка за единицу, НДС, «исправленная цена» внутри доставки) —
   12px, у НДС и подпись, и сумма светлее прочих. Прошлая правка уравняла все цифры мелкими и
   серыми — это было неверно. */
.ord-summary .sum-veh .ord-row .v,
.ord-summary .sum-veh .ord-row .v b{font-size:16px;font-weight:700;color:var(--ink)}
.ord-summary .sum-veh .sum-small{font-size:12px;font-weight:400;color:var(--ink)}
/* Зачёркнутый прайс и «Исправленная цена» — ОДНА пара чисел: размер, вес и цвет у них общие (те же
   16px/700/--ink, что у суммы строки), различие ТОЛЬКО чертой (просьба владельца, #350). Держим их
   одним объявлением: порознь они уже разъезжались по кеглю и цвету. */
.ord-summary .sum-veh .sum-strike,
.ord-summary .sum-veh .ord-row.sum-custom .v{font-size:16px;font-weight:700;color:var(--ink)}
/* НДС — самая тихая строка блока: и подпись, и сумма светлее и мельче. */
.ord-summary .sum-veh .ord-row.sub .k,
.ord-summary .sum-veh .ord-row.sub .v{font-size:12px;color:var(--muted)}
.ord-summary .sum-veh .ord-row.sub .v{font-weight:700}
/* «Исправленная цена»: у машины это ГЛАВНАЯ сумма строки (16px жирным — задана парой выше), а
   внутри доставки — уточнение к ноге, и там она мельче. Разница снята с эталона: €515.00 крупно у
   машины, €0.00 мелко у ноги доставки. */
.ord-summary .sum-details-body > .ord-row.sum-custom .v{font-size:12px;font-weight:700}
.ord-summary .sum-details-body > .ord-row.sum-custom .k{font-size:12px;color:var(--muted)}
/* Те же размеры — у строк доставки, допов, страховки и налогов: сумма 16px жирным, вспомогательные
   числа (ставка, процент, НДС позиции) 12px, НДС светлее. Один замер эталона на все строки блока. */
.ord-summary .sum-details-body .ord-row .v,
.ord-summary .sum-details-body .ord-row .v b{font-size:16px;font-weight:700;color:var(--ink)}
.ord-summary .sum-details-body .ord-row .v .sum-small,
.ord-summary .sum-details-body .ord-row .v .sum-pct{font-size:12px;font-weight:400;color:var(--ink)}
.ord-summary .sum-details-body .ord-row.sub .k,
.ord-summary .sum-details-body .ord-row.sub .v{font-size:12px;color:var(--muted)}
.ord-summary .sum-details-body .ord-row.sub .v{font-weight:700}
/* Подстрока позиции (НДС, тариф) ПРИЛЕГАЕТ к своей строке: у эталона «VAT €4.79» стоит вплотную
   под своей услугой, а у нас между ними был такой же отступ, как между разными услугами — и было
   непонятно, к чему относится налог. Тот же приём уже применён к «Исправленной цене». */
.ord-summary .sum-details-body .ord-row.sub{margin-top:-10px;padding-top:0}
/* …но у строки МАШИНЫ правая часть двухэтажная («€33,78 / День»), и та же подтяжка сажала НДС
   вплотную под знаменатель — налог читался как часть тарифа. У эталона между «Tariff» и «VAT»
   25px: возвращаем налогу машины обычный отступ (просьба владельца). */
.ord-summary .sum-veh .ord-row.sub{margin-top:0;padding-top:6px}
/* Панель «Итог» по структуре эталона (docs/pages/order-summary-compare.md), оформление НАШЕ:
   зачёркнутый прайс — обычный line-through, без цветов RentSyst. Ничего, кроме черты, здесь не
   задаём: кегль, вес и цвет старая цена берёт от своей строки — тогда она по определению совпадает
   с новой, где бы пара ни стояла (машина, депозит, франшиза). */
.sum-strike{text-decoration:line-through}
/* Пара «старая/новая цена» на всю панель: у зачёркнутого прайса и у «Исправленной цены» один вес и
   цвет, размер обе берут от своей строки (вне разбора — «Депозит» и «Франшиза», 14px). Это
   ФАКТИЧЕСКАЯ сумма брони, поэтому темнее и жирнее обычной подстроки .sub. Порознь они разъезжались:
   старая шла весом строки (600) приглушённой, новая — 700 тёмной, и владелец читал разные шрифты. */
.ord-summary .ord-row .v .sum-strike,
.ord-summary .ord-row.sum-custom .v{color:var(--ink);font-weight:700}
/* .sub — служебная подстрока позиции (единица тарификации, налог позиции): мельче и приглушена,
   без разделителя, чтобы визуально принадлежать строке выше. */
.ord-row.sub{padding:4px 0;border-bottom:0;font-size:12.5px}
.ord-row.sub .v{font-weight:500;color:var(--muted)}
.sum-pct{font-size:12px;color:var(--muted);font-weight:400}
.sum-actions{display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px 14px;border-top:1px solid var(--line)}
.sum-actions .btn{padding:8px 14px;font-size:13px}
/* Модалка «Изменить цены брони» (docs/pages/custom-price.md): селект строки, поле цены,
   подсказка про пустое значение. Контролы — того же вида, что в карточке заказа. */
.cp-form{display:flex;flex-direction:column;gap:4px}
.cp-lbl{font-size:12.5px;color:var(--muted);margin-top:8px}
.cp-in{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:14px;background:var(--card);color:var(--ink)}
.cp-in:focus{outline:0;border-color:var(--primary)}
.cp-hint{margin:8px 0 0;font-size:12px;color:var(--muted)}
.cp-foot{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.cp-msg{font-size:12.5px;color:var(--muted)}
.cp-msg.cp-err{color:#b8322f}

/* Панель «Итог»: элементы, которых не хватало для полного совпадения с эталоном.
   «✕» на блоке позиции (у эталона им убирают машину из брони) и чекбокс «Всегда пересчитывать
   цену» рядом с кнопками. «✕» пока неактивен — за ним нет модели брони с несколькими машинами;
   контролы цены работают (docs/pages/custom-price.md). */
.ord-summary .sum-head .fico{opacity:.85;font-size:18px}
.sum-veh-h{display:flex;align-items:center;justify-content:space-between}
.sum-veh-x{border:0;background:none;cursor:pointer;color:var(--muted);font-size:14px;line-height:1;padding:2px 4px}
.sum-veh-x:disabled{cursor:default;opacity:.45}
.sum-always{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin-top:4px}
.sum-always input{margin:0}
.sum-q{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;
       border:1px solid var(--line);font-size:11px;color:var(--muted);cursor:help}

/* Панель «Итог»: аккордеон детализации и оформление итогов по эталону (#332,
   docs/pages/order-calc-states-2026-09-11.md). Кнопка-ссылка по центру на светлой подложке —
   у эталона она синяя, у нас НАШ акцент: цвета кабинета не меняем, меняем только структуру. */
.sum-details-btn{display:block;width:100%;margin:6px 0;padding:8px 10px;border:0;border-radius:10px;
       background:rgba(18,165,148,.06);color:var(--primary);font:inherit;font-size:13px;font-weight:600;
       text-align:center;cursor:pointer}
.sum-details-btn:hover{background:rgba(18,165,148,.12)}
.sum-details.closed .sum-details-body{display:none}
/* Ставка и единица тарификации — ДРОБЬ, как у эталона: «€33,78» сверху, тонкая черта, «День» под
   ней. Отдельной строкой единица читалась как ещё один параметр брони, а слово уезжало под
   зачёркнутый итог — не под ту цифру, к которой относится. Строка «Тариф» слева остаётся: у
   эталона она подписывает именно этот знаменатель. */
.sum-rate{display:inline-flex;flex-direction:column;align-items:center;line-height:1.15;vertical-align:middle}
.sum-rate-u{border-top:1px solid var(--line);padding-top:1px;margin-top:1px;font-size:12px;font-weight:400;color:var(--ink)}
/* Левая колонка строки машины тоже двухэтажная: название сверху, «Тариф» под ним — ровно на той
   высоте, где справа стоит знаменатель ставки. */
.sum-veh-name{display:inline-flex;flex-direction:column;line-height:1.15}
.sum-veh-tariff{font-size:14px;font-weight:400;color:var(--ink);padding-top:2px;margin-top:1px}
/* Светлая подложка у эталона накрывает ВЕСЬ разбор — машину, доставку, допы и налоги — и кончается
   ровно перед «Подытогом»: белым идут только итоги. У нас она была лишь под машиной, и разбор
   рассыпался на отдельные куски. Цвет наш (акцент 6 %), углы скруглённые — как везде в кабинете. */
.sum-details-body{background:rgba(18,165,148,.06);border-radius:12px;padding:2px 12px 10px;margin-bottom:10px}
/* Блок машины лежит ВНУТРИ этой подложки — своя ему больше не нужна, иначе выходит пятно на пятне. */
.sum-details-body .sum-veh{background:none;border-radius:0;padding:0;margin:0}
/* Подписи итогов тёмные — серым остаются только подстроки позиции (тариф, НДС, «Своя цена»);
   разделительных линий между строками нет, единственная отделяет «К оплате». Правила ограничены
   панелью: .ord-row живёт ещё в блоках карточки заказа, в пунктах проверки заказа и в подсказке
   планировщика, и там разделители на месте. */
.ord-summary .ord-row{border-bottom:0}
.ord-summary .ord-row .k{color:var(--ink)}
.ord-summary .ord-row.sub .k{color:var(--muted)}
.ord-summary .ord-row.strong{border-top:1px solid var(--line);margin-top:2px}

/* ── Календарь брони: два месяца + время (эталон — поле «Dates» карточки заказа) ────────────────
   Обычный .dr-pop остаётся односемячным и узким; режим брони включает второй месяц, ряд времени
   под каждым и подпись выбранного диапазона в подвале. */
.dr-pop--2{width:auto}
.dr-body{display:flex;gap:18px}
.dr-col{min-width:236px}
.dr-time{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px}
.dr-time select{padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit;font-size:13px}
.dr-time select:disabled{opacity:.5}
.dr-pop--2 .dr-foot{justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:10px}
.dr-sel{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
/* Занятые дни: выбрать нельзя, залиты ШТРИХОВКОЙ — ровно как у эталона (td.disabled:
   repeating-linear-gradient(-45deg,#ebebeb,#ebebeb 5px,#adabc1 5px,#adabc1 10px), цифра чёрная,
   без зачёркивания). Занятый день ВНУТРИ выбранного диапазона эталон красит красной штриховкой —
   это подсказка «диапазон накрыл чужую бронь». День пересменки (начало или конец чужой брони)
   выбрать МОЖНО: он просто серый (disabled-border эталона); если его выбрали — остаётся нашим
   бирюзовым, цвет выделения в кабинете один на все календари. */
.dr-day.busy{background:repeating-linear-gradient(-45deg,#ebebeb,#ebebeb 5px,#adabc1 5px,#adabc1 10px);
             color:#000;cursor:not-allowed;text-decoration:none;border-radius:0}
.dr-day.busy:hover{background:repeating-linear-gradient(-45deg,#ebebeb,#ebebeb 5px,#adabc1 5px,#adabc1 10px)}
/* Красной штриховкой эталон красит занятый день, оказавшийся ВНУТРИ выбранного диапазона
   (td.disabled.in-range) — «диапазон накрыл чужую бронь». Границу диапазона (edge) он не красит:
   на занятый день попасть кликом нельзя, там бывает только предустановленное значение. */
.dr-day.busy.in:not(.edge){background:repeating-linear-gradient(-45deg,#eb3f57,#eb3f57 5px,#c9152e 5px,#c9152e 10px);
             color:#fff}
.dr-day.busy-edge:not(.in):not(.edge){background:#ebebeb}
/* День, в который локация не работает (§2 «Активировать бронирование в нерабочее время» выключен).
   Отличаем от занятости: это не «машину уже взяли», а «офис закрыт», и штриховка чужой брони тут
   сбивала бы с толку — просто приглушённая цифра, как у дней соседнего месяца. */
.dr-day.closed{color:#c5cbd6;cursor:not-allowed;background:transparent}
.dr-day.closed:hover{background:transparent}

/* Поднавигация раздела: переключатель подпунктов в правом верхнем углу страницы. Появился на
   планнере («План дня | Таймлайн»), владелец попросил такой же во всех разделах с несколькими
   подпунктами (Аренды → Брони/Платежи и т.д.) — поэтому стиль общий, а не локальный. */
.sec-views{display:flex;gap:4px;background:var(--line);border-radius:10px;padding:4px;margin-left:auto}
.sec-views a{padding:7px 16px;border-radius:8px;font-weight:600;font-size:13px;color:var(--muted);text-decoration:none}
.sec-views a:hover{color:var(--ink)}
.sec-views a.on{background:var(--card);color:var(--primary);box-shadow:0 1px 3px rgba(20,30,60,.08)}
@media(max-width:560px){ .sec-views{width:100%;margin:10px 0 0} .sec-views a{flex:1;text-align:center;padding:7px 8px} }

/* Подсветка пункта настроек, на который привела подсказка (?hl=...): держим 4 секунды. */
.mod-row.set-hl{background:var(--primary-soft);border-radius:8px;box-shadow:0 0 0 2px var(--primary) inset;
                transition:background .2s}

/* ── Карточка заказа: подпись секции слева и плитки платежей (сверка §6) ───────────────────────
   У эталона у каждой свёрнутой секции слева стоит её название, а сводка платежей — плитка на
   каждый платёж с методом и суммой. */
/* Название раздела карточки брони — на кегль крупнее строк (просьба владельца, #352): это
   заголовок целого раздела, а не подпись поля. */
.coll-title{flex:0 0 auto;min-width:132px;color:var(--muted);font-size:15px}
@media (max-width:640px){.coll-title{min-width:0;flex:1 0 100%;margin-bottom:6px}}
.pay-tile{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;margin-right:8px;border:1px solid var(--line);
          border-radius:999px;font-size:12.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.pay-tile b{color:var(--ink);font-weight:600}
.pay-tile.is-paid{border-color:rgba(18,165,148,.45);background:rgba(18,165,148,.06)}

/* ── Карточка заказа на узких экранах (#275) ───────────────────────────────────────────────────
   Причина горизонтальной прокрутки всей страницы была не в фиксированных ширинах, а в двух
   местах: элемент грида по умолчанию имеет min-width:auto и раздувается под содержимое, а строка
   свёрнутой секции (flex) не переносилась — плитки платежей с white-space:nowrap растягивали её
   до 932 px при экране 390. Лечим оба. */
.ord-grid>*{min-width:0}
.ord-coll .coll-head{flex-wrap:wrap}
.ord-coll .coll-main{flex:1 1 160px}
.pay-tile{margin-bottom:4px}

/* ── Карточка брони: строка клиента (#336) и строки платежей (#337) ───────────────────────────
   У эталона оба раздела внутри — не пары «ключ: значение», а ТАБЛИЧНЫЕ строки с действиями.
   Колонка = подпись над значением: на телефоне строка переносится вместе с подписями, и ни одно
   число не остаётся без имени. Цвета и типографика — кабинетные, своих не заводим. */
.cust-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 22px;padding:12px 2px 4px}
.cust-row-empty{padding:14px 2px;font-size:14px}
/* Клиентов у брони до пяти (#343) — строки нужно отделить друг от друга, иначе пять наборов
   подписей читаются как одна каша. Между строками лежат (скрытые) панели их под-форм, поэтому
   селектор «любой следующий», а не «соседний». */
.cust-row~.cust-row{border-top:1px solid var(--line);padding-top:14px}
/* Отметка ОСНОВНОГО клиента: его печатают договор и счёт и его показывает реестр. Тише имени —
   это пометка, а не второе имя. */
/* Корона основного клиента (просьба владельца: у эталона основной помечен короной, а не словом).
   У основного она в цвете бренда, у остальных — тусклая КНОПКА: нажатие делает клиента основным,
   поэтому у неё курсор-палец и подсветка при наведении. */
/* Корона сидит в ВЕРХНЕМ ПРАВОМ УГЛУ фотографии клиента (просьба владельца), а не отдельным
   значком у имени: так она читается как метка самого человека и не растаскивает строку по ширине.
   Белая подложка нужна, чтобы значок был виден на любой фотографии. */
.cust-cv{position:relative}
.cust-crown{position:absolute;left:23px;top:-6px;z-index:2;
            display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;
            border:0;padding:0;background:#fff;box-shadow:0 0 0 1.5px #fff;color:var(--line);cursor:pointer}
.cust-crown .fico{font-size:12px}
.cust-crown.is-main{color:var(--primary);cursor:default}
.cust-crown:not(.is-main):hover{color:var(--muted)}
/* «+2» в шапке раздела: свёрнутый блок не должен врать, будто клиент в брони один. */
.cust-more{margin-left:6px}
.cust-lim{font-size:12.5px;flex:1 1 100%}
.cust-col{display:flex;flex-direction:column;gap:5px;min-width:0}
.cust-col-name{flex:1 1 200px}
.cust-cl{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.cust-cv{font-size:14px;font-variant-numeric:tabular-nums;display:flex;align-items:center;min-height:26px}
.cust-cv .cust{gap:8px}
.cust-addr{text-transform:uppercase;font-size:13px}
.cust-deals{color:var(--blue);text-decoration:underline;font-weight:600}
.cust-acts{display:flex;align-items:center;gap:8px;margin-left:auto;padding-bottom:1px}
.cust-acts .cust-view{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;font-size:13px}
.cust-x{border:0;background:none;color:var(--muted);font-size:15px;line-height:1;cursor:pointer;padding:6px 8px;border-radius:8px}
.cust-x:hover{color:#b8322f;background:#fdf4f3}
/* Поиск другого контакта и «Добавить нового» — под строкой, как у эталона. Поле со значком
   внутри: тот же приём, что у поиска подбора авто (.vehsel-q). */
.cust-find{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}
.cust-find-f{position:relative;flex:1 1 260px;max-width:360px;display:flex;align-items:center}
.cust-find-f .fico{position:absolute;left:10px;color:var(--muted);font-size:15px;pointer-events:none}
.cust-find-f input{width:100%;padding:8px 10px 8px 32px;border:1px solid var(--line);border-radius:9px;
                   font:inherit;font-size:13.5px;background:var(--card);color:var(--ink)}
.cust-find-f input:focus{outline:0;border-color:var(--primary)}
/* «Добавить нового» раскрывает под-форму здесь же (#343) — это <button>, а не ссылка; вид
   прежний, ссылочный. На пятом клиенте оба действия гаснут: потолок держит сервер, но оператору
   незачем упираться в отказ, когда об этом можно сказать заранее. */
.cust-add{display:inline-flex;align-items:center;gap:6px;color:var(--primary);font:inherit;font-size:13.5px;
          text-decoration:underline;border:0;background:none;padding:0;cursor:pointer}
.cust-add:disabled,.cust-find-f input:disabled{opacity:.5;cursor:not-allowed;text-decoration:none}
/* Редактор контакта, раскрытый ПРЯМО В БРОНИ (#340): кнопка у клиента не уводит на страницу
   клиента, а разворачивает здесь общую форму (crsCustomerEditor). Панель отделена рамкой, у неё
   свои «свернуть» и «×» в правом верхнем углу — как у эталона. */
.cust-edit{position:relative;margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:16px 16px 8px;background:var(--card)}
.cust-edit[hidden]{display:none}
.cust-edit-acts{position:absolute;top:8px;right:10px;display:flex;gap:2px;z-index:1}
/* Свёрнутая панель — только её кнопки: рамку и фон снимаем, иначе пустая коробка читается как
   поле ввода, в которое почему-то ничего не влезло. Место под кнопки остаётся — иначе «развернуть»
   уезжало бы на строку поиска контакта. */
.cust-edit.is-folded{border-color:transparent;background:none;padding:0;min-height:30px}
.cust-edit.is-folded .cust-edit-acts{top:2px}
.cust-edit.is-folded .cust-edit-body{display:none}
.cust-edit-fold .fico{transition:transform .15s}
.cust-edit.is-folded .cust-edit-fold .fico{transform:rotate(180deg)}

/* Строки платежей: тип · дата · способ · действия · сумма · статус · удаление. */
.pay-rows{display:flex;flex-direction:column;gap:8px;padding:10px 0 2px}
/* Строка платежа — СЕТКА с одинаковыми колонками у всех строк (просьба владельца: элементы
   распределены по ширине, посередине нет провала). Раньше это был flex, где «.pay-act» отжимала
   правую половину строки к краю: между способом оплаты и кнопкой зияла пустота, а колонки соседних
   строк не совпадали между собой. Одинаковые элементы должны стоять на одинаковых местах. */
.pay-row{display:grid;
         grid-template-columns:minmax(64px,.7fr) minmax(118px,1.1fr) minmax(120px,1.2fr) minmax(118px,1.2fr) minmax(70px,.7fr) minmax(86px,.8fr) 22px;
         align-items:center;gap:12px;padding:10px 12px;border-radius:12px;
         background:var(--bg,#f6f7fb);font-size:13.5px}
.pay-kind{color:var(--blue);font-size:14px}
.pay-when{color:var(--muted);font-variant-numeric:tabular-nums}
.pay-method{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.pay-method .fico{color:var(--muted);font-size:16px}
.pay-act{display:inline-flex;align-items:center;gap:8px;justify-self:center}
/* «Вернуть платёж» — кнопка с серой обводкой (просьба владельца): заливка делала её похожей на
   неактивную подпись, и оператор не понимал, что по ней можно нажать. */
.pay-refund{border:1px solid var(--muted);border-radius:8px;background:#fff;color:var(--ink);font:inherit;
            font-size:12.5px;padding:6px 12px;cursor:pointer}
.pay-refund:hover{border-color:var(--ink);background:var(--bg)}
.pay-refund:disabled{opacity:.5;cursor:not-allowed;background:#fff;border-color:var(--line)}
.pay-sum{font-size:14px;font-variant-numeric:tabular-nums;justify-self:end;text-align:right}
/* Возвращённая часть — второй строкой под суммой, как в эталоне («Refund: €250.00» серым под
   €250.00). Отдельной строкой платежа её не показываем: это та же сделка, а не второе движение. */
.pay-refunded{display:block;margin-top:2px;color:var(--muted);font-size:11.5px;font-weight:400}
/* ЧИП СТАТУСА ПЛАТЕЖА — снят с эталона (RentSyst, карточка брони → Payments): 11 px обычного
   начертания, белый текст, заливка цветом статуса, радиус 9 px. От .st (статус ЗАКАЗА — обводка,
   12 px, радиус 12 px) отличается намеренно: это разные сущности, и путать их нельзя.
   ЕДИНСТВЕННОЕ место, где живут эти цвета: и карточка брони, и реестр платежей, и «Проверить
   заказ» просят класс у F.payStatusClass (fmt.js), второй палитры в кабинете нет. */
.pst{display:inline-flex;align-items:center;font-family:inherit;font-size:11px;font-weight:400;line-height:1.35;
     color:#fff;padding:4px 10px;border:0;border-radius:9px;white-space:nowrap;background:var(--pst-bg)}
.pst-not_paid{--pst-bg:rgb(235,63,87)}
.pst-paid{--pst-bg:rgb(111,191,31)}
.pst-pending{--pst-bg:rgb(51,132,255)}
.pst-cancel{--pst-bg:rgb(255,0,0)}
.pst-failed{--pst-bg:rgb(173,171,193)}
/* Возврат — фиолетовый badge-focus эталона (проверено 19-09-2026 и в карточке брони, и в реестре
   платежей: rgb(152,22,244)). Оранжевый, стоявший здесь раньше, ни в одном из этих мест не
   встречается. */
.pst-refund{--pst-bg:rgb(152,22,244)}
/* Тот же чип КНОПКОЙ: текущий статус строки открывает меню с остальными четырьмя (просьба
   владельца — «нажимаю на кнопку статуса, открывается меню, и я выбираю»). */
button.pst{cursor:pointer}
button.pst:hover{filter:brightness(1.08)}
button.pst:disabled{cursor:default;filter:none}
/* Диалог возврата — поле суммы: эталон спрашивает её модалкой «Enter the amount for refund». */
.rfnd-lbl{display:block;margin-bottom:6px;color:var(--muted);font-size:12.5px}
.rfnd-inp{width:100%;font-variant-numeric:tabular-nums}
.rfnd-hint{margin-top:6px;color:var(--muted);font-size:12px}
.pay-st-wrap{position:relative;display:inline-flex}
.pay-st-menu{position:absolute;z-index:30;top:calc(100% + 6px);left:0;display:flex;flex-direction:column;
             gap:6px;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--card,#fff);
             box-shadow:0 10px 26px rgba(16,24,40,.14)}
.pay-st-menu .pst{justify-content:center}
.pay-x{border:0;background:none;color:var(--muted);font-size:14px;line-height:1;cursor:pointer;padding:5px 6px;border-radius:8px}
.pay-x:hover{color:#b8322f;background:#fdf4f3}
/* Форма приёма денег (общая crsPay): поля в один ряд, подпись над контролом — как у эталона. */
.pay-add{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.pay-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.pay-fl{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.pay-in{padding:8px 10px;border:1px solid var(--line);border-radius:9px;font:inherit;font-size:13.5px;
        background:var(--card);color:var(--ink)}
.pay-in:focus{outline:0;border-color:var(--primary)}
.pay-f-sum .pay-in{width:110px;font-variant-numeric:tabular-nums}
.pay-date-f{position:relative;display:flex;align-items:center}
.pay-date-f input{width:150px;cursor:pointer;font-variant-numeric:tabular-nums}
.pay-date-f .fico{position:absolute;right:9px;color:var(--muted);font-size:15px;pointer-events:none}
.pay-add-btn{display:inline-flex;align-items:center;gap:7px;border:0;background:none;color:var(--primary);
             font:inherit;font-size:13.5px;text-decoration:underline;cursor:pointer;padding:9px 2px}
.pay-add-btn:disabled{opacity:.55;cursor:default}
/* Сообщение об ошибке стоит В ОДНОМ РЯДУ с полями: ряд выровнен по НИЖНЕМУ краю (у полей сверху
   подписи), а центрирование по всей высоте поднимало текст на 11px выше контролов. Даём сообщению
   ту же высоту, что у поля, и центрируем текст внутри неё — тогда центры совпадают. */
.pay-msg{font-size:12.5px;color:var(--red,#b8322f);align-self:flex-end;height:38px;display:flex;align-items:center}
/* Поле, на которое ругается форма, подсвечиваем — иначе оператор читает текст и ищет глазами, где
   именно ошибка (просьба владельца). Подсветка снимается, как только поле тронули. */
.pay-in.is-err,.modal-body .fld input[type=text].is-err{border-color:var(--red,#b8322f);box-shadow:0 0 0 3px rgba(184,50,47,.12)}
/* Фокус в полях модалок — НАШ, как у поиска и полей брони: браузер иначе рисует собственное
   кольцо (у владельца оно красно-оранжевое), и пустое нетронутое поле выглядит полем с ошибкой.
   Одинаковые элементы кабинета должны выглядеть одинаково. */
.modal-body .fld input[type=text]:focus,.modal-body .fld input[type=password]:focus,
.modal-body .fld input[type=number]:focus,.modal-body .fld input[type=email]:focus,
.modal-body .fld textarea:focus,.modal-body .fld select:focus{outline:0;border-color:var(--primary)}
.modal-body .fld input.is-err:focus{border-color:var(--red,#b8322f)}
@media (max-width:640px){
  .cust-acts{margin-left:0}
  .pay-row{display:flex;flex-wrap:wrap}
  .pay-act{order:5;flex:1 0 100%;justify-self:auto}
  .pay-f,.pay-f-sum .pay-in,.pay-date-f input{width:100%}
  .pay-f{flex:1 1 140px}
}
/* Ниже 900 px грид уже схлопнут в одну колонку, и «Итог» стоит отдельным блоком под содержимым —
   снимаем заодно и «прилипание»: последним блоком страницы залипать некуда, панель только
   перекрывала бы ряд кнопок действий под собой.
   УПРОЩЕНИЕ против эталона (осознанное): у RentSyst на этой ширине «Итог» прячется в выезжающую
   вкладку «Summary» у правого края. Вкладку не копируем — это отдельная работа (свой контейнер,
   ярлык, состояние открыта/закрыта), а обычный блок уже решает то, ради чего заведён #275:
   страница помещается в экран. */
@media (max-width:900px){.ord-summary{position:static}}
/* Календарь брони (#270) висит на <body> с position:absolute, поэтому его ширина попадает в
   scrollWidth ДОКУМЕНТА: два месяца рядом — это ≈516 px, и на экране 390 горизонтальная прокрутка
   возвращалась, стоило открыть поле дат. На телефоне ставим месяцы друг под другом. */
@media (max-width:640px){
  .dr-pop--2{max-width:calc(100vw - 24px)}
  .dr-pop--2 .dr-body{flex-direction:column;gap:12px}
}

/* ── Подтверждение с диффом (перенос брони на ленте) ───────────────────────────────────────────
   Раскладка эталона (скриншоты владельца): круг с «?», крупный заголовок и подпись по центру,
   блок значений слева, изменившееся — зачёркнутое старое сверху и новое ниже со стрелкой «↳»,
   кнопки по центру. Цвета наши: бирюзовое «Да», красное «Нет» из палитры. */
.cdlg--center .modal-head{border-bottom:0;padding-bottom:0}
.cdlg--center .modal-head h3{flex:1;text-align:center;font-size:26px;line-height:1.2;margin:0}
.cdlg--center .modal-x{display:none}          /* у эталона креста нет: закрывают «Нет» или Esc */
.cdlg--center .modal-body{padding-top:4px}
.cdlg--center .modal-foot{justify-content:center;gap:14px;border-top:0;padding-top:6px}
.cdlg--center .modal-foot .btn{min-width:104px;justify-content:center}
.cdlg--center .cdlg-no{background:#b8322f;color:#fff;box-shadow:none}
.cdlg--center .cdlg-no:hover{filter:brightness(1.06)}
.cdlg-ico{width:76px;height:76px;margin:6px auto 14px;border-radius:50%;border:1.5px solid #d8e0ea;
          display:grid;place-items:center;font-size:38px;font-weight:700;color:#b9c4d2}
/* Круг «?» ставится ТОЛЬКО там, где диалог просил иконку (opts.icon). Без этой строки класс с
   display:grid перебивал атрибут [hidden], и вопросительный знак висел в каждом диалоге. */
.cdlg-ico[hidden]{display:none}
.cdlg--center .cdlg-text{margin:0}
.tlc-sub{display:block;text-align:center;color:var(--muted);font-size:15px;margin-bottom:20px}
.tlc-sub b{color:var(--ink)}
.tlc-veh,.tlc-col{text-align:left}
.tlc-lbl{font-weight:700;font-size:13.5px;color:var(--ink);margin-bottom:4px}
.tlc-old{color:#b8322f;text-decoration:line-through;font-size:13.5px}
.tlc-old .plate{border-color:#e3b6b4;color:#b8322f;text-decoration:line-through}
.tlc-new{color:var(--ink);font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tlc-new i{font-style:normal;color:#9aa6b6;font-weight:400}
.tlc-cols{display:flex;gap:40px;margin-top:16px;flex-wrap:wrap}
.tlc-veh{margin-top:4px}

/* Диалог «+» на ленте (выбор действия для машины): вариант эталона с ВИДИМЫМ крестом, значения по
   центру и двумя кнопками-заливками из палитры (бирюзовая — бронь, синяя — сервис). */
.cdlg--center.cdlg--x .modal-head{position:relative;padding:18px 56px 0}
.cdlg--center.cdlg--x .modal-x{display:grid;position:absolute;right:0;top:0;width:34px;height:34px;
                               border:1px solid var(--line);font-size:17px}
.cdlg--x .tlc-veh{text-align:center}
.cdlg--x .tlc-new{justify-content:center}
.cdlg--center .modal-foot .btn.fill{background:var(--primary);border-color:var(--primary);color:#fff}
.cdlg--center .modal-foot .btn.alt{background:var(--blue);border-color:var(--blue);color:#fff}
.cdlg--center .modal-foot .btn.fill:hover,.cdlg--center .modal-foot .btn.alt:hover{filter:brightness(1.06)}

/* ── Поля брони: строка «Тариф · Даты · тумблер локации» и блок локации (#322/#331) ────────────
   Разметку этих полей рисует общий window.crsLocationFields (shell.js), а пользуются ею ДВЕ
   страницы — карточка брони (order.html) и форма новой брони (order-new.html). Поэтому и стили
   лежат здесь, в одном месте: копия в каждой странице и была тем «двумя разными видами одного и
   того же», из-за которых блок расходился по виду. */
/* Контролы секции «Даты и автомобиль» — один вид у селектов и полей (#271). */
.ord-ctl{padding:7px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13.5px;background:#fff;color:var(--ink);min-width:200px}
.ord-ctl:focus{outline:0;border-color:var(--primary)}
.ord-addr{min-width:280px}
.ord-sw{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;cursor:pointer}
/* «Тариф · Даты · тумблер локации» у эталона стоят В СТРОКУ, подпись — НАД контролом; строка
   «подпись слева 150 px + контрол» на три поля растягивалась на три экранных строки.
   Раскладка гибкая (flex-wrap): на узком экране поля переносятся сами, ничего не обрезая. */
.ord-line{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;padding:7px 0}
/* «Выдача» и «Возврат» — ДВЕ КОЛОНКИ ОДНОЙ строки, чекбокс «Вернуть в другую локацию» — под ними
   (замеры эталона 10-09-2026, 1440 px: подписи обоих мест на одной высоте, селекты x=274 и x=721
   по ≈363 px, чекбокс ниже колонок). Сетка, а не flex: при снятом чекбоксе колонка возврата
   исчезает, и колонка выдачи обязана остаться на СВОЕЙ половине, как в эталоне, а не растянуться
   во всю ширину. */
.ord-cols{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:10px 14px;padding:7px 0}
/* Внутри колонки — место и его заметка в один ряд; на узком экране заметка переносится под место.
   Выравнивание по ВЕРХУ: под адресом выдачи висит строка с расстоянием, и по низу она утягивала бы
   соседнюю «Заметку» на строку ниже — поля переставали стоять в один ряд. */
.ord-col{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 14px;min-width:0}
/* Свой display сильнее правила браузера для [hidden]: без этой строки колонка возврата оставалась
   бы на экране, хотя «Вернуть в другую локацию» не отмечено (её прячут атрибутом hidden).
   Та же оговорка, что у .chip .chip-cnt[hidden] и .wz-fld[hidden]. */
.ord-col[hidden]{display:none}
.ord-f{display:flex;flex-direction:column;gap:5px;min-width:0}
/* Подписи над полями («Тариф», «Даты», «Выдача», «Заметка», «Возврат») — на два кегля крупнее
   мелкого служебного текста: просьба владельца 10-09-2026, на 12px они читались как сноска. */
.ord-f>.k{font-size:14px;color:var(--muted)}
/* Значок поля (пин у места, «заметка» у комментария) — в цвете подписи, не акцентом. */
.ord-f>.k .fico{margin-right:5px;font-size:13px;opacity:.75;vertical-align:-1px}
.ord-f>.ord-ctl,.ord-f>.ord-dates,.ord-f>.ord-addr{width:100%;min-width:0}
.ord-f-tariff{flex:0 1 150px}
.ord-f-dates{flex:1 1 250px}
/* Место заметно шире заметки (~2:1) — пропорция эталона: селект ≈363 px, заметка компактная.
   Поровну (было 1:1) читалось как два равнозначных поля, хотя главное здесь — место. */
.ord-f-loc{flex:2 1 190px}
.ord-f-notes{flex:1 1 110px}
/* Тумблер «Системная / Своя локация»: подписи по бокам, активная — тёмная (эталон). */
/* flex-wrap: длинные подписи (fr/de) на телефоне переносятся ВНУТРИ тумблера, а не распирают
   документ; padding-bottom ставит тумблер на одну линию с серединой соседних контролов. */
.ord-tgl{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 9px;font-size:13.5px;color:var(--muted);padding-bottom:5px}
.ord-tgl-l{white-space:nowrap}
.ord-tgl:has(input:not(:checked)) .ord-tgl-l[data-off],
.ord-tgl:has(input:checked) .ord-tgl-l[data-on]{color:var(--ink);font-weight:600}
/* «От вашей локации до этого адреса N км» — строка под полем адреса. */
.ord-dist{font-size:12.5px;color:var(--muted)}
/* Телефон (#275): контрол шириной по блоку, поля строки — друг под другом, иначе тумблер
   выдавливает строку и документ становится шире окна. */
@media (max-width:640px){
  .ord-ctl,.ord-addr{min-width:0;width:100%}
  .ord-f{flex:1 1 100%}
  /* Две колонки в 640 px не помещаются: «Возврат» уходит под «Выдачу», а не сжимается до нечитаемого. */
  .ord-cols{grid-template-columns:1fr}
}

/* ── Подбор единицы парка в брони (#332) ──────────────────────────────────────────────────────
   Блок ОДИН на кабинет (window.crsVehiclePicker в shell.js): его показывают и карточка брони, и
   форма новой брони. Стили лежат здесь, а не в <style> одной из страниц, — иначе вторая
   страница снова осталась бы со своим набором классов и своим видом (так и разошлись
   .vehsel-* карточки и .ob-* формы). */
/* Шапка: компактное поле поиска (~350 px, как у эталона) с лупой ВНУТРИ справа, рядом чип
   «Фильтры» — общий чип кабинета, он же открывает общую .filters-panel. */
.vehsel-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.vehsel-q{position:relative;flex:0 1 350px;min-width:180px}
.vehsel-q input{width:100%;padding:9px 34px 9px 12px;border:1px solid var(--line);border-radius:9px;font:inherit;font-size:13.5px;color:var(--ink);background:var(--card)}
.vehsel-q input:focus{outline:0;border-color:var(--primary)}
/* Лупа — часть поля, а не кнопка: клики уходят в input под ней. */
.vehsel-q .fico{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:15px;pointer-events:none}
/* Счётчик «Найдено N …» — жирный, фирменным цветом (эталон). */
.vehsel-count{margin:0 0 10px;font-size:14px;font-weight:700;color:var(--primary)}
.vehsel-count:empty{display:none}
/* Таблица подбора компактнее реестра: строк на экране много, а колонок восемь. */
.vehsel-scroll{overflow-x:auto}
.vehsel-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:620px}
.vehsel-table th{text-align:left;color:var(--muted);font-weight:600;font-size:13px;white-space:nowrap}
.vehsel-table td,.vehsel-table th{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.vehsel-table tbody tr:last-child td{border-bottom:0}
.vehsel-table .vehsel-pick{width:34px}
.vehsel-table input[type=checkbox]{accent-color:var(--primary);cursor:pointer;width:16px;height:16px}
.vehsel-table tbody tr{cursor:pointer}
/* Выбранная строка подсвечена фоном (эталон) — токен «мягкий фирменный», не свой цвет. */
.vehsel-table tr.on>td{background:var(--primary-soft)}
.vehsel-empty{padding:14px 10px;color:var(--muted)}
/* Подвал подбора: кнопка «Очистить» слева под таблицей (эталон — Clear/Next step). */
.vehsel-foot{display:flex;gap:10px;padding:4px 0 2px}
/* Кружок цвета кузова (CRSfmt.colorSwatch) — общий для карточки авто и подбора.
   Обводка --row-sep, а не --line: почти половина парка белая и серебристая, и на белой карточке
   кружок с еле заметной рамкой читался как ПУСТОЙ («цвет не приехал»), хотя цвет приезжает. */
.veh-sw{display:inline-block;width:16px;height:16px;border-radius:50%;border:1px solid var(--row-sep);vertical-align:-2px}

/* ── Раздел «Страховка и допы» (#333, общий блок window.crsExtrasPicker) ──────────────────────
   Структура эталонная (docs/pages/order-calc-states-2026-09-11.md): карточки со значком, названием
   и словом-типом под ним, допы — сеткой в ТРИ колонки, у количественных под галочкой счётчик
   «− N +». Оформление НАШЕ: акцент и токены кабинета, своих цветов не заводим. */
.ext-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0 0}
@media (max-width:1100px){.ext-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ext-grid{grid-template-columns:1fr}}
.ext-card{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--card)}
.ext-card.is-on{border-color:var(--primary);background:rgba(18,165,148,.06)}
.ext-top{display:flex;align-items:center;gap:10px;cursor:pointer;min-width:0}
.ext-top input{margin:0;flex:none;width:16px;height:16px;accent-color:var(--primary);cursor:pointer}
.ext-ic{flex:none;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}
.ext-card.is-on .ext-ic{color:var(--primary)}
/* Монограмма — заменитель значка у позиции, которой значок не задали (выдумывать «похожую»
   картинку нельзя: значок называет вид позиции). */
.ext-mono{width:24px;height:24px;border-radius:50%;background:var(--line);color:var(--muted);
          display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.ext-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ext-tx b{font-size:13px;line-height:1.25;overflow-wrap:anywhere}
.ext-kind{font-size:11.5px;color:var(--muted)}
.ext-price{flex:none;font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap}
/* Счётчик количества — под галочкой, как у эталона. */
.ext-qty{display:flex;align-items:center;gap:8px;margin:8px 0 0 26px}
.ext-q{width:26px;height:26px;border:1px solid var(--line);border-radius:8px;background:var(--card);
       color:var(--ink);font:inherit;font-size:15px;line-height:1;cursor:pointer}
.ext-q:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}
.ext-q:disabled{opacity:.4;cursor:default}
.ext-qn{min-width:18px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
/* Обязательная позиция §4 без решения (#371): «требует ответа». Оформление минимальное и в
   токенах кабинета — своих цветов не заводим (правило владельца): карточка обведена ПУНКТИРОМ
   (состояние «ещё не решено» ни на что не похоже, но и не кричит), подпись — обычный muted, а
   «Не нужно» выглядит как кнопка счётчика, потому что это такое же действие по позиции.
   ВНИМАНИЕ: у эталона это состояние снять не удалось (владелец запретил заходить в его систему) —
   вид подлежит сверке с оригиналом, когда доступ появится. */
.ext-card.is-ask{border-style:dashed}
.ext-ask{display:flex;align-items:center;gap:8px;margin:8px 0 0 26px;flex-wrap:wrap}
.ext-ask-tx{font-size:11.5px;color:var(--muted)}
.ext-no{padding:3px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);
        color:var(--ink);font:inherit;font-size:12px;line-height:1.5;cursor:pointer}
.ext-no:hover{border-color:var(--primary);color:var(--primary)}
/* «Показать допы» — кнопка-ссылка на всю ширину, как аккордеон панели «Итог». */
.ext-toggle{display:block;width:100%;margin:14px 0 0;padding:9px 10px;border:0;border-radius:10px;
            background:rgba(18,165,148,.06);color:var(--primary);font:inherit;font-size:13px;font-weight:600;
            text-align:center;cursor:pointer}
.ext-toggle:hover{background:rgba(18,165,148,.12)}
.ext-empty{padding:12px 2px;font-size:14px}
/* Подвал блока допов — ТОТ ЖЕ подвал, что у остальных разделов (.sec-foot ниже в файле): «Далее»
   у эталонной формы стоит в каждом разделе на ОДНОМ месте, а у нас в допах она была прижата вправо
   и на 4px ниже ростом. Правило владельца: одинаковые элементы одной формы выглядят одинаково и
   стоят на одинаковых местах — искать кнопку глазами по разделам человек не должен. */
.ext-foot{display:flex;justify-content:center;padding:14px 0 2px}
/* Строки брони без ссылки на справочник (импорт): карточки для них нет — печатаем состав как есть. */
.ext-loose{margin-top:12px}
/* Свёрнутый вид раздела: чипы выбранного — значок (или круглое количество), название и слово-тип. */
/* vertical-align:middle обязателен: чипы — inline-flex, и по умолчанию строка равняет их ПО БАЗОВОЙ
   ЛИНИИ. У чипа со значком первый элемент — svg (базовой линии нет, берётся его низ), у чипа с
   круглым количеством — текст цифры, и чипы разъезжались по высоте на 6px: значковый вставал выше
   остальных. Равняем по середине — тогда все чипы строки стоят на одной горизонтали. */
.ext-chip{display:inline-flex;align-items:center;vertical-align:middle;gap:6px;padding:3px 10px 3px 4px;
          margin:0 8px 4px 0;
          border:1px solid var(--line);border-radius:999px;font-size:12.5px;color:var(--muted);max-width:100%}
.ext-chip b{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* Телефон: подпись вида («Страховка») в одну строку не влезает и разрывалась посреди слова —
   уводим её на отдельную строку целиком, а название допа усечётся многоточием, как и на десктопе. */
@media (max-width:640px){
  .ext-chip{flex-wrap:wrap;border-radius:14px;row-gap:2px}
  .ext-chip .ext-kind{flex:1 0 100%;padding-left:28px}
}
.ext-chip .ext-ic{width:22px;height:22px}
.ext-badge{flex:none;width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff;
           font-style:normal;font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}

/* Поповеры значков шапки — ОДИН вид на кабинет: список языков (#100) и подменю значка «?».
   Список — тот же тёмный поповер, что у подменю навигации; код текущего языка рядом с глобусом,
   чтобы было видно, на чём сидишь, не открывая список. Второго оформления не заводим: поведение
   (открыть/закрыть/Esc) у обоих тоже общее — headPop в shell.js. */
.lang-pick, .help-pick { position: relative; gap: 4px; }
.lang-pick .lang-cur { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.hpop { display: none; position: absolute; top: 100%; right: 0; z-index: 60; min-width: 150px;
  padding: 6px; margin-top: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 28px rgba(16, 24, 40, .14); }
.open > .hpop { display: block; }
.hpop-item { display: block; padding: 7px 10px; border-radius: 7px; font-size: 13px; color: var(--text);
  white-space: nowrap; cursor: pointer; text-decoration: none; }
.hpop-item:hover { background: var(--bg); }
.hpop-item.sel { color: var(--brand); font-weight: 600; }
/* Пункт до ответа сервера скрыт атрибутом hidden — без этой строки display:block выше его показал бы. */
.hpop-item[hidden] { display: none; }
/* «Help center» эталона — ЗАГОЛОВОК меню, а не ссылка: серый и некликабельный. */
.hpop-title { padding: 7px 10px 5px; font-size: 12px; font-weight: 700; color: var(--muted); cursor: default; }
/* Пункты меню «?» — ссылки (у эталона синие); пункт без экрана выключен и помечен «Скоро». */
.help-menu .hpop-item { color: var(--blue); }
.help-menu .hpop-item.is-soon { color: var(--muted); cursor: not-allowed; }
.help-menu .hpop-item.is-soon:hover { background: none; }

/* ИТОГОВЫЕ строки панели — замер эталона (бронь 2776041, computed style): «30 days», «Subtotal»,
   «Paid», зачёркнутый депозит и франшиза — 16px/700, «Due balance» — 20px/700 (у нас в нашем
   зелёном), «Custom price» под ними — 14px/700. Раньше они шли 14px/600 (а франшиза и вовсе 900),
   и правый столбец панели читался мельче и легче эталонного. */
.ord-summary .sum-body > .ord-row > .v,
/* <b> внутри значения берёт браузерный bolder и печатался весом 900 — у эталона там ровно 700. */
.ord-summary .sum-body > .ord-row > .v b{font-size:16px;font-weight:700}
.ord-summary .sum-body > .ord-row.strong > .v{font-size:20px;font-weight:700}
.ord-summary .sum-body > .ord-row.sum-custom > .v{font-size:14px;font-weight:700}

/* «К оплате» — подпись и сумма ОДНА величина: у эталона это главный итог панели, и подпись слева
   набрана так же, как число справа (просьба владельца). Держим одним объявлением, чтобы они
   больше не разъезжались. */
.ord-summary .sum-body > .ord-row.strong > .k,
.ord-summary .sum-body > .ord-row.strong > .v{font-size:20px;font-weight:700;color:var(--primary)}

/* Сгруппированная выпадашка (селект «что меняем» в модалке своей цены). Замер эталона: заголовок
   группы — 14px/400 приглушённый, над ним волосяная линия-разделитель; пункт — 12px/400 и с
   бóльшим отступом слева, чем заголовок; пустого пункта-плейсхолдера в списке нет. Раньше
   заголовки шли 11px/700 инлайн-стилем, а пункты — кеглем обычного списка, и структура группы
   читалась наоборот: подпись группы мельче своих пунктов. */
.cs-group{padding:8px 12px 3px;font-size:14px;font-weight:400;color:var(--muted);border-top:1px solid var(--line)}
.cs-menu .cs-group:first-child{border-top:0;padding-top:4px}
.cs-menu--grouped .cs-item{font-size:12px;padding-left:22px}
.cs-item.cs-hidden{display:none}

/* Подвал раздела с «Далее» — у эталона такая кнопка есть в каждом разделе, кроме последнего.
   Кнопка по центру, с отступом от содержимого раздела; ровно то же правило — у .ext-foot. */
.sec-foot{display:flex;justify-content:center;padding:14px 0 2px}

/* Свёрнутая шапка «Даты и автомобиль»: даты двумя строками (дата тёмная, время приглушённое) и
   машина с фото — как у эталона. Ряд один, поэтому содержимое равняем по середине. */
.dv-main{flex-direction:row;align-items:center;gap:22px;flex-wrap:wrap}
.dv-dates{display:flex;flex-direction:column;gap:2px;font-size:13px;white-space:nowrap}
.dv-dates b{font-weight:600;color:var(--ink)}
.dv-dates i{font-style:normal;color:var(--muted)}
.dv-main .veh{align-items:center}
/* Подбор авто внутри раздела «Даты и автомобиль»: отделяем его от полей дат линией, как отделены
   блоки внутри секции у эталона (второй карточки-«коробки» внутри карточки быть не должно). */
.ord-vehsel{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
/* РАСКРЫТЫЙ раздел показывает в шапке только свою подпись и стрелку: галочка, значок и сводка
   (даты и машина, клиент, чипы допов, плитки платежей, документы) — это СВЁРНУТЫЙ вид, а внутри
   раскрытого раздела те же данные уже стоят. Решение владельца, одно правило на все разделы.
   Пустой .coll-main остаётся распоркой, чтобы стрелка держалась у правого края. */
.ord-coll.open .coll-check,
.ord-coll.open .coll-ic,
.ord-coll.open .coll-av,
.ord-coll.open .coll-main > *{display:none}

/* ── Пустой раздел кабинета (#401) ───────────────────────────────────────────────────────────
   Шапка таблицы остаётся на месте, а под ней — иллюстрация, пояснение и призыв. Разметку и
   картинку собирает ОДИН компонент (web/admin/empty-state.js); здесь только его вид. */
.empty-state{display:flex;flex-direction:column;align-items:center;gap:8px;padding:30px 16px;text-align:center}
.empty-state .es-art{width:168px;height:120px;max-width:100%;display:block;margin-bottom:6px}
.empty-state .es-text{margin:0;color:var(--muted);font-size:14px}
/* Призыв — действие, поэтому он выглядит действием: наш зелёный, полужирный, курсор-рука. */
.empty-state .es-cta{color:var(--active);font-weight:600;text-decoration:none;cursor:pointer}
.empty-state .es-cta:hover{color:var(--primary);text-decoration:underline}
/* Строка-заглушка внутри таблицы: ни разделителя строки, ни выравнивания колонки — только место
   под блок, растянутый на все колонки (colspan ставит компонент).
   Селектор с ЧЕТЫРЬМЯ уровнями — иначе общее `table.grid tbody td` (и его же подсветка строки
   при наведении) перебивает по специфичности, и у заглушки останутся отступы колонки и линия. */
table tbody tr.es-tr td{padding:0;border:0;text-align:center;background:transparent}
table tbody tr.es-tr:hover td{background:transparent}
/* Узкая колонка (список повреждений рядом со схемой авто) — картинка ужимается, а не распирает
   раскладку вкладки. */
.dm-info .empty-state{padding:18px 8px}
.dm-info .empty-state .es-art{width:132px;height:94px}

/* ── Модальные окна на узком экране (планшет 768 / телефон 390) ────────────────────────────────
   Модалка кабинета — это шапка, прокручиваемое тело и подвал с «Отмена/Сохранить». На десктопе
   раскладка держится сама (диалог 520px в окне 1440), а на телефоне ломается иначе: диалог
   упирается в потолок и подвал уезжает под нижний край экрана, поля в две колонки не помещаются
   в 358px, вложенные блоки доставки уводят содержимое отступами на треть ширины.
   Ширина диалога фиксированной НЕ бывает — у .modal-dlg/.gps-modal width:100%, а разметка задаёт
   только max-width, — поэтому здесь правится высота, отступы и внутренние сетки.
   Правила стоят ПОСЛЕ базовых (в этом файле при равной специфичности побеждает последнее) и
   живут только в медиазапросах: десктопа (предохранитель 1440×900, #439) они не касаются. */

/* Планшет и телефон: модалка-карточка (CRSfmt.modal, .gps-*) должна прокручиваться телом, а не
   обрезаться. Тело — флекс-элемент с min-height:auto и потому НЕ сжимается ниже своего
   содержимого: длинная повестка плана дня или карточка повреждения с фотографиями перерастала
   max-height диалога, и её низ молча срезался overflow:hidden самого диалога — ни прокрутки,
   ни кнопок. Шапке запрещаем сжиматься: заголовок и «✕» остаются на месте при любом теле. */
@media (max-width:1000px){
  .gps-mhead{flex:none}
  .gps-mbody{flex:1 1 auto;min-height:0}
}

@media (max-width:640px){
  /* Поля вокруг диалога — 12/10px вместо 24/16: на экране 390px каждые 6px ширины видны в полях
     формы. max-height:100% — это высота ОВЕРЛЕЯ (position:fixed, inset:0) минус его поля; в
     отличие от 100vh она не включает полосу адреса мобильного браузера, из-за которой подвал с
     «Сохранить» оказывался ниже видимой части окна и до кнопки было не добраться. */
  .modal-ov{padding:12px 10px}
  .modal-dlg{max-height:100%}
  .gps-ov{padding:12px 10px}
  .gps-modal{max-height:100%}
  /* Шапка: отступы меньше, заголовок мельче и с переносом. Длинный заголовок («Добавить действие
     для транспортного средства …») иначе сдавливал «✕» до нуля — закрыть модалку было нечем. */
  .modal-head{padding:14px 16px}
  .modal-head h3{font-size:17px;line-height:1.3;min-width:0;overflow-wrap:anywhere}
  .modal-x{flex:none}
  .modal-body{padding:16px 14px}
  /* Кнопок в подвале бывает больше двух («Добавить бронь» + «Добавить сервис» у плана дня), а
     подписи на других языках длиннее наших: без переноса вторая кнопка вылезала за край диалога. */
  .modal-foot{padding:14px 16px;flex-wrap:wrap}
  /* Сетки полей внутри тела. Две колонки от 150px в диалоге шириной 370px оставляют от поля
     огрызок, а всплывающий календарь .dmp-cal (238px, left:0) в половинной колонке уезжал за
     правый край тела и обрезался его прокруткой. В один столбец влезает и поле, и календарь. */
  .modal-body .two-col{grid-template-columns:1fr}
  .dlv-sub{grid-template-columns:1fr}
  .dlv-fields{grid-template-columns:1fr}
  /* Вложенные блоки доставки: линия-ветка слева остаётся (утверждённый вид), но отступ 34+12px на
     КАЖДОМ из трёх уровней съедал бы 138px из 342px тела — на телефоне уводим в 14+10px. */
  .dlv-block{margin-left:14px;padding-left:10px}
  /* Модалка карты (shell.js): и прокрутку тела (overflow:hidden), и высоту холста (52vh) задаёт
     ИНЛАЙН-стиль разметки — перебить его можно только !important. Без этого на телефоне график
     скорости и подпись под картой обрезаны, а доскроллить до них нельзя. */
  .crs-map-ov .modal-body{overflow:auto!important}
  .crs-map-ov .veh-map-canvas{height:44vh!important}
}

/* ── ТЕЛЕФОН: кегль полей и габарит тач-целей (≤640px) ─────────────────────────────────────────
   Две беды оператора на телефоне, и обе лечатся размерами.

   1) SAFARI НА iOS ЗУМИТ страницу, когда фокус встаёт в поле с кеглем МЕНЬШЕ 16px, и обратно сам
      не отъезжает — масштаб сводят пальцами после КАЖДОГО поля. У нас поля идут 13–14px: часть
      через font:inherit (body 14px), часть своим font-size 13/13.5px, а поле без своего класса
      браузер рисует и вовсе 13.33px. То есть зумит всё подряд. Порог ровно 16px — меньше снова
      зум, больше не нужно.
   2) ЗНАЧОК-КНОПКА 19–30px пальцем не берётся: столько у действий строки реестра, пагинации,
      навигации календарей и крестиков модалок. Apple и Google просят ≈44/48px; берём 40px —
      нижнюю границу, которую утверждённый вид выдерживает без перекройки.

   ПОЧЕМУ БЛОК В САМОМ КОНЦЕ ФАЙЛА: медиазапрос специфичности НЕ добавляет, а при равной
   специфичности побеждает последнее правило. Подними блок выше базовых .pay-in/.ord-ctl/.iconbtn —
   и он молча перестанет работать. По той же причине селекторы ниже повторяют исходные целиком
   (вплоть до :not(.pct-out) у полей модалки): урезанный селектор проиграет по специфичности.

   ЧЕГО ЗДЕСЬ НЕТ (осознанно): ширин и раскладок. Их чинят медиаблоки выше (.pay-row, .cl-row,
   .filters-grid, модалки), и дублировать их здесь нельзя. Десктоп (≥641px) не меняется вовсе —
   его стережёт предохранитель 1440×900 (internal/webguard/desktop_1440_guard_test.go). */
@media (max-width:640px){
  /* ПОЛЯ — базовое правило: накрывает и те, у которых своего класса нет. Флажки, радио и
     ползунки исключены намеренно: кегль на их вид не влияет, а min-height растянул бы дорожку
     input[type=range] (пороги GPS §9, процент скидки/наценки) в сорокапиксельную коробку. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select,textarea{font-size:16px;min-height:40px}
  /* ПОЛЯ со своим кеглем: класс сильнее имени элемента, и базового правила им не хватает. Список
     закрывает ВСЕ объявления font-size / font:inherit на полях этого файла. Флажок внутри панели
     фильтров и сетки настроек исключён той же оговоркой — иначе у него осталась бы ширина 16px
     при высоте 40px. */
  .search,
  .zone-search,
  .cs-toggle,
  .filters-grid select,.filters-grid input:not([type=checkbox]),
  .filters-row select,.filters-row input:not([type=checkbox]),
  .set-grid input:not([type=checkbox]),.set-grid select,
  .sh-tools .inl-sel,
  .set-pager .pp,
  .pager select,
  .modal-body .fld input[type=text]:not(.pct-out),
  .modal-body .fld input[type=password],
  .modal-body .fld input[type=number],
  .modal-body .fld input[type=email],
  .dlv-sub input[type=text],
  .dlv-fields input[type=text],
  .wz-fld input,.wz-fld select,.wz-fld textarea,
  .dr-time select,
  .vehsel-q input,
  .cust-find-f input,
  .pay-in,
  .ord-ctl,
  .cp-in,
  .rng-out .rng-num,
  .pct-out{font-size:16px;min-height:40px}

  /* ТАЧ-ЦЕЛИ, текстовые. Смена display на inline-flex здесь ОБЯЗАТЕЛЬНА: у inline-block надпись
     остаётся у верхней кромки, и кнопка растёт пустотой вниз. Кабинет на флекс и так уже
     рассчитывает — .cl-acts .btn и .pl-acts .btn задают justify-content. */
  .btn,.add-link,.mini-link,.sec-views a{display:inline-flex;align-items:center;justify-content:center;min-height:40px}
  .hpop-item{display:flex;align-items:center;min-height:40px}
  /* Те, что содержимое центрируют сами (<button>, flex, grid), — только рост. Дни календарей
     (.dr-day, .dmp-day и распорка .dmp-grid>span) растут ТОЛЬКО в высоту: ширину им задаёт сетка
     из семи колонок внутри всплывашки 264/238px, и min-width вытолкнул бы неделю за её край. */
  .chip,.hdr-ctl,.set-add,.cs-item,.act-menu a,.nav-sub-a,.cs-actions button,.pay-refund,
  .pay-add-btn,.cust-add,.cust-acts .cust-view,.ext-no,.ext-toggle,.sum-details-btn,
  .set-map .mbtn,.chk,.filters-grid .filters-check,.filters-row .filters-check,
  .doc-varbtn,.doc-varitem,
  .dr-day,.dmp-day,.dmp-grid>span{min-height:40px}
  /* ТАЧ-ЦЕЛИ, значковые: и в высоту, и в ширину — в квадрат 26×26 палец не попадает ни по одной
     стороне. */
  .iconbtn,.modal-x,.gps-x,.doc-editor-x,.doc-tb,
  .acts a,.acts .off,.set-table .racts a,.set-table .racts span.off,
  .pager .pg,.pgn .pg,
  .dr-nav,.dmp-head button,.ext-q,
  .cust-x,.pay-x,.sum-veh-x,.icons-list .ico-copy{min-width:40px;min-height:40px}
  /* Значок копирования контакта (реестр клиентов) содержимое не центрировал — до сих пор он был
     ровно по размеру глифа, и центрировать было нечего. */
  .icons-list .ico-copy{align-items:center;justify-content:center}
  /* Тумблер остаётся 38×22 — это утверждённый вид. Растёт только НЕВИДИМЫЙ <input> поверх
     дорожки: нажатие ловит именно он. Сорок пикселей по центру дорожки свисают по 9px вверх и
     вниз, а между соседними тумблерами не меньше 22px (.mod-row 11+11, .notif-grid td 12+12,
     .set-table td 13+13) — в чужую строку нажатие не уйдёт. */
  .sw input{min-height:40px;top:50%;transform:translateY(-50%)}
  /* Свёрнутая панель редактора контакта — распорка ПОД СВОИ ЖЕ кнопки: они стали 40px, а старых
     30px им уже мало, и «развернуть» наезжало бы на строку поиска контакта. */
  .cust-edit.is-folded{min-height:44px}
  /* ИСКЛЮЧЕНИЕ: «×» скана документа лежит ПОВЕРХ миниатюры 80×60 — сорок пикселей накрыли бы сам
     документ, ради которого кнопка и нужна. Возвращаем исходный габарит.
     По той же причине НЕ тронуты «корона» основного клиента (.cust-crown, 19px на аватаре 30px),
     кнопки плитки фото (.up-thumb__primary / .up-thumb__rm, 19px на кадре 200×140) и знак «?»
     подсказки (.qh, 18px внутри строки подписи 12px): им нужен не другой размер, а расширенная
     зона нажатия псевдоэлементом — это отдельная работа, не размерная правка. */
  .cl-scan .iconbtn{min-width:20px;min-height:20px}
}

/* Поле периода в модалке истории перемещений — ТО ЖЕ поле-диапазон, что у брони (.ord-dates):
   одна строка на весь период с запасом по ширине. Узкий чип «cs-lite» вмещал едва одну дату,
   и вторая половина диапазона обрезалась (замечание владельца 21-09-2026). */
.gps-h-range{display:inline-flex;align-items:center;min-width:280px;cursor:pointer}

/* ── Карта истории перемещений ───────────────────────────────────────────────────────────────
   Пропорции — как у эталона: карта ПОЧТИ КВАДРАТНАЯ (у них ~1.55:1). Прежняя полоса высотой
   40vh на широком экране давала 2.7:1 — маршрут сплющивался в ленту, и город по вертикали не
   помещался (замечание владельца 21-09-2026). */
/* Вкладки «Карта» и «Данные» — ОДИН и тот же прямоугольник: высота обеих панелей считается
   одинаково, иначе при переключении окно меняет высоту и прыгает (замечание владельца 21-09-2026). */
.gps-h-map,.gps-h-data{aspect-ratio:16/10;max-height:62vh;min-height:320px;margin-bottom:10px}
.gps-h-map{border-radius:10px;background:var(--line);position:relative}
.gps-h-data{display:flex;flex-direction:column;gap:8px}
.gps-h-data[hidden]{display:none}          /* без этого класс display:flex перебил бы атрибут hidden */
.gps-h-data #gps-h-table{flex:1;min-height:0;overflow:auto}
.gps-h-data .pager{padding:0 6px}
/* Полноэкранный режим — как в эталоне: НА ВЕСЬ ЭКРАН УХОДИТ КАРТА, а не окно вокруг неё.
   Раздутая модалка (первый заход) оставляла карту в рамке вместе с шапкой и таблицей и выигрывала
   пару сантиметров — это другое поведение. Класс вешает общий контрол карты (crsMapControls). */
.map-full{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;
          max-height:none!important;aspect-ratio:auto!important;margin:0!important;border-radius:0!important;z-index:3000}
/* Пока карта развёрнута, страница под ней не прокручивается: иначе колесо над картой уводит
   документ, и при сворачивании человек оказывается не там, где был. */
body.map-full-open{overflow:hidden}
/* Штатный полноэкранный режим браузера: у карты нет фона, и без явной заливки по краям видны
   чёрные поля. Контролы держим поверх тайлов. */
.gps-h-map:fullscreen,.gps-h-map:-webkit-full-screen{width:100vw;height:100vh;max-height:none;aspect-ratio:auto;border-radius:0;background:var(--card)}

/* ── Контролы карты (общие, shell.js: crsMapControls) ────────────────────────────────────────
   Набор эталона: переключатель подложки «Карта | Спутник», «во весь экран» и пульт перемещения.
   Кнопки круглые и белые, как у них; слой выше тайлов, но ниже подсказок Leaflet. */
.map-ctl{position:absolute;top:10px;right:10px;z-index:500;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.map-ctl-row{display:flex;gap:6px;align-items:center}
.map-ctl-btn{background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 12px;font:600 13px/1 Poppins,sans-serif;
             color:var(--muted);cursor:pointer;box-shadow:0 1px 4px rgba(20,30,60,.18)}
.map-ctl-btn.on{color:var(--ink);border-color:var(--primary)}
.map-ctl-ico{width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid var(--line);cursor:pointer;
             display:grid;place-items:center;font-size:15px;color:var(--ink);box-shadow:0 1px 4px rgba(20,30,60,.18)}
.map-ctl-ico:hover,.map-ctl-btn:hover{border-color:var(--primary)}
/* Пульт: крестовина ↑ ← ✥ → ↓ и зум под ней — расположение как на пульте эталона. */
.map-pad{display:grid;grid-template-columns:repeat(3,36px);grid-template-rows:repeat(3,36px);gap:6px}
.map-pad[hidden]{display:none}
.map-pad-b{width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid var(--line);cursor:pointer;
           display:grid;place-items:center;font:700 16px/1 Poppins,sans-serif;color:var(--ink);box-shadow:0 1px 4px rgba(20,30,60,.18)}
.map-pad-b:hover{border-color:var(--primary)}
.map-pad-b[data-pan=up]{grid-area:1/2} .map-pad-b[data-pan=left]{grid-area:2/1}
.map-pad-c{grid-area:2/2;border-color:var(--primary)} .map-pad-b[data-pan=right]{grid-area:2/3}
.map-pad-b[data-pan=down]{grid-area:3/2} .map-pad-b[data-pan=in]{grid-area:1/3} .map-pad-b[data-pan=out]{grid-area:3/3}

/* Диалог-СООБЩЕНИЕ (.cdlg--info): одна кнопка «OK» по центру, КОНТУРНАЯ — она ничего не
   подтверждает и ничего не меняет, поэтому заливкой не кричит (требование владельца:
   «одна аккуратная зелёная кнопка ОК, не залитая внутри»). Заливку оставляем подтверждениям
   необратимых действий (.cdlg-yes у обычного confirm). */
.cdlg--info .modal-foot{justify-content:center}
.cdlg--info .btn.cdlg-yes{background:transparent;color:var(--primary);border:1.5px solid var(--primary);
                          min-width:120px;font-weight:600}
.cdlg--info .btn.cdlg-yes:hover{background:rgba(14,143,128,.08);border-color:var(--primary);color:var(--primary)}
/* Кнопка получает фокус сразу при открытии окна, и системная синяя обводка браузера спорит с
   зелёной кнопкой. Рисуем свой фокус — тем же цветом, что и сама кнопка. */
.cdlg--info .btn.cdlg-yes:focus{outline:none}
.cdlg--info .btn.cdlg-yes:focus-visible{outline:2px solid var(--primary);outline-offset:2px}