/* static/css/common/theme-dark.css
 * -----------------------------------------------------------------------------
 * Dark mode for the app shell (DASH-1768 / DASH-1776): Bootstrap 4.5.2,
 * DataTables 2.x, and the shared rules in styles.css and common/*.css.
 *
 * Every rule here is scoped to html[data-theme="dark"], so light mode is
 * untouched: light keeps the literals it has always had. Colours come from
 * tokens.css: the semantic tokens, a palette token where no semantic one fits,
 * and DataTables' --dt-* variables, which take bare "R, G, B" triplets and so
 * repeat the token values as numbers. Loaded after styles.css so a rule
 * here wins over the light one at the same specificity; rules that override
 * an !important light rule carry !important themselves.
 *
 * Page CSS (css/pages/*), injected <style> blocks and colours set inline
 * from TypeScript get derived dark rules at runtime (utils/DarkRemap.ts), and
 * Chart.js charts are themed by utils/ChartTheme.ts; the rules here are the
 * hand-written ones, which outrank those. Tenant branding is themed by
 * utils/AppBranding.ts.
 * -------------------------------------------------------------------------- */

/* ---- Base ---------------------------------------------------------------- */
html[data-theme="dark"],
html[data-theme="dark"] body {
    background-color: var(--color-bg);
    color: var(--color-text);
}

html[data-theme="dark"] a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link):not(.list-group-item):not(.alert-link) {
    color: var(--color-link);
}

html[data-theme="dark"] a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link):not(.list-group-item):not(.alert-link):hover {
    color: var(--color-link-hover);
}

