/* plugin_admin.css — Styling für die Plugins- + Mail-Log-Admin-Surfaces.
   Tabellen nutzen jetzt die Plattform-Klasse .tbl (im JSX gesetzt) → Header,
   Hover, Borders sind damit identisch zu allen anderen Admin-Tabellen.
   Hier nur noch das, was es als Plattform-Klasse nicht 1:1 gibt. */

.error-cell span { color: var(--er); }

/* Tool-/Code-Namen in den Tabellen: kein beiges code-Kästchen (tokens.css gibt
   jedem <code> background) — schlichter Mono-Text wie in der Plugin-Liste. */
.plugins-list-table code, .plugin-tools-table code,
.plugin-audit-table code, .plugin-perms-table code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: 12px;
  color: var(--tx-0);
}

/* #1466: Dev-Server Webspace-Tags + Lock */
.dsv-tags { display: inline-flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.dsv-tag {
  display: inline-block; font-size: 10px; font-weight: 600; line-height: 1.5;
  padding: 1px 9px; border-radius: 999px; border: 1px solid var(--bdr-faint);
  background: var(--bg-el); color: var(--tx-1); white-space: nowrap;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.dsv-tag-live     { background: var(--wa-bg);  border-color: var(--wa-bd);  color: var(--wa); }
.dsv-tag-template { background: var(--inf-bg); border-color: var(--inf-bd); color: var(--inf); }
.dsv-tag-staging  { background: var(--bg-el);  color: var(--tx-2); }
.dsv-tag-locked   { background: var(--er-bg);  border-color: var(--er-bd);  color: var(--er); }
button.dsv-tag { cursor: pointer; font-family: inherit; }
button.dsv-tag.off { opacity: .5; }
button.dsv-tag.on  { opacity: 1; }
.dsv-tag-input {
  padding: 5px 10px; font-size: 12.5px; border: 1px solid var(--bdr-def);
  border-radius: var(--r-sm); background: var(--bg-base); color: var(--tx-0);
}
.dsv-lock-badge { margin-right: 6px; font-size: 12px; }
.dsv-lock-banner {
  display: flex; align-items: center; gap: 6px; margin-bottom: 14px;
  padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--er-bg); border: 1px solid var(--er-bd); color: var(--tx-1);
  font-size: 12.5px;
}
.dsv-lock-banner strong { color: var(--er); font-weight: 700; }

/* ── Status-/Rollen-Badges → wie .badge ──────────────────────────────────── */
/* #1467: Permission-Level-Badge in der Plugin-Tools-Tabelle */
.perm-badge {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 1px 9px; border-radius: 999px; border: 1px solid var(--bdr-faint);
  font-family: var(--font-mono);
}
.perm-badge.read    { background: var(--bg-el);  color: var(--tx-2); }
.perm-badge.execute { background: var(--inf-bg); border-color: var(--inf-bd); color: var(--inf); }
.perm-badge.admin   { background: var(--wa-bg);  border-color: var(--wa-bd);  color: var(--wa); }
.perm-badge.ungated { background: transparent; border-style: dashed; color: var(--tx-2); font-weight: 500; }

.status-badge, .role-badge, .perm-inherited {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--bdr-def);
  background: var(--bg-el);
  color: var(--tx-1);
}
.status-badge.status-active,
.status-badge.status-success,
.status-badge.status-ok { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok); }
.status-badge.status-inactive { background: var(--bg-el); color: var(--tx-2); }
.status-badge.status-error,
.status-badge.status-failed { background: var(--er-bg); border-color: var(--er-bd); color: var(--er); }
.status-badge.status-blocked { background: var(--wa-bg); border-color: var(--wa-bd); color: var(--wa); }
.status-badge.status-pending { background: var(--bg-el); color: var(--tx-1); }
.perm-inherited { background: var(--inf-bg); border-color: var(--inf-bd); color: var(--inf); }
/* Release-Channel-Badges in der Plugin-Liste */
.status-badge.ch-stable { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok); }
.status-badge.ch-beta { background: var(--wa-bg); border-color: var(--wa-bd); color: var(--wa); }
.status-badge.ch-dev { background: var(--inf-bg); border-color: var(--inf-bd); color: var(--inf); }

