/* ============================================================================
   components.css — канонические компоненты дизайн-системы на токенах.
   Версия iOS. Подключается ПОСЛЕ tokens.css и ДО app.css, чтобы app.css мог
   точечно перекрывать правила при постепенной миграции экранов.

   ПРИНЦИП БЕЗОПАСНОСТИ СОХРАНЁН: рабочие классы, на которых висят 3550 строк
   app.css и разметка в JS (.btn, .card, .inp, .badge, .chip, .modal, .toast),
   здесь НЕ переопределяются. Ниже — канонические имена для новой и
   мигрируемой разметки. Экран переезжает на них целиком, а не по кусочкам.

   Каркас: панель разделов → список записей → карточка (см. «Объекты»,
   «Клиенты»). Остальные разделы — врезанные группы в один столбец.
   ========================================================================== */

/* ══ 1. ГИГИЕНА ══════════════════════════════════════════════════════════════
   Правила против замеченных дефектов: «разные шрифты» → шрифт наследуют и
   нативные элементы; «всё накладывается» → box-sizing и min-width:0;
   «то далеко, то слиплось» → расстояния только через gap (блок 3).          */

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: var(--lh);
  letter-spacing: var(--ls-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
}

/* Нативные элементы не наследуют шрифт — самая частая причина «в одном месте
   один шрифт, в другом другой». */
button, input, select, textarea, optgroup { font: inherit; color: inherit; letter-spacing: inherit; }

/* Текст в колонке flex/grid переполняет её, если не разрешить сжатие. */
.u-min0, .u-row > *, .u-col > *, .u-grid > * { min-width: 0; }
.u-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Числа выравниваются по разрядам: суммы, время, коды, проценты. */
.tnum, .u-num,
.vehicle-code, .obj-code, .sr-num, .stop-no, .frm-num, .bal-big, .pct, .load, .cnt {
  font-variant-numeric: tabular-nums;
}

p, .u-prose { text-wrap: pretty; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-d); }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--accent-sf);
  outline-offset: 1px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--accent-sf); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-2); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}


/* ══ 2. ДВИЖЕНИЕ ═════════════════════════════════════════════════════════════
   Одна кривая на весь интерфейс. Появление — всплытие на 6–8px, уход листа
   и панелей — за свой край. Нажатие всегда уменьшает элемент. */

@keyframes u-view-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes u-row-in  { from { opacity: 0; transform: translateY(6px); } }
@keyframes u-fade-in { from { opacity: 0; } }
@keyframes u-sheet-up { from { transform: translateY(100%); } }
@keyframes u-drawer-in { from { transform: translateX(100%); } }
@keyframes u-pop-in { from { opacity: 0; transform: scale(.94) translateY(6px); } }
@keyframes u-bar-grow { from { width: 0; } }

.u-anim-view  { animation: u-view-in .34s var(--ease) both; }
.u-anim-row   { animation: u-row-in .3s var(--ease) both; }
.u-anim-sheet { animation: u-sheet-up var(--dur-sheet) var(--ease) both; }
.u-anim-drawer{ animation: u-drawer-in .34s var(--ease) both; }
.u-anim-pop   { animation: u-pop-in .26s var(--ease) both; transform-origin: 0 100%; }
.u-anim-scrim { animation: u-fade-in .24s ease both; }

/* Каскад строк: не длиннее ~0,2 с на группу, иначе список кажется медленным. */
.u-anim-row:nth-child(1){animation-delay:0ms}    .u-anim-row:nth-child(2){animation-delay:16ms}
.u-anim-row:nth-child(3){animation-delay:32ms}   .u-anim-row:nth-child(4){animation-delay:48ms}
.u-anim-row:nth-child(5){animation-delay:64ms}   .u-anim-row:nth-child(6){animation-delay:80ms}
.u-anim-row:nth-child(7){animation-delay:96ms}   .u-anim-row:nth-child(8){animation-delay:112ms}
.u-anim-row:nth-child(9){animation-delay:128ms}  .u-anim-row:nth-child(n+10){animation-delay:144ms}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ══ 3. РАССТОЯНИЯ ═══════════════════════════════════════════════════════════
   Расстояние задаёт КОНТЕЙНЕР через gap, а не элемент через margin: тогда
   удаление или перестановка элемента не оставляет провалов. */

