/* NEXT Enterprise — дизайн-система RC1 (design-system-rc1/next-design-system).
   Цвета и типографика — авторитетные токены из tokens/enterprise.css; геометрия
   (радиусы, высоты контролов, ширина сайдбара) — «proposed» значения из ui.css
   и Staff_UI_Interactive_Reference.html. Токены живут на .next-enterprise,
   без :root-переопределений (правило дизайн-системы). Шрифты Onest/JetBrains Mono
   не входят в поставку — используются, если установлены в системе, иначе системный стек. */

/* Общая часть дизайн-системы: не зависит от темы (геометрия, типографика, шкала
   контролов). Цвета живут в блоках темы ниже — иначе в тёмной теме эти токены
   остались бы неопределёнными: селектор [data-theme="light"] к ней не подходит. */
.next-enterprise {
  /* Кит-геометрия (proposed): радиус контролов, шаг, высота контрола */
  --next-ui-radius: 8px;
  --next-ui-gap: 12px;
  --next-ui-control-height: 40px;

  /* Единый стандарт интерфейса: кнопки, поля, иконочные кнопки и пилюли
     (бейджи/чипы/статусы) — одна шкала высот, радиусов и шрифтов. */
  --ctl-h: 40px;        /* обычный контрол: кнопка, поле, выпадающий список */
  --ctl-h-sm: 34px;     /* компактный: строки таблиц, карточки списков */
  --ctl-h-lg: 46px;     /* крупный: главные действия (вход, «К заполнению» на странице) */
  --ctl-radius: 8px;
  --ctl-font: 13px;
  --pill-h: 22px;       /* пилюля: бейдж, чип, статус — одинаковые у всех */
  --pill-radius: 6px;
  --pill-font: 12px;

  --r: 9px;
  --r-sm: 8px;

  /* Предпросмотр документа (PDF) — всегда светлый, независимо от темы кабинета */
  --doc-frame-bg: #FFFFFF;

  --font: "Onest Variable", Onest, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "DejaVu Sans Mono", Consolas, monospace;
}

/* Светлая палитра: базовая. Тёмная тема ниже переопределяет только цвета —
   локальные алиасы (--bg, --text, …) объявлены здесь один раз и указывают
   на --next-*: подмена палитры автоматически меняет и их. */
.next-enterprise[data-theme="light"],
.next-enterprise[data-theme="dark"] {
  color-scheme: light;
  --next-primary: #C9F24A;
  --next-primary-hover: #B8E23D;
  --next-primary-active: #A8D030;
  --next-primary-foreground: #11151A;
  --next-interactive: #245FD4;
  --next-interactive-hover: #1748BC;
  --next-interactive-active: #10388F;
  --next-focus-ring: #3973FF;
  --next-lime-ink: #55700E;
  --next-background: #F7F8F5;
  --next-card: #FFFFFF;
  --next-surface-subtle: #EEF1EC;
  --next-surface-raised: #FFFFFF;
  --next-surface-hover: #E8ECE8;
  --next-surface-active: #DDE4DE;
  --next-foreground: #11151A;
  --next-foreground-secondary: #43515C;
  --next-foreground-tertiary: #5E6B75;
  --next-border: #D9E0DF;
  --next-border-strong: #B8C3C4;
  --next-input: #829195;
  --next-overlay: #0B1117B8;
  --next-neutral-ink: #5E6B75;
  --next-success-ink: #16784D;
  --next-success-surface: #E7F7EF;
  --next-success-border: #92D6B5;
  --next-warning-ink: #8A5C00;
  --next-warning-surface: #FFF4D6;
  --next-warning-border: #EBCB78;
  --next-danger-ink: #C2344C;
  --next-danger-surface: #FDEBED;
  --next-danger-border: #F2A3AF;
  --next-info-ink: #245FD4;
  --next-info-surface: #E8EFFF;
  --next-info-border: #A9C1FF;

  /* Локальные алиасы приложения */
  --bg: var(--next-background);
  --panel: var(--next-card);
  --panel-2: var(--next-surface-subtle);
  --line: var(--next-border);
  --line-strong: var(--next-border-strong);
  --text: var(--next-foreground);
  --muted: var(--next-foreground-secondary);
  --muted-2: var(--next-foreground-tertiary);
  --accent: var(--next-interactive);
  --accent-2: var(--next-interactive-hover);
  --accent-soft: var(--next-info-surface);
  --accent-ring: rgba(57, 115, 255, .24);
  --accent-ink: #FFFFFF;               /* текст на плашке accent (аватар, счётчик) */
  --ok: var(--next-success-ink);
  --ok-soft: var(--next-success-surface);
  --warn: var(--next-warning-ink);
  --warn-soft: var(--next-warning-surface);
  --err: var(--next-danger-ink);
  --err-soft: var(--next-danger-surface);
  --info-soft: var(--next-info-surface);
  --warn-field-bg: #FFFBEF;            /* поле с предупреждением: чуть теплее фона */
  --danger-hover-bg: #FBDFE3;          /* «опасная» кнопка при наведении */

  /* Диоды состояния: свечение вокруг точки */
  --dot-ok-glow: rgba(22, 120, 77, .16);
  --dot-warn-glow: rgba(138, 92, 0, .16);
  --dot-err-glow: rgba(194, 52, 76, .18);
  --spinner-track: rgba(17, 21, 26, .25);

  --shadow: 0 20px 60px rgba(0, 0, 0, .19);
  --shadow-soft: 0 1px 2px rgba(17, 21, 26, .05);
  --shadow-pop: 0 12px 30px rgba(11, 17, 23, .16);
  --shadow-panel: 0 16px 40px rgba(11, 17, 23, .2);
}

/* Тёмная тема: переопределяем только палитру (WB-токены), алиасы наследуются.
   Контраст пар «чернила/фон» проверен по WCAG AA (не ниже 4.5:1) — тест в smoke. */
.next-enterprise[data-theme="dark"] {
  color-scheme: dark;
  --next-interactive: #9AB9FF;
  --next-interactive-hover: #BED0FF;
  --next-focus-ring: #7EA5FF;
  --next-lime-ink: #C9F24A;
  --next-background: #0D1117;
  --next-card: #151B23;
  --next-surface-subtle: #1B232D;
  --next-surface-raised: #1B232D;
  --next-surface-hover: #222C37;
  --next-surface-active: #2A3642;
  --next-foreground: #F3F6F8;
  --next-foreground-secondary: #CAD2D9;
  --next-foreground-tertiary: #A8B4BF;
  --next-border: #2C3742;
  --next-border-strong: #43515F;
  --next-input: #586A78;
  --next-overlay: #000000B8;
  --next-neutral-ink: #A8B4BF;
  --next-success-ink: #46D49A;
  --next-success-surface: #102D24;
  --next-success-border: #286E56;
  --next-warning-ink: #F0B64B;
  --next-warning-surface: #302613;
  --next-warning-border: #816522;
  --next-danger-ink: #FF8092;
  --next-danger-surface: #341A20;
  --next-danger-border: #8E3A49;
  --next-info-ink: #9AB9FF;
  --next-info-surface: #17284B;
  --next-info-border: #365FA5;

  --accent-ring: rgba(126, 165, 255, .30);
  --accent-ink: #0D1117;               /* на светлой плашке accent — тёмный текст */
  --warn-field-bg: #2A2113;
  --danger-hover-bg: #4A2029;

  --dot-ok-glow: rgba(70, 212, 154, .18);
  --dot-warn-glow: rgba(240, 182, 75, .18);
  --dot-err-glow: rgba(255, 128, 146, .20);
  --spinner-track: rgba(243, 246, 248, .28);

  --shadow: 0 20px 60px rgba(0, 0, 0, .55);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-pop: 0 12px 30px rgba(0, 0, 0, .5);
  --shadow-panel: 0 16px 40px rgba(0, 0, 0, .55);
}

