/* ═══════════════════════════════════════════════════════════════════
   TiqPay Theme — Light & Dark Mode
   Include this BEFORE style.css and page-specific styles.
   Toggle via: document.documentElement.setAttribute('data-theme', 'dark')
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* Brand (unchanged between modes) */
    --tp-pink: #E61B6C;
    --tp-pink-hover: #C2185B;
    --tp-pink-light: rgba(230, 27, 108, 0.08);
    --tp-blue: #6351ce;
    --tp-green: #28a745;
    --tp-red: #dc3545;
    --tp-orange: #ff9f40;

    /* Surfaces */
    --tp-body-bg: #f5f6fa;
    --tp-card-bg: #ffffff;
    --tp-card-border: #e8e8e8;
    --tp-sidebar-bg: #1C2331;
    --tp-navbar-bg: #ffffff;
    --tp-footer-bg: #1C2331;
    --tp-modal-bg: #ffffff;
    --tp-input-bg: #ffffff;
    --tp-input-border: #ced4da;
    --tp-table-header-bg: #fafbfc;
    --tp-table-stripe: rgba(0, 0, 0, 0.02);
    --tp-table-hover: rgba(0, 0, 0, 0.04);
    --tp-hover-bg: #f5f5f5;

    /* Text */
    --tp-text: #212529;
    --tp-text-secondary: #667185;
    --tp-text-muted: #999;
    --tp-text-on-dark: #ffffff;
    --tp-link: #E61B6C;

    /* Borders & shadows */
    --tp-border: #dee2e6;
    --tp-border-light: #f0f0f0;
    --tp-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    --tp-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);

    /* Loader */
    --tp-loader-overlay: rgba(255, 255, 255, 0.7);
    --tp-loader-bg: #ffffff;

    /* Status badges */
    --tp-success-text: #036B26;
    --tp-success-bg: #E7F6EC;
    --tp-pending-text: #AD3307;
    --tp-pending-bg: #FFECE5;
    --tp-failed-text: #9E0A05;
    --tp-failed-bg: #FBEAE9;

    /* Role badges */
    --tp-role-admin-bg: #E3F2FD;
    --tp-role-admin-text: #1565C0;
    --tp-role-support-bg: #F3E5F5;
    --tp-role-support-text: #7B1FA2;
    --tp-role-merchant-bg: #FFF3E0;
    --tp-role-merchant-text: #E65100;
    --tp-role-agent-bg: #FFF8E1;
    --tp-role-agent-text: #F9A825;
    --tp-role-user-bg: #F5F5F5;
    --tp-role-user-text: #616161;

    /* Action button hovers */
    --tp-action-view-bg: #E3F2FD;
    --tp-action-view-text: #2979FF;
    --tp-action-edit-bg: #FFF3E0;
    --tp-action-edit-text: #E65100;
    --tp-action-delete-bg: #FFEBEE;
    --tp-action-delete-text: #C62828;
    --tp-action-enable-bg: #E8F5E9;
    --tp-action-enable-text: #2E7D32;

    /* Misc */
    --tp-detail-label: #344767;
    --tp-detail-value: #222c3c;
    --tp-copy-icon: #6c757d;
    --tp-divider: #dde0e5;
    --tp-skeleton-from: #eee;
    --tp-skeleton-to: #f5f5f5;
    --tp-tooltip-bg: #1e293b;
    --tp-tooltip-text: #f1f5f9;
}

/* ═══════════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
    /* Surfaces */
    --tp-body-bg: #0f1117;
    --tp-card-bg: #1a1d28;
    --tp-card-border: #2a2d38;
    --tp-sidebar-bg: #0a0d14;
    --tp-navbar-bg: #141720;
    --tp-footer-bg: #0a0d14;
    --tp-modal-bg: #1a1d28;
    --tp-input-bg: #22252f;
    --tp-input-border: #3a3d48;
    --tp-table-header-bg: #1e2130;
    --tp-table-stripe: rgba(255, 255, 255, 0.02);
    --tp-table-hover: rgba(255, 255, 255, 0.05);
    --tp-hover-bg: #252830;

    /* Text */
    --tp-text: #e2e4e9;
    --tp-text-secondary: #9ca0ab;
    --tp-text-muted: #6b7080;
    --tp-link: #f06292;

    /* Borders & shadows */
    --tp-border: #2a2d38;
    --tp-border-light: #22252f;
    --tp-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    --tp-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.5);

    /* Loader */
    --tp-loader-overlay: rgba(0, 0, 0, 0.7);
    --tp-loader-bg: #1a1d28;

    /* Status badges */
    --tp-success-text: #66bb6a;
    --tp-success-bg: rgba(76, 175, 80, 0.15);
    --tp-pending-text: #ffa726;
    --tp-pending-bg: rgba(255, 152, 0, 0.15);
    --tp-failed-text: #ef5350;
    --tp-failed-bg: rgba(244, 67, 54, 0.12);

    /* Role badges */
    --tp-role-admin-bg: rgba(21, 101, 192, 0.2);
    --tp-role-admin-text: #64b5f6;
    --tp-role-support-bg: rgba(123, 31, 162, 0.2);
    --tp-role-support-text: #ce93d8;
    --tp-role-merchant-bg: rgba(230, 81, 0, 0.2);
    --tp-role-merchant-text: #ffb74d;
    --tp-role-agent-bg: rgba(249, 168, 37, 0.2);
    --tp-role-agent-text: #fff176;
    --tp-role-user-bg: rgba(97, 97, 97, 0.2);
    --tp-role-user-text: #bdbdbd;

    /* Action button hovers */
    --tp-action-view-bg: rgba(41, 121, 255, 0.15);
    --tp-action-view-text: #64b5f6;
    --tp-action-edit-bg: rgba(230, 81, 0, 0.15);
    --tp-action-edit-text: #ffb74d;
    --tp-action-delete-bg: rgba(198, 40, 40, 0.15);
    --tp-action-delete-text: #ef5350;
    --tp-action-enable-bg: rgba(46, 125, 50, 0.15);
    --tp-action-enable-text: #66bb6a;

    /* Misc */
    --tp-detail-label: #9ca0ab;
    --tp-detail-value: #d0d3d9;
    --tp-copy-icon: #6b7080;
    --tp-divider: #2a2d38;
    --tp-skeleton-from: #22252f;
    --tp-skeleton-to: #2a2d38;
    --tp-tooltip-bg: #2a2d38;
    --tp-tooltip-text: #e2e4e9;
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL ELEMENT OVERRIDES
   ═══════════════════════════════════════════════════════════════════ */

/* Body */
body {
    background-color: var(--tp-body-bg) !important;
    color: var(--tp-text);
    transition: background-color 0.2s, color 0.2s;
}

/* ─── Navbar ──────────────────────────────────────────────────── */
.navbar.double-nav {
    background-color: var(--tp-navbar-bg) !important;
    border-bottom: 1px solid var(--tp-border-light);
}
[data-theme="dark"] .navbar #page_label,
[data-theme="dark"] .navbar .nav-link {
    color: var(--tp-text) !important;
}
[data-theme="dark"] .navbar .button-collapse i {
    color: var(--tp-text-secondary);
}

/* ─── Sidebar ─────────────────────────────────────────────────── */
[data-theme="dark"] #slide-out {
    background-color: var(--tp-sidebar-bg) !important;
}
[data-theme="dark"] #slide-out .sidebar-footer {
    border-top-color: rgba(255,255,255,0.05);
}

/* ─── Footer ──────────────────────────────────────────────────── */
[data-theme="dark"] .page-footer {
    background-color: var(--tp-footer-bg) !important;
}

/* ─── Cards (all types) ───────────────────────────────────────── */
[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .popover {
    background-color: var(--tp-card-bg) !important;
    border-color: var(--tp-card-border) !important;
    color: var(--tp-text);
}

/* Dashboard KPI cards */
[data-theme="dark"] .kpi-card {
    background: var(--tp-card-bg) !important;
    border-color: var(--tp-card-border) !important;
    box-shadow: var(--tp-shadow) !important;
}
[data-theme="dark"] .kpi-card .kpi-label {
    color: var(--tp-text-secondary) !important;
}
[data-theme="dark"] .kpi-card .kpi-value {
    color: var(--tp-text) !important;
}

/* Dashboard dash-card */
[data-theme="dark"] .dash-card {
    background: var(--tp-card-bg) !important;
    border-color: var(--tp-card-border) !important;
    box-shadow: var(--tp-shadow) !important;
}

/* Page-specific stat cards (tq-stat-card) */
[data-theme="dark"] .tq-stat-card {
    background: var(--tp-card-bg) !important;
    border-color: var(--tp-card-border) !important;
}
[data-theme="dark"] .tq-stat-card .tq-stat-label {
    color: var(--tp-text-secondary) !important;
}
[data-theme="dark"] .tq-stat-card .tq-stat-value,
[data-theme="dark"] .tq-stat-value,
[data-theme="dark"] #stat_total_count,
[data-theme="dark"] #stat_total_value {
    color: #f0f2f5 !important;
}

/* Table wrappers */
[data-theme="dark"] .tq-table-wrapper {
    background: var(--tp-card-bg) !important;
    border-color: var(--tp-card-border) !important;
}

/* Wallet card */
[data-theme="dark"] .tq-wallet-card {
    background: var(--tp-card-bg) !important;
    border-color: var(--tp-card-border) !important;
}

/* Invoice/receipt modals */
[data-theme="dark"] .invoice-modal .card {
    background: var(--tp-card-bg) !important;
    border-color: var(--tp-card-border) !important;
}
[data-theme="dark"] .invoice-modal .card-header {
    color: var(--tp-text) !important;
    border-color: var(--tp-border) !important;
}
[data-theme="dark"] .invoice-modal .label {
    color: var(--tp-text-muted) !important;
}
[data-theme="dark"] .invoice-modal .value {
    color: var(--tp-text) !important;
}
[data-theme="dark"] .invoice-modal .modal-header {
    background: var(--tp-card-bg) !important;
}
[data-theme="dark"] .invoice-modal .modal-title {
    color: var(--tp-text) !important;
}

