/* ==========================================================================
   MomentPay theme tokens + dark mode
   --------------------------------------------------------------------------
   Loaded by every layout, after the template stylesheets so it can restyle
   them. Three states are supported, matching what the toggle can set:

     no attribute      -> follow the operating system (prefers-color-scheme)
     data-theme=light  -> force light, even on a dark OS
     data-theme=dark   -> force dark, even on a light OS

   Every colour below comes from a token. Nothing is declared only inside a
   media query or an attribute block, so a page renders correctly in all three
   states rather than only the two that were tested.
   ========================================================================== */

:root {
    /* Surfaces */
    --mp-ground: #f5f7fb;      /* page background */
    --mp-surface: #ffffff;     /* cards, panels, modals */
    --mp-surface-2: #f7f9fc;   /* table heads, insets, hovers */
    --mp-surface-3: #eef1f6;   /* wells, disabled fields */

    /* Text */
    --mp-ink: #1f2a44;
    --mp-ink-soft: #5a6478;
    --mp-muted: #98a2b3;
    --mp-inverse: #ffffff;

    /* Lines */
    --mp-line: #e6eaf2;
    --mp-line-strong: #d7dded;

    /* Brand */
    --mp-primary: #4f46e5;
    --mp-primary-hover: #4338ca;
    --mp-primary-soft: #eef2ff;
    --mp-primary-line: #c7d2fe;
    --mp-on-primary: #ffffff;

    /* Semantic */
    --mp-success: #16a34a;
    --mp-success-soft: #e9faf1;
    --mp-success-line: #cdf0dd;
    --mp-warning: #d97706;
    --mp-warning-soft: #fff7ed;
    --mp-warning-line: #fde3c4;
    --mp-danger: #dc2626;
    --mp-danger-soft: #fef2f2;
    --mp-danger-line: #fecaca;
    --mp-info: #2563eb;
    --mp-info-soft: #eff6ff;
    --mp-info-line: #cfe1fd;

    /* Chrome */
    --mp-sidebar: #ffffff;
    --mp-sidebar-ink: #4a5568;
    --mp-navbar: #6777ef;
    --mp-navbar-ink: #ffffff;

    /* Effects */
    --mp-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    --mp-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);
    --mp-overlay: rgba(16, 24, 40, 0.5);

    color-scheme: light;
}

/* ---- Dark palette -------------------------------------------------------
   Defined once and applied from both entry points below, so the OS setting
   and the explicit toggle can never drift apart. */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --mp-ground: #141414;
        --mp-surface: #1e1e1e;
        --mp-surface-2: #262626;
        --mp-surface-3: #2e2e2e;

        --mp-ink: #ededed;
        --mp-ink-soft: #b3b3b3;
        --mp-muted: #9a9a9a;
        --mp-inverse: #141414;

        --mp-line: #383838;
        --mp-line-strong: #454545;

        --mp-primary: #8b8bf5;
        --mp-primary-hover: #a1a1f8;
        --mp-primary-soft: #1f1f38;
        --mp-primary-line: #2e2e5c;
        --mp-on-primary: #101010;

        --mp-success: #4ade80;
        --mp-success-soft: #16291d;
        --mp-success-line: #1c4029;
        --mp-warning: #fbbf24;
        --mp-warning-soft: #2c2313;
        --mp-warning-line: #47340f;
        --mp-danger: #f87171;
        --mp-danger-soft: #2e1a19;
        --mp-danger-line: #4d201f;
        --mp-info: #60a5fa;
        --mp-info-soft: #161f38;
        --mp-info-line: #1d3157;

        --mp-sidebar: #191919;
        --mp-sidebar-ink: #b3b3b3;
        --mp-navbar: #191919;
        --mp-navbar-ink: #ededed;

        --mp-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
        --mp-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
        --mp-overlay: rgba(4, 7, 15, 0.66);

        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --mp-ground: #141414;
    --mp-surface: #1e1e1e;
    --mp-surface-2: #262626;
    --mp-surface-3: #2e2e2e;

    --mp-ink: #ededed;
    --mp-ink-soft: #b3b3b3;
    --mp-muted: #9a9a9a;
    --mp-inverse: #141414;

    --mp-line: #383838;
    --mp-line-strong: #454545;

    --mp-primary: #8b8bf5;
    --mp-primary-hover: #a1a1f8;
    --mp-primary-soft: #1f1f38;
    --mp-primary-line: #2e2e5c;
    --mp-on-primary: #101010;

    --mp-success: #4ade80;
    --mp-success-soft: #16291d;
    --mp-success-line: #1c4029;
    --mp-warning: #fbbf24;
    --mp-warning-soft: #2c2313;
    --mp-warning-line: #47340f;
    --mp-danger: #f87171;
    --mp-danger-soft: #2e1a19;
    --mp-danger-line: #4d201f;
    --mp-info: #60a5fa;
    --mp-info-soft: #161f38;
    --mp-info-line: #1d3157;

    --mp-sidebar: #191919;
    --mp-sidebar-ink: #b3b3b3;
    --mp-navbar: #191919;
    --mp-navbar-ink: #ededed;

    --mp-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --mp-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
    --mp-overlay: rgba(4, 7, 15, 0.66);

    color-scheme: dark;
}

/* ==========================================================================
   Dark layer
   --------------------------------------------------------------------------
   The template's own stylesheets already cover light, so only the dark side
   needs restating. It is keyed on [data-theme="dark"] alone: the boot script
   resolves "system" into an explicit light/dark stamp before first paint, so
   there is one code path here instead of a duplicated media-query copy.
   ========================================================================== */

html[data-theme="dark"] body,
html[data-theme="dark"] .main-wrapper,
html[data-theme="dark"] .main-content {
    background-color: var(--mp-ground);
    color: var(--mp-ink);
}

/* ---- Sidebar, navbar, footer ---- */
html[data-theme="dark"] .main-sidebar,
html[data-theme="dark"] .main-sidebar .sidebar-brand,
html[data-theme="dark"] .sidebar-menu li a,
html[data-theme="dark"] .sidebar-menu li.menu-header {
    background-color: var(--mp-sidebar);
    color: var(--mp-sidebar-ink);
}

html[data-theme="dark"] .sidebar-menu li a { border-color: transparent; }

html[data-theme="dark"] .sidebar-menu li a:hover,
html[data-theme="dark"] .sidebar-menu li.active > a {
    background-color: var(--mp-primary-soft);
    color: var(--mp-primary);
}

html[data-theme="dark"] .sidebar-menu li.menu-header { color: var(--mp-muted); }

html[data-theme="dark"] .navbar,
html[data-theme="dark"] .main-navbar,
html[data-theme="dark"] .navbar-bg {
    background-color: var(--mp-navbar);
    background-image: none;
}

html[data-theme="dark"] .navbar .nav-link,
html[data-theme="dark"] .navbar .navbar-nav .nav-link {
    color: var(--mp-navbar-ink);
}

html[data-theme="dark"] .main-footer,
html[data-theme="dark"] .section-header,
html[data-theme="dark"] .breadcrumb {
    background-color: transparent;
    color: var(--mp-ink-soft);
}

html[data-theme="dark"] .main-footer { border-top-color: var(--mp-line); }
html[data-theme="dark"] .section-header h1 { color: var(--mp-ink); }
html[data-theme="dark"] .breadcrumb-item.active { color: var(--mp-muted); }

/* ---- Surfaces ---- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .accordion .card {
    background-color: var(--mp-surface);
    border-color: var(--mp-line);
    color: var(--mp-ink);
}

html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    background-color: var(--mp-surface);
    border-color: var(--mp-line);
    color: var(--mp-ink);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content { box-shadow: var(--mp-shadow); }
html[data-theme="dark"] .modal-backdrop.show { opacity: 1; background: var(--mp-overlay); }
html[data-theme="dark"] .dropdown-item { color: var(--mp-ink); }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--mp-surface-2);
    color: var(--mp-primary);
}
html[data-theme="dark"] .dropdown-divider,
html[data-theme="dark"] hr { border-color: var(--mp-line); }
html[data-theme="dark"] .close,
html[data-theme="dark"] .close:hover { color: var(--mp-ink); text-shadow: none; opacity: 1; }

/* ---- Tables ---- */
html[data-theme="dark"] .table {
    color: var(--mp-ink);
    border-color: var(--mp-line);
}

html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table th {
    background-color: var(--mp-surface-2);
    border-color: var(--mp-line);
    color: var(--mp-ink-soft);
}

html[data-theme="dark"] .table td,
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered td,
html[data-theme="dark"] .table-bordered th { border-color: var(--mp-line); }

html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
html[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: var(--mp-surface-2);
    color: var(--mp-ink);
}

/* ---- Forms ---- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="date"] {
    background-color: var(--mp-surface-2);
    border-color: var(--mp-line-strong);
    color: var(--mp-ink);
}

html[data-theme="dark"] .form-control:focus {
    background-color: var(--mp-surface-2);
    border-color: var(--mp-primary);
    color: var(--mp-ink);
    box-shadow: 0 0 0 3px var(--mp-primary-soft);
}

html[data-theme="dark"] .form-control::placeholder { color: var(--mp-muted); }
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] { background-color: var(--mp-surface-3); }
html[data-theme="dark"] .input-group-text {
    background-color: var(--mp-surface-3);
    border-color: var(--mp-line-strong);
    color: var(--mp-ink-soft);
}
html[data-theme="dark"] label,
html[data-theme="dark"] .form-label { color: var(--mp-ink); }
html[data-theme="dark"] .form-text,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] small.text-muted { color: var(--mp-muted) !important; }
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8); }

/* ---- Buttons ---- */
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-outline-secondary {
    background-color: var(--mp-surface-2);
    border-color: var(--mp-line-strong);
    color: var(--mp-ink);
}

html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--mp-surface-3);
    color: var(--mp-ink);
}

html[data-theme="dark"] .btn-primary {
    background-color: var(--mp-primary);
    border-color: var(--mp-primary);
    color: var(--mp-on-primary);
}
html[data-theme="dark"] .btn-primary:hover {
    background-color: var(--mp-primary-hover);
    border-color: var(--mp-primary-hover);
}
html[data-theme="dark"] .btn-outline-primary {
    border-color: var(--mp-primary-line);
    color: var(--mp-primary);
    background-color: transparent;
}
html[data-theme="dark"] .btn-outline-primary:hover {
    background-color: var(--mp-primary-soft);
    color: var(--mp-primary);
}

