html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

/* Um das Paper in Paper Problem zu lösen und das global nachträglich zuändern wird die Variable
--paper-bg-color definiert, die im darkmode oder lightmode passend gesetzt wird. Der Toggle
zws. geschieht ist an die Klasse "app-light" oder "app-dark" gebunden, die auf der App-Shell liegt.
Wenn wir jetzt den MODE wechseln dann nehmen wir automatisch die passende Pallette aus dem CompanyyTheme.
Darauf horcht ebenfalls die Klasse app-dark und app-light.
So kann man dem hinteren Paper die Klasse "theme-paper-muted" geben und es passt sich weiter automatisch
im darkmode oder lightmode golobal an einer stelle an.
*/
:root {
    --paper-bg-color: rgb(192, 192, 192);
}

.app-light {
    --paper-bg-color: hsl(0, 0%, 80%);
}

.app-dark {
    --paper-bg-color: hsl(0 0% 20%);
}

.theme-paper-muted {
    background-color: var(--paper-bg-color) !important;
}

/* Farb-Picker (ColorPickerField): Feld mit Farbfeld + Name, Panel mit vordefinierten Farben und eigener Farbe. */
.color-picker-field {
    display: inline-flex;
    width: 100%;
    min-width: 0;
}

.color-picker-field > .mud-menu {
    width: 100%;
}

.color-picker-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0 4px 0 8px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.color-picker-trigger:hover:not(:disabled) {
    border-color: var(--mud-palette-text-primary);
}

.color-picker-trigger:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.color-picker-trigger:disabled {
    cursor: default;
    opacity: 0.5;
}