/* ── Detail-View: Tabs ───────────────────────────────────────────────────── */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tx-2);
  font-size: 12.5px;
  cursor: pointer;
  margin-bottom: 12px;
}
.btn-back:hover { color: var(--tx-0); }
.plugin-detail-tabs, .mail-view-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--bdr-def);
  margin-bottom: 18px;
}
.plugin-tab, .mail-view-tabs button {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--tx-2);
  cursor: pointer;
}
.plugin-tab:hover, .mail-view-tabs button:hover { color: var(--tx-0); }
.plugin-tab.active, .mail-view-tabs button.active {
  color: var(--tx-0);
  border-bottom-color: var(--ac-2);
}

/* ── Overview-Metadaten (dl) ──────────────────────────────────────────────── */
.plugin-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 9px 26px;
  font-size: 13px;
  margin: 0;
}
.plugin-meta dt { color: var(--tx-2); }
.plugin-meta dd { margin: 0; color: var(--tx-0); }

/* ── Selects (Perms-Tab) ─────────────────────────────────────────────────── */
.plugin-perms-table select {
  padding: 4px 8px;
  border: 1px solid var(--bdr-def);
  border-radius: var(--r-sm);
  background: var(--bg-el);
  color: var(--tx-0);
  font-size: 12.5px;
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.plugin-audit-pagination, .mail-log-pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--tx-2);
}
.plugin-audit-pagination button, .mail-log-pagination button {
  padding: 5px 12px;
  border: 1px solid var(--bdr-def);
  border-radius: var(--r-sm);
  background: var(--bg-el);
  color: var(--tx-1);
  cursor: pointer;
}
.plugin-audit-pagination button:disabled, .mail-log-pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ══ Tabelle groß — Toolbar (.gt-toolbar) ═══════════════════════════════════
   EINE gemeinsame Klasse für alle großen Tabellen-Toolbars (Suche + Filter über
   dem Tabellenkopf). Neue große Tabelle: einfach className="gt-toolbar" auf den
   Toolbar-<div> setzen — keine weiteren CSS-Änderungen nötig. */
.gt-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px 18px;            /* 18px horizontal = bündig zu den Tabellen-Rows */
  border-bottom: 1px solid var(--bdr-def);
}
.card:has(.gt-toolbar) > .card-h { padding-left: 18px; padding-right: 18px; }

.gt-toolbar input[type="search"] { flex: 1; min-width: 240px; }
.gt-toolbar input, .gt-toolbar select {
  padding: 6px 10px;
  border: 1px solid #cbcbcb;
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--tx-0);
  font-size: 13px;
  transition: border-color .12s ease, color .12s ease;
}

/* Custom Dropdown-Pfeil: Chevron-Stil wie die Zeilen-Chevrons (dünn, rund), nach unten
   statt nativer OS-Pfeil. Pfeil rechts mit gleichem Randabstand wie Text links (10px). */
.gt-toolbar select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8478' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
  padding-right: 30px;
}

/* Default-Zustand (leeres Suchfeld / Default-Option value=""): heller Border (--bdr-faint)
   + grauer Text (--tx-2) + hellerer Pfeil. Aktiv (Text getippt bzw. Wert gewählt) → Border
   #cbcbcb + schwarzer Text (aus der Basis-Regel oben). */
.gt-toolbar input[type="search"]::placeholder { color: var(--tx-2); }
.gt-toolbar input[type="search"]:placeholder-shown { border-color: var(--bdr-faint); }
.gt-toolbar select:has(option[value=""]:checked) {
  border-color: var(--bdr-faint);
  color: var(--tx-2);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B0A898' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
}

