/* ============================================================
   Navigator Hub — MUSZLA PANELI (wspólny wygląd Panelu zarządczego, 18.10.2026)
   JEDNO źródło wyglądu kart, nagłówków, kapsułek, przycisków i podpisów dla Panelu admina, Panelu zarządzania
   recepcją i (w przyszłości) Tablicy PDCA. Każda reguła .nh-* tutaj jest LUSTREM reguły .pd-* z public/tablica-pdca.html
   (dawca stylu = Panel zarządczy doktora, `?widok=zarzad`): te same deklaracje, inna nazwa — strażnik
   `npm run check:sekcja` (§3) porównuje deklaracje i pada, gdy się rozjadą. Zmiana wyglądu = zmiana W OBU miejscach,
   świadomie (tablica przejdzie na te klasy w osobnym etapie, z dowodem zrzutów przed = po).

   Zasady: WYŁĄCZNIE tokeny z tokens.css (zero literałów kolorów, zero !important); margin/padding wpisane JAWNIE
   (Hub ma reset `* { margin:0; padding:0 }` w styles.css, tablica go nie ma — bez jawnych wartości ten sam plik
   wyglądałby inaczej w obu miejscach); BEZ position:sticky (pasek sekcji każdy ekran klei sam — .pa-nav / .zr-nav /
   .pd-nav — bo `top` zależy od hosta: w Hubie pod górnym paskiem, w tablicy od 0).
   Gęstość przychodzi z zewnątrz: skala Huba (:root, 15 px) albo tablicy ([data-mode="dzien"], 13 px) — ten plik jej nie wybiera.
   ============================================================ */

/* ── Karta (= .pd-card): biała, cienka ramka, bez cienia ───────────────────── */
.nh-pcard { background: var(--nh-surface); border: 1px solid var(--nh-line); border-radius: var(--nh-r-card); box-shadow: var(--nh-sh-card); margin: 0; padding: 0; }
/* Karta z własnym oddechem (tablica powtarza `margin-top + padding: --space-5` przy każdej sekcji — tu raz) */
.nh-pcard--pad { margin-top: var(--space-5); padding: var(--space-5); }

/* ── Nagłówek karty (= .pd-f-h): tytuł po lewej, podtytuł / kontrolka po prawej ── */
.nh-pcard-h { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); margin-top: 0; padding: 0; }
.nh-pcard-h h2 { font-family: var(--nh-font-head); font-weight: 600; font-size: var(--nh-text-xl); margin: 0; padding: 0; }
.nh-pcard-sub { font-size: var(--nh-text-sm); color: var(--nh-text-muted); }   /* = .pd-karta .pd-karta-sub */

/* ── Nadtytuł wersalikowy (= .pd-sec > summary .step): „Na start”, „Wyniki”, „Konta” ── */
.nh-eyebrow { font-family: var(--nh-font-head); font-size: var(--nh-text-xs); letter-spacing: var(--nh-ls-section); text-transform: uppercase; color: var(--nh-text-muted); margin: 0; padding: 0; }

