/* ─────────────────────────────────────────────────────────────────────────
   LexiParea – Design Tokens (Handoff „Design Tokens“). Dark ist Leitmodus.
   MudBlazor liefert --mud-palette-*; diese Datei ergänzt die produktspezifischen
   Tokens (--lp-*) und die wenigen globalen Regeln, die MudTheme nicht abdeckt.
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable-Italic.woff2") format("woff2");
}

:root {
  --lp-primary: #9184D9;
  --lp-primary-strong: #B5ABFC;     /* Akzentfarbe für Fließtext (dunklere/hellere Rampenstufe, min. 3:1) */
  --lp-bg: #161826;
  --lp-surface: #232532;
  --lp-panel: #1C1E2C;
  --lp-drawer: #12141F;
  --lp-text: #E9E9ED;
  --lp-text-2: #9397AB;
  --lp-text-soft: #B2B6CA;
  --lp-muted: #75798C;
  --lp-line: #2F323F;
  --lp-line-soft: #232532;
  --lp-ok: #8FAA63;
  --lp-warn: #D9A441;
  --lp-err: #C9736A;
  --lp-info: #6F8FB0;
  --lp-nav-active: #D2CEFD;
  --lp-accent-tint: color-mix(in srgb, var(--lp-primary) 12%, transparent);
  --lp-nav-tint: color-mix(in srgb, var(--lp-primary) 14%, transparent);
  --lp-lift: linear-gradient(140deg, #232640, #1A1C2B);
  --lp-lift-edge: #423A6A;
  --lp-overdue-edge: #6B5423;
  --lp-error-edge: #6B3D38;
  --lp-shadow-dialog: 0 16px 40px rgba(0, 0, 0, .6);
  --lp-maturity-new: #9184D9;
  --lp-maturity-practicing: #5D5294;
  --lp-maturity-almost: #6F8FB0;
  --lp-maturity-secure: #8FAA63;

  --lp-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lp-mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --lp-radius-chip: 6px;
  --lp-radius-control: 8px;
  --lp-radius-panel: 10px;
  --lp-radius-card: 12px;
  --lp-radius-dialog: 14px;

  --lp-appbar-height: 56px;
  --lp-drawer-width: 242px;
  --lp-bottomnav-height: 60px;
  --lp-content-max: 1180px;
  --lp-content-padding: 26px;

  --lp-ease: 250ms ease;

  color-scheme: dark;
}

:root[data-lp-theme="light"] {
  --lp-primary: #5D5294;
  --lp-primary-strong: #4A4179;
  --lp-bg: #F3F5FE;
  --lp-surface: #FFFFFF;
  --lp-panel: #EEF0FA;
  --lp-drawer: #E9ECFA;
  --lp-text: #292B31;
  --lp-text-2: #595D6C;
  --lp-text-soft: #3F424D;
  --lp-muted: #75798C;
  --lp-line: #CFD3E5;
  --lp-line-soft: #E4E7F5;
  --lp-ok: #5D7A33;
  --lp-warn: #A8741A;
  --lp-err: #A8514A;
  --lp-info: #4F6E93;
  --lp-nav-active: #4A4179;
  --lp-lift: linear-gradient(140deg, #FFFFFF, #EEF0FA);
  --lp-lift-edge: #CFCBEA;
  --lp-overdue-edge: #D9B36A;
  --lp-error-edge: #D39A93;
  --lp-shadow-dialog: 0 16px 40px rgba(41, 43, 49, .18);
  --lp-maturity-practicing: #796CBF;

  color-scheme: light;
}

html, body {
  margin: 0;
  background: var(--lp-bg);
  color: var(--lp-text);
  font-family: var(--lp-font);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Griechische Schrift führt typografisch; Greeklish kleiner und kursiv */
.lp-greek { font-weight: 500; letter-spacing: -0.01em; }
.lp-greeklish { font-style: italic; color: var(--lp-text-2); font-weight: 400; }
.lp-mask { font-family: var(--lp-mono); font-size: 18px; letter-spacing: .16em; color: var(--lp-text-soft); }
.lp-kicker { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--lp-primary); font-weight: 500; }
.lp-page-title { font-size: 26px; font-weight: 500; line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
.lp-section-title { font-size: 19px; font-weight: 500; margin: 0; }
.lp-card-title { font-size: 15px; font-weight: 500; margin: 0; }
.lp-meta { font-size: 12px; color: var(--lp-muted); }
.lp-body { font-size: 13.5px; line-height: 1.6; color: var(--lp-text-soft); }
.lp-kpi { font-size: 31px; font-weight: 500; line-height: 1.1; }
.lp-kpi-sm { font-size: 22px; font-weight: 500; line-height: 1.1; }

/* Fokusring 2 px Primary, Offset 2 px – nie der Browser-Default */
:focus { outline: none; }
:focus-visible,
.mud-button-root:focus-visible,
.mud-nav-link:focus-visible,
.mud-input-slot:focus-visible {
  outline: 2px solid var(--lp-primary) !important;
  outline-offset: 2px;
  border-radius: var(--lp-radius-control);
}

/* Karten, Panels */
.lp-card {
  background: var(--lp-surface);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-card);
  padding: 20px 22px;
}
.lp-panel {
  background: var(--lp-panel);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-panel);
  padding: 16px 18px;
}
.lp-card-lift {
  background: var(--lp-lift);
  border: 1px solid var(--lp-lift-edge);
  border-radius: var(--lp-radius-card);
  padding: 24px;
}