/* ---- Feedback ---- */
html[data-theme="dark"] .alert-info {
    background-color: var(--mp-info-soft);
    border-color: var(--mp-info-line);
    color: var(--mp-info);
}
html[data-theme="dark"] .alert-success {
    background-color: var(--mp-success-soft);
    border-color: var(--mp-success-line);
    color: var(--mp-success);
}
html[data-theme="dark"] .alert-warning {
    background-color: var(--mp-warning-soft);
    border-color: var(--mp-warning-line);
    color: var(--mp-warning);
}
html[data-theme="dark"] .alert-danger {
    background-color: var(--mp-danger-soft);
    border-color: var(--mp-danger-line);
    color: var(--mp-danger);
}

html[data-theme="dark"] .badge-secondary,
html[data-theme="dark"] .badge-light {
    background-color: var(--mp-surface-3);
    color: var(--mp-ink);
}

html[data-theme="dark"] .progress { background-color: var(--mp-surface-3); }
html[data-theme="dark"] .nav-tabs { border-bottom-color: var(--mp-line); }
html[data-theme="dark"] .nav-tabs .nav-link { color: var(--mp-ink-soft); }
html[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--mp-surface);
    border-color: var(--mp-line) var(--mp-line) var(--mp-surface);
    color: var(--mp-primary);
}
html[data-theme="dark"] .page-link {
    background-color: var(--mp-surface);
    border-color: var(--mp-line);
    color: var(--mp-ink);
}
html[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--mp-primary);
    border-color: var(--mp-primary);
    color: var(--mp-on-primary);
}

/* ---- Utility classes that hardcode a light ground ---- */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light {
    background-color: var(--mp-surface) !important;
    color: var(--mp-ink);
}
html[data-theme="dark"] .text-dark { color: var(--mp-ink) !important; }
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-left,
html[data-theme="dark"] .border-right { border-color: var(--mp-line) !important; }

/* ---- Third-party widgets ---- */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-theme="dark"] .select2-dropdown,
html[data-theme="dark"] .select2-search__field,
html[data-theme="dark"] .selectric,
html[data-theme="dark"] .selectric-items {
    background-color: var(--mp-surface-2);
    border-color: var(--mp-line-strong);
    color: var(--mp-ink);
}
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] .selectric .label { color: var(--mp-ink); }
html[data-theme="dark"] .select2-results__option { background-color: var(--mp-surface); color: var(--mp-ink); }
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--mp-primary);
    color: var(--mp-on-primary);
}

html[data-theme="dark"] .jconfirm .jconfirm-box,
html[data-theme="dark"] .toastify {
    background-color: var(--mp-surface);
    color: var(--mp-ink);
}

html[data-theme="dark"] .ag-theme-alpine,
html[data-theme="dark"] .ag-theme-balham {
    --ag-background-color: var(--mp-surface);
    --ag-header-background-color: var(--mp-surface-2);
    --ag-odd-row-background-color: var(--mp-surface-2);
    --ag-foreground-color: var(--mp-ink);
    --ag-header-foreground-color: var(--mp-ink-soft);
    --ag-border-color: var(--mp-line);
    --ag-row-hover-color: var(--mp-surface-3);
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
html[data-theme="dark"] .dataTables_wrapper .dataTables_info { color: var(--mp-ink-soft); }

/* ---- Screens with their own scoped palettes -------------------------------
   These pages already declare tokens of their own; repointing those at the
   global ones themes each page in a few lines instead of restating rules. */

html[data-theme="dark"] .ma-detail-page,
html[data-theme="dark"] .ma-create-page,
html[data-theme="dark"] .ma-modal {
    --ma-primary: var(--mp-primary);
    --ma-primary-soft: var(--mp-primary-soft);
    --ma-border: var(--mp-line);
    --ma-text: var(--mp-ink);
    --ma-text-soft: var(--mp-ink-soft);
    --ma-muted: var(--mp-muted);
    --ma-success: var(--mp-success);
    --ma-success-soft: var(--mp-success-soft);
}

html[data-theme="dark"] .contract-page {
    --mc-primary: var(--mp-primary);
    --mc-primary-soft: var(--mp-primary-soft);
    --mc-border: var(--mp-line);
    --mc-text: var(--mp-ink);
    --mc-text-soft: var(--mp-ink-soft);
    --mc-muted: var(--mp-muted);
    --mc-success: var(--mp-success);
    --mc-success-soft: var(--mp-success-soft);
    --mc-warning: var(--mp-warning);
    --mc-warning-soft: var(--mp-warning-soft);
    --mc-info: var(--mp-info);
    --mc-info-soft: var(--mp-info-soft);
}

html[data-theme="dark"] .doc-preview-page {
    --dp-primary: var(--mp-primary);
    --dp-primary-soft: var(--mp-primary-soft);
    --dp-border: var(--mp-line);
    --dp-text: var(--mp-ink);
    --dp-text-soft: var(--mp-ink-soft);
    --dp-muted: var(--mp-muted);
    --dp-success: var(--mp-success);
    --dp-success-soft: var(--mp-success-soft);
    --dp-danger: var(--mp-danger);
}

html[data-theme="dark"] {
    --kyc-primary: var(--mp-primary);
    --kyc-primary-soft: var(--mp-primary-soft);
    --kyc-border: var(--mp-line);
    --kyc-surface: var(--mp-surface);
    --kyc-muted: var(--mp-muted);
    --kyc-text: var(--mp-ink);
    --kyc-text-soft: var(--mp-ink-soft);
    --kyc-success: var(--mp-success);
    --kyc-success-soft: var(--mp-success-soft);
    --kyc-danger: var(--mp-danger);
}

/* Surfaces on those screens that were written as literals */
html[data-theme="dark"] .doc-panel,
html[data-theme="dark"] .ma-card,
html[data-theme="dark"] .mc-panel,
html[data-theme="dark"] .ma-create-card,
html[data-theme="dark"] .status-card,
html[data-theme="dark"] .document-item,
html[data-theme="dark"] .group-instance,
html[data-theme="dark"] .kyc-field-card,
html[data-theme="dark"] .kyc-document,
html[data-theme="dark"] .kyc-instance,
html[data-theme="dark"] .kyc-detail-item,
html[data-theme="dark"] .uploaded-file-row,
html[data-theme="dark"] .file-name,
html[data-theme="dark"] .table-modern,
html[data-theme="dark"] .add-group-instance,
html[data-theme="dark"] .btn-choose-file,
html[data-theme="dark"] .doc-group-toggle,
html[data-theme="dark"] .kyc-view-all,
html[data-theme="dark"] .mc-stats,
html[data-theme="dark"] .ma-table thead th,
html[data-theme="dark"] .group-instance-header,
html[data-theme="dark"] .doc-search .form-control,
html[data-theme="dark"] .doc-filter-btn {
    background-color: var(--mp-surface);
    border-color: var(--mp-line);
    color: var(--mp-ink);
}

html[data-theme="dark"] .upload-area,
html[data-theme="dark"] .document-display-area,
html[data-theme="dark"] .document-details-area,
html[data-theme="dark"] .mc-stat,
html[data-theme="dark"] .kyc-detail-item,
html[data-theme="dark"] .document-item--nested,
html[data-theme="dark"] .ma-table thead th,
html[data-theme="dark"] .table-modern td:first-child {
    background-color: var(--mp-surface-2);
    border-color: var(--mp-line-strong);
}

html[data-theme="dark"] .doc-upload-step .form-control,
html[data-theme="dark"] .ma-create-page .form-control {
    background-color: var(--mp-surface-2);
    border-color: var(--mp-line-strong);
    color: var(--mp-ink);
}

html[data-theme="dark"] .pdf-viewer-container,
html[data-theme="dark"] .image-viewer-container,
html[data-theme="dark"] .pdfjs-pages {
    background-color: var(--mp-surface-2);
    border-color: var(--mp-line);
}

/* ---- Retrofit layer -------------------------------------------------------
   Roughly 2,800 inline style="" attributes across the views hardcode a light
   ground, and an inline style outranks any stylesheet. These selectors catch
   the common shapes so no panel stays white on a dark page. They are a safety
   net, not the destination: as each screen's inline styles move into classes,
   its entry here stops mattering. */

html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:white"],
html[data-theme="dark"] [style*="background-color: white"],
html[data-theme="dark"] [style*="background:#f8f9fa"],
html[data-theme="dark"] [style*="background: #f8f9fa"],
html[data-theme="dark"] [style*="background-color:#f8f9fa"],
html[data-theme="dark"] [style*="background-color: #f8f9fa"],
html[data-theme="dark"] [style*="background:#f5f5f5"],
html[data-theme="dark"] [style*="background: #f5f5f5"] {
    background-color: var(--mp-surface) !important;
    background-image: none !important;
    color: var(--mp-ink);
}

html[data-theme="dark"] [style*="color:#000"],
html[data-theme="dark"] [style*="color: #000"],
html[data-theme="dark"] [style*="color:#333"],
html[data-theme="dark"] [style*="color: #333"],
html[data-theme="dark"] [style*="color:#212529"],
html[data-theme="dark"] [style*="color: #212529"] {
    color: var(--mp-ink) !important;
}

html[data-theme="dark"] [style*="border:1px solid #ddd"],
html[data-theme="dark"] [style*="border: 1px solid #ddd"],
html[data-theme="dark"] [style*="border:1px solid #e9ecef"],
html[data-theme="dark"] [style*="border: 1px solid #e9ecef"],
html[data-theme="dark"] [style*="border:2px dashed #cbd5e0"],
html[data-theme="dark"] [style*="border: 2px dashed #cbd5e0"] {
    border-color: var(--mp-line-strong) !important;
}

/* Documents render on white paper in both themes - inverting them would make
   a scanned trade licence unreadable. */
html[data-theme="dark"] .pdf-page,
html[data-theme="dark"] .image-viewer-container img,
html[data-theme="dark"] .contract-preview-container {
    background: #ffffff;
    color: #111111;
}

/* ---- Theme toggle control ---- */
.mp-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    margin-right: 12px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mp-theme-toggle:hover,
.mp-theme-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.6);
    color: inherit;
}

.mp-theme-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.mp-theme-toggle .mp-theme-label { white-space: nowrap; }

/* On light grounds (merchant area, storefront) the outline needs real ink */
.mp-theme-toggle--onlight {
    border-color: var(--mp-line-strong);
    color: var(--mp-ink);
}
.mp-theme-toggle--onlight:hover,
.mp-theme-toggle--onlight:focus-visible {
    background: var(--mp-surface-2);
    border-color: var(--mp-primary);
    color: var(--mp-primary);
}

