/* NanoSoftWeb – kontrolki DevExpress (skórka Office365) dopasowane do powłoki z shell.css.
   Kolory i promienie biorą się ze zmiennych --ns-*, więc zmiana palety w shell.css obejmuje też kontrolki.
   Ciemny motyw (Code/Motyw.cs) przełącza DevExpress na Office365Dark, a klasy na *_Office365Dark – każdy selektor
   z *_Office365 ma obok odpowiednik *_Office365Dark (pilnuje tego tests/DevExpressCss.Tests.ps1). Wyjątek: pozycje
   sprite'a (dxWeb_*), które w ciemnym motywie są inne. */

/* ---------- Nagłówek strony ---------- */
.ns-content .container > h3:first-child,
.ns-content .container > h2:first-child {
    margin: 0 0 16px;
    color: var(--ns-heading);
    font-size: 22px;
    font-weight: 600;
}

/* ---------- Siatka (ASPxGridView) – karta jak panel menu ---------- */
.ns-content .dxgvControl_Office365,
.ns-content .dxgvControl_Office365Dark {
    border: 1px solid var(--ns-border) !important;
    border-radius: 10px;
    border-collapse: separate;
    background: var(--ns-surface);
    color: var(--ns-text);
}
/* Bez overflow/clip-path: lista „Rozmiar strony” i inne podmenu renderują się wewnątrz siatki
   i zostałyby przycięte. Zamiast tego zaokrąglamy narożne komórki.
   Wewnętrzna tabela nie może mieć własnego tła – jej ostre białe rogi wystawałyby poza obramowanie. */
.ns-content .dxgvControl_Office365 .dxgvTable_Office365,
.ns-content .dxgvControl_Office365Dark .dxgvTable_Office365Dark { background: transparent !important; }
.ns-content .dxgvControl_Office365 .dxgvTable_Office365 > tbody > tr:first-child > td:first-child,
.ns-content .dxgvControl_Office365Dark .dxgvTable_Office365Dark > tbody > tr:first-child > td:first-child { border-top-left-radius: 9px; }
.ns-content .dxgvControl_Office365 .dxgvTable_Office365 > tbody > tr:first-child > td:last-child,
.ns-content .dxgvControl_Office365Dark .dxgvTable_Office365Dark > tbody > tr:first-child > td:last-child { border-top-right-radius: 9px; }
.ns-content .dxgvTitlePanel_Office365,
.ns-content .dxgvTitlePanel_Office365Dark { border-radius: 9px 9px 0 0; }
.ns-content .dxgvPagerBottomPanel_Office365,
.ns-content .dxgvPagerBottomPanel_Office365Dark { border-radius: 0 0 9px 9px; }
/* Bez pagera narożniki dolne należą do ostatniego wiersza (dane, stopka z sumami, „Brak danych”) */
.ns-content .dxgvControl_Office365:not(:has(.dxgvPagerBottomPanel_Office365)) .dxgvTable_Office365 > tbody > tr:last-child > td:first-child,
.ns-content .dxgvControl_Office365Dark:not(:has(.dxgvPagerBottomPanel_Office365Dark)) .dxgvTable_Office365Dark > tbody > tr:last-child > td:first-child { border-bottom-left-radius: 9px; }
.ns-content .dxgvControl_Office365:not(:has(.dxgvPagerBottomPanel_Office365)) .dxgvTable_Office365 > tbody > tr:last-child > td:last-child,
.ns-content .dxgvControl_Office365Dark:not(:has(.dxgvPagerBottomPanel_Office365Dark)) .dxgvTable_Office365Dark > tbody > tr:last-child > td:last-child { border-bottom-right-radius: 9px; }
.ns-content .dxgvControl_Office365 .dxgvTable_Office365,
.ns-content .dxgvControl_Office365Dark .dxgvTable_Office365Dark { border: 0 !important; }
.ns-content .dxgvHeader_Office365,
.ns-content .dxgvHeader_Office365Dark {
    background: var(--ns-subtle) !important;
    color: var(--ns-text-soft) !important;
    font-weight: 600;
    border-color: var(--ns-border) !important;
}
.ns-content .dxgvHeader_Office365 a,
.ns-content .dxgvHeader_Office365Dark a { color: var(--ns-brand-dark); }
.ns-content .dxgvFilterRow_Office365 > td,
.ns-content .dxgvFilterRow_Office365Dark > td { background: var(--ns-subtle); border-bottom: 1px solid var(--ns-border) !important; }
.ns-content .dxgvDataRow_Office365 > td,
.ns-content .dxgvDataRowAlt_Office365 > td,
.ns-content .dxgvFocusedRow_Office365 > td,
.ns-content .dxgvSelectedRow_Office365 > td,
.ns-content .dxgvDataRow_Office365Dark > td,
.ns-content .dxgvDataRowAlt_Office365Dark > td,
.ns-content .dxgvFocusedRow_Office365Dark > td,
.ns-content .dxgvSelectedRow_Office365Dark > td { border-bottom-color: var(--ns-line) !important; }
.ns-content .dxgvDataRow_Office365,
.ns-content .dxgvDataRow_Office365Dark { color: var(--ns-text); }
.ns-content .dxgvDataRowAlt_Office365,
.ns-content .dxgvDataRowAlt_Office365Dark { background: var(--ns-alt); }
.ns-content .dxgvDataRow_Office365:hover > td,
.ns-content .dxgvDataRow_Office365Dark:hover > td { background: var(--ns-hover); }
.ns-content .dxgvGroupRow_Office365 > td,
.ns-content .dxgvGroupRow_Office365Dark > td { background: var(--ns-subtle); color: var(--ns-heading); font-weight: 600; }
.ns-content .dxgvFooter_Office365 > td,
.ns-content .dxgvFooter_Office365Dark > td { background: var(--ns-subtle); color: var(--ns-heading); font-weight: 600; border-top: 1px solid var(--ns-border); }
.ns-content .dxgvEmptyDataRow_Office365 > td,
.ns-content .dxgvEmptyDataRow_Office365Dark > td { color: var(--ns-text-muted); }

