/* =============================================
   FINANCE PRO ELITE — INVOICE / PDF STYLES (FULL)
   Файл: invoice-fix.css

   КОНТРАКТ:
   - Меняем ТОЛЬКО внешний вид накладной (PDF/превью),
     не трогаем общий style.css и логику приложения.
   - Цель: "как обычный PDF" + отлично читается на телефоне:
     • по ширине экрана, без уменьшения "А4 → мелкий шрифт"
     • чёткие разделители блоков
     • таблицы с вертикальными разделителями (палочки)
     • ничего не налезает друг на друга

   ДОПОЛНЕНИЕ (ЭТОТ ШАГ):
   - Цветовой статус оплаты:
     • Оплачено полностью — зелёный
     • Оплачено частично — оранжевый
     • Не оплачено — красный
   ============================================= */

* { box-sizing: border-box; }

/* ================================
   0) ОБЛАСТИ, К КОТОРЫМ ПРИМЕНЯЕМ
   ================================ */
#ship-doc-preview, #extra-doc-preview,
#ship-doc-preview.doc, #extra-doc-preview.doc,
.doc,
#pdf-root, .pdf-root, .invoice-page, #invoice, .invoice {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ================================
   1) БАЗОВАЯ ТИПОГРАФИКА (МОБИЛА)
   ================================ */
#pdf-root, .pdf-root, .invoice-page, #invoice, .invoice,
#ship-doc-preview.doc, #extra-doc-preview.doc, .doc {
  font-size: clamp(14px, 3.6vw, 16px) !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

#pdf-root h1, #pdf-root h2, #pdf-root h3,
.invoice-page h1, .invoice-page h2, .invoice-page h3,
.doc h1, .doc h2, .doc h3 {
  margin: 0 0 8px 0 !important;
  line-height: 1.18 !important;
}

/* ================================
   2) ШИРИНА: "НА ВЕСЬ ЭКРАН"
   ================================ */
#ship-doc-preview.doc, #extra-doc-preview.doc, .doc,
#pdf-root, .pdf-root, .invoice-page, #invoice, .invoice {
  width: 100% !important;
  max-width: 100% !important;
}