@media (max-width: 575.98px) {
    .mp-theme-toggle .mp-theme-label { display: none; }
    .mp-theme-toggle { padding: 0 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .mp-theme-toggle { transition: none; }
}

/* ==========================================================================
   Pass 2 - text legibility, gradient surfaces, and the merchant area
   --------------------------------------------------------------------------
   Pass 1 repainted surfaces but left three gaps, all visible in dark mode:

   1. Colour vs image. A light surface painted with linear-gradient() lives in
      background-image, so overriding background-color alone leaves the light
      gradient sitting on top. Every surface rule below clears the image too.
   2. Component-level inks. Both templates set dark text on ~30 selectors that
      the generic body/card rules never reach.
   3. The merchant area is Argon, not Stisla - different class names entirely,
      so pass 1 matched almost nothing there.
   ========================================================================== */

/* ---- 1. Surfaces painted with a light gradient -------------------------- */

html[data-theme="dark"] .upload-area,
html[data-theme="dark"] .upload-area:hover,
html[data-theme="dark"] .custom-file-upload,
html[data-theme="dark"] .file-upload-wrapper,
html[data-theme="dark"] .step-content-wrapper,
html[data-theme="dark"] .modern-card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .detail-card,
html[data-theme="dark"] .detail-section,
html[data-theme="dark"] .detail-item-modern,
html[data-theme="dark"] .activity-card,
html[data-theme="dark"] .verification-card,
html[data-theme="dark"] .verification-status,
html[data-theme="dark"] .field-item,
html[data-theme="dark"] .field-mapping,
html[data-theme="dark"] .options-container,
html[data-theme="dark"] .payload-content,
html[data-theme="dark"] .timeline-content,
html[data-theme="dark"] .timeline-marker,
html[data-theme="dark"] .step-summary,
html[data-theme="dark"] .comparison-body,
html[data-theme="dark"] .loan-card-body,
html[data-theme="dark"] .loan-amount,
html[data-theme="dark"] .emi-result-card,
html[data-theme="dark"] .payment-progress-card,
html[data-theme="dark"] .total-payment-card,
html[data-theme="dark"] .bank-card-square,
html[data-theme="dark"] .legend-item,
html[data-theme="dark"] .advanced-fields-toggle,
html[data-theme="dark"] .date-range-filter,
html[data-theme="dark"] .date-filter-wrapper,
html[data-theme="dark"] .date-inputs,
html[data-theme="dark"] .drag-handle,
html[data-theme="dark"] .buttons,
html[data-theme="dark"] .filter-buttons .btn-light {
    background-color: var(--mp-surface-2);
    background-image: none;
    border-color: var(--mp-line-strong);
    color: var(--mp-ink);
}

/* The upload box states are gradients too, so the tint has to be restated */
html[data-theme="dark"] .upload-area.processing {
    background-color: var(--mp-warning-soft);
    background-image: none;
    border-color: var(--mp-warning-line);
}
html[data-theme="dark"] .upload-area.success {
    background-color: var(--mp-success-soft);
    background-image: none;
    border-color: var(--mp-success-line);
}
html[data-theme="dark"] .upload-area.error {
    background-color: var(--mp-danger-soft);
    background-image: none;
    border-color: var(--mp-danger-line);
}
html[data-theme="dark"] .upload-area:hover,
html[data-theme="dark"] .upload-area.drag-over {
    background-color: var(--mp-primary-soft);
    background-image: none;
    border-color: var(--mp-primary);
}

/* Anything else the earlier pass darkened must lose its gradient as well */
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .mc-stats,
html[data-theme="dark"] .table-modern,
html[data-theme="dark"] .action-card,
html[data-theme="dark"] .config-form {
    background-image: none;
}

/* ---- 2. Text that stayed dark ------------------------------------------ */

/* Stisla component inks (#34395e / #191d21 / #000) */
html[data-theme="dark"] .text-title,
html[data-theme="dark"] .text-small,
html[data-theme="dark"] .text-job,
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-dark-all,
html[data-theme="dark"] .media .media-title,
html[data-theme="dark"] .media .media-description,
html[data-theme="dark"] .author-box .author-box-job,
html[data-theme="dark"] .table-links,
html[data-theme="dark"] .fc-toolbar h2,
html[data-theme="dark"] .fc-view,
html[data-theme="dark"] .dropzone,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-header h4,
html[data-theme="dark"] .card-header h5,
html[data-theme="dark"] .card-header h6,
html[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
html[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6,
html[data-theme="dark"] legend,
html[data-theme="dark"] dt,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .control-label {
    color: var(--mp-ink);
}

/* Brand purple as body text: fine on white, ~3.4:1 on the dark ground */
html[data-theme="dark"] .text-primary,
html[data-theme="dark"] a:not([class*="btn"]):not(.nav-link):not(.dropdown-item):not([class*="tab"]):not(.kyc-view-all):not(.mp-theme-toggle),
html[data-theme="dark"] .card-statistic-1 .card-header h4,
html[data-theme="dark"] .card-statistic-2 .card-stats-title,
html[data-theme="dark"] .statistic-details .statistic-details-item .detail-value {
    color: var(--mp-primary);
}

/* Muted greys that fall under 4.5:1 once the ground is dark */
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .text-gray,
html[data-theme="dark"] small,
html[data-theme="dark"] .small,
html[data-theme="dark"] .help-block,
html[data-theme="dark"] .form-text {
    color: var(--mp-ink-soft);
}

/* ---- 3. Merchant area (Argon) ------------------------------------------ */

html[data-theme="dark"] .main-content,
html[data-theme="dark"] .main-content .container-fluid,
html[data-theme="dark"] .bg-secondary,
html[data-theme="dark"] .scrollbar-inner,
html[data-theme="dark"] .bg-default,
html[data-theme="dark"] .header,
html[data-theme="dark"] .header-body {
    /* custom.css pins these with !important, so matching it is the only way
       the dark ground can win */
    background-color: var(--mp-ground) !important;
    background-image: none !important;
    color: var(--mp-ink);
}

html[data-theme="dark"] .sidenav,
html[data-theme="dark"] .navbar-vertical,
html[data-theme="dark"] .navbar-vertical .navbar-collapse,
html[data-theme="dark"] .navbar-top,
html[data-theme="dark"] .navbar-light,
html[data-theme="dark"] .sidenav .navbar-brand {
    background-color: var(--mp-sidebar) !important;
    background-image: none !important;
    color: var(--mp-sidebar-ink);
    border-color: var(--mp-line);
}

html[data-theme="dark"] .navbar-vertical .navbar-nav .nav-link,
html[data-theme="dark"] .navbar-light .navbar-nav .nav-link,
html[data-theme="dark"] .sidenav .nav-link {
    color: var(--mp-sidebar-ink);
}

html[data-theme="dark"] .navbar-vertical .navbar-nav .nav-link.active,
html[data-theme="dark"] .navbar-vertical .navbar-nav .nav-link:hover {
    background-color: var(--mp-primary-soft);
    color: var(--mp-primary);
}

html[data-theme="dark"] .navbar-vertical .navbar-heading { color: var(--mp-muted); }

/* Argon inks: #172b4d, #32325d, #525f7f (body), #8898aa / #adb5bd (muted) */
html[data-theme="dark"] .text-default,
html[data-theme="dark"] .text-darker,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .heading,
html[data-theme="dark"] .heading-small,
html[data-theme="dark"] .display-1, [data-theme="dark"] .display-2,
html[data-theme="dark"] .display-3, [data-theme="dark"] .display-4,
html[data-theme="dark"] .navbar-search .form-control {
    color: var(--mp-ink);
}

html[data-theme="dark"] .text-light,
html[data-theme="dark"] .text-lighter,
html[data-theme="dark"] .card-stats .card-title,
html[data-theme="dark"] .description {
    color: var(--mp-muted);
}

/* The QR panel: the code itself must stay black on white to remain scannable */
html[data-theme="dark"] .qr-code-container img,
html[data-theme="dark"] img[src*="qr"],
html[data-theme="dark"] .qr-wrapper {
    background: #ffffff;
}

/* ---- 4. Retrofit, extended --------------------------------------------- */

html[data-theme="dark"] [style*="color:#495057"],
html[data-theme="dark"] [style*="color: #495057"],
html[data-theme="dark"] [style*="color:#2c3e50"],
html[data-theme="dark"] [style*="color: #2c3e50"],
html[data-theme="dark"] [style*="color:#2d3748"],
html[data-theme="dark"] [style*="color: #2d3748"],
html[data-theme="dark"] [style*="color:#4a5568"],
html[data-theme="dark"] [style*="color: #4a5568"],
html[data-theme="dark"] [style*="color:#34395e"],
html[data-theme="dark"] [style*="color: #34395e"],
html[data-theme="dark"] [style*="color:#191d21"],
html[data-theme="dark"] [style*="color: #191d21"],
html[data-theme="dark"] [style*="color:#1f2a44"],
html[data-theme="dark"] [style*="color: #1f2a44"],
html[data-theme="dark"] [style*="color:#172b4d"],
html[data-theme="dark"] [style*="color: #172b4d"],
html[data-theme="dark"] [style*="color:#32325d"],
html[data-theme="dark"] [style*="color: #32325d"],
html[data-theme="dark"] [style*="color:#525f7f"],
html[data-theme="dark"] [style*="color: #525f7f"] {
    color: var(--mp-ink) !important;
}

html[data-theme="dark"] [style*="color:#6c757d"],
html[data-theme="dark"] [style*="color: #6c757d"],
html[data-theme="dark"] [style*="color:#8898aa"],
html[data-theme="dark"] [style*="color: #8898aa"],
html[data-theme="dark"] [style*="color:#adb5bd"],
html[data-theme="dark"] [style*="color: #adb5bd"] {
    color: var(--mp-ink-soft) !important;
}

/* Inline gradients need the image cleared, not just the colour */
html[data-theme="dark"] [style*="linear-gradient(135deg, #f8f9fa"],
html[data-theme="dark"] [style*="linear-gradient(135deg,#f8f9fa"],
html[data-theme="dark"] [style*="linear-gradient(135deg, #fff"],
html[data-theme="dark"] [style*="linear-gradient(135deg,#fff"],
html[data-theme="dark"] [style*="linear-gradient(135deg, #e9ecef"] {
    background-color: var(--mp-surface-2) !important;
    background-image: none !important;
    color: var(--mp-ink);
}

/* Pills, badges and buttons carry their own foreground on a coloured ground.
   The blanket ink rules above must not repaint text inside them. */
html[data-theme="dark"] .badge *,
html[data-theme="dark"] .btn *,
html[data-theme="dark"] .ma-pill *,
html[data-theme="dark"] .status-badge *,
html[data-theme="dark"] .doc-status *,
html[data-theme="dark"] .kyc-chip *,
html[data-theme="dark"] .mp-theme-toggle *,
html[data-theme="dark"] .alert * {
    color: inherit;
}

/* ---- Pure-black separation -------------------------------------------------
   With the ground at #000 the sidebar and topbar sit at the same value as the
   page, so the edges that were carried by a colour difference now need a line.
   Cards keep Bootstrap's 1px border, recoloured to --mp-line above. */

html[data-theme="dark"] .main-sidebar,
html[data-theme="dark"] .sidenav,
html[data-theme="dark"] .navbar-vertical {
    border-right: 1px solid var(--mp-line);
}

html[data-theme="dark"] .navbar,
html[data-theme="dark"] .main-navbar,
html[data-theme="dark"] .navbar-top {
    border-bottom: 1px solid var(--mp-line);
}

/* Elevation on black comes from the border, not a shadow that cannot be seen */
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu {
    border-width: 1px;
    border-style: solid;
}

/* ==========================================================================
   Pass 3 - surfaces that stayed light
   --------------------------------------------------------------------------
   The ink rules in pass 2 lighten text globally, but three surfaces never went
   dark, so light text ended up on white: the login card, the storefront hero,
   and the SweetAlert / jQuery-confirm dialogs. Darkening them is the fix -
   turning the text back would only trade one unreadable pairing for another.
   ========================================================================== */

/* ---- Auth / login ---- */
html[data-theme="dark"] .login-area,
html[data-theme="dark"] .login-content,
html[data-theme="dark"] .login-form,
html[data-theme="dark"] .login-box {
    background-color: var(--mp-surface);
    background-image: none;
    border-color: var(--mp-line);
    color: var(--mp-ink);
}

html[data-theme="dark"] .login-content .col-form-label,
html[data-theme="dark"] .login-content label {
    color: var(--mp-ink);
}

html[data-theme="dark"] .login-content .form-control,
html[data-theme="dark"] .focus-input100 {
    background-color: var(--mp-surface-2);
    border-color: var(--mp-line-strong);
    color: var(--mp-ink);
}

/* ---- SweetAlert2 ---- */
html[data-theme="dark"] .swal2-popup,
html[data-theme="dark"] .swal2-modal {
    background-color: var(--mp-surface) !important;
    background-image: none !important;
    color: var(--mp-ink) !important;
}

html[data-theme="dark"] .swal2-title,
html[data-theme="dark"] .swal2-html-container,
html[data-theme="dark"] .swal2-content,
html[data-theme="dark"] .swal2-label,
html[data-theme="dark"] .swal2-input,
html[data-theme="dark"] .swal2-textarea {
    color: var(--mp-ink) !important;
}

html[data-theme="dark"] .swal2-input,
html[data-theme="dark"] .swal2-textarea,
html[data-theme="dark"] .swal2-select {
    background-color: var(--mp-surface-2) !important;
    border-color: var(--mp-line-strong) !important;
}

html[data-theme="dark"] .swal2-footer { border-top-color: var(--mp-line) !important; }
html[data-theme="dark"] .swal2-container { background-color: transparent; }

/* ---- jQuery-confirm ---- */
html[data-theme="dark"] .jconfirm .jconfirm-box,
html[data-theme="dark"] .jconfirm .jconfirm-content,
html[data-theme="dark"] .jconfirm .jconfirm-title-c {
    background-color: var(--mp-surface);
    color: var(--mp-ink);
}

html[data-theme="dark"] .jconfirm .jconfirm-buttons { border-top-color: var(--mp-line); }

/* ---- Storefront ---- */
html[data-theme="dark"] .hero-area,
html[data-theme="dark"] .hero-content,
html[data-theme="dark"] .welcome-animation,
html[data-theme="dark"] section,
html[data-theme="dark"] .section-padding,
html[data-theme="dark"] .feature-box,
html[data-theme="dark"] .pricing-box,
html[data-theme="dark"] .blog-card,
html[data-theme="dark"] .footer-area {
    background-color: var(--mp-ground);
    background-image: none;
    color: var(--mp-ink);
}

html[data-theme="dark"] .hero-content h1,
html[data-theme="dark"] .hero-content h2,
html[data-theme="dark"] .hero-content p,
html[data-theme="dark"] .section-title h2,
html[data-theme="dark"] .section-title p {
    color: var(--mp-ink);
}

html[data-theme="dark"] .hero-btn {
    background-color: var(--mp-primary);
    color: var(--mp-on-primary);
    border-color: var(--mp-primary);
}

/* Decorative bubbles read as debris once the ground is dark */
html[data-theme="dark"] .bubble,
html[data-theme="dark"] .square-shape1 { opacity: 0.35; }

/* ---- Guard ------------------------------------------------------------
   Anything still painting itself white keeps its own dark ink, so a surface
   this stylesheet has not reached yet stays readable instead of going
   light-on-light. This is the safety net for the long tail. */

html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"] {
    color: var(--mp-ink);
}

/* A white background declared inline on a parent must not leave its children
   dark-on-dark once that parent is repainted */
html[data-theme="dark"] [style*="background:#fff"] *,
html[data-theme="dark"] [style*="background: #fff"] *,
html[data-theme="dark"] [style*="background-color:#fff"] *,
html[data-theme="dark"] [style*="background-color: #fff"] * {
    border-color: var(--mp-line);
}

/* ---- Merchant pages: the labels still reading dim -------------------------
   Argon puts its own ink on page headings, stat captions and the side nav,
   none of which the generic heading rules reach. */

html[data-theme="dark"] .navbar-vertical .navbar-nav .nav-link,
html[data-theme="dark"] .sidenav .nav-link span,
html[data-theme="dark"] .sidenav .nav-link i,
html[data-theme="dark"] .navbar-nav .nav-link span {
    color: var(--mp-sidebar-ink);
}

html[data-theme="dark"] .h1, [data-theme="dark"] .h2, [data-theme="dark"] .h3,
html[data-theme="dark"] .h4, [data-theme="dark"] .h5, [data-theme="dark"] .h6,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .header-title,
html[data-theme="dark"] .card-header .card-title,
html[data-theme="dark"] .stat-title,
html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .card-stats-title,
html[data-theme="dark"] .info-box-text,
html[data-theme="dark"] .info-box-number {
    color: var(--mp-ink);
}

/* Uppercase captions under a figure ("ALL STORES", "TOTAL DEVICES") */
html[data-theme="dark"] .text-uppercase.text-muted,
html[data-theme="dark"] .card-stats .text-uppercase,
html[data-theme="dark"] .stat-caption {
    color: var(--mp-ink-soft) !important;
}

/* AG Grid ships its own light theme in the merchant area */
html[data-theme="dark"] .ag-theme-alpine,
html[data-theme="dark"] .ag-theme-balham,
html[data-theme="dark"] .ag-theme-quartz,
html[data-theme="dark"] .ag-root-wrapper {
    --ag-background-color: var(--mp-surface);
    --ag-header-background-color: var(--mp-surface-2);
    --ag-odd-row-background-color: var(--mp-surface-2);
    --ag-foreground-color: var(--mp-ink);
    --ag-header-foreground-color: var(--mp-ink-soft);
    --ag-secondary-foreground-color: var(--mp-ink-soft);
    --ag-disabled-foreground-color: var(--mp-muted);
    --ag-border-color: var(--mp-line);
    --ag-row-border-color: var(--mp-line);
    --ag-row-hover-color: var(--mp-surface-3);
    --ag-control-panel-background-color: var(--mp-surface-2);
    --ag-input-background-color: var(--mp-surface-2);
    background-color: var(--mp-surface);
    color: var(--mp-ink);
}

html[data-theme="dark"] .ag-header,
html[data-theme="dark"] .ag-header-cell,
html[data-theme="dark"] .ag-paging-panel,
html[data-theme="dark"] .ag-side-buttons,
html[data-theme="dark"] .ag-column-drop {
    background-color: var(--mp-surface-2);
    color: var(--mp-ink);
    border-color: var(--mp-line);
}

html[data-theme="dark"] .ag-overlay-no-rows-center { color: var(--mp-ink-soft); }

/* ==========================================================================
   Pass 4 - upload widget internals
   --------------------------------------------------------------------------
   field-renderer styles these as `.upload-area .upload-text` (two classes) and
   ships its CSS inline in the body, so it outranks a single-class rule here on
   source order. Matching its depth is what makes these win.
   ========================================================================== */

html[data-theme="dark"] .upload-area .upload-text {
    color: var(--mp-ink);
}

html[data-theme="dark"] .upload-area .upload-or,
html[data-theme="dark"] .upload-area .upload-hint,
html[data-theme="dark"] .upload-area small {
    color: var(--mp-ink-soft);
}

html[data-theme="dark"] .upload-area .upload-icon,
html[data-theme="dark"] .upload-area .upload-icon i {
    color: var(--mp-primary);
}

html[data-theme="dark"] .upload-area .btn-choose-file,
html[data-theme="dark"] .upload-area:hover .btn-choose-file {
    background-color: var(--mp-surface-3);
    background-image: none;
    border-color: var(--mp-line-strong);
    color: var(--mp-ink);
}

html[data-theme="dark"] .upload-area:hover .btn-choose-file {
    border-color: var(--mp-primary);
    color: var(--mp-primary);
}

/* Group headers ("authorised signatory 1", "shareholders 1") */
html[data-theme="dark"] .group-instance-header,
html[data-theme="dark"] .group-instance .group-instance-header {
    background-color: var(--mp-surface-2);
    background-image: none;
    border-bottom-color: var(--mp-line);
}

html[data-theme="dark"] .group-instance-header h5,
html[data-theme="dark"] .group-instance .group-instance-header h5 {
    color: var(--mp-ink);
}

html[data-theme="dark"] .group-instance-header h5 i,
html[data-theme="dark"] .group-instance-toggle {
    color: var(--mp-primary);
}

html[data-theme="dark"] .sub-field-label,
html[data-theme="dark"] .kyc-field-card-header .form-label {
    color: var(--mp-ink);
}

/* The dashed drop zone needs a visible edge on a dark card */
html[data-theme="dark"] .upload-area {
    border-color: var(--mp-line-strong);
}

html[data-theme="dark"] .add-group-instance {
    background-color: var(--mp-surface-2);
    background-image: none;
    border-color: var(--mp-primary-line);
    color: var(--mp-primary);
}

html[data-theme="dark"] .add-group-instance:hover {
    background-color: var(--mp-primary-soft);
    border-color: var(--mp-primary);
}

/* Uploaded-file rows and the green confirmation strip */
html[data-theme="dark"] .existing-file {
    background-color: var(--mp-success-soft);
    border-color: var(--mp-success-line);
    color: var(--mp-success);
}

html[data-theme="dark"] .file-name,
html[data-theme="dark"] .uploaded-file-row {
    background-color: var(--mp-surface-2);
    border-color: var(--mp-line);
    color: var(--mp-ink);
}

html[data-theme="dark"] .uploaded-file-size { color: var(--mp-muted); }

/* Dual-upload pills */
html[data-theme="dark"] .dual-upload-tabs .nav-link {
    background-color: var(--mp-surface-2);
    border-color: var(--mp-line);
    color: var(--mp-ink-soft);
}

html[data-theme="dark"] .dual-upload-tabs .nav-link.active {
    background-color: var(--mp-primary-soft);
    border-color: var(--mp-primary-line);
    color: var(--mp-primary);
}

/* ==========================================================================
   Pass 5 - deep template selectors
   --------------------------------------------------------------------------
   Two Stisla rules outrank the generic overrides because they nest three or
   more classes. Matching their depth is the fix; the values are the same
   tokens used everywhere else.
   ========================================================================== */

/* Stat card figures: .card.card-statistic-1 .card-body sets #34395e (0,3,0),
   which beat the plain .card-body override. */
html[data-theme="dark"] .card.card-statistic-1 .card-body,
html[data-theme="dark"] .card.card-statistic-2 .card-body,
html[data-theme="dark"] .card.card-statistic-1 .card-wrap .card-body,
html[data-theme="dark"] .card.card-statistic-2 .card-wrap .card-body {
    color: var(--mp-ink);
}

html[data-theme="dark"] .card.card-statistic-1 .card-header h4,
html[data-theme="dark"] .card.card-statistic-2 .card-header h4,
html[data-theme="dark"] .card.card-statistic-1 .card-wrap .card-header h4 {
    color: var(--mp-ink-soft);
}

/* The statistic tiles themselves */
html[data-theme="dark"] .card.card-statistic-1,
html[data-theme="dark"] .card.card-statistic-2,
html[data-theme="dark"] .card.card-statistic-1 .card-wrap,
html[data-theme="dark"] .card.card-statistic-2 .card-wrap {
    background-color: var(--mp-surface);
    background-image: none;
}

/* Sidebar submenu, expanded: transparent panel, grey links */
html[data-theme="dark"] .main-sidebar .sidebar-menu li ul.dropdown-menu {
    background-color: transparent;
}

html[data-theme="dark"] .main-sidebar .sidebar-menu li ul.dropdown-menu li a {
    color: var(--mp-sidebar-ink);
    background-color: transparent;
}

html[data-theme="dark"] .main-sidebar .sidebar-menu li ul.dropdown-menu li a:hover,
html[data-theme="dark"] .main-sidebar .sidebar-menu li ul.dropdown-menu li.active > a {
    color: var(--mp-primary);
    background-color: var(--mp-primary-soft);
}

/* Sidebar submenu, collapsed: a floating panel hardcoded to #fff */
html[data-theme="dark"] body.sidebar-mini .main-sidebar .sidebar-menu > li ul.dropdown-menu,
html[data-theme="dark"] body.sidebar-mini .main-sidebar .sidebar-menu > li ul.dropdown-menu li a {
    background-color: var(--mp-surface);
    color: var(--mp-ink);
    box-shadow: none;
}

html[data-theme="dark"] body.sidebar-mini .main-sidebar .sidebar-menu > li ul.dropdown-menu {
    border: 1px solid var(--mp-line);
}

html[data-theme="dark"] body.sidebar-mini .main-sidebar .sidebar-menu > li ul.dropdown-menu li > a:focus,
html[data-theme="dark"] body.sidebar-mini .main-sidebar .sidebar-menu > li ul.dropdown-menu li.active > a,
html[data-theme="dark"] body.sidebar-mini .main-sidebar .sidebar-menu > li ul.dropdown-menu li.active > a:hover {
    background-color: var(--mp-primary) !important;
    color: var(--mp-on-primary);
}

/* Sales dashboard tiles use the same component */
html[data-theme="dark"] .card .card-wrap .card-header,
html[data-theme="dark"] .card .card-wrap .card-body {
    background-color: transparent;
}

/* ==========================================================================
   Pass 6 - transaction report tiles
   --------------------------------------------------------------------------
   transactions.blade.php styles its own stat tiles: `.card-stats` is pinned to
   #fff and `.card-stats .h2.font-weight-bold` to #2d1a4a (0,3,0), both of which
   outrank the generic card and heading overrides.
   ========================================================================== */

html[data-theme="dark"] .card-stats,
html[data-theme="dark"] .card.card-stats {
    background-color: var(--mp-surface);
    background-image: none;
    box-shadow: none;
    border: 1px solid var(--mp-line);
}

html[data-theme="dark"] .card-stats .card-body {
    background-color: transparent;
}

/* The figure: 18 / 3772.78 / 570 / 676 */
html[data-theme="dark"] .card-stats .h2.font-weight-bold,
html[data-theme="dark"] .card-stats .h2,
html[data-theme="dark"] .card-stats .h1 {
    color: var(--mp-ink);
}

/* SUCCESS TRANSACTIONS / TOTAL STORES / TOTAL DEVICES */
html[data-theme="dark"] .card-stats .text-uppercase,
html[data-theme="dark"] .card-stats .text-muted,
html[data-theme="dark"] .card-stats p .text-uppercase.text-muted,
html[data-theme="dark"] .stats-item .text-muted {
    color: var(--mp-ink-soft) !important;
}

/* The divider between stacked tiles is an inline #e9ecef border-bottom */
html[data-theme="dark"] .stats-item[style*="border-bottom"],
html[data-theme="dark"] [style*="border-bottom: 1px solid #e9ecef"],
html[data-theme="dark"] [style*="border-bottom:1px solid #e9ecef"] {
    border-bottom-color: var(--mp-line) !important;
}

/* "Transaction List" carries an inline #2d1a4a */
html[data-theme="dark"] .transaction-list-title,
html[data-theme="dark"] h4.transaction-list-title,
html[data-theme="dark"] [style*="color: #2d1a4a"],
html[data-theme="dark"] [style*="color:#2d1a4a"] {
    color: var(--mp-ink) !important;
}

/* Status tabs above the grid */
html[data-theme="dark"] .status-tab {
    color: var(--mp-ink-soft);
}

html[data-theme="dark"] .status-tab.active {
    color: var(--mp-primary);
}

/* Search field and the All / Today / Yesterday chips */
html[data-theme="dark"] .transaction-search,
html[data-theme="dark"] .search-transactions,
html[data-theme="dark"] .filter-buttons .btn {
    background-color: var(--mp-surface-2);
    border-color: var(--mp-line-strong);
    color: var(--mp-ink);
}

/* The loading overlay is a near-opaque white sheet */
html[data-theme="dark"] .transaction-loader {
    background: rgba(20, 20, 20, 0.95);
    color: var(--mp-ink);
}

/* ==========================================================================
   Pass 7 - form field blending
   --------------------------------------------------------------------------
   On the onboarding steps a label sat on one dark value and its input on
   another, so every field showed a black band behind its text. The field
   wrappers now inherit their card instead of painting their own ground:

     card / step wrapper   --mp-surface     one surface behind everything
     label                 (transparent)    reads directly on the card
     input                 --mp-surface-2   one step lighter, the only inset
   ========================================================================== */

/* The step wrapper is a card, not an inset */
html[data-theme="dark"] .step-content-wrapper,
html[data-theme="dark"] .doc-upload-step,
html[data-theme="dark"] .step19-fields-section {
    background-color: var(--mp-surface);
    background-image: none;
}

/* Nothing between the card and the input paints its own ground */
html[data-theme="dark"] .form-group,
html[data-theme="dark"] .form-group > label,
html[data-theme="dark"] .sub-field-group,
html[data-theme="dark"] .field-wrapper,
html[data-theme="dark"] .form-row,
html[data-theme="dark"] .step-content-wrapper .row > [class^="col-"],
html[data-theme="dark"] .step-content-wrapper .row > [class*=" col-"],
html[data-theme="dark"] .form-group .form-label,
html[data-theme="dark"] .form-group .col-form-label,
html[data-theme="dark"] .form-group .control-label {
    background-color: transparent;
    background-image: none;
}

/* Labels read on the card itself */
html[data-theme="dark"] .form-group > label,
html[data-theme="dark"] .form-group .form-label,
html[data-theme="dark"] .form-group .col-form-label {
    color: var(--mp-ink);
}

/* The input is the only inset, and the only thing with a border */
html[data-theme="dark"] .form-group .form-control,
html[data-theme="dark"] .form-group select,
html[data-theme="dark"] .form-group textarea,
html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .step-content-wrapper .form-control,
html[data-theme="dark"] .step19-fields-section .form-control {
    background-color: var(--mp-surface-2);
    background-image: none;
    border-color: var(--mp-line-strong);
    color: var(--mp-ink);
}

html[data-theme="dark"] .form-group .form-control::placeholder,
html[data-theme="dark"] .step-content-wrapper .form-control::placeholder {
    color: var(--mp-muted);
}

/* Radios and checkboxes sat on their own dark block too */
html[data-theme="dark"] .radio-group,
html[data-theme="dark"] .checkbox-group,
html[data-theme="dark"] .form-check,
html[data-theme="dark"] .form-check-label,
html[data-theme="dark"] .others-description-field {
    background-color: transparent;
    color: var(--mp-ink);
}

/* Section banners on the step pages keep their gradient, but the panel under
   them must match the card rather than going black */
html[data-theme="dark"] .shareholders-section,
html[data-theme="dark"] .signatory-section,
html[data-theme="dark"] .section-body,
html[data-theme="dark"] .table-responsive,
html[data-theme="dark"] .table-responsive > .table {
    background-color: transparent;
}

/* Shareholder / signatory tables on steps 4 and 8 */
html[data-theme="dark"] .shareholders-table th,
html[data-theme="dark"] .signatory-table th,
html[data-theme="dark"] .table thead th {
    background-color: var(--mp-surface-2);
    color: var(--mp-ink);
    border-color: var(--mp-line);
}

html[data-theme="dark"] .shareholders-table td,
html[data-theme="dark"] .signatory-table td {
    background-color: transparent;
    border-color: var(--mp-line);
}

/* The number spinner and its % suffix next to Percentage of Shares */
html[data-theme="dark"] .input-group-append .input-group-text,
html[data-theme="dark"] .percentage-suffix {
    background-color: var(--mp-surface-3);
    border-color: var(--mp-line-strong);
    color: var(--mp-ink-soft);
}

/* ==========================================================================
   Pass 8 - documents, validation text, action tiles
   ========================================================================== */

/* ---- 1. Contract preview is a document, not UI ---------------------------
   It renders the printed agreement on white paper. Theming its text is what
   washed it out, so the whole subtree opts out and keeps document colours. */

html[data-theme="dark"] .contract-preview-container,
html[data-theme="dark"] #contractPreviewContent,
html[data-theme="dark"] .contract-preview-container *,
html[data-theme="dark"] #contractPreviewContent * {
    color: #111111;
    border-color: #cccccc;
}

html[data-theme="dark"] .contract-preview-container,
html[data-theme="dark"] #contractPreviewContent,
html[data-theme="dark"] #contractPreviewContent table,
html[data-theme="dark"] #contractPreviewContent td,
html[data-theme="dark"] #contractPreviewContent th,
html[data-theme="dark"] #contractPreviewContent div,
html[data-theme="dark"] #contractPreviewContent p {
    background-color: #ffffff;
    background-image: none;
}

