/* Komponentenschicht der Nx-Komponenten (Components/Nx), nach Nexovis Brand Kit guidance/web-app-ui.md.
 * Nur Tokens aus brand/tokens/tokens.css, keine Hex-Werte (RazorMarkupTests prüft das). Zwischentöne für
 * Hover und Druck entstehen mit color-mix aus Text- und Flächenfarbe und passen so hell wie dunkel.
 */

:root {
    --nx-ui-hover: color-mix(in srgb, var(--nx-text) 6%, transparent);
    --nx-ui-pressed: color-mix(in srgb, var(--nx-text) 12%, transparent);
}

.nx-icon {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
}

/* ---------------------------------------------------------------- Button */

.nx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-2);
    height: var(--nx-control-h);
    padding: 0 var(--nx-space-5);
    margin: 0;
    border: var(--nx-border-w) solid transparent;
    border-radius: var(--nx-radius-sm);
    background: transparent;
    color: var(--nx-emphasis);
    font-family: var(--nx-font-web);
    font-size: var(--nx-text-body);
    font-weight: var(--nx-weight-bold);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    opacity: 1;
    transition: background var(--nx-dur) var(--nx-ease), border-color var(--nx-dur) var(--nx-ease);
}

.nx-btn--small { height: var(--nx-control-h-sm); padding: 0 var(--nx-space-3); font-size: var(--nx-text-small); }
.nx-btn--large { height: var(--nx-control-h-lg); padding: 0 var(--nx-space-6); }
.nx-btn--icon-only { width: var(--nx-control-h); padding: 0; }
.nx-btn--icon-only.nx-btn--small { width: var(--nx-control-h-sm); }
.nx-btn--icon-only.nx-btn--large { width: var(--nx-control-h-lg); }

/* Primär: Sonnengelb, Schrift Waldgrün. Niemals weiße Schrift auf Gelb (Kit). */
.nx-btn--primary { background: var(--nx-accent); color: var(--nx-text-on-yellow); }
.nx-btn--primary:hover { background: var(--nx-accent-hover); }

.nx-btn--secondary { border-color: var(--nx-emphasis); }
.nx-btn--secondary:hover, .nx-btn--tertiary:hover { background: var(--nx-ui-hover); }
.nx-btn--secondary:active, .nx-btn--tertiary:active { background: var(--nx-ui-pressed); }

.nx-btn--destructive { color: var(--nx-error); border-color: var(--nx-error); }
.nx-btn--destructive:hover { background: color-mix(in srgb, var(--nx-error) 8%, transparent); }

.nx-btn:disabled,
.nx-btn[aria-disabled="true"]:not([aria-busy="true"]) {
    background: var(--nx-bg-subtle);
    border-color: var(--nx-border);
    color: var(--nx-neutral-400);
    cursor: default;
}

/* Während eine Aktion läuft, behält die Schaltfläche ihre Farbe; sie nimmt nur keine Klicks an. */
.nx-btn[aria-busy="true"] { cursor: progress; }

.nx-btn__spinner {
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--nx-radius-pill);
    animation: nx-spin 0.8s linear infinite;
}

@keyframes nx-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .nx-btn__spinner { animation: none; border-right-color: currentColor; opacity: .6; }
}

/* Mobil mindestens 44 px Trefferfläche (Kit). */
@media (pointer: coarse) {
    .nx-btn { min-height: var(--nx-tap-min); }
    .nx-btn--icon-only { min-width: var(--nx-tap-min); }
}

/* ---------------------------------------------------------------- Formularfelder */

.nx-field {
    display: flex;
    flex-direction: column;
    gap: var(--nx-space-2);
    min-width: 0;
}

.nx-field__label {
    font-size: var(--nx-text-small);
    font-weight: var(--nx-weight-semibold);
    color: var(--nx-text);
}

.nx-field__required { color: var(--nx-error); margin-left: var(--nx-space-1); }

.nx-field__hint {
    font-size: var(--nx-text-small);
    color: var(--nx-text-muted);
}

