/* ============================================================================
   Tenant-Dashboard — Startseiten-Layout (`reason`-Designsprache).
   Tokens only (tokens.css via base.css). Farb-Bausteine für AP-Badges/Status-Dot
   (.ap/.ap-h/.ap-m/.ap-n/.ap-none, .act-dot.s-*) leben bereits in shared/ui/risk.css
   (dort tokenisiert, s. tokens.css --ap-… und --act-…) — diese Datei fügt nur die
   NEUEN Dashboard-Layoutklassen hinzu und referenziert die risk.css-Klassen per
   Name weiter (risk.css muss auf jeder Seite, die dashboard.css lädt, mitgeladen
   werden — siehe index.html). Kein Farb-Drift: keine eigenen Hex-Werte hier.
   ============================================================================ */
@import "./base.css";

/* --- Wurzel + Kontext-Kopf ------------------------------------------------- */
.dash { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 22px 40px; }

.dash-hero { padding: 32px 0 22px; }
.dash-hero .eyebrow {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-mint); margin: 0 0 10px;
}
.dash-hero h2 {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-hero);
  line-height: 1.15; letter-spacing: -.01em; color: var(--brand-navy); margin: 0 0 10px;
}
.dash-hero h2 .mint { color: var(--brand-mint); }
.dash-hero .lede { color: var(--text-muted); font-size: 14px; line-height: 1.5; margin: 0; }
.dash-hero .lede b { color: var(--text); }
.dash-hero .badge { margin-left: 2px; }

/* --- Section-Gerüst (geteilt: KPI-Umfeld, Dokumente, Methodik) ------------- */
.sec { margin: 26px 0; }
.sec-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.sec-head h3 { font-size: var(--fs-h2); margin: 0; color: var(--text); font-weight: 700; }
.sec-head .note { font-size: var(--fs-xs); color: var(--text-muted); }

/* --- Leerzustände / Fallback-Hinweis --------------------------------------- */
.hint { color: var(--text-muted); font-size: var(--fs-xs); }
.hint.stats-unavailable {
  padding: 14px 16px; background: var(--bg-panel); border: 1px solid var(--border-soft);
  border-radius: var(--radius); margin: 18px 0;
}

/* --- KPI-Kacheln ------------------------------------------------------------ */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 8px 0 6px; }
.kpi {
  background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px;
}
.kpi-num { font: 700 28px/1.1 var(--font-display); color: var(--brand-navy); font-variant-numeric: tabular-nums; }
.kpi-lbl { font-size: var(--fs-xs); color: var(--text-muted); }
.kpi.warn { border-color: var(--ap-m); }
.kpi.warn .kpi-num { color: var(--ap-m); }
.kpi.danger { border-color: var(--ap-h); }
.kpi.danger .kpi-num { color: var(--ap-h); }

/* --- Zwei-Spalten: Risiko + Terminverfolgung (links) / Gesundheit (rechts) - */
.dash-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 820px) { .dash-cols { grid-template-columns: 1fr; } }

/* --- Risikoübersicht --------------------------------------------------------
   Balkensegmente nutzen bewusst dieselben Klassen wie die AP-Badges in risk.css
   (.ap-h/.ap-m/.ap-n/.ap-none setzen dort bereits background: var(--ap-*)); hier
   nur der Balken-Container + Legende (Badges selbst kommen aus risk.css .ap). */
.ap-bars { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--border-soft); }
.ap-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* --- Terminverfolgung -------------------------------------------------------- */
.od-list { display: flex; flex-direction: column; }
.od-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 4px;
  border-bottom: 1px solid var(--border-soft); font-size: var(--fs-sm);
}
.od-row .od-name { flex: 1 1 auto; font-weight: 600; color: var(--text); }
.od-row .od-doc { color: var(--text-muted); font-size: var(--fs-xs); }
.od-row .od-resp { width: 110px; color: var(--text-muted); font-size: var(--fs-xs); white-space: nowrap; }
.od-row .od-date { width: 90px; text-align: right; font: 700 var(--fs-xs) var(--font-mono); color: var(--warn); }

/* --- Gesundheit / Datenqualität ---------------------------------------------- */
.health-list { display: flex; flex-direction: column; }
.health-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 4px;
  border-bottom: 1px solid var(--border-soft);
}
.health-num { min-width: 26px; text-align: right; font: 700 var(--fs-h2) var(--font-mono); color: var(--text); }
.health-lbl { font-size: var(--fs-xs); color: var(--text-muted); }
.health-row.warn .health-num { color: var(--warn); }

/* --- Dokumentbereich: Aktionsleiste + Karten-Grid ---------------------------- */
.doc-actions-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.doc-actions-bar .sep { display: inline-block; width: 1px; height: 20px; background: var(--border-soft); margin: 0 2px; vertical-align: middle; }
#docmsg { font-size: var(--fs-xs); margin-left: 2px; }
#docmsg.err { color: var(--danger); }
#docmsg.ok { color: var(--text-muted); }

