/* ============================================================
   DIVOT-LOG – KOMPONENTENBIBLIOTHEK (ui-*)
   ============================================================
   Ein Block pro Bauteil aus core/UI/. Nutzt AUSSCHLIESSLICH
   Tokens aus variables.css (CD-01: Divotlog-Farbwelt) – dadurch läuft
   das Dark-Theme automatisch mit.

   Regeln:
   - Keine Hex-Werte, keine Pixelmaße außer aus Tokens (Ausnahme: 1px-Linien).
   - Schema BEM: .ui-bauteil, .ui-bauteil__teil, .ui-bauteil--variante
   - Seiten schreiben KEIN eigenes CSS für diese Bauteile.
   ============================================================ */

/* ---------- Panel ---------- */
.ui-panel {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-md); overflow: hidden;
}
.ui-panel--narrow { max-width: 760px; }
.ui-panel__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg) 0; flex-wrap: wrap;
}
.ui-panel__titles { flex: 1 1 auto; min-width: 0; }
.ui-panel__title {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: var(--font-lg); font-weight: 600; line-height: 1.3; color: var(--heading);
}
/* Überschriften-Icons nach TORSERVICE-Muster: getönte Icon-KACHEL
   (Vorbild .stat-card .stat-icon aus TS24: abgerundetes Quadrat,
   brand-primary-light-Hintergrund, brand-primary-text-Farbe).
   Hell wie dunkel automatisch über die Tokens. */
.ui-panel__title .icon {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-primary-light); color: var(--brand-primary-text);
}
.ui-panel__title .icon svg { width: 19px; height: 19px; }
.ui-panel__sub { margin: 4px 0 0; color: var(--text-muted); font-size: var(--font-sm); }
.ui-panel__actions { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }
.ui-panel__actions .ui-btn { margin-top: 0; }
.ui-panel__body { padding: var(--space-md) var(--space-lg) var(--space-lg); }
.ui-panel__body--flush { padding: 0; }
.ui-panel__body--flush table { margin: 0; }
/* Sektion innerhalb eines Panels (zweite Überschrift im selben Kasten) */
.ui-panel__section { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--border-light); }
.ui-panel__section-title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: var(--font-md); font-weight: 600; }
.ui-panel__section-title svg { color: var(--brand); }
.ui-panel__section-hint { margin: 0 0 var(--space-sm); color: var(--text-muted); font-size: var(--font-sm); }

/* ---------- Notice ---------- */
.ui-notice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; margin-bottom: var(--space-md);
  border: 1px solid; border-radius: var(--radius-md); font-size: var(--font-sm); line-height: 1.45;
}
.ui-notice__icon { flex: 0 0 auto; display: inline-flex; margin-top: 1px; }
.ui-notice__text { flex: 1 1 auto; }
.ui-notice__title { display: block; margin-bottom: 2px; }
.ui-notice__close {
  all: unset; cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; opacity: .6; margin: 0;
}
.ui-notice__close:hover { opacity: 1; }
.ui-notice--info   { background: var(--info-light);    border-color: var(--info-border);    color: var(--info-text); }
.ui-notice--ok     { background: var(--success-light); border-color: var(--success-border); color: var(--success-text); }
.ui-notice--warn   { background: var(--warning-light); border-color: var(--warning-border); color: var(--warning-text); }
.ui-notice--danger { background: var(--danger-light);  border-color: var(--danger-border);  color: var(--danger-text); }

