/* ============================================================
   Athena · Marble UI — design tokens & primitives
   ============================================================ */

:root {
  /* Surfaces — cool, official, neutral blue-gray */
  --paper: #F4F6FA;
  --surface: #FFFFFF;
  --surface-2: #ECF0F7;
  --ink: #0E1A2E;
  --ink-2: #243246;
  --mute: #5C6A80;
  --mute-2: #8B97AB;
  --hairline: rgba(14, 26, 46, 0.10);
  --hairline-strong: rgba(14, 26, 46, 0.18);

  /* Brand — deep steel-navy, stricter & darker than Aviasales blue */
  --primary: #15355D;
  --primary-deep: #0B2347;
  --primary-soft: #DBE5F2;
  --primary-mid: #2C5C9C;
  --accent: #2C5C9C;
  --accent-deep: #1E467D;
  --accent-soft: #D7E2F1;

  /* Legacy aliases — keep names, repoint to new palette so all old selectors work */
  --olive: var(--primary);
  --olive-deep: var(--primary-deep);
  --olive-soft: var(--primary-soft);
  /* "Bronze" name kept for compatibility; now repointed to neutral signal-blue (in-progress) */
  --bronze: #2C5C9C;
  --bronze-deep: #1E467D;
  --bronze-soft: rgba(44, 92, 156, 0.12);
  --rust: #7A2E2E;            /* now bordeaux for problems / reopened */
  --amber: #C77A29;           /* kept as legacy; not used in new scheme */
  --plum: #543B5C;
  --stone: #8B97AB;
  --problem: #7A2E2E;         /* bordeaux — problem / blocker */
  --problem-deep: #5A1F1F;
  --problem-soft: rgba(122, 46, 46, 0.10);
  --signal-done: #1B6E4B;     /* green — completed / ready */
  --signal-done-soft: rgba(27, 110, 75, 0.10);
  --signal-active: #2C5C9C;   /* neutral blue — in motion / running */
  --signal-active-soft: rgba(44, 92, 156, 0.12);

  /* Status semantic */
  --st-draft: #8B97AB;
  --st-planned: #5C6A80;      /* muted, before route is in motion */
  --st-inwork: #2C5C9C;       /* neutral blue */
  --st-completed: #1B6E4B;
  --st-reopened: #7A2E2E;     /* bordeaux — reopened = problem */
  --st-cancelled: #7E6363;

  /* Type — strict, official sans-only stack */
  --serif: "IBM Plex Sans", "Inter Tight", system-ui, sans-serif;
  --sans: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Geometry */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 10px;
  --r-4: 14px;
  --r-pill: 999px;

  /* Density */
  --row-h: 44px;
  --pad-card: 22px;
  --gap: 18px;

  /* Motion (0.8.1 REV-2) — единые токены длительности/кривой для всех переходов */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);   /* мягкий ease-out */
  --dur-fast: 0.12s;
  --dur: 0.2s;
  --dur-slow: 0.3s;
}

[data-density="compact"] {
  --row-h: 36px;
  --pad-card: 16px;
  --gap: 12px;
}

[data-theme="dark"] {
  --paper: #0B1426;
  --surface: #131F37;
  --surface-2: #1B2A45;
  --ink: #E8EDF5;
  --ink-2: #C5CFDE;
  --mute: #8A98B0;
  --mute-2: #5E6B82;
  --hairline: rgba(232, 237, 245, 0.08);
  --hairline-strong: rgba(232, 237, 245, 0.18);
  --primary: #4F86C6;
  --primary-deep: #7BA5D7;
  --primary-soft: rgba(79, 134, 198, 0.18);
  --accent: #6FA0D8;
  --accent-deep: #91B5DD;
  --accent-soft: rgba(111, 160, 216, 0.18);
  --olive: var(--primary);
  --olive-deep: var(--primary-deep);
  --olive-soft: var(--primary-soft);
  --bronze: #6FA0D8;
  --bronze-deep: #91B5DD;
  --bronze-soft: rgba(111, 160, 216, 0.18);
  --problem: #C77272;
  --problem-deep: #DD8F8F;
  --problem-soft: rgba(199, 114, 114, 0.18);
  --signal-done: #6FBF8E;
  --signal-done-soft: rgba(111, 191, 142, 0.18);
  --signal-active: #6FA0D8;
  --signal-active-soft: rgba(111, 160, 216, 0.18);
  --st-draft: #8A98B0;
  --st-planned: #8A98B0;
  --st-inwork: #6FA0D8;
  --st-completed: #6FBF8E;
  --st-reopened: #C77272;
  --st-cancelled: #B3A3A3;
}

/* Accent overrides — all blues, varying in tone */
[data-accent="steel"]    { --brand: #15355D; --brand-deep: #0B2347; --brand-soft: #DBE5F2; }
[data-accent="royal"]    { --brand: #1F4A8C; --brand-deep: #14346A; --brand-soft: #DEE7F4; }
[data-accent="midnight"] { --brand: #0B2347; --brand-deep: #051836; --brand-soft: #D6DEEC; }
[data-accent="ink"]      { --brand: var(--ink); --brand-deep: #000; --brand-soft: rgba(14,26,46,0.10); }

/* default = steel */
:root { --brand: #15355D; --brand-deep: #0B2347; --brand-soft: #DBE5F2; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* =============== Primitives =============== */

.serif { font-family: var(--serif); font-weight: 500; letter-spacing: -0.005em; }
.serif-i { font-family: var(--serif); font-weight: 500; letter-spacing: -0.005em; }
.mono { font-family: var(--mono); font-feature-settings: "tnum"; }
.tnum { font-variant-numeric: tabular-nums; }

.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 500;
}

.hairline { border-top: 1px solid var(--hairline); }

.surface {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
}

/* =============== App shell =============== */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w, 248px) 1fr;
  min-height: 100vh;
  background: var(--paper);
  transition: grid-template-columns 0.22s ease;  /* 0.4.5: плавное сворачивание */
}

[data-sidebar="narrow"] { --sidebar-w: 72px; }

.sidebar {
  background: var(--paper);
  border-right: 1px solid var(--hairline);
  padding: 22px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  display: flex;
  align-items: center;            /* 0.4.5.1: центр, а не baseline — высота блока = размер
                                     логотипа и НЕ меняется при скрытии подписей (нет сдвига). */
  gap: 10px;
  padding: 4px 6px 16px;          /* 0.4.5.1: +2px снизу — линия бренда вровень с линией топбара */
  border-bottom: 1px solid var(--hairline);
}
.brand-mark {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: var(--paper);
  background: var(--primary);
  width: 32px; height: 32px;
  flex-shrink: 0;                 /* 0.4.5.1: не сжиматься в узком сайдбаре */
  border-radius: 6px;
  display: inline-grid;
  place-items: center;
  letter-spacing: -0.02em;
  position: relative;
  padding-right: 0;
}
.brand-mark::after {
  content: "";
  position: absolute;
  right: 4px; bottom: 4px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--signal-done);
}
/* 0.4.5: в тёмной теме логотип не должен «выбиваться» ярким синим квадратом —
   делаем тёмный плиточный квадрат со светлой «A» (как dark-инверсия светлой темы). */
[data-theme="dark"] .brand-mark { background: var(--surface-2); color: var(--ink); }
.brand-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;   /* 0.4.5.1: без переноса при анимации сворачивания */
}
.brand-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;   /* 0.4.5.1: без переноса при анимации сворачивания */
}
/* 0.4.5.1: в свёрнутом виде подписи скрываем через visibility (НЕ display:none) —
   элементы остаются в потоке, поэтому высота блоков (бренд, side-user) НЕ меняется,
   ничего не «скачет». nowrap (ниже) не даёт тексту переноситься при анимации ширины
   (иначе логотип прыгал). Лишнее по ширине клипуется (.sidebar overflow-x:hidden). */
[data-sidebar="narrow"] .brand-name,
[data-sidebar="narrow"] .brand-tag,
[data-sidebar="narrow"] .nav-label,
[data-sidebar="narrow"] .nav-section-title,
[data-sidebar="narrow"] .nav-meta,
[data-sidebar="narrow"] .side-user-meta { visibility: hidden; }
.sidebar { overflow-x: hidden; }

.nav-section-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  padding: 0 8px;
  margin: 14px 0 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-2);
  color: var(--ink-2);
  font-weight: 500;
  font-size: 13.5px;
  cursor: pointer;
  position: relative;
  user-select: none;
  transition: background 0.12s;
}
.nav-item:hover { background: var(--surface-2); }
.nav-item.active {
  background: var(--ink);
  color: var(--paper);
}
.nav-item.active .nav-meta { color: rgba(236, 231, 214, 0.6); }
.nav-icon {
  width: 18px; height: 18px;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: currentColor;
}
.nav-icon svg { width: 16px; height: 16px; }
.nav-label { flex: 1; }
.nav-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}

.side-user {
  margin-top: auto;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 8px;
  border-top: 1px solid var(--hairline);
}
.side-user-meta { display: grid; gap: 1px; min-width: 0; }
.side-user-name { font-weight: 600; font-size: 13px; }
.side-user-role { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; color: var(--mute); text-transform: uppercase; white-space: nowrap; }
.side-foot { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--mute-2); padding: 0 8px 4px; }

/* Avatar */
.avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--olive-soft);
  color: var(--olive-deep);
  font-weight: 600;
  font-size: 11.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-feature-settings: "tnum";
}
.avatar.sm { width: 22px; height: 22px; font-size: 9.5px; }
.avatar.lg { width: 40px; height: 40px; font-size: 14px; }
.avatar.bronze { background: var(--signal-active-soft); color: var(--signal-active); }
.avatar.stone { background: rgba(154,152,143,0.18); color: #4A4944; }
.employee-avatar { position: relative; overflow: hidden; background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.employee-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.employee-avatar img.loaded { opacity: 1; }

/* =============== Main area =============== */

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

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--hairline);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(8px);
}
.crumbs {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.crumb-section {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}
.crumb-sep { color: var(--mute-2); }
.crumb-current {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
  padding: 7px 10px;
  min-width: 260px;
  color: var(--mute);
  font-size: 13px;
}
.search input {
  flex: 1; border: 0; outline: 0; background: transparent;
  color: var(--ink);
  min-width: 0;
}
.search .kbd {
  font-family: var(--mono);
  font-size: 10px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--mute);
}

