:root { font-family: Arial, Helvetica, sans-serif; color: #111; background: #f5f5f5; }
* { box-sizing: border-box; }
body { margin: 0; background: #f5f5f5; color: #111; }
a { color: inherit; }
.app-shell { max-width: 1180px; margin: 0 auto; padding: 24px; }
.topbar { display:flex; gap:14px; align-items:center; justify-content:space-between; margin-bottom:22px; }
.topbar h1 { margin:0; font-size:24px; }
.nav, .actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.card { background:#fff; border:1px solid #ddd; border-radius:10px; padding:20px; margin-bottom:20px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.card h2,.card h3 { margin-top:0; }
.btn, button { display:inline-block; appearance:none; border:1px solid #222; border-radius:7px; background:#222; color:#fff; padding:10px 14px; font:inherit; font-weight:700; cursor:pointer; text-decoration:none; }
.btn.secondary, button.secondary { background:#fff; color:#111; border-color:#999; }
.btn.danger, button.danger { background:#fff; color:#7b1111; border-color:#7b1111; }
.btn.small, button.small { padding:6px 9px; font-size:13px; }
.form-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:14px; }
.form-row.single { grid-template-columns:1fr; }
.form-row.three { grid-template-columns:1fr 1fr 1fr; }
.form-row.four { grid-template-columns:2fr 1fr 1fr 1fr; }
label { display:block; font-weight:700; margin-bottom:6px; }
input,textarea,select { width:100%; border:1px solid #aaa; border-radius:6px; padding:10px 11px; font:inherit; background:#fff; }
textarea { min-height:90px; resize:vertical; }
.help,.muted { color:#666; font-size:13px; }
.flash { border-radius:7px; padding:12px 14px; margin-bottom:18px; border:1px solid #ccc; background:#fff; }
.flash.success { border-color:#6a8f6a; } .flash.error { border-color:#a55; } .flash.info { border-color:#888; }
.config-warning { background:#fff7df; border:1px solid #c89b28; border-radius:8px; padding:14px; margin-bottom:18px; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; background:#fff; }
th,td { text-align:left; padding:11px 10px; border-bottom:1px solid #e5e5e5; vertical-align:top; }
th { font-size:13px; color:#555; }
tr.clickable:hover { background:#fafafa; }
tr.aged-open { background:#fffaf0; }
.status { display:inline-block; border:1px solid #aaa; border-radius:999px; padding:3px 8px; font-size:12px; font-weight:700; white-space:nowrap; }
.status.open { border-color:#a36b00; } .status.paid { border-color:#4d7b4d; } .status.voided { border-color:#777; } .status.loss { border-color:#833; }
.definition-grid { display:grid; grid-template-columns:180px 1fr; gap:8px 16px; }
.definition-grid dt { color:#666; } .definition-grid dd { margin:0; font-weight:600; }
.amount-large { font-size:34px; font-weight:700; margin:8px 0 2px; }
.invoice-number { font-size:14px; color:#555; }

/* Floristinnen-Arbeitsplatz */
.summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:20px; }
.summary-card { display:block; background:#fff; border:1px solid #ddd; border-radius:10px; padding:16px; text-decoration:none; }
.summary-card:hover { border-color:#aaa; }
.summary-card .summary-label { color:#666; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.summary-card .summary-value { font-size:24px; font-weight:700; margin-top:5px; }
.summary-card .summary-note { color:#666; font-size:12px; margin-top:3px; }
.filter-card { padding-bottom:6px; }
.opening-number-card { text-align:center; border:2px solid #222; padding:24px 20px 22px; }
.opening-number-card .eyebrow { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#555; }
.opening-number-card .big-number { font-size:72px; line-height:1; letter-spacing:.08em; font-weight:800; margin:10px 0 8px; font-variant-numeric:tabular-nums; }
.opening-number-card .opening-note { color:#555; margin-bottom:14px; }
.reminder-meta { font-size:12px; color:#666; line-height:1.35; }
.contact-line { font-size:13px; line-height:1.4; }
.contact-line a { text-decoration:none; border-bottom:1px dotted #999; }
.reminder-preview { white-space:pre-wrap; font-family:Arial,Helvetica,sans-serif; background:#fafafa; border:1px solid #ddd; padding:16px; border-radius:8px; line-height:1.5; }

.customer-gate { max-width:520px; margin:60px auto; }
.customer-gate h1 { margin-top:0; }
.print-toolbar { max-width:210mm; margin:16px auto; display:flex; gap:10px; justify-content:flex-end; }

.invoice-page { background:#fff; color:#000; max-width:210mm; margin:0 auto; }
.invoice-body { min-height:165mm; padding:16mm 15mm 10mm; }
.invoice-header { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:22mm; }
.invoice-logo { max-width:62mm; max-height:28mm; object-fit:contain; }
.invoice-issuer { text-align:right; font-size:12px; line-height:1.45; }
.invoice-address { margin-bottom:18mm; line-height:1.5; min-height:30mm; }
.invoice-meta { display:grid; grid-template-columns:1fr 1fr; gap:8px 30px; margin-bottom:14mm; }
.invoice-meta .label { color:#555; font-size:12px; } .invoice-meta .value { font-weight:700; }
.invoice-table { width:100%; border-collapse:collapse; margin-bottom:12mm; }
.invoice-table th,.invoice-table td { border-bottom:1px solid #bbb; padding:9px 4px; }
.invoice-table th:last-child,.invoice-table td:last-child { text-align:right; }
.invoice-totals { width:85mm; margin-left:auto; }
.invoice-totals-row { display:flex; justify-content:space-between; gap:20px; padding:4px 0; }
.invoice-totals-row.total { font-weight:700; border-top:1px solid #111; margin-top:4px; padding-top:7px; }
.invoice-paid-note { border:1px solid #444; padding:10px; margin:12mm 0; font-weight:700; text-align:center; }

.qr-screen-wrap { overflow-x:auto; padding-bottom:6px; }
.qr-bill { font-family:Arial,Helvetica,sans-serif; color:#000; background:#fff; font-size:10pt; line-height:1.18; }
.qr-bill-full { width:210mm; height:105mm; display:flex; border-top:.25mm dashed #777; }
.qr-bill-online { width:148mm; min-height:105mm; }
.qr-receipt { width:62mm; height:105mm; border-right:.25mm dashed #777; padding:5mm; position:relative; }
.qr-payment-part { width:148mm; height:105mm; padding:5mm; position:relative; }
.qr-receipt h2,.qr-payment-part h2 { font-size:11pt; margin:0 0 5mm; font-weight:700; }
.qr-receipt .qr-label { font-size:6pt; font-weight:700; margin-top:2.5mm; } .qr-receipt .qr-value { font-size:8pt; }
.qr-payment-part .qr-label { font-size:8pt; font-weight:700; margin-top:2.5mm; } .qr-payment-part .qr-value { font-size:10pt; }
.qr-payment-grid { display:grid; grid-template-columns:51mm 1fr; gap:5mm; }
.qr-left { width:51mm; }
.qr-code-box { width:56mm; height:56mm; padding:5mm; margin-left:-5mm; margin-top:-2mm; background:#fff; }
.swiss-qr-svg { width:46mm; height:46mm; display:block; }
.qr-amount-grid { display:grid; grid-template-columns:18mm 1fr; gap:2mm; margin-top:1mm; }
.qr-handwrite-box { border:.2mm solid #000; min-height:20mm; margin-top:1mm; }
.qr-handwrite-large { min-height:25mm; }
.qr-acceptance { position:absolute; right:5mm; bottom:5mm; font-size:6pt; font-weight:700; }

@media (max-width:760px) {
  .app-shell { padding:14px; } .topbar { align-items:flex-start; flex-direction:column; }
  .form-row,.form-row.three,.form-row.four { grid-template-columns:1fr; }
  .definition-grid { grid-template-columns:1fr; }
  .summary-grid { grid-template-columns:1fr 1fr; }
  .opening-number-card .big-number { font-size:48px; }
}
@media print {
  body { background:#fff; } .no-print,.print-toolbar { display:none!important; }
  .invoice-page { max-width:none; width:210mm; margin:0; } .invoice-body { min-height:191mm; }
  .qr-bill-full { break-inside:avoid; page-break-inside:avoid; }
  @page { size:A4 portrait; margin:0; }
}

/* QR layout version 2. Keep versioned assets immutable after release. */
.qr-bill-v2 .qr-handwrite-box { border:0; position:relative; width:52mm; height:20mm; min-height:0; }
.qr-bill-v2 .qr-handwrite-large { width:65mm; height:25mm; }
.qr-bill-v2 .qr-corner { position:absolute; width:3mm; height:3mm; border-color:#000; border-style:solid; border-width:0; }
.qr-bill-v2 .top-left { top:0; left:0; border-top-width:.75pt; border-left-width:.75pt; }
.qr-bill-v2 .top-right { top:0; right:0; border-top-width:.75pt; border-right-width:.75pt; }
.qr-bill-v2 .bottom-left { bottom:0; left:0; border-bottom-width:.75pt; border-left-width:.75pt; }
.qr-bill-v2 .bottom-right { bottom:0; right:0; border-bottom-width:.75pt; border-right-width:.75pt; }

.qr-bill-v2.qr-bill-full { position:relative; }
.qr-bill-v2.qr-bill-full::before { content:"Vor der Einzahlung abzutrennen"; position:absolute; top:-3mm; left:5mm; font-size:6pt; }
.qr-bill-v2 .qr-receipt::after { content:"\2702 "; position:absolute; top:0; right:-1.5mm; font-size:9pt; background:#fff; }

/* Simple invoice entry and telephone reading aid. */
.quick-shell { max-width:820px; }
.quick-form { max-width:640px; margin:0 auto; padding:28px; }
.quick-form #amount { font-size:28px; font-variant-numeric:tabular-nums; }
.quick-options { border-top:1px solid #e1e4de; padding:16px 0; }
.quick-options summary { cursor:pointer; font-size:14px; font-weight:600; }
.quick-options[open]>summary { margin-bottom:18px; }
.quick-form .actions { margin-top:12px; }
.quick-form button[type=submit] { width:100%; padding:14px; }
.reading-label { color:#555; font-size:14px; margin:20px 0 8px; }
.number-reading { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; max-width:600px; margin:0 auto 22px; font-size:20px; }
.number-reading span { background:#eef2e9; border-radius:6px; padding:9px 2px; }
.opening-actions { justify-content:center; }
@media(max-width:760px) {
  .quick-shell>.topbar { flex-direction:row; align-items:center; }
  .quick-shell>.topbar h1 { font-size:22px; }
  .quick-form { padding:22px; }
  .number-reading { font-size:14px; gap:3px; }
  .opening-actions>.btn { width:100%; text-align:center; }
}

.quick-shell>.topbar>.btn { white-space:nowrap; flex-shrink:0; }

.opening-followup h2 { margin-top:0; }
.opening-followup .actions { margin-bottom:0; }

/* Invoice email composition and immutable delivery history. */
.mail-message{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;max-width:100%;margin:1rem 0}.mail-attention{color:#9b2f12;font-weight:600}.mail-history details{margin-top:.4rem}.mail-history summary{cursor:pointer}.mail-history td{vertical-align:top}.mail-history pre{min-width:180px}