.nx-field__error {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    font-size: var(--nx-text-small);
    color: var(--nx-error);
}

.nx-input {
    box-sizing: border-box;
    width: 100%;
    height: var(--nx-control-h);
    padding: 0 var(--nx-space-3);
    border: var(--nx-border-w) solid var(--nx-border);
    border-radius: var(--nx-radius-sm);
    background: var(--nx-surface);
    color: var(--nx-text);
    font-family: var(--nx-font-web);
    font-size: var(--nx-text-body);
}

.nx-input::placeholder { color: var(--nx-text-muted); }
.nx-input:hover { border-color: var(--nx-border-strong); }
.nx-input:focus { border-color: var(--nx-emphasis); }
.nx-input:disabled { background: var(--nx-bg-subtle); color: var(--nx-neutral-400); }
.nx-input[aria-invalid="true"] { border-color: var(--nx-error); }

.nx-textarea {
    height: auto;
    min-height: calc(var(--nx-control-h) * 2);
    padding: var(--nx-space-2) var(--nx-space-3);
    line-height: var(--nx-leading-body);
    resize: vertical;
}

.nx-select { position: relative; display: flex; }
.nx-select__control { appearance: none; padding-right: var(--nx-space-10); cursor: pointer; }
.nx-select .nx-select__chevron {
    position: absolute;
    right: var(--nx-space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--nx-text-secondary);
    pointer-events: none;
}

@media (pointer: coarse) {
    .nx-input:not(.nx-textarea) { height: var(--nx-tap-min); }
}

.nx-check {
    display: flex;
    align-items: flex-start;
    gap: var(--nx-space-3);
    min-height: var(--nx-control-h);
    padding: var(--nx-space-2) 0;
    box-sizing: border-box;
    cursor: pointer;
}

.nx-check__input {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    flex-shrink: 0;
    accent-color: var(--nx-emphasis);
    cursor: pointer;
}

.nx-check__text, .nx-switch__text { display: flex; flex-direction: column; gap: var(--nx-space-1); }
.nx-check--disabled, .nx-switch-row--disabled { color: var(--nx-neutral-400); cursor: default; }

@media (pointer: coarse) {
    .nx-check, .nx-switch-row { min-height: var(--nx-tap-min); }
}

.nx-switch-row {
    display: flex;
    align-items: flex-start;
    gap: var(--nx-space-3);
    padding: var(--nx-space-2) 0;
}

.nx-switch {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 26px;
    padding: 3px;
    border: 0;
    border-radius: var(--nx-radius-pill);
    background: var(--nx-border-strong);
    cursor: pointer;
    transition: background var(--nx-dur) var(--nx-ease);
}

.nx-switch__knob {
    width: 20px;
    height: 20px;
    border-radius: var(--nx-radius-pill);
    background: var(--nx-surface);
    transition: transform var(--nx-dur) var(--nx-ease), background var(--nx-dur) var(--nx-ease);
}

/* An: Waldgrün mit gelbem Knopf; im Dark Mode tauschen die Fokus-Tokens die Rollen, der Knopf bleibt sichtbar. */
.nx-switch[aria-checked="true"] { background: var(--nx-emphasis); }
.nx-switch[aria-checked="true"] .nx-switch__knob { transform: translateX(18px); background: var(--nx-focus-inner); }
.nx-switch:disabled { opacity: .5; cursor: default; }
.nx-switch__label { padding-top: 3px; }

/* ---------------------------------------------------------------- Badge */

.nx-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-1);
    height: 22px;
    padding: 0 var(--nx-space-2);
    border: var(--nx-border-w) solid var(--nx-border);
    border-radius: var(--nx-radius-pill);
    background: var(--nx-neutral-100);
    color: var(--nx-text-on-status-fill);
    font-size: var(--nx-text-micro);
    font-weight: var(--nx-weight-bold);
    white-space: nowrap;
}

