/* ==========================================================================
   АвтоМастер — общая дизайн-система (Экраны 1–2)
   ========================================================================== */
:root {
  --bg:            #0D0F12;
  --surface:       #15181D;
  --surface-hover: #1C2027;
  --surface-press: #23282F;
  --border:        rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.12);

  --text:          #FFFFFF;
  --text-soft:     #E6E8EB;
  --text-muted:    #8A8F98;
  --text-dim:      #6B7075;

  --orange:        #F5872B;
  --green:         #22C55E;
  --blue:          #3B82F6;
  --red:           #EF4444;
  --graphite:      #2A2E35;
  --silver:        #C6CBD2;
  /* Фиолетовый — «ждём клиента»/«согласование», добавлен 2026-09-24 при
     переносе редизайна PWA (PWA FIGMA/new design/PWA.html, макет 2a).
     Значения — из самого макета (не CRM-палитра — там #b49afc чуть другой
     оттенок, сознательно не смешиваю два источника). */
  --violet:        #A78BFA;
  --violet-soft:   #C4B5FD;
  --violet-dim:    #221C33;

  --accent:        #4C7DF0;
  --accent-press:  #3D68D0;

  --radius-card:   16px;
  --radius-tile:   14px;

  --font-display:  'Oswald', 'Inter', system-ui, sans-serif;
  --font-text:     'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --shadow-card:   0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.25);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  /* 100vh — fallback для старых iOS (SE), 100dvh — актуальная динамическая высота */
  min-height: 100vh;
  min-height: 100dvh;
  /* ни один экран не должен уезжать вбок */
  overflow-x: hidden;
  padding:
    calc(env(safe-area-inset-top) + 14px)
    calc(env(safe-area-inset-right) + 16px)
    calc(env(safe-area-inset-bottom) + 24px)
    calc(env(safe-area-inset-left) + 16px);
}

.app {
  max-width: 480px;
  width: 100%;
  /* без этого .app как flex-элемент body не сжимается уже своего min-content
     и экран уезжает вбок на узких телефонах (iPhone SE, Huawei) */
  min-width: 0;
  margin: 0 auto;
}

/* ==========================================================================
   Шапка + профиль мастера
   ========================================================================== */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.topbar--end { justify-content: flex-end; }

.master {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.master__meta {
  text-align: right;
  line-height: 1.25;
}

.master__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.master__sto {
  font-size: 13px;
  color: var(--text-muted);
}

/* Компактная шапка (2026-09-24, PWA FIGMA/new design/PWA.html) — на всех
   экранах, кроме дашборда (index.html), в шапке остаётся только аватар,
   без «Мастер / PostCRM» текста рядом (уже видно на index.html, повторять
   на каждом экране — лишний шум, см. критику «1a Как сейчас» в макете). */
.master--compact .master__avatar { width: 36px; height: 36px; font-size: 14px; }

.master__avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.5px;
}

/* Кнопка-иконка (напр. «назад» в шапке) */
.iconbtn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-soft);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.iconbtn:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.iconbtn:active { background: var(--surface-press); }
.iconbtn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.iconbtn svg { width: 20px; height: 20px; display: block; }

/* Заголовок-навигация (Экран 2): марка + подзаголовок */
.navtitle {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}