/* ---------- Button ---------- */
.ui-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--radius-md); border: 1px solid var(--brand);
  background: var(--btn-bg); color: var(--btn-text); border-color: var(--btn-border);
  font-size: var(--font-base); font-weight: 600; text-decoration: none; cursor: pointer;
  box-shadow: var(--shadow-xs); margin-top: 0; line-height: 1.2;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              box-shadow var(--transition-fast), transform var(--transition-fast);
}
.ui-btn:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.ui-btn:active { transform: translateY(0); box-shadow: var(--shadow-xs); }
.ui-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .25); }
.ui-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.ui-btn--secondary { background: transparent; color: var(--text); border-color: var(--border); box-shadow: none; }
.ui-btn--secondary:hover { background: var(--hover-bg); border-color: var(--brand); color: var(--text); }
.ui-btn--ghost { background: transparent; color: var(--text-secondary); border-color: transparent; box-shadow: none; }
.ui-btn--ghost:hover { background: var(--hover-bg); border-color: transparent; color: var(--text); transform: none; box-shadow: none; }
.ui-btn--danger { background: var(--danger-light); color: var(--danger-text); border-color: var(--danger-border); box-shadow: none; }
.ui-btn--danger:hover { background: var(--danger); color: var(--brand-contrast); border-color: var(--danger); }
.ui-btn--sm { padding: 5px 10px; font-size: var(--font-sm); font-weight: 500; }
.ui-btn--sm svg { width: 14px; height: 14px; }
.ui-btn--icon { padding: 7px; }
.ui-btn--icon.ui-btn--sm { padding: 5px; }
/* Formular-Fußzeile: Buttons bündig unten */
.ui-form__actions { display: flex; gap: var(--space-sm); align-items: center; margin-top: var(--space-lg); flex-wrap: wrap; }

/* ---------- FormRow / FormGrid ---------- */
.ui-field { margin: 0 0 var(--space-md); min-width: 0; }
.ui-field__label { display: block; margin: 0 0 4px; color: var(--text); font-size: var(--font-sm); font-weight: 500; }
.ui-field__control { position: relative; }
.ui-field__hint  { margin-top: 4px; color: var(--text-muted); font-size: var(--font-xs); line-height: 1.4; }
.ui-field__error { margin-top: 4px; color: var(--danger-text); font-size: var(--font-xs); font-weight: 500; }
.ui-field--error .ui-input { border-color: var(--danger); }
.ui-input {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--input-bg); color: var(--text); font-size: var(--font-base); font-family: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.ui-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .15); }
.ui-input:disabled, .ui-input--static { background: var(--bg-subtle); color: var(--text-secondary); cursor: default; }
textarea.ui-input { min-height: 90px; resize: vertical; }
.ui-input--color { padding: 3px; height: 40px; width: 64px; }
/* Toggle / Checkbox */
.ui-field__inline { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; margin: 0; }
.ui-field__inline .ui-field__label { margin: 0; }
.ui-check { width: 16px; height: 16px; accent-color: var(--brand); margin: 0; }
.ui-toggle {
  appearance: none; width: 38px; height: 22px; border-radius: var(--radius-full); margin: 0;
  background: var(--border); position: relative; cursor: pointer; flex: 0 0 auto;
  transition: background var(--transition-fast);
}
.ui-toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--toggle-knob); box-shadow: var(--shadow-xs); transition: transform var(--transition-fast);
}
.ui-toggle:checked { background: var(--brand); }
.ui-toggle:checked::after { transform: translateX(16px); }
.ui-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .25); }
/* Grid */
.ui-formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 var(--space-md); }
.ui-formgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-formgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-formgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) { .ui-formgrid--2, .ui-formgrid--3, .ui-formgrid--4 { grid-template-columns: 1fr; } }

/* ---------- StatTile / StatTileGrid ---------- */
.ui-statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-md); }
.ui-statgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-statgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-statgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ui-statgrid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ui-statgrid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 900px) { .ui-statgrid--4, .ui-statgrid--5, .ui-statgrid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ui-stat {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-md); box-shadow: var(--shadow-xs); color: inherit; text-decoration: none;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.ui-stat--link:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.ui-stat__icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--radius-md);   /* CD-05: TS24 Stat-Icon 44 */
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-primary-light); color: var(--brand-primary-text);
}
.ui-stat__body { min-width: 0; flex: 1 1 auto; }
.ui-stat__value { font-size: var(--font-2xl); font-weight: 800; letter-spacing: -.5px; line-height: 1.1; color: var(--heading); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ui-stat__unit { font-size: var(--font-sm); font-weight: 500; color: var(--text-muted); }
.ui-stat__label { color: var(--text-muted); font-size: var(--font-sm); margin-top: 2px; }
.ui-stat__hint { color: var(--text-muted); font-size: var(--font-xs); margin-top: 4px; }
.ui-stat__trend { font-size: var(--font-xs); font-weight: 600; padding: 1px 6px; border-radius: var(--radius-full); }
.ui-stat__trend--good { background: var(--success-light); color: var(--success-text); }
.ui-stat__trend--bad  { background: var(--danger-light);  color: var(--danger-text); }
.ui-stat--ok     { border-left: 3px solid var(--success); }
.ui-stat--warn   { border-left: 3px solid var(--warning); }
.ui-stat--danger { border-left: 3px solid var(--danger); }
.ui-stat--info   { border-left: 3px solid var(--info); }
.ui-stat--brand  { border-left: 3px solid var(--brand); }
.ui-stat--ok .ui-stat__icon     { background: var(--success-light); color: var(--success-text); }
.ui-stat--warn .ui-stat__icon   { background: var(--warning-light); color: var(--warning-text); }
.ui-stat--danger .ui-stat__icon { background: var(--danger-light);  color: var(--danger-text); }
.ui-stat--info .ui-stat__icon   { background: var(--info-light);    color: var(--info-text); }

/* ---------- Badge ---------- */
.ui-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-full);
  font-size: var(--font-xs); font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.ui-badge svg { width: 12px; height: 12px; }
