/* ============================================================================
   MGIoT — Full dark mode (2026)  •  loads LAST (after mgiot-redesign-2027.css
   and every mgiot-page-*.css)
   ----------------------------------------------------------------------------
   Turns every dashboard page dark: deep-navy page background, dark slate
   surfaces, light text. Works by (1) flipping the shared CSS variables that
   most components read (--mg2-*/--mgo-*/--mg-* from the legacy component
   layer, and --r27-* from the 2027 "Light & Minimal" shell/Overview layer),
   and (2) overriding the hardcoded `!important` surface rules (mostly
   `background:#fff`) that a handful of older stylesheets set directly instead
   of through a variable.
   Visual only — no JS, routes, APIs, data, or business logic touched.
   Dashboard web files only → APK rebuild NOT required.

   2026-07-02: re-approved by user ("professional SaaS, darker") after 2027's
   Light & Minimal direction. Re-enabled + extended with the --r27-* flips
   below so the newer shell/Overview/pager layer goes dark too, not just the
   legacy component layer this file originally covered.
   ========================================================================== */

:root{
  /* Dark palette */
  --d-bg:#060F22;
  --d-bg-2:#081A33;
  --d-surface:#0E1E3A;
  --d-surface-2:#13294C;
  --d-surface-3:#1A335C;
  --d-border:rgba(255,255,255,.09);
  --d-border-2:rgba(255,255,255,.15);
  --d-text:#E8EEF8;
  --d-text-strong:#FFFFFF;
  --d-muted:#A9BBD6;
  --d-faint:#7E93B5;
  --d-row-border:rgba(255,255,255,.07);
  --d-row-hover:rgba(255,255,255,.045);
  --d-input-bg:#0B1A33;

  /* Flip the MGIoT 2026 helper vars (dashboard + installations CSS read these) */
  --mg2-surface:var(--d-surface);
  --mg2-surface-2:var(--d-surface-2);
  --mg2-border:var(--d-border);
  --mg2-border-2:var(--d-border-2);
  --mg2-text:var(--d-text);
  --mg2-muted:var(--d-muted);
  --mg2-faint:var(--d-faint);
  --mg2-bg:var(--d-bg);
  --mg2-row-border:var(--d-row-border);
  --mg2-row-hover:var(--d-row-hover);
  --mg2-grid:rgba(255,255,255,.08);
  --mg2-th-bg:var(--d-surface-2);
  --mg2-th-text:#B6CAEA;
  --mg2-input-bg:var(--d-input-bg);
  --mg2-shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --mg2-shadow-md:0 12px 30px rgba(0,0,0,.42);
  --mg2-shadow-lg:0 24px 60px rgba(0,0,0,.55);

  /* Flip the professional-theme vars (--mgo-*) */
  --mgo-bg:var(--d-bg);
  --mgo-surface:var(--d-surface);
  --mgo-surface-2:var(--d-surface-2);
  --mgo-border:var(--d-border);
  --mgo-border-2:var(--d-border-2);
  --mgo-text:var(--d-text);
  --mgo-muted:var(--d-muted);
  --mgo-soft:var(--d-faint);

  /* Flip the mgiot-v2 design tokens (--mg-*) used across many pages */
  --mg-bg:var(--d-bg);
  --mg-page-bg:var(--d-bg);
  --mg-surface:var(--d-surface);
  --mg-surface-soft:var(--d-surface-2);
  --mg-surface-row:var(--d-surface);
  --mg-border:var(--d-border);
  --mg-border-soft:var(--d-row-border);
  --mg-text-strong:var(--d-text-strong);
  --mg-text:var(--d-text);
  --mg-text-mid:var(--d-muted);
  --mg-text-soft:var(--d-muted);
  --mg-text-muted:var(--d-faint);
  --mg-text-faint:var(--d-faint);
}

/* ── Page background ───────────────────────────────────────────────────── */
body{
  background:
    radial-gradient(1000px 560px at 100% -220px, rgba(0,109,255,.18), transparent 60%),
    radial-gradient(840px 480px at 0% 140px, rgba(0,194,255,.10), transparent 60%),
    var(--d-bg) !important;
  color:var(--d-text) !important;
}
html[dir="ltr"] body{
  background:
    radial-gradient(1000px 560px at 0% -220px, rgba(0,109,255,.18), transparent 60%),
    radial-gradient(840px 480px at 100% 140px, rgba(0,194,255,.10), transparent 60%),
    var(--d-bg) !important;
}
.app-page.active{ background:transparent !important; }
.main{ background:transparent !important; }

