/* ==========================================================================
   FJ FAKTURACE — SERVICE-BASED LEAD MAGNET
   Warm minimalist aesthetic, desktop split-pane, pixel-perfect A4 print styling
   ========================================================================== */

:root {
  --color-page: #f6f4ef;
  --color-surface: #ffffff;
  --color-surface-subtle: #fcfbf9;
  --color-surface-elevated: #ffffff;
  
  --color-neutral-50: #faf9f6;
  --color-neutral-100: #f4f2ec;
  --color-neutral-200: #e8e5dc;
  --color-neutral-300: #dad5c9;
  --color-neutral-400: #b5ada0;
  --color-neutral-500: #8c8375;
  --color-neutral-600: #665f54;
  --color-neutral-700: #4a443b;
  --color-neutral-800: #302c26;
  --color-neutral-900: #1c1916;
  --color-neutral-950: #100e0c;

  --color-accent: #2563eb;
  --color-accent-hover: #1d4ed8;
  --color-accent-light: #eff6ff;
  --color-accent-border: #bfdbfe;

  --color-success: #16a34a;
  --color-success-bg: #f0fdf4;
  --color-warning: #d97706;
  --color-danger: #dc2626;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-sheet: 0 12px 35px -5px rgba(28, 25, 22, 0.12), 0 0 0 1px rgba(28, 25, 22, 0.06);

  --max-w-app: 1480px;
}

/* Box sizing rules */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-sans);
  color: var(--color-neutral-900);
  background-color: var(--color-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  font-size: 14px;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-page);
}

/* Tabular figures for money */
.tnum, .tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Header & Top Branding */
.site-header {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-neutral-200);
  position: sticky;
  top: 0;
  z-index: 40;
}

.header-inner {
  max-width: var(--max-w-app);
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand-wrap {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s ease;
}

.brand-wrap:hover {
  opacity: 0.9;
}

.brand-logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--color-neutral-900);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

html.dark .brand-logo-icon {
  background: #ffffff;
  color: #0a0a0a;
}

.brand-logo-text {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--color-neutral-900);
}

html.dark .brand-logo-text {
  color: #ffffff;
}

.brand-badge {
  background: var(--color-neutral-900);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
}

.brand-title {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--color-neutral-900);
}

.brand-tag {
  font-size: 0.78rem;
  color: var(--color-neutral-500);
  background: var(--color-neutral-100);
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid var(--color-neutral-200);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Hero Section */
.hero-section {
  max-width: var(--max-w-app);
  margin: 0 auto;
  padding: 2.2rem 1.5rem 1.5rem;
  text-align: center;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #1e40af;
  background: #dbeafe;
  padding: 0.3rem 0.85rem;
  border-radius: 9999px;
  margin-bottom: 1rem;
  border: 1px solid #bfdbfe;
}

.hero-title {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--color-neutral-950);
  margin-bottom: 0.75rem;
}

.hero-subtitle {
  font-size: 1.05rem;
  color: var(--color-neutral-600);
  max-width: 680px;
  margin: 0 auto 1.5rem;
  line-height: 1.55;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.25rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-neutral-700);
}

.badge-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.badge-item svg {
  color: var(--color-success);
}

/* Main Workspace Grid */
.workspace-wrapper {
  max-width: var(--max-w-app);
  margin: 0 auto 4rem;
  padding: 0 1.5rem;
  width: 100%;
}

.workspace-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 2rem;
  align-items: start;
}

/* Left Pane: Form Controls */
.form-pane {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
  box-shadow: var(--shadow-sm);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.15rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-neutral-100);
}

.card-title-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.card-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--color-neutral-100);
  color: var(--color-neutral-700);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-neutral-900);
  letter-spacing: -0.01em;
}

.card-subtitle {
  font-size: 0.8rem;
  color: var(--color-neutral-500);
}

.card-header.is-collapsible {
  cursor: pointer;
  user-select: none;
}

.card-header.is-collapsible:hover .card-title {
  color: var(--color-accent);
}

.card-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.card-toggle-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-neutral-400);
  border-radius: var(--radius-sm);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease, background-color 0.2s ease;
  line-height: 1;
}

.card-toggle-btn:hover {
  color: var(--color-neutral-900);
  background: var(--color-neutral-100);
}

.card.is-collapsed .card-toggle-btn {
  transform: rotate(-90deg);
}

.card-body-wrapper {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  opacity: 1;
}

.card-body-wrapper > .card-body {
  min-height: 0;
  overflow: hidden;
}

.card.is-collapsed .card-body-wrapper {
  grid-template-rows: 0fr;
  opacity: 0;
}

.card.is-collapsed .card-header {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

/* ==========================================================================
   Live Invoice Field Highlighting
   ========================================================================== */
.sheet-field {
  display: inline-block;
  border-radius: var(--radius-sm);
  transition: background-color 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.2s ease;
}

.sheet-highlight {
  background-color: rgba(37, 99, 235, 0.12) !important;
  box-shadow: 0 0 0 2.5px rgba(37, 99, 235, 0.45), 0 2px 8px rgba(37, 99, 235, 0.15) !important;
  border-radius: var(--radius-sm) !important;
  color: #1d4ed8 !important;
}

.sheet-row-highlight {
  background-color: rgba(37, 99, 235, 0.08) !important;
  box-shadow: inset 3.5px 0 0 var(--color-accent), 0 0 0 1px rgba(37, 99, 235, 0.2) !important;
  border-radius: var(--radius-sm) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.party-box.sheet-box-highlight {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.4), 0 2px 10px rgba(37, 99, 235, 0.08) !important;
  background-color: rgba(37, 99, 235, 0.03) !important;
}

@keyframes sheet-field-pulse {
  0% {
    background-color: rgba(37, 99, 235, 0.28);
    transform: scale(1.02);
  }
  50% {
    background-color: rgba(37, 99, 235, 0.18);
  }
  100% {
    background-color: rgba(37, 99, 235, 0.12);
    transform: scale(1);
  }
}

.sheet-field-typing {
  animation: sheet-field-pulse 0.35s ease-out;
}

.sheet-items-table tr.sheet-row-highlight td {
  background-color: rgba(37, 99, 235, 0.07) !important;
}

.sheet-items-table tr td.sheet-cell-highlight {
  background-color: rgba(37, 99, 235, 0.16) !important;
  font-weight: 600;
  color: #1d4ed8;
}

/* Form Elements */
.form-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}

