/*
 * Bsanda Digital Service — Professional Global Dark Theme
 * Screen theme only. Print/PDF remains clean and light.
 */
html.dark-mode {
    color-scheme: dark;
    --bsd-bg: #08111f;
    --bsd-bg-2: #0b1626;
    --bsd-surface: #101c2d;
    --bsd-surface-2: #132238;
    --bsd-surface-3: #172842;
    --bsd-border: #223650;
    --bsd-border-strong: #2d4665;
    --bsd-text: #f4f7fb;
    --bsd-text-2: #d5dfec;
    --bsd-muted: #8ea0b8;
    --bsd-muted-2: #71839d;
    --bsd-primary: #4f8cff;
    --bsd-primary-2: #2f6fe5;
    --bsd-success: #25c58a;
    --bsd-danger: #ff6874;
    --bsd-warning: #f4bd4e;
    --bsd-shadow: 0 18px 50px rgba(0,0,0,.26);
}

html.dark-mode body,
html.dark-mode body.dark-mode {
    background:
        radial-gradient(circle at 8% -10%, rgba(55,119,255,.10), transparent 30%),
        radial-gradient(circle at 95% 0%, rgba(31,199,145,.06), transparent 24%),
        var(--bsd-bg) !important;
    color: var(--bsd-text) !important;
}

html.dark-mode body::selection { background:#3f7ff0; color:#fff; }
html.dark-mode a { color: inherit; }

/* Global shells */
html.dark-mode .app-shell,
html.dark-mode .page,
html.dark-mode .page-main,
html.dark-mode .dashboard-main,
html.dark-mode .settings-page,
html.dark-mode main {
    color: var(--bsd-text) !important;
}

html.dark-mode .topbar,
html.dark-mode .app-shell > header,
html.dark-mode header.topbar {
    background: rgba(11,22,38,.94) !important;
    border-color: var(--bsd-border) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.16) !important;
    backdrop-filter: blur(14px);
}

html.dark-mode .brand strong,
html.dark-mode .brand small,
html.dark-mode .topbar strong,
html.dark-mode .user-chip strong,
html.dark-mode .top-icon,
html.dark-mode .user-chip { color: var(--bsd-text) !important; }
html.dark-mode .brand small { color: var(--bsd-muted) !important; }

