/* Sąskaitų faktūrų generatoriaus stiliai — tik šio įrankio išdėstymas.
   Bendras reset, spalvų tokenai, mygtukai: ../../assets/css/shared.css; antraštė: tools.css;
   tapatybės paletė: tool-identity.css (`body.tool-page`).

   Chrome (vedlys, laukai, eilutės, suvestinė) perkeltas iš tools/contract-generator/styles.css
   ir naudoja TIK var() tokenus. DOKUMENTAS (`.p-*`) yra popierius: jis temos nekeičia ir
   tokenų nevartoja — tik literalios spalvos (sargas 2af G3/G4, docs/d4-protected-selectors.txt). */

/* ── Puslapio karkasas ──────────────────────────────────────────────────────── */

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: 14px;
  height: 100vh;
  height: 100dvh; /* mobile: įskaito naršyklės chrome */
  overflow: hidden;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

/* ── Spausdinimo zona (ekrane nematoma) ─────────────────────────────────────── */

#print-area {
  display: none;
}

/* ── Wizard: žingsnių juosta ────────────────────────────────────────────────── */

#wizard-progress-bar {
  flex-shrink: 0;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}

.wizard-progress {
  display: flex;
  align-items: flex-start;
  padding: 0.7rem 2rem 0.4rem;
  gap: 0;
}

.wizard-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
  min-width: 60px;
}

.wizard-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-overlay);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

/* Rutuliuko numeris yra tekstas — jam galioja 4.5:1, todėl `--text-primary`; aktyvią būseną
   žymi 2px `--accent` ŽIEDAS (D4C3-R2 sprendimas, tas pats visuose įrankiuose). */
.wizard-step-item.active .wizard-dot {
  border-color: var(--accent);
  color: var(--text-primary);
}

.wizard-step-item.done .wizard-dot {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--s-ink);
}

.wizard-step-label {
  font-size: 0.6rem;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
}

/* Aktyvumą etiketėje rodo TIK svoris, spalva lieka pagrindinė (akcentas ant 9,6px teksto
   šviesioje temoje duoda tik 3,26:1). */
.wizard-step-item.active .wizard-step-label {
  color: var(--text-primary);
  font-weight: 600;
}

.wizard-step-item.done .wizard-step-label {
  color: var(--text-muted);
}

.wizard-connector {
  flex: 1;
  height: 2px;
  background: var(--bg-hover);
  margin-top: 12px; /* sutampa su 26px rutuliuko vertikaliu centru */
  transition: background 0.2s;
}

.wizard-connector.done {
  background: var(--accent);
}

/* ── Wizard: turinio zona ───────────────────────────────────────────────────── */

#wizard-content {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.wizard-step-page {
  display: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.wizard-step-page.hidden {
  display: none !important;
}

/* Centruota forma (1 žingsnis) */
.wizard-step-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  padding: 2rem 1.5rem;
  background: var(--bg-base);
}

.wizard-form-section {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.wizard-form-section--wide {
  max-width: 900px;
}

/* Platus slankiojantis sąrašas (2 žingsnis) */
.wizard-step-wide {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  padding: 1.5rem;
  gap: 0;
  background: var(--bg-base);
}

.wizard-step-wide > * {
  width: 100%;
  max-width: 760px;
  margin-bottom: 1.5rem;
}

/* Dviejų skilčių išdėstymas (3 žingsnis: veiksmai + peržiūra) */
.wizard-step-split {
  display: flex;
  flex-direction: row;
}

/* Žingsnio perjungimo fade-in (motion.js `enterStep`). */
.wizard-step-page.is-step-entering {
  animation: inv-step-in 0.2s var(--ease-out-strong, ease-out) both;
}

@keyframes inv-step-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Wizard: navigacijos juosta ─────────────────────────────────────────────── */

#wizard-nav-bar {
  flex-shrink: 0;
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  padding: 0.6rem 1.5rem;
}

.wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wizard-btn {
  padding: 0.42rem 1.2rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, opacity 0.12s;
}

.wizard-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.wizard-btn-back {
  background: transparent;
  border: 1px solid var(--control-edge);
  color: var(--text-muted);
}

.wizard-btn-back:not(:disabled):hover {
  background: var(--bg-overlay);
  color: var(--text-primary);
}

.wizard-btn-next {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--s-ink);
  font-weight: 700;
}

.wizard-btn-next:not(:disabled):hover {
  background: var(--accent-dim);
  border-color: var(--accent-dim);
}

.wizard-btn-next:disabled {
  background: var(--bg-hover);
  border-color: var(--border);
  color: var(--text-muted);
}

/* ── Žingsnio antraštė ──────────────────────────────────────────────────────── */

.step-heading {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--accent);
}

.step-heading-pos {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.step-placeholder {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ── 3 žingsnis: veiksmų skiltis + peržiūros zona ───────────────────────────── */

.docs-column {
  width: 320px;
  flex-shrink: 0;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  padding: 1.25rem 1.25rem 2rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.preview-pane {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 1rem;
  background: var(--bg-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Gyva peržiūra: baltas A4 lapas nepriklausomai nuo temos. */
#inv-doc-preview {
  width: 100%;
  max-width: 210mm;
  margin: 0 auto;
}

#inv-doc-preview .p-page {
  padding: 14mm 12mm;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  /* Popierius atrodo kaip A4 lapas net su viena eilute; ilgesnis turinys lapą tiesiog
     pailgina (aspect-ratio su auto min-height — turinys niekada nenukerpamas). Tik ekranas. */
  aspect-ratio: 210 / 297;
}

/* ── Segmentuotas pasirinkimas (Įmonė / Fizinis asmuo) ──────────────────────── */

.party-type-selector {
  display: flex;
  gap: 0;
  margin-bottom: 1rem;
  border-radius: 8px;
  overflow: hidden;
}

.party-type-btn {
  flex: 1;
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.party-type-btn.active { background: var(--accent); color: var(--s-ink); }

/* ── Formų laukai ───────────────────────────────────────────────────────────── */

.client-input {
  width: 100%;
  background: var(--bg-base);
  border: 1px solid var(--control-edge);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.82rem;
  font-family: inherit;
  padding: 0.3rem 0.5rem;
}

.client-input:focus {
  border-color: var(--accent);
}

.client-input::placeholder {
  color: var(--text-muted);
}

/* ── Jungiklis ──────────────────────────────────────────────────────────────── */

.scope-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
}

.scope-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.scope-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--bg-hover);
  border-radius: 20px;
  transition: background 0.2s;
}

.scope-toggle-slider::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 3px;
  top: 3px;
  background: var(--ink);
  border-radius: 50%;
  transition: transform 0.2s;
}

.scope-toggle input:checked + .scope-toggle-slider {
  background: var(--accent);
}

/* Įjungtas takelis temos nekeičia, todėl rutuliukas ant jo — ta pati beveik juoda kaip tekstas
   ant signalo (4,92:1 abiejose temose). */
.scope-toggle input:checked + .scope-toggle-slider::before {
  transform: translateX(16px);
  background: var(--s-ink);
}

.scope-toggle input:focus-visible + .scope-toggle-slider {
  outline: var(--focus-ring, 2px solid var(--accent));
  outline-offset: var(--focus-ring-offset, 2px);
}

/* ── Komponentai: laukai, sekcijos (per var() tokenus) ──────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

/* Etiketės ryškios kaip pardavėjo rekvizitų pavadinimai (savininkas 2026-10-04, etalono nuotrauka 60):
   anksčiau 12 px `--text-muted` — formoje „dalis tekstų ryški, dalis neryški". VISI formų užrašai čia,
   vienoje grupėje: laukų etiketės, pasirinkimų grupių antraštės, „Išsaugotas pirkėjas", jungiklio, logotipo
   ir eilutės sumos („Viso" telefone) užrašai. Kitur šiems selektoriams lieka tik išdėstymas. */
.field > label,
.radio-set legend,
.segmented-set legend,
.inv-picker-label,
.toggle-label,
.inv-logo-label,
.row-total-label {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-primary);
}

.field-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* Klaida — raudonas rėmelis ir raudonas tekstas po lauku, be ikonos (savininkas 2026-10-11, pagal SĄSKAITA): pats
   tekstas pasako, kas negerai, todėl žymima ne vien spalva. Įspėjimas (ne klaida) skiriasi ⚠ ženklu. */
.field-error {
  font-size: 0.8rem;
  line-height: 1.4;
}
.field-error.is-error   { color: var(--danger); }
.field-error.is-warning { color: var(--warning); }
.field-error.is-warning::before { content: '⚠ '; }

[aria-invalid="true"] { border-color: var(--danger); }
/* Raudonas rėmelis lieka ir šviesioje temoje (`body:not(.dark) .client-input` kitaip jį užgožtų), ir sufokusuotas —
   fokusą tada rodo storesnis raudonas žiedas. */
.client-input[aria-invalid="true"],
body:not(.dark) .client-input[aria-invalid="true"] { border-color: var(--danger); }
.client-input[aria-invalid="true"]:focus,
body:not(.dark) .client-input[aria-invalid="true"]:focus { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }

.client-textarea {
  min-height: 68px;
  resize: vertical;
  line-height: 1.45;
}

.client-input--num { text-align: right; }

.num-with-suffix {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.num-with-suffix .client-input { flex: 1; min-width: 0; }

.num-suffix {
  font-size: 0.78rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.75rem 1rem;
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.1rem 1.25rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* Sekcija sekcijos viduje (pardavėjo „Atsiskaitymas", „PVM") — be antro rėmelio. */
.form-section .form-section {
  padding: 0.6rem 0 0;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
}

.form-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.form-section .form-section .form-section-title {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.section-note {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.5;
}

#inv-invoice-panel,
#inv-lines-panel {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.radio-set,
.segmented-set {
  border: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.radio-set legend,
.segmented-set legend {
  padding: 0 0 0.35rem;
}

.radio-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px; /* touch target */
  font-size: 0.82rem;
  color: var(--text-secondary);
  cursor: pointer;
}

.radio-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  flex-shrink: 0;
}

/* Segmentuotas pasirinkimas: radio įvestis paslėpta, matomas .party-type-btn */
.party-type-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 44px;
  background: var(--bg-overlay);
  color: var(--text-muted);
}
.party-type-btn.active::before {
  content: '✓';
  font-weight: 700;
}
.party-type-selector:focus-within {
  outline: var(--focus-ring, 2px solid var(--accent));
  outline-offset: var(--focus-ring-offset, 2px);
}

/* Jungiklių eilutės */
.toggle-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
}
.toggle-row.is-locked { opacity: 0.85; }

.toggle-label {
  cursor: pointer;
  user-select: none;
}

