/* RangeLib-Plan-0725 Punkt 1 — "Liquid Glass"-Design, übertragen aus RangeLib.Web
   (RangeLib-Plan-0723 M41, ursprünglich aus integrate/ncware/design.md). Tokens identisch zu
   RangeLib.Web/wwwroot/css/modern-theme.css, nur die Markenfarbe (--sifa statt --range) und die
   body-bg-Tönung sind SiFa-Assist-blau. Klassisch (hell/dunkel) bleibt komplett unberührt
   (kein data-theme-Attribut = altes Verhalten, siehe MainLayout.razor's _classicTheme-Objekt).

   design.md §6.2: der Glas-Look wird per globalem CSS-Override auf MudBlazors eigenen
   Klassen ergänzt (.mud-appbar/.mud-paper/.mud-card/.mud-drawer), nicht durch Nachbau der
   Komponenten - deshalb keine eigenen .panel/.dtable/.switch-Klassen hier. */

[data-theme="modern"] {
  --paper: #EEF0F1;
  --paper-lo: #E1E4E5;
  --paper-hi: #F7F8F9;
  --ink: #2B3033;
  --ink-soft: #3E464A;
  --steel: #6C7479;

  --sifa: #1565C0;
  --sifa-lo: #1055A4;
  --sifa-deep: #0A4588;
  --danger: #B6605A;
  --danger-deep: #954E49;

  --glass: rgba(255, 255, 255, .42);
  --glass-hi: rgba(255, 255, 255, .60);
  --glass-line: rgba(255, 255, 255, .55);
  --glass-edge: rgba(120, 132, 138, .22);
  --glass-blur: saturate(150%) blur(16px);
  --shadow-soft: 0 10px 32px -18px rgba(38, 46, 50, .45);
  --shadow-lift: 0 18px 44px -20px rgba(38, 46, 50, .42);
  --rim: linear-gradient(180deg, rgba(255, 255, 255, .5), transparent 30%);

  --body-bg:
    radial-gradient(42rem 42rem at 12% -8%, rgba(21, 101, 192, .20), transparent 60%),
    radial-gradient(50rem 50rem at 78% 108%, rgba(21, 101, 192, .12), transparent 60%),
    var(--paper);
}

[data-theme="modern-dark"] {
  --paper: #12161A;
  --paper-lo: #1C2226;
  --paper-hi: #222A2F;
  --ink: #E8EBED;
  --ink-soft: #B7BFC4;
  --steel: #8B959B;

  --sifa: #2983E9;
  --sifa-lo: #1A77E2;
  --sifa-deep: #529BEF;
  --danger: #D98F89;
  --danger-deep: #E4A9A4;

  --glass: rgba(255, 255, 255, .055);
  --glass-hi: rgba(34, 42, 48, .60);
  --glass-line: rgba(255, 255, 255, .12);
  --glass-edge: rgba(255, 255, 255, .10);
  --glass-blur: saturate(150%) blur(16px);
  --shadow-soft: 0 10px 30px -18px rgba(0, 0, 0, .6);
  --shadow-lift: 0 20px 46px -20px rgba(0, 0, 0, .6);
  --rim: linear-gradient(180deg, rgba(255, 255, 255, .14), transparent 30%);

  --body-bg:
    radial-gradient(42rem 42rem at 12% -8%, rgba(21, 101, 192, .14), transparent 58%),
    radial-gradient(50rem 50rem at 78% 108%, rgba(21, 101, 192, .08), transparent 60%),
    var(--paper);
}