.navtitle__main {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navtitle__sub {
  font-size: 13px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   Цветные плашки-иконки с машиной
   ========================================================================== */
.icon-tile {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--radius-tile);
}

.icon-tile svg { display: block; }

.icon-tile--blue  { background: var(--blue); }
.icon-tile--red   { background: var(--red); }
.icon-tile--dark  { background: var(--graphite); }
.icon-tile--light { background: var(--silver); }

.icon-tile--blue  svg,
.icon-tile--red   svg,
.icon-tile--dark  svg { color: #fff; }
.icon-tile--light svg { color: #d0362b; }

/* ==========================================================================
   Кнопки
   ========================================================================== */
.btn {
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  padding: 18px 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.btn:active { transform: scale(0.99); }
.btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.btn__icon svg { width: 20px; height: 20px; display: block; }

.btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 24px rgba(76, 125, 240, 0.28);
}
.btn--primary:hover  { background: #567ff2; }
.btn--primary:active { background: var(--accent-press); }

.btn--ghost {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-muted);
}
.btn--ghost:hover  { background: var(--surface-hover); border-color: var(--border-strong); }
.btn--ghost:active { background: var(--surface-press); }

.btn:disabled {
  cursor: not-allowed;
  transform: none;
}

.btn--primary:disabled,
.btn--primary[disabled] {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-dim);
  box-shadow: none;
}

.btn--orange {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 8px 24px rgba(245, 135, 43, 0.28);
}
.btn--orange:hover  { background: #f79a4c; }
.btn--orange:active { background: #db7620; }

.btn--orange:disabled,
.btn--orange[disabled] {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-dim);
  box-shadow: none;
}

/* Вторичное, но не нейтральное действие — контур того же цвета, что и
   основной смысл (2026-09-24, PWA FIGMA/new design/PWA.html, п.5 «что
   изменено»: вторичная кнопка должна визуально отличаться и от primary,
   и от disabled, не «прилипать» к последней). Раньше «+ Дефект» была
   залитой оранжевой (выглядела как главное действие, хотя это не так) —
   теперь контурная, primary-кнопка («Отправить клиенту») — залитая синяя. */
.btn--outline-orange {
  background: var(--surface);
  border-color: var(--orange);
  color: var(--orange);
}
.btn--outline-orange:hover  { background: var(--surface-hover); }
.btn--outline-orange:active { background: var(--surface-press); }

.btn--green {
  background: var(--green);
  color: #0B1F13;
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.28);
}
.btn--green:hover  { background: #3ad673; }
.btn--green:active { background: #1ea653; }

.btn-row {
  display: flex;
  gap: 12px;
}
.btn-row .btn { flex: 1 1 0; }

/* ==========================================================================
   Индикатор этапа 1–4 (checkin/diagnostics/waiting/works) — добавлено
   2026-09-24, перенос редизайна из PWA FIGMA/new design/PWA.html (2a).
   Заменяет старую синюю плашку-таймер на весь экран (была только на
   diagnostics.html) единым компонентом на всех 4 экранах потока: подпись
   «Этап N из 4 · Название» слева, таймер справа (только там, где идёт
   отсчёт — diagnostics/waiting), 4 сегмента снизу.
   Цветовая семантика сегментов (важно не путать местами):
   - «сделано» — всегда синий (--accent), независимо от того, чем был сам этап;
   - активный сегмент обычного хода — тоже синий;
   - активный сегмент НА экране «Согласование» (ждём клиента) — фиолетовый;
   - активный сегмент повторного круга ПОСЛЕ ВОЗВРАТА МАСТЕРОМ (только
     ветка A: diagnostics.html в этом режиме, works.html «круг 2») —
     оранжевый, класс .stage-progress--cycle2 на корневом элементе;
   - НЕ применять оранжевый к ветке B (новый дефект посреди ремонта,
     добровольная доп.диагностика без возврата мастера) — там это
     обычный синий, «круга» там нет, только доп. пункт «Новые дефекты».
   ========================================================================== */
.stage-progress { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.stage-progress__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stage-progress__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.stage-progress__label b { color: var(--orange); font-weight: 600; } /* «· Круг 2» внутри подписи */
/* Таймер — всегда оранжевый (тот же цвет, что был у старой .infobar__timer),
   независимо от цвета сегментов ниже: это отдельный сигнал «идёт отсчёт»,
   не про ветку/этап. */
.stage-progress__timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}
.stage-progress__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: stage-dot-pulse 1.4s ease-in-out infinite; }
@keyframes stage-dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.stage-progress__track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.stage-progress__seg { height: 4px; border-radius: 2px; background: var(--border-strong); }
.stage-progress__seg.is-done,
.stage-progress__seg.is-active { background: var(--accent); }
/* Ветка A, круг 2+ (возврат мастером) — активный сегмент оранжевый */
.stage-progress--cycle2 .stage-progress__seg.is-active { background: var(--orange); }
/* Экран «Согласование» — активный сегмент фиолетовый (ждём клиента, не наш ход) */
.stage-progress--waiting .stage-progress__seg.is-active { background: var(--violet); }

@media (prefers-reduced-motion: reduce) {
  .btn, .iconbtn { transition: none; }
  .stage-progress__dot { animation: none; }
}