/* NanoSoftWeb.Blazor – kalendarz (etap 8): układ widoków. Kolory wizyt: css/wizyty.css (kopia ze starej), tutaj tylko tokeny --ns-*. Ładowany przez Components/Pages/Kalendarz.razor. */

/* Kalendarz na całą szerokość treści, bez marginesów powłoki (jak stary) */
.ns-content .container:has(> .ns-kal) { max-width: none; padding: 0; }
.ns-kal { display: flex; align-items: flex-start; }
.ns-kal-waski { max-width: 1170px; margin-inline: auto; }
.ns-kal-glowna { flex: 1 1 auto; min-width: 0; background: var(--ns-surface); }

/* Pasek: strzałki, Dziś, zakres, widoki */
.ns-kal-pasek {
    position: sticky;
    top: var(--ns-topbar-h);
    z-index: 8;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 40px;
    padding: 2px 8px;
    border-bottom: 1px solid var(--ns-border);
    background: var(--ns-surface);
}
.ns-kal-ik { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; color: var(--ns-text-soft); }
.ns-kal-ik:hover { background: var(--ns-hover); }
.ns-kal-ik svg { width: 16px; height: 16px; }
.ns-kal-dzis { padding: 4px 10px; border: 1px solid var(--ns-border); border-radius: 6px; color: var(--ns-text-soft); text-decoration: none; }
.ns-kal-dzis:hover { background: var(--ns-hover); }
.ns-kal-data { position: relative; margin: 0 8px; color: var(--ns-heading); font-weight: 600; cursor: pointer; }
.ns-kal-data input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.ns-kal-widoki { display: flex; margin-left: auto; }
.ns-kal-widoki a { padding: 8px 11px; border-bottom: 2px solid transparent; color: var(--ns-text-soft); text-decoration: none; }
.ns-kal-widoki a:hover { color: var(--ns-heading); }
.ns-kal-widoki a[aria-current="page"] { border-bottom-color: var(--ns-brand); color: var(--ns-brand); }

/* Siatka godzin: kolumna godzin + dni */
.ns-kal-siatka {
    display: grid;
    grid-template-columns: 48px repeat(var(--ns-kal-dni), minmax(0, 1fr));
    background: var(--ns-surface);
}
.ns-kal-pelna .ns-kal-siatka { max-height: calc(100vh - var(--ns-topbar-h) - 42px); overflow: auto; }
.ns-kal-pelna .ns-kal-miesiac,
.ns-kal-pelna .ns-kal-agenda { max-height: calc(100vh - var(--ns-topbar-h) - 42px); overflow: auto; }
.ns-kal-nag {
    grid-column: 1 / -1;
    position: sticky;
    top: 0;
    z-index: 6;
    display: grid;
    grid-template-columns: subgrid;
    background: var(--ns-surface);
}
.ns-kal:not(.ns-kal-pelna) .ns-kal-nag { top: calc(var(--ns-topbar-h) + 42px); }
.ns-kal-naroznik { background: var(--ns-surface); border-bottom: 1px solid var(--ns-border); }
/* Nagłówek zasobu (gabinetu): każdy zasób ma własny komplet kolumn, rozdzielone mocniejszą linią */
.ns-kal-zasob-nag {
    padding: 6px 4px;
    border-left: 1px solid var(--ns-border);
    border-bottom: 1px solid var(--ns-border);
    color: var(--ns-heading);
    font-weight: 600;
    text-align: center;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ns-kal-zasob-nag + .ns-kal-zasob-nag, .ns-kal-zasob-start { border-left: 2px solid var(--ns-text-muted); }
.ns-kal-dzien-nag {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 5px 4px;
    border-left: 1px solid var(--ns-border);
    border-bottom: 1px solid var(--ns-border);
    color: var(--ns-text-soft);
    text-align: center;
    min-width: 0;
}
.ns-kal-dzis-nag { background: var(--ns-brand-soft); color: var(--ns-heading); font-weight: 600; }
.ns-kal-poza {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--ns-subtle);
    color: var(--ns-text-soft);
    font-size: 11px;
    font-weight: 400;
    text-decoration: none;
}
.ns-kal-poza:hover { color: var(--ns-brand); text-decoration: underline; }
.ns-kal-poza svg { width: 11px; height: 11px; }

