/* ============================================================================
   ui-kit.css — Компоненты «Кабинет бригадира»
   Требует tokens.css (подключать ПЕРЕД этим файлом).

   Соглашения:
     • Префикс всех классов — uk-
     • Модификаторы через --  (uk-btn--primary)
     • Никаких захардкоженных цветов/радиусов/теней — только var(--uk-*)
     • Мобайл-фёрст. Брейкпоинт 640px (десктопные усложнения — в @media min-width).

   Оглавление:
     0. Reset / базовый слой
     1. Утилиты
     2. Топбар
     3. Кнопки
     4. Поля формы
     5. Бейджи (статус / срочность)
     6. Карточки (хаб / заявка / позиция / день)
     7. Таблица позиций + мобильная трансформация
     8. Чипы-фильтры
     9. Вкладки
    10. Модальное окно
    11. Календарь транспорта
    12. Липкая панель отправки
    13. Флеш / тост / пустое состояние / скелетон
    14. Экран входа
   ========================================================================== */

/* ==========================================================================
   0. RESET / БАЗОВЫЙ СЛОЙ
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.uk-body {
  margin: 0;
  background: var(--uk-bg);
  color: var(--uk-text);
  font-family: var(--uk-font-sans);
  font-size: var(--uk-fs-15);
  line-height: var(--uk-lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;                 /* страница не скроллится вбок */
}

.uk-body h1, .uk-body h2, .uk-body h3, .uk-body h4 {
  margin: 0;
  line-height: var(--uk-lh-tight);
  letter-spacing: var(--uk-track-tight);
  font-weight: var(--uk-fw-semibold);
  color: var(--uk-text);
}
.uk-body h1 { font-size: var(--uk-fs-28); }
.uk-body h2 { font-size: var(--uk-fs-22); }
.uk-body h3 { font-size: var(--uk-fs-18); }
.uk-body p  { margin: 0; }

.uk-body a { color: var(--uk-accent-text); text-decoration: none; }
.uk-body a:hover { color: var(--uk-accent); text-decoration: underline; }

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Числа/даты/номера — моноширинные цифры */
.uk-tnum, .uk-body time, .uk-body .uk-num { font-variant-numeric: tabular-nums; }

/* Единое кольцо фокуса */
:where(.uk-body) :focus-visible {
  outline: none;
  box-shadow: var(--uk-focus-ring);
  border-radius: var(--uk-radius-sm);
}

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

/* ==========================================================================
   1. УТИЛИТЫ (минимальный набор для витрины/демо)
   ========================================================================== */
.uk-container { max-width: var(--uk-container); margin-inline: auto; padding-inline: var(--uk-space-4); }
.uk-stack    { display: flex; flex-direction: column; gap: var(--uk-space-4); }
.uk-row      { display: flex; flex-wrap: wrap; gap: var(--uk-space-3); align-items: center; }
.uk-grow     { flex: 1 1 auto; min-width: 0; }
.uk-muted-tx { color: var(--uk-text-2); }
.uk-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.uk-divider { height: 1px; background: var(--uk-border); border: 0; margin: var(--uk-space-4) 0; }
.uk-label-tag {
  font-family: var(--uk-font-mono); font-size: var(--uk-fs-11);
  color: var(--uk-text-3); background: var(--uk-surface-2);
  border: 1px solid var(--uk-border); border-radius: var(--uk-radius-sm);
  padding: 2px 6px;
}

/* ==========================================================================
   2. ТОПБАР
   ========================================================================== */
.uk-topbar {
  position: sticky; top: 0; z-index: var(--uk-z-sticky);
  display: flex; align-items: center; gap: var(--uk-space-3);
  min-height: 50px; padding: var(--uk-space-2) var(--uk-space-4);
  background: var(--uk-surface);
  border-bottom: 1px solid var(--uk-border);
  box-shadow: var(--uk-shadow-1);
}
.uk-topbar__brand {
  display: flex; align-items: center; gap: var(--uk-space-2);
  font-weight: var(--uk-fw-bold); letter-spacing: var(--uk-track-tight);
  font-size: var(--uk-fs-16);
}
.uk-topbar__logo {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: var(--uk-radius-sm);
  background: var(--uk-accent); color: var(--uk-text-on-accent);
  flex: none;
}
.uk-topbar__logo svg { width: 18px; height: 18px; }
.uk-topbar__title { line-height: 1.1; }
.uk-topbar__sub { display: block; font-size: var(--uk-fs-11); font-weight: var(--uk-fw-regular); color: var(--uk-text-3); }
.uk-topbar__spacer { flex: 1 1 auto; }

/* Иконочная кнопка (назад / переключатель темы) */
.uk-iconbtn {
  display: inline-grid; place-items: center;
  width: var(--uk-tap-min); height: var(--uk-tap-min);
  border: 1px solid var(--uk-border); border-radius: var(--uk-radius);
  background: var(--uk-surface); color: var(--uk-text);
  cursor: pointer; transition: background var(--uk-dur) var(--uk-ease), border-color var(--uk-dur) var(--uk-ease);
}
.uk-iconbtn:hover { background: var(--uk-surface-hover); border-color: var(--uk-border-strong); }
.uk-iconbtn:active { background: var(--uk-surface-sunken); }
.uk-iconbtn svg { width: 20px; height: 20px; }

