/* Arbeitsliste (Aufgaben, UX 4 NCNXDASH-70, Bedienkonzept 4.2): Listenauswahl der eingebetteten Seite,
 * Aktionsleiste, Tabelle mit Vorschau rechts, Kartenliste unter 768 px, SEPA-Vorschau. Nur Tokens, keine Hex-Werte.
 */

.nx-worklist { display: block; min-width: 0; }

/* ---------------------------------------------------------------- Listenauswahl (nur /integration/aufgabenlisten) */

.nx-worklist--picker { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--nx-space-6); align-items: start; }

.nx-worklist__lists { position: sticky; top: 0; }
.nx-worklist__lists-select { display: none; }
.nx-worklist__lists-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--nx-space-1); }

.nx-worklist__lists-links a {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    min-height: var(--nx-control-h);
    padding: 0 var(--nx-space-3);
    border-left: 3px solid transparent;
    border-radius: var(--nx-radius-sm);
    color: var(--nx-text);
    font-size: var(--nx-text-small);
    text-decoration: none;
}

.nx-worklist__lists-links a:hover { background: var(--nx-ui-hover); }
.nx-worklist__lists-links a[aria-current="page"] { border-left-color: var(--nx-accent); background: var(--nx-ui-hover); font-weight: var(--nx-weight-semibold); }
.nx-worklist__list-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-worklist__list-count { color: var(--nx-text-muted); }

@media (max-width: 767px) {
    .nx-worklist--picker { display: block; }
    .nx-worklist__lists { position: static; margin-bottom: var(--nx-space-4); }
    .nx-worklist__lists-select { display: block; }
    .nx-worklist__lists-links { display: none; }
}

.nx-worklist__main { display: flex; flex-direction: column; gap: var(--nx-space-3); min-width: 0; }
.nx-worklist__main .nx-page__header { margin-bottom: var(--nx-space-2); }
.nx-worklist__tools { display: flex; flex-wrap: wrap; gap: var(--nx-space-3); align-items: center; }
.nx-worklist__tools .nx-table-tools__search { flex: 1 1 16rem; max-width: 28rem; }

/* ---------------------------------------------------------------- Aktionsleiste */

.nx-actionbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--nx-space-3);
    min-height: var(--nx-control-h-lg);
    padding: var(--nx-space-2) var(--nx-space-3);
    border: var(--nx-border-w) solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface);
}

.nx-actionbar__status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-2); font-size: var(--nx-text-small); }
.nx-actionbar__actions { display: inline-flex; flex-wrap: wrap; gap: var(--nx-space-2); }

/* Handy: die Leiste liegt fest am unteren Rand, damit Aktionen beim Scrollen der Karten erreichbar bleiben. */
.nx-actionbar--bottom {
    position: sticky;
    bottom: 0;
    z-index: 40;
    order: 10;
    box-shadow: var(--nx-shadow-lg);
}

.nx-actionbar--bottom .nx-actionbar__actions { width: 100%; }
.nx-actionbar--bottom .nx-actionbar__actions .nx-btn { flex: 1 1 auto; }

/* ---------------------------------------------------------------- Tabelle und Vorschau */

.nx-worklist__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nx-space-4); align-items: start; }
.nx-worklist__body--preview { grid-template-columns: minmax(0, 3fr) minmax(18rem, 2fr); }
.nx-worklist__list { min-width: 0; }

.nx-datagrid .e-grid { border-radius: var(--nx-radius-md); font-family: var(--nx-font-web); }
.nx-datagrid .e-grid .e-row { cursor: pointer; }
.nx-datagrid .e-grid .e-row.is-active .e-rowcell { background: color-mix(in srgb, var(--nx-accent) 18%, var(--nx-surface)); }
.nx-datagrid .e-grid .e-rowcell.nx-num { font-family: var(--nx-font-numeric); font-variant-numeric: tabular-nums; }
.nx-datagrid--compact .e-grid .e-rowcell { padding-top: 0; padding-bottom: 0; }

.nx-preview {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: var(--nx-space-4);
    max-height: calc(100dvh - var(--nx-shell-topbar-h, 56px) - var(--nx-space-8));
    overflow: auto;
    padding: var(--nx-space-4);
    border: var(--nx-border-w) solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface);
}

.nx-drawer .nx-preview { position: static; max-height: none; padding: 0; border: 0; }
.nx-drawer .nx-preview__head { display: none; }

.nx-preview__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--nx-space-2); }
.nx-preview__title { margin: 0; font-size: var(--nx-text-body); overflow-wrap: anywhere; }

.nx-preview__image {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    border: var(--nx-border-w) solid var(--nx-border);
    border-radius: var(--nx-radius-sm);
    background: var(--nx-bg-subtle);
    overflow: hidden;
}

