:root {
  --bg: #1b1a17;
  --surface: #242220;
  --surface-2: #2c2925;
  --border: #3b362e;
  --text: #ede9e1;
  --text-muted: #a39c8e;
  --accent: #e8a33d;
  --accent-dim: #b87f2e;
  --status-planned: #6e8ca3;
  --status-progress: #e8a33d;
  --status-done: #5c8a66;
  --status-cancelled: #b4483f;
  --status-waiting: #d9a916;
  --radius: 3px;
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }

html, body {
  /* Иначе нативные иконки date/time-инпутов рисуются в светлой теме браузера
     и выглядят посторонним светлым пятном на тёмном фоне приложения. */
  color-scheme: dark;
  margin: 0;
  padding: 0;
  background: var(--bg);
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px);
  background-size: 100% 44px;
  background-attachment: local;
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
}

body {
  background-image: none;
}

::selection { background: var(--accent); color: #1b1a17; }

button, input, select, textarea { font-family: inherit; }

.hidden { display: none !important; }
body.dialog-open { overflow: hidden; }

/* ---------- Анимации появления ---------- */
/* В основном только "вход" — элементы скрываются через display:none (.hidden),
   а его нельзя анимировать при исчезновении без JS-задержки. Исключение —
   мобильное меню вкладок (.tabs.mobile-open/.mobile-closing): для него такая
   задержка есть в setMobileMenuState() в app.js, поэтому у него есть и анимация
   закрытия. Уважаем prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes dialog-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
  @keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
  @keyframes tabs-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
  @keyframes tabs-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.96); } }

  .view.active { animation: fade-in 0.18s ease; }
  .dialog-overlay:not(.hidden) { animation: fade-in 0.15s ease; }
  .dialog-overlay:not(.hidden) .dialog { animation: dialog-in 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
  .toast:not(.hidden) { animation: toast-in 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
  .tabs.mobile-open { animation: tabs-in 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
  .tabs.mobile-closing { animation: tabs-out 0.18s ease; }
  #queueClientFields:not(.hidden),
  #advanceAmountWrap:not(.hidden),
  #queueAdvanceAmountWrap:not(.hidden) { animation: fade-in 0.2s ease; }
}

/* ---------- Topbar ---------- */
/* Грид вместо flex/space-between: у крайних колонок одинаковый 1fr, поэтому
   меню навигации в середине оказывается ровно по центру независимо от того,
   что бренд слева шире кнопки "Выйти" справа. Колонки НЕ сжимаются меньше
   контента (без minmax(0, ...) — это раньше приводило к тому, что вкладки
   наезжали на бренд/кнопку выхода при нехватке места); вместо сжатия ниже
   880px бренд и меню просто переносятся друг под друга (см. медиа-запрос).*/
.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px 28px;
  border-bottom: 3px solid var(--accent);
  background: var(--surface);
  gap: 16px;
}

.tabs { justify-self: center; }
.topbar-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }

.brand { display: flex; align-items: center; gap: 12px; }

.brand-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  color: var(--bg);
  background: var(--accent);
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  transform: skewX(-6deg);
}