.ui-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.ui-badge--neutral { background: var(--bg); color: var(--text-secondary); border: 1px solid var(--border); }
.ui-badge--brand   { background: var(--brand-primary-light); color: var(--brand-primary-text); }
.ui-badge--ok      { background: var(--success-light); color: var(--success-text); }
.ui-badge--warn    { background: var(--warning-light); color: var(--warning-text); }
.ui-badge--danger  { background: var(--danger-light);  color: var(--danger-text); }
.ui-badge--info    { background: var(--info-light);    color: var(--info-text); }
/* Freie Farbe (Rundenkategorien): Rand + Text in der Farbe, Fläche hell */
.ui-badge--custom {
  --badge-color: var(--brand);
  color: var(--badge-color); border: 1px solid var(--badge-color);
  background: color-mix(in srgb, var(--badge-color) 12%, var(--card-bg));
}

/* ---------- EmptyState ---------- */
.ui-empty { text-align: center; padding: var(--space-xl) var(--space-md); color: var(--text-muted); }
/* CD-04: Empty-State-Icon als Markenfläche (cd-hero-Optik), nicht mehr ausgegraut */
.ui-empty__icon { display: flex; justify-content: center; }
.ui-empty__icon .icon { width: 72px; height: 72px; border-radius: var(--radius-xl); background: var(--brand-primary-light); color: var(--brand-primary-text); }
.ui-empty__icon svg { width: 40px; height: 40px; }
.ui-empty__title { margin: 10px 0 4px; color: var(--text); font-size: var(--font-md); font-weight: 600; }
.ui-empty__text { margin: 0; font-size: var(--font-sm); }
.ui-empty__action { margin-top: var(--space-md); }