/* Wizyty całodniowe i kilkudniowe */
.ns-kal-cale {
    display: grid;
    grid-template-columns: repeat(var(--ns-kal-dni-zasobu), minmax(0, 1fr));
    grid-auto-flow: row dense;
    align-content: start;
    gap: 1px;
    padding: 1px 0;
    border-bottom: 1px solid var(--ns-border);
    background: var(--ns-subtle);
}
.ns-kal .dxsc-apt-wrapper { display: flex; overflow: hidden; box-sizing: border-box; border: 1px solid var(--ns-border); border-radius: 3px; color: var(--ns-text-soft); font-size: 12px; line-height: 16px; }
.ns-kal .dxsc-apt-container { position: relative; flex: 1 1 auto; min-width: 0; }
.ns-kal .dxsc-apt-intermediate-bg, .ns-kal .dxsc-apt-bg { position: absolute; inset: 0; }
.ns-kal .dxsc-apt-content-layer { position: relative; z-index: 2; padding: 3px 3px 3px 8px; }
/* Warstwa treści na całą wysokość kafelka: ikona serii ma stać przy jego dolnej krawędzi, a nie pod ostatnim wierszem tekstu */
.ns-kal-kolumna .dxsc-apt-content-layer { position: absolute; inset: 0; }
.dxsc-horizontal-apt .dxsc-apt-content-layer, .dxsc-horizontal-same-day-apt .dxsc-apt-content-layer {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 3px 2px 8px;
    white-space: nowrap;
}
.dxsc-horizontal-apt .ns-kal-tytul, .dxsc-horizontal-same-day-apt .ns-kal-tytul { overflow: hidden; text-overflow: ellipsis; }
.dxsc-horizontal-apt .dxsc-apt-content-layer { justify-content: center; }
.ns-kal-trwa { color: var(--ns-text-muted); font-weight: 600; }
.ns-kal-czas { flex: none; color: var(--ns-text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }

/* Kolumna godzin */
.ns-kal-godziny div {
    box-sizing: border-box;
    height: var(--ns-kal-godzina);
    padding: 1px 4px 0 0;
    border-bottom: 1px solid var(--ns-border);
    color: var(--ns-text-soft);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.ns-kal-godziny { position: sticky; left: 0; z-index: 4; background: var(--ns-surface); height: calc(var(--ns-kal-wierszy) * var(--ns-kal-wiersz)); overflow: hidden; }
.ns-kal-godziny b { font-size: 16px; font-weight: 400; }
.ns-kal-godziny sup { margin-left: 2px; color: var(--ns-text-muted); font-size: 10px; top: -.5em; }

/* Kolumna dnia: linie co wiersz i mocniejsze co godzinę */
.ns-kal-kolumna {
    position: relative;
    height: calc(var(--ns-kal-wierszy) * var(--ns-kal-wiersz));
    border-left: 1px solid var(--ns-border);
    background-image:
        repeating-linear-gradient(to bottom, transparent 0 calc(var(--ns-kal-godzina) - 1px), var(--ns-border) calc(var(--ns-kal-godzina) - 1px) var(--ns-kal-godzina)),
        repeating-linear-gradient(to bottom, transparent 0 calc(var(--ns-kal-wiersz) - 1px), var(--ns-line) calc(var(--ns-kal-wiersz) - 1px) var(--ns-kal-wiersz));
}
.ns-kal-kolumna .dxsc-apt-wrapper { position: absolute; }
.ns-kal-kolumna .dxsc-apt-wrapper:hover { z-index: 3; }
.ns-kal-tytul { min-width: 0; color: var(--ns-text-soft); font-weight: 500; overflow-wrap: anywhere; }
.ns-kal-opis { color: var(--ns-text-muted); font-size: 11px; line-height: 14px; overflow-wrap: anywhere; }
/* Przygaszona jak w starym kalendarzu (krycie .6), żeby nie konkurowała z treścią i ikoną SMS */
.ns-kal-seria { display: inline-flex; flex: none; color: var(--ns-text-muted); opacity: .6; }
.ns-kal-seria svg { width: 14px; height: 14px; }
/* W wizycie pionowej w jednej osi z ikoną SMS: odstęp od dołu taki jak SMS od góry (jak w starym kalendarzu) */
.ns-kal-kolumna .ns-kal-seria { position: absolute; right: 5px; bottom: 3px; }
.ns-apt-pelny .ns-kal-tytul, .ns-apt-pelny .ns-kal-opis, .ns-apt-pelny .ns-apt .ns-kal-czas, .ns-apt-pelny .ns-apt .ns-kal-seria { color: var(--ns-apt-tekst, var(--ns-text)); }

/* Linia „teraz” (js/kalendarz.js) */
.ns-kal-teraz { position: absolute; left: 0; right: 0; z-index: 4; height: 2px; background: var(--ns-danger); pointer-events: none; }

/* Miesiąc: 5 tygodni, wizyty w kolumnach dni */
.ns-kal-miesiac-nag { position: sticky; top: 0; z-index: 6; display: grid; grid-template-columns: repeat(var(--ns-kal-dni), minmax(0, 1fr)); background: var(--ns-surface); }
.ns-kal:not(.ns-kal-pelna) .ns-kal-miesiac-nag { top: calc(var(--ns-topbar-h) + 42px); }
.ns-kal-miesiac-nag div { padding: 5px; border-left: 1px solid var(--ns-border); border-bottom: 1px solid var(--ns-border); color: var(--ns-text-soft); text-align: center; }
.ns-kal-tydzien {
    display: grid;
    grid-template-columns: repeat(var(--ns-kal-dni), minmax(0, 1fr));
    grid-auto-flow: row dense;
    grid-template-rows: auto;
    gap: 1px;
    min-height: 100px;
    align-content: start;
    border-bottom: 1px solid var(--ns-border);
    background-image: linear-gradient(to right, var(--ns-border) 1px, transparent 1px);
    background-size: calc(100% / var(--ns-kal-dni)) 100%;
}
.ns-kal-m-dzien { grid-row: 1; padding: 2px 6px; color: var(--ns-text-soft); text-align: right; text-decoration: none; }
.ns-kal-m-dzien:hover { background: var(--ns-hover); }
.ns-kal-tydzien .dxsc-apt-wrapper { margin: 0 1px; }

/* Agenda */
.ns-kal-pusto { padding: 24px; color: var(--ns-text-muted); text-align: center; }
.ns-kal-a-dzien { display: flex; align-items: flex-start; border-bottom: 1px solid var(--ns-border); }
.ns-kal-a-data {
    position: sticky;
    top: calc(var(--ns-topbar-h) + 42px);
    display: flex;
    flex: 0 0 150px;
    gap: 8px;
    align-items: center;
    padding: 8px;
    color: var(--ns-text-soft);
    font-size: 11px;
    line-height: 14px;
    text-decoration: none;
}
.ns-kal-pelna .ns-kal-a-data { top: 0; }
.ns-kal-a-data b { color: var(--ns-heading); font-size: 28px; font-weight: 400; line-height: 32px; }
.ns-kal-a-dzis .ns-kal-a-data { color: var(--ns-brand); }
.ns-kal-a-dzis .ns-kal-a-data b { color: var(--ns-brand); font-weight: 600; }
.ns-kal-agenda table { flex: 1 1 auto; min-width: 0; width: 100%; border-collapse: collapse; }
.ns-kal-agenda tr + tr td { border-top: 1px solid var(--ns-line); }
.ns-kal-a-czas { width: 120px; padding: 6px 8px 6px 12px; color: var(--ns-text-soft); text-align: center; white-space: nowrap; vertical-align: top; font-variant-numeric: tabular-nums; }
.ns-kal-a-ikony { width: 26px; padding: 6px 2px; text-align: center; vertical-align: top; }
.ns-kal-a-ikony .ns-apt-sms { position: static; width: 18px; height: 18px; box-shadow: none; background: none; }
.ns-kal-a-ikony .ns-kal-seria { margin-top: 3px; }
.ns-kal-a-tresc { padding: 6px 8px; vertical-align: top; }
.ns-kal-a-tresc .ns-kal-tytul { color: var(--ns-heading); }

/* Prawy panel: szukanie + nawigator */
.ns-kal-panel {
    position: sticky;
    top: var(--ns-topbar-h);
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 274px;
    max-height: calc(100vh - var(--ns-topbar-h));
    overflow-y: auto;
    padding: 8px;
    border-left: 1px solid var(--ns-border);
    background: var(--ns-surface);
}
.ns-kal-szukaj { margin: 0 0 8px; }
.ns-kal-szukaj input[type="search"] { width: 100%; box-sizing: border-box; }
/* Nawigator dat: wymiary i kolory jak ASPxDateNavigator starej aplikacji (zmierzone 2026-11-04) */
.ns-kal-nawig-ramka { border: 1px solid var(--ns-border); background: var(--ns-surface); }
.ns-kal-nawig { font-size: 14px; }
.ns-kal-nawig + .ns-kal-nawig { border-top: 1px solid var(--ns-border); }
.ns-kal-nawig-nag { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; box-sizing: border-box; padding: 0 8px; border-bottom: 1px solid var(--ns-border); color: var(--ns-text); }
.ns-kal-nawig-nag b { flex: 1; font-weight: 400; font-size: 16px; text-align: center; }
.ns-kal-nawig-nag a { display: inline-flex; color: var(--ns-text-soft); }
.ns-kal-nawig-nag svg { width: 18px; height: 18px; }
.ns-kal-nawig table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ns-kal-nawig th { height: 38px; padding: 0; color: var(--ns-text-soft); font-weight: 500; font-size: 12px; text-align: center; }
.ns-kal-nawig th:first-child { width: 27px; background: var(--ns-hover); }
.ns-kal-nawig td { padding: 0; text-align: center; }
.ns-kal-nawig td.ns-kal-nr { background: var(--ns-hover); color: var(--ns-text-soft); font-size: 13px; }
.ns-kal-nawig td a { display: block; padding: 7px 0; color: var(--ns-text-soft); line-height: 19px; text-decoration: none; }
.ns-kal-nawig td a:hover { background: var(--ns-hover); }
.ns-kal-nawig td a.ns-kal-ma { font-weight: 700; }
.ns-kal-nawig td a.ns-kal-niedz { color: var(--ns-brand); }
.ns-kal-nawig td a.ns-kal-inny { color: var(--ns-faint); font-weight: 400; }
.ns-kal-nawig td a.ns-kal-inny.ns-kal-niedz { color: color-mix(in srgb, var(--ns-brand) 40%, transparent); }
/* Widoczny zakres wypełniony jak w starym nawigatorze; ns-kal-zazn – podgląd w trakcie przeciągania (js/kalendarz.js) */
.ns-kal-nawig table { user-select: none; }
.ns-kal-nawig td a.ns-kal-zakres, .ns-kal-nawig td a.ns-kal-zakres:hover,
.ns-kal-nawig td a.ns-kal-zazn, .ns-kal-nawig td a.ns-kal-zazn:hover { background: var(--ns-fill); color: var(--ns-on-fill); }
.ns-kal-nawig.ns-kal-ciagnie td a.ns-kal-zakres:not(.ns-kal-zazn) { background: none; color: var(--ns-text-soft); }
.ns-kal-nawig td a.ns-kal-dzis { box-shadow: inset 0 0 0 1px var(--ns-brand); }
.ns-kal-nawig td a.ns-kal-dzis.ns-kal-zakres, .ns-kal-nawig td a.ns-kal-dzis.ns-kal-zazn { box-shadow: inset 0 0 0 2px var(--ns-on-fill); }
.ns-kal-nawig-stopka { display: flex; justify-content: flex-end; padding: 8px; border-top: 1px solid var(--ns-border); }
/* Selektor daty pól type=date (js/selektor-daty.js): nawigator z jednym miesiącem w oknie */
.ns-wybor-daty { position: fixed; inset: auto; width: 257px; height: auto; margin: 0; padding: 0; overflow: hidden; border-radius: 8px; color: var(--ns-text); box-shadow: 0 10px 30px var(--ns-shadow); }
.ns-wybor-daty a { cursor: pointer; }
.ns-wybor-daty a:focus { outline: none; }
.ns-wybor-daty a:focus-visible { outline: 2px solid var(--ns-brand); outline-offset: -2px; }
.ns-wybor-daty td a[aria-disabled] { opacity: .35; pointer-events: none; }
input.ns-wd-otwarte.ns-pole-tekst { border-color: var(--ns-brand); box-shadow: 0 0 0 3px var(--ns-focus-ring); }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }

/* Pojedyncza wizyta (etap 8.3, js/kalendarz-wizyty.js): zaznaczenie, „+”, dymek, menu, okno */
.ns-kal-cale { position: relative; min-height: 22px; }
.ns-kal-tydzien { position: relative; }
.ns-kal-kom { position: absolute; z-index: 1; background: var(--ns-brand-soft); box-shadow: inset 0 0 0 1px var(--ns-brand); pointer-events: none; }
.ns-kal-ciagnie-kom { user-select: none; }
.ns-kal .dxsc-apt-wrapper, .ns-kal .dxsc-agenda-apt { cursor: pointer; }
.ns-kal .dxsc-apt-wrapper:focus-visible, .ns-kal .dxsc-agenda-apt:focus-visible { outline: 2px solid var(--ns-brand); outline-offset: 1px; }
.ns-kal .ns-kal-wybrana { outline: 2px solid var(--ns-heading); outline-offset: -1px; z-index: 3; }
.ns-kal-plus {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--ns-fill);
    color: var(--ns-on-fill);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--ns-text) 30%, transparent);
    cursor: pointer;
}
.ns-kal-plus:hover { background: var(--ns-fill-hover); }
.ns-kal-plus:focus-visible { outline: 2px solid var(--ns-brand); outline-offset: 2px; }
.ns-kal-plus svg { width: 20px; height: 20px; }
.ns-kal:has(.ns-kal-panel) .ns-kal-plus { right: 236px; }

