/* ============================================================
   new-pages.css — додаткові стилі для нових вкладок:
   "Оплати" (payments.js), "Статистика" (stats.js),
   "Протоколи" + "Прийом авто" (protocols.js / protocol-wizard.js).
   Використовує ті самі CSS-змінні теми, що й style.css
   (var(--bg), var(--panel), var(--accent), ...) — нової палітри нема.
   Завантажується ПІСЛЯ style.css.
   ============================================================ */

/* ---------- Спільні "знакові" класи (баланс/прибуток +/-) ---------- */
.bal-pos, .stats-pos, span.ok { color: var(--ok); }
.bal-neg, .stats-neg, span.neg { color: var(--danger); }
.bal-zero, span.muted { color: var(--muted); }
.bal-ok { color: var(--ok); }

/* ---------- Загальні table-wrap правила для нових таблиць ----------
   Той самий підхід, що й для #carsTable/#procesTable: фіксована
   розкладка колонок, без горизонтального скролу, перенесення тексту
   цілими словами; VIN/номери — через .cell-nowrap (клас уже є в
   style.css). */
.payments-table-wrap, .all-payments-table-wrap, .client-payments-table-wrap,
.protocols-table-wrap, .stats-table-wrap, .settings-table-wrap {
  overflow-x: hidden;
}
.payments-table-wrap table, .all-payments-table-wrap table, .client-payments-table-wrap table,
.protocols-table-wrap table, .stats-table-wrap table, .settings-table-wrap table {
  table-layout: fixed;
  width: 100%;
  font-size: 12px;
}
.payments-table-wrap td, .payments-table-wrap th,
.all-payments-table-wrap td, .all-payments-table-wrap th,
.client-payments-table-wrap td, .client-payments-table-wrap th,
.protocols-table-wrap td, .protocols-table-wrap th,
.stats-table-wrap td, .stats-table-wrap th,
.settings-table-wrap td, .settings-table-wrap th {
  white-space: normal;
  /* 8-й раунд, п.B: overflow-wrap:anywhere (7-й раунд, п.3) розривало
     текст усередині чисел/слів — за вимогою користувача повертаємо
     стандартний перенос лише на пробілах/дефісах/слешах; overflow:hidden
     лишається запобіжником для нерозривних токенів. */
  overflow-wrap: normal;
  word-break: normal;
  overflow: hidden;
  padding: 6px 8px;
}

/* ---------- Налаштування: інфо-комірка (обрізаний прев'ю тексту) та
   бейдж "автоматичний транспорт" продавця ---------- */
.settings-info-cell {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.badge-auto-transport {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Сортування колонок кліком по заголовку — той самий візуальний
   принцип, що й #carsTable/#procesTable у style.css, поширений на
   нові таблиці. */
#paymentsClientsTable thead th[data-field], #allPaymentsTable thead th[data-field],
#protocolsTable thead th[data-field],
#statsSellersTable thead th[data-field], #statsBuyersTable thead th[data-field],
#statsAllCarsTable thead th[data-field], #statsDiffTable thead th[data-field] {
  cursor: pointer;
  user-select: none;
}
#paymentsClientsTable thead th[data-field]:hover, #allPaymentsTable thead th[data-field]:hover,
#protocolsTable thead th[data-field]:hover,
#statsSellersTable thead th[data-field]:hover, #statsBuyersTable thead th[data-field]:hover,
#statsAllCarsTable thead th[data-field]:hover, #statsDiffTable thead th[data-field]:hover {
  color: var(--text);
}
#paymentsClientsTable thead th.sort-active, #allPaymentsTable thead th.sort-active,
#protocolsTable thead th.sort-active,
#statsSellersTable thead th.sort-active, #statsBuyersTable thead th.sort-active,
#statsAllCarsTable thead th.sort-active, #statsDiffTable thead th.sort-active {
  color: var(--accent);
}
#paymentsClientsTable thead th.sort-active::after, #allPaymentsTable thead th.sort-active::after,
#protocolsTable thead th.sort-active::after,
#statsSellersTable thead th.sort-active::after, #statsBuyersTable thead th.sort-active::after,
#statsAllCarsTable thead th.sort-active::after, #statsDiffTable thead th.sort-active::after {
  content: ' \25B2';
}
#paymentsClientsTable thead th.sort-active:not(.asc)::after, #allPaymentsTable thead th.sort-active:not(.asc)::after,
#protocolsTable thead th.sort-active:not(.asc)::after,
#statsSellersTable thead th.sort-active:not(.asc)::after, #statsBuyersTable thead th.sort-active:not(.asc)::after,
#statsAllCarsTable thead th.sort-active:not(.asc)::after, #statsDiffTable thead th.sort-active:not(.asc)::after {
  content: ' \25BC';
}

