/* =========================================================================
   ServiceHub — Re-Design · Bereich ADMIN  ·  REIN OPTISCH, additiv
   --------------------------------------------------------------------------
   Bereich: System / Administration / Einstellungen + Process-Intelligence +
   Observability + Reports/Auswertungen.

   ECHTE Selektoren (aus internal.js / *-view.js):
     - Admin-Landing / Untermenüs : .admin-cards, .admin-card, .admin-group,
                                     .admin-group-title  (Karten mit h2/h3 + p)
     - Process Intelligence       : .pi-view (Root) → .pi-header, .pi-kpis,
                                     .pi-insight(s), .pi-toggle, .pi-privacy,
                                     .pi-retention, .pi-cleanup, .pi-friction
     - Reports / Auswertungen     : .rpt-container (Root) → .rpt-filters,
                                     .rpt-tabs/.rpt-tab, .rpt-kpi(-row),
                                     .rpt-card, .rpt-chart-card, .rpt-table
     - Observability              : generische .sh-* Klassen ohne eigenen Root →
                                     nur über observability-EINDEUTIGE Attribut-
                                     Anker ([data-obs-tab]) gescoped, damit die
                                     global verwendeten .sh-* NICHT app-weit
                                     umdefiniert werden.

   HARTE REGELN dieser Datei:
   - GENAU diese eine Datei. Kein Markup/JS, keine Felder/Tabs/Buttons entfernt.
   - Nur Farbe / Rahmen / Radius / Schatten / Abstand / Fokus → warmes
     ELMETIC-Token-System (Space Grotesk / Figtree / Space Mono).
   - Tokens lokal auf die Bereichs-Roots gescoped (--sh-*), damit die Datei
     UNABHÄNGIG von der Ladereihenfolge des Token-Fundaments wirkt. Globale
     Basis (.btn/.badge/.input/.data-table/:root-Tokens) wird NICHT neu
     definiert — gehört dem Fundament.
   - Light + Dark ([data-theme="dark"]) nach Token-Vertrag.
   ========================================================================= */

@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');

/* =========================================================================
   0) TOKENS — lokal auf die Admin-Bereichs-Roots gescoped (Light)
   ========================================================================= */
.admin-cards,
.admin-group,
.pi-view,
.rpt-container,
[data-obs-tab],
#mainContent .sh-toolbar:has([id^="obsFilter"]) {
  --sh-accent: #E73D25;
  --sh-accent-700: #C5331E;
  --sh-accent-600: #D6371F;
  --sh-accent-soft: #FCEDE7;
  --sh-accent-line: rgba(231, 61, 37, .22);
  --sh-honey: #D99A2B;
  --sh-honey-soft: #FBF0DA;
  --sh-ok: #16A34A;
  --sh-ok-soft: #E9F8EF;
  --sh-warn: #C7791A;
  --sh-warn-soft: #FBF1E0;
  --sh-info: #2F6BD6;
  --sh-info-soft: #EAF1FC;
  --sh-violet: #7C5BD6;
  --sh-violet-soft: #F0ECFB;

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

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

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

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

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

/* ---------- Tokens (Dark) ---------- */
[data-theme="dark"] .admin-cards,
[data-theme="dark"] .admin-group,
[data-theme="dark"] .pi-view,
[data-theme="dark"] .rpt-container,
[data-theme="dark"] [data-obs-tab],
[data-theme="dark"] #mainContent .sh-toolbar:has([id^="obsFilter"]) {
  --sh-accent: #F2543B;
  --sh-accent-700: #E0432B;
  --sh-accent-600: #EC4A30;
  --sh-accent-soft: rgba(242, 84, 59, .16);
  --sh-accent-line: rgba(242, 84, 59, .30);
  --sh-honey: #E6AE4A;
  --sh-honey-soft: rgba(230, 174, 74, .16);
  --sh-ok: #3BC07A;
  --sh-ok-soft: rgba(59, 192, 122, .15);
  --sh-warn: #E5A33C;
  --sh-warn-soft: rgba(229, 163, 60, .15);
  --sh-info: #5C8FE8;
  --sh-info-soft: rgba(92, 143, 232, .16);
  --sh-violet: #9D82E6;
  --sh-violet-soft: rgba(157, 130, 230, .16);

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

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

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