.ns-kal-dymek, .ns-kal-menu {
    position: fixed;
    z-index: 40;
    border: 1px solid var(--ns-border);
    border-radius: 8px;
    background: var(--ns-surface);
    color: var(--ns-text);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--ns-text) 22%, transparent);
    font-size: 13px;
}
.ns-kal-dymek { width: 280px; overflow: hidden; }
.ns-kal-dymek-tresc { padding: 10px 12px; }
.ns-kal-dymek-czas { margin: 0 0 4px; color: var(--ns-text-muted); font-size: 12px; }
.ns-kal-dymek-tytul { margin: 0; color: var(--ns-heading); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.ns-kal-dymek-linia { margin: 2px 0 0; color: var(--ns-text-soft); overflow-wrap: anywhere; }
.ns-kal-dymek-info { margin: 8px 0 0; color: var(--ns-text-muted); font-size: 12px; }
.ns-kal-dymek-akcje { display: flex; border-top: 1px solid var(--ns-border); }
.ns-kal-dymek-akcje button { flex: 1; min-height: 40px; border: 0; background: none; color: var(--ns-brand); cursor: pointer; }
.ns-kal-dymek-akcje button + button { border-left: 1px solid var(--ns-border); }
.ns-kal-dymek-akcje button:hover { background: var(--ns-hover); }

.ns-kal-menu { min-width: 200px; max-height: calc(100vh - 16px); overflow-y: auto; padding: 4px; }
.ns-kal-menu button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 30px; padding: 4px 10px; border: 0; border-radius: 5px; background: none; color: var(--ns-text); text-align: left; white-space: nowrap; cursor: pointer; }
.ns-kal-menu button:hover, .ns-kal-menu button:focus-visible, .ns-kal-menu button[aria-expanded="true"] { background: var(--ns-hover); outline: none; }
.ns-kal-menu button[aria-checked="true"] { background: var(--ns-fill); color: var(--ns-on-fill); }
.ns-kal-menu svg { flex: none; width: 16px; height: 16px; color: var(--ns-text-muted); }
.ns-kal-menu button[aria-checked="true"] svg { color: inherit; }
.ns-kal-menu .ns-kal-menu-puste { display: inline-block; flex: none; width: 16px; }
.ns-kal-menu .ns-kal-menu-dalej { margin-left: auto; }
.ns-kal-menu-kreska { height: 1px; margin: 4px 0; background: var(--ns-border); }