.toggle-lock {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Formos veiksmų eilutė („Išvalyti formą", „Išvalyti pirkėją") */
.inv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Pardavėjo santrauka sutrauktoje sekcijoje */
.inv-seller-summary {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* ── Logotipas ──────────────────────────────────────────────────────────────── */

.inv-logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* Peržiūra ant šviesaus „popieriaus" nepriklausomai nuo temos — toks jis bus ir sąskaitoje. */
.inv-logo-preview {
  display: block;
  max-width: 180px;
  max-height: 60px;
  padding: 0.3rem 0.5rem;
  background: var(--sheet);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.inv-logo-empty {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.inv-logo-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* `<label>` kaip mygtukas: inline-flex, kad min-height ir centravimas veiktų kaip `.btn`. */
.inv-logo-btn {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

/* ── Eilutės ────────────────────────────────────────────────────────────────── */

.inv-lines {
  display: flex;
  flex-direction: column;
}

.inv-line {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem 0.9rem;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 0;             /* leidžia grid eilutei (apvalkalui) susitraukti iki 0fr */
}

/* Eilutės apvalkalas: tarpas tarp eilučių ir sklandus dingimas per `grid-template-rows`
   (1fr → 0fr) + opacity — animuojamas tik takelis, ne aukštis/padding/margin. */
.inv-line-wrap {
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
  transition: grid-template-rows 0.25s var(--ease-out-strong, ease-out), opacity 0.2s ease-out;
}
.inv-line-wrap:not(:last-child) > .inv-line { margin-bottom: 0.85rem; }

/* Atsiradimas (motion.js `enterRow`): trumpas pakilimas iš apačios. */
.is-entering {
  animation: inv-rise 0.24s var(--ease-out-strong, ease-out) both;
}

@keyframes inv-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Dingimas (motion.js `leaveRow`): takelis į 0fr, kaimynai pakyla sklandžiai. */
.inv-line-wrap.is-leaving {
  grid-template-rows: 0fr;
  opacity: 0;
}

.inv-line-legend {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0 0.3rem;
}

.inv-line-top {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}
.inv-line-top .field { flex: 1; }

.inv-line-remove { flex-shrink: 0; }

.inv-line-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1fr 1fr;
  gap: 0.6rem;
}

.inv-line-grid--vat {
  grid-template-columns: 1.4fr 0.8fr 1fr 0.8fr 1fr;
}

/* Kiekio stepperis: du 44px mygtukai aplink įvestį */
.inv-stepper {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
}
.inv-stepper .client-input { flex: 1; min-width: 0; }

.inv-stepper-btn {
  flex-shrink: 0;
  width: 36px;
  min-height: 32px;
  border: 1px solid var(--control-edge);
  border-radius: 4px;
  background: var(--bg-overlay);
  color: var(--text-secondary);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.inv-stepper-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

/* Suma — akcento spalva; kiekiai ir kainos lieka neutralūs (.client-input) */
.field--readonly { justify-content: flex-end; }

.row-total {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent);
  text-align: right;
  padding: 0.3rem 0;
}

.totals-block {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.9rem 1.25rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.totals-vat-rows {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.totals-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.totals-value {
  font-weight: 600;
  color: var(--text-primary);
}

.totals-row--grand {
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
  margin-top: 0.15rem;
  font-size: 0.95rem;
}
.totals-row--grand .totals-value {
  color: var(--accent);
  font-weight: 700;
  font-size: 1.05rem;
}

/* Sulankstoma sekcija */
.collapsible {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.collapsible-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  padding: 0.35rem 0;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
}
.collapsible-btn:hover { color: var(--accent); }

.collapsible-caret {
  display: inline-block;
  transition: transform 0.2s;
}
.collapsible-btn[aria-expanded="true"] .collapsible-caret {
  transform: rotate(90deg);
}

.collapsible-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
/* `hidden` atributą autorinis `display: flex` nugalėtų — sutraukta skiltis liktų matoma. */
.collapsible-body[hidden] { display: none; }

/* Pranešimų juosta ir klaidų suvestinė */
.notice-bar {
  flex-shrink: 0;
  padding: 0.55rem 1.5rem;
  font-size: 0.8rem;
  background: var(--bg-overlay);
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}
.notice-bar--warning { color: var(--warning); font-weight: 600; }
.notice-bar--success { color: var(--success); font-weight: 600; }

/* Spausdinimo būsena ir veiksmai (3 žingsnis) */
.print-block-note {
  font-size: 0.78rem;
  line-height: 1.5;
}
.print-block-note.is-ready { color: var(--success); }

.doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* ── Fokuso matomumas ───────────────────────────────────────────────────────── */

:focus-visible {
  outline: var(--focus-ring, 2px solid var(--accent));
  outline-offset: var(--focus-ring-offset, 2px);
  box-shadow: var(--focus-halo, none);
}

/* Fokusuota žingsnio antraštė yra programinis fokusas — nei kontūro, nei fokuso „halo". */
.step-heading:focus,
.step-heading:focus-visible {
  outline: none;
  box-shadow: none;
}

/* ── Šviesi tema ────────────────────────────────────────────────────────────────
   Visos taisyklės apribotos body:not(.dark), kad neperrašytų tamsios temos. */

body:not(.dark) {
  background: var(--bg-base);
  color: var(--text-primary);
}

body:not(.dark) #wizard-progress-bar { background: var(--bg-surface); border-bottom-color: var(--border); }
body:not(.dark) .wizard-dot { background: var(--bg-overlay); border-color: var(--border-mid); color: var(--text-muted); }
body:not(.dark) .wizard-step-item.active .wizard-dot { border-color: var(--accent); color: var(--text-primary); }
body:not(.dark) .wizard-step-item.done .wizard-dot { background: var(--accent); border-color: var(--accent); color: var(--s-ink); }
body:not(.dark) .wizard-step-label { color: var(--text-muted); }
body:not(.dark) .wizard-step-item.active .wizard-step-label { color: var(--text-primary); }
body:not(.dark) .wizard-step-item.done .wizard-step-label { color: var(--text-muted); }
body:not(.dark) .wizard-connector { background: var(--bg-hover); }
body:not(.dark) .wizard-connector.done { background: var(--accent); }

body:not(.dark) .wizard-step-form { background: var(--bg-base); }
body:not(.dark) .wizard-step-wide { background: var(--bg-base); }

body:not(.dark) #wizard-nav-bar { background: var(--bg-surface); border-top-color: var(--border); }
body:not(.dark) .wizard-btn-back { border-color: var(--control-edge); color: var(--text-muted); }
body:not(.dark) .wizard-btn-back:not(:disabled):hover { background: var(--bg-overlay); color: var(--text-primary); }
body:not(.dark) .wizard-btn-next { background: var(--accent); border-color: var(--accent); color: var(--s-ink); }
body:not(.dark) .wizard-btn-next:not(:disabled):hover { background: var(--accent-dim); border-color: var(--accent-dim); }
body:not(.dark) .wizard-btn-next:disabled { background: var(--bg-hover); border-color: var(--border-mid); color: var(--text-muted); }

body:not(.dark) .party-type-selector { border: 1.5px solid var(--border); }
body:not(.dark) .party-type-btn { background: var(--bg-base); color: var(--text-muted); }
body:not(.dark) .party-type-btn + .party-type-btn { border-left: 1.5px solid var(--border); }
body:not(.dark) .party-type-btn.active { background: var(--accent); color: var(--s-ink); }
body:not(.dark) .party-type-btn:hover:not(.active) { background: var(--bg-hover); color: var(--accent); }

body:not(.dark) .client-input { background: var(--bg-surface); border-color: var(--control-edge); color: var(--text-primary); }
body:not(.dark) .client-input:focus { border-color: var(--accent); }
body:not(.dark) .client-input::placeholder { color: var(--text-muted); }

body:not(.dark) .scope-toggle-slider { background: var(--bg-hover); }
body:not(.dark) .scope-toggle-slider::before { background: var(--ink); }
body:not(.dark) .scope-toggle input:checked + .scope-toggle-slider { background: var(--accent); }

body:not(.dark) .inv-line { background: var(--bg-base); }
body:not(.dark) .inv-stepper-btn { background: var(--bg-surface); }

/* ── Dokumento maketas (popierius — TIK literalios spalvos) ─────────────────── */

.p-page {
  width: 100%;
  color: #000;
  background: #fff;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 11pt;
  line-height: 1.45;
}

/* Klasikinio dokumento dydžiai — kaip savininko tikroje sąskaitoje SF025 (2026-10-06): pavadinimas 23,5 pt, visas
   tekstas 11 pt, „Pardavėjas" / „Pirkėjas" 13 pt; visos etiketės ir duomenys juodi (ryškūs, ne pilki). */
.p-doc-title {
  font-size: 23.5pt;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.p-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11pt;
  margin-bottom: 4pt;
}

.p-table thead tr { background: #f0f0f0; }

.p-table th {
  border: 0.5pt solid #bbb;
  padding: 4pt 6pt;
  font-weight: 700;
  text-align: left;
}

.p-th-num {
  text-align: right !important;
  white-space: nowrap;
}

.p-table td {
  border: 0.5pt solid #ddd;
  padding: 3.5pt 6pt;
  vertical-align: top;
}

.p-td-name { width: 40%; }

/* Lentelės apvalkalas: ekrane leidžia lentelei slinkti horizontaliai, kai lapas siauresnis už
   7 stulpelius (telefonas); spaudinyje — žr. @media print (visible). */
.p-inv-table-wrap { overflow-x: auto; margin-bottom: 4pt; }
.p-inv-table-wrap .p-table { margin-bottom: 0; }

.p-td-num {
  text-align: right;
  white-space: nowrap;
}

.p-td-total {
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
}

.p-empty {
  color: #999;
  font-style: italic;
  font-size: 9pt;
}

/* Sąskaitos antraštė: logotipas kairėje, pavadinimas ir metaduomenys dešinėje. Logotipas — dvigubai didesnis nei iki
   2026-10-06 (savininko prašymu, 60 × 22 → 120 × 44 mm); šalia jo netelpantis pavadinimas su datomis keliasi žemiau,
   dešinėje (`flex-wrap`), todėl nei logotipas, nei pavadinimas nemažinami. PDF — ta pati taisyklė (invoicePdf.js). */
.p-inv-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10pt 24pt;
  margin-bottom: 18pt;
}

.p-inv-brand { flex: 0 1 auto; max-width: 100%; min-height: 1pt; }

/* Dydį (mm) nustato pats dokumentas — bendra dėžė kaip visuose šablonuose (`logoBoxFit`, savininkas 2026-10-10).
   Už logotipą siauresnėje vietoje jis mažinamas proporcingai, o ne iškraipomas. */
.p-inv-logo {
  display: block;
  max-width: 100%;
  object-fit: contain;
}

.p-inv-title-block { margin-left: auto; text-align: right; }

.p-inv-meta {
  margin-top: 4pt;
  font-size: 11pt;
  color: #000;
  line-height: 1.5;
}

.p-inv-meta-line { margin: 0; }

.p-inv-meta-k { color: #000; }

.p-inv-meta-v { font-weight: 600; color: #000; }

/* Šalys dviem stulpeliais */
.p-inv-parties {
  display: flex;
  gap: 24pt;
  margin-bottom: 16pt;
}

.p-inv-party {
  flex: 1;
  font-size: 11pt;
  line-height: 1.55;
}

/* „Pardavėjas" / „Pirkėjas" — aiški antraštė, pavadinimas — kaip kitos eilutės (savininko sąskaita 2026-10-05). */
.p-inv-party-role {
  font-size: 13pt;
  font-weight: 700;
  color: #000;
  margin-bottom: 4pt;
}

.p-inv-party-name {
  font-weight: 400;
}

.p-inv-party-line { margin: 0; }

.p-inv-party-k { color: #000; }

/* PVM suvestinė dešinėje po lentele */
.p-inv-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 4pt 0 2pt;
  gap: 1pt;
}

.p-inv-sum-row {
  display: flex;
  gap: 16pt;
  font-size: 11pt;
  color: #000;
}

.p-inv-sum-row span:last-child {
  min-width: 80pt;
  text-align: right;
  font-weight: 600;
}

.p-inv-sum-row--total {
  font-size: 11pt;
  font-weight: 700;
  color: #000;
  border-top: 0.75pt solid #aaa;
  padding-top: 2pt;
  margin-top: 2pt;
}

/* „Papildoma informacija" juosta — lapo APAČIOJE (savininkas 2026-10-05, pagal jo tikrą sąskaitą): lapas — stulpelis,
   turinys užima likusį aukštį, todėl A4 proporcijų peržiūroje juosta prisiglaudžia apačioje; ilgesnėje sąskaitoje ji
   tiesiog seka turinį. Spaudoje — žr. `@media print` (`p-inv-fit`). */
.p-inv { display: flex; flex-direction: column; }
.p-inv-body { flex: 1 0 auto; }

/* „Papildoma informacija" juosta ir didelė suma */
.p-inv-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24pt;
  margin-top: 18pt;
  padding: 10pt 12pt;
  background: #f4f4f4;
  border-top: 0.75pt solid #ccc;
}

.p-inv-info {
  flex: 1;
  font-size: 11pt;
  line-height: 1.6;
  color: #000;
}

.p-inv-info p { margin: 0; }

.p-inv-info-title {
  font-weight: 700;
  color: #000;
  margin-bottom: 3pt;
}

.p-inv-info-k { font-weight: 600; color: #000; }

.p-inv-total {
  text-align: right;
  white-space: nowrap;
}

.p-inv-total-label {
  font-size: 11pt;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #000;
}

/* Stambi suma (savininkas 2026-10-05: gerokai didesnė, paskui −10 %; 22 → 32,4 pt, kaip šablonuose). */
.p-inv-total-value {
  font-size: 32.4pt;
  font-weight: 700;
  color: #000;
  line-height: 1.05;
}

/* ── Sąskaitų šablonai ir nustatymai (/app/invoices/templates/, INV7, savininkas 2026-10-04) ───────────────────
   Antraštė ir skirtukai — TOS PAČIOS taisyklės kaip /app/ nustatymuose (app.css; static-security lygina raidė į raidę),
   kad perjungiant skirtuką tarp puslapių niekas nepasislinktų. Tokenai — tie patys skaičiai kaip `.app-page`. */
.tpl-pagehead,
.tpl-main {
  --app-content-max: 64rem;
  --app-gap-lg: 1.5rem;
  --app-space-3: 0.75rem;
  --control-h: 44px;
}
.app-pagehead {
  width: 100%;
  max-width: var(--app-content-max);
  margin: 0 auto;
  padding: var(--app-gap-lg) 1.25rem 0;
}
.tpl-pagehead .app-title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-primary);
}
.app-settings-tabs {
  display: flex;
  gap: 0 1.75rem;
  margin-top: var(--app-space-3);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.app-settings-tabs::-webkit-scrollbar { display: none; }
.app-settings-tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  margin-bottom: -1px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}
.app-settings-tab[aria-current='page'] {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}
@media (hover: hover) and (pointer: fine) {
  .app-settings-tab:not([aria-current='page']):hover { color: var(--text-primary); }
}
.app-settings-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (max-width: 30rem) {
  .app-pagehead { padding-left: 0.9rem; padding-right: 0.9rem; }
}

/* Darbo sritis po viršutine juosta ir šalia šoninės: joje slenka turinys, o išdidintas pavyzdys (`.tpl-zoom`) uždengia
   lygiai ją — juosta lieka matoma ir veikia (savininkas 2026-10-05). */
.tpl-stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* Slinkties konteineris: `body` ir `#app` šiame puslapyje aukščio neviršija (kaip sąskaitų puslapyje), todėl slenka
   tik antraštė su turiniu, o viršutinė juosta lieka vietoje. */
.tpl-scroll { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; }   /* bet koks paslėptas (sr-only) laukas lieka slinkties srityje */
.tpl-main {
  width: 100%;
  max-width: var(--app-content-max);
  margin: 0 auto;
  padding: 1rem 1.25rem 2rem;
}
@media (max-width: 30rem) { .tpl-main { padding: 1rem 0.9rem 2rem; } }

/* „Išsaugota" žinutė (savininkas 2026-10-06) — darbo srities apačioje virš turinio, po išdidintu pavyzdžiu (z-index 5).
   Atsiranda per 240 ms (išnyra iš apačios), išnyksta per 300 ms. Be judesio, jei naudotojas jo nenori. Juostos
   „Pakeitimai dar nepritaikyti" nebėra (savininkas 2026-10-11): pakanka „Pasirinkti" prie „Pavyzdys". */
.tpl-toast {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  z-index: 4;
  width: max-content;
  max-width: calc(100% - 2rem);
  margin: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--contact);           /* paviršius ant paviršiaus — vienintelis leidžiamas šešėlis (tool-identity.css) */
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
  transition: opacity 240ms var(--ease-out-strong, ease-out), transform 240ms var(--ease-out-strong, ease-out), visibility 0s linear 240ms;
}
.tpl-toast.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 240ms var(--ease-out-strong, ease-out), transform 240ms var(--ease-out-strong, ease-out), visibility 0s;
}
.tpl-toast:not(.is-shown) { transition-duration: 300ms, 300ms, 0s; transition-delay: 0s, 0s, 300ms; }
.inv-dialog--tpl .btn[aria-disabled='true'] { opacity: 0.7; cursor: progress; }
/* Pagrindinis veiksmas — kaip vedlio „Toliau": tamsus tekstas ant akcento (`.btn-primary` šviesus tekstas jame — tik ~3,3:1). */
.tpl-preview-head .tpl-apply,
.inv-dialog--tpl .btn-primary { color: var(--s-ink); }
/* Užvedus fonas nepatamsėja (`--accent-dim` su tamsiu tekstu — tik ~3,9:1) — užvedimą rodo tamsus vidinis rėmelis. */
.tpl-preview-head .tpl-apply:hover,
.inv-dialog--tpl .btn-primary:hover { background: var(--accent); box-shadow: inset 0 0 0 2px var(--s-ink); }
/* Žinutė — atvirkštinėmis spalvomis (tamsi šviesioje temoje, šviesi tamsioje), su varnele. */
.tpl-toast {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.15rem;
  background: var(--text-primary);
  color: var(--bg-surface);
  font-size: 0.9rem;
  font-weight: 500;
  pointer-events: none;
}
.tpl-toast::before {
  content: '';
  flex: none;
  width: 0.7em;
  height: 0.38em;
  margin-top: -0.2em;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
@media (prefers-reduced-motion: reduce) {
  .tpl-toast,
  .tpl-toast:not(.is-shown),
  .tpl-toast.is-shown { transform: translate(-50%, 0); transition-duration: 0.01ms; transition-delay: 0s; }
}
/* Išsaugojimo / būsenos eilutė — vieta rezervuota visada, kad atsiradęs tekstas nepastumtų kortelių; kol joje yra
   tekstas, ji prilimpa prie viršaus — klaida matosi ir pakeitus spalvą ar logotipą puslapio apačioje. */
.tpl-main > .inv-status { min-height: 1.5rem; margin: 0 0 0.5rem; }
.tpl-main > .inv-status:not(:empty) {
  position: sticky;
  top: 0.5rem;
  z-index: 2;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-md);
  background: var(--bg-overlay);
}
.tpl-logo { position: relative; }

/* INV9: logotipo dydis — slankiklis su reikšme (visa eilutė — ≥ 44 px liečiamas taikinys), po juo — tikras dydis mm. */
.tpl-logo-size-block { margin-top: 0.75rem; }
.tpl-logo-size {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
}
.tpl-logo-size-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0;
  /* Be bendro įvesties lauko fono ir rėmelio — matosi tik takelis (fokuso žymė lieka). */
  border: 0;
  background: transparent;
  box-shadow: none;
  accent-color: var(--accent);
  cursor: pointer;
}
.tpl-logo-size-value {
  flex: 0 0 auto;
  min-width: 3.4em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  color: var(--text-primary);
}
.tpl-logo-size-hint { margin: 0.25rem 0 0; }

/* Kairėje — nustatymai, dešinėje — peržiūra (etalonas); siaurame ekrane — viena po kita. */
.tpl-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
@media (min-width: 60rem) {
  .tpl-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}
.tpl-card {
  min-width: 0;
  padding: 1.25rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.tpl-group + .tpl-group {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
/* Skilties pavadinimas — ryškus (užrašų taisyklė), mažosios didžiosios kaip etalone. */
.tpl-section-title {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.tpl-note {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Šablono kortelė: visas plotas — užrašas (paspaudžiama ir pirštu), pasirinkta — akcento rėmelis. */
/* Dvylika šablonų — tinklelis po ~3 eilutėje (telefone — po 2–3), kad šriftai, spalva ir logotipas liktų netoli. */
.tpl-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 0.5rem; }
.tpl-template {
  /* Paslėptas radijo laukas pozicionuojamas KORTELĖS viduje: kitaip jis atsidurtų už slinkties konteinerio, o fokusas
     (paspaudus kortelę) slinktų užrakintą puslapį ir nustumtų navigaciją (peržiūra 2026-10-05). */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 200ms var(--ease-out-strong, ease-out), background 200ms var(--ease-out-strong, ease-out);
}
.tpl-template:has(.tpl-template-input:checked) { border-color: var(--accent); }
.tpl-template:has(.tpl-template-input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.tpl-template:has(.tpl-template-input:disabled) { cursor: default; }
.tpl-template-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Miniatiūra: tikras A4 dokumentas, sumažintas iki 96 px (96 / 793,7 px). */
.tpl-thumb {
  display: block;
  width: 96px;
  height: 136px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  pointer-events: none;
}
.tpl-thumb-paper { width: 210mm; zoom: 0.121; }
.tpl-template-name { font-size: 0.88rem; font-weight: 500; color: var(--text-primary); text-align: center; overflow-wrap: anywhere; }

/* INV8 (savininkas 2026-10-06): „Bendri" ir „Asmeniniai" — viena radijo grupė, du pogrupiai. Pavadinimai ryškūs
   (užrašų taisyklė), paaiškinimas „matote tik jūs" — tylus (užuomina). */
.tpl-template-groups { display: grid; gap: 1.1rem; }
.tpl-subgroup-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  margin: 0 0 0.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
}
.tpl-subgroup-hint { font-size: 0.78rem; font-weight: 400; color: var(--text-muted); }
.tpl-subgroup > .tpl-note { margin: 0; }
.tpl-personal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 0.75rem; }
.tpl-personal-actions .tpl-note { margin: 0; }
/* Asmeninė kortelė: „⋮" — miniatiūros apatiniame dešiniajame kampe (ant dekoratyvaus lapo), todėl pavadinimui lieka
   visas plotis, o žymė „Naudojamas" lieka viršuje. Taikinys 44 px, matomas skritulys — mažesnis. Vieta skaičiuojama nuo
   kortelės rėmelio (2 px) ir paraštės (0,4rem) iki miniatiūros (96 × 136 px, centre). */
.tpl-template-wrap { position: relative; display: grid; }
.tpl-template-wrap > .inv-menu { position: absolute; top: calc(2px + 0.4rem + 136px - 44px); left: calc(50% + 48px - 44px); }
.tpl-template-wrap .inv-menu-btn { position: relative; isolation: isolate; margin: 0; color: var(--text-primary); }
.tpl-template-wrap .inv-menu-btn::before {
  content: '';
  position: absolute;
  inset: 7px;
  z-index: -1;
  border-radius: 50%;
  background: var(--bg-surface);
  box-shadow: var(--contact-sm);
}
/* Ištrinama kortelė išnyksta (~220 ms; templates.js `CARD_LEAVE_MS`), nauja — pakyla (`.is-entering`). */
.tpl-template-wrap.is-leaving {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 220ms var(--ease-out-strong, ease-out), transform 220ms var(--ease-out-strong, ease-out);
}
/* „Naudojamas" — išsaugotas šablonas, kuriuo išrašomos naujos sąskaitos (savininkas 2026-10-06): žymė virš miniatiūros.
   Akcento rėmelis rodo, kuris šablonas dabar pavyzdyje; kol jie skiriasi, apačioje — juosta „Išsaugoti". Spalvos — kaip
   vedlio „Toliau": tamsus `--s-ink` ant akcento (~4,9:1 abiejose temose). Žymė „atsiranda" tik pasikeitus naudojamam (`is-used-new`). */
/* Pilna žymė „✓ Naudojamas" — ta pati išvaizda ant kortelės ir prie „Pavyzdys" (savininkas 2026-10-06: „šviestų taip
   pat"). Vietos taisyklės — atskirai žemiau. */
.tpl-template-badge,
.tpl-state.is-used {
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.55rem 0.15rem 0.45rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--s-ink);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}
.tpl-template-badge {
  position: absolute;
  top: 0;
  left: 50%;
  display: none;
  transform: translateX(-50%);
  pointer-events: none;
}
/* Varnelė — rėmelio kampas (nepriklauso nuo šrifto glifų). */
.tpl-template-badge::before,
.tpl-state.is-used::before {
  content: '';
  width: 0.55em;
  height: 0.3em;
  margin-top: -0.15em;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.tpl-template.is-used .tpl-template-badge { display: inline-flex; }
@media (prefers-reduced-motion: no-preference) {
  .tpl-template.is-used-new .tpl-template-badge { animation: tpl-badge-in 280ms var(--ease-out-strong, ease-out); }
}
@keyframes tpl-badge-in {
  from { opacity: 0; transform: translate(-50%, -4px) scale(0.85); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* Eilutė: užrašas kairėje, valdiklis dešinėje (etalonas). */
.tpl-row {
  display: grid;
  /* Užrašas — savo pločio (nelūžta ir telefone), valdiklis — likusi vieta iki 12rem. */
  grid-template-columns: max-content minmax(0, 12rem);
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
}
.tpl-rows {
  display: grid;
  grid-template-columns: max-content minmax(0, 12rem);
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.tpl-rows > .tpl-row { display: contents; }
.tpl-row-label { font-size: 0.88rem; font-weight: 500; color: var(--text-primary); }
.tpl-select { min-height: 44px; }
.tpl-color {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-input, var(--bg-base));
  cursor: pointer;
}
.tpl-color:has(.tpl-color-input:disabled) { cursor: default; }
.tpl-color-input {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
}
.tpl-color-input:disabled { cursor: default; }
.tpl-color-hex {
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  color: var(--text-primary);
}

/* Peržiūra: baltas A4 lapas nepriklausomai nuo temos; mastelį (`zoom`) pagal kortelės plotį nustato templates.js. */
.tpl-paper-frame {
  padding: 1rem;
  background: var(--bg-overlay);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.tpl-paper { width: 210mm; margin: 0 auto; }
.tpl-paper .p-page {
  padding: 14mm 12mm;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  aspect-ratio: 210 / 297;
}
.tpl-thumb-paper .p-page { padding: 14mm 12mm; aspect-ratio: 210 / 297; }

/* Pavyzdžio antraštė: pavadinimas kairėje, „Išdidinti" — kortelės viršutiniame dešiniajame kampe. Mygtukas pozicionuojamas
   absoliučiai, todėl 44 px taikinys pavadinimo ir lapo nepastumia — jie lygiuojasi su kairės kortelės pavadinimu ir turiniu
   (centras — ties pavadinimo viduriu: kortelės paraštė 20 px + pusė eilutės − pusė mygtuko). */
.tpl-preview { position: relative; }
.tpl-preview-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; padding-right: 2.5rem; }
.tpl-preview-head .tpl-section-title { margin: 0; }
/* Pavyzdžio būsena (savininkas 2026-10-06): „Naudojamas" — rodomas išsaugotas dizainas, „Neišsaugota" — pasirinkimas dar
   neišsaugotas. Neigiama vertikali paraštė — ženklelis nedidina eilutės, todėl lapas lieka lygiai su kairės kortele. */
.tpl-state {
  display: inline-flex;
  align-items: center;
  margin-block: -0.25rem;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--border-mid);
  border-radius: 999px;
  color: var(--text-primary);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}
/* „Pasirinkti" — pritaiko pavyzdyje rodomą dizainą įmonei (tas pats veiksmas kaip juostos mygtukas). 44 px taikinys,
   bet neigiama paraštė eilutės nedidina. */
.tpl-preview-head .tpl-apply { min-height: 44px; margin-block: -0.75rem; padding: 0.4rem 1rem; }
/* `display` taisyklės nugalėtų naršyklės `[hidden]` — paslėpimas užrašomas aiškiai. */
.tpl-state[hidden],
.tpl-apply[hidden] { display: none; }
.tpl-apply[aria-disabled='true'] { opacity: 0.7; cursor: progress; }
@media (prefers-reduced-motion: no-preference) {
  .tpl-state:not([hidden]),
  .tpl-apply:not([hidden]) { animation: tpl-pop-in 240ms var(--ease-out-strong, ease-out); }
}
@keyframes tpl-pop-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: none; }
}
.tpl-preview-head .tpl-icon-btn { position: absolute; top: 0.25rem; right: 0.35rem; }
/* Piktogramos mygtukas — 44 px liečiamas taikinys (ir telefone), be rėmelio, kol neužvesta. */
.tpl-icon-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .tpl-icon-btn:hover { background: var(--bg-hover); border-color: var(--border); }
}
.tpl-icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Išdidintas pavyzdys: visas darbo srities plotas, lapas — kuo didesnis (mastelį skaičiuoja templates.js). */
.tpl-zoom { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; }
.tpl-zoom[hidden] { display: none; }
.tpl-zoom-backdrop { position: absolute; inset: 0; background: var(--bg-overlay); }
.tpl-zoom-bar {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 52px;
  padding: 0.25rem 1rem 0.25rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}
.tpl-zoom-title { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--text-primary); }
.tpl-zoom-bar > .tpl-icon-btn { margin-right: -0.5rem; }
/* Užuomina — tik ne užrašas, todėl tyli; pelei ir lietimui — savo tekstas, siaurame ekrane jos nėra (vietos mygtukams). */
.tpl-zoom-hint { margin: 0 0 0 0.5rem; font-size: 0.8rem; color: var(--text-muted); }
.tpl-zoom-hint-touch { display: none; }
@media (pointer: coarse) {
  .tpl-zoom-hint-mouse { display: none; }
  .tpl-zoom-hint-touch { display: inline; }
}
.tpl-zoom-tools { display: flex; align-items: center; gap: 0.15rem; margin-left: auto; }
.tpl-zoom-pct {
  min-width: 3.25rem;
  text-align: center;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.tpl-icon-btn:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .tpl-icon-btn:disabled:hover { background: transparent; border-color: transparent; }
}
/* Rodinys: lapą stumdo ir artina templates.js (transform), todėl slinkties juostų nėra; gestus perima puslapis
   (`touch-action: none` — telefone du pirštai artina lapą, ne visą puslapį). */
.tpl-zoom-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.tpl-zoom-body.is-pannable { cursor: grab; }
.tpl-zoom-body.is-panning { cursor: grabbing; }
.tpl-zoom-body:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Apvalkalas be `zoom` — jį stumdo, artina ir animuoja templates.js (lapas „išauga" iš peržiūros kortelės). */
.tpl-zoom-sheet { position: absolute; left: 0; top: 0; width: fit-content; transform-origin: 0 0; }
.tpl-zoom-sheet .p-tpl-sheet { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); }
@media (max-width: 40rem) { .tpl-zoom-hint { display: none; } }
@media (max-width: 30rem) {
  .tpl-zoom-bar { gap: 0.25rem; padding-left: 0.9rem; padding-right: 0.5rem; }
  .tpl-zoom-pct { min-width: 2.75rem; }
}

/* Atsiradimas — švelnus (animacijų taisyklė); be judesio, jei naudotojas jo nenori. */
@media (prefers-reduced-motion: no-preference) {
  .tpl-layout:not(.hidden) { animation: tpl-in 240ms ease-out; }
}
@keyframes tpl-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (pointer: coarse) { .tpl-select { font-size: 16px; } }

/* INV7: tamsi pagrindinė spalva — visas juostos tekstas baltas (kontrastingesnis, WCAG; sprendžia registras). */
.p-inv-footer-light,
.p-inv-footer-light .p-inv-info,
.p-inv-footer-light .p-inv-info-title,
.p-inv-footer-light .p-inv-info-k,
.p-inv-footer-light .p-inv-total-label,
.p-inv-footer-light .p-inv-total-value { color: #fff; }

.p-inv-notes {
  margin-top: 12pt;
  font-size: 11pt;
  line-height: 1.5;
  color: #000;
}

.p-inv-sign {
  display: flex;
  align-items: flex-end;
  gap: 8pt;
  margin-top: 24pt;
  font-size: 9pt;
  color: #333;
}

.p-inv-sign-rule {
  flex: 0 0 160pt;
  border-bottom: 0.5pt solid #000;
}

.p-inv-sign-hint {
  font-size: 8pt;
  color: #555;
}

/* ── Sąskaitų šablonai (INV7): SVG lapai iš `templateLayout.js` ───────────────────────────────────────
   Kiekvienas lapas — `<svg viewBox="0 0 210 297">`, todėl mastelis keičiasi kaip visumos (telefone — sumažintas
   A4, kaip PDF peržiūroje), o tekstas guli ten, kur jį padėjo maketas. Popierius — TIK literalai (D4 riba).
   Šriftas — Liberation Sans metrika, kurią naudoja ir PDF: pirmiausia vietinis Arial (metriškai tas pats; nieko
   nesiunčiama), jo nesant — tas pats TTF, kurį įterpia PDF. Kerningas išjungtas — PDF jo irgi netaiko. */
@font-face {
  font-family: 'Samatukas Doc';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'),
    url('/assets/fonts/LiberationSans-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Samatukas Doc';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'),
    url('/assets/fonts/LiberationSans-Bold.ttf') format('truetype');
}
.p-page.p-tpl { padding: 0; background: none; }
.p-tpl-sheet {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  font-family: 'Samatukas Doc', Arial, 'Liberation Sans', sans-serif;
  font-kerning: none;
  font-variant-ligatures: none;
}
.p-tpl-sheet + .p-tpl-sheet { margin-top: 6mm; }
.p-tpl-r { font-weight: 400; }
.p-tpl-b { font-weight: 700; }
/* Peržiūrų konteineriai lapui duoda paraštes ir A4 proporciją — šablono lapas jas turi pats. */
#inv-doc-preview .p-page.p-tpl,
#preview-body .p-page.p-tpl,
.tpl-paper .p-page.p-tpl,
.tpl-thumb-paper .p-page.p-tpl { padding: 0; aspect-ratio: auto; box-shadow: none; background: none; }
#inv-doc-preview .p-tpl-sheet,
#preview-body .p-tpl-sheet,
.tpl-paper .p-tpl-sheet { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); }

/* ── Peržiūros modalas ──────────────────────────────────────────────────────── */

#preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: var(--band);
  animation: inv-overlay-in 0.2s var(--ease-out-strong, ease-out) both;
}

@keyframes inv-overlay-in {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}

#preview-overlay.hidden {
  display: none;
}

#preview-toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  background: var(--band);
  border-bottom: 1px solid var(--band-line);
}