/* Coloured section bars in the contract keep their own fill */
html[data-theme="dark"] #contractPreviewContent [style*="background"] {
    color: inherit;
}

/* The modal around it is still UI */
html[data-theme="dark"] #previewContractModal .modal-content,
html[data-theme="dark"] #previewContractModal .modal-header,
html[data-theme="dark"] #previewContractModal .modal-footer {
    background-color: var(--mp-surface);
    color: var(--mp-ink);
    border-color: var(--mp-line);
}

html[data-theme="dark"] #previewContractModal .modal-body {
    background-color: var(--mp-surface-2);
}

/* ---- 2. Validation and dedupe messages stay red ------------------------- */

html[data-theme="dark"] .dedupe-feedback,
html[data-theme="dark"] .invalid-feedback,
html[data-theme="dark"] .text-danger,
html[data-theme="dark"] .error,
html[data-theme="dark"] .is-invalid ~ .invalid-feedback,
html[data-theme="dark"] small.dedupe-feedback,
html[data-theme="dark"] .form-text.text-danger {
    color: var(--mp-danger) !important;
}

html[data-theme="dark"] .form-control.is-invalid,
html[data-theme="dark"] .is-invalid {
    border-color: var(--mp-danger);
}

html[data-theme="dark"] .text-success { color: var(--mp-success) !important; }
html[data-theme="dark"] .text-warning { color: var(--mp-warning) !important; }
html[data-theme="dark"] .text-info { color: var(--mp-info) !important; }