.color-picker-swatch,
.color-picker-custom-swatch {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.color-picker-custom-swatch {
    width: 14px;
    height: 14px;
}

.color-picker-trigger-name {
    flex-grow: 1;
    min-width: 0;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.color-picker-popover {
    margin-top: 4px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px !important;
}

.color-picker-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px !important;
}

.color-picker-caption {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.color-picker-grid {
    display: grid;
    gap: 6px;
}

.color-picker-option {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.1s ease-in-out;
}

.color-picker-option:hover {
    transform: scale(1.15);
}

.color-picker-option.selected {
    box-shadow: 0 0 0 2px var(--mud-palette-surface), 0 0 0 4px var(--mud-palette-text-primary);
}

.color-picker-option:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Die Farbfläche von MudBlazor rechnet intern mit fester Größe (312 × 250) – deshalb zentriert statt gestreckt. */
.color-picker-custom.mud-picker {
    align-self: center;
    background: transparent;
}

/* Wizard "Kunden anlegen": der Schritt-Inhalt scrollt in sich, damit Schritt-Leiste und
   "Zurück/Weiter" auch bei langen Schritten ohne Scrollen der Seite sichtbar bleiben. */
.customer-creation-wizard-step {
    min-height: 240px;
    max-height: calc(100vh - 430px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Template-Auswahl als Karten (TemplateChoiceList): Name, Beschreibung und – bei Rein/Raus-Familien – die Richtung. */
.template-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    gap: 8px;
}

.template-choice {
    padding: 8px 12px;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.template-choice--clickable {
    cursor: pointer;
}

.template-choice--clickable:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.template-choice--selected {
    border-color: var(--mud-palette-primary) !important;
}

.template-choice--disabled {
    opacity: 0.65;
}

/* Banner oben an der Karte (z. B. Granularität einer Auswertungs-Vorlage) – ersetzt Zwischenzeilen je Granularität. */
.template-choice__banner {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: -8px -12px 8px;
    padding: 3px 12px;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    background-color: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
    color: var(--mud-palette-text-primary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.template-choice__banner .mud-icon-root {
    color: var(--mud-palette-primary);
    font-size: 1rem;
}

.template-choice__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.template-choice__check {
    margin-top: 2px;
    flex-shrink: 0;
}

.template-choice__text {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}

.template-choice__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.template-choice__description,
.template-choice__reason {
    color: var(--mud-palette-text-secondary);
}

.template-choice__reason {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

/* Dauer als Zahl mit Einheit (DurationField). */
.duration-field {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.duration-field__amount {
    flex: 1 1 auto;
    min-width: 0;
}

.duration-field__unit {
    flex: 0 0 130px;
}

/* Automations-Editor: „Heißt: …" unter jedem Baustein und die Automation in Sätzen in der Vorschau. */
.automation-wizard-sentence {
    display: block;
    margin-top: 6px;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

.automation-wizard-summary {
    margin: 0;
    padding-left: 20px;
}

.automation-wizard-summary li + li {
    margin-top: 4px;
}

.template-choice__directions {
    flex-shrink: 0;
    align-self: center;
}

/* Editoren (Auswertung, Bericht): nummerierte Abschnitte mit Frage und Erklärung (EditorSection). */
.editor-sections {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.editor-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.editor-section + .editor-section {
    padding-top: 20px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.editor-section__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.editor-section__number {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    border-radius: 50%;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 0.8rem;
    font-weight: 600;
}

/* Aktionen im Kopf eines Abschnitts (z. B. „Logik hinzufügen“) behalten ihre Breite – schmaler wird der Text daneben. */
.editor-section__header > .mud-button-root {
    flex-shrink: 0;
    white-space: nowrap;
}

.editor-section__icon {
    margin-top: 3px;
}

.editor-section__heading {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}

.editor-section__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 38px;
}

@media (max-width: 600px) {
    .editor-section__body {
        padding-left: 0;
    }
}

/* Einzelauswahl als Karten (ChoiceCards): Symbol, Titel, Erklärung; gewählt = Rahmen in der Primärfarbe. */
.choice-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: 8px;
}

.choice-cards--single {
    grid-template-columns: minmax(0, 1fr);
}

.choice-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    transition: border-color 120ms ease, background-color 120ms ease;
}

.choice-card--clickable {
    cursor: pointer;
}

.choice-card--clickable:hover,
.choice-card--clickable:focus-visible {
    background-color: var(--mud-palette-action-default-hover);
    outline: none;
}

.choice-card--selected {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

.choice-card--disabled {
    opacity: 0.55;
}

.choice-card__icon {
    flex-shrink: 0;
    margin-top: 1px;
}

.choice-card__text {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}

.choice-card__description {
    color: var(--mud-palette-text-secondary);
}

.choice-card__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
}

/* Kurzer Zusatz neben dem Titel (ChoiceCard.Tag), z. B. der technische Name einer DataDefinition oder „empfohlen“. */
.choice-card__tag {
    font-size: 0.72rem;
    line-height: 1.4;
    padding: 0 6px;
    border-radius: 8px;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-action-default-hover);
    white-space: nowrap;
}

.choice-card__radio {
    flex-shrink: 0;
}

/* Schalter mit Erklärung (OptionSwitch). */
.option-switch {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.option-switch__toggle {
    flex-shrink: 0;
    margin-top: -6px;
}

.option-switch__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}

.option-switch__text {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.option-switch--disabled .option-switch__text {
    cursor: default;
    opacity: 0.6;
}

/* Rahmen aller Konfigurations-Editoren (EditorLayout): links die Abschnitte, rechts die Live-Vorschau, die beim Scrollen stehen
   bleibt. Die Abschnitte wachsen nur bis zu einer gut lesbaren Breite, jeder weitere Platz des breiten Dialogs geht an die Vorschau.
   Ohne Vorschau (Exporter) ist der Editor einspaltig. */
.editor-layout {
    display: grid;
    grid-template-columns: minmax(0, min(640px, 50%)) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.editor-layout--single {
    grid-template-columns: minmax(0, 1fr);
}

.editor-layout__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.editor-layout__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-background-gray);
}

/* Aktionen im Kopf (z. B. „Experten-Ansicht“, „Verlauf“) behalten ihre Breite und brechen nicht um – schmaler wird der Text. */
.editor-layout__header > :not(.flex-grow-1) {
    flex-shrink: 0;
}

.editor-layout__header .mud-button-root {
    white-space: nowrap;
}

.editor-layout__preview {
    position: sticky;
    top: 0;
    min-width: 0;
}

@media (max-width: 1100px) {
    .editor-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .editor-layout__preview {
        position: static;
    }
}

/* Live-Vorschau neben einem Editor (LivePreviewFrame). */
.live-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
}

.live-preview__header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.live-preview__stage {
    display: flex;
    flex-direction: column;
    min-height: 160px;
    transition: opacity 150ms ease;
}

.live-preview__stage--fixed {
    height: min(66vh, 680px);
    min-height: 320px;
    overflow: hidden;
}

.live-preview__stage--fixed > * {
    flex: 1 1 auto;
    min-height: 0;
}

/* Die Darstellung liegt flach im Rahmen der Vorschau: ohne Innenabstand träfen die runden Ecken ihres MudPaper
   (16px) sonst direkt auf die Ecken der Bühne, und dazwischen schaute der Hintergrund als Sichel heraus. */
.live-preview__stage .evaluation-chart-panel,
.live-preview__stage .evaluation-module-panel {
    background-color: transparent;
    border-radius: 0;
}

.live-preview__stage--stale {
    opacity: 0.55;
}

.live-preview__placeholder {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
}

/* Erhebungen in Auswahllisten (EvaluationSourceOptionLabel) und als anklickbare Liste (Tabellen-Spalten). */
.source-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.source-option__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Erklärung einer DataDefinition (DataDefinitionInfo): Name mit Info-Symbol, Tooltip mit Titel, Bedeutung und Art der Werte. */
.data-definition-info {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    cursor: help;
}

.data-definition-info__icon {
    font-size: 1rem !important;
    opacity: 0.7;
    cursor: help;
    vertical-align: middle;
}

.data-definition-info__icon--standalone {
    margin-left: 2px;
}

.data-definition-tooltip__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 360px;
    text-align: left;
}

.data-definition-tooltip__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.data-definition-tooltip__name,
.data-definition-tooltip__kind {
    opacity: 0.8;
    font-size: 0.75rem;
}

/* Rollen eines Gruppen-Templates in der Liste: Name mit Erklärung, durch Abstand getrennt. */
.template-role {
    display: inline-flex;
    align-items: center;
    margin-right: 10px;
    white-space: nowrap;
}

/* Gruppen-Überschriften in einer Auswahlliste (SelectGroupHeader, z. B. Themen im DataDefinitionSelect) – kein wählbarer Eintrag. */
.select-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    pointer-events: none;
}

/* Karten-Auswahl der DataDefinition (DataDefinitionPicker): Suche, Themen, Karten in einem begrenzten, scrollenden Bereich. */
.data-definition-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.data-definition-picker__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.data-definition-picker__categories .mud-chip {
    margin: 0;
}

.data-definition-picker__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 340px;
    overflow-y: auto;
    padding: 2px;
}

.data-definition-picker__group-title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--mud-palette-text-secondary);
}

/* Ein Wert einer Berechnung (SurveyCalculatorFields): Buchstabe, Frage der Rechenart, Quelle, darunter der Raumbezug. */
.calculator-variable {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.calculator-variable__header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.calculator-variable__letter {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--mud-palette-primary-text);
    background-color: var(--mud-palette-primary);
}

.calculator-variable__question {
    flex: 1 1 auto;
    min-width: 0;
}

.calculator-variable__types {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.calculator-variable__types .mud-chip {
    margin: 0;
}

.calculator-variable__scope {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.calculator-variable__scope > .mud-button-root {
    align-self: flex-start;
}

.calculator-scope,
.calculator-accumulation {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Die Formel in Worten: „Ergebnis = [Rein] − [Raus]“. */
.calculator-formula-preview {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 8px 12px;
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-action-default-hover);
}

/* Rolle einer Erhebungs-Gruppe (MetricSurveyGroupFields): Name, DataDefinition, Optional, Entfernen – bricht schmal um. */
.survey-group-role-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
}

.survey-group-role-row__name {
    flex: 1 1 160px;
}

.survey-group-role-row__definition {
    flex: 2 1 260px;
}

/* Häufige Informations-Erhebungen zum Vorbelegen (InformationSurveyFields). */
.information-survey-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.information-survey-presets .mud-chip {
    margin: 0;
}

.data-definition-picker__none {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
}

/* „Neu anlegen“ unter einer Quellen-Auswahl im Auswertungs-Editor (EvaluationSourceCreateLink); hervorgehoben, wenn noch nichts passt. */
.source-create {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-top: -4px;
}

.source-create--prominent {
    margin-top: 0;
    padding: 8px 12px;
    border: 1px dashed var(--mud-palette-primary);
    border-radius: var(--mud-default-borderradius);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
}

.source-create__hint {
    flex: 1 1 220px;
}

/* „Live-Belegung einrichten“ (LiveOccupancySetup): Checkliste, was die Live-Belegung braucht. */
.live-setup {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 50%, transparent);
    border-radius: var(--mud-default-borderradius);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
}

.live-setup__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.live-setup__steps {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.live-setup__step {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.source-pick-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 6px;
}

.source-pick {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    cursor: pointer;
}

.source-pick:hover,
.source-pick:focus-visible {
    background-color: var(--mud-palette-action-default-hover);
    outline: none;
}

.source-pick--selected {
    border-color: var(--mud-palette-primary);
}

/* Berichte und Auswertungen im Tab „Auswertungen" (SpaceEvaluationsTab): die ganze Zeile öffnet, rechts die Aktionen. */
.evaluation-list-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    transition: border-color 120ms ease, background-color 120ms ease;
}

.evaluation-list-entry--clickable {
    cursor: pointer;
}

.evaluation-list-entry--clickable:hover,
.evaluation-list-entry--clickable:focus-visible {
    background-color: var(--mud-palette-action-default-hover);
    outline: none;
}

.evaluation-list-entry--inactive {
    opacity: 0.65;
}

.evaluation-list-entry--new {
    border-color: var(--mud-palette-success);
    box-shadow: 0 0 0 1px var(--mud-palette-success);
}

.evaluation-list-entry__text {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}

.evaluation-list-entry__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.evaluation-list-entry__chips .mud-chip {
    margin: 0;
}

.evaluation-list-entry__actions {
    flex-shrink: 0;
}

/*===================== LoginPage =====================*/
/* Root-Container der Login-Seite */
.login-page-root {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: flex-start;
    padding-left: 36%;
    align-items: center;

    background-image: url('/img/bg_orange_5458_3072.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;
}

@media (min-width: 2200px) {
    .login-page-root {
        background-image: url('/img/bg_orange_3840x1080.jpg');
    }
}

@media (max-width: 768px) {
    .login-page-root {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        min-height: 100svh;
        height: 100svh;
        padding: 24px;
        box-sizing: border-box;
        overflow: auto;
    }

    .login-page-root > .mud-grid-item {
        width: min(100%, 420px);
        max-width: 420px;
        flex: 0 0 auto !important;
        flex-basis: auto !important;
    }
}

/* ===================== Management ===================== */
.management-page-root {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: flex-start;
    padding-left: 24%;
    align-items: center;

    background-image: url('/img/bg_orange_managmement_5458_3072.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;
}

@media (min-width: 2200px) {
    .management-page-root {
        background-image: url('/img/bg__managemnt_orange_3840x1080.jpg');
    }
}

.dropzone-assign {
    border-color: #2e7d32 !important;
    background-color: rgba(46, 125, 50, 0.14) !important;
    transition: all 0.15s ease-in;
}

.dropzone-unassign {
    border-color: #e4633c;
    background-color: rgba(125, 75, 46, 0.34) !important;
    transition: all 0.15s ease-in;
}

.dropzone-soft-mismatch {
    border-color: #e4633c !important;
    background-color: rgba(228, 99, 60, 0.16) !important;
    transition: all 0.15s ease-in;
}

/* ======================Space Tree css overrides =============================*/

/*Wenn ein Space ausgewählt ist wird vom Theme auf die Farbe Secondary gemappt*/
.spaces-tree .mud-treeview-item-content.mud-treeview-item-selected {
    background-color: var(--mud-palette-secondary) !important;
}

/* Im selcted Zustand Schrift weiß lassen nicht Primary Color (Darkmode) */
.app-dark .spaces-tree .mud-treeview-item-content.mud-treeview-item-selected .mud-typography
{
    color: var(--mud-palette-white) !important;
}
/* Im selcted Zustand Schrift dark lassen nicht Primary Color (Lightmode) */
.spaces-tree .mud-treeview-item-content.mud-treeview-item-selected .mud-typography
{
    color: var(--mud-palette-dark) !important;
}

/*Positionierung des Space Sortieren und anlegen Buttons*/
.fab-menu {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1100;
}

/* Fokus-Button und 3-Punkt-Menü nur bei Hover über die Zeile anzeigen */
.spaces-tree .space-row-actions {
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

.spaces-tree .mud-treeview-item-content:hover .space-row-actions,
.spaces-tree .mud-treeview-item-content:focus-within .space-row-actions {
    opacity: 1;
}

/*===================== Vertikaler Seitentitel + Page-Content Wrapper =====================*/

/* Vertikaler Seitentitel links */
.page-title-vertical {
    position: fixed;
    top: 95%;
    left: 140px;
    /* Abstand vom Drawer – ggf. anpassen */
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left center;

    font-size: 10rem;
    letter-spacing: 0.02em;
    /* Größer/kleiner nach Geschmack */
    color: --var(--mud-palette-text-primary);
    /* im Darkmode schön hell */
    pointer-events: none;
    /* nicht anklickbar, stört nichts */
    z-index: 900;

    /* neue Headline-Font verwenden */
    font-family: 'Bebas Neue', 'Roboto', sans-serif;
    text-transform: uppercase;

}

.app-dark .page-title-vertical {
    color: #fff;
}

/* Keep MudBlazor default/dark text variants aligned with the active CompanyTheme palette. */
.mud-typography.mud-typography-color-default,
.mud-typography.mud-typography-color-dark,
.mud-input-helper-text.mud-input-helper-text-color-default,
.mud-input-helper-text.mud-input-helper-text-color-dark {
    color: var(--mud-palette-text-primary) !important;
}

/* Chips sind immer gefüllt (farbige Schrift auf dunklem Grund ist schlecht lesbar, FilledVariantTests erzwingt das).
   Eine Auswahl zeigt deshalb nicht „umrandet statt gefüllt", sondern einen Ring um den gefüllten Chip. */
.mud-chip.chip-selected {
    box-shadow: 0 0 0 2px var(--mud-palette-text-primary);
}

/* MudIconButton should keep its theme color even if a parent container sets `color`.
   MudBlazor icons render with `fill: currentColor`, so we bind the button and inner icon
   explicitly to the theme palette classes. */
.mud-button-root.mud-icon-button.mud-primary-text,
.mud-button-root.mud-icon-button.mud-primary-text .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

.mud-button-root.mud-icon-button.mud-secondary-text,
.mud-button-root.mud-icon-button.mud-secondary-text .mud-icon-root {
    color: var(--mud-palette-secondary) !important;
}

.mud-button-root.mud-icon-button.mud-tertiary-text,
.mud-button-root.mud-icon-button.mud-tertiary-text .mud-icon-root {
    color: var(--mud-palette-tertiary) !important;
}

.mud-button-root.mud-icon-button.mud-info-text,
.mud-button-root.mud-icon-button.mud-info-text .mud-icon-root {
    color: var(--mud-palette-info) !important;
}

.mud-button-root.mud-icon-button.mud-success-text,
.mud-button-root.mud-icon-button.mud-success-text .mud-icon-root {
    color: var(--mud-palette-success) !important;
}

.mud-button-root.mud-icon-button.mud-warning-text,
.mud-button-root.mud-icon-button.mud-warning-text .mud-icon-root {
    color: var(--mud-palette-warning) !important;
}

.mud-button-root.mud-icon-button.mud-error-text,
.mud-button-root.mud-icon-button.mud-error-text .mud-icon-root {
    color: var(--mud-palette-error) !important;
}

/* Allgemeiner Offset für den Haupt-Content, damit Platz für den vertikalen Titel bleibt */
.page-content-wrapper {
    margin-left: 110px;
    min-height: 90vh;
    /* Höhe mindestens wie der Viewport */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 30px;
}

/* Auf schmalen Screens ausblenden (damit nichts kollidiert) */
@media (max-width: 960px) {
    .page-title-vertical {
        display: none;
    }

    .page-content-wrapper {
        margin-left: 0;
    }
}

/*===================== Server nicht erreichbar =====================*/
/* Blazor-Circuit (#components-reconnect-modal, Zustand über CSS-Klassen der Blazor-Runtime) und die BFF-Aufrufe
   (ServerUnavailableBanner) zeigen dasselbe Banner oben. Solange die Verbindung fehlt, liegt eine leichte Abdeckung über
   der Seite: sie ist nicht bedienbar und soll auch nicht so aussehen.
   MudBlazor.min.css bringt eigene Regeln für #components-reconnect-modal mit (deckender Hintergrund und z-index mit
   !important, Buttons in Großbuchstaben mit Theme-Textfarbe und margin !important). Die Selektoren hier sind deshalb
   bewusst spezifischer (body … bzw. ID + Klasse) und überschreiben die !important-Werte. */
body #components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999 !important;
    padding: 16px;
    background: rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(2px);
    align-items: flex-start;
    justify-content: center;
}

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

/* Die BFF-Variante deckt die Seite nicht ab, nur die Karte selbst ist anklickbar. */
.server-unavailable-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99998;
    display: flex;
    justify-content: center;
    padding: 16px;
    pointer-events: none;
}

/* Schrift und Farben ausdrücklich gesetzt: das Banner liegt außerhalb des MudBlazor-Themes und darf nichts erben. */
.reconnect-banner {
    box-sizing: border-box;
    width: 100%;
    max-width: 760px;
    padding: 14px 16px 14px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, #c2410c 0%, #b45309 55%, #92400e 100%);
    color: #fff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    font-family: "Roboto", sans-serif;
    font-size: 0.9rem;
    line-height: 1.45;
    text-align: left;
    pointer-events: auto;
    animation: reconnect-slide-in 0.25s ease-out;
}

#components-reconnect-modal.components-reconnect-rejected .reconnect-banner {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 55%, #166534 100%);
}

@keyframes reconnect-slide-in {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.reconnect-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
}

#components-reconnect-modal .reconnect-body {
    display: none;
}