#preview-title {
  flex: 1;
  color: var(--band-text);
  font-size: 0.9rem;
  font-weight: 600;
}

#preview-actions {
  display: flex;
  gap: 0.5rem;
}

#preview-close {
  background: transparent;
  border: 1px solid var(--band-line);
  border-radius: 6px;
  color: var(--band-text);
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
}

#preview-close:hover {
  background: var(--band-line);
}

#preview-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#preview-save {
  background: var(--signal);
  border: 1px solid var(--signal);
  border-radius: 6px;
  color: var(--s-ink);
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
}

#preview-save:hover {
  background: var(--signal-hover);
}

#preview-body {
  flex: 1;
  overflow-y: auto;
  background: var(--band);
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

#preview-body .p-page {
  width: 100%;
  max-width: 210mm;
  padding: 18mm 16mm;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  aspect-ratio: 210 / 297;
}

/* ── Mobilus (≤ 640px) ──────────────────────────────────────────────────────── */

@media (max-width: 640px) {

  /* Kompaktiška žingsnių juosta — tik rutuliukai, be tekstinių etikečių */
  .wizard-step-label {
    display: none;
  }

  .wizard-progress {
    padding: 0.5rem 0.75rem 0.3rem;
  }

  .wizard-step-item {
    min-width: 28px;
  }

  .wizard-dot {
    width: 24px;
    height: 24px;
    font-size: 0.65rem;
  }

  #wizard-nav-bar {
    padding: 0.6rem 1rem;
  }

  .wizard-btn {
    padding: 0.65rem 1.4rem;
    font-size: 0.95rem;
  }

  .wizard-form-section--wide {
    max-width: 100%;
  }

  .wizard-step-form {
    padding: 1.25rem 1rem;
  }

  .field-grid {
    grid-template-columns: 1fr;
  }

  .inv-line-grid,
  .inv-line-grid--vat {
    grid-template-columns: 1fr 1fr;
  }

  .form-section {
    padding: 0.9rem 1rem;
  }

  .notice-bar {
    padding: 0.55rem 1rem;
  }

  /* 3 žingsnis: veiksmai virš peržiūros, ne šalia */
  .wizard-step-split {
    flex-direction: column;
    overflow-y: auto;
  }

  .docs-column {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow-y: visible;
    flex-shrink: 0;
  }

  /* Siauras lapas: antraštė ir šalys viena po kitos, kad niekas nesispaustų */
  #inv-doc-preview .p-inv-head,
  #inv-doc-preview .p-inv-parties,
  #inv-doc-preview .p-inv-footer {
    flex-direction: column;
    gap: 10pt;
  }
  #inv-doc-preview .p-inv-title-block { text-align: left; margin-left: 0; }

  /* Siauras lapas: mažesnės paraštės ir tankesnė lentelė, kad 6–7 stulpeliai tilptų į 390 px.
     Tik ekrano peržiūra — spaudinio matmenis duoda @page. Literalai, ne tokenai (D4 riba). */
  #inv-doc-preview .p-page,
  #preview-body .p-page { padding: 6mm 4mm; }
  #inv-doc-preview .p-table,
  #preview-body .p-table { font-size: 8pt; }
  #inv-doc-preview .p-table th,
  #inv-doc-preview .p-table td,
  #preview-body .p-table th,
  #preview-body .p-table td { padding: 3pt; }
  #inv-doc-preview .p-td-name,
  #preview-body .p-td-name { width: auto; }
  #preview-body .p-inv-head,
  #preview-body .p-inv-parties,
  #preview-body .p-inv-footer { flex-direction: column; gap: 10pt; }
  #preview-body .p-inv-title-block { text-align: left; margin-left: 0; }
}

