/* ============================================================
   AsCar — дизайн-система «Гараж» v7 (2026-09)
   Поверх Tabler (Bootstrap 5.3). Графитовый фон, фирменный
   жёлтый (действие, бренд) и изумрудный (успех, «в норме»,
   ссылки, переключатели). Заголовки — Montserrat, текст — Inter.

   Порядок: шрифты → токены → мост в Tabler → база → фирменные
   элементы → каркас приложения → компоненты → паттерны экранов →
   движение → адаптив → печать. Публичные страницы — site.css.
   ============================================================ */

/* ── 0. Шрифты (свои, CSP не пускает внешние) ───────────────── */
/* Переменные: одно начертание-файл на набор символов. latin-ext
   нужен ради знака ₸, cyrillic-ext — ради казахских Ә Ғ Қ Ң Ө Ұ Ү Һ. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/inter-var-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/inter-var-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/inter-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url('/fonts/montserrat-var-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url('/fonts/montserrat-var-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url('/fonts/montserrat-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url('/fonts/montserrat-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── 1. Токены ──────────────────────────────────────────────── */
/* Фирменные — одинаковы в обеих темах. Жёлтый — с концепта, зелёный — с логотипа заказчика (30.10.2026). */
:root {
  --tch-yellow: #FDC500;
  --tch-yellow-rgb: 253, 197, 0;
  --tch-yellow-hover: #FFD23A;
  --tch-yellow-press: #E6B200;
  --tch-emerald: #12C45A;
  --tch-emerald-rgb: 18, 196, 90;
  --tch-emerald-hover: #2FDA74;
  --tch-ink: #0B1013;                 /* текст на жёлтой/изумрудной заливке */
  --tch-graphite: #080D10;            /* самый глубокий фон бренда */
  --tch-graphite-2: #0D1418;

  --tch-font-display: 'Montserrat', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tch-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --tch-r-xs: 6px;
  --tch-r-sm: 10px;
  --tch-r: 14px;
  --tch-r-lg: 18px;
  --tch-r-xl: 24px;
  --tch-r-pill: 999px;

  --tch-ease: cubic-bezier(.22, .8, .26, 1);
  --tch-dur: .2s;

  --tch-sidebar-w: 264px;
  --tch-sidebar-w-collapsed: 80px;
  --tch-topbar-h: 64px;
  --tch-tabbar-h: 62px;

  /* Переход «жёлтый → зелёный», как у знака логотипа */
  --tch-ring-gradient: linear-gradient(135deg, var(--tch-yellow) 0%, var(--tch-yellow) 38%, var(--tch-emerald) 66%, var(--tch-emerald) 100%);
  --tch-sidebar-bg: #070B0E;
}

/* Тёмная тема — основная (так задумано в концепте) */
:root,
[data-bs-theme="dark"] {
  --tch-bg: #080D10;
  --tch-bg-rgb: 8, 13, 16;
  --tch-surface: #0F161A;
  --tch-surface-rgb: 15, 22, 26;
  --tch-surface-2: #141D22;
  --tch-surface-3: #1B262C;
  --tch-input-bg: #0B1216;
  --tch-line: rgba(255, 255, 255, .075);
  --tch-line-strong: rgba(255, 255, 255, .13);
  --tch-text: #EDF1F2;
  --tch-text-rgb: 237, 241, 242;
  --tch-text-2: #A3AFB5;
  --tch-text-2-rgb: 163, 175, 181;
  --tch-text-3: #717E85;
  --tch-text-3-rgb: 113, 126, 133;
  --tch-link: #47DE85;
  --tch-link-rgb: 71, 222, 133;
  --tch-link-hover: #8BEDB2;
  --tch-accent-ink: #FDC500;          /* жёлтый как цвет текста */
  --tch-hover: rgba(255, 255, 255, .045);
  --tch-press: rgba(255, 255, 255, .07);
  --tch-glass: rgba(8, 13, 16, .78);
  --tch-shadow-1: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 1px 2px rgba(0, 0, 0, .35);
  --tch-shadow-2: 0 16px 40px -18px rgba(0, 0, 0, .8);
  --tch-shadow-3: 0 28px 70px -24px rgba(0, 0, 0, .85);

  /* Статусы: текст / подложка */
  --tch-ok: #47DE85;       --tch-ok-bg: rgba(18, 196, 90, .14);    --tch-ok-line: rgba(18, 196, 90, .35);
  --tch-warn: #FFB547;     --tch-warn-bg: rgba(245, 154, 35, .15); --tch-warn-line: rgba(245, 154, 35, .38);
  --tch-danger: #FF6F79;   --tch-danger-bg: rgba(240, 82, 95, .15); --tch-danger-line: rgba(240, 82, 95, .4);
  --tch-info: #6DB8FF;     --tch-info-bg: rgba(69, 166, 245, .15); --tch-info-line: rgba(69, 166, 245, .38);
  --tch-neutral: #A3AFB5;  --tch-neutral-bg: rgba(255, 255, 255, .07); --tch-neutral-line: rgba(255, 255, 255, .14);
  --tch-brand: #FDC500;    --tch-brand-bg: rgba(253, 197, 0, .13); --tch-brand-line: rgba(253, 197, 0, .4);
  --tch-danger-solid: #F0525F;
  --tch-warn-solid: #F59A23;
  --tch-info-solid: #45A6F5;

  --tch-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23A3AFB5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 6 5 5 5-5'/%3e%3c/svg%3e");

  /* Зависящие от темы акценты: берутся от ближайшего контейнера с темой */
  --tch-icon-ink: #FDC500;             /* иконки в кольцах и плашках */
  --tch-name-accent: #FDC500;          /* «CAR» в названии, звёзды */
  --tch-name-lead: #1FCB63;            /* «AS» в названии — зелёный логотипа */
  --tch-logo-filter: none;             /* логотипы марок — белые SVG */
  --tch-logo-opacity: 1;
  --tch-focus-border: #FDC500;
  --tch-focus-ring: rgba(253, 197, 0, .2);
  --tch-btn-close-filter: invert(1) grayscale(1) brightness(1.4);
  color-scheme: dark;
}

/* Светлая тема: тот же бренд, жёлтый — только заливкой, текст темнее */
[data-bs-theme="light"] {
  --tch-bg: #F2F4F3;
  --tch-bg-rgb: 242, 244, 243;
  --tch-surface: #FFFFFF;
  --tch-surface-rgb: 255, 255, 255;
  --tch-surface-2: #F5F7F6;
  --tch-surface-3: #EBEFED;
  --tch-input-bg: #FFFFFF;
  --tch-line: #E3E8E6;
  --tch-line-strong: #CFD7D4;
  --tch-text: #0D1417;
  --tch-text-rgb: 13, 20, 23;
  --tch-text-2: #4B575D;
  --tch-text-2-rgb: 75, 87, 93;
  --tch-text-3: #78848A;
  --tch-text-3-rgb: 120, 132, 138;
  --tch-link: #077A3A;
  --tch-link-rgb: 7, 122, 58;
  --tch-link-hover: #055C2C;
  --tch-accent-ink: #8A6500;
  --tch-hover: rgba(13, 20, 23, .04);
  --tch-press: rgba(13, 20, 23, .07);
  --tch-glass: rgba(255, 255, 255, .84);
  --tch-shadow-1: 0 1px 2px rgba(16, 24, 28, .06);
  --tch-shadow-2: 0 14px 34px -16px rgba(16, 24, 28, .22);
  --tch-shadow-3: 0 28px 64px -26px rgba(16, 24, 28, .32);

  --tch-ok: #077A3A;       --tch-ok-bg: #E3F7EA;      --tch-ok-line: #A8E3BC;
  --tch-warn: #A55800;     --tch-warn-bg: #FFF0DB;    --tch-warn-line: #F7CD93;
  --tch-danger: #C21F2E;   --tch-danger-bg: #FDE8EA;  --tch-danger-line: #F4B2B9;
  --tch-info: #1A5FB4;     --tch-info-bg: #E4F0FD;    --tch-info-line: #AFD0F5;
  --tch-neutral: #4B575D;  --tch-neutral-bg: #ECF0EE; --tch-neutral-line: #D2D9D6;
  --tch-brand: #7A5A00;    --tch-brand-bg: #FFF4C6;   --tch-brand-line: #F2D66B;
  --tch-danger-solid: #D92D3F;
  --tch-warn-solid: #E07F0C;
  --tch-info-solid: #1F6FD1;

  --tch-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234B575D' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 6 5 5 5-5'/%3e%3c/svg%3e");

  --tch-icon-ink: #C99A00;
  --tch-name-accent: #D9A400;
  --tch-name-lead: #0E9C47;
  --tch-logo-filter: brightness(0);
  --tch-logo-opacity: .78;
  --tch-focus-border: #D9A400;
  --tch-focus-ring: rgba(253, 197, 0, .32);
  --tch-btn-close-filter: none;
  color-scheme: light;
}

/* ── 2. Мост в Tabler: его переменные берут значения из токенов ─ */
/* Селектор ловит и <html>, и вложенные data-bs-theme (тёмное меню
   в светлой теме): переменные пересчитываются на каждом узле. */
:root,
[data-bs-theme] {
  --tblr-font-sans-serif: var(--tch-font-sans);
  --tblr-body-font-family: var(--tch-font-sans);
  --tblr-body-font-size: .875rem;
  --tblr-body-line-height: 1.5;
  --tblr-body-bg: var(--tch-bg);
  --tblr-body-bg-rgb: var(--tch-bg-rgb);
  --tblr-body-color: var(--tch-text);
  --tblr-body-color-rgb: var(--tch-text-rgb);
  --tblr-emphasis-color: var(--tch-text);
  --tblr-emphasis-color-rgb: var(--tch-text-rgb);
  --tblr-heading-color: var(--tch-text);
  --tblr-secondary: var(--tch-text-2);
  --tblr-secondary-rgb: var(--tch-text-2-rgb);
  --tblr-secondary-color: var(--tch-text-2);
  --tblr-secondary-color-rgb: var(--tch-text-2-rgb);
  --tblr-tertiary-color: var(--tch-text-3);
  --tblr-muted: var(--tch-text-3);
  --tblr-muted-rgb: var(--tch-text-3-rgb);
  --tblr-border-color: var(--tch-line);
  --tblr-border-color-translucent: var(--tch-line);
  --tblr-bg-surface: var(--tch-surface);
  --tblr-bg-surface-primary: var(--tch-surface);
  --tblr-bg-surface-secondary: var(--tch-surface-2);
  --tblr-bg-surface-tertiary: var(--tch-surface-2);
  --tblr-bg-forms: var(--tch-input-bg);
  --tblr-secondary-bg: var(--tch-surface-2);
  --tblr-tertiary-bg: var(--tch-surface-2);
  --tblr-active-bg: var(--tch-press);
  --tblr-link-color: var(--tch-link);
  --tblr-link-color-rgb: var(--tch-link-rgb);
  --tblr-link-hover-color: var(--tch-link-hover);
  --tblr-link-hover-decoration: none;

  --tblr-primary: var(--tch-yellow);
  --tblr-primary-rgb: var(--tch-yellow-rgb);
  --tblr-primary-fg: var(--tch-ink);
  --tblr-primary-darken: var(--tch-yellow-hover);
  --tblr-success: var(--tch-emerald);
  --tblr-success-rgb: var(--tch-emerald-rgb);
  --tblr-success-fg: var(--tch-ink);
  --tblr-danger: var(--tch-danger-solid);
  --tblr-warning: var(--tch-warn-solid);
  --tblr-info: var(--tch-info-solid);

  --tblr-border-radius: var(--tch-r-sm);
  --tblr-border-radius-sm: 8px;
  --tblr-border-radius-lg: var(--tch-r);
  --tblr-border-radius-xl: var(--tch-r-lg);
  --tblr-shadow-card: var(--tch-shadow-1);
  --tblr-shadow-input: none;
  --tblr-focus-ring-color: rgba(var(--tch-yellow-rgb), .28);
  --tblr-form-valid-color: var(--tch-ok);
  --tblr-form-valid-border-color: var(--tch-ok-line);
  --tblr-form-invalid-color: var(--tch-danger);
  --tblr-form-invalid-border-color: var(--tch-danger-line);
}

/* ── 3. База ────────────────────────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--tch-topbar-h) + 12px);
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  /* clip, а не hidden: hidden у html и body сразу делал прокручиваемым body (окно стояло на 0,
     и шапка не знала о прокрутке). hidden — запасной для браузеров без clip */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  background-color: var(--tch-bg);
  color: var(--tch-text);
  font-family: var(--tch-font-sans);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .h1, .h2, .h3,
.page-title, .card-title, .modal-title, .font-display {
  font-family: var(--tch-font-display);
  letter-spacing: -.015em;
}

h1, .h1 { font-weight: 800; }
h2, .h2 { font-weight: 800; }
h3, .h3 { font-weight: 700; }
h4, h5, h6, .h4, .h5, .h6 { font-weight: 600; }

::selection {
  background: rgba(var(--tch-yellow-rgb), .35);
  color: inherit;
}

a {
  color: var(--tch-link);
  text-decoration: none;
  transition: color var(--tch-dur) ease;
}

/* Без подчёркивания и при наведении (Tabler подчёркивает a:hover): ссылку
   выделяет цвет, кнопку, плитку и карточку — фон и рамка */
a:hover {
  color: var(--tch-link-hover);
  text-decoration: none;
}

a:focus,
a:focus-visible { text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--tch-yellow);
  outline-offset: 2px;
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
  outline: none;
}

/* Тонкие полосы прокрутки в тон теме */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--tch-line-strong) transparent;
}

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

hr { border-color: var(--tch-line); opacity: 1; }

code, kbd, .font-monospace {
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, 'Liberation Mono', monospace;
}

/* Tabler-утилиты под наши токены: контраст в обеих темах */
.text-secondary { color: var(--tch-text-2) !important; }
.text-muted { color: var(--tch-text-3) !important; }
.text-reset { color: inherit !important; }
.text-primary { color: var(--tch-accent-ink) !important; }
.text-success { color: var(--tch-ok) !important; }
.text-warning { color: var(--tch-warn) !important; }
.text-danger { color: var(--tch-danger) !important; }
.text-info { color: var(--tch-info) !important; }
.text-brand { color: var(--tch-accent-ink) !important; }
.link-reset, .link-reset:hover { color: inherit; }
.small, small { font-size: .8125rem; }
.lead { font-size: 1.0625rem; line-height: 1.6; color: var(--tch-text-2); }
.fw-medium { font-weight: 500 !important; }
.fw-bold { font-weight: 600 !important; }
.min-width-0 { min-width: 0; }

/* Звезда рейтинга: во вшитом шрифте Tabler нет ti-star-filled */
.ti.ti-star-filled::before {
  content: '\2605';
  font-family: system-ui, -apple-system, sans-serif;
}

/* Крутилка загрузки (ti-loader-2): в наборе иконок класса вращения нет */
.ti-spin { display: inline-block; animation: tch-spin .9s linear infinite; }
@keyframes tch-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ti-spin { animation-duration: 2.4s; }
}

