html, body, #app {
user-select: none;
}
.udm-selectable {
user-select: text;
}
code {
user-select: text;
}
/* ===== DxPopup: Stabiles Flex-Layout =====
CssClass="udm-popup-flex" — DEFINIERT IN udm_default.css (Shared).
Damit beide Clients (Admin + User) das Pattern nutzen koennen. */
.udm-code-editor {
font-family: monospace;
font-size: 0.85em;
width: 100%;
}
/* ===== Code-Editor Redesign V1 ===== */
.udm-code-hook-tabs {
display: flex;
gap: 0.125em;
padding: 0.25em 0.5em;
border-bottom: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
overflow-x: auto;
flex-shrink: 0;
}
.udm-code-hook-tab {
display: inline-flex;
align-items: center;
gap: 0.35em;
padding: 0.3em 0.75em;
border: 1px solid transparent;
border-bottom: 2px solid transparent;
background: none;
cursor: pointer;
white-space: nowrap;
color: var(--bs-body-color);
transition: border-color 0.15s, background-color 0.15s;
}
.udm-code-hook-tab:hover {
background-color: rgba(var(--bs-primary-rgb), 0.08);
}
.udm-code-hook-tab.active {
border-bottom-color: var(--bs-primary);
font-weight: 600;
}
.udm-code-hook-indicator {
display: inline-block;
width: 0.5em;
height: 0.5em;
border-radius: 50%;
background-color: var(--bs-primary);
}
.udm-code-search-box {
border-bottom: 1px solid var(--bs-border-color);
flex-shrink: 0;
}
/* Gruppen-Header Level 0 (Dialog, Funktionen) — nicht sticky */
.udm-code-api-group-header {
display: flex;
align-items: center;
gap: 0.4em;
padding: 0.45em 0.6em;
margin-top: 0.4em;
cursor: pointer;
background: var(--bs-secondary-bg, rgba(var(--bs-secondary-rgb), 0.15));
border-bottom: 1px solid var(--bs-border-color);
border-top: 1px solid var(--bs-border-color);
user-select: none;
transition: background-color 0.1s;
}
.udm-code-api-group-header:first-child {
margin-top: 0;
border-top: none;
}
.udm-code-api-group-header:hover {
background: rgba(var(--bs-secondary-rgb), 0.22);
}
/* Kinder-Container — Einrueckung fuer Hierarchie */
.udm-code-api-children {
padding-left: 0.8em;
border-left: 2px solid rgba(var(--bs-primary-rgb), 0.1);
}
/* Subheader (Level 1: DataItem, Form etc.) — sticky innerhalb der Gruppe */
.udm-code-api-subheader {
background: var(--bs-body-bg, #fff);
position: sticky;
top: 0;
z-index: 1;
margin-top: 0;
border-top: none;
border-bottom: 1px solid rgba(var(--bs-secondary-rgb), 0.12);
padding: 0.3em 0.5em;
}
.udm-code-api-subheader:hover {
background: rgba(var(--bs-secondary-rgb), 0.06);
}
.udm-code-api-chevron {
font-size: 0.65em;
color: var(--bs-secondary-color);
flex-shrink: 0;
align-self: flex-start;
margin-top: 0.3em;
}
/* Gruppen-Info (Titel + Beschreibung) */
.udm-code-api-group-info {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: hidden;
min-width: 0;
}
/* Level-0 Titel — gross und fett */
.udm-code-api-group-title {
font-weight: 700;
font-size: 1.05em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Level-1+ Titel — kleiner, normales Gewicht */
.udm-code-api-subheader .udm-code-api-group-title {
font-weight: 600;
font-size: 0.9em;
font-style: normal;
}
.udm-code-api-group-desc {
font-size: 0.82em;
color: var(--bs-secondary-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-style: italic;
}
/* Level-1 Beschreibung etwas kleiner */
.udm-code-api-subheader .udm-code-api-group-desc {
font-size: 0.75em;
}
.udm-code-api-group-count {
font-size: 0.7em;
color: var(--bs-secondary-color);
background: rgba(var(--bs-secondary-rgb), 0.15);
padding: 0.1em 0.45em;
border-radius: 0.75em;
flex-shrink: 0;
align-self: flex-start;
margin-top: 0.15em;
}
.udm-code-api-subheader .udm-code-api-group-count {
background: rgba(var(--bs-secondary-rgb), 0.08);
}
/* Einzelnes Item (Methode / Feld) — mit visueller Trennung */
.udm-code-api-item {
display: flex;
align-items: baseline;
gap: 0.4em;
padding: 0.3em 0.5em 0.3em 1.4em;
cursor: pointer;
transition: background-color 0.1s;
overflow: hidden;
border-bottom: 1px solid rgba(var(--bs-secondary-rgb), 0.06);
}
.udm-code-api-item:nth-child(odd) {
background-color: rgba(var(--bs-secondary-rgb), 0.025);
}
.udm-code-api-item:hover {
background-color: rgba(var(--bs-primary-rgb), 0.08);
}
.udm-code-api-item.selected {
background-color: rgba(var(--bs-primary-rgb), 0.14);
border-left: 2px solid var(--bs-primary);
padding-left: calc(1.4em - 2px);
}
.udm-code-api-item-name {
font-size: 0.82em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.udm-code-api-item-return {
font-size: 0.72em;
color: var(--bs-secondary-color);
white-space: nowrap;
margin-left: auto;
flex-shrink: 0;
}
.udm-uielement {
position: relative;
cursor: pointer;
}
.udm-uielement .codebadge {
position: absolute;
top: 4px;
right: 2px;
padding: 0.15rem 0.25rem;
background: red;
color: white;
font-size: 0.625em;
border-radius: 999px;
align-content: center;
}
.udm-uielement .rulesbadge {
position: absolute;
top: 4px;
right: 2px;
padding: 0.15rem 0.25rem;
background: var(--bs-primary);
color: #fff;
font-size: 0.625em;
border-radius: 999px;
align-content: center;
}
.udm-uielement .codebadge + .rulesbadge {
right: auto;
left: 2px;
}
.udm-codeeditor-methods {
max-height: 300px;
border: none;
margin-top: 0.5rem;
overflow-y: auto;
}
.udm-codeeditor-fields {
height: calc(100vh - 12rem);
}
.grid-hidden-header {
display: none;
}
.hidden-text {
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s;
}
.hover-container:hover .hidden-text {
visibility: visible;
opacity: 1;
}
.hover-container:active .hidden-text {
visibility: visible;
opacity: 1;
}
.udm-btn-code-copy {
border: none;
padding: 0.25rem;
max-height: 2rem;
}
.udm-btn-code-copy:hover {
background-color: rgba(var(--bs-primary-rgb), 0.5);
}
.udm-dialog-settings {
height: calc(100vh - 15rem);
overflow-y: auto;
}
.udm-dialog-root-element {
height: calc(100vh - 15rem);
width: 100%;
overflow-y: auto;
}
/* ========================
Dialog-Designer: Dry-Renderer Canvas
======================== */
.udm-designer-canvas {
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
.udm-designer-ruler {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 0.25rem;
padding: 0 0.75rem;
border-bottom: 1px solid var(--bs-border-color);
}
.udm-designer-ruler > div {
text-align: center;
font-size: 0.55em;
color: var(--bs-secondary-color);
padding: 0.15rem 0;
font-weight: 600;
font-variant-numeric: tabular-nums;
background: var(--bs-tertiary-bg);
border-left: 1px solid rgba(0, 0, 0, 0.06);
border-right: 1px solid rgba(0, 0, 0, 0.06);
}
.udm-designer-body {
position: relative;
padding: 0.75rem;
background: color-mix(in srgb, var(--bs-body-bg) 95%, var(--bs-secondary-bg));
flex: 1;
overflow-y: auto;
font-size: 1rem;
}
.udm-designer-guides {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 0.25rem;
padding: 0 0.75rem;
pointer-events: none;
z-index: 0;
}
.udm-designer-guides > div {
border-left: 1px solid rgba(0, 0, 0, 0.03);
border-right: 1px solid rgba(0, 0, 0, 0.03);
}
/* Designer: Alle Elemente bekommen transparenten 2px Rahmen (Reserve fuer Selektion) */
.udm-designer-body .udm-layout-group:not(.udm-layout-group--root),
.udm-designer-body .udm-layout-item,
.udm-designer-body .udm-tabbed-group {
border: 2px solid transparent;
border-radius: 4px;
cursor: pointer;
}
/* Designer: Hover */
.udm-designer-body .udm-layout-group:not(.udm-layout-group--root):hover,
.udm-designer-body .udm-layout-item:hover,
.udm-designer-body .udm-tabbed-group:hover {
border-color: rgba(var(--bs-primary-rgb), 0.2);
background: rgba(var(--bs-primary-rgb), 0.02);
}
/* Designer: Aktiv selektiertes Element */
.udm-designer-selected {
border-color: var(--bs-primary) !important;
background: rgba(var(--bs-primary-rgb), 0.04) !important;
}
/* Designer: Input-Platzhalter */
.udm-designer-input {
height: 1.875em;
border: 1px solid var(--bs-border-color);
border-radius: 4px;
background: var(--bs-body-bg);
padding: 0 0.5em;
font-size: 0.82em;
color: var(--bs-secondary-color);
display: flex;
align-items: center;
width: 100%;
}
.udm-designer-input--memo {
height: auto;
min-height: 3.2em;
align-items: flex-start;
padding-top: 0.35em;
}
.udm-designer-placeholder {
color: var(--bs-secondary-color);
opacity: 0.5;
}
.udm-designer-trail-icon {
margin-left: auto;
color: var(--bs-secondary-color);
font-size: 0.7em;
}
.udm-designer-switch {
border: 1px solid rgba(var(--bs-primary-rgb), 0.4);
border-radius: 4px;
display: inline-flex;
overflow: hidden;
background: rgba(var(--bs-primary-rgb), 0.06);
font-size: 0.75em;
}
.udm-designer-switch > span {
padding: 0.15em 0.6em;
color: var(--bs-secondary-color);
}
.udm-designer-switch > span:first-child {
background: rgba(var(--bs-primary-rgb), 0.15);
font-weight: 600;
}
/* Designer: Items mit fester Höhe — Content füllt verfügbaren Platz */
.udm-layout-item--fixed-height {
display: flex;
flex-direction: column;
}
.udm-layout-item--fixed-height > .udm-layout-item__content {
flex: 1;
min-height: 0;
}
.udm-layout-item--fixed-height > .udm-layout-item__content > * {
height: 100%;
}
/* Designer: ViewElement / Subdialog Platzhalter */
.udm-designer-view-placeholder {
border: 1px dashed var(--bs-border-color);
border-radius: 4px;
background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(0, 0, 0, 0.015) 8px, rgba(0, 0, 0, 0.015) 16px);
padding: 0.6em;
color: var(--bs-secondary-color);
font-size: 0.85em;
min-height: 3.75em;
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: 0.5em;
}
.udm-designer-view-placeholder > i {
font-size: 1.5em;
opacity: 0.5;
}
.udm-designer-view-name {
font-size: 1em;
font-weight: 600;
}
.udm-designer-view-type {
font-size: 0.85em;
opacity: 0.7;
}
/* Designer: Unsichtbare Gruppen (HideBorder) sichtbar machen */
.udm-designer-invisible-group {
border: 1px dashed rgba(var(--bs-primary-rgb), 0.2);
border-radius: 4px;
}
.udm-designer-invisible-group:hover {
border-color: rgba(var(--bs-primary-rgb), 0.45);
background: rgba(var(--bs-primary-rgb), 0.02);
}
.udm-designer-invisible-group__header {
font-size: 0.65em;
color: rgba(var(--bs-primary-rgb), 0.5);
padding: 0.15em 0.4em;
display: flex;
align-items: center;
gap: 0.3em;
flex-shrink: 0;
}
/* Designer: Code/Regeln-Badges (inline) */
.udm-designer-badges-inline {
margin-left: auto;
display: inline-flex;
gap: 0.2em;
flex-shrink: 0;
}
/* Designer: Badges-Overlay (rechts oben, fuer Elemente ohne Header) */
.udm-designer-badges-overlay {
position: absolute;
top: 0.4em;
right: 0.4em;
z-index: 1;
}
/* Designer: Elemente brauchen position:relative fuer Badge-Overlay */
.udm-designer-body .udm-layout-group:not(.udm-layout-group--root) {
position: relative;
}
/* Designer: Label + Feldname + Badges in einer Zeile */
.udm-designer-item-label-row {
display: flex;
align-items: center;
gap: 0.3em;
}
.udm-designer-fieldname {
font-size: 0.65em;
color: var(--bs-secondary-color);
font-family: 'Consolas', 'SF Mono', monospace;
opacity: 0.7;
}
.udm-designer-badge {
font-size: 0.6em;
font-weight: 700;
padding: 0.1em 0.35em;
border-radius: 999px;
cursor: default;
}
.udm-designer-badge--code {
background: #dc3545;
color: #fff;
}
.udm-designer-badge--rules {
background: var(--bs-primary);
color: #fff;
}
/* ========================
Dialog-Designer: Drag & Drop
======================== */
.udm-drag-handle {
cursor: grab;
opacity: 0;
transition: opacity 0.15s;
padding: 0 0.25em;
color: var(--bs-secondary-color);
position: absolute;
left: 0.15em;
top: 50%;
transform: translateY(-50%);
z-index: 2;
font-size: 0.7em;
}
/* Inline-Variante fuer Gruppen-Header */
.udm-drag-handle-inline {
cursor: grab;
opacity: 0;
transition: opacity 0.15s;
color: var(--bs-secondary-color);
font-size: 0.85em;
flex-shrink: 0;
}
.udm-layout-item:hover > .udm-drag-handle,
.udm-tabbed-group:hover > .udm-drag-handle {
opacity: 0.4;
}
.udm-layout-group:not(.udm-layout-group--root):hover .udm-drag-handle-inline {
opacity: 0.4;
}
.udm-drag-handle:hover,
.udm-drag-handle-inline:hover {
opacity: 1 !important;
}
.udm-dragging {
opacity: 0.35;
}
.udm-drop-before {
border-top: 2px solid var(--bs-primary) !important;
}
.udm-drop-after {
border-bottom: 2px solid var(--bs-primary) !important;
}
.udm-drop-container-active {
background: rgba(var(--bs-primary-rgb), 0.04);
min-height: 2em;
}
/* Waehrend Drag: Gruppen-Header als Drop-Target hervorheben */
.udm-drag-target-ready > .udm-layout-group__header {
padding: 0.4em 0.5em;
border-bottom: 2px dashed rgba(var(--bs-primary-rgb), 0.25);
cursor: default;
}
.udm-drag-target-ready > .udm-designer-invisible-group__header {
padding: 0.3em 0.4em;
border-bottom: 2px dashed rgba(var(--bs-primary-rgb), 0.25);
cursor: default;
}
.udm-drag-target-ready > .udm-layout-group__header:hover,
.udm-drag-target-ready > .udm-designer-invisible-group__header:hover {
background: rgba(var(--bs-primary-rgb), 0.08);
border-bottom-color: var(--bs-primary);
}
/* ========================
Dialog-Designer: Settings Panel
======================== */
/* Sticky Header */
.ds-header {
padding: 0.6rem 0.75rem;
border-bottom: 1px solid var(--bs-border-color);
background: var(--bs-tertiary-bg);
position: sticky;
top: 0;
z-index: 10;
}
.ds-header__type {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.2rem;
}
.ds-header__type i {
font-size: 1.1em;
color: var(--bs-primary);
}
.ds-header__type span {
font-size: 0.8em;
font-weight: 600;
color: var(--bs-primary);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.ds-header__title {
font-size: 1.1em;
font-weight: 700;
line-height: 1.2;
}
.ds-header__meta {
font-size: 0.78em;
color: var(--bs-secondary-color);
margin-top: 0.1em;
font-family: 'Consolas', 'SF Mono', monospace;
}
.ds-header__desc {
font-size: 0.78em;
color: var(--bs-secondary-color);
margin-top: 0.15em;
line-height: 1.3;
}
.ds-header__badges {
position: absolute;
top: 0.5em;
right: 0.6em;
display: flex;
gap: 0.3em;
}
.ds-badge {
font-size: 0.7em;
font-weight: 600;
padding: 0.15em 0.5em;
border-radius: 4px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.3em;
border: 1px solid transparent;
}
.ds-badge--code {
background: rgba(220, 53, 69, 0.1);
color: var(--bs-danger);
border-color: rgba(220, 53, 69, 0.25);
}
.ds-badge--code:hover {
background: rgba(220, 53, 69, 0.2);
}
.ds-badge--rules {
background: rgba(var(--bs-primary-rgb), 0.1);
color: var(--bs-primary);
border-color: rgba(var(--bs-primary-rgb), 0.25);
}
/* === Ds-Config Controls (Designer Settings Variante) === */
.ds-cfg-form {
padding: 0;
container-type: inline-size;
container-name: ds-cfg;
}
/* Placeholder (NullText) in Konfigurations-Formularen klar vom echten Wert abheben.
Standard-Placeholder ist farblich kaum unterscheidbar → kursiv + gedaempfte Farbe
+ reduzierte Deckkraft. Gilt fuer beide Config-Form-Familien (Ds* und Udm*) und
sowohl Text- (DxTextBox/DxSpinEdit → input) als auch Memo-Felder (DxMemo → textarea). */
.ds-cfg-form input::placeholder,
.udm-cfg-form input::placeholder,
.ds-cfg-form textarea::placeholder,
.udm-cfg-form textarea::placeholder {
font-style: italic;
color: var(--bs-secondary-color);
opacity: 0.6;
}
/* Section: Collapsible, dark Header */
.ds-cfg-section {
border-bottom: 1px solid var(--bs-border-color);
}
.ds-cfg-section__header {
display: flex;
align-items: center;
gap: 0.4em;
padding: 0.45em 0.75em;
cursor: pointer;
font-weight: 700;
color: var(--bs-primary);
text-transform: uppercase;
background: rgba(var(--bs-primary-rgb), 0.08);
border-top: 1px solid rgba(var(--bs-primary-rgb), 0.5);
user-select: none;
list-style: none;
}
.ds-cfg-section__header:hover {
background: rgba(var(--bs-primary-rgb), 0.12);
}
/* Chevron rechts via ::after */
.ds-cfg-section__header::after {
content: '\f077';
font-family: 'Font Awesome 6 Pro';
font-weight: 900;
font-size: 0.7em;
margin-left: auto;
opacity: 0.75;
transition: transform 0.15s;
}
.ds-cfg-section:not([open]) > .ds-cfg-section__header::after {
transform: rotate(180deg);
opacity: 0.4;
}
.ds-cfg-section__header::-webkit-details-marker { display: none; }
/* Das ::before entfernen (Icon kommt jetzt per Parameter) */
.ds-cfg-section__header::before { display: none; }
.ds-cfg-section__body {
padding: 0.5em 0.75em 0.6em;
}
/* Row */
.ds-cfg-row {
display: grid;
gap: 0.4em 0.75em;
margin-bottom: 0.35em;
}
.ds-cfg-row[data-cols="2"] { grid-template-columns: 1fr 1fr; }
.ds-cfg-row[data-cols="3"] { grid-template-columns: 1fr 1fr 1fr; }
/* Field + Label: die Beschriftung wird weiter unten im Block "Konfig-Formulare"
gestaltet. Hier bewusst keine Regel mehr, damit es nur eine Quelle gibt. */
/* Responsive: Umbruch bevor die Felder unter die Mindestbreite rutschen.
ACHTUNG: EIN Klammeraffe. Das doppelte Zeichen gehoert nur in Razor-Dateien,
in einer .css-Datei macht es die ganze Regel ungueltig. */
@container ds-cfg (max-width: 28em) {
.ds-cfg-row[data-cols="2"],
.ds-cfg-row[data-cols="3"] {
grid-template-columns: 1fr;
}
}
@container ds-cfg (min-width: 28.01em) and (max-width: 42em) {
.ds-cfg-row[data-cols="3"] {
grid-template-columns: repeat(2, minmax(var(--udm-cfg-field-min), 1fr));
}
}
/* AM Info Page: Pfad-Anzeige unter dem Titel */
.am-path-text {
line-height: 1.2;
margin-bottom: -2px;
font-size: 0.85em;
}
/* ===== ChangeLog-Liste (global — UdmChangeLogList, Monitoring-Startseite, KI-Panel) ===== */
.udm-changelog-list {
display: flex;
flex-direction: column;
gap: 0.2em;
}
.udm-changelog-item {
display: flex;
align-items: center;
gap: 0.4em;
padding: 0.15em 0.4em;
border-radius: 0.3em;
cursor: pointer;
transition: background 0.12s;
}
.udm-changelog-item:hover {
background: rgba(var(--bs-primary-rgb), 0.06);
}
.cl-icon-container {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.88em;
color: var(--bs-secondary-color);
flex-shrink: 0;
}
.cl-op-badge {
position: absolute;
bottom: -3px;
right: -5px;
width: 0.55em;
height: 0.55em;
border-radius: 50%;
border: 1.5px solid var(--bs-body-bg);
}
.cl-op-badge.badge-insert { background: #10b981; }
.cl-op-badge.badge-update { background: #f59e0b; }
.cl-op-badge.badge-delete { background: #ef4444; }
.udm-changelog-item.cl-deleted {
cursor: default;
opacity: 0.55;
}
.udm-changelog-item.cl-deleted:hover {
background: transparent;
}
.udm-changelog-item .cl-name {
font-size: 0.82em;
font-weight: 500;
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.udm-changelog-item .cl-type-icon {
font-size: 0.72em;
color: var(--bs-secondary-color);
flex-shrink: 0;
}
.cl-op-icon {
font-size: 0.82em;
flex-shrink: 0;
}
/* Objektart-Badge (z.B. "Objekt", "Dialog") */
.cl-type-badge {
font-size: 0.65em;
color: var(--bs-secondary-color);
background: var(--bs-tertiary-bg);
border: 1px solid var(--bs-border-color);
border-radius: 0.25em;
padding: 0.05em 0.4em;
white-space: nowrap;
flex-shrink: 0;
}
/* ===== UDM Time Badge (global einheitlich) ===== */
.udm-time-badge {
display: inline-flex;
align-items: center;
font-size: 0.68em;
font-family: tabular-nums, monospace;
padding: 0.1em 0.35em;
border-radius: 0.2em;
white-space: nowrap;
flex-shrink: 0;
width: 3.6em;
text-align: center;
justify-content: center;
background: var(--bs-tertiary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-secondary-color);
}
/* Gruen-Stufen: < 7 Tage (frisch) — Textfarben auf WCAG-AA-Kontrast (>=4.5:1) gedunkelt */
.udm-time-badge.time-green-1 { background: rgba(5, 122, 85, 0.15); color: #057a55; border-color: rgba(5, 122, 85, 0.3); }
.udm-time-badge.time-green-2 { background: rgba(16, 185, 129, 0.12); color: #06724e; border-color: rgba(16, 185, 129, 0.25); }
.udm-time-badge.time-green-3 { background: rgba(52, 211, 153, 0.1); color: #0a6444; border-color: rgba(52, 211, 153, 0.2); }
/* Gelb/Braun-Stufen: 7-60 Tage (mittel) */
.udm-time-badge.time-amber-1 { background: rgba(245, 158, 11, 0.12); color: #b45309; border-color: rgba(245, 158, 11, 0.25); }
.udm-time-badge.time-amber-2 { background: rgba(217, 119, 6, 0.12); color: #92400e; border-color: rgba(217, 119, 6, 0.25); }
.udm-time-badge.time-amber-3 { background: rgba(180, 83, 9, 0.1); color: #78350f; border-color: rgba(180, 83, 9, 0.2); }
/* Grau-Stufen: > 60 Tage (alt) — theme-adaptiv & lesbar (statt fast-weisser Hex, die im Popup
unsichtbar waren). Alterung wird ueber den Hintergrund gedaempft, der Text bleibt >=4.5:1. */
.udm-time-badge.time-gray-1 { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); border-color: var(--bs-border-color); }
.udm-time-badge.time-gray-2 { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); border-color: var(--bs-border-color); }
.udm-time-badge.time-gray-3 { background: transparent; color: var(--bs-secondary-color); border-color: var(--bs-border-color-translucent); }
.udm-time-badge.time-none { background: transparent; color: var(--bs-secondary-color); border-style: dashed; }
/* Zukunft-Stufen: Standard-Palette (Blau/Cyan) */
.udm-time-badge.time-future-1 { background: rgba(23, 162, 184, 0.15); color: #0c7c8a; border-color: rgba(23, 162, 184, 0.3); }
.udm-time-badge.time-future-2 { background: rgba(13, 110, 253, 0.12); color: #0a58ca; border-color: rgba(13, 110, 253, 0.25); }
.udm-time-badge.time-future-3 { background: rgba(102, 16, 242, 0.1); color: #6610f2; border-color: rgba(102, 16, 242, 0.2); }
/* ElementMapping Control: Status-Badges (legacy) */
.udm-em-badges {
display: flex;
gap: 0.25em;
margin-top: 0.15em;
}
.udm-em-badges .badge {
font-size: 0.75em;
}
/* ===== ElementMapping Quick-Info ===== */
.udm-em-quickinfo {
width: 100%;
border: 1px solid var(--bs-border-color);
border-radius: 0.375em;
overflow: hidden;
}
.udm-em-quickinfo-row {
display: flex;
align-items: center;
gap: 0.5em;
padding: 0.35em 0.75em;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.udm-em-quickinfo-row:last-of-type {
border-bottom: none;
}
.udm-em-qi-label {
min-width: 6em;
font-weight: 600;
color: var(--bs-secondary-color);
font-size: 0.85em;
}
.udm-em-qi-target {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.udm-em-qi-badges {
display: flex;
gap: 0.25em;
flex-shrink: 0;
}
.udm-em-qi-badges .badge {
font-size: 0.7em;
}
.udm-em-quickinfo-action {
padding: 0.35em 0.75em;
display: flex;
justify-content: flex-end;
background: rgba(0, 0, 0, 0.015);
border-top: 1px solid var(--bs-border-color);
}
/* ===== ElementMapping Subdialog ===== */
.udm-em-tab-header {
display: flex;
gap: 0.25em;
border-bottom: 1px solid var(--bs-border-color);
padding: 0.5em 0.75em 0;
}
.udm-em-tab-btn {
background: none;
border: none;
padding: 0.4em 0.75em;
cursor: pointer;
color: var(--bs-secondary-color);
border-bottom: 2px solid transparent;
font-size: 0.9em;
transition: color 0.15s, border-color 0.15s;
}
.udm-em-tab-btn:hover {
color: var(--bs-body-color);
}
.udm-em-tab-btn.active {
color: var(--bs-primary);
border-bottom-color: var(--bs-primary);
font-weight: 600;
}
/* Aufklappbare Mapping-Gruppen im Subdialog */
.udm-em-mapping-group {
margin-bottom: 0.25em;
}
/* Header-Inhalt: Kontext · Ziel · Badges */
.udm-em-mapping-group .udm-em-header-content {
display: flex;
align-items: center;
gap: 0.5em;
flex: 1;
min-width: 0;
font-weight: normal;
}
.udm-em-mapping-group .udm-em-header-context {
font-weight: 600;
flex-shrink: 0;
color: var(--bs-body-color);
}
.udm-em-mapping-group .udm-em-header-target {
font-weight: 400;
color: var(--bs-secondary-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.udm-em-mapping-group .udm-em-header-badge {
font-size: 0.7em;
flex-shrink: 0;
}
/* ══════════════════════════════════════════════════
ElementMapping Rows (.udm-em-mapping)
Farbige Akzentlinie links. Inhalt via BS-Grid.
══════════════════════════════════════════════════ */
.udm-em-mapping {
padding: 0.4em 0.5em;
margin-bottom: 0.35em;
border-left: 3px solid;
border-radius: 0 4px 4px 0;
background: var(--bs-tertiary-bg, #f8f9fa);
}
/* Spaltenueberschrift ueber den Zeilen. Einmal je Liste, damit erkennbar ist,
welche Spalte die Quelle und welche das Ziel ist. Das Innenmass entspricht
.udm-em-mapping (0.5em Polster plus 3px Akzentlinie), damit die Ueberschriften
genau ueber den Eingabefeldern stehen. */
.udm-em-colhead-row {
padding-left: calc(0.5em + 3px);
padding-right: 0.5em;
margin-bottom: 0.1em;
}
.udm-em-colhead {
font-size: 0.72em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--bs-secondary-color);
}
/* Kurzerklaerung unter einer Liste. */
.udm-em-section-hint {
font-size: 0.78em;
color: var(--bs-secondary-color);
margin-top: 0.4em;
}
/* ══════════════════════════════════════════════════
Hinzufuegen-Zeile (.udm-em-add-strip)
Sammelt alle Listen, die noch leer sind. Gestrichelter Rand als Hinweis
"hier ist noch nichts". Erst der Klick erzeugt die Karte.
══════════════════════════════════════════════════ */
.udm-em-add-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4em;
margin-top: 0.5em;
padding-top: 0.6em;
border-top: 1px dashed var(--bs-border-color);
}
.udm-em-add-label {
font-size: 0.75em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--bs-secondary-color);
margin-right: 0.2em;
}
.udm-em-add-chip {
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.25em 0.8em;
font-size: 0.85em;
color: var(--bs-primary);
background: rgba(var(--bs-primary-rgb), 0.04);
border: 1px dashed rgba(var(--bs-primary-rgb), 0.55);
border-radius: 1.2em;
cursor: pointer;
}
.udm-em-add-chip:hover {
background: rgba(var(--bs-primary-rgb), 0.1);
border-style: solid;
}
/* Aktions-Knoepfe im Klapp-Kopf einer Verknuepfung. Stehen rechts vor dem
Chevron. Der Chevron hat selbst margin-left:auto und bleibt ganz aussen.
Die Kopfzeile selbst ist GROSSGESCHRIEBEN und fett — beides wird hier
zurueckgesetzt, sonst schreien die Knopf-Beschriftungen. */
.udm-em-head-actions {
display: flex;
justify-content: flex-end;
/* Nimmt den freien Raum und schiebt die Knoepfe nach rechts. Bewusst KEIN
margin-left:auto: der Chevron hat selbst eines, zwei Auto-Raender wuerden
den freien Raum teilen und die Knoepfe in die Mitte ruecken. Schrumpfen ist
aus (0), damit die Beschriftungen bei schmalem Panel nicht zerquetscht werden. */
flex: 1 0 auto;
gap: 0.35em;
padding-left: 0.5em;
font-size: 0.9em;
font-weight: 400;
text-transform: none;
letter-spacing: normal;
}
/* ══════════════════════════════════════════════════
UdmFieldOverrideRow (.udm-fo)
Tri-State Dropdowns mit Label darueber.
══════════════════════════════════════════════════ */
.udm-fo {
display: flex;
gap: 0.4em;
align-items: start;
}
.udm-fo-item { flex: 1 1 auto; }
.udm-fo-label {
font-size: 0.65em;
color: var(--bs-secondary-color, #6c757d);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
margin-bottom: 0.15em;
}
/* ===== AddColumnWizard — Propagation ===== */
.acw-propagation-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
}
@container udm-cfg (max-width: 600px) {
.acw-propagation-grid { grid-template-columns: 1fr; }
}
.acw-target-list {
list-style: none;
padding: 0;
margin: 0;
}
.acw-target-item {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.15rem 0;
}
/* ===== UdmColorPicker ===== */
/* UdmColorPicker-Styles wurden nach Shared (udm_buttons.css) verschoben — Admin laedt
die Shared-CSS ohnehin mit. Kein Duplikat mehr noetig. */
/* ===== UdmFieldRefPicker =====
Modernes Popover-Design fuer Feld-Auswahl in Admin-UI.
Varianten: Text-Fallback (ohne Source), Trigger+Popover (mit Source),
optional Rolle-Chips (Multi-Role). */
.udm-fieldref-picker { position: relative; display: block; width: 100%; }
.udm-fieldref-trigger {
box-sizing: border-box;
display: flex; align-items: center; gap: .45em;
padding: .2em .6em; margin: 0; width: 100%; min-height: 1.85em;
background-color: #fff !important; background-image: none !important;
border: 1px solid var(--bs-border-color, #ced4da);
border-radius: .25em; color: var(--bs-body-color, #212529);
cursor: pointer; transition: border-color .15s, box-shadow .15s;
font-family: inherit; font-size: inherit; line-height: 1.4; text-align: left;
appearance: none; -webkit-appearance: none;
}
.udm-fieldref-trigger:hover:not(:disabled) { border-color: #86b7fe; }
.udm-fieldref-trigger:focus { outline: 0; border-color: #86b7fe; box-shadow: 0 0 0 .2em rgba(13,110,253,.2); }
.udm-fieldref-trigger.is-open { border-color: var(--bs-primary, #0d6efd); }
.udm-fieldref-trigger:disabled { opacity: .65; cursor: not-allowed; }
.udm-fieldref-trigger__icon { color: var(--bs-primary, #0d6efd); width: 1em; text-align: center; flex-shrink: 0; font-size: .9em; }
.udm-fieldref-trigger__text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.udm-fieldref-trigger__text.is-placeholder { color: var(--bs-secondary-color, #6c757d); }
.udm-fieldref-trigger__role { color: var(--bs-secondary-color, #6c757d); font-size: .85em; margin-left: .25em; }
.udm-fieldref-trigger__chevron { font-size: .7em; color: var(--bs-secondary-color, #6c757d); flex-shrink: 0; margin-left: auto; }
.udm-fieldref-popup {
display: flex; flex-direction: column; gap: .5rem;
min-width: 22rem;
}
.udm-fieldref-popup__current {
background: linear-gradient(0deg, #e7f1ff, #f3f8ff);
border: 1px solid #b6d4fe; border-radius: .375rem; padding: .5rem .7rem;
}
.udm-fieldref-popup__current-label {
font-size: .65rem; text-transform: uppercase; color: #52606d;
letter-spacing: .08em; font-weight: 600; display: block; margin-bottom: .15rem;
}
.udm-fieldref-popup__current-value { display: flex; align-items: center; gap: .5rem; }
.udm-fieldref-popup__current-value > i:first-child { color: var(--bs-primary, #0d6efd); width: 1.1rem; text-align: center; }
.udm-fieldref-popup__current-main { font-weight: 600; color: var(--bs-body-color, #212529); }
.udm-fieldref-popup__current-sub { font-size: .78rem; color: #52606d; }
.udm-fieldref-popup__clear {
margin-left: auto; background: transparent; border: 1px solid transparent;
color: #52606d; cursor: pointer;
padding: .25rem .55rem; border-radius: .375rem; font-size: 1.05rem; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
min-width: 2rem; min-height: 2rem;
}
.udm-fieldref-popup__clear:hover {
background: var(--bs-danger-bg-subtle, #f8d7da); color: var(--bs-danger, #842029);
border-color: #f1aeb5;
}
.udm-fieldref-popup__search {
display: flex; align-items: center; gap: .45rem;
background: var(--bs-tertiary-bg, #f1f3f5); border-radius: .375rem; padding: .4rem .7rem;
}
.udm-fieldref-popup__search > i { color: var(--bs-secondary-color, #6c757d); font-size: .85rem; }
.udm-fieldref-popup__search > input {
flex: 1; border: none; background: transparent; outline: none; font-size: .9rem;
color: var(--bs-body-color, #212529);
}
.udm-fieldref-popup__chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.udm-fieldref-chip {
padding: .2rem .7rem; border-radius: 999px;
border: 1px solid var(--bs-border-color, #dee2e6);
background: var(--bs-body-bg, #fff); color: #495057;
cursor: pointer; font-size: .8rem; transition: all .15s;
}
.udm-fieldref-chip:hover { border-color: var(--bs-primary, #0d6efd); color: var(--bs-primary, #0d6efd); }
.udm-fieldref-chip.is-active {
background: var(--bs-primary, #0d6efd); color: #fff;
border-color: var(--bs-primary, #0d6efd);
}
.udm-fieldref-popup__list {
overflow-y: auto; max-height: 18rem;
display: flex; flex-direction: column; gap: .05rem;
}
.udm-fieldref-item {
display: flex; align-items: center; gap: .55rem; padding: .2rem .55rem;
background: transparent; border: none; border-radius: .3rem; cursor: pointer;
text-align: left; transition: background .1s; width: 100%;
}
.udm-fieldref-item:hover { background: var(--bs-tertiary-bg, #f1f3f5); }
.udm-fieldref-item.is-selected { background: #e7f1ff; }
.udm-fieldref-item__icon {
font-size: .85rem; color: var(--bs-secondary-color, #6c757d);
width: 1.1rem; text-align: center; flex-shrink: 0;
}
.udm-fieldref-item.is-selected .udm-fieldref-item__icon { color: var(--bs-primary, #0d6efd); }
.udm-fieldref-item__text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.15; }
.udm-fieldref-item__title {
font-weight: 500; font-size: .88rem; color: var(--bs-body-color, #212529);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.udm-fieldref-item__meta {
font-size: .7rem; color: var(--bs-secondary-color, #6c757d); margin-top: .05rem;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.udm-fieldref-item__type { font-family: ui-monospace, SFMono-Regular, monospace; opacity: .85; }
.udm-fieldref-popup__empty {
padding: 1.25rem; text-align: center;
color: var(--bs-secondary-color, #6c757d); font-style: italic; font-size: .85rem;
}
/* ===== UdmTemplateFieldInserter =====
Einstufiges Platzhalter-Popover fuer Template-Felder.
Teilt Popup-, Chip-, Such- und Item-Stile mit UdmFieldRefPicker. */
.udm-template-inserter { display: inline-block; }
.udm-tpl-popup__head { display: flex; align-items: center; gap: .5rem; }
.udm-tpl-popup__title {
flex: 1; font-size: .65rem; text-transform: uppercase;
letter-spacing: .08em; font-weight: 600; color: #52606d;
}
.udm-tpl-popup__recent-label {
display: block; margin-bottom: .25rem;
font-size: .65rem; text-transform: uppercase; letter-spacing: .08em;
font-weight: 600; color: var(--bs-secondary-color, #6c757d);
}
.udm-tpl-popup__recent-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.udm-tpl-recent-chip {
padding: .15rem .55rem; border-radius: .3rem;
border: 1px solid var(--bs-border-color, #dee2e6);
background: var(--bs-tertiary-bg, #f1f3f5); color: var(--bs-body-color, #212529);
font-family: ui-monospace, SFMono-Regular, monospace; font-size: .75rem;
cursor: pointer; transition: all .15s;
}
.udm-tpl-recent-chip:hover {
border-color: var(--bs-primary, #0d6efd); color: var(--bs-primary, #0d6efd);
background: #e7f1ff;
}
.udm-tpl-item-row { display: flex; align-items: center; gap: .15rem; }
.udm-tpl-item-row > .udm-fieldref-item { flex: 1; min-width: 0; }
.udm-tpl-fmt-toggle {
background: transparent; border: 1px solid transparent; border-radius: .3rem;
color: var(--bs-secondary-color, #6c757d); cursor: pointer;
padding: .25rem .45rem; font-size: .8rem; line-height: 1; flex-shrink: 0;
}
.udm-tpl-fmt-toggle:hover,
.udm-tpl-fmt-toggle.is-open {
background: var(--bs-tertiary-bg, #f1f3f5);
border-color: var(--bs-border-color, #dee2e6);
color: var(--bs-primary, #0d6efd);
}
.udm-tpl-fmt-row {
display: flex; flex-wrap: wrap; gap: .3rem;
padding: .2rem .55rem .45rem 2.2rem;
}
.udm-tpl-fmt-chip {
padding: .15rem .55rem; border-radius: .3rem;
border: 1px solid #b6d4fe; background: #f3f8ff; color: var(--bs-primary, #0d6efd);
font-family: ui-monospace, SFMono-Regular, monospace; font-size: .72rem;
cursor: pointer; transition: all .15s;
}
.udm-tpl-fmt-chip:hover {
background: var(--bs-primary, #0d6efd); border-color: var(--bs-primary, #0d6efd);
color: #fff;
}
.udm-tpl-popup__footer {
border-top: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, .1));
padding-top: .4rem; font-size: .72rem;
color: var(--bs-secondary-color, #6c757d);
}
/* ===== UdmValueSourcePicker =====
Popover fuer Feld / Wert / Systemvariable inkl. Offset-Berechnung.
Teilt Chip-, Popup- und Item-Stile mit UdmFieldRefPicker. */
.udm-vs-picker { position: relative; display: block; width: 100%; }
.udm-vs-trigger {
box-sizing: border-box;
display: flex; align-items: center; gap: .45em;
padding: .2em .6em; margin: 0; width: 100%; min-height: 1.85em;
background-color: #fff !important; background-image: none !important;
border: 1px solid var(--bs-border-color, #ced4da);
border-radius: .25em; color: var(--bs-body-color, #212529);
cursor: pointer; transition: border-color .15s, box-shadow .15s;
font-family: inherit; font-size: inherit; line-height: 1.4; text-align: left;
appearance: none; -webkit-appearance: none;
}
.udm-vs-trigger:hover:not(:disabled) { border-color: #86b7fe; }
.udm-vs-trigger:focus { outline: 0; border-color: #86b7fe; box-shadow: 0 0 0 .2em rgba(13,110,253,.2); }
.udm-vs-trigger.is-open { border-color: var(--bs-primary, #0d6efd); }
.udm-vs-trigger:disabled { opacity: .65; cursor: not-allowed; }
.udm-vs-trigger__icon { color: var(--bs-primary, #0d6efd); width: 1em; text-align: center; flex-shrink: 0; font-size: .9em; }
.udm-vs-trigger__text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.udm-vs-trigger__text.is-placeholder { color: var(--bs-secondary-color, #6c757d); }
.udm-vs-trigger__chevron { font-size: .7em; color: var(--bs-secondary-color, #6c757d); flex-shrink: 0; margin-left: auto; }
.udm-vs-popup {
display: flex; flex-direction: column; padding: .45rem .5rem; gap: .35rem;
min-width: 26rem;
}
.udm-vs-popup__header {
display: flex; align-items: center; gap: .4rem;
}
.udm-vs-popup__section-label {
font-size: .62rem; text-transform: uppercase; letter-spacing: .08em;
font-weight: 600; color: #52606d; margin: .1rem 0 .05rem;
}
.udm-vs-popup__chips { display: flex; flex-wrap: wrap; gap: .25rem; flex: 1; }
.udm-vs-popup__clear {
margin: 0 0 0 auto; background: transparent; border: 1px solid transparent;
color: #52606d; cursor: pointer;
padding: .2rem .45rem; border-radius: .3rem; font-size: 1rem; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
min-width: 1.75rem; min-height: 1.75rem;
appearance: none; -webkit-appearance: none; flex-shrink: 0;
}
.udm-vs-popup__clear:hover {
background: var(--bs-danger-bg-subtle, #f8d7da);
color: var(--bs-danger, #842029); border-color: #f1aeb5;
}
.udm-vs-chip {
padding: .2rem .7rem; margin: 0; border-radius: 999px;
border: 1px solid var(--bs-border-color, #dee2e6);
background-color: #fff; background-image: none;
color: #495057; cursor: pointer;
font-family: inherit; font-size: .82rem; transition: all .15s;
display: inline-flex; align-items: center; gap: .3rem;
appearance: none; -webkit-appearance: none;
}
.udm-vs-chip:hover:not(:disabled) { border-color: var(--bs-primary, #0d6efd); color: var(--bs-primary, #0d6efd); }
.udm-vs-chip:hover:not(:disabled) > i { color: var(--bs-primary, #0d6efd); }
.udm-vs-chip.is-active { background-color: var(--bs-primary, #0d6efd); color: #fff; border-color: var(--bs-primary, #0d6efd); }
.udm-vs-chip.is-active > i { color: #fff; }
.udm-vs-chip:disabled { opacity: .6; cursor: not-allowed; }
.udm-vs-chip--mini { font-size: .78rem; padding: .15rem .55rem; }
.udm-vs-search {
display: flex; align-items: center; gap: .4rem;
background: var(--bs-tertiary-bg, #f1f3f5); border-radius: .3rem; padding: .25rem .55rem;
}
.udm-vs-search > i { color: var(--bs-secondary-color, #6c757d); font-size: .85rem; }
.udm-vs-search > input {
flex: 1; border: none; background: transparent; outline: none; font-size: .9rem;
color: var(--bs-body-color, #212529); font-family: inherit;
}
.udm-vs-list {
overflow-y: auto; max-height: 18rem;
display: flex; flex-direction: column; gap: .05rem;
}
.udm-vs-item {
display: flex; align-items: center; gap: .55rem; padding: .25rem .55rem; margin: 0;
background-color: transparent; background-image: none;
border: none; border-radius: .3rem; cursor: pointer;
text-align: left; transition: background .1s; width: 100%;
font-family: inherit; font-size: inherit;
appearance: none; -webkit-appearance: none;
}
.udm-vs-item:hover:not(:disabled) { background-color: var(--bs-tertiary-bg, #f1f3f5); }
.udm-vs-item.is-selected { background-color: #e7f1ff; }
.udm-vs-item:disabled { opacity: .6; cursor: not-allowed; }
.udm-vs-item__icon {
font-size: .85rem; color: var(--bs-secondary-color, #6c757d);
width: 1.1rem; text-align: center; flex-shrink: 0;
}
.udm-vs-item.is-selected .udm-vs-item__icon { color: var(--bs-primary, #0d6efd); }
.udm-vs-item__text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.15; }
.udm-vs-item__title {
font-weight: 500; font-size: .88rem; color: var(--bs-body-color, #212529);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.udm-vs-item__meta {
font-size: .7rem; color: var(--bs-secondary-color, #6c757d); margin-top: .05rem;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.udm-vs-item__type { font-family: ui-monospace, SFMono-Regular, monospace; opacity: .85; }
.udm-vs-list__empty {
padding: 1rem; text-align: center;
color: var(--bs-secondary-color, #6c757d); font-style: italic; font-size: .85rem;
}
.udm-vs-offset {
background: var(--bs-tertiary-bg, #f8f9fa); border-radius: .3rem;
padding: .4rem .5rem; display: flex; flex-direction: column; gap: .3rem;
}
.udm-vs-offset__custom { display: flex; gap: .3rem; align-items: center; }
.udm-vs-offset__custom > :first-child { flex: 0 0 6rem; }
.udm-vs-offset__custom > :last-child { flex: 1; }
.udm-vs-result {
padding: .3rem .55rem; background: #e7f1ff; border: 1px solid #b6d4fe;
border-radius: .3rem; font-size: .82rem; color: #052c65;
display: flex; align-items: center; gap: .4rem;
}
.udm-vs-result__label { font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; }
.udm-vs-result__value { font-family: ui-monospace, SFMono-Regular, monospace; }
/* ── Modus-Chips (feststehender Header im Wert-Picker, Konzept §13) ── */
.udm-vs-modebar { display: flex; align-items: flex-start; gap: .4rem; }
.udm-vs-modebar__chips { display: flex; flex-wrap: wrap; gap: .3rem; flex: 1; }
.udm-vs-modechip {
display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: 999px;
border: 1px solid var(--bs-border-color, #dee2e6); background: #fff; color: #495057; cursor: pointer;
font-family: inherit; font-size: .8rem; transition: all .12s; appearance: none; -webkit-appearance: none;
}
.udm-vs-modechip:hover:not(:disabled) { border-color: #adb5bd; }
.udm-vs-modechip.is-active { color: #fff; font-weight: 600; }
.udm-vs-modechip:disabled { opacity: .6; cursor: not-allowed; }
.udm-vs-sysbtn { width: 100%; }
/* ==================================================================
* UdmJob-Aktionen Karten (Tab "Aktionen" im Ansichtselement-Detail)
* ==================================================================
* Akzentfarbe = UdmJobTypeEnum (Trigger): Interactive / DataChange / Time
* Icon-Badge = UdmJobActionEnum (z.B. OpenDialog, WriteData, SendMessage ...)
*/
.udm-action-card-grid {
display: grid;
/* Feste Mindestbreite in em — passt auf 4 Footer-Elemente (Badge, Timestamp, User, 3 Buttons)
bei jeder UI-Schriftgroesse. Cards stretchen via 1fr, wenn mehr Platz da ist. */
grid-template-columns: repeat(auto-fill, minmax(22em, 1fr));
gap: .75rem;
}
.udm-action-card {
/* Reset font-size: Karten leben in Subform-Containern mit reduzierter Schriftgroesse,
em-Werte unten kaskadieren sonst zu klein. */
font-size: var(--udm-base-font-size);
position: relative;
background: var(--bs-white);
border: 1px solid var(--bs-border-color);
border-left: 4px solid var(--uac-accent, #94a3b8);
border-radius: .5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
transition: box-shadow .15s;
display: flex;
flex-direction: column;
overflow: hidden;
}
.udm-action-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .07); }
.udm-action-card.uac-clickable { cursor: pointer; }
.udm-action-card.uac-clickable:hover { border-color: var(--uac-accent, var(--bs-border-color)); }
.udm-action-card .uac-head {
display: flex;
gap: .6em;
padding: .55em .65em .2em;
align-items: flex-start;
}
.udm-action-card .uac-icon {
flex-shrink: 0;
width: 2em;
height: 2em;
border-radius: .4em;
background: var(--uac-accent-bg, var(--bs-light));
color: var(--uac-accent, var(--bs-secondary));
display: flex;
align-items: center;
justify-content: center;
}
.udm-action-card .uac-titlebox { flex-grow: 1; min-width: 0; }
.udm-action-card .uac-title { font-weight: 600; line-height: 1.25; word-break: break-word; }
.udm-action-card .uac-subtype { color: var(--bs-secondary-color); font-size: .9em; }
.udm-action-card .uac-body {
padding: .35em .7em .55em;
color: var(--bs-body-color);
display: flex;
flex-direction: column;
flex-grow: 1;
}
.udm-action-card .uac-body .desc { word-break: break-word; }
.udm-action-card .uac-body .desc-empty { color: var(--bs-secondary-color); font-style: italic; }
.udm-action-card .uac-trigger {
font-size: .82em;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--uac-accent, var(--bs-secondary));
display: inline-flex;
align-items: center;
gap: .35em;
align-self: flex-end;
margin-top: auto;
padding-top: .5em;
}
.udm-action-card .uac-foot {
margin-top: auto;
border-top: 1px solid var(--bs-border-color);
background: var(--bs-light);
padding: .4em .55em;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: .55em;
color: var(--bs-secondary-color);
/* Konstante Hoehe fuer alle Karten — auch wenn Timestamp oder Benutzer fehlt. */
min-height: 3.6em;
}
.udm-action-card .uac-foot .meta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .25em;
flex-grow: 1;
min-width: 0;
line-height: 1.2;
}
.udm-action-card .uac-foot .meta > * {
display: inline-flex;
align-items: center;
gap: .4em;
}
.udm-action-card .uac-foot .meta .uac-when {
display: inline-flex;
align-items: center;
gap: .5em;
flex-wrap: nowrap;
}
.udm-action-card .uac-foot .meta .uac-timestamp {
font-variant-numeric: tabular-nums;
}
.udm-action-card .uac-foot .actions {
display: flex;
gap: .3em;
flex-shrink: 0;
align-self: center;
}
/* Trigger-Typ-Akzente (UdmJobTypeEnum) */
.udm-action-card.ttype-interactive { --uac-accent: #4361ee; --uac-accent-bg: #eaeefe; }
.udm-action-card.ttype-datachange { --uac-accent: #f77f00; --uac-accent-bg: #fdf0df; }
.udm-action-card.ttype-time { --uac-accent: #7209b7; --uac-accent-bg: #f1e6fa; }
.udm-action-card.ttype-none { --uac-accent: #94a3b8; --uac-accent-bg: var(--bs-light); }
/* Footer-Action-Buttons (UdmActionButtonTemplate mit CssClass="udm-action-card-btn") --
DxButton + .udm-button setzen breite Default-Paddings, daher mit hoher Spezifitaet
und !important auf eine quadratische Icon-Flaeche zwingen. */
.udm-action-card .uac-foot .actions .udm-action-card-btn {
width: 2.2em !important;
min-width: 2.2em !important;
max-width: 2.2em !important;
height: 2.2em !important;
padding: 0 !important;
margin: 0 !important;
border-radius: .35em;
border: 1px solid var(--bs-border-color);
background: var(--bs-white);
color: var(--bs-secondary);
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: none;
transition: background .12s, border-color .12s, color .12s;
}
.udm-action-card .uac-foot .actions .udm-action-card-btn:hover {
background: var(--uac-accent-bg, var(--bs-light));
border-color: var(--uac-accent, var(--bs-border-color));
color: var(--uac-accent, var(--bs-primary));
}
.udm-action-card .uac-foot .actions .udm-action-card-btn > i,
.udm-action-card .uac-foot .actions .udm-action-card-btn .dxbl-image {
margin: 0 !important;
}
/* =====================================================================
* ViewElement-Appearance-Regeln (bedingte Darstellung)
* Karten-Liste mit Header (Reihenfolge, Name, Geltungs-Chip,
* Stil-Quelle-Chip, Warn-Badge, Live-Swatch, Loesch-Action, Expand)
* und drei Bloecken untereinander (Geltungsbereich, Bedingung, Stil).
* ===================================================================== */
.udm-arc-list {
display: flex;
flex-direction: column;
gap: 0.5em;
padding: 0.4em;
font-size: var(--udm-base-font-size, 14px);
}
.udm-arc-empty {
background: var(--bs-tertiary-bg);
border: 1px dashed var(--bs-border-color);
border-radius: 0.4em;
padding: 1em;
text-align: center;
color: var(--bs-secondary-color);
}
.udm-arc-empty i { margin-right: 0.4em; }
.udm-arc-card {
background: white;
border: 1px solid var(--bs-border-color);
border-radius: 0.4em;
overflow: hidden;
transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.udm-arc-card.is-open {
border-color: color-mix(in srgb, var(--bs-primary) 30%, var(--bs-border-color) 70%);
box-shadow: 0 0 0 1px rgba(13,110,253,0.10) inset;
}
.udm-arc-card.no-condition {
border-left: 3px solid #d97706;
}
.udm-arc-head {
display: grid;
grid-template-columns: auto 1fr auto auto auto auto auto auto;
gap: 0.5em;
align-items: center;
padding: 0.45em 0.55em;
cursor: pointer;
user-select: none;
}
.udm-arc-head:hover { background: #fafbfc; }
.udm-arc-order {
width: 1.6em; height: 1.6em; border-radius: 50%;
background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color);
color: #475569; font-size: 0.75em; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
}
.udm-arc-name-wrap { min-width: 0; }
.udm-arc-name { font-weight: 600; }
.udm-arc-chip {
display: inline-flex; align-items: center; gap: 0.3em;
font-size: 0.78em; font-weight: 600;
padding: 0.15em 0.45em;
border-radius: 0.25em;
background: var(--bs-tertiary-bg);
border: 1px solid var(--bs-border-color);
color: #475569;
white-space: nowrap;
max-width: 13em;
overflow: hidden; text-overflow: ellipsis;
}
.udm-arc-chip.scope-row { color: #1a4d7a; background: #e3f0ff; border-color: #b8d6f5; }
.udm-arc-chip.scope-cell { color: #2a4a1a; background: #e9f5da; border-color: #c2dfa1; }
.udm-arc-source-chip {
display: inline-flex; align-items: center;
font-size: 0.72em; font-weight: 700;
padding: 0.1em 0.45em;
border-radius: 0.2em;
text-transform: uppercase; letter-spacing: 0.04em;
white-space: nowrap;
}
.udm-arc-source-chip.src-static { background: rgba(100,116,139,0.15); color: #475569; }
.udm-arc-source-chip.src-stylefield { background: rgba(8,145,178,0.12); color: #0891b2; }
.udm-arc-source-chip.src-css { background: rgba(139,92,246,0.14); color: #6d28d9; }
.udm-arc-warn {
display: inline-flex; align-items: center; gap: 0.25em;
font-size: 0.72em; font-weight: 700;
padding: 0.1em 0.4em;
border-radius: 0.2em;
text-transform: uppercase; letter-spacing: 0.04em;
background: rgba(217,119,6,0.18); color: #d97706;
cursor: help; white-space: nowrap;
}
.udm-arc-swatch {
width: 1.6em; height: 1.6em;
border: 1px solid var(--bs-border-color);
border-radius: 0.25em;
background: white;
flex-shrink: 0;
}
.udm-arc-row-actions {
display: inline-flex; gap: 0.25em; align-items: center;
}
.udm-arc-expand {
width: 1.6em; height: 1.6em;
display: inline-flex; align-items: center; justify-content: center;
color: var(--bs-secondary-color);
transition: transform 0.18s ease;
}
.udm-arc-card.is-open .udm-arc-expand {
transform: rotate(180deg); color: var(--bs-primary);
}
.udm-arc-body {
padding: 0.7em 0.7em 0.6em;
border-top: 1px solid var(--bs-border-color);
background: var(--bs-tertiary-bg);
display: flex; flex-direction: column; gap: 0.7em;
}
.udm-arc-block {
background: white;
border: 1px solid var(--bs-border-color);
border-radius: 0.3em;
padding: 0.55em 0.65em;
}
.udm-arc-block.required {
border-color: color-mix(in srgb, var(--bs-primary) 30%, var(--bs-border-color) 70%);
background: color-mix(in srgb, var(--bs-primary) 3%, white 97%);
}
.udm-arc-block-title {
font-size: 0.72em; font-weight: 700;
color: var(--bs-primary);
text-transform: uppercase; letter-spacing: 0.05em;
margin-bottom: 0.4em;
display: flex; align-items: center; gap: 0.4em;
}
.udm-arc-block-title i { font-size: 0.95em; opacity: 0.8; }
.udm-arc-pill {
margin-left: auto;
font-size: 0.85em; font-weight: 700;
padding: 0.05em 0.4em;
background: rgba(13,110,253,0.12);
color: var(--bs-primary);
border-radius: 0.2em;
text-transform: uppercase; letter-spacing: 0.05em;
}
.udm-arc-row { display: flex; flex-direction: column; gap: 0.15em; margin-bottom: 0.5em; }
.udm-arc-row:last-child { margin-bottom: 0; }
.udm-arc-label { font-size: 0.78em; color: var(--bs-secondary-color); font-weight: 600; }
.udm-arc-hint {
font-size: 0.72em; color: var(--bs-secondary-color);
margin-top: 0.1em; line-height: 1.35;
}
.udm-arc-hint code {
background: rgba(0,0,0,0.05); padding: 0.05em 0.25em;
border-radius: 0.2em; font-size: 0.95em;
}
.udm-arc-radiogroup {
display: flex; gap: 0.3em; align-items: stretch;
background: var(--bs-tertiary-bg); border-radius: 0.3em; padding: 0.15em;
}
.udm-arc-radiogroup label {
flex: 1;
display: inline-flex; align-items: center; justify-content: center; gap: 0.3em;
padding: 0.2em 0.5em;
font-size: 0.85em;
border-radius: 0.25em;
cursor: pointer;
color: #475569;
border: 1px solid transparent;
}
.udm-arc-radiogroup label.active {
background: white;
color: var(--bs-primary);
border-color: var(--bs-border-color);
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
font-weight: 600;
}
.udm-arc-radiogroup label i { font-size: 0.85em; opacity: 0.85; }
.udm-arc-sub-switch {
border-top: 1px dashed var(--bs-border-color);
margin-top: 0.4em;
padding-top: 0.45em;
}
.udm-arc-cond-state {
display: flex; align-items: center; gap: 0.5em;
padding: 0.45em 0.55em;
border: 1px solid;
border-radius: 0.3em;
flex-wrap: wrap;
}
.udm-arc-cond-state.has-code { border-color: #16a34a; background: #f0faf3; }
.udm-arc-cond-state.no-code { border-color: #d97706; background: #fffaf0; }
.udm-arc-cond-badge {
display: inline-flex; align-items: center; gap: 0.3em;
padding: 0.1em 0.45em;
border-radius: 0.2em;
font-size: 0.75em; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.04em;
color: white; white-space: nowrap;
}
.udm-arc-cond-badge.ok { background: #16a34a; }
.udm-arc-cond-badge.warn { background: #d97706; }
.udm-arc-cond-state .desc {
font-size: 0.82em;
color: var(--bs-body-color);
flex: 1;
min-width: 0;
}
.udm-arc-color-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 0.4em;
}
/* Nur noch Beschriftung + UdmColorPicker nebeneinander. KEIN eigener Rahmen und kein
eigener Hintergrund mehr: der Picker bringt beides selbst mit (.udm-color-field),
sonst saesse ein Rahmen im Rahmen. Farbfleck und Hexwert zeigt er ebenfalls selbst,
die frueheren .value- und .udm-arc-swatch-mini-Regeln sind damit entfallen. */
.udm-arc-color-field {
display: flex; align-items: center; gap: 0.35em;
font-size: 0.85em;
min-width: 0;
}
.udm-arc-color-field .label {
color: var(--bs-secondary-color); font-size: 0.78em; flex-shrink: 0;
}
/* Der Picker fuellt die Restbreite. min-width:0 hebt seine eigene Mindestbreite (9em)
im schmalen Zwei-Spalten-Raster auf, sonst laeuft die Karte ueber. */
.udm-arc-color-field .udm-color-field {
flex: 1; min-width: 0;
}
.udm-arc-toggles { display: flex; gap: 0.35em; }
.udm-arc-toggle {
display: inline-flex; align-items: center; gap: 0.3em;
padding: 0.25em 0.55em;
font-size: 0.85em;
border: 1px solid var(--bs-border-color);
border-radius: 0.25em;
background: white;
cursor: pointer;
color: #475569;
}
.udm-arc-toggle.active {
background: rgba(13,110,253,0.10);
border-color: var(--bs-primary);
color: var(--bs-primary);
font-weight: 600;
}
.udm-arc-toggle i { font-size: 0.9em; opacity: 0.85; }
.udm-arc-css-input textarea {
font-family: monospace !important;
font-size: 0.82em !important;
}
.udm-arc-preview {
padding: 0.55em 0.65em;
background: white;
border: 1px solid var(--bs-border-color);
border-radius: 0.3em;
}
.udm-arc-preview-label {
font-size: 0.72em; font-weight: 700;
color: var(--bs-primary);
text-transform: uppercase; letter-spacing: 0.05em;
margin-bottom: 0.35em;
display: flex; align-items: center; gap: 0.4em;
}
.udm-arc-preview-mock {
display: grid;
grid-template-columns: 90px 1fr 80px;
gap: 0;
border: 1px solid var(--bs-border-color);
border-radius: 0.25em;
overflow: hidden;
font-size: 0.85em;
}
.udm-arc-preview-mock .cell {
padding: 0.35em 0.55em;
border-right: 1px solid var(--bs-border-color);
background: white;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.udm-arc-preview-mock .cell:last-child { border-right: none; }
.udm-arc-preview-hint {
margin-top: 0.35em;
font-size: 0.75em; color: var(--bs-secondary-color); font-style: italic;
}
/* ── Field-Sidebar im MessageTemplatesMessagePage (Editor α-2) ── */
/* Wrapper der Felder-Sidebar im Nachrichten-Editor.
Layout: festes Header-Drittel (Such-Box, Filter-Badge) + scrollbarer
Listen-Bereich. Breite UND Hoehe vom Anwender resizable
(CSS-Handle rechts unten). */
.udm-fieldsidebar {
width: 16em;
min-width: 12em;
max-width: 32em;
flex-shrink: 0;
height: 26em;
min-height: 12em;
max-height: 60em;
border: 1px solid var(--bs-border-color);
border-radius: .25rem;
background: var(--bs-tertiary-bg);
display: flex;
flex-direction: column;
overflow: hidden; /* fuer korrektes resize-Handle */
resize: both; /* Anwender zieht die rechte untere Ecke */
}
.udm-fieldsidebar-header {
flex-shrink: 0;
padding: .4rem .5rem;
display: flex;
flex-direction: column;
gap: .25rem;
background: var(--bs-tertiary-bg);
border-bottom: 1px solid var(--bs-border-color);
}
.udm-fieldsidebar-list {
flex: 1 1 auto;
min-height: 0; /* erlaubt overflow-y im flex-Child */
overflow-y: auto;
padding: .35rem .5rem .4rem .5rem;
display: flex;
flex-direction: column;
gap: .25rem;
}
.udm-fieldsidebar-search { font-size: 0.85em; }
.udm-fieldsidebar-item {
display: flex; align-items: center; gap: 0.4em;
padding: 0.25em 0.4em; width: 100%;
border: 1px solid transparent; border-radius: 0.2em;
background: var(--bs-body-bg);
text-align: left; cursor: pointer;
color: var(--bs-body-color);
font-size: 0.85em;
}
.udm-fieldsidebar-item:hover {
background: rgba(var(--bs-primary-rgb), 0.08);
border-color: rgba(var(--bs-primary-rgb), 0.3);
}
.udm-fieldsidebar-item:disabled {
opacity: 0.55; cursor: not-allowed;
}
.udm-fieldsidebar-item-icon {
color: var(--bs-secondary-color); flex-shrink: 0;
width: 1em; text-align: center;
}
.udm-fieldsidebar-item-text {
flex: 1; min-width: 0;
display: flex; flex-direction: column;
}
.udm-fieldsidebar-item-title {
font-weight: 500;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.udm-fieldsidebar-item-meta {
font-size: 0.78em; color: var(--bs-secondary-color);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Old-Value-Variante eines Feldes — visuell gedaempft, Icon mit Accent. */
.udm-fieldsidebar-item-old {
background: rgba(var(--bs-secondary-rgb), 0.04);
border-style: dashed;
}
.udm-fieldsidebar-item-old .udm-fieldsidebar-item-icon {
color: rgba(var(--bs-primary-rgb), 0.7);
}
.udm-fieldsidebar-item-old .udm-fieldsidebar-item-title {
color: var(--bs-secondary-color);
font-style: italic;
}
/* Filter-Badge in der Felder-Sidebar (z.B. Toggle "Alte Werte"). Toggle-Look:
neutral = Outline, aktiv = gefuellte Primary-Variante. */
.udm-fieldsidebar-badge {
display: inline-flex; align-items: center; gap: 0.3em;
padding: 0.15em 0.5em;
border: 1px solid rgba(var(--bs-primary-rgb), 0.4);
border-radius: 999px;
background: transparent;
color: var(--bs-secondary-color);
font-size: 0.78em;
cursor: pointer;
user-select: none;
margin: 0.15em 0;
}
.udm-fieldsidebar-badge:hover {
background: rgba(var(--bs-primary-rgb), 0.06);
}
.udm-fieldsidebar-badge.is-active {
background: rgba(var(--bs-primary-rgb), 0.12);
border-color: rgba(var(--bs-primary-rgb), 0.6);
color: var(--bs-primary);
}
.udm-fieldsidebar-badge:disabled {
opacity: 0.55; cursor: not-allowed;
}
/* ============================================================================
Strukturbaum (App / Subsystem) — wird von AppsStructureTreePage und
SubsystemStructureTreePage gemeinsam genutzt. Klassennamen mit udm-tree-* Prefix.
============================================================================ */
.udm-tree-page {
flex: 1;
display: flex; flex-direction: column;
min-height: 0;
/* Strukturelles Section-Background: NEUTRAL.
Vorher BS-Primary-Verwaesserung — strikte Disziplin reserviert die
Aktion-Farbe fuer echte Selektion (siehe .udm-tree-row.selected). */
--tree-section-bg: var(--bs-tertiary-bg);
}
.udm-tree-toolbar {
display: flex; align-items: center; gap: 0.5em;
padding: 0.5em 0.7em;
border-bottom: 1px solid var(--bs-border-color);
flex-shrink: 0;
flex-wrap: wrap;
}
.udm-tree-search {
position: relative;
flex: 1; min-width: 12em;
}
.udm-tree-search input {
width: 100%;
padding: 0.3em 0.6em 0.3em 1.8em;
font-size: 0.82em;
border: 1px solid var(--bs-border-color);
border-radius: 4px;
background: var(--bs-body-bg);
outline: none;
}
.udm-tree-search input:focus { border-color: var(--bs-primary); }
.udm-tree-search i {
position: absolute; left: 0.6em; top: 50%; transform: translateY(-50%);
color: var(--bs-secondary-color); font-size: 0.78em;
}
.udm-tree-toolbar-meta {
margin-left: auto;
font-size: 0.75em;
color: var(--bs-secondary-color);
}
/* === App/Subsystem-Sticky-Header ===
Header neutral — die Identitaet der App kommt vom Logo-Bild,
das Subsystem-Icon traegt seine Typ-Farbe (Burgund) auf neutralem Grund.
Sticky-Verhalten: Jede App/Subsystem-Gruppe (.udm-tree-app-group) ist ihr
eigener Container, dadurch klebt der Header nur innerhalb seiner Gruppe und
wird vom naechsten Gruppen-Header weggeschoben (kein Stapeln aller Header). */
.udm-tree-app-group {
margin-top: 0.5em;
}
.udm-tree-app-group:first-child { margin-top: 0; }
/* App-Header: kompakt, Section-Header-Stil, sticky innerhalb seiner Gruppe.
Hintergrund opak (Body-BG + Primary-Tint via Gradient), damit darunter
scrollende Children nicht durchscheinen. */
.udm-tree-app-header {
position: sticky;
top: 0;
z-index: 2;
display: flex; align-items: center; gap: 0.6em;
padding: 0.45em 0.7em;
background-color: var(--bs-body-bg);
background-image: linear-gradient(rgba(var(--bs-primary-rgb), 0.06), rgba(var(--bs-primary-rgb), 0.06));
border-bottom: 1px solid rgba(var(--bs-primary-rgb), 0.18);
border-top: 1px solid rgba(var(--bs-primary-rgb), 0.18);
margin-bottom: 0.15em;
cursor: pointer;
transition: background-image 0.1s;
}
.udm-tree-app-header:hover {
background-image: linear-gradient(rgba(var(--bs-primary-rgb), 0.10), rgba(var(--bs-primary-rgb), 0.10));
}
.udm-tree-app-header.selected {
background-image: linear-gradient(rgba(var(--bs-primary-rgb), 0.14), rgba(var(--bs-primary-rgb), 0.14));
box-shadow: inset 3px 0 0 var(--bs-primary);
}
/* Chevron-Indikator vor dem App-Icon — zeigt Klapp-Zustand */
.udm-tree-app-header-chevron {
width: 1.1em;
color: var(--bs-secondary-color);
font-size: 0.85em;
text-align: center;
flex-shrink: 0;
transition: transform 0.15s;
}
.udm-tree-app-header.is-collapsed .udm-tree-app-header-chevron { transform: rotate(-90deg); }
.udm-tree-app-header-icon {
width: 1.6em; height: 1.6em;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.udm-tree-app-header-icon img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 3px; }
.udm-tree-app-header-icon i { color: var(--udm-type-app); font-size: 1.1em; }
.udm-tree-app-header-body {
flex: 1; min-width: 0;
display: flex; align-items: baseline; gap: 0.6em;
}
.udm-tree-app-header-title {
font-weight: 700;
font-size: 1.1em;
line-height: 1.2;
text-transform: none;
letter-spacing: 0;
flex-shrink: 0;
}
.udm-tree-app-header-desc {
font-size: 0.82em; color: var(--bs-secondary-color);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
min-width: 0;
}
.udm-tree-app-header-time {
flex-shrink: 0;
padding: 0.22em 0.6em;
border-radius: 999px;
font-size: 0.78em; font-weight: 600; white-space: nowrap;
}
/* 9-Stufen-Klassifikation (UdmTimeBadgeHelper.GetTimeClass) — gleicher Farbcode wie udm_kpi.css */
.udm-tree-app-header-time.time-green-1 { background: rgba(5, 122, 85, 0.18); color: #057a55; }
.udm-tree-app-header-time.time-green-2 { background: rgba(16, 185, 129, 0.15); color: #059669; }
.udm-tree-app-header-time.time-green-3 { background: rgba(52, 211, 153, 0.13); color: #10b981; }
.udm-tree-app-header-time.time-amber-1 { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.udm-tree-app-header-time.time-amber-2 { background: rgba(217, 119, 6, 0.16); color: #92400e; }
.udm-tree-app-header-time.time-amber-3 { background: rgba(180, 83, 9, 0.14); color: #78350f; }
.udm-tree-app-header-time.time-gray-1 { background: rgba(107, 114, 128, 0.13); color: #6b7280; }
.udm-tree-app-header-time.time-gray-2 { background: rgba(156, 163, 175, 0.12); color: #6b7280; }
.udm-tree-app-header-time.time-gray-3 { background: rgba(209, 213, 219, 0.18); color: #6b7280; }
.udm-tree-app-header-time.time-future-1 { background: rgba(23, 162, 184, 0.18); color: #0c7c8a; }
.udm-tree-app-header-time.time-future-2 { background: rgba(13, 110, 253, 0.15); color: #0a58ca; }
.udm-tree-app-header-time.time-future-3 { background: rgba(102, 16, 242, 0.13); color: #6610f2; }
.udm-tree-app-header-time.time-none { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); opacity: 0.65; }
/* === Tree-Body === */
.udm-tree-scroll {
flex: 1;
overflow-y: auto;
background: var(--bs-body-bg);
}
.udm-tree-content { padding: 0.5em; }
.udm-tree-node { position: relative; }
.udm-tree-children {
padding-left: 1.4em;
position: relative;
}
.udm-tree-children::before {
content: '';
position: absolute;
left: 0.55em; top: 0; bottom: 0.4em;
border-left: 1px dashed var(--bs-border-color);
}
.udm-tree-row {
display: grid;
/* Icon-Spalte aus dem Grid entfernt — Icon wandert ins Body neben den Titel
(siehe .udm-tree-name-row). Verbleibende Spalten: Chevron / Body / Subtype /
Cross / Time / Badges */
grid-template-columns: 1.1em 1fr 10em auto 7em auto;
column-gap: 0.45em;
align-items: center;
padding: 0.4em 0.7em;
margin-bottom: 0.15em;
/* Eckige Rahmen — analog zur Listenansicht (vorher 0.3em abgerundet). */
border-radius: 0;
border: 1px solid transparent;
background: var(--bs-body-bg);
cursor: pointer;
transition: background-color 0.1s, border-color 0.1s;
}
/* Erste Body-Zeile: Icon (klein) + Name */
.udm-tree-name-row {
display: flex;
align-items: center;
gap: 0.5em;
min-width: 0;
}
/* Inline-Variante der Icon-Cell im Body (vor dem Titel) — kompakter als die alte
eigene Grid-Spalte. Container hat feste Mindestbreite damit Layout konsistent
bleibt auch wenn ein Knoten kein Icon hat (z.B. Menuegruppen). */
.udm-tree-icon-inline {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.3em;
min-width: 1.3em;
height: 1.3em;
flex-shrink: 0;
}
/* FA-Glyph (mit udm-icon-md/sm/lg) hat font-size !important auf 1.25rem.
Hier explizit auf 1em (relativ zur Row-Schrift) zwingen — sonst overflowt
das Glyph aus dem 1.3em-Container und das Layout sieht "chaotisch" aus. */
.udm-tree-icon-inline > span,
.udm-tree-icon-inline > i {
font-size: 1em !important;
line-height: 1 !important;
}
.udm-tree-icon-inline .udm-tree-icon-img {
max-width: 1.3em;
max-height: 1.3em;
}
.udm-tree-row:hover { background: var(--tree-section-bg); }
.udm-tree-row.selected {
background: color-mix(in srgb, var(--bs-primary) 10%, var(--bs-body-bg) 90%);
box-shadow: inset 3px 0 0 var(--bs-primary);
border-color: rgba(var(--bs-primary-rgb), 0.4);
}
/* Menuegruppen: neutral hervorgehoben — keine Typ-Farbe (MenuGroup ist nicht
in den 6 Haupt-Element-Typen, siehe design-element-type-colors.md). */
.udm-tree-row.menu-group { background: var(--bs-tertiary-bg); }
.udm-tree-row.menu-group .udm-tree-name { color: var(--bs-body-color); font-weight: 700; }
.udm-tree-row.aggregator .udm-tree-name { color: var(--bs-secondary-color); font-style: italic; }
.udm-tree-row.cross-ref { opacity: 0.85; }
.udm-tree-chevron {
text-align: center;
font-size: 0.7em;
color: var(--bs-secondary-color);
transition: transform 0.1s;
cursor: pointer;
}
.udm-tree-chevron.empty { visibility: hidden; }
.udm-tree-node.collapsed > .udm-tree-row > .udm-tree-chevron i {
transform: rotate(-90deg);
}
/* Icon-Farben pro Element-Typ — auf die UDM-Typ-Farb-Variablen abgestimmt
(siehe design-element-type-colors.md, Achse 1). Andere Element-Typen
(Group/Job/Report/Message/Mapping) bleiben neutral grau, da nicht zu den
6 Haupt-Bausteinen gehoerend. */
.udm-tree-icon-cell { color: var(--bs-secondary-color); text-align: center; }
.udm-tree-icon-cell.icon-app { color: var(--udm-type-app); --fa-primary-color: var(--udm-type-app); --fa-secondary-color: var(--udm-type-app); }
.udm-tree-icon-cell.icon-dialog { color: var(--udm-type-dialog); --fa-primary-color: var(--udm-type-dialog); --fa-secondary-color: var(--udm-type-dialog); }
.udm-tree-icon-cell.icon-ve { color: var(--udm-type-view); --fa-primary-color: var(--udm-type-view); --fa-secondary-color: var(--udm-type-view); }
.udm-tree-icon-cell.icon-ds { color: var(--udm-type-datasource); --fa-primary-color: var(--udm-type-datasource); --fa-secondary-color: var(--udm-type-datasource); }
.udm-tree-icon-cell.icon-entity { color: var(--udm-type-entity); --fa-primary-color: var(--udm-type-entity); --fa-secondary-color: var(--udm-type-entity); }
.udm-tree-icon-cell.icon-system { color: var(--udm-type-system); --fa-primary-color: var(--udm-type-system); --fa-secondary-color: var(--udm-type-system); }
.udm-tree-icon-cell.icon-group { color: var(--bs-secondary-color); }
.udm-tree-icon-cell.icon-job { color: var(--bs-secondary-color); }
.udm-tree-icon-cell.icon-report { color: var(--bs-secondary-color); }
.udm-tree-icon-cell.icon-message { color: var(--bs-secondary-color); }
.udm-tree-icon-cell.icon-mapping { color: var(--bs-secondary-color); }
.udm-tree-icon-cell.icon-default { color: var(--bs-secondary-color); }
/* Inneres FA-Glyph (das eigentliche oder )
muss die Color UND die Duotone-Variablen vom Eltern erben — sonst setzt der
globale .fa-solid/.fa-duotone-Selector aus udm_fontawesome.css alle Icons auf
BS-Primary. currentColor referenziert den geerbten color-Wert vom Eltern.
Spezifitaet 0,2,0 = wie FA-Regel; Cascade-Reihenfolge entscheidet
(udm_admin.css spaeter geladen → gewinnt). */
.udm-tree-icon-cell.icon-app > *,
.udm-tree-icon-cell.icon-dialog > *,
.udm-tree-icon-cell.icon-ve > *,
.udm-tree-icon-cell.icon-ds > *,
.udm-tree-icon-cell.icon-entity > *,
.udm-tree-icon-cell.icon-system > *,
.udm-tree-icon-cell.icon-group > *,
.udm-tree-icon-cell.icon-job > *,
.udm-tree-icon-cell.icon-report > *,
.udm-tree-icon-cell.icon-message > *,
.udm-tree-icon-cell.icon-mapping > *,
.udm-tree-icon-cell.icon-default > * {
color: inherit;
--fa-primary-color: currentColor;
--fa-secondary-color: currentColor;
}
/* Bild-Icon (App-Logo, Subsystem-Bild) — überschreibt das fa-icon, wenn IconImageBase64 gesetzt ist */
.udm-tree-icon-img {
max-width: 1.6em;
max-height: 1.6em;
object-fit: contain;
display: inline-block;
}
.udm-tree-body {
display: flex; flex-direction: column;
gap: 0.05em;
min-width: 0;
padding-left: 0.3em;
line-height: 1.15;
}
.udm-tree-name {
font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
min-width: 0;
}
.udm-tree-desc {
font-size: 0.85em; color: var(--bs-secondary-color);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.udm-tree-subtype-cell {
display: flex; flex-direction: column;
gap: 0.15em;
font-size: 0.82em; color: var(--bs-secondary-color);
min-width: 0; line-height: 1.15;
}
.udm-tree-subtype-text {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.udm-tree-aggcount {
font-size: 0.85em; color: var(--bs-primary); font-weight: 600;
}
.udm-tree-cross {
font-size: 0.78em; color: var(--bs-secondary-color); opacity: 0.7;
}
.udm-tree-time {
display: inline-flex; align-items: center;
justify-self: end;
padding: 0.22em 0.6em;
border-radius: 999px;
font-size: 0.78em; font-weight: 600; white-space: nowrap;
}
/* 9-Stufen-Klassifikation (UdmTimeBadgeHelper.GetTimeClass) — gleicher Farbcode wie udm_kpi.css */
.udm-tree-time.time-green-1 { background: rgba(5, 122, 85, 0.18); color: #057a55; }
.udm-tree-time.time-green-2 { background: rgba(16, 185, 129, 0.15); color: #059669; }
.udm-tree-time.time-green-3 { background: rgba(52, 211, 153, 0.13); color: #10b981; }
.udm-tree-time.time-amber-1 { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.udm-tree-time.time-amber-2 { background: rgba(217, 119, 6, 0.16); color: #92400e; }
.udm-tree-time.time-amber-3 { background: rgba(180, 83, 9, 0.14); color: #78350f; }
.udm-tree-time.time-gray-1 { background: rgba(107, 114, 128, 0.13); color: #6b7280; }
.udm-tree-time.time-gray-2 { background: rgba(156, 163, 175, 0.12); color: #6b7280; }
.udm-tree-time.time-gray-3 { background: rgba(209, 213, 219, 0.18); color: #6b7280; }
.udm-tree-time.time-future-1 { background: rgba(23, 162, 184, 0.18); color: #0c7c8a; }
.udm-tree-time.time-future-2 { background: rgba(13, 110, 253, 0.15); color: #0a58ca; }
.udm-tree-time.time-future-3 { background: rgba(102, 16, 242, 0.13); color: #6610f2; }
.udm-tree-time.time-none { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); opacity: 0.65; }
.udm-tree-badges {
display: inline-flex; gap: 0.25em; justify-content: flex-end;
}
.udm-tree-badges .udm-badge { font-size: 0.62em; padding: 0.15em 0.4em; }
.udm-tree-empty {
text-align: center; padding: 2em 0.6em;
color: var(--bs-secondary-color); font-size: 0.85em;
}
.udm-tree-empty i { display: block; font-size: 1.5em; opacity: 0.5; margin-bottom: 0.4em; }
/* ========================================================================
CardView-Settings-Konfiguration (Admin-UI, Phase 1.6b)
------------------------------------------------------------------------ */
/* Mode-Switcher (HTML-Template/Code vs Karten) */
.udm-cv-cfg-mode-switcher {
display: inline-flex;
gap: 0.4em;
padding: 0.4em 0;
}
.udm-cv-cfg-mode-btn {
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: 4px;
padding: 0.45em 1em;
cursor: pointer;
color: var(--bs-secondary-color);
font-size: 0.9em;
transition: background-color 0.1s, color 0.1s, border-color 0.1s;
}
.udm-cv-cfg-mode-btn:hover:not(:disabled) {
border-color: var(--bs-primary);
color: var(--bs-primary);
}
.udm-cv-cfg-mode-btn--active {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: white;
}
.udm-cv-cfg-mode-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Feld-Liste (Body-Section) — Add/Move/Remove pro Eintrag */
.udm-cv-cfg-fieldlist,
.udm-cv-cfg-actionlist {
display: flex;
flex-direction: column;
gap: 0.4em;
margin-top: 0.3em;
}
.udm-cv-cfg-listcaption {
font-size: 0.78em;
font-weight: 600;
color: var(--bs-secondary-color);
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0.6em 0 0.2em;
}
.udm-cv-cfg-fieldrow,
.udm-cv-cfg-actionrow {
display: flex;
align-items: flex-start;
gap: 0.5em;
padding: 0.5em 0.6em;
background: var(--bs-tertiary-bg, #f8f9fa);
border: 1px solid var(--bs-border-color);
border-radius: 4px;
}
.udm-cv-cfg-fieldgrid {
flex: 1;
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.2fr auto;
gap: 0.5em;
align-items: end;
}
/* === FooterSection — vereinfachtes 2-Spalten-Grid ohne UdmJob-Picker ===
Seit UdmJobs nur noch ueber den VE-Aktionen-Tab konfiguriert werden,
reichen StandardAction + PrimaryOverride als zwei Felder pro Action-Row. */
.udm-cv-cfg-actiongrid-simple {
flex: 1;
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 0.5em;
align-items: end;
}
/* Hint-Text neben einer Listcaption — dezent, klein. */
.udm-cv-cfg-hint {
font-weight: 400;
font-size: 0.85em;
color: var(--bs-secondary-color);
text-transform: none;
letter-spacing: 0;
margin-left: 0.4em;
}
/* === Body-Field-Box (neue Sub-Komponente CardViewBodyFieldEditor) ===
Eine Mini-Karte pro Body-Feld mit Titel-Zeile, Toolbar rechts und einem
DsConfigRow-Block in der Mitte. Loesst das alte manuelle CSS-Grid ab
(verstiess gegen feedback_no_manual_css_grid_for_forms.md). */
.udm-cv-cfg-fieldbox {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
grid-template-areas:
"title tools"
"main tools";
gap: 0.3em 0.6em;
padding: 0.5em 0.6em;
margin-bottom: 0.5em;
background: var(--bs-tertiary-bg, #f8f9fa);
border: 1px solid var(--bs-border-color);
border-radius: 4px;
}
.udm-cv-cfg-fieldbox__title {
grid-area: title;
display: flex;
align-items: center;
gap: 0.4em;
font-size: 0.78em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--bs-primary);
}
.udm-cv-cfg-fieldbox__title i { opacity: 0.6; }
.udm-cv-cfg-fieldbox__main {
grid-area: main;
display: flex;
flex-direction: column;
gap: 0.4em;
}
.udm-cv-cfg-fieldbox .udm-cv-cfg-rowtools {
grid-area: tools;
align-self: start;
}
.udm-cv-cfg-actiongrid {
flex: 1;
display: grid;
grid-template-columns: 1fr 1fr 0.7fr;
gap: 0.5em;
align-items: end;
}
.udm-cv-cfg-fieldgrid label,
.udm-cv-cfg-actiongrid label {
display: block;
font-size: 0.72em;
color: var(--bs-secondary-color);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 0.15em;
font-weight: 600;
}
.udm-cv-cfg-strong,
.udm-cv-cfg-primary {
align-self: center;
text-align: center;
}
.udm-cv-cfg-rowtools {
display: flex;
gap: 0.2em;
align-self: center;
flex-shrink: 0;
}
.udm-cv-cfg-btn {
background: transparent;
border: 1px solid var(--bs-border-color);
border-radius: 3px;
padding: 0.25em 0.5em;
cursor: pointer;
color: var(--bs-secondary-color);
font-size: 0.85em;
transition: background-color 0.1s, color 0.1s, border-color 0.1s;
}
.udm-cv-cfg-btn:hover:not(:disabled) {
background: rgba(var(--bs-primary-rgb), 0.08);
color: var(--bs-primary);
border-color: var(--bs-primary);
}
.udm-cv-cfg-btn--danger:hover:not(:disabled) {
background: rgba(var(--bs-danger-rgb), 0.08);
color: var(--bs-danger);
border-color: var(--bs-danger);
}
.udm-cv-cfg-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.udm-cv-cfg-addbtn {
background: transparent;
border: 1px dashed var(--bs-border-color);
border-radius: 4px;
padding: 0.5em 0.8em;
cursor: pointer;
color: var(--bs-secondary-color);
font-size: 0.9em;
transition: background-color 0.1s, color 0.1s, border-color 0.1s;
}
.udm-cv-cfg-addbtn:hover:not(:disabled) {
background: rgba(var(--bs-primary-rgb), 0.05);
color: var(--bs-primary);
border-color: var(--bs-primary);
border-style: solid;
}
/* Hinweis-Banner (Scope-Split-Hinweis im Orchestrator) */
.udm-cv-cfg-hint {
display: flex;
gap: 0.6em;
padding: 0.7em 0.9em;
background: rgba(var(--bs-info-rgb, 13, 202, 240), 0.08);
border-left: 3px solid var(--bs-info, #0dcaf0);
border-radius: 4px;
font-size: 0.88em;
color: var(--bs-body-color);
}
.udm-cv-cfg-hint i {
color: var(--bs-info, #0dcaf0);
flex-shrink: 0;
font-size: 1.1em;
padding-top: 0.1em;
}
/* =========================================================================
Karten-Aktionsleiste (UdmAdminCardActionBar)
Generische Zeilen-Aktions-Buttons im Footer einer Karte (CardView statt Tabelle).
------------------------------------------------------------------------- */
.udm-card-actionbar {
display: flex;
gap: 0.35em;
flex-wrap: wrap;
align-items: center;
}
.udm-card-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35em;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: 4px;
/* Eigene Schriftgroesse statt Vererbung aus dem verkleinerten Karten-/Subform-Kontext —
sonst kollabieren die em-basierten Paddings zu einem viel zu kleinen Rahmen (em-Kaskade,
siehe Karten-font-size in udm_cardview.css). min-height sichert einen komfortablen
Klickbereich unabhaengig vom Icon. */
font-size: var(--udm-base-font-size);
padding: 0.4em 0.6em;
min-height: 2em;
color: var(--bs-secondary-color);
cursor: pointer;
line-height: 1;
transition: background-color 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}
.udm-card-action-btn i {
font-size: 1.05em;
}
.udm-card-action-btn:hover:not(:disabled) {
background-color: rgba(var(--bs-primary-rgb), 0.1);
color: var(--bs-primary);
border-color: var(--bs-primary);
}
.udm-card-action-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.udm-card-action-btn__label {
font-size: 0.85em;
}
/* Inline-Edit-Panel des selektierten Unterdialogs (unter der Kartenliste) */
.udm-subdialog-edit {
margin-top: 0.75rem;
padding: 0.5rem 0.75rem 0.65rem;
border: 1px solid var(--bs-border-color);
border-radius: 6px;
background: var(--bs-tertiary-bg);
}
.udm-subdialog-edit__title {
font-weight: 600;
font-size: 0.85em;
color: var(--bs-secondary-color);
margin-bottom: 0.4rem;
}
/* =========================================================================
CardView-Konfig WYSIWYG-Canvas (cvc-*)
Repraesentative Karte als Navigator: Bloecke Header/Body/Footer + Container.
Auswahl-Highlight ueber data-sel am Frame (kein Conditional-Class im Markup).
------------------------------------------------------------------------- */
/* Aussenbereich = grosse klickbare Flaeche fuer Container & Layout. */
.cvc-wrap {
position: relative;
padding: 1.75rem 1.25rem 1rem;
border-radius: 12px;
border: 1px dashed transparent;
cursor: pointer;
transition: background-color 0.1s, border-color 0.1s;
}
.cvc-wrap:hover {
background: rgba(var(--bs-primary-rgb), 0.04);
border-color: rgba(var(--bs-primary-rgb), 0.30);
}
.cvc-wrap[data-sel="Container"] {
background: rgba(var(--bs-primary-rgb), 0.06);
border-color: var(--bs-primary);
border-style: solid;
}
.cvc-frame-tag {
position: absolute;
top: 0.4rem;
left: 0.9rem;
font-size: 0.6em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--bs-primary);
opacity: 0;
transition: opacity 0.1s;
pointer-events: none;
}
.cvc-wrap:hover .cvc-frame-tag,
.cvc-wrap[data-sel="Container"] .cvc-frame-tag { opacity: 0.85; }
.cvc-frame-hint {
text-align: center;
font-size: 0.75em;
color: var(--bs-secondary-color);
margin-top: 0.6rem;
}
/* Buehne: Anordnung/Breite je Layout-Modus (Grid/List/SingleCard). */
.cvc-stage { display: flex; }
.cvc-stage.cvc-layout-grid { justify-content: center; }
.cvc-stage.cvc-layout-grid .cvc-card { width: 100%; max-width: 24em; }
.cvc-stage.cvc-layout-singlecard { justify-content: center; }
.cvc-stage.cvc-layout-singlecard .cvc-card { width: 100%; max-width: 34em; }
.cvc-stage.cvc-layout-list .cvc-card { width: 100%; max-width: none; }
.cvc-card {
border: 1px solid var(--bs-border-color);
border-radius: 10px;
background: var(--bs-body-bg);
overflow: hidden;
border-left: 4px solid var(--bs-primary);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
font-size: 1em;
}
/* Bloecke */
.cvc-block {
position: relative;
cursor: pointer;
transition: background-color 0.1s;
}
.cvc-block:hover { background: rgba(var(--bs-primary-rgb), 0.08); }
.cvc-tag {
position: absolute;
top: 0.2rem;
right: 0.45rem;
z-index: 2;
font-size: 0.6em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--bs-primary);
opacity: 0;
transition: opacity 0.1s;
pointer-events: none;
}
.cvc-block:hover .cvc-tag { opacity: 0.85; }
/* Auswahl-Highlight des aktiven Blocks (data-sel am Aussenbereich) */
.cvc-wrap[data-sel="Header"] .cvc-header,
.cvc-wrap[data-sel="Body"] .cvc-body,
.cvc-wrap[data-sel="Footer"] .cvc-footer {
background: rgba(var(--bs-primary-rgb), 0.10);
box-shadow: inset 0 0 0 2px var(--bs-primary);
}
.cvc-wrap[data-sel="Header"] .cvc-header .cvc-tag,
.cvc-wrap[data-sel="Body"] .cvc-body .cvc-tag,
.cvc-wrap[data-sel="Footer"] .cvc-footer .cvc-tag { opacity: 1; }
/* Header */
.cvc-head {
display: flex;
gap: 0.7rem;
padding: 0.85rem 1rem 0.7rem;
background: var(--bs-tertiary-bg);
align-items: flex-start;
}
.cvc-icon {
font-size: 1.4em;
color: var(--bs-primary);
width: 1.6em;
text-align: center;
flex-shrink: 0;
}
.cvc-head-text { min-width: 0; }
.cvc-eyebrow {
font-size: 0.7em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--bs-secondary-color);
}
.cvc-title { font-size: 1.05em; font-weight: 600; }
.cvc-subtitle { font-size: 0.88em; color: var(--bs-secondary-color); }
/* Body */
.cvc-body-fields {
padding: 0.7rem 1rem;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.cvc-field { display: flex; gap: 0.6em; font-size: 0.9em; }
.cvc-field-label { color: var(--bs-secondary-color); width: 7em; flex-shrink: 0; }
.cvc-empty {
font-size: 0.85em;
font-style: italic;
color: var(--bs-secondary-color);
padding: 0.4rem 0;
}
/* Footer */
.cvc-foot {
padding: 0.6rem 1rem;
border-top: 1px solid var(--bs-border-color);
}
.cvc-foot-btn {
font-size: 0.85em;
border: 1px solid var(--bs-border-color);
border-radius: 6px;
padding: 0.25em 0.7em;
color: var(--bs-secondary-color);
}
.cvc-foot-btn i { color: var(--bs-primary); }
/* ── Stil-Variante InlineRow: kein Kopf-Hintergrund, Titel + Untertitel inline ── */
.cvc-inlinerow .cvc-head {
background: transparent;
align-items: baseline;
padding-bottom: 0.3rem;
}
.cvc-inlinerow .cvc-eyebrow { display: none; }
.cvc-inlinerow .cvc-head-text {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.1rem 0.5rem;
}
.cvc-inlinerow .cvc-body-fields { padding-top: 0.2rem; }
/* ── Stil-Variante Compact: eine Zeile (Icon + Titel + Untertitel + Aktionen) ── */
.cvc-compact-row {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1rem;
}
.cvc-compact-row .cvc-title { font-size: 1em; flex-shrink: 0; }
.cvc-compact-row .cvc-subtitle {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cvc-compact-actions { color: var(--bs-secondary-color); flex-shrink: 0; }
/* ── Zwei Bereiche: Karte oben fest, Eingabebereich unten mit eigener Scrollbar ── */
.cvc-config-layout {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.cvc-config-card {
flex: 0 0 auto;
border-bottom: 1px solid var(--bs-border-color);
}
.cvc-config-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
/* UdmPasswordBox: Eingabefeld + Klartext-Umschalter nebeneinander */
.udm-passwordbox {
display: flex;
gap: 0.4em;
align-items: center;
}
.udm-passwordbox > :first-child {
flex: 1;
min-width: 0;
}
/* Maskierter Modus: zeigt auch bestehende Werte als Punkte (Chromium/Edge) */
.udm-passwordbox-masked input {
-webkit-text-security: disc;
text-security: disc;
}
/* =========================================================================
Konfig-Formulare: Feld-Box, Beschriftung, Mindestbreite, Dichte, Intensitaet
Gilt fuer beide Familien: ds-cfg-* (Designer) und udm-cfg-* (uebrige Dialoge).
Vorlage: docs/04_design/prototypes/admin-konfig-feldbox-vorlage.html
========================================================================= */
/* --- Stellschrauben auf oberster Ebene. Dichte = Kompakt, Intensitaet = Zart.
Bewusst auf :root, damit ein Formular ohne eigene Klasse den Wert der
uebergeordneten Ebene erbt (Bedeutung von Default in beiden Enums). --- */
:root {
--udm-cfg-field-min: 13em;
--udm-cfg-tint: 0.035;
--udm-cfg-box-pad-y: 0.30em;
--udm-cfg-box-pad-x: 0.50em;
--udm-cfg-box-pad-b: 0.40em;
--udm-cfg-label-gap: 0.05em;
--udm-cfg-col-gap: 0.75em;
--udm-cfg-row-gap: 0.40em;
--udm-cfg-body-pad: 0.50em 0.75em 0.60em;
}
/* --- Farbintensitaet: jede Stufe setzt nur den Grundwert --- */
.udm-cfg-tint-verysoft { --udm-cfg-tint: 0.020; }
.udm-cfg-tint-soft { --udm-cfg-tint: 0.035; }
.udm-cfg-tint-medium { --udm-cfg-tint: 0.060; }
.udm-cfg-tint-strong { --udm-cfg-tint: 0.100; }
/* --- Dichte: Abstaende --- */
.udm-cfg-density-normal {
--udm-cfg-box-pad-y: 0.40em;
--udm-cfg-box-pad-x: 0.60em;
--udm-cfg-box-pad-b: 0.50em;
--udm-cfg-label-gap: 0.07em;
--udm-cfg-col-gap: 0.85em;
--udm-cfg-row-gap: 0.55em;
--udm-cfg-body-pad: 0.70em 0.80em 0.80em;
}
.udm-cfg-density-compact {
--udm-cfg-box-pad-y: 0.30em;
--udm-cfg-box-pad-x: 0.50em;
--udm-cfg-box-pad-b: 0.40em;
--udm-cfg-label-gap: 0.05em;
--udm-cfg-col-gap: 0.75em;
--udm-cfg-row-gap: 0.40em;
--udm-cfg-body-pad: 0.50em 0.75em 0.60em;
}
.udm-cfg-density-ultra {
--udm-cfg-box-pad-y: 0.15em;
--udm-cfg-box-pad-x: 0.40em;
--udm-cfg-box-pad-b: 0.22em;
--udm-cfg-label-gap: 0.02em;
--udm-cfg-col-gap: 0.50em;
--udm-cfg-row-gap: 0.25em;
--udm-cfg-body-pad: 0.35em 0.60em 0.40em;
}
/* --- Alles Farbige leitet sich aus dem Grundwert ab ---
Die Ableitung steht bewusst NICHT in :root, sondern an den Traegern der
Farbstaerke-Klasse. Nur so rechnet sie mit dem Wert, den der jeweilige
Zweig traegt, statt immer mit dem Grundwert von ganz oben.
.udm-layout ist der Anwender-Dialog; UiDialogRootControl haengt die
Farbstaerke-Klasse dort an. Ohne diesen Selektor blieben die Variablen
im Dialog undefiniert und die Einstellung des Anwenders wirkungslos. */
.ds-cfg-form,
.udm-cfg-form,
.udm-layout {
--udm-cfg-box-bg: rgba(var(--bs-primary-rgb), var(--udm-cfg-tint));
--udm-cfg-head-bg: rgba(var(--bs-primary-rgb), calc(var(--udm-cfg-tint) * 4));
--udm-cfg-head-line: rgba(var(--bs-primary-rgb), calc(var(--udm-cfg-tint) * 20));
--udm-cfg-label-color: color-mix(in srgb,
var(--bs-primary) calc(40% + var(--udm-cfg-tint) * 400%),
var(--bs-secondary-color));
}
/* --- Gruppen-Kopf --- */
.ds-cfg-section__header {
background: var(--udm-cfg-head-bg);
border-top-color: var(--udm-cfg-head-line);
}
.ds-cfg-section__body { padding: var(--udm-cfg-body-pad); }
/* --- Box um Beschriftung und Eingabe --- */
.ds-cfg-field {
background: var(--udm-cfg-box-bg);
border-radius: 7px;
padding: var(--udm-cfg-box-pad-y) var(--udm-cfg-box-pad-x) var(--udm-cfg-box-pad-b);
display: flex;
flex-direction: column;
min-width: 0;
}
/* --- Beschriftung: farbig, weniger fett, nie umbrechend ---
Gleiche Groesse wie .udm-cfg-label im Hauptbereich: alle Feldtitel im
Produkt sind gleich gross. em statt rem, damit die Schriftgroessen-
Einstellung des Anwenders (body.udm-fontsize-*) wirkt. */
.ds-cfg-field > .ds-cfg-label {
color: var(--udm-cfg-label-color);
font-weight: 500;
font-size: 0.92em;
line-height: 1.3;
margin-bottom: var(--udm-cfg-label-gap);
text-transform: none;
letter-spacing: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 0;
}
/* --- Ankreuzfeld: Beschriftung neben das Kaestchen ---
Gleiche Regel wie fuer .udm-cfg-field in UdmConfigForm.razor. Direkter
Kindselektor: nur wenn das Kaestchen der ganze Feldinhalt ist. Steckt es
tiefer in einem groesseren Bedienelement, bleibt die Beschriftung oben. */
.ds-cfg-field:has(> .dxbl-checkbox) {
flex-direction: row;
align-items: center;
flex-wrap: wrap;
column-gap: 0.5em;
}
.ds-cfg-field:has(> .dxbl-checkbox) > .ds-cfg-label {
order: 2;
margin-bottom: 0;
flex-shrink: 1;
min-width: 0;
}
/* --- Text IM Ankreuzfeld traegt die Optik einer Feld-Beschriftung ---
Die meisten Ankreuzfelder fuehren keine eigene Beschriftung, ihr Text steht
im Kaestchen. Dieser Text IST die Beschriftung und soll gleich aussehen.
Die Groesse laeuft ueber die DevExpress-eigene Variable, die auch
udm_default.css setzt. So trifft sie das Element, das den Text traegt,
ohne dass wir uns auf DevExpress-internes Markup stuetzen.
Die Farbe setzen wir am Kaestchen selbst und verlassen uns darauf, dass
sie vererbt wird. Falls DevExpress den Rahmen des Kaestchens ueber
currentColor faerbt, wuerde er mitgehen; das ist der einzige Punkt hier,
den wir nicht am laufenden DOM geprueft haben. */
.udm-cfg-field > .dxbl-checkbox,
.ds-cfg-field > .dxbl-checkbox {
--dxbl-checkbox-font-size: 0.92em;
font-weight: 500;
color: var(--udm-cfg-label-color);
}
/* --- Abstaende und Mindestbreite der Reihen --- */
.ds-cfg-row {
gap: var(--udm-cfg-row-gap) var(--udm-cfg-col-gap);
margin-bottom: var(--udm-cfg-row-gap);
}
.ds-cfg-row[data-cols="2"] {
grid-template-columns: repeat(2, minmax(var(--udm-cfg-field-min), 1fr));
}
.ds-cfg-row[data-cols="3"] {
grid-template-columns: repeat(3, minmax(var(--udm-cfg-field-min), 1fr));
}
/* Die Regeln fuer die udm-cfg-Familie stehen im Inline-Style von
UdmConfigForm.razor. Grund: dieser wird erst beim Rendern in den DOM gehaengt
und gewinnt damit gegen jede Regel aus dieser Datei. Eine Quelle je Familie. */