/* =====================================================================
   MOTYW CIEMNY (Claude-style)
   Aktywowany przez atrybut  html[data-theme="dark"]  ustawiany w App.razor.
   Komponenty DevExpress przełącza osobno podmiana pliku trybu
   (modes/light.min.css -> modes/dark.min.css) w #dx-theme-mode.
   Ten plik odpowiada za powierzchnie własne aplikacji (chrome, karty,
   kafelki, teksty, obramowania) i jest ładowany jako ostatni, aby
   nadpisywać wcześniejsze, zahardkodowane kolory.
   ===================================================================== */

html[data-theme="dark"] {
    /* Ciepła, przygaszona paleta zbliżona do trybu ciemnego Claude */
    --ld-bg: #1a1917; /* tło strony (najgłębsze) */
    --ld-surface: #262624; /* karty, sekcje, nawigacja, nagłówek */
    --ld-surface-2: #2f2e2c; /* pola, kafelki, drobne powierzchnie */
    --ld-surface-3: #3a3936; /* hover / stan aktywny */
    --ld-border: #3a3936; /* obramowania */
    --ld-border-soft: rgba(255, 255, 255, 0.08);
    --ld-text: #ece9e2; /* tekst podstawowy (złamana biel) */
    --ld-text-muted: #a6a29a; /* tekst drugorzędny */
    --ld-shadow: rgba(0, 0, 0, 0.45);

    /* Nadpisania zmiennych własnych aplikacji (_variables.css) */
    --header-color: #2f2e2c;
    --grid-color: #262624;
    --group-panel-color: #2f2e2c;
    --row-hover: #302f2c;
    --main-color-subtle: #3a2a20;

    color-scheme: dark;
}

/* --- Zmienne Bootstrap (5.1 nie ma natywnego trybu ciemnego) --- */
html[data-theme="dark"] body {
    --bs-body-bg: #1a1917;
    --bs-body-color: #ece9e2;
    --bs-secondary-color: rgba(236, 233, 226, 0.65);
    --bs-secondary-bg: #2f2e2c;
    --bs-tertiary-bg: #262624;
    --bs-border-color: #3a3936;
    --bs-emphasis-color: #ffffff;
    --bs-heading-color: #ece9e2;
    background-color: var(--ld-bg);
    color: var(--ld-text);
}

/* --- Tło głównej strony (nadpisuje obrazek background-yard.png) --- */
html[data-theme="dark"] .page {
    background-image: none !important;
    background-color: var(--ld-bg) !important;
}

/* =====================  NAGŁÓWEK  ===================== */
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .header-navbar {
    background-color: var(--ld-surface) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .header-hamburger {
    color: var(--ld-text) !important;
}

html[data-theme="dark"] .header-breadcrumb-item {
    color: var(--ld-text-muted) !important;
}

html[data-theme="dark"] .header-breadcrumb-current {
    color: var(--ld-text) !important;
}

/* Zamiana logo (ciemne wordmark -> jasne wordmark) */
html[data-theme="dark"] .header-logo-light {
    display: none !important;
}

html[data-theme="dark"] .header-logo-dark {
    display: inline-block !important;
}

/* =====================  BOCZNA NAWIGACJA  ===================== */
html[data-theme="dark"] .logdesk-nav {
    background-color: var(--ld-surface) !important;
    border-color: var(--ld-border) !important;
    box-shadow: 0 8px 25px var(--ld-shadow) !important;
}

html[data-theme="dark"] .logdesk-nav-item {
    color: var(--ld-text) !important;
}

    html[data-theme="dark"] .logdesk-nav-item:hover {
        background: var(--ld-surface-3) !important;
        color: var(--ld-text) !important;
    }

    html[data-theme="dark"] .logdesk-nav-item.is-active {
        background: var(--ld-surface-3) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55) !important;
    }

html[data-theme="dark"] .logdesk-subnav-item {
    color: var(--ld-text-muted) !important;
}

    html[data-theme="dark"] .logdesk-subnav-item:hover {
        background: var(--ld-surface-3) !important;
        color: var(--ld-text) !important;
        box-shadow: none !important;
    }

/* =====================================================================
   IKONY: wszystkie czarne ikony bootstrap-icons (icon-bs-*) -> białe.
   Cała paleta bootstrap-icons to czarne tła-SVG (bez klasy icon-bs-black-),
   więc łapiemy każdą klasę icon-bs-* POZA akcentową icon-bs-primary-*.
   Obejmuje: sidebar, toolbary/komendy DevExpress, breadcrumb, menu profilu,
   przełącznik motywu itd. Filtr identyczny jak w .icon-bs-white-* (więc
   ikony już białe pozostają białe). Strony publiczne/logowania wykluczone,
   bo tam motyw jest wymuszony na jasny (patrz skrypt w App.razor).
   ===================================================================== */
html[data-theme="dark"] [class*="icon-bs-"]:not([class*="icon-bs-primary"]) {
    filter: invert(100%) brightness(115%) contrast(100%) !important;
}

