/* ==========================================================================
   studio-glas.css — UpNrun Platform Theme Layer
   ==========================================================================

   Zwei Themes über html[data-theme]:
     - "glas" (Dark, DEFAULT — gilt auch ohne Attribut via :root-Fallback)
     - "tag"  (Hell)

   Einhängepunkt: app.py:60956 — ans Ende der _BASE_CSS-Kette anhängen
     _BASE_CSS = _FAVICON_LINK + _BASE_CSS + _BRAND_CSS + _TOOLTIP_TOGGLE_JS
                 + '<link rel="stylesheet" href="{BASE_PATH}/static/studio-glas.css?v={_STUDIO_GLAS_VER}">'
   Login-Seite (app.py:7588,7642) bindet _BASE_CSS NICHT ein — dort separat verlinken.

   Cache-Bust-Konvention (siehe _SKIN_VER, _SIDEMENU_VER, _SITES_TABLE_VER):
     _STUDIO_GLAS_VER = "studio-glas-1"  (bei jeder Änderung hochzählen)

   --------------------------------------------------------------------------
   TOKEN-TABELLE — STUDIO GLAS (Dark, data-theme="glas", DEFAULT)
   --------------------------------------------------------------------------
   --bg          #060707   fast schwarzer Raum
   --panel       rgba(16,18,18,.62)   (= --glass, Panels als dunkles Glas)
   --panel-2     rgba(10,12,12,.72)   dunklere Glas-Ebene (verschachtelte Panels)
   --glass       rgba(16,18,18,.62)   Alias für Glas-Fläche
   --line        rgba(255,255,255,.09)
   --text        #E6ECEC
   --muted       #8B9799
   --accent      #00D7FF   Cyan, kaltes Arbeitslicht
   --accent-rgb  0,215,255
   --accent-2    #FFAD22   Gold-Amber, warmes Bühnenlicht (Warnungen/Premium)
   --accent-2-rgb 255,173,34
   --up / --ok   #19E06F
   --down / --crit #FF4D66
   --warn        #FFAD22   (= --accent-2, Amber ist die einzige Warnfarbe)
   --blur        14px
   --dash-accent   var(--accent)
   --dash-bg       var(--bg)
   --dash-panel    var(--glass)
   --dash-tile     rgba(255,255,255,.04)
   --dash-line     var(--line)

   --------------------------------------------------------------------------
   TOKEN-TABELLE — TAGESLICHT (Hell, data-theme="tag")
   --------------------------------------------------------------------------
   --bg          #F2F5F7
   --panel       #FFFFFF   (weiße Karten, KEIN Glas-Blur)
   --panel-2     #F7FAFC
   --glass       #FFFFFF   (Alias, Blur wird im Hellen deaktiviert)
   --line        #DCE4EA
   --text        #0D2433
   --muted       #5B7284
   --accent      #0A7EA4   Petrol, seriös statt Neon
   --accent-rgb  10,126,164
   --accent-2    #B97D10   Amber (gedeckter fürs Helle)
   --accent-2-rgb 185,125,16
   --up / --ok   #178A50
   --down / --crit #C43D4B
   --warn        #B97D10
   --blur        0px       (im Hellen kein Glas-Blur — weiße Flächen)
   --dash-accent   var(--accent)
   --dash-bg       var(--bg)
   --dash-panel    #FFFFFF
   --dash-tile     #F7FAFC
   --dash-line     var(--line)

   Charakter Dark:  "Regiepult bei Showlicht" — Glas-Panels, dünne Fortschritts-
                     balken, Outline-Status-Pillen, dezente Akzent-Glows.
   Charakter Hell:  kühle Profi-Variante für Büro/Angebot/Kunde — weiße Karten,
                     Petrol-Akzent, sanfte Status-Zeilen-Tints, weiche Schatten.

   Harte Regeln: keine Emojis in generiertem UI-Text (betrifft dieses Stylesheet
   nicht direkt); alles läuft über CSS-Variablen (White-Label via branding.json
   überschreibt weiterhin --accent etc. VOR diesem File in der Kette, dieses
   File respektiert bereits gesetzte Werte wo sinnvoll, siehe Abschnitt 8);
   jspreadsheet-Grids behalten ihren hellen Excel-Body in BEIDEN Themes
   (Abschnitt 9).
   ========================================================================== */