/* ---------- Accordion (<details>) ---------- */
.ui-acc { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.ui-acc__item { border-bottom: 1px solid var(--border); }
.ui-acc__item:last-child { border-bottom: none; }
.ui-acc__head {
  display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer;
  padding: 12px var(--space-md); background: var(--bg-subtle); font-weight: 600; font-size: var(--font-base);
  transition: background var(--transition-fast);
}
.ui-acc__head::-webkit-details-marker { display: none; }
.ui-acc__head:hover { background: var(--hover-bg); }
.ui-acc__head svg { color: var(--text-muted); }
.ui-acc__title { flex: 1 1 auto; }
.ui-acc__meta { color: var(--text-muted); font-size: var(--font-sm); font-weight: 500; }
.ui-acc__chev { display: inline-flex; transition: transform var(--transition-fast); }
.ui-acc__item[open] .ui-acc__chev { transform: rotate(90deg); }
.ui-acc__body { padding: var(--space-md); background: var(--card-bg); }

/* ---------- Kleinteile ---------- */
.ui-muted { color: var(--text-muted); font-size: var(--font-sm); }
.ui-stack > * + * { margin-top: var(--space-md); }
.ui-row { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }
.ui-row--between { justify-content: space-between; }

/* ---------- DataTable ---------- */
.ui-table-wrap { overflow-x: auto; }
.ui-table__tools { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.ui-table__filter { max-width: 280px; }
.ui-input--sm { padding: 6px 10px; font-size: var(--font-sm); }
.ui-table__count { color: var(--text-muted); font-size: var(--font-xs); }
.ui-table { width: 100%; border-collapse: collapse; font-size: var(--font-sm); }
.ui-table__caption { text-align: left; color: var(--text-muted); font-size: var(--font-xs); padding: 0 0 6px; }
.ui-table__th {
  text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--border);
  color: var(--text-muted); font-size: var(--font-xs); font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
  white-space: nowrap; user-select: none;
}
.ui-table__th--right, .ui-table__td--right { text-align: right; }
.ui-table__th--center, .ui-table__td--center { text-align: center; }
.ui-table__th--sort { cursor: pointer; }
.ui-table__th--sort:hover { color: var(--text); }
.ui-table__sorticon { display: inline-block; width: 0; height: 0; margin-left: 6px; vertical-align: middle; opacity: .35;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid currentColor; }
.ui-table__th--asc .ui-table__sorticon { opacity: 1; }
.ui-table__th--desc .ui-table__sorticon { opacity: 1; transform: rotate(180deg); }
.ui-table__td { padding: 10px 12px; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.ui-table tbody tr { transition: background var(--transition-fast); }
.ui-table tbody tr:hover { background: var(--hover-bg); }
.ui-table tbody tr:last-child .ui-table__td { border-bottom: none; }
.ui-table--compact .ui-table__th, .ui-table--compact .ui-table__td { padding: 6px 10px; }
.ui-table__td--num { font-variant-numeric: tabular-nums; }
.ui-table__unit { color: var(--text-muted); font-size: var(--font-xs); }
.ui-table__td--actions { white-space: nowrap; }
.ui-table__td--actions .ui-row { justify-content: flex-end; }
.ui-table__empty { padding: var(--space-md); color: var(--text-muted); font-size: var(--font-sm); text-align: center; }
.ui-mono { font-family: var(--font-mono); font-size: var(--font-xs); background: var(--bg-subtle); padding: 1px 6px; border-radius: var(--radius-sm); }
/* Formulare in Tabellenzellen: kein Abstand */
.ui-table form { margin: 0; display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Tabs ---------- */
.ui-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: var(--space-md); overflow-x: auto; }
.ui-tabs__item {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; margin-bottom: -1px;
  color: var(--text-secondary); text-decoration: none; font-size: var(--font-sm); font-weight: 500;
  border-bottom: 2px solid transparent; white-space: nowrap; transition: color var(--transition-fast), border-color var(--transition-fast);
}
.ui-tabs__item:hover { color: var(--text); }
.ui-tabs__item--active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.ui-tabs__item svg { width: 16px; height: 16px; }
.ui-tabs__count { background: var(--bg); color: var(--text-muted); font-size: var(--font-xs); padding: 0 6px; border-radius: var(--radius-full); }
.ui-tabs--sm .ui-tabs__item { padding: 6px 10px; font-size: var(--font-xs); }

/* ---------- ColorSwatches ---------- */
.ui-swatches { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ui-swatch { all: unset; display: inline-flex; cursor: pointer; border-radius: 50%; padding: 2px; }
.ui-swatch input[type=radio] { display: none; }
.ui-swatch__dot {
  display: block; width: 22px; height: 22px; border-radius: 50%;
  background: var(--swatch, var(--brand)); border: 2px solid var(--card-bg); box-shadow: 0 0 0 1px var(--border);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.ui-swatch:hover .ui-swatch__dot { transform: scale(1.12); }
.ui-swatch--on .ui-swatch__dot { box-shadow: 0 0 0 2px var(--text); transform: scale(1.1); }
.ui-swatch:focus-visible .ui-swatch__dot { box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .35); }
.ui-swatch--free input[type=color] { width: 26px; height: 26px; padding: 0; border: 2px dashed var(--border); border-radius: 50%; background: transparent; cursor: pointer; }
.ui-swatch--free.ui-swatch--on input[type=color] { border-style: solid; border-color: var(--text); }

/* ---------- Matrix (Rechte) – Tabelle im Akkordeon-Body ---------- */
.ui-matrix { width: 100%; border-collapse: collapse; font-size: var(--font-sm); }
.ui-matrix th { text-align: center; padding: 6px 8px; color: var(--text-muted); font-size: var(--font-xs); font-weight: 600; border-bottom: 1px solid var(--border); vertical-align: bottom; min-width: 72px; }
.ui-matrix th:first-child { text-align: left; min-width: 220px; }
.ui-matrix th .ui-matrix__role { display: block; margin-top: 2px; }
.ui-matrix th svg { display: block; margin: 0 auto; }
.ui-matrix td { padding: 8px; border-bottom: 1px solid var(--border-light); text-align: center; vertical-align: middle; }
.ui-matrix td:first-child { text-align: left; }
.ui-matrix tr:last-child td { border-bottom: none; }
.ui-matrix__name { font-weight: 600; }
.ui-matrix__desc { color: var(--text-muted); font-size: var(--font-xs); margin-top: 1px; }
.ui-matrix__key { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
.ui-matrix .ui-check { width: 18px; height: 18px; }
.ui-matrix .ui-check:disabled { opacity: .55; cursor: not-allowed; }
.ui-acc__body--flush { padding: 0; }
.ui-acc__head--role { color: var(--role-color, currentColor); }
.ui-role-icon { display: inline-flex; color: var(--role-color, var(--brand)); }
.ui-acc__body .ui-table-wrap { margin: calc(-1 * var(--space-md)); }

/* ---------- Toast-Ergänzungen (Basis .toast liegt in style.css) ---------- */
.toast { position: relative; overflow: hidden; cursor: pointer; }
.toast__msg { flex: 1 1 auto; }
.toast__close { all: unset; cursor: pointer; font-size: 18px; line-height: 1; padding: 0 2px; opacity: .55; }
.toast__close:hover { opacity: 1; }
.toast__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: currentColor; opacity: .25;
  transform-origin: left; animation: toastBar linear forwards; animation-play-state: var(--paused, running); }
.toast-success .toast__bar { color: var(--success); }
.toast-error   .toast__bar { color: var(--danger); }
.toast-warning .toast__bar { color: var(--warning); }
.toast-info    .toast__bar { color: var(--brand); }
@keyframes toastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.toast--sticky { border-width: 1px 1px 1px 3px; }

/* ---------- Kleinteile UI-03 ---------- */
.ui-input--num { max-width: 110px; text-align: right; font-variant-numeric: tabular-nums; }
.ui-inline-details { display: inline-block; position: relative; }
.ui-inline-details > summary { list-style: none; }
.ui-inline-details > summary::-webkit-details-marker { display: none; }
.ui-inline-details[open] > summary { border-color: var(--brand); }
.ui-inline-details > form {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-sm); box-shadow: var(--shadow-lg); white-space: nowrap;
}
.ui-table__td .ui-input--sm { width: auto; min-width: 140px; }
.ui-table__td select.ui-input--sm { width: auto; }

.ui-row--tpl { align-items: flex-end; padding: var(--space-sm) var(--space-md); background: var(--bg-subtle); border: 1px dashed var(--border); border-radius: var(--radius-md); margin-bottom: var(--space-sm); }
.ui-row--tpl .ui-field { margin: 0; min-width: 180px; }
.ui-row--tpl .ui-muted { align-self: center; font-weight: 600; }
.ui-note { margin: var(--space-sm) 0 0; }

/* ---------- Charts (serverseitiges SVG, UI-04) ---------- */
.ui-chartwrap { width: 100%; }
.ui-chart { width: 100%; height: auto; display: block; font-family: var(--font-family); }
.ui-chart text { font-family: var(--font-family); }
.ui-chart__legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.ui-chart__legkey { display: inline-flex; align-items: center; gap: 5px; font-size: var(--font-xs); color: var(--text-secondary); }
.ui-chart__legdot { width: 10px; height: 10px; border-radius: 50%; background: var(--swatch, var(--brand)); display: inline-block; }

.ui-table__tr--excluded .ui-table__td { opacity: .45; text-decoration: line-through; }
.ui-table__tr--excluded .ui-table__td--actions { opacity: 1; text-decoration: none; }

.ui-chart__legline { width: 16px; height: 0; border-top: 2px dashed var(--swatch, var(--text-muted)); display: inline-block; }
.ui-panel__actions form { margin: 0; }

.ui-table__tr--dim .ui-table__td { color: var(--text-muted); }
.ui-chart__legbar { width: 12px; height: 9px; border-radius: 2px; background: var(--swatch, var(--brand)); display: inline-block; }
.ui-chart__legbar--dim { opacity: .55; }
.ui-chart--inline { display: block; }