/* Zaznaczony wiersz jak aktywna pozycja menu: jasne tło, niebieski pasek z lewej */
.ns-content .dxgvFocusedRow_Office365,
.ns-content .dxgvSelectedRow_Office365,
.ns-content .dxgvFocusedRow_Office365Dark,
.ns-content .dxgvSelectedRow_Office365Dark {
    background: var(--ns-brand-soft) !important;
    color: var(--ns-heading) !important;
}
.ns-content .dxgvFocusedRow_Office365 > td,
.ns-content .dxgvSelectedRow_Office365 > td,
.ns-content .dxgvFocusedRow_Office365Dark > td,
.ns-content .dxgvSelectedRow_Office365Dark > td { background: transparent !important; color: var(--ns-heading) !important; }
.ns-content .dxgvFocusedRow_Office365 > td:first-child,
.ns-content .dxgvSelectedRow_Office365 > td:first-child,
.ns-content .dxgvFocusedRow_Office365Dark > td:first-child,
.ns-content .dxgvSelectedRow_Office365Dark > td:first-child { box-shadow: inset 3px 0 var(--ns-brand); }
.ns-content .dxgvFocusedRow_Office365 a,
.ns-content .dxgvSelectedRow_Office365 a,
.ns-content .dxgvFocusedRow_Office365 .dxeHyperlink_Office365,
.ns-content .dxgvSelectedRow_Office365 .dxeHyperlink_Office365,
.ns-content .dxgvFocusedRow_Office365Dark a,
.ns-content .dxgvSelectedRow_Office365Dark a,
.ns-content .dxgvFocusedRow_Office365Dark .dxeHyperlink_Office365Dark,
.ns-content .dxgvSelectedRow_Office365Dark .dxeHyperlink_Office365Dark { color: var(--ns-brand-dark) !important; }
.ns-content .dxgvFocusedRow_Office365 .dxeBase_Office365,
.ns-content .dxgvSelectedRow_Office365 .dxeBase_Office365,
.ns-content .dxgvFocusedRow_Office365Dark .dxeBase_Office365Dark,
.ns-content .dxgvSelectedRow_Office365Dark .dxeBase_Office365Dark { color: var(--ns-heading) !important; }
/* Skórka podmienia w zaznaczonym wierszu checkboxy na białe (pod ciemne tło) – przywracamy zwykłe.
   Pozycje sprite'a skopiowane z reguł bazowych Office365 (DevExpress 26.1). */
