/* Nadpisania powierzchni aplikacji dla motywu ciemnego (data-bs-theme="dark").
   Tokeny kolorów: _variables.css. Kolory komponentów DevExpress i Bootstrapa
   przełącza arkusz Bootstrap 5.3 (color modes) — tutaj tylko własne klasy aplikacji. */

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

    /* Motyw BlazingDark zmniejsza bootstrapowe zaokrąglenia (.2rem) — wyrównanie
       do wartości z motywu jasnego, żeby przyciski, badge i pola wyglądały tak samo. */
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
}

html[data-bs-theme="dark"] body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* Główny layout — jasna grafika tła zastąpiona ciemnym kolorem */
html[data-bs-theme="dark"] .page {
    background-image: none;
    background-color: var(--background-color);
}

/* Pasek boczny */
html[data-bs-theme="dark"] .okapi-nav {
    background-color: var(--surface-color);
    border-color: var(--surface-border-color);
}

/* Baner leży NAD przewijającą się listą, a w ciemnym motywie wrażenie warstwy daje jasność,
   nie cień: to samo tło co panel zlewało pudełko z tym, co pod nim. Cień z jasnego motywu
   jest granatowy, więc tutaj musi być czarny, żeby w ogóle było go widać. */
html[data-bs-theme="dark"] .okapi-sidebar-announcement {
    background-color: var(--surface-color-2);
    border-color: color-mix(in srgb, var(--text-color-muted) 30%, var(--surface-color-2));
    box-shadow: 0 -10px 18px -6px rgba(0, 0, 0, 0.6), 0 8px 25px rgba(0, 0, 0, 0.35);
}

html[data-bs-theme="dark"] .okapi-announcement-rail {
    background-color: var(--link-color);
}

html[data-bs-theme="dark"] .sidebar-collapsed .okapi-announcement-dot {
    background-color: var(--link-color);
    border-color: var(--surface-color-2);
}

/* Inwersja ikon ciemnego motywu jest bardziej specyficzna niż reguła akcentu w site.css,
   więc bez tego nadpisania ikona ogłoszenia robi się szara zamiast pomarańczowej. */
html[data-bs-theme="dark"] .okapi-nav-announcement-item .icon-bs-check-engine {
    filter: var(--main-color-filter) brightness(1.1);
}

html[data-bs-theme="dark"] .okapi-nav-item {
    color: var(--text-color);
}

html[data-bs-theme="dark"] .okapi-subnav-item {
    color: var(--text-color-muted);
}

html[data-bs-theme="dark"] .okapi-subnav-item:hover {
    background: var(--surface-color-2);
    color: var(--text-color);
}

html[data-bs-theme="dark"] .okapi-nav-item:hover,
html[data-bs-theme="dark"] .okapi-nav-item.is-active,
html[data-bs-theme="dark"] .okapi-subnav-item.is-active,
html[data-bs-theme="dark"] .okapi-sidebar-announcement:hover .okapi-nav-announcement-item {
    background: var(--accent-active-bg);
    color: var(--accent-active-color);
}

/* Czarne ikony SVG (tło z pliku) — inwersja, poza wariantami z własnym filtrem koloru */
html[data-bs-theme="dark"] .icon:not([class*="icon-bs-white"]):not([class*="icon-bs-primary"]):not([class*="icon-bs-warning"]),
html[data-bs-theme="dark"] .icon-bs-black-medium,
html[data-bs-theme="dark"] .icon-bs-black-small,
html[data-bs-theme="dark"] .icon-bs-black-xsmall,
html[data-bs-theme="dark"] .icon-bs-black-large,
html[data-bs-theme="dark"] .icon-bs-black-settings,
html[data-bs-theme="dark"] .icon-bs-navbar,
html[data-bs-theme="dark"] .icon-log {
    filter: invert(88%) brightness(105%);
}

/* Ikony na jasnych podkładach nie mogą być inwertowane (biała ikona na białym tle).
   Po przyciemnieniu .bg-light/.bg-white jasne zostają już tylko kółka ikon kafelków. */
html[data-bs-theme="dark"] .settings-tile-icon.bg-light [class*="icon-bs-black"],
html[data-bs-theme="dark"] .settings-tile-icon.bg-white [class*="icon-bs-black"],
html[data-bs-theme="dark"] .settings-tile-icon.bg-light .icon,
html[data-bs-theme="dark"] .settings-tile-icon.bg-white .icon {
    filter: none !important;
}

/* Nagłówki kolumn kanbana — site.css wymusza czarny tekst tylko przy
   .kanban-status-title (color: black !important), reszta ustępuje specyficzności */
html[data-bs-theme="dark"] .kanban-status-title {
    color: var(--text-color) !important;
}

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

html[data-bs-theme="dark"] .kanban-column-count {
    background: var(--surface-color-2);
    color: var(--text-color);
}

/* Kafelki i karty */
html[data-bs-theme="dark"] .stats-card,
html[data-bs-theme="dark"] .kanban-wrapper-card,
html[data-bs-theme="dark"] .settings-tile {
    background: var(--surface-color);
    border-color: var(--surface-border-color);
}

/* Karta opcji w Konto -> Parametry. Same kolory ida z tokenow, wiec zostaje tu
   tylko cien: wartosc z motywu jasnego jest na ciemnym tle niewidoczna. */
html[data-bs-theme="dark"] .param-option:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

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

html[data-bs-theme="dark"] .kanban-column,
html[data-bs-theme="dark"] .kanban-column-kanbanorders {
    background: var(--group-panel-color);
}

html[data-bs-theme="dark"] .kanban-column-header {
    background: var(--header-color);
    border-color: var(--surface-border-color);
}

/* Dashboard: nagłówki paneli, wartości kafelków, wiersze paneli */
html[data-bs-theme="dark"] .key-metrics-header,
html[data-bs-theme="dark"] .live-activity-header,
html[data-bs-theme="dark"] .stats-card-value {
    color: var(--text-color);
}

/* Ujednolicenie ikon w nagłówku — brightness(0) normalizuje szare SVG przed inwersją */
html[data-bs-theme="dark"] .header-navbar .avatar-menu .icon {
    filter: brightness(0) invert(0.92) !important;
}

html[data-bs-theme="dark"] .global-search-panel {
    box-shadow: 0 0.75rem 2.5rem rgba(0, 0, 0, .55);
}