.u-row  { display: flex; align-items: center; gap: var(--s-3); }
.u-row--start { align-items: flex-start; }
.u-col  { display: flex; flex-direction: column; gap: var(--s-2); }
.u-grid { display: grid; gap: var(--s-3); }
.u-grid--auto { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.u-grid--cards { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); align-content: start; }
.gap-1{gap:var(--s-1)} .gap-2{gap:var(--s-2)} .gap-3{gap:var(--s-3)}
.gap-4{gap:var(--s-4)} .gap-5{gap:var(--s-5)} .gap-6{gap:var(--s-6)}


/* ══ 4. КАРКАС ═══════════════════════════════════════════════════════════════ */

.win { display: flex; height: 100vh; height: 100dvh; overflow: hidden; background: var(--bg); }

/* Панель разделов. Полупрозрачный материал; сворачивается до значков. */
.sidebar {
  width: var(--w-sidebar); flex: none;
  display: flex; flex-direction: column;
  background: var(--sidebar);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-right: .5px solid var(--line);
  transition: width var(--dur-slow) var(--ease);
}
.sidebar.is-collapsed { width: var(--w-sidebar-collapsed); }
.sidebar-head { height: var(--h-bar); flex: none; display: flex; align-items: center; gap: var(--s-3); padding: 0 14px; }
.sidebar-logo { width: 26px; height: 26px; border-radius: 7px; display: block; flex: none; }
.sidebar-brand { font-size: var(--text-lg); font-weight: var(--fw-semibold); letter-spacing: var(--ls-title); }
.sidebar-nav { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; padding: 0 var(--s-2) var(--s-2); }
.sidebar-group { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--s-3); }
.sidebar-group-title {
  padding: var(--s-2) 10px var(--s-1);
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-3);
}
.sidebar-item {
  display: flex; align-items: center; gap: 10px;
  min-height: 36px; padding: 0 10px; border-radius: 9px;
  font-size: var(--text-md); color: var(--ink); cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) ease, transform var(--dur-fast) ease;
}
.sidebar-item svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.sidebar-item:hover { background: var(--fill); }
.sidebar-item:active { transform: scale(.97); }
.sidebar-item.is-active { background: var(--accent-solid); color: #fff; font-weight: var(--fw-semibold); }
.sidebar-item.is-active svg { color: #fff; }
.sidebar-item.is-active:hover { filter: brightness(1.06); background: var(--accent-solid); }
.sidebar-item-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-foot { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: .5px solid var(--line); }

/* Панель заголовка раздела. */
.bar {
  flex: none; display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--h-bar); padding: 9px var(--s-5);
  background: var(--bar);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-bottom: .5px solid var(--line);
}
.bar-title { font-size: var(--text-lg); font-weight: var(--fw-semibold); letter-spacing: var(--ls-title); }
.bar-sub { font-size: var(--text-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bar-spacer { flex: 1; min-width: 12px; }

/* Крупный заголовок раздела — как largeTitle в iOS. */
.large-title { font-size: var(--text-3xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-large); text-wrap: pretty; }
.large-sub { font-size: var(--text-md); color: var(--ink-2); text-wrap: pretty; }

/* Область прокрутки: во всю ширину, без узкой колонки по центру. */
.content { flex: 1; min-width: 0; overflow: auto; padding: var(--s-5) var(--s-6) 28px; }
.content-col { width: 100%; display: flex; flex-direction: column; gap: 26px; }

/* Средняя колонка трёхколоночника. */
.list-pane {
  width: var(--w-list); flex: none; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--bg); border-right: .5px solid var(--line);
}
.list-pane-body { flex: 1; min-height: 0; overflow: auto; padding: 0 var(--s-3) 14px; display: flex; flex-direction: column; gap: 14px; }


/* ══ 5. ВРЕЗАННЫЕ ГРУППЫ И СТРОКИ ════════════════════════════════════════════
   Главный носитель содержимого. Плотных таблиц с рамками нет: группа —
   белая плашка со скруглением 16, строки разделены волосяной линией. */

.group { display: flex; flex-direction: column; gap: var(--s-2); }
.group-head { display: flex; align-items: baseline; gap: 10px; padding: 0 var(--s-1); }
.group-title {
  flex: 1; min-width: 0;
  font-size: var(--text-sm); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-3);
}
.group-action {
  padding: var(--s-1) 9px; margin: calc(var(--s-1) * -1) -9px; border-radius: var(--radius-sm);
  font-size: var(--text-md); font-weight: var(--fw-medium); color: var(--accent);
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur) ease, transform var(--dur-fast) ease;
}
.group-action:hover { background: var(--fill); }
.group-action:active { transform: scale(.95); }
.group-foot { padding: 0 6px; font-size: var(--text-sm); color: var(--ink-3); text-wrap: pretty; }