/* ==========================================================================
   1. TOKENS — Dark "glas" ist der Fallback auf :root (kein data-theme nötig)
   ========================================================================== */

:root,
html[data-theme="glas"] {
  --bg: #060707;
  --panel: rgba(16, 18, 18, .62);
  --panel-2: rgba(10, 12, 12, .72);
  --glass: rgba(16, 18, 18, .62);
  --line: rgba(255, 255, 255, .09);
  --text: #E6ECEC;
  --muted: #8B9799;

  --accent: #00D7FF;
  --accent-rgb: 0, 215, 255;
  --accent-2: #FFAD22;
  --accent-2-rgb: 255, 173, 34;

  --up: #19E06F;
  --down: #FF4D66;
  --ok: #19E06F;
  --crit: #FF4D66;
  --warn: #FFAD22;

  --blur: 14px;

  /* Dashboard-eigenes Var-System (static/dashboard.css) mitziehen */
  --dash-accent: var(--accent);
  --dash-bg: var(--bg);
  --dash-panel: var(--glass);
  --dash-tile: rgba(255, 255, 255, .04);
  --dash-line: var(--line);
}

html[data-theme="tag"] {
  --bg: #F2F5F7;
  --panel: #FFFFFF;
  --panel-2: #F7FAFC;
  --glass: #FFFFFF;
  --line: #DCE4EA;
  --text: #0D2433;
  --muted: #5B7284;

  --accent: #0A7EA4;
  --accent-rgb: 10, 126, 164;
  --accent-2: #B97D10;
  --accent-2-rgb: 185, 125, 16;

  --up: #178A50;
  --down: #C43D4B;
  --ok: #178A50;
  --crit: #C43D4B;
  --warn: #B97D10;

  --blur: 0px;

  --dash-accent: var(--accent);
  --dash-bg: var(--bg);
  --dash-panel: #FFFFFF;
  --dash-tile: #F7FAFC;
  --dash-line: var(--line);
}

/* Sanfter Theme-Wechsel am body (kein Ruckeln beim Umschalten) */
body {
  transition: background-color .12s ease, color .12s ease;
}

@media (prefers-reduced-motion: reduce) {
  body,
  .theme-toggle,
  .status-pill,
  .btn {
    transition: none !important;
  }
}


/* ==========================================================================
   2. GRUNDFLÄCHEN
   ========================================================================== */

html[data-theme="glas"] body,
:root body {
  background: var(--bg);
  color: var(--text);
}

html[data-theme="tag"] body {
  background: var(--bg);
  color: var(--text);
}


/* ==========================================================================
   3. GLAS-PANELS (Dark) — Fallback ohne backdrop-filter-Support
   ========================================================================== */

html[data-theme="glas"] .panel,
:root .panel {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  html[data-theme="glas"] .panel,
  :root .panel {
    backdrop-filter: blur(var(--blur)) saturate(1.1);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(1.1);
  }
}

/* Kein Blur-Support (alte WebViews/Browser): solide dunkle Fläche statt Transparenz */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme="glas"] .panel,
  :root .panel {
    background: #101212;
  }
}

html[data-theme="glas"] .panel-head,
:root .panel-head {
  border-bottom: 1px solid var(--line);
  color: var(--text);
}

/* Hell: weiße Karten, kein Blur, weicher Schatten statt Glow */
html[data-theme="tag"] .panel {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(13, 36, 51, .05), 0 4px 16px rgba(13, 36, 51, .06);
}

html[data-theme="tag"] .panel-head {
  border-bottom: 1px solid var(--line);
  color: var(--text);
}

/* count-badge: harte Grün-Farbe (app.py:60587-60592) auf --ok ziehen */
.count-badge {
  background: rgba(var(--accent-rgb), .12);
  color: var(--ok);
  border: 1px solid rgba(25, 224, 111, .3);
}

html[data-theme="glas"] .count-badge,
:root .count-badge {
  background: rgba(25, 224, 111, .10);
}

html[data-theme="tag"] .count-badge {
  background: rgba(23, 138, 80, .08);
  border-color: rgba(23, 138, 80, .28);
}


/* ==========================================================================
   4. AKZENT-GLOWS (nur Dark, nur auf Akzent-Elementen — dezent)
   ========================================================================== */

