/*
 * NetCon Tech Web: gemeinsame Stile (übernommen aus NetConIorAdministration). Ohne Vite-Build: nur Filament-Klassen + diese Datei.
 * Farben: Filament-Variablen (--primary-* = Primärfarbe, --gray-*, --danger-*, --warning-*, --success-*) und
 * --nc-farbe / --nc-akzent (festes Design, im Panel gesetzt). Klassen beginnen mit „nc-“. Neue Regeln nur nach Absprache (gemeinsame Datei).
 * Aufbau: Basis (oben) → Seitenstile der Reiter (Präfix je Reiter) → Bausteine (nc-gap-*, nc-min-*, nc-warnkasten …)
 * ganz unten, damit sie bei gleicher Spezifität gewinnen. Inline-Stile nur für berechnete Werte (Prozent, Farben aus Einstellungen).
 */

/* ---------- Flächen: gedämpft hell statt Reinweiß (kein Dunkelmodus) ----------
 * Filament-Stile liegen in @layer, diese Datei nicht → Regeln hier gewinnen ohne !important. Eingabefelder bleiben weiß (Kontrast). */
:root { --nc-grund: #e3e7ed; --nc-leiste: #edf0f4; --nc-flaeche: #f5f7f9; }
.fi-body { background-color: var(--nc-grund); }
.fi-sidebar, .fi-topbar { background-color: var(--nc-leiste); }
.fi-section:not(.fi-section-not-contained):not(.fi-aside), .fi-ta-ctn, .fi-tabs:not(.fi-contained),
.fi-modal-window, .fi-dropdown-panel, .fi-simple-main, .fi-wi-stats-overview-stat { background-color: var(--nc-flaeche); }
/* Primärfarbe sichtbar (--nc-farbe): Balken unter der Kopfzeile, aktiver Reiter/Unterreiter, Kopf der Anmeldung */
.fi-topbar, .fi-sidebar-header { background-color: var(--nc-leiste); box-shadow: inset 0 -3px 0 var(--nc-farbe); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background-color: var(--primary-100); box-shadow: inset 4px 0 0 var(--nc-farbe); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label { color: var(--primary-800); font-weight: 600; }
.fi-tabs-item.fi-active { background-color: var(--primary-50); box-shadow: inset 0 -3px 0 var(--nc-farbe); }
.fi-simple-main { border-top: 4px solid var(--nc-farbe); }

/* ---------- Abstände und Text ---------- */
.nc-stack { display: flex; flex-direction: column; gap: 1rem; }
.nc-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.nc-hinweis { margin: 0 0 .75rem; }
.nc-leer { color: var(--gray-500); }
.nc-quelle { color: var(--gray-500); font-size: .8rem; }
.nc-nowrap { white-space: nowrap; }
.nc-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.nc-zahl { text-align: right; font-variant-numeric: tabular-nums; }
.nc-fehler { color: var(--danger-600); font-size: .85rem; white-space: normal; }

/* ---------- Info-Icon „i“: in derselben Zeile wie die Beschriftung ---------- */
.nc-mit-info { display: inline-flex; align-items: center; gap: .3rem; }
.nc-info {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 1.05rem; height: 1.05rem; border-radius: 9999px;
    border: 1px solid var(--gray-400); color: var(--gray-600); background: #fff;
    font: italic 600 .7rem/1 Georgia, serif; cursor: help; vertical-align: middle;
}
.nc-info::before { content: 'i'; }
.nc-info:hover, .nc-info:focus { border-color: var(--primary-600); color: var(--primary-700); outline: none; box-shadow: 0 0 0 2px var(--primary-200); }

/* ---------- Chips (.chip, .chip.acc, .chip.warn) ---------- */
.nc-chip { display: inline-block; padding: .05rem .5rem; border-radius: 9999px; font-size: .75rem; font-weight: 500; line-height: 1.25rem;
    background: var(--gray-100); color: var(--gray-700); white-space: nowrap; }
.nc-chip-akzent { background: var(--primary-100); color: var(--primary-800); }
.nc-chip-warn { background: var(--warning-100); color: var(--warning-800); }
.nc-chip-fehler { background: var(--danger-100); color: var(--danger-700); }
.nc-chip-ok { background: var(--success-100); color: var(--success-800); }
.nc-chip-test { background: #ede9fe; color: #5b21b6; font-weight: 700; letter-spacing: .03em; }

/* ---------- Tabellen ---------- */
/* Entwurf einer neuen Zeile: hinterlegt, Akzentbalken links */
.fi-ta-row.nc-neu, .fi-ta-row.nc-neu:hover { background: var(--primary-50); }
.fi-ta-row.nc-neu > td:first-child { box-shadow: inset 4px 0 0 var(--primary-500); }
/* kompakt */
.nc-api-tabelle .fi-ta-cell { padding-top: .35rem; padding-bottom: .35rem; }
.nc-api-tabelle .fi-ta-text-input { min-width: 10rem; }
/* einfache Tabelle (Listen in Dialogen) */
.nc-tabelle { width: 100%; border-collapse: collapse; font-size: .875rem; }
.nc-tabelle th { text-align: left; font-weight: 600; color: var(--gray-700); border-bottom: 1px solid var(--gray-200); padding: .4rem .5rem; }
.nc-tabelle td { border-bottom: 1px solid var(--gray-100); padding: .4rem .5rem; vertical-align: top; }
/* Rote Zeile: Fehler */
.nc-tabelle tr.nc-fehlt td { background: var(--danger-50); color: var(--danger-700); }

/* ---------- Formulare ---------- */
.nc-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.nc-raster-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 900px) { .nc-raster-3 { grid-template-columns: minmax(0, 1fr); } }
.nc-breit { grid-column: 1 / -1; }
.nc-feld { display: flex; flex-direction: column; gap: .25rem; }
/* Filament-Feld (z. B. Kalender) in einer Filterzeile: Abstand Beschriftung–Feld wie bei den eigenen Feldern */
.nc-feld .fi-fo-field { row-gap: .25rem; }

/* Mehrfachauswahl */
.nc-mp-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; min-width: 9rem; max-width: 22rem;
    padding: .375rem .625rem; border: 1px solid var(--gray-300); border-radius: .5rem; background: #fff; font-size: .875rem; text-align: left; }
.nc-mp-btn:focus { outline: 2px solid var(--primary-500); outline-offset: 1px; }
.nc-mp-btn[disabled] { background: var(--gray-50); color: var(--gray-500); }
.nc-mp-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-mp-leer .nc-mp-text { color: var(--gray-500); font-style: italic; }
.nc-mp-warn { border-color: var(--warning-500); }
.nc-mp-pfeil { flex: none; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--gray-500); }
.nc-mp-liste { padding: .375rem; min-width: 12rem; }
.nc-mp-option { display: flex; align-items: center; gap: .5rem; padding: .3rem .4rem; border-radius: .375rem; font-size: .875rem; cursor: pointer; }
.nc-mp-option:hover, .nc-mp-option:focus-within { background: var(--gray-50); }
.nc-mp-hinweis { margin: .25rem .4rem 0; color: var(--gray-500); font-size: .75rem; max-width: 18rem; }

/* ---------- Bausteine statt Inline-Stile (aus den Reitern übernommen, gleiche Werte) ----------
 * Stehen nach den Seiten-Abschnitten und den Basisklassen (nc-stack, nc-zeile, nc-feld): bei gleicher Spezifität gewinnt die spätere Regel. */

/* Abstand der Kinder von nc-stack/nc-zeile (Zahl = Hundertstel rem: nc-gap-25 = .25rem) */
.nc-gap-25 { gap: .25rem; }
.nc-gap-35 { gap: .35rem; }
.nc-gap-40 { gap: .4rem; }
.nc-gap-50 { gap: .5rem; }
.nc-gap-75 { gap: .75rem; }
.nc-gap-100 { gap: 1rem; }

/* Ausrichtung in nc-zeile */
.nc-ende { justify-content: flex-end; }
.nc-verteilt { justify-content: space-between; }
.nc-unten { align-items: flex-end; }
.nc-oben { align-items: flex-start; }
.nc-kein-umbruch { flex-wrap: nowrap; }
.nc-fuell { flex: 1; }
.nc-flex-gleich { flex: 1 1 0; }
.nc-flex-14 { flex: 1 1 14rem; }
.nc-begrenzt { min-width: 0; max-width: 100%; }

/* Listen ohne Aufzählung (vor den Abständen: nc-mt-50 darf den Außenabstand setzen) */
.nc-liste-ohne { list-style: none; padding: 0; margin: 0; }

/* Abstände außen/innen (Zahl = Hundertstel rem) */
.nc-mt-50 { margin-top: .5rem; }
.nc-mt-75 { margin-top: .75rem; }
.nc-mb-75 { margin-bottom: .75rem; }
.nc-pb-50 { padding-bottom: .5rem; }
.nc-pad-75 { padding: .75rem; }
.nc-pad-x-50 { padding: 0 .5rem; }

/* Breiten (Zahl = rem) */
.nc-min-9 { min-width: 9rem; }
.nc-min-10 { min-width: 10rem; }
.nc-min-12 { min-width: 12rem; }
.nc-min-15 { min-width: 15rem; }
.nc-min-16 { min-width: 16rem; }
.nc-min-20 { min-width: 20rem; }
.nc-min-26 { min-width: 26rem; }
.nc-max-14 { max-width: 14rem; }
.nc-max-28 { max-width: 28rem; }
.nc-max-36 { max-width: 36rem; }
.nc-w-2 { width: 2rem; }
.nc-w-5 { width: 5rem; }
.nc-w-6 { width: 6rem; }

/* Text */
.nc-text-s { font-size: .875rem; }
.nc-fett { font-weight: 600; }
.nc-titel-s { font-weight: 600; font-size: 1.05rem; }
.nc-titel-m { font-weight: 600; font-size: 1.25rem; }
.nc-pre-wrap { white-space: pre-wrap; }
.nc-pre-line { white-space: pre-line; }
.nc-wrap { white-space: normal; }
.nc-umbruch-alles { word-break: break-all; }
.nc-ellipse { overflow: hidden; text-overflow: ellipsis; }
.nc-links { text-align: left; }
.nc-block { display: block; }
.nc-zeiger { cursor: pointer; }
.nc-unterstrichen { text-decoration: underline; }

/* Raster/Spalten */
.nc-raster-10 { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.nc-span-2 { grid-column: span 2; }
.nc-spalte-1 { grid-column: 1; }
.nc-spalte-ab-1 { grid-column-start: 1; }
.nc-scroll-x { overflow-x: auto; }
.nc-max-h-60 { max-height: 60vh; overflow: auto; }
.nc-max-h-70 { max-height: 70vh; overflow: auto; }
.nc-mitte { text-align: center; }

/* Statusleiste über einer Seite (CPE-Synchronisation): Elemente mit senkrechten Trennern, „Stand“ rechtsbündig */
.nc-statusleiste { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .85rem; padding-bottom: .5rem; border-bottom: 1px solid var(--gray-200); }
.nc-statusleiste-trenner { align-self: stretch; width: 1px; background: var(--gray-300); }
.nc-statusleiste-stand { margin-left: auto; opacity: .7; }

/* gewählte Zeile in einfachen Tabellen */
.nc-gewaehlt { background: var(--primary-50); }

/* Warnkasten (gelb): Grundform und Abstände */
.nc-warnkasten { border: 1px solid var(--warning-300); border-radius: .5rem; background: var(--warning-50); padding: .75rem; }
.nc-warnkasten-mittel { padding: .6rem .8rem; font-size: .875rem; }
.nc-warnkasten-eng { padding: .5rem .75rem; font-size: .875rem; }
.nc-warnkasten-weit { padding: .75rem 1rem; }

/* Eingebettete Vorschauen (PDF, Mail, Report) und Bilder */
.nc-iframe { width: 100%; border: 1px solid var(--gray-200); border-radius: .5rem; }
.nc-iframe-50 { height: 50vh; }
.nc-iframe-75 { height: 75vh; }
.nc-iframe-85 { height: 85vh; }
.nc-iframe-mail { min-height: 22rem; background: #fff; }
.nc-iframe-netconweb { height: calc(100vh - 10rem); min-height: 30rem; background: #fff; }
.nc-bild-rahmen { max-width: 100%; border: 1px solid var(--gray-200); }

/* Kopfzeile (Marke) */
.nc-marke { display: flex; align-items: center; gap: .75rem; height: 2rem; }
.nc-marke-logo { height: 2rem; width: auto; max-width: 8rem; object-fit: contain; }
.nc-marke-text { font-size: 1rem; font-weight: 600; line-height: 1.1; white-space: nowrap; }

/* IP-Adressen (E43): Kunde im Detailkopf als Knopf „In NetCon Billing öffnen“ */
.nc-link-knopf { text-align: left; color: var(--primary-600); cursor: pointer; }
.nc-link-knopf:hover { text-decoration: underline; }

/* Inbetriebnahmen: Zeilenfarbe nach Tagen bis zum Termin wie NetCon Tech (bis 4 dunkelrot, 5–10 hellrot, ab 11 lavendel, vergangen grau) */
.fi-ta-row.nc-ib-bald > td { background: #fecaca; }
.fi-ta-row.nc-ib-naechste > td { background: #fee2e2; }
.fi-ta-row.nc-ib-spaeter > td { background: #f3e8ff; }
.fi-ta-row.nc-ib-vergangen > td { background: var(--gray-100); color: var(--gray-500); }
/* im Radius online: keine Zeilenfarbe und kein Infosymbol (Benutzer 03.11.2026) */
.fi-ta-row:has(.nc-ib-online[data-online]) > td { background: transparent; color: inherit; }
.fi-ta-row:has(.nc-ib-online[data-online]) .nc-ib-datum .fi-icon { visibility: hidden; }
.nc-ib-online { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .4rem; }
.nc-ib-dg { padding: .05rem .5rem; border: 1px solid var(--primary-400); border-radius: .375rem; background: #fff; color: var(--primary-700); font-size: .75rem; }
.nc-ib-dg[disabled] { opacity: .6; cursor: wait; }
.nc-ib-workflow .nc-chip { white-space: pre-line; }
/* Gruppenkopf je Tag: Chip und Anzahl (Beschreibung) in einer Zeile neben dem Datum */
.fi-ta-group-header > div:has(.nc-ib-gruppe) { display: flex; align-items: center; gap: .5rem; }
.fi-ta-group-description:has(.nc-ib-gruppe) { margin: 0; }
.nc-ib-gruppe { display: inline-flex; align-items: center; gap: .5rem; }

/* Netzelemente (Spezifikation Netzelemente): Typ-Kacheln mit Anzahl, Detail-Popup (Werteraster mit Kopieren, Eltern/Kinder nebeneinander) */
.nc-ne-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; }
.nc-ne-kachel { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .45rem .7rem; border: 1px solid var(--gray-200);
    border-radius: .5rem; background: var(--nc-flaeche); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.nc-ne-kachel:hover, .nc-ne-kachel:focus-visible { border-color: var(--primary-400); box-shadow: 0 0 0 2px var(--primary-100); outline: none; }
.nc-ne-kachel-aktiv, .nc-ne-kachel-aktiv:hover { border-color: var(--nc-farbe); background: var(--primary-50); box-shadow: inset 0 -3px 0 var(--nc-farbe); }
.nc-ne-kachel-verweis { border-style: dashed; color: var(--gray-600); }
.nc-ne-kachel-titel { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; font-weight: 600; color: var(--gray-700); white-space: nowrap; }
.nc-ne-kachel-zahl { font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--gray-900); }
.nc-ne-kachel-aktiv .nc-ne-kachel-titel, .nc-ne-kachel-aktiv .nc-ne-kachel-zahl { color: var(--primary-800); }
.nc-ne-icon { width: .9rem; height: .9rem; flex: none; }
.nc-ne-ueberschrift { font-size: 1rem; font-weight: 600; }
.fi-ta-row.nc-ne-belegt > td:first-child { box-shadow: inset 3px 0 0 var(--warning-400); }
.nc-ne-titel { font-size: 1.05rem; font-weight: 600; }
.nc-ne-sperre { display: flex; align-items: center; gap: .35rem; margin: 0; padding: .35rem .6rem; border-radius: .375rem; background: var(--gray-100);
    color: var(--gray-700); font-size: .85rem; }
.nc-ne-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .6rem 1rem; margin: 0; }
.nc-ne-wert { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.nc-ne-wert dd { display: flex; align-items: center; gap: .3rem; margin: 0; min-width: 0; font-size: .875rem; }
.nc-ne-umbruch { overflow-wrap: anywhere; }
.nc-ne-kopieren { flex: none; color: var(--gray-400); cursor: pointer; opacity: 0; transition: opacity .1s; }
.nc-ne-wert:hover .nc-ne-kopieren, .nc-ne-kopieren:focus-visible { opacity: 1; }
.nc-ne-kopieren:hover { color: var(--primary-600); }
.nc-ne-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 1000px) { .nc-ne-spalten { grid-template-columns: minmax(0, 1fr); } }
.nc-ne-scroll { max-height: 22rem; overflow: auto; }
.nc-ne-auswahl { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .75rem; padding: .5rem; border: 1px solid var(--primary-200);
    border-radius: .5rem; background: var(--primary-50); }
.nc-ne-zahl { width: 7rem; }

/* Wartung (Netzelement-Protokolle): überfällig rot, fällig orange (Zeilenrand und Datum), Formular zweispaltig */
.fi-ta-row.nc-wartung-ueberfaellig > td:first-child { box-shadow: inset 3px 0 0 var(--danger-500); }
.fi-ta-row.nc-wartung-faellig > td:first-child { box-shadow: inset 3px 0 0 var(--warning-500); }
.fi-ta-row.nc-wartung-ueberfaellig .nc-wartung-datum { color: var(--danger-600); font-weight: 600; }
.fi-ta-row.nc-wartung-faellig .nc-wartung-datum { color: var(--warning-700); font-weight: 600; }
.nc-wartung-formular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; }
.nc-wartung-breit { grid-column: 1 / -1; }
@media (max-width: 800px) { .nc-wartung-formular { grid-template-columns: minmax(0, 1fr); } }
.nc-wartung-zahl { width: 6rem; }
.nc-wartung-benutzer { max-height: 14rem; border: 1px solid var(--gray-200); border-radius: .5rem; padding: .25rem .5rem; }
.nc-wartung-benutzer label { gap: .5rem; cursor: pointer; }
.nc-wartung-erledigen { display: flex; align-items: flex-end; gap: .75rem; padding: .5rem; border: 1px solid var(--success-200); border-radius: .5rem;
    background: var(--success-50); }
.nc-wartung-text p { margin: .125rem 0 0; white-space: normal; }
.nc-textfeld { width: 100%; border: 1px solid var(--gray-300); border-radius: .5rem; padding: .375rem .625rem; font: inherit; background: transparent; }
.nc-wartung-abschnitt .nc-tabelle tr.nc-wartung-ueberfaellig td:first-child { box-shadow: inset 3px 0 0 var(--danger-500); }
.nc-wartung-abschnitt .nc-tabelle tr.nc-wartung-faellig td:first-child { box-shadow: inset 3px 0 0 var(--warning-500); }
/* Kunde-Reiter Protokolle/Notizen/Dokumente (Review 02.11.2026): Tabellen mit fester Höchsthöhe, scrollen in sich, Spaltenköpfe bleiben stehen;
   Notiztexte einzeilig mit „…“ (voller Text als title und im Popup „Volltext“) */
.nc-kunde-kompakt .nc-max-h-70 { max-height: 22rem; }
.nc-kunde-kompakt .nc-max-h-70 > .nc-tabelle > thead th { position: sticky; top: 0; z-index: 1; box-shadow: inset 0 -1px 0 var(--gray-200); }
.nc-kunde-kompakt.nc-kunde-notizen .nc-max-h-70 { max-height: 18rem; }
.nc-kunde-text { width: 100%; max-width: 0; min-width: 14rem; }
.nc-einzeilig { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 48rem) { .nc-api-tabelle.nc-kunde-journal .fi-ta-content-ctn { max-height: 22rem; } }
/* Kunde-Übersicht (Review 02.11.2026): dichtes Feldraster, enge Tabellen, kompakte Prüfhinweise, PPPoE-Benutzer nebeneinander */
.nc-ku-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .35rem .9rem; font-size: .875rem; }
.nc-ku-raster .nc-feld { gap: 0; min-width: 0; }
.nc-ku-raster .nc-quelle { font-size: .72rem; line-height: 1rem; }
.nc-ku-raster .nc-ku-doppelt { grid-column: span 2; }
.nc-ku-tabelle th, .nc-ku-tabelle td { padding: .2rem .45rem; }
.nc-ku-tabelle td { vertical-align: middle; }
.nc-ku-details td { background: var(--gray-50); }
.nc-ku-hinweise { border: 1px solid var(--warning-300); border-radius: .375rem; background: var(--warning-50); padding: .25rem .6rem; font-size: .8rem; }
.nc-ku-hinweise summary { cursor: pointer; list-style-position: inside; }
.nc-ku-hinweise ul { margin: .25rem 0 0 1rem; list-style: disc; }
.nc-ku-liste { display: flex; flex-wrap: wrap; gap: .15rem .6rem; }
.nc-ku-wert { display: inline-flex; align-items: center; gap: .2rem; }
.nc-ku-abstand { gap: .6rem; }
/* Kundenübersicht „Auf einen Blick“ (Benutzer 03.11.2026): drei Blöcke Vertrag, Anschluss, Internet; Bezeichnung links, Wert rechts */
.nc-ku-blick { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .6rem; }
.nc-ku-block { border: 1px solid var(--gray-200); border-radius: .5rem; padding: .45rem .7rem .55rem; background: var(--gray-50); min-width: 0; }
.nc-ku-block-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .35rem; font-size: .7rem; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; color: var(--gray-500); }
.nc-ku-block-kopf .nc-chip, .nc-ku-block-kopf .nc-quelle { text-transform: none; letter-spacing: normal; }
/* Knopf „Anschluss prüfen“ der Übersicht: Ladesymbol und Schritt während der Prüfung, Ergebnis als Chip daneben */
.nc-ku-check { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.nc-ku-check-inhalt { display: inline-flex; align-items: center; gap: .35rem; font-variant-numeric: tabular-nums; }
.nc-ku-check-ic { width: 1rem; height: 1rem; flex: none; }
.nc-ku-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .2rem .8rem; margin: 0; font-size: .875rem; align-items: baseline; }
.nc-ku-dl dt { color: var(--gray-500); font-size: .78rem; }
.nc-ku-dl dd { margin: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .6rem; }
/* Kopf der Kundenansicht: Kunde und Aktionen in einer Zeile; Vertragswahl rechts in der Suchzeile (Benutzer 04.11.2026) */
.nc-ku-name { font-size: 1.05rem; }
.nc-ku-vertragswahl { margin-left: auto; }
/* Reiter der Kundenansicht ruhiger (Benutzer 03.11.2026): ohne orangen Balken je Karte, einheitliche Leiste oben */
.nc-ku-reiter .fi-section:not(.fi-section-not-contained):not(.fi-aside) { border-top: 1px solid var(--gray-200); }
.nc-ku-reiter .fi-section-header { padding-block: .5rem; }
.nc-ku-reiter .fi-section-header-heading { font-size: .875rem; }
.nc-ku-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .75rem; min-height: 2rem; }
.nc-ku-leiste > div { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
@media (max-width: 40rem) { .nc-ku-raster .nc-ku-doppelt { grid-column: auto; } }

/* Listen Inbetriebnahmen/Löschungen/FTTC (Review 02.11.2026) */
/* einzeilige Zellen mit „…“ (Grundregel .fi-ta-text-item), hier schmaler, damit die Liste möglichst ohne waagerechtes Scrollen auskommt */
.nc-ib-kurz-m .fi-ta-text-item { max-width: 13rem; }
.nc-ib-kurz-l .fi-ta-text-item { max-width: 17rem; }
/* Favoriten-Stern rechts am Menüeintrag (FavoritStern): gefüllt = Favorit, immer sichtbar; sonst nur beim Überfahren; eingeklappte Seitenleiste ohne Sterne */
.fi-sidebar-nav li.fi-sidebar-item-has-url { position: relative; }
.fi-sidebar-nav li.fi-sidebar-item-has-url:has(> .nc-nav-stern) > .fi-sidebar-item-btn { padding-inline-end: 1.75rem; }
.nc-nav-stern { position: absolute; inset-inline-end: .25rem; top: 50%; transform: translateY(-50%); display: none; padding: .2rem; border-radius: .375rem; color: var(--gray-400); line-height: 0; }
.fi-sidebar-open li.fi-sidebar-item-has-url:hover > .nc-nav-stern, .fi-sidebar-open .nc-nav-stern:focus-visible, .fi-sidebar-open .nc-nav-stern.nc-favorit-aktiv { display: inline-flex; }
.nc-nav-stern:hover { color: var(--nc-farbe, var(--primary-500)); background: var(--gray-100); }
.nc-nav-stern.nc-favorit-aktiv { color: var(--nc-farbe, var(--primary-500)); }
.nc-nav-stern .fi-icon { width: 1rem; height: 1rem; }
.nc-nav-stern .nc-nav-stern-voll, .nc-nav-stern.nc-favorit-aktiv .nc-nav-stern-leer { display: none; }
.nc-nav-stern.nc-favorit-aktiv .nc-nav-stern-voll { display: block; }
/* Netzelemente/Typen/IP (Review 02.11.2026) */
/* Router- & CPE-Typen: beide Tabellen mit Höchsthöhe, scrollen in sich (Spaltenköpfe bleiben stehen, Grundregel .nc-api-tabelle) */
.nc-typen-tabelle .nc-api-tabelle .fi-ta-content-ctn { max-height: 22rem; overflow: auto; }
.nc-typen-cpe .nc-ne-scroll { max-height: 28rem; }
/* Mail senden (03.11.2026) */
/* Text mit Mindesthöhe und senkrecht ziehbar */
.nc-mail-senden .nc-mail-text { min-height: 12rem; resize: vertical; }
/* Empfänger links, Adressen des Kunden rechts als Knöpfe (aktiv = Akzentfarbe mit Haken, aria-pressed) */
.nc-mail-senden .nc-mail-empfaenger-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 700px) { .nc-mail-senden .nc-mail-empfaenger-zeile { grid-template-columns: minmax(0, 1fr); } }
.nc-mail-senden .nc-mail-adressen { gap: .375rem; }
.nc-mail-senden .nc-mail-adresse, .nc-mail-senden .nc-mail-datei-knopf { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .55rem;
    border: 1px solid var(--gray-300); border-radius: .5rem; background: #fff; color: var(--gray-700); font-size: .8125rem; line-height: 1.25rem; cursor: pointer; }
.nc-mail-senden .nc-mail-adresse:hover, .nc-mail-senden .nc-mail-datei-knopf:hover { border-color: var(--primary-400); background: var(--gray-50); }
.nc-mail-senden .nc-mail-adresse:focus-visible, .nc-mail-senden .nc-mail-datei-knopf:focus-within { outline: none; box-shadow: 0 0 0 2px var(--primary-200); }
.nc-mail-senden .nc-mail-adresse-aktiv, .nc-mail-senden .nc-mail-adresse-aktiv:hover { border-color: var(--primary-500); background: var(--primary-50); color: var(--primary-800); }
.nc-mail-senden .nc-mail-adresse-icon { width: 1rem; height: 1rem; flex: none; }
.dark .nc-mail-senden .nc-mail-adresse, .dark .nc-mail-senden .nc-mail-datei-knopf { background: var(--gray-900); border-color: var(--gray-600); color: var(--gray-200); }
.dark .nc-mail-senden .nc-mail-adresse-aktiv { background: var(--primary-950); border-color: var(--primary-400); color: var(--primary-200); }
/* Vorlage: Betreff fest, Vorschau im iframe (sandbox), hell wie eine Mail */
.nc-mail-senden .nc-mail-vorlage { max-width: 36rem; }
.nc-mail-senden .nc-mail-betreff-fest { padding: .35rem .6rem; border: 1px solid var(--gray-200); border-radius: .5rem; background: var(--gray-50); font-weight: 600; }
.nc-mail-senden .nc-mail-vorschau-rahmen { width: 100%; height: 26rem; border: 1px solid var(--gray-200); border-radius: .5rem; background: #fff; resize: vertical; }
.dark .nc-mail-senden .nc-mail-betreff-fest { background: var(--gray-800); border-color: var(--gray-700); }
/* Anhänge: Liste dicht, Dokumentauswahl scrollt in sich */
.nc-mail-senden .nc-mail-anhangliste td { padding-top: .25rem; padding-bottom: .25rem; }
.nc-mail-senden .nc-mail-dokumente-scroll { max-height: 18rem; overflow: auto; border: 1px solid var(--gray-200); border-radius: .5rem; }
.nc-mail-senden .nc-mail-dokumente-scroll thead th { position: sticky; top: 0; background: var(--gray-50); }
.dark .nc-mail-senden .nc-mail-dokumente-scroll thead th { background: var(--gray-800); }

/* Kunde-Feinschliff (03.11.2026) */
/* Prüfhinweise anfangs aufgeklappt: die Vorschau des ersten Hinweises nur im eingeklappten Zustand */
.nc-ku-hinweise[open] .nc-ku-vorschau { display: none; }
/* Notizen/Journal: Doppelklick auf eine Zeile öffnet das Popup – Zeilen als anklickbar kennzeichnen (Notizen: eigene Tabelle, Journal: Filament-Zeilen, nicht das Popup) */
table.nc-kunde-doppelklick tbody tr, .nc-kunde-doppelklick .fi-ta-row { cursor: pointer; }
table.nc-kunde-doppelklick tbody tr:hover > td, .nc-kunde-doppelklick .fi-ta-row:hover > td { background: var(--gray-50); }
.dark table.nc-kunde-doppelklick tbody tr:hover > td, .dark .nc-kunde-doppelklick .fi-ta-row:hover > td { background: rgb(255 255 255 / .04); }

/* Listen 03.11.2026 */
/* Anschluss-Löschungen: alle vier Filter in einer Zeile (ohne Kopfaktion; Filter-Layout AboveContent in netcontechweb-design.css) */
.nc-loeschungen .fi-ta-filters-above-content-ctn > .fi-ta-filters > .fi-grid > .fi-grid-col { flex: 0 1 auto; width: 11rem; min-width: 8rem; }
@media (min-width: 64rem) {
    .nc-loeschungen .fi-ta-filters-above-content-ctn > .fi-ta-filters { flex-wrap: nowrap; }
}
/* PPPoE-Session-Log: lange Zellen höchstens zwei Zeilen (lineClamp), voller Text im title */
.nc-pppoe-lang { max-width: 28rem; }
.nc-pppoe-lang span[title] { cursor: help; }
/* Inbetriebnahmen: Ladeanzeige der Liste (Filter, Suche, Seitenwechsel) */
.nc-ib-laden { margin: 0 0 .25rem; font-size: .8125rem; color: var(--primary-600); }
.dark .nc-ib-laden { color: var(--primary-400); }

/* Feld wird gerade neu befüllt (z. B. Text einer SMS-Vorlage) */
.nc-laedt {
    opacity: 0.5;
    cursor: progress;
}

/* Geräteverwaltung (03.11.2026): ISAM-Liste neben TFTP/Regeln, scrollbare Tabellen mit festem Kopf, Fortschrittsbalken je Datei, Protokoll */
.nc-gv-spalten { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .nc-gv-spalten { grid-template-columns: minmax(0, 1fr); } }
/* ISAM-Liste füllt das Fenster, die Seite selbst scrollt nicht (Benutzer 03.11.2026) */
.nc-gv-scroll { max-height: max(16rem, calc(100vh - 21rem)); overflow: auto; border: 1px solid var(--gray-200); border-radius: .5rem; }
.nc-gv-scroll-klein { max-height: 16rem; }
.nc-gv-scroll > .nc-tabelle > thead th { position: sticky; top: 0; z-index: 1; background: var(--nc-flaeche); box-shadow: inset 0 -1px 0 var(--gray-200); }
.nc-gv-pop td { background: var(--gray-100); font-weight: 600; }
.nc-gv-inaktiv td { color: var(--gray-500); }
.nc-gv-kopierbar:hover .nc-ne-kopieren { opacity: 1; }
.nc-gv-gesamt, .nc-gv-balken { position: relative; height: 1.25rem; min-width: 7rem; border-radius: .25rem; background: var(--gray-100); overflow: hidden; }
.nc-gv-gesamt { height: .5rem; min-width: 0; }
.nc-gv-gesamt > i, .nc-gv-balken > i { position: absolute; inset: 0 auto 0 0; background: var(--primary-300); transition: width .3s; }
.nc-gv-balken-ok > i { background: var(--success-300); }
.nc-gv-balken-fehler { background: var(--danger-100); }
.nc-gv-balken-warn { background: var(--warning-100); }
.nc-gv-balken > span { position: relative; display: block; padding: 0 .4rem; font-size: .75rem; line-height: 1.25rem; white-space: nowrap; }
.nc-gv-protokoll { max-height: 18rem; overflow: auto; margin: 0; padding: .5rem .75rem; border-radius: .375rem; background: var(--gray-900); color: var(--gray-100); font-size: .75rem; line-height: 1.35; white-space: pre-wrap; word-break: break-all; }
.nc-gv-mitschnitt { max-height: 55vh; }
.nc-gv-befehle { margin: .25rem 0; padding: .4rem .5rem; border-radius: .25rem; background: var(--gray-100); font-size: .75rem; white-space: pre-wrap; word-break: break-all; }
.nc-gv-version { display: inline-block; margin: 0 .25rem .15rem 0; padding: 0 .3rem; border-radius: .25rem; background: var(--gray-100); font-size: .75rem; }
.nc-gv-geloescht { text-decoration: line-through; color: var(--gray-500); }
.nc-gv-regelkopf { display: flex; align-items: center; gap: .75rem; }
.nc-gv-regelkopf > :first-child { flex: 1; }
.nc-gv-regel { padding: .5rem .6rem; border: 1px solid var(--gray-200); border-radius: .5rem; background: var(--nc-flaeche); }