/* Печать: страницы кабинета печатаются светлыми, независимо от выбранной темы
   (PDF и предпросмотр документа и так формируются на сервере в светлом виде). */
@media print {
  .next-enterprise[data-theme="dark"] {
    color-scheme: light;
    --next-interactive: #245FD4;
    --next-interactive-hover: #1748BC;
    --next-focus-ring: #3973FF;
    --next-lime-ink: #55700E;
    --next-background: #FFFFFF;
    --next-card: #FFFFFF;
    --next-surface-subtle: #EEF1EC;
    --next-surface-raised: #FFFFFF;
    --next-surface-hover: #E8ECE8;
    --next-surface-active: #DDE4DE;
    --next-foreground: #11151A;
    --next-foreground-secondary: #43515C;
    --next-foreground-tertiary: #5E6B75;
    --next-border: #D9E0DF;
    --next-border-strong: #B8C3C4;
    --next-input: #829195;
    --next-overlay: #0B1117B8;
    --next-neutral-ink: #5E6B75;
    --next-success-ink: #16784D;
    --next-success-surface: #E7F7EF;
    --next-success-border: #92D6B5;
    --next-warning-ink: #8A5C00;
    --next-warning-surface: #FFF4D6;
    --next-warning-border: #EBCB78;
    --next-danger-ink: #C2344C;
    --next-danger-surface: #FDEBED;
    --next-danger-border: #F2A3AF;
    --next-info-ink: #245FD4;
    --next-info-surface: #E8EFFF;
    --next-info-border: #A9C1FF;
    --accent-ink: #FFFFFF;
    --warn-field-bg: #FFFBEF;
    --danger-hover-bg: #FBDFE3;
    --shadow: none;
    --shadow-soft: none;
    --shadow-pop: none;
    --shadow-panel: none;
  }
  body { background: #FFFFFF; }
}

/* ── База ──────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font: 400 14px/20px var(--font); color: var(--text);
  background: var(--bg); font-synthesis: none;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); text-decoration: underline; }
h1 { font-size: 24px; line-height: 32px; font-weight: 600; margin: 0 0 14px; }
h2 { font-size: 16px; line-height: 22px; font-weight: 600; margin: 0 0 12px; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--next-focus-ring); outline-offset: 2px;
}
.i { flex: none; }

/* ── Каркас приложения ─────────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }

.sidebar {
  display: flex; flex-direction: column; gap: 6px; padding: 16px 12px;
  position: sticky; top: 0; height: 100vh;
  background: var(--panel); border-right: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 6px 16px; }
.brand:hover { text-decoration: none; }
.brand img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.brand-name { color: var(--text); font-weight: 600; font-size: 19px; line-height: 24px; letter-spacing: .05em; }
.brand-sub { color: var(--muted-2); font-size: 11px; line-height: 16px; }

.nav { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.nav-label { color: var(--muted-2); font-size: 11px; line-height: 16px; font-weight: 500; padding: 12px 12px 4px; }
.nav-link {
  display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 8px 12px;
  min-height: var(--ctl-h); border-radius: var(--ctl-radius); font-weight: 500; font-size: var(--ctl-font);
  transition: background .15s ease, color .15s ease;
}
.nav-link:hover { background: var(--next-surface-hover); color: var(--text); text-decoration: none; }
.nav-link.on { background: var(--next-surface-active); color: var(--text); box-shadow: inset 3px 0 0 0 var(--accent); }
.nav-link .i { opacity: .8; }

.side-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
/* Статус «Элемент» — пилюля в шапке (перенесена из подвала сайдбара) */
/* Статус «Элемент» в сайдбаре: одна строка — «Элемент», короткая оценка и диод.
   Строка «тихая» (как колокольчик и блок пользователя в шапке): фон — при наведении. */
.status-chip {
  display: flex; align-items: center; gap: 8px; padding: 0 10px; min-height: var(--ctl-h);
  border-radius: var(--ctl-radius); font-size: var(--ctl-font);
  color: var(--muted); background: transparent; border: 1px solid transparent;
  cursor: pointer; font: inherit; text-align: left; max-width: 100%; min-width: 0;
  transition: background .15s ease, border-color .15s ease;
}
.status-chip:hover { background: var(--panel-2); border-color: var(--line); }
.status-name { white-space: nowrap; }
.status-state { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-chip[data-state="green"] .status-state { color: var(--ok); }
.status-chip[data-state="red"] .status-state { color: var(--err); }
.status-chip[data-state="checking"] .status-state,
.status-chip[data-state="mock"] .status-state { color: var(--warn); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ok); box-shadow: 0 0 0 3px var(--dot-ok-glow); }
.dot.mock { background: var(--warn); box-shadow: 0 0 0 3px var(--dot-warn-glow); }
.dot.red { background: var(--err); box-shadow: 0 0 0 3px var(--dot-err-glow); animation: pulse-red 2s ease-in-out infinite; }
.dot.checking { background: var(--warn); box-shadow: 0 0 0 3px var(--dot-warn-glow); animation: pulse-red 1.6s ease-in-out infinite; }
@keyframes pulse-red { 50% { box-shadow: 0 0 0 6px var(--dot-err-glow); } }
/* Пользователь — в шапке: кнопка с аватаром, именем и ролью + выпадающее меню.
   Высота 38px — как у поля поиска и колокольчика: строка шапки выглядит ровной.
   По умолчанию кнопка «тихая» (без рамки и фона) — не спорит с полем поиска. */
.user-menu { position: relative; }
.user-menu-btn {
  display: flex; align-items: center; gap: 8px; height: var(--ctl-h); padding: 3px 7px 3px 3px; border-radius: var(--ctl-radius);
  background: transparent; border: 1px solid transparent; cursor: pointer; font: inherit; text-align: left;
  transition: background .15s ease, border-color .15s ease;
}
.user-menu-btn:hover, .user-menu-btn[aria-expanded="true"] { background: var(--panel-2); border-color: var(--line); }
.user-menu-btn .avatar { width: 30px; height: 30px; font-size: 12px; border-radius: 50%; background: var(--accent-soft); color: var(--next-info-ink); }
.user-menu-btn .user-info-text { min-width: 0; }
.user-menu-btn .user-name { line-height: 16px; }
.user-menu-btn .user-role { line-height: 14px; }
.user-menu-btn .chev { color: var(--muted-2); display: flex; }
.user-menu-pop {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; z-index: 40;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-pop); padding: 6px;
}
.user-menu-pop[hidden] { display: none; }
.user-menu-head { padding: 8px 10px 9px; font-size: 12.5px; color: var(--text); border-bottom: 1px solid var(--line); margin-bottom: 4px; line-height: 1.35; }
.user-menu-pop a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; color: var(--text); font-size: 13px; }
.user-menu-pop a:hover { background: var(--next-surface-hover); text-decoration: none; }
/* Переключатель темы в меню пользователя: три равные кнопки в ряд (светлая / тёмная /
   как в системе). Активная показывает действующий выбор; в тёмной теме видно сразу. */