.ns-content .dxgvFocusedRow_Office365 .dxWeb_edtCheckBoxChecked_Office365,
.ns-content .dxgvSelectedRow_Office365 .dxWeb_edtCheckBoxChecked_Office365 { background-position: -522px -166px; }
.ns-content .dxgvFocusedRow_Office365 .dxWeb_edtCheckBoxGrayed_Office365,
.ns-content .dxgvSelectedRow_Office365 .dxWeb_edtCheckBoxGrayed_Office365 { background-position: -256px -224px; }
.ns-content .dxgvFocusedRow_Office365 .dxWeb_edtCheckBoxUnchecked_Office365,
.ns-content .dxgvSelectedRow_Office365 .dxWeb_edtCheckBoxUnchecked_Office365 { background-position: -400px -224px; }

/* Pager */
.ns-content .dxgvPagerBottomPanel_Office365,
.ns-content .dxgvPagerTopPanel_Office365,
.ns-content .dxgvPagerBottomPanel_Office365Dark,
.ns-content .dxgvPagerTopPanel_Office365Dark { background: var(--ns-surface); color: var(--ns-text-muted); }
.ns-content .dxpLite_Office365 .dxp-num,
.ns-content .dxpLite_Office365 .dxp-button,
.ns-content .dxpLite_Office365Dark .dxp-num,
.ns-content .dxpLite_Office365Dark .dxp-button { border-radius: 6px; }
.ns-content .dxpLite_Office365 .dxp-num:hover,
.ns-content .dxpLite_Office365Dark .dxp-num:hover { background: var(--ns-hover); color: var(--ns-heading); }
.ns-content .dxpLite_Office365 .dxp-current,
.ns-content .dxpLite_Office365Dark .dxp-current { border-radius: 6px; background: var(--ns-fill) !important; color: var(--ns-on-fill) !important; }

/* Formularz edycji w siatce */
.ns-content .dxgvEditFormDisplayRow_Office365 > td,
.ns-content .dxgvEditForm_Office365 > td,
.ns-content .dxgvEditFormDisplayRow_Office365Dark > td,
.ns-content .dxgvEditForm_Office365Dark > td { background: var(--ns-subtle); }

/* ---------- Pola edycyjne ---------- */
.dxeTextBox_Office365,
.dxeButtonEdit_Office365,
.dxeMemo_Office365,
.dxeTextBox_Office365Dark,
.dxeButtonEdit_Office365Dark,
.dxeMemo_Office365Dark {
    border-color: var(--ns-input-border) !important;
    border-radius: 6px;
    background: var(--ns-surface);
}
.dxeTextBox_Office365:hover,
.dxeButtonEdit_Office365:hover,
.dxeMemo_Office365:hover,
.dxeTextBox_Office365Dark:hover,
.dxeButtonEdit_Office365Dark:hover,
.dxeMemo_Office365Dark:hover { border-color: var(--ns-faint) !important; }
.dxeTextBox_Office365.dxeFocused_Office365,
.dxeButtonEdit_Office365.dxeFocused_Office365,
.dxeMemo_Office365.dxeFocused_Office365,
.dxeTextBox_Office365Dark.dxeFocused_Office365Dark,
.dxeButtonEdit_Office365Dark.dxeFocused_Office365Dark,
.dxeMemo_Office365Dark.dxeFocused_Office365Dark {
    border-color: var(--ns-brand) !important;
    box-shadow: 0 0 0 3px var(--ns-focus-ring);
}
/* Paleta ozdobna: tęczowa ramka 2px (gradient na border-box pod tłem na padding-box, keyframes ns-tecza w shell.css);
   szerokość trzyma border-box, ale wysokość tabeli pola rośnie o 2px – oddaje ją margines -1px góra/dół */