/* Переключатель темы: показывает нужную иконку под текущую тему */
.uk-theme-toggle .uk-ico-sun  { display: none; }
.uk-theme-toggle .uk-ico-moon { display: block; }
[data-theme="dark"] .uk-theme-toggle .uk-ico-sun  { display: block; }
[data-theme="dark"] .uk-theme-toggle .uk-ico-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .uk-theme-toggle .uk-ico-sun  { display: block; }
  :root:not([data-theme]) .uk-theme-toggle .uk-ico-moon { display: none; }
}

/* ==========================================================================
   3. КНОПКИ
   ========================================================================== */
.uk-btn {
  --_btn-h: var(--uk-tap-min);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--uk-space-2);
  min-height: var(--_btn-h); min-width: var(--_btn-h);
  padding: 0 var(--uk-space-5);
  font-size: var(--uk-fs-14); font-weight: var(--uk-fw-semibold);
  line-height: 1; letter-spacing: var(--uk-track-tight);
  border: 1px solid transparent; border-radius: var(--uk-radius);
  background: var(--uk-surface); color: var(--uk-text);
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background var(--uk-dur) var(--uk-ease),
              border-color var(--uk-dur) var(--uk-ease),
              color var(--uk-dur) var(--uk-ease),
              box-shadow var(--uk-dur) var(--uk-ease),
              transform var(--uk-dur-fast) var(--uk-ease);
}
.uk-btn:active { transform: translateY(1px); }
.uk-btn svg { width: 18px; height: 18px; flex: none; }
.uk-btn[disabled], .uk-btn.is-disabled {
  cursor: not-allowed; opacity: .5; pointer-events: none; box-shadow: none;
}

/* Размеры */
.uk-btn--l { --_btn-h: 48px; padding-inline: var(--uk-space-6); font-size: var(--uk-fs-15); }
.uk-btn--block { display: flex; width: 100%; }

/* Варианты */
.uk-btn--primary {
  background: var(--uk-accent); color: var(--uk-text-on-accent);
  box-shadow: var(--uk-shadow-1);
}
.uk-btn--primary:hover  { background: var(--uk-accent-hover); }
.uk-btn--primary:active { background: var(--uk-accent-active); }

.uk-btn--secondary {
  background: var(--uk-surface); color: var(--uk-text);
  border-color: var(--uk-border-strong);
}
.uk-btn--secondary:hover  { background: var(--uk-surface-hover); border-color: var(--uk-text-3); }
.uk-btn--secondary:active { background: var(--uk-surface-sunken); }

.uk-btn--ghost {
  background: transparent; color: var(--uk-text-2); border-color: transparent;
}
.uk-btn--ghost:hover  { background: var(--uk-surface-hover); color: var(--uk-text); }
.uk-btn--ghost:active { background: var(--uk-surface-sunken); }

.uk-btn--danger {
  background: var(--uk-danger); color: #fff; box-shadow: var(--uk-shadow-1);
}
.uk-btn--danger:hover  { background: var(--uk-danger-hover); }
.uk-btn--danger:active { filter: brightness(.94); }

/* Loading */
.uk-btn.is-loading { color: transparent !important; pointer-events: none; position: relative; }
.uk-btn.is-loading::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: uk-spin .7s linear infinite;
  color: var(--uk-text-on-accent);
}
.uk-btn--secondary.is-loading::after,
.uk-btn--ghost.is-loading::after { color: var(--uk-text-2); }
@keyframes uk-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   4. ПОЛЯ ФОРМЫ
   ========================================================================== */
.uk-field { display: flex; flex-direction: column; gap: var(--uk-space-2); }
.uk-label {
  font-size: var(--uk-fs-13); font-weight: var(--uk-fw-semibold);
  color: var(--uk-text-2);
}
.uk-label__req { color: var(--uk-required); margin-left: 2px; font-weight: var(--uk-fw-bold); }
.uk-hint { font-size: var(--uk-fs-12); color: var(--uk-text-3); }

.uk-input, .uk-select, .uk-textarea {
  width: 100%;
  min-height: var(--uk-tap-min);
  padding: 8px var(--uk-space-3);
  font-size: var(--uk-fs-16);           /* 16px — iOS не зумит */
  color: var(--uk-text);
  background: var(--uk-surface);
  border: 1px solid var(--uk-border-strong);
  border-radius: var(--uk-radius);
  transition: border-color var(--uk-dur) var(--uk-ease), box-shadow var(--uk-dur) var(--uk-ease);
  appearance: none; -webkit-appearance: none;
}
.uk-textarea { min-height: 72px; resize: vertical; line-height: var(--uk-lh-snug); }
.uk-input::placeholder, .uk-textarea::placeholder { color: var(--uk-text-3); }

.uk-input:hover, .uk-select:hover, .uk-textarea:hover { border-color: var(--uk-text-3); }
.uk-input:focus-visible, .uk-select:focus-visible, .uk-textarea:focus-visible {
  border-color: var(--uk-accent); box-shadow: var(--uk-focus-ring); outline: none;
}
.uk-input[disabled], .uk-select[disabled], .uk-textarea[disabled] {
  background: var(--uk-surface-sunken); color: var(--uk-text-3);
  cursor: not-allowed; border-color: var(--uk-border);
}

/* Select со стрелкой (инлайн-SVG data-uri в нейтральном цвете обеих тем через currentColor нельзя;
   используем фон из токенов + треугольник на псевдоэлементе-обёртке) */