/* ── Kapsułki stanu (= .pd-todo-sum .c): liczba + słowo; kolor niesie TYLKO stan (ok / warn / miss) ── */
.nh-chips { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; }
.nh-chip { font-size: var(--nh-text-xs); font-weight: 600; padding: 2px var(--space-2); border-radius: var(--nh-r-badge); border: 1px solid var(--nh-line); color: var(--nh-text-2); background: var(--nh-surface-warm); margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nh-chip.miss { background: var(--nh-miss-bg); color: var(--nh-miss-text); border-color: transparent; }
.nh-chip.warn { background: var(--nh-warn-bg); color: var(--nh-warn-text); border-color: var(--nh-warn-br); }
.nh-chip.ok   { background: var(--nh-ok-bg);   color: var(--nh-ok-ink);    border-color: transparent; }   /* zielony: nie ma go na tablicy w kapsułkach, barwy jak .pd-wks span.ok + kontrast tekstu z tokenu */
/* telefon: długa kapsułka (np. „1 luka na linii „Stały pacjent” · …”) zawija się zamiast rozpychać stronę w bok (390 px → 395 px, 18.10) */
@media (max-width: 640px) { .nh-chip { white-space: normal; max-width: 100%; } }

/* ── Pigułka licznika w pasku sekcji (= .pd-nav .cnt): czerwona, znika gdy pusta ── */
.nh-cnt { background: var(--nh-miss-bg); color: var(--nh-miss-text); border-radius: var(--nh-r-pill); padding: 0 var(--space-2); font-size: var(--nh-text-xs); margin: 0; }
.nh-cnt:empty { display: none; }

/* ── Plakietka (= .pd-tag): „Na żywo”, „Tylko admin” ── */
.nh-tag { font-family: var(--nh-font-head); font-size: var(--nh-text-xs); letter-spacing: var(--nh-ls-section); text-transform: uppercase;
  background: var(--nh-chip-bg); border: 1px solid var(--nh-chip-br); color: var(--nh-chip-tx); border-radius: var(--nh-r-pill); padding: 2px var(--space-2); margin: 0; }

/* ── Przyciski (= .pd-btn): krój przycisków z tokenu, kanciasty róg ── */
.nh-pbtn { font-family: var(--nh-font-btn); font-size: var(--nh-text-sm); font-weight: 500; padding: var(--space-2) var(--space-4); cursor: pointer;
  background: var(--btn-ghost-bg); color: var(--nh-text); border: 1px solid var(--btn-ghost-border); border-radius: var(--nh-r-btn); margin: 0; }
.nh-pbtn:hover { background: var(--btn-ghost-bg-hover); }
.nh-pbtn[hidden] { display: none; }
.nh-pbtn.sm { padding: var(--space-1) var(--space-3); font-size: var(--nh-text-xs); display: inline-flex; gap: var(--space-1); align-items: center; }
.nh-pbtn.pri { background: var(--btn-primary-bg); color: var(--btn-primary-fg); border-color: var(--btn-primary-bg); }
.nh-pbtn[disabled] { opacity: .5; cursor: not-allowed; }
.nh-pbtn:focus-visible { outline: 2px solid var(--nh-accent); outline-offset: 2px; }

/* ── Segment (= .pd-seg): Dzień / Tydzień, Na co dzień / Zebranie ── */
.nh-seg { display: inline-flex; border: 1px solid var(--nh-line); border-radius: var(--nh-r-sm); overflow: hidden; background: var(--btn-ghost-bg); margin: 0; padding: 0; }
.nh-seg button { font-family: var(--nh-font-btn); font-size: var(--nh-text-sm); font-weight: 500; padding: var(--space-2) var(--space-4); border: 0; cursor: pointer; background: var(--btn-ghost-bg); color: var(--btn-ghost-fg); margin: 0; }
.nh-seg button + button { border-left: 1px solid var(--nh-line); }
.nh-seg button[aria-pressed="true"] { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.nh-seg button:focus-visible { outline: 2px solid var(--nh-accent); outline-offset: -2px; }

/* ── Pola (= .pd-in, .pd-sel) ── */
.nh-in, .nh-sel { font-family: var(--nh-font-body); font-size: var(--nh-text-sm); color: var(--nh-text); background: var(--nh-field); border: 1px solid var(--nh-line); border-radius: var(--nh-r-sm); padding: var(--space-1) var(--space-2); margin: 0; }
.nh-in:focus, .nh-sel:focus { outline: 2px solid var(--nh-accent); outline-offset: 0; }
.nh-in[disabled], .nh-sel[disabled] { background: var(--nh-surface-warm); color: var(--nh-text-2); }

/* ── Teksty pomocnicze ── */
.nh-lead  { color: var(--nh-text-2); font-size: var(--nh-text-sm); margin: 0 0 var(--space-5); line-height: 1.6; max-width: 110ch; padding: 0; }   /* = .pd-sub: zdanie pod tytułem strony */
.nh-pnote { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px dashed var(--nh-line); font-size: var(--nh-text-sm); color: var(--nh-text-2); line-height: 1.6; margin-bottom: 0; padding-bottom: 0; }   /* = .pd-out: stopka pod sekcją */
.nh-pnote b { color: var(--nh-text); font-weight: 600; }
.nh-lbl   { font-family: var(--nh-font-head); font-size: var(--nh-text-xs); letter-spacing: var(--nh-ls-section); text-transform: uppercase; color: var(--nh-text-2); margin-top: var(--space-4); margin-bottom: 0; padding: 0; }   /* = .pd-lbl: nadtytuł grupy w treści */
.nh-hint  { background: var(--nh-chip-bg); border: 1px solid var(--nh-chip-br); border-radius: var(--nh-r-badge); padding: var(--space-3) var(--space-4); font-size: var(--nh-text-sm); color: var(--nh-text-2); margin-top: var(--space-4); margin-bottom: 0; }   /* = .pd-hint */
.nh-notif { margin-top: var(--space-3); display: flex; gap: var(--space-3); background: var(--nh-chip-bg); border: 1px dashed var(--nh-chip-br); border-radius: var(--nh-r-card); padding: var(--space-3) var(--space-4); font-size: var(--nh-text-sm); margin-bottom: 0; }   /* = .pd-notif: dymek-przypomnienie */
.nh-notif .bell { color: var(--nh-accent); }