/* * ═══════════════════════════════════════════════════════════════════ * AVASHA FINANCE — THEME SYSTEM * Strategy: Dark is the default (:root). Light is the override. * Applied via or * ═══════════════════════════════════════════════════════════════════ */ /* ── DARK (default) ─────────────────────────────────────────────── */ :root, [data-theme="dark"] { /* Brand (same in both themes) */ --av-pink: #FF2D87; --av-purple: #7B2FBE; --av-pink-soft: #FF6AB0; --av-grad: linear-gradient(135deg, #7B2FBE 0%, #C9277A 50%, #FF2D87 100%); --av-teal: #00B386; --av-teal-dark: #00906C; /* Page backgrounds */ --av-page-bg: #090812; --av-page-bg-2: #0E0B1A; --av-surface: #13101F; --av-surface-2: #1A1630; --av-card: rgba(255,255,255,.045); --av-card-solid: #160F2A; /* Borders */ --av-border: rgba(255,255,255,.08); --av-border-mid: rgba(255,255,255,.12); --av-border-strong: rgba(255,255,255,.2); /* Text */ --av-text: #F1F5F9; --av-text-mid: rgba(255,255,255,.7); --av-text-muted: rgba(255,255,255,.45); --av-text-hint: rgba(255,255,255,.28); /* Inputs */ --av-input-bg: rgba(255,255,255,.06); --av-input-border: rgba(255,255,255,.1); --av-input-text: #fff; --av-input-placeholder: rgba(255,255,255,.22); --av-input-focus-border: rgba(255,45,135,.55); --av-input-focus-bg: rgba(255,45,135,.05); --av-input-focus-shadow: 0 0 0 3px rgba(255,45,135,.12); /* Sidebar */ --av-sb-bg: #0A1628; --av-sb-border: rgba(255,255,255,.07); --av-sb-text: rgba(255,255,255,.85); --av-sb-text-on: #fff; --av-sb-muted: rgba(255,255,255,.5); --av-sb-hover: rgba(255,255,255,.06); --av-sb-active: rgba(0,179,134,.14); --av-sb-logo-bg: #ffffff; /* Header */ --av-header-bg: #0A1628; --av-header-border: rgba(255,255,255,.07); --av-header-text: rgba(255,255,255,.75); /* Tables */ --av-table-head-bg: #1A1530; --av-table-head-text: rgba(255,255,255,.55); --av-table-row-hover: rgba(255,255,255,.03); --av-table-border: rgba(255,255,255,.07); /* Status badge tweaks */ --av-badge-overlay: 0; /* no extra opacity */ /* Main content area */ --av-main-bg: #0E0B1A; --av-main-text: #F1F5F9; /* Portal nav */ --av-portal-nav-bg: #0A1628; --av-portal-nav-text: #fff; --av-portal-surface: #13101F; --av-portal-card: #1A1630; --av-portal-border: rgba(255,255,255,.08); /* Scroll bars */ --av-scrollbar-thumb: rgba(255,255,255,.12); /* Shadows */ --av-shadow-card: 0 8px 32px rgba(0,0,0,.45); --av-shadow-lg: 0 24px 60px rgba(0,0,0,.6); } /* ── LIGHT ──────────────────────────────────────────────────────── */ [data-theme="light"] { /* Page backgrounds */ --av-page-bg: #F4F1FB; --av-page-bg-2: #EEE9F7; --av-surface: #FFFFFF; --av-surface-2: #F7F4FD; --av-card: #FFFFFF; --av-card-solid: #FFFFFF; /* Borders */ --av-border: #E5DFF5; --av-border-mid: #D4CCE8; --av-border-strong: #B8AECC; /* Text */ --av-text: #1A1228; --av-text-mid: #3D3058; --av-text-muted: #6B5E8A; --av-text-hint: #9B8FBB; /* Inputs */ --av-input-bg: #F7F4FD; --av-input-border: #DDD6F3; --av-input-text: #1A1228; --av-input-placeholder: #9B8FBB; --av-input-focus-border: rgba(255,45,135,.5); --av-input-focus-bg: rgba(255,45,135,.04); --av-input-focus-shadow: 0 0 0 3px rgba(255,45,135,.1); /* Sidebar */ --av-sb-bg: #1A1228; --av-sb-border: rgba(255,255,255,.07); --av-sb-text: rgba(255,255,255,.85); --av-sb-text-on: #fff; --av-sb-muted: rgba(255,255,255,.5); --av-sb-hover: rgba(255,255,255,.06); --av-sb-active: rgba(255,45,135,.18); --av-sb-logo-bg: #F7F4FD; /* Header */ --av-header-bg: #FFFFFF; --av-header-border: #E5DFF5; --av-header-text: #3D3058; /* Tables */ --av-table-head-bg: #F7F4FD; --av-table-head-text: #6B5E8A; --av-table-row-hover: #FAF8FF; --av-table-border: #F0EBF9; /* Main content area */ --av-main-bg: #F4F1FB; --av-main-text: #1A1228; /* Portal */ --av-portal-nav-bg: #1A1228; --av-portal-nav-text: #fff; --av-portal-surface: #F4F1FB; --av-portal-card: #FFFFFF; --av-portal-border: #E5DFF5; /* Scrollbars */ --av-scrollbar-thumb: rgba(123,47,190,.15); /* Shadows */ --av-shadow-card: 0 4px 20px rgba(123,47,190,.08); --av-shadow-lg: 0 20px 50px rgba(123,47,190,.12); } /* ════════════════════════════════════════════════════════════════════ GLOBAL THEME APPLICATION Apply variables to actual elements. Both layouts inherit from here. ════════════════════════════════════════════════════════════════════ */ html { transition: background-color .25s, color .25s; } /* ── Admin body / wrapper ───────────────────────────────────────── */ [data-theme] .c-body, [data-theme] .c-main, [data-theme] .c-wrapper, [data-theme] body.c-app { background-color: var(--av-main-bg) !important; color: var(--av-main-text); } /* ── Admin header ────────────────────────────────────────────────── */ [data-theme] .c-header.c-header-fixed { background: var(--av-header-bg) !important; border-bottom-color: var(--av-header-border) !important; } [data-theme] .sb-ham { color: var(--av-header-text) !important; } [data-theme] .sb-ham:hover { background: rgba(123,47,190,.1) !important; color: var(--av-text) !important; } /* ── Sidebar ─────────────────────────────────────────────────────── */ [data-theme] #avasha-sidebar { background: var(--av-sb-bg) !important; } /* Sidebar logo area always transparent — sidebar bg provides the dark backdrop */ [data-theme] .sb-brand-row { background: transparent !important; } [data-theme] .sb-item { color: var(--av-sb-text) !important; } [data-theme] .sb-item:hover { background: var(--av-sb-hover) !important; } [data-theme] .sb-item.active { background: var(--av-sb-active) !important; color: var(--av-teal) !important; } [data-theme="light"] .sb-item.active { color: var(--av-pink) !important; } [data-theme] .sb-muted, [data-theme] .sb-sec { color: var(--av-sb-muted) !important; } [data-theme] .sb-user-name { color: var(--av-sb-text-on) !important; } [data-theme] .sb-user-role { color: var(--av-sb-muted) !important; } [data-theme] .sb-footer { border-top-color: var(--av-sb-border) !important; } /* ── Cards / panels ──────────────────────────────────────────────── */ [data-theme] .card, [data-theme] .oa-card, [data-theme] .side-panel, [data-theme] .apps-table-card, [data-theme] .send-card, [data-theme] .filter-panel, [data-theme] .kpi-card { background: var(--av-surface) !important; border-color: var(--av-border) !important; color: var(--av-text) !important; } [data-theme] .card-header, [data-theme] .oa-card-header, [data-theme] .apps-table-header, [data-theme] .send-card-header { background: var(--av-surface-2) !important; border-bottom-color: var(--av-border) !important; } [data-theme] .card-body, [data-theme] .oa-card-body { color: var(--av-text) !important; } /* ── Tables ──────────────────────────────────────────────────────── */ [data-theme] table.at thead th, [data-theme] table.dataTable thead th, [data-theme] .oa-info-table th, [data-theme] .send-info th { background: var(--av-table-head-bg) !important; color: var(--av-table-head-text) !important; border-color: var(--av-border) !important; } [data-theme] table.at tbody td, [data-theme] table.dataTable tbody td, [data-theme] .oa-info-table td, [data-theme] .send-info td { border-color: var(--av-table-border) !important; color: var(--av-text) !important; } [data-theme] table.at tbody tr:hover, [data-theme] table.dataTable tbody tr:hover { background: var(--av-table-row-hover) !important; } [data-theme] table { background: var(--av-surface) !important; } /* Bootstrap table */ [data-theme] .table { color: var(--av-text) !important; } [data-theme] .table thead th { border-bottom-color: var(--av-border-mid) !important; } [data-theme] .table td, [data-theme] .table th { border-top-color: var(--av-border) !important; } [data-theme="light"] .table-striped tbody tr:nth-of-type(odd) { background: var(--av-surface-2) !important; } /* ── Form controls ───────────────────────────────────────────────── */ [data-theme] .form-control, [data-theme] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), [data-theme] select, [data-theme] textarea { background-color: var(--av-input-bg) !important; border-color: var(--av-input-border) !important; color: var(--av-input-text) !important; } [data-theme] .form-control:focus, [data-theme] input:focus, [data-theme] select:focus, [data-theme] textarea:focus { border-color: var(--av-input-focus-border) !important; background-color: var(--av-input-focus-bg) !important; box-shadow: var(--av-input-focus-shadow) !important; } [data-theme] .form-control::placeholder, [data-theme] input::placeholder { color: var(--av-input-placeholder) !important; } /* Select2 */ [data-theme] .select2-container--default .select2-selection--single, [data-theme] .select2-container--default .select2-selection--multiple { background-color: var(--av-input-bg) !important; border-color: var(--av-input-border) !important; color: var(--av-input-text) !important; } [data-theme] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--av-input-text) !important; } [data-theme] .select2-dropdown { background: var(--av-surface) !important; border-color: var(--av-border-mid) !important; } [data-theme] .select2-container--default .select2-results__option { color: var(--av-text) !important; } [data-theme] .select2-container--default .select2-results__option--highlighted { background: rgba(255,45,135,.12) !important; color: var(--av-text) !important; } [data-theme] .select2-search__field { background: var(--av-input-bg) !important; color: var(--av-input-text) !important; border-color: var(--av-border) !important; } /* ── Labels / text ───────────────────────────────────────────────── */ [data-theme] label, [data-theme] .form-label { color: var(--av-text-muted) !important; } [data-theme] h1,[data-theme] h2,[data-theme] h3,[data-theme] h4,[data-theme] h5,[data-theme] h6 { color: var(--av-text) !important; } [data-theme] p, [data-theme] span, [data-theme] li, [data-theme] td, [data-theme] th { color: inherit; } [data-theme] .text-muted { color: var(--av-text-muted) !important; } [data-theme] small { color: var(--av-text-muted) !important; } /* ── Alerts ──────────────────────────────────────────────────────── */ [data-theme="dark"] .alert-success { background:#0D2B22; border-color:#14532D; color:#4ADE80; } [data-theme="dark"] .alert-danger { background:#2B0D0D; border-color:#7F1D1D; color:#FCA5A5; } [data-theme="dark"] .alert-warning { background:#2B1D00; border-color:#78350F; color:#FCD34D; } [data-theme="dark"] .alert-info { background:#0D1E3B; border-color:#1E3A6E; color:#93C5FD; } /* ── Modals ──────────────────────────────────────────────────────── */ [data-theme="dark"] .modal-content { background: var(--av-surface) !important; border-color: var(--av-border) !important; color: var(--av-text) !important; } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--av-border) !important; } /* ── Dropdowns ───────────────────────────────────────────────────── */ [data-theme="dark"] .dropdown-menu { background: var(--av-surface) !important; border-color: var(--av-border-mid) !important; } [data-theme="dark"] .dropdown-item { color: var(--av-text) !important; } [data-theme="dark"] .dropdown-item:hover { background: rgba(255,45,135,.1) !important; } /* ── Scrollbars ──────────────────────────────────────────────────── */ [data-theme] * { scrollbar-color: var(--av-scrollbar-thumb) transparent; } [data-theme] ::-webkit-scrollbar-thumb { background: var(--av-scrollbar-thumb); border-radius: 4px; } [data-theme] ::-webkit-scrollbar { width: 6px; height: 6px; } /* ── Page heroes / gradient panels (admin) ───────────────────────── */ /* These use their own inline backgrounds — preserve them in dark, soften in light */ [data-theme="light"] .oa-hero, [data-theme="light"] .apps-hero, [data-theme="light"] .send-hero, [data-theme="light"] .side-head { background: linear-gradient(135deg, #2D1B4E 0%, #4A1942 55%, #7B1D4A 100%) !important; } /* ── DataTables ──────────────────────────────────────────────────── */ [data-theme="dark"] .dataTables_wrapper { color: var(--av-text) !important; } [data-theme="dark"] .dataTables_wrapper .dataTables_length, [data-theme="dark"] .dataTables_wrapper .dataTables_filter, [data-theme="dark"] .dataTables_wrapper .dataTables_info, [data-theme="dark"] .dataTables_wrapper .dataTables_paginate { color: var(--av-text-muted) !important; } [data-theme="dark"] .dataTables_wrapper .paginate_button { color: var(--av-text-muted) !important; } [data-theme="dark"] .dataTables_wrapper .paginate_button.current { background: rgba(255,45,135,.2) !important; border-color: rgba(255,45,135,.4) !important; color: var(--av-pink) !important; } /* ── Notification panel (light override) ────────────────────────── */ [data-theme="light"] #notif-panel { background: #fff !important; border-color: var(--av-border) !important; } /* ── Portal-specific ─────────────────────────────────────────────── */ [data-theme] .app-nav { background: var(--av-portal-nav-bg) !important; } [data-theme] .app-hero { background: var(--av-portal-nav-bg) !important; } [data-theme] body { background: var(--av-portal-surface) !important; color: var(--av-text) !important; } [data-theme] .card, [data-theme] .portal-card { background: var(--av-portal-card) !important; border-color: var(--av-portal-border) !important; } /* ── KPI strip ───────────────────────────────────────────────────── */ [data-theme="dark"] .kpi-card { background: var(--av-surface) !important; } [data-theme="dark"] .kpi-value { color: var(--av-text) !important; } [data-theme="dark"] .kpi-sub { color: var(--av-text-muted) !important; } /* ── Stat boxes ──────────────────────────────────────────────────── */ [data-theme="dark"] .oa-stat, [data-theme="dark"] .side-stat, [data-theme="dark"] .send-stat { background: rgba(255,255,255,.04) !important; border-color: var(--av-border) !important; } [data-theme="dark"] .oa-stat-value, [data-theme="dark"] .side-stat-value { color: var(--av-text) !important; } [data-theme="dark"] .oa-stat-label, [data-theme="dark"] .oa-stat-meta, [data-theme="dark"] .side-stat-label, [data-theme="dark"] .side-stat-sub { color: var(--av-text-muted) !important; } /* ── oa-note / send-note ─────────────────────────────────────────── */ [data-theme="dark"] .oa-note, [data-theme="dark"] .send-note { background: rgba(255,255,255,.04) !important; border-color: var(--av-border) !important; color: var(--av-text-mid) !important; } /* ── Filter / quick pills ────────────────────────────────────────── */ [data-theme="dark"] .qf-pill { background: var(--av-surface) !important; border-color: var(--av-border-mid) !important; color: var(--av-text-muted) !important; } [data-theme="dark"] .qf-pill:hover { background: var(--av-surface-2) !important; color: var(--av-text) !important; } [data-theme="dark"] .filter-input, [data-theme="dark"] .filter-select { background: var(--av-surface) !important; border-color: var(--av-border-mid) !important; color: var(--av-text) !important; } /* ════════════════════════════════════════════════════════════════════ THEME TOGGLE BUTTON — shared component ════════════════════════════════════════════════════════════════════ */ .av-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: none; border-radius: 10px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.75); cursor: pointer; font-size: 15px; transition: background .2s, transform .2s, color .2s; flex-shrink: 0; position: relative; overflow: hidden; } .av-theme-toggle:hover { background: rgba(255,45,135,.2); color: #fff; transform: rotate(18deg); } [data-theme="light"] .av-theme-toggle { background: rgba(123,47,190,.1); color: #7B2FBE; } [data-theme="light"] .av-theme-toggle:hover { background: rgba(123,47,190,.2); } /* Icon swap */ .av-theme-toggle .icon-sun { display: none; } .av-theme-toggle .icon-moon { display: block; } [data-theme="light"] .av-theme-toggle .icon-sun { display: block; } [data-theme="light"] .av-theme-toggle .icon-moon { display: none; } /* transition for smooth mode switch */ .av-theme-transitioning, .av-theme-transitioning * { transition: background-color .25s ease, border-color .25s ease, color .2s ease, box-shadow .2s ease !important; } /* ════════════════════════════════════════════════════════════════════ DUAL-MODE LOGO SWAP Both logo images are always in the DOM. theme.css controls which one is visible — zero JS flicker. ════════════════════════════════════════════════════════════════════ */ /* Dark (default): show dark logo, hide light */ .av-logo-dark { display: block !important; } .av-logo-light { display: none !important; } /* Light: show light logo, hide dark */ [data-theme="light"] .av-logo-dark { display: none !important; } [data-theme="light"] .av-logo-light { display: block !important; } /* Glow appropriate to context */ .av-logo-dark { filter: drop-shadow(0 0 14px rgba(255,45,135,.3)) drop-shadow(0 0 5px rgba(123,47,190,.25)); } .av-logo-light { filter: drop-shadow(0 2px 8px rgba(123,47,190,.18)); } /* Sidebar logo area */ .sb-logo-link .av-logo-dark, .sb-logo-link .av-logo-light { max-height: 36px; max-width: 160px; margin: 0; } /* Admin login card logo — centred */ .lp-logo .av-logo-dark, .lp-logo .av-logo-light { max-height: 72px; max-width: 260px; margin: 0 auto; } /* Portal — mobile logo (centred) */ .login-logo-mobile .av-logo-dark, .login-logo-mobile .av-logo-light { max-height: 48px; max-width: 220px; margin: 0 auto; } /* Portal — desktop left panel logo */ .login-left-logo .av-logo-dark, .login-left-logo .av-logo-light { max-height: 52px; max-width: 200px; margin: 0; } /* Admin header mobile logo */ .c-header-brand .av-logo-dark, .c-header-brand .av-logo-light { max-height: 30px; max-width: 140px; margin: 0 auto; } /* ════════════════════════════════════════════════════════════════════ DARK MODE — COMPREHENSIVE OVERRIDES These !important rules beat any per-page :root { } blocks that hardcode light colours. Applied only when data-theme="dark". ════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { color-scheme: dark; } /* ── Page background ─────────────────────────────────────────────── */ [data-theme="dark"] body.c-app, [data-theme="dark"] .c-body, [data-theme="dark"] .c-main, [data-theme="dark"] .c-wrapper, [data-theme="dark"] .container-fluid { background-color: #0E0B1A !important; color: #E2D9F3 !important; } /* ── Dashboard page header ───────────────────────────────────────── */ [data-theme="dark"] .dashboard-page-title { color: #F1ECF9 !important; } [data-theme="dark"] .dashboard-page-subtitle { color: #8B7EAA !important; } /* ── Pill / action buttons ───────────────────────────────────────── */ [data-theme="dark"] .dashboard-pill-btn { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.1) !important; color: #C4B5D9 !important; box-shadow: none !important; } [data-theme="dark"] .dashboard-pill-btn:hover { background: rgba(255,45,135,.12) !important; border-color: rgba(255,45,135,.3) !important; color: #FF6AB0 !important; } /* ── Filter bar ──────────────────────────────────────────────────── */ [data-theme="dark"] .dashboard-filter-bar { background: #160F2A !important; border-color: rgba(255,255,255,.08) !important; box-shadow: 0 4px 20px rgba(0,0,0,.3) !important; } [data-theme="dark"] .filter-panel { background: transparent !important; } [data-theme="dark"] .filter-group label { color: #8B7EAA !important; } [data-theme="dark"] .filter-group .form-control, [data-theme="dark"] .dashboard-filter-bar select, [data-theme="dark"] .dashboard-filter-bar input { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.1) !important; color: #E2D9F3 !important; } [data-theme="dark"] .filter-group .form-control:focus { border-color: rgba(255,45,135,.5) !important; box-shadow: 0 0 0 3px rgba(255,45,135,.1) !important; background: rgba(255,45,135,.06) !important; } [data-theme="dark"] .filter-toggle-btn { color: #C4B5D9 !important; background: transparent !important; } [data-theme="dark"] .dashboard-filter-actions .btn-primary { background: linear-gradient(135deg, #7B2FBE, #FF2D87) !important; border-color: transparent !important; box-shadow: 0 4px 16px rgba(255,45,135,.3) !important; } [data-theme="dark"] .dashboard-filter-actions .btn-default, [data-theme="dark"] .dashboard-filter-actions .btn-secondary { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.12) !important; color: #C4B5D9 !important; } /* ── Widget cards ────────────────────────────────────────────────── */ [data-theme="dark"] .av-widget-card { background: linear-gradient(180deg, #1C1433 0%, #170F2B 100%) !important; border-color: rgba(255,255,255,.07) !important; box-shadow: 0 8px 32px rgba(0,0,0,.4) !important; } [data-theme="dark"] .av-widget-card::after { box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important; } [data-theme="dark"] .av-widget-card:hover { border-color: rgba(255,45,135,.2) !important; box-shadow: 0 12px 40px rgba(0,0,0,.5) !important; } [data-theme="dark"] .av-widget-title { color: #E2D9F3 !important; } [data-theme="dark"] .av-widget-subtitle { color: #7B6E9A !important; } [data-theme="dark"] .av-widget-divider { background: linear-gradient(90deg, transparent, rgba(255,255,255,.07) 15%, rgba(255,255,255,.07) 85%, transparent) !important; } [data-theme="dark"] .av-widget-body { color: #C4B5D9 !important; } /* ── KPI cards ───────────────────────────────────────────────────── */ [data-theme="dark"] .kpi-card-modern { background: linear-gradient(160deg, #1E1538 0%, #170F2A 100%) !important; border-color: rgba(255,255,255,.07) !important; box-shadow: 0 10px 32px rgba(0,0,0,.4) !important; } [data-theme="dark"] .kpi-card-modern::after { box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.2) !important; } [data-theme="dark"] .kpi-card-modern:hover { border-color: rgba(255,45,135,.2) !important; } [data-theme="dark"] .kpi-label-modern { color: #7B6E9A !important; } [data-theme="dark"] .kpi-note { color: #8B7EAA !important; } [data-theme="dark"] .kpi-value-modern { color: #F1ECF9 !important; text-shadow: 0 0 24px rgba(255,45,135,.12) !important; } [data-theme="dark"] .kpi-footer { border-top-color: rgba(255,255,255,.07) !important; color: #7B6E9A !important; } [data-theme="dark"] .kpi-card-body { color: #C4B5D9 !important; } /* ── Chart widget headers ────────────────────────────────────────── */ [data-theme="dark"] .av-widget-header { color: #C4B5D9 !important; } /* ── Table widgets inside dark cards ────────────────────────────── */ [data-theme="dark"] .av-widget-card table, [data-theme="dark"] .av-widget-card .table { background: transparent !important; color: #C4B5D9 !important; } [data-theme="dark"] .av-widget-card thead th { background: rgba(255,255,255,.04) !important; border-bottom-color: rgba(255,255,255,.08) !important; color: #8B7EAA !important; } [data-theme="dark"] .av-widget-card tbody td { border-top-color: rgba(255,255,255,.05) !important; color: #C4B5D9 !important; } [data-theme="dark"] .av-widget-card tbody tr:hover td { background: rgba(255,45,135,.05) !important; } /* ── Section headers / labels ────────────────────────────────────── */ [data-theme="dark"] .section-header, [data-theme="dark"] .section-label, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: #C4B5D9 !important; } /* ── Bootstrap form controls (global) ───────────────────────────── */ [data-theme="dark"] .form-control { background-color: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.1) !important; color: #E2D9F3 !important; } [data-theme="dark"] .form-control:focus { background-color: rgba(255,45,135,.05) !important; border-color: rgba(255,45,135,.5) !important; color: #F1ECF9 !important; box-shadow: 0 0 0 3px rgba(255,45,135,.1) !important; } [data-theme="dark"] .form-control::placeholder { color: rgba(255,255,255,.25) !important; } [data-theme="dark"] .input-group-text { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.1) !important; color: #8B7EAA !important; } /* ── Datetimepicker / flatpickr ──────────────────────────────────── */ [data-theme="dark"] .bootstrap-datetimepicker-widget { background: #1C1433 !important; border-color: rgba(255,255,255,.1) !important; } [data-theme="dark"] .bootstrap-datetimepicker-widget table td, [data-theme="dark"] .bootstrap-datetimepicker-widget table th { color: #C4B5D9 !important; } [data-theme="dark"] .bootstrap-datetimepicker-widget table td.active, [data-theme="dark"] .bootstrap-datetimepicker-widget table td.active:hover { background: linear-gradient(135deg, #7B2FBE, #FF2D87) !important; color: #fff !important; } [data-theme="dark"] .bootstrap-datetimepicker-widget table td:hover { background: rgba(255,45,135,.12) !important; } /* ── Notification panel dark mode ────────────────────────────────── */ [data-theme="dark"] #notif-panel { background: #1C1433 !important; border-color: rgba(255,255,255,.1) !important; } [data-theme="dark"] .notif-item { border-bottom-color: rgba(255,255,255,.05) !important; } [data-theme="dark"] .notif-item:hover { background: rgba(255,45,135,.07) !important; } [data-theme="dark"] .notif-item.unread { background: rgba(123,47,190,.1) !important; } [data-theme="dark"] .notif-item-title { color: #E2D9F3 !important; } [data-theme="dark"] .notif-item-body { color: #8B7EAA !important; } [data-theme="dark"] .notif-item-time { color: #6B5E8A !important; } [data-theme="dark"] .notif-panel-footer { border-top-color: rgba(255,255,255,.06) !important; background: rgba(0,0,0,.15) !important; } [data-theme="dark"] .notif-empty { color: #7B6E9A !important; } /* ── Breadcrumbs / misc text ─────────────────────────────────────── */ [data-theme="dark"] .breadcrumb { background: transparent !important; } [data-theme="dark"] .breadcrumb-item, [data-theme="dark"] .breadcrumb-item a { color: #8B7EAA !important; } [data-theme="dark"] .breadcrumb-item.active { color: #C4B5D9 !important; } /* ── Bootstrap badges ────────────────────────────────────────────── */ [data-theme="dark"] .badge-light { background: rgba(255,255,255,.1) !important; color: #C4B5D9 !important; } [data-theme="dark"] .badge-secondary { background: rgba(255,255,255,.12) !important; color: #C4B5D9 !important; } /* ── Pagination ──────────────────────────────────────────────────── */ [data-theme="dark"] .page-item .page-link { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.08) !important; color: #C4B5D9 !important; } [data-theme="dark"] .page-item.active .page-link { background: linear-gradient(135deg, #7B2FBE, #FF2D87) !important; border-color: transparent !important; color: #fff !important; } [data-theme="dark"] .page-item.disabled .page-link { color: #6B5E8A !important; } /* ── DataTables wrapper ──────────────────────────────────────────── */ [data-theme="dark"] .dataTables_wrapper select, [data-theme="dark"] .dataTables_wrapper input { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.1) !important; color: #E2D9F3 !important; } [data-theme="dark"] .dt-buttons .btn { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.1) !important; color: #C4B5D9 !important; } [data-theme="dark"] .dt-buttons .btn:hover { background: rgba(255,45,135,.12) !important; color: #FF6AB0 !important; } /* ── Misc ────────────────────────────────────────────────────────── */ [data-theme="dark"] hr { border-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .text-dark { color: #E2D9F3 !important; } [data-theme="dark"] .text-muted { color: #7B6E9A !important; } [data-theme="dark"] .bg-white { background-color: #160F2A !important; } [data-theme="dark"] .bg-light { background-color: #1C1433 !important; } [data-theme="dark"] .border { border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .border-top { border-top-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .border-bottom { border-bottom-color: rgba(255,255,255,.08) !important; } /* ════════════════════════════════════════════════════════════════════ PAGE-LEVEL CSS VARIABLE OVERRIDES Each admin page defines its own :root { --navy, --white, --line... } These [data-theme="dark"] rules have higher specificity and beat them. ════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { /* Shared across loans, borrowers, applications, quotes pages */ --navy: #F1ECF9 !important; --navy-2: #E2D9F3 !important; --navy-mid: #C4B5D9 !important; --slate: #8B7EAA !important; --line: rgba(255,255,255,.08) !important; --bg: #0E0B1A !important; --white: #1C1433 !important; --surface: #160F2A !important; /* loanApplications/show.blade.php specific */ --teal: #00C8A0 !important; --blue: #60A5FA !important; --green: #34D399 !important; --amber: #FBBF24 !important; --red: #F87171 !important; --indigo: #A78BFA !important; } /* ── Loans / Applications / Borrowers pages — all use same pattern ── */ /* Page hero banners — keep dark gradient, just tweak */ [data-theme="dark"] .loans-hero, [data-theme="dark"] .apps-hero, [data-theme="dark"] .oa-hero, [data-theme="dark"] .send-hero { box-shadow: 0 18px 45px rgba(0,0,0,.4) !important; } /* KPI strip cards */ [data-theme="dark"] .kpi-card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; box-shadow: 0 4px 16px rgba(0,0,0,.3) !important; } [data-theme="dark"] .kpi-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.4) !important; } [data-theme="dark"] .kpi-value { color: #F1ECF9 !important; } [data-theme="dark"] .kpi-label { color: #8B7EAA !important; } [data-theme="dark"] .kpi-sub { color: #7B6E9A !important; } [data-theme="dark"] .kpi-accent { opacity: .8; } /* Filter panel */ [data-theme="dark"] .filter-panel { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; box-shadow: none !important; } [data-theme="dark"] .filter-label { color: #8B7EAA !important; } [data-theme="dark"] .filter-input, [data-theme="dark"] .filter-select { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.1) !important; color: #E2D9F3 !important; } [data-theme="dark"] .filter-input:focus, [data-theme="dark"] .filter-select:focus { border-color: rgba(255,45,135,.5) !important; box-shadow: 0 0 0 3px rgba(255,45,135,.1) !important; } [data-theme="dark"] .filter-btn-ghost { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; color: #C4B5D9 !important; } [data-theme="dark"] .filter-btn-ghost:hover { background: rgba(255,255,255,.1) !important; } [data-theme="dark"] .filter-btn-primary { background: linear-gradient(135deg, #7B2FBE, #FF2D87) !important; border-color: transparent !important; box-shadow: 0 4px 14px rgba(255,45,135,.3) !important; } /* Quick-filter pills */ [data-theme="dark"] .qf-pill { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.1) !important; color: #8B7EAA !important; } [data-theme="dark"] .qf-pill:hover { background: rgba(255,255,255,.09) !important; color: #E2D9F3 !important; } [data-theme="dark"] .qf-pill.active { background: linear-gradient(135deg, #7B2FBE, #FF2D87) !important; border-color: transparent !important; color: #fff !important; } /* Coloured pill active states */ [data-theme="dark"] .qf-pill.pill-red.active { background: linear-gradient(135deg,#7f1d1d,#dc2626) !important; } [data-theme="dark"] .qf-pill.pill-amber.active { background: linear-gradient(135deg,#78350f,#d97706) !important; } [data-theme="dark"] .qf-pill.pill-green.active { background: linear-gradient(135deg,#064e3b,#059669) !important; } [data-theme="dark"] .qf-pill.pill-blue.active { background: linear-gradient(135deg,#1e3a8a,#3b82f6) !important; } [data-theme="dark"] .qf-pill.pq-cfo.active { background: #5b21b6 !important; border-color: transparent !important; } [data-theme="dark"] .qf-pill.pq-analyst.active { background: #1d4ed8 !important; border-color: transparent !important; } [data-theme="dark"] .qf-pill.pq-approved.active { background: #059669 !important; border-color: transparent !important; } [data-theme="dark"] .qf-pill.pq-rejected.active { background: #dc2626 !important; border-color: transparent !important; } [data-theme="dark"] .qf-pill.pq-returned.active { background: #d97706 !important; border-color: transparent !important; } [data-theme="dark"] .qf-pill.pq-new.active { background: #475569 !important; border-color: transparent !important; } [data-theme="dark"] .qf-pill.pq-all.active { background: #0f172a !important; border-color: transparent !important; } /* Slider (days-in-default) */ [data-theme="dark"] .slider-wrap { background: rgba(239,68,68,.1) !important; border-color: rgba(239,68,68,.25) !important; } [data-theme="dark"] .slider-wrap.inactive { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.08) !important; } /* ── Table cards ──────────────────────────────────────────────────── */ [data-theme="dark"] .loans-table-card, [data-theme="dark"] .apps-table-card, [data-theme="dark"] .at-card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .loans-table-header, [data-theme="dark"] .apps-table-header { background: #160F2A !important; border-bottom-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .loans-table-title, [data-theme="dark"] .apps-table-title { color: #E2D9F3 !important; } [data-theme="dark"] .loans-table-meta, [data-theme="dark"] .apps-table-meta { color: #7B6E9A !important; } /* Table itself */ [data-theme="dark"] table.lt thead th, [data-theme="dark"] table.at thead th { background: #160F2A !important; border-bottom-color: rgba(255,255,255,.08) !important; color: #7B6E9A !important; } [data-theme="dark"] table.lt tbody td, [data-theme="dark"] table.at tbody td { border-bottom-color: rgba(255,255,255,.05) !important; color: #C4B5D9 !important; } [data-theme="dark"] table.lt tbody tr:hover, [data-theme="dark"] table.at tbody tr:hover { background: rgba(255,45,135,.04) !important; } /* Text helpers inside tables */ [data-theme="dark"] .loan-id, [data-theme="dark"] .loan-name, [data-theme="dark"] .loan-amt, [data-theme="dark"] .app-id, [data-theme="dark"] .app-name, [data-theme="dark"] .app-amt { color: #F1ECF9 !important; } [data-theme="dark"] .loan-ref, [data-theme="dark"] .loan-meta, [data-theme="dark"] .loan-fee, [data-theme="dark"] .app-ref, [data-theme="dark"] .app-meta { color: #7B6E9A !important; } /* Action buttons in tables */ [data-theme="dark"] .ab-view { background: rgba(37,99,235,.15) !important; border-color: rgba(37,99,235,.25) !important; color: #93C5FD !important; } [data-theme="dark"] .ab-send { background: rgba(5,150,105,.15) !important; border-color: rgba(5,150,105,.25) !important; color: #6EE7B7 !important; } [data-theme="dark"] .ab-review { background: rgba(217,119,6,.15) !important; border-color: rgba(217,119,6,.25) !important; color: #FCD34D !important; } [data-theme="dark"] .ab-edit { background: rgba(91,33,182,.15) !important; border-color: rgba(91,33,182,.25) !important; color: #C4B5FD !important; } [data-theme="dark"] .ab-del { background: rgba(220,38,38,.1) !important; border-color: rgba(220,38,38,.2) !important; color: #FCA5A5 !important; } [data-theme="dark"] .ab-disburse { background: #160F2A !important; border-color: rgba(255,255,255,.15) !important; color: #E2D9F3 !important; } [data-theme="dark"] .ab-resubmit { background: rgba(234,88,12,.12) !important; border-color: rgba(234,88,12,.25) !important; color: #FDBA74 !important; } /* Assign pills (analyst/cfo dots in loans list) */ [data-theme="dark"] .assign-pill { color: #8B7EAA !important; } /* Stage progress dots */ [data-theme="dark"] .stage-dot { background: rgba(255,255,255,.12) !important; } [data-theme="dark"] .stage-dot.done { background: #059669 !important; } [data-theme="dark"] .stage-dot.current { background: #3b82f6 !important; box-shadow: 0 0 0 2px rgba(59,130,246,.3) !important; } [data-theme="dark"] .stage-dot.reject { background: #dc2626 !important; } /* ── Loan show / oa-* classes ─────────────────────────────────────── */ [data-theme="dark"] .oa-wrap, [data-theme="dark"] .oa-shell { background: transparent !important; } [data-theme="dark"] .oa-card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; box-shadow: 0 8px 28px rgba(0,0,0,.35) !important; } [data-theme="dark"] .oa-card-header { background: linear-gradient(180deg, #1E1538 0%, #170F2B 100%) !important; border-bottom-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .oa-card-header h6 { color: #E2D9F3 !important; } [data-theme="dark"] .oa-card-header small { color: #7B6E9A !important; } [data-theme="dark"] .oa-stat { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .oa-stat-value { color: #F1ECF9 !important; } [data-theme="dark"] .oa-stat-label, [data-theme="dark"] .oa-stat-meta { color: #7B6E9A !important; } [data-theme="dark"] .oa-info-table th { background: rgba(255,255,255,.03) !important; color: #8B7EAA !important; border-bottom-color: rgba(255,255,255,.06) !important; } [data-theme="dark"] .oa-info-table td { color: #C4B5D9 !important; border-bottom-color: rgba(255,255,255,.05) !important; } [data-theme="dark"] .oa-note { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.08) !important; color: #C4B5D9 !important; } [data-theme="dark"] .oa-alert-warning { background: rgba(217,119,6,.12) !important; border-color: rgba(217,119,6,.3) !important; color: #FCD34D !important; } [data-theme="dark"] .oa-alert-danger { background: rgba(220,38,38,.1) !important; border-color: rgba(220,38,38,.25) !important; color: #FCA5A5 !important; } [data-theme="dark"] .oa-alert-success { background: rgba(5,150,105,.1) !important; border-color: rgba(5,150,105,.25) !important; color: #6EE7B7 !important; } [data-theme="dark"] .oa-alert-info { background: rgba(37,99,235,.1) !important; border-color: rgba(37,99,235,.25) !important; color: #93C5FD !important; } /* Side panel */ [data-theme="dark"] .side-panel { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; box-shadow: 0 12px 32px rgba(0,0,0,.4) !important; } [data-theme="dark"] .side-head { background: linear-gradient(135deg, #1A1228 0%, #241840 100%) !important; } [data-theme="dark"] .side-stat { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .side-stat-value { color: #F1ECF9 !important; } [data-theme="dark"] .side-stat-label, [data-theme="dark"] .side-stat-sub { color: #7B6E9A !important; } /* Comment boxes */ [data-theme="dark"] .comment-box { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .comment-meta { color: #8B7EAA !important; } [data-theme="dark"] .comment-text { color: #C4B5D9 !important; } /* ── NIM / rate highlights ─────────────────────────────────────────── */ [data-theme="dark"] .nim-positive { color: #34D399 !important; } [data-theme="dark"] .nim-negative { color: #F87171 !important; } /* ── Empty states ─────────────────────────────────────────────────── */ [data-theme="dark"] .empty-state { color: #7B6E9A !important; } [data-theme="dark"] .empty-state-icon { color: rgba(255,255,255,.1) !important; } /* ════════════════════════════════════════════════════════════════════ UNIVERSAL DARK MODE — ALL ADMIN PAGES Covers every page-specific CSS class across the entire admin panel. ════════════════════════════════════════════════════════════════════ */ /* ── Hero/header banner titles — ALWAYS WHITE ───────────────────── These live on dark gradient hero banners. Regardless of theme, the hero banner stays dark, so the title must always be white. ──────────────────────────────────────────────────────────────── */ .calc-title, .calc-subtitle, .loans-hero h1, .loans-hero p, .apps-hero h1, .apps-hero p, .oa-title, .oa-subtitle, .oa-kicker, .bc-title, .bc-subtitle, .bc-kicker, .be-title, .be-subtitle, .be-kicker, .borrower-title, .borrower-subtitle, .borrower-kicker, .bi-hero-title, .bi-hero-sub, .bi-hero-kicker, .cp-hero h1, .cp-hero p, .cp-hero-title, .rt-title, .rt-subtitle, .rt-kicker, .rpt-title, .rpt-subtitle, .lc-title, .lc-section-title, .loan-show-title, .loan-show-subtitle, .loan-edit-title, .loan-edit-subtitle, .st-hero-title, .st-hero-sub, .sf-hero-title, .sf-hero-sub, .cf-hero-title, .cf-hero-sub, .cv-hero-title, .cv-hero-sub, .coa-hero-title, .coa-section-title, .gf-hero-title, .gf-hero-sub, .pf-hero-title, .pf-hero-sub, .perm-hero-title, .perm-hero-sub, .rf-hero-title, .rf-hero-sub, .rl-hero-title, .rl-hero-sub, .audit-hero h1, .audit-hero p, .up-hero-title, .up-hero-sub, .de-doc-title, .doc-title, .doc-group-title, .inbox-title, .quote-title, .quote-subtitle, .send-title, .send-subtitle, .send-kicker, .dashboard-page-title, .fac-title, .fac-subtitle, .kyc-title, .kyc-subtitle, .cm-hero-title, .loans-hd-title { color: #fff !important; } /* ── Also ensure h1 inside ANY dark hero gradient stays white ── */ [class*="-hero"] h1, [class*="-hero"] h2, [class*="-hero"] .kicker, [class*="hero-"] h1 { color: #fff !important; } /* ════════════════════════════════════════════════════════════════════ CALCULATOR PAGE (loan-calculator/index.blade.php) ════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .calc-shell { background: transparent !important; } [data-theme="dark"] .lc-card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; box-shadow: 0 8px 28px rgba(0,0,0,.35) !important; } [data-theme="dark"] .lc-card .card-body, [data-theme="dark"] .lc-card .card-header { background: transparent !important; } [data-theme="dark"] .kpi-cell { color: #F1ECF9 !important; } [data-theme="dark"] .kl { color: #8B7EAA !important; } [data-theme="dark"] .kv { font-weight: 800; color: #F1ECF9 !important; } [data-theme="dark"] .apr-pill { background: rgba(255,45,135,.12) !important; color: #FF6AB0 !important; } [data-theme="dark"] .apr-label { color: #8B7EAA !important; } [data-theme="dark"] .apr-val { color: #F1ECF9 !important; } [data-theme="dark"] .borrower-search-wrap input, [data-theme="dark"] .borrower-search-wrap .form-control { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.1) !important; color: #E2D9F3 !important; } [data-theme="dark"] .borrower-results { background: #1C1433 !important; border-color: rgba(255,255,255,.1) !important; box-shadow: 0 8px 24px rgba(0,0,0,.4) !important; } [data-theme="dark"] .borrower-result-item { color: #C4B5D9 !important; } [data-theme="dark"] .borrower-result-item:hover { background: rgba(255,45,135,.08) !important; } [data-theme="dark"] .borrower-result-name { color: #F1ECF9 !important; } [data-theme="dark"] .borrower-result-meta { color: #8B7EAA !important; } [data-theme="dark"] .borrower-preview-card { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.08) !important; color: #C4B5D9 !important; } [data-theme="dark"] .fee-row { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.07) !important; color: #C4B5D9 !important; } [data-theme="dark"] .hero-chip { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.12) !important; color: #fff !important; } /* Preview panel — dark mode */ [data-theme="dark"] .preview-panel { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; box-shadow: 0 12px 30px rgba(0,0,0,.5) !important; } [data-theme="dark"] .preview-header { background: linear-gradient(135deg, #0A1628 0%, #1F1235 100%) !important; } [data-theme="dark"] .preview-header h6 { color: #fff !important; } [data-theme="dark"] .preview-badge { background: rgba(0,179,134,.2) !important; color: #A7F3D0 !important; } [data-theme="dark"] .kpi-strip { border-bottom-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .kpi-cell { border-right-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .preview-body { color: #E2D9F3 !important; } [data-theme="dark"] #preview-empty { color: #8B7EAA !important; } [data-theme="dark"] #preview-empty i { color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .summary-mini .mini-card { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .mini-label { color: #8B7EAA !important; } [data-theme="dark"] .mini-value { color: #F1ECF9 !important; } [data-theme="dark"] .preview-footer { background: rgba(255,255,255,.03) !important; border-top-color: rgba(255,255,255,.08) !important; color: #8B7EAA !important; } /* Preview panel — light mode (explicit white text in header) */ [data-theme="light"] .preview-panel { background: #ffffff !important; border-color: #E4EBF3 !important; } [data-theme="light"] .preview-header { background: linear-gradient(135deg, #0A2540 0%, #0D3060 100%) !important; } [data-theme="light"] .preview-header h6 { color: #ffffff !important; } [data-theme="light"] .preview-badge { background: rgba(0,179,134,.18) !important; color: #A7F3D0 !important; } [data-theme="light"] .kpi-strip { border-bottom-color: #E4EBF3 !important; } [data-theme="light"] .kpi-cell { border-right-color: #E4EBF3 !important; } [data-theme="light"] .mini-label { color: #64748B !important; } [data-theme="light"] .mini-value { color: #0A2540 !important; } /* ════════════════════════════════════════════════════════════════════ CREDITOR / FUNDING / P&L / COVENANTS PAGES ════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .cp-page { background: transparent !important; } [data-theme="dark"] .cp-card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; box-shadow: 0 6px 20px rgba(0,0,0,.3) !important; } [data-theme="dark"] .cp-card-hd { background: #160F2A !important; border-bottom-color: rgba(255,255,255,.07) !important; color: #E2D9F3 !important; } [data-theme="dark"] .cp-card-title { color: #E2D9F3 !important; } [data-theme="dark"] .cp-kpis { background: transparent !important; } [data-theme="dark"] .cp-kpi { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .cp-kpi-val { color: #F1ECF9 !important; } [data-theme="dark"] .cp-kpi-label { color: #8B7EAA !important; } [data-theme="dark"] .cp-kpi-sub { color: #7B6E9A !important; } [data-theme="dark"] .cp-tabs { background: #160F2A !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .cp-tab { color: #8B7EAA !important; border-color: transparent !important; } [data-theme="dark"] .cp-tab:hover { background: rgba(255,255,255,.06) !important; color: #E2D9F3 !important; } [data-theme="dark"] .cp-tab.active { background: linear-gradient(135deg, #7B2FBE, #FF2D87) !important; color: #fff !important; border-color: transparent !important; } [data-theme="dark"] .cp-table thead th { background: #160F2A !important; border-color: rgba(255,255,255,.07) !important; color: #7B6E9A !important; } [data-theme="dark"] .cp-table tbody td { border-color: rgba(255,255,255,.05) !important; color: #C4B5D9 !important; } [data-theme="dark"] .cp-table tbody tr:hover { background: rgba(255,45,135,.04) !important; } [data-theme="dark"] .cp-covenant-grid { background: transparent !important; } [data-theme="dark"] .cov-card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .cov-label { color: #E2D9F3 !important; } [data-theme="dark"] .cov-ok { background: rgba(5,150,105,.15) !important; color: #6EE7B7 !important; } [data-theme="dark"] .cov-fail { background: rgba(220,38,38,.15) !important; color: #FCA5A5 !important; } [data-theme="dark"] .fac-title { color: #E2D9F3 !important; } [data-theme="dark"] .fac-subtitle { color: #8B7EAA !important; } [data-theme="dark"] .stat-val { color: #F1ECF9 !important; } [data-theme="dark"] .stat-lbl { color: #8B7EAA !important; } [data-theme="dark"] .stat-cell { border-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .stat-grid { background: transparent !important; } [data-theme="dark"] .spread-row { background: rgba(255,255,255,.03) !important; border-color: rgba(255,255,255,.06) !important; } [data-theme="dark"] .spread-label { color: #8B7EAA !important; } [data-theme="dark"] .spread-val { color: #F1ECF9 !important; } [data-theme="dark"] .spread-track { background: rgba(255,255,255,.1) !important; } [data-theme="dark"] .chart-box { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } /* ════════════════════════════════════════════════════════════════════ PIPELINE PAGE ════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .pipeline-wrap, [data-theme="dark"] .pipeline-summary { background: transparent !important; } [data-theme="dark"] .stage-card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; box-shadow: 0 6px 20px rgba(0,0,0,.3) !important; } [data-theme="dark"] .stage-card-header { background: #160F2A !important; border-bottom-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .stage-card-body { color: #C4B5D9 !important; } [data-theme="dark"] .stage-num { background: rgba(255,255,255,.08) !important; color: #8B7EAA !important; } [data-theme="dark"] .stage-meta { color: #8B7EAA !important; } [data-theme="dark"] .stage-drag-handle { color: #7B6E9A !important; } [data-theme="dark"] .stage-connector { border-color: rgba(255,255,255,.1) !important; } [data-theme="dark"] .add-stage-card { background: rgba(255,255,255,.03) !important; border-color: rgba(255,255,255,.1) !important; color: #8B7EAA !important; } [data-theme="dark"] .add-stage-card:hover { background: rgba(255,45,135,.07) !important; border-color: rgba(255,45,135,.3) !important; color: #FF6AB0 !important; } [data-theme="dark"] .role-tag { background: rgba(123,47,190,.2) !important; color: #C4B5FD !important; border-color: rgba(123,47,190,.3) !important; } [data-theme="dark"] .role-tags { background: transparent !important; } [data-theme="dark"] .role-check-item { color: #C4B5D9 !important; } [data-theme="dark"] .ps-item { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .ps-lbl { color: #8B7EAA !important; } [data-theme="dark"] .ps-val { color: #F1ECF9 !important; } [data-theme="dark"] .lp-input { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.1) !important; color: #E2D9F3 !important; } [data-theme="dark"] .lp-label { color: #8B7EAA !important; } [data-theme="dark"] .stage-flag.flag-initial { background: rgba(37,99,235,.2) !important; color: #93C5FD !important; } [data-theme="dark"] .stage-flag.flag-approved { background: rgba(5,150,105,.2) !important; color: #6EE7B7 !important; } [data-theme="dark"] .stage-flag.flag-rejected { background: rgba(220,38,38,.2) !important; color: #FCA5A5 !important; } [data-theme="dark"] .stage-flag.flag-auto { background: rgba(245,158,11,.2) !important; color: #FCD34D !important; } [data-theme="dark"] .stage-flag.flag-inactive { background: rgba(255,255,255,.1)!important; color: #8B7EAA !important; } /* Pipeline modal */ [data-theme="dark"] .modal-content { background: #1C1433 !important; border-color: rgba(255,255,255,.1) !important; } [data-theme="dark"] .modal-header { background: #160F2A !important; border-bottom-color: rgba(255,255,255,.08) !important; color: #E2D9F3 !important; } [data-theme="dark"] .modal-body { color: #C4B5D9 !important; } [data-theme="dark"] .modal-footer { background: #160F2A !important; border-top-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .modal-title { color: #F1ECF9 !important; } /* ════════════════════════════════════════════════════════════════════ SETTINGS PAGE (st-* prefix) ════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .st-page { background: transparent !important; } [data-theme="dark"] .st-panel { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .st-card { background: #160F2A !important; border-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .st-card-header { background: rgba(255,255,255,.03) !important; border-bottom-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .st-card-title { color: #E2D9F3 !important; } [data-theme="dark"] .st-card-sub { color: #8B7EAA !important; } [data-theme="dark"] .st-card-icon { opacity: .85; } [data-theme="dark"] .st-card-body { color: #C4B5D9 !important; } [data-theme="dark"] .st-label { color: #8B7EAA !important; } [data-theme="dark"] .st-hint { color: #7B6E9A !important; } [data-theme="dark"] .st-input { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.1) !important; color: #E2D9F3 !important; } [data-theme="dark"] .st-input:focus { border-color: rgba(255,45,135,.5) !important; box-shadow: 0 0 0 3px rgba(255,45,135,.1) !important; } [data-theme="dark"] .st-tabs { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .st-tab { color: #8B7EAA !important; } [data-theme="dark"] .st-tab.active { background: linear-gradient(135deg, #7B2FBE, #FF2D87) !important; color: #fff !important; } [data-theme="dark"] .st-save { background: linear-gradient(135deg, #7B2FBE, #FF2D87) !important; border-color: transparent !important; box-shadow: 0 4px 16px rgba(255,45,135,.3) !important; } [data-theme="dark"] .st-row { border-color: rgba(255,255,255,.06) !important; } [data-theme="dark"] .logo-preview-box { background: #160F2A !important; border-color: rgba(255,255,255,.1) !important; } [data-theme="dark"] .st-toggle-wrap { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .st-toggle-label { color: #E2D9F3 !important; } [data-theme="dark"] .st-toggle-hint { color: #8B7EAA !important; } [data-theme="dark"] .st-toggle-info { color: #7B6E9A !important; } [data-theme="dark"] .st-stat-pill { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.1) !important; } [data-theme="dark"] .st-stat-num { color: #F1ECF9 !important; } [data-theme="dark"] .st-stat-lbl { color: #8B7EAA !important; } /* ════════════════════════════════════════════════════════════════════ BORROWER PAGES (bc-* create/edit, bp-* show, borrower-* show) ════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .bc-card, [data-theme="dark"] .be-card, [data-theme="dark"] .bp-card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; box-shadow: 0 6px 20px rgba(0,0,0,.3) !important; } [data-theme="dark"] .bc-card-header, [data-theme="dark"] .be-card-header, [data-theme="dark"] .bp-card-header { background: #160F2A !important; border-bottom-color: rgba(255,255,255,.07) !important; color: #E2D9F3 !important; } [data-theme="dark"] .bc-card-body, [data-theme="dark"] .be-card-body, [data-theme="dark"] .bp-card-body { color: #C4B5D9 !important; } [data-theme="dark"] .bc-label, [data-theme="dark"] .be-label { color: #8B7EAA !important; } [data-theme="dark"] .bc-mini-card, [data-theme="dark"] .be-mini-card { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .bc-mini-label, [data-theme="dark"] .be-mini-label { color: #8B7EAA !important; } [data-theme="dark"] .bc-mini-value, [data-theme="dark"] .be-mini-value { color: #F1ECF9 !important; } [data-theme="dark"] .bc-pill-tabs, [data-theme="dark"] .be-pill-tabs { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .bc-pill-tab, [data-theme="dark"] .be-pill-tab { color: #8B7EAA !important; } [data-theme="dark"] .bc-pill-tab.active, [data-theme="dark"] .be-pill-tab.active { background: linear-gradient(135deg, #7B2FBE, #FF2D87) !important; color: #fff !important; } [data-theme="dark"] .bc-select, [data-theme="dark"] .be-select, [data-theme="dark"] .bc-textarea, [data-theme="dark"] .be-textarea { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.1) !important; color: #E2D9F3 !important; } [data-theme="dark"] .bc-note, [data-theme="dark"] .bp-soft-note { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.07) !important; color: #C4B5D9 !important; } [data-theme="dark"] .bc-submit-wrap, [data-theme="dark"] .be-submit-wrap { background: #160F2A !important; border-top-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .bp-data-table th { background: #160F2A !important; color: #7B6E9A !important; border-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .bp-data-table td { color: #C4B5D9 !important; border-color: rgba(255,255,255,.05) !important; } [data-theme="dark"] .info-table th { background: rgba(255,255,255,.03) !important; color: #8B7EAA !important; border-color: rgba(255,255,255,.06) !important; } [data-theme="dark"] .info-table td { color: #C4B5D9 !important; border-color: rgba(255,255,255,.05) !important; } [data-theme="dark"] .bg-teal-soft { background: rgba(0,179,134,.12) !important; } [data-theme="dark"] .bg-indigo-soft { background: rgba(99,102,241,.12) !important; } [data-theme="dark"] .bg-amber-soft { background: rgba(245,158,11,.12) !important; } [data-theme="dark"] .bg-red-soft { background: rgba(239,68,68,.12) !important; } [data-theme="dark"] .bg-navy-soft { background: rgba(10,37,64,.35) !important; } /* ════════════════════════════════════════════════════════════════════ RATE TABLES (rt-*) ════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .rt-card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; box-shadow: 0 6px 20px rgba(0,0,0,.3) !important; } [data-theme="dark"] .rt-card-header { background: #160F2A !important; border-bottom-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .rt-card-title { color: #E2D9F3 !important; } [data-theme="dark"] .rt-card-body { color: #C4B5D9 !important; } [data-theme="dark"] .rt-stat { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .rt-stat-label { color: #8B7EAA !important; } [data-theme="dark"] .rt-stat-meta { color: #7B6E9A !important; } [data-theme="dark"] .rt-info-table th { background: rgba(255,255,255,.03) !important; color: #8B7EAA !important; border-color: rgba(255,255,255,.06) !important; } [data-theme="dark"] .rt-info-table td { color: #C4B5D9 !important; border-color: rgba(255,255,255,.05) !important; } [data-theme="dark"] .rt-loan-item { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .rt-loan-title { color: #E2D9F3 !important; } [data-theme="dark"] .rt-loan-sub { color: #8B7EAA !important; } [data-theme="dark"] .rt-empty { background: rgba(255,255,255,.03) !important; border-color: rgba(255,255,255,.07) !important; color: #8B7EAA !important; } [data-theme="dark"] .rt-chip { background: rgba(255,255,255,.07) !important; color: #C4B5D9 !important; } [data-theme="dark"] .rt-badge-gray { background: rgba(255,255,255,.08) !important; color: #C4B5D9 !important; } [data-theme="dark"] .rt-badge-blue { background: rgba(37,99,235,.2) !important; color: #93C5FD !important; } [data-theme="dark"] .rt-badge-green { background: rgba(5,150,105,.2) !important; color: #6EE7B7 !important; } [data-theme="dark"] .rt-badge-amber { background: rgba(245,158,11,.2) !important; color: #FCD34D !important; } [data-theme="dark"] .rt-badge-red { background: rgba(220,38,38,.2) !important; color: #FCA5A5 !important; } [data-theme="dark"] .rt-side-box-title { color: #E2D9F3 !important; } [data-theme="dark"] .rt-side-box-value { color: #F1ECF9 !important; } /* ════════════════════════════════════════════════════════════════════ BANK IMPORT (bi-*) ════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .bi-page { background: transparent !important; } [data-theme="dark"] .bi-upload-card, [data-theme="dark"] .bi-history-card, [data-theme="dark"] .bi-how-card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; box-shadow: 0 6px 20px rgba(0,0,0,.3) !important; } [data-theme="dark"] .bi-upload-header, [data-theme="dark"] .bi-history-header { background: #160F2A !important; border-bottom-color: rgba(255,255,255,.07) !important; color: #E2D9F3 !important; } [data-theme="dark"] .bi-upload-body { color: #C4B5D9 !important; } [data-theme="dark"] .bi-label { color: #8B7EAA !important; } [data-theme="dark"] .bi-input { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.1) !important; color: #E2D9F3 !important; } [data-theme="dark"] .bi-submit { background: linear-gradient(135deg, #7B2FBE, #FF2D87) !important; border-color: transparent !important; } [data-theme="dark"] .bi-how-icon { opacity: .8; } [data-theme="dark"] .bi-how-title { color: #E2D9F3 !important; } [data-theme="dark"] .bi-how-desc { color: #8B7EAA !important; } [data-theme="dark"] .bi-table thead th { background: #160F2A !important; color: #7B6E9A !important; border-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .bi-table tbody td { color: #C4B5D9 !important; border-color: rgba(255,255,255,.05) !important; } [data-theme="dark"] .bi-alert { background: rgba(245,158,11,.12) !important; border-color: rgba(245,158,11,.25) !important; color: #FCD34D !important; } [data-theme="dark"] .bi-dedup-badge { background: rgba(5,150,105,.15) !important; color: #6EE7B7 !important; } /* ════════════════════════════════════════════════════════════════════ AUDIT PAGE ════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .audit-wrap { background: transparent !important; } [data-theme="dark"] .audit-stats { background: transparent !important; } [data-theme="dark"] .audit-stat { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .audit-stat-val { color: #F1ECF9 !important; } [data-theme="dark"] .audit-stat-label { color: #8B7EAA !important; } [data-theme="dark"] .cat-section { background: transparent !important; } [data-theme="dark"] .cat-section-label { color: #8B7EAA !important; } [data-theme="dark"] .cat-btn { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.09) !important; color: #C4B5D9 !important; } [data-theme="dark"] .cat-btn.active { background: linear-gradient(135deg, #7B2FBE, #FF2D87) !important; color: #fff !important; border-color: transparent !important; } [data-theme="dark"] .cat-label { color: #C4B5D9 !important; } [data-theme="dark"] .cat-count { background: rgba(255,255,255,.1) !important; color: #8B7EAA !important; } [data-theme="dark"] .act-b { border-color: rgba(255,255,255,.07) !important; } /* Audit action colour-coding — keep the colours, darken the bg */ [data-theme="dark"] .a-created { background: rgba(5,150,105,.12) !important; border-color: rgba(5,150,105,.25) !important; } [data-theme="dark"] .a-updated { background: rgba(37,99,235,.12) !important; border-color: rgba(37,99,235,.25) !important; } [data-theme="dark"] .a-deleted { background: rgba(220,38,38,.12) !important; border-color: rgba(220,38,38,.25) !important; } [data-theme="dark"] .a-login { background: rgba(99,102,241,.12) !important; border-color: rgba(99,102,241,.25)!important; } [data-theme="dark"] .a-logout { background: rgba(255,255,255,.05)!important; border-color: rgba(255,255,255,.1)!important; } [data-theme="dark"] .a-disbursed { background: rgba(217,119,6,.12) !important; border-color: rgba(217,119,6,.25) !important; } [data-theme="dark"] .a-approved { background: rgba(5,150,105,.12) !important; border-color: rgba(5,150,105,.25) !important; } [data-theme="dark"] .a-rejected { background: rgba(220,38,38,.12) !important; border-color: rgba(220,38,38,.25) !important; } /* ════════════════════════════════════════════════════════════════════ QUOTES PAGE (qt-*) ════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .qt-card-title { color: #E2D9F3 !important; } [data-theme="dark"] .quote-title { color: #F1ECF9 !important; } [data-theme="dark"] .quote-subtitle { color: #8B7EAA !important; } [data-theme="dark"] .b-draft { background: rgba(255,255,255,.08) !important; color: #C4B5D9 !important; } [data-theme="dark"] .b-approved { background: rgba(5,150,105,.2) !important; color: #6EE7B7 !important; } [data-theme="dark"] .b-rejected { background: rgba(220,38,38,.2) !important; color: #FCA5A5 !important; } [data-theme="dark"] .b-revised { background: rgba(245,158,11,.2) !important; color: #FCD34D !important; } [data-theme="dark"] .b-accepted { background: rgba(99,102,241,.2) !important; color: #C4B5FD !important; } [data-theme="dark"] .b-joint { background: rgba(99,102,241,.15)!important; color: #A5B4FC !important; } /* ════════════════════════════════════════════════════════════════════ USERS / ROLES / PERMISSIONS (rv-*, rpt-*, perm-*, sf-*) ════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .rv-card, [data-theme="dark"] .rpt-card, [data-theme="dark"] .sf-card, [data-theme="dark"] .ue-card, [data-theme="dark"] .up-card, [data-theme="dark"] .us-card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .rv-meta-label, [data-theme="dark"] .us-row-label { color: #8B7EAA !important; } [data-theme="dark"] .rv-meta-value, [data-theme="dark"] .us-row-value { color: #E2D9F3 !important; } [data-theme="dark"] .rv-perm-chip { background: rgba(99,102,241,.15) !important; color: #C4B5FD !important; border-color: rgba(99,102,241,.25) !important; } [data-theme="dark"] .rv-perms-title { color: #E2D9F3 !important; } [data-theme="dark"] .rv-footer { border-top-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .access-row { border-color: rgba(255,255,255,.06) !important; } [data-theme="dark"] .access-label { color: #C4B5D9 !important; } [data-theme="dark"] .access-badge { background: rgba(255,255,255,.06) !important; } [data-theme="dark"] .access-icon { color: #8B7EAA !important; } [data-theme="dark"] .access-yes { color: #6EE7B7 !important; } [data-theme="dark"] .access-no { color: #6B5E8A !important; } /* ════════════════════════════════════════════════════════════════════ LOAN SHOW (ls-*, sched, loan-*) ════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .sched { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .sched thead th { background: #160F2A !important; color: #7B6E9A !important; border-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .sched tbody td { color: #C4B5D9 !important; border-color: rgba(255,255,255,.05) !important; } [data-theme="dark"] .badge-paid { background: rgba(5,150,105,.2) !important; color: #6EE7B7 !important; } [data-theme="dark"] .badge-due { background: rgba(245,158,11,.2) !important; color: #FCD34D !important; } [data-theme="dark"] .badge-late { background: rgba(220,38,38,.2) !important; color: #FCA5A5 !important; } [data-theme="dark"] .badge-pending { background: rgba(255,255,255,.08)!important; color: #C4B5D9 !important; } [data-theme="dark"] .badge-partial { background: rgba(99,102,241,.2) !important; color: #C4B5FD !important; } [data-theme="dark"] .s-completed { color: #34D399 !important; } [data-theme="dark"] .s-defaulted { color: #F87171 !important; } /* ════════════════════════════════════════════════════════════════════ GENERIC SHARED PATTERNS (appear across multiple pages) ════════════════════════════════════════════════════════════════════ */ /* Section labels / headings */ [data-theme="dark"] .section-title, [data-theme="dark"] .section-heading, [data-theme="dark"] .sec-label, [data-theme="dark"] .section-label { color: #8B7EAA !important; } /* Any card not yet covered */ [data-theme="dark"] [class$="-card"]:not([class*="kpi-card-modern"]):not(.login-root):not(.lp-card) { background: #1C1433; border-color: rgba(255,255,255,.08); } [data-theme="dark"] [class$="-card-header"] { background: #160F2A; border-bottom-color: rgba(255,255,255,.07); color: #E2D9F3; } [data-theme="dark"] [class$="-card-body"], [data-theme="dark"] [class$="-card-title"] { color: #E2D9F3; } /* Any -hero with a gradient (keep gradient, ensure text is white) */ [data-theme="dark"] [class$="-hero"], [data-theme="dark"] [class*="-hero "] { color: #fff; } [data-theme="dark"] [class$="-hero"] h1, [data-theme="dark"] [class$="-hero"] h2, [data-theme="dark"] [class$="-hero"] p { color: rgba(255,255,255,.9) !important; } [data-theme="dark"] [class$="-hero"] small, [data-theme="dark"] [class$="-hero"] span { color: rgba(255,255,255,.7); } /* Tip/warning boxes */ [data-theme="dark"] .tip-box { background: rgba(37,99,235,.1) !important; border-color: rgba(37,99,235,.25) !important; color: #93C5FD !important; } [data-theme="dark"] .tip-box-warn { background: rgba(245,158,11,.1) !important; border-color: rgba(245,158,11,.25) !important; color: #FCD34D !important; } [data-theme="dark"] .tip-title { color: inherit !important; } [data-theme="dark"] .warning-box { background: rgba(245,158,11,.1) !important; border-color: rgba(245,158,11,.25) !important; } /* Summary/sticky panels */ [data-theme="dark"] .sticky-submit-wrap, [data-theme="dark"] .sticky-summary { background: #160F2A !important; border-top-color: rgba(255,255,255,.07) !important; box-shadow: 0 -4px 20px rgba(0,0,0,.3) !important; } [data-theme="dark"] .summary-card { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .summary-stat-label { color: #8B7EAA !important; } [data-theme="dark"] .summary-stat-value { color: #F1ECF9 !important; } /* Util / nav bars */ [data-theme="dark"] .util-bar { background: #160F2A !important; border-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .action-bar { background: #160F2A !important; border-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .action-panel-blue { background: rgba(37,99,235,.1) !important; border-color: rgba(37,99,235,.2) !important; } [data-theme="dark"] .action-panel-green { background: rgba(5,150,105,.1) !important; border-color: rgba(5,150,105,.2) !important; } [data-theme="dark"] .action-title-blue { color: #93C5FD !important; } [data-theme="dark"] .action-title-green { color: #6EE7B7 !important; } /* Bootstrap btn-default / btn-secondary everywhere */ [data-theme="dark"] .btn-default, [data-theme="dark"] .btn-secondary { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.12) !important; color: #C4B5D9 !important; } [data-theme="dark"] .btn-default:hover, [data-theme="dark"] .btn-secondary:hover { background: rgba(255,255,255,.12) !important; color: #F1ECF9 !important; } [data-theme="dark"] .btn-outline-secondary { border-color: rgba(255,255,255,.2) !important; color: #C4B5D9 !important; } [data-theme="dark"] .btn-outline-secondary:hover { background: rgba(255,255,255,.08) !important; color: #F1ECF9 !important; } [data-theme="dark"] .btn-outline-primary { border-color: rgba(255,45,135,.4) !important; color: #FF6AB0 !important; } [data-theme="dark"] .btn-outline-primary:hover { background: rgba(255,45,135,.12) !important; } [data-theme="dark"] .btn-primary { background: linear-gradient(135deg, #7B2FBE, #FF2D87) !important; border-color: transparent !important; } [data-theme="dark"] .btn-success { background: linear-gradient(135deg, #065f46, #059669) !important; border-color: transparent !important; } [data-theme="dark"] .btn-info { background: rgba(37,99,235,.8) !important; border-color: transparent !important; } [data-theme="dark"] .btn-warning { background: rgba(217,119,6,.85) !important; border-color: transparent !important; color: #fff !important; } /* Inline status badges */ [data-theme="dark"] .lb-slate { background: rgba(255,255,255,.08) !important; color: #C4B5D9 !important; } [data-theme="dark"] .lb-blue { background: rgba(37,99,235,.18) !important; color: #93C5FD !important; } [data-theme="dark"] .lb-green { background: rgba(5,150,105,.18) !important; color: #6EE7B7 !important; } [data-theme="dark"] .lb-red { background: rgba(220,38,38,.18) !important; color: #FCA5A5 !important; } [data-theme="dark"] .lb-amber { background: rgba(245,158,11,.18) !important; color: #FCD34D !important; } [data-theme="dark"] .lb-indigo { background: rgba(99,102,241,.18) !important; color: #C4B5FD !important; } [data-theme="dark"] .lb-teal { background: rgba(0,179,134,.18) !important; color: #6EE7B7 !important; } [data-theme="dark"] .lb-navy { background: rgba(255,255,255,.08) !important; color: #C4B5D9 !important; } /* oa-badge classes used on application show page */ [data-theme="dark"] .oa-badge-gray { background: rgba(255,255,255,.08) !important; color: #C4B5D9 !important; } [data-theme="dark"] .oa-badge-blue { background: rgba(37,99,235,.18) !important; color: #93C5FD !important; } [data-theme="dark"] .oa-badge-indigo { background: rgba(99,102,241,.18) !important; color: #C4B5FD !important; } [data-theme="dark"] .oa-badge-amber { background: rgba(245,158,11,.18) !important; color: #FCD34D !important; } [data-theme="dark"] .oa-badge-green { background: rgba(5,150,105,.18) !important; color: #6EE7B7 !important; } [data-theme="dark"] .oa-badge-red { background: rgba(220,38,38,.18) !important; color: #FCA5A5 !important; } [data-theme="dark"] .oa-badge-soft { background: rgba(255,255,255,.06) !important; color: #C4B5D9 !important; } /* Verified chips */ [data-theme="dark"] .verified-chip { background: rgba(255,255,255,.07) !important; color: #C4B5D9 !important; } [data-theme="dark"] .verified-yes { background: rgba(5,150,105,.15) !important; color: #6EE7B7 !important; } [data-theme="dark"] .verified-no { background: rgba(220,38,38,.12) !important; color: #FCA5A5 !important; } /* Token pills (document editor) */ [data-theme="dark"] .token-pill { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.1) !important; color: #C4B5D9 !important; } [data-theme="dark"] .token-borrower{ background: rgba(0,179,134,.15) !important; color: #6EE7B7 !important; } [data-theme="dark"] .token-loan { background: rgba(37,99,235,.15) !important; color: #93C5FD !important; } [data-theme="dark"] .token-system { background: rgba(99,102,241,.15) !important; color: #C4B5FD !important; } [data-theme="dark"] .token-schedule{ background: rgba(245,158,11,.15) !important; color: #FCD34D !important; } [data-theme="dark"] .token-overdue { background: rgba(220,38,38,.15) !important; color: #FCA5A5 !important; } /* ════════════════════════════════════════════════════════════════════ REPORTS, NOTIFICATIONS, KYC, PORTAL ADMIN, CUSTOMER PORTAL DOCUMENTS, PAYMENTS, RECYCLE + INLINE STYLE OVERRIDES ════════════════════════════════════════════════════════════════════ */ /* ─── Reports index page (uses Bootstrap cards + inline styles) ──── */ [data-theme="dark"] .reports .card, [data-theme="dark"] .reports .card-body, [data-theme="dark"] [class*="report"] .card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .reports .card-body > div[style*="color:#0A2540"], [data-theme="dark"] .reports .card-body div[style*="color:#0f172a"], [data-theme="dark"] .reports .card-body div[style*="font-weight:700"] { color: #E2D9F3 !important; } /* Section icon backgrounds in reports */ [data-theme="dark"] div[style*="background:rgba(99,102,241"] { background: rgba(99,102,241,.2) !important; } [data-theme="dark"] div[style*="background:rgba(0,179,134"] { background: rgba(0,179,134,.2) !important; } [data-theme="dark"] div[style*="background:rgba(239,68,68"] { background: rgba(239,68,68,.2) !important; } [data-theme="dark"] h4[style*="color:#0A2540"], [data-theme="dark"] div[style*="color:#0A2540"], [data-theme="dark"] div[style*="color:#0f172a"] { color: #E2D9F3 !important; } /* Report view pages (portfolio, overdue, collections etc) — these are print views so skip dark */ /* PDF export pages are excluded intentionally */ /* ─── Notifications inbox ────────────────────────────────────────── */ [data-theme="dark"] .inbox-page { background: transparent !important; } [data-theme="dark"] .inbox-stats { background: transparent !important; } [data-theme="dark"] .inbox-stat { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .inbox-stat-val { color: #F1ECF9 !important; } [data-theme="dark"] .inbox-stat-label { color: #8B7EAA !important; } [data-theme="dark"] .inbox-filters { background: transparent !important; } [data-theme="dark"] .inbox-filter-btn { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.1) !important; color: #8B7EAA !important; } [data-theme="dark"] .inbox-filter-btn:hover, [data-theme="dark"] .inbox-filter-btn.active { background: linear-gradient(135deg, #7B2FBE, #FF2D87) !important; border-color: transparent !important; color: #fff !important; } [data-theme="dark"] .inbox-list { background: transparent !important; } [data-theme="dark"] .inbox-item { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; color: #C4B5D9 !important; } [data-theme="dark"] .inbox-item:hover { box-shadow: 0 4px 20px rgba(0,0,0,.3) !important; border-color: rgba(255,45,135,.2) !important; } [data-theme="dark"] .inbox-item.unread { background: rgba(123,47,190,.1) !important; border-color: rgba(123,47,190,.25) !important; } [data-theme="dark"] .inbox-item.unread::before { background: #A78BFA !important; } [data-theme="dark"] .inbox-title { color: #F1ECF9 !important; } [data-theme="dark"] .inbox-body { color: #8B7EAA !important; } [data-theme="dark"] .inbox-meta { color: #6B5E8A !important; } [data-theme="dark"] .inbox-day-header { color: #7B6E9A !important; border-bottom-color: rgba(255,255,255,.06) !important; } [data-theme="dark"] .inbox-empty { color: #7B6E9A !important; } /* Notification settings page */ [data-theme="dark"] .notif-settings-card, [data-theme="dark"] .ns-card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } /* ─── KYC pages (kyc-* classes) ──────────────────────────────────── */ [data-theme="dark"] .kyc-page { background: transparent !important; } [data-theme="dark"] .kyc-card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; box-shadow: 0 6px 20px rgba(0,0,0,.3) !important; } [data-theme="dark"] .kyc-card-header { background: #160F2A !important; border-bottom-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .kyc-card-body { color: #C4B5D9 !important; } [data-theme="dark"] .kyc-title { color: #F1ECF9 !important; } [data-theme="dark"] .kyc-subtitle { color: #8B7EAA !important; } [data-theme="dark"] .kyc-kicker { color: #8B7EAA !important; } [data-theme="dark"] .kyc-meta { color: #8B7EAA !important; } [data-theme="dark"] .kyc-name { color: #F1ECF9 !important; } [data-theme="dark"] .kyc-stat { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .kyc-stat-value { color: #F1ECF9 !important; } [data-theme="dark"] .kyc-stat-label { color: #8B7EAA !important; } [data-theme="dark"] .kyc-detail-table th { background: #160F2A !important; color: #8B7EAA !important; border-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .kyc-detail-table td { color: #C4B5D9 !important; border-color: rgba(255,255,255,.05) !important; } [data-theme="dark"] .kyc-table { background: transparent !important; } [data-theme="dark"] .kyc-note-box, [data-theme="dark"] .kyc-note { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.07) !important; color: #C4B5D9 !important; } [data-theme="dark"] .kyc-warning { background: rgba(245,158,11,.1) !important; border-color: rgba(245,158,11,.25) !important; color: #FCD34D !important; } [data-theme="dark"] .kyc-badge-passed { background: rgba(5,150,105,.2) !important; color: #6EE7B7 !important; } [data-theme="dark"] .kyc-badge-failed { background: rgba(220,38,38,.2) !important; color: #FCA5A5 !important; } [data-theme="dark"] .kyc-badge-pending { background: rgba(245,158,11,.2) !important; color: #FCD34D !important; } [data-theme="dark"] .kyc-badge-review { background: rgba(37,99,235,.2) !important; color: #93C5FD !important; } [data-theme="dark"] .kyc-badge-neutral { background: rgba(255,255,255,.08)!important; color: #C4B5D9 !important; } [data-theme="dark"] .kyc-toolbar { background: rgba(255,255,255,.03) !important; border-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .kyc-search-wrap input, [data-theme="dark"] .kyc-search-input { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.1) !important; color: #E2D9F3 !important; } [data-theme="dark"] .kyc-pill { background: rgba(255,255,255,.07) !important; color: #C4B5D9 !important; } [data-theme="dark"] .kyc-risk { background: rgba(220,38,38,.1) !important; color: #FCA5A5 !important; } [data-theme="dark"] .kyc-empty { color: #7B6E9A !important; } [data-theme="dark"] .kyc-check-grid { background: transparent !important; } [data-theme="dark"] .kyc-check { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .kyc-check-label { color: #8B7EAA !important; } [data-theme="dark"] .kyc-check-value { color: #F1ECF9 !important; } [data-theme="dark"] .kyc-side-stat { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .kyc-side-value { color: #F1ECF9 !important; } [data-theme="dark"] .kyc-side-label, [data-theme="dark"] .kyc-side-meta { color: #8B7EAA !important; } [data-theme="dark"] .kyc-summary-item { border-color: rgba(255,255,255,.06) !important; } [data-theme="dark"] .kyc-summary-label { color: #8B7EAA !important; } [data-theme="dark"] .kyc-summary-value { color: #F1ECF9 !important; } [data-theme="dark"] .kyc-summary-meta { color: #7B6E9A !important; } /* Document upload section in KYC */ [data-theme="dark"] .upl-card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .upl-header { background: #160F2A !important; border-bottom-color: rgba(255,255,255,.07) !important; color: #E2D9F3 !important; } [data-theme="dark"] .upl-body { color: #C4B5D9 !important; } [data-theme="dark"] .upl-zone { background: rgba(255,255,255,.03) !important; border-color: rgba(255,255,255,.15) !important; color: #8B7EAA !important; } [data-theme="dark"] .upl-zone:hover, [data-theme="dark"] .drag-over .upl-zone { background: rgba(255,45,135,.06) !important; border-color: rgba(255,45,135,.3) !important; } [data-theme="dark"] .upl-zone-label { color: #8B7EAA !important; } [data-theme="dark"] .upl-file-row { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .upl-file-name { color: #E2D9F3 !important; } [data-theme="dark"] .upl-file-meta { color: #7B6E9A !important; } [data-theme="dark"] .upl-sec-title { color: #E2D9F3 !important; } [data-theme="dark"] .upl-type-row { border-color: rgba(255,255,255,.06) !important; } [data-theme="dark"] .upl-type-name { color: #E2D9F3 !important; } [data-theme="dark"] .upl-type-meta, [data-theme="dark"] .upl-type-hd { color: #8B7EAA !important; } [data-theme="dark"] .upl-badge-ok { background: rgba(5,150,105,.15) !important; color: #6EE7B7 !important; } /* ─── Document editor (de-* / doc-*) ─────────────────────────────── */ [data-theme="dark"] .de-doc-card, [data-theme="dark"] .doc-card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .doc-group { border-color: rgba(255,255,255,.06) !important; } [data-theme="dark"] .doc-group-title { color: #8B7EAA !important; } [data-theme="dark"] .doc-row { border-color: rgba(255,255,255,.05) !important; } [data-theme="dark"] .doc-row:hover { background: rgba(255,255,255,.03) !important; } [data-theme="dark"] .doc-row-name { color: #E2D9F3 !important; } [data-theme="dark"] .doc-row-meta { color: #8B7EAA !important; } [data-theme="dark"] .doc-show-card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .doc-show-header { background: #160F2A !important; border-bottom-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .doc-show-body { color: #C4B5D9 !important; } [data-theme="dark"] .doc-badge-ok { background: rgba(5,150,105,.15) !important; color: #6EE7B7 !important; } [data-theme="dark"] .doc-empty-row { color: #7B6E9A !important; } [data-theme="dark"] .doc-prog { background: rgba(255,255,255,.08) !important; } [data-theme="dark"] .doc-prog-bar { background: linear-gradient(90deg, #7B2FBE, #FF2D87) !important; } /* KYC/Loan form fields (le-* prefix) */ [data-theme="dark"] .le-card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .le-card-header { background: #160F2A !important; border-bottom-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .le-card-body { color: #C4B5D9 !important; } [data-theme="dark"] .le-label { color: #8B7EAA !important; } [data-theme="dark"] .le-input, [data-theme="dark"] .le-input-suffix { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.1) !important; color: #E2D9F3 !important; } [data-theme="dark"] .le-note { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.07) !important; color: #C4B5D9 !important; } [data-theme="dark"] .le-warn { background: rgba(245,158,11,.1) !important; border-color: rgba(245,158,11,.25) !important; color: #FCD34D !important; } /* ─── Admin Portal Management pages ─────────────────────────────── */ [data-theme="dark"] .portal-management-card, [data-theme="dark"] .pm-card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } /* Applications portal table */ [data-theme="dark"] .portal-app-card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .portal-app-card .card-header { background: #160F2A !important; color: #E2D9F3 !important; } [data-theme="dark"] .pf-hero-title, [data-theme="dark"] .ps-hero-title { color: #fff !important; } /* ─── Loan payments ──────────────────────────────────────────────── */ [data-theme="dark"] .payment-form-card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .payment-summary { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.07) !important; } /* ─── Recycle bin ────────────────────────────────────────────────── */ [data-theme="dark"] .recycle-card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .recycle-item { border-color: rgba(255,255,255,.06) !important; color: #C4B5D9 !important; } [data-theme="dark"] .recycle-item:hover { background: rgba(255,255,255,.03) !important; } /* ════════════════════════════════════════════════════════════════════ CUSTOMER PORTAL — dark mode The portal layout already uses CSS tokens (--surface, --card etc.) which are wired to --av-portal-* in the theme system. These rules handle page-specific classes that hardcode colours. ════════════════════════════════════════════════════════════════════ */ /* Portal design tokens — dark overrides */ [data-theme="dark"] { --surface: #13101F !important; --card: #1C1433 !important; --border: rgba(255,255,255,.08) !important; --border-mid: rgba(255,255,255,.14) !important; --text-primary: #F1ECF9 !important; --text-secondary:#8B7EAA !important; --text-hint: #7B6E9A !important; } /* Portal app cards and stat pills */ [data-theme="dark"] .app-card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .app-card-header { border-bottom-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .app-card-title { color: #E2D9F3 !important; } [data-theme="dark"] .app-card-sub { color: #8B7EAA !important; } [data-theme="dark"] .stat-pill { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .stat-pill-label { color: #7B6E9A !important; } [data-theme="dark"] .stat-pill-val { color: #F1ECF9 !important; } /* Step items */ [data-theme="dark"] .step-item { border-color: rgba(255,255,255,.06) !important; } [data-theme="dark"] .step-item:hover { background: rgba(255,255,255,.04) !important; } [data-theme="dark"] .step-item:active { background: rgba(255,255,255,.06) !important; } [data-theme="dark"] .step-title { color: #E2D9F3 !important; } [data-theme="dark"] .step-desc { color: #8B7EAA !important; } [data-theme="dark"] .step-chevron { color: #7B6E9A !important; } /* Portal form inputs */ [data-theme="dark"] .form-input, [data-theme="dark"] .form-select { background: #1C1433 !important; border-color: rgba(255,255,255,.12) !important; color: #F1ECF9 !important; } [data-theme="dark"] .form-input:focus, [data-theme="dark"] .form-select:focus { border-color: #FF2D87 !important; box-shadow: 0 0 0 3px rgba(255,45,135,.1) !important; } [data-theme="dark"] .form-label { color: #8B7EAA !important; } [data-theme="dark"] .form-hint { color: #7B6E9A !important; } [data-theme="dark"] .form-error { color: #FCA5A5 !important; } [data-theme="dark"] .form-prefix, [data-theme="dark"] .form-suffix { background: rgba(255,255,255,.05) !important; color: #8B7EAA !important; border-color: rgba(255,255,255,.1) !important; } /* Portal secondary buttons */ [data-theme="dark"] .btn-secondary { background: #1C1433 !important; border-color: rgba(255,255,255,.14) !important; color: #C4B5D9 !important; } [data-theme="dark"] .btn-secondary:hover { background: rgba(255,255,255,.08) !important; color: #F1ECF9 !important; } /* ─── Portal Dashboard (ml-* = my loan) ─────────────────────────── */ [data-theme="dark"] .ml-main-card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; box-shadow: 0 2px 16px rgba(0,0,0,.35) !important; } [data-theme="dark"] .ml-card-label { color: #8B7EAA !important; } [data-theme="dark"] .ml-card-amount.good { color: #F1ECF9 !important; } [data-theme="dark"] .ml-card-amount.overdue { color: #FCA5A5 !important; } [data-theme="dark"] .ml-score-note { background: #2B0D0D !important; color: #FCA5A5 !important; border-color: rgba(220,38,38,.2) !important; } [data-theme="dark"] .ml-score-note.ok { background: #0D2B22 !important; color: #6EE7B7 !important; border-color: rgba(5,150,105,.2) !important; } [data-theme="dark"] .ml-notice.warning { background: rgba(245,158,11,.1) !important; border-color: rgba(245,158,11,.25) !important; } [data-theme="dark"] .ml-notice.info { background: rgba(37,99,235,.1) !important; border-color: rgba(37,99,235,.25) !important; } [data-theme="dark"] .ml-notice.brand { background: rgba(255,45,135,.1) !important; border-color: rgba(255,45,135,.25) !important; } [data-theme="dark"] .ml-notice-title { color: #E2D9F3 !important; } [data-theme="dark"] .ml-notice-body { color: #8B7EAA !important; } [data-theme="dark"] .ml-full-link { color: #FF6AB0 !important; } [data-theme="dark"] .cs-ring-val { color: #F1ECF9 !important; } [data-theme="dark"] .cs-label { color: #E2D9F3 !important; } [data-theme="dark"] .cs-sub { color: #8B7EAA !important; } /* Journey / progress steps in portal */ [data-theme="dark"] .tl-row { border-color: rgba(255,255,255,.06) !important; } [data-theme="dark"] .tl-dot.done { background: #059669 !important; } [data-theme="dark"] .tl-dot.future { background: rgba(255,255,255,.12) !important; } /* ─── Portal Account (acct-*, menu-*, factor-*) ─────────────────── */ [data-theme="dark"] .acct-hero { background: var(--navy) !important; } [data-theme="dark"] .acct-name { color: #F1ECF9 !important; } [data-theme="dark"] .acct-email { color: #8B7EAA !important; } [data-theme="dark"] .acct-status-chip { background: rgba(255,255,255,.08) !important; color: #C4B5D9 !important; } [data-theme="dark"] .menu-list { background: transparent !important; } [data-theme="dark"] .menu-row { border-color: rgba(255,255,255,.06) !important; } [data-theme="dark"] .menu-row:hover { background: rgba(255,255,255,.04) !important; } [data-theme="dark"] .menu-label { color: #E2D9F3 !important; } [data-theme="dark"] .menu-sub { color: #8B7EAA !important; } [data-theme="dark"] .menu-section-label { color: #6B5E8A !important; } [data-theme="dark"] .menu-icon { color: #8B7EAA !important; } [data-theme="dark"] .factor-row { border-color: rgba(255,255,255,.06) !important; } [data-theme="dark"] .factor-label { color: #C4B5D9 !important; } [data-theme="dark"] .factor-detail { color: #8B7EAA !important; } [data-theme="dark"] .factor-status.positive { color: #6EE7B7 !important; } [data-theme="dark"] .factor-status.negative { color: #FCA5A5 !important; } [data-theme="dark"] .factor-status.neutral { color: #8B7EAA !important; } /* Credit score page */ [data-theme="dark"] .cs-hero { background: var(--navy) !important; } [data-theme="dark"] .cs-summary { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .cs-tip { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.07) !important; color: #C4B5D9 !important; } [data-theme="dark"] .cs-score-big { color: #F1ECF9 !important; } [data-theme="dark"] .cs-band-label { color: #8B7EAA !important; } [data-theme="dark"] .fair { color: #FCD34D !important; } [data-theme="dark"] .good { color: #6EE7B7 !important; } /* ─── Portal Repayment page ─────────────────────────────────────── */ [data-theme="dark"] .rep-amount-card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; box-shadow: 0 4px 16px rgba(0,0,0,.3) !important; } [data-theme="dark"] .rep-amount-label { color: #8B7EAA !important; } [data-theme="dark"] .rep-amount-val { color: #F1ECF9 !important; } [data-theme="dark"] .rep-due { color: #FCA5A5 !important; } [data-theme="dark"] .sched-group-hdr { background: rgba(255,255,255,.03) !important; border-color: rgba(255,255,255,.06) !important; } [data-theme="dark"] .sched-group-title { color: #8B7EAA !important; } [data-theme="dark"] .sched-row { border-color: rgba(255,255,255,.05) !important; } [data-theme="dark"] .sched-row:hover { background: rgba(255,45,135,.04) !important; } [data-theme="dark"] .sched-row-date { color: #C4B5D9 !important; } [data-theme="dark"] .sched-row-amt { color: #F1ECF9 !important; } [data-theme="dark"] .sched-days { color: #8B7EAA !important; } [data-theme="dark"] .payment-row { border-color: rgba(255,255,255,.06) !important; } [data-theme="dark"] .payment-row.paid { background: rgba(5,150,105,.06) !important; } [data-theme="dark"] .payment-row.due { background: rgba(245,158,11,.06) !important; } [data-theme="dark"] .payment-row.overdue { background: rgba(220,38,38,.06) !important; } [data-theme="dark"] .payment-row.ok { background: rgba(5,150,105,.04) !important; } /* ─── Portal KYC Wizard ─────────────────────────────────────────── */ [data-theme="dark"] .kyc-panel { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .kyc-card-step-label { color: #8B7EAA !important; } [data-theme="dark"] .kyc-card-title { color: #E2D9F3 !important; } [data-theme="dark"] .kyc-step-icon { background: rgba(255,255,255,.06) !important; color: #8B7EAA !important; } [data-theme="dark"] .kyc-step-icon.done { background: rgba(5,150,105,.2) !important; color: #6EE7B7 !important; } [data-theme="dark"] .kyc-step-icon.entering { background: rgba(255,45,135,.15) !important; color: #FF6AB0 !important; } [data-theme="dark"] .kyc-oi-check { background: rgba(5,150,105,.1) !important; color: #6EE7B7 !important; } [data-theme="dark"] .kyc-overview-item { border-color: rgba(255,255,255,.06) !important; } [data-theme="dark"] .upload-zone { background: rgba(255,255,255,.03) !important; border-color: rgba(255,255,255,.15) !important; color: #8B7EAA !important; } [data-theme="dark"] .upload-zone:hover, [data-theme="dark"] .has-file .upload-zone { background: rgba(255,45,135,.06) !important; border-color: rgba(255,45,135,.3) !important; } [data-theme="dark"] .upload-filename { color: #E2D9F3 !important; } /* ─── Portal Register page ──────────────────────────────────────── */ [data-theme="dark"] .login-right .lc-pill-tabs, [data-theme="dark"] .lc-radio-grid { background: transparent !important; } [data-theme="dark"] .lc-pill-tab { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.1) !important; color: #8B7EAA !important; } [data-theme="dark"] .lc-pill-tab.active { background: linear-gradient(135deg, #7B2FBE, #FF2D87) !important; color: #fff !important; border-color: transparent !important; } [data-theme="dark"] .lc-radio-card { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.1) !important; color: #C4B5D9 !important; } [data-theme="dark"] .lc-radio-card.selected, [data-theme="dark"] .lc-radio-card:hover { border-color: rgba(255,45,135,.4) !important; background: rgba(255,45,135,.07) !important; } /* ─── Maintenance page ──────────────────────────────────────────── */ [data-theme="dark"] .maintenance-card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } /* ════════════════════════════════════════════════════════════════════ UNIVERSAL INLINE STYLE OVERRIDES Catches hardcoded style="" attributes across all pages that can't be targeted by class selectors. ════════════════════════════════════════════════════════════════════ */ /* Any element with inline color:#0A2540 or #0f172a that ISN'T inside a hero */ [data-theme="dark"] .c-main [style*="color:#0A2540"]:not([class*="-hero"]):not([class*="hero-"]), [data-theme="dark"] .c-main [style*="color:#0f172a"]:not([class*="-hero"]):not([class*="hero-"]), [data-theme="dark"] .c-main [style*="color: #0A2540"]:not([class*="-hero"]), [data-theme="dark"] .c-main [style*="color: #0f172a"]:not([class*="-hero"]) { color: #E2D9F3 !important; } /* Inline white backgrounds in content areas */ [data-theme="dark"] .c-main > .container-fluid [style*="background:#fff"], [data-theme="dark"] .c-main > .container-fluid [style*="background: #fff"], [data-theme="dark"] .c-main > .container-fluid [style*="background-color:#fff"], [data-theme="dark"] .c-main > .container-fluid [style*="background:#ffffff"], [data-theme="dark"] .c-main > .container-fluid [style*="background: #ffffff"], [data-theme="dark"] .c-main > .container-fluid [style*="background:#FFFFFF"], [data-theme="dark"] .c-main > .container-fluid [style*="background:#f8fafc"], [data-theme="dark"] .c-main > .container-fluid [style*="background: #f8fafc"], [data-theme="dark"] .c-main > .container-fluid [style*="background:#F8FAFC"], [data-theme="dark"] .c-main > .container-fluid [style*="background:#F3F7FB"] { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } /* Inline light borders */ [data-theme="dark"] .c-main > .container-fluid [style*="border:1px solid #e5e7eb"], [data-theme="dark"] .c-main > .container-fluid [style*="border: 1px solid #e5e7eb"], [data-theme="dark"] .c-main > .container-fluid [style*="border-bottom:1px solid #e5e7eb"], [data-theme="dark"] .c-main > .container-fluid [style*="border-bottom: 1px solid #f1f5f9"] { border-color: rgba(255,255,255,.08) !important; } /* Bootstrap shadow-sm cards (used heavily in reports index) */ [data-theme="dark"] .shadow-sm { box-shadow: 0 4px 16px rgba(0,0,0,.4) !important; } /* ════════════════════════════════════════════════════════════════════ AUDIT, RECYCLE, STATUSES, USERS, ROLES ════════════════════════════════════════════════════════════════════ */ /* ── AUDIT INDEX ─────────────────────────────────────────────────── */ [data-theme="dark"] .audit-page { background: transparent !important; } /* Category filter sidebar */ [data-theme="dark"] .cat-section { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .cat-section-label { color: #7B6E9A !important; } [data-theme="dark"] .cat-btn { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.08) !important; color: #C4B5D9 !important; } [data-theme="dark"] .cat-btn:hover { background: rgba(255,255,255,.08) !important; box-shadow: 0 6px 18px rgba(0,0,0,.3) !important; } [data-theme="dark"] .cat-btn.active { background: var(--cb, rgba(255,45,135,.12)) !important; border-color: var(--cc, rgba(255,45,135,.4)) !important; } [data-theme="dark"] .cat-btn.active .cat-icon { color: #fff !important; background: var(--cc, #FF2D87) !important; } [data-theme="dark"] .cat-label { color: #C4B5D9 !important; } [data-theme="dark"] .cat-count { background: var(--cc, rgba(255,45,135,.6)) !important; color: #fff !important; } [data-theme="dark"] .cat-icon { color: var(--cc, #FF6AB0) !important; } /* Module colour badges */ [data-theme="dark"] .m-applications { background: rgba(67,56,202,.2) !important; color: #A5B4FC !important; } [data-theme="dark"] .m-quotes { background: rgba(3,105,161,.2) !important; color: #7DD3FC !important; } [data-theme="dark"] .m-kyc { background: rgba(22,101,52,.2) !important; color: #86EFAC !important; } [data-theme="dark"] .m-documents { background: rgba(146,64,14,.2) !important; color: #FCD34D !important; } [data-theme="dark"] .m-loans { background: rgba(5,150,105,.2) !important; color: #6EE7B7 !important; } [data-theme="dark"] .m-borrowers { background: rgba(99,102,241,.2)!important; color: #C4B5FD !important; } [data-theme="dark"] .m-auth { background: rgba(220,38,38,.2) !important; color: #FCA5A5 !important; } [data-theme="dark"] .m-notifications{ background: rgba(245,158,11,.2)!important; color: #FCD34D !important; } [data-theme="dark"] .m-reports { background: rgba(14,165,233,.2) !important; color: #7DD3FC !important; } [data-theme="dark"] .m-users { background: rgba(168,85,247,.2) !important; color: #E879F9 !important; } [data-theme="dark"] .m-system { background: rgba(255,255,255,.08)!important;color: #C4B5D9 !important; } [data-theme="dark"] .m-default { background: rgba(255,255,255,.06)!important;color: #8B7EAA !important; } [data-theme="dark"] .m-audit { background: rgba(99,102,241,.2) !important; color: #C4B5FD !important; } /* Quick search bar */ [data-theme="dark"] .quick-bar { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .quick-bar .qb-field label { color: #7B6E9A !important; } [data-theme="dark"] .quick-bar .qb-field select, [data-theme="dark"] .quick-bar .qb-field input { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.1) !important; color: #E2D9F3 !important; } [data-theme="dark"] .quick-bar .qb-field select:focus, [data-theme="dark"] .quick-bar .qb-field input:focus { border-color: rgba(255,45,135,.5) !important; background: rgba(255,45,135,.05) !important; } /* Audit table wrap */ [data-theme="dark"] .audit-wrap { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } /* Module + action badge pills */ [data-theme="dark"] .mod-b { } /* inherits m-* colours above */ [data-theme="dark"] .act-b { background: rgba(255,255,255,.06) !important; color: #C4B5D9 !important; } /* Active filter pill */ [data-theme="dark"] .active-pill { background: rgba(255,45,135,.15) !important; color: #FF6AB0 !important; border-color: rgba(255,45,135,.3) !important; } /* ── AUDIT SHOW ──────────────────────────────────────────────────── */ /* Audit show uses Bootstrap .card with inline styles — covered by the generic card rule + inline style overrides in theme.css. Extra: the properties JSON pre block */ [data-theme="dark"] pre[style*="background:#f8fafc"], [data-theme="dark"] pre[style*="background: #f8fafc"] { background: #160F2A !important; color: #C4B5D9 !important; border-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .card-header[style*="background:#f8fafc"], [data-theme="dark"] .card-header[style*="background: #f8fafc"] { background: #160F2A !important; border-bottom-color: rgba(255,255,255,.07) !important; color: #E2D9F3 !important; } /* ── RECYCLE BIN ─────────────────────────────────────────────────── */ /* Recycle uses inline styles only — covered by inline attribute selectors. These additional rules handle the specific patterns. */ [data-theme="dark"] div[style*="background:#fff;border:1px solid #e5e7eb;border-radius:16px"], [data-theme="dark"] div[style*="background:#fff;border:1px solid #e5e7eb;border-radius:14px"] { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; box-shadow: 0 4px 16px rgba(0,0,0,.3) !important; } [data-theme="dark"] div[style*="font-size:14px;font-weight:800;color:#0f172a"] { color: #E2D9F3 !important; } [data-theme="dark"] div[style*="background:#fee2e2;color:#991b1b;border-radius:10px"] { background: rgba(220,38,38,.15) !important; color: #FCA5A5 !important; } [data-theme="dark"] div[style*="background:#f0fdf4;color:#10b981;border-radius:10px"] { background: rgba(5,150,105,.12) !important; color: #6EE7B7 !important; } /* Recycle table */ [data-theme="dark"] div[style*="background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden"] { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] tr[style*="background:#f8fafc"] { background: #160F2A !important; } [data-theme="dark"] tr[style*="border-bottom:1px solid #f8fafc"] { border-color: rgba(255,255,255,.05) !important; } [data-theme="dark"] th[style*="color:#64748b;border-bottom:1px solid #e5e7eb"] { color: #7B6E9A !important; border-bottom-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] td[style*="color:#94a3b8;font-weight:700"] { color: #7B6E9A !important; } [data-theme="dark"] td[style*="font-weight:700;color:#0f172a"] { color: #E2D9F3 !important; } [data-theme="dark"] div[style*="text-align:center;padding:60px;background:#fff"] { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; color: #8B7EAA !important; } /* ── STATUSES (st-* — list page) ─────────────────────────────────── */ /* Note: st-* settings page classes already covered. These are the statuses index page uses SAME prefix but different classes. */ [data-theme="dark"] .st-page { background: transparent !important; } [data-theme="dark"] .st-list { background: transparent !important; } [data-theme="dark"] .st-row { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .st-row:hover { box-shadow: 0 4px 20px rgba(0,0,0,.35) !important; border-color: rgba(255,45,135,.2) !important; } [data-theme="dark"] .st-row-name { color: #E2D9F3 !important; } [data-theme="dark"] .st-row-id { color: #7B6E9A !important; } [data-theme="dark"] .st-row-num { background: rgba(52,211,153,.12) !important; color: #6EE7B7 !important; } [data-theme="dark"] .st-row-actions .st-btn { } /* Statuses sf-* (create/edit/show) */ [data-theme="dark"] .sf-page { background: transparent !important; } [data-theme="dark"] .sf-card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; box-shadow: 0 4px 24px rgba(0,0,0,.3) !important; } [data-theme="dark"] .sf-card-body { color: #C4B5D9 !important; } [data-theme="dark"] .sf-label { color: #8B7EAA !important; } [data-theme="dark"] .sf-input { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.1) !important; color: #E2D9F3 !important; } [data-theme="dark"] .sf-input:focus { border-color: rgba(255,45,135,.5) !important; box-shadow: 0 0 0 3px rgba(255,45,135,.1) !important; } [data-theme="dark"] .sf-error { color: #FCA5A5 !important; } [data-theme="dark"] .sf-footer { background: #160F2A !important; border-top-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .sf-row { border-color: rgba(255,255,255,.06) !important; } [data-theme="dark"] .sf-row-label { color: #8B7EAA !important; } [data-theme="dark"] .sf-row-value { color: #E2D9F3 !important; } /* ── USERS LIST (up-* classes) ───────────────────────────────────── */ [data-theme="dark"] .up-card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .up-card-hd { background: #160F2A !important; border-bottom-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .up-card-title { color: #E2D9F3 !important; } /* Users table (ut) */ [data-theme="dark"] table.ut thead th { background: #160F2A !important; color: #7B6E9A !important; border-bottom-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] table.ut tbody td { border-bottom-color: rgba(255,255,255,.05) !important; color: #C4B5D9 !important; } [data-theme="dark"] table.ut tbody tr:hover { background: rgba(255,45,135,.04) !important; } /* User name/email in table */ [data-theme="dark"] .u-name { color: #E2D9F3 !important; } [data-theme="dark"] .u-email { color: #8B7EAA !important; } /* Role badges */ [data-theme="dark"] .rb-admin { background: rgba(146,64,14,.2) !important; color: #FCD34D !important; } [data-theme="dark"] .rb-cfo { background: rgba(91,33,182,.2) !important; color: #C4B5FD !important; } [data-theme="dark"] .rb-analyst { background: rgba(30,64,175,.2) !important; color: #93C5FD !important; } [data-theme="dark"] .rb-creditor { background: rgba(22,101,52,.2) !important; color: #86EFAC !important; } [data-theme="dark"] .rb-default { background: rgba(255,255,255,.08)!important; color: #8B7EAA !important; } /* Portfolio chip */ [data-theme="dark"] .portfolio-chip { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.1) !important; color: #C4B5D9 !important; } /* Action buttons (ua-*) — already covered by generic ab-* in previous batch but ua-* has different selectors */ [data-theme="dark"] .ua-view { background: rgba(37,99,235,.15) !important; border-color: rgba(37,99,235,.25) !important; color: #93C5FD !important; } [data-theme="dark"] .ua-edit { background: rgba(5,150,105,.15) !important; border-color: rgba(5,150,105,.25) !important; color: #6EE7B7 !important; } [data-theme="dark"] .ua-del { background: rgba(220,38,38,.1) !important; border-color: rgba(220,38,38,.2) !important; color: #FCA5A5 !important; } [data-theme="dark"] .ua-view:hover { background: rgba(37,99,235,.25) !important; } [data-theme="dark"] .ua-edit:hover { background: rgba(5,150,105,.25) !important; } [data-theme="dark"] .ua-del:hover { background: rgba(220,38,38,.2) !important; } /* ── USERS CREATE/EDIT (ue-*) ────────────────────────────────────── */ [data-theme="dark"] .ue-card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .ue-card-hd { background: #160F2A !important; border-bottom-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .ue-card-hd h6 { color: #E2D9F3 !important; } [data-theme="dark"] .ue-card-hd small { color: #8B7EAA !important; } [data-theme="dark"] .ue-card-body { color: #C4B5D9 !important; } /* Facility selection grid */ [data-theme="dark"] .facility-item { background: rgba(255,255,255,.03) !important; border-color: rgba(255,255,255,.1) !important; } [data-theme="dark"] .facility-item:hover { border-color: rgba(59,130,246,.5) !important; background: rgba(59,130,246,.08) !important; } [data-theme="dark"] .facility-item.checked { border-color: rgba(5,150,105,.5) !important; background: rgba(5,150,105,.08) !important; } [data-theme="dark"] .facility-name { color: #E2D9F3 !important; } [data-theme="dark"] .facility-meta { color: #8B7EAA !important; } [data-theme="dark"] .rate-chip-cost { background: rgba(153,27,27,.2) !important; color: #FCA5A5 !important; } [data-theme="dark"] .rate-chip-lending { background: rgba(30,64,175,.2) !important; color: #93C5FD !important; } [data-theme="dark"] .rate-chip-nim { background: rgba(22,101,52,.2) !important; color: #86EFAC !important; } [data-theme="dark"] .portfolio-notice { background: rgba(245,158,11,.1) !important; border-color: rgba(245,158,11,.25) !important; color: #FCD34D !important; } /* ── USERS SHOW (us-*) ───────────────────────────────────────────── */ [data-theme="dark"] .us-card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .us-card-hd { background: #160F2A !important; border-bottom-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .us-card-hd h6 { color: #E2D9F3 !important; } [data-theme="dark"] .us-card-body { color: #C4B5D9 !important; } [data-theme="dark"] .us-row { border-bottom-color: rgba(255,255,255,.05) !important; } [data-theme="dark"] .us-row-label { color: #7B6E9A !important; } [data-theme="dark"] .us-row-value { color: #E2D9F3 !important; } /* Facility tiles in user show */ [data-theme="dark"] .fac-tile { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.09) !important; } [data-theme="dark"] .fac-tile-name { color: #E2D9F3 !important; } [data-theme="dark"] .fac-tile-meta { color: #8B7EAA !important; } [data-theme="dark"] .rc-cost { background: rgba(153,27,27,.2) !important; color: #FCA5A5 !important; } [data-theme="dark"] .rc-lend { background: rgba(30,64,175,.2) !important; color: #93C5FD !important; } [data-theme="dark"] .rc-nim { background: rgba(22,101,52,.2) !important; color: #86EFAC !important; } /* ── ROLES INDEX (rl-*) ──────────────────────────────────────────── */ [data-theme="dark"] .rl-page { background: transparent !important; } [data-theme="dark"] .rl-card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; box-shadow: none !important; } [data-theme="dark"] .rl-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.4) !important; border-color: rgba(255,45,135,.2) !important; } [data-theme="dark"] .rl-card-top { color: #C4B5D9 !important; } [data-theme="dark"] .rl-card-footer { background: #160F2A !important; border-top-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .rl-role-name { color: #E2D9F3 !important; } [data-theme="dark"] .rl-role-id { color: #7B6E9A !important; } [data-theme="dark"] .rl-role-count { background: rgba(255,255,255,.08) !important; color: #8B7EAA !important; } [data-theme="dark"] .rl-perm-chip { background: rgba(123,47,190,.15) !important; border-color: rgba(123,47,190,.25) !important; color: #C4B5FD !important; } [data-theme="dark"] .rl-perm-more { color: #8B7EAA !important; } [data-theme="dark"] .rl-perms-preview { background: transparent !important; } [data-theme="dark"] .rl-add-btn { background: linear-gradient(135deg, #7B2FBE, #FF2D87) !important; border-color: transparent !important; box-shadow: 0 4px 14px rgba(255,45,135,.3) !important; } /* ── ROLES CREATE/EDIT (rf-*) ────────────────────────────────────── */ [data-theme="dark"] .rf-page { background: transparent !important; } [data-theme="dark"] .rf-card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; box-shadow: 0 4px 24px rgba(0,0,0,.3) !important; } [data-theme="dark"] .rf-card-body { color: #C4B5D9 !important; } [data-theme="dark"] .rf-label { color: #8B7EAA !important; } [data-theme="dark"] .rf-input { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.1) !important; color: #E2D9F3 !important; } [data-theme="dark"] .rf-input:focus { border-color: rgba(255,45,135,.5) !important; box-shadow: 0 0 0 3px rgba(255,45,135,.1) !important; } [data-theme="dark"] .rf-error { color: #FCA5A5 !important; } [data-theme="dark"] .rf-footer { background: #160F2A !important; border-top-color: rgba(255,255,255,.07) !important; } /* Permissions accordion (rf-mod-*) */ [data-theme="dark"] .rf-mod-card { background: #1C1433 !important; border-color: rgba(255,255,255,.09) !important; } [data-theme="dark"] .rf-mod-header { background: #160F2A !important; border-bottom-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .rf-mod-header:hover { background: rgba(255,255,255,.05) !important; } [data-theme="dark"] .rf-mod-name { color: #E2D9F3 !important; } [data-theme="dark"] .rf-mod-count { color: #7B6E9A !important; } [data-theme="dark"] .rf-mod-body { color: #C4B5D9 !important; } [data-theme="dark"] .rf-mod-chevron { color: #8B7EAA !important; } [data-theme="dark"] .rf-mod-check-all { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.12) !important; color: #C4B5D9 !important; } [data-theme="dark"] .rf-mod-check-all:hover { border-color: rgba(255,45,135,.4) !important; color: #FF6AB0 !important; } /* Permission grid items */ [data-theme="dark"] .rf-perm-grid { background: transparent !important; } [data-theme="dark"] .rf-perm-header { border-color: rgba(255,255,255,.06) !important; } [data-theme="dark"] .rf-perm-title { color: #8B7EAA !important; } [data-theme="dark"] .rf-perm-btn { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.1) !important; color: #8B7EAA !important; } [data-theme="dark"] .rf-perm-btn:hover { border-color: rgba(255,45,135,.4) !important; color: #FF6AB0 !important; background: rgba(255,45,135,.07) !important; } [data-theme="dark"] .rf-perm-search-wrap i { color: #7B6E9A !important; } [data-theme="dark"] .rf-perm-search { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.1) !important; color: #E2D9F3 !important; } [data-theme="dark"] .rf-perm-search:focus { border-color: rgba(255,45,135,.5) !important; background: rgba(255,45,135,.05) !important; } [data-theme="dark"] .rf-perm-label { color: #C4B5D9 !important; } [data-theme="dark"] .rf-perm-dot { opacity: .7; } [data-theme="dark"] .rf-perm-checkbox { accent-color: #FF2D87 !important; } /* Permission tick indicator */ [data-theme="dark"] .rf-tick { background: rgba(5,150,105,.15) !important; border-color: rgba(5,150,105,.3) !important; color: #6EE7B7 !important; } /* Selected count badge */ [data-theme="dark"] .rf-selected-count { background: rgba(255,45,135,.15) !important; color: #FF6AB0 !important; } /* ── ROLES SHOW (rv-*) ───────────────────────────────────────────── */ [data-theme="dark"] .rv-page { background: transparent !important; } [data-theme="dark"] .rv-card { background: #1C1433 !important; border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .rv-meta { background: transparent !important; } [data-theme="dark"] .rv-meta-cell { border-color: rgba(255,255,255,.06) !important; } [data-theme="dark"] .rv-meta-label { color: #8B7EAA !important; } [data-theme="dark"] .rv-meta-value { color: #E2D9F3 !important; } [data-theme="dark"] .rv-footer { border-top-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .rv-perms-header { border-bottom-color: rgba(255,255,255,.07) !important; } [data-theme="dark"] .rv-perms-title { color: #8B7EAA !important; } [data-theme="dark"] .rv-perms-count { color: #7B6E9A !important; } [data-theme="dark"] .rv-mod-section { border-color: rgba(255,255,255,.06) !important; } [data-theme="dark"] .rv-mod-label { color: #8B7EAA !important; } [data-theme="dark"] .rv-perm-chips { background: transparent !important; } [data-theme="dark"] .rv-perm-chip { background: rgba(123,47,190,.15) !important; border-color: rgba(123,47,190,.25) !important; color: #C4B5FD !important; } /* ════════════════════════════════════════════════════════════════════ COMPREHENSIVE DARK-MODE PAGE OVERRIDES Covers all page-scoped CSS classes that use hardcoded light colours. Added as !important overrides because page