/* NanoSoftWeb.Blazor – jedyne miejsce na różnice względem starej aplikacji. site.css, shell.css i kartoteka.css są
   kopiami 1:1 z NanoSoftWeb/Content/vendor/nanosoft (test ZgodnoscZeStaraAplikacja); tu to, co w starej aplikacji dawały
   Bootstrap 3 (podstawy, rozwijane menu), ciemny.css (tło strony) i kontrolki DevExpress (pole wyszukiwania).
   Tylko tokeny --ns-* z shell.css – bez kolorów wpisanych na sztywno. */

/* ---------- podstawy (Bootstrap: scaffolding, type) ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 14px; line-height: 1.42857143; -webkit-text-size-adjust: 100%; }
html body.ns-dark { background-color: var(--ns-bg); color: var(--ns-text); }   /* ciemny.css */
h1, h2 { margin-top: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; vertical-align: middle; }
a { text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
.ns-item:hover, .ns-item:focus, .ns-ri:hover, .ns-ti:hover, .ns-logo:hover, .ns-btn:hover,
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { text-decoration: none; }
[hidden] { display: none !important; }
/* FocusOnNavigate przenosi fokus na nagłówek po przejściu (czytniki ekranu) – bez ramki, bo to nie fokus z klawiatury */
h1[tabindex="-1"]:focus { outline: none; }

/* Reguła @view-transition (płynne przejście między stronami) jest w head w App.razor: stąd nie obowiązywała przy odsłonięciu strony (test PrzejsciaStronTesty) */

/* ---------- rozwijane menu (Bootstrap: dropdowns) – menu górne A/B i menu użytkownika; .open ustawia shell.js ---------- */
.dropdown { position: relative; }
.dropdown-menu {
    position: absolute; top: 100%; left: 0; z-index: 1000; display: none; min-width: 160px;
    margin: 2px 0 0; padding: 5px 0; list-style: none; text-align: left; font-size: 14px;
    background-color: var(--ns-surface); background-clip: padding-box;
    border: 1px solid var(--ns-border); border-radius: 4px; box-shadow: 0 6px 12px var(--ns-shadow);
}
.open > .dropdown-menu { display: block; }
.dropdown-menu-right { right: 0; left: auto; }
.dropdown-menu > li > a { display: block; padding: 3px 20px; clear: both; font-weight: 400; line-height: 1.42857143; white-space: nowrap; }
.dropdown-header { display: block; padding: 3px 20px; font-size: 12px; line-height: 1.42857143; white-space: nowrap; }
.dropdown-menu .divider { height: 1px; margin: 9px 0; overflow: hidden; }
/* „Wyloguj się” to przycisk formularza POST (w starej aplikacji LoginStatus) – wygląda jak pozycja-link menu użytkownika
   (.ns-user .dropdown-menu > li > a w shell.css i site.css) */
.ns-wyloguj { margin: 0; }
.ns-wyloguj > button {
    display: block; width: 100%; margin: 0; padding: 8px 10px; border: 0; border-radius: 6px;
    background: none; color: var(--ns-text-soft); font: inherit; font-weight: 400; line-height: 1.42857143;
    text-align: left; white-space: nowrap; cursor: pointer;
}
.ns-wyloguj > button:hover, .ns-wyloguj > button:focus-visible { background: var(--ns-hover); color: var(--ns-heading); }
.caret {
    display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle;
    border-top: 4px dashed; border-right: 4px solid transparent; border-left: 4px solid transparent;
}

/* ---------- pole tekstowe z etykietą (zamiast ASPxButtonEdit) ---------- */
.ns-pole { display: flex; flex-direction: column; gap: 4px; margin: 0; font-weight: 400; }
.ns-pole-etykieta { color: var(--ns-text-muted); font-size: 13px; }
.ns-pole-szukaj { position: relative; display: block; }
.ns-pole-szukaj > svg {
    position: absolute; left: 8px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%);
    color: var(--ns-text-muted); pointer-events: none;
}
/* Wysokość pól: wysokość przycisku „Pokaż” (decyzja użytkownika 2026-11-04; w starej aplikacji pola 31,5 px). Czcionka 14 px i zaokrąglenie 6 px jak w starej; na dotyku większe (reguła „dotyk” niżej) */
/* Tło liczone przy polu, nie w :root: palety ustawiają tokeny na body, a var() w zmiennej rozwiązałby się kolorami :root */
:root { --ns-pole-wysokosc: 34px; --ns-pole-czcionka: 15px; --ns-pole-tlo-udzial: 50%; }
.ns-pole-szukaj input {
    width: 100%; min-height: var(--ns-pole-wysokosc); padding: 4px 8px 4px 28px;
    border: 1px solid var(--ns-input-border); border-radius: 6px;
    background: color-mix(in srgb, var(--ns-brand-soft) var(--ns-pole-tlo-udzial), var(--ns-surface)); color: var(--ns-text);
    font-size: var(--ns-pole-czcionka);
}
.ns-pole-szukaj input::placeholder { color: var(--ns-faint); }
@media (hover: hover) { .ns-pole-szukaj input:hover { border-color: var(--ns-faint); } }
.ns-pole-szukaj input:focus { outline: none; border-color: var(--ns-brand); box-shadow: 0 0 0 3px var(--ns-focus-ring); }

/* „Pokaż” karty filtrów – wysokość jak stary ASPxButton */
.ns-szukaj-pokaz { min-height: 34px; }

/* ---------- pola okien (zamiast ASPxTextBox / ASPxSpinEdit / ASPxCheckBox – np. okno słowników) ---------- */
.ns-pole { position: relative; }
.ns-pole-tekst {
    width: 100%; min-height: var(--ns-pole-wysokosc); padding: 4px 8px;
    border: 1px solid var(--ns-input-border); border-radius: 6px;
    background: color-mix(in srgb, var(--ns-brand-soft) var(--ns-pole-tlo-udzial), var(--ns-surface)); color: var(--ns-text);
    font-size: var(--ns-pole-czcionka);
}
/* Pola daty i godziny Chrome ma o pół piksela wyższe od reszty */
input[type="date"].ns-pole-tekst, input[type="time"].ns-pole-tekst { padding-top: 3px; padding-bottom: 3px; height: var(--ns-pole-wysokosc); }
@media (hover: hover) { .ns-pole-tekst:hover { border-color: var(--ns-faint); } }
.ns-pole-tekst:focus { outline: none; border-color: var(--ns-brand); box-shadow: 0 0 0 3px var(--ns-focus-ring); }

/* ---------- combo (zamiast ASPxComboBox) ----------
   Zwykły <select>, więc formularze i skrypty stron działają bez zmian. Strzałka z gradientów, bo url() nie przyjmuje tokenów kolorów.
   Lista: appearance: base-select tylko przy myszy; dotyk i przeglądarki bez tej funkcji mają listę systemową. */
select.ns-pole-tekst, .ns-sl-rozmiar select {
    --ns-combo-kolor: var(--ns-text-muted);
    appearance: none; padding-right: 24px; white-space: nowrap; text-overflow: ellipsis; cursor: pointer;
    background-image: linear-gradient(to top right, transparent 50%, var(--ns-combo-kolor) 50%), linear-gradient(to top left, transparent 50%, var(--ns-combo-kolor) 50%);
    background-repeat: no-repeat; background-size: 4px 4px; background-position: right 10.5px center, right 6.5px center;
}
/* Przy otwartej liście fokus ma jej pozycja, a nie pole – pierścień jak przy :focus, stara aplikacja też go zostawiała */
select.ns-pole-tekst:open, .ns-sl-rozmiar select:open {
    --ns-combo-kolor: var(--ns-on-fill);
    border-color: var(--ns-brand); box-shadow: 0 0 0 3px var(--ns-focus-ring);
    background-image: linear-gradient(to top right, transparent 50%, var(--ns-combo-kolor) 50%), linear-gradient(to top left, transparent 50%, var(--ns-combo-kolor) 50%), linear-gradient(var(--ns-fill), var(--ns-fill));
    background-size: 4px 4px, 4px 4px, 21px 100%; background-position: right 10.5px center, right 6.5px center, right center;
}
@media (pointer: fine) {
    @supports (appearance: base-select) {
        select.ns-pole-tekst, .ns-sl-rozmiar select, ::picker(select) { appearance: base-select; }
        /* Długa nazwa nie może wyjść na „×” i strzałkę: base-select nie ucina tekstu sam */
        select.ns-pole-tekst, .ns-sl-rozmiar select { overflow: clip; overflow-clip-margin: content-box; align-items: center; }
        select::picker-icon { display: none; }
        ::picker(select) {
            margin: 3px 0; padding: 2px 0; max-height: 235px;
            border: 1px solid var(--ns-border); border-radius: 8px; background: var(--ns-surface); color: var(--ns-text);
            box-shadow: 0 10px 30px var(--ns-shadow);
        }
        option { padding: 7px 10px; font-size: var(--ns-pole-czcionka); font-weight: 400; color: var(--ns-text); }
        option::checkmark { display: none; }
        option:hover, option:focus { outline: none; background: var(--ns-hover); }
        option:checked { background: var(--ns-brand-soft); color: var(--ns-brand-dark); }
    }
}

/* <span class="ns-combo"> = pole + „×” (CzyscPole.razor) i/lub strzałka listy podpowiedzi. „×” widoczny zawsze, jak w starej aplikacji. */
.ns-combo { position: relative; display: block; }
.ns-combo input[type="search"]::-webkit-search-cancel-button { display: none; }
.ns-combo input[type="search"], .ns-combo input[type="text"] { padding-right: 28px; }
.ns-combo:has(.ns-combo-str) input { padding-right: 48px; }
.ns-combo select.ns-pole-tekst { padding-right: 48px; }
.ns-czysc {
    position: absolute; top: 50%; right: 4px; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0;
    border: 0; border-radius: 4px; background: none; color: var(--ns-text-muted); transform: translateY(-50%); cursor: pointer;
}
.ns-combo:has(select) .ns-czysc, .ns-combo:has(.ns-combo-str) .ns-czysc { right: 23px; }
.ns-czysc svg { width: 14px; height: 14px; }
/* hover: hover – na dotyku :hover zostaje po dotknięciu i przycisk świeciłby się dalej */
@media (hover: hover) {
    .ns-czysc:hover, .ns-combo-str:hover { background: var(--ns-fill); color: var(--ns-on-fill); }
}
.ns-czysc:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ns-focus-ring); }
.ns-combo-str {
    position: absolute; top: 1px; right: 1px; bottom: 1px; display: flex; align-items: center; justify-content: center; width: 21px; padding: 0;
    border: 0; border-radius: 0 5px 5px 0; background: none; color: var(--ns-text-muted); cursor: pointer;
}
.ns-combo-str::before { content: ""; border-top: 4px solid currentColor; border-right: 4px solid transparent; border-left: 4px solid transparent; }
.ns-combo:has([aria-expanded="true"]) .ns-combo-str { background: var(--ns-fill); color: var(--ns-on-fill); }
/* Data: „×” przed ikoną kalendarza przeglądarki */
.ns-combo-data input { padding-right: 4px; }
.ns-combo-data .ns-czysc { right: 24px; }
.ns-pole-liczba { font-variant-numeric: tabular-nums; }
.ns-pole > .ns-dialog-etykieta { font-size: 14px; }
/* Pole wymagane – gwiazdka przy etykiecie jak w edytorach DevExpress (RequiredField) */
.ns-dialog-etykieta[data-ns-wymagane]::after { content: "*"; margin-left: 1px; color: var(--ns-danger); }
/* Błąd pola jak walidacja edytorów DevExpress w starej aplikacji (devexpress.css): czerwona ramka i komunikat w wypełnionym
   dymku ze strzałką pod polem – poza układem (position: absolute), więc pokazanie go nie przesuwa okna */
