/* =============================================================================
   sh-polish-2026-06.css — Additive Politur-Schicht (Track 3, 2026-06-15)
   -----------------------------------------------------------------------------
   ZWECK: Sichtbare, edle Veredelung OHNE Umbau der 124 bestehenden CSS-Dateien.
   PRINZIP: rein additiv, ZULETZT geladen, nutzt NUR bestehende Design-Tokens
   (--sh-brand / --elmetic-* / --color-*) → passt sich Light + Dark automatisch an.
   Adressiert die objektiven Audit-Befunde (2026-06-15): uneinheitliche Fokus-Ringe
   (3 Muster), 5 Spinner-Varianten, inkonsistente Empty-States, fehlende Hover-/
   Transition-Politur. KEIN aggressives !important (nur Fokus-Ring, a11y-kritisch).
   Reversibel: Link aus index.html entfernen → exakt der alte Zustand.
   ============================================================================= */

/* --- 1) Weiche Übergänge auf interaktiven Elementen (premium feel) ----------- */
#mainContent .btn,
#mainContent button:not(.sh-no-anim),
#mainContent .sh-nav__item,
#mainContent a.nav-link,
#mainContent .kpi-card,
#mainContent .dw-kpi-item,
#mainContent .card,
#mainContent .data-table tbody tr {
  transition: background-color .15s ease, border-color .15s ease,
              box-shadow .18s ease, transform .12s ease, color .15s ease;
}

/* --- 2) Einheitlicher, barrierefreier Fokus-Ring (ersetzt 3 Alt-Muster) ----- */
/*    :focus-visible = nur Tastatur-Fokus → kein Ring bei Maus-Klick.            */
#mainContent a:focus-visible,
#mainContent button:focus-visible,
#mainContent .btn:focus-visible,
#mainContent input:focus-visible,
#mainContent select:focus-visible,
#mainContent textarea:focus-visible,
#mainContent [tabindex]:focus-visible {
  outline: 2px solid var(--sh-brand, var(--elmetic-red, #E73D25)) !important;
  outline-offset: 2px;
  border-radius: 6px;
}

/* --- 3) Buttons: dezenter Hover-Lift + sattere Tiefe ------------------------- */
#mainContent .btn:hover,
#mainContent button.sh-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .10);
}
#mainContent .btn:active,
#mainContent button.sh-btn:active { transform: translateY(0); box-shadow: none; }

/* --- 4) Karten / KPI-Kacheln: weichere Schatten + Hover-Anhebung ------------- */
#mainContent .card,
#mainContent .kpi-card,
#mainContent .dw-kpi-item {
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
}
#mainContent .kpi-card:hover,
#mainContent .dw-kpi-item:hover {
  box-shadow: 0 6px 18px rgba(16, 24, 40, .10);
  transform: translateY(-2px);
}

/* --- 5) Tabellen: ruhiger Zeilen-Hover + klarere Kopfzeile ------------------- */
#mainContent .data-table tbody tr:hover {
  background: color-mix(in srgb, var(--sh-brand, #E73D25) 6%, transparent);
}
#mainContent .data-table thead th {
  letter-spacing: .02em;
  font-weight: 600;
}

/* --- 6) Empty-States vereinheitlichen (zentriert, ruhig) --------------------- */
#mainContent .empty-state,
#mainContent .empty,
#mainContent .empty-state-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 24px;
  text-align: center;
  color: var(--elmetic-muted, var(--color-text-muted, #6b7280));
}

/* --- 7) EIN Spinner für alle (ersetzt 5 @keyframes-Varianten visuell) -------- */
@keyframes sh-polish-spin { to { transform: rotate(360deg); } }
#mainContent .sh-spinner,
#mainContent .spinner {
  width: 20px; height: 20px;
  border: 2px solid color-mix(in srgb, var(--sh-brand, #E73D25) 25%, transparent);
  border-top-color: var(--sh-brand, #E73D25);
  border-radius: 50%;
  animation: sh-polish-spin .7s linear infinite;
}

/* --- 8) Inputs: dezenter Fokus-Rahmen in Markenfarbe (ohne harten Sprung) ---- */
#mainContent input:focus,
#mainContent select:focus,
#mainContent textarea:focus {
  border-color: var(--sh-brand, var(--elmetic-red, #E73D25));
  box-shadow: 0 0 0 3px var(--elmetic-red-glow, rgba(231, 61, 37, .15));
}

/* --- 9) Sidebar-Nav: sanfter aktiver Zustand + Hover --------------------------*/
#mainContent .sh-nav__item:hover,
#mainContent a.nav-link:hover {
  background: color-mix(in srgb, var(--sh-brand, #E73D25) 8%, transparent);
}

/* --- 10) Scrollbars dezent (nur wo nicht schon gestylt) ---------------------- */
#mainContent *::-webkit-scrollbar { width: 10px; height: 10px; }
#mainContent *::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--elmetic-muted, #9ca3af) 45%, transparent);
  border-radius: 8px;
}
#mainContent *::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--elmetic-muted, #6b7280) 70%, transparent);
}