/* ============================================================
   ===== TAB: PAYMENTS (Розрахунок з клієнтами) =====
   ============================================================ */
.stat-card .stat-value.stat-positive { color: var(--ok); }
.stat-card .stat-value.stat-negative { color: var(--danger); }
.stat-card .stat-value.stat-total { color: var(--accent); }
.stat-card .btn.small { margin-top: 8px; }

.dep-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.dep-amount { font-family: 'JetBrains Mono', monospace; }
.dep-cell .btn.small { margin-left: 4px; }

.client-name-link { cursor: pointer; color: var(--accent); font-weight: 600; }
.client-name-link:hover { text-decoration: underline; }
.client-info-text { display: block; margin-bottom: 4px; }

.client-info-actions { display: flex; gap: 4px; flex-wrap: wrap; }

.btn-mini {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  border-radius: 4px;
  cursor: pointer;
  font-size: 10.5px;
  padding: 1px 5px;
  margin-left: 0;
  font-family: inherit;
}
.btn-mini:hover { border-color: var(--accent); color: var(--accent); }

.payments-balance-header { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.bal-figure { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 700; }

#clientPaymentsTable tbody tr.tr-sub { background: rgba(217, 164, 65, 0.08); }
#clientPaymentsTable tbody tr.tr-sub td { font-size: 11.5px; }

.pay-car-fields { grid-column: 1 / -1; gap: 10px 16px; }

.link-clients-list {
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-2);
  padding: 6px;
}
.link-client-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 12.5px;
  cursor: pointer;
}
.link-client-row:hover { background: rgba(217, 164, 65, 0.08); }
.link-client-row .lb-name { flex: 1; }
.link-client-row .lb-id { color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 11px; }

/* ============================================================
   ===== TAB: STATS (Статистика по авто) =====
   ============================================================ */
.stats-switch { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.stats-ys-btn, .stats-ms-btn {
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12.5px;
  font-family: inherit;
}
.stats-ys-btn:hover, .stats-ms-btn:hover { border-color: var(--accent); color: var(--text); }
.stats-ys-btn.active, .stats-ms-btn.active {
  background: var(--accent); border-color: var(--accent); color: #14181D; font-weight: 600;
}

.stats-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.stats-kpi {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--kpi-color, var(--accent));
  border-radius: var(--radius);
  padding: 12px 14px;
}
.stats-kpi-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
.stats-kpi-val { font-family: 'JetBrains Mono', monospace; font-size: 19px; font-weight: 700; color: var(--text); }
.stats-kpi-val.stats-pos { color: var(--ok); }
.stats-kpi-val.stats-neg { color: var(--danger); }
.stats-kpi-sub { font-size: 11px; color: var(--muted); margin-top: 4px; }

.stats-margin-bar {
  display: inline-block;
  width: 46px; height: 6px;
  margin-left: 8px;
  background: var(--panel-2);
  border-radius: 3px;
  overflow: hidden;
  vertical-align: middle;
}
.stats-margin-bar-fill { display: block; height: 100%; background: var(--ok); }
.stats-margin-bar-fill.neg { background: var(--danger); }

.stats-section { margin-bottom: 22px; }
.stats-section h4 { margin: 0 0 10px; font-size: 14px; color: var(--text); }
.stats-section-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin-bottom: 10px;
}
.stats-section-hdr h4 { margin: 0; flex: 1; }
.stats-arrow { color: var(--accent); font-size: 12px; width: 12px; display: inline-block; }
.stats-collapsible.collapsed { display: none; }

.stats-link { color: var(--accent); text-decoration: none; }
.stats-link:hover { text-decoration: underline; }

.stats-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; }