.nx-preview__image img { display: block; max-width: 100%; max-height: 420px; object-fit: contain; background: var(--nx-white); }
.nx-preview__image .nx-skeleton { width: 100%; }
.nx-preview__placeholder { display: flex; flex-direction: column; align-items: center; gap: var(--nx-space-2); color: var(--nx-text-muted); font-size: var(--nx-text-small); }
.nx-preview__actions { display: flex; flex-wrap: wrap; gap: var(--nx-space-2); }

.nx-preview__fields { display: grid; gap: var(--nx-space-2); margin: 0; }
.nx-preview__field { display: grid; grid-template-columns: minmax(7rem, 2fr) 3fr; gap: var(--nx-space-2); font-size: var(--nx-text-small); }
.nx-preview__field dt { color: var(--nx-text-muted); }
.nx-preview__field dd { margin: 0; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- Kartenliste (unter 768 px) */

.nx-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--nx-space-2); }

.nx-card {
    display: flex;
    align-items: stretch;
    border: var(--nx-border-w) solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface);
}

.nx-card.is-selected { border-color: var(--nx-emphasis); box-shadow: inset 3px 0 0 var(--nx-accent); }
.nx-card.is-active { background: color-mix(in srgb, var(--nx-accent) 12%, var(--nx-surface)); }

/* Mindestens 44 px Trefferfläche für die Auswahl (Kit). */
.nx-card__check { display: flex; align-items: center; justify-content: center; min-width: var(--nx-tap-min); min-height: var(--nx-tap-min); cursor: pointer; }
.nx-card__check input { width: 20px; height: 20px; accent-color: var(--nx-emphasis); cursor: pointer; }

.nx-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--nx-space-1);
    padding: var(--nx-space-3) var(--nx-space-3) var(--nx-space-3) 0;
    border: 0;
    background: none;
    color: var(--nx-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.nx-card__head { display: flex; justify-content: space-between; gap: var(--nx-space-3); }
.nx-card__title { font-weight: var(--nx-weight-semibold); overflow-wrap: anywhere; }
.nx-card__amount { white-space: nowrap; font-weight: var(--nx-weight-semibold); }
.nx-card__line { font-size: var(--nx-text-small); color: var(--nx-text-secondary); overflow-wrap: anywhere; }
.nx-card__label { color: var(--nx-text-muted); }
.nx-cards__more { display: flex; justify-content: center; margin-top: var(--nx-space-3); }

/* ---------------------------------------------------------------- Signatur */

.nx-signature__docs { margin: var(--nx-space-3) 0 0; padding-left: var(--nx-space-6); font-size: var(--nx-text-small); }
.nx-signpad { display: flex; flex-direction: column; gap: var(--nx-space-4); }

/* ---------------------------------------------------------------- SEPA-Vorschau */

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

.nx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--nx-space-3); margin: 0; }

.nx-kpi {
    display: flex;
    flex-direction: column;
    gap: var(--nx-space-1);
    padding: var(--nx-space-3) var(--nx-space-4);
    border: var(--nx-border-w) solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-bg-subtle);
}

.nx-kpi dt { font-size: var(--nx-text-small); color: var(--nx-text-muted); }
.nx-kpi dd { margin: 0; font-weight: var(--nx-weight-semibold); overflow-wrap: anywhere; }
.nx-kpi__value { font-size: var(--nx-text-h3); }
.nx-kpi .nx-kpi__sub { font-size: var(--nx-text-small); font-weight: var(--nx-weight-regular); color: var(--nx-text-secondary); }

.nx-sepa__messages { margin: 0; padding-left: var(--nx-space-5); }
.nx-sepa__table table { min-width: 64rem; }
.nx-sepa__table td { vertical-align: top; padding-top: var(--nx-space-2); padding-bottom: var(--nx-space-2); }
.nx-sepa__status { width: 1%; white-space: nowrap; }
.nx-sepa__nowrap { white-space: nowrap; }
.nx-sepa__sub td:nth-child(2) { padding-left: var(--nx-space-10); color: var(--nx-text-secondary); }
.nx-sepa__negative { color: var(--nx-error); }
.nx-sepa__notes { min-width: 14rem; font-size: var(--nx-text-small); }
.nx-sepa__table td:nth-child(2) { min-width: 14rem; }
.nx-sepa__error { color: var(--nx-error); }
.nx-sepa__account-name { font-size: var(--nx-text-small); color: var(--nx-text-secondary); }
.nx-sepa__heading { margin: var(--nx-space-2) 0 0; font-size: var(--nx-text-body); }

.nx-sepa__footer {
    position: sticky;
    bottom: calc(-1 * var(--nx-space-5));
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--nx-space-3);
    padding: var(--nx-space-3) 0;
    border-top: var(--nx-border-w) solid var(--nx-border);
    background: var(--nx-surface-raised);
}