/* =========================================================================
   ServiceHub — Redesign: ANGEBOTE (Quotes) — rein optisch
   ──────────────────────────────────────────────────────────────────────────
   REIN OPTISCH. Additive Schicht (lädt zuletzt → gewinnt die Kaskade).
   Re-skinnt NUR angebots-spezifische Selektoren der internen App nach dem
   Vorlagen-Paket (sh/angebot.js: KPI-Rail/rcard, Stepper, Summen, Kanban):

     Liste  (renderQuotesListView):
       [data-quotes-board] + dessen .sh-kanban__*  (Angebots-Board)
       .quote-status-group  (Quickfilter-Chips, angebots-eigene Klasse)
       #quotesFacets .sh-facet* · #quotesFavorites · #quotesSelBar (Batchbar)
       Beträge (Netto/Brutto) in der Angebots-Tabelle in Token-Farben
     Editor (quote-editor-integration.js, .qei-* + .sh-smartbtn KPI-Rail):
       .qei-status-card · .qei-versand-card · .qei-action-btn ·
       .qei-secondary-menu · .qei-actions-sidebar · .qei-mb-btn ·
       .qei-bottom-sheet* · .sh-smartbtns/.sh-smartbtn (Kennzahlen-Rail)

   KEINE Funktions-/Markup-/Logik-Änderung: nichts Funktionales wird versteckt
   (keine Buttons/Felder/Tabs/Zeilen via display:none). Nur Farbe/Schrift/
   Radius/Schatten/Abstand/Rahmen. Keine globale Basis (.btn/.badge/.data-table/
   .panel/:root) wird neu definiert. Light + Dark ([data-theme="dark"]) exakt
   nach Token-Vertrag. Tokens lokal auf die Angebots-Container gescoped, damit
   die Datei nicht von der Ladereihenfolge abhängt.
   ========================================================================= */

@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 Angebots-Roots gescoped ---------- */
[data-quotes-board],
#quotesFacets,
#quotesFavorites,
#quotesSelBar,
.quote-status-group,
.qei-editor-container,
.qei-actions-sidebar,
.qei-status-card,
.qei-versand-card,
.qei-secondary-menu,
.qei-mobile-bottom-bar,
.qei-bottom-sheet,
.sh-smartbtns {
  --shq-accent: #E73D25;
  --shq-accent-700: #C5331E;
  --shq-accent-600: #D6371F;
  --shq-accent-soft: #FCEDE7;
  --shq-accent-line: rgba(231, 61, 37, .22);
  --shq-honey: #D99A2B;
  --shq-honey-soft: #FBF0DA;
  --shq-ok: #16A34A;
  --shq-ok-soft: #E9F8EF;
  --shq-warn: #C7791A;
  --shq-warn-soft: #FBF1E0;
  --shq-info: #2F6BD6;
  --shq-info-soft: #EAF1FC;
  --shq-violet: #7C5BD6;
  --shq-violet-soft: #F0ECFB;

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

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

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

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

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

/* ---------- Tokens (Dark) ---------- */
[data-theme="dark"] [data-quotes-board],
[data-theme="dark"] #quotesFacets,
[data-theme="dark"] #quotesFavorites,
[data-theme="dark"] #quotesSelBar,
[data-theme="dark"] .quote-status-group,
[data-theme="dark"] .qei-editor-container,
[data-theme="dark"] .qei-actions-sidebar,
[data-theme="dark"] .qei-status-card,
[data-theme="dark"] .qei-versand-card,
[data-theme="dark"] .qei-secondary-menu,
[data-theme="dark"] .qei-mobile-bottom-bar,
[data-theme="dark"] .qei-bottom-sheet,
[data-theme="dark"] .sh-smartbtns {
  --shq-accent: #F2543B;
  --shq-accent-700: #E0432B;
  --shq-accent-600: #EC4A30;
  --shq-accent-soft: rgba(242, 84, 59, .16);
  --shq-accent-line: rgba(242, 84, 59, .30);
  --shq-honey: #E6AE4A;
  --shq-honey-soft: rgba(230, 174, 74, .16);
  --shq-ok: #3BC07A;
  --shq-ok-soft: rgba(59, 192, 122, .15);
  --shq-warn: #E5A33C;
  --shq-warn-soft: rgba(229, 163, 60, .15);
  --shq-info: #5C8FE8;
  --shq-info-soft: rgba(92, 143, 232, .16);
  --shq-violet: #9D82E6;
  --shq-violet-soft: rgba(157, 130, 230, .16);

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

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

  --shq-sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shq-sh-md: 0 6px 20px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .4);
  --shq-sh-lg: 0 18px 44px rgba(0, 0, 0, .5);
  --shq-ring: 0 0 0 3px var(--shq-accent-soft);
}

