/* =====================================================================
   Вкладка "Документи" (32-й раунд) — таблиця авто + статуси 5 типів
   документів, і модалка мультизавантаження (файл / вставка з буфера /
   посилання) в #docsMultiModalOverlay. Змінні кольорів (--muted/--accent/
   --border/--danger/--ok тощо) успадковуються зі style.css — тут лише
   нові класи, нічого не перевизначається.
   ===================================================================== */

/* 35-й раунд: прибрано max-height:74vh — з overflow-y:visible висота
   рамки/фону .table-wrap обмежувалась 74vh, а РЯДКИ таблиці (реальний
   контент) не підрізались (overflow-y:visible) і просто "витікали" ЗА МЕЖІ
   видимої рамки-контейнера, коли рядків більше, ніж влазить у 74vh — саме
   це виглядало як "таблиця відображається за межами таблиці". Прибираємо
   max-height взагалі — той самий підхід, що й у .avto-table-wrap/
   .proces-table-wrap (style.css): сторінка сама скролиться, шапка таблиці
   лишається "приклеєною" (position:sticky на thead th), а рамка-контейнер
   тепер завжди охоплює РІВНО стільки, скільки реально займає таблиця. */
.documents-table-wrap { overflow-x: clip; overflow-y: visible; }

/* 33-й раунд: фіксована розкладка колонок (той самий підхід, що й
   #carsTable/#procesTable у style.css) — без цього назва авто ламалась по
   ОДНІЙ літері (overflow-wrap:anywhere з .cell-nowrap застосовувався до
   ВСІЄЇ комірки, а не лише до рядка VIN). Тепер overflow-wrap:anywhere
   лишається ЛИШЕ на .documents-car-sub (VIN — суцільний рядок без пробілів,
   якому справді треба десь ламатись); назва авто переноситься нормально —
   по пробілах/дефісах. */
#documentsTable { table-layout: fixed; width: 100%; font-size: 11.5px; }
#documentsTable td, #documentsTable th {
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  overflow: hidden;
  padding: 6px 8px;
}
.documents-car-name { font-weight: 600; }
.documents-car-sub {
  font-size: 11px;
  color: var(--muted);
  overflow: visible;
  overflow-wrap: anywhere;
  margin-top: 2px;
}

#documentsTable .doc-col { text-align: center; }

/* 33-й раунд: № фактури-"заглушка" (складається лише з цифри 1 — "1",
   "11", "1111" тощо) — явна ознака, що реальний номер ще не внесли. */
.documents-placeholder-invoice {
  color: var(--danger);
  font-weight: 700;
}

