/*
 * NetCon Tech Web: zentrales Aussehen (übernommen aus NetConIorAdministration). Ohne Vite-Build.
 * Wird nach netcontechweb.css geladen (gewinnt bei gleicher Spezifität). Farben: --nc-farbe (Primär), --nc-akzent (dunkle
 * Grundfarbe der Seitenleiste), --nc-signal (Primärfarbe für Text/Icons auf hellem Grund) – gesetzt im Panel (App\Support\Design).
 * Gilt für alle Seiten; Seiten bauen das nicht nach. Klassen beginnen mit „nc-“.
 */

:root { --nc-signal: var(--nc-farbe); --nc-sl-text: rgba(255, 255, 255, .86); --nc-sl-gedimmt: rgba(255, 255, 255, .6); }

/* ======================== Seitenleiste (R5): volle Höhe, dunkle Grundfarbe, Logo oben ======================== */
.fi-sidebar.fi-main-sidebar { background-color: var(--nc-akzent); color: var(--nc-sl-text); }
@media (min-width: 64rem) {
    /* volle Höhe links neben der Kopfzeile (Filament: unter der Kopfzeile) */
    /* Filament: sticky unter der Kopfzeile → um deren Höhe nach oben ziehen (Kopfzeile ist links um die Leistenbreite eingerückt) */
    .fi-body-has-topbar .fi-sidebar.fi-main-sidebar { top: 0; height: 100dvh; margin-top: calc(-1 * var(--topbar-height)); z-index: 31; }
    .fi-body-has-topbar .fi-topbar-ctn { padding-inline-start: var(--collapsed-sidebar-width); }
    .fi-body-has-topbar .fi-topbar-ctn:has(~ .fi-layout .fi-sidebar.fi-sidebar-open) { padding-inline-start: var(--sidebar-width); }
    /* Aufklapper im Inhalt (Spaltenauswahl, Filter …) über der Leiste (z-index 31): Filament gibt ihnen 20 und schiebt sie nur am
       Bildschirmrand zurück, z. B. öffnet die Spaltenauswahl („bottom-end“, 20rem breit) neben der Suche nach links unter die Leiste */
    .fi-main-ctn .fi-dropdown-panel { z-index: 32; }
    /* Logo steht in der Seitenleiste; in der Kopfzeile nur der Produktname */
    .fi-topbar .nc-marke-logo { display: none; }
}
.fi-sidebar-nav { padding-top: 1rem; scrollbar-color: rgba(255, 255, 255, .3) transparent; }