.inset-list {
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow);
}
.inset-row {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--h-row); padding: 9px var(--s-4);
  border-bottom: .5px solid var(--line);
  transition: background var(--dur) ease;
}
.inset-row:last-child { border-bottom: 0; }     /* без «висящей» линии внизу */
.inset-row.is-tappable { cursor: pointer; }
.inset-row.is-tappable:hover { background: var(--fill); }
.inset-row.is-tappable:active { opacity: .7; }
.inset-row.is-selected { background: var(--accent-solid); }
.inset-row.is-selected .row-title,
.inset-row.is-selected .row-sub,
.inset-row.is-selected .row-value { color: #fff; }
.inset-row.is-selected .row-sub, .inset-row.is-selected .row-value { opacity: .8; }
.inset-row.is-selected:hover { filter: brightness(1.06); background: var(--accent-solid); }

.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-title { font-size: var(--text-base); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-sub { font-size: var(--text-sm); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-value { flex: none; font-size: var(--text-md); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-value--strong { color: var(--ink); font-weight: var(--fw-medium); }
/* Строка «метка — значение» (реквизиты, сводка): значение справа. */
.row-label { flex: none; width: 120px; font-size: var(--text-md); color: var(--ink-3); }
.row-detail { flex: 1; min-width: 0; text-align: right; font-size: var(--text-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Шеврон. Только у строк, которые действительно открывают экран. */
.chevron { width: 9px; height: 9px; flex: none; color: var(--ink-4); }

/* Индикатор статуса и цветной знак машины/клиента. */
.dot { width: 9px; height: 9px; flex: none; border-radius: 999px; background: var(--muted-dot); }
.dot--ok{background:var(--ok)} .dot--warn{background:var(--warn)}
.dot--bad{background:var(--bad)} .dot--accent{background:var(--accent)}
.avatar {
  width: 32px; height: 32px; flex: none; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-solid); color: #fff;
  font-size: var(--text-xs); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
}
.avatar--round { border-radius: 999px; }


/* ══ 6. КНОПКИ ═══════════════════════════════════════════════════════════════
   В iOS кнопка — пилюля: заполненная (главное действие) или тональная. */

.btn-primary, .btn-tinted, .btn-plain, .btn-destructive {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--h-control-lg); padding: 0 var(--s-4);
  border: 0; border-radius: var(--radius-full);
  font-size: var(--text-md); font-weight: var(--fw-semibold); line-height: 1;
  white-space: nowrap; cursor: pointer;
  transition: filter var(--dur) ease, background var(--dur) ease, transform var(--dur-fast) var(--ease);
}
.btn-sm-h { height: var(--h-control); padding: 0 var(--s-3); font-size: var(--text-sm); }
.btn-lg-h { height: var(--h-button); border-radius: 14px; font-size: var(--text-lg); width: 100%; }

.btn-primary { background: var(--accent-solid); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { transform: scale(.95); }

.btn-tinted { background: var(--fill); color: var(--accent); font-weight: var(--fw-medium); }
.btn-tinted:hover { background: var(--fill-2); }
.btn-tinted:active { transform: scale(.95); }

.btn-plain { background: transparent; color: var(--accent); font-weight: var(--fw-medium); }
.btn-plain:hover { background: var(--fill); }
.btn-plain:active { transform: scale(.95); }

.btn-destructive { background: var(--bad-sf); color: var(--bad); }
.btn-destructive:hover { background: var(--tint-danger-hover); }
.btn-destructive:active { transform: scale(.95); }

.btn-primary:disabled, .btn-tinted:disabled, .btn-plain:disabled, .btn-destructive:disabled {
  opacity: .4; cursor: not-allowed; transform: none;
}

/* Круглая кнопка-значок в панели заголовка. */
.icon-button {
  position: relative; width: var(--h-control); height: var(--h-control); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; background: var(--fill); color: var(--accent); cursor: pointer;
  transition: background var(--dur) ease, transform var(--dur-fast) var(--ease);
}
.icon-button:hover { background: var(--fill-2); }
.icon-button:active { transform: scale(.9); }
.icon-button svg { width: 15px; height: 15px; }

.form-actions { display: flex; justify-content: flex-end; gap: var(--s-3); }


/* ══ 7. СЕГМЕНТ-КОНТРОЛ, ФИЛЬТРЫ, ПЕРЕКЛЮЧАТЕЛЬ, СТЕППЕР ════════════════════ */

.segmented { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--fill); }
.segmented > button, .segmented > .seg-item {
  border: 0; background: transparent; cursor: pointer;
  padding: 4px 13px; border-radius: 7px;
  font-size: var(--text-sm); color: var(--ink-2); white-space: nowrap;
  transition: background var(--dur-slow) var(--ease), color var(--dur) ease,
              box-shadow var(--dur-slow) ease, transform var(--dur-fast) ease;
}
.segmented > button:active, .segmented > .seg-item:active { transform: scale(.94); }
.segmented > .is-active, .segmented > [aria-selected="true"] {
  background: var(--seg-thumb); color: var(--ink); font-weight: var(--fw-semibold);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* Фильтр — тональная пилюля с шевроном вниз. */
.filter-pill {
  display: inline-flex; align-items: center; gap: 5px;
  height: var(--h-control); padding: 0 var(--s-3);
  border: 0; border-radius: 999px; background: var(--fill); color: var(--accent);
  font-size: var(--text-md); font-weight: var(--fw-medium); white-space: nowrap; cursor: pointer;
  transition: background var(--dur) ease, transform var(--dur-fast) ease;
}
.filter-pill:hover { background: var(--fill-2); }
.filter-pill:active { transform: scale(.94); }

/* Переключатель 51×31. Бегунок двигает transform — только он и
   интерполируется; justify-content меняется скачком. */
.switch {
  position: relative; width: 51px; height: 31px; flex: none;
  border: 0; border-radius: 999px; background: var(--fill-2); cursor: pointer;
  transition: background var(--dur-slow) var(--ease);
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px; border-radius: 999px;
  background: #fff; box-shadow: var(--sh-thumb);
  transition: transform var(--dur-slow) var(--ease);
}
.switch.is-on, .switch[aria-checked="true"] { background: var(--sys-green); }
.switch.is-on::after, .switch[aria-checked="true"]::after { transform: translateX(20px); }
.switch:active::after { width: 29px; }

.stepper { display: inline-flex; align-items: center; gap: 10px; }
.stepper-value { font-size: var(--text-base); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stepper-buttons { display: flex; border-radius: var(--radius-sm); overflow: hidden; background: var(--fill); }
.stepper-buttons > button {
  width: 34px; height: 30px; border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-lg); color: var(--ink);
  transition: background var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.stepper-buttons > button + button { border-left: .5px solid var(--line); }
.stepper-buttons > button:hover { background: var(--fill-2); }
.stepper-buttons > button:active { transform: scale(.88); background: var(--fill-2); }


/* ══ 8. ПОЛЯ ФОРМЫ ═══════════════════════════════════════════════════════════
   Канонические .input/.select/.textarea; существующий .inp не трогаем. */

.input, .select, .textarea {
  width: 100%; font: inherit; font-size: var(--text-base); color: var(--ink);
  background: var(--surface); border: 0; border-radius: var(--radius-md);
  height: var(--h-field); padding: 0 var(--s-3);
  box-shadow: inset 0 0 0 .5px var(--line); outline: none;
  transition: box-shadow var(--dur) ease;
}
.textarea { min-height: 88px; height: auto; padding: var(--s-3); line-height: var(--lh); resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus { box-shadow: inset 0 0 0 1.5px var(--accent); }
.input:disabled, .select:disabled, .textarea:disabled { opacity: .5; cursor: not-allowed; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--bad); }

.select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

/* Поиск: серое поле с лупой, как в iOS. */
.search-field {
  display: flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 10px; border-radius: var(--radius-md);
  background: var(--fill); color: var(--ink-3); font-size: var(--text-base);
}
.search-field input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--ink); }

/* Строка формы во врезанной группе: метка слева, поле справа. */
.field-row { display: flex; align-items: center; gap: var(--s-3); min-height: 52px; padding: 9px var(--s-4); border-bottom: .5px solid var(--line); }
.field-row:last-child { border-bottom: 0; }
.field-label { flex: none; width: 96px; font-size: var(--text-base); color: var(--ink-3); }
.field-control { flex: 1; min-width: 0; }
.field-hint { font-size: var(--text-sm); color: var(--ink-3); }
.field-error { font-size: var(--text-sm); color: var(--bad); }


/* ══ 9. ПЛИТКИ И КАРТОЧКИ ════════════════════════════════════════════════════ */

.tile {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px var(--s-4); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow); min-width: 0;
}
.tile.is-tappable { cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) ease; }
.tile.is-tappable:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.tile.is-tappable:active { transform: scale(.98); }
.tile-label { font-size: var(--text-sm); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-value { font-size: var(--text-2xl); font-weight: var(--fw-semibold); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tile-sub { font-size: var(--text-sm); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.u-card {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: 18px; border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) ease;
}
.u-card--tappable:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.u-card-title { font-size: var(--text-xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-title); text-wrap: pretty; }
.u-card-text { font-size: var(--text-md); line-height: var(--lh); color: var(--ink-2); text-wrap: pretty; }

/* Полоса выполнения. */
.progress { height: 8px; border-radius: 999px; background: var(--fill); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: 999px; background: var(--accent); animation: u-bar-grow .8s var(--ease) both; }


/* ══ 10. БЕЙДЖИ И СЧЁТЧИКИ ═══════════════════════════════════════════════════ */

.badge--ok, .badge--warn, .badge--danger, .badge--accent, .badge--neutral {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 3px 10px; border-radius: 999px;
  font-size: var(--text-sm); font-weight: var(--fw-medium); line-height: 1.4;
  white-space: nowrap;
}
.badge--ok      { color: var(--ok);     background: var(--ok-sf); }
.badge--warn    { color: var(--warn);   background: var(--warn-sf); }
.badge--danger  { color: var(--bad);    background: var(--bad-sf); }
.badge--accent  { color: var(--accent); background: var(--accent-sf); }
.badge--neutral { color: var(--ink-2);  background: var(--fill); }

.count-badge {
  min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--fill); color: var(--ink-3);
  font-size: var(--text-xs); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums;
}
.count-badge--alert { background: var(--sys-red); color: #fff; }


/* ══ 11. ЛИСТ, ПАНЕЛЬ, ПОПОВЕР ═══════════════════════════════════════════════ */

.scrim {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: var(--scrim); animation: u-fade-in .24s ease both;
}
.scrim--sheet { display: flex; align-items: flex-end; justify-content: center; padding: 40px var(--s-5) 0; }
.scrim--drawer { display: flex; justify-content: flex-end; }

/* Лист снизу — основной способ показать карточку или форму. */
.sheet {
  width: min(720px, 100%); max-height: 100%;
  display: flex; flex-direction: column;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0; overflow: hidden;
  background: var(--sheet);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-lg);
  animation: u-sheet-up var(--dur-sheet) var(--ease) both;
}
.sheet-head {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: var(--s-2) 18px 14px; border-bottom: .5px solid var(--line);
}
.sheet-grabber { width: 38px; height: 5px; border-radius: 999px; background: var(--line-2); }
.sheet-titlebar { width: 100%; display: flex; align-items: center; gap: var(--s-3); }
.sheet-title { flex: 1; min-width: 0; text-align: center; font-size: var(--text-lg); font-weight: var(--fw-semibold); letter-spacing: var(--ls-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-body { flex: 1; min-height: 0; overflow: auto; padding: var(--s-4) 18px var(--s-6); display: flex; flex-direction: column; gap: var(--s-5); }

/* Боковая панель (уведомления). */
.drawer {
  width: min(380px, 100%); height: 100%;
  display: flex; flex-direction: column;
  background: var(--sheet);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-left: .5px solid var(--line);
  animation: u-drawer-in .34s var(--ease) both;
}
.drawer-head { flex: none; display: flex; align-items: center; gap: var(--s-3); padding: 14px 18px; border-bottom: .5px solid var(--line); }
.drawer-title { flex: 1; font-size: var(--text-xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-title); }
.drawer-body { flex: 1; min-height: 0; overflow: auto; padding: 14px; }

.popover {
  min-width: 220px; padding: 14px; border-radius: var(--radius-lg);
  background: var(--sheet);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-lg); z-index: var(--z-dropdown);
  display: flex; flex-direction: column; gap: 14px;
  transform-origin: 0 100%; animation: u-pop-in .26s var(--ease) both;
}
.menu-item {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: 36px; padding: 0 10px; border-radius: var(--radius-sm);
  font-size: var(--text-base); color: var(--ink); cursor: pointer;
  transition: background var(--dur) ease;
}
.menu-item:hover { background: var(--fill); }
.menu-item:active { opacity: .7; }
.menu-separator { height: .5px; margin: var(--s-1) 10px; background: var(--line); }

/* Информационная плашка. */
.note {
  display: flex; gap: var(--s-3); padding: var(--s-4);
  border-radius: var(--radius-lg); background: var(--accent-sf);
  font-size: var(--text-md); line-height: var(--lh); color: var(--ink); text-wrap: pretty;
}
.note--warn { background: var(--warn-sf); color: var(--warn); }
.note--danger { background: var(--bad-sf); color: var(--bad); }
.note-icon {
  width: 22px; height: 22px; flex: none; border-radius: 999px;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-md); font-weight: var(--fw-bold);
}


/* ══ 12. ПУСТОЕ СОСТОЯНИЕ И ЗАГРУЗКА ═════════════════════════════════════════
   Обязательны: без них пустой список выглядит как поломка платформы. */

.empty-state {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-2); padding: var(--s-10) var(--s-4); text-align: center;
}
.empty-state-title { font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--ink-2); }
.empty-state-text { font-size: var(--text-md); color: var(--ink-3); max-width: 340px; text-wrap: pretty; }

@keyframes u-shimmer { from { background-position: -320px 0; } to { background-position: 320px 0; } }
.skeleton {
  border-radius: var(--radius-sm); background: var(--fill);
  background-image: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  background-size: 320px 100%; background-repeat: no-repeat;
  animation: u-shimmer 1.2s linear infinite;
}
.skeleton--text { height: 12px; }
.skeleton--row { height: var(--h-row); border-radius: 0; }


/* ══ 13. СЕНСОРНЫЕ ЭКРАНЫ ════════════════════════════════════════════════════ */

@media (pointer: coarse) {
  .btn, .btn-sm, .btn-primary, .btn-tinted, .btn-plain, .btn-destructive,
  .icon-btn, .icon-button, .nav-btn, .mtab, .jr-pill, .tb-ic,
  .mc-btn, .sr-ok, .sr-x, .oa-btn, .filter-pill, .segmented > button { min-height: 44px; }
  .icon-btn, .icon-button, .tb-ic { min-width: 44px; }
  .sidebar-item, .inset-row, .menu-item { min-height: 44px; }
}

/* Узкие экраны: трёхколоночник складывается в один столбец. */
@media (max-width: 900px) {
  .sidebar { position: fixed; z-index: var(--z-header); height: 100%; transform: translateX(-100%); transition: transform var(--dur-slow) var(--ease); }
  .sidebar.is-open { transform: none; }
  .list-pane { width: 100%; border-right: 0; }
  .content { padding: var(--s-4) var(--s-4) 24px; }
}