/* =========================================================================
   NIMBAVERO PRIMITIVES
   -------------------------------------------------------------------------
   Die Komponentenschicht über design-system/tokens.css. Sie wird von der
   Marketing-Website NICHT geladen — die Website braucht sie nicht, und
   ungenutztes CSS kostet dort Ladezeit. Sie ist die Datei, die das
   Kunden-Dashboard am ersten Tag importiert, damit Produkt und Website
   ohne Nacharbeit dieselbe Sprache sprechen.

   Erwartet: tokens.css davor geladen.

   Haltung, die hier eingebaut ist:
   - Ruhige Flächen, Linien statt Kästen, Zahlen groß und serifenlos.
   - Farbe trägt nie allein eine Aussage: jede Statusfarbe hat ein Wort
     daneben, jede Diagrammreihe eine Beschriftung.
   - Kennzahlen ohne Bezugsgröße sind verboten: `.nv-kpi` erzwingt eine
     Vergleichszeile, sonst steht eine Zahl ohne Bedeutung auf dem Schirm.
   - Kein Zustand ohne Leerzustand. `.nv-empty` gehört zu jeder Liste.
   ====================================================================== */

/* ---- Grundgerüst ------------------------------------------------------ */
.nv-app{
  display:grid; grid-template-columns:var(--nv-app-rail-w) minmax(0,1fr);
  min-height:100vh; background:var(--nv-surface); color:var(--nv-fg);
  font-family:var(--nv-font-sans);
}
.nv-rail{
  background:var(--nv-bg); border-right:1px solid var(--nv-rule);
  padding:var(--nv-space-6) var(--nv-space-4);
}
.nv-main{ padding:var(--nv-app-gutter); min-width:0 }
.nv-appbar{
  height:var(--nv-app-header-h); display:flex; align-items:center;
  justify-content:space-between; gap:var(--nv-space-5);
  padding:0 var(--nv-app-gutter);
}
@media(max-width:760px){
  .nv-app{ grid-template-columns:minmax(0,1fr) }
  .nv-rail{ border-right:0; border-bottom:1px solid var(--nv-rule) }
}

/* ---- Navigation ------------------------------------------------------- */
.nv-nav{ display:flex; flex-direction:column; gap:2px; list-style:none;
  margin:0; padding:0 }
.nv-nav a{
  display:flex; align-items:center; gap:var(--nv-space-3);
  min-height:var(--nv-control-h); padding:0 var(--nv-space-3);
  border-radius:var(--nv-radius-sm); font-size:var(--nv-text-body-sm);
  color:var(--nv-fg-muted); text-decoration:none;
  transition:background var(--nv-dur-base) var(--nv-ease),
             color var(--nv-dur-base) var(--nv-ease);
}
.nv-nav a:hover{ background:var(--nv-surface); color:var(--nv-fg) }
.nv-nav a[aria-current]{
  background:var(--nv-surface); color:var(--nv-fg); font-weight:700;
  box-shadow:inset 3px 0 0 var(--nv-accent);
}
.nv-nav-group{
  font-size:var(--nv-text-micro); letter-spacing:var(--nv-tracking-micro);
  text-transform:uppercase; font-weight:700; color:var(--nv-fg-subtle);
  margin:var(--nv-space-6) 0 var(--nv-space-2) var(--nv-space-3);
}

/* ---- Fläche ----------------------------------------------------------- */
.nv-panel{
  background:var(--nv-elevated); border:1px solid var(--nv-rule);
  border-radius:var(--nv-radius-lg); padding:var(--nv-tile-pad);
}
.nv-panel-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--nv-space-4); margin-bottom:var(--nv-space-5);
}
.nv-panel-head h2,.nv-panel-head h3{
  font-size:var(--nv-text-heading); letter-spacing:-.6px; margin:0;
}
.nv-grid{ display:grid; gap:var(--nv-app-gutter);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }

/* ---- Kennzahl: Zahl, Bezeichnung, Vergleich --------------------------- */
.nv-kpi{ display:flex; flex-direction:column; gap:var(--nv-space-2) }
.nv-kpi-label{
  font-size:var(--nv-text-micro); letter-spacing:var(--nv-tracking-micro);
  text-transform:uppercase; font-weight:700; color:var(--nv-fg-subtle);
}
.nv-kpi-value{
  font-size:clamp(32px,3.4vw,44px); font-weight:700; line-height:1.05;
  letter-spacing:-1.4px; font-variant-numeric:var(--nv-numeric);
}
.nv-kpi-compare{
  font-size:var(--nv-text-caption); color:var(--nv-fg-muted);
  font-variant-numeric:var(--nv-numeric);
}
.nv-kpi-compare b{ font-weight:700 }
.nv-kpi-compare[data-richtung="hoch"] b{ color:var(--nv-positive) }
.nv-kpi-compare[data-richtung="runter"] b{ color:var(--nv-negative) }
.nv-kpi-compare[data-richtung="gleich"] b{ color:var(--nv-fg-muted) }
/* Ein Pfeil zusätzlich zur Farbe — Farbe allein trägt die Aussage nicht. */
.nv-kpi-compare[data-richtung="hoch"] b::before{ content:'▲ ' }
.nv-kpi-compare[data-richtung="runter"] b::before{ content:'▼ ' }
.nv-kpi-compare[data-richtung="gleich"] b::before{ content:'– ' }