.icon-btn {
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: var(--r-2);
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink-2);
  position: relative;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn .dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--problem);
}

/* =============== Page container =============== */

.page {
  padding: 24px 28px 40px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  max-width: 1480px;
  width: 100%;
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
}
.page-title {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink);
}
.page-title em {
  font-style: normal;
  color: var(--mute);
  font-weight: 400;
}
.page-sub {
  color: var(--mute);
  font-size: 13.5px;
  margin-top: 6px;
  max-width: 60ch;
}
.page-head-actions { display: flex; gap: 8px; align-items: center; }

/* =============== Buttons =============== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-2);
  font-weight: 500;
  font-size: 13px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.btn svg { width: 14px; height: 14px; }
.btn-primary {
  background: var(--ink);
  color: var(--paper);
}
.btn-primary:hover { background: var(--primary-deep); }  /* 0.8.1: было #000 (жёстко в тёмной теме) */
.btn-secondary {
  background: var(--surface);
  border-color: var(--hairline-strong);
  color: var(--ink);
}
.btn-secondary:hover { background: var(--surface-2); }
.btn-ghost {
  color: var(--ink-2);
}
.btn-ghost:hover { background: var(--surface-2); }
.btn-bronze {
  background: var(--signal-done);
  color: #fff;
}
.btn-bronze:hover { background: #155538; }
.btn-danger {
  background: transparent;
  color: var(--problem);   /* 0.9.6.26: var(--problem) тем-зависим (читаем и в тёмной теме), в отличие от var(--rust) */
  border-color: var(--hairline-strong);
}
.btn-danger:hover { background: var(--problem-soft); border-color: var(--problem); }
.btn-sm { padding: 5px 9px; font-size: 12px; gap: 5px; }
.btn-icon { padding: 7px; }

/* =============== Pills / status =============== */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface-2);
  border-radius: var(--r-pill);
  padding: 3px 9px 3px 7px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mute);
  flex-shrink: 0;
}
.pill.draft     .dot { background: var(--st-draft); }
.pill.planned   .dot { background: var(--st-planned); }
.pill.inwork    .dot { background: var(--st-inwork); }
.pill.completed .dot { background: var(--st-completed); }
.pill.reopened  .dot { background: var(--st-reopened); }
.pill.cancelled .dot { background: var(--st-cancelled); }
.pill.priority-high { color: var(--problem); background: var(--problem-soft); }
.pill.priority-high .dot { background: var(--problem); }
.pill.priority-normal .dot { background: var(--mute); }
.pill.outline { background: transparent; border-color: var(--hairline-strong); }
.pill.solid-ink { background: var(--ink); color: var(--paper); }
.pill.solid-ink .dot { background: var(--signal-done); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--mute);
  background: var(--surface-2);
  border-radius: var(--r-1);
  padding: 2px 7px;
  font-family: var(--mono);
  letter-spacing: 0.02em;
}

/* =============== Cards =============== */

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  padding: var(--pad-card);
}
.card.flat { background: var(--paper); }
.card.tight { padding: 14px; }
.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.card-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.card-eyebrow { /* alias of .eyebrow used in card heads */
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}

/* =============== KPI tiles =============== */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  overflow: hidden;
}
.kpi-tile {
  background: var(--surface);
  padding: 20px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 132px;
  position: relative;
}
.kpi-tile .eyebrow { display: flex; align-items: center; gap: 8px; }
.kpi-tile .value {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 44px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.kpi-tile .value em {
  font-style: normal;
  color: var(--primary);
  font-weight: 600;
}
.kpi-tile .value .unit {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--mute);
  font-weight: 500;
  margin-left: 4px;
  vertical-align: top;
}
.kpi-tile .foot {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mute);
  font-size: 12px;
}
.kpi-tile .delta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--olive-deep);
}
.kpi-tile .delta.down { color: var(--rust); }

.spark { display: block; width: 100%; height: 28px; opacity: 0.7; }

/* =============== Tables =============== */

.tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.tbl thead th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 500;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
  position: sticky;
  top: 0;
}
.tbl tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
  height: var(--row-h);
}
.tbl tbody tr { cursor: pointer; transition: background 0.1s; }
.tbl tbody tr:hover { background: var(--surface); }
.tbl tbody tr.selected { background: var(--brand-soft); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tbl .nowrap { white-space: nowrap; }
.tbl .right { text-align: right; }

.tbl-wrap {
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--surface);
}

/* =============== Filter bar =============== */

.filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  flex-wrap: wrap;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}
.chip.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.chip.active .count { color: var(--signal-done); }
.chip .count {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--mute);
  margin-left: 2px;
}
.chip-sel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r-2);
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  font-size: 12.5px;
  color: var(--ink-2);
}
.chip-sel .lbl { color: var(--mute); font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; }

/* =============== Route timeline (request detail) =============== */

.route-stage {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-4);
  padding: 28px 28px 22px;
  position: relative;
  overflow: hidden;
}
.route-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 64px, rgba(23,24,20,0.025) 64px 65px);
  pointer-events: none;
}
.route-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  position: relative;
}
.route-endpoint {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.route-endpoint .label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}
.route-endpoint .city {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.route-endpoint .meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}

.route-track {
  position: relative;
  margin: 28px 0 6px;
  padding: 0 12px;
}
.route-line {
  position: absolute;
  top: 36px; left: 12px; right: 12px;
  height: 1px;
  border-top: 1px dashed var(--hairline-strong);
}
.route-segments {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 12px;
}
.seg {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.seg-node {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  display: grid;
  place-items: center;
  color: var(--ink-2);
  position: relative;
  z-index: 1;
}
.seg.done .seg-node {
  background: var(--signal-done);
  border-color: var(--signal-done);
  color: #fff;
}
.seg.active .seg-node {
  background: var(--signal-active);
  border-color: var(--signal-active);
  color: #fff;
  box-shadow: 0 0 0 5px var(--signal-active-soft);
}
.seg.problem .seg-node {
  background: var(--problem);
  border-color: var(--problem);
  color: #fff;
  box-shadow: 0 0 0 5px var(--problem-soft);
}
.seg.planned .seg-node { color: var(--mute); }
.seg-node svg { width: 22px; height: 22px; }

.seg-body {
  text-align: center;
  display: grid;
  gap: 2px;
  max-width: 200px;
}
.seg-route {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.25;
}
.seg-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}
.seg-time {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink);
  font-weight: 500;
  margin-top: 2px;
}
.seg-provider {
  font-size: 11.5px;
  color: var(--mute);
}
.seg-status {
  margin-top: 4px;
}

/* =============== Two-col layouts =============== */
.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--gap);
}
.three-col {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--gap);
}

/* =============== Timeline / events =============== */
.events {
  display: grid;
  gap: 0;
}
.event {
  display: grid;
  grid-template-columns: 96px 16px 1fr;
  gap: 12px;
  padding: 10px 0;
  position: relative;
}
.event + .event { border-top: 1px solid var(--hairline); }
.event-time {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
  text-align: right;
}
.event-marker {
  position: relative;
  display: flex;
  justify-content: center;
}
.event-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--mute);
  margin-top: 6px;
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--hairline-strong);
}
.event-dot.olive { background: var(--signal-done); }
.event-dot.bronze { background: var(--signal-active); }
.event-dot.rust { background: var(--problem); }
.event-dot.ink { background: var(--ink); }
.event-body { display: grid; gap: 2px; }
.event-title { font-weight: 500; font-size: 13.5px; }
.event-sub { color: var(--mute); font-size: 12.5px; }
.event-actor { font-family: var(--mono); font-size: 10.5px; color: var(--mute); text-transform: uppercase; letter-spacing: 0.06em; }

/* =============== Bars (status overview) =============== */
.bars { display: grid; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 160px 1fr 48px; gap: 12px; align-items: center; }
.bar-label { font-size: 13px; display: flex; align-items: center; gap: 8px; }
.bar-label .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mute); }
.bar-track { background: var(--surface-2); height: 8px; border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; background: var(--ink); }
.bar-count { font-family: var(--mono); font-size: 12px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

/* =============== Misc =============== */

.divider { height: 1px; background: var(--hairline); margin: 4px 0; }
.row { display: flex; gap: 10px; align-items: center; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.muted { color: var(--mute); }
.small { font-size: 12px; }
.smaller { font-size: 11px; }
.bold { font-weight: 600; }
.grow { flex: 1; min-width: 0; }
.center { display: flex; align-items: center; justify-content: center; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kpi-row { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }

/* alert / advisory strip */
.advisory {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--signal-active);
  border-radius: var(--r-2);
}
.advisory.urgent { border-left-color: var(--problem); }
.advisory .a-title { font-weight: 600; font-size: 13px; }
.advisory .a-sub { color: var(--mute); font-size: 12.5px; }
.advisory .a-spacer { flex: 1; }

/* Employee row med flags */
.med-ok { color: var(--signal-done); }
.med-expiring { color: var(--ink-2); }
.med-expired { color: var(--problem); }

/* Login */
.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--paper);
}
.auth-art {
  background: var(--ink);
  color: var(--paper);
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.auth-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 56px, rgba(236,231,214,0.04) 56px 57px),
    repeating-linear-gradient(90deg, transparent 0 56px, rgba(236,231,214,0.04) 56px 57px);
  pointer-events: none;
}
.auth-form-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.auth-form {
  width: min(420px, 100%);
  display: grid;
  gap: 18px;
}
.auth-form .field { display: grid; gap: 6px; }
.auth-form .field label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}
.auth-form input {
  padding: 11px 12px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-2);
  background: var(--surface);
  font-size: 14px;
}
.auth-form input:focus {
  outline: none;
  border-color: var(--ink);
}

