/* =========================================================================
   ServiceHub — Redesign-Schicht: Anlagen & Wartung  (NUR Optik)
   ──────────────────────────────────────────────────────────────────────────
   Bereich: Anlagen-Liste/-Detail (#assets / asset-detail) + Wartungs-/Service-
   Ansichten (maintenance-landing/-contracts/-due/-calendar, asset-detail
   „Wartung & Prüfung"). Cockpit-KPIs, Tabellen-Akzente, Fälligkeits-/Status-
   Badges in der warmen Token-Optik des neuen Design-Systems.

   REGELN:
   • Additiv, lädt zuletzt → gewinnt die Kaskade über realistische Selektoren
     (Bereichs-Container statt !important-Spam).
   • Nur Farbe/Schrift/Radius/Schatten/Abstand/Rahmen/Hintergrund. KEINE Logik-,
     Layout- oder Markup-Änderung. Nichts Funktionales wird versteckt/verschoben.
   • Ausschließlich Design-Tokens. Die warme Token-Quelle (--accent, --surf-2,
     --ink, --text-2, --honey, --info, --ok, --warn, --font-head, --r-md, --sh-md,
     --ring …) stellt die Fundament-Datei (theme.css → :root / [data-theme]).
     Hier werden KEINE globalen Basis-Tokens und KEINE Basis-Komponenten
     (.btn/.badge/.data-table/.input) neu definiert.
   • Light + Dark: alles über Tokens; Dark-Feinschliff via [data-theme="dark"].
   • Defensive Fallbacks via var(--token, <legacy>) — bricht nicht, falls diese
     Schicht vor der Fundament-Datei geladen würde.

   Die echten Klassen dieses Bereichs (verifiziert in internal.js):
     Liste:   .page-header .subtitle · .panel · .dashboard-kpi-grid > .kpi-card
              (.kpi-card--warn/.kpi-card--ok) · .filter-toolbar · .data-table
              · .empty-state-panel/-icon/-title/-desc
     Detail:  .tabs/.tab-btn · .dense-list · .section-header · .kpi-grid >
              .panel.kpi-card (h3 + .kpi-value) · .actions-row · .data-table
              · .status-badge + Tönungen .status-ok/.status-failed/
                .status-warning/.status-running
     Wartung: Landing .admin-cards/.admin-card · Tabellen mit Fälligkeit/Status
   ========================================================================= */

/* -------------------------------------------------------------------------
   1) ANLAGEN-COCKPIT — Kosten-KPIs (Liste) in warmer Token-Optik
   Container: .panel > .dashboard-kpi-grid > .kpi-card   (nur hier in einem
   .panel verschachtelt → trifft NICHT das eigenständige Haupt-Dashboard).
   ------------------------------------------------------------------------- */
