/* ============================================================
   Dark Mode Support & CSS Variable Fixes
   ============================================================ */

/* Add additional CSS variables to root for surface colors */
:root {
    --svs-bg-base: #f6f7f9;
    --svs-surface: #ffffff;
    --svs-surface-alt: #f9fafb;
}

/* Dark Mode Variables - Applied when .dark-mode class is set */
.dark-mode {
    --svs-bg-base: #1a1a1a;
    --svs-surface: #2d2d2d;
    --svs-surface-alt: #3a3a3a;
    --svs-text: #f5f5f5;
    --svs-text-secondary: #e0e0e0;
    --svs-muted: #b0b0b0;
    --svs-border: rgba(245, 245, 245, 0.15);
    --svs-line: rgba(245, 245, 245, 0.12);
    --svs-panel: rgba(45, 45, 45, 0.98);
    --svs-cream: #3a3a3a;
    --svs-bg-hover: rgba(245, 245, 245, 0.08);
    --svs-orange: #ff9d4d;
    --svs-orange-dark: #ffb366;
    --svs-orange-soft: #4a3018;
    --svs-blue: #7b9eff;
    --svs-blue-dark: #99b3ff;
    --svs-blue-soft: #2a3456;
    color-scheme: dark;
}

/* AGGRESSIVE: Override ALL backgrounds for dark mode */
.dark-mode {
    background: #1a1a1a !important;
}

.dark-mode html {
    background: #1a1a1a !important;
}

.dark-mode body {
    background: transparent;
    color: var(--svs-text);
}

.dark-mode a {
    color: var(--svs-blue);
}

.dark-mode a:hover {
    color: var(--svs-blue-dark);
}

/* Portal shell and main containers */
.dark-mode .portal-shell {
    background: #1a1a1a !important;
}

.dark-mode .portal-sidebar {
    background: #1a1c26 !important;
    border-right-color: rgba(255, 255, 255, 0.06);
}

.dark-mode .portal-content {
    background: #1a1a1a !important;
}

.dark-mode .portal-main {
    background: #1a1a1a !important;
}

/* TOP BAR / HEADER - CRITICAL DARK MODE OVERRIDE */
.dark-mode .portal-topbar {
    background: #0f0f0f !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(8px);
}

.dark-mode .topbar-copy {
    color: var(--svs-text);
}

.dark-mode .topbar-title {
    color: var(--svs-text) !important;
}

.dark-mode .topbar-kicker {
    color: var(--svs-muted) !important;
}

.dark-mode .topbar-meta {
    color: var(--svs-text);
}

.dark-mode .topbar-chip {
    background: var(--svs-surface) !important;
    color: var(--svs-text) !important;
    border-color: var(--svs-line) !important;
}

.dark-mode .topbar-chip-accent {
    background: rgba(255, 157, 77, 0.15) !important;
    color: var(--svs-orange) !important;
}

.dark-mode .topbar-theme-toggle {
    background: transparent !important;
    color: var(--svs-text) !important;
    border: 1px solid var(--svs-line) !important;
}

.dark-mode .topbar-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

.dark-mode .topbar-logout {
    background: var(--svs-surface) !important;
    color: var(--svs-text) !important;
    border-color: var(--svs-line) !important;
}

.dark-mode .topbar-logout:hover {
    background: var(--svs-surface-alt) !important;
}

/* SIDEBAR is altijd donker (basisstijl in MainLayout.razor.css) — geen dark-mode overrides nodig */

/* All panel-like elements */
.dark-mode .page-section,
.dark-mode .panel,
.dark-mode .preview-card,
.dark-mode .alert-box,
.dark-mode .content-card,
.dark-mode .metric-card,
.dark-mode .workflow-card,
.dark-mode .overlay-panel,
.dark-mode .overlay-modal {
    background: var(--svs-panel) !important;
    border-color: var(--svs-line) !important;
}

.dark-mode .overlay-panel-header,
.dark-mode .overlay-panel-actions {
    background: var(--svs-surface-alt) !important;
    border-color: var(--svs-line) !important;
}

.dark-mode .form-input,
.dark-mode .form-select,
.dark-mode input,
.dark-mode textarea {
    background: var(--svs-surface) !important;
    color: var(--svs-text) !important;
    border-color: var(--svs-line) !important;
}

.dark-mode .form-input::placeholder,
.dark-mode textarea::placeholder {
    color: var(--svs-muted) !important;
}

/* Ensure text is readable */
.dark-mode p,
.dark-mode span,
.dark-mode label,
.dark-mode li,
.dark-mode td,
.dark-mode th {
    color: var(--svs-text) !important;
}