.brand-text h1 {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.1;
}
.brand-text p {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

.tabs { display: flex; gap: 12px; background: var(--surface-2); padding: 4px; border-radius: var(--radius); }
.tab {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 14px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 9px 18px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tab:hover { color: var(--text); }
.tab.active { background: var(--accent); color: #1b1a17; font-weight: 600; }

main { max-width: none; margin: 0; padding: 24px 28px; }

.view { display: none; }
.view.active { display: block; }
#view-clients.active { max-width: 1180px; margin: 0 auto; }

/* ---------- Buttons & inputs ---------- */
.btn-primary, .btn-ghost, .btn-danger, .btn-link {
  cursor: pointer;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  transition: filter 0.15s, background 0.15s, transform 0.1s;
}
.btn-primary:active, .btn-ghost:active, .btn-danger:active { transform: scale(0.97); }
.btn-primary {
  background: var(--accent);
  color: #1b1a17;
  border: none;
  padding: 10px 18px;
  font-weight: 600;
}
.btn-primary:hover { filter: brightness(1.08); }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 9px 14px;
  text-decoration: none;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn-danger {
  background: transparent;
  border: 1px solid var(--status-cancelled);
  color: var(--status-cancelled);
  padding: 9px 14px;
}
.btn-danger:hover { background: var(--status-cancelled); color: #fff; }

.btn-link {
  background: none;
  border: none;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-skip-ink: none; /* иначе браузер "прерывает" линию под нижними засечками букв вроде "Д" */
  padding: 0;
  font-size: 14px;
}

input, select, textarea {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 9px 11px;
  border-radius: var(--radius);
  /* iOS Safari зумит страницу при фокусе на поле с font-size < 16px. */
  font-size: 16px;
  width: 100%;
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
/* На iOS нативные date/time-инпуты иногда игнорируют width:100% родителя
   и рисуются по ширине своего содержимого, вылезая за рамку. */
input[type="date"], input[type="time"] { max-width: 100%; min-width: 0; }
/* Высота подгоняется под содержимое из app.js — ручной ресайз и своя
   прокрутка тут только мешали бы. */
.notes-textarea { resize: none; overflow: hidden; min-height: 60px; }
.mono-input { font-family: var(--font-mono); letter-spacing: 0.05em; }

/* Стрелочки инкремента у number-инпутов нигде в приложении не нужны — только мешают. */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---------- Schedule ---------- */
.week-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}
.week-label { text-align: center; font-family: var(--font-display); font-size: 17px; letter-spacing: 0.02em; text-transform: uppercase; }
.week-label span { display: block; }
/* Отчёт — у тулбара, кроме навигации по неделям, ещё фильтр по мастеру;
   группируем навигацию (стрелки+диапазон) в свой ряд, иначе на узком экране
   всё сжимается в одну нечитаемую строку. */
.report-toolbar .week-nav { display: flex; align-items: center; gap: 20px; }
@media (max-width: 600px) {
  /* Навигация по неделям — на всю ширину своим рядом (как в расписании),
     фильтр по мастеру — под ней. */
  .report-toolbar { row-gap: 10px; }
  .report-toolbar .week-nav { flex-basis: 100%; justify-content: center; }
}

.week-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
@media (max-width: 900px) {
  .week-grid { grid-template-columns: 1fr; }
}

.day-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: calc(100vh - 260px);
  display: flex;
  flex-direction: column;
  min-width: 0; /* иначе колонки repeat(6, 1fr) не сжимаются меньше контента и вылезают за сетку */
}
.day-col.is-today { border-color: var(--accent); }
@media (max-width: 900px) {
  /* На мобильных дни идут списком друг под другом — без этого пустой день
     тянется почти на весь экран (min-height рассчитан на десктопную сетку). */
  .day-col { min-height: 0; }
}

.day-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.day-head .dow {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.day-col.is-today .dow { color: var(--accent); }
.day-head .dnum { font-family: var(--font-mono); font-size: 14px; color: var(--text-muted); }

.day-body { padding: 8px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

.add-appt-btn {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-muted);
  border-radius: var(--radius);
  padding: 8px;
  font-size: 14px;
  cursor: pointer;
  margin-top: auto;
}
.add-appt-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ticket-style appointment card */
.appt-card {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}
.appt-card:hover { transform: translateX(2px); border-left-color: var(--accent); }
/* Длинные значения без пробелов (телефон/имя без разделителей) иначе не
   переносятся и вылезают за карточку в узких колонках недели. */
.appt-card { overflow-wrap: anywhere; }
.appt-card[data-status="planned"] { border-left-color: var(--status-planned); }
.appt-card[data-status="in_progress"] { border-left-color: var(--status-progress); }
.appt-card[data-status="done"] { border-left-color: var(--status-done); opacity: 0.75; }
.appt-card[data-status="cancelled"] { border-left-color: var(--status-cancelled); opacity: 0.55; text-decoration: line-through; }

.appt-time { font-family: var(--font-mono); font-size: 14px; color: var(--accent); }
.appt-client { font-size: 14px; font-weight: 600; margin: 2px 0; }
.appt-phone {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
  margin-bottom: 2px;
  min-width: 0; /* flex-контейнер иначе не даёт своему тексту сжаться меньше содержимого */
}
.appt-phone::before { content: "☎"; font-size: 14px; }
.appt-phone:hover { color: var(--accent); text-decoration: underline; }
.appt-service { font-size: 14px; color: var(--text-muted); }
.appt-plate {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.05em;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 1px 5px;
  color: var(--text-muted);
}
.appt-vin {
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

/* ---------- Clients ---------- */
.clients-toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.search-input { max-width: 340px; }
#clientSortSelect { max-width: 220px; }
#reportMasterFilter { max-width: 200px; }

.table-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; }
.clients-table { width: 100%; border-collapse: collapse; background: var(--surface); }
.clients-table th {
  text-align: left;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.clients-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  vertical-align: top;
}
.clients-table tr:last-child td { border-bottom: none; }
.clients-table tr:hover { background: var(--surface-2); cursor: pointer; }
.report-total-row td { font-weight: 600; color: var(--accent); background: var(--surface-2); cursor: default; }
.report-total-row:hover { background: var(--surface-2); cursor: default; }
.cell-name { font-weight: 600; }
.cell-plate { font-family: var(--font-mono); font-size: 14px; color: var(--accent); }
.cell-tag { font-size: 14px; color: var(--text-muted); }
.cell-notes { color: var(--text-muted); font-size: 14px; max-width: 220px; }
.cell-updated { color: var(--text-muted); font-size: 14px; white-space: nowrap; }
.cell-phone {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
}
.cell-phone:hover { color: var(--accent); text-decoration: underline; }
.edit-hint { color: var(--text-muted); line-height: 0; }
.clients-table tr:hover .edit-hint { color: var(--accent); }
.cell-vin { display: inline-flex; align-items: center; gap: 6px; }
.vin-copy-btn, .article-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  line-height: 0;
}
.vin-copy-btn:hover, .article-copy-btn:hover { color: var(--accent); background: var(--surface-2); }
.report-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  line-height: 0;
}
.report-delete-btn:hover { color: var(--status-cancelled); background: var(--surface-2); }

.empty-state { text-align: center; color: var(--text-muted); padding: 40px 0; }

/* ---------- Queue ---------- */
.queue-list { display: flex; flex-direction: column; gap: 10px; }
.queue-item {
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent-dim);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: border-left-color 0.15s;
}
.queue-item:hover { border-left-color: var(--accent); }
.queue-item-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.queue-item-name { font-weight: 600; font-size: 14px; }
.queue-item-car { font-size: 14px; color: var(--text-muted); }
.queue-item-title { font-size: 14px; color: var(--text-muted); }
.queue-parts-received, .queue-parts-pending { font-size: 14px; }
.queue-parts-received { color: var(--status-done); }
.queue-parts-pending { color: var(--status-waiting); }
.queue-status-badge {
  flex-shrink: 0;
  border: none;
  border-radius: var(--radius);
  padding: 5px 10px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  color: #fff;
}
.queue-status-badge[data-status="waiting"] { background: var(--status-waiting); color: #1b1a17; }
.queue-status-badge[data-status="arrived"] { background: var(--status-done); }
.queue-status-badge:disabled { cursor: default; }

/* ---------- Consumables ---------- */
.consumables-list { display: flex; flex-direction: column; gap: 20px; }
.consumable-section {
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 14px;
}
.consumable-section-orphan { border-top-color: var(--border); }
.consumable-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.consumable-section-name { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 15px; }
.consumable-section-actions { display: flex; gap: 14px; flex-shrink: 0; }
.consumable-section-categories { display: flex; flex-direction: column; gap: 12px; }
.consumable-category {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.consumable-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.consumable-category-name { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; font-size: 14px; }
.consumable-category-actions { display: flex; gap: 14px; flex-shrink: 0; }
.consumable-items { display: flex; flex-direction: column; }
.consumable-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.consumable-item:last-child { border-bottom: none; }
.consumable-item:hover { background: var(--surface-2); }
.consumable-item-name { font-size: 14px; }
.consumable-item-article { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 14px; color: var(--accent); }
.consumable-items-empty { margin: 0; padding: 12px 14px; font-size: 14px; color: var(--text-muted); }

/* ---------- Dialog ---------- */
.dialog-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  z-index: 50;
}
.dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 24px;
  width: 100%;
  max-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
}
/* Смета (запись ремонта) и заказ — самые "тяжёлые" по содержимому диалоги
   (таблица запчастей с ценой/кол-вом/фирмой/артикулом/поставщиком) — на
   десктопе им тесно в стандартной ширине попапа. */
.dialog-wide { max-width: 1200px; }
#queueDialog .dialog { max-width: 1250px; }
.dialog h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 18px;
  margin: 0 0 16px;
}
.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.dialog-header h2 { margin: 0; }
.dialog-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.call-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--status-done);
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  flex-shrink: 0;
  transition: filter 0.15s, transform 0.1s;
}
.call-btn:hover { filter: brightness(1.1); transform: scale(1.06); }
.call-btn-wide {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: var(--radius);
  background: var(--status-done);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: filter 0.15s;
}
.call-btn-wide:hover { filter: brightness(1.1); }
.dialog form { display: flex; flex-direction: column; gap: 12px; }
.dialog label { font-size: 14px; color: var(--text-muted); display: flex; flex-direction: column; gap: 5px; }
#apptForm label { gap: 10px; }
#apptDetailsFields { display: flex; flex-direction: column; gap: 16px; }
.field-hint { font-size: 14px; line-height: 1.4; color: var(--text-muted); }

