/* kf-dark.css — Karst Firewall 5.0 dark-theme patch layer ───────────────────────────────────────────────────────────────────── Metronic 8 ships a complete dark theme keyed on [data-bs-theme="dark"] (set on by layouts/main.php). That already re-themes every standard Bootstrap / Metronic component: page background, cards, tables, forms, dropdowns, modals, buttons, the header and grayscale text utilities (.text-gray-900 → light, etc.). This file only patches the *custom* kf-* / page-specific surfaces that hardcode light colours and so would not flip on their own. Strategy: 1. Re-map each subsystem's scoped design tokens to dark values — one block re-themes a whole screen (pyrowise, fwi-history, cockpit, incident form, redesign screens, …). 2. Targeted overrides for the few structural surfaces that bypass those tokens with literal #fff / dark text. Loaded LAST in KfNavAsset so it wins over the page CSS it patches. Palette is aligned to Metronic's dark grayscale (--bs-gray-100 #1B1C22 surface, --bs-gray-200 #26272F border, --bs-gray-600/700 muted, --bs-gray-900 #F5F5F5 text). */ [data-bs-theme="dark"] { --kf-dark-surface: #1b1c22; /* elevated panel (= --bs-gray-100) */ --kf-dark-surface-alt: #22232b; /* secondary fill */ --kf-dark-border: #2b2d37; /* hairline (≈ --bs-gray-200) */ --kf-dark-ink: #e8eaef; /* primary text */ --kf-dark-ink-soft: #9a9cae; /* muted text (= --bs-gray-700) */ --kf-dark-ink-fade: #6b6e7c; /* faint text */ } /* ── PyroWISE simulation dashboard (.pw-dashboard) ──────────────────── */ [data-bs-theme="dark"] .pw-dashboard { --pw-surface: var(--kf-dark-surface); --pw-surface-alt: var(--kf-dark-surface-alt); --pw-border: var(--kf-dark-border); --pw-muted: var(--kf-dark-ink-soft); color: var(--kf-dark-ink); } /* Form controls + buttons that hardcode white fills / dark text. */ [data-bs-theme="dark"] .pw-dashboard input, [data-bs-theme="dark"] .pw-dashboard select, [data-bs-theme="dark"] .pw-dashboard textarea, [data-bs-theme="dark"] .pw-dashboard .pw-advanced-field input[type="number"], [data-bs-theme="dark"] .pw-dashboard .pw-historical-modal__filters input[type="search"] { background: var(--kf-dark-surface-alt); color: var(--kf-dark-ink); border-color: var(--kf-dark-border); } [data-bs-theme="dark"] .pw-dashboard .pw-advanced__plus, [data-bs-theme="dark"] .pw-dashboard .pw-location-search button, [data-bs-theme="dark"] .pw-dashboard .pw-fullscreen-btn, [data-bs-theme="dark"] .pw-dashboard .pw-overflow__menu, [data-bs-theme="dark"] .pw-dashboard .pw-run-metadata, [data-bs-theme="dark"] .pw-dashboard .pw-timeline, [data-bs-theme="dark"] .pw-dashboard .pw-sticky-header, [data-bs-theme="dark"] .pw-dashboard .pw-historical-modal__card, [data-bs-theme="dark"] .pw-bookmark-modal__card, [data-bs-theme="dark"] .pw-aoi-label { background: var(--kf-dark-surface); color: var(--kf-dark-ink); border-color: var(--kf-dark-border); } [data-bs-theme="dark"] .pw-dashboard .pw-head__metric-value, [data-bs-theme="dark"] .pw-kbd-overlay__card h2 { color: var(--kf-dark-ink); } /* ── FWI history heatmap (.fwi-page) — invert the ink scale ─────────── */ [data-bs-theme="dark"] .fwi-page { --fwi-ink-900: #f5f5f5; --fwi-ink-700: #d5d7df; --fwi-ink-500: #9a9cae; --fwi-ink-300: #6b6e7c; --fwi-ink-200: #2b2d37; --fwi-ink-100: #22232b; --fwi-ink-50: #1b1c22; --fwi-paper: #1b1c22; --fwi-grid: #2b2d37; --fwi-grid-strong: #363843; } /* ── Statistics/index FWI heatmap promoted into the cockpit ─────────── */ [data-bs-theme="dark"] .kf50-fwi-history { --kf-fwi-ink-900: #f5f5f5; --kf-fwi-ink-700: #d5d7df; --kf-fwi-ink-500: #9a9cae; --kf-fwi-ink-200: #2b2d37; --kf-fwi-ink-100: #22232b; --kf-fwi-ink-50: #1b1c22; } /* ── Cockpit (.kf50-cockpit) — paper/page/ink already track --bs-* ──── */ [data-bs-theme="dark"] .kf50-cockpit { --kf-c-ink-soft: var(--kf-dark-ink-soft); --kf-c-ink-fade: var(--kf-dark-ink-fade); --kf-c-line: rgba(255, 255, 255, 0.10); --kf-c-line-strong: rgba(255, 255, 255, 0.18); --kf-sk-bg: rgba(255, 255, 255, 0.06); --kf-sk-shine: rgba(255, 255, 255, 0.12); } /* Cockpit header chrome — the row of admin-only controls (language picker pill, Vista come role selector, Nascondi/Mostra "Widget senza dati" segmented control). All hardcoded light surfaces that vanished against the dark page; the operator reported "razni načini pogleda" (Vista come) unreadable. */ [data-bs-theme="dark"] .kf50-cockpit__lang { background: rgba(255, 255, 255, 0.08); } [data-bs-theme="dark"] .kf50-cockpit__lang-btn { color: var(--kf-dark-ink-soft); } [data-bs-theme="dark"] .kf50-cockpit__lang-btn:hover { color: var(--kf-dark-ink); background: rgba(255, 255, 255, 0.12); } [data-bs-theme="dark"] .kf50-cockpit__lang-btn.is-current { background: var(--kf-dark-surface-alt); color: var(--kf-dark-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); } [data-bs-theme="dark"] .kf50-cockpit__viewas { background: var(--kf-dark-surface); border-color: var(--kf-dark-border); } [data-bs-theme="dark"] .kf50-cockpit__viewas-label { color: var(--kf-dark-ink-soft); } [data-bs-theme="dark"] .kf50-cockpit__viewas-select { color: var(--kf-dark-ink); background: transparent; } /* Native