/* ── Topbar / page headers ─────────────────────────────────────────────── */
.main-header,.topbar,.page-header{
  background:rgba(14,30,58,.72) !important;
  border:1px solid var(--d-border-2) !important;
  box-shadow:0 10px 34px rgba(0,0,0,.45) !important;
}
.main-header h1,#viewTitle,.main h1{ color:var(--d-text-strong) !important; }
.main-header-titles p,#viewDesc{ color:var(--d-muted) !important; }
.topbar-btn,.sidebar-toggle{ background:var(--d-surface-2) !important; color:#BFE6FF !important; border-color:var(--d-border-2) !important; }
.topbar-btn:hover,.sidebar-toggle:hover{ background:var(--d-surface-3) !important; }

/* ── Cards, panels, generic surfaces ───────────────────────────────────── */
.mg-card,.card,.panel,.stat-card,.data-card,.mg-data-card,
[class*="card"]:not(.login-card):not(.nav-card):not(.brand-card):not(.ov-quick-card):not(.ov-kpi){
  background:var(--d-surface) !important;
  border-color:var(--d-border) !important;
  color:var(--d-text) !important;
}
.mg-card:hover,.card:hover,.stat-card:hover{ border-color:var(--d-border-2) !important; box-shadow:var(--mg2-shadow-md) !important; }
.mg-card-title,.main h2,.card h2,.panel h2,.section-title{ color:var(--d-text) !important; }
.mg-card-subtitle,.mg-text-faint,.mg-muted,.muted,.subtitle{ color:var(--d-faint) !important; }

/* Stat cards keep gradient accent; value to bright blue, label muted */
.mg-stat,.stat-card{ background:var(--d-surface) !important; }
.mg-stat-value,.stat-value,.stat-card .value,.kpi-card .value{ color:#5AA6FF !important; }
.mg-stat-label,.stat-label,.stat-card .label,.kpi-card .label{ color:var(--d-muted) !important; }

/* Info boxes (overview financial, detail boxes) */
.mg-info-box,.instP-box,.info-box{ background:var(--d-surface-2) !important; border-color:var(--d-border) !important; }
.mg-info-label,.instP-lbl,.info-label{ color:var(--d-faint) !important; }
.mg-info-value,.instP-val,.info-value{ color:var(--d-text) !important; }

/* ── Tables ────────────────────────────────────────────────────────────── */
.mg-table-wrap,.table-wrap{ background:var(--d-surface) !important; border-color:var(--d-border) !important; }
.mg-table,table{ background:transparent !important; }
.mg-table thead th,th{ background:var(--d-surface-2) !important; color:#B6CAEA !important; border-bottom-color:var(--d-border-2) !important; }
.mg-table tbody td,td{ color:var(--d-text) !important; border-bottom-color:var(--d-row-border) !important; }
.mg-table tbody tr:hover td,tr:hover td{ background:var(--d-row-hover) !important; }
.mg-cell-strong{ color:var(--d-text-strong) !important; }

/* ── Inputs, selects, textareas ────────────────────────────────────────── */
input,select,textarea,.mg-input,.mg-select,.mg-search-input{
  background:var(--d-input-bg) !important;
  color:var(--d-text) !important;
  border-color:var(--d-border-2) !important;
}
input::placeholder,textarea::placeholder{ color:var(--d-faint) !important; }
select option{ background:#0B1A33 !important; color:var(--d-text) !important; }
.mg-search-icon{ color:var(--d-faint) !important; }
input:focus,select:focus,textarea:focus,.mg-search-input:focus,.mg-select:focus{ border-color:#00C2FF !important; box-shadow:0 0 0 4px rgba(0,194,255,.18) !important; }
label,.label,.modal-lbl,.quote-label,.field label{ color:var(--d-muted) !important; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.mg-btn,button.btn,.btn-secondary{
  background:var(--d-surface-2) !important; color:var(--d-text) !important; border:1px solid var(--d-border-2) !important;
}
.mg-btn:hover{ background:var(--d-surface-3) !important; }
.mg-btn--primary,.btn-primary,button.primary,button.save{
  background:linear-gradient(135deg,#006DFF 0%,#0A58CA 55%,#00C2FF 140%) !important; color:#fff !important; border-color:transparent !important;
}
.mg-btn--danger,.btn-danger,button.danger{ background:rgba(226,61,90,.18) !important; color:#FF9DAD !important; border-color:rgba(226,61,90,.42) !important; }
.mg-btn--success,.btn-success,button.success{ background:rgba(18,185,129,.18) !important; color:#5FE3B0 !important; border-color:rgba(18,185,129,.42) !important; }
.mg-btn--ghost-brand{ background:rgba(0,109,255,.16) !important; color:#7FD8FF !important; border-color:rgba(0,194,255,.32) !important; }
.inst-btn{ background:var(--d-surface-2) !important; color:var(--d-text) !important; border-color:var(--d-border-2) !important; }
.inst-btn--success{ background:rgba(18,185,129,.18) !important; color:#5FE3B0 !important; border-color:rgba(18,185,129,.42) !important; }
.inst-btn--danger{ background:rgba(226,61,90,.18) !important; color:#FF9DAD !important; border-color:rgba(226,61,90,.42) !important; }

/* ── Status badges (text + colour, readable on dark) ───────────────────── */
.mg-badge{ background:rgba(255,255,255,.08) !important; color:#CBD9EF !important; border:1px solid var(--d-border-2) !important; }
.mg-badge--success,.badge.success,.status.success,.pill.success{ background:rgba(18,185,129,.16) !important; color:#5FE3B0 !important; border-color:rgba(18,185,129,.4) !important; }
.mg-badge--warn,.badge.warning,.status.warning,.pill.warning{ background:rgba(246,166,9,.16) !important; color:#F8C66B !important; border-color:rgba(246,166,9,.4) !important; }
.mg-badge--danger,.badge.danger,.status.danger,.pill.danger{ background:rgba(226,61,90,.16) !important; color:#FF9DAD !important; border-color:rgba(226,61,90,.4) !important; }
.mg-badge--info,.badge.info,.status.info,.pill.info{ background:rgba(0,194,255,.16) !important; color:#7FD8FF !important; border-color:rgba(0,194,255,.4) !important; }

/* ── Installations cards (scoped page) ─────────────────────────────────── */
#viewInstallations .inst-card{ background:var(--d-surface) !important; border-color:var(--d-border) !important; }
#viewInstallations .inst-card:hover{ border-color:var(--d-border-2) !important; }
#viewInstallations .inst-customer{ color:var(--d-text) !important; }
#viewInstallations .inst-detail-val{ color:var(--d-text) !important; }
#viewInstallations .inst-detail-val.inst-mono{ color:#9FD2F0 !important; }
#viewInstallations .inst-detail-label,#viewInstallations .inst-subline{ color:var(--d-faint) !important; }
#viewInstallations .inst-skel{ background:var(--d-surface) !important; border-color:var(--d-border) !important; }
#viewInstallations .inst-skel-line{ background:linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.12) 37%, rgba(255,255,255,.05) 63%) !important; background-size:400% 100% !important; }

/* ── Modals ────────────────────────────────────────────────────────────── */
.modal,.dialog,.modal-card,.mg-modal{ background:var(--d-surface) !important; color:var(--d-text) !important; border-color:var(--d-border-2) !important; }
.modal h2,.dialog h2,.modal-title,.mg-modal-title{ color:var(--d-text-strong) !important; }
.modal-bg.show,.modal-backdrop.show,.mg-modal-overlay.show{ background:rgba(2,8,20,.66) !important; }

/* ── Empty / loading / misc text ───────────────────────────────────────── */
.mg-empty,.mg-empty-text,.mg-loading{ color:var(--d-muted) !important; }
.mg-empty-title{ color:var(--d-text) !important; }
.mg-empty-icon,.mg-empty-text{ color:var(--d-faint) !important; }
.mg-strip{ background:linear-gradient(180deg,#006DFF,#00C2FF) !important; }

/* ── Scrollbars ────────────────────────────────────────────────────────── */
.main ::-webkit-scrollbar{ width:10px; height:10px; }
.main ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:999px; }
.main ::-webkit-scrollbar-track{ background:transparent; }

/* ============================================================================
   2027 shell / Overview / shared-pager layer — flip the --r27-* tokens
   (mgiot-redesign-2027.css and the .mg-pager rules in mgiot-redesign-system.css
   both key almost every color off these vars, so redefining them here at
   :root, loaded after both, repaints the sidebar, topbar, KPI cards, tables,
   badges and pager without needing to touch either file directly).
   ========================================================================== */
:root{
  --r27-brand:#2F7BF0; --r27-brand-600:#1D5FC7; --r27-accent:#5B98F5; --r27-surface:var(--d-surface); --r27-surface-2:var(--d-surface-2);
  --r27-line:var(--d-border); --r27-line-2:var(--d-border-2);
  --r27-ink:var(--d-text-strong); --r27-ink-mid:var(--d-text); --r27-ink-soft:var(--d-muted); --r27-ink-faint:var(--d-faint);
  --r27-green:#5FE3B0; --r27-green-bg:rgba(18,185,129,.16);
  --r27-amber:#F8C66B; --r27-amber-bg:rgba(246,166,9,.16);
  --r27-red:#FF9DAD; --r27-red-bg:rgba(226,61,90,.16);
  --r27-cyan:#7FD8FF; --r27-cyan-bg:rgba(0,194,255,.16);
  --r27-violet:#C4B0FF; --r27-violet-bg:rgba(109,64,214,.18);
  --r27-sh:0 1px 2px rgba(0,0,0,.35);
  --r27-sh-md:0 12px 30px rgba(0,0,0,.42);
}

/* Keep the logo chips a deliberate light tile so the MGIoT/Hader logo images
   (unknown internal colors) stay crisp on a dark sidebar — matches common
   dark-mode SaaS practice of a light "badge" around a brand mark. */
.app-page .sidebar-logo-box{ background:rgba(255,255,255,.94) !important; }
.app-page .main .hader-hero-logo{ background:rgba(255,255,255,.94) !important; }

/* Overview hero / ghost button hover states that hardcoded background:#fff */
#viewOverview .ov-ghost:hover,
#viewOverview .mg-btn:hover{ background:var(--d-surface-3) !important; }

/* Modal internals that hardcoded background:#fff instead of a var */
.modal-body input, .modal-body select, .modal-body textarea,
.mg-modal-body input, .mg-modal-body select, .mg-modal-body textarea,
.modal-body .form-control, .modal-body .form-select,
.mg-modal-body .form-control, .mg-modal-body .form-select{
  background:var(--d-input-bg) !important; color:var(--d-text) !important;
  border-color:var(--d-border-2) !important;
}
.mg-modal-head{ background:linear-gradient(180deg,var(--d-surface-2),var(--d-surface)) !important; }.modal-hd{ background:linear-gradient(180deg,var(--d-surface-2),var(--d-surface)) !important; }
.mg-modal-foot .mg-btn:not(.mg-btn--primary):not(.mg-btn--danger),
.modal-card .btn-secondary, .modal-card .btn{
  background:var(--d-surface-2) !important; color:var(--d-text) !important;
  border-color:var(--d-border-2) !important;
}
.mg-btn--danger, .modal-card .btn-danger, .modal-card .mg-btn--danger{
  background:rgba(226,61,90,.16) !important; border-color:rgba(226,61,90,.4) !important; color:var(--r27-red) !important;
}
.mg-btn--danger:hover, .modal-card .btn-danger:hover, .modal-card .mg-btn--danger:hover{
  background:rgba(226,61,90,.26) !important; border-color:rgba(226,61,90,.5) !important;
}

/* Generic sweep for any page-specific "box"/"card"/"panel" surface that a
   narrower stylesheet (e.g. mgiot-page-*.css) still paints white directly.
   Background/border/text only — no layout/spacing touched, so this is safe
   even where it's redundant with a more specific rule above. */
.app-page .main [class*="-box"],
.app-page .main [class*="-card"]:not(.mg-stat),
.app-page .main [class*="-panel"]{
  background:var(--d-surface) !important;
  border-color:var(--d-border) !important;
  color:var(--d-text) !important;
}

/* ── Login screen + a couple of sticky headers with hardcoded light bg ──── */
.login-page{
  background:
    radial-gradient(900px 500px at 80% -100px, rgba(0,109,255,.14), transparent 60%),
    radial-gradient(900px 500px at -100px 100%, rgba(0,194,255,.08), transparent 60%),
    var(--d-bg) !important;
}
.login-card{ background:var(--d-surface) !important; border-color:var(--d-border) !important; color:var(--d-text) !important; }
.main-header{ background:rgba(14,30,58,.86) !important; }
.modal-hd{ background:var(--d-surface) !important; color:var(--d-text) !important; }

/* ============================================================================
   ROOT CAUSE FIX (2026-07-02, follow-up): the generic single-class selectors
   above (`.mg-card`, `.mg-stat`, `.mg-table-wrap`, `.mg-badge--*`...) LOSE the
   specificity fight against `mgiot-redesign-system.css` and
   `mgiot-redesign-2027.css`, which style almost everything through
   `.app-page .main .foo` (3 class-selectors) or `#viewOverview .foo` /
   `#viewInstallations .foo` (ID-level specificity) — both beat a bare
   `.foo` !important rule regardless of which stylesheet loads last, because
   specificity always wins over source order. That's why the sidebar (styled
   through a variable read by an EQUALLY-specific 2027 rule) went dark, but
   cards/stats/tables/badges (styled through equally-specific
   redesign-system.css rules with the SAME specificity as 2027's, so
   redesign-system's hardcoded colors were winning the tie) stayed light —
   and why some table text stayed dark-on-dark ("data doesn't show").
   Fix: repeat the EXACT selectors from those two files here (same
   specificity, this file loads absolute last so ties go to us). ────────────
   ========================================================================== */

/* Sidebar label color — redesign-system.css forces resting/hover nav labels
   to dark ink (#0f1f3a) for a WHITE sidebar; that's invisible on a dark one. */
.sidebar .nav-item,
.sidebar .nav-top-item,
.sidebar .nav-section-hdr{ color:var(--d-muted) !important; }
.sidebar .nav-item:hover,
.sidebar .nav-top-item:hover,
.sidebar .nav-section-hdr:hover,
.sidebar .nav-item:focus,
.sidebar .nav-item:focus-visible,
.sidebar .nav-top-item:focus,
.sidebar .nav-top-item:focus-visible,
.sidebar .nav-section-hdr:focus,
.sidebar .nav-section-hdr:focus-visible{
  background:rgba(255,255,255,.06) !important; color:var(--d-text-strong) !important;
}
.sidebar .nav-item:hover .nav-text,
.sidebar .nav-item:hover > span:not(.nav-item-icon):not(.sidebar-badge),
.sidebar .nav-top-item:hover > span:not(.section-icon),
.sidebar .nav-section-hdr:hover > span:not(.section-icon):not(.section-arrow),
.sidebar .nav-item:focus-visible .nav-text{ color:var(--d-text-strong) !important; }
.sidebar .nav-item:hover .nav-item-icon,
.sidebar .nav-top-item:hover .section-icon,
.sidebar .nav-section-hdr:hover .section-icon{
  background:rgba(255,255,255,.1) !important; color:var(--d-text-strong) !important;
}
.app-page .sidebar .nav-item .nav-item-icon{ background:var(--d-surface-2) !important; color:var(--d-muted) !important; }
.app-page .sidebar .nav-section-hdr,
.app-page .sidebar .nav-section-hdr .section-label,
.app-page .sidebar .nav-section-hdr .section-icon,
.app-page .sidebar .nav-section-hdr .section-arrow,
.app-page .sidebar .nav-section:not(.collapsed) > .nav-section-hdr,
.app-page .sidebar .nav-section:not(.collapsed) > .nav-section-hdr .section-label,
.app-page .sidebar .nav-section:not(.collapsed) > .nav-section-hdr .section-icon,
.app-page .sidebar .nav-section:not(.collapsed) > .nav-section-hdr .section-arrow{
  color:var(--d-faint) !important;
}
.app-page .sidebar .sidebar-header h2{ color:var(--d-text-strong) !important; }
.app-page .sidebar .sidebar-header #sidebarUser{ color:var(--d-faint) !important; }

/* Stat / KPI cards */
.app-page .main .mg-stat{ background:var(--d-surface) !important; border-color:var(--d-border) !important; }
.app-page .main .mg-stat-value{ color:#5AA6FF !important; }
.app-page .main .mg-stat-label{ color:var(--d-muted) !important; }
.app-page .main .mg-stat-sub{ color:var(--d-faint) !important; }
.app-page .main .mg-stat--success .mg-stat-value{ color:#5FE3B0 !important; }
.app-page .main .mg-stat--warn .mg-stat-value{ color:#F8C66B !important; }
.app-page .main .mg-stat--danger .mg-stat-value{ color:#FF9DAD !important; }

/* Generic cards / panels */
.app-page .main .mg-card{ background:var(--d-surface) !important; border-color:var(--d-border) !important; }
.app-page .main .mg-card-title{ color:var(--d-text-strong) !important; }
.app-page .main .mg-card-subtitle{ color:var(--d-faint) !important; }

/* Toolbar / search / select */
.app-page .main .mg-search{ background:var(--d-input-bg) !important; border-color:var(--d-border-2) !important; }
.app-page .main .mg-search-input{ color:var(--d-text) !important; }
.app-page .main .mg-search-icon{ color:var(--d-faint) !important; }
.app-page .main .mg-select{ background:var(--d-input-bg) !important; border-color:var(--d-border-2) !important; color:var(--d-text) !important; }

/* Buttons */
.app-page .main .mg-btn{ background:var(--d-surface-2) !important; color:var(--d-text) !important; border-color:var(--d-border-2) !important; }
.app-page .main .mg-btn--primary{ background:linear-gradient(135deg,#006DFF 0%,#0A58CA 55%,#00C2FF 140%) !important; color:#fff !important; }
.app-page .main .mg-btn--success{ background:rgba(18,185,129,.18) !important; color:#5FE3B0 !important; border-color:rgba(18,185,129,.42) !important; }
.app-page .main .mg-btn--danger,
.app-page .main .inst-btn--delete{ background:rgba(226,61,90,.18) !important; color:#FF9DAD !important; border-color:rgba(226,61,90,.42) !important; }
.app-page .main .mg-btn--ghost-brand{ background:rgba(0,109,255,.16) !important; color:#7FD8FF !important; }

/* Tables */
.app-page .main .mg-table-wrap,
.app-page .main .table-wrap{ background:var(--d-surface) !important; border-color:var(--d-border) !important; }
.app-page .main .mg-table thead th,
.app-page .main table:not(.bare) thead th{ background:var(--d-surface-2) !important; color:#B6CAEA !important; border-bottom-color:var(--d-border-2) !important; }
.app-page .main .mg-table tbody td,
.app-page .main table:not(.bare) tbody td{ color:var(--d-text) !important; border-bottom-color:var(--d-row-border) !important; }
.app-page .main .mg-table tbody tr:nth-child(even) td{ background:rgba(255,255,255,.02) !important; }
.app-page .main .mg-table tbody tr:hover td{ background:var(--d-row-hover) !important; }
.app-page .main .mg-cell-strong{ color:var(--d-text-strong) !important; }

/* Badges */
.app-page .main .mg-badge--success,.app-page .main .badge.success{ background:rgba(18,185,129,.16) !important; color:#5FE3B0 !important; border-color:rgba(18,185,129,.4) !important; }
.app-page .main .mg-badge--warn,.app-page .main .badge.warning{ background:rgba(246,166,9,.16) !important; color:#F8C66B !important; border-color:rgba(246,166,9,.4) !important; }
.app-page .main .mg-badge--danger,.app-page .main .badge.danger{ background:rgba(226,61,90,.16) !important; color:#FF9DAD !important; border-color:rgba(226,61,90,.4) !important; }
.app-page .main .mg-badge--info,.app-page .main .badge.info{ background:rgba(0,194,255,.16) !important; color:#7FD8FF !important; border-color:rgba(0,194,255,.4) !important; }
.app-page .main .mg-badge--neutral{ background:rgba(255,255,255,.08) !important; color:#CBD9EF !important; border-color:var(--d-border-2) !important; }

/* Entity / installation cards */
.app-page .main .inst-card,
.app-page .main .mg-data-card{ background:var(--d-surface) !important; border-color:var(--d-border) !important; }
.app-page .main .inst-customer{ color:var(--d-text-strong) !important; }
.app-page .main .inst-subline{ color:var(--d-faint) !important; }
.app-page .main .inst-detail-grid{ background:var(--d-surface-2) !important; }
.app-page .main .inst-actions{ border-top-color:var(--d-row-border) !important; }
.app-page .main .inst-btn{ background:var(--d-surface-2) !important; color:var(--d-text) !important; border-color:var(--d-border-2) !important; }
.app-page .main .inst-btn--success{ background:rgba(18,185,129,.18) !important; color:#5FE3B0 !important; border-color:rgba(18,185,129,.42) !important; }
.app-page .main .inst-btn--danger{ background:rgba(226,61,90,.18) !important; color:#FF9DAD !important; border-color:rgba(226,61,90,.42) !important; }

/* Empty / loading / error states */
.app-page .main .mg-empty{ color:var(--d-muted) !important; }
.app-page .main .mg-empty-title{ color:var(--d-text) !important; }
.app-page .main .mg-empty-text{ color:var(--d-faint) !important; }
.app-page .main .mg-loading{ color:var(--d-muted) !important; }
.app-page .main .mg-error{ background:rgba(226,61,90,.14) !important; border-color:rgba(226,61,90,.4) !important; color:#FF9DAD !important; }
.app-page .main .mg-result-count{ color:var(--d-faint) !important; }

/* Form panels / modal cards (equal-specificity to redesign-system.css) */
.app-page .main .mg-form-panel,
.modal-card{ background:var(--d-surface) !important; border-color:var(--d-border-2) !important; }

/* ID-scoped Overview / Installations rules from mgiot-redesign-2027.css beat
   ANY class-based rule (ID specificity always wins), so match them exactly. */
#viewOverview .ov-welcome{ background:var(--d-surface) !important; border-color:var(--d-border) !important; color:var(--d-text) !important; }
#viewOverview .ov-welcome-text h1{ color:var(--d-text-strong) !important; }
#viewOverview .ov-welcome-text p{ color:var(--d-muted) !important; }
#viewOverview .mg-stat{ background:var(--d-surface) !important; border-color:var(--d-border) !important; }
#viewInstallations .inst-card{ background:var(--d-surface) !important; border-color:var(--d-border) !important; }
#viewInstallations .inst-customer{ color:var(--d-text-strong) !important; }
#viewInstallations .inst-detail-val{ color:var(--d-text) !important; }
#viewInstallations .inst-detail-label,
#viewInstallations .inst-subline{ color:var(--d-faint) !important; }

/* ============================================================================
   COMPREHENSIVE COLOR AUDIT (2026-07-02, pass 2 — user reported the theme
   still "not consistent" after pass 1's sidebar/mg-stat/mg-card fix). Passes
   1 & 2 fixed the pages visible in screenshots (Overview, Installations,
   sidebar). This pass greps the FULL ~24-file legacy stack (mgiot-design.css,
   mgiot-pro.css, mgiot-professional-style.css, mgiot-theme-2026.css,
   mgiot-release.css, mgiot-parity.css, mgiot-shell.css, mgiot-sidebar-fix.css,
   mgiot-commercial-hader.css, mgiot-warehouse-suite.css, every
   mgiot-page-*.css, mgiot-v2.css, style.css) for two remaining classes of bug:

   (A) SURFACE bugs — hardcoded light backgrounds (#fff, mostly on pages
       never screenshotted yet: Warehouse Suite (#viewProducts/#viewWarehouses/
       #viewSims/#viewStockTransfers), Activations, Authorizations, Active
       Customers, Backup, Payroll/HR ("hader" cards), quote modal, transfer
       modals. Fixed generically with a specificity-boosted wildcard sweep:
       `.app-page.app-page [class*="-card"]` etc. — repeating `.app-page`
       adds specificity without changing what it matches (every real element
       already has that class), so it reliably outranks any bare or 2-3-class
       legacy selector regardless of which of the 24 files it's in, #047857 forest green, #1D4ED8 royal
       blue, #0F172A near-black text,
       and (b) even where legible, look visually mismatched next to the
       brighter neon-ish accents (#5AA6FF blue / #5FE3B0 green / #7FD8FF cyan
       / #F8C66B amber / #FF9DAD red) pass 1 introduced elsewhere — two
       different color systems bleeding into the same screen. Normalized
       every one of these hexes to the single dark-mode accent set below.
   ========================================================================== */

/* ---- (A) generic specificity-boosted surface sweep -------------------- */
.app-page.app-page [class*="-card"]:not(.mg-stat),
.app-page.app-page [class*="-box"],
.app-page.app-page [class*="-panel"],
.app-page.app-page [class*="-summary"],
.app-page.app-page [class*="-metrics"],
.app-page.app-page [class*="-note"],
.app-page.app-page [class*="-kicker"],
.mg-modal [class*="-card"], .mg-modal [class*="-box"], .mg-modal [class*="-panel"],
.modal-card [class*="-card"], .modal-card [class*="-box"]{
  background:var(--d-surface) !important;
  border-color:var(--d-border) !important;
  color:var(--d-text) !important;
}
.app-page.app-page [class*="-metrics"] span,
.app-page.app-page [class*="-card"] h3,
.app-page.app-page [class*="-card"] h4{ color:var(--d-text-strong) !important; }

/* legacy buttons not on the mg-btn-- naming convention (wh-btn, st-btn-refresh,
   req-btn--*, bk-btn--*, ix-btn--*, prodWh-act--*, whc-act--*...) */
.app-page.app-page [class*="-btn"]:not([class*="danger"]):not([class*="success"]):not([class*="primary"]):not([class*="warn"]):not([class*="ghost"]),
.app-page.app-page [class*="-act"]:not([class*="danger"]):not([class*="success"]),
.app-page.app-page button:not(.mg-btn--primary):not(.mg-btn--danger):not(.mg-btn--success){
  background:var(--d-surface-2) !important; color:var(--d-text) !important; border-color:var(--d-border-2) !important;
}
.app-page.app-page [class*="-btn"][class*="danger"],
.app-page.app-page [class*="-act"][class*="danger"],
.app-page.app-page .badge-red{
  background:rgba(226,61,90,.18) !important; color:#FF9DAD !important; border-color:rgba(226,61,90,.42) !important;
}
.app-page.app-page [class*="-btn"][class*="success"],
.app-page.app-page .badge-green{
  background:rgba(18,185,129,.18) !important; color:#5FE3B0 !important; border-color:rgba(18,185,129,.42) !important;
}
.app-page.app-page .badge-orange{ background:rgba(246,166,9,.16) !important; color:#F8C66B !important; border-color:rgba(246,166,9,.4) !important; }
.app-page.app-page .badge-blue{ background:rgba(0,194,255,.16) !important; color:#7FD8FF !important; border-color:rgba(0,194,255,.4) !important; }
.app-page.app-page input, .app-page.app-page select, .app-page.app-page textarea{
  background:var(--d-input-bg) !important; color:var(--d-text) !important; border-color:var(--d-border-2) !important;
}
.footer-brand,.footer-logo,.modal-x{ color:var(--d-muted) !important; }
.modal-x:hover{ color:var(--d-text-strong) !important; background:rgba(255,255,255,.08) !important; }
.toast,.mg-toast{ background:var(--d-surface-2) !important; color:var(--d-text) !important; border-color:var(--d-border-2) !important; }

/* ---- (B) palette normalization: retint every stale light-theme accent --- */
.mg-stat-value,.mg-table .mg-cell-strong,.mg-search-input,.modal-hd h3,
.modal-body input,.modal-body select,.modal-body textarea,.quote-input,
.mg-row-card-title,.mg-info-value,.instP-val,.reqP-val,.prodWh-qty,.pay-invoice-summary .pay-summary-amount,.mgiot-edit-summary,
.hader-emp-head h3,.main-header-titles h1,.main-header h1{
  color:var(--d-text-strong) !important;
}
.mg-btn--primary,.btn-primary,.wh-btn.active,.prodWh-total,.fin-summary-row.grand,.mg-search-input:focus,.mg-select:focus,.quote-input:focus,
.quote-select:focus,.modal-body input:focus,.modal-body select:focus,
.modal-body textarea:focus,.wh-btn:hover,.inst-edit-section-title,
.quote-label,.quote-items-hdr,
.mg-loading,.req-card-type,.req-card-note,.hader-modal-note,.hader-policy h3,
.nav-section[data-section="hader"] .nav-section-hdr{
  color:#5AA6FF !important;
}
.mg-badge--success,.badge.success,.status.success,.pill.success,
.req-btn--success,.mg-btn--success,.btn-success,#viewWarehouses .whc-tag--sales{
  color:#5FE3B0 !important;
}
.mg-badge--info,.badge.info,.status.info,.pill.info,
#viewWarehouses .whc-tag--installation{
  color:#7FD8FF !important;
}
#viewOverview .ov-cta{ color:var(--d-text-strong) !important; }
.sidebar .sidebar-badge{ color:var(--d-text-strong) !important; }

/* ---- ID-scoped mirrors (no class-boost can outrank an ID) -------------- */
#viewProducts .mg-btn,#viewWarehouses .mg-btn,#viewSims .mg-btn,#viewStockTransfers .mg-btn{
  background:var(--d-surface-2) !important; color:var(--d-text) !important; border-color:var(--d-border-2) !important;
}
#viewProducts .mg-btn--primary:hover,#viewWarehouses .mg-btn--primary:hover,#viewSims .mg-btn--primary:hover{
  color:#fff !important;
}
#viewProducts .mg-search:focus-within,#viewSims .mg-search:focus-within,
#viewProducts .mg-select,#viewSims .mg-select{
  background:var(--d-input-bg) !important; border-color:var(--d-border-2) !important; color:var(--d-text) !important;
}
#viewProducts .mg-row-card,#viewProducts .prodWh-box{ background:var(--d-surface) !important; border-color:var(--d-border) !important; color:var(--d-text) !important; }
#viewProducts .prodWh-box:hover{ border-color:var(--d-border-2) !important; }
#viewProducts .prodWh-box[data-stock="out"]{ background:rgba(226,61,90,.1) !important; }
#viewProducts .prodWh-act--danger{ background:rgba(226,61,90,.18) !important; color:#FF9DAD !important; border-color:rgba(226,61,90,.42) !important; }
#viewWarehouses .whc{ background:var(--d-surface) !important; border-color:var(--d-border) !important; color:var(--d-text) !important; }
#viewWarehouses .whc-tag--none{ background:rgba(255,255,255,.08) !important; color:var(--d-faint) !important; }
#viewWarehouses .whc-act{ background:var(--d-surface-2) !important; color:var(--d-text) !important; border-color:var(--d-border-2) !important; }
#viewWarehouses .whc-act--danger:hover{ background:rgba(226,61,90,.26) !important; }
#viewWarehouses .whc-warn{ background:rgba(246,166,9,.14) !important; color:#F8C66B !important; }
#viewStockTransfers .mg-table-wrap{ background:var(--d-surface) !important; border-color:var(--d-border) !important; }
#newTransferModal select,#newTransferModal input[type="text"],
#sendTransferModal select,#sendTransferModal input[type="text"]{
  background:var(--d-input-bg) !important; color:var(--d-text) !important; border-color:var(--d-border-2) !important;
}
#viewBackup .bk-btn--danger:hover{ background:rgba(226,61,90,.26) !important; }
#viewActivations .mg-table .mg-btn,#viewAuthorizations .mg-table .mg-btn,
#viewActiveCustomers .mg-table .mg-btn{
  background:var(--d-surface-2) !important; color:var(--d-text) !important; border-color:var(--d-border-2) !important;
}
#viewAuthorizations .auth-form .mg-input,#viewAuthorizations .auth-form select.mg-input{
  background:var(--d-input-bg) !important; color:var(--d-text) !important; border-color:var(--d-border-2) !important;
}
#viewOverview .ov-ghost{ background:transparent !important; color:var(--d-muted) !important; border-color:var(--d-border-2) !important; }
#viewPayroll .mg-table tbody tr:hover{ background:var(--d-row-hover) !important; }
#quoteModal .modal-x{ color:var(--d-muted) !important; }
#quoteModal .modal-x:hover{ background:rgba(255,255,255,.08) !important; color:var(--d-text-strong) !important; }