.theme-switch { display: flex; gap: 4px; padding: 4px 6px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.theme-btn {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: var(--ctl-h-sm); padding: 0 8px; border-radius: var(--ctl-radius);
  border: 1px solid transparent; background: transparent; color: var(--muted);
  font: 500 12px/16px var(--font); cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.theme-btn:hover { background: var(--next-surface-hover); color: var(--text); }
.theme-btn.on { background: var(--next-surface-active); border-color: var(--line); color: var(--text); }
.theme-btn .i { flex: none; }
/* Поиск водителя в шапке (Ctrl+K) — единое поле: иконка, ввод, подсказка Ctrl K.
   Поле — единственное на экране (дубля на странице поиска нет), поэтому оно же
   показывает подсказки водителей (с 5 цифр) и принимает список номеров. */
.topbar-search {
  position: relative; flex: 1 1 260px; max-width: 430px; margin-left: 8px;
  display: flex; align-items: center; gap: 9px; padding: 0 8px 0 12px;
  height: var(--ctl-h); border-radius: var(--ctl-radius); background: var(--panel-2);
  border: 1px solid var(--line); color: var(--muted-2);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  overflow: hidden; /* скрытый текст не должен вылезать за скруглённые края поля */
}
.topbar-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); background: var(--panel); }
.topbar-search:focus-within .kbd { opacity: 0; }
.topbar-search-wrap { position: relative; flex: 1; min-width: 0; }
/* min-height сбрасываем: глобальный стиль textarea (40px) растягивал поле выше соседних кнопок */
.topbar-search textarea {
  display: block; width: 100%; height: 28px; min-height: 0; padding: 0; border: 0; background: transparent;
  outline: none; box-shadow: none; resize: none; overflow: hidden; white-space: pre;
  font: inherit; font-size: 13px; line-height: 28px; color: var(--text);
  scrollbar-width: none; /* Firefox: прокрутка внутри однострочного поля не нужна */
}
.topbar-search textarea::-webkit-scrollbar { display: none; }
.topbar-search textarea:focus { outline: none; border: 0; box-shadow: none; background: transparent; }
.topbar-search textarea::placeholder { color: var(--muted-2); }
.topbar-search .suggest { font-size: 13px; }
.kbd { flex: none; font-size: 11px; line-height: 16px; color: var(--muted-2); background: var(--panel); border: 1px solid var(--line); border-radius: var(--pill-radius); padding: 1px 7px; transition: opacity .15s ease; }
/* Колокольчик (администратор) и другие иконки шапки: «тихие» — без фона и рамки,
   фон проявляется при наведении; так правая часть шапки не перегружена плашками */
.icon-btn { position: relative; display: grid; place-items: center; width: var(--ctl-h); height: var(--ctl-h); border-radius: var(--ctl-radius); color: var(--muted); background: transparent; border: 1px solid transparent; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.icon-btn:hover { color: var(--text); text-decoration: none; background: var(--panel-2); border-color: var(--line); }
.badge-dot { position: absolute; top: 7px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--panel); }
.avatar {
  width: 34px; height: 34px; border-radius: 8px; flex: none; display: grid; place-items: center;
  font-weight: 600; font-size: 13px; color: var(--accent-ink); background: var(--accent);
}
/* Аватар водителя: круглая иконка человека; силуэт зависит от поля Sex (по умолчанию мужчина) */
.avatar-person { border-radius: 50%; background: var(--next-info-surface); color: var(--next-info-ink); }
.avatar-person .i { stroke-width: 1.9; }
.user-name { color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.user-role { color: var(--muted-2); font-size: 11px; white-space: nowrap; }
.logout-link { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 12px; padding: 7px; border-radius: 7px; }
.logout-link:hover { color: var(--text); background: var(--next-surface-hover); text-decoration: none; }

.main { min-width: 0; display: flex; flex-direction: column; }

/* ── Сворачиваемое боковое меню ──────────────────────────────────────────
   Класс nav-collapsed ставится на <html> (app.js; до отрисовки — inline-скрипт
   в base.html), состояние переживает перезагрузку через localStorage. */
.shell { transition: grid-template-columns .18s ease; }
.nav-collapsed .shell { grid-template-columns: 64px minmax(0, 1fr); }
.nav-collapsed .sidebar { padding-left: 10px; padding-right: 10px; }
.nav-collapsed .brand { justify-content: center; padding-left: 0; padding-right: 0; }
.nav-collapsed .brand-text,
.nav-collapsed .nav-label,
.nav-collapsed .nav-text,
.nav-collapsed .status-name { display: none; }
.nav-collapsed .nav-link { justify-content: center; padding: 8px; }
/* в свёрнутом меню остаётся только диод: слово не влезает в 64px и обрезалось бы */
.nav-collapsed .status-chip { justify-content: center; padding: 8px; }
.nav-collapsed .status-state { display: none; }

#nav-toggle { min-height: var(--ctl-h); width: var(--ctl-h); padding: 0; }
.topbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px;
  min-height: 64px; padding: 12px 24px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.crumbs { display: flex; align-items: center; gap: 8px; color: var(--muted-2); font-size: 13px; }
.crumbs b { color: var(--text); font-size: 14px; font-weight: 600; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
/* Узкие экраны: у шапочных блоков скрываются подписи, остаются иконки/диод */
@media (max-width: 1100px) {
  .topbar-search { max-width: 240px; }
  .user-menu-btn .user-info-text { display: none; }
  .user-menu-btn { padding: 4px 6px; }
}
/* Поиск в шапке прячем заранее: на узком экране он не влезает, а страница «Поиск водителя» доступна из меню */
@media (max-width: 1000px) {
  .topbar-search { display: none; }
}
.content { padding: 24px 26px 40px; width: 100%; }

/* ── Карточки, сетки ───────────────────────────────────────────────────── */
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 20px; margin-bottom: 16px;
  animation: rise .28s ease both;
}
/* Прокрутка только у карточек с таблицами (широкие списки не ломают сетку);
   остальным карточкам overflow не ограничиваем — иначе обрезаются выпадающие подсказки. */
.card:has(.table) { overflow-x: auto; }
@keyframes rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; flex-wrap: wrap; }
/* Акцентная подсветка — только у декоративной иконки заголовка. Иконка внутри кнопки
   наследует цвет кнопки: иначе на лаймовой кнопке синий карандаш почти не виден
   (контраст ~1.3:1), а у «удалить» терялся смысл цвета. */