/* =========================================================================
   1) ADMIN-LANDING — Karten-Raster (.admin-cards) + Karten (.admin-card)
      + Gruppen (.admin-group / .admin-group-title)
      Nur Optik: weiche warme Flächen, zarte Rahmen, runde Ecken, ruhiger
      Hover. Kein Layout-/Grid-Eingriff über das Bestehende hinaus.
   ========================================================================= */

/* Karten-Grid: gleichmässige warme Abstände (additiv, robustes Raster) */
.admin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 14px;
}

/* Gruppen-Block: linke Akzentkante warm + Titel in Space Grotesk */
.admin-group {
  border-left-color: var(--sh-accent) !important;
  margin-bottom: 22px;
}
.admin-group-title {
  font-family: var(--sh-font-head);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sh-ink);
}
.admin-group > .muted {
  color: var(--sh-text-2);
}

/* Karte: warme Oberfläche, weicher Rahmen/Radius/Schatten */
.admin-card {
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-r-lg);
  box-shadow: var(--sh-sh-sm);
  color: var(--sh-text);
  transition: border-color var(--sh-tr), box-shadow var(--sh-tr),
              transform var(--sh-tr), background var(--sh-tr);
  position: relative;
  overflow: hidden;
}
/* feine Akzent-Lasur an der Oberkante */
.admin-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sh-accent), var(--sh-honey));
  opacity: 0;
  transition: opacity var(--sh-tr);
}
.admin-card:hover {
  border-color: var(--sh-accent-line);
  box-shadow: var(--sh-sh-md);
  transform: translateY(-2px);
  background: var(--sh-surface);
}
.admin-card:hover::before {
  opacity: 1;
}
.admin-card:focus-visible {
  outline: none;
  box-shadow: var(--sh-ring);
  border-color: var(--sh-accent);
}
.admin-card h2,
.admin-card h3 {
  font-family: var(--sh-font-head);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sh-ink);
}
.admin-card:hover h2,
.admin-card:hover h3 {
  color: var(--sh-accent-700);
}
.admin-card p {
  color: var(--sh-text-2);
  line-height: 1.5;
}

/* =========================================================================
   2) PROCESS INTELLIGENCE  (.pi-view = Root)
   ========================================================================= */
.pi-view {
  font-family: var(--sh-font-body);
  color: var(--sh-text);
}

/* Kopfbereich */
.pi-header__actions {
  gap: .5rem;
}

/* KPI-Kacheln (sh-kpi innerhalb der pi-view) — warm, edel, ruhig */
.pi-view .sh-kpi,
.pi-kpis .sh-kpi {
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-r-md);
  box-shadow: var(--sh-sh-sm);
  padding: 14px 16px;
  transition: border-color var(--sh-tr), box-shadow var(--sh-tr);
}
.pi-view .sh-kpi:hover,
.pi-kpis .sh-kpi:hover {
  border-color: var(--sh-accent-line);
  box-shadow: var(--sh-sh-md);
}
.pi-view .sh-kpi__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--sh-muted);
}
.pi-view .sh-kpi__value {
  font-family: var(--sh-font-head);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sh-ink);
}
.pi-view .sh-kpi__sub {
  color: var(--sh-text-2);
  font-size: .8rem;
}
.pi-view .sh-kpi--accent .sh-kpi__value { color: var(--sh-accent); }
.pi-view .sh-kpi--success .sh-kpi__value,
.pi-view .sh-kpi--ok .sh-kpi__value { color: var(--sh-ok); }
.pi-view .sh-kpi--warning .sh-kpi__value,
.pi-view .sh-kpi--warn .sh-kpi__value { color: var(--sh-warn); }
.pi-view .sh-kpi--danger .sh-kpi__value { color: var(--sh-accent-700); }
.pi-view .sh-kpi--info .sh-kpi__value { color: var(--sh-info); }

/* Tabs der PI-View (sh-tabs, im pi-view-Scope) */
.pi-view .sh-tabs {
  border-bottom: 2px solid var(--sh-border);
}
.pi-view .sh-tabs__btn {
  font-family: var(--sh-font-body);
  font-weight: 600;
  color: var(--sh-text-2);
  border-radius: var(--sh-r-sm) var(--sh-r-sm) 0 0;
  transition: color var(--sh-tr), background var(--sh-tr),
              border-color var(--sh-tr);
}
.pi-view .sh-tabs__btn:hover {
  color: var(--sh-ink);
  background: var(--sh-surf-2);
}
.pi-view .sh-tabs__btn.is-active {
  color: var(--sh-accent);
  border-bottom-color: var(--sh-accent);
}