/* Universal cards / panels */
html.dark-mode .card,
html.dark-mode .box,
html.dark-mode .panel,
html.dark-mode .page-card,
html.dark-mode .dashboard-card,
html.dark-mode .recent-card,
html.dark-mode .service-card,
html.dark-mode .wallet-card,
html.dark-mode .transaction-card,
html.dark-mode .details-card,
html.dark-mode .setting-card,
html.dark-mode .setting-group,
html.dark-mode .accordion-section,
html.dark-mode .receipt-card,
html.dark-mode .tx-item,
html.dark-mode .statement-card,
html.dark-mode .summary-card,
html.dark-mode .notification-card,
html.dark-mode .notice-item {
    background: linear-gradient(145deg, var(--bsd-surface), #0e1929) !important;
    color: var(--bsd-text) !important;
    border-color: var(--bsd-border) !important;
    box-shadow: 0 12px 34px rgba(0,0,0,.16) !important;
}

/* Keep service/dashboard cards visually distinct */
html.dark-mode .service-card:hover,
html.dark-mode .tx-item:hover,
html.dark-mode .social-link:hover,
html.dark-mode .setting-row:hover {
    background: linear-gradient(145deg, #14243a, #102038) !important;
    border-color: #31547d !important;
    transform: translateY(-1px);
}

html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6,
html.dark-mode .page-header h1,
html.dark-mode .page-header h2,
html.dark-mode .settings-title h1,
html.dark-mode .statement-head h2,
html.dark-mode .tx-summary strong { color: var(--bsd-text) !important; }

html.dark-mode p,
html.dark-mode .page-header p,
html.dark-mode .settings-title p,
html.dark-mode .statement-head p,
html.dark-mode .tx-empty p,
html.dark-mode .wallet-head p,
html.dark-mode .tx-main small,
html.dark-mode .statement-desc,
html.dark-mode .receipt-row span,
html.dark-mode .muted,
html.dark-mode small { color: var(--bsd-muted) !important; }

/* Forms */
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select,
html.dark-mode .tx-search,
html.dark-mode .wallet-search,
html.dark-mode .tx-filters select,
html.dark-mode .wallet-filters select,
html.dark-mode .field input,
html.dark-mode .field textarea,
html.dark-mode .field select {
    background: #0c1829 !important;
    color: var(--bsd-text) !important;
    border-color: var(--bsd-border-strong) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important;
}
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder { color: #667a95 !important; }
html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus {
    border-color: var(--bsd-primary) !important;
    box-shadow: 0 0 0 3px rgba(79,140,255,.13) !important;
    outline: none !important;
}

/* Settings */
html.dark-mode .accordion-title,
html.dark-mode .setting-row,
html.dark-mode .social-link,
html.dark-mode .inline-form,
html.dark-mode .referral-box,
html.dark-mode .tier-grid,
html.dark-mode .accordion-panel,
html.dark-mode .accordion-content {
    background: transparent !important;
    color: var(--bsd-text) !important;
    border-color: var(--bsd-border) !important;
}
html.dark-mode .accordion-title { background: linear-gradient(145deg,#122138,#101c2d) !important; }
html.dark-mode .accordion-title:hover { background:#172a44 !important; }
html.dark-mode .setting-group-title,
html.dark-mode .field label { color: var(--bsd-muted) !important; }
html.dark-mode .row-icon {
    background: #172b47 !important;
    color: #70a2ff !important;
    box-shadow: inset 0 0 0 1px rgba(95,150,255,.12);
}
html.dark-mode .chev,
html.dark-mode .accordion-title i { color: #7f93ad !important; }
html.dark-mode .btn-light,
html.dark-mode .btn-secondary,
html.dark-mode .receipt-action,
html.dark-mode .tx-clear-btn,
html.dark-mode .wallet-clear {
    background: #18283d !important;
    color: #dce7f4 !important;
    border-color: #304863 !important;
}
html.dark-mode .social-link { border:1px solid var(--bsd-border) !important; }
html.dark-mode .tier.current { background:#132b4d !important; border-color:#3568a8 !important; }

/* Notifications — fix the white cards seen in the current screenshots */
html.dark-mode .notification-action {
    background:#172940 !important;
    color:#dce9f8 !important;
    border-color:#304b6b !important;
}
html.dark-mode .notice-item {
    background:linear-gradient(145deg,#111f32,#0e1a2a) !important;
    border:1px solid #223650 !important;
    color:var(--bsd-text) !important;
}
html.dark-mode .notice-item.unread { border-left:3px solid var(--bsd-primary) !important; }
html.dark-mode .notice-item.unread::after {
    background:#173660 !important;
    color:#79a9ff !important;
}
html.dark-mode .notice-item.read { opacity:.78; }

/* Wallet */
html.dark-mode .wallet-back {
    background:#15253a !important;
    color:#dbe7f4 !important;
    border-color:#304863 !important;
}
html.dark-mode .wallet-hero {
    box-shadow:0 20px 55px rgba(20,90,210,.20) !important;
}
html.dark-mode .summary-card {
    background:linear-gradient(145deg,#111f32,#0e1a2a) !important;
}
html.dark-mode .wallet-search,
html.dark-mode .wallet-filters select { background:#0c1829 !important; }
html.dark-mode .statement-table th { background:#14243a !important; color:#9fb0c6 !important; }
html.dark-mode .statement-table td { background:#101c2d !important; color:#e8eef6 !important; border-color:#223650 !important; }
html.dark-mode .statement-card { overflow:hidden; }
html.dark-mode .wallet-mobile-item { background:#101c2d !important; border-color:#223650 !important; }
html.dark-mode .wallet-mobile-meta div { background:#15253a !important; }
html.dark-mode .statement-empty span,
html.dark-mode .tx-empty span { background:#172b47 !important; color:#70a2ff !important; }
html.dark-mode .type-credit { background:#12382d !important; color:#55d5a5 !important; }
html.dark-mode .type-debit { background:#3a2027 !important; color:#ff7d87 !important; }

/* Transactions */
html.dark-mode .tx-search,
html.dark-mode .tx-filters select { background:#0c1829 !important; }
html.dark-mode .tx-clear-btn { background:#17283d !important; }
html.dark-mode .tx-item { background:linear-gradient(145deg,#111f32,#0e1a2a) !important; }
html.dark-mode .tx-logo { background:#17263a !important; border-color:#2b415d !important; }
html.dark-mode .tx-view-btn,
html.dark-mode .tx-mobile-view {
    background:#172f50 !important;
    color:#78a9ff !important;
}
html.dark-mode .tx-view-btn:hover,
html.dark-mode .tx-mobile-view:hover { background:#1c3a61 !important; }
html.dark-mode .tx-table th,
html.dark-mode .tx-table td { border-color:#223650 !important; color:#e6edf6 !important; }
html.dark-mode .tx-table th { color:#8fa2ba !important; }

/* Data confirmation / result pages */
html.dark-mode .page > .card,
html.dark-mode .page .card,
html.dark-mode .summary,
html.dark-mode .details,
html.dark-mode .passcode-box,
html.dark-mode .actions,
html.dark-mode .notice,
html.dark-mode .balance,
html.dark-mode .balance-box,
html.dark-mode .wallet-notice {
    background:linear-gradient(145deg,#111f32,#0e1a2a) !important;
    color:var(--bsd-text) !important;
    border-color:#223650 !important;
}
html.dark-mode .summary .row,
html.dark-mode .details .row,
html.dark-mode .receipt-row { border-color:#223650 !important; }
html.dark-mode .label { color:#8fa2ba !important; }
html.dark-mode .value { color:#edf3fa !important; }
html.dark-mode .passcode-input { background:#0c1829 !important; color:#fff !important; border-color:#304863 !important; }

/* Receipt — premium dark screen, light print */
html.dark-mode .receipt-page {
    background:
        radial-gradient(circle at 15% 0%,rgba(69,130,255,.12),transparent 28%),
        var(--bsd-bg) !important;
}
html.dark-mode .receipt-actions { gap:8px; }
html.dark-mode .receipt-action {
    background:#15253a !important;
    color:#dbe9f8 !important;
    border-color:#304863 !important;
    box-shadow:0 8px 22px rgba(0,0,0,.18) !important;
}
html.dark-mode .receipt-action:hover { background:#1b304b !important; }
html.dark-mode .receipt-card {
    background:#101c2d !important;
    border-color:#29415e !important;
    box-shadow:0 24px 65px rgba(0,0,0,.30) !important;
}
html.dark-mode .receipt-head {
    background:linear-gradient(135deg,#0c3278,#125fc0 58%,#1979ee) !important;
}
html.dark-mode .receipt-main { background:#101c2d !important; }
html.dark-mode .receipt-icon { background:#172b47 !important; }
html.dark-mode .receipt-service { color:#9bb0c9 !important; }
html.dark-mode .receipt-amount { color:#f7f9fc !important; }
html.dark-mode .receipt-details { border-color:#223650 !important; }
html.dark-mode .receipt-row { border-color:#223650 !important; }
html.dark-mode .receipt-row span { color:#91a4bc !important; }
html.dark-mode .receipt-row strong { color:#eef4fb !important; }
html.dark-mode .receipt-token-row { background:#0f3328 !important; border-color:#1d624d !important; }
html.dark-mode .receipt-token-row span { color:#62d7ac !important; }
html.dark-mode .receipt-token-row strong { color:#7be6bd !important; }
html.dark-mode .receipt-foot { background:#0c1727 !important; color:#8195ad !important; }

/* Bottom mobile navigation */
html.dark-mode .bottom-nav {
    background:rgba(11,22,38,.97) !important;
    border-top:1px solid #263b56 !important;
    box-shadow:0 -12px 30px rgba(0,0,0,.22) !important;
    backdrop-filter:blur(16px);
}
html.dark-mode .bottom-nav a,
html.dark-mode .bottom-nav span,
html.dark-mode .bottom-nav i { color:#c8d5e5 !important; }
html.dark-mode .bottom-nav a.active,
html.dark-mode .bottom-nav a.active span,
html.dark-mode .bottom-nav a.active i { color:#71a5ff !important; }
html.dark-mode .bottom-nav .center-action {
    background:linear-gradient(145deg,#4f8cff,#2464d5) !important;
    border-color:#7badff !important;
    box-shadow:0 7px 24px rgba(55,125,255,.38) !important;
}
html.dark-mode .bottom-nav .center-action i,
html.dark-mode .bottom-nav .center-action span { color:#fff !important; }

/* Profile/account dropdown */
html.dark-mode .profile-menu {
    background:#111f32 !important;
    border-color:#2a425f !important;
    box-shadow:0 18px 45px rgba(0,0,0,.35) !important;
}
html.dark-mode .profile-menu-item:hover { background:#172b44 !important; }
html.dark-mode .profile-menu-item strong { color:#edf3fa !important; }
html.dark-mode .profile-menu-item small { color:#91a4bc !important; }
html.dark-mode .profile-menu-divider { background:#263b56 !important; }

/* Success / error / info notices */
html.dark-mode .notice.ok { background:#0f3328 !important; color:#65d9ad !important; border-color:#1e604c !important; }
html.dark-mode .notice.err { background:#3b2027 !important; color:#ff8b94 !important; border-color:#6b313c !important; }



/* V22 — cross-page dark mode polish: headers, back buttons, funding, exam, transaction detail */
html.dark-mode .top-icon {
    background:linear-gradient(145deg,#15263b,#101d2f) !important;
    color:#dce8f7 !important;
    border-color:#2a425f !important;
    box-shadow:0 8px 20px rgba(0,0,0,.22) !important;
}
html.dark-mode .top-icon b { border-color:#101d2f !important; }

/* Consistent back buttons across the application */
html.dark-mode .back-btn,
html.dark-mode .wallet-back,
html.dark-mode .fund-top a,
html.dark-mode .top .back,
html.dark-mode .page-header .back-btn,
html.dark-mode .detail-top a,
html.dark-mode .back,
html.dark-mode .btn-back {
    background:linear-gradient(145deg,#15263b,#101d2f) !important;
    color:#dce8f7 !important;
    border:1px solid #2b4564 !important;
    box-shadow:0 8px 22px rgba(0,0,0,.20) !important;
}
html.dark-mode .back-btn:hover,
html.dark-mode .wallet-back:hover,
html.dark-mode .fund-top a:hover,
html.dark-mode .detail-top a:hover,
html.dark-mode .back:hover,
html.dark-mode .btn-back:hover {
    background:#1a304a !important;
    border-color:#41658e !important;
}

/* Wallet: keep the blue hero, but remove accidental light controls around it */
html.dark-mode .fund-btn {
    background:#e8f1ff !important;
    color:#0b3b91 !important;
    border:1px solid #b9d1f5 !important;
}
html.dark-mode .fund-btn:hover { background:#fff !important; }
html.dark-mode .wallet-search,
html.dark-mode .wallet-filters select,
html.dark-mode .wallet-clear { color:#dce8f7 !important; }

/* Dashboard wallet action */
html.dark-mode .fund-button {
    background:#e8f1ff !important;
    color:#0b3b91 !important;
    border:1px solid #b9d1f5 !important;
}
html.dark-mode .fund-button:hover { background:#fff !important; }

/* Fund Wallet page */
html.dark-mode .fund-page { color:var(--bsd-text) !important; }
html.dark-mode .fund-card {
    background:linear-gradient(145deg,#101d2f,#0d1828) !important;
    color:var(--bsd-text) !important;
    border-color:#29415f !important;
    box-shadow:0 18px 50px rgba(0,0,0,.28) !important;
}
html.dark-mode .fund-top strong { color:#f2f6fb !important; }
html.dark-mode .fund-top div[style*="color:#7a8495"] { color:#91a4bc !important; }
html.dark-mode .fund-input {
    background:#0a1728 !important;
    color:#f3f7fb !important;
    border-color:#304863 !important;
}
html.dark-mode .quick button {
    background:#15263b !important;
    color:#dce8f7 !important;
    border-color:#304863 !important;
}
html.dark-mode .quick button:hover { background:#1b3554 !important; }
html.dark-mode .fund-card [style*="background:#f6f9ff"],
html.dark-mode .fund-card [style*="background:#fbfdff"] {
    background:#12243a !important;
    color:#e4edf7 !important;
    border:1px solid #2a4564 !important;
}
html.dark-mode .fund-card [style*="color:#727c8c"],
html.dark-mode .fund-card [style*="color:#7a8495"] { color:#91a4bc !important; }
html.dark-mode .fund-card [style*="background:#fff"] { background:#15263b !important; }

/* Exam PIN page: eliminate the remaining white provider/plan cards */
html.dark-mode .exam-page .card,
html.dark-mode .exam-container .card,
html.dark-mode .provider-label,
html.dark-mode .pin-label,
html.dark-mode .pin-option input:checked + .pin-label {
    background:linear-gradient(145deg,#111f32,#0e1a2a) !important;
    color:var(--bsd-text) !important;
    border-color:#29415f !important;
}
html.dark-mode .provider-label:hover,
html.dark-mode .pin-label:hover { border-color:#4f8cff !important; }
html.dark-mode .pin-option input:checked + .pin-label {
    background:linear-gradient(145deg,#132b4d,#10223a) !important;
    border-color:#4f8cff !important;
    box-shadow:inset 0 0 0 1px #4f8cff !important;
}
html.dark-mode .quantity-btn {
    background:#172b47 !important;
    color:#78a9ff !important;
}
html.dark-mode .quantity-input {
    background:#0c1829 !important;
    color:#f3f7fb !important;
    border-color:#304863 !important;
}
html.dark-mode .quantity-input:focus { background:#101f33 !important; }
html.dark-mode .total-box { background:#122b49 !important; border:1px solid #23466e !important; }
html.dark-mode .total-label { color:#9bb0c9 !important; }

/* Common standalone result/confirmation cards */
html.dark-mode .detail-card,
html.dark-mode .airtime-result-card,
html.dark-mode .result-card,
html.dark-mode .fund-result-card {
    background:linear-gradient(145deg,#101d2f,#0d1828) !important;
    color:var(--bsd-text) !important;
    border-color:#29415f !important;
}
html.dark-mode .detail-head { background:linear-gradient(145deg,#12243b,#0f1c2d) !important; }
html.dark-mode .detail-logo { background:#172b47 !important; border-color:#2b4564 !important; }
html.dark-mode .detail-provider,
html.dark-mode .detail-amount { color:#eef4fb !important; }
html.dark-mode .detail-row { border-color:#263b56 !important; }
html.dark-mode .detail-row span { color:#91a4bc !important; }
html.dark-mode .detail-row strong { color:#e9f0f8 !important; }
html.dark-mode .secondary { background:#182b42 !important; color:#bcd4f3 !important; border:1px solid #304863 !important; }

/* Generic white cards used by older service pages */
html.dark-mode .service-card,
html.dark-mode .card,
html.dark-mode .box { color:var(--bsd-text) !important; }

/* Preserve intentional white/light surfaces inside the blue hero areas */
html.dark-mode .fund-hero,
html.dark-mode .wallet-hero { color:#fff !important; }

/* Print/PDF intentionally stays white and readable */
@media print {
    html.dark-mode,
    html.dark-mode body,
    html.dark-mode .receipt-page,
    html.dark-mode .receipt-card,
    html.dark-mode .receipt-main,
    html.dark-mode .receipt-foot,
    html.dark-mode .card,
    html.dark-mode .box {
        background:#fff !important;
        color:#111 !important;
        box-shadow:none !important;
    }
    html.dark-mode .receipt-actions { display:none !important; }
    html.dark-mode .receipt-row span,
    html.dark-mode .receipt-row strong,
    html.dark-mode .receipt-foot { color:#555 !important; }
}

/* ================================================================
   V23 CROSS-PAGE DARK MODE POLISH
   Keep all customer pages visually consistent in Dark Mode.
   ================================================================ */

/* Account/profile dropdown */
html.dark-mode .account-menu {
    background: linear-gradient(145deg,#111f32,#0d1929) !important;
    color: var(--bsd-text) !important;
    border-color: #29415f !important;
    box-shadow: 0 22px 60px rgba(0,0,0,.42) !important;
}
html.dark-mode .account-menu-head strong,
html.dark-mode a.account-menu-item,
html.dark-mode a.account-menu-item .account-menu-copy strong { color: var(--bsd-text) !important; }
html.dark-mode .account-menu-head small,
html.dark-mode a.account-menu-item .account-menu-copy small { color: var(--bsd-muted) !important; }
html.dark-mode .account-menu-divider { background:#223650 !important; }
html.dark-mode a.account-menu-item:hover { background:#172a44 !important; }
html.dark-mode .account-menu-icon.blue { background:#16345a !important; color:#78a9ff !important; }
html.dark-mode .account-menu-icon.purple { background:#2b2352 !important; color:#ad98ff !important; }
html.dark-mode .account-menu-icon.red { background:#47252b !important; color:#ff8d98 !important; }
html.dark-mode a.account-menu-item.logout-item .account-menu-copy strong { color:#ff7f89 !important; }
html.dark-mode .page-global-actions .page-notify { background:#13243a !important; color:#dce7f4 !important; border-color:#304863 !important; }

/* Consistent circular back controls across service pages */
html.dark-mode .back-btn,
html.dark-mode .wallet-back,
html.dark-mode .bulk-back,
html.dark-mode .back-arrow,
html.dark-mode a.back,
html.dark-mode .back-link,
html.dark-mode .mobile-back {
    background:linear-gradient(145deg,#162b45,#102138) !important;
    color:#e5eef9 !important;
    border-color:#315171 !important;
    box-shadow:0 8px 20px rgba(0,0,0,.18) !important;
}
html.dark-mode .back-btn:hover,
html.dark-mode .wallet-back:hover,
html.dark-mode .bulk-back:hover,
html.dark-mode .back-arrow:hover,
html.dark-mode a.back:hover,
html.dark-mode .back-link:hover,
html.dark-mode .mobile-back:hover {
    background:#1b3656 !important;
    border-color:#4773a3 !important;
}

/* Airtime */
html.dark-mode .network-option,
html.dark-mode .quick-btn {
    background:linear-gradient(145deg,#14243a,#101d2f) !important;
    color:var(--bsd-text) !important;
    border-color:#304863 !important;
}
html.dark-mode .network-option:hover,
html.dark-mode .quick-btn:hover { border-color:#4b7fc0 !important; background:#172b45 !important; }
html.dark-mode .network-option.selected { background:linear-gradient(145deg,#16345b,#122844) !important; border-color:#4f8cff !important; }
html.dark-mode .network-name,
html.dark-mode .quick-title,
html.dark-mode .field label { color:var(--bsd-text) !important; }

/* Data — remove the black/blue split and use one coherent surface */
html.dark-mode .data-catalogue-shell {
    background:linear-gradient(145deg,#101e31,#0d1929) !important;
    color:var(--bsd-text) !important;
    border-color:#29415f !important;
    box-shadow:0 14px 40px rgba(0,0,0,.20) !important;
}
html.dark-mode .data-category-tab {
    background:#13243a !important;
    color:#dce7f4 !important;
    border-color:#304863 !important;
}
html.dark-mode .data-category-tab.active {
    background:linear-gradient(135deg,#315fba,#2760ae) !important;
    color:#fff !important;
    border-color:#4f8cff !important;
}
html.dark-mode .data-search {
    background:#0c1829 !important;
    color:#eef4fb !important;
    border-color:#385575 !important;
}
html.dark-mode .data-catalogue-shell .network-option,
html.dark-mode .data-catalogue-shell .plan-option {
    background:linear-gradient(145deg,#14243a,#101d2f) !important;
    color:#eef4fb !important;
    border-color:#304863 !important;
    box-shadow:0 6px 18px rgba(0,0,0,.14) !important;
}
html.dark-mode .data-catalogue-shell .network-option:hover,
html.dark-mode .data-catalogue-shell .plan-option:hover { border-color:#4b7fc0 !important; }
html.dark-mode .data-catalogue-shell .network-option.selected,
html.dark-mode .data-catalogue-shell .plan-option.selected {
    background:linear-gradient(145deg,#16365d,#122b49) !important;
    border-color:#4f8cff !important;
    box-shadow:0 0 0 2px rgba(79,140,255,.12) !important;
}
html.dark-mode .data-catalogue-shell .network-name,
html.dark-mode .data-catalogue-shell .form-label,
html.dark-mode .data-catalogue-shell .plan-name,
html.dark-mode .data-catalogue-shell .plan-price { color:#f4f7fb !important; }
html.dark-mode .plan-family-badge { background:#1c3554 !important; color:#bcd2ed !important; }
html.dark-mode .plan-select { background:#18355a !important; color:#8eb8ff !important; }

/* Cable TV */
html.dark-mode .provider-option,
html.dark-mode .package-empty,
html.dark-mode .package-option {
    background:linear-gradient(145deg,#14243a,#101d2f) !important;
    color:var(--bsd-text) !important;
    border-color:#304863 !important;
}
html.dark-mode .provider-option:hover,
html.dark-mode .package-option:hover { border-color:#4b7fc0 !important; }
html.dark-mode .provider-option.selected,
html.dark-mode .package-option.selected { background:#16345a !important; border-color:#4f8cff !important; }
html.dark-mode .provider-name,
html.dark-mode .package-name,
html.dark-mode .package-price,
html.dark-mode .package-validity { color:var(--bsd-text) !important; }

/* Electricity */
html.dark-mode .electricity-provider-option,
html.dark-mode .meter-option {
    background:linear-gradient(145deg,#14243a,#101d2f) !important;
    color:var(--bsd-text) !important;
    border-color:#304863 !important;
}
html.dark-mode .electricity-provider-option:hover,
html.dark-mode .meter-option:hover { border-color:#4b7fc0 !important; }
html.dark-mode .electricity-provider-option.selected,
html.dark-mode .meter-option.selected { background:#16345a !important; border-color:#4f8cff !important; }
html.dark-mode .electricity-provider-name { color:var(--bsd-text) !important; }

/* Exam PIN */
html.dark-mode .provider-option,
html.dark-mode .pin-option {
    background:linear-gradient(145deg,#14243a,#101d2f) !important;
    color:var(--bsd-text) !important;
    border-color:#304863 !important;
}
html.dark-mode .provider-option.selected,
html.dark-mode .pin-option.selected { background:#16345a !important; border-color:#4f8cff !important; }
html.dark-mode .provider-name,
html.dark-mode .pin-name,
html.dark-mode .pin-price,
html.dark-mode .pin-description,
html.dark-mode .pin-label,
html.dark-mode .pin-stock { color:var(--bsd-text) !important; }

/* Fund wallet */
html.dark-mode .fund-page { background:transparent !important; color:var(--bsd-text) !important; }
html.dark-mode .fund-card {
    background:linear-gradient(145deg,#111f32,#0e1a2a) !important;
    color:var(--bsd-text) !important;
    border-color:#29415f !important;
    box-shadow:0 16px 40px rgba(0,0,0,.22) !important;
}
html.dark-mode .fund-top a { background:#15253a !important; color:#e5eef9 !important; border-color:#304863 !important; }
html.dark-mode .fund-input { background:#0c1829 !important; color:#eef4fb !important; border-color:#385575 !important; }
html.dark-mode .quick button { background:#14243a !important; color:#dce7f4 !important; border-color:#304863 !important; }
html.dark-mode .quick button:hover { background:#1b3656 !important; border-color:#4b7fc0 !important; }
html.dark-mode .note { color:#8ea0b8 !important; }
html.dark-mode .error { background:#3a2027 !important; color:#ff9aa3 !important; border-color:#65343d !important; }

/* Common white controls/cards that escaped earlier theme rules */
html.dark-mode .card > .network-grid,
html.dark-mode .card > .provider-grid,
html.dark-mode .card > .electricity-provider-grid,
html.dark-mode .card > .plans,
html.dark-mode .card > .package-grid,
html.dark-mode .card > .meter-types {
    color:var(--bsd-text) !important;
}
html.dark-mode .empty-plans,
html.dark-mode .package-empty { background:#14243a !important; color:#9fb0c6 !important; border-color:#304863 !important; }

/* Header notification bell — never a glaring white circle in Dark Mode */
html.dark-mode .notification-bell,
html.dark-mode .top-notification,
html.dark-mode .notify-btn,
html.dark-mode .notification-button {
    background:#13243a !important;
    color:#dce7f4 !important;
    border-color:#304863 !important;
}

/* BSD auth + Paystack withdrawal theme compatibility patch 2026-10-26 */

/* Authentication screens: keep headings, cards and form controls readable in both themes. */
html.dark-mode body .auth-page { color: var(--bsd-text) !important; }
html.dark-mode body .auth-card {
    background: linear-gradient(145deg, #111f32, #0e1a2a) !important;
    color: var(--bsd-text) !important;
    border-color: var(--bsd-border) !important;
    box-shadow: var(--bsd-shadow) !important;
}
html.dark-mode body .auth-card h1,
html.dark-mode body .auth-card h2 { color: var(--bsd-text) !important; }
html.dark-mode body .auth-subtitle { color: var(--bsd-muted) !important; }
html.dark-mode body .form-group label,
html.dark-mode body .terms label,
html.dark-mode body .remember-me,
html.dark-mode body .login-options,
html.dark-mode body .auth-footer { color: var(--bsd-text-2) !important; }
html.dark-mode body .auth-card input:not([type="checkbox"]):not([type="radio"]),
html.dark-mode body .auth-card select,
html.dark-mode body .auth-card textarea {
    background: #0c1829 !important;
    color: var(--bsd-text) !important;
    border-color: var(--bsd-border-strong) !important;
}
html.dark-mode body .auth-card input::placeholder { color: #8295af !important; }
html.dark-mode body .auth-card a { color: #8eb8ff !important; }
html.dark-mode body .auth-card .auth-btn { color: #fff !important; }
html.dark-mode body .auth-card .password-toggle { color: var(--bsd-text-2) !important; }

/* Paystack withdrawal page uses inline light styles; explicitly theme those components. */
html.dark-mode body .wrap { color: var(--bsd-text) !important; }
html.dark-mode body .wrap > .card,
html.dark-mode body main.card {
    background: linear-gradient(145deg, #111f32, #0e1a2a) !important;
    color: var(--bsd-text) !important;
    border-color: var(--bsd-border) !important;
    box-shadow: var(--bsd-shadow) !important;
}
html.dark-mode body .wrap h1 { color: var(--bsd-text) !important; }
html.dark-mode body .wrap .muted,
html.dark-mode body .wrap .fee-note { color: var(--bsd-muted) !important; }
html.dark-mode body .wrap .balance { background: #12382d !important; color: #c9f6e4 !important; }
html.dark-mode body .wrap .summary { background: #0c1829 !important; color: var(--bsd-text) !important; border: 1px solid var(--bsd-border) !important; }
html.dark-mode body .wrap .field label { color: var(--bsd-text-2) !important; }
html.dark-mode body .wrap .field input,
html.dark-mode body .wrap .field select { background: #0c1829 !important; color: var(--bsd-text) !important; border-color: var(--bsd-border-strong) !important; }
html.dark-mode body .wrap .field input::placeholder { color: #8295af !important; }
html.dark-mode body .wrap .back { color: #8eb8ff !important; }
html.dark-mode body .wrap .notice { background: #12382d !important; color: #c9f6e4 !important; }
html.dark-mode body .wrap .alert { background: #3a2027 !important; color: #ffb0b6 !important; }
html.dark-mode body .wrap .warning { background: #3a3018 !important; color: #ffe09a !important; }