.ns-dialog.ns-kal-okno { width: 720px; }
.ns-kal-okno [hidden] { display: none !important; }
.ns-kal-okno .ns-pole { position: relative; min-width: 0; }
.ns-kal-zabieg, .ns-kal-termin { display: grid; grid-template-columns: minmax(0, 1fr) 112px; column-gap: 6px; align-items: start; }
.ns-kal-zabieg > label, .ns-kal-termin > label, .ns-kal-zabieg > .ns-pole-blad, .ns-kal-termin > .ns-pole-blad { grid-column: 1 / -1; }
.ns-kal-termin:has([data-ns-kal-godzina][hidden]) { grid-template-columns: minmax(0, 1fr); }
.ns-kal-okno .ns-kal-znacznik { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin: 0; color: var(--ns-text); font-size: 14px; font-weight: 400; cursor: pointer; }
.ns-kal-przypomnienie { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; }
.ns-kal-przypomnienie > .ns-pole-blad { grid-column: 1 / -1; }
.ns-kal-status { margin: 0; color: var(--ns-text-soft); }
.ns-kal-okno-info { grid-column: 1 / -1; margin: 0 var(--ns-okno-pola) 12px; color: var(--ns-text-soft); }
.ns-kal-przypomnienie-info { grid-column: 1 / -1; margin: 2px 0 0; color: var(--ns-text-soft); font-size: 13px; }
.ns-kal-cykl-pola { display: grid; gap: 8px; padding: 10px 12px; margin-top: 4px; border: 1px solid var(--ns-border); border-radius: 8px; }
.ns-kal-okno .ns-kal-cykl-rodzaj, .ns-kal-okno .ns-kal-cykl-dni { flex-direction: row; flex-wrap: wrap; gap: 0 16px; }
.ns-kal-cykl-rodzaj > .ns-pole-blad, .ns-kal-cykl-dni > .ns-pole-blad { flex-basis: 100%; }
.ns-kal-cykl-panel, .ns-kal-cykl-zakres { display: grid; gap: 4px; padding-top: 8px; border-top: 1px solid var(--ns-border); }
.ns-kal-okno .ns-kal-cykl-wiersz { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.ns-kal-cykl-wiersz > .ns-pole-blad { flex-basis: 100%; }
.ns-kal-cykl-wiersz .ns-pole-tekst { width: auto; min-width: 0; }
.ns-kal-okno .ns-kal-cykl-wiersz .ns-kal-cykl-liczba { width: 76px; }
.ns-kal-pytanie-wybor { display: grid; gap: 2px; }
#nsKalPytanie .ns-kal-znacznik { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin: 0; color: var(--ns-text); }
.ns-kal-usun { margin-right: auto; border-color: var(--ns-danger); color: var(--ns-danger); }
.ns-kal-usun:hover { background: var(--ns-danger-soft); }
.ns-kal-ukryty { position: absolute; top: 0; right: 0; }
.ns-kal-pacjenci {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    top: 100%;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--ns-border);
    border-radius: 8px;
    background: var(--ns-surface);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--ns-text) 22%, transparent);
}
.ns-kal-pacjent-poz { display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; }
.ns-kal-pacjent-poz:hover, .ns-kal-pacjent-poz[aria-selected="true"] { background: var(--ns-hover); }
.ns-kal-pacjent-poz span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ns-kal-pacjent-tel { flex: none; color: var(--ns-text-muted); font-size: 12px; }
.ns-kal-pacjent-info { margin: 0; padding: 8px 10px; color: var(--ns-text-muted); font-size: 12px; }