.uk-select-wrap { position: relative; }
.uk-select { padding-right: var(--uk-space-8); }
.uk-select-wrap::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--uk-text-3); border-bottom: 2px solid var(--uk-text-3);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}

/* Числовое поле (кол-во) — компактное, моноцифры */
.uk-input--num { max-width: 110px; font-variant-numeric: tabular-nums; text-align: right; }

/* Readonly / «подставлено из профиля» — пунктирная рамка */
.uk-input--readonly, .uk-field--readonly .uk-input {
  border-style: dashed; border-color: var(--uk-border-dashed);
  background: var(--uk-surface-2); color: var(--uk-text-2);
}
.uk-readonly-note { display: inline-flex; align-items: center; gap: 4px; }
.uk-readonly-note svg { width: 13px; height: 13px; }

/* Ошибка */
.uk-field--error .uk-input,
.uk-field--error .uk-select,
.uk-field--error .uk-textarea,
.uk-input--error {
  border-color: var(--uk-danger);
  box-shadow: 0 0 0 1px var(--uk-danger);
}
.uk-field--error .uk-input:focus-visible,
.uk-input--error:focus-visible {
  box-shadow: 0 0 0 var(--uk-focus-width) var(--uk-danger-bg);
}
.uk-error-text {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--uk-fs-12); color: var(--uk-danger-text); font-weight: var(--uk-fw-medium);
}
.uk-error-text svg { width: 14px; height: 14px; flex: none; }

/* Чекбокс */
.uk-check {
  display: inline-flex; align-items: center; gap: var(--uk-space-2);
  min-height: var(--uk-tap-min); cursor: pointer; user-select: none;
  font-size: var(--uk-fs-14);
}
.uk-check__box {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  border: 2px solid var(--uk-border-strong); border-radius: var(--uk-radius-sm);
  background: var(--uk-surface);
  transition: background var(--uk-dur) var(--uk-ease), border-color var(--uk-dur) var(--uk-ease);
}
.uk-check__box svg { width: 14px; height: 14px; color: #fff; opacity: 0; transform: scale(.6); transition: opacity var(--uk-dur), transform var(--uk-dur); }
.uk-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.uk-check input:checked + .uk-check__box { background: var(--uk-accent); border-color: var(--uk-accent); }
.uk-check input:checked + .uk-check__box svg { opacity: 1; transform: scale(1); }
.uk-check input:focus-visible + .uk-check__box { box-shadow: var(--uk-focus-ring); }
.uk-check input:disabled + .uk-check__box { opacity: .5; }
.uk-check input:disabled ~ .uk-check__label { color: var(--uk-text-3); }

/* ==========================================================================
   5. БЕЙДЖИ
   ========================================================================== */
.uk-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--uk-radius-pill);
  font-size: var(--uk-fs-12); font-weight: var(--uk-fw-semibold);
  line-height: 1.4; white-space: nowrap;
  border: 1px solid transparent;
}
.uk-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* Цветовые семейства (используются и статусами, и срочностью) */
.uk-badge--muted   { background: var(--uk-muted-bg);   color: var(--uk-muted-text);   border-color: var(--uk-muted-border); }
.uk-badge--process { background: var(--uk-process-bg); color: var(--uk-process-text); border-color: var(--uk-process-border); }
.uk-badge--success { background: var(--uk-success-bg); color: var(--uk-success-text); border-color: var(--uk-success-border); }
.uk-badge--warn    { background: var(--uk-warn-bg);    color: var(--uk-warn-text);    border-color: var(--uk-warn-border); }
.uk-badge--danger  { background: var(--uk-danger-bg);  color: var(--uk-danger-text);  border-color: var(--uk-danger-border); }
.uk-badge--accent  { background: var(--uk-accent-soft);color: var(--uk-accent-text);  border-color: var(--uk-accent); }

/* Срочность-«таблетка» с заливкой (для суперсрочной — яркая) */
.uk-badge--solid-danger { background: var(--uk-danger); color: #fff; border-color: transparent; }
.uk-badge--solid-warn   { background: var(--uk-warn);   color: #fff; border-color: transparent; }

/* ==========================================================================
   6. КАРТОЧКИ
   ========================================================================== */
.uk-card {
  background: var(--uk-surface);
  border: 1px solid var(--uk-border);
  border-radius: var(--uk-radius-lg);
  box-shadow: var(--uk-shadow-1);
}
.uk-card__body { padding: var(--uk-space-4); }
.uk-card__head {
  display: flex; align-items: flex-start; gap: var(--uk-space-3);
  padding: var(--uk-space-4); border-bottom: 1px solid var(--uk-border);
}
.uk-card__foot {
  padding: var(--uk-space-3) var(--uk-space-4);
  border-top: 1px solid var(--uk-border);
  background: var(--uk-surface-2);
  border-radius: 0 0 var(--uk-radius-lg) var(--uk-radius-lg);
}

/* --- 6a. Карточка-раздел хаба ---------------------------------------- */
.uk-hub-grid {
  display: grid; gap: var(--uk-space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .uk-hub-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--uk-space-4); } }

.uk-hub-tile {
  display: flex; flex-direction: column; gap: var(--uk-space-2);
  min-height: 108px; padding: var(--uk-space-4);
  text-align: left; text-decoration: none;
  background: var(--uk-surface); color: var(--uk-text);
  border: 1px solid var(--uk-border); border-radius: var(--uk-radius-lg);
  box-shadow: var(--uk-shadow-1); cursor: pointer;
  transition: transform var(--uk-dur) var(--uk-ease), box-shadow var(--uk-dur) var(--uk-ease), border-color var(--uk-dur) var(--uk-ease);
}
.uk-hub-tile:hover { transform: translateY(-2px); box-shadow: var(--uk-shadow-2); border-color: var(--uk-border-strong); text-decoration: none; }
.uk-hub-tile:active { transform: translateY(0); }
.uk-hub-tile__icon {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--uk-radius); background: var(--uk-accent-soft); color: var(--uk-accent-text);
}
.uk-hub-tile__icon svg { width: 23px; height: 23px; }
.uk-hub-tile__title { font-size: var(--uk-fs-16); font-weight: var(--uk-fw-semibold); letter-spacing: var(--uk-track-tight); }
.uk-hub-tile__desc  { font-size: var(--uk-fs-13); color: var(--uk-text-2); margin-top: -4px; }
.uk-hub-tile__arrow { margin-top: auto; margin-left: auto; color: var(--uk-text-3); }