.ns-pole-tekst.ns-pole-zle { border-color: var(--ns-danger); }
.ns-pole-tekst.ns-pole-zle:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ns-danger) 18%, transparent); }
.ns-pole-blad {
    position: absolute; z-index: 5; top: calc(100% + 7px); left: 0;
    padding: 4px 9px; border-radius: 6px;
    background: var(--ns-danger); color: var(--ns-surface);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--ns-text) 18%, transparent);
    font-size: 12px; font-weight: 500; line-height: 1.35;
}
.ns-pole-blad::before {
    content: ""; position: absolute; left: 12px; top: -5px;
    border: 5px solid transparent; border-top: 0; border-bottom-color: var(--ns-danger);
}
.ns-pole:has(> .ns-pole-blad:not([hidden])) { margin-bottom: 20px; }   /* miejsce na dymek – jak .ns-dialog-pola w shell.css */
/* Przełącznik (ASPxCheckBox ToggleSwitchDisplayMode="Always"): <label class="ns-przelacznik"><input type="checkbox" role="switch"> tekst</label> */
.ns-przelacznik { display: inline-flex; align-items: center; gap: 10px; justify-self: start; margin: 0; font-weight: 400; cursor: pointer; }
.ns-przelacznik input {
    appearance: none; position: relative; flex: none; width: 36px; height: 20px; margin: 0;
    border-radius: 10px; background: var(--ns-input-border); cursor: pointer; transition: background-color .15s;
}
.ns-przelacznik input::before {
    content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
    border-radius: 50%; background: var(--ns-on-fill); box-shadow: 0 1px 2px var(--ns-shadow); transition: transform .15s;
}
.ns-przelacznik input:checked { background: var(--ns-fill); }
.ns-przelacznik input:checked::before { transform: translateX(16px); }
.ns-przelacznik input:focus-visible { outline: 2px solid var(--ns-brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .ns-przelacznik input, .ns-przelacznik input::before { transition: none; }
}

/* Chipy stanu i strony pagera jako linki (w starej aplikacji przyciski formularza) */
a.ns-chip, a.ns-dz-strona { text-decoration: none; }
.ns-akcja:disabled { pointer-events: auto; }

/* ---------- dotyk: wygodne pola na telefonie (min. 44 px) ---------- */
@media (pointer: coarse) {
    .ns-chip.ns-dz-zakres, .ns-dz-strona { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .ns-sl-rozmiar select { min-height: 44px; }
    .ns-sl-akcje .ns-akcja-ik, .ns-szukaj-pokaz, .ns-pole-tekst { min-height: 44px; min-width: 44px; justify-content: center; }
    /* ≥16 px: iOS nie powiększa strony przy fokusie */
    .ns-pole-tekst, .ns-pole-szukaj input { font-size: 16px; }
    .ns-pole-szukaj input { min-height: 44px; }
    input[type="date"].ns-pole-tekst, input[type="time"].ns-pole-tekst { height: 44px; }
    .ns-combo:not(.ns-combo-data) .ns-czysc { width: 32px; height: 40px; }
    .ns-combo input[type="search"], .ns-combo input[type="text"] { padding-right: 38px; }
    .ns-combo:has(.ns-combo-str) input, .ns-combo select.ns-pole-tekst { padding-right: 58px; }
    .ns-combo-str { width: 26px; }
    .ns-combo:has(select) .ns-czysc, .ns-combo:has(.ns-combo-str) .ns-czysc { right: 27px; }
    /* Znaczniki w polach większe niż przy myszy: 44-pikselowe pole, palec */
    .ns-czysc svg { width: 20px; height: 20px; }
    .ns-combo-str::before { border-top-width: 6px; border-right-width: 6px; border-left-width: 6px; }
    .ns-pole-szukaj > svg { width: 18px; height: 18px; }
    .ns-pole-szukaj input { padding-left: 34px; }
    input[type="date"]::-webkit-calendar-picker-indicator { width: 20px; height: 20px; }
    select.ns-pole-tekst, .ns-sl-rozmiar select { padding-right: 30px; background-size: 6px 6px; background-position: right 13px center, right 7px center; }
    select.ns-pole-tekst:open, .ns-sl-rozmiar select:open { background-size: 6px 6px, 6px 6px, 26px 100%; background-position: right 13px center, right 7px center, right center; }
    /* Data na telefonie: za mało miejsca w polu, „×” obok niego */
    .ns-combo-data { display: flex; align-items: center; gap: 2px; }
    .ns-combo-data input { flex: 1 1 auto; min-width: 0; }
    .ns-combo-data .ns-czysc { position: static; flex: none; width: 36px; height: 44px; transform: none; }
    .ns-przelacznik { min-height: 44px; }
    .dropdown-menu > li > a, .ns-wyloguj > button { padding-top: 12px; padding-bottom: 12px; }
}

/* ---------- strony nowej aplikacji ---------- */
.ns-blad-strony { max-width: 640px; }
.ns-blad-strony .ns-tekst-mut { font-size: 12.5px; }

/* ---------- Dziennik plików (Components/Pages/DziennikPlikow.razor; kryteria jak raporty, tabela .ns-dz-* z kartoteka.css) ---------- */
.ns-dz-pole-czynnosc { flex: 0 1 230px; min-width: 180px; }
[data-ns-uzytkownicy] .ns-dz-pole-czynnosc { flex-basis: 210px; }
@media (max-width: 767px) {
    .ns-dz-pole-czynnosc { flex: 1 1 100%; }
}
/* Użytkownicy (Components/Pages/Uzytkownicy.razor): menu „Więcej” to <details class="ns-menu-akcji"> z przyciskami (formularz akcji) */
.ns-menu-akcji .ns-menu-lista button {
    display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px;
    background: none; color: var(--ns-text-soft); font: inherit; text-align: left; white-space: nowrap; cursor: pointer;
}
.ns-menu-akcji .ns-menu-lista button:hover:not(:disabled), .ns-menu-akcji .ns-menu-lista button:focus-visible { background: var(--ns-hover); color: var(--ns-text); }
.ns-menu-akcji .ns-menu-lista button:disabled { color: var(--ns-faint); cursor: not-allowed; }
.ns-menu-akcji .ns-menu-lista button:disabled svg { color: var(--ns-faint); }
.ns-uz-wiecej > summary { cursor: pointer; }
.ns-uz-przelaczniki .ns-przelacznik { justify-self: start; }

/* ---------- raporty listowe (Components/Raporty/Raport.razor; w starej aplikacji ASPxGridView) ---------- */
.ns-rp-pole-daty { flex: 0 0 135px; }
.ns-dz-kryteria .ns-rp-pole-daty { flex-basis: 150px; }
.ns-rp-pole-terapeuty { flex: 0 1 170px; min-width: 150px; }
.ns-rp-klient { flex: 0 1 170px; min-width: 150px; position: relative; }
.ns-rp-klient .ns-rp-podpowiedzi { right: auto; width: max(100%, 320px); }
.ns-rp-podpowiedzi {
    position: absolute; z-index: 20; top: 100%; left: 0; right: 0; max-height: 320px; overflow-y: auto;
    margin: 4px 0 0; padding: 4px; list-style: none;
    border: 1px solid var(--ns-border); border-radius: 8px; background: var(--ns-surface); box-shadow: 0 6px 16px var(--ns-shadow);
}
.ns-rp-podpowiedzi li { padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.ns-rp-podpowiedzi li b { display: block; color: var(--ns-heading); font-weight: 600; }
.ns-rp-podpowiedzi li span { display: block; color: var(--ns-text-muted); font-size: 12px; }
.ns-rp-podpowiedzi li:hover, .ns-rp-podpowiedzi li[aria-selected="true"] { background: var(--ns-hover); }
.ns-rp-podpowiedzi li.ns-rp-podp-brak { color: var(--ns-text-muted); cursor: default; }
.ns-rp-podpowiedzi li.ns-rp-podp-brak:hover { background: none; }

.ns-rp-tabela .ns-rp-liczba { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ns-rp-tabela .ns-rp-data { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ns-rp-tabela th.ns-rp-liczba { white-space: normal; }
.ns-rp-tabela .ns-rp-akcje { width: 48px; padding-left: 8px; padding-right: 4px; }
.ns-rp-ukryty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ns-rp-tabela tbody tr:nth-child(even) td { background: var(--ns-subtle); }
.ns-rp-tabela tbody tr:hover td { background: var(--ns-hover); }
/* Nagłówek = link sortowania; strzałka tylko przy bieżącej kolumnie (w dół = malejąco) */
.ns-rp-tabela th a.ns-rp-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; font-weight: inherit; }
.ns-rp-tabela th a.ns-rp-sort:hover { color: var(--ns-brand); text-decoration: none; }
.ns-rp-sort svg { flex: none; width: 12px; height: 12px; visibility: hidden; transition: transform .15s; }
.ns-rp-sort-biezacy { color: var(--ns-heading); }
.ns-rp-sort-biezacy svg { visibility: visible; }
.ns-rp-sort svg.ns-rp-rosnaco { transform: rotate(180deg); }
/* Wiersz filtra */
.ns-rp-tabela .ns-rp-filtry td { padding: 6px 8px; background: var(--ns-subtle); border-bottom: 1px solid var(--ns-border); }
.ns-rp-filtr {
    width: 100%; min-width: 70px; min-height: var(--ns-pole-wysokosc); padding: 4px 8px;
    border: 1px solid var(--ns-input-border); border-radius: 6px; background: color-mix(in srgb, var(--ns-brand-soft) var(--ns-pole-tlo-udzial), var(--ns-surface)); color: var(--ns-text);
    font-size: var(--ns-pole-czcionka); font-weight: 400; text-align: left;
}
.ns-rp-filtr::placeholder { color: var(--ns-faint); }
.ns-rp-filtr:focus { outline: none; border-color: var(--ns-brand); box-shadow: 0 0 0 3px var(--ns-focus-ring); }
.ns-rp-zly .ns-rp-filtr { border-color: var(--ns-danger); }
/* Stopka siatki: podpis przy wartości innej niż suma */
.ns-rp-tabela tfoot .ns-rp-funkcja { margin-right: 5px; color: var(--ns-text-muted); font-size: 12px; font-weight: 400; }
.ns-rp-tabela tfoot .ns-rp-suma { white-space: nowrap; }
/* Menu nagłówka siatki (js/menu-siatki.js) i kreator filtrów (js/kreator-filtra.js; tokeny palet na elementach DevExtreme, które dziedziczą jasny motyw) */
@media (min-width: 768px) {
    .ns-siatka-bez-filtra .ns-rp-filtry { display: none; }
    .ns-siatka-bez-stopki tfoot { display: none; }
}
/* Wyłączona stopka także na telefonie, gdzie reguła kart ustawia jej display: block */
.ns-dz-tabela.ns-dz-karty.ns-rp-tabela.ns-siatka-bez-stopki tfoot { display: none; }
.ns-siatka-menu {
    position: fixed; z-index: 1000; display: flex; flex-direction: column; min-width: 210px; padding: 5px;
    border: 1px solid var(--ns-border); border-radius: 8px; background: var(--ns-surface); box-shadow: 0 10px 30px var(--ns-shadow); font-size: 14px;
}
.ns-siatka-menu button {
    display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px; border: 0; border-radius: 6px;
    background: none; color: var(--ns-text-soft); font: inherit; text-align: left; white-space: nowrap; cursor: pointer;
}
.ns-siatka-menu button:hover:not(:disabled), .ns-siatka-menu button:focus { outline: none; background: var(--ns-hover); color: var(--ns-text); }
.ns-siatka-menu button:disabled { color: var(--ns-faint); cursor: default; }
.ns-siatka-menu svg, .ns-siatka-menu-ik { flex: none; width: 16px; height: 16px; color: var(--ns-text-muted); }
.ns-siatka-menu button:disabled svg { color: var(--ns-faint); }
.ns-siatka-menu hr { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid var(--ns-border); }
.ns-rp-kreator-pasek { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 14px; border-bottom: 1px solid var(--ns-border); background: var(--ns-subtle); color: var(--ns-text); font-size: 14px; }
.ns-rp-kreator-pasek > svg { flex: none; width: 16px; height: 16px; color: var(--ns-text-muted); }
.ns-rp-kreator-pasek > span { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.ns-kreator-tlo { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; background: var(--ns-scrim); }
.ns-kreator { display: flex; flex-direction: column; width: min(760px, 100%); max-height: 84vh; border: 1px solid var(--ns-border); border-radius: 10px; background: var(--ns-surface); color: var(--ns-text); box-shadow: 0 12px 30px var(--ns-shadow); }
.ns-kreator-tytul { margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--ns-border); color: var(--ns-heading); font-size: 16px; font-weight: 600; }
.ns-kreator-cialo { flex: 1 1 auto; min-height: 140px; overflow: auto; padding: 14px 18px; }
.ns-kreator-ladowanie { margin: 0; color: var(--ns-text-muted); font-size: 14px; }
.ns-kreator-stopka { display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--ns-border); }
.ns-kreator-odstep { flex: 1; }
/* Selektory dłuższe niż w dx.light.css: tam kolory są wpisane na stałe dla jasnego tła */
.ns-kreator .dx-filterbuilder { background: none; color: var(--ns-text); font: inherit; font-size: 14px; }
.ns-kreator .dx-filterbuilder .dx-filterbuilder-group .dx-filterbuilder-text { color: var(--ns-text); }
.ns-kreator .dx-filterbuilder .dx-filterbuilder-group .dx-filterbuilder-text.dx-filterbuilder-group-operation { background-color: color-mix(in srgb, var(--ns-brand) 28%, var(--ns-surface)); }
.ns-kreator .dx-filterbuilder .dx-filterbuilder-group .dx-filterbuilder-text.dx-filterbuilder-item-field { background-color: color-mix(in srgb, var(--ns-brand) 14%, var(--ns-surface)); }
.ns-kreator .dx-filterbuilder .dx-filterbuilder-group .dx-filterbuilder-text.dx-filterbuilder-item-operation { background-color: color-mix(in srgb, var(--ns-ok) 18%, var(--ns-surface)); }
.ns-kreator .dx-filterbuilder .dx-filterbuilder-group .dx-filterbuilder-text .dx-filterbuilder-item-value-text { background-color: var(--ns-hover); color: var(--ns-text); }
.ns-kreator .dx-filterbuilder .dx-filterbuilder-group .dx-filterbuilder-text.dx-filterbuilder-group-operation:hover, .ns-kreator .dx-filterbuilder .dx-filterbuilder-group .dx-filterbuilder-text.dx-filterbuilder-item-field:hover, .ns-kreator .dx-filterbuilder .dx-filterbuilder-group .dx-filterbuilder-text.dx-filterbuilder-item-operation:hover, .ns-kreator .dx-filterbuilder .dx-filterbuilder-group .dx-filterbuilder-text.dx-state-active, .ns-kreator .dx-filterbuilder .dx-filterbuilder-group .dx-filterbuilder-text:focus { background-color: var(--ns-fill); color: var(--ns-on-fill); }
.ns-kreator .dx-filterbuilder .dx-filterbuilder-group .dx-icon-plus { color: var(--ns-ok); }
.ns-kreator .dx-filterbuilder .dx-filterbuilder-group .dx-icon-remove { color: var(--ns-danger); }
.ns-kreator .dx-texteditor.dx-editor-outlined { border-color: var(--ns-input-border); background: color-mix(in srgb, var(--ns-brand-soft) var(--ns-pole-tlo-udzial), var(--ns-surface)); color: var(--ns-text); }
.ns-kreator .dx-texteditor.dx-editor-outlined.dx-state-focused, .ns-kreator .dx-texteditor.dx-editor-outlined.dx-state-active { border-color: var(--ns-brand); }
.ns-kreator .dx-texteditor-input, .ns-kreator .dx-texteditor-input:-webkit-autofill { background: none; color: var(--ns-text); }
.ns-kreator .dx-placeholder, .ns-kreator .dx-placeholder::before { color: var(--ns-faint); }
/* Kalendarz pola daty w kreatorze: lista w <body>, poza oknem */
body .dx-popup-wrapper > .dx-overlay-content, .dx-dropdowneditor-overlay .dx-popup-content, .dx-dropdowneditor-overlay .dx-calendar { border-color: var(--ns-border); background-color: var(--ns-surface); color: var(--ns-text); }
.dx-dropdowneditor-overlay .dx-calendar-navigator .dx-button, .dx-dropdowneditor-overlay .dx-calendar-navigator .dx-button .dx-icon { border-color: var(--ns-border); background: none; color: var(--ns-text); }
.dx-dropdowneditor-overlay .dx-calendar-body thead th { color: var(--ns-text-muted); }
.dx-dropdowneditor-overlay .dx-calendar-cell { color: var(--ns-text); }
.dx-dropdowneditor-overlay .dx-calendar-cell.dx-calendar-other-view, .dx-dropdowneditor-overlay .dx-calendar-cell.dx-calendar-empty-cell, .dx-dropdowneditor-overlay .dx-calendar-week-number-cell { color: var(--ns-faint); }
.dx-dropdowneditor-overlay .dx-calendar-cell.dx-state-hover span { background-color: var(--ns-hover); color: var(--ns-text); }
.dx-dropdowneditor-overlay .dx-calendar-cell.dx-calendar-selected-date span { background-color: var(--ns-fill); color: var(--ns-on-fill); }
.ns-kreator .dx-dropdowneditor-icon, .ns-kreator .dx-numberbox-spin-up-icon, .ns-kreator .dx-numberbox-spin-down-icon { color: var(--ns-text-muted); }
.ns-kreator .dx-dropdowneditor.dx-state-hover:not(.dx-custom-button-hovered) .dx-dropdowneditor-icon, .ns-kreator .dx-dropdowneditor.dx-state-active .dx-dropdowneditor-icon, .ns-kreator .dx-state-hover.dx-numberbox-spin-button .dx-numberbox-spin-up-icon, .ns-kreator .dx-state-hover.dx-numberbox-spin-button .dx-numberbox-spin-down-icon { background-color: var(--ns-hover); color: var(--ns-text); }
.ns-kreator .dx-dropdowneditor.dx-dropdowneditor-active .dx-dropdowneditor-icon, .ns-kreator .dx-dropdowneditor-button.dx-state-active .dx-dropdowneditor-icon, .ns-kreator .dx-state-active.dx-numberbox-spin-button .dx-numberbox-spin-up-icon, .ns-kreator .dx-state-active.dx-numberbox-spin-button .dx-numberbox-spin-down-icon { background-color: var(--ns-fill); color: var(--ns-on-fill); }
/* Listy kreatora i edytory wartości (w <body>, poza oknem): zmienne motywu DevExtreme z tokenów palety */
body { --dx-component-color-bg: var(--ns-surface); --dx-color-main-bg: var(--ns-surface); --dx-color-primary: var(--ns-brand); --dx-color-text: var(--ns-text); --dx-color-border: var(--ns-border); }
.dx-overlay-content.dx-popup-normal, .dx-overlay-content .dx-treeview, .dx-overlay-content .dx-treeview-item { border-color: var(--ns-border); background-color: var(--ns-surface); color: var(--ns-text); }
.dx-overlay-content .dx-treeview-item.dx-state-hover, .dx-treeview-item.dx-state-focused { background-color: var(--ns-hover); color: var(--ns-text); }
.dx-filterbuilder-overlay .dx-treeview-node.dx-state-selected > .dx-treeview-item, .dx-filterbuilder-overlay .dx-treeview-node.dx-state-focused > .dx-treeview-item { background-color: var(--ns-brand-soft); color: var(--ns-text); }
.dx-filterbuilder-overlay .dx-overlay-content, .dx-filterbuilder-overlay.dx-overlay-content { border-color: var(--ns-border); }
.ns-rp-tabela tfoot td { padding: 10px 14px; border-top: 2px solid var(--ns-border); background: var(--ns-subtle); color: var(--ns-heading); font-weight: 600; }
.ns-rp-brak td.ns-dz-pusto { text-align: center; }
.ns-rp-tabela .ns-rp-przelacz { display: none; }

@media (max-width: 767px) {
    .ns-rp-pole-daty { flex: 1 1 140px; }
    .ns-rp-pole-terapeuty, .ns-rp-klient { flex: 1 1 100%; }
    /* Telefon: nagłówki jako chipy sortowania, filtry jako pola z podpisem nad kartami wierszy */
    .ns-dz-tabela.ns-dz-karty.ns-rp-tabela thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: block; }
    .ns-dz-tabela.ns-dz-karty.ns-rp-tabela thead tr.ns-rp-naglowki { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--ns-line); }
    .ns-dz-tabela.ns-dz-karty.ns-rp-tabela thead tr.ns-rp-naglowki th { display: block; padding: 0; border: 0; background: none; text-transform: none; letter-spacing: 0; font-size: 12px; }
    .ns-dz-tabela.ns-dz-karty.ns-rp-tabela thead tr.ns-rp-naglowki th.ns-rp-akcje,
    .ns-dz-tabela.ns-dz-karty.ns-rp-tabela thead tr.ns-rp-naglowki th.ns-siatka-bez-sortu,
    .ns-dz-tabela.ns-dz-karty.ns-rp-tabela thead tr.ns-rp-filtry td.ns-siatka-bez-pola { display: none; }
    .ns-rp-tabela thead th a.ns-rp-sort { padding: 4px 10px; border: 1px solid var(--ns-border); border-radius: 999px; }
    .ns-rp-tabela thead th a.ns-rp-sort-biezacy { border-color: var(--ns-brand); color: var(--ns-brand); }
    .ns-dz-tabela.ns-dz-karty.ns-rp-tabela thead tr.ns-rp-naglowki th.ns-rp-przelacz { display: block; flex: 1 1 100%; }
    .ns-rp-przelacz .ns-chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; }
    .ns-rp-przelacz .ns-chip svg { width: 14px; height: 14px; }
    .ns-rp-przelacz .ns-chip[aria-expanded="true"] { border-color: var(--ns-brand); color: var(--ns-brand); }
    .ns-dz-tabela.ns-dz-karty.ns-rp-tabela thead tr.ns-rp-filtry:not(.ns-rp-otwarte) { display: none; }
    .ns-dz-tabela.ns-dz-karty.ns-rp-tabela thead tr.ns-rp-filtry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; padding: 10px 14px; background: var(--ns-subtle); }
    .ns-dz-tabela.ns-dz-karty.ns-rp-tabela thead tr.ns-rp-filtry td { display: block; grid-column: auto; padding: 0; border: 0; background: none; text-align: left; }
    .ns-dz-tabela.ns-dz-karty.ns-rp-tabela thead tr.ns-rp-filtry td.ns-rp-akcje { display: none; }
    .ns-dz-tabela.ns-dz-karty.ns-rp-tabela thead tr.ns-rp-filtry td::before { content: attr(data-ns-etykieta); display: block; margin-bottom: 2px; color: var(--ns-text-muted); font-size: 12px; }
    .ns-rp-filtr { min-height: 40px; font-size: 16px; }   /* ≥16 px: iOS nie powiększa strony */
    /* Karta wiersza: klient na górze (także gdy w tabeli jest za terapeutą), kwoty w siatce po dwie */
    .ns-dz-tabela.ns-dz-karty.ns-rp-tabela td.ns-dz-karta-nag { grid-row: 1; font-weight: 600; color: var(--ns-heading); }
    .ns-dz-tabela.ns-dz-karty.ns-rp-tabela tbody tr:nth-child(even) td { background: none; }
    .ns-dz-tabela.ns-dz-karty.ns-rp-tabela tbody tr:nth-child(even) { background: var(--ns-subtle); }
    .ns-dz-tabela.ns-dz-karty.ns-rp-tabela:not(.ns-dz-dziennik, .ns-uz-tabela, .ns-sl-tabela) tbody tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ns-dz-tabela.ns-dz-karty.ns-rp-tabela tbody td.ns-rp-liczba { grid-column: auto; text-align: left; }
    .ns-dz-tabela.ns-dz-karty.ns-rp-tabela tr.ns-rp-brak { display: block; }
    /* Sumy: jedna karta „Razem” z podpisanymi kwotami */
    .ns-dz-tabela.ns-dz-karty.ns-rp-tabela tfoot { display: block; }
    .ns-dz-tabela.ns-dz-karty.ns-rp-tabela tfoot tr { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 12px 14px; border-top: 2px solid var(--ns-border); background: var(--ns-subtle); }
    .ns-dz-tabela.ns-dz-karty.ns-rp-tabela tfoot td { display: block; padding: 0; border: 0; background: none; text-align: left; }
    .ns-dz-tabela.ns-dz-karty.ns-rp-tabela tfoot td.ns-rp-pusta, .ns-dz-tabela.ns-dz-karty.ns-rp-tabela tfoot td.ns-rp-akcje { display: none; }
    .ns-dz-tabela.ns-dz-karty.ns-rp-tabela tfoot td.ns-rp-razem { flex: 1 1 100%; }
    .ns-dz-tabela.ns-dz-karty.ns-rp-tabela tfoot td.ns-rp-suma::before { content: attr(data-ns-etykieta) ": "; color: var(--ns-text-muted); font-size: 12px; font-weight: 400; }
}
@media (pointer: coarse) {
    .ns-rp-tabela .ns-rp-akcje .ns-akcja-ik { min-height: 44px; min-width: 44px; justify-content: center; }
    .ns-rp-tabela thead th a.ns-rp-sort { min-height: 44px; }
}