/* ── 4. Фирменные элементы ──────────────────────────────────── */

/* Логотип: эмблема + As[Car] + слоган — «Car» жёлтым, как в концепте */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: var(--tch-text);
  text-decoration: none;
  min-width: 0;
}

.brand:hover { color: var(--tch-text); }

.brand-emblem {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: block;
  /* Мягкое свечение, как у неонового логотипа заказчика */
  filter: drop-shadow(0 0 8px rgba(var(--tch-yellow-rgb), .18)) drop-shadow(0 0 12px rgba(var(--tch-emerald-rgb), .16));
}

.brand-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1;
}

.brand-name {
  font-family: var(--tch-font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -.02em;
  line-height: 1;
  white-space: nowrap;
  color: inherit;
}

.brand-name .brand-lead { color: var(--tch-name-lead); }

.brand-name b,
.brand-accent {
  color: var(--tch-name-accent);
  font-weight: inherit;
}


.brand-tagline {
  margin-top: 5px;
  font-family: var(--tch-font-sans);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--tch-text-3);
  /* Длинная казахская подпись переносится на вторую строку, а не срезается краем меню */
  white-space: normal;
}

.brand-sm .brand-emblem { width: 34px; height: 34px; }
.brand-sm .brand-name { font-size: 1.0625rem; }
.brand-sm { gap: .55rem; }

/* Прежние имена — для файлов, не перенесённых на партиал */
.brand-text { font-family: var(--tch-font-display); font-weight: 800; letter-spacing: -.03em; }
.brand-text-sm { font-family: var(--tch-font-display); font-weight: 800; letter-spacing: -.02em; }

/* Полоски «////»: два жёлтых, два изумрудных — подпись бренда */
.stripes {
  display: inline-block;
  flex: 0 0 auto;
  width: 40px;
  height: 8px;
  transform: skewX(-32deg);
  background:
    linear-gradient(90deg,
      var(--tch-yellow) 0 7px, transparent 7px 11px,
      var(--tch-yellow) 11px 18px, transparent 18px 22px,
      var(--tch-emerald) 22px 29px, transparent 29px 33px,
      var(--tch-emerald) 33px 40px);
  border-radius: 1px;
}

.stripes-lg { width: 60px; height: 11px;
  background:
    linear-gradient(90deg,
      var(--tch-yellow) 0 11px, transparent 11px 16px,
      var(--tch-yellow) 16px 27px, transparent 27px 32px,
      var(--tch-emerald) 32px 43px, transparent 43px 48px,
      var(--tch-emerald) 48px 60px); }

/* Надпись-«глаз»: мелкий капс с полосками, как «АВТОСЕРВИСЫ | ЗАПЧАСТИ» */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--tch-font-sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tch-text-2);
}

.eyebrow-brand { color: var(--tch-accent-ink); }

/* Иконка в градиентном кольце — «хайлайт» из концепта */
.ring-icon {
  --ring-size: 44px;
  --ring-width: 2px;
  --ring-fill: var(--tch-surface);
  flex: 0 0 auto;
  width: var(--ring-size);
  height: var(--ring-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: var(--ring-width) solid transparent;
  background:
    linear-gradient(var(--ring-fill), var(--ring-fill)) padding-box,
    var(--tch-ring-gradient) border-box;
  color: var(--tch-icon-ink);
  font-size: calc(var(--ring-size) * .44);
  line-height: 1;
}

.ring-icon .ti { font-size: inherit; }
.ring-icon-sm { --ring-size: 34px; }
.ring-icon-lg { --ring-size: 60px; --ring-width: 2.5px; }
.ring-icon-xl { --ring-size: 80px; --ring-width: 3px; }
.ring-icon-solid { --ring-fill: var(--tch-yellow); color: var(--tch-ink) !important; }
.ring-icon-ok { color: var(--tch-ok) !important; }
.ring-icon-warn { color: var(--tch-warn) !important; }
.ring-icon-danger { color: var(--tch-danger) !important; }

/* Мягкое свечение фирменными цветами */
.glow-yellow { box-shadow: 0 0 0 1px rgba(var(--tch-yellow-rgb), .35), 0 12px 36px -12px rgba(var(--tch-yellow-rgb), .45); }
.glow-emerald { box-shadow: 0 0 0 1px rgba(var(--tch-emerald-rgb), .35), 0 12px 36px -12px rgba(var(--tch-emerald-rgb), .45); }

/* Номерной знак РК: белая пластина, флаг-полоса слева */
.plate {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  height: 24px;
  border: 1.5px solid #1A1F22;
  border-radius: 5px;
  background: #FFFFFF;
  color: #11171A;
  font-family: var(--tch-font-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}

.plate::before {
  content: 'KZ';
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 16px;
  padding-bottom: 3px;
  background: linear-gradient(180deg, #00AFCA 0 55%, #00AFCA 55%);
  color: #FFFFFF;
  font-size: .5rem;
  font-weight: 800;
  letter-spacing: 0;
}

.plate > span {
  display: flex;
  align-items: center;
  padding: 0 7px;
}

/* ── 5. Каркас приложения ───────────────────────────────────── */

.page {
  min-height: 100vh;
  min-height: 100dvh;
}

/* 5.1 Боковое меню. Всегда тёмное — якорь бренда в обеих темах. */
.navbar-vertical.sidebar {
  background: var(--tch-sidebar-bg);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06);
  scrollbar-width: none;
  padding: 0;
  z-index: 1030;
}

.navbar-vertical.sidebar::-webkit-scrollbar { display: none; }

.navbar-vertical.sidebar::before {
  /* Тонкий фирменный градиент по верхнему краю */
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 180px;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(var(--tch-yellow-rgb), .10), transparent 60%),
    radial-gradient(90% 80% at 100% 0%, rgba(var(--tch-emerald-rgb), .08), transparent 60%);
}

.sidebar > .container-fluid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100%;
  padding: 0;
  position: relative;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: 20px 20px 18px;
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.sidebar-brand .brand { color: #EDF1F2; }
.sidebar-brand .brand-name b { color: var(--tch-yellow); }
.sidebar-brand .brand-tagline { color: #717E85; }

.sidebar-close {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  background: transparent;
  color: #A3AFB5;
  font-size: 1.1rem;
}

.sidebar .navbar-collapse {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 auto;
  padding: 14px 12px 20px;
}

.sidebar .navbar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  width: 100%;
}

.sidebar .nav-label {
  list-style: none;
  padding: 16px 12px 6px;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #58656C;
  white-space: nowrap;
}

.sidebar .nav-label:first-child { padding-top: 2px; }

.sidebar .sidebar-divider {
  list-style: none;
  height: 1px;
  margin: 10px 12px;
  background: rgba(255, 255, 255, .06);
}

.sidebar .nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin: 0;
  padding: 0 12px;
  border-radius: 12px;
  color: #A3AFB5;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color var(--tch-dur) ease, color var(--tch-dur) ease;
}

.sidebar .nav-link:hover {
  background: rgba(255, 255, 255, .045);
  color: #EDF1F2;
}

.sidebar .nav-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0;
  font-size: 1.25rem;
  opacity: 1;
  color: inherit;
  transition: color var(--tch-dur) ease;
}

.sidebar .nav-link-title {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar .nav-item.active .nav-link {
  color: #FFFFFF;
  background:
    linear-gradient(90deg, rgba(var(--tch-yellow-rgb), .16), rgba(var(--tch-yellow-rgb), .03) 70%, transparent);
  box-shadow: inset 0 0 0 1px rgba(var(--tch-yellow-rgb), .14);
}

.sidebar .nav-item.active .nav-link-icon { color: var(--tch-yellow); }

.sidebar .nav-item.active .nav-link::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--tch-yellow);
  box-shadow: 0 0 14px rgba(var(--tch-yellow-rgb), .8);
}

/* Карточка внизу меню: подсказка с фирменными полосками */
.sidebar-promo {
  margin: auto 0 0;
  padding-top: 18px;
}

.sidebar-promo-card {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 16px;
  border-radius: 16px;
  background:
    linear-gradient(140deg, rgba(var(--tch-yellow-rgb), .14), rgba(var(--tch-emerald-rgb), .10));
  border: 1px solid rgba(255, 255, 255, .08);
  color: #EDF1F2;
}

.sidebar-promo-card:hover { color: #FFFFFF; border-color: rgba(var(--tch-yellow-rgb), .35); }

.sidebar-promo-card .stripes { margin-bottom: 10px; }

.sidebar-promo-title {
  display: block;
  font-family: var(--tch-font-display);
  font-weight: 700;
  font-size: .875rem;
  line-height: 1.3;
}

.sidebar-promo-text {
  display: block;
  margin-top: 4px;
  font-size: .75rem;
  color: #A3AFB5;
  line-height: 1.4;
}

.sidebar-promo-card .ti-arrow-up-right {
  position: absolute;
  top: 14px;
  right: 14px;
  color: var(--tch-yellow);
}

@media (min-width: 992px) {
  .navbar-vertical.navbar-expand-lg.sidebar {
    width: var(--tch-sidebar-w);
    transition: width .25s var(--tch-ease);
  }

  .navbar-vertical.navbar-expand-lg.sidebar ~ .page-wrapper {
    margin-left: var(--tch-sidebar-w);
    transition: margin-left .25s var(--tch-ease);
  }

  /* Свёрнутое меню: остаются иконки, подсказки — из title */
  html.sidebar-collapsed .navbar-vertical.navbar-expand-lg.sidebar {
    width: var(--tch-sidebar-w-collapsed);
  }

  html.sidebar-collapsed .navbar-vertical.navbar-expand-lg.sidebar ~ .page-wrapper {
    margin-left: var(--tch-sidebar-w-collapsed);
  }

  html.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 18px 0; }
  html.sidebar-collapsed .sidebar-brand .brand { gap: 0; }
  html.sidebar-collapsed .sidebar-brand .brand-copy,
  html.sidebar-collapsed .sidebar .nav-link-title,
  html.sidebar-collapsed .sidebar .nav-label,
  html.sidebar-collapsed .sidebar-promo { display: none; }
  html.sidebar-collapsed .sidebar .navbar-collapse { padding: 14px 0 20px; align-items: center; }
  html.sidebar-collapsed .sidebar .navbar-nav { align-items: center; }
  html.sidebar-collapsed .sidebar .nav-link { width: 48px; justify-content: center; padding: 0; }
  html.sidebar-collapsed .sidebar .sidebar-divider { width: 32px; margin: 10px auto; }
  html.sidebar-collapsed .sidebar .nav-item.active .nav-link::before { left: -16px; }
}

/* Мобильная шторка */
@media (max-width: 991.98px) {
  .navbar-vertical.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1045;
    width: min(300px, 86vw);
    max-width: none;
    overflow-y: auto;
    transform: translateX(-102%);
    transition: transform .32s var(--tch-ease), visibility 0s linear .32s;
    visibility: hidden;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: none;
  }

  .navbar-vertical.sidebar.show {
    transform: translateX(0);
    visibility: visible;
    transition: transform .32s var(--tch-ease), visibility 0s;
    box-shadow: 24px 0 60px rgba(0, 0, 0, .5);
  }

  .sidebar-close { display: inline-flex; }
}

.sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(3, 6, 8, .62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}

.sidebar-overlay.show {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease, visibility 0s;
}

@media (min-width: 992px) {
  .sidebar-overlay { display: none; }
}

/* 5.2 Верхняя панель */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  min-height: var(--tch-topbar-h);
  padding-top: env(safe-area-inset-top);
  background: var(--tch-glass);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--tch-line);
}

.topbar-inner {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 10px max(24px, env(safe-area-inset-right)) 10px max(24px, env(safe-area-inset-left));
}

.topbar-brand { display: none; }

.topbar-title {
  min-width: 0;
  font-family: var(--tch-font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--tch-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
}

/* Круглые кнопки-иконки в панели */
.icon-btn,
.header-action-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--tch-line);
  background: var(--tch-surface);
  color: var(--tch-text-2);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--tch-dur) ease, color var(--tch-dur) ease, border-color var(--tch-dur) ease;
}

.icon-btn:hover,
.header-action-btn:hover,
.icon-btn[aria-expanded="true"] {
  background: var(--tch-surface-2);
  border-color: var(--tch-line-strong);
  color: var(--tch-text);
}

.icon-btn .flag-icon { width: 22px; height: 22px; }

.flag-icon {
  display: block;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--tch-line-strong);
}

/* Переключатель темы: одна иконка видна */
.icon-sun, .icon-moon { display: none; }
html[data-bs-theme="dark"] .icon-moon,
html[data-bs-theme="light"] .icon-sun { display: inline-block; }

.badge-notification,
.icon-btn .badge-notification {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  border: 2px solid var(--tch-bg);
  background: var(--tch-danger-solid) !important;
  color: #FFFFFF !important;
  font-size: .625rem;
  font-weight: 700;
  line-height: 14px;
  transform: none;
  box-shadow: none;
}

/* Меню пользователя */
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 3px 12px 3px 3px;
  border-radius: 999px;
  border: 1px solid var(--tch-line);
  background: var(--tch-surface);
  color: var(--tch-text);
  line-height: 1.15;
  max-width: 240px;
  transition: border-color var(--tch-dur) ease, background-color var(--tch-dur) ease;
}

.user-chip:hover,
.user-chip[aria-expanded="true"] {
  color: var(--tch-text);
  border-color: var(--tch-line-strong);
  background: var(--tch-surface-2);
}

.user-chip-name {
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-chip-role {
  font-size: .6875rem;
  color: var(--tch-text-3);
  white-space: nowrap;
}

/* Аватар с кольцом бренда (как у профиля в концепте) */
.avatar-ring {
  --size: 34px;
  position: relative;
  flex: 0 0 auto;
  width: var(--size);
  height: var(--size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 2px;
  background: var(--tch-ring-gradient);
}

.avatar-ring > img,
.avatar-ring > span {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--tch-surface);
  background: var(--tch-surface-3);
  color: var(--tch-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tch-font-display);
  font-weight: 800;
  font-size: calc(var(--size) * .4);
  line-height: 1;
}

.avatar-ring-lg { --size: 76px; padding: 3px; }
.avatar-ring-xl { --size: 96px; padding: 3px; }

/* 5.3 Страница */
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.page-body {
  flex: 1 0 auto;
  margin: 0;
  padding: 28px 0 40px;
}

.page-body > .container-xl {
  max-width: 1320px;
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

/* Вложенный контейнер внутри контента (страницы админки) — без второго отступа */
.page-stagger > .container-xl,
.page-stagger > .container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Шапки страниц внутри контента — без второго контейнера */
.page-body .page-header > .container-xl,
.page-body .page-header > .container {
  max-width: none;
  padding: 0;
}

/* Tabler задаёт .page-wrapper .page-header отступ сверху — у нас он снизу */
.page-header,
.page-wrapper .page-header {
  margin: 0 0 1.75rem;
  min-height: 0;
}

.page-header .row { --tblr-gutter-y: .75rem; row-gap: .75rem; }

.page-title {
  font-family: var(--tch-font-display);
  font-weight: 800;
  font-size: 1.625rem;
  line-height: 1.2;
  letter-spacing: -.025em;
  color: var(--tch-text);
  margin: 0;
  gap: .5rem;
}

.page-pretitle {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .6rem;
  margin-bottom: 6px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tch-text-3);
}

/* VIN в надписях над заголовком: моноширинный, без широкой разрядки — 17 знаков
   помещаются на телефоне и читаются по одному */
.page-pretitle .font-monospace,
.hero-card-eyebrow .font-monospace { letter-spacing: .04em; }

.page-subtitle {
  margin-top: 6px;
  color: var(--tch-text-2);
  font-size: .875rem;
}

.page-header-premium .page-title::before {
  content: '';
  flex: 0 0 auto;
  width: 5px;
  height: 1.05em;
  margin-right: .15rem;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--tch-yellow), var(--tch-emerald));
}