.reconnect-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}

.reconnect-icon svg {
    width: 22px;
    height: 22px;
}

.reconnect-text {
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reconnect-text strong {
    font-size: 1rem;
    font-weight: 600;
}

.reconnect-text span {
    opacity: 0.92;
}

#components-reconnect-modal.components-reconnect-show .reconnect-showing,
#components-reconnect-modal.components-reconnect-retrying .reconnect-showing {
    display: flex;
}

#components-reconnect-modal.components-reconnect-failed .reconnect-failed-body,
#components-reconnect-modal.components-reconnect-resume-failed .reconnect-failed-body {
    display: flex;
}

#components-reconnect-modal.components-reconnect-rejected .reconnect-rejected-body {
    display: flex;
}

.reconnect-spinner {
    animation: reconnect-spin 0.9s linear infinite;
}

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

#components-reconnect-modal .reconnect-reload-btn,
.server-unavailable-banner .reconnect-reload-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0 0 0 auto !important;
    padding: 8px 18px;
    border: none;
    border-radius: 999px;
    background: #fff;
    color: #9a3412;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

#components-reconnect-modal .reconnect-reload-btn svg,
.server-unavailable-banner .reconnect-reload-btn svg {
    width: 16px;
    height: 16px;
}

#components-reconnect-modal .reconnect-reload-btn:hover,
.server-unavailable-banner .reconnect-reload-btn:hover {
    background: #ffedd5;
    transform: translateY(-1px);
}