.shimmer {
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite linear;
  border-radius: var(--r-1);
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============ Modal ============ */
.modal-back {
  position: fixed; inset: 0;
  background: rgba(20, 21, 15, 0.42);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 32px;
  animation: modal-back-in var(--dur) var(--ease);   /* 0.8.1: плавное появление скрима */
}
.modal-sheet {
  width: min(720px, 100%);
  max-height: 90vh;
  background: var(--paper);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: sheet-in var(--dur) var(--ease);        /* 0.8.1: всплытие листа */
}
@keyframes modal-back-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-head {
  padding: 22px 24px 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  border-bottom: 1px solid var(--hairline);
}
.modal-steps {
  display: flex;
  gap: 0;
  padding: 14px 24px;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
}
.modal-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--mute);
  padding-right: 22px;
  position: relative;
}
.modal-step + .modal-step::before {
  content: "";
  position: absolute;
  left: -14px; top: 50%;
  width: 8px; height: 1px;
  background: var(--hairline-strong);
}
.modal-step-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  display: inline-grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
}
.modal-step.current { color: var(--ink); }
.modal-step.current .modal-step-num { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.modal-step.done { color: var(--olive-deep); }
.modal-step.done .modal-step-num { background: var(--olive-deep); border-color: var(--olive-deep); color: var(--paper); }

.modal-body-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 24px;
  overflow-y: auto;
}
.modal-body-grid .field { display: grid; gap: 8px; min-width: 0; }
.modal-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-2);
  background: var(--surface);
  font-size: 13.5px;
  color: var(--ink);
}
.modal-input:focus { outline: none; border-color: var(--ink); }
.modal-foot {
  padding: 16px 24px;
  border-top: 1px solid var(--hairline);
  background: var(--surface);
  display: flex;
  gap: 8px;
  align-items: center;
}

.modal-sheet.wide { width: min(960px, 100%); }
.modal-sheet.narrow { width: min(520px, 100%); }

/* === Apply-route modal === */
.route-picker {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 0;
  min-height: 420px;
  max-height: 60vh;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
}
.route-picker-list {
  border-right: 1px solid var(--hairline);
  overflow-y: auto;
  background: var(--surface);
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
}
.route-variant {
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
  padding: 12px 12px 10px;
  cursor: pointer;
  display: block;
  transition: border-color 0.12s, background 0.12s;
}
.route-variant:hover { border-color: var(--hairline-strong); }
.route-variant.active {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.route-variant-track {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.route-variant-dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  display: grid;
  place-items: center;
  color: var(--ink-2);
  flex-shrink: 0;
}
.route-variant.active .route-variant-dot { border-color: var(--primary); color: var(--primary); }
.route-variant-track::after {
  content: "";
  flex: 1;
  height: 0;
}

.route-picker-detail {
  padding: 22px 24px;
  overflow-y: auto;
}
.route-picker-segs {
  display: grid;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
  overflow: hidden;
}
.picker-seg {
  background: var(--surface);
  padding: 11px 12px;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
}
.picker-seg-icon {
  width: 32px; height: 32px;
  border-radius: 6px;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  color: var(--ink-2);
}
.picker-seg-route { font-weight: 500; font-size: 13.5px; }
.picker-seg-time {
  text-align: right;
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.3;
}

.picker-summary {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
  overflow: hidden;
}
.summary-stat {
  background: var(--surface);
  padding: 11px 14px;
  display: grid;
  gap: 4px;
}
.summary-val {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.summary-val.warn { color: var(--problem); }
.summary-val.ok { color: var(--signal-done); }

/* === Drawer === */
.drawer-back {
  position: fixed; inset: 0;
  background: rgba(14, 26, 46, 0.32);
  backdrop-filter: blur(3px);
  z-index: 140; /* Карточка сотрудника поверх заявки (100), редактор поверх неё (150). */
  display: flex;
  justify-content: flex-end;
}
.drawer-panel {
  width: min(520px, 92vw);
  height: 100vh;
  background: var(--paper);
  border-left: 1px solid var(--hairline-strong);
  display: flex;
  flex-direction: column;
  animation: drawer-in 0.18s ease-out;
}
@keyframes drawer-in {
  from { transform: translateX(20px); opacity: 0.5; }
  to { transform: translateX(0); opacity: 1; }
}
.drawer-head {
  padding: 22px 24px 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid var(--hairline);
}
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}
.drawer-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
  overflow: hidden;
}
.drawer-kpi {
  background: var(--surface);
  padding: 12px 14px;
}
.drawer-foot {
  padding: 14px 24px;
  border-top: 1px solid var(--hairline);
  background: var(--surface);
  display: flex;
  gap: 8px;
  align-items: center;
}

/* === Bulk bar === */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-2);
  position: sticky;
  top: 70px;
  z-index: 10;
}
.bulk-bar .small { color: rgba(244, 246, 250, 0.72); }
.bulk-bar .modal-input {
  background: rgba(244, 246, 250, 0.1);
  border-color: rgba(244, 246, 250, 0.2);
  color: var(--paper);
}
.bulk-bar .modal-input option { background: var(--ink); color: var(--paper); }
.bulk-count {
  background: var(--signal-done);
  color: #fff;
  border-radius: var(--r-pill);
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
}
.btn-danger-solid {
  background: var(--problem);
  color: #fff;
  border: 1px solid var(--problem);
}
.btn-danger-solid:hover { background: var(--problem-deep); }
.btn-danger-solid:disabled { background: var(--surface-2); color: var(--mute); border-color: var(--hairline); cursor: not-allowed; }

/* === Command palette === */
.cmdk-back {
  position: fixed; inset: 0;
  background: rgba(14, 26, 46, 0.42);
  backdrop-filter: blur(6px);
  z-index: 170; /* Поиск доступен и при открытой карточке/редакторе. */
  display: flex;
  justify-content: center;
  padding-top: 14vh;
}
.cmdk-sheet {
  width: min(640px, 92vw);
  height: fit-content;
  max-height: 64vh;
  background: var(--paper);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(14, 26, 46, 0.30);
}
.cmdk-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hairline);
}
.cmdk-input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  font-family: var(--sans);
}
.cmdk-input::placeholder { color: var(--mute); }
.cmdk-kbd {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--mute);
}
.cmdk-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
.cmdk-section {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  padding: 10px 16px 4px;
}
.cmdk-item {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.1s;
}
.cmdk-item.active { background: var(--primary-soft); }
.cmdk-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); }
.cmdk-label { font-weight: 500; font-size: 13.5px; }
.cmdk-sub { color: var(--mute); font-size: 12px; margin-top: 1px; }
.cmdk-hint {
  font-size: 11px;
  color: var(--mute);
  opacity: 0;
  transition: opacity 0.12s;
}
.cmdk-item.active .cmdk-hint { opacity: 1; color: var(--primary); }
.cmdk-empty {
  padding: 30px 20px;
  text-align: center;
  color: var(--mute);
  font-size: 13px;
}
.cmdk-foot {
  border-top: 1px solid var(--hairline);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--mute);
  background: var(--surface);
}
.cmdk-foot .cmdk-kbd { margin-right: 4px; }

/* === Notifications popover === */
.notif-pop {
  position: fixed;
  top: 58px;
  right: 132px;
  width: 380px;
  max-height: 70vh;
  background: var(--paper);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-3);
  box-shadow: 0 18px 48px rgba(14, 26, 46, 0.22);
  z-index: 95;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.notif-head {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.notif-list {
  flex: 1;
  overflow-y: auto;
}
.notif {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 10px;
  padding: 11px 16px;
  cursor: pointer;
  align-items: flex-start;
  border-bottom: 1px solid var(--hairline);
}
.notif:hover { background: var(--surface); }
.notif-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 5px;
  background: var(--mute);
}
.notif-dot.active { background: var(--signal-active); }
.notif-dot.problem { background: var(--problem); }
.notif-dot.done { background: var(--signal-done); }
.notif-dot.info { background: var(--mute); }
.notif-title { font-weight: 500; font-size: 13px; }
.notif-sub { color: var(--mute); font-size: 12px; margin-top: 2px; line-height: 1.35; }
.notif-time { font-size: 11px; color: var(--mute); white-space: nowrap; padding-top: 1px; }
.notif-foot {
  padding: 8px 14px;
  border-top: 1px solid var(--hairline);
  background: var(--surface);
  text-align: center;
}

.search { cursor: text; }
.search:hover { border-color: var(--hairline-strong); }

/* scrollbars (subtle) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: 8px; border: 2px solid var(--paper); }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   LEGACY COMPATIBILITY LAYER
   ============================================================
   Все классы из UI_CONTRACT_FOR_DESIGN.md §3 и app.js — стилизованы
   в новой палитре. JS не нужно править — старая разметка получит
   новый внешний вид автоматически.
   ============================================================ */

/* Universal hide */
.hidden { display: none !important; }

/* Legacy buttons (no btn- prefix). Mirror of new .btn-* */
.primary, .secondary, .danger, .ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-2);
  font-weight: 500;
  font-size: 13px;
  border: 1px solid transparent;
  white-space: nowrap;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.primary { background: var(--ink); color: var(--paper); }
.primary:hover { background: var(--primary-deep); }  /* 0.8.1: было #000 */
/* 0.9.6.27: в тёмной теме .primary = var(--ink) (почти белый) → CTA в модалках выглядела
   белым блоком (фидбэк по «Перевыпустить и скопировать»). Делаем модальную primary
   брендово-синей (var(--primary)); текст остаётся var(--paper) — контраст AA в обеих темах. */
[data-theme="dark"] .modal-actions button.primary { background: var(--primary); }
[data-theme="dark"] .modal-actions button.primary:hover { background: var(--primary-deep); }
.secondary {
  background: var(--surface);
  border-color: var(--hairline-strong);
  color: var(--ink);
}
.secondary:hover { background: var(--surface-2); }
.danger {
  background: transparent;
  color: var(--problem);
  border-color: var(--hairline-strong);
}
.danger:hover { background: var(--problem-soft); }
.ghost { color: var(--ink-2); background: transparent; }
.ghost:hover { background: var(--surface-2); }
.small { padding: 5px 9px; font-size: 12px; gap: 5px; }

.btn-ghost-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--problem);
  border: 1px solid var(--hairline-strong);
  padding: 6px 10px;
  border-radius: var(--r-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.btn-ghost-danger:hover { background: var(--problem-soft); border-color: var(--problem); }

/* Legacy badges (mini status pills, NOT the new .pill) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: var(--r-pill);
  padding: 3px 9px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge.ok      { background: var(--signal-done-soft);   color: var(--signal-done); }
.badge.warn    { background: var(--signal-active-soft); color: var(--signal-active); }
.badge.danger  { background: var(--problem-soft);       color: var(--problem); }

/* Legacy status-<code> on request rows (border-left accent) */
.status-draft        { border-left: 3px solid var(--st-draft); }
.status-route_planned,
.status-planned      { border-left: 3px solid var(--st-planned); }
.status-in_work,
.status-inwork       { border-left: 3px solid var(--st-inwork); }
.status-completed    { border-left: 3px solid var(--st-completed); }
.status-reopened     { border-left: 3px solid var(--st-reopened); }
.status-cancelled    { border-left: 3px solid var(--st-cancelled); }

/* Legacy table (.table) — alias of new .tbl visuals */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.table thead th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 500;
  padding: 11px 12px;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
}
.table tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }

