/*
 * Lippuner Farben — Quelle: "2022 Farben Lippuner.pdf" (Marketing, Stand 2022).
 * Alle Werte sind die offiziellen HTML/Hex-Werte aus dem Farbblatt, auch wenn
 * aktuell nicht jede Farbe verwendet wird — sie stehen als Tokens bereit,
 * damit spätere Anpassungen dieselbe Quelle nutzen.
 */
@font-face {
    font-family: 'Futura Lippuner';
    src: url('font/FUTURAN.TTF') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura Lippuner';
    src: url('font/FUTURAB.TTF') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Signalgrün — RGB 0/143/73, Pantone 348C */
    --brand-green: #008f49;
    /* Dunkles Grün — abgeleiteter Hover-/Tiefenton, nicht im Farbblatt enthalten */
    --brand-green-dark: #045c37;
    /* Schwarz (Tiefschwarz) — RGB 0/0/0, RAL 9005 */
    --brand-black: #000000;
    /* Weiss (Verkehrsweiss) — RGB 255/255/255, RAL 9016 */
    --brand-white: #ffffff;

    /* Grau, Hintergründe (cmyk) — RGB 227/233/236, Cool Gray 1 */
    --brand-grey-panel: #e3e9ec;
    /* Grauton, Schriften/Symbole (cmyk) — RGB 194/203/207 */
    --brand-grey-line: #c2cbcf;
    /* Grau Homepage — offizieller Hintergrundton für Web */
    --brand-grey-page: #ededed;
    /* Schrift schwarz-weiss — RGB 188/188/188 */
    --brand-grey-label: #bcbcbc;

    /* Heller Grünton für Hover-/Auswahlzustände, abgeleitet aus --brand-green */
    --brand-green-tint: rgba(0, 143, 73, 0.08);

    --brand-font: 'Futura Lippuner', 'Century Gothic', 'Futura', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --text-muted: #6b6b6b;

    /* Gemeinsame UI-Tokens für das "schwebende Karten"-Erscheinungsbild */
    --radius-card: 16px;
    --radius-pill: 999px;
    --shadow-card: 0 10px 24px -18px rgba(0, 0, 0, 0.35);
    --shadow-card-hover: 0 18px 32px -16px rgba(0, 0, 0, 0.4);
    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Radzen-Theme (standard.css) auf die Lippuner-Tokens umbiegen, statt eine zweite Markenfarbe zu pflegen. */
:root {
    --rz-primary: var(--brand-green);
    --rz-primary-light: var(--brand-green);
    --rz-primary-lighter: var(--brand-green-tint);
    --rz-primary-dark: var(--brand-green-dark);
    --rz-primary-darker: var(--brand-green-dark);
    --rz-on-primary: var(--brand-white);
    --rz-text-font-family: var(--brand-font);
    --rz-body-background-color: var(--brand-grey-page);
    --rz-header-background-color: var(--brand-white);
    --rz-border-radius: 8px;
    --rz-card-border-radius: var(--radius-card);
    --rz-card-shadow: var(--shadow-card);
    --rz-dialog-border-radius: var(--radius-card);

    /* Radzens standard.css hat neben --rz-primary weitere fest blaue Werte (Hover-Text, Grid-Zebra/-Auswahl,
       Secondary, Info, Fokus-Rahmen, Diagramm-Serien) - alle auf die Lippuner-Palette. */
    --rz-on-primary-lighter: var(--brand-green-dark);
    --rz-secondary: var(--brand-green-dark);
    --rz-secondary-light: var(--brand-green);
    --rz-secondary-lighter: var(--brand-green-tint);
    --rz-secondary-dark: #03482b;
    --rz-secondary-darker: #023520;
    --rz-on-secondary-lighter: var(--brand-green-dark);
    --rz-info: var(--brand-green-dark);
    --rz-info-light: var(--brand-green);
    --rz-info-lighter: var(--brand-green-tint);
    --rz-info-dark: #03482b;
    --rz-info-darker: #023520;
    --rz-on-info-lighter: var(--brand-green-dark);
    --rz-link-color: var(--brand-green);
    --rz-link-hover-color: var(--brand-green-dark);
    --rz-input-focus-shadow: 0 0 0 1px var(--brand-white), 0 0 0 3px rgba(0, 143, 73, 0.25);

    --rz-menu-border-radius: 10px;
    --rz-menu-item-border-radius: 6px;
    --rz-menu-item-hover-color: var(--brand-green);
    --rz-menu-item-icon-hover-color: var(--brand-green);
    --rz-menu-top-item-hover-color: var(--brand-green);
    --rz-menu-top-item-icon-hover-color: var(--brand-green);

    --rz-grid-stripe-background-color: #f3f8f5;
    --rz-grid-hover-color: var(--rz-text-color);
    --rz-grid-selected-background-color: rgba(0, 143, 73, 0.14);
    --rz-grid-selected-color: var(--rz-text-color);

    --rz-series-1: var(--brand-green);
    --rz-series-2: var(--brand-grey-line);
    --rz-series-3: var(--brand-green-dark);
    --rz-series-4: #7fc7a4;
    --rz-series-5: #4f5559;
    --rz-series-6: #b8ded0;
    --rz-series-7: #2e7d57;
    --rz-series-8: #9aa5ab;
    --rz-series-9: #d6ebe0;
    --rz-series-10: #1f2a2e;
}

html, body {
    font-family: var(--brand-font);
}

/* background-image: none unterdrueckt den dekorativen SVG-Blob, den Radzens standard.css
   auf body legt - ein blosses background-color verdraengt ihn nicht. */
body {
    background-color: var(--brand-grey-page);
    background-image: none;
}

a {
    color: var(--brand-green);
}

h1:focus {
    outline: none;
}

/* Radzen-Komponenten rendern kein Scope-Attribut der aufrufenden .razor.css - Layout-Overrides
   deshalb global hier statt in MainLayout.razor.css/NavMenu.razor.css. */
.app-layout .rz-body {
    padding: 0;
}

.app-layout .rz-header {
    border-bottom: none;
    box-shadow: 0 1px 0 var(--brand-grey-panel), 0 4px 16px -12px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.topbar {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1.5rem;
    min-height: 4.5rem;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.topbar-brand {
    display: flex;
    align-items: center;
}

.topbar-brand img {
    height: 3.75rem;
    width: auto;
    display: block;
}

.topbar-menu.rz-menu {
    margin-left: auto;
    background: transparent;
    border: none;
}

.topbar-menu .rz-navigation-item-link {
    color: #333333;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.topbar-menu .rz-navigation-menu .rz-navigation-item-link {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}

.topbar-menu .rz-navigation-item-link:hover,
.topbar-menu .rz-navigation-item-link.active {
    color: var(--brand-green);
}

.topbar-menu > .rz-navigation-item > .rz-navigation-item-wrapper > .rz-navigation-item-link.active {
    box-shadow: inset 0 -2px 0 var(--brand-green);
}

.topbar-menu .rz-navigation-menu .rz-navigation-item-link.active {
    background-color: var(--brand-green-tint);
}

.topbar-login {
    color: #333333;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.topbar-login:hover {
    color: var(--brand-green);
}

.topbar-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--brand-green);
    color: var(--brand-white);
    font-size: 0.7rem;
    margin-right: 0.5rem;
}

.app-content {
    max-width: 1440px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
}

@media (max-width: 700px) {
    .app-content {
        padding: 1rem;
    }
}

.text-muted {
    color: var(--text-muted);
}

.text-mono {
    font-family: monospace;
}

/* Schmale Formularseiten (Bearbeiten/Erfassen) */
.form-page {
    max-width: 46rem;
}

/* Label/Wert-Liste für Detailansichten (Konto, Benutzer, Log-Eintrag) */
.fact-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1.5rem;
    margin: 0;
}

.fact-list dt {
    color: var(--text-muted);
    font-weight: 400;
}

.fact-list dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.pre-text {
    white-space: pre-wrap;
    word-break: break-word;
    background-color: #f8f8f8;
    border-radius: 6px;
    padding: 0.75rem;
    font-size: 0.85rem;
    max-height: 16rem;
    overflow-y: auto;
    margin: 0;
}

/* Blazors ValidationSummary (DataAnnotationsValidator) im Radzen-Alert-Look */
.validation-errors {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--rz-border-radius);
    background-color: var(--rz-danger-lighter);
    color: var(--rz-danger-dark);
}

.validation-message {
    color: var(--rz-danger);
    font-size: 0.8rem;
}

.rz-card {
    box-shadow: var(--shadow-card);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Es ist ein Fehler aufgetreten."
    }