/* Insight cards (dashboard) */
[data-theme="dark"] .insight-card {
    background: var(--tp-card-bg) !important;
    border-color: var(--tp-card-border) !important;
}

/* ─── Tables ──────────────────────────────────────────────────── */
[data-theme="dark"] table,
[data-theme="dark"] .table {
    color: #edf0f4 !important;
}
[data-theme="dark"] .table thead th,
[data-theme="dark"] table thead th {
    background-color: var(--tp-table-header-bg) !important;
    color: #b0b5bf !important;
    border-color: var(--tp-border) !important;
}
[data-theme="dark"] .table td,
[data-theme="dark"] .table th,
[data-theme="dark"] table td,
[data-theme="dark"] table th {
    border-color: var(--tp-border) !important;
    color: #edf0f4 !important;
}
[data-theme="dark"] table tbody td a {
    color: var(--tp-link) !important;
}
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
[data-theme="dark"] table tbody tr:nth-of-type(odd) {
    background-color: var(--tp-table-stripe) !important;
}
[data-theme="dark"] .table-hover tbody tr:hover,
[data-theme="dark"] table tbody tr:hover {
    background-color: var(--tp-table-hover) !important;
}

/* ─── DataTables ──────────────────────────────────────────────── */
[data-theme="dark"] .dataTables_wrapper {
    color: var(--tp-text);
}
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background-color: var(--tp-input-bg) !important;
    color: var(--tp-text) !important;
    border-color: var(--tp-input-border) !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_filter label,
[data-theme="dark"] .dataTables_wrapper .dataTables_length label {
    color: var(--tp-text-secondary) !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_info {
    color: var(--tp-text-muted) !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--tp-text-secondary) !important;
    background: transparent !important;
    border-color: var(--tp-border) !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--tp-hover-bg) !important;
    color: var(--tp-text) !important;
    border-color: var(--tp-border) !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--tp-pink) !important;
    color: #fff !important;
    border-color: var(--tp-pink) !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: var(--tp-text-muted) !important;
}
[data-theme="dark"] table.dataTable {
    border-color: var(--tp-border) !important;
}
[data-theme="dark"] table.dataTable.no-footer {
    border-bottom-color: var(--tp-border) !important;
}

/* ─── Forms & Inputs ──────────────────────────────────────────── */
[data-theme="dark"] .form-control,
[data-theme="dark"] .custom-select,
[data-theme="dark"] select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] textarea {
    background-color: var(--tp-input-bg) !important;
    color: #edf0f4 !important;
    border-color: var(--tp-input-border) !important;
}
[data-theme="dark"] select option {
    background-color: var(--tp-input-bg) !important;
    color: #edf0f4 !important;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] .custom-select:focus {
    border-color: var(--tp-pink) !important;
    box-shadow: 0 0 0 0.2rem rgba(230, 27, 108, 0.15) !important;
}
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--tp-text-muted) !important;
}
[data-theme="dark"] .md-form label {
    color: var(--tp-text-secondary) !important;
}
[data-theme="dark"] .md-form input {
    color: #edf0f4 !important;
    border-bottom-color: var(--tp-border) !important;
}
[data-theme="dark"] .md-form .prefix {
    color: var(--tp-text-secondary) !important;
}
/* MDB select dropdowns */
[data-theme="dark"] .mdb-select .dropdown-content li span,
[data-theme="dark"] .mdb-select .dropdown-content li {
    color: #edf0f4 !important;
}
[data-theme="dark"] .mdb-select .dropdown-content {
    background-color: var(--tp-card-bg) !important;
}
[data-theme="dark"] .select-wrapper input.select-dropdown {
    color: #edf0f4 !important;
    border-bottom-color: var(--tp-border) !important;
}
/* Browser native select arrow color fix */
[data-theme="dark"] select {
    color-scheme: dark;
}

/* ─── Dropdowns ───────────────────────────────────────────────── */
[data-theme="dark"] .dropdown-item {
    color: var(--tp-text) !important;
}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--tp-hover-bg) !important;
    color: var(--tp-text) !important;
}
[data-theme="dark"] .dropdown-divider {
    border-color: var(--tp-border);
}

/* ─── Badges (status) ─────────────────────────────────────────── */
[data-theme="dark"] .tq-badge-success,
[data-theme="dark"] .success-status {
    color: var(--tp-success-text) !important;
    background-color: var(--tp-success-bg) !important;
}
[data-theme="dark"] .tq-badge-failed,
[data-theme="dark"] .failed-status {
    color: var(--tp-failed-text) !important;
    background-color: var(--tp-failed-bg) !important;
}
[data-theme="dark"] .tq-badge-pending,
[data-theme="dark"] .pending-status {
    color: var(--tp-pending-text) !important;
    background-color: var(--tp-pending-bg) !important;
}

/* ─── Badges (roles — users page) ─────────────────────────────── */
[data-theme="dark"] .tq-role-admin {
    background-color: var(--tp-role-admin-bg) !important;
    color: var(--tp-role-admin-text) !important;
}
[data-theme="dark"] .tq-role-support {
    background-color: var(--tp-role-support-bg) !important;
    color: var(--tp-role-support-text) !important;
}
[data-theme="dark"] .tq-role-merchant {
    background-color: var(--tp-role-merchant-bg) !important;
    color: var(--tp-role-merchant-text) !important;
}
[data-theme="dark"] .tq-role-agent {
    background-color: var(--tp-role-agent-bg) !important;
    color: var(--tp-role-agent-text) !important;
}
[data-theme="dark"] .tq-role-user {
    background-color: var(--tp-role-user-bg) !important;
    color: var(--tp-role-user-text) !important;
}

/* ─── Action buttons ──────────────────────────────────────────── */
[data-theme="dark"] .tq-action-btn {
    border-color: var(--tp-border) !important;
    color: var(--tp-text-secondary) !important;
}
[data-theme="dark"] .tq-action-btn:hover {
    background-color: var(--tp-action-view-bg) !important;
    color: var(--tp-action-view-text) !important;
    border-color: var(--tp-action-view-text) !important;
}
[data-theme="dark"] .edit-btn:hover {
    background-color: var(--tp-action-edit-bg) !important;
    color: var(--tp-action-edit-text) !important;
}
[data-theme="dark"] .delete-btn:hover {
    background-color: var(--tp-action-delete-bg) !important;
    color: var(--tp-action-delete-text) !important;
}
[data-theme="dark"] .enable-btn:hover,
[data-theme="dark"] .disable-btn:hover {
    background-color: var(--tp-action-enable-bg) !important;
    color: var(--tp-action-enable-text) !important;
}

/* ─── Modal (transaction detail — tqm-*) ──────────────────────── */
[data-theme="dark"] .tqm-breadcrumb {
    background-color: var(--tp-table-header-bg) !important;
    border-bottom-color: var(--tp-border) !important;
    color: var(--tp-text-secondary) !important;
}
[data-theme="dark"] .tqm-breadcrumb span {
    color: var(--tp-text) !important;
}
[data-theme="dark"] .tqm-close {
    color: var(--tp-text-muted) !important;
}
[data-theme="dark"] .tqm-close:hover {
    color: var(--tp-text) !important;
    background: var(--tp-hover-bg) !important;
}
[data-theme="dark"] .tqm-body {
    color: var(--tp-text);
}
[data-theme="dark"] .tqm-left {
    border-right-color: var(--tp-border) !important;
}
[data-theme="dark"] .tqm-label {
    color: var(--tp-text-muted) !important;
}
[data-theme="dark"] .tqm-val {
    color: var(--tp-text) !important;
}
[data-theme="dark"] .tqm-section-title {
    color: var(--tp-text-secondary) !important;
}
[data-theme="dark"] .tqm-tab {
    color: var(--tp-text-muted) !important;
}
[data-theme="dark"] .tqm-tab.active {
    color: var(--tp-pink) !important;
    border-bottom-color: var(--tp-pink) !important;
}
[data-theme="dark"] .tqm-row {
    border-bottom-color: var(--tp-border) !important;
}
[data-theme="dark"] .tqm-footer {
    border-top-color: var(--tp-border) !important;
}
[data-theme="dark"] .tqm-btn-close {
    background: var(--tp-card-bg) !important;
    color: var(--tp-text) !important;
    border-color: var(--tp-border) !important;
}
[data-theme="dark"] .tqm-btn-close:hover {
    background: var(--tp-hover-bg) !important;
}
[data-theme="dark"] .tqm-amount-label {
    color: var(--tp-text-secondary) !important;
}
[data-theme="dark"] .tqm-amount-value {
    color: var(--tp-text) !important;
}

/* ─── Tabs (verifications, classic tabs) ──────────────────────── */
[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--tp-border) !important;
}
[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--tp-text-secondary) !important;
}
[data-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--tp-border) !important;
    background-color: var(--tp-hover-bg) !important;
}
[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--tp-card-bg) !important;
    color: var(--tp-text) !important;
    border-color: var(--tp-border) var(--tp-border) var(--tp-card-bg) !important;
}
[data-theme="dark"] .tab-content {
    background: var(--tp-card-bg);
}
[data-theme="dark"] #myClassicTab .nav-link {
    color: var(--tp-text-secondary) !important;
    border-color: var(--tp-border) !important;
}
[data-theme="dark"] #myClassicTab .nav-link.active {
    color: var(--tp-text) !important;
    background: var(--tp-card-bg) !important;
}

/* ─── Wizard (verifications steps) ────────────────────────────── */
[data-theme="dark"] .wizard-nav .list-group-item {
    background: transparent !important;
    color: var(--tp-text-secondary) !important;
}
[data-theme="dark"] .wizard-nav .list-group-item.active {
    color: var(--tp-pink) !important;
    background: var(--tp-hover-bg) !important;
}
[data-theme="dark"] .wizard-nav .badge-step {
    background: var(--tp-border) !important;
    color: var(--tp-text) !important;
}
[data-theme="dark"] .wizard-nav .list-group-item.active .badge-step {
    background: var(--tp-pink) !important;
    color: #fff !important;
}
[data-theme="dark"] .form-section-title {
    color: var(--tp-text) !important;
}
[data-theme="dark"] .upload-label {
    color: var(--tp-text-muted) !important;
}