/* Insight-Karten */
.pi-insights {
  gap: 14px;
}
.pi-insight {
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-left: 4px solid var(--sh-border-2);
  border-radius: var(--sh-r-md);
  box-shadow: var(--sh-sh-sm);
  padding: 16px 18px;
  transition: box-shadow var(--sh-tr), border-color var(--sh-tr);
}
.pi-insight:hover {
  box-shadow: var(--sh-sh-md);
}
.pi-insight--danger { border-left-color: var(--sh-accent-700); }
.pi-insight--warning { border-left-color: var(--sh-warn); }
.pi-insight--accent { border-left-color: var(--sh-accent); }
.pi-insight--neutral { border-left-color: var(--sh-border-2); }
.pi-insight__title {
  font-family: var(--sh-font-head);
  font-weight: 700;
  color: var(--sh-ink);
  letter-spacing: -.01em;
}
.pi-insight__scope {
  color: var(--sh-muted);
}
.pi-insight__desc {
  color: var(--sh-text);
}
.pi-insight__evidence,
.pi-insight__action {
  color: var(--sh-text-2);
}

/* Reibungs-Chips */
.pi-friction .sh-badge,
.pi-friction .sh-badge--neutral {
  background: var(--sh-surf-2);
  color: var(--sh-text-2);
  border-radius: var(--sh-r-pill);
}

/* Einstellungen / Toggle-Listen / Datenschutz */
.pi-settings,
.pi-privacy {
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-r-md);
  box-shadow: var(--sh-sh-sm);
  padding: 16px 18px;
}
.pi-toggle {
  padding: .5rem .25rem;
  border-radius: var(--sh-r-sm);
  transition: background var(--sh-tr);
}
.pi-toggle:hover {
  background: var(--sh-surf-2);
}
.pi-toggle > span {
  color: var(--sh-text);
  font-weight: 500;
}
.pi-toggle small {
  color: var(--sh-muted);
}
.pi-toggle input[type="checkbox"] {
  accent-color: var(--sh-accent);
  width: 16px;
  height: 16px;
}
.pi-retention,
.pi-cleanup {
  margin-top: .9rem;
  color: var(--sh-text-2);
}
.pi-privacy__yes { color: var(--sh-ok); }
.pi-privacy__no { color: var(--sh-accent-700); }

/* =========================================================================
   3) REPORTS / AUSWERTUNGEN  (.rpt-container = Root)
   ========================================================================= */
.rpt-container {
  font-family: var(--sh-font-body);
  color: var(--sh-text);
}
.rpt-header h1 {
  font-family: var(--sh-font-head);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sh-ink);
}

/* Filterleiste */
.rpt-filters {
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-r-md);
  box-shadow: var(--sh-sh-sm);
}
.rpt-input {
  border: 1px solid var(--sh-border-2);
  border-radius: var(--sh-r-sm);
  background: var(--sh-field);
  color: var(--sh-text);
  font-family: var(--sh-font-body);
  transition: border-color var(--sh-tr), box-shadow var(--sh-tr);
}
.rpt-input:focus {
  outline: none;
  border-color: var(--sh-accent);
  box-shadow: var(--sh-ring);
}
.rpt-date-range {
  color: var(--sh-text-2);
}

/* Tabs */
.rpt-tabs {
  border-bottom: 2px solid var(--sh-border);
}
.rpt-tab {
  font-family: var(--sh-font-body);
  font-weight: 600;
  color: var(--sh-text-2);
  border-radius: var(--sh-r-sm) var(--sh-r-sm) 0 0;
  transition: color var(--sh-tr), background var(--sh-tr),
              border-color var(--sh-tr);
}
.rpt-tab:hover {
  color: var(--sh-ink);
  background: var(--sh-surf-2);
}
.rpt-tab--active {
  color: var(--sh-accent);
  border-bottom-color: var(--sh-accent);
}

