/* ============================================================
   Navigator Hub — PASEK „LINIE” (NH.lineBar, ui/line-bar.js) — WARIANT B (decyzja Soni 12.10)
   W środku paska ZESPÓŁ zwykłym tekstem (#deskOccupants.nh-lines): kropka · numer · imię, bez ramek.
   Po prawej „TWOJA LINIA” (#deskMine, tylko recepcja): jeden przycisk z menu „Zmień swoją linię”.
   Typografia paska: jeden krój (--nh-font-bar = Figtree), dwa rozmiary (--bar-fs / --bar-fs-sub z ui/topbar.css), dwie grubości (500/600),
   bez WIELKICH LITER, numery tym samym krojem z równymi cyframi. Tylko tokeny, zero !important.
   ZASADA: imię na liniach 100/103 nie ucina się nigdy — przy braku miejsca znika najpierw opis linii w „Twoja linia”,
   potem imiona przy stałych liniach 101/102 (klasy compact/tight z NH.lineBar.mount → fit()).
   ============================================================ */

/* ── zespół: dwie grupy bez napisów (14.10) — recepcja (wyraźnie) i opiekunki (ciszej, za kreską) ── */
/* Rozmiary liter paska: --bar-fs (treść) i --bar-fs-sub (podpis) z ui/topbar.css — jedno miejsce dla całego paska. */
.nh-lines {
  display: flex; align-items: center; gap: var(--space-2) var(--space-5); flex: 0 1 auto; min-width: 0; flex-wrap: wrap;
  font: 500 var(--bar-fs, var(--nh-text-bar))/1.3 var(--nh-font-bar); color: var(--nh-text);
}
.nh-lines-grp { display: inline-flex; align-items: center; gap: var(--space-4); white-space: nowrap; }
.nh-lines-grp--op { font-size: var(--bar-fs-sub, var(--nh-text-bar-sub)); }
.nh-lines-grp--op .nh-ln-first { font-weight: 500; color: var(--nh-text-2); }
.nh-lines[hidden] { display: none; }
.nh-lines-grp--op { padding-left: var(--space-5); border-left: 1px solid var(--nh-line); }
.nh-ln { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.nh-ln:focus-visible { outline: 2px solid var(--nh-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.nh-ln-dot { width: var(--space-2); height: var(--space-2); border-radius: 50%; background: var(--nh-ok-text); flex: none; }
.nh-ln-dot--off { background: var(--nh-text-muted); }
.nh-ln-dot--warn { background: var(--nh-warn-text); }
.nh-ln-num { font-weight: 600; color: var(--nh-text-2); font-variant-numeric: tabular-nums; }
/* (14.10, decyzje Soni) linia recepcji: DUŻY awatar po lewej na wysokość obu wierszy (--avatar-lg = wysokość szukajki),
   obok podpis „NOWY PACJENT” / „STAŁY PACJENT” (drukowanymi) równo NAD imieniem — bez numerów 100/103 i bez cyfr z menu
   głosowego (cyfra w dymku). Pasek zostaje 64 px. */
.nh-ln--line { display: inline-grid; grid-template-columns: auto auto auto; grid-template-rows: auto auto; align-items: center; column-gap: var(--space-2); row-gap: 2px; }
.nh-ln--line > .nh-ln-av { grid-row: 1 / span 2; grid-column: 1; }
.nh-ln--line > .nh-ln-num { grid-row: 1; grid-column: 2 / -1; align-self: end; font-size: var(--nh-text-xs); line-height: 1.1; letter-spacing: .07em; text-transform: uppercase; }
.nh-ln--line > .nh-ln-first { grid-row: 2; grid-column: 2; align-self: start; line-height: 1.15; }
.nh-ln--line > .nh-ln-idle { grid-row: 2; grid-column: 3; align-self: start; line-height: 1.15; }
.nh-ln-first { font-weight: 600; }
.nh-ln--away .nh-ln-first, .nh-ln--free .nh-ln-first { font-weight: 500; color: var(--nh-text-2); }
.nh-ln-idle { margin-left: var(--space-1); font-weight: 600; color: var(--nh-warn-text); }
.nh-ln--notice {
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--nh-text-bar-sub); font-weight: 600;
  background: var(--nh-warn-bg); border: 1px solid var(--nh-warn-br); color: var(--nh-warn-text);
}

/* ── „Twoja linia” (przycisk po prawej, tylko recepcja) ── */
.nh-lines-me { display: inline-flex; }
.nh-lines-me[hidden] { display: none; }
.nh-me {
  display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; cursor: pointer; white-space: nowrap;
  padding: var(--space-1) var(--space-3); border: 1px solid var(--nh-accent); border-radius: var(--radius-sm);
  background: var(--nh-group-blue); color: var(--nh-text); font: 500 var(--bar-fs, var(--nh-text-bar))/1.3 var(--nh-font-bar);
}
.nh-me:hover { background: var(--nh-row-select); }
.nh-me:focus-visible { outline: 2px solid var(--nh-accent); outline-offset: 2px; }
.nh-me-lbl { color: var(--nh-text-2); }
.nh-me-short { display: none; }
.nh-me-desc, .nh-me-val { font-weight: 600; }
.nh-me--view { border-color: var(--nh-line); background: var(--nh-field); }
.nh-me--view .nh-me-desc { font-weight: 500; color: var(--nh-text-2); }
.nh-me--none { border-color: var(--nh-warn-br); background: var(--nh-warn-bg); color: var(--nh-warn-text); }
.nh-me .nh-icon { --icon-color: var(--nh-accent); }
.nh-me--view .nh-me-eye { --icon-color: var(--nh-text-2); }

/* ── Granatowy pasek (na WSZYSTKICH ekranach od 13.10, tło --nh-topbar-bg w ui/topbar.css) ── */
.global-topbar .nh-lines { color: var(--nh-text-on-dark); }
.global-topbar .nh-lines-grp--op { border-left-color: var(--nh-ondark-line); }
.global-topbar .nh-lines-grp--op .nh-ln-first { color: var(--nh-ondark-txt2); }
.global-topbar .nh-ln-num { color: var(--nh-ondark-txt2); }
.global-topbar .nh-ln--away .nh-ln-first,
.global-topbar .nh-ln--free .nh-ln-first { color: var(--nh-ondark-txt2); }
.global-topbar .nh-ln-dot--off { background: var(--nh-ondark-txt3); }
.global-topbar .nh-ln-av .nh-ln-dot { box-shadow: 0 0 0 2px var(--nh-navy); }
.global-topbar .nh-ln-av .nh-av--empty { border-color: var(--nh-ondark-txt3); --icon-color: var(--nh-ondark-txt3); }
.global-topbar .nh-ln-idle { color: var(--nh-star); }
.global-topbar .nh-ln-dot--warn { background: var(--nh-star); }
.global-topbar .nh-me { background: var(--nh-ondark-fill2); border-color: var(--nh-ondark-accent); color: var(--nh-text-on-dark); }
.global-topbar .nh-me:hover { background: var(--nh-ondark-fill3); }
.global-topbar .nh-me-lbl { color: var(--nh-ondark-txt2); }
.global-topbar .nh-me .nh-icon { --icon-color: var(--nh-ondark-accent); }
.global-topbar .nh-me--view { background: var(--nh-ondark-fill); border-color: var(--nh-ondark-line); }

/* ── okienko: menu „Zmień swoją linię” (komputer) / lista + menu (telefon) ── */
.nh-lines-pop {
  position: fixed; z-index: 1100; width: min(360px, calc(100vw - 2 * var(--space-4)));
  background: var(--nh-surface); color: var(--nh-text);
  border: 1px solid var(--nh-line); border-radius: var(--radius-md); box-shadow: var(--nh-sh-modal);
  padding: var(--space-2); font: 500 var(--nh-text-bar)/1.35 var(--nh-font-bar);
}
.nh-lines-pop[hidden] { display: none; }
.nh-lines-scrim { display: none; }
.nh-lines-pop-h { margin: var(--space-1) var(--space-2); font: 600 var(--nh-text-bar-sub)/1.3 var(--nh-font-bar); color: var(--nh-text-2); }
.nh-lines-pop-list { display: none; }
.nh-lines-pop-list ul { list-style: none; margin: 0 0 var(--space-2); padding: 0 var(--space-2); }
.nh-lines-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--nh-line); }
.nh-lines-row:first-child { border-top: 0; }
.nh-ln-av { position: relative; display: inline-flex; flex: none; }
.nh-ln-av .nh-ln-dot { position: absolute; right: -2px; bottom: -2px; margin: 0; box-shadow: 0 0 0 2px var(--nh-surface); }
.nh-lines-grp--op .nh-ln-av .nh-ln-dot { width: calc(var(--space-2) - 1px); height: calc(var(--space-2) - 1px); }
.nh-lines-row-who { display: flex; flex-direction: column; min-width: 0; }
.nh-lines-row-who b { font-weight: 600; }
.nh-lines-row-who small { font-size: var(--nh-text-bar-sub); color: var(--nh-text-2); }
.nh-lines-row-who small.nh-ln-sub--warn { color: var(--nh-warn-text); font-weight: 600; }
.nh-lines-opt {
  display: flex; align-items: flex-start; gap: var(--space-3); width: 100%;
  padding: var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.nh-lines-opt:hover, .nh-lines-opt:focus-visible { background: var(--nh-field); outline: none; }
.nh-lines-opt.is-sel { background: var(--nh-group-blue); }
.nh-lines-radio { width: var(--space-4); height: var(--space-4); flex: none; margin-top: 2px; border-radius: 50%; border: 1.5px solid var(--nh-text-muted); box-sizing: border-box; }
.nh-lines-opt.is-sel .nh-lines-radio { border: 5px solid var(--nh-accent); }
.nh-lines-opt-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nh-lines-opt-txt b { font-weight: 600; }
.nh-lines-opt-txt small { font-size: var(--nh-text-bar-sub); color: var(--nh-text-2); white-space: normal; }
.nh-lines-opt-txt small.nh-ln-sub--warn { color: var(--nh-warn-text); }
.nh-lines-pop-hr { border: 0; border-top: 1px solid var(--nh-line); margin: var(--space-1); }

/* ── dopasowanie do miejsca w pasku (klasy nadaje NH.lineBar.mount → fit(), gdy pasek nie mieści się w jednym wierszu) ── */
/* compact: „Twoja linia 100” bez opisu linii (opis w menu), przy „bez aktywności” sam czas („41 min”).
   tight: dodatkowo bez imion na stałych 101/102 (osoba stała, imię w dymku) i „Ty” zamiast „Twoja linia”. */
.nh-lines--compact .nh-me-desc, .nh-lines--compact .nh-ln-idle-lead { display: none; }
.nh-lines--compact .nh-me--view .nh-me-desc { display: inline; }
.nh-lines--tight .nh-ln--op .nh-ln-first, .nh-lines--tight .nh-me-long { display: none; }
.nh-lines--tight .nh-me-short { display: inline; }

/* Telefon: drugi wiersz — „Ty  Stały pacjent ▾” + zespół (awatar z kropką + podpis linii, bez imion); dotknięcie zespołu
   otwiera listę od dołu ekranu. */
@media (max-width: 640px) {
  .global-topbar .nh-lines-me { order: 1; }
  .global-topbar .nh-lines { order: 2; flex: 0 1 auto; flex-wrap: wrap; gap: var(--space-2); cursor: pointer; }
  .nh-lines .nh-ln-first, .nh-lines .nh-ln-idle, .nh-me-long, .nh-me-desc { display: none; }
  .nh-lines-grp { gap: var(--space-2); }
  .nh-lines .nh-ln { gap: var(--space-1); }
  .nh-lines-grp--op { padding-left: var(--space-2); }
  .nh-me-short { display: inline; }
  .nh-me--view .nh-me-val { display: inline; }
  /* linia recepcji w jednym wierszu: mniejszy awatar + podpis obok (imię w liście po dotknięciu) */
  .nh-ln--line { grid-template-rows: auto; }
  .nh-ln--line > .nh-ln-av { grid-row: 1; }
  .nh-ln--line > .nh-ln-num { align-self: center; }
  .nh-ln--line .nh-av { --av-size: var(--avatar-sm); }
  .global-topbar .nh-lines:focus-visible { outline: 2px solid var(--nh-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
  .nh-lines-pop {
    top: auto; left: 0; right: 0; bottom: 0; width: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    max-height: 80vh; overflow-y: auto;
  }
  .nh-lines-pop-list { display: block; }
  .nh-lines-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 1099; background: color-mix(in srgb, var(--nh-navy) 40%, transparent); }
}