/* ================================================================
   Smart IoT — Modern UI Layer  (smartiot-ui.css  v1)
   Layered on top of Bootstrap 2 + emoncms-base.css
   Visual-only overrides — no grid or layout changes
   ================================================================ */

/* ── 1. Design Tokens ─────────────────────────────────────────── */
:root {
  --si-bg:          #f1f5f9;
  --si-surface:     #ffffff;
  --si-surface-2:   #f8fafc;
  --si-surface-3:   #f1f5f9;

  --si-border:      #e2e8f0;
  --si-border-2:    #cbd5e1;

  --si-text:        #0f172a;
  --si-text-muted:  #64748b;
  --si-text-subtle: #94a3b8;

  --si-focus-ring:  rgba(59,130,246,.18);

  --si-radius:      10px;
  --si-radius-sm:   7px;
  --si-radius-xs:   4px;

  --si-shadow-sm:   0 1px 2px rgba(0,0,0,.05);
  --si-shadow:      0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --si-shadow-md:   0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);
  --si-shadow-lg:   0 10px 15px rgba(0,0,0,.07), 0 4px 6px rgba(0,0,0,.04);

  --si-trans: 0.16s ease;
}

/* ── 2. Dark Mode Tokens ──────────────────────────────────────── */
/* Use html[data-theme="dark"] (specificity 0,1,1) > :root (0,1,0)
   so these tokens WIN over app-module inline <style> :root blocks. */
html[data-theme="dark"] {
  --si-bg:          #0f172a;
  --si-surface:     #1e293b;
  --si-surface-2:   #263147;
  --si-surface-3:   #334155;

  --si-border:      #334155;
  --si-border-2:    #475569;

  --si-text:        #f1f5f9;
  --si-text-muted:  #94a3b8;
  --si-text-subtle: #64748b;

  --si-focus-ring:  rgba(59,130,246,.28);

  --si-shadow-sm:   0 1px 2px rgba(0,0,0,.35);
  --si-shadow:      0 1px 3px rgba(0,0,0,.45);
  --si-shadow-md:   0 4px 6px rgba(0,0,0,.55);
  --si-shadow-lg:   0 10px 15px rgba(0,0,0,.55);

  /* App-module aliases (used in app PHP inline <style> blocks) */
  --si-card:        #1e293b;
  --si-muted:       #94a3b8;
  --si-blue-dk:     #2563eb;
}

/* ── 3. Typography ────────────────────────────────────────────── */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter,
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: var(--si-text);
  background-color: var(--si-bg) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--si-text);
  font-weight: 600;
  line-height: 1.3;
}

