/* =========================================================================
   ServiceHub - Redesign: Belegeditor "Uebersicht"-Tab (ed-overview)
   --------------------------------------------------------------------------
   REIN OPTISCH. Additive Schicht. Re-Skin des Uebersicht-Tab-Inhalts im
   gemeinsamen Belegeditor (Angebot - Auftrag - Rechnung - Lieferschein -
   Gutschrift). Styled die ECHTEN Selektoren aus doc-editor-layout.js
   (_renderOverviewTab):
     .del-ov-section / .del-ov-section h4 / .del-ov-icon  (Stammdaten-Karten)
     .del-ov-grid / .del-ov-grid--3 / .del-ov-field       (Feldraster)
     .del-ov-field label / input / textarea / select       (Felder)
     .del-ov-field--full                                    (volle Breite)
     .del-ov-info / dt / dd                                 (Info-Zeilen)
     .del-ov-actions / .del-ov-btn (+ --primary/--ghost/--ai)
     .del-ov-status                                         (Status-Pille)

   WICHTIG: doc-editor-layout.js injiziert beim Rendern einen INLINE
   style-Block mit hart codierten Hellfarben (kein Dark-Mode). Diese Schicht
   gewinnt durch hoehere Spezifitaet (.del-wrap-Scope: 0,2,0 vs inline 0,1,0)
   ohne !important-Wust und bringt die warme Palette + Dark-Mode zurueck.

   KEINE Funktions-/Markup-/Logik-Aenderung. Nichts wird versteckt (kein
   display:none auf Buttons/Tabs/Feldern/Zeilen). Reines CSS.

   Tokens lokal als --sex- auf den Tab-Inhalt gescoped (ladereihenfolge-
   unabhaengig). Light + Dark via data-theme. Globale Basis nicht angefasst.
   ========================================================================= */

/* ---------- Tokens (Light) - auf den Uebersicht-Tab-Inhalt gescoped ---------- */
.del-wrap .del-tab-content {
  --sex-accent: #E73D25;
  --sex-accent-700: #C5331E;
  --sex-accent-soft: #FCEDE7;
  --sex-accent-line: rgba(231, 61, 37, .22);
  --sex-honey: #D99A2B;
  --sex-ok: #16A34A;
  --sex-warn: #C7791A;
  --sex-info: #2F6BD6;
  --sex-violet: #7C5BD6;
  --sex-violet-700: #6A4BC0;

  --sex-bg: #FAF6F2;
  --sex-surface: #FFFFFF;
  --sex-surf-2: #F6F1EB;
  --sex-surf-3: #EFE8E0;
  --sex-field: #F8F4EF;

  --sex-ink: #231C17;
  --sex-text: #463D35;
  --sex-text-2: #6B6157;
  --sex-muted: #9A8F84;
  --sex-border: #EEE5DC;
  --sex-border-2: #E3D9CE;

  --sex-font-head: 'Space Grotesk', 'Figtree', system-ui, sans-serif;
  --sex-font-body: 'Figtree', system-ui, sans-serif;
  --sex-font-mono: 'Space Mono', ui-monospace, monospace;

  --sex-r-xs: 7px;
  --sex-r-sm: 9px;
  --sex-r-md: 12px;
  --sex-r-lg: 16px;
  --sex-r-pill: 999px;

  --sex-shadow-sm: 0 1px 2px rgba(120, 80, 50, .06);
  --sex-shadow-soft: 0 6px 20px rgba(120, 80, 50, .07), 0 1px 2px rgba(120, 80, 50, .05);
  --sex-shadow-accent: 0 5px 14px rgba(231, 61, 37, .26);
  --sex-ring: 0 0 0 3px var(--sex-accent-soft);
  --sex-tr: .16s cubic-bezier(.2, .7, .3, 1);
}

