/* fi-drawer.css — Firma-Drawer-spezifische Styles.
 *
 * Marketing-Freigaben (DSGVO-Pills, SSOT fi-marketing-freigabe.js): die
 * gast-mk-*-Klassen sind fuer den Gast-Bereich gebaut und verlieren im
 * Drawer gegen den globalen Button-Reset `.app-scope button { border:none;
 * background:none; padding:0 }` (app-scope.css) — die Pills degradieren zu
 * nacktem Text. Dieser Block stellt die Pill-Optik mit Drawer-Spezifitaet
 * (0,3,0) wieder her und richtet Abstaende am Drawer-Field-Raster aus.
 */
.app-scope .shared-drawer .gast-mk-q {
  padding: var(--space-2-5) 0 var(--space-1);
  border-top: 1px solid var(--color-border-light);
  margin-top: var(--space-2);
}
.app-scope .shared-drawer [data-fi-mkpills] > .gast-mk-q:first-of-type {
  border-top: none;
  margin-top: var(--space-1);
}
.app-scope .shared-drawer .gast-mk-q-label {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin-bottom: 2px;
}
.app-scope .shared-drawer .gast-mk-q-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
  line-height: 1.4;
}
.app-scope .shared-drawer .gast-mk-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
}
.app-scope .shared-drawer .gast-mk-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-circular);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-family: inherit;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color var(--duration-fast), background-color var(--duration-fast);
}
.app-scope .shared-drawer .gast-mk-pill:hover {
  border-color: var(--color-border-strong);
  background: var(--color-bg-subtle);
}
.app-scope .shared-drawer .gast-mk-pill:focus-visible {
  outline: 2px solid var(--lod-darkblue);
  outline-offset: 1px;
}
.app-scope .shared-drawer .gast-mk-pill--active {
  border-color: var(--lod-darkblue);
  background: var(--lod-darkblue-50);
  color: var(--lod-darkblue);
  font-weight: var(--fw-medium);
}
.app-scope .shared-drawer .gast-mk-pill--active-yes {
  border-color: var(--color-success-strong);
  background: var(--status-success-bg);
  color: var(--status-success-fg);
  font-weight: var(--fw-medium);
}
.app-scope .shared-drawer .gast-mk-pill--active-no {
  border-color: var(--color-border-strong);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-weight: var(--fw-medium);
}
.app-scope .shared-drawer .gast-mk-open-hint,
.app-scope .shared-drawer .gast-mk-open {
  margin-top: var(--space-1-5);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Audit-Historie (ausklappbares <details>): an das Drawer-Raster angleichen —
   die Gast-Werte (padding var(--space-4) seitlich) reissen im Drawer ein. */
.app-scope .shared-drawer .gast-audit {
  border-top: 1px solid var(--color-border-light);
  padding: var(--space-2) 0 0;
  margin-top: var(--space-2);
}

/* ── SLA-Zeitgeber-Block (Per-Kunde-SLA, Management-only) ──────────────────────
   Konsument: fi-drawer.js _fiRenderSla (data-fi-sla). Stufe-Select + optionale
   individuelle Reaktionszeiten. Flex-wrap → intrinsisch responsiv. */
.app-scope .fi-sla-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}
.app-scope .fi-sla-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.app-scope .fi-sla-lbl {
  flex: 0 0 130px;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.app-scope .fi-sla-select {
  flex: 1 1 200px;
  min-width: 0;
  height: 32px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-sm);
}
.app-scope .fi-sla-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex: 1 1 200px;
}
.app-scope .fi-sla-in {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 60px;
  min-width: 0;
}
.app-scope .fi-sla-in > span {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.app-scope .fi-sla-input {
  width: 100%;
  height: 32px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}
.app-scope .fi-sla-view {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.app-scope .fi-sla-stufe { font-weight: var(--fw-semibold); }
.app-scope .fi-sla-times {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ── Lizenzen-Karte (Bestand aus ALSO, _renderLizenzen) ───────────────────────
   Kompakte Abo-Tabelle + Summen-Fußzeile; rendert sich nur bei vorhandenen
   Abos. Host trägt .fi-liz (Modul-Wurzel, vom JS gesetzt). */
.app-scope .fi-liz-tablewrap { overflow-x: auto; }
.app-scope .fi-liz-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.app-scope .fi-liz-table th {
  text-align: left; font-weight: var(--fw-semibold, 600); color: var(--color-text-muted);
  font-size: var(--font-size-xs); padding: var(--space-1) var(--space-1-5);
  border-bottom: 1px solid var(--lod-gray-200, #d9dde3); white-space: nowrap;
}
.app-scope .fi-liz-table td {
  padding: var(--space-1) var(--space-1-5);
  border-bottom: 1px solid var(--lod-gray-100, #f0f0f0); vertical-align: middle;
}
.app-scope .fi-liz-table tbody tr:last-child td { border-bottom: 0; }
.app-scope .fi-liz-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-scope .fi-liz-muted { color: var(--color-text-muted); }
.app-scope .fi-liz-foot {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-1) var(--space-2); margin-top: var(--space-1-5);
  font-size: var(--font-size-xs); color: var(--color-text-muted);
}
.app-scope .fi-liz-link {
  background: none; border: 0; padding: 0; font: inherit; font-size: var(--font-size-xs);
  color: var(--lod-darkblue, #0f6cbd); cursor: pointer; white-space: nowrap;
}
.app-scope .fi-liz-link:hover { text-decoration: underline; }
.app-scope .fi-liz-warn { margin-bottom: var(--space-2); font-size: var(--font-size-sm); }