/* KPI-Kacheln */
.rpt-kpi-row {
  gap: 14px;
}
.rpt-kpi {
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-r-md);
  box-shadow: var(--sh-sh-sm);
  transition: border-color var(--sh-tr), box-shadow var(--sh-tr);
}
.rpt-kpi:hover {
  border-color: var(--sh-accent-line);
  box-shadow: var(--sh-sh-md);
}
.rpt-kpi-value {
  font-family: var(--sh-font-head);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sh-ink);
}
.rpt-kpi-label {
  color: var(--sh-muted);
  letter-spacing: .05em;
}
.rpt-kpi--success .rpt-kpi-value { color: var(--sh-ok); }
.rpt-kpi--warning .rpt-kpi-value { color: var(--sh-warn); }
.rpt-kpi--danger .rpt-kpi-value { color: var(--sh-accent-700); }

/* Inhalts-/Chart-Karten */
.rpt-card,
.rpt-chart-card {
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-r-lg);
  box-shadow: var(--sh-sh-sm);
}
.rpt-card h3 {
  font-family: var(--sh-font-head);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sh-ink);
}
.rpt-hint {
  color: var(--sh-muted);
}

/* Tabellen (innerhalb Reports) */
.rpt-table th {
  color: var(--sh-muted);
  border-bottom: 2px solid var(--sh-border-2);
  letter-spacing: .04em;
}
.rpt-table td {
  border-bottom: 1px solid var(--sh-border);
  color: var(--sh-text);
}
.rpt-table tbody tr:nth-child(even) {
  background: var(--sh-surf-2);
}
.rpt-table tbody tr:hover {
  background: var(--sh-accent-soft);
}
.rpt-table a {
  color: var(--sh-accent);
  font-weight: 600;
}
.rpt-table a:hover {
  color: var(--sh-accent-700);
}
.rpt-text-right { text-align: right; }
.rpt-table .rpt-text-right,
.rpt-table td.rpt-text-right {
  font-family: var(--sh-font-mono);
}

/* Lade-/Leer-/Fehlerzustände */
.rpt-loading,
.rpt-empty {
  color: var(--sh-muted);
}
.rpt-error {
  color: var(--sh-accent-700);
}

/* =========================================================================
   4) OBSERVABILITY  — generische .sh-* Klassen, NUR über den eindeutigen
      Observability-Anker [data-obs-tab] / #obsFilter* gescoped, damit die
      global verwendeten .sh-* nicht app-weit verändert werden.
   ========================================================================= */

/* Tab-Leiste (jeder Button trägt data-obs-tab) */
.sh-tabs:has([data-obs-tab]) {
  border-bottom: 2px solid var(--sh-border);
}
.sh-tabs__btn[data-obs-tab] {
  font-family: var(--sh-font-body);
  font-weight: 600;
  color: var(--sh-text-2);
  border-radius: var(--sh-r-sm) var(--sh-r-sm) 0 0;
  transition: color var(--sh-tr), background var(--sh-tr),
              border-color var(--sh-tr);
}
.sh-tabs__btn[data-obs-tab]:hover {
  color: var(--sh-ink);
  background: var(--sh-surf-2);
}
.sh-tabs__btn[data-obs-tab].is-active {
  color: var(--sh-accent);
  border-bottom-color: var(--sh-accent);
}

/* Toolbar der Observability (enthält die obs-Filter-Felder) */
#mainContent .sh-toolbar:has([id^="obsFilter"]) {
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-r-md);
  box-shadow: var(--sh-sh-sm);
  padding: 12px 14px !important;
}
.sh-input[id^="obsFilter"],
.sh-input#obsAutoRefresh {
  border: 1px solid var(--sh-border-2);
  border-radius: var(--sh-r-sm);
  background: var(--sh-field);
  color: var(--sh-text);
  font-family: var(--sh-font-body);
  transition: border-color var(--sh-tr), box-shadow var(--sh-tr);
}
.sh-input[id^="obsFilter"]:focus,
.sh-input#obsAutoRefresh:focus {
  outline: none;
  border-color: var(--sh-accent);
  box-shadow: var(--sh-ring);
}

/* =========================================================================
   5) RESPONSIVE — Admin-Karten-Raster auf schmalen Schirmen ruhig stapeln
   ========================================================================= */
@media (max-width: 640px) {
  .admin-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}