body.dark-mode,
html.dark-mode body {
  background: #0f0f10 !important;
  color: #e5e7eb;
}

body.dark-mode a,
html.dark-mode a {
  color: #93c5fd;
}

body.dark-mode .center-alert-card,
html.dark-mode .center-alert-card {
  background: #1c1d22;
  color: #f3f4f6;
}

body.dark-mode .center-alert-text,
html.dark-mode .center-alert-text {
  color: #cbd5f5;
}

body.dark-mode .inner-header-btn,
html.dark-mode .inner-header-btn {
  background: #1c1d22;
  color: #f3f4f6;
}

body.dark-mode .inner-header-title,
html.dark-mode .inner-header-title {
  color: #f9fafb;
}

/* Global cards & boxes */
body.dark-mode .card,
body.dark-mode .card-item,
body.dark-mode .card-option,
body.dark-mode .stat-card,
body.dark-mode .statics-card,
body.dark-mode .home-action,
body.dark-mode .home-verify,
body.dark-mode .interaction,
body.dark-mode .info-box,
body.dark-mode .input-box,
body.dark-mode .textarea-box,
body.dark-mode .hint-box,
body.dark-mode .otp-card,
body.dark-mode .twofa-modal,
body.dark-mode .twofa-success-card,
html.dark-mode .card,
html.dark-mode .card-item,
html.dark-mode .card-option,
html.dark-mode .stat-card,
html.dark-mode .statics-card,
html.dark-mode .home-action,
html.dark-mode .home-verify,
html.dark-mode .interaction,
html.dark-mode .info-box,
html.dark-mode .input-box,
html.dark-mode .textarea-box,
html.dark-mode .hint-box,
html.dark-mode .otp-card,
html.dark-mode .twofa-modal,
html.dark-mode .twofa-success-card {
  background: #1c1d22 !important;
  color: #e5e7eb;
}

body.dark-mode .card-item p,
body.dark-mode .card-info p,
body.dark-mode .card-info h2,
body.dark-mode .card-chevron,
body.dark-mode .stat-card p,
body.dark-mode .interaction-texts .date,
body.dark-mode .interaction-texts .text,
body.dark-mode .verify-text p,
body.dark-mode .twofa-modal p,
body.dark-mode .twofa-success-card p,
html.dark-mode .card-item p,
html.dark-mode .card-info p,
html.dark-mode .card-info h2,
html.dark-mode .card-chevron,
html.dark-mode .stat-card p,
html.dark-mode .interaction-texts .date,
html.dark-mode .interaction-texts .text,
html.dark-mode .verify-text p,
html.dark-mode .twofa-modal p,
html.dark-mode .twofa-success-card p {
  color: #cbd5f5 !important;
}

body.dark-mode .home-verify,
body.dark-mode .home-action,
html.dark-mode .home-verify,
html.dark-mode .home-action {
  border: 1px solid #2a2b30;
}

body.dark-mode .verify-text strong,
body.dark-mode .home-interactions h3,
html.dark-mode .verify-text strong,
html.dark-mode .home-interactions h3 {
  color: #f9fafb;
}

body.dark-mode .card-info h2,
html.dark-mode .card-info h2 {
  color: #ffffff !important;
}

/* Navbar popups & QR sheet */
body.dark-mode .action-buttons button,
html.dark-mode .action-buttons button {
  background: #1c1d22 !important;
  color: #f3f4f6;
}

body.dark-mode .action-buttons button:hover,
html.dark-mode .action-buttons button:hover {
  background: #262833 !important;
}

body.dark-mode .qr-popup,
html.dark-mode .qr-popup {
  background: #15161a !important;
  color: #e5e7eb;
}

body.dark-mode .qr-header,
html.dark-mode .qr-header {
  background: #1c1d22 !important;
}

body.dark-mode .qr-dropdown,
html.dark-mode .qr-dropdown {
  background: #23242a !important;
  color: #e5e7eb;
}

body.dark-mode .qr-dropdown-menu,
html.dark-mode .qr-dropdown-menu {
  background: #1c1d22 !important;
  border-color: #2a2b30 !important;
  color: #e5e7eb;
}

body.dark-mode .qr-dropdown-menu li:hover,
html.dark-mode .qr-dropdown-menu li:hover {
  background: #262833 !important;
}

body.dark-mode .qr-dropdown-menu li.active,
html.dark-mode .qr-dropdown-menu li.active {
  background: #2b2f3a !important;
}