.nx-badge--success { background: var(--nx-success-fill); border-color: var(--nx-success-border); }
.nx-badge--error { background: var(--nx-error-fill); border-color: var(--nx-error-border); }
/* Gelbe Signalfläche mit Waldgrün-Kontur (Kit: Graustufentest, Gelb braucht einen Anker). */
.nx-badge--warning { background: var(--nx-warning-fill); border-color: var(--nx-forest-green); color: var(--nx-text-on-yellow); }
.nx-badge--info {
    background: color-mix(in srgb, var(--nx-info) 14%, var(--nx-white));
    border-color: color-mix(in srgb, var(--nx-info) 45%, var(--nx-white));
}

/* ---------------------------------------------------------------- Leerzustand, Skeleton */

.nx-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--nx-space-2);
    padding: var(--nx-space-8) var(--nx-space-6);
    text-align: center;
    color: var(--nx-text-secondary);
}

.nx-empty__icon { color: var(--nx-text-muted); }
.nx-empty__title { margin: 0; font-weight: var(--nx-weight-semibold); color: var(--nx-text); }
.nx-empty__text { margin: 0; max-width: var(--nx-measure); font-size: var(--nx-text-small); }
.nx-empty__action { margin-top: var(--nx-space-2); }

/* ---------------------------------------------------------------- Änderungsverlauf (NxHistory) */

.nx-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nx-history__entry { padding: var(--nx-space-3) 0; border-bottom: var(--nx-border-w) solid var(--nx-border); }
.nx-history__entry:last-child { border-bottom: 0; }
.nx-history__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-2); }
.nx-history__subject { font-weight: var(--nx-weight-semibold); color: var(--nx-text); overflow-wrap: anywhere; }
.nx-history__meta { margin-top: var(--nx-space-1); font-size: var(--nx-text-small); color: var(--nx-text-muted); }
.nx-history__changes { margin: var(--nx-space-2) 0 0; display: grid; gap: var(--nx-space-1); font-size: var(--nx-text-small); }
.nx-history__change { display: grid; grid-template-columns: minmax(7rem, max-content) 1fr; gap: var(--nx-space-3); }
.nx-history__change dt { color: var(--nx-text-secondary); }
.nx-history__change dd { margin: 0; overflow-wrap: anywhere; }
.nx-history__change del { color: var(--nx-text-muted); }
.nx-history__change ins { text-decoration: none; color: var(--nx-text); }

.nx-skeleton { display: flex; flex-direction: column; gap: var(--nx-space-2); }

.nx-skeleton__shape {
    display: block;
    border-radius: var(--nx-radius-sm);
    background: color-mix(in srgb, var(--nx-text) 9%, var(--nx-surface));
    animation: nx-pulse 1.4s var(--nx-ease) infinite;
}

.nx-skeleton__shape--text { height: 0.9em; width: 100%; }
.nx-skeleton__shape--block { height: 80px; width: 100%; }
.nx-skeleton__shape--circle { width: 40px; height: 40px; border-radius: var(--nx-radius-pill); }

@keyframes nx-pulse { 50% { opacity: .55; } }

@media (prefers-reduced-motion: reduce) {
    .nx-skeleton__shape { animation: none; }
}

/* ---------------------------------------------------------------- Dialog */

.nx-dialog {
    box-sizing: border-box;
    width: 40rem;
    max-width: calc(100vw - 2 * var(--nx-space-4));
    max-height: calc(100vh - 2 * var(--nx-space-8));
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface-raised);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-lg);
}

.nx-dialog--small { width: 28rem; }
.nx-dialog--large { width: 60rem; }

.nx-dialog::backdrop { background: color-mix(in srgb, var(--nx-black) 50%, transparent); }

.nx-dialog__panel { display: flex; flex-direction: column; max-height: inherit; }

.nx-dialog__header {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    padding: var(--nx-space-4) var(--nx-space-4) var(--nx-space-3) var(--nx-space-6);
    border-bottom: var(--nx-border-w) solid var(--nx-border);
}