/* Смета (запись ремонта / очередь) — полей много, текст слипался при плотных
   отступах, поэтому здесь вертикальные промежутки немного шире, чем в остальных диалогах. */
#repairForm, #queueForm { gap: 24px; }
#repairForm .repair-section, #queueForm .repair-section { gap: 16px; }
#repairForm .repair-rows, #queueForm .repair-rows { gap: 14px; }
#repairForm .repair-row-part, #queueForm .repair-row-part { gap: 10px; padding: 10px; }
/* #queueClientFields — вложенный div, поэтому gap формы (24px) на его
   собственных детей не действует — задаём отдельно, иначе лейблы слипаются. */
#queueClientFields { display: flex; flex-direction: column; gap: 24px; }

/* ---------- Аккордеон "Данные клиента и автомобиля" ---------- */
.accordion-toggle-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.accordion-chevron { transition: transform 0.15s; flex-shrink: 0; }
.accordion-toggle-btn.accordion-open .accordion-chevron { transform: rotate(180deg); }
/* На десктопе кнопки расходников идут обычным рядом в тулбаре — аккордеон
   только для мобильной версии (см. медиа-выборку ниже). display:contents
   пропускает обёртку сквозь флекс-раскладку .clients-toolbar, как будто
   кнопки — прямые дети тулбара. */
.consumables-toolbar-toggle { display: none; }
.consumables-toolbar-buttons { display: contents; }

.appt-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.appt-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}
.appt-summary-row span { color: var(--text-muted); }
.appt-summary-row strong { font-weight: 500; text-align: right; }
#editApptDetailsBtn { align-self: flex-start; margin-top: 4px; }
.req { color: var(--status-cancelled); }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Иначе колонки не сжимаются меньше нативного виджета даты/времени и вылезают
   за диалог на узких экранах (тот же класс бага, что чинили в шапке и сетке недели). */
.row-2 > label { min-width: 0; }