.card-head .i { color: var(--accent); }
.card-head .btn .i { color: inherit; }
.card-title { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text); }
.card-head .right { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
/* Кнопка в состоянии «выполняется»: внутрь подставляется подпись вместо иконки, и без
   этих правил широкая кнопка вылезала за край карточки (обрезалась подписью). */
.btn[disabled] { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.grid { display: grid; gap: 16px; }
/* Колонки грида не растягиваются широким содержимым (таблицы, длинные строки):
   без этого карточка уезжает за экран и появляется горизонтальный скролл. */
.grid > * { min-width: 0; }
.cols-2 { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; }
.cols-2-wide { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 1020px) { .cols-2, .cols-2-wide { grid-template-columns: 1fr; } }

/* ── Кнопки ────────────────────────────────────────────────────────────── */
/* Основная кнопка — заливка лаймом (дизайн-система: lime только как filled CTA,
   не более 5–8 % экрана); вторичная — карточка с рамкой; ссылки — синие. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--ctl-h); padding: 8px 14px;
  border: 1px solid var(--next-primary); border-radius: var(--ctl-radius);
  font: 500 var(--ctl-font)/18px var(--font); cursor: pointer; text-decoration: none;
  white-space: nowrap; /* перенос текста менял высоту кнопки — строки «прыгали» */
  color: var(--next-primary-foreground); background: var(--next-primary);
  transition: background .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--next-primary-hover); border-color: var(--next-primary-hover); color: var(--next-primary-foreground); text-decoration: none; }
.btn:active { background: var(--next-primary-active); border-color: var(--next-primary-active); }
.btn.lg { min-height: var(--ctl-h-lg); padding: 11px 20px; font-size: 14px; }
/* Компактные кнопки для строк таблиц и карточек списков */
.btn.sm { min-height: var(--ctl-h-sm); padding: 5px 12px; gap: 6px; }
.btn.icon { min-height: var(--ctl-h-sm); width: var(--ctl-h-sm); padding: 0; }
.btn.soft { background: var(--panel); color: var(--text); border-color: var(--line-strong); }
.btn.soft:hover { background: var(--next-surface-hover); border-color: var(--line-strong); color: var(--text); }
.btn.danger { background: var(--err-soft); color: var(--err); border-color: var(--next-danger-border); }
.btn.danger:hover { background: var(--danger-hover-bg); border-color: var(--next-danger-border); color: var(--err); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn .i { margin-top: -1px; }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ── Бейджи, чипы, вспышки ─────────────────────────────────────────────── */
/* Статус — всегда тройка (чернила/фон/рамка) + обязательный текст на бейдже. */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; min-height: var(--pill-h);
  border-radius: var(--pill-radius); border: 1px solid var(--line);
  font-size: var(--pill-font); line-height: 16px; font-weight: 500; white-space: nowrap;
  background: var(--panel-2); color: var(--next-neutral-ink);
}
.badge.green { background: var(--next-success-surface); color: var(--next-success-ink); border-color: var(--next-success-border); }
.badge.red { background: var(--next-danger-surface); color: var(--next-danger-ink); border-color: var(--next-danger-border); }
.badge.orange { background: var(--next-warning-surface); color: var(--next-warning-ink); border-color: var(--next-warning-border); }
.badge.gray { background: var(--panel-2); color: var(--next-neutral-ink); border-color: var(--line); }
.badge.blue { background: var(--next-info-surface); color: var(--next-info-ink); border-color: var(--next-info-border); }
.badge.violet { background: var(--next-info-surface); color: var(--next-info-ink); border-color: var(--next-info-border); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; min-height: var(--pill-h);
  border-radius: var(--pill-radius); font-size: var(--pill-font); line-height: 16px; font-weight: 500;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.chip b { color: var(--text); font-weight: 600; }
.flash {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--r-sm); margin-bottom: 14px;
  font-size: 13px; border: 1px solid transparent; animation: rise .25s ease both;
}
.flash.ok { background: var(--next-success-surface); color: var(--next-success-ink); border-color: var(--next-success-border); }
.flash.err { background: var(--next-danger-surface); color: var(--next-danger-ink); border-color: var(--next-danger-border); }
.flash.warn { background: var(--next-warning-surface); color: var(--next-warning-ink); border-color: var(--next-warning-border); }
.flash .i { flex: none; }

/* Временный тост: всплывает сверху по центру и плавно исчезает (см. app.js).
   Центрирование через inset/margin (без translate — его перебивает анимация появления). */