html[data-bs-theme="dark"] .global-search-clear-icon,
html[data-bs-theme="dark"] .global-search-history-remove-icon {
    filter: brightness(0) invert(0.92);
}

/* Ikony paska skrótów dashboardu (własna klasa poza ogólną inwersją) */
html[data-bs-theme="dark"] .icon-bs-shortcuts {
    filter: invert(88%) brightness(105%);
}

/* Paski wierszy gridów (jasne kolory zaszyte w .dx-column-even/odd) */
html[data-bs-theme="dark"] .dx-column-odd {
    background-color: var(--grid-color);
}

html[data-bs-theme="dark"] .dx-column-even {
    background-color: var(--surface-color);
}

html[data-bs-theme="dark"] .dx-hover-row:hover {
    background-color: var(--row-hover);
}

/* Aktywne przyciski toolbara (jasny beż zaszyty w custom.css) */
html[data-bs-theme="dark"] .toolbar-item-active {
    background-color: var(--main-color-subtle);
}

/* Hover przycisków toolbara — widoczny na ciemnym tle; na przycisku aktywnym
   przyciemniamy zamiast rozjaśniać, żeby zaznaczenie nie „znikało”. */
html[data-bs-theme="dark"] .dxbl-toolbar .dxbl-btn:hover,
html[data-bs-theme="dark"] .dxbl-toolbar .dxbl-toolbar-item:hover {
    background-color: var(--surface-color-2);
}

html[data-bs-theme="dark"] .dxbl-toolbar .dxbl-btn.toolbar-item-active:hover,
html[data-bs-theme="dark"] .toolbar-item-active:hover {
    background-color: var(--main-color-subtle-hover);
}

/* Toolbar integracji: hover i zaznaczenie ikony w kolorze firmowym */
html[data-bs-theme="dark"] .toolbar-integrations .dxbl-toolbar-item:hover,
html[data-bs-theme="dark"] .toolbar-integrations .dxbl-btn:hover {
    background-color: var(--surface-color-2);
}

html[data-bs-theme="dark"] .toolbar-integrations .toolbar-item-active,
html[data-bs-theme="dark"] .toolbar-integrations .dxbl-btn.toolbar-item-active {
    background-color: var(--main-color-subtle);
}

/* Kolor primary komponentów DevExpress = kolor firmowy (BlazingDark ma fiolet).
   Wyjątek: LinkButton zawsze renderuje dxbl-btn-primary i dokleja wariant z CssClass,
   więc bez wykluczenia to nadpisanie przykrywało kolor przycisków warning ("Wysyłka")
   — w jasnym motywie odróżnialnych, w ciemnym zlewających się z primary. */
html[data-bs-theme="dark"] .dxbl-btn-primary:not(.dxbl-btn-warning) {
    --dxbl-btn-bg: var(--main-color-filled);
    --dxbl-btn-border-color: var(--main-color-filled);
    --dxbl-btn-hover-bg: #a94f1d;
    --dxbl-btn-hover-border-color: #a94f1d;
    background-color: var(--main-color-filled);
    border-color: var(--main-color-filled);
}

/* Przycisk warning ("Wysylka"): LinkButton renderuje primary i warning naraz, a
   dx-dark-brand.css (generowany, ladowany z motywem) przemalowuje primary na kolor
   firmowy i nie niesie reguly warning - przy rownej specyficznosci wygrywa, wiec
   przycisk gubil swoj kolor. Ten sam arkusz podmienia tez --bs-warning na #fc781b,
   przez co odtworzenie "koloru warning motywu" dawalo odcien inny niz w jasnym.
   Zrodlem prawdy jest firmowy css/bootstrap/bootstrap.min.css: --bs-warning #f4bd61,
   plaski we wszystkich stanach. Selektor dwuklasowy bije regule brandowa niezaleznie
   od kolejnosci plikow. */
html[data-bs-theme="dark"] .dxbl-btn-primary.dxbl-btn-warning {
    --dxbl-btn-bg: #f4bd61;
    --dxbl-btn-border-color: #f4bd61;
    --dxbl-btn-color: #fff;
    --dxbl-btn-hover-bg: #f4bd61;
    --dxbl-btn-hover-border-color: #f4bd61;
    --dxbl-btn-hover-color: #fff;
    --dxbl-btn-active-bg: #f4bd61;
    --dxbl-btn-active-border-color: #f4bd61;
    background-color: #f4bd61;
    border-color: #f4bd61;
}

/* Przyciski wyłączone: w motywie ciemnym kolor "wyblakły" (jaśniejszy odcień akcentu)
   czyta się jako mocniejszy od aktywnego, więc zamiast rozjaśniać — przygaszamy. */
html[data-bs-theme="dark"] .dxbl-btn:disabled:not(.opacity-100):not(:has(.spinner-border)),
html[data-bs-theme="dark"] .dxbl-btn[disabled]:not(.opacity-100):not(:has(.spinner-border)),
html[data-bs-theme="dark"] .dxbl-btn.dxbl-disabled:not(.opacity-100):not(:has(.spinner-border)),
html[data-bs-theme="dark"] .btn:disabled:not(.opacity-100):not(:has(.spinner-border)),
html[data-bs-theme="dark"] .btn.disabled:not(.opacity-100):not(:has(.spinner-border)) {
    opacity: 0.4;
    filter: grayscale(0.55);
}

/* Przyciski DevExpress ze stałymi kolorami */
html[data-bs-theme="dark"] .dxbl-btn-outline {
    background: var(--surface-color) !important;
    border-color: var(--surface-border-color) !important;
    color: var(--text-color) !important;
}

    html[data-bs-theme="dark"] .dxbl-btn-outline:hover {
        background: var(--surface-color-2) !important;
    }

/* Popupy z własnymi klasami */
html[data-bs-theme="dark"] .announcement-popup .dxbl-modal-body {
    background-color: var(--surface-color) !important;
}

html[data-bs-theme="dark"] .announcement-popup-details {
    background-color: var(--surface-color);
}

html[data-bs-theme="dark"] .announcement-popup-header {
    background: linear-gradient(135deg, var(--surface-color-2) 0%, var(--surface-color) 100%);
}

/* Nagłówek aplikacji */
html[data-bs-theme="dark"] .header-navbar,
html[data-bs-theme="dark"] .navbar {
    background-color: var(--surface-color);
}

