/* ============================================================
   Document design — единственият източник на истина за печатния
   документ (фактура / проформа / кредитно / дебитно / оферта /
   гаранционна карта).

   Зарежда се в пет места:
     1. /invoices/view/{id}   (inline, през .invoice-preview-wrap)
     2. /v/{token}            (публичен изглед)
     3. /invoices/pdf/{id}    (dompdf — файлът се inline-ва от
                               invoices/_pdf_wrapper.phtml)
     4. /offers/pdf/{id}      (dompdf — offers/_pdf_wrapper.phtml)
     5. /warranties/pdf/{id}  (dompdf — warranties/_pdf.phtml)

   ПРАВИЛА при редакция — файлът се парсва и от dompdf:
     • без CSS променливи (dompdf не разбира var()) — марковото синьо
       е #0b5fff, същото като --brand-blue;
     • без flex/grid — оформлението е само <table> + inline-block;
     • px навсякъде: dompdf смята px при 96dpi, а A4 минус полетата на
       @page дава почти същата ширина като .doc-preview в браузъра,
       затова един и същ размер излиза еднакво и на двете места;
     • НЕ слагай shorthand `padding` на селектор, който после трябва да
       се пренапише по страни от по-слаб селектор — dompdf спазва
       специфичността и shorthand-ът печели. Точно това изяде
       вътрешните отстъпи на колоните „Доставчик/Получател" в PDF-а,
       докато в браузъра ги спасяваше !important.
   ============================================================ */

.doc-preview {
    background: #fff;
    color: #0F172A;
    padding: 32px 36px;
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    border-top: 4px solid #0b5fff;
    box-sizing: border-box;
}

/* Shared text helpers */
.doc-preview .doc-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #94A3B8;
    font-weight: 700;
    margin-bottom: 4px;
}
.doc-preview .doc-line {
    color: #475569;
    font-size: 11px;
    margin: 2px 0;
    line-height: 1.5;
}
/* Етикетът пред датата („Издадена:", „Падеж:") стои НЕудебелен.
   Тежест 500 няма насрещен шрифт в PDF-а — dompdf пада на Times-Bold и
   надписът излизаше удебелен там, докато на екран изглеждаше нормален.
   Приглушава го цветът, не тежестта. */
.doc-preview .doc-muted {
    color: #94A3B8;
    font-weight: 400;
}

/* Logo bar */
.doc-logo-bar { margin-bottom: 14px; }
.doc-logo { max-width: 240px; max-height: 80px; display: block; }