/* ---- Status ----------------------------------------------------------- */
.nv-status{
  display:inline-flex; align-items:center; gap:var(--nv-space-2);
  padding:4px var(--nv-space-3); border-radius:var(--nv-radius-pill);
  font-size:var(--nv-text-caption); font-weight:700; white-space:nowrap;
}
.nv-status::before{ content:''; width:7px; height:7px; border-radius:50%;
  background:currentColor; flex:none }
.nv-status[data-status="positiv"]{ color:var(--nv-positive); background:var(--nv-positive-tint) }
.nv-status[data-status="negativ"]{ color:var(--nv-negative); background:var(--nv-negative-tint) }
.nv-status[data-status="achtung"]{ color:var(--nv-caution);  background:var(--nv-caution-tint) }
.nv-status[data-status="info"]{    color:var(--nv-info);     background:var(--nv-info-tint) }
.nv-status[data-status="neutral"]{ color:var(--nv-neutral);  background:var(--nv-neutral-tint) }

/* ---- Hinweis ---------------------------------------------------------- */
.nv-notice{
  display:flex; gap:var(--nv-space-4); padding:var(--nv-space-4) var(--nv-space-5);
  border-left:3px solid currentColor; border-radius:0 var(--nv-radius-sm) var(--nv-radius-sm) 0;
  font-size:var(--nv-text-body-sm); line-height:var(--nv-leading-loose);
}
.nv-notice p{ margin:0; color:var(--nv-fg) }
.nv-notice[data-status="positiv"]{ color:var(--nv-positive); background:var(--nv-positive-tint) }
.nv-notice[data-status="negativ"]{ color:var(--nv-negative); background:var(--nv-negative-tint) }
.nv-notice[data-status="achtung"]{ color:var(--nv-caution);  background:var(--nv-caution-tint) }
.nv-notice[data-status="info"]{    color:var(--nv-info);     background:var(--nv-info-tint) }

/* ---- Schaltflächen: identisch zur Website ----------------------------- */
.nv-btn{
  display:inline-flex; align-items:center; justify-content:space-between;
  gap:var(--nv-space-5); min-height:var(--nv-control-h);
  padding:0 var(--nv-space-5); border:1px solid transparent;
  border-radius:var(--nv-radius-sm); font-size:var(--nv-text-body-sm);
  font-weight:600; font-family:inherit; cursor:pointer; text-decoration:none;
  transition:background var(--nv-dur-base) var(--nv-ease),
             border-color var(--nv-dur-base) var(--nv-ease);
}
.nv-btn-lg{ min-height:var(--nv-control-h-lg); padding:0 var(--nv-space-6) }
.nv-btn-primary{ background:var(--nv-accent); color:var(--nv-fg-on-accent) }
.nv-btn-primary:hover{ background:var(--nv-accent-hover) }
.nv-btn-secondary{ background:transparent; color:var(--nv-fg);
  border-color:var(--nv-rule-strong) }
.nv-btn-secondary:hover{ background:var(--nv-surface) }
.nv-btn-quiet{ background:transparent; color:var(--nv-fg-muted);
  padding:0 var(--nv-space-3) }
.nv-btn-quiet:hover{ color:var(--nv-fg) }
.nv-btn-danger{ background:transparent; color:var(--nv-negative);
  border-color:var(--nv-negative) }
.nv-btn[disabled],.nv-btn[aria-disabled="true"]{
  opacity:.5; cursor:not-allowed }

/* ---- Formular --------------------------------------------------------- */
.nv-field{ display:flex; flex-direction:column; gap:var(--nv-space-2) }
.nv-field label{ font-size:var(--nv-text-body-sm); font-weight:600 }
.nv-field .nv-hint{ font-size:var(--nv-text-caption); color:var(--nv-fg-muted) }
.nv-field input,.nv-field select,.nv-field textarea{
  min-height:var(--nv-control-h); padding:0 var(--nv-space-4);
  border:1px solid var(--nv-rule-strong); border-radius:var(--nv-radius-sm);
  background:var(--nv-bg); color:var(--nv-fg); font:inherit;
  font-size:var(--nv-text-body-sm);
}
.nv-field textarea{ padding:var(--nv-space-3) var(--nv-space-4);
  min-height:120px; line-height:var(--nv-leading-normal) }