/* Если документ сидит в модалке и она его сжимает — расширяем контейнер */
.md .mc:has(#ship-doc-preview.doc),
.md .mc:has(#extra-doc-preview.doc),
.md .mc:has(.doc) {
  width: 100% !important;
  max-width: 100vw !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Фолбэк, если :has() не поддерживается */
@supports not(selector(:has(*))) {
  .md .mc { max-width: 100vw; }
}

#pdf-root, .pdf-root, .invoice-page, #invoice, .invoice,
#ship-doc-preview.doc, #extra-doc-preview.doc, .doc {
  padding: clamp(10px, 2.8vw, 16px) !important;
}

/* ================================
   3) РАЗДЕЛИТЕЛИ БЛОКОВ
   ================================ */
:root{
  --pdf-line: 1px solid rgba(0,0,0,0.15);
  --pdf-line-strong: 1px solid rgba(0,0,0,0.22);
  --pdf-grid: 1px solid rgba(0,0,0,0.12);

  /* статусы оплаты */
  --pay-green: #137333;
  --pay-orange: #b06000;
  --pay-red: #b3261e;
  --pay-bg-green: rgba(19,115,51,0.10);
  --pay-bg-orange: rgba(176,96,0,0.12);
  --pay-bg-red: rgba(179,38,30,0.10);
}

.pdf-divider {
  border-top: var(--pdf-line);
  margin: 14px 0 !important;
}

.invoice-page .box, #invoice .box, .invoice .box,
.doc .box {
  border: var(--pdf-line);
  padding: 10px 10px !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* ================================
   4) ТАБЛИЦЫ: СЕТКА + ПАЛОЧКИ
   ================================ */
#pdf-root table, .pdf-root table, .invoice-page table, #invoice table, .invoice table,
.doc table {
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
}

#pdf-root th, #pdf-root td,
.invoice-page th, .invoice-page td,
#invoice th, #invoice td,
.invoice th, .invoice td,
.doc th, .doc td {
  padding: 8px 6px !important;
  vertical-align: top !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  border-right: var(--pdf-grid) !important;
}

#pdf-root th:last-child, #pdf-root td:last-child,
.invoice-page th:last-child, .invoice-page td:last-child,
#invoice th:last-child, #invoice td:last-child,
.invoice th:last-child, .invoice td:last-child,
.doc th:last-child, .doc td:last-child {
  border-right: none !important;
}

#pdf-root thead th,
.invoice-page thead th,
#invoice thead th,
.invoice thead th,
.doc thead th {
  border-bottom: var(--pdf-line-strong) !important;
  font-weight: 600 !important;
}

#pdf-root tbody tr:last-child td,
.invoice-page tbody tr:last-child td,
#invoice tbody tr:last-child td,
.invoice tbody tr:last-child td,
.doc tbody tr:last-child td {
  border-bottom: var(--pdf-line-strong) !important;
}

#pdf-root tbody td, .invoice-page tbody td, #invoice tbody td, .invoice tbody td, .doc tbody td {
  border-top: none !important;
}

/* ================================
   5) ВЫРАВНИВАНИЕ: ЦИФРЫ НЕ ПЛЯШУТ
   ================================ */
.pdf-left   { text-align: left !important; }
.pdf-center { text-align: center !important; }
.pdf-right  { text-align: right !important; }

td.num, td.price, td.sum, td.right,
th.num, th.right,
.doc td.num, .doc td.price, .doc td.sum, .doc td.right,
.doc th.num, .doc th.right {
  text-align: right !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
}

td.date, td.nowrap, .nowrap,
.doc td.date, .doc td.nowrap {
  white-space: nowrap !important;
}

/* ================================
   6) СТАТУС ОПЛАТЫ (ЦВЕТА)
   ================================ */
/* Логика такая:
   - JS (или верстка) ставит класс на строку/ячейку/значение:
     .status-paid / .status-partial / .status-unpaid
   - Мы красиво подсвечиваем сумму и делаем лёгкий "бейдж".
*/
.status-paid {
  color: var(--pay-green) !important;
  font-weight: 800 !important;
}
.status-partial {
  color: var(--pay-orange) !important;
  font-weight: 800 !important;
}
.status-unpaid {
  color: var(--pay-red) !important;
  font-weight: 800 !important;
}

/* Если статус стоит на контейнере строки — подсветим фон суммы внутри */
.status-paid .value, .status-paid .sum, .status-paid .amt,
.status-partial .value, .status-partial .sum, .status-partial .amt,
.status-unpaid .value, .status-unpaid .sum, .status-unpaid .amt {
  display: inline-block !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

/* Фоны */
.status-paid .value, .status-paid .sum, .status-paid .amt { background: var(--pay-bg-green) !important; }
.status-partial .value, .status-partial .sum, .status-partial .amt { background: var(--pay-bg-orange) !important; }
.status-unpaid .value, .status-unpaid .sum, .status-unpaid .amt { background: var(--pay-bg-red) !important; }

/* Фолбэк: если в верстке у суммы просто класс .paid/.partial/.unpaid */
.paid { color: var(--pay-green) !important; font-weight: 800 !important; }
.partial { color: var(--pay-orange) !important; font-weight: 800 !important; }
.unpaid { color: var(--pay-red) !important; font-weight: 800 !important; }

/* ================================
   7) ПЕЧАТЬ: КАК "ОБЫЧНЫЙ PDF"
   ================================ */
@media print {

  html, body {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #pdf-root, .pdf-root, .invoice-page, #invoice, .invoice, .doc {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    page-break-inside: avoid !important;
  }

  table, tr, td, th {
    page-break-inside: avoid !important;
  }

  .no-print,
  .pdf-actions,
  .pdf-toolbar,
  .topbar,
  .actions {
    display: none !important;
  }

  @page {
    size: A4 portrait;
    margin: 12mm;
  }
}

/* ================================
   8) ОЧЕНЬ УЗКИЕ ЭКРАНЫ
   ================================ */
@media (max-width: 360px) {
  #pdf-root, .pdf-root, .invoice-page, #invoice, .invoice,
  #ship-doc-preview.doc, #extra-doc-preview.doc, .doc {
    font-size: 14px !important;
  }
  #pdf-root th, #pdf-root td,
  .invoice-page th, .invoice-page td,
  #invoice th, #invoice td,
  .invoice th, .invoice td,
  .doc th, .doc td {
    padding: 7px 5px !important;
  }
}