/* =========================================================================
   ServiceHub — Odoo-grade Komponenten-Schicht (.sho-*).
   -------------------------------------------------------------------------
   Reusable Odoo-Muster, die AUSSCHLIESSLICH die --sh-o-*-Token-Skala
   (sh-odoo-tokens.css) konsumieren. ALLE Selektoren sind NEUE .sho-*-Klassen
   → kein Eingriff in bestehende Klassen/den 79-Stylesheet-Stapel, null Risiko.
   Wird von den Quick-Win-Markup-Hooks (sh-odoo-*.js) verwendet.
   Goldene Regel: Rot (--sh-o-action) NUR Aktion/aktiv; Warnung = Amber; Daten neutral.
   Quelle: Odoo-Audit/Design-System-Spec 2026-06-04.
   ========================================================================= */

/* ---- Control-Panel: Breadcrumb | Spacer | Aktionen ---- */
.sho-cp { display: flex; align-items: center; gap: var(--sh-o-space-3);
  padding: var(--sh-o-space-3) var(--sh-o-space-4);
  background: var(--sh-o-surface); border-bottom: 1px solid var(--sh-o-border); }
.sho-cp__crumb { font-size: var(--sh-o-font-md); font-weight: var(--sh-o-fw-semi); color: var(--sh-o-text); }
.sho-cp__crumb a { color: var(--sh-o-text-muted); text-decoration: none; }
.sho-cp__crumb a:hover { color: var(--sh-o-action); }
.sho-cp__spacer { flex: 1 1 auto; }
.sho-cp__actions { display: flex; gap: var(--sh-o-space-2); align-items: center; }

/* ---- Statusleiste: EINE klickbare Kette (ersetzt Doppel-Badges) ---- */
.sho-statusbar { display: inline-flex; border: 1px solid var(--sh-o-border);
  border-radius: var(--sh-o-radius-pill); overflow: hidden; background: var(--sh-o-surface); }
.sho-statusbar__step { padding: 4px 14px; font-size: var(--sh-o-font-sm);
  color: var(--sh-o-text-muted); cursor: pointer; white-space: nowrap;
  border-right: 1px solid var(--sh-o-border); }
.sho-statusbar__step:last-child { border-right: 0; }
.sho-statusbar__step--done { color: var(--sh-o-text); }
.sho-statusbar__step--active { background: var(--sh-o-action); color: #fff; font-weight: var(--sh-o-fw-semi); }

/* ---- Listen-Dichte (opt-in via .sho-list) ---- */
.sho-list { font-size: var(--sh-o-font-sm); border-collapse: collapse; width: 100%; }
.sho-list th { font-weight: var(--sh-o-fw-semi); color: var(--sh-o-text-muted);
  font-size: var(--sh-o-font-xs); text-transform: uppercase; letter-spacing: .04em;
  padding: var(--sh-o-space-2) var(--sh-o-space-3); cursor: pointer; user-select: none;
  background: var(--sh-o-surface-soft); border-bottom: 1px solid var(--sh-o-border-strong); white-space: nowrap; }
.sho-list th[data-sort]::after { content: "\2195"; opacity: .35; margin-left: 4px; font-size: 10px; }
.sho-list th[aria-sort="asc"]::after { content: "\25B2"; opacity: 1; }
.sho-list th[aria-sort="desc"]::after { content: "\25BC"; opacity: 1; }
.sho-list td { padding: var(--sh-o-space-2) var(--sh-o-space-3); border-top: 1px solid var(--sh-o-border); }
.sho-list tbody tr:hover td { background: var(--sh-o-surface-soft); cursor: pointer; }

/* ---- Form-Sheet: zentriertes Odoo-Belegblatt ---- */
.sho-sheet { max-width: 920px; margin: var(--sh-o-space-5) auto; background: var(--sh-o-surface);
  border: 1px solid var(--sh-o-border); border-radius: var(--sh-o-radius-md);
  box-shadow: var(--sh-o-shadow-1); padding: var(--sh-o-space-5); }
.sho-sheet__title { font-size: var(--sh-o-font-xl); font-weight: var(--sh-o-fw-semi); color: var(--sh-o-text); }
.sho-sheet__field { margin-bottom: var(--sh-o-space-3); }
.sho-sheet__field input, .sho-sheet__field select, .sho-sheet__field textarea {
  border: 1px solid var(--sh-o-border); border-radius: var(--sh-o-radius-sm);
  padding: 6px 10px; font-size: var(--sh-o-font-md); background: var(--sh-o-surface); color: var(--sh-o-text); }
.sho-sheet__field input:focus, .sho-sheet__field select:focus, .sho-sheet__field textarea:focus {
  outline: none; box-shadow: var(--sh-o-ring-focus); border-color: var(--sh-brand, #E73D25); }

/* ---- Smart-Buttons: klickbare KPI-Kacheln ---- */
.sho-smartbtns { display: flex; gap: var(--sh-o-space-2); flex-wrap: wrap; }
.sho-smartbtn { display: flex; flex-direction: column; min-width: 120px;
  padding: var(--sh-o-space-2) var(--sh-o-space-3); border: 1px solid var(--sh-o-border);
  border-radius: var(--sh-o-radius-sm); background: var(--sh-o-surface); cursor: pointer;
  transition: box-shadow .12s, transform .12s; text-decoration: none; }
.sho-smartbtn:hover { box-shadow: var(--sh-o-shadow-2); transform: translateY(-1px); }
.sho-smartbtn__num { font-size: var(--sh-o-font-lg); font-weight: var(--sh-o-fw-semi); color: var(--sh-o-action); }
.sho-smartbtn__label { font-size: var(--sh-o-font-xs); color: var(--sh-o-text-muted); text-transform: uppercase; letter-spacing: .03em; }

/* ---- Chatter ---- */
.sho-chatter { border-left: 1px solid var(--sh-o-border); padding: var(--sh-o-space-4); background: var(--sh-o-surface-soft); }
.sho-chatter__composer textarea { border: 1px solid var(--sh-o-border); border-radius: var(--sh-o-radius-sm); width: 100%; }
.sho-chatter__log-entry { padding: var(--sh-o-space-2) 0; border-top: 1px solid var(--sh-o-border); font-size: var(--sh-o-font-sm); }

/* ---- Badges/Chips: NEUTRALE Daten-Badges (nie Markenrot, nie Regenbogen) ---- */
.sho-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px;
  font-size: var(--sh-o-font-xs); border-radius: var(--sh-o-radius-pill);
  background: var(--sh-o-surface-soft); color: var(--sh-o-text-muted); border: 1px solid var(--sh-o-border); }
.sho-chip--info  { background: var(--sh-o-info-soft);  color: var(--sh-o-info);  border-color: transparent; }
.sho-chip--warn  { background: var(--sh-o-warn-soft);  color: var(--sh-o-warn);  border-color: transparent; }
.sho-chip--ok    { background: var(--sh-o-ok-soft);    color: var(--sh-o-ok);    border-color: transparent; }
.sho-chip--honey { background: var(--sh-o-honey-soft); color: var(--sh-o-honey); border-color: transparent; }