/* ═══════════════════════════════════════════════════════════════════════════
   Stil „Pip-Boy“ – Fallout 3: grüner Phosphor-Röhrenmonitor. Alles einfarbig grün auf Schwarz mit leichtem Nachleuchten,
   Scanlinien und Vignette über dem ganzen Bild, Auswahl invertiert (grüner Balken, schwarze Schrift), Reiter wie das Pip-Boy-Menü.
   Schrift VT323 (Röhrenpixel) für Titel, Share Tech Mono für Text. Immer dunkel. Basis: stil-gemeinsam.css.
   Animationen (Flackern) entfallen bei „Bewegung reduzieren“.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-app-stil="fallout"],
html[data-app-stil="fallout"][data-bs-theme="dark"] {
    --fo-gruen: #1aff80;
    --fo-hell: #b4ffd2;
    --fo-mittel: #14b85e;
    --fo-dunkel: #0b4a27;
    --fo-glimmen: 0 0 4px rgba(26, 255, 128, .55);

    --st-bg: #010803;
    --st-flaeche: #031109;
    --st-flaeche-2: #06190d;
    --st-eingabe: #020c05;
    --st-text: #8dffbe;
    --st-text-2: #45c27f;
    --st-titel: var(--fo-hell);
    --st-akzent: var(--fo-gruen);
    --st-akzent-2: #ffb641;
    --st-auf-akzent: #011a0b;
    --st-auf-akzent-2: #1c1100;
    --st-erfolg: #5cff9d;
    --st-gefahr: #ff6a4d;
    --st-warnung: #ffb641;
    --st-info: #6fe0ff;
    --st-auf-status: #011a0b;
    --st-auf-warnung: #1c1100;
    --st-rahmen: rgba(26, 255, 128, .35);
    --st-zebra: rgba(26, 255, 128, .04);
    --st-kopf: #010603;
    --st-kopf-2: #021008;
    --st-kopf-text: #8dffbe;
    --st-kopf-text-2: #3fae70;
    --st-kopf-linie: rgba(26, 255, 128, .35);
    --st-kopf-akzent: var(--fo-gruen);
    --st-radius: 0;
    --st-radius-gross: 0;
    --st-font-display: "VT323", "Share Tech Mono", ui-monospace, monospace;
    --st-font-text: "Share Tech Mono", ui-monospace, "Consolas", monospace;
    --st-titel-abstand: .1em;
    --st-titel-schrift: uppercase;
    --st-reiter-schrift: uppercase;
    --st-knopf-schrift: uppercase;
    --st-knopf-abstand: .08em;
    --st-maske: rgba(0, 6, 2, .78);
    --st-tabellenkopf: #052111;
    --st-tabellenkopf-text: var(--fo-hell);
    --st-knopf-hell: rgba(26, 255, 128, .08);
    --st-knopf-hell-text: var(--fo-hell);
    --st-schatten: 0 0 0 1px rgba(26, 255, 128, .18);
    --st-dialog-schatten: 0 0 0 1px var(--fo-gruen), 0 0 24px rgba(26, 255, 128, .25), 0 24px 60px rgba(0, 0, 0, .8);
    --st-fokus: 0 0 0 1px var(--fo-gruen), 0 0 10px rgba(26, 255, 128, .55);
    /* Bilder/Icons einfärben: Graustufen → grüner Phosphor */
    --st-icon-filter: grayscale(1) brightness(1.2) sepia(1) hue-rotate(85deg) saturate(4);
    --st-knopf-schatten: 0 0 8px rgba(26, 255, 128, .25);
    color-scheme: dark;
}

/* Grund: Phosphor-Schimmer in der Bildmitte, Schrift leuchtet nach */
html[data-app-stil="fallout"] :is(body, .rz-body.app-body) {
    background-color: var(--st-bg);
    background-image: radial-gradient(ellipse at 50% 45%, rgba(26, 255, 128, .07), transparent 70%);
    background-attachment: fixed;
    text-shadow: var(--fo-glimmen);
    font-size: 1.02em;
}

/* Röhre: Scanlinien, Vignette und leichtes Flackern über allem (klickt durch) */
html[data-app-stil="fallout"] body::after {
    content: "";
    position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse at 50% 50%, transparent 62%, rgba(0, 0, 0, .55) 100%);
    animation: fo-flackern 6s steps(1) infinite;
}
@keyframes fo-flackern { 0%, 100% { opacity: 1; } 47% { opacity: .86; } 48% { opacity: 1; } 83% { opacity: .92; } 84% { opacity: 1; } }