/* =====================  KARTY / SEKCJE / KAFELKI  ===================== */
html[data-theme="dark"] .stats-card,
html[data-theme="dark"] .settings-section,
html[data-theme="dark"] .settings-tile,
html[data-theme="dark"] .live-activity-card,
html[data-theme="dark"] .okapi-integrations-wrapper,
html[data-theme="dark"] .send-order-card,
html[data-theme="dark"] .dashboard-tile {
    background: var(--ld-surface) !important;
    border-color: var(--ld-border) !important;
    box-shadow: 0 8px 25px var(--ld-shadow) !important;
    color: var(--ld-text);
}

html[data-theme="dark"] .settings-tile {
    background: var(--ld-surface-2) !important;
}

    html[data-theme="dark"] .settings-tile:hover,
    html[data-theme="dark"] .stats-card:hover,
    html[data-theme="dark"] .settings-tile.settings-tile-active {
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6) !important;
    }

html[data-theme="dark"] .settings-tile.settings-tile-active {
    outline: 1px solid var(--main-color);
}

/* Teksty w kartach/sekcjach */
html[data-theme="dark"] .settings-tile-text h3,
html[data-theme="dark"] .settings-section-header h2,
html[data-theme="dark"] .stats-card-value,
html[data-theme="dark"] .okapi-integrations-caption,
html[data-theme="dark"] .okapi-integrations-owner,
html[data-theme="dark"] .live-activity-header,
html[data-theme="dark"] .live-activity-title {
    color: var(--ld-text) !important;
}

/* Kafelek skrótu z jasnym tłem ikony (np. Logsoft: bg-light + czarna ikona).
   W dark globalna inwersja ikon zamienia czarną ikonę na białą, a jasne tło
   zostawiłoby białą ikonę na białym = niewidoczną. Dajemy ciemną powierzchnię. */
html[data-theme="dark"] .settings-tile-icon.bg-light,
html[data-theme="dark"] .settings-tile-icon.bg-white {
    background-color: var(--ld-surface-3) !important;
}

html[data-theme="dark"] .settings-tile-text p,
html[data-theme="dark"] .settings-section-header p,
html[data-theme="dark"] .settings-tile-arrow span,
html[data-theme="dark"] .tile-caption,
html[data-theme="dark"] .tile-subcaption,
html[data-theme="dark"] .okapi-integrations-title small,
html[data-theme="dark"] .okapi-integrations-group-title,
html[data-theme="dark"] .live-activity-sub,
html[data-theme="dark"] .live-activity-time,
html[data-theme="dark"] .live-activity-empty {
    color: var(--ld-text-muted) !important;
}

/* Elementy listy aktywności / grupy integracji */
html[data-theme="dark"] .live-activity-item {
    background: var(--ld-surface-2) !important;
}

html[data-theme="dark"] .live-activity-header {
    border-bottom-color: var(--ld-border) !important;
}

html[data-theme="dark"] .okapi-integrations-group {
    background: var(--ld-surface-2) !important;
    border-color: var(--ld-border) !important;
}

html[data-theme="dark"] .okapi-integrations-tile {
    background: var(--ld-surface-2) !important;
    border-color: var(--ld-border) !important;
    box-shadow: 0 8px 22px var(--ld-shadow) !important;
}

html[data-theme="dark"] .okapi-integrations-logo-placeholder {
    background: var(--ld-surface-3) !important;
    color: var(--ld-text-muted) !important;
}

/* =====================  PASKI NARZĘDZI / TOOLBARY  ===================== */
html[data-theme="dark"] .toolbar,
html[data-theme="dark"] .freights-toolbar,
html[data-theme="dark"] .toolbar-integrations,
html[data-theme="dark"] .shortcuts-bar,
html[data-theme="dark"] .shortcuts-bar-orders {
    background-color: var(--ld-surface) !important;
    border-color: var(--ld-border) !important;
    color: var(--ld-text);
}

/* Wyszukiwarka ustawień */
html[data-theme="dark"] .settings-search .settings-search-input.dxbl-text-edit,
html[data-theme="dark"] .settings-search .dxbl-text-edit {
    background-color: var(--ld-surface-2) !important;
}

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

    html[data-theme="dark"] .settings-view-toggle:hover {
        background-color: var(--ld-surface-3) !important;
    }

html[data-theme="dark"] .settings-desc-toggle {
    color: var(--ld-text-muted) !important;
}

/* =====================  PRZEŁĄCZNIK MOTYWU  ===================== */
html[data-theme="dark"] .theme-toggle {
    background-color: var(--ld-surface-2) !important;
    border-color: var(--ld-border) !important;
    color: var(--ld-text) !important;
}

    html[data-theme="dark"] .theme-toggle:hover {
        background-color: var(--ld-surface-3) !important;
        border-color: var(--ld-surface-3) !important;
    }

/* =====================  TYPOGRAFIA / DROBIAZGI  ===================== */
html[data-theme="dark"] .text-muted {
    color: var(--ld-text-muted) !important;
}