/* Hover (im Default-Zustand): wie aktiv — dunklerer Border/Text/Pfeil. */
.gt-toolbar input[type="search"]:placeholder-shown:hover { border-color: #cbcbcb; }
.gt-toolbar input[type="search"]:placeholder-shown:hover::placeholder { color: var(--tx-1); }
.gt-toolbar select:has(option[value=""]:checked):hover {
  border-color: #cbcbcb;
  color: var(--tx-1);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8478' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
}

/* Klickbare Zeile: Drill-in-Chevron rechts — dezent, beim Zeilen-Hover kräftig.
   Generisch über .tbl, damit dasselbe Muster auf anderen klickbaren Tabellen wiederverwendbar ist. */
.tbl th.th-chev, .tbl td.td-chev { width: 28px; text-align: right; padding-left: 4px; }
/* leerer Affordance-Header: keine eigene Unterlinie (sonst stray dunkles Border-Segment) */
.tbl th.th-chev { border-bottom-color: transparent; }
.tbl td.td-chev { color: var(--tx-2); }
.tbl td.td-chev svg { opacity: .4; vertical-align: middle; transition: opacity .12s ease; }
.tbl tbody tr:hover td.td-chev { color: var(--tx-0); }
.tbl tbody tr:hover td.td-chev svg { opacity: 1; }

/* Mitarbeiter: Edit-Icon als dezente Zeilen-Affordance (statt Chevron) — wie der Drill-in-
   Chevron: blass, beim Zeilen-Hover kräftig. Kein Button-Kasten mehr. */
.tbl .mit-edit {
  border: none; background: none; padding: 0; width: auto; height: auto;
  color: var(--tx-2); opacity: .45; transition: opacity .12s ease, color .12s ease;
}
.tbl .mit-edit:hover { background: none; border-color: transparent; }
.tbl tbody tr:hover .mit-edit { opacity: 1; color: var(--tx-0); }
.tbl .mit-edit:disabled { opacity: .18; cursor: default; }

/* Letzte Spalte braucht keinen Resize-Strich (sitzt am Tabellenrand → ohne Funktion).
   Gilt global: letzte Spalte ODER die Spalte direkt vor einer Chevron-/Affordance-Spalte. */
.tbl thead th:last-child .col-resize-handle,
.tbl thead th:has(+ th.th-chev) .col-resize-handle { display: none; }

/* Dateiname-Link in Tabellen mit klickbaren Zeilen: eigener Hover, damit klar ist,
   dass der Link separat klickbar ist (nicht der Zeilen-Klick → Overlay). */
.tbl a.file-link {
  color: var(--tx-0); text-decoration: underline; text-underline-offset: 2px;
  transition: color .12s ease;
}
.tbl a.file-link:hover { color: var(--ac-2); }

/* Outline-Button, der erst beim Hover füllt (z.B. Löschen → rot). */
.btn.btn-del { color: var(--er); border-color: var(--er); background: transparent; }
.btn.btn-del:hover { background: var(--er); color: #fff; border-color: var(--er); }

/* ── Mail-Detail Modal ───────────────────────────────────────────────────── */
/* Einheitliches Admin-Overlay (#1231): Backdrop über die Breite des Main-Contents
   (rechts der 264px-Sidebar), Overlay zentriert, max-height 90% mit innerem Scroll.
   Auf schmalen Layouts (Sidebar kollabiert) deckt der Backdrop wieder alles ab. */
.modal-overlay {
  position: fixed;
  inset: 0 0 0 264px;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  padding: 24px;
}
@media (max-width: 1100px) {
  .modal-overlay { inset: 0; }
}
.modal-content {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--bdr-def);
  border-radius: var(--r-lg);
  max-width: 840px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  padding: 24px 26px;
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--tx-2);
  cursor: pointer;
}
.modal-close:hover { color: var(--tx-0); }

/* #1231: Mitarbeiter-Permission-Editor nutzt die Standard-Overlay-Hülle
   (modal-overlay = Sidebar bleibt sichtbar, einheitliches Dimmen), behält aber
   fixierten Header/Toolbar/Footer + scrollenden Body statt Single-Scroll. */
.modal-content.mit-modal {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: 720px;
}
.mail-meta { font-size: 13px; color: var(--tx-1); margin-bottom: 12px; }
.mail-body-panel { margin-top: 8px; }
.mail-body-source, .mail-body-text {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg-el);
  border: 1px solid var(--bdr-faint);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--tx-1);
}
.mail-body-source { font-family: var(--font-mono); font-size: 12px; }
.mail-no-body { color: var(--tx-2); font-size: 13px; padding: 8px 0; }
.mail-error-block {
  background: var(--er-bg);
  border: 1px solid var(--er-bd);
  color: var(--er);
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  margin: 10px 0;
}

/* ── Fehler-/Fallback-Texte ──────────────────────────────────────────────── */
.error-msg, .error-fallback { color: var(--tx-2); padding: 16px; font-size: 13px; }
.error-fallback { color: var(--er); }

/* ── Sidebar-Status-Tags (DEV / BETA) — Learning #1223 ────────────────────── */
.nav-tag {
  margin-left: auto;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--bg-el);
  color: var(--tx-2);
  border: 1px solid var(--bdr-faint);
  flex: 0 0 auto;
}
.nav-tag.beta { background: var(--inf-bg); color: var(--inf); border-color: var(--inf-bd); }

/* Aktiven Bereich in den "Bereiche"-Jumps = gleicher Look wie deren Hover
   (bg-el-Fläche + leichter Border --bdr-faint + Icon --ac-1) + fett (#1220).
   Überschreibt die .nav-jumps-Basisregel (höhere Spezifität, lädt nach template.css). */