.stats-month-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}
.stats-month-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
}
.stats-month-card:hover { border-color: var(--accent); }
.stats-month-mn { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.stats-month-mv { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 700; margin: 4px 0; }
.stats-month-mp { font-size: 11.5px; font-family: 'JetBrains Mono', monospace; }

.stats-detail-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.stats-detail-kpi-item, .stats-detail-pay-item {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
}
.stats-detail-kpi-label { font-size: 10.5px; color: var(--muted); text-transform: uppercase; margin-bottom: 4px; }
.stats-detail-kpi-val { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 700; }
.stats-detail-kpi-val.stats-pos { color: var(--ok); }
.stats-detail-kpi-val.stats-neg { color: var(--danger); }

.stats-detail-years { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.stats-detail-year-item {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 12px;
  text-align: center;
  font-size: 12px;
  min-width: 90px;
}
.stats-detail-year-y { font-weight: 700; color: var(--accent); }
.stats-detail-year-cnt { font-size: 11px; color: var(--muted); }

/* ============================================================
   ===== TAB: PROTOCOLS (Протоколи прийому авто) =====
   ============================================================ */
.proto-auto b { display: block; margin-bottom: 4px; }
.proto-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.proto-badge {
  display: inline-block;
  max-width: 100%;
  font-size: 10.5px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
}
.proto-created { color: var(--muted); }
.proto-full, .proto-short { font-size: 11.5px; line-height: 1.5; }
.proto-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.proto-actions .btn.small { padding: 3px 6px; font-size: 10.5px; }

/* Перегляд протоколу: перемикач "Повний підсумок" / "Короткий підсумок"
   (§ вимога — можливість переглядати їх окремо, а не одним суцільним
   блоком). Той самий візуальний принцип активної кнопки, що й .pw-pill/
   .stats-ys-btn — активна вкладка виділена кольором акценту. */
.proto-sum-tabs { display: flex; gap: 8px; margin: 16px 0 8px; }
.proto-sum-tab.active { background: var(--accent); color: #14181D; border-color: var(--accent); font-weight: 600; }

.proto-view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 16px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 12.5px;
}
.proto-view-grid div span { display: block; color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px; }

.proto-sum-wrap h3 { margin: 0 0 12px; font-size: 15px; }
.proto-sumblock {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.proto-sum-title { font-weight: 600; margin: 4px 0; }
.proto-sum-details { font-size: 12px; color: var(--muted); }
.proto-flag { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); float: right; cursor: pointer; }

.proto-fp-short {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin: 10px 0;
  font-size: 12.5px;
  white-space: pre-line;
}

.proto-fp-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 12px; margin-top: 10px; }
.proto-fp-table th, .proto-fp-table td {
  border: 1px solid var(--border);
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
  white-space: normal;
}
.proto-fp-table th { background: var(--panel-2); color: var(--muted); text-transform: uppercase; font-size: 10.5px; }
.proto-fp-table tr.fp-bad { background: rgba(217, 105, 79, 0.10); }
.proto-fp-table .fp-val { font-weight: 600; }
.fp-hidden-tag { color: var(--muted); font-size: 14px; cursor: help; }

.proto-prebox {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 11.5px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 260px;
  overflow: auto;
}

.proto-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.proto-thumb {
  width: 70px; height: 70px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border);
  cursor: pointer;
  background: #0d1116;
}
.proto-thumb:hover { border-color: var(--accent); }

/* Мініатюри в колонці "Авто" таблиці списку протоколів (перші 4 фото).
   ЗМІНА (7-й раунд, п.7): збільшено з 28px до 64px, щоб фото реально
   можна було розгледіти в списку, а не лише впізнати, що це фото. При
   потребі 4 мініатюри переносяться в 2 рядки (успадковано flex-wrap від
   .proto-thumbs вище) — колонка "Авто" й так росте по висоті під бейджі. */
.proto-thumbs-list { margin-top: 6px; gap: 4px; align-items: center; }
.proto-thumb-mini { width: 64px; height: 64px; border-radius: 4px; }
.proto-thumb-more {
  font-size: 10.5px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  align-self: center;
}

.pl-link { color: var(--accent); }

/* Фото-лайтбокс (спільний для Протоколи + майстер).
   Лайтбокс навмисно ЗАВЖДИ темний, незалежно від обраної теми застосунку
   (Налаштування → Вигляд, [data-theme="light"] у style.css) — тому тут
   локально перевизначаємо CSS-змінні тексту/рамок/фону кнопок на темні
   значення. Без цього в світлій темі кнопка "Закрити" (та інші .btn/
   .btn-icon всередині) успадковувала б ТЕМНИЙ колір тексту (var(--text)
   у світлій темі) на й так темному фоні лайтбоксу — нечитабельно. */
.proto-lightbox-modal {
  width: min(900px, 96vw);
  padding: 14px;
  background: #0b0e12;
  --bg: #12161B;
  --panel: #1A2028;
  --panel-2: #212933;
  --border: #2B333E;
  --text: #E7EBEF;
  --muted: #8A93A1;
  --accent: #D9A441;
}
.proto-lightbox-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.proto-lightbox-label { flex: 1; font-size: 13px; color: var(--text); }
.proto-lightbox-cnt { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); }