html[data-theme="dark"] .dx-header {
    color: var(--ld-text) !important;
}

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

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

/* =====================================================================
   KARTY BOOTSTRAP (.card) — np. karta treści Analytics (Gantt/Logs),
   konfiguracja e-mail, edytor podpisu. Białe tło Bootstrapa -> ciemne.
   ===================================================================== */
html[data-theme="dark"] .card {
    --bs-card-bg: var(--ld-surface);
    --bs-card-color: var(--ld-text);
    --bs-card-border-color: var(--ld-border);
    --bs-card-cap-bg: var(--ld-surface-2);
    background-color: var(--ld-surface) !important;
    color: var(--ld-text) !important;
    border-color: var(--ld-border) !important;
}

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

/* =====================================================================
   ANALITYKA (Statistics/Analytics) — komponenty z własnym scoped CSS
   ===================================================================== */
/* Kafelki KPI i metryki */
html[data-theme="dark"] .kpi-tile,
html[data-theme="dark"] .metric {
    background: var(--ld-surface) !important;
    border-color: var(--ld-border) !important;
    box-shadow: 0 8px 25px var(--ld-shadow) !important;
}

html[data-theme="dark"] .kpi-tile-value,
html[data-theme="dark"] .metric-value,
html[data-theme="dark"] .agent-name,
html[data-theme="dark"] .agent-rate-pct,
html[data-theme="dark"] .agent-num,
html[data-theme="dark"] .trend-col-value {
    color: var(--ld-text) !important;
}

html[data-theme="dark"] .kpi-tile-title,
html[data-theme="dark"] .kpi-trend-note,
html[data-theme="dark"] .metric-label,
html[data-theme="dark"] .stats-card h3,
html[data-theme="dark"] .agents-head,
html[data-theme="dark"] .stats-empty-mini,
html[data-theme="dark"] .trend-col-label {
    color: var(--ld-text-muted) !important;
}

html[data-theme="dark"] .agents-head,
html[data-theme="dark"] .agents-row {
    border-bottom-color: var(--ld-border) !important;
}

html[data-theme="dark"] .agent-rate-track,
html[data-theme="dark"] .metric-icon {
    background: var(--ld-surface-3) !important;
}

/* Przełączniki segmentowe: zakładki analityki + presety zakresu dat */
html[data-theme="dark"] .anav,
html[data-theme="dark"] .stats-toggle,
html[data-theme="dark"] .stats-range-presets {
    background: var(--ld-surface-2) !important;
}

html[data-theme="dark"] .anav-btn,
html[data-theme="dark"] .stats-toggle-btn,
html[data-theme="dark"] .stats-range-btn {
    color: var(--ld-text-muted) !important;
}

    html[data-theme="dark"] .anav-btn:hover,
    html[data-theme="dark"] .stats-toggle-btn:hover,
    html[data-theme="dark"] .stats-range-btn:hover {
        color: var(--ld-text) !important;
    }

    html[data-theme="dark"] .anav-btn.active,
    html[data-theme="dark"] .stats-toggle-btn.active,
    html[data-theme="dark"] .stats-range-btn.active {
        background: var(--ld-surface-3) !important;
        color: var(--ld-text) !important;
    }

/* Pasek narzędzi logów (LogsAdmin) — białe tło -> ciemne */
html[data-theme="dark"] .logs-admin-toolbar {
    background: var(--ld-surface) !important;
    color: var(--ld-text) !important;
}

/* =====================================================================
   WYKRES GANTTA (Frappe Gantt) — SVG rysuje własne białe tło/siatkę
   ===================================================================== */
html[data-theme="dark"] .logdesk-gantt .grid-background,
html[data-theme="dark"] .logdesk-gantt .grid-row {
    fill: var(--ld-surface) !important;
}

    html[data-theme="dark"] .logdesk-gantt .grid-row:nth-child(even) {
        fill: var(--ld-surface-2) !important;
    }

html[data-theme="dark"] .logdesk-gantt .row-line,
html[data-theme="dark"] .logdesk-gantt .tick {
    stroke: var(--ld-border) !important;
}

html[data-theme="dark"] .logdesk-gantt .lower-text,
html[data-theme="dark"] .logdesk-gantt .upper-text {
    fill: var(--ld-text-muted) !important;
}

html[data-theme="dark"] .logdesk-gantt .bar-label {
    fill: var(--ld-text) !important;
}

/* =====================================================================
   PULPIT (Index / Home) — komponenty z własnym scoped CSS
   ===================================================================== */

/* --- Karta karuzeli produktów (np. OK-API) --- */
html[data-theme="dark"] .carousel-wrapper-card,
html[data-theme="dark"] .products-carousel,
html[data-theme="dark"] .products-carousel .dxbl-carousel,
html[data-theme="dark"] .products-carousel .dxbl-carousel-viewport,
html[data-theme="dark"] .products-carousel .dxbl-carousel-slide {
    background: var(--ld-surface) !important;
    border-color: var(--ld-border) !important;
}

