/* LONAS webtoolkit — komponenty wielokrotnego użytku.
   Ładowany PO lonas-shell.css w obu bazach (base.html.twig + base-login.html.twig).
   Wszystkie klasy z prefiksem lns-, tokeny DS — zero hardkodu kolorów.

   UWAGA: cały komponent TABELI (lns-table, filtry, paginacja, menu akcji,
   karty mobilne, dark paginacji) został wydzielony do osobnego pliku
   `lonas-datatable.css` (para makra `components/_datatable.html.twig`).
   Tu zostają: formularz logowania, layout pulpitu, karty statystyk, karta
   powierzchni (.lns-card) oraz globalny dark-override pól Bootstrapa. */

/* ===== Formularz logowania ===== */

/* Kontener formularza — wyśrodkowany w lns-login__area */
.lns-form {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
}

/* Nagłówek formularza */
.lns-form__hd {
  font-size: var(--text-title-lg);   /* 22px */
  font-weight: var(--fw-bold);
  color: var(--color-on-surface);
  margin: 0 0 4px;
  line-height: var(--leading-tight);
}

/* Podtytuł formularza */
.lns-form__hs {
  color: var(--color-on-surface-variant);
  font-size: var(--text-body);       /* 13px */
  margin: 0 0 26px;
  line-height: var(--leading-normal);
}

/* ===== Label ===== */
.lns-label {
  display: block;
  font-size: var(--text-body-sm);    /* 12px */
  font-weight: var(--fw-medium);
  color: var(--color-on-surface-variant);
  margin: 0 0 6px;
}

/* ===== Pole tekstowe ===== */
.lns-field {
  width: 100%;
  height: 46px;
  border: 1.5px solid var(--color-outline);
  border-radius: var(--radius-sm);   /* 10px */
  background: var(--color-surface);
  color: var(--color-on-surface);
  padding: 0 13px;
  font-size: var(--text-body);
  font-family: var(--font-sans);
  outline: none;
  margin-bottom: 18px;
  box-sizing: border-box;
  transition: border-color .15s;
}
.lns-field:focus-visible,
.lns-field:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-container);
  outline: none;
}

/* ===== Alert (błąd logowania) ===== */
.lns-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-error-bg);
  color: var(--color-error);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  font-size: var(--text-body-sm);
  margin-bottom: 20px;
  line-height: var(--leading-normal);
}

/* ===== Hasło z przyciskiem oka ===== */
.lns-pwwrap {
  position: relative;
  margin-bottom: 18px;
}
.lns-pwwrap .lns-field {
  margin-bottom: 0;
  padding-right: 50px;
}
.lns-pweye {
  position: absolute;
  right: 1px;
  top: 1px;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  border-radius: var(--radius-xs);   /* 6px */
  color: var(--color-on-surface-variant);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .12s;
}
.lns-pweye:hover {
  background: var(--surface-1);
  color: var(--color-on-surface);
}
.lns-pweye:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.lns-pweye svg {
  width: 19px;
  height: 19px;
  pointer-events: none;
}
/* Ikon oka: .lns-eye-off ukryty domyślnie (hasło = ukryte) */
.lns-pweye .lns-eye-off { display: none; }
/* Gdy aria-pressed="true" (hasło widoczne): zamień ikon */
.lns-pweye[aria-pressed="true"] .lns-eye-on  { display: none; }
.lns-pweye[aria-pressed="true"] .lns-eye-off { display: block; }

/* ===== Przycisk ===== */
.lns-btn {
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  height: 44px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .15s, box-shadow .15s;
  text-decoration: none;
  box-sizing: border-box;
}
.lns-btn--primary {
  width: 100%;
  height: 48px;
  font-size: var(--text-body-lg);    /* 15px */
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}
.lns-btn--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-on-primary);
  text-decoration: none;
}
.lns-btn--primary:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 2px;
}

/* ===== Mobile: formularz zajmuje pełną szerokość ===== */
@media (max-width: 720px) {
  .lns-form {
    max-width: none;
  }
}