.walkin-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.walkin-hint { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
#estimatePickerHint { margin-bottom: 14px; }

/* ---------- Поиск клиента (замена обычного select) ---------- */
.client-picker { position: relative; }
.client-picker-native { display: none; }
.client-picker-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  z-index: 20;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.client-picker-item { padding: 9px 11px; font-size: 14px; cursor: pointer; }
.client-picker-item:hover, .client-picker-item:active { background: var(--surface); color: var(--accent); }
.client-picker-item-empty { color: var(--text-muted); border-bottom: 1px solid var(--border); }
.client-picker-empty { padding: 9px 11px; font-size: 14px; color: var(--text-muted); }

.appt-card[draggable="true"] { cursor: grab; }
.appt-card.dragging { opacity: 0.35; cursor: grabbing; }

.day-body.drag-over {
  background: rgba(232, 163, 61, 0.08);
  outline: 2px dashed var(--accent);
  outline-offset: -4px;
  border-radius: var(--radius);
}
.dialog-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.spacer { flex: 1; }

.dialog-tabs { display: flex; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: var(--radius); margin-bottom: 16px; }
.ctab {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 14px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 9px 18px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex: 1;
}
.ctab:hover { color: var(--text); }
.ctab.active { background: var(--accent); color: #1b1a17; font-weight: 600; }

.history-list { display: flex; flex-direction: column; gap: 10px; max-height: 50vh; overflow-y: auto; }
.history-item {
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent-dim);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: border-left-color 0.15s, transform 0.15s;
}
.history-item:hover { border-left-color: var(--accent); transform: translateY(-2px); }
#clientRequestsList .history-item:hover { transform: none; }
.history-item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.history-date { font-family: var(--font-mono); font-size: 14px; color: var(--accent); }
.history-title { font-size: 14px; font-weight: 600; }
.history-total { font-size: 14px; }
.history-notes { font-size: 14px; color: var(--text-muted); }
#clientHistoryPanel .empty-state { padding: 24px 0; }
.repair-toolbar { margin-top: 0; margin-bottom: 12px; }

/* Заметка "с другой стороны" — только для чтения: заметка админа в кабинете
   клиента, и наоборот заметка клиента в карточке админа. Разные поля,
   специально не смешиваются с собственной редактируемой заметкой рядом. */
.added-notes {
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 8px 12px;
}
.added-notes-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 4px; }
.added-notes p { margin: 0; font-size: 14px; white-space: pre-wrap; color: var(--text); }
.added-notes-client { border-left-color: var(--accent); }
.added-notes-client .added-notes-label { color: var(--accent); font-weight: 600; }

.repair-list-block { display: flex; flex-direction: column; gap: 3px; }
.repair-list-block + .repair-list-block { margin-top: 10px; }
.repair-list-label { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.repair-list-line, .repair-list-sum {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}
.repair-list-meta { color: var(--text-muted); font-size: 14px; }
.repair-list-article {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--text-muted);
}
.repair-list-article .mono { font-family: var(--font-mono); color: var(--accent); }
.repair-list-sum { color: var(--text-muted); font-size: 14px; padding-top: 2px; border-top: 1px dashed var(--border); }
.repair-list-sum-accent { color: var(--accent); }

/* ---------- Repair record dialog ---------- */
.repair-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.repair-section-head { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--text-muted); }
.repair-section-head > span:first-child { font-size: 16px; font-weight: 600; color: var(--accent); }
.repair-rows { display: flex; flex-direction: column; gap: 6px; }
.repair-row { display: grid; grid-template-columns: auto 1fr 100px auto; gap: 6px; align-items: center; }
.repair-row.repair-row-excluded { opacity: 0.5; }
/* margin — колонка под галочку в .repair-row-line1/.repair-rows-header шире
   самого чекбокса (26px против 18px), иначе он утыкается в края ячейки.
   padding:0 — иначе общий паддинг инпутов (9px 11px) на десктопе (см. ниже
   appearance:none) браузер считает минимальным размером и чекбокс рендерится
   растянутым и несимметричным (24×20px вместо 18×18px) — отсюда и "кривизна",
   и несовпадающий отступ между запчастями и работами. */
.row-include { flex-shrink: 0; width: 18px; height: 18px; margin: 0 4px; padding: 0; accent-color: var(--accent); cursor: pointer; }
/* Нативный чекбокс игнорирует border-radius (appearance:auto рисует его как
   OS-виджет мимо обычной модели рамок) — на десктопе рисуем его сами, чтобы
   скругление реально было видно; на мобильном оставляем нативный как был. */
