/**
 * idf-hub-card - Hub-/Bereichs-Karten (Dashboard-Kacheln + grosse Bereichs-Karten)
 *
 * Shared-Baustein aus Audit H3/#199 + L-D10. Konsolidiert die bisher 4x
 * kopierte Karten-Familie:
 *   - safeguard/safeguard.css        .sg-board / .sg-bereich-card   (Referenz gross)
 *   - safeguard-datenschutz/…        .sgds-board / .sgds-bereich-card (CSS-Klon)
 *   - dashboard/dashboard.css        .ds-hub-grid / .ds-hub-card    (Referenz kompakt)
 *   - facility/facility.css          .fac-hub / .fac-hub-card       (token-freier Nachbau)
 * guide/guide.css (.guide-card) bleibt bewusst eigenstaendig (horizontales
 * Row-Layout, Icon-Bubble, <button>-Semantik) - Begruendung im README.
 *
 * Zwei Varianten:
 *   .idf-hub-card              grosse Bereichs-Karte (Icon 44px, Titel,
 *                              Beschreibung, Score, Zaehler, Ampel-Toenung)
 *   .idf-hub-card.is-compact   quadratische Kachel (Icon 36px ueber Label)
 *
 * HOVER-STANDARD: KEIN LIFT (kein translateY, einheitlich fuer beide
 * Varianten). Dokumentierte Dashboard-Entscheidung (dashboard/dashboard.css
 * Kommentar ueber .ds-hub-card + dashboard/CHANGELOG.md v0.4.2): Hover =
 * ruhige Zustandsaenderung analog .idf-list-row:hover, kein "drei Effekte
 * gleichzeitig". Deckt sich mit der .sg-adresse-card-Begruendung
 * (safeguard.css: Karten mit Inline-Edits wackeln beim Tippen, wenn sie
 * liften). Der bisherige translateY(-2px)-Lift der sg-/sgds-Bereichs-Karten
 * entfaellt damit bewusst bei deren Umstellung - KEIN is-lift-Modifier.
 *   - gross:   border-color var(--accent) + box-shadow var(--shadow-sm)
 *   - kompakt: nur background var(--bg-hover)
 *
 * Voraussetzungen:
 *   - _shared/tokens/design-tokens/idf-tokens.css (laedt immer zuerst)
 *   - Ampel-Modifier (.is-rot/.is-gelb/.is-gruen) nutzen die Eisenhower-
 *     Tokens --eh-q*-bg: Konsumenten mit Ampel setzen $useEisenhower = true.
 *   - Delete-Pille (.idf-list-delete-btn) kommt aus idf-list-grid.css
 *     ($useListEngine bzw. $useListGrid), Pen-Affordance aus
 *     idf-inline-edit.css ($useInlineEdit) - nur noetig, wenn das Markup
 *     diese Slots verwendet.
 *
 * Laden via page-styles-Flag $useHubCard (nur CSS, kein JS-Pendant).
 * Ziel-Markup: siehe README.md in diesem Ordner.
 */

/* ============================================================
   Grid-Container
   ============================================================ */

.idf-hub {
  display: grid;
  /* auto-fill mit 320-px-Minimum: auf grossen Monitoren passen
     4-5 Karten pro Zeile, auf 1280 px noch 3, auf 900 px 2, auf
     600 px 1 - ohne Breakpoints. (1:1 aus .sg-board.)
     Abweichende Spurbreiten (z. B. Favoriten-Zeile minmax(130px, 160px))
     bleiben Modul-Override - grid-template-columns ist per §7.6 erlaubt. */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-5);
}

@media (max-width: 600px) {
  .idf-hub { grid-template-columns: 1fr; }
}

/* Kompakte Kachel-Wand (1:1 aus .ds-hub-grid). */
.idf-hub.is-compact {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--space-3);
}

@media (max-width: 400px) {
  .idf-hub.is-compact { grid-template-columns: 1fr; }
}

/* Loading-State des Boards (1:1 aus .sg-board.is-loading). */
.idf-hub.is-loading .idf-hub-card {
  pointer-events: none;
  opacity: 0.55;
}

/* ============================================================
   Karte - Standard (gross), 1:1 aus .sg-bereich-card
   ============================================================ */

.idf-hub-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  padding: var(--space-6);
  min-height: 240px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--ink);
  /* transform-Transition ist zusammen mit dem Lift entfallen
     (Hover-Standard "kein Lift", siehe Datei-Header). */
  transition: box-shadow var(--motion-base) ease,
              border-color var(--motion-base) ease;
}