html[data-theme="dark"] hr {
    border-top-color: var(--color-border);
}

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,
html[data-theme="dark"] .page-subheading,
html[data-theme="dark"] .text-body {
    color: var(--color-text) !important;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .page-sub-heading-small,
html[data-theme="dark"] .row-hint,
html[data-theme="dark"] #loadingIndicator p,
html[data-theme="dark"] .load-time,
html[data-theme="dark"] .info-icon {
    color: var(--color-text-muted) !important;
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light {
    background-color: var(--color-surface) !important;
}

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-left,
html[data-theme="dark"] .border-right {
    border-color: var(--color-border) !important;
}

/* The stock rail and the dark page are both #2b2b2b, so a 1px divider marks
   the rail's edge. An inset shadow rather than a border: styles.css pins
   border-right to none, and a shadow leaves the 270px width unchanged. */
html[data-theme="dark"] #sidebarWrapper {
    box-shadow: inset -1px 0 0 var(--color-border);
}

html[data-theme="dark"] code,
html[data-theme="dark"] code.events-code,
html[data-theme="dark"] .events-code {
    color: var(--color-success);
}

html[data-theme="dark"] pre {
    color: var(--color-text);
}

/* ---- Cards, list groups, collapsibles ------------------------------------ */
html[data-theme="dark"] .card,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .collapsible,
html[data-theme="dark"] .content,
html[data-theme="dark"] .metric-cell,
html[data-theme="dark"] .multiple-metric-card {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

html[data-theme="dark"] .content,
html[data-theme="dark"] .metric-cell,
html[data-theme="dark"] .multiple-metric-card {
    box-shadow: 0 2px 6px var(--color-shadow);
}

html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer {
    background-color: var(--color-surface-muted);
    border-color: var(--color-border);
}

html[data-theme="dark"] .list-group-item.active {
    background-color: var(--color-surface-hover) !important;
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

html[data-theme="dark"] .list-group-item-action:hover,
html[data-theme="dark"] .list-group-item-action:focus {
    background-color: var(--color-surface-hover);
    color: var(--color-text);
}

html[data-theme="dark"] .metric-value,
html[data-theme="dark"] .metric-coming-soon,
html[data-theme="dark"] .metric-qatest,
html[data-theme="dark"] .metric-label,
html[data-theme="dark"] .multiple-metric-title {
    color: var(--color-text);
}

html[data-theme="dark"] .multiple-metric-description {
    color: var(--color-text-muted);
}

/* ---- Forms ---------------------------------------------------------------- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] .filter-input,
html[data-theme="dark"] select.dt-input,
html[data-theme="dark"] select.np-window-select,
html[data-theme="dark"] select.dt-style-select,
html[data-theme="dark"] input.dt-style-input,
html[data-theme="dark"] div.dt-search input[type="search"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="time"] {
    background-color: var(--color-input-bg);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .custom-select:focus,
html[data-theme="dark"] .filter-input:focus,
html[data-theme="dark"] select.np-window-select:focus,
html[data-theme="dark"] select.dt-style-select:focus,
html[data-theme="dark"] input.dt-style-input:focus,
html[data-theme="dark"] div.dt-search input[type="search"]:focus {
    background-color: var(--color-input-bg);
    border-color: var(--color-link);
    color: var(--color-text);
    box-shadow: 0 0 0 0.2rem var(--color-focus-ring);
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--color-text-muted);
}

html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] {
    background-color: var(--color-surface-muted);
    color: var(--color-text-disabled);
}

html[data-theme="dark"] .input-group-text {
    background-color: var(--color-surface-muted);
    border-color: var(--color-border-strong);
    color: var(--color-text-secondary);
}

/* styles.css pins select { color-scheme: light } (for the light page), which
   would keep a light arrow, popup and scrollbar on these dark selects. */
html[data-theme="dark"] select {
    color-scheme: dark;
}

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

html[data-theme="dark"] .filter-label,
html[data-theme="dark"] div.dt-search .search-icon {
    color: var(--color-text-muted);
}

html[data-theme="dark"] .tenant-scope-toggle {
    color: var(--color-text-secondary);
}

/* ---- Buttons ---------------------------------------------------------------- */
html[data-theme="dark"] .btn-light {
    background-color: var(--color-surface-overlay);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

/* styles.css fills every .btn with --brand-accent, outline and link variants
   included; recolouring their text would put it on that fill, so in dark they
   become what their names say: transparent, with a border or as a link. */
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-outline-dark {
    background-color: transparent;
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-secondary);
}

html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-outline-dark:hover,
html[data-theme="dark"] .btn-outline-secondary.active,
html[data-theme="dark"] .btn-outline-dark.active {
    background-color: var(--color-surface-hover);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

html[data-theme="dark"] .btn-link {
    background-color: transparent;
    color: var(--color-link);
}

html[data-theme="dark"] .close,
html[data-theme="dark"] .filter-btn {
    color: var(--color-text) !important;
    text-shadow: none;
}

html[data-theme="dark"] .close:hover,
html[data-theme="dark"] .filter-btn:hover {
    color: var(--color-text-muted) !important;
}

html[data-theme="dark"] .copy-btn .material-icons {
    color: var(--color-text-muted);
}

html[data-theme="dark"] .copy-btn:hover .copy-icon {
    color: var(--color-link-hover);
}

/* ---- Dropdowns, popovers, tooltips --------------------------------------- */
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .filter-dropdown,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .custom-tooltip {
    background-color: var(--color-surface-overlay);
    border-color: var(--color-border);
    color: var(--color-text);
    box-shadow: 0 4px 12px var(--color-shadow);
}

html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .filter-dropdown a {
    color: var(--color-text);
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus,
html[data-theme="dark"] .dropdown-item:active,
html[data-theme="dark"] .dropdown-item.active,
html[data-theme="dark"] .filter-dropdown a:hover,
html[data-theme="dark"] .select-menu .dropdown-item:hover,
html[data-theme="dark"] .select-menu .dropdown-item.select-menu-cursor {
    background-color: var(--color-surface-hover);
    color: var(--color-text);
}

/* The rail looks the same in both themes, so its user-menu items keep the
   light focus fill (Bootstrap) and :active fill (tables.css) instead of the rule above. */
html[data-theme="dark"] #sidebar-user .dropdown-item:focus:not(:hover) {
    background-color: #f8f9fa;
}

html[data-theme="dark"] #sidebar-user .dropdown-item:active:not(:hover) {
    background-color: #f2f2f2;
}

/* --brand-accent-fg is the label ON an accent fill, and in dark it can be ink.
   These use it as text on the page surface, so they take page text instead. */
html[data-theme="dark"] .select-menu .select-menu-check,
html[data-theme="dark"] #msspAdminRoot .partner-noun-edit:hover,
html[data-theme="dark"] #msspAdminRoot .partner-refresh-btn:hover,
html[data-theme="dark"] #msspAdminRoot .partner-refresh-btn:focus-visible {
    color: var(--color-text);
}

html[data-theme="dark"] .dropdown-divider {
    border-top-color: var(--color-border);
}

/* The table Columns menu: its light rules are a stylesheet ColumnLayout.ts
   injects at runtime (single-class selectors), which these out-rank. */
html[data-theme="dark"] .dt-col-menu-panel {
    background: var(--color-surface-overlay);
    border-color: var(--color-border);
    color: var(--color-text);
    box-shadow: 0 6px 18px var(--color-shadow);
}

html[data-theme="dark"] .dt-col-menu-panel .dt-col-menu-title {
    color: var(--color-text-muted);
}

html[data-theme="dark"] .dt-col-menu-panel button:hover {
    background: var(--color-surface-hover);
}

html[data-theme="dark"] .dt-col-menu-panel button:disabled {
    color: var(--color-text-disabled);
    background: transparent;
}

html[data-theme="dark"] .dt-col-menu-panel .dt-col-menu-sep {
    border-top-color: var(--color-border);
}

html[data-theme="dark"] .dropdown-header {
    color: var(--color-text-muted);
}

html[data-theme="dark"] .popover-header {
    background-color: var(--color-surface-muted);
    border-bottom-color: var(--color-border);
    color: var(--color-text);
}

html[data-theme="dark"] .popover-body {
    color: var(--color-text);
}

/* ---- Modals ---------------------------------------------------------------- */
html[data-theme="dark"] .modal-backdrop.show {
    opacity: 1;
    background-color: var(--color-backdrop);
}

html[data-theme="dark"] .modal {
    background-color: var(--color-backdrop);
}

html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .csv-modal-content {
    background-color: var(--color-surface-raised);
    border-color: var(--color-border);
    color: var(--color-text);
    box-shadow: 0 4px 15px var(--color-shadow);
}

html[data-theme="dark"] .modal-header {
    background-color: var(--color-surface-muted);
    border-bottom-color: var(--color-border);
}

html[data-theme="dark"] .modal-footer {
    border-top-color: var(--color-border);
}

html[data-theme="dark"] .modal-title {
    color: var(--color-text);
}

html[data-theme="dark"] #csvModalBody .modal-loading-overlay {
    background: var(--color-backdrop);
}

html[data-theme="dark"] #csvModalBody .modal-spinner {
    border-color: var(--color-border);
}

