/* ============================================================
   safeguard-trust - Modul-spezifische Styles
   ------------------------------------------------------------
   SOC-2-ready-Checkliste: Readiness-Score-Banner + 5 Trust-
   Criteria-Kacheln. Grid + Karten kommen aus dem Shared-Block
   _shared/blocks/hub-card (.idf-hub / .idf-hub-card inkl. Ampel-
   Modifier is-rot/is-gelb/is-gruen/is-leer, $useEisenhower).
   Diese Datei definiert nur: Page-Layout, das Score-Banner und
   die additive Nachweisquellen-Liste in der Kachel. Farben/Groessen
   ausschliesslich ueber Tokens (SHARED-REORG §7.12/§7.16).
   ============================================================ */

/* ============================================================
   Page-Layout (zentrierte Spalte unter App-Header + Tabs)
   ============================================================ */

.sgt-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (max-width: 1100px) {
  .sgt-main {
    padding: var(--space-5) var(--space-4) var(--space-8);
    gap: var(--space-5);
  }
}

/* Dashboard-Sonderfall: vollflaechig, kein 1280-Deckel (analog
   safeguard-datenschutz) - die fuenf Kriterien-Karten profitieren
   von mehr Breite. ID wird in index.php gesetzt. */
#sgt-dashboard-page {
  max-width: none;
  padding: var(--space-8) var(--space-8) var(--space-12);
}

@media (max-width: 1100px) {
  #sgt-dashboard-page {
    padding: var(--space-5) var(--space-4) var(--space-8);
  }
}

/* ============================================================
   Readiness-Score-Banner (Kopf der Checkliste)
   ------------------------------------------------------------
   Grosse Prozentzahl links, rechts Label + Fortschrittsbalken +
   Erklaerzeile. Ampel faerbt Zahl und Balkenfuellung. Modul-
   spezifischer Hero, es gibt keinen Shared-Score-Block; Optik
   an SafeGuard BG-Ready angelehnt, komplett Token-basiert.
   ============================================================ */

.sgt-score {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--white);
  border: var(--idf-form-border);
  border-radius: var(--radius-lg);
}

.sgt-score-num {
  flex: 0 0 auto;
  min-width: 6rem;
  text-align: center;
  /* Hero-Zahl - mirror der Shared .idf-hub-card-score-Skala (2.75rem);
     es gibt keinen groesseren --font-Token (§7.16). */
  font-size: 2.75rem;
  line-height: 1;
  font-weight: var(--weight-bold);
  color: var(--mid);
}

.sgt-score-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sgt-score-label {
  font-size: var(--font-base);
  font-weight: var(--weight-bold);
  color: var(--ink);
}

.sgt-score-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--neutral-bg);
  overflow: hidden;
}

.sgt-score-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--mid);
  transition: width var(--motion-base, 200ms) ease;
}

.sgt-score-sub {
  font-size: var(--font-sm);
  color: var(--mid);
  line-height: 1.4;
}

/* Ampel: rot < 60 %, gelb < 90 %, gruen ab 90 % (analog BG-Ready). */
.sgt-score.is-rot   .sgt-score-num,
.sgt-score.is-rot   .sgt-score-bar-fill { color: var(--primary); background-color: var(--primary); }
.sgt-score.is-rot   .sgt-score-num      { background-color: transparent; }

.sgt-score.is-gelb  .sgt-score-num      { color: var(--orange); }
.sgt-score.is-gelb  .sgt-score-bar-fill { background-color: var(--orange); }

.sgt-score.is-gruen .sgt-score-num      { color: var(--confirm); }
.sgt-score.is-gruen .sgt-score-bar-fill { background-color: var(--confirm); }

@media (max-width: 640px) {
  .sgt-score { flex-direction: column; align-items: stretch; text-align: center; gap: var(--space-3); }
  .sgt-score-num { min-width: 0; }
}

/* ============================================================
   Kriterien-Grid (5 Trust-Criteria-Kacheln)
   ------------------------------------------------------------
   .idf-hub + .idf-hub-card kommen aus dem Shared-Block; hier nur
   die additive Nachweisquellen-Liste im Karten-Fuss und der
   Reifegrad-Meta-Text. Die Karte ist ein <div> (kein Link) - sie
   buendelt MEHRERE Nachweisquellen, jede Quelle ist einzeln
   klickbar. Darum der Hover-Reset (keine irrefuehrende Link-Optik).
   ============================================================ */

.sgt-crit-card {
  cursor: default;
}
.sgt-crit-card:hover {
  border-color: var(--line);
  box-shadow: none;
}

/* Reifegrad-Zeile in der Zaehler-Liste - <strong> traegt die Ampel-Farbe. */
.sgt-crit-card .idf-hub-card-counters .sgt-reifegrad.is-offen      strong { color: var(--mid); }
.sgt-crit-card .idf-hub-card-counters .sgt-reifegrad.is-in_arbeit  strong { color: var(--orange); }
.sgt-crit-card .idf-hub-card-counters .sgt-reifegrad.is-weitgehend strong { color: var(--orange); }
.sgt-crit-card .idf-hub-card-counters .sgt-reifegrad.is-erfuellt   strong { color: var(--confirm); }
.sgt-crit-card .idf-hub-card-counters .sgt-pruefung.is-ueberfaellig strong { color: var(--primary); }

/* Nachweisquellen-Block im Karten-Fuss. Sitzt unter dem Body und
   schliesst die Karte ab (Body traegt margin-top:auto aus dem Block,
   dieser Block liegt danach). */
.sgt-evidence {
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sgt-evidence-label {
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mid);
}

.sgt-evidence-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Klickbare Quelle (fuehrt ins Modul, wo der Nachweis lebt). */
.sgt-evidence-link,
.sgt-evidence-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  border: 1px solid var(--line);
  background: var(--white);
  text-decoration: none;
  max-width: 100%;
}

.sgt-evidence-link {
  color: var(--ink);
  transition: background var(--motion-base, 120ms) ease, border-color var(--motion-base, 120ms) ease;
}
.sgt-evidence-link:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
}
.sgt-evidence-link i { color: var(--accent); }

/* Nicht-klickbare Quelle: entweder externe Quelle (n8n, Directus-Log)
   oder eine noch nicht gebaute Ausbaustufe (eigenes _events/_sla,
   Datenklassifizierung). Gedaempft, mit Cursor-Feedback. */
.sgt-evidence-chip {
  color: var(--mid);
  background: var(--neutral-bg);
  cursor: default;
}
.sgt-evidence-chip.is-soon i { color: var(--mid); }
.sgt-evidence-chip.is-extern i { color: var(--mid); }

/* Inline-Code im Setup-Hinweis der Score-Erklaerzeile (Collection-/Datei-
   Namen), solange der Nachweis-Ledger noch nicht existiert. */
.sgt-score-sub code {
  font-size: 0.92em;
  padding: 1px 6px;
  border-radius: var(--radius-md);
  background: var(--neutral-bg);
  color: var(--ink);
}