/* Кнопки действий в шапке страницы */
.page-header .btn { white-space: nowrap; }

/* Подвал */
.footer.app-footer {
  margin-top: auto;
  padding: 20px 0 24px;
  border-top: 1px solid var(--tch-line);
  background: transparent;
  color: var(--tch-text-3);
  font-size: .8125rem;
}

.app-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));
}

.app-footer-links {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.app-footer-links a { color: var(--tch-text-3); }
.app-footer-links a:hover { color: var(--tch-text); }

/* 5.4 Нижняя панель вкладок — телефон и приложение */
.tabbar {
  display: none;
}

@media (max-width: 991.98px) {
  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    height: calc(var(--tch-tabbar-h) + env(safe-area-inset-bottom));
    padding: 0 max(6px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(6px, env(safe-area-inset-left));
    background: var(--tch-glass);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
    border-top: 1px solid var(--tch-line);
  }

  .tabbar-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    padding: 6px 2px 4px;
    border: 0;
    background: transparent;
    color: var(--tch-text-3);
    font-size: .6563rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.1;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
  }

  .tabbar-item .ti {
    font-size: 1.45rem;
    line-height: 1;
    transition: transform .2s var(--tch-ease);
  }

  .tabbar-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tabbar-item:hover { color: var(--tch-text-2); }

  .tabbar-item.active { color: var(--tch-text); }

  .tabbar-item.active .ti {
    color: var(--tch-icon-ink);
    transform: translateY(-1px);
  }

  .tabbar-item.active::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    width: 28px;
    height: 3px;
    margin-left: -14px;
    border-radius: 0 0 3px 3px;
    background: var(--tch-yellow);
    box-shadow: 0 0 12px rgba(var(--tch-yellow-rgb), .8);
  }

  .tabbar-badge {
    position: absolute;
    top: 4px;
    left: calc(50% + 6px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    border: 2px solid var(--tch-bg);
    background: var(--tch-danger-solid);
    color: #FFFFFF;
    font-size: .5625rem;
    font-weight: 700;
    line-height: 12px;
  }

  body.has-tabbar .page-wrapper {
    padding-bottom: calc(var(--tch-tabbar-h) + env(safe-area-inset-bottom));
  }
}

/* ── 6. Компоненты ──────────────────────────────────────────── */

/* 6.1 Карточки */
.card {
  --tblr-card-bg: var(--tch-surface);
  --tblr-card-border-color: var(--tch-line);
  --tblr-card-border-radius: var(--tch-r-lg);
  --tblr-card-inner-border-radius: calc(var(--tch-r-lg) - 1px);
  --tblr-card-cap-bg: transparent;
  --tblr-card-spacer-x: 1.25rem;
  --tblr-card-spacer-y: 1.25rem;
  --tblr-card-cap-padding-x: 1.25rem;
  --tblr-card-cap-padding-y: 1rem;
  background: var(--tch-surface);
  border: 1px solid var(--tch-line);
  border-radius: var(--tch-r-lg);
  box-shadow: var(--tch-shadow-1);
  color: var(--tch-text);
}

.card-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 62px;
  background: transparent;
  border-bottom: 1px solid var(--tch-line);
}

.card-header:first-child {
  border-radius: calc(var(--tch-r-lg) - 1px) calc(var(--tch-r-lg) - 1px) 0 0;
}

.card-footer {
  background: transparent;
  border-top: 1px solid var(--tch-line);
  border-radius: 0 0 calc(var(--tch-r-lg) - 1px) calc(var(--tch-r-lg) - 1px);
}

.card-title {
  font-family: var(--tch-font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--tch-text);
}

.card-subtitle { color: var(--tch-text-2); }

.card-header .card-title { margin: 0; }

.card-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

/* Иконка в шапке карточки — квадрат с кольцевой рамкой */
.card-header-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--tch-surface-2), var(--tch-surface-2)) padding-box,
    var(--tch-ring-gradient) border-box;
  color: var(--tch-icon-ink);
  font-size: 1.1rem;
}

.card-sm .card-body { padding: 1rem; }

/* Карточка-ссылка поднимается под курсором */
.card-lift,
a.card {
  transition: transform .2s var(--tch-ease), border-color .2s ease, box-shadow .2s ease;
}

.card-lift:hover,
a.card:hover {
  transform: translateY(-2px);
  border-color: var(--tch-line-strong);
  box-shadow: var(--tch-shadow-2);
}

a.card { color: inherit; }

.row-deck > [class*="col-"],
.row-cards > [class*="col-"] { display: flex; flex-direction: column; }

.row-deck > [class*="col-"] > .card,
.row-cards > [class*="col-"] > .card,
.row-deck > [class*="col-"] > .vehicle-card,
.row-cards > [class*="col-"] > .vehicle-card,
.row-cards > [class*="col-"] > .garage-card { flex: 1 1 auto; }

.row-cards { --tblr-gutter-x: 1.25rem; --tblr-gutter-y: 1.25rem; }

/* 6.2 Кнопки */
.btn {
  --tblr-btn-font-weight: 600;
  --tblr-btn-border-radius: 12px;
  --tblr-btn-padding-x: 1rem;
  --tblr-btn-padding-y: .5rem;
  --tblr-btn-font-size: .875rem;
  --tblr-btn-line-height: 1.25;
  --tblr-btn-box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 40px;
  font-family: var(--tch-font-sans);
  letter-spacing: .005em;
  box-shadow: none;
  transition: background-color var(--tch-dur) ease, border-color var(--tch-dur) ease, color var(--tch-dur) ease, box-shadow var(--tch-dur) ease, transform .15s ease;
}

.btn .icon,
.btn .ti { margin: 0 !important; font-size: 1.1em; }

.btn:active { transform: translateY(1px); }

/* Кнопка во всю ширину узкой колонки: длинная надпись переносится, а не вылезает за край */
.btn.w-100 { white-space: normal; text-align: center; }

.btn-sm {
  --tblr-btn-padding-x: .75rem;
  --tblr-btn-padding-y: .3rem;
  --tblr-btn-font-size: .8125rem;
  --tblr-btn-border-radius: 10px;
  min-height: 34px;
}

.btn-lg {
  --tblr-btn-padding-x: 1.5rem;
  --tblr-btn-padding-y: .75rem;
  --tblr-btn-font-size: 1rem;
  --tblr-btn-border-radius: 14px;
  min-height: 52px;
}

.btn-icon { width: 40px; padding: 0; }
.btn-icon.btn-sm { width: 34px; }

/* Подпись кнопки-иконки в таблице: видна только в карточках (там кнопка во всю ширину) */
.ts-btn-label { display: none; }

/* Основная: фирменный жёлтый, тёмный текст (контраст 11:1) */
.btn-primary,
.btn-gold {
  --tblr-btn-bg: var(--tch-yellow);
  --tblr-btn-color: var(--tch-ink);
  --tblr-btn-border-color: var(--tch-yellow);
  --tblr-btn-hover-bg: var(--tch-yellow-hover);
  --tblr-btn-hover-color: var(--tch-ink);
  --tblr-btn-hover-border-color: var(--tch-yellow-hover);
  --tblr-btn-active-bg: var(--tch-yellow-press);
  --tblr-btn-active-color: var(--tch-ink);
  --tblr-btn-active-border-color: var(--tch-yellow-press);
  --tblr-btn-disabled-bg: var(--tch-yellow);
  --tblr-btn-disabled-color: var(--tch-ink);
  --tblr-btn-disabled-border-color: var(--tch-yellow);
  background-color: var(--tblr-btn-bg);
  border-color: var(--tblr-btn-border-color);
  color: var(--tblr-btn-color);
  box-shadow: 0 10px 24px -12px rgba(var(--tch-yellow-rgb), .75);
}

.btn-primary:hover,
.btn-gold:hover {
  background-color: var(--tblr-btn-hover-bg);
  border-color: var(--tblr-btn-hover-border-color);
  color: var(--tblr-btn-hover-color);
  box-shadow: 0 12px 30px -10px rgba(var(--tch-yellow-rgb), .85);
}

.btn-primary:focus-visible,
.btn-gold:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--tch-yellow-rgb), .35);
}

/* Контурная фирменная */
.btn-outline-primary,
.btn-gold-outline,
.btn-outline-gold {
  --tblr-btn-bg: transparent;
  --tblr-btn-color: var(--tch-accent-ink);
  --tblr-btn-border-color: var(--tch-brand-line);
  --tblr-btn-hover-bg: var(--tch-brand-bg);
  --tblr-btn-hover-color: var(--tch-accent-ink);
  --tblr-btn-hover-border-color: var(--tch-yellow);
  --tblr-btn-active-bg: var(--tch-yellow);
  --tblr-btn-active-color: var(--tch-ink);
  --tblr-btn-active-border-color: var(--tch-yellow);
  background-color: var(--tblr-btn-bg);
  border-color: var(--tblr-btn-border-color);
  color: var(--tblr-btn-color);
}

.btn-outline-primary:hover,
.btn-gold-outline:hover,
.btn-outline-gold:hover {
  background-color: var(--tblr-btn-hover-bg);
  border-color: var(--tblr-btn-hover-border-color);
  color: var(--tblr-btn-hover-color);
}

.btn-outline-primary.active,
.btn-check:checked + .btn-outline-primary {
  background-color: var(--tch-yellow);
  border-color: var(--tch-yellow);
  color: var(--tch-ink);
}

/* Нейтральные */
.btn-secondary,
.btn-outline-secondary,
.btn-default {
  --tblr-btn-bg: var(--tch-surface-2);
  --tblr-btn-color: var(--tch-text);
  --tblr-btn-border-color: var(--tch-line-strong);
  --tblr-btn-hover-bg: var(--tch-surface-3);
  --tblr-btn-hover-color: var(--tch-text);
  --tblr-btn-hover-border-color: var(--tch-line-strong);
  --tblr-btn-active-bg: var(--tch-surface-3);
  --tblr-btn-active-color: var(--tch-text);
  --tblr-btn-active-border-color: var(--tch-line-strong);
  background-color: var(--tblr-btn-bg);
  border-color: var(--tblr-btn-border-color);
  color: var(--tblr-btn-color);
}

.btn-outline-secondary { --tblr-btn-bg: transparent; }

.btn-secondary:hover,
.btn-outline-secondary:hover {
  background-color: var(--tblr-btn-hover-bg);
  border-color: var(--tblr-btn-hover-border-color);
  color: var(--tblr-btn-hover-color);
}

.btn-outline-secondary.active,
.btn-check:checked + .btn-outline-secondary {
  background-color: var(--tch-surface-3);
  border-color: var(--tch-yellow);
  color: var(--tch-text);
}

.btn-ghost-secondary {
  --tblr-btn-bg: transparent;
  --tblr-btn-color: var(--tch-text-2);
  --tblr-btn-border-color: transparent;
  --tblr-btn-hover-bg: var(--tch-hover);
  --tblr-btn-hover-color: var(--tch-text);
  --tblr-btn-hover-border-color: transparent;
  background: transparent;
  border-color: transparent;
  color: var(--tch-text-2);
}

.btn-ghost-secondary:hover { background: var(--tch-hover); color: var(--tch-text); }

.btn-link {
  --tblr-btn-color: var(--tch-text-2);
  --tblr-btn-hover-color: var(--tch-text);
  color: var(--tch-text-2);
  text-decoration: none;
}

.btn-link:hover { color: var(--tch-text); text-decoration: none; }

/* Успех: изумрудный */
.btn-success {
  --tblr-btn-bg: var(--tch-emerald);
  --tblr-btn-color: var(--tch-ink);
  --tblr-btn-border-color: var(--tch-emerald);
  --tblr-btn-hover-bg: var(--tch-emerald-hover);
  --tblr-btn-hover-color: var(--tch-ink);
  --tblr-btn-hover-border-color: var(--tch-emerald-hover);
  --tblr-btn-active-bg: var(--tch-emerald);
  --tblr-btn-active-color: var(--tch-ink);
  background-color: var(--tblr-btn-bg);
  border-color: var(--tblr-btn-border-color);
  color: var(--tblr-btn-color);
  box-shadow: 0 10px 24px -12px rgba(var(--tch-emerald-rgb), .7);
}

.btn-success:hover {
  background-color: var(--tblr-btn-hover-bg);
  border-color: var(--tblr-btn-hover-border-color);
  color: var(--tblr-btn-hover-color);
}

.btn-outline-success {
  --tblr-btn-bg: transparent;
  --tblr-btn-color: var(--tch-ok);
  --tblr-btn-border-color: var(--tch-ok-line);
  --tblr-btn-hover-bg: var(--tch-ok-bg);
  --tblr-btn-hover-color: var(--tch-ok);
  --tblr-btn-hover-border-color: var(--tch-emerald);
  background-color: var(--tblr-btn-bg);
  border-color: var(--tblr-btn-border-color);
  color: var(--tblr-btn-color);
}

.btn-outline-success:hover {
  background-color: var(--tblr-btn-hover-bg);
  border-color: var(--tblr-btn-hover-border-color);
  color: var(--tblr-btn-hover-color);
}

/* Опасные */
.btn-danger {
  --tblr-btn-bg: var(--tch-danger-solid);
  --tblr-btn-color: #FFFFFF;
  --tblr-btn-border-color: var(--tch-danger-solid);
  --tblr-btn-hover-bg: #E03A48;
  --tblr-btn-hover-color: #FFFFFF;
  --tblr-btn-hover-border-color: #E03A48;
  background-color: var(--tblr-btn-bg);
  border-color: var(--tblr-btn-border-color);
  color: var(--tblr-btn-color);
}

.btn-outline-danger {
  --tblr-btn-bg: transparent;
  --tblr-btn-color: var(--tch-danger);
  --tblr-btn-border-color: var(--tch-danger-line);
  --tblr-btn-hover-bg: var(--tch-danger-bg);
  --tblr-btn-hover-color: var(--tch-danger);
  --tblr-btn-hover-border-color: var(--tch-danger-solid);
  background-color: var(--tblr-btn-bg);
  border-color: var(--tblr-btn-border-color);
  color: var(--tblr-btn-color);
}