/* ---------- listy SMS (Components/Raporty/ListaSms.razor; w starej aplikacji ASPxGridView .ns-sms / .ns-smso) ----------
   Klasy treści (.ns-sms-osoba, -brak, -pod, -status, -st, -odp, -tresc, stany -ok/-blad/-czeka/-nierozp) – z site.css (kopia 1:1).
   Jeden SMS = <tbody class="ns-sms-rek"> (w wysłanych: wiersz danych + wiersz treści), linia tylko między SMS-ami, bez zebry;
   podświetlenie i zaznaczenie obejmują cały SMS. */

.ns-rp-tabela.ns-sms-tabela tbody tr td { background: none; border-bottom: 0; vertical-align: top; }
.ns-sms-tabela tbody.ns-sms-rek + tbody.ns-sms-rek { border-top: 1px solid var(--ns-line); }
.ns-sms-tabela tbody.ns-sms-rek { cursor: default; }
.ns-sms-tabela tbody.ns-sms-rek td { padding-top: 10px; padding-bottom: 10px; }
.ns-sms-wyslane tbody.ns-sms-rek > tr:first-child td { padding-bottom: 4px; }
.ns-sms-tabela tbody.ns-sms-rek td.ns-sms-k-tresc { padding-top: 0; padding-bottom: 12px; }
.ns-sms-tabela tbody.ns-sms-rek:hover td { background: var(--ns-hover); }
.ns-sms-tabela tbody.ns-sms-rek:focus { outline: none; }
.ns-sms-tabela tbody.ns-sms-rek:focus-visible { outline: 2px solid var(--ns-brand); outline-offset: -2px; }
/* Zaznaczony SMS – jak zaznaczony wiersz siatki (devexpress.css: .dxgvFocusedRow – tło marki, pasek po lewej) */
.ns-sms-tabela tbody.ns-sms-rek.ns-sms-zazn td,
.ns-sms-tabela tbody.ns-sms-rek.ns-sms-zazn:hover td { background: var(--ns-brand-soft); color: var(--ns-heading); }
.ns-sms-tabela tbody.ns-sms-rek.ns-sms-zazn tr > td:first-child { box-shadow: inset 3px 0 var(--ns-brand); }
.ns-sms-tabela th.ns-sms-k-odebrano, .ns-sms-tabela th.ns-sms-k-wyslano { width: 140px; }
.ns-sms-tabela th.ns-sms-k-klient { width: 240px; }
.ns-sms-tabela th.ns-sms-k-telefon, .ns-sms-tabela td.ns-sms-k-tel { white-space: nowrap; }
.ns-sms-tabela th.ns-sms-k-odpowiedz { width: 32%; }
.ns-sms-tabela th.ns-sms-k-status { width: 220px; }

