/* ==========================================================================
   Лист счёта A4 (.paper / .p-*) — «Стол документа»
   ⚠ Фиксированные цвета бумаги ОСОЗНАННО без var(--*): лист = физический
   носитель А4, в тёмной теме остаётся белым (исключение из правила
   CSS-переменных — зафиксировано в schet_docplan_udalit.txt, симуляция v2).
   ========================================================================== */

/* ===== Масштаб и сам лист ===== */
.paper-scale { transform-origin: top center; transition: transform .15s; }
.paper {
    width: 794px;              /* A4 = 210mm @96dpi */
    min-height: 1123px;        /* A4 = 297mm @96dpi */
    background: #fdfbf5;
    color: #1a1a1a;
    font-family: 'Times New Roman', Georgia, serif;
    font-size: 13px;
    line-height: 1.45;
    padding: 48px 52px;
    box-shadow: var(--paper-shadow, 0 8px 32px rgba(15, 23, 42, .14));
}

/* ===== Click-to-edit подсветка (только на экране) ===== */
.paper [data-doc-field] { cursor: pointer; border-radius: 2px; transition: background .15s; }
.paper [data-doc-field]:hover { background: rgba(90, 82, 224, .05); }
.paper [data-focused="true"] { outline: 2px solid var(--primary); outline-offset: 2px; animation: paperPulse .6s; }
@keyframes paperPulse { 0% { box-shadow: 0 0 0 0 rgba(90, 82, 224, .4); } 100% { box-shadow: 0 0 0 8px rgba(90, 82, 224, 0); } }