html[data-theme="dark"] .renderjson,
html[data-theme="dark"] .renderjson .syntax,
html[data-theme="dark"] .renderjson .object.syntax,
html[data-theme="dark"] .renderjson .array.syntax,
html[data-theme="dark"] .renderjson .key {
    background-color: transparent;
    color: var(--color-text);
}

html[data-theme="dark"] .renderjson a {
    color: var(--color-link);
}

html[data-theme="dark"] .renderjson .disclosure {
    color: var(--color-text-muted);
}

html[data-theme="dark"] .renderjson .string {
    color: var(--color-success);
}

html[data-theme="dark"] .renderjson .number {
    color: var(--color-info);
}

html[data-theme="dark"] .renderjson .boolean,
html[data-theme="dark"] .renderjson .keyword {
    color: var(--color-danger);
}

/* ---- Tables (Bootstrap + the shared table classes) ------------------------ */
html[data-theme="dark"] .table,
html[data-theme="dark"] .common-table,
html[data-theme="dark"] .csv-common-table {
    color: var(--color-text);
    background-color: var(--color-surface);
}

html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered th,
html[data-theme="dark"] .table-bordered td {
    border-color: var(--color-border);
}

html[data-theme="dark"] .table .thead-light th,
html[data-theme="dark"] .custom-thead,
html[data-theme="dark"] .csv-common-table th {
    background-color: var(--color-surface-muted);
    border-color: var(--color-border);
    color: var(--color-text);
}

html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--color-surface-muted);
}