.form-row:last-child {
  margin-bottom: 0;
}

.col-12 { grid-column: span 12; }
.col-8 { grid-column: span 8; }
.col-7 { grid-column: span 7; }
.col-6 { grid-column: span 6; }
.col-5 { grid-column: span 5; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
.col-2 { grid-column: span 2; }

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.form-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-neutral-700);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-neutral-300);
  background-color: #ffffff;
  color: var(--color-neutral-900);
  transition: all 0.15s ease;
}

.form-input:hover, .form-select:hover, .form-textarea:hover {
  border-color: var(--color-neutral-400);
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.input-with-action {
  display: flex;
  gap: 0.4rem;
}

.btn-input-action {
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-neutral-300);
  background: var(--color-neutral-50);
  color: var(--color-neutral-800);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.15s ease;
}

.btn-input-action:hover {
  background: var(--color-neutral-200);
  border-color: var(--color-neutral-400);
}

.btn-input-action.loading {
  opacity: 0.7;
  pointer-events: none;
}

/* Switch toggle */
.switch-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  user-select: none;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-neutral-800);
}

.switch-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch-slider {
  width: 38px;
  height: 22px;
  background-color: var(--color-neutral-300);
  border-radius: 9999px;
  position: relative;
  transition: background-color 0.2s ease;
  pointer-events: none;
}

.switch-slider::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 18px;
  height: 18px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}

.switch-input:checked + .switch-slider {
  background-color: var(--color-accent);
}

.switch-input:checked + .switch-slider::before {
  transform: translateX(16px);
}

/* Items Table */
.items-table-wrap {
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  overflow-x: auto;
  background: #ffffff;
}

.items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.items-table th {
  background: var(--color-neutral-50);
  text-align: left;
  padding: 0.6rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-neutral-600);
  border-bottom: 1px solid var(--color-neutral-200);
}

.items-table td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--color-neutral-100);
  vertical-align: middle;
}

.items-table tr:last-child td {
  border-bottom: none;
}

.items-table input, .items-table select {
  padding: 0.4rem 0.5rem;
  font-size: 0.85rem;
}

.btn-remove-line {
  background: none;
  border: none;
  color: var(--color-neutral-400);
  cursor: pointer;
  padding: 0.35rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.btn-remove-line:hover {
  color: var(--color-danger);
  background: #fee2e2;
}

.items-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.85rem;
}

.btn-add-line {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-neutral-400);
  background: var(--color-neutral-50);
  color: var(--color-neutral-800);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.15s ease;
}

.btn-add-line:hover {
  background: #ffffff;
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Quick utility buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.6rem 1.15rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  text-decoration: none;
}

.btn-primary {
  background: var(--color-accent);
  color: #ffffff;
}

.btn-primary:hover {
  background: var(--color-accent-hover);
}

.btn-secondary {
  background: #ffffff;
  border-color: var(--color-neutral-300);
  color: var(--color-neutral-800);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  background: var(--color-neutral-50);
  border-color: var(--color-neutral-400);
}

.btn-subtle {
  background: transparent;
  color: var(--color-neutral-600);
}

.btn-subtle:hover {
  background: var(--color-neutral-100);
  color: var(--color-neutral-900);
}

.btn-sm {
  font-size: 0.8rem;
  padding: 0.38rem 0.75rem;
}

.btn-xs {
  font-size: 0.72rem;
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.btn-subtle.btn-active {
  background: var(--color-neutral-900);
  color: #ffffff;
}

html.dark .btn-subtle.btn-active {
  background: #ffffff;
  color: #171717;
}

/* Right Pane: Live A4 Invoice Sheet Preview */
.preview-pane {
  position: sticky;
  top: 4.8rem;
}

.preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
  gap: 0.5rem;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.preview-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-success);
  background: var(--color-success-bg);
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
}

.preview-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-success);
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2);
}

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* The A4 Invoice Sheet Container */
.invoice-sheet-container {
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sheet);
  background: #ffffff;
}

.invoice-sheet {
  background: #ffffff;
  padding: 3rem 2.8rem;
  color: #1a1a18;
  font-size: 13px;
  line-height: 1.45;
  width: 100%;
  max-width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
  page-break-inside: avoid;
  break-inside: avoid;
  page-break-after: avoid;
}

/* --------------------------------------------------------------------------
   PDF EXPORT GEOMETRY
   --------------------------------------------------------------------------
   Held for the length of one html2pdf capture and removed again (app.js,
   withPdfExportLayout). It is the fix for the blank second page.

   On screen the sheet is `width: 100%` inside a ~670px preview pane while
   `min-height: 297mm` still forces 1122px of height.

   During export, the capture is pinned to a real A4 column: 210mm wide,
   with clamped bottom padding (10mm) and natural height (min-height: auto)
   so the sheet does not artificially force 296mm and overflow into an
   accidental blank second page. page-break-inside: avoid prevents accidental
   page splits when the content fits on one page.
   -------------------------------------------------------------------------- */
.invoice-sheet.pdf-export {
  width: 210mm !important;
  max-width: 210mm !important;
  min-height: auto !important;
  padding: 14mm 12mm 10mm 12mm !important;
  margin: 0 !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  break-inside: auto;
}