/* ATH-236: ростер перевахтовки — фиксированная раскладка, чтобы блоки А/Б были
   ровно по 50% (ширины колонок задаёт <colgroup> с calc). Длинные ФИО переносим,
   а не растягиваем колонку. */
.roster-table { table-layout: fixed; }
.roster-table th, .roster-table td { overflow-wrap: break-word; word-break: normal; }

/* Row state classes (from app.js) */
.row-clickable { cursor: pointer; transition: background 0.1s; }
.row-clickable:hover { background: var(--surface-2); }

.row-archived { opacity: 0.5; }
.row-archived td { font-style: italic; }

/* nth-child(7): колонка «Медосмотр» — 7-я после добавления «По штату» (0.9.7) */
.row-med-expired { background: var(--problem-soft); }
.row-med-expired td:nth-child(7) { color: var(--problem); font-weight: 600; }

.row-med-expiring { background: rgba(44, 92, 156, 0.06); }
.row-med-expiring td:nth-child(7) { color: var(--signal-active); font-weight: 600; }

/* 0.9.7: бейджи штатной привязки в реестре сотрудников (тема-зависимые) */
.staff-cell { white-space: normal; }
.staff-badge {
  display: inline-block;
  padding: 2px 8px;
  margin: 1px 2px 1px 0;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid transparent;
}
.staff-badge.staff-a { background: var(--primary-soft); color: var(--accent-deep); border-color: var(--accent-soft); }
.staff-badge.staff-b { background: var(--surface-2); color: var(--mute); border-color: var(--hairline-strong); }
.staff-none { color: var(--mute); font-size: 11.5px; }

/* Legacy toolbar (filter container). New equivalent: .filter-bar */
.toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  margin-bottom: 14px;
}
.toolbar input, .toolbar select {
  padding: 7px 10px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-2);
  background: var(--surface);
  font-size: 13px;
  color: var(--ink);
  max-width: 240px;
}
.toolbar input:focus, .toolbar select:focus { outline: none; border-color: var(--ink); }

/* Actions cell in tables (no-wrap, right-align) */
.actions-cell { white-space: nowrap; text-align: right; }

/* Legacy modal-backdrop / modal-card — mirror of new .modal-back / .modal-sheet */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(14, 26, 46, 0.42);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 32px;
}
.modal-card {
  width: min(620px, 100%);
  max-height: 92vh;
  background: var(--paper);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-4);
  padding: 24px;
  overflow: auto;
}
.modal-card.wide { width: min(1100px, 96%); }
/* Мастер перевахтовки (ATH): крупная панель почти на весь экран — для видимости
   выпадающих списков и места под будущие кнопки (фидбэк Галсана 0.9.5.0).
   :has — Chrome 105+ (прод). Сетка 2×2, ровные ячейки. */
.modal-card:has(.wizard-grid) {
  width: min(1700px, 95vw);
  min-height: 82vh;
  box-sizing: border-box;
  padding: 32px 40px;
}
.wizard-grid { gap: 22px 30px; }
.wizard-grid > label { min-width: 0; font-size: 14.5px; }
/* Крупнее поля и пункты выпадающих списков внутри мастера — для читаемости. */
.modal-card:has(.wizard-grid) .ssel-input,
.modal-card:has(.wizard-grid) input[type="date"],
.modal-card:has(.wizard-grid) select { height: 48px; font-size: 16px; }
.modal-card:has(.wizard-grid) .ssel-list { max-height: 420px; }
.modal-card:has(.wizard-grid) .ssel-item { padding: 13px 16px; font-size: 15.5px; }
.modal-card:has(.wizard-grid) .ssel-empty { padding: 13px 16px; font-size: 15px; }
/* Город в стиле .ssel: гарантируем место под каретку (перекрываем узкий padding фильтров/отчётов). */
.ssel-city .ssel-input { padding-right: 30px; }
/* 0.9.5.0: строка ИТОГО в отчётах — жирная, с верхней разделительной линией. */
.table tfoot .report-total td {
  font-weight: 700;
  border-top: 2px solid var(--hairline-strong);
  background: var(--surface-2);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}
.modal-header h3 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 18px; }
.modal-body { font-size: 14px; }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

/* Legacy timeline (compact event log per app.js structure) */
.timeline { display: grid; gap: 10px; }
.timeline .event {
  padding: 12px 14px;
  border-left: 3px solid var(--primary);
  background: var(--surface);
  border-radius: var(--r-2);
}
.event-time {
  color: var(--mute);
  font-size: 11px;
  font-family: var(--mono);
}
.timeline.compact { gap: 2px; }
.timeline.compact .event {
  padding: 6px 10px;
  border-left-width: 2px;
  background: var(--surface);
  border-radius: var(--r-1);
  font-size: 13px;
  line-height: 1.35;
}
.timeline.compact .event-time {
  font-size: 11px;
  display: inline-block;
  margin-right: 8px;
  color: var(--mute);
}
.timeline.compact .event-line { display: inline; }
.timeline.compact .event-meta {
  color: var(--mute);
  font-size: 12px;
  margin-left: 6px;
}
.timeline-dot {
  flex: 0 0 9px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--primary);
  display: inline-block;
}
.timeline-dot.audit  { background: var(--signal-done); }
.timeline-dot.status { background: var(--primary); }
.timeline-dot.cancel { background: var(--st-cancelled); }
.timeline-dot.reopen { background: var(--problem); }

/* 0.4.4: «История заявки» — ровный grid-таймлайн (dot · время · действие · актор). */
.tl { display: grid; gap: 0; margin-top: 6px; }
.tl-row {
  display: grid;
  grid-template-columns: 12px 92px 1fr;
  gap: 12px;
  align-items: start;
  padding: 8px 4px;
  border-bottom: 1px solid var(--hairline);
}
.tl-row:last-child { border-bottom: 0; }
.tl-dot {
  width: 8px; height: 8px; border-radius: 50%;
  margin-top: 5px; background: var(--primary);
  /* 0.5.1.1: grid-item по умолчанию justify-self:stretch → кружок растягивался в овал. */
  justify-self: center; flex-shrink: 0;
}
.tl-dot.status { background: var(--primary); }
.tl-dot.audit  { background: var(--signal-done); }
.tl-dot.event  { background: var(--mute-2); }
.tl-dot.cancel { background: var(--st-cancelled); }
.tl-dot.reopen { background: var(--problem); }
.tl-time {
  color: var(--mute); font-size: 11.5px; white-space: nowrap;
  font-family: var(--mono); padding-top: 1px;
}
.tl-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.tl-title { font-weight: 600; font-size: 13px; color: var(--ink); }
.tl-detail { font-size: 12.5px; color: var(--ink-2); }
.tl-actor {
  font-size: 11px; color: var(--mute); white-space: nowrap;
  background: var(--surface-2); border-radius: 999px; padding: 1px 8px;
}

/* 0.4.4: круглая кнопка закрытия карточки заявки — фиксирована поверх оверлея,
   не уезжает со скроллом карточки (overlay #request-modal position:fixed). */
.modal-close-fab {
  /* #request-modal — grid с place-items:center; без этого fab центрируется. */
  justify-self: end; align-self: start;
  position: absolute; top: 18px; right: 22px; z-index: 5;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  background: var(--surface); color: var(--ink-2);
  font-size: 17px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(14, 26, 46, 0.22);
  transition: background 120ms, color 120ms, border-color 120ms;
}
.modal-close-fab:hover { background: var(--problem); color: #fff; border-color: var(--problem); }

/* 0.4.4: панель действий «Заявок» — кнопка «Создать заявку» + тумблер вида. */
.view-switch { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-bottom: 12px; }

/* 0.4.4: фильтры+поиск реестра в одну строку (перекрываем min-width .ssel/селектов). */
/* 0.9.6.8: фильтр-ряд переносится при большом числе фильтров (реестр сотрудников —
   8 контролов) вместо сплющивания в один ряд (поля обрезались). min-width держит
   читаемость; узкие ряды (реестр заявок) остаются в одну строку. */
.toolbar.filters-row { flex-wrap: wrap; }
.toolbar.filters-row > select,
.toolbar.filters-row > input,
.toolbar.filters-row .ssel { flex: 1 1 160px; min-width: 160px; }
.toolbar.filters-row .ssel { max-width: none; }
.toolbar.filters-row #reqSearch,
.toolbar.filters-row #empSearch { flex: 1.6 1 200px; }
.toolbar.filters-row > button { flex: 0 0 auto; }

/* 0.4.4: панель detail-страницы справочника (назад + «Добавить …»). */
.dict-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }

/* 0.4.4: ровные ячейки таблицы штатного расписания (фикс-ширины + выравнивание). */
.table.staffing-table td { vertical-align: top; }
.table.staffing-table td .event-meta { display: block; margin-top: 2px; }

/* 0.4.4: иконки плиток справочников. */
.dict-tile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dict-tile-icon { color: var(--accent); flex-shrink: 0; opacity: 0.85; }
.dict-tile:hover .dict-tile-icon { opacity: 1; }

/* 0.4.5: поповер настроек оформления (на токенах — адаптируется к теме). */
.appearance-pop {
  position: fixed; z-index: 95; width: 300px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper); border: 1px solid var(--hairline-strong);
  border-radius: var(--r-3); box-shadow: 0 18px 48px rgba(14, 26, 46, 0.28);
  padding: 14px; display: flex; flex-direction: column; gap: 13px;
}
.ap-head { font-weight: 600; font-size: 14px; color: var(--ink); }
.ap-group { display: flex; flex-direction: column; gap: 6px; }
.ap-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mute); }
.ap-seg {
  display: flex; gap: 3px; flex-wrap: wrap;
  background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: 999px; padding: 3px;
}
.ap-seg button {
  flex: 1 1 auto; border: 0; background: transparent; color: var(--mute);
  font-size: 12.5px; padding: 5px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: background 120ms, color 120ms;
}
.ap-seg button:hover { color: var(--ink-2); }
.ap-seg button.active {
  background: var(--surface); color: var(--ink); font-weight: 600;
  box-shadow: 0 1px 3px rgba(14, 26, 46, 0.12);
}
/* пресеты (задача #4) */
.ap-presets { display: flex; flex-direction: column; gap: 6px; }
.ap-presets-head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mute); }
.ap-preset-btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 1px solid var(--hairline); background: var(--surface); color: var(--ink-2);
  font-size: 12.5px; padding: 7px 10px; border-radius: var(--r-2); cursor: pointer; text-align: left;
}
.ap-preset-btn:hover { border-color: var(--hairline-strong); color: var(--ink); }