/* ── @media print ───────────────────────────────────────────────────────────────
   Ekrano UI paslepiamas, spausdinama tik #print-area. */

@media print {
  #app { display: none !important; }
  #preview-overlay { display: none !important; }
  #print-area { display: block !important; }

  @page {
    size: A4 portrait;
    margin: 15mm;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 11pt;
    height: auto;
    overflow: visible;
  }

  /* Spausdinant lapo paraštes duoda @page, todėl vidinių nebereikia. Fonai (lentelės antraštė, apačios juosta su
     pagrindine spalva) spausdinami kaip ekrane ir PDF — kitaip naršyklė juos numeta (INV7). */
  #print-area .p-page {
    padding: 0;
    margin: 0;
    box-shadow: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Lentelės antraštė kartojasi kiekviename puslapyje, eilutės nelūžta */
  .p-inv-table-wrap { overflow: visible; }
  .p-table thead { display: table-header-group; }
  .p-table tr    { break-inside: avoid; page-break-inside: avoid; }

  .p-doc-title { break-after: avoid; page-break-after: avoid; }

  /* Klasikinis lapas: telpantis į vieną puslapį (`p-inv-fit`, matuoja printFlow.js) — puslapio aukščio stulpelis su
     juosta apačioje; ilgesnis — paprastas srautas (juosta po turinio), kad puslapių laužymas nepriklausytų nuo flex.
     Aukštis neviršija A4 turinio (267 mm be 1 mm atsargos), jei naršyklė `vh` spaudoje skaičiuotų kitaip. */
  #print-area .p-page.p-inv { display: block; }
  #print-area .p-page.p-inv.p-inv-fit { display: flex; min-height: min(calc(100vh - 1mm), 266mm); }

  /* Suvestinė, informacijos juosta ir parašas nedalomi */
  .p-inv-summary,
  .p-inv-footer,
  .p-inv-sign { break-inside: avoid; page-break-inside: avoid; }

  /* Šablonų lapai — tikro A4 dydžio su figūromis iki krašto: lapų laužymą jau padarė maketas, todėl kiekvienas
     SVG — vienas lapas, o `@page` paraštes spausdinant nuima `printFlow.js` (tik šabloniniam dokumentui). */
  #print-area .p-tpl-sheet {
    /* Lapo plotis — puslapio plotis, aukštis — ne didesnis už puslapį: kitu popieriumi (Letter) ar naršyklei
       nepaisius @page paraščių lapas sumažinamas (SVG išlaiko proporcijas), o ne perkeliamas į papildomą lapą. */
    width: 100%;
    height: auto;
    max-height: 100vh;
    margin: 0;
    box-shadow: none;
    break-after: page;
    page-break-after: always;
  }
  #print-area .p-tpl-sheet:last-child { break-after: auto; page-break-after: auto; }
}

/* ── Skaitiniai darbo duomenys ──────────────────────────────────────────────
 * Kiekiai, kainos ir sumos skaitomi vienas po kito ir turi lygiuotis — `tabular-nums` duoda
 * vienodo pločio skaitmenis. A4 dokumento tipografija nekeičiama. */
.client-input--num,
.num-with-suffix .client-input,
.row-total,
.totals-value {
  font-variant-numeric: tabular-nums;
}

/* ── Lietimo taikiniai ──────────────────────────────────────────────────────
 * Lietimo ekrane visi veiksmai bent 44px, o įvestys 16px — kad iOS Safari nepriartintų
 * fokusuodamas lauką. Dokumento tankis nesikeičia, nes taisyklė galioja tik lietimo įvesčiai. */
@media screen and (pointer: coarse) {
  .btn,
  .collapsible-btn,
  .inv-stepper-btn,
  .inv-line-remove,
  .inv-logo-btn {
    min-height: 44px;
  }
  .inv-stepper-btn { width: 44px; }
  .client-input,
  .client-select { font-size: 16px; }
}

/* ── Sumažintas judesys ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .wizard-step-page.is-step-entering,
  .is-entering,
  #preview-overlay {
    animation-duration: 0.01ms;
  }
  .inv-line,
  .inv-line-wrap,
  .wizard-dot,
  .wizard-connector,
  .collapsible-caret,
  .scope-toggle-slider,
  .scope-toggle-slider::before {
    transition-duration: 0.01ms;
  }
}

/* ── Sąrašo režimas (/app/invoices/ pradinis ekranas) ─────────────────────────
   Puslapis turi du režimus: SĄRAŠAS (skydelis, istorija, „Nauja sąskaita") ir REDAKTORIUS
   (trijų žingsnių vedlys). Vedlio chrome sąrašo režime slepiama per `body.inv-mode-list`. */

.inv-list-view {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.inv-status {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
}
.inv-status.is-error { color: var(--danger); }
/* Paruoštame sąraše būsenos eilutė tuščia — be jos tarpas tarp antraštės ir turinio būtų dvigubas (stulpelio `gap`). */
.inv-list-view > .inv-status:empty { display: none; }

.inv-list-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.inv-editor-bar {
  display: flex;
  padding: 0.5rem 1rem 0;
}

body.inv-mode-list #wizard-progress-bar,
body.inv-mode-list #wizard-content,
body.inv-mode-list #wizard-nav-bar,
body.inv-mode-list #inv-editor-bar { display: none; }

/* Išjungtas veiksmas (nėra įmonės / cloud) — matomas kaip išjungtas, ne kaip aktyvus. */
.inv-list-actions .btn[disabled],
.tpl-personal-actions .btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Debesies sluoksnis: skydelis, istorija, pirkėjo pasirinkimas, rekvizitai ──────── */

.inv-requisites {
  display: grid;
  grid-template-columns: minmax(10rem, max-content) 1fr;
  gap: 0.3rem 1rem;
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
}
.inv-requisites dt { color: var(--text-muted); }
.inv-requisites dd { margin: 0; color: var(--text-primary); overflow-wrap: anywhere; }
.inv-requisites dd.is-missing { color: var(--danger); font-style: italic; }

.inv-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.inv-number-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.75rem;
}
.inv-number-label { color: var(--text-secondary); font-size: 0.9rem; }
.inv-number-value { font-size: 1.35rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.inv-number-hint { flex-basis: 100%; color: var(--text-muted); font-size: 0.8rem; }

/* Pirkėjo pasirinkimas (combobox + listbox) */
.inv-picker { position: relative; margin-bottom: 0.75rem; }
.inv-picker-label { display: block; margin-bottom: 0.25rem; }
.inv-picker-list {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--bg-overlay);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  max-height: 18rem;
  overflow-y: auto;
}
.inv-picker-item {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.7rem;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.inv-picker-item:hover,
.inv-picker-item.is-active { background: var(--bg-hover); }
.inv-picker-name { font-weight: 600; }
.inv-picker-meta { color: var(--text-muted); font-size: 0.85rem; white-space: nowrap; }

.inv-doc-status { margin: 0 0 0.6rem; font-weight: 600; color: var(--text-primary); }

/* ── Apžvalga (skydelis): etaloninis išdėstymas (kelias, pavadinimas, kortelės) ─────────────────── */
/* `width: 100%` būtina: `#app` centruoja turinį, ir be jo rodinys susitrauktų iki turinio pločio
   (klientų forma būtų siaura kortelė viduryje, o ne pilno pločio kaip etalone). */
.inv-list-view { width: 100%; max-width: 70rem; gap: 0.75rem; }

/* `flex-wrap`: penkių lygių kelias („… / Klientai / <vardas> / Redaguoti klientą") telefone keliasi į kitą eilutę
   VISAIS punktais, o ne spaudžia kiekvieną iki ilgiausio žodžio ir neišstumia puslapio į šoną. `flex: none`: kelias yra
   slenkamo stulpelio (`.inv-list-view`, `.inv-page`) elementas — be jo aukštame puslapyje jis susitrauktų iki
   `min-height` ir laužytos eilutės užliptų ant antraštės. */
.inv-crumbs { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin: 0; font-size: 0.85rem; color: var(--text-muted); min-height: 24px; }
.inv-crumb { display: inline-flex; align-items: center; min-height: 24px; color: var(--text-muted); text-decoration: none; }
.inv-crumb-home { min-width: 24px; justify-content: center; }
.inv-crumb-home svg { width: 18px; height: 18px; }
.inv-crumb-home:hover { color: var(--accent); }
.inv-crumb-sep { color: var(--border-mid); }
.inv-crumb.is-current { color: var(--text-secondary); }
/* Lietimui kelio nuorodos ≥ 44 px — telefone tai vienintelis puslapio vidaus kelias atgal (juosta ten — stalčius).
   Dvi klasės: taisyklė turi nugalėti bazinę `.inv-crumb { min-height: 24px }` nepriklausomai nuo eilės faile. */
@media (pointer: coarse) {
  .inv-crumbs .inv-crumb-link,
  .inv-crumbs .inv-crumb-home { min-height: 44px; min-width: 44px; justify-content: center; }
}

.inv-view-title { margin: 0 0 0.25rem; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); }
/* Fokusas čia skirtas skaitytuvui po rodinio perjungimo (kaip `.step-heading`), ne akiai —
   nei kontūro, nei globalaus fokuso „halo" (box-shadow iš `:focus-visible`). */