/*
 * The capture is A4 on every device.
 *
 * `@media (max-width: 720px)` below stacks .invoice-parties, .invoice-meta-grid
 * and .invoice-bottom-layout into one column. A media query answers to the
 * VIEWPORT, so pinning the element to 210mm above does not switch those rules
 * off, and a visitor on a phone used to download a differently laid out — and
 * one page longer — invoice than the same visitor on a laptop. The document
 * must not depend on the device that asked for it.
 *
 * These three lines are the whole difference, and they only ever apply inside
 * a capture.
 */
.invoice-sheet.pdf-export .invoice-parties,
.invoice-sheet.pdf-export .invoice-meta-grid,
.invoice-sheet.pdf-export .invoice-bottom-layout {
  grid-template-columns: 1fr 1fr !important;
}

.invoice-sheet.pdf-export .invoice-bottom-layout {
  margin-bottom: 1.5rem !important;
  page-break-inside: avoid;
  break-inside: avoid;
}

.invoice-sheet.pdf-export .sheet-footer {
  page-break-inside: avoid;
  break-inside: avoid;
}

/* U8: High-contrast monochrome rules for PDF export */
.invoice-sheet.pdf-export .party-title,
.invoice-sheet.pdf-export .meta-label,
.invoice-sheet.pdf-export .qr-caption,
.invoice-sheet.pdf-export .vat-breakdown-table th,
.invoice-sheet.pdf-export .sheet-footer,
.invoice-sheet.pdf-export .sheet-branding-caption {
  color: #262626 !important;
}

.invoice-sheet.pdf-export .party-id-label {
  color: #1a1a18 !important;
}

.invoice-sheet.pdf-export .sheet-note-block {
  color: #262626 !important;
}

.invoice-sheet.pdf-export .sheet-items-table th {
  color: #111111 !important;
  border-top-color: #111111 !important;
  border-bottom-color: #111111 !important;
}

.invoice-sheet.pdf-export .sheet-items-table td {
  border-bottom: 1px solid #737373 !important;
}

.invoice-sheet.pdf-export .invoice-meta-grid {
  border-top: 1px solid #555555 !important;
  border-bottom: 1px solid #555555 !important;
}

.invoice-sheet.pdf-export .qr-code-frame {
  border: 1px solid #555555 !important;
}

.invoice-sheet.pdf-export .vat-breakdown-table th {
  border-bottom: 1px solid #555555 !important;
}

.invoice-sheet.pdf-export .vat-breakdown-table td {
  border-bottom: 1px solid #a3a3a3 !important;
}

.invoice-sheet.pdf-export .non-vat-payer-notice {
  border-bottom: 1px solid #555555 !important;
}

.invoice-sheet.pdf-export .sheet-footer {
  border-top: 1px solid #555555 !important;
}

/* Sheet Typography and Layout */
.invoice-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid #1a1a18;
  padding-bottom: 1.25rem;
  margin-bottom: 1.75rem;
}

.invoice-heading-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: #000000;
  letter-spacing: -0.02em;
}

.invoice-number-wrap {
  margin-top: 0.25rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: #333333;
}

.sheet-logo-slot {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.sheet-logo-placeholder-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  border: 1px dashed var(--color-neutral-400);
  border-radius: var(--radius-sm);
  background: var(--color-neutral-50);
  color: var(--color-neutral-600);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sheet-logo-placeholder-btn:hover {
  border-color: var(--color-warning);
  color: var(--color-warning);
  background: #fef3c7;
}

/* Watermark & branding stamp on PDF export and print */
.sheet-branding-stamp {
  display: none;
  align-items: center;
  gap: 0.45rem;
  user-select: none;
  cursor: pointer;
}

.sheet-branding-caption {
  font-size: 0.75rem;
  font-weight: 500;
  color: #666666;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.sheet-branding-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.sheet-branding-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #171717;
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.sheet-branding-icon svg {
  width: 15px;
  height: 15px;
}

.sheet-branding-text {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #171717;
  white-space: nowrap;
}

.invoice-sheet.pdf-export .sheet-logo-placeholder-btn,
.invoice-sheet.pdf-preview-mode .sheet-logo-placeholder-btn {
  display: none !important;
}

.invoice-sheet.pdf-export .sheet-branding-stamp,
.invoice-sheet.pdf-preview-mode .sheet-branding-stamp {
  display: inline-flex !important;
}

.invoice-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 1.75rem;
}

.party-box {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.party-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #666666;
  margin-bottom: 0.35rem;
}

.party-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #000000;
  margin-bottom: 0.2rem;
}

.party-line {
  color: #333333;
}

.party-tax-ids {
  margin-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.party-id-row {
  display: flex;
  gap: 0.5rem;
  font-size: 12px;
}

.party-id-label {
  font-weight: 600;
  color: #555555;
}

/* Invoice Metadata Grid (VS, Dates, Payment) */
.invoice-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  border-top: 1px solid #d4d0c7;
  border-bottom: 1px solid #d4d0c7;
  padding: 1.1rem 0;
  margin-bottom: 1.75rem;
}

.meta-col {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.meta-label {
  color: #666666;
  font-size: 12px;
}

.meta-val {
  font-weight: 600;
  color: #111111;
  text-align: right;
}

/* Invoice Items Table (Document Sheet) */
.sheet-items-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}

.sheet-items-table th {
  border-top: 1px solid #1a1a18;
  border-bottom: 1px solid #1a1a18;
  padding: 0.6rem 0.5rem;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #333333;
}

.sheet-items-table td {
  padding: 0.65rem 0.5rem;
  border-bottom: 1px solid #e8e5dc;
  font-size: 12.5px;
  vertical-align: top;
}