.nx-dialog__title { flex-grow: 1; margin: 0; font-size: var(--nx-text-h3); }
.nx-dialog__body { padding: var(--nx-space-5) var(--nx-space-6); overflow: auto; line-height: var(--nx-leading-body); }

.nx-dialog__footer {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--nx-space-3);
    padding: var(--nx-space-4) var(--nx-space-6);
    border-top: var(--nx-border-w) solid var(--nx-border);
}

.nx-confirm__message { margin: 0; }

/* ---------------------------------------------------------------- Toasts */

.nx-toasts {
    position: fixed;
    right: var(--nx-space-6);
    bottom: var(--nx-space-6);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: var(--nx-space-2);
    pointer-events: none;
}

.nx-toasts__region { display: flex; flex-direction: column; gap: var(--nx-space-2); }

.nx-toast {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    width: min(26rem, calc(100vw - 2 * var(--nx-space-4)));
    box-sizing: border-box;
    padding: var(--nx-space-2) var(--nx-space-2) var(--nx-space-2) var(--nx-space-4);
    border: var(--nx-border-w) solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface-raised);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-md);
    pointer-events: auto;
}

.nx-toast__text { flex-grow: 1; }
.nx-toast--success .nx-toast__icon { color: var(--nx-success); }
.nx-toast--error { border-color: var(--nx-error); }
.nx-toast--error .nx-toast__icon { color: var(--nx-error); }
.nx-toast--warning .nx-toast__icon { color: var(--nx-warning); }
.nx-toast--info .nx-toast__icon, .nx-toast--neutral .nx-toast__icon { color: var(--nx-info); }

@media (max-width: 767px) {
    .nx-toasts { left: var(--nx-space-4); right: var(--nx-space-4); bottom: var(--nx-space-4); align-items: center; }
}

/* ---------------------------------------------------------------- Menü */

.nx-menu { position: relative; display: inline-flex; }

.nx-menu__backdrop { position: fixed; inset: 0; z-index: 1000; }

/* Popover im Top-Layer; top/left setzt nx.js openMenu am Auslöser. */
.nx-menu__list {
    position: fixed;
    inset: auto;
    margin: 0;
    overflow: visible;
    z-index: 1001;
    color: var(--nx-text);
    display: flex;
    flex-direction: column;
    min-width: 12rem;
    padding: var(--nx-space-1);
    border: var(--nx-border-w) solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface-raised);
    box-shadow: var(--nx-shadow-md);
}


.nx-menu__item {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    width: 100%;
    height: 36px;
    padding: 0 var(--nx-space-3);
    border: 0;
    border-radius: var(--nx-radius-sm);
    background: transparent;
    color: var(--nx-text);
    font-family: var(--nx-font-web);
    font-size: var(--nx-text-small);
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.nx-menu__item:hover, .nx-menu__item:focus { background: var(--nx-ui-hover); }
.nx-menu__item--destructive { color: var(--nx-error); }
.nx-menu__item[aria-disabled="true"] { color: var(--nx-neutral-400); cursor: default; }

@media (pointer: coarse) {
    .nx-menu__item { height: var(--nx-tap-min); }
}

/* ---------------------------------------------------------------- Seitenkopf, Abschnitte, Detailseite (UX 3) */

.nx-page-header__back {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-1);
    width: fit-content;
    margin-bottom: var(--nx-space-2);
    color: var(--nx-text-secondary);
    font-size: var(--nx-text-small);
    text-decoration: none;
}

.nx-page-header__back:hover { color: var(--nx-text); text-decoration: underline; }

.nx-page-header__row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--nx-space-4); flex-wrap: wrap; }
.nx-page-header__text { display: flex; flex-direction: column; gap: var(--nx-space-2); min-width: 0; }
.nx-page-header__text .nx-page__title { overflow-wrap: anywhere; }
.nx-page-header__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-2); font-size: var(--nx-text-small); color: var(--nx-text-secondary); }
.nx-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-2); }

