/* =====================================================================
   Skin "Continuum" — Navy-Verlauf, Lime-Akzent, Indigo-Glow.
   Ergänzt das MudBlazor-Theme (Design/CiTheme.cs) um alles, was nur im
   Browser geht: Verläufe, Glow, Schriftbindung, Feinschliff.

   Ein anderer Skin (z. B. "Signal") ersetzt genau diese Datei plus die
   Palette in CiTheme.cs — Seiten und Layout bleiben unangetastet.
   ===================================================================== */

/* Schriften und Tokens bindet App.razor vor dieser Datei ein. */

/* ---------- Grundfläche: der CI-Verlauf ----------
   Fest positioniert statt am Body, damit er beim Scrollen ruhig steht
   und lange Tabellen nicht durch den Farbverlauf "wandern". */
body {
  background: var(--ci-flaeche);
  font-family: var(--ci-text-font);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(120% 90% at 100% 0%, rgba(102, 50, 255, .40), transparent 55%),
    radial-gradient(95% 75% at 0% 100%, rgba(168, 236, 0, .18), transparent 55%),
    linear-gradient(155deg, var(--ci-navy), var(--ci-navy-2) 52%, var(--ci-navy-3));
}

/* MudBlazor setzt eigene Flächenfarben — hier durchsichtig halten,
   damit der Verlauf trägt. */
.mud-layout,
.mud-main-content {
  background: transparent !important;
}

/* ---------- Kopfleiste ---------- */
.mud-appbar {
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ci-linie);
  box-shadow: none !important;
}

/* ---------- Navigation ---------- */
.mud-drawer {
  backdrop-filter: blur(14px);
  border-right: 1px solid var(--ci-linie);
}

/* Lange Komponentennamen dürfen die Leiste nicht seitlich scrollen lassen. */
.mud-drawer .mud-drawer-content {
  overflow-x: hidden;
}

.mud-nav-link .mud-nav-link-text {
  overflow-wrap: anywhere;
}

.mud-nav-link {
  border-radius: var(--ci-radius);
  margin: 2px 8px;
  font-size: .9rem;
}

/* Aktiver Menüpunkt: Lime-Kante statt Vollfläche — ruhiger und CI-konform. */
.mud-nav-link.active:not(.mud-nav-link-disabled) {
  background: rgba(168, 236, 0, .10) !important;
  color: var(--ci-lime) !important;
  box-shadow: inset 3px 0 0 var(--ci-lime);
}

.mud-nav-link:hover:not(.active):not(.mud-nav-link-disabled) {
  background: rgba(255, 255, 255, .05) !important;
}

/* Abschnittsüberschriften im Menü (Kicker-Stil der CI). */
.mud-navmenu .mud-typography-overline {
  color: var(--ci-text-leise);
  font-size: .68rem;
  letter-spacing: .18em;
  opacity: .85;
}

/* ---------- Karten und Papierflächen ---------- */
.mud-paper,
.mud-card {
  background-color: var(--ci-karte) !important;
  border: 1px solid var(--ci-karte-rahmen);
  backdrop-filter: blur(6px);
  box-shadow: none !important;
}

/* Overlays brauchen Deckkraft, sonst liest man durch sie hindurch. */
.mud-popover,
.mud-dialog,
.mud-menu-popover .mud-list {
  background-color: #102b45 !important;
  border: 1px solid var(--ci-karte-rahmen);
  backdrop-filter: none;
}

/* ---------- Tabellen ---------- */
.mud-table {
  background-color: transparent !important;
}

.mud-table-head .mud-table-cell {
  color: var(--ci-text-leise);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .72rem;
  border-bottom: 1px solid var(--ci-karte-rahmen);
}

.mud-table-row:hover .mud-table-cell {
  background-color: rgba(255, 255, 255, .04);
}

/* ---------- Schaltflächen ---------- */
.mud-button-filled.mud-button-filled-primary {
  color: var(--ci-navy) !important;
  border-radius: var(--ci-pill);
  padding-inline: 22px;
}

.mud-button-filled.mud-button-filled-primary:hover {
  background-color: var(--ci-lime-dunkel) !important;
}

.mud-button-outlined {
  border-radius: var(--ci-pill);
}

/* ---------- Chips: eine Kontur, keine Füllung (CI-Regel für Pills) ---------- */
.mud-chip.mud-chip-filled {
  font-weight: 600;
}

.mud-chip.mud-chip-outlined {
  background: transparent !important;
}

/* ---------- Akzentbalken unter Seitentiteln ---------- */
.ci-akzentbalken {
  display: block;
  height: 4px;
  width: 64px;
  border-radius: 3px;
  background: linear-gradient(120deg, var(--ci-lime) 0%, var(--ci-gruen) 55%, var(--ci-forest) 100%);
  margin: 10px 0 22px;
}

/* ---------- Kennzahl-Kacheln (Dashboard) ---------- */
.ci-kennzahl {
  font-family: var(--ci-display);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ci-text);
}

.ci-kennzahl-lime {
  color: var(--ci-lime);
}

/* Textwerte wie "2027_Reseller" sind länger als Zahlen und würden sonst
   aus der Kachel laufen — kleinere Stufe mit Umbruch. */
.ci-kennzahl-text {
  font-size: 1.4rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.ci-kennzahl-einheit {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ci-text-leise);
  margin-left: 4px;
}

/* Wertetabellen in Karten (Ziele, Rabattherleitung): Beträge und Prozentwerte
   dürfen nicht umbrechen, sonst steht „30.000" und „€" auf zwei Zeilen. */
.ci-werte td:first-child,
.ci-werte td:last-child {
  white-space: nowrap;
}

.ci-werte td {
  border-bottom: 1px solid var(--ci-linie);
}

.ci-werte tr:last-child td {
  border-bottom: none;
}

/* Fortschritt zur nächsten Stufe. */
.ci-fortschritt {
  height: 6px;
  border-radius: var(--ci-pill);
  background: rgba(255, 255, 255, .10);
  overflow: hidden;
  margin-top: 10px;
}

.ci-fortschritt > span {
  display: block;
  height: 100%;
  border-radius: var(--ci-pill);
  background: linear-gradient(90deg, var(--ci-gruen), var(--ci-lime));
}

/* ---------- Anmeldeseite (eigenes Layout, ohne MudBlazor) ---------- */
.login-card {
  background: var(--ci-karte);
  border: 1px solid var(--ci-karte-rahmen);
  backdrop-filter: blur(10px);
  border-radius: var(--ci-radius-gross);
  color: var(--ci-text);
}

.login-card h1 {
  font-family: var(--ci-display);
  font-weight: 800;
  letter-spacing: -.02em;
}

.login-card .subtitle {
  color: var(--ci-text-gedaempft);
}

/* Blazor setzt nach jeder Navigation den Fokus auf die Überschrift (gut für Screenreader).
   Der Rahmen soll aber nur bei Tastaturbedienung erscheinen, nicht nach jedem Klick. */
.doc-content h1:focus:not(:focus-visible),
h1:focus:not(:focus-visible) {
  outline: none;
}

/* ---------- Scrollleisten ---------- */
* {
  scrollbar-color: rgba(255, 255, 255, .22) transparent;
  scrollbar-width: thin;
}