.ns-ozdobna .dxeTextBox_Office365.dxeFocused_Office365,
.ns-ozdobna .dxeButtonEdit_Office365.dxeFocused_Office365,
.ns-ozdobna .dxeMemo_Office365.dxeFocused_Office365,
.ns-ozdobna .dxeTextBox_Office365Dark.dxeFocused_Office365Dark,
.ns-ozdobna .dxeButtonEdit_Office365Dark.dxeFocused_Office365Dark,
.ns-ozdobna .dxeMemo_Office365Dark.dxeFocused_Office365Dark {
    margin-top: -1px;
    margin-bottom: -1px;
    border: 2px solid transparent !important;
    background: linear-gradient(var(--ns-surface), var(--ns-surface)) padding-box, var(--ns-tecza) border-box !important;
    background-size: auto, 300% 100% !important;
    box-shadow: 0 0 0 3px var(--ns-tecza-cien);
    animation: ns-tecza 6s linear infinite;
}
.dxeButtonEdit_Office365 .dxeButton_Office365,
.dxeButtonEdit_Office365 .dxeButtonEditButton_Office365,
.dxeButtonEdit_Office365Dark .dxeButton_Office365Dark,
.dxeButtonEdit_Office365Dark .dxeButtonEditButton_Office365Dark { border-radius: 0 5px 5px 0; }
/* Memo: textarea ma własne białe tło z ostrymi rogami, które wystawałyby poza zaokrągloną ramkę */
.dxeMemo_Office365 .dxeMemoEditArea_Office365,
.dxeMemo_Office365Dark .dxeMemoEditArea_Office365Dark { background: transparent !important; border-radius: 5px; }
.dxeEditArea_Office365,
.dxeEditArea_Office365Dark { color: var(--ns-text); }
.dxeNullText_Office365 .dxeEditArea_Office365,
.dxeNullText_Office365Dark .dxeEditArea_Office365Dark { color: var(--ns-faint); }

/* ---------- Przyciski – kształt jak Bootstrapowy .btn.btn-primary („Zapisz” w Ustawienia/Wygląd), kolory marki --ns-brand ----------
   Tylko wypełnione przyciski (dxbTSys); przyciski RenderMode="Link" zostają linkami.
   Pomijamy przycisk logowania (.auth-btn – własny styl w site.css) i paski przycisków w dymku wizyty kalendarza;
   te oraz linki zachowują poniższy styl ogólny. */
.dxbButton_Office365,
.dxbButton_Office365Dark { border-radius: 7px; font-weight: 600; }
.dxbButton_Office365.dxbButtonHover_Office365,
.dxbButton_Office365Dark.dxbButtonHover_Office365Dark { filter: brightness(.93); }
.dxbButton_Office365.dxbButtonPressed_Office365,
.dxbButton_Office365Dark.dxbButtonPressed_Office365Dark { filter: brightness(.85); }