/* =========================================================================
   LISTE — Quickfilter-Chips (angebots-eigene Klasse .quote-status-group)
   Vorlage: theme.css .chip / .chip.on
   ========================================================================= */
.quote-status-group {
  font-family: var(--shq-font-body);
  border-radius: var(--shq-r-pill);
  border: 1px solid var(--shq-border-2);
  background: var(--shq-surface);
  color: var(--shq-text-2);
  font-weight: 600;
  transition: var(--shq-tr);
}
.quote-status-group:hover {
  background: var(--shq-surf-2);
  color: var(--shq-ink);
  border-color: var(--shq-border-2);
}
.quote-status-group.sh-chip--active,
.quote-status-group.active {
  background: var(--shq-accent-soft);
  border-color: var(--shq-accent);
  color: var(--shq-accent);
}

/* =========================================================================
   LISTE — aktive Filter-Facetten (Angebote: #quotesFacets)
   Vorlage: weiche Pillen mit Akzent-Trenner
   ========================================================================= */
#quotesFacets {
  font-family: var(--shq-font-body);
}
#quotesFacets .sh-facets__label {
  color: var(--shq-muted);
  font-weight: 600;
}
#quotesFacets .sh-facet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--shq-surf-2);
  border: 1px solid var(--shq-border-2);
  border-radius: var(--shq-r-pill);
  color: var(--shq-text);
  font-size: 12px;
  font-weight: 500;
}
#quotesFacets .sh-facet__k {
  color: var(--shq-muted);
  font-weight: 600;
}
#quotesFacets .sh-facet__x {
  color: var(--shq-muted);
  border-radius: 50%;
  transition: var(--shq-tr);
}
#quotesFacets .sh-facet__x:hover {
  background: var(--shq-accent-soft);
  color: var(--shq-accent);
}
#quotesFacets .sh-facet-clear-all {
  color: var(--shq-accent);
  font-weight: 600;
}

/* =========================================================================
   LISTE — Favoriten-Leiste (Angebote: #quotesFavorites)
   ========================================================================= */
#quotesFavorites .sh-fav__label {
  color: var(--shq-muted);
  font-weight: 600;
}
#quotesFavorites .sh-fav__item,
#quotesFavorites .sh-fav-chip {
  border-radius: var(--shq-r-pill);
  border: 1px solid var(--shq-border-2);
  background: var(--shq-surface);
  color: var(--shq-text-2);
  transition: var(--shq-tr);
}
#quotesFavorites .sh-fav__item:hover,
#quotesFavorites .sh-fav-chip:hover {
  border-color: var(--shq-accent);
  color: var(--shq-accent);
  background: var(--shq-accent-soft);
}

/* =========================================================================
   LISTE — Sammel-Auswahl-Leiste (Angebote: #quotesSelBar / .sh-batchbar)
   ========================================================================= */
#quotesSelBar.sh-batchbar {
  background: var(--shq-accent-soft);
  border: 1px solid var(--shq-accent-line);
  border-radius: var(--shq-r-md);
  color: var(--shq-text);
  box-shadow: var(--shq-sh-sm);
}
#quotesSelBar .sh-batchbar__lbl {
  color: var(--shq-text-2);
}
#quotesSelBar #quotesSelCount {
  color: var(--shq-accent);
  font-family: var(--shq-font-mono);
  font-weight: 700;
}

