/* =========================================================================
   ServiceHub — Redesign: Beleg-Editor-Shell (Angebot · Auftrag · Rechnung · Gutschrift)
   ──────────────────────────────────────────────────────────────────────────
   REIN OPTISCH. Additive Schicht. Re-Skin der gemeinsamen Editor-Shell auf die
   warme Palette des neuen Design-Systems (ServiceHub.html / theme.css).

   Styled die ECHTEN Editor-Shell-Selektoren:
     .ue-toolbar / .ue-toolbar__*   (editor-toolbar-shared.css — Kopf-Aktionsleiste)
     .ue-menu-* / .ue-menu-dropdown (Drei-Punkte-Menü)
     .sh-cp / .sh-cp-*              (sh-controlpanel.css — Odoo-Control-Panel)
     .del-* (doc-editor-layout.css — 3-Spalten-Shell: KPI-Leiste, Sidebar,
             Belegkopf, Tabs, Tab-Inhalt, Buttons, Cards, Tabellen)
     .pte-toolbar / .pte-wrap       (position-table-engine.css — nur Chrome,
                                     funktionale Zustands-Farben bleiben unberührt)

   KEINE Funktions-/Markup-/Logik-Änderung: Tabs, Buttons, Felder, Zeilen,
   Drag&Drop, Routing bleiben unberührt. Es wird NICHTS Funktionales versteckt.
   EINZIGE Ausnahme (laut Auftrag): die EINGEBETTETE Vorschau-Spalte
   (.del-preview / #del-preview) entfällt OPTISCH, der zentrale Editor nimmt die
   volle Breite ein. Die PDF-Aktion (Belegkopf-Button / Modal) bleibt erhalten.

   Tokens sind auf die Editor-Container gescoped (kein Eingriff in globale
   Basis-Tokens/.btn/.badge/.input/.data-table). Light + Dark via [data-theme].
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Figtree:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ---------- Tokens (Light) — auf die Editor-Shell-Roots gescoped ---------- */
.del-wrap,
.ue-toolbar,
.ue-menu-dropdown,
.pte-wrap {
  --she-accent: #E73D25;
  --she-accent-700: #C5331E;
  --she-accent-600: #D6371F;
  --she-accent-soft: #FCEDE7;
  --she-accent-line: rgba(231, 61, 37, .22);
  --she-honey: #D99A2B;
  --she-honey-soft: #FBF0DA;
  --she-ok: #16A34A;
  --she-ok-soft: #E9F8EF;
  --she-warn: #C7791A;
  --she-warn-soft: #FBF1E0;
  --she-info: #2F6BD6;
  --she-info-soft: #EAF1FC;
  --she-violet: #7C5BD6;
  --she-violet-soft: #F0ECFB;

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

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

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

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

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

/* ---------- Tokens (Dark) ---------- */
[data-theme="dark"] .del-wrap,
[data-theme="dark"] .ue-toolbar,
[data-theme="dark"] .ue-menu-dropdown,
[data-theme="dark"] .pte-wrap {
  --she-accent: #F2543B;
  --she-accent-700: #E0432B;
  --she-accent-600: #EC4A30;
  --she-accent-soft: rgba(242, 84, 59, .16);
  --she-accent-line: rgba(242, 84, 59, .30);
  --she-honey: #E6AE4A;
  --she-honey-soft: rgba(230, 174, 74, .16);
  --she-ok: #3BC07A;
  --she-ok-soft: rgba(59, 192, 122, .15);
  --she-warn: #E5A33C;
  --she-warn-soft: rgba(229, 163, 60, .15);
  --she-info: #5C8FE8;
  --she-info-soft: rgba(92, 143, 232, .16);
  --she-violet: #9D82E6;
  --she-violet-soft: rgba(157, 130, 230, .16);

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

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

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

/* =========================================================================
   1) DocEditorLayout — 3-Spalten-Shell
   ========================================================================= */

.del-wrap {
  background: var(--she-bg);
  color: var(--she-text);
  font-family: var(--she-font-body);
}

/* ── KPI-Leiste (oben) ──────────────────────────────────────────────────── */
.del-wrap .del-kpi-bar {
  background: var(--she-surface);
  border-bottom: 1px solid var(--she-border);
  box-shadow: var(--she-shadow-sm);
}
.del-wrap .del-kpi {
  border-left: 3px solid var(--kpi-color, var(--she-border-2));
}
.del-wrap .del-kpi--highlight {
  background: linear-gradient(135deg, var(--she-ok-soft) 0%, transparent 100%);
  border-radius: var(--she-r-sm);
}
.del-wrap .del-kpi-label {
  color: var(--she-muted);
  font-weight: 600;
  letter-spacing: .05em;
}
.del-wrap .del-kpi-value {
  color: var(--she-ink);
  font-family: var(--she-font-head);
  font-weight: 600;
}

/* ── Linke Sidebar: Belegliste ─────────────────────────────────────────── */
.del-wrap .del-sidebar {
  background: var(--she-surface);
  border-right: 1px solid var(--she-border);
}
.del-wrap .del-sidebar-header {
  border-bottom: 1px solid var(--she-border);
}
.del-wrap .del-sidebar-header h3 {
  font-family: var(--she-font-head);
  color: var(--she-ink);
}
.del-wrap .del-sidebar-search {
  border-bottom: 1px solid var(--she-border);
}

/* Beleg-Item in der Liste */
.del-wrap .del-doc-item:hover {
  background: var(--she-surf-2);
}
.del-wrap .del-doc-item--active {
  background: var(--she-accent-soft);
  border-left: 3px solid var(--she-accent);
}
.del-wrap .del-doc-item-number {
  color: var(--she-ink);
}
.del-wrap .del-doc-item-sub {
  color: var(--she-muted);
}

/* ── Zentraler Arbeitsbereich ──────────────────────────────────────────── */
.del-wrap .del-content {
  background: var(--she-bg);
}

/* ── Belegkopf ─────────────────────────────────────────────────────────── */
.del-wrap .del-doc-header {
  background: var(--she-surface);
  border-bottom: 1px solid var(--she-border);
}
.del-wrap .del-doc-number {
  font-family: var(--she-font-head);
  color: var(--she-ink);
  letter-spacing: -.01em;
}
.del-wrap .del-doc-meta,
.del-wrap .del-empty-header {
  color: var(--she-muted);
}

/* ── Tabs ──────────────────────────────────────────────────────────────── */
.del-wrap .del-tabs {
  background: var(--she-surface);
  border-bottom: 1px solid var(--she-border);
}
.del-wrap .del-tab {
  color: var(--she-text-2);
  font-weight: 600;
  border-radius: var(--she-r-sm) var(--she-r-sm) 0 0;
  transition: color var(--she-tr), background var(--she-tr), border-color var(--she-tr);
}
.del-wrap .del-tab:hover {
  color: var(--she-ink);
  background: var(--she-surf-2);
}
.del-wrap .del-tab--active {
  color: var(--she-accent);
  border-bottom-color: var(--she-accent);
}
/* KI-Tab in Akzent-Violett (Hausfarbe für KI) */
.del-wrap .del-tab--ai {
  color: var(--she-violet) !important;
}
.del-wrap .del-tab--ai:hover {
  background: var(--she-violet-soft) !important;
}
.del-wrap .del-tab--ai.del-tab--active {
  border-bottom-color: var(--she-violet);
  background: var(--she-violet-soft);
}

/* ── KI-Dropdown ───────────────────────────────────────────────────────── */
.del-wrap .del-ai-menu {
  background: var(--she-surface);
  border: 1px solid var(--she-border-2);
  border-radius: var(--she-r-md);
  box-shadow: var(--she-shadow-lg);
}
.del-wrap .del-ai-menu-section {
  color: var(--she-violet);
}
.del-wrap .del-ai-menu-item {
  color: var(--she-text);
  font-family: var(--she-font-body);
}
.del-wrap .del-ai-menu-item:hover {
  background: var(--she-violet-soft);
  color: var(--she-violet);
}
.del-wrap .del-ai-menu-divider {
  background: var(--she-border);
}

/* ── Dokumente-Tab (DMS) ────────────────────────────────────────────────── */
.del-wrap .del-doc-uploadbox {
  border: 2px dashed var(--she-border-2);
  border-radius: var(--she-r-md);
  background: var(--she-surface);
  transition: border-color var(--she-tr), background var(--she-tr);
}
.del-wrap .del-doc-uploadbox:hover,
.del-wrap .del-doc-uploadbox:focus,
.del-wrap .del-doc-uploadbox.is-dragover {
  border-color: var(--she-accent);
  background: var(--she-accent-soft);
}
.del-wrap .del-doc-uploadbox__title {
  color: var(--she-ink);
}
.del-wrap .del-doc-uploadbox__hint {
  color: var(--she-muted);
}
.del-wrap .del-doc-uploadbox__progress {
  background: var(--she-info-soft);
  color: var(--she-info);
  border-radius: var(--she-r-sm);
}
.del-wrap .del-doc-list__loading,
.del-wrap .del-doc-list__empty {
  color: var(--she-muted);
}
/* Doc-Item (DMS-Variante mit Rahmen) */
.del-wrap .del-documents .del-doc-item {
  background: var(--she-surface);
  border: 1px solid var(--she-border);
  border-radius: var(--she-r-sm);
}
.del-wrap .del-documents .del-doc-item__name {
  color: var(--she-ink);
}
.del-wrap .del-documents .del-doc-item__meta {
  color: var(--she-muted);
}
.del-wrap .del-doc-btn {
  color: var(--she-text);
  background: var(--she-surf-2);
  border: 1px solid var(--she-border-2);
  border-radius: var(--she-r-xs);
  transition: background var(--she-tr), border-color var(--she-tr);
}
.del-wrap .del-doc-btn:hover {
  background: var(--she-accent-soft);
  border-color: var(--she-accent-line);
}

/* ── Empty / Placeholder / Info ────────────────────────────────────────── */
.del-wrap .del-empty-state,
.del-wrap .del-tab-placeholder {
  color: var(--she-muted);
}
.del-wrap .del-muted,
.del-wrap .del-text-muted {
  color: var(--she-muted);
}

/* =========================================================================
   2) Belegkopf-Buttons & Inputs & Cards (.del-*)
   ========================================================================= */

.del-wrap .del-btn {
  border: 1px solid var(--she-border-2);
  border-radius: var(--she-r-sm);
  background: var(--she-surface);
  color: var(--she-text);
  font-family: var(--she-font-body);
  font-weight: 600;
  transition: background var(--she-tr), border-color var(--she-tr), color var(--she-tr);
}
.del-wrap .del-btn:hover {
  background: var(--she-surf-2);
  border-color: var(--she-accent);
  color: var(--she-accent);
}
.del-wrap .del-btn--primary,
.del-wrap .del-btn-primary,
.del-wrap .del-btn--active {
  background: var(--she-accent);
  border-color: var(--she-accent);
  color: #fff;
  box-shadow: var(--she-shadow-accent);
}
.del-wrap .del-btn--primary:hover,
.del-wrap .del-btn-primary:hover,
.del-wrap .del-btn--active:hover {
  background: var(--she-accent-700);
  border-color: var(--she-accent-700);
  color: #fff;
}
.del-wrap .del-btn-secondary {
  background: var(--she-surface);
  border-color: var(--she-border-2);
  color: var(--she-text);
}
.del-wrap .del-btn-secondary:hover {
  background: var(--she-surf-2);
}
.del-wrap .del-btn--icon,
.del-wrap .del-btn-icon {
  border-radius: var(--she-r-xs);
}
.del-wrap .del-btn-icon:hover {
  background: var(--she-surf-2);
  color: var(--she-accent);
}

/* Inputs / Selects */
.del-wrap .del-input,
.del-wrap .del-select {
  border: 1px solid var(--she-border-2);
  border-radius: var(--she-r-sm);
  background: var(--she-surface);
  color: var(--she-text);
  font-family: var(--she-font-body);
  transition: border-color var(--she-tr), box-shadow var(--she-tr);
}
.del-wrap .del-input:focus,
.del-wrap .del-select:focus {
  border-color: var(--she-accent);
  box-shadow: var(--she-ring);
  outline: none;
}

/* Cards */
.del-wrap .del-card,
.del-wrap .del-tasks-card,
.del-wrap .del-assign-form,
.del-wrap .del-assigned-techs,
.del-wrap .del-billing-actions,
.del-wrap .del-hours-card,
.del-wrap .del-material-card,
.del-wrap .del-invoices-card {
  background: var(--she-surface);
  border: 1px solid var(--she-border);
  border-radius: var(--she-r-md);
  box-shadow: var(--she-shadow-sm);
}
.del-wrap .del-card h4,
.del-wrap .del-tasks-card h4,
.del-wrap .del-assign-form h4,
.del-wrap .del-assigned-techs h4,
.del-wrap .del-billing-actions h4,
.del-wrap .del-hours-card h4,
.del-wrap .del-material-card h4,
.del-wrap .del-invoices-card h4 {
  font-family: var(--she-font-head);
  color: var(--she-ink);
}
.del-wrap .del-dl dt,
.del-wrap .del-dl-compact dt {
  color: var(--she-muted);
}
.del-wrap .del-dl dd {
  color: var(--she-text);
}

/* Definition-/History-/Link-Listen */
.del-wrap .del-link-list li,
.del-wrap .del-history-item,
.del-wrap .del-tech-item {
  border-bottom: 1px solid var(--she-border);
}
.del-wrap .del-link-list a,
.del-wrap .del-link {
  color: var(--she-accent);
}
.del-wrap .del-history-date,
.del-wrap .del-history-actor,
.del-wrap .del-tech-role {
  color: var(--she-muted);
}

/* Tabellen (Aufgaben / Time&Material) */
.del-wrap .del-tasks-table th,
.del-wrap .del-table-sm th {
  background: var(--she-surf-2);
  color: var(--she-muted);
  letter-spacing: .04em;
}
.del-wrap .del-tasks-table th,
.del-wrap .del-tasks-table td,
.del-wrap .del-table-sm th,
.del-wrap .del-table-sm td {
  border-bottom: 1px solid var(--she-border);
}
.del-wrap .del-tasks-table tbody tr:hover {
  background: var(--she-surf-2);
}
.del-wrap .del-row-billed {
  background: var(--she-surf-2);
  color: var(--she-muted);
}

/* Billing-Karten (Akzent-Töne) */
.del-wrap .del-billing-card {
  background: var(--she-surface);
  border: 1px solid var(--she-border);
  border-radius: var(--she-r-md);
}
.del-wrap .del-billing-amount {
  font-family: var(--she-font-head);
  color: var(--she-ink);
}
.del-wrap .del-billing-card--primary {
  border-color: var(--she-accent-line);
  background: linear-gradient(to bottom, var(--she-accent-soft), var(--she-surface));
}
.del-wrap .del-billing-card--primary .del-billing-amount { color: var(--she-accent); }
.del-wrap .del-billing-card--success {
  border-color: var(--she-ok);
  background: linear-gradient(to bottom, var(--she-ok-soft), var(--she-surface));
}
.del-wrap .del-billing-card--success .del-billing-amount { color: var(--she-ok); }
.del-wrap .del-billing-card--warning {
  border-color: var(--she-warn);
  background: linear-gradient(to bottom, var(--she-warn-soft), var(--she-surface));
}
.del-wrap .del-billing-card--warning .del-billing-amount { color: var(--she-warn); }

/* Spinner-Akzent */
.del-wrap .del-spinner {
  border-color: var(--she-border-2);
  border-top-color: var(--she-accent);
}

/* Status-/Info-Töne (Text only — keine funktionalen Badges überschreiben) */
.del-wrap .del-text-success { color: var(--she-ok); }
.del-wrap .del-text-warning { color: var(--she-warn); }
.del-wrap .del-info {
  color: var(--she-info);
}

/* =========================================================================
   3) Eingebettete PDF-Vorschau BLEIBT erhalten (User-Vorgabe geaendert:
   "PDF-Vorschau gehoert in den Editor, zusaetzlich zu Download/Drucken,
   Verhalten wie im Original"). Frueher hier ausgeblendet -> bewusst rueckgaengig.
   Die Vorschau-Optik wird vom Dokumente/Vorschau-Block uebernommen.
   ========================================================================= */

/* =========================================================================
   4) Unified-Editor-Toolbar (.ue-toolbar) — warme Kopf-Aktionsleiste
   ========================================================================= */

.ue-toolbar {
  background: var(--she-surface);
  border-bottom: 1px solid var(--she-border);
  font-family: var(--she-font-body);
}
.ue-toolbar__docnumber {
  font-family: var(--she-font-head);
  color: var(--she-ink);
}
.ue-toolbar__customer {
  color: var(--she-muted);
}

/* Pill-Buttons in der Toolbar */
.ue-toolbar .ue-toolbar__btn {
  border: 1px solid var(--she-border-2);
  border-radius: var(--she-r-pill);
  background: var(--she-surface);
  color: var(--she-text);
  font-family: var(--she-font-body);
  font-weight: 600;
  transition: background var(--she-tr), border-color var(--she-tr), color var(--she-tr);
}
.ue-toolbar .ue-toolbar__btn:hover {
  background: var(--she-accent-soft);
  border-color: var(--she-accent-line);
  color: var(--she-accent);
}
.ue-toolbar .ue-toolbar__btn:active {
  background: var(--she-surf-3);
  transform: scale(0.97);
}

/* Drei-Punkte-Toggle */
.ue-toolbar .ue-menu-toggle,
.ue-menu-wrap .ue-menu-toggle {
  border: 1px solid var(--she-border-2);
  border-radius: var(--she-r-sm);
  background: var(--she-surface);
  color: var(--she-text-2);
  transition: background var(--she-tr), border-color var(--she-tr), color var(--she-tr);
}
.ue-toolbar .ue-menu-toggle:hover,
.ue-menu-wrap .ue-menu-toggle:hover {
  background: var(--she-surf-2);
  border-color: var(--she-accent);
  color: var(--she-accent);
}
.ue-toolbar .ue-menu-toggle.ue-menu-toggle--open,
.ue-menu-wrap .ue-menu-toggle.ue-menu-toggle--open {
  background: var(--she-accent-soft);
  border-color: var(--she-accent-line);
  color: var(--she-accent);
}

/* ── Drei-Punkte-Dropdown ──────────────────────────────────────────────── */
.ue-menu-dropdown {
  background: var(--she-surface);
  border: 1px solid var(--she-border-2);
  border-radius: var(--she-r-md);
  box-shadow: var(--she-shadow-lg);
  font-family: var(--she-font-body);
  color: var(--she-text);
}
.ue-menu-dropdown::-webkit-scrollbar-thumb {
  background: var(--she-border-2);
}
.ue-menu-dropdown .panel {
  border: 1px solid var(--she-border);
  border-radius: var(--she-r-sm);
  background: var(--she-surface);
}
.ue-menu-dropdown .panel h2,
.ue-menu-dropdown .panel h3 {
  color: var(--she-text-2);
  font-family: var(--she-font-head);
}
.ue-menu-dropdown .actions-column .btn:hover {
  background: var(--she-surf-2);
}
.ue-menu-dropdown .panel[class*="danger"] {
  border-color: var(--she-accent-line);
  background: var(--she-accent-soft);
}
.ue-menu-dropdown .panel[class*="danger"] h2 {
  color: var(--she-accent-700);
}
.ue-menu-dropdown .panel[class*="ai-panel"] {
  border-color: var(--she-violet-soft);
  background: var(--she-violet-soft);
}
.ue-menu-separator {
  background: var(--she-border);
}

/* =========================================================================
   5) Control-Panel-Enhancement (.ue-toolbar.sh-cp / .sh-cp-*)
   ========================================================================= */

.ue-toolbar.sh-cp {
  background: var(--she-surface);
  border-bottom: 1px solid var(--she-border);
  box-shadow: var(--she-shadow-sm);
}
.ue-toolbar.sh-cp .ue-toolbar__actions {
  border-left: 1px solid var(--she-border);
}
.ue-toolbar.sh-cp .ue-toolbar__docnumber {
  color: var(--she-ink);
  font-family: var(--she-font-head);
}

/* =========================================================================
   6) Positions-Tabelle — NUR Chrome (Wrap + Toolbar + Kopf + Grundzeilen).
   Funktionale Zustands-Farben (ausgewählt / Warnung / Gruppe / optional /
   Drag-Over / Untereinträge) bleiben BEWUSST unverändert, damit die visuellen
   Bedeutungs-Signale erhalten bleiben.
   ========================================================================= */

.del-wrap .pte-wrap,
.pte-wrap {
  border: 1px solid var(--she-border-2);
  border-radius: var(--she-r-md);
  background: var(--she-surface);
  font-family: var(--she-font-body);
}
.del-wrap .pte-toolbar,
.pte-wrap .pte-toolbar {
  background: var(--she-surf-2);
  border-bottom: 1px solid var(--she-border);
}
.del-wrap .pte-table > thead .pte-header-row,
.pte-wrap .pte-table > thead .pte-header-row {
  background: var(--she-surf-2);
}
.del-wrap .pte-table > thead .pte-th,
.pte-wrap .pte-table > thead .pte-th {
  color: var(--she-text-2);
  border-bottom: 1px solid var(--she-border-2);
}
/* Grundzeile + Standard-Hover (funktionale Highlight-Zustände unangetastet) */
.del-wrap .pte-row,
.pte-wrap .pte-row {
  border-bottom: 1px solid var(--she-border);
}

/* Zahlenwerte / Beträge in Space Mono (passt zum Doc-Stil) */
.del-wrap .del-billing-detail,
.del-wrap .del-dl-compact dd {
  font-family: var(--she-font-mono);
}