/* --- 6b. Карточка заявки (свёрнутая / развёрнутая) ------------------- */
.uk-req { overflow: hidden; }
.uk-req__summary {
  display: flex; align-items: center; gap: var(--uk-space-3);
  width: 100%; padding: var(--uk-space-4); cursor: pointer;
  background: var(--uk-surface); border: 0; text-align: left;
  transition: background var(--uk-dur) var(--uk-ease);
}
.uk-req__summary:hover { background: var(--uk-surface-hover); }
.uk-req__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.uk-req__no { font-family: var(--uk-font-mono); font-size: var(--uk-fs-13); color: var(--uk-text-3); font-variant-numeric: tabular-nums; }
.uk-req__title { font-weight: var(--uk-fw-semibold); font-size: var(--uk-fs-15); }
.uk-req__meta { display: flex; flex-wrap: wrap; gap: var(--uk-space-2); align-items: center; margin-top: 2px; }
.uk-req__chev { flex: none; color: var(--uk-text-3); transition: transform var(--uk-dur) var(--uk-ease); }
.uk-req.is-open .uk-req__chev { transform: rotate(180deg); }
.uk-req__body { display: none; padding: 0 var(--uk-space-4) var(--uk-space-4); border-top: 1px solid var(--uk-border); }
.uk-req.is-open .uk-req__body { display: block; }
.uk-req__group { padding-top: var(--uk-space-4); }
.uk-req__group-head {
  display: flex; align-items: center; gap: var(--uk-space-2);
  font-size: var(--uk-fs-13); font-weight: var(--uk-fw-semibold); color: var(--uk-text-2);
  margin-bottom: var(--uk-space-2);
}
.uk-req__group-head time { font-variant-numeric: tabular-nums; }

/* --- 6c. Карточка позиции (мобильный вид таблицы, см. §7) ------------ */
/* базовые стили карточки позиции живут в §7 (.uk-postable) */

/* --- 6d. Карточка дня (лента календаря на мобильном) ---------------- */
.uk-day-card {
  display: flex; align-items: center; gap: var(--uk-space-4);
  padding: var(--uk-space-3) var(--uk-space-4);
  background: var(--uk-surface); border: 1px solid var(--uk-border);
  border-radius: var(--uk-radius-lg); box-shadow: var(--uk-shadow-1);
  cursor: pointer; text-align: left; width: 100%;
  transition: border-color var(--uk-dur) var(--uk-ease), background var(--uk-dur) var(--uk-ease);
}
.uk-day-card:hover { border-color: var(--uk-border-strong); background: var(--uk-surface-hover); }
/* Дата-бейдж слева */
.uk-day-card__badge {
  flex: none; width: 44px; display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.uk-day-card__dow { font-size: var(--uk-fs-12); color: var(--uk-text-2); text-transform: lowercase; }
.uk-day-card__num {
  font-size: var(--uk-fs-22); font-weight: var(--uk-fw-bold); line-height: 1.05;
  font-variant-numeric: tabular-nums; color: var(--uk-text);
}
.uk-day-card__mon { font-size: var(--uk-fs-11); color: var(--uk-text-3); text-transform: lowercase; }
.uk-day-card.is-today .uk-day-card__num {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--uk-accent); color: var(--uk-text-on-accent);
}
.uk-day-card__content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--uk-space-2); }
.uk-day-card__summary { font-size: var(--uk-fs-13); color: var(--uk-text-2); }
.uk-day-card__summary b { color: var(--uk-text); font-variant-numeric: tabular-nums; }

/* Полоса занятости дня 8:00–20:00 (с почасовой разметкой) */
.uk-busybar {
  position: relative; height: 26px; border-radius: var(--uk-radius-sm);
  background: var(--uk-surface); border: 1px solid var(--uk-border); overflow: hidden;
  /* вертикальные засечки по часам (12 интервалов: 8:00–20:00) */
  background-image: repeating-linear-gradient(90deg,
    transparent 0, transparent calc(100% / 12 - 1px),
    var(--uk-border) calc(100% / 12 - 1px), var(--uk-border) calc(100% / 12));
}
.uk-busybar__seg { position: absolute; top: 2px; bottom: 2px; border-radius: 2px; }
/* Занято (обезличенно) — янтарная штриховка, как в референсе */
.uk-busybar__seg--busy,
.uk-busybar__seg--other {
  background: repeating-linear-gradient(45deg,
    var(--uk-warn) 0 4px, var(--uk-warn-bg) 4px 9px);
}
/* Своя бронь — сплошной акцент */
.uk-busybar__seg--mine { background: var(--uk-accent); }
.uk-busybar__scale {
  display: flex; justify-content: space-between;
  font-size: var(--uk-fs-11); color: var(--uk-text-3);
  font-variant-numeric: tabular-nums; margin-top: 4px;
}