.btn-outline-danger:hover {
  background-color: var(--tblr-btn-hover-bg);
  border-color: var(--tblr-btn-hover-border-color);
  color: var(--tblr-btn-hover-color);
}

.btn-ghost-danger {
  --tblr-btn-bg: transparent;
  --tblr-btn-color: var(--tch-danger);
  --tblr-btn-border-color: transparent;
  --tblr-btn-hover-bg: var(--tch-danger-bg);
  --tblr-btn-hover-color: var(--tch-danger);
  background: transparent;
  border-color: transparent;
  color: var(--tch-danger);
}

.btn-ghost-danger:hover { background: var(--tch-danger-bg); color: var(--tch-danger); }

.btn-warning {
  --tblr-btn-bg: var(--tch-warn-solid);
  --tblr-btn-color: var(--tch-ink);
  --tblr-btn-border-color: var(--tch-warn-solid);
  --tblr-btn-hover-bg: #FFAA3D;
  --tblr-btn-hover-color: var(--tch-ink);
  background-color: var(--tblr-btn-bg);
  border-color: var(--tblr-btn-border-color);
  color: var(--tblr-btn-color);
}

.btn:disabled,
.btn.disabled {
  opacity: .45;
  box-shadow: none;
}

.btn-group > .btn { min-height: 38px; }
.btn-group-sm > .btn { min-height: 32px; }

/* Кнопка-сегмент (переключатели периода, горизонта) */
.btn-group .btn-outline-primary:not(.active) {
  --tblr-btn-color: var(--tch-text-2);
  --tblr-btn-border-color: var(--tch-line-strong);
  color: var(--tch-text-2);
  border-color: var(--tch-line-strong);
}

/* 6.3 Бейджи и статусы */
.badge {
  --tblr-badge-padding-x: .6rem;
  --tblr-badge-padding-y: .3rem;
  --tblr-badge-font-size: .75rem;
  --tblr-badge-font-weight: 600;
  --tblr-badge-border-radius: 999px;
  border-radius: 999px;
  line-height: 1.15;
  letter-spacing: .005em;
  vertical-align: middle;
  border: 1px solid transparent;
}

.badge .ti { font-size: 1.05em; }

/* Подкрашенные бейджи Tabler — через статусные токены обеих тем */
.bg-green-lt, .bg-lime-lt, .bg-success-lt, .bg-teal-lt {
  background-color: var(--tch-ok-bg) !important;
  color: var(--tch-ok) !important;
  border-color: var(--tch-ok-line) !important;
}

.bg-yellow-lt, .bg-orange-lt, .bg-warning-lt {
  background-color: var(--tch-warn-bg) !important;
  color: var(--tch-warn) !important;
  border-color: var(--tch-warn-line) !important;
}

.bg-red-lt, .bg-danger-lt, .bg-pink-lt {
  background-color: var(--tch-danger-bg) !important;
  color: var(--tch-danger) !important;
  border-color: var(--tch-danger-line) !important;
}

.bg-blue-lt, .bg-azure-lt, .bg-info-lt, .bg-cyan-lt, .bg-indigo-lt, .bg-purple-lt {
  background-color: var(--tch-info-bg) !important;
  color: var(--tch-info) !important;
  border-color: var(--tch-info-line) !important;
}

.bg-secondary-lt, .bg-dark-lt, .bg-muted-lt, .bg-light-lt {
  background-color: var(--tch-neutral-bg) !important;
  color: var(--tch-neutral) !important;
  border-color: var(--tch-neutral-line) !important;
}

.bg-primary-lt {
  background-color: var(--tch-brand-bg) !important;
  color: var(--tch-brand) !important;
  border-color: var(--tch-brand-line) !important;
}

/* Статусы заявок и ТО: пилюля с точкой-индикатором */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--tch-neutral-bg);
  color: var(--tch-neutral);
  border: 1px solid var(--tch-neutral-line);
  white-space: nowrap;
}

.badge-status::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.badge-status-active,
.badge-status-completed {
  background: var(--tch-ok-bg);
  color: var(--tch-ok);
  border-color: var(--tch-ok-line);
}

.badge-status-pending {
  background: var(--tch-warn-bg);
  color: var(--tch-warn);
  border-color: var(--tch-warn-line);
}

.badge-status-danger,
.badge-status-cancelled {
  background: var(--tch-danger-bg);
  color: var(--tch-danger);
  border-color: var(--tch-danger-line);
}

.badge-status-info {
  background: var(--tch-info-bg);
  color: var(--tch-info);
  border-color: var(--tch-info-line);
}

.badge-brand {
  background: var(--tch-brand-bg);
  color: var(--tch-brand);
  border-color: var(--tch-brand-line);
}

/* Сплошные бейджи Tabler */
.badge.bg-red { background: var(--tch-danger-solid) !important; color: #FFFFFF !important; }
.badge.bg-green { background: var(--tch-emerald) !important; color: var(--tch-ink) !important; }
.badge.bg-yellow { background: var(--tch-yellow) !important; color: var(--tch-ink) !important; }
.badge.bg-secondary { background: var(--tch-surface-3) !important; color: var(--tch-text-2) !important; }

/* Точка статуса */
.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tch-text-3);
}

.status-dot.bg-danger { background: var(--tch-danger-solid) !important; box-shadow: 0 0 0 4px var(--tch-danger-bg); }
.status-dot.bg-warning { background: var(--tch-warn-solid) !important; box-shadow: 0 0 0 4px var(--tch-warn-bg); }
.status-dot.bg-success { background: var(--tch-emerald) !important; box-shadow: 0 0 0 4px var(--tch-ok-bg); }

.status-dot-animated { animation: tch-pulse 2s ease-in-out infinite; }

@keyframes tch-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

/* 6.4 Формы */
.form-label {
  margin-bottom: .4rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--tch-text-2);
}

.form-label.required::after { color: var(--tch-danger); }

.form-hint,
.form-text {
  margin-top: .35rem;
  font-size: .75rem;
  color: var(--tch-text-3);
}

.form-control,
.form-select {
  min-height: 44px;
  padding: .625rem .875rem;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--tch-text);
  background-color: var(--tch-input-bg);
  border: 1px solid var(--tch-line-strong);
  border-radius: 12px;
  box-shadow: none;
  transition: border-color var(--tch-dur) ease, box-shadow var(--tch-dur) ease, background-color var(--tch-dur) ease;
}

.form-control::placeholder { color: var(--tch-text-3); opacity: 1; }
.form-control.text-uppercase::placeholder,
.form-control.font-monospace::placeholder { text-transform: none; font-family: var(--tch-font-sans); letter-spacing: normal; }

.form-control:hover,
.form-select:hover { border-color: rgba(var(--tch-text-rgb), .22); }

.form-control:focus,
.form-select:focus {
  color: var(--tch-text);
  background-color: var(--tch-input-bg);
  border-color: var(--tch-focus-border);
  box-shadow: 0 0 0 3px var(--tch-focus-ring);
  outline: 0;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
  background-color: var(--tch-surface-2);
  color: var(--tch-text-2);
  opacity: 1;
}

.form-select {
  padding-right: 2.5rem;
  background-image: var(--tch-select-arrow);
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 14px 14px;
  --tblr-form-select-bg-img: var(--tch-select-arrow);
}

textarea.form-control { min-height: 96px; }

.form-control-sm,
.form-select-sm {
  min-height: 34px;
  padding: .35rem .7rem;
  font-size: .8125rem;
  border-radius: 10px;
}

.form-select-sm { padding-right: 2rem; background-position: right .6rem center; }

.form-control-lg { min-height: 52px; font-size: 1rem; border-radius: 14px; }

.form-control.is-invalid,
.was-validated .form-control:invalid { border-color: var(--tch-danger-solid); }

.invalid-feedback { color: var(--tch-danger); font-size: .75rem; }

/* Автозаполнение браузера не должно красить поле в голубой */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--tch-text);
  -webkit-box-shadow: 0 0 0 1000px var(--tch-input-bg) inset;
  box-shadow: 0 0 0 1000px var(--tch-input-bg) inset;
  caret-color: var(--tch-text);
  transition: background-color 9999s ease-out 0s;
}

/* Группы и иконки в полях */
.input-group > .form-control,
.input-group > .form-select { min-width: 0; }

.input-group-text {
  min-height: 44px;
  padding: 0 .85rem;
  background: var(--tch-surface-2);
  border: 1px solid var(--tch-line-strong);
  color: var(--tch-text-2);
  border-radius: 12px;
  font-size: .875rem;
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > .btn { min-height: 44px; position: relative; z-index: 2; }

.input-group-sm > .form-control,
.input-group-sm > .input-group-text,
.input-group-sm > .btn { min-height: 34px; }

.input-icon-addon { color: var(--tch-text-3); min-width: 2.75rem; }
.input-icon .form-control:not(:first-child) { padding-left: 2.6rem; }

/* Кнопка «показать пароль» */
.btn-password-toggle {
  min-height: 44px;
  padding: 0 .85rem;
  background: var(--tch-surface-2);
  border: 1px solid var(--tch-line-strong);
  color: var(--tch-text-2);
  box-shadow: none;
}

.btn-password-toggle:hover { color: var(--tch-text); background: var(--tch-surface-3); }

/* Флажки, радио, переключатели — изумрудные («включено») */
.form-check { min-height: 1.5rem; }

.form-check-input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .15rem;
  background-color: var(--tch-input-bg);
  border: 1.5px solid var(--tch-line-strong);
  box-shadow: none;
  cursor: pointer;
}

.form-check-input:checked {
  background-color: var(--tch-emerald);
  border-color: var(--tch-emerald);
}

.form-check-input:checked[type=checkbox] {
  --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3e%3cpath fill='none' stroke='%230B1013' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='M4 8.5l2.5 2.5l5.5 -5.5'/%3e%3c/svg%3e");
}

.form-check-input:checked[type=radio] {
  --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230B1013'/%3e%3c/svg%3e");
}

.form-check-input:focus {
  border-color: var(--tch-emerald);
  box-shadow: 0 0 0 3px rgba(var(--tch-emerald-rgb), .22);
}

.form-switch .form-check-input {
  width: 2.4rem;
  height: 1.35rem;
  margin-top: .05rem;
  border-radius: 2rem;
}

.form-switch .form-check-input:checked {
  background-color: var(--tch-emerald);
  border-color: var(--tch-emerald);
}

.form-check-label { color: var(--tch-text); cursor: pointer; }

.form-check-input:disabled ~ .form-check-label { color: var(--tch-text-3); }

/* Секции длинных форм: заголовок-строка с иконкой и линией до края */
.form-section {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 1.75rem 0 1rem;
  font-family: var(--tch-font-display);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--tch-text);
}

.form-section::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--tch-line);
}

input[type="hidden"] + .form-section,
.card-body > .form-section:first-child,
.card-body > form > .form-section:first-child { margin-top: 0; }

.form-section-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--tch-brand-bg);
  color: var(--tch-accent-ink);
  font-size: 1rem;
}

.form-footer,
.form-footer-premium {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--tch-line);
}

.form-footer .btn.w-100 { flex: 1 1 100%; }

/* 6.5 Таблицы */
.table {
  --tblr-table-color: var(--tch-text);
  --tblr-table-bg: transparent;
  --tblr-table-border-color: var(--tch-line);
  --tblr-table-striped-bg: transparent;
  --tblr-table-hover-bg: var(--tch-hover);
  --tblr-table-active-bg: var(--tch-press);
  color: var(--tch-text);
  margin-bottom: 0;
  border-color: var(--tch-line);
}

.table > :not(caption) > * > * {
  padding: .85rem 1rem;
  border-bottom-color: var(--tch-line);
  vertical-align: middle;
}

.table thead th {
  padding-top: .7rem;
  padding-bottom: .7rem;
  background: var(--tch-surface-2);
  color: var(--tch-text-3);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--tch-line);
}

.card-table { margin-bottom: 0; }
.card-table tr:first-child td,
.card-table tr:first-child th { border-top: 0; }
.card-table tr > :first-child { padding-left: 1.25rem; }
.card-table tr > :last-child { padding-right: 1.25rem; }
.card-table tbody tr:last-child > * { border-bottom: 0; }

.table tbody tr { transition: background-color var(--tch-dur) ease; }
.table tbody tr:hover > * { background-color: var(--tch-hover); }

.table a:not(.btn) { color: var(--tch-text); font-weight: 600; }
.table a:not(.btn):hover { color: var(--tch-accent-ink); }

.table-sm > :not(caption) > * > * { padding: .5rem .75rem; }

.cell-id,
.cell-id a {
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  font-size: .8125rem;
  color: var(--tch-text-2) !important;
  font-weight: 500 !important;
}

/* Индикатор «таблица прокручивается вбок» */
.table-responsive { position: relative; }

.table-responsive.scroll-fade {
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
  mask-image: linear-gradient(90deg, #000 85%, transparent);
}

/* 6.6 Списки */
.list-group {
  --tblr-list-group-bg: transparent;
  --tblr-list-group-border-color: var(--tch-line);
  --tblr-list-group-color: var(--tch-text);
  --tblr-list-group-action-hover-bg: var(--tch-hover);
  --tblr-list-group-action-hover-color: var(--tch-text);
}

.list-group-item {
  padding: .9rem 1.25rem;
  background: transparent;
  border-color: var(--tch-line);
  color: var(--tch-text);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  background: var(--tch-hover);
  color: var(--tch-text);
}

.list-group-item.active {
  background: var(--tch-brand-bg);
  border-color: var(--tch-brand-line);
  color: var(--tch-text);
}

/* 6.7 Выпадающие меню */
.dropdown-menu {
  --tblr-dropdown-bg: var(--tch-surface);
  --tblr-dropdown-border-color: var(--tch-line-strong);
  --tblr-dropdown-link-color: var(--tch-text);
  --tblr-dropdown-link-hover-bg: var(--tch-surface-2);
  --tblr-dropdown-link-hover-color: var(--tch-text);
  --tblr-dropdown-link-active-bg: var(--tch-brand-bg);
  --tblr-dropdown-link-active-color: var(--tch-text);
  padding: 6px;
  min-width: 13rem;
  background: var(--tch-surface);
  border: 1px solid var(--tch-line-strong);
  border-radius: var(--tch-r);
  box-shadow: var(--tch-shadow-3);
  font-size: .875rem;
}

.dropdown-menu-arrow::before,
.dropdown-menu-arrow::after { display: none; }

.dropdown-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 38px;
  padding: .5rem .75rem;
  border-radius: 10px;
  color: var(--tch-text);
  white-space: normal;
}

.dropdown-item .ti { font-size: 1.1rem; color: var(--tch-text-3); margin: 0 !important; }

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--tch-surface-2);
  color: var(--tch-text);
}

.dropdown-item.active,
.dropdown-item:active {
  background: var(--tch-brand-bg);
  color: var(--tch-text);
}