html[data-theme="glas"] .btn.pri,
html[data-theme="glas"] .btn-primary,
:root .btn.pri,
:root .btn-primary {
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .35), 0 0 18px rgba(var(--accent-rgb), .18);
}

html[data-theme="glas"] .status-pill.warn,
:root .status-pill.warn {
  box-shadow: 0 0 12px rgba(var(--accent-2-rgb), .14);
}

/* Hell: keine Glows, nur Border/Schatten */
html[data-theme="tag"] .btn.pri,
html[data-theme="tag"] .btn-primary {
  box-shadow: 0 1px 3px rgba(10, 126, 164, .25);
}

html[data-theme="tag"] .status-pill.warn {
  box-shadow: none;
}


/* ==========================================================================
   5. BUTTONS — harte Text-auf-Akzent-Farben korrigieren
   ========================================================================== */

/* app.py:60563-60569 .btn / .btn.ghost, app.py:3670-3671 .btn-primary,
   app.py:68543 .btn.pri — alle hatten #04101a/#19b8e0 hart kodiert */
.btn {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.btn.ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
}

.btn.pri,
.btn-primary {
  background: var(--accent);
  border: 1px solid var(--accent);
}

/* Kontrast-Text auf Akzentfläche: im Dark dunkler Text auf hellem Cyan,
   im Hell weißer Text auf Petrol — beides ausreichend Kontrast statt hart #04101a */
html[data-theme="glas"] .btn.pri,
html[data-theme="glas"] .btn-primary,
:root .btn.pri,
:root .btn-primary {
  color: #04141A;
}

html[data-theme="tag"] .btn.pri,
html[data-theme="tag"] .btn-primary {
  color: #FFFFFF;
}

.btn.pri:hover,
.btn-primary:hover {
  filter: brightness(1.08);
}


/* ==========================================================================
   6. STATUS-PILLEN
   ========================================================================== */

/* app.py:60551-60557 .status-pill.on/.off/.loading sind bereits var-basiert (--up/--down/--muted) */
.status-pill {
  border: 1px solid var(--line);
  background: transparent;
}

.status-pill.on {
  color: var(--ok);
  border-color: rgba(25, 224, 111, .4);
}

html[data-theme="tag"] .status-pill.on {
  border-color: rgba(23, 138, 80, .4);
}

.status-pill.off {
  color: var(--crit);
  border-color: rgba(255, 77, 102, .4);
}

html[data-theme="tag"] .status-pill.off {
  border-color: rgba(196, 61, 75, .4);
}

.status-pill.loading {
  color: var(--muted);
  border-color: var(--line);
}

/* app.py:15088 .status-pill.warn hatte #F5B041 hart kodiert -> auf --accent-2/--warn ziehen */
.status-pill.warn {
  color: var(--accent-2) !important;
  border-color: rgba(var(--accent-2-rgb), .4) !important;
}


/* ==========================================================================
   7. RAIL / TOPBAR / SIDEMENU — harte dunkle Gradients + Hex überschreiben
   ========================================================================== */

/* static/portfo-leo-skin.css:92-105 .pl-skin-rail — harter linear-gradient */
html[data-theme="glas"] .pl-skin-rail,
:root .pl-skin-rail {
  background: linear-gradient(180deg, rgba(18, 20, 20, .92) 0%, rgba(6, 7, 7, .96) 100%) !important;
  border-color: var(--line) !important;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  html[data-theme="glas"] .pl-skin-rail,
  :root .pl-skin-rail {
    backdrop-filter: blur(var(--blur)) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(var(--blur)) saturate(1.1) !important;
  }
}

html[data-theme="tag"] .pl-skin-rail {
  background: #FFFFFF !important;
  border-color: var(--line) !important;
  box-shadow: 0 1px 0 rgba(13, 36, 51, .06) !important;
}

/* static/portfo-leo-skin.css:66-74 header.topbar — harter Gradient + !important-Kaskade */
html[data-theme="glas"] body.pl-skin header.topbar,
:root body.pl-skin header.topbar {
  background: linear-gradient(180deg, rgba(16, 18, 18, .90), rgba(6, 7, 7, .94)) !important;
  border-color: var(--line) !important;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  html[data-theme="glas"] body.pl-skin header.topbar,
  :root body.pl-skin header.topbar {
    backdrop-filter: blur(var(--blur)) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(var(--blur)) saturate(1.1) !important;
  }
}

