/* Invoice templates (v0.23): the printed document on screen (.ivd — its own look comes from the inline rules
   InvoiceDesignTemplates::css() writes), the template editor, the gallery of real miniatures, the thermal preview
   and the send/share bars. Paper stays white in dark mode; only the chrome around it follows the theme. */

/* ---------- the document on screen ---------- */
.ivd { position: relative; box-sizing: border-box; min-width: 0; max-width: 100%; background: #fff; color: #17161c; border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 28px 30px; overflow: hidden; text-align: left; }
.ivd table { border-collapse: collapse; }
.ivd td { box-sizing: border-box; }
.ivd .ivd-logo { display: block; object-fit: contain; }
.ivd .ivd-ctr .ivd-logo, .ivd .ivd-ctr > .ivd-logo { margin: 0 auto; }
.ivd .ivd-r .ivd-logo { margin-left: auto; }
.ivd .ivd-logocell { width: 1%; padding-right: 12px !important; }
.ivd .ivd-meta td { white-space: nowrap; }
.ivd .ivd-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.ivd .ivd-qr svg { display: block; width: 100px; height: 100px; }
.ivd .ivd-sigimg { display: inline-block; object-fit: contain; }
.ivd.ivd--head-band > .ivd-head.ivd-t { width: calc(100% + 60px); max-width: none; margin: -28px -30px 12px; }
.ivd--head-band .ivd-band { padding: 22px 30px !important; }
.ivd-stamp { position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%) rotate(-14deg); font-size: 64px; font-weight: 900; color: rgba(180, 35, 24, .16); border: 6px solid rgba(180, 35, 24, .16); padding: 0 24px; pointer-events: none; text-transform: uppercase; z-index: 1; }
.ivd-stamp--draft { color: rgba(92, 90, 102, .16); border-color: rgba(92, 90, 102, .16); }
@media (max-width: 640px) {
  .ivd { padding: 16px; }
  .ivd.ivd--head-band > .ivd-head.ivd-t { width: calc(100% + 32px); margin: -16px -16px 12px; }
  .ivd--head-band .ivd-band { padding: 16px !important; }
  .ivd-stamp { font-size: 40px; }
}
@media print {
  .ivd { border: 0; border-radius: 0; padding: 0; overflow: visible; }
  .ivd.ivd--head-band > .ivd-head.ivd-t { width: 100%; margin: 0 0 12px; }
  .ivd--head-band .ivd-band { padding: 14px 16px !important; }
  .ivd, .ivd * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ivd .ivd-scroll { overflow: visible; }
}
.print-sheet--a4 .ivd, .print-sheet--a4l .ivd, .print-sheet--a5 .ivd { box-shadow: var(--shadow-2); }
.print-sheet--a4 .ivd { width: 210mm; max-width: 100%; min-height: 200mm; }
.print-sheet--a4l .ivd { width: 297mm; max-width: 100%; }
.print-sheet--a5 .ivd { width: 148mm; max-width: 100%; font-size: 7.4pt; padding: 18px; }
.print-sheet--a5 .ivd.ivd--head-band > .ivd-head.ivd-t { width: calc(100% + 36px); margin: -18px -18px 10px; }
@media print {
  .print-sheet--a4 .ivd, .print-sheet--a4l .ivd, .print-sheet--a5 .ivd { width: auto; min-height: 0; box-shadow: none; padding: 0; }
  .print-sheet--a5 .ivd.ivd--head-band > .ivd-head.ivd-t { width: 100%; margin: 0 0 10px; }
}

/* ---------- thermal roll ---------- */
.roll--large { font-size: 14px; }
.print-sheet--t58 .roll--large { font-size: 12px; }
.roll__hdr { font-weight: 700; }
.roll__tax { display: flex; justify-content: space-between; gap: 6px; font-size: .85em; }

/* Container-based stacking: a document narrower than a phone screen stacks its columns; previews and miniatures
   (fixed paper widths, scaled) never do. */
.ivd { container-type: inline-size; }
@container (max-width: 600px) {
  .ivd-stack { display: block; width: auto !important; }
  .ivd-head .ivd-stack + .ivd-stack, .ivd-parties .ivd-stack + .ivd-stack { padding-top: 8px; }
  .ivd-head .ivd-r, .ivd-head .ivd-r .ivd-title { text-align: left; }
  .ivd-meta { float: none; margin-left: 0; }
  .ivd-meta .ivd-mk, .ivd-meta .ivd-mv { text-align: left; }
  .ivd-lines { min-width: 560px; }
  .ivd-signrow .ivd-sign { text-align: left; padding-top: 12px; }
  .ivd-foot-t .ivd-stack + .ivd-stack { padding-top: 10px; }
}

