/* =========================================================================
   ServiceHub - Redesign: EDITOR-GLOBAL CHROME  (rein optisch, additiv)
   --------------------------------------------------------------------------
   Block "ed-global" der Beleg-Editor-Shell (Angebot - Auftrag - Rechnung -
   Lieferschein - Gutschrift). Diese Datei verfeinert die GLOBALE Chrome, die
   im Editor-Kontext aufpoppt, aber technisch an den document.body gehaengt
   wird (also nicht DOM-verschachtelt unter der Editor-Shell):

     1) Kontextmenue / Drei-Punkte-Dropdown  ->  #sh-context-menu
        (gebaut in internal.js showContextMenu(); rein inline gestylt, hier
         warm ueberfaerbt: Surface, weicher Pop-Schatten, runde Ecken)
     2) ShFeedback-Toasts  ->  .sh-toast-container / .sh-toast / .sh-toast--*
        (ink-Hintergrund, warmer Akzent je Typ; sh-feedback.js)
     3) ShFeedback-JS-Dialoge  ->  .sh-dialog-backdrop / .sh-dialog / .sh-btn
        (warmer Scrim + Blur, Surface-Panel, 16px-Radius, Pop-Schatten;
         dies sind die JS-gebauten confirm/prompt-Dialoge - NICHT die nativen
         <dialog>-Modale, die liegen bereits in sh-redesign-modals.css)
     4) Light- und Dark-Feinschliff der obigen Flaechen.

   HARTE REGELN dieser Datei:
   - NUR Optik. Keine Logik, kein Markup, kein display:none auf Buttons,
     Tabs, Felder oder Zeilen. Nichts Funktionales wird versteckt.
   - Tokens lokal auf die jeweiligen Container gescoped (--sex-...) ->
     ladereihenfolge-unabhaengig. Globale Basis (:root, .btn, .badge,
     .data-table) wird NICHT neu definiert.
   - Werte exakt wie sh-detail-drawer.css / theme.css (warme Palette).
   - Diese Container sind app-global (am body); wir scopen ueber ihre eigenen
     IDs bzw. Klassen, analog zu sh-redesign-modals.css (das ebenfalls per
     dialog.modal statt per Verschachtelung greift).
   ========================================================================= */

@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) - lokal auf die ed-global Container gescoped
   --------------------------------------------------------------------------- */
#sh-context-menu,
.sh-toast-container,
.sh-dialog-backdrop {
  --sex-accent: #E73D25;
  --sex-accent-700: #C5331E;
  --sex-accent-600: #D6371F;
  --sex-accent-soft: #FCEDE7;
  --sex-accent-line: rgba(231, 61, 37, .22);
  --sex-honey: #D99A2B;
  --sex-honey-soft: #FBF0DA;
  --sex-ok: #16A34A;
  --sex-ok-soft: #E9F8EF;
  --sex-warn: #C7791A;
  --sex-warn-soft: #FBF1E0;
  --sex-info: #2F6BD6;
  --sex-info-soft: #EAF1FC;

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

  --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-sh-sm: 0 1px 2px rgba(120, 80, 50, .06);
  --sex-sh-md: 0 6px 20px rgba(120, 80, 50, .07), 0 1px 2px rgba(120, 80, 50, .05);
  --sex-pop: 0 24px 60px rgba(60, 40, 25, .20), 0 6px 18px rgba(120, 80, 50, .10);
  --sex-menu-sh: 0 14px 36px rgba(60, 40, 25, .16), 0 3px 10px rgba(120, 80, 50, .10);
  --sex-accent-sh: 0 5px 14px rgba(231, 61, 37, .28);
  --sex-ring: 0 0 0 3px var(--sex-accent-soft);
  --sex-tr: .16s cubic-bezier(.2, .7, .3, 1);
  --sex-scrim: rgba(35, 25, 18, .40);

  /* dunkle Toast-Schale (ink-bg) */
  --sex-toast-bg: #2A211B;
  --sex-toast-border: rgba(255, 255, 255, .08);
  --sex-toast-ink: #F6F1EC;
  --sex-toast-sub: #C9BEB2;
}