[data-theme="modern"],
[data-theme="modern-dark"] {
  --radius: 18px;
  --radius-sm: 12px;
  --f-display: "Archivo", system-ui, sans-serif;
  --f-body: "Atkinson Hyperlegible", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

[data-theme="modern"] body,
[data-theme="modern-dark"] body {
  font-family: var(--f-body);
  background: var(--body-bg);
  background-attachment: fixed;
}

[data-theme="modern"] h1, [data-theme="modern"] h2, [data-theme="modern"] h3, [data-theme="modern"] h4, [data-theme="modern"] h5, [data-theme="modern"] h6,
[data-theme="modern-dark"] h1, [data-theme="modern-dark"] h2, [data-theme="modern-dark"] h3, [data-theme="modern-dark"] h4, [data-theme="modern-dark"] h5, [data-theme="modern-dark"] h6,
[data-theme="modern"] .mud-typography-h1, [data-theme="modern"] .mud-typography-h2, [data-theme="modern"] .mud-typography-h3, [data-theme="modern"] .mud-typography-h6, [data-theme="modern"] .mud-button-root,
[data-theme="modern-dark"] .mud-typography-h1, [data-theme="modern-dark"] .mud-typography-h2, [data-theme="modern-dark"] .mud-typography-h3, [data-theme="modern-dark"] .mud-typography-h6, [data-theme="modern-dark"] .mud-button-root {
  font-family: var(--f-display);
}

/* Glas-Rezept (design.md §2.3/§6.2): halbtransparent + Blur + 1px Lichtlinie + weicher
   Schatten + Lichtsaum-Verlauf über ::before, auf jede "erhabene" MudBlazor-Fläche. */
[data-theme="modern"] .mud-appbar,
[data-theme="modern"] .mud-paper,
[data-theme="modern"] .mud-card,
[data-theme="modern"] .mud-drawer,
[data-theme="modern-dark"] .mud-appbar,
[data-theme="modern-dark"] .mud-paper,
[data-theme="modern-dark"] .mud-card,
[data-theme="modern-dark"] .mud-drawer {
  background: var(--glass) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-soft);
}

/* "position: relative" NUR auf .mud-paper/.mud-card (für den ::before-Lichtsaum unten) - auf
   .mud-appbar/.mud-drawer würde es MudBlazors eigenes position:fixed/sticky überschreiben, das
   MudMainContent für sein padding-top/margin-left braucht (führte bei RangeLib zu ~900px
   Leerraum, siehe dortiger Kommentar). */
[data-theme="modern"] .mud-paper,
[data-theme="modern"] .mud-card,
[data-theme="modern-dark"] .mud-paper,
[data-theme="modern-dark"] .mud-card {
  position: relative;
}

[data-theme="modern"] .mud-appbar,
[data-theme="modern-dark"] .mud-appbar {
  border-radius: 0 0 var(--radius) var(--radius);
  /* Die Glas-Fläche ersetzt MudBlazors farbige AppbarBackground (die auf feste weiße
     Schrift ausgelegt ist) durch eine helle/dunkle durchscheinende Fläche - Schrift/Icons
     müssen deshalb auf --ink umgestellt werden (dunkel im hellen, hell im dunklen Modern-Theme),
     statt der von MudBlazor angenommenen weißen Schrift auf dunklem Appbar-Hintergrund. */
  color: var(--ink) !important;
}

[data-theme="modern"] .mud-paper,
[data-theme="modern"] .mud-card,
[data-theme="modern-dark"] .mud-paper,
[data-theme="modern-dark"] .mud-card {
  border-radius: var(--radius);
}

[data-theme="modern"] .mud-paper::before,
[data-theme="modern"] .mud-card::before,
[data-theme="modern-dark"] .mud-paper::before,
[data-theme="modern-dark"] .mud-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--rim);
  pointer-events: none;
}

[data-theme="modern"] .mud-paper:hover,
[data-theme="modern"] .mud-card:hover,
[data-theme="modern-dark"] .mud-paper:hover,
[data-theme="modern-dark"] .mud-card:hover {
  box-shadow: var(--shadow-lift);
}

/* design.md §6.4: MudBlazors Elevation passt nicht zum weichen Glas-Schatten -> immer
   Elevation="0" im Markup verwenden; hier zusätzlich als Netz. */
[data-theme="modern"] .mud-elevation-1, [data-theme="modern"] .mud-elevation-2, [data-theme="modern"] .mud-elevation-3, [data-theme="modern"] .mud-elevation-4, [data-theme="modern"] .mud-elevation-5,
[data-theme="modern-dark"] .mud-elevation-1, [data-theme="modern-dark"] .mud-elevation-2, [data-theme="modern-dark"] .mud-elevation-3, [data-theme="modern-dark"] .mud-elevation-4, [data-theme="modern-dark"] .mud-elevation-5 {
  box-shadow: var(--shadow-soft) !important;
}