/* ==========================================================================
   DASHBOARD — ekran Pulpit (layout, statystyki, karta)
   ========================================================================== */

/* ---- Nagłówek strony ---- */
.lns-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lns-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 2px;
}
.lns-page-header__title {
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--color-on-surface);
  margin: 0;
  line-height: var(--leading-tight);
}
.lns-page-header__sub {
  margin: 4px 0 0;
  color: var(--color-on-surface-variant);
  font-size: var(--text-body);
}

/* ---- Przycisk rozwijania statystyk (tylko mobile) ---- */
.lns-stats-toggle {
  display: none;           /* ukryty na desktopie */
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  color: var(--color-on-surface);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.lns-stats-toggle:hover { background: var(--surface-1); }
.lns-stats-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.lns-stats-toggle__ch {
  margin-left: auto;
  color: var(--color-on-surface-variant);
  transition: transform .15s;
}
.lns-stats-toggle[aria-expanded="false"] .lns-stats-toggle__ch {
  transform: rotate(-90deg);
}

/* ---- Siatka statystyk (4 karty) ---- */
.lns-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* ---- Karta statystyki ---- */
.lns-stat {
  background: var(--color-surface);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
}
.lns-stat__label {
  font-size: var(--text-label);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--label-letter-spacing);
  color: var(--color-faint);
}
.lns-stat__num {
  font-size: 26px;
  font-weight: var(--fw-bold);
  font-family: var(--font-mono);
  color: var(--color-on-surface);
  margin-top: 4px;
  line-height: 1;
}
.lns-stat__num small {
  font-size: 14px;
  color: var(--color-on-surface-variant);
  font-weight: var(--fw-semibold);
}
.lns-stat__num--accent {
  color: var(--color-primary);
}
.lns-stat__sub {
  font-size: var(--text-caption);
  color: var(--color-on-surface-variant);
  margin-top: 5px;
}

/* ---- Karta powierzchni (biały kontener z nagłówkiem; używana m.in. przez tabelę) ---- */
.lns-card {
  background: var(--color-surface);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.lns-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--color-outline-variant);
}
.lns-card__title {
  font-size: var(--text-title);
  font-weight: var(--fw-bold);
  color: var(--color-on-surface);
  margin: 0;
}
.lns-card__count {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  color: var(--color-on-surface-variant);
  background: var(--surface-2);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-pill);
  padding: 2px 9px;
}

/* ==========================================================================
   Dark mode — Bootstrap 4 form-control override (Bootstrap nie ma dark mode)
   Globalny fix dla niezkonwertowanych pól ekranów; tu jako wspólna poprawka.
   ========================================================================== */
[data-theme="dark"] .form-control,
[data-theme="dark"] .custom-select,
[data-theme="dark"] .lns-main input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] .lns-main select,
[data-theme="dark"] .lns-main textarea {
  background-color: var(--color-surface) !important;
  color: var(--color-on-surface) !important;
  border-color: var(--color-outline) !important;
  color-scheme: dark;
}

/* ==========================================================================
   Dashboard — responsive mobile (≤720px) — statystyki
   (Tabela hal: reflow do kart obsługuje lonas-datatable.css)
   ========================================================================== */
@media (max-width: 720px) {
  .lns-stats-toggle { display: flex; }                       /* pokaż przycisk */
  .lns-stats-grid { grid-template-columns: repeat(2, 1fr); } /* 2 kolumny */
  .lns-stats-grid--mobile-collapsed { display: none; }       /* domyślnie zwinięte */
  .lns-page { gap: 12px; }
}

/* ==========================================================================
   Przyciski — warianty (auto-width, ghost)
   ========================================================================== */
