/* ==========================================================================
   Dark appearance (My Preferences -> Appearance, js/theme.js sets html[data-theme="dark"]).
   Light stays the default. Shared pieces (ui.css standard, menus, lists, modals) get proper
   dark colours; colours written straight into screens (inline styles) are caught by the rules
   at the end. Status colours (green/amber/red pills) keep their meaning.
   ========================================================================== */
html[data-theme="dark"] {
  --d-bg: #0F1218; --d-surface: #171B23; --d-surface2: #1E232D; --d-raised: #232936;
  --d-text: #E6E8EE; --d-muted: #9AA3B5; --d-line: #2E3442; --d-accent: #8FA8F0; --d-fill: #3D5BC4;
  --navy: #8FA8F0; --navy-deep: #0B1022; --ink: #E6E8EE; --paper: #0F1218; --line: #2E3442;
  --ui-ink: #E6E8EE; --ui-muted: #9AA3B5; --ui-line: #2E3442;
  --ui-good: #6FD39A; --ui-good-bg: #12301F; --ui-warn: #F2C46B; --ui-warn-bg: #33270F; --ui-bad: #FF8A80; --ui-bad-bg: #3A1716;
  --ui-info: #9DB2FF; --ui-info-bg: #1C2747;
  color-scheme: dark;
}
html[data-theme="dark"], html[data-theme="dark"] body { background: var(--d-bg) !important; color: var(--d-text); }
html[data-theme="dark"] a { color: var(--d-accent); }
html[data-theme="dark"] img, html[data-theme="dark"] video, html[data-theme="dark"] canvas { color-scheme: normal; }

/* Shared surfaces */
html[data-theme="dark"] :is(#adminReportsWrapper, .ui-card, .ui-stat, .st-tile, .st-block, .wso-tile, .wso-card, .wso-box, .pws-card, .pws-tile, .mfd-tile,
  .fbo-tile, .org-tile, .si-tile, .pr-kpi, .ua-tile, .fa-stat, .report-list, .today-list, .empty, .ui-frame, .mg-side, .mg-box, .pf-box, .pf-card, .mg-card,
  .wo-modal, .sg-nav, .tc-modal, .st-modal .st-box, .plr-card, .plr-tl, .plr-row, .auth-card) {
  background-color: var(--d-surface) !important; border-color: var(--d-line) !important; color: var(--d-text);
}
html[data-theme="dark"] :is(.ui-frame-main, .pws-main, .mg-content, .fbo > div) { background: var(--d-bg) !important; }
html[data-theme="dark"] .ui-card-head, html[data-theme="dark"] .mg-foot, html[data-theme="dark"] .mg-head { border-color: var(--d-line) !important; background: var(--d-surface) !important; }
html[data-theme="dark"] .ui-card-head h3, html[data-theme="dark"] .ui-h2, html[data-theme="dark"] .section-label, html[data-theme="dark"] .page-header,
html[data-theme="dark"] .report-heading, html[data-theme="dark"] .wso-sec p, html[data-theme="dark"] .st-h, html[data-theme="dark"] .pws-h { color: var(--d-accent) !important; border-color: var(--d-accent); }
html[data-theme="dark"] :is(.ui-stat, .st-tile, .wso-tile, .mfd-tile, .pws-tile, .fbo-tile, .org-tile, .si-tile, .pr-kpi) > :is(span, .l) { color: var(--d-text) !important; }
html[data-theme="dark"] :is(.ui-stat, .st-tile, .wso-tile, .mfd-tile, .pws-tile, .fbo-tile, .org-tile, .si-tile, .pr-kpi) { --t: var(--d-accent); }
html[data-theme="dark"] :is(.report-list, .today-list) li { border-color: var(--d-line) !important; background: transparent !important; }
html[data-theme="dark"] :is(.report-list, .today-list) li:hover, html[data-theme="dark"] .ui-table tr:hover td { background: var(--d-surface2) !important; }

