/**
 * dashboard.css — Modul-spezifisches CSS für das Dashboard (Nexus)
 *
 * Karten- und Block-Pattern:
 *   - Hub-Kacheln      -> Shared-Block blocks/hub-card ($useHubCard,
 *                        `.idf-hub.is-compact` + `.idf-hub-card.is-compact`,
 *                        H3/#199) - hier lebt nur noch der Spurbreiten-
 *                        Override der Favoriten-Zeile (.ds-fav-grid)
 *   - Panel-Empty-States -> Shared-Block blocks/empty-state
 *                        ($useEmptyState, `.idf-empty-state.is-compact`,
 *                        H1/#198) - hier nur der is-pending-Kontext-Override
 *   - Aufgaben-Panel   → analog `.sg-bgready-block` +
 *                        `.sg-bgready-eintrag` (Block-Card mit
 *                        Title-Header, klickbare Zeilen mit
 *                        Status-Dot links)
 *
 * Tokens, Buttons, Header, Footer, Sidebar kommen aus _shared/.
 * Hier nur die Hub-Layout-Klassen.
 */

/* ============================================================
   Page-Layout — vollflächig (kein max-width-Constraint)
   Dashboard ist die Einstiegsseite und soll auf großen Monitoren
   die volle Bildschirmbreite nutzen — anders als `.sg-main`, das
   bei 1280 px deckelt, weil die SafeGuard-Listen ab da unleserlich
   würden. Hier ist mehr Breite = mehr Kacheln pro Zeile = besseres
   Hub-Erlebnis.
   ============================================================ */

