/* Die Grundschrift kommt aus dem Design-System. Diese Regel muss stehen bleiben:
   ohne sie faellt der Body auf die Browser-Vorgabe, sobald MudBlazor seine
   eigene body-Regel nicht mehr setzt. */
html, body {
    font-family: var(--font-body);
}

/* Grundregeln fuer nacktes HTML, uebernommen aus Bootstraps Reboot (#1146). MudBlazor
   setzt per `*` alle Abstaende auf 0 und stellt sie nur an seinen eigenen Klassen wieder
   her — ohne diesen Block klebten Absaetze aneinander, Listen verloeren Einzug samt
   Aufzaehlungszeichen und Icons rutschten auf die Grundlinie. */
*, ::before, ::after { box-sizing: border-box; }
body { margin: 0; }
p { margin-top: 0; margin-bottom: 1rem; }

h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: .5rem; font-weight: 500; line-height: 1.2; }
h1 { font-size: calc(1.375rem + 1.5vw); }
h2 { font-size: calc(1.325rem + .9vw); }
h3 { font-size: calc(1.3rem + .6vw); }
h4 { font-size: calc(1.275rem + .3vw); }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }
@media (min-width: 1200px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.75rem; }
    h4 { font-size: 1.5rem; }
}

ol, ul { padding-left: 2rem; }
dl, ol, ul { margin-top: 0; margin-bottom: 1rem; }
ol ol, ol ul, ul ol, ul ul { margin-bottom: 0; }
dt { font-weight: 700; }
dd { margin-bottom: .5rem; margin-left: 0; }

small { font-size: .875em; }
code {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: .875em;
    color: #d63384;
    word-wrap: break-word;
}

img, svg { vertical-align: middle; }
table { caption-side: bottom; border-collapse: collapse; }
th { text-align: inherit; text-align: -webkit-match-parent; }
textarea { resize: vertical; }
[role=button] { cursor: pointer; }

.error-page { padding: 0 1.5rem; }
.error-page__titel { color: #dc3545; }

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

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

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

/* ── Reconnect-Overlay des Blazor-Circuits (Story #1089) ──────────────────────
   Sichtbar wird das Overlay ausschliesslich ueber die Zustandsklassen, die das
   Framework an #components-reconnect-modal setzt — Grundzustand ist versteckt. */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;                       /* ueber den MudBlazor-Overlays */
    align-items: center;
    justify-content: center;
    background: rgba(38, 38, 38, .45);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

.lh-reconnect__card {
    max-width: 22rem;
    padding: 1.75rem 2rem;
    border: 1px solid #ECE6DC;
    border-radius: 18px;
    background: #FAF8F4;
    box-shadow: var(--lh-shadow-lg);
    text-align: center;
}

.lh-reconnect__title { margin: .75rem 0 .35rem; font-size: 1.05rem; font-weight: 600; }
.lh-reconnect__hint  { margin: 0; color: #6B6259; font-size: .9rem; }

/* Wiederhol-Text, Fehlertext und Knopf schliessen sich aus; die Zustandsklasse entscheidet. */
.lh-reconnect__hint--failed,
.lh-reconnect__action { display: none; }
#components-reconnect-modal.components-reconnect-failed .lh-reconnect__hint--retry { display: none; }
#components-reconnect-modal.components-reconnect-failed .lh-reconnect__hint--failed,
#components-reconnect-modal.components-reconnect-failed .lh-reconnect__action { display: block; }

.lh-reconnect__action {
    margin: 1rem auto 0;
    padding: .5rem 1.25rem;
    border: 0;
    border-radius: 999px;
    background: var(--lh-brand);
    color: #fff;
    font: inherit;
    cursor: pointer;
}
.lh-reconnect__action:hover { background: var(--lh-brand-strong); }

.lh-reconnect__spinner {
    width: 28px;
    height: 28px;
    margin: 0 auto;
    border: 3px solid var(--lh-brand-soft);
    border-top-color: var(--lh-brand);
    border-radius: 50%;
    animation: lh-reconnect-spin .9s linear infinite;
}

/* Im Fehlerzustand laeuft kein Versuch mehr — dann soll auch nichts mehr drehen. */
#components-reconnect-modal.components-reconnect-failed .lh-reconnect__spinner {
    animation: none;
    opacity: .35;
}

@keyframes lh-reconnect-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .lh-reconnect__spinner { animation: none; }
}

.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: "An error has occurred."
}

.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
    margin-top: 0 !important;
}

.mud-input-control {
    margin-top: 0 !important;
}

/* ── plain HTML table im Catalog-Look ─────────────────────────────────── */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.data-table th, .data-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--mud-palette-table-lines);
    text-align: left;
    vertical-align: top;
}
.data-table th { font-weight: 600; color: var(--mud-palette-text-secondary); }
.data-table .num    { text-align: right; }
.data-table .center { text-align: center; }
.data-table .mono   { font-family: monospace; }

/* ── LilleHus look overrides (Manager redesign) ─────────────────────────── */
:root {
  --lh-shadow-xs: 0 1px 2px rgba(77,77,77,.06);
  --lh-shadow-sm: 0 2px 6px rgba(77,77,77,.07);
  --lh-shadow-md: 0 6px 18px rgba(77,77,77,.08);
  --lh-shadow-lg: 0 14px 34px rgba(77,77,77,.10);
  --lh-shadow-brand: 0 10px 28px rgba(58,125,140,.20);
  --lh-brand: #3A7D8C; --lh-brand-strong: #307382; --lh-brand-soft: #DBE7EA; --lh-brand-wash: #EEF4F5;
  --lh-ease: cubic-bezier(.22,.61,.36,1);
}
.mud-card, .mud-paper.mud-elevation-1 { border: 1px solid #ECE6DC; box-shadow: var(--lh-shadow-md); border-radius: 18px; }
.mud-button-root { border-radius: 999px; }
.mud-chip { border-radius: 999px; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #E3DCD0; border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }

/* Rechner-Hinweis der Shell: nur mobil sichtbar. Schreibtisch-Werkzeuge werden
   mobil trotzdem angeboten (mit Bildschirm-Symbol) — erst die Seite selbst sagt,
   dass sie fuer den Rechner gedacht ist. */
.lh-nur-rechner-hinweis { display: none; }

@media (max-width: 959.98px) {
    .lh-nur-rechner-hinweis { display: flex; }
}

/* ── Getoente Icon-Kacheln und Badges der Hub-Kacheln (#1496) ────────────────
   Global, weil beide Hub-Kachel-
   Komponenten (HubKachelSammlung, HubKachelEinzelseite) vergeben dieselben
   Klassen, und CSS-Isolation verlangte je Komponente eine eigene Kopie.

   Die uebrigen Kachel-Regeln stehen dagegen NICHT hier, sondern in der
   .razor.css der jeweiligen Komponente — sie gehoeren genau einer. */
.hub-icon-tile {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.hub-icon-tile--lg {
    width: 44px;
    height: 44px;
    border-radius: 13px;
}

.hub-badge {
    font-family: var(--font-ui);
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 9px;
}

.hub-badge--danger {
    background: var(--danger-100);
    color: var(--danger-600);
}

.hub-badge--rose {
    background: var(--rose-100);
    color: var(--accent-strong);
}