/* Hover gross: Accent-Border + dezenter Schatten, OHNE translateY -
   siehe Hover-Standard im Datei-Header. Disabled-Karten hovern nicht. */
.idf-hub-card:not(.is-compact):not(.is-disabled):hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

/* Head-Zeile: Icon links (gross), Titel rechts daneben - Extrabold und
   Grossbuchstaben kommen von der globalen .idf-headline-Klasse aus
   idf-tokens.css (das Markup haengt sie zusaetzlich an die Title-Span). */
.idf-hub-card-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-4);
  width: 100%;
}

/* Icon-Groesse lebt hier im Shared-Block, nicht im Modul-CSS (§7.16). */
.idf-hub-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: 44px;
  flex-shrink: 0;
}

/* Titel-Wrapper fuer Inline-Edit (idf-inline-edit-host) - Flex, damit
   das Pencil-Icon rechts neben dem Titel klebt. */
.idf-hub-card-title-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
}

.idf-hub-card-title {
  font-size: var(--font-xl);
  color: var(--ink);
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  /* text-wrap:balance bricht bevorzugt an Wortgrenzen und verteilt die
     Zeilenlaenge gleichmaessig. hyphens:auto greift erst, wenn ein
     Einzelwort zu lang fuer die Spalte ist - hyphenate-limit-chars haelt
     den Bruch sauber: min. 12 Buchstaben im Wort, 4 vor, 4 nach dem Bruch. */
  text-wrap: balance;
  hyphens: auto;
  hyphenate-limit-chars: 12 4 4;
}