.dark-mode .section-label,
.dark-mode .card-kicker,
.dark-mode .metric-label,
.dark-mode .metric-subtitle,
.dark-mode .muted-copy {
    color: var(--svs-muted) !important;
}

.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
    color: var(--svs-text) !important;
}

.dark-mode .workflow-card strong,
.dark-mode .metric-card strong,
.dark-mode .definition-grid dd,
.dark-mode .status-row-stack strong {
    color: var(--svs-blue-dark) !important;
}

/* Buttons */
.dark-mode .btn-secondary {
    background: var(--svs-blue-soft) !important;
    color: var(--svs-blue) !important;
    border-color: var(--svs-blue-soft) !important;
}

.dark-mode .btn-secondary:hover:not(:disabled) {
    background: var(--svs-blue-soft) !important;
    border-color: var(--svs-blue) !important;
}

.dark-mode .btn-danger {
    background: rgba(211, 47, 47, 0.15) !important;
    color: #ff6b6b !important;
    border-color: rgba(211, 47, 47, 0.3) !important;
}

.dark-mode .btn-danger:hover:not(:disabled) {
    background: rgba(211, 47, 47, 0.25) !important;
}

/* Tables */
.dark-mode .data-table thead th {
    background: var(--svs-surface-alt) !important;
    color: var(--svs-text) !important;
    border-color: var(--svs-line) !important;
}

.dark-mode .data-table td {
    color: var(--svs-text) !important;
    border-color: var(--svs-line) !important;
}

.dark-mode .data-table tr:hover {
    background: rgba(245, 245, 245, 0.03) !important;
}

/* Status rows and pills */
.dark-mode .status-row {
    background: var(--svs-surface) !important;
    border-color: var(--svs-line) !important;
}

.dark-mode .pill {
    background: var(--svs-blue-soft) !important;
    color: var(--svs-blue) !important;
}

.dark-mode .subtle-chip {
    background: var(--svs-surface-alt) !important;
    color: var(--svs-muted) !important;
}

/* Markdown */
.dark-mode .markdown-rendered {
    background: var(--svs-surface) !important;
    color: var(--svs-text) !important;
    border-color: var(--svs-line) !important;
}

.dark-mode .markdown-rendered h1,
.dark-mode .markdown-rendered h2,
.dark-mode .markdown-rendered h3,
.dark-mode .markdown-rendered h4,
.dark-mode .markdown-rendered h5,
.dark-mode .markdown-rendered h6 {
    color: var(--svs-text) !important;
}

.dark-mode .markdown-rendered code {
    background: var(--svs-surface-alt) !important;
    color: #a8d5ff !important;
    border-color: var(--svs-line) !important;
}

.dark-mode .markdown-rendered pre {
    background: var(--svs-surface-alt) !important;
    color: var(--svs-text) !important;
    border-color: var(--svs-line) !important;
}

/* Alert boxes */
.dark-mode .alert-box.error {
    background: rgba(211, 47, 47, 0.15) !important;
    color: #ff6b6b !important;
    border-color: rgba(211, 47, 47, 0.3) !important;
}

.dark-mode .alert-box.success {
    background: rgba(56, 142, 60, 0.15) !important;
    color: #66bb6a !important;
    border-color: rgba(56, 142, 60, 0.3) !important;
}

.dark-mode .alert-box.warning {
    background: rgba(251, 188, 5, 0.15) !important;
    color: #fbc02d !important;
    border-color: rgba(251, 188, 5, 0.3) !important;
}

.dark-mode .alert-box.info {
    background: rgba(2, 136, 209, 0.15) !important;
    color: #0288d1 !important;
    border-color: rgba(2, 136, 209, 0.3) !important;
}

/* Improved toggle/checkbox styling */
.dark-mode .form-toggle {
    --toggle-bg: var(--svs-surface);
    --toggle-border: var(--svs-line);
    --toggle-checked-bg: var(--svs-orange);
}

.dark-mode input[type="checkbox"],
.dark-mode input[type="radio"] {
    accent-color: var(--svs-orange) !important;
}

