/* ============================================================ BackupSphere Dark Mode Overrides Applied via [data-theme="dark"] on ============================================================ */ /* ── Auth pages dark ── */ [data-theme="dark"] .auth-page { background: linear-gradient(180deg, #040D1A 0%, #061226 100%); } [data-theme="dark"] .auth-card { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(8px); } /* ── Page background ── */ [data-theme="dark"] body { background-color: var(--surface-page); color: var(--text-primary); } /* ── Navigation tabs ── */ [data-theme="dark"] .nav-tabs { border-color: var(--border-default); } [data-theme="dark"] .nav-tabs .nav-link { color: var(--text-secondary); } [data-theme="dark"] .nav-tabs .nav-link.active { background: var(--surface-card); border-color: var(--border-default); color: var(--text-primary); } /* ── Pills ── */ [data-theme="dark"] .nav-pills .nav-link { color: var(--text-secondary); } [data-theme="dark"] .nav-pills .nav-link.active { background: var(--bs-brand-blue); color: #fff; } /* ── Badges ── */ [data-theme="dark"] .badge.bg-light, [data-theme="dark"] .badge.text-bg-light { background: var(--surface-raised) !important; color: var(--text-primary) !important; } [data-theme="dark"] .badge.bg-warning, [data-theme="dark"] .badge.bg-warning.text-dark { background-color: rgba(245, 158, 11, 0.18) !important; color: #fcd34d !important; } [data-theme="dark"] .badge.bg-info, [data-theme="dark"] .badge.bg-info.text-dark { background-color: rgba(6, 182, 212, 0.18) !important; color: #67e8f9 !important; } [data-theme="dark"] .badge.bg-secondary { background-color: rgba(148, 163, 184, 0.18) !important; color: #cbd5e1 !important; } [data-theme="dark"] .badge.bg-success { background-color: rgba(34, 197, 94, 0.18) !important; color: #86efac !important; } [data-theme="dark"] .badge.bg-danger { background-color: rgba(239, 68, 68, 0.18) !important; color: #fca5a5 !important; } [data-theme="dark"] .badge.bg-primary { background-color: rgba(59, 130, 246, 0.18) !important; color: #93c5fd !important; } [data-theme="dark"] .badge-soft { background: var(--surface-raised) !important; color: var(--text-secondary) !important; } /* ── Breadcrumb ── */ [data-theme="dark"] .breadcrumb { --bs-breadcrumb-divider-color: var(--text-muted); } [data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); } [data-theme="dark"] .breadcrumb-item a { color: var(--text-link); } /* ── List groups ── */ [data-theme="dark"] .list-group-item { background: var(--surface-card); border-color: var(--border-default); color: var(--text-primary); } /* ── Code / pre ── */ [data-theme="dark"] code { background: var(--surface-overlay); color: var(--bs-brand-cyan); } /* ── Buttons outline for dark ── */ [data-theme="dark"] .btn-outline-secondary { color: var(--text-secondary); border-color: var(--border-default); } [data-theme="dark"] .btn-outline-secondary:hover { background: var(--surface-hover); color: var(--text-primary); border-color: var(--border-strong); } [data-theme="dark"] .btn-outline-primary { color: var(--bs-brand-cyan); border-color: rgba(0, 229, 255, 0.35); } [data-theme="dark"] .btn-outline-primary:hover { background: rgba(0, 229, 255, 0.1); color: var(--bs-brand-cyan); border-color: rgba(0, 229, 255, 0.5); } /* ── HR ── */ [data-theme="dark"] hr { border-color: var(--border-default); } /* ── Stat card in dark ── */ [data-theme="dark"] .stat-card, [data-theme="dark"] .admin-stat { background: var(--surface-card); border-color: var(--border-subtle); } /* ── Topbar in dark ── */ [data-theme="dark"] .topbar { background: var(--surface-card); border-color: var(--border-subtle); } /* ── Pagination ── */ [data-theme="dark"] .page-link { background: var(--surface-card); border-color: var(--border-default); color: var(--text-primary); } [data-theme="dark"] .page-link:hover { background: var(--surface-hover); color: var(--text-primary); } [data-theme="dark"] .page-item.active .page-link { background: var(--bs-brand-blue); border-color: var(--bs-brand-blue); } [data-theme="dark"] .page-item.disabled .page-link { background: var(--surface-inset); color: var(--text-muted); } /* ── Table header ── */ [data-theme="dark"] .table-light, [data-theme="dark"] thead.table-light th { background-color: var(--surface-raised) !important; color: var(--text-secondary) !important; border-color: var(--border-default) !important; --bs-table-bg: var(--surface-raised); --bs-table-color: var(--text-secondary); } [data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--text-primary); --bs-table-border-color: var(--border-default); color: var(--text-primary); border-color: var(--border-default); } [data-theme="dark"] .table > tbody > tr { border-color: var(--border-subtle); } [data-theme="dark"] .table-hover > tbody > tr:hover { --bs-table-hover-bg: var(--surface-hover); --bs-table-hover-color: var(--text-primary); } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { --bs-table-striped-bg: rgba(255, 255, 255, 0.03); --bs-table-striped-color: var(--text-primary); } /* ── Form helper text ── */ [data-theme="dark"] .form-text { color: var(--text-secondary) !important; } [data-theme="dark"] .form-label { color: var(--text-primary); } /* ── Subtle background variants ── */ [data-theme="dark"] .bg-warning-subtle { background-color: rgba(245, 158, 11, 0.12) !important; color: #fcd34d !important; } [data-theme="dark"] .bg-info-subtle { background-color: rgba(6, 182, 212, 0.12) !important; color: #67e8f9 !important; } [data-theme="dark"] .bg-success-subtle { background-color: rgba(34, 197, 94, 0.12) !important; color: #86efac !important; } [data-theme="dark"] .bg-danger-subtle { background-color: rgba(239, 68, 68, 0.12) !important; color: #fca5a5 !important; } [data-theme="dark"] .bg-primary-subtle { background-color: rgba(59, 130, 246, 0.12) !important; color: #93c5fd !important; } [data-theme="dark"] .bg-secondary-subtle { background-color: rgba(148, 163, 184, 0.12) !important; color: #cbd5e1 !important; } /* ── Outline button variants in dark ── */ [data-theme="dark"] .btn-outline-warning { color: #fbbf24; border-color: rgba(245, 158, 11, 0.35); } [data-theme="dark"] .btn-outline-warning:hover { background: rgba(245, 158, 11, 0.12); color: #fcd34d; border-color: rgba(245, 158, 11, 0.5); } [data-theme="dark"] .btn-outline-info { color: #22d3ee; border-color: rgba(6, 182, 212, 0.35); } [data-theme="dark"] .btn-outline-info:hover { background: rgba(6, 182, 212, 0.12); color: #67e8f9; border-color: rgba(6, 182, 212, 0.5); } [data-theme="dark"] .btn-outline-success { color: #4ade80; border-color: rgba(34, 197, 94, 0.35); } [data-theme="dark"] .btn-outline-success:hover { background: rgba(34, 197, 94, 0.12); color: #86efac; border-color: rgba(34, 197, 94, 0.5); } [data-theme="dark"] .btn-outline-danger { color: #f87171; border-color: rgba(239, 68, 68, 0.35); } [data-theme="dark"] .btn-outline-danger:hover { background: rgba(239, 68, 68, 0.12); color: #fca5a5; border-color: rgba(239, 68, 68, 0.5); } /* ── .h1–.h6 heading classes ── */ [data-theme="dark"] .h1, [data-theme="dark"] .h2, [data-theme="dark"] .h3, [data-theme="dark"] .h4, [data-theme="dark"] .h5, [data-theme="dark"] .h6 { color: var(--text-primary); } /* ── Strong text inherits properly ── */ [data-theme="dark"] strong, [data-theme="dark"] b { color: inherit; } /* ── QR code containers keep white background ── */ [data-theme="dark"] #qrcode { background-color: #fff !important; } [data-theme="dark"] #qrcode.bg-white { background-color: #fff !important; }