/* ---------- status bits ---------- */
.pill--info { background: var(--c-info-soft); color: var(--c-info); }
.alert--info { background: var(--c-info-soft); color: var(--c-info); margin: 0; }

/* ---------- Settings → Invoice templates ---------- */
.content:has(.tpl-studio) { max-width: 1440px; }
.tpl-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--c-surface-2); border-radius: var(--r-pill); margin: 0 0 var(--s-5); max-width: 100%; }
.tpl-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 var(--s-4); border-radius: var(--r-pill); color: var(--c-text-2); font-weight: 650; font-size: var(--fs-sm); text-decoration: none; white-space: nowrap; }
.tpl-tab[aria-current="page"] { background: var(--c-surface); color: var(--c-text); box-shadow: var(--shadow-1); }
.tpl-tab:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.tpl-studio { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); grid-template-areas: "pick" "stage" "opts"; align-items: start; }
.tpl-studio--thermal { grid-template-areas: "stage" "opts"; }
.tpl-pick { grid-area: pick; min-width: 0; }
.tpl-stage { grid-area: stage; min-width: 0; }
.tpl-opts { grid-area: opts; min-width: 0; }
.tpl-studio fieldset.card { border: 0; margin: 0; }
.tpl-studio .card + .card { margin-top: 0; }
@media (min-width: 1080px) {
  .tpl-studio { grid-template-columns: minmax(340px, 430px) minmax(0, 1fr); grid-template-areas: "pick stage" "opts stage"; }
  .tpl-studio--thermal { grid-template-areas: "opts stage"; }
  .tpl-stage { position: sticky; top: var(--s-4); align-self: start; max-height: calc(100vh - 2 * var(--s-4)); overflow: auto; }
}
@media (max-width: 640px) { .tpl-studio .card { padding: var(--s-4); } }
.tpl-legend, .tpl-h2 { float: left; width: 100%; padding: 0; margin: 0 0 var(--s-1); font-family: var(--font-display); font-weight: 400; font-size: var(--fs-xl); line-height: 1.2; color: var(--c-text); }
.tpl-legend + *, .tpl-sec-head + * { clear: both; }
.tpl-sec-head { display: grid; gap: 2px; margin-bottom: var(--s-3); }
.tpl-sec-head .tpl-h2 { float: none; margin: 0; }
.tpl-studio .input--sm { min-height: 38px; padding: 4px 32px 4px 10px; font-size: var(--fs-sm); width: auto; max-width: 100%; }
@media (max-width: 640px) { .tpl-studio .input--sm { font-size: 16px; } }

/* Template gallery: real renders, scaled */
.tpl-gallery { display: grid; gap: var(--s-4) var(--s-3); grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.tpl-thumb { position: relative; min-width: 0; }
.tpl-thumb__pick { display: grid; gap: 4px; cursor: pointer; }
.tpl-thumb__pick input { position: absolute; opacity: 0; pointer-events: none; }
.tpl-thumb__paper { position: relative; display: block; aspect-ratio: 210 / 297; overflow: hidden; background: #fff; border-radius: 6px; box-shadow: 0 0 0 1px var(--c-border), 0 1px 2px rgba(22, 23, 28, .06); transition: box-shadow var(--t-fast, 150ms) ease-out, transform var(--t-fast, 150ms) ease-out; }
.tpl-thumb--land .tpl-thumb__paper { aspect-ratio: 297 / 210; }
.tpl-thumb__scale { position: absolute; top: 0; left: 0; width: 794px; transform-origin: top left; transform: scale(.15); pointer-events: none; }
.tpl-thumb__scale .ivd { border: 0 !important; border-radius: 0 !important; padding: 28px 30px !important; min-height: 1123px; }
.tpl-thumb--land .tpl-thumb__scale .ivd { min-height: 794px; }
.tpl-thumb__scale .ivd.ivd--head-band > .ivd-head.ivd-t { width: calc(100% + 60px); margin: -28px -30px 12px; }
.tpl-thumb__pick:hover .tpl-thumb__paper { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--c-border), var(--shadow-2); }
.tpl-thumb__pick input:checked + .tpl-thumb__paper { box-shadow: 0 0 0 2px var(--c-accent), 0 0 0 6px var(--c-accent-soft); }
.tpl-thumb__pick input:checked + .tpl-thumb__paper::after { content: ""; position: absolute; right: 6px; bottom: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.tpl-thumb__pick input:focus-visible + .tpl-thumb__paper { outline: 2px solid var(--c-accent); outline-offset: 4px; }
.tpl-thumb__pick input:disabled + .tpl-thumb__paper { cursor: default; }
.tpl-thumb__name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; font-weight: 650; font-size: var(--fs-sm); line-height: 1.25; }
.tpl-thumb__name .badge { height: 18px; font-size: 10.5px; margin: 0; }
.tpl-thumb__sub { font-size: 12px; line-height: 1.3; color: var(--c-text-3); }
.tpl-thumb__edit { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-surface); color: var(--c-text); box-shadow: var(--shadow-2); }
.tpl-thumb--new { display: grid; gap: 4px; align-content: start; color: inherit; text-decoration: none; }
.tpl-thumb__paper--new { display: grid; place-items: center; background: transparent; box-shadow: none; border: 1.5px dashed var(--c-border); color: var(--c-accent); }
.tpl-thumb__paper--new .icon { width: 28px; height: 28px; }
.tpl-thumb--new:hover .tpl-thumb__paper--new { border-color: var(--c-accent); background: var(--c-accent-soft); }
@media (max-width: 640px) {
  .tpl-gallery { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 104px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 4px 10px; margin: 0 -4px; -webkit-overflow-scrolling: touch; }
  .tpl-thumb { scroll-snap-align: start; }
}

