/* ════════════════════════════════════════════════════════════════════════
   assets/css/ml-theme.css — v1.4.2  ONE colour system, light + dark
   Loaded LAST on every portal page and in Portal Admin, so it wins over
   portal.css, v11-ui.css, the Appearance overrides (api/theme_css.php) and
   the hard-coded colours scattered through older pages.

   LIGHT: every surface white, all text near-black.
   DARK : every surface dark grey, all text white.
   The page, sidebar, cards, tables, pop-ups, dropdowns, notifications,
   banners, inputs and buttons all use the SAME tokens below, so switching
   the theme flips everything together — nothing stays black-on-dark.
   Coloured accents (blue buttons, green profit, red loss, status badges)
   keep their meaning in both themes.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ───────────────────────────────────────────────────────────── */
html[data-theme="light"]{
  --ml-bg:#ffffff; --ml-surface:#ffffff; --ml-surface-2:#f4f5f7; --ml-surface-3:#eceef1;
  --ml-text:#111827; --ml-text-2:#374151; --ml-text-3:#6b7280;
  --ml-border:#e5e7eb; --ml-border-2:#d1d5db;
  --ml-input:#ffffff; --ml-hover:#f3f4f6; --ml-shadow:0 8px 28px rgba(17,24,39,.12);
  --ml-accent:#2563eb; --ml-accent-2:#3b82f6; --ml-accent-soft:rgba(37,99,235,.10);
  --ml-ok:#047857; --ml-ok-bg:#ecfdf5; --ml-ok-bd:#a7f3d0;
  --ml-err:#b91c1c; --ml-err-bg:#fef2f2; --ml-err-bd:#fecaca;
  --ml-warn:#92400e; --ml-warn-bg:#fffbeb; --ml-warn-bd:#fde68a;
  --ml-info:#1e40af; --ml-info-bg:#eff6ff; --ml-info-bd:#bfdbfe;
  color-scheme: light;
}
html:not([data-theme="light"]){
  --ml-bg:#1e1f22; --ml-surface:#1e1f22; --ml-surface-2:#26272b; --ml-surface-3:#2f3035;
  --ml-text:#ffffff; --ml-text-2:#e5e7eb; --ml-text-3:#a1a1aa;
  --ml-border:#34353a; --ml-border-2:#44454b;
  --ml-input:#26272b; --ml-hover:#2a2b30; --ml-shadow:0 10px 32px rgba(0,0,0,.55);
  --ml-accent:#3b82f6; --ml-accent-2:#60a5fa; --ml-accent-soft:rgba(59,130,246,.16);
  --ml-ok:#6ee7b7; --ml-ok-bg:rgba(16,185,129,.14); --ml-ok-bd:rgba(16,185,129,.35);
  --ml-err:#fca5a5; --ml-err-bg:rgba(239,68,68,.14); --ml-err-bd:rgba(239,68,68,.40);
  --ml-warn:#fcd34d; --ml-warn-bg:rgba(245,158,11,.14); --ml-warn-bd:rgba(245,158,11,.40);
  --ml-info:#93c5fd; --ml-info-bg:rgba(59,130,246,.14); --ml-info-bd:rgba(59,130,246,.40);
  color-scheme: dark;
}
/* Feed the tokens into every older variable name the portal + Bootstrap use. */
html[data-theme="light"], html:not([data-theme="light"]){
  --bg:var(--ml-bg) !important; --bg-2:var(--ml-surface) !important;
  --bg-card:var(--ml-surface) !important; --bg-card-2:var(--ml-surface-2) !important; --surface-2:var(--ml-surface) !important;
  --text-1:var(--ml-text) !important; --text-2:var(--ml-text-2) !important; --text-3:var(--ml-text-3) !important;
  --border:var(--ml-border) !important; --border-2:var(--ml-border-2) !important;
  --ml-sb-bg:var(--ml-surface) !important; --ml-sb-text:var(--ml-text-2) !important;
  --ml-sb-muted:var(--ml-text-3) !important; --ml-sb-hover:var(--ml-hover) !important; --ml-sb-line:var(--ml-border) !important;
  --bs-body-bg:var(--ml-bg); --bs-body-color:var(--ml-text); --bs-emphasis-color:var(--ml-text);
  --bs-secondary-color:var(--ml-text-3); --bs-tertiary-color:var(--ml-text-3);
  --bs-secondary-bg:var(--ml-surface-2); --bs-tertiary-bg:var(--ml-surface-2);
  --bs-border-color:var(--ml-border); --bs-heading-color:var(--ml-text);
  --bs-link-color:var(--ml-accent); --bs-link-hover-color:var(--ml-accent-2);
  --bs-table-color:var(--ml-text); --bs-table-bg:transparent;
  --bs-dropdown-bg:var(--ml-surface); --bs-dropdown-color:var(--ml-text);
}

