/* Übersicht und Auswertungen (UX 5 NCNXDASH-71, Bedienkonzept 4.1 und 4.4): Kennzahl-Kacheln (Kit §4), Segment-
 * Umschalter, Diagramme, Legenden. Nur Tokens, keine Hex-Werte.
 */

/* ---------------------------------------------------------------- Abschnitte der Übersicht */

.nx-overview__section { display: flex; flex-direction: column; gap: var(--nx-space-3); margin-bottom: var(--nx-space-8); }
.nx-overview__title { margin: 0; font-size: var(--nx-text-h3); }

/* ---------------------------------------------------------------- Kennzahl-Kacheln: höchstens vier je Reihe */

.nx-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(14rem, calc((100% - 3 * var(--nx-space-4)) / 4)), 1fr)); gap: var(--nx-space-4); }

.nx-kpi-tile {
    display: flex;
    flex-direction: column;
    gap: var(--nx-space-1);
    min-height: 9rem;
    padding: var(--nx-space-4) var(--nx-space-5);
    border: var(--nx-border-w) solid var(--nx-border);
    border-top: 3px solid var(--nx-emphasis);
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface);
    color: var(--nx-text);
    text-decoration: none;
}

a.nx-kpi-tile:hover { border-color: var(--nx-border-strong); border-top-color: var(--nx-accent); box-shadow: var(--nx-shadow-sm); }
.nx-kpi-tile--warning { border-top-color: var(--nx-warning); }
.nx-kpi-tile--error { border-top-color: var(--nx-error); }

.nx-kpi-tile__title { font-size: var(--nx-text-small); font-weight: var(--nx-weight-semibold); color: var(--nx-text-secondary); overflow-wrap: anywhere; }
.nx-kpi-tile__value { font-size: var(--nx-text-h2); font-weight: var(--nx-weight-bold); line-height: var(--nx-leading-tight); }
.nx-kpi-tile__caption { font-size: var(--nx-text-small); color: var(--nx-text-muted); }
.nx-kpi-tile__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-space-2); margin-top: auto; padding-top: var(--nx-space-2); font-size: var(--nx-text-small); }
.nx-kpi-tile__stand { color: var(--nx-text-muted); font-size: var(--nx-text-micro); margin-left: auto; }

.nx-kpi.nx-kpi--error { border-color: var(--nx-error-border); background: var(--nx-error-fill); }

.nx-sparkline { display: block; width: 100%; height: 36px; margin-top: var(--nx-space-1); }
.nx-sparkline__bar { fill: var(--nx-chart-1); }

/* ---------------------------------------------------------------- Segment-Umschalter (aria-pressed) */

.nx-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    padding: 2px;
    border: var(--nx-border-w) solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-bg-subtle);
}

.nx-segmented__item {
    height: calc(var(--nx-control-h) - 6px);
    padding: 0 var(--nx-space-4);
    border: 0;
    border-radius: var(--nx-radius-sm);
    background: transparent;
    color: var(--nx-text-secondary);
    font-family: var(--nx-font-web);
    font-size: var(--nx-text-small);
    cursor: pointer;
}

.nx-segmented__item:hover { color: var(--nx-text); }
.nx-segmented__item[aria-pressed="true"] { background: var(--nx-surface); color: var(--nx-text); font-weight: var(--nx-weight-semibold); box-shadow: var(--nx-shadow-sm); }

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

/* ---------------------------------------------------------------- Diagramm (NxChart) */

.nx-chart { position: relative; height: var(--nx-chart-height, 420px); margin: 0; }
.nx-chart > .nx-skeleton, .nx-chart > .nx-skeleton .nx-skeleton__shape { height: 100%; }
.nx-chart__note { position: absolute; left: 0; bottom: calc(-1 * var(--nx-space-6)); font-size: var(--nx-text-micro); color: var(--nx-text-muted); }

/* Syncfusion setzt die Schrift als SVG-Attribut oder Inline-Stil; die Kit-Schrift gilt trotzdem (keine Serifen). */
.nx-chart svg text, .nx-chart .e-chart text, .nx-chart .e-accumulationchart text { font-family: var(--nx-font-web) !important; }
.nx-chart svg text[id*="AxisLabel"], .nx-chart svg text[id*="_datalabel"] { font-family: var(--nx-font-numeric) !important; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Legende, Tabellen der Auswertungen */

.nx-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-2) var(--nx-space-3); margin: 0 0 var(--nx-space-3); font-size: var(--nx-text-small); color: var(--nx-text-secondary); }
.nx-legend__item { display: inline-flex; align-items: center; gap: var(--nx-space-1); }
.nx-swatch--legend { background: linear-gradient(135deg, var(--nx-chart-1) 50%, var(--nx-chart-3) 50%); }

.nx-table tfoot th, .nx-table tfoot td { border-top: 2px solid var(--nx-border-strong); background: var(--nx-bg-subtle); font-weight: var(--nx-weight-bold); }
.nx-table__sort { display: inline-flex; align-items: center; gap: var(--nx-space-1); padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.nx-table__sort:hover { color: var(--nx-text); text-decoration: underline; }
th.nx-table__num .nx-table__sort { justify-content: flex-end; width: 100%; }

.nx-stat__range { width: 11rem; }
.nx-stat__grouping { min-width: 11rem; }

/* ---------------------------------------------------------------- Seitendialog breit (Detail mit Diagramm) */

.nx-dialog.nx-drawer.nx-drawer--wide { width: min(56rem, 100vw); }
.nx-basket__frame { width: 100%; min-height: 60vh; border: var(--nx-border-w) solid var(--nx-border); border-radius: var(--nx-radius-sm); background: var(--nx-white); }