.inv-view-title:focus,
.inv-view-title:focus-visible { outline: none; box-shadow: none; }

/* Rodinio turinys; perjungimas — trumpas fade (motion.js `enterStep`). */
.inv-view { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 0.5rem; }
.inv-view.is-step-entering { animation: inv-view-in 0.2s var(--ease-out-strong, ease-out) both; }
@keyframes inv-view-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.inv-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }

/* Kreivės kortelė: legenda + metai viršuje, kreivė, trys rodikliai apačioje. */
.inv-chart-card { overflow: hidden; }
.inv-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap; padding: 0.9rem 1.25rem 0; }
.inv-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 0; padding: 0; list-style: none; font-size: 0.9rem; font-weight: 500; }
.inv-legend-item { display: inline-flex; align-items: center; gap: 0.45rem; }
.inv-legend-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
/* Serijų spalvos (savininko etalonas 2026-10-04): pajamos žalios (pinigai įeina), išlaidos — įspėjimo
   (geltona/oranžinė), pelnas — akcentas punktyru (sutampa su pajamomis, kai išlaidų nėra). */
.inv-legend-item--income   { color: var(--success); }
.inv-legend-item--expenses { color: var(--warning); }
.inv-legend-item--profit   { color: var(--accent); }
.inv-legend-item--profit .inv-legend-dot { border-radius: 2px; width: 12px; height: 3px; }

/* Metų pasirinkimas — kaip nuoroda su rodykle (ne įprastas laukas): akcento spalva, be rėmelio. */
.inv-year-wrap { position: relative; display: inline-flex; align-items: center; }
.inv-year {
  appearance: none;
  -webkit-appearance: none;
  min-height: 44px;
  padding: 0.35rem 1.6rem 0.35rem 0.5rem;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--accent);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.inv-year-wrap::after {
  content: "";
  position: absolute;
  right: 0.55rem;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translateY(-2px) rotate(45deg);
  pointer-events: none;
}

.inv-chart-wrap { padding: 0.25rem 0.5rem 0; }
.inv-chart { display: block; width: 100%; height: auto; }
.inv-chart-vgrid { stroke: var(--border); stroke-width: 1; }
.inv-chart-grid { stroke: var(--border); stroke-width: 1; opacity: 0.45; }
.inv-chart-base { stroke: var(--border-mid); stroke-width: 1; }
.inv-chart-grid-label,
.inv-chart-month { fill: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.inv-chart-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: inv-draw 0.6s var(--ease-out-strong, ease-out) forwards;
}
.inv-chart-line.is-static { animation: none; stroke-dashoffset: 0; }
.inv-chart-line--income   { stroke: var(--success); }
.inv-chart-line--expenses { stroke: var(--warning); }
.inv-chart-line--profit   { stroke: var(--accent); }
/* Punktyrinė serija: tikras brūkšnių raštas vietoje „nupiešimo" (jis naudoja tą patį dasharray), atsiranda per permatomumą. */
.inv-chart-line--dashed { stroke-width: 2; stroke-dasharray: 6 5; stroke-dashoffset: 0; animation: inv-fade-in 0.6s var(--ease-out-strong, ease-out) both; }
.inv-chart-line--dashed.is-static { animation: none; }
@keyframes inv-draw { to { stroke-dashoffset: 0; } }
@keyframes inv-fade-in { from { opacity: 0; } to { opacity: 1; } }
.inv-chart-empty { padding: 2rem 1.25rem 1rem; }

.inv-kpi-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.inv-kpi { display: flex; align-items: flex-start; gap: 0.9rem; padding: 1.25rem 1.5rem; min-width: 0; }
.inv-kpi-icon { display: inline-flex; flex: none; margin-top: 0.15rem; }
.inv-kpi-icon svg { width: 28px; height: 28px; }
.inv-kpi--income .inv-kpi-icon   { color: var(--success); }
.inv-kpi--expenses .inv-kpi-icon { color: var(--danger); }
.inv-kpi--profit .inv-kpi-icon   { color: var(--accent); }
.inv-kpi--profit.is-negative .inv-kpi-value { color: var(--danger); }
.inv-kpi-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.inv-kpi-label { font-size: 0.95rem; color: var(--text-secondary); }
.inv-kpi-value { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.inv-kpi-count { font-size: 0.8rem; color: var(--text-muted); }

/* PVM riba — viena eilutė: pavadinimas, juosta, reikšmė, paaiškinimas. */
.inv-vat { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.25rem; }
.inv-vat-title { color: var(--text-primary); font-weight: 500; white-space: nowrap; }
.inv-vat-bar { flex: 1; min-width: 4rem; height: 8px; background: var(--bg-overlay); border-radius: 999px; overflow: hidden; }
.inv-vat-fill { width: 100%; height: 100%; background: var(--success); border-radius: inherit; transform: scaleX(0); transform-origin: left center; transition: transform 0.4s var(--ease-out-strong, ease-out); }
.inv-vat--warn .inv-vat-fill { background: var(--warning); }
.inv-vat--over .inv-vat-fill { background: var(--danger); }
.inv-vat-value { color: var(--text-primary); font-size: 0.9rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Paaiškinimo tooltip'as kaip etalone: tamsus debesėlis virš (i), prisispaudęs prie dešinio krašto, kad netilptų už ekrano.
   Rodomas užvedus IR sufokusavus (tabindex) — telefone atsiveria bakstelėjus; be JS. */
.inv-info[data-tip] { position: relative; }
.inv-info[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  right: -0.25rem;
  bottom: calc(100% + 0.6rem);
  z-index: 5;
  width: max-content;
  max-width: min(17rem, 80vw);
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius-md);
  background: var(--text-primary);
  color: var(--bg-surface);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.2s var(--ease-out-strong, ease-out), transform 0.2s var(--ease-out-strong, ease-out);
}
.inv-info[data-tip]:hover::after, .inv-info[data-tip]:focus-visible::after, .inv-info[data-tip]:focus::after { opacity: 1; transform: none; }
.inv-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg-surface);
  cursor: help;
}
/* Raidelė „i" — kursyvinis serifas TIK pseudoelemente, kad tooltip'as (::after) paveldėtų sąsajos šriftą. */
.inv-info::before { content: "i"; font: italic 700 11px/1 Georgia, "Times New Roman", serif; }

/* Skilties antraštė ir „Sukurti ⊕" */
.inv-list-section { display: flex; flex-direction: column; gap: 0.75rem; }
.inv-section-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; }
.inv-section-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }
.inv-section-actions { display: flex; align-items: center; gap: 0.75rem; }

/* Kliento peržiūra (etalonas 2026-10-04): trys rodiklių kortelės — etiketė ir didelė suma; po jų — sąskaitų skiltis. */
.inv-cust-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.inv-cust-kpi { display: flex; flex-direction: column; justify-content: center; gap: 0.4rem; min-width: 0; min-height: 8.5rem; padding: 1.5rem 1.75rem; }
.inv-cust-kpi-label { font-size: 0.95rem; color: var(--text-secondary); }
/* Dydis plaukia su pločiu: trijų stulpelių juostoje (≈ 960 px su šonine juosta) „1 234 567,89 €" telpa vienoje
   eilutėje; `break-word` laužia tik tai, kas netelpa net tada (ne kiekvieną sumą per skaičiaus vidurį). */
.inv-cust-kpi-value { font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.inv-cust-note { margin: -0.5rem 0 0; color: var(--text-muted); font-size: 0.85rem; }
/* Globalus „Klientai" (savininkas 2026-10-25): skaičių eilutė virš sumų — tarpas tarp eilučių = tarpas tarp kortelių
   (rodinio `gap` 1.25rem − 0.25rem), kad šeši langeliai būtų vienas tinklelis. */
.inv-cust-kpis + .inv-cust-kpis { margin-top: -0.25rem; }
.inv-cust-invoices { margin-top: 0.75rem; }
.inv-create-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.35rem 0.25rem 0.35rem 0.75rem;
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--accent);
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
}
.inv-create-plus { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--bg-surface); }
.inv-create-plus svg { width: 16px; height: 16px; stroke-width: 2.4; }
.inv-create-btn:hover .inv-create-plus { background: var(--accent-dim); }
.inv-create-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.inv-lead { margin: 0; max-width: 64ch; color: var(--text-secondary); font-size: 0.95rem; }
.inv-empty { margin: 0.5rem 0 1rem; color: var(--text-secondary); }

/* Lentelė: kortelėje, su tamsesne antrašte ir ryškia „Viso" suma. */
.inv-table-wrap { overflow-x: auto; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.inv-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.inv-table th,
.inv-table td { padding: 1.05rem 1rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.inv-table thead th { padding: 0.8rem 1rem; background: var(--bg-overlay); color: var(--text-muted); font-size: 0.8rem; font-weight: 500; }
.inv-table tbody tr:last-child td { border-bottom: 0; }
.inv-table tbody tr.is-busy { opacity: 0.6; }
.inv-td-num { text-align: right; font-variant-numeric: tabular-nums; }
.inv-td-total { color: var(--text-primary); font-weight: 700; white-space: nowrap; }
.inv-td-actions { width: 1%; text-align: right; white-space: nowrap; }
/* Būsenos stulpelis FIKSUOTO pločio (telpa plačiausias ženkliukas „Neapmokėta"): automatinis lentelės
   išdėstymas kitaip perskirsto VISUS stulpelius pagal turinį, ir kai sąskaita viena, perjungus būseną
   pasislenka numeris, data ir suma. Fiksuotas stulpelis pasiskirstymo nebekeičia. */
.inv-table .inv-th-status { width: 9.5rem; }
/* „Veiksmai" — dešinėje virš „⋮" (bendra `.inv-table th { text-align: left }` kitaip nugali `.inv-td-actions`). */
.inv-table th.inv-td-actions { text-align: right; }
.inv-td-type { color: var(--text-secondary); }
.inv-td-date { font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-no { font-weight: 500; font-variant-numeric: tabular-nums; }
.inv-client-name { display: block; color: var(--text-primary); font-weight: 500; }
.inv-client-kind { display: block; color: var(--text-muted); font-size: 0.78rem; }

/* Būsenos ženkliukas: taškas + tekstas, švelnus tos pačios spalvos fonas (color-mix; be jo — tik tekstas). */
.inv-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, transparent);
}
.inv-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.inv-badge--unpaid  { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); }