/* Layout-Shell */
.lp-appbar.mud-appbar {
  height: var(--lp-appbar-height);
  min-height: var(--lp-appbar-height);
  background: var(--lp-bg);
  border-bottom: 1px solid var(--lp-line);
  color: var(--lp-text);
}
.lp-appbar .mud-toolbar { height: var(--lp-appbar-height); min-height: var(--lp-appbar-height); padding: 0 14px; gap: 8px; }
.lp-offline.mud-alert { padding: 2px 10px; font-size: 12.5px; border-radius: var(--lp-radius-chip); }

.lp-drawer.mud-drawer {
  background: var(--lp-drawer);
  border-right: 1px solid var(--lp-line);
  color: var(--lp-text-soft);
}
.lp-drawer .mud-drawer-content { display: flex; flex-direction: column; height: 100%; padding: 14px 12px; gap: 14px; }
.lp-drawer-brand { display: flex; align-items: center; padding: 4px 6px 6px; }
.lp-drawer-footer { margin-top: auto; padding: 10px 6px 4px; border-top: 1px solid var(--lp-line); display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--lp-text-2); }
.lp-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--lp-accent-tint); color: var(--lp-nav-active); font-size: 12px; font-weight: 600; flex: none; }

.lp-nav .mud-nav-link {
  border-radius: var(--lp-radius-control);
  padding: 9px 10px;
  margin: 2px 0;
  min-height: 40px;
  color: var(--lp-text-soft);
  font-size: 13.5px;
  transition: background var(--lp-ease), color var(--lp-ease);
}
.lp-nav .mud-nav-link .mud-nav-link-icon { color: var(--lp-text-2); margin-inline-end: 12px; }
.lp-nav .mud-nav-link:hover { background: color-mix(in srgb, var(--lp-primary) 7%, transparent); }
.lp-nav .mud-nav-link.active {
  background: var(--lp-nav-tint);
  color: var(--lp-nav-active);
}
.lp-nav .mud-nav-link.active .mud-nav-link-icon { color: var(--lp-nav-active); }
.lp-nav .mud-nav-link-text { display: flex; align-items: center; gap: 8px; width: 100%; }
.lp-nav-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--lp-accent-tint);
  color: var(--lp-nav-active);
  font-size: 11px;
  font-weight: 600;
  display: grid;
  place-items: center;
}

.lp-main.mud-main-content { background: var(--lp-bg); min-height: 100vh; }
.lp-content {
  max-width: var(--lp-content-max);
  margin: 0 auto;
  padding: var(--lp-content-padding);
  padding-bottom: calc(var(--lp-content-padding) + var(--lp-bottomnav-height) + env(safe-area-inset-bottom));
}
@media (min-width: 960px) {
  .lp-content { padding-bottom: var(--lp-content-padding); }
}
@media (max-width: 599.98px) {
  :root { --lp-content-padding: 16px; }
}