.lns-btn--md { height: 42px; padding: 0 16px; font-size: var(--text-body); width: auto; }
.lns-btn--primary.lns-btn--md { width: auto; height: 42px; font-size: var(--text-body); }
.lns-btn--ghost {
  background: var(--surface-1); color: var(--color-on-surface);
  border-color: var(--color-outline-variant);
}
.lns-btn--ghost:hover { background: var(--surface-2); color: var(--color-on-surface); text-decoration: none; }

/* ==========================================================================
   Pola formularza w treści (poza loginem) — grupa, select, hint, wymagane
   ========================================================================== */
.lns-field-g { margin-bottom: 14px; }
.lns-field-g:last-child { margin-bottom: 0; }
.lns-field-g .lns-field { margin-bottom: 0; }
.lns-flabel {
  display: block; font-size: var(--text-body-sm); font-weight: var(--fw-medium);
  color: var(--color-on-surface); margin: 0 0 6px;
}
.lns-req { color: var(--color-error); }
.lns-fhint { font-size: var(--text-caption); color: var(--color-faint); margin-top: 6px; line-height: 1.45; }
.lns-formrow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Select w treści — wygląd jak .lns-field + strzałka (dark: globalny override .lns-main select) */
.lns-select {
  width: 100%; height: 46px;
  border: 1.5px solid var(--color-outline); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-on-surface);
  padding: 0 36px 0 13px; font-size: var(--text-body); font-family: var(--font-sans);
  outline: none; box-sizing: border-box; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23565B66' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  color-scheme: light dark;
}
.lns-select:focus-visible, .lns-select:focus {
  border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-container); outline: none;
}

/* ==========================================================================
   Komórka „użytkownik" w tabeli (awatar inicjałowy + login mono)
   ========================================================================== */
.lns-login-cell { display: inline-flex; align-items: center; gap: 9px; }
.lns-uav {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--color-secondary-container); color: var(--color-on-secondary-container);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11px; flex-shrink: 0; font-family: var(--font-sans);
}
.lns-rolecode { font-size: var(--text-label); margin-left: 8px; color: var(--color-faint); vertical-align: middle; font-family: var(--font-mono); }

/* ==========================================================================
   Modal / dialog (CRUD) — prymityw lonas-modal.js
   ========================================================================== */
.lns-modal-bd { position: fixed; inset: 0; z-index: 1090; background: rgba(20,22,34,.42); display: none; }
.lns-modal-bd.is-open { display: block; }
.lns-modal {
  position: fixed; z-index: 1091; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 520px; max-width: calc(100vw - 28px); max-height: 90vh;
  background: var(--color-surface); border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  display: none; flex-direction: column; overflow: hidden;
}
.lns-modal.is-open { display: flex; }
.lns-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px; border-bottom: 1px solid var(--color-outline-variant);
}
.lns-modal__title { font-size: var(--text-title); font-weight: var(--fw-bold); color: var(--color-on-surface); }
.lns-modal__title small { display: block; font-size: var(--text-caption); font-weight: 500; color: var(--color-on-surface-variant); margin-top: 2px; font-family: var(--font-mono); }
.lns-modal__x {
  width: 36px; height: 36px; border: 1px solid var(--color-outline-variant);
  background: var(--surface-1); border-radius: var(--radius-xs); cursor: pointer;
  color: var(--color-on-surface-variant); font-size: 15px; line-height: 1; flex-shrink: 0;
}
.lns-modal__x:hover { background: var(--surface-2); color: var(--color-on-surface); }
.lns-modal__x:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.lns-modal__body { padding: 18px; overflow-y: auto; }
.lns-modal__foot {
  display: flex; gap: 10px; align-items: center; justify-content: flex-end;
  padding: 14px 18px; border-top: 1px solid var(--color-outline-variant);
}

@media (max-width: 720px) {
  .lns-formrow { grid-template-columns: 1fr; }
  .lns-page-header { flex-wrap: wrap; }
  .lns-page-header__action { width: 100%; }
  .lns-page-header__action .lns-btn { width: 100%; }
  /* bottom-sheet na mobile */
  .lns-modal {
    top: auto; bottom: 0; left: 0; transform: none;
    width: 100%; max-width: 100%; max-height: 92vh;
    border-radius: 18px 18px 0 0;
  }
}