.nx-detail { display: block; }
.nx-detail__content { display: flex; flex-direction: column; gap: var(--nx-space-6); min-width: 0; }
.nx-detail__nav { display: none; }

@media (min-width: 1200px) {
    .nx-detail--nav { display: grid; grid-template-columns: minmax(0, 1fr) 13rem; gap: var(--nx-space-8); align-items: start; }
    .nx-detail--nav .nx-detail__nav { display: block; position: sticky; top: var(--nx-space-4); }
}

.nx-detail__nav ul { list-style: none; margin: 0; padding: 0; border-left: var(--nx-border-w) solid var(--nx-border); }

.nx-detail__nav a {
    display: block;
    margin-left: calc(-1 * var(--nx-border-w));
    padding: var(--nx-space-2) var(--nx-space-3);
    border-left: 3px solid transparent;
    color: var(--nx-text-secondary);
    font-size: var(--nx-text-small);
    text-decoration: none;
}

.nx-detail__nav a:hover { color: var(--nx-text); }
.nx-detail__nav a[aria-current="true"] { border-left-color: var(--nx-accent); color: var(--nx-text); font-weight: var(--nx-weight-semibold); }

.nx-section {
    scroll-margin-top: var(--nx-space-4);
    padding: var(--nx-space-5) var(--nx-space-6);
    border: var(--nx-border-w) solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface);
}

.nx-section__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--nx-space-4); flex-wrap: wrap; margin-bottom: var(--nx-space-4); }
.nx-section__text { display: flex; flex-direction: column; gap: var(--nx-space-1); min-width: 0; }
.nx-section__title { margin: 0; font-size: var(--nx-text-h3); }
.nx-section__description { margin: 0; max-width: var(--nx-measure); font-size: var(--nx-text-small); color: var(--nx-text-muted); }
.nx-section__actions { display: flex; flex-wrap: wrap; gap: var(--nx-space-2); }
.nx-section__body { display: flex; flex-direction: column; gap: var(--nx-space-4); min-width: 0; }

@media (max-width: 767px) {
    .nx-section { padding: var(--nx-space-4); }
}

/* Formular im Abschnitt: Felder im Raster, Beschriftung über dem Feld (Kit). */
.nx-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--nx-space-4) var(--nx-space-6); max-width: 60rem; }
.nx-form--single { grid-template-columns: minmax(0, 36rem); }
.nx-form__wide { grid-column: 1 / -1; }
.nx-form__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-2); }
.nx-text-muted { color: var(--nx-text-muted); font-size: var(--nx-text-small); margin: 0; }

/* ---------------------------------------------------------------- Tabelle (NxTable) */

.nx-table-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-3); margin-bottom: var(--nx-space-3); }
.nx-table-tools__search { position: relative; flex: 1 1 16rem; max-width: 28rem; }
.nx-table-tools__search .nx-input { padding-left: var(--nx-space-8); }
.nx-table-tools__search .nx-table-tools__search-icon { position: absolute; left: var(--nx-space-3); top: 50%; transform: translateY(-50%); color: var(--nx-text-muted); }
.nx-table-tools__end { display: flex; gap: var(--nx-space-2); margin-left: auto; }

/* position: relative hält auch absolut positionierte Inhalte (Screenreader-Texte im Kopf) im Scrollbereich;
   sonst wird auf dem Handy die ganze Seite waagrecht scrollbar. */
.nx-table-wrap { position: relative; overflow-x: auto; border: var(--nx-border-w) solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface); }

.nx-table { width: 100%; border-collapse: collapse; font-size: var(--nx-text-small); }

.nx-table th {
    padding: var(--nx-space-2) var(--nx-space-3);
    border-bottom: var(--nx-border-w) solid var(--nx-border);
    background: var(--nx-bg-subtle);
    color: var(--nx-text-secondary);
    font-weight: var(--nx-weight-semibold);
    text-align: left;
    white-space: nowrap;
}