/* Menus */
html[data-theme="dark"] .mg-tab { color: var(--d-muted); }
html[data-theme="dark"] .mg-tab:hover { background: var(--d-surface2); color: var(--d-text); }
html[data-theme="dark"] .mg-tab.active, html[data-theme="dark"] .mg-side .mg-tab.active { background: #1C2747 !important; color: var(--d-accent) !important; border-left-color: var(--d-accent) !important; }

/* Tables */
html[data-theme="dark"] table th { background: var(--d-surface2) !important; color: var(--d-muted) !important; border-color: var(--d-line) !important; }
html[data-theme="dark"] table td { border-color: var(--d-line) !important; }
html[data-theme="dark"] tr:nth-child(even) > td { background-color: transparent; }

/* Fields */
html[data-theme="dark"] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea, [contenteditable="true"]) {
  background-color: #11151C !important; color: var(--d-text) !important; border-color: #3A4152 !important;
}
html[data-theme="dark"] ::placeholder { color: #707A8C !important; }

/* Buttons: filled buttons keep white text on a deeper blue; outline buttons get the light accent. */
html[data-theme="dark"] :is(.ui-btn.primary, .st-btn, .int-btn, .pws-btn:not(.plain), .fpf-btn:not(.plain):not(.danger), .onb-btn.primary, .fr-btn.primary, .si-btn.p, .wso-actions button.p),
html[data-theme="dark"] button:is([style*="background:var(--navy)"], [style*="background: var(--navy)"], [style*="background:#233C86" i], [style*="background: #233C86" i]) {
  background: var(--d-fill) !important; color: #fff !important; border-color: var(--d-fill) !important;
}
html[data-theme="dark"] :is(.ui-btn:not(.primary), .st-btn2, .onb-btn:not(.primary), .fr-btn:not(.primary), .ed-btn, .elu-btn, .si-btn:not(.p), .pws-btn.plain, .fpf-btn.plain, .wso-actions button:not(.p), .tab-btn, .role-pill, .report-controls button),
html[data-theme="dark"] button:is([style*="background:white" i], [style*="background: white" i], [style*="background:#fff;" i], [style*="background:#fff\"" i]) {
  background: transparent !important; color: var(--d-accent) !important; border-color: #4A5A86 !important;
}
html[data-theme="dark"] :is(.tab-btn.active, .role-pill.active, .report-controls button.active) { background: var(--d-fill) !important; color: #fff !important; }

/* Pills keep their meaning on dark */
html[data-theme="dark"] .ui-pill { background: #1C2747; color: var(--ui-info); }
html[data-theme="dark"] .ui-pill.ok { background: var(--ui-good-bg); color: var(--ui-good); }
html[data-theme="dark"] .ui-pill.warn { background: var(--ui-warn-bg); color: var(--ui-warn); }
html[data-theme="dark"] .ui-pill.bad { background: var(--ui-bad-bg); color: var(--ui-bad); }
html[data-theme="dark"] .ui-pill.muted { background: var(--d-surface2); color: var(--d-muted); }
html[data-theme="dark"] .ui-count { background: #1C2747; color: var(--d-accent); }

/* --------------------------------------------------------------------------
   Colours written straight into screens (inline styles)
   -------------------------------------------------------------------------- */
/* White and near-white panels */
html[data-theme="dark"] :is(div, section, ul, li, table, tr, td, form, nav, aside, header, footer, p, label, span):is(
  [style*="background:white" i], [style*="background: white" i], [style*="background-color:white" i], [style*="background-color: white" i],
  [style*="background:#fff;" i], [style*="background: #fff;" i], [style*="background:#ffffff" i], [style*="background: #ffffff" i], [style*="background-color:#fff" i]) {
  background: var(--d-surface) !important;
}
html[data-theme="dark"] :is(div, section, ul, li, table, tr, td, th, nav, aside, header, footer, p, label, span):is(
  [style*="#FAFAF8" i], [style*="#FAFAFB" i], [style*="#F5F6FA" i], [style*="#F7F8FC" i], [style*="#F4F5F8" i], [style*="#F6F6F3" i], [style*="#F7F7F5" i],
  [style*="background:#F0F1F5" i], [style*="background:#F3F5FA" i], [style*="background:#F2F2F2" i], [style*="background:#F5F5F7" i], [style*="background:#FAFBFD" i],
  [style*="background:#F8F9FC" i], [style*="background:#F9FAFB" i], [style*="background:#EEF1FA" i], [style*="background:#ECF0FA" i], [style*="background:#E8ECF6" i]) {
  background: var(--d-surface2) !important;
}
/* Dark text */
html[data-theme="dark"] [style*="color:#333" i], html[data-theme="dark"] [style*="color: #333" i], html[data-theme="dark"] [style*="color:#222" i],
html[data-theme="dark"] [style*="color:#111" i], html[data-theme="dark"] [style*="color:#444" i], html[data-theme="dark"] [style*="color:#1a1a1a" i],
html[data-theme="dark"] [style*="color:#1B1F27" i], html[data-theme="dark"] [style*="color:var(--ink" i], html[data-theme="dark"] [style*="color: var(--ink" i],
html[data-theme="dark"] [style*="color:black" i], html[data-theme="dark"] [style*="color:#000" i] { color: var(--d-text) !important; }
/* Grey text */
html[data-theme="dark"] :is([style*="color:#555" i], [style*="color:#666" i], [style*="color:#777" i], [style*="color:#888" i], [style*="color:#999" i],
  [style*="color: #888" i], [style*="color: #666" i], [style*="color:#6B7280" i], [style*="color:#5B6275" i], [style*="color:#55607A" i], [style*="color:#7A8299" i],
  [style*="color:#7A7F8C" i], [style*="color:#6B7380" i], [style*="color:#4A5163" i], [style*="color:#3B4A6B" i], [style*="color:#5F6673" i]) { color: var(--d-muted) !important; }
/* Navy text written as a code */
html[data-theme="dark"] [style*="color:#233C86" i], html[data-theme="dark"] [style*="color: #233C86" i], html[data-theme="dark"] [style*="color:#16234F" i] { color: var(--d-accent) !important; }
/* Light borders */
html[data-theme="dark"] [style*="border:1px solid #DD" i], html[data-theme="dark"] [style*="border:1px solid #E" i], html[data-theme="dark"] [style*="border-bottom:1px solid #F" i],
html[data-theme="dark"] [style*="border-top:1px solid #F" i], html[data-theme="dark"] [style*="border:1px solid #C" i] { border-color: var(--d-line) !important; }
/* Light tinted boxes (notes, warnings): keep the hint of colour, dark enough to read on. */
html[data-theme="dark"] :is(div, p, span, li):is([style*="background:#FFF4" i], [style*="background:#FFF8" i], [style*="background:#FFFB" i], [style*="background:#FEF" i]) { background: var(--ui-warn-bg) !important; }
html[data-theme="dark"] :is(div, p, span, li):is([style*="background:#E9F7EF" i], [style*="background:#E7F5EC" i], [style*="background:#E8F5EC" i], [style*="background:#E1F6F0" i]) { background: var(--ui-good-bg) !important; }
html[data-theme="dark"] :is(div, p, span, li):is([style*="background:#FBEAE9" i], [style*="background:#FDECEA" i], [style*="background:#FFF0F0" i]) { background: var(--ui-bad-bg) !important; }
html[data-theme="dark"] :is([style*="color:#1F7A3D" i], [style*="color:#14532B" i]) { color: var(--ui-good) !important; }
html[data-theme="dark"] :is([style*="color:#B36B00" i], [style*="color:#8A5A00" i], [style*="color:#9A6700" i], [style*="color:#7A4A00" i], [style*="color:#B8860B" i]) { color: var(--ui-warn) !important; }
html[data-theme="dark"] :is([style*="color:#B3261E" i], [style*="color: #B3261E" i]) { color: var(--ui-bad) !important; }
/* Modals' dim backdrop stays dark; their white boxes are caught above. Images and logos untouched. */
/* Keep the tiles' coloured left edge, and beat ui.css's light table header. */
html[data-theme="dark"] body :is(.ui-stat, .st-tile, .wso-tile, .mfd-tile, .pws-tile, .fbo-tile, .org-tile, .si-tile, .pr-kpi, .ua-tile, .fa-stat, .plr-tile) { border-left-color: var(--t) !important; }
html[data-theme="dark"] body :is(.ui-stat, .st-tile, .wso-tile, .mfd-tile, .pws-tile, .fbo-tile, .org-tile, .si-tile, .pr-kpi):is(.ok, .good, .green) { --t: var(--ui-good); }
html[data-theme="dark"] body :is(.ui-stat, .st-tile, .wso-tile, .mfd-tile, .pws-tile, .fbo-tile, .org-tile, .si-tile, .pr-kpi):is(.warn, .amber, .due) { --t: var(--ui-warn); }
html[data-theme="dark"] body :is(.ui-stat, .st-tile, .wso-tile, .mfd-tile, .pws-tile, .fbo-tile, .org-tile, .si-tile, .pr-kpi):is(.bad, .red, .over) { --t: var(--ui-bad); }
html[data-theme="dark"] body :is(.ui-stat, .st-tile, .wso-tile, .mfd-tile, .pws-tile, .fbo-tile, .org-tile, .si-tile, .pr-kpi):is(.info, .blue) { --t: var(--ui-info); }
html[data-theme="dark"] body :is(#adminReportsWrapper, [id$="Panel"], .ui-card, body) table th,
html[data-theme="dark"] body .ui-table thead th { background: var(--d-surface2) !important; color: var(--d-muted) !important; }
html[data-theme="dark"] body .wso-tile.warn .v, html[data-theme="dark"] body :is(.ui-stat, .st-tile).warn > b { color: var(--ui-warn) !important; }