html[data-theme="dark"] .product-slide-desc {
    color: var(--ld-text) !important;
}

/* Karuzela: w trybie ciemnym pokazuj ciemne warianty logo (pliki *.dark.png),
   w jasnym — zwykłe. OK-API nie ma wersji ciemnej, więc zostaje na jasnym kaflu. */
.product-slide-img-dark {
    display: none;
}

html[data-theme="dark"] .product-slide-img-light {
    display: none;
}

html[data-theme="dark"] .product-slide-img-dark {
    display: block;
}

html[data-theme="dark"] .product-slide-okapi .product-slide-img {
    background: #f5f4ef;
    border-radius: 10px;
    padding: 8px;
}

/* --- Kalendarz / oś czasu (TimeCell) --- */
html[data-theme="dark"] .timecell-wrapper-card {
    background: var(--ld-surface) !important;
    border-color: var(--ld-border) !important;
}

html[data-theme="dark"] .timecell-loading {
    color: var(--ld-text-muted) !important;
}

/* --- Tablica Kanban --- */
html[data-theme="dark"] .kanban-wrapper-card {
    background: var(--ld-surface) !important;
    border-color: var(--ld-border) !important;
    box-shadow: 0 10px 30px var(--ld-shadow) !important;
}

html[data-theme="dark"] .kanban-wrapper-title,
html[data-theme="dark"] .kanban-wrapper-header {
    color: var(--ld-text) !important;
}

html[data-theme="dark"] .kanban-wrapper-header {
    border-bottom-color: var(--ld-border) !important;
}

html[data-theme="dark"] .kanban-column {
    background: var(--ld-surface-2) !important;
}

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

html[data-theme="dark"] .kanban-status-title {
    color: var(--ld-text) !important;
}

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

html[data-theme="dark"] .kanban-card {
    background: var(--ld-surface-3) !important;
    border-color: var(--ld-border) !important;
}

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

html[data-theme="dark"] .kanban-card-date,
html[data-theme="dark"] .kanban-empty {
    color: var(--ld-text-muted) !important;
}

/* --- Lista moich zgłoszeń (widok listy zamiast Kanban) --- */
html[data-theme="dark"] .mtl-card {
    background: var(--ld-surface) !important;
    border-color: var(--ld-border) !important;
}

html[data-theme="dark"] .mtl-header {
    border-bottom-color: var(--ld-border) !important;
}

html[data-theme="dark"] .mtl-title,
html[data-theme="dark"] .mtl-subject {
    color: var(--ld-text) !important;
}

html[data-theme="dark"] .mtl-chip {
    background: var(--ld-surface-2) !important;
    border-color: var(--ld-border) !important;
    color: var(--ld-text-muted) !important;
}

    html[data-theme="dark"] .mtl-chip:hover {
        background: var(--ld-surface-3) !important;
        color: var(--ld-text) !important;
    }

html[data-theme="dark"] .mtl-head {
    background: var(--ld-surface) !important;
    color: var(--ld-text-muted) !important;
    border-bottom-color: var(--ld-border) !important;
}

html[data-theme="dark"] .mtl-item {
    border-bottom-color: var(--ld-border) !important;
}

    html[data-theme="dark"] .mtl-item:hover {
        background: var(--ld-surface-2) !important;
    }

html[data-theme="dark"] .mtl-id,
html[data-theme="dark"] .mtl-cat,
html[data-theme="dark"] .mtl-time,
html[data-theme="dark"] .mtl-empty {
    color: var(--ld-text-muted) !important;
}

/* --- Panel „Najnowsza aktywność" (wpisy) --- */
html[data-theme="dark"] .la-item {
    border-bottom-color: var(--ld-border) !important;
}

html[data-theme="dark"] .la-title,
html[data-theme="dark"] .la-desc {
    color: var(--ld-text) !important;
}

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

/* --- Powitanie klienta --- */
html[data-theme="dark"] .cw-title {
    color: var(--ld-text) !important;
}

html[data-theme="dark"] .cw-sub {
    color: var(--ld-text-muted) !important;
}

/* =====================================================================
   STRONA KONTA (/settings/user/account) — nowy układ (hero + zakładki)
   ===================================================================== */
html[data-theme="dark"] .account-hero-name {
    color: var(--ld-text) !important;
}

html[data-theme="dark"] .account-hero-email {
    color: var(--ld-text-muted) !important;
}

html[data-theme="dark"] .account-hero-status {
    border-color: var(--ld-surface) !important;
}

/* Przycisk edycji */
html[data-theme="dark"] .account-edit-btn {
    background: var(--ld-surface-2) !important;
    border-color: var(--ld-border) !important;
    color: var(--ld-text) !important;
}

    html[data-theme="dark"] .account-edit-btn:hover {
        background: var(--ld-surface-3) !important;
    }

/* Pola danych */
html[data-theme="dark"] .acc-label {
    color: var(--ld-text-muted) !important;
}

html[data-theme="dark"] .acc-value {
    color: var(--ld-text) !important;
}

