/* ============================================================
   Navigator Hub — nowe boczne menu (Faza 4, sandbox)
   Wygląd wyłącznie z tokenów (tokens.css). Szerokości paska to istniejące
   tokeny --sidebar-width-collapsed/expanded (dziś w styles.css); wartości
   w var(..., fallback) są tylko na potrzeby sandboxa, który nie ładuje
   styles.css. Propozycja Fazy 5: przenieść te dwa tokeny do tokens.css.
   ============================================================ */

.nhs {
  --nhs-w-open:   var(--sidebar-width-expanded, 220px);
  --nhs-w-closed: var(--sidebar-width-collapsed, 56px);
  --nhs-row:      calc(var(--space-6) + var(--space-2));        /* wysokość wiersza 40px */
  --icon-color:   currentColor;

  width: var(--nhs-w-open);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--nh-navy);
  color: var(--nh-ondark-txt2);
  font-family: var(--nh-font-body);
  box-shadow: var(--nh-sh-sidebar);
  transition: width .2s ease;
  position: relative;
  z-index: 20;
}
.nhs[data-collapsed="true"] { width: var(--nhs-w-closed); }

.nhs-brand {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; border: 0; border-bottom: 1px solid var(--nh-ondark-line); background: transparent; cursor: pointer; text-align: left;
  height: calc(var(--space-6) + var(--space-4));
  padding: 0 var(--space-3);
  color: var(--nh-text-on-dark);
  font-family: var(--nh-font-head); font-weight: 600; font-size: 13px; letter-spacing: var(--nh-ls-section);
  overflow: hidden; white-space: nowrap; flex: 0 0 auto;
}
.nhs-brand:focus-visible { outline: 2px solid var(--nh-ondark-accent); outline-offset: -2px; }
.nhs-brand img { width: calc(var(--space-6) - var(--space-1)); height: auto; flex: 0 0 auto; }
.nhs-brand span {
  font-family: var(--nh-font-head); font-weight: 100; font-size: 17px;
  text-transform: uppercase; letter-spacing: .24em; color: var(--nh-text-on-dark);
}

.nhs-scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: var(--space-2) 0; }

.nhs-list { list-style: none; margin: 0; padding: 0 var(--space-2); }
.nhs-row  { position: relative; display: flex; align-items: center; }
/* oddech w pionie między pozycjami (także ikonami w trybie zwiniętym) */
.nhs-list > li + li { margin-top: var(--space-1); }

.nhs-caption {
  margin: var(--space-2) var(--space-4) var(--space-1);
  font-family: var(--nh-font-head); font-size: 11px; font-weight: 600;
  letter-spacing: var(--nh-ls-head); text-transform: uppercase;
  color: var(--nh-ondark-accent);
  white-space: nowrap; overflow: hidden;
}
.nhs-sep { height: 1px; background: var(--nh-ondark-line); margin: var(--space-2) var(--space-3); }

/* ── Pozycja ─────────────────────────────────────────────── */
.nhs-item, .nhs-ghead {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: var(--space-3);
  height: var(--nhs-row);
  padding: 0 var(--space-2);
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: inherit;
  font: inherit; font-size: 14px; text-align: left;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.nhs-item:hover, .nhs-ghead:hover { background: var(--nh-ondark-fill); color: var(--nh-text-on-dark); }
.nhs-item[aria-current="page"] {
  background: var(--nh-ondark-fill2);
  color: var(--nh-text-on-dark);
  box-shadow: inset 3px 0 0 var(--nh-ondark-accent);
}
.nhs-item:focus-visible, .nhs-ghead:focus-visible, .nhs-pin:focus-visible, .nhs-collapse:focus-visible {
  outline: 2px solid var(--nh-ondark-accent); outline-offset: -2px;
}
.nhs-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nhs-badge {
  flex: 0 0 auto;
  min-width: var(--space-2); height: var(--space-2);
  border-radius: var(--nh-r-pill);
  background: var(--nh-miss-text);
}
.nhs-badge[data-count] {
  min-width: calc(var(--space-4) + var(--space-1)); height: var(--space-4);
  padding: 0 var(--space-1);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--nh-font-head); font-size: 10px; font-weight: 700;
  color: var(--nh-text-on-dark); background: var(--nh-accent);
}