/* Title bar: doc type + number on left, status + dates on right */
.doc-title-bar {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 22px;
}
.doc-title-bar td { vertical-align: middle; }
.doc-title-left { text-align: left; padding-left: 10px; }
.doc-title-right { text-align: right; padding-right: 10px; }
.doc-type-title {
    font-size: 20px;
    font-weight: 800;
    color: #0b5fff;
    letter-spacing: 2.5px;
    line-height: 1.1;
    margin: 0;
}
.doc-number {
    font-size: 14px;
    font-weight: 700;
    color: #0F172A;
    margin-top: 2px;
    letter-spacing: .5px;
}
.doc-title-dates {
    font-size: 11px;
    color: #475569;
    margin-top: 4px;
}
.doc-title-dates strong { color: #0F172A; font-weight: 600; }
/* Всяка дата е на собствен ред — датите се четат по-лесно, отколкото
   когато са наниз с разделители. */
.doc-title-date { display: block; line-height: 1.6; }

.doc-status-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.doc-status-pill.is-paid { background: #D1FAE5; color: #047857; }
.doc-status-pill.is-void { background: #FEE2E2; color: #B91C1C; }
.doc-status-pill.is-accepted { background: #D1FAE5; color: #047857; }
.doc-status-pill.is-declined { background: #FEE2E2; color: #B91C1C; }
.doc-status-pill.is-expired { background: #F1F5F9; color: #475569; }

/* Parties: supplier LEFT, recipient RIGHT */
.doc-parties {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 18px;
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
}
.doc-parties td.doc-party {
    vertical-align: top;
    padding-top: 16px;
    padding-bottom: 16px;
    width: 50%;
}
/* Отстъпите се пишат със същата специфичност като реда отгоре и след
   него — иначе dompdf ги игнорира (виж бележката в началото). */
.doc-parties td.doc-party-left { padding-left: 10px; padding-right: 32px; border-right: 1px solid #E2E8F0; }
.doc-parties td.doc-party-right { padding-left: 32px; }
.doc-party-name {
    font-size: 14px;
    font-weight: 700;
    margin: 3px 0 6px;
    color: #0F172A;
    line-height: 1.3;
}

/* Лента с един ключов факт под реквизитите: данъчното събитие на фактурата
   (само когато се различава от датата на издаване) и гаранционният срок на
   картата. Един вид за двете — `.doc-strip` е неутралното име. */
.doc-tax-event,
.doc-strip {
    font-size: 11px;
    color: #64748B;
    margin: 0 0 14px;
    padding: 8px 12px 8px 7px;
    background: #F8FAFC;
    border-radius: 4px;
    border-left: 3px solid #0b5fff;
}
.doc-tax-event strong,
.doc-strip strong { color: #0F172A; }

/* Заглавие на подраздел вътре в документа (напр. „История на гаранцията").
   Не е <h3> по подразбиране — dompdf слага собствени полета на заглавията. */
.doc-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #0F172A;
    margin: 18px 0 6px;
    letter-spacing: .3px;
}

/* Дълъг обвързващ текст в каре — гаранционните условия. */
.doc-terms {
    margin: 14px 0;
    padding: 10px 12px 10px 7px;
    background: #F8FAFC;
    border-left: 3px solid #0b5fff;
    border-radius: 3px;
    font-size: 11px;
    color: #475569;
    line-height: 1.6;
}
.doc-terms strong { color: #0F172A; }

/* Parent ref (credit / debit notes) */
.doc-parent-ref {
    padding: 9px 12px 9px 7px;
    background: #FEF3C7;
    border-left: 3px solid #F59E0B;
    border-radius: 3px;
    font-size: 11px;
    color: #78350F;
    margin-bottom: 14px;
}
.doc-parent-ref strong { color: #78350F; }

/* Lines */
.doc-lines {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
    font-size: 11px;
}
.doc-lines thead th {
    background: #F1F5F9;
    color: #334155;
    padding: 9px 10px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    border-bottom: 2px solid #CBD5E1;
}
.doc-lines thead th.doc-th-num { text-align: right; }
.doc-lines thead th.doc-col-idx { text-align: left; }
.doc-lines tbody td {
    padding: 9px 10px;
    border-bottom: 1px solid #E2E8F0;
    vertical-align: top;
    font-size: 11px;
}
.doc-lines tbody tr:last-child td { border-bottom: 0; }
/* Всички редове тръгват от ЕДНА линия — на 10px навътре, колкото е отстъпът
   в клетките на таблицата (Trello #198). Първо изравних текста до самия ръб на
   документа, но тогава „№" опира в сивата лента. Затова се мести ЛИНИЯТА, а не
   отстъпът: лентите пазят въздуха си и пак се схождат.
   Ширината на таблицата НЕ се пипа — dompdf не разбира calc() там и таблицата
   се свива до съдържанието си (проверено с истински PDF). */
.doc-col-idx { width: 28px; color: #94A3B8; text-align: left; font-size: 10px; }
.doc-col-qty { text-align: right; white-space: nowrap; width: 80px; }
.doc-col-price { text-align: right; white-space: nowrap; width: 95px; }
.doc-col-vat { text-align: right; white-space: nowrap; width: 50px; color: #64748B; }
.doc-col-total { text-align: right; white-space: nowrap; width: 105px; font-weight: 700; }
.doc-unit { color: #94A3B8; font-size: 10px; margin-left: 3px; }
.doc-line-desc { color: #64748B; font-size: 10px; margin-top: 3px; line-height: 1.4; }
/* Колони на гаранционната карта — артикулите носят сериен номер вместо суми,
   а събитията са дата + вид + описание. */
.doc-col-serial { width: 150px; white-space: nowrap; }
.doc-col-date { width: 90px; white-space: nowrap; }
.doc-col-type { width: 110px; white-space: nowrap; }
.doc-cell-empty { color: #94A3B8; text-align: center; }

/* Totals — right-aligned table */
.doc-totals-table {
    margin-left: auto;
    border-collapse: collapse;
    min-width: 320px;
    max-width: 60%;
    margin-top: 12px;
}
.doc-totals-table td {
    padding: 5px 14px;
    font-size: 11px;
    vertical-align: middle;
}
.doc-tt-label { color: #64748B; text-align: left; white-space: nowrap; }
.doc-tt-value { text-align: right; font-weight: 600; white-space: nowrap; color: #0F172A; }
.doc-tt-grand td {
    border-top: 2px solid #0F172A;
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: 13px;
    font-weight: 700;
}
.doc-tt-grand td.doc-tt-label { color: #0F172A; }
.doc-tt-grand td.doc-tt-value { color: #0b5fff; font-size: 15px; }

/* VAT reason */
.doc-vat-reason {
    margin: 14px 0;
    padding: 9px 12px 9px 7px;
    border-left: 3px solid #0b5fff;
    background: #EFF6FF;
    border-radius: 3px;
    font-size: 11px;
    color: #1E3A8A;
}
.doc-vat-reason em { color: #475569; font-style: normal; }
/* Касовата отчетност е задължителен надпис, не обяснение — един ясен ред. */
.doc-cash-accounting strong { font-size: 12px; color: #1E3A8A; }

/* Документ в чужда валута — сумите в евро по курса на ЕЦБ */
.doc-fx {
    margin: 6px 0 0;
    font-size: 10.5px;
    color: #475569;
    text-align: right;
}

/* Payment info */
.doc-payment {
    margin: 14px 0;
    padding: 10px 10px 10px 7px;
    background: #F0F9FF;
    border-left: 3px solid #0EA5E9;
    border-radius: 3px;
    font-size: 11px;
}
.doc-payment strong { color: #075985; }
/* При плащане в брой етикетът е единственото съдържание, а неговият долен
   отстъп изместваше текста нагоре спрямо лентата (Trello #198, коментар).
   Разстоянието до банковите редове се пази от тях самите. */
.doc-payment .doc-label { margin-bottom: 0; }
.doc-payment .doc-line { margin-top: 4px; margin-bottom: 0; }

/* Notes */
.doc-notes {
    margin: 14px 0;
    padding-left: 10px;
    font-size: 11px;
    color: #475569;
}

/* Signatures */
.doc-signatures-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 32px;
    padding-top: 18px;
    border-top: 1px solid #E2E8F0;
}
.doc-signatures-table td {
    width: 50%;
    padding: 6px 18px 6px 10px;
    vertical-align: top;
}
.doc-sig-line {
    display: block;
    border-bottom: 1px solid #94A3B8;
    height: 22px;
    margin-top: 6px;
}

/* Footer — рендира се само в PDF-а */
.doc-footer {
    margin-top: 28px;
    padding-top: 12px;
    border-top: 1px solid #E2E8F0;
    text-align: center;
    font-size: 9px;
    color: #94A3B8;
}

/* Responsive for narrow viewports — collapse parties to stacked blocks.

   ВНИМАНИЕ за PDF-а: dompdf НЕ игнорира `screen` — това е неговият
   defaultMediaType. Спасява го само `max-width: 560px` = 420pt срещу 595pt
   ширина на A4, тоест условието не съвпада. Вдигне ли се тази граница над
   ~794px, целият блок влиза и в PDF-а. */
@media screen and (max-width: 560px) {
    .doc-preview { padding: 20px 12px; }
    .doc-title-bar td,
    .doc-title-left,
    .doc-title-right { display: block; width: 100%; text-align: left; padding: 0; }
    .doc-title-right { margin-top: 8px; }
    .doc-parties td.doc-party {
        display: block;
        width: 100%;
        padding: 12px 0;
        border-right: 0;
        border-bottom: 1px solid #E2E8F0;
    }
    .doc-parties td.doc-party-left { padding-right: 0; }
    .doc-parties td.doc-party-right { padding-left: 0; border-bottom: 0; }
    .doc-totals-table { min-width: 100%; max-width: 100%; }
    /* Етикетът се пренася: „Общо по известието (за прихващане)" не се побираше
       до сумата и тя излизаше отрязана вдясно на телефон. */
    .doc-totals-table td.doc-tt-label { white-space: normal; }

    /* Редовете имат фиксирани ширини (28+80+95+50+105) плюс по 10px падинг —
       на телефон това дава по-широка таблица от картата: страницата тръгваше
       на хоризонтален скрол, а таблицата стърчеше ВДЯСНО спрямо линиите над и
       под нея (Trello #112, коментар).

       `table-layout: fixed` е същината: с `auto` минималната ширина на
       съдържанието (числата са nowrap) разтяга таблицата над 100% и никакво
       стесняване на колоните не помага. С `fixed` обявените ширини са закон,
       таблицата е точно колкото картата, а артикулът поема остатъка и се
       пренася. Нищо не отпада — документът е данъчен. */
    .doc-lines { table-layout: fixed; max-width: 100%; font-size: 10px; }
    .doc-lines thead th,
    .doc-lines tbody td { padding: 6px 4px; font-size: 10px; }
    /* Без разредката на главните букви „СТОЙНОСТ" се побира в колоната. */
    .doc-lines thead th { letter-spacing: 0; }
    /* Двуезичните заглавия („ЕД. ЦЕНА / UNIT PRICE") и мерки („бр. / pcs")
       се пренасят в колоната си — с nowrap стърчаха върху съседната колона.
       Мярката се мести цяла под количеството, не се цепи. */
    .doc-lines thead th { white-space: normal; overflow-wrap: break-word; }
    .doc-lines tbody td.doc-col-qty { white-space: normal; }
    .doc-lines .doc-unit { white-space: nowrap; }
    .doc-col-idx { width: 16px; }
    .doc-col-qty { width: 46px; }
    .doc-col-price { width: 58px; }
    .doc-col-vat { width: 34px; }
    .doc-col-total { width: 64px; }
    .doc-col-serial { width: 88px; white-space: normal; overflow-wrap: anywhere; }
    .doc-col-date { width: 62px; }
    .doc-col-type { width: 70px; white-space: normal; }
    /* Дългото име се пренася, вместо да разпъва колоната. `break-word`, не
       `anywhere`: думата се цепи само ако сама не се събира в колоната
       („Диагност|ика" ставаше дори когато имаше място на следващия ред);
       `hyphens` слага тире, където браузърът има речник за езика. */
    .doc-lines tbody td:nth-child(2) { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
}