.seg-toggle {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: 999px;
}
.seg-toggle button {
  border: 0; background: transparent; color: var(--mute);
  font-size: 13px; font-weight: 500; padding: 5px 16px;
  border-radius: 999px; cursor: pointer; transition: background 120ms, color 120ms;
}
.seg-toggle button:hover { color: var(--ink-2); }
.seg-toggle button.active {
  background: var(--surface); color: var(--ink); font-weight: 600;
  box-shadow: 0 1px 3px rgba(14, 26, 46, 0.12);
}

/* Empty placeholder */
.empty {
  padding: 22px;
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--r-3);
  color: var(--mute);
  background: var(--surface);
  text-align: center;
  font-size: 13.5px;
}

/* Toast (top-right) */
.toast {
  position: fixed;
  right: 24px;
  top: 24px;
  z-index: 120;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-3);
  padding: 12px 16px;
  box-shadow: 0 18px 48px rgba(14,26,46,0.22);
  max-width: 460px;
  font-size: 13.5px;
}
.toast.error { background: var(--problem); }

/* Legacy auth shell (kept as alias for any HTML still using it) */
.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  background: linear-gradient(135deg, var(--paper), var(--surface-2));
}
.auth-card {
  width: min(460px, 100%);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-4);
  padding: 30px;
}

/* App shell legacy ids */
#auth-view, #app-view { min-height: 100vh; }

/* Datalist styling cannot be themed cross-browser; left default */

/* ============================================================
   Legacy layout primitives — used by current app.js render code.
   Stylised in the new Marble Steel palette so existing JS works
   without rewrites. To be migrated to new classes in 0.3.8.x.
   ============================================================ */

/* Grid (`class="grid two|three|four"`) — основной layout-блок форм */
.grid { display: grid; gap: var(--gap); }
.grid.two   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) {
  .grid.two, .grid.three, .grid.four { grid-template-columns: 1fr; }
}

/* Inputs / selects / textareas inside forms */
.grid label,
.toolbar label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--ink-2);
}
.grid input,
.grid select,
.grid textarea,
.toolbar input,
.toolbar select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-2);
  padding: 9px 12px;
  font-size: 14px;
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.grid input:focus,
.grid select:focus,
.grid textarea:focus,
.toolbar input:focus,
.toolbar select:focus {
  outline: none;
  border-color: var(--primary-mid);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.grid textarea { min-height: 78px; resize: vertical; font-family: inherit; }

/* Card — base surface */
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  padding: var(--pad-card);
}
.card + .card { margin-top: var(--gap); }
.card h2 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: var(--ink);
}
.card h3 {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  margin: 18px 0 10px;
  color: var(--ink);
}

/* Section row — заголовок секции + правый action */
.section-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.section-row h2 { margin: 0; }

/* Actions row — контейнер кнопок под формой */
.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* KPI block — dashboard цифры */
.kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
}
.kpi .value {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.kpi .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}

/* List of cards — реестр заявок */
.list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.item {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--hairline-strong);
  border-radius: var(--r-2);
  padding: 14px 16px;
  transition: border-color 0.15s, background 0.15s;
}
.item-clickable { cursor: pointer; }
.item-clickable:hover {
  background: var(--surface-2);
  border-color: var(--hairline-strong);
}
.item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}
.item-title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.item-sub {
  font-size: 13px;
  color: var(--mute);
  margin-top: 4px;
  line-height: 1.4;
}

/* Status color hints на левом борте карточки */
.item.status-completed     { border-left-color: var(--signal-done); }
.item.status-cancelled     { border-left-color: var(--st-cancelled); }
.item.status-reopened      { border-left-color: var(--problem); }
.item.status-in_work,
.item.status-route_planned,
.item.status-route_planning,
.item.status-approval,
.item.status-approved,
.item.status-booking,
.item.status-tickets_issued,
.item.status-in_transit    { border-left-color: var(--signal-active); }
.item.status-draft         { border-left-color: var(--st-draft); }

/* Timeline-row — legacy запись истории (compact-mode) */
.timeline-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.timeline.compact { gap: 4px; }
.timeline.compact .event {
  padding: 6px 10px;
  border-left-width: 3px;
  font-size: 13px;
  line-height: 1.4;
}
.timeline.compact .event-time {
  font-size: 11px;
  display: inline-block;
  margin-right: 8px;
  color: var(--mute);
}
.timeline.compact .event-line { display: inline; }
.timeline.compact .event-meta {
  color: var(--mute);
  font-size: 12px;
  margin-left: 6px;
}

/* Section спейсинг между card-блоками внутри view */
.view > section + section { margin-top: var(--gap); }
.view > section { margin-bottom: 0; }
.view > .grid + .card,
.view > .card + .grid { margin-top: var(--gap); }

/* page-subtitle — описание под заголовком страницы */
.page-sub {
  color: var(--mute);
  font-size: 13px;
  margin: -8px 0 18px;
  padding: 0 28px;
  /* 0.9.0.1: подзаголовок — одна строка (не зажимать/не переносить); длинный — с многоточием */
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Main content padding — view не получает паддинг от .main */
.main { padding: 22px 28px; }
.main .view { padding: 0; }

/* Sidebar logout button — в новом index.html отдельная кнопка справа сверху */
#logout-btn { white-space: nowrap; }

/* Toast — поверх всего */
.toast {
  position: fixed;
  right: 24px;
  top: 24px;
  z-index: 80;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-2);
  padding: 12px 16px;
  font-size: 13px;
  max-width: 420px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  animation: toast-in var(--dur) var(--ease);   /* 0.8.1: выезд тоста справа */
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
.toast.error { background: var(--problem); }

/* Datalist-styled inputs (cities autocomplete) — same as .grid input */
input[list] {
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-2);
  padding: 9px 12px;
}

/* ============================================================
   0.3.7.2 — UI hotfixes пользователя:
   1) sidebar nav рендерится как plain <button> внутри #nav, без .nav-item
   2) page-sub перекрывался sticky-topbar'ом (negative margin был кривой)
   3) topbar search обрезался при длинном placeholder'е
   4) timeline компакт уже сжат, но <code> с длинным payload не переносился
   5) toast пряталась за модалкой (z-index был ниже modal-backdrop)
   6) textarea вне .grid не получал стиль (label > textarea без обвязки)
   ============================================================ */

/* 1. Sidebar nav — JS рендерит plain <button>, нужно вертикальная раскладка */
#nav { display: grid; gap: 2px; }
#nav button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: var(--r-2);
  color: var(--ink-2);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13.5px;
  cursor: pointer;
  background: transparent;
  border: 0;
  transition: background 0.12s, color 0.12s;
}
#nav button:hover { background: var(--surface-2); color: var(--ink); }
#nav button.active { background: var(--ink); color: var(--paper); }
/* 0.4.5: иконки пунктов навигации */
#nav button .nav-ico { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; opacity: 0.9; }
#nav button.active .nav-ico { opacity: 1; }
/* line-height = высоте иконки: чтобы высота кнопки не зависела от наличия подписи (нет сдвига на 1px) */
#nav button .nav-label { min-width: 0; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* свёрнутый сайдбар (narrow): подпись скрыта, иконка остаётся на месте (та же позиция/размер) */
[data-sidebar="narrow"] #nav button { gap: 0; }

/* 0.4.5: кнопка свернуть/развернуть боковую панель */
.side-collapse {
  align-self: flex-end;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--r-2);
  border: 1px solid var(--hairline); background: var(--surface); color: var(--mute);
  cursor: pointer; margin-top: -6px; transition: color 0.12s, border-color 0.12s;
}
.side-collapse:hover { color: var(--ink); border-color: var(--hairline-strong); }
.side-collapse svg { width: 16px; height: 16px; transition: transform 0.18s; }
[data-sidebar="narrow"] .side-collapse { align-self: center; }
[data-sidebar="narrow"] .side-collapse svg { transform: rotate(180deg); }

/* 2. page-sub — без отрицательных margin'ов, нормальный padding */
.page-sub {
  padding: 4px 28px 12px !important;
  margin: 0 !important;
  color: var(--mute);
  font-size: 13px;
}

/* main без верхнего padding'а — topbar и так sticky, page-sub задаёт отступ */
.main { padding: 0 !important; }
.main > .view { padding: 0 28px 24px; }

/* 3. search в topbar — увеличить, чтобы placeholder влезал */
.topbar .search { min-width: 320px; flex: 1 1 320px; max-width: 480px; }

/* 4. timeline compact — payload-code на отдельной строке с переносом */
.timeline.compact .event { white-space: normal; }
.timeline.compact .event code,
.timeline.compact .event .event-meta {
  display: inline-block;
  max-width: 100%;
  word-break: break-word;
  white-space: normal;
  font-size: 11.5px;
  line-height: 1.4;
}
/* В таблицах аудита тоже — payload не должен распирать страницу */
.table tbody td code {
  display: inline-block;
  max-width: 520px;
  word-break: break-word;
  white-space: normal;
}

/* 5. Toast поверх любых модалок (modal-backdrop z-index 100) */
.toast { z-index: 200 !important; }

/* 6. Form-controls в label вне .grid — те же стили что и .grid input */
label > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
label > select,
label > textarea {
  display: block;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-2);
  padding: 9px 12px;
  font-size: 14px;
  color: var(--ink);
  font-family: inherit;
  margin-top: 6px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
label > textarea {
  min-height: 78px;
  resize: vertical;
}
label > input:focus, label > select:focus, label > textarea:focus {
  outline: none;
  border-color: var(--primary-mid);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
/* label сам выстраивается в столбец */
label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}
/* Внутри .grid сохраняем flex-column (label прижимает input-y под себя) */
.grid > label { display: flex; flex-direction: column; gap: 6px; }
.grid > label > input,
.grid > label > select,
.grid > label > textarea { margin-top: 0; }

/* Sidebar и main: чтобы flex-row растягивался на всю высоту, sidebar 100vh */
.app { min-height: 100vh; }
.sidebar { overflow-y: auto; }