.dropdown-item.text-danger .ti,
.dropdown-item.text-danger { color: var(--tch-danger) !important; }
.dropdown-item.text-danger:hover { background: var(--tch-danger-bg); }

.dropdown-header {
  padding: .5rem .75rem .35rem;
  color: var(--tch-text);
  font-size: .8125rem;
}

.dropdown-divider { margin: 6px 0; border-color: var(--tch-line); opacity: 1; }

.dropdown-menu-compact { min-width: 11rem; }

/* Меню уведомлений */
.notif-dropdown-menu {
  width: 360px;
  max-width: calc(100vw - 24px);
  padding: 0;
  overflow: hidden;
}

.notif-dropdown-menu .dropdown-header {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--tch-line);
  font-family: var(--tch-font-display);
}

.notif-dropdown-menu #notifList {
  max-height: 360px;
  overflow-y: auto;
  padding: 6px;
}

.notif-dropdown-menu .dropdown-footer {
  padding: .6rem 1rem !important;
  background: var(--tch-surface-2);
}

.notif-item {
  display: block;
  padding: .65rem .75rem;
  border-radius: 10px;
  color: var(--tch-text);
}

.notif-item:hover { background: var(--tch-surface-2); color: var(--tch-text); }

.notif-item.is-unread {
  background: var(--tch-brand-bg);
  box-shadow: inset 3px 0 0 var(--tch-yellow);
}

.notif-item-title { font-weight: 600; font-size: .8125rem; }
.notif-item-body { color: var(--tch-text-2); font-size: .8125rem; margin-top: 2px; }
.notif-item-time { color: var(--tch-text-3); font-size: .6875rem; margin-top: 4px; }

/* 6.8 Уведомления на странице */
.alert {
  --tblr-alert-color: var(--tch-text);
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .9rem 1rem;
  margin-bottom: 1rem;
  border-radius: var(--tch-r);
  border: 1px solid var(--tch-neutral-line);
  background: var(--tch-neutral-bg);
  color: var(--tch-text);
  box-shadow: none;
}

.alert > .d-flex { flex: 1 1 auto; gap: .75rem; }
.alert .alert-icon { margin: 0 !important; font-size: 1.25rem; }
.alert-title { font-family: var(--tch-font-display); font-weight: 700; font-size: .9375rem; margin-bottom: .2rem; color: var(--tch-text); }
.alert .btn-close { margin-left: auto; flex: 0 0 auto; }

.alert-success { border-color: var(--tch-ok-line); background: var(--tch-ok-bg); }
.alert-success .alert-icon { color: var(--tch-ok); }
.alert-danger { border-color: var(--tch-danger-line); background: var(--tch-danger-bg); }
.alert-danger .alert-icon { color: var(--tch-danger); }
.alert-warning { border-color: var(--tch-warn-line); background: var(--tch-warn-bg); }
.alert-warning .alert-icon { color: var(--tch-warn); }
.alert-info { border-color: var(--tch-info-line); background: var(--tch-info-bg); }
.alert-info .alert-icon { color: var(--tch-info); }
.alert-secondary { border-color: var(--tch-neutral-line); background: var(--tch-neutral-bg); }

/* Ссылка в тексте уведомления — жирнее текста, без подчёркивания */
.alert a:not(.btn) { color: inherit; font-weight: 700; text-decoration: none; }
.alert a:not(.btn):hover { color: inherit; opacity: .8; }

.btn-close {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  opacity: .6;
  background-size: 11px;
}

.btn-close { filter: var(--tch-btn-close-filter); }
.btn-close:hover { opacity: 1; background-color: var(--tch-hover); }

/* 6.9 Модальные окна */
.modal {
  --tblr-modal-bg: var(--tch-surface);
  --tblr-modal-border-color: var(--tch-line-strong);
  --tblr-modal-border-radius: var(--tch-r-xl);
  --tblr-modal-inner-border-radius: calc(var(--tch-r-xl) - 1px);
  --tblr-modal-header-border-color: var(--tch-line);
  --tblr-modal-footer-border-color: var(--tch-line);
  --tblr-modal-box-shadow: var(--tch-shadow-3);
}

.modal-content {
  background: var(--tch-surface);
  border: 1px solid var(--tch-line-strong);
  border-radius: var(--tch-r-xl);
  box-shadow: var(--tch-shadow-3);
}

.modal-header {
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--tch-line);
}

.modal-title { font-weight: 700; font-size: 1.0625rem; }
.modal-body { padding: 1.25rem; }
.modal-footer { padding: .9rem 1.25rem; border-top: 1px solid var(--tch-line); gap: .5rem; }
.modal-footer > * { margin: 0; }

.modal-backdrop { --tblr-backdrop-bg: #03060A; --tblr-backdrop-opacity: .72; }
.modal-blur { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* 6.10 Пагинация */
.pagination {
  gap: 6px;
  flex-wrap: wrap;
  margin: 0;
}

.page-item .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 .7rem;
  border-radius: 12px !important;
  border: 1px solid var(--tch-line-strong);
  background: var(--tch-surface);
  color: var(--tch-text-2);
  font-weight: 600;
  font-size: .8125rem;
  transition: background-color var(--tch-dur) ease, color var(--tch-dur) ease, border-color var(--tch-dur) ease;
}

.page-item .page-link:hover {
  background: var(--tch-surface-2);
  color: var(--tch-text);
  border-color: var(--tch-line-strong);
}

.page-item.active .page-link,
.page-link.active {
  background: var(--tch-yellow);
  border-color: var(--tch-yellow);
  color: var(--tch-ink);
  box-shadow: 0 8px 20px -10px rgba(var(--tch-yellow-rgb), .8);
}

.page-item.disabled .page-link { opacity: .45; background: transparent; }
.page-item + .page-item { margin-left: 0; }

/* 6.11 Аватары */
.avatar {
  --tblr-avatar-bg: var(--tch-surface-3);
  background-color: var(--tch-surface-3);
  color: var(--tch-text);
  font-family: var(--tch-font-display);
  font-weight: 700;
  border-radius: 50%;
  box-shadow: none;
}

.avatar-gradient {
  background: var(--tch-ring-gradient) !important;
  color: var(--tch-ink) !important;
}

/* 6.12 Пустое состояние */
.empty-premium,
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 3rem 1.25rem;
  text-align: center;
}

.empty-premium-icon,
.empty-state-icon {
  width: 72px;
  height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .5rem;
  border-radius: 50%;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--tch-surface-2), var(--tch-surface-2)) padding-box,
    var(--tch-ring-gradient) border-box;
  color: var(--tch-icon-ink);
  font-size: 1.9rem;
}

.empty-premium-title,
.empty-state-title {
  font-family: var(--tch-font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--tch-text);
}

.empty-premium-subtitle,
.empty-state-text {
  max-width: 420px;
  color: var(--tch-text-2);
  font-size: .875rem;
}

.empty { color: var(--tch-text-2); }
.empty-title { font-family: var(--tch-font-display); font-weight: 700; color: var(--tch-text); }
.empty-subtitle { color: var(--tch-text-2); }

/* 6.13 Сетка «подпись — значение» */
.datagrid {
  --tblr-datagrid-padding: 1.25rem;
  --tblr-datagrid-item-width: 12rem;
  gap: 1.1rem 1.25rem;
}

.datagrid-title {
  margin-bottom: .3rem;
  color: var(--tch-text-3);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.3;
}

.datagrid-content {
  color: var(--tch-text);
  font-size: .9375rem;
  font-weight: 500;
  word-break: break-word;
}

/* 6.14 Вкладки и «таблетки» */
.nav-tabs {
  --tblr-nav-tabs-border-color: var(--tch-line);
  --tblr-nav-tabs-link-active-color: var(--tch-text);
  --tblr-nav-tabs-link-active-border-color: var(--tch-yellow);
  border-bottom: 1px solid var(--tch-line);
}

.nav-tabs .nav-link { color: var(--tch-text-2); font-weight: 600; }
.nav-tabs .nav-link.active { color: var(--tch-text); border-color: transparent transparent var(--tch-yellow); background: transparent; }

.nav-pills .nav-link.active { background: var(--tch-yellow); color: var(--tch-ink); }

/* 6.15 Прогресс */
.progress {
  --tblr-progress-bg: var(--tch-surface-3);
  --tblr-progress-bar-bg: var(--tch-yellow);
  height: 8px;
  border-radius: 999px;
  background: var(--tch-surface-3);
}

.progress-bar { border-radius: 999px; }

/* 6.16 Подсказки */
.tooltip {
  --tblr-tooltip-bg: #1B262C;
  --tblr-tooltip-color: #EDF1F2;
  --tblr-tooltip-border-radius: 8px;
  font-size: .75rem;
}

/* ── 7. Паттерны экранов ────────────────────────────────────── */

/* 7.1 Приветственная карточка — как шапка профиля в концепте */
.hero-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-bottom: 1.5rem;
  padding: 1.75rem 1.75rem 1.5rem;
  border-radius: var(--tch-r-xl);
  border: 1px solid rgba(255, 255, 255, .08);
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(var(--tch-emerald-rgb), .16), transparent 55%),
    radial-gradient(70% 120% at 0% 100%, rgba(var(--tch-yellow-rgb), .10), transparent 60%),
    linear-gradient(160deg, #111A1F 0%, #0A1013 100%);
  color: #EDF1F2;
  box-shadow: var(--tch-shadow-2);
}

/* Диагональные фирменные полосы в углу */
.hero-card::before,
.hero-card::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -40%;
  width: 70px;
  height: 180%;
  transform: rotate(32deg);
  pointer-events: none;
}

.hero-card::before {
  right: 150px;
  background: linear-gradient(180deg, rgba(var(--tch-yellow-rgb), 0), rgba(var(--tch-yellow-rgb), .28) 45%, rgba(var(--tch-yellow-rgb), 0));
}

.hero-card::after {
  right: 60px;
  width: 44px;
  background: linear-gradient(180deg, rgba(var(--tch-emerald-rgb), 0), rgba(var(--tch-emerald-rgb), .3) 45%, rgba(var(--tch-emerald-rgb), 0));
}

.hero-card-top {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.hero-card-person {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  min-width: 0;
  flex: 1 1 320px;
}

.hero-card .avatar-ring > img,
.hero-card .avatar-ring > span { border-color: #0E1519; background: #1B262C; color: #EDF1F2; }

.hero-card-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .6rem;
  margin-bottom: .35rem;
  color: var(--tch-yellow);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.hero-card-title {
  margin: 0;
  font-family: var(--tch-font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  color: #FFFFFF;
  overflow-wrap: anywhere;
}

.hero-card-meta {
  margin-top: .45rem;
  color: #A3AFB5;
  font-size: .875rem;
}

.hero-card-meta::first-letter { text-transform: uppercase; }

.hero-stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(96px, auto);
  gap: .6rem;
  margin-left: auto;
}

.hero-stat {
  padding: .8rem 1rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  text-align: center;
  min-width: 0;
}

.hero-stat-value {
  display: block;
  font-family: var(--tch-font-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.1;
  color: #FFFFFF;
  white-space: nowrap;
}

.hero-stat-value .ti { color: var(--tch-yellow); font-size: .9em; }

.hero-stat-label {
  display: block;
  margin-top: .3rem;
  color: #8A979D;
  font-size: .6563rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-stat-accent .hero-stat-value { color: var(--tch-yellow); }
.hero-stat a { color: var(--tch-yellow); }

/* 7.1а Шапка страницы машины (на базе hero-card) */
.hero-card-actions { margin-left: auto; align-self: flex-start; }

.hero-card .icon-btn {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .1);
  color: #C3CCD0;
}

.garage-logo-lg {
  width: 68px;
  height: 68px;
  border-radius: 20px;
  font-size: 1.9rem;
}

.garage-logo-lg img { width: 42px; height: 42px; }

.hero-card .garage-logo {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .1);
  color: #C3CCD0;
}

.vehicle-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .6rem;
  margin-top: .55rem;
  color: #A3AFB5;
  font-size: .875rem;
}

.dot-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}

.vehicle-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  align-items: end;
  gap: 1.5rem 2rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px dashed rgba(255, 255, 255, .1);
}

.vehicle-hero .mileage-display { color: #FFFFFF; }
.vehicle-hero .highlights { margin: 0; justify-content: flex-end; }
.mileage-form { margin-top: .9rem; }

/* У заголовка с подписью-«глазом» полоса слева не нужна */
.page-header-premium .page-pretitle + .page-title::before { display: none; }

/* Кнопка «⋯» — всегда в правом верхнем углу шапки */
.vehicle-hero .hero-card-actions { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 2; }
.vehicle-hero .hero-card-person { padding-right: 3rem; }

/* Регламент ТО на телефоне: компактный список вместо таблицы */
.maint-list { border-top: 1px solid var(--tch-line); }

.maint-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--tch-line);
}

.maint-item:last-child { border-bottom: 0; }
.maint-item.is-overdue { background: linear-gradient(90deg, var(--tch-danger-bg), transparent 70%); }
.maint-item.is-upcoming { background: linear-gradient(90deg, var(--tch-warn-bg), transparent 70%); }

.maint-item-main { flex: 1 1 auto; min-width: 0; }
.maint-item-title { font-weight: 600; line-height: 1.3; color: var(--tch-text); }

.maint-item-meta {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-top: .25rem;
  color: var(--tch-text-2);
  font-size: .8125rem;
}

.maint-item-meta .ti { color: var(--tch-text-3); }

.maint-item-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
}

/* Бейджи с длинным текстом (название регламента) переносятся, а не вылезают */
.card-header .badge { white-space: normal; text-align: left; }

/* 7.2 Ряд «хайлайтов» — круглые быстрые действия */
.highlights {
  display: flex;
  gap: 1.1rem;
  margin: 1.35rem 0 0;
  padding: .25rem .1rem .1rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.highlights::-webkit-scrollbar { display: none; }

.highlight {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  width: 84px;
  /* Длинное слово (каз. «Пайдаланушылар») расширяет ячейку, а не налезает на соседей */
  min-width: min-content;
  color: #C9D2D6;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  scroll-snap-align: start;
}

.highlight:hover { color: #FFFFFF; }

.highlight .ring-icon {
  --ring-size: 60px;
  --ring-width: 2.5px;
  --ring-fill: #0F171B;
  font-size: 1.55rem;
  transition: transform .2s var(--tch-ease), box-shadow .2s ease;
}

.highlight:hover .ring-icon {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -10px rgba(var(--tch-yellow-rgb), .6);
}

.highlight-label {
  display: -webkit-box;
  max-width: 100%;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 7.2а Заголовок секции внутри страницы */
.section-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 .9rem;
}

.section-bar-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  font-family: var(--tch-font-display);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -.02em;
  color: var(--tch-text);
}

.section-bar-title::before {
  content: '';
  flex: 0 0 auto;
  width: 4px;
  height: 1.05em;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--tch-yellow), var(--tch-emerald));
}

