/*
 * Comprovantes e resumos do PDV com aparencia de cupom de impressora termica.
 *
 * Estilo global (sem isolamento de CSS do Blazor) porque o mesmo documento e
 * desenhado em tres lugares: na tela, no clone usado para gerar a imagem e no
 * iframe de impressao, que carrega somente este arquivo.
 *
 * Tela e imagem: papel amarelo-claro. Impressao: papel branco, mesma fonte,
 * separadores e alinhamentos.
 */

@font-face {
    font-family: "Veetz Receipt Mono";
    src: url("../fonts/noto-sans-mono-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: block;
}

.veetz-receipt {
    --veetz-receipt-paper: #fffbb8;
    --veetz-receipt-ink: #3b3b3b;
    --veetz-receipt-muted: #5f5f5f;

    box-sizing: border-box;
    width: 100%;
    max-width: 46ch;
    margin: 0 auto;
    padding: 1.1em 1.2ch 1.2em;
    background: var(--veetz-receipt-paper);
    color: var(--veetz-receipt-ink);
    font-family: "Veetz Receipt Mono", monospace;
    font-size: 15px;
    font-weight: 400;
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "calt" 0;
    line-height: 1.3;
    letter-spacing: 0;
    text-align: left;
    overflow-wrap: anywhere;
    -webkit-font-smoothing: antialiased;
}

.veetz-receipt *,
.veetz-receipt *::before,
.veetz-receipt *::after {
    box-sizing: border-box;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}

.veetz-receipt p,
.veetz-receipt h1,
.veetz-receipt h2,
.veetz-receipt h3 {
    margin: 0;
}

.veetz-receipt__center {
    text-align: center;
}

.veetz-receipt__upper {
    text-transform: uppercase;
}

.veetz-receipt .veetz-receipt__title {
    margin: 1.3em 0 1.3em;
    text-align: center;
    text-transform: uppercase;
}

.veetz-receipt__gap {
    height: 1.3em;
}

.veetz-receipt__rule {
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.1;
    user-select: none;
}

.veetz-receipt__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 1ch;
    break-inside: avoid;
    page-break-inside: avoid;
}

.veetz-receipt__label {
    flex: 1 1 auto;
    min-width: 0;
    text-transform: uppercase;
}

.veetz-receipt__value {
    flex: 0 1 auto;
    margin-left: auto;
    min-width: 0;
    text-align: right;
    white-space: pre-wrap;
}

.veetz-receipt__row--strong {
    font-weight: 700;
}

.veetz-receipt__row--indent > .veetz-receipt__label {
    padding-left: 2ch;
    text-transform: none;
}

.veetz-receipt__text {
    white-space: pre-wrap;
    break-inside: avoid;
    page-break-inside: avoid;
}

.veetz-receipt__item {
    break-inside: avoid;
    page-break-inside: avoid;
}

.veetz-receipt__item + .veetz-receipt__item {
    margin-top: 0.35em;
}

.veetz-receipt__muted {
    color: var(--veetz-receipt-muted);
}

.veetz-receipt__footer {
    margin-top: 0.4em;
    color: var(--veetz-receipt-muted);
    font-size: 0.86em;
    text-align: center;
    break-inside: avoid;
    page-break-inside: avoid;
}

/* Moldura da tela: rolagem propria para documentos longos, sem cortar conteudo. */
.veetz-receipt-view {
    display: flex;
    justify-content: center;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: var(--rz-base-200, #eeeeee);
}

@media (max-width: 480px) {
    .veetz-receipt {
        font-size: 13px;
    }

    .veetz-receipt-view {
        padding: 0.5rem 0;
    }
}

/* Documento aberto no iframe de impressao. Sem @page: papel, orientacao e margens
   ficam com o que o usuario escolher no dialogo do navegador. */
body.veetz-receipt-print {
    margin: 0;
    background: #ffffff;
}

@media print {
    body.veetz-receipt-print .veetz-receipt {
        --veetz-receipt-paper: #ffffff;
        --veetz-receipt-ink: #000000;
        --veetz-receipt-muted: #333333;

        /* Largura, fonte e espacamento iguais aos da tela (vem em linha do veetz-receipt.js). */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}