body.dark-mode .qr-box,
html.dark-mode .qr-box {
  background: #1c1d22 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

body.dark-mode .qr-image,
html.dark-mode .qr-image {
  background: #0f0f10 !important;
}

body.dark-mode .qr-footer,
html.dark-mode .qr-footer {
  color: #cbd5f5 !important;
}

/* QR scan modals */
body.dark-mode .qrscan-modal .modal-card,
html.dark-mode .qrscan-modal .modal-card {
  background: #1c1d22 !important;
  color: #f3f4f6;
}

body.dark-mode .qrscan-modal .modal-card p,
html.dark-mode .qrscan-modal .modal-card p {
  color: #cbd5f5 !important;
}

body.dark-mode .qrscan-modal .btn-ghost,
html.dark-mode .qrscan-modal .btn-ghost {
  background: #1c1d22 !important;
  color: #f3f4f6 !important;
  border-color: #2a2b30 !important;
}

body.dark-mode .qrscan-modal .modal-name,
html.dark-mode .qrscan-modal .modal-name {
  color: #ffffff !important;
}

body.dark-mode .qrscan-modal .modal-sub,
html.dark-mode .qrscan-modal .modal-sub {
  color: #cbd5f5 !important;
}

/* Statics page */
body.dark-mode .statics-section,
body.dark-mode .statics-summary-card,
body.dark-mode .statics-filter-wrap,
html.dark-mode .statics-section,
html.dark-mode .statics-summary-card,
html.dark-mode .statics-filter-wrap {
  background: #1c1d22 !important;
}

body.dark-mode .statics-list-row,
html.dark-mode .statics-list-row {
  background: #23252d !important;
  border-color: #2f3340 !important;
}

body.dark-mode .statics-card-stat-row,
body.dark-mode .statics-card-stat-metrics .metric,
html.dark-mode .statics-card-stat-row,
html.dark-mode .statics-card-stat-metrics .metric {
  background: #23252d !important;
  border-color: #2f3340 !important;
}

body.dark-mode .statics-summary-value,
body.dark-mode .statics-list-row .title,
body.dark-mode .statics-card-stat-top .name,
body.dark-mode .statics-card-stat-metrics .metric strong,
html.dark-mode .statics-summary-value,
html.dark-mode .statics-list-row .title,
html.dark-mode .statics-card-stat-top .name,
html.dark-mode .statics-card-stat-metrics .metric strong {
  color: #f9fafb !important;
}

body.dark-mode .statics-summary-label,
body.dark-mode .statics-summary-sub,
body.dark-mode .statics-list-row .sub,
body.dark-mode .statics-card-stat-metrics .metric span,
body.dark-mode .statics-empty,
body.dark-mode .statics-note,
body.dark-mode .statics-bar-label,
body.dark-mode .statics-list-row .right.small,
html.dark-mode .statics-summary-label,
html.dark-mode .statics-summary-sub,
html.dark-mode .statics-list-row .sub,
html.dark-mode .statics-card-stat-metrics .metric span,
html.dark-mode .statics-empty,
html.dark-mode .statics-note,
html.dark-mode .statics-bar-label,
html.dark-mode .statics-list-row .right.small {
  color: #cbd5f5 !important;
}

body.dark-mode .statics-bar-value,
html.dark-mode .statics-bar-value {
  color: #e5e7eb !important;
}

body.dark-mode .statics-filter-trigger,
body.dark-mode .statics-filter-menu,
html.dark-mode .statics-filter-trigger,
html.dark-mode .statics-filter-menu {
  background: #23252d !important;
  border-color: #2f3340 !important;
  color: #f9fafb !important;
}

body.dark-mode .statics-filter-label,
body.dark-mode .statics-filter-note,
html.dark-mode .statics-filter-label,
html.dark-mode .statics-filter-note {
  color: #cbd5f5 !important;
}

body.dark-mode .statics-filter-trigger i,
html.dark-mode .statics-filter-trigger i {
  color: #cbd5f5 !important;
}

body.dark-mode .statics-filter-option:hover,
html.dark-mode .statics-filter-option:hover {
  background: #2b2f3a !important;
}

body.dark-mode .statics-filter-option.active,
html.dark-mode .statics-filter-option.active {
  background: #3a1f28 !important;
}

body.dark-mode .statics-filter-option .text,
html.dark-mode .statics-filter-option .text {
  color: #f9fafb !important;
}

body.dark-mode .statics-card,
html.dark-mode .statics-card {
  border-color: #2f3340 !important;
  background:
    radial-gradient(circle at top right, rgba(255, 82, 82, 0.18), transparent 55%),
    linear-gradient(180deg, #1f2230 0%, #1a1d27 100%) !important;
}

body.dark-mode .statics-card h2,
html.dark-mode .statics-card h2 {
  color: #ffffff !important;
}

body.dark-mode .statics-card p,
html.dark-mode .statics-card p {
  color: #cbd5f5 !important;
}

body.dark-mode .statics-card-icon,
html.dark-mode .statics-card-icon {
  background: #3a1f28 !important;
  border-color: #6a2a3a !important;
  color: #ff8f8f !important;
}

body.dark-mode .statics-section-head h3,
html.dark-mode .statics-section-head h3 {
  color: #ffffff !important;
}

body.dark-mode .statics-note,
html.dark-mode .statics-note {
  background: #23252d !important;
  border-color: #2f3340 !important;
  color: #cbd5f5 !important;
}

body.dark-mode .statics-trend.up,
html.dark-mode .statics-trend.up {
  background: #173127 !important;
  color: #86efac !important;
}

body.dark-mode .statics-trend.down,
html.dark-mode .statics-trend.down {
  background: #3a1f28 !important;
  color: #fca5a5 !important;
}

body.dark-mode .statics-trend.flat,
html.dark-mode .statics-trend.flat {
  background: #2f3340 !important;
  color: #cbd5f5 !important;
}

body.dark-mode .statics-filter-trigger .thumb,
body.dark-mode .statics-filter-option .thumb,
html.dark-mode .statics-filter-trigger .thumb,
html.dark-mode .statics-filter-option .thumb {
  background: #1b1f2a !important;
  border-color: #2f3340 !important;
}