/* ==========================================================================
   Document editor + A4 sheet. Shared by /invoice/ and /quote/.
   ========================================================================== */

/* Capped to exactly the column widths below plus the horizontal padding, so
   the toolbar and heading line up with the edges of the form and the sheet
   instead of overhanging them on a wide monitor. */
.doc { padding: 2rem 1rem 4rem; max-width: 64rem; margin-inline: auto; }
@media (min-width: 768px)  { .doc { padding: 3rem 2rem 5rem; } }
@media (min-width: 1180px) { .doc { max-width: 89.5rem; } }   /* 28 + 56 + 1.5 gap + 4 padding */
@media (min-width: 1500px) { .doc { max-width: 95.5rem; } }   /* 34 + 56 + 1.5 gap + 4 padding */
@media (min-width: 1800px) { .doc { max-width: 103.5rem; } }  /* 40 + 58 + 1.5 gap + 4 padding */

.doc-head {
    display: flex; flex-wrap: wrap; gap: 1rem;
    align-items: flex-end; justify-content: space-between; margin-bottom: 1.5rem;
}
.doc-head h1 { font-size: clamp(2rem, 6vw, 3.5rem); margin-top: .375rem; }

.doc-toolbar {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--r-pill); padding: .5rem .75rem; margin-bottom: 1.5rem;
}
.doc-toolbar .spacer { flex: 1; }

/* The sheet is a preview of a physical A4 page, so it must not stretch with
   the viewport the way ordinary content does. Extra width therefore goes to
   the form column, and the pair stays centred rather than pinned left. */
.doc-layout { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }

@media (min-width: 1180px) {
    .doc-layout {
        grid-template-columns: minmax(0, 28rem) minmax(0, 56rem);
        justify-content: center;
        align-items: start;
    }
}
@media (min-width: 1500px) { .doc-layout { grid-template-columns: minmax(0, 34rem) minmax(0, 56rem); } }
@media (min-width: 1800px) { .doc-layout { grid-template-columns: minmax(0, 40rem) minmax(0, 58rem); } }

.doc-preview { position: static; }
@media (min-width: 1180px) { .doc-preview { position: sticky; top: 1.5rem; } }

/* --- Collapsible form sections -------------------------------------------- */