/* ── Pinezka (przypnij) — widoczna przy najechaniu/fokusie albo gdy przypięta ── */
.nhs-pin {
  position: absolute; right: var(--space-1); top: 50%; transform: translateY(-50%);
  width: calc(var(--space-5) + var(--space-1)); height: calc(var(--space-5) + var(--space-1));
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--nh-ondark-txt3); cursor: pointer;
  opacity: 0; transition: opacity .12s, color .12s;
}
.nhs-row:hover .nhs-pin, .nhs-pin:focus-visible, .nhs-pin[aria-pressed="true"] { opacity: 1; }
/* gwiazdka nie zjada miejsca etykiecie na stałe — rezerwa tylko gdy widoczna */
.nhs-row:hover > .nhs-item, .nhs-row:focus-within > .nhs-item, .nhs-row.is-pinned > .nhs-item { padding-right: calc(var(--space-6) - var(--space-1)); }
.nhs-pin:hover { color: var(--nh-text-on-dark); }
.nhs-pin[aria-pressed="true"] { color: var(--nh-star); }
.nhs-pin[aria-pressed="true"] .nh-icon { fill: currentColor; }
.nhs-pin[disabled] { cursor: not-allowed; opacity: 0; }
.nhs-row:hover .nhs-pin[disabled] { opacity: .35; }

/* ── Grupa ─────────────────────────────────────────────── */
.nhs-ghead { font-family: var(--nh-font-head); font-size: 13px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--nh-ondark-txt2); }
.nhs-chev { flex: 0 0 auto; transition: transform .15s; }
.nhs-ghead[aria-expanded="true"] .nhs-chev { transform: rotate(90deg); }
.nhs-ghead.is-current { color: var(--nh-text-on-dark); box-shadow: inset 3px 0 0 var(--nh-ondark-accent); }
.nhs-gitems { padding: 0 0 var(--space-1) var(--space-2); }
.nhs-gitems[hidden] { display: none; }

/* ── Ulubione: przeciąganie ─────────────────────────────── */
.nhs-pinned .nhs-row[draggable="true"] { cursor: grab; }
.nhs-row.is-dragging { opacity: .4; }
.nhs-row.is-drop-target { box-shadow: 0 -2px 0 var(--nh-ondark-accent); }

/* ── Stopka: karta profilu ───────────────────────────────── */
.nhs-foot { flex: 0 0 auto; padding: var(--space-2) var(--space-2) var(--space-3); border-top: 1px solid var(--nh-ondark-line); }
/* HTML dostarcza host (_navV2Footer): avatar z kropką statusu, imię + rola, wyloguj */
.nhs-user {
  display: flex; align-items: center; gap: var(--space-3); min-width: 0;
  padding: var(--space-2); border-radius: var(--radius-md);
  background: var(--nh-ondark-fill); border: 1px solid var(--nh-ondark-line);
}
.nhs-user-av {
  position: relative; flex: 0 0 auto; display: inline-flex;
  border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: var(--nh-r-pill);
}
.nhs-user-av:hover { opacity: .85; }
/* status połączenia = kropka wpięta w róg avatara */
.nhs-user-ws {
  position: absolute; right: calc(-1 * var(--space-1) / 2); bottom: calc(-1 * var(--space-1) / 2);
  width: calc(var(--space-2) + var(--space-1)); height: calc(var(--space-2) + var(--space-1));
  border-radius: var(--nh-r-pill); background: var(--nh-ok-text); border: 2px solid var(--nh-navy);
}
.nhs-user-ws[data-online="false"] { background: var(--nh-miss-text); }
.nhs-user-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.nhs-user-name { color: var(--nh-text-on-dark); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nhs-user-role { color: var(--nh-ondark-txt3); font-size: 11px; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nhs-user-out {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: calc(var(--space-6) - var(--space-1)); height: calc(var(--space-6) - var(--space-1));
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--nh-ondark-txt2); cursor: pointer;
  transition: background .12s, color .12s;
}
.nhs-user-out:hover { background: var(--nh-miss-bg); color: var(--nh-miss-text); }
.nhs-user-out:focus-visible, .nhs-user-av:focus-visible { outline: 2px solid var(--nh-ondark-accent); outline-offset: 2px; }
.nhs[data-collapsed="true"] .nhs-foot { padding: var(--space-2) var(--space-1) var(--space-3); }
.nhs[data-collapsed="true"] .nhs-user { flex-direction: column; gap: var(--space-2); padding: var(--space-2) 0; }
.nhs[data-collapsed="true"] .nhs-user-txt { display: none; }

/* ── Uchwyt „Zwiń / Rozwiń” na prawej krawędzi, pod logo ──── */
.nhs-collapse {
  position: absolute; z-index: 30;
  top: calc(var(--space-6) + var(--space-4) - var(--space-3));
  right: calc(-1 * var(--space-3));
  width: var(--space-5); height: var(--space-5); padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--nh-ondark-line); border-radius: var(--nh-r-pill);
  background: var(--nh-navy); color: var(--nh-ondark-txt2); cursor: pointer;
  box-shadow: var(--nh-sh-sidebar);
  transition: background .12s, color .12s, border-color .12s;
}
.nhs-collapse:hover { background: var(--nh-accent); border-color: var(--nh-accent); color: var(--nh-text-on-dark); }
.nhs-collapse .nh-icon { transform: rotate(180deg); transition: transform .2s; }
.nhs[data-collapsed="true"] .nhs-collapse .nh-icon { transform: none; }