@media (min-width: 601px) {
  .row-include {
    appearance: none;
    -webkit-appearance: none;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    position: relative;
  }
  .row-include:hover { border-color: var(--accent); }
  .row-include:checked { background: var(--accent); border-color: var(--accent); }
  .row-include:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid #1b1a17;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
}
.repair-row .row-name, .repair-row .row-price, .repair-row .row-brand, .repair-row .row-qty, .repair-row .row-article, .repair-row .row-supplier {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 16px; /* < 16px — iOS зумит страницу при фокусе */
  width: 100%;
  min-width: 0; /* иначе инпут не сжимается уже своей "естественной" ширины в узкой grid-колонке и рвёт диалог по горизонтали */
}
.repair-row-line1 { min-width: 0; }
.repair-row-part {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
/* Запчасть в одну строку-таблицу: галочка, название, цена, кол-во, фирма,
   артикул, поставщик, крестик — колонки одинаковые у каждой строки, поэтому
   visually выравниваются друг под другом, как в настоящей таблице.
   Первая/последняя колонка — фикс. ширина под сам элемент (26px с отступами по бокам под галочку,
   30px крестик), а не auto: пустой <span> в .repair-rows-header схлопывается
   в 0 при auto, и подписи колонок съезжают относительно полей строки под ними. */
.repair-row-line1 {
  display: grid;
  grid-template-columns: 26px minmax(120px, 1fr) 76px 80px 110px 144px 112px 30px;
  gap: 6px;
  align-items: center;
}
/* В заказе (см. withReceived в app.js) галочка/название/цена/кол-во/фирма/
   артикул/поставщик дополняются в этой же строке кнопками "на складе"/"аналог" —
   без отдельной строки ниже. */
.repair-row-line1.repair-row-line1-supply {
  grid-template-columns: 26px minmax(120px, 1fr) 76px 80px 110px 144px 112px 122px 92px 30px;
}
/* Подписи колонок над списком запчастей — та же сетка, что у .repair-row-line1,
   поэтому подписи точно встают над своими полями. */
.repair-rows-header {
  display: grid;
  grid-template-columns: 26px minmax(120px, 1fr) 76px 80px 110px 144px 112px 30px;
  gap: 6px;
  /* Паддинг совпадает с фактическим паддингом .repair-row-part (10px в
     #repairForm/#queueForm — см. ниже), иначе подписи колонок съезжают
     относительно полей строки на разницу паддингов. */
  padding: 0 10px;
  margin-bottom: -2px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.repair-rows-header.repair-rows-header-supply {
  grid-template-columns: 26px minmax(120px, 1fr) 76px 80px 110px 144px 112px 122px 92px 30px;
}
.row-received-btn {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
}
.row-received-btn:hover { border-color: var(--accent); color: var(--accent); }
.row-received-btn.active { background: var(--status-done); border-color: var(--status-done); color: #fff; font-weight: 600; }

/* Аналоги запчасти — несколько вариантов одной позиции на выбор клиента,
   только "основной" считается в сумме заказа (см. sumRowInputs/sumItems). */
.row-analog-add-btn {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 7px 10px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
}
.row-analog-add-btn:hover { border-color: var(--accent); color: var(--accent); }
.repair-row-part.repair-row-analog { border-left: 3px solid var(--accent-dim); }
.repair-row-analog-bar { display: flex; gap: 8px; align-items: center; }
.row-analog-main-btn {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  text-align: center;
}
.row-analog-main-btn:hover { border-color: var(--accent); color: var(--accent); }
.row-analog-main-btn.active { background: var(--accent); border-color: var(--accent); color: #1b1a17; font-weight: 600; }
.row-analog-ungroup-btn {
  flex-shrink: 0;
  padding: 7px 10px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}
.row-analog-ungroup-btn:hover { color: var(--status-cancelled); }
.row-remove {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.row-remove:hover { border-color: var(--status-cancelled); color: var(--status-cancelled); }
.repair-sum-row, .repair-total-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-muted);
  padding-top: 4px;
  border-top: 1px dashed var(--border);
}
.repair-sum-accent { color: var(--accent); }
.repair-total-row {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.btn-block { width: 100%; text-align: center; }
.btn-ghost.active { background: var(--accent); color: #1b1a17; border-color: var(--accent); font-weight: 600; }

/* ---------- Аванс ---------- */
.repair-advance { display: flex; align-items: center; gap: 10px; }
#advanceAmountWrap { flex: 1; }
#advanceAmountWrap input { width: 100%; }
#advanceRow strong { color: var(--status-cancelled); }

/* ---------- Заказ-наряд ---------- */
.order-dialog { max-width: 720px; }
/* Копировать/скачать картинку — компактные кнопки-иконки, "А4" и "Добавить
   в отчёт" остаются текстовыми и делят оставшееся место; перенос строк —
   подстраховка на совсем узких экранах. */
.order-dialog-actions { flex-wrap: wrap; }
/* flex-basis: 0 (не auto) — иначе .btn-block(width:100%) заставляет каждую
   кнопку требовать всю ширину ряда самой по себе, и они не делят строку. */
.order-dialog-actions .btn-block { flex: 1 1 0; min-width: 120px; }
.order-add-to-report { display: flex; flex-direction: column; gap: 8px; }
.order-add-to-report label { font-size: 14px; color: var(--text-muted); display: flex; flex-direction: column; gap: 5px; }
.order-doc { display: flex; flex-direction: column; gap: 14px; font-size: 15px; }
.order-brand { text-align: center; }
.order-brand-name { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 21px; }
.order-brand-address { font-size: 14px; color: var(--text-muted); margin-top: 2px; }
.order-meta { display: flex; flex-direction: column; gap: 6px; }
.order-meta-row { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.order-meta-row span { color: var(--text-muted); }
.order-sep { border-top: 1px solid var(--border); }
.order-title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; font-size: 18px; margin: 0; }
.order-date { font-family: var(--font-mono); font-size: 14px; color: var(--accent); }
.order-block { display: flex; flex-direction: column; gap: 8px; }
.order-block + .order-block { margin-top: 12px; }
.order-block-title { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 2px; }
.order-line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.order-line-meta { color: var(--text-muted); font-size: 14px; }
/* Поставщик — цвет задаётся инлайново (см. SUPPLIER_COLORS в app.js), тут только
   насыщенность текста, чтобы он не терялся среди приглушённого арт./фирмы/кол-ва. */
.order-line-supplier { font-weight: 600; }
.order-line-sum { color: var(--accent); padding-top: 4px; border-top: 1px dashed var(--border); font-size: 18px; font-weight: 600; }
.order-line-advance { color: var(--status-cancelled); font-size: 15px; }
.order-analog-group { display: flex; flex-direction: column; gap: 8px; border: 1px dashed var(--border); border-radius: var(--radius); padding: 8px 10px; }
.order-line-alt { opacity: 0.65; }
.order-line-alt-tag { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); border: 1px solid var(--border); border-radius: 3px; padding: 0 5px; margin-left: 6px; }
.order-total {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 600;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}

/* ---------- Печать заказ-наряда (A4/PDF) ---------- */
#printArea { display: none; }
@media print {
  @page { size: A4; margin: 12mm; }
  /* Прячем весь остальной сайт (шапки, диалоги, тёмный фон) — печатаем
     только сам документ, в светлых печатных цветах вместо тёмной темы сайта. */
  body > *:not(#printArea) { display: none !important; }
  body { background: #fff !important; }
  /* Компактные размеры и отступы — почти любой заказ-наряд (десяток строк
     работ/запчастей + рекомендации) должен уместиться на одну страницу A4,
     а не расползаться на вторую ради пары строк. Межстрочный интервал и
     отступы между строками при этом не режем — иначе список сложно читать. */
  #printArea {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
    line-height: 1.55;
    color: #1b1a17;
    background: #fff;
  }
  #printArea .order-brand-name { color: #1b1a17; font-size: 16px; }
  #printArea .order-brand-address { font-size: 11px; margin-top: 0; }
  #printArea .order-meta { gap: 2px; }
  #printArea .order-meta-row { font-size: 12px; }
  #printArea .order-title { font-size: 14px; }
  #printArea .order-date { font-size: 11px; }
  #printArea .order-block { gap: 5px; }
  #printArea .order-block + .order-block { margin-top: 4px; }
  #printArea .order-block-title { font-size: 10px; margin-bottom: 0; font-weight: 700; }
  #printArea .order-line { font-size: 12px; font-weight: 400; page-break-inside: avoid; }
  #printArea .order-line-sum { font-size: 13px; padding-top: 2px; }
  #printArea .order-analog-group { gap: 5px; padding: 4px 6px; page-break-inside: avoid; }
  #printArea .order-total { padding: 6px 10px; font-size: 14px; page-break-inside: avoid; }
  #printArea .order-brand-address,
  #printArea .order-meta-row span,
  #printArea .order-block-title,
  #printArea .order-line-meta,
  #printArea .order-line-alt-tag,
  #printArea .order-date { color: #555; }
  #printArea .order-sep,
  #printArea .order-line-sum,
  #printArea .order-analog-group,
  #printArea .order-line-alt-tag,
  #printArea .order-total { border-color: #ccc; }
  #printArea .order-line-sum { color: #1b1a17; }
  #printArea .order-line-advance { color: #b4483f; }
  #printArea .order-total { background: #f2f2f2; color: #1b1a17; }
}
/* На мобильных диалоги открываются во весь экран, а не маленьким окном
   поверх сайта — форм слишком много, чтобы ужиматься в узкую карточку.
   Confirm — исключение: это компактный попап, а не форма. Логин теперь
   тоже на весь экран (см. ниже, три зоны: шапка/контент/кнопка), но не
   компактным попапом. */
@media (max-width: 600px) {
  .dialog-overlay { padding: 0; }
  .dialog-overlay .dialog {
    max-width: none;
    max-height: none;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    overflow-y: auto;
  }
  #confirmDialog { padding: 20px; }
  #confirmDialog .dialog {
    width: 100%;
    height: auto;
    max-height: 90vh;
    border-radius: var(--radius);
  }
  /* Заказ-наряд: шапка с кнопками остаётся на месте, скроллится только
     сам документ — так удобнее делать скриншот и не терять кнопки внизу. */
  #orderDialog .dialog { display: flex; flex-direction: column; overflow-y: hidden; }
  #orderDialog .order-doc { flex: 1; overflow-y: auto; }
  /* Нативные поля даты/времени на телефоне рисуют собственный текст
     ("13 Jul 2026"), который не сжимается вместе с колонкой — в паре 50/50
     он утыкается в край рамки. Ставим Дата/Время друг под другом на всю
     ширину вместо деления пополам. */
  .row-2 { grid-template-columns: 1fr; }
  /* Таблица запчастей (7 колонок с фиксированной шириной) не сжимается на
     узком экране — даём прокрутку вбок вместо обрезки/переноса полей. */
  .repair-row-line1, .repair-rows-header {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
  }
  .repair-row-line1 > *, .repair-rows-header > * { min-width: 0; }
}

/* ---------- Login ---------- */
#loginOverlay { background: var(--bg); background-image: none; }
.login-dialog { max-width: 420px; }
@media (max-width: 600px) {
  /* На телефоне окно входа — на весь экран, три зоны сверху вниз: шапка
     (лого), контент (переключатель владелец/клиент + поля формы) и кнопка
     "Войти" — все три прижаты к верху экрана, а не растянуты по высоте. */
  /* width/height продублированы явно поверх inset:0 — на части мобильных
     браузеров (сворачивающаяся адресная строка Safari/Chrome) fixed-элемент
     без явных размеров подхватывает старую высоту вьюпорта и фон не
     дотягивается до низа экрана; 100dvh перекрывает 100vh там, где поддерживается. */
  #loginOverlay {
    padding: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
  }
  #loginOverlay .dialog {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    padding: 32px 24px;
  }
  .login-brand { flex-shrink: 0; margin-bottom: 0; }
  .login-body { flex-shrink: 0; }
  .login-submit-btn { flex-shrink: 0; margin-top: 24px; }
}

/* ---------- Confirm dialog ---------- */
.confirm-dialog { max-width: 360px; z-index: 60; }
.confirm-message { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); }
#confirmDialog { z-index: 60; }
.login-brand { justify-content: center; margin-bottom: 20px; }
/* "Контент" окна входа — переключатель владелец/клиент и поля формы:
   на мобильных (см. ниже) центрируется по вертикали между шапкой и
   кнопкой "Войти", которая вынесена из <form> наружу (form="...") и
   всегда остаётся третьей, нижней частью окна. */
.login-body { display: flex; flex-direction: column; gap: 20px; }
.login-mode-form { display: flex; flex-direction: column; gap: 14px; }
.client-login-fields { display: flex; flex-direction: column; gap: 14px; }
/* min-height — пустой <p> без текста схлопывается до 0, а с текстом
   ошибки занимает ~17px; фиксируем высоту, чтобы место было зарезервировано
   даже без текста (см. .hidden-переопределения ниже). */
.login-error { margin: 0; font-size: 14px; line-height: 20px; min-height: 20px; color: var(--status-cancelled); }
/* Ошибка входа и поле пароля клиента раньше были display:none, пока не
   понадобятся — их появление сдвигало высоту окна. Держим место под них
   всегда занятым (просто невидимым), чтобы окно не "прыгало". */
#loginError.hidden, #clientLoginError.hidden { display: block !important; visibility: hidden; }
#clientPasswordLabel.hidden { display: flex !important; visibility: hidden; }
#logoutBtn, #clientLogoutBtn { display: flex; align-items: center; gap: 6px; }
.icon-btn { display: flex; align-items: center; justify-content: center; padding: 9px; }

/* ---------- Login: переключатель владелец/клиент ---------- */
.login-mode-switch { display: flex; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: var(--radius); margin-bottom: 16px; }
.login-mode-btn, .client-login-method-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.login-mode-btn:hover, .client-login-method-btn:hover { color: var(--text); }
.login-mode-btn.active, .client-login-method-btn.active { background: var(--accent); color: #1b1a17; font-weight: 600; }
/* Под-переключатель ВИН/телефон внутри формы клиента — чуть теснее к полям
   ниже, чем основной владелец/клиент (у него margin-bottom больше). */
.client-login-method-switch { margin-bottom: 12px; }

/* ---------- Бейджи-счётчики на вкладках ---------- */
.tab-with-badge { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--status-cancelled);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: normal;
}
/* Заказы/заметки — просто общее число, не сигнал "нужно внимание", поэтому
   спокойнее по цвету, чем красный бейдж непрочитанных заявок. */
.tab-badge-count { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); }
.tab.active .tab-badge-count { background: rgba(27, 26, 23, 0.18); color: #1b1a17; border-color: rgba(27, 26, 23, 0.3); }

/* ---------- Заявки: список во вкладке админа ---------- */
.requests-list { display: flex; flex-direction: column; gap: 10px; }
.request-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.request-item.unread { border-left-color: var(--accent); }
.request-item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.request-item-name { font-weight: 600; }
.request-item-vin { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }
.request-item-date { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.request-item-message { font-size: 14px; line-height: 1.5; white-space: pre-wrap; margin: 0; }
.request-item-photo { max-width: 220px; max-height: 220px; border-radius: var(--radius); border: 1px solid var(--border); cursor: zoom-in; }
.request-item-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.request-item-actions > * { text-align: center; }

@media (max-width: 600px) {
  /* В узкий ряд не помещаются 3 кнопки ("Добавить клиента" переносится на
     две строки), а из-за flex-stretch по умолчанию это растягивает по
     высоте и соседние кнопки — весь ряд выглядит рваным. На телефоне
     складываем кнопки заявки в столбец на всю ширину. */
  .request-item-actions { flex-direction: column; align-items: stretch; }
  .request-item-actions > * { width: 100%; }
}

/* ---------- Кабинет клиента ---------- */
.client-topbar { grid-template-columns: 1fr auto; }
.client-main { max-width: 640px; margin: 0 auto; padding-top: 0; display: flex; flex-direction: column; gap: 20px; }
.client-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 24px;
}
.client-card h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 18px;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.client-vin-badge { font-size: 13px; padding: 3px 9px; background: var(--surface-2); border-radius: var(--radius); color: var(--accent); text-transform: none; letter-spacing: 0.05em; }
.client-card form { display: flex; flex-direction: column; gap: 12px; }
.client-card label { font-size: 14px; color: var(--text-muted); display: flex; flex-direction: column; gap: 5px; }
.client-card .history-list { margin-top: 4px; }
.client-photo-preview { display: flex; align-items: center; gap: 12px; }
.client-photo-preview img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); }
#clientRequestsList { margin-top: 16px; }
#clientRequestsList .history-item { cursor: default; }
#clientRequestsList .history-item:hover { border-left-color: var(--border); }