html[data-theme="dark"] .table-hover tbody tr:hover,
html[data-theme="dark"] .csv-common-table tr:hover,
html[data-theme="dark"] tr.sc-notable-clickable:hover > td,
html[data-theme="dark"] .sc-dl-row.sc-dl-clickable:hover {
    background-color: var(--color-surface-hover);
    color: var(--color-text);
}

html[data-theme="dark"] .common-table tbody tr:hover {
    background-color: var(--color-surface-hover) !important;
}

html[data-theme="dark"] .common-table,
html[data-theme="dark"] .dt-scroll,
html[data-theme="dark"] .csv-common-table {
    box-shadow: 0 2px 4px var(--color-shadow), 0 -2px 4px var(--color-shadow);
}

html[data-theme="dark"] .datatable-as-list tr.dt-child td {
    background-color: var(--color-surface-muted);
    border-bottom-color: var(--color-border-subtle);
}

/* ---- DataTables 2.x ---------------------------------------------------------- */
html[data-theme="dark"] table.dataTable,
html[data-theme="dark"] table.dataTable > thead > tr > th,
html[data-theme="dark"] table.dataTable > thead > tr > td,
html[data-theme="dark"] table.dataTable > tbody > tr > th,
html[data-theme="dark"] table.dataTable > tbody > tr > td,
html[data-theme="dark"] table.dataTable > tfoot > tr > th,
html[data-theme="dark"] table.dataTable > tfoot > tr > td {
    border-color: var(--color-border);
    color: var(--color-text);
}

html[data-theme="dark"] table.dataTable > tbody > tr {
    background-color: var(--color-surface);
}

/* DataTables paints stripes, hover and selection with a box-shadow inset over
   --dt-row-* custom properties it reads from :root; recolour those rather
   than the cells. They must be bare "R, G, B" triplets, so they repeat token
   values as numbers: 251,251,251 is the white of --color-surface-muted /
   --color-surface-hover, 96,189,219 is --palette-blue-04 (--color-link) and
   239,239,238 is --color-text. */
html[data-theme="dark"] {
    --dt-row-stripe: 251, 251, 251;
    --dt-row-hover: 251, 251, 251;
    --dt-row-selected: 96, 189, 219;
    --dt-row-selected-text: 239, 239, 238;
    --dt-row-selected-link: 239, 239, 238;
    --dt-column-ordering: 251, 251, 251;
    --dt-html-background: var(--color-bg);
}

html[data-theme="dark"] div.dt-container .dt-paging .dt-paging-button,
html[data-theme="dark"] div.dt-container .dt-info,
html[data-theme="dark"] div.dt-container .dt-length,
html[data-theme="dark"] div.dt-container .dt-search,
html[data-theme="dark"] div.dt-container .dt-processing {
    color: var(--color-text) !important;
}

html[data-theme="dark"] div.dt-container .dt-paging .dt-paging-button:hover {
    background: var(--color-surface-hover) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

html[data-theme="dark"] div.dt-container .dt-paging .dt-paging-button.current,
html[data-theme="dark"] div.dt-container .dt-paging .dt-paging-button.current:hover {
    background: var(--color-surface-overlay) !important;
    border-color: var(--color-border-strong) !important;
    color: var(--color-text) !important;
}

/* Disabled paging arrows still read (muted, not the 2.3:1 disabled ink);
   the enabled ones are full text colour, so the difference stays visible. */
html[data-theme="dark"] div.dt-container .dt-paging .dt-paging-button.disabled,
html[data-theme="dark"] div.dt-container .dt-paging .dt-paging-button.disabled:hover {
    color: var(--color-text-muted) !important;
    opacity: 0.75;
}

/* Column filter buttons. ColumnControl's CDN sheet paints them translucent
   black and DataTables.ts makes the icon inherit; an active filter is amber,
   a fixed colour because a brand accent can be black (SOTP). */
html[data-theme="dark"] button.dtcc-button.dtcc-button_dropdown {
    color: var(--color-text-muted) !important;
}

html[data-theme="dark"] button.dtcc-button.dtcc-button_dropdown:hover {
    color: var(--color-text) !important;
}

html[data-theme="dark"] button.dtcc-button.dtcc-button_dropdown.dtcc-button_active {
    color: var(--color-warning) !important;
}

html[data-theme="dark"] div.dt-container .dt-processing > div:last-child > div {
    background: var(--color-text-muted);
}

html[data-theme="dark"] .dtcc-dropdown,
html[data-theme="dark"] div.dtcc-dropdown {
    background-color: var(--color-surface-overlay);
    border-color: var(--color-border);
    color: var(--color-text);
    box-shadow: 0 4px 12px var(--color-shadow);
}

/* A column filter's value list: its items are <button>s, which do not
   inherit colour, so they kept the browser's black on the dark dropdown on
   every table (the Missing Patches Node filter was reported). */
html[data-theme="dark"] .dtcc-dropdown button,
html[data-theme="dark"] .dtcc-dropdown .dtcc-list-buttons .dtcc-button {
    color: var(--color-text);
}

html[data-theme="dark"] .dtcc-button:hover,
html[data-theme="dark"] .dtcc-button.dtcc-button_active {
    background-color: var(--color-surface-hover);
    color: var(--color-text);
}

/* ---- Navs, pagination, badges, progress --------------------------------- */
html[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--color-border);
}

