/*
 * Mapet dark theme.
 *
 * Loaded last in <head> (app/views/layouts/_head.php) when the user's theme may resolve to dark; every rule is
 * scoped to html[data-theme="dark"], which /assets/js/theme.js sets before the first paint.
 *
 * Two strengths of override:
 *  - :where(html[data-theme="dark"]) X — X keeps the specificity it has in bootstrap.css / app.css / the
 *    plugin and per-page stylesheets, and wins because this file comes after them. Contextual rules that were
 *    stronger than X (.bg-dark .nav > li > a, .bg-info a, .panel-primary > .panel-heading …) keep winning, so
 *    coloured areas look exactly as before.
 *  - html[data-theme="dark"] X (+0,1,1) for rules declared after this file: <style> blocks inside views.
 * Inline style="" attributes and !important rules can only be beaten with !important.
 *
 * Brand and status colours (primary, info, success, warning, danger) are deliberately unchanged.
 */

html[data-theme="dark"] {
    color-scheme: dark;

    --dm-bg: #1b1e27;
    --dm-surface: #232733;
    --dm-surface-alt: #2a2f3d;
    --dm-surface-hover: #323848;
    --dm-input: #1e222b;
    --dm-border: #363c4c;
    --dm-border-strong: #465066;
    --dm-text: #c3cad5;
    --dm-text-strong: #e8ecf2;
    --dm-text-muted: #98a6ad;
    --dm-text-faint: #6f7889;
    --dm-link: #d6dde8;

    --dm-success-bg: rgba(39, 194, 76, 0.15);
    --dm-success-border: rgba(39, 194, 76, 0.38);
    --dm-success-text: #86dd9e;
    --dm-info-bg: rgba(35, 183, 229, 0.15);
    --dm-info-border: rgba(35, 183, 229, 0.38);
    --dm-info-text: #8ad6f0;
    --dm-warning-bg: rgba(250, 215, 51, 0.13);
    --dm-warning-border: rgba(250, 215, 51, 0.38);
    --dm-warning-text: #f2d675;
    --dm-danger-bg: rgba(240, 80, 80, 0.17);
    --dm-danger-border: rgba(240, 80, 80, 0.42);
    --dm-danger-text: #f59a9a;

    /* :where(html…) alone has no specificity and would lose to the html {} rule of app.css */
    background-color: var(--dm-bg);
}

/* ------------------------------------------------------------------ base */

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

:where(html[data-theme="dark"]) .app:before {
    background-color: var(--dm-bg);
}

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

:where(html[data-theme="dark"]) a:hover,
:where(html[data-theme="dark"]) a:focus {
    color: #fff;
}

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

:where(html[data-theme="dark"]) legend {
    color: var(--dm-text-strong);
    border-bottom-color: var(--dm-border);
}

:where(html[data-theme="dark"]) caption,
:where(html[data-theme="dark"]) blockquote footer,
:where(html[data-theme="dark"]) blockquote small,
:where(html[data-theme="dark"]) blockquote .small {
    color: var(--dm-text-muted);
}

:where(html[data-theme="dark"]) blockquote {
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) code {
    color: #f08aa6;
    background-color: rgba(199, 37, 78, 0.18);
}

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

:where(html[data-theme="dark"]) .well,
:where(html[data-theme="dark"]) pre {
    background-color: var(--dm-surface-alt);
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) mark,
:where(html[data-theme="dark"]) .mark {
    color: var(--dm-text-strong);
    background-color: rgba(250, 215, 51, 0.32);
}

:where(html[data-theme="dark"]) .help-block {
    color: var(--dm-text-muted);
}

:where(html[data-theme="dark"]) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) :is(small, .small) {
    color: var(--dm-text-muted);
}

/* ------------------------------------------------------------------ Angulr surfaces and utilities */

:where(html[data-theme="dark"]) .bg-light {
    color: var(--dm-text);
    background-color: var(--dm-surface-alt);
}

:where(html[data-theme="dark"]) .bg-light.lt,
:where(html[data-theme="dark"]) .bg-light .lt,
:where(html[data-theme="dark"]) .bg-light.bg,
:where(html[data-theme="dark"]) .bg-light .bg {
    background-color: var(--dm-surface-alt);
}

:where(html[data-theme="dark"]) .bg-light.lter,
:where(html[data-theme="dark"]) .bg-light .lter {
    background-color: var(--dm-surface);
}

:where(html[data-theme="dark"]) .bg-light.dk,
:where(html[data-theme="dark"]) .bg-light .dk {
    background-color: var(--dm-surface-hover);
}

:where(html[data-theme="dark"]) .bg-light.dker,
:where(html[data-theme="dark"]) .bg-light .dker {
    background-color: #383f51;
}

:where(html[data-theme="dark"]) a.bg-light:hover {
    color: #fff;
}

:where(html[data-theme="dark"]) .bg-white {
    color: var(--dm-text);
    background-color: var(--dm-surface);
}

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

:where(html[data-theme="dark"]) .bg-white a:hover {
    color: #fff;
}

:where(html[data-theme="dark"]) .bg-white .lt,
:where(html[data-theme="dark"]) .bg-white .lter,
:where(html[data-theme="dark"]) .bg-white .dk,
:where(html[data-theme="dark"]) .bg-white .dker,
:where(html[data-theme="dark"]) .bg-white-only {
    background-color: var(--dm-surface);
}

:where(html[data-theme="dark"]) .bg-white-opacity {
    background-color: rgba(35, 39, 51, 0.6);
}

:where(html[data-theme="dark"]) .bg-gd {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.15) 100%);
}

:where(html[data-theme="dark"]) .b {
    border-color: rgba(255, 255, 255, 0.06);
}

