/* ============================================================
   DynamicMatrix ViewElement (Typ 17)
   Reines HTML-Tabellen-Rendering mit Sticky Headers
   ============================================================ */

.udm-dynmatrix {
    overflow: auto;
    width: 100%;
    height: 100%;
    position: relative;
    /* Sticky-Offset fuer den Haupt-Header. Wird ueberschrieben, wenn ein Band-Header existiert. */
    --udm-dynmatrix-band-h: 0px;
}

.udm-dynmatrix.udm-dynmatrix-has-band {
    --udm-dynmatrix-band-h: 1.9em;
}

.udm-dynmatrix table {
    border-collapse: separate;
    border-spacing: 0;
    /* table-layout: fixed in Kombination mit <colgroup> erzwingt die konfigurierten Spaltenbreiten.
       Ohne fixed wuerde Content die Spalten auseinanderdruecken. */
    table-layout: fixed;
    width: max-content;
    /* Basis-Schriftgröße wie im nativen Grid. Muss auf dem <table> stehen, nicht nur am
       Container: Bootstrap setzt font-size per Element-Selektor direkt auf die Tabelle
       (.table, table { font-size: .9625rem }) und schlägt damit jeden geerbten Wert.
       Alle em-Angaben darunter beziehen sich auf diesen Wert. */
    font-size: var(--udm-base-font-size);
}


/* --- Header (einheitliche Typografie, eine Groessen-Stufe) --- */