.sheet-items-table .col-desc { text-align: left; }
.sheet-items-table .col-qty { text-align: right; width: 65px; }
.sheet-items-table .col-unit { text-align: center; width: 45px; }
.sheet-items-table .col-price { text-align: right; width: 105px; }
.sheet-items-table .col-vat { text-align: right; width: 65px; }
.sheet-items-table .col-total { text-align: right; width: 115px; }

/* Bottom Section: QR & Totals */
.invoice-bottom-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 2.5rem;
  align-items: start;
  margin-bottom: 2.5rem;
}

.qr-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.qr-code-frame {
  width: 140px;
  height: 140px;
  border: 1px solid #e0ded7;
  padding: 6px;
  border-radius: var(--radius-sm);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-code-frame img, .qr-code-frame canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.qr-caption {
  font-size: 11px;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sheet-note-block {
  margin-top: 1rem;
  font-size: 11.5px;
  color: #444444;
  line-height: 1.45;
  white-space: pre-line;
}

/* Totals and VAT summary */
.totals-block {
  display: flex;
  flex-direction: column;
}

.vat-breakdown-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.75rem;
  font-size: 11.5px;
}

.vat-breakdown-table th {
  border-bottom: 1px solid #d4d0c7;
  padding: 0.35rem 0.2rem;
  font-size: 10.5px;
  color: #666666;
  text-transform: uppercase;
}

.vat-breakdown-table td {
  padding: 0.35rem 0.2rem;
  border-bottom: 1px solid #f0eee6;
}

.non-vat-payer-notice {
  font-size: 12.5px;
  font-weight: 700;
  color: #111111;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #d4d0c7;
  margin-bottom: 0.75rem;
}

.totals-summary {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 12px;
}

.total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.total-row-grand {
  margin-top: 0.5rem;
  padding-top: 0.65rem;
  border-top: 2px solid #1a1a18;
  font-size: 1.15rem;
  font-weight: 800;
  color: #000000;
}

/* Document Footer */
.sheet-footer {
  border-top: 1px solid #d4d0c7;
  padding-top: 0.75rem;
  font-size: 11px;
  color: #666666;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* Lead Magnet Card */
.lead-card-section {
  max-width: var(--max-w-app);
  margin: 3rem auto;
  padding: 0 1.5rem;
}

.lead-card {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  color: #ffffff;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2.5rem;
  align-items: center;
  box-shadow: var(--shadow-lg);
}

.lead-card-title {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}

.lead-card-desc {
  font-size: 0.95rem;
  color: #94a3b8;
  line-height: 1.55;
  margin-bottom: 1.25rem;
}

.lead-features-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.88rem;
}

.lead-feature-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #cbd5e1;
}

.lead-feature-item svg {
  color: #38bdf8;
}

.lead-form-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  backdrop-filter: blur(8px);
}

.lead-form-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.lead-form-sub {
  font-size: 0.82rem;
  color: #94a3b8;
  margin-bottom: 1.2rem;
}

.lead-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.lead-input {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
}

.lead-input::placeholder {
  color: #94a3b8;
}

.lead-input:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

/* Modals and Toasts */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  background: #ffffff;
  border-radius: var(--radius-xl);
  max-width: 540px;
  width: 100%;
  padding: 2rem;
  box-shadow: var(--shadow-lg);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.2s ease;
}

.modal-overlay.open .modal-content {
  transform: translateY(0) scale(1);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.modal-title {
  font-size: 1.25rem;
  font-weight: 700;
}

.modal-close {
  background: none;
  border: none;
  color: var(--color-neutral-400);
  cursor: pointer;
  padding: 0.35rem;
  border-radius: 50%;
}

.modal-close:hover {
  background: var(--color-neutral-100);
  color: var(--color-neutral-800);
}

.email-actions-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.email-action-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: all 0.15s ease;
}

.email-action-card:hover {
  border-color: var(--color-accent);
  background: var(--color-neutral-50);
}

.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: var(--color-neutral-900);
  color: #ffffff;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: 60;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

/* Site Footer */
.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--color-neutral-200);
  background: #ffffff;
  padding: 2.5rem 1.5rem;
}

.footer-inner {
  max-width: var(--max-w-app);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  color: var(--color-neutral-500);
  font-size: 0.85rem;
}

/* Responsive adjustments */
@media (max-width: 1080px) {
  .workspace-grid {
    grid-template-columns: 1fr;
  }
  .preview-pane {
    position: static;
  }
  .lead-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .hero-title {
    font-size: 1.75rem;
  }
  .invoice-parties, .invoice-meta-grid, .invoice-bottom-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .invoice-sheet {
    padding: 1.5rem;
  }
  .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2 {
    grid-column: span 12;
  }
}

/* ==========================================================================
   PRINT STYLESHEET
   Flawless A4 vector output: Hides all web UI, prints ONLY the invoice document
   ========================================================================== */
/* ==========================================================================
   LEAD MAGNET USAGE TRACKING & BLOCKING STYLES
   ========================================================================== */

.blocked-banner {
  max-width: 1440px;
  margin: 1.25rem auto 0;
  padding: 0 1.5rem;
}

.blocked-banner-inner {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fde68a;
  border-left: 5px solid #d97706;
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  box-shadow: var(--shadow-sm);
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.blocked-banner-content {
  flex: 1 1 500px;
}

.blocked-banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #f59e0b;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  margin-bottom: 0.5rem;
}

.blocked-banner-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #78350f;
  margin-bottom: 0.25rem;
}

.blocked-banner-text {
  font-size: 0.88rem;
  color: #92400e;
  line-height: 1.45;
}

.blocked-banner-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Locked Toolbar Buttons */
.btn.btn-locked {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #991b1b !important;
  cursor: pointer;
  position: relative;
}