/* Routenwechsel: translateY(6px) → 0, Opazität 0 → 1, 250–300 ms */
.lp-page { animation: lp-enter 280ms ease both; }
@keyframes lp-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .lp-page { animation: none; }
}

/* Modusumschalter */
.lp-mode-switch.mud-toggle-group { width: 100%; background: var(--lp-panel); border: 1px solid var(--lp-line); border-radius: var(--lp-radius-control); padding: 3px; }
.lp-mode-switch .mud-toggle-item { flex: 1; min-height: 34px; border-radius: 6px; font-size: 12.5px; text-transform: none; }
.lp-mode-switch .mud-toggle-item.mud-toggle-item-selected { background: var(--lp-nav-tint); color: var(--lp-nav-active); }

/* Untere Navigation (Smartphone) */
.lp-bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--lp-bottomnav-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--lp-drawer);
  border-top: 1px solid var(--lp-line);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  z-index: 1200;
}
.lp-bottom-nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 44px; min-width: 44px;
  color: var(--lp-text-2);
  text-decoration: none;
  font-size: 11px;
  position: relative;
  transition: color var(--lp-ease);
}
.lp-bottom-nav a .mud-icon-root { font-size: 22px; width: 22px; height: 22px; }
.lp-bottom-nav a.active { color: var(--lp-nav-active); }
.lp-bottom-nav a.active::before {
  content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 2px;
  background: var(--lp-primary); border-radius: 0 0 2px 2px;
}
.lp-bottom-nav .lp-nav-badge { position: absolute; top: 6px; left: calc(50% + 6px); height: 16px; min-width: 16px; font-size: 10px; padding: 0 4px; }
@media (min-width: 960px) {
  .lp-bottom-nav { display: none; }
}

/* Snackbar: zentriert unten, Surface + 1 px Primary */
.mud-snackbar.mud-alert-outlined-normal,
.mud-snackbar {
  background: var(--lp-surface) !important;
  border: 1px solid var(--lp-primary) !important;
  color: var(--lp-text) !important;
  border-radius: 9px;
  box-shadow: var(--lp-shadow-dialog);
}

/* Dialoge */
.mud-dialog { background: var(--lp-surface); border: 1px solid var(--lp-line); border-radius: var(--lp-radius-dialog); box-shadow: var(--lp-shadow-dialog); }

/* Skeleton in Kartenform (keine Spinner-Overlays) */
.lp-skeleton-card { border-radius: var(--lp-radius-card); border: 1px solid var(--lp-line); background: var(--lp-surface); padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.mud-skeleton { background-color: var(--lp-line) !important; }

/* Dashboard-Raster (Desktop 1.55fr 1fr, Gap 18) */
.lp-grid-main { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; }
.lp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 959.98px) {
  .lp-grid-main { grid-template-columns: 1fr; }
}

/* Startbildschirm vor dem ersten Rendern */
.lp-splash {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: var(--lp-bg); color: var(--lp-text);
}
.lp-splash-lockup { display: flex; align-items: center; gap: 10px; }
.lp-splash-wordmark { font-size: 21px; font-weight: 600; letter-spacing: -0.025em; }
.lp-splash-wordmark span { color: var(--lp-primary); }
.lp-splash-bar { width: 160px; height: 4px; border-radius: 2px; background: var(--lp-line-soft); overflow: hidden; }
.lp-splash-bar-fill { height: 100%; width: 40%; background: var(--lp-primary); border-radius: 2px; animation: lp-splash 1.2s ease-in-out infinite; }
@keyframes lp-splash { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
.lp-splash-text { font-size: 12.5px; color: var(--lp-muted); }

/* Fehleranzeige von Blazor */
.lp-error-ui {
  display: none;
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--lp-surface); border: 1px solid var(--lp-error-edge); color: var(--lp-text);
  border-radius: 9px; padding: 11px 18px; font-size: 13px; box-shadow: var(--lp-shadow-dialog); z-index: 2000;
}
.lp-error-ui .reload { color: var(--lp-primary-strong); margin-left: 10px; }
.lp-error-ui .dismiss { cursor: pointer; margin-left: 12px; color: var(--lp-muted); }