/* ---- 3. Contract action tiles ------------------------------------------
   Each tile sets its accent inline (--mc-action), which no stylesheet can
   outrank. Those hues were picked for a white card and drop to ~3:1 here, so
   the label takes ink and the ring keeps the colour identity. The hover state
   was a near-white wash left over from the light design. */

html[data-theme="dark"] .btn-modern.mc-action .mc-action-title {
    color: var(--mp-ink);
}

html[data-theme="dark"] .btn-modern.mc-action .mc-action-caption {
    color: var(--mp-ink-soft);
}

html[data-theme="dark"] .btn-modern.mc-action:hover {
    background-color: var(--mp-surface-2);
    background-image: none;
    border-color: var(--mp-line);
}

html[data-theme="dark"] .btn-modern.mc-action:hover .mc-action-title {
    color: var(--mp-primary);
}

/* The ring track has to read against the card, not the white one it was drawn
   for; the coloured arc and the tinted disc are left alone. */
html[data-theme="dark"] .mc-action-ring::before {
    background: var(--mp-surface);
}

html[data-theme="dark"] .btn-modern.mc-action:hover .mc-action-ring::before {
    background: var(--mp-surface-2);
}

/* ==========================================================================
   Pass 9 - config fields, merchant nav, tabs, storefront
   ========================================================================== */