.dxbButton_Office365.dxbTSys:not(.auth-btn):not(.dxsc-dat-buttons-container *),
.dxbButton_Office365Dark.dxbTSys:not(.auth-btn):not(.dxsc-dat-buttons-container *) {
    filter: none !important;
    width: auto;
    padding: 0;
    border: 1px solid var(--ns-fill);
    border-radius: 4px;
    background-color: var(--ns-fill);
    color: var(--ns-on-fill);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: normal;
    transition: none;
}
/* flex zamiast komórki tabeli: wyrównanie „middle” do linii tekstu dodawało 1–2 px wysokości */
.dxbButton_Office365.dxbTSys:not(.auth-btn):not(.dxsc-dat-buttons-container *) div.dxb,
.dxbButton_Office365Dark.dxbTSys:not(.auth-btn):not(.dxsc-dat-buttons-container *) div.dxb {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border: 0;
    line-height: 20px;
}
.dxbButton_Office365.dxbTSys:not(.auth-btn):not(.dxsc-dat-buttons-container *) .dx-vam,
.dxbButton_Office365Dark.dxbTSys:not(.auth-btn):not(.dxsc-dat-buttons-container *) .dx-vam { padding: 0; line-height: 20px; }
.dxbButton_Office365.dxbTSys:not(.auth-btn):not(.dxsc-dat-buttons-container *):focus-within,
.dxbButton_Office365Dark.dxbTSys:not(.auth-btn):not(.dxsc-dat-buttons-container *):focus-within {
    background-color: var(--ns-fill-hover);
    border-color: var(--ns-fill-hover);
}
.dxbButton_Office365.dxbTSys:not(.auth-btn):not(.dxsc-dat-buttons-container *):has(:focus-visible),
.dxbButton_Office365Dark.dxbTSys:not(.auth-btn):not(.dxsc-dat-buttons-container *):has(:focus-visible) {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}
.dxbButton_Office365.dxbTSys:not(.auth-btn):not(.dxsc-dat-buttons-container *).dxbButtonHover_Office365,
.dxbButton_Office365Dark.dxbTSys:not(.auth-btn):not(.dxsc-dat-buttons-container *).dxbButtonHover_Office365Dark {
    background-color: var(--ns-fill-hover);
    border-color: var(--ns-fill-hover);
}
.dxbButton_Office365.dxbTSys:not(.auth-btn):not(.dxsc-dat-buttons-container *).dxbButtonPressed_Office365,
.dxbButton_Office365.dxbTSys:not(.auth-btn):not(.dxsc-dat-buttons-container *).dxbButtonChecked_Office365,
.dxbButton_Office365Dark.dxbTSys:not(.auth-btn):not(.dxsc-dat-buttons-container *).dxbButtonPressed_Office365Dark,
.dxbButton_Office365Dark.dxbTSys:not(.auth-btn):not(.dxsc-dat-buttons-container *).dxbButtonChecked_Office365Dark {
    background-color: var(--ns-fill-hover);
    border-color: var(--ns-fill-hover);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.dxbButton_Office365.dxbTSys:not(.auth-btn):not(.dxsc-dat-buttons-container *).dxbDisabled_Office365,
.dxbButton_Office365Dark.dxbTSys:not(.auth-btn):not(.dxsc-dat-buttons-container *).dxbDisabled_Office365Dark {
    background-color: var(--ns-fill);
    border-color: var(--ns-fill);
    color: var(--ns-on-fill);
    opacity: .65;
    box-shadow: none;
    cursor: not-allowed;
}
/* DevExpress zaznacza fokus kropkowaną ramką w środku – zastępuje ją obwódka jak w Bootstrapie */
.dxbButton_Office365.dxbTSys:not(.auth-btn):not(.dxsc-dat-buttons-container *) div.dxbf,
.dxbButton_Office365Dark.dxbTSys:not(.auth-btn):not(.dxsc-dat-buttons-container *) div.dxbf { border: 0; }
/* Na wypełnionym niebieskim przycisku ikony białe. Przyciski RenderMode="Link"
   nie mają klasy dxbTSys (tło przezroczyste) – ich kolorowe ikony zostają. */
.dxbButton_Office365.dxbTSys img.dx-vam,
.dxbButton_Office365Dark.dxbTSys img.dx-vam { filter: brightness(0) invert(1); }
.dxbButton_Office365.dxbTSys.dxbDisabled_Office365 img.dx-vam,
.dxbButton_Office365Dark.dxbTSys.dxbDisabled_Office365Dark img.dx-vam { opacity: .6; }
/* Wyłączony przycisk w stylu Bootstrapa jest przygaszony w całości – ikona bez dodatkowego przygaszenia */
.dxbButton_Office365.dxbTSys:not(.auth-btn):not(.dxsc-dat-buttons-container *).dxbDisabled_Office365 img.dx-vam,
.dxbButton_Office365Dark.dxbTSys:not(.auth-btn):not(.dxsc-dat-buttons-container *).dxbDisabled_Office365Dark img.dx-vam { opacity: 1; }

/* Przycisk wyboru pliku w ASPxUploadControl – motyw podświetla go kolorem akcentu (#F87C1D, z baseColor
   w Web.config – ciemnoniebieski); po najechaniu kolor marki, a tekst i ikona (szary SVG
   z Content/vendor/nanosoft/ikony) białe */
.dxucBrowseButtonHover_Office365,
.dxucBrowseButtonPressed_Office365,
.dxucBrowseButtonHover_Office365Dark,
.dxucBrowseButtonPressed_Office365Dark {
    background-color: var(--ns-fill) !important;
    border-color: var(--ns-fill) !important;
    color: var(--ns-on-fill);
}
.dxucControl_Office365 .dxucBrowseButtonHover_Office365 a,
.dxucControl_Office365 .dxucBrowseButtonPressed_Office365 a,
.dxucControl_Office365Dark .dxucBrowseButtonHover_Office365Dark a,
.dxucControl_Office365Dark .dxucBrowseButtonPressed_Office365Dark a { color: var(--ns-on-fill); }
.dxucBrowseButtonHover_Office365 img,
.dxucBrowseButtonPressed_Office365 img,
.dxucBrowseButtonHover_Office365Dark img,
.dxucBrowseButtonPressed_Office365Dark img { filter: brightness(0) invert(1); }

/* Dodatkowe przyciski w polach (np. „wyczyść” w ASPxDateEdit/ASPxComboBox) – po najechaniu i wciśnięciu
   motyw wypełnia je kolorem --ns-fill, więc szara ikona z Content/vendor/nanosoft/ikony robi się biała
   (selektor z klasą pola, żeby przebić rozjaśnienie ikon z ciemny.css) */
.dxeButtonEdit_Office365 .dxeButtonEditButtonHover_Office365 img[src*="/nanosoft/ikony/"],
.dxeButtonEdit_Office365 .dxeButtonEditButtonPressed_Office365 img[src*="/nanosoft/ikony/"],
.dxeButtonEdit_Office365Dark .dxeButtonEditButtonHover_Office365Dark img[src*="/nanosoft/ikony/"],
.dxeButtonEdit_Office365Dark .dxeButtonEditButtonPressed_Office365Dark img[src*="/nanosoft/ikony/"] { filter: brightness(0) invert(1); }

/* Pasek menedżera plików: ikony z Content/vendor/nanosoft/ikony nie mają wersji „disabled”
   (motyw podmieniał sprite) – nieaktywny przycisk (np. Usuń bez zaznaczonego pliku) przygaszamy */
.dxfmControl_Office365 .dxm-disabled img,
.dxfmControl_Office365Dark .dxm-disabled img { opacity: .4; }
/* Menu podręczne (prawy przycisk na pliku) – te same ikony co pasek, w rozmiarze wiersza menu */
.dxfmControl_Office365 .dxm-popup img.dxm-image,
.dxfmControl_Office365Dark .dxm-popup img.dxm-image { width: 16px; height: 16px; }
/* Obrazek w linii tekstu zostawiał pod ikoną miejsce na „ogonki” liter (większy odstęp od dołu
   niż z boków i od góry) – ikona jako blok, wyśrodkowana, z równym odstępem; niższy pasek
   (motyw: 5px wokół paska + 2px nad i pod menu) */
.dxfmControl_Office365 .dxfm-toolbar .dxsplLCC,
.dxfmControl_Office365Dark .dxfm-toolbar .dxsplLCC { padding: 2px 5px; }
.dxfmControl_Office365 .dxfm-toolbar .dxmLite_Office365 .dxm-main,
.dxfmControl_Office365Dark .dxfm-toolbar .dxmLite_Office365Dark .dxm-main { margin: 0; }
.dxfmControl_Office365 .dxfm-toolbar .dxm-horizontal.dxmtb .dxm-item .dxm-content,
.dxfmControl_Office365Dark .dxfm-toolbar .dxm-horizontal.dxmtb .dxm-item .dxm-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    line-height: 0;
}
.dxfmControl_Office365 .dxfm-toolbar .dxm-horizontal.dxmtb .dxm-item .dxm-content img,
.dxfmControl_Office365Dark .dxfm-toolbar .dxm-horizontal.dxmtb .dxm-item .dxm-content img {
    display: block;
    margin: 0;
    /* ikony wbudowanych przycisków są ustawione w <Images> kontrolki (wspólne z menu podręcznym), bez rozmiaru */
    width: 22px;
    height: 22px;
}
/* Przyciski to komórki tabeli o wysokości najwyższej komórki – pola „Filtr” (31,5px + 2×3,4px marginesu);
   wyrównane do góry dostawały cały nadmiar pod ikoną. Pole bez marginesu, przyciski wyśrodkowane. */