:where(html[data-theme="dark"]) .b-a,
:where(html[data-theme="dark"]) .b-t,
:where(html[data-theme="dark"]) .b-r,
:where(html[data-theme="dark"]) .b-b,
:where(html[data-theme="dark"]) .b-l,
:where(html[data-theme="dark"]) .b-light,
:where(html[data-theme="dark"]) .b-l-light {
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .b-dark,
:where(html[data-theme="dark"]) .b-black {
    border-color: var(--dm-border-strong);
}

:where(html[data-theme="dark"]) .b-white,
:where(html[data-theme="dark"]) .b-l-white {
    border-color: var(--dm-surface);
}

:where(html[data-theme="dark"]) .app-footer {
    color: var(--dm-text-muted);
}

:where(html[data-theme="dark"]) .streamline .sl-item:after,
:where(html[data-theme="dark"]) .streamline:after {
    background-color: var(--dm-surface);
}

:where(html[data-theme="dark"]) .streamline,
:where(html[data-theme="dark"]) .sl-item {
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .tab-container .tab-content {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .tab-enabled {
    background-color: var(--dm-success-bg);
    border-color: var(--dm-success-border) !important;
}

/* ------------------------------------------------------------------ panels */

:where(html[data-theme="dark"]) .panel {
    background-color: var(--dm-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

:where(html[data-theme="dark"]) .panel-default,
:where(html[data-theme="dark"]) .panel-default > .panel-heading,
:where(html[data-theme="dark"]) .panel-default > .panel-footer,
:where(html[data-theme="dark"]) .panel .list-group-item,
:where(html[data-theme="dark"]) .panel-footer {
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .panel-default > .panel-heading {
    color: var(--dm-text-strong);
}

:where(html[data-theme="dark"]) .panel-default .panel-heading,
:where(html[data-theme="dark"]) .panel-footer {
    background-color: var(--dm-surface-alt);
}

:where(html[data-theme="dark"]) .panel-default > .panel-heading + .panel-collapse > .panel-body,
:where(html[data-theme="dark"]) .panel-default > .panel-footer + .panel-collapse > .panel-body,
:where(html[data-theme="dark"]) .panel-group .panel-heading + .panel-collapse .panel-body,
:where(html[data-theme="dark"]) .panel > .panel-body + .table,
:where(html[data-theme="dark"]) .panel > .panel-body + .table-responsive,
:where(html[data-theme="dark"]) .panel > .table-bordered,
:where(html[data-theme="dark"]) .panel > .table-responsive > .table-bordered {
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .panel-success > .panel-heading {
    color: var(--dm-success-text);
    background-color: var(--dm-success-bg);
    border-color: var(--dm-success-border);
}

:where(html[data-theme="dark"]) .panel-info > .panel-heading {
    color: var(--dm-info-text);
    background-color: var(--dm-info-bg);
    border-color: var(--dm-info-border);
}

:where(html[data-theme="dark"]) .panel-warning > .panel-heading {
    color: var(--dm-warning-text);
    background-color: var(--dm-warning-bg);
    border-color: var(--dm-warning-border);
}

:where(html[data-theme="dark"]) .panel-danger > .panel-heading {
    color: var(--dm-danger-text);
    background-color: var(--dm-danger-bg);
    border-color: var(--dm-danger-border);
}

:where(html[data-theme="dark"]) .panel-success {
    border-color: var(--dm-success-border);
}

:where(html[data-theme="dark"]) .panel-info {
    border-color: var(--dm-info-border);
}

:where(html[data-theme="dark"]) .panel-warning {
    border-color: var(--dm-warning-border);
}

:where(html[data-theme="dark"]) .panel-danger {
    border-color: var(--dm-danger-border);
}

/* ------------------------------------------------------------------ tables */

:where(html[data-theme="dark"]) .table > thead > tr > th,
:where(html[data-theme="dark"]) .table > tbody > tr > th,
:where(html[data-theme="dark"]) .table > tfoot > tr > th,
:where(html[data-theme="dark"]) .table > thead > tr > td,
:where(html[data-theme="dark"]) .table > tbody > tr > td,
:where(html[data-theme="dark"]) .table > tfoot > tr > td,
:where(html[data-theme="dark"]) .table > tbody + tbody,
:where(html[data-theme="dark"]) .table-bordered,
:where(html[data-theme="dark"]) .table-bordered > thead > tr > th,
:where(html[data-theme="dark"]) .table-bordered > tbody > tr > th,
:where(html[data-theme="dark"]) .table-bordered > tfoot > tr > th,
:where(html[data-theme="dark"]) .table-bordered > thead > tr > td,
:where(html[data-theme="dark"]) .table-bordered > tbody > tr > td,
:where(html[data-theme="dark"]) .table-bordered > tfoot > tr > td,
:where(html[data-theme="dark"]) .table-striped > thead > th,
:where(html[data-theme="dark"]) .table-responsive {
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .table .table {
    background-color: transparent;
}

:where(html[data-theme="dark"]) .table-striped > tbody > tr:nth-child(odd) > td,
:where(html[data-theme="dark"]) .table-striped > tbody > tr:nth-child(odd) > th,
:where(html[data-theme="dark"]) .table-striped > thead > th,
:where(html[data-theme="dark"]) .table-striped-every-two-rows > tbody > tr:nth-child(4n+1),
:where(html[data-theme="dark"]) .table-striped-every-two-rows > tbody > tr:nth-child(4n+2) > td,
:where(html[data-theme="dark"]) .table-striped-every-two-rows > tbody > tr:nth-child(4n+2) > th {
    background-color: rgba(255, 255, 255, 0.025);
}

:where(html[data-theme="dark"]) .table-hover > tbody > tr:hover > td,
:where(html[data-theme="dark"]) .table-hover > tbody > tr:hover > th {
    background-color: rgba(255, 255, 255, 0.05);
}

:where(html[data-theme="dark"]) .table-scrollable-horizontal tbody tr th,
:where(html[data-theme="dark"]) .table-scrollable-horizontal thead tr th:first-child,
:where(html[data-theme="dark"]) .table-sticky-header > thead > tr > th {
    background-color: var(--dm-surface);
}

:where(html[data-theme="dark"]) .table > :is(thead, tbody, tfoot) > tr > :is(td, th).active,
:where(html[data-theme="dark"]) .table > :is(thead, tbody, tfoot) > tr.active > :is(td, th) {
    background-color: var(--dm-surface-hover);
}

:where(html[data-theme="dark"]) .table > :is(thead, tbody, tfoot) > tr > :is(td, th).success,
:where(html[data-theme="dark"]) .table > :is(thead, tbody, tfoot) > tr.success > :is(td, th) {
    background-color: var(--dm-success-bg);
}

:where(html[data-theme="dark"]) .table > :is(thead, tbody, tfoot) > tr > :is(td, th).info,
:where(html[data-theme="dark"]) .table > :is(thead, tbody, tfoot) > tr.info > :is(td, th) {
    background-color: var(--dm-info-bg);
}

:where(html[data-theme="dark"]) .table > :is(thead, tbody, tfoot) > tr > :is(td, th).warning,
:where(html[data-theme="dark"]) .table > :is(thead, tbody, tfoot) > tr.warning > :is(td, th) {
    background-color: var(--dm-warning-bg);
}

:where(html[data-theme="dark"]) .table > :is(thead, tbody, tfoot) > tr > :is(td, th).danger,
:where(html[data-theme="dark"]) .table > :is(thead, tbody, tfoot) > tr.danger > :is(td, th) {
    background-color: var(--dm-danger-bg);
}

:where(html[data-theme="dark"]) .table-hover > tbody > tr > :is(td, th).active:hover,
:where(html[data-theme="dark"]) .table-hover > tbody > tr.active:hover > :is(td, th),
:where(html[data-theme="dark"]) .table-hover > tbody > tr:hover > .active {
    background-color: #3a4152;
}

:where(html[data-theme="dark"]) .table-hover > tbody > tr > :is(td, th).success:hover,
:where(html[data-theme="dark"]) .table-hover > tbody > tr.success:hover > :is(td, th),
:where(html[data-theme="dark"]) .table-hover > tbody > tr:hover > .success {
    background-color: rgba(39, 194, 76, 0.24);
}

:where(html[data-theme="dark"]) .table-hover > tbody > tr > :is(td, th).info:hover,
:where(html[data-theme="dark"]) .table-hover > tbody > tr.info:hover > :is(td, th),
:where(html[data-theme="dark"]) .table-hover > tbody > tr:hover > .info {
    background-color: rgba(35, 183, 229, 0.24);
}

:where(html[data-theme="dark"]) .table-hover > tbody > tr > :is(td, th).warning:hover,
:where(html[data-theme="dark"]) .table-hover > tbody > tr.warning:hover > :is(td, th),
:where(html[data-theme="dark"]) .table-hover > tbody > tr:hover > .warning {
    background-color: rgba(250, 215, 51, 0.2);
}

:where(html[data-theme="dark"]) .table-hover > tbody > tr > :is(td, th).danger:hover,
:where(html[data-theme="dark"]) .table-hover > tbody > tr.danger:hover > :is(td, th),
:where(html[data-theme="dark"]) .table-hover > tbody > tr:hover > .danger {
    background-color: rgba(240, 80, 80, 0.26);
}

/* Shared sticky-column table component and row states (app.css custom section) */

:where(html[data-theme="dark"]) .table-container td,
:where(html[data-theme="dark"]) .table-container th {
    background-color: var(--dm-surface);
}

:where(html[data-theme="dark"]) .table-container tr:hover td,
:where(html[data-theme="dark"]) table.products[data-validator-code] tr:hover {
    background-color: var(--dm-surface-hover);
}

:where(html[data-theme="dark"]) .table-container tfoot th,
:where(html[data-theme="dark"]) .table-container tr > :first-child {
    box-shadow: inset -1px 0 0 var(--dm-border);
}

:where(html[data-theme="dark"]) tr.deactive td,
:where(html[data-theme="dark"]) tr.deactive td * {
    color: var(--dm-text-faint) !important;
}

:where(html[data-theme="dark"]) .deactive .bg-success,
:where(html[data-theme="dark"]) .deactive .bg-danger,
:where(html[data-theme="dark"]) .deactive .bg-warning {
    background-color: var(--dm-surface-hover) !important;
}

:where(html[data-theme="dark"]) tr.banned td {
    color: #c99a97 !important;
    background-color: rgba(240, 80, 80, 0.12) !important;
}

:where(html[data-theme="dark"]) tr.banned td * {
    color: #c99a97 !important;
}

:where(html[data-theme="dark"]) tr.blocked {
    background-color: var(--dm-surface-hover);
}

:where(html[data-theme="dark"]) .dashboard-autopublication-table .shops-sub-table tr td {
    background-color: var(--dm-surface) !important;
}

/* ------------------------------------------------------------------ forms */

:where(html[data-theme="dark"]) .form-control {
    color: var(--dm-text-strong);
    background-color: var(--dm-input);
    border-color: var(--dm-border-strong);
}

:where(html[data-theme="dark"]) .form-control::placeholder {
    color: var(--dm-text-faint);
}

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

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

/* Drop-down lists only: a background on the options of a list box (multiple / size) hides which ones are selected */
:where(html[data-theme="dark"]) select:not([multiple]):not([size]) option,
:where(html[data-theme="dark"]) select:not([multiple]):not([size]) optgroup {
    color: var(--dm-text-strong);
    background-color: var(--dm-input);
}

/* Selected rows of a list box (proxies, shops, projects …). Chrome forces its own selection colour onto
 * background-color while the list has focus, but paints a background image above it, so the row looks the same
 * focused or not */
:where(html[data-theme="dark"]) select[multiple] option:checked,
:where(html[data-theme="dark"]) select[size]:not([size="1"]) option:checked {
    color: #fff;
    background: #2a7e98 linear-gradient(#2a7e98, #2a7e98);
}

:where(html[data-theme="dark"]) input:-webkit-autofill,
:where(html[data-theme="dark"]) input:-webkit-autofill:hover,
:where(html[data-theme="dark"]) input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--dm-text-strong);
    box-shadow: 0 0 0 1000px var(--dm-input) inset;
}

:where(html[data-theme="dark"]) .has-success .help-block,
:where(html[data-theme="dark"]) .has-success .control-label,
:where(html[data-theme="dark"]) .has-success .radio,
:where(html[data-theme="dark"]) .has-success .checkbox {
    color: var(--dm-success-text);
}

:where(html[data-theme="dark"]) .has-warning .help-block,
:where(html[data-theme="dark"]) .has-warning .control-label,
:where(html[data-theme="dark"]) .has-warning .radio,
:where(html[data-theme="dark"]) .has-warning .checkbox {
    color: var(--dm-warning-text);
}

:where(html[data-theme="dark"]) .has-error .help-block,
:where(html[data-theme="dark"]) .has-error .control-label,
:where(html[data-theme="dark"]) .has-error .radio,
:where(html[data-theme="dark"]) .has-error .checkbox {
    color: var(--dm-danger-text);
}

:where(html[data-theme="dark"]) .has-success .input-group-addon {
    color: var(--dm-success-text);
    background-color: var(--dm-success-bg);
}

:where(html[data-theme="dark"]) .has-warning .input-group-addon {
    color: var(--dm-warning-text);
    background-color: var(--dm-warning-bg);
}

:where(html[data-theme="dark"]) .has-error .input-group-addon {
    color: var(--dm-danger-text);
    background-color: var(--dm-danger-bg);
}

/* jquery.form-validator messages */
:where(html[data-theme="dark"]) .form-error {
    color: var(--dm-danger-text);
}

/* Angulr checkboxes (.i-checks) and switches (.i-switch): a dark field and the toned-down info colour
 * instead of a white square and a saturated fill; native checkboxes and radios get the same accent */
:where(html[data-theme="dark"]) input[type="checkbox"],
:where(html[data-theme="dark"]) input[type="radio"] {
    accent-color: #2e89a6;
}

:where(html[data-theme="dark"]) .i-checks > i {
    background-color: var(--dm-input);
    border-color: var(--dm-border-strong);
}

:where(html[data-theme="dark"]) .i-checks input:checked + i {
    border-color: #2e89a6;
}

:where(html[data-theme="dark"]) .i-checks input:checked + i:before {
    background-color: #2e89a6;
}

:where(html[data-theme="dark"]) .i-checks input[disabled] + i,
:where(html[data-theme="dark"]) fieldset[disabled] .i-checks input + i {
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .i-checks input[disabled] + i:before,
:where(html[data-theme="dark"]) fieldset[disabled] .i-checks input + i:before {
    background-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .i-switch {
    background-color: #2a7e98;
}

:where(html[data-theme="dark"]) .i-switch i:before {
    background-color: var(--dm-surface-hover);
    border-color: var(--dm-border-strong);
}

:where(html[data-theme="dark"]) .i-switch i:after {
    background-color: var(--dm-text);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

:where(html[data-theme="dark"]) .i-switch input:disabled + i:before {
    background-color: var(--dm-surface-alt);
}

:where(html[data-theme="dark"]) .i-switch input:disabled + i:after {
    background-color: var(--dm-text-faint);
}

:where(html[data-theme="dark"]) .i-switch.parent,
:where(html[data-theme="dark"]) .parent .i-switch {
    background-color: #4a5368;
}

:where(html[data-theme="dark"]) .i-switch.parent i:after,
:where(html[data-theme="dark"]) .parent .i-switch i:after {
    background-color: var(--dm-text-muted);
}

/* ------------------------------------------------------------------ buttons */

:where(html[data-theme="dark"]) .btn-default {
    color: var(--dm-text) !important;
    background-color: var(--dm-surface-alt);
    border-color: var(--dm-border-strong);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

:where(html[data-theme="dark"]) .btn-default:hover,
:where(html[data-theme="dark"]) .btn-default:focus,
:where(html[data-theme="dark"]) .btn-default:active,
:where(html[data-theme="dark"]) .btn-default.active,
:where(html[data-theme="dark"]) .open .dropdown-toggle.btn-default {
    color: var(--dm-text-strong) !important;
    background-color: var(--dm-surface-hover);
    border-color: #56607a;
}

:where(html[data-theme="dark"]) .btn-default.active {
    color: #fff !important;
    background-color: #3a4152;
    border-color: #66728a;
}

/* Pressed state of toggle groups: the template's faint inset shadow does not show on a dark page */
:where(html[data-theme="dark"]) .btn:active,
:where(html[data-theme="dark"]) .btn.active {
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.45);
}

:where(html[data-theme="dark"]) .btn-default.disabled,
:where(html[data-theme="dark"]) .btn-default[disabled],
:where(html[data-theme="dark"]) fieldset[disabled] .btn-default,
:where(html[data-theme="dark"]) .btn-default.disabled:is(:hover, :focus, :active, .active),
:where(html[data-theme="dark"]) .btn-default[disabled]:is(:hover, :focus, :active, .active),
:where(html[data-theme="dark"]) fieldset[disabled] .btn-default:is(:hover, :focus, :active, .active) {
    background-color: var(--dm-surface-alt);
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .btn-default .badge {
    color: var(--dm-surface-alt);
    background-color: var(--dm-text);
}

/* Coloured buttons: the template colours are toned down (less saturated, darker) for a dark page;
 * every base keeps white text at 4.5:1 or more, hover at 4:1 or more */

:where(html[data-theme="dark"]) .btn-primary {
    background-color: #5f5696;
    border-color: #5f5696;
}

:where(html[data-theme="dark"]) .btn-primary:is(:hover, :focus, :active, .active),
:where(html[data-theme="dark"]) .open .dropdown-toggle.btn-primary {
    background-color: #6e64a7;
    border-color: #6e64a7;
}

:where(html[data-theme="dark"]) .btn-primary:is(.disabled, [disabled]),
:where(html[data-theme="dark"]) .btn-primary:is(.disabled, [disabled]):is(:hover, :focus, :active, .active),
:where(html[data-theme="dark"]) fieldset[disabled] .btn-primary,
:where(html[data-theme="dark"]) fieldset[disabled] .btn-primary:is(:hover, :focus, :active, .active) {
    background-color: #5f5696;
    border-color: #5f5696;
}

:where(html[data-theme="dark"]) .btn-info {
    background-color: #2a7e98;
    border-color: #2a7e98;
}

:where(html[data-theme="dark"]) .btn-info:is(:hover, :focus, :active, .active),
:where(html[data-theme="dark"]) .open .dropdown-toggle.btn-info {
    background-color: #2e89a6;
    border-color: #2e89a6;
}

:where(html[data-theme="dark"]) .btn-info:is(.disabled, [disabled]),
:where(html[data-theme="dark"]) .btn-info:is(.disabled, [disabled]):is(:hover, :focus, :active, .active),
:where(html[data-theme="dark"]) fieldset[disabled] .btn-info,
:where(html[data-theme="dark"]) fieldset[disabled] .btn-info:is(:hover, :focus, :active, .active) {
    background-color: #2a7e98;
    border-color: #2a7e98;
}

:where(html[data-theme="dark"]) .btn-success {
    background-color: #2e8443;
    border-color: #2e8443;
}

:where(html[data-theme="dark"]) .btn-success:is(:hover, :focus, :active, .active),
:where(html[data-theme="dark"]) .open .dropdown-toggle.btn-success {
    background-color: #328f49;
    border-color: #328f49;
}

:where(html[data-theme="dark"]) .btn-success:is(.disabled, [disabled]),
:where(html[data-theme="dark"]) .btn-success:is(.disabled, [disabled]):is(:hover, :focus, :active, .active),
:where(html[data-theme="dark"]) fieldset[disabled] .btn-success,
:where(html[data-theme="dark"]) fieldset[disabled] .btn-success:is(:hover, :focus, :active, .active) {
    background-color: #2e8443;
    border-color: #2e8443;
}

:where(html[data-theme="dark"]) .btn-warning {
    background-color: #877419;
    border-color: #877419;
}

:where(html[data-theme="dark"]) .btn-warning:is(:hover, :focus, :active, .active),
:where(html[data-theme="dark"]) .open .dropdown-toggle.btn-warning {
    background-color: #927d1b;
    border-color: #927d1b;
}

:where(html[data-theme="dark"]) .btn-warning:is(.disabled, [disabled]),
:where(html[data-theme="dark"]) .btn-warning:is(.disabled, [disabled]):is(:hover, :focus, :active, .active),
:where(html[data-theme="dark"]) fieldset[disabled] .btn-warning,
:where(html[data-theme="dark"]) fieldset[disabled] .btn-warning:is(:hover, :focus, :active, .active) {
    background-color: #877419;
    border-color: #877419;
}

:where(html[data-theme="dark"]) .btn-danger {
    background-color: #b54545;
    border-color: #b54545;
}

:where(html[data-theme="dark"]) .btn-danger:is(:hover, :focus, :active, .active),
:where(html[data-theme="dark"]) .open .dropdown-toggle.btn-danger {
    background-color: #c04d4d;
    border-color: #c04d4d;
}

:where(html[data-theme="dark"]) .btn-danger:is(.disabled, [disabled]),
:where(html[data-theme="dark"]) .btn-danger:is(.disabled, [disabled]):is(:hover, :focus, :active, .active),
:where(html[data-theme="dark"]) fieldset[disabled] .btn-danger,
:where(html[data-theme="dark"]) fieldset[disabled] .btn-danger:is(:hover, :focus, :active, .active) {
    background-color: #b54545;
    border-color: #b54545;
}

/* Active states and progress fills, in the same toned-down palette as the buttons */
:where(html[data-theme="dark"]) .nav-pills > li.active > a,
:where(html[data-theme="dark"]) .nav-pills > li.active > a:hover,
:where(html[data-theme="dark"]) .nav-pills > li.active > a:focus {
    background-color: #2a7e98;
}

:where(html[data-theme="dark"]) .pagination > .active > a,
:where(html[data-theme="dark"]) .pagination > .active > span,
:where(html[data-theme="dark"]) .pagination > .active > a:hover,
:where(html[data-theme="dark"]) .pagination > .active > span:hover,
:where(html[data-theme="dark"]) .pagination > .active > a:focus,
:where(html[data-theme="dark"]) .pagination > .active > span:focus {
    background-color: #2a7e98;
    border-color: #2a7e98;
}

:where(html[data-theme="dark"]) .list-group-item.active {
    background-color: #2a7e98 !important;
    border-color: #2a7e98 !important;
}

:where(html[data-theme="dark"]) .panel-primary,
:where(html[data-theme="dark"]) .panel-primary > .panel-heading {
    border-color: #36699a;
}

:where(html[data-theme="dark"]) .panel-primary > .panel-heading {
    background-color: #36699a;
}

:where(html[data-theme="dark"]) .progress-bar {
    background-color: #36699a;
}

:where(html[data-theme="dark"]) .progress-bar-primary {
    background-color: #5f5696;
}

:where(html[data-theme="dark"]) .progress-bar-info {
    background-color: #2a7e98;
}

:where(html[data-theme="dark"]) .progress-bar-success {
    background-color: #2e8443;
}

:where(html[data-theme="dark"]) .progress-bar-warning {
    background-color: #877419;
}

:where(html[data-theme="dark"]) .progress-bar-danger {
    background-color: #b54545;
}

:where(html[data-theme="dark"]) .ui-state-active,
:where(html[data-theme="dark"]) .ui-widget-content .ui-state-active,
:where(html[data-theme="dark"]) .ui-widget-header .ui-state-active {
    background: #2a7e98;
}

:where(html[data-theme="dark"]) .chosen-container .chosen-results li.highlighted {
    background-color: #2a7e98;
    background-image: none;
}

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

:where(html[data-theme="dark"]) .btn-link:hover,
:where(html[data-theme="dark"]) .btn-link:focus {
    color: #fff;
}

:where(html[data-theme="dark"]) .close {
    color: #fff;
    text-shadow: none;
    opacity: 0.5;
}

:where(html[data-theme="dark"]) .close:hover,
:where(html[data-theme="dark"]) .close:focus {
    color: #fff;
    opacity: 0.8;
}

/* ------------------------------------------------------------------ dropdowns and navigation */

:where(html[data-theme="dark"]) .dropdown-menu {
    background-color: var(--dm-surface);
    border-color: var(--dm-border-strong);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}

:where(html[data-theme="dark"]) .dropdown-menu > li > a {
    color: var(--dm-text);
}

:where(html[data-theme="dark"]) .dropdown-menu > li > a:hover,
:where(html[data-theme="dark"]) .dropdown-menu > li > a:focus,
:where(html[data-theme="dark"]) .dropdown-menu > .active > a,
:where(html[data-theme="dark"]) .dropdown-menu > .active > a:hover,
:where(html[data-theme="dark"]) .dropdown-menu > .active > a:focus {
    color: #fff;
    background-color: var(--dm-surface-hover) !important;
}

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

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

:where(html[data-theme="dark"]) .dropdown-menu > .disabled > a,
:where(html[data-theme="dark"]) .dropdown-menu > .disabled > a:hover,
:where(html[data-theme="dark"]) .dropdown-menu > .disabled > a:focus {
    color: var(--dm-text-faint);
}

/* Project switcher in the header: app.css paints hovered submenus light with !important */
:where(html[data-theme="dark"]) .dropdown-submenu-only-projects:hover > a,
:where(html[data-theme="dark"]) .dropdown-submenu-only-projects:focus > a,
:where(html[data-theme="dark"]) .dropdown-nosubmenu:hover > a,
:where(html[data-theme="dark"]) .dropdown-nosubmenu:focus > a,
:where(html[data-theme="dark"]) .dropdown-submenu:hover > a,
:where(html[data-theme="dark"]) .dropdown-submenu:focus > a {
    color: #fff !important;
    background-color: var(--dm-surface-hover) !important;
}

:where(html[data-theme="dark"]) .navbar-nav .open .dropdown-menu {
    background-color: var(--dm-surface);
}

/* app.css darkens dropdown text inside the dark navbar because the menu itself used to be white */
:where(html[data-theme="dark"]) .bg-dark .ul-dropdown-menu-style a,
:where(html[data-theme="dark"]) .bg-dark .dropdown-menu,
:where(html[data-theme="dark"]) .bg-dark .dropdown-menu a {
    color: var(--dm-text) !important;
}

:where(html[data-theme="dark"]) .nav > li > a:hover,
:where(html[data-theme="dark"]) .nav > li > a:focus,
:where(html[data-theme="dark"]) .nav .open > a,
:where(html[data-theme="dark"]) .nav .open > a:hover,
:where(html[data-theme="dark"]) .nav .open > a:focus {
    background-color: var(--dm-surface-hover);
}

:where(html[data-theme="dark"]) .nav > li.disabled > a,
:where(html[data-theme="dark"]) .nav > li.disabled > a:hover,
:where(html[data-theme="dark"]) .nav > li.disabled > a:focus {
    color: var(--dm-text-faint);
}

:where(html[data-theme="dark"]) .nav-tabs,
:where(html[data-theme="dark"]) .nav-tabs > li > a,
:where(html[data-theme="dark"]) .nav-tabs > li:hover > a,
:where(html[data-theme="dark"]) .nav-tabs > li.active > a,
:where(html[data-theme="dark"]) .nav-tabs > li.active > a:hover,
:where(html[data-theme="dark"]) .nav-tabs > li.active > a:focus,
:where(html[data-theme="dark"]) .nav-tabs.nav-justified > .active > a,
:where(html[data-theme="dark"]) .nav-tabs-justified > .active > a {
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .nav-tabs > li > a:hover {
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .nav-tabs > li.active > a,
:where(html[data-theme="dark"]) .nav-tabs > li.active > a:hover,
:where(html[data-theme="dark"]) .nav-tabs > li.active > a:focus {
    color: var(--dm-text-strong);
    background-color: var(--dm-surface);
}

:where(html[data-theme="dark"]) .nav-tabs > li.active > a {
    border-bottom-color: var(--dm-surface) !important;
}

:where(html[data-theme="dark"]) .nav-tabs-alt .nav-tabs > li > a {
    border-bottom-color: var(--dm-border) !important;
}

:where(html[data-theme="dark"]) .nav-tabs-alt .nav-tabs > li.active > a {
    border-bottom-color: #23b7e5 !important;
}

:where(html[data-theme="dark"]) .breadcrumb {
    background-color: var(--dm-surface-alt);
}

:where(html[data-theme="dark"]) .breadcrumb > .active {
    color: var(--dm-text-muted);
}

:where(html[data-theme="dark"]) .breadcrumb > li + li:before {
    color: var(--dm-text-faint);
}

:where(html[data-theme="dark"]) .pagination > li > a,
:where(html[data-theme="dark"]) .pagination > li > span,
:where(html[data-theme="dark"]) .pager li > a,
:where(html[data-theme="dark"]) .pager li > span {
    color: var(--dm-text);
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .pagination > li > a:hover,
:where(html[data-theme="dark"]) .pagination > li > span:hover,
:where(html[data-theme="dark"]) .pagination > li > a:focus,
:where(html[data-theme="dark"]) .pagination > li > span:focus,
:where(html[data-theme="dark"]) .pager li > a:hover,
:where(html[data-theme="dark"]) .pager li > a:focus {
    color: #fff;
    background-color: var(--dm-surface-hover);
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .pagination > .disabled > span,
:where(html[data-theme="dark"]) .pagination > .disabled > span:hover,
:where(html[data-theme="dark"]) .pagination > .disabled > span:focus,
:where(html[data-theme="dark"]) .pagination > .disabled > a,
:where(html[data-theme="dark"]) .pagination > .disabled > a:hover,
:where(html[data-theme="dark"]) .pagination > .disabled > a:focus,
:where(html[data-theme="dark"]) .pager .disabled > a,
:where(html[data-theme="dark"]) .pager .disabled > span {
    color: var(--dm-text-faint);
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
}

/* ------------------------------------------------------------------ list groups, badges, misc components */

:where(html[data-theme="dark"]) .list-group-item {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) a.list-group-item {
    color: var(--dm-text);
}

:where(html[data-theme="dark"]) a.list-group-item .list-group-item-heading,
:where(html[data-theme="dark"]) .list-group-item-heading {
    color: var(--dm-text-strong);
}

:where(html[data-theme="dark"]) a.list-group-item:hover,
:where(html[data-theme="dark"]) a.list-group-item:focus,
:where(html[data-theme="dark"]) a.list-group-item.hover {
    color: #fff;
    background-color: var(--dm-surface-hover);
}

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

:where(html[data-theme="dark"]) .list-group-item.focus {
    background-color: var(--dm-surface-hover) !important;
}

:where(html[data-theme="dark"]) .list-group-item.select {
    background-color: var(--dm-info-bg) !important;
    border-color: var(--dm-info-border);
}

:where(html[data-theme="dark"]) .list-group-alt .list-group-item:nth-child(2n+2) {
    background-color: rgba(255, 255, 255, 0.025) !important;
}

:where(html[data-theme="dark"]) .list-group-item-success {
    color: var(--dm-success-text);
    background-color: var(--dm-success-bg);
}

:where(html[data-theme="dark"]) .list-group-item-info {
    color: var(--dm-info-text);
    background-color: var(--dm-info-bg);
}

:where(html[data-theme="dark"]) .list-group-item-warning {
    color: var(--dm-warning-text);
    background-color: var(--dm-warning-bg);
}

:where(html[data-theme="dark"]) .list-group-item-danger {
    color: var(--dm-danger-text);
    background-color: var(--dm-danger-bg);
}

:where(html[data-theme="dark"]) .badge {
    background-color: #4a5368;
}

:where(html[data-theme="dark"]) .badge-empty {
    border-color: rgba(255, 255, 255, 0.2);
}

:where(html[data-theme="dark"]) .jumbotron {
    background-color: var(--dm-surface-alt);
}

:where(html[data-theme="dark"]) .thumbnail,
:where(html[data-theme="dark"]) .img-thumbnail {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .thumbnail .caption {
    color: var(--dm-text);
}

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

:where(html[data-theme="dark"]) .progress-bar-white {
    background-color: var(--dm-text-faint);
}

:where(html[data-theme="dark"]) .accordion-group,
:where(html[data-theme="dark"]) .accordion-inner {
    border-color: var(--dm-border);
}

/* ------------------------------------------------------------------ alerts */

:where(html[data-theme="dark"]) .alert {
    box-shadow: none;
}

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

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

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

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

:where(html[data-theme="dark"]) .alert-success .alert-link {
    color: #b3ecc2;
}

:where(html[data-theme="dark"]) .alert-info .alert-link {
    color: #b8e7f7;
}

:where(html[data-theme="dark"]) .alert-warning .alert-link {
    color: #f8e6a8;
}

:where(html[data-theme="dark"]) .alert-danger .alert-link {
    color: #f9c4c4;
}

:where(html[data-theme="dark"]) .alert-success hr,
:where(html[data-theme="dark"]) .alert-info hr,
:where(html[data-theme="dark"]) .alert-warning hr,
:where(html[data-theme="dark"]) .alert-danger hr {
    border-top-color: rgba(255, 255, 255, 0.12);
}

/* ------------------------------------------------------------------ modals, popovers, tooltips */

:where(html[data-theme="dark"]) .modal-content {
    background-color: var(--dm-surface);
    border-color: var(--dm-border-strong);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.6);
}

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

:where(html[data-theme="dark"]) .modal-backdrop.in {
    opacity: 0.7;
}

:where(html[data-theme="dark"]) .popover {
    color: var(--dm-text);
    background-color: var(--dm-surface);
    border-color: var(--dm-border-strong);
}

:where(html[data-theme="dark"]) .popover-title {
    color: var(--dm-text-strong);
    background-color: var(--dm-surface-alt);
    border-bottom-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .popover.top > .arrow {
    border-top-color: var(--dm-border-strong);
}

:where(html[data-theme="dark"]) .popover.top > .arrow:after {
    border-top-color: var(--dm-surface);
}

:where(html[data-theme="dark"]) .popover.right > .arrow {
    border-right-color: var(--dm-border-strong);
}

:where(html[data-theme="dark"]) .popover.right > .arrow:after {
    border-right-color: var(--dm-surface);
}

:where(html[data-theme="dark"]) .popover.bottom > .arrow {
    border-bottom-color: var(--dm-border-strong);
}

:where(html[data-theme="dark"]) .popover.bottom > .arrow:after {
    border-bottom-color: var(--dm-surface);
}

:where(html[data-theme="dark"]) .popover.left > .arrow {
    border-left-color: var(--dm-border-strong);
}

:where(html[data-theme="dark"]) .popover.left > .arrow:after {
    border-left-color: var(--dm-surface);
}

:where(html[data-theme="dark"]) .tooltip-inner {
    color: var(--dm-text-strong);
    background-color: #0d0f14;
}

:where(html[data-theme="dark"]) .tooltip.top .tooltip-arrow,
:where(html[data-theme="dark"]) .tooltip.top-left .tooltip-arrow,
:where(html[data-theme="dark"]) .tooltip.top-right .tooltip-arrow {
    border-top-color: #0d0f14;
}

:where(html[data-theme="dark"]) .tooltip.bottom .tooltip-arrow,
:where(html[data-theme="dark"]) .tooltip.bottom-left .tooltip-arrow,
:where(html[data-theme="dark"]) .tooltip.bottom-right .tooltip-arrow {
    border-bottom-color: #0d0f14;
}

:where(html[data-theme="dark"]) .tooltip.left .tooltip-arrow {
    border-left-color: #0d0f14;
}

:where(html[data-theme="dark"]) .tooltip.right .tooltip-arrow {
    border-right-color: #0d0f14;
}

/* ------------------------------------------------------------------ app.css custom components */

:where(html[data-theme="dark"]) span.panel-heading-white-title {
    color: var(--dm-text-strong);
    background-color: var(--dm-surface);
}

:where(html[data-theme="dark"]) .mapping-product-cell-notfound div.clear {
    color: var(--dm-text-muted);
}

:where(html[data-theme="dark"]) .col-fold-btn {
    border-right-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .picture-box-instore {
    border-color: var(--dm-border-strong);
}

:where(html[data-theme="dark"]) .picture-box-instore .metrics {
    background-color: var(--dm-surface-alt);
}

:where(html[data-theme="dark"]) .title-bar-fixed {
    background-color: var(--dm-surface);
}

:where(html[data-theme="dark"]) #editProductModal [name="shop_url"] {
    background-color: var(--dm-surface-alt);
}

:where(html[data-theme="dark"]) .border-expected-product {
    border-color: var(--dm-text-muted) !important;
}

:where(html[data-theme="dark"]) .dashboard-autopublication-table .autopublication-button-more:hover,
:where(html[data-theme="dark"]) .screenshot-parser-button-details:hover,
:where(html[data-theme="dark"]) .text-foldable-more {
    color: #fff;
}

:where(html[data-theme="dark"]) .sample-code {
    color: var(--dm-text-muted);
    background-color: var(--dm-surface-alt);
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .sticky-form-header {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Greyscale spinner on a white square (saving modal and ~50 views): inverted it sits on the dark surface */
:where(html[data-theme="dark"]) img[src*="image-loader.gif"] {
    filter: invert(0.87);
}

/* ------------------------------------------------------------------ jQuery UI (datepicker, autocomplete, sortable, progressbar, tag-it) */

:where(html[data-theme="dark"]) .ui-widget-content {
    color: var(--dm-text);
    background: var(--dm-surface);
    border-color: var(--dm-border-strong);
}

:where(html[data-theme="dark"]) .ui-widget-content a,
:where(html[data-theme="dark"]) .ui-widget-header,
:where(html[data-theme="dark"]) .ui-widget-header a {
    color: var(--dm-text-strong);
}

:where(html[data-theme="dark"]) .ui-state-default,
:where(html[data-theme="dark"]) .ui-widget-content .ui-state-default,
:where(html[data-theme="dark"]) .ui-widget-header .ui-state-default {
    color: var(--dm-text);
}

:where(html[data-theme="dark"]) .ui-state-default a,
:where(html[data-theme="dark"]) .ui-state-default a:link,
:where(html[data-theme="dark"]) .ui-state-default a:visited {
    color: var(--dm-info-text);
}

:where(html[data-theme="dark"]) .ui-state-hover,
:where(html[data-theme="dark"]) .ui-widget-content .ui-state-hover,
:where(html[data-theme="dark"]) .ui-widget-header .ui-state-hover,
:where(html[data-theme="dark"]) .ui-state-focus,
:where(html[data-theme="dark"]) .ui-widget-content .ui-state-focus,
:where(html[data-theme="dark"]) .ui-widget-header .ui-state-focus {
    color: #fff !important;
    background: var(--dm-surface-hover) !important;
}

:where(html[data-theme="dark"]) .ui-state-highlight,
:where(html[data-theme="dark"]) .ui-widget-content .ui-state-highlight,
:where(html[data-theme="dark"]) .ui-widget-header .ui-state-highlight {
    color: var(--dm-text-strong);
    background: var(--dm-info-bg);
}

:where(html[data-theme="dark"]) .ui-state-highlight a,
:where(html[data-theme="dark"]) .ui-widget-content .ui-state-highlight a,
:where(html[data-theme="dark"]) .ui-widget-header .ui-state-highlight a {
    color: var(--dm-text-strong);
}

:where(html[data-theme="dark"]) .ui-icon,
:where(html[data-theme="dark"]) .ui-widget-content .ui-icon,
:where(html[data-theme="dark"]) .ui-widget-header .ui-icon,
:where(html[data-theme="dark"]) .ui-state-default .ui-icon,
:where(html[data-theme="dark"]) .ui-state-hover .ui-icon,
:where(html[data-theme="dark"]) .ui-state-focus .ui-icon,
:where(html[data-theme="dark"]) .ui-state-active .ui-icon {
    background-image: url(/assets/images/ui/ui-icons_ffffff_256x240.png);
}

:where(html[data-theme="dark"]) .ui-datepicker th.ui-datepicker-week-end {
    color: #f47b7b;
}

:where(html[data-theme="dark"]) .ui-autocomplete-loading {
    background-color: var(--dm-input);
}

:where(html[data-theme="dark"]) .ui-tooltip {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}

:where(html[data-theme="dark"]) .ui-selectable-helper {
    border-color: var(--dm-text-muted);
}

/* ------------------------------------------------------------------ chosen */

:where(html[data-theme="dark"]) .chosen-container .chosen-drop {
    background: var(--dm-surface);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}

:where(html[data-theme="dark"]) .chosen-container-single .chosen-single {
    color: var(--dm-text-strong);
    background-color: var(--dm-input);
    border-color: var(--dm-border-strong);
}

:where(html[data-theme="dark"]) .chosen-container-single .chosen-default,
:where(html[data-theme="dark"]) .chosen-container .search-choice .group-name,
:where(html[data-theme="dark"]) .chosen-container .chosen-results li.disabled-result,
:where(html[data-theme="dark"]) .chosen-container .chosen-drop .result-selected {
    color: var(--dm-text-faint);
}

:where(html[data-theme="dark"]) .chosen-container-single .chosen-search input[type="text"] {
    color: var(--dm-text-strong);
    background-color: var(--dm-input);
    border-color: var(--dm-border-strong);
}

:where(html[data-theme="dark"]) .chosen-container .chosen-results {
    color: var(--dm-text);
}

:where(html[data-theme="dark"]) .chosen-container .chosen-results li.no-results {
    color: var(--dm-text-muted);
    background: var(--dm-surface-alt);
}

:where(html[data-theme="dark"]) .chosen-container-multi .chosen-choices {
    background-color: var(--dm-input);
    background-image: none;
    border-color: var(--dm-border-strong);
}

:where(html[data-theme="dark"]) .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
    color: var(--dm-text-faint);
}

:where(html[data-theme="dark"]) .chosen-container-active .chosen-choices li.search-field input[type="text"] {
    color: var(--dm-text-strong) !important;
}

:where(html[data-theme="dark"]) .chosen-container-multi .chosen-choices li.search-choice {
    color: var(--dm-text-strong);
    background: var(--dm-surface-hover);
    border-color: var(--dm-border-strong);
    box-shadow: none;
}

:where(html[data-theme="dark"]) .chosen-container-multi .chosen-choices li.search-choice-disabled {
    color: var(--dm-text-muted);
    background: var(--dm-surface-alt);
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .chosen-container-multi .chosen-choices li.search-choice-focus {
    background: #3a4152;
}

:where(html[data-theme="dark"]) .chosen-container-active.chosen-with-drop .chosen-single {
    background-color: var(--dm-input);
    box-shadow: none;
}

/* The sprite carries dark glyphs (arrow, clear cross) drawn for a white field */
:where(html[data-theme="dark"]) .chosen-container-single .chosen-single div b,
:where(html[data-theme="dark"]) .chosen-container-single .chosen-single abbr,
:where(html[data-theme="dark"]) .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
    filter: invert(0.85);
}

/* ------------------------------------------------------------------ SumoSelect */

:where(html[data-theme="dark"]) .SumoSelect > .CaptionCont {
    color: var(--dm-text-strong);
    background-color: var(--dm-input);
    border-color: var(--dm-border-strong);
}

:where(html[data-theme="dark"]) .SumoSelect > .CaptionCont > span.placeholder {
    color: var(--dm-text-faint);
}

:where(html[data-theme="dark"]) .SumoSelect > .CaptionCont > label > i {
    filter: invert(0.85);
}

:where(html[data-theme="dark"]) .SumoSelect > .optWrapper,
:where(html[data-theme="dark"]) .SumoSelect > .optWrapper.multiple > .MultiControls,
:where(html[data-theme="dark"]) .SumoSelect .select-all {
    background-color: var(--dm-surface);
    border-color: var(--dm-border-strong);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}

:where(html[data-theme="dark"]) .SumoSelect > .optWrapper > .options li.opt {
    border-bottom-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .SumoSelect > .optWrapper > .options li.opt:hover,
:where(html[data-theme="dark"]) .SumoSelect > .optWrapper.multiple > .MultiControls > p:hover {
    background-color: var(--dm-surface-hover);
}

:where(html[data-theme="dark"]) .SumoSelect > .optWrapper > .options li.opt.sel,
:where(html[data-theme="dark"]) .SumoSelect .select-all.sel {
    background-color: var(--dm-info-bg);
}

:where(html[data-theme="dark"]) .SumoSelect > .optWrapper.multiple > .options li.opt span i,
:where(html[data-theme="dark"]) .SumoSelect .select-all > span i {
    background-color: var(--dm-input);
    border-color: var(--dm-border-strong);
}

:where(html[data-theme="dark"]) .SumoSelect .select-all.partial > span i {
    background-color: var(--dm-border-strong);
}

:where(html[data-theme="dark"]) .SumoSelect > .optWrapper.multiple > .MultiControls > p.btnOk,
:where(html[data-theme="dark"]) .SumoSelect.disabled > .CaptionCont {
    border-color: var(--dm-border);
}

/* ------------------------------------------------------------------ daterangepicker */

:where(html[data-theme="dark"]) .daterangepicker {
    color: var(--dm-text);
    background-color: var(--dm-surface);
    border-color: var(--dm-border-strong);
}

:where(html[data-theme="dark"]) .daterangepicker:before {
    border-bottom-color: var(--dm-border-strong);
}

:where(html[data-theme="dark"]) .daterangepicker:after {
    border-bottom-color: var(--dm-surface);
}

:where(html[data-theme="dark"]) .daterangepicker.drop-up:before {
    border-top-color: var(--dm-border-strong);
}

:where(html[data-theme="dark"]) .daterangepicker.drop-up:after {
    border-top-color: var(--dm-surface);
}

:where(html[data-theme="dark"]) .daterangepicker .calendar-table {
    background-color: var(--dm-surface);
    border-color: var(--dm-surface);
}

:where(html[data-theme="dark"]) .daterangepicker .calendar-table .next span,
:where(html[data-theme="dark"]) .daterangepicker .calendar-table .prev span {
    border-color: var(--dm-text);
}

:where(html[data-theme="dark"]) .daterangepicker td.available:hover,
:where(html[data-theme="dark"]) .daterangepicker th.available:hover,
:where(html[data-theme="dark"]) .daterangepicker .ranges li:hover {
    background-color: var(--dm-surface-hover);
}

:where(html[data-theme="dark"]) .daterangepicker td.off,
:where(html[data-theme="dark"]) .daterangepicker td.off.in-range,
:where(html[data-theme="dark"]) .daterangepicker td.off.start-date,
:where(html[data-theme="dark"]) .daterangepicker td.off.end-date {
    color: var(--dm-text-faint);
    background-color: var(--dm-surface);
}

:where(html[data-theme="dark"]) .daterangepicker td.in-range {
    color: var(--dm-text-strong);
    background-color: var(--dm-info-bg);
}

:where(html[data-theme="dark"]) .daterangepicker td.week,
:where(html[data-theme="dark"]) .daterangepicker th.week,
:where(html[data-theme="dark"]) .daterangepicker td.disabled,
:where(html[data-theme="dark"]) .daterangepicker option.disabled {
    color: var(--dm-text-faint);
}

:where(html[data-theme="dark"]) .daterangepicker select.hourselect,
:where(html[data-theme="dark"]) .daterangepicker select.minuteselect,
:where(html[data-theme="dark"]) .daterangepicker select.secondselect,
:where(html[data-theme="dark"]) .daterangepicker select.ampmselect,
:where(html[data-theme="dark"]) .daterangepicker select.monthselect,
:where(html[data-theme="dark"]) .daterangepicker select.yearselect {
    color: var(--dm-text-strong);
    background-color: var(--dm-input);
    border-color: var(--dm-border-strong);
}

:where(html[data-theme="dark"]) .daterangepicker .drp-buttons,
:where(html[data-theme="dark"]) .daterangepicker .drp-calendar.left,
:where(html[data-theme="dark"]) .daterangepicker .drp-calendar.right,
:where(html[data-theme="dark"]) .daterangepicker.show-ranges .drp-calendar.left,
:where(html[data-theme="dark"]) .daterangepicker.show-ranges.ltr .drp-calendar.left,
:where(html[data-theme="dark"]) .daterangepicker.show-ranges.rtl .drp-calendar.right {
    border-color: var(--dm-border);
}

/* ------------------------------------------------------------------ ui.multiselect, bootstrap-slider, Quill, performance monitor, Monaco */

:where(html[data-theme="dark"]) .ui-multiselect ul.selected,
:where(html[data-theme="dark"]) .ui-multiselect ul.available {
    background: var(--dm-surface);
}

:where(html[data-theme="dark"]) .ui-multiselect .ui-widget-header {
    background: var(--dm-surface-alt);
}

:where(html[data-theme="dark"]) .ui-multiselect li a {
    color: var(--dm-text-muted);
}

:where(html[data-theme="dark"]) .slider-track {
    background-color: var(--dm-surface-hover);
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .slider-handle {
    background-color: var(--dm-text);
    border-color: var(--dm-border-strong);
}

:where(html[data-theme="dark"]) .ql-toolbar.ql-snow,
:where(html[data-theme="dark"]) .ql-container.ql-snow,
:where(html[data-theme="dark"]) .ql-snow .ql-picker.ql-expanded .ql-picker-label,
:where(html[data-theme="dark"]) .ql-snow .ql-picker.ql-expanded .ql-picker-options,
:where(html[data-theme="dark"]) .ql-snow .ql-tooltip input[type=text],
:where(html[data-theme="dark"]) .ql-snow .ql-tooltip a.ql-action::after {
    border-color: var(--dm-border-strong);
}

:where(html[data-theme="dark"]) .ql-snow .ql-stroke,
:where(html[data-theme="dark"]) .ql-snow .ql-stroke-miter {
    stroke: var(--dm-text);
}

:where(html[data-theme="dark"]) .ql-snow .ql-fill,
:where(html[data-theme="dark"]) .ql-snow .ql-stroke.ql-fill {
    fill: var(--dm-text);
}

:where(html[data-theme="dark"]) .ql-snow .ql-picker,
:where(html[data-theme="dark"]) .ql-snow .ql-picker.ql-expanded .ql-picker-label {
    color: var(--dm-text);
}

:where(html[data-theme="dark"]) .ql-snow .ql-picker-options {
    background-color: var(--dm-surface);
}

:where(html[data-theme="dark"]) .ql-snow .ql-tooltip {
    color: var(--dm-text);
    background-color: var(--dm-surface);
    border-color: var(--dm-border-strong);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}

:where(html[data-theme="dark"]) .ql-snow .ql-tooltip input[type=text] {
    color: var(--dm-text-strong);
    background-color: var(--dm-input);
}

:where(html[data-theme="dark"]) .ql-snow .ql-editor code,
:where(html[data-theme="dark"]) .ql-snow .ql-editor pre {
    background-color: var(--dm-surface-alt);
}

:where(html[data-theme="dark"]) .ql-snow .ql-editor blockquote {
    border-left-color: var(--dm-border-strong);
}

:where(html[data-theme="dark"]) .ql-snow .ql-editor .ql-code-block-container {
    color: var(--dm-text);
    background-color: var(--dm-surface-alt);
}

:where(html[data-theme="dark"]) .ql-editor li[data-list=checked] > .ql-ui,
:where(html[data-theme="dark"]) .ql-editor li[data-list=unchecked] > .ql-ui {
    color: var(--dm-text-muted);
}

:where(html[data-theme="dark"]) .ql-editor td {
    border-color: var(--dm-border-strong);
}

:where(html[data-theme="dark"]) .ql-editor.ql-blank::before {
    color: var(--dm-text-faint);
}

:where(html[data-theme="dark"]) .pm-container {
    color: var(--dm-text);
    background: var(--dm-surface);
}

:where(html[data-theme="dark"]) .pm-query {
    color: var(--dm-text-muted);
}

:where(html[data-theme="dark"]) .read-only-reference .monaco-editor,
:where(html[data-theme="dark"]) .read-only-reference .monaco-editor * {
    background-color: #202020 !important;
}

:where(html[data-theme="dark"]) .save_var:hover {
    background-color: var(--dm-surface-hover);
}

/* ------------------------------------------------------------------ charts drawn for a white page */

:where(html[data-theme="dark"]) .flot-text {
    color: var(--dm-text-muted) !important;
}

:where(html[data-theme="dark"]) .legendLabel span {
    color: var(--dm-text) !important;
}

:where(html[data-theme="dark"]) .legend > div {
    background-color: var(--dm-surface) !important;
}

/* ------------------------------------------------------------------ per-page stylesheets (public/assets/css/default)
 * Class names these files style generically (.container, .line, .card, .btn-toolbar …) are scoped to the page
 * through the body classes of the layout, so the remap cannot paint the same class on other pages.
 */

:where(html[data-theme="dark"]) .select {
    border-color: var(--dm-border-strong);
}

:where(html[data-theme="dark"]) .queue-count-table td,
:where(html[data-theme="dark"]) .queue-count-table th,
:where(html[data-theme="dark"]) .parser-variant-data-filter-table td {
    border-color: var(--dm-border);
}

/* dashboard/data-quality */
:where(html[data-theme="dark"]) .page-action-data-quality .autopublication-row thead tr,
:where(html[data-theme="dark"]) .page-action-data-quality .autopublication-row tbody td {
    background-color: var(--dm-surface-alt) !important;
}

:where(html[data-theme="dark"]) .page-action-data-quality .selected-cell {
    background-color: var(--dm-surface-hover) !important;
}

:where(html[data-theme="dark"]) .page-action-data-quality tbody .selected-cell::after {
    border-top-color: var(--dm-text);
}

/* dashboard/epack-publication: status cells keep their colour, the text on them has to stay dark */
:where(html[data-theme="dark"]) .probe-list td.code-color-green,
:where(html[data-theme="dark"]) .code-color-light-red,
:where(html[data-theme="dark"]) .code-color-yellow,
:where(html[data-theme="dark"]) .code-color-blue {
    color: #1b1e27;
}

/* dashboard/parsers-custom-dashboard-data */
:where(html[data-theme="dark"]) #hideEmptyBtn,
:where(html[data-theme="dark"]) #shopSearch {
    border-color: var(--dm-border-strong);
}

:where(html[data-theme="dark"]) .shop-section,
:where(html[data-theme="dark"]) .shop-section table {
    background-color: var(--dm-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

:where(html[data-theme="dark"]) .shop-section h3 {
    color: var(--dm-text-strong);
    border-bottom-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .shop-section tbody tr {
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .shop-section tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.025);
}

:where(html[data-theme="dark"]) .shop-section tbody tr:hover {
    background-color: var(--dm-info-bg);
}

/* epack/auto-probes-check-metric */
:where(html[data-theme="dark"]) .page-action-auto-probes-check-metric input.big[type=checkbox]:before {
    background: var(--dm-input);
    border-color: var(--dm-border-strong);
}

:where(html[data-theme="dark"]) .page-action-auto-probes-check-metric input.big[type=checkbox]:checked:after {
    border-color: var(--dm-text-strong);
}

:where(html[data-theme="dark"]) .page-action-auto-probes-check-metric .container,
:where(html[data-theme="dark"]) .page-action-auto-probes-check-metric .debug-answer-table {
    background-color: var(--dm-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

:where(html[data-theme="dark"]) .page-action-auto-probes-check-metric .left-panel {
    background-color: var(--dm-surface-alt);
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .page-action-auto-probes-check-metric .section-title,
:where(html[data-theme="dark"]) .page-action-auto-probes-check-metric .algorithm-value {
    color: var(--dm-text-strong);
}

:where(html[data-theme="dark"]) .page-action-auto-probes-check-metric .algorithm-answer-box {
    background-color: var(--dm-surface-alt);
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .page-action-auto-probes-check-metric .algorithm-label,
:where(html[data-theme="dark"]) .page-action-auto-probes-check-metric .algorithm-date,
:where(html[data-theme="dark"]) .page-action-auto-probes-check-metric .algoritm-answer,
:where(html[data-theme="dark"]) .page-action-auto-probes-check-metric .auditor-status,
:where(html[data-theme="dark"]) .page-action-auto-probes-check-metric .auditor-answer,
:where(html[data-theme="dark"]) .page-action-auto-probes-check-metric .copy-btn,
:where(html[data-theme="dark"]) .page-action-auto-probes-check-metric .product-details p,
:where(html[data-theme="dark"]) .page-action-auto-probes-check-metric .loader-text {
    color: var(--dm-text-muted);
}

:where(html[data-theme="dark"]) .page-action-auto-probes-check-metric .auditor-info,
:where(html[data-theme="dark"]) .page-action-auto-probes-check-metric .algoritm-info {
    color: var(--dm-text);
}

:where(html[data-theme="dark"]) .page-action-auto-probes-check-metric .copy-command-box,
:where(html[data-theme="dark"]) .page-action-auto-probes-check-metric .algorithm-table th,
:where(html[data-theme="dark"]) .page-action-auto-probes-check-metric .debug-answer-json,
:where(html[data-theme="dark"]) .page-action-auto-probes-check-metric .new-window,
:where(html[data-theme="dark"]) .page-action-auto-probes-check-metric .btn-toolbar {
    color: var(--dm-text);
    background-color: var(--dm-surface-alt);
}

:where(html[data-theme="dark"]) .page-action-auto-probes-check-metric .copy-command-box:hover {
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .page-action-auto-probes-check-metric .line {
    background-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .page-action-auto-probes-check-metric .copy-command-box code {
    color: var(--dm-text);
    background-color: var(--dm-input);
}

:where(html[data-theme="dark"]) .page-action-auto-probes-check-metric .copy-btn:hover {
    color: #fff;
    background-color: var(--dm-surface-hover);
}

:where(html[data-theme="dark"]) .page-action-auto-probes-check-metric .zoom-loader,
:where(html[data-theme="dark"]) .page-action-auto-probes-check-metric .spinner {
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .page-action-auto-probes-check-metric .loader-container {
    background-color: rgba(27, 30, 39, 0.8);
}

/* .card on the three pages that style it */
:where(html[data-theme="dark"]) .page-action-auto-probes-check-metric .card,
:where(html[data-theme="dark"]) .page-controller-projects.page-action-configure .card,
:where(html[data-theme="dark"]) .page-controller-projects.page-action-validators .card {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .page-action-auto-probes-check-metric .card-title {
    color: var(--dm-text-strong);
    border-color: var(--dm-border);
}

/* epack/auto-probes-check-results-changes-validator */
:where(html[data-theme="dark"]) .page-action-auto-probes-check-results-changes-validator .table-container td:nth-child(1),
:where(html[data-theme="dark"]) .page-action-auto-probes-check-results-changes-validator .table-container td:nth-child(2),
:where(html[data-theme="dark"]) .page-action-auto-probes-check-results-changes-validator .table-container th:nth-child(1),
:where(html[data-theme="dark"]) .page-action-auto-probes-check-results-changes-validator .table-container th:nth-child(2) {
    box-shadow: inset -1px 0 0 var(--dm-border);
}

:where(html[data-theme="dark"]) .page-action-auto-probes-check-results-changes-validator .table-container thead tr th:nth-child(1),
:where(html[data-theme="dark"]) .page-action-auto-probes-check-results-changes-validator .table-container thead tr th:nth-child(2) {
    background-color: var(--dm-surface);
}

/* epack/auto-probes-new */
:where(html[data-theme="dark"]) .criteria-picker-list {
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .criteria-picker-list .criteria-row:hover {
    background-color: var(--dm-surface-hover);
}

:where(html[data-theme="dark"]) .criteria-picker-list .criteria-row-selected {
    background-color: var(--dm-info-bg);
}

/* epack/comparisons-settings */
:where(html[data-theme="dark"]) .page-action-comparisons-settings .switcher {
    background-color: var(--dm-input);
    border-color: var(--dm-border-strong);
}

:where(html[data-theme="dark"]) .page-action-comparisons-settings .switcher__label {
    color: var(--dm-text-strong);
}

/* mapped-analysis/index */
:where(html[data-theme="dark"]) .toottip {
    border-bottom-color: var(--dm-text-muted);
}

:where(html[data-theme="dark"]) .toottip .tooltiptext {
    color: var(--dm-text);
    background-color: var(--dm-surface-alt);
}

/* probes/data_screenshot */
:where(html[data-theme="dark"]) .lazy-container {
    background-color: var(--dm-surface);
}

/* probes/show */
:where(html[data-theme="dark"]) #imediaVerificationInfoModal .imedia-screenshot-container,
:where(html[data-theme="dark"]) #imediaVerificationScrnLeft,
:where(html[data-theme="dark"]) #imediaVerificationScrnRight {
    background-color: var(--dm-surface);
    border-color: var(--dm-border-strong);
}

:where(html[data-theme="dark"]) #imediaVerificationInfoModal .screenshots-summary-content table tr:hover,
:where(html[data-theme="dark"]) #imediaVerificationInfoModal .screenshots-summary-content table tr.show-screenshot {
    color: var(--dm-text-strong);
    background-color: var(--dm-surface-hover);
}

:where(html[data-theme="dark"]) #imediaVerificationInfoModal .list-group .badge {
    color: #fff;
}

/* projects/configure and projects/validators */
:where(html[data-theme="dark"]) .card-header,
:where(html[data-theme="dark"]) .configuration-shop-container,
:where(html[data-theme="dark"]) .configuration-shop {
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .basic-form .border {
    background-color: var(--dm-surface);
    border-color: var(--dm-border) !important;
}

:where(html[data-theme="dark"]) .configuration-shop-container {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.35);
}

:where(html[data-theme="dark"]) .configuration-shop-container:hover {
    border-color: var(--dm-border-strong);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.55);
}

:where(html[data-theme="dark"]) .configuration-shop {
    background-color: var(--dm-surface-alt);
}

:where(html[data-theme="dark"]) .from-global,
:where(html[data-theme="dark"]) .configuration-shop-container.from-global {
    background-color: var(--dm-info-bg);
}

:where(html[data-theme="dark"]) .radio-element input.checked:after {
    background-color: var(--dm-text-strong);
}

:where(html[data-theme="dark"]) .jquery-accordion-menu {
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .jquery-accordion-menu .jquery-accordion-menu-header,
:where(html[data-theme="dark"]) .jquery-accordion-menu .jquery-accordion-menu-footer {
    color: var(--dm-text-strong);
    background-color: var(--dm-surface-alt);
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .jquery-accordion-menu ul li a {
    color: var(--dm-text);
    background-color: var(--dm-surface);
}

:where(html[data-theme="dark"]) .jquery-accordion-menu > ul > li.active > a,
:where(html[data-theme="dark"]) .jquery-accordion-menu > ul > li:hover > a {
    color: #fff;
    background-color: var(--dm-surface-hover);
}

:where(html[data-theme="dark"]) .jquery-accordion-menu > ul > li > a {
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .jquery-accordion-menu ul ul.submenu li a {
    color: var(--dm-text);
    background-color: var(--dm-surface-alt);
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .jquery-accordion-menu ul ul.submenu li:hover > a {
    border-left-color: var(--dm-border-strong);
}

:where(html[data-theme="dark"]) .jquery-accordion-menu ul ul.submenu li.active > a {
    background-color: rgba(47, 86, 122, 0.45) !important;
}

:where(html[data-theme="dark"]) .jquery-accordion-menu ul ul.submenu li.enabled > a {
    background-color: var(--dm-success-bg);
}

:where(html[data-theme="dark"]) .jquery-accordion-menu ul ul.submenu li.active.enabled > a {
    background-color: rgba(39, 194, 76, 0.3) !important;
}

/* projects/shops-edit */
:where(html[data-theme="dark"]) .urls-box {
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .mass-update-url-form,
:where(html[data-theme="dark"]) .group-item {
    background-color: var(--dm-surface-alt);
}

:where(html[data-theme="dark"]) [data-to-update="true"],
:where(html[data-theme="dark"]) [data-to-update="true"] + .chosen-container .chosen-single {
    background-color: rgba(114, 102, 186, 0.3);
}

/* store-card/edit */
:where(html[data-theme="dark"]) .sticky-save-btn-wrapper {
    background-color: var(--dm-surface);
    border-color: var(--dm-border-strong);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.5);
}

/* validators/ml-sales-check */
:where(html[data-theme="dark"]) .product-accepted td {
    background-color: var(--dm-surface-hover) !important;
}

/* ------------------------------------------------------------------ <style> blocks inside views (declared after this file) */

html[data-theme="dark"] .page-action-prompt-playground .progress {
    background-color: var(--dm-surface-hover);
}

html[data-theme="dark"] .mapped-analysis tr:hover {
    background-color: var(--dm-surface-hover);
}

html[data-theme="dark"] .page-controller-mapped-analysis .title-bar {
    background-color: var(--dm-surface);
}

html[data-theme="dark"] .page-controller-tasks.page-action-show .panel .list-group-item:hover {
    background: var(--dm-surface-hover) !important;
}

html[data-theme="dark"] .unsupported-fields-container {
    border-bottom-color: var(--dm-border);
}

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

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

html[data-theme="dark"] .pqr .pqr-card-head {
    border-bottom-color: var(--dm-border);
}

html[data-theme="dark"] .pqr .pqr-card-title,
html[data-theme="dark"] .pqr-context strong,
html[data-theme="dark"] .pqr-form label.control-label,
html[data-theme="dark"] .pqr-kpi-number,
html[data-theme="dark"] .pqr-shop-name,
html[data-theme="dark"] .pqr-item-keyword,
html[data-theme="dark"] .pqr-field-code {
    color: var(--dm-text-strong);
}

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

html[data-theme="dark"] .pqr-chip-ok {
    background: var(--dm-success-bg);
    color: var(--dm-success-text);
}

html[data-theme="dark"] .pqr-chip-error,
html[data-theme="dark"] .pqr-field-chip {
    background: var(--dm-danger-bg);
    color: var(--dm-danger-text);
}

html[data-theme="dark"] .pqr-chip-empty {
    background: var(--dm-info-bg);
    color: var(--dm-info-text);
}

html[data-theme="dark"] .pqr-chip-warning {
    background: var(--dm-warning-bg);
    color: var(--dm-warning-text);
}

html[data-theme="dark"] .pqr-scope,
html[data-theme="dark"] .pqr-scope-picker label {
    border-color: var(--dm-border-strong);
}

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

html[data-theme="dark"] .pqr-kpi {
    border-color: var(--dm-border);
}

html[data-theme="dark"] .pqr-bar {
    background: var(--dm-surface-hover);
}

html[data-theme="dark"] .pqr-bar-skipped,
html[data-theme="dark"] .pqr-dot-skipped {
    background: #4a5368;
}

html[data-theme="dark"] .pqr-table > thead > tr > th,
html[data-theme="dark"] .parser-quality-selector-table > thead > tr > th {
    border-bottom-color: var(--dm-border) !important;
    background: var(--dm-surface-alt);
}

html[data-theme="dark"] .pqr-table > tbody > tr > td {
    border-top-color: var(--dm-border);
}

html[data-theme="dark"] .parser-quality-shop-group-header > td {
    border-top-color: var(--dm-border-strong) !important;
    border-bottom-color: var(--dm-border-strong);
    background: var(--dm-surface-alt) !important;
}

html[data-theme="dark"] .parser-quality-report-items-table tr[data-item-status="skipped"],
html[data-theme="dark"] .parser-quality-report-items-table tr[data-item-status="unknown"] {
    --pqr-accent: #4a5368;
}

html[data-theme="dark"] .parser-quality-report-item-row > td {
    border-top-color: var(--dm-border) !important;
    background: var(--dm-surface);
}

html[data-theme="dark"] .pqr-item-error,
html[data-theme="dark"] .pqr-selector-error {
    color: var(--dm-danger-text);
}

html[data-theme="dark"] .pqr-thumb {
    border-color: var(--dm-border);
    background: var(--dm-surface-alt);
}

html[data-theme="dark"] .parser-quality-selector-summary a.active .label {
    box-shadow: 0 0 0 2px rgba(232, 236, 242, 0.25);
}

html[data-theme="dark"] .parser-quality-selector-details-row > td {
    background: var(--dm-surface-alt);
}

html[data-theme="dark"] .parser-quality-selector-table {
    border-color: var(--dm-border);
    background: var(--dm-surface);
}

html[data-theme="dark"] .parser-quality-selector-table > tbody > tr > td {
    border-top-color: var(--dm-border) !important;
}

html[data-theme="dark"] .parser-quality-selector-table > tbody > tr:hover > td {
    background: var(--dm-surface-hover);
}

html[data-theme="dark"] .pqr-action {
    border-color: var(--dm-border-strong);
    background: var(--dm-surface-alt);
    color: var(--dm-text);
}

html[data-theme="dark"] .pqr-action:hover,
html[data-theme="dark"] .pqr-action:focus {
    border-color: var(--dm-info-border);
    color: var(--dm-info-text);
}

html[data-theme="dark"] .pqr-value {
    background: var(--dm-surface-hover);
    color: var(--dm-text-strong);
}

html[data-theme="dark"] .pqr-selector-code {
    color: #a196e0;
}

html[data-theme="dark"] .parser-quality-report-item-highlight > td {
    background: var(--dm-warning-bg) !important;
}

/* ------------------------------------------------------------------ inline style="" written for a white page */

/* Light surfaces; jQuery rewrites a touched style attribute as rgb(), so both spellings are matched */
html[data-theme="dark"] [style*="background: #fff;" i],
html[data-theme="dark"] [style*="background:#fff;" i],
html[data-theme="dark"] [style*="background: rgb(255, 255, 255)"] {
    background: var(--dm-surface) !important;
}

html[data-theme="dark"] [style*="background-color: #f6f8f8" i],
html[data-theme="dark"] [style*="background: #f1f1f1" i],
html[data-theme="dark"] [style*="background: #f7f7f7" i],
html[data-theme="dark"] [style*="background: #f3f1f1" i],
html[data-theme="dark"] [style*="background: lightgray" i],
html[data-theme="dark"] [style*="background-color: lightgray" i],
html[data-theme="dark"] [style*="background: rgb(211, 211, 211)"],
html[data-theme="dark"] [style*="background-color: rgb(211, 211, 211)"] {
    background-color: var(--dm-surface-alt) !important;
}

/* Marked rows: "accepted" (#ccc) and clicked (#dedede) */
html[data-theme="dark"] [style*="background: #ccc" i],
html[data-theme="dark"] [style*="background: rgb(204, 204, 204)"],
html[data-theme="dark"] [style*="background-color: rgb(204, 204, 204)"],
html[data-theme="dark"] [style*="background-color: rgb(222, 222, 222)"] {
    background: #3a4152 !important;
}

html[data-theme="dark"] [style*="background:rgba(255,255,255,0.75)"],
html[data-theme="dark"] [style*="background: rgba(255, 255, 255, 0.75)"] {
    background: rgba(27, 30, 39, 0.75) !important;
}

/* Pastel status backgrounds become tints, so the light text of the theme stays readable on them */
html[data-theme="dark"] [style*="background: lightgreen" i],
html[data-theme="dark"] [style*="background: #dbffdb" i],
html[data-theme="dark"] [style*="background: rgb(144, 238, 144)"],
html[data-theme="dark"] [style*="background: rgb(219, 255, 219)"] {
    background: var(--dm-success-bg) !important;
}

html[data-theme="dark"] [style*="background: lightpink" i],
html[data-theme="dark"] [style*="background: #ffd2d2" i],
html[data-theme="dark"] [style*="background-color: #ffa496" i],
html[data-theme="dark"] [style*="background-color: #e16a6a" i],
html[data-theme="dark"] [style*="background: rgb(255, 182, 193)"],
html[data-theme="dark"] [style*="background: rgb(255, 210, 210)"] {
    background: var(--dm-danger-bg) !important;
}

html[data-theme="dark"] [style*="background: lightyellow" i],
html[data-theme="dark"] [style*="background: beige" i],
html[data-theme="dark"] [style*="background-color: #ffeb8c" i],
html[data-theme="dark"] [style*="background: rgb(255, 255, 224)"],
html[data-theme="dark"] [style*="background: rgb(245, 245, 220)"] {
    background: var(--dm-warning-bg) !important;
}

/* Saturated status fills set inline (product panel headings, scanned rows) get the toned-down palette */
html[data-theme="dark"] [style*="background-color: #27c24c" i],
html[data-theme="dark"] [style*="background-color: rgb(39, 194, 76)"] {
    background-color: #2e8443 !important;
}

html[data-theme="dark"] [style*="background-color: #ff3300" i],
html[data-theme="dark"] [style*="background: #d40909" i] {
    background: #b54545 !important;
}

/* Inline fills marked !important ("Custom" and "Reopen" markers, task badges) cannot be replaced, only covered:
 * background-image paints above background-color, so a translucent layer of the page colour tones them down.
 * On #ffc107 the layer keeps both the black text (5:1) and the white text (4.2:1) of those markers readable. */
html[data-theme="dark"] [style*="background-color: #ffc107" i] {
    background-image: linear-gradient(rgba(27, 30, 39, 0.45), rgba(27, 30, 39, 0.45)) !important;
}

html[data-theme="dark"] [style*="background-color: #079cff" i],
html[data-theme="dark"] [style*="background-color: #27c24c !important" i] {
    background-image: linear-gradient(rgba(27, 30, 39, 0.4), rgba(27, 30, 39, 0.4)) !important;
}

/* Dark text with no background of its own; text placed on a yellow/red inline background keeps its black */
html[data-theme="dark"] [style*="color: black" i]:not([style*="background" i]),
html[data-theme="dark"] [style*="color: #58666e" i]:not([style*="background" i]),
html[data-theme="dark"] [style*="color: rgb(0, 0, 0)"]:not([style*="background"]) {
    color: var(--dm-text-strong) !important;
}

html[data-theme="dark"] [style*="color: #036" i] {
    color: #7fb2e5 !important;
}

html[data-theme="dark"] [style*="color:#6e0101" i],
html[data-theme="dark"] [style*="color: #6e0101" i],
html[data-theme="dark"] [style*="color: darkred" i] {
    color: #ff8080 !important;
}

/* Light borders, and black frames that disappear on a dark page */
html[data-theme="dark"] [style*="solid lightgray" i],
html[data-theme="dark"] [style*="solid #e7ecee" i],
html[data-theme="dark"] [style*="solid #ddd" i],
html[data-theme="dark"] [style*="#ddd solid" i],
html[data-theme="dark"] [style*="#e4e4e4 solid" i],
html[data-theme="dark"] [style*="solid #ccc" i],
html[data-theme="dark"] [style*="solid #fff" i],
html[data-theme="dark"] [style*="border-left-color: white" i] {
    border-color: var(--dm-border) !important;
}

html[data-theme="dark"] [style*="solid black" i],
html[data-theme="dark"] [style*="solid #000" i] {
    border-color: var(--dm-text-muted) !important;
}

/* Black loader dots of the data-quality dashboard */
html[data-theme="dark"] svg [fill="#000000"] {
    fill: var(--dm-text);
}

/* ------------------------------------------------------------------ standalone tool pages in the parser editor modals (Bootstrap 4) */

:where(html[data-theme="dark"]) body.theme-tool-page {
    min-height: 100vh;
    color: var(--dm-text);
    background-color: var(--dm-surface);
}

:where(html[data-theme="dark"]) .theme-tool-page .form-card input,
:where(html[data-theme="dark"]) .theme-tool-page .form-card textarea {
    color: var(--dm-text-strong);
    background-color: var(--dm-input);
    border-color: var(--dm-border-strong);
}

:where(html[data-theme="dark"]) .theme-tool-page .form-card input:focus,
:where(html[data-theme="dark"]) .theme-tool-page .form-card textarea:focus {
    border-color: skyblue;
}

:where(html[data-theme="dark"]) .theme-tool-page .input-group label,
:where(html[data-theme="dark"]) .theme-tool-page #below-btn a,
:where(html[data-theme="dark"]) .theme-tool-page .list-group .tabs {
    color: var(--dm-text);
}

:where(html[data-theme="dark"]) .theme-tool-page .bar4,
:where(html[data-theme="dark"]) .theme-tool-page .list-group-item.active {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-surface) !important;
}

:where(html[data-theme="dark"]) .theme-tool-page #test {
    color: var(--dm-warning-text);
    background-color: var(--dm-warning-bg);
    border-color: var(--dm-warning-border);
}

:where(html[data-theme="dark"]) .theme-tool-page .table-container,
:where(html[data-theme="dark"]) .theme-tool-page th,
:where(html[data-theme="dark"]) .theme-tool-page td {
    border-color: var(--dm-border);
}

:where(html[data-theme="dark"]) .theme-tool-page ::-webkit-scrollbar-track {
    background: var(--dm-surface-alt);
}

/* ------------------------------------------------------------------ coloured utilities, re-asserted
 * The remaps above come after app.css, so where one shares an element with a colour utility of equal
 * specificity (.list-group-item.bg-info, .dropdown-menu.bg-dark …) the utility has to be restated to win again.
 * Solid fills (bars, panel headings, status cells) use the toned-down button palette.
 */

:where(html[data-theme="dark"]) .bg-primary {
    color: #f4f3f9;
    background-color: #5f5696;
}

:where(html[data-theme="dark"]) .bg-info {
    color: #e6f6fb;
    background-color: #2a7e98;
}

:where(html[data-theme="dark"]) .bg-success {
    color: #e3f7e8;
    background-color: #2e8443;
}

/* Light-green product header of mapping-check (bg-success ltest) */
:where(html[data-theme="dark"]) .bg-success.ltest,
:where(html[data-theme="dark"]) .bg-success .ltest {
    color: var(--dm-success-text);
    background-color: var(--dm-success-bg);
}

:where(html[data-theme="dark"]) .bg-warning {
    color: #fffefa;
    background-color: #877419;
}

:where(html[data-theme="dark"]) .bg-danger {
    color: #fff;
    background-color: #b54545;
}

:where(html[data-theme="dark"]) .bg-orange {
    color: #fffefa;
    background-color: #986b1c;
}

:where(html[data-theme="dark"]) .bg-dark {
    color: #a6a8b1;
    background-color: #3a3f51;
}

:where(html[data-theme="dark"]) .bg-black {
    color: #7793a7;
    background-color: #1c2b36;
}

:where(html[data-theme="dark"]) .bg-primary a,
:where(html[data-theme="dark"]) .bg-info a,
:where(html[data-theme="dark"]) .bg-warning a,
:where(html[data-theme="dark"]) .bg-danger a,
:where(html[data-theme="dark"]) .bg-primary a:hover,
:where(html[data-theme="dark"]) .bg-info a:hover,
:where(html[data-theme="dark"]) .bg-success a:hover,
:where(html[data-theme="dark"]) .bg-warning a:hover,
:where(html[data-theme="dark"]) .bg-danger a:hover,
:where(html[data-theme="dark"]) .bg-dark a:hover,
:where(html[data-theme="dark"]) .bg-black a:hover {
    color: #fff;
}

:where(html[data-theme="dark"]) .bg-success a {
    color: #eefaf1;
}

:where(html[data-theme="dark"]) .bg-orange a {
    color: #fffefa;
}

:where(html[data-theme="dark"]) .bg-dark a {
    color: #c1c3c9;
}

:where(html[data-theme="dark"]) .bg-black a {
    color: #96abbb;
}

/* ------------------------------------------------------------------ text utilities, re-asserted
 * app.css declares them after the .bg-* utilities, so on an element carrying both (badge bg-black text-white)
 * the text colour wins; restated here after the .bg-* block above to keep that. Shades that would be too dark
 * on a dark surface are lightened, the rest keep their app.css value.
 */

:where(html[data-theme="dark"]) .text-primary,
:where(html[data-theme="dark"]) .text-primary-dk,
:where(html[data-theme="dark"]) .text-primary-dker {
    color: #a196e0;
}

:where(html[data-theme="dark"]) a.text-primary:hover {
    color: #bdb5ea;
}

:where(html[data-theme="dark"]) .text-primary-lt {
    color: #8278c2;
}

:where(html[data-theme="dark"]) .text-primary-lter {
    color: #9289ca;
}

:where(html[data-theme="dark"]) a.text-info:hover,
:where(html[data-theme="dark"]) .text-info-dk {
    color: #19a9d5;
}

:where(html[data-theme="dark"]) .text-info {
    color: #23b7e5;
}

:where(html[data-theme="dark"]) .text-info-lt {
    color: #3abee8;
}

:where(html[data-theme="dark"]) .text-info-lter {
    color: #51c6ea;
}

:where(html[data-theme="dark"]) .text-info-dker {
    color: #1797be;
}

:where(html[data-theme="dark"]) .text-success {
    color: #27c24c;
}

:where(html[data-theme="dark"]) .text-success-lt {
    color: #2ed556;
}

:where(html[data-theme="dark"]) .text-success-lter {
    color: #43d967;
}

:where(html[data-theme="dark"]) a.text-success:hover,
:where(html[data-theme="dark"]) .text-success-dk,
:where(html[data-theme="dark"]) .text-success-dker {
    color: #4fd270;
}

:where(html[data-theme="dark"]) a.text-warning:hover,
:where(html[data-theme="dark"]) .text-warning-dk {
    color: #f9d21a;
}

:where(html[data-theme="dark"]) .text-warning {
    color: #fad733;
}

:where(html[data-theme="dark"]) .text-warning-lt {
    color: #fbdc4c;
}

:where(html[data-theme="dark"]) .text-warning-lter {
    color: #fbe165;
}

:where(html[data-theme="dark"]) .text-warning-dker {
    color: #f4ca06;
}

:where(html[data-theme="dark"]) .text-warning-even-more-dker {
    color: #da8d03;
}

:where(html[data-theme="dark"]) .text-danger {
    color: #f46a6a;
}

:where(html[data-theme="dark"]) .text-danger-lt {
    color: #f26767;
}

:where(html[data-theme="dark"]) .text-danger-lter {
    color: #f47f7f;
}

:where(html[data-theme="dark"]) a.text-danger:hover,
:where(html[data-theme="dark"]) .text-danger-dk,
:where(html[data-theme="dark"]) .text-danger-dker {
    color: #f47b7b;
}

:where(html[data-theme="dark"]) .text-dark,
:where(html[data-theme="dark"]) .text-dark-dk,
:where(html[data-theme="dark"]) .text-dark-dker,
:where(html[data-theme="dark"]) a.text-dark:hover {
    color: var(--dm-text-strong);
}

:where(html[data-theme="dark"]) .text-dark-lt,
:where(html[data-theme="dark"]) .text-dark-lter {
    color: var(--dm-text);
}

:where(html[data-theme="dark"]) .text-dark-green {
    color: #5fcf7d;
}

:where(html[data-theme="dark"]) .text-dark-red {
    color: #ff7a7a;
}

:where(html[data-theme="dark"]) .text-white {
    color: #fff;
}

:where(html[data-theme="dark"]) .text-muted {
    color: #98a6ad;
}

/* ------------------------------------------------------------------ labels and badges
 * Informational chips get a translucent tint of their colour with light text of the same hue instead of a
 * saturated fill; buttons stay solid so actions still read as actions.
 */

:where(html[data-theme="dark"]) :is(.label, .badge):is(.bg-primary, .bg-info, .bg-success, .bg-warning, .bg-danger, .bg-orange, .bg-dark, .bg-black),
:where(html[data-theme="dark"]) .label:is(.label-default, .label-primary, .label-info, .label-success, .label-warning, .label-danger) {
    text-shadow: none;
}

:where(html[data-theme="dark"]) :is(.label, .badge).bg-primary {
    color: #c4bdf0;
    background-color: rgba(114, 102, 186, 0.2);
    box-shadow: inset 0 0 0 1px rgba(114, 102, 186, 0.38);
}

:where(html[data-theme="dark"]) :is(.label, .badge).bg-info,
:where(html[data-theme="dark"]) .label.label-info {
    color: #9fdcf2;
    background-color: rgba(35, 183, 229, 0.2);
    box-shadow: inset 0 0 0 1px rgba(35, 183, 229, 0.38);
}

:where(html[data-theme="dark"]) :is(.label, .badge).bg-success,
:where(html[data-theme="dark"]) .label.label-success {
    color: #9be3ae;
    background-color: rgba(39, 194, 76, 0.2);
    box-shadow: inset 0 0 0 1px rgba(39, 194, 76, 0.38);
}

:where(html[data-theme="dark"]) :is(.label, .badge).bg-warning,
:where(html[data-theme="dark"]) .label.label-warning {
    color: #f3d97a;
    background-color: rgba(250, 215, 51, 0.2);
    box-shadow: inset 0 0 0 1px rgba(250, 215, 51, 0.38);
}

:where(html[data-theme="dark"]) :is(.label, .badge).bg-danger,
:where(html[data-theme="dark"]) .label.label-danger {
    color: #f6aaaa;
    background-color: rgba(240, 80, 80, 0.2);
    box-shadow: inset 0 0 0 1px rgba(240, 80, 80, 0.38);
}

:where(html[data-theme="dark"]) :is(.label, .badge).bg-orange {
    color: #f7c983;
    background-color: rgba(250, 178, 51, 0.2);
    box-shadow: inset 0 0 0 1px rgba(250, 178, 51, 0.38);
}

:where(html[data-theme="dark"]) .label.label-primary {
    color: #a9c8ea;
    background-color: rgba(66, 139, 202, 0.2);
    box-shadow: inset 0 0 0 1px rgba(66, 139, 202, 0.38);
}

:where(html[data-theme="dark"]) :is(.label, .badge):is(.bg-dark, .bg-black),
:where(html[data-theme="dark"]) .label.label-default {
    color: #d0d5de;
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

/* On a coloured fill (task tracking bar, active rows) a tint would mix with the fill, so chips stay solid there */

:where(html[data-theme="dark"]) :is(.bg-primary, .bg-info, .bg-success, .bg-warning, .bg-danger, .bg-orange, .list-group-item.active) :is(.label, .badge).bg-primary {
    color: #fff;
    background-color: #5f5696;
    box-shadow: none;
}

:where(html[data-theme="dark"]) :is(.bg-primary, .bg-info, .bg-success, .bg-warning, .bg-danger, .bg-orange, .list-group-item.active) :is(.label, .badge).bg-info {
    color: #fff;
    background-color: #2a7e98;
    box-shadow: none;
}

:where(html[data-theme="dark"]) :is(.bg-primary, .bg-info, .bg-success, .bg-warning, .bg-danger, .bg-orange, .list-group-item.active) :is(.label, .badge).bg-success {
    color: #fff;
    background-color: #2e8443;
    box-shadow: none;
}

:where(html[data-theme="dark"]) :is(.bg-primary, .bg-info, .bg-success, .bg-warning, .bg-danger, .bg-orange, .list-group-item.active) :is(.label, .badge).bg-warning {
    color: #fff;
    background-color: #877419;
    box-shadow: none;
}

:where(html[data-theme="dark"]) :is(.bg-primary, .bg-info, .bg-success, .bg-warning, .bg-danger, .bg-orange, .list-group-item.active) :is(.label, .badge).bg-danger {
    color: #fff;
    background-color: #b54545;
    box-shadow: none;
}

:where(html[data-theme="dark"]) :is(.bg-primary, .bg-info, .bg-success, .bg-warning, .bg-danger, .bg-orange, .list-group-item.active) :is(.label, .badge).bg-orange {
    color: #fff;
    background-color: #986b1c;
    box-shadow: none;
}