/* ---------------------------------------------------------------------------
   Tokens (Dark)
   --------------------------------------------------------------------------- */
[data-theme="dark"] #sh-context-menu,
[data-theme="dark"] .sh-toast-container,
[data-theme="dark"] .sh-dialog-backdrop {
  --sex-accent: #F2543B;
  --sex-accent-700: #E0432B;
  --sex-accent-600: #EC4A30;
  --sex-accent-soft: rgba(242, 84, 59, .16);
  --sex-accent-line: rgba(242, 84, 59, .30);
  --sex-honey: #E6AE4A;
  --sex-honey-soft: rgba(230, 174, 74, .16);
  --sex-ok: #3BC07A;
  --sex-ok-soft: rgba(59, 192, 122, .15);
  --sex-warn: #E5A33C;
  --sex-warn-soft: rgba(229, 163, 60, .15);
  --sex-info: #5C8FE8;
  --sex-info-soft: rgba(92, 143, 232, .16);

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

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

  --sex-sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --sex-sh-md: 0 6px 20px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .4);
  --sex-pop: 0 24px 60px rgba(0, 0, 0, .55), 0 6px 18px rgba(0, 0, 0, .4);
  --sex-menu-sh: 0 16px 40px rgba(0, 0, 0, .55), 0 4px 12px rgba(0, 0, 0, .4);
  --sex-accent-sh: 0 5px 14px rgba(242, 84, 59, .30);
  --sex-ring: 0 0 0 3px var(--sex-accent-soft);
  --sex-scrim: rgba(0, 0, 0, .55);

  --sex-toast-bg: #14110E;
  --sex-toast-border: rgba(255, 255, 255, .07);
  --sex-toast-ink: #F6F1EC;
  --sex-toast-sub: #B3A99E;
}

/* ===========================================================================
   1) Kontextmenue / Drei-Punkte-Dropdown   (#sh-context-menu)
   ---------------------------------------------------------------------------
   internal.js setzt die Grundstruktur per inline-Style (background, border,
   radius, shadow, padding ueber --elmetic-* Fallbacks). Wir ueberfaerben hier
   warm. Position/left/top/z-index/min-width bleiben unangetastet (kommen
   inline) - wir setzen nur Optik.
   =========================================================================== */
#sh-context-menu {
  background: var(--sex-surface) !important;
  border: 1px solid var(--sex-border) !important;
  border-radius: var(--sex-r-md) !important;
  box-shadow: var(--sex-menu-sh) !important;
  padding: 6px !important;
  font-family: var(--sex-font-body);
  color: var(--sex-text);
  overflow: hidden;
}

/* sanftes Auftauchen - rein dekorativ */
@keyframes sex-menu-pop {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  #sh-context-menu { animation: sex-menu-pop .14s cubic-bezier(.2, .7, .3, 1) both; }
}

/* Menue-Zeilen: internal.js baert div-Zeilen (inline padding 7px 16px).
   Wir runden, geben warmen Text + setzen den Hover (JS setzt Hover-bg inline
   per mouseenter; wir definieren die Ruhefarben). Direkte Kinder-Divs sind die
   Zeilen bzw. Separatoren. */
#sh-context-menu > div {
  border-radius: var(--sex-r-sm);
  color: var(--sex-text) !important;
  font-family: var(--sex-font-body);
  font-size: 13px;
  transition: background var(--sex-tr), color var(--sex-tr);
}
/* das Icon-Span links */
#sh-context-menu > div > span:first-child {
  color: var(--sex-muted);
}
/* Hover/Focus (ergaenzt den inline gesetzten Hover-bg um warme Optik) */
#sh-context-menu > div:hover {
  background: var(--sex-accent-soft) !important;
  color: var(--sex-accent) !important;
}
#sh-context-menu > div:hover > span:first-child {
  color: var(--sex-accent);
}

/* Separator-Zeile (internal.js: 1px hohes div). Wir faerben die Trennlinie
   warm; erkennbar an der inline height:1px. */