.panel > .dashboard-kpi-grid {
  gap: 14px;
}
.panel > .dashboard-kpi-grid > .kpi-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #eee5dc);
  border-radius: var(--r-md, 12px);
  box-shadow: var(--sh-md, 0 6px 20px rgba(120, 80, 50, .07));
  padding: 16px 18px;
  transition: box-shadow .16s cubic-bezier(.2, .7, .3, 1), border-color .16s cubic-bezier(.2, .7, .3, 1), transform .16s cubic-bezier(.2, .7, .3, 1);
}
.panel > .dashboard-kpi-grid > .kpi-card:hover {
  box-shadow: var(--sh-lg, 0 18px 44px rgba(120, 80, 50, .14));
  border-color: var(--border-2, #e3d9ce);
  transform: translateY(-1px);
}
.panel > .dashboard-kpi-grid > .kpi-card .kpi-label {
  color: var(--muted, #9a8f84);
  font-family: var(--font-body, inherit);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.panel > .dashboard-kpi-grid > .kpi-card .kpi-value {
  color: var(--ink, #231c17);
  font-family: var(--font-head, inherit);
  font-weight: 700;
  letter-spacing: -.01em;
}
.panel > .dashboard-kpi-grid > .kpi-card .kpi-meta {
  color: var(--text-2, #6b6157);
}
/* Akzent-Streifen der Status-Karten auf warme Tokens umlegen */
.panel > .dashboard-kpi-grid > .kpi-card.kpi-card--warn {
  border-left: 4px solid var(--warn, #c7791a);
  background: linear-gradient(100deg, var(--warn-soft, rgba(199, 121, 26, .10)), var(--surface, #fff) 62%);
}
.panel > .dashboard-kpi-grid > .kpi-card.kpi-card--ok {
  border-left: 4px solid var(--ok, #16a34a);
  background: linear-gradient(100deg, var(--ok-soft, rgba(22, 163, 74, .10)), var(--surface, #fff) 62%);
}

/* -------------------------------------------------------------------------
   2) ANLAGEN-DETAIL — Wartungs-/Kosten-KPIs als „panel kpi-card" (h3 + value)
   Distinkter Doppel-Klassen-Container .kpi-grid > .panel.kpi-card kommt nur in
   der Anlagen-Detailseite (Tab „Wartung & Prüfung", Kosten) vor.
   ------------------------------------------------------------------------- */
.kpi-grid {
  gap: 12px;
}
.kpi-grid > .panel.kpi-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #eee5dc);
  border-radius: var(--r-md, 12px);
  box-shadow: var(--sh-sm, 0 1px 2px rgba(120, 80, 50, .06));
  padding: 14px 16px;
  transition: box-shadow .16s cubic-bezier(.2, .7, .3, 1), border-color .16s cubic-bezier(.2, .7, .3, 1);
}
.kpi-grid > .panel.kpi-card:hover {
  box-shadow: var(--sh-md, 0 6px 20px rgba(120, 80, 50, .07));
  border-color: var(--accent-line, rgba(231, 61, 37, .22));
}
.kpi-grid > .panel.kpi-card > h3 {
  margin: 0 0 6px;
  color: var(--muted, #9a8f84);
  font-family: var(--font-body, inherit);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.kpi-grid > .panel.kpi-card > .kpi-value {
  color: var(--ink, #231c17);
  font-family: var(--font-head, inherit);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* -------------------------------------------------------------------------
   3) ANLAGEN-DETAIL — Tab-Leiste + Stammdaten-Liste (.dense-list)
   ------------------------------------------------------------------------- */
.tabs {
  border-bottom: 1px solid var(--border, #eee5dc);
  gap: 2px;
}
.tabs .tab-btn {
  font-family: var(--font-body, inherit);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-2, #6b6157);
  border-radius: var(--r-sm, 9px) var(--r-sm, 9px) 0 0;
  transition: color .16s, background .16s, box-shadow .16s;
}
.tabs .tab-btn:hover {
  color: var(--ink, #231c17);
  background: var(--surf-2, #f6f1eb);
}
.tabs .tab-btn.active {
  color: var(--accent, #e73d25);
  box-shadow: inset 0 -2px 0 var(--accent, #e73d25);
}
.tabs .tab-btn:focus-visible {
  outline: none;
  box-shadow: var(--ring, 0 0 0 3px rgba(231, 61, 37, .18));
}

.dense-list li {
  border-bottom: 1px solid var(--border, #eee5dc);
}
.dense-list li > span:first-child {
  color: var(--muted, #9a8f84);
  font-weight: 600;
}
.dense-list li > span:last-child {
  color: var(--ink, #231c17);
}

/* Abschnitts-Kopf in Detail-Panels (Titel + Aktionen nebeneinander) */
.section-header > div > h2 {
  font-family: var(--font-head, inherit);
  color: var(--ink, #231c17);
  letter-spacing: -.01em;
}
.section-header .muted {
  color: var(--text-2, #6b6157);
}

/* -------------------------------------------------------------------------
   4) FÄLLIGKEITS- & STATUS-BADGES — warme Token-Optik
   Die Wartungs-/Anlagen-Tabellen nutzen die Tönungs-Klassen status-ok/
   status-failed/status-warning/status-running (Fällig / Überfällig / Geplant /
   Abgeschlossen) sowie .status-badge mit denselben Modifiern. Hier nur die
   Farbgebung auf Tokens umgestellt; Form/Funktion unverändert.
   ------------------------------------------------------------------------- */
.status-badge.status-ok,
.status-badge--ok,
span.status-ok {
  background: var(--ok-soft, #e9f8ef);
  color: var(--ok, #16a34a);
  border: 1px solid color-mix(in srgb, var(--ok, #16a34a) 26%, transparent);
}
.status-badge.status-warning,
.status-badge--warning,
span.status-warning {
  background: var(--warn-soft, #fbf1e0);
  color: var(--warn, #c7791a);
  border: 1px solid color-mix(in srgb, var(--warn, #c7791a) 26%, transparent);
}
.status-badge.status-running,
.status-badge--running,
span.status-running {
  background: var(--info-soft, #eaf1fc);
  color: var(--info, #2f6bd6);
  border: 1px solid color-mix(in srgb, var(--info, #2f6bd6) 26%, transparent);
}
.status-badge.status-failed,
.status-badge--failed,
span.status-failed {
  background: var(--accent-soft, #fceee7);
  color: var(--accent-700, #c5331e);
  border: 1px solid var(--accent-line, rgba(231, 61, 37, .22));
}

/* -------------------------------------------------------------------------
   5) WARTUNG — Landing-Kacheln (.admin-cards) im Wartungs-/Service-Hub
   Nur additive Tonung; die Kacheln bleiben vollständig klickbar.
   ------------------------------------------------------------------------- */
.admin-cards > .admin-card {
  border: 1px solid var(--border, #eee5dc);
  border-radius: var(--r-md, 12px);
  box-shadow: var(--sh-sm, 0 1px 2px rgba(120, 80, 50, .06));
  background: var(--surface, #fff);
  transition: box-shadow .16s cubic-bezier(.2, .7, .3, 1), border-color .16s cubic-bezier(.2, .7, .3, 1), transform .16s cubic-bezier(.2, .7, .3, 1);
}
.admin-cards > .admin-card:hover {
  border-color: var(--accent, #e73d25);
  box-shadow: var(--sh-md, 0 6px 20px rgba(120, 80, 50, .07));
  background: var(--surface, #fff);
  transform: translateY(-1px);
}
.admin-cards > .admin-card > h2,
.admin-cards > .admin-card > h3 {
  font-family: var(--font-head, inherit);
  color: var(--ink, #231c17);
  letter-spacing: -.005em;
}
.admin-cards > .admin-card:hover > h2,
.admin-cards > .admin-card:hover > h3 {
  color: var(--accent, #e73d25);
}
.admin-cards > .admin-card > p {
  color: var(--text-2, #6b6157);
}

/* -------------------------------------------------------------------------
   6) DARK MODE — Feinschliff (Tokens tragen die Farben bereits; hier nur
   weichere Gradient-Mischungen, damit die Akzent-Karten nicht „glühen").
   ------------------------------------------------------------------------- */
[data-theme="dark"] .panel > .dashboard-kpi-grid > .kpi-card.kpi-card--warn {
  background: linear-gradient(100deg, var(--warn-soft, rgba(229, 163, 60, .15)), var(--surface, #1e1a16) 64%);
}
[data-theme="dark"] .panel > .dashboard-kpi-grid > .kpi-card.kpi-card--ok {
  background: linear-gradient(100deg, var(--ok-soft, rgba(59, 192, 122, .15)), var(--surface, #1e1a16) 64%);
}
[data-theme="dark"] .tabs .tab-btn:hover {
  background: var(--surf-2, #241f1a);
}