/* ─── Payout modal ────────────────────────────────────────────── */
[data-theme="dark"] .payout-modal .modal-body {
    background: var(--tp-card-bg) !important;
}
[data-theme="dark"] .payout-modal .form-control {
    background-color: var(--tp-input-bg) !important;
    border-color: var(--tp-input-border) !important;
    color: var(--tp-text) !important;
}
[data-theme="dark"] .payout-modal .form-label,
[data-theme="dark"] .payout-modal label {
    color: var(--tp-text-secondary) !important;
}
[data-theme="dark"] .bank-list-item {
    border-color: var(--tp-border) !important;
    color: var(--tp-text) !important;
}
[data-theme="dark"] .bank-list-item:hover {
    background-color: var(--tp-hover-bg) !important;
}
[data-theme="dark"] .bank-selected-pill {
    background-color: rgba(230, 27, 108, 0.15) !important;
    color: var(--tp-pink) !important;
}
[data-theme="dark"] .compliance-bank-search-wrap input {
    background-color: var(--tp-input-bg) !important;
    border-color: var(--tp-input-border) !important;
    color: var(--tp-text) !important;
}
[data-theme="dark"] .compliance-bank-list-item {
    border-color: var(--tp-border) !important;
    color: var(--tp-text) !important;
}
[data-theme="dark"] .compliance-bank-list-item:hover {
    background-color: var(--tp-hover-bg) !important;
}
[data-theme="dark"] .compliance-bank-pill {
    background-color: rgba(230, 27, 108, 0.15) !important;
    color: var(--tp-pink) !important;
}

/* ─── Dashboard skeleton shimmer ──────────────────────────────── */
[data-theme="dark"] .skeleton-shimmer,
[data-theme="dark"] .kpi-skeleton {
    background: linear-gradient(90deg, var(--tp-skeleton-from) 25%, var(--tp-skeleton-to) 50%, var(--tp-skeleton-from) 75%) !important;
}

/* ─── Dashboard tooltips ──────────────────────────────────────── */
[data-theme="dark"] .smart-tooltip {
    background: var(--tp-tooltip-bg) !important;
    color: var(--tp-tooltip-text) !important;
}

/* ─── Dashboard KPI deltas ────────────────────────────────────── */
[data-theme="dark"] .kpi-delta.up {
    color: var(--tp-success-text) !important;
    background: var(--tp-success-bg) !important;
}
[data-theme="dark"] .kpi-delta.down {
    color: var(--tp-failed-text) !important;
    background: var(--tp-failed-bg) !important;
}
[data-theme="dark"] .kpi-delta.neutral {
    color: var(--tp-text-muted) !important;
    background: rgba(108, 117, 125, 0.15) !important;
}

/* ─── Toast ───────────────────────────────────────────────────── */
[data-theme="dark"] .tq-toast {
    background: var(--tp-card-bg) !important;
    border-color: var(--tp-border) !important;
    color: var(--tp-text) !important;
}

/* ─── Loader ──────────────────────────────────────────────────── */
.page-loader {
    background-color: var(--tp-loader-overlay);
}
.loader-content {
    background-color: var(--tp-loader-bg);
}

/* ─── Links ───────────────────────────────────────────────────── */
[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.side-nav a) {
    color: var(--tp-link);
}
[data-theme="dark"] .sleek-link {
    color: var(--tp-link) !important;
    border-bottom-color: var(--tp-border) !important;
}

/* ─── SweetAlert2 ─────────────────────────────────────────────── */
[data-theme="dark"] .swal2-popup {
    background-color: var(--tp-card-bg) !important;
    color: var(--tp-text) !important;
}
[data-theme="dark"] .swal2-title {
    color: var(--tp-text) !important;
}
[data-theme="dark"] .swal2-html-container {
    color: var(--tp-text-secondary) !important;
}
[data-theme="dark"] .swal2-html-container table {
    color: var(--tp-text) !important;
}
[data-theme="dark"] .swal2-input,
[data-theme="dark"] .swal2-textarea,
[data-theme="dark"] .swal2-select {
    background-color: var(--tp-input-bg) !important;
    color: var(--tp-text) !important;
    border-color: var(--tp-input-border) !important;
}
[data-theme="dark"] .swal2-validation-message {
    background-color: var(--tp-hover-bg) !important;
    color: var(--tp-pending-text) !important;
}

/* ─── Toastr ──────────────────────────────────────────────────── */
[data-theme="dark"] #toast-container > .toast {
    background-color: var(--tp-card-bg) !important;
    color: var(--tp-text) !important;
    box-shadow: var(--tp-shadow-hover) !important;
}

/* ─── Daterangepicker ─────────────────────────────────────────── */
[data-theme="dark"] .daterangepicker {
    background-color: var(--tp-card-bg) !important;
    border-color: var(--tp-border) !important;
    color: var(--tp-text) !important;
}
[data-theme="dark"] .daterangepicker td.active {
    background-color: var(--tp-pink) !important;
}
[data-theme="dark"] .daterangepicker td.in-range {
    background-color: var(--tp-hover-bg) !important;
    color: var(--tp-text) !important;
}
[data-theme="dark"] .daterangepicker .calendar-table {
    background-color: var(--tp-card-bg) !important;
    border-color: var(--tp-border) !important;
}
[data-theme="dark"] .daterangepicker th,
[data-theme="dark"] .daterangepicker td {
    color: var(--tp-text) !important;
}
[data-theme="dark"] .daterangepicker td.off {
    color: var(--tp-text-muted) !important;
}
[data-theme="dark"] .daterangepicker select {
    background-color: var(--tp-input-bg) !important;
    color: var(--tp-text) !important;
}

/* ─── Scrollbar ───────────────────────────────────────────────── */
[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--tp-body-bg); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a3d48; border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4a4d58; }

/* ─── Misc Bootstrap overrides ────────────────────────────────── */
[data-theme="dark"] .list-group-item {
    background-color: var(--tp-card-bg) !important;
    border-color: var(--tp-border) !important;
    color: var(--tp-text) !important;
}
[data-theme="dark"] .alert {
    border-color: var(--tp-border) !important;
}
[data-theme="dark"] .breadcrumb {
    background-color: var(--tp-hover-bg) !important;
}
[data-theme="dark"] hr {
    border-color: var(--tp-border);
}
[data-theme="dark"] .text-muted {
    color: var(--tp-text-muted) !important;
}
[data-theme="dark"] .text-dark {
    color: var(--tp-text) !important;
}
[data-theme="dark"] .bg-white {
    background-color: var(--tp-card-bg) !important;
}
[data-theme="dark"] .bg-light {
    background-color: var(--tp-hover-bg) !important;
}
[data-theme="dark"] .border {
    border-color: var(--tp-border) !important;
}
[data-theme="dark"] .border-bottom {
    border-bottom-color: var(--tp-border) !important;
}
[data-theme="dark"] .shadow-sm {
    box-shadow: var(--tp-shadow) !important;
}

/* ─── Chart.js canvas (invert for readability) ────────────────── */
[data-theme="dark"] .chart-container canvas,
[data-theme="dark"] .dash-card canvas {
    filter: brightness(0.9);
}

/* ─── Universal text color fix for dark mode ──────────────────── */
/* Ensure ALL text content reads well on dark backgrounds */
[data-theme="dark"] {
    color: #e2e4e9;
}
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: #e8eaef !important;
}
[data-theme="dark"] p,
[data-theme="dark"] span:not(.tq-status-pill):not(.tqm-method-tag):not(.filter-badge):not(.kpi-delta),
[data-theme="dark"] div:not(.swal2-popup):not(.dropdown-menu),
[data-theme="dark"] td,
[data-theme="dark"] th,
[data-theme="dark"] li,
[data-theme="dark"] label {
    color: inherit;
}
[data-theme="dark"] .font-weight-500,
[data-theme="dark"] .font-weight-bold,
[data-theme="dark"] .bold-text,
[data-theme="dark"] .bolder-text {
    color: #e8eaef !important;
}
[data-theme="dark"] small,
[data-theme="dark"] .small {
    color: var(--tp-text-secondary) !important;
}

/* ─── Dashboard toolbar & filter panel ────────────────────────── */
[data-theme="dark"] .dash-toolbar {
    background: var(--tp-card-bg) !important;
    border-bottom-color: var(--tp-border) !important;
}
[data-theme="dark"] .preset-btn {
    background: var(--tp-card-bg) !important;
    color: var(--tp-text-secondary) !important;
    border-color: var(--tp-border) !important;
}
[data-theme="dark"] .preset-btn:hover {
    border-color: var(--tp-pink) !important;
    color: var(--tp-pink) !important;
}
[data-theme="dark"] .preset-btn.active {
    background: var(--tp-pink) !important;
    color: #fff !important;
    border-color: var(--tp-pink) !important;
}
[data-theme="dark"] .toolbar-separator {
    background: var(--tp-border) !important;
}
[data-theme="dark"] #merchantFilter {
    background-color: var(--tp-input-bg) !important;
    color: var(--tp-text) !important;
    border-color: var(--tp-pink) !important;
}
[data-theme="dark"] .compare-toggle {
    color: var(--tp-text-secondary) !important;
}
[data-theme="dark"] .filter-panel {
    background: var(--tp-card-bg) !important;
    border-color: var(--tp-border) !important;
    box-shadow: var(--tp-shadow) !important;
}
[data-theme="dark"] .filter-panel-close {
    color: var(--tp-text-muted) !important;
}
[data-theme="dark"] .filter-panel-close:hover {
    background: rgba(220,53,69,.15) !important;
}
[data-theme="dark"] .filter-group label {
    color: var(--tp-text-secondary) !important;
}
[data-theme="dark"] .btn-clear-filter {
    color: var(--tp-text-secondary) !important;
    border-color: var(--tp-border) !important;
}
[data-theme="dark"] .btn-clear-filter:hover {
    color: var(--tp-pink) !important;
    border-color: var(--tp-pink) !important;
}
[data-theme="dark"] .filter-pill {
    background: rgba(230,27,108,.15) !important;
}
[data-theme="dark"] .drilldown-banner {
    background: linear-gradient(135deg, rgba(230,27,108,.12), rgba(230,27,108,.05)) !important;
    border-color: rgba(230,27,108,.25) !important;
    color: var(--tp-text) !important;
}