/* ==========================================================================
   Zakładki (lns-tabs) — prymityw powłoki nad komponentami (para lonas-tabs.js)
   Łączy niezależne widoki pod jednym ekranem (np. dwie instancje tabeli).
   ========================================================================== */
.lns-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--color-outline-variant);
  margin: 6px 0 18px;
}
.lns-tabs__tab {
  appearance: none;
  border: none;
  background: transparent;
  padding: 11px 18px;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  color: var(--color-on-surface-variant);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  white-space: nowrap;
}
.lns-tabs__tab:hover {
  background: var(--surface-1);
  color: var(--color-on-surface);
}
.lns-tabs__tab[aria-selected="true"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
.lns-tabs__tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* Panel zakładki — sterowany klasą .is-active (i atrybutem [hidden] dla a11y) */
.lns-tabpane { display: none; }
.lns-tabpane.is-active { display: block; }
.lns-tabpane[hidden] { display: none; }

/* ==========================================================================
   Pasek filtra (lns-filterbar) — np. zakres dat nad tabelą (form server-side)
   ========================================================================== */
.lns-filterbar {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--color-surface);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
  margin-bottom: 18px;
}
.lns-filterbar__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lns-filterbar__field .lns-flabel { margin: 0; }
/* Pole daty/tekstu w pasku — zwarta wersja .lns-field (nie globalny margin-bottom) */
.lns-filterbar .lns-field {
  height: 42px;
  margin-bottom: 0;
  min-width: 210px;
  color-scheme: light dark;
}
.lns-filterbar .lns-btn { flex-shrink: 0; }

@media (max-width: 720px) {
  .lns-tabs__tab { flex: 1; padding: 11px 8px; font-size: var(--text-body-sm); text-align: center; }
  .lns-filterbar { padding: 14px; }
  .lns-filterbar__field { flex: 1 1 100%; min-width: 0; }
  .lns-filterbar .lns-field { min-width: 0; width: 100%; }
  .lns-filterbar .lns-btn { width: 100%; }
}

/* ==========================================================================
   Karta formularza (np. „Nowa generacja") + siatka pól + stepper + segment
   ========================================================================== */
/* overflow:visible nadpisuje .lns-card{overflow:hidden} — żeby popup pickera hal
   mógł rozwinąć się POZA kartę „Nowa generacja" (inaczej był przycinany). */
.lns-formcard { padding: 20px 22px; margin-bottom: 20px; overflow: visible; }
.lns-formcard__title { font-size: var(--text-title); font-weight: var(--fw-bold); color: var(--color-on-surface); margin: 0 0 3px; }
.lns-formcard__lead { font-size: var(--text-body-sm); color: var(--color-on-surface-variant); margin: 0 0 18px; }

/* Siatka pól: rząd na desktopie (zawijany), stos na mobile */
/* align-items: stretch → kolumny równej wysokości, treść kotwiczona u góry, więc
   POLA (kontrolki) wyrównują się mimo różnej liczby linii hintu (np. dłuższy
   „euc_compare_spread_in_cm…" zawija się do 2 linii, ale nie wypycha pola). */