/* Wąskie okno na komputerze: siatka przewija się w swoim polu, panel nad nią, nawigator schowany. Telefon – klasa ns-kal-tel niżej. */
@media (max-width: 767px) {
    .ns-kal { flex-direction: column-reverse; align-items: stretch; }
    .ns-kal-panel { position: static; width: auto; max-height: none; border-left: 0; }
    .ns-kal-nawig-ramka { display: none; }
    .ns-kal-szukaj { margin: 0; }
    .ns-kal:has(.ns-kal-panel) .ns-kal-plus { right: 16px; }
    .ns-kal-okno .ns-kk-pola-2 { grid-template-columns: minmax(0, 1fr); }
    .ns-kal-szukaj input[type="search"] { font-size: 16px; }
    .ns-kal-siatka { grid-template-columns: 44px repeat(var(--ns-kal-dni), minmax(120px, 1fr)); overflow-x: auto; }
    .ns-kal-miesiac { overflow-x: auto; }
    .ns-kal-miesiac-nag, .ns-kal-tydzien { min-width: 720px; }
    .ns-kal-pasek { position: static; }
    .ns-kal-widoki { margin-left: 0; overflow-x: auto; }
    .ns-kal-a-dzien { flex-direction: column; }
    .ns-kal-a-data { position: static; flex: none; }
    .ns-kal-a-czas { width: 96px; padding-left: 8px; }
}