.udm-dynmatrix thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--udm-surface-alt, #f8f9fa);
    border-bottom: 1px solid var(--udm-border, #dee2e6);
    text-align: center;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.udm-dynmatrix-band-row th {
    top: 0;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--udm-text-muted, #6c757d);
    border-left: 1px solid var(--udm-border, #dee2e6);
    background: var(--udm-surface-alt, #f1f3f5);
}

.udm-dynmatrix-header-row th {
    /* Respektiert die tatsaechliche Band-Hoehe ueber die CSS-Variable */
    top: var(--udm-dynmatrix-band-h, 0px);
}

.udm-dynmatrix-group-header {
    background: var(--udm-surface-alt, #f1f3f5) !important;
}

/* Dynamische Spalten-Header duerfen umbrechen (schmale Spalten, zweizeilige Titel) */
.udm-dynmatrix-col-header {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    vertical-align: bottom;
}

.udm-dynmatrix-col-title {
    font-weight: 600;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

/* --- Zusatzzeilen der Spalten-Achse (HeaderRows / FooterRows) ---
   Je konfiguriertem Feld eine Zeile mit einem Wert je Spalte. Dezenter als die Datenzeilen,
   damit der Plan im Vordergrund bleibt: kleinere Schrift, gedämpfter Untergrund. */

.udm-dynmatrix-axis-row td,
.udm-dynmatrix-axis-row th {
    font-size: 0.85em;
    background: var(--udm-surface-alt, #f1f3f5);
    border-bottom: 1px solid var(--udm-border-light, #e9ecef);
}

/* Der Titel der Zusatzzeile steht im festen Bereich links, rechtsbündig zum Datenbereich hin. */
.udm-dynmatrix-axis-row-title {
    text-align: right;
    padding-right: 0.5em;
    font-weight: 600;
    color: var(--udm-text-muted, #6c757d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.udm-dynmatrix-axis-row-cell {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Die Zeilen am Ende grenzen sich nach oben ab, damit sie nicht als weitere Datenzeile
   gelesen werden. */
.udm-dynmatrix-axis-row--foot td,
.udm-dynmatrix-axis-row--foot th {
    border-top: 2px solid var(--udm-border, #dee2e6);
}

.udm-dynmatrix-col-subtitle {
    margin-top: 2px;
    font-size: 0.85em;
    color: var(--udm-text-muted, #6c757d);
    font-weight: 400;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

/* --- Spalten-Resize-Handle (gleicher JS-Vertrag wie das native Grid:
       udmDataGridInitResizing sucht .udm-data-grid__resize-handle mit data-col-index).
       Header-Zellen sind position:sticky und damit Positionierungs-Anker. --- */

.udm-dynmatrix thead th .udm-data-grid__resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    z-index: 5;
}

.udm-dynmatrix thead th .udm-data-grid__resize-handle:hover {
    background: rgba(var(--bs-primary-rgb), 0.4);
}


/* --- Fixe Spalten (sticky links) --- */

/* Die Breite aus der Spaltengruppe MUSS die Gesamtbreite sein, Rahmen eingeschlossen.
   Sonst ist jede Zelle einen Rahmen breiter als gerechnet, und die stehenbleibenden
   Spalten kleben um genau diese Pixel zu weit links: Sie scrollen die ersten Pixel mit
   und verdecken dabei den Trennstrich zur Spalte davor. */
.udm-dynmatrix th,
.udm-dynmatrix td {
    box-sizing: border-box;
}

.udm-dynmatrix-fixed {
    position: sticky;
    z-index: 2;
    background: var(--udm-surface, #fff);
}

.udm-dynmatrix thead .udm-dynmatrix-fixed {
    z-index: 4;
    background: var(--udm-surface-alt, #f8f9fa);
}

.udm-dynmatrix-corner {
    left: 0;
}

/* Die Titelspalte darf NICHT über ihre eingestellte Breite hinauswachsen.
   Die Tabelle steht auf "width: max-content"; ohne diese Grenze drückt ein langer Name
   die Spalte breiter, als die Spaltengruppe vorgibt. Der Haft-Abstand der Spalten
   dahinter rechnet aber mit der eingestellten Breite — die Differenz zeigte sich als
   Zucken über die ersten Pixel beim waagerechten Blättern.
   Lange Namen werden dafür mit "…" gekürzt; der volle Text steht im Tooltip. */
.udm-dynmatrix-row-header-cell,
.udm-dynmatrix-row-title {
    max-width: var(--udm-dm-w-title);
}

.udm-dynmatrix-row-header-cell {
    left: 0;
    text-align: left;
}

.udm-dynmatrix-row-title {
    left: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    border-right: 1px solid var(--udm-border, #dee2e6);
}

.udm-dynmatrix-fixed-col-header {
    text-align: center;
    border-right: 1px solid var(--udm-border, #dee2e6);
}

.udm-dynmatrix-fixed-col {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-right: 1px solid var(--udm-border-light, #e9ecef);
}


/* Zusatzspalten am Ende: Sie stehen hinter dem Datenbereich und wandern beim waagerechten
   Blättern mit ihm. Deshalb keine Haftung, aber dieselbe Optik wie die Spalten links und
   eine kräftigere Trennlinie zum Datenbereich. */

.udm-dynmatrix-foot-col-header,
.udm-dynmatrix-foot-col {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-left: 1px solid var(--udm-border, #dee2e6);
}

.udm-dynmatrix-foot-col-header {
    background: var(--udm-surface-alt, #f8f9fa);
}

/* Festgehalten: Die Fuß-Spalten bleiben am rechten Rand stehen. Der Abstand dorthin steht
   als Inline-Stil an der Zelle, gerechnet aus den Breiten der Spalten dahinter. */
.udm-dynmatrix-foot-col--pinned {
    position: sticky;
    z-index: 2;
    background: var(--udm-surface, #fff);
}

.udm-dynmatrix thead .udm-dynmatrix-foot-col--pinned {
    z-index: 4;
    background: var(--udm-surface-alt, #f8f9fa);
}

/* Festgehaltene Zusatzzeilen am Ende bleiben beim senkrechten Blättern unten stehen. */
.udm-dynmatrix-axis-row--foot-pinned > th,
.udm-dynmatrix-axis-row--foot-pinned > td {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: var(--udm-surface-alt, #f8f9fa);
}

/* Die Beschriftung links steht in zwei Richtungen fest: unten UND am linken Rand. Solche
   Kreuzungspunkte brauchen die höhere Ebene, sonst schieben sich die Wertzellen beim
   waagerechten Blättern darüber und schneiden den Titel ab. */
.udm-dynmatrix-axis-row--foot-pinned > th.udm-dynmatrix-axis-row-title {
    z-index: 5;
}


/* --- Zellen --- */

.udm-dynmatrix-cell {
    text-align: center;
    cursor: pointer;
    /* Bezugspunkt für den Farbpunkt am Zellrand (udm-dynmatrix-cell-color-dot). */
    position: relative;
    border-right: 1px solid var(--udm-border-light, #e9ecef);
    border-bottom: 1px solid var(--udm-border-light, #e9ecef);
    transition: background-color 0.12s;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.udm-dynmatrix-cell:hover {
    background-color: var(--udm-hover, rgba(13, 110, 253, 0.10));
}

.udm-dynmatrix-cell-value {
    font-weight: 400;
}

/* Gefärbte Zellfläche im Modus „Text mit Vollfläche". Als Klasse statt fertiger
   Inline-Farbe, damit die Farbstärke auch hier greift und der Zell-Hintergrund einer
   Regel weiterhin gewinnt (der steht als Inline-Style). */
.udm-dynmatrix-cell--filled {
    background-color: color-mix(in srgb, var(--cell-color, transparent) var(--cell-fill, 100%), transparent);
}


/* --- Farb-Stil-Varianten (CellColorStyle, nur im Text-Modus aktiv) ---
   Die Zelle bekommt per Inline-Style die Variablen --cell-color (Farbe),
   --cell-fill (Flächenstärke) und --cell-ring (Ringstärke). Gesetzt werden sie in
   DynamicMatrixCellStyle; die Standardwerte hier gelten, wenn nichts gesetzt ist
   und stimmen mit denen im Gitter überein (udm_default.css).

   Farbstärke 100 % ergibt volle Fläche. Deshalb gibt es keinen eigenen
   Vollfarb-Stil mehr (entfallen 10.08.2026). */

/* Farbpunkt am Zellrand. Absolut gesetzt, damit der Wert in der Zelle mittig stehen
   bleibt und der Punkt nicht mitwandert. Die Lage entscheidet die Regel (links oder
   rechts), die Größe --dot-size. */
.udm-dynmatrix-cell-color-dot {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--dot-size, 0.55em);
    height: var(--dot-size, 0.55em);
    border-radius: 50%;
    background: color-mix(in srgb, var(--cell-color, var(--udm-primary, #0d6efd)) var(--cell-fill, 100%), transparent);
    flex-shrink: 0;
}

.udm-dynmatrix-cell-color-dot--start {
    left: 0.35em;
}

.udm-dynmatrix-cell-color-dot--end {
    right: 0.35em;
}

.udm-dynmatrix-cell-badge-soft {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cell-color, #0d6efd) var(--cell-fill, 22%), transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cell-color, #0d6efd) var(--cell-ring, 55%), transparent);
    /* color: kein Default — Body-Color erbt durch. Admin kann Forecolor explizit setzen. */
    font-weight: 500;
    font-size: 0.92em;
    line-height: 1.4;
}


/* --- Zell-Selektion (CurrentRow/CurrentCol im ViewModel) --- */

.udm-dynmatrix-cell-selected {
    outline: 2px solid var(--udm-primary, #0d6efd);
    outline-offset: -2px;
    box-shadow: inset 0 0 0 1px rgba(var(--udm-primary-rgb, 13, 110, 253), 0.12);
    /* z-index hebt Outline ueber Nachbar-Border, position:relative als Stacking-Kontext */
    position: relative;
    z-index: 1;
}

/* --- Ziehen und Ablegen ---
   Konzept: docs/03_features/zellen-drag-drop/konzept.md, B11.
   Die Klassen setzt das JavaScript (udmDynMatrixInitDragDrop), nicht Blazor: Waehrend der
   Bewegung soll nichts ueber die Leitung gehen. Die Hervorhebung zeigt, wo der Zeiger
   steht — ob dort eine Aktion greift, prueft der Server erst beim Ablegen. */

.udm-dynmatrix-cell-droptarget {
    outline: 2px dashed var(--bs-success, #198754);
    outline-offset: -2px;
    /* Als Bild-Ebene statt background-color: Die Zelle traegt ihre eigene Farbe aus der
       bedingten Darstellung, die soll sichtbar bleiben. */
    background-image: linear-gradient(rgba(var(--bs-success-rgb, 25, 135, 84), 0.10),
                                      rgba(var(--bs-success-rgb, 25, 135, 84), 0.10));
    /* Wie bei der Selektion: Outline ueber die Nachbar-Border heben. */
    position: relative;
    z-index: 2;
}

/* Die gegriffene Zelle tritt zurueck, solange sie gezogen wird. */
.udm-dynmatrix-cell-dragsource {
    opacity: 0.45;
}

/* Matrix-Container als Keyboard-Fokus-Target: dezenter Fokus-Ring sichtbar,
   aber nur bei Keyboard-Navigation (:focus-visible, nicht beim Maus-Klick). */
.udm-dynmatrix:focus {
    outline: none;
}

.udm-dynmatrix:focus-visible {
    outline: 2px solid rgba(var(--udm-primary-rgb, 13, 110, 253), 0.35);
    outline-offset: -2px;
}

.udm-dynmatrix-multi-indicator {
    font-size: 0.72em;
    color: var(--udm-text-muted, #6c757d);
    vertical-align: super;
    margin-left: 2px;
}


/* --- Zebra-Zeilen (visuelle Abgrenzung auch bei leeren Zellen) ---

   Zellen mit flaechiger Farbregel sind ausgenommen. Der Streifen ist ein Dauerzustand
   und wuerde die Farbregel dauerhaft verfaelschen — er setzt dieselbe Eigenschaft wie
   die Flaechen-Klasse und war mit zwei Klassen im Selektor der staerkere von beiden.

   Der Zell-Hintergrund einer Regel braucht die Ausnahme nicht: Er steht als Inline-Stil
   und schlaegt jede Klassen-Regel.

   Die Ausnahme hebt die Spezifitaet dieser Regel um eine Klasse. Der Zeilen-Hover
   darunter ist deshalb mitgezogen, sonst wuerde der Streifen ihn schlucken. */

.udm-dynmatrix tbody tr:nth-child(even) > td:not(.udm-dynmatrix-cell--filled) {
    background-color: var(--udm-surface-alt, #fafbfc);
}


/* --- Heute-Hervorhebung --- */

.udm-dynmatrix-today {
    background-color: rgba(var(--udm-primary-rgb, 13, 110, 253), 0.08) !important;
}

th.udm-dynmatrix-today {
    border-bottom: 2px solid var(--udm-primary, #0d6efd);
}


/* --- Zeilen-Hover (kein brightness-Filter: zerstoert custom Backcolor) ---

   Dieselbe Ausnahme wie beim Zebra-Streifen, aus zwei Gruenden: Die Spezifitaet muss
   den Streifen erreichen, sonst bliebe der Hover auf jeder zweiten Zeile aus. Und wo
   eine Farbregel die Flaeche besitzt, bleibt sie unangetastet — die Statusfarbe ist
   die Aussage der Zelle, der Hover nur Wegweiser. Umriss und Zeiger zeigen weiterhin,
   wo der Zeiger steht. */

.udm-dynmatrix-row-hover tbody tr:hover > td:not(.udm-dynmatrix-cell--filled) {
    background-color: var(--udm-hover, rgba(13, 110, 253, 0.08));
}

/* Die stehenbleibenden Spalten decken den Zeilen-Hover selbst ab, weil sie einen eigenen
   Hintergrund tragen. Die festgehaltenen Spalten am Ende gehören dazu — ohne sie zeigte
   nur dieser Bereich beim Überfahren einen anderen Hintergrund als der Rest der Zeile. */
.udm-dynmatrix-row-hover tbody tr:hover > td.udm-dynmatrix-fixed,
.udm-dynmatrix-row-hover tbody tr:hover > td.udm-dynmatrix-foot-col--pinned {
    background-color: var(--udm-surface-hover, #eef3fb);
}


/* --- Zellengroessen (3 klare Stufen, th + td synchron) --- */

/* --- Dichte aus den Anwendereinstellungen ---
   Greift, solange die Zellengröße des Ansichtselements auf "Standard" steht.
   Wie im nativen Grid wird NUR das Polster gestuft, nie die Schriftgröße: Die Stufen
   heißen "Abstände", nicht "Textgröße". Die Zellengrößen-Regeln stehen bewusst DAHINTER
   und gewinnen bei gleicher Spezifität. */

.udm-dynmatrix-density-spacious td,
.udm-dynmatrix-density-spacious th {
    padding: 0.55rem 0.55rem;
    line-height: 1.5;
}

.udm-dynmatrix-density-normal td,
.udm-dynmatrix-density-normal th {
    padding: 0.35rem 0.45rem;
    line-height: 1.4;
}

.udm-dynmatrix-density-compact td,
.udm-dynmatrix-density-compact th {
    padding: 0.2rem 0.35rem;
    line-height: 1.3;
}

.udm-dynmatrix-density-ultra td,
.udm-dynmatrix-density-ultra th {
    padding: 0.08rem 0.3rem;
    line-height: 1.2;
}


/* --- Zellengröße des Ansichtselements (hat Vorrang vor der Dichte) ---
   Schriftgrößen sind an der Basis ausgerichtet: Normal = 1em, also so groß wie in
   anderen Ansichtselementen. Vorher lag Normal bei 0.88em, wodurch die Matrix
   durchgängig kleiner wirkte als der Rest der Oberfläche. */

.udm-dynmatrix-compact td,
.udm-dynmatrix-compact th {
    padding: 0.2rem 0.35rem;
    font-size: 0.9em;
    line-height: 1.3;
}

.udm-dynmatrix-normal td,
.udm-dynmatrix-normal th {
    padding: 0.35rem 0.45rem;
    font-size: 1em;
    line-height: 1.4;
}

.udm-dynmatrix-comfortable td,
.udm-dynmatrix-comfortable th {
    padding: 0.55rem 0.55rem;
    font-size: 1.05em;
    line-height: 1.5;
}


/* --- Chip / Pill Zell-Darstellung (CellDisplayMode = Chip) ---
   Farb-Modell: Wenn der Admin via CellColorFieldname/Appearance eine Farbe konfiguriert,
   wird sie als CSS-Variable --cell-color am <td> gesetzt. Der Chip leitet daraus per
   color-mix() Background/Foreground/Akzent ab. Ohne --cell-color → neutrales Grau-Theme.
   Bewusst KEIN Auto-Hash: Farbe = Aussage des Admins, kein Automatismus. */

.udm-dynmatrix-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    padding: 2px 8px 2px 6px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--cell-color, #94a3b8) var(--cell-fill, 12%), transparent);
    border-left: 3px solid var(--cell-color, #94a3b8);
    /* color: kein Default — Body-Color erbt durch. Admin kann Forecolor explizit setzen. */
    font-weight: 500;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.3;
    overflow: hidden;
}

.udm-dynmatrix-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

/* Buchstaben-Kreis der Darstellung „Nur Initial". Die Größe steuert --initial-size
   (Stufen Klein/Mittel/Groß, siehe UdmCellRenderModeCss.BuildMarkerSizeVariable); die
   Schrift wächst mit, damit der Buchstabe im Kreis stets gleich sitzt.
   Die Zelle zentriert bereits waagerecht (text-align), hier fehlt nur die senkrechte
   Ausrichtung. */
.udm-dynmatrix-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    flex-shrink: 0;
    width: var(--initial-size, 1.9em);
    height: var(--initial-size, 1.9em);
    border-radius: 50%;
    background: color-mix(in srgb, var(--cell-color, #94a3b8) var(--cell-fill, 100%), transparent);
    /* Keine feste Schriftfarbe mehr: Sie kommt als Inline-Stil aus DynamicMatrixCellStyle
       und richtet sich nach der Helligkeit des Kreises. Weiß stand hier fest und war auf
       einer blass getönten Fläche nicht mehr lesbar. Der Wert hier greift nur, wenn gar
       keine Farbe im Spiel ist. */
    color: var(--udm-text, #1F2937);
    font-size: 0.88em;
    font-weight: 700;
    line-height: 1;
}


/* --- Scrollbar-Styling --- */

.udm-dynmatrix::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.udm-dynmatrix::-webkit-scrollbar-thumb {
    background: var(--udm-scrollbar, #c1c1c1);
    border-radius: 4px;
}

.udm-dynmatrix::-webkit-scrollbar-track {
    background: transparent;
}


/* ============================================================
   DynamicMatrix Config UI — Mini-Matrix-Navigator
   ============================================================ */

.udm-dmc {
    user-select: none;
}

/* --- Mini-Matrix-Tabelle --- */

.udm-dmc-grid {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 1px;
    background: var(--bs-border-color, #dee2e6);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 4px;
    overflow: hidden;
    font-size: 0.78em;
    margin-bottom: 0.5em;
}

.udm-dmc-corner {
    grid-row: 1;
    grid-column: 1;
    background: var(--bs-body-bg, #fff);
    padding: 0.3em 0.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
    font-size: 0.85em;
}

/* Spalten-Header (oben) */
.udm-dmc-col {
    grid-row: 1;
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.06);
    padding: 0.35em 0.4em;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    border-bottom: 2px solid transparent;
}

.udm-dmc-col:hover {
    background: rgba(var(--bs-primary-rgb), 0.12);
}

.udm-dmc-col.udm-dmc-active {
    background: rgba(var(--bs-primary-rgb), 0.15);
    border-bottom-color: var(--bs-primary);
}

/* Zeilen-Header (links) */
.udm-dmc-row {
    grid-column: 1;
    background: rgba(255, 152, 0, 0.07);
    padding: 0.35em 0.5em;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    display: flex;
    align-items: center;
    gap: 0.3em;
    white-space: nowrap;
    border-right: 2px solid transparent;
}

.udm-dmc-row:hover {
    background: rgba(255, 152, 0, 0.14);
}

.udm-dmc-row.udm-dmc-active {
    background: rgba(255, 152, 0, 0.18);
    border-right-color: #ff9800;
}

/* Zellen-Body */
.udm-dmc-cell {
    background: rgba(76, 175, 80, 0.05);
    padding: 0.3em 0.4em;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s;
    color: var(--bs-secondary-color);
}

.udm-dmc-cell:hover {
    background: rgba(76, 175, 80, 0.12);
}

.udm-dmc-cell.udm-dmc-active {
    background: rgba(76, 175, 80, 0.16);
}

/* DS-Name und Feldname */
.udm-dmc-ds {
    font-weight: 600;
    color: var(--bs-body-color);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.udm-dmc-field {
    font-size: 0.9em;
    color: var(--bs-secondary-color);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.udm-dmc-placeholder {
    color: var(--bs-secondary-color);
    opacity: 0.5;
    font-style: italic;
}

/* Status-Indikator */
.udm-dmc-status {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.udm-dmc-status-ok { background: var(--bs-success, #198754); }
.udm-dmc-status-missing { background: var(--bs-warning, #ffc107); }

/* --- Detail-Panel --- */

.udm-dmc-detail {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 4px;
    padding: 0.5em 0.6em;
}

.udm-dmc-detail-header {
    font-size: 0.8em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-bottom: 0.3em;
    margin-bottom: 0.4em;
    border-bottom: 2px solid var(--bs-border-color);
}

.udm-dmc-detail-rows .udm-dmc-detail-header { color: #e65100; border-bottom-color: #ff9800; }
.udm-dmc-detail-columns .udm-dmc-detail-header { color: var(--bs-primary); border-bottom-color: var(--bs-primary); }
.udm-dmc-detail-cells .udm-dmc-detail-header { color: #2e7d32; border-bottom-color: #4caf50; }
.udm-dmc-detail-display .udm-dmc-detail-header { color: var(--bs-secondary-color); border-bottom-color: var(--bs-secondary-color); }

/* Gruppen-Überschrift innerhalb eines Bereichs. Eine Stufe leiser als die Bereichs-
   Überschrift darüber: dünne Linie statt kräftiger, gedämpfte Farbe. Trennt die Themen
   im Bereich „Darstellung" (Aussehen, Hervorheben, Grenzen). */
.udm-dmc-group-title {
    font-size: 0.78em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
    padding-bottom: 0.2em;
    margin: 0.7em 0 0.35em;
    border-bottom: 1px solid var(--bs-border-color);
}

/* Die erste Gruppe steht direkt unter der Bereichs-Überschrift und braucht keinen Abstand. */
.udm-dmc-detail-header + .udm-dmc-group-title {
    margin-top: 0;
}


/* Format-Override-Input direkt unter Feld-Selects: kleiner, dezenter */
.udm-dmc-format-override {
    margin-top: 0.2em;
}

.udm-dmc-format-override input {
    font-size: 0.82em !important;
    padding: 0.2em 0.45em !important;
    font-family: 'Consolas', 'Menlo', monospace;
    opacity: 0.85;
}

.udm-dmc-format-override input:focus {
    opacity: 1;
}

.udm-dmc-format-override input::placeholder {
    font-family: system-ui, sans-serif;
    font-style: italic;
    opacity: 0.6;
}