.lns-genform { display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px 16px; }
.lns-gf { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lns-gf--hall { flex: 2 1 220px; }
.lns-gf--num  { flex: 1 1 160px; }
.lns-gf--seg  { flex: 1 1 170px; }
.lns-gf--submit { flex: 0 0 auto; margin-left: auto; }
.lns-gf .lns-flabel { margin: 0; }
.lns-gf .lns-field { margin-bottom: 0; }
.lns-gf .lns-fhint { margin-top: 2px; }

/* Stepper: − [wartość] + (otacza realny input liczbowy = źródło prawdy) */
.lns-stepper { display: flex; align-items: stretch; gap: 6px; }
.lns-stepper__btn {
  width: 42px; flex-shrink: 0; height: 46px;
  border: 1px solid var(--color-outline-variant); background: var(--surface-1);
  border-radius: var(--radius-sm); color: var(--color-primary);
  font-size: 19px; line-height: 1; cursor: pointer; font-family: var(--font-sans);
}
.lns-stepper__btn:hover { background: var(--surface-2); }
.lns-stepper__btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.lns-stepper .lns-field {
  flex: 1 1 0; min-width: 0; text-align: center;
  font-family: var(--font-mono); font-weight: var(--fw-semibold);
}
/* ukryj natywne spinnery liczbowe (mamy własne ±) */
.lns-stepper .lns-field::-webkit-outer-spin-button,
.lns-stepper .lns-field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lns-stepper .lns-field[type="number"] { -moz-appearance: textfield; }

/* Segment Tak/Nie (steruje ukrytym checkboxem = źródło prawdy) */
.lns-seg { display: flex; background: var(--surface-2); border: 1px solid var(--color-outline-variant); border-radius: var(--radius-sm); padding: 3px; gap: 3px; height: 46px; }
.lns-seg__btn {
  flex: 1; border: none; background: transparent; border-radius: var(--radius-xs);
  font-family: var(--font-sans); font-size: var(--text-body-sm); font-weight: var(--fw-medium);
  color: var(--color-on-surface-variant); cursor: pointer; padding: 0 14px; min-width: 44px;
}
.lns-seg__btn[aria-pressed="true"] { background: var(--color-surface); color: var(--color-on-surface); box-shadow: var(--shadow-xs, var(--shadow-sm)); }
.lns-seg__btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

@media (max-width: 720px) {
  .lns-genform { flex-direction: column; align-items: stretch; }
  .lns-gf, .lns-gf--submit { flex: 1 1 auto; margin-left: 0; }
  /* Stackuj przyciski submit pionowo — 3 pełnoszerokie przyciski nie mieszczą się
     obok siebie na wąskim ekranie (.lns-act to flex-row bez wrap). */
  .lns-gf--submit .lns-act { flex-direction: column; gap: 8px; }
  .lns-gf--submit .lns-btn { width: 100%; }
}

/* ==========================================================================
   Hall picker (lns-hallpick) — reużywalny wybór hali (para lonas-hall-picker.js)
   Trigger (id+nazwa+major) → popup: filtr budynku (WFS), szukanie, lista grupowana,
   manualne ID (fallback). Pisze hall_id do ukrytego inputu Symfony (źródło prawdy).
   ========================================================================== */
.lns-hallpick { position: relative; }
.lns-hallpick__native { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }

.lns-hallpick__trigger {
  display: flex; align-items: center; gap: 9px; width: 100%;
  height: 46px; padding: 0 12px;
  border: 1.5px solid var(--color-outline); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-on-surface);
  font-family: var(--font-sans); font-size: var(--text-body); cursor: pointer; text-align: left;
}
.lns-hallpick__trigger:hover { border-color: var(--color-outline); background: var(--surface-1); }
.lns-hallpick__trigger:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-container); }
.lns-hallpick__val { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; }
.lns-hallpick__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lns-hallpick__placeholder { color: var(--color-faint); }
.lns-hallpick__cv { color: var(--color-faint); flex-shrink: 0; }
.lns-hallpick__major { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-on-surface-variant); flex-shrink: 0; }

/* Popup */
.lns-hallpick__pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 1000;
  width: min(420px, 92vw);
  background: var(--color-surface); border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  display: none; flex-direction: column; overflow: hidden;
}
.lns-hallpick__pop.is-open { display: flex; }
.lns-hallpick__bld { padding: 11px 12px 9px; border-bottom: 1px solid var(--color-outline-variant); }
.lns-hallpick__bld[hidden] { display: none; }
.lns-hallpick__bld label { display: block; font-size: var(--text-label); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--label-letter-spacing); color: var(--color-faint); margin-bottom: 5px; }
.lns-hallpick__bld .lns-select { height: 38px; }
.lns-hallpick__search { display: flex; align-items: center; gap: 8px; height: 40px; margin: 10px 12px; border: 1px solid var(--color-outline); border-radius: var(--radius-sm); padding: 0 11px; background: var(--color-surface); }
.lns-hallpick__search:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-container); }
.lns-hallpick__search input { border: none; outline: none; background: transparent; flex: 1; min-width: 0; font-size: var(--text-body-sm); font-family: var(--font-sans); color: var(--color-on-surface); }

