/*
 * Базовые компоненты интерфейса (#357, зонтичная #350).
 * Вид — утверждённые макеты docs/design/nav-mockups/. Цвета только из tokens.css.
 * Живые примеры обеих тем — ui-kit.html.
 *
 * Новые экраны (#359–#362) собираются из этих классов; старые классы экранов
 * не трогаются, пока экран не переделан.
 */

/* Скрытые элементы остаются скрытыми, даже если у класса свой display. */
[class^="ui-"][hidden], [class*=" ui-"][hidden] { display: none !important; }

/* Рамка фокуса — только для клавиатуры (#441): после касания пальцем или мышью её нет.
   Заголовки и диалоги, в которые фокус переводится скриптом (tabindex="-1"), — без рамки. */
:focus:not(:focus-visible) { outline: none; }
[tabindex="-1"]:focus { outline: none; }

/* --- Значки ------------------------------------------------------------------ */
/* <svg class="ui-icon" aria-hidden="true"><use href="icons/icons.svg#phone"/></svg> */
.ui-icon { width: 24px; height: 24px; flex: none; display: inline-block; vertical-align: middle; color: inherit; }
.ui-icon--sm { width: 20px; height: 20px; }
.ui-icon--xs { width: 16px; height: 16px; }

/* --- Кнопки: главная, вторичная, текстовая, опасная --------------------------- */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--height-button); padding: 0 var(--space-4);
  border: 1px solid transparent; border-radius: var(--radius-md);
  font: var(--weight-bold) 16px/1.2 var(--font-sans); text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.ui-btn:focus-visible { outline: 3px solid var(--color-accent-soft-2); outline-offset: 2px; }
.ui-btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.ui-btn--primary:hover { background: var(--color-accent-strong); }
.ui-btn--secondary { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-line-strong); }
.ui-btn--secondary:hover { border-color: var(--color-accent); color: var(--color-accent); }
.ui-btn--text { background: transparent; color: var(--color-accent); padding: 0 var(--space-3); }
.ui-btn--text:hover { background: var(--color-accent-soft); }
.ui-btn--danger { background: transparent; color: var(--color-danger); border-color: var(--color-line); }
.ui-btn--danger:hover { background: var(--color-danger-soft); }
.ui-btn--compact { min-height: var(--height-button-compact); padding: 0 var(--space-3); font-size: var(--text-sm); }
.ui-btn--block { display: flex; width: 100%; }
.ui-btn--icon { width: var(--touch-min); min-height: var(--touch-min); padding: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-ink); }
.ui-btn--icon:hover { background: var(--color-surface-3); }
.ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
/* Идёт загрузка: текст остаётся, слева крутится индикатор, нажатия не проходят. */
.ui-btn.is-loading { pointer-events: none; }
.ui-btn.is-loading::before {
  content: ''; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: ui-spin .8s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* --- Раскрывающийся блок: заголовок и шеврон справа (#441) --------------------- */
/* <details class="ui-disclosure"><summary>Заголовок</summary>…</details>
   Меню «⋮» и кнопки-раскрывашки («+ Добавить») — class="ui-menu": без шеврона и без
   браузерного треугольника, вид задаёт сам экран. Других <details> в приложении нет. */
.ui-disclosure > summary, .ui-menu > summary { list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ui-disclosure > summary::-webkit-details-marker, .ui-menu > summary::-webkit-details-marker { display: none; }
.ui-disclosure > summary::marker, .ui-menu > summary::marker { content: ''; }
.ui-disclosure > summary {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--touch-min); color: var(--color-ink); font-weight: var(--weight-bold);
}
.ui-disclosure > summary::after {
  content: ''; flex: none; width: 8px; height: 8px; margin: -4px 4px 0 auto;
  border-right: 2px solid var(--color-ink-2); border-bottom: 2px solid var(--color-ink-2);
  transform: rotate(45deg); transition: transform .15s;
}
.ui-disclosure[open] > summary::after { margin-top: 4px; transform: rotate(225deg); }
.ui-disclosure > summary:focus-visible, .ui-menu > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }

/* --- Шапка экрана: «←», заголовок с подзаголовком, синхронизация, «⋮» ---------- */
.ui-header {
  display: flex; align-items: center; gap: var(--space-1);
  min-height: var(--height-header); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-1);
  background: var(--color-bg); color: var(--color-ink);
}
.ui-header__titles { flex: 1; min-width: 0; }
.ui-header__title { margin: 0; font: var(--weight-bold) 18px/1.25 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-header__subtitle { margin: 0; font-size: var(--text-xs); color: var(--color-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-sync { color: var(--color-ok); }
.ui-sync[data-state="pending"] { color: var(--color-ink-2); }
.ui-sync[data-state="progress"] { color: var(--color-accent); }
.ui-sync[data-state="error"] { color: var(--color-danger); }

/* --- Нижний бар: сумма, что не так, одно главное действие ---------------------- */
.ui-bottom-bar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--height-bottom-bar); padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  background: var(--color-surface); border-top: 1px solid var(--color-line); color: var(--color-ink);
}
.ui-bottom-bar__summary { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0; text-align: left; color: inherit; font: inherit; }
.ui-bottom-bar__label { display: block; font-size: var(--text-xs); color: var(--color-ink-2); }
.ui-bottom-bar__total { display: block; font: 700 22px/1.2 var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ui-bottom-bar__note { display: block; font-size: 12px; font-weight: var(--weight-bold); color: var(--color-warn); }

/* --- Вкладки в одну строку, закреплены под шапкой ------------------------------ */
.ui-tabs {
  position: sticky; top: 0; z-index: 10;
  display: flex; overflow-x: auto; scrollbar-width: none;
  padding: 0 var(--space-3); background: var(--color-bg); border-bottom: 1px solid var(--color-line);
}
.ui-tabs::-webkit-scrollbar { display: none; }
.ui-tab {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--touch-min); padding: 0 var(--space-3);
  border: 0; background: transparent; color: var(--color-ink-2);
  font: var(--weight-medium) var(--text-sm)/1 var(--font-sans); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.ui-tab[aria-selected="true"], .ui-tab[aria-current="page"] { color: var(--color-accent); font-weight: var(--weight-bold); box-shadow: inset 0 -2px 0 var(--color-accent); }
.ui-tab__dot { width: 6px; height: 6px; border-radius: 3px; background: var(--color-warn); }

/* --- Пункт списка: статус, название, вторая строка, «›» ------------------------ */
.ui-list { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 16px; overflow: hidden; }
.ui-list-item {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 56px; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  color: var(--color-ink); text-decoration: none; background: transparent; border: 0; width: 100%; text-align: left; font: inherit; cursor: pointer;
}
.ui-list-item + .ui-list-item { border-top: 1px solid var(--color-line); }
.ui-list-item:hover { background: var(--color-surface-2); }
.ui-list-item__body { flex: 1; min-width: 0; }
.ui-list-item__title { display: block; font-size: 16px; font-weight: var(--weight-bold); }
.ui-list-item__meta { display: block; font-size: var(--text-xs); color: var(--color-ink-2); }
.ui-list-item__meta.is-warn { color: var(--color-warn); font-weight: var(--weight-bold); }
.ui-list-item__meta.is-ok { color: var(--color-ok); font-weight: var(--weight-bold); }
.ui-list-item__chevron { color: var(--color-ink-2); }
.ui-status { width: 28px; height: 28px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.ui-status--ok { background: var(--color-ok-soft); color: var(--color-ok); }
.ui-status--warn { background: var(--color-warn-soft); color: var(--color-warn); }
.ui-status--empty { border: 2px solid var(--color-line); }

/* --- Значки-статусы на карточках («Нет цен», «Отправлено клиенту») ------------- */
.ui-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 6px; font-size: var(--text-xs); font-weight: var(--weight-bold); white-space: nowrap; background: var(--color-surface-3); color: var(--color-ink-2); }
.ui-badge--ok { background: var(--color-ok-soft); color: var(--color-ok); }
.ui-badge--warn { background: var(--color-warn-soft); color: var(--color-warn); }
.ui-badge--danger { background: var(--color-danger-soft); color: var(--color-danger); }

/* --- Сегментированный переключатель (способ замера, единицы, тема) ------------- */
.ui-segmented { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; border-radius: 10px; background: var(--color-surface-3); }
.ui-segmented > button { min-height: 36px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-ink-2); font: var(--weight-medium) var(--text-sm)/1 var(--font-sans); cursor: pointer; white-space: nowrap; }
.ui-segmented > button[aria-checked="true"], .ui-segmented > button[aria-pressed="true"] { background: var(--color-surface); color: var(--color-ink); font-weight: var(--weight-bold); box-shadow: var(--shadow-1); }

/* --- Выдвижная панель снизу: свёрнута / половина / весь экран ------------------ */
.ui-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; flex-direction: column; gap: var(--space-3);
  max-height: 96px; padding: var(--space-2) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  background: var(--color-surface); color: var(--color-ink);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-2);
  overflow: hidden; transition: max-height .25s ease;
}
.ui-sheet[data-height="half"] { max-height: 50vh; max-height: 50dvh; overflow-y: auto; }
.ui-sheet[data-height="full"] { max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); overflow-y: auto; }
.ui-sheet__grabber { align-self: center; width: 40px; height: 5px; border: 0; padding: 0; border-radius: 3px; background: var(--color-line-strong); cursor: grab; }