/* ── 2. SURFACES — one background everywhere ─────────────────────────────── */
html, body, .main, .main-content, main, .admin-main, .page-wrapper{ background:var(--ml-bg) !important; color:var(--ml-text) !important; }
.sidebar, .admin-sidebar, .topbar, .top-bar, .mobile-topbar, .sidebar-brand, .sidebar-footer{ background:var(--ml-surface) !important; color:var(--ml-text) !important; border-color:var(--ml-border) !important; }
html[data-theme] .card, html[data-theme] .card-body, html[data-theme] .card-footer, html[data-theme] .kpi, html[data-theme] .stat-card, html[data-theme] .kpi-card, html[data-theme] .content-editor, html[data-theme] .plan-card,
html[data-theme] .panel, html[data-theme] .box, html[data-theme] .well, html[data-theme] .page-hero, html[data-theme] .admin-header{
  background:var(--ml-surface) !important; color:var(--ml-text) !important; border-color:var(--ml-border) !important;
}
html[data-theme] .card{ border:1px solid var(--ml-border) !important; box-shadow:none; }
html[data-theme] .card .card-header{ background:var(--ml-surface-2) !important; color:var(--ml-text) !important; border-color:var(--ml-border) !important; }
html[data-theme] .page-hero, html[data-theme] .admin-header{ background-image:none !important; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.page-title,.admin-title,.card-title,.modal-title,.offcanvas-title,.logo-text{ color:var(--ml-text) !important; }
p, label, .form-label, .form-check-label, li, dt, dd, th, td, small, .small, .page-subtitle{ color:inherit; }
.t1, .text-body, .text-dark, .text-black{ color:var(--ml-text) !important; }
.t2{ color:var(--ml-text-2) !important; }
.t3, .text-muted, .text-secondary, .text-body-secondary, .form-text{ color:var(--ml-text-3) !important; }
.bg-white, .bg-light, .bg-body, .bg-body-tertiary, .bg-body-secondary{ background-color:var(--ml-surface-2) !important; color:var(--ml-text) !important; }
hr{ border-color:var(--ml-border) !important; opacity:1; }
a{ color:var(--ml-accent); }

/* Sidebar (keeps v1.4.0 highlighted active item) */
.sidebar .nav-link, .sidebar .nav-label, .admin-nav-link{ color:var(--ml-text-2) !important; }
.sidebar .nav-link:hover, .admin-nav-link:hover{ background:var(--ml-hover) !important; color:var(--ml-text) !important; }
html[data-theme] .sidebar .nav-section, .admin-nav-section{ color:var(--ml-text-3) !important; }
.admin-brand, .sidebar .logo-text, .sidebar .logo-sub{ color:var(--ml-text) !important; }
html[data-theme] .sidebar .nav-link.active, html[data-theme] .sidebar .nav-link.active, html[data-theme] .admin-nav-link.active{
  background:linear-gradient(135deg,var(--ml-accent),var(--ml-accent-2)) !important; color:#fff !important;
}
html[data-theme] .sidebar .nav-link.active i, html[data-theme] .sidebar .nav-link.active .nav-label, html[data-theme] .admin-nav-link.active i{ color:#fff !important; }

/* ── 3. TABLES ───────────────────────────────────────────────────────────── */
html[data-theme] .table, html[data-theme] table{ color:var(--ml-text) !important; --bs-table-color:var(--ml-text); --bs-table-bg:transparent; --bs-table-striped-color:var(--ml-text); --bs-table-hover-color:var(--ml-text); --bs-table-hover-bg:var(--ml-hover); --bs-table-striped-bg:var(--ml-surface-2); border-color:var(--ml-border) !important; }
html[data-theme] .table > :not(caption) > * > *{ background-color:transparent; color:inherit; border-color:var(--ml-border) !important; }
html[data-theme] table thead th, html[data-theme] .table thead th, html[data-theme] table.table-modern thead th{ background:var(--ml-surface-2) !important; color:var(--ml-text-3) !important; border-color:var(--ml-border) !important; }
html[data-theme] table tbody td{ border-color:var(--ml-border) !important; }
html[data-theme] table tbody tr:hover > td{ background:var(--ml-hover) !important; }

/* ── 4. POP-UPS: modals, off-canvas, dropdowns, popovers, tooltips ─────── */
html[data-theme] .modal-content, html[data-theme] .offcanvas, html[data-theme] .popover, html[data-theme] .dropdown-menu, html[data-theme] .coltoggle-menu, html[data-theme] .tv-menu,
html[data-theme] .list-group-item, html[data-theme] .accordion-item, html[data-theme] .accordion-button{
  background:var(--ml-surface) !important; color:var(--ml-text) !important; border-color:var(--ml-border) !important;
}
html[data-theme] .modal-content, html[data-theme] .dropdown-menu, html[data-theme] .popover{ box-shadow:var(--ml-shadow) !important; }
html[data-theme] .modal-header, html[data-theme] .modal-footer, html[data-theme] .offcanvas-header{ border-color:var(--ml-border) !important; background:transparent !important; color:var(--ml-text) !important; }
html[data-theme] .modal-body{ color:var(--ml-text) !important; }
html[data-theme] .dropdown-item{ color:var(--ml-text) !important; }
html[data-theme] .dropdown-item:hover, html[data-theme] .dropdown-item:focus{ background:var(--ml-hover) !important; color:var(--ml-text) !important; }
html[data-theme] .dropdown-item.active, html[data-theme] .dropdown-item:active{ background:var(--ml-accent) !important; color:#fff !important; }
html[data-theme] .dropdown-divider{ border-color:var(--ml-border) !important; }
html[data-theme] .dropdown-header{ color:var(--ml-text-3) !important; }
html[data-theme] .popover-header{ background:var(--ml-surface-2) !important; color:var(--ml-text) !important; border-color:var(--ml-border) !important; }
html[data-theme] .popover-body{ color:var(--ml-text) !important; }
html[data-theme] .accordion-button:not(.collapsed){ background:var(--ml-surface-2) !important; }
html:not([data-theme="light"]) .btn-close{ filter:invert(1) grayscale(1) brightness(2); }
html[data-theme] .tooltip-inner{ background:var(--ml-text) !important; color:var(--ml-bg) !important; }
/* Search / autocomplete result lists (class names used across pages) */
html[data-theme] div[class*="search-results"], html[data-theme] ul[class*="search-results"], html[data-theme] div[class*="suggestions"], html[data-theme] ul[class*="suggestions"],
html[data-theme] div[class*="autocomplete"], html[data-theme] ul[class*="autocomplete"], html[data-theme] .typeahead, html[data-theme] div[class*="results-panel"], html[data-theme] div[class*="dropdown-list"]{
  background:var(--ml-surface) !important; color:var(--ml-text) !important; border-color:var(--ml-border) !important;
}

/* ── 5. NOTIFICATIONS, ALERTS, BANNERS, TOASTS ───────────────────────────── */
html[data-theme] .alert, html[data-theme] .alert-banner, html[data-theme] .toast, html[data-theme] .toast-body, html[data-theme] .toast-header, html[data-theme] .notice, html[data-theme] .banner,
html[data-theme] #pageAlert > .alert, html[data-theme] .flash, html[data-theme] div[class*="notification-item"], html[data-theme] div[class*="notif-item"], html[data-theme] div.notification, html[data-theme] .notif-toast{
  background:var(--ml-info-bg) !important; color:var(--ml-text) !important; border:1px solid var(--ml-info-bd) !important;
}
html[data-theme] .toast-header{ border-width:0 0 1px 0 !important; }
html[data-theme] .alert-success, html[data-theme] .alert-banner.success, html[data-theme] .toast.bg-success, html[data-theme] .text-bg-success.toast{ background:var(--ml-ok-bg) !important; border-color:var(--ml-ok-bd) !important; color:var(--ml-text) !important; }
html[data-theme] .alert-danger, html[data-theme] .alert-error, html[data-theme] .alert-banner.danger, html[data-theme] .alert-banner:not(.success):not(.info):not(.warning):not(.blue), html[data-theme] .toast.bg-danger, html[data-theme] .toast.bg-error{ background:var(--ml-err-bg) !important; border-color:var(--ml-err-bd) !important; color:var(--ml-text) !important; }
html[data-theme] .alert-warning, html[data-theme] .alert-banner.warning, html[data-theme] .toast.bg-warning{ background:var(--ml-warn-bg) !important; border-color:var(--ml-warn-bd) !important; color:var(--ml-text) !important; }
html[data-theme] .alert-info, html[data-theme] .alert-primary, html[data-theme] .alert-secondary, html[data-theme] .alert-light, html[data-theme] .alert-dark, html[data-theme] .alert-banner.info, html[data-theme] .alert-banner.blue, html[data-theme] .toast.bg-info{ background:var(--ml-info-bg) !important; border-color:var(--ml-info-bd) !important; color:var(--ml-text) !important; }
html[data-theme] .alert *, html[data-theme] .alert-banner *, html[data-theme] .toast *{ color:inherit; }
html[data-theme] .alert a, html[data-theme] .alert-banner a, html[data-theme] .toast a{ color:var(--ml-accent) !important; text-decoration:underline; }
html[data-theme] .alert-success > i:first-child, html[data-theme] .alert-banner.success > i:first-child{ color:var(--ml-ok) !important; }
html[data-theme] .alert-danger > i:first-child, html[data-theme] .alert-banner.danger > i:first-child{ color:var(--ml-err) !important; }
html[data-theme] .alert-warning > i:first-child, html[data-theme] .alert-banner.warning > i:first-child{ color:var(--ml-warn) !important; }

/* ── 6. FORMS & SEARCH ───────────────────────────────────────────────────── */
html[data-theme] .form-control, html[data-theme] .form-select, html[data-theme] input[type="text"], html[data-theme] input[type="search"], html[data-theme] input[type="email"],
html[data-theme] input[type="number"], html[data-theme] input[type="password"], html[data-theme] input[type="url"], html[data-theme] input[type="tel"], html[data-theme] input[type="date"],
html[data-theme] input[type="datetime-local"], html[data-theme] input[type="month"], html[data-theme] textarea, html[data-theme] select{
  background-color:var(--ml-input) !important; color:var(--ml-text) !important; border-color:var(--ml-border-2) !important;
}
html[data-theme] .form-control::placeholder, html[data-theme] textarea::placeholder, html[data-theme] input::placeholder{ color:var(--ml-text-3) !important; opacity:1; }
html[data-theme] .form-control:focus, html[data-theme] .form-select:focus, html[data-theme] input:focus, html[data-theme] textarea:focus, html[data-theme] select:focus{
  border-color:var(--ml-accent) !important; box-shadow:0 0 0 3px var(--ml-accent-soft) !important;
}
html[data-theme] .form-control:disabled, html[data-theme] .form-select:disabled, html[data-theme] input:disabled, html[data-theme] textarea:disabled{ background-color:var(--ml-surface-2) !important; color:var(--ml-text-3) !important; }
html[data-theme] select option{ background:var(--ml-surface) !important; color:var(--ml-text) !important; }
html[data-theme] .input-group-text{ background:var(--ml-surface-2) !important; color:var(--ml-text-2) !important; border-color:var(--ml-border-2) !important; }
html:not([data-theme="light"]) .form-select{ background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23d4d4d8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  /* v1.5.1 — some selects set a "background:" shorthand elsewhere, which reset
     repeat/size/position and tiled the arrow across the whole box. Pin them. */
  background-repeat:no-repeat !important; background-position:right .6rem center !important; background-size:14px 10px !important; }
html:not([data-theme="light"]) input[type="date"]::-webkit-calendar-picker-indicator,
html:not([data-theme="light"]) input[type="datetime-local"]::-webkit-calendar-picker-indicator{ filter:invert(1); }
html[data-theme] .form-check-input{ background-color:var(--ml-input); border-color:var(--ml-border-2); }
html[data-theme] .form-check-input:checked{ background-color:var(--ml-accent); border-color:var(--ml-accent); }

/* ── 7. BUTTONS ──────────────────────────────────────────────────────────── */
html[data-theme] .btn-outline, html[data-theme] .btn-outline-secondary, html[data-theme] .btn-outline-dark, html[data-theme] .btn-outline-light, html[data-theme] .btn-light, html[data-theme] .btn-secondary, html[data-theme] .btn-default{
  background:var(--ml-surface) !important; color:var(--ml-text) !important; border:1px solid var(--ml-border-2) !important;
}
html[data-theme] .btn-outline:hover, html[data-theme] .btn-outline-secondary:hover, html[data-theme] .btn-outline-dark:hover, html[data-theme] .btn-outline-light:hover, html[data-theme] .btn-light:hover, html[data-theme] .btn-secondary:hover, html[data-theme] .btn-default:hover{
  background:var(--ml-hover) !important; color:var(--ml-text) !important; border-color:var(--ml-accent) !important;
}
html[data-theme] .btn-ghost, html[data-theme] .btn-link{ color:var(--ml-text-2) !important; }
html[data-theme] .btn-ghost:hover{ background:var(--ml-hover) !important; color:var(--ml-text) !important; }
html[data-theme] .btn-primary{ background:var(--ml-accent) !important; border-color:var(--ml-accent) !important; color:#fff !important; }
html[data-theme] .btn-primary:hover{ background:var(--ml-accent-2) !important; border-color:var(--ml-accent-2) !important; }
html[data-theme] .btn-success, html[data-theme] .btn-danger, html[data-theme] .btn-warning, html[data-theme] .btn-info{ color:#fff !important; }
html[data-theme] .btn-outline-primary{ color:var(--ml-accent) !important; border-color:var(--ml-accent) !important; background:transparent !important; }
html[data-theme] .btn-outline-primary:hover{ background:var(--ml-accent) !important; color:#fff !important; }
html[data-theme] .btn-group > .btn.active, html[data-theme] .btn-check:checked + .btn{ background:var(--ml-accent) !important; border-color:var(--ml-accent) !important; color:#fff !important; }

/* ── 8. TABS, PAGINATION, BADGES, MISC ──────────────────────────────────── */
html[data-theme] .nav-tabs{ border-color:var(--ml-border) !important; }
html[data-theme] .nav-tabs .nav-link{ color:var(--ml-text-3) !important; }
html[data-theme] .nav-tabs .nav-link.active{ background:var(--ml-surface) !important; color:var(--ml-text) !important; border-color:var(--ml-border) var(--ml-border) var(--ml-surface) !important; }
html[data-theme] .tabs .tab-btn{ color:var(--ml-text-3) !important; }
html[data-theme] .tabs .tab-btn.active{ color:var(--ml-text) !important; }
html[data-theme] .pagination .page-link{ background:var(--ml-surface) !important; color:var(--ml-text) !important; border-color:var(--ml-border) !important; }
html[data-theme] .pagination .page-item.active .page-link{ background:var(--ml-accent) !important; border-color:var(--ml-accent) !important; color:#fff !important; }
html[data-theme] .badge.bg-light, html[data-theme] .badge.text-bg-light, html[data-theme] .badge.bg-white{ background:var(--ml-surface-3) !important; color:var(--ml-text) !important; }
html[data-theme] .progress{ background:var(--ml-surface-3) !important; }
html[data-theme] code, html[data-theme] pre, html[data-theme] kbd{ background:var(--ml-surface-2) !important; color:var(--ml-text) !important; }
html[data-theme] .ui-cust, html[data-theme] .ui-cust-fab{ background:var(--ml-surface) !important; color:var(--ml-text) !important; }

/* ── 9. HARD-CODED COLOURS in older pages (inline style="…") ─────────────
   DARK: black/near-black text becomes white; white/light panels go dark grey.
   LIGHT: the portal's old dark-navy panels become white with dark text.   */
html:not([data-theme="light"]) [style*="color:#000"], html:not([data-theme="light"]) [style*="color: #000"],
html:not([data-theme="light"]) [style*="color:black"], html:not([data-theme="light"]) [style*="color: black"],
html:not([data-theme="light"]) [style*="color:#111"], html:not([data-theme="light"]) [style*="color:#222"],
html:not([data-theme="light"]) [style*="color:#333"], html:not([data-theme="light"]) [style*="color: #333"],
html:not([data-theme="light"]) [style*="color:#0f172a"], html:not([data-theme="light"]) [style*="color: #0f172a"],
html:not([data-theme="light"]) [style*="color:#1e293b"], html:not([data-theme="light"]) [style*="color:#1f2937"],
html:not([data-theme="light"]) [style*="color:#111827"], html:not([data-theme="light"]) [style*="color:#212529"],
html:not([data-theme="light"]) [style*="color:#334155"], html:not([data-theme="light"]) [style*="color:#374151"]{ color:var(--ml-text) !important; }
html:not([data-theme="light"]) [style*="background:#fff"], html:not([data-theme="light"]) [style*="background: #fff"],
html:not([data-theme="light"]) [style*="background-color:#fff"], html:not([data-theme="light"]) [style*="background-color: #fff"],
html:not([data-theme="light"]) [style*="background:white"], html:not([data-theme="light"]) [style*="background: white"],
html:not([data-theme="light"]) [style*="background:#f8fafc"], html:not([data-theme="light"]) [style*="background:#f1f5f9"],
html:not([data-theme="light"]) [style*="background:#f9fafb"], html:not([data-theme="light"]) [style*="background:#f3f4f6"],
html:not([data-theme="light"]) [style*="background:#fafafa"], html:not([data-theme="light"]) [style*="background:#f5f5f5"]{
  background:var(--ml-surface-2) !important; color:var(--ml-text) !important;
}
html[data-theme="light"] [style*="background:#0f1523"], html[data-theme="light"] [style*="background:#141d2e"],
html[data-theme="light"] [style*="background:#1a2236"], html[data-theme="light"] [style*="background:#1f2940"],
html[data-theme="light"] [style*="background:#0d1526"], html[data-theme="light"] [style*="background:#070d1a"],
html[data-theme="light"] [style*="background:#0b1220"], html[data-theme="light"] [style*="background:#111827"],
html[data-theme="light"] [style*="background:#1e293b"], html[data-theme="light"] [style*="background: #1e293b"],
html[data-theme="light"] [style*="background:#0f172a"], html[data-theme="light"] [style*="background:var(--bg-2)"]{
  background:var(--ml-surface-2) !important; color:var(--ml-text) !important;
}
html[data-theme="light"] [style*="color:#e2e8f0"], html[data-theme="light"] [style*="color:#f0f4f8"],
html[data-theme="light"] [style*="color:#cbd5e1"], html[data-theme="light"] [style*="color:#c4d1e0"],
html[data-theme="light"] [style*="color:#f1f5f9"], html[data-theme="light"] [style*="color:#f8fafc"],
html[data-theme="light"] [style*="color:rgba(255,255,255"]{ color:var(--ml-text) !important; }
/* …but white text on a genuinely coloured button/badge stays white */
html[data-theme] [class*="btn-primary"][style], html[data-theme] [class*="btn-success"][style], html[data-theme] [class*="btn-danger"][style], html[data-theme] .badge[style*="background:#"]{ color:#fff; }

/* ── 10. PORTAL ADMIN specifics ─────────────────────────────────────────── */
html[data-theme] .admin-hamburger{ background:var(--ml-surface) !important; color:var(--ml-text) !important; border-color:var(--ml-border) !important; }
html[data-theme] .admin-sidebar{ border-right:1px solid var(--ml-border) !important; }
html[data-theme] .user-row:hover > td{ background:var(--ml-hover) !important; }
html[data-theme] .modal{ background:rgba(0,0,0,.55); }