html[data-bs-theme="dark"] .header-navbar .dxbl-menu {
    --dxbl-menu-bg: transparent;
    background-color: transparent;
}

/* Ikony aktywnej pozycji menu (jasny motyw wymusza filter:none = czarna ikona) */
html[data-bs-theme="dark"] .okapi-subnav-item.is-active .icon-bs-black-small,
html[data-bs-theme="dark"] .okapi-subnav-item.is-active .icon-bs-black-medium,
html[data-bs-theme="dark"] .okapi-nav-item.is-active .icon-bs-black-small,
html[data-bs-theme="dark"] .okapi-nav-item.is-active .icon-bs-black-medium {
    filter: invert(95%) brightness(108%) !important;
}

/* Panele stron: wizard nadawania, analityka, sekcje ustawień/raportów */
html[data-bs-theme="dark"] .send-order-card,
html[data-bs-theme="dark"] .top-products,
html[data-bs-theme="dark"] .settings-section {
    background: var(--surface-color);
    border-color: var(--surface-border-color);
    color: var(--text-color);
}

/* Sam .dxtagbox: klasa settings-search-input trafila kiedys takze na przelacznik
   opisow w ustawieniach (kopia z pola wyszukiwania) i malowala mu tlo pigulki.
   Pole wyszukiwania pokrywa nastepna regula, zawezona do .settings-search. */
html[data-bs-theme="dark"] .dxtagbox {
    background-color: var(--header-color);
    color: var(--text-color);
}

html[data-bs-theme="dark"] .settings-search .settings-search-input.dxbl-text-edit,
html[data-bs-theme="dark"] .settings-search .dxbl-text-edit {
    background-color: var(--header-color);
    border-color: var(--surface-border-color);
    color: var(--text-color);
}

/* Warianty grafik przygotowane pod ciemne tło: w logo rozjaśniony jest napis "API"
   (kolor firmowy bez zmian), a w zastępniku zdjęcia jasne tło zastąpiono
   przezroczystym i rozjaśniono kontury. Podmiana przez CSS, żeby nie duplikować
   sciezek w kilkunastu miejscach markupu. */
html[data-bs-theme="dark"] .header-logo-img {
    content: url("/images/logo-dark.png");
}

html[data-bs-theme="dark"] img[src$="/images/no-image.png"] {
    content: url("/images/no-image-dark.png");
}

/* Przełącznik widoku (lista/kafelki) — bez własnego tła; hover w custom.css
   rozjaśniał przycisk do #f3f4f6, a kolor ikony pozostawał ciemnoszary */
html[data-bs-theme="dark"] .settings-view-toggle {
    background: transparent;
    border-color: var(--surface-border-color);
    color: var(--text-color);
}

html[data-bs-theme="dark"] .settings-view-toggle:hover {
    background-color: var(--surface-color-2);
    border-color: var(--surface-border-color);
}

/* Panele dashboardu */
html[data-bs-theme="dark"] .key-metrics-card,
html[data-bs-theme="dark"] .live-activity-card,
html[data-bs-theme="dark"] .shortcuts-bar {
    background: var(--surface-color);
    border-color: var(--surface-border-color);
    color: var(--text-color);
}

html[data-bs-theme="dark"] .kanban-card {
    background: var(--surface-color-2);
    border-color: var(--surface-border-color);
    color: var(--text-color);
}

html[data-bs-theme="dark"] .kanban-card-id,
html[data-bs-theme="dark"] .kanban-card-value,
html[data-bs-theme="dark"] .kanban-card-customer {
    color: var(--text-color);
}

/* Podkladki pod logotypy nadaje wspolna klasa .logo-plate (custom.css),
   wiec tutaj nie ma juz osobnych regul dla gridow i kanbana. */

/* Statusy i paski akcji rozwiniętych wierszy (starsze markupy z .text-black
   w gridach — Bootstrap daje tam czystą czerń z !important) */
html[data-bs-theme="dark"] .dxbl-grid .text-black,
html[data-bs-theme="dark"] .dxbl-grid .btn.text-black {
    color: var(--text-color) !important;
}

/* Jasne przyciski Bootstrapa w gridach (btn-light nie adaptuje się do dark) */
html[data-bs-theme="dark"] .dxbl-grid .btn-light {
    background-color: var(--surface-color-2);
    border-color: var(--surface-border-color);
    color: var(--text-color);
}

/* Odwiedzone linki w gridach dziedziczyły domyślny fiolet przeglądarki.
   Reguła celowo ograniczona do gridów — nawigacja ma własne kolory. */
html[data-bs-theme="dark"] .dxbl-grid a:visited {
    color: var(--bs-link-color);
}

/* Pasek akcji pod gridem zamówienia */
html[data-bs-theme="dark"] .shortcuts-bar-orders {
    background: var(--surface-color);
    border-color: var(--surface-border-color);
}

/* Hero produktu (jasne tła zaszyte w custom.css) */
html[data-bs-theme="dark"] .product-hero {
    background: var(--surface-color);
}

html[data-bs-theme="dark"] .product-hero-photo {
    background: var(--surface-color-2);
    border-color: var(--surface-border-color);
}

html[data-bs-theme="dark"] .product-hero-photo-empty {
    background: var(--surface-color-2);
    border-color: var(--surface-border-color);
    color: var(--text-color-muted);
}

/* Ciemne loga integracji w pasku filtrów — biały podkład jak w gridzie */
html[data-bs-theme="dark"] .toolbar-integrations img {
    background: #fff;
    border-radius: 4px;
    padding: 1px 3px;
}

html[data-bs-theme="dark"] .integration-info-logo img {
    background-color: var(--logo-plate-bg);
    border-radius: var(--logo-plate-radius);
    padding: 2px 3px;
}

/* Pasek przewijania */
html[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
}

html[data-bs-theme="dark"] ::-webkit-scrollbar-track,
html[data-bs-theme="dark"] ::-webkit-scrollbar-corner {
    background-color: var(--surface-color);
}

    html[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
        background-color: var(--scrollbar-thumb-hover);
    }

/* Bootstrapowe .bg-light/.bg-white nie mają wariantu ciemnego — arkusz nie
   redefiniuje --bs-light-rgb w [data-bs-theme=dark], więc panele i grupy
   formularzy zostają białe. !important jest konieczny, bo Bootstrap deklaruje
   tło z !important. Kółka ikon kafelków celowo zostają jasne. */