/* ============================================================
   0.3.7.3 — UX-polish: справочники hub+detail, компактные таблицы.
   ============================================================ */

/* Hub справочников: KPI-плитки выглядят как кликабельные карточки */
.card.kpi[data-dict-open] {
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.card.kpi[data-dict-open]:hover {
  background: var(--surface-2);
  border-color: var(--hairline-strong);
}
.card.kpi[data-dict-open]:active { transform: translateY(1px); }

/* Truncate utility (упоминался в spec, но не было определения) */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Audit table — payload компактный, перенос длинного JSON */
.audit-table { table-layout: fixed; width: 100%; }
.audit-table th, .audit-table td { vertical-align: top; }
.audit-table code.audit-payload {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-2);
  background: var(--surface-2);
  border-radius: var(--r-1);
  padding: 6px 8px;
  max-height: 90px;
  overflow: auto;
  word-break: break-word;
  white-space: pre-wrap;
}

/* Employee table — фиксированная раскладка, чтобы колонки не плыли */
.emp-table { table-layout: auto; }
.emp-table td { vertical-align: middle; }
/* Реестр сотрудников: широкая таблица не должна выходить за карточку — overflow внутри
   обёртки (скролл по таблице, край карточки и страница чистые). */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.emp-table .staff-cell { max-width: 210px; }

/* Timeline compact — ещё чуть уплотняем (дата стала короче, плашка тоже) */
.timeline.compact .event {
  padding: 5px 9px !important;
  background: transparent !important;
  border-left-width: 2px !important;
  border-radius: 4px !important;
}
.timeline.compact .event-time {
  font-size: 10.5px !important;
  letter-spacing: 0;
  color: var(--mute);
}
.timeline.compact .event-meta {
  font-size: 11px !important;
  color: var(--mute);
}
.timeline.compact .timeline-dot {
  width: 7px;
  height: 7px;
  margin-top: 7px;
}

/* page-title — позволить заворачиваться, чтобы не уезжал за пределы topbar */
#page-title { white-space: normal; min-width: 0; flex: 1; }
.crumbs { flex-wrap: wrap; }

/* ============================================================================
   0.3.7.4 — UI hotfix (round 2 после ревью Галсана)
   ============================================================================ */

/* --- (1) Searchable select ------------------------------------------------ */
/* Корневой контейнер: подстраивается под родителя. В .grid — block 100%, в
   .toolbar — inline-block с min-width, чтобы flex-row не схлопывался. */
.ssel { position: relative; display: block; width: 100%; }
.toolbar .ssel { display: inline-block; flex: 0 1 220px; min-width: 180px; max-width: 240px; width: auto; }
.bulk-bar .ssel { flex: 0 0 auto; min-width: 180px; }

/* Оригинальный <select> прячем полностью — display:none гарантированно
   убирает его из визуального потока. Form submission нам не нужен (JSON API),
   .value читается/пишется без визуального присутствия. */
select.ssel-hidden { display: none !important; }

/* Поле ввода поиска — стилизовано как обычный input в .grid/.toolbar. */
.ssel-input {
  width: 100%;
  height: 36px;
  padding: 7px 30px 7px 12px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-2);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
  box-sizing: border-box;
}
.ssel-input:focus {
  border-color: var(--primary-mid);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.ssel-input::placeholder { color: var(--mute); }
.ssel-caret {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: var(--mute);
  font-size: 11px;
  cursor: pointer;
  user-select: none;
  pointer-events: auto;
  transition: transform 0.12s;
}
.ssel.open .ssel-caret { transform: translateY(-50%) rotate(180deg); }

.ssel-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 220px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-2);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18);
  z-index: 60;
}
.ssel-list.hidden { display: none; }
.ssel-item {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  border-bottom: 1px solid var(--hairline);
  user-select: none;
}
.ssel-item:last-child { border-bottom: none; }
.ssel-item:hover,
.ssel-item.active { background: var(--primary-soft); }
.ssel-item.current { color: var(--ink); font-weight: 500; }
/* ATH-222: приоритетный пункт «по местам проживания» — выделен акцентом сверху списка. */
.ssel-residence {
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-mid);
  cursor: pointer;
  border-bottom: 1px solid var(--hairline-strong);
  background: var(--primary-soft);
  user-select: none;
}
.ssel-residence:hover { background: var(--primary); color: #fff; }
.ssel-empty {
  padding: 12px;
  font-size: 12px;
  color: var(--mute);
  font-style: italic;
  text-align: center;
}

/* --- (2) Дата-инпуты: одинаковая высота с остальными полями + tabular nums */
input[type="date"] { font-variant-numeric: tabular-nums; }
.grid input[type="date"],
.toolbar input[type="date"] { height: 36px; box-sizing: border-box; }
/* 0.9.6.5: текстовые/числовые поля в .grid — та же высота 36px, что у .ssel-input
   (обёрнутые селекты) и дат, чтобы поля в одной строке были выровнены
   («Название» vs «Объект» в шаблоне, «Код слота» в слоте и т.п.). */
.grid input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  height: 36px; box-sizing: border-box; padding-top: 7px; padding-bottom: 7px;
  /* убираем margin-top:6px от правила `label > input` — в .grid отступ уже даёт flex-gap,
     а у обёрнутых селектов (.ssel) margin нет → иначе input на 6px ниже (рассинхрон). */
  margin-top: 0;
}

/* --- (3) Журнал событий: фиксированные ширины колонок ----------------- */
.audit-table { table-layout: fixed; width: 100%; }
.audit-table colgroup col:nth-child(1) { width: 96px; }
.audit-table colgroup col:nth-child(2) { width: 170px; }
.audit-table colgroup col:nth-child(3) { width: 180px; }
.audit-table colgroup col:nth-child(4) { width: 220px; }
.audit-table colgroup col:nth-child(5) { width: auto; }
.audit-table th, .audit-table td {
  vertical-align: top;
  padding: 8px 10px;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.audit-table td.audit-entity {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-2);
}

/* --- (4) Справочники-hub: ВСЕ плитки одинаковой высоты ---------------- */
/* Корень: stretch гарантирует выравнивание всех плиток по самой высокой. */
.grid.three { align-items: stretch; }
.card.kpi[data-dict-open] {
  display: flex;
  flex-direction: column;
  min-height: 148px;
  padding: 18px 20px;
}
.card.kpi[data-dict-open] .eyebrow {
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.card.kpi[data-dict-open] .value {
  font-size: 36px;
  line-height: 1.05;
  margin-bottom: 8px;
}
/* Subtitle: 2 строки по 18px — фиксируем чтобы плитка "Города" с длинным
   текстом не выпирала из общей сетки. */
.card.kpi[data-dict-open] .item-sub {
  font-size: 12.5px;
  color: var(--mute);
  line-height: 1.4;
  min-height: 36px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: auto;
}

/* --- (4a) KPI dashboard: 4 карточки одинаковой высоты ----------------- */
/* Корень: убираем дефолтный margin у .card в grid (там есть свой gap),
   иначе первая карточка прилипает к top, а остальные — к top+18, что в
   связке с align-items:stretch даёт неравенство высот. */
.grid.two > .card,
.grid.three > .card,
.grid.four > .card { margin: 0 !important; }

.grid.four { align-items: stretch; }
.grid.four .card.kpi,
.grid.four > .kpi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 108px;
  padding: 18px 22px;
}
.grid.four .card.kpi .value,
.grid.four > .kpi .value {
  margin-bottom: 4px;
}
.grid.four .card.kpi .label,
.grid.four > .kpi .label {
  margin: 0;
}

/* --- (5) Bulk-bar: select с тёмным текстом на светлом фоне ----------- */
.bulk-bar select,
.bulk-bar select#bulkStatus {
  background: var(--surface) !important;   /* 0.8.1: было #ffffff — в тёмной теме светлый --ink на белом был нечитаем */
  color: var(--ink) !important;
  border: 1px solid var(--hairline-strong) !important;
  padding: 6px 10px !important;
  border-radius: var(--r-2) !important;
  font: inherit !important;
  font-size: 13px !important;
  height: 34px !important;
}
.bulk-bar select option {
  background: var(--surface) !important;
  color: var(--ink) !important;
}
.bulk-bar select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}
/* Ssel внутри bulk-bar (на будущее) */
.bulk-bar .ssel-input {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--hairline-strong);
}

/* --- (6) Toolbar: единая высота всех элементов, выравнивание по baseline */
.toolbar { align-items: center; gap: 10px; }
.toolbar input,
.toolbar select,
.toolbar .ssel-input,
.toolbar button {
  height: 36px;
  box-sizing: border-box;
}
.toolbar > input[type="text"],
.toolbar > input[type="search"],
.toolbar input[placeholder*="Поиск"] {
  flex: 1 1 200px;
  min-width: 180px;
  max-width: 320px;
}
.toolbar > button.ghost.small { padding: 0 14px; }

/* --- (8) Модалки: вложенные окна должны быть НАД карточкой заявки --- */
/* В index.html #modal объявлен РАНЬШЕ #request-modal — при равных z-index
   позже стоящий перекрывает. Универсальный #modal используется для модалов
   "Подобрать маршрут", "Добавить сегмент", "Редактировать заявку", их нужно
   видеть поверх открытой карточки заявки. */
#modal.modal-backdrop { z-index: 150 !important; }
#request-modal.modal-backdrop { z-index: 100; }

/* --- (9) Timeline истории заявки в карточке: не разрывать дату/hash --- */
.timeline.compact .event {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.timeline.compact .event-time {
  flex: 0 0 auto;
  white-space: nowrap;
  min-width: 88px;
}
.timeline.compact .event-line {
  flex: 1 1 auto;
  min-width: 0;
  word-break: normal;
  overflow-wrap: anywhere;
}
.timeline.compact .event-meta {
  display: block;
  margin-left: 0 !important;
  margin-top: 2px;
  font-size: 11px;
  color: var(--mute);
  word-break: break-all;
}
.timeline.compact .event code {
  font-family: var(--mono);
  font-size: 11px;
  word-break: break-all;
}

/* --- (7) ⌘K palette: исправление сломанной grid-раскладки ------------ */
/* В рендере (см. app.js cmdkRender) у .cmdk-item только 2 ребёнка
   (div.label-block + span.cmdk-kbd), а CSS-grid-template был на 4 ребёнка
   (28px 1fr auto auto). Приводим template к фактической структуре. */
.cmdk-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
}
.cmdk-item > div {
  flex: 1 1 auto;
  min-width: 0;
}
.cmdk-item > span.cmdk-kbd {
  flex: 0 0 auto;
}
/* .cmdk-section — в текущем рендере используется как subtitle строки, а не
   заголовок секции (как было задумано). Уменьшаем padding и убираем uppercase
   чтобы не выглядел как отдельный раздел. */