/* Auswahl invertiert wie im Pip-Boy */
html[data-app-stil="fallout"] ::selection { background: var(--fo-gruen); color: #011a0b; text-shadow: none; }

html[data-app-stil="fallout"] :is(h1, h2, h3, h4, h5, .rz-text-h3, .rz-text-h4, .rz-text-h5, .rz-text-h6, .dashboard-leiste-titel, .rz-dialog-title) {
    font-size: 1.25em;
    text-shadow: 0 0 6px rgba(26, 255, 128, .8);
}

/* ── Kopf: Pip-Boy-Menüleiste – Reiter als Wörter, aktiver Reiter in Klammerkasten, Linie darunter ── */
html[data-app-stil="fallout"] .rz-header { border-bottom: 1px solid var(--fo-gruen); box-shadow: 0 0 10px rgba(26, 255, 128, .3); }
html[data-app-stil="fallout"] .ribbon-menu .tabs-holder li {
    font-family: var(--st-font-display) !important;
    font-size: 1.25rem !important;
    letter-spacing: .12em;
    background: transparent !important;
    border: 1px solid transparent;
    border-bottom: 0;
}
html[data-app-stil="fallout"] .ribbon-menu .tabs-holder li:hover { color: var(--fo-hell) !important; }
html[data-app-stil="fallout"] .ribbon-menu .tabs-holder .active {
    border-color: var(--fo-gruen);
    background: var(--st-kopf-2) !important;
    color: var(--fo-hell) !important;
    box-shadow: 0 -2px 10px rgba(26, 255, 128, .25);
}
html[data-app-stil="fallout"] .ribbon-menu .content-holder { background: var(--st-kopf-2); border-top: 1px solid var(--fo-gruen); }
html[data-app-stil="fallout"] .ribbon-menu .content-holder .group { border: 1px solid rgba(26, 255, 128, .22); margin: 2px 3px; }
html[data-app-stil="fallout"] .ribbon-menu .content-holder .group .title { color: var(--fo-mittel); }
html[data-app-stil="fallout"] :is(.ribbon-button, .ribbon-tool-button, .ribbon-icon-button):hover:enabled {
    background: var(--fo-gruen) !important;
}
html[data-app-stil="fallout"] :is(.ribbon-button, .ribbon-tool-button, .ribbon-icon-button):hover:enabled :is(.caption, .rzi) { color: #011a0b !important; text-shadow: none; }
html[data-app-stil="fallout"] :is(.ribbon-button, .ribbon-tool-button, .ribbon-icon-button):hover:enabled img { filter: brightness(0); }

/* Horke: blinkender Cursor-Rahmen wie ein Terminal */
html[data-app-stil="fallout"] .ribbon-horke-bild { animation: fo-cursor 1.1s steps(1) infinite; }
@keyframes fo-cursor { 50% { box-shadow: 0 0 0 2px var(--fo-gruen), 0 0 10px rgba(26, 255, 128, .7); } }

/* ── Panels: dünner grüner Rahmen mit Eckwinkeln ── */
html[data-app-stil="fallout"] :is(.rz-card, .rz-fieldset) {
    border: 1px solid rgba(26, 255, 128, .3) !important;
    --fo-ecke: var(--fo-gruen);
    background-image:
        linear-gradient(var(--fo-ecke), var(--fo-ecke)), linear-gradient(var(--fo-ecke), var(--fo-ecke)),
        linear-gradient(var(--fo-ecke), var(--fo-ecke)), linear-gradient(var(--fo-ecke), var(--fo-ecke));
    background-size: 12px 2px, 2px 12px, 12px 2px, 2px 12px;
    background-position: top left, top left, bottom right, bottom right;
    background-repeat: no-repeat;
}
html[data-app-stil="fallout"] .rz-dialog { border: 1px solid var(--fo-gruen); }
html[data-app-stil="fallout"] :is(.rz-dialog-titlebar, .rz-dialog-side-titlebar) { background: var(--st-kopf-2); border-bottom: 1px solid var(--fo-gruen); }
html[data-app-stil="fallout"] .app-dialog-menue { background: var(--st-kopf-2); border-bottom: 1px dashed var(--fo-gruen); }

/* ── Knöpfe: grün umrandet, beim Überfahren invertiert ── */
html[data-app-stil="fallout"] :is(.rz-button:is(.rz-primary, .rz-secondary, .rz-success, .rz-danger, .rz-warning, .rz-info, .rz-dark, .rz-light, .rz-base):not(.rz-variant-text):not(.rz-variant-outlined),
    .btn:is(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-dark, .btn-light, .btn-default, .btn-outline-dark)) {
    background: color-mix(in srgb, var(--stk-bg) 10%, transparent) !important;
    color: color-mix(in srgb, var(--stk-bg) 75%, #ffffff) !important;
    border: 1px solid var(--stk-bg) !important;
    border-radius: 0 !important;
    box-shadow: 0 0 8px color-mix(in srgb, var(--stk-bg) 30%, transparent);
}
html[data-app-stil="fallout"] :is(.rz-button:not(.rz-variant-text):not(.rz-variant-outlined), .btn):hover:not(:disabled) {
    background: var(--stk-bg, var(--fo-gruen)) !important;
    color: #011a0b !important;
    text-shadow: none;
}
html[data-app-stil="fallout"] :is(.rz-button.rz-light, .rz-button.rz-base, .btn-light, .btn-default, .btn-outline-dark, .rz-button.rz-dark, .btn-dark) { --stk-bg: var(--fo-gruen); }

/* ── Tabellen: Zeile unter der Maus invertiert ── */
html[data-app-stil="fallout"] .rz-grid-table thead th { border-bottom: 1px solid var(--fo-gruen) !important; }
html[data-app-stil="fallout"] .rz-data-row:hover > td { background: rgba(26, 255, 128, .14) !important; }

/* ── Tab-Leiste unten ── */
html[data-app-stil="fallout"] .app-tab-leiste { border-top: 1px solid var(--fo-gruen); }
html[data-app-stil="fallout"] .app-tab { font-family: var(--st-font-text); }
html[data-app-stil="fallout"] .app-tab.aktiv { background: var(--fo-gruen) !important; color: #011a0b !important; text-shadow: none; }
html[data-app-stil="fallout"] .app-tab.aktiv :is(.app-tab-x, .app-tab-symbol) { color: #011a0b !important; }
html[data-app-stil="fallout"] .app-tab-neu { background: var(--st-akzent-2); color: #1c1100; text-shadow: none; }

/* ── Meldungen als Terminal-Kasten ── */
html[data-app-stil="fallout"] .rz-notification-item-wrapper {
    background: #021008 !important;
    border: 1px solid var(--st-meldung, var(--fo-gruen));
    box-shadow: 0 0 14px color-mix(in srgb, var(--st-meldung, var(--fo-gruen)) 35%, transparent);
}

/* Eingaben: schwarz mit grünem Rahmen, Cursor grün */
html[data-app-stil="fallout"] :is(.rz-textbox, .rz-textarea, .rz-numeric, .rz-dropdown, .rz-datepicker, .rz-autocomplete, input.form-control, textarea.form-control) {
    background-color: var(--st-eingabe) !important;
    color: var(--st-text) !important;
    border-color: rgba(26, 255, 128, .4) !important;
    caret-color: var(--fo-gruen);
}

@media (prefers-reduced-motion: reduce) {
    html[data-app-stil="fallout"] body::after,
    html[data-app-stil="fallout"] .ribbon-horke-bild { animation: none; }
}

/* ───────── Ladebildschirm: Terminal-Boot (index.html, vor dem Start der App) ───────── */
.app-laden-fallout { display: none; }
html[data-app-stil="fallout"] .app-laden-klassisch { display: none; }
html[data-app-stil="fallout"] .app-laden-fallout {
    position: relative;
    display: flex; flex-direction: column; justify-content: center;
    min-height: 100vh; min-height: 100dvh; padding: 2rem max(1rem, 8vw); box-sizing: border-box; overflow: hidden;
    background: radial-gradient(ellipse at 50% 45%, #052611, #010803 75%);
    color: #8dffbe; font-family: "VT323", "Share Tech Mono", monospace; font-size: clamp(1.05rem, 2.6vw, 1.5rem); line-height: 1.25;
    text-shadow: 0 0 5px rgba(26, 255, 128, .75);
}
html[data-app-stil="fallout"] .app-laden-fallout::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px),
                radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(0, 0, 0, .7) 100%);
    animation: fo-flackern 6s steps(1) infinite;
}
.fl-zeilen { white-space: pre-wrap; min-height: 12em; }
.fl-zeilen .fl-z { display: block; }
.fl-zeilen .fl-z.hell { color: #d4ffe5; }
.fl-cursor { display: inline-block; width: .6em; height: 1em; background: #1aff80; vertical-align: -.12em; margin-left: .1em; animation: fo-blink 1s steps(1) infinite; box-shadow: 0 0 6px #1aff80; }
.fl-balken { margin-top: 1.2em; letter-spacing: .05em; }
.fl-fuss { margin-top: .4em; color: #45c27f; }
@keyframes fo-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fl-cursor, html[data-app-stil="fallout"] .app-laden-fallout::after { animation: none; } }

/* ───────── Manometer als Geigerzähler: grünes Röhrenzifferblatt, Nachleuchten, „KRITISCH“ über 125 % ───────── */
html[data-app-stil="fallout"] .manometer svg { filter: drop-shadow(0 0 6px rgba(26, 255, 128, .35)); }
html[data-app-stil="fallout"] .manometer .fo-gehaeuse { fill: #0b0f0c; stroke: #2b3a30; stroke-width: 3; }
html[data-app-stil="fallout"] .manometer .fo-ring { fill: none; stroke: #1aff80; stroke-width: 1; opacity: .8; }
html[data-app-stil="fallout"] .manometer .fo-raster { fill: none; stroke: rgba(26, 255, 128, .12); stroke-width: .6; }
html[data-app-stil="fallout"] .manometer .fo-marke { fill: #3fae70; font: 6px "Share Tech Mono", monospace; letter-spacing: .2em; text-anchor: middle; }
html[data-app-stil="fallout"] .manometer .manometer-blatt { fill: #021008; }
html[data-app-stil="fallout"] .manometer .manometer-zone { opacity: 1; stroke: #1aff80 !important; }
html[data-app-stil="fallout"] .manometer .manometer-zone.z1 { opacity: .25; }
html[data-app-stil="fallout"] .manometer .manometer-zone.z2 { opacity: .5; }
html[data-app-stil="fallout"] .manometer .manometer-strich { stroke: #8dffbe; }
html[data-app-stil="fallout"] .manometer .manometer-zahl { fill: #8dffbe; font-family: "VT323", monospace; font-size: 12px; }
html[data-app-stil="fallout"] .manometer .manometer-titel { fill: #b4ffd2; font-family: "VT323", monospace; font-size: 10px; letter-spacing: .14em; }
html[data-app-stil="fallout"] .manometer .manometer-betrag { fill: #45c27f; font-family: "Share Tech Mono", monospace; }
html[data-app-stil="fallout"] .manometer .manometer-fenster { fill: #010803; stroke: #1aff80; }
html[data-app-stil="fallout"] .manometer .manometer-ziffern { fill: #b4ffd2; font-family: "VT323", monospace; font-size: 13px; filter: drop-shadow(0 0 3px #1aff80); }
html[data-app-stil="fallout"] .manometer .mano-nadel { fill: #b4ffd2; stroke: #1aff80; }
html[data-app-stil="fallout"] .manometer .mano-nadel-glanz { stroke: #ffffff; opacity: .4; }
html[data-app-stil="fallout"] .manometer .manometer-zeiger { filter: drop-shadow(0 0 4px #1aff80); }
html[data-app-stil="fallout"] .manometer .mano-nabe { fill: #021008; stroke: #1aff80; }
html[data-app-stil="fallout"] .manometer .mano-nabe-kern { fill: #1aff80; }
html[data-app-stil="fallout"] .manometer :is(.mano-glas, .manometer-riss) { display: none; }
html[data-app-stil="fallout"] .manometer .fo-scanlinien { fill: url(#fo-scan); pointer-events: none; }
html[data-app-stil="fallout"] .manometer.erreicht .manometer-erreicht-text { fill: #d4ffe5; font-family: "VT323", monospace; font-size: 11px; letter-spacing: .14em; }
html[data-app-stil="fallout"] .manometer.erreicht svg { animation: fo-puls 2s ease-in-out infinite; }
html[data-app-stil="fallout"] .manometer .fo-alarm { display: none; }
html[data-app-stil="fallout"] .manometer.gerissen .fo-alarm { display: inline; animation: fo-blink 1s steps(1) infinite; }
html[data-app-stil="fallout"] .manometer .fo-alarm-band { fill: #1aff80; }
html[data-app-stil="fallout"] .manometer .fo-alarm-text { fill: #011a0b; font: 12px "VT323", monospace; letter-spacing: .16em; text-anchor: middle; }
@keyframes fo-puls { 50% { filter: drop-shadow(0 0 14px rgba(26, 255, 128, .8)); } }
@media (prefers-reduced-motion: reduce) {
    html[data-app-stil="fallout"] .manometer.erreicht svg,
    html[data-app-stil="fallout"] .manometer.gerissen .fo-alarm { animation: none; }
}