.dxfmControl_Office365 .dxfm-toolbar li.dxfm-filter,
.dxfmControl_Office365Dark .dxfm-toolbar li.dxfm-filter { padding-top: 0; padding-bottom: 0; }
.dxfmControl_Office365 .dxfm-toolbar ul.dx > li,
.dxfmControl_Office365Dark .dxfm-toolbar ul.dx > li { vertical-align: middle; }
/* Kolory paska z palety: tło jak karta, najechanie i zaznaczony przełącznik widoku (np. „Miniaturki”)
   w szarościach zamiast koloru bazowego motywu (baseColor z Web.config), na którym szara ikona ginęła */
.dxfmControl_Office365 .dxfm-toolbar,
.dxfmControl_Office365Dark .dxfm-toolbar {
    background-color: var(--ns-surface);
    border-bottom: 1px solid var(--ns-border);
}
.dxfmControl_Office365 .dxfm-toolbar .dxmLite_Office365 .dxm-main.dxmtb .dxm-item.dxm-hovered,
.dxfmControl_Office365Dark .dxfm-toolbar .dxmLite_Office365Dark .dxm-main.dxmtb .dxm-item.dxm-hovered {
    background-color: var(--ns-hover) !important;
}
.dxfmControl_Office365 .dxfm-toolbar .dxmLite_Office365 .dxm-main.dxmtb .dxm-item.dxm-checked,
.dxfmControl_Office365 .dxfm-toolbar .dxmLite_Office365 .dxm-main.dxmtb .dxm-item.dxm-checked.dxm-hovered,
.dxfmControl_Office365Dark .dxfm-toolbar .dxmLite_Office365Dark .dxm-main.dxmtb .dxm-item.dxm-checked,
.dxfmControl_Office365Dark .dxfm-toolbar .dxmLite_Office365Dark .dxm-main.dxmtb .dxm-item.dxm-checked.dxm-hovered {
    background-color: var(--ns-hover) !important;
    box-shadow: inset 0 0 0 1px var(--ns-border);
    border-radius: 4px;
    color: var(--ns-text) !important;
}