html[data-bs-theme="dark"] .bg-light:not(.settings-tile-icon),
html[data-bs-theme="dark"] .bg-white:not(.settings-tile-icon) {
    background-color: var(--surface-color-2) !important;
    color: var(--text-color);
}

/* Strzałki przewijania listy marketplace'ów — jasny akcent #e3b598 zaszyty
   w site.css, ten sam co w pozycjach menu poprawionych wyżej */
html[data-bs-theme="dark"] .okapi-marketplaces-scroll:hover {
    background: var(--accent-active-bg);
}

/* Bliźniacza klasa zaznaczenia toolbara — .toolbar-item-active była już
   poprawiona, .toolbar-item-selected została z jasnym beżem z custom.css */
html[data-bs-theme="dark"] .toolbar-item-selected,
html[data-bs-theme="dark"] .dxbl-btn.toolbar-item-selected {
    background-color: var(--main-color-subtle);
}

html[data-bs-theme="dark"] .toolbar-item-selected:hover {
    background-color: var(--main-color-subtle-hover);
}

html[data-bs-theme="dark"] .toolbar-integrations .dxbl-btn.toolbar-item-selected,
html[data-bs-theme="dark"] .toolbar-integrations .toolbar-item-selected {
    background-color: var(--main-color-subtle) !important;
}

html[data-bs-theme="dark"] .toolbar-integrations .dxbl-btn.toolbar-item-selected:hover,
html[data-bs-theme="dark"] .toolbar-integrations .toolbar-item-selected:hover {
    background-color: var(--main-color-subtle-hover) !important;
}

/* Popup ogłoszeń: poprawiony był tylko nagłówek i kontener — ciało, stopka
   i bloki kodu mają własne jasne tła w custom.css */
html[data-bs-theme="dark"] .announcement-popup-content {
    background-color: var(--surface-color);
    color: var(--text-color);
}

html[data-bs-theme="dark"] .announcement-popup-title,
html[data-bs-theme="dark"] .announcement-popup-content h1,
html[data-bs-theme="dark"] .announcement-popup-content h2,
html[data-bs-theme="dark"] .announcement-popup-content h3,
html[data-bs-theme="dark"] .announcement-popup-content h4,
html[data-bs-theme="dark"] .announcement-popup-content h5,
html[data-bs-theme="dark"] .announcement-popup-content h6 {
    color: var(--text-color);
}

html[data-bs-theme="dark"] .announcement-popup-content code,
html[data-bs-theme="dark"] .announcement-popup-content pre {
    background-color: var(--surface-color-2);
}

html[data-bs-theme="dark"] .announcement-popup-footer {
    background-color: var(--header-color);
    border-top-color: var(--surface-border-color);
}

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

/* Tresc ogloszenia to MarkupString z bazy - autor osadza w niej wlasne tla
   i kolory (plakietka rozdzialu, kolka numerow krokow, wyroznienia, ramka
   "gdzie je znalezc"). Kolorowych blokow CELOWO nie neutralizujemy: kazdy niesie
   tlo razem z pasujacym do niego kolorem tekstu, wiec jest czytelny na dowolnej
   powierzchni, a zdjecie ich odbieraloby ogloszeniu cala strukture.

   Gasimy natomiast BIALE tla. Autor opakowuje tresc we wlasny kontener z bialym
   tlem, zagniezdzony glebiej niz dziecko bezposrednie, wiec reset z custom.css
   (`.announcement-popup-content > div|p|section`) go nie obejmuje.

   Kazdy warunek zawiera nazwe wlasciwosci. Wczesniej biel byla szukana w calym
   atrybucie `style` obok osobnego `[style*="background"]`, wiec kolka numerow
   krokow - `background:<kolor>; color:#fff` - wpadaly w regule przez sam kolor
   tekstu: tracily wypelnienie i zostawaly biale cyfry na jasnej ramce.

   Wartosc musi byc domknieta srednikiem albo koncem atrybutu (`$=`), bo samo
   `#fff` lapaloby tez `#fffaf0`, czyli kremowe tlo ramki z uwaga. Nawias `)`
   domyka zapis `rgb(...)` sam z siebie.

   Flaga `i` na koncu kazdego warunku jest konieczna: selektory atrybutow
   porownuja wartosci z uwzglednieniem wielkosci liter, wiec bez niej `#FFFFFF`
   albo `WHITE` przechodzilyby bokiem. Osobno stary atrybut `bgcolor`, ktorym
   biel niosa tabele wklejane z edytorow pocztowych. */
html[data-bs-theme="dark"] .announcement-popup-content :is(
        [style*="background:#ffffff;" i],
        [style*="background:#fff;" i],
        [style*="background:white;" i],
        [style*="background:rgb(255,255,255)" i],
        [style*="background:rgb(255, 255, 255)" i],
        [style*="background: #ffffff;" i],
        [style*="background: #fff;" i],
        [style*="background: white;" i],
        [style*="background: rgb(255,255,255)" i],
        [style*="background: rgb(255, 255, 255)" i],
        [style*="background-color:#ffffff;" i],
        [style*="background-color:#fff;" i],
        [style*="background-color:white;" i],
        [style*="background-color:rgb(255,255,255)" i],
        [style*="background-color:rgb(255, 255, 255)" i],
        [style*="background-color: #ffffff;" i],
        [style*="background-color: #fff;" i],
        [style*="background-color: white;" i],
        [style*="background-color: rgb(255,255,255)" i],
        [style*="background-color: rgb(255, 255, 255)" i],
        [style$="background:#ffffff" i],
        [style$="background:#fff" i],
        [style$="background:white" i],
        [style$="background: #ffffff" i],
        [style$="background: #fff" i],
        [style$="background: white" i],
        [style$="background-color:#ffffff" i],
        [style$="background-color:#fff" i],
        [style$="background-color:white" i],
        [style$="background-color: #ffffff" i],
        [style$="background-color: #fff" i],
        [style$="background-color: white" i],
        [bgcolor="#ffffff" i],
        [bgcolor="#fff" i],
        [bgcolor="white" i]) {
    background-color: transparent !important;
}

