/* Vystaviť e-faktúru zadarmo (/nastroje/vystavit). On top of issue.css (form, items, live sheet, date fields) and
   doklad.css (the printed document); only tokens from base.css. */

.nv { padding-bottom: var(--s-8); }
.nv-crumbs { display: flex; gap: var(--s-2); align-items: center; padding-top: var(--s-5); font-size: var(--f-13); color: var(--ink-2); }
.nv-crumbs a { color: var(--ink-2); }
.nv-crumbs a:hover { color: var(--stamp); }

/* ── hero: what it is, and the three promises ────────────────────────── */
.nv-hero { padding: var(--s-5) 0 var(--s-6); }
.nv-hero h1 { font-size: clamp(var(--f-33), 3.6vw, 44px); line-height: 1.1; letter-spacing: -0.02em; max-width: 20ch; text-wrap: balance; }
.nv-hero .lead { margin: var(--s-3) 0 var(--s-4); max-width: 64ch; }
.nv-promise { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0; padding: 0; list-style: none; }
.nv-promise li { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--f-15); line-height: 22px; }
.nv-promise svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--ok); }
.nv-noscript { padding: var(--s-3) var(--s-4); border-radius: var(--r-ctl); background: var(--warn-wash); color: var(--ink); }

/* ── form extras ─────────────────────────────────────────────────────── */
.nv-grid { align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); }
@media (max-width: 1279px) { .nv-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); } }
@media (min-width: 1000px) and (max-width: 1099px) { .nv-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); } }
@media (max-width: 999px) { .nv-grid { grid-template-columns: 1fr; } }
.panel-actions { display: flex; gap: var(--s-2); }
.nv .lookup + .lookup-status { margin-top: var(--s-2); }
.nv-more { margin-top: var(--s-4); }
.nv-more > summary { cursor: pointer; font-weight: 550; color: var(--stamp); width: fit-content; padding: var(--s-1) 0; }
.nv-more > summary .muted { font-weight: 400; margin-left: var(--s-1); }
.nv-more[open] > summary { margin-bottom: var(--s-3); }
.nv textarea { resize: vertical; min-height: 64px; }
.nv-vat-note { display: flex; gap: var(--s-2); align-items: flex-start; margin: 0 0 var(--s-3); padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--stamp); background: var(--stamp-wash); border-radius: 0 var(--r-ctl) var(--r-ctl) 0; max-width: none; }
.nv-vat-note svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--stamp); }
.nv-exempt { margin: var(--s-4) 0 0; }
.item .item-err { grid-column: 1 / -1; margin: 0; }
.item select:disabled { color: var(--ink-2); background: var(--paper); cursor: not-allowed; opacity: 1; }
.item [aria-invalid="true"] { border-color: var(--bad); }
textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--bad); }

.nv-send-hint { margin: var(--s-3) 0 0; }
.submit-row .btn svg, .result .btn svg { width: 18px; height: 18px; }
.btn[aria-busy="true"] { cursor: progress; }

/* the result of the check: what passed, then the downloads */
.nv-passed { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; gap: 2px; }
.nv-passed li { display: grid; grid-template-columns: 20px 1fr; gap: var(--s-2); }
.nv-passed svg { width: 18px; height: 18px; margin-top: 3px; color: var(--ok); }
.result .num { white-space: nowrap; }
.nv-xml { margin-top: var(--s-4); }
.nv-xml > summary { cursor: pointer; font-size: var(--f-13); font-weight: 550; color: var(--ink-2); width: fit-content; }
.nv-xml pre { margin: var(--s-2) 0 0; max-height: 320px; overflow: auto; padding: var(--s-3); border: 1px solid var(--rule);
  border-radius: var(--r-ctl); background: var(--sheet); color: var(--ink); font: 12px/18px ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre; tab-size: 2; }
.nv-detail { margin: var(--s-1) 0 0; font-size: var(--f-13); }
.nv-detail > summary { cursor: pointer; color: var(--ink-2); width: fit-content; }
.nv-detail p { margin: var(--s-1) 0 0; color: var(--ink-2); overflow-wrap: anywhere; }

/* ── live sheet: payment block with the PAY by square QR ─────────────── */
.nv-pay { display: grid; gap: var(--s-3); align-content: end; min-width: 0; }
.nv-qr { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-1) var(--s-3); align-items: center; }
.nv-qr-img svg { display: block; width: 112px; height: 112px; background: #fff; border-radius: 2px; }
.nv-qr figcaption { font-size: 12px; line-height: 16px; color: var(--ink-2); }
.nv-qr figcaption strong { color: var(--ink); font-weight: 600; }
.nv-qr-why { margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-2); max-width: 36ch; }
.nv-qr-why:empty { display: none; }
/* the sticky preview sits under the sticky site header */
.nv-preview { top: 88px; }
@media (min-width: 1000px) and (max-width: 1099px) { .nv-preview { max-height: calc(100dvh - 104px); } }

.nv-review { margin-top: var(--s-7); max-width: 760px; }

@media (max-width: 767px) {
  .nv-hero { padding: var(--s-4) 0 var(--s-5); }
  .nv-promise { flex-direction: column; }
  .submit-row .btn { width: 100%; }
}

/* ── print: only the document from views/doklad.py ───────────────────── */
.nv-print { display: none; }
@media print {
  .site-top, .nv-screen, .skip, .cal, .toast, .pv-mini, datalist { display: none !important; }
  main.nv { padding: 0 !important; max-width: none !important; }
  .nv-print { display: block; }
  /* Ctrl+P before "Tlačiť / Uložiť ako PDF": the live sheet instead of a blank page */
  body:has(.nv-print:empty) .nv-screen { display: block !important; }
  body:has(.nv-print:empty) .nv-screen > :not(.nv-grid), body:has(.nv-print:empty) .issue-form,
  body:has(.nv-print:empty) .issue-preview summary, body:has(.nv-print:empty) .nv-qr-why { display: none !important; }
  body:has(.nv-print:empty) .issue-grid { display: block; }
  body:has(.nv-print:empty) .doc { box-shadow: none; padding: 0; }
}

/* ── touch ─────────────────────────────────────────────────────────── */
@media (pointer: coarse) {
  .nv-crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .nv-crumbs { padding-top: var(--s-3); }
  .nv-more > summary, .nv-xml > summary, .nv-detail > summary { padding-block: 10px; }
}