/* =========================================================================
   ServiceHub Re-Design — Bereich "ed-kalk-zahlung"
   Block 17 (Kalkulations-Tab) + Block 18 (Zahlung / "Als bezahlt markieren")
   im Beleg-Editor (doc-editor-layout.js / invoice-editor-integration.js).

   REIN OPTISCH. Keine Logik, keine Felder, keine Endpunkte, keine Routen,
   keine Status, keine Rechte. Nichts wird entfernt oder versteckt — alle
   Buttons/Felder/Zeilen/Tabs bleiben sichtbar und klickbar.

   Scoping: ausschliesslich unter .del-wrap (Editor-Tab-Container) sowie den
   Block-Wurzeln .del-calculation / .del-payment / .qei-status-card. Eigene
   --rd-* Tokens werden auf alle vier Wurzeln dupliziert, damit das Re-Design
   ladereihenfolge-unabhaengig greift. Light + Dark via [data-theme="dark"].

   Hinweis zu Kommentaren: Token-Namen werden hier ohne Stern notiert, und ein
   Kommentar wird immer sauber mit der echten Schliess-Sequenz beendet.
   ========================================================================= */

/* ---------- Tokens (Light) — auf allen Block-Wurzeln gespiegelt ---------- */
.del-wrap,
.del-calculation,
.del-payment,
.qei-status-card{
  --rd-accent:#E73D25; --rd-accent-700:#C5331E; --rd-accent-soft:#FCEDE7;
  --rd-accent-line:rgba(231,61,37,.22);
  --rd-honey:#D99A2B; --rd-honey-soft:#FBF0DA;
  --rd-ok:#16A34A; --rd-ok-soft:#E9F8EF;
  --rd-warn:#C7791A; --rd-warn-soft:#FBF1E0;
  --rd-info:#2F6BD6; --rd-info-soft:#EAF1FC;
  --rd-violet:#7C5BD6; --rd-violet-soft:#F0ECFB;
  --rd-bg:#FAF6F2; --rd-surface:#FFFFFF; --rd-surf-2:#F6F1EB; --rd-surf-3:#EFE8E0;
  --rd-ink:#231C17; --rd-text:#463D35; --rd-text-2:#6B6157; --rd-muted:#9A8F84;
  --rd-border:#EEE5DC; --rd-border-2:#E3D9CE; --rd-field:#F6F1EB;
  --rd-font-head:'Space Grotesk','Figtree',system-ui,sans-serif;
  --rd-font-body:'Figtree',system-ui,sans-serif;
  --rd-font-mono:'Space Mono',ui-monospace,monospace;
  --rd-r-xs:7px; --rd-r-sm:9px; --rd-r-md:12px; --rd-r-lg:16px; --rd-r-xl:20px; --rd-r-pill:999px;
  --rd-sh-sm:0 1px 2px rgba(120,80,50,.06);
  --rd-sh-md:0 6px 20px rgba(120,80,50,.07),0 1px 2px rgba(120,80,50,.05);
  --rd-sh-accent:0 5px 14px rgba(231,61,37,.28);
  --rd-ring:0 0 0 3px var(--rd-accent-soft);
  --rd-tr:.16s cubic-bezier(.2,.7,.3,1);
}
[data-theme="dark"] .del-wrap,
[data-theme="dark"] .del-calculation,
[data-theme="dark"] .del-payment,
[data-theme="dark"] .qei-status-card{
  --rd-accent:#F2543B; --rd-accent-700:#E0432B; --rd-accent-soft:rgba(242,84,59,.16);
  --rd-accent-line:rgba(242,84,59,.30);
  --rd-honey:#E6AE4A; --rd-honey-soft:rgba(230,174,74,.16);
  --rd-ok:#3BC07A; --rd-ok-soft:rgba(59,192,122,.15);
  --rd-warn:#E5A33C; --rd-warn-soft:rgba(229,163,60,.15);
  --rd-info:#5C8FE8; --rd-info-soft:rgba(92,143,232,.16);
  --rd-violet:#9D82E6; --rd-violet-soft:rgba(157,130,230,.16);
  --rd-bg:#15120F; --rd-surface:#1E1A16; --rd-surf-2:#241F1A; --rd-surf-3:#2C2620;
  --rd-ink:#F6F1EC; --rd-text:#E2D8CE; --rd-text-2:#B3A99E; --rd-muted:#8C8175;
  --rd-border:#2E2822; --rd-border-2:#3A332B; --rd-field:#241F1A;
  --rd-sh-sm:0 1px 2px rgba(0,0,0,.4);
  --rd-sh-md:0 6px 20px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.4);
  --rd-sh-accent:0 5px 14px rgba(0,0,0,.45);
  --rd-ring:0 0 0 3px var(--rd-accent-soft);
}

