/* Der Rahmen jeder Anwendung auf dieser Plattform — nicht ihre Fachseiten.

   Hier steht, was jedes Produkt gleich braucht: die statischen Seiten (Anmeldung, Fehler) samt
   Eingaben, der Anwendungsrahmen mit Fehlerzeile und Neu-laden-Knopf, und die Formsprache aus
   SADA_HP: Farbmarken, Seitenkopf, Kacheln, Karten, Pillen, Listen, Kennzahlen.

   Farben ausschließlich über die Theme-Variablen (--mud-palette-*), die MudThemeProvider aus
   SadaTheme erzeugt — auch auf den statischen Seiten, die kein WebAssembly laden.

   Zwei Vorsilben, beide ohne Produktnamen: --sada-* und .sada-* für die Formsprache,
   .sada-viewer-* für das, was das Bündel des Viewers selbst zeichnet (dessen Regeln stehen in
   frontend/viewer/src/viewer.css). Bis zum 19.09.2026 trugen beide eine Abkürzung des ersten
   Produkts — ein Produktname in der Plattform, gegen CLAUDE.md, Regel 1. Die Geschichte dazu steht
   im Umbau-Dokument von TraceForm; ein Architekturtest hält den Zustand jetzt fest.

   Ausgeliefert wird die Datei als _content/Sada.Platform.UI/sada.css. */

h1:focus {
    outline: none;
}

/* ---------- Statische Seiten (Anmeldung, Fehler) ---------- */

.sada-static {
    min-height: 100vh;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    font-family: var(--mud-typography-default-family);
}

.sada-static__bar {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 24px;
    background: var(--mud-palette-appbar-background);
}

.sada-static__brand {
    color: var(--mud-palette-appbar-text);
    font-size: 1.25rem;
    font-weight: 500;
    text-decoration: none;
}

.sada-static__main {
    display: flex;
    justify-content: center;
    padding: 48px 16px;
}

.sada-static__card {
    width: 100%;
    max-width: 26rem;
}

/* HTML-Eingaben im Stil des Themes — MudBlazor-Eingaben posten in statischen Formularen keine Werte. */
.sada-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

.sada-field label {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.sada-field input {
    padding: 10px 12px;
    font: inherit;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
}

.sada-field input:focus {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -1px;
    border-color: var(--mud-palette-primary);
}

.sada-field .validation-message {
    font-size: 0.8rem;
    color: var(--mud-palette-error);
}

.sada-button {
    width: 100%;
    padding: 10px 16px;
    font: inherit;
    font-weight: 500;
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
    border: none;
    border-radius: var(--mud-default-borderradius);
    cursor: pointer;
}

.sada-button:hover {
    background: var(--mud-palette-primary-darken);
}

/* ---------- Anwendung ---------- */

.sada-logout {
    margin: 0;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2000;
    width: 100%;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    color: var(--mud-palette-error-text);
    background: var(--mud-palette-error);
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
}

#blazor-error-ui .reload {
    color: inherit;
}

#blazor-error-ui .dismiss {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    cursor: pointer;
}

/* Knopf in der Fehlergrenze (U10): ein echter Link, damit die Seite wirklich neu geladen wird. */
.sada-reload {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 6px 16px;
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 600;
    text-decoration: none;
}

.sada-reload:hover {
    background: var(--mud-palette-primary-darken);
}

/* ── Formsprache aus SADA_HP (sada-pages.css): Seitenkopf, Kacheln, Karten, Pillen, Symbole ───────────── */
:root {
    --sada-navy: #0C2850;
    --sada-navy-2: #1b4a86;
    --sada-accent: #3aa0e6;
    --sada-ground: #f3f6fa;
    --sada-line: #e1e7ef;
    --sada-text: #1d2733;
    --sada-grey: #5f6f82;
    --sada-fine: #2e9e5b;
    --sada-ongoing: #f08a24;
    --sada-error: #d63b3b;
    --sada-radius: 12px;
}

.sada-page-head { margin-bottom: 22px; }