.toast-top {
  position: fixed; top: 18px; inset-inline: 0; margin-inline: auto; width: fit-content;
  min-width: 300px; max-width: min(600px, 92vw); z-index: 60;
  margin-top: 0; margin-bottom: 0;
  box-shadow: var(--shadow-pop);
  transition: opacity .5s ease, transform .5s ease;
  animation: toast-in .28s ease both;
}
.toast-top.hide { opacity: 0; transform: translateY(-10px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ── Таблицы ───────────────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.table th {
  text-align: left; font-size: 11px; line-height: 16px; letter-spacing: .02em; color: var(--muted-2);
  font-weight: 600; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--panel-2);
}
/* Длинные значения (адреса, e-mail, VIN, счета) переносятся внутри ячейки,
   а не вылезают за её пределы. break-word (а не anywhere): колонки расширяются
   под короткие слова вместо переноса «Компани-я». */
.table td { padding: 8px 12px; line-height: 18px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: break-word; word-break: normal; }
.table th { overflow-wrap: break-word; word-break: normal; }
.table tr:last-child td { border-bottom: none; }
/* В узких колонках длинные статусы/источники переносятся по словам */
.table .badge { white-space: normal; }
/* Выравнивание колонки действий (редакции шаблона в панели документа) */
.table .right { text-align: right; }
.table .nowrap { white-space: nowrap; }
.table tbody tr { transition: background .12s ease; }
.table tbody tr:hover { background: var(--next-surface-hover); }
.num { font-variant-numeric: tabular-nums; }

/* ── Формы ─────────────────────────────────────────────────────────────── */
.field { margin-bottom: 13px; }
.label { display: block; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.input, input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=search], input[type=number], input[type=date], input[type=time], input[type=datetime-local],
input[type=url], select, textarea {
  width: 100%; min-height: var(--ctl-h); padding: 8px 11px;
  font-size: var(--ctl-font); line-height: 18px;
  border: 1px solid var(--next-input); border-radius: var(--next-ui-radius);
  font: 400 14px/20px var(--font); color: var(--text); background: var(--panel);
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* Нативные пикеры (календарь, число): выравниваем по общей шкале контролов и не даём
   растягиваться на всю ширину — в строке фильтров это выглядело неаккуратно.
   Иконку календаря рисует браузер по color-scheme темы (см. блоки тем выше). */
input[type=number] { width: auto; }
input[type=date], input[type=time], input[type=datetime-local] { width: auto; min-width: 152px; padding-right: 8px; }
input[type=date]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .75; }
input[type=date]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
input[type=date]::-webkit-datetime-edit { padding: 0; }
input[type=date]::-webkit-datetime-edit-fields-wrapper { padding: 0; }

/* Период в фильтрах: подписи «с» и «по» стоят вплотную к своим полям */
.date-range { display: inline-flex; align-items: center; gap: 6px; }
.date-range > label { flex: none; margin: 0; }
.date-range > input[type=date] { flex: none; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
input[readonly] { background: var(--panel-2); color: var(--muted); }
/* Селект: своя стрелка вместо системной, текст обрезается — длинные подписи шаблонов
   больше не растягивают сетку и не вылезают за карточку (ширина нативный select
   считает по самой длинной опции, поэтому ограничиваем min-width) */
select {
  appearance: none; -webkit-appearance: none; min-width: 0; max-width: 100%;
  padding-right: 34px; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
select::-ms-expand { display: none; }
/* Компактное поле для строк таблиц */
.input-sm { min-height: var(--ctl-h-sm); padding: 5px 10px; }
/* Современный выбор файла: нативный input скрыт, стилизованная зона клика */
.file-drop {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer;
  border: 1px dashed var(--next-border-strong); border-radius: 8px; background: var(--panel-2);
  color: var(--muted); font-size: 13px; max-width: 560px;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.file-drop:hover { border-color: var(--accent); background: var(--accent-soft); }
.file-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-drop .i { color: var(--muted-2); }
.file-drop b { color: var(--text); }
.file-drop.has-file { border-style: solid; border-color: var(--next-success-border); background: var(--next-success-surface); color: var(--next-success-ink); }
.file-drop.has-file .i, .file-drop.has-file b { color: var(--next-success-ink); }
/* Сетка полей формы. Область подписи у всех полей одинаковая: две строки текста плюс
   строка бейджа источника («Элемент (водитель)», «расчёт — проверьте», «не заполнено»).
   Без этого бейдж переносился на вторую строку только у части полей, и поля в одной
   строке стояли на разной высоте — строки «прыгали». */
.grid-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 4px 18px; align-items: start; }
.grid-fields .field { display: flex; flex-direction: column; min-width: 0; }
.grid-fields .field > .label {
  display: grid; grid-template-rows: 32px 20px; align-content: start; gap: 3px;
  overflow: hidden; margin-bottom: 5px;
}
.grid-fields .field > .label .badge { justify-self: start; }
.field.warn .input, .field.needs-input input { border-color: var(--next-warning-border); background: var(--warn-field-bg); }
/* Незаполненное поле: красная рамка и подложка — пропуск видно ещё до отправки формы */
.field.miss input, .field.miss .input { border-color: var(--err); background: var(--err-soft); }
.field.miss .label { color: var(--err); }
/* Расчётное значение заполнено программой: это уведомление (проверьте), а не ошибка */
.field.calc input, .field.calc .input { border-color: var(--next-warning-border); background: var(--warn-soft); }
.gaps-bar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 0;
  padding: 10px 12px; border: 1px solid var(--err); border-radius: 10px; background: var(--err-soft);
  font-size: 13px; color: var(--err);
}
.gaps-bar.ok { border-color: var(--next-success-border, var(--line)); background: var(--ok-soft); color: var(--ok); }
.gaps-bar .gap-chip {
  border: 1px solid currentColor; background: var(--panel); color: inherit;
  border-radius: 999px; padding: 2px 9px; font-size: 12px; cursor: pointer;
}
.gaps-bar .gap-chip:hover { background: var(--panel-2); }
.kv { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: 6px 16px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
/* Карточка сотрудника: «Настроить» раскрывает панель под строкой таблицы.
   В узкой колонке форма представителя растягивала строку и читалась плохо. */
.row-actions { display: flex; gap: 6px; align-items: center; } /* кнопки в одну строку: колонка шире по содержимому */
.user-panel-row > td { padding: 0 12px 12px; border-bottom: 1px solid var(--line); }
.user-panel {
  display: grid; grid-template-columns: minmax(320px, 1.15fr) minmax(240px, .85fr); gap: 18px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px;
}
.panel-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.panel-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 12px; margin-top: 10px; }
/* Блок «Права доступа» занимает всю ширину панели сотрудника: таблицы ролей и прав
   в узкой колонке сжимались и переносились по слогам. */
.user-panel .panel-wide { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 12px; }
.access-table { margin-bottom: 10px; }
.access-table th { font-size: 12px; }
.access-table td { vertical-align: middle; }
@media (max-width: 900px) { .user-panel { grid-template-columns: 1fr; gap: 14px; } }

.inline-form { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.inline-form > div { flex: 1; min-width: 170px; }
/* Поле временного пароля в админке: сгенерировать и скопировать — рядом с полем */
.pass-field { display: flex; gap: 6px; align-items: center; }
.pass-field input { flex: 1 1 auto; min-width: 0; }
.pass-field .btn { flex: 0 0 auto; }
/* Форма «Новый пользователь»: ровная сетка вместо flex-строки. Подписи и подсказки
   занимают свои строки, поэтому поля в ряду стоят на одной высоте, а широкое поле
   (регионы) и кнопка занимают всю ширину. */
.user-create { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 18px; }
.user-create .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.user-create .field > .label { min-height: 20px; }
.user-create .field > .small { line-height: 16px; }
.user-create .wide { grid-column: 1 / -1; }
.user-create .actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Подсказка о пароле — к правому краю строки: строка не выглядит полупустой */
.user-create .actions > .small { margin-left: auto; }
/* Сброс пароля прямо в строке таблицы пользователей: поле не сжимается до нуля,
   кнопки не переносятся — строка таблицы остаётся ровной. */
.pass-reset { display: flex; align-items: center; gap: 6px; }
.pass-reset input { min-width: 130px; flex: 1 1 150px; }
.pass-reset .btn { flex: 0 0 auto; white-space: nowrap; }
/* Набор чекбоксов (регионы оператора и т.п.). Раскладываем по ширине блока: списком
   влево они оставляли пустую половину карточки. */
.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; padding: 4px 0; }
.checks .check { min-width: 0; }
.check { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.check input { accent-color: var(--accent); }

/* ── Поиск ─────────────────────────────────────────────────────────────── */
.hero { padding: 26px 24px 22px; }
.hero h1 { margin-bottom: 4px; }
.search-form { display: flex; gap: 10px; margin-top: 14px; align-items: flex-start; }
.search-input-wrap { position: relative; flex: 1; }
.search-input-wrap .i { position: absolute; left: 14px; top: 15px; color: var(--muted-2); }
.search-input-wrap input {
  padding: 13px 14px 13px 44px; font-size: 16px; border-radius: 10px;
}
/* Многострочный поиск: несколько номеров за раз; высота растёт по содержимому (app.js) */
.search-input-wrap textarea {
  width: 100%; padding: 13px 14px 13px 44px; font-size: 16px; border-radius: 10px;
  border: 1px solid var(--next-input); background: var(--panel); color: var(--text);
  font-family: inherit; line-height: 1.45; resize: none; overflow-y: auto; min-height: 52px; max-height: 160px;
}
.search-input-wrap textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
/* Подсказки по номеру из локальной базы водителей (с 5 цифр) */
.suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow-pop); overflow: hidden;
}
.suggest-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 13px; cursor: pointer;
  border-bottom: 1px solid var(--line); font-size: 13px;
}
.suggest-item:last-child { border-bottom: none; }
.suggest-item:hover, .suggest-item.active { background: var(--next-surface-hover); }
.suggest-main { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-phone { color: var(--muted); }
.suggest-note { padding: 10px 13px; font-size: 12.5px; color: var(--muted-2); }
.result-list { display: flex; flex-direction: column; gap: 10px; }
.result-card {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--panel); transition: border-color .12s ease;
  animation: rise .25s ease both;
}
.result-card:hover { border-color: var(--line-strong); }
.result-main { min-width: 0; flex: 1; }
.result-name { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.result-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.result-side { text-align: right; display: flex; flex-direction: column; align-items: end; gap: 8px; }
.balance { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; }
.balance.neg { color: var(--err); }

/* ── Карточка водителя ─────────────────────────────────────────────────── */
.drv-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.drv-head .avatar { width: 56px; height: 56px; border-radius: 12px; font-size: 19px; }
.drv-id { flex: 1 1 320px; min-width: 260px; }
.drv-title { font-size: 20px; line-height: 28px; font-weight: 600; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Действия карточки — отдельным блоком справа: кнопка обновления не наезжает на бейдж */
.drv-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-self: flex-start; }
/* Строка источника данных: актуальность сведений и нужен ли запрос в «Элемент» */
.src-note {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 10px; font-size: 12.5px; line-height: 18px; color: var(--muted);
}
.src-note .sep { color: var(--muted-2); }
.src-note .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ok); box-shadow: 0 0 0 3px var(--dot-ok-glow); }
.src-note .dot.blue { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.src-note.need { color: var(--warn); }
.src-note.need .dot { background: var(--warn); box-shadow: 0 0 0 3px var(--dot-warn-glow); }
/* Раскладка карточки: слева сведения, справа оформление и справка (панель «липнет» при прокрутке) */
.drv-layout { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.drv-main { display: grid; gap: 16px; min-width: 0; }
.drv-aside { display: grid; gap: 16px; position: sticky; top: 16px; min-width: 0; }
@media (max-width: 1100px) {
  .drv-layout { grid-template-columns: 1fr; }
  .drv-aside { position: static; }
}
/* Справка: подсказки по карточке, сворачивается одним кликом */
.help-card { padding: 12px 16px; }
.help-card > summary { cursor: pointer; list-style: none; user-select: none; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.help-card > summary::-webkit-details-marker { display: none; }
.help-card > summary::after { content: "▾"; margin-left: auto; color: var(--muted-2); }
.help-card:not([open]) > summary::after { content: "▸"; }
.help-list { margin: 10px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.help-list li { margin: 6px 0; }
.help-list b { color: var(--text); font-weight: 600; }
/* Свёрнутые истории в карточке водителя (ТС, договоры): строка-переключатель */
.ts-history { margin-top: 10px; }
.ts-history > summary { cursor: pointer; list-style: none; user-select: none; }
.ts-history > summary::before { content: "▸ "; }
.ts-history[open] > summary::before { content: "▾ "; }

/* Область применения шаблона (регион/подразделения): строка-сводка + компактная форма */
.scope-row { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 10px; }
.scope-edit > summary { cursor: pointer; list-style: none; user-select: none; }
.scope-form { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.scope-fields { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.scope-f { display: flex; flex-direction: column; }
.scope-f select { width: auto; min-width: 180px; }
.scope-f .label { margin-bottom: 4px; }
.scope-fields > .btn { align-self: center; margin-top: 14px; }

/* Вкладка «Шаблоны»: быстрый поиск, группы по типу договора, компактные карточки */
.tpl-filter-card { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 4px; }
.tpl-filter-card > svg { color: var(--muted-2); flex: none; }
.tpl-filter-card input[type="search"] { flex: 1 1 auto; max-width: 520px; }
.tpl-group { font-size: 15px; margin: 18px 0 10px; }
.tpl-group .muted { font-weight: 400; }
.tpl-card .card-head { margin-bottom: 8px; }
.tpl-meta { margin: 0 0 8px; }
.tpl-tools { display: flex; gap: 18px 22px; flex-wrap: wrap; }
.tpl-tools > details { flex: 0 1 auto; }
.tpl-tools > details[open] { flex: 1 1 100%; }
.tpl-tools > details > summary {
  cursor: pointer; list-style: none; user-select: none;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent); font-size: 13px;
}
.tpl-tools > details[open] > summary { color: var(--text); }
.meta-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
/* Карточка формирования: акцент — лаймовая кромка и основная CTA-кнопка */
.cta-card { position: relative; overflow: hidden; }
.cta-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--next-primary); }
.cta-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.cta-grid > * { min-width: 0; }
/* В правой колонке карточки места мало: поля друг под другом, кнопка на всю ширину —
   иначе сетка «1fr 1fr auto» распирала карточку длинными подписями шаблонов */
.drv-aside .cta-grid { grid-template-columns: 1fr; }
.drv-aside .cta-grid .btn { width: 100%; justify-content: center; }
@media (max-width: 900px) { .cta-grid { grid-template-columns: 1fr; } }

/* ── Форма заполнения ──────────────────────────────────────────────────── */
.group { margin-bottom: 15px; }
.group-head {
  display: flex; align-items: center; gap: 9px; font-size: 16px; line-height: 22px; font-weight: 600;
  color: var(--text); margin: 20px 0 10px;
}
.group-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.words { margin-top: 7px; font-size: 13px; min-height: 18px; color: var(--ok); font-weight: 600; }
.sticky-bar {
  position: sticky; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; margin: 20px -6px 0; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
}
.sticky-bar .hint { color: var(--muted); font-size: 13px; }

/* ── Документ ──────────────────────────────────────────────────────────── */
.doc-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.doc-actions form { display: flex; align-items: center; gap: 10px; margin: 0; }
.doc-actions select { width: auto; min-width: 210px; }
/* Шапка предпросмотра: действия документа в одну строку, с переносом на узких экранах */
.head-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
/* Журнал документов: строка фильтра и постраничная навигация */
.docs-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: 0 0 12px; }
.docs-filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.docs-filter input[type="search"] { flex: 1 1 240px; max-width: 340px; }
.docs-filter select { width: auto; }
.docs-filter .date-range > label { color: var(--muted); font-size: 12px; line-height: 16px; }
/* Пагинация размещается над таблицей (в тулбаре справа или сразу под шапкой карточки) */
.pager { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.docs-toolbar .pager { margin: 0 0 0 auto; }
.pager-size { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pager-size select { width: auto; }
.btn.disabled { opacity: .45; pointer-events: none; }
/* Предпросмотр документа остаётся светлым в любой теме: под белым PDF виден
   именно он, а не фон кабинета. */
.doc-frame { width: 100%; height: 76vh; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--doc-frame-bg); }
/* Развёрнутый предпросмотр: карточка занимает весь экран */
body.preview-open { overflow: hidden; }
.card.preview-full {
  position: fixed; inset: 0; z-index: 44; margin: 0; border-radius: 0; border: none;
  display: flex; flex-direction: column; padding: 14px 16px;
}
.card.preview-full .doc-frame { flex: 1; height: auto; }
.card.preview-full [data-pdf-fallback] { flex: 1; }
.doc-meta { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 16px; }

/* ── Табы (сегментный контрол) ─────────────────────────────────────────── */
.seg {
  display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: var(--ctl-radius);
  background: var(--panel-2); margin-bottom: 18px; flex-wrap: wrap;
}
.seg a { padding: 7px 15px; border-radius: var(--pill-radius); color: var(--muted); font-size: var(--ctl-font); font-weight: 500; }
.seg a:hover { color: var(--text); text-decoration: none; background: var(--next-surface-hover); }
.seg a.on { background: var(--next-surface-active); color: var(--text); font-weight: 600; }

/* ── Редактор шаблона ──────────────────────────────────────────────────── */
.problem-card {
  border: 1px solid var(--next-danger-border); border-left: 4px solid var(--next-danger-ink);
  border-radius: var(--r-sm); background: var(--next-danger-surface);
  padding: 12px 14px; margin-bottom: 12px;
}
.problem-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tok {
  display: inline-block; padding: 1px 6px; border-radius: 5px; font-family: var(--mono); font-size: 12px;
  line-height: 18px; border: 1px solid transparent;
}
.tok-ok { background: var(--next-info-surface); color: var(--next-info-ink); border-color: var(--next-info-border); }
.tok-bad { background: var(--next-danger-surface); color: var(--next-danger-ink); border-color: var(--next-danger-border); }
a.tok-bad:hover { text-decoration: none; filter: brightness(.96); }
.tok-suggest { cursor: pointer; font-family: var(--mono); }
.tok-suggest:hover { background: var(--next-surface-active); }
.paragraphs { display: flex; flex-direction: column; }
.para { padding: 7px 2px; border-bottom: 1px dashed var(--line); font-size: 13px; line-height: 1.7; overflow-wrap: break-word; }
.para:last-child { border-bottom: none; }
.para-view { min-width: 0; }
.para-edit summary { color: var(--accent); font-size: 12px; padding: 4px 0; }
.para-form textarea.para-input { width: 100%; margin: 8px 0 6px; font-size: 13px; font-family: var(--mono); }
.para-extra { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 10px; }
.para-extra form { flex: 1; min-width: 280px; }
/* Панель структуры абзаца: перемещение, выравнивание, отступы, интервалы */
.para-struct { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 10px; }
.para-struct-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 5px; }
/* Всплывающая палитра параметров Элемента (правой кнопкой мыши в поле абзаца) */
.tok-pop {
  position: fixed; z-index: 70; width: 390px; max-width: calc(100vw - 24px);
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow-panel); overflow: hidden;
}
.tok-pop input {
  width: 100%; border: none; border-bottom: 1px solid var(--line); border-radius: 0;
  min-height: 40px; padding: 9px 12px; font-size: 13px;
}
.tok-pop input:focus { box-shadow: none; border-color: var(--line); border-bottom-color: var(--accent); }
.tok-pop-list { max-height: 250px; overflow: auto; }
.tok-pop-item { display: flex; align-items: baseline; gap: 10px; padding: 7px 12px; cursor: pointer; font-size: 12.5px; }
.tok-pop-item:hover, .tok-pop-item.active { background: var(--next-surface-hover); }
.tok-pop-item b { font-family: var(--mono); font-size: 12px; color: var(--text); flex: none; }
.tok-pop-item span { color: var(--muted-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tok-pop-empty { padding: 12px; font-size: 12.5px; color: var(--muted-2); }
.tok-pop-hint { padding: 7px 12px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted-2); background: var(--panel-2); }
/* Таблица состава параметров: столбцы разведены, длинные ключи не наезжают на расшифровку */
.params-table td, .params-table th { padding: 8px 14px; }
.params-table td:first-child, .params-table th:first-child { min-width: 250px; }
.params-table td:nth-child(2), .params-table th:nth-child(2) { min-width: 220px; }

/* ── Логин ─────────────────────────────────────────────────────────────── */
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--bg); }
.login-card {
  width: 100%; max-width: 400px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 28px 28px 24px; box-shadow: var(--shadow);
  animation: rise .3s ease both;
}
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.login-brand img { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.login-brand-name { font-weight: 600; font-size: 19px; letter-spacing: .05em; }
.login-brand-sub { color: var(--muted-2); font-size: 12px; }
.login-note { color: var(--muted-2); font-size: 12px; margin-top: 14px; text-align: center; }

/* ── Разное ────────────────────────────────────────────────────────────── */
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-family: var(--mono); font-size: 12px; }
hr.sep { border: none; border-top: 1px solid var(--line); margin: 16px 0; }
details summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 6px 0; }
details[open] summary { color: var(--text); }
.spinner { width: 15px; height: 15px; border: 2px solid var(--spinner-track); border-top-color: var(--next-foreground); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
.btn .spinner { border-color: var(--spinner-track); border-top-color: var(--next-primary-foreground); }
.btn.soft .spinner, .btn.danger .spinner { border-color: var(--accent-ring); border-top-color: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Выдвижной drawer (отчёт заполнения справа) ────────────────────────── */
body.drawer-open { overflow: hidden; }
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 40; background: var(--next-overlay);
  opacity: 0; transition: opacity .25s ease;
}
.drawer-backdrop.open { opacity: 1; }
.drawer-backdrop[hidden] { display: none; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 45; width: min(580px, 100%);
  background: var(--panel); border-left: 1px solid var(--line);
  box-shadow: var(--shadow-panel);
  transform: translateX(100%); transition: transform .28s ease;
  display: flex; flex-direction: column;
}
.drawer[hidden] { display: none; }
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.drawer-head .btn { margin-left: auto; }
.drawer-body { padding: 14px 18px 24px; overflow: auto; }

/* ── Модальное окно (состояние Элемента) ───────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px;
  background: var(--next-overlay);
}
.modal[hidden] { display: none; }
.modal-card {
  width: min(680px, 100%); max-height: 84vh; overflow: auto; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px;
  box-shadow: var(--shadow);
  animation: rise .2s ease both;
}
.modal-body {
  margin: 0; padding: 14px 16px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
  max-height: 46vh; overflow: auto;
}
/* Строка инструментов над текстом отчёта: копирование в один клик */
.modal-tools { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.empty { text-align: center; color: var(--muted); padding: 28px 10px; }
.empty .i { color: var(--muted-2); margin-bottom: 8px; }

/* ── Сравнение редакций шаблона (history/diff) ─────────────────────────── */
.diff-pick { align-items: flex-end; gap: 14px; margin: 0 0 14px; }
.diff-pick select { min-width: 280px; }
.diff-arrow { align-self: flex-end; padding: 0 2px 10px; color: var(--muted-2); font-size: 18px; }
.diff-stats { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.diff-body { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.diff-row { display: flex; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--line); background: var(--panel); }
.diff-row:last-child { border-bottom: 0; }
.diff-row p { margin: 0; line-height: 1.45; font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }
.diff-mark { flex: 0 0 1em; color: var(--muted-2); font-weight: 700; user-select: none; }
.diff-eq p { color: var(--muted-2); }
.diff-del { background: var(--next-danger-surface); }
.diff-del .diff-mark { color: var(--next-danger-ink); }
.diff-ins { background: var(--next-success-surface); }
.diff-ins .diff-mark { color: var(--next-success-ink); }
.diff-row .hl { background: var(--next-danger-border); border-radius: 3px; padding: 0 2px; }
.diff-ins .hl { background: var(--next-success-border); }
.diff-gap { text-align: center; color: var(--muted-2); font-size: 12px; padding: 5px 12px; background: var(--panel-2); border-bottom: 1px solid var(--line); }

/* ── Документация (база знаний) и техподдержка ─────────────────────────── */
/* Экран поиска: подсказки-чипы под заголовком (само поле поиска — в шапке) */
.hint-row { display: flex; flex-wrap: wrap; gap: 8px; }
.hint-row .chip { display: inline-flex; align-items: center; gap: 6px; }
.hint-row .kbd { margin: 0 1px; }
.help-toc { margin: 0; padding-left: 20px; columns: 2; column-gap: 28px; font-size: 13.5px; line-height: 24px; }
.help-list { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 21px; display: flex; flex-direction: column; gap: 7px; }
.help-list b { color: var(--text); }
@media (max-width: 860px) {
  .help-toc { columns: 1; }
}

/* ── Недавние поиски (история за 24 часа на экране поиска) ─────────────── */
/* Недавние поиски: строка = время слева, номер и результат справа.
   Раньше это было «одно полотно» из чипов и текста — теперь есть колонка времени,
   бейдж результата и явное действие «повторить». */
.hist-row {
  display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px;
  align-items: start; padding: 12px 10px; margin: 0 -10px;
  border-bottom: 1px solid var(--line); border-radius: 8px;
  transition: background .15s ease;
}
.hist-row:hover { background: var(--next-surface-hover); }
.hist-row:last-of-type { border-bottom: 0; }
.hist-time {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  font-size: 12.5px; color: var(--muted); padding-top: 2px;
}
.hist-found {
  min-width: 20px; text-align: center; font-size: 11px; font-weight: 600;
  padding: 1px 6px; border-radius: 999px; color: var(--ok); background: var(--ok-soft);
}
.hist-body { min-width: 0; }
.hist-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hist-q { font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: .2px; }
.hist-q:hover { color: var(--accent); }
.hist-repeat { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.hist-repeat:hover { color: var(--accent); text-decoration: none; }
.hist-hits { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hist-hit { display: inline-flex; align-items: center; gap: 6px; color: var(--text); background: var(--panel-2); }
.hist-hit:hover { border-color: var(--accent); text-decoration: none; background: var(--panel); }
.hist-hit .avatar { border-radius: 50%; }
@media (max-width: 640px) {
  .hist-row { grid-template-columns: 1fr; gap: 6px; }
  .hist-time { flex-direction: row; align-items: center; }
}

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; padding: 10px 14px; gap: 10px; border-right: none; border-bottom: 1px solid var(--line); }
  .brand { padding: 0 6px; }
  .brand img { width: 34px; height: 34px; }
  .brand-sub { display: none; }
  .nav { flex-direction: row; margin: 0; }
  .nav-label { display: none; }
  .nav-link.on { box-shadow: none; }
  .side-bottom { margin: 0; flex-direction: row; }
  .status-chip { display: none; }
  .topbar-user { padding: 4px 8px; }
  .user-role { display: none; }
  .content { padding: 16px 14px 30px; }
}

/* ── Адаптивность узких экранов ──────────────────────────────────────────
   Строка шапки, боковое меню-полоса, вкладки и многоколоночные блоки
   перестраиваются так, чтобы ничего не сжималось и не выезжало. */
@media (max-width: 1000px) {
  .topbar-search { display: none; } /* поиск — из меню «Поиск водителя» */
}
@media (max-width: 860px) {
  /* На узком экране режим «свёрнутого» меню не применяем: меню — лента сверху.
     Правило .nav-collapsed .shell специфичнее .shell, поэтому переопределяем явно. */
  .nav-collapsed .shell { grid-template-columns: 1fr; }
  .nav-collapsed .sidebar { padding: 10px 14px; }
  .nav-collapsed .brand { justify-content: flex-start; padding: 0 6px; }
  .nav-collapsed .brand-text { display: inline; }
  .nav-collapsed .nav-text { display: inline; }
  .nav-collapsed .nav-link { justify-content: flex-start; padding: 8px 12px; }
  #nav-toggle { display: none; } /* сворачивать ленту сверху нечего */
  /* меню-полоса сверху не растягивается на всю высоту: строки идут по контенту */
  .shell { grid-template-rows: auto 1fr; align-content: start; }
  .sidebar { row-gap: 8px; }
  .side-bottom { width: 100%; border-top: 1px solid var(--line); padding-top: 8px; justify-content: flex-start; }
  .topbar { padding: 10px 14px; gap: 10px; min-height: 56px; flex-wrap: wrap; }
  .crumbs { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-right { gap: 8px; }
  /* вкладки админки прокручиваются, а не сжимаются в нечитаемую строку */
  .seg { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  .seg a { white-space: nowrap; }
  /* карточка водителя и формы — в одну колонку */
  .drv-layout { grid-template-columns: 1fr; }
  .drv-actions { justify-content: flex-start; }
  .grid { gap: 12px; }
  .grid-fields { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* «подпись — значение» превращается в две строки */
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dt { margin-top: 8px; }
  .doc-meta .chip { white-space: normal; }
  .pager { flex-wrap: wrap; }
}