.dark-mode .toggle-indicator {
    background: var(--svs-orange) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Status dashboard cards - dark mode support */
.dark-mode .statuscake-board {
    background: var(--svs-panel) !important;
    border-color: var(--svs-line) !important;
}

.dark-mode .statuscake-metrics {
    display: flex;
    gap: 1rem;
}

.dark-mode .metric-card {
    background: var(--svs-surface) !important;
    border: 1px solid var(--svs-line) !important;
    color: var(--svs-text) !important;
    padding: 1rem;
    border-radius: var(--svs-radius-sm);
}

.dark-mode .metric-label {
    color: var(--svs-muted) !important;
}

.dark-mode .metric-subtitle {
    color: var(--svs-muted) !important;
}

.dark-mode .statuscake-card {
    background: var(--svs-surface) !important;
    border: 1px solid var(--svs-line) !important;
    color: var(--svs-text) !important;
}

.dark-mode .statuscake-card-head {
    border-bottom-color: var(--svs-line) !important;
}

.dark-mode .statuscake-card-head h4 {
    color: var(--svs-text) !important;
}

.dark-mode .statuscake-card-signals {
    color: var(--svs-text) !important;
}

.dark-mode .statuscake-signal-row {
    color: var(--svs-text) !important;
    border-bottom-color: var(--svs-line) !important;
}

.dark-mode .statuscake-card-foot {
    color: var(--svs-muted) !important;
    border-top-color: var(--svs-line) !important;
}

.dark-mode .status-pill {
    border-color: var(--svs-line) !important;
}

.dark-mode .status-pill-green {
    background: rgba(76, 175, 80, 0.2) !important;
    color: #81c784 !important;
}

.dark-mode .status-pill-red {
    background: rgba(244, 67, 54, 0.2) !important;
    color: #ef5350 !important;
}

.dark-mode .status-pill-blue {
    background: rgba(33, 150, 243, 0.2) !important;
    color: #64b5f6 !important;
}

.dark-mode .status-pill-orange {
    background: rgba(239, 123, 33, 0.22) !important;
    color: #ffb366 !important;
}

.dark-mode .status-pill-neutral {
    background: rgba(158, 158, 158, 0.2) !important;
    color: #b0b0b0 !important;
}

/* Status indicator dot */
.status-indicator {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    margin-right: 0.4rem;
    vertical-align: middle;
}

.status-indicator-green {
    background: #4caf50;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
}

.status-indicator-orange {
    background: var(--svs-orange);
    box-shadow: 0 0 8px rgba(239, 123, 33, 0.4);
}

.status-indicator-red {
    background: #f44336;
    box-shadow: 0 0 8px rgba(244, 67, 54, 0.4);
}

.status-indicator-neutral {
    background: #9e9e9e;
}

/* Status link (go to portal) */
.status-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.4rem;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 0.3rem;
    background: transparent;
    color: var(--svs-blue);
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
    border: 1px solid transparent;
}

.status-link:hover {
    background: rgba(123, 158, 255, 0.1);
    color: var(--svs-blue-dark);
    border-color: var(--svs-blue);
}

.dark-mode .status-link {
    color: var(--svs-blue) !important;
}

.dark-mode .status-link:hover {
    background: rgba(123, 158, 255, 0.15) !important;
    color: var(--svs-blue-dark) !important;
}

/* Portal mobile navigation toggle */
.dark-mode .mobile-nav-toggle {
    background: #151515 !important;
    color: var(--svs-text) !important;
    border-color: var(--svs-line) !important;
}

.dark-mode .mobile-nav-toggle:hover {
    background: #202020 !important;
}

/* Toastr-like notifications (SVS Toast) */
.svs-toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 4000;
    display: grid;
    gap: 0.55rem;
    width: min(92vw, 25rem);
    pointer-events: none;
}

.svs-toast {
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 140ms ease, transform 140ms ease;
    padding: 0.72rem 0.82rem;
    border-radius: 0.6rem;
    border: 1px solid transparent;
    font-size: 0.86rem;
    line-height: 1.35;
    box-shadow: 0 10px 24px rgba(20, 34, 71, 0.18);
    cursor: pointer;
}

.svs-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.svs-toast-success {
    color: #0e4c2b;
    background: #ecf9f1;
    border-color: #8dd8ac;
}

.svs-toast-info {
    color: #12305f;
    background: #eef5ff;
    border-color: #9ec0f5;
}

.svs-toast-warning {
    color: #66480a;
    background: #fff8e8;
    border-color: #f0cb72;
}

.svs-toast-error {
    color: #7a1e23;
    background: #ffeff0;
    border-color: #ef9da2;
}

.dark-mode .svs-toast {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.dark-mode .svs-toast-success {
    color: #d7f8e4;
    background: #1d3b2c;
    border-color: #2e8152;
}

.dark-mode .svs-toast-info {
    color: #d7e7ff;
    background: #1f314f;
    border-color: #3d6097;
}

.dark-mode .svs-toast-warning {
    color: #ffe9b5;
    background: #4b3a1d;
    border-color: #b1822e;
}

.dark-mode .svs-toast-error {
    color: #ffd7da;
    background: #4d2528;
    border-color: #b95c62;
}