/* Po zgaszeniu bialej karty tekst autora, dobrany pod jasne tlo, zostaje ciemny
   na ciemnym. Kolor przestawiamy wzorcem, ktorego HugeRTE (fork TinyMCE) uzywa
   w content.min.css swojej ciemnej skorki: stosuj swoje tylko tam, gdzie autor
   nic nie ustawil.

   Element z wlasnym tlem (plakietka, kolko kroku, ramka z uwaga) dostal od
   autora tlo RAZEM z pasujacym kolorem tekstu, wiec jest czytelny sam z siebie -
   i jego wnetrze tez pomijamy, zeby nie rozjechac tej pary.

   Wyjatek od wyjatku, i to on jest tu kluczowy: biala karta opakowujaca CALA
   tresc tez ma `background`, wiec naiwne `:not([style*=background] *)`
   wykluczalo wszystko, co w niej siedzi - czyli caly tekst. Dlatego pomijamy
   wnetrze tylko tych elementow, ktorych tla NIE gasimy wyzej. */
html[data-bs-theme="dark"] .announcement-popup-content
    *:not([style*="background" i]):not(:is([style*="background" i]:not(:is(
        [style*="background:#ffffff;" i],
        [style*="background:#fff;" i],
        [style*="background:white;" i],
        [style*="background:rgb(255,255,255)" i],
        [style*="background:rgb(255, 255, 255)" i],
        [style*="background: #ffffff;" i],
        [style*="background: #fff;" i],
        [style*="background: white;" i],
        [style*="background: rgb(255,255,255)" i],
        [style*="background: rgb(255, 255, 255)" i],
        [style*="background-color:#ffffff;" i],
        [style*="background-color:#fff;" i],
        [style*="background-color:white;" i],
        [style*="background-color:rgb(255,255,255)" i],
        [style*="background-color:rgb(255, 255, 255)" i],
        [style*="background-color: #ffffff;" i],
        [style*="background-color: #fff;" i],
        [style*="background-color: white;" i],
        [style*="background-color: rgb(255,255,255)" i],
        [style*="background-color: rgb(255, 255, 255)" i],
        [style$="background:#ffffff" i],
        [style$="background:#fff" i],
        [style$="background:white" i],
        [style$="background: #ffffff" i],
        [style$="background: #fff" i],
        [style$="background: white" i],
        [style$="background-color:#ffffff" i],
        [style$="background-color:#fff" i],
        [style$="background-color:white" i],
        [style$="background-color: #ffffff" i],
        [style$="background-color: #fff" i],
        [style$="background-color: white" i],
        [bgcolor="#ffffff" i],
        [bgcolor="#fff" i],
        [bgcolor="white" i]))) *):not(a):not(img):not(svg) {
    color: var(--text-color) !important;
}

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

html[data-bs-theme="dark"] .announcement-popup-meta {
    color: var(--text-color-muted);
}

/* Pływający pasek ukrytego zamówienia (MainLayout) — białe tło z site.css */
html[data-bs-theme="dark"] .hidden-order-bar {
    background: var(--surface-color);
    border-color: var(--surface-border-color);
}

html[data-bs-theme="dark"] .hidden-order-number {
    color: var(--text-color);
}

/* Nagłówek panelu produktów — własna deklaracja color: black w custom.css
   przebija kolor dziedziczony z .top-products */
html[data-bs-theme="dark"] .top-products-header {
    color: var(--text-color);
}

/* Wiersze kart kanbana — własna deklaracja koloru w site.css,
   której nie przykryła reguła dla .kanban-card */
/* Identyfikator w kafelku kanbana to odnosnik, wiec bierze kolor tekstu
   odnosnikow, a nie tlo podswietlenia wiersza. */
html[data-bs-theme="dark"] .kanban-id-link {
    color: var(--link-color);
}

html[data-bs-theme="dark"] .kanban-card-row {
    color: var(--text-color);
}

/* Panele „Najnowsza aktywność" i „Kluczowe metryki" — płaskie wpisy z ikoną w kwadracie.
   Kwadraty ikon zostają jasne jak w motywie jasnym; kreski i teksty idą za tokenami motywu. */
html[data-bs-theme="dark"] .live-activity-header,
html[data-bs-theme="dark"] .key-metrics-header {
    border-bottom-color: var(--surface-border-color);
}

html[data-bs-theme="dark"] .la-header-icon,
html[data-bs-theme="dark"] .km-header-icon {
    background-color: var(--text-color);
}

html[data-bs-theme="dark"] .la-item,
html[data-bs-theme="dark"] .km-item {
    border-bottom-color: var(--surface-border-color);
}

html[data-bs-theme="dark"] .la-title,
html[data-bs-theme="dark"] .la-desc,
html[data-bs-theme="dark"] .km-title,
html[data-bs-theme="dark"] .km-value {
    color: var(--text-color);
}

html[data-bs-theme="dark"] .la-ref,
html[data-bs-theme="dark"] .la-meta,
html[data-bs-theme="dark"] .la-author,
html[data-bs-theme="dark"] .la-time,
html[data-bs-theme="dark"] .la-dot,
html[data-bs-theme="dark"] .la-empty {
    color: var(--text-color-muted);
}

html[data-bs-theme="dark"] .km-trend-positive {
    color: var(--bs-success-text-emphasis);
}

html[data-bs-theme="dark"] .km-trend-negative {
    color: var(--bs-danger-text-emphasis);
}

/* Miniatury galerii i wartości faktów w hero produktu — pominięte przy
   poprawianiu .product-hero-photo */
html[data-bs-theme="dark"] .product-hero-thumb {
    background: var(--surface-color-2);
    border-color: var(--surface-border-color);
}

html[data-bs-theme="dark"] .product-hero-thumb-more {
    background: var(--surface-color-2);
    color: var(--text-color-muted);
}

html[data-bs-theme="dark"] .product-hero-fact b {
    color: var(--text-color);
}

/* Kafelki usług — białe płytki i pastelowe kółka ikon z custom.css */
html[data-bs-theme="dark"] .service-info-tile {
    background: var(--surface-color);
    border-color: var(--surface-border-color);
    color: var(--text-color);
}

html[data-bs-theme="dark"] .service-icon,
html[data-bs-theme="dark"] .service-icon--default,
html[data-bs-theme="dark"] .service-icon--api,
html[data-bs-theme="dark"] .service-icon--sync,
html[data-bs-theme="dark"] .service-icon--print,
html[data-bs-theme="dark"] .service-icon--bridge,
html[data-bs-theme="dark"] .service-icon--local {
    background: var(--surface-color-2);
}