/* ---------- FormLayout ---------- */
.ns-content .dxflCaption_Office365,
.ns-content .dxflCaption_Office365Dark { color: var(--ns-text-soft); }
.ns-content .dxflGroupBox_Office365,
.ns-content .dxflGroupBox_Office365Dark {
    border: 1px solid var(--ns-border) !important;
    border-radius: 10px;
    background: var(--ns-surface);
}
.ns-content .dxflGroupBoxCaption_Office365,
.ns-content .dxflGroupBoxCaption_Office365Dark {
    background: var(--ns-bg) !important;
    color: var(--ns-heading) !important;
    font-weight: 600;
}

/* ---------- Okna (ASPxPopupControl) – jak menu użytkownika ---------- */
.dxpcLite_Office365 .dxpc-mainDiv,
.dxpcLite_Office365Dark .dxpc-mainDiv {
    border: 1px solid var(--ns-border) !important;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px var(--ns-shadow) !important;
}
.dxpcLite_Office365 .dxpc-header,
.dxpcLite_Office365Dark .dxpc-header {
    background: var(--ns-surface) !important;
    border-bottom: 1px solid var(--ns-border) !important;
    color: var(--ns-heading);
    font-weight: 600;
}

/* ---------- Listy rozwijane ---------- */
.dxpcDropDown_Office365 .dxpc-mainDiv,
.dxpcDropDown_Office365Dark .dxpc-mainDiv {
    border-color: var(--ns-border) !important;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px var(--ns-shadow) !important;
}
.dxeListBoxItemSelected_Office365,
.dxeListBoxItemSelected_Office365Dark { background: var(--ns-brand-soft) !important; color: var(--ns-brand-dark) !important; }
.dxeListBoxItemHover_Office365,
.dxeListBoxItemHover_Office365Dark { background: var(--ns-hover) !important; }