html[data-theme="tag"] body.pl-skin header.topbar {
  background: #FFFFFF !important;
  border-color: var(--line) !important;
  box-shadow: 0 1px 3px rgba(13, 36, 51, .06) !important;
}

/* app.py:60523-60525 header (ungeskinnt, Basis) — hartes rgba(7,24,36,.85) */
html[data-theme="glas"] header,
:root header {
  background: var(--panel) !important;
  border-color: var(--line) !important;
}

html[data-theme="tag"] header {
  background: var(--panel) !important;
  border-color: var(--line) !important;
}

/* .pl-rail-brand / .pl-rail-logo — teils var, teils harte Glow-Werte */
html[data-theme="glas"] .pl-rail-brand,
:root .pl-rail-brand {
  color: var(--text);
}

html[data-theme="tag"] .pl-rail-brand {
  color: var(--text);
}

html[data-theme="glas"] .pl-rail-logo,
:root .pl-rail-logo {
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .35));
}

html[data-theme="tag"] .pl-rail-logo {
  filter: none;
}

/* static/site-sidemenu.css — komplett hart kodierte dunkle Hex-Werte (#0d1622,
   #070b12, #04070c, #0a121c etc.), NICHT variablenbasiert. Größtes Bruchrisiko
   im Hell-Theme -> gezielte Overrides je Selektor. */
