/*
* VisualHelp — motyw jasny / ciemny (Metronic 7 demo1, bez bundlera). Dołączany ZAWSZE (base.html.twig — po arkuszach
* modułów; strony bez logowania i podgląd klienta /t/ też). Reguły ciemnego motywu wyłącznie pod html[data-theme="dark"].
*
* Mechanizm: renderuje serwer (ui_theme()),
* „system” rozstrzyga inline-skrypt templates/_theme_head.html.twig (prefers-color-scheme, także zmiana w locie).
* Przełączanie: VH.setTheme(pref) (public/js/app.js) → atrybut + zapis w profilu + zdarzenie document „vh:theme-changed”
* {detail: {theme, pref}} (np. wykresy ApexCharts przerysowują się w public/js/vh-reports.js).
*
* Zmienne CSS dla modułów (zdefiniowane dla obu motywów — używajcie ich zamiast stałych kolorów w nowych stylach):
* --vh-bg tło strony (za kartami)
* --vh-surface tło kart, nagłówka, modali, paneli
* --vh-surface-2 subtelne wypełnienie w karcie (bg-light, pola „solid”, nagłówki tabel, kod)
* --vh-surface-3 wyróżnienie / hover / przyciski „light”, chipy
* --vh-raised wysuwane warstwy: dropdowny, popovery, podpowiedzi, select2
* --vh-hover tło wiersza/pozycji pod kursorem
* --vh-border obramowania i linie podziału; --vh-border-strong — obramowania pól formularzy
* --vh-text tekst podstawowy; --vh-text-strong — nagłówki, tytuły; --vh-text-2 — drugorzędny (text-dark-50)
* --vh-muted tekst wyciszony (text-muted), ikony
* --vh-input-bg tło pól formularzy; --vh-placeholder — placeholder
* --vh-link linki; --vh-focus — obwódka fokusu
* --vh-tint-{primary,success,info,warning,danger} — tła jasnych wariantów (label-light-*, alert-light-*, btn-light-*)
* --vh-c-{primary,…}[-hover|-on|-text|-text-hover|-tint|-tint-strong|-soft|-strong] — stonowana paleta akcentów
* (opis i wartości jasne: public/css/vh-palette.css; ciemne — niżej)
* --vh-shadow cień kart/warstw
* Dodatkowo nadpisywane w ciemnym zmienne modułów: --vh-line, --vh-muted (vh-issue/vh-board), --vh-private-*
* (notatki prywatne), --vh-board-bg / --vh-cell-bg (tablice), --vh-pref-* (profil → Wygląd).
*/
/* ============================================================ zmienne */
:root {
color-scheme: light;
--vh-bg: #EEF0F8;
--vh-surface: #ffffff;
--vh-surface-2: #F3F6F9;
--vh-surface-3: #EBEDF3;
--vh-raised: #ffffff;
--vh-hover: #F3F6F9;
--vh-border: #EBEDF3;
--vh-border-strong: #E4E6EF;
--vh-text: #3F4254;
--vh-text-strong: #181C32;
--vh-text-2: #7E8299;
--vh-muted: #B5B5C3;
--vh-input-bg: #ffffff;
--vh-placeholder: #B5B5C3;
/* akcenty z palety (public/css/vh-palette.css; wartości zapasowe dla stron bez tej palety) */
--vh-link: var(--vh-c-primary-text, #2967A7);
--vh-focus: color-mix(in srgb, var(--vh-c-primary, #2E6FB3) 45%, transparent);
--vh-tint-primary: var(--vh-c-primary-tint, #E8F2FF);
--vh-tint-success: var(--vh-c-success-tint, #E0F7F3);
--vh-tint-info: var(--vh-c-info-tint, #F0EFFE);
--vh-tint-warning: var(--vh-c-warning-tint, #FFF1E1);
--vh-tint-danger: var(--vh-c-danger-tint, #FFECEC);
--vh-shadow: 0 0 30px 0 rgba(82, 63, 105, .05);
--vh-line: #EBEDF3;
}
html[data-theme="dark"] {
color-scheme: dark;
scrollbar-color: #45455f #1a1a28;
--vh-bg: #151521;
--vh-surface: #1e1e2d;
--vh-surface-2: #252537;
--vh-surface-3: #2d2d42;
--vh-raised: #262639;
--vh-hover: #2a2a3f;
--vh-border: #323248;
--vh-border-strong: #41415a;
--vh-text: #d0d0e0;
--vh-text-strong: #f2f2f8;
--vh-text-2: #a9a9bf;
--vh-muted: #8d8da6;
--vh-input-bg: #191926;
--vh-placeholder: #8d8da6;
--vh-focus: color-mix(in srgb, var(--vh-c-primary-text) 60%, transparent);
--vh-shadow: 0 0 0 1px rgba(255, 255, 255, .02), 0 6px 24px rgba(0, 0, 0, .35);
/* stonowana paleta — ciemne odpowiedniki zmiennych z public/css/vh-palette.css (--vh-link, --vh-tint-* idą za nimi).
Kontrasty: tekst na pełnym tle / kolorowy tekst na karcie (#1e1e2d) / na tint. */
/* primary: 4.9:1 (hover 6.0) / 8.5:1 / 6.8:1 */
--vh-c-primary: #3573B3; --vh-c-primary-hover: #2B65A2; --vh-c-primary-on: #FFFFFF;
--vh-c-primary-text: #8EBFF6; --vh-c-primary-text-hover: #B0D5FE; --vh-c-primary-strong: #B8D8FB;
--vh-c-primary-tint: #1D3249; --vh-c-primary-tint-strong: #254161; --vh-c-primary-soft: #588AC1;
/* success: 5.0:1 (hover 6.0) / 8.8:1 / 6.9:1 */
--vh-c-success: #2A7C72; --vh-c-success-hover: #216E65; --vh-c-success-on: #FFFFFF;
--vh-c-success-text: #78CDC1; --vh-c-success-text-hover: #A1DFD6; --vh-c-success-strong: #ACE1D8;
--vh-c-success-tint: #153733; --vh-c-success-tint-strong: #1C4843; --vh-c-success-soft: #46968B;
/* info: 5.4:1 (hover 6.5) / 8.3:1 / 6.8:1 */
--vh-c-info: #6D5EB0; --vh-c-info-hover: #61529F; --vh-c-info-on: #FFFFFF;
--vh-c-info-text: #B9B1F1; --vh-c-info-text-hover: #D0CAFA; --vh-c-info-strong: #D3CFF7;
--vh-c-info-tint: #302A4C; --vh-c-info-tint-strong: #3F3864; --vh-c-info-soft: #857BBE;
/* danger: 5.3:1 (hover 6.4) / 8.2:1 / 6.7:1 */
--vh-c-danger: #B14A4E; --vh-c-danger-hover: #9E4045; --vh-c-danger-on: #FFFFFF;
--vh-c-danger-text: #EFA3A3; --vh-c-danger-text-hover: #F9C1BF; --vh-c-danger-strong: #F7C7C5;
--vh-c-danger-tint: #482425; --vh-c-danger-tint-strong: #5F2F30; --vh-c-danger-soft: #BB6D6D;
/* warning (ciemny tekst na bursztynie): 7.7:1 (hover 6.4) / 9.3:1 / 7.6:1 */
--vh-c-warning: #E1AD63; --vh-c-warning-hover: #D29C55; --vh-c-warning-on: #321F0E;
--vh-c-warning-text: #EDBA7A; --vh-c-warning-text-hover: #F9D09D; --vh-c-warning-strong: #F5D1A5;
--vh-c-warning-tint: #3E2C15; --vh-c-warning-tint-strong: #533A18; --vh-c-warning-soft: #B88848;
--vh-switch-off: #3a3a52;
--vh-switch-knob: #c8c8da;
--vh-switch-outline: #5a5a75;
--vh-switch-outline-knob: #a9a9bf;
/* zmienne modułów */
--vh-line: #323248;
--vh-private-bg: #2c2414;
--vh-private-border: #6b5220;
--vh-private-text: var(--vh-c-warning-text);
--vh-board-bg: #1e1e2d;
--vh-cell-bg: #252537;
--vh-pref-bg: #1e1e2d;
--vh-pref-border: #41415a;
--vh-pref-muted: #8d8da6;
--vh-pref-accent: var(--vh-c-primary-text);
--vh-pref-active-bg: var(--vh-c-primary-tint);
--vh-strip-hover-bg: var(--vh-c-primary-tint);
--vh-strip-text: #a9a9bf;
--vh-strip-count-bg: #2d2d42;
--vh-modal-backdrop: rgba(0, 0, 0, .65);
--vh-modal-bg: #151521;
--vh-modal-close-bg: #2d2d42;
--vh-modal-close-color: #a9a9bf;
--vh-embed-bg: #151521;
--vh-embed-bar-bg: #1e1e2d;
--vh-embed-title: #f2f2f8;
}
/* bez „fali” animowanych przejść w chwili przełączenia motywu */
html.vh-theme-switching *, html.vh-theme-switching *::before, html.vh-theme-switching *::after { transition: none !important; }
/* ============================================================ przełącznik motywu (oba motywy) */
.vh-theme-heading { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--vh-muted); margin-bottom: .5rem; }
.vh-theme-switch { display: flex; gap: .25rem; padding: .25rem; border-radius: .6rem; background: var(--vh-surface-2); }
.vh-theme-option {
flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .3rem;
padding: .5rem .25rem .4rem; border: 0; border-radius: .45rem; background: transparent; color: var(--vh-text-2);
font-size: .8rem; font-weight: 500; line-height: 1.2; cursor: pointer; transition: background-color .15s, color .15s, box-shadow .15s;
}
.vh-theme-option i { font-size: 1rem; color: inherit; }
.vh-theme-option:hover { color: var(--vh-text-strong); background: var(--vh-hover); }
.vh-theme-option:focus { outline: none; }
.vh-theme-option:focus-visible { box-shadow: 0 0 0 2px var(--vh-focus); }
.vh-theme-option.active { background: var(--vh-surface); color: var(--vh-c-primary-text); box-shadow: 0 1px 3px rgba(24, 28, 50, .12); font-weight: 600; }
html[data-theme="dark"] .vh-theme-option.active { background: var(--vh-surface-3); color: var(--vh-c-primary-text); box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
/* Profil → Wygląd: miniatury motywów */
.vh-theme-option-card { min-width: 190px; }
.vh-theme-preview {
flex: 0 0 46px; height: 34px; border-radius: .35rem; overflow: hidden; display: grid;
grid-template-columns: 11px 1fr; grid-template-rows: 9px 1fr; box-shadow: 0 0 0 1px rgba(24, 28, 50, .15);
}
.vh-theme-preview > span:nth-child(1) { grid-row: 1 / 3; background: #1e1e2d; }
.vh-theme-preview > span:nth-child(2) { background: #ffffff; border-bottom: 1px solid #EBEDF3; }
.vh-theme-preview > span:nth-child(3) { background: #EEF0F8; }
.vh-theme-preview-dark > span:nth-child(1) { background: #12121c; }
.vh-theme-preview-dark > span:nth-child(2) { background: #1e1e2d; border-bottom-color: #323248; }
.vh-theme-preview-dark > span:nth-child(3) { background: #151521; }
.vh-theme-preview-system > span:nth-child(2) { background: linear-gradient(135deg, #ffffff 50%, #1e1e2d 50%); }
.vh-theme-preview-system > span:nth-child(3) { background: linear-gradient(135deg, #EEF0F8 50%, #151521 50%); }
html[data-theme="dark"] .vh-theme-preview { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
/* ============================================================ CIEMNY: podstawy */
html[data-theme="dark"] body,
html[data-theme="dark"] #kt_body { background: var(--vh-bg); color: var(--vh-text); }
html[data-theme="dark"] a { color: var(--vh-link); }
html[data-theme="dark"] a:hover { color: var(--vh-c-primary-text-hover); }
/* fokus z klawiatury zawsze widoczny (Metronic gasi outline przez !important) */
html[data-theme="dark"] a:focus-visible,
html[data-theme="dark"] .btn:focus-visible,
html[data-theme="dark"] button:focus-visible,
html[data-theme="dark"] [tabindex]:focus-visible,
html[data-theme="dark"] .custom-control-input:focus-visible ~ .custom-control-label::before,
html[data-theme="dark"] .checkbox > input:focus-visible ~ span,
html[data-theme="dark"] .switch input:focus-visible ~ span::before { outline: 2px solid var(--vh-c-primary-text) !important; outline-offset: 2px; }
html[data-theme="dark"] .aside-menu .menu-nav .menu-item > .menu-link:focus-visible { outline: none !important; box-shadow: inset 0 0 0 2px var(--vh-c-primary-text); }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] .h1, html[data-theme="dark"] .h2, html[data-theme="dark"] .h3,
html[data-theme="dark"] .h4, html[data-theme="dark"] .h5, html[data-theme="dark"] .h6 { color: var(--vh-text-strong); }
html[data-theme="dark"] hr { border-top-color: var(--vh-border); }
html[data-theme="dark"] ::selection { background: color-mix(in srgb, var(--vh-c-primary) 45%, transparent); color: #fff; }
/* tekst */
html[data-theme="dark"] .text-dark { color: var(--vh-text-strong) !important; }
html[data-theme="dark"] .text-dark-75, html[data-theme="dark"] .text-body { color: var(--vh-text) !important; }
html[data-theme="dark"] .text-dark-65 { color: #bdbdd0 !important; }
html[data-theme="dark"] .text-dark-50 { color: var(--vh-text-2) !important; }
html[data-theme="dark"] .text-dark-25 { color: #6f6f88 !important; }
html[data-theme="dark"] .text-muted { color: var(--vh-muted) !important; }
html[data-theme="dark"] .text-black-50 { color: rgba(255, 255, 255, .55) !important; }
html[data-theme="dark"] .text-primary { color: var(--vh-c-primary-text) !important; }
html[data-theme="dark"] .text-info { color: var(--vh-c-info-text) !important; }
html[data-theme="dark"] .text-danger { color: var(--vh-c-danger-text) !important; }
html[data-theme="dark"] .text-hover-primary:hover, html[data-theme="dark"] a.text-hover-primary:hover { color: var(--vh-c-primary-text) !important; }
html[data-theme="dark"] .text-hover-dark:hover, html[data-theme="dark"] .text-hover-dark-75:hover { color: var(--vh-text-strong) !important; }
html[data-theme="dark"] .text-hover-primary:hover i { color: var(--vh-c-primary-text) !important; }
html[data-theme="dark"] .text-gray-500, html[data-theme="dark"] .text-gray-600 { color: var(--vh-muted) !important; }
html[data-theme="dark"] .text-gray-700, html[data-theme="dark"] .text-gray-800 { color: var(--vh-text) !important; }
/* tła i obramowania */
html[data-theme="dark"] .bg-white { background-color: var(--vh-surface) !important; }
html[data-theme="dark"] .bg-light, html[data-theme="dark"] .bg-gray-100 { background-color: var(--vh-surface-2) !important; }
html[data-theme="dark"] .bg-gray-200 { background-color: var(--vh-border) !important; }
html[data-theme="dark"] .bg-gray-300 { background-color: var(--vh-border-strong) !important; }
html[data-theme="dark"] .bg-light-primary { background-color: var(--vh-tint-primary) !important; }
html[data-theme="dark"] .bg-light-success { background-color: var(--vh-tint-success) !important; }
html[data-theme="dark"] .bg-light-info { background-color: var(--vh-tint-info) !important; }
html[data-theme="dark"] .bg-light-warning { background-color: var(--vh-tint-warning) !important; }
html[data-theme="dark"] .bg-light-danger { background-color: var(--vh-tint-danger) !important; }
html[data-theme="dark"] .bg-light-dark, html[data-theme="dark"] .bg-light-secondary { background-color: var(--vh-surface-3) !important; }
html[data-theme="dark"] .bg-hover-light:hover, html[data-theme="dark"] .bg-hover-gray-100:hover { background-color: var(--vh-hover) !important; }
html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-right,
html[data-theme="dark"] .border-bottom, html[data-theme="dark"] .border-left,
html[data-theme="dark"] .border-light, html[data-theme="dark"] .border-secondary { border-color: var(--vh-border) !important; }
html[data-theme="dark"] .separator.separator-solid { border-bottom-color: var(--vh-border); }
html[data-theme="dark"] .separator.separator-dashed { border-bottom-color: var(--vh-border); }
html[data-theme="dark"] .shadow-sm, html[data-theme="dark"] .shadow { box-shadow: var(--vh-shadow) !important; }
/* ============================================================ layout */
html[data-theme="dark"] .header,
html[data-theme="dark"] .header.header-fixed { background-color: var(--vh-surface); box-shadow: none; border-bottom: 1px solid var(--vh-border); }
html[data-theme="dark"] .header-fixed .header { box-shadow: none; }
html[data-theme="dark"] .subheader.subheader-solid { background-color: var(--vh-surface); border-top-color: var(--vh-border); border-bottom: 1px solid var(--vh-border); }
html[data-theme="dark"] .header-fixed.subheader-fixed .subheader { box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
html[data-theme="dark"] .content { background-color: var(--vh-bg); }
html[data-theme="dark"] .footer { background-color: var(--vh-surface) !important; border-top: 1px solid var(--vh-border); }
html[data-theme="dark"] .aside { background-color: #1a1a28; border-right: 1px solid var(--vh-border); }
html[data-theme="dark"] .brand { background-color: #161622; }
html[data-theme="dark"] .aside-menu { background-color: #1a1a28; }
html[data-theme="dark"] .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-heading,
html[data-theme="dark"] .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link { background-color: #232336; }
html[data-theme="dark"] .aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link { background-color: #232336; }
html[data-theme="dark"] .aside-menu .menu-nav > .menu-section .menu-text { color: #8a8aa5; }
html[data-theme="dark"] .aside-menu .menu-nav > .menu-item > .menu-link .menu-text { color: #a2a3b7; }
html[data-theme="dark"] .scrolltop { background-color: var(--vh-c-primary); }
html[data-theme="dark"] .topbar .topbar-item .btn.btn-clean:hover:not(.btn-text),
html[data-theme="dark"] .topbar .show > .topbar-item .btn.btn-clean,
html[data-theme="dark"] .topbar .topbar-item .btn.btn-clean.active { background-color: var(--vh-surface-3); }
@media (max-width: 991.98px) {
html[data-theme="dark"] .topbar, html[data-theme="dark"] .topbar-mobile-on .topbar { background-color: var(--vh-surface); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); border-top: 1px solid var(--vh-border); }
html[data-theme="dark"] .header-mobile { background-color: #161622; }
}
html[data-theme="dark"] .vh-quick-search .form-control { background-color: var(--vh-surface-2); }
html[data-theme="dark"] .input-group.input-group-solid { background-color: var(--vh-surface-2); border-color: var(--vh-surface-2); }
html[data-theme="dark"] .input-group.input-group-solid .input-group-text,
html[data-theme="dark"] .input-group.input-group-solid .form-control { background-color: transparent; border-color: transparent; color: var(--vh-text); }
html[data-theme="dark"] .subheader-separator.bg-gray-200 { background-color: var(--vh-border) !important; }
/* ============================================================ karty */
html[data-theme="dark"] .card { background-color: var(--vh-surface); border-color: var(--vh-border); color: var(--vh-text); }
html[data-theme="dark"] .card.card-custom { box-shadow: var(--vh-shadow); }
html[data-theme="dark"] .card .card { background-color: var(--vh-surface); }
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card.card-custom > .card-header { background-color: transparent; border-bottom-color: var(--vh-border); }
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .card.card-custom > .card-footer { background-color: transparent; border-top-color: var(--vh-border); }
html[data-theme="dark"] .card.card-custom > .card-header .card-title,
html[data-theme="dark"] .card.card-custom > .card-header .card-title .card-label,
html[data-theme="dark"] .card-title { color: var(--vh-text-strong); }
html[data-theme="dark"] .card.card-custom > .card-header .card-title .card-label small { color: var(--vh-muted); }
html[data-theme="dark"] .card.card-custom.card-border { border-color: var(--vh-border); }
/* ============================================================ tabele + DataTables */
html[data-theme="dark"] .table { color: var(--vh-text); }
html[data-theme="dark"] .table th, html[data-theme="dark"] .table td { border-top-color: var(--vh-border); }
html[data-theme="dark"] .table thead th, html[data-theme="dark"] .table thead td { border-bottom-color: var(--vh-border); color: var(--vh-text-2); }
html[data-theme="dark"] .table.table-head-custom thead tr,
html[data-theme="dark"] .table.table-head-custom thead th { color: var(--vh-muted) !important; }
html[data-theme="dark"] .table.table-head-bg thead tr, html[data-theme="dark"] .table.table-head-bg thead th { background-color: var(--vh-surface-2); }
html[data-theme="dark"] .table-hover tbody tr:hover { color: var(--vh-text); background-color: var(--vh-hover); }
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .025); }
html[data-theme="dark"] .table-bordered, html[data-theme="dark"] .table-bordered th, html[data-theme="dark"] .table-bordered td { border-color: var(--vh-border); }
html[data-theme="dark"] .table-light, html[data-theme="dark"] .table-light > th, html[data-theme="dark"] .table-light > td,
html[data-theme="dark"] .thead-light th { background-color: var(--vh-surface-2); color: var(--vh-text); border-color: var(--vh-border); }
html[data-theme="dark"] .table-active, html[data-theme="dark"] .table-active > th, html[data-theme="dark"] .table-active > td { background-color: var(--vh-surface-3); }
html[data-theme="dark"] table.dataTable { color: var(--vh-text); }
html[data-theme="dark"] table.dataTable tbody tr { background-color: transparent; }
html[data-theme="dark"] table.dataTable.table-hover tbody tr:hover,
html[data-theme="dark"] table.dataTable.display tbody tr:hover { background-color: var(--vh-hover); }
html[data-theme="dark"] table.dataTable tbody tr.selected, html[data-theme="dark"] table.dataTable tbody tr.selected td { background-color: var(--vh-tint-primary); }
html[data-theme="dark"] table.dataTable thead th, html[data-theme="dark"] table.dataTable thead td,
html[data-theme="dark"] table.dataTable.no-footer { border-bottom-color: var(--vh-border); }
html[data-theme="dark"] .dataTables_wrapper .dataTable th, html[data-theme="dark"] .dataTables_wrapper .dataTable td { color: var(--vh-text); }
html[data-theme="dark"] .dataTables_wrapper .dataTable tfoot th, html[data-theme="dark"] .dataTables_wrapper .dataTable thead th { color: var(--vh-text-strong); }
html[data-theme="dark"] .dataTables_wrapper .dataTable tbody tr.active, html[data-theme="dark"] .dataTables_wrapper .dataTable tbody tr.selected,
html[data-theme="dark"] .dataTables_wrapper .dataTable tbody tr.active td, html[data-theme="dark"] .dataTables_wrapper .dataTable tbody tr.selected td { background-color: var(--vh-tint-primary); border-color: var(--vh-tint-primary); color: var(--vh-text); }
html[data-theme="dark"] .dataTables_wrapper .dataTable .group th, html[data-theme="dark"] .dataTables_wrapper .dataTable .group td { background-color: var(--vh-surface-2); }
html[data-theme="dark"] .dataTables_wrapper .dataTables_pager .dataTables_info, html[data-theme="dark"] .dataTables_wrapper .dataTables_pager .dataTables_length label,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item > .page-link > i { color: var(--vh-text-2); }
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item:hover:not(.disabled) > .page-link > i,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item.active > .page-link > i { color: #fff; }
html[data-theme="dark"] .dataTables_wrapper .child .dtr-details > li .dtr-title, html[data-theme="dark"] .dataTables_wrapper .child .dtr-details > li .dtr-data { border-bottom-color: var(--vh-border); }
html[data-theme="dark"] .dataTables_wrapper .dataTables_info { color: var(--vh-muted); }
html[data-theme="dark"] .dataTables_wrapper .dataTables_length label,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter label { color: var(--vh-text-2); }
html[data-theme="dark"] .dataTables_wrapper .dataTables_processing {
background: var(--vh-raised); color: var(--vh-text); border: 1px solid var(--vh-border); box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item .page-link,
html[data-theme="dark"] .pagination .page-item .page-link,
html[data-theme="dark"] .page-link { background-color: transparent; border-color: transparent; color: var(--vh-text-2); }
html[data-theme="dark"] .pagination .page-item:not(.active):not(.disabled) .page-link:hover { background-color: var(--vh-surface-3); color: var(--vh-c-primary-text); }
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item:hover:not(.disabled) > .page-link { background-color: var(--vh-c-primary); color: #fff; }
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link,
html[data-theme="dark"] .pagination .page-item.active .page-link { background-color: var(--vh-c-primary); border-color: var(--vh-c-primary); color: #fff; }
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item.disabled .page-link,
html[data-theme="dark"] .pagination .page-item.disabled .page-link { background-color: transparent; color: #6d6d88; opacity: 1; }
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item.previous > .page-link,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item.next > .page-link,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item.first > .page-link,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item.last > .page-link { background-color: var(--vh-surface-2); }
html[data-theme="dark"] .dataTables_wrapper .dataTables_empty,
html[data-theme="dark"] table.dataTable td.dataTables_empty { color: var(--vh-muted); }
html[data-theme="dark"] table.dataTable > tbody > tr.child ul.dtr-details > li { border-bottom-color: var(--vh-border); }
html[data-theme="dark"] table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
html[data-theme="dark"] table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before { background-color: var(--vh-c-primary); border-color: var(--vh-surface); box-shadow: none; }
html[data-theme="dark"] table.dataTable thead .sorting:after, html[data-theme="dark"] table.dataTable thead .sorting_asc:after,
html[data-theme="dark"] table.dataTable thead .sorting_desc:after, html[data-theme="dark"] table.dataTable thead .sorting:before,
html[data-theme="dark"] table.dataTable thead .sorting_asc:before, html[data-theme="dark"] table.dataTable thead .sorting_desc:before { color: var(--vh-muted); }
/* ============================================================ formularze */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] .custom-file-label { background-color: var(--vh-input-bg); border-color: var(--vh-border-strong); color: var(--vh-text); }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .custom-select:focus { background-color: var(--vh-input-bg); border-color: var(--vh-c-primary-soft); color: var(--vh-text-strong); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--vh-c-primary) 22%, transparent); }
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] input::placeholder { color: var(--vh-placeholder); opacity: 1; }
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .custom-select:disabled { background-color: #22222f; border-color: var(--vh-border); color: var(--vh-text-2); opacity: 1; }
html[data-theme="dark"] .form-control.form-control-solid { background-color: var(--vh-surface-2); border-color: var(--vh-surface-2); color: var(--vh-text); }
html[data-theme="dark"] .form-control.form-control-solid:focus,
html[data-theme="dark"] .form-control.form-control-solid:active { background-color: var(--vh-surface-3); border-color: var(--vh-surface-3); color: var(--vh-text-strong); }
html[data-theme="dark"] .form-control.form-control-solid::placeholder { color: var(--vh-placeholder); }
html[data-theme="dark"] .form-control.is-invalid, html[data-theme="dark"] .was-validated .form-control:invalid,
html[data-theme="dark"] .custom-select.is-invalid { border-color: var(--vh-c-danger); }
html[data-theme="dark"] .form-control.is-valid { border-color: var(--vh-c-success); }
html[data-theme="dark"] .invalid-feedback { color: var(--vh-c-danger-text); }
html[data-theme="dark"] .form-control option, html[data-theme="dark"] select option { background-color: var(--vh-raised); color: var(--vh-text); }
html[data-theme="dark"] select.form-control { color-scheme: dark; }
html[data-theme="dark"] .custom-select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23a9a9bf' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
background-repeat: no-repeat; background-position: right .75rem center; background-size: 8px 10px;
}
html[data-theme="dark"] .input-group-text { background-color: var(--vh-surface-2); border-color: var(--vh-border-strong); color: var(--vh-text-2); }
html[data-theme="dark"] .input-group-text i { color: var(--vh-muted); }
html[data-theme="dark"] label, html[data-theme="dark"] .col-form-label, html[data-theme="dark"] legend,
html[data-theme="dark"] .form-group label { color: var(--vh-text); }
html[data-theme="dark"] .form-text { color: var(--vh-muted); }
html[data-theme="dark"] fieldset { border-color: var(--vh-border); }
html[data-theme="dark"] .custom-file-label::after { background-color: var(--vh-surface-3); color: var(--vh-text); border-color: var(--vh-border-strong); }
/* Metronic: checkbox / radio / switch */
html[data-theme="dark"] .checkbox > span,
html[data-theme="dark"] .radio > span { background-color: #3a3a52; border-color: transparent; }
html[data-theme="dark"] .checkbox:hover > input:not(:checked):not([disabled]) ~ span,
html[data-theme="dark"] .radio:hover > input:not(:checked):not([disabled]) ~ span { background-color: #45455f; }
html[data-theme="dark"] .checkbox > input:checked ~ span { background-color: var(--vh-c-primary); }
html[data-theme="dark"] .checkbox > input:checked ~ span:after { border-color: #fff; }
html[data-theme="dark"] .checkbox.checkbox-outline > span,
html[data-theme="dark"] .radio.radio-outline > span { background-color: transparent; border-color: var(--vh-border-strong); }
html[data-theme="dark"] .checkbox.checkbox-disabled, html[data-theme="dark"] .radio.radio-disabled { opacity: .55; }
html[data-theme="dark"] .radio > input:checked ~ span { background-color: var(--vh-c-primary); }
html[data-theme="dark"] .radio > input:checked ~ span:after { background-color: #fff; }
html[data-theme="dark"] .checkbox, html[data-theme="dark"] .radio { color: var(--vh-text); }
html[data-theme="dark"] .switch input:empty ~ span:before { background-color: #3a3a52; }
html[data-theme="dark"] .switch input:empty ~ span:after { background-color: #c8c8da; opacity: .85; }
html[data-theme="dark"] .switch input:checked ~ span:after { background-color: #fff; opacity: 1; }
html[data-theme="dark"] .switch.switch-outline input:empty ~ span:before { background-color: transparent; border-color: var(--vh-border-strong); }
html[data-theme="dark"] .switch.switch-primary:not(.switch-outline) input:checked ~ span:before { background-color: var(--vh-c-primary); }
html[data-theme="dark"] .switch.switch-success:not(.switch-outline) input:checked ~ span:before { background-color: var(--vh-c-success); }
html[data-theme="dark"] .switch.switch-warning:not(.switch-outline) input:checked ~ span:before { background-color: var(--vh-c-warning); }
html[data-theme="dark"] .switch input:disabled ~ span { opacity: .5; }
/* Bootstrap custom-control */
html[data-theme="dark"] .custom-control-label::before { background-color: var(--vh-input-bg); border-color: #5a5a75; }
html[data-theme="dark"] .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--vh-c-primary); border-color: var(--vh-c-primary); }
html[data-theme="dark"] .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--vh-c-primary) 30%, transparent); }
html[data-theme="dark"] .custom-control-input:disabled ~ .custom-control-label::before { background-color: #22222f; }
html[data-theme="dark"] .custom-switch .custom-control-label::after { background-color: #8d8da6; }
html[data-theme="dark"] .custom-switch .custom-control-input:checked ~ .custom-control-label::after { background-color: #fff; }
html[data-theme="dark"] input[type="color"] { background-color: var(--vh-input-bg); border-color: var(--vh-border-strong); }
/* ============================================================ select2 */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple { background-color: var(--vh-input-bg); border-color: var(--vh-border-strong); }
html[data-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--multiple,
html[data-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--single,
html[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--multiple,
html[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--vh-c-primary-soft); }
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered { color: var(--vh-text); }
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__placeholder,
html[data-theme="dark"] .select2-container--default .select2-search--inline .select2-search__field::placeholder { color: var(--vh-placeholder); }
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: var(--vh-muted); }
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow:after,
html[data-theme="dark"] .select2-container--default .select2-selection__clear { color: var(--vh-muted); }
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--vh-surface-3); color: var(--vh-text); border-color: transparent; }
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--vh-muted); }
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: var(--vh-c-danger-text); }
html[data-theme="dark"] .select2-container--default .select2-search--inline .select2-search__field { color: var(--vh-text); }
html[data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--single,
html[data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--multiple { background-color: #22222f; }
html[data-theme="dark"] .select2-dropdown { background-color: var(--vh-raised); border-color: var(--vh-border-strong); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); color: var(--vh-text); }
html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field { background-color: var(--vh-input-bg); border-color: var(--vh-border-strong); color: var(--vh-text); }
html[data-theme="dark"] .select2-container--default .select2-results__option { color: var(--vh-text); }
html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true],
html[data-theme="dark"] .select2-container--default .select2-results__option--selected { background-color: var(--vh-surface-3); color: var(--vh-text-strong); }
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[data-selected],
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted { background-color: #34344d; color: var(--vh-text-strong); }
html[data-theme="dark"] .select2-container--default .select2-results__option[aria-disabled=true] { color: #5c5c75; }
html[data-theme="dark"] .select2-container--default .select2-results__group { color: var(--vh-muted); }
html[data-theme="dark"] .select2-container--default .select2-results__message { color: var(--vh-muted); }
/* ============================================================ dropdowny, navi */
html[data-theme="dark"] .dropdown-menu { background-color: var(--vh-raised); color: var(--vh-text); border: 1px solid var(--vh-border); box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .dropdown-item, html[data-theme="dark"] .dropdown-item-text { color: var(--vh-text); }
html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { color: var(--vh-text-strong); background-color: var(--vh-hover); }
html[data-theme="dark"] .dropdown-item.active, html[data-theme="dark"] .dropdown-item:active { color: #fff; background-color: var(--vh-c-primary); }
html[data-theme="dark"] .dropdown-item.disabled, html[data-theme="dark"] .dropdown-item:disabled { color: #62627c; }
html[data-theme="dark"] .dropdown-divider { border-top-color: var(--vh-border); }
html[data-theme="dark"] .dropdown-header { color: var(--vh-muted); }
html[data-theme="dark"] .dropdown-menu .rounded-top.bg-light { background-color: var(--vh-surface-2) !important; }
html[data-theme="dark"] .navi .navi-item .navi-link { color: var(--vh-text); }
html[data-theme="dark"] .navi .navi-item .navi-link .navi-text { color: var(--vh-text); }
html[data-theme="dark"] .navi .navi-item .navi-link .navi-icon i { color: var(--vh-muted); }
html[data-theme="dark"] .navi .navi-item .navi-link .navi-icon svg g [fill] { fill: var(--vh-muted); }
html[data-theme="dark"] .navi.navi-hover .navi-item .navi-link:hover,
html[data-theme="dark"] .navi.navi-active .navi-item .navi-link.active { background-color: var(--vh-hover); }
html[data-theme="dark"] .navi.navi-hover .navi-item .navi-link:hover .navi-text,
html[data-theme="dark"] .navi.navi-hover .navi-item .navi-link:hover .navi-icon i,
html[data-theme="dark"] .navi.navi-active .navi-item .navi-link.active .navi-text,
html[data-theme="dark"] .navi.navi-active .navi-item .navi-link.active .navi-icon i { color: var(--vh-c-primary-text); }
html[data-theme="dark"] .navi .navi-separator { border-bottom-color: var(--vh-border); }
html[data-theme="dark"] .navi .navi-header, html[data-theme="dark"] .navi .navi-section { color: var(--vh-muted); }
/* ============================================================ modale, popovery, tooltipy */
html[data-theme="dark"] .modal-content { background-color: var(--vh-surface); color: var(--vh-text); border: 1px solid var(--vh-border); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
html[data-theme="dark"] .modal-header { border-bottom-color: var(--vh-border); }
html[data-theme="dark"] .modal-footer { border-top-color: var(--vh-border); }
html[data-theme="dark"] .modal-header .modal-title, html[data-theme="dark"] .modal-title { color: var(--vh-text-strong); }
html[data-theme="dark"] .modal-backdrop.show { opacity: .7; }
html[data-theme="dark"] .modal .modal-header .close span, html[data-theme="dark"] .modal .modal-header .close i,
html[data-theme="dark"] .close { color: var(--vh-text-2); text-shadow: none; }
html[data-theme="dark"] .close:hover, html[data-theme="dark"] .modal .modal-header .close:hover i { color: var(--vh-text-strong); }
html[data-theme="dark"] .modal .modal-header .close:before { color: var(--vh-text-2); }
html[data-theme="dark"] .popover { background-color: var(--vh-raised); border: 1px solid var(--vh-border-strong); box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .popover-header { background-color: var(--vh-raised); border-bottom-color: var(--vh-border); color: var(--vh-text-strong); }
html[data-theme="dark"] .popover-body { color: var(--vh-text); }
html[data-theme="dark"] .bs-popover-top > .arrow::after, html[data-theme="dark"] .bs-popover-auto[x-placement^="top"] > .arrow::after { border-top-color: var(--vh-raised); }
html[data-theme="dark"] .bs-popover-bottom > .arrow::after, html[data-theme="dark"] .bs-popover-auto[x-placement^="bottom"] > .arrow::after { border-bottom-color: var(--vh-raised); }
html[data-theme="dark"] .bs-popover-left > .arrow::after, html[data-theme="dark"] .bs-popover-auto[x-placement^="left"] > .arrow::after { border-left-color: var(--vh-raised); }
html[data-theme="dark"] .bs-popover-right > .arrow::after, html[data-theme="dark"] .bs-popover-auto[x-placement^="right"] > .arrow::after { border-right-color: var(--vh-raised); }
html[data-theme="dark"] .bs-popover-top > .arrow::before, html[data-theme="dark"] .bs-popover-auto[x-placement^="top"] > .arrow::before { border-top-color: var(--vh-border-strong); }
html[data-theme="dark"] .bs-popover-bottom > .arrow::before, html[data-theme="dark"] .bs-popover-auto[x-placement^="bottom"] > .arrow::before { border-bottom-color: var(--vh-border-strong); }
html[data-theme="dark"] .bs-popover-left > .arrow::before, html[data-theme="dark"] .bs-popover-auto[x-placement^="left"] > .arrow::before { border-left-color: var(--vh-border-strong); }
html[data-theme="dark"] .bs-popover-right > .arrow::before, html[data-theme="dark"] .bs-popover-auto[x-placement^="right"] > .arrow::before { border-right-color: var(--vh-border-strong); }
html[data-theme="dark"] .bs-popover-bottom .popover-header::before, html[data-theme="dark"] .bs-popover-auto[x-placement^="bottom"] .popover-header::before { border-bottom-color: var(--vh-raised); }
html[data-theme="dark"] .tooltip-inner { background-color: #3a3a54; color: #f2f2f8; box-shadow: 0 6px 20px rgba(0, 0, 0, .45); }
html[data-theme="dark"] .bs-tooltip-top .arrow::before, html[data-theme="dark"] .bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: #3a3a54; }
html[data-theme="dark"] .bs-tooltip-bottom .arrow::before, html[data-theme="dark"] .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: #3a3a54; }
html[data-theme="dark"] .bs-tooltip-left .arrow::before, html[data-theme="dark"] .bs-tooltip-auto[x-placement^="left"] .arrow::before { border-left-color: #3a3a54; }
html[data-theme="dark"] .bs-tooltip-right .arrow::before, html[data-theme="dark"] .bs-tooltip-auto[x-placement^="right"] .arrow::before { border-right-color: #3a3a54; }
/* ============================================================ alerty, toastr, SweetAlert2 */
html[data-theme="dark"] .alert.alert-custom.alert-white, html[data-theme="dark"] .alert.alert-custom.alert-light { background-color: var(--vh-surface-2); border-color: var(--vh-border); }
html[data-theme="dark"] .alert.alert-custom.alert-white .alert-text, html[data-theme="dark"] .alert.alert-custom.alert-white .alert-icon i,
html[data-theme="dark"] .alert.alert-custom.alert-light .alert-text { color: var(--vh-text); }
html[data-theme="dark"] .alert.alert-custom.alert-light-primary { background-color: var(--vh-tint-primary); }
html[data-theme="dark"] .alert.alert-custom.alert-light-primary .alert-text, html[data-theme="dark"] .alert.alert-custom.alert-light-primary .alert-icon i { color: var(--vh-c-primary-text); }
html[data-theme="dark"] .alert.alert-custom.alert-light-success { background-color: var(--vh-tint-success); }
html[data-theme="dark"] .alert.alert-custom.alert-light-success .alert-text, html[data-theme="dark"] .alert.alert-custom.alert-light-success .alert-icon i { color: var(--vh-c-success-text); }
html[data-theme="dark"] .alert.alert-custom.alert-light-info { background-color: var(--vh-tint-info); }
html[data-theme="dark"] .alert.alert-custom.alert-light-info .alert-text, html[data-theme="dark"] .alert.alert-custom.alert-light-info .alert-icon i { color: var(--vh-c-info-text); }
html[data-theme="dark"] .alert.alert-custom.alert-light-warning { background-color: var(--vh-tint-warning); }
html[data-theme="dark"] .alert.alert-custom.alert-light-warning .alert-text, html[data-theme="dark"] .alert.alert-custom.alert-light-warning .alert-icon i { color: var(--vh-c-warning-text); }
html[data-theme="dark"] .alert.alert-custom.alert-light-danger { background-color: var(--vh-tint-danger); }
html[data-theme="dark"] .alert.alert-custom.alert-light-danger .alert-text, html[data-theme="dark"] .alert.alert-custom.alert-light-danger .alert-icon i { color: var(--vh-c-danger-text); }
html[data-theme="dark"] .alert.alert-custom.alert-light-dark { background-color: var(--vh-surface-3); }
html[data-theme="dark"] .alert.alert-custom.alert-light-dark .alert-text, html[data-theme="dark"] .alert.alert-custom.alert-light-dark .alert-icon i { color: var(--vh-text); }
html[data-theme="dark"] .alert.alert-custom .alert-text a:not(.btn) { color: inherit; text-decoration: underline; }
html[data-theme="dark"] .alert-secondary, html[data-theme="dark"] .alert-light { background-color: var(--vh-surface-2); border-color: var(--vh-border); color: var(--vh-text); }
html[data-theme="dark"] #toast-container > div { box-shadow: 0 10px 30px rgba(0, 0, 0, .5); opacity: .97; }
html[data-theme="dark"] #toast-container > .toast:not(.toast-success):not(.toast-error):not(.toast-info):not(.toast-warning) { background-color: var(--vh-raised); color: var(--vh-text); }
html[data-theme="dark"] .swal2-popup { background: var(--vh-surface); color: var(--vh-text); border: 1px solid var(--vh-border); }
html[data-theme="dark"] .swal2-popup .swal2-title, html[data-theme="dark"] .swal2-title { color: var(--vh-text-strong); }
html[data-theme="dark"] .swal2-popup .swal2-content, html[data-theme="dark"] .swal2-content,
html[data-theme="dark"] .swal2-html-container { color: var(--vh-text); }
html[data-theme="dark"] .swal2-validation-message { background: var(--vh-surface-2); color: var(--vh-text); }
html[data-theme="dark"] .swal2-input, html[data-theme="dark"] .swal2-textarea, html[data-theme="dark"] .swal2-select { background: var(--vh-input-bg); color: var(--vh-text); border-color: var(--vh-border-strong); }
html[data-theme="dark"] .swal2-container.swal2-backdrop-show { background: rgba(0, 0, 0, .65); }
html[data-theme="dark"] .swal2-icon.swal2-success [class^=swal2-success-circular-line],
html[data-theme="dark"] .swal2-icon.swal2-success .swal2-success-fix { background-color: transparent !important; }
/* ============================================================ etykiety, badge, symbole */
/* :where() — niska specyficzność, żeby pełne warianty Metronica (.label.label-primary itd.) nadal wygrywały */
html[data-theme="dark"] :where(.label) { background-color: var(--vh-surface-3); color: var(--vh-text); }
html[data-theme="dark"] .label.label-light { background-color: var(--vh-surface-3); color: var(--vh-text-2); }
html[data-theme="dark"] .label.label-light-primary { background-color: var(--vh-tint-primary); color: var(--vh-c-primary-text); }
html[data-theme="dark"] .label.label-light-success { background-color: var(--vh-tint-success); color: var(--vh-c-success-text); }
html[data-theme="dark"] .label.label-light-info { background-color: var(--vh-tint-info); color: var(--vh-c-info-text); }
html[data-theme="dark"] .label.label-light-warning { background-color: var(--vh-tint-warning); color: var(--vh-c-warning-text); }
html[data-theme="dark"] .label.label-light-danger { background-color: var(--vh-tint-danger); color: var(--vh-c-danger-text); }
html[data-theme="dark"] .label.label-light-dark, html[data-theme="dark"] .label.label-light-secondary { background-color: var(--vh-surface-3); color: var(--vh-text); }
html[data-theme="dark"] .label.label-dark { background-color: #4a4a66; color: #fff; }
html[data-theme="dark"] .label.label-secondary { background-color: var(--vh-border-strong); color: var(--vh-text); }
html[data-theme="dark"] .label.label-outline-secondary { border-color: var(--vh-border-strong); color: var(--vh-text-2); }
html[data-theme="dark"] .badge-light, html[data-theme="dark"] .badge-secondary { background-color: var(--vh-surface-3); color: var(--vh-text); }
html[data-theme="dark"] :where(.symbol) .symbol-label { background-color: var(--vh-surface-3); color: var(--vh-text); }
html[data-theme="dark"] .symbol.symbol-light .symbol-label, html[data-theme="dark"] .symbol.symbol-light-dark .symbol-label { background-color: var(--vh-surface-3); color: var(--vh-text); }
html[data-theme="dark"] .symbol.symbol-light-primary .symbol-label { background-color: var(--vh-tint-primary); color: var(--vh-c-primary-text); }
html[data-theme="dark"] .symbol.symbol-light-success .symbol-label { background-color: var(--vh-tint-success); color: var(--vh-c-success-text); }
html[data-theme="dark"] .symbol.symbol-light-info .symbol-label { background-color: var(--vh-tint-info); color: var(--vh-c-info-text); }
html[data-theme="dark"] .symbol.symbol-light-warning .symbol-label { background-color: var(--vh-tint-warning); color: var(--vh-c-warning-text); }
html[data-theme="dark"] .symbol.symbol-light-danger .symbol-label { background-color: var(--vh-tint-danger); color: var(--vh-c-danger-text); }
html[data-theme="dark"] .symbol.symbol-light-primary .symbol-label i, html[data-theme="dark"] .symbol.symbol-light-success .symbol-label i,
html[data-theme="dark"] .symbol.symbol-light-info .symbol-label i, html[data-theme="dark"] .symbol.symbol-light-warning .symbol-label i,
html[data-theme="dark"] .symbol.symbol-light-danger .symbol-label i { color: inherit; }
html[data-theme="dark"] .progress { background-color: var(--vh-surface-3); }
html[data-theme="dark"] .list-group-item { background-color: var(--vh-surface); border-color: var(--vh-border); color: var(--vh-text); }
html[data-theme="dark"] .list-group-item-action:hover, html[data-theme="dark"] .list-group-item-action:focus { background-color: var(--vh-hover); color: var(--vh-text-strong); }
html[data-theme="dark"] .list-group-item.active { background-color: var(--vh-c-primary); border-color: var(--vh-c-primary); color: #fff; }
/* ============================================================ przyciski */
html[data-theme="dark"] .btn.btn-light, html[data-theme="dark"] .btn.btn-light.disabled, html[data-theme="dark"] .btn.btn-light:disabled,
html[data-theme="dark"] .btn.btn-default, html[data-theme="dark"] .btn.btn-default.disabled, html[data-theme="dark"] .btn.btn-default:disabled {
color: var(--vh-text-2); background-color: var(--vh-surface-3); border-color: var(--vh-surface-3);
}
html[data-theme="dark"] .btn.btn-light i, html[data-theme="dark"] .btn.btn-default i,
html[data-theme="dark"] .btn.btn-light.dropdown-toggle:after, html[data-theme="dark"] .btn.btn-default.dropdown-toggle:after { color: var(--vh-text-2); }
html[data-theme="dark"] .btn.btn-light:hover:not(.btn-text):not(:disabled):not(.disabled), html[data-theme="dark"] .btn.btn-light:focus:not(.btn-text), html[data-theme="dark"] .btn.btn-light.focus:not(.btn-text),
html[data-theme="dark"] .btn.btn-light:not(:disabled):not(.disabled):active:not(.btn-text), html[data-theme="dark"] .btn.btn-light:not(:disabled):not(.disabled).active,
html[data-theme="dark"] .show > .btn.btn-light.dropdown-toggle, html[data-theme="dark"] .show .btn.btn-light.btn-dropdown,
html[data-theme="dark"] .btn.btn-default:hover:not(.btn-text):not(:disabled):not(.disabled), html[data-theme="dark"] .btn.btn-default:focus:not(.btn-text),
html[data-theme="dark"] .btn.btn-default:not(:disabled):not(.disabled):active:not(.btn-text), html[data-theme="dark"] .btn.btn-default:not(:disabled):not(.disabled).active,
html[data-theme="dark"] .show > .btn.btn-default.dropdown-toggle {
color: var(--vh-text-strong); background-color: #3a3a54; border-color: #3a3a54;
}
html[data-theme="dark"] .btn.btn-light:hover:not(.btn-text):not(:disabled):not(.disabled) i, html[data-theme="dark"] .btn.btn-light:focus:not(.btn-text) i,
html[data-theme="dark"] .btn.btn-light:not(:disabled):not(.disabled).active i, html[data-theme="dark"] .show > .btn.btn-light.dropdown-toggle i,
html[data-theme="dark"] .btn.btn-default:hover:not(.btn-text):not(:disabled):not(.disabled) i, html[data-theme="dark"] .btn.btn-default:not(:disabled):not(.disabled).active i,
html[data-theme="dark"] .btn.btn-light:hover:not(.btn-text):not(:disabled):not(.disabled).dropdown-toggle:after { color: var(--vh-text-strong); }
html[data-theme="dark"] .btn.btn-white, html[data-theme="dark"] .btn.btn-white.disabled, html[data-theme="dark"] .btn.btn-white:disabled,
html[data-theme="dark"] .btn.btn-secondary, html[data-theme="dark"] .btn.btn-secondary.disabled, html[data-theme="dark"] .btn.btn-secondary:disabled {
color: var(--vh-text); background-color: var(--vh-surface-3); border-color: var(--vh-border-strong);
}
html[data-theme="dark"] .btn.btn-white i, html[data-theme="dark"] .btn.btn-secondary i,
html[data-theme="dark"] .btn.btn-white.dropdown-toggle:after, html[data-theme="dark"] .btn.btn-secondary.dropdown-toggle:after { color: var(--vh-text); }
html[data-theme="dark"] .btn.btn-white:hover:not(.btn-text):not(:disabled):not(.disabled), html[data-theme="dark"] .btn.btn-white:focus:not(.btn-text),
html[data-theme="dark"] .btn.btn-white:not(:disabled):not(.disabled):active:not(.btn-text), html[data-theme="dark"] .btn.btn-white:not(:disabled):not(.disabled).active,
html[data-theme="dark"] .show > .btn.btn-white.dropdown-toggle,
html[data-theme="dark"] .btn.btn-secondary:hover:not(.btn-text):not(:disabled):not(.disabled), html[data-theme="dark"] .btn.btn-secondary:focus:not(.btn-text),
html[data-theme="dark"] .btn.btn-secondary:not(:disabled):not(.disabled):active:not(.btn-text), html[data-theme="dark"] .btn.btn-secondary:not(:disabled):not(.disabled).active,
html[data-theme="dark"] .show > .btn.btn-secondary.dropdown-toggle { color: var(--vh-text-strong); background-color: #3a3a54; border-color: #4a4a66; }
html[data-theme="dark"] .btn.btn-white:hover:not(.btn-text):not(:disabled):not(.disabled) i, html[data-theme="dark"] .btn.btn-secondary:hover:not(.btn-text):not(:disabled):not(.disabled) i { color: var(--vh-text-strong); }
html[data-theme="dark"] .btn.btn-clean, html[data-theme="dark"] .btn.btn-clean i, html[data-theme="dark"] .btn.btn-clean.dropdown-toggle:after { color: var(--vh-muted); }
html[data-theme="dark"] .btn.btn-clean:hover:not(.btn-text):not(:disabled):not(.disabled), html[data-theme="dark"] .btn.btn-clean:focus:not(.btn-text), html[data-theme="dark"] .btn.btn-clean.focus:not(.btn-text),
html[data-theme="dark"] .btn.btn-clean:not(:disabled):not(.disabled):active:not(.btn-text), html[data-theme="dark"] .btn.btn-clean:not(:disabled):not(.disabled).active,
html[data-theme="dark"] .show > .btn.btn-clean.dropdown-toggle, html[data-theme="dark"] .show .btn.btn-clean.btn-dropdown { color: var(--vh-c-primary-text); background-color: var(--vh-surface-3); }
html[data-theme="dark"] .btn.btn-clean:hover:not(.btn-text):not(:disabled):not(.disabled) i, html[data-theme="dark"] .btn.btn-clean:focus:not(.btn-text) i,
html[data-theme="dark"] .btn.btn-clean:not(:disabled):not(.disabled).active i, html[data-theme="dark"] .show > .btn.btn-clean.dropdown-toggle i { color: var(--vh-c-primary-text); }
/* jasne warianty kolorów: tło = odcień; hover (pełny kolor) zostaje z Metronica */
html[data-theme="dark"] .btn.btn-light-primary, html[data-theme="dark"] .btn.btn-light-primary.disabled, html[data-theme="dark"] .btn.btn-light-primary:disabled { background-color: var(--vh-tint-primary); color: var(--vh-c-primary-text); }
html[data-theme="dark"] .btn.btn-light-primary i, html[data-theme="dark"] .btn.btn-light-primary.dropdown-toggle:after { color: var(--vh-c-primary-text); }
html[data-theme="dark"] .btn.btn-light-success, html[data-theme="dark"] .btn.btn-light-success.disabled, html[data-theme="dark"] .btn.btn-light-success:disabled { background-color: var(--vh-tint-success); }
html[data-theme="dark"] .btn.btn-light-info, html[data-theme="dark"] .btn.btn-light-info.disabled, html[data-theme="dark"] .btn.btn-light-info:disabled { background-color: var(--vh-tint-info); color: var(--vh-c-info-text); }
html[data-theme="dark"] .btn.btn-light-info i { color: var(--vh-c-info-text); }
html[data-theme="dark"] .btn.btn-light-warning, html[data-theme="dark"] .btn.btn-light-warning.disabled, html[data-theme="dark"] .btn.btn-light-warning:disabled { background-color: var(--vh-tint-warning); }
html[data-theme="dark"] .btn.btn-light-danger, html[data-theme="dark"] .btn.btn-light-danger.disabled, html[data-theme="dark"] .btn.btn-light-danger:disabled { background-color: var(--vh-tint-danger); color: var(--vh-c-danger-text); }
html[data-theme="dark"] .btn.btn-light-danger i { color: var(--vh-c-danger-text); }
html[data-theme="dark"] .btn.btn-light-dark, html[data-theme="dark"] .btn.btn-light-dark.disabled { background-color: var(--vh-surface-3); color: var(--vh-text); }
html[data-theme="dark"] .btn.btn-light-dark i { color: var(--vh-text); }
html[data-theme="dark"] .btn.btn-hover-light-primary:hover:not(.btn-text):not(:disabled):not(.disabled), html[data-theme="dark"] .btn.btn-hover-light-primary:focus:not(.btn-text) { background-color: var(--vh-tint-primary) !important; border-color: var(--vh-tint-primary) !important; }
html[data-theme="dark"] .btn.btn-hover-light-danger:hover:not(.btn-text):not(:disabled):not(.disabled), html[data-theme="dark"] .btn.btn-hover-light-danger:focus:not(.btn-text) { background-color: var(--vh-tint-danger) !important; border-color: var(--vh-tint-danger) !important; }
html[data-theme="dark"] .btn.btn-outline-secondary { color: var(--vh-text); border-color: var(--vh-border-strong); }
html[data-theme="dark"] .btn.btn-outline-secondary:hover:not(:disabled) { background-color: var(--vh-surface-3); color: var(--vh-text-strong); }
html[data-theme="dark"] .btn.btn-dark { background-color: #4a4a66; border-color: #4a4a66; }
html[data-theme="dark"] .btn.btn-link { color: var(--vh-link); }
/* ============================================================ nawigacja: zakładki, pigułki, breadcrumbs */
html[data-theme="dark"] .nav-tabs { border-bottom-color: var(--vh-border); }
html[data-theme="dark"] .nav-tabs .nav-link { color: var(--vh-text-2); }
html[data-theme="dark"] .nav-tabs .nav-link:hover, html[data-theme="dark"] .nav-tabs .nav-link:focus { border-color: var(--vh-border) var(--vh-border) var(--vh-border); color: var(--vh-text-strong); }
html[data-theme="dark"] .nav-tabs .nav-link.active, html[data-theme="dark"] .nav-tabs .nav-item.show .nav-link { background-color: var(--vh-surface); border-color: var(--vh-border) var(--vh-border) var(--vh-surface); color: var(--vh-c-primary-text); }
html[data-theme="dark"] .nav.nav-tabs.nav-tabs-line { border-bottom-color: var(--vh-border); }
html[data-theme="dark"] .nav.nav-tabs.nav-tabs-line .nav-link { color: var(--vh-text-2); }
html[data-theme="dark"] .nav.nav-tabs.nav-tabs-line .nav-link:hover:not(.disabled),
html[data-theme="dark"] .nav.nav-tabs.nav-tabs-line .nav-link.active,
html[data-theme="dark"] .nav.nav-tabs.nav-tabs-line .show > .nav-link { background-color: transparent; color: var(--vh-c-primary-text); border-bottom-color: var(--vh-c-primary); }
html[data-theme="dark"] .nav .nav-link .nav-text { color: inherit; }
html[data-theme="dark"] .nav .nav-link .nav-icon i { color: var(--vh-muted); }
html[data-theme="dark"] .nav .nav-link.active .nav-icon i, html[data-theme="dark"] .nav .nav-link:hover .nav-icon i { color: var(--vh-c-primary-text); }
html[data-theme="dark"] .nav-pills .nav-link { color: var(--vh-text-2); }
html[data-theme="dark"] .nav-pills .nav-link:hover { color: var(--vh-c-primary-text); }
html[data-theme="dark"] .nav-pills .nav-link.active, html[data-theme="dark"] .nav-pills .show > .nav-link { background-color: var(--vh-c-primary); color: #fff; }
html[data-theme="dark"] .nav.nav-pills .nav-link.active .nav-text, html[data-theme="dark"] .nav.nav-pills .nav-link.active .nav-icon i { color: #fff; }
html[data-theme="dark"] .nav-light .nav-link.active, html[data-theme="dark"] .nav.nav-pills.nav-light .nav-link.active { background-color: var(--vh-surface-3); color: var(--vh-c-primary-text); }
html[data-theme="dark"] .breadcrumb { background-color: transparent; }
html[data-theme="dark"] .breadcrumb .breadcrumb-item, html[data-theme="dark"] .breadcrumb .breadcrumb-item a,
html[data-theme="dark"] .breadcrumb .breadcrumb-item:after, html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--vh-muted); }
html[data-theme="dark"] .breadcrumb .breadcrumb-item a:hover { color: var(--vh-c-primary-text) !important; }
html[data-theme="dark"] .breadcrumb .breadcrumb-item.active, html[data-theme="dark"] .breadcrumb .breadcrumb-item.active a { color: var(--vh-text-2); }
/* ============================================================ kod, markdown, kbd */
html[data-theme="dark"] code { background-color: var(--vh-surface-3); color: #f472b6; }
html[data-theme="dark"] pre { color: var(--vh-text); }
html[data-theme="dark"] pre code { background: none; color: inherit; }
html[data-theme="dark"] kbd { background: var(--vh-surface-3); color: var(--vh-text); border-color: var(--vh-border-strong); box-shadow: none; }
html[data-theme="dark"] .vh-markdown { color: var(--vh-text); }
html[data-theme="dark"] .vh-markdown code { background: var(--vh-surface-3); color: #f472b6; }
html[data-theme="dark"] .vh-markdown pre { background: #161622; border: 1px solid var(--vh-border); color: #dcdcea; }
html[data-theme="dark"] .vh-markdown pre code { background: none; color: inherit; }
html[data-theme="dark"] .vh-markdown blockquote { border-left-color: #4a4a66; color: var(--vh-text-2); }
html[data-theme="dark"] .vh-markdown th, html[data-theme="dark"] .vh-markdown td { border-color: var(--vh-border-strong); }
html[data-theme="dark"] .vh-markdown th { background: var(--vh-surface-2); color: var(--vh-text-strong); }
html[data-theme="dark"] .vh-markdown hr { border-top-color: var(--vh-border); }
html[data-theme="dark"] .vh-markdown a { color: var(--vh-link); }
html[data-theme="dark"] .vh-token-plain { color: var(--vh-text-strong); }
/* ============================================================ MODUŁY */
/* ---------- wyszukiwarka (vh-search.css) ---------- */
html[data-theme="dark"] .vh-search-group .input-group-text { background-color: var(--vh-surface-2); border-color: var(--vh-border-strong); }
html[data-theme="dark"] .vh-suggest { background: var(--vh-raised); border-color: var(--vh-border-strong); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .vh-suggest-item { color: var(--vh-text); }
html[data-theme="dark"] .vh-suggest-item.active, html[data-theme="dark"] .vh-suggest-item:hover { background: var(--vh-hover); color: var(--vh-c-primary-text); }
html[data-theme="dark"] .vh-suggest-icon, html[data-theme="dark"] .vh-suggest-hint { color: var(--vh-muted); }
html[data-theme="dark"] .vh-suggest-item.active .vh-suggest-icon { color: var(--vh-c-primary-text); }
html[data-theme="dark"] .vh-suggest-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
html[data-theme="dark"] .vh-search-help h6 { color: var(--vh-text-strong); }
html[data-theme="dark"] .vh-search-help code { color: var(--vh-c-primary-text); background: var(--vh-tint-primary); }
html[data-theme="dark"] .vh-search-example:hover code { background: var(--vh-c-primary-tint-strong); }
html[data-theme="dark"] .vh-saved-table code { color: var(--vh-text-2); background: var(--vh-surface-3); }
html[data-theme="dark"] .vh-drag-handle { color: var(--vh-muted); }
html[data-theme="dark"] .vh-drag-handle:hover { color: var(--vh-c-primary-text); }
html[data-theme="dark"] .vh-sortable-ghost { background: var(--vh-tint-primary) !important; }
/* ---------- zgłoszenia: wspólne, lista, pulpit (vh-issue.css) ---------- */
html[data-theme="dark"] .vh-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
/* wartości pól mają kolor tła z bazy — tylko delikatny obrys, żeby ciemne kolory nie znikały na ciemnym tle */
html[data-theme="dark"] .vh-badge, html[data-theme="dark"] .label.vh-value-badge,
html[data-theme="dark"] .vh-state-badge, html[data-theme="dark"] .vh-priority-mark { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
html[data-theme="dark"] .vh-badge-outline { color: var(--vh-text-2) !important; }
html[data-theme="dark"] .vh-id-pill {
color: color-mix(in srgb, var(--vh-project-color, #3699FF) 55%, #fff);
background-color: color-mix(in srgb, var(--vh-project-color, #3699FF) 22%, var(--vh-surface));
}
html[data-theme="dark"] a.vh-id-pill:hover { color: #fff; background-color: var(--vh-project-color, #3699FF); }
html[data-theme="dark"] .vh-id-pill.vh-id-resolved { color: var(--vh-text-2); background-color: var(--vh-surface-3); }
html[data-theme="dark"] .vh-priority-name, html[data-theme="dark"] .vh-person-name { color: var(--vh-text); }
html[data-theme="dark"] .vh-mention { background: var(--vh-tint-primary); color: var(--vh-c-primary-text); }
html[data-theme="dark"] .vh-mention:hover { background: var(--vh-c-primary); color: #fff; }
html[data-theme="dark"] .vh-mention.vh-mention-me { background: var(--vh-tint-warning); color: var(--vh-c-warning-text); }
html[data-theme="dark"] .vh-filter-card .form-control-solid,
html[data-theme="dark"] .vh-filter-card .select2-container--default .select2-selection--multiple { background-color: var(--vh-surface-2); border-color: var(--vh-surface-2); }
html[data-theme="dark"] .vh-chip { background: var(--vh-tint-primary); color: var(--vh-c-primary-text); }
html[data-theme="dark"] .vh-list-project { color: var(--vh-text-2); }
html[data-theme="dark"] .vh-issues-table tr.vh-row-resolved .vh-list-summary { color: var(--vh-muted) !important; }
html[data-theme="dark"] .vh-issues-table tr.vh-row-selected td { background-color: var(--vh-tint-primary); }
html[data-theme="dark"] table.dataTable.vh-issues-table tbody tr:hover td { background-color: var(--vh-hover); }
html[data-theme="dark"] .vh-issues-table .dataTables_empty { color: var(--vh-muted); }
html[data-theme="dark"] .vh-bulk-bar { background: var(--vh-tint-primary); border-color: var(--vh-c-primary-tint-strong); }
html[data-theme="dark"] a.vh-stat-link:hover { box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .45); }
html[data-theme="dark"] .vh-issue-link { color: var(--vh-text); }
html[data-theme="dark"] .vh-issue-link:hover { color: var(--vh-c-primary-text); }
/* ---------- widok zgłoszenia ---------- */
html[data-theme="dark"] .vh-summary { color: var(--vh-text-strong); }
html[data-theme="dark"] .vh-summary-wrap.vh-editable:hover { background: var(--vh-hover); }
html[data-theme="dark"] .vh-section-title { color: var(--vh-muted); }
html[data-theme="dark"] .vh-description-view .vh-markdown, html[data-theme="dark"] .vh-comment-text { color: var(--vh-text); }
html[data-theme="dark"] .vh-field-row { border-bottom-color: var(--vh-border); }
html[data-theme="dark"] .vh-field-label { color: var(--vh-text-2); }
html[data-theme="dark"] .vh-field-trigger { color: var(--vh-text); }
html[data-theme="dark"] .vh-field-trigger:hover, html[data-theme="dark"] .vh-field-trigger:focus,
html[data-theme="dark"] .show > .vh-field-trigger { background: var(--vh-hover); border-color: var(--vh-border-strong); }
html[data-theme="dark"] .vh-field-menu .dropdown-item.active, html[data-theme="dark"] .vh-field-menu .dropdown-item:active { background-color: var(--vh-tint-primary); color: var(--vh-text-strong); }
html[data-theme="dark"] .vh-field-row.vh-field-flash .vh-field-trigger,
html[data-theme="dark"] .vh-field-row.vh-field-flash .vh-field-display { animation-name: vh-flash-dark; }
@keyframes vh-flash-dark { 0% { background-color: #15443a; } 100% { background-color: transparent; } }
html[data-theme="dark"] .vh-side-card .card-label { color: var(--vh-text-strong); }
html[data-theme="dark"] .vh-link-issue { color: var(--vh-text); }
html[data-theme="dark"] .vh-link-issue:hover { color: var(--vh-c-primary-text); }
/* oś czasu */
html[data-theme="dark"] .vh-timeline::before { background: var(--vh-border); }
html[data-theme="dark"] .vh-activity-list { color: var(--vh-text-2); }
html[data-theme="dark"] .vh-activity-field { color: var(--vh-text-2); }
html[data-theme="dark"] .vh-diff { background: #181826; border-color: var(--vh-border); }
html[data-theme="dark"] .vh-diff-line { color: var(--vh-text); }
html[data-theme="dark"] .vh-diff-add { background: #133128; color: #6ee7b7; }
html[data-theme="dark"] .vh-diff-add .vh-diff-sign { color: #34d399; }
html[data-theme="dark"] .vh-diff-del { background: #3a1c26; color: #ffa3ad; text-decoration-color: rgba(255, 163, 173, .45); }
html[data-theme="dark"] .vh-diff-del .vh-diff-sign { color: var(--vh-c-danger-text); }
html[data-theme="dark"] .vh-diff-skip { background: var(--vh-surface-2); }
html[data-theme="dark"] .vh-deleted-text { background: var(--vh-surface-2); color: var(--vh-text-2); }
html[data-theme="dark"] .vh-comment-card { background: var(--vh-surface); border-color: var(--vh-border); }
html[data-theme="dark"] .vh-comment-author { color: var(--vh-text-strong); }
html[data-theme="dark"] .vh-comment-via { color: var(--vh-text-2); }
html[data-theme="dark"] a.vh-comment-time, html[data-theme="dark"] a.vh-comment-edited { color: var(--vh-muted); }
html[data-theme="dark"] a.vh-comment-time:hover, html[data-theme="dark"] a.vh-comment-edited:hover { color: var(--vh-c-primary-text); }
html[data-theme="dark"] .vh-comment-attachments { border-top-color: var(--vh-border); }
html[data-theme="dark"] .vh-tl-comment:target .vh-comment-card, html[data-theme="dark"] .vh-tl-comment.vh-highlight .vh-comment-card { box-shadow: 0 0 0 3px color-mix(in srgb, var(--vh-c-primary-soft) 40%, transparent); }
/* notatka PRYWATNA — bursztynowa, wyraźnie inna niż publiczna (kolory w zmiennych --vh-private-*) */
html[data-theme="dark"] .vh-comment-internal .vh-comment-card { background: var(--vh-private-bg); border-color: var(--vh-private-border); border-left-color: var(--vh-c-warning); }
html[data-theme="dark"] .vh-private-label { background: var(--vh-c-warning-tint-strong); color: var(--vh-private-text); }
html[data-theme="dark"] .vh-comment-internal .vh-markdown pre,
html[data-theme="dark"] .vh-comment-internal .vh-markdown code { background: rgba(0, 0, 0, .3); }
html[data-theme="dark"] .vh-comment-internal .vh-markdown blockquote { border-left-color: #6b5220; }
html[data-theme="dark"] .vh-edit-meta, html[data-theme="dark"] .vh-edit-text { color: var(--vh-text-2); }
/* edytor Markdown i formularz komentarza */
html[data-theme="dark"] .vh-md-editor,
html[data-theme="dark"] .vh-comment-form .vh-md-editor { background: var(--vh-input-bg); border-color: var(--vh-border-strong); }
html[data-theme="dark"] .vh-md-editor:focus-within { border-color: var(--vh-c-primary-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vh-c-primary) 18%, transparent); }
html[data-theme="dark"] .vh-comment-form.vh-mode-public .vh-md-editor { border-color: var(--vh-c-primary-soft); }
html[data-theme="dark"] .vh-md-toolbar { border-color: var(--vh-border); }
html[data-theme="dark"] .vh-md-buttons .btn { color: var(--vh-text-2); }
html[data-theme="dark"] .vh-md-editor textarea.form-control, html[data-theme="dark"] .vh-md-editor .vh-md-textarea { background: transparent; color: var(--vh-text); }
html[data-theme="dark"] .vh-mention-menu { background: var(--vh-raised); border: 1px solid var(--vh-border-strong); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .vh-mention-item.active, html[data-theme="dark"] .vh-mention-item:hover { background: var(--vh-hover); }
html[data-theme="dark"] .vh-reply-preview { background: var(--vh-surface-2); border-color: var(--vh-border); }
html[data-theme="dark"] .vh-contact-suggest { box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
/* ---------- załączniki, uploader, lightbox, edytor zrzutów (vh-attachments.css) ---------- */
html[data-theme="dark"] .vh-att-tile, html[data-theme="dark"] .vh-att-file { background: var(--vh-surface-2); border-color: var(--vh-border); }
html[data-theme="dark"] .vh-att-tile:hover, html[data-theme="dark"] .vh-att-file:hover { border-color: #4a4a66; box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .4); }
html[data-theme="dark"] .vh-att-thumb { background: #202030 repeating-conic-gradient(#262638 0% 25%, #202030 0% 50%) 50% / 16px 16px; }
html[data-theme="dark"] .vh-att-name, html[data-theme="dark"] .vh-att-file-name, html[data-theme="dark"] .vh-up-name { color: var(--vh-text); }
html[data-theme="dark"] .vh-att-file-name:hover { color: var(--vh-c-primary-text); }
html[data-theme="dark"] .vh-att-meta, html[data-theme="dark"] .vh-attachments-empty, html[data-theme="dark"] .vh-uploader-hint,
html[data-theme="dark"] .vh-up-status { color: var(--vh-muted); }
html[data-theme="dark"] .vh-att-file-icon, html[data-theme="dark"] .vh-up-thumb { background: var(--vh-surface-3); }
html[data-theme="dark"] .vh-md-image { border-color: var(--vh-border); }
html[data-theme="dark"] .vh-md-image-external, html[data-theme="dark"] .vh-md-image-blocked { color: var(--vh-text-2); border-bottom-color: var(--vh-muted); }
html[data-theme="dark"] .vh-up-item { background: var(--vh-surface-2); border-color: var(--vh-border); }
html[data-theme="dark"] .vh-up-item.is-error { background: var(--vh-tint-danger); border-color: #5a2a38; }
html[data-theme="dark"] .vh-up-item.is-error .vh-up-status { color: var(--vh-c-danger-text); }
html[data-theme="dark"] .vh-up-item.is-done { border-color: #1f5553; }
html[data-theme="dark"] .vh-up-progress { background: var(--vh-surface-3); }
html[data-theme="dark"] .vh-up-actions button { color: var(--vh-c-primary-text); }
html[data-theme="dark"] .vh-up-remove { color: var(--vh-muted); }
html[data-theme="dark"] .vh-up-remove:hover { background: var(--vh-tint-danger); color: var(--vh-c-danger-text); }
html[data-theme="dark"] .vh-drop-overlay { background: rgba(28, 42, 68, .94); border-color: var(--vh-c-primary); color: var(--vh-c-primary-text); }
html[data-theme="dark"] .vh-drop-overlay i { color: var(--vh-c-primary-text); }
html[data-theme="dark"] .vh-att-private { background: rgba(0, 0, 0, .7); }
/* edytor zrzutów: pasek narzędzi (płótno bez zmian) */
html[data-theme="dark"] .vh-shot-toolbar { background: var(--vh-surface-2); border-bottom-color: var(--vh-border); }
html[data-theme="dark"] .vh-shot-btn { color: var(--vh-text-2); }
html[data-theme="dark"] .vh-shot-btn:hover { background: var(--vh-surface-3); color: var(--vh-c-primary-text); }
html[data-theme="dark"] .vh-shot-btn.is-active { background: var(--vh-tint-primary); border-color: var(--vh-c-primary); color: var(--vh-c-primary-text); }
html[data-theme="dark"] .vh-shot-btn:disabled { color: var(--vh-text-2); background: transparent; }
html[data-theme="dark"] .vh-shot-color { border-color: var(--vh-surface-2); box-shadow: 0 0 0 1px #5a5a75; }
html[data-theme="dark"] .vh-shot-color.is-active { box-shadow: 0 0 0 2px var(--vh-c-primary); }
html[data-theme="dark"] .vh-shot-filename, html[data-theme="dark"] .vh-shot-dims, html[data-theme="dark"] .vh-shot-help { color: var(--vh-muted); }
html[data-theme="dark"] .vh-shot-crop-hint { color: var(--vh-text-2); }
/* ---------- tablice (vh-board.css; zmienne --vh-board-bg / --vh-cell-bg / --vh-line wyżej) ---------- */
html[data-theme="dark"] .vh-board-scroll { box-shadow: var(--vh-shadow); }
html[data-theme="dark"] .vh-board-head::after { background: linear-gradient(rgba(0, 0, 0, .35), transparent); }
html[data-theme="dark"] .vh-board-filters .vh-qf { background: var(--vh-surface); color: var(--vh-text-2); border-color: var(--vh-border-strong); }
html[data-theme="dark"] .vh-board-filters .vh-qf:hover { color: var(--vh-c-primary-text); border-color: var(--vh-c-primary); }
html[data-theme="dark"] .vh-board-filters .vh-qf.active { background: var(--vh-c-primary-tint); border-color: var(--vh-c-primary-soft); color: var(--vh-c-primary-text); }
html[data-theme="dark"] .vh-qf-select, html[data-theme="dark"] .vh-qf-search input { background-color: var(--vh-input-bg); border-color: var(--vh-border-strong); color: var(--vh-text); }
html[data-theme="dark"] .vh-qf-select.active { border-color: var(--vh-c-primary); color: var(--vh-c-primary-text); }
html[data-theme="dark"] .vh-board-info { color: var(--vh-text-2); }
html[data-theme="dark"] .vh-board-query code { background: var(--vh-surface-2); color: var(--vh-text-2); border-color: var(--vh-border); }
html[data-theme="dark"] .vh-board-sync { color: #4a4a66; }
html[data-theme="dark"] .vh-board-switch .dropdown-item.active { background: var(--vh-tint-primary); color: var(--vh-c-primary-text); }
html[data-theme="dark"] .vh-col-head { border-top-color: var(--vh-col-color, #41415a); }
html[data-theme="dark"] .vh-col-name, html[data-theme="dark"] .vh-lane-label, html[data-theme="dark"] .vh-card-summary { color: var(--vh-text-strong); }
html[data-theme="dark"] .vh-col-count { background: var(--vh-surface-3); color: var(--vh-text-2); }
html[data-theme="dark"] .vh-col-resolved .vh-col-name, html[data-theme="dark"] .vh-lane-caret, html[data-theme="dark"] .vh-lane-count,
html[data-theme="dark"] .vh-lane-empty .vh-lane-label, html[data-theme="dark"] .vh-card-due, html[data-theme="dark"] .vh-card-prio,
html[data-theme="dark"] .vh-card-sub, html[data-theme="dark"] .vh-card-resolved .vh-card-summary,
html[data-theme="dark"] .vh-card-meta, html[data-theme="dark"] .vh-lane-field, html[data-theme="dark"] .vh-col-wip { color: var(--vh-muted); }
html[data-theme="dark"] .vh-col-head.vh-col-over { background: var(--vh-tint-danger); border-top-color: var(--vh-c-danger); }
html[data-theme="dark"] .vh-col-over-note { color: var(--vh-c-danger-text); }
html[data-theme="dark"] .vh-col-add { color: var(--vh-muted); }
html[data-theme="dark"] .vh-col-add:hover, html[data-theme="dark"] .vh-col-add:focus { background: var(--vh-surface-3); color: var(--vh-c-primary-text); }
html[data-theme="dark"] .vh-quick-add { background: var(--vh-raised); box-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 0 0 1px color-mix(in srgb, var(--vh-c-primary) 45%, transparent); }
html[data-theme="dark"] .vh-quick-add-actions .vh-hint { color: var(--vh-muted); }
html[data-theme="dark"] .vh-lane-head:hover .vh-lane-title { background: var(--vh-hover); }
html[data-theme="dark"] .vh-lane-count { background: var(--vh-surface-3); }
html[data-theme="dark"] .vh-lane-head:hover .vh-lane-count { background: var(--vh-border-strong); }
html[data-theme="dark"] .vh-lane-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
html[data-theme="dark"] .vh-lane-dot-empty { background: transparent; box-shadow: inset 0 0 0 2px #5a5a75; }
html[data-theme="dark"] .vh-cell-resolved { background: #212132; }
html[data-theme="dark"] .vh-board-dragging .vh-cell:hover { background: var(--vh-tint-primary); box-shadow: inset 0 0 0 1px var(--vh-c-primary-tint-strong); }
html[data-theme="dark"] .vh-card { background: #2a2a3e; box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .05); }
html[data-theme="dark"] .vh-card:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .45), 0 0 0 1px color-mix(in srgb, var(--vh-c-primary-soft) 50%, transparent); }
html[data-theme="dark"] .vh-card-id, html[data-theme="dark"] .vh-card-id:hover { color: color-mix(in srgb, var(--vh-project-color, #3699FF) 60%, #fff); }
html[data-theme="dark"] .vh-card-resolved .vh-card-id { color: var(--vh-muted); }
html[data-theme="dark"] .vh-card-type {
color: color-mix(in srgb, var(--vh-type-color) 55%, #fff);
background-color: color-mix(in srgb, var(--vh-type-color) 24%, #2a2a3e);
}
html[data-theme="dark"] .vh-card-lock { color: #5a5a75; }
/* pilność terminu (DueUrgency: .vh-due-* w vh-issue.css, obwódki kart w vh-board.css) */
html[data-theme="dark"] {
--vh-due-overdue: #F7A3A5; --vh-due-overdue-bg: #4A2325; --vh-due-overdue-ring: #C6585D;
--vh-due-soon: #F7B385; --vh-due-soon-bg: #462C19; --vh-due-soon-ring: #D07940;
--vh-due-near: #ECCE83; --vh-due-near-bg: #3F3419; --vh-due-near-ring: #C79E41;
}
html[data-theme="dark"] .vh-card.vh-card-due-overdue { box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 0 0 1px var(--vh-due-overdue-ring); }
html[data-theme="dark"] .vh-card.vh-card-due-soon { box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 0 0 1px var(--vh-due-soon-ring); }
html[data-theme="dark"] .vh-card.vh-card-due-near { box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 0 0 1px var(--vh-due-near-ring); }
html[data-theme="dark"] .vh-card.vh-card-due-overdue:hover, html[data-theme="dark"] .vh-card.vh-card-due-soon:hover, html[data-theme="dark"] .vh-card.vh-card-due-near:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .45), 0 0 0 2px color-mix(in srgb, var(--vh-c-primary-soft) 60%, transparent); }
html[data-theme="dark"] .vh-card.vh-card-active { box-shadow: 0 0 0 2px var(--vh-c-primary), 0 4px 12px color-mix(in srgb, var(--vh-c-primary) 30%, transparent); }
html[data-theme="dark"] .vh-card-ghost { background: var(--vh-tint-primary); }
html[data-theme="dark"] .vh-card-drag, html[data-theme="dark"] .vh-card.sortable-fallback { box-shadow: 0 12px 28px rgba(0, 0, 0, .6) !important; }
html[data-theme="dark"] .vh-board-tile:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
/* zwinięte kolumny, menu kolumn, modal zgłoszenia w ramce (zmienne --vh-strip-* / --vh-modal-* / --vh-embed-* wyżej) */
html[data-theme="dark"] .vh-col-toggle, html[data-theme="dark"] .vh-cols-menu-count { color: var(--vh-muted); }
html[data-theme="dark"] .vh-col-toggle:hover, html[data-theme="dark"] .vh-col-toggle:focus { color: var(--vh-c-primary-text); }
html[data-theme="dark"] .vh-col-head.vh-col-collapsed .vh-col-toggle, html[data-theme="dark"] .vh-cell-strip-count { color: var(--vh-text-2); }
html[data-theme="dark"] .vh-board-dragging .vh-cell.vh-col-collapsed { box-shadow: inset 0 0 0 1px var(--vh-c-primary-tint-strong); }
html[data-theme="dark"] .vh-issue-modal-dialog { box-shadow: 0 24px 64px rgba(0, 0, 0, .6); }
html[data-theme="dark"] .vh-issue-modal-loading { color: var(--vh-text-2); }
html[data-theme="dark"] .vh-issue-modal-close { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 2px 6px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .vh-embed-bar { box-shadow: 0 1px 0 var(--vh-line), 0 6px 18px rgba(0, 0, 0, .3); }
/* edytor tablicy */
html[data-theme="dark"] .vh-cols-head { color: var(--vh-muted); }
html[data-theme="dark"] .vh-col-row { background: var(--vh-surface-2); border-left-color: var(--vh-col-color, #41415a); }
html[data-theme="dark"] .vh-col-row .vh-col-handle { color: var(--vh-muted); }
html[data-theme="dark"] .vh-col-row .form-control,
html[data-theme="dark"] .vh-col-row .select2-container--default .select2-selection--multiple { background-color: var(--vh-input-bg); border-color: var(--vh-border-strong); }
html[data-theme="dark"] .vh-col-row .vh-col-invalid { color: var(--vh-c-danger-text); }
html[data-theme="dark"] .vh-cols-unassigned .vh-chip { background: var(--vh-surface); border-color: #5a5a75; color: var(--vh-text-2); }
html[data-theme="dark"] .vh-cols-unassigned .vh-chip:hover { border-color: var(--vh-c-primary); color: var(--vh-c-primary-text); }
/* ---------- raporty (vh-reports.css; wykresy — public/js/vh-reports.js) ---------- */
html[data-theme="dark"] .vh-report-card:hover { box-shadow: 0 0 30px rgba(0, 0, 0, .45); }
html[data-theme="dark"] .vh-report-card .vh-report-query code,
html[data-theme="dark"] .vh-report-query-link code { background: var(--vh-surface-3); color: var(--vh-text-2); }
html[data-theme="dark"] .vh-report-query-link:hover code { background: var(--vh-tint-primary); color: var(--vh-c-primary-text); }
html[data-theme="dark"] .vh-report-type-option { background: var(--vh-surface); border-color: var(--vh-border-strong); }
html[data-theme="dark"] .vh-report-type-option:hover { border-color: #5a5a75; }
html[data-theme="dark"] .vh-report-type-option.active { background: var(--vh-tint-primary); border-color: var(--vh-c-primary); }
html[data-theme="dark"] .vh-report-examples .btn code { color: var(--vh-text); }
html[data-theme="dark"] .vh-report-table thead th { background: var(--vh-surface); border-bottom-color: var(--vh-border) !important; color: var(--vh-text-2) !important; }
html[data-theme="dark"] .vh-report-table td { border-top-color: var(--vh-border); }
html[data-theme="dark"] .vh-report-table tfoot td { border-top-color: var(--vh-border-strong); background: var(--vh-surface-2); }
html[data-theme="dark"] .vh-report-dot { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
html[data-theme="dark"] .apexcharts-canvas .apexcharts-tooltip.apexcharts-theme-dark,
html[data-theme="dark"] .apexcharts-tooltip.apexcharts-theme-dark { background: #2f2f46; border: 1px solid #45455f; color: #f2f2f8; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title { background: #26263a; border-bottom-color: #45455f; }
html[data-theme="dark"] .apexcharts-xaxistooltip, html[data-theme="dark"] .apexcharts-yaxistooltip { background: #2f2f46; border-color: #45455f; color: #f2f2f8; }
html[data-theme="dark"] .apexcharts-menu { background: var(--vh-raised); border-color: var(--vh-border); }
html[data-theme="dark"] .apexcharts-menu-item:hover { background: var(--vh-hover); }
/* ---------- automatyzacje (vh-automation.css) ---------- */
html[data-theme="dark"] .vh-automation-position, html[data-theme="dark"] .vh-automation-summary .vh-rule-part + .vh-rule-part::before,
html[data-theme="dark"] .vh-rule-empty { color: var(--vh-muted); }
html[data-theme="dark"] .vh-automation-summary, html[data-theme="dark"] .vh-trigger-help { color: var(--vh-text-2); }
html[data-theme="dark"] .vh-rule-kw, html[data-theme="dark"] .vh-rule-summary .vh-sum-kw, html[data-theme="dark"] .vh-rule-item-no { color: var(--vh-c-primary-text); }
html[data-theme="dark"] .vh-rule-item[data-kind="actions"] .vh-rule-item-no { color: var(--vh-c-success-text); }
html[data-theme="dark"] .vh-template-card { border-color: var(--vh-border); }
html[data-theme="dark"] .vh-template-card:hover { border-color: var(--vh-c-primary-tint-strong); box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .vh-template-unavailable:hover { border-color: var(--vh-border); }
html[data-theme="dark"] .vh-run-change, html[data-theme="dark"] .vh-rule-summary .vh-sum-block { color: var(--vh-text); }
html[data-theme="dark"] .vh-trigger-card { background: var(--vh-surface-2); border-color: var(--vh-border); color: var(--vh-text-2); }
html[data-theme="dark"] .vh-trigger-card i { color: var(--vh-muted); }
html[data-theme="dark"] .vh-trigger-card:hover { border-color: var(--vh-c-primary-tint-strong); color: var(--vh-text); }
html[data-theme="dark"] .vh-trigger-card:hover i, html[data-theme="dark"] .vh-trigger-card.active i { color: var(--vh-c-primary-text); }
html[data-theme="dark"] .vh-trigger-card.active { background: var(--vh-tint-primary); border-color: var(--vh-c-primary); color: var(--vh-text-strong); }
html[data-theme="dark"] .vh-trigger-help { background: var(--vh-surface-2); }
html[data-theme="dark"] .vh-rule-item { background: var(--vh-surface-2); border-color: var(--vh-border); border-left-color: var(--vh-c-primary); }
html[data-theme="dark"] .vh-rule-item[data-kind="actions"] { border-left-color: var(--vh-c-success); }
html[data-theme="dark"] .vh-rule-item-invalid { background: #2a1d26; border-color: #5a2a38; border-left-color: var(--vh-c-danger); }
html[data-theme="dark"] .vh-rule-item-new { animation-name: vh-flash-in-dark; }
@keyframes vh-flash-in-dark { from { background: var(--vh-c-primary-tint); } to { background: var(--vh-surface-2); } }
html[data-theme="dark"] .vh-add-menu .dropdown-item.disabled { color: #62627c; }
html[data-theme="dark"] .vh-var-chip { background: var(--vh-surface-3); color: var(--vh-text-2); }
html[data-theme="dark"] .vh-var-chip:hover { background: var(--vh-c-primary); color: #fff; }
html[data-theme="dark"] .vh-public-warning { background: var(--vh-tint-warning); color: var(--vh-c-warning-text); }
html[data-theme="dark"] .vh-sum-errors { background: var(--vh-tint-danger); color: var(--vh-c-danger-text); }
html[data-theme="dark"] .vh-dry-stat .text-muted { color: var(--vh-text-2) !important; }
/* ---------- projekty i pola (vh-projects.css) ---------- */
html[data-theme="dark"] .vh-project-tile:hover { box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .45); }
html[data-theme="dark"] .vh-fields-table tbody tr[data-id] { background: transparent; }
html[data-theme="dark"] .vh-code { color: var(--vh-text-2); background: var(--vh-surface-3); }
html[data-theme="dark"] .vh-value-row { background: var(--vh-surface); border-color: var(--vh-border); }
html[data-theme="dark"] .vh-value-row:hover { border-color: var(--vh-border-strong); }
html[data-theme="dark"] .vh-value-row.vh-value-archived { background: var(--vh-surface-2); }
html[data-theme="dark"] .vh-color-picker { background: var(--vh-input-bg); border-color: var(--vh-border-strong); }
html[data-theme="dark"] .vh-swatch { border-color: var(--vh-surface); box-shadow: 0 0 0 1px #5a5a75; }
html[data-theme="dark"] .vh-swatch.active { box-shadow: 0 0 0 2px var(--vh-c-primary); }
html[data-theme="dark"] .vh-swatch-none { background: var(--vh-input-bg); color: var(--vh-muted); }
/* ---------- maile (vh-mail.css) — podgląd HTML maila w ramce zostaje jasny (to treść maila) ---------- */
html[data-theme="dark"] .vh-mail-preview-text { color: var(--vh-text); background: var(--vh-surface-2); }
html[data-theme="dark"] .vh-var:hover, html[data-theme="dark"] .vh-var:focus { background: var(--vh-tint-primary); color: var(--vh-c-primary-text); }
html[data-theme="dark"] .vh-mail-log-frame { border-color: var(--vh-border); }
html[data-theme="dark"] .vh-mail-headers { background: var(--vh-surface-2); color: var(--vh-text); }
html[data-theme="dark"] .vh-mail-meta th { color: var(--vh-text-2); }
/* ---------- dokumentacja API / MCP ---------- */
html[data-theme="dark"] #vh-api-doc pre, html[data-theme="dark"] #vh-mcp-doc pre { background: #161622; border: 1px solid var(--vh-border); }
html[data-theme="dark"] #vh-mcp-doc .vh-md h2 { border-top-color: var(--vh-border); }
html[data-theme="dark"] #vh-mcp-doc .vh-md th, html[data-theme="dark"] #vh-mcp-doc .vh-md td { border-color: var(--vh-border-strong); }
html[data-theme="dark"] #vh-mcp-doc .vh-md th { background: var(--vh-surface-2); }
/* Swagger UI: przyciemnienie odwróceniem jasności (kolory metod zachowują odcień); obrazki z powrotem */
html[data-theme="dark"] #swagger-ui .swagger-ui { filter: invert(.9) hue-rotate(180deg); }
html[data-theme="dark"] #swagger-ui .swagger-ui img, html[data-theme="dark"] #swagger-ui .swagger-ui .microlight { filter: invert(1) hue-rotate(180deg); }
/* ---------- strony bez logowania (security/_layout.html.twig), błędy ---------- */
/* logo w dwóch wersjach: ![]()
+ ![]()
(resztą display steruje layout) */
html:not([data-theme="dark"]) .vh-logo-on-dark, html[data-theme="dark"] .vh-logo-on-light { display: none !important; }
html[data-theme="dark"] .vh-auth-main { background: var(--vh-bg); }
html[data-theme="dark"] .vh-auth-card h2 { color: var(--vh-text-strong); }
html[data-theme="dark"] .vh-auth-card .vh-subtitle { color: var(--vh-text-2); }
html[data-theme="dark"] .vh-auth-card label { color: var(--vh-text); }
html[data-theme="dark"] .vh-auth-brand { background: linear-gradient(150deg, #12121c 0%, #161f30 60%, #133248 100%); }
html[data-theme="dark"] .vh-error { background: var(--vh-bg); }
/* ---------- podgląd klienta /t/{token} (body.vh-public) i formularz /embed/{klucz}?theme=dark (body.vh-embed) — vh-embed.css ---------- */
html[data-theme="dark"] body.vh-public,
html[data-theme="dark"] body.vh-embed {
--vh-accent: #2ea3dd;
--vh-accent-dark: #5cbbec;
--vh-accent-soft: #16304a;
--vh-navy: #eef3f8;
--vh-text: #d4d9e2;
--vh-muted: #97a3b4;
--vh-border: #33384a;
--vh-bg: #151521;
--vh-card: #1e1e2d;
--vh-danger: #ff6b7b;
--vh-danger-soft: #3d2230;
--vh-success: #34d399;
--vh-success-soft: #133128;
--vh-warning-soft: #3a2e17;
--vh-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .3);
color: var(--vh-text);
}
html[data-theme="dark"] body.vh-embed { background: transparent; }
html[data-theme="dark"] .vh-p-top, html[data-theme="dark"] .vh-p-card, html[data-theme="dark"] .vh-p-bubble,
html[data-theme="dark"] .vh-p-file { background: var(--vh-card); }
html[data-theme="dark"] .vh-p-item.is-client .vh-p-bubble { background: #182638; border-color: #264a66; }
html[data-theme="dark"] .vh-p-event-dot span { background: var(--vh-card); }
html[data-theme="dark"] .vh-p-avatar { background: #3a4a66; }
html[data-theme="dark"] .vh-e-input, html[data-theme="dark"] .vh-e-select, html[data-theme="dark"] .vh-e-textarea,
html[data-theme="dark"] .vh-e-drop { background-color: #191926; }
html[data-theme="dark"] .vh-e-input:focus, html[data-theme="dark"] .vh-e-select:focus, html[data-theme="dark"] .vh-e-textarea:focus { background-color: #191926; }
html[data-theme="dark"] .vh-e-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2397a3b4' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .vh-e-alert-danger { color: #ffb3bb; border-color: #5a2a38; }
html[data-theme="dark"] .vh-e-alert-warning, html[data-theme="dark"] .vh-e-preview-bar { color: #ffd27a; border-color: #5e4a1c; }
html[data-theme="dark"] .vh-e-alert-info { border-color: #264a66; }
html[data-theme="dark"] .vh-e-files li.is-bad { color: #ffb3bb; }
html[data-theme="dark"] .vh-e-btn-light:hover { background: #26263a; }
html[data-theme="dark"] .vh-e-captcha img { filter: invert(.88) hue-rotate(180deg); }
/* ---------- Ulubione (pasek w nagłówku, gwiazdki) ---------- */
html[data-theme="dark"] .vh-fav-link { background: var(--vh-surface-2); color: var(--vh-text); }
html[data-theme="dark"] .vh-fav-link:hover, html[data-theme="dark"] .vh-fav-link.active { background: color-mix(in srgb, var(--vh-c-primary) 16%, transparent); color: var(--vh-c-primary-text); }
html[data-theme="dark"] .vh-fav-link i { color: var(--vh-muted); }
html[data-theme="dark"] .vh-fav-link:hover i, html[data-theme="dark"] .vh-fav-link.active i { color: var(--vh-c-primary-text); }
html[data-theme="dark"] .vh-fav-count { background: var(--vh-surface); color: var(--vh-c-primary-text); }
html[data-theme="dark"] .vh-fav-star { color: var(--vh-muted); }
html[data-theme="dark"] .vh-fav-star:hover { background: color-mix(in srgb, var(--vh-c-warning) 14%, transparent); color: var(--vh-c-warning-text); }
html[data-theme="dark"] .vh-fav-star.is-favorite { color: var(--vh-c-warning-text); }
/* ---------- Zapisane wyszukiwania: wybór ikony ---------- */
html[data-theme="dark"] .vh-icon-option { border-color: var(--vh-border-strong); color: var(--vh-text-2); }
html[data-theme="dark"] .vh-icon-option.is-checked, html[data-theme="dark"] .vh-icon-option:has(input:checked) { background: color-mix(in srgb, var(--vh-c-primary) 16%, transparent); border-color: var(--vh-c-primary); color: var(--vh-c-primary-text); }
/* ===== Zgłaszający (nadzoruje) — przełącznik Pracownik / Klient (vh-issue.css) ===== */
html[data-theme="dark"] .vh-reporter-kind .btn.btn-outline-secondary:not(:disabled):not(.disabled).active,
html[data-theme="dark"] .vh-reporter-editor .btn-group-toggle .btn.btn-outline-secondary:not(:disabled):not(.disabled).active { color: var(--vh-c-primary-text); border-color: var(--vh-c-primary); background: var(--vh-tint-primary); }
html[data-theme="dark"] .vh-reporter-kind .btn.btn-outline-secondary:not(:disabled):not(.disabled).active i,
html[data-theme="dark"] .vh-reporter-editor .btn-group-toggle .btn.btn-outline-secondary:not(:disabled):not(.disabled).active i { color: var(--vh-c-primary-text); }
/* ============================================================ obieg pracy (vh-workflow.css — moduł W1) */
html[data-theme="dark"] .vh-cat-backlog { --vh-cat: #A1A5B7; }
html[data-theme="dark"] .vh-cat-new { --vh-cat: #6CB4FF; }
html[data-theme="dark"] .vh-cat-in_progress { --vh-cat: #3FD6CE; }
html[data-theme="dark"] .vh-cat-waiting_reporter { --vh-cat: #FFC24D; }
html[data-theme="dark"] .vh-cat-discuss { --vh-cat: #E9B06A; }
html[data-theme="dark"] .vh-cat-fix { --vh-cat: #FF7B8B; }
html[data-theme="dark"] .vh-cat-testing { --vh-cat: #3BD9A4; }
html[data-theme="dark"] .vh-cat-to_send { --vh-cat: #B08CFF; }
html[data-theme="dark"] .vh-cat-done { --vh-cat: #B5B5C3; }
html[data-theme="dark"] .vh-cat-canceled { --vh-cat: #8D8FA3; }
html[data-theme="dark"] .vh-cat-none { --vh-cat: #6D6D80; }
@supports (color: oklch(from red l c h)) {
html[data-theme="dark"] .vh-cat-badge {
color: oklch(from var(--vh-cat) .82 calc(c * .6) h);
background: oklch(from var(--vh-cat) .3 calc(c * .3) h);
border-color: oklch(from var(--vh-cat) .42 calc(c * .4) h);
}
}
html[data-theme="dark"] .vh-qs-btn { background: var(--vh-surface-2); color: var(--vh-text); }
html[data-theme="dark"] .vh-qs-btn:hover, html[data-theme="dark"] .vh-qs-btn:focus-visible { color: #fff; }
html[data-theme="dark"] .vh-reopen-icon { background: color-mix(in srgb, var(--vh-c-warning) 14%, transparent); }
html[data-theme="dark"] .vh-reopen-list { background: var(--vh-surface-2); }
html[data-theme="dark"] .vh-wf-section-icon { background: color-mix(in srgb, var(--vh-c-primary) 14%, transparent); }
/* ---------- stonowane kolory wartości i projektów (public/css/vh-colors.css): ciemne tło, jasny tekst w tej samej barwie ---------- */
@supports (color: oklch(from red l c h)) {
html[data-theme="dark"] .vh-badge, html[data-theme="dark"] .vh-state-badge {
background-color: oklch(from var(--vh-badge, #E4E6EF) .34 calc(c * .4) h);
color: oklch(from var(--vh-badge, #E4E6EF) .87 calc(c * .55) h);
box-shadow: inset 0 0 0 1px oklch(from var(--vh-badge, #E4E6EF) .45 calc(c * .5) h);
}
html[data-theme="dark"] .vh-badge-resolved { background-color: oklch(from var(--vh-badge, #E4E6EF) .31 calc(c * .22) h); }
html[data-theme="dark"] .vh-state-badge .vh-state-count { background: oklch(from var(--vh-badge, #E4E6EF) .42 calc(c * .45) h); }
html[data-theme="dark"] .vh-priority-mark {
background-color: oklch(from var(--vh-badge, #B5B5C3) .36 calc(c * .45) h);
color: oklch(from var(--vh-badge, #B5B5C3) .88 calc(c * .55) h);
box-shadow: inset 0 0 0 1px oklch(from var(--vh-badge, #B5B5C3) .46 calc(c * .5) h);
}
html[data-theme="dark"] .vh-id-pill {
color: oklch(from var(--vh-project-color, #3699FF) .84 calc(c * .55) h);
background-color: oklch(from var(--vh-project-color, #3699FF) .33 calc(c * .35) h);
}
html[data-theme="dark"] a.vh-id-pill:hover { color: #fff; background-color: oklch(from var(--vh-project-color, #3699FF) .52 calc(c * .75) h); }
html[data-theme="dark"] .vh-id-pill.vh-id-resolved { color: var(--vh-text-2); background-color: var(--vh-surface-3); }
html[data-theme="dark"] .vh-card-id, html[data-theme="dark"] .vh-card-id:hover { color: oklch(from var(--vh-project-color, #3699FF) .82 calc(c * .55) h); }
html[data-theme="dark"] .vh-card-resolved .vh-card-id { color: var(--vh-muted); }
html[data-theme="dark"] .vh-card-type {
color: oklch(from var(--vh-type-color, #7E8299) .84 calc(c * .5) h);
background-color: oklch(from var(--vh-type-color, #7E8299) .34 calc(c * .38) h);
}
html[data-theme="dark"] .vh-list-type { color: oklch(from var(--vh-type-color, #7E8299) .8 calc(c * .5) h); }
html[data-theme="dark"] .vh-choice-chips .btn.vh-chip-btn.active {
color: oklch(from var(--vh-badge, #7E8299) .86 calc(c * .55) h);
background: oklch(from var(--vh-badge, #7E8299) .33 calc(c * .4) h);
border-color: oklch(from var(--vh-badge, #7E8299) .46 calc(c * .5) h);
}
html[data-theme="dark"] .vh-qs-btn i { color: oklch(from var(--vh-qs-color) .78 calc(c * .6) h); }
html[data-theme="dark"] .vh-qs-btn:hover, html[data-theme="dark"] .vh-qs-btn:focus-visible {
background: oklch(from var(--vh-qs-color) .52 calc(c * .7) h);
border-color: oklch(from var(--vh-qs-color) .52 calc(c * .7) h);
}
}