html[data-bs-theme="dark"] .service-info-empty {
    background: var(--surface-color-2);
    color: var(--text-color);
}

/* Węzły diagramu automatyzacji, tło płótna i kolor połączeń opisuje już
   custom.css tokenami motywu, więc nie ma tu czego nadpisywać. Zostaje sam
   cień karty: wariant z custom.css jest liczony pod jasne tło i na ciemnym
   robi wokół kart szarą obwódkę zamiast cienia. */
html[data-bs-theme="dark"] .automation-node {
    box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

/* Oprawa strony pomocy (spis treści, wyniki wyszukiwania) — własne białe tła
   z custom.css. Sama treść pomocy ma ciemny wariant w help-content.css,
   razem z obszarem edycji HugeRTE. */
html[data-bs-theme="dark"] .toc-container,
html[data-bs-theme="dark"] .search-result-item {
    background: var(--surface-color);
    border-color: var(--surface-border-color);
    color: var(--text-color);
}

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

/* Pinned details toolbar */
html[data-bs-theme="dark"] .details-toolbar-pinned {
    box-shadow: 0 5px 12px -4px rgba(0, 0, 0, 0.55);
}

html[data-bs-theme="dark"] .help-toc-scroll:hover,
html[data-bs-theme="dark"] .help-toc-sidebar .toc-link:hover,
html[data-bs-theme="dark"] .search-result-item:hover {
    background-color: var(--surface-color-2);
}

html[data-bs-theme="dark"] .help-toc-sidebar .toc-link.toc-level-1,
html[data-bs-theme="dark"] .help-toc-sidebar .toc-link.toc-level-2 {
    color: var(--text-color);
}

html[data-bs-theme="dark"] .help-toc-sidebar .toc-link.is-active {
    background-color: var(--accent-active-bg);
    color: var(--accent-active-color);
}

/* Formularz konfiguracji Hub — białe tło przykładu i szary tekst etykiet
   zaszyte w devexpress.css */
html[data-bs-theme="dark"] .hub-config-form .hub-config-keys-example pre {
    background: var(--surface-color-2);
    color: var(--text-color);
}

html[data-bs-theme="dark"] .hub-config-form .hub-config-label,
html[data-bs-theme="dark"] .hub-config-form .hub-config-keys-table td {
    color: var(--text-color-muted);
}

/* Kafelki zadań powtarzających się. Style leżą w izolowanym arkuszu
   RecurringTasks.razor.css z zaszytymi jasnymi wartościami; atrybut zakresu
   Blazor trafia tylko na ostatni człon selektora (.rt-card[b-cpioay7909]),
   więc prefiks motywu wygrywa specyficznością bez !important. */
html[data-bs-theme="dark"] .rt-card {
    background-color: var(--surface-color);
    border-color: var(--surface-border-color);
}

html[data-bs-theme="dark"] .rt-card:hover,
html[data-bs-theme="dark"] .rt-card:focus-visible {
    border-color: var(--main-color);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
}

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

html[data-bs-theme="dark"] .rt-card-off .rt-card-title {
    color: var(--text-color-muted);
}

/* Kwadrat ikony: aktywny na akcent firmowy zamiast indygo, wyłączony miał
   jasnoszare tło (#e5e7eb) świecące na ciemnej karcie */
html[data-bs-theme="dark"] .rt-card-icon {
    background: linear-gradient(135deg, var(--main-color), var(--main-color-hover));
}

html[data-bs-theme="dark"] .rt-card-off .rt-card-icon {
    background: var(--surface-color-2);
}

/* Etykieta statusu („Aktywne” zielona, „Wyłączone” szara) i chipy harmonogramu */
html[data-bs-theme="dark"] .rt-badge {
    background: #14352a;
    color: #6ee7b7;
}

html[data-bs-theme="dark"] .rt-card-off .rt-badge,
html[data-bs-theme="dark"] .rt-chip {
    background: var(--surface-color-2);
    color: var(--text-color-muted);
}

/* Stopka karty: nagłówki kolumn i ich wartości */
html[data-bs-theme="dark"] .rt-meta {
    border-top-color: var(--surface-border-color);
}

html[data-bs-theme="dark"] .rt-meta dt {
    color: var(--text-color-muted);
}

html[data-bs-theme="dark"] .rt-meta dd {
    color: var(--text-color);
}

html[data-bs-theme="dark"] .rt-empty {
    background: var(--surface-color);
    border-color: var(--surface-border-color);
    color: var(--text-color-muted);
}

/* Ekran edycji zadania powtarzającego się (RecurringTaskEdit.razor.css) — ten sam
   zabieg co przy kafelkach listy wyżej: izolowany arkusz ma zaszyte jasne tła,
   przez co panel „Włączone” i kafelki stanu świeciły bielą na ciemnym tle. */
html[data-bs-theme="dark"] .rt-switch,
html[data-bs-theme="dark"] .rt-state-item {
    background: var(--surface-color-2);
    border-color: var(--surface-border-color);
}

html[data-bs-theme="dark"] .rt-switch-title,
html[data-bs-theme="dark"] .rt-state dd {
    color: var(--text-color);
}

html[data-bs-theme="dark"] .rt-switch-hint,
html[data-bs-theme="dark"] .rt-group-title,
html[data-bs-theme="dark"] .rt-time-separator,
html[data-bs-theme="dark"] .rt-state dt,
html[data-bs-theme="dark"] .rt-state-empty {
    color: var(--text-color-muted);
}

html[data-bs-theme="dark"] .rt-group-title {
    border-bottom-color: var(--surface-border-color);
}

/* Kwadrat ikony jak na liście: akcent firmowy zamiast indygo, a wariant
   wyłączony bez jasnoszarego tła */
html[data-bs-theme="dark"] .rt-edit-icon {
    background: linear-gradient(135deg, var(--main-color), var(--main-color-hover));
}

html[data-bs-theme="dark"] .rt-edit-icon-off {
    background: var(--surface-color-2);
}

/* Chipy wybranych właścicieli (OwnersSelector) — szablon taga dokłada
   przyciskowi bootstrapową klasę bg-info, a --bs-info-rgb (40,123,181) zostaje
   niebieskie także w motywie ciemnym. Zawężone do .selected-owners, bo bg-info
   niesie też ikony kafelków i badge statusów w całej aplikacji.
   .bg-info deklaruje !important, więc nadpisanie musi je powtórzyć. */
html[data-bs-theme="dark"] .selected-owners .bg-info {
    background-color: var(--accent-active-bg) !important;
    color: var(--accent-active-color);
}

html[data-bs-theme="dark"] .abc-badge-a {
    background: rgba(52, 211, 153, 0.15);
    border-color: rgba(52, 211, 153, 0.4);
    color: #34D399;
}

html[data-bs-theme="dark"] .abc-badge-b {
    background: rgba(244, 189, 97, 0.15);
    border-color: rgba(244, 189, 97, 0.4);
    color: #f4bd61;
}

html[data-bs-theme="dark"] .abc-badge-c {
    background: color-mix(in srgb, var(--text-color-muted) 15%, transparent);
    border-color: color-mix(in srgb, var(--text-color-muted) 40%, transparent);
    color: color-mix(in srgb, var(--text-color) 50%, var(--text-color-muted));
}

html[data-bs-theme="dark"] .analytics-abc-bar {
    background: var(--surface-border-color);
}

html[data-bs-theme="dark"] .abc-fill-a {
    background: #34D399;
}

html[data-bs-theme="dark"] .abc-fill-c {
    background: var(--chart-faint);
}

html[data-bs-theme="dark"] .analytics-abc-sku,
html[data-bs-theme="dark"] .analytics-abc-stock {
    color: var(--text-color-muted);
}

html[data-bs-theme="dark"] .analytics-days-warn {
    color: #f4bd61;
}

html[data-bs-theme="dark"] .analytics-abc-revenue,
html[data-bs-theme="dark"] .analytics-abc-share {
    color: var(--text-color);
}

/* Wykresy analityki: siatka osi DxChart przyciemniona pod ciemne tlo
   (DevExpress nie daje koloru gridlines w API - nadpisanie stroke na SVG) */
html[data-bs-theme="dark"] .analytics-chart .dxc-grid path,
html[data-bs-theme="dark"] .analytics-chart .dxc-grids-group path {
    stroke: var(--surface-border-color);
}

/* Chipy funkcji edytora wyrazen: czytelny kontrast na ciemnym tle okna */
html[data-bs-theme="dark"] .expr-function-chips .btn-outline-secondary {
    color: var(--bs-body-color, #e8e6dc);
    border-color: var(--surface-border-color, #3d3d38);
}

    html[data-bs-theme="dark"] .expr-function-chips .btn-outline-secondary:hover {
        color: #fff;
        background-color: var(--surface-border-color, #3d3d38);
    }

/* Strona Flow Hub (NewYard). Style w site.css powstaly pod motyw jasny i maja
   zaszyte bialy/kremowy kafel oraz ciemne teksty - w motywie ciemnym naglowki
   sekcji gubily sie w tle, a karty swiecily bielą. Ciemne odpowiedniki opieramy
   na tokenach; wlasne wartosci maja tylko dwie cieple powierzchnie, ktore nie
   maja odpowiednika w palecie. */
html[data-bs-theme="dark"] .flowhub-hero {
    border-color: var(--surface-border-color);
    background: linear-gradient(135deg, var(--surface-color) 0%, #241a12 100%);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

/* Plakietka: drobny tekst, wiec obowiazuje prog 4,5:1 - sam akcent daje na tej
   powierzchni 3,51:1, wariant tekstowy 4,61:1 */
html[data-bs-theme="dark"] .flowhub-hero-badge {
    background: var(--surface-color-2);
    border-color: var(--link-color);
    color: var(--link-color);
}

html[data-bs-theme="dark"] .flowhub-hero-title,
html[data-bs-theme="dark"] .flowhub-section-title,
html[data-bs-theme="dark"] .flowhub-feature-text h3 {
    color: var(--text-color);
}

html[data-bs-theme="dark"] .flowhub-hero-lead,
html[data-bs-theme="dark"] .flowhub-section-lead,
html[data-bs-theme="dark"] .flowhub-feature-text p,
html[data-bs-theme="dark"] .flowhub-contact-text p {
    color: var(--text-color-muted);
}

/* Akcent w roli tekstu: --main-color daje na tym tle 4,10:1, --link-color 5,38:1 */
html[data-bs-theme="dark"] .flowhub-hero-claim,
html[data-bs-theme="dark"] .flowhub-contact-text a {
    color: var(--link-color);
}

html[data-bs-theme="dark"] .flowhub-btn-outline {
    background: var(--surface-color-2);
    border-color: var(--surface-border-color);
    color: var(--text-color);
}

    html[data-bs-theme="dark"] .flowhub-btn-outline:hover {
        border-color: var(--link-color);
        color: var(--link-color);
    }

html[data-bs-theme="dark"] .flowhub-feature,
html[data-bs-theme="dark"] .flowhub-changes li {
    background: var(--surface-color);
    border-color: var(--surface-border-color);
}

html[data-bs-theme="dark"] .flowhub-feature {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

    html[data-bs-theme="dark"] .flowhub-feature:hover {
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5);
    }

html[data-bs-theme="dark"] .flowhub-contact {
    background: #26190f;
    border-color: var(--surface-border-color);
}

/* Nakladka bledu (CustomErrorBoundary). Bootstrap maluje .alert-danger w motywie
   ciemnym nasycona czerwienia z rozowym tekstem, wiec caly panel - razem
   z akapitem i stopka przyciskow - krzyczy jednym kolorem, a akapit w kolorze
   emphasis czyta sie gorzej niz zwykly tekst. Tlo wraca na neutralna powierzchnie,
   czerwien zostaje tam, gdzie niesie znaczenie: w obramowaniu i naglowku.
   Alert bootstrapa czyta kolory ze zmiennych, wiec nadpisujemy zmienne. */
html[data-bs-theme="dark"] .error-overlay-content .alert-danger {
    --bs-alert-bg: var(--surface-color);
    --bs-alert-color: var(--text-color);
    --bs-alert-border-color: #8a2d3b;
}

html[data-bs-theme="dark"] .error-overlay-content .alert-danger .alert-heading {
    color: #ea868f;
}

/* Przyciski drugorzedne w motywie ciemnym.
   Ten build Bootstrapa daje .btn-secondary biale tlo (--bs-btn-bg:#fff), ale
   kolor tekstu i obramowanie ustawia WPROST, nie zmiennymi:
     .btn-secondary { color:#212529 }
     .btn-outline-secondary, .btn-secondary { border-color:#e6e6e6 }
   Dlatego sterowanie samymi zmiennymi --bs-btn-* nie wystarcza - podmienia tlo
   i zostawia niemal czarny napis. Wariant wypelniony swiecil na ciemnych
   stronach biela, a konturowy mial napis nieczytelny na przezroczystym tle.
   Prefiks motywu wygrywa z tamtymi deklaracjami bez !important. */
html[data-bs-theme="dark"] .btn-secondary {
    background-color: var(--surface-color-2);
    border-color: var(--surface-border-color);
    color: var(--text-color);
}

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

/* Stan wylaczony przygasza juz opacity .65 z Bootstrapa - dokladanie do tego
   koloru wyciszonego zbija napis do 3,24:1, sam kolor zwykly daje 5,84:1 */
html[data-bs-theme="dark"] .btn-secondary:disabled,
html[data-bs-theme="dark"] .btn-secondary.disabled {
    background-color: var(--surface-color-2);
    border-color: var(--surface-border-color);
    color: var(--text-color);
}

/* Wariant konturowy zostaje przezroczysty - zmienia sie napis i obramowanie */
html[data-bs-theme="dark"] .btn-outline-secondary {
    border-color: var(--surface-border-color);
    color: var(--text-color);
}

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

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


/* Tablica kanban - elementy dodane razem z przeciaganiem kafelkow. Kolory zaszyte
   w custom.css powstaly pod motyw jasny. */
html[data-bs-theme="dark"] .kanban-column-grip {
    color: var(--text-color-muted);
}

html[data-bs-theme="dark"] .kanban-column-pin:hover,
html[data-bs-theme="dark"] .kanban-column-pin:focus-visible {
    background: rgba(255, 255, 255, .12);
}

html[data-bs-theme="dark"] .kanban-column-placeholder {
    border-color: var(--surface-border-color);
    color: var(--text-color-muted);
}

html[data-bs-theme="dark"] .kanban-drag-ghost {
    box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
}


/* Zakres komorek do kopiowania - na ciemnym tle ta sama barwa potrzebuje wiecej krycia. */
html[data-bs-theme="dark"] .okapi-cell-range {
    background-color: rgba(217, 119, 47, 0.28) !important;
    box-shadow: inset 0 0 0 1px rgba(217, 119, 47, 0.6);
}

html[data-bs-theme="dark"] .btn-index-transport-order {
    background: var(--accent-active-bg) !important;
    color: var(--accent-active-color) !important;
}

html[data-bs-theme="dark"] .hidden-order-restore-btn,
html[data-bs-theme="dark"] .kanban-card-badge {
    background-color: var(--accent-active-bg);
    color: var(--accent-active-color);
}

    html[data-bs-theme="dark"] .hidden-order-restore-btn:hover {
        background-color: var(--main-color);
    }

html[data-bs-theme="dark"] .tile-second {
    background: var(--main-color-subtle);
}

html[data-bs-theme="dark"] .dxbl-btn-dark {
    --dxbl-btn-bg: var(--accent-active-bg);
    --dxbl-btn-border-color: var(--accent-active-bg);
    --dxbl-btn-color: var(--accent-active-color);
    --dxbl-btn-hover-bg: var(--main-color-subtle);
    --dxbl-btn-hover-border-color: var(--main-color-subtle);
    background: var(--accent-active-bg) !important;
    color: var(--accent-active-color) !important;
}

    html[data-bs-theme="dark"] .dxbl-btn-dark:hover {
        background: var(--main-color-subtle) !important;
    }

html[data-bs-theme="dark"] .badge-live {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}

html[data-bs-theme="dark"] .service-test-badge {
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
}

html[data-bs-theme="dark"] .cs-container .sub-button {
    background-color: var(--surface-color-2);
}

html[data-bs-theme="dark"] .user-profile .log-off-btn {
    border-top-color: var(--surface-border-color);
}

html[data-bs-theme="dark"] #blazor-error-ui {
    background: var(--bs-danger-bg-subtle);
    color: var(--text-color);
}

html[data-bs-theme="dark"] .kanban-empty,
html[data-bs-theme="dark"] .kanban-card-order-id,
html[data-bs-theme="dark"] .toc-header h6,
html[data-bs-theme="dark"] .help-toc-sidebar .toc-link.toc-level-3,
html[data-bs-theme="dark"] .help-toc-sidebar .toc-link.toc-level-4,
html[data-bs-theme="dark"] .help-toc-sidebar .toc-link.toc-level-5,
html[data-bs-theme="dark"] .help-toc-sidebar .toc-link.toc-level-6,
html[data-bs-theme="dark"] .search-result-preview,
html[data-bs-theme="dark"] .settings-tile-text p,
html[data-bs-theme="dark"] .settings-tile-arrow span,
html[data-bs-theme="dark"] .settings-desc-toggle,
html[data-bs-theme="dark"] .settings-section-header p,
html[data-bs-theme="dark"] .product-hero-empty-plus,
html[data-bs-theme="dark"] .hub-config-form .hub-config-hint,
html[data-bs-theme="dark"] .hidden-order-label {
    color: var(--text-color-muted);
}

html[data-bs-theme="dark"] .ai-chip-ok,
html[data-bs-theme="dark"] .aiu-chip-ok { background: #1d3326; color: #5cc58e; }
html[data-bs-theme="dark"] .ai-chip-warn,
html[data-bs-theme="dark"] .aiu-chip-warn { background: #3a3019; color: #e2b54f; }
html[data-bs-theme="dark"] .ai-chip-bad,
html[data-bs-theme="dark"] .aiu-chip-bad { background: #3d2226; color: #f07a84; }
html[data-bs-theme="dark"] .ai-valid { color: #5cc58e; }
html[data-bs-theme="dark"] .ai-invalid,
html[data-bs-theme="dark"] .aiu-trend-up { color: #f07a84; }
html[data-bs-theme="dark"] .aiu-trend-down { color: #5cc58e; }
html[data-bs-theme="dark"] .ai-ph,
html[data-bs-theme="dark"] .ai-icon { color: #f3b58a; }

html[data-bs-theme="dark"] .okapi-filter-popup-content .dxbl-text-edit-input,
html[data-bs-theme="dark"] .atw-audit-range .dxbl-text-edit-input,
html[data-bs-theme="dark"] .dxbl-calendar {
    color: var(--text-color);
}