.ds-hub {
  width: 100%;
  margin: 0;
  padding: var(--space-8) var(--space-8) var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

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

/* Panel-Zeile (Startseite): vier gleich breite persönliche Panels
   nebeneinander: Meine Aufgaben · Meine Protokolle · Meine Aufträge ·
   Offene Bestellungen. Bei < 1280 px zwei Spalten, bei < 700 px gestapelt.
   align-items:start hält unterschiedlich hohe Panels (Aufgaben hat einen
   Footer-Button) oben bündig. min-width:0 an den Kindern gegen Grid-Overflow.
   Die volle App-Kachel-Wand lebt im Reiter „Apps" (apps.php), nicht mehr hier. */
.ds-panels-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.ds-panels-row > .ds-tasks-block {
  min-width: 0;
}

@media (max-width: 1280px) {
  .ds-panels-row {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
}

@media (max-width: 700px) {
  .ds-panels-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   App-Gruppen (linke Spalte) — Operativ / Inventar / Sicherheit /
   Stammdaten / Einstellungen. Jede Gruppe ist eine `<section>` mit
   Headline + Karten-Grid.
   ============================================================ */

.ds-hub-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.ds-hub-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Gruppen-Headline trägt im Markup zusätzlich `.idf-headline`
   (Extrabold + UPPERCASE + letter-spacing aus dem Shared-Style).
   Hier nur Größe + Farbe: kleiner als der Card-Label, dezenter
   in `--mid` — die Headline soll die Gruppe markieren, nicht
   mit den Kacheln um Aufmerksamkeit kämpfen. */
.ds-hub-group-title {
  margin: 0;
  font-size: var(--font-md);
  color: var(--mid);
  line-height: var(--leading-snug);
}

/* ============================================================
   Karten-Grids + Kacheln kommen aus dem Shared-Block blocks/hub-card
   ($useHubCard, H3/#199): `.idf-hub.is-compact` (Grid) und
   `.idf-hub-card.is-compact` (Kachel inkl. is-disabled). Hier bleibt
   nur der erlaubte Spurbreiten-Override (§7.6) der Favoriten-Zeile.
   ============================================================ */

/* Favoriten-Zeile (Startseite): feste 130-160-px-Spuren packen die
   Kacheln von links als "Zeile", statt die wenigen Favoriten auf volle
   Spaltenbreite zu strecken (`minmax(130px, 1fr)` des Shared-Grids
   wuerde 5 Kacheln riesig aufblasen). Dreifach-Selektor, damit der
   Override die Shared-Regel `.idf-hub.is-compact` sicher schlaegt. */
.idf-hub.is-compact.ds-fav-grid {
  grid-template-columns: repeat(auto-fill, minmax(130px, 160px));
}

@media (max-width: 400px) {
  /* Einspaltig wie das Shared-Grid - eigene Regel noetig, weil der
     Spurbreiten-Override oben spezifischer ist als die Shared-Media-Regel. */
  .idf-hub.is-compact.ds-fav-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Aufgaben-Panel — analog `.sg-bgready-block` + `.sg-bgready-eintrag`
   ============================================================ */

.ds-tasks-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

/* Block-Title in derselben Familie wie die Hub-Karten-Labels:
   Icon links (ink, 36 px, line-height:1 — gleiche Korrektur wie auf
   den Hub-Karten), Titel daneben mit `.idf-headline`-Optik (Extrabold
   UPPERCASE). Spiegelt die Kachel-Optik des Shared-Blocks hub-card
   (.idf-hub-card-icon / -label). */
.ds-tasks-block-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  color: var(--ink);
}

.ds-tasks-block-title > i:first-child {
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
  flex-shrink: 0;
}

/* Title-Text trägt im Markup bereits `.idf-headline` — die Klasse
   bringt font-weight:black, UPPERCASE, letter-spacing. Hier setzen
   wir nur Größe + Flex-Verhalten, kein doppelter Typografie-Override. */
.ds-tasks-block-title span.idf-headline {
  font-size: var(--font-xl);
  line-height: var(--leading-snug);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-tasks-all {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.ds-tasks-all:hover {
  text-decoration: underline;
}

.ds-tasks-all i {
  font-size: var(--font-xs);
}

.ds-tasks-body {
  display: flex;
  flex-direction: column;
}

/* Einzelne Aufgaben-Zeile.
   Interaktion: Doppelklick → Modal öffnen (in dashboard.js).
   `user-select: none` damit der Doppelklick nicht den Titel-Text
   markiert. Cursor=pointer signalisiert Klickbarkeit. */
.ds-tasks-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-xs);
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: background var(--motion-base, 120ms) ease;
}

.ds-tasks-row:last-child {
  border-bottom: 0;
}

.ds-tasks-row:hover {
  background: var(--bg-hover);
}

/* Erledigt-Pille vor der Zeile — Shared-Optik aus
   `_shared/functions/list-view/grid-css/idf-list-grid.css` (.idf-list-done-pill).
   Stufen-Opazität analog Aufgaben-Liste: 0.2 idle, 0.6 row-hover,
   1 direkter Pillen-Hover oder aktiv. */
.ds-tasks-row:hover .idf-list-done-pill {
  opacity: 0.6;
}
.ds-tasks-row .idf-list-done-pill:hover {
  opacity: 1;
}

/* Titel-Stack (Titel + Meta in einer Spalte). */
.ds-tasks-row-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ds-tasks-row-titel {
  font-size: var(--font-base);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-tasks-row-meta {
  font-size: var(--font-xs);
  color: var(--mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-tasks-row-meta.is-overdue {
  color: var(--primary);
  font-weight: var(--weight-semi);
}

.ds-tasks-row-meta.is-soon {
  color: var(--yellow-text);
  font-weight: var(--weight-semi);
}

/* Loading-State innerhalb des Bodies (Skeleton im PHP-Markup).
   Die Empty-/Fehler-States der Panels kommen seit L4 aus dem
   Shared-Block blocks/empty-state ($useEmptyState, H1/#198):
   dashboard.js rendert `.idf-empty-state.is-compact` (+ is-good). */
.ds-tasks-loading {
  margin: 0;
  padding: var(--space-6) var(--space-3);
  color: var(--mid);
  font-size: var(--font-base);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

/* Footer-Reihe mit „+ Neue Aufgabe"-Button. Der Button selbst kommt
   seit L5 (Audit #201, L-E7) aus dem Shared-Block blocks/inline-add
   ($useInlineAdd, .idf-inline-add + .idf-inline-add-btn, statischer
   Klassen-Konsum wie gantt #148) - kein eigener .ds-tasks-new-Skin
   mehr. Klick öffnet `IDF.aufgaben.openAufgabe(null)` (Create-Modus,
   Wiring in dashboard.js/wireNewButton via id dsTasksNew). */
.ds-tasks-footer {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

/* Layout-Rest (§7.4, kein Skin): das Wrapper-Padding des Shared-Blocks
   (12px 32px 20px) ist fuer Listen-Enden gedacht - im schmalen Panel
   polstert .ds-tasks-footer bereits selbst, daher hier auf 0. */
.ds-tasks-footer .idf-inline-add {
  padding: 0;
}

/* ============================================================
   Aufträge-Panel (Pending-Placeholder)
   Spiegelt `.ds-tasks-block`-Familie, ist aber bis zum Live-Gang
   des auftraege-Moduls auf „kommt noch" gedämpft — gleiche Werte
   wie disabled Hub-Kacheln (`opacity: 0.30` + `grayscale(1)` +
   helle Border-Color). Sobald das Modul live ist, kann
   `is-pending` weg + es kommt eine echte Liste.
   ============================================================ */
.ds-orders-block.is-pending {
  opacity: 0.30;
  filter: grayscale(1);
  border-color: var(--shade-12);
}

/* Kontext-Override auf den Shared-Empty-State (bleibt laut
   empty-state-README bewusst im Modul). */
.ds-orders-block.is-pending .idf-empty-state p {
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mid);
}

/* ============================================================
   Greeting-Span im App-Header (extraLeft-Slot).
   ============================================================ */

.ds-greeting-name {
  font-size: var(--font-xxl);
  font-weight: var(--weight-bold, 700);
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: var(--leading-snug);
  margin-left: -0.4em;
}

/* ============================================================
   Agenten-Budget-Panel — 3-Spalten-Grid aus Foto-Kacheln: das Foto
   fuellt die volle Kachelbreite, das Budget sitzt als Caption darunter
   (die Kachel ist damit bewusst nicht quadratisch). Fuer eine Full-
   Bleed-Bildkachel gibt es keinen Shared-Baustein (hub-card ist
   zentriert/quadratisch mit Icon-Slot), daher eine schlanke Modul-
   Kachel — Layout + Token-Optik. Wiederverwendet: Foto-URL
   (IDF.fileUpload.assetUrl), IDF.util.formatEuro, blocks/empty-state.
   ============================================================ */

.ds-agents-grid {
  display: grid;
  /* minmax(0, 1fr) statt 1fr: 1fr = minmax(auto, 1fr), dessen auto-Minimum
     = min-content (hier die Bildbreite) blaeht die Spalten sonst auf die
     volle Dateigroesse auf. Mit 0 als Minimum bleibt die Kachel = 1/3 der
     Panel-Breite und das Foto passt sich der Kachel an. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.ds-agent-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
  cursor: pointer;
  transition: background var(--motion-base) ease,
              border-color var(--motion-base) ease;
}

/* Hover analog Listen/Karten: ruhige Zustandsaenderung, kein Lift. */
.ds-agent-card:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
}

/* Foto fuellt die volle Kachelbreite (quadratischer Ausschnitt via cover).
   max-width:100% deckelt das Bild zusaetzlich auf die Kachel, damit die
   intrinsische Dateigroesse die Kachel nie aufdrueckt. */
.ds-agent-foto,
.ds-agent-foto-empty {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

/* Foto-Fallback (Agent ohne Bild): gleiche Flaeche, Roboter-Icon. */
.ds-agent-foto-empty {
  display: grid;
  place-items: center;
  background: var(--neutral-bg);
  color: var(--mid);
  font-size: 28px;
}

/* Werte unter dem Foto: zwei Zeilen Direkt (eigene Tokens) + Indirekt
   (ausgeloeste Dienste, z.B. Higgsfield), Label links, Betrag rechts. */
.ds-agent-budgets {
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ds-agent-budget-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--font-xs2);
}

.ds-agent-budget-lbl {
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ds-agent-budget-val {
  font-weight: var(--weight-bold);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 0,00 € (keine Kosten dieser Art) dezenter. */
.ds-agent-budget-val.is-zero {
  font-weight: var(--weight-regular);
  color: var(--mid);
}