.btn.btn-locked:hover {
  background: #fecaca !important;
  border-color: #f87171 !important;
}

/* Subtle reset link in footer */
.reset-usage-link {
  background: none;
  border: none;
  color: var(--color-neutral-400);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  margin-top: 0.5rem;
  text-decoration: underline;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.reset-usage-link:hover {
  opacity: 1;
  color: var(--color-neutral-600);
}


/* ==========================================================================
   MOBILE — phones (≤ 767 px)
   All rules in this block are screen-only; @media print is untouched.
   Desktop layout (≥ 1081 px) is unaffected.
   ========================================================================== */
@media (max-width: 767px) {

  /* ── 1. ROOT LAYOUT CONTAINMENT ──────────────────────────────────────── */
  /* Do NOT use overflow-x:hidden here — it masks real overflow bugs.
     Fix the layout so nothing protrudes. */

  /* ── 2. HEADER – compact, icon-only utility buttons ─────────────────── */
  .header-inner {
    padding: 0.55rem 0.9rem;
    gap: 0.4rem;
  }
  .brand-tag {
    display: none;
  }
  /* Keep icons, hide text labels on the two utility header buttons */
  #btn-sample-data > span,
  #btn-reset-form > span {
    display: none;
  }
  #btn-sample-data,
  #btn-reset-form {
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.5rem;
    justify-content: center;
  }

  /* ── 3. HERO – tighter vertical rhythm ──────────────────────────────── */
  .hero-section {
    padding: 1.1rem 1rem 0.9rem;
  }
  .hero-title {
    font-size: 1.4rem;
  }
  .hero-subtitle {
    font-size: 0.88rem;
    margin-bottom: 0.9rem;
  }
  .hero-badges {
    justify-content: flex-start;
    gap: 0.35rem 1rem;
    text-align: left;
    font-size: 0.8rem;
  }

  /* ── 4. WORKSPACE WRAPPER & GRID ────────────────────────────────────── */
  .workspace-wrapper {
    padding: 0 0.75rem;
    margin-bottom: calc(68px + env(safe-area-inset-bottom));
  }
  /* Use minmax(0,1fr) — bare 1fr has min-width:auto which lets the column
     expand past the container to fit its min-content (the 12-col form grid). */
  .workspace-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
  /* Grid/flex children: opt out of auto-sizing so they can't push past the cell */
  .form-pane,
  .preview-pane {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
  /* Inner 12-col form grid: same fix — each column must be able to shrink to 0 */
  .form-row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .form-row > * {
    min-width: 0;
  }

  /* ── 5. CARDS – tighter padding ─────────────────────────────────────── */
  .card {
    padding: 1rem 0.85rem;
  }
  .card-header {
    margin-bottom: 0.9rem;
    padding-bottom: 0.6rem;
  }

  /* ── 6. FORM INPUTS – 16 px prevents iOS viewport-zoom on focus ──────── */
  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px !important;
    min-height: 44px;
    padding: 0.6rem 0.75rem;
  }

  /* ── 7. BUTTONS – 44 px touch targets everywhere ────────────────────── */
  .btn {
    min-height: 44px;
    padding: 0.6rem 1rem;
  }
  .btn-sm {
    min-height: 44px;
    font-size: 0.82rem;
    padding: 0.5rem 0.75rem;
  }
  .btn-input-action {
    min-height: 44px;
    padding: 0 0.9rem;
    font-size: 0.8rem;
  }
  .btn-add-line {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    padding: 0.55rem 1rem;
  }
  .btn-remove-line {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── 8. FORM GRID COLUMNS – collapse most spans to full-width ────────── */
  /* col-6 stays 6 (50/50 pairs like Město + PSČ stay side by side) */
  .col-8, .col-7, .col-5, .col-4, .col-3, .col-2 {
    grid-column: span 12;
  }

  /* ── 9. ITEMS TABLE → stacked cards (no side-scroll) ────────────────── */
  .items-table-wrap {
    overflow-x: visible;
    border: none;
    border-radius: 0;
    background: transparent;
  }
  .items-table {
    display: block;
  }
  .items-table thead {
    display: none; /* labels supplied via ::before */
  }
  .items-table tbody {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }
  .items-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem 0.75rem;
    padding: 0.85rem;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    background: #fff;
  }
  .items-table tbody td {
    display: block;
    padding: 0;
    border: none;
    width: auto !important;      /* override inline width attrs from JS */
    text-align: left !important; /* override inline text-align */
  }
  /* Pseudo-label above each cell */
  .items-table tbody td::before {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--color-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.22rem;
  }
  .items-table tbody td:nth-child(1)::before { content: "Popis"; }
  .items-table tbody td:nth-child(2)::before { content: "Množství"; }
  .items-table tbody td:nth-child(3)::before { content: "MJ"; }
  .items-table tbody td:nth-child(4)::before { content: "Cena/MJ"; }
  .items-table tbody td:nth-child(5)::before { content: "DPH"; }
  .items-table tbody td:nth-child(6)::before { content: "Celkem"; }
  /* Description row spans both columns */
  .items-table tbody td:nth-child(1) {
    grid-column: 1 / -1;
  }
  /* Delete-button cell: full-width row, right-aligned */
  .items-table tbody td:last-child {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
  }
  .items-table tbody td:last-child::before {
    display: none;
  }
  /* Total cell: left-align, bold, readable size */
  .items-table tbody td.line-total-cell {
    font-size: 1rem;
    font-weight: 700;
  }
  /* Inputs/selects inside stacked cards need touch-friendly size */
  .items-table input,
  .items-table select {
    font-size: 16px !important;
    min-height: 44px;
    padding: 0.5rem 0.6rem;
    width: 100%;
  }

  /* ── 10. PREVIEW TOOLBAR → fixed bottom action bar ──────────────────── */
  .preview-toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 35;
    border-radius: 0;
    border-top: 1px solid var(--color-neutral-200);
    border-bottom: none;
    border-left: none;
    border-right: none;
    margin: 0;
    padding: 0.55rem 0.75rem;
    padding-bottom: calc(0.55rem + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
    gap: 0.5rem;
  }
  .toolbar-left {
    display: none; /* hide "Živý náhled A4" indicator */
  }
  .toolbar-actions {
    width: 100%;
    flex-wrap: nowrap;
    gap: 0.5rem;
    justify-content: stretch;
  }
  .toolbar-actions .btn {
    flex: 1;
    min-height: 44px;
    padding: 0.5rem 0.35rem;
    font-size: 0.76rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Icon stays; label visible at ≥ 360 px */

  /* ── 11. INVOICE PREVIEW PANE ────────────────────────────────────────── */
  /* Toggle button (added in HTML) */
  .mobile-preview-toggle {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.88rem;
    font-weight: 600;
    min-height: 44px;
    border-radius: var(--radius-lg);
  }
  .mobile-preview-toggle .toggle-chevron {
    transition: transform 0.2s ease;
  }
  .mobile-preview-toggle[aria-expanded="true"] .toggle-chevron {
    transform: rotate(180deg);
  }
  /* Invoice container: display:none by default — keeps children out of layout
     so they don't bleed past the viewport even before the user opens the toggle.
     (max-height:0 + overflow:hidden still lets children report their natural
     bounding rects to getBoundingClientRect.) */
  .invoice-sheet-container {
    display: none;
  }
  .invoice-sheet-container.preview-open {
    display: block;
    /* The A4 sheet (210 mm = 793 px) is wider than any phone viewport.
       Contain it: the container scrolls horizontally, the page does not. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
    margin-top: 0.5rem;
  }
  /* Do NOT change the sheet's own geometry here. html2pdf renders this element
     as it stands in the DOM, so any padding or min-height change on a phone
     changes the PDF the customer downloads. 1.5rem is what the old 720px
     breakpoint produced, and the generated PDF is byte-comparable to it. */
  .invoice-sheet {
    padding: 1.5rem;
  }

  /* ── 12. MODALS → bottom sheet ───────────────────────────────────────── */
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .modal-content {
    max-width: 100%;
    width: 100%;
    max-height: 90svh;          /* svh = small viewport height (avoids browser chrome) */
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 1.25rem 1rem 1.5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* override desktop scale-in animation */
    transform: translateY(40px);
  }
  .modal-overlay.open .modal-content {
    transform: translateY(0);
  }

  /* ── 13. BLOCKED MODAL – collapse inline-grid rows on phone ─────────── */
  /* The form rows use inline style="display:grid;grid-template-columns:1fr 1fr"
     We override with !important to make them single-column */
  #blocked-modal [style*="grid-template-columns:1fr 1fr"],
  #blocked-modal [style*="grid-template-columns: 1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
  }
  /* The two choice buttons (ANO/NE) stay 2-col — they have enough height */
  #blocked-modal [style*="margin-top:0.85rem"],
  #blocked-modal [style*="margin-top: 0.85rem"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex-direction: unset !important;
  }
  /* Blocked modal inputs */
  #blocked-modal .form-input {
    font-size: 16px !important;
    min-height: 44px;
  }

  /* ── 14. LEAD CARD SECTION ───────────────────────────────────────────── */
  .lead-card {
    padding: 1.5rem 1.1rem;
    gap: 1.5rem;
  }
  .lead-card-title {
    font-size: 1.3rem;
  }
  .lead-card-section {
    margin: 1.5rem auto;
    padding: 0 0.75rem;
  }

  /* ── 15. BLOCKED BANNER ──────────────────────────────────────────────── */
  .blocked-banner {
    padding: 0 0.75rem;
    margin-top: 0.65rem;
  }
  .blocked-banner-inner {
    padding: 1rem;
    flex-direction: column;
    gap: 0.85rem;
  }
  .blocked-banner-content {
    flex: unset;
  }
  .blocked-banner-actions {
    width: 100%;
    flex-direction: column;
  }
  .blocked-banner-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* ── 16. TOAST – above the fixed action bar ──────────────────────────── */
  .toast {
    bottom: calc(68px + 0.75rem + env(safe-area-inset-bottom));
    right: 0.75rem;
    left: 0.75rem;
    justify-content: center;
    font-size: 0.82rem;
  }

  /* ── 17. FOOTER ─────────────────────────────────────────────────────── */
  .site-footer {
    padding: 1.5rem 1rem;
  }
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.8rem;
  }
}