/* ==========================================================================
   7. ТАБЛИЦА ПОЗИЦИЙ + МОБИЛЬНАЯ ТРАНСФОРМАЦИЯ
   ========================================================================== */
.uk-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--uk-radius-lg); }
.uk-table {
  width: 100%; border-collapse: collapse; font-size: var(--uk-fs-14);
  background: var(--uk-surface);
}
.uk-table thead th {
  position: sticky; top: 0;
  text-align: left; font-weight: var(--uk-fw-semibold); font-size: var(--uk-fs-12);
  color: var(--uk-text-2); text-transform: uppercase; letter-spacing: .02em;
  background: var(--uk-surface-2); padding: var(--uk-space-3);
  border-bottom: 1px solid var(--uk-border); white-space: nowrap;
}
.uk-table tbody td {
  padding: var(--uk-space-3); border-bottom: 1px solid var(--uk-border);
  vertical-align: middle;
}
.uk-table tbody tr:last-child td { border-bottom: 0; }
.uk-table tbody tr:hover { background: var(--uk-surface-hover); }
.uk-table .uk-td-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.uk-table .uk-td-center { text-align: center; }

/* Мобильная трансформация: строки → карточки через data-label */
@media (max-width: 640px) {
  .uk-table--cards, .uk-table--cards thead, .uk-table--cards tbody,
  .uk-table--cards tr, .uk-table--cards td { display: block; width: 100%; }
  .uk-table--cards thead { position: absolute; left: -9999px; }   /* прячем заголовки */
  .uk-table--cards tr {
    margin-bottom: var(--uk-space-3); padding: var(--uk-space-3);
    background: var(--uk-surface); border: 1px solid var(--uk-border);
    border-radius: var(--uk-radius); box-shadow: var(--uk-shadow-1);
  }
  .uk-table--cards td {
    display: flex; justify-content: space-between; align-items: center; gap: var(--uk-space-3);
    padding: 7px 0; border: 0; text-align: right;
  }
  .uk-table--cards td::before {
    content: attr(data-label);
    flex: none; text-align: left; color: var(--uk-text-2);
    font-size: var(--uk-fs-12); font-weight: var(--uk-fw-semibold);
  }
  .uk-table--cards td.uk-td-num { text-align: right; }
}

/* ==========================================================================
   8. ЧИПЫ-ФИЛЬТРЫ
   ========================================================================== */
.uk-chips { display: flex; gap: var(--uk-space-2); overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.uk-chips::-webkit-scrollbar { display: none; }
.uk-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 36px; padding: 0 var(--uk-space-3);
  font-size: var(--uk-fs-13); font-weight: var(--uk-fw-medium);
  color: var(--uk-text-2); background: var(--uk-surface);
  border: 1px solid var(--uk-border-strong); border-radius: var(--uk-radius-pill);
  cursor: pointer; white-space: nowrap;
  transition: background var(--uk-dur) var(--uk-ease), color var(--uk-dur) var(--uk-ease), border-color var(--uk-dur) var(--uk-ease);
}
.uk-chip:hover { background: var(--uk-surface-hover); color: var(--uk-text); }
.uk-chip__swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--uk-muted); flex: none; }
.uk-chip.is-active {
  background: var(--uk-accent-soft); color: var(--uk-accent-text);
  border-color: var(--uk-accent);
}
.uk-chip[aria-pressed="true"] { background: var(--uk-accent-soft); color: var(--uk-accent-text); border-color: var(--uk-accent); }

/* ==========================================================================
   9. ВКЛАДКИ
   ========================================================================== */
.uk-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--uk-border); overflow-x: auto; scrollbar-width: none; }
.uk-tabs::-webkit-scrollbar { display: none; }
.uk-tab {
  flex: none; min-height: 44px; padding: 0 var(--uk-space-4);
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--uk-fs-14); font-weight: var(--uk-fw-medium);
  color: var(--uk-text-2); background: transparent; border: 0;
  border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
  transition: color var(--uk-dur) var(--uk-ease), border-color var(--uk-dur) var(--uk-ease);
}
.uk-tab:hover { color: var(--uk-text); }
.uk-tab.is-active, .uk-tab[aria-selected="true"] {
  color: var(--uk-accent-text); border-bottom-color: var(--uk-accent); font-weight: var(--uk-fw-semibold);
}
.uk-tab__count {
  font-size: var(--uk-fs-11); font-variant-numeric: tabular-nums;
  background: var(--uk-surface-sunken); color: var(--uk-text-2);
  border-radius: var(--uk-radius-pill); padding: 1px 7px;
}

/* ==========================================================================
   10. МОДАЛЬНОЕ ОКНО
   ========================================================================== */