.section-bar-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--tch-text-2);
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.section-bar-link:hover { color: var(--tch-accent-ink); }

/* 7.2б Промо-карточка (подписка, подсказки) — всегда тёмная */
.promo-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 1.4rem;
  border-radius: var(--tch-r-lg);
  border: 1px solid rgba(var(--tch-yellow-rgb), .22);
  background:
    radial-gradient(90% 90% at 100% 0%, rgba(var(--tch-yellow-rgb), .18), transparent 60%),
    radial-gradient(80% 90% at 0% 100%, rgba(var(--tch-emerald-rgb), .12), transparent 60%),
    linear-gradient(160deg, #121B20, #0A1013);
  color: #EDF1F2;
}

.promo-card-title {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .9rem;
  font-family: var(--tch-font-display);
  font-weight: 800;
  font-size: 1.15rem;
}

.promo-card-title .ti { color: var(--tch-yellow); }
.promo-card-text { margin-top: .35rem; color: #A3AFB5; font-size: .875rem; line-height: 1.5; }
.promo-card .btn { margin-top: auto !important; }
.promo-card .promo-card-text + .btn { margin-top: 1.25rem !important; }

/* 7.3 Плитки показателей */
.stat-tile,
.kpi-card .card-body {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.stat-tile {
  height: 100%;
  padding: 1.1rem 1.25rem;
  border-radius: var(--tch-r-lg);
  border: 1px solid var(--tch-line);
  background: var(--tch-surface);
  box-shadow: var(--tch-shadow-1);
  color: var(--tch-text);
}

a.stat-tile:hover { color: var(--tch-text); border-color: var(--tch-line-strong); }

.stat-tile .ring-icon,
.kpi-icon-gold {
  --ring-size: 48px;
  --ring-fill: var(--tch-surface-2);
}

.kpi-icon-gold {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--tch-surface-2), var(--tch-surface-2)) padding-box,
    var(--tch-ring-gradient) border-box;
  color: var(--tch-icon-ink);
  font-size: 1.3rem;
}

.stat-tile-label,
.kpi-label {
  color: var(--tch-text-3);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.3;
}

.stat-tile-value,
.kpi-value {
  margin-top: .2rem;
  font-family: var(--tch-font-display);
  font-weight: 800;
  font-size: 1.625rem;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--tch-text);
  white-space: nowrap;
}

.stat-tile-sub {
  margin-top: .2rem;
  color: var(--tch-text-2);
  font-size: .75rem;
}

.stat-tile-value small,
.kpi-value small { font-size: .55em; color: var(--tch-text-2); font-weight: 600; }

/* 7.4 Карточка машины в гараже */
.garage-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  padding: 1.1rem 1.15rem 1rem;
  border-radius: var(--tch-r-lg);
  border: 1px solid var(--tch-line);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(var(--tch-yellow-rgb), .07), transparent 55%),
    var(--tch-surface);
  box-shadow: var(--tch-shadow-1);
  color: var(--tch-text);
  overflow: hidden;
  transition: transform .2s var(--tch-ease), border-color .2s ease, box-shadow .2s ease;
}

.garage-card:hover {
  color: var(--tch-text);
  transform: translateY(-3px);
  border-color: rgba(var(--tch-yellow-rgb), .4);
  box-shadow: var(--tch-shadow-2), 0 0 0 1px rgba(var(--tch-yellow-rgb), .12);
}

.garage-card-head {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-width: 0;
}

.garage-logo {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--tch-surface-2);
  border: 1px solid var(--tch-line);
  color: var(--tch-text-2);
  font-size: 1.4rem;
}

.garage-logo img { width: 30px; height: 30px; object-fit: contain; }

/* Логотипы марок — белые SVG: в светлой теме их затемняем */
.garage-logo img,
.vehicle-avatar-lg img,
.brand-logo,
.brand-logo-sm { filter: var(--tch-logo-filter); opacity: var(--tch-logo-opacity); }

.garage-title { min-width: 0; flex: 1 1 auto; }

.garage-name {
  font-family: var(--tch-font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.garage-sub {
  margin-top: 2px;
  color: var(--tch-text-2);
  font-size: .8125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.garage-mileage {
  display: flex;
  align-items: baseline;
  gap: .35rem;
}

.garage-card-mid {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .5rem;
}

.garage-mileage-value {
  font-family: var(--tch-font-display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--tch-text);
}

.garage-mileage-unit {
  color: var(--tch-text-3);
  font-size: .8125rem;
  font-weight: 600;
}

.garage-mileage-label {
  margin-bottom: .3rem;
  color: var(--tch-text-3);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.garage-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: .85rem;
  border-top: 1px dashed var(--tch-line-strong);
}

.garage-status {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--tch-ok);
}

.garage-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

.garage-status.is-upcoming { color: var(--tch-warn); }
.garage-status.is-overdue { color: var(--tch-danger); }

.garage-primary {
  position: absolute;
  top: 12px;
  right: 12px;
}

.garage-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  height: 100%;
  min-height: 180px;
  padding: 1.25rem;
  border-radius: var(--tch-r-lg);
  border: 1.5px dashed var(--tch-line-strong);
  color: var(--tch-text-2);
  font-weight: 600;
  text-align: center;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.garage-add:hover {
  color: var(--tch-text);
  border-color: var(--tch-yellow);
  background: var(--tch-brand-bg);
}

/* Прежняя карточка авто (не перенесённые страницы) */
.vehicle-card { display: block; color: inherit; text-decoration: none; height: 100%; }
.vehicle-card:hover { color: inherit; }
.vehicle-card .card { height: 100%; transition: transform .2s var(--tch-ease), border-color .2s ease; }
.vehicle-card:hover .card { transform: translateY(-2px); border-color: var(--tch-line-strong); }

.vehicle-avatar-lg {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--tch-surface-2);
  border: 1px solid var(--tch-line);
  color: var(--tch-text-2);
  font-size: 1.4rem;
}

.vehicle-avatar-lg img { width: 30px; height: 30px; object-fit: contain; }

.vehicle-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: .75rem;
  padding-top: .85rem;
  border-top: 1px dashed var(--tch-line-strong);
}

.vehicle-stat-label {
  color: var(--tch-text-3);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.vehicle-stat-value {
  margin-top: .2rem;
  font-weight: 600;
  font-size: .875rem;
  color: var(--tch-text);
}

/* Крупный пробег на странице машины */
.mileage-display {
  font-family: var(--tch-font-display);
  font-weight: 800;
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--tch-text);
}

.mileage-unit {
  font-family: var(--tch-font-sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--tch-text-3);
}

/* 7.5 Лента действий на странице объекта */
.action-strip {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.action-strip form { margin: 0; display: contents; }

/* 7.6 Карточки быстрых действий */
.quick-action-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding: 1.1rem 1.25rem;
  border-radius: var(--tch-r-lg);
  border: 1px solid var(--tch-line);
  background: var(--tch-surface);
  color: var(--tch-text);
  box-shadow: var(--tch-shadow-1);
  transition: transform .2s var(--tch-ease), border-color .2s ease, box-shadow .2s ease;
}

.quick-action-card:hover {
  color: var(--tch-text);
  transform: translateY(-2px);
  border-color: rgba(var(--tch-yellow-rgb), .4);
  box-shadow: var(--tch-shadow-2);
}

.quick-action-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--tch-surface-2), var(--tch-surface-2)) padding-box,
    var(--tch-ring-gradient) border-box;
  color: var(--tch-icon-ink);
  font-size: 1.3rem;
}

.quick-action-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.quick-action-text strong { font-family: var(--tch-font-display); font-weight: 700; font-size: .9375rem; }
.quick-action-text span { color: var(--tch-text-2); font-size: .8125rem; line-height: 1.4; }

.quick-action-card .ti-arrow-right { margin-left: auto; color: var(--tch-text-3); transition: transform .2s ease, color .2s ease; }
.quick-action-card:hover .ti-arrow-right { transform: translateX(3px); color: var(--tch-accent-ink); }

/* 7.7 Профиль */
.profile-avatar {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  object-fit: cover;
  background: var(--tch-surface-3);
  color: var(--tch-text);
  font-family: var(--tch-font-display);
  font-weight: 800;
  font-size: 1.15rem;
  box-shadow: 0 0 0 2px var(--tch-surface), 0 0 0 4px rgba(var(--tch-yellow-rgb), .55);
}

.profile-avatar-sm {
  width: 36px;
  height: 36px;
  font-size: .9rem;
  box-shadow: 0 0 0 2px var(--tch-surface), 0 0 0 3px rgba(var(--tch-yellow-rgb), .4);
}

.profile-avatar-lg { width: 88px; height: 88px; font-size: 2rem; }

.profile-header-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 1.75rem;
  border-radius: var(--tch-r-xl);
  border: 1px solid rgba(255, 255, 255, .08);
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(var(--tch-emerald-rgb), .16), transparent 55%),
    radial-gradient(70% 120% at 0% 100%, rgba(var(--tch-yellow-rgb), .10), transparent 60%),
    linear-gradient(160deg, #111A1F 0%, #0A1013 100%);
  color: #EDF1F2;
}

.profile-header-card .text-secondary { color: #A3AFB5 !important; }

.profile-nickname { color: var(--tch-yellow); font-weight: 600; }

.profile-role-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgba(var(--tch-yellow-rgb), .14);
  border: 1px solid rgba(var(--tch-yellow-rgb), .35);
  color: var(--tch-yellow);
  font-size: .75rem;
  font-weight: 700;
}

.profile-role-icon { color: var(--tch-yellow); }

.profile-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem 1.25rem;
}

.profile-info-label {
  color: var(--tch-text-3);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.profile-info-value { margin-top: .25rem; font-weight: 500; color: var(--tch-text); }

/* Раскрывающаяся секция формы (<details>) */
.form-collapse > summary { cursor: pointer; list-style: none; }
.form-collapse > summary::-webkit-details-marker { display: none; }
.form-collapse > summary::marker { content: ''; }
.form-collapse > summary::after { order: 2; }
.form-collapse-chevron { order: 3; color: var(--tch-text-3); transition: transform .25s var(--tch-ease); }
.form-collapse[open] .form-collapse-chevron { transform: rotate(180deg); }
.form-collapse > summary:hover .form-collapse-chevron { color: var(--tch-accent-ink); }

/* Чипы-переключатели (дополнительные услуги) */
.chip-group { display: flex; flex-wrap: wrap; gap: .5rem; }

.chip-check { position: relative; margin: 0; }

.chip-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip-check span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 40px;
  padding: .45rem .95rem;
  border-radius: 999px;
  border: 1.5px solid var(--tch-line-strong);
  background: var(--tch-surface-2);
  color: var(--tch-text-2);
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: border-color var(--tch-dur) ease, background-color var(--tch-dur) ease, color var(--tch-dur) ease;
}

.chip-check span .ti { display: none; font-size: 1rem; color: var(--tch-accent-ink); }
.chip-check:hover span { color: var(--tch-text); border-color: rgba(var(--tch-yellow-rgb), .5); }

.chip-check input:checked + span {
  border-color: var(--tch-yellow);
  background: var(--tch-brand-bg);
  color: var(--tch-text);
}

.chip-check input:checked + span .ti { display: inline-block; }
.chip-check input:focus-visible + span { outline: 2px solid var(--tch-yellow); outline-offset: 2px; }

/* Календарь СТО: ежедневник по дням */
.agenda-day.is-past { opacity: .72; }
.agenda-day.is-today { border-color: var(--tch-brand-line); box-shadow: 0 0 0 1px var(--tch-brand-line), var(--tch-shadow-1); }
.agenda-date::first-letter { text-transform: uppercase; }

.agenda-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1.25rem;
}

.agenda-item + .agenda-item { border-top: 1px solid var(--tch-line); }

.agenda-time {
  flex: 0 0 auto;
  min-width: 3.4rem;
  font-family: var(--tch-font-display);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--tch-text);
}

.agenda-body { flex: 1 1 auto; min-width: 0; }

.agenda-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem .6rem;
  font-weight: 600;
  color: var(--tch-text);
}

.agenda-title > .ti { color: var(--tch-icon-ink); }

.agenda-car {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--tch-text-2);
  font-weight: 500;
}

.agenda-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .3rem .75rem;
  margin-top: .3rem;
  color: var(--tch-text-2);
  font-size: .8125rem;
}

.agenda-meta > .ti { color: var(--tch-text-3); margin-right: -.45rem; }

.agenda-call {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-weight: 600;
  white-space: nowrap;
}

.agenda-side {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .5rem;
}

@media (max-width: 575.98px) {
  .agenda-item { flex-wrap: wrap; align-items: flex-start; gap: .4rem .75rem; padding: .8rem 1rem; }
  .agenda-time { min-width: 3rem; font-size: 1rem; }
  .agenda-body { flex-basis: calc(100% - 4rem); }
  .agenda-side { width: 100%; justify-content: space-between; padding-left: 3.75rem; }
}

/* Пример формата (CSV и т.п.) */
.code-sample {
  margin: 0;
  padding: .9rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--tch-line);
  background: var(--tch-input-bg);
  color: var(--tch-text-2);
  font-size: .75rem;
  line-height: 1.7;
  white-space: pre;
  overflow-x: auto;
}

/* Шкала этапов заявки */
.stepper {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.stepper-step {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  text-align: center;
}

.stepper-step + .stepper-step::before {
  content: '';
  position: absolute;
  top: 17px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--tch-line-strong);
}

.stepper-step.is-done + .stepper-step::before,
.stepper-step.is-done + .stepper-step.is-current::before { background: var(--tch-emerald); }

.stepper-dot {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--tch-line-strong);
  background: var(--tch-surface);
  color: var(--tch-text-3);
  font-weight: 700;
  font-size: .8125rem;
}

.stepper-step.is-done .stepper-dot {
  border-color: var(--tch-emerald);
  background: var(--tch-emerald);
  color: var(--tch-ink);
}

.stepper-step.is-current .stepper-dot {
  border-color: var(--tch-yellow);
  background: var(--tch-yellow);
  color: var(--tch-ink);
  box-shadow: 0 0 0 5px rgba(var(--tch-yellow-rgb), .18);
}

.stepper-label {
  max-width: 100%;
  color: var(--tch-text-3);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.25;
}

.stepper-step.is-done .stepper-label,
.stepper-step.is-current .stepper-label { color: var(--tch-text); }

.page-title > .ti { font-size: .9em; }

/* Блоки описания в деталях */
.detail-block {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--tch-line-strong);
}

.detail-block p { color: var(--tch-text); line-height: 1.6; }

.photo-thumbs { display: flex; flex-wrap: wrap; gap: .5rem; }

.photo-thumbs img {
  width: 104px;
  height: 104px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--tch-line);
}

/* Профиль: e-mail, телефон, город в шапке */
.profile-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  gap: .6rem;
  margin-left: auto;
}

.profile-fact {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  min-width: 0;
  max-width: 280px;
  padding: .75rem .9rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
}