@media (max-width: 767px) {
    .ns-sms-kryteria .ns-rp-pole-daty { flex: 1 1 140px; }
    .ns-dz-tabela.ns-dz-karty.ns-sms-tabela thead th { width: auto; }
    .ns-dz-tabela.ns-dz-karty.ns-rp-tabela.ns-sms-tabela tbody tr { background: none; border-bottom: 0; }
    .ns-dz-tabela.ns-dz-karty.ns-sms-tabela tbody.ns-sms-rek + tbody.ns-sms-rek { border-top: 1px solid var(--ns-line); }
    .ns-dz-tabela.ns-dz-karty.ns-sms-tabela tbody.ns-sms-rek td { padding: 0; }
    .ns-dz-tabela.ns-dz-karty.ns-sms-tabela tbody.ns-sms-rek:hover td { background: none; }
    .ns-dz-tabela.ns-dz-karty.ns-sms-tabela tbody.ns-sms-rek:hover { background: var(--ns-hover); }
    .ns-dz-tabela.ns-dz-karty.ns-sms-tabela tbody.ns-sms-zazn,
    .ns-dz-tabela.ns-dz-karty.ns-sms-tabela tbody.ns-sms-zazn:hover { background: var(--ns-brand-soft); box-shadow: inset 3px 0 var(--ns-brand); }
    .ns-dz-tabela.ns-dz-karty.ns-sms-tabela tbody.ns-sms-zazn td { background: none; }
    .ns-dz-tabela.ns-dz-karty.ns-sms-tabela tbody.ns-sms-zazn tr > td:first-child { box-shadow: none; }
    .ns-dz-tabela.ns-dz-karty.ns-sms-tabela td.ns-dz-karta-bok { color: var(--ns-text-muted); font-size: 12px; }
    .ns-sms-wyslane tbody.ns-sms-rek > tr:first-child { padding-bottom: 6px; }
    .ns-dz-tabela.ns-dz-karty.ns-sms-tabela tr.ns-sms-wiersz-tresci { display: block; padding-top: 0; }
    .ns-dz-tabela.ns-dz-karty.ns-sms-tabela td.ns-sms-wciecie { display: none; }
    .ns-dz-tabela.ns-dz-karty.ns-sms-tabela td.ns-sms-k-tresc { padding: 8px 10px; border-radius: 8px; background: var(--ns-subtle); }
    .ns-dz-tabela.ns-dz-karty.ns-sms-tabela tbody.ns-sms-zazn td.ns-sms-k-tresc { background: var(--ns-surface); }
}

/* ---------- Ustawienia → Wygląd / Kalendarz (etap 4) – pola HTML zamiast ASPxTimeEdit / ASPxComboBox / ASPxRadioButtonList;
   układ kart i schematu z site.css / shell.css (kopie) ---------- */