@media (min-width: 601px) {
  /* На десктопе отделяем первую карточку от шапки отступом — на телефоне
     она по-прежнему идёт вплотную под шапкой (см. ниже). */
  .client-main { padding-top: 24px; }
}

@media (max-width: 600px) {
  /* На телефоне боковые отступы main съедают экран впустую — карточки
     кабинета клиента растягиваем на всю ширину, без бокового паддинга. */
  .client-main { max-width: none; padding-left: 0; padding-right: 0; }
  .client-card { border-radius: 0; border-left: none; border-right: none; }
  /* Первая карточка идёт сразу под шапкой — там уже своя оранжевая полоска
     (border-bottom у .topbar), вторая сверху карточки была бы лишней. */
  .client-main .client-card:first-child { border-top: none; border-radius: 0 0 var(--radius) var(--radius); }

  /* Расходники — та же логика: боковые отступы main убираем, карточки
     разделов/категорий сами дают внутренний отступ (см. .consumable-section
     padding). Тулбар с кнопками "Раздел"/"Категория"/"Расходник" складываем
     в столбец на всю ширину — в ряд они не помещались и переносились криво. */
  #view-consumables.active {
    margin-left: -28px;
    margin-right: -28px;
    width: calc(100% + 56px);
  }
  #view-consumables .clients-toolbar { padding: 0 12px; flex-direction: column; align-items: stretch; }
  #view-consumables .clients-toolbar .spacer { display: none; }
  #view-consumables .clients-toolbar > button { width: 100%; }
  #view-consumables .consumables-list { padding: 0 12px; }
  /* Кнопки "Раздел"/"Категория"/"Расходник" на мобильной версии прячутся
     в аккордеон "Добавить расходник" — на весь экран в ряд не помещались
     и раньше складывались в столбец, съедая место над списком. */
  .consumables-toolbar-toggle { display: flex; }
  .consumables-toolbar-buttons {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
  }
  .consumables-toolbar-buttons.mobile-open { display: flex; }
  .consumables-toolbar-buttons .spacer { display: none; }
  .consumables-toolbar-buttons > button { width: 100%; }
}