/* ---------- Tokens (Dark) ---------- */
[data-theme="dark"] .del-wrap .del-tab-content {
  --sex-accent: #F2543B;
  --sex-accent-700: #E0432B;
  --sex-accent-soft: rgba(242, 84, 59, .16);
  --sex-accent-line: rgba(242, 84, 59, .30);
  --sex-honey: #E6AE4A;
  --sex-ok: #3BC07A;
  --sex-warn: #E5A33C;
  --sex-info: #5C8FE8;
  --sex-violet: #9D82E6;
  --sex-violet-700: #8A6FD8;

  --sex-bg: #15120F;
  --sex-surface: #1E1A16;
  --sex-surf-2: #241F1A;
  --sex-surf-3: #2C2620;
  --sex-field: #211C18;

  --sex-ink: #F6F1EC;
  --sex-text: #E2D8CE;
  --sex-text-2: #B3A99E;
  --sex-muted: #8C8175;
  --sex-border: #2E2822;
  --sex-border-2: #3A332B;

  --sex-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --sex-shadow-soft: 0 6px 20px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .4);
  --sex-shadow-accent: 0 5px 14px rgba(242, 84, 59, .30);
  --sex-ring: 0 0 0 3px var(--sex-accent-soft);
}

/* =========================================================================
   1) Sektionskarte (.del-ov-section)
   ========================================================================= */

.del-wrap .del-tab-content .del-ov-section {
  background: var(--sex-surface);
  border: 1px solid var(--sex-border);
  border-radius: var(--sex-r-lg);
  box-shadow: var(--sex-shadow-soft);
  padding: 18px 20px;
  margin-bottom: 16px;
  font-family: var(--sex-font-body);
  transition: border-color var(--sex-tr), box-shadow var(--sex-tr);
}
.del-wrap .del-tab-content .del-ov-section:hover {
  border-color: var(--sex-border-2);
}

/* Karten-Titel: dezenter unterstrichener Kopf statt harter 2px-Linie */
.del-wrap .del-tab-content .del-ov-section h4 {
  margin: 0 0 16px;
  padding: 0 0 12px;
  font-family: var(--sex-font-head);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sex-ink);
  border-bottom: 1px solid var(--sex-border);
  display: flex;
  align-items: center;
  gap: 9px;
}
.del-wrap .del-tab-content .del-ov-section h4 .del-ov-icon {
  font-size: 1rem;
  width: 26px;
  height: 26px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sex-r-sm);
  background: var(--sex-accent-soft);
  color: var(--sex-accent);
  line-height: 1;
}

/* =========================================================================
   2) Feldraster + Felder (.del-ov-grid / .del-ov-field)
   ========================================================================= */

.del-wrap .del-tab-content .del-ov-grid {
  gap: 12px 16px;
}

.del-wrap .del-tab-content .del-ov-field label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sex-muted);
}

.del-wrap .del-tab-content .del-ov-field input,
.del-wrap .del-tab-content .del-ov-field textarea,
.del-wrap .del-tab-content .del-ov-field select {
  border: 1px solid var(--sex-border-2);
  border-radius: var(--sex-r-sm);
  padding: 9px 11px;
  font-size: .875rem;
  font-family: var(--sex-font-body);
  color: var(--sex-text);
  background: var(--sex-field);
  transition: border-color var(--sex-tr), box-shadow var(--sex-tr), background var(--sex-tr);
}
.del-wrap .del-tab-content .del-ov-field input::placeholder,
.del-wrap .del-tab-content .del-ov-field textarea::placeholder {
  color: var(--sex-muted);
  opacity: .8;
}
.del-wrap .del-tab-content .del-ov-field input:focus,
.del-wrap .del-tab-content .del-ov-field textarea:focus,
.del-wrap .del-tab-content .del-ov-field select:focus {
  border-color: var(--sex-accent);
  box-shadow: var(--sex-ring);
  background: var(--sex-surface);
  outline: none;
}
.del-wrap .del-tab-content .del-ov-field input:disabled,
.del-wrap .del-tab-content .del-ov-field textarea:disabled,
.del-wrap .del-tab-content .del-ov-field select:disabled {
  background: var(--sex-surf-3);
  color: var(--sex-muted);
  border-color: var(--sex-border);
  cursor: not-allowed;
}

/* Inline-Select im Dokument-Block (Bearbeiter) auf gleiche Optik */
.del-wrap .del-tab-content .del-ov-info select {
  border: 1px solid var(--sex-border-2);
  border-radius: var(--sex-r-sm);
  background: var(--sex-field);
  color: var(--sex-text);
  font-family: var(--sex-font-body);
  transition: border-color var(--sex-tr), box-shadow var(--sex-tr);
}
.del-wrap .del-tab-content .del-ov-info select:focus {
  border-color: var(--sex-accent);
  box-shadow: var(--sex-ring);
  outline: none;
}

/* =========================================================================
   3) Info-Zeilen (.del-ov-info / dt / dd) - Label muted, Wert ink
   ========================================================================= */