.nc-sl-kopf { display: flex; flex-direction: column; gap: .75rem; margin: 0 0 1.25rem; padding: 0 .25rem; }
/* Anwendungslogo (Benutzer 03.11.2026): Symbol über „Tech Web“, Schrift wie NetConWeb */
.nc-sl-logo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; padding: .25rem .5rem; border-radius: .5rem; text-decoration: none; }
.nc-sl-logo img { height: 3.25rem; width: auto; object-fit: contain; }
.nc-sl-logo-text { color: #fff; font-size: 1.6rem; font-weight: 700; line-height: 1; letter-spacing: .01em; white-space: nowrap; }
.nc-sl-logo-text > span { color: var(--nc-farbe); }
.nc-sl-logo:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Navigation: helle Schrift, aktiver Eintrag mit Balken in Primärfarbe */
.fi-sidebar .fi-sidebar-item-btn { color: var(--nc-sl-text); }
.fi-sidebar .fi-sidebar-item-label { color: var(--nc-sl-text); }
.fi-sidebar .fi-sidebar-item-icon, .fi-sidebar .fi-sidebar-group-icon { color: var(--nc-sl-gedimmt); }
.fi-sidebar .fi-sidebar-group-label { color: var(--nc-sl-gedimmt); text-transform: uppercase; font-size: .72rem; letter-spacing: .06em; }
.fi-sidebar .fi-sidebar-group-btn .fi-icon, .fi-sidebar .fi-sidebar-group-collapse-btn { color: var(--nc-sl-gedimmt); }
.fi-sidebar .fi-sidebar-item-btn:hover, .fi-sidebar .fi-sidebar-item-btn:focus-visible { background-color: rgba(255, 255, 255, .1); }
.fi-sidebar .fi-sidebar-item-btn:hover .fi-sidebar-item-label { color: #fff; }
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background-color: rgba(255, 255, 255, .14); box-shadow: inset 4px 0 0 var(--nc-farbe); }
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label { color: #fff; font-weight: 600; }
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon { color: var(--nc-farbe); }
.fi-sidebar .fi-badge { box-shadow: none; }

/* Fuß: klein der Produktname */
.fi-sidebar .fi-sidebar-footer, .nc-sl-fuss { border-top: 1px solid rgba(255, 255, 255, .15); }
.nc-sl-fuss { display: flex; flex-direction: column; gap: .15rem; margin-top: auto; padding: .75rem 1.5rem 1rem; }
.nc-sl-fuss-link { color: var(--nc-sl-text); font-size: .875rem; padding: .2rem 0; }
.nc-sl-fuss-link:hover { color: #fff; text-decoration: underline; }
.nc-sl-version { color: var(--nc-sl-gedimmt); font-size: .7rem; margin-top: .35rem; }

/* ======================== Kopfzeile (R5): weiß, rechts Benutzer mit Initialen, Name, Anmeldename, Menüpfeil ======================== */
.fi-topbar { background-color: #fff; box-shadow: 0 1px 0 var(--gray-200), inset 0 -3px 0 var(--nc-farbe); }
.fi-topbar .fi-icon-btn { color: var(--gray-600); }
.nc-benutzer { display: none; flex-direction: column; align-items: flex-end; gap: 0; padding: 0 .25rem; background: none; border: 0; cursor: pointer;
    text-align: right; line-height: 1.15; }
@media (min-width: 40rem) { .nc-benutzer { display: flex; } }
.nc-benutzer-name { font-size: .875rem; font-weight: 600; color: var(--gray-900); }
.nc-benutzer-rolle { font-size: .75rem; color: var(--gray-500); }
.fi-topbar .fi-user-menu-trigger { display: inline-flex; align-items: center; gap: .35rem; }
.fi-topbar .fi-user-menu-trigger::after { content: ''; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 5px solid var(--gray-500); }

/* ======================== Primärfarbe deutlicher (R12): Reiter, Links, Überschriften, Knöpfe ======================== */
.fi-tabs-item.fi-active { background-color: color-mix(in srgb, var(--nc-farbe) 14%, #fff); box-shadow: inset 0 -3px 0 var(--nc-farbe); }
.fi-tabs-item.fi-active .fi-tabs-item-label, .fi-tabs-item.fi-active .fi-icon { color: var(--nc-akzent); font-weight: 600; }
.fi-tabs-item:not(.fi-active):hover { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--nc-farbe) 50%, transparent); }
.fi-header-heading { padding-bottom: .25rem; border-bottom: 3px solid var(--nc-farbe); display: inline-block; }
.fi-main a.fi-link, .fi-main .fi-ta-cell a:not(.fi-btn):not(.fi-icon-btn) { color: var(--nc-signal); }
.fi-section-header-heading { color: var(--nc-akzent); }
.fi-section:not(.fi-section-not-contained):not(.fi-aside) { border-top: 3px solid var(--nc-farbe); }
/* in Dialogen ohne Farbbalken je Abschnitt (Benutzer 26.10.2026: „ISAM anlegen“ zu viel Orange) */
.fi-modal-window .fi-section:not(.fi-section-not-contained):not(.fi-aside) { border-top: 0; }

/* ======================== Info-Icon (R11): nur das „i“ in Primärfarbe, ohne Kreis ======================== */
.nc-info { width: auto; min-width: .7rem; height: auto; padding: 0 .1rem; border: 0; border-radius: .2rem; background: none;
    color: var(--nc-signal); font: italic 700 .95rem/1 Georgia, serif; }
.nc-info:hover, .nc-info:focus { border: 0; color: var(--nc-akzent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--nc-farbe) 35%, transparent); }

/* ======================== Karten (R10): in einer Reihe gleich hoch ======================== */
/* Raster mit Karten : Zellen strecken, Abschnitt füllt die Zelle (auch hinter einer Livewire-Hülle) */
.scn-karten, .nc-karten { align-items: stretch; }
.scn-karten > *, .nc-karten > * { display: flex; flex-direction: column; min-width: 0; }
.scn-karten > * > .fi-section, .nc-karten > * > .fi-section, .scn-karten > .fi-section, .nc-karten > .fi-section { flex: 1 1 auto; }
.fi-grid-col:has(> .fi-section) { display: flex; flex-direction: column; }
.fi-grid-col > .fi-section { flex: 1 1 auto; }

/* ======================== Tabellen (R9, R16, R18) ======================== */
/* R18: Spaltenüberschriften einheitlich und kleiner, in allen Tabellen (Filament + .nc-tabelle) */
.fi-ta-table > thead > tr { background-color: color-mix(in srgb, var(--nc-farbe) 8%, var(--gray-50)); }
.fi-ta-header-cell, .nc-tabelle th { padding-top: .45rem; padding-bottom: .45rem; font-size: .75rem; line-height: 1rem; font-weight: 600;
    color: var(--gray-700); letter-spacing: .01em; white-space: nowrap; }
.fi-ta-header-cell .fi-ta-header-cell-sort-btn, .fi-ta-header-cell span { font-size: inherit; font-weight: inherit; line-height: inherit; }
.nc-tabelle th { background-color: color-mix(in srgb, var(--nc-farbe) 8%, var(--gray-50)); }

/* R9: Zeilen einzeilig, Überlauf mit „…“ (voller Text als Tooltip über netcontechweb.js); kompakt.
   Filament: .fi-ta-text ist oft zugleich .fi-ta-text-item (Polsterung 1rem, -webkit-box); mit Beschreibung umschließt .fi-ta-text die Teile. */
.fi-ta-cell .fi-ta-col { padding-top: 0; padding-bottom: 0; }
.fi-ta-cell .fi-ta-text { padding-top: .4rem; padding-bottom: .4rem; }
.fi-ta-cell .fi-ta-text-item:not(.fi-wrapped):not(.fi-wrapped *),
.fi-ta-cell .fi-ta-text-description:not(.fi-wrapped *) {
    display: block; min-width: 0; max-width: 26rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25rem; }
.fi-ta-cell .fi-ta-text-item:not(.fi-wrapped) > * { white-space: nowrap; }
/* bewusst zweizeilige Spalten (Text + Beschreibung, z. B. Einstiegslinks): bleiben zweizeilig, nur kompakter */
.fi-ta-cell .fi-ta-text-has-descriptions { gap: 0; row-gap: 0; padding-top: .3rem; padding-bottom: .3rem; }
.fi-ta-cell .fi-ta-text-has-descriptions > .fi-ta-text-item { padding: 0; }
.fi-ta-cell .fi-ta-text-description { margin-top: 0; font-size: .75rem; line-height: 1.05rem; }
.nc-api-tabelle .fi-ta-cell { padding-top: 0; padding-bottom: 0; }
.nc-tabelle td { padding-top: .3rem; padding-bottom: .3rem; }
/* R16: Kopf der Tabellenkarte einzeilig – Überschrift/Icons und Suchfeld in derselben Zeile (bricht schmal um) */
.fi-ta-header-ctn:has(> .fi-ta-header):has(> .fi-ta-header-toolbar) { display: flex; flex-wrap: wrap; align-items: center; }
.fi-ta-header-ctn:has(> .fi-ta-header):has(> .fi-ta-header-toolbar) > * { flex: 1 1 100%; }
.fi-ta-header-ctn:has(> .fi-ta-header):has(> .fi-ta-header-toolbar) > .fi-ta-header { order: 2; flex: 0 1 auto; width: auto; min-width: 0; margin-inline-start: auto; }
.fi-ta-header-ctn:has(> .fi-ta-header):has(> .fi-ta-header-toolbar) > .fi-ta-header-toolbar { order: 1; flex: 0 1 auto; width: auto; min-width: 0; border-top: 0; }
/* Einheitliche Tabellenleiste (Benutzer 03.11.2026), auf allen Listen gleich: links Filter, direkt dahinter „Filter zurücksetzen“, dann Suche und
   Spaltenauswahl (Gruppierung, Sammelaktionen), rechts die Kopfaktionen (eigene Knöpfe, „Aktualisieren“, „Neu“; ApiTabelle::leistenAktionen()). */
.fi-ta-header-ctn .fi-ta-header-toolbar { justify-content: flex-start; }
.fi-ta-header-ctn .fi-ta-header-toolbar > :nth-child(2) { order: -1; margin-inline-start: 0; }
.fi-ta-header-ctn > .fi-ta-header { padding-top: .6rem; padding-bottom: .6rem; }
.fi-ta-header-ctn > .fi-ta-header-toolbar { padding-top: .5rem; padding-bottom: .5rem; }
.fi-ta-header-heading { font-size: .95rem; }

/* ======================== Zentrale Lade-Anzeige (R6; Logik in netcontechweb.js, ncLade) ======================== */
.nc-lade { position: fixed; inset: 0; z-index: 29; display: none; align-items: center; justify-content: center; cursor: progress;
    background: rgba(241, 244, 248, .7); }
@media (min-width: 64rem) {
    .nc-lade { inset: var(--topbar-height) 0 0 var(--collapsed-sidebar-width); }
    body:has(.fi-sidebar.fi-sidebar-open) .nc-lade { left: var(--sidebar-width); }
}
.nc-lade.nc-lade-an { display: flex; animation: nc-lade-ein .15s ease-out; }
.nc-lade-spinner { width: 3rem; height: 3rem; border-radius: 50%; border: 4px solid color-mix(in srgb, var(--nc-farbe) 25%, transparent);
    border-top-color: var(--nc-signal); animation: nc-lade-dreh .8s linear infinite; }
@keyframes nc-lade-dreh { to { transform: rotate(360deg); } }
@keyframes nc-lade-ein { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nc-lade-spinner { animation-duration: 2s; } }

/* ======================== Tabellen kompakt (Benutzer 19.10.2026: Zeile einzeilig ~32–36 px, Kopf ~32 px, Kartenkopf ~40 px) ========================
   Gilt für alle Filament-Tabellen (fi-ta-*) und .nc-tabelle; steht am Ende, damit es die Tabellenregeln oben übersteuert. */
.fi-ta-ctn { --nc-zelle-y: .3rem; --nc-zelle-x: .6rem; }
/* Zellinhalte aller Spaltenarten: vertikal ~5 px, horizontal ~10 px */
.fi-ta-cell .fi-ta-col { padding: 0; min-height: 0; }
.fi-ta-cell :is(.fi-ta-text, .fi-ta-text-input, .fi-ta-select, .fi-ta-icon, .fi-ta-toggle, .fi-ta-checkbox, .fi-ta-color, .fi-ta-image,
    .fi-ta-placeholder, .fi-ta-layout-split, .fi-ta-layout-stack) { padding: var(--nc-zelle-y) var(--nc-zelle-x); }
.fi-ta-cell .fi-ta-text-has-descriptions { padding-top: .2rem; padding-bottom: .2rem; }
.fi-ta-cell .fi-ta-text-item, .fi-ta-cell .fi-ta-text { font-size: .8125rem; line-height: 1.25rem; }
.fi-ta-cell .fi-ta-text-description { line-height: 1rem; }
.fi-ta-cell:first-of-type .fi-ta-col > :first-child, .fi-ta-header-cell:first-of-type { padding-inline-start: .9rem; }
/* Eingabespalten (Text, Auswahl) flach: ~28 px */
.fi-ta-cell .fi-input-wrp, .nc-tabelle .fi-input-wrp { min-height: 0; }
.fi-ta-cell :is(.fi-input, .fi-select-input), .nc-tabelle :is(.fi-input, .fi-select-input) { padding-top: .2rem; padding-bottom: .2rem;
    font-size: .8125rem; line-height: 1.25rem; }
.fi-ta-cell .fi-btn, .nc-tabelle .fi-btn { padding-top: .2rem; padding-bottom: .2rem; }
/* Aktions-Icons 16 px ohne Zusatzpolster */
.fi-ta-cell .fi-ta-actions { gap: .15rem; padding: 0 .5rem; }
.fi-ta-cell:has(> .fi-ta-actions), .fi-ta-cell:has(> div > .fi-ta-actions) { padding-inline: .25rem .5rem; }
.fi-ta-cell .fi-icon-btn, .fi-ta-header-ctn .fi-icon-btn { width: 1.6rem; height: 1.6rem; margin: 0; }
.fi-ta-cell .fi-icon-btn > .fi-icon, .fi-ta-cell .fi-icon-btn > svg, .fi-ta-header-ctn .fi-icon-btn > .fi-icon, .fi-ta-header-ctn .fi-icon-btn > svg {
    width: 1rem; height: 1rem; }
/* Checkbox-Spalte schmal */
.fi-ta-selection-cell, .fi-ta-group-selection-cell { width: 1px; padding: 0 .35rem 0 .75rem; }
.fi-ta-selection-cell .fi-checkbox-input { width: .9rem; height: .9rem; }
/* Kopfzeile ~32 px */
.fi-ta-header-cell { padding-top: .35rem; padding-bottom: .35rem; padding-inline: var(--nc-zelle-x); }
.fi-ta-header-cell .fi-ta-header-cell-sort-btn { gap: .2rem; }
.fi-ta-header-cell .fi-ta-header-cell-sort-btn .fi-icon { width: .85rem; height: .85rem; }
.fi-ta-actions-header-cell, .fi-ta-empty-header-cell { padding-top: .35rem; padding-bottom: .35rem; }
/* Kopf der Tabellenkarte (Titel, Icons, Suche) eine flache Zeile ~40 px */
.fi-ta-header-ctn > .fi-ta-header { padding: .3rem .9rem; gap: .5rem; min-height: 2.5rem; }
.fi-ta-header-ctn > .fi-ta-header-toolbar { padding: .3rem .9rem; gap: .5rem; min-height: 2.5rem; }
.fi-ta-header-ctn:has(> .fi-ta-header):has(> .fi-ta-header-toolbar) > .fi-ta-header-toolbar { padding-inline-start: 0; }
.fi-ta-header-ctn .fi-ta-header-heading { font-size: .9rem; line-height: 1.25rem; }
.fi-ta-header-ctn .fi-ta-header-description { font-size: .78rem; line-height: 1.1rem; margin-top: 0; }
.fi-ta-header-ctn .fi-ta-actions { gap: .25rem; }
.fi-ta-header-ctn .fi-input-wrp { min-height: 0; }
.fi-ta-header-ctn .fi-input { padding-top: .2rem; padding-bottom: .2rem; font-size: .8125rem; }
.fi-ta-header-ctn .fi-btn { padding-top: .25rem; padding-bottom: .25rem; }
.fi-ta-filters-above-content-ctn { padding: .4rem .9rem; }
/* Fuß / Seitenblättern kompakt */
.fi-ta-ctn .fi-pagination, .fi-ta-footer-ctn { padding: .3rem .9rem; font-size: .8125rem; }
.fi-ta-ctn .fi-pagination .fi-pagination-items, .fi-ta-ctn .fi-pagination .fi-input-wrp { min-height: 0; }
.fi-ta-ctn .fi-pagination :is(.fi-pagination-item-btn, .fi-btn, .fi-select-input) { padding-top: .15rem; padding-bottom: .15rem; }
/* leere Tabelle */
.fi-ta-empty-state { padding: 1rem; }
.fi-ta-empty-state .fi-ta-empty-state-icon-bg { width: 2rem; height: 2rem; margin-bottom: .4rem; }
.fi-ta-empty-state .fi-ta-empty-state-heading { font-size: .875rem; }
/* Abstand Karte ↔ Tabelle (Hinweis über der Tabelle, Unterreiter) */
.nc-api-tabelle .nc-hinweis { margin-bottom: .4rem; }
/* einfache Tabellen (.nc-tabelle) gleich */
.nc-tabelle { font-size: .8125rem; }
.nc-tabelle th { padding: .35rem var(--nc-zelle-x, .6rem); line-height: 1.1rem; }
.nc-tabelle td { padding: .3rem var(--nc-zelle-x, .6rem); line-height: 1.25rem; vertical-align: middle; }
.nc-tabelle td .nc-quelle { line-height: 1rem; }

/* ======================== Inline-Eingaben in Tabellen (Benutzer 19.10.2026): ~28 px hoch, Breite passend zum Inhalt ========================
   Gilt für alle Tabellen mit Eingaben in der Zeile . */
.fi-ta-cell .fi-ta-text-input, .fi-ta-cell .fi-ta-select, .nc-api-tabelle .fi-ta-text-input { min-width: 0; }
.fi-ta-cell .fi-ta-text-input .fi-input-wrp { width: 10rem; }
.fi-ta-cell .fi-ta-text-input .fi-input-wrp:has(input[type="number"]) { width: 5.75rem; }
.fi-ta-cell .fi-ta-text-input .fi-input-wrp:has(input[type="date"]) { width: 8.25rem; }
.fi-ta-cell .fi-ta-select .fi-input-wrp { width: auto; max-width: 12rem; }
.fi-ta-cell .fi-input-wrp, .nc-tabelle .fi-input-wrp, .nc-frg-vk .fi-input-wrp { border-radius: .375rem; }
.fi-ta-cell :is(.fi-input, .fi-select-input), .nc-tabelle :is(.fi-input, .fi-select-input), .nc-frg-vk .fi-input {
    height: 1.75rem; padding: .15rem .45rem; font-size: .8125rem; line-height: 1.25rem; }
.fi-ta-cell .fi-select-input, .nc-tabelle .fi-select-input { padding-inline-end: 1.75rem; background-position: right .3rem center; }
.fi-ta-cell input[type="date"].fi-input, .nc-tabelle input[type="date"].fi-input { padding-inline: .35rem; }
.fi-ta-cell .fi-input-wrp-suffix, .fi-ta-cell .fi-input-wrp-prefix, .nc-frg-vk .fi-input-wrp-suffix { padding-inline: .35rem; font-size: .72rem; }
.fi-ta-cell .fi-input-wrp-suffix .fi-input-wrp-label, .nc-frg-vk .fi-input-wrp-label { font-size: .72rem; }
/* Mehrfachauswahl-Knopf in Zellen flach */
.fi-ta-cell .nc-mp-btn, .nc-tabelle .nc-mp-btn { min-width: 7rem; max-width: 13rem; padding: .15rem .45rem; font-size: .8125rem; line-height: 1.25rem; }
/* Checkbox/Schalter in Zellen klein */
.fi-ta-cell .fi-checkbox-input { width: .95rem; height: .95rem; }

/* ======================== Zahlenspalten zentriert (Benutzer 19.10.2026): Kopf und Wert mittig, alle Tabellen ======================== */
.fi-ta-cell.fi-align-end, .fi-ta-cell.fi-align-right, .fi-ta-header-cell.fi-align-end, .fi-ta-header-cell.fi-align-right { text-align: center; }
.fi-ta-cell :is(.fi-ta-text.fi-align-end, .fi-ta-text.fi-align-right, .fi-ta-col.fi-align-end, .fi-ta-text-item.fi-align-end, .fi-align-end) {
    justify-content: center; text-align: center; }
.fi-ta-header-cell.fi-align-end .fi-ta-header-cell-sort-btn, .fi-ta-header-cell.fi-align-right .fi-ta-header-cell-sort-btn,
.fi-ta-header-cell:has(.nc-zahl) .fi-ta-header-cell-sort-btn { justify-content: center; margin-inline: auto; }
.fi-ta-cell .nc-zahl, .fi-ta-header-cell .nc-zahl, .nc-tabelle td.nc-zahl, .nc-tabelle th.nc-zahl, .nc-tabelle .nc-zahl { text-align: center; }
.fi-ta-cell :is(.fi-ta-text-input, .fi-ta-select).fi-align-end { display: flex; justify-content: center; }
.fi-ta-cell input[type="number"].fi-input { text-align: center; }

/* eigene Zellbausteine (Blade-Zellen: .nc-feld, VK-Paar …) wie Filament-Zellen polstern */
.fi-ta-cell .fi-ta-col > :is(.nc-feld, .nc-frg-vk, .nc-zeile, span) { padding: var(--nc-zelle-y) var(--nc-zelle-x); font-size: .8125rem; line-height: 1.25rem; }
.fi-ta-cell .fi-ta-col > .nc-feld { gap: .15rem; }
.fi-ta-cell :is(.fi-ta-text-input, .fi-ta-select) { padding-top: .2rem; padding-bottom: .2rem; }

/* Trennstrich unter dem Logo (Benutzer 19.10.2026) */
.nc-sl-kopf { margin-bottom: .5rem; padding-bottom: .5rem; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.nc-sl-kopf + * { margin-top: .5rem; }
.fi-ta-header-cell:is(.fi-align-end, .fi-align-right, .fi-align-center) .fi-ta-header-cell-sort-btn { display: flex; width: 100%; margin: 0;
    justify-content: center; flex-direction: row; }
.fi-ta-cell:is(.fi-align-end, .fi-align-right) > .fi-ta-col, .fi-ta-cell:is(.fi-align-end, .fi-align-right) > .fi-ta-col > * { justify-content: center;
    text-align: center; }
.fi-ta-cell:is(.fi-align-end, .fi-align-right) :is(.fi-ta-text-input, .fi-ta-select) { display: flex; justify-content: center; }

/* Seitenleiste: knapper Abstand unter dem Logo; Menügruppen (Reiter::gruppe, E46) und Einträge dicht (Benutzer 30.10.2026: „Abstände kleiner“):
   Gruppen ~10 statt 28 px auseinander, Einträge ~32 statt 40 px hoch ohne Lücke dazwischen */
.fi-sidebar-nav { row-gap: 0; }
.nc-sl-kopf + .fi-sidebar-nav-groups, .nc-sl-kopf + * { margin-top: .5rem; }
.fi-sidebar-nav-groups { row-gap: .6rem; }
.fi-sidebar-group { row-gap: 0; }
.fi-sidebar-group-btn { padding-block: .3rem; }
.fi-sidebar-group-items { row-gap: 1px; }
.fi-sidebar-item-btn { padding-block: .3rem; }

/* Inhaltsbereich (Benutzer 19.10.2026): volle Breite (Panel maxContentWidth Full), Ränder ~18 px, kompakte Kopfzone */
.fi-main { padding-inline: 1.125rem; }
.fi-page-header-main-ctn { padding-block: .6rem 1rem; row-gap: .6rem; }
.fi-page-content { row-gap: .75rem; }
.fi-page-main { gap: .75rem; }
.fi-header { gap: .5rem; }
.fi-header-heading { font-size: 1.4rem; line-height: 1.75rem; }
/* Reiterleiste (Unterreiter) bündig links statt mittig */
.fi-page-content > .fi-tabs, .fi-page-content .fi-tabs:not(.fi-contained) { margin-inline: 0; justify-content: flex-start; }
/* Abstand Trennstrich → erster Menüpunkt ~8 px (nur der Rand des Kopfs) */
.fi-sidebar-nav > .nc-sl-kopf + .fi-sidebar-nav-groups { margin-top: 0; }

/* Muster „Hinweis + Filter“ (Benutzer 19.10.2026): Hinweis links (höchstens zweizeilig), Filter rechts in derselben Zeile; schmal untereinander */
.nc-hinweis-filter { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 1.5rem; }
.nc-hinweis-filter > .nc-hinweis-filter-text { flex: 1 1 16rem; max-width: 34rem; margin: 0; font-size: .78rem; line-height: 1.1rem;
    color: var(--gray-600); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nc-hinweis-filter > .nc-hinweis-filter-text.nc-mit-info { display: flex; align-items: flex-end; gap: .3rem; -webkit-line-clamp: unset; }
.nc-hinweis-filter > .nc-hinweis-filter-text.nc-mit-info > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nc-hinweis-filter > .nc-zeile { flex: 0 1 auto; justify-content: flex-end; gap: .5rem .75rem; }
/* Haken-Filter neben Feldern: kleine Schrift, vertikal auf Feldhöhe (2 rem) */
.nc-filter-haken { display: inline-flex; align-items: center; gap: .4rem; min-height: 2rem; padding-bottom: 0; font-size: .8125rem; white-space: nowrap; }
.nc-filter-haken .text-sm { font-size: .8125rem; line-height: 1.25rem; }
.nc-hinweis-filter .nc-min-16 { min-width: 12rem; }

.nc-ausgeblendet { display: none !important; }

/* Formulare kompakt */
/* ======================== Formulare kompakt (Formular-Agent, Benutzer 19.10.2026; Bausteine: App\Filament\Bausteine\Formular) ======================== */
/* Abschnitte in Formularen/Dialogen: weniger Polster, engere Feldabstände (passend zu den kompakten Tabellen) */
.fi-modal .fi-sc.fi-sc-has-gap, .fi-fo-field ~ .fi-sc.fi-sc-has-gap { gap: .9rem; }
.fi-modal .fi-section:not(.fi-section-not-contained) > .fi-section-header { padding: .6rem 1rem; }
.fi-modal .fi-section:not(.fi-section-not-contained) > .fi-section-content-ctn > .fi-section-content { padding: .75rem 1rem .9rem; }
.fi-modal .fi-section-content > .fi-sc.fi-sc-has-gap { gap: .6rem 1rem; }
.fi-modal .fi-fo-field { row-gap: .3rem; }
.fi-modal .fi-fo-field-wrp-helper-text, .fi-modal .fi-fo-field .fi-sc-text { font-size: .8125rem; line-height: 1.15rem; }
/* Schrift in Dialogen kleiner (Benutzer 26.10.2026): Überschrift, Abschnitte, Beschriftungen und Felder; Felder ~32 statt 36 px hoch */
.fi-modal .fi-modal-heading { font-size: 1rem; }
.fi-modal .fi-section-header-heading { font-size: .875rem; }
.fi-modal :is(.fi-fo-field-label, .fi-fo-field-label-content, .fi-checkbox-input ~ span) { font-size: .8125rem; line-height: 1.15rem; }
.fi-modal :is(.fi-input, .fi-select-input-btn, .fi-select-input-value-ctn, .fi-fo-date-time-picker-trigger, .fi-select-input-option) {
    font-size: .8125rem; line-height: 1.25rem; padding-block: .3rem; }
.fi-modal .fi-input-wrp-label { font-size: .8125rem; }
/* Schalter neben Eingabefeldern (Formular::schalterAmFeld): unten im Rasterfeld, mittig zur Feldhöhe (2.25 rem) */
.fi-grid-col:has(> * > .nc-schalter-am-feld), .fi-sc-component:has(> .nc-schalter-am-feld) { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: flex-end; }
.nc-schalter-am-feld > .fi-fo-field-label-col { min-height: 2.25rem; display: flex; align-items: center; }
/* Mehrfachauswahl kompakt (Formular::kompakteListe): eine Zeile je Eintrag, Beschreibung klein rechts, Bereich scrollt ab ~300 px */
.fi-fo-checkbox-list:has(.nc-liste-kompakt) .fi-fo-checkbox-list-search-input-wrp { margin-bottom: .4rem; }
.nc-liste-kompakt { max-height: 18.75rem; overflow-y: auto; overflow-x: hidden; gap: 0 1rem; padding: .15rem .5rem; border: 1px solid var(--gray-200);
    border-radius: .5rem; }
.nc-liste-kompakt.fi-grid-direction-col { margin-top: 0; }
.nc-liste-kompakt.fi-grid-direction-col .fi-fo-checkbox-list-option-ctn, .nc-liste-kompakt .fi-fo-checkbox-list-option-ctn { padding-top: 0; min-width: 0; }
.nc-liste-kompakt .fi-fo-checkbox-list-option { align-items: center; min-height: 1.85rem; column-gap: .5rem; }
.nc-liste-kompakt .fi-fo-checkbox-list-option .fi-checkbox-input { margin-top: 0; }
.nc-liste-kompakt .fi-fo-checkbox-list-option-text { display: flex; align-items: baseline; gap: .5rem; min-width: 0; flex: 1 1 auto; line-height: 1.25rem; }
.nc-liste-kompakt .fi-fo-checkbox-list-option-label { font-weight: 400; white-space: nowrap; text-overflow: ellipsis; flex: 0 1 auto; }
.nc-liste-kompakt .fi-fo-checkbox-list-option-description { margin-left: auto; flex: 0 0 auto; font-size: .72rem; color: var(--gray-500); }
.nc-liste-kompakt .fi-fo-checkbox-list-option:hover { background: var(--gray-50); }
/* Formular-Typografie eigener Blade-Bereiche (Benutzer 19.10.2026): Beschriftungen wie Filament-Formulare (14 px / 500), Hinweise 13 px grau,
   Leer-/Einleitungstexte 14 px; Beschriftung einzeilig über dem Feld (lange Zusätze gehören in Platzhalter oder Info-Icon) */
.fi-fo-field-label { font-size: .875rem; line-height: 1.25rem; font-weight: 500; color: var(--gray-950); }
.nc-feld > .fi-fo-field-label, .nc-feld .nc-vk > .fi-fo-field-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.nc-feld > .fi-fo-field-label > .nc-mit-info { max-width: 100%; }
.nc-feld .nc-quelle, .nc-feld + .nc-quelle { font-size: .8125rem; line-height: 1.15rem; }
.fi-main :is(p, div).nc-leer, .fi-modal :is(p, div).nc-leer, .fi-main p.nc-mit-info, .fi-main label.nc-mit-info:not(.fi-fo-field-label),
.fi-main .nc-stack > b, .fi-main .nc-zeile > b { font-size: .875rem; line-height: 1.25rem; }
.fi-main label.nc-mit-info:not(.fi-fo-field-label) { font-weight: 400; }
.fi-main p.nc-hinweis { font-size: .875rem; line-height: 1.25rem; }
/* Benutzer 20.10.2026: Auswahlfelder einer Spalte gleich breit (so breit wie die längste Auswahl der Spalte) */
.fi-ta-cell.nc-spalte-schmal .fi-ta-select .fi-input-wrp { width: 100%; min-width: max-content; max-width: none; }
.fi-ta-cell.nc-spalte-breit .fi-ta-select .fi-input-wrp, .fi-ta-cell.nc-spalte-breit .fi-ta-text-input .fi-input-wrp { width: 13rem; max-width: none; }
.fi-ta-cell.nc-spalte-url .fi-ta-text-input .fi-input-wrp { width: 16rem; }

/* ======================== Formular-Layout: Reihen bündig, Textarea füllt den Rahmen (Benutzer 19.10.2026) ======================== */
/* Mehrzeilige Textfelder: Filaments Tailwind-Klassen (w-full/block) fehlen ohne Build → Breite 100 % selbst setzen */
.fi-input-wrp textarea, .fi-fo-textarea textarea { display: block; width: 100%; box-sizing: border-box; }
/* Info-Zeichen in Beschriftungen läuft mit dem Text (kein Flex-Element, das allein rechts außen stehen kann) */
label.fi-fo-field-label > .nc-mit-info, .fi-fo-field-label-content > .nc-mit-info { display: inline; }
.fi-fo-field-label .nc-mit-info > .nc-info, .nc-einst-feld > label .nc-info { display: inline-block; margin-left: .3rem; vertical-align: baseline; }
/* Einstellungen: je Reihe gemeinsame Zeilen (Beschriftung / Feld / Fehler / Hinweis) per Subgrid → Eingaben und Hinweise bündig,
   Beschriftungsbereich so hoch wie die längste Beschriftung der Reihe */
.nc-einst-raster { row-gap: 0; }
.nc-einst-feld { padding-bottom: 1rem; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; min-width: 0; }
.nc-einst-feld > label { grid-row: 1; }
.nc-einst-feld > :nth-child(2) { grid-row: 2; margin-top: .25rem; min-width: 0; }
.nc-einst-feld > .nc-fehler { grid-row: 3; margin-top: .25rem; }
.nc-einst-feld > .nc-quelle:last-child { grid-row: 4; margin-top: .25rem; }
@media (max-width: 640px) { .nc-einst-raster { grid-template-columns: 1fr; } }
/* Filament-Schema-Formulare (nur Raster, die ausschließlich Felder enthalten): Grid → Rasterzelle → Komponente → Feld teilen sich zwei Zeilen
   (Beschriftung / Inhalt) per Subgrid → in jeder Reihe Beschriftungen oben bündig, Eingaben auf gleicher Höhe, Hinweise darunter bündig */
.fi-grid:not(:has(> .fi-grid-col:not(:has(> .fi-sc-component > .fi-fo-field:not(.fi-fo-field-has-inline-label))))) > .fi-grid-col { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
.fi-grid:not(:has(> .fi-grid-col:not(:has(> .fi-sc-component > .fi-fo-field:not(.fi-fo-field-has-inline-label))))) > .fi-grid-col > .fi-sc-component { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; min-width: 0; }
.fi-grid:not(:has(> .fi-grid-col:not(:has(> .fi-sc-component > .fi-fo-field:not(.fi-fo-field-has-inline-label))))) > .fi-grid-col > .fi-sc-component > .fi-fo-field { grid-row: span 2; grid-template-rows: subgrid; row-gap: .5rem; align-content: start; min-width: 0; }
.fi-grid:not(:has(> .fi-grid-col:not(:has(> .fi-sc-component > .fi-fo-field:not(.fi-fo-field-has-inline-label))))) > .fi-grid-col > .fi-sc-component > .fi-fo-field > .fi-fo-field-label-col { grid-row: 1; align-content: start; }
.fi-grid:not(:has(> .fi-grid-col:not(:has(> .fi-sc-component > .fi-fo-field:not(.fi-fo-field-has-inline-label))))) > .fi-grid-col > .fi-sc-component > .fi-fo-field > .fi-fo-field-content-col { grid-row: 2; align-content: start; }
/* Info-Tooltip (Benutzer 20.10.2026): lange Texte nicht abgeschnitten, sondern im Tooltip scrollbar */
.nc-info-tip .tippy-content { max-height: min(22rem, 60vh); overflow-y: auto; overscroll-behavior: contain; }

.nc-nowrap { white-space: nowrap; flex: none; }

/* ======================== Kopfzone über den Daten kompakt (Benutzer 26.10.2026: „Header mit Filter … viel zu groß“) ======================== */
/* Reiterleisten im Inhalt: ~36 statt 52 px hoch */
.fi-main .fi-tabs:not(.fi-contained) { padding: .2rem; }
.fi-main .fi-tabs-item { padding-block: .3rem; }
/* Seitenkopf mit Statusleiste rechts daneben (CPE-Synchronisation, CpeSynchronisation::getHeader); schmal darunter */
.nc-seitenkopf { flex-flow: row wrap; align-items: center; justify-content: space-between; gap: .35rem 1.5rem; }
.nc-seitenkopf > .nc-statusleiste { flex: 1 1 28rem; justify-content: flex-end; padding-bottom: 0; border-bottom: 0; }
.nc-seitenkopf > .nc-statusleiste > .nc-statusleiste-stand { margin-left: 0; }
@media (max-width: 40rem) { .nc-seitenkopf > .nc-statusleiste { justify-content: flex-start; } }
/* Filterfelder über einer Tabelle (eigene Filterleiste der CPE-Synchronisation, Filament-Filter über dem Inhalt z. B. ISAM):
   Beschriftung klein, Felder ~32 px */
:is(.nc-filterleiste, .fi-ta-filters-above-content-ctn) .fi-fo-field { row-gap: .2rem; }
:is(.nc-filterleiste, .fi-ta-filters-above-content-ctn) :is(.fi-fo-field-label-col, .fi-fo-field-label, .fi-fo-field-label-content) {
    font-size: .8125rem; line-height: 1.1rem; }
:is(.nc-filterleiste, .fi-ta-filters-above-content-ctn) :is(.fi-input, .fi-select-input-btn, .fi-select-input-value-ctn, .fi-fo-date-time-picker-trigger) {
    padding-block: .25rem; min-height: 0; line-height: 1.5rem; }
:is(.nc-filterleiste, .fi-ta-filters-above-content-ctn) .fi-select-input div[x-ref=select] { min-height: 2rem; }
:is(.nc-filterleiste, .fi-ta-filters-above-content-ctn) .fi-select-input-btn .fi-select-input-value-ctn { padding-block: 0; }
/* eigene Filterleiste (CPE-Synchronisation): Haken untereinander ohne Umbruch, Knopf „Suchen“ auf Feldhöhe */
.nc-filterleiste .nc-filterraster > .fi-grid { gap: .4rem .75rem; align-items: end; }
.nc-filterleiste .fi-btn { padding-block: .3rem; }
.nc-filterleiste .nc-filterhaken > .fi-grid { gap: .15rem; }
.nc-filterleiste .nc-filterhaken .fi-fo-field-label { white-space: nowrap; font-weight: 400; }
.nc-filterleiste .nc-filterhaken .fi-checkbox-input { margin-top: .1rem; }
/* breit (Filament xl, 7 Spalten): eine Zeile, Spalten nach Inhalt statt gleich breit (Status über 2 Spalten, Haken so breit wie ihr Text) */
@media (min-width: 80rem) {
    .nc-filterleiste .nc-filterraster > .fi-grid { grid-template-columns: minmax(7rem, 1fr) repeat(2, minmax(5rem, 1fr)) minmax(7rem, 1.2fr)
        repeat(2, minmax(7.5rem, .9fr)) auto; }
}

/* Filament-Filter über dem Inhalt (z. B. ISAM „Typ“): Felder, Suche/Spaltenauswahl und Kopfaktionen in einer Zeile statt drei;
   Überschrift „Filter“ nur für Screenreader, „Filter zurücksetzen“ rechts neben den Feldern. Schmal bricht die Zeile um. */
.fi-ta-header-ctn:has(> .fi-ta-filters-above-content-ctn):has(> .fi-ta-header-toolbar) { display: flex; flex-wrap: wrap; align-items: flex-end; }
.fi-ta-header-ctn:has(> .fi-ta-filters-above-content-ctn):has(> .fi-ta-header-toolbar) > * { flex: 0 1 auto; width: auto; min-width: 0; border: 0; }
.fi-ta-header-ctn:has(> .fi-ta-filters-above-content-ctn):has(> .fi-ta-header-toolbar) > .fi-ta-filters-above-content-ctn { order: 1; padding: .3rem .9rem; }
.fi-ta-header-ctn:has(> .fi-ta-filters-above-content-ctn):has(> .fi-ta-header-toolbar) > .fi-ta-header-toolbar { order: 2; padding-inline-start: 0; }
.fi-ta-header-ctn:has(> .fi-ta-filters-above-content-ctn):has(> .fi-ta-header-toolbar) > .fi-ta-header { order: 3; flex: 0 1 auto; margin-inline-start: auto; }
.fi-ta-filters-above-content-ctn > .fi-ta-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .4rem .75rem; }
.fi-ta-filters-above-content-ctn > .fi-ta-filters > .fi-ta-filters-header { order: 2; min-height: 2rem; align-items: center; }
.fi-ta-filters-above-content-ctn .fi-ta-filters-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Felder und „Filter zurücksetzen“ in einem Fluss: der Knopf steht immer direkt hinter dem letzten Feld, auch wenn die Felder umbrechen */
.fi-ta-filters-above-content-ctn > .fi-ta-filters { column-gap: 1.25rem; }
.fi-ta-filters-above-content-ctn > .fi-ta-filters > .fi-grid { display: contents; }
/* feste Breite statt flex-basis: sonst rechnet der Browser die Leiste nach der Inhaltsbreite zu schmal und „Filter zurücksetzen“ bricht um */
.fi-ta-filters-above-content-ctn > .fi-ta-filters > .fi-grid > .fi-grid-col { flex: 0 1 auto; width: 14rem; min-width: 10rem; }
/* Zeitraum und Schalter (Inbetriebnahmen, Benutzer 30.10.2026: „sehr unruhig“): alles unten auf Feldhöhe, Schalter so breit wie ihr Text,
   die beiden Datumsfelder eines Zeitraums nebeneinander mit fester Breite */
.fi-ta-filters-above-content-ctn > .fi-ta-filters > .fi-grid > .fi-grid-col:is(:has(.fi-fo-toggle), :has(.fi-fo-date-time-picker)) { flex: 0 0 auto; width: auto; min-width: 0; }
.fi-ta-filters-above-content-ctn .fi-grid-col:has(.fi-fo-toggle) .fi-fo-field-label { min-height: 2rem; align-items: center; white-space: nowrap; font-weight: 400; }
.fi-ta-filters-above-content-ctn .fi-grid-col:has(.fi-fo-date-time-picker) .fi-sc-component > div > .fi-grid { grid-template-columns: repeat(2, 8.5rem); gap: .75rem; }
/* Leiste „Aktive Filter“ (z. B. Feste IP) schmaler */
.fi-ta-filter-indicators { padding-block: .2rem; align-items: center; }
.fi-ta-filter-indicators .fi-icon-btn { width: 1.6rem; height: 1.6rem; }

/* Zeilen niedriger (Benutzer 26.10.2026: „für alle Grids die Zeilenhöhen kleiner“): ~28 statt ~32–36 px je einzeiliger Zeile */
.fi-ta-ctn { --nc-zelle-y: .2rem; }
.fi-ta-cell .fi-ta-text-has-descriptions { padding-top: .1rem; padding-bottom: .1rem; }
/* Platzhalter („–“) in einer Textspalte nicht doppelt gepolstert (machte die Zeile ~43 px hoch) */
.fi-ta-cell .fi-ta-text > .fi-ta-placeholder { padding: 0; line-height: 1.25rem; }
.fi-ta-cell .nc-chip { line-height: 1.1rem; }
/* ======================== Tabellen auf Fensterhöhe (Benutzer 26.10.2026: waagerecht scrollen erst am Tabellenende) ========================
   ApiTabellen: Inhalt scrollt in sich (beide Scrollbalken im Bild), Spaltenköpfe bleiben oben stehen, Paginierung direkt darunter.
   --nc-ta-max (Fensterhöhe − Abstand oben − Platz darunter) setzt netcontechweb.js (ncTabellenHoehe); Mindesthöhe 18rem, darunter scrollt die Seite.
   Schmal (< 48rem, Handy) wie bisher: ganze Seite scrollt. Aufklapper der Zeilen klappen an der Kante um (Filament x-float flip). */
@media (min-width: 48rem) {
    .nc-api-tabelle .fi-ta-content-ctn { max-height: max(18rem, var(--nc-ta-max, 100dvh)); overflow: auto; overscroll-behavior-x: contain; }
    .nc-api-tabelle .fi-ta-content-ctn .fi-ta-table > thead > tr > th { position: sticky; top: 0; z-index: 2; background-color: inherit; }
    /* Trennlinie unter den stehenden Spaltenköpfen (border-collapse: Rahmen scrollt sonst mit) */
    .nc-api-tabelle .fi-ta-content-ctn .fi-ta-table > thead > tr > th { box-shadow: inset 0 -1px 0 var(--gray-200); }
}

/* ======================== Gruppenköpfe der Tabellen (CPE-Sync nach Status, Benutzer 26.10.2026) ========================
 * Farbig hinterlegt; Anzahl (Beschreibung) in derselben Zeile neben dem Titel. */
.fi-ta-group-header-cell, .fi-ta-group-header-row > td { background-color: var(--primary-100); }
.fi-ta-group-header { background-color: var(--primary-100); padding-block: .375rem; }
.fi-ta-group-header.fi-collapsible:hover { background-color: var(--primary-200); }
.fi-ta-group-header > div { display: flex; align-items: baseline; gap: .5rem; }
.fi-ta-group-heading { font-weight: 600; }
.fi-ta-group-description { color: var(--gray-600); font-size: .8125rem; }

/* Checkbox im Formularraster: Beschriftung oben wie bei Eingabefeldern, Haken mittig auf deren Höhe (Dialog ~2rem) – Checkbox->inline(false) + Klasse */
.nc-haken-unten .fi-checkbox-input { margin-block: .5rem; }
/* Beschriftung des Gruppenkopfs bleibt beim waagerechten Scrollen links stehen (Hintergrund trägt die Zelle) */
.fi-ta-group-header { position: sticky; left: 0; width: max-content; margin-inline: 0; }
/* Detailzeile über die volle Breite unter dem Datensatz (nc-detail, netcontechweb.js) */
.nc-detailzeile > td { padding: .25rem .75rem .6rem 3rem; background-color: var(--gray-50); border-bottom: 1px solid var(--gray-200); }
.nc-detailzeile .nc-tabelle { width: auto; min-width: 40rem; background-color: #fff; }

/* ======================== ISAM-Popup (Benutzer 26.10.2026: Reiter Allgemein/Konfigurationsvorlagen/Bild, ohne Scrollen bei 1920×1080) ======================== */
/* Reiterleiste im Dialog schmal, Abschnitte darunter dicht */
.fi-modal .nc-isam-reiter .fi-tabs { padding: .15rem; }
.fi-modal .nc-isam-reiter .fi-tabs-item { padding-block: .3rem; }
/* Reiter „Bild“: Vorschau begrenzt, Klick öffnet groß (nc-lightbox über allem, auch über dem Dialog) */
.nc-isam-bild { display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }
.nc-isam-bild-vorschau { padding: 0; border: 1px solid var(--gray-200); border-radius: .5rem; background: var(--gray-50); cursor: zoom-in; overflow: hidden; }
.nc-isam-bild-vorschau img { display: block; max-width: min(100%, 36rem); max-height: 22rem; object-fit: contain; }
.nc-isam-bild-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.nc-isam-bild-hinweis, .nc-isam-bild-laedt { font-size: .8125rem; color: var(--gray-500); }
.nc-isam-bild-fehler { font-size: .8125rem; color: var(--danger-600); }
.nc-lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 2rem;
    background-color: rgba(15, 23, 42, .85); cursor: zoom-out; }
.nc-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: .25rem; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
/* Popup „Virtuelle Port-Bereiche“: kleine Tabelle, Aktionen rechts */
.nc-port-bereiche { display: flex; flex-direction: column; gap: .6rem; }
.nc-port-bereiche-hinweis { font-size: .8125rem; color: var(--warning-700); }
.nc-port-tabelle { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.nc-port-tabelle th, .nc-port-tabelle td { padding-inline: .6rem; border-bottom: 1px solid var(--gray-200); text-align: left; }
.nc-port-tabelle .nc-port-aktionen { white-space: nowrap; text-align: right; width: 1%; }
.nc-port-tabelle .nc-port-aktionen > * { display: inline-flex; }
/* Popup „Profile“: Blöcke in Monospace, ohne Zeilenumbruch, waagerecht scrollbar */
.fi-modal textarea.nc-mono { font-size: .75rem; line-height: 1.1rem; white-space: pre; overflow: auto; }

/* ======================== Schrift einheitlich (Benutzer 03.11.2026: „Unterschiedliche Schrift … Tarife grausam“) ========================
   Ursache: technische Werte liefen über .nc-mono bzw. Filament ->fontFamily('mono') (.fi-font-mono) auf Consolas (Windows-Fallback),
   auch Daten, Namen, Geschwindigkeiten – je Seite ein anderer Anteil Monospace. Jetzt überall Lato (Panel-Schrift, NetConDesign E51):
   Lato-Ziffern sind von Haus aus gleich breit (tabellarisch), Spalten bleiben bündig; 0 und O unterscheiden sich deutlich.
   Echte Monospace nur noch für Rohblöcke und Geheimnisse (pre, code, textarea: Mail-Rohtext, Profile/Konfiguration, Passwort/PIN),
   wo Spaltensatz bzw. I/l/1 zählt. Die Klassen bleiben als Kennzeichen „technischer Wert“ (kopierbar, nowrap) bestehen. */
.nc-mono, .fi-font-mono { font-family: inherit; font-variant-numeric: tabular-nums; }
:is(pre, code, kbd, samp, textarea).nc-mono, .fi-modal textarea.nc-mono {
    font-family: Consolas, 'Cascadia Mono', ui-monospace, SFMono-Regular, Menlo, 'Liberation Mono', monospace; }
/* Tabellentext eine Größe (13 px): Hilfsklasse .nc-text-s (14 px) vergrößerte Zellen statt sie anzugleichen */
.nc-tabelle .nc-text-s, .fi-ta-cell .nc-text-s { font-size: inherit; }
/* Filament „medium“ (500) fällt mangels Lato-Halbfett auf Bold (E51) – in Tabellenzellen wirkte eine Namensspalte dadurch fett,
   in anderen Tabellen nicht. Zellen normal, Hervorhebung nur bewusst über bold/semibold. */
.fi-ta-cell .fi-ta-text-item.fi-font-medium { font-weight: 400; }