.mobile-menu-btn { display: none; }

@media (max-width: 880px) {
  /* Бренд + меню + кнопка выхода в один ряд не помещаются без сжатия текста
     (из-за которого раньше вкладки наезжали на бренд и на кнопку). Прячем
     вкладки за иконку-гамбургер: по тапу открывается на весь экран поверх
     страницы — и ничего кроме самого меню при этом не видно (кнопка
     "Выйти" на время открытого меню скрыта, иконка гамбургера меняется на
     крестик и остаётся единственным элементом поверх меню, чтобы его
     закрыть). */
  .topbar { grid-template-columns: 1fr auto; position: relative; }
  .mobile-menu-btn { display: flex; position: relative; z-index: 45; }
  .tabs {
    display: none;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    justify-self: stretch;
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    background: var(--surface);
    border-radius: 0;
    padding: 24px;
    z-index: 40;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tabs.mobile-open, .tabs.mobile-closing { display: flex; }
  .tabs.mobile-open ~ .topbar-actions #logoutBtn,
  .tabs.mobile-closing ~ .topbar-actions #logoutBtn { display: none; }
  .tab { text-align: center; font-size: 16px; padding: 14px 18px; }
}

@media (max-width: 600px) {
  /* На мобильной версии кнопка "Выйти" — только иконка, без текста. */
  #logoutBtn .logout-text, #clientLogoutBtn .logout-text { display: none; }
  #logoutBtn, #clientLogoutBtn { padding: 8px; }
}

/* ---------- Заметки владельца ---------- */
.notes-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.note-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s, transform 0.15s;
}
.note-item:hover { border-color: var(--accent); transform: translateY(-2px); }
.note-item-urgent { border-left-color: var(--status-cancelled); }
.note-item-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.note-item-badge {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #fff;
  background: var(--status-cancelled);
  border-radius: 3px;
  padding: 2px 6px;
}
.note-item-date { font-size: 12px; color: var(--text-muted); margin-left: auto; white-space: nowrap; }
.note-item-text { margin: 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

.note-tag-switch { display: flex; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: var(--radius); margin-bottom: 4px; }
.note-tag-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.note-tag-btn:hover { color: var(--text); }
.note-tag-btn.active { background: var(--accent); color: #1b1a17; font-weight: 600; }
.note-tag-btn.note-tag-urgent.active { background: var(--status-cancelled); color: #fff; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #1b1a17;
  padding: 11px 20px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 14px;
  z-index: 100;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.toast.error { background: var(--status-cancelled); color: #fff; }