.profile-fact > .ti { flex: 0 0 auto; margin-top: .1rem; color: var(--tch-yellow); font-size: 1.15rem; }
.profile-fact-value { color: #FFFFFF; font-weight: 600; font-size: .875rem; margin-bottom: .35rem; }
.profile-fact-label { color: #8A979D; font-size: .75rem; }
.profile-fact-link { color: var(--tch-yellow) !important; font-size: .75rem; }

/* Список переключателей: подпись слева, тумблер справа */
.switch-list {
  border: 1px solid var(--tch-line);
  border-radius: var(--tch-r);
  overflow: hidden;
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1rem;
  cursor: pointer;
  transition: background-color var(--tch-dur) ease;
}

.switch-row + .switch-row { border-top: 1px solid var(--tch-line); }
.switch-row:hover { background: var(--tch-hover); }

.switch-row-text {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: var(--tch-text);
  font-weight: 500;
}

.switch-row-text .ti { color: var(--tch-text-3); font-size: 1.15rem; }

/* 7.8 Графики */
.chart-card { overflow: hidden; }
.chart-card .card-body { padding: 1rem 1rem .5rem; }
.chart-card .apexcharts-canvas { margin: 0 auto; }

.apexcharts-canvas .apexcharts-text,
.apexcharts-canvas .apexcharts-legend-text {
  fill: var(--tch-text-2);
  color: var(--tch-text-2) !important;
  font-family: var(--tch-font-sans) !important;
}

.apexcharts-canvas .apexcharts-gridline { stroke: var(--tch-line); }

.apexcharts-tooltip {
  background: var(--tch-surface) !important;
  border: 1px solid var(--tch-line-strong) !important;
  border-radius: 10px !important;
  box-shadow: var(--tch-shadow-3) !important;
  color: var(--tch-text) !important;
}

.apexcharts-tooltip-title {
  background: var(--tch-surface-2) !important;
  border-bottom: 1px solid var(--tch-line) !important;
  font-family: var(--tch-font-sans) !important;
}

.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
  background: var(--tch-surface) !important;
  border-color: var(--tch-line-strong) !important;
  color: var(--tch-text) !important;
}

.apexcharts-xaxistooltip::before,
.apexcharts-xaxistooltip::after { border-bottom-color: var(--tch-line-strong) !important; }

/* 7.8а Компактный список событий (заявки, напоминания) */
.event-list .list-group-item { padding: .8rem 1.25rem; }

.event-row {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-width: 0;
}

.event-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--tch-surface-2);
  border: 1px solid var(--tch-line);
  color: var(--tch-text-2);
  font-size: 1.15rem;
}

.event-body { flex: 1 1 auto; min-width: 0; }

/* Статус в строке не сжимается: ужимается текст слева, а не бейдж */
.event-row > .badge { flex: 0 0 auto; }

.event-title {
  font-weight: 600;
  color: var(--tch-text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.event-meta {
  margin-top: .15rem;
  color: var(--tch-text-2);
  font-size: .8125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-side { flex: 0 0 auto; text-align: right; }

/* Непрочитанное уведомление: жёлтая полоса и лёгкая подсветка */
.notif-row.is-unread {
  background: linear-gradient(90deg, var(--tch-brand-bg), transparent 60%);
  box-shadow: inset 3px 0 0 var(--tch-yellow);
}

.notif-row.is-unread .event-icon {
  border-color: var(--tch-brand-line);
  color: var(--tch-accent-ink);
}

/* 7.8б Тех.карта: основа плана, горизонт, «маршрут» точек ТО */
.plan-basis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
}

.plan-basis-cell { padding: 1.25rem; min-width: 0; }
.plan-basis-cell + .plan-basis-cell { border-left: 1px solid var(--tch-line); }

.segmented {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--tch-surface-2);
  border: 1px solid var(--tch-line);
}

.segmented-item {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 .5rem;
  border-radius: 9px;
  color: var(--tch-text-2);
  font-size: .8125rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color var(--tch-dur) ease, color var(--tch-dur) ease;
}

.segmented-item:hover { color: var(--tch-text); background: var(--tch-hover); }

.segmented-scroll {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.segmented-scroll::-webkit-scrollbar { display: none; }
.segmented-scroll .segmented-item { flex: 0 0 auto; padding: 0 .8rem; }

.segmented-item.active {
  background: var(--tch-yellow);
  color: var(--tch-ink);
  box-shadow: 0 6px 16px -8px rgba(var(--tch-yellow-rgb), .8);
}

.milestones {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.milestone {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: .75rem;
}

.milestone-rail {
  position: relative;
  display: flex;
  justify-content: center;
}

.milestone-rail::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: -1rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--tch-yellow), var(--tch-emerald));
  opacity: .3;
}

.milestone:first-child .milestone-rail::before { top: 24px; }
.milestone:last-child .milestone-rail::before { bottom: auto; height: 24px; }

.milestone-dot {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  margin-top: 20px;
  border-radius: 50%;
  border: 3px solid var(--tch-emerald);
  background: var(--tch-bg);
  box-shadow: 0 0 0 4px var(--tch-bg);
}

.milestone.has-safety .milestone-dot { border-color: var(--tch-yellow); }

.milestone.is-now .milestone-dot {
  border-color: var(--tch-danger-solid);
  box-shadow: 0 0 0 4px var(--tch-bg), 0 0 16px var(--tch-danger-solid);
}

.milestone-card {
  min-width: 0;
  border-radius: var(--tch-r-lg);
  border: 1px solid var(--tch-line);
  background: var(--tch-surface);
  box-shadow: var(--tch-shadow-1);
  overflow: hidden;
}

.milestone.is-now .milestone-card {
  border-color: var(--tch-danger-line);
  background: linear-gradient(180deg, var(--tch-danger-bg), transparent 140px), var(--tch-surface);
}

.milestone-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  padding: .9rem 1.1rem;
  border-bottom: 1px solid var(--tch-line);
}

.milestone-when {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem .75rem;
  min-width: 0;
}

.milestone-km {
  font-family: var(--tch-font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -.02em;
  color: var(--tch-text);
  white-space: nowrap;
}

.milestone-km small {
  font-family: var(--tch-font-sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--tch-text-3);
}

.milestone-eta { color: var(--tch-text-2); font-size: .8125rem; }

.milestone-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-left: auto;
}

.milestone-cost {
  font-family: var(--tch-font-display);
  font-weight: 800;
  color: var(--tch-text);
  white-space: nowrap;
}

/* Наша оценка и, под ней, цена этого ТО у официального дилера */
.milestone-costs { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.milestone-dealer { font-size: .75rem; color: var(--tch-text-3); white-space: nowrap; }

/* Цены ТО у дилера: плитки ТО-1 … ТО-10 */
.dealer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .6rem;
}
.dealer-to {
  padding: .7rem .8rem;
  border: 1px solid var(--tch-line);
  border-radius: var(--tch-r-sm);
  background: var(--tch-surface-2, var(--tch-surface));
}
.dealer-to.is-next { border-color: var(--tch-brand-line); box-shadow: 0 0 0 1px var(--tch-brand-line); }
.dealer-to-head { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.dealer-to-n { font-family: var(--tch-font-display); font-weight: 800; }
.dealer-to-when { margin-top: .15rem; font-size: .75rem; color: var(--tch-text-3); }
.dealer-to-price { margin-top: .35rem; font-family: var(--tch-font-display); font-weight: 800; font-size: 1.05rem; color: var(--tch-text); white-space: nowrap; }
@media (max-width: 389.98px) {
  .dealer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
  .dealer-to { padding: .6rem .65rem; }
}

.milestone-items { margin: 0; padding: .2rem 0; list-style: none; }

.milestone-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .7rem 1.1rem;
}

.milestone-item + .milestone-item { border-top: 1px dashed var(--tch-line); }

.crit-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: .45rem;
  border-radius: 50%;
  background: var(--tch-text-3);
}

.crit-dot.is-safety { background: var(--tch-danger-solid); box-shadow: 0 0 8px var(--tch-danger-solid); }
.crit-dot.is-important { background: var(--tch-warn-solid); }

.milestone-item-main { flex: 1 1 auto; min-width: 0; }

.milestone-item-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  color: var(--tch-text);
}

.milestone-item-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }

.milestone-item-cost {
  flex: 0 0 auto;
  text-align: right;
  font-weight: 700;
  color: var(--tch-text);
  white-space: nowrap;
}

.milestone-item-cost small {
  display: block;
  max-width: 7.5rem;
  margin-left: auto;
  color: var(--tch-text-3);
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.3;
  /* Длинное основание цены переносится, а не отнимает ширину у названия работы */
  white-space: normal;
}

.milestone-item-tags .badge { max-width: 100%; white-space: normal; text-align: left; }

/* Сноска с иконкой (дисклеймеры, примечания) */
.note-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: .5rem;
  color: var(--tch-text-2);
  font-size: .875rem;
}

.note-row .ti { flex: 0 0 auto; margin-top: .15rem; }

/* 7.9 Лента паспорта — вертикальная хронология */
.timeline-v {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline-v::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--tch-yellow), var(--tch-emerald));
  opacity: .35;
}

.timeline-v-item {
  position: relative;
  display: flex;
  gap: 1rem;
  padding-bottom: 1.35rem;
}

.timeline-v-item:last-child { padding-bottom: 0; }

.timeline-v-node {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--tch-line-strong);
  background: var(--tch-surface);
  color: var(--tch-text-2);
  font-size: 1.05rem;
}

.timeline-v-item.is-maintenance .timeline-v-node { border-color: var(--tch-ok-line); background: var(--tch-ok-bg); color: var(--tch-ok); }
.timeline-v-item.is-repair .timeline-v-node { border-color: var(--tch-warn-line); background: var(--tch-warn-bg); color: var(--tch-warn); }
.timeline-v-item.is-tire .timeline-v-node,
.timeline-v-item.is-wash .timeline-v-node { border-color: var(--tch-info-line); background: var(--tch-info-bg); color: var(--tch-info); }
.timeline-v-item.is-mileage .timeline-v-node { border-color: var(--tch-brand-line); background: var(--tch-brand-bg); color: var(--tch-brand); }

.timeline-v-content {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: .35rem;
}

.timeline-v-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
}

.timeline-v-title {
  font-weight: 700;
  color: var(--tch-text);
  line-height: 1.35;
  min-width: 0;
}

.timeline-v-cost {
  flex: 0 0 auto;
  font-family: var(--tch-font-display);
  font-weight: 800;
  color: var(--tch-text);
  white-space: nowrap;
}

.timeline-v-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  margin-top: .35rem;
  color: var(--tch-text-2);
  font-size: .8125rem;
}

.timeline-v-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.timeline-v-meta .ti { color: var(--tch-text-3); }

.timeline-v-source {
  padding: .1rem .5rem;
  border-radius: 999px;
  background: var(--tch-surface-2);
  border: 1px solid var(--tch-line);
  font-size: .75rem;
  font-weight: 600;
}

.timeline-event-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--tch-surface-2);
  border: 1px solid var(--tch-line);
  color: var(--tch-text-2);
  font-size: 1.1rem;
}

/* 7.10 Фильтры над таблицами */
.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
}

/* VIN в сетке данных: 17 знаков моноширинным мельче — целиком в колонку телефона
   (обычным шрифтом карточка Bootstrap рвала его посередине) */
.datagrid-content.font-monospace { font-size: .8125rem; letter-spacing: 0; overflow-wrap: normal; }

/* Поле ввода в ячейке таблицы-«стопки»: в карточке занимает остаток строки после подписи */
.table-stack td > .form-control,
.table-stack td > .form-select,
.table-stack-xl td > .form-control,
.table-stack-xl td > .form-select { flex: 1 1 auto; min-width: 0; }

/* Бейджи под текстом ячейки: отступ сверху, переносятся рядами */
.ts-value > .badge { margin-top: .35rem; white-space: normal; text-align: left; }

/* 7.11 Табличка «стопкой» на телефоне: строка становится карточкой.
   Ячейкам нужен data-label; .ts-actions — ряд кнопок. */
@media (max-width: 575.98px) {
  .table-stack thead { display: none; }
  .table-stack tbody,
  .table-stack tr,
  .table-stack td { display: block; width: 100%; }
  .table-stack tr {
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--tch-line);
  }
  .table-stack tr:last-child { border-bottom: 0; }
  .table-stack tbody tr:hover > * { background: transparent; }
  .table-stack td {
    display: flex;
    gap: .75rem;
    align-items: baseline;
    justify-content: flex-start;
    text-align: left !important;
    border: 0 !important;
    padding: .22rem 0 !important;
    background: transparent !important;
  }
  .table-stack td[data-label]::before {
    content: attr(data-label);
    /* ячейка бывает text-nowrap (сумма, дата) — подпись всё равно переносится по словам */
    white-space: normal;
    flex: 0 0 40%;
    max-width: 40%;
    color: var(--tch-text-3);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .table-stack td.ts-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding-top: .7rem !important;
  }
  .table-stack td.ts-actions::before { display: none; }
  .table-stack td.ts-actions .btn { flex: 1 1 auto; }
  .table-stack td.ts-actions .btn-icon { width: auto; padding: 0 .75rem; }
  .table-stack td.ts-actions .ts-btn-label { display: inline; }
  .table-stack td:not([data-label]):not(.ts-actions):empty { display: none; }
  /* Первая ячейка строки — заголовок карточки */
  .table-stack td.ts-title {
    display: block;
    margin-bottom: .2rem;
    font-weight: 700;
    font-size: .9375rem;
    color: var(--tch-text);
  }
  .table-stack td.ts-title::before { display: none; }
  .table-stack td { overflow-wrap: anywhere; }
  /* Значение из нескольких строк (заголовок, описание, бейджи) — одной колонкой */
  .table-stack td > .ts-value { flex: 1 1 0; min-width: 0; }

  /* Фильтры над таблицами: поля по два в ряд, кнопки во всю ширину */
  .card-body > form.row > .col-auto,
  .card-body > form.row > [class*="col-md-"]:not([class*="col-6"]):not([class*="col-12"]) {
    flex: 1 1 calc(50% - .5rem);
    width: auto;
    min-width: 0;
  }
  .card-body > form.row > .col-auto .form-control,
  .card-body > form.row > .col-auto .form-select { width: 100%; }
  .card-body > form.row > .col-auto:has(> .btn) { flex-basis: 100%; }
  .card-body > form.row > .col-auto > .btn { width: 100%; }
}

/* Широкие таблицы (7+ колонок) — карточками до 1200 px: на планшете и на
   ноутбуке с меню сбоку они не помещаются, и кнопки уезжают за край */
