/* ===== Dark Theme ===== */
/* Applied when is set.
* Background gradient (--bg-gradient) remains unchanged (same as light). */
[data-theme="DARK"] {
/* Core */
--text-main: #e2e8f0;
--bg-main: #1e293b;
/* Tinted backgrounds (dark slate variants) */
--tinted-bg-25: #1e293b;
--tinted-bg-50: #1e293b;
--tinted-bg-100: #263344;
--tinted-bg-150: #2d3d4f;
--tinted-bg-200: #334759;
--tinted-bg-250: #3b5168;
--tinted-bg-hover-light: #2d3d4f;
--tinted-bg-hover: #334759;
/* Brand / Primary – kept vibrant */
--primary-light: #263344;
/* Semantic */
--danger-light: #7f1d1d;
/* Borders */
--border-color: rgba(148, 163, 184, 0.15);
--border-color-solid: #374151;
/* Code */
--code-bg: #0f172a;
}
[data-theme="DARK"] .table {
--bs-table-color: #e2e8f0;
}
/* ===== Derived Variables in main.css :root (override via specificity) ===== */
[data-theme="DARK"] body {
color: var(--text-main);
}
/* Glass / Card surfaces */
[data-theme="DARK"] {
--glass-bg: rgba(30, 41, 59, 0.85);
--glass-border: rgba(71, 85, 105, 0.4);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
--shadow-md: 0 4px 14px -2px rgba(0, 0, 0, 0.3), 0 2px 6px -1px rgba(0, 0, 0, 0.2);
--shadow-lg: 0 20px 40px -8px rgba(0, 0, 0, 0.4), 0 8px 16px -4px rgba(0, 0, 0, 0.2);
--shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
--shadow-green: 0 8px 30px -4px rgba(var(--primary-green-rgb), 0.2);
}
/* ===== Navbar ===== */
[data-theme="DARK"] .navbar-main {
background: rgba(15, 23, 42, 0.9);
border-bottom-color: var(--border-color-solid);
box-shadow: 0 1px 20px rgba(0, 0, 0, 0.3);
}
[data-theme="DARK"] .navbar-brand {
color: #f1f5f9 !important;
}
[data-theme="DARK"] .nav-link-main {
color: #94a3b8 !important;
}
[data-theme="DARK"] .nav-link-main:hover,
[data-theme="DARK"] .nav-link-main.active {
color: var(--primary) !important;
background-color: rgba(var(--primary-rgb), 0.15);
}
/* ===== Cards ===== */
[data-theme="DARK"] .check-card,
[data-theme="DARK"] .result-card,
[data-theme="DARK"] .card {
background: rgba(30, 41, 59, 0.8);
border-color: var(--border-color-solid);
color: var(--text-main);
}
[data-theme="DARK"] .card-header {
background: rgba(15, 23, 42, 0.5);
border-bottom-color: var(--border-color-solid);
}
/* ===== Form Controls ===== */
[data-theme="DARK"] .form-control,
[data-theme="DARK"] .form-select {
background-color: #0f172a;
border-color: #374151;
color: #e2e8f0;
}
[data-theme="DARK"] .form-control:focus,
[data-theme="DARK"] .form-select:focus {
background-color: #0f172a;
border-color: var(--primary);
color: #e2e8f0;
box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25);
}
[data-theme="DARK"] .form-control::placeholder {
color: #64748b;
}
[data-theme="DARK"] .form-label {
color: #cbd5e1;
}
/* ===== Buttons ===== */
[data-theme="DARK"] .btn-outline-primary {
color: var(--primary);
border-color: var(--primary);
}
[data-theme="DARK"] .btn-outline-primary:hover {
background-color: rgba(var(--primary-rgb), 0.15);
color: var(--primary);
}
/* ===== Dropdowns ===== */
[data-theme="DARK"] .dropdown-menu,
[data-theme="DARK"] .dropdown-menu-end {
background: rgba(15, 23, 42, 0.95);
border-color: #374151;
}
[data-theme="DARK"] .dropdown-item {
color: #cbd5e1;
}
[data-theme="DARK"] .dropdown-item:hover {
background-color: rgba(var(--primary-rgb), 0.15);
color: #f1f5f9;
}
/* ===== Text Utilities ===== */
[data-theme="DARK"] .text-dark {
color: #e2e8f0 !important;
}
[data-theme="DARK"] .text-muted {
color: #94a3b8 !important;
}
[data-theme="DARK"] .fw-bold {
color: #f1f5f9;
}
[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: #f1f5f9;
}
[data-theme="DARK"] .page-header h1 {
color: var(--primary);
}
[data-theme="DARK"] .subtitle {
color: #94a3b8;
}
/* ===== Profile Section ===== */
[data-theme="DARK"] .profile-section .rounded-circle[style*="bg-"] {
opacity: 0.8;
}
/* ===== Quota Display ===== */
[data-theme="DARK"] .quota-display {
background: linear-gradient(145deg, #1e293b 0%, #263344 100%);
border-color: var(--border-color-solid);
}
/* ===== Tables ===== */
[data-theme="DARK"] .table {
color: #e2e8f0;
--bs-table-bg: transparent;
--bs-table-striped-bg: rgba(255, 255, 255, 0.03);
--bs-table-hover-bg: rgba(255, 255, 255, 0.05);
border-color: #374151;
}
[data-theme="DARK"] .table thead th {
background-color: rgba(15, 23, 42, 0.5);
border-bottom-color: #374151;
color: #94a3b8;
}
[data-theme="DARK"] .table td {
border-bottom-color: #374151;
}
/* ===== Badges ===== */
[data-theme="DARK"] .badge.bg-primary {
background-color: rgba(var(--primary-rgb), 0.2) !important;
color: var(--primary) !important;
}
/* ===== Alerts ===== */
[data-theme="DARK"] .alert-info {
background-color: rgba(3, 105, 161, 0.15);
border-color: rgba(3, 105, 161, 0.3);
color: #7dd3fc;
}
[data-theme="DARK"] .alert-warning {
background-color: rgba(217, 119, 6, 0.15);
border-color: rgba(217, 119, 6, 0.3);
color: #fcd34d;
}
[data-theme="DARK"] .alert-danger {
background-color: rgba(220, 38, 38, 0.15);
border-color: rgba(220, 38, 38, 0.3);
color: #fca5a5;
}
[data-theme="DARK"] .alert-success {
background-color: rgba(34, 197, 94, 0.15);
border-color: rgba(34, 197, 94, 0.3);
color: #86efac;
}
/* ===== Status Colors (remain vibrant, adjust backgrounds) ===== */
[data-theme="DARK"] {
--status-ok-bg: rgba(34, 197, 94, 0.15);
--status-ok-bg-light: rgba(34, 197, 94, 0.25);
--status-warn-bg: rgba(245, 158, 11, 0.15);
--status-warn-bg-light: rgba(245, 158, 11, 0.25);
--status-warn-bg-subtle: rgba(245, 158, 11, 0.08);
--status-critical-bg: rgba(239, 68, 68, 0.15);
--status-critical-bg-light: rgba(239, 68, 68, 0.25);
--status-critical-bg-subtle: rgba(239, 68, 68, 0.08);
--status-pending-bg: rgba(2, 132, 199, 0.15);
--status-pending-bg-light: rgba(2, 132, 199, 0.25);
--status-failed-bg: rgba(107, 114, 128, 0.15);
--status-failed-bg-light: rgba(107, 114, 128, 0.25);
}
/* ===== Alert Blocks (GFM-style in markdown) ===== */
[data-theme="DARK"] {
--alert-note-bg: rgba(59, 130, 246, 0.1);
--alert-note-header: rgba(59, 130, 246, 0.2);
--alert-note-text: #93c5fd;
--alert-note-content: #bfdbfe;
--alert-tip-bg: rgba(16, 185, 129, 0.1);
--alert-tip-header: rgba(16, 185, 129, 0.2);
--alert-tip-text: #6ee7b7;
--alert-tip-content: #a7f3d0;
--alert-important-bg: rgba(139, 92, 246, 0.1);
--alert-important-header: rgba(139, 92, 246, 0.2);
--alert-important-text: #c4b5fd;
--alert-important-content: #ddd6fe;
--alert-warning-bg: rgba(245, 158, 11, 0.1);
--alert-warning-header: rgba(245, 158, 11, 0.2);
--alert-warning-text: #fcd34d;
--alert-warning-content: #fde68a;
--alert-caution-bg: rgba(239, 68, 68, 0.1);
--alert-caution-header: rgba(239, 68, 68, 0.2);
--alert-caution-text: #fca5a5;
--alert-caution-content: #fecaca;
}
/* ===== Loading Overlay ===== */
[data-theme="DARK"] .loading-overlay {
background: rgba(15, 23, 42, 0.92);
}
[data-theme="DARK"] .loading-text,
[data-theme="DARK"] .loading-subtext {
color: #e2e8f0;
}
/* ===== Footer ===== */
[data-theme="DARK"] .main-footer {
color: #64748b;
}
/* ===== Horizontal Rules ===== */
[data-theme="DARK"] hr {
border-color: #374151;
opacity: 0.5;
}
/* ===== Scrollbar ===== */
[data-theme="DARK"] ::-webkit-scrollbar {
width: 8px;
}
[data-theme="DARK"] ::-webkit-scrollbar-track {
background: #0f172a;
}
[data-theme="DARK"] ::-webkit-scrollbar-thumb {
background: #475569;
border-radius: 4px;
}
[data-theme="DARK"] ::-webkit-scrollbar-thumb:hover {
background: #64748b;
}
/* ===== Form Section Title ===== */
[data-theme="DARK"] .form-section-title {
color: #cbd5e1;
}
/* ===== Pagination ===== */
[data-theme="DARK"] .page-link {
background-color: #1e293b;
border-color: #374151;
color: #cbd5e1;
}
[data-theme="DARK"] .page-link:hover {
background-color: #334155;
border-color: #475569;
color: #f1f5f9;
}
[data-theme="DARK"] .page-item.active .page-link {
background-color: var(--primary);
border-color: var(--primary);
}
/* ===== Modal ===== */
[data-theme="DARK"] .modal-content {
background-color: #1e293b;
border-color: #374151;
color: #e2e8f0;
}
[data-theme="DARK"] .modal-header {
border-bottom-color: #374151;
}
[data-theme="DARK"] .modal-footer {
border-top-color: #374151;
}
/* ===== Spinner ===== */
[data-theme="DARK"] .spinner-border {
color: var(--primary);
}
/* ===== Preference Toggle Buttons ===== */
[data-theme="DARK"] .pref-toggle-btn {
background: #0f172a;
border-color: #374151;
color: #94a3b8;
}
[data-theme="DARK"] .loading-subtext {
color: var(--bg-main);
}
[data-theme="DARK"] .main-footer {
color: var(--text-main);
}
[data-theme="DARK"] .pref-toggle-btn:hover {
border-color: rgba(var(--primary-rgb), 0.4);
background: #1e293b;
color: #e2e8f0;
}
[data-theme="DARK"] .pref-toggle-btn.active {
border-color: var(--primary);
background: linear-gradient(145deg, #1e293b 0%, #263344 100%);
color: var(--primary);
}
[data-theme="DARK"] .pref-toggle-btn.active::after {
color: var(--primary);
}
[data-theme="DARK"] .media-preview-item {
color: var(--text-main);
}
[data-theme="DARK"] .media-preview-name{
color: var(--text-main);
}
[data-theme="DARK"] .btn-close{
--bs-btn-close-color:var(--text-main);
}
/* ===== Body pseudo-elements (background shapes) – unchanged ===== */
/* The body::before and body::after radial gradients remain the same
because the user wants backgrounds identical in both themes. */