.nx-table td { height: 40px; padding: var(--nx-space-1) var(--nx-space-3); border-bottom: var(--nx-border-w) solid var(--nx-border); vertical-align: middle; }
.nx-table tbody tr:last-child td { border-bottom: 0; }
.nx-table__row--open { cursor: pointer; }
.nx-table__row--open:hover { background: var(--nx-ui-hover); }
.nx-table__row.is-dragging { opacity: .5; }
.nx-table__primary { font-weight: var(--nx-weight-semibold); min-width: 10rem; }
.nx-table__primary a, .nx-table__link { color: var(--nx-text); text-decoration: none; overflow-wrap: anywhere; }
.nx-table__primary a:hover, .nx-table__link:hover { text-decoration: underline; }
.nx-table__link { padding: 0; border: 0; background: none; font: inherit; font-weight: inherit; text-align: left; cursor: pointer; }
.nx-table__extra { display: inline-flex; flex-wrap: wrap; gap: var(--nx-space-1); margin-left: var(--nx-space-2); vertical-align: middle; font-weight: var(--nx-weight-regular); }
.nx-table__menu { width: 1%; text-align: right; white-space: nowrap; }
.nx-table__grip { width: 1%; padding-right: 0; }
.nx-table__num, .nx-table th.nx-table__num { text-align: right; font-family: var(--nx-font-numeric); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nx-table th.nx-table__num { font-family: var(--nx-font-web); }
.nx-table__muted { color: var(--nx-text-muted); }
.nx-table__code { font-family: var(--nx-font-mono); font-size: var(--nx-text-micro); color: var(--nx-text-muted); }

.nx-table__grip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-sm);
    background: none;
    color: var(--nx-text-muted);
    cursor: grab;
}

.nx-table__grip-btn:hover { background: var(--nx-ui-hover); color: var(--nx-text); }

/* Schmale Fenster: Spalten mit geringer Priorität ausblenden, der Rest scrollt waagrecht in der Tabelle. */
@media (max-width: 767px) {
    .nx-table .nx-col--optional { display: none; }
}

.nx-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-space-3); margin-top: var(--nx-space-3); }
.nx-pager__info { margin: var(--nx-space-2) 0 0; font-size: var(--nx-text-small); color: var(--nx-text-muted); }
.nx-pager .nx-pager__info { margin: 0; }

/* ---------------------------------------------------------------- Chips */

.nx-chips { display: flex; flex-wrap: wrap; gap: var(--nx-space-2); }

.nx-chip {
    height: var(--nx-control-h-sm);
    padding: 0 var(--nx-space-3);
    border: var(--nx-border-w) solid var(--nx-border);
    border-radius: var(--nx-radius-pill);
    background: var(--nx-surface);
    color: var(--nx-text-secondary);
    font-family: var(--nx-font-web);
    font-size: var(--nx-text-small);
    cursor: pointer;
}

.nx-chip:hover { background: var(--nx-ui-hover); }
.nx-chip[aria-pressed="true"] { border-color: var(--nx-emphasis); background: var(--nx-emphasis); color: var(--nx-surface); }

@media (pointer: coarse) {
    .nx-chip { height: var(--nx-tap-min); }
}

/* ---------------------------------------------------------------- Seitendialog (NxDrawer) */

.nx-dialog.nx-drawer {
    width: min(32rem, 100vw);
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    inset: 0 0 0 auto;
    margin: 0;
    border-radius: 0;
}

.nx-drawer .nx-dialog__panel { height: 100%; }
.nx-drawer .nx-dialog__body { flex: 1; display: flex; flex-direction: column; gap: var(--nx-space-4); }

@media (prefers-reduced-motion: no-preference) {
    .nx-drawer[open] { animation: nx-drawer-in var(--nx-dur) var(--nx-ease); }
}

@keyframes nx-drawer-in { from { transform: translateX(2rem); opacity: 0; } }

/* ---------------------------------------------------------------- Speicherleiste */

