/* /Pages/Invoices/SalesInvoice.razor.rz.scp.css */
/* Екранний перегляд затвердженої накладної. Цей файл компілюється SDK у
   AndriyCo.Site2023.styles.css, підключений у HeadContent сусідньої Razor-сторінки.
   Окремий друкований iframe, як і раніше, отримує власні стилі A4 з sales-invoice.js. */
.invoice-preview[b-qexlm7rbp9] {
    box-sizing: border-box;
    max-width: 100%;
    margin: 24px 0;
    padding: 28px;
    border: 1px solid #b8b8b8;
    background: #fff;
    color: #111;
    font: 14px/1.45 Arial, sans-serif;
    overflow-wrap: anywhere;
}

    .invoice-preview h2[b-qexlm7rbp9] {
        margin: 0 0 6px;
        font-size: 22px;
        line-height: 1.3;
        text-align: center;
    }

.invoice-center[b-qexlm7rbp9] {
    text-align: center;
}

/* Частина абзаців створюється дочірнім InvoicePartyPrint. ::deep дозволяє задати
   їм такі самі відступи, не поширюючи правила на інші картки та футер сайту. */
.invoice-preview[b-qexlm7rbp9]  p {
    margin: 10px 0;
}

/* На телефоні залишаємо всі сім колонок таблицею, доступною для горизонтальної
   прокрутки та клавіатурної навігації. Решта сторінки залишається у ширині екрана. */
.invoice-table-scroll[b-qexlm7rbp9] {
    max-width: 100%;
    margin: 16px 0;
    overflow-x: auto;
}

.invoice-print-table[b-qexlm7rbp9] {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    table-layout: fixed;
    color: inherit;
    font: inherit;
}

    /* Межі та відступи кожної комірки візуально розділяють назву, одиницю, кількість,
   ціну й суму. Довгі назви переносяться всередині своєї колонки, не зсуваючи числа. */
    .invoice-print-table th[b-qexlm7rbp9],
    .invoice-print-table td[b-qexlm7rbp9] {
        border: 1px solid #555;
        padding: 8px;
        vertical-align: top;
        overflow-wrap: anywhere;
    }

    .invoice-print-table th[b-qexlm7rbp9] {
        background: #f0f0f0;
        font-weight: 700;
        text-align: center;
        vertical-align: middle;
    }

    .invoice-print-table td:first-child[b-qexlm7rbp9],
    .invoice-print-table td:nth-child(4)[b-qexlm7rbp9] {
        text-align: center;
    }

    /* Для зіставлення розрядів кількість, ціна й сума вирівняні праворуч.
   Не дозволяємо переносити одну суму між рядками. */
    .invoice-print-table .num[b-qexlm7rbp9] {
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

.invoice-total[b-qexlm7rbp9] {
    text-align: right;
}

.invoice-signatures[b-qexlm7rbp9] {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-top: 20px;
}

    .invoice-signatures p[b-qexlm7rbp9] {
        width: 48%;
    }

@media (max-width: 600px) {
    .invoice-preview[b-qexlm7rbp9] {
        padding: 12px;
        font-size: 12px;
    }

        .invoice-preview h2[b-qexlm7rbp9] {
            font-size: 18px;
        }
}

/* Фрагмент ItemTemplate має власний span зі scope сторінки, але mark створює
   MudHighlighter. ::deep охоплює mark і в поповері: жирність без кольорового фону. */
.invoice-name-option[b-qexlm7rbp9]  mark {
    font-weight: 700;
    color: inherit;
    background: transparent;
    padding: 0;
}