.nav-group.is-jumps .nav-item.nav-jumps.active {
  background: var(--bg-el);
  border-color: var(--bdr-faint);
  color: var(--tx-0);
  font-weight: 700;
}
.nav-group.is-jumps .nav-item.nav-jumps.active .nav-ico { color: var(--ac-1); }

/* Aktiver Menüpunkt (is-active) = exakt der Hover-Effekt (heller BG --ac-bg +
   dunkler Text) + zusätzlich fett (Daniel 2026-06-08). Überschreibt drei
   Theme-Effekte: das `background: transparent !important` (master-ai-template),
   den aktiven 3px-Links-Balken (::before in polish-sweep) und das translateX(2px)
   aufs aktive Icon (Icon soll NICHT verschoben werden). */
.nav-item.active {
  color: var(--tx-0);
  background: var(--ac-bg) !important;
  border-left-color: transparent;
  font-weight: 700;
}
.nav-item.active .nav-ico { color: var(--tx-2); transform: none; }
/* Den dicken 3px-Aktiv-Balken (polish-sweep) neutralisieren … */
.nav-item.active::before { display: none; }
/* … aber die normale 1px-Führungslinie der Gruppen-Items am aktiven Eintrag
   sichtbar lassen (wie bei Hover/normal) — sie war versehentlich mit-entfernt. */
.nav-group.has-label .nav-item.nav-sub.active::before {
  display: block;
  left: 22px; top: 0; bottom: 0;
  width: 1px;
  background: var(--bdr-faint);
  border-radius: 0;
  transform: none;
  opacity: 1;
}

/* Skeleton-Loading (Learning #1260) — Default für LoadingState in Blöcken/Tabellen. */
.mma-skel { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.mma-skel-bar {
  display: block; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, var(--bg-el) 25%, var(--bg-ov) 37%, var(--bg-el) 63%);
  background-size: 400% 100%;
  animation: mma-skel-shimmer 1.4s ease infinite;
}
@keyframes mma-skel-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .mma-skel-bar { animation: none; } }
/* Tabellenförmiges Skeleton: Zeilen haben dieselbe Höhe/Spalten wie echte Rows,
   aber sind nicht interaktiv → Laden ohne Layout-Shift (#1260). */
.tbl tbody tr.skel-row { cursor: default; }
.tbl tbody tr.skel-row:hover td { background: transparent; }
.tbl tbody tr.skel-row td .mma-skel-bar { height: 12px; }

/* ══ Learnings-Tabelle ═══════════════════════════════════════════════════════
   Status-Badges + Step-Liste im Detail-Overlay. */
.status-badge.ls-pending  { background: var(--bg-el);  color: var(--tx-1); }
.status-badge.ls-approved { background: var(--inf-bg); border-color: var(--inf-bd); color: var(--inf); }
.status-badge.ls-progress { background: var(--wa-bg);  border-color: var(--wa-bd);  color: var(--wa); }
.status-badge.ls-done     { background: var(--ok-bg);  border-color: var(--ok-bd);  color: var(--ok); }
.status-badge.ls-rejected { background: var(--er-bg);  border-color: var(--er-bd);  color: var(--er); }

.learn-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.learn-steps li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--tx-1); }
.learn-steps li.done { color: var(--tx-2); }
.learn-step-mark { flex: none; width: 18px; text-align: center; color: var(--tx-2); font-weight: 600; }
.learn-steps li.done .learn-step-mark { color: var(--ok); }
.learn-step-txt { flex: 1; min-width: 0; }

/* Detail-Overlay: Abschnitte (Eyebrow-Label + Inhalt) */
.learn-section { margin-bottom: 16px; }
.learn-section:last-child { margin-bottom: 0; }
.learn-section > .page-eyebrow { margin-bottom: 6px; }

/* Mini-Markdown-Ausgabe */
.md { font-size: 13.5px; line-height: 1.6; color: var(--tx-1); }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md-p { margin: 0 0 10px; }
.md-h { margin: 14px 0 6px; font-size: 14px; font-weight: 650; color: var(--tx-0); }
.md-list { margin: 0 0 10px; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.md-list li { margin: 0; }
.md-pre { margin: 0 0 10px; padding: 10px 12px; background: var(--bg-el); border: 1px solid var(--bdr-faint); border-radius: var(--r-sm); font-family: var(--font-mono); font-size: 12px; line-height: 1.5; overflow-x: auto; white-space: pre; }
.md-code { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-el); padding: 1px 5px; border-radius: 4px; }
.md-link { color: var(--ac-1); text-decoration: underline; }