.nx-savebar {
    position: sticky;
    bottom: 0;
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--nx-space-3);
    margin-top: var(--nx-space-6);
    padding: var(--nx-space-3) var(--nx-space-4);
    border: var(--nx-border-w) solid var(--nx-border-strong);
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface-raised);
    box-shadow: var(--nx-shadow-lg);
}

.nx-savebar__text { display: inline-flex; align-items: center; gap: var(--nx-space-2); font-weight: var(--nx-weight-semibold); }
.nx-savebar__actions { display: inline-flex; gap: var(--nx-space-2); margin-left: auto; }

/* ---------------------------------------------------------------- Meldung im Inhalt */

.nx-inline-message {
    display: flex;
    align-items: flex-start;
    gap: var(--nx-space-3);
    padding: var(--nx-space-3) var(--nx-space-4);
    border: var(--nx-border-w) solid var(--nx-border);
    border-left-width: 4px;
    border-radius: var(--nx-radius-sm);
    background: var(--nx-surface);
    color: var(--nx-text);
    font-size: var(--nx-text-small);
}

.nx-inline-message__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--nx-space-2); }
.nx-inline-message--error { border-color: var(--nx-error-border); border-left-color: var(--nx-error); background: var(--nx-error-fill); color: var(--nx-text-on-status-fill); }
.nx-inline-message--success { border-color: var(--nx-success-border); border-left-color: var(--nx-success); background: var(--nx-success-fill); color: var(--nx-text-on-status-fill); }
.nx-inline-message--warning { border-color: var(--nx-forest-green); background: var(--nx-warning-fill); color: var(--nx-text-on-yellow); }
.nx-inline-message--info, .nx-inline-message--neutral { border-left-color: var(--nx-info); }
.nx-inline-message__icon { margin-top: 1px; }
.nx-inline-message--error .nx-inline-message__icon { color: var(--nx-error); }
.nx-inline-message--info .nx-inline-message__icon { color: var(--nx-info); }
.nx-inline-message__details summary { cursor: pointer; }
.nx-inline-message__details pre { margin: var(--nx-space-2) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--nx-font-mono); font-size: var(--nx-text-micro); }

/* Farbfeld (Aufgabenlisten-Farbe, Wertbereiche): die Farbe kommt als geprüfter Wert per style. */
.nx-swatch { display: inline-block; width: 16px; height: 16px; border: var(--nx-border-w) solid var(--nx-border-strong); border-radius: var(--nx-radius-sm); vertical-align: middle; }

/* Farben der Aktions-Schaltflächen aus dem Altsystem (Bootstrap-Klassen), abgebildet auf Kit-Farben. */
.nx-swatch.btn-danger { background: var(--nx-error); }
.nx-swatch.btn-default { background: var(--nx-neutral-400); }
.nx-swatch.btn-primary { background: var(--nx-info); }
.nx-swatch.btn-success { background: var(--nx-success); }
.nx-swatch.btn-info { background: color-mix(in srgb, var(--nx-info) 55%, var(--nx-white)); }
.nx-swatch.btn-warning { background: var(--nx-warning); }

.nx-input--color { width: 56px; padding: var(--nx-space-1); cursor: pointer; }
.nx-input--code { font-family: var(--nx-font-mono); font-size: var(--nx-text-small); }

/* Datei wählen: das Eingabefeld ist verborgen, die Beschriftung sieht aus wie eine Schaltfläche. */
.nx-file { position: relative; }
.nx-file:focus-within { outline: var(--nx-focus-w) solid var(--nx-focus-outer); outline-offset: var(--nx-focus-offset); }
.nx-file .nx-file__icon { transform: rotate(180deg); }

.nx-placeholder-text { position: relative; }

.nx-suggest {
    list-style: none;
    margin: var(--nx-space-1) 0 0;
    padding: var(--nx-space-1);
    max-height: 14rem;
    overflow: auto;
    border: var(--nx-border-w) solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface-raised);
    box-shadow: var(--nx-shadow-md);
}