.nv-field[data-status="negativ"] input,
.nv-field[data-status="negativ"] textarea{ border-color:var(--nv-negative) }
.nv-field[data-status="negativ"] .nv-hint{ color:var(--nv-negative);
  font-weight:600 }

/* ---- Tabelle ---------------------------------------------------------- */
.nv-table{ width:100%; border-collapse:collapse; font-size:var(--nv-text-body-sm) }
.nv-table th{
  text-align:left; font-size:var(--nv-text-micro); font-weight:700;
  letter-spacing:var(--nv-tracking-micro); text-transform:uppercase;
  color:var(--nv-fg-subtle); padding:var(--nv-space-3) var(--nv-space-4);
  border-bottom:1px solid var(--nv-rule); white-space:nowrap;
}
.nv-table td{
  padding:var(--nv-space-3) var(--nv-space-4); height:var(--nv-row-h);
  border-bottom:1px solid var(--nv-rule); vertical-align:middle;
}
.nv-table tbody tr:hover{ background:var(--nv-surface) }
.nv-table .nv-col-num{ text-align:right;
  font-variant-numeric:var(--nv-numeric) }
.nv-table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch }
/* Auf dem Telefon wird aus jeder Zeile eine Karte. */
@media(max-width:640px){
  .nv-table[data-mobil="karten"] thead{ position:absolute; width:1px; height:1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
  .nv-table[data-mobil="karten"] tr{ display:block; border:1px solid var(--nv-rule);
    border-radius:var(--nv-radius-lg); padding:var(--nv-space-3);
    margin-bottom:var(--nv-space-3) }
  .nv-table[data-mobil="karten"] td{ display:flex; justify-content:space-between;
    gap:var(--nv-space-4); border:0; height:auto; padding:var(--nv-space-2) 0 }
  .nv-table[data-mobil="karten"] td::before{ content:attr(data-spalte);
    font-size:var(--nv-text-micro); letter-spacing:var(--nv-tracking-micro);
    text-transform:uppercase; font-weight:700; color:var(--nv-fg-subtle) }
}

/* ---- Diagramm-Rahmen --------------------------------------------------
   Die Zeichnung liefert die Anwendung; hier steht nur, wie sie sitzt und
   welche Farben sie in welcher Reihenfolge nehmen darf.                  */
.nv-chart{ position:relative; min-height:180px }
.nv-chart-axis{ stroke:var(--nv-rule-strong); stroke-width:1 }
.nv-chart-grid{ stroke:var(--nv-rule); stroke-width:1 }
.nv-chart-track{ fill:var(--nv-series-track) }
.nv-series-1{ fill:var(--nv-series-1); stroke:var(--nv-series-1) }
.nv-series-2{ fill:var(--nv-series-2); stroke:var(--nv-series-2) }
.nv-series-3{ fill:var(--nv-series-3); stroke:var(--nv-series-3) }
.nv-series-4{ fill:var(--nv-series-4); stroke:var(--nv-series-4) }
.nv-series-5{ fill:var(--nv-series-5); stroke:var(--nv-series-5) }
.nv-series-6{ fill:var(--nv-series-6); stroke:var(--nv-series-6) }
.nv-series-highlight{ fill:var(--nv-series-highlight) }
.nv-legend{ display:flex; flex-wrap:wrap; gap:var(--nv-space-2) var(--nv-space-5);
  margin-top:var(--nv-space-4); font-size:var(--nv-text-caption);
  color:var(--nv-fg-muted) }
.nv-legend span{ display:inline-flex; align-items:center; gap:var(--nv-space-2) }
.nv-legend i{ width:10px; height:10px; border-radius:2px; flex:none }

/* ---- Leerzustand ------------------------------------------------------ */
.nv-empty{
  border:1px dashed var(--nv-rule-strong); border-radius:var(--nv-radius-lg);
  padding:var(--nv-space-8) var(--nv-space-6); text-align:center;
  color:var(--nv-fg-muted); font-size:var(--nv-text-body-sm);
  line-height:var(--nv-leading-loose);
}
.nv-empty strong{ display:block; color:var(--nv-fg);
  font-size:var(--nv-text-heading); margin-bottom:var(--nv-space-2) }

/* ---- Ladezustand ------------------------------------------------------ */
.nv-skeleton{ background:var(--nv-surface-2); border-radius:var(--nv-radius-sm);
  height:1em }
@media(prefers-reduced-motion:no-preference){
  .nv-skeleton{ animation:nv-pulse 1.4s var(--nv-ease) infinite }
  @keyframes nv-pulse{ 50%{ opacity:.55 } }
}

/* ---- Zeitstempel: jede Zahl sagt, wann sie gemessen wurde -------------- */
.nv-asof{ font-size:var(--nv-text-micro); color:var(--nv-fg-subtle);
  font-variant-numeric:var(--nv-numeric) }