/* =============================================================
   VeriPass — Global Theme (Dark & Light Mode)
   Loads for all admin/app pages. Default is dark mode (#020617).
   Light mode enabled via html:not(.dark) selector.
   ============================================================= */

/* ── LIGHT MODE (default) ────────────────────────────────────── */
html:not(.dark) body,
html:not(.dark) .page-shell {
    background-color: #f8fafc !important;
    color: #1e293b !important;
}

html:not(.dark) .app-header,
html:not(.dark) .glass-header {
    background: rgba(248, 250, 252, 0.95) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
}

html:not(.dark) .nav-pill {
    color: #64748b !important;
}

html:not(.dark) .nav-pill:hover {
    color: #1e293b !important;
    background: rgba(226, 232, 240, 0.5) !important;
}

html:not(.dark) .nav-pill.active {
    color: #1e293b !important;
    background: rgba(99, 102, 241, 0.1) !important;
}

html:not(.dark) .card-pro {
    background: white !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}

html:not(.dark) .card-pro:hover {
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
}

html:not(.dark) .panel-v2,
html:not(.dark) .panel-v2-soft {
    background: white !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}

html:not(.dark) .dropdown-menu {
    background: white !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}

html:not(.dark) .input-v2,
html:not(.dark) input[type="text"],
html:not(.dark) input[type="email"],
html:not(.dark) input[type="password"],
html:not(.dark) select {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}

html:not(.dark) .bg-yellow-100\/50 { background: #fef3c7 !important; }
html:not(.dark) .text-yellow-300 { color: #fcd34d !important; }

/* ── DARK MODE ───────────────────────────────────────────────── */
html.dark body,
html.dark .page-shell {
    background-color: #0b1220 !important;
    color: #e5edf8 !important;
}

html.dark .app-header,
html.dark .glass-header {
    background: rgba(11, 18, 32, 0.92) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

html.dark .nav-pill {
    color: #a8b4c8 !important;
}

html.dark .nav-pill:hover {
    color: #e0e7ff !important;
    background: rgba(99, 102, 241, 0.16) !important;
}

html.dark .nav-pill.active {
    color: #e0e7ff !important;
    background: rgba(99, 102, 241, 0.24) !important;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.35) inset !important;
}

html.dark .nav-link {
    color: #a8b4c8 !important;
}

html.dark .nav-link:hover {
    color: #e0e7ff !important;
}

html.dark .nav-link.active {
    color: #e0e7ff !important;
}

html.dark .app-shell-profile,
html.dark button[data-app-shell-profile-toggle] {
    background: rgba(30, 41, 59, 0.65) !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
}

html.dark .app-shell-profile:hover,
html.dark button[data-app-shell-profile-toggle]:hover {
    background: rgba(51, 65, 85, 0.70) !important;
}

html.dark div[data-app-shell-profile-menu] {
    background: #0b1326 !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.65) !important;
}

html.dark div[data-app-shell-profile-menu] a {
    color: #d6e0ef !important;
}

html.dark div[data-app-shell-profile-menu] a:hover {
    background: rgba(99, 102, 241, 0.18) !important;
    color: #f8fafc !important;
}

html.dark .card-pro {
    background: rgba(17, 24, 39, 0.98) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    box-shadow: 0 10px 28px rgba(2, 6, 23, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    color: #e5edf8 !important;
}

html.dark .card-pro:hover {
    border-color: rgba(99, 102, 241, 0.45) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(99, 102, 241, 0.2) !important;
}

html.dark .panel-v2 {
    background: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid rgba(148, 163, 184, 0.26) !important;
    border-radius: 0.75rem;
    box-shadow: 0 10px 28px rgba(2, 6, 23, 0.5) !important;
}

html.dark .dropdown-menu {
    background: #0f172a !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
    color: #e5edf8 !important;
    box-shadow: 0 24px 50px rgba(2, 6, 23, 0.7) !important;
}

html.dark .input-v2,
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="date"],
html.dark input[type="number"],
html.dark select,
html.dark textarea {
    background: rgba(17, 24, 39, 0.96) !important;
    border-color: rgba(148, 163, 184, 0.4) !important;
    color: #f8fafc !important;
    border-radius: 0.5rem;
}

html.dark .input-v2::placeholder,
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: rgba(184, 197, 215, 0.75) !important;
}

html.dark .input-v2:focus,
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: rgba(99, 102, 241, 0.7) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
    outline: none !important;
}

html.dark input:disabled,
html.dark select:disabled,
html.dark textarea:disabled {
    background: rgba(15, 23, 42, 0.6) !important;
    color: rgba(148, 163, 184, 0.55) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
}