/* Veiksmų meniu „⋮": sąrašas pozicionuojamas fiksuotai (menu.js), kad jo nekirptų lentelės apvalkalas. */
.inv-menu { position: relative; display: inline-block; }
.inv-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -0.5rem 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.2s var(--ease-out-strong, ease-out);
}
/* Kaip veiksmų piktogramos: nusidažo tik „⋮", fonas nesikeičia (atviras meniu — taip pat). */
.inv-menu-btn:hover,
.inv-menu-btn:focus-visible,
.inv-menu.is-open .inv-menu-btn { color: var(--accent); }
.inv-menu-list {
  position: fixed;
  top: 0;                 /* uždarytas sąrašas stovi ekrano kampe nematomas — jokio įtakos išdėstymui */
  right: 0;
  z-index: 40;
  min-width: 12rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--bg-surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.2s var(--ease-out-strong, ease-out), transform 0.2s var(--ease-out-strong, ease-out), visibility 0s linear 0.2s;
}
.inv-menu.is-open .inv-menu-list { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.inv-menu-item {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.8rem;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.inv-menu-item:hover,
.inv-menu-item:focus-visible { background: var(--bg-overlay); }
.inv-menu-item--danger { color: var(--danger); }
.inv-menu-item[disabled] { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 760px) {
  .inv-view-title { font-size: 1.4rem; }
  .inv-requisites { grid-template-columns: 1fr; gap: 0.1rem 0; }
  .inv-requisites dt { margin-top: 0.4rem; }
  .inv-kpi-row { grid-template-columns: 1fr; }
  .inv-kpi + .inv-kpi { border-top: 1px solid var(--border); }
  .inv-kpi { padding: 1rem 1.25rem; }
  .inv-cust-kpis { grid-template-columns: 1fr; gap: 0.75rem; }
  .inv-cust-kpis + .inv-cust-kpis { margin-top: -0.5rem; }
  .inv-cust-kpi { min-height: 0; padding: 1rem 1.25rem; }
  .inv-cust-kpi-value { font-size: 1.5rem; }
  .inv-vat { flex-wrap: wrap; gap: 0.5rem 1rem; }
  .inv-vat-bar { flex-basis: 100%; order: 3; }
  /* Lentelė tampa kortelėmis: kiekviena eilutė — blokas su etiketėmis iš data-label; „⋮" — kampe. */
  .inv-table thead { display: none; }
  .inv-table,
  .inv-table tbody,
  .inv-table tr,
  .inv-table td { display: block; width: 100%; }
  .inv-table tr { position: relative; padding: 0.7rem 3rem 0.7rem 1rem; border-bottom: 1px solid var(--border); }
  .inv-table tbody tr:last-child { border-bottom: 0; }
  .inv-table td { border: 0; padding: 0.15rem 0; text-align: left; }
  .inv-table td[data-label]::before { content: attr(data-label) ": "; color: var(--text-muted); font-size: 0.8rem; }
  /* Specifiškumas `.inv-table .inv-td-actions` būtina: aukščiau `.inv-table td` nustato
     `width: 100%` ir `text-align: left`, o „⋮" turi likti dešiniame kampe. */
  .inv-table .inv-td-actions { position: absolute; top: 0.5rem; right: 0.5rem; width: auto; padding: 0; text-align: right; }
  .inv-menu-btn { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .inv-chart-line { animation: none; stroke-dashoffset: 0; }
  .inv-vat-fill { transition: none; }
  .inv-menu-list { transition: none; }
  .inv-view.is-step-entering { animation: none; }
}

/* ── Rodinys „Sąskaitos": antraštės veiksmai, tipo juosta, filtrai, paieška, puslapiavimas ──── */
.inv-view-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; }
.inv-view-actions { display: flex; align-items: center; gap: 0.5rem; }
.inv-view-actions:empty { display: none; }
.inv-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.35rem 0.6rem;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
}
.inv-link-btn svg { width: 20px; height: 20px; }
.inv-link-btn { transition: color 0.2s var(--ease-out-strong, ease-out); }
.inv-link-btn:not([disabled]):hover { color: var(--accent-dim); }
.inv-link-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Dokumentų tipo juosta — kol kas vienas tipas, todėl vienas skirtukas. */
.inv-tabs { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--border); }
.inv-tab { position: relative; padding: 0.55rem 0.1rem 0.7rem; color: var(--text-muted); font-size: 0.95rem; }
.inv-tab[aria-current='page'] { color: var(--accent); font-weight: 600; }
.inv-tab[aria-current='page']::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }

.inv-filters { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap; }
.inv-filter-group { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.inv-filter-label { color: var(--text-secondary); font-size: 0.9rem; }
.inv-pill-wrap { position: relative; display: inline-flex; align-items: center; color: var(--text-secondary); }
.inv-pill-select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 40px;
  padding: 0.3rem 2.1rem 0.3rem 0.95rem;
  border: 0;
  border-radius: 999px;
  background: var(--bg-overlay);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
.inv-pill-wrap::after {
  content: "";
  position: absolute;
  right: 0.9rem;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  pointer-events: none;
}
.inv-search { position: relative; display: inline-flex; align-items: center; flex: 0 1 17rem; min-width: 12rem; }
.inv-search > svg { position: absolute; left: 0.75rem; width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; }
.inv-search-input {
  width: 100%;
  min-height: 40px;
  padding: 0.4rem 0.75rem 0.4rem 2.3rem;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  font-size: 16px;                 /* iOS: mažesnis šriftas priartintų puslapį fokusuojant */
}
.inv-search-input::placeholder { color: var(--text-muted); }
.inv-search-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.inv-results { display: flex; flex-direction: column; gap: 0.75rem; }

.inv-pager-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap; }
.inv-pager-text { margin: 0; color: var(--text-muted); font-size: 0.9rem; }
.inv-pager { display: inline-flex; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-surface); }
.inv-pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.6rem;
  border: 0;
  border-left: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.inv-pager-btn:first-child { border-left: 0; }
.inv-pager-btn svg { width: 18px; height: 18px; }
.inv-pager-btn:hover { background: var(--bg-overlay); color: var(--text-primary); }
.inv-pager-btn[aria-current='page'] { background: var(--accent); color: var(--bg-surface); font-weight: 600; }
.inv-pager-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.inv-pager-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; border-left: 1px solid var(--border); color: var(--text-muted); }

/* Būsenos ženkliukas yra mygtukas: paspaudus keičiama mokėjimo būsena (paaiškinimas — title). */
button.inv-badge { border: 0; font: inherit; font-size: 0.78rem; font-weight: 500; cursor: pointer; }
button.inv-badge:hover { box-shadow: inset 0 0 0 1px currentColor; }
button.inv-badge[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Sąskaitos eilutė atidaroma paspaudus bet kur (ne ant mygtuko) — užvedus ji švelniai paryškinama. */
@media (hover: hover) {
  .inv-table tbody tr.inv-row-open { cursor: pointer; transition: background-color 0.15s var(--ease-out-strong, ease-out); }
  .inv-table tbody tr.inv-row-open:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
}

/* Užvedus ant eilutės — veiksmų juosta kaip etalone: atsisiųsti PDF, el. paštas, nuoroda, spausdinti, „⋮"
   (tik pelei ir tik plačioje lentelėje; lietimui ir siauresniame lange lieka „⋮" su visais veiksmais).
   Veiksmų stulpelis tada rezervuoja juostos plotį — juosta neuždengia mokėjimo ženkliuko. */
.inv-row-actions { display: inline-flex; align-items: center; gap: 0.1rem; }
.inv-icon-btn { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 72.5rem) {
  .inv-table .inv-td-actions { position: relative; }
  .inv-table--invoices .inv-td-actions { width: 13.25rem; }
  .inv-table--expenses .inv-td-actions { width: 6.25rem; }
  /* Centruojama per top/bottom + align-items, NE per transform: transformuotas protėvis taptų
     „⋮" meniu (`position: fixed`) atskaitos tašku ir meniu nukeliautų už ekrano. */
  .inv-table .inv-row-actions {
    --inv-act-btn: 36px;
    position: absolute;
    right: 0.5rem;
    top: 0;
    bottom: 0;
    /* Rėmelis apgaubia TIK mygtukus (ne visą eilutės aukštį — dviejų eilučių klientų eilutėje jis buvo
       44 × 63 px): aukštis = mygtukas + vidinis tarpas + rėmelis, `margin: auto 0` jį centruoja. */
    height: calc(var(--inv-act-btn) + 0.3rem + 2px);
    margin: auto 0;
    padding: 0.15rem 0.2rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    transition: background-color 0.2s var(--ease-out-strong, ease-out), box-shadow 0.2s var(--ease-out-strong, ease-out), border-color 0.2s;
  }
  .inv-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--inv-act-btn, 36px);
    height: var(--inv-act-btn, 36px);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s var(--ease-out-strong, ease-out), visibility 0s linear 0.2s, color 0.2s var(--ease-out-strong, ease-out);
  }
  .inv-icon-btn svg { width: 20px; height: 20px; }
  /* Užvedus nusidažo TIK piktograma (akcento spalva) — be kvadratinio fono (savininkas 2026-10-04). */
  .inv-icon-btn:not([disabled]):hover,
  .inv-icon-btn:focus-visible { color: var(--accent); }
  .inv-icon-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
  .inv-table tr:hover .inv-icon-btn,
  .inv-table tr:focus-within .inv-icon-btn { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .inv-table tr:hover .inv-row-actions,
  .inv-table tr:focus-within .inv-row-actions { background: var(--bg-surface); border-color: var(--border-mid); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
  .inv-table .inv-row-actions .inv-menu-btn { width: var(--inv-act-btn, 36px); height: var(--inv-act-btn, 36px); margin: 0; border-radius: var(--radius-sm); }
  /* Vienas „⋮" be juostos (klientai, pasikartojančios): mažesnis langelis, kaip etalone (savininkas 2026-10-04). */
  .inv-table .inv-row-actions:has(> .inv-menu:only-child) { --inv-act-btn: 32px; }
}

@media (pointer: coarse) {
  .inv-pill-select { min-height: 44px; }
}

@media (max-width: 760px) {
  .inv-search { flex: 1 1 100%; }
  .inv-pager-row { justify-content: center; }
  .inv-pager-text { flex-basis: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .inv-icon-btn,
  .inv-table .inv-row-actions { transition: none; }
}

/* ── Pasikartojančios sąskaitos: grafiko kortelė, tuščia būsena, šablono būsenos ─────────── */
.inv-schedule .field-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.inv-schedule-max .field-error { display: block; min-height: 1.2em; margin-top: 0.2rem; color: var(--danger); font-size: 0.8rem; }
.inv-schedule-note { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.5rem 0 0; color: var(--text-secondary); font-size: 0.9rem; }
.inv-info--inline { margin-top: 0.2rem; cursor: default; }

.inv-empty-state { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 3rem 1rem 3.5rem; text-align: center; }
.inv-empty-icon { display: inline-flex; color: var(--accent); opacity: 0.85; }
.inv-empty-icon svg { width: 56px; height: 56px; stroke-width: 1.4; }
.inv-empty-title { margin: 0.5rem 0 0; color: var(--text-primary); font-size: 1.15rem; font-weight: 700; }
.inv-empty-text { margin: 0 0 0.75rem; max-width: 52ch; color: var(--text-secondary); font-size: 0.95rem; }

.inv-badge--rec-active { color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); }
.inv-badge--rec-paused { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); }
.inv-badge--rec-done   { color: var(--text-muted); background: var(--bg-overlay); }
/* IG1 (F6): kodėl serveris šabloną pristabdė — įspėjimas, ne užuomina (todėl ne pilkas). */
.inv-rec-problem { display: block; margin-top: 0.3rem; max-width: 28ch; color: var(--warning); font-size: 0.78rem; font-weight: 600; }
/* IG1: skydelio rodikliai iš nukirsto sąrašo — aiški pastaba, ne tylus netikslumas. */
.inv-dash-incomplete { margin: 0.75rem 0 0; color: var(--warning); font-size: 0.85rem; font-weight: 600; }

@media (max-width: 760px) {
  .inv-schedule .field-grid { grid-template-columns: 1fr; }
}

/* ── Klientai: paieška dešinėje, kortelės forma, kelio nuoroda atgal ─────────────────── */
.inv-filters--right { justify-content: flex-end; }
.inv-td-count { font-variant-numeric: tabular-nums; }

.inv-form-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.5rem 1.5rem 1.1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.inv-form-card > .field,
.inv-form-card > .field-grid { max-width: 30rem; }
.inv-form-card > .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inv-form-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 0.75rem; }

.inv-crumb-link { padding: 0; background: none; border: 0; font: inherit; color: var(--text-muted); cursor: pointer; }
.inv-crumb-link:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 760px) {
  .inv-form-card > .field-grid { grid-template-columns: 1fr; }
  .inv-form-actions { flex-direction: column-reverse; }
  .inv-form-actions .btn { width: 100%; }
}

/* ── Dviejų žingsnių redaktorius: forma „Sukurti sąskaitą" ir išrašytos sąskaitos peržiūra ──── */
.inv-page { width: 100%; max-width: 70rem; margin: 0 auto; padding: 1.25rem 1rem 2.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
/* `body` čia `overflow: hidden`, o `#app` — fiksuoto `100dvh` aukščio stulpelis (įrankio karkasas, antraštė
   lieka vietoje), todėl slenka PATI puslapio sekcija. Be `min-height: 0` flex vaikas neleistų susitraukti
   ir turinys būtų nukirptas be galimybės paslinkti (savininko 2026-10-03 klaida: nepasiekiama „Prekės / Paslaugos"). */
.inv-list-view, .inv-page { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.inv-page.hidden { display: none; }
.inv-page.is-step-entering { animation: inv-view-in 0.2s var(--ease-out-strong, ease-out) both; }
.inv-form { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 0.5rem; }
.inv-form-sheet { gap: 0; padding: 1.5rem 1.75rem 1.25rem; }
.inv-form-sheet > .field,
.inv-form-sheet > .field-grid { max-width: none; }
.inv-divider { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }
.inv-part-title { margin: 0 0 1rem; font-size: 1.3rem; font-weight: 700; color: var(--text-primary); }

/* Antraštės laukai: tipas, serija, numeris, datos vienoje eilutėje. */
.inv-head-card { display: grid; grid-template-columns: 1.6fr 0.8fr 0.8fr 1fr 1fr; gap: 1rem; align-items: start; }
.inv-head-card--recurring { grid-template-columns: 1.6fr 0.8fr 1fr; }
.inv-head-card .field { margin: 0; }
.inv-head-card select:disabled,
.inv-head-card input[readonly] { color: var(--text-primary); opacity: 1; cursor: default; background: var(--bg-surface); }

/* Pardavėjas | Pirkėjas */
.inv-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 3rem; align-items: start; }
.inv-party { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.inv-party-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.inv-party-head .inv-part-title { margin: 0; }
.inv-create-btn--sm { min-height: 40px; font-size: 0.95rem; }
.inv-req-list { display: flex; flex-direction: column; gap: 0.35rem; }
/* Privalomas rekvizitas: klaidos tekstas po eilute, po reikšme (dešinėje). Eilučių lygio klaida — po lentele. */
.inv-req-field { display: flex; flex-direction: column; gap: 0.15rem; }
.inv-req-field > .field-error { align-self: flex-end; text-align: right; }
.issue-slot > .field-error.is-error { margin-top: 0.5rem; }
.inv-req-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 0.92rem; }
.inv-req-label { color: var(--text-primary); font-weight: 600; white-space: nowrap; }
.inv-req-value { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.35rem; color: var(--text-primary); text-align: right; overflow-wrap: anywhere; }
.inv-req-muted { color: var(--text-muted); }
/* ✎ — mygtukas (laukai atsiranda vietoje, savininkas 2026-10-11), todėl naršyklės mygtuko išvaizda nuimama. */
.inv-edit-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font: inherit; cursor: pointer; transition: color 0.2s var(--ease-out-strong, ease-out); }
.inv-edit-link svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .inv-edit-link:hover { color: var(--accent); } }
/* Pirštui — bent 44 px taikinys (CLAUDE.md): eilutė telefone kiek aukštesnė. */
@media (pointer: coarse) {
  .inv-edit-link { width: 44px; height: 44px; }
  .inv-req-value .inv-link-btn--sm { min-height: 44px; }
}
/* Rekvizitų laukai pardavėjo skiltyje (kaip SĄSKAITA): „Atšaukti" kairėje, „Išsaugoti" dešinėje. */
.inv-seller-edit { display: flex; flex-direction: column; gap: 0.75rem; }
.inv-seller-edit .field-grid { margin: 0; }
.inv-seller-edit-actions { display: flex; justify-content: space-between; gap: 0.75rem; }
.inv-link-btn--sm { min-height: 32px; padding: 0.1rem 0.35rem; font-size: 0.92rem; gap: 0.3rem; }
.inv-link-btn--sm svg { width: 16px; height: 16px; }
.inv-party .collapsible { margin-top: 0.5rem; }