/* ---- 1. Merchant configuration: read-only fields ------------------------
   merchant-configuration.blade.php pins these with !important, so the dark
   value has to carry !important too or the field stays light grey. */

html[data-theme="dark"] .readonly-field,
html[data-theme="dark"] .readonly-field:disabled,
html[data-theme="dark"] input.readonly-field,
html[data-theme="dark"] .form-control.readonly-field,
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] select:disabled,
html[data-theme="dark"] textarea:disabled {
    background-color: var(--mp-surface-3) !important;
    background-image: none !important;
    color: var(--mp-ink) !important;
    border-color: var(--mp-line-strong) !important;
    -webkit-text-fill-color: var(--mp-ink);
    opacity: 1;
}

html[data-theme="dark"] .readonly-section,
html[data-theme="dark"] .readonly-section .card-header,
html[data-theme="dark"] .settings-section,
html[data-theme="dark"] .config-section {
    background-color: var(--mp-surface-2) !important;
    background-image: none !important;
    color: var(--mp-ink);
    border-color: var(--mp-line);
}

/* Hint lines under a field: 840($), 156(¥), Serial(0), USB(1) ... */
html[data-theme="dark"] .form-text,
html[data-theme="dark"] .field-hint,
html[data-theme="dark"] small.text-muted {
    color: var(--mp-ink-soft) !important;
}

/* ---- 2. Merchant side navigation ---------------------------------------
   Argon writes these as .navbar-vertical.navbar-expand-xs .navbar-nav
   .nav-link, deeper than the earlier override reached. */

html[data-theme="dark"] .navbar-vertical.navbar-expand-xs .navbar-nav .nav-link,
html[data-theme="dark"] .navbar-vertical.navbar-expand-sm .navbar-nav .nav-link,
html[data-theme="dark"] .navbar-vertical.navbar-expand-md .navbar-nav .nav-link,
html[data-theme="dark"] .navbar-vertical.navbar-expand-lg .navbar-nav .nav-link,
html[data-theme="dark"] .sidenav .navbar-nav .nav-link,
html[data-theme="dark"] .sidenav .navbar-nav .nav-link span,
html[data-theme="dark"] .sidenav .navbar-nav .nav-link i,
html[data-theme="dark"] #sidenav-main .nav-link,
html[data-theme="dark"] #sidenav-main .nav-link span {
    color: var(--mp-ink) !important;
}

html[data-theme="dark"] .navbar-vertical .navbar-nav .nav-link.active,
html[data-theme="dark"] .sidenav .navbar-nav .nav-link.active,
html[data-theme="dark"] #sidenav-main .nav-link.active {
    color: var(--mp-primary) !important;
    background-color: var(--mp-primary-soft);
}

html[data-theme="dark"] .navbar-vertical .navbar-heading,
html[data-theme="dark"] .sidenav .navbar-heading {
    color: var(--mp-muted) !important;
}

/* The Dirham glyph is a dark PNG with no alpha variant */
html[data-theme="dark"] img[src*="Dirham"],
html[data-theme="dark"] img[src*="dirham"] {
    filter: invert(1) brightness(1.6);
}

/* ---- 3. Filter chips (All / Today / Yesterday) -------------------------- */

html[data-theme="dark"] .filter-buttons .btn,
html[data-theme="dark"] .filter-btn,
html[data-theme="dark"] .date-filter-btn {
    background-color: var(--mp-surface-2);
    background-image: none;
    border-color: var(--mp-line-strong);
    color: var(--mp-ink);
}

html[data-theme="dark"] .filter-buttons .btn.active,
html[data-theme="dark"] .filter-btn.active,
html[data-theme="dark"] .date-filter-btn.active {
    background-color: var(--mp-primary-soft);
    border-color: var(--mp-primary);
    color: var(--mp-primary);
}

/* ---- 4. Tab strips: make the current tab obvious ------------------------
   In light the active tab reads from its white fill against a grey strip.
   On dark that difference is too small, so it gets an underline as well. */

html[data-theme="dark"] .nav-tabs .nav-link,
html[data-theme="dark"] .nav-tabs.card-header-tabs .nav-link {
    background-color: transparent;
    border-color: transparent;
    color: var(--mp-ink-soft);
}

html[data-theme="dark"] .nav-tabs .nav-link:hover {
    color: var(--mp-ink);
    border-color: transparent;
}

html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-tabs.card-header-tabs .nav-link.active,
html[data-theme="dark"] .nav-tabs .nav-item.show .nav-link {
    background-color: var(--mp-primary-soft);
    border-color: transparent transparent var(--mp-primary) transparent;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    color: var(--mp-primary);
    font-weight: 600;
}

html[data-theme="dark"] .nav-tabs .nav-link.active i {
    color: var(--mp-primary);
}

/* ---- 5. Storefront ------------------------------------------------------
   .hero-btn is an <a>, so the generic link colour was repainting its label the
   same purple as its own background. It now keeps a button's own colours. */

html[data-theme="dark"] .hero-btn,
html[data-theme="dark"] a.hero-btn,
html[data-theme="dark"] .hero-btn.two,
html[data-theme="dark"] a.hero-btn.two,
html[data-theme="dark"] .hero-btn.login-btn,
html[data-theme="dark"] .fee-btn,
html[data-theme="dark"] .chit-btn {
    background-color: var(--mp-primary);
    background-image: none;
    color: var(--mp-on-primary) !important;
    border-color: var(--mp-primary);
}

html[data-theme="dark"] .hero-btn:hover,
html[data-theme="dark"] a.hero-btn:hover {
    background-color: var(--mp-primary-hover);
    color: var(--mp-on-primary) !important;
}

/* The secondary button reads as an outline so the pair is distinguishable */
html[data-theme="dark"] .hero-btn.two,
html[data-theme="dark"] a.hero-btn.two {
    background-color: transparent;
    color: var(--mp-primary) !important;
    border: 1px solid var(--mp-primary);
}

html[data-theme="dark"] .hero-btn.two:hover,
html[data-theme="dark"] a.hero-btn.two:hover {
    background-color: var(--mp-primary-soft);
    color: var(--mp-primary) !important;
}