html[data-theme="dark"] .acc-field {
    border-bottom-color: var(--ld-border) !important;
}

/* Przypisany pracownik */
html[data-theme="dark"] .acc-assigned {
    background: var(--ld-surface-2) !important;
    border-color: var(--ld-border) !important;
}

html[data-theme="dark"] .acc-assigned-label {
    color: var(--ld-text-muted) !important;
}

html[data-theme="dark"] .acc-assigned-name {
    color: var(--ld-text) !important;
}

/* Pusty stan */
html[data-theme="dark"] .account-empty {
    color: var(--ld-text-muted) !important;
}

/* Parametry — sekcje z wierszami */
html[data-theme="dark"] .param-intro,
html[data-theme="dark"] .param-section-title,
html[data-theme="dark"] .param-row-desc {
    color: var(--ld-text-muted) !important;
}

html[data-theme="dark"] .param-row-title {
    color: var(--ld-text) !important;
}

html[data-theme="dark"] .param-card {
    background: var(--ld-surface-2) !important;
    border-color: var(--ld-border) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .param-row {
    border-bottom-color: var(--ld-border) !important;
}

/* =====================================================================
   ZGŁOSZENIA — panele „Widoki" + lista (Tickets.razor.css)
   ===================================================================== */
html[data-theme="dark"] .tickets-board .col {
    background: var(--ld-surface) !important;
    border-color: var(--ld-border) !important;
}

html[data-theme="dark"] .tickets-board .col-header {
    color: var(--ld-text) !important;
    border-bottom-color: var(--ld-border) !important;
}

html[data-theme="dark"] .tickets-board .col-header .sub {
    color: var(--ld-text-muted) !important;
}

/* Widoki (lewa kolumna) */
html[data-theme="dark"] .views-list .view-item {
    color: var(--ld-text) !important;
}

    html[data-theme="dark"] .views-list .view-item:hover {
        background: var(--ld-surface-2) !important;
    }

    html[data-theme="dark"] .views-list .view-item.active {
        background: rgba(249, 115, 22, 0.16) !important;
        color: #fdba74 !important;
    }

html[data-theme="dark"] .views-list .view-item .v-sub {
    color: var(--ld-text-muted) !important;
}

html[data-theme="dark"] .views-list .view-item .v-icon {
    background: var(--ld-surface-3) !important;
    color: var(--ld-text-muted) !important;
}

html[data-theme="dark"] .views-list .view-item.active .v-icon {
    background: rgba(249, 115, 22, 0.22) !important;
    color: #fdba74 !important;
}

html[data-theme="dark"] .views-list .view-item .v-count {
    background: var(--ld-surface-3) !important;
    color: var(--ld-text) !important;
}
/* aktywny licznik (.v-count) zostaje pomarańczowy — bez zmian */

/* Lista zgłoszeń (środek) */
html[data-theme="dark"] .tickets-list .ticket-item {
    border-bottom-color: var(--ld-border) !important;
}

    html[data-theme="dark"] .tickets-list .ticket-item:hover {
        background: var(--ld-surface-2) !important;
    }

    html[data-theme="dark"] .tickets-list .ticket-item.active {
        background: rgba(249, 115, 22, 0.14) !important;
    }

html[data-theme="dark"] .tickets-list .ticket-item .author,
html[data-theme="dark"] .tickets-list .ticket-item .subject {
    color: var(--ld-text) !important;
}

html[data-theme="dark"] .tickets-list .ticket-item .number,
html[data-theme="dark"] .tickets-list .ticket-item .ticket-badge,
html[data-theme="dark"] .tickets-list .ticket-item .line3,
html[data-theme="dark"] .tickets-list .ticket-item .line3 .last-msg {
    color: var(--ld-text-muted) !important;
}

html[data-theme="dark"] .tickets-list .ticket-item .line3 .date {
    color: var(--ld-text) !important;
}

/* =====================================================================
   POPUPY EDYCJI DevExpress (Role/Użytkownicy/Klienci/Produkty)
   Formularze mają wymuszone `bg-white` — w trybie ciemnym -> powierzchnia
   ===================================================================== */
html[data-theme="dark"] .dxbl-modal-content .bg-white,
html[data-theme="dark"] .dxbl-modal .bg-white {
    background-color: var(--ld-surface) !important;
}

/* Grupy DxFormLayout/panelu z obramowaniem (np. komponent „Logi", w tickecie
   `.ticket-logs .dxbl-group` z jawnym #e6e8eb) — subtelne obramowanie zamiast
   jasnego. Grupy bez ramki są nietknięte (zmiana samego koloru). */
html[data-theme="dark"] .dxbl-form-layout-group,
html[data-theme="dark"] .dxbl-group,
html[data-theme="dark"] .ticket-logs .dxbl-group {
    border-color: var(--ld-border) !important;
}

/* =====================================================================
   SZCZEGÓŁY ZGŁOSZENIA (Detail.razor.css) — powierzchnie i teksty
   ===================================================================== */
/* Główne powierzchnie */
html[data-theme="dark"] .ticket-summary,
html[data-theme="dark"] .ticket-main,
html[data-theme="dark"] .composer,
html[data-theme="dark"] .details-card {
    background: var(--ld-surface) !important;
    border-color: var(--ld-border) !important;
}

html[data-theme="dark"] .ticket-summary {
    border-bottom-color: var(--ld-border) !important;
}

html[data-theme="dark"] .messages {
    background: var(--ld-bg) !important;
}

html[data-theme="dark"] .ticket-tasks {
    background: var(--ld-surface-2) !important;
    border-color: var(--ld-border) !important;
}

html[data-theme="dark"] .composer {
    border-top-color: var(--ld-border) !important;
}

/* Paski narzędzi (toolbary DevExpress w detalu) */
html[data-theme="dark"] .ticket-header-toolbar,
html[data-theme="dark"] .ticket-actions-toolbar {
    background: var(--ld-surface) !important;
    border-bottom-color: var(--ld-border) !important;
}

html[data-theme="dark"] .ticket-header-toolbar .ticket-title-item .dxbl-toolbar-item-text,
html[data-theme="dark"] .ticket-summary-subject,
html[data-theme="dark"] .ticket-tasks-header,
html[data-theme="dark"] .val,
html[data-theme="dark"] .person .meta .name {
    color: var(--ld-text) !important;
}

/* „Pigułki" numeru/pól neutralnych */
html[data-theme="dark"] .ticket-summary-number,
html[data-theme="dark"] .ticket-header-toolbar .ticket-number-item {
    background: var(--ld-surface-3) !important;
    color: var(--ld-text) !important;
}

/* Teksty drugorzędne */
html[data-theme="dark"] .ticket-summary-description,
html[data-theme="dark"] .ticket-task-label,
html[data-theme="dark"] .details-card-header,
html[data-theme="dark"] .details-section-title,
html[data-theme="dark"] .details-subheader .lbl,
html[data-theme="dark"] .details-form .dxbl-flcc,
html[data-theme="dark"] .person .meta .sub,
html[data-theme="dark"] .ticket-tasks-empty,
html[data-theme="dark"] .participants-subheader,
html[data-theme="dark"] .attachment-info {
    color: var(--ld-text-muted) !important;
}

html[data-theme="dark"] .attachment-name {
    color: var(--ld-text) !important;
}

html[data-theme="dark"] .participants-list {
    border-top-color: var(--ld-border) !important;
}

/* Dymki wiadomości */
html[data-theme="dark"] .msg {
    background: var(--ld-surface-2) !important;
    border-color: var(--ld-border) !important;
}

html[data-theme="dark"] .msg .msg-head {
    color: var(--ld-text-muted) !important;
}

html[data-theme="dark"] .msg .msg-head strong,
html[data-theme="dark"] .msg .msg-body {
    color: var(--ld-text) !important;
}

html[data-theme="dark"] .msg.customer {
    background: rgba(59, 130, 246, 0.12) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

    html[data-theme="dark"] .msg.customer .msg-head,
    html[data-theme="dark"] .msg.customer .msg-head strong,
    html[data-theme="dark"] .msg.customer .msg-body,
    html[data-theme="dark"] .msg.customer .msg-toggle {
        color: #bfdbfe !important;
    }

html[data-theme="dark"] .msg.support {
    background: rgba(249, 115, 22, 0.12) !important;
    border-color: rgba(249, 115, 22, 0.3) !important;
}

    html[data-theme="dark"] .msg.support .msg-head,
    html[data-theme="dark"] .msg.support .msg-head strong,
    html[data-theme="dark"] .msg.support .msg-body,
    html[data-theme="dark"] .msg.support .msg-toggle {
        color: #fed7aa !important;
    }

html[data-theme="dark"] .msg.internal {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

html[data-theme="dark"] .msg.system {
    color: var(--ld-text-muted) !important;
}

/* Kompozytor / załączniki / bannery pomocnicze */
html[data-theme="dark"] .composer-memo {
    background: var(--ld-surface-2) !important;
    border-color: var(--ld-border) !important;
}

html[data-theme="dark"] .composer-loader {
    background: rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .attachment-thumb {
    background: var(--ld-surface-3) !important;
    border-color: var(--ld-border) !important;
}

html[data-theme="dark"] .composer-archived {
    background: var(--ld-surface-2) !important;
    border-color: var(--ld-border) !important;
    color: var(--ld-text-muted) !important;
}

/* =====================================================================
   ZGŁOSZENIA — prawy panel szczegółów w /tickets (Tickets.razor.css, .d-*)
   ===================================================================== */
html[data-theme="dark"] .details-panel .d-title,
html[data-theme="dark"] .d-msg-author,
html[data-theme="dark"] .d-msg-body {
    color: var(--ld-text) !important;
}

html[data-theme="dark"] .details-panel .d-meta,
html[data-theme="dark"] .details-panel .d-section h4,
html[data-theme="dark"] .d-msg-head,
html[data-theme="dark"] .d-msg-empty,
html[data-theme="dark"] .details-empty {
    color: var(--ld-text-muted) !important;
}

html[data-theme="dark"] .details-panel .d-section {
    background: var(--ld-surface) !important;
    border-color: var(--ld-border) !important;
    color: var(--ld-text) !important;
}

html[data-theme="dark"] .details-panel .d-messages {
    background: var(--ld-surface) !important;
}

html[data-theme="dark"] .d-msg {
    background: var(--ld-surface-2) !important;
    border-color: var(--ld-border) !important;
}

html[data-theme="dark"] .d-msg.customer {
    background: var(--ld-surface-3) !important;
}

html[data-theme="dark"] .d-msg.support {
    background: rgba(249, 115, 22, 0.12) !important;
    border-color: rgba(249, 115, 22, 0.3) !important;
}

html[data-theme="dark"] .d-msg.internal {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

html[data-theme="dark"] .d-msg.system {
    color: var(--ld-text-muted) !important;
}

/* Zadania ticketa w gridzie (Grid.razor.css) */
html[data-theme="dark"] .grid-tasks {
    background: var(--ld-surface-2) !important;
}

html[data-theme="dark"] .grid-tasks-header,
html[data-theme="dark"] .grid-tasks-empty {
    color: var(--ld-text-muted) !important;
}

/* =====================================================================
   PROJEKTY — szczegóły (Projects/Detail.razor.css, .proj-*)
   ===================================================================== */
html[data-theme="dark"] .proj-title,
html[data-theme="dark"] .proj-desc,
html[data-theme="dark"] .proj-row .val,
html[data-theme="dark"] .gantt-overlay-title {
    color: var(--ld-text) !important;
}

html[data-theme="dark"] .proj-card-header,
html[data-theme="dark"] .proj-hint,
html[data-theme="dark"] .proj-row .lbl {
    color: var(--ld-text-muted) !important;
}

html[data-theme="dark"] .proj-card,
html[data-theme="dark"] .gantt-overlay {
    background: var(--ld-surface) !important;
    border-color: var(--ld-border) !important;
}

html[data-theme="dark"] .proj-row {
    border-bottom-color: var(--ld-border) !important;
}

html[data-theme="dark"] .gantt-overlay-close {
    color: var(--ld-text-muted) !important;
}

    html[data-theme="dark"] .gantt-overlay-close:hover {
        background: var(--ld-surface-2) !important;
        color: var(--ld-text) !important;
    }

/* =====================================================================
   KALENDARZ ZGŁOSZEŃ (TicketCalendar.razor.css)
   ===================================================================== */
html[data-theme="dark"] .ticket-calendar-title,
html[data-theme="dark"] .tc-tooltip-subject {
    color: var(--ld-text) !important;
}

html[data-theme="dark"] .ticket-calendar-legend,
html[data-theme="dark"] .ticket-calendar-loading,
html[data-theme="dark"] .tc-tooltip-due {
    color: var(--ld-text-muted) !important;
}

html[data-theme="dark"] .ticket-calendar-scheduler {
    border-color: var(--ld-border) !important;
}

/* =====================================================================
   PRZYPISANIA PRACOWNIKÓW (WorkerAssignments.razor.css)
   ===================================================================== */
html[data-theme="dark"] .wa-panel {
    background: var(--ld-surface) !important;
    border-color: var(--ld-border) !important;
}

html[data-theme="dark"] .wa-panel-title,
html[data-theme="dark"] .wa-empty {
    color: var(--ld-text-muted) !important;
}

html[data-theme="dark"] .wa-chip {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #a5b4fc !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
}

/* =====================================================================
   UPLOAD ZAŁĄCZNIKÓW (AttachmentUploader.razor.css)
   ===================================================================== */
html[data-theme="dark"] .attachment-uploader-input {
    background: var(--ld-surface-2) !important;
    border-color: var(--ld-border) !important;
}

html[data-theme="dark"] .attachment-uploader-chip {
    background: rgba(249, 115, 22, 0.12) !important;
    border-color: rgba(249, 115, 22, 0.3) !important;
}

html[data-theme="dark"] .attachment-uploader-name {
    color: var(--ld-text) !important;
}

html[data-theme="dark"] .attachment-uploader-size {
    color: var(--ld-text-muted) !important;
}

/* =====================================================================
   PASKI STATYSTYK (StatBars.razor.css)
   ===================================================================== */
html[data-theme="dark"] .stat-bar-label,
html[data-theme="dark"] .stat-bar-value {
    color: var(--ld-text) !important;
}

html[data-theme="dark"] .stat-bar-track {
    background: var(--ld-surface-3) !important;
}

html[data-theme="dark"] .stat-bars-empty {
    color: var(--ld-text-muted) !important;
}

/* Pasek przewijania */
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: #4a4945;
}

    html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
        background-color: #5c5b56;
    }

/* Reconnect modal */
html[data-theme="dark"] .reconnect-modal > div {
    background-color: #1a1917;
    color: var(--ld-text);
}

/* =====================================================================
   EDYCJA SZABLONU E-MAIL (email-templates.css / TemplateEdit.razor)
   ===================================================================== */
html[data-theme="dark"] .email-template-tag-chip {
    background: var(--ld-surface-2) !important;
    border-color: var(--ld-border) !important;
    color: var(--ld-text) !important;
}

    html[data-theme="dark"] .email-template-tag-chip:hover {
        background: var(--ld-surface-3) !important;
        border-color: var(--ld-border) !important;
    }

html[data-theme="dark"] .email-template-tag-chip-token {
    color: var(--ld-text-muted) !important;
}

html[data-theme="dark"] .email-template-tags-group-title,
html[data-theme="dark"] .email-template-attachment-label,
html[data-theme="dark"] .email-template-attachment-only-first {
    color: var(--ld-text-muted) !important;
}

html[data-theme="dark"] .email-account-info .email-account-info-section {
    border-top-color: var(--ld-border) !important;
}

html[data-theme="dark"] .email-account-info dt {
    color: var(--ld-text-muted) !important;
}

/* Gołe inputy Bootstrapa (5.1 nie ma trybu ciemnego) — m.in. sloty załączników szablonu */
html[data-theme="dark"] .form-control {
    background-color: var(--ld-surface-2) !important;
    border-color: var(--ld-border) !important;
    color: var(--ld-text) !important;
}

    html[data-theme="dark"] .form-control::placeholder {
        color: var(--ld-text-muted) !important;
    }

    html[data-theme="dark"] .form-control:focus {
        background-color: var(--ld-surface-2) !important;
        color: var(--ld-text) !important;
    }

/* =====================================================================
   HUGERTE (skin oxide-dark jest granatowy #222f3e -> szarość aplikacji).
   UI edytora (menubar/toolbar/statusbar) żyje w głównym DOM (klasy .tox),
   więc nadpisujemy tutaj; tło samej TREŚCI (iframe) ustawia content_style
   w Hugerte.Blazor.js — CSS rodzica nie sięga do wnętrza iframe.
   ===================================================================== */
html[data-theme="dark"] .tox.tox-tinymce {
    border-color: var(--ld-border) !important;
}

html[data-theme="dark"] .tox:not(.tox-tinymce-inline) .tox-editor-header {
    background-color: var(--ld-surface) !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--ld-border) !important;
}

html[data-theme="dark"] .tox .tox-menubar,
html[data-theme="dark"] .tox .tox-toolbar,
html[data-theme="dark"] .tox .tox-toolbar__overflow,
html[data-theme="dark"] .tox .tox-toolbar__primary {
    /* pełny skrót background zeruje też gradientowe separatory skina */
    background: var(--ld-surface) !important;
}

html[data-theme="dark"] .tox .tox-tbtn:hover,
html[data-theme="dark"] .tox .tox-tbtn:focus,
html[data-theme="dark"] .tox .tox-tbtn--enabled,
html[data-theme="dark"] .tox .tox-mbtn:hover,
html[data-theme="dark"] .tox .tox-mbtn:focus,
html[data-theme="dark"] .tox .tox-mbtn--active {
    background: var(--ld-surface-3) !important;
}

html[data-theme="dark"] .tox .tox-statusbar {
    background-color: var(--ld-surface) !important;
    border-top: 1px solid var(--ld-border) !important;
}

html[data-theme="dark"] .tox .tox-edit-area,
html[data-theme="dark"] .tox .tox-edit-area__iframe {
    background-color: var(--ld-surface-2) !important;
}

/* Rozwijane menu edytora (File/Edit/...) renderowane w .tox-silver-sink na <body> */
html[data-theme="dark"] .tox .tox-menu,
html[data-theme="dark"] .tox .tox-collection,
html[data-theme="dark"] .tox .tox-dialog,
html[data-theme="dark"] .tox .tox-dialog__header,
html[data-theme="dark"] .tox .tox-dialog__footer,
html[data-theme="dark"] .tox .tox-pop__dialog {
    background-color: var(--ld-surface) !important;
}

html[data-theme="dark"] .tox .tox-collection__item--active,
html[data-theme="dark"] .tox .tox-collection__item--enabled {
    background-color: var(--ld-surface-3) !important;
}

/* =====================================================================
   TABELE BOOTSTRAPA (m.in. szczegóły okresu rozliczeniowego w DxPopup).
   BS 5.1 hardcoduje ciemny kolor tekstu tabel — na ciemnym tle znika.
   ===================================================================== */
html[data-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ld-text);
    --bs-table-border-color: var(--ld-border);
    --bs-table-striped-color: var(--ld-text);
    --bs-table-hover-color: var(--ld-text);
    color: var(--ld-text) !important;
    border-color: var(--ld-border) !important;
}

    html[data-theme="dark"] .table > :not(caption) > * > * {
        color: var(--ld-text) !important;
        background-color: transparent !important;
        border-bottom-color: var(--ld-border) !important;
    }

    html[data-theme="dark"] .table thead th {
        color: var(--ld-text-muted) !important;
    }