/* Klasy nadawane w znacznikach zamiast BackColor/ForeColor (działają w obu motywach) */
/* Kolory z bazowego CSS kontrolek (bez sufiksu motywu – poza generatorem paleta-dx-*.css) */
.dxscControl_Office365 .dxsc-agenda-month-of-year-cell,
.dxscControl_Office365Dark .dxsc-agenda-month-of-year-cell { color: var(--ns-text-muted); }
.dxfmControl_Office365 .dxfm-bcLastItem,
.dxfmControl_Office365Dark .dxfm-bcLastItem { color: var(--ns-text-muted); }
/* Kalendarz: nagłówek dnia zaznaczonego przedziału (bazowo pomarańczowy, baseColor go nie obejmuje) */
.dxscControl_Office365 .dxsc-HeaderHighlight,
.dxscControl_Office365Dark .dxsc-HeaderHighlight { background-color: var(--ns-brand-soft); }
/* Agenda: nagłówek dzisiejszego dnia (TodayVerticalDateHeader – DateCell / DayCell, DayOfWeekCell, MonthOfYearCell) */
.dxscAgendaView .ns-agenda-dzis { background-color: var(--ns-brand-soft); }
.dxscAgendaView .ns-agenda-dzis,
.dxscAgendaView .ns-agenda-dzis-tekst { color: var(--ns-heading); }
/* Agenda: zaznaczona wizyta podświetlona jak zaznaczony wiersz gridu. DevExpress rysuje zaznaczenie warstwą
   dxscAptSelDiv nad wizytą (czarna ramka 50% – na ciemnym tle niewidoczna); tu warstwa idzie pod treść jako tło
   (z-index warstwy jest w atrybucie style, stąd !important) */
.dxscAgendaView .dxsc-agenda-apt { z-index: 1; }
.dxscAgendaView .dxscAptSelDiv { z-index: 0 !important; opacity: 1; border: 0; background: var(--ns-brand-soft); }
/* Grid: wiersz pokazywany nad formularzem edycji (Styles-EditFormDisplayRow) */
.ns-content tr.ns-gv-edytowany > td { background-color: var(--ns-brand-soft); }
/* Grid: opuszczona wizyta (ListaWizytPacjenta.aspx.cs) */
.ns-content tr.ns-gv-opuszczona > td { background-color: var(--ns-danger-soft); }