html.dark select option {
    background: #0f172a !important;
    color: #f8fafc !important;
}

/* ── Tables ──────────────────────────────────────────────────── */
html.dark .table-v2,
html.dark table {
    color: #e2e8f0 !important;
}

html.dark thead,
html.dark thead tr,
html.dark .bg-slate-50,
html.dark thead.bg-slate-50 {
    background: rgba(11, 19, 38, 0.95) !important;
}

html.dark thead th {
    color: #a3b3c7 !important;
    border-bottom-color: rgba(148, 163, 184, 0.28) !important;
}

html.dark tbody tr,
html.dark .table-row-v2 {
    border-bottom-color: rgba(148, 163, 184, 0.18) !important;
}

html.dark tbody tr:hover,
html.dark .table-row-v2:hover {
    background: rgba(99, 102, 241, 0.12) !important;
}

html.dark tbody td {
    background: transparent !important;
    color: #cbd5e1 !important;
}

/* ── Tailwind utility overrides (Dark Mode) ──────────────────── */
html.dark .bg-white {
    background-color: #111827 !important;
}

html.dark .bg-gray-50,
html.dark .bg-slate-50 {
    background-color: #0f172a !important;
}

html.dark .bg-gray-100,
html.dark .bg-slate-100 {
    background-color: #111b2d !important;
}

html.dark .bg-gray-200,
html.dark .bg-slate-200 {
    background-color: #162033 !important;
}

html.dark .text-gray-900,
html.dark .text-slate-900 {
    color: #f1f5f9 !important;
}

html.dark .text-gray-800,
html.dark .text-slate-800 {
    color: #e2e8f0 !important;
}

html.dark .text-gray-700,
html.dark .text-slate-700 {
    color: #d4dee9 !important;
}

html.dark .text-gray-600,
html.dark .text-slate-600 {
    color: #a3b3c7 !important;
}

html.dark .text-gray-500,
html.dark .text-slate-500 {
    color: #9fb0c7 !important;
}

html.dark .text-gray-400,
html.dark .text-slate-400 {
    color: #7b8aa4 !important;
}

html.dark .border-gray-200,
html.dark .border-slate-200 {
    border-color: rgba(148, 163, 184, 0.28) !important;
}

html.dark .border-slate-100,
html.dark .border-gray-100 {
    border-color: rgba(148, 163, 184, 0.16) !important;
}

html.dark .divide-y.divide-slate-200 > * + * {
    border-top-color: rgba(100, 116, 139, 0.15) !important;
}

/* ── Buttons (Dark) ──────────────────────────────────────────── */
html.dark .btn-secondary-v2 {
    background: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
    color: #e5edf8 !important;
}

html.dark .btn-secondary-v2:hover:not(:disabled) {
    background: rgba(31, 41, 55, 0.95) !important;
    border-color: rgba(99, 102, 241, 0.5) !important;
}

html.dark .btn-secondary-v2:disabled {
    opacity: 0.4 !important;
}

html.dark button[aria-label="Notifications"] {
    color: #8fa0b6 !important;
}

html.dark button[aria-label="Notifications"]:hover {
    color: #e0e7ff !important;
    background: rgba(99, 102, 241, 0.2) !important;
}

html.dark .meta-kicker {
    color: #8fa0b6 !important;
}

html.dark .skeleton {
    background: rgba(31, 41, 55, 0.85) !important;
}

/* ── Status badges (Dark) ────────────────────────────────────── */
html.dark .bg-green-100 { background: rgba(16, 185, 129, 0.22) !important; }
html.dark .text-green-800 { color: #4ade80 !important; }
html.dark .bg-yellow-100 { background: rgba(245, 158, 11, 0.22) !important; }
html.dark .text-yellow-800 { color: #fcd34d !important; }
html.dark .bg-blue-100 { background: rgba(59, 130, 246, 0.22) !important; }
html.dark .text-blue-800 { color: #93c5fd !important; }
html.dark .bg-gray-100 { background: rgba(100, 116, 139, 0.22) !important; }
html.dark .text-gray-800 { color: #cbd5e1 !important; }

html.dark .bg-slate-50.px-4.py-3,
html.dark .bg-slate-50[class*="px-"] {
    background: rgba(11, 19, 38, 0.95) !important;
    border-top-color: rgba(148, 163, 184, 0.16) !important;
}

html.dark .title-v2 {
    color: #f1f5f9 !important;
}

html.dark .subtitle-v2 {
    color: #8fa0b6 !important;
}

/* Light Mode Scrollbar */
html:not(.dark) ::-webkit-scrollbar-track {
    background: #f1f5f9;
}

html:not(.dark) ::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.3);
}

html:not(.dark) ::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.6);
}