/* Hero copy */
html[data-theme="dark"] .hero-content p,
html[data-theme="dark"] .hero-area p,
html[data-theme="dark"] .section-padding p,
html[data-theme="dark"] .hero-text p {
    color: var(--mp-ink-soft);
}

html[data-theme="dark"] .hero-content h1,
html[data-theme="dark"] .hero-area h1,
html[data-theme="dark"] .hero-title {
    color: var(--mp-ink);
}

/* The eyebrow pill above the headline */
html[data-theme="dark"] .hero-subtitle,
html[data-theme="dark"] .hero-badge,
html[data-theme="dark"] .section-subtitle {
    background-color: var(--mp-primary-soft);
    color: var(--mp-primary);
}

/* Storefront nav */
html[data-theme="dark"] .main-menu ul li a,
html[data-theme="dark"] .navbar-nav .nav-item .nav-link,
html[data-theme="dark"] .header-area .nav-link {
    color: var(--mp-ink);
}

html[data-theme="dark"] .main-menu ul li a:hover {
    color: var(--mp-primary);
}

/* ==========================================================================
   Pass 10 - notification dropdown
   --------------------------------------------------------------------------
   Two problems: the list items carry their own ink and hairline, and the
   scroll fade at the foot of the list is a hardcoded white gradient
   (rgba(255,255,255,...)), which paints a white smear over a dark panel.
   ========================================================================== */

html[data-theme="dark"] .dropdown-list,
html[data-theme="dark"] .dropdown-menu.dropdown-list,
html[data-theme="dark"] .dropdown-list .dropdown-list-content {
    background-color: var(--mp-surface);
    background-image: none;
    border-color: var(--mp-line);
}

html[data-theme="dark"] .dropdown-list .dropdown-item {
    background-color: var(--mp-surface);
    border-bottom-color: var(--mp-line);
    color: var(--mp-ink);
}

html[data-theme="dark"] .dropdown-list .dropdown-item:hover,
html[data-theme="dark"] .dropdown-list .dropdown-item:focus {
    background-color: var(--mp-surface-2);
    color: var(--mp-ink);
}

html[data-theme="dark"] .dropdown-list .dropdown-item .dropdown-item-desc,
html[data-theme="dark"] .dropdown-list .dropdown-item b,
html[data-theme="dark"] .dropdown-list .dropdown-item strong {
    color: var(--mp-ink);
}

html[data-theme="dark"] .dropdown-list .dropdown-item .time,
html[data-theme="dark"] .dropdown-list .dropdown-item .dropdown-item-desc small {
    color: var(--mp-muted);
}

/* Unread rows sit on a tint rather than a brighter white */
html[data-theme="dark"] .dropdown-list .dropdown-item.unread,
html[data-theme="dark"] .dropdown-list .dropdown-item.is-unread {
    background-color: var(--mp-primary-soft);
}

/* Header and footer of the panel */
html[data-theme="dark"] .dropdown-menu .dropdown-header,
html[data-theme="dark"] .dropdown-list .dropdown-header,
html[data-theme="dark"] .dropdown-menu .dropdown-footer,
html[data-theme="dark"] .dropdown-list .dropdown-footer {
    background-color: var(--mp-surface-2);
    border-color: var(--mp-line);
    color: var(--mp-ink);
}

html[data-theme="dark"] .dropdown-header a,
html[data-theme="dark"] .dropdown-footer a,
html[data-theme="dark"] .mark-all-as-read {
    color: var(--mp-primary);
}

/* The scroll fade, redrawn from the panel colour instead of white */
html[data-theme="dark"] .dropdown-list .dropdown-list-content:not(.is-end):after,
html[data-theme="dark"] .dropdown-list-content:not(.is-end):after {
    background-image: linear-gradient(to bottom,
        rgba(30, 30, 30, 0),
        rgba(30, 30, 30, 0.55),
        rgba(30, 30, 30, 0.92));
}

/* Any other white-to-transparent fade in the template */
html[data-theme="dark"] [class*="fade"]:after,
html[data-theme="dark"] .list-fade:after {
    background-image: linear-gradient(to bottom,
        rgba(30, 30, 30, 0),
        rgba(30, 30, 30, 0.55),
        rgba(30, 30, 30, 0.92));
}

/* Avatar bubbles inside the list */
html[data-theme="dark"] .dropdown-list .dropdown-item-icon {
    color: #ffffff;
}

/* ==========================================================================
   Pass 11 - hover rows, ghost buttons, modal close
   --------------------------------------------------------------------------
   All three are light-design values that survived into dark: a near-white row
   hover, a white ghost button, and a pale close chip. Each one hides its own
   text once the surrounding text is light.
   ========================================================================== */

/* ---- 1. Table row hover -------------------------------------------------
   .ma-table tbody tr:hover was #fbfcfe, so hovering a row turned it white and
   the light text vanished. */

html[data-theme="dark"] .ma-table tbody tr:hover,
html[data-theme="dark"] .table tbody tr:hover,
html[data-theme="dark"] .table-hover tbody tr:hover,
html[data-theme="dark"] .ma-table tbody tr:hover td,
html[data-theme="dark"] .table tbody tr:hover td {
    background-color: var(--mp-surface-2) !important;
    color: var(--mp-ink) !important;
}

html[data-theme="dark"] .ma-table tbody tr:hover .ma-method-name,
html[data-theme="dark"] .ma-table tbody tr:hover .ma-table-date,
html[data-theme="dark"] .table tbody tr:hover a {
    color: var(--mp-ink) !important;
}

html[data-theme="dark"] .ma-table tbody tr:hover .ma-step-number {
    background-color: var(--mp-primary);
    color: var(--mp-on-primary);
}

/* Hovering a row must not repaint the pills inside it */
html[data-theme="dark"] .table tbody tr:hover .ma-pill,
html[data-theme="dark"] .table tbody tr:hover .badge,
html[data-theme="dark"] .table tbody tr:hover .btn {
    color: inherit !important;
}

html[data-theme="dark"] .ma-pill--success { color: var(--mp-success) !important; }
html[data-theme="dark"] .ma-pill--warning { color: var(--mp-warning) !important; }
html[data-theme="dark"] .ma-pill--danger  { color: var(--mp-danger) !important; }
html[data-theme="dark"] .ma-pill--info    { color: var(--mp-info) !important; }
html[data-theme="dark"] .ma-pill--muted   { color: var(--mp-ink-soft) !important; }

/* ---- 2. Ghost / muted buttons -------------------------------------------
   View Contract, Back to List, Cancel and the modal Close were white fills
   from the light design. */

html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .ma-detail-page .btn-ghost,
html[data-theme="dark"] .ma-create-page .btn-ghost,
html[data-theme="dark"] .contract-page .btn-modern.btn-ghost,
html[data-theme="dark"] .ma-modal .btn-ghost,
html[data-theme="dark"] a.btn-ghost {
    background-color: var(--mp-surface-2) !important;
    background-image: none !important;
    border-color: var(--mp-line-strong) !important;
    color: var(--mp-ink) !important;
}

html[data-theme="dark"] .btn-ghost:hover,
html[data-theme="dark"] a.btn-ghost:hover {
    background-color: var(--mp-surface-3) !important;
    border-color: var(--mp-primary) !important;
    color: var(--mp-primary) !important;
}

html[data-theme="dark"] .btn-muted,
html[data-theme="dark"] .ma-create-page .btn-muted {
    background-color: var(--mp-surface-3) !important;
    border-color: var(--mp-surface-3) !important;
    color: var(--mp-ink) !important;
}

html[data-theme="dark"] .btn-muted:hover {
    background-color: var(--mp-line) !important;
    color: var(--mp-ink) !important;
}

/* Icons inside those buttons follow the label */
html[data-theme="dark"] .btn-ghost i,
html[data-theme="dark"] .btn-muted i {
    color: inherit;
}

/* ---- 3. Modal close controls -------------------------------------------- */

html[data-theme="dark"] .ma-modal .close,
html[data-theme="dark"] .modal .close,
html[data-theme="dark"] .modal-header .close,
html[data-theme="dark"] .btn-close,
html[data-theme="dark"] .swal2-close {
    background-color: var(--mp-surface-3) !important;
    color: var(--mp-ink) !important;
    opacity: 1;
    text-shadow: none;
    border: 1px solid var(--mp-line);
}

html[data-theme="dark"] .ma-modal .close:hover,
html[data-theme="dark"] .modal .close:hover,
html[data-theme="dark"] .btn-close:hover {
    background-color: var(--mp-danger-soft) !important;
    border-color: var(--mp-danger-line);
    color: var(--mp-danger) !important;
}

html[data-theme="dark"] .close span,
html[data-theme="dark"] .close i {
    color: inherit !important;
}

/* Bootstrap 5 renders its close as a background image, invisible on dark */
html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(2);
}

/* Any remaining near-white hover wash from the light designs */

html[data-theme="dark"] .doc-panel tr:hover,
html[data-theme="dark"] .mc-panel tr:hover,
html[data-theme="dark"] .document-item:hover,
html[data-theme="dark"] .kyc-item:hover {
    background-color: var(--mp-surface-2);
    color: var(--mp-ink);
}

/* ==========================================================================
   Pass 12 - storefront
   --------------------------------------------------------------------------
   The marketing site was half-converted: its own pink/lilac gradient sections
   and white cards survived against a dark ground, so some bands stayed light,
   card titles washed out, and the header showed white gutters. Each section
   and card is named explicitly here rather than caught by a generic rule.
   ========================================================================== */

/* ---- Page bands --------------------------------------------------------- */
html[data-theme="dark"] .welcome-area,
html[data-theme="dark"] .feature-area,
html[data-theme="dark"] .about-us-area,
html[data-theme="dark"] .our-service-area,
html[data-theme="dark"] .sass-business-area,
html[data-theme="dark"] .capture-area,
html[data-theme="dark"] .security-area,
html[data-theme="dark"] .client-area,
html[data-theme="dark"] .faq-area,
html[data-theme="dark"] .blog-area,
html[data-theme="dark"] .bg-gray-cu,
html[data-theme="dark"] .section-padding-100,
html[data-theme="dark"] .section-padding-100-50,
html[data-theme="dark"] .section-padding-0-50 {
    background-color: var(--mp-ground) !important;
    background-image: none !important;
    color: var(--mp-ink);
}

/* Alternating bands keep a subtle change of value so the page still has rhythm */
html[data-theme="dark"] .our-service-area,
html[data-theme="dark"] .client-area,
html[data-theme="dark"] .faq-area {
    background-color: var(--mp-surface) !important;
}

