/* ========================================================= PAROCHOS VCR – darkmode.css Applied when: [data-theme="dark"] on Toggled by: darkmode.js ←→ MainLayout.razor ========================================================= */ /* ── Global transitions ─────────────────────────────────── */ *, *::before, *::after { transition-property: background-color, border-color, color, box-shadow; transition-duration: 0.22s; transition-timing-function: ease; } /* ── Base ────────────────────────────────────────────────── */ [data-theme="dark"] body { background-color: #0f1117; color: #e2e8f0; } /* ── Blazor error UI ─────────────────────────────────────── */ [data-theme="dark"] #blazor-error-ui { background: #2d1515; color: #fca5a5; border-top: 1px solid rgba(239, 68, 68, 0.25); } /* ── Dialog class helpers ────────────────────────────────── */ [data-theme="dark"] .dlg-section { background: #252838 !important; border-color: rgba(255,255,255,0.08) !important; color: #e2e8f0 !important; } [data-theme="dark"] .dlg-section-title { color: var(--rz-primary) !important; } [data-theme="dark"] .dlg-toggle { background: #1e2130 !important; border-color: rgba(255,255,255,0.10) !important; } [data-theme="dark"] .dlg-toggle:hover { background: #252838 !important; border-color: rgba(255,255,255,0.18) !important; } [data-theme="dark"] .dlg-toggle.active { background: rgba(99,102,241,0.14) !important; border-color: var(--rz-primary) !important; box-shadow: 0 0 0 3px rgba(99,102,241,0.12) !important; } [data-theme="dark"] .dlg-toggle-icon { color: #64748b !important; } [data-theme="dark"] .dlg-toggle.active .dlg-toggle-icon { color: var(--rz-primary) !important; } [data-theme="dark"] .dlg-flag { background: #1e2130 !important; border-color: rgba(255,255,255,0.09) !important; } [data-theme="dark"] .dlg-flag:hover { background: #252838 !important; border-color: rgba(255,255,255,0.16) !important; } [data-theme="dark"] .dlg-color-row { background: #1e2130 !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .dlg-preview { background: #1e2130 !important; border-color: rgba(255,255,255,0.09) !important; } [data-theme="dark"] .dlg-preview-eyebrow { color: #64748b !important; } [data-theme="dark"] .dlg-footer { border-top-color: rgba(255,255,255,0.07) !important; } /* ── Color swatches ─────────────────────────────────────── */ [data-theme="dark"] .color-swatch, [data-theme="dark"] .color-swatch--lg { border-color: rgba(255,255,255,0.15) !important; } /* ── Detail row ─────────────────────────────────────────── */ [data-theme="dark"] .detail-row { border-bottom-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .detail-row-value--mono { background: #252838 !important; color: #e2e8f0 !important; } /* ── Department code badge ──────────────────────────────── */ [data-theme="dark"] .dept-code { background: rgba(99,102,241,0.14) !important; color: var(--rz-primary) !important; } /* ── Stat / dashboard cards ─────────────────────────────── */ [data-theme="dark"] .stat-card { background: #1a1d27 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .dashboard-card { background: #1a1d27 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .dashboard-catalog-row:hover { background: #252838 !important; } [data-theme="dark"] .printer-row--locked { background: rgba(245,158,11,0.10) !important; } /* ── Tab elements ───────────────────────────────────────── */ [data-theme="dark"] .tab-card { background: #1a1d27 !important; border-color: rgba(255,255,255,0.07) !important; color: #e2e8f0 !important; } [data-theme="dark"] .tab-divider { border-top-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .rz-dialog-titlebar { border-bottom-color: rgba(255,255,255,0.08) !important; background: #1e2130 !important; } /* ── Client rows ────────────────────────────────────────── */ [data-theme="dark"] .client-row-name:hover { background: rgba(99,102,241,0.12) !important; color: var(--rz-primary) !important; } [data-theme="dark"] .client-row-secondary { color: #64748b !important; } /* ── Misc page elements ─────────────────────────────────── */ [data-theme="dark"] .details-section { border-top-color: var(--rz-primary) !important; } [data-theme="dark"] .device-tabs .rz-tabview-nav { border-bottom-color: rgba(255,255,255,0.09) !important; } [data-theme="dark"] .app-card-interactive:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.45) !important; } [data-theme="dark"] .supervisor-avatar { border-color: rgba(255,255,255,0.10) !important; } [data-theme="dark"] .rz-datatable .rz-datatable-thead > tr > th { color: rgba(255,255,255,0.50) !important; background: #1e2130 !important; } [data-theme="dark"] .sidebar-section-label { color: #475569 !important; } [data-theme="dark"] .sidebar-version { color: #94a3b8 !important; } /* slate-400 */ [data-theme="dark"] .sidebar-copyright { color: #64748b !important; } /* slate-500 */ [data-theme="dark"] .sidebar-footer { border-top-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .sidebar-logo { border-bottom-color: rgba(255,255,255,0.07) !important; } /* ── CSV Import Dialog ──────────────────────────────────── */ [data-theme="dark"] .csv-step-dot { background: #2d3148; color: #64748b; } [data-theme="dark"] .csv-step-dot--active { background: var(--rz-primary); color: #fff; } [data-theme="dark"] .csv-step-connector { background: rgba(255,255,255,0.10); } [data-theme="dark"] .csv-step-label { color: #475569; } [data-theme="dark"] .csv-step-label--active { color: var(--rz-primary); } [data-theme="dark"] .csv-chip { background: rgba(99,102,241,0.18) !important; color: #a5b4fc !important; } [data-theme="dark"] .csv-hint { color: #475569 !important; } [data-theme="dark"] .csv-upload-area { background: #1e2130 !important; border-color: rgba(255,255,255,0.12) !important; } [data-theme="dark"] .csv-upload-icon { color: #475569 !important; } [data-theme="dark"] .csv-upload-text { color: #64748b !important; } [data-theme="dark"] .csv-preview-th { background: #1e2130 !important; color: #94a3b8 !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .csv-preview-td { border-color: rgba(255,255,255,0.07) !important; color: #e2e8f0 !important; } [data-theme="dark"] .csv-preview-tr--alt { background: #252838 !important; } [data-theme="dark"] .csv-empty-state { color: #475569 !important; } [data-theme="dark"] .csv-errors-list { background: rgba(120,53,15,0.25) !important; border-color: rgba(253,230,138,0.20) !important; } [data-theme="dark"] .csv-error-row { border-bottom-color: rgba(253,230,138,0.15) !important; } [data-theme="dark"] .csv-error-row-num { color: #fbbf24 !important; } [data-theme="dark"] .csv-error-row-col { color: #fcd34d !important; } [data-theme="dark"] .csv-error-row-msg { color: #fde68a !important; } /* ── CSV Alias Help Popup ──────────────────────────────────── */ [data-theme="dark"] .csv-alias-trigger { color: #475569; } [data-theme="dark"] .csv-alias-trigger:hover { color: var(--rz-primary); } [data-theme="dark"] .csv-alias-popup { background: #1e2130 !important; border-color: rgba(255,255,255,0.10) !important; box-shadow: 0 8px 28px rgba(0,0,0,0.45) !important; } [data-theme="dark"] .csv-alias-popup-header { color: #64748b !important; border-bottom-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .csv-alias-popup-close { color: #475569 !important; } [data-theme="dark"] .csv-alias-popup-close:hover { color: #e2e8f0 !important; } [data-theme="dark"] .csv-alias-col-label { color: #94a3b8 !important; } [data-theme="dark"] .csv-alias-note { color: #475569 !important; border-top-color: rgba(255,255,255,0.07) !important; } /* ═══════════════════════════════════════════════════════════ DARK MODE TOGGLE BUTTON ───────────────────────────────────────────────────────── 3-state cycle: System → Light → Dark → System The class reflects which icon is currently shown: .dm-toggle-btn--sun → light_mode icon (sun) .dm-toggle-btn--moon → dark_mode icon (moon) .dm-toggle-btn--auto → brightness_auto icon (sun/moon split) ═══════════════════════════════════════════════════════════ */ /* Sun icon: amber glow */ .dm-toggle-btn--sun .rzi, .dm-toggle-btn--sun .rz-button-icon { color: #fbbf24 !important; } /* Subtle rotation animation on the sun */ .dm-toggle-btn--sun .rzi { display: inline-block; transform: rotate(20deg); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } /* Moon icon: visible on light header */ .dm-toggle-btn--moon .rzi, .dm-toggle-btn--moon .rz-button-icon { color: rgba(0, 0, 0, 0.58) !important; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } /* Moon on dark header (before Blazor re-renders) */ [data-theme="dark"] .dm-toggle-btn--moon .rzi, [data-theme="dark"] .dm-toggle-btn--moon .rz-button-icon { color: rgba(255, 255, 255, 0.75) !important; } /* Auto (system) icon: sky-blue, signals "linked to OS" */ .dm-toggle-btn--auto .rzi, .dm-toggle-btn--auto .rz-button-icon { color: #0284c7 !important; /* sky-700 */ transition: color 0.2s ease !important; } .dm-toggle-btn--auto:hover .rzi, .dm-toggle-btn--auto:hover .rz-button-icon { color: #0369a1 !important; /* sky-800 */ } [data-theme="dark"] .dm-toggle-btn--auto .rzi, [data-theme="dark"] .dm-toggle-btn--auto .rz-button-icon { color: #7dd3fc !important; /* sky-300 */ } [data-theme="dark"] .dm-toggle-btn--auto:hover .rzi, [data-theme="dark"] .dm-toggle-btn--auto:hover .rz-button-icon { color: #bae6fd !important; /* sky-200 */ } /* ── Smooth page background transition ────────────────────── */ html { transition: background-color 0.22s ease; } [data-theme="dark"] html, [data-theme="dark"] body { color-scheme: dark; } [data-theme="light"] html, [data-theme="light"] body { color-scheme: light; }