/* ─── Dashboard Insights (What / So What / Now What) ──────────── */
[data-theme="dark"] .insights-panel {
    background: var(--tp-card-bg) !important;
    border-color: var(--tp-card-border) !important;
    box-shadow: var(--tp-shadow) !important;
}
[data-theme="dark"] .insights-section-header {
    color: var(--tp-text) !important;
    border-bottom-color: var(--tp-border) !important;
}
[data-theme="dark"] .insights-section-header:hover {
    background: rgba(230,27,108,.06) !important;
}
[data-theme="dark"] .insights-section-header .chevron {
    color: var(--tp-text-muted) !important;
}
[data-theme="dark"] .insight-card {
    background: var(--tp-hover-bg) !important;
    color: var(--tp-text) !important;
}
[data-theme="dark"] .insight-title {
    color: #e8eaef !important;
}
[data-theme="dark"] .insight-body {
    color: var(--tp-text-secondary) !important;
}
[data-theme="dark"] .insights-empty {
    color: var(--tp-text-muted) !important;
}

/* ─── Dashboard misc elements ─────────────────────────────────── */
[data-theme="dark"] .kpi-label {
    color: var(--tp-text-secondary) !important;
}
[data-theme="dark"] .kpi-value {
    color: #e8eaef !important;
}
[data-theme="dark"] .kpi-sub {
    color: var(--tp-text-muted) !important;
}
[data-theme="dark"] .kpi-tip-icon {
    background: var(--tp-border) !important;
    color: var(--tp-text-muted) !important;
}
[data-theme="dark"] .header-info-icon {
    background: var(--tp-border) !important;
    color: var(--tp-text-muted) !important;
}
[data-theme="dark"] .compare-info-icon {
    background: var(--tp-border) !important;
    color: var(--tp-text-muted) !important;
}
[data-theme="dark"] .dash-card .card-header {
    color: var(--tp-text) !important;
    border-bottom-color: var(--tp-border) !important;
}
[data-theme="dark"] .wallet-meta {
    color: var(--tp-text-muted) !important;
}
[data-theme="dark"] .empty-state {
    color: var(--tp-text-muted) !important;
}
[data-theme="dark"] .top-merchants-table th {
    color: var(--tp-text-secondary) !important;
    border-color: var(--tp-border) !important;
}
[data-theme="dark"] .top-merchants-table tbody tr:nth-child(even) {
    background: var(--tp-table-stripe) !important;
}
[data-theme="dark"] .success-bar {
    background: var(--tp-border) !important;
}
[data-theme="dark"] .heatmap-label {
    color: var(--tp-text-muted) !important;
}
[data-theme="dark"] .heatmap-legend-labels {
    color: var(--tp-text-muted) !important;
}
[data-theme="dark"] .heatmap-explainer {
    color: var(--tp-text-muted) !important;
}
[data-theme="dark"] .heatmap-tooltip {
    background: var(--tp-tooltip-bg) !important;
    color: var(--tp-tooltip-text) !important;
}
[data-theme="dark"] .funnel-label {
    color: var(--tp-text) !important;
}
[data-theme="dark"] .funnel-meta {
    color: var(--tp-text-muted) !important;
}
[data-theme="dark"] .funnel-stage {
    border-bottom-color: var(--tp-border) !important;
}
[data-theme="dark"] .chart-type-btn {
    background: transparent !important;
    border-color: var(--tp-border) !important;
    color: var(--tp-text-muted) !important;
}
[data-theme="dark"] .chart-type-btn.active {
    background: var(--tp-pink) !important;
    color: #fff !important;
    border-color: var(--tp-pink) !important;
}

/* ─── Transaction filter panel ────────────────────────────────── */
[data-theme="dark"] .tqf-panel {
    background: var(--tp-card-bg) !important;
    border-color: var(--tp-border) !important;
    box-shadow: var(--tp-shadow) !important;
}
[data-theme="dark"] .tqf-close {
    color: var(--tp-text-muted) !important;
}
[data-theme="dark"] .tqf-close:hover {
    background: rgba(220,53,69,.15) !important;
    color: var(--tp-failed-text) !important;
}
[data-theme="dark"] .tqf-label {
    color: var(--tp-text-muted) !important;
}
[data-theme="dark"] .tqf-label::after {
    background: linear-gradient(to right, var(--tp-border), transparent) !important;
}
[data-theme="dark"] .tqf-hint {
    color: var(--tp-text-muted) !important;
}
[data-theme="dark"] .tqf-divider {
    background: var(--tp-border) !important;
}
[data-theme="dark"] .tqf-bank-input {
    background-color: var(--tp-input-bg) !important;
    color: var(--tp-text) !important;
    border-color: var(--tp-input-border) !important;
}
[data-theme="dark"] .tqf-bank-input:focus {
    border-color: var(--tp-pink) !important;
}
[data-theme="dark"] .tqf-saved-btn {
    color: var(--tp-pink) !important;
    background: var(--tp-card-bg) !important;
    border-color: var(--tp-border) !important;
}
[data-theme="dark"] .tqf-saved-btn:hover {
    background: var(--tp-pink) !important;
    color: #fff !important;
}
[data-theme="dark"] .tqf-active-pill {
    background: rgba(233,30,99,.12) !important;
}
[data-theme="dark"] .tqf-advanced {
    border-top-color: var(--tp-border) !important;
}
[data-theme="dark"] .tqf-more-toggle {
    color: var(--tp-pink) !important;
}
[data-theme="dark"] .tqf-apply-top {
    background: var(--tp-pink) !important;
    color: #fff !important;
}
[data-theme="dark"] .tqf-apply-top:hover {
    background: #C2185B !important;
}
[data-theme="dark"] #tqfCustomDate {
    background: var(--tp-hover-bg) !important;
    border-color: var(--tp-border) !important;
}
[data-theme="dark"] .tqf-chip {
    background: var(--tp-card-bg) !important;
    color: var(--tp-text-secondary) !important;
    border-color: var(--tp-border) !important;
}
[data-theme="dark"] .tqf-chip:hover {
    border-color: var(--tp-pink) !important;
    color: var(--tp-pink) !important;
}
[data-theme="dark"] .tqf-chip.active {
    background: var(--tp-pink) !important;
    color: #fff !important;
    border-color: var(--tp-pink) !important;
}

/* ─── Flatpickr (date picker on transactions) ─────────────────── */
[data-theme="dark"] .flatpickr-calendar {
    background: var(--tp-card-bg) !important;
    border-color: var(--tp-border) !important;
    box-shadow: var(--tp-shadow-hover) !important;
}
[data-theme="dark"] .flatpickr-months {
    background: var(--tp-card-bg) !important;
}
[data-theme="dark"] .flatpickr-current-month .cur-month,
[data-theme="dark"] .flatpickr-current-month input.cur-year {
    color: var(--tp-text) !important;
}
[data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg,
[data-theme="dark"] .flatpickr-months .flatpickr-next-month svg {
    fill: var(--tp-text-secondary) !important;
}
[data-theme="dark"] .flatpickr-weekday {
    color: var(--tp-text-muted) !important;
    background: var(--tp-card-bg) !important;
}
[data-theme="dark"] .flatpickr-day {
    color: var(--tp-text) !important;
}
[data-theme="dark"] .flatpickr-day:hover {
    background: var(--tp-hover-bg) !important;
    border-color: var(--tp-hover-bg) !important;
}
[data-theme="dark"] .flatpickr-day.today {
    border-color: var(--tp-pink) !important;
}
[data-theme="dark"] .flatpickr-day.selected,
[data-theme="dark"] .flatpickr-day.startRange,
[data-theme="dark"] .flatpickr-day.endRange {
    background: var(--tp-pink) !important;
    color: #fff !important;
    border-color: var(--tp-pink) !important;
}
[data-theme="dark"] .flatpickr-day.inRange {
    background: rgba(230,27,108,.15) !important;
    border-color: rgba(230,27,108,.15) !important;
    color: var(--tp-text) !important;
}
[data-theme="dark"] .flatpickr-day.disabled,
[data-theme="dark"] .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-day.nextMonthDay {
    color: var(--tp-text-muted) !important;
}
[data-theme="dark"] .flatpickr-time {
    background: var(--tp-card-bg) !important;
    border-top-color: var(--tp-border) !important;
}
[data-theme="dark"] .flatpickr-time input {
    color: var(--tp-text) !important;
    background: var(--tp-card-bg) !important;
}

/* ─── Skeleton shimmer (dashboard loading) ────────────────────── */
[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg, var(--tp-skeleton-from) 25%, var(--tp-skeleton-to) 50%, var(--tp-skeleton-from) 75%) !important;
}

/* ─── Misc text/icon color overrides ──────────────────────────── */
[data-theme="dark"] .copy-icon {
    color: var(--tp-copy-icon) !important;
}
[data-theme="dark"] .copy-icon:hover {
    color: var(--tp-link) !important;
}
[data-theme="dark"] .text-app {
    color: var(--tp-link) !important;
}
[data-theme="dark"] .app2-color {
    color: var(--tp-link) !important;
}
[data-theme="dark"] .loader-text {
    color: var(--tp-text-secondary) !important;
}