/* ---- Cards -------------------------------------------------------------- */
html[data-theme="dark"] .single-feature-area,
html[data-theme="dark"] .single-service-area,
html[data-theme="dark"] .single-capture-card,
html[data-theme="dark"] .single-security-area,
html[data-theme="dark"] .single-clinet-slider,
html[data-theme="dark"] .single-blog-area,
html[data-theme="dark"] .tab-heading-card,
html[data-theme="dark"] .sass-tab-card-area,
html[data-theme="dark"] .faq-content,
html[data-theme="dark"] .card-body-cu {
    background-color: var(--mp-surface-2) !important;
    background-image: none !important;
    border: 1px solid var(--mp-line);
    border-radius: 12px;
    color: var(--mp-ink);
    box-shadow: none;
}

html[data-theme="dark"] .single-feature-area h4,
html[data-theme="dark"] .single-feature-area h5,
html[data-theme="dark"] .single-service-area h4,
html[data-theme="dark"] .single-service-area h5,
html[data-theme="dark"] .single-capture-card h4,
html[data-theme="dark"] .single-security-area h4,
html[data-theme="dark"] .single-blog-area h4,
html[data-theme="dark"] .single-clinet-slider h5,
html[data-theme="dark"] .single-clinet-slider h6 {
    color: var(--mp-ink) !important;
}

html[data-theme="dark"] .single-feature-area p,
html[data-theme="dark"] .single-service-area p,
html[data-theme="dark"] .single-capture-card p,
html[data-theme="dark"] .single-security-area p,
html[data-theme="dark"] .single-blog-area p,
html[data-theme="dark"] .single-clinet-slider p,
html[data-theme="dark"] .single-clinet-slider span {
    color: var(--mp-ink-soft) !important;
}

/* Icon medallions on the service cards */
html[data-theme="dark"] .single-service-area .service-icon,
html[data-theme="dark"] .single-feature-area .feature-icon,
html[data-theme="dark"] .service-icon,
html[data-theme="dark"] .feature-icon {
    background-color: var(--mp-primary-soft) !important;
    color: var(--mp-primary) !important;
}

/* ---- Section headings --------------------------------------------------- */
html[data-theme="dark"] .section-heading h2,
html[data-theme="dark"] .section-heading h3,
html[data-theme="dark"] .section-heading p,
html[data-theme="dark"] .section-title h2,
html[data-theme="dark"] .about-us-area h2,
html[data-theme="dark"] .capture-area h2,
html[data-theme="dark"] .security-area h2 {
    color: var(--mp-ink) !important;
}

html[data-theme="dark"] .section-heading p,
html[data-theme="dark"] .about-us-area p,
html[data-theme="dark"] .capture-area p,
html[data-theme="dark"] .security-area p,
html[data-theme="dark"] .sass-business-area p {
    color: var(--mp-ink-soft) !important;
}

/* ---- Header ------------------------------------------------------------
   The white gutters either side of the nav are the header bar itself, which
   only painted behind the menu. */
html[data-theme="dark"] .header-area,
html[data-theme="dark"] .main-header-area,
html[data-theme="dark"] .header-area .classy-nav-container,
html[data-theme="dark"] .classy-navbar,
html[data-theme="dark"] .classynav,
html[data-theme="dark"] .classynav > ul > li > a,
html[data-theme="dark"] .header-sticky {
    background-color: var(--mp-surface) !important;
    background-image: none !important;
    color: var(--mp-ink);
}

html[data-theme="dark"] .classynav > ul > li > a { color: var(--mp-ink) !important; }
html[data-theme="dark"] .classynav > ul > li > a:hover { color: var(--mp-primary) !important; }
html[data-theme="dark"] .header-area { border-bottom: 1px solid var(--mp-line); }

/* ---- Code sample panel (integration section) ---------------------------- */
html[data-theme="dark"] .code-demo-card,
html[data-theme="dark"] .code-demo-card pre,
html[data-theme="dark"] .code-demo-card code {
    background-color: var(--mp-surface-3) !important;
    background-image: none !important;
    color: var(--mp-ink) !important;
    border-color: var(--mp-line);
}

html[data-theme="dark"] .sass-tab-card-area .nav-link { color: var(--mp-ink-soft) !important; }
html[data-theme="dark"] .sass-tab-card-area .nav-link.active {
    background-color: var(--mp-primary) !important;
    color: var(--mp-on-primary) !important;
}

/* ---- Footer ------------------------------------------------------------- */
html[data-theme="dark"] .footer-area,
html[data-theme="dark"] .footer-content,
html[data-theme="dark"] .copyright-area {
    background-color: var(--mp-surface) !important;
    background-image: none !important;
    color: var(--mp-ink-soft);
    border-top: 1px solid var(--mp-line);
}

html[data-theme="dark"] .footer-area a { color: var(--mp-ink-soft); }
html[data-theme="dark"] .footer-area a:hover { color: var(--mp-primary); }

/* ==========================================================================
   Login card - it had no container of its own on a dark ground
   ========================================================================== */

html[data-theme="dark"] .login-content,
html[data-theme="dark"] .login-form {
    background-color: var(--mp-surface) !important;
    border: 1px solid var(--mp-line);
    border-radius: 14px;
    padding: 32px 28px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .login-content .form-control,
html[data-theme="dark"] .login-area .form-control {
    background-color: var(--mp-surface-2) !important;
    border: 1px solid var(--mp-line-strong) !important;
    color: var(--mp-ink) !important;
}

html[data-theme="dark"] .login-content .form-control:focus {
    border-color: var(--mp-primary) !important;
    box-shadow: 0 0 0 3px var(--mp-primary-soft);
}

/* The submit button was a dark plum that read as disabled */
html[data-theme="dark"] .login-content button[type="submit"],
html[data-theme="dark"] .login-area button[type="submit"],
html[data-theme="dark"] .login-content .btn-primary {
    background-color: var(--mp-primary) !important;
    background-image: none !important;
    border-color: var(--mp-primary) !important;
    color: var(--mp-on-primary) !important;
}

html[data-theme="dark"] .login-content a { color: var(--mp-primary); }

/* ==========================================================================
   Pass 13 - create wizard tokens, declaration sheet, close on tinted headers
   ========================================================================== */

/* ---- 1. Create wizard --------------------------------------------------
   .ma-create-page declares its palette as --mc-*, not --ma-*, so the earlier
   repoint set variables that page never reads and it kept light values. */

html[data-theme="dark"] .ma-create-page {
    --mc-primary: var(--mp-primary);
    --mc-primary-soft: var(--mp-primary-soft);
    --mc-border: var(--mp-line);
    --mc-text: var(--mp-ink);
    --mc-text-soft: var(--mp-ink-soft);
    --mc-muted: var(--mp-muted);
}

html[data-theme="dark"] .ma-section-header h6,
html[data-theme="dark"] .ma-create-header h4 {
    color: var(--mp-ink);
}

html[data-theme="dark"] .ma-create-lead {
    color: var(--mp-ink-soft);
}

/* ---- 2. Declaration ----------------------------------------------------
   .declaration-content is a white sheet holding the printed form. It is UI
   here rather than a document - the fields are filled in on screen - so it
   becomes a dark surface and its ink follows. */

html[data-theme="dark"] .declaration-content,
html[data-theme="dark"] .declaration-section,
html[data-theme="dark"] .sales-rep-details {
    background-color: var(--mp-surface) !important;
    background-image: none !important;
    border: 1px solid var(--mp-line);
    box-shadow: none;
    color: var(--mp-ink);
}

html[data-theme="dark"] .declaration-content p,
html[data-theme="dark"] .declaration-content li,
html[data-theme="dark"] .declaration-content td,
html[data-theme="dark"] .declaration-content th,
html[data-theme="dark"] .declaration-content span,
html[data-theme="dark"] .declaration-content label,
html[data-theme="dark"] .declaration-content div,
html[data-theme="dark"] .declaration-section p,
html[data-theme="dark"] .declaration-section label {
    color: var(--mp-ink);
}

html[data-theme="dark"] .declaration-content h1,
html[data-theme="dark"] .declaration-content h2,
html[data-theme="dark"] .declaration-content h3,
html[data-theme="dark"] .declaration-content h4,
html[data-theme="dark"] .declaration-content h5,
html[data-theme="dark"] .declaration-content h6 {
    color: var(--mp-primary);
}

html[data-theme="dark"] .placeholder-content,
html[data-theme="dark"] .declaration-content small,
html[data-theme="dark"] .declaration-content .text-muted {
    color: var(--mp-ink-soft) !important;
}

/* The form rules on this sheet are drawn as 1px solid #000 underlines and
   boxes, invisible on a dark surface */
html[data-theme="dark"] .declaration-content [style*="border-bottom: 1px solid #000"],
html[data-theme="dark"] .declaration-content [style*="border: 1px solid #000"],
html[data-theme="dark"] .declaration-content [style*="border: 1px solid #ccc"],
html[data-theme="dark"] .declaration-content input[type="text"],
html[data-theme="dark"] .declaration-content input[type="datetime-local"],
html[data-theme="dark"] .declaration-content textarea {
    border-color: var(--mp-line-strong) !important;
    background-color: var(--mp-surface-2) !important;
    color: var(--mp-ink) !important;
}

/* Checkboxes render as tiny white squares; the accent gives them a visible
   checked state on dark */
html[data-theme="dark"] .declaration-content input[type="checkbox"],
html[data-theme="dark"] .declaration-content input[type="radio"],
html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"] {
    accent-color: var(--mp-primary);
}

html[data-theme="dark"] .declaration-header {
    background-image: none;
    background-color: var(--mp-surface);
    border: 1px solid var(--mp-line);
    color: var(--mp-ink);
}

/* ---- 3. Close button on a tinted modal header --------------------------
   A grey chip looks like debris on the coloured success header; there the
   glyph rides the header itself. */

html[data-theme="dark"] .modal-header[class*="bg-"] .close,
html[data-theme="dark"] .modal-header[style*="background"] .close,
html[data-theme="dark"] .modal-header.bg-success .close,
html[data-theme="dark"] .modal-header.bg-info .close,
html[data-theme="dark"] .modal-header.bg-primary .close,
html[data-theme="dark"] .modal-header.bg-danger .close {
    background-color: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff !important;
}

html[data-theme="dark"] .modal-header[class*="bg-"] .close:hover {
    background-color: rgba(255, 255, 255, 0.32) !important;
    color: #ffffff !important;
}