/* Базовые стили и компоненты каркаса. DESIGN.md §7…§11.
 *
 * Токены живут в `static/tokens.css`, он подключается первым (`templates/base.html`).
 * Три правила файла токенов действуют и здесь: только логические свойства, нет тёмной
 * темы, нет внешних шрифтов.
 *
 * Анимаций нет: серверный рендеринг, переходы страницами (DESIGN.md §1.5).
 */

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

html { font-size: 100%; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-ru);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

/* Иврит требует больше межстрочного расстояния: буквы без выносных сливаются. */
html[lang="he"] body { font-family: var(--font-he); line-height: var(--lh-loose); }

.num { font-family: var(--font-num); }
.muted { color: var(--c-text-muted); overflow-wrap: anywhere; }  /* длинная причина дня не растягивает страницу */
.nowrap { white-space: nowrap; }

h1, h2, h3 { margin: 0 0 var(--sp-3); line-height: var(--lh-tight); color: var(--c-text-strong); }
.h1 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); }
.h2 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }

a { color: var(--c-accent); }

/* Обводка фокуса видна всегда: `outline: none` без замены запрещён (DESIGN.md §13.2). */
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* --- шапка и вкладки ------------------------------------------------------------- */

.topbar {
  background: var(--c-surface);
  border-block-end: 1px solid var(--c-border);
  box-shadow: var(--shadow-sm);
}

/* Шапка (Спринт 18): название одной строкой, кнопки не сжимаются уже своей подписи. На узком
 * экране название — своей строкой, поиск и кнопки — второй: в одну строку 375 px они не входят. */
.topbar-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
              max-width: var(--w-page); margin-inline: auto; padding: var(--sp-3) var(--sp-4); }
.topbar-search { flex: 0 1 auto; max-width: 160px; }
.topbar-search input { width: 100%; min-height: 44px; padding-inline: var(--sp-2); border: 1px solid var(--c-border);
                       border-radius: var(--r-md); font-size: var(--fs-sm); }
.brand { display: inline-flex; align-items: center; min-inline-size: 44px; min-block-size: 44px; white-space: nowrap;
         font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--c-text-strong); text-decoration: none; }
.lang-switch { flex: none; white-space: nowrap; min-height: 44px; min-inline-size: 44px; display: inline-flex;
               align-items: center; padding-inline: var(--sp-3); border: 1px solid var(--c-border-strong);
               border-radius: var(--r-md); font-size: var(--fs-sm); text-decoration: none; }
@media (max-width: 480px) {
  /* Полоса вкладок на 375 px переносится строками, а не прокручивается: отмеченная вкладка
   * всегда на виду без скрипта (скриптов на страницах нет — tests/test_catalog_guards.py). */
  .tabs { flex-wrap: wrap; overflow-x: visible; }
  .tab { padding-inline: var(--sp-2); }
  .topbar-row { flex-wrap: wrap; }
  .brand { flex: 1 0 100%; }
  .topbar-search { flex: 1 1 0; max-width: none; }
  .lang-switch { padding-inline: var(--sp-2); }
}
.lang-switch:hover { background: var(--c-surface-2); }

/* На 375 px вкладки прокручиваются по горизонтали: прокручивается полоса, не страница. */
.tabs {
  display: flex;
  gap: var(--sp-2);
  max-width: var(--w-page);
  margin-inline: auto;
  padding: 0 var(--sp-4) var(--sp-2);
  overflow-x: auto;
}

.tab {
  flex: 0 0 auto;
  min-height: 44px;
  min-inline-size: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: var(--sp-3);
  border-block-end: 2px solid transparent;
  font-size: var(--fs-sm);
  text-decoration: none;
  white-space: nowrap;
}
.tab:hover { border-block-end-color: var(--c-border-strong); }
.tab-active, .tab[aria-current="page"] { border-block-end-color: var(--c-accent); font-weight: var(--fw-semibold); }
.tab-off { color: var(--c-text-muted); cursor: not-allowed; }

/* --- страница и карточки --------------------------------------------------------- */

.page {
  max-width: var(--w-page);
  margin-inline: auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-10);
}

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-block-end: var(--sp-6);
}

/* --- кнопки (§7) ----------------------------------------------------------------- */

/* 44 px — минимальная область касания (DESIGN.md §7.2, ТЗ §2.7 п. 6). Таблица §7.1
 * DESIGN.md даёт 40 и 32 px: расхождение уходит строкой в отчёт, документ правит Спринт 10.
 * Разница размеров остаётся в отступах и в поле `btn-lg`, но палец промахиваться не должен. */
.btn {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.btn:hover { background: var(--c-surface-2); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.btn-primary:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }
.btn-danger { background: var(--c-danger); border-color: var(--c-danger); color: var(--c-on-accent); }
.btn-quiet { background: transparent; border-color: transparent; color: var(--c-accent); }

.btn-sm { min-height: 44px; padding: var(--sp-1) 10px; }
.btn-lg { min-height: 48px; padding: var(--sp-3) var(--sp-5); font-size: var(--fs-base); }
.btn-block { width: 100%; }

/* --- поля ввода (§8) ------------------------------------------------------------- */

.field-label {
  display: block;
  margin-block-end: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* Поле не меньше 16 px: меньший размер заставляет iOS приближать страницу.
 * Высота 44 px — то же правило области касания, что у кнопок (ТЗ §2.7 п. 6):
 * поле — такая же цель для пальца, одно вхождение правила без второго не чинится
 * (правило 19). На телефоне контрольная точка 480 px поднимает её до 48 px. */
.field {
  width: 100%;
  min-height: 44px;
  padding: var(--sp-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text);
  font: inherit;
  font-size: var(--fs-base);
  text-align: start;
}
.field:focus { border-color: var(--c-accent); outline: 3px solid var(--c-accent-soft); outline-offset: 0; }
.field[disabled] { background: var(--c-surface-2); color: var(--c-text-muted); }
.field-error { border-color: var(--c-danger); }

.alert {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--c-danger-border);
  border-radius: var(--r-sm);
  background: var(--c-danger-bg);
  color: var(--c-danger);
  font-size: var(--fs-sm);
}

.warn {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--c-warn-bg);
  color: var(--c-warn);
  font-size: var(--fs-sm);
}