/* ─── Report modal (inline styles override) ───────────────────── */
[data-theme="dark"] #reportModal .modal-content {
    background-color: var(--tp-card-bg) !important;
}
[data-theme="dark"] #reportModal .modal-content > div[style*="background:#F5F5F5"],
[data-theme="dark"] #reportModal .modal-content > div[style*="background: #F5F5F5"] {
    background: var(--tp-table-header-bg) !important;
}
[data-theme="dark"] #reportModal span[style*="color:#1a1a1a"],
[data-theme="dark"] #reportModal div[style*="color:#1a1a1a"] {
    color: #e8eaef !important;
}
[data-theme="dark"] #reportModal div[style*="color:#888"],
[data-theme="dark"] #reportModal div[style*="color:#999"],
[data-theme="dark"] #reportModal label[style*="color:#999"] {
    color: var(--tp-text-secondary) !important;
}
[data-theme="dark"] #reportModal button[style*="color:#999"] {
    color: var(--tp-text-muted) !important;
}
[data-theme="dark"] #reportModal .rpt-type-option {
    border-color: var(--tp-border) !important;
    background: var(--tp-card-bg) !important;
}
[data-theme="dark"] #reportModal .rpt-type-option.active {
    border-color: var(--tp-pink) !important;
}
[data-theme="dark"] #reportModal input[type="text"] {
    background-color: var(--tp-input-bg) !important;
    color: var(--tp-text) !important;
    border-color: var(--tp-input-border) !important;
}
[data-theme="dark"] #reportModal .rpt-chip {
    background: var(--tp-card-bg) !important;
    color: var(--tp-text) !important;
    border-color: var(--tp-border) !important;
}
[data-theme="dark"] #reportModal .rpt-chip-active {
    background: var(--tp-pink) !important;
    color: #fff !important;
    border-color: var(--tp-pink) !important;
}
[data-theme="dark"] #reportModal #rptFilterSummary {
    background: rgba(230, 27, 108, 0.08) !important;
    border-color: rgba(230, 27, 108, 0.2) !important;
}
[data-theme="dark"] #reportModal span[style*="color:#adb5bd"] {
    color: var(--tp-text-muted) !important;
}
[data-theme="dark"] #reportModal div[style*="padding:20px"] {
    color: var(--tp-text) !important;
}

/* ─── My Reports panel ────────────────────────────────────────── */
[data-theme="dark"] #myReportsPanel {
    background: var(--tp-card-bg) !important;
    border-color: var(--tp-card-border) !important;
}
[data-theme="dark"] #myReportsPanel th {
    color: var(--tp-text-secondary) !important;
}

/* ─── Inline style overrides: catch-all for common dark-on-dark ── */
/* Elements with hardcoded dark text colors that vanish in dark mode */
[data-theme="dark"] [style*="color:#1a1a1a"],
[data-theme="dark"] [style*="color: #1a1a1a"],
[data-theme="dark"] [style*="color:#333"],
[data-theme="dark"] [style*="color: #333"],
[data-theme="dark"] [style*="color:#2d3436"],
[data-theme="dark"] [style*="color: #2d3436"],
[data-theme="dark"] [style*="color:#495057"],
[data-theme="dark"] [style*="color: #495057"],
[data-theme="dark"] [style*="color:#424242"],
[data-theme="dark"] [style*="color: #424242"],
[data-theme="dark"] [style*="color:#222"],
[data-theme="dark"] [style*="color: #222"],
[data-theme="dark"] [style*="color:#000"],
[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color:black"],
[data-theme="dark"] [style*="color: black"] {
    color: #e8eaef !important;
}

/* Elements with hardcoded muted text */
[data-theme="dark"] [style*="color:#888"],
[data-theme="dark"] [style*="color: #888"],
[data-theme="dark"] [style*="color:#999"],
[data-theme="dark"] [style*="color: #999"],
[data-theme="dark"] [style*="color:#adb5bd"],
[data-theme="dark"] [style*="color: #adb5bd"],
[data-theme="dark"] [style*="color:#6c757d"],
[data-theme="dark"] [style*="color: #6c757d"],
[data-theme="dark"] [style*="color:#757575"],
[data-theme="dark"] [style*="color: #757575"],
[data-theme="dark"] [style*="color:#666"],
[data-theme="dark"] [style*="color: #666"] {
    color: #9ca0ab !important;
}

/* Elements with hardcoded light backgrounds */
[data-theme="dark"] [style*="background:#F5F5F5"],
[data-theme="dark"] [style*="background: #F5F5F5"],
[data-theme="dark"] [style*="background:#f5f5f5"],
[data-theme="dark"] [style*="background: #f5f5f5"],
[data-theme="dark"] [style*="background:#fafbfc"],
[data-theme="dark"] [style*="background: #fafbfc"],
[data-theme="dark"] [style*="background:#f8f9fc"],
[data-theme="dark"] [style*="background: #f8f9fc"],
[data-theme="dark"] [style*="background:#f8f9fa"],
[data-theme="dark"] [style*="background: #f8f9fa"] {
    background: var(--tp-table-header-bg) !important;
}

/* Elements with hardcoded white backgrounds */
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: white"] {
    background: var(--tp-card-bg) !important;
}

/* Elements with hardcoded light borders */
[data-theme="dark"] [style*="border:1.5px solid #ddd"],
[data-theme="dark"] [style*="border: 1.5px solid #ddd"],
[data-theme="dark"] [style*="border:1px solid #ddd"],
[data-theme="dark"] [style*="border: 1px solid #ddd"],
[data-theme="dark"] [style*="border:2px solid #e0e0e0"],
[data-theme="dark"] [style*="border: 2px solid #e0e0e0"] {
    border-color: var(--tp-border) !important;
}

/* ─── Sidebar: active menu item ───────────────────────────────── */
/* Light mode: default bg-white works on dark sidebar */

/* Dark mode: pink highlight instead of white */
[data-theme="dark"] #slide-out li.bg-white {
    background: rgba(230, 27, 108, 0.15) !important;
}
[data-theme="dark"] #slide-out li.bg-white a,
[data-theme="dark"] #slide-out .text-primary {
    color: var(--tp-pink) !important;
}
[data-theme="dark"] #slide-out li.bg-white a i,
[data-theme="dark"] #slide-out i.text-primary {
    color: var(--tp-pink) !important;
}
[data-theme="dark"] #slide-out li.elevated-button {
    box-shadow: none !important;
}

/* Active item: vertically center text in highlight box */
#slide-out li.elevated-button {
    border-radius: 8px;
    margin: 2px 10px;
}
#slide-out li.elevated-button .collapsible-header {
    display: flex;
    align-items: center;
}

/* ─── Sidebar: mobile spacing (keep left-aligned) ────────────── */
@media (max-width: 767px) {
    #slide-out .sidebar-menu .collapsible-header {
        padding: 14px 16px !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        overflow: visible !important;
    }
    #slide-out .sidebar-menu .collapsible-header i {
        margin-right: 10px;
        font-size: 16px;
        width: 22px;
        text-align: center;
        flex-shrink: 0;
    }
    #slide-out .sidebar-menu li {
        margin: 3px 8px;
    }
    #slide-out .sidebar-menu li.elevated-button {
        border-radius: 10px !important;
    }
    #slide-out .sidebar-menu .collapsible li {
        margin: 0;
    }
    #slide-out .collapsible-body a {
        padding: 12px 20px !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
}

/* ─── Merchants page: full dark mode ──────────────────────────── */
[data-theme="dark"] .tq-page-title {
    color: #e8eaef !important;
}
[data-theme="dark"] .tq-page-subtitle {
    color: var(--tp-text-secondary) !important;
}
[data-theme="dark"] .tq-btn-outline {
    background: var(--tp-card-bg) !important;
    color: var(--tp-text) !important;
    border-color: var(--tp-border) !important;
}
[data-theme="dark"] .tq-btn-outline:hover {
    border-color: var(--tp-pink) !important;
    color: var(--tp-pink) !important;
}
[data-theme="dark"] .tq-table-wrapper .table thead th {
    background: var(--tp-table-header-bg) !important;
    color: var(--tp-text-secondary) !important;
    border-color: var(--tp-border) !important;
}
[data-theme="dark"] .tq-table-wrapper .table tbody td {
    color: #edf0f4 !important;
    border-color: var(--tp-border) !important;
}
[data-theme="dark"] .tq-table-wrapper .table tbody tr:hover {
    background: var(--tp-table-hover) !important;
}
[data-theme="dark"] .tq-badge-success {
    background: var(--tp-success-bg) !important;
    color: var(--tp-success-text) !important;
}
[data-theme="dark"] .tq-badge-success::before {
    background: var(--tp-success-text) !important;
}
[data-theme="dark"] .tq-badge-failed {
    background: var(--tp-failed-bg) !important;
    color: var(--tp-failed-text) !important;
}
[data-theme="dark"] .tq-badge-failed::before {
    background: var(--tp-failed-text) !important;
}
/* Merchant modals */
[data-theme="dark"] .modal-header {
    background: var(--tp-card-bg) !important;
    border-bottom-color: var(--tp-border) !important;
}
[data-theme="dark"] .modal-header .modal-title {
    color: #e8eaef !important;
}
[data-theme="dark"] .modal-header .close {
    color: var(--tp-text-muted) !important;
}
[data-theme="dark"] .modal-body {
    background: var(--tp-card-bg) !important;
    color: var(--tp-text) !important;
}
[data-theme="dark"] .modal-footer {
    background: var(--tp-card-bg) !important;
    border-top-color: var(--tp-border) !important;
}
/* Toggle buttons (active/inactive merchant) */
[data-theme="dark"] .tq-action-btn.toggle-btn.active-merchant:hover {
    background: var(--tp-action-delete-bg) !important;
    color: var(--tp-action-delete-text) !important;
    border-color: var(--tp-action-delete-text) !important;
}
[data-theme="dark"] .tq-action-btn.toggle-btn.inactive-merchant:hover {
    background: var(--tp-action-enable-bg) !important;
    color: var(--tp-action-enable-text) !important;
    border-color: var(--tp-action-enable-text) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   AUTH PAGES — Login, Signup, 2FA, Password Reset
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
    --auth-text: #e2e4e9;
    --auth-muted: #9ca0ab;
    --auth-border: #3a3d48;
    --auth-bg: #0f1117;
    --auth-card-shadow: 0 8px 40px rgba(0,0,0,.3);
}