/* Зона перегляду — контейнер фіксованої висоти з відносним позиціонуванням,
   щоб стрілки гортання кріпились до КРАЇВ ВІКНА, а не до краю самого фото/
   відео (баг: при вузьких/широких кадрах стрілки "стрибали" разом з
   розміром зображення, бо раніше сиділи як звичайні flex-сусіди картinky). */
.proto-lightbox-body { position: relative; display: flex; align-items: center; justify-content: center; min-height: 200px; }
.proto-lightbox-body img,
.proto-lightbox-body video { max-width: 100%; max-height: 76vh; object-fit: contain; border-radius: 4px; }
.proto-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  flex-shrink: 0;
  font-size: 20px;
  width: 34px;
  height: 34px;
}
.proto-lightbox-nav-prev { left: 6px; }
.proto-lightbox-nav-next { right: 6px; }
.proto-lightbox-nav:disabled { opacity: .35; cursor: default; }

/* ============================================================
   ===== TAB: PROTOCOL WIZARD (Прийом авто, 61 крок) =====
   ============================================================ */
.pw-wrap { max-width: 760px; margin: 0 auto; padding-bottom: 90px; }
.pw-toolbar-top { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.pw-banner {
  background: rgba(217, 164, 65, 0.12);
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
}

.pw-step { display: none; }
.pw-step.active { display: block; }
.pw-step fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 16px 18px;
  margin: 0;
}
.pw-step legend { padding: 0 8px; font-weight: 600; color: var(--accent); font-size: 14px; }

.pw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.pw-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.pw-grid input, .pw-grid select { width: 100%; }
.pw-upper { text-transform: uppercase; }
.pw-err { color: var(--danger); font-size: 11px; min-height: 14px; display: block; }

.pw-photo-row { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.pw-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.pw-thumb { position: relative; width: 74px; height: 74px; }
.pw-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); cursor: pointer; }
.pw-thumb-del {
  position: absolute; top: -6px; right: -6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}

/* 8-й раунд, п.7: раніше .pw-nav (Назад/Далі) рендерився всередині вмісту
   кроку — на кроках із багато фото/коментарем кнопка "Далі" опинялась
   нижче видимої області, доводилось прокручувати. Лише ОДИН .pw-step
   активний в кожен момент (.pw-step.active{display:block}, інші
   display:none), тож sticky тут безпечний — конфлікту кількох
   sticky-елементів немає. bottom прив'язаний до --pw-progress-h (JS
   виставляє реальну висоту #pw_progressWrap — той самий sticky блок
   нижче), щоб .pw-nav "прилипав" рівно над прогрес-баром незалежно від
   того, скільки рядків займають пігулки на поточній ширині екрана. Фон +
   тінь — той самий прийом, що й у .pw-progress нижче, інакше контент, що
   прокручується, "просвічував" би крізь проміжки між кнопками. */
.pw-nav {
  display: flex; justify-content: space-between; align-items: center; margin-top: 16px;
  position: sticky;
  bottom: var(--pw-progress-h, 110px);
  background: var(--panel);
  padding: 10px 0;
  box-shadow: 0 -4px 14px rgba(0,0,0,.35);
  z-index: 5;
}

.pw-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pw-radio-option {
  border: 1px solid var(--border);
  background: var(--panel-2);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color .15s, background .15s;
}
.pw-radio-option input { margin: 0; }
.pw-radio-option:hover { border-color: var(--accent); }
.pw-radio-option.selected { border-color: var(--accent); background: rgba(217, 164, 65, 0.12); color: var(--accent); }
.pw-radio-option.selected.selected-ok { border-color: var(--ok); background: rgba(79, 174, 124, 0.12); color: var(--ok); }

.pw-defect { margin: 10px 0; padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); }
.pw-defect label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); max-width: 260px; }
.pw-extra { margin-top: 8px; }

.pw-comment { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); margin-top: 6px; }
.pw-comment textarea { width: 100%; min-height: 60px; resize: vertical; font-family: inherit; }

.pw-num { width: 160px; }