/* ── 18. TAP TARGETS MISSED BY THE FIRST PASS ───────────────────────────
   The inline lead-capture form and every modal close button were still under
   44 px, and the lead inputs were 12.6 px, which makes iOS zoom on focus. */
@media (max-width: 767px) {
  /* The action bar is fixed and 60 px tall, so the last of the page must clear
     it. Without this the footer sits under the bar and cannot be read. */
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
  .lead-input {
    font-size: 16px;
    min-height: 44px;
    padding: 0.6rem 0.75rem;
  }
  .lead-capture-form .btn,
  .lead-capture-form button {
    min-height: 44px;
    font-size: 0.95rem;
  }
  .modal-close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .switch-wrap {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Very small phones – collapse ALL col-6 pairs too */
@media (max-width: 360px) {
  .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2 {
    grid-column: span 12;
  }
}

/* ==========================================================================
   LOCKED FEATURE: LOGO UPLOAD
   ==========================================================================
   A control that is visible, reachable and inert. It looks like the dashed
   upload slot it will become once the visitor has an account, and it carries
   the padlock and amber accent already used by #lead-magnet-blocked-banner and
   .btn-locked so every locked thing on the page reads the same way.

   It is NOT `disabled` and it is NOT an <input type="file">. See the comment on
   the markup in index.html for why both of those matter.
   ========================================================================== */
.locked-upload {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  text-align: left;
  padding: 0.85rem 1rem;
  border: 1px dashed var(--color-neutral-300);
  border-radius: var(--radius-md);
  background: var(--color-neutral-50);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.locked-upload:hover {
  border-color: var(--color-warning);
  background: var(--color-neutral-100);
}

.locked-upload:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.locked-upload-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: var(--color-neutral-200);
  color: var(--color-neutral-600);
}

.locked-upload-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 auto;
}

/* The muted title is the whole "locked" signal. It reads as a control that is
   not yours yet, without `disabled` taking it out of the tab order. */
.locked-upload-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-neutral-500);
}