/* --- Плашка-уведомление с «Отменить» ------------------------------------------- */
.ui-snackbar {
  position: fixed; left: var(--space-4); right: var(--space-4); bottom: calc(var(--height-bottom-bar) + var(--space-4)); z-index: 60;
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 48px; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-radius: var(--radius-md); background: var(--color-ink); color: var(--color-bg);
  box-shadow: var(--shadow-2); font-size: var(--text-sm);
}
.ui-snackbar__text { flex: 1; min-width: 0; }
.ui-snackbar .ui-btn--text { color: var(--color-accent-muted); }
.ui-snackbar .ui-btn--text:hover { background: transparent; text-decoration: underline; }

/* --- Диалог подтверждения ------------------------------------------------------ */
.ui-dialog { width: min(360px, calc(100vw - 32px)); padding: var(--space-6); border: 0; border-radius: 16px; background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-2); }
.ui-dialog::backdrop { background: var(--color-scrim); }
.ui-dialog__title { margin: 0 0 var(--space-2); font: var(--weight-bold) var(--text-lg)/1.3 var(--font-sans); }
.ui-dialog__text { margin: 0 0 var(--space-6); color: var(--color-ink-2); line-height: 1.45; }
.ui-dialog__actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* --- Поле ввода ---------------------------------------------------------------- */
.ui-field { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-ink-2); }
.ui-input {
  min-height: var(--height-field); padding: 0 14px; box-sizing: border-box;
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-ink);
  font: var(--weight-regular) 16px/1.2 var(--font-sans);
}
.ui-input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.ui-input--number { font-size: var(--text-lg); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }

/* --- Карточка ------------------------------------------------------------------ */
.ui-card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 16px; color: var(--color-ink); }