#components-reconnect-modal .reconnect-reload-btn:focus-visible,
.server-unavailable-banner .reconnect-reload-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .reconnect-banner,
    .reconnect-spinner {
        animation: none;
    }
}

/* Tab-Badges (MudTabPanel.BadgeData): MudBlazor setzt den Badge oben rechts über den Tab-Text,
   die Tab-Leiste (.mud-tabs-tabbar-content) hat aber overflow:hidden – der Badge wird dadurch
   oben abgeschnitten. Stattdessen den Badge im Textfluss direkt neben der Beschriftung zeigen. */
.mud-tab .mud-tab-badge .mud-badge-wrapper,
.mud-tab .mud-tab-badge .mud-badge {
    position: static;
    inset: auto;
}

/* Feature Flags: Aufzählung, was ein Feature in der Oberfläche betrifft; Beta-Kennzeichnung an Einstiegen. */
.feature-flag-affects {
    margin: 4px 0 0 0;
    padding-left: 20px;
}

.beta-chip {
    margin-left: 6px;
    vertical-align: middle;
}

.nav-menu .beta-chip {
    height: 18px;
    font-size: 0.7rem;
}

/* Sektionen der Detail-Seiten – Space Details (Konfiguration) und Geräte-Details (DetailsSection): Karte mit Kopfzeile aus
   Icon, Titel, Kurzbeschreibung und Status-Chips; der Inhalt klappt darunter auf.
   Akzentfarbe (Rahmen, Icon) ist neutral und folgt nur über die Status-Modifier dem Erfüllungsgrad –
   nie der rötlichen Primärfarbe, damit Rot ausschließlich „noch offen“ bedeutet. */