.documents-row-count { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* Перемикачі "Показати склад" / "Тільки продані" — активний стан. */
.documents-toolbar .btn.ghost.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

/* ---------- Тулбар "Документи" — мультивибір продавців/країн ---------- */

.documents-toolbar { row-gap: 10px; }

/* 37-й раунд: перемикач "Продаж АБО закупка" (task #52) — розміщений між
   групами фільтрів "Продаж — місяць" і "Закупка — рік"; align-self
   вирівнює його по нижньому краю (як самі <select>), а не по верху
   (де в сусідніх .filter-group стоїть підпис <label>). */
.docs-or-toggle-btn {
  align-self: flex-end;
  white-space: nowrap;
}

.filter-multiselect {
  position: relative;
  align-self: flex-end;
}
.filter-multiselect summary {
  list-style: none;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 12px;
  font-size: 12.5px;
  color: var(--text);
  background: var(--panel);
  white-space: nowrap;
}
.filter-multiselect summary::-webkit-details-marker { display: none; }
.filter-multiselect[open] summary { border-color: var(--accent); }
/* 48-й раунд: position:fixed замість absolute, top/left проставляються
   в JS (documents.js::positionMultiselectPanel) при відкритті <details>,
   а не через CSS top:calc(100%+4px)/left:0 — інакше в модалці "Вивантажити"
   панель "вилазила за межі" модального вікна: <details> лежить глибоко
   всередині #docsExportModalOverlay .modal, а .modal має overflow:auto/
   position:static, і панель, позиціонована ВІДНОСНО НАЙБЛИЖЧОГО
   position:relative-предка (сам .filter-multiselect, десь усередині
   модалки), просто малювалась ПОВЕРХ модалки й фону за нею замість
   акуратного випадаючого списку в межах видимої області. position:fixed
   рахується від viewport — завжди в межах екрана, незалежно від того,
   в модалці компонент чи ні. */
.filter-multiselect-panel {
  position: fixed;
  z-index: 300;
  min-width: 220px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.filter-multiselect-panel label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 4px;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
}
.filter-multiselect-panel .filter-multiselect-actions {
  display: flex;
  gap: 8px;
  padding: 2px 4px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.filter-multiselect-panel .filter-multiselect-actions button {
  border: none;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-size: 11.5px;
  padding: 0;
}
.filter-multiselect-panel .filter-multiselect-empty { font-size: 12px; color: var(--muted); padding: 4px; }

.doc-status-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.doc-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: default;
  border: 1px solid var(--border);
  color: var(--muted);
  background: transparent;
}
.doc-status-badge.doc-status-ok {
  color: var(--ok);
  border-color: var(--ok);
  cursor: pointer;
}
.doc-status-badge.doc-status-ok:hover { background: rgba(62, 207, 110, .12); }

.doc-status-add {
  width: 22px;
  height: 22px;
  line-height: 1;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.doc-status-add:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Модалка мультизавантаження ---------- */

#docsMultiSlots {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 10px 0;
  max-height: 58vh;
  overflow-y: auto;
}

.docs-multi-slot {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.docs-multi-slot-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.docs-multi-type { flex: 1 1 200px; min-width: 160px; }

/* Інформативна позначка "в авто вже є файл(и) такого типу" — та сама
   перевірка на дублікат, що й у майстрі "Розпізнати та завантажити", лише
   тут без розбору вмісту файлу (просто рахунок за типом документа). */
/* Новий раунд: сильніше застереження (не просто "перевірте", а точна
   вказівка) — для типів, де новий файл дійсно ЗАМІНЮЄ старий на диску
   (SINGLE_FILE_DOC_TYPES у documents.js). */
.docs-multi-replace-note { color: var(--danger) !important; }

.docs-multi-dupe-note {
  font-size: 11.5px;
  color: var(--muted);
  margin: -2px 0 8px;
}

.docs-multi-methods {
  display: flex;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  flex: none;
}
.docs-multi-method-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
}
.docs-multi-method-btn + .docs-multi-method-btn { border-left: 1px solid var(--border); }
.docs-multi-method-btn.active { background: var(--accent-dim); color: var(--accent); font-weight: 600; }

.docs-multi-remove {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  flex: none;
  padding: 2px 6px;
}
.docs-multi-remove:hover { color: var(--danger); }

.docs-multi-method-section { margin-top: 4px; }
.docs-multi-method-section input[type="file"],
.docs-multi-method-section input[type="url"] { width: 100%; }

.docs-multi-paste-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 14px 10px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  cursor: text;
  transition: border-color .15s, background-color .15s;
}
.docs-multi-paste-zone:focus { outline: none; border-color: var(--accent); background: var(--accent-dim); }
.docs-multi-paste-zone.has-file { border-style: solid; border-color: var(--ok); color: var(--text); }

.docs-multi-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}
.docs-multi-preview:empty { display: none; }
.docs-multi-preview img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.docs-multi-preview .docs-multi-preview-remove {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
}
.docs-multi-preview .docs-multi-preview-remove:hover { color: var(--danger); }

.docs-multi-status { margin-top: 6px; font-size: 12px; }
.docs-multi-status.status-pending { color: var(--muted); }
.docs-multi-status.status-ok { color: var(--ok); }
.docs-multi-status.status-err { color: var(--danger); }

/* ---------- Модалка "Розпізнати та завантажити" ---------- */

.docs-recognize-hint {
  font-size: 12.5px;
  color: var(--muted);
  margin: 8px 0 10px;
}

#docsRecognizeResults {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
  max-height: 56vh;
  overflow-y: auto;
}

.docs-recognize-row {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.docs-recognize-row.row-done { opacity: .6; }
.docs-recognize-row.row-err { border-color: var(--danger); }

/* Група файлів, зіставлених з ОДНИМ і тим самим авто (2+ файли в одному
   пакеті розпізнавання) — прохання користувача: групувати такі файли,
   показувати дані з кожного і дати вибрати, які саме завантажувати. */
.docs-recognize-car-group {
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--accent-dim);
}
.docs-recognize-car-group .docs-recognize-row { background: var(--panel); }
.docs-recognize-car-group-head {
  font-size: 12.5px;
  color: var(--text);
  padding: 0 2px;
}

/* Позначка "дані вже є в базі, перезаписувати не треба" — нейтрально-позитивна (той самий колір, що й статус "успішно завантажено"). */
.docs-recognize-already-match {
  font-size: 12px;
  color: var(--ok);
  margin-top: 4px;
}

.docs-recognize-row-check {
  flex: none;
  display: flex;
  align-items: center;
}
.docs-recognize-row-check input[type="checkbox"] { width: 16px; height: 16px; }

