/* =========================================================================
   bali-moto UI — общая дизайн-система сайта.

   Извлечена из дашборда «Сегодня» (design handoff «Дашборд Bali Moto»,
   2026-07-26) и распространена на остальные страницы. До неё каждая страница
   писала свои цвета и отступы руками: только у первичной кнопки в шаблонах
   насчитывалось 12+ разных написаний, радиусы скакали md/lg/xl/full, акцент
   был то чёрный, то изумрудный, то синий.

   Правила игры:
     * все классы с префиксом `u-` — так они не могут случайно зацепить
       дашборд (#dash .d-*) и календари (#cal3 .c3-*), у которых своя
       локальная разметка;
     * ни одного селектора по голому тегу — рядом живёт Tailwind Play CDN,
       и переопределять его preflight мы не хотим;
     * токены объявлены на :root, а не на контейнере — иначе элементы вне
       основного потока (боковые панели, тосты, модалки) теряют переменные
       и рендерятся бесцветными. На дашборде на эти грабли уже наступали.
   ========================================================================= */

:root {
  /* --- поверхности --- */
  --u-page:#f4f5f7;
  --u-surface:#ffffff;
  --u-subtle:#fbfcfd;
  --u-hover:#fafbfc;

  /* --- границы --- */
  --u-border:#e4e6ea;
  --u-border-soft:#eceef1;
  --u-hairline:#f1f2f4;

  /* --- текст --- */
  --u-text:#111827;
  --u-text-2:#374151;
  --u-text-3:#4b5563;
  --u-muted:#6b7280;
  --u-faint:#9aa1ab;

  /* --- акценты --- */
  --u-blue:#2563eb; --u-blue-hover:#1d4ed8;
  --u-blue-bg:#eff4ff; --u-blue-bd:#d7e2fe; --u-blue-fg:#1d4ed8;
  --u-red:#dc2626; --u-red-bg:#fef2f2; --u-red-bd:#fecaca; --u-red-fg:#b91c1c;
  --u-amber:#b45309; --u-amber-bg:#fffbeb; --u-amber-bd:#fde68a;
  --u-green:#047857; --u-green-bg:#ecfdf5; --u-green-bd:#bbf7d0;
  --u-grey-bg:#f7f8fa; --u-grey-bd:#e4e6ea; --u-grey-fg:#4b5563;

  /* --- геометрия --- */
  --u-r-sm:8px; --u-r-md:9px; --u-r-lg:11px;
}

/* =========================================================================
   1. Каркас страницы
   ========================================================================= */

/* minmax(0,1fr), а не просто 1fr: у grid-элементов min-width по умолчанию
   auto, поэтому одна широкая карточка внутри растягивает всю колонку и
   страница уезжает горизонтально на телефоне (поймано на /rentals: 744px
   вместо 390). Это же касается всех сеток ниже. */
.u-page { display:grid; grid-template-columns:minmax(0,1fr); gap:12px;
  color:var(--u-text); font-size:13px; line-height:1.45;
  font-variant-numeric:tabular-nums; }

.u-head { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; padding:2px 2px 0; }
.u-h1 { font-size:22px; font-weight:650; letter-spacing:-.4px; margin:0; }
.u-sub { margin-top:3px; font-size:12.5px; color:var(--u-muted); }
.u-head-actions { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }

.u-grid-main { display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:12px; align-items:start; }
.u-grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start; }
.u-grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; align-items:start; }
.u-grid-4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; align-items:start; }
.u-col { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }

/* =========================================================================
   2. Карточка — базовый контейнер любого блока
   ========================================================================= */

.u-card { border:1px solid var(--u-border); border-radius:var(--u-r-lg);
  background:var(--u-surface); overflow:hidden; }
.u-card-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:13px 16px 11px; border-bottom:1px solid var(--u-border-soft); }
.u-card-title { font-size:15px; font-weight:650; letter-spacing:-.2px; margin:0; }
.u-card-title-sm { font-size:14px; font-weight:650; margin:0; }
.u-card-meta { font-size:12px; color:var(--u-muted); }
.u-card-right { margin-left:auto; }
.u-card-body { padding:14px 16px; }
.u-card-foot { display:flex; align-items:center; gap:12px; padding:10px 16px;
  background:var(--u-subtle); font-size:12px; color:var(--u-muted); }

/* =========================================================================
   3. Кнопки
   ========================================================================= */