.details-section {
    --details-section-accent: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-surface);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.details-section--open {
    border-color: color-mix(in srgb, var(--details-section-accent) 45%, transparent);
    box-shadow: var(--mud-elevation-1);
}

.details-section--success {
    --details-section-accent: var(--mud-palette-success);
}

.details-section--warning {
    --details-section-accent: var(--mud-palette-warning);
}

.details-section--error {
    --details-section-accent: var(--mud-palette-error);
}

.details-section--success,
.details-section--warning,
.details-section--error {
    border-color: color-mix(in srgb, var(--details-section-accent) 55%, transparent);
}

.details-section__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    user-select: none;
    border-radius: var(--mud-default-borderradius);
}

.details-section__header:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.details-section__header:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.details-section__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--details-section-accent);
    background-color: color-mix(in srgb, var(--details-section-accent) 12%, transparent);
}

.details-section__text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.details-section__status {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
}

.details-section__status .mud-chip {
    margin: 0;
}

.details-section__chevron {
    flex-shrink: 0;
    transition: transform 200ms ease;
}

.details-section--open .details-section__chevron {
    transform: rotate(180deg);
}

.details-section__body {
    border-top: 1px solid var(--mud-palette-lines-default);
    padding: 8px 12px 12px;
}


/* „So wirkt es“ (ExplainerSteps): nummerierte Schritte mit Symbol, nebeneinander, auf schmalen Bildschirmen untereinander. */
.explainer-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.explainer-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-background-gray);
}