/* ===== Шапка ===== */
.p-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; border-bottom: 2px solid #1a1a1a; padding-bottom: 14px; }
.p-supplier-name { font-size: 18px; font-weight: 700; overflow-wrap: anywhere; word-break: break-word; }
.p-supplier-sub { font-size: 11px; color: #555; margin-top: 2px; }
.p-invoice-title { text-align: right; flex-shrink: 0; }
.p-invoice-title h1 { font-size: 22px; font-weight: 700; text-transform: uppercase; margin: 0; }
.p-invoice-num { font-size: 14px; margin-top: 6px; }
.p-invoice-date { font-size: 13px; color: #444; }

/* ===== Стороны ===== */
.p-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 20px; }
.p-party { min-width: 0; }
.p-party h3 { font-size: 12px; text-transform: uppercase; color: #666; margin: 0 0 6px; border-bottom: 1px solid #ccc; padding-bottom: 3px; }
.p-line { font-size: 12px; margin-bottom: 2px; overflow-wrap: anywhere; word-break: break-word; }
.p-line b { color: #333; }

/* ===== Платёжный блок (+ QR-слот 1-в-1 с DOCX) ===== */
.p-payment { margin-bottom: 18px; font-size: 11px; }
.p-pay-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.p-pay-table td { padding: 4px 8px; border: 1px solid #bbb; vertical-align: middle; }
.p-pay-table td:not([data-doc-field]):not(.p-pay-qr) { font-weight: 700; background: #f9fafb; width: 28%; }
.p-pay-table td[data-doc-field] { background: #fff; word-break: break-word; }
.p-pay-qr { width: 110px; text-align: center; vertical-align: middle !important; background: #fff; padding: 6px !important; }
.p-qr { text-align: center; }
/* SVG от qrcode приходит с width/height в мм (плавают от длины payload) —
   фиксируем CSS (viewBox масштабирует чисто, вектор чёткий на печати) */
.p-qr svg { display: block; margin: 0 auto; width: 72px; height: 72px; }
.p-qr-label { font-size: 8px; text-align: center; color: #666; margin-top: 3px; font-weight: 400; }
.p-qr--standalone { display: inline-block; border: 1px solid #bbb; padding: 8px; background: #fff; }

/* ===== Таблица позиций ===== */
/* table-layout: fixed + ширины колонок — спам длинной строкой без пробелов
   не распирает лист за границы (перенос anywhere) */
.p-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; table-layout: fixed; }
.p-table th:nth-child(1) { width: 5%; }
.p-table th:nth-child(2) { width: 45%; }
.p-table th:nth-child(3) { width: 7%; }
.p-table th:nth-child(4) { width: 10%; }
.p-table th:nth-child(5) { width: 12%; }
.p-table th:nth-child(6) { width: 9%; }
.p-table th:nth-child(7) { width: 12%; }
.p-table th { background: #1a1a1a; color: #fff; padding: 6px 5px; font-size: 11px; font-weight: 700; text-align: center; border: 1px solid #1a1a1a; }
.p-table td { padding: 5px; border: 1px solid #999; font-size: 12px; text-align: center; overflow-wrap: anywhere; word-break: break-word; }
.p-td-name { text-align: left; }
.p-td-price, .p-td-total { text-align: right; font-variant-numeric: tabular-nums; }
.p-table tr.p-section-row td { background: #ececec; color: #1a1a1a; font-weight: 700; text-align: left; letter-spacing: .3px; border-top: 2px solid #666; }

/* ===== Итоги и сумма прописью ===== */
.p-totals { text-align: right; margin-bottom: 16px; font-size: 12px; }
.p-tot-row { padding: 2px 0; }
.p-tot-row b { display: inline-block; min-width: 140px; text-align: right; }
.p-tot-final { font-size: 16px; font-weight: 700; border-top: 2px solid #1a1a1a; padding-top: 6px; margin-top: 4px; }
.p-tot-words { font-size: 12px; font-weight: 700; margin-top: 8px; font-style: italic; color: #333; overflow-wrap: anywhere; }

/* ===== Назначение платежа ===== */
.p-purpose { font-size: 12px; margin-bottom: 14px; padding: 8px; background: #fafafa; border-left: 3px solid #999; overflow-wrap: anywhere; word-break: break-word; }
.p-purpose b { display: block; font-size: 11px; text-transform: uppercase; color: #666; margin-bottom: 3px; }

/* ===== Подписи и печать ===== */
.p-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 32px; padding-top: 16px; }
.p-sig { font-size: 12px; }
.p-sig-role { font-weight: 700; margin-bottom: 18px; }
.p-sig-line { border-bottom: 1px solid #1a1a1a; height: 16px; margin-bottom: 4px; }
.p-sig-name { font-size: 11px; color: #555; }
.p-stamp {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 110px;
    height: 54px;
    border: 1px dashed #999;
    color: #777;
    margin-top: -8px;
    margin-left: 14px;
    font-weight: 400;
}
.p-stamp-br { font-size: 8px; text-transform: uppercase; letter-spacing: .3px; }
.p-stamp-mp { font-size: 12px; font-weight: 700; letter-spacing: 1px; }

/* ===== Подсказка самозанятого (печатается — часть документа) ===== */
.p-self-hint { margin-top: 12px; font-size: 10px; color: #555; }

/* ===== Мобильный: лист остаётся A4 794px (та же разметка, что desktop/print) —
   reflow-перекройка (width:100%) рвала числа в узких колонках и двойно сжималась
   fit-scale'ом; вписывание — мобильная ветка applyZoom (масштаб от ширины
   вьюпорта). Стороны/подписи — 2 колонки как на десктопе (лист фиксированный).
   Защита цепочки от широкого листа — в document_page.css (мобильный блок). ===== */

/* ===== Печать: ТОЛЬКО лист (ноль UI/дисклеймеров).
   ⚠ Каскад @page: глобальный print.css грузится ПОСЛЕ extra_css —
   финальная проверка приоритета @page документа — Шаг 3 (печать). ===== */
@media print {
    .paper-scale {
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .paper {
        box-shadow: none !important;
        width: 100% !important;
        max-width: 794px !important;
        min-height: auto !important;
        margin: 0 auto !important;
        padding: 48px 52px !important;
        background: #ffffff !important;
        color: #1a1a1a !important;
    }
    .paper [data-doc-field] { cursor: default !important; }
    .paper [data-doc-field]:hover { background: transparent !important; }
    .paper [data-focused="true"] { outline: none !important; animation: none !important; }

    /* Разрывы страниц: блоки документа атомарны (подписи/итоги/стороны
       не разносить по страницам), шапка таблицы повторяется на каждой */
    .p-header, .p-parties, .p-payment, .p-totals, .p-purpose,
    .p-signatures, .p-self-hint {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .p-table tr { break-inside: avoid; page-break-inside: avoid; }
    .p-table thead { display: table-header-group; }

    /* Железобетон: на печати стороны и подписи ВСЕГДА в 2 колонки —
       мобильный @media (max-width:768px) НЕ должен срабатывать при узкой
       печатной области (масштаб/поля принтера в диалоге) */
    .p-parties, .p-signatures {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }
}