/* =========================================================================
   BLOCK 17 — Kalkulations-Tab (.del-calculation)
   KPI-Karten (VK / EK / Deckungsbeitrag / Marge), Gruppen- und Positions-
   Tabellen. Warme Karten, Zahlen in Space Mono, Ueberschriften Space Grotesk.
   ========================================================================= */
.del-calculation{
  font-family:var(--rd-font-body);
  color:var(--rd-text);
}
.del-calculation h3{
  font-family:var(--rd-font-head);
  font-size:14.5px;
  font-weight:700;
  color:var(--rd-ink);
  letter-spacing:-.01em;
}

/* KPI-Karten — warme Surface-Kacheln, farbiger Akzentstreifen aus --kpi-color */
.del-calculation .del-kpi{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:14px 16px;
  background:var(--rd-surface);
  border:1px solid var(--rd-border);
  border-radius:var(--rd-r-lg);
  box-shadow:var(--rd-sh-md);
  overflow:hidden;
  transition:var(--rd-tr);
}
.del-calculation .del-kpi::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  border-radius:0 var(--rd-r-pill) var(--rd-r-pill) 0;
  background:var(--kpi-color,var(--rd-accent));
}
.del-calculation .del-kpi:hover{
  transform:translateY(-2px);
  box-shadow:var(--rd-sh-accent);
}
.del-calculation .del-kpi-label{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--rd-muted);
}
.del-calculation .del-kpi-value{
  font-family:var(--rd-font-mono);
  font-size:19px;
  font-weight:700;
  color:var(--kpi-color,var(--rd-ink));
  line-height:1.1;
}

/* Tabellen (Gruppen-Kalkulation + Positionen mit EK) — warme data-table */
.del-calculation table.data-table{
  width:100%;
  border-collapse:collapse;
  background:var(--rd-surface);
  border:1px solid var(--rd-border);
  border-radius:var(--rd-r-lg);
  overflow:hidden;
  box-shadow:var(--rd-sh-sm);
  margin:6px 0 4px;
}
.del-calculation table.data-table thead th{
  font-family:var(--rd-font-body);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--rd-muted);
  text-align:left;
  padding:11px 14px;
  background:var(--rd-surf-2);
  border-bottom:1px solid var(--rd-border);
  white-space:nowrap;
}
.del-calculation table.data-table tbody td{
  padding:11px 14px;
  font-size:13px;
  color:var(--rd-text);
  border-bottom:1px solid var(--rd-border);
  vertical-align:middle;
}
.del-calculation table.data-table tbody tr:last-child td{
  border-bottom:none;
}
.del-calculation table.data-table tbody tr{
  transition:background .12s;
}
.del-calculation table.data-table tbody tr:hover{
  background:var(--rd-surf-2);
}
/* Zahlenspalten (rechtsbuendig per Inline-Style) monospaced + crisper Ink */
.del-calculation table.data-table td[style*="right"]{
  font-family:var(--rd-font-mono);
  color:var(--rd-ink);
  white-space:nowrap;
}
.del-calculation table.data-table th[style*="right"]{
  text-align:right;
}
/* Negative-Marge-Zeilen (Inline-Hintergrund #fdecea) auf warmes Accent-Soft */
.del-calculation table.data-table tr[style*="fdecea"],
.del-calculation table.data-table tr[style*="background:#fdecea"]{
  background:var(--rd-accent-soft);
}

/* Negativ-Kalkulations-Warnung (Inline #fdecea / #e74c3c) auf warmes Accent */
.del-calculation > div[style*="fdecea"]{
  background:var(--rd-accent-soft);
  border:1px solid var(--rd-accent-line);
  border-radius:var(--rd-r-md);
  color:var(--rd-accent-700);
}

/* Hinweistexte ("Keine Positionen", "Keine EK-Preise ...") */
.del-calculation .del-info{
  color:var(--rd-muted);
  font-size:13px;
  line-height:1.55;
}

/* =========================================================================
   BLOCK 18 — Zahlung (.del-payment) + "Als bezahlt markieren"
   Karten, Status-Badge (paid=ok, offen=warn, ueberfaellig=accent),
   Definitionslisten, Zahlungseingangs-Tabelle.
   ========================================================================= */
.del-payment{
  font-family:var(--rd-font-body);
  color:var(--rd-text);
}