.locked-upload-hint {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--color-neutral-500);
}

.locked-upload-badge {
  flex: 0 0 auto;
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 9999px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  color: #92400e;
  white-space: nowrap;
}

.locked-modal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fef3c7;
  color: #b45309;
  flex: 0 0 auto;
}

.locked-modal-list {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: var(--color-neutral-700);
}

.locked-modal-list li {
  position: relative;
  padding-left: 1.4rem;
}

.locked-modal-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-success);
  font-weight: 700;
}

.form-error-text {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-danger);
}

/* The amber chips keep a light fill in the dark theme on purpose — they are a
   warning colour and stay recognisable — but the label on them must not
   follow the inverted ramp, so both are pinned here. */
html.dark .locked-upload {
  background: var(--color-surface-subtle);
}

html.dark .locked-upload:hover {
  background: var(--color-surface-elevated);
}

html.dark .locked-upload-badge {
  background: #3a2c0b;
  border-color: #78500b;
  color: #fbbf24;
}

html.dark .locked-modal-badge {
  background: #3a2c0b;
  color: #fbbf24;
}

/* ==========================================================================
   DARK THEME
   ==========================================================================
   Deliberately compatible with the Next.js application, so a visitor who
   switches theme in the app and then lands here sees the same thing:

     - the same localStorage key `theme`, with the same values 'dark'/'light'
     - the same `dark` class on <html>
     - the same pre-paint bootstrap, so there is no white flash

   The bootstrap lives in theme-init.js, NOT in an inline <script>. This page
   is a static file in public/ and can never be given a CSP nonce, and
   `script-src` is plain 'self' (lib/csp.ts). An inline script here is refused
   by the browser. See the note at the top of index.html.

   HOW IT WORKS. The whole sheet is built on the custom properties in :root, so
   dark mode is one re-map of those properties plus the short list of element
   rules below that hardcode a light hex. The neutral ramp is INVERTED: it is
   used semantically here — `--color-neutral-900` is always "text", and
   `--color-neutral-100` is always "a faint fill" — so swapping the ends keeps
   every existing rule correct with no edit.

   THE INVOICE SHEET IS EXEMPT. See the block after this one.
   ========================================================================== */