.explainer-step__badge {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--mud-palette-info);
    background-color: color-mix(in srgb, var(--mud-palette-info) 14%, transparent);
}

.explainer-step__number {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    color: var(--mud-palette-info-text);
    background-color: var(--mud-palette-info);
}

.explainer-step__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Geräte-Details (DeviceDetails, DeviceDetailsHeader): oben der Kopf mit Symbol, Name, Kennung und Aktionen, darunter
   Zustand und Zeitpunkte; die Sektionen darunter sind DetailsSections, gruppiert in „Einstellungen“ und „Daten“. */
.device-details,
.device-details__content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.device-details__group {
    margin: 8px 0 -6px 4px;
    letter-spacing: 0.08em;
}

/* Beendete Zuordnungen treten zurück, die laufenden stehen oben. */
.device-details__row--ended td {
    color: var(--mud-palette-text-secondary);
}

.device-hero {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-surface);
    box-shadow: var(--mud-elevation-1);
}

.device-hero__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
}

.device-hero__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    color: var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.device-hero__title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 320px;
    min-width: 0;
}

.device-hero__overline {
    line-height: 1.4;
}

.device-hero__name {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.device-hero__name-text {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.device-hero__identity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.device-hero__identity .mud-chip {
    margin: 0;
}

.device-hero__mac {
    display: inline-flex;
    max-width: 100%;
}

/* Ein Zustand als Wert (z. B. in einer Kachel): Symbol in der Zustandsfarbe, Text neutral – farbige Schrift liest sich schlecht. */
.status-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.device-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.device-hero__facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr));
    gap: 8px 16px;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.device-hero__fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.device-hero__fact dt {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.device-hero__fact dd {
    margin: 0;
}

/* Sensoren der Geräte-Details (DeviceSensorsTable): Kästchen für die Mehrfachauswahl, mit Auswahl eine Aktionsleiste. */
.device-sensors {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.device-sensors__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 4px;
}

/* Aktionsleiste der Auswahl: schwebt unten mittig, solange Sensoren gewählt sind – auch in langen Listen erreichbar. */
.device-sensors__selection-bar {
    position: fixed;
    left: 16px;
    right: 16px;
    width: fit-content;
    margin: 0 auto;
    bottom: 24px;
    z-index: 1200;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-width: calc(100vw - 32px);
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    border-radius: var(--mud-default-borderradius);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
    box-shadow: var(--mud-elevation-8);
}

.device-sensors__table th.device-sensors__check,
.device-sensors__table td.device-sensors__check {
    width: 40px;
    padding-left: 4px;
    padding-right: 0;
}

.device-sensors__group {
    cursor: pointer;
}

.device-sensors__row--selected td {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

.device-metadata__value {
    overflow-wrap: anywhere;
}

.device-link-row {
    cursor: pointer;
}

.device-link-row__mac {
    font-family: monospace;
}

/* Kennung (MAC/DevEUI) schlicht statt als Chip (MacAddressView mit AsChip="false"), z. B. im Kopf der Geräte-Details. */
.mac-address-plain__label {
    margin-right: 6px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mac-address-plain__value {
    font-family: monospace;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}