/* Dark Mode Scrollbar ───────────────────────────────────────── */
html.dark ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

html.dark ::-webkit-scrollbar-track {
    background: #0b1326;
}

html.dark ::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.4);
    border-radius: 3px;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.60);
}

/* =============================================================
   Component-specific overrides for both modes
   ============================================================= */

/* ── LIGHT MODE Components ───────────────────────────────────── */
html:not(.dark) .stat-card-btn {
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}

html:not(.dark) .stat-card-btn:hover,
html:not(.dark) .stat-card-btn.active {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

html:not(.dark) .panel-v2-soft {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

html:not(.dark) #stat-total-forms,
html:not(.dark) #stat-total-submissions,
html:not(.dark) #stat-verifications {
    color: #1e293b !important;
}

html:not(.dark) .bg-indigo-50,
html:not(.dark) .bg-blue-50,
html:not(.dark) .bg-emerald-50 {
    background: #e0e7ff !important;
}

html:not(.dark) .text-indigo-600,
html:not(.dark) .text-blue-600,
html:not(.dark) .text-emerald-600 {
    color: #4f46e5 !important;
}

html:not(.dark) .badge-pro {
    background: #eef2ff !important;
    color: #4f46e5 !important;
    border: 1px solid #c7d2fe !important;
}

html:not(.dark) button.bg-slate-100\/50 {
    background: #e2e8f0 !important;
}

html:not(.dark) button.bg-slate-100\/50:hover {
    background: #cbd5e1 !important;
}

html:not(.dark) .bg-slate-800 {
    background: #4f46e5 !important;
}

html:not(.dark) .hover\:bg-slate-50:hover {
    background: #f1f5f9 !important;
}

html:not(.dark) #notif-badge {
    border-color: #f8fafc !important;
}

html:not(.dark) .rounded-xl.bg-indigo-50 {
    background: #e0e7ff !important;
    border-color: #c7d2fe !important;
}

/* ── DARK MODE Components ────────────────────────────────────── */
html.dark .panel-v2-soft {
    background: rgba(17, 24, 39, 0.7) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
    color: #e5edf8 !important;
}

html.dark .stat-card-btn {
    background: rgba(17, 24, 39, 0.9) !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    color: #e5edf8 !important;
}

html.dark .stat-card-btn:hover {
    background: rgba(31, 41, 55, 0.95) !important;
    border-color: rgba(99, 102, 241, 0.45) !important;
}

html.dark .stat-card-btn.active {
    background: rgba(31, 41, 55, 0.95) !important;
    border-color: rgba(99, 102, 241, 0.65) !important;
}

html.dark #stat-total-forms,
html.dark #stat-total-submissions,
html.dark #stat-verifications {
    color: #f1f5f9 !important;
}

html.dark .bg-indigo-50,
html.dark .bg-blue-50,
html.dark .bg-emerald-50 {
    background: rgba(99, 102, 241, 0.18) !important;
}

html.dark .text-indigo-600,
html.dark .text-blue-600,
html.dark .text-emerald-600 {
    color: #c7d2fe !important;
}

html.dark .badge-pro {
    background: rgba(99, 102, 241, 0.22) !important;
    color: #e0e7ff !important;
    border: 1px solid rgba(99, 102, 241, 0.35) !important;
}

html.dark button.bg-slate-100\/50 {
    background: rgba(17, 24, 39, 0.9) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
}

html.dark button.bg-slate-100\/50:hover {
    background: rgba(31, 41, 55, 0.95) !important;
}

html.dark .bg-slate-800 {
    background: rgba(99, 102, 241, 0.5) !important;
}

html.dark .hover\:bg-slate-50:hover {
    background: rgba(99, 102, 241, 0.12) !important;
}

html.dark #notif-badge {
    background: #fb7185 !important;
    border-color: #0b1220 !important;
}

html.dark .rounded-xl.bg-indigo-50 {
    background: rgba(99, 102, 241, 0.18) !important;
    border-color: rgba(99, 102, 241, 0.28) !important;
}

/* ── TEXT COLOR OVERRIDES ────────────────────────────────────── */
/* Light Mode Text Colors */
html:not(.dark) .text-slate-900,
html:not(.dark) .text-gray-900 {
    color: #1e293b !important;
}

html:not(.dark) .text-slate-800,
html:not(.dark) .text-gray-800 {
    color: #334155 !important;
}