/* --- бейджи, чипы, плитки (§9) --------------------------------------------------- */

.badge, .chip {
  display: inline-block;
  white-space: nowrap;
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

/* §2.3: у каждого статуса своя пара «фон — текст», и рядом всегда слово. */
.badge-new { background: var(--c-badge-new-bg); color: var(--c-badge-new-fg); }
.badge-confirmed { background: var(--c-badge-confirmed-bg); color: var(--c-badge-confirmed-fg); }
.badge-arrived { background: var(--c-badge-arrived-bg); color: var(--c-badge-arrived-fg); }
.badge-done { background: var(--c-badge-done-bg); color: var(--c-badge-done-fg); }
.badge-no_show { background: var(--c-badge-no-show-bg); color: var(--c-badge-no-show-fg); }
.badge-cancelled { background: var(--c-badge-cancelled-bg); color: var(--c-badge-cancelled-fg); }

/* §2.5: девять цветов мастеров — активных пять, история держит девять. */
.chip-1 { background: var(--c-chip-1-bg); color: var(--c-chip-1-fg); }
.chip-2 { background: var(--c-chip-2-bg); color: var(--c-chip-2-fg); }
.chip-3 { background: var(--c-chip-3-bg); color: var(--c-chip-3-fg); }
.chip-4 { background: var(--c-chip-4-bg); color: var(--c-chip-4-fg); }
.chip-5 { background: var(--c-chip-5-bg); color: var(--c-chip-5-fg); }
.chip-6 { background: var(--c-chip-6-bg); color: var(--c-chip-6-fg); }
.chip-7 { background: var(--c-chip-7-bg); color: var(--c-chip-7-fg); }
.chip-8 { background: var(--c-chip-8-bg); color: var(--c-chip-8-fg); }
.chip-9 { background: var(--c-chip-9-bg); color: var(--c-chip-9-fg); }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4); }

.tile {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  text-align: center;
}
.tile-value { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--c-accent); }
.tile-money { color: var(--c-money); font-family: var(--font-num); }
.tile-label { font-size: var(--fs-sm); color: var(--c-text-muted); }

/* --- таблицы (§10) -------------------------------------------------------------- */

/* Прокручивается таблица, не страница: горизонтальной прокрутки страницы нет нигде. */
.table-container { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
th, td { padding: var(--sp-3); border-block-end: 1px solid var(--c-border); text-align: start; }
th { background: var(--c-surface-2); color: var(--c-text-muted); font-weight: var(--fw-semibold); }
th::first-letter { text-transform: uppercase; }  /* подписи колонок по-русски с заглавной */
tbody tr:hover { background: var(--c-surface-2); }
.cell-num { text-align: end; font-family: var(--font-num); white-space: nowrap; }

/* --- Э-1 вход -------------------------------------------------------------------- */

.login-wrap { display: flex; justify-content: center; padding-block-start: var(--sp-8); }
.login-card { width: 100%; max-width: 400px; }
.login-card .btn { margin-block-start: var(--sp-4); }

/* --- контрольные точки (§5) ------------------------------------------------------ */

@media (max-width: 480px) {
  .page { padding: var(--sp-4) var(--sp-4) var(--sp-10); }
  .card { padding: var(--sp-4); }
  .login-wrap { padding-block-start: var(--sp-4); }
  .field { min-height: 48px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 481px) and (max-width: 1023px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Переключатель темы стоит рядом с переключателем языка и повторяет его вид (§7). */
.theme-switch { margin-inline-start: var(--sp-2); }
/* «К содержимому» видна только по фокусу с клавиатуры; в фокусе — цель 44 px поверх шапки. */
.skip-link { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 1px; block-size: 1px;
             overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { inline-size: auto; block-size: auto; clip-path: none; z-index: 10; display: inline-flex;
                   align-items: center; min-inline-size: 44px; min-block-size: 44px; padding-inline: var(--sp-3);
                   background: var(--c-surface); border: 2px solid var(--c-accent); }

/* Подпись флажка — место для пальца, не строка текста (DESIGN.md §14.8, 44 × 44 px).
 * Класс общий: измеритель касания Спринта 4 обходит все экраны, и `display:inline`
 * у подписи означает, что заданные размеры не действуют вовсе. Найдено вливанием
 * Спринта 4 на экранах Спринта 3 — чинится здесь, а не в каждом шаблоне (правило 21). */
.tap { display: inline-flex; align-items: center; gap: var(--sp-2); min-inline-size: 44px; min-block-size: 44px; }
.tap input { inline-size: 24px; block-size: 24px; flex: none; }
/* Ссылка в строке таблицы — цель для пальца (44 px, `.tap`); поля ячейки съедает её отрицательный отступ. */
td > a.tap, td > label.tap { margin-block: calc(var(--sp-2) * -1); }

/* Второй шаг опасного действия «Точно?»: узкая карточка, кнопки в ряд и переносятся. */
.confirm { max-width: 480px; margin-inline: auto; }
.confirm-form { display: flex; flex-wrap: wrap; gap: var(--sp-3); }