.uk-modal-backdrop {
  position: fixed; inset: 0; z-index: var(--uk-z-overlay);
  background: var(--uk-overlay);
  display: flex; align-items: center; justify-content: center;
  padding: var(--uk-space-4);
  animation: uk-fade var(--uk-dur) var(--uk-ease);
}
.uk-modal {
  position: relative; z-index: var(--uk-z-modal);
  width: 100%; max-width: 520px; max-height: calc(100dvh - 2 * var(--uk-space-6));
  display: flex; flex-direction: column;
  background: var(--uk-surface); border: 1px solid var(--uk-border);
  border-radius: var(--uk-radius-lg); box-shadow: var(--uk-shadow-3);
  animation: uk-pop var(--uk-dur-slow) var(--uk-ease);
}
.uk-modal__head {
  display: flex; align-items: center; gap: var(--uk-space-3);
  padding: var(--uk-space-4); border-bottom: 1px solid var(--uk-border);
}
.uk-modal__title { flex: 1 1 auto; font-size: var(--uk-fs-18); font-weight: var(--uk-fw-semibold); }
.uk-modal__body { padding: var(--uk-space-4); overflow-y: auto; }
.uk-modal__foot {
  display: flex; gap: var(--uk-space-3); justify-content: flex-end;
  padding: var(--uk-space-4); border-top: 1px solid var(--uk-border);
  background: var(--uk-surface-2); border-radius: 0 0 var(--uk-radius-lg) var(--uk-radius-lg);
}
@keyframes uk-fade { from { opacity: 0; } }
@keyframes uk-pop  { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes uk-slide-up { from { transform: translateY(100%); } }

/* Мобильный: модалка снизу на всю ширину (bottom sheet) */
@media (max-width: 640px) {
  .uk-modal-backdrop { align-items: flex-end; padding: 0; }
  .uk-modal {
    max-width: 100%; max-height: 92dvh;
    border-radius: var(--uk-radius-lg) var(--uk-radius-lg) 0 0;
    animation: uk-slide-up var(--uk-dur-slow) var(--uk-ease);
  }
  .uk-modal__foot { position: sticky; bottom: 0; }
  .uk-modal__foot .uk-btn { flex: 1 1 auto; }
}

/* ==========================================================================
   11. КАЛЕНДАРЬ ТРАНСПОРТА
   ========================================================================== */
.uk-cal {
  --uk-cal-hour-h: 56px;         /* высота одного часа */
  --uk-cal-time-w: 52px;         /* ширина колонки времени */
  position: relative;
  background: var(--uk-surface); border: 1px solid var(--uk-border);
  border-radius: var(--uk-radius-lg); overflow: hidden;
}
.uk-cal__scroll { overflow: auto; -webkit-overflow-scrolling: touch; max-height: 70vh; }
.uk-cal__grid {
  display: grid;
  grid-template-columns: var(--uk-cal-time-w) repeat(7, minmax(96px, 1fr));
  min-width: 720px;                 /* десктоп-раскладка; на мобиле — режим ленты */
}
/* Шапка дней (sticky сверху) */
.uk-cal__corner, .uk-cal__dayhead {
  position: sticky; top: 0; z-index: 3;
  background: var(--uk-surface-2); border-bottom: 1px solid var(--uk-cal-grid);
  padding: var(--uk-space-2); text-align: center;
}
.uk-cal__corner { left: 0; z-index: 4; border-right: 1px solid var(--uk-cal-grid); }
.uk-cal__dayhead { font-size: var(--uk-fs-12); }
.uk-cal__dayhead b { display: block; font-weight: var(--uk-fw-semibold); }
.uk-cal__dayhead span { color: var(--uk-text-3); font-variant-numeric: tabular-nums; }
.uk-cal__dayhead.is-today b { color: var(--uk-accent-text); }

/* Колонка времени (sticky слева) */
.uk-cal__time {
  position: sticky; left: 0; z-index: 2;
  height: var(--uk-cal-hour-h);
  background: var(--uk-surface); border-right: 1px solid var(--uk-cal-grid);
  border-top: 1px solid var(--uk-cal-hour);
  font-size: var(--uk-fs-11); color: var(--uk-text-3);
  font-variant-numeric: tabular-nums;
  padding: 2px 6px; text-align: right;
}
/* Ячейка дня-часа */
.uk-cal__cell {
  position: relative; height: var(--uk-cal-hour-h);
  border-top: 1px solid var(--uk-cal-hour); border-right: 1px solid var(--uk-cal-grid);
}
.uk-cal__col { position: relative; }        /* контейнер броней на день */

/* Блок брони */
.uk-book {
  position: absolute; left: 3px; right: 3px;
  padding: 5px 7px; border-radius: var(--uk-radius-sm);
  font-size: var(--uk-fs-12); line-height: 1.25; overflow: hidden;
  cursor: pointer; border: 1px solid transparent;
  box-shadow: var(--uk-shadow-1);
}
.uk-book__t { font-weight: var(--uk-fw-semibold); display: block; }
.uk-book__time { font-variant-numeric: tabular-nums; font-size: var(--uk-fs-11); opacity: .85; }
/* Своя бронь — янтарь */
.uk-book--mine { background: var(--uk-accent-soft); color: var(--uk-accent-text); border-color: var(--uk-accent); }
/* Чужая обезличенная — нейтральная штриховка */
.uk-book--other {
  background: repeating-linear-gradient(45deg, var(--uk-surface-sunken) 0 6px, var(--uk-surface-2) 6px 12px);
  color: var(--uk-text-2); border-color: var(--uk-border-strong);
}
/* На согласовании — пунктир, процессный синий */
.uk-book--pending {
  background: var(--uk-process-bg); color: var(--uk-process-text);
  border: 1px dashed var(--uk-process);
}
/* Отправляется… — пульс */
.uk-book--sending {
  background: var(--uk-warn-bg); color: var(--uk-warn-text); border-color: var(--uk-warn);
  animation: uk-pulse 1.4s var(--uk-ease) infinite;
}
@keyframes uk-pulse { 50% { opacity: .55; } }

/* Красная линия «сейчас» */
.uk-cal__now {
  position: absolute; left: var(--uk-cal-time-w); right: 0; z-index: 3;
  height: 2px; background: var(--uk-cal-now); pointer-events: none;
}
.uk-cal__now::before {
  content: ""; position: absolute; left: -4px; top: -3px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--uk-cal-now);
}