[data-theme="dark"] .auth-page {
    background: var(--auth-bg) !important;
}
[data-theme="dark"] .auth-card {
    background: #1a1d28 !important;
    box-shadow: var(--auth-card-shadow) !important;
}
[data-theme="dark"] .auth-header h2 {
    color: #e8eaef !important;
}
[data-theme="dark"] .auth-header p {
    color: var(--auth-muted) !important;
}
[data-theme="dark"] .auth-input {
    background: #22252f !important;
    color: #edf0f4 !important;
    border-color: var(--auth-border) !important;
}
[data-theme="dark"] .auth-input:focus {
    border-color: var(--tp-pink) !important;
    box-shadow: 0 0 0 3px rgba(216, 24, 97, 0.15) !important;
}
[data-theme="dark"] .auth-input::placeholder {
    color: #6b7080 !important;
}
[data-theme="dark"] .auth-label {
    color: var(--auth-muted) !important;
}
[data-theme="dark"] .auth-field-icon {
    color: #6b7080 !important;
}
[data-theme="dark"] .auth-input:focus ~ .auth-field-icon {
    color: var(--tp-pink) !important;
}
[data-theme="dark"] .auth-pw-toggle {
    color: #6b7080 !important;
}
[data-theme="dark"] .auth-pw-toggle:hover {
    color: var(--tp-pink) !important;
}
[data-theme="dark"] .auth-error {
    color: #ef5350 !important;
}
[data-theme="dark"] .auth-link {
    color: var(--tp-pink) !important;
}
[data-theme="dark"] .auth-footer {
    color: var(--auth-muted) !important;
}
[data-theme="dark"] .auth-helper-row {
    color: var(--auth-muted) !important;
}
/* Auth page footer */
[data-theme="dark"] .auth-page footer,
[data-theme="dark"] .auth-page .auth-page-footer {
    background: #0a0d14 !important;
    color: #6b7080 !important;
}
[data-theme="dark"] .auth-page footer a {
    color: var(--tp-pink) !important;
}
/* Signup-specific: password strength bar */
[data-theme="dark"] .password-strength-bar {
    background-color: #3a3d48 !important;
}
/* Signup-specific: step indicators */
[data-theme="dark"] .auth-card .step-indicator {
    color: var(--auth-muted) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   INDEX / LANDING PAGE
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .tp-nav {
    background: rgba(15, 17, 23, 0.9) !important;
    border-bottom-color: rgba(42, 45, 56, 0.6) !important;
}
[data-theme="dark"] .tp-nav.scrolled {
    box-shadow: 0 1px 20px rgba(0,0,0,.3) !important;
}
[data-theme="dark"] .tp-nav-link {
    color: #d0d3d9 !important;
}
[data-theme="dark"] .tp-nav-link:hover {
    color: var(--tp-pink) !important;
    background: rgba(230, 27, 108, 0.08) !important;
}
/* Hero section */
[data-theme="dark"] .tp-hero {
    background: #0f1117 !important;
}
[data-theme="dark"] .tp-hero h1,
[data-theme="dark"] .tp-hero-title {
    color: #e8eaef !important;
}
[data-theme="dark"] .tp-hero p,
[data-theme="dark"] .tp-hero-sub {
    color: #9ca0ab !important;
}
/* Feature/info sections */
[data-theme="dark"] .tp-section {
    background: #0f1117 !important;
}
[data-theme="dark"] .tp-section-alt,
[data-theme="dark"] [style*="background:var(--bg-off)"],
[data-theme="dark"] [style*="background:#f8fafc"] {
    background: #141720 !important;
}
[data-theme="dark"] .tp-section h2,
[data-theme="dark"] .tp-section-title {
    color: #e8eaef !important;
}
[data-theme="dark"] .tp-section p {
    color: #9ca0ab !important;
}
/* Feature cards */
[data-theme="dark"] .tp-feature-card,
[data-theme="dark"] .tp-card {
    background: #1a1d28 !important;
    border-color: #2a2d38 !important;
}
[data-theme="dark"] .tp-feature-card h3,
[data-theme="dark"] .tp-card h3 {
    color: #e8eaef !important;
}
[data-theme="dark"] .tp-feature-card p,
[data-theme="dark"] .tp-card p {
    color: #9ca0ab !important;
}
/* Stats */
[data-theme="dark"] .tp-stat-value {
    color: #e8eaef !important;
}
[data-theme="dark"] .tp-stat-label {
    color: #6b7080 !important;
}
/* Footer */
[data-theme="dark"] .tp-footer {
    background: #0a0d14 !important;
    color: #6b7080 !important;
}
[data-theme="dark"] .tp-footer a {
    color: #9ca0ab !important;
}
[data-theme="dark"] .tp-footer a:hover {
    color: var(--tp-pink) !important;
}
[data-theme="dark"] .tp-footer h4 {
    color: #e2e4e9 !important;
}
/* CTA section */
[data-theme="dark"] .tp-cta {
    background: linear-gradient(135deg, #1a1d28, #141720) !important;
}
/* Code/terminal blocks */
[data-theme="dark"] .tp-code-block,
[data-theme="dark"] .tp-terminal {
    background: #0a0d14 !important;
    border-color: #2a2d38 !important;
}
/* Index page generic overrides for inline CSS vars */
[data-theme="dark"] {
    --ink: #e2e4e9;
    --ink-light: #9ca0ab;
    --ink-muted: #6b7080;
    --bg: #0f1117;
    --bg-off: #141720;
    --bg-dark: #0a0d14;
    --border: #2a2d38;
}

/* ─── Logo: hide dark logo, show light logo in dark mode ──────── */
/* Each logo img gets hidden; a background-image on the parent shows the light version */
[data-theme="dark"] .auth-logo img,
[data-theme="dark"] .tp-nav-logo img,
[data-theme="dark"] .tp-footer-logo img {
    visibility: hidden;
}
[data-theme="dark"] .auth-logo,
[data-theme="dark"] .tp-nav-logo,
[data-theme="dark"] .tp-footer-logo {
    background: url('../../imgs/logo-light.png') no-repeat center center;
    background-size: contain;
    min-height: 36px;
}

/* ═══════════════════════════════════════════════════════════════════
   VIEW MERCHANT PAGE (info cards, virtual account, admin controls)
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .tq-info-card {
    background: var(--tp-card-bg) !important;
    border-color: var(--tp-card-border) !important;
}
[data-theme="dark"] .tq-info-card-title {
    color: var(--tp-text-secondary) !important;
    border-bottom-color: var(--tp-border) !important;
}
[data-theme="dark"] .tq-info-row {
    border-top-color: var(--tp-border) !important;
}
[data-theme="dark"] .tq-info-label {
    color: var(--tp-text-secondary) !important;
}
[data-theme="dark"] .tq-info-value {
    color: #edf0f4 !important;
}
[data-theme="dark"] .tq-section-title {
    color: #e8eaef !important;
}
[data-theme="dark"] .tq-back-link {
    color: var(--tp-pink) !important;
}
[data-theme="dark"] .tq-btn-outline-sm {
    color: var(--tp-text) !important;
    border-color: var(--tp-border) !important;
    background: transparent !important;
}
[data-theme="dark"] .tq-btn-outline-sm:hover {
    color: var(--tp-pink) !important;
    border-color: var(--tp-pink) !important;
}
[data-theme="dark"] .tq-btn-danger-sm {
    background: rgba(198, 40, 40, 0.15) !important;
    border-color: rgba(198, 40, 40, 0.3) !important;
    color: #ef5350 !important;
}
[data-theme="dark"] .tq-btn-danger-sm:hover {
    background: rgba(198, 40, 40, 0.25) !important;
}
/* Edit form fields */
[data-theme="dark"] .tq-edit-field label {
    color: var(--tp-text-secondary) !important;
}
[data-theme="dark"] .tq-edit-field input,
[data-theme="dark"] .tq-edit-field select,
[data-theme="dark"] .tq-edit-field textarea {
    background: var(--tp-input-bg) !important;
    color: #edf0f4 !important;
    border-color: var(--tp-input-border) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   VIEW WALLET / WALLET DETAIL PAGE
   ═══════════════════════════════════════════════════════════════════ */

/* Credit/Debit direction badges: bolder text */
[data-theme="dark"] .tq-type-credit {
    background: var(--tp-success-bg) !important;
    color: var(--tp-success-text) !important;
    font-weight: 700 !important;
}
[data-theme="dark"] .tq-type-debit {
    background: var(--tp-failed-bg) !important;
    color: var(--tp-failed-text) !important;
    font-weight: 700 !important;
}
/* Also bold in light mode for readability */
.tq-type-credit, .tq-type-debit {
    font-weight: 700 !important;
}

/* Wallet detail card */
[data-theme="dark"] .tq-wallet-card {
    background: var(--tp-card-bg) !important;
    border-color: var(--tp-card-border) !important;
}
[data-theme="dark"] .tq-wallet-card-body {
    background: var(--tp-card-bg) !important;
}
[data-theme="dark"] .tq-wallet-card-row .label {
    color: var(--tp-text-secondary) !important;
}
[data-theme="dark"] .tq-wallet-card-row .value {
    color: #edf0f4 !important;
}
[data-theme="dark"] .tq-wallet-card-row {
    border-bottom-color: var(--tp-border) !important;
}
[data-theme="dark"] .tq-wallet-card-footer {
    border-top-color: var(--tp-border) !important;
    background: var(--tp-card-bg) !important;
}

/* Merchant single wallet: ensure card is scrollable on mobile */
@media (max-width: 767px) {
    .tq-wallet-card {
        max-width: 100% !important;
        margin-bottom: 20px !important;
    }
    /* Ensure page content below wallet card is reachable */
    main.dash-main, main, .container-xl {
        padding-bottom: 80px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   API / DEVELOPER PAGE
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
    --api-bg: #141720;
    --api-surface: #1a1d28;
    --api-text: #e2e4e9;
    --api-muted: #9ca0ab;
    --api-border: #2a2d38;
    --api-pink-light: rgba(233, 30, 99, 0.15);
}

/* Environment bar */
[data-theme="dark"] .env-bar {
    background: var(--tp-card-bg) !important;
    border-color: var(--tp-border) !important;
}
[data-theme="dark"] .env-label {
    color: var(--tp-text-secondary) !important;
}
[data-theme="dark"] .env-btn {
    background: var(--tp-card-bg) !important;
    color: var(--tp-text-secondary) !important;
    border-color: var(--tp-border) !important;
}
[data-theme="dark"] .env-btn:first-child {
    border-right-color: var(--tp-border) !important;
}
[data-theme="dark"] .env-btn.active {
    background: var(--tp-pink) !important;
    color: #fff !important;
}
[data-theme="dark"] .env-url {
    background: #22252f !important;
    color: var(--tp-text-secondary) !important;
    border-color: var(--tp-border) !important;
}

/* API tabs */
[data-theme="dark"] .api-tabs {
    border-bottom-color: var(--tp-border) !important;
}
[data-theme="dark"] .api-tab {
    color: var(--tp-text-secondary) !important;
}
[data-theme="dark"] .api-tab:hover {
    color: var(--tp-text) !important;
}
[data-theme="dark"] .api-tab.active {
    color: var(--tp-pink) !important;
    border-bottom-color: var(--tp-pink) !important;
}

/* Section titles and descriptions */
[data-theme="dark"] .api-section-title {
    color: #e8eaef !important;
}
[data-theme="dark"] .api-section-desc {
    color: var(--tp-text-secondary) !important;
}

/* Params table */
[data-theme="dark"] .params-wrap {
    background: var(--tp-card-bg) !important;
    border-color: var(--tp-border) !important;
}
[data-theme="dark"] .params-table th {
    background: var(--tp-table-header-bg) !important;
    color: var(--tp-text-secondary) !important;
    border-bottom-color: var(--tp-border) !important;
}
[data-theme="dark"] .params-table td {
    border-bottom-color: var(--tp-border) !important;
    color: var(--tp-text) !important;
}
[data-theme="dark"] .param-desc {
    color: var(--tp-text-secondary) !important;
}
[data-theme="dark"] .param-req.required {
    background: rgba(198, 40, 40, 0.15) !important;
    color: #ef5350 !important;
}
[data-theme="dark"] .param-req.optional {
    background: rgba(156, 160, 171, 0.15) !important;
    color: #9ca0ab !important;
}

/* Method pills */
[data-theme="dark"] .method-pill.post {
    background: rgba(249, 226, 175, 0.15) !important;
    color: #f9e2af !important;
}
[data-theme="dark"] .method-pill.get {
    background: rgba(166, 227, 161, 0.15) !important;
    color: #a6e3a1 !important;
}

/* Response status pills */
[data-theme="dark"] .resp-status.s200 {
    background: rgba(46, 125, 50, 0.15) !important;
    color: #66bb6a !important;
}
[data-theme="dark"] .resp-status.s401 {
    background: rgba(230, 81, 0, 0.15) !important;
    color: #ffb74d !important;
}
[data-theme="dark"] .resp-status.s400 {
    background: rgba(198, 40, 40, 0.15) !important;
    color: #ef5350 !important;
}

/* Response labels */
[data-theme="dark"] .resp-label {
    color: var(--tp-text) !important;
}

/* API notes */
[data-theme="dark"] .api-note.info {
    background: rgba(101, 31, 255, 0.12) !important;
    color: #b388ff !important;
}
[data-theme="dark"] .api-note.info i {
    color: #b388ff !important;
}
[data-theme="dark"] .api-note.warning {
    background: rgba(255, 152, 0, 0.12) !important;
    color: #ffb74d !important;
}
[data-theme="dark"] .api-note.warning i {
    color: #ffb74d !important;
}

/* Divider */
[data-theme="dark"] .api-divider {
    background: var(--tp-border) !important;
}

/* Postman button — ensure white text */
[data-theme="dark"] .postman-btn {
    color: #fff !important;
}

/* API hero badges */
[data-theme="dark"] .api-hero-badge {
    color: rgba(255,255,255,0.8) !important;
}

/* ─── Auth footer logo dark mode ───────────────────────────────── */
[data-theme="dark"] img.auth-footer-logo {
    content: url('../../imgs/logo-light.png');
}
[data-theme="dark"] footer[style*="border-top"] a {
    color: var(--tp-text-secondary) !important;
}
[data-theme="dark"] footer[style*="border-top"] a:hover {
    color: var(--tp-pink) !important;
}

/* ─── Index page: high contrast text fixes ────────────────────── */

/* Hero button: remove arrow icon in dark mode, ensure white text */
[data-theme="dark"] .tp-btn-primary .bi-arrow-right {
    display: none !important;
}
[data-theme="dark"] .tp-btn-primary {
    color: #fff !important;
}

/* CTA "Get Started Now" button: white bg on dark — text must be pink, already is */
/* But the arrow should also be hidden */
[data-theme="dark"] .tp-cta .tp-btn .bi-arrow-right {
    display: none !important;
}

/* Ghost button: white text on dark background */
[data-theme="dark"] .tp-btn-ghost {
    color: #e2e4e9 !important;
    border-color: #3a3d48 !important;
}
[data-theme="dark"] .tp-btn-ghost:hover {
    color: var(--tp-pink) !important;
    border-color: var(--tp-pink) !important;
}

/* Nav CTA button */
[data-theme="dark"] .tp-nav-cta {
    color: #fff !important;
}

/* Steps section */
[data-theme="dark"] .tp-step h5 {
    color: #e8eaef !important;
}
[data-theme="dark"] .tp-step p {
    color: #9ca0ab !important;
}
[data-theme="dark"] .tp-step-num {
    background: var(--tp-body-bg) !important;
    color: var(--tp-pink) !important;
}
[data-theme="dark"] .tp-step::after {
    background: repeating-linear-gradient(90deg, #3a3d48 0, #3a3d48 6px, transparent 6px, transparent 12px) !important;
}

/* Badge (hero pill) */
[data-theme="dark"] .tp-badge {
    background: #1a1d28 !important;
    border-color: #2a2d38 !important;
    color: #9ca0ab !important;
}

/* Trust items */
[data-theme="dark"] .tp-trust-item {
    color: #9ca0ab !important;
}

/* Section text */
[data-theme="dark"] .tp-section-sub {
    color: #9ca0ab !important;
}

/* CTA inner (already dark bg) — ensure text stays white */
[data-theme="dark"] .tp-cta-inner h2 {
    color: #fff !important;
}
[data-theme="dark"] .tp-cta-inner p {
    color: rgba(255,255,255,0.6) !important;
}

/* Feature cards text */
[data-theme="dark"] .tp-feature-icon {
    background: rgba(230, 27, 108, 0.1) !important;
}

/* Section backgrounds: alternating dark */
[data-theme="dark"] .tp-section:nth-child(even) {
    background: #141720 !important;
}
[data-theme="dark"] .tp-section:nth-child(odd) {
    background: #0f1117 !important;
}

/* ─── Index: force high contrast on ALL feature/step text ─────── */
/* Feature card titles (Card Payments, Bank Transfers, etc.) */
[data-theme="dark"] .tp-feature h4 {
    color: #f0f2f5 !important;
}
/* Feature card descriptions */
[data-theme="dark"] .tp-feature p {
    color: #b0b5bf !important;
}
/* Feature card backgrounds */
[data-theme="dark"] .tp-feature {
    background: #1a1d28 !important;
    border-color: #2a2d38 !important;
}
/* Feature icon bg */
[data-theme="dark"] .tp-feature-icon {
    background: rgba(230, 27, 108, 0.1) !important;
}

/* Section titles (Simple API, Agent Management, etc.) */
[data-theme="dark"] .tp-section-title {
    color: #f0f2f5 !important;
}
/* Section subtitles */
[data-theme="dark"] .tp-section-sub {
    color: #b0b5bf !important;
}

/* "Start testing in minutes, go live when you're ready" */
[data-theme="dark"] .tp-features .tp-section-title,
[data-theme="dark"] .tp-how .tp-section-title,
[data-theme="dark"] section .tp-section-title {
    color: #f0f2f5 !important;
}

/* Steps: Create Account, Integrate API, Collect Payments, Get Settled */
[data-theme="dark"] .tp-step h5 {
    color: #f0f2f5 !important;
}
[data-theme="dark"] .tp-step p {
    color: #b0b5bf !important;
}

/* Steps background for the "How it Works" section */
[data-theme="dark"] .tp-steps {
    color: #f0f2f5 !important;
}

/* Any remaining text using --ink that's faint */
[data-theme="dark"] [style*="color:var(--ink)"] {
    color: #f0f2f5 !important;
}
[data-theme="dark"] [style*="color:var(--ink-light)"] {
    color: #d0d3d9 !important;
}
[data-theme="dark"] [style*="color:var(--ink-muted)"] {
    color: #b0b5bf !important;
}

/* ═══════════════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON
   ═══════════════════════════════════════════════════════════════════ */

.theme-toggle {
    background: none;
    border: 1px solid var(--tp-border);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #d4a017;
    transition: all 0.2s;
    padding: 0;
}
.theme-toggle:hover {
    background: rgba(212, 160, 23, 0.1);
    color: #e6b422;
    border-color: #d4a017;
}
.theme-toggle i {
    font-size: 15px;
}

/* ═══════════════════════════════════════════════════════════════════
   SMOOTH TRANSITIONS
   ═══════════════════════════════════════════════════════════════════ */

body,
.card, .modal-content, .dropdown-menu,
.kpi-card, .dash-card, .tq-stat-card, .tq-table-wrapper, .tq-wallet-card,
.navbar, .page-footer,
.form-control, input, select, textarea,
.table, table,
.tqm-breadcrumb, .tqm-body, .tqm-footer,
.list-group-item, .nav-tabs, .tab-content {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}


/* ═══════════════════════════════════════════════════════════════════
   MOBILE APP MODE (≤ 767px)
   Makes the web app look and feel like a native mobile app:
   - Larger, readable text (no eye strain)
   - Tap-friendly buttons (44px+ touch targets)
   - Flat, icon-first UI (no elevation/animation)
   - Full-width layouts
   - Compact but spacious proportions
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* ─── Base typography: bigger, clearer ─────────────────────── */
    body {
        font-size: 15px !important;
        line-height: 1.55 !important;
        -webkit-text-size-adjust: 100%;
    }
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.3rem !important; }
    h3 { font-size: 1.15rem !important; }
    h4, h5, h6 { font-size: 1rem !important; }
    p, span, li, td, th, label, div {
        font-size: inherit;
    }
    small, .small { font-size: .85rem !important; }

    /* Fix tiny hardcoded font sizes */
    .card-tile { font-size: 13px !important; }
    .card-tile i { font-size: 10px !important; }

    /* ─── Navbar: compact app bar ─────────────────────────────── */
    .navbar.double-nav {
        padding: 6px 10px !important;
        min-height: 48px;
    }
    .navbar #page_label {
        font-size: 15px !important;
        font-weight: 700 !important;
    }

    /* ─── Main content: use full width ────────────────────────── */
    main, main.dash-main, .container-xl {
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ─── Cards: flat, full-width, no hover effects ───────────── */
    .card, .kpi-card, .dash-card, .tq-stat-card, .tq-table-wrapper,
    .tq-wallet-card, .insight-card, .insights-panel, .filter-panel {
        border-radius: 10px !important;
        box-shadow: none !important;
        border-width: 1px !important;
    }
    .card:hover, .kpi-card:hover, .dash-card:hover {
        box-shadow: none !important;
        transform: none !important;
    }

    /* KPI cards: readable values */
    .kpi-value { font-size: 1.4rem !important; }
    .kpi-label { font-size: .8rem !important; }
    .kpi-sub { font-size: .78rem !important; }
    .kpi-delta { font-size: .8rem !important; padding: .2rem .6rem !important; }

    /* ─── Buttons: flat, tap-friendly (44px min) ──────────────── */
    .btn, button:not(.close):not(.tqm-close):not(.theme-toggle):not(.tqf-close) {
        min-height: 44px;
        font-size: 14px !important;
        border-radius: 8px !important;
        box-shadow: none !important;
        transition: none !important;
    }
    .btn:hover, button:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    .btn-app, .btn-alternative, .btn-export {
        padding: 10px 18px !important;
        font-size: 14px !important;
    }
    .btn-app-outline, .btn-app-outline-gray {
        padding: 10px 18px !important;
        font-size: 14px !important;
    }

    /* Action buttons in tables: icon-first, larger tap targets */
    .tq-action-btn {
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 8px !important;
        font-size: 16px !important;
    }
    .edit-btn, .delete-btn, .enable-btn, .disable-btn {
        min-width: 40px !important;
        min-height: 40px !important;
    }

    /* ─── Tables: readable on mobile ──────────────────────────── */
    table, .table {
        font-size: 13px !important;
    }
    table thead th, .table thead th {
        font-size: 12px !important;
        padding: 10px 8px !important;
        white-space: nowrap;
    }
    table tbody td, .table tbody td {
        padding: 10px 8px !important;
    }

    /* DataTables controls */
    .dataTables_wrapper .dataTables_filter input {
        font-size: 14px !important;
        min-height: 40px !important;
        padding: 8px 12px !important;
    }
    .dataTables_wrapper .dataTables_length select {
        font-size: 14px !important;
        min-height: 38px !important;
    }
    .dataTables_wrapper .dataTables_info {
        font-size: 13px !important;
        padding: 8px 0 !important;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        min-width: 36px !important;
        min-height: 36px !important;
        font-size: 13px !important;
        padding: 6px 10px !important;
    }

    /* ─── Forms: larger inputs for fat fingers ────────────────── */
    .form-control, .custom-select, select,
    input[type="text"], input[type="number"], input[type="email"],
    input[type="password"], input[type="search"], input[type="tel"],
    input[type="date"], textarea {
        font-size: 15px !important;
        min-height: 44px !important;
        padding: 10px 12px !important;
        border-radius: 8px !important;
    }
    .md-form input {
        font-size: 15px !important;
    }
    .md-form label {
        font-size: 14px !important;
    }

    /* ─── Modals: full-width on mobile ────────────────────────── */
    .modal-dialog {
        margin: 8px !important;
        max-width: calc(100% - 16px) !important;
    }
    .modal-content {
        border-radius: 12px !important;
    }
    .modal-title, .modal-header span {
        font-size: 16px !important;
    }

    /* Transaction detail modal */
    .tqm-body {
        flex-direction: column !important;
    }
    .tqm-left {
        border-right: none !important;
        border-bottom: 1px solid var(--tp-border) !important;
    }
    .tqm-left, .tqm-right {
        padding: 16px !important;
    }
    .tqm-label { font-size: 13px !important; }
    .tqm-val { font-size: 14px !important; }
    .tqm-amount-value { font-size: 1.4rem !important; }
    .tqm-section-title { font-size: 13px !important; }
    .tqm-footer {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 12px 16px !important;
    }
    .tqm-footer button {
        flex: 1 1 auto !important;
        min-height: 44px !important;
    }

    /* ─── Filter panels: larger controls ──────────────────────── */
    .tqf-panel {
        padding: 14px !important;
        border-radius: 10px !important;
    }
    .tqf-search {
        font-size: 15px !important;
        min-height: 44px !important;
        padding: 10px 10px 10px 36px !important;
    }
    .tqf-chip {
        font-size: 13px !important;
        padding: 8px 14px !important;
        min-height: 38px !important;
    }
    .tqf-apply, .tqf-apply-top, .tqf-clear {
        font-size: 14px !important;
        min-height: 44px !important;
        padding: 10px 20px !important;
    }
    .tqf-search-row {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .tqf-apply-top {
        width: 100% !important;
    }

    /* ─── Dashboard toolbar: stack vertically ─────────────────── */
    .dash-toolbar {
        padding: 10px 0 !important;
    }
    .toolbar-inner {
        flex-wrap: wrap !important;
    }
    .preset-btn {
        font-size: 13px !important;
        padding: 8px 14px !important;
        min-height: 38px !important;
    }
    #merchantFilter {
        max-width: 100% !important;
        font-size: 14px !important;
        min-height: 44px !important;
    }
    .filter-badge { font-size: .75rem !important; }

    /* ─── Dashboard insights ──────────────────────────────────── */
    .insights-section-header {
        padding: 12px 14px !important;
        font-size: 14px !important;
    }
    .insight-card {
        font-size: 14px !important;
        padding: 10px !important;
    }
    .insight-title { font-size: 14px !important; }
    .insight-body { font-size: 13px !important; line-height: 1.5 !important; }

    /* ─── Status badges: slightly larger ──────────────────────── */
    .success-status, .pending-status, .failed-status,
    .tq-badge-success, .tq-badge-failed, .tq-badge-pending {
        font-size: 12px !important;
        padding: .35rem .75rem !important;
    }
    .tq-status-pill {
        font-size: 12px !important;
    }

    /* ─── Payout modal ────────────────────────────────────────── */
    .payout-modal .modal-body {
        padding: 16px !important;
    }
    .payout-modal label, .payout-modal .form-label {
        font-size: 14px !important;
    }

    /* ─── Report modal ────────────────────────────────────────── */
    #reportModal .rpt-type-option {
        padding: 14px !important;
    }
    #reportModal .rpt-type-option div[style*="font-size:13px"] {
        font-size: 14px !important;
    }
    #reportModal .rpt-type-option div[style*="font-size:11px"] {
        font-size: 13px !important;
    }
    #reportModal .rpt-chip {
        font-size: 13px !important;
        padding: 6px 14px !important;
        min-height: 36px !important;
    }

    /* ─── Footer: compact ─────────────────────────────────────── */
    .page-footer {
        padding: 6px 10px !important;
    }
    .page-footer .font-small {
        font-size: 11px !important;
    }

    /* ─── Sidebar: app-like drawer ────────────────────────────── */
    #slide-out .sidebar-menu li a {
        font-size: 14px !important;
        padding: 12px 20px !important;
    }

    /* ─── Tabs ────────────────────────────────────────────────── */
    .nav-tabs .nav-link {
        font-size: 14px !important;
        padding: 10px 14px !important;
    }
    #myClassicTab .nav-link {
        font-size: 13px !important;
        padding: 10px 12px !important;
    }

    /* ─── SweetAlert: mobile-friendly ─────────────────────────── */
    .swal2-popup {
        font-size: 15px !important;
        padding: 20px 16px !important;
    }
    .swal2-title {
        font-size: 18px !important;
    }
    .swal2-html-container {
        font-size: 14px !important;
    }
    .swal2-actions button {
        min-height: 44px !important;
        font-size: 14px !important;
        padding: 10px 24px !important;
    }
    .swal2-input {
        font-size: 16px !important;
        min-height: 44px !important;
    }

    /* ─── Toastr: larger on mobile ────────────────────────────── */
    #toast-container > .toast {
        font-size: 14px !important;
        padding: 12px 16px !important;
        min-width: 280px !important;
    }

    /* ─── Wizard steps (verifications) ────────────────────────── */
    .wizard-nav .list-group-item {
        font-size: 14px !important;
        padding: 12px 16px !important;
    }
    .wizard-nav .badge-step {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }

    /* ─── Requery button ──────────────────────────────────────── */
    .tqm-btn-requery {
        min-height: 44px !important;
        font-size: 14px !important;
    }

    /* ─── Heatmap: hide on very small screens (not useful) ────── */
    .heatmap-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ─── Date range pickers ──────────────────────────────────── */
    .daterangepicker {
        font-size: 14px !important;
    }
    .flatpickr-day {
        height: 38px !important;
        line-height: 38px !important;
    }

    /* ─── Export/action buttons: icon + text, no elevation ────── */
    .tq-export-btn, .tq-header-btn {
        font-size: 13px !important;
        padding: 8px 14px !important;
        min-height: 40px !important;
        box-shadow: none !important;
        border-radius: 8px !important;
    }

    /* ─── Role badges ─────────────────────────────────────────── */
    .tq-role-admin, .tq-role-support, .tq-role-merchant,
    .tq-role-agent, .tq-role-user {
        font-size: 12px !important;
        padding: .3rem .65rem !important;
    }

    /* ─── Remove all hover elevations/animations on touch ────── */
    * {
        -webkit-tap-highlight-color: transparent;
    }
    *:hover {
        transform: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   EXTRA SMALL PHONES (≤ 375px) — tighter spacing
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 375px) {
    body { font-size: 14px !important; }
    main, main.dash-main, .container-xl {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    .kpi-value { font-size: 1.25rem !important; }
    .tqm-amount-value { font-size: 1.2rem !important; }
    .modal-dialog { margin: 4px !important; }
    .tqf-panel { padding: 10px !important; }
    .preset-btn { font-size: 12px !important; padding: 6px 10px !important; }
}