@media (max-width: 1199.98px) {
  .table-stack-xl thead { display: none; }
  .table-stack-xl tbody,
  .table-stack-xl tr,
  .table-stack-xl td { display: block; width: 100%; }
  .table-stack-xl tr {
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--tch-line);
  }
  .table-stack-xl tr:last-child { border-bottom: 0; }
  .table-stack-xl tbody tr:hover > * { background: transparent; }
  .table-stack-xl td {
    display: flex;
    gap: .75rem;
    align-items: baseline;
    justify-content: flex-start;
    text-align: left !important;
    border: 0 !important;
    padding: .22rem 0 !important;
    background: transparent !important;
  }
  .table-stack-xl td[data-label]::before {
    content: attr(data-label);
    /* ячейка бывает text-nowrap (сумма, дата) — подпись всё равно переносится по словам */
    white-space: normal;
    flex: 0 0 min(40%, 220px);
    max-width: min(40%, 220px);
    color: var(--tch-text-3);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .table-stack-xl td.ts-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding-top: .7rem !important;
  }
  .table-stack-xl td.ts-actions::before { display: none; }
  .table-stack-xl td.ts-actions .btn { flex: 1 1 auto; }
  .table-stack-xl td.ts-actions .btn-icon { width: auto; padding: 0 .75rem; }
  .table-stack-xl td.ts-actions .ts-btn-label { display: inline; }
  .table-stack-xl td:not([data-label]):not(.ts-actions):empty { display: none; }
  /* Первая ячейка строки — заголовок карточки */
  .table-stack-xl td.ts-title {
    display: block;
    margin-bottom: .2rem;
    font-weight: 700;
    font-size: .9375rem;
    color: var(--tch-text);
  }
  .table-stack-xl td.ts-title::before { display: none; }
  .table-stack-xl td { overflow-wrap: anywhere; }
  /* Значение из нескольких строк (заголовок, описание, бейджи) — одной колонкой */
  .table-stack-xl td > .ts-value { flex: 1 1 0; min-width: 0; }
}

/* 7.12 Страницы ошибок */
.error-page,
.error-page-premium {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 58vh;
  padding: 2rem 1rem;
  text-align: center;
}

.error-code {
  font-family: var(--tch-font-display);
  font-weight: 800;
  font-size: clamp(4.5rem, 3rem + 7vw, 8rem);
  line-height: 1;
  letter-spacing: -.03em;
  /* Фирменный переход жёлтый → изумрудный, как кольцо эмблемы. Не контуром:
     у переменного шрифта контур рисует внутренние пересечения глифов */
  background: linear-gradient(120deg, var(--tch-yellow) 35%, var(--tch-emerald));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 10px 32px rgba(var(--tch-yellow-rgb), .22));
}

.error-icon { margin: 1rem 0 .5rem; }

.error-emblem {
  width: 84px;
  height: 84px;
  margin-bottom: 1rem;
  filter: drop-shadow(0 16px 40px rgba(var(--tch-yellow-rgb), .25));
}

/* Логотип над кодом ошибки у гостя: та же связка, что в меню, чуть крупнее */
.error-brand { margin-bottom: 2rem; }
.error-brand .brand { text-align: left; }
.error-brand .brand-emblem { width: 52px; height: 52px; }
.error-brand .brand-name { font-size: 1.5rem; }
.error-brand .brand-tagline { font-size: .6875rem; }

/* Ошибка в публичном шаблоне (без меню): по центру экрана */
body.site > .error-page { min-height: 100vh; min-height: 100dvh; }

.error-description {
  max-width: 460px;
  margin: .75rem auto 1.5rem;
  color: var(--tch-text-2);
  font-size: 1rem;
}

.error-title {
  margin: .25rem 0 0;
  font-family: var(--tch-font-display);
  font-weight: 800;
  font-size: 1.5rem;
}

/* 7.13 Выбор роли при регистрации */
.role-cards-row { --tblr-gutter-x: .75rem; }

.role-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  height: 100%;
  padding: 1rem .5rem;
  border-radius: 16px;
  border: 1.5px solid var(--tch-line-strong);
  background: var(--tch-surface-2);
  color: var(--tch-text-2);
  text-align: center;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .15s ease;
}

.role-card input { position: absolute; opacity: 0; pointer-events: none; }
.role-card:hover { border-color: rgba(var(--tch-yellow-rgb), .5); color: var(--tch-text); }

.role-card.active {
  border-color: var(--tch-yellow);
  background: var(--tch-brand-bg);
  color: var(--tch-text);
  box-shadow: 0 10px 26px -14px rgba(var(--tch-yellow-rgb), .7);
}

.role-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--tch-surface), var(--tch-surface)) padding-box,
    var(--tch-ring-gradient) border-box;
  color: var(--tch-icon-ink);
  font-size: 1.25rem;
}

.role-card strong { font-size: .8125rem; font-weight: 700; }

/* 7.14 Баннер демо-режима */
.demo-banner {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  padding: .9rem 1rem;
  border-radius: var(--tch-r);
  border: 1px solid var(--tch-brand-line);
  background: var(--tch-brand-bg);
  color: var(--tch-text);
  font-size: .8125rem;
  line-height: 1.45;
}

.demo-banner strong { display: block; margin-bottom: .1rem; font-size: .875rem; }

.demo-banner-icon {
  flex: 0 0 auto;
  color: var(--tch-accent-ink);
  font-size: 1.25rem;
  line-height: 1;
}

/* ── 8. Движение ────────────────────────────────────────────── */
.page-stagger > * {
  animation: tch-rise .5s var(--tch-ease) both;
}

.page-stagger > *:nth-child(2) { animation-delay: .04s; }
.page-stagger > *:nth-child(3) { animation-delay: .08s; }
.page-stagger > *:nth-child(4) { animation-delay: .12s; }
.page-stagger > *:nth-child(5) { animation-delay: .16s; }
.page-stagger > *:nth-child(n+6) { animation-delay: .2s; }

@keyframes tch-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

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

/* ── 9. Адаптив ─────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
  .profile-facts { margin-left: 0; width: 100%; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .profile-fact { max-width: none; }
  .hero-stats { margin-left: 0; width: 100%; grid-auto-columns: 1fr; }
  .hero-stat-label { white-space: normal; }
  /* Имя в «чипе» скрыто — остаётся ровный круг аватара */
  .user-chip { padding: 3px; }
  .vehicle-hero-grid { grid-template-columns: 1fr; }
  .vehicle-hero .highlights { justify-content: flex-start; }
  /* Тех.карта: основание плана, условия и горизонт — друг под другом, пока сбоку
     меню (в три колонки на 1024 px не влезал переключатель горизонта) */
  .plan-basis-grid { grid-template-columns: 1fr; }
  .plan-basis-cell + .plan-basis-cell { border-left: 0; border-top: 1px solid var(--tch-line); }
}

@media (max-width: 991.98px) {
  .topbar-brand {
    display: inline-flex;
    min-width: 0;
  }

  .topbar-inner {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    gap: .5rem;
  }

  .page-body { padding-top: 20px; }

  .page-body > .container-xl {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .app-footer-inner {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

@media (max-width: 767.98px) {
  .page-title { font-size: 1.375rem; }

  .hero-card { padding: 1.35rem 1.2rem 1.2rem; border-radius: 20px; }
  .hero-card::before { right: 90px; }
  .hero-card::after { right: 30px; }
  .hero-card-person { gap: .9rem; flex-basis: 100%; }
  .hero-card .avatar-ring-lg { --size: 60px; }
  .hero-stats { gap: .5rem; }
  .hero-stat { padding: .7rem .35rem; border-radius: 14px; }
  /* Сумма за месяц у автопарка бывает семизначной: шрифт от ширины экрана,
     а в крайнем случае «₸» уходит на вторую строку (разряды — неразрывные) */
  .hero-stat-value { font-size: clamp(1rem, 4.4vw, 1.2rem); white-space: normal; }
  /* Обычный регистр: заглавные с разрядкой не вмещают длинные казахские слова */
  .hero-stat-label {
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  /* Казахские слова длиннее: «Пайдаланушылар» должно встать в плашку целиком */
  html[lang="kk"] .hero-stat-label { font-size: .5625rem; }

  /* Пятый «хайлайт» выглядывает из-за края — видно, что ряд листается */
  .highlights {
    gap: .7rem;
    margin: 1.1rem -1.2rem 0;
    padding: .25rem 1.2rem .1rem;
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
    mask-image: linear-gradient(90deg, #000 86%, transparent);
  }
  .highlight { width: 64px; font-size: .6875rem; }
  .highlight .ring-icon { --ring-size: 52px; font-size: 1.3rem; }

  /* Действия в шапке карточки: помещаются — стоят справа, нет — переносятся */
  .card-header { flex-wrap: wrap; row-gap: .6rem; min-height: 56px; }
  .card-header .card-actions { flex-wrap: wrap; }
  .card-header .card-actions .btn-group { flex-wrap: wrap; }

  .stat-tile-value, .kpi-value { font-size: 1.375rem; }
  .garage-mileage-value { font-size: 1.5rem; }
}

@media (max-width: 575.98px) {
  /* iOS не приближает страницу, если шрифт поля ≥ 16px */
  .form-control,
  .form-select,
  .input-group-text { font-size: 16px; }

  .card {
    --tblr-card-spacer-x: 1rem;
    --tblr-card-cap-padding-x: 1rem;
    border-radius: 16px;
  }

  .card-body { padding: 1rem; }
  .card-table tr > :first-child { padding-left: 1rem; }
  .card-table tr > :last-child { padding-right: 1rem; }

  /* Кнопки шапки страницы: одна — на всю ширину, несколько — сеткой 2×N */
  .page-header .col-auto.ms-auto,
  .page-header .page-actions {
    width: 100%;
    margin-left: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
  }

  .page-header .col-auto.ms-auto > *,
  .page-header .page-actions > * { width: 100%; min-width: 0; }

  .page-header .col-auto.ms-auto > :only-child,
  .page-header .page-actions > :only-child,
  .page-header .col-auto.ms-auto > :last-child:nth-child(odd),
  .page-header .page-actions > :last-child:nth-child(odd) { grid-column: 1 / -1; }

  .page-header .col-auto.ms-auto form .btn,
  .page-header .page-actions form .btn { width: 100%; }

  .page-header .col-auto.ms-auto .btn,
  .page-header .page-actions .btn {
    width: 100%;
    padding-left: .6rem;
    padding-right: .6rem;
    white-space: normal;
    line-height: 1.2;
  }

  /* Одна кнопка «Назад» не растягивается — остаётся рядом с заголовком */
  .page-header .col-auto.ms-auto:has(> .btn-outline-secondary:only-child) {
    display: flex !important;
    width: auto;
    margin-left: auto !important;
  }
  .page-header .col-auto.ms-auto:has(> .btn-outline-secondary:only-child) > .btn { width: auto; }

  /* Плитки по две в ряд: иконка над подписью, чтобы подписи не сжимались */
  .col-6 > .stat-tile {
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
    padding: .9rem 1rem;
  }
  .col-6 > .stat-tile .ring-icon { --ring-size: 38px; }

  .btn-group { flex-wrap: wrap; }

  .milestone { grid-template-columns: 14px minmax(0, 1fr); gap: .5rem; }
  .milestone-dot { width: 12px; height: 12px; border-width: 2.5px; }
  .milestone-head { padding: .8rem .9rem; }
  .milestone-actions { width: 100%; justify-content: space-between; margin-left: 0; }
  .milestone-item { padding: .65rem .9rem; gap: .6rem; }

  /* Шкала этапов на телефоне — столбиком: в колонку ~64 px не влезают
     «Подтверждена» и «Қарастырылуда», и карточка Bootstrap (word-wrap)
     рвала слово посередине */
  .stepper { flex-direction: column; }
  .stepper-step { flex-direction: row; gap: .75rem; padding: .3rem 0; text-align: left; }
  .stepper-dot { flex: 0 0 auto; width: 30px; height: 30px; font-size: .75rem; }
  .stepper-step + .stepper-step::before { top: -.3rem; left: 14px; right: auto; width: 2px; height: .6rem; }
  .stepper-label { font-size: .8125rem; }

  /* Гараж в кабинете — карусель карточек, чтобы ниже было видно напоминания */
  .garage-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-right: -16px;
    padding-right: 16px;
    -webkit-overflow-scrolling: touch;
  }
  .garage-row::-webkit-scrollbar { display: none; }
  .garage-row > [class*="col-"] {
    flex: 0 0 84%;
    max-width: 84%;
    scroll-snap-align: start;
  }

  .datagrid { --tblr-datagrid-item-width: 9rem; }

  .modal-dialog { margin: .75rem; }
  .modal-footer > .btn { flex: 1 1 auto; }

  .error-description { font-size: .9375rem; }

  .empty-premium, .empty-state { padding: 2.25rem 1rem; }
}

/* Узкие телефоны (360 px и уже): панель вмещает название целиком,
   подписи статистики в шапке не рвут длинные казахские слова */
@media (max-width: 389.98px) {
  .topbar-inner { gap: .4rem; }
  .topbar-actions { gap: .35rem; }
  .icon-btn { width: 38px; height: 38px; font-size: 1.1rem; }
  .topbar-brand .brand-sm { gap: .45rem; }
  .topbar-brand .brand-sm .brand-emblem { width: 32px; height: 32px; }
  .topbar-brand .brand-sm .brand-name { font-size: 1rem; }
  .hero-stats { gap: .4rem; }
  .hero-stat { padding: .65rem .25rem; }
  .page-title { font-size: 1.25rem; }
  /* «НЕРАСПРЕДЕЛЁННЫЕ», «ПАЙДАЛАНУШЫЛАР» — одно слово на всю плашку: мельче и без
     разрядки, чтобы влезло целиком (перенос посередине слова хуже вылезания) */
  .stat-tile-label { font-size: .5625rem; letter-spacing: .02em; }
}

/* ── 10. Печать ─────────────────────────────────────────────── */
/* Шапка печатного листа (partials/print-brand): на экране её нет */
.print-brand { display: none; }

@media print {
  .print-brand {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 18px;
    border-bottom: 2px solid var(--tch-yellow);
  }
  .print-brand .brand-emblem { filter: none; }
  body.site > .print-brand { margin: 0 1rem 18px; }

  .sidebar,
  .topbar,
  .tabbar,
  .footer,
  .sidebar-overlay,
  .page-header .btn,
  .card-actions,
  .d-print-none { display: none !important; }

  .page-wrapper { margin: 0 !important; padding: 0 !important; }
  .page-body { padding: 0 !important; }
  /* overflow:hidden у корня обрезает печать одним листом */
  html, body { background: #FFFFFF !important; color: #000000 !important; overflow: visible !important; height: auto !important; }
  .card,
  .stat-tile { box-shadow: none !important; border-color: #D0D5D3 !important; background: #FFFFFF !important; }
  /* Tabler обнуляет отступ тела карточки при печати, а рамку мы оставляем */
  .card-body { padding: .9rem 1.1rem !important; }
  /* Плашки и события не рвутся между страницами */
  .stat-tile,
  .timeline-v-item,
  .datagrid-item { break-inside: avoid; }
  a { text-decoration: none !important; }

  /* Анимации появления на бумаге не проигрываются: блок, скрытый на экране
     или ещё не долистанный, иначе печатается с нулевой прозрачностью */
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-animate] { opacity: 1 !important; transform: none !important; }
}