/* =========================================================================
   LISTE — Beträge (Netto = 9. Spalte, Brutto = 10. Spalte) in der
   Angebots-Tabelle. Anker: die Angebots-Tabelle folgt direkt auf
   #quotesFacets (siehe renderQuotesListView) → kein Eingriff in andere Listen.
   Nur Optik: Monospace + warme Textfarbe, Brutto in Akzentfarbe.
   ========================================================================= */
#quotesFacets ~ .panel .data-table tbody td:nth-child(9),
#quotesFacets ~ .panel .data-table tbody td:nth-child(10) {
  font-family: var(--shq-font-mono);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#quotesFacets ~ .panel .data-table tbody td:nth-child(10) {
  color: var(--shq-accent);
  font-weight: 600;
}
/* Gruppen-Summe (Gruppieren nach Status/Kunde) — angebots-eigene Klassen */
#quotesFacets ~ .panel .sh-group-row .sh-group-sum {
  font-family: var(--shq-font-mono);
  color: var(--shq-accent);
  font-weight: 700;
}
#quotesFacets ~ .panel .sh-group-row .sh-group-count {
  color: var(--shq-muted);
  font-family: var(--shq-font-mono);
}
#quotesFacets ~ .panel .sh-group-row .sh-group-caret {
  color: var(--shq-accent);
}

/* =========================================================================
   LISTE — KANBAN (Angebots-Board: [data-quotes-board])
   Vorlage: sh/angebot.js Karten-Spalten je Pipeline-Stufe, getönte Kopfleiste,
   Karte mit Nr./Titel/Kunde/Betrag/gültig-bis.
   Alles UNTER [data-quotes-board] → nur das Angebots-Board, keine andere Liste.
   ========================================================================= */
[data-quotes-board] {
  font-family: var(--shq-font-body);
}
[data-quotes-board] .sh-kanban {
  gap: 16px;
}
[data-quotes-board] .sh-kanban__col {
  background: var(--shq-surf-2);
  border: 1px solid var(--shq-border);
  border-radius: var(--shq-r-lg);
  box-shadow: var(--shq-sh-sm);
}
[data-quotes-board] .sh-kanban__col-head {
  border-bottom: 1px solid var(--shq-border);
}
[data-quotes-board] .sh-kanban__col-title {
  font-family: var(--shq-font-head);
  font-weight: 700;
  color: var(--shq-ink);
  letter-spacing: -.01em;
}
[data-quotes-board] .sh-kanban__col-meta {
  color: var(--shq-muted);
  font-size: 12px;
}
[data-quotes-board] .sh-kanban__col-sum {
  font-family: var(--shq-font-mono);
  color: var(--shq-text-2);
  font-weight: 700;
}
[data-quotes-board] .sh-kanban__col-empty {
  color: var(--shq-muted);
  font-size: 12.5px;
}

/* Spalten-Akzentkante je Pipeline-Tonalität (oben) */
[data-quotes-board] .sh-kanban__col {
  position: relative;
  overflow: hidden;
}
[data-quotes-board] .sh-kanban__col::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--shq-border-2);
}
[data-quotes-board] .sh-kanban__col--neutral::before { background: var(--shq-muted); }
[data-quotes-board] .sh-kanban__col--info::before    { background: var(--shq-info); }
[data-quotes-board] .sh-kanban__col--warning::before { background: var(--shq-honey); }
[data-quotes-board] .sh-kanban__col--success::before { background: var(--shq-ok); }
[data-quotes-board] .sh-kanban__col--danger::before  { background: var(--shq-accent); }