html[data-theme="tag"] .site-sidemenu {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

html[data-theme="tag"] .site-sidemenu .sm-search {
  background: var(--panel-2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

html[data-theme="tag"] .site-sidemenu a,
html[data-theme="tag"] .site-sidemenu .sm-item {
  color: var(--text) !important;
}

html[data-theme="tag"] .site-sidemenu a:hover,
html[data-theme="tag"] .site-sidemenu .sm-item:hover {
  background: rgba(var(--accent-rgb), .08) !important;
}

html[data-theme="tag"] .site-sidemenu .sm-item.active {
  background: rgba(var(--accent-rgb), .12) !important;
  color: var(--accent) !important;
}

/* Dark: Sidemenu bekommt denselben Glas-Look wie andere Panels statt der
   ursprünglichen Solid-Dunkel-Hex, damit sie zum Studio-Glas-Look passt */
html[data-theme="glas"] .site-sidemenu,
:root .site-sidemenu {
  background: var(--panel) !important;
  border-color: var(--line) !important;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  html[data-theme="glas"] .site-sidemenu,
  :root .site-sidemenu {
    backdrop-filter: blur(var(--blur)) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(var(--blur)) saturate(1.1) !important;
  }
}

html[data-theme="glas"] .site-sidemenu .sm-search,
:root .site-sidemenu .sm-search {
  background: var(--panel-2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}


/* ==========================================================================
   8. TABELLEN — sites-table.css ist größtenteils sauber, 3 harte Treffer fixen
   ========================================================================== */

/* static/sites-table.css:186 color:#06121A — hart auf Text-auf-Akzent-Fläche */
html[data-theme="glas"] .sites-table [class*="ut-badge"],
:root .sites-table [class*="ut-badge"] {
  color: #04141A;
}

html[data-theme="tag"] .sites-table [class*="ut-badge"] {
  color: #FFFFFF;
}

/* static/sites-table.css:210 .ut-role-view hartes #8CA9B8 -> --muted */
.sites-table .ut-role-view {
  color: var(--muted) !important;
}

/* static/sites-table.css:273 .ut-kpi-warn hartes #FFC857 -> --accent-2/--warn */
.sites-table .ut-kpi-warn {
  color: var(--accent-2) !important;
}

/* Status-Zeilen-Tints in Tabellen (generisches Muster, falls tr.warn/tr.crit
   in einer Seite verwendet werden — Hell: zartes Amber/Rot, Dark: dezenter Tint) */
html[data-theme="tag"] .sites-table tr.warn,
html[data-theme="tag"] tr.row-warn {
  background: rgba(var(--accent-2-rgb), .07);
}

html[data-theme="tag"] .sites-table tr.crit,
html[data-theme="tag"] tr.row-crit,
html[data-theme="tag"] .sites-table tr.offline,
html[data-theme="tag"] tr.row-offline {
  background: rgba(196, 61, 75, .06);
}

html[data-theme="glas"] .sites-table tr.warn,
:root .sites-table tr.warn,
html[data-theme="glas"] tr.row-warn,
:root tr.row-warn {
  background: rgba(var(--accent-2-rgb), .08);
}

html[data-theme="glas"] .sites-table tr.crit,
:root .sites-table tr.crit,
html[data-theme="glas"] tr.row-crit,
:root tr.row-crit,
html[data-theme="glas"] .sites-table tr.offline,
:root .sites-table tr.offline,
html[data-theme="glas"] tr.row-offline,
:root tr.row-offline {
  background: rgba(255, 77, 102, .08);
}

.sites-table tbody tr {
  border-color: var(--line);
}


/* ==========================================================================
   9. DASHBOARD-WIDGETS — eigenes --dash-* System (static/dashboard.css)
   ========================================================================== */

/* --dash-* wird bereits in Abschnitt 1 pro Theme gesetzt (Zeile ~110/144-
   Referenzen: .dw-lock, .dw-frame-title). Zusätzlich die zwei hart kodierten
   Hex-Ausreisser (#ffd27a, #8fe39a) auf Tokens ziehen. */
.dw-lock {
  color: var(--accent-2) !important;
}

.dw-frame-title {
  color: var(--text) !important;
}

/* generischer "erfolg"-Text/Icon in Dashboard-Widgets, ehemals #8fe39a hart */
.dw-ok,
.dw-frame-title.ok {
  color: var(--ok) !important;
}

html[data-theme="tag"] .dashboard,
html[data-theme="tag"] [class*="dash-"] {
  background: var(--dash-bg);
}


/* ==========================================================================
   10. FORTSCHRITTSBALKEN (KPI-Karten) — dünn, ok=grün, accent=cyan/petrol
   ========================================================================== */

.kpi-bar,
.progress-bar {
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}

.kpi-bar > span,
.progress-bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
}

.kpi-bar.ok > span,
.progress-bar.ok > span {
  background: var(--ok);
}

.kpi-bar.warn > span,
.progress-bar.warn > span {
  background: var(--accent-2);
}

.kpi-bar.crit > span,
.progress-bar.crit > span {
  background: var(--crit);
}


/* ==========================================================================
   11. ALARM-KARTE — Amber-Border im Dark, dezentes Amber im Hell
   ========================================================================== */

.alarm-card {
  border: 1px solid rgba(var(--accent-2-rgb), .4);
  background: var(--panel);
}

html[data-theme="glas"] .alarm-card,
:root .alarm-card {
  box-shadow: 0 0 16px rgba(var(--accent-2-rgb), .12);
}

html[data-theme="tag"] .alarm-card {
  background: #FFF9EF;
  box-shadow: none;
}


/* ==========================================================================
   12. INPUTS — bereits var-basiert (app.py:60882-60887), nur Theme-Feinschliff
   ========================================================================== */

input,
textarea,
select {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
}


/* ==========================================================================
   13. TABS — bereits var-basiert (app.py:60572-60584), sauber, nur bestätigen
   ========================================================================== */

.tab.active {
  background: var(--panel-2);
  color: var(--accent);
  border-color: var(--accent);
}


/* ==========================================================================
   14. JSPREADSHEET-GRIDS — heller Excel-Body bleibt in BEIDEN Themes
   ========================================================================== */

/* #pane-ipplan #ipg-sheet, #pane-dmx #dxg-sheet, #cable-list-grid:
   Inhalt NICHT umfärben. Nur Rahmen/Schatten der umgebenden Panel-Chrome
   an das Theme angleichen, damit das Grid nicht wie ein Fremdkörper wirkt. */
#pane-ipplan,
#pane-dmx {
  border: 1px solid var(--line);
  background: var(--panel);
}

#ipg-sheet,
#dxg-sheet,
#cable-list-grid {
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

html[data-theme="tag"] #ipg-sheet,
html[data-theme="tag"] #dxg-sheet,
html[data-theme="tag"] #cable-list-grid {
  box-shadow: 0 1px 3px rgba(13, 36, 51, .08);
}

/* jspreadsheet interne Tabellenzellen/Header explizit unangetastet lassen
   (kein Farb-Override auf .jss_container, .jexcel, td, th innerhalb der Grids) */


/* ==========================================================================
   15. THEME-TOGGLE-BUTTON
   ========================================================================== */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}

.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.theme-toggle:active {
  filter: brightness(.95);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

html[data-theme="glas"] .theme-toggle,
:root .theme-toggle {
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0);
}