.pw-progress {
  position: sticky;
  bottom: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-top: 18px;
  box-shadow: 0 -4px 14px rgba(0,0,0,.35);
}
.pw-progress-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pw-step-name { flex: 1; font-weight: 600; font-size: 13px; }
.pw-frac { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); }
.pw-dev-badge {
  background: rgba(224, 160, 48, 0.15);
  color: var(--warn);
  border: 1px solid var(--accent-dim);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
}
.pw-bar { height: 6px; background: var(--panel-2); border-radius: 3px; overflow: hidden; margin-bottom: 10px; }
.pw-bar-fill { height: 100%; background: var(--accent); transition: width .25s; }
.pw-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.pw-pill {
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 10.5px;
  cursor: pointer;
  font-family: inherit;
}
.pw-pill:hover { border-color: var(--accent); }
.pw-pill.active { background: var(--accent); border-color: var(--accent); color: #14181D; font-weight: 600; }
.pw-autosave { font-size: 10.5px; color: var(--muted); opacity: 0; transition: opacity .3s; margin-top: 6px; text-align: right; }
.pw-autosave.show { opacity: 1; }

@media (max-width: 720px) {
  .pw-grid { grid-template-columns: 1fr; }
  .stats-kpi-grid, .stats-detail-kpi-grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Оглядові фото/відео протоколу (окремо від покрокових фото прийому авто) —
   галерея вже завантажених файлів + форма завантаження з drag&drop-порядком.
   ========================================================================== */
.proto-overview-toolbar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.proto-overview-gallery {
  display: flex; flex-wrap: wrap; gap: 10px;
  min-height: 40px;
}
.proto-overview-item {
  position: relative;
  width: 140px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-2);
  padding: 6px;
}
.proto-overview-item img, .proto-overview-item video {
  width: 100%; height: 100px; object-fit: cover; border-radius: 4px; background: #0d1116; display: block; cursor: pointer;
}
/* Відео в галереї — без нативних controls (клік відкриває спільний лайтбокс
   у вікні фіксованого розміру, а не нативний повноекранний режим браузера);
   бейдж "▶" лише візуальна підказка, кліки проходять крізь нього до відео. */
.proto-overview-play-badge {
  position: absolute;
  top: 6px; left: 50%;
  transform: translate(-50%, 42px);
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  pointer-events: none;
}
.proto-overview-item .proto-overview-actions { display: flex; justify-content: space-between; margin-top: 6px; gap: 4px; }
.proto-overview-item .proto-overview-actions a,
.proto-overview-item .proto-overview-actions button { font-size: 11px; }
.proto-overview-empty { color: var(--muted); font-size: 13px; padding: 10px 0; }

.proto-overview-pending { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.proto-overview-pending-item {
  width: 120px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-2);
  padding: 5px;
  cursor: grab;
  font-size: 10.5px;
}
.proto-overview-pending-item:active { cursor: grabbing; }
.proto-overview-pending-item img, .proto-overview-pending-item video {
  width: 100%; height: 80px; object-fit: cover; border-radius: 4px; background: #0d1116; display: block; pointer-events: none;
}
.proto-overview-pending-item .pending-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 4px 0 2px; }
.proto-overview-pending-item.proto-overview-dragging { opacity: .4; }
.proto-overview-pending-item.proto-overview-drag-over-before { box-shadow: inset 2px 0 0 0 var(--accent); }
.proto-overview-pending-item.proto-overview-drag-over-after { box-shadow: inset -2px 0 0 0 var(--accent); }

/* ===================== Авторизація (нова функціональність) ===================== */

.login-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.login-form {
  width: min(360px, 92vw);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}
.login-brand { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.login-form h1 { margin: 0 0 4px; font-size: 20px; }
.login-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
.login-form input {
  padding: 9px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font-size: 14px;
}
.login-error { color: var(--danger); font-size: 13px; }
.login-form .btn.primary { margin-top: 4px; padding: 10px; font-size: 14px; }

.topbar-user { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.topbar-user-name { color: var(--muted); font-size: 13px; white-space: nowrap; }

/* Налаштування → Користувачі: сітка галочок доступних вкладок у модалці. */
.settings-user-tabs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px 12px;
}
.settings-user-tabs-grid label {
  display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 400;
}

/* Права менеджера "редагувати/зберегти" та "видаляти" — суто інтерфісне
   приховування (сервер навмисно НЕ блокує ці запити додатково, за явним
   рішенням користувача). Кожна кнопка редагування/збереження/видалення по
   всьому застосунку позначена data-perm="edit"/"delete"; перегляд (усі
   кнопки без data-perm, напр. "Інфо"/"Перегляд") лишається доступним завжди. */
body.perm-no-edit [data-perm~="edit"] { display: none !important; }
body.perm-no-delete [data-perm~="delete"] { display: none !important; }