html[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--color-text-secondary);
}

html[data-theme="dark"] .nav-tabs .nav-link:hover,
html[data-theme="dark"] .nav-tabs .nav-link:focus {
    border-color: var(--color-border) var(--color-border) var(--color-border);
    color: var(--color-text);
}

html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-tabs .nav-item.show .nav-link {
    background-color: var(--color-surface);
    border-color: var(--color-border) var(--color-border) var(--color-surface);
    color: var(--color-text);
}

html[data-theme="dark"] .page-link {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-link);
}

html[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-disabled);
}

html[data-theme="dark"] .badge-light,
html[data-theme="dark"] .badge-secondary {
    background-color: var(--color-surface-hover);
    color: var(--color-text);
}

html[data-theme="dark"] .progress {
    background-color: var(--color-surface-muted);
}

/* ---- Alerts and message bars ------------------------------------------------ */
html[data-theme="dark"] .alert-success,
html[data-theme="dark"] table.dataTable tbody tr.alert-success,
html[data-theme="dark"] .message-bar--success {
    background-color: var(--color-success-bg);
    border-color: var(--color-success-bg);
    color: var(--color-success);
}

html[data-theme="dark"] .alert-danger,
html[data-theme="dark"] table.dataTable tbody tr.alert-danger,
html[data-theme="dark"] .message-bar--error {
    background-color: var(--color-danger-bg);
    border-color: var(--color-danger-bg);
    color: var(--color-danger);
}

html[data-theme="dark"] .alert-warning {
    background-color: var(--color-warning-bg);
    border-color: var(--color-warning-bg);
    color: var(--color-warning);
}

html[data-theme="dark"] .alert-info,
html[data-theme="dark"] .alert-primary,
html[data-theme="dark"] .message-bar--info {
    background-color: var(--color-info-bg);
    border-color: var(--color-info-bg);
    color: var(--color-info);
}

html[data-theme="dark"] .alert-secondary,
html[data-theme="dark"] .alert-light,
html[data-theme="dark"] .message-bar {
    background-color: var(--color-surface-muted);
    border-color: var(--color-border);
    color: var(--color-text);
}

html[data-theme="dark"] .alert .alert-link {
    color: inherit;
}

/* ---- App-shell odds and ends -------------------------------------------- */
html[data-theme="dark"] .custom-tooltip code {
    color: var(--color-success);
}

html[data-theme="dark"] .tree-node-name-link {
    color: var(--color-link);
}

html[data-theme="dark"] .custom-icon-constellation {
    background-color: var(--color-text);
}

html[data-theme="dark"] .fa-linux {
    color: var(--color-text);
}

html[data-theme="dark"] .cve-th-info,
html[data-theme="dark"] .sc-heat-axis .sc-heat-ticks,
html[data-theme="dark"] .sc-heat-day,
html[data-theme="dark"] .vs-filter-clear {
    color: var(--color-text-muted);
}

html[data-theme="dark"] .cve-th-info:hover {
    color: var(--color-text-secondary);
}