.u-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:32px; padding:0 12px; border-radius:var(--u-r-md);
  border:1px solid var(--u-border); background:var(--u-surface);
  color:var(--u-text-2); font-size:12.5px; font-family:inherit;
  cursor:pointer; white-space:nowrap; text-decoration:none; transition:background .12s; }
.u-btn:hover { background:var(--u-grey-bg); }
.u-btn:focus-visible { outline:2px solid var(--u-blue); outline-offset:1px; }
.u-btn[disabled] { opacity:.5; cursor:not-allowed; }

.u-btn--sm { height:28px; padding:0 11px; font-size:12px; border-radius:var(--u-r-sm); }
.u-btn--lg { height:38px; padding:0 16px; font-size:13px; }
.u-btn--icon { width:28px; height:28px; padding:0; border-radius:var(--u-r-sm);
  color:var(--u-text-3); font-size:12px; }
.u-btn--block { width:100%; }

.u-btn--primary { background:var(--u-blue); border-color:var(--u-blue); color:#fff; font-weight:600; }
.u-btn--primary:hover { background:var(--u-blue-hover); border-color:var(--u-blue-hover); }
.u-btn--dark { background:var(--u-text); border-color:var(--u-text); color:#fff; font-weight:600; }
.u-btn--dark:hover { background:#1f2937; }
.u-btn--green { background:var(--u-green-bg); border-color:var(--u-green-bd);
  color:var(--u-green); font-weight:600; }
.u-btn--green:hover { background:#d9fbee; }
.u-btn--danger { background:var(--u-surface); border-color:var(--u-red-bd); color:var(--u-red-fg); }
.u-btn--danger:hover { background:var(--u-red-bg); }

/* =========================================================================
   4. Чипы и тона
   ========================================================================= */

.u-chip { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600;
  padding:1px 7px; border-radius:5px; border:1px solid var(--u-grey-bd);
  background:var(--u-grey-bg); color:var(--u-grey-fg); white-space:nowrap; }
.u-chip--red { background:var(--u-red-bg); border-color:var(--u-red-bd); color:var(--u-red-fg); }
.u-chip--blue { background:var(--u-blue-bg); border-color:var(--u-blue-bd); color:var(--u-blue-fg); }
.u-chip--amber { background:var(--u-amber-bg); border-color:var(--u-amber-bd); color:var(--u-amber); }
.u-chip--green { background:var(--u-green-bg); border-color:var(--u-green-bd); color:var(--u-green); }

.u-tone-red { color:var(--u-red-fg); }
.u-tone-amber { color:var(--u-amber); }
.u-tone-green { color:var(--u-green); }
.u-tone-blue { color:var(--u-blue-fg); }
.u-muted { color:var(--u-muted); }
.u-faint { color:var(--u-faint); }
.u-num { font-variant-numeric:tabular-nums; }
.u-link { color:var(--u-blue); font-size:11.5px; text-decoration:none; }
.u-link:hover { color:var(--u-blue-hover); text-decoration:underline; }
.u-hidden { display:none !important; }
.u-ta-r { text-align:right; }

/* =========================================================================
   5. Табы-фильтры (как в ленте «Требует внимания»)
   ========================================================================= */

.u-tabs { display:flex; gap:4px; padding:9px 12px; background:var(--u-subtle);
  border-bottom:1px solid var(--u-border-soft); overflow-x:auto; }
.u-tab { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px;
  border-radius:var(--u-r-sm); border:1px solid var(--u-border); background:#fff;
  color:var(--u-text-2); font-size:12.5px; font-family:inherit; cursor:pointer;
  white-space:nowrap; text-decoration:none; }
.u-tab:hover { border-color:#c9cfd8; }
.u-tab.is-active { background:var(--u-text); border-color:var(--u-text); color:#fff; font-weight:600; }
.u-tab-n { opacity:.7; font-variant-numeric:tabular-nums; }

/* Сегментированный переключатель (сортировка) */
.u-seg { display:flex; border:1px solid var(--u-border); border-radius:var(--u-r-sm); overflow:hidden; }
.u-seg > * { height:26px; min-width:28px; padding:0 9px; display:inline-flex;
  align-items:center; justify-content:center;
  font-size:11.5px; border:0; border-left:1px solid var(--u-border); background:#fff;
  color:var(--u-text-3); cursor:pointer; font-family:inherit; text-decoration:none; }
.u-seg > *:first-child { border-left:0; }
.u-seg > *.is-active { background:var(--u-text); color:#fff; }

/* =========================================================================
   6. Лента (строка списка с левым акцентом) — основной паттерн списков
   ========================================================================= */

.u-row { display:flex; gap:12px; padding:12px 16px 12px 13px;
  border-bottom:1px solid var(--u-hairline); border-left:3px solid transparent;
  text-decoration:none; color:inherit; }
.u-row:hover { background:var(--u-hover); }
.u-row--red { border-left-color:var(--u-red); background:#fffafa; }
.u-row--red:hover { background:#fff5f5; }
.u-row--amber { border-left-color:var(--u-amber); }
.u-row--blue { border-left-color:var(--u-blue); }
.u-row--green { border-left-color:var(--u-green); }
.u-row--grey { border-left-color:#d7dae0; }

.u-row-icon { width:28px; height:28px; flex:none; border-radius:var(--u-r-sm);
  display:flex; align-items:center; justify-content:center; font-size:13px;
  background:var(--u-grey-bg); border:1px solid var(--u-grey-bd); }
.u-row--red .u-row-icon { background:var(--u-red-bg); border-color:var(--u-red-bd); }
.u-row--blue .u-row-icon { background:var(--u-blue-bg); border-color:var(--u-blue-bd); }
.u-row--green .u-row-icon { background:var(--u-green-bg); border-color:var(--u-green-bd); }

.u-row-avatar { width:36px; height:36px; flex:none; border-radius:50%; object-fit:cover;
  border:1px solid var(--u-border); background:var(--u-grey-bg); display:flex;
  align-items:center; justify-content:center; font-size:15px; color:var(--u-muted); }
.u-row-check { flex:none; align-self:flex-start; margin-top:7px; width:15px; height:15px;
  accent-color:var(--u-blue); cursor:pointer; }
.u-row-body { flex:1; min-width:0; }
.u-row-line1 { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.u-row-title { font-size:13.5px; font-weight:600; color:inherit; text-decoration:none; }
.u-row-title:hover { color:var(--u-blue); }
.u-row-line2 { margin-top:3px; font-size:12.5px; color:var(--u-text-2); }
.u-row-note { margin-top:2px; font-size:12px; color:var(--u-muted); }
.u-row-aside { flex:none; width:150px; text-align:right; font-size:13px; font-weight:600; }
.u-row-aside-sub { display:block; margin-top:2px; font-weight:400; font-size:11.5px; }
.u-row-actions { flex:none; display:flex; align-items:flex-start; gap:6px; }

/* =========================================================================
   7. Таблицы
   ========================================================================= */

.u-table-wrap { overflow-x:auto; }
.u-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.u-table thead th { padding:8px 16px; background:var(--u-subtle); text-align:left;
  border-bottom:1px solid var(--u-border-soft); font-size:11px; font-weight:500;
  color:var(--u-muted); letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; }
.u-table tbody td { padding:10px 16px; border-bottom:1px solid var(--u-hairline);
  vertical-align:middle; }
.u-table tbody tr:hover { background:var(--u-hover); }
.u-table tbody tr:last-child td { border-bottom:0; }
.u-table .u-td-strong { font-weight:600; }
.u-table .u-td-r { text-align:right; }

/* Список «ключ — значение» (карточки-детали, боковые панели) */
.u-kv { margin:0; }
.u-kv > div { display:flex; justify-content:space-between; gap:12px; padding:7px 0;
  border-bottom:1px solid var(--u-hairline); }
.u-kv > div:last-child { border-bottom:0; }
.u-kv dt { font-size:12.5px; color:var(--u-muted); }
.u-kv dd { margin:0; font-size:12.5px; font-weight:600; text-align:right;
  font-variant-numeric:tabular-nums; }

/* =========================================================================
   8. KPI-плитки
   ========================================================================= */

.u-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  border:1px solid var(--u-border); border-radius:var(--u-r-lg);
  background:var(--u-surface); overflow:hidden; }
.u-kpi { padding:14px 16px; border-right:1px solid var(--u-border-soft);
  display:block; text-decoration:none; color:inherit; }
.u-kpi:last-child { border-right:0; }
.u-kpi:hover { background:var(--u-hover); }
.u-kpi-label { font-size:11.5px; color:var(--u-muted); }
.u-kpi-value { font-size:26px; font-weight:640; letter-spacing:-.6px; margin-top:5px;
  font-variant-numeric:tabular-nums; }
.u-kpi-hint { margin-top:4px; font-size:11.5px; color:var(--u-faint); }

/* =========================================================================
   9. Пустые состояния и баннеры
   ========================================================================= */

.u-empty { padding:34px 20px; text-align:center; }
.u-empty-icon { width:40px; height:40px; margin:0 auto; border-radius:var(--u-r-lg);
  font-size:17px; background:var(--u-green-bg); border:1px solid var(--u-green-bd);
  display:flex; align-items:center; justify-content:center; }
.u-empty-t { margin-top:11px; font-size:14px; font-weight:600; }
.u-empty-n { margin-top:4px; font-size:12.5px; color:var(--u-muted); }
.u-empty-btns { display:flex; gap:8px; justify-content:center; margin-top:14px; flex-wrap:wrap; }
.u-empty--sm { padding:24px 18px; text-align:center; }

.u-note { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:11px 14px;
  border:1px solid var(--u-border-soft); background:var(--u-grey-bg);
  border-radius:var(--u-r-md); font-size:12.5px; color:var(--u-text-3); }
.u-note--red { border-color:var(--u-red-bd); background:var(--u-red-bg); color:#7f1d1d; }
.u-note--amber { border-color:var(--u-amber-bd); background:var(--u-amber-bg); color:#92400e; }
.u-note--green { border-color:var(--u-green-bd); background:var(--u-green-bg); color:var(--u-green); }
.u-note-t { font-weight:600; }

/* =========================================================================
   10. Формы
   ========================================================================= */

.u-form { display:grid; gap:12px; }
.u-field { display:grid; gap:4px; }
.u-label { font-size:11.5px; color:var(--u-muted); }
.u-label .u-req { color:var(--u-red); }
.u-input, .u-select, .u-textarea {
  width:100%; min-height:36px; padding:8px 11px; border-radius:var(--u-r-md);
  border:1px solid var(--u-border); background:#fff; color:var(--u-text);
  font-size:13px; font-family:inherit; }
.u-input:focus, .u-select:focus, .u-textarea:focus {
  outline:0; border-color:var(--u-blue); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.u-textarea { min-height:76px; resize:vertical; }
.u-hint { font-size:11px; color:var(--u-faint); }

/* Радио-плитки (уровень бензина, число шлемов, состояние при возврате).
   Без Tailwind-овского peer-checked: сам input скрыт, подсвечивается соседняя
   плитка — так же работает с клавиатуры, потому что фокус остаётся на input. */
.u-choices { display:grid; gap:6px; }
.u-choice { cursor:pointer; position:relative; }
.u-choice input { position:absolute; opacity:0; width:0; height:0; }
.u-choice-box { display:flex; align-items:center; justify-content:center; gap:4px;
  height:38px; padding:0 8px; border:1px solid var(--u-border); border-radius:var(--u-r-md);
  background:#fff; font-size:13px; font-weight:600; color:var(--u-text-2); text-align:center; }
.u-choice:hover .u-choice-box { background:var(--u-grey-bg); }
.u-choice input:checked + .u-choice-box { background:var(--u-text); border-color:var(--u-text); color:#fff; }
.u-choice input:focus-visible + .u-choice-box { outline:2px solid var(--u-blue); outline-offset:1px; }

/* Загрузка файлов — единый вид у нативной кнопки браузера */
.u-file { display:block; width:100%; font-size:12.5px; color:var(--u-text-2); }
.u-file::file-selector-button { margin-right:10px; padding:7px 11px; border-radius:var(--u-r-sm);
  border:1px solid var(--u-border); background:var(--u-grey-bg); color:var(--u-text-2);
  font-size:12.5px; font-family:inherit; cursor:pointer; }
.u-file::file-selector-button:hover { background:var(--u-border-soft); }
.u-form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.u-form-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }

/* =========================================================================
   11. Боковая панель (карточки-детали) и тост
   ========================================================================= */

.u-drawer { position:fixed; inset:0; background:rgba(17,24,39,.28);
  display:flex; justify-content:flex-end; z-index:60; }
.u-drawer.u-hidden { display:none; }
.u-drawer-panel { width:460px; max-width:100%; height:100%; background:#fff;
  border-left:1px solid var(--u-border); overflow:auto; display:flex; flex-direction:column;
  font-size:13px; color:var(--u-text); font-variant-numeric:tabular-nums; }
.u-drawer-head { display:flex; align-items:center; gap:10px; padding:16px 18px;
  border-bottom:1px solid var(--u-border-soft); }
.u-drawer-title { font-size:16px; font-weight:650; }
.u-drawer-body { padding:16px 18px; }
.u-drawer-cap { margin-top:18px; font-size:11px; color:var(--u-faint); letter-spacing:.06em; }
.u-drawer-cap:first-child { margin-top:0; }

.u-toast { position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:70;
  display:flex; align-items:center; gap:10px; padding:11px 15px; border-radius:var(--u-r-md);
  background:var(--u-text); color:#fff; font-size:12.5px;
  box-shadow:0 8px 24px rgba(16,24,40,.22); }
.u-toast.u-hidden { display:none; }
.u-toast-ok { color:#6ee7b7; }

/* =========================================================================
   12. Шапка сайта (base.html)
   ========================================================================= */

.u-topbar { background:var(--u-surface); border-bottom:1px solid var(--u-border-soft); }
.u-topbar-inner { display:flex; align-items:center; gap:16px; height:56px; padding:0 16px;
  max-width:1440px; margin:0 auto; }
.u-brand { display:flex; align-items:center; gap:9px; font-size:16px; font-weight:600;
  letter-spacing:-.2px; color:inherit; text-decoration:none; flex:none; }
.u-brand-mark { width:26px; height:26px; border-radius:7px; background:var(--u-blue-bg);
  border:1px solid var(--u-blue-bd); display:flex; align-items:center;
  justify-content:center; font-size:14px; }
.u-search { width:100%; max-width:420px; height:36px; padding:0 12px;
  border-radius:var(--u-r-md); border:1px solid var(--u-border); background:var(--u-grey-bg);
  font-size:13px; font-family:inherit; color:var(--u-text); }
.u-search::placeholder { color:var(--u-faint); }
.u-search:focus { outline:0; background:#fff; border-color:#c9cfd8;
  box-shadow:0 0 0 3px rgba(37,99,235,.10); }
.u-topbar-actions { margin-left:auto; display:flex; align-items:center; gap:10px; flex:none; }
.u-avatar { width:28px; height:28px; border-radius:50%; border:1px solid var(--u-border); }
.u-email { font-size:12px; color:var(--u-text-3); max-width:180px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }

.u-nav { display:flex; justify-content:center; gap:4px; padding:10px 16px;
  border-bottom:1px solid var(--u-border-soft); background:var(--u-subtle); flex-wrap:wrap; }
.u-nav-item { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 14px;
  border-radius:var(--u-r-sm); font-size:13px; color:var(--u-text-2);
  text-decoration:none; white-space:nowrap; border:0; background:none;
  font-family:inherit; cursor:pointer; }
.u-nav-item:hover { background:var(--u-border-soft); }
.u-nav-item.is-active { background:var(--u-text); color:#fff; font-weight:600; }
.u-nav-drop { position:absolute; left:0; top:100%; margin-top:4px; min-width:200px;
  background:#fff; border:1px solid var(--u-border); border-radius:var(--u-r-md);
  box-shadow:0 8px 24px rgba(16,24,40,.14); z-index:40; padding:5px; }
.u-nav-drop a { display:flex; align-items:center; gap:8px; padding:7px 9px;
  border-radius:6px; font-size:12.5px; color:var(--u-text-2);
  text-decoration:none; white-space:nowrap; }
.u-nav-drop a:hover { background:var(--u-grey-bg); }
.u-nav-drop a.is-active { background:var(--u-blue-bg); color:var(--u-blue-fg); font-weight:600; }

/* =========================================================================
   13. Адаптив
   ========================================================================= */

@media (max-width:1280px) {
  .u-grid-main { grid-template-columns:minmax(0,1fr); }
  .u-grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:860px) {
  .u-grid-2, .u-grid-3, .u-grid-4 { grid-template-columns:minmax(0,1fr); }
  .u-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .u-head-actions { width:100%; margin-left:0; }
  .u-form-row { grid-template-columns:1fr; }
  .u-kpi { border-right:0; border-bottom:1px solid var(--u-border-soft); }
  /* Строка ленты становится карточкой: действие во всю ширину под текстом */
  .u-row { flex-wrap:wrap; }
  .u-row-aside { width:auto; margin-left:auto; }
  .u-row-actions { width:100%; }
  .u-row-actions .u-btn--primary { flex:1; }
  .u-drawer-panel { width:100%; }
}