.docs-recognize-row-main {
  flex: 1 1 260px;
  min-width: 220px;
}
.docs-recognize-filename {
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.docs-recognize-note {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}
.docs-recognize-note.note-warn { color: var(--danger); }
/* 36-й раунд: підпис "— Pozycja N" біля назви файлу — коли один PDF (комунікат
   вивозу) описує кілька авто, кожне зі своїм рядком у списку результатів. */
.docs-recognize-position {
  font-weight: 400;
  color: var(--muted);
  font-size: 12px;
}
.docs-recognize-match {
  font-size: 12px;
  color: var(--ok);
  margin-top: 3px;
}

.docs-recognize-row-vin {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.docs-recognize-row-vin label {
  font-size: 11px;
  color: var(--muted);
}
.docs-recognize-row-vin input {
  width: 200px;
  font-family: monospace;
  text-transform: uppercase;
}

.docs-recognize-status {
  flex: none;
  font-size: 12px;
  min-width: 90px;
  text-align: right;
}
.docs-recognize-status.status-ok { color: var(--ok); }
.docs-recognize-status.status-err { color: var(--danger); }

/* Кнопка-посилання всередині рядка результату (пропозиція змінити тип / скасувати) — той самий вигляд, що й кнопки "Обрати всі"/"Очистити" в мультивиборі фільтрів. */
.link-btn {
  border: none;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-size: inherit;
  padding: 0;
  text-decoration: underline;
}
.link-btn:hover { opacity: .8; }

.docs-recognize-suggestion {
  font-size: 12px;
  color: var(--text);
  margin-top: 4px;
  background: var(--accent-dim);
  border-radius: 4px;
  padding: 4px 7px;
  display: inline-block;
}
.docs-recognize-type-override {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}
.docs-recognize-invoice-preview {
  font-size: 12px;
  color: var(--ok);
  margin-top: 4px;
}

.docs-recognize-dupe-note {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}
/* Новий раунд: та сама позначка, але для типів, де новий файл дійсно
   ЗАМІНЮЄ старий на диску (SINGLE_FILE_DOC_TYPES) — сильніший колір. */
.docs-recognize-replace-note { color: var(--danger) !important; }

.docs-recognize-conflict {
  font-size: 12px;
  color: var(--danger);
  margin-top: 5px;
  background: rgba(224, 82, 82, .08);
  border: 1px solid var(--danger);
  border-radius: 4px;
  padding: 6px 8px;
}
.docs-recognize-conflict-check {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  color: var(--text);
  cursor: pointer;
}
.docs-recognize-conflict-check input[type="checkbox"] { width: 14px; height: 14px; }

/* ---------- Модалка "Вивантажити" (ZIP-архів документів за місяць) ---------- */

.docs-export-hint {
  font-size: 12.5px;
  color: var(--muted);
  margin: 8px 0 10px;
}

.docs-export-actions-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

#docsExportList {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
  max-height: 52vh;
  overflow-y: auto;
}

.docs-export-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 10px;
  cursor: pointer;
}
.docs-export-row input[type="checkbox"] { width: 16px; height: 16px; flex: none; }
.docs-export-row-name { flex: 1 1 auto; font-size: 13px; }
.docs-export-row-count { flex: none; font-size: 12px; color: var(--muted); }
.docs-export-row-empty { opacity: .55; }

/* 36-й раунд: режим "Пакет документів по авто" — рядок показує наявні/
   відсутні частини комплекту позначками ✓/✗. */
.docs-export-row-parts { display: flex; gap: 8px; flex-wrap: wrap; }
.docs-export-part { white-space: nowrap; }
.docs-export-part.has { color: var(--accent); }
.docs-export-part.missing { color: var(--muted); opacity: .7; }

/* ---------- 36-й раунд: перемикач режиму "За типами документів" / "Пакет документів по авто" ---------- */

.docs-export-mode-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}
.docs-export-mode-btn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}
.docs-export-mode-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
  font-weight: 600;
}

.docs-export-section-label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}

.docs-export-type-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 14px;
}
.docs-export-type-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}
.docs-export-type-check input[type="checkbox"] { width: 15px; height: 15px; }

.docs-export-month-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 10px;
}
.docs-export-month-grid-single { grid-template-columns: 1fr; }
.docs-export-month-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px 10px;
  display: flex;
  gap: 8px;
}
.docs-export-month-group legend {
  font-size: 11.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 0 4px;
}
.docs-export-month-group select { flex: 1 1 0; min-width: 0; }
/* 47-й раунд: місяць у модалці "Вивантажити" тепер мультивибір (checkbox-
   панель, той самий компонент .filter-multiselect, що й Продавці/Країни/
   місяці в самій таблиці "Документи") замість звичайного <select> —
   тут лише розтягуємо його на всю доступну ширину поруч із роком. */
.docs-export-month-group .filter-multiselect { flex: 1 1 0; min-width: 0; align-self: auto; }
.docs-export-month-group .filter-multiselect summary {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.docs-export-combine-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  margin: 10px 0 4px;
  cursor: pointer;
}
.docs-export-combine-check input[type="checkbox"] { width: 15px; height: 15px; margin-top: 2px; flex: none; }
.docs-export-combine-check.disabled,
.docs-export-combine-check:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.docs-export-combine-hint { color: var(--muted); font-size: 12px; }