#sh-context-menu > div[style*="height:1px"],
#sh-context-menu > div[style*="height: 1px"] {
  background: var(--sex-border) !important;
  border-radius: 0;
}
#sh-context-menu > div[style*="height:1px"]:hover,
#sh-context-menu > div[style*="height: 1px"]:hover {
  background: var(--sex-border) !important;
}

/* ===========================================================================
   2) ShFeedback-Toasts   (.sh-toast-container / .sh-toast / .sh-toast--*)
   ---------------------------------------------------------------------------
   Dunkle ink-Schale mit warmem Akzentstreifen je Typ. Basisgeometrie
   (Position des Containers, Stapelung) kommt aus sh-components-extra.css -
   wir ueberlagern nur Farbe, Rahmen, Radius und Schatten.
   =========================================================================== */
.sh-toast-container > .sh-toast,
.sh-toast {
  background: var(--sex-toast-bg);
  color: var(--sex-toast-ink);
  border: 1px solid var(--sex-toast-border);
  border-left: 3px solid var(--sex-accent);
  border-radius: var(--sex-r-md);
  box-shadow: var(--sex-pop);
  font-family: var(--sex-font-body);
}
.sh-toast .sh-toast__title {
  font-family: var(--sex-font-head);
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--sex-toast-ink);
}
.sh-toast .sh-toast__msg {
  color: var(--sex-toast-sub);
}
.sh-toast .sh-toast__close {
  color: var(--sex-toast-sub);
  transition: color var(--sex-tr), background var(--sex-tr);
  border-radius: var(--sex-r-sm);
}
.sh-toast .sh-toast__close:hover {
  color: var(--sex-toast-ink);
  background: rgba(255, 255, 255, .08);
}

/* Akzentstreifen + Titelfarbe je Typ (warm) */
.sh-toast--success { border-left-color: var(--sex-ok); }
.sh-toast--success .sh-toast__title { color: var(--sex-ok); }
.sh-toast--error { border-left-color: var(--sex-accent); }
.sh-toast--error .sh-toast__title { color: var(--sex-accent); }
.sh-toast--warning { border-left-color: var(--sex-warn); }
.sh-toast--warning .sh-toast__title { color: var(--sex-honey); }
.sh-toast--info { border-left-color: var(--sex-info); }
.sh-toast--info .sh-toast__title { color: var(--sex-info); }

/* ===========================================================================
   3) ShFeedback-JS-Dialoge   (.sh-dialog-backdrop / .sh-dialog)
   ---------------------------------------------------------------------------
   Das sind die per sh-feedback.js gebauten confirm/prompt/dialog-Overlays
   (NICHT die nativen <dialog>-Modale -> die liegen in sh-redesign-modals.css).
   Echte Markup-Klassen laut sh-feedback.js:
     .sh-dialog-backdrop > .sh-dialog[.sh-dialog--danger]
       > .sh-dialog__header h2
       > .sh-dialog__body
       > .sh-dialog__footer > .sh-btn[.sh-btn--primary|--danger|--ghost]
   (die Basis-CSS-Datei nennt zusaetzlich __head/__foot - beide werden hier
    abgedeckt.)
   =========================================================================== */
.sh-dialog-backdrop {
  background: var(--sex-scrim);
  -webkit-backdrop-filter: blur(3px) saturate(.9);
  backdrop-filter: blur(3px) saturate(.9);
}

.sh-dialog {
  background: var(--sex-surface);
  color: var(--sex-text);
  border: 1px solid var(--sex-border);
  border-radius: var(--sex-r-lg);
  box-shadow: var(--sex-pop);
  font-family: var(--sex-font-body);
  overflow: hidden;
}

/* sanftes Auftauchen */
@keyframes sex-dlg-pop {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .sh-dialog-backdrop .sh-dialog { animation: sex-dlg-pop .18s cubic-bezier(.2, .7, .3, 1) both; }
}

