/* ============================================================
   Navigator Hub — pasek „Brak połączenia z iqDental” i zielony „znów działa” (NH.iqConnBar, ui/iq-conn-bar.js)
   Tylko tokeny z tokens.css — zero literałów, zero !important. 2 rozmiary pisma w treści, oddech 12×16 px.
   ============================================================ */
/* pod paskiem wyszukiwania (ten ma własny dolny odstęp); do treści widoku 16 px */
.nh-iqbar-host { margin: 0 0 var(--space-4); }
.nh-iqbar {
  position: relative;
  background: var(--nh-warn-bg); border: 1px solid var(--nh-warn-br); border-radius: var(--nh-r-card);
  padding: var(--space-3) var(--space-4); color: var(--nh-text); font-family: var(--nh-font-body);
}
.nh-iqbar__top { display: flex; align-items: flex-start; gap: var(--space-3) var(--space-4); flex-wrap: wrap; }
/* ✕ = zwiń do jednej linii (decyzja Soni 08.10: nic nie przepada, pełna treść po „Pokaż”) */
.nh-iqbar__x { flex: none; width: 32px; height: 32px; border: 0; border-radius: var(--nh-r-sm); background: transparent; color: var(--nh-text-2); font: 600 18px/1 var(--nh-font-body); cursor: pointer; }
.nh-iqbar__x:hover { background: var(--nh-surface); color: var(--nh-text); }
.nh-iqbar--mini { display: flex; align-items: center; gap: var(--space-2) var(--space-4); flex-wrap: wrap; padding: var(--space-2) var(--space-4); }
.nh-iqbar--mini .nh-iqbar__t { font-size: 13px; }
.nh-iqbar--mini .nh-iqbar__link { margin: 0; }
.nh-iqbar__txt { flex: 1 1 320px; min-width: 0; }
.nh-iqbar__t { margin: 0; font: 600 15px/1.35 var(--nh-font-head); color: var(--nh-warn-text); }
.nh-iqbar__d { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--nh-text); }
.nh-iqbar__more, .nh-iqbar__btn {
  flex: none; height: 32px; padding: 0 12px; border-radius: var(--nh-r-btn); cursor: pointer;
  border: 1px solid var(--nh-warn-br); background: var(--nh-surface); color: var(--nh-text); font: 600 12px var(--nh-font-btn);
}
.nh-iqbar__more:hover, .nh-iqbar__btn:hover { background: var(--nh-field); }
.nh-iqbar__btn.is-pri { background: var(--btn-primary-bg); color: var(--btn-primary-fg); border-color: var(--btn-primary-bg); }
.nh-iqbar__body { margin-top: var(--space-3); background: var(--nh-surface); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
.nh-iqbar__h { margin: var(--space-3) 0 var(--space-1); font: 600 13px var(--nh-font-body); color: var(--nh-text); }
.nh-iqbar__h:first-child { margin-top: 0; }
.nh-iqbar__list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--nh-text); }
.nh-iqbar__p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--nh-text); }
.nh-iqbar__f { margin: var(--space-3) 0 0; font-size: 12px; color: var(--nh-text-2); }
.nh-iqbar__link { margin-top: var(--space-3); border: 0; background: none; padding: 0; cursor: pointer; font: 600 12px var(--nh-font-body); color: var(--nh-accent); text-decoration: underline; }
.nh-iqbar__edit { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.nh-iqbar__edit label { font: 600 12px var(--nh-font-body); color: var(--nh-text-2); }
.nh-iqbar__edit textarea { min-height: 56px; resize: vertical; border: 1px solid var(--nh-line); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font: 400 13px var(--nh-font-body); color: var(--nh-text); background: var(--nh-surface); }
.nh-iqbar__btns { display: flex; gap: var(--space-2); justify-content: flex-end; }
.nh-iqbar__more:focus-visible, .nh-iqbar__btn:focus-visible, .nh-iqbar__link:focus-visible, .nh-iqbar__x:focus-visible { outline: 2px solid var(--nh-accent); outline-offset: 2px; }
/* Zielony pasek „Połączenie z iqDental znów działa” (decyzje Soni 09.10). Napis --nh-ok-ink = kontrast 5,4 na --nh-ok-bg. */
.nh-iqbar--ok { background: var(--nh-ok-bg); border-color: var(--nh-ok-br); }
.nh-iqbar--ok .nh-iqbar__t { color: var(--nh-ok-ink); }
.nh-iqbar--ok .nh-iqbar__more { border-color: var(--nh-ok-br); }
.nh-iqbar__ico { flex: none; margin-top: 2px; --icon-color: var(--nh-ok-ink); color: var(--nh-ok-ink); }
@media (max-width: 640px) {
  .nh-iqbar-host { margin: 0 0 var(--space-3); }
  .nh-iqbar__more { width: 100%; }
  /* ✕ w prawym górnym rogu (inaczej spadało pod pełnej szerokości „Zwiń”, w osobny wiersz) */
  .nh-iqbar__x { position: absolute; top: var(--space-2); right: var(--space-2); }
  .nh-iqbar__txt { padding-right: 28px; }
  /* ikona ✓ zajmowała na telefonie osobny wiersz (treść ma flex-basis 320 px) — na wąskim ekranie wystarczy zielony kolor */
  .nh-iqbar__ico { display: none; }
}