/* Live preview: a sheet of paper on the desk */
.tpl-stage { background: var(--c-surface-2); border-radius: var(--r-lg); padding: var(--s-4); box-shadow: inset 0 0 0 1px var(--c-hairline); }
.tpl-stage__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-3); }
.tpl-as { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--c-text-2); min-width: 0; }
.tpl-live { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-2); }
.tpl-live__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-ok); box-shadow: 0 0 0 3px var(--c-ok-soft); }
.tpl-studio.is-loading .tpl-live__dot { background: var(--c-gold); box-shadow: 0 0 0 3px var(--c-gold-soft); animation: tpl-pulse .9s ease-in-out infinite; }
@keyframes tpl-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .tpl-studio.is-loading .tpl-live__dot { animation: none; } }
.tpl-btn-sm { min-height: 38px; padding: 0 var(--s-3); font-size: var(--fs-sm); }
.tpl-viewport { position: relative; overflow: hidden; }
.tpl-paper { width: 794px; transform-origin: top left; }
.tpl-paper--a4l { width: 1123px; }
.tpl-paper--a5 { width: 559px; }
.tpl-paper .ivd { border: 0; border-radius: 3px; padding: 28px 30px; min-height: 1123px; box-shadow: 0 1px 2px rgba(22, 23, 28, .08), 0 18px 40px -18px rgba(22, 23, 28, .35); transition: opacity var(--t-fast, 150ms); }
.tpl-paper--a4l .ivd { min-height: 794px; }
.tpl-paper--a5 .ivd { min-height: 794px; font-size: 7.6pt; padding: 22px; }
.tpl-paper .ivd.ivd--head-band > .ivd-head.ivd-t { width: calc(100% + 60px); margin: -28px -30px 12px; }
.tpl-paper--a5 .ivd.ivd--head-band > .ivd-head.ivd-t { width: calc(100% + 44px); margin: -22px -22px 10px; }
.tpl-studio.is-loading .tpl-paper .ivd { opacity: .82; }
.tpl-stage__note { margin: var(--s-3) 0 0; }