/* --- Режим одного дня (одна колонка) ---------------------------------- */
.uk-cal--single .uk-cal__grid {
  grid-template-columns: var(--uk-cal-time-w) 1fr;
  min-width: 0;
}

/* Панель навигации по дням (над сеткой одного дня) */
.uk-daynav {
  display: flex; align-items: center; gap: var(--uk-space-2);
  margin-bottom: var(--uk-space-3); flex-wrap: wrap;
}
.uk-daynav__title { margin-left: auto; font-weight: var(--uk-fw-semibold); font-variant-numeric: tabular-nums; }
.uk-daynav__title b { color: var(--uk-accent-text); }

/* Мобильная лента дней (заменяет недельную сетку на ≤640) */
.uk-cal-feed { display: none; flex-direction: column; gap: var(--uk-space-3); }
@media (max-width: 640px) {
  .uk-cal:not(.uk-cal--single) { display: none; }   /* прячем недельную сетку */
  .uk-cal-feed { display: flex; }
}

/* ==========================================================================
   12. ЛИПКАЯ ПАНЕЛЬ ОТПРАВКИ ФОРМЫ
   ========================================================================== */
.uk-submitbar {
  position: sticky; bottom: 0; z-index: var(--uk-z-sticky);
  display: flex; align-items: center; gap: var(--uk-space-3);
  padding: var(--uk-space-3) var(--uk-space-4);
  background: var(--uk-surface); border-top: 1px solid var(--uk-border);
  box-shadow: 0 -4px 16px rgba(0,0,0,.08);
  padding-bottom: calc(var(--uk-space-3) + env(safe-area-inset-bottom, 0px));
}
.uk-submitbar__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.uk-submitbar__count { font-size: var(--uk-fs-13); color: var(--uk-text-2); }
.uk-submitbar__count b { color: var(--uk-text); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .uk-submitbar { flex-wrap: wrap; }
  .uk-submitbar__info { flex-basis: 100%; }
  .uk-submitbar .uk-btn--primary { flex: 1 1 auto; }
}

/* ==========================================================================
   13. ФЛЕШ / ТОСТ / ПУСТОЕ СОСТОЯНИЕ / СКЕЛЕТОН
   ========================================================================== */
/* Флеш-сообщение (в потоке страницы) */
.uk-flash {
  display: flex; align-items: flex-start; gap: var(--uk-space-3);
  padding: var(--uk-space-3) var(--uk-space-4);
  border: 1px solid transparent; border-radius: var(--uk-radius);
  font-size: var(--uk-fs-14);
}
.uk-flash svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.uk-flash__body { flex: 1 1 auto; }
.uk-flash__title { font-weight: var(--uk-fw-semibold); }
.uk-flash--success { background: var(--uk-success-bg); color: var(--uk-success-text); border-color: var(--uk-success-border); }
.uk-flash--error   { background: var(--uk-danger-bg);  color: var(--uk-danger-text);  border-color: var(--uk-danger-border); }
.uk-flash--info    { background: var(--uk-process-bg); color: var(--uk-process-text); border-color: var(--uk-process-border); }
.uk-flash__close { margin-left: auto; background: transparent; border: 0; color: inherit; cursor: pointer; opacity: .7; padding: 2px; }
.uk-flash__close:hover { opacity: 1; }

/* Тост (плавающий) */
.uk-toast-region {
  position: fixed; z-index: var(--uk-z-toast);
  left: 50%; bottom: var(--uk-space-6); transform: translateX(-50%);
  display: flex; flex-direction: column; gap: var(--uk-space-2);
  width: min(420px, calc(100vw - 2 * var(--uk-space-4)));
}
.uk-toast {
  display: flex; align-items: center; gap: var(--uk-space-3);
  padding: var(--uk-space-3) var(--uk-space-4);
  background: var(--uk-surface); color: var(--uk-text);
  border: 1px solid var(--uk-border); border-left: 4px solid var(--uk-accent);
  border-radius: var(--uk-radius); box-shadow: var(--uk-shadow-3);
  animation: uk-toast-in var(--uk-dur-slow) var(--uk-ease);
}
.uk-toast--success { border-left-color: var(--uk-success); }
.uk-toast--error   { border-left-color: var(--uk-danger); }
.uk-toast svg { width: 20px; height: 20px; flex: none; }
@keyframes uk-toast-in { from { opacity: 0; transform: translateY(12px); } }