html:not(.dark) .text-slate-700,
html:not(.dark) .text-gray-700 {
    color: #475569 !important;
}

html:not(.dark) .text-slate-600,
html:not(.dark) .text-gray-600 {
    color: #64748b !important;
}

html:not(.dark) .text-slate-500,
html:not(.dark) .text-gray-500 {
    color: #64748b !important;
}

html:not(.dark) .text-slate-400,
html:not(.dark) .text-gray-400 {
    color: #94a3b8 !important;
}

html:not(.dark) .text-slate-300 {
    color: #cbd5e1 !important;
}

html:not(.dark) .hover\:text-slate-600:hover {
    color: #64748b !important;
}

html:not(.dark) .hover\:text-indigo-600:hover {
    color: #4f46e5 !important;
}

html:not(.dark) .border-slate-50,
html:not(.dark) .border-b.border-slate-50 {
    border-color: #e2e8f0 !important;
}

html:not(.dark) .bg-slate-50\/50 {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}

html:not(.dark) .text-red-600 {
    color: #dc2626 !important;
}

html:not(.dark) .text-red-600:hover {
    color: #991b1b !important;
}

html:not(.dark) .hover\:bg-red-50:hover {
    background: #fee2e2 !important;
}

/* ── Badge colors in template cards (Light Mode) ──────────────── */
html:not(.dark) .text-blue-600 {
    color: #1e40af !important;
}

html:not(.dark) .text-emerald-600 {
    color: #059669 !important;
}

html:not(.dark) .text-amber-600 {
    color: #d97706 !important;
}

html:not(.dark) .text-fuchsia-700 {
    color: #a21caf !important;
}

/* Version/Date text darker for readability */
html:not(.dark) .card-pro .text-\[9px\].text-slate-500 {
    color: #475569 !important;
}

/* Button text in cards - darker for visibility */
html:not(.dark) .card-pro .text-slate-600 {
    color: #334155 !important;
}

/* Template card title - make it bolder */
html:not(.dark) .card-pro h3 {
    font-weight: 700 !important;
    color: #0f172a !important;
}

/* Button text in template cards - darker and bolder */
html:not(.dark) .card-pro button,
html:not(.dark) .card-pro a {
    color: #1e293b !important;
    font-weight: 600 !important;
}

/* Quick action buttons - add subtle backgrounds */
html:not(.dark) .card-pro button[onclick*="openLink"],
html:not(.dark) .card-pro button[onclick*="openQR"],
html:not(.dark) .card-pro button[onclick*="openShare"] {
    background: #f0f9ff !important;
    border-color: #bfdbfe !important;
}

/* Admin edit/design buttons - add subtle backgrounds */
html:not(.dark) .card-pro a[href*="editor"],
html:not(.dark) .card-pro a[href*="design"] {
    background: #fafaf9 !important;
    border-color: #d4d4d8 !important;
}

/* Fill Document button - light text in light mode */
html:not(.dark) .card-pro a[href*="forms/index"] {
    text-indigo-100 !important;
    color: #e0e7ff !important;
}

/* Dark Mode Text Colors */
html.dark .text-slate-900,
html.dark .text-gray-900 {
    color: #f1f5f9 !important;
}

html.dark .text-slate-800,
html.dark .text-gray-800 {
    color: #e2e8f0 !important;
}

html.dark .text-slate-700,
html.dark .text-gray-700 {
    color: #d4dee9 !important;
}

html.dark .text-slate-600,
html.dark .text-gray-600 {
    color: #a3b3c7 !important;
}

html.dark .text-slate-500,
html.dark .text-gray-500 {
    color: #8fa0b6 !important;
}

html.dark .text-slate-400,
html.dark .text-gray-400 {
    color: #7b8aa4 !important;
}

html.dark .text-slate-300 {
    color: #cbd5e1 !important;
}

html.dark .hover\:text-slate-600:hover {
    color: #94a3b8 !important;
}

html.dark .hover\:text-indigo-600:hover {
    color: #a78bfa !important;
}

html.dark .border-slate-50,
html.dark .border-b.border-slate-50 {
    border-color: rgba(148, 163, 184, 0.16) !important;
}

html.dark .bg-slate-50\/50 {
    background: rgba(15, 23, 42, 0.85) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
}

html.dark .text-red-600 {
    color: #f87171 !important;
}

html.dark .text-red-600:hover {
    color: #fca5a5 !important;
}

html.dark .hover\:bg-red-50:hover {
    background: rgba(248, 113, 113, 0.15) !important;
}