a             { color: var(--bg-menu-top, #3b82f6); }
a:hover       { color: var(--bg-menu-top-hover, #2563eb); text-decoration: none; }
::selection   { background: var(--bg-menu-top, #3b82f6); color: #fff; }

[data-theme="dark"] a       { color: #60a5fa !important; }
[data-theme="dark"] a:hover { color: #93c5fd !important; }

.text-muted                         { color: var(--si-text-muted) !important; }
[data-theme="dark"] .text-muted     { color: var(--si-text-muted) !important; }
[data-theme="dark"] p               { color: var(--si-text); }
[data-theme="dark"] span            { color: inherit; }

/* ── 4. Footer ────────────────────────────────────────────────── */
#footer {
  background-color: var(--si-surface-2) !important;
  border-top: 1px solid var(--si-border) !important;
  color: var(--si-text-muted) !important;
}
#footer a     { color: var(--bg-menu-top, #3b82f6) !important; }

/* ── 5. Wells ─────────────────────────────────────────────────── */
.well {
  background-color: var(--si-surface) !important;
  border: 1px solid var(--si-border) !important;
  border-radius: var(--si-radius) !important;
  box-shadow: var(--si-shadow) !important;
}

/* ── 6. Panels ────────────────────────────────────────────────── */
.panel {
  background-color: var(--si-surface) !important;
  border: 1px solid var(--si-border) !important;
  border-radius: var(--si-radius) !important;
  box-shadow: var(--si-shadow) !important;
}
.panel-heading {
  background-color: var(--si-surface-2) !important;
  border-bottom: 1px solid var(--si-border) !important;
  border-radius: var(--si-radius) var(--si-radius) 0 0 !important;
  color: var(--si-text) !important;
}
.panel-heading h1,.panel-heading h2,.panel-heading h3,
.panel-heading h4,.panel-heading h5,.panel-heading h6 {
  color: var(--si-text) !important;
}
.panel-body {
  color: var(--si-text);
  background-color: var(--si-surface) !important;
}
.panel-footer {
  background-color: var(--si-surface-2) !important;
  border-top: 1px solid var(--si-border) !important;
  border-radius: 0 0 var(--si-radius) var(--si-radius) !important;
}
.panel-default > .panel-heading { color: var(--si-text) !important; }

/* ── 7. Tables ────────────────────────────────────────────────── */
.table {
  color: var(--si-text);
}
.table thead th, .table thead td {
  background-color: var(--si-surface-2) !important;
  color: var(--si-text-muted) !important;
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 700 !important;
  border-bottom: 2px solid var(--si-border) !important;
  white-space: nowrap;
  padding: 10px 12px !important;
}
.table td {
  border-color: var(--si-border) !important;
  color: var(--si-text) !important;
  vertical-align: middle !important;
  padding: 9px 12px !important;
}
.table th {
  border-color: var(--si-border) !important;
}
.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th {
  background-color: var(--si-surface-2) !important;
}
.table-striped tbody tr:nth-child(odd) > td,
.table-striped tbody tr:nth-child(odd) > th {
  background-color: var(--si-surface-2) !important;
}
.table-bordered,
.table-bordered th,
.table-bordered td { border-color: var(--si-border) !important; }

.table-responsive {
  border: 1px solid var(--si-border);
  border-radius: var(--si-radius);
  box-shadow: var(--si-shadow);
}

/* ── 8. Form Controls ─────────────────────────────────────────── */
input[type=text], input[type=password], input[type=email],
input[type=number], input[type=url], input[type=search],
input[type=tel], input[type=date], input[type=datetime-local],
input[type=time], input[type=week], input[type=month],
textarea, select {
  background-color: var(--si-surface) !important;
  border: 1px solid var(--si-border-2) !important;
  border-radius: var(--si-radius-sm) !important;
  color: var(--si-text) !important;
  transition: border-color var(--si-trans), box-shadow var(--si-trans) !important;
}
input[type=text]:focus, input[type=password]:focus,
input[type=email]:focus, input[type=number]:focus,
input[type=url]:focus, input[type=search]:focus,
input[type=tel]:focus, textarea:focus, select:focus {
  border-color: var(--bg-menu-top, #3b82f6) !important;
  box-shadow: 0 0 0 3px var(--si-focus-ring) !important;
  outline: none !important;
}
input[type=text]::placeholder,
input[type=search]::placeholder,
textarea::placeholder { color: var(--si-text-subtle) !important; }

[data-theme="dark"] select option {
  background-color: var(--si-surface);
  color: var(--si-text);
}

/* Input add-ons */
.add-on {
  background-color: var(--si-surface-2) !important;
  border-color: var(--si-border-2) !important;
  color: var(--si-text-muted) !important;
  text-shadow: none !important;
}
[data-theme="dark"] .input-prepend input,
[data-theme="dark"] .input-append input {
  background-color: var(--si-surface) !important;
  color: var(--si-text) !important;
  border-color: var(--si-border-2) !important;
}

/* ── 9. Buttons ───────────────────────────────────────────────── */
.btn {
  border-radius: var(--si-radius-sm) !important;
  font-weight: 500 !important;
  text-shadow: none !important;
  background-image: none !important;
  box-shadow: none !important;
  transition: background-color 0.12s ease, border-color 0.12s ease,
              opacity 0.12s ease !important;
}
.btn:active, .btn.active { box-shadow: inset 0 1px 3px rgba(0,0,0,.15) !important; }
.btn:focus { outline: none !important; box-shadow: 0 0 0 3px var(--si-focus-ring) !important; }
.btn-mini  { border-radius: var(--si-radius-xs) !important; }

/* ── 10. Badges & Labels ──────────────────────────────────────── */
.badge {
  border-radius: 20px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  padding: 2px 8px !important;
}
.label {
  border-radius: var(--si-radius-xs) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  padding: 2px 7px !important;
}

/* ── 11. Alerts ───────────────────────────────────────────────── */
.alert {
  border-radius: var(--si-radius-sm) !important;
  border-left-width: 4px !important;
  border-top-width: 1px !important;
  border-right-width: 1px !important;
  border-bottom-width: 1px !important;
}
[data-theme="dark"] .alert-success {
  background-color: #052e16 !important; border-color: #166534 !important; color: #86efac !important;
}
[data-theme="dark"] .alert-error,
[data-theme="dark"] .alert-danger {
  background-color: #2d0a0a !important; border-color: #7f1d1d !important; color: #fca5a5 !important;
}
[data-theme="dark"] .alert-warning {
  background-color: #1c1407 !important; border-color: #854d0e !important; color: #fcd34d !important;
}
[data-theme="dark"] .alert-info {
  background-color: #0c1a2e !important; border-color: #1e3a5f !important; color: #93c5fd !important;
}
[data-theme="dark"] .alert-block { background-color: var(--si-surface-2) !important; }

/* ── 12. Modals ───────────────────────────────────────────────── */
.modal {
  border-radius: var(--si-radius) !important;
  border: 1px solid var(--si-border) !important;
  box-shadow: var(--si-shadow-lg) !important;
  background-color: var(--si-surface) !important;
}
.modal-header {
  background-color: var(--si-surface-2) !important;
  border-bottom: 1px solid var(--si-border) !important;
  border-radius: var(--si-radius) var(--si-radius) 0 0 !important;
}
.modal-header h3, .modal-header h4 { color: var(--si-text) !important; }
.modal-body  { background-color: var(--si-surface) !important; color: var(--si-text) !important; }
.modal-footer {
  background-color: var(--si-surface-2) !important;
  border-top: 1px solid var(--si-border) !important;
  border-radius: 0 0 var(--si-radius) var(--si-radius) !important;
}
.modal-backdrop { background-color: #000 !important; }
[data-theme="dark"] .close { color: var(--si-text-muted) !important; text-shadow: none !important; }

/* ── 13. Dropdown Menus ───────────────────────────────────────── */
.dropdown-menu {
  border-radius: var(--si-radius-sm) !important;
  border: 1px solid var(--si-border) !important;
  box-shadow: var(--si-shadow-md) !important;
  background-color: var(--si-surface) !important;
  padding: 4px !important;
}
.dropdown-menu > li > a {
  color: var(--si-text) !important;
  border-radius: var(--si-radius-xs) !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: var(--si-surface-2) !important;
  background-image: none !important;
  color: var(--si-text) !important;
}
.dropdown-menu .divider {
  background-color: var(--si-border) !important;
  border-bottom: none !important;
  margin: 3px 0 !important;
}

/* ── 14. Navigation — Tabs & Breadcrumbs ─────────────────────── */
.nav-tabs { border-bottom: 2px solid var(--si-border) !important; }
.nav-tabs > li > a {
  border-radius: var(--si-radius-sm) var(--si-radius-sm) 0 0 !important;
  border-color: transparent !important;
  color: var(--si-text-muted) !important;
}
.nav-tabs > li > a:hover {
  border-color: var(--si-border) !important;
  background-color: var(--si-surface-2) !important;
  color: var(--si-text) !important;
}
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
  border: 2px solid var(--si-border) !important;
  border-bottom-color: var(--si-surface) !important;
  background-color: var(--si-surface) !important;
  color: var(--si-text) !important;
}
.tab-content {
  background-color: var(--si-surface);
  border: 1px solid var(--si-border);
  border-top: none;
  border-radius: 0 0 var(--si-radius-sm) var(--si-radius-sm);
  padding: 16px;
}
.breadcrumb {
  background-color: var(--si-surface-2) !important;
  border-radius: var(--si-radius-sm) !important;
  border: 1px solid var(--si-border);
  color: var(--si-text-muted);
}
.breadcrumb .active { color: var(--si-text) !important; }
.breadcrumb > li > .divider { color: var(--si-text-subtle) !important; }

/* ── 15. Progress Bars ────────────────────────────────────────── */
.progress, .progress-striped {
  border-radius: 20px !important;
  background-color: var(--si-surface-3) !important;
  background-image: none !important;
  box-shadow: none !important;
}
.progress .bar, .progress-bar {
  border-radius: 20px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* ── 16. Code & Pre ───────────────────────────────────────────── */
pre, code {
  background-color: var(--si-surface-2) !important;
  border: 1px solid var(--si-border) !important;
  border-radius: var(--si-radius-xs) !important;
  color: var(--si-text) !important;
}
pre { border-radius: var(--si-radius-sm) !important; padding: 12px 16px !important; }

/* ── 17. Accordion ────────────────────────────────────────────── */
.accordion-group {
  border-color: var(--si-border) !important;
  border-radius: var(--si-radius-sm) !important;
}
.accordion-heading {
  background-color: var(--si-surface-2) !important;
  border-bottom-color: var(--si-border) !important;
}
.accordion-heading a { color: var(--si-text) !important; }
.accordion-inner {
  background-color: var(--si-surface) !important;
  border-top-color: var(--si-border) !important;
  color: var(--si-text) !important;
}

/* ── 18. Pagination ───────────────────────────────────────────── */
.pagination ul {
  border-radius: var(--si-radius-sm) !important;
  box-shadow: var(--si-shadow-sm) !important;
}
.pagination ul > li > a,
.pagination ul > li > span {
  border-color: var(--si-border) !important;
  color: var(--bg-menu-top, #3b82f6) !important;
  background-color: var(--si-surface) !important;
}
.pagination ul > li > a:hover {
  background-color: var(--si-surface-2) !important;
}
.pagination ul > .active > a,
.pagination ul > .active > span {
  background-color: var(--bg-menu-top, #3b82f6) !important;
  border-color: var(--bg-menu-top, #3b82f6) !important;
  background-image: none !important;
  color: #fff !important;
  text-shadow: none !important;
}

/* ── 19. Horizontal Rule ──────────────────────────────────────── */
hr { border-color: var(--si-border) !important; border-top-color: var(--si-border) !important; }

/* ── 20. Dark Mode Toggle Button ──────────────────────────────── */
#si-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 46px;
  cursor: pointer;
  color: rgba(255,255,255,.85);
  transition: background-color var(--si-trans);
  user-select: none;
}
#si-theme-toggle:hover { background-color: var(--bg-menu-top-hover, #2563eb); }
#si-theme-toggle svg   { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Moon icon = visible in light mode */
#si-theme-toggle .si-moon { display: block; }
#si-theme-toggle .si-sun  { display: none; }
[data-theme="dark"] #si-theme-toggle .si-moon { display: none; }
[data-theme="dark"] #si-theme-toggle .si-sun  { display: block; }

/* ── 21. Dark Mode — Label & Badge Colour Corrections ─────────── */
[data-theme="dark"] .label-success, [data-theme="dark"] .badge-success { background-color: #15803d !important; }
[data-theme="dark"] .label-important, [data-theme="dark"] .badge-important,
[data-theme="dark"] .label-danger,    [data-theme="dark"] .badge-danger  { background-color: #dc2626 !important; }
[data-theme="dark"] .label-warning,   [data-theme="dark"] .badge-warning { background-color: #b45309 !important; }
[data-theme="dark"] .label-info,      [data-theme="dark"] .badge-info    { background-color: #2563eb !important; }

/* ── 22. Smooth Transitions on Theme Switch ───────────────────── */
body, #footer,
.well, .panel, .panel-heading, .panel-body, .panel-footer,
.table, .table td, .table th, .table thead th,
input[type=text], input[type=password], input[type=email], textarea, select,
.add-on, .modal, .modal-header, .modal-body, .modal-footer,
.dropdown-menu, .alert, pre, code, hr,
.accordion-group, .accordion-heading, .accordion-inner,
.nav-tabs > li > a, .tab-content, .breadcrumb {
  transition: background-color var(--si-trans),
              border-color var(--si-trans),
              color var(--si-trans) !important;
}
/* Buttons use their own fast transition (no colour transition delay) */
.btn { transition: background-color 0.1s ease, border-color 0.1s ease !important; }

/* ── 23. Custom Scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar                { width: 6px; height: 6px; }
::-webkit-scrollbar-track          { background: transparent; }
::-webkit-scrollbar-thumb          { background: var(--si-border-2); border-radius: 20px; }
::-webkit-scrollbar-thumb:hover    { background: var(--si-text-subtle); }

/* ── 24. Responsive Fine-tuning ───────────────────────────────── */
@media (max-width: 768px) {
  .table td, .table th { padding: 7px 10px !important; }
}

/* ── 25. Toggle Button — transparent background fix ───────────── */
#si-theme-toggle {
  background-color: transparent !important;
}
.menu-tr li div#si-theme-toggle,
.menu-tr li > div#si-theme-toggle {
  background-color: transparent !important;
}

/* ── 26. Feed List — emoncms-base.css overrides ───────────────── */
[data-theme="dark"] .node .accordion-toggle {
  background-color: var(--si-surface-2) !important;
  color: var(--si-text) !important;
  border-color: var(--si-border) !important;
}
[data-theme="dark"] .node-feeds {
  background-color: var(--si-surface) !important;
}
[data-theme="dark"] .node-feed {
  background-color: var(--si-surface) !important;
  border-color: var(--si-border) !important;
  color: var(--si-text) !important;
}
[data-theme="dark"] .node-feed:hover {
  background-color: var(--si-surface-2) !important;
}
[data-theme="dark"] .node-feed .feed-graph-link,
[data-theme="dark"] .node-feed .feed-graph-link * {
  color: var(--si-text) !important;
}
[data-theme="dark"] .feed-row-units,
[data-theme="dark"] .feed-row-value,
[data-theme="dark"] .feed-row-name {
  color: var(--si-text) !important;
}
[data-theme="dark"] .feedlist-row,
[data-theme="dark"] .feedlist-row td {
  background-color: var(--si-surface) !important;
  border-color: var(--si-border) !important;
  color: var(--si-text) !important;
}

/* ── 27. App Gallery — inline <style> overrides ───────────────── */
[data-theme="dark"] .ap-card {
  background: var(--si-surface) !important;
  border-color: var(--si-border) !important;
  color: var(--si-text) !important;
}
[data-theme="dark"] .ap-card-icon {
  background: var(--si-surface-2) !important;
}
[data-theme="dark"] .ap-card-title,
[data-theme="dark"] .ap-card-name {
  color: var(--si-text) !important;
}
[data-theme="dark"] .ap-card-desc,
[data-theme="dark"] .ap-card p {
  color: var(--si-text-muted) !important;
}
[data-theme="dark"] .avail-card {
  border-color: var(--si-border) !important;
}
[data-theme="dark"] .modal-box {
  background: var(--si-surface) !important;
  color: var(--si-text) !important;
}
[data-theme="dark"] .btn-cfg {
  background: var(--si-surface-2) !important;
  color: var(--si-text) !important;
  border-color: var(--si-border) !important;
}
[data-theme="dark"] .btn-del {
  background: var(--si-surface) !important;
  border-color: var(--si-border) !important;
  color: #f87171 !important;
}
/* App type badge (e.g. "total_energy" pill under the title) */
[data-theme="dark"] .ap-card-type {
  background: #1e3a5f !important;
  color: #93c5fd !important;
}
[data-theme="dark"] .app-tag {
  background: var(--si-surface-2) !important;
  color: var(--si-text-muted) !important;
}
[data-theme="dark"] .installed-badge {
  background: #14532d !important;
  color: #86efac !important;
}
/* App card icon background */
[data-theme="dark"] .ap-card-icon {
  background: var(--si-surface-2) !important;
}
/* App card actions border */
[data-theme="dark"] .ap-card-actions {
  border-top-color: var(--si-border) !important;
}
/* Available app name in library modal */
[data-theme="dark"] .avail-name {
  color: var(--si-text) !important;
}
/* Config editor panel */
[data-theme="dark"] .cfg-editor-wrap {
  background: var(--si-surface) !important;
  border-color: var(--si-border) !important;
}
/* Browse Library button (inline style="#f1f5f9") + count badge */
[data-theme="dark"] .btn-add-new[style*="background:#f1f5f9"],
[data-theme="dark"] .btn-add-new[style*="background: #f1f5f9"] {
  background: var(--si-surface-2) !important;
  color: var(--si-text) !important;
  border-color: var(--si-border-2) !important;
}
[data-theme="dark"] h2 span[style*="background:#f1f5f9"],
[data-theme="dark"] h2 span[style*="background: #f1f5f9"] {
  background: var(--si-surface-2) !important;
  color: var(--si-text-muted) !important;
}

/* ── 28. Automation Rule Cards — inline <style> overrides ─────── */
[data-theme="dark"] .rule-card {
  background: var(--si-surface) !important;
  border-color: var(--si-border) !important;
  color: var(--si-text) !important;
}
[data-theme="dark"] .rule-card h4,
[data-theme="dark"] .rule-card h5 {
  color: var(--si-text) !important;
}
[data-theme="dark"] .rule-conditions {
  color: var(--si-text-muted) !important;
}
[data-theme="dark"] .badge-condition {
  background: #1e3a5f !important;
  color: #93c5fd !important;
}
[data-theme="dark"] .badge-schedule {
  background: #052e16 !important;
  color: #86efac !important;
}
[data-theme="dark"] .badge-timer {
  background: #1c1407 !important;
  color: #fcd34d !important;
}
[data-theme="dark"] .btn-icon {
  border-color: var(--si-border) !important;
  color: var(--si-text-muted) !important;
  background: var(--si-surface) !important;
}
[data-theme="dark"] .btn-icon:hover {
  background: var(--si-surface-2) !important;
  color: var(--si-text) !important;
}

/* ── 29. Profile — Telegram card ─────────────────────────────── */
.telegram-card {
  background: var(--si-surface);
  border: 1px solid var(--si-border);
  border-radius: 10px;
  padding: 20px;
  max-width: 440px;
  transition: background-color var(--si-trans), border-color var(--si-trans);
}
[data-theme="dark"] .telegram-card {
  background: var(--si-surface) !important;
  border-color: var(--si-border) !important;
}
[data-theme="dark"] .telegram-card p,
[data-theme="dark"] .telegram-card small {
  color: var(--si-text-muted) !important;
}

/* Profile dark mode toggle row */
.profile-dark-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
}
.profile-dark-toggle .toggle-track {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--si-surface-3);
  border: 1px solid var(--si-border-2);
  border-radius: 20px;
  cursor: pointer;
  transition: background var(--si-trans), border-color var(--si-trans);
}
.profile-dark-toggle .toggle-track.is-dark {
  background: var(--bg-menu-top, #3b82f6);
  border-color: var(--bg-menu-top, #3b82f6);
}
.profile-dark-toggle .toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--si-trans);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.profile-dark-toggle .toggle-track.is-dark .toggle-thumb {
  transform: translateX(20px);
}
.profile-dark-toggle .toggle-label {
  font-size: 13px;
  color: var(--si-text-muted);
  user-select: none;
}

/* ── 30. Generic hardcoded-white catch-all ────────────────────── */
[data-theme="dark"] .content-container > div[style*="background:#fff"],
[data-theme="dark"] .content-container > div[style*="background: #fff"],
[data-theme="dark"] .tab-content > div[style*="background:#fff"],
[data-theme="dark"] .well > div[style*="background:#fff"] {
  background-color: var(--si-surface) !important;
}
[data-theme="dark"] label { color: var(--si-text) !important; }
[data-theme="dark"] .muted { color: var(--si-text-muted) !important; }
[data-theme="dark"] .help-block { color: var(--si-text-muted) !important; }
[data-theme="dark"] .control-label { color: var(--si-text) !important; }
[data-theme="dark"] .control-group { color: var(--si-text) !important; }
[data-theme="dark"] fieldset legend { color: var(--si-text) !important; border-color: var(--si-border) !important; }
[data-theme="dark"] .thumbnail { background: var(--si-surface) !important; border-color: var(--si-border) !important; }
[data-theme="dark"] .list-group-item {
  background: var(--si-surface) !important;
  border-color: var(--si-border) !important;
  color: var(--si-text) !important;
}
[data-theme="dark"] .card,
[data-theme="dark"] .card-body {
  background: var(--si-surface) !important;
  border-color: var(--si-border) !important;
  color: var(--si-text) !important;
}

/* ── 31. App Modules — comprehensive dark mode ────────────────────
   Covers all 27 app PHP files which use inline <style> blocks with
   hardcoded white/light backgrounds. Grouped by semantic function. */

/* Card / container backgrounds */
[data-theme="dark"] .kpi,
[data-theme="dark"] .stat,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .period-card,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .chart-box,
[data-theme="dark"] .table-card,
[data-theme="dark"] .ah-card,
[data-theme="dark"] .il-card,
[data-theme="dark"] .rca-card,
[data-theme="dark"] .alert-rules,
[data-theme="dark"] .app-container .controls,
[data-theme="dark"] .eac-chat,
[data-theme="dark"] .row-total,
[data-theme="dark"] .row-hl,
[data-theme="dark"] .row-predicted {
  background: var(--si-surface) !important;
  border-color: var(--si-border) !important;
  color: var(--si-text) !important;
}

/* Config / modal boxes */
[data-theme="dark"] .bp-cfg-box,
[data-theme="dark"] .ct-cfg-box,
[data-theme="dark"] .de-cfg-box,
[data-theme="dark"] .dl-cfg-box,
[data-theme="dark"] .dt-cfg-box,
[data-theme="dark"] .eh-cfg-box,
[data-theme="dark"] .fc-cfg-box,
[data-theme="dark"] .hw-cfg-box,
[data-theme="dark"] .oke-cfg-box,
[data-theme="dark"] .ppa-cfg-box,
[data-theme="dark"] .rt-cfg-box,
[data-theme="dark"] .rca-cfg-box,
[data-theme="dark"] .sw-cfg-box,
[data-theme="dark"] .te-cfg-box,
[data-theme="dark"] .tw-cfg-box,
[data-theme="dark"] .de-modal,
[data-theme="dark"] .dl-modal-box,
[data-theme="dark"] .de-tbl-box,
[data-theme="dark"] .dl-cfg-box,
[data-theme="dark"] .sw-tbl-box,
[data-theme="dark"] .te-tbl-box,
[data-theme="dark"] .tw-tbl-box {
  background: var(--si-surface) !important;
  border-color: var(--si-border) !important;
  color: var(--si-text) !important;
}

/* App table headers (light gray → surface-2) */
[data-theme="dark"] .ah-table th,
[data-theme="dark"] .kpi-table th,
[data-theme="dark"] .de-table th,
[data-theme="dark"] .sw-table th,
[data-theme="dark"] .tw-table th,
[data-theme="dark"] .te-table th,
[data-theme="dark"] .il-table th,
[data-theme="dark"] .app-container table th,
[data-theme="dark"] .app-container thead th,
[data-theme="dark"] .app-container thead td {
  background: var(--si-surface-2) !important;
  color: var(--si-text-muted) !important;
  border-color: var(--si-border) !important;
}

/* App table rows */
[data-theme="dark"] .ah-table td,
[data-theme="dark"] .ah-table tbody tr:hover,
[data-theme="dark"] .app-container table td,
[data-theme="dark"] .app-container table tr:hover td {
  background: var(--si-surface) !important;
  border-color: var(--si-border) !important;
  color: var(--si-text) !important;
}
[data-theme="dark"] .app-container table tr:hover td {
  background: var(--si-surface-2) !important;
}

/* RCA root cause boxes */
[data-theme="dark"] .rca-root-cause {
  background: var(--si-surface-2) !important;
  border-color: var(--si-border) !important;
  color: var(--si-text) !important;
}

/* Savings rows (green/red highlight — convert to dark versions) */
[data-theme="dark"] .row-savings-pos { background: #052e16 !important; color: #86efac !important; }
[data-theme="dark"] .row-savings-neg { background: #450a0a !important; color: #fca5a5 !important; }

/* Warning/error boxes */
[data-theme="dark"] .warn-box,
[data-theme="dark"] .fc-warn,
[data-theme="dark"] .hw-warn,
[data-theme="dark"] .oke-warn,
[data-theme="dark"] .ppa-warn,
[data-theme="dark"] .rt-msg,
[data-theme="dark"] .eh-msg,
[data-theme="dark"] .warn,
[data-theme="dark"] .error,
[data-theme="dark"] .bp-warning,
[data-theme="dark"] .bp-msg {
  background: #1c1407 !important;
  border-color: #854d0e !important;
  color: #fcd34d !important;
}

/* Severity / status badges — dark mode versions */
[data-theme="dark"] .sev-critical,
[data-theme="dark"] .rca-sev-high  { background: #450a0a !important; color: #fca5a5 !important; }
[data-theme="dark"] .sev-high      { background: #450a0a !important; color: #fca5a5 !important; }
[data-theme="dark"] .sev-medium,
[data-theme="dark"] .rca-sev-medium{ background: #78350f !important; color: #fcd34d !important; }
[data-theme="dark"] .sev-warning,
[data-theme="dark"] .sev-info      { background: #1c1a07 !important; color: #fde68a !important; }
[data-theme="dark"] .sev-low       { background: #052e16 !important; color: #86efac !important; }
[data-theme="dark"] .status-anomaly{ background: #450a0a !important; color: #fca5a5 !important; }
[data-theme="dark"] .status-warning{ background: #78350f !important; color: #fcd34d !important; }
[data-theme="dark"] .badge-fail    { background: #450a0a !important; color: #fca5a5 !important; }
[data-theme="dark"] .badge-fair    { background: #78350f !important; color: #fcd34d !important; }
[data-theme="dark"] .badge-poor    { background: #4a1942 !important; color: #f0abfc !important; }
[data-theme="dark"] .badge-na      { background: #1e293b !important; color: #94a3b8 !important; }
[data-theme="dark"] .badge-alert   { background: #78350f !important; color: #fcd34d !important; }
[data-theme="dark"] .badge-predicted{ background: #1e3a5f !important; color: #93c5fd !important; }
[data-theme="dark"] .il-badge      { background: var(--si-surface-2) !important; color: var(--si-text-muted) !important; }
[data-theme="dark"] .il-badge-pri-high  { background: #450a0a !important; color: #fca5a5 !important; }
[data-theme="dark"] .il-badge-pri-medium{ background: #78350f !important; color: #fcd34d !important; }

/* AI chat bubble */
[data-theme="dark"] .eac-bubble {
  background: var(--si-surface-2) !important;
  color: var(--si-text) !important;
  border-color: var(--si-border) !important;
}
[data-theme="dark"] .eac-prompt-btn {
  background: var(--si-surface-2) !important;
  border-color: var(--si-border) !important;
  color: var(--si-text-muted) !important;
}

/* Progress bars background */
[data-theme="dark"] .bp-progress-bar-bg { background: var(--si-surface-3) !important; }
[data-theme="dark"] .progress-bar-wrap  { background: var(--si-surface-3) !important; }

/* Secondary buttons in apps */
[data-theme="dark"] .btn-secondary:not(.btn-outline-secondary) {
  background: var(--si-surface-2) !important;
  color: var(--si-text) !important;
  border-color: var(--si-border) !important;
}
[data-theme="dark"] .btn-toggle,
[data-theme="dark"] .btn-cancel {
  background: var(--si-surface-2) !important;
  color: var(--si-text-muted) !important;
  border-color: var(--si-border) !important;
}

/* App text colors */
[data-theme="dark"] .app-container h2,
[data-theme="dark"] .app-container h3,
[data-theme="dark"] .app-container h4,
[data-theme="dark"] .app-container p,
[data-theme="dark"] .app-container label,
[data-theme="dark"] .app-container small { color: inherit !important; }

/* ── 32. Admin Views — card dark mode ─────────────────────────────
   voice_agent_view, ai_view, notifications_view, gateway_config_view */

[data-theme="dark"] .va-card,
[data-theme="dark"] .notif-card,
[data-theme="dark"] .va-model-section {
  background: var(--si-surface) !important;
  border-color: var(--si-border) !important;
  color: var(--si-text) !important;
  box-shadow: var(--si-shadow) !important;
}
[data-theme="dark"] .va-card h3,
[data-theme="dark"] .notif-card h3,
[data-theme="dark"] .va-card h4 {
  color: var(--si-text) !important;
  border-color: var(--si-border) !important;
}
[data-theme="dark"] .va-form-row label,
[data-theme="dark"] .va-form-row .va-hint {
  color: var(--si-text-muted) !important;
}
[data-theme="dark"] .va-form-row input,
[data-theme="dark"] .va-form-row select,
[data-theme="dark"] .va-form-row textarea {
  background: var(--si-surface-2) !important;
  border-color: var(--si-border-2) !important;
  color: var(--si-text) !important;
}
[data-theme="dark"] .va-ptab {
  border-color: var(--si-border) !important;
  background: var(--si-surface-2) !important;
  color: var(--si-text-muted) !important;
}
[data-theme="dark"] .va-ptab:hover {
  border-color: var(--bg-menu-top, #3b82f6) !important;
  color: var(--bg-menu-top, #3b82f6) !important;
}
[data-theme="dark"] .va-ptab.active,
[data-theme="dark"] .va-provider-badge.active {
  border-color: var(--bg-menu-top, #3b82f6) !important;
  background: #1e3a5f !important;
  color: #93c5fd !important;
}
[data-theme="dark"] .va-provider-badge {
  border-color: var(--si-border) !important;
  background: var(--si-surface-2) !important;
  color: var(--si-text-muted) !important;
}
[data-theme="dark"] .va-alert-table th {
  background: var(--si-surface-2) !important;
  color: var(--si-text-muted) !important;
}
[data-theme="dark"] .va-alert-table td {
  border-color: var(--si-border) !important;
  color: var(--si-text) !important;
}
/* Admin subtitle/hint text */
[data-theme="dark"] .va-subtitle,
[data-theme="dark"] .va-hint,
[data-theme="dark"] .notif-form-row .notif-hint {
  color: var(--si-text-muted) !important;
}
/* Gateway config uses Bootstrap card */
[data-theme="dark"] .card-header {
  background: var(--si-surface-2) !important;
  border-color: var(--si-border) !important;
  color: var(--si-text) !important;
}

/* ── 33. Input View — dark mode ───────────────────────────────────
   Selected item highlight + node-info border */

[data-theme="dark"] .node .node-info {
  border-bottom-color: var(--si-border) !important;
}
[data-theme="dark"] .selected {
  background-color: #1e3a5f !important;
  color: var(--si-text) !important;
}
[data-theme="dark"] #noprocesses .alert {
  border-bottom-color: #854d0e !important;
}
/* Input list node accordion row colors */
[data-theme="dark"] .node-input {
  background: var(--si-surface) !important;
  border-color: var(--si-border) !important;
  color: var(--si-text) !important;
}
[data-theme="dark"] .node-input:hover {
  background: var(--si-surface-2) !important;
}
[data-theme="dark"] .node-input a,
[data-theme="dark"] .node-input span,
[data-theme="dark"] .node-input td {
  color: var(--si-text) !important;
}

/* ── 34. Automation Edit ─────────────────────────────────────────── */
[data-theme="dark"] .ae-section {
  background: var(--si-surface) !important;
  border-color: var(--si-border) !important;
  color: var(--si-text) !important;
}
[data-theme="dark"] .ae-section h3 { color: var(--si-text-muted) !important; }
[data-theme="dark"] .ae label      { color: var(--si-text) !important; }
[data-theme="dark"] .ae h2         { color: var(--si-text) !important; }
[data-theme="dark"] .group-block,
[data-theme="dark"] .action-block {
  background: var(--si-surface-2) !important;
  border-color: var(--si-border) !important;
  color: var(--si-text) !important;
}
[data-theme="dark"] .ae .group-label { color: #93c5fd !important; }
[data-theme="dark"] .ae .or-divider  { color: var(--si-text-subtle) !important; }
[data-theme="dark"] .ae input[type=text],
[data-theme="dark"] .ae input[type=number],
[data-theme="dark"] .ae select,
[data-theme="dark"] .ae textarea {
  background: var(--si-surface-2) !important;
  border-color: var(--si-border-2) !important;
  color: var(--si-text) !important;
}
[data-theme="dark"] .ae .btn-cancel {
  background: var(--si-surface-2) !important;
  color: var(--si-text-muted) !important;
  border-color: var(--si-border) !important;
}
[data-theme="dark"] .ae .btn-test {
  background: #1c1407 !important;
  border-color: #854d0e !important;
  color: #fcd34d !important;
}
[data-theme="dark"] .ae .btn-add {
  border-color: var(--bg-menu-top, #3b82f6) !important;
  color: #93c5fd !important;
}
[data-theme="dark"] .ae .btn-add:hover { background: #1e3a5f !important; }
[data-theme="dark"] .ae .btn-rm { color: #f87171 !important; }
[data-theme="dark"] .ae .msg.success { background: #052e16 !important; color: #86efac !important; }
[data-theme="dark"] .ae .msg.error   { background: #450a0a !important; color: #fca5a5 !important; }

/* ── 35. Vis (Visualisations) config panel ───────────────────────── */
[data-theme="dark"] #vis-app [style*="background-color:#efefef"],
[data-theme="dark"] [style*="background-color:#efefef"],
[data-theme="dark"] [style*="background-color: #efefef"] {
  background-color: var(--si-surface-2) !important;
}
[data-theme="dark"] #vis-app [style*="border-top: 1px solid #fff"],
[data-theme="dark"] [style*="border-top: 1px solid #fff"],
[data-theme="dark"] [style*="border-top:1px solid #fff"] {
  border-top-color: var(--si-border) !important;
}
[data-theme="dark"] #vis-app table,
[data-theme="dark"] #vis-app td,
[data-theme="dark"] #vis-app th {
  color: var(--si-text) !important;
  border-color: var(--si-border) !important;
}

/* ── 36. Incremental fixes for remaining inline white elements ─────
   Targets any element inside .app-container or .admin-container
   that still has a hardcoded white background via inline style. */
[data-theme="dark"] .app-container [style*="background:#fff"],
[data-theme="dark"] .app-container [style*="background: #fff"],
[data-theme="dark"] .app-container [style*="background-color:#fff"],
[data-theme="dark"] .app-container [style*="background-color: #fff"],
[data-theme="dark"] .app-container [style*="background:white"],
[data-theme="dark"] .admin-container [style*="background:#fff"],
[data-theme="dark"] .admin-container [style*="background: #fff"],
[data-theme="dark"] .admin-container [style*="background-color:#fff"],
[data-theme="dark"] .admin-container [style*="background:white"] {
  background-color: var(--si-surface) !important;
  background: var(--si-surface) !important;
}
[data-theme="dark"] .app-container [style*="color:#666"],
[data-theme="dark"] .app-container [style*="color: #666"],
[data-theme="dark"] .app-container [style*="color:#555"],
[data-theme="dark"] .app-container [style*="color:#444"],
[data-theme="dark"] .app-container [style*="color:#333"],
[data-theme="dark"] .admin-container [style*="color:#666"],
[data-theme="dark"] .admin-container [style*="color:#555"],
[data-theme="dark"] .admin-container [style*="color:#888"] {
  color: var(--si-text-muted) !important;
}

/* ── 37. Comprehensive Bootstrap btn dark mode ──────────────────────
   Strategy: darken ALL .btn first, then restore coloured variants.
   This covers .btn-default, .btn-small, .btn-mini and plain .btn
   regardless of what other classes are present.                     */
[data-theme="dark"] .btn {
  background-color: var(--si-surface-2) !important;
  background-image: none !important;
  color: var(--si-text) !important;
  border-color: var(--si-border-2) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
[data-theme="dark"] .btn:hover,
[data-theme="dark"] .btn:focus {
  background-color: var(--si-surface-3) !important;
  color: var(--si-text) !important;
}

/* Restore Bootstrap colour variants */
[data-theme="dark"] .btn-primary             { background-color: #3b82f6 !important; color:#fff !important; border-color:#2563eb !important; }
[data-theme="dark"] .btn-primary:hover       { background-color: #2563eb !important; }
[data-theme="dark"] .btn-success             { background-color: #16a34a !important; color:#fff !important; border-color:#15803d !important; }
[data-theme="dark"] .btn-success:hover       { background-color: #15803d !important; }
[data-theme="dark"] .btn-danger,
[data-theme="dark"] .btn-inverse             { background-color: #dc2626 !important; color:#fff !important; border-color:#b91c1c !important; }
[data-theme="dark"] .btn-danger:hover        { background-color: #b91c1c !important; }
[data-theme="dark"] .btn-warning             { background-color: #d97706 !important; color:#fff !important; border-color:#b45309 !important; }
[data-theme="dark"] .btn-info                { background-color: #0ea5e9 !important; color:#fff !important; border-color:#0284c7 !important; }
[data-theme="dark"] .btn-link               { background-color: transparent !important; border-color:transparent !important; color:#60a5fa !important; }

/* Dropdown toggles / input-group add-ons */
[data-theme="dark"] .input-group-btn .btn,
[data-theme="dark"] .input-append .btn,
[data-theme="dark"] .input-prepend .btn {
  background-color: var(--si-surface-2) !important;
  background-image: none !important;
  color: var(--si-text) !important;
  border-color: var(--si-border-2) !important;
}

/* Select2 / Bootstrap select widgets */
[data-theme="dark"] .select2-choice,
[data-theme="dark"] .select2-container .select2-choice {
  background: var(--si-surface-2) !important;
  background-image: none !important;
  color: var(--si-text) !important;
  border-color: var(--si-border-2) !important;
}
[data-theme="dark"] .select2-results li {
  background: var(--si-surface) !important;
  color: var(--si-text) !important;
}
[data-theme="dark"] .select2-results li.select2-highlighted {
  background: #3b82f6 !important;
  color: #fff !important;
}
[data-theme="dark"] .select2-drop {
  background: var(--si-surface) !important;
  border-color: var(--si-border-2) !important;
}

/* ── 38. Automation list page — hardcoded colours ───────────────────── */
[data-theme="dark"] .btn-template {
  background: #052e16 !important;
  border-color: #166534 !important;
  color: #86efac !important;
}
[data-theme="dark"] .btn-template:hover { background: #14532d !important; }

[data-theme="dark"] .btn-icon {
  background: var(--si-surface-2) !important;
  border-color: var(--si-border-2) !important;
  color: var(--si-text) !important;
}
[data-theme="dark"] .btn-icon:hover          { background: var(--si-surface-3) !important; }
[data-theme="dark"] .btn-icon.danger:hover   { background: #450a0a !important; border-color:#dc2626 !important; color:#fca5a5 !important; }

[data-theme="dark"] .btn-settings {
  background: var(--si-surface-2) !important;
  border-color: var(--si-border-2) !important;
  color: var(--si-text-muted) !important;
}
[data-theme="dark"] .btn-settings:hover { background: var(--si-surface-3) !important; }

[data-theme="dark"] .btn-ack {
  background: #052e16 !important;
  border-color: #166534 !important;
  color: #86efac !important;
}
[data-theme="dark"] .btn-reset {
  background: #422006 !important;
  border-color: #92400e !important;
  color: #fcd34d !important;
}
[data-theme="dark"] .btn-unsub {
  background: transparent !important;
  border-color: #dc2626 !important;
  color: #fca5a5 !important;
}

[data-theme="dark"] .rule-card {
  background: var(--si-surface) !important;
  border-color: var(--si-border) !important;
}
[data-theme="dark"] .modal-box,
[data-theme="dark"] .qa-modal-box {
  background: var(--si-surface) !important;
  color: var(--si-text) !important;
}
[data-theme="dark"] .modal-box h3,
[data-theme="dark"] .modal-box h4,
[data-theme="dark"] .modal-box label,
[data-theme="dark"] .qa-modal-box h3,
[data-theme="dark"] .qa-modal-box label { color: var(--si-text) !important; }

[data-theme="dark"] .tab-btn         { color: var(--si-text-muted) !important; }
[data-theme="dark"] .tab-btn.active  { color: #60a5fa !important; border-bottom-color: #60a5fa !important; }

[data-theme="dark"] .action-chip {
  background: var(--si-surface-2) !important;
  color: var(--si-text-muted) !important;
}
[data-theme="dark"] .tpl-card {
  border-color: var(--si-border) !important;
  background: var(--si-surface) !important;
}
[data-theme="dark"] .tpl-card:hover { border-color: #3b82f6 !important; background: var(--si-surface-2) !important; }
[data-theme="dark"] .tpl-desc       { color: var(--si-text-muted) !important; }
[data-theme="dark"] .sub-item       { background: var(--si-surface-2) !important; color: var(--si-text) !important; }

[data-theme="dark"] .rule-conditions { color: var(--si-text-muted) !important; }
[data-theme="dark"] .rule-footer     { color: var(--si-text-subtle) !important; }
[data-theme="dark"] .empty-state     { color: var(--si-text-muted) !important; }
[data-theme="dark"] .field-group label { color: var(--si-text) !important; }

/* Inline style overrides for automation Export/Import labels */
[data-theme="dark"] .auto-header-btns [style*="background:#f8f9fa"],
[data-theme="dark"] .auto-header-btns [style*="background: #f8f9fa"],
[data-theme="dark"] .auto-header-btns [style*="background:#f1f3f4"] {
  background: var(--si-surface-2) !important;
  border-color: var(--si-border-2) !important;
  color: var(--si-text) !important;
}
/* Automation log modal inline styles */
[data-theme="dark"] [style*="background:#fff"][style*="border-radius"] {
  background: var(--si-surface) !important;
}
[data-theme="dark"] [style*="background:#f1f3f4"] {
  background: var(--si-surface-2) !important;
}
[data-theme="dark"] [style*="background:#f8f9fa"] {
  background: var(--si-surface-2) !important;
}
[data-theme="dark"] [style*="color:#666"],
[data-theme="dark"] [style*="color: #666"],
[data-theme="dark"] [style*="color:#333"],
[data-theme="dark"] [style*="color: #333"],
[data-theme="dark"] [style*="color:#444"],
[data-theme="dark"] [style*="color:#555"] {
  color: var(--si-text-muted) !important;
}

/* ── 39. App module hardcoded colours (not covered by CSS variables) ── */
/* Config / table modal boxes */
[data-theme="dark"] [class*="-cfg-box"],
[data-theme="dark"] [class*="-tbl-box"],
[data-theme="dark"] [class*="-modal-box"] {
  background: var(--si-surface) !important;
  color: var(--si-text) !important;
}
[data-theme="dark"] [class*="-cfg-hdr"],
[data-theme="dark"] [class*="-cfg-ftr"],
[data-theme="dark"] [class*="-tbl-hdr"] {
  border-color: var(--si-border) !important;
  background: var(--si-surface) !important;
}

/* Input/select fields inside app modules */
[data-theme="dark"] [class*="-field"] input,
[data-theme="dark"] [class*="-field"] select,
[data-theme="dark"] [class*="-field"] textarea {
  background: var(--si-surface-2) !important;
  color: var(--si-text) !important;
  border-color: var(--si-border-2) !important;
}

/* btn-secondary in apps (hardcoded #f1f5f9 / #f1f3f4) */
[data-theme="dark"] .btn-secondary {
  background: var(--si-surface-2) !important;
  color: var(--si-text) !important;
  border-color: var(--si-border-2) !important;
}
[data-theme="dark"] .btn-secondary:hover { background: var(--si-surface-3) !important; }

/* Live / PDF app-ui buttons (hardcoded #f1f5f9 in app-ui.js inline style) */
[data-theme="dark"] .appui-live-btn,
[data-theme="dark"] .appui-print-btn {
  background: var(--si-surface-2) !important;
  border-color: var(--si-border-2) !important;
  color: var(--si-text) !important;
}
[data-theme="dark"] .appui-live-btn:hover,
[data-theme="dark"] .appui-print-btn:hover { background: var(--si-surface-3) !important; }

/* App table hover and row highlight rows */
[data-theme="dark"] [class*="-tbl"] tbody tr:hover { background: var(--si-surface-2) !important; }
[data-theme="dark"] [class*=".row-hl"]  { background: #1e3a5f !important; }
[data-theme="dark"] [class*=".row-total"] { background: #1e3a5f !important; }

/* cfg-btn hover in apps */
[data-theme="dark"] [class*="-cfg-btn"]:hover {
  background: var(--si-surface-2) !important;
  color: #60a5fa !important;
}

/* ── 40. Feed list — specific fixes ─────────────────────────────────── */
/* Node accordion border (hardcoded white) */
[data-theme="dark"] .node .accordion-toggle {
  border-bottom-color: var(--si-border) !important;
}
/* Accordion header hover + click — base CSS has #d4e3fc (light blue), no dark override */
[data-theme="dark"] .node .accordion-toggle:hover {
  background-color: var(--si-surface-3) !important;
}
[data-theme="dark"] .node .accordion-toggle:active {
  background-color: var(--si-border) !important;
}
/* Row-level catch-all: base CSS has background:#f0f0f0 and border-bottom:1px solid #fff */
[data-theme="dark"] .node .collapse > * {
  background: var(--si-surface) !important;
  border-bottom-color: var(--si-border) !important;
}
[data-theme="dark"] .node .collapse > *:hover {
  background: var(--si-surface-2) !important;
}
/* Suppress the white flash on click for feed and input rows */
[data-theme="dark"] .node-feed:active,
[data-theme="dark"] .node-input:active,
[data-theme="dark"] .node .collapse > *:active {
  background: var(--si-surface-3) !important;
}
/* Delete feed modal selected items panel */
[data-theme="dark"] #deleteFeedModalSelectedItems {
  background: var(--si-surface-2) !important;
  color: var(--si-text) !important;
  border-color: var(--si-border) !important;
}

/* ── 41. High-specificity text + form element catch-all ─────────────────
   Uses html[data-theme="dark"] element+attribute prefix → specificity (0,1,2).
   This beats any class+element inline <style> rule (0,1,1) without !important
   AND we add !important for absolute priority.                              */

/* Labels — beat any .xx-form-row label { color:#444 } inline rules */
html[data-theme="dark"] label,
html[data-theme="dark"] .control-label {
  color: var(--si-text) !important;
}
html[data-theme="dark"] small {
  color: var(--si-text-muted) !important;
}

/* All text input fields — beat any .xx-form-row input { color:#333; background:#fafafa } */
html[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background-color: var(--si-surface-2) !important;
  color: var(--si-text) !important;
  border-color: var(--si-border-2) !important;
}
html[data-theme="dark"] input[readonly] {
  background-color: var(--si-surface-3) !important;
  color: var(--si-text-muted) !important;
}

/* Admin notifications page */
html[data-theme="dark"] .notif-form-row label,
html[data-theme="dark"] .notif-form-row .notif-hint {
  color: var(--si-text-muted) !important;
}
html[data-theme="dark"] .notif-key-toggle {
  background: var(--si-surface-2) !important;
  border-color: var(--si-border-2) !important;
  color: var(--si-text-muted) !important;
}
html[data-theme="dark"] .notif-wrap .notif-sub,
html[data-theme="dark"] .notif-card h3 {
  color: var(--si-text) !important;
  border-color: var(--si-border) !important;
}
html[data-theme="dark"] .notif-divider {
  border-top-color: var(--si-border) !important;
}
html[data-theme="dark"] .notif-bot-name {
  background: #1e3a5f !important;
  color: #93c5fd !important;
}

/* Admin VA / AI page subtitle text */
html[data-theme="dark"] .va-admin-wrap .va-subtitle,
html[data-theme="dark"] .va-subtitle { color: var(--si-text-muted) !important; }

/* Admin AI page key-toggle button */
html[data-theme="dark"] .va-key-toggle,
html[data-theme="dark"] .notif-key-toggle {
  background: var(--si-surface-2) !important;
  border-color: var(--si-border-2) !important;
  color: var(--si-text-muted) !important;
}
html[data-theme="dark"] .va-key-status.set   { color: #86efac !important; }
html[data-theme="dark"] .va-key-status.unset { color: #fca5a5 !important; }
html[data-theme="dark"] .notif-key-status.set   { color: #86efac !important; }
html[data-theme="dark"] .notif-key-status.unset { color: #fca5a5 !important; }

/* Serial config heading inline style */
html[data-theme="dark"] [style*="color:#333"] {
  color: var(--si-text-muted) !important;
}

/* Any paragraph / hint with #888 or #999 muted color */
html[data-theme="dark"] [class*="-sub"],
html[data-theme="dark"] [class*="-hint"],
html[data-theme="dark"] [class*="-muted"],
html[data-theme="dark"] [class*="-desc"] {
  color: var(--si-text-muted) !important;
}

/* Bootstrap table cells — default dark text from Bootstrap 2 */
html[data-theme="dark"] td,
html[data-theme="dark"] th {
  color: var(--si-text) !important;
  border-color: var(--si-border) !important;
}
/* Don't override coloured status cells */
html[data-theme="dark"] td[style*="color"],
html[data-theme="dark"] th[style*="color"] {
  /* Keep existing inline color */
  color: inherit;
}

/* Headings that may have hardcoded dark colors */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
  color: var(--si-text) !important;
}

/* Paragraphs that inherited dark body color from module stylesheets */
html[data-theme="dark"] p {
  color: var(--si-text) !important;
}
/* But restore semantic coloured paragraphs */
html[data-theme="dark"] p[style*="color"] { color: inherit; }

/* ── 42. Bootstrap Glyphicon sprite icons — dark mode inversion ─────────
   <i class="icon-*"> elements use a black background-image sprite sheet.
   CSS filter:invert(1) converts black→white in dark mode.
   Only targets <i> elements (not <svg> which uses fill:currentColor).
   Scoped broadly — any <i> icon in dark mode context.                   */
html[data-theme="dark"] i[class^="icon-"],
html[data-theme="dark"] i[class*=" icon-"],
html[data-theme="dark"] i.icon {
  filter: invert(1) brightness(1.05);
}
/* Don't invert icons that already have a white sprite via .icon-white
   (they were placed on dark backgrounds by the developer and are correct) */
html[data-theme="dark"] i.icon-white {
  filter: none;
}
/* Also invert SVG icons inside buttons/controls that use fill:currentColor
   by ensuring their color is var(--si-text) — already done in section 37,
   but reinforce here with high-specificity rule                            */
html[data-theme="dark"] .btn svg.icon,
html[data-theme="dark"] .controls svg.icon {
  color: var(--si-text) !important;
  fill: currentColor;
}

/* ── 43. App Gallery — Available Apps (app_new.php) ─────────────────────
   Inline <style> in app_new.php has class-level (0,1,0) rules that come
   after the external stylesheet, so we need (0,2,0) selectors to win.   */

/* Page title */
[data-theme="dark"] .app-new-wrap h2 {
  color: var(--si-text) !important;
}

/* Search box */
[data-theme="dark"] .app-search-wrap {
  background: var(--si-surface-2) !important;
  border-color: var(--si-border-2) !important;
}
[data-theme="dark"] .app-search {
  color: var(--si-text) !important;
}
[data-theme="dark"] .app-search-wrap svg {
  color: var(--si-text-muted) !important;
}
[data-theme="dark"] .app-search-wrap:focus-within {
  border-color: #3b82f6 !important;
}

/* Category filter chips */
[data-theme="dark"] .app-filter-btn {
  background: var(--si-surface-2) !important;
  border-color: var(--si-border-2) !important;
  color: var(--si-text-muted) !important;
}
[data-theme="dark"] .app-filter-btn:hover {
  background: var(--si-surface-3) !important;
  border-color: var(--si-border-2) !important;
}
[data-theme="dark"] .app-filter-btn:not(.active) .count-badge {
  background: var(--si-surface-3) !important;
  color: var(--si-text-muted) !important;
}

/* Result count */
[data-theme="dark"] .app-result-count {
  color: var(--si-text-muted) !important;
}

/* App cards */
[data-theme="dark"] .app-item {
  background: var(--si-surface) !important;
  border-color: var(--si-border) !important;
}
[data-theme="dark"] .app-item:hover {
  border-color: #3b82f6 !important;
  box-shadow: 0 2px 14px rgba(37,98,231,.25) !important;
}
[data-theme="dark"] .app-item-title {
  color: var(--si-text) !important;
}
[data-theme="dark"] .app-item-desc {
  color: var(--si-text-muted) !important;
}

/* Category badges — override inline style= background/color with !important */
[data-theme="dark"] [data-app-cat="energy"]        .app-item-cat-badge { background: #0c4a6e !important; color: #7dd3fc !important; }
[data-theme="dark"] [data-app-cat="analytics"]     .app-item-cat-badge { background: #2e1065 !important; color: #c4b5fd !important; }
[data-theme="dark"] [data-app-cat="manufacturing"] .app-item-cat-badge { background: #451a03 !important; color: #fcd34d !important; }
[data-theme="dark"] [data-app-cat="monitoring"]    .app-item-cat-badge { background: #022c22 !important; color: #6ee7b7 !important; }
[data-theme="dark"] [data-app-cat="ai"]            .app-item-cat-badge { background: #4a044e !important; color: #f9a8d4 !important; }

/* Search highlight mark */
[data-theme="dark"] .app-item mark {
  background: #854d0e !important;
  color: #fef08a !important;
}

/* Create App modal */
[data-theme="dark"] .create-app-overlay .modal-box {
  background: var(--si-surface) !important;
  color: var(--si-text) !important;
}
[data-theme="dark"] .create-app-overlay .modal-box h3 {
  color: var(--si-text) !important;
}
[data-theme="dark"] .create-app-overlay .modal-box label {
  color: var(--si-text) !important;
}
[data-theme="dark"] .create-app-overlay .modal-box input {
  background: var(--si-surface-2) !important;
  border-color: var(--si-border-2) !important;
  color: var(--si-text) !important;
}

/* ── 44. SVG icon universal dark-mode colour fix ──────────────────────
   Many SVG icons use fill:currentColor or fill inherited from context.
   In dark mode, ensure all svg.icon elements render as light-coloured
   unless an inline style explicitly overrides the colour (e.g. status
   indicators, brand icons). Uses (0,1,2) specificity to beat any
   (0,2,1) class rule that doesn't carry !important.
   NOTE: menu.css fix (dropdown fill:#000 → currentColor) is the
   primary fix; this rule is the belt-and-suspenders catch-all.        */
[data-theme="dark"] svg.icon:not([style*="color:"]) {
  color: var(--si-text, #f1f5f9);
  fill: currentColor;
}
/* Top-bar user / enter / controls icons keep white on the coloured bar */
[data-theme="dark"] .menu-top svg.icon,
[data-theme="dark"] .menu-tr  svg.icon {
  color: #fff;
  fill: currentColor;
}
/* Dashboard list toolbar SVG icons */
[data-theme="dark"] .controls svg.icon,
[data-theme="dark"] .btn      svg.icon {
  color: var(--si-text) !important;
  fill: currentColor;
}

/* ── 43. Flash suppression — dark mode transition / background fixes ────────
   Prevents light-colored backgrounds briefly showing during CSS transitions
   that are triggered by row clicks, accordion expand, modal open, etc.    */

/* 1. Restrict .node .collapse transition to height only.
      Base CSS has transition-property:all which animates background-color
      during the 350ms open — exposing the light #f0f0f0 background briefly. */
[data-theme="dark"] .node .collapse {
  transition-property: height !important;
  background-color: var(--si-surface) !important;
}
[data-theme="dark"] .node .collapse.in {
  background-color: var(--si-surface) !important;
}

/* 2. Modal container + header/footer — Bootstrap default is white background */
[data-theme="dark"] .modal {
  background-color: var(--si-surface) !important;
}
[data-theme="dark"] .modal-header {
  background-color: var(--si-surface-2) !important;
  border-bottom-color: var(--si-border) !important;
  color: var(--si-text) !important;
}
[data-theme="dark"] .modal-footer {
  background-color: var(--si-surface-2) !important;
  border-top-color: var(--si-border) !important;
}

/* 3. Device-list action button hover — base CSS hardcodes #eaeaea */
[data-theme="dark"] .device-key:hover,
[data-theme="dark"] .device-configure:hover {
  background-color: var(--si-surface-3) !important;
}

/* 4. Bootstrap table-hover row highlight — base is #f5f5f5 */
[data-theme="dark"] .table-hover tbody tr:hover > td,
[data-theme="dark"] .table-hover tbody tr:hover > th {
  background-color: var(--si-surface-2) !important;
}
[data-theme="dark"] .table-striped tbody > tr:nth-child(odd) > td,
[data-theme="dark"] .table-striped tbody > tr:nth-child(odd) > th {
  background-color: var(--si-surface-2) !important;
}
[data-theme="dark"] .table > tbody > tr > td,
[data-theme="dark"] .table > tbody > tr > th,
[data-theme="dark"] .table > tfoot > tr > td {
  border-top-color: var(--si-border) !important;
  color: var(--si-text) !important;
}
[data-theme="dark"] .table > thead > tr > th {
  border-bottom-color: var(--si-border) !important;
  color: var(--si-text-muted) !important;
}

/* 5. Bootstrap .btn active/focus — base has #ddd background on :active */
[data-theme="dark"] .btn:active,
[data-theme="dark"] .btn.active {
  background-color: var(--si-surface-3) !important;
  border-color: var(--si-border-2) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .btn-primary:active,
[data-theme="dark"] .btn-primary.active {
  background-color: #1d4ed8 !important;
  border-color: #1e40af !important;
}

/* 6. Tab-pane / content area — suppress any white background during SPA nav */
[data-theme="dark"] .tab-content,
[data-theme="dark"] .tab-pane,
[data-theme="dark"] .accordion-inner {
  background-color: var(--si-surface) !important;
}