html[data-theme="glas"] .theme-toggle:hover,
:root .theme-toggle:hover {
  box-shadow: 0 0 10px rgba(var(--accent-rgb), .18);
}

html[data-theme="tag"] .theme-toggle:hover {
  box-shadow: 0 1px 3px rgba(10, 126, 164, .18);
}


/* ==========================================================================
   16. SCROLLBARS (dezent, thematisch passend)
   ========================================================================== */

html[data-theme="glas"] ::-webkit-scrollbar,
:root ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html[data-theme="glas"] ::-webkit-scrollbar-thumb,
:root ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .14);
  border-radius: 6px;
}

html[data-theme="tag"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html[data-theme="tag"] ::-webkit-scrollbar-thumb {
  background: rgba(13, 36, 51, .18);
  border-radius: 6px;
}
/* --- Theme-Toggle: Icon-Sichtbarkeit (Sonne im Dark = "wechsle zu hell", Mond im Hell) --- */
html[data-theme="tag"] .pl-theme-icon-sun{display:none}
html:not([data-theme="tag"]) .pl-theme-icon-moon{display:none}
/* Kompakter Icon-Knopf. Vorher: width:100% + Textbeschriftung -- das stammte
   aus der senkrechten Rail, in der waagerechten Top-Nav riss es den Knopf auf
   die volle Spaltenbreite auf (Phil 29.07.: "riiiesig"). Feste quadratische
   Flaeche, damit er neben den Nav-Punkten nicht aus der Reihe faellt; der Text
   lebt weiter in aria-label und title, geht also nicht verloren. */
.pl-theme-toggle{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;flex:0 0 auto;padding:0;margin:0 0 0 4px;
  background:transparent;border:1px solid var(--line,rgba(255,255,255,.09));color:var(--muted,#8B9799);
  border-radius:8px;cursor:pointer;font:inherit;line-height:0}
.pl-theme-toggle svg{width:16px;height:16px;display:block}
.pl-theme-toggle:hover{color:var(--accent,#00D7FF);border-color:var(--accent,#00D7FF)}

/* ==========================================================================
   TAGESLICHT — HARD OVERRIDES (gegen !important-Dunkel-Gradients im
   portfo-leo-skin + hart kodierte Flächen). Attribut-Selektor + !important
   gewinnt zuverlässig; Variablen hier KOMPLETT gesetzt (inkl. --bg, --pm-*).
   ========================================================================== */
html[data-theme="tag"]{
  --bg:#F2F5F7 !important; --panel:#FFFFFF !important; --panel-2:#FFFFFF !important;
  --line:#DCE4EA !important; --accent:#0A7EA4 !important; --accent-rgb:10,126,164 !important;
  --text:#0D2433 !important; --muted:#5B7284 !important;
  --up:#178A50 !important; --down:#C43D4B !important; --warn:#B97D10 !important; --accent-2:#B97D10 !important;
  --glass:#FFFFFF !important;
  --pm-bg:#F2F5F7 !important; --pm-surface:#FFFFFF !important; --pm-panel:#FFFFFF !important;
  --pm-panel-2:#F7FAFC !important; --pm-border:#DCE4EA !important; --pm-border-soft:#E7EDF2 !important;
  --pm-text:#0D2433 !important; --pm-muted:#5B7284 !important; --pm-panel-rgb:255,255,255 !important;
  --pm-cyan:#0A7EA4 !important; --pm-green:#178A50 !important; --pm-amber:#B97D10 !important; --pm-red:#C43D4B !important;
  --pm-shadow:0 10px 34px rgba(13,36,51,.10) !important;
  --pl-surface-alpha:1 !important; --pl-surface-alpha-strong:1 !important;
  --upn-accent:#0A7EA4 !important; --upn-accent-rgb:10,126,164 !important;
  --dash-bg:#F2F5F7 !important; --dash-panel:#FFFFFF !important; --dash-tile:#FFFFFF !important;
  --dash-line:#DCE4EA !important; --dash-accent:#0A7EA4 !important; --dash-text:#0D2433 !important; --dash-muted:#5B7284 !important;
}
html[data-theme="tag"] body,
html[data-theme="tag"] body.pl-skin{
  background:#F2F5F7 !important; background-image:none !important; color:#0D2433 !important;
}
html[data-theme="tag"] .panel,
html[data-theme="tag"] body.pl-skin .panel{
  background:#FFFFFF !important; border-color:#DCE4EA !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  box-shadow:0 10px 34px rgba(13,36,51,.08) !important; color:#0D2433 !important;
}
html[data-theme="tag"] .panel-head{border-color:#DCE4EA !important}
html[data-theme="tag"] h1,html[data-theme="tag"] h2,html[data-theme="tag"] h3{color:#0D2433 !important}
html[data-theme="tag"] body.pl-skin header.topbar,
html[data-theme="tag"] header.topbar,
html[data-theme="tag"] header{
  background:#FFFFFF !important; background-image:none !important;
  border-color:#DCE4EA !important; color:#0D2433 !important;
}
html[data-theme="tag"] .pl-skin-rail{
  background:#FFFFFF !important; background-image:none !important;
  border-color:#DCE4EA !important; color:#0D2433 !important;
}
html[data-theme="tag"] .pl-rail-item{color:#5B7284 !important}
html[data-theme="tag"] .pl-rail-item:hover{background:#F2F5F7 !important;color:#0D2433 !important}
html[data-theme="tag"] .pl-rail-item.is-current{background:rgba(10,126,164,.12) !important;color:#0A7EA4 !important}
html[data-theme="tag"] .pl-rail-brand{color:#0D2433 !important}
html[data-theme="tag"] .site-sidemenu{background:#FFFFFF !important;border-color:#DCE4EA !important;color:#0D2433 !important}
html[data-theme="tag"] .site-sidemenu .sm-item{color:#0D2433 !important}
html[data-theme="tag"] .site-sidemenu .sm-item:hover{background:#F2F5F7 !important}
html[data-theme="tag"] .btn{background:#FFFFFF !important;border-color:#DCE4EA !important;color:#0D2433 !important}
html[data-theme="tag"] .btn:hover{border-color:#0A7EA4 !important}
html[data-theme="tag"] .btn.pri{background:#0A7EA4 !important;color:#FFFFFF !important;border:0 !important}
html[data-theme="tag"] .btn-primary{background:#0A7EA4 !important;color:#FFFFFF !important}
html[data-theme="tag"] input,html[data-theme="tag"] select,html[data-theme="tag"] textarea{
  background:#FFFFFF !important;border-color:#DCE4EA !important;color:#0D2433 !important}
html[data-theme="tag"] table thead th,html[data-theme="tag"] table thead td{color:#5B7284 !important}
html[data-theme="tag"] td,html[data-theme="tag"] th{border-color:#E7EDF2 !important}
/* Status-Pillen: kräftige, seriöse Töne auf hell */
html[data-theme="tag"] .status-pill.on{color:#178A50 !important;border-color:rgba(23,138,80,.5) !important;background:rgba(23,138,80,.08) !important}
html[data-theme="tag"] .status-pill.warn{color:#B97D10 !important;border-color:rgba(185,125,16,.5) !important;background:rgba(185,125,16,.08) !important}
html[data-theme="tag"] .status-pill.off{color:#C43D4B !important;border-color:rgba(196,61,75,.5) !important;background:rgba(196,61,75,.08) !important}
/* Excel-Grids bleiben unangetastet (heller Body sowieso) — nur Rahmen weich */
html[data-theme="tag"] #ipg-sheet,html[data-theme="tag"] #dxg-sheet{border-color:#DCE4EA !important;box-shadow:0 8px 26px rgba(13,36,51,.08) !important}

/* Tageslicht-Feinschliff: dunkle Hover-Reste + Skin-Glows neutralisieren */
html[data-theme="tag"] table:not(.jexcel) tbody tr:hover,
html[data-theme="tag"] table:not(.jexcel) tbody tr:hover td{background:rgba(10,126,164,.07) !important}
html[data-theme="tag"] table:not(.jexcel) tbody tr{background:transparent !important}
html[data-theme="tag"] .sites-table tbody tr:nth-child(even) td{background:#FBFCFD !important}
html[data-theme="tag"] .pl-rail-item,
html[data-theme="tag"] .pl-rail-brand,
html[data-theme="tag"] header.topbar *{text-shadow:none !important}
html[data-theme="tag"] .pl-rail-item.is-current,
html[data-theme="tag"] .pl-rail-item.is-current *{color:#0A7EA4 !important}