/* Farbwelt der Konsole -- kopiert aus dem Designsystem der Portal-Konsole (Farben, Radien,
   Schatten, Monospace-Stapel, die drei Layout-Mass-Variablen). Sie stehen hier als Variablen und
   nirgends sonst als Literal, damit ein spaeterer Dunkelmodus ein zweiter Block an dieser Stelle
   ist und kein zweiter Umbau. Bewusst KEINE @media (prefers-color-scheme)-Regel: der dunkle Satz
   ist nicht abgenommen -- diese Konsole liefert nur den hellen. */
:root {
    /* Flaechen: vier Abstufungen. --color-surface-muted ist der Grund, auf dem die Konsole
       liegt; --color-surface-strong traegt zurueckgenommene Chips und Fortschrittsspuren. */
    --color-surface: #ffffff;
    --color-surface-alt: #eef1f5;
    --color-surface-muted: #f4f6f8;
    --color-surface-strong: #e6ebf1;

    /* Linien: die ruhige fuer Flaechenkanten, die kraeftige fuer bedienbare Raender (Knopf,
       Eingabefeld, Haekchenkasten) -- ohne die zweite verschwinden Knoepfe im Hintergrund. */
    --color-border: #dce3ea;
    --color-border-strong: #c3ced9;

    /* Schrift: kraeftig, gedaempft, zurueckhaltend */
    --color-text: #111820;
    --color-text-muted: #5b6775;
    --color-text-subtle: #8996a5;

    /* Akzent, seine Schriftfarbe auf gefuellter Flaeche und seine weiche Fassung fuer
       markierte Zeilen und Chips */
    --color-accent: #1f5f8b;
    --color-accent-ink: #ffffff;
    --color-accent-soft: #e4eff7;
    --color-accent-strong: #17496c;

    /* Signalfarben mit ihrem weichen Gegenstueck je Zustand */
    --color-ok: #2b7a58;
    --color-ok-soft: #e2f1ea;
    --color-warn: #8f6403;
    --color-warn-soft: #f7eed8;
    --color-crit: #ac2419;
    --color-crit-soft: #f8e5e2;

    --radius: 8px;
    --shadow-sm: 0 1px 2px rgba(17, 24, 32, 0.06), 0 8px 24px -12px rgba(17, 24, 32, 0.18);

    /* Zahlen und Quelltext (Adapterschluessel, Selektorausdruecke) stehen in der
       Schreibmaschinenschrift des Systems: Betraege und Zaehler untereinander muessen buendig
       stehen, und ein Ausdruck ist Quelltext, kein Fliesstext. Bewusst kein Webfont -- die
       Konsole laedt keine fremde Ressource. */
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Polster des Inhaltsbereichs. Als Variable, weil die Split-Huelle es per negativem
       Rand exakt wieder aufheben muss -- zwei getrennt gepflegte Zahlen liefen auseinander,
       und die Konsole haette danach einen krummen weissen Rand. */
    --content-pad-x: 2rem;
    --content-pad-y: 1.75rem;

    /* Seitliches Polster im Detail-Panel. Ebenfalls eine Variable: Kopf und Reiterleiste
       reichen bis an die Panelkanten und heben es mit demselben Wert wieder auf, damit ihre
       Trennlinie so breit ist wie das Panel und nicht so breit wie der Text darin. */
    --pane-pad: 1.25rem;

    /* Hoehe einer unteren Tab-Leiste unter 900px, falls die Navigation dieser Konsole spaeter
       eine bekommt. Der Inhaltsbereich haelt sich per padding-bottom davon fern; die unten
       klebende SaveBar richtet ihren eigenen unteren Abstand an derselben Variable aus, damit
       beide Leisten sich nicht ueberlappen. */
    --bottom-nav-height: 64px;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
    color: var(--color-text);
    background: var(--color-surface-muted);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Der Inhaltsbereich einer Seite. Das Polster gilt fuer gewoehnliche Seiten; die Split-Huelle
   (SplitView.razor.css) hebt es fuer sich wieder auf, so bleibt es an einer Stelle definiert,
   statt in jeder Seite einzeln gesetzt zu werden. */
.main-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: var(--content-pad-y) var(--content-pad-x);
    overflow-y: auto;
}

.main-content h1 {
    margin: 0 0 1.25rem;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.main-content h2 {
    margin: 1.5rem 0 1rem;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.main-content h3 {
    margin: 1rem 0 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

/* Buttons. Grundform ist der zurueckhaltende, umrandete Knopf auf weisser Flaeche -- gefuellt
   ist nur, was eine Seite wirklich abschliesst (Speichern, Anlegen). Eine Konsole mit lauter
   gefuellten Knoepfen nimmt der einen Handlung, auf die es ankommt, ihr Gewicht. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.44rem 0.75rem;
    border-radius: 7px;
    font-size: 0.815rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text);
    transition: background 0.15s, opacity 0.15s;
    text-decoration: none;
    /* Eine Knopfbeschriftung bricht nicht um: in einer engen Spalte wird aus einer laengeren
       Beschriftung sonst ein schmaler Streifen ueber mehrere Zeilen. */
    white-space: nowrap;
}

.btn:hover:not(:disabled) {
    background: var(--color-surface-alt);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.btn-primary {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-ink);
    font-weight: 600;
}

.btn-primary:hover:not(:disabled) {
    background: var(--color-accent-strong);
    border-color: var(--color-accent-strong);
}

.btn-link {
    background: none;
    border-color: transparent;
    color: var(--color-accent);
    padding: 0;
    font-weight: 600;
    text-decoration: none;
}

.btn-link:hover:not(:disabled) {
    background: none;
    text-decoration: underline;
}

.form-control-sm {
    padding: 0.28rem 0.5rem;
    font-size: 0.815rem;
    border-radius: 5px;
    border: 1px solid var(--color-accent);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
}

.form-control-sm:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

/* Fehlermeldungen aus einer problem+json-Antwort, angezeigt von FieldErrors.razor. */
.validation-message {
    color: var(--color-crit);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

@media (max-width: 900px) {
    /* Sicherheitsabstand: eine kuenftige untere Tab-Leiste laege fest am unteren Rand ueber dem
       Inhalt, nicht im Fluss -- dieses Polster haelt die letzten Zeilen jeder Seite davon frei.
       Dieselbe Variable richtet auch die unten klebende SaveBar aus. */
    .main-content {
        padding-bottom: calc(var(--bottom-nav-height) + var(--content-pad-y));
    }
}

/* Von blazor.web.js eingeblendet, sobald der Kreislauf an einer unbehandelten Ausnahme endet --
   siehe App.razor. Bis dahin unsichtbar. */
#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1000;
    padding: 0.75rem 1.25rem;
    background: var(--color-crit-soft);
    color: var(--color-crit);
    border-top: 1px solid var(--color-crit);
}

#blazor-error-ui .reload {
    margin-left: 0.75rem;
    font-weight: 600;
}

#blazor-error-ui .dismiss {
    float: right;
    cursor: pointer;
}