/* Eilučių lentelė: antraštė + eilutės (grid), siaurame ekrane — kortelės su etiketėmis. */
.inv-lines-table { display: flex; flex-direction: column; gap: 0.5rem; }
.inv-lines-head,
.inv-line-row { display: grid; grid-template-columns: 2.2fr 1fr 1.2fr 1fr 1fr 44px; gap: 0.75rem; align-items: start; }
.inv-lines-table--vat .inv-lines-head,
.inv-lines-table--vat .inv-line-row { grid-template-columns: 2.2fr 0.9fr 1.2fr 1fr 0.9fr 1fr 44px; }
.inv-lines-head { padding: 0 0 0.25rem; color: var(--text-primary); font-size: 0.95rem; font-weight: 600; }
.inv-lines-head-total { text-align: right; }
.inv-line-row .field { margin: 0; }
.inv-line-row .field > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inv-line-row .row-total-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.inv-line-row .field--readonly { justify-content: center; min-height: 44px; }
.inv-line-row .row-total { font-size: 1rem; color: var(--text-primary); padding: 0; }
.inv-line-row .inv-line-remove { display: inline-flex; opacity: 1; visibility: visible; pointer-events: auto; color: var(--danger); margin-top: 2px; }
.inv-line-row .inv-line-remove { transition: color 0.2s var(--ease-out-strong, ease-out); }
.inv-line-row .inv-line-remove:hover { color: color-mix(in srgb, var(--danger) 70%, var(--text-primary)); }
.inv-lines .inv-line-wrap:not(:last-child) > .inv-line-row { padding-bottom: 0.5rem; }
.inv-lines-foot { margin-top: 0.75rem; }
.inv-add-line { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0.25rem 0.5rem 0.25rem 0.25rem; background: transparent; border: 0; border-radius: var(--radius-md); color: var(--accent); font: inherit; font-size: 1rem; font-weight: 500; cursor: pointer; }
.inv-add-line:hover .inv-create-plus { background: var(--accent-dim); }
.inv-lines-summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.inv-notes-area { flex: 1 1 24rem; min-width: 0; }
.inv-notes-area .field { max-width: 32rem; }
.inv-notes-toggle svg { width: 20px; height: 20px; }
.inv-lines-summary .totals-block { flex: 0 0 auto; min-width: 16rem; border: 0; background: transparent; padding: 0; }
.inv-lines-summary .totals-row--grand { border-top: 0; font-size: 1.05rem; color: var(--text-primary); }
.inv-lines-summary .totals-row--grand span:first-child { font-weight: 700; }
.inv-lines-summary .totals-row--grand .totals-value { color: var(--text-primary); font-size: 1.1rem; }
.inv-form-meta { display: flex; justify-content: flex-end; gap: 0.75rem; flex-wrap: wrap; }
.inv-form-submit { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 0.5rem; }

/* Peržiūros puslapis: veiksmų juosta, ženkliukas ir dokumentas ant švelnaus fono. */
.inv-doc-actionbar { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.5rem; margin: 0.25rem 0 0.75rem; }
.inv-doc-action { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.35rem 0.5rem; background: transparent; border: 0; border-radius: var(--radius-md); color: var(--accent); font: inherit; font-size: 1rem; font-weight: 500; cursor: pointer; }
.inv-doc-action svg { width: 20px; height: 20px; }
.inv-doc-action { transition: color 0.2s var(--ease-out-strong, ease-out); }
.inv-doc-action:not([disabled]):hover { color: var(--accent-dim); }
.inv-doc-action[disabled] { opacity: 0.5; cursor: not-allowed; }
.inv-doc-view { padding: 1.25rem 1.5rem 2rem; background: var(--bg-overlay); border-radius: var(--radius-lg); }
.inv-doc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; max-width: 210mm; margin: 0 auto 0.75rem; }
.inv-doc-badge { font-size: 0.85rem; padding: 0.3rem 0.8rem; }
.inv-doc-logo .inv-logo-field { margin: 0; }
.inv-doc-logo .inv-logo-label,
.inv-doc-logo .inv-logo-empty,
.inv-doc-logo .field-hint { display: none; }
.inv-doc-view #inv-doc-preview .p-page { margin-bottom: 0; }

@media (max-width: 1000px) {
  .inv-head-card { grid-template-columns: 1fr 1fr; }
  .inv-head-card--recurring { grid-template-columns: 1fr 1fr; }
  .inv-parties { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .inv-form-sheet { padding: 1rem 1rem 1rem; }
  .inv-head-card { grid-template-columns: 1fr; }
  .inv-lines-head { display: none; }
  .inv-line-row { grid-template-columns: 1fr 1fr; padding: 0.75rem; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius-md); }
  .inv-lines-table--vat .inv-line-row { grid-template-columns: 1fr 1fr; }
  .inv-line-row .field > label,
  .inv-line-row .row-total-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .inv-line-row .field:first-child { grid-column: 1 / -1; }
  .inv-line-row .field--readonly { align-items: flex-end; }
  .inv-lines-summary { flex-direction: column; }
  .inv-lines-summary .totals-block { width: 100%; }
  .inv-notes-area { flex-basis: auto; }   /* stulpelyje `flex-basis: 24rem` taptų AUKŠČIU — 384 px tuščias tarpas prieš „Viso" */
  .inv-form-submit { flex-direction: column-reverse; }
  .inv-form-submit .btn { width: 100%; }
  .inv-doc-view { padding: 0.75rem 0.5rem 1.25rem; }
}

/* ── Dokumento kalba ir valiuta (formos apačia, pagal savininko etaloną 2026-10-03) ──────────────
   Mygtukas su vėliavėle / valiutos kodu, po juo absoliučiai pozicionuotas sąrašas. Forma slenka pati
   (`.inv-page`), todėl sąrašas tiesiog pailgina slenkamą turinį — `scrollIntoView` jį parodo. */
.inv-pick-wrap { position: relative; }
.inv-pick {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.3rem 0.75rem 0.3rem 0.9rem;
  border: 1px solid var(--border-mid); border-radius: var(--radius-md); background: var(--bg-surface);
  color: var(--text-primary); font: inherit; font-size: 0.92rem; cursor: pointer;
  transition: border-color 0.2s var(--ease-out-strong, ease-out);
}
.inv-pick:hover, .inv-pick-wrap.is-open .inv-pick { border-color: var(--accent); }
.inv-pick-caret { display: inline-flex; color: var(--text-muted); }
.inv-pick-caret svg { width: 18px; height: 18px; transition: transform 0.2s var(--ease-out-strong, ease-out); }
.inv-pick-wrap.is-open .inv-pick-caret svg { transform: rotate(180deg); }
.inv-pick-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 40;
  min-width: 100%; width: max-content; max-width: min(22rem, calc(100vw - 2rem));
  margin: 0; padding: 0.35rem; list-style: none;
  background: var(--bg-surface); border: 1px solid var(--border-mid); border-radius: var(--radius-md);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  opacity: 0; transform: translateY(-4px) scale(0.98); transform-origin: top right;
  pointer-events: none; visibility: hidden;
  transition: opacity 0.2s var(--ease-out-strong, ease-out), transform 0.2s var(--ease-out-strong, ease-out), visibility 0s linear 0.2s;
}
.inv-pick-wrap.is-open .inv-pick-menu { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.inv-pick-menu li { list-style: none; }
.inv-pick-item {
  display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: 44px; padding: 0.55rem 0.8rem;
  background: transparent; border: 0; border-radius: var(--radius-sm); color: var(--text-primary);
  font: inherit; text-align: left; cursor: pointer; white-space: nowrap;
}
.inv-pick-item:hover, .inv-pick-item:focus-visible, .inv-pick-item.is-selected { background: var(--bg-overlay); }
.inv-pick-item strong { font-weight: 600; }
.inv-pick-search-wrap { position: relative; padding: 0 0 0.35rem; }
.inv-pick-menu .inv-pick-search { width: 100%; min-height: 44px; padding: 0.5rem 2.4rem 0.5rem 0.75rem; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; box-shadow: none; }
.inv-pick-search-wrap svg { position: absolute; right: 0.8rem; top: 0.8rem; width: 18px; height: 18px; color: var(--text-muted); pointer-events: none; }
.inv-pick-list { max-height: 16rem; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.inv-pick-list .inv-pick-item { white-space: normal; }
.inv-pick-empty { padding: 0.6rem 0.8rem; color: var(--text-muted); }
.inv-flag { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
.inv-flag svg { display: block; width: 100%; height: 100%; }

/* Pastaba (etalonas): vien placeholder'is, etiketė tik skaitytuvui; po lauku „Pašalinti pastabą". */
.inv-notes-area .field > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inv-notes-area .field { position: relative; }
.inv-notes-area .client-textarea { min-height: 8.5rem; }
.inv-notes-remove { margin-top: 0.35rem; }
.inv-notes-remove svg, .inv-notes-toggle svg { width: 20px; height: 20px; }

@media (max-width: 40rem) {
  .inv-form-meta { justify-content: stretch; }
  .inv-pick-wrap { flex: 1 1 100%; }
  .inv-pick { width: 100%; justify-content: space-between; }
  .inv-pick-menu { left: 0; right: 0; width: auto; max-width: none; }
}

/* ── Sąnaudos (INV3, pagal savininko etaloną 2026-10-03) ─────────────────────────────────────── */
.inv-badge--pending   { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); }
.inv-badge--confirmed { color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); }
.inv-row-link { padding: 0; border: 0; background: none; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.inv-row-link:hover { color: var(--accent); text-decoration: underline; }
.inv-empty-title { margin: 0.25rem 0 0; font-size: 1.15rem; color: var(--text-primary); }
.inv-empty-text { max-width: 36rem; margin: 0 0 0.75rem; color: var(--text-secondary); line-height: 1.5; }

/* 1. Įkėlimas */
.inv-upload-intro { text-align: center; margin: 0.5rem auto 1.25rem; max-width: 36rem; }
.inv-eyebrow { margin: 0; color: var(--text-muted); font-size: 0.85rem; }
.inv-upload-title { margin: 0.15rem 0 0.5rem; font-size: 1.6rem; color: var(--text-primary); }
.inv-upload-lead { margin: 0; color: var(--text-secondary); line-height: 1.5; }
.inv-upload-card { max-width: 52rem; margin: 0 auto; }
.inv-upload-card-title { margin: 0 0 0.25rem; font-size: 1.05rem; color: var(--text-primary); }
.inv-upload-card-hint { margin: 0 0 1rem; color: var(--text-secondary); }
.inv-dropzone {
  display: flex; align-items: center; gap: 0.9rem; min-height: 96px; padding: 1.25rem 1.5rem;
  border: 1px dashed var(--accent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent) 4%, transparent);
  cursor: pointer; transition: background 0.2s var(--ease-out-strong, ease-out), border-color 0.2s var(--ease-out-strong, ease-out);
}
.inv-dropzone:hover, .inv-dropzone.is-over { background: color-mix(in srgb, var(--accent) 10%, transparent); border-style: solid; }
.inv-dropzone:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.inv-dropzone-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inv-dropzone-text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.inv-dropzone-title { color: var(--accent); font-weight: 600; font-size: 1.05rem; }
.inv-dropzone-hint { color: var(--text-secondary); font-size: 0.9rem; }
.inv-file-list { margin: 1rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.inv-file-row {
  display: flex; align-items: center; gap: 0.75rem; min-height: 56px; padding: 0.6rem 0.6rem 0.6rem 1.25rem;
  border: 1px solid var(--accent); border-radius: var(--radius-md); background: var(--bg-surface);
  animation: inv-view-in 0.24s var(--ease-out-strong, ease-out) both;
}
.inv-file-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; color: var(--accent); font-weight: 500; }
.inv-file-size { color: var(--text-muted); font-size: 0.85rem; white-space: nowrap; }
.inv-file-remove { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--danger); cursor: pointer; }
.inv-file-remove svg { width: 20px; height: 20px; }
.inv-file-remove { transition: color 0.2s var(--ease-out-strong, ease-out); }
.inv-file-remove:hover { color: color-mix(in srgb, var(--danger) 70%, var(--text-primary)); }
.inv-upload-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.25rem; }

/* 2. Įkelta */
.inv-success { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; max-width: 30rem; margin: 3rem auto 2rem; text-align: center; }
.inv-success-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--success); color: #fff; margin-bottom: 0.75rem; }
.inv-success-icon svg { width: 26px; height: 26px; }
.inv-success-title { margin: 0; font-size: 1.1rem; color: var(--text-primary); }
.inv-success-text { margin: 0; color: var(--text-secondary); line-height: 1.5; }
.inv-success-count { margin: 0.75rem 0 0; color: var(--text-primary); font-weight: 600; }
.inv-success-warn { margin: 0; color: var(--warning); }
.inv-success-actions { display: flex; gap: 0.75rem; margin-top: 0.75rem; }

