/* ============================================================================
   sh-skin-kpi — Odoo-Zielbild „KPI-Kacheln" (Mockup Sektion 4, .sho-kpi*).
   ADDITIVE Politur-Schicht. MUSS ZULETZT laden (nach sh-dashboard-friendly.css,
   das seinerseits nach sh-odoo-theme.css lädt) — sonst greifen die hier
   gesetzten Hero-/Surface-Werte nicht über die Friendly-Defaults.

   Bildet ab (echter Render: dashboard-widget-registry.js kpiCard(), Z.94-102):
     .dw-kpi-row  →  Container der KPI-Zeile
       .dw-kpi-item .dw-kpi--{highlight|warn|ok|danger|info}
         .dw-kpi-value / .dw-kpi-label / .dw-kpi-meta
   KEIN .dw-kpi-card — toter Kontrakt (siehe Memory dashboard-kpi-class-contract).

   Mockup-Quelle (.sho-kpi, Z.158-167):
     - normal: weiße Kachel + Haarlinie + Radius + Klick-Affordanz + Hover-Schatten
     - .sho-kpi--hero: Markenrot-Verlauf 135°, weißer Text, randlos
     - .val 26px/700 · .lab 13px/muted · .delta 12px/600
   Hero ohne eigene DOM-Klasse → abgebildet auf die ERSTE highlight-Kachel der
   Zeile (`.dw-kpi-row > .dw-kpi-item:first-child.dw-kpi--highlight`), damit pro
   Zeile genau EINE Hero-Kachel entsteht (mehrere highlight möglich).

   Korrigiert zugleich den Dark-Mode-Defekt des Friendly-Layers: dort sind
   --dbf-tile-bg / --dbf-ink / Kachel-BG hart hell ohne [data-theme="dark"].

   Markenrot diszipliniert: NUR die Hero-Kachel trägt Markenrot-Fläche.
   Layout unverändert (flex/gap bleibt); nur Farbe/Rahmen/Radius/Schatten/Typo.
   ============================================================================ */

/* ── Zeile: nur sanfte gap-Angleichung an Mockup (--sh-o-s3); Layout=flex bleibt ── */
#mainContent .dw-kpi-row {
  gap: var(--sh-o-s3, 12px);
}

/* ── Normale Kachel: reinweiß + Haarlinie + Radius + ruhiger Schatten (Mockup .sho-kpi) ──
   Friendly-Layer füllt --dbf-tile-bg(#f8fafc); Mockup will Surface(#fff).        */
#mainContent .dw-kpi-row .dw-kpi-item {
  background: var(--sh-o-surface, #fff);
  border: 1px solid var(--sh-o-border, #e6e8ec);
  border-radius: var(--sh-o-r-md, 10px);
  box-shadow: var(--sh-o-sh-1, 0 1px 2px rgba(16, 24, 40, .06));
  cursor: pointer;                 /* Klick-Affordanz (Mockup; DOM hat kein <a>) */
}
/* Hover = ruhiger Mockup-Hover (sh-o-sh-2), dezenter Lift; dämpft Friendly-Sprung */
#mainContent .dw-kpi-row .dw-kpi-item:hover {
  box-shadow: var(--sh-o-sh-2, 0 6px 18px rgba(16, 24, 40, .10));
  transform: translateY(-1px);
  border-color: var(--sh-o-border-strong, #d6dae0);
}

/* ── Typo nach Mockup (val 26px/700 · lab 13px/muted · delta 12px/600) ───────── */
#mainContent .dw-kpi-row .dw-kpi-item .dw-kpi-value {
  font-size: 1.55rem;              /* ≈26px Mockup (Friendly: 1.42rem) */
  font-weight: 700;                /* Mockup 700 (Friendly: 800) */
  color: var(--sh-o-text, #1f2329);
}
#mainContent .dw-kpi-row .dw-kpi-item .dw-kpi-label {
  font-size: .8rem;
  color: var(--sh-o-text-muted, #6b7280);
}
#mainContent .dw-kpi-row .dw-kpi-item .dw-kpi-meta {
  font-size: .72rem;
  font-weight: 600;
  color: var(--sh-o-text-faint, #9aa1ac);    /* neutrale Delta-Optik (kein up/down im DOM) */
}

/* ════════════════════════════════════════════════════════════════════════
   HERO — erste highlight-Kachel der Zeile (Mockup .sho-kpi--hero)
   Markenrot-Verlauf 135°, weißer Text, randlos. Überschreibt Friendly-Akzent-
   streifen + dunkle Wertfarbe, die den Verlauf-Untergrund nicht kennen.
   ════════════════════════════════════════════════════════════════════════ */
#mainContent .dw-kpi-row > .dw-kpi-item:first-child.dw-kpi--highlight {
  background: linear-gradient(135deg, var(--sh-brand, #E73D25), var(--sh-brand-700, #C5331E));
  border-color: transparent;
  border-left-color: transparent;             /* Friendly-Akzentstreifen neutralisieren */
  box-shadow: var(--sh-o-sh-2, 0 6px 18px rgba(16, 24, 40, .10));
  color: #fff;
}
#mainContent .dw-kpi-row > .dw-kpi-item:first-child.dw-kpi--highlight:hover {
  box-shadow: var(--sh-o-sh-2, 0 6px 18px rgba(16, 24, 40, .10));
  border-color: transparent;
  transform: translateY(-1px);
}
#mainContent .dw-kpi-row > .dw-kpi-item:first-child.dw-kpi--highlight .dw-kpi-value {
  color: #fff;
}
#mainContent .dw-kpi-row > .dw-kpi-item:first-child.dw-kpi--highlight .dw-kpi-label,
#mainContent .dw-kpi-row > .dw-kpi-item:first-child.dw-kpi--highlight .dw-kpi-meta {
  color: rgba(255, 255, 255, .85);
}
/* Info-Icon der Hero-Kachel mitführen (echtes Markup: .elmetic-info-icon-inner = "i"-Badge,
   info-icon.js Z.25-26) — sonst zu dunkel auf Rot. Nur Farbgebung, Form/Größe bleibt. */