.ns-wybor-nazwa input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--ns-fill); }
.ns-ust-godziny .ns-ust-czas { width: 120px; font-variant-numeric: tabular-nums; }
.ns-pole-lista { cursor: pointer; }
.ns-ust-tabela .ns-pole-lista { min-width: 0; }
.ns-ust-przel { margin: 0; font-weight: 400; cursor: pointer; }
.ns-ust-radio { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ns-ust-radio > legend { float: left; margin: 0 4px 0 0; padding: 0; color: var(--ns-heading); font-size: 13px; font-weight: 600; }
.ns-ust-radio > label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; cursor: pointer; }
.ns-ust-radio input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--ns-fill); }
/* Lista zabiegów (w starej ASPxGridView – table.ns-zab-lista w site.css): wiersze wysunięte o swój odstęp jak tam */
ul.ns-zab-lista { margin: -6px -10px 0; padding: 0; list-style: none; }
ul.ns-zab-lista > li > .ns-zab-edycja { margin-inline: 10px; }
/* „Dodaj zabieg” (w starej ASPxButton RenderMode="Link") i „Usuń zabieg” (link) – przyciski wyglądające jak link */
.ns-zab-dodaj, .ns-zab-usun { padding: 0; border: 0; background: none; color: var(--ns-brand); font: inherit; cursor: pointer; }
.ns-zab-dodaj { font-weight: 600; }
.ns-zab-dodaj:hover, .ns-zab-usun:hover { text-decoration: underline; }
.ns-zab-dodaj:focus-visible, .ns-zab-usun:focus-visible { outline: 2px solid var(--ns-brand); outline-offset: 2px; border-radius: 2px; }
.ns-zab-usun { font-size: 13px; }
/* Pole koloru (w starej ASPxColorEdit) */
.ns-zab-pole-koloru {
    width: 48px; height: 32px; padding: 2px; border: 1px solid var(--ns-input-border); border-radius: 6px;
    background: var(--ns-surface); cursor: pointer;
}
.ns-zab-pole-koloru:disabled { opacity: .45; cursor: default; }
.ns-zab-pole-koloru:focus-visible { outline: 2px solid var(--ns-brand); outline-offset: 2px; }
.ns-zab-pole-koloru.ns-pole-zle { border-color: var(--ns-danger); }
.ns-zab-tekst { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.ns-zab-wlasny { margin-bottom: 0; font-weight: 400; cursor: pointer; }
.ns-zab-edycja .ns-pole-blad { top: auto; bottom: -30px; }
@media (pointer: coarse) {
    .ns-ust-radio > label, .ns-ust-przel { min-height: 44px; }
    .ns-zab-kolor { width: 36px; height: 36px; }
    .ns-zab-pole-koloru { width: 56px; height: 44px; }
    .ns-zab-dodaj, .ns-zab-usun { min-height: 44px; }
}

/* ---------- strony kont (/konto/…, /logowanie – etap 5): wygląd .auth-* z site.css jak Login.aspx / ResetPassword.aspx (karta, tło,
   szerokość na telefonie i miejsce na dymek błędu – w site.css); tu tylko pola HTML jak .auth-card .dxeTextBox starej aplikacji. */
.auth-formularz { margin: 0; }
.auth-pole { margin-top: 12px; }
.auth-etykieta { margin: 0; color: inherit; font-size: 14px; font-weight: 600; }
.auth-card .ns-pole-tekst { min-height: 40px; padding: 8px 10px; font-size: 16px; border-radius: 10px; border-color: var(--ns-input-border); background: var(--ns-subtle); color: var(--ns-heading); }
.auth-card .ns-pole-tekst:hover { border-color: var(--ns-faint); }
.auth-card .ns-pole-tekst:focus { border-color: var(--ns-brand); box-shadow: 0 0 0 3px var(--ns-focus-ring); background: var(--ns-surface); }
.auth-card .ns-pole-tekst.ns-pole-zle { border-color: var(--ns-danger); }
/* „Zapamiętaj mnie” (/logowanie) – w starej ASPxCheckBox */
.auth-zapamietaj { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 400; cursor: pointer; }
.auth-zapamietaj input { width: 18px; height: 18px; margin: 0; accent-color: var(--ns-fill); }
/* .auth-btn w starej to ASPxButton (Width="100%"); tu <button> albo <a> */
.auth-btn {
    display: block; width: 100%; text-align: center; text-decoration: none; cursor: pointer;
    font: inherit; font-size: 16px; line-height: 1.4;
}
a.auth-btn:hover, a.auth-btn:focus { color: var(--ns-on-fill); text-decoration: none; }
.auth-btn:focus-visible { outline: 2px solid var(--ns-brand); outline-offset: 2px; }
@media (pointer: coarse) {
    .auth-btn { min-height: 44px; }
    .auth-link { display: inline-block; padding: 10px 4px; }
    .auth-zapamietaj { min-height: 44px; }
}

/* ---------- Szukaj → Pacjenci (Components/Pages/SzukajPacjentow.razor, etap 6.1; w starej ASPxGridView w .ns-tabela-przewijana) ----------
   Komórki .ns-kom-* z kartoteka.css (kopia 1:1), tabela i sortowanie jak raporty (.ns-dz-tabela + .ns-rp-tabela). */
.ns-pc-tabela td { vertical-align: middle; }
.ns-pc-tabela td.ns-pc-pacjent { white-space: nowrap; }
.ns-pc-tabela .ns-pc-akcje { text-align: right; white-space: nowrap; }
.ns-pc-tabela th.ns-pc-akcje { padding-right: 14px; }
.ns-pc-skladnia { margin: 10px 0 0; font-size: 12.5px; }
.ns-pc-tabela .ns-pc-druga { display: block; }   /* nagłówek „Klient / Opiekun” w dwóch liniach jak w starej */
@media (max-width: 767px) {
    .ns-dz-tabela.ns-dz-karty.ns-pc-tabela thead tr.ns-rp-naglowki th.ns-pc-bez-sortu { display: none; }
    .ns-pc-tabela .ns-pc-druga { display: inline; margin-left: .3em; }
    .ns-dz-tabela.ns-dz-karty.ns-pc-tabela td.ns-dz-karta-nag { grid-column: 1 / -1; font-weight: inherit; white-space: normal; }
    .ns-dz-tabela.ns-dz-karty.ns-pc-tabela td.ns-pc-akcje { text-align: left; white-space: normal; }
    .ns-pc-tabela .ns-kom-akcje { flex-wrap: wrap; }
    .ns-pc-tabela .ns-kom-brak { min-height: 0; padding-left: 0; }
}
@media (pointer: coarse) {
    .ns-pc-tabela .ns-kom-akcje .ns-akcja { min-height: 44px; }
}

/* Okno wydruku (etap 6.2, wwwroot/js/podglad-wydruku.js): ramka .ns-podglad z kartoteka.css (nagłówek, pełny ekran na telefonie),
   strony PDF rysowane przez pdf.js. Na telefonie przyciski „Udostępnij” / „Drukuj” w pasku na dole (kciuk), na komputerze w nagłówku. */
.ns-wydruk-strony { flex: 1; min-height: 0; overflow: auto; display: grid; justify-items: center; align-content: start; gap: 16px; padding: 20px 24px 32px; background: var(--ns-bg); overscroll-behavior: contain; }
.ns-wydruk-strony:focus { outline: none; }
.ns-wydruk-strona { max-width: none; background: var(--ns-surface); border: 1px solid var(--ns-border); box-shadow: 0 2px 8px var(--ns-shadow); }
.ns-wydruk-strona canvas { display: block; width: 100%; height: 100%; }
.ns-wydruk-laduje { align-content: center; }
.ns-wydruk-info { padding: 40px 16px; color: var(--ns-text-muted); text-align: center; }
.ns-wydruk-info .ns-akcja { margin-top: 12px; }
.ns-wydruk-zoom { margin-right: 6px; }
.ns-wydruk-proc { min-width: 3.2em; color: var(--ns-text-muted); font-size: 13px; font-variant-numeric: tabular-nums; text-align: center; }
.ns-wydruk-gora + .ns-wydruk-gora { margin-left: 6px; }
.ns-wydruk-dol { display: none; }
.ns-wydruk-ramka { position: fixed; width: 0; height: 0; border: 0; visibility: hidden; }
.ns-wydruk-druk { display: none; }
@media (max-width: 767px), (pointer: coarse) {
    .ns-wydruk .ns-wydruk-gora { display: none; }
    .ns-wydruk-strony { gap: 10px; padding: 10px 8px 16px; }
    .ns-wydruk-dol { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--ns-border); background: var(--ns-surface); }
    .ns-wydruk-dol .ns-akcja { justify-content: center; min-height: 48px; font-size: 16px; }
}
@media (max-width: 767px) {
    .ns-wydruk .ns-podglad-tytul { padding-right: 0; flex-basis: auto; }
    .ns-wydruk .ns-podglad-akcje { flex: none; }
}
/* Druk z telefonu: tylko obrazy stron (podglad-wydruku.js), reszta strony i okno ukryte. */
@media print {
    @page { size: A4; margin: 0; }
    body.ns-wydruk-drukowanie > :not(.ns-wydruk-druk) { display: none !important; }
    body.ns-wydruk-drukowanie { background: none !important; }
    .ns-wydruk-druk { display: block; }
    .ns-wydruk-druk img { display: block; width: 210mm; height: auto; break-after: page; }
    .ns-wydruk-druk img:last-child { break-after: auto; }
}

/* ---------- Wizyty pacjenta → „Tabela” (Components/Pages/ListaWizytPacjenta.razor; w starej ASPxGridView .ns-gv-wizyty w devexpress.css) ----------
   Wizyta = <tbody class="ns-wp-rek">: wiersz danych (większy, ciemniejszy, data w pełnej plakietce) + wiersze opisu (podpis pod kolumną
   „Data”, tekst od kolumny „Terapeuta”, mniejszy i szary). Linia tylko między wizytami; odcień co drugiej wizyty (ns-wp-alt, liczony
   na stronie przez wizyty-pacjenta.js), opuszczona – --ns-danger-soft, zaznaczona – --ns-brand-soft z paskiem. „Ukryj opisy” – klasa
   ns-wp-bez-opisow na <html>. Na telefonie każda wizyta to karta. */
.ns-wp-karta { overflow: hidden; }
.ns-wp-pasek { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding: 8px 12px; border-bottom: 1px solid var(--ns-border); background: var(--ns-subtle); color: var(--ns-text); font-size: 14px; }
.ns-wp-pasek-opcje, .ns-wp-pasek-zazn { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.ns-wp-pasek-zazn { gap: 4px 6px; }
.ns-wp-info { margin-right: 4px; color: var(--ns-text-soft); font-size: 13px; }
.ns-wp-tabela th.ns-wp-k-zazn, .ns-wp-tabela td.ns-wp-k-zazn { width: 44px; padding-right: 0; text-align: center; }
.ns-wp-tabela .ns-wp-k-data { width: 170px; text-align: center; }
.ns-wp-tabela th.ns-rp-liczba { width: 130px; }
.ns-wp-tabela .ns-wp-k-akcje { width: 116px; }
.ns-wp-tabela input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--ns-fill); vertical-align: middle; }
.ns-rp-tabela th button.ns-rp-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.ns-rp-tabela th button.ns-rp-sort:hover { color: var(--ns-brand); }
.ns-rp-tabela th button.ns-rp-sort:focus-visible { outline: 2px solid var(--ns-brand); outline-offset: 2px; border-radius: 4px; }
.ns-rp-tabela.ns-wp-tabela tbody tr td, .ns-rp-tabela.ns-wp-tabela tbody tr th { background: none; border-bottom: 0; }
.ns-wp-tabela tbody.ns-wp-rek + tbody.ns-wp-rek { border-top: 1px solid var(--ns-border); }
.ns-wp-tabela tr.ns-wp-wiersz td { padding-top: 14px; padding-bottom: 9px; color: var(--ns-heading); font-size: 14.5px; }
.ns-wp-tabela tbody.ns-wp-rek > tr:last-child > * { padding-bottom: 14px; }
.ns-wp-data { display: inline-block; padding: 3px 10px; border-radius: 6px; background: var(--ns-fill); color: var(--ns-on-fill); font-weight: 600; font-variant-numeric: tabular-nums; }
.ns-wp-tabela tr.ns-wp-pole > * { padding-top: 3px; padding-bottom: 3px; vertical-align: top; }
.ns-wp-tabela tr.ns-wp-pole th { color: var(--ns-text-muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-align: center; text-transform: uppercase; white-space: nowrap; }
.ns-wp-tabela tr.ns-wp-pole td { color: var(--ns-text-muted); font-size: 12.5px; }
.ns-wp-tekst { white-space: pre-wrap; overflow-wrap: anywhere; }
html.ns-wp-bez-opisow .ns-wp-tabela tr.ns-wp-pole { display: none; }
.ns-rp-tabela.ns-wp-tabela tbody.ns-wp-alt > tr > * { background: color-mix(in srgb, var(--ns-brand) 3%, var(--ns-surface)); }
.ns-rp-tabela.ns-wp-tabela tbody.ns-wp-opuszczona > tr > * { background: var(--ns-danger-soft); }
.ns-rp-tabela.ns-wp-tabela tbody.ns-wp-rek:hover > tr > * { background: var(--ns-hover); }
.ns-rp-tabela.ns-wp-tabela tbody.ns-wp-rek:has(input[data-ns-zazn]:checked) > tr > * { background: var(--ns-brand-soft); }
.ns-wp-tabela tbody.ns-wp-rek:has(input[data-ns-zazn]:checked) > tr > :first-child { box-shadow: inset 3px 0 var(--ns-brand); }
.ns-wp-akcje { display: flex; justify-content: flex-end; gap: 2px; }
.ns-wp-ik { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ns-text-muted); cursor: pointer; transition: background-color .15s, color .15s; }
.ns-wp-ik svg { width: 18px; height: 18px; }
.ns-wp-ik:hover { background: var(--ns-hover); color: var(--ns-brand-dark); }
.ns-wp-ik:focus { outline: none; }
.ns-wp-ik:focus-visible { outline: 2px solid var(--ns-brand); outline-offset: 1px; }
.ns-dz-tabela a.ns-wp-ik:hover { text-decoration: none; }
.ns-wp-tabela .ns-rp-liczba .ns-pz { justify-content: flex-end; }
.ns-wp-tabela tfoot td { font-variant-numeric: tabular-nums; }
.ns-dz-strony button.ns-dz-strona { border: 0; background: none; font: inherit; cursor: pointer; }