/* Multiselect-Status-Filter (Button wie ein .gt-toolbar select + Popover) */
.gt-toolbar .ms-filter { position: relative; }
.gt-toolbar .ms-btn {
  appearance: none; font: inherit; font-size: 13px; cursor: pointer;
  padding: 6px 30px 6px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--bdr-faint); color: var(--tx-2);
  background: #fff no-repeat right 10px center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B0A898' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-size: 12px 12px;
  transition: border-color .12s ease, color .12s ease;
}
.gt-toolbar .ms-btn:hover {
  border-color: #cbcbcb; color: var(--tx-1);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8478' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
}
.gt-toolbar .ms-btn.ms-active {
  border-color: #cbcbcb; color: var(--tx-0);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8478' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
}
.ms-pop {
  position: absolute; z-index: 60; margin-top: 4px; min-width: 210px;
  background: #fff; border: 1px solid var(--bdr-def); border-radius: var(--r-sm);
  box-shadow: 0 6px 22px rgba(0,0,0,.13); padding: 6px; display: flex; flex-direction: column; gap: 1px;
}
.ms-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; color: var(--tx-1); }
.ms-opt:hover { background: var(--bg-ov); }
.ms-opt .ms-opt-l { flex: 1; }
.ms-opt .ms-count { color: var(--tx-2); font-size: 12px; }
.ms-clear { margin-top: 4px; padding: 6px 8px; border: none; border-top: 1px solid var(--bdr-faint); background: none; color: var(--tx-2); font-size: 12px; text-align: left; cursor: pointer; }
.ms-clear:hover { color: var(--tx-0); }

/* Sortierbarer Spaltenkopf (Klick auf Label) — Chevron wie im Dropdown:
   immer sichtbar, hellgrau; aktiv -> Text + Pfeil schwarz, Pfeil gedreht. */
.tbl thead th .th-sort {
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer; user-select: none; color: inherit;
}
.tbl thead th .th-sort-ico { color: #B0A898; transition: transform .12s ease, color .12s ease; flex: none; }
.tbl thead th .th-sort:hover { color: var(--tx-1); }
.tbl thead th .th-sort:hover .th-sort-ico { color: #8A8478; }
.tbl thead th .th-sort.is-sorted { color: var(--tx-0); }
.tbl thead th .th-sort.is-sorted .th-sort-ico { color: var(--tx-0); }
.tbl thead th .th-sort.asc .th-sort-ico { transform: rotate(180deg); }

/* Ausgegraute Plugin-Optionen ohne Treffer im gewählten Status */
.gt-toolbar select option:disabled { color: var(--tx-2); }

/* Back-Nav im Eyebrow-Slot (Learning #1257): wie .page-eyebrow, aber klickbar + Pfeil. */
.back-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
}
.back-eyebrow:hover { color: var(--tx-0); }

/* #1238 — Kundenübersicht (Tabelle-groß → Detailseite) */
.cust-filter {
  padding: 6px 10px;
  border: 1px solid var(--bdr-def);
  border-radius: var(--r-sm);
  background: var(--bg-base);
  color: var(--tx-0);
  font: inherit;
  font-size: 13px;
}
.cust-simple-list { margin: 0; padding-left: 18px; }
.cust-simple-list li { padding: 3px 0; }
.cust-agents { display: flex; flex-direction: column; gap: 2px; }
.cust-agent-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--bdr-faint);
  font-size: 13px;
}
.cust-agent-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tx-2); flex: none; }
.cust-agent-row .dot.ok { background: var(--ok); }
.cust-agent-row .dot.er { background: var(--er); }

/* Verzeichnis-Tab (Synology Master-AI-Ordner) */
.cust-dir-folder { margin-bottom: 22px; }
.cust-dir-h { margin-bottom: 10px; }
.cust-dir-file {
  border: 1px solid var(--bdr-faint);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--bg-base);
}
.cust-dir-file-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 2px;
}
.cust-dir-md { margin-top: 8px; }
.cust-dir-pre {
  margin: 8px 0 0;
  padding: 10px 12px;
  background: var(--bg-el);
  border-radius: var(--r-sm);
  font: 12px/1.5 var(--font-mono);
  color: var(--tx-1);
  white-space: pre-wrap;
  overflow-x: auto;
  max-height: 360px;
}