/* Serobase Monitoring dark mode compatibility fixes · v0.34.5
   Loaded after the main UI styles so legacy light-only components stay readable. */

html[data-ui-theme="dark"]{
  scrollbar-color:#506472 #101922;
}
html[data-ui-theme="dark"] ::selection{background:rgba(240,82,47,.34);color:#fff}

/* Tables: legacy CSS still paints the table body white. */
html[data-ui-theme="dark"] table,
html[data-ui-theme="dark"] .table-wrap,
html[data-ui-theme="dark"] .device-table-wrap,
html[data-ui-theme="dark"] .inventory-table-wrap{
  background:var(--surface)!important;
  color:var(--text)!important;
}
html[data-ui-theme="dark"] thead,
html[data-ui-theme="dark"] tbody,
html[data-ui-theme="dark"] tr{
  background:transparent!important;
  color:var(--text)!important;
}
html[data-ui-theme="dark"] tbody td{
  background:var(--surface)!important;
  color:#dce6ed!important;
  border-color:var(--line-soft)!important;
}
html[data-ui-theme="dark"] tbody tr:nth-child(odd) td,
html[data-ui-theme="dark"] tbody tr:nth-child(even) td{
  background:var(--surface)!important;
}
html[data-ui-theme="dark"] tbody tr:hover td,
html[data-ui-theme="dark"] tbody tr:focus-within td{
  background:var(--surface-hover)!important;
}
html[data-ui-theme="dark"] th{
  background:var(--surface-2)!important;
  color:#a9bbc8!important;
  border-color:var(--line)!important;
}

/* Common surfaces that have explicit light backgrounds in legacy pages. */
html[data-ui-theme="dark"] .panel-body,
html[data-ui-theme="dark"] .scope-node,
html[data-ui-theme="dark"] .scope-node>summary,
html[data-ui-theme="dark"] .customer-node>summary,
html[data-ui-theme="dark"] .ticket-filter-card,
html[data-ui-theme="dark"] .ticket-dashboard-row,
html[data-ui-theme="dark"] .summary-item,
html[data-ui-theme="dark"] .dashboard-widget,
html[data-ui-theme="dark"] .script-card,
html[data-ui-theme="dark"] .script-dialog,
html[data-ui-theme="dark"] .alert-menu-pop,
html[data-ui-theme="dark"] .material-suggestions,
html[data-ui-theme="dark"] .global-search-results,
html[data-ui-theme="dark"] .global-search-item,
html[data-ui-theme="dark"] .ticket-attachment-drop,
html[data-ui-theme="dark"] .attachment-drop,
html[data-ui-theme="dark"] .dropzone,
html[data-ui-theme="dark"] .ticket-cc-preview,
html[data-ui-theme="dark"] .danger-zone,
html[data-ui-theme="dark"] .error-detail{
  background:var(--surface)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}
html[data-ui-theme="dark"] .scope-node>summary:hover,
html[data-ui-theme="dark"] .customer-node>summary:hover,
html[data-ui-theme="dark"] .global-search-item:hover,
html[data-ui-theme="dark"] .global-search-item.active,
html[data-ui-theme="dark"] .material-suggestion:hover,
html[data-ui-theme="dark"] .material-suggestion:focus{
  background:var(--surface-hover)!important;
  color:#fff!important;
}

/* Navigation tabs/chips that otherwise remain bright white. */
html[data-ui-theme="dark"] .tabbtn,
html[data-ui-theme="dark"] .subnav a,
html[data-ui-theme="dark"] .pill,
html[data-ui-theme="dark"] .status-chip,
html[data-ui-theme="dark"] .device-role-chip{
  background:#1b2a35!important;
  color:#bdcad4!important;
  border-color:#354853!important;
}
html[data-ui-theme="dark"] .tabbtn:hover,
html[data-ui-theme="dark"] .subnav a:hover{
  background:#22343f!important;
  color:#fff!important;
}
html[data-ui-theme="dark"] .tabbtn.active,
html[data-ui-theme="dark"] .subnav a.active{
  background:#3b261f!important;
  color:#ff9c85!important;
  border-color:#734332!important;
}
html[data-ui-theme="dark"] .status-chip.online{
  background:#17362b!important;color:#79dcad!important;border-color:#285b46!important
}
html[data-ui-theme="dark"] .status-chip.offline,
html[data-ui-theme="dark"] .status-chip.bad{
  background:#3a2026!important;color:#ff929d!important;border-color:#6a3640!important
}

/* Dropdown/search suggestion rows. */
html[data-ui-theme="dark"] .material-suggestion,
html[data-ui-theme="dark"] .global-search-item{
  color:#dce6ed!important;
  border-color:var(--line-soft)!important;
}
html[data-ui-theme="dark"] .material-suggestion-meta,
html[data-ui-theme="dark"] .global-search-item-sub,
html[data-ui-theme="dark"] .global-search-item-match,
html[data-ui-theme="dark"] .empty{
  color:var(--muted)!important;
}

/* Forms, browser-native option menus and autofill. */
html[data-ui-theme="dark"] option,
html[data-ui-theme="dark"] optgroup{
  background:#17232d!important;
  color:#e7eef3!important;
}
html[data-ui-theme="dark"] input:-webkit-autofill,
html[data-ui-theme="dark"] input:-webkit-autofill:hover,
html[data-ui-theme="dark"] input:-webkit-autofill:focus{
  -webkit-text-fill-color:#e7eef3!important;
  -webkit-box-shadow:0 0 0 1000px #111e27 inset!important;
  caret-color:#e7eef3!important;
}
html[data-ui-theme="dark"] input[type="checkbox"],
html[data-ui-theme="dark"] input[type="radio"]{accent-color:#f0522f}

/* Separators and muted content need enough contrast on dark surfaces. */
html[data-ui-theme="dark"] hr{border-color:var(--line)!important}
html[data-ui-theme="dark"] .k,
html[data-ui-theme="dark"] .hint,
html[data-ui-theme="dark"] small{color:var(--muted)!important}
html[data-ui-theme="dark"] a:hover{color:#fff}

/* Keep primary/destructive semantics intact after broad dark button rules. */
html[data-ui-theme="dark"] .btn.primary{
  background:linear-gradient(180deg,#f45a37,#ef4f2c)!important;
  border-color:#dc4727!important;
  color:#fff!important;
}
html[data-ui-theme="dark"] .btn.danger{
  background:#351e24!important;border-color:#6b3540!important;color:#ff9ba5!important
}

/* Mobile cards and bottom action bar. */
@media(max-width:820px){
  html[data-ui-theme="dark"] table.ui-mobile-cards tbody tr,
  html[data-ui-theme="dark"] table.ui-mobile-cards tbody td{
    background:var(--surface)!important;
    color:#dce6ed!important;
    border-color:var(--line-soft)!important;
  }
  html[data-ui-theme="dark"] table.ui-mobile-cards tbody td:first-child,
  html[data-ui-theme="dark"] table.ui-mobile-cards tbody td.ui-card-actions,
  html[data-ui-theme="dark"] table.ui-mobile-cards tr.ui-empty-row td{
    background:#14212b!important;
  }
  html[data-ui-theme="dark"] .ui-mobile-ticket-actions{
    background:rgba(20,33,43,.98)!important;
    border-color:#30414d!important;
    box-shadow:0 -7px 24px rgba(0,0,0,.28)!important;
  }
}