/* Karten */
[data-quotes-board] .sh-kanban__card {
  background: var(--shq-surface);
  border: 1px solid var(--shq-border);
  border-radius: var(--shq-r-md);
  box-shadow: var(--shq-sh-sm);
  color: var(--shq-text);
  transition: var(--shq-tr);
}
[data-quotes-board] .sh-kanban__card:hover {
  border-color: var(--shq-accent-line);
  box-shadow: var(--shq-sh-md);
  transform: translateY(-1px);
}
[data-quotes-board] .sh-kanban__card-no {
  font-family: var(--shq-font-mono);
  font-size: 12px;
  color: var(--shq-muted);
}
[data-quotes-board] .sh-kanban__card-title {
  font-family: var(--shq-font-head);
  font-weight: 600;
  color: var(--shq-ink);
  letter-spacing: -.01em;
}
[data-quotes-board] .sh-kanban__card-customer {
  color: var(--shq-text-2);
  font-size: 12.5px;
}
[data-quotes-board] .sh-kanban__card-foot {
  border-top: 1px solid var(--shq-border);
}
[data-quotes-board] .sh-kanban__card-amount {
  font-family: var(--shq-font-mono);
  font-weight: 700;
  color: var(--shq-accent);
}
[data-quotes-board] .sh-kanban__card-date {
  color: var(--shq-muted);
  font-size: 11.5px;
}

/* =========================================================================
   EDITOR — Kennzahlen-Rail (Smart-Buttons: .sh-smartbtns / .sh-smartbtn)
   Vorlage: sh/angebot.js rcard „Zusammenfassung" — Angebotswert in Akzent.
   ========================================================================= */