/* 3. Patvirtinimas */
.inv-exp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.inv-info-banner {
  display: flex; align-items: center; gap: 0.6rem; flex: 1 1 24rem; margin: 0; padding: 0.7rem 1rem;
  border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--text-primary);
}
.inv-info-banner-icon { display: inline-flex; color: var(--accent); }
.inv-info-banner-icon svg { width: 20px; height: 20px; }
.inv-exp-counter { margin: 0.45rem 0 0; color: var(--text-primary); white-space: nowrap; }
.inv-exp-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; margin-top: 1rem; align-items: start; }
.inv-exp-form .field + .field, .inv-exp-form .inv-exp-money + .field, .inv-exp-form .field + .inv-exp-money { margin-top: 0.9rem; }
.inv-exp-money { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; gap: 0.5rem; align-items: end; }
.inv-exp-money .field { margin: 0; }
.inv-doc-frame { position: relative; display: flex; flex-direction: column; min-height: 24rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-overlay); overflow: hidden; }
.inv-doc-iframe { flex: 1 1 auto; width: 100%; min-height: 34rem; border: 0; background: #525659; }
.inv-doc-open { align-self: flex-end; margin: 0.4rem 0.6rem; }
.inv-doc-frame--image { align-items: center; justify-content: center; padding: 0.5rem; }
.inv-doc-image { max-width: 100%; max-height: 40rem; object-fit: contain; }
.inv-doc-frame--note { align-items: center; justify-content: center; gap: 0.5rem; padding: 1.5rem; text-align: center; color: var(--text-secondary); }
.inv-doc-frame--note p { margin: 0; }
.inv-doc-note { font-size: 0.9rem; }
.inv-exp-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.25rem; }
.inv-exp-footer-actions { display: flex; gap: 0.75rem; margin-left: auto; }
.inv-link-btn--danger { color: var(--danger); }
.inv-link-btn--danger svg { width: 20px; height: 20px; }

@media (max-width: 60rem) {
  .inv-exp-layout { grid-template-columns: 1fr; }
  .inv-doc-iframe { min-height: 24rem; }
}
@media (max-width: 40rem) {
  .inv-exp-money { grid-template-columns: 1fr; }
  .inv-upload-actions, .inv-success-actions, .inv-exp-footer-actions { flex-direction: column-reverse; width: 100%; }
  .inv-upload-actions .btn, .inv-success-actions .btn, .inv-exp-footer-actions .btn { width: 100%; }
  .inv-exp-footer { flex-direction: column-reverse; align-items: stretch; }
}

/* ── Datos filtras kaip kalendorius + eksporto langas (pagal savininko etaloną 2026-10-03) ────────── */
.inv-pill-btn { text-align: left; white-space: nowrap; }
.inv-pill-btn.is-active { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text-primary); }
.inv-pill-wrap.is-open .inv-pill-btn { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.inv-pick-menu--left { left: 0; right: auto; transform-origin: top left; }
.inv-cal { padding: 0.6rem; width: max-content; max-width: calc(100vw - 2rem); }
.inv-cal-head { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.4rem; }
.inv-cal-nav { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); cursor: pointer; }
.inv-cal-nav:hover { background: var(--bg-overlay); color: var(--text-primary); }
.inv-cal-nav svg { width: 20px; height: 20px; }
.inv-cal-select { flex: 1 1 auto; min-height: 40px; padding: 0.25rem 0.5rem; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-primary); font: inherit; font-size: 1.05rem; font-weight: 600; cursor: pointer; }
.inv-cal-select--year { flex: 0 0 auto; }
.inv-cal-grid { display: grid; grid-template-columns: repeat(7, 44px); gap: 2px; }
.inv-cal-wd { display: flex; align-items: center; justify-content: center; height: 32px; color: var(--text-primary); font-size: 0.82rem; font-weight: 600; }
.inv-cal-day { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--text-primary); font: inherit; font-size: 0.92rem; cursor: pointer; }
.inv-cal-day.is-out { color: var(--text-muted); opacity: 0.6; }
.inv-cal-day.is-today { box-shadow: inset 0 0 0 1px var(--border-mid); }
.inv-cal-day:hover { background: var(--bg-overlay); }
.inv-cal-day.is-range { background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 0; }
.inv-cal-day.is-selected { background: var(--accent); color: #fff; font-weight: 600; }
.inv-cal-hint { margin: 0.4rem 0.25rem 0; color: var(--text-muted); font-size: 0.82rem; }
.inv-cal-foot { display: flex; justify-content: flex-end; margin-top: 0.25rem; }

/* Eksporto langas — natyvus <dialog>. Fonas ir išdėstymas čia; fokusą ir Esc duoda naršyklė. */
/* `margin: auto` būtinas: bendras CSS nulinis `margin` reset'as kitaip pastatytų modalą į kairį viršutinį kampą. */
.inv-dialog { width: min(32rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); margin: auto; padding: 0; overflow: auto; border: 1px solid var(--border-mid); border-radius: var(--radius-lg); background: var(--bg-surface); color: var(--text-primary); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); }
.inv-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.inv-dialog[open] { animation: inv-view-in 0.2s var(--ease-out-strong, ease-out) both; }
.inv-dialog-body { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem 1.5rem 1.25rem; }
/* Autorinis `display: flex` nugali naršyklės `[hidden] { display: none }` — be šios taisyklės forma ir progresas matytųsi kartu. */
.inv-dialog-body[hidden] { display: none; }
.inv-dialog-title { margin: 0 0 0.25rem; font-size: 1.2rem; }
.inv-dialog-label { margin: 0; color: var(--text-secondary); font-size: 0.9rem; }
.inv-dialog-range { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.inv-dialog-range .client-input, .inv-dialog-format .client-input { width: 100%; min-height: 44px; }
.inv-quick { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.inv-quick-btn { min-height: 36px; padding: 0.2rem 0.1rem; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; }
.inv-quick-btn:hover { text-decoration: underline; }
.inv-dialog-status { min-height: 1.2em; margin: 0; color: var(--text-secondary); font-size: 0.9rem; }
.inv-dialog-actions { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 0.25rem; }
@media (pointer: coarse) { .inv-dialog input, .inv-dialog select { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .inv-dialog[open] { animation: none; } }
@media (max-width: 40rem) {
  .inv-dialog-range { grid-template-columns: 1fr; }
  .inv-dialog-actions { flex-direction: column-reverse; }
  .inv-dialog-actions .btn { width: 100%; }
}

/* Patvirtinimo langas (mokėjimo būsena): siauresnis, pavadinimas + paaiškinimas, „Atšaukti" kairėje, „Keisti" dešinėje. */
.inv-dialog--confirm { width: min(30rem, calc(100vw - 2rem)); }
.inv-dialog-text { margin: 0 0 0.5rem; color: var(--text-secondary); line-height: 1.5; }
.inv-dialog--confirm .inv-dialog-actions .btn { min-width: 7.5rem; min-height: 44px; }
/* Centruotas variantas (kliento trynimo etalonas 2026-10-04): tekstas centre, mygtukai — `--split` (du lygūs). */
.inv-dialog--center .inv-dialog-title,
.inv-dialog--center .inv-dialog-text { text-align: center; }

/* „Siųsti sąskaitą" ir „Nuoroda dalijimuisi" (etalonas 2026-10-04). */
.inv-dialog--send, .inv-dialog--share, .inv-dialog--tpl { width: min(34rem, calc(100vw - 2rem)); }
.inv-dialog--send .client-input, .inv-share-row .client-input, .inv-dialog--tpl .client-input { width: 100%; min-height: 44px; }
.inv-dialog-error { min-height: 1.2em; margin: -0.35rem 0 0; color: var(--danger); font-size: 0.85rem; }
.inv-dialog-hint { margin: 0; color: var(--text-muted); font-size: 0.85rem; line-height: 1.45; }
.inv-dialog-hint:empty { display: none; }
/* Naudotojo pavadinimas be tarpų (asmeninis šablonas, iki 60 simbolių) laužomas, o ne išstumia langą į šoną. */
.inv-dialog-text,
.inv-dialog-hint { overflow-wrap: anywhere; }
.inv-dialog-actions--split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.inv-dialog-actions--split .btn, .inv-dialog-actions--end .btn { min-height: 44px; }
.inv-dialog-actions--end { justify-content: flex-end; }
.inv-share-row { display: flex; gap: 0.75rem; align-items: stretch; }
.inv-share-row .client-input { flex: 1 1 auto; min-width: 0; text-overflow: ellipsis; }
.inv-share-row .btn { flex: none; min-width: 7.5rem; min-height: 44px; }
@media (max-width: 40rem) {
  /* Telefone pagrindinis veiksmas viršuje — kaip patvirtinimo lange (column-reverse). */
  .inv-dialog-actions--split { grid-template-columns: 1fr; }
  .inv-dialog-actions--split > .btn-primary,
  .inv-dialog-actions--split > .btn-danger { order: -1; }
  .inv-share-row { flex-direction: column; }
}

/* ── Vieša sąskaitos nuoroda `/app/share/` (INV5) ───────────────────────────────
   `body` šiame faile užrakintas (programos išdėstymas), todėl slenka `.share-main` — kaip rodiniai. */
.share-main { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.share-inner { width: 100%; max-width: calc(210mm + 2rem); margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.share-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.share-title { margin: 0; font-size: 1.35rem; color: var(--text-primary); }
.share-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.share-actions .btn { min-height: 44px; }
.share-status { margin: 0 0 1rem; color: var(--text-secondary); font-size: 0.95rem; }
.share-status[hidden] { display: none; }
#inv-doc-preview:empty { display: none; }
@media (max-width: 40rem) {
  .share-actions { width: 100%; }
  .share-actions .btn { flex: 1 1 0; }
}

/* Eksporto progresas (PDF ZIP): forma pakeičiama juosta. Užpildas — `scaleX` (ne plotis), kad animacija eitų
   be išdėstymo perskaičiavimo; JS rašo `transform: scaleX(0..1)`. */
.inv-dialog-progress { padding: 2.25rem 1.5rem; text-align: center; }
.inv-progress { height: 8px; border-radius: 999px; background: var(--bg-hover); overflow: hidden; }
.inv-progress-bar { width: 100%; height: 100%; border-radius: inherit; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform 0.25s var(--ease-out-strong, ease-out); }
.inv-progress-text { margin: 0; color: var(--text-secondary); font-size: 0.9rem; }
@media (prefers-reduced-motion: reduce) { .inv-progress-bar { transition: none; } }

/* Modalas gyvena už #app ribų (viršutiniame sluoksnyje), todėl bendra `#app { display: none }` spaudinyje
   jo nepaslepia — be šios taisyklės spausdinant atviras langas atsidurtų PDF'e. */
@media print {
  .inv-dialog, .inv-dialog::backdrop { display: none !important; }
}

/* ── INV6: dokumentų tipų skirtukai, kreditinės koreguojama sąskaita, ⋮ meniu pagal etaloną ─────────
   Skirtukai — nuorodos su 44 px liečiamu plotu. Siaurame ekrane trys ilgi pavadinimai netelpa, todėl slenka
   TIK juosta (puslapis horizontaliai neslenka). Linija apačioje — `inset` šešėlis, ne kraštinė: slenkanti
   juosta kirptų už jos ribų išsikišusį pabraukimą. */
.inv-tabs { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--border); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.inv-tabs::-webkit-scrollbar { display: none; }
.inv-tab { display: inline-flex; align-items: center; flex: none; min-height: 44px; white-space: nowrap; text-decoration: none; transition: color 0.2s var(--ease-out-strong, ease-out); }
.inv-tab:hover { color: var(--text-primary); }
.inv-tab[aria-current='page']:hover { color: var(--accent); }
.inv-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-sm); }
/* Rodinys perpiešiamas, todėl pabraukimo „išaugimas" — keyframes, ne perėjimas. */
.inv-tab[aria-current='page']::after { bottom: 0; transform-origin: center; animation: inv-tab-in 0.28s var(--ease-out-strong, ease-out); }
@keyframes inv-tab-in { from { transform: scaleX(0.2); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

/* Kreditinė: koreguojama sąskaita ir priežastis po viršutine eilute. */
.inv-ref-card { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr); gap: 1rem; align-items: start; margin-top: 1rem; }
.inv-ref-card .field { margin: 0; }
.inv-ref-note { grid-column: 1 / -1; margin: 0; }
@media (max-width: 760px) { .inv-ref-card { grid-template-columns: 1fr; } }

/* ⋮ meniu kaip etalone: plonos linijos tarp punktų. Juostos veiksmai (PDF, el. paštas, nuoroda, spausdinti)
   meniu kartojami tik ten, kur eilutės užvedimo juostos nėra — tos pačios sąlygos kaip juostos taisyklė. */
.inv-menu-list > li + li { border-top: 1px solid var(--border); }
@media (hover: hover) and (pointer: fine) and (min-width: 72.5rem) {
  .inv-menu-touch { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .inv-tab[aria-current='page']::after { animation: none; }
}

/* Dokumentas: kreditinės koreguojama sąskaita — popieriaus literalai (D4 riba: ne tokenai). */
.p-inv-ref { margin: -6pt 0 12pt; font-size: 9.5pt; line-height: 1.5; color: #000; }
.p-inv-ref p { margin: 0; }
.p-inv-ref-k { color: #555; }

/* ── Patarimo debesėlis (hint.js; savininko etalonas 2026-10-04, nuotrauka 8) ───────────────────────
   Tas pats tamsus burbulas kaip PVM (i) paaiškinimo, tik fiksuotas `body` lygyje (lentelės apvalkalas jo
   nekerpa) ir po elementu. Atsiranda / dingsta permatomumu ir nedideliu poslinkiu. */
.inv-hint {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 70;
  width: max-content;
  max-width: min(10rem, calc(100vw - 16px));   /* etalonas: trys eilutės „Paspauskite norėdami / pakeisti mokėjimo / būseną" */
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-md);
  background: var(--text-primary);
  color: var(--bg-surface);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s var(--ease-out-strong, ease-out), transform 0.2s var(--ease-out-strong, ease-out);
}
.inv-hint[data-place='above'] { transform: translateY(4px); }
.inv-hint.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .inv-hint { transform: none; transition: opacity 0.01ms; } }
@media print { .inv-hint { display: none !important; } }