.lns-hallpick__list { max-height: 260px; overflow-y: auto; padding-bottom: 6px; }
.lns-hallpick__gl { font-size: var(--text-label); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--label-letter-spacing); color: var(--color-faint); padding: 9px 14px 4px; background: var(--surface-1); position: sticky; top: 0; }
.lns-hallpick__opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; min-height: 44px; box-sizing: border-box; border: none; background: transparent; cursor: pointer; font-family: var(--font-sans); font-size: var(--text-body-sm); color: var(--color-on-surface); text-align: left; }
.lns-hallpick__opt:hover, .lns-hallpick__opt.is-active { background: var(--surface-1); }
.lns-hallpick__opt[aria-selected="true"] { background: var(--color-primary-container); color: var(--color-on-primary-container); }
.lns-hallpick__opt .lns-hid { flex-shrink: 0; min-width: 42px; text-align: center; }
.lns-hallpick__opt .lns-hallpick__on { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lns-hallpick__opt .lns-hallpick__om { font-family: var(--font-mono); font-size: var(--text-label); color: var(--color-on-surface-variant); flex-shrink: 0; }
.lns-hallpick__opt[aria-selected="true"] .lns-hallpick__om { color: var(--color-on-primary-container); }
.lns-hallpick__empty { padding: 16px 14px; color: var(--color-on-surface-variant); font-size: var(--text-body-sm); text-align: center; }

.lns-hallpick__manual { border-top: 1px solid var(--color-outline-variant); padding: 10px 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lns-hallpick__manual label { font-size: var(--text-caption); color: var(--color-faint); flex-basis: 100%; margin-bottom: 2px; }
.lns-hallpick__manual input { flex: 1; min-width: 0; height: 38px; border: 1px solid var(--color-outline-variant); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-on-surface); font-family: var(--font-mono); font-size: var(--text-body-sm); padding: 0 10px; }
.lns-hallpick__manual input:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-container); }
.lns-hallpick__manual button { height: 38px; padding: 0 14px; flex-shrink: 0; }
.lns-hallpick__note { padding: 0 12px 10px; font-size: var(--text-caption); color: var(--color-faint); }

[data-theme="dark"] .lns-hallpick__bld .lns-select,
[data-theme="dark"] .lns-hallpick__search input,
[data-theme="dark"] .lns-hallpick__manual input { color-scheme: dark; }

@media (max-width: 720px) {
  .lns-hallpick__pop { width: 100%; }
}

/* ==========================================================================
   Loader — overlay ładowania dla długich operacji (para lonas-loader.js)
   Pełnoekranowy (data-lns-loading na formularzu/linku) — pokazuje spinner do
   nawigacji/zakończenia. Tokeny DS, dark-aware.
   ========================================================================== */
.lns-loader {
  position: fixed; inset: 0; z-index: 1200;
  display: none; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--color-background) 72%, transparent);
  backdrop-filter: blur(1.5px);
}
.lns-loader.is-open { display: flex; }
.lns-loader__box {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 22px 28px;
  background: var(--color-surface);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.lns-loader__spin {
  width: 38px; height: 38px;
  border: 3px solid var(--color-outline-variant);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: lns-spin .8s linear infinite;
}
.lns-loader__txt { font-size: var(--text-body-sm); font-weight: var(--fw-medium); color: var(--color-on-surface-variant); }
@keyframes lns-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lns-loader__spin { animation-duration: 2s; } }