html[data-theme="dark"] .sc-heat-cell {
    border-color: var(--color-border-subtle);
}

html[data-theme="dark"] .vs-chip,
html[data-theme="dark"] .vs-filter-chip {
    background: var(--color-surface-muted);
    border-color: var(--color-border);
    color: var(--color-text);
}

html[data-theme="dark"] .vs-filter-chip:hover {
    background: var(--color-surface-hover);
}

html[data-theme="dark"] .vs-chip-own {
    background: var(--palette-gold-09);
    border-color: var(--palette-gold-07);
    color: var(--palette-gold-02);
}

html[data-theme="dark"] .vs-filter {
    color: var(--color-text-secondary);
}

html[data-theme="dark"] .vs-filter-chip.on {
    background: var(--color-text);
    border-color: var(--color-text);
    color: var(--color-text-inverse);
}

html[data-theme="dark"] .framed-signin__message {
    color: var(--color-text-secondary);
}

html[data-theme="dark"] .console-embed {
    background-color: var(--color-bg);
}

/* ── Text on fills DarkRemap keeps (DASH-1791) ──────────────────────────
   DarkRemap keeps a saturated fill's hue, and the light text set on it
   then fails in dark. Inline styles carry these fills, hence !important. */

/* A "reported" CVE pill's white text on amber (2.15:1): ink instead. */
html[data-theme="dark"] [data-cve="reported"] {
    color: var(--color-text-inverse) !important;
}

/* Nodes tag pills: a neutral chip in the dark surface ladder. */
html[data-theme="dark"] .nt-tag-pill {
    color: var(--color-text) !important;
    background: var(--color-surface-overlay) !important;
}

/* Nodes role pills. */
html[data-theme="dark"] .nt-role-pill {
    color: var(--color-text);
    background: var(--color-surface-overlay);
    border-color: var(--color-border-strong);
}

/* Risk rating chips (Executables, Services): the inline fill is the rating
   colour at 60%, so the row shows through it. White on the gold fell to
   3.94:1 over a striped row under hover; a 15% black overlay on the fill
   keeps every rating at 5.18:1 or more, at rest, striped and hovered. */
html[data-theme="dark"] .risk-rating-chip {
    color: #fff !important;
    background-image: linear-gradient(rgba(0, 0, 0, .15), rgba(0, 0, 0, .15));
}

/* AD Domain Controllers severity pills: white on the high (#c97a2a) and
   info (#d7b44c) fills; ink instead. */
html[data-theme="dark"] .dcp-sev-pill[data-sev="high"],
html[data-theme="dark"] .dcp-sev-pill[data-sev="info"] {
    color: var(--color-text-inverse);
}

/* Bootstrap's text utilities come from the CDN sheet, which DarkRemap cannot
   read: #dc3545 is 2.83:1 on the dark card. Bootstrap marks them !important. */
html[data-theme="dark"] .text-danger { color: var(--color-danger) !important; }
html[data-theme="dark"] .text-success { color: var(--color-success) !important; }
html[data-theme="dark"] .text-warning { color: var(--color-warning) !important; }
html[data-theme="dark"] .text-info { color: var(--color-info) !important; }
html[data-theme="dark"] .text-primary { color: var(--color-link) !important; }

/* Network graph hint: a translucent white panel DarkRemap leaves light, with
   muted text lightened on top of it (1.29:1). The dark surface instead. */
html[data-theme="dark"] .netgraph-hint {
    background: rgba(50, 50, 50, 0.85) !important;
    color: var(--color-text-secondary) !important;
}

/* Network Profiler pills: DarkRemap lifts the text to 4.5:1 on its reference
   surface, but some category tints sit lighter (4.31:1). A dark veil over the
   tint keeps its hue and restores the margin. !important: the pills set an
   inline background shorthand, which resets background-image. */
html[data-theme="dark"] .np-pill {
    background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)) !important;
}

/* V4 config badge: a lighter indigo that still stands out on the dark
   surfaces, with white text at 4.9:1. Hand-written so DarkRemap's derived
   copy of the light rule does not apply. */
html[data-theme="dark"] .cfg-v4-badge {
    color: #fff;
    background: #5c6bc0;
}