/* Пустое состояние */
.uk-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--uk-space-3); padding: var(--uk-space-12) var(--uk-space-4);
  color: var(--uk-text-2);
}
.uk-empty__icon {
  display: grid; place-items: center; width: 72px; height: 72px;
  border-radius: 50%; background: var(--uk-surface-sunken); color: var(--uk-text-3);
}
.uk-empty__icon svg { width: 36px; height: 36px; }
.uk-empty__title { font-size: var(--uk-fs-18); font-weight: var(--uk-fw-semibold); color: var(--uk-text); }
.uk-empty__text { max-width: 42ch; }

/* Скелетон / индикатор загрузки */
.uk-skeleton {
  position: relative; overflow: hidden;
  background: var(--uk-skeleton-base); border-radius: var(--uk-radius-sm);
}
.uk-skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--uk-skeleton-shine), transparent);
  transform: translateX(-100%); animation: uk-shimmer 1.3s infinite;
}
@keyframes uk-shimmer { to { transform: translateX(100%); } }
.uk-skeleton--line { height: 12px; margin: 6px 0; }
.uk-skeleton--title { height: 18px; width: 55%; }
.uk-skeleton--block { height: 88px; }

.uk-spinner {
  width: 24px; height: 24px; border-radius: 50%;
  border: 3px solid var(--uk-border-strong); border-top-color: var(--uk-accent);
  animation: uk-spin .7s linear infinite;
}

/* ==========================================================================
   14. ЭКРАН ВХОДА
   ========================================================================== */
.uk-auth {
  min-height: 100dvh; display: grid; place-items: center;
  padding: var(--uk-space-5); background: var(--uk-bg);
}
.uk-auth__card {
  width: 100%; max-width: 380px;
  background: var(--uk-surface); border: 1px solid var(--uk-border);
  border-radius: var(--uk-radius-lg); box-shadow: var(--uk-shadow-2);
  padding: var(--uk-space-6);
  display: flex; flex-direction: column; gap: var(--uk-space-5);
}
.uk-auth__brand { display: flex; flex-direction: column; align-items: center; gap: var(--uk-space-3); text-align: center; }
.uk-auth__logo {
  display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: var(--uk-radius); background: var(--uk-accent); color: var(--uk-text-on-accent);
}
.uk-auth__logo svg { width: 30px; height: 30px; }

/* PIN-поле */
.uk-pin { display: flex; gap: var(--uk-space-2); justify-content: space-between; }
.uk-pin__cell {
  flex: 1 1 0; min-width: 0; height: 56px;
  text-align: center; font-size: var(--uk-fs-22); font-weight: var(--uk-fw-semibold);
  font-variant-numeric: tabular-nums;
  background: var(--uk-surface); color: var(--uk-text);
  border: 1px solid var(--uk-border-strong); border-radius: var(--uk-radius);
}
.uk-pin__cell:focus-visible { border-color: var(--uk-accent); box-shadow: var(--uk-focus-ring); outline: none; }
.uk-pin__cell.is-filled { border-color: var(--uk-accent); }

/* ==========================================================================
   15. КОМПАКТНЫЙ РЕЖИМ НА МОБИЛЬНОМ (≤640px)
   Плотнее и быстрее: меньше вертикальных отступов, ниже строки календаря,
   заголовки компактнее. Тач-таргеты (кнопки/поля/чекбоксы) остаются ≥44px.
   ========================================================================== */
@media (max-width: 640px) {
  .uk-body h1 { font-size: var(--uk-fs-22); }
  .uk-body h2 { font-size: var(--uk-fs-18); }

  /* Карточки — плотнее */
  .uk-card__body { padding: var(--uk-space-3); }
  .uk-card__head { padding: var(--uk-space-3); }
  .uk-card__foot { padding: var(--uk-space-2) var(--uk-space-3); }

  /* Хаб — компактные тайлы в один столбец */
  .uk-hub-tile { min-height: 0; flex-direction: row; align-items: center; gap: var(--uk-space-3); padding: var(--uk-space-3); }
  .uk-hub-tile__icon { width: 38px; height: 38px; }
  .uk-hub-tile__desc { display: none; }              /* описание прячем — быстрее сканировать */
  .uk-hub-tile__title { flex: 1 1 auto; }
  .uk-hub-tile__arrow { margin: 0; }

  /* Заявки — плотнее шапка */
  .uk-req__summary { padding: var(--uk-space-3); gap: var(--uk-space-2); }
  .uk-req__body { padding: 0 var(--uk-space-3) var(--uk-space-3); }
  .uk-req__group { padding-top: var(--uk-space-3); }

  /* Таблица→карточки — компактнее строки */
  .uk-table--cards tr { padding: var(--uk-space-2) var(--uk-space-3); margin-bottom: var(--uk-space-2); }
  .uk-table--cards td { padding: 5px 0; }

  /* Календарь одного дня — ниже строки часов = меньше скролла */
  .uk-cal { --uk-cal-hour-h: 46px; }

  /* Модалка-лист — плотнее тело */
  .uk-modal__head, .uk-modal__body { padding: var(--uk-space-3); }
  .uk-modal__foot { padding: var(--uk-space-3); }

  /* Панель отправки — компактная, скрываем длинную подсказку */
  .uk-submitbar { padding: var(--uk-space-2) var(--uk-space-3); gap: var(--uk-space-2); }
  .uk-submitbar .uk-hint { display: none; }

  /* Топбар — плотнее, вторичная строка бренда скрыта */
  .uk-topbar { min-height: 48px; gap: var(--uk-space-2); }
  .uk-topbar__sub { display: none; }
}