/* Przeciąganie (etap 8.5, js/kalendarz-przeciaganie.js): uchwyty brzegów po najechaniu, podgląd w miejscu upuszczenia */
.dxsc-horizontal-apt.dxsc-apt-wrapper, .dxsc-horizontal-same-day-apt.dxsc-apt-wrapper { position: relative; }
.ns-kal-u { position: absolute; z-index: 5; background: var(--ns-brand); opacity: 0; transition: opacity 120ms ease; }
.dxsc-apt-wrapper:hover > .ns-kal-u { opacity: .55; }
.ns-kal-u-g, .ns-kal-u-d { left: 0; right: 0; height: 6px; cursor: ns-resize; }
.ns-kal-u-g { top: 0; }
.ns-kal-u-d { bottom: 0; }
.ns-kal-u-l, .ns-kal-u-p { top: 0; bottom: 0; width: 6px; cursor: ew-resize; }
.ns-kal-u-l { left: 0; }
.ns-kal-u-p { right: 0; }
.ns-kal-ciagnie-wiz, .ns-kal-ciagnie-wiz * { cursor: grabbing !important; user-select: none; }
.ns-kal-nie-wolno, .ns-kal-nie-wolno * { cursor: not-allowed !important; }
.ns-kal .ns-kal-ciagnieta { opacity: .45; }
.ns-kal-cien { position: absolute; z-index: 6; overflow: hidden; box-sizing: border-box; padding: 1px 4px; border: 2px solid var(--ns-brand); border-radius: 3px; background: var(--ns-brand-soft); color: var(--ns-heading); font-size: 11px; font-weight: 600; line-height: 14px; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ns-kal-u { transition: none; } }