/* Options */
.tpl-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tpl-swatch { position: relative; cursor: pointer; }
.tpl-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.tpl-swatch span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sw); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }
.tpl-swatch input:checked + span { outline: 2.5px solid var(--sw); outline-offset: 3px; }
.tpl-swatch input:focus-visible + span { outline: 2.5px solid var(--c-text); outline-offset: 3px; }
.tpl-swatch--custom span { background: conic-gradient(from 90deg, #B45309, #BE123C, #7E22CE, #1D4ED8, #0F766E, #15803D, #B45309); }
.tpl-swatch--custom input:checked + span { background: var(--sw); outline-color: var(--sw); }
.tpl-colour-input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 50%; opacity: 0; cursor: pointer; }
.tpl-colour-input:focus-visible + span, .tpl-swatch--custom:focus-within span { outline: 2.5px solid var(--c-text); outline-offset: 3px; }
.tpl-fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.tpl-font { position: relative; cursor: pointer; }
.tpl-font input { position: absolute; opacity: 0; pointer-events: none; }
.tpl-font span { display: grid; place-items: center; gap: 2px; min-height: 64px; padding: 8px 4px; border-radius: var(--r-md); background: var(--c-surface-2); box-shadow: inset 0 0 0 1px var(--c-border); text-align: center; }
.tpl-font b { font-size: 22px; font-weight: 600; line-height: 1.1; }
.tpl-font small { font-size: 11.5px; line-height: 1.2; color: var(--c-text-2); }
.tpl-font input:checked + span { background: var(--c-accent-soft); box-shadow: inset 0 0 0 1.5px var(--c-accent); }
.tpl-font input:focus-visible + span { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.tpl-toggles { display: grid; }
.tpl-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 52px; padding: var(--s-2) 0; border-bottom: 1px solid var(--c-hairline); cursor: pointer; }
.tpl-toggles > .tpl-toggle:last-of-type { border-bottom: 0; }
.tpl-toggle > span { display: grid; gap: 2px; min-width: 0; font-weight: 600; }
.tpl-toggle small { font-weight: 400; font-size: var(--fs-xs); color: var(--c-text-3); overflow-wrap: anywhere; }
.tpl-toggle > input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 44px; height: 26px; margin: 0; border-radius: var(--r-pill); background: var(--c-border); cursor: pointer; transition: background var(--t-fast, 150ms); }
.tpl-toggle > input[type="checkbox"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform var(--t-fast, 150ms); }
.tpl-toggle > input[type="checkbox"]:checked { background: var(--c-accent); }
.tpl-toggle > input[type="checkbox"]:checked::after { transform: translateX(18px); }
.tpl-toggle > input[type="checkbox"]:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .tpl-toggle > input[type="checkbox"], .tpl-toggle > input[type="checkbox"]::after { transition: none; } }
.tpl-logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.tpl-logo-mini { max-height: 28px; max-width: 96px; object-fit: contain; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px var(--c-border); }
.tpl-link { position: relative; display: inline; padding: 0; border: 0; background: none; color: var(--c-accent); font: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.tpl-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.tpl-link:focus-within, .tpl-upload:focus-within { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.tpl-upload { position: relative; }
.tpl-file-name { color: var(--c-ok) !important; }
.tpl-file-name:empty { display: none; }
.tpl-more summary { cursor: pointer; font-weight: 650; min-height: 40px; display: flex; align-items: center; }
.tpl-field-pair { margin-bottom: var(--s-2); }
.tpl-field-pair .input:first-child { flex: 1 1 120px; min-width: 0; }
.tpl-field-pair .input:last-child { flex: 2 1 160px; min-width: 0; }
.tpl-perdoc { display: grid; }
.tpl-perdoc__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 52px; border-bottom: 1px solid var(--c-hairline); font-weight: 600; }
.tpl-perdoc__row:last-child { border-bottom: 0; }
.tpl-perdoc__row select { flex: 0 0 56%; width: 56%; }
.tpl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tpl-titles { display: grid; gap: var(--s-2) var(--s-3); grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.tpl-titles .field { margin: 0; }
.tpl-roll-view { display: grid; justify-items: center; padding: var(--s-4) 0; }
.tpl-roll-sheet .roll { box-shadow: 0 1px 2px rgba(22, 23, 28, .08), 0 18px 40px -18px rgba(22, 23, 28, .35); border-radius: 2px; }
.tpl-roll-sheet.print-sheet--t80 .roll { width: 80mm; }
.tpl-roll-sheet.print-sheet--t58 .roll { width: 58mm; font-size: 10.5px; }
.tpl-roll-sheet .roll--large { font-size: 14px; }
.tpl-roll-sheet.print-sheet--t58 .roll--large { font-size: 12px; }

/* ---------- Send / share (sales and purchase documents) ---------- */
.send-card { margin-bottom: var(--s-4); }
.send-card__head { display: flex; align-items: flex-start; gap: var(--s-3); }
.send-card__title { margin: 0 0 2px; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-xl); line-height: 1.2; }
.send-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: var(--s-2); }
.send-action-wrap { display: contents; }
.send-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 74px; padding: 10px 8px; border: 0; border-radius: var(--r-md); background: var(--c-surface-2); color: var(--c-text); font: inherit; font-size: var(--fs-sm); font-weight: 650; text-align: center; text-decoration: none; cursor: pointer; box-shadow: inset 0 0 0 1px var(--c-border); transition: box-shadow var(--t-fast, 150ms), transform var(--t-fast, 150ms); }
.send-action .icon { width: 22px; height: 22px; }
.send-action:hover { box-shadow: inset 0 0 0 1.5px var(--c-accent); transform: translateY(-1px); }
.send-action:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.send-action--wa { background: #E6F5EC; color: #0F6334; box-shadow: inset 0 0 0 1px #BCE3CB; }
:root[data-theme="dark"] .send-action--wa { background: #10291C; color: #7EDBA4; box-shadow: inset 0 0 0 1px #1F4A31; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .send-action--wa { background: #10291C; color: #7EDBA4; box-shadow: inset 0 0 0 1px #1F4A31; } }
.send-card__link { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; overflow-wrap: anywhere; }
.next-card { margin-bottom: var(--s-4); box-shadow: var(--shadow-1), inset 3px 0 0 var(--c-gold); }
.next-card__head { display: flex; align-items: flex-start; gap: var(--s-3); }
.next-card__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--c-gold-soft); color: var(--c-gold); }
.books-card summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.send-mail { max-width: 720px; }