/* Modal inner containers */
#link-modal > div,
#qr-modal > div,
#share-modal > div,
#profile-modal > div,
#confirm-modal > div,
#upload-modal > div,
[id$="-modal"] > div > div {
    background: #0b1326 !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
    color: #e5edf8 !important;
}

/* Template cards grid */
.template-group-row {
    background: transparent !important;
}

/* Toolbar/filter section */
.panel-v2 {
    background: rgba(15, 23, 42, 0.9) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    color: #e5edf8 !important;
}

/* Search and filter inputs in toolbar */
.relative input.border-slate-200 {
    border-color: rgba(148, 163, 184, 0.35) !important;
    background: rgba(15, 23, 42, 0.92) !important;
    color: #f8fafc !important;
}

/* Dropdown selects */
select.bg-white {
    background: rgba(15, 23, 42, 0.92) !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
    color: #f8fafc !important;
}

select.bg-white option {
    background: #0f172a !important;
    color: #f8fafc !important;
}

/* Template card title (rendered cards) */
.text-left.font-bold {
    color: #f1f5f9 !important;
}

/* All hr/divider elements */
hr,
.border-t,
.border-b,
.divide-y > * + * {
    border-color: rgba(148, 163, 184, 0.16) !important;
}

/* Secondary button style */
.bg-slate-100 {
    background: rgba(17, 24, 39, 0.9) !important;
}

.bg-slate-100:hover {
    background: rgba(31, 41, 55, 0.95) !important;
}

/* Icon backgrounds in stat cards */
.h-12.w-12.rounded-xl {
    opacity: 1 !important;
}

/* ── Documentation-specific Overrides (Dark Mode) ────────────── */
html.dark .search-container {
    background: #0b1220 !important;
}

html.dark .search-input {
    background: rgba(15, 23, 42, 0.92) !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
    color: #f8fafc !important;
}

html.dark .docs-mode-toggle {
    background: rgba(15, 23, 42, 0.8) !important;
}

html.dark .docs-mode-btn {
    color: #a8b4c8 !important;
}

html.dark .docs-mode-btn.active {
    background: rgba(99, 102, 241, 0.25) !important;
    color: #e0e7ff !important;
    border-color: rgba(99, 102, 241, 0.45) !important;
}

html.dark .doc-card,
html.dark .check-item,
html.dark .faq-trigger,
html.dark .faq-content {
    background: rgba(17, 24, 39, 0.9) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
    color: #e5edf8 !important;
}

/* Specific colored variants in documentation */
html.dark .bg-purple-50, 
html.dark .bg-indigo-50, 
html.dark .bg-blue-50, 
html.dark .bg-yellow-50, 
html.dark .bg-red-50, 
html.dark .bg-emerald-50,
html.dark [class*="from-purple-50"] {
    background: rgba(99, 102, 241, 0.16) !important;
    background-image: none !important;
}

html.dark .border-purple-100, 
html.dark .border-indigo-100, 
html.dark .border-blue-100, 
html.dark .border-yellow-100, 
html.dark .border-red-100, 
html.dark .border-emerald-100,
html.dark .border-purple-200 {
    border-color: rgba(99, 102, 241, 0.25) !important;
}

html.dark .text-purple-900, 
html.dark .text-indigo-900, 
html.dark .text-blue-900, 
html.dark .text-yellow-900, 
html.dark .text-red-900 {
    color: #f8fafc !important;
}

html.dark .text-purple-700, 
html.dark .text-purple-800, 
html.dark .text-blue-700, 
html.dark .text-blue-800, 
html.dark .text-yellow-800,
html.dark .text-indigo-800,
html.dark .text-emerald-700 {
    color: #c7d2fe !important;
}

html.dark .check-item.done {
    background: rgba(16, 185, 129, 0.16) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}

html.dark .cheat-sheet-table {
    border-color: rgba(100, 116, 139, 0.25) !important;
}

html.dark .cheat-sheet-table th {
    background: rgba(11, 19, 38, 0.95) !important;
    color: #a3b3c7 !important;
    border-bottom-color: rgba(148, 163, 184, 0.28) !important;
}

html.dark .cheat-sheet-table td {
    border-bottom-color: rgba(148, 163, 184, 0.18) !important;
}

html.dark .sidebar-link {
    color: #a8b4c8 !important;
}

html.dark .sidebar-link:hover {
    background: rgba(99, 102, 241, 0.16) !important;
    color: #e0e7ff !important;
}

html.dark .sidebar-link.active {
    background: rgba(99, 102, 241, 0.24) !important;
    color: #e0e7ff !important;
}