.sh-smartbtns {
  font-family: var(--shq-font-body);
}
.sh-smartbtns .sh-smartbtn {
  background: var(--shq-surface);
  border: 1px solid var(--shq-border);
  border-radius: var(--shq-r-md);
  box-shadow: var(--shq-sh-sm);
  color: var(--shq-text);
  transition: var(--shq-tr);
}
.sh-smartbtns button.sh-smartbtn:hover {
  border-color: var(--shq-accent-line);
  box-shadow: var(--shq-sh-md);
  transform: translateY(-1px);
}
.sh-smartbtns .sh-smartbtn__num {
  font-family: var(--shq-font-mono);
  font-weight: 700;
  color: var(--shq-ink);
}
.sh-smartbtns .sh-smartbtn__lbl {
  color: var(--shq-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.sh-smartbtns .sh-smartbtn--info {
  background: var(--shq-accent-soft);
  border-color: var(--shq-accent-line);
}
.sh-smartbtns .sh-smartbtn--info .sh-smartbtn__num {
  color: var(--shq-accent);
}

/* =========================================================================
   EDITOR — Aktions-Sidebar + Status-/Versand-Karten (.qei-*)
   Vorlage: sh/angebot.js rcards. Nur Optik der Karten/Buttons/Hinweise.
   ========================================================================= */
.qei-actions-sidebar {
  font-family: var(--shq-font-body);
  color: var(--shq-text);
}

.qei-status-card.panel,
.qei-versand-card.panel {
  background: var(--shq-surface);
  border: 1px solid var(--shq-border);
  border-radius: var(--shq-r-lg);
  box-shadow: var(--shq-sh-md);
}
.qei-status-card__title {
  font-family: var(--shq-font-head);
  font-weight: 700;
  color: var(--shq-ink);
  letter-spacing: -.01em;
}
.qei-status-card__hint {
  color: var(--shq-muted);
}

/* Aktions-Buttons der Sidebar — warmer Akzent / weiche Ghost-Variante.
   (Keine Geometrie-Eingriffe; nur Farben/Radius/Schatten/Übergang.) */
.qei-actions-sidebar .qei-action-btn.btn,
.qei-status-card .qei-action-btn.btn,
.qei-versand-card .qei-action-btn.btn {
  border-radius: var(--shq-r-pill);
  font-family: var(--shq-font-body);
  font-weight: 600;
  transition: var(--shq-tr);
}
.qei-actions-sidebar .qei-action-btn--primary.btn-primary,
.qei-status-card .qei-action-btn--primary.btn-primary,
.qei-versand-card .qei-action-btn--primary.btn-primary {
  background: var(--shq-accent);
  border-color: var(--shq-accent);
  color: #fff;
  box-shadow: var(--shq-sh-accent);
}
.qei-actions-sidebar .qei-action-btn--primary.btn-primary:hover,
.qei-status-card .qei-action-btn--primary.btn-primary:hover,
.qei-versand-card .qei-action-btn--primary.btn-primary:hover {
  background: var(--shq-accent-700);
  border-color: var(--shq-accent-700);
  transform: translateY(-1px);
}
.qei-actions-sidebar .qei-action-btn.btn-ghost,
.qei-status-card .qei-action-btn.btn-ghost,
.qei-versand-card .qei-action-btn.btn-ghost {
  background: var(--shq-surface);
  border: 1px solid var(--shq-border-2);
  color: var(--shq-text);
}
.qei-actions-sidebar .qei-action-btn.btn-ghost:hover,
.qei-status-card .qei-action-btn.btn-ghost:hover,
.qei-versand-card .qei-action-btn.btn-ghost:hover {
  border-color: var(--shq-accent);
  color: var(--shq-accent);
  background: var(--shq-accent-soft);
}

/* =========================================================================
   EDITOR — Sekundär-Menü (⋮ Dropdown, .qei-secondary-menu)
   ========================================================================= */
.qei-secondary-menu {
  background: var(--shq-surface);
  border: 1px solid var(--shq-border);
  border-radius: var(--shq-r-md);
  box-shadow: var(--shq-sh-lg);
}
.qei-secondary-menu__item {
  color: var(--shq-text);
  border-radius: var(--shq-r-sm);
  transition: var(--shq-tr);
}
.qei-secondary-menu__item:hover {
  background: var(--shq-surf-2);
  color: var(--shq-ink);
}
.qei-secondary-menu__item.is-danger {
  color: var(--shq-accent);
}
.qei-secondary-menu__item.is-danger:hover {
  background: var(--shq-accent-soft);
  color: var(--shq-accent-700);
}

/* =========================================================================
   EDITOR — Mobile Bottom-Bar + Bottom-Sheet (.qei-mb-btn / .qei-bottom-sheet)
   Nur Optik — Hit-Targets/Layout der Vorlage bleiben unberührt.
   ========================================================================= */
.qei-mobile-bottom-bar {
  background: var(--shq-surface);
  border-top: 1px solid var(--shq-border);
  box-shadow: var(--shq-sh-lg);
}
.qei-mb-btn {
  border-radius: var(--shq-r-pill);
  font-family: var(--shq-font-body);
  font-weight: 600;
  transition: var(--shq-tr);
}
.qei-mb-btn--primary,
.qei-mb-btn--status {
  background: var(--shq-accent);
  color: #fff;
  box-shadow: var(--shq-sh-accent);
}
.qei-mb-btn--primary:hover,
.qei-mb-btn--status:hover {
  background: var(--shq-accent-700);
}
.qei-mb-btn--secondary,
.qei-mb-btn--more {
  background: var(--shq-surf-2);
  border: 1px solid var(--shq-border-2);
  color: var(--shq-text);
}

.qei-bottom-sheet__panel {
  background: var(--shq-surface);
  border-top: 1px solid var(--shq-border);
  border-radius: var(--shq-r-lg) var(--shq-r-lg) 0 0;
  box-shadow: var(--shq-sh-lg);
  color: var(--shq-text);
}
.qei-bottom-sheet__backdrop {
  background: rgba(35, 25, 18, .42);
}
[data-theme="dark"] .qei-bottom-sheet__backdrop {
  background: rgba(0, 0, 0, .55);
}
.qei-bottom-sheet__handle {
  background: var(--shq-border-2);
  border-radius: var(--shq-r-pill);
}
.qei-bottom-sheet__title {
  font-family: var(--shq-font-head);
  font-weight: 700;
  color: var(--shq-ink);
}
.qei-bottom-sheet__close {
  color: var(--shq-muted);
  border-radius: var(--shq-r-sm);
  transition: var(--shq-tr);
}
.qei-bottom-sheet__close:hover {
  background: var(--shq-surf-2);
  color: var(--shq-ink);
}

/* =========================================================================
   Mobile-Feinschliff Angebots-Board
   ========================================================================= */
@media (max-width: 640px) {
  [data-quotes-board] .sh-kanban {
    gap: 12px;
  }
}