.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.doc-card {
  display: flex; flex-direction: column; gap: 6px; background: #fff;
  border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 14px 16px;
  box-shadow: var(--shadow); transition: border-color .1s, box-shadow .1s;
}
.doc-card:hover { border-color: var(--brand-mint); box-shadow: var(--shadow-lg); }
.doc-card > a { color: var(--text); font-weight: 700; font-size: 15px; text-decoration: none; }
.doc-card > a:hover { color: var(--brand-mint); }
.doc-meta { font-size: var(--fs-xs); color: var(--text-muted); }
.doc-mini { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--text-muted); }
.doc-mini .ap { font-size: 10px; padding: 1px 6px; margin-left: 0; }
.doc-actions { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }

/* --- Leerzustand (kein Dokument) — führt statt dürrem Hinweis ---------------- */
.doc-empty {
  text-align: center; padding: 40px 24px; background: var(--bg-panel);
  border: 1px dashed var(--border-soft); border-radius: var(--radius);
}
.doc-empty h4 { font: 600 var(--fs-h1) var(--font-display); color: var(--brand-navy); margin: 0 0 8px; }
.doc-empty p { color: var(--text-muted); font-size: 14px; margin: 0 0 16px; }

/* --- „Neue FMEA"-Dialog (im geteilten .dc-modal aus risk.css) --------------- */
.dc-modal:has(.nd-form) { max-width: 460px; }
.nd-form { display: flex; flex-direction: column; }
.nd-form label { font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); margin: 12px 0 4px; }
.nd-form input, .nd-form select { width: 100%; padding: 8px 10px; }
.nd-form .primary { margin-top: 18px; }
.nd-form .nd-or { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; }
.nd-form .nd-or::before, .nd-form .nd-or::after { content: ""; flex: 1; height: 1px; background: var(--border-soft); }
.nd-form .nd-or span { font-size: var(--fs-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; }
.nd-hint { font-size: var(--fs-xs); color: var(--text-faint); margin: 8px 0 0; }
.nd-msg { font-size: var(--fs-sm); margin-top: 12px; min-height: 1em; color: var(--text-muted); }
.nd-msg.err { color: var(--danger); }

/* --- Team (optional, Task 6): Mitglieder + Rollen ---------------------------- */
.team-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.team-table th {
  text-align: left; font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted);
  padding: 6px 10px; border-bottom: 1px solid var(--border-soft);
}
.team-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-soft); color: var(--text); }
.team-table tbody tr:last-child td { border-bottom: none; }

/* --- Methodik & Referenz (einklappbar, default zu) --------------------------- */
.methodik {
  margin: 30px 0 10px; border: 1px solid var(--border-soft); border-radius: var(--radius);
  background: #fff; padding: 14px 18px; box-shadow: var(--shadow);
}
.methodik summary {
  cursor: pointer; font: 700 var(--fs-h2) var(--font-ui); color: var(--brand-navy);
  padding: 4px 0; list-style: none;
}
.methodik summary::-webkit-details-marker { display: none; }
.methodik summary::before { content: "▸ "; color: var(--brand-mint); }
.methodik[open] summary::before { content: "▾ "; }
.methodik[open] summary { margin-bottom: 10px; }

/* 7-Schritte-Prozess (aus dem alten index.html übernommen) */
.steps { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.step {
  position: relative; text-align: center; padding: 14px 6px 12px; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--border-soft); opacity: .55;
}
.step.on { opacity: 1; border-color: var(--brand-grey-2); box-shadow: var(--shadow); }
.step.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--brand-mint); border-radius: 2px; }
.step img { height: 34px; width: auto; }
.step .sn { display: block; font-size: 10px; font-weight: 800; color: var(--brand-grey); letter-spacing: .05em; margin-bottom: 4px; }
.step .sl { display: block; font-size: 10.5px; color: var(--text); margin-top: 6px; line-height: 1.25; }
@media (max-width: 760px) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* Verb-Schaustück (aus dem alten index.html übernommen) */
.verbs { display: flex; flex-wrap: wrap; gap: 8px; }
.verb {
  display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border-soft);
  border-radius: 999px; padding: 5px 13px 5px 5px; box-shadow: var(--shadow);
}
.verb img { height: 24px; width: 24px; border-radius: 50%; }
.verb b { font-size: var(--fs-sm); color: var(--col-function); font-weight: 700; }
.verb span { font-size: 10.5px; color: var(--text-muted); }

/* --- Fußzeile (aus dem alten index.html übernommen) -------------------------- */
.pagefoot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 22px; margin-top: 18px; border-top: 1px solid var(--border-soft);
  font-size: var(--fs-xs); color: var(--text-muted); background: #fff;
}
.pagefoot .sig { font-family: var(--font-display); color: var(--brand-navy); font-weight: 600; }
.pagefoot .spacer { flex: 1; }

/* Body darf nie horizontal scrollen — breite Inhalte scrollen in ihrem eigenen Container. */
body { overflow-x: hidden; }

/* Sticky-Footer-Layout: #app füllt mindestens die Viewport-Höhe, der Inhalt (.dash)
   dehnt sich, der Footer sitzt unten — sonst zeigt sich bei kurzen Seiten ein grauer
   Leerstreifen (body-Hintergrund) unter dem Footer. */
#app { min-height: 100vh; display: flex; flex-direction: column; }
.dash { flex: 1 0 auto; }
.pagefoot { flex-shrink: 0; }