.fold { background: #fff; border: 1px solid var(--border); border-radius: var(--r-inner); margin-bottom: 1rem; }
.fold > summary {
    list-style: none; cursor: pointer; padding: 1rem 1.25rem;
    display: flex; align-items: center; gap: .625rem;
    font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary .chev { margin-left: auto; transition: transform .2s; color: var(--faint); }
.fold[open] > summary .chev { transform: rotate(90deg); }
.fold > summary .sub {
    margin-left: auto; font-size: .6875rem; font-weight: 500;
    text-transform: none; letter-spacing: 0; color: var(--muted);
}
.fold > summary .sub + .chev { margin-left: .625rem; }
.fold-body { padding: 0 1.25rem 1.25rem; }

/* --- Line editor ----------------------------------------------------------- */

.lines { display: flex; flex-direction: column; gap: .625rem; }

.line {
    display: grid; gap: .5rem;
    grid-template-columns: 1fr;
    background: #f9fafb; border: 1px solid var(--border);
    border-radius: .875rem; padding: .75rem;
}
.line .desc { grid-column: 1 / -1; }
.line .trio { display: grid; grid-template-columns: 4.5rem 1fr 6.5rem; gap: .5rem; }
.line .foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; padding-top: .125rem;
}
.line .amount { font-weight: 700; font-size: .875rem; }
.line.excluded { opacity: .55; }
.line input, .line select { padding: .5rem .625rem; font-size: .8125rem; border-radius: .625rem; }

.presets-bar { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .75rem; }
.presets-bar .preset {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .3125rem .75rem; border-radius: var(--r-pill);
    background: #fff; border: 1px solid var(--border); font-size: .75rem; font-weight: 600;
}
.presets-bar .preset:hover { border-color: var(--ink); }
.presets-bar .preset .kill { color: var(--faint); font-weight: 700; padding: 0 .125rem; }
.presets-bar .preset .kill:hover { color: var(--bad); }

/* --- Saved document list ---------------------------------------------------- */

.saved { display: flex; flex-direction: column; gap: .5rem; max-height: 20rem; overflow-y: auto; }
.saved .item {
    display: flex; align-items: center; gap: .75rem;
    padding: .625rem .875rem; border: 1px solid var(--border);
    border-radius: .75rem; background: #f9fafb; font-size: .8125rem;
}
.saved .item .n { font-weight: 700; }
.saved .item .who { color: var(--muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   The A4 sheet - this exact node is what the print stylesheet emits.
   ========================================================================== */

.sheet {
    background: #fff; color: #111827;
    border: 1px solid var(--border); border-radius: var(--r-inner);
    box-shadow: var(--shadow-lg);
    padding: 2.5rem;
    font-size: 12px; line-height: 1.55;
    max-width: 52rem; margin-inline: auto;
}
@media (min-width: 560px) { .sheet { padding: 3rem; } }

.sheet-top {
    display: flex; flex-wrap: wrap; gap: 1.5rem;
    justify-content: space-between; align-items: flex-start;
    padding-bottom: 1.75rem; border-bottom: 2px solid #111827;
}
.sheet-brand { max-width: 24rem; }
.sheet-brand img { max-height: 64px; width: auto; margin-bottom: .75rem; }
.sheet-brand .name { font-size: 20px; font-weight: 900; letter-spacing: -.04em; line-height: 1.15; }
.sheet-brand .meta { color: #4b5563; font-size: 11px; margin-top: .5rem; white-space: pre-line; }
.sheet-brand .regs { color: #6b7280; font-size: 10.5px; margin-top: .5rem; }

.sheet-title { text-align: right; }
.sheet-title h2 { font-size: 26px; font-weight: 900; letter-spacing: -.04em; }
.sheet-title .num { font-size: 13px; font-weight: 700; margin-top: .25rem; }
.sheet-title .dates { color: #4b5563; font-size: 11px; margin-top: .5rem; }
.sheet-title .dates b { color: #111827; }

.sheet-parties {
    display: grid; gap: 1.5rem; grid-template-columns: 1fr;
    padding: 1.75rem 0;
}
@media (min-width: 480px) { .sheet-parties { grid-template-columns: 1fr 1fr; } }
.sheet-parties .label {
    font-size: 9.5px; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: #9ca3af; margin-bottom: .375rem;
}
.sheet-parties .who { font-weight: 700; font-size: 13px; }
.sheet-parties .lines { color: #4b5563; font-size: 11px; white-space: pre-line; display: block; }

table.sheet-lines { width: 100%; border-collapse: collapse; }
table.sheet-lines th {
    text-align: left; font-size: 9.5px; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: #6b7280;
    padding: .5rem .5rem .5rem 0; border-bottom: 1px solid #111827;
}
table.sheet-lines td {
    padding: .625rem .5rem .625rem 0; border-bottom: 1px solid #f3f4f6;
    vertical-align: top; font-size: 11.5px;
}
table.sheet-lines th.r, table.sheet-lines td.r { text-align: right; padding-right: 0; }
table.sheet-lines th.c, table.sheet-lines td.c { text-align: center; }
table.sheet-lines tr { break-inside: avoid; page-break-inside: avoid; }
table.sheet-lines td .d { font-weight: 600; }
table.sheet-lines tr.optional td { color: #6b7280; }
table.sheet-lines .opt-tag {
    display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: #6b7280; border: 1px solid #d1d5db;
    border-radius: 999px; padding: 0 .375rem; margin-left: .375rem; vertical-align: 1px;
}

.sheet-totals { display: flex; justify-content: flex-end; margin-top: 1.25rem; }
.sheet-totals table { width: 100%; max-width: 17rem; }
.sheet-totals td { padding: .3125rem 0; font-size: 11.5px; }
.sheet-totals td.r { text-align: right; font-variant-numeric: tabular-nums; }
.sheet-totals tr.grand td {
    border-top: 2px solid #111827; padding-top: .625rem; margin-top: .25rem;
    font-size: 15px; font-weight: 900; letter-spacing: -.02em;
}
.sheet-totals tr.deposit td { color: #4b5563; }
.sheet-totals tr.deposit.due td { font-weight: 700; color: #111827; }

.sheet-blocks { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 480px) { .sheet-blocks { grid-template-columns: 1fr 1fr; } }
.sheet-block { break-inside: avoid; page-break-inside: avoid; }
.sheet-block .label {
    font-size: 9.5px; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: #9ca3af; margin-bottom: .375rem;
}
.sheet-block .body { font-size: 11px; color: #374151; white-space: pre-line; }
.sheet-block.bank { background: #f9fafb; padding: .875rem 1rem; border-radius: .5rem; }
.sheet-block.bank .row { display: flex; justify-content: space-between; gap: 1rem; font-size: 11px; }
.sheet-block.bank .row span:first-child { color: #6b7280; }
.sheet-block.bank .row span:last-child { font-weight: 600; }

.sheet-foot {
    margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #e5e7eb;
    font-size: 10px; color: #9ca3af; display: flex; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap;
}

.sheet .vat-line { font-size: 10.5px; color: #4b5563; margin-top: .5rem; }

/* ==========================================================================
   Print - only the sheet survives.
   ========================================================================== */

@page { size: A4; margin: 14mm; }

@media print {
    html, body { background: #fff !important; padding: 0 !important; margin: 0 !important; }

    .site-header, .burger, .nav-drawer, .site-footer,
    .doc-head, .doc-toolbar, .doc-form, .no-print, #toast { display: none !important; }

    .slab { box-shadow: none !important; border-radius: 0 !important; background: #fff !important; overflow: visible !important; }
    .doc { padding: 0 !important; max-width: none !important; }
    .doc-layout { display: block !important; }
    .doc-preview { position: static !important; }

    .sheet {
        box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
        padding: 0 !important; max-width: none !important; margin: 0 !important;
        font-size: 10.5pt; color: #000;
    }
    .sheet-top { border-bottom-color: #000; }
    .sheet-totals tr.grand td { border-top-color: #000; }

    a { text-decoration: none; color: inherit; }

    /* Chrome drops background fills unless asked; the banking block relies on one. */
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}