#mainContent .dw-kpi-row > .dw-kpi-item:first-child.dw-kpi--highlight .dw-kpi-label .elmetic-info-icon-inner {
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
}

/* ════════════════════════════════════════════════════════════════════════
   DARK MODE — Friendly-Layer liefert hier NICHTS (hart helle Hex) → hier nötig.
   Invertierende ELMETIC-Tokens nutzen; Hero bleibt Markenrot (trägt auch dunkel).
   ════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] #mainContent .dw-kpi-row .dw-kpi-item {
  background: var(--elmetic-card, #1E1A16);
  border-color: var(--elmetic-border, #2E2822);
  box-shadow: var(--sh-o-sh-1, 0 1px 2px rgba(0, 0, 0, .35));
}
[data-theme="dark"] #mainContent .dw-kpi-row .dw-kpi-item:hover {
  box-shadow: var(--sh-o-sh-2, 0 8px 22px rgba(0, 0, 0, .45));
  border-color: var(--elmetic-border-strong, #3A332B);
}
[data-theme="dark"] #mainContent .dw-kpi-row .dw-kpi-item .dw-kpi-value {
  color: var(--elmetic-text, #F6F1EC);
}
[data-theme="dark"] #mainContent .dw-kpi-row .dw-kpi-item .dw-kpi-label {
  color: var(--elmetic-muted-2, #B3A99E);
}
[data-theme="dark"] #mainContent .dw-kpi-row .dw-kpi-item .dw-kpi-meta {
  color: var(--elmetic-muted, #8C8175);
}
/* Status-Tönungen des Friendly-Layers (warn/danger = hart helle Verläufe) dunkel neutralisieren,
   damit kein heller Block im Dark-UI steht; Status bleibt über den Akzentstreifen erkennbar. */
[data-theme="dark"] #mainContent .dw-kpi-row .dw-kpi-item.dw-kpi--warn,
[data-theme="dark"] #mainContent .dw-kpi-row .dw-kpi-item.dw-kpi--danger {
  background: var(--elmetic-card, #1E1A16);
  border-color: var(--elmetic-border, #2E2822);
}
[data-theme="dark"] #mainContent .dw-kpi-row .dw-kpi-item.dw-kpi--warn .dw-kpi-value {
  color: var(--warn, #E5A33C);
}
[data-theme="dark"] #mainContent .dw-kpi-row .dw-kpi-item.dw-kpi--danger .dw-kpi-value {
  color: var(--sh-o-danger, #e5484d);
}
/* Hero dunkel: Verlauf + weißer Text bleiben (Markenrot trägt auf dunklem Grund) */
[data-theme="dark"] #mainContent .dw-kpi-row > .dw-kpi-item:first-child.dw-kpi--highlight {
  background: linear-gradient(135deg, var(--sh-brand, #E73D25), var(--sh-brand-700, #C5331E));
  border-color: transparent;
}
[data-theme="dark"] #mainContent .dw-kpi-row > .dw-kpi-item:first-child.dw-kpi--highlight .dw-kpi-value {
  color: #fff;
}
[data-theme="dark"] #mainContent .dw-kpi-row > .dw-kpi-item:first-child.dw-kpi--highlight .dw-kpi-label,
[data-theme="dark"] #mainContent .dw-kpi-row > .dw-kpi-item:first-child.dw-kpi--highlight .dw-kpi-meta {
  color: rgba(255, 255, 255, .85);
}