/* * dark-theme.css * Global dark mode for Payment Voucher System. * Applied when has class "dark-mode". * Mirrors the dashboard dark palette throughout all pages. */ /* ── Design tokens ─────────────────────────────────────────── */ html.dark-mode { --dm-bg: #0f1117; --dm-surface: #161b26; --dm-surface-2: #1c2233; --dm-surface-3: #222840; --dm-border: rgba(255,255,255,0.07); --dm-border-2: rgba(255,255,255,0.12); --dm-text: #8b93a3; --dm-text-strong: #dde1ea; --dm-text-muted: #5a6375; --dm-accent: #4f7cff; --dm-accent-soft: rgba(79,124,255,0.13); --dm-success: #10b981; --dm-warning: #f59e0b; --dm-danger: #ef4444; --dm-input-bg: #1c2233; --dm-radius: 10px; } /* ── Base ──────────────────────────────────────────────────── */ html.dark-mode, html.dark-mode body { background-color: var(--dm-bg) !important; color: var(--dm-text-strong) !important; } /* ── Cards / Panels ────────────────────────────────────────── */ html.dark-mode .card, html.dark-mode .form-section, html.dark-mode .table-section, html.dark-mode .btn-toolbar, html.dark-mode .modal-content, html.dark-mode .dropdown-menu { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text-strong) !important; } html.dark-mode .card-header, html.dark-mode .modal-header, html.dark-mode .modal-footer { background-color: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; color: var(--dm-text-strong) !important; } html.dark-mode .card-body, html.dark-mode .modal-body { background-color: var(--dm-surface) !important; color: var(--dm-text-strong) !important; } /* ── Tables ────────────────────────────────────────────────── */ html.dark-mode .table { --bs-table-bg: var(--dm-surface); --bs-table-striped-bg: var(--dm-surface-2); --bs-table-hover-bg: var(--dm-surface-3); --bs-table-border-color: var(--dm-border); color: var(--dm-text-strong) !important; border-color: var(--dm-border) !important; } html.dark-mode .table th, html.dark-mode .table td { background-color: inherit !important; color: inherit !important; border-color: var(--dm-border) !important; } html.dark-mode .table thead th, html.dark-mode .table-dark th { background-color: var(--dm-surface-2) !important; color: var(--dm-text-strong) !important; border-color: var(--dm-border) !important; } html.dark-mode .table-hover tbody tr:hover td { background-color: var(--dm-surface-3) !important; } /* ── Forms ─────────────────────────────────────────────────── */ /* Use html.dark-mode body prefix for higher specificity to beat inline