.cmdk-item .cmdk-section {
  padding: 2px 0 0;
  text-transform: none;
  letter-spacing: 0;
  font-family: inherit;
  font-size: 12px;
  color: var(--mute);
}
.cmdk-item .bold {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}

/* ============================================================
   0.5.1.1 — правки по фидбэку
   ============================================================ */
/* Селект перехода статуса в карточке заявки: читаемый + радиус как у соседних кнопок */
#transitionSelect, #bulkStatus {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-2);
  padding: 8px 14px;
  font-size: 13px;
  font-family: inherit;
}
/* Дашборд: компактная сетка статусов вместо длинной таблицы */
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px;
}
.status-chip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
}
.status-chip-label { color: var(--ink-2); font-size: 13px; }
.status-chip-count { font-weight: 700; font-size: 15px; color: var(--ink); }

/* ============================================================
   0.5.2.1 — правки по фидбэку
   ============================================================ */
/* bug1: кнопки в тёмном bulk-bar были «бело-по-белому». Читаемые кнопки на тёмной плашке. */
.bulk-bar .secondary {
  background: rgba(244, 246, 250, 0.12);
  color: #f4f6fa;
  border-color: rgba(244, 246, 250, 0.30);
}
.bulk-bar .secondary:hover { background: rgba(244, 246, 250, 0.22); }
.bulk-bar .primary { background: var(--paper); color: var(--ink); border-color: transparent; }
.bulk-bar .danger { color: #ff9b9b; border-color: rgba(255, 155, 155, 0.4); background: transparent; }
.bulk-bar .danger:hover { background: rgba(255, 155, 155, 0.14); }

/* bug3: в модальных .grid селекты и инпуты одной высоты (выравнивание ряда). */
.grid > label > input:not([type="file"]),
.grid > label > select {
  height: 40px;
  box-sizing: border-box;
}

/* bug4: на широких экранах фильтры-дропдауны растягивались. Ограничиваем ширину, поиск забирает остаток. */
.toolbar.filters-row > select,
.toolbar.filters-row .ssel { flex: 0 1 220px; max-width: 240px; }
.toolbar.filters-row > input { flex: 1 1 200px; min-width: 160px; }

/* ============================================================
   0.5.2.2 — правки по фидбэку
   ============================================================ */
/* (1) Кнопки bulk-bar читаемы в ОБЕИХ темах. Плашка bulk-bar = var(--ink),
   её текст = var(--paper); в тёмной теме токены инвертируются (плашка светлая).
   Поэтому захардкоженный светлый текст (#f4f6fa из 0.5.2.1) был невидим в
   тёмной теме. Привязываемся к var(--paper) для текста; фоны/hover — нейтральный
   серый rgba (виден и на тёмной, и на светлой плашке; без color-mix — совместимо
   со старыми Chrome на проде). Эти правила перекрывают блок 0.5.2.1 (ниже по
   каскаду). «Снять выбор» — .ghost; .secondary/.danger — bulk-bar справочника. */
.bulk-bar .ghost {
  color: var(--paper);
  background: transparent;
  border-color: transparent;
}
.bulk-bar .ghost:hover { background: rgba(128, 128, 128, 0.18); }
.bulk-bar .secondary {
  color: var(--paper);
  background: rgba(128, 128, 128, 0.16);
  border-color: rgba(128, 128, 128, 0.34);
}
.bulk-bar .secondary:hover { background: rgba(128, 128, 128, 0.26); }
.bulk-bar .primary { background: var(--paper); color: var(--ink); border-color: transparent; }
.bulk-bar .danger { color: #e5484d; background: transparent; border-color: rgba(229, 72, 77, 0.45); }
.bulk-bar .danger:hover { background: rgba(229, 72, 77, 0.16); }

/* .ssel в bulk-bar не должен растягиваться на всю ширину (базовый .ssel width:100%
   выталкивал кнопки за экран). Фиксируем компактную ширину. */
.bulk-bar .ssel {
  flex: 0 0 220px;
  width: 220px;
  min-width: 180px;
  max-width: 240px;
}

/* (4) Единый вид выпадающих списков: короткие списки — .ssel без поля поиска,
   курсор как у кликабельного дропдауна (не текстовый). */
.ssel-nosearch .ssel-input { cursor: pointer; }

/* .ssel в flex-ряду .actions (карточка заявки: «Перевести в статус…») не должен
   растягиваться на всю ширину (базовый width:100%). Компактная ширина как в toolbar. */
.actions .ssel {
  flex: 0 1 240px;
  width: auto;
  min-width: 200px;
  max-width: 280px;
}

/* (4+3) В модальных .grid все селекты теперь .ssel — выравниваем высоту .ssel-input
   с обычными input (40px из bug3 0.5.2.1), иначе ряд «инпут + дропдаун» разъезжается. */
.grid > label > .ssel .ssel-input {
  height: 40px;
  box-sizing: border-box;
}

/* ============================================================
   0.5.3 — правки по QA-отчёту 2026-06-02
   ============================================================ */
/* (QA 2.6) Тост не должен накрывать чип роли/кнопку выхода в топбаре — опускаем
   контейнер ниже шапки (топбар ~60px). Перекрывает базовый top:24px (ниже по каскаду). */
.toast { top: 72px; }

/* (QA 2.8) Строка отключённого пользователя: приглушаем ТОЛЬКО текстовые ячейки,
   а не всю строку. opacity на <tr> гасил и кнопки (дочерний opacity не вернуть),
   из-за чего кликабельные «Изменить»/«Пароль» выглядели как disabled. */
.table tr.row-muted > td { color: var(--mute); }
.table tr.row-muted .item-sub { color: var(--mute); }
/* кнопки действий сохраняют обычный вид (свой цвет, не наследуют mute от td) */
.table tr.row-muted .ghost { color: var(--ink-2); }

/* ============================================================
   0.5.4 — Готовность сотрудника (PR-2)
   ============================================================ */
/* Бейдж готовности допусков: красный (просрочен/нет) / янтарный (истекает).
   Полупрозрачный фон читаем в обеих темах, цвет текста фиксирован. */
.ready-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}
.ready-blocked { background: rgba(229, 72, 77, 0.16); color: #e5484d; }
.ready-warn { background: rgba(199, 122, 41, 0.18); color: #c77a29; }

/* ATH-226 Фаза 1: поля формы документов сотрудника (Номер/дата) в дровере — темо-переменные,
   иначе сырые <input> белеют в тёмной теме (как фильтры реестра .toolbar input). См. feedback_input_theming. */
.doc-rec-form input {
  padding: 7px 10px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-2);
  background: var(--surface);
  font-size: 13px;
  color: var(--ink);
  box-sizing: border-box;
}
.doc-rec-form input:focus { outline: none; border-color: var(--ink); }

/* 0.5.6 (PR-10): бейдж SLA — риск срыва (янтарный) / просрочена (красный).
   Полупрозрачный фон читаем в обеих темах, цвет текста фиксирован. */
.sla-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}
.sla-overdue { background: rgba(229, 72, 77, 0.16); color: #e5484d; }
.sla-risk { background: rgba(199, 122, 41, 0.18); color: #c77a29; }

/* ============================================================
   0.8.1 REV-2 — скелетоны загрузки + доступность движения
   ============================================================ */

/* Скелетон-плейсхолдеры (на базе .shimmer): блок, строка, ячейка. */
.skel { display: block; border-radius: var(--r-2); background:
  linear-gradient(90deg, var(--surface-2) 0%, var(--surface) 50%, var(--surface-2) 100%);
  background-size: 200% 100%; animation: shimmer 1.6s infinite linear; }
.skel-line { height: 12px; margin: 8px 0; }
.skel-row { height: var(--row-h); margin: 6px 0; border-radius: var(--r-2); }
.skel-card { height: 96px; border-radius: var(--r-3); margin-bottom: 12px; }
.skel-list { padding: 4px 0; }

/* Уважаем системную настройку «уменьшить движение»: гасим анимации/переходы. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .skel, .shimmer { animation: none !important; }
}

/* Модуль «Отчёты»: плитки категорий */
.report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.report-tile {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  text-align: left; padding: 14px 16px; min-height: 56px;
  background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--r-3);
  color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.report-tile:hover { background: var(--surface-2); border-color: var(--accent); transform: translateY(-1px); }
/* 0.9.6.5: стилизованная line-иконка слева в плитке отчёта (акцент, темо-независимо). */
.report-ico { flex: 0 0 auto; width: 26px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); }
.report-tile.soon .report-ico { color: var(--mute-2); }
/* ATH-225: иконка вида транспорта в строке сегмента (тема-независимо, акцентом) */
.seg-mode-ico { color: var(--accent); vertical-align: -3px; margin-right: 5px; }

/* 0.9.6.32: иконка статуса согласования (line-SVG вместо эмодзи; наследует цвет заголовка) */
.appr-ico { width: 15px; height: 15px; vertical-align: -2px; margin-right: 5px; flex: none; }

/* ATH-228: тематический лоадер — человечек в каске «пересаживается» самолёт→поезд→вертолёт */
.transit-loader { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 12px; color: var(--accent); }
.tl-stage { position: relative; width: 76px; height: 40px; }
.tl-person { position: absolute; left: 4px; top: 7px; color: var(--accent); animation: tl-bob 1.1s ease-in-out infinite; }
.tl-stage .tl-veh { position: absolute; left: 40px; top: 5px; color: var(--accent); opacity: 0; animation: tl-cycle 3.6s linear infinite; }
/* 0.9.6.38: задержки задаём с ТОЙ ЖЕ специфичностью (.tl-stage .tl-veh-x), что и базовое
   правило с animation-shorthand — иначе shorthand сбрасывает animation-delay в 0 (2 класса >
   1 класс), все три транспорта идут синхронно и НАКЛАДЫВАЮТСЯ (корень бага, не keyframe). */
.tl-stage .tl-veh-a { animation-delay: 0s; }
.tl-stage .tl-veh-b { animation-delay: 1.2s; }
.tl-stage .tl-veh-c { animation-delay: 2.4s; }
.tl-caption { font-size: 13px; color: var(--mute); }
/* пара селектов часы/минуты (время чартера) */
.time-pair { display: flex; gap: 6px; }
.time-pair .ssel { flex: 1 1 0; min-width: 0; }
@keyframes tl-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
/* 0.9.6.37: каждый транспорт виден СТРОГО в своём слоте (окно 0–33% при 3 машинах × delay
   33.3%) и полностью гаснет ДО появления следующего — без cross-fade/наложения (фидбэк Галсана:
   поезд/самолёт накладывались). Все .tl-veh абсолютны в одной точке, поэтому одновременно
   видимым должен быть только один. */
@keyframes tl-cycle {
  0%   { opacity: 0; transform: translateX(-6px); }
  5%   { opacity: 1; transform: translateX(0); }
  29%  { opacity: 1; transform: translateX(0); }
  33%  { opacity: 0; transform: translateX(6px); }
  100% { opacity: 0; transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .tl-person { animation: none; }
  .tl-stage .tl-veh { animation: none; }
  .tl-stage .tl-veh-a { opacity: 1; }
  .tl-stage .tl-veh-b, .tl-stage .tl-veh-c { display: none; }
}
.report-tile-title { flex: 1; min-width: 0; }
.report-tile.soon { cursor: default; color: var(--mute); font-weight: 500; }
.report-tile.soon:hover { background: var(--surface); border-color: var(--hairline-strong); transform: none; }
.report-soon { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--mute-2); background: var(--surface-2); border-radius: var(--r-pill); padding: 2px 8px; white-space: nowrap; }

/* Форма параметров отчёта: ровный ряд, кнопка по нижнему краю */
.report-params { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin: 4px 0 14px; }
.report-params .rp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.report-params .rp-field > label { font-size: 12px; color: var(--mute); font-weight: 600; }
/* 0.9.2.1: поля параметров отчётов — тот же темо-зависимый вид, что фильтры
   «Реестра заявок» (.toolbar input/select). Раньше задавались только размеры →
   фон уходил в дефолтный белый и в тёмной теме поля дат/списки светились. */
.report-params .rp-field input[type="date"],
.report-params .rp-field select,
.report-params .rp-field .city-ac {
  height: 36px;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-2);
  color: var(--ink);
  padding: 9px 12px;
  font-size: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.report-params .rp-field input[type="date"], .report-params .rp-field select { min-width: 150px; }
.report-params .rp-field .city-ac { min-width: 200px; }
.report-params .rp-field input[type="date"]:focus,
.report-params .rp-field select:focus,
.report-params .rp-field .city-ac:focus {
  outline: none;
  border-color: var(--primary-mid);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.report-params .rp-field input[type="hidden"] { display: none; }
.report-params > button { height: 36px; }
/* Чекбокс «только с проблемами» — адекватного размера, в одну строку */
.report-params .rp-field.rp-check { justify-content: flex-end; }
.report-params .rp-field.rp-check > label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); font-weight: 500; height: 36px; margin: 0; cursor: pointer; }
.report-params .rp-field.rp-check input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; cursor: pointer; }