.del-wrap .del-tab-content .del-ov-info {
  padding: 7px 0;
  border-bottom: 1px solid var(--sex-border);
  font-size: .875rem;
}
.del-wrap .del-tab-content .del-ov-info:last-child {
  border-bottom: none;
}
.del-wrap .del-tab-content .del-ov-info dt {
  color: var(--sex-muted);
  font-weight: 500;
}
.del-wrap .del-tab-content .del-ov-info dd {
  color: var(--sex-ink);
  font-weight: 600;
}
.del-wrap .del-tab-content .del-ov-info dd strong {
  font-family: var(--sex-font-mono);
  color: var(--sex-ink);
}

/* =========================================================================
   4) Status-Pille (.del-ov-status) - nur die generische, ungefaerbte Variante.
   Inline-eingefaerbte Pillen (style-Attribut) bleiben unberuehrt = semantisch.
   ========================================================================= */

.del-wrap .del-tab-content .del-ov-status {
  border-radius: var(--sex-r-pill);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .01em;
}

/* =========================================================================
   5) Aktionen + Buttons (.del-ov-actions / .del-ov-btn)
   ========================================================================= */

.del-wrap .del-tab-content .del-ov-actions {
  gap: 9px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--sex-border);
}

.del-wrap .del-tab-content .del-ov-btn {
  padding: 9px 18px;
  border-radius: var(--sex-r-pill);
  border: 1px solid transparent;
  font-size: .85rem;
  font-weight: 600;
  font-family: var(--sex-font-body);
  cursor: pointer;
  transition: background var(--sex-tr), border-color var(--sex-tr), color var(--sex-tr), transform var(--sex-tr);
}
.del-wrap .del-tab-content .del-ov-btn:active {
  transform: scale(.98);
}

.del-wrap .del-tab-content .del-ov-btn--primary {
  background: var(--sex-accent);
  border-color: var(--sex-accent);
  color: #fff;
  box-shadow: var(--sex-shadow-accent);
}
.del-wrap .del-tab-content .del-ov-btn--primary:hover {
  background: var(--sex-accent-700);
  border-color: var(--sex-accent-700);
  color: #fff;
  transform: translateY(-1px);
}

.del-wrap .del-tab-content .del-ov-btn--ghost {
  background: var(--sex-surface);
  border-color: var(--sex-border-2);
  color: var(--sex-text);
}
.del-wrap .del-tab-content .del-ov-btn--ghost:hover {
  background: var(--sex-accent-soft);
  border-color: var(--sex-accent-line);
  color: var(--sex-accent);
}

/* KI-Knopf in Hausfarbe Violett (warm abgestimmt, kein Blau-Lila-Gradient) */
.del-wrap .del-tab-content .del-ov-btn--ai {
  background: var(--sex-violet);
  border-color: var(--sex-violet);
  color: #fff;
}
.del-wrap .del-tab-content .del-ov-btn--ai:hover {
  background: var(--sex-violet-700);
  border-color: var(--sex-violet-700);
  color: #fff;
  transform: translateY(-1px);
}

/* =========================================================================
   6) Gesperrt-Hinweis (Banner oben im Tab) - warme Honig-Toene statt grellgelb.
   Trifft den inline gebauten Banner ueber das fuehrende Schloss-Icon-Pattern,
   ohne Markup zu aendern. Nur Farbe/Rahmen/Radius.
   ========================================================================= */

.del-wrap .del-tab-content > div[style*="fef3c7"] {
  background: var(--sex-surf-2) !important;
  border: 1px solid var(--sex-honey) !important;
  border-radius: var(--sex-r-md) !important;
  color: var(--sex-text) !important;
}
.del-wrap .del-tab-content > div[style*="fef3c7"] div {
  color: var(--sex-text) !important;
}
.del-wrap .del-tab-content > div[style*="fef3c7"] strong {
  color: var(--sex-ink) !important;
}

/* =========================================================================
   7) Zwei-Spalten-Kopf (Dokument-Info + Kunde) - inline grid bleibt, aber
   bei schmaler Breite einspaltig fuer saubere Lesbarkeit.
   ========================================================================= */

@media (max-width: 860px) {
  .del-wrap .del-tab-content > div[style*="grid-template-columns:1fr 1fr"],
  .del-wrap .del-tab-content > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}