/* ServiceHub Redesign - Editor Summen / Kalkulation / Zahlung.
   Rein optisch, additiv, gescoped auf .del-wrap. Light und Dark. Keine Funktion/Markup. */

.del-wrap {
  --ses-accent: #E73D25;
  --ses-accent-soft: #FCEDE7;
  --ses-ink: #231C17;
  --ses-text: #463D35;
  --ses-text-2: #6B6157;
  --ses-muted: #9A8F84;
  --ses-surface: #FFFFFF;
  --ses-surf2: #F6F1EB;
  --ses-border: #EEE5DC;
  --ses-border-2: #E3D9CE;
  --ses-ok: #16A34A;
  --ses-ok-soft: #E9F8EF;
  --ses-warn: #C7791A;
  --ses-warn-soft: #FBF1E0;
  --ses-honey: #D99A2B;
  --ses-head: 'Space Grotesk', 'Figtree', system-ui, sans-serif;
  --ses-mono: 'Space Mono', ui-monospace, monospace;
  --ses-shadow: 0 6px 20px rgba(120, 80, 50, .07), 0 1px 2px rgba(120, 80, 50, .05);
}
[data-theme="dark"] .del-wrap {
  --ses-accent: #F2543B;
  --ses-accent-soft: rgba(242, 84, 59, .16);
  --ses-ink: #F6F1EC;
  --ses-text: #E2D8CE;
  --ses-text-2: #B3A99E;
  --ses-muted: #8C8175;
  --ses-surface: #1E1A16;
  --ses-surf2: #241F1A;
  --ses-border: #2E2822;
  --ses-border-2: #3A332B;
  --ses-ok: #3BC07A;
  --ses-ok-soft: rgba(59, 192, 122, .15);
  --ses-warn: #E5A33C;
  --ses-warn-soft: rgba(229, 163, 60, .15);
  --ses-honey: #E6AE4A;
  --ses-shadow: 0 6px 20px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .4);
}

/* Kalkulations-Bereich: warme Karte, Zahlen Mono, Ueberschriften Space Grotesk */
.del-wrap .del-calculation {
  background: var(--ses-surface);
  border: 1px solid var(--ses-border);
  border-radius: 16px;
  box-shadow: var(--ses-shadow);
  color: var(--ses-text);
}
.del-wrap .del-calculation h3,
.del-wrap .del-calculation h4 {
  font-family: var(--ses-head);
  color: var(--ses-ink);
}
.del-wrap .del-calculation .del-calc-value,
.del-wrap .del-calculation [class*="value"],
.del-wrap .del-calculation [class*="amount"] {
  font-family: var(--ses-mono);
  color: var(--ses-ink);
}

/* Zahlungs-Bereich + Status-Badge */
.del-wrap .del-payment {
  background: var(--ses-surf2);
  border: 1px solid var(--ses-border);
  border-radius: 12px;
  color: var(--ses-text);
}
.del-wrap .del-payment-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 11.5px;
}
.del-wrap .del-payment-status--paid {
  background: var(--ses-ok-soft);
  color: var(--ses-ok);
}
.del-wrap .del-payment-status--open,
.del-wrap .del-payment-status--partial {
  background: var(--ses-warn-soft);
  color: var(--ses-warn);
}