/* Anwendungsspezifische Ergänzungen. Grundlayout: layout.css, Bausteine: komponenten.css, Farben: tokens.css (shERPa-CI). */

/* ---------- Marke ---------- */
.marke-zusatz {
    margin-left: 2px;
    color: var(--s-text-muted);
    font-weight: 500;
    font-variation-settings: "SHRP" var(--s-schaerfe-text);
}

/* ---------- Formulare ---------- */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--s-success);
}

.invalid {
    outline: 1px solid var(--s-danger);
}

.validation-message {
    color: var(--s-danger);
    font-size: var(--s-text-sm);
}

.darker-border-checkbox.form-check-input {
    border-color: var(--s-border-strong);
}

/* Bootstrap-"form-floating": Platzhalter ausblenden, sonst überlagert er die Beschriftung. */
.form-floating > .form-control::placeholder,
.form-floating > .form-control-plaintext::placeholder {
    color: transparent;
}

.button-link {
    text-decoration: unset;
}

/* ---------- Anmeldung und Konto-Seiten in der Anmeldekarte ---------- */
.anmeldung-karte h1 {
    font-size: var(--s-text-xl);
    font-weight: 650;
    margin-bottom: var(--s-space-4);
}

.anmeldung-karte h2 {
    font-size: var(--s-text-md);
    font-weight: 600;
}

.anmeldung-karte h4 {
    font-size: var(--s-text-sm);
    font-weight: 600;
    color: var(--s-text-2);
}

.anmeldung-karte hr {
    border-color: var(--s-border);
    opacity: 1;
}

/* Die Identity-Vorlagen sind zweispaltig gebaut; in der schmalen Karte untereinander. */
.anmeldung-karte .row > [class*=col-] {
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0;
}

/* ---------- Übersicht ---------- */
.uebersicht-gruppe {
    margin: 0 0 var(--s-space-3);
    font-size: var(--s-text-xs);
    font-weight: 600;
    color: var(--s-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-family: var(--s-font);
    font-variation-settings: "SHRP" var(--s-schaerfe-text);
}

/* ---------- Bootstrap-Karten wie shERPa-Abschnitte ---------- */
.card {
    --bs-card-bg: var(--s-surface);
    --bs-card-border-color: var(--s-border);
    --bs-card-border-radius: var(--s-radius);
    --bs-card-inner-border-radius: calc(var(--s-radius) - 1px);
    --bs-card-cap-bg: var(--s-surface);
    --bs-card-cap-padding-y: var(--s-space-3);
    --bs-card-cap-padding-x: var(--s-space-4);
    --bs-card-spacer-y: var(--s-space-4);
    --bs-card-spacer-x: var(--s-space-4);
    box-shadow: var(--s-shadow-card);
}

.card-header h5,
.card-title {
    font-size: var(--s-text-md);
    font-weight: 600;
}

/* ---------- Gemeinsame Seitenbausteine ---------- */
.page-container {
    display: flex;
    flex-direction: column;
    gap: var(--s-space-4);
}

.card-panel {
    background: var(--s-surface);
    border: 1px solid var(--s-border);
    border-radius: var(--s-radius);
    box-shadow: var(--s-shadow-card);
    padding: var(--s-space-4);
    min-width: 0;
}

.card-panel h4 {
    margin: 0 0 var(--s-space-3);
    font-size: var(--s-text-md);
    font-weight: 600;
}

/* Zwischenüberschriften auf Seiten (h4) als Abschnittstitel */
.inhalt h4 {
    font-size: var(--s-text-md);
    font-weight: 600;
}

.toolbar-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-space-3);
    align-items: flex-end;
}

.toolbar-field {
    display: flex;
    flex-direction: column;
    gap: var(--s-space-1);
    min-width: 180px;
}

.toolbar-field-label {
    font-size: var(--s-text-sm);
    font-weight: 500;
    color: var(--s-text-2);
}

.loading-overlay {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--s-canvas) 60%, transparent);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}


/* ---------- DevExpress 24.1: Zellhintergründe liegen auf ::before-Ebenen ---------- */
/* Markierte Zeile ruhig wie der aktive Navigationseintrag statt voller Markenfläche; Kopf in Sekundärtext */
.dxbl-grid {
    --dxbl-grid-header-color: var(--s-text-2);
    --dxbl-grid-focus-color: var(--s-primary-text);
    --dxbl-grid-selection-focus-color: var(--s-primary-text);
}

/* Gleicher Selektor wie im Theme (dort: currentColor mit 5 % Deckkraft); gewinnt, weil site.css später geladen wird. */
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th:not(.dxbl-grid-empty-cell)::before {
    background-color: var(--s-surface-2);
    opacity: 1;
}

/* Der Hintergrund ist im Theme fest auf --bs-primary verdrahtet (ohne Variable) und die Regel trägt viele :not()-Bedingungen,
   daher !important. */
.dxbl-grid .dxbl-grid-focused-row > td::before {
    background-color: var(--s-primary-subtle) !important;
    opacity: 1 !important;
}

/* DevExpress 24.1 streckt Eingabefelder nur als direktes Kind einer Formular-Zelle; in Bootstrap-Spalten ebenso. */
[class*="col-"] > .dxbl-text-edit {
    width: 100%;
}