.nx-suggest button {
    width: 100%;
    padding: var(--nx-space-2) var(--nx-space-3);
    border: 0;
    border-radius: var(--nx-radius-sm);
    background: none;
    color: var(--nx-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.nx-suggest button:hover, .nx-suggest button:focus { background: var(--nx-ui-hover); }

/* Bedingungseditor im Seitendialog. */
.nx-condition__values { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--nx-space-2); }

.nx-condition__value-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--nx-space-2);
    padding: var(--nx-space-2) var(--nx-space-3);
    border: var(--nx-border-w) solid var(--nx-border);
    border-radius: var(--nx-radius-sm);
    background: var(--nx-bg-subtle);
}

.nx-condition__value-row > .nx-form__row { flex: 1; }
.nx-condition__value { flex: 1 1 12rem; min-width: 0; }
.nx-condition__mode { flex: 0 1 11rem; }
.nx-condition__count { width: 6rem; }
.nx-condition__bound-label { width: 2.5rem; font-size: var(--nx-text-small); color: var(--nx-text-secondary); }

.nx-tags { display: flex; flex-wrap: wrap; gap: var(--nx-space-1); }
.nx-tag { padding: 0 var(--nx-space-2); border-radius: var(--nx-radius-sm); background: var(--nx-bg-subtle); font-family: var(--nx-font-mono); font-size: var(--nx-text-micro); }

/* ---------------------------------------------------------------- Auswahl mit Suche (NxComboBox, NCNXDASH-104) */

/* Feld wie NxSelect; Liste wie NxMenu im Top-Layer, mit Suchfeld oben. */
.nx-combobox { position: relative; display: flex; min-width: 0; }
.nx-combobox__trigger {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding-right: var(--nx-space-3);
    text-align: left;
    cursor: pointer;
}
.nx-combobox__trigger:disabled { cursor: default; }
.nx-combobox__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-combobox__text.is-placeholder { color: var(--nx-text-muted); }
.nx-combobox__chevron { flex-shrink: 0; color: var(--nx-text-secondary); }
/* Entfernen links vom Pfeil, über dem Feld; das Feld lässt dafür Platz. */
.nx-combobox:has(.nx-combobox__clear) .nx-combobox__trigger { padding-right: var(--nx-space-10); }
.nx-combobox__clear {
    position: absolute;
    right: calc(var(--nx-space-3) + 20px);
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    padding: var(--nx-space-1);
    border: 0;
    border-radius: var(--nx-radius-sm);
    background: transparent;
    color: var(--nx-text-secondary);
    cursor: pointer;
}
.nx-combobox__clear:hover { background: var(--nx-ui-hover); color: var(--nx-text); }

.nx-combobox__popup {
    position: fixed;
    inset: auto;
    margin: 0;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    gap: var(--nx-space-1);
    max-width: min(32rem, calc(100vw - 16px));
    padding: var(--nx-space-2);
    border: var(--nx-border-w) solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface-raised);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-md);
}
.nx-combobox__list { max-height: 320px; overflow-y: auto; }
.nx-combobox__option {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 var(--nx-space-3);
    border-radius: var(--nx-radius-sm);
    font-size: var(--nx-text-small);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.nx-combobox__option:hover, .nx-combobox__option.is-active { background: var(--nx-ui-hover); }
/* Gewählter Eintrag wie die Zeilenauswahl im Kit: Sonnengelb mit dunkler Schrift, in hell und dunkel. */
.nx-combobox__option.is-selected { background: var(--nx-yellow-100); color: var(--nx-text-on-status-fill); box-shadow: inset 3px 0 0 var(--nx-accent); }
.nx-combobox__option.is-selected.is-active { outline: var(--nx-border-w) solid var(--nx-emphasis); outline-offset: -1px; }
.nx-combobox__empty { padding: var(--nx-space-2) var(--nx-space-3); color: var(--nx-text-muted); font-size: var(--nx-text-small); }

@media (pointer: coarse) {
    .nx-combobox__option { height: var(--nx-tap-min); }
}