/* ── Ikony pozycji: odrobinę większe niż domyślne md ───────── */
.nhs .nhs-item > .nh-icon, .nhs .nhs-ghead > .nh-icon { --_isz: calc(var(--icon-md) + 2px); }

/* ── TRYB ZWINIĘTY (same ikony) ──────────────────────────── */
.nhs[data-collapsed="true"] .nhs-label,
.nhs[data-collapsed="true"] .nhs-chev,
.nhs[data-collapsed="true"] .nhs-pin,
.nhs[data-collapsed="true"] .nhs-caption,
.nhs[data-collapsed="true"] .nhs-gitems,
.nhs[data-collapsed="true"] .nhs-brand span { display: none; }
.nhs[data-collapsed="true"] .nhs-list { padding: 0 var(--space-2); }
.nhs[data-collapsed="true"] .nhs-item,
.nhs[data-collapsed="true"] .nhs-ghead { justify-content: center; padding: 0; gap: 0; }
.nhs[data-collapsed="true"] .nhs-ghead[aria-expanded="true"] { background: var(--nh-ondark-fill2); color: var(--nh-text-on-dark); }
/* badge na ikonie: kropka w rogu */
.nhs[data-collapsed="true"] .nhs-item, .nhs[data-collapsed="true"] .nhs-ghead { position: relative; }
.nhs[data-collapsed="true"] .nhs-badge {
  position: absolute; top: var(--space-1); right: var(--space-1);
  min-width: var(--space-2); width: var(--space-2); height: var(--space-2); padding: 0;
  font-size: 0; background: var(--nh-miss-text);
}

/* ── Flyout grupy (tryb zwinięty, opcja 1) ───────────────── */
.nhs-flyout {
  position: fixed;
  min-width: calc(var(--nhs-w-open, 220px) - var(--space-4));
  padding: var(--space-2) 0;
  background: var(--nh-navy);
  color: var(--nh-ondark-txt2);
  border: 1px solid var(--nh-ondark-line);
  border-radius: var(--radius-md);
  box-shadow: var(--nh-sh-modal);
  font-family: var(--nh-font-body);
  z-index: 40;
  --icon-color: currentColor;
}
.nhs-flyout[hidden] { display: none; }
/* panel grupy po najechaniu/kliknięciu (tryb zwinięty): większy tekst niż w pasku */
.nhs[data-collapsed="true"] .nhs-flyout .nhs-item { font-size: 15px; }
.nhs[data-collapsed="true"] .nhs-flyout .nhs-caption { font-size: 12px; }
/* flyout leży w zwiniętym pasku — przywróć mu pełny wygląd pozycji */
.nhs[data-collapsed="true"] .nhs-flyout .nhs-caption { display: block; margin-top: var(--space-1); }
.nhs[data-collapsed="true"] .nhs-flyout .nhs-label { display: block; }
.nhs[data-collapsed="true"] .nhs-flyout .nhs-pin { display: inline-flex; }
.nhs[data-collapsed="true"] .nhs-flyout .nhs-item { justify-content: flex-start; padding: 0 var(--space-2); gap: var(--space-3); position: static; }
.nhs[data-collapsed="true"] .nhs-flyout .nhs-badge { position: static; }
.nhs[data-collapsed="true"] .nhs-flyout .nhs-badge[data-count] { width: auto; min-width: calc(var(--space-4) + var(--space-1)); height: var(--space-4); padding: 0 var(--space-1); font-size: 10px; background: var(--nh-accent); }

/* ── Host w aplikacji (Faza 5): stała kolumna po lewej, jak stary .sidebar ── */
.nhs-host { position: fixed; top: 0; left: 0; height: 100vh; z-index: 100; }
.nhs-host[hidden] { display: none; }
body.nav-v2 #sidebar { display: none; }   /* stary pasek zostaje w DOM (wycofanie = flaga) */
body.nav-v2 { --nav-offset: var(--sidebar-width-expanded, 220px); }
body.nav-v2.nav-v2-collapsed { --nav-offset: var(--sidebar-width-collapsed, 56px); }
@media (max-width: 640px) { .nhs-host { display: none; } }

/* ── Ekran czytnika ─────────────────────────────────────── */
.nhs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .nhs, .nhs-chev, .nhs-collapse .nh-icon, .nhs-item, .nhs-ghead, .nhs-pin { transition: none; }
}
.nhs[data-collapsed="true"] .nhs-flyout .nhs-row:hover > .nhs-item,
.nhs[data-collapsed="true"] .nhs-flyout .nhs-row:focus-within > .nhs-item,
.nhs[data-collapsed="true"] .nhs-flyout .nhs-row.is-pinned > .nhs-item { padding-right: calc(var(--space-6) - var(--space-1)); }