/* Beschreibungs-Wrapper fuer Inline-Edit (idf-inline-edit-host). */
.idf-hub-card-desc-wrap {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.idf-hub-card-desc-wrap .idf-hub-card-desc {
  flex: 1 1 auto;
  min-width: 0;
}

/* Beschreibungstext, max. 3 Zeilen - sonst sprengt eine lange
   Beschreibung die Karte. */
.idf-hub-card-desc {
  margin: 0;
  font-size: var(--font-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relax);
  color: var(--mid);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Placeholder-Optik fuer leere Beschreibung. */
.idf-hub-card-desc.is-empty {
  color: var(--soft);
  font-style: italic;
}

/* Loesch-Pille in der Karten-Head-Zeile - sitzt rechts neben dem
   Titel-Wrap. Shared .idf-list-delete-btn (idf-list-grid.css) ist
   normalerweise opacity:0 + pointer-events:none und wird erst bei
   .idf-list-row:hover sichtbar. Auf der Karte gibt es keine list-row -
   wir spiegeln das Verhalten ueber .idf-hub-card:hover. Optionaler
   Slot: Karten ohne den Button (sgds, dashboard) ignorieren die Regeln. */
.idf-hub-card .idf-list-delete-btn {
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0;
  pointer-events: none;
}
.idf-hub-card:hover .idf-list-delete-btn {
  opacity: 0.6;
  pointer-events: auto;
}
.idf-hub-card .idf-list-delete-btn:hover {
  opacity: 1;
}

/* ============================================================
   Ampel-Slot: Status als Hintergrund-Toenung der ganzen Karte.
   Gleiche Pastelltoene wie die Listen-Zeilen (idf-eisenhower-theme.css,
   Konsument setzt $useEisenhower): rot = q1-bg, gelb = q3-bg,
   gruen = q2-bg, leer = neutrales Weiss. Dokumentierte Status-
   Zuordnung, 1:1 aus .sg-bereich-card.is-*.
   ============================================================ */

.idf-hub-card.is-rot   { background: var(--eh-q1-bg); }
.idf-hub-card.is-gelb  { background: var(--eh-q3-bg); }
.idf-hub-card.is-gruen { background: var(--eh-q2-bg); }
.idf-hub-card.is-leer  { background: var(--white); }

/* ============================================================
   Karten-Body: zwei Spalten unter der Headline.
   Spalte 1 (Main): Beschreibung oben, Score unten buendig.
   Spalte 2 (Counters): unten buendig (align-self:flex-end).
   margin-top:auto drueckt den Body nach unten, damit Karten
   unterschiedlicher Hoehe visuell auf einer Linie schliessen.
   ============================================================ */

.idf-hub-card-body {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: auto;
  padding-top: 0;
  flex: 1 1 auto;
  min-height: 0;
}

.idf-hub-card-main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
  flex: 1 1 auto;
  min-width: 0;
}

/* Score-Zahl ("87 %"). 2.75rem hat kein Token-Pendant in der
   --font-*-Skala - Ist-Wert 1:1 aus .sg-bereich-score uebernommen. */
.idf-hub-card-score {
  font-size: 2.75rem;
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  color: var(--ink);
  letter-spacing: -0.02em;
}

/* Zaehler-Slot (ul): rechte Spalte, Zahlen rechtsbuendig. */
.idf-hub-card-counters {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  font-size: var(--font-md);
  line-height: var(--leading-snug);
  color: var(--ink);
  flex-shrink: 0;
  align-self: flex-end;
}

.idf-hub-card-counters li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.idf-hub-card-counters strong {
  font-weight: var(--weight-extrabold);
  color: var(--ink);
  min-width: 1.5em;
  text-align: right;
}

/* Zaehler-Farb-Modifier (dokumentierte Status-Zuordnung). */
.idf-hub-card-counters li.is-confirm strong { color: var(--confirm); }
.idf-hub-card-counters li.is-warn    strong { color: var(--yellow-text); }
.idf-hub-card-counters li.is-danger  strong { color: var(--primary); }

/* ============================================================
   Kompakte Variante - quadratische Kachel, 1:1 aus .ds-hub-card
   (Icon ueber Label gestapelt, beides mittig zentriert).
   ============================================================ */

.idf-hub-card.is-compact {
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  min-height: 0;
  aspect-ratio: 1 / 1;
  /* Border: rein Schwarz mit 25 % Opazitaet - kein blau-grauer Tint
     (var(--line) und rgba(17,24,39,…) haben beide einen leichten
     Farbton, der den User gestoert hat). Seit L5b als var(--shade-25)
     aus der Shade-Familie (idf-tokens v0.6.0), Wert unveraendert. */
  border-color: var(--shade-25);
  border-radius: var(--radius-md);
  text-align: center;
  transition: background var(--motion-base) ease,
              opacity var(--motion-base) ease;
}

/* Hover kompakt: nur heller Background analog .idf-list-row:hover -
   kein Lift, kein Schatten, kein Akzent-Border (siehe Datei-Header). */
.idf-hub-card.is-compact:not(.is-disabled):hover {
  background: var(--bg-hover);
}

/* Icon: fa-regular im Konventions-Mode (Outlined). 36 px,
   line-height:1 schluckt die Em-Box, die FontAwesome sonst aus dem
   Body-line-height aufblaeht. */
.idf-hub-card.is-compact .idf-hub-card-icon {
  font-size: 36px;
  line-height: 1;
}

.idf-hub-card.is-compact .idf-hub-card-icon i {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

/* Label mit .idf-headline-Optik (Extrabold + UPPERCASE), klein genug
   fuer die kompakte 130-px-Karte: --font-sm statt --font-base.
   text-wrap:balance haelt 2-Wort-Labels sauber auf 2 Zeilen. */
.idf-hub-card-label {
  font-size: var(--font-sm);
  color: var(--ink);
  font-weight: var(--weight-black);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: var(--leading-snug);
  text-align: center;
  overflow-wrap: break-word;
  text-wrap: balance;
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
}

/* ============================================================
   Disabled-Karte (facility L-B5/#227: Karte ohne Zielseite -
   sichtbar, aber nicht klickbar). Werte = dokumentierter
   Dashboard-Standard (.ds-hub-card.is-disabled): deutlich
   grayed-out (Opacity + Desaturation) + extra helle Border,
   damit sich der Disabled-Look sofort vom aktiven Set trennt.
   Ersetzt bei Umstellung facilitys schwaechere Eigenversion
   (nur opacity .55) - im Report empfohlene Aufloesung.
   ============================================================ */

.idf-hub-card.is-disabled {
  cursor: not-allowed;
  opacity: 0.30;
  filter: grayscale(1);
  /* Rein Schwarz, stark aufgehellt (wie die Compact-Border); seit L5b
     als var(--shade-12) aus der Shade-Familie, Wert unveraendert. */
  border-color: var(--shade-12);
  /* Kein pointer-events:none - sonst greift der title-Tooltip
     ("Modul X - kommt noch") nicht mehr. Die Karte wird als <span>
     ohne href gerendert, ist also nicht navigierbar; der
     not-allowed-Cursor erklaert das. Hover-Effekte sind ueber die
     :not(.is-disabled)-Gates der Hover-Regeln abgeschaltet. */
}