/* Kopfzeile (echtes Markup: .sh-dialog__header; Basis-CSS: .sh-dialog__head) */
.sh-dialog .sh-dialog__header,
.sh-dialog .sh-dialog__head {
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--sex-border);
  background: var(--sex-surf-2);
}
.sh-dialog .sh-dialog__header h2,
.sh-dialog .sh-dialog__title {
  font-family: var(--sex-font-head);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sex-ink);
  margin: 0;
  line-height: 1.25;
}

/* Body */
.sh-dialog .sh-dialog__body {
  padding: 20px 24px;
  color: var(--sex-text);
}
.sh-dialog .sh-dialog__body p { color: var(--sex-text); }

/* Felder in der formPrompt-Variante (.input/.select/textarea) warm angleichen */
.sh-dialog .sh-dialog__body .input,
.sh-dialog .sh-dialog__body .select,
.sh-dialog .sh-dialog__body input,
.sh-dialog .sh-dialog__body select,
.sh-dialog .sh-dialog__body textarea {
  background: var(--sex-surface);
  border: 1px solid var(--sex-border-2);
  border-radius: var(--sex-r-sm);
  color: var(--sex-ink);
  transition: border-color var(--sex-tr), box-shadow var(--sex-tr);
}
.sh-dialog .sh-dialog__body .input::placeholder,
.sh-dialog .sh-dialog__body textarea::placeholder,
.sh-dialog .sh-dialog__body input::placeholder {
  color: var(--sex-muted);
}
.sh-dialog .sh-dialog__body .input:focus,
.sh-dialog .sh-dialog__body .select:focus,
.sh-dialog .sh-dialog__body input:focus,
.sh-dialog .sh-dialog__body select:focus,
.sh-dialog .sh-dialog__body textarea:focus {
  outline: none;
  border-color: var(--sex-accent);
  box-shadow: var(--sex-ring);
}

/* Fusszeile (echtes Markup: .sh-dialog__footer; Basis-CSS: .sh-dialog__foot) */
.sh-dialog .sh-dialog__footer,
.sh-dialog .sh-dialog__foot {
  padding: 14px 24px;
  border-top: 1px solid var(--sex-border);
  background: var(--sex-surf-2);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Buttons im JS-Dialog (.sh-btn-Familie) warm ueberfaerben */
.sh-dialog .sh-btn {
  border-radius: var(--sex-r-pill);
  font-family: var(--sex-font-body);
  font-weight: 600;
  transition: var(--sex-tr);
}
.sh-dialog .sh-btn--primary {
  background: var(--sex-accent);
  border: 1px solid var(--sex-accent);
  color: #fff;
  box-shadow: var(--sex-accent-sh);
}
.sh-dialog .sh-btn--primary:hover {
  background: var(--sex-accent-700);
  border-color: var(--sex-accent-700);
  transform: translateY(-1px);
}
.sh-dialog .sh-btn--ghost {
  background: var(--sex-surface);
  border: 1px solid var(--sex-border-2);
  color: var(--sex-text);
}
.sh-dialog .sh-btn--ghost:hover {
  border-color: var(--sex-accent);
  color: var(--sex-accent);
  background: var(--sex-accent-soft);
}
.sh-dialog .sh-btn--danger {
  background: var(--sex-accent-700);
  border: 1px solid var(--sex-accent-700);
  color: #fff;
}
.sh-dialog .sh-btn--danger:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* Danger-Variante: Kopf-Akzent rot */
.sh-dialog.sh-dialog--danger .sh-dialog__header,
.sh-dialog.sh-dialog--danger .sh-dialog__head {
  border-bottom-color: var(--sex-accent-line);
}
.sh-dialog.sh-dialog--danger .sh-dialog__header h2,
.sh-dialog.sh-dialog--danger .sh-dialog__title {
  color: var(--sex-accent);
}

/* ===========================================================================
   4) Scrollbar-Feinschliff (warm) fuer Menue + JS-Dialog-Body
   =========================================================================== */
#sh-context-menu::-webkit-scrollbar,
.sh-dialog .sh-dialog__body::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
#sh-context-menu::-webkit-scrollbar-thumb,
.sh-dialog .sh-dialog__body::-webkit-scrollbar-thumb {
  background: var(--sex-border-2);
  border-radius: var(--sex-r-pill);
}