/* Grid + Karten */
.del-payment .del-overview-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.del-payment .del-card{
  background:var(--rd-surface);
  border:1px solid var(--rd-border);
  border-radius:var(--rd-r-lg);
  box-shadow:var(--rd-sh-md);
  padding:16px 18px;
}
.del-payment .del-card--full{
  grid-column:1 / -1;
}
.del-payment .del-card h4{
  font-family:var(--rd-font-head);
  font-size:13.5px;
  font-weight:700;
  color:var(--rd-ink);
  margin:0 0 12px;
  letter-spacing:-.01em;
}

/* Status-Badge: paid=ok, offen/teilweise=warn, ueberfaellig=accent */
.del-payment .del-payment-status-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 12px;
  border-radius:var(--rd-r-pill);
  font-family:var(--rd-font-body);
  font-size:11.5px;
  font-weight:700;
  margin-bottom:10px;
  background:var(--rd-surf-2);
  color:var(--rd-text-2);
}
.del-payment .del-payment-status--paid{
  background:var(--rd-ok-soft);
  color:var(--rd-ok);
}
.del-payment .del-payment-status--open,
.del-payment .del-payment-status--partial,
.del-payment .del-payment-status--partially_paid{
  background:var(--rd-warn-soft);
  color:var(--rd-warn);
}
.del-payment .del-payment-status--overdue{
  background:var(--rd-accent-soft);
  color:var(--rd-accent);
}

/* Definitionsliste (Betraege) — Label gedeckt, Wert Ink, Zahlen Mono */
.del-payment .del-dl{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:7px 16px;
  margin:0;
  font-size:13px;
}
.del-payment .del-dl dt{
  color:var(--rd-text-2);
  font-weight:500;
}
.del-payment .del-dl dd{
  margin:0;
  text-align:right;
  font-family:var(--rd-font-mono);
  font-weight:600;
  color:var(--rd-ink);
}
.del-payment .del-dl dd strong{
  font-weight:700;
  color:var(--rd-ink);
}

/* Zahlungseingangs-Tabelle */
.del-payment .del-simple-table{
  width:100%;
  border-collapse:collapse;
  margin-top:4px;
}
.del-payment .del-simple-table thead th{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--rd-muted);
  text-align:left;
  padding:9px 12px;
  border-bottom:1px solid var(--rd-border);
}
.del-payment .del-simple-table tbody td{
  padding:10px 12px;
  font-size:12.5px;
  color:var(--rd-text);
  border-bottom:1px solid var(--rd-border);
}
.del-payment .del-simple-table tbody tr:last-child td{
  border-bottom:none;
}
.del-payment .del-simple-table td[style*="right"]{
  font-family:var(--rd-font-mono);
  color:var(--rd-ink);
  white-space:nowrap;
}

/* =========================================================================
   "Als bezahlt markieren" — Primaer-CTA in der Status-Karte des Editors
   (.qei-status-card .qei-action-btn--primary). Warmes Accent statt des
   hart inline-gesetzten Gruen. Reiner Farbtausch — Button bleibt sichtbar,
   gleiche Aktion (data-action="mark-paid"). Die Inline-Farbe wird nur fuer
   diese beiden Eigenschaften gezielt ueberschrieben.
   ========================================================================= */
.qei-status-card{
  font-family:var(--rd-font-body);
}
.qei-status-card .qei-status-card__title{
  font-family:var(--rd-font-head);
  color:var(--rd-ink);
  letter-spacing:-.01em;
}
.qei-status-card .qei-status-card__hint{
  color:var(--rd-text-2);
}
.qei-status-card .qei-status-card__action{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
}

/* Primaer-Button generell warm (greift fuer freigeben / senden / bezahlt) */
.qei-status-card .qei-action-btn--primary{
  border-radius:var(--rd-r-pill);
  font-family:var(--rd-font-body);
  font-weight:600;
  box-shadow:var(--rd-sh-accent);
  transition:var(--rd-tr);
}
.qei-status-card .qei-action-btn--primary:hover{
  transform:translateY(-1px);
}
/* "Als bezahlt markieren" traegt inline background/border #27ae60 →
   gezielt auf das warme Accent umfaerben (nur Farbe, kein Layout). */
.qei-status-card .qei-action-btn--primary[data-action="mark-paid"][style]{
  background:var(--rd-accent) !important;
  border-color:var(--rd-accent) !important;
  color:#fff !important;
}
.qei-status-card .qei-action-btn--primary[data-action="mark-paid"][style]:hover{
  background:var(--rd-accent-700) !important;
  border-color:var(--rd-accent-700) !important;
}

/* =========================================================================
   Mobile — KPI- und Karten-Grids stapeln (rein optisch)
   ========================================================================= */
@media(max-width:640px){
  .del-calculation > div[style*="repeat(4,1fr)"]{
    grid-template-columns:1fr 1fr !important;
  }
  .del-payment .del-overview-grid{
    grid-template-columns:1fr;
  }
}