/* 0.9.1: брендовый date-picker (Marble). Нативную всплывашку прячем, поле — как кнопка. */
input[type="date"]::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; }
input[type="date"] { cursor: pointer; }
.dp {
  position: fixed; z-index: 300; width: 256px; padding: 12px;
  background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--r-3);
  box-shadow: 0 18px 48px rgba(14, 26, 46, 0.28); animation: dp-in var(--dur-fast) var(--ease);
}
@keyframes dp-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.dp-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
/* 0.9.6.15: месяц/год — кнопки-переключатели вида (months/years) внутри панели. */
.dp-title { font-weight: 600; font-size: 13.5px; color: var(--ink); background: none; border: 0; cursor: pointer; padding: 4px 8px; border-radius: var(--r-2); transition: background var(--dur-fast) var(--ease); }
.dp-title:hover { background: var(--surface-2); }
.dp-title-static { font-weight: 600; font-size: 13.5px; color: var(--ink); padding: 4px 8px; }
.dp-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px 2px; }
.dp-pick-years { grid-template-columns: repeat(4, 1fr); max-height: 196px; overflow-y: auto; }
.dp-pick-cell { background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r-2); color: var(--ink); padding: 9px 4px; font-size: 13px; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.dp-pick-cell:hover { border-color: var(--primary-mid); background: var(--surface); }
.dp-pick-cell.dp-sel { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }
.dp-head-sel { display: flex; gap: 6px; flex: 1; justify-content: center; }
.dp-head-sel select {
  appearance: none; -webkit-appearance: none;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-2);
  padding: 4px 8px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.dp-head-sel select:focus { outline: none; border-color: var(--primary-mid); }
.dp-nav { width: 28px; height: 28px; border-radius: var(--r-2); background: transparent; border: 1px solid var(--hairline); color: var(--ink); cursor: pointer; font-size: 16px; line-height: 1; transition: background var(--dur-fast) var(--ease); }
.dp-nav:hover { background: var(--surface-2); }
.dp-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.dp-dow span { text-align: center; font-size: 11px; color: var(--mute); font-weight: 600; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-day { height: 30px; border: 0; background: transparent; border-radius: var(--r-2); color: var(--ink); font-size: 13px; cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.dp-day:hover { background: var(--surface-2); }
.dp-day.dp-out { color: var(--mute-2); }
.dp-day.dp-today { box-shadow: inset 0 0 0 1px var(--accent); }
.dp-day.dp-sel { background: var(--primary); color: #fff; font-weight: 600; }
.dp-foot { display: flex; justify-content: space-between; margin-top: 8px; }
.dp-link { background: transparent; border: 0; color: var(--accent); font-size: 12.5px; cursor: pointer; padding: 4px; }
.dp-link:hover { text-decoration: underline; }

/* ATH-224: переписка сотрудник↔логист. Поля ввода — темо-зависимые (как фильтры реестра). */
.msg-thread { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 8px; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 8px; }
.msg { max-width: 82%; padding: 7px 10px; border-radius: 10px; font-size: 13px; line-height: 1.42; }
.msg-mine { align-self: flex-end; background: var(--primary-soft); border: 1px solid var(--primary-mid); }
.msg-other { align-self: flex-start; background: var(--paper); border: 1px solid var(--hairline-strong); }
.msg-meta { font-size: 10.5px; color: var(--mute); margin-bottom: 3px; }
.msg-body { color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-compose { display: flex; gap: 6px; margin-top: 8px; align-items: flex-end; }
.msg-compose textarea { flex: 1; resize: vertical; min-height: 38px; font: inherit; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--hairline-strong); background: var(--surface); color: var(--ink); box-sizing: border-box; }
.msg-compose textarea:focus { outline: none; border-color: var(--primary-mid); box-shadow: 0 0 0 3px var(--primary-soft); }

/* ATH-224 итерация 2: «Поддержка» — бейдж непрочитанных в меню, инбокс admin, бейдж реестра */
.nav-badge { margin-left: auto; flex-shrink: 0; background: var(--problem); color: var(--paper); border-radius: 999px; font-size: 10.5px; line-height: 1; padding: 3px 7px; font-weight: 600; }
#nav button.active .nav-badge { background: var(--paper); color: var(--ink); }
.sup-row { display: flex; gap: 12px; align-items: center; padding: 12px 10px; border-bottom: 1px solid var(--hairline); cursor: pointer; border-radius: 6px; }
.sup-row:hover { background: var(--surface-2); }
.sup-row:last-child { border-bottom: 0; }
.msg-unread-pill { background: var(--primary-soft); color: var(--ink); border: 1px solid var(--primary-mid); }

.labor-bar,.labor-summary{border:1px solid var(--line);background:var(--primary-soft);border-radius:10px;padding:12px;margin:12px 0}.labor-bar{display:flex;align-items:center;justify-content:space-between;gap:12px}.labor-bar strong{color:var(--ink)}
/* ATH-42: the controls use the same theme surfaces as request filters. */
.pilot-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.pilot-tabs [aria-selected="true"]{box-shadow:0 0 0 2px var(--primary-soft)}
.pilot-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:12px;margin:18px 0}
.pilot-metric{padding:16px;border:1px solid var(--hairline-strong);border-radius:12px;background:var(--surface-2)}
.pilot-metric strong{display:block;font-size:22px;line-height:1.3;margin:8px 0;color:var(--ink)}
.pilot-facts{margin:16px 0}.pilot-notice{padding:12px 16px;border:1px solid var(--hairline-strong);border-radius:10px;background:var(--primary-soft);margin:12px 0}
.pilot-notice p{margin:4px 0}.pilot-table-wrap{overflow-x:auto;margin:16px 0}.pilot-table-wrap table{min-width:1000px}.pilot-table-wrap td{vertical-align:top;max-width:320px;overflow-wrap:anywhere}
.pilot-table-wrap .actions{display:flex;gap:6px;flex-wrap:wrap}.pilot-pager{display:flex;gap:12px;align-items:center;justify-content:flex-end;margin:12px 0}
.pilot-filters{flex-wrap:wrap;align-items:end;gap:10px}.pilot-filters label,.pilot-form label{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.pilot-filters label .ssel{flex:none;width:220px;max-width:100%}.pilot-form .ssel{flex:none;width:100%}
.pilot-form input:not([type="checkbox"]),.pilot-form select,.pilot-form textarea{width:100%;background:var(--surface);border:1px solid var(--hairline-strong);color:var(--ink);padding:9px 12px;box-sizing:border-box;border-radius:8px;font:inherit}
.pilot-form input:focus,.pilot-form select:focus,.pilot-form textarea:focus{border-color:var(--primary-mid);box-shadow:0 0 0 3px var(--primary-soft);outline:none}
.pilot-form .pilot-check{flex-direction:row;align-items:flex-start}.pilot-form [role="alert"]{color:var(--danger,#e65065);min-height:20px}.pilot-json{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface-2);color:var(--ink);padding:12px;border-radius:8px;max-height:55vh;overflow:auto}
@media(max-width:640px){.pilot-metrics{grid-template-columns:1fr 1fr}.pilot-metric{padding:12px}.pilot-metric strong{font-size:19px}.pilot-filters label{width:100%}.pilot-tabs button{flex:1 0 40%}.pilot-pager{justify-content:center;flex-wrap:wrap}.pilot-shell .section-row{flex-wrap:wrap;gap:10px}}