/* Telefon (etap 8.6): układ według urządzenia (Urzadzenie), nie szerokości – klasa ns-kal-tel. Pomiary starego KalendarzMobile: plan migracji, „Część 8.6”. */
.ns-kal-tel { flex-direction: column; align-items: stretch; -webkit-tap-highlight-color: transparent; }
.ns-kal-tel-gora { display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--ns-surface); }
.ns-kal-grafiki {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--ns-border);
    border-radius: 20px;
    background: var(--ns-surface);
    color: var(--ns-text-soft);
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
}
.ns-kal-grafiki svg { width: 16px; height: 16px; }
.ns-kal-grafiki[aria-pressed="true"] { border-color: var(--ns-brand-line); background: var(--ns-brand-soft); color: var(--ns-heading); }
.ns-kal-tel .ns-kal-szukaj-pole { flex: 1 1 auto; min-width: 0; }
.ns-kal-tel .ns-kal-szukaj { margin: 0; }
.ns-kal-tel .ns-kal-szukaj input[type="search"] { min-height: 40px; font-size: 16px; }   /* iOS przybliża stronę przy polu mniejszym niż 16 px */

.ns-kal-tel .ns-kal-pasek { position: sticky; top: var(--ns-topbar-h); flex-wrap: nowrap; height: 47px; box-sizing: border-box; padding: 2px 4px; }
.ns-kal-tel .ns-kal-ik { flex: none; width: 40px; height: 40px; }
.ns-kal-tel .ns-kal-data { flex: 1 1 auto; min-width: 0; margin: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-kal-tel .ns-kal-widoki { flex: none; margin-left: 0; overflow: visible; }
.ns-kal-tel .ns-kal-widoki a { padding: 10px; }

.ns-kal-tel:not(.ns-kal-pelna) .ns-kal-nag { top: calc(var(--ns-topbar-h) + 47px); }
.ns-kal-tel:not(.ns-kal-wiele) .ns-kal-siatka { grid-template-columns: 44px minmax(0, 1fr); overflow: visible; }

.ns-kal-tel .ns-kal-a-dzien { flex-direction: column; align-items: stretch; }
.ns-kal-tel .ns-kal-a-data { position: sticky; top: calc(var(--ns-topbar-h) + 47px); z-index: 3; flex: none; padding: 4px 10px; border-bottom: 1px solid var(--ns-border); background: var(--ns-subtle); }
.ns-kal-tel .ns-kal-a-czas { width: 52px; padding: 8px 4px; font-size: 13px; line-height: 18px; white-space: normal; }
.ns-kal-tel .ns-kal-a-ikony { width: 24px; }
.ns-kal-tel .ns-kal-a-tresc { padding: 8px 8px 8px 4px; }
.ns-kal-tel .ns-kal-a-tresc .ns-kal-tytul { font-size: 15px; }
.ns-kal-tel .ns-kal-a-tresc .ns-kal-opis { font-size: 13px; line-height: 18px; }

/* Przycisk pływający: nad arkuszem; pozycje rozwija js/kalendarz-wizyty.js */
.ns-kal-tel .ns-kal-plus {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom) + var(--ns-kal-arkusz-h, 0px));
    width: 56px;
    height: 56px;
}
.ns-kal-tel .ns-kal-plus svg { width: 24px; height: 24px; }