html.dark {
  /* Makes the browser's own chrome dark: scrollbars, and the native date and
     select popups the Platební údaje card relies on. */
  color-scheme: dark;

  --color-page: #12100d;
  --color-surface: #1b1815;
  --color-surface-subtle: #211d19;
  --color-surface-elevated: #262220;

  /* The warm ramp, end for end. 500 is the hinge and does not move. */
  --color-neutral-50: #16130f;
  --color-neutral-100: #201c17;
  --color-neutral-200: #2c2720;
  --color-neutral-300: #3b352c;
  --color-neutral-400: #564f44;
  --color-neutral-500: #8c8375;
  --color-neutral-600: #a79e91;
  --color-neutral-700: #c4bcb0;
  --color-neutral-800: #ddd7cc;
  --color-neutral-900: #f0ece4;
  --color-neutral-950: #faf8f4;

  /* Accent lifted to blue-400. #2563eb is a text and border colour here as
     well as a fill, and it does not carry enough contrast on a near-black
     ground. The filled primary button keeps the darker blue — see below. */
  --color-accent: #60a5fa;
  --color-accent-hover: #93c5fd;
  --color-accent-light: #16233a;
  --color-accent-border: #1e3a8a;

  --color-success: #4ade80;
  --color-success-bg: #0e2318;
  --color-warning: #fbbf24;
  --color-danger: #f87171;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --shadow-sheet: 0 12px 35px -5px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* --------------------------------------------------------------------------
   THE TAX DOCUMENT IS WHITE PAPER IN EVERY THEME.
   --------------------------------------------------------------------------
   This is the same guarantee `app/globals.css` makes for the application, on
   the same `[data-invoice-sheet]` hook, and for the same reason: the sheet on
   screen IS the printed page and IS the PDF. A dark invoice is a defect, not a
   preference.

   Two things hold it up, and the first one is the real guarantee:

     1. Every rule in the sheet subtree already writes a literal hex. Only
        `.sheet-row-highlight` — a transient typing highlight that @media print
        already neutralises — reads a custom property at all. The re-map above
        therefore cannot reach the paper.
     2. This block, the belt beside it. `color-scheme: light` also stops the
        browser darkening anything of its own inside the sheet.

   Do not put `background: transparent` on the descendants here. It would strip
   the grey fill from the line-items table head and make the dark-theme sheet
   differ from the printed one.
   -------------------------------------------------------------------------- */
html.dark [data-invoice-sheet],
html.dark .invoice-sheet,
html.dark .invoice-sheet-container {
  color-scheme: light;
  background: #ffffff;
  color: #1a1a18;
}

/* --------------------------------------------------------------------------
   The rules that hardcode a light hex, and so cannot follow the re-map.
   Nothing in the `.invoice-sheet` subtree appears here, by design.
   -------------------------------------------------------------------------- */
html.dark .site-header {
  background: rgba(27, 24, 21, 0.85);
}

html.dark .form-input,
html.dark .form-select,
html.dark .form-textarea {
  background: var(--color-surface-subtle);
}

html.dark .items-table-wrap,
html.dark .btn-secondary,
html.dark .btn-add-line:hover,
html.dark .modal-content,
html.dark .site-footer {
  background: var(--color-surface);
}

html.dark .items-table tbody tr {
  background: transparent;
}

/* Inverted chips: the fill is now the LIGHT end of the ramp, so the label on
   top of it has to become dark. Leaving #ffffff here is white on white. */
html.dark .brand-badge,
html.dark .toast {
  color: var(--color-page);
}

/* The one filled accent surface that keeps the darker blue, so its white label
   stays legible. --color-accent is too light to sit under white text. */
html.dark .btn-primary {
  background: #2563eb;
  color: #ffffff;
}

html.dark .btn-primary:hover {
  background: #1d4ed8;
}

html.dark .hero-pill {
  background: var(--color-accent-light);
  border-color: var(--color-accent-border);
  color: var(--color-accent-hover);
}

/* Theme toggle, in the site header beside Vzorová data / Vymazat. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-neutral-600);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.theme-toggle:hover {
  background: var(--color-neutral-100);
  color: var(--color-neutral-900);
  border-color: var(--color-neutral-300);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Exactly one icon is ever in the document flow. The sun means "switch to
   light" and is only shown once the dark theme is on. */
.theme-toggle .icon-sun {
  display: none;
}

html.dark .theme-toggle .icon-sun {
  display: block;
}

html.dark .theme-toggle .icon-moon {
  display: none;
}

@media print {
  @page {
    size: A4 portrait;
    margin: 0 !important; /* Removes browser default URL, title, and timestamp headers/footers */
  }

  /* Reset layout */
  html, body {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 10.5pt;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: auto !important;
  }

  /* Hide everything except invoice document */
  .site-header,
  .hero-section,
  .form-pane,
  .preview-toolbar,
  .lead-card-section,
  .site-footer,
  .modal-overlay,
  .toast,
  .btn,
  .no-print {
    display: none !important;
    visibility: hidden !important;
  }

  .workspace-wrapper,
  .workspace-grid,
  .preview-pane,
  .invoice-sheet-container {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    overflow: visible !important;
  }

  .invoice-sheet {
    max-width: 210mm !important;
    min-height: auto !important;
    padding: 14mm 12mm !important;
    margin: 0 auto !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* Force exact ink printing */
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Neutralize all live field highlighting in print & PDF export */
  .sheet-highlight,
  .sheet-row-highlight,
  .sheet-cell-highlight,
  .sheet-box-highlight,
  .sheet-field-typing {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    border-color: inherit !important;
    color: inherit !important;
    transform: none !important;
    animation: none !important;
  }

  thead {
    display: table-header-group;
  }

  tfoot {
    display: table-footer-group;
  }

  tr, img, figure, .party-box, .meta-col, .qr-block, .totals-block {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .sheet-logo-placeholder-btn {
    display: none !important;
  }

  .sheet-branding-stamp {
    display: inline-flex !important;
  }

  /* U8: High-contrast monochrome print overrides */
  .party-title,
  .meta-label,
  .qr-caption,
  .vat-breakdown-table th,
  .sheet-footer,
  .sheet-branding-caption {
    color: #262626 !important;
  }

  .party-id-label {
    color: #1a1a18 !important;
  }

  .sheet-note-block {
    color: #262626 !important;
  }

  .sheet-items-table th {
    color: #111111 !important;
    border-top-color: #111111 !important;
    border-bottom-color: #111111 !important;
  }

  .sheet-items-table td {
    border-bottom: 1px solid #737373 !important;
  }

  .invoice-meta-grid {
    border-top: 1px solid #555555 !important;
    border-bottom: 1px solid #555555 !important;
  }

  .qr-code-frame {
    border: 1px solid #555555 !important;
  }

  .vat-breakdown-table th {
    border-bottom: 1px solid #555555 !important;
  }

  .vat-breakdown-table td {
    border-bottom: 1px solid #a3a3a3 !important;
  }

  .non-vat-payer-notice {
    border-bottom: 1px solid #555555 !important;
  }

  .sheet-footer {
    border-top: 1px solid #555555 !important;
  }
}

/* Each canvas is one bounded page, including its own continuation margins. */
.pdf-pages-host { position: absolute; left: -10000px; top: 0; width: 210mm; }
.invoice-sheet.pdf-export.pdf-page { position: relative; height: 296mm; min-height: 296mm !important; box-sizing: border-box; }
.pdf-page-content { display: flow-root; }
.pdf-page .sheet-items-table { table-layout: fixed; margin-bottom: 6mm; }
.pdf-page .sheet-items-table .col-desc { overflow-wrap: anywhere; width: auto; }
.pdf-page .sheet-items-table .col-qty { width: 14%; }
.pdf-page .sheet-items-table .col-unit { width: 7%; }
.pdf-page .sheet-items-table .col-price { width: 17%; }
.pdf-page .sheet-items-table .col-vat { width: 10%; }
.pdf-page .sheet-items-table .col-total { width: 18%; }
.pdf-page .invoice-bottom-layout { gap: 8mm; margin-bottom: 6mm !important; }
.pdf-continuation-heading { font-size: 11px; color: #262626; margin-bottom: 5mm; }
.pdf-page-number { position: absolute; right: 12mm; bottom: 7mm; font-size: 10px; color: #262626; }

/* TODO.md L3.8: why EUR and USD are unavailable to a VAT payer. */
.form-currency-hint { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: #525252; }
html.dark .form-currency-hint { color: #a3a3a3; }