html[data-theme="dark"] body,
body.dark-version,
body.dark-mode {
    background-color: #0f1425 !important;
    color: #e5e7eb !important;
}

html[data-theme="dark"] body,
body.dark-version,
body.dark-mode,
html[data-theme="dark"] body.g-sidenav-show,
body.dark-version.g-sidenav-show,
body.dark-mode.g-sidenav-show {
    background-image: linear-gradient(135deg, rgba(12, 16, 30, 0.86), rgba(14, 21, 41, 0.86)), url('/static/assets/img/bg_white.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

body.dark-version .main-content,
body.dark-mode .main-content,
html[data-theme="dark"] .main-content,
body.dark-version .container,
body.dark-mode .container,
body.dark-version .container-fluid,
body.dark-mode .container-fluid,
html[data-theme="dark"] .container,
html[data-theme="dark"] .container-fluid {
    background: transparent !important;
}

body.dark-version .card,
body.dark-mode .card,
html[data-theme="dark"] .card,
body.dark-version .modal-content,
body.dark-mode .modal-content,
html[data-theme="dark"] .modal-content,
body.dark-version .dropdown-menu,
body.dark-mode .dropdown-menu,
html[data-theme="dark"] .dropdown-menu,
body.dark-version .offcanvas,
body.dark-mode .offcanvas,
html[data-theme="dark"] .offcanvas,
body.dark-version [class$='-card'],
body.dark-mode [class$='-card'],
html[data-theme="dark"] [class$='-card'],
body.dark-version [class*='-card '],
body.dark-mode [class*='-card '],
html[data-theme="dark"] [class*='-card '] {
    background: #171f36 !important;
    color: #e5e7eb !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

body.dark-version .bg-white,
body.dark-mode .bg-white,
html[data-theme="dark"] .bg-white,
body.dark-version .overview-card,
body.dark-mode .overview-card,
html[data-theme="dark"] .overview-card,
body.dark-version .stats-card,
body.dark-mode .stats-card,
html[data-theme="dark"] .stats-card,
body.dark-version .network-option-card,
body.dark-mode .network-option-card,
html[data-theme="dark"] .network-option-card,
body.dark-version .wallet-card,
body.dark-mode .wallet-card,
html[data-theme="dark"] .wallet-card,
body.dark-version .user-info-card,
body.dark-mode .user-info-card,
html[data-theme="dark"] .user-info-card,
body.dark-version .retailer-switch-card,
body.dark-mode .retailer-switch-card,
html[data-theme="dark"] .retailer-switch-card,
body.dark-version .retailer-card-custom,
body.dark-mode .retailer-card-custom,
html[data-theme="dark"] .retailer-card-custom,
body.dark-version .retailer-account-card,
body.dark-mode .retailer-account-card,
html[data-theme="dark"] .retailer-account-card,
body.dark-version .account-card,
body.dark-mode .account-card,
html[data-theme="dark"] .account-card,
body.dark-version .review-detail-card,
body.dark-mode .review-detail-card,
html[data-theme="dark"] .review-detail-card,
body.dark-version .review-info-card,
body.dark-mode .review-info-card,
html[data-theme="dark"] .review-info-card,
body.dark-version .review-receipt-card,
body.dark-mode .review-receipt-card,
html[data-theme="dark"] .review-receipt-card,
body.dark-version .campaign-dashboard-card,
body.dark-mode .campaign-dashboard-card,
html[data-theme="dark"] .campaign-dashboard-card {
    background: #171f36 !important;
    color: #e5e7eb !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Auth pages: make entire page dark in dark mode (not just card) */
html[data-theme="dark"] body .page-header,
body.dark-version .page-header,
body.dark-mode .page-header {
       /* lower overlay alpha so the patterned background image shows through */
    background-image: linear-gradient(135deg, rgba(12, 16, 30, 0.86), rgba(14, 21, 41, 0.86)), url('/static/assets/img/bg_white.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-color: #0f1425 !important;
}

/* Make auth cards cast a stronger shadow in light mode so they stand out */
body:not(.dark-mode):not(.dark-version) .page-header .card,
body:not(.dark-mode):not(.dark-version) .auth-card,
body:not(.dark-mode):not(.dark-version) .login-card,
body:not(.dark-mode):not(.dark-version) .signin-card,
body:not(.dark-mode):not(.dark-version) .signup-card {
    box-shadow: 0 20px 60px rgba(14,21,41,0.12), 0 6px 18px rgba(14,21,41,0.06) !important;
}

html[data-theme="dark"] body.bg-gray-100,
body.dark-version.bg-gray-100,
body.dark-mode.bg-gray-100,
html[data-theme="dark"] body.bg-gray-100 .main-content,
body.dark-version.bg-gray-100 .main-content,
body.dark-mode.bg-gray-100 .main-content {
    background-color: #0f1425 !important;
    background-image: linear-gradient(135deg, rgba(12, 16, 30, 0.96), rgba(14, 21, 41, 0.96)) !important;
}

/* Invitations + Connection page dark consistency */
html[data-theme="dark"] .conn-card,
body.dark-version .conn-card,
body.dark-mode .conn-card {
    background: #171f36 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e5e7eb !important;
}

html[data-theme="dark"] .conn-api-display,
body.dark-version .conn-api-display,
body.dark-mode .conn-api-display {
    background: #1f243d !important;
    color: #dbe4ff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] .alert.alert-info,
body.dark-version .alert.alert-info,
body.dark-mode .alert.alert-info {
    background: rgba(23, 193, 232, 0.14) !important;
    border-color: rgba(23, 193, 232, 0.35) !important;
    color: #dbe4ff !important;
}

body.dark-version .card .card-body,
body.dark-mode .card .card-body,
body.dark-version [class$='-card'] .card-body,
body.dark-mode [class$='-card'] .card-body {
    background: transparent !important;
}

body.dark-version .card-header,
body.dark-mode .card-header,
body.dark-version .card-footer,
body.dark-mode .card-footer,
body.dark-version .modal-header,
body.dark-mode .modal-header,
body.dark-version .modal-footer,
body.dark-mode .modal-footer {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-version .table,
body.dark-mode .table,
body.dark-version .table td,
body.dark-mode .table td,
body.dark-version .table th,
body.dark-mode .table th {
    color: #e5e7eb !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    background-color: transparent !important;
}

body.dark-version .form-control,
body.dark-mode .form-control,
body.dark-version .form-select,
body.dark-mode .form-select,
body.dark-version input,
body.dark-mode input,
body.dark-version textarea,
body.dark-mode textarea,
body.dark-version select,
body.dark-mode select {
    background-color: #1f243d !important;
    color: #e5e7eb !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Improve visibility of the small search input on light-mode pages */
body:not(.dark-mode):not(.dark-version) .search-input {
    background-color: #ffffff !important;
    color: #111827 !important; /* darker text */
    border: 1px solid rgba(17,24,39,0.08) !important;
    box-shadow: 0 6px 18px rgba(14,21,41,0.06) !important;
}

body:not(.dark-mode):not(.dark-version) .search-input::placeholder {
    color: #6b7280 !important;
}

body:not(.dark-mode):not(.dark-version) .search-input:focus {
    border-color: #36d6ff !important;
    box-shadow: 0 8px 24px rgba(54,214,255,0.12) !important;
    outline: none !important;
}

/* Icon positioning and input padding for the search input */
.filter-input-group { position: relative; display: inline-block; }
.filter-input-group .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 14px;
    pointer-events: none;
}
.filter-input-group .search-input {
    padding-left: 40px !important;
    border-radius: 10px !important;
}

/* Dark-mode variant for the input and icon */
body.dark-mode .filter-input-group .search-input,
body.dark-version .filter-input-group .search-input {
    background: #121521 !important;
    color: #d1d5db !important;
    border: 1px solid rgba(255,255,255,0.04) !important;
}
body.dark-mode .filter-input-group .search-icon,
body.dark-version .filter-input-group .search-icon {
    color: #9ca3af !important;
}

body.dark-version .form-control::placeholder,
body.dark-mode .form-control::placeholder,
body.dark-version input::placeholder,
body.dark-mode input::placeholder,
body.dark-version textarea::placeholder,
body.dark-mode textarea::placeholder {
    color: #9ca3af !important;
}

body.dark-version .form-control:focus,
body.dark-mode .form-control:focus,
body.dark-version .form-select:focus,
body.dark-mode .form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(89, 108, 255, 0.25) !important;
}

/* Chrome autofill / focus fixes: keep inputs dark when filled or autofilled */
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill,
body.dark-mode input:-webkit-autofill,
body.dark-version input:-webkit-autofill,
body.dark-mode textarea:-webkit-autofill,
body.dark-version textarea:-webkit-autofill,
body.dark-mode select:-webkit-autofill,
body.dark-version select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #1f243d inset !important;
    box-shadow: 0 0 0 1000px #1f243d inset !important;
    -webkit-text-fill-color: #e5e7eb !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

html[data-theme="dark"] input:-webkit-autofill:focus,
html[data-theme="dark"] textarea:-webkit-autofill:focus,
html[data-theme="dark"] select:-webkit-autofill:focus,
body.dark-mode input:-webkit-autofill:focus,
body.dark-version input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #1f243d inset !important;
    box-shadow: 0 0 0 1000px #1f243d inset !important;
    outline: none !important;
}

/* Ensure focus state doesn't produce a bright white background */
body.dark-mode .form-control:focus,
body.dark-version .form-control:focus,
html[data-theme="dark"] .form-control:focus {
    background-color: #1f243d !important;
    color: #e5e7eb !important;
    border-color: rgba(255,255,255,0.12) !important;
}

body.dark-version .btn-outline-dark,
body.dark-mode .btn-outline-dark {
    color: #dbe4ff !important;
    border-color: rgba(219, 228, 255, 0.45) !important;
}

body.dark-version .btn-outline-dark:hover,
body.dark-mode .btn-outline-dark:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

body.dark-version .global-navbar,
body.dark-mode .global-navbar {
    background: rgba(17, 19, 34, 0.8) !important;
    backdrop-filter: blur(6px);
}

body.dark-version .navbar-email,
body.dark-mode .navbar-email,
body.dark-version .admin-badge,
body.dark-mode .admin-badge,
body.dark-version .notification-badge i,
body.dark-mode .notification-badge i {
    color: #e5e7eb !important;
}

body.dark-version .navbar-toggler-icon,
body.dark-mode .navbar-toggler-icon,
body.dark-version .navbar-toggler-icon::before,
body.dark-mode .navbar-toggler-icon::before,
body.dark-version .navbar-toggler-icon::after,
body.dark-mode .navbar-toggler-icon::after {
    background-color: #e5e7eb !important;
}

body.dark-version .notification-badge:hover,
body.dark-mode .notification-badge:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-version .navbar-email,
body.dark-mode .navbar-email,
body.dark-version .admin-badge,
body.dark-mode .admin-badge,
body.dark-version .text-dark,
body.dark-mode .text-dark,
body.dark-version h1,
body.dark-mode h1,
body.dark-version h2,
body.dark-mode h2,
body.dark-version h3,
body.dark-mode h3,
body.dark-version h4,
body.dark-mode h4,
body.dark-version h5,
body.dark-mode h5,
body.dark-version h6,
body.dark-mode h6,
body.dark-version p,
body.dark-mode p,
body.dark-version span,
body.dark-mode span,
body.dark-version label,
body.dark-mode label,
body.dark-version li,
body.dark-mode li {
    color: #e5e7eb !important;
}

body.dark-version #sidenav-main,
body.dark-mode #sidenav-main,
body.dark-version .sidenav,
body.dark-mode .sidenav,
body.dark-version .campaign-sidenav,
body.dark-mode .campaign-sidenav {
    background: #141728 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-version .sidenav .nav-link,
body.dark-mode .sidenav .nav-link,
body.dark-version .sidenav .nav-link .nav-link-text,
body.dark-mode .sidenav .nav-link .nav-link-text {
    color: #d1d5db !important;
}

body.dark-version .sidenav .nav-link.active,
body.dark-mode .sidenav .nav-link.active,
html[data-theme="dark"] .sidenav .nav-link.active,
body.dark-version .campaign-sidenav .nav-link.active,
body.dark-mode .campaign-sidenav .nav-link.active,
html[data-theme="dark"] .campaign-sidenav .nav-link.active {
    background: var(--primary-gradient) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(23, 193, 232, 0.28) !important;
}

/* Ensure the circular icon uses the same primary gradient and white SVG fills */
body.dark-version .sidenav .nav-link.active .icon,
body.dark-mode .sidenav .nav-link.active .icon,
html[data-theme="dark"] .sidenav .nav-link.active .icon,
body.dark-version .campaign-sidenav .nav-link.active .icon,
body.dark-mode .campaign-sidenav .nav-link.active .icon,
html[data-theme="dark"] .campaign-sidenav .nav-link.active .icon {
    background: var(--primary-gradient) !important;
}

body.dark-version .sidenav .nav-link.active .icon svg .color-background,
body.dark-mode .sidenav .nav-link.active .icon svg .color-background,
html[data-theme="dark"] .sidenav .nav-link.active .icon svg .color-background,
body.dark-version .sidenav .nav-link.active .icon svg .color-foreground,
body.dark-mode .sidenav .nav-link.active .icon svg .color-foreground,
html[data-theme="dark"] .sidenav .nav-link.active .icon svg .color-foreground,
body.dark-version .campaign-sidenav .nav-link.active .icon svg .color-background,
body.dark-mode .campaign-sidenav .nav-link.active .icon svg .color-background,
html[data-theme="dark"] .campaign-sidenav .nav-link.active .icon svg .color-background,
body.dark-version .campaign-sidenav .nav-link.active .icon svg .color-foreground,
body.dark-mode .campaign-sidenav .nav-link.active .icon svg .color-foreground,
html[data-theme="dark"] .campaign-sidenav .nav-link.active .icon svg .color-foreground {
    fill: #ffffff !important;
}

/* Override light-mode-specific rules that force icon backgrounds to pale/white
   (e.g. `.navbar-vertical.bg-white .navbar-nav .nav-link .icon`) so icons keep
   the primary gradient in dark mode. */
body.dark-version .navbar-vertical.bg-white .navbar-nav .nav-link .icon,
body.dark-mode .navbar-vertical.bg-white .navbar-nav .nav-link .icon,
html[data-theme="dark"] .navbar-vertical.bg-white .navbar-nav .nav-link .icon {
    background-image: var(--primary-gradient) !important;
    background: var(--primary-gradient) !important;
}

/* Also ensure active icon state uses the primary gradient when the navbar has
   a `bg-white` class applied in the markup. */
body.dark-version .navbar-vertical.bg-white .navbar-nav>.nav-item .nav-link.active .icon,
body.dark-mode .navbar-vertical.bg-white .navbar-nav>.nav-item .nav-link.active .icon,
html[data-theme="dark"] .navbar-vertical.bg-white .navbar-nav>.nav-item .nav-link.active .icon {
    background-image: var(--primary-gradient) !important;
    background: var(--primary-gradient) !important;
}

/* SVG fills inside the icon (color-background / color-foreground) */
body.dark-version .navbar-vertical .navbar-nav .nav-link .icon svg .color-background,
body.dark-mode .navbar-vertical .navbar-nav .nav-link .icon svg .color-background,
html[data-theme="dark"] .navbar-vertical .navbar-nav .nav-link .icon svg .color-background,
body.dark-version .navbar-vertical .navbar-nav .nav-link .icon svg .color-foreground,
body.dark-mode .navbar-vertical .navbar-nav .nav-link .icon svg .color-foreground,
html[data-theme="dark"] .navbar-vertical .navbar-nav .nav-link .icon svg .color-foreground {
    fill: #ffffff !important;
}

body.dark-version .sidenav .nav-link.active .nav-link-text,
body.dark-mode .sidenav .nav-link.active .nav-link-text,
html[data-theme="dark"] .sidenav .nav-link.active .nav-link-text,
body.dark-version .campaign-sidenav .nav-link.active .nav-link-text,
body.dark-mode .campaign-sidenav .nav-link.active .nav-link-text,
html[data-theme="dark"] .campaign-sidenav .nav-link.active .nav-link-text {
    color: #ffffff !important;
}

/* Theme toggle inline switch styles (navbar placement and floating fallback) */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0 10px;
    cursor: pointer;
}

.theme-toggle-btn .toggle-switch {
    width: 44px;
    height: 24px;
    background: rgba(255,255,255,0.12);
    border-radius: 999px;
    position: relative;
    transition: background-color 200ms ease;
    display: inline-block;
}

.theme-toggle-btn .toggle-switch .knob {
    width: 20px;
    height: 20px;
    background: transparent;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 200ms ease, background-color 200ms ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.theme-toggle-btn.on .toggle-switch {
    background: linear-gradient(90deg, #36d6ff, #5b7bff);
}

.theme-toggle-btn.on .toggle-switch .knob {
    transform: translateX(20px);
    background: #ffffff;
}

/* Smaller variant for tight navbar placement */
.theme-toggle-btn.in-navbar .toggle-switch {
    width: 36px;
    height: 20px;
}

.theme-toggle-btn.in-navbar .toggle-switch .knob {
    width: 16px;
    height: 16px;
    top: 2px;
    left: 2px;
}

.theme-toggle-btn.in-navbar.on .toggle-switch .knob {
    transform: translateX(16px);
}

body.dark-version a,
body.dark-mode a {
    color: #9dc4ff;
}

body.dark-version .text-muted,
body.dark-mode .text-muted,
body.dark-version .text-secondary,
body.dark-mode .text-secondary,
body.dark-version small,
body.dark-mode small {
    color: #9ca3af !important;
}

/* ─── bg-light & bg-white utility overrides ─── */
body.dark-version .bg-light,
body.dark-mode .bg-light,
html[data-theme="dark"] .bg-light {
    background-color: #1c2440 !important;
    color: #e5e7eb !important;
}

body.dark-version .bg-white,
body.dark-mode .bg-white,
html[data-theme="dark"] .bg-white {
    background-color: #1c2440 !important;
    color: #e5e7eb !important;
}

/* ─── Retailer card inner sections (Account page) ─── */
body.dark-version .retailer-card-section,
body.dark-mode .retailer-card-section,
html[data-theme="dark"] .retailer-card-section,
body.dark-version .retailer-card-section-small,
body.dark-mode .retailer-card-section-small,
html[data-theme="dark"] .retailer-card-section-small {
    background: #1c2440 !important;
    color: #e5e7eb !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Nested bg-white items inside retailer sections (outlet list items) */
body.dark-version .retailer-card-section .bg-white,
body.dark-mode .retailer-card-section .bg-white,
html[data-theme="dark"] .retailer-card-section .bg-white,
body.dark-version .border-radius-md.bg-white,
body.dark-mode .border-radius-md.bg-white {
    background-color: #222a48 !important;
}

/* ─── Card header / footer backgrounds ─── */
body.dark-version .card-header,
body.dark-mode .card-header,
html[data-theme="dark"] .card-header {
    background: transparent !important;
    color: #e5e7eb !important;
}

/* ─── Table thead bg-light ─── */
body.dark-version thead.bg-light,
body.dark-mode thead.bg-light,
html[data-theme="dark"] thead.bg-light,
body.dark-version thead.bg-light th,
body.dark-mode thead.bg-light th,
html[data-theme="dark"] thead.bg-light th {
    background-color: #1c2440 !important;
    color: #9ca3af !important;
}

/* ─── Subscription & outlet modal content ─── */
body.dark-version .subscription-modal-content,
body.dark-mode .subscription-modal-content,
html[data-theme="dark"] .subscription-modal-content,
body.dark-version .outlet-account-modal-content,
body.dark-mode .outlet-account-modal-content,
html[data-theme="dark"] .outlet-account-modal-content,
body.dark-version .outlet-info-modal-content,
body.dark-mode .outlet-info-modal-content,
html[data-theme="dark"] .outlet-info-modal-content,
body.dark-version .bill-detail-modal-content,
body.dark-mode .bill-detail-modal-content,
html[data-theme="dark"] .bill-detail-modal-content {
    background: #171f36 !important;
    color: #e5e7eb !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Ensure modal headers inside subscription/switch modals blend with dark modal background */
body.dark-version .subscription-modal-content .modal-header,
body.dark-mode .subscription-modal-content .modal-header,
html[data-theme="dark"] .subscription-modal-content .modal-header,
body.dark-version .switch-retailer-modal-content .modal-header,
body.dark-mode .switch-retailer-modal-content .modal-header,
html[data-theme="dark"] .switch-retailer-modal-content .modal-header {
    background: transparent !important;
    color: #e5e7eb !important;
    border-bottom-color: rgba(255,255,255,0.04) !important;
}

/* Override any light-mode header classes used for the switch modal */
body.dark-version .switch-retailer-modal-header,
body.dark-mode .switch-retailer-modal-header,
html[data-theme="dark"] .switch-retailer-modal-header {
    background: transparent !important;
    color: #e5e7eb !important;
    border-bottom-color: rgba(255,255,255,0.04) !important;
}

/* Make subscription modal titles light and ensure close button remains visible */
body.dark-version .subscription-modal-content .modal-title,
body.dark-mode .subscription-modal-content .modal-title,
html[data-theme="dark"] .subscription-modal-content .modal-title,
body.dark-version .switch-retailer-modal-content .modal-title,
body.dark-mode .switch-retailer-modal-content .modal-title,
html[data-theme="dark"] .switch-retailer-modal-content .modal-title {
    color: #e5e7eb !important;
}

/* ─── Wallet modal sections ─── */
body.dark-version .wallet-topup-section,
body.dark-mode .wallet-topup-section,
html[data-theme="dark"] .wallet-topup-section {
    background: #1c2440 !important;
    color: #e5e7eb !important;
}

/* ─── Campaign setup modal / header ─── */
body.dark-version .campaign-setup-modal,
body.dark-mode .campaign-setup-modal,
html[data-theme="dark"] .campaign-setup-modal {
    background: #171f36 !important;
    color: #e5e7eb !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Improve contrast for campaign list text in dark mode */
body.dark-version .campaign-name,
body.dark-mode .campaign-name,
html[data-theme="dark"] .campaign-name {
    color: #e5e7eb !important;
}

body.dark-version .campaign-id,
body.dark-mode .campaign-id,
html[data-theme="dark"] .campaign-id,
body.dark-version .metric-label,
body.dark-mode .metric-label,
html[data-theme="dark"] .metric-label {
    color: #9ca3af !important;
}

body.dark-version .campaign-action-btn,
body.dark-mode .campaign-action-btn,
html[data-theme="dark"] .campaign-action-btn {
    color: #cbd5e1 !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* Ensure card titles are clearly visible */
body.dark-version .card-title,
body.dark-mode .card-title,
html[data-theme="dark"] .card-title {
    color: #e5e7eb !important;
}

body.dark-version .campaign-setup-header,
body.dark-mode .campaign-setup-header,
html[data-theme="dark"] .campaign-setup-header {
    background: #171f36 !important;
    color: #e5e7eb !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ─── Network description box (campaign setup) ─── */
body.dark-version .network-description-box,
body.dark-mode .network-description-box,
html[data-theme="dark"] .network-description-box {
    background: rgba(105, 139, 214, 0.12) !important;
}

/* ─── Alert boxes ─── */
body.dark-version .alert,
body.dark-mode .alert,
html[data-theme="dark"] .alert {
    background-color: #1c2440 !important;
    color: #e5e7eb !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ─── Subscription outlet pill ─── */
body.dark-version .subscription-outlet-pill,
body.dark-mode .subscription-outlet-pill,
html[data-theme="dark"] .subscription-outlet-pill {
    background: #1c2440 !important;
    color: #e5e7eb !important;
}

/* ─── Outlet list item hover ─── */
body.dark-version .outlet-list-item,
body.dark-mode .outlet-list-item,
html[data-theme="dark"] .outlet-list-item {
    border-color: rgba(255, 255, 255, 0.08) !important;
    background: #171f36 !important;
    color: #e5e7eb !important;
}

body.dark-version .outlet-list-item:hover,
body.dark-mode .outlet-list-item:hover,
html[data-theme="dark"] .outlet-list-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* ─── btn-outline-secondary in dark mode ─── */
body.dark-version .btn-outline-secondary,
body.dark-mode .btn-outline-secondary,
html[data-theme="dark"] .btn-outline-secondary {
    background: transparent !important;
    color: #d1d5db !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* ─── btn-outline-primary in dark mode ─── */
body.dark-version .btn-outline-primary,
body.dark-mode .btn-outline-primary,
html[data-theme="dark"] .btn-outline-primary {
    background: transparent !important;
    color: #17c1e8 !important;
    border-color: #17c1e8 !important;
}

/* ─── Rounded / light util bg overrides ─── */
body.dark-version .rounded.bg-light,
body.dark-mode .rounded.bg-light,
html[data-theme="dark"] .rounded.bg-light,
body.dark-version .p-3.bg-light,
body.dark-mode .p-3.bg-light,
html[data-theme="dark"] .p-3.bg-light {
    background-color: #1c2440 !important;
}

/* ─── Campaign table rows ─── */
body.dark-version .campaign-row,
body.dark-mode .campaign-row,
html[data-theme="dark"] .campaign-row {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

body.dark-version .campaign-row:hover,
body.dark-mode .campaign-row:hover,
html[data-theme="dark"] .campaign-row:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

/* Keep campaign dashboard table rows dark on hover, including empty-state row */
body.dark-version .campaign-table tbody tr:hover,
body.dark-mode .campaign-table tbody tr:hover,
html[data-theme="dark"] .campaign-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

/* ─── Subscription details item border ─── */
body.dark-version .subscription-details-item,
body.dark-mode .subscription-details-item,
html[data-theme="dark"] .subscription-details-item {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ─── hr separator ─── */
body.dark-version hr,
body.dark-mode hr,
html[data-theme="dark"] hr {
    border-color: rgba(255, 255, 255, 0.1) !important;
    opacity: 1;
}

/* ═══════════════════════════════════════════
   CONNECTION PAGE - Dark Mode
   ═══════════════════════════════════════════ */

/* API Key Card */
body.dark-version .api-key-card,
body.dark-mode .api-key-card,
html[data-theme="dark"] .api-key-card {
    background: #171f36 !important;
    color: #e5e7eb !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* API Key Content Box */
body.dark-version .api-key-content-box,
body.dark-mode .api-key-content-box,
html[data-theme="dark"] .api-key-content-box {
    background: #1c2440 !important;
    color: #e5e7eb !important;
}

/* API Key Title */
body.dark-version .api-key-title,
body.dark-mode .api-key-title,
html[data-theme="dark"] .api-key-title {
    color: #e5e7eb !important;
}

/* API Key Value */
body.dark-version .api-key-value,
body.dark-mode .api-key-value,
html[data-theme="dark"] .api-key-value {
    color: #d1d5db !important;
}

/* API Key Email */
body.dark-version .api-key-email,
body.dark-mode .api-key-email,
html[data-theme="dark"] .api-key-email {
    color: #9ca3af !important;
}

/* Copy Button */
body.dark-version .copy-btn,
body.dark-mode .copy-btn,
html[data-theme="dark"] .copy-btn {
    color: #9ca3af !important;
}

body.dark-version .copy-btn:hover,
body.dark-mode .copy-btn:hover,
html[data-theme="dark"] .copy-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #e5e7eb !important;
}

/* QR Code Box */
body.dark-version .qr-code-box,
body.dark-mode .qr-code-box,
html[data-theme="dark"] .qr-code-box {
    background: #1c2440 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* QR Code Label */
body.dark-version .qr-code-label,
body.dark-mode .qr-code-label,
html[data-theme="dark"] .qr-code-label {
    color: #9ca3af !important;
}

/* Connect Status Button (not connected variant) */
body.dark-version .connect-status-btn.not-connected,
body.dark-mode .connect-status-btn.not-connected,
html[data-theme="dark"] .connect-status-btn.not-connected {
    background: transparent !important;
    color: #17c1e8 !important;
    border-color: #17c1e8 !important;
}

/* Connection Setup Modal (right sidebar) */
body.dark-version .connection-setup-modal,
body.dark-mode .connection-setup-modal,
html[data-theme="dark"] .connection-setup-modal {
    background: #171f36 !important;
    color: #e5e7eb !important;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.4) !important;
}

/* Setup Modal Title */
body.dark-version .setup-modal-title,
body.dark-mode .setup-modal-title,
html[data-theme="dark"] .setup-modal-title {
    color: #e5e7eb !important;
}

/* Setup Modal Subtitle */
body.dark-version .setup-modal-subtitle,
body.dark-mode .setup-modal-subtitle,
html[data-theme="dark"] .setup-modal-subtitle {
    color: #9ca3af !important;
}

/* Step Instruction text */
body.dark-version .step-instruction,
body.dark-mode .step-instruction,
html[data-theme="dark"] .step-instruction {
    color: #d1d5db !important;
}

/* Step Image Box */
body.dark-version .step-image-box,
body.dark-mode .step-image-box,
html[data-theme="dark"] .step-image-box {
    background: #1c2440 !important;
}

/* Step Image border */
body.dark-version .step-img,
body.dark-mode .step-img,
html[data-theme="dark"] .step-img {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ═══════════════════════════════════════════
   INVITATIONS PAGE - Dark Mode
   ═══════════════════════════════════════════ */

/* Table hover rows */
body.dark-version .table-hover tbody tr:hover,
body.dark-mode .table-hover tbody tr:hover,
html[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

/* Alert Info */
body.dark-version .alert-info,
body.dark-mode .alert-info,
html[data-theme="dark"] .alert-info {
    background-color: rgba(23, 193, 232, 0.1) !important;
    border-color: rgba(23, 193, 232, 0.2) !important;
    color: #e5e7eb !important;
}

/* Alert with icon */
body.dark-version .alert-with-icon,
body.dark-mode .alert-with-icon,
html[data-theme="dark"] .alert-with-icon {
    background-color: rgba(23, 193, 232, 0.1) !important;
    border-color: rgba(23, 193, 232, 0.2) !important;
}

/* ═══════════════════════════════════════════
   GENERAL - Additional Dark Mode Fixes
   ═══════════════════════════════════════════ */

/* Retailer accounts section */
body.dark-version .retailer-accounts,
body.dark-mode .retailer-accounts,
html[data-theme="dark"] .retailer-accounts {
    background: #171f36 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e5e7eb !important;
}

/* Network description box */
body.dark-version .network-description-box,
body.dark-mode .network-description-box,
html[data-theme="dark"] .network-description-box {
    background: rgba(105, 139, 214, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* DataTables override (used on invitations and other pages) */
body.dark-version .dataTables_wrapper,
body.dark-mode .dataTables_wrapper,
html[data-theme="dark"] .dataTables_wrapper {
    color: #e5e7eb !important;
}

body.dark-version .dataTables_wrapper .dataTables_length,
body.dark-mode .dataTables_wrapper .dataTables_length,
body.dark-version .dataTables_wrapper .dataTables_filter,
body.dark-mode .dataTables_wrapper .dataTables_filter,
body.dark-version .dataTables_wrapper .dataTables_info,
body.dark-mode .dataTables_wrapper .dataTables_info,
body.dark-version .dataTables_wrapper .dataTables_paginate,
body.dark-mode .dataTables_wrapper .dataTables_paginate {
    color: #9ca3af !important;
}

/* ═══════════════════════════════════════════
   CAMPAIGN ONBOARDING & SETUP MODALS - Dark Mode
   ═══════════════════════════════════════════ */

/* Onboarding modal (custom overlay-based, not Bootstrap .modal-content) */
body.dark-version .campaign-onboarding-modal,
body.dark-mode .campaign-onboarding-modal,
html[data-theme="dark"] .campaign-onboarding-modal {
    background: #171f36 !important;
    color: #e5e7eb !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

body.dark-version .campaign-onboarding-modal .modal-body,
body.dark-mode .campaign-onboarding-modal .modal-body,
html[data-theme="dark"] .campaign-onboarding-modal .modal-body {
    background: transparent !important;
    color: #e5e7eb !important;
}

body.dark-version .onboarding-title,
body.dark-mode .onboarding-title,
html[data-theme="dark"] .onboarding-title {
    color: #e5e7eb !important;
}

body.dark-version .onboarding-text,
body.dark-mode .onboarding-text,
html[data-theme="dark"] .onboarding-text,
body.dark-version .onboarding-text p,
body.dark-mode .onboarding-text p,
html[data-theme="dark"] .onboarding-text p {
    color: #d1d5db !important;
}

body.dark-version .onboarding-text strong,
body.dark-mode .onboarding-text strong,
html[data-theme="dark"] .onboarding-text strong {
    color: #f3f4f6 !important;
}

body.dark-version .btn-close-modal,
body.dark-mode .btn-close-modal,
html[data-theme="dark"] .btn-close-modal {
    color: #9ca3af !important;
}

body.dark-version .btn-close-modal:hover,
body.dark-mode .btn-close-modal:hover,
html[data-theme="dark"] .btn-close-modal:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #e5e7eb !important;
}

/* Campaign setup modal (multi-step wizard) */
body.dark-version .campaign-setup-modal-container,
body.dark-mode .campaign-setup-modal-container,
html[data-theme="dark"] .campaign-setup-modal-container {
    color: #e5e7eb !important;
}

body.dark-version .campaign-setup-modal,
body.dark-mode .campaign-setup-modal,
html[data-theme="dark"] .campaign-setup-modal {
    background: #171f36 !important;
    color: #e5e7eb !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .campaign-setup-header,
body.dark-mode .campaign-setup-header,
html[data-theme="dark"] .campaign-setup-header {
    background: #171f36 !important;
    color: #e5e7eb !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Onboarding overlay background */
body.dark-version .onboarding-overlay,
body.dark-mode .onboarding-overlay,
html[data-theme="dark"] .onboarding-overlay {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* Network option cards inside campaign setup */
body.dark-version .network-option-card,
body.dark-mode .network-option-card,
html[data-theme="dark"] .network-option-card {
    background: #1c2440 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e5e7eb !important;
}

body.dark-version .network-option-card:hover,
body.dark-mode .network-option-card:hover,
html[data-theme="dark"] .network-option-card:hover {
    background: #222a48 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Account selection boxes inside campaign setup */
body.dark-version .account-selection-box,
body.dark-mode .account-selection-box,
html[data-theme="dark"] .account-selection-box {
    background: #1c2440 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .account-option,
body.dark-mode .account-option,
html[data-theme="dark"] .account-option {
    background: #1c2440 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #e5e7eb !important;
}

body.dark-version .account-option:hover,
body.dark-mode .account-option:hover,
html[data-theme="dark"] .account-option:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

body.dark-version .account-title,
body.dark-mode .account-title,
html[data-theme="dark"] .account-title {
    color: #e5e7eb !important;
}

/* Schedule cards */
body.dark-version .schedule-card,
body.dark-mode .schedule-card,
html[data-theme="dark"] .schedule-card {
    background: #1c2440 !important;
    color: #e5e7eb !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Receipt preview in campaign setup */
body.dark-version .receipt-mockup,
body.dark-mode .receipt-mockup,
html[data-theme="dark"] .receipt-mockup {
    background: #222a48 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Step labels and descriptions */
body.dark-version .step-title,
body.dark-mode .step-title,
html[data-theme="dark"] .step-title {
    color: #e5e7eb !important;
}

body.dark-version .step-description,
body.dark-mode .step-description,
html[data-theme="dark"] .step-description {
    color: #9ca3af !important;
}

body.dark-version .network-title,
body.dark-mode .network-title,
html[data-theme="dark"] .network-title {
    color: #e5e7eb !important;
}

/* Network option label hover */
body.dark-version .network-option-label:hover,
body.dark-mode .network-option-label:hover,
html[data-theme="dark"] .network-option-label:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Radio outer circle */
body.dark-version .radio-outer,
body.dark-mode .radio-outer,
html[data-theme="dark"] .radio-outer {
    background-color: #1c2440 !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

body.dark-version .network-radio-input:checked+.network-option-label .radio-outer,
body.dark-mode .network-radio-input:checked+.network-option-label .radio-outer,
html[data-theme="dark"] .network-radio-input:checked+.network-option-label .radio-outer {
    border-color: #3b82f6 !important;
    background-color: #1c2440 !important;
}

/* Step circles (inactive) */
body.dark-version .step-circle,
body.dark-mode .step-circle,
html[data-theme="dark"] .step-circle {
    background: #1c2440 !important;
    color: #9ca3af !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Step circles (active) - keep primary color */
body.dark-version .step-item.active .step-circle,
body.dark-mode .step-item.active .step-circle,
html[data-theme="dark"] .step-item.active .step-circle,
body.dark-version .step-item.completed .step-circle,
body.dark-mode .step-item.completed .step-circle,
html[data-theme="dark"] .step-item.completed .step-circle {
    background: var(--primary-color, #17c1e8) !important;
    color: #fff !important;
    border-color: var(--primary-color, #17c1e8) !important;
}

/* Step labels */
body.dark-version .step-label,
body.dark-mode .step-label,
html[data-theme="dark"] .step-label {
    color: #9ca3af !important;
}

body.dark-version .step-item.active .step-label,
body.dark-mode .step-item.active .step-label,
html[data-theme="dark"] .step-item.active .step-label,
body.dark-version .step-item.completed .step-label,
body.dark-mode .step-item.completed .step-label,
html[data-theme="dark"] .step-item.completed .step-label {
    color: var(--primary-color, #17c1e8) !important;
}

/* Progress lines between steps */
body.dark-version .progress-line,
body.dark-mode .progress-line,
html[data-theme="dark"] .progress-line {
    background: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .step-item.active+.progress-line,
body.dark-mode .step-item.active+.progress-line,
html[data-theme="dark"] .step-item.active+.progress-line,
body.dark-version .step-item.completed+.progress-line,
body.dark-mode .step-item.completed+.progress-line,
html[data-theme="dark"] .step-item.completed+.progress-line {
    background: var(--primary-color, #17c1e8) !important;
}

/* Steps separator hr */
body.dark-version .steps-separator,
body.dark-mode .steps-separator,
html[data-theme="dark"] .steps-separator {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Form labels inside campaign setup */
body.dark-version .campaign-setup-modal .form-label,
body.dark-mode .campaign-setup-modal .form-label,
html[data-theme="dark"] .campaign-setup-modal .form-label {
    color: #e5e7eb !important;
}

/* Campaign input fields */
body.dark-version .campaign-input,
body.dark-mode .campaign-input,
html[data-theme="dark"] .campaign-input {
    background-color: #1f243d !important;
    color: #e5e7eb !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Form controls (inputs, selects, textareas, and bootstrap .form-control) */
body.dark-version input,
body.dark-version textarea,
body.dark-version select,
body.dark-version .form-control,
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .form-control,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .form-control {
    background-color: #1f243d !important;
    color: #e5e7eb !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
}

/* Input group text (the small icon pill) and grouped inputs in dark mode */
body.dark-version .input-group-text,
body.dark-mode .input-group-text,
html[data-theme="dark"] .input-group-text {
    background-color: rgba(255,255,255,0.03) !important;
    color: #9ca3af !important;
    border-color: rgba(255,255,255,0.06) !important;
}

body.dark-version .input-group .form-control,
body.dark-mode .input-group .form-control,
html[data-theme="dark"] .input-group .form-control {
    background-color: #1f243d !important;
    color: #e5e7eb !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* Special case: invite user search input by id */
body.dark-version #inviteUserSearch,
body.dark-mode #inviteUserSearch,
html[data-theme="dark"] #inviteUserSearch {
    background-color: #1f243d !important;
    color: #e5e7eb !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* Placeholder / helper text */
body.dark-version ::placeholder,
body.dark-mode ::placeholder,
html[data-theme="dark"] ::placeholder {
    color: #9ca3af !important;
    opacity: 1 !important;
}

/* Inputs focus state */
body.dark-version input:focus,
body.dark-version textarea:focus,
body.dark-version select:focus,
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
    outline: none !important;
    box-shadow: 0 0 0 0.15rem rgba(59,130,246,0.12) !important;
}

/* Network description box overrides (ensure specificity) */
body.dark-version .network-description-box p,
body.dark-mode .network-description-box p,
html[data-theme="dark"] .network-description-box p {
    color: #d1d5db !important;
}

/* Media upload area */
body.dark-version .circular-upload-area,
body.dark-mode .circular-upload-area,
html[data-theme="dark"] .circular-upload-area {
    background: #1c2440 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Ad preview area */
body.dark-version .ad-preview-area,
body.dark-mode .ad-preview-area,
html[data-theme="dark"] .ad-preview-area,
body.dark-version .ad-placeholder,
body.dark-mode .ad-placeholder,
html[data-theme="dark"] .ad-placeholder {
    background: #1c2440 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Option descriptions */
body.dark-version .option-description,
body.dark-mode .option-description,
html[data-theme="dark"] .option-description {
    color: #9ca3af !important;
}

/* Impressions counter */
body.dark-version .impressions-number,
body.dark-mode .impressions-number,
html[data-theme="dark"] .impressions-number,
body.dark-version .days-number,
body.dark-mode .days-number,
html[data-theme="dark"] .days-number {
    color: #e5e7eb !important;
}

/* Date input containers */
body.dark-version .date-input-container,
body.dark-mode .date-input-container,
html[data-theme="dark"] .date-input-container {
    background: #1c2440 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #e5e7eb !important;
}

body.dark-version .date-label,
body.dark-mode .date-label,
html[data-theme="dark"] .date-label {
    color: #d1d5db !important;
}

body.dark-version .minimal-date-input,
body.dark-mode .minimal-date-input,
html[data-theme="dark"] .minimal-date-input {
    color: #e5e7eb !important;
    background: transparent !important;
}

/* ─── Receipt Preview (Step 2 & Review) ─── */
body.dark-version .receipt-mockup,
body.dark-mode .receipt-mockup,
html[data-theme="dark"] .receipt-mockup {
    background: #1c2440 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

body.dark-version .receipt-header,
body.dark-mode .receipt-header,
html[data-theme="dark"] .receipt-header {
    background: #222a48 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #e5e7eb !important;
}

body.dark-version .receipt-header h6,
body.dark-mode .receipt-header h6,
html[data-theme="dark"] .receipt-header h6 {
    color: #e5e7eb !important;
}

body.dark-version .receipt-body,
body.dark-mode .receipt-body,
html[data-theme="dark"] .receipt-body {
    background: transparent !important;
    color: #e5e7eb !important;
}

body.dark-version .receipt-line,
body.dark-mode .receipt-line,
html[data-theme="dark"] .receipt-line {
    background: rgba(255, 255, 255, 0.15) !important;
}

body.dark-version .receipt-footer,
body.dark-mode .receipt-footer,
html[data-theme="dark"] .receipt-footer {
    color: #e5e7eb !important;
    background: #1c2440 !important;
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

body.dark-version .receipt-total,
body.dark-mode .receipt-total,
html[data-theme="dark"] .receipt-total {
    color: #e5e7eb !important;
}

body.dark-version .ad-preview-area,
body.dark-mode .ad-preview-area,
html[data-theme="dark"] .ad-preview-area {
    background: #222a48 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .ad-placeholder,
body.dark-mode .ad-placeholder,
html[data-theme="dark"] .ad-placeholder {
    background: #222a48 !important;
}

/* ─── Target Impressions Section (Step 3) ─── */
body.dark-version .target-impressions-section,
body.dark-mode .target-impressions-section,
html[data-theme="dark"] .target-impressions-section {
    background: rgba(105, 139, 214, 0.08) !important;
    border-color: rgba(105, 139, 214, 0.25) !important;
}

body.dark-version .impressions-counter,
body.dark-mode .impressions-counter,
html[data-theme="dark"] .impressions-counter {
    background: #1c2440 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e5e7eb !important;
}

body.dark-version .impressions-description,
body.dark-mode .impressions-description,
html[data-theme="dark"] .impressions-description {
    color: #9ca3af !important;
}

/* Days counter */
body.dark-version .days-counter,
body.dark-mode .days-counter,
html[data-theme="dark"] .days-counter {
    background: #1c2440 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e5e7eb !important;
}

/* ─── Schedule Options (Step 3) ─── */
body.dark-version .schedule-option,
body.dark-mode .schedule-option,
html[data-theme="dark"] .schedule-option {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .schedule-option:hover,
body.dark-mode .schedule-option:hover,
html[data-theme="dark"] .schedule-option:hover {
    border-color: rgba(23, 193, 232, 0.3) !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

body.dark-version .schedule-options .form-check,
body.dark-mode .schedule-options .form-check,
html[data-theme="dark"] .schedule-options .form-check {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .schedule-options .form-check:hover,
body.dark-mode .schedule-options .form-check:hover,
html[data-theme="dark"] .schedule-options .form-check:hover {
    border-color: rgba(23, 193, 232, 0.3) !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

body.dark-version .schedule-card-title,
body.dark-mode .schedule-card-title,
html[data-theme="dark"] .schedule-card-title {
    color: #e5e7eb !important;
}

body.dark-version .schedule-card-subtitle,
body.dark-mode .schedule-card-subtitle,
html[data-theme="dark"] .schedule-card-subtitle {
    color: #9ca3af !important;
}

/* Form check inputs in dark mode */
body.dark-version .form-check-input,
body.dark-mode .form-check-input,
html[data-theme="dark"] .form-check-input {
    background-color: #1c2440 !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

body.dark-version .form-check-input:checked,
body.dark-mode .form-check-input:checked,
html[data-theme="dark"] .form-check-input:checked {
    background-color: #17c1e8 !important;
    border-color: #17c1e8 !important;
}

body.dark-version .form-check-label,
body.dark-mode .form-check-label,
html[data-theme="dark"] .form-check-label {
    color: #e5e7eb !important;
}

/* ─── Review Step (Step 5) ─── */
body.dark-version .receipt-preview-card,
body.dark-mode .receipt-preview-card,
html[data-theme="dark"] .receipt-preview-card {
    background: #171f36 !important;
    color: #e5e7eb !important;
}

body.dark-version .receipt-container,
body.dark-mode .receipt-container,
html[data-theme="dark"] .receipt-container {
    background: #1c2440 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-version .campaign-details-card,
body.dark-mode .campaign-details-card,
html[data-theme="dark"] .campaign-details-card {
    background: #171f36 !important;
    color: #e5e7eb !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .detail-section,
body.dark-mode .detail-section,
html[data-theme="dark"] .detail-section {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-version .detail-label,
body.dark-mode .detail-label,
html[data-theme="dark"] .detail-label {
    color: #9ca3af !important;
}

body.dark-version .detail-value,
body.dark-mode .detail-value,
html[data-theme="dark"] .detail-value {
    color: #e5e7eb !important;
}

body.dark-version .day-number,
body.dark-mode .day-number,
html[data-theme="dark"] .day-number {
    color: #e5e7eb !important;
}

/* Media upload circle */
body.dark-version .circular-upload-area,
body.dark-mode .circular-upload-area,
html[data-theme="dark"] .circular-upload-area {
    background: #1c2440 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* End date options */
body.dark-version .end-date-options,
body.dark-mode .end-date-options,
html[data-theme="dark"] .end-date-options {
    color: #e5e7eb !important;
}

/* Budget section */
body.dark-version .budget-card,
body.dark-mode .budget-card,
html[data-theme="dark"] .budget-card {
    background: #1c2440 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e5e7eb !important;
}

body.dark-version .budget-amount,
body.dark-mode .budget-amount,
html[data-theme="dark"] .budget-amount {
    color: #e5e7eb !important;
}

/* Previous/Next/Submit button outlines */
body.dark-version .btn-outline-light,
body.dark-mode .btn-outline-light,
html[data-theme="dark"] .btn-outline-light {
    color: #e5e7eb !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

body.dark-version .btn-outline-light:hover,
body.dark-mode .btn-outline-light:hover,
html[data-theme="dark"] .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

body.dark-version .btn-light,
body.dark-mode .btn-light,
html[data-theme="dark"] .btn-light {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #e5e7eb !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.theme-toggle-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1200;
    border: none;
    background: transparent;
    color: inherit;
    border-radius: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-size: inherit;
    font-weight: inherit;
    cursor: pointer;
    box-shadow: none;
    transition: all 0.25s ease;
}

.theme-toggle-btn:hover {
    transform: translateY(-1px);
}

.theme-toggle-btn i {
    font-size: 0.9rem;
}

.theme-toggle-btn.is-dark {
    background: transparent;
    color: inherit;
    border-color: transparent;
}

.theme-toggle-btn.in-navbar {
    position: static;
    right: auto;
    bottom: auto;
    z-index: auto;
    margin-right: 0.75rem;
    padding: 0;
    font-size: inherit;
    box-shadow: none;
}

@media (max-width: 768px) {
    .theme-toggle-btn {
        right: 12px;
        bottom: 12px;
        padding: 0;
        font-size: inherit;
    }

    .theme-toggle-btn.in-navbar {
        margin-right: 0.5rem;
        padding: 0;
        font-size: inherit;
    }
}

/* ═══════════════════════════════════════════
   FINAL DARK MODE HARDENING (Campaign/Account/Connection/Dashboard)
   ═══════════════════════════════════════════ */

/* Remove remaining light backgrounds in campaign setup/review sections */
body.dark-version .receipt-preview-container,
body.dark-mode .receipt-preview-container,
html[data-theme="dark"] .receipt-preview-container,
body.dark-version .review-receipt-mockup,
body.dark-mode .review-receipt-mockup,
html[data-theme="dark"] .review-receipt-mockup,
body.dark-version .review-receipt-header,
body.dark-mode .review-receipt-header,
html[data-theme="dark"] .review-receipt-header,
body.dark-version .review-receipt-body,
body.dark-mode .review-receipt-body,
html[data-theme="dark"] .review-receipt-body,
body.dark-version .review-receipt-footer,
body.dark-mode .review-receipt-footer,
html[data-theme="dark"] .review-receipt-footer,
body.dark-version .receipt-paper-texture,
body.dark-mode .receipt-paper-texture,
html[data-theme="dark"] .receipt-paper-texture,
body.dark-version .review-ad-preview,
body.dark-mode .review-ad-preview,
html[data-theme="dark"] .review-ad-preview,
body.dark-version .ad-placeholder-review,
body.dark-mode .ad-placeholder-review,
html[data-theme="dark"] .ad-placeholder-review {
    background: #1c2440 !important;
    color: #e5e7eb !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Ensure receipt text/lines remain visible */
body.dark-version .receipt-total-text,
body.dark-mode .receipt-total-text,
html[data-theme="dark"] .receipt-total-text,
body.dark-version .review-value,
body.dark-mode .review-value,
html[data-theme="dark"] .review-value {
    color: #e5e7eb !important;
}

body.dark-version .receipt-dotted-line,
body.dark-mode .receipt-dotted-line,
html[data-theme="dark"] .receipt-dotted-line {
    background: repeating-linear-gradient(to right,
            rgba(229, 231, 235, 0.45) 0px,
            rgba(229, 231, 235, 0.45) 4px,
            transparent 4px,
            transparent 8px) !important;
}

/* User modal + table visibility fixes (Account page) */
body.dark-version .user-table-header,
body.dark-mode .user-table-header,
html[data-theme="dark"] .user-table-header,
body.dark-version #userModal .table thead th,
body.dark-mode #userModal .table thead th,
html[data-theme="dark"] #userModal .table thead th {
    background-color: #1c2440 !important;
    color: #9ca3af !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

body.dark-version #userModal .nav-tabs .nav-link,
body.dark-mode #userModal .nav-tabs .nav-link,
html[data-theme="dark"] #userModal .nav-tabs .nav-link {
    color: #cbd5e1 !important;
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version #userModal .nav-tabs .nav-link.active,
body.dark-mode #userModal .nav-tabs .nav-link.active,
html[data-theme="dark"] #userModal .nav-tabs .nav-link.active {
    color: #e5e7eb !important;
    background: #1c2440 !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

body.dark-version #userModal .user-search-input,
body.dark-mode #userModal .user-search-input,
html[data-theme="dark"] #userModal .user-search-input {
    background: #1f243d !important;
    color: #e5e7eb !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Keep warning badges readable when text-dark is used */
body.dark-version .badge.text-dark,
body.dark-mode .badge.text-dark,
html[data-theme="dark"] .badge.text-dark {
    color: #111827 !important;
}

/* Generic table head fallback for any remaining white headers */
body.dark-version .table thead,
body.dark-mode .table thead,
html[data-theme="dark"] .table thead,
body.dark-version .table thead tr,
body.dark-mode .table thead tr,
html[data-theme="dark"] .table thead tr,
body.dark-version .table thead th,
body.dark-mode .table thead th,
html[data-theme="dark"] .table thead th {
    background-color: #1c2440 !important;
}

/* Dashboard chat area visibility adjustments */
body.dark-version #response,
body.dark-mode #response,
html[data-theme="dark"] #response,
body.dark-version #txidForm,
body.dark-mode #txidForm,
html[data-theme="dark"] #txidForm {
    background: #171f36 !important;
    color: #e5e7eb !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Ensure the active theme toggle is blue in ALL themes (light + dark).
   This high-specificity override forces the blue gradient and white knob
   whenever the toggle has the `on` class, including the in-navbar variant. */
.theme-toggle-btn.on .toggle-switch,
.theme-toggle-btn.in-navbar.on .toggle-switch {
    background: linear-gradient(90deg, #36d6ff, #5b7bff) !important;
    box-shadow: none !important;
}
.theme-toggle-btn.on .toggle-switch .knob,
.theme-toggle-btn.in-navbar.on .toggle-switch .knob {
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25) !important;
    transform: translateX(20px) !important;
}
.theme-toggle-btn.in-navbar.on .toggle-switch .knob {
    transform: translateX(16px) !important;
}

/* Force the in-navbar toggle to display the blue active appearance even when
   the `on` class isn't present (so it looks the same in light mode). */
.theme-toggle-btn.in-navbar .toggle-switch {
    background: linear-gradient(90deg, #36d6ff, #5b7bff) !important;
}
/* Default: knob on the left in light mode */
.theme-toggle-btn.in-navbar .toggle-switch .knob {
    background: #ffffff !important;
    transform: translateX(0) !important;
}

/* Move knob to the right when dark mode is active or when the toggle has .on */
html[data-theme="dark"] .theme-toggle-btn.in-navbar .toggle-switch .knob,
.theme-toggle-btn.in-navbar.on .toggle-switch .knob {
    transform: translateX(16px) !important;
}

/* Consistent blue field borders in dark mode (Account/Campaign Manager/Connection) */
body.dark-version,
body.dark-mode,
html[data-theme="dark"] {
    --keepr-dark-input-border: rgba(54, 214, 255, 0.45);
    --keepr-dark-input-border-focus: #36d6ff;
    --keepr-dark-input-focus-ring: rgba(54, 214, 255, 0.22);
}

body.dark-version .form-control,
body.dark-mode .form-control,
html[data-theme="dark"] .form-control,
body.dark-version .form-select,
body.dark-mode .form-select,
html[data-theme="dark"] .form-select,
body.dark-version input,
body.dark-mode input,
html[data-theme="dark"] input,
body.dark-version textarea,
body.dark-mode textarea,
html[data-theme="dark"] textarea,
body.dark-version select,
body.dark-mode select,
html[data-theme="dark"] select,
body.dark-version .campaign-input,
body.dark-mode .campaign-input,
html[data-theme="dark"] .campaign-input,
body.dark-version .outlet-form-control,
body.dark-mode .outlet-form-control,
html[data-theme="dark"] .outlet-form-control,
body.dark-version .outlet-form-select,
body.dark-mode .outlet-form-select,
html[data-theme="dark"] .outlet-form-select,
body.dark-version .minimal-date-input,
body.dark-mode .minimal-date-input,
html[data-theme="dark"] .minimal-date-input {
    border-color: var(--keepr-dark-input-border) !important;
}

body.dark-version .form-control:focus,
body.dark-mode .form-control:focus,
html[data-theme="dark"] .form-control:focus,
body.dark-version .form-select:focus,
body.dark-mode .form-select:focus,
html[data-theme="dark"] .form-select:focus,
body.dark-version input:focus,
body.dark-mode input:focus,
html[data-theme="dark"] input:focus,
body.dark-version textarea:focus,
body.dark-mode textarea:focus,
html[data-theme="dark"] textarea:focus,
body.dark-version select:focus,
body.dark-mode select:focus,
html[data-theme="dark"] select:focus,
body.dark-version .campaign-input:focus,
body.dark-mode .campaign-input:focus,
html[data-theme="dark"] .campaign-input:focus,
body.dark-version .outlet-form-control:focus,
body.dark-mode .outlet-form-control:focus,
html[data-theme="dark"] .outlet-form-control:focus,
body.dark-version .outlet-form-select:focus,
body.dark-mode .outlet-form-select:focus,
html[data-theme="dark"] .outlet-form-select:focus,
body.dark-version .minimal-date-input:focus,
body.dark-mode .minimal-date-input:focus,
html[data-theme="dark"] .minimal-date-input:focus {
    border-color: var(--keepr-dark-input-border-focus) !important;
    box-shadow: 0 0 0 0.2rem var(--keepr-dark-input-focus-ring) !important;
}

body.dark-version .input-group .form-control:focus,
body.dark-mode .input-group .form-control:focus,
html[data-theme="dark"] .input-group .form-control:focus {
    border-left-color: var(--keepr-dark-input-border-focus) !important;
    border-right-color: var(--keepr-dark-input-border-focus) !important;
}

body.dark-version .focused,
body.dark-mode .focused,
html[data-theme="dark"] .focused {
    box-shadow: 0 0 0 2px var(--keepr-dark-input-focus-ring) !important;
}

body.dark-version .focused .input-group-text,
body.dark-mode .focused .input-group-text,
html[data-theme="dark"] .focused .input-group-text {
    border-color: var(--keepr-dark-input-border-focus) !important;
}

body.dark-version .input-group.input-group-dynamic .form-control,
body.dark-mode .input-group.input-group-dynamic .form-control,
html[data-theme="dark"] .input-group.input-group-dynamic .form-control,
body.dark-version .input-group.input-group-static .form-control,
body.dark-mode .input-group.input-group-static .form-control,
html[data-theme="dark"] .input-group.input-group-static .form-control {
    background-image: linear-gradient(0deg, var(--keepr-dark-input-border-focus) 2px, rgba(54, 214, 255, 0) 0), linear-gradient(0deg, rgba(148, 163, 184, 0.45) 1px, rgba(148, 163, 184, 0) 0) !important;
}

/* Connection page modals: keep one uniform dark surface */
body.dark-version #addConnModal .modal-content,
body.dark-mode #addConnModal .modal-content,
html[data-theme="dark"] #addConnModal .modal-content,
body.dark-version #editConnModal .modal-content,
body.dark-mode #editConnModal .modal-content,
html[data-theme="dark"] #editConnModal .modal-content {
    background: #171f36 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

body.dark-version #addConnModal .modal-header,
body.dark-mode #addConnModal .modal-header,
html[data-theme="dark"] #addConnModal .modal-header,
body.dark-version #addConnModal .modal-body,
body.dark-mode #addConnModal .modal-body,
html[data-theme="dark"] #addConnModal .modal-body,
body.dark-version #addConnModal .modal-footer,
body.dark-mode #addConnModal .modal-footer,
html[data-theme="dark"] #addConnModal .modal-footer,
body.dark-version #editConnModal .modal-header,
body.dark-mode #editConnModal .modal-header,
html[data-theme="dark"] #editConnModal .modal-header,
body.dark-version #editConnModal .modal-body,
body.dark-mode #editConnModal .modal-body,
html[data-theme="dark"] #editConnModal .modal-body,
body.dark-version #editConnModal .modal-footer,
body.dark-mode #editConnModal .modal-footer,
html[data-theme="dark"] #editConnModal .modal-footer {
    background: inherit !important;
    color: #e5e7eb !important;
}

body.dark-version #addConnModal .modal-header,
body.dark-mode #addConnModal .modal-header,
html[data-theme="dark"] #addConnModal .modal-header,
body.dark-version #editConnModal .modal-header,
body.dark-mode #editConnModal .modal-header,
html[data-theme="dark"] #editConnModal .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-version #addConnModal .modal-footer,
body.dark-mode #addConnModal .modal-footer,
html[data-theme="dark"] #addConnModal .modal-footer,
body.dark-version #editConnModal .modal-footer,
body.dark-mode #editConnModal .modal-footer,
html[data-theme="dark"] #editConnModal .modal-footer {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}