/* Arkusz od dołu z kartą wizyty (OpisWizyty.KartaHtml) */
.ns-kal-arkusz {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 8;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    max-height: 70vh;
    margin: 0;
    padding: 4px 16px calc(16px + env(safe-area-inset-bottom));
    overflow-y: auto;
    border: 0;
    border-top: 1px solid var(--ns-border);
    border-radius: 14px 14px 0 0;
    background: var(--ns-surface);
    color: var(--ns-text);
    box-shadow: 0 -6px 20px color-mix(in srgb, var(--ns-text) 18%, transparent);
}
.ns-kal-arkusz-nag { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; min-height: 44px; }
.ns-kal-arkusz-x { display: grid; flex: none; place-items: center; width: 40px; height: 40px; margin-left: -10px; border: 0; background: none; color: var(--ns-text-soft); cursor: pointer; }
.ns-kal-arkusz-x svg { width: 20px; height: 20px; }
.ns-kal-arkusz-czas { color: var(--ns-text-soft); font-size: 15px; }
.ns-kal-arkusz-temat { margin-left: auto; color: var(--ns-heading); font-size: 15px; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.ns-kal-arkusz-temat:empty { display: none; }
.ns-kal-arkusz .ns-karta { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 0; color: var(--ns-text); font-size: 15px; line-height: 1.4; }
.ns-karta-pacjent { color: var(--ns-heading); font-size: 16px; font-weight: 600; }
.ns-karta-zwierze { color: var(--ns-text-soft); font-weight: 400; }
.ns-karta-tel { align-self: flex-start; padding: 2px 0; color: var(--ns-brand); font-weight: 600; text-decoration: none; }
.ns-karta-zabiegi { margin: 0; padding: 0; list-style: none; }
.ns-karta-zabiegi li { padding: 3px 0; }
.ns-karta-czas, .ns-karta-opis { color: var(--ns-text-muted); }
.ns-karta-sms { font-weight: 600; }
.ns-karta-opis { overflow-wrap: anywhere; }
.ns-kal-arkusz-edytuj { width: 100%; min-height: 44px; margin-top: 14px; }

/* Formularz na cały ekran: te same pola co na komputerze, jedna kolumna */
.ns-kal-tel .ns-dialog.ns-kal-okno { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0; border-radius: 0; }
.ns-kal-tel .ns-kal-okno .ns-kk-pola-2 { grid-template-columns: minmax(0, 1fr); }
.ns-kal-tel .ns-kal-okno input:not([type="checkbox"]):not([type="radio"]), .ns-kal-tel .ns-kal-okno select, .ns-kal-tel .ns-kal-okno textarea { font-size: 16px; }
.ns-kal-tel .ns-kal-okno .ns-dialog-przyciski { padding-bottom: env(safe-area-inset-bottom); }
.ns-kal-tel .ns-kal-okno .ns-dialog-btn { flex: 1 1 0; min-height: 44px; }
.ns-kal-tel .ns-kal-okno .ns-kal-usun { margin-right: 0; }
.ns-kal-tel .ns-kal-znacznik { min-height: 44px; }

/* Dotyk (telefon i tablet): uchwyty dopiero po przytrzymaniu wizyty (ns-kal-uchwyty – js/kalendarz-przeciaganie.js) i większe, bez zaznaczania tekstu i menu systemowego przy przytrzymaniu */
@media (pointer: coarse) {
    .ns-kal .dxsc-apt-wrapper, .ns-kal .dxsc-agenda-apt { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
    .ns-kal-u { display: none; }
    .dxsc-apt-wrapper.ns-kal-uchwyty > .ns-kal-u { display: block; opacity: 1; background: none; }
    .ns-kal-uchwyty > .ns-kal-u-g, .ns-kal-uchwyty > .ns-kal-u-d { height: 18px; }
    .ns-kal-uchwyty > .ns-kal-u-l, .ns-kal-uchwyty > .ns-kal-u-p { width: 18px; }
    .ns-kal-uchwyty > .ns-kal-u-g::after, .ns-kal-uchwyty > .ns-kal-u-d::after { content: ""; position: absolute; left: calc(50% - 16px); width: 32px; height: 4px; border-radius: 2px; background: var(--ns-heading); }
    .ns-kal-uchwyty > .ns-kal-u-g::after { top: 1px; }
    .ns-kal-uchwyty > .ns-kal-u-d::after { bottom: 1px; }
    .ns-kal-menu button { min-height: 44px; font-size: 15px; }
}
.ns-kal .ns-kal-chwycona { z-index: 4; outline: 2px solid var(--ns-heading); outline-offset: -1px; box-shadow: 0 4px 14px color-mix(in srgb, var(--ns-text) 35%, transparent); }

/* Zaplanowane wizyty (8.7): ta sama agenda, tylko do odczytu – strona i blok karty klienta */
.ns-kal-odczyt-ramka { border: 1px solid var(--ns-border); border-radius: 6px; overflow: clip; }
.ns-kal-odczyt .dxsc-agenda-apt { cursor: default; }
/* Na telefonie cały zakres dat w dwóch liniach: bez przełącznika widoków jest dłuższy niż w kalendarzu, a wysokość paska (47 px) trzyma przyklejone daty dni */
.ns-kal-odczyt.ns-kal-tel .ns-kal-data { overflow: visible; font-size: 13px; line-height: 16px; white-space: normal; }
.ns-kk-zaplanowane { margin-top: 8px; border: 1px solid var(--ns-border); border-radius: 6px; overflow: clip; min-height: 72px; }
.ns-kk-zaplanowane[aria-busy="true"] { opacity: .6; }
.ns-kk-zaplanowane > .ns-tekst-mut { padding: 12px; }