.sada-head {
    position: relative;
    overflow: hidden;
    color: #fff;
    border-radius: 18px;
    background: linear-gradient(120deg, var(--sada-navy) 0%, var(--sada-navy-2) 62%, #2a6db3 100%);
    padding: 22px 28px 74px;
    box-shadow: 0 10px 30px rgba(12, 40, 80, .18);
}

.sada-head::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .09;
    background-image: linear-gradient(rgba(255, 255, 255, .7) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .7) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(100deg, transparent 35%, #000 100%);
    -webkit-mask-image: linear-gradient(100deg, transparent 35%, #000 100%);
}

.sada-head > * { position: relative; z-index: 1; }
.sada-page-head:not(:has(.sada-tiles)) .sada-head { padding-bottom: 22px; }
.sada-head__crumbs { font-size: 12.5px; opacity: .8; margin-bottom: 10px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sada-head__crumbs a { color: #fff; text-decoration: none; }
.sada-head__crumbs a:hover { text-decoration: underline; }
.sada-head__row { display: flex; gap: 20px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.sada-head__main { min-width: 0; }
.sada-head__kicker { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .75; font-weight: 600; }
.sada-head__title { font-size: 30px; font-weight: 700; margin: 2px 0 6px; line-height: 1.15; word-break: break-word; display: flex; align-items: center; gap: 10px; }
.sada-head__meta { display: flex; gap: 8px; flex-wrap: wrap; }
.sada-head__meta > span {
    display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
    background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .18); padding: 3px 10px; border-radius: 999px;
}
.sada-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.sada-btn {
    display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; padding: 8px 14px; border-radius: 8px;
    border: 1px solid transparent; cursor: pointer; text-decoration: none !important; line-height: 1.2; white-space: nowrap; font-family: inherit;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.sada-btn .mud-icon-root { font-size: 18px; }
.sada-btn--light { background: #fff; color: var(--sada-navy) !important; }
.sada-btn--light:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
.sada-btn--glass { background: rgba(255, 255, 255, .12); color: #fff !important; border-color: rgba(255, 255, 255, .28); }
.sada-btn--glass:hover { background: rgba(255, 255, 255, .22); }
.sada-btn--danger { background: transparent; color: #ffd4d1 !important; border-color: rgba(255, 160, 150, .45); }
.sada-btn--danger:hover { background: rgba(214, 59, 59, .35); color: #fff !important; }

.sada-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: -50px 18px 0; position: relative; z-index: 2; }
.sada-tile {
    background: #fff; border-radius: var(--sada-radius); padding: 14px 16px; box-shadow: 0 6px 22px rgba(12, 40, 80, .09);
    border: 1px solid var(--sada-line); display: flex; gap: 12px; align-items: center; min-width: 0; color: var(--sada-text);
}
.sada-tile--clickable { cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; }
.sada-tile--clickable:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(12, 40, 80, .14); }
.sada-tile--active { border-color: var(--sada-navy); box-shadow: 0 0 0 2px rgba(12, 40, 80, .25), 0 6px 22px rgba(12, 40, 80, .09); }
.sada-tile__icon {
    width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(12, 40, 80, .07); color: var(--sada-navy);
}
.sada-tile--warn .sada-tile__icon { background: rgba(214, 59, 59, .1); color: var(--sada-error); }
.sada-tile--good .sada-tile__icon { background: rgba(46, 158, 91, .1); color: var(--sada-fine); }
.sada-tile__text { min-width: 0; flex: 1; }
.sada-tile__text b { display: block; font-size: 22px; line-height: 1.1; color: var(--sada-navy); font-variant-numeric: tabular-nums; }
.sada-tile--warn .sada-tile__text b { color: var(--sada-error); }
.sada-tile__text small { color: var(--sada-grey); font-size: 12px; }

.sada-bar { height: 5px; border-radius: 3px; background: #e9eef4; overflow: hidden; margin-top: 5px; display: flex; }
.sada-bar i { display: block; height: 100%; }

.sada-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 22px; }
.sada-card {
    background: #fff; border-radius: var(--sada-radius); border: 1px solid var(--sada-line); box-shadow: 0 2px 10px rgba(12, 40, 80, .05);
    display: flex; flex-direction: column; min-width: 0; color: var(--sada-text);
}
.sada-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px 10px; flex-wrap: wrap; }
.sada-card__head h3 { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sada-navy); margin: 0; display: flex; gap: 7px; align-items: center; }
.sada-card__head h3 .n { font-weight: 500; color: var(--sada-grey); letter-spacing: 0; }
.sada-card__body { padding: 0 16px 16px; flex: 1; display: flex; flex-direction: column; }
.sada-empty { color: var(--sada-grey); font-size: 13px; padding: 14px; text-align: center; background: var(--sada-ground); border-radius: 8px; border: 1px dashed var(--sada-line); }

.sada-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.sada-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sada-pill--fine { background: #e3f4ea; color: #1e7a45; }
.sada-pill--ongoing { background: #fff4d6; color: #8a6200; }
.sada-pill--error { background: #fde6e4; color: #b3261e; }
.sada-pill--neutral { background: #eef1f5; color: var(--sada-grey); }

.sada-symbol { display: inline-flex; flex-shrink: 0; line-height: 0; }
.sada-symbol svg { display: block; }

@media (max-width: 760px) {
    .sada-head { padding: 18px 18px 70px; }
    .sada-head__title { font-size: 24px; }
    .sada-tiles { margin: -50px 8px 0; }
}

/* Überschrift im Hauptmenü: Sie trennt, ohne einen Klick zu kosten — ein aufklappbarer
   Menüpunkt verlangt einen Griff mehr für etwas, das ohnehin immer offen bleiben soll. */
.sada-nav__group {
    padding: 14px 16px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--sada-grey, #6b7a8d);
    opacity: .85;
}

/* Der Platz des Produkts in der Kopfzeile (SadaShell.Header): Er wächst mit, hat aber eine
   Obergrenze — eine Suchzeile über die halbe Breite liest sich nicht besser. */
.sada-shell__header {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 480px;
    margin-left: 18px;
}

/* Schmal weicht er: Kopfzeile ist dort für Menü, Name und Benutzer da. */
@media (max-width: 640px) {
    .sada-shell__header { display: none; }
}

/* Eingeklapptes Hauptmenü ("Rail"): Die Sinnbilder bleiben, die Wörter gehen. Der Griff dafür steht
   im Menü selbst und nicht in der Kopfzeile — dort sitzt schon der, der es ganz wegnimmt, und zwei
   Schalter nebeneinander für zwei verschiedene Dinge verwechselt man. Die Breite steht zweimal:
   hier und als RailWidth in SadaShell; MudBlazor setzt sie als Inline-Stil am Schubfach. */
.sada-nav--rail .mud-nav-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.sada-nav--rail .mud-nav-link .mud-nav-link-text {
    display: none;
}

.sada-nav--rail .mud-nav-link .mud-nav-link-icon {
    margin-right: 0;
}

/* Die Gruppenüberschrift wird zum Strich: Sie trennt weiter, ohne Platz für ein Wort zu brauchen. */
.sada-nav--rail .sada-nav__group {
    font-size: 0;
    padding: 8px 12px 4px;
    border-top: 1px solid var(--sada-line, #e1e7ef);
    margin-top: 4px;
}

/* Das Abzeichen sitzt sonst hinter dem Wort — eingeklappt gehört es an das Sinnbild. */
.sada-nav--rail .sada-nav-badge {
    position: absolute;
    top: 4px;
    right: 8px;
}

.sada-nav--rail .mud-nav-link {
    position: relative;
}

/* Der Griff sitzt unten und bleibt dort, auch wenn das Menü lang wird. */
.sada-nav__rail-toggle {
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
    padding: 6px 8px;
    border-top: 1px solid var(--sada-line, #e1e7ef);
}

.sada-nav--rail .sada-nav__rail-toggle {
    justify-content: center;
    padding: 6px 0;
}

/* Damit „unten" wirklich unten ist, muss das Schubfach eine Spalte sein. */
.mud-drawer .mud-drawer-content {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}