@media (max-width: 767px) {
    .ns-wp-pasek { padding: 10px 14px; }
    .ns-wp-tabela, .ns-wp-tabela tbody, .ns-wp-tabela tfoot, .ns-wp-tabela thead { display: block; }
    .ns-wp-tabela tbody.ns-wp-rek[hidden] { display: none; }
    .ns-wp-tabela thead tr.ns-rp-naglowki { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--ns-line); }
    .ns-wp-tabela thead tr.ns-rp-naglowki th { display: block; width: auto; padding: 0; border: 0; background: none; text-transform: none; letter-spacing: 0; font-size: 12px; }
    .ns-wp-tabela thead th.ns-wp-k-akcje { display: none; }
    .ns-wp-tabela thead th button.ns-rp-sort { padding: 4px 10px; border: 1px solid var(--ns-border); border-radius: 999px; }
    .ns-wp-tabela thead th button.ns-rp-sort-biezacy { border-color: var(--ns-brand); color: var(--ns-brand); }
    /* Karta wizyty: [✓] data + chip | akcje; terapeuta; kwoty; opis pod spodem */
    .ns-wp-tabela tr.ns-wp-wiersz { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 12px 14px 6px; }
    .ns-wp-tabela tr.ns-wp-wiersz td { display: block; width: auto; padding: 0; border: 0; text-align: left; font-size: 14px; }
    .ns-wp-tabela tr.ns-wp-wiersz td.ns-wp-k-zazn { grid-column: 1; grid-row: 1; }
    .ns-wp-tabela tr.ns-wp-wiersz td.ns-wp-k-data { grid-column: 2; grid-row: 1; }
    .ns-wp-tabela tr.ns-wp-wiersz td.ns-wp-k-akcje { grid-column: 3; grid-row: 1; }
    .ns-wp-tabela tr.ns-wp-wiersz td.ns-wp-k-terapeuta, .ns-wp-tabela tr.ns-wp-wiersz td.ns-rp-liczba { grid-column: 2 / 4; font-size: 13px; }
    .ns-wp-tabela tr.ns-wp-wiersz td.ns-wp-k-terapeuta:empty, .ns-wp-tabela tr.ns-wp-wiersz td.ns-rp-liczba:empty { display: none; }
    .ns-wp-tabela tr.ns-wp-wiersz td[data-ns-etykieta]::before,
    .ns-wp-tabela tfoot td[data-ns-etykieta]::before { content: attr(data-ns-etykieta) ": "; color: var(--ns-text-muted); font-size: 12px; font-weight: 400; }
    .ns-wp-tabela .ns-rp-liczba .ns-pz { justify-content: flex-start; }
    .ns-wp-tabela tr.ns-wp-pole { display: block; padding: 2px 14px 2px 52px; }
    .ns-wp-tabela tr.ns-wp-pole > * { display: block; padding: 0; text-align: left; }
    .ns-wp-tabela tr.ns-wp-pole th { margin-top: 4px; text-align: left; }
    .ns-wp-tabela tr.ns-wp-pole td.ns-wp-k-zazn { display: none; }
    .ns-wp-tabela tbody.ns-wp-rek > tr:last-child { padding-bottom: 12px; }
    .ns-wp-tabela tbody.ns-wp-rek > tr:last-child > * { padding-bottom: 0; }
    .ns-rp-tabela.ns-wp-tabela tbody.ns-wp-rek > tr > * { background: none; }
    .ns-wp-tabela tbody.ns-wp-alt { background: color-mix(in srgb, var(--ns-brand) 3%, var(--ns-surface)); }
    .ns-wp-tabela tbody.ns-wp-opuszczona { background: var(--ns-danger-soft); }
    .ns-wp-tabela tbody.ns-wp-rek:has(input[data-ns-zazn]:checked) { background: var(--ns-brand-soft); box-shadow: inset 3px 0 var(--ns-brand); }
    .ns-rp-tabela.ns-wp-tabela tbody.ns-wp-rek:has(input[data-ns-zazn]:checked) > tr > * { background: none; box-shadow: none; }
    .ns-wp-tabela tfoot tr { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 12px 14px; border-top: 2px solid var(--ns-border); background: var(--ns-subtle); }
    .ns-wp-tabela tfoot td { display: block; padding: 0; border: 0; background: none; text-align: left; }
    .ns-wp-tabela tfoot td:first-child { flex: 1 1 100%; }
    .ns-wp-tabela tfoot td:last-child { display: none; }
}
@media (pointer: coarse) {
    .ns-wp-ik { width: 44px; height: 44px; }
    .ns-wp-tabela thead th button.ns-rp-sort { min-height: 44px; }
    .ns-wp-tabela input[type="checkbox"] { width: 22px; height: 22px; }
    .ns-wp-pasek .ns-akcja { min-height: 44px; }
}

/* ---------- Karta klienta (Components/Pages/KartaKlienta.razor, etap 6.3a; formularz .ns-siatka-2 / .ns-zgody / pasek zapisu z kartoteka.css) ---------- */
/* „Usuń klienta” w akcjach profilu to przycisk własnego formularza POST (w starej LinkButton) – formularz nie zmienia układu */
.ns-kk-forma { display: contents; }
/* Etykiety pól nad polem jak CaptionSettings Position="Top" edytorów DevExpress */
#nsFormKlienta .ns-pole-etykieta { margin: 0; color: var(--ns-text); font-size: 13px; font-weight: 400; }

/* ---------- Karta klienta – pacjenci (etap 6.3b): akcje na kartach, okna <dialog> dodawania / edycji i „Zmień klienta” ---------- */
/* „⋯” na końcu akcji karty pacjenta */
.ns-zwierze-akcje .ns-kk-wiecej { margin-left: auto; }
.ns-kk-wiecej > summary { cursor: pointer; }
/* Okna szersze niż .ns-uz-okno – pola pacjenta w dwóch kolumnach (stara: formularz edycji siatki ColCount="2") */
.ns-dialog.ns-kk-okno { width: 640px; }
.ns-kk-okno [hidden] { display: none; }
.ns-kk-pola-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* Lista klientów okna „Zmień klienta” (stara: siatka gvNowyKlient z wyszukiwaniem) */
.ns-kk-klienci { display: flex; flex-direction: column; max-height: min(320px, 45vh); overflow-y: auto; border: 1px solid var(--ns-border); border-radius: 8px; }
.ns-kk-klienci[aria-busy="true"] { opacity: .6; }
.ns-kk-klienci-pusto { margin: 0; padding: 12px; }
.ns-kk-klient {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 8px 12px;
    border: 0; border-bottom: 1px solid var(--ns-border); background: var(--ns-surface); color: var(--ns-text);
    font: inherit; text-align: left; cursor: pointer;
}
.ns-kk-klient:last-child { border-bottom: 0; }
.ns-kk-klient b { color: var(--ns-heading); font-weight: 600; }
.ns-kk-klient span { color: var(--ns-text-muted); font-size: 12.5px; overflow-wrap: anywhere; }
.ns-kk-klient:hover, .ns-kk-klient:focus-visible { background: var(--ns-hover); outline: none; }
.ns-kk-klient[aria-selected="true"] { background: var(--ns-brand-soft); box-shadow: inset 3px 0 0 var(--ns-brand); }
.ns-kk-wybrany { margin: 0; color: var(--ns-text-soft); font-size: 13px; }
@media (max-width: 600px) {
    .ns-kk-pola-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (pointer: coarse) {
    .ns-kk-klient { min-height: 44px; }
    .ns-kk-wiecej > summary { min-width: 44px; min-height: 44px; }
}

/* ---------- Karta klienta – rozliczanie i zaplanowane (etap 6.3c) ---------- */
/* Formularz „Rozlicz zbiorczo” (stara: ASPxFormLayout – data, płatność, „Dodaj” w jednym wierszu) */
.ns-kk-wplata .ns-podtytul { margin-top: 4px; }
.ns-kk-wplata-pola { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.ns-kk-wplata-pola .ns-pole { flex: 0 1 190px; min-width: 150px; }
.ns-kk-wplata-pola .ns-pole-etykieta { margin: 0; color: var(--ns-text); font-size: 13px; font-weight: 400; }
.ns-kk-wplata-pola .ns-akcja { min-height: 40px; }
.ns-kk-wplata-pola .ns-pole:has(> .ns-pole-blad:not([hidden])) { margin-bottom: 26px; }
.ns-kk-wplata-opis { margin: 10px 0 0; font-size: 12.5px; }
/* Lista „Pozostało do rozliczenia” (stara siatka gvPlatnosc ze stopką sum) */
.ns-kk-rozl { border: 1px solid var(--ns-line); border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.ns-kk-rozl tfoot td:first-child { color: var(--ns-text-muted); font-weight: 600; }
@media (max-width: 767px) {
    .ns-kk-wplata-pola .ns-pole { flex: 1 1 140px; }
    .ns-kk-wplata-pola .ns-akcja { flex: 1 1 100%; justify-content: center; }
    /* bez sortowania – nagłówki ukryte jak w zwykłych .ns-dz-karty (raporty pokazują je jako chipy sortowania) */
    .ns-dz-tabela.ns-dz-karty.ns-rp-tabela.ns-kk-rozl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .ns-kk-rozl td.ns-dz-karta-nag { font-weight: 600; color: var(--ns-heading); }
    .ns-kk-rozl tfoot, .ns-kk-rozl tfoot tr { display: block; }
    .ns-kk-rozl tfoot tr { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 12px 14px; border-top: 2px solid var(--ns-border); background: var(--ns-subtle); }
    .ns-kk-rozl tfoot td { display: block; padding: 0; border: 0; background: none; text-align: left; }
    .ns-kk-rozl tfoot td:first-child { flex: 1 1 100%; }
    .ns-kk-rozl tfoot td[data-ns-etykieta]::before { content: attr(data-ns-etykieta) ": "; color: var(--ns-text-muted); font-size: 12px; font-weight: 400; }
}

/* Wizyta – notatka (Components/Pages/Wizyta.razor, etap 7.1). Pole notatki = <textarea> w .ns-pole (dymek błędu); stara: ASPxMemo (tabela –
   kartoteka.css chowa „> table” zwiniętego pola). Wysokość ustawia wizyta.js w liniach tekstu (line-height z kartoteka.css). */
.ns-pole-notatki > .ns-pole { min-width: 0; }
.ns-pole-notatki textarea.ns-pole-tekst { display: block; min-height: 0; resize: none; overflow-y: hidden; }
.ns-pole-notatki.ns-zwiniete > .ns-pole { display: none; }
.ns-notatka-nag .ns-pole-lista { min-width: 170px; }
/* Etykiety pól daty i terapeuty jak podpisy DevExpress starej strony (14 px, gwiazdka pola wymaganego w kolorze marki) */
.ns-notatka-nag .ns-pole > .ns-pole-etykieta { font-size: 14px; font-weight: 400; color: var(--ns-heading); }
.ns-notatka-nag .ns-pole-etykieta[data-ns-wymagane]::after { content: "*"; color: var(--ns-brand); }
.ns-notatka-nag .ns-pole-przelacznik > .ns-przelacznik { font-size: 14px; color: var(--ns-text-soft); }

/* Wizyta – skierowania (Components/Kartoteka/SekcjaSkierowan.razor, etap 7.3): „Dodaj skierowanie” nad tabelą (na telefonie nagłówki tabeli są ukryte), kolumna ikon z lewej jak w starym gridzie */
.ns-tresc > #nsSkierowaniaWizyty { display: block; min-width: 0; }
.ns-skierowania > .ns-sk-dodaj { align-self: flex-start; margin-top: 10px; }
.ns-sk-ramka { margin-top: 10px; max-width: 100%; overflow-x: auto; border: 1px solid var(--ns-line); border-radius: 8px; }
.ns-sk-pusto { margin: 10px 0 0; color: var(--ns-text-muted); font-size: 13px; }
.ns-sk-tabela th.ns-sk-akcje, .ns-sk-tabela td.ns-sk-akcje { width: 1%; padding-left: 8px; padding-right: 8px; text-align: left; white-space: nowrap; }
.ns-sk-tabela tr:last-child td { border-bottom: 0; }
.ns-sk-uwagi { overflow-wrap: anywhere; white-space: pre-line; }

/* Wizyta – rachunek (Components/Kartoteka/PanelRachunku.razor, etap 7.2). Wiersz = stary szablon gridu z devexpress.css (.ns-rp*: nazwa,
   pod nią edytuj / usuń, cena × ilość i wartość; wpłata w jednej linii) – tu lista <ul> zamiast ASPxGridView: tło wierszy jak grid (powierzchnia,
   co drugi przyciemniony), od krawędzi do krawędzi pasa sekcji. Ikony ze sprite'a zamiast plików ikony/*.svg. */
.ns-rp-lista { margin: 0 -16px; padding: 0; list-style: none; border-top: 1px solid var(--ns-border); background: var(--ns-surface); }
.ns-rp-lista > li { padding: 5px 8px 5px 12px; border-bottom: 1px solid var(--ns-border); font-size: 13px; }
.ns-rp-lista > li:nth-child(even) { background: var(--ns-subtle); }
.ns-rp-lista > li.ns-rp-edytowany { background: var(--ns-brand-soft); }
.ns-rp { display: flex; flex-direction: column; gap: 1px; }
.ns-rp-nazwa { overflow-wrap: anywhere; font-weight: 500; }
.ns-rp-linia { display: flex; align-items: center; gap: 6px; color: var(--ns-text-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ns-rp-wplata .ns-rp-linia { color: var(--ns-text); font-size: 13px; }
.ns-rp-ik { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--ns-text-muted); cursor: pointer; }
.ns-rp-ik:first-child { margin-left: -5px; }
.ns-rp-ik:hover { background: var(--ns-hover); color: var(--ns-text); }
.ns-rp-ik:focus-visible { outline: 2px solid var(--ns-brand); outline-offset: -2px; }
.ns-rp-ik svg { width: 16px; height: 16px; }
.ns-rp-kwota { margin-left: auto; color: var(--ns-text); font-weight: 600; white-space: nowrap; }
.ns-rp-wplata .ns-rp-kwota { color: var(--ns-ok); }
.ns-rp-komentarz { padding-left: 52px; color: var(--ns-text-muted); font-size: 12px; }
.ns-rp-karnet { margin-left: 6px; padding: 0 6px; font-size: 11px; line-height: 16px; vertical-align: 1px; }
.ns-rp-pusto { margin: 0 -16px; padding: 7px 12px; border-top: 1px solid var(--ns-border); background: var(--ns-surface); color: var(--ns-text-muted); font-size: 13px; }
.ns-rp-strony { padding: 4px 0 0; }
/* Formularz edycji pod wierszem (stary EditForm gridu) */
.ns-rp-edycja { margin: 6px 0 4px; }
.ns-rp-edycja > .ns-pole + .ns-rachunek-wiersz { margin-top: 8px; }
.ns-rp-edycja-pola { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ns-rp-edycja-akcje { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
/* Rachunek i Karnet to osobne karty w jednym podmienianym bloku – odstęp jak między kartami panelu (.ns-bok) */
#nsRachunekWizyty { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ns-rp-realizacja > .ns-pole + .ns-rachunek-wiersz { margin-top: 8px; }
.ns-rp-realizacja > .ns-rachunek-wiersz { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ns-rp-realizacja > .ns-rachunek-wiersz > .ns-akcja { justify-content: center; }
.ns-rachunek .ns-pole:has(> .ns-pole-blad:not([hidden])) { margin-bottom: 34px; }
/* Podpowiedzi pola „Usługa / karnet” (stary ASPxComboBox: kolumny Nazwa / Cena / Karnet; karnet – chip zamiast czerwonego tekstu) */
.ns-rp-usluga { position: relative; }
.ns-rp-podpowiedzi {
    position: absolute; z-index: 20; top: calc(100% + 2px); left: 0; right: 0; max-height: 280px; margin: 0; padding: 4px 0; overflow-y: auto;
    list-style: none; border: 1px solid var(--ns-border); border-radius: 8px; background: var(--ns-surface);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--ns-text) 16%, transparent);
}
.ns-rp-podp { display: flex; align-items: baseline; gap: 6px; padding: 6px 10px; font-size: 13px; cursor: pointer; }
.ns-rp-podp:hover, .ns-rp-podp[aria-selected="true"] { background: var(--ns-brand-soft); }
.ns-rp-podp-nazwa { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ns-rp-podp .ns-rp-karnet { margin-left: 0; flex: none; }
.ns-rp-podp-cena { flex: none; color: var(--ns-text-muted); font-variant-numeric: tabular-nums; }
.ns-rp-podp-brak { padding: 6px 10px; color: var(--ns-text-muted); font-size: 13px; }
@media (pointer: coarse) {
    .ns-rp-ik { width: 40px; height: 40px; }
    .ns-rp-ik:first-child { margin-left: -8px; }
    .ns-rachunek-plus { width: 36px; height: 36px; }
    .ns-rp-podp { min-height: 44px; align-items: center; }
}

/* Wizyta – załączniki (etapy 7.4a, 7.4b, Components/Kartoteka/SekcjaZalacznikow.razor): własna lista zamiast ASPxFileManager. Domyślnie miniatury – ta sama tabela układana siatką;
   html.ns-zl-szczegoly (zalaczniki-wizyty.js, localStorage) – zwykła tabela. */
.ns-zl-form { position: absolute; width: 0; height: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.ns-zl-narzedzia { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ns-zl-prawa { display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.ns-zl-filtr { position: relative; display: block; flex: 0 1 240px; min-width: 0; margin: 0; font-weight: 400; }
.ns-zl-filtr svg { position: absolute; top: 50%; left: 9px; width: 15px; height: 15px; transform: translateY(-50%); color: var(--ns-text-muted); pointer-events: none; }
.ns-zl-filtr input { width: 100%; padding-left: 30px; }
.ns-zl-widoki { display: inline-flex; flex: none; gap: 2px; }
.ns-zl-widok-wl, .ns-zl-widok-wl:hover { background: var(--ns-brand-soft); color: var(--ns-brand); }

.ns-zl-zaznaczenie { position: absolute; top: 0; right: 0; left: 0; z-index: 2; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px 8px; height: 40px; padding: 3px 10px; border-bottom: 1px solid var(--ns-brand-line); border-radius: 8px 8px 0 0; background: var(--ns-brand-soft); }
.ns-zl-zaznaczenie[hidden], .ns-zl-zaznaczenie [hidden] { display: none; }
.ns-zl-zaznaczenie > .ns-akcja, .ns-zl-zaznaczenie > details > summary { flex: none; white-space: nowrap; }
.ns-zl-zaznaczenie > details { flex: none; }
/* Napisy się nie mieszczą (dopasujPasek): same ikony, pełna nazwa w title; lista i pasek zostają na miejscu */
.ns-zl-pasek-waski .ns-zl-et { display: none; }
.ns-zl-ile { margin-right: auto; color: var(--ns-text); font-size: 13px; font-weight: 600; white-space: nowrap; }
/* Okno „Przenieś” / „Kopiuj”: lista folderów z wcięciami */
.ns-zl-cele { display: flex; flex-direction: column; gap: 2px; max-height: min(50vh, 360px); overflow-y: auto; padding: 4px; border: 1px solid var(--ns-border); border-radius: 8px; }
.ns-zl-cel { display: flex; align-items: center; gap: 8px; min-height: 34px; margin: 0; padding: 4px 8px 4px calc(8px + var(--ns-zl-poziom, 0) * 18px); border-radius: 6px; font-weight: 400; cursor: pointer; }
.ns-zl-cel:hover { background: var(--ns-hover); }
.ns-zl-cel:has(input:checked) { background: var(--ns-brand-soft); }
.ns-zl-cel input { flex: none; margin: 0; accent-color: var(--ns-fill); }
.ns-zl-cel svg { flex: none; width: 18px; height: 18px; color: var(--ns-faint); }
.ns-zl-cel span { min-width: 0; overflow-wrap: anywhere; }
.ns-zl-cel-wyl { color: var(--ns-faint); cursor: not-allowed; }
.ns-zl-cel-wyl:hover { background: transparent; }
.ns-zl-postep { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 10px; color: var(--ns-text-soft); font-size: 13px; }
.ns-zl-postep[hidden] { display: none; }
.ns-zl-postep span { min-width: 0; overflow-wrap: anywhere; }
.ns-zl-postep progress { flex: 1 1 160px; height: 8px; accent-color: var(--ns-fill); }

.ns-zl-obszar { position: relative; min-height: 120px; margin-top: 10px; border: 1px solid var(--ns-line); border-radius: 8px; }
.ns-zl-upusc { position: absolute; inset: 0; z-index: 3; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 2px dashed var(--ns-brand); border-radius: 8px; background: var(--ns-brand-soft); color: var(--ns-brand); font-weight: 600; pointer-events: none; }
.ns-zl-upusc svg { width: 28px; height: 28px; }
.ns-zl-przeciaganie .ns-zl-upusc { display: flex; }

.ns-zl-sciezka { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-height: 40px; padding: 4px 10px; border-bottom: 1px solid var(--ns-line); font-size: 13px; }
.ns-zl-sep { color: var(--ns-faint); }
.ns-zl-okr { padding: 2px 4px; border: 0; border-radius: 4px; background: transparent; color: var(--ns-brand); font: inherit; cursor: pointer; overflow-wrap: anywhere; text-align: left; }
.ns-zl-okr:hover { background: var(--ns-hover); text-decoration: underline; }
.ns-zl-okr-biez { padding: 2px 4px; color: var(--ns-text); font-weight: 600; overflow-wrap: anywhere; }
.ns-zl-pusto { margin: 0; padding: 24px 12px; color: var(--ns-text-muted); font-size: 13px; text-align: center; }

.ns-zl-poz { cursor: default; }
.ns-zl-poz:focus { outline: none; }
.ns-zl-poz:focus-visible { outline: 2px solid var(--ns-brand); outline-offset: -2px; }
.ns-zl-ikona { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--ns-text-muted); }
.ns-zl-ikona svg { width: 100%; height: 100%; }
.ns-zl-miniatura { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--ns-surface); }
.ns-zl-folder { color: var(--ns-faint); }
.ns-zl-folder-wizyty { color: var(--ns-ok); }
.ns-zl-nazwa { overflow-wrap: anywhere; }
.ns-zl-w-wizycie { display: inline-flex; vertical-align: -2px; margin-left: 4px; color: var(--ns-ok); }
.ns-zl-w-wizycie svg { width: 14px; height: 14px; }
.ns-zl-zazn { width: 16px; height: 16px; margin: 0; accent-color: var(--ns-fill); }
.ns-zl-sort { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: inherit; cursor: pointer; }
.ns-zl-sort:hover { color: var(--ns-brand); }
th[aria-sort="ascending"] .ns-zl-sort::after { content: " ↑"; }
th[aria-sort="descending"] .ns-zl-sort::after { content: " ↓"; }
.ns-zl-pod { display: none; }
.ns-zl-menu-lewo { right: auto; left: 0; }

/* Miniatury (domyślnie) */
html:not(.ns-zl-szczegoly) .ns-zl-tabela { display: block; }
html:not(.ns-zl-szczegoly) .ns-zl-tabela thead { display: none; }
html:not(.ns-zl-szczegoly) .ns-zl-tabela tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; padding: 10px; }
html:not(.ns-zl-szczegoly) .ns-zl-poz { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 8px; border: 1px solid transparent; border-radius: 8px; }
html:not(.ns-zl-szczegoly) .ns-zl-poz:hover { background: var(--ns-hover); }
html:not(.ns-zl-szczegoly) .ns-zl-zaznaczony, html:not(.ns-zl-szczegoly) .ns-zl-zaznaczony:hover { border-color: var(--ns-brand-line); background: var(--ns-brand-soft); }
html:not(.ns-zl-szczegoly) .ns-zl-poz td { display: block; padding: 0; border: 0; }
html:not(.ns-zl-szczegoly) .ns-zl-poz td.ns-zl-k-opis, html:not(.ns-zl-szczegoly) .ns-zl-poz td.ns-zl-k-data, html:not(.ns-zl-szczegoly) .ns-zl-poz td.ns-zl-k-rozmiar { display: none; }
html:not(.ns-zl-szczegoly) td.ns-zl-k-ik { width: 96px; }
html:not(.ns-zl-szczegoly) .ns-zl-ikona { width: 96px; height: 96px; }
html:not(.ns-zl-szczegoly) .ns-zl-ikona svg { width: 56px; height: 56px; stroke-width: 1.5; }
html:not(.ns-zl-szczegoly) td.ns-zl-k-nazwa { width: 100%; margin-top: 6px; font-size: 13px; text-align: center; }
html:not(.ns-zl-szczegoly) .ns-zl-nazwa { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 18px; }
html:not(.ns-zl-szczegoly) .ns-zl-poz td.ns-zl-k-zazn { position: absolute; top: 8px; left: 8px; z-index: 1; opacity: 0; }
html:not(.ns-zl-szczegoly) .ns-zl-poz:hover td.ns-zl-k-zazn, html:not(.ns-zl-szczegoly) .ns-zl-poz:focus-within td.ns-zl-k-zazn, html:not(.ns-zl-szczegoly) .ns-zl-zaznaczony td.ns-zl-k-zazn { opacity: 1; }
html:not(.ns-zl-szczegoly) .ns-zl-poz td.ns-zl-k-menu { position: absolute; top: 2px; right: 2px; z-index: 1; opacity: 0; }
html:not(.ns-zl-szczegoly) .ns-zl-poz:hover td.ns-zl-k-menu, html:not(.ns-zl-szczegoly) .ns-zl-poz:focus-within td.ns-zl-k-menu, html:not(.ns-zl-szczegoly) .ns-zl-poz:has(details[open]) td.ns-zl-k-menu { opacity: 1; }
html:not(.ns-zl-szczegoly) .ns-zl-poz-wirtualny td.ns-zl-k-zazn, html:not(.ns-zl-szczegoly) .ns-zl-poz-wirtualny td.ns-zl-k-menu { display: none; }
html:not(.ns-zl-szczegoly) .ns-zl-w-wizycie { position: absolute; top: 84px; right: 12px; padding: 2px; border-radius: 50%; background: var(--ns-surface); }

/* Szczegóły */
html.ns-zl-szczegoly .ns-zl-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
html.ns-zl-szczegoly .ns-zl-tabela th { padding: 8px; border-bottom: 1px solid var(--ns-border); color: var(--ns-text-muted); font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; }
html.ns-zl-szczegoly .ns-zl-poz td { padding: 6px 8px; border-bottom: 1px solid var(--ns-line); vertical-align: middle; }
html.ns-zl-szczegoly .ns-zl-poz:last-child td { border-bottom: 0; }
html.ns-zl-szczegoly .ns-zl-poz:hover { background: var(--ns-hover); }
html.ns-zl-szczegoly .ns-zl-zaznaczony, html.ns-zl-szczegoly .ns-zl-zaznaczony:hover { background: var(--ns-brand-soft); }
html.ns-zl-szczegoly .ns-zl-k-zazn, html.ns-zl-szczegoly .ns-zl-k-ik, html.ns-zl-szczegoly .ns-zl-k-menu { width: 1%; }
html.ns-zl-szczegoly .ns-zl-ikona { width: 28px; height: 28px; }
html.ns-zl-szczegoly .ns-zl-ikona svg { width: 22px; height: 22px; }
html.ns-zl-szczegoly .ns-zl-k-data, html.ns-zl-szczegoly .ns-zl-k-rozmiar { white-space: nowrap; }
html.ns-zl-szczegoly td.ns-zl-k-rozmiar, html.ns-zl-szczegoly th.ns-zl-k-rozmiar { text-align: right; }
html.ns-zl-szczegoly td.ns-zl-k-opis { color: var(--ns-text-soft); overflow-wrap: anywhere; }

@media (max-width: 767px) {
    .ns-zl-prawa { flex: 1 1 100%; }
    /* Telefon: przyciski zawijają się w kilka linii, a dwukliku nie ma (stuknięcie otwiera podgląd) – pasek zwykłym wierszem nad ścieżką */
    .ns-zl-zaznaczenie { position: static; flex-wrap: wrap; height: auto; min-height: 40px; border-radius: 8px 8px 0 0; }
    .ns-zl-filtr { flex: 1 1 auto; }
    html:not(.ns-zl-szczegoly) .ns-zl-tabela tbody { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; padding: 6px; }
    html:not(.ns-zl-szczegoly) td.ns-zl-k-ik { width: 80px; }
    html:not(.ns-zl-szczegoly) .ns-zl-ikona { width: 80px; height: 80px; }
    html:not(.ns-zl-szczegoly) .ns-zl-w-wizycie { top: 68px; right: 6px; }
    /* Szczegóły na telefonie: wiersz ikona + nazwa + data/rozmiar/opis pod nazwą, bez nagłówków i osobnych kolumn */
    html.ns-zl-szczegoly .ns-zl-tabela thead, html.ns-zl-szczegoly .ns-zl-poz .ns-zl-k-opis, html.ns-zl-szczegoly .ns-zl-poz .ns-zl-k-data, html.ns-zl-szczegoly .ns-zl-poz .ns-zl-k-rozmiar { display: none; }
    html.ns-zl-szczegoly .ns-zl-pod { display: block; color: var(--ns-text-muted); font-size: 12px; }
    html.ns-zl-szczegoly .ns-zl-pod-opis { color: var(--ns-text-soft); overflow-wrap: anywhere; }
}
@media (pointer: coarse) {
    /* Bez najechania: pole wyboru i „⋯” zawsze widoczne; rozmiary dotykowe */
    html:not(.ns-zl-szczegoly) .ns-zl-poz td.ns-zl-k-zazn, html:not(.ns-zl-szczegoly) .ns-zl-poz td.ns-zl-k-menu { opacity: 1; }
    .ns-zl-zazn { width: 22px; height: 22px; }
    .ns-zl-okr { min-height: 44px; }
    html.ns-zl-szczegoly .ns-zl-poz { height: 44px; }
    .ns-zl-widoki .ns-akcja-ik { width: 44px; height: 44px; }
}

/* Ramka PDF / Word / Excel w oknie podglądu załącznika (etap 7.6, wwwroot/js/podglad-pdf-ramka.js): strony jak w oknie wydruku (.ns-wydruk-*); licznik stron osobno od powiększania, żeby „+” nie wyglądał jak następna strona. */
.ns-ramka-pdf-html { height: 100%; }
body.ns-ramka-pdf { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; background: var(--ns-bg); color: var(--ns-text); }
.ns-ramka-pdf .ns-wydruk-strony { padding: 8px 8px 72px; gap: 10px; justify-items: safe center; touch-action: pan-x pan-y; }   /* szczypanie obsługuje skrypt */
.ns-ramka-pdf-pasek { position: fixed; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; pointer-events: none; }
.ns-ramka-pdf-pasek[hidden] { display: none; }
.ns-ramka-pdf-licznik, .ns-ramka-pdf-zoom { display: inline-flex; align-items: center; border: 1px solid var(--ns-border); border-radius: 22px; background: var(--ns-surface); box-shadow: 0 2px 8px var(--ns-shadow); color: var(--ns-text-muted); font-size: 13px; font-variant-numeric: tabular-nums; pointer-events: auto; }
.ns-ramka-pdf-licznik { padding: 6px 12px; }
.ns-ramka-pdf-zoom { padding: 2px; }
.ns-ramka-pdf-zoom span { min-width: 3.2em; text-align: center; }
.ns-ramka-pdf-zoom button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ns-text); cursor: pointer; }
.ns-ramka-pdf-zoom svg { width: 22px; height: 22px; }
.ns-ramka-pdf-zoom button:disabled { color: var(--ns-text-muted); opacity: .4; cursor: default; }

/* ---------- strona główna (etap 9.1): 8 zdjęć po 5 s z przenikaniem, wypełnia miejsce między paskiem górnym a stopką ---------- */
.ns-content:has(.ns-start) { display: flex; flex-direction: column; padding-bottom: 0; }
.ns-content:has(.ns-start) > .container { flex: 1 0 auto; display: flex; flex-direction: column; width: 100%; max-width: none; margin: 0; padding: 0; }
.ns-start { position: relative; flex: 1 0 auto; min-height: 520px; overflow: hidden; }
.ns-start-tytul { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.ns-start-pokaz { position: absolute; inset: 0; }
.ns-start-pokaz::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--ns-navy) 30%, transparent); }
.ns-start-slajd { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; animation: ns-start-slajd 40s infinite; }
.ns-start-slajd:nth-child(1) { background-image: url(../img/start/01.jpg); }
.ns-start-slajd:nth-child(2) { background-image: url(../img/start/02.jpg); animation-delay: 5s; }
.ns-start-slajd:nth-child(3) { background-image: url(../img/start/03.jpg); animation-delay: 10s; }
.ns-start-slajd:nth-child(4) { background-image: url(../img/start/04.jpg); animation-delay: 15s; }
.ns-start-slajd:nth-child(5) { background-image: url(../img/start/05.jpg); animation-delay: 20s; }
.ns-start-slajd:nth-child(6) { background-image: url(../img/start/06.jpg); animation-delay: 25s; }
.ns-start-slajd:nth-child(7) { background-image: url(../img/start/07.jpg); animation-delay: 30s; }
.ns-start-slajd:nth-child(8) { background-image: url(../img/start/08.jpg); animation-delay: 35s; }
@keyframes ns-start-slajd { 0% { opacity: 0; } 2.5% { opacity: 1; } 12.5% { opacity: 1; } 15% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .ns-start-slajd { animation: none; }
    .ns-start-slajd:nth-child(1) { opacity: 1; }
}
@media (max-width: 576px) { .ns-start { min-height: 460px; } }

/* ---------- Administracja: Dane firmy ---------- */
.ns-df { max-width: 860px; }
.ns-df .ns-karta { margin-bottom: 16px; }
.ns-df-pola { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; align-items: end; }
.ns-df .ns-pole { position: relative; min-width: 0; }
.ns-df .ns-pole-tekst { width: 100%; }
.ns-df-pomoc { color: var(--ns-text-muted); font-size: 12px; line-height: 1.35; }
@media (max-width: 767px) { .ns-df-pola { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Kontakt, Polityka, Warunki (etap 9.1) ---------- */
.ns-kontakt-formularz .ns-pole { margin-bottom: 14px; }
.ns-kontakt-formularz .ns-pole:has(.ns-pole-zle) { margin-bottom: 40px; }
.ns-kontakt-bok .ns-karta p { margin: 0 0 6px; }
.ns-kontakt-bok .ns-karta p:last-child { margin-bottom: 0; }
.ns-kontakt-formularz .ns-pole-tekst { width: 100%; }
.ns-kontakt-uwaga { color: var(--ns-text-muted); font-size: 13px; }
.ns-kontakt-pulapka { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ns-dokument { line-height: 1.6; }
.ns-dokument h1, .ns-dokument h2 { font-size: 1.5em; color: var(--ns-brand-dark); }
.ns-dokument section { margin-bottom: 30px; }

/* ---------- paleta ozdobna (Grafit): tęczowa ramka pól nowej aplikacji, jak .form-control w site.css ---------- */
.ns-ozdobna .ns-pole-tekst:focus, .ns-ozdobna .ns-pole-szukaj input:focus {
    border: 2px solid transparent;
    background: linear-gradient(var(--ns-surface), var(--ns-surface)) padding-box, var(--ns-tecza) border-box;
    background-size: auto, 300% 100%;
    box-shadow: 0 0 0 3px var(--ns-tecza-cien);
    animation: ns-tecza 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .ns-ozdobna .ns-pole-tekst:focus, .ns-ozdobna .ns-pole-szukaj input:focus { animation: none; } }

/* Ikona menu siatki: tylko telefon i palec, gdzie nie ma prawego przycisku. Na telefonie w rzędzie chipów, na tablecie w osobnym rzędzie nad nagłówkami. */
.ns-siatka-pasek { display: none; }
@media (max-width: 767px), (pointer: coarse) {
    .ns-siatka-pasek { display: flex; justify-content: flex-end; padding: 4px 8px 0; }
    .ns-siatka-pasek .ns-akcja-ik { min-width: 44px; min-height: 44px; justify-content: center; }
    .ns-siatka-menu button { min-height: 44px; }
}
@media (max-width: 767px) {
    .ns-siatka-obszar { position: relative; }
    .ns-siatka-pasek { position: absolute; top: 3px; right: 6px; z-index: 1; padding: 0; }
    .ns-dz-tabela.ns-dz-karty.ns-rp-tabela thead tr.ns-rp-naglowki { padding-right: 58px; min-height: 50px; }
}