/* Wzorzec paneli WWW RetailStrada (#459): panel administratora i — po MVP —
   panel klienta. Jeden plik źródłowy: serwer wkompilowuje go przez pakiet
   web/wzorce i podaje jako /admin/static/panel.css.

   Wartości wyłącznie z tokenów marki: docs/brand/tokens.css i type.css
   (generowany z docs/brand/tokens.json; kopia w tym katalogu do podglądu
   wzorców z dysku). Zmienne --rs-layout-* to wymiary układu złożone z tokenów.
   Test pakietu panel odrzuca liczby, kolory i kroje spoza tokenów.
   Bez cieni (BRANDBOOK 5.3), bez skryptów (CLAUDE.md §3).

   Układ według makiet Figma „Panel WWW” (40:2, 1:2384, 1:1580, 1:2, 31:883)
   i strony web/landing: górny pasek z logo i kontekstem, lewe menu
   z nagłówkami grup wersalikami (styl Nadtytuł) i aktywną pozycją na tle
   „Bordo jasne tło” z paskiem Bordo, treść na tle Papier. */

:root {
  /* pasek górny 64 px */
  --rs-layout-topbar: var(--rs-space-8);
  /* lewe menu 256 px (makieta: 256) */
  --rs-layout-aside: calc(var(--rs-space-9) + var(--rs-space-9) + var(--rs-space-8));
  /* treść do 1200 px (BRANDBOOK 5.2) */
  --rs-layout-content: calc(var(--rs-breakpoint-lg) + var(--rs-space-9) + var(--rs-space-8) + var(--rs-space-4));
  /* najmniejsza szerokość karty wskaźnika 240 px */
  --rs-layout-metric: calc(var(--rs-space-9) + var(--rs-space-9) + var(--rs-space-7));
  /* pole wyszukiwania w pasku filtrów 320 px */
  --rs-layout-search: calc(var(--rs-space-9) + var(--rs-space-9) + var(--rs-space-9) + var(--rs-space-6));
}

*, *::before, *::after { box-sizing: border-box; }

html {
  height: 100%;
  background: var(--rs-bg);
  color: var(--rs-text);
  font-family: var(--rs-font-sans);
  font-size: var(--rs-type-body-size);
  line-height: var(--rs-type-body-line);
  font-weight: var(--rs-type-body-weight);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: 0;
}

a { color: var(--rs-link); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: var(--rs-border-width-strong) solid var(--rs-focus);
  outline-offset: var(--rs-border-width-strong);
}

/* Tekst tylko dla czytnika ekranu */
.sr-only {
  position: absolute;
  width: var(--rs-border-width);
  height: var(--rs-border-width);
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Pasek górny ---------- */

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rs-space-4);
  min-height: var(--rs-layout-topbar);
  padding: var(--rs-space-2) var(--rs-space-5);
  background: var(--rs-surface);
  border-bottom: var(--rs-border-width) solid var(--rs-border);
}

.topbar-logo { display: block; }

/* logo poziome podstawowe, 32 px (BRANDBOOK 2.4: poziome od 24 px) */
.topbar-logo img { display: block; height: var(--rs-space-6); width: auto; }

.topbar-divider {
  width: var(--rs-border-width);
  height: var(--rs-space-5);
  background: var(--rs-border);
}

.topbar-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rs-space-4);
  margin-left: auto;
}

/* Znacznik roli albo miejsca (np. „Administrator RetailStrada”,
   „Agent czytający dane · strona lokalna”): Nadtytuł na tle neutralnym */
.badge {
  display: inline-block;
  padding: 0 var(--rs-space-2);
  background: var(--rs-surface-alt);
  border-radius: var(--rs-radius);
  color: var(--rs-text-secondary);
  font-size: var(--rs-type-overline-size);
  line-height: var(--rs-type-overline-line);
  font-weight: var(--rs-type-overline-weight);
  letter-spacing: var(--rs-type-overline-tracking);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Rola administratora: odróżnienie od panelu klienta Bordo, nie kolorem błędu */
.badge-admin {
  background: var(--rs-primary-subtle-bg);
  color: var(--rs-primary);
  border: var(--rs-border-width) solid var(--rs-primary-subtle-border);
}

/* Przełącznik kontekstu (panel klienta, makieta 31:883): <details> bez
   skryptu; lista to zwykłe odnośniki, wyszukiwanie to formularz GET. */
.context { position: relative; }

.context summary {
  display: inline-flex;
  align-items: center;
  gap: var(--rs-space-2);
  min-height: var(--rs-control-sm);
  padding: 0 var(--rs-space-3);
  background: var(--rs-bg);
  border: var(--rs-border-width) solid var(--rs-border);
  border-radius: var(--rs-radius);
  color: var(--rs-text);
  font-size: var(--rs-type-body-sm-size);
  line-height: var(--rs-type-body-sm-line);
  cursor: pointer;
  list-style: none;
}

.context summary::-webkit-details-marker { display: none; }

/* strzałka w dół z obramowań (bez kroju ikon) */
.context summary::after {
  content: "";
  border-top: var(--rs-space-1) solid currentColor;
  border-left: var(--rs-space-1) solid transparent;
  border-right: var(--rs-space-1) solid transparent;
}

.context summary:hover { border-color: var(--rs-border-strong); }

.context-kind { color: var(--rs-text-secondary); }

.context-panel {
  position: absolute;
  top: calc(100% + var(--rs-space-1));
  left: 0;
  z-index: 1;
  min-width: var(--rs-layout-metric);
  padding: var(--rs-space-2) 0;
  background: var(--rs-surface);
  border: var(--rs-border-width) solid var(--rs-border);
  border-radius: var(--rs-radius);
}

.context-panel form { padding: 0 var(--rs-space-3) var(--rs-space-2); }

.context-panel ul { margin: 0; padding: 0; list-style: none; }

.context-panel a {
  display: flex;
  align-items: center;
  gap: var(--rs-space-3);
  min-height: var(--rs-control-md);
  padding: 0 var(--rs-space-4);
  color: var(--rs-text);
  text-decoration: none;
  font-size: var(--rs-type-body-sm-size);
  line-height: var(--rs-type-body-sm-line);
}

.context-panel a:hover { background: var(--rs-bg); }

.context-panel a[aria-current="true"] {
  background: var(--rs-bg);
  font-weight: var(--rs-type-label-weight);
}

.context-panel .context-more {
  border-top: var(--rs-border-width) solid var(--rs-border);
  color: var(--rs-link);
}

.context-level {
  color: var(--rs-text-secondary);
  font-size: var(--rs-type-caption-size);
  line-height: var(--rs-type-caption-line);
}

/* Konto: inicjały w kole (BRANDBOOK 5.3: koło tylko dla awatarów), nazwa, rola */
.account {
  display: flex;
  align-items: center;
  gap: var(--rs-space-3);
  padding-left: var(--rs-space-4);
  border-left: var(--rs-border-width) solid var(--rs-border);
}

.account form { margin: 0; }

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rs-space-6);
  height: var(--rs-space-6);
  border-radius: 100%;
  background: var(--rs-primary);
  color: var(--rs-on-primary);
  font-size: var(--rs-type-caption-size);
  line-height: var(--rs-type-caption-line);
  font-weight: var(--rs-type-label-weight);
}

.account-who {
  display: flex;
  flex-direction: column;
  font-size: var(--rs-type-body-sm-size);
  line-height: var(--rs-type-body-sm-line);
  font-weight: var(--rs-type-label-weight);
}

.account-role {
  color: var(--rs-text-secondary);
  font-size: var(--rs-type-caption-size);
  line-height: var(--rs-type-caption-line);
  font-weight: var(--rs-type-caption-weight);
}

/* ---------- Układ: menu i treść ---------- */

.shell {
  display: flex;
  flex: 1;
  align-items: stretch;
}

.aside {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: var(--rs-layout-aside);
  background: var(--rs-surface);
  border-right: var(--rs-border-width) solid var(--rs-border);
}

/* Menu sekcji. Odnośniki bez klas i bez znaczników w środku: pozycję
   aktywną oznacza aria-current="page" (testy panelu czytają je wprost). */
.nav {
  flex: 1;
  padding: var(--rs-space-4) 0;
}

.nav-group + .nav-group {
  margin-top: var(--rs-space-2);
  padding-top: var(--rs-space-2);
  border-top: var(--rs-border-width) solid var(--rs-border);
}

.nav-heading {
  margin: 0;
  padding: var(--rs-space-2) var(--rs-space-4);
  color: var(--rs-text-secondary);
  font-size: var(--rs-type-overline-size);
  line-height: var(--rs-type-overline-line);
  font-weight: var(--rs-type-overline-weight);
  letter-spacing: var(--rs-type-overline-tracking);
  text-transform: uppercase;
}

.nav ul { margin: 0; padding: 0; list-style: none; }

.nav a {
  display: flex;
  align-items: center;
  min-height: var(--rs-size-touch-min);
  padding: var(--rs-space-2) var(--rs-space-4);
  border-left: var(--rs-border-width-strong) solid transparent;
  color: var(--rs-text-secondary);
  text-decoration: none;
  font-size: var(--rs-type-body-sm-size);
  line-height: var(--rs-type-body-sm-line);
  font-weight: var(--rs-type-label-weight);
  transition: background-color var(--rs-dur-fast) var(--rs-ease);
}

.nav a:hover { background: var(--rs-bg); color: var(--rs-text); }

.nav a[aria-current="page"] {
  background: var(--rs-primary-subtle-bg);
  border-left-color: var(--rs-primary);
  color: var(--rs-text);
}

/* Licznik przy pozycji (np. alarmy): tekst, nie sam kolor */
.nav-count {
  margin-left: auto;
  padding: 0 var(--rs-space-1);
  border-radius: var(--rs-radius);
  background: var(--rs-error);
  color: var(--rs-on-primary);
  font-size: var(--rs-type-caption-size);
  line-height: var(--rs-type-caption-line);
}

/* Stopka menu: stan, wsparcie, uwagi */
.aside-foot {
  padding: var(--rs-space-4);
  border-top: var(--rs-border-width) solid var(--rs-border);
  color: var(--rs-text-secondary);
  font-size: var(--rs-type-body-sm-size);
  line-height: var(--rs-type-body-sm-line);
}

.aside-foot p { margin: 0 0 var(--rs-space-2); }

.aside-foot p:last-child { margin: 0; }

.status-box {
  display: flex;
  align-items: center;
  gap: var(--rs-space-2);
  margin: 0 0 var(--rs-space-3);
  padding: var(--rs-space-2) var(--rs-space-3);
  background: var(--rs-bg);
  border: var(--rs-border-width) solid var(--rs-border);
  border-radius: var(--rs-radius);
  color: var(--rs-text);
  font-size: var(--rs-type-caption-size);
  line-height: var(--rs-type-caption-line);
}

.status-box .tag { margin-left: auto; }

.main {
  flex: 1;
  min-width: 0;
  padding: var(--rs-space-6) var(--rs-space-5) var(--rs-space-8);
}

.main-inner {
  max-width: var(--rs-layout-content);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Strona bez sesji (logowanie): bez menu, karta na środku */
.login-page .main { display: flex; align-items: flex-start; justify-content: center; }

/* Wąski ekran (poniżej breakpoint-lg, 1024 px; zmiennych nie ma
   w zapytaniach o media): menu nad treścią. */
@media not all and (min-width: 1024px) {
  .shell { flex-direction: column; }
  .aside { width: auto; border-right: 0; border-bottom: var(--rs-border-width) solid var(--rs-border); }
  .nav { padding: var(--rs-space-2) 0; }
  .main { padding: var(--rs-space-5) var(--rs-space-5) var(--rs-space-7); }
}

/* ---------- Typografia treści ---------- */

h1 {
  margin: 0 0 var(--rs-space-5);
  font-size: var(--rs-type-h1-size);
  line-height: var(--rs-type-h1-line);
  font-weight: var(--rs-type-h1-weight);
  letter-spacing: var(--rs-type-h1-tracking);
}

h2 {
  margin: var(--rs-space-6) 0 var(--rs-space-4);
  font-size: var(--rs-type-h2-size);
  line-height: var(--rs-type-h2-line);
  font-weight: var(--rs-type-h2-weight);
  letter-spacing: var(--rs-type-h2-tracking);
}

h3 {
  margin: 0 0 var(--rs-space-3);
  font-size: var(--rs-type-h3-size);
  line-height: var(--rs-type-h3-line);
  font-weight: var(--rs-type-h3-weight);
}

p { margin: 0 0 var(--rs-space-4); }

.overline {
  font-size: var(--rs-type-overline-size);
  line-height: var(--rs-type-overline-line);
  font-weight: var(--rs-type-overline-weight);
  letter-spacing: var(--rs-type-overline-tracking);
  text-transform: uppercase;
  color: var(--rs-text-secondary);
}

.note {
  font-size: var(--rs-type-body-sm-size);
  line-height: var(--rs-type-body-sm-line);
  color: var(--rs-text-secondary);
}

/* Nagłówek strony: nadtytuł (ścieżka), tytuł, opis, działania po prawej */
.head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--rs-space-4);
  margin: 0 0 var(--rs-space-5);
}

.head h1 { margin: 0; }

.head .overline { margin: 0 0 var(--rs-space-1); }

.head-lead {
  margin: var(--rs-space-1) 0 0;
  color: var(--rs-text-secondary);
  font-size: var(--rs-type-body-sm-size);
  line-height: var(--rs-type-body-sm-line);
}

.head-actions {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  gap: var(--rs-space-3);
}

/* ---------- Karty ---------- */

.card {
  background: var(--rs-surface);
  border: var(--rs-border-width) solid var(--rs-border);
  border-radius: var(--rs-radius);
  padding: var(--rs-space-5);
}

.card + .card { margin-top: var(--rs-space-5); }

.narrow { width: 100%; max-width: var(--rs-breakpoint-sm); }

.form-card { max-width: var(--rs-breakpoint-md); }

/* Długa nazwa sklepu nie poszerza formularza poleceń. */
.card select { min-width: 0; max-width: 100%; }

/* Formularze w karcie bez osobnych pól .field (polecenia, ponowny odczyt,
   problemy diagnostyczne): etykieta nad polem, pole na pełną szerokość
   formularza (do szerokości md), przyciski z odstępem. Wygląd jak .field. */
.card label {
  display: block;
  margin: var(--rs-space-4) 0 var(--rs-space-2);
  font-size: var(--rs-type-body-sm-size);
  line-height: var(--rs-type-body-sm-line);
  font-weight: var(--rs-type-label-weight);
}

.card > label:first-child, .card > input[type="hidden"] + label { margin-top: 0; }

.card label > input, .card label > select, .card label > textarea,
.card > input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.card > select, .card > textarea,
.card > fieldset > input:not([type="checkbox"]):not([type="radio"]), .card > fieldset > select {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: var(--rs-breakpoint-md);
  height: var(--rs-control-md);
  margin: var(--rs-space-2) 0 0;
  padding: 0 var(--rs-space-3);
  background: var(--rs-surface);
  color: var(--rs-text);
  border: var(--rs-border-width) solid var(--rs-border-strong);
  border-radius: var(--rs-radius);
  font-family: inherit;
  font-size: var(--rs-type-body-size);
}

.card label > textarea, .card > textarea { height: auto; padding: var(--rs-space-2) var(--rs-space-3); }

/* Pole wpisane po etykiecie, nie w niej (label + input) */
.card > label + input, .card > label + select, .card > fieldset > label + input { margin-top: 0; }

.card label > input[type="checkbox"], .card label > input[type="radio"] {
  display: inline-block;
  width: auto;
  height: auto;
  margin: 0 var(--rs-space-2) 0 0;
  vertical-align: middle;
}

.card input:focus, .card select:focus, .card textarea:focus {
  outline: var(--rs-border-width-strong) solid var(--rs-focus);
  outline-offset: 0;
}

.card fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }

.card legend { padding: 0; font-weight: var(--rs-type-label-weight); }

.card > .btn, .card > fieldset > .btn { margin: var(--rs-space-4) var(--rs-space-3) 0 0; }

.card .note { max-width: var(--rs-breakpoint-md); }

/* Karty wskaźników (BRANDBOOK 8.5): Nadtytuł, Wskaźnik, zmiana z okresem */
.metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rs-space-4);
  margin: 0 0 var(--rs-space-5);
  padding: 0;
  list-style: none;
}

.metric {
  flex: 1 1 var(--rs-layout-metric);
  padding: var(--rs-space-4) var(--rs-space-5);
  background: var(--rs-surface);
  border: var(--rs-border-width) solid var(--rs-border);
  border-radius: var(--rs-radius);
}

.metric-label {
  margin: 0 0 var(--rs-space-2);
  color: var(--rs-text-secondary);
  font-size: var(--rs-type-overline-size);
  line-height: var(--rs-type-overline-line);
  font-weight: var(--rs-type-overline-weight);
  letter-spacing: var(--rs-type-overline-tracking);
  text-transform: uppercase;
}

.metric-value {
  margin: 0;
  font-size: var(--rs-type-metric-size);
  line-height: var(--rs-type-metric-line);
  font-weight: var(--rs-type-metric-weight);
  letter-spacing: var(--rs-type-metric-tracking);
}

/* „brak danych” zamiast zera (BRANDBOOK 11.4) */
.metric-value.empty { color: var(--rs-text-muted); font-size: var(--rs-type-h3-size); }

.metric-note {
  margin: var(--rs-space-2) 0 0;
  color: var(--rs-text-secondary);
  font-size: var(--rs-type-caption-size);
  line-height: var(--rs-type-caption-line);
}

/* ---------- Pola formularza (BRANDBOOK 8.4) ---------- */

.field { min-width: 0; max-width: 100%; margin: 0 0 var(--rs-space-4); }

.field label {
  display: block;
  margin: 0 0 var(--rs-space-2);
  font-size: var(--rs-type-body-sm-size);
  line-height: var(--rs-type-body-sm-line);
  font-weight: var(--rs-type-label-weight);
}

.field input, .field select {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: var(--rs-control-md);
  padding: 0 var(--rs-space-3);
  background: var(--rs-surface);
  color: var(--rs-text);
  border: var(--rs-border-width) solid var(--rs-border-strong);
  border-radius: var(--rs-radius);
  font-family: inherit;
  font-size: var(--rs-type-body-size);
}

.field input:focus, .field select:focus {
  outline: var(--rs-border-width-strong) solid var(--rs-focus);
  outline-offset: 0;
}

.hint {
  margin: var(--rs-space-1) 0 0;
  font-size: var(--rs-type-body-sm-size);
  line-height: var(--rs-type-body-sm-line);
  color: var(--rs-text-secondary);
}

.field-error input, .field-error select, .field-error textarea { border: var(--rs-border-width-strong) solid var(--rs-error); }

/* Pole wielowierszowe (notatka mapowania, D5.4): jak input, wysokość z treści */
.field textarea {
  display: block;
  width: 100%;
  padding: var(--rs-space-2) var(--rs-space-3);
  background: var(--rs-surface);
  color: var(--rs-text);
  border: var(--rs-border-width) solid var(--rs-border-strong);
  border-radius: var(--rs-radius);
  font-family: inherit;
  font-size: var(--rs-type-body-size);
  line-height: var(--rs-type-body-line);
}

.field textarea:focus {
  outline: var(--rs-border-width-strong) solid var(--rs-focus);
  outline-offset: 0;
}

/* Wybór pliku (wgranie mapowania, D5.4): wysokość z treści przeglądarki */
.field input[type="file"] {
  height: auto;
  padding: var(--rs-space-2) var(--rs-space-3);
}

.field-msg {
  margin: var(--rs-space-1) 0 0;
  font-size: var(--rs-type-body-sm-size);
  line-height: var(--rs-type-body-sm-line);
  color: var(--rs-error-text);
}

/* Dwa pola w wierszu, na wąskim ekranie jedno pod drugim */
.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--rs-space-4);
}

.field-row .field { flex: 1 1 var(--rs-layout-metric); }

/* ---------- Przyciski (BRANDBOOK 8.1, 8.2) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rs-space-2);
  min-width: var(--rs-size-touch-min);
  border-radius: var(--rs-radius);
  font-family: inherit;
  font-size: var(--rs-type-label-size);
  line-height: var(--rs-type-label-line);
  font-weight: var(--rs-type-label-weight);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--rs-dur-fast) var(--rs-ease);
}

a.btn { text-decoration: none; }

.btn-primary {
  height: var(--rs-control-md);
  padding: 0 var(--rs-space-4);
  background: var(--rs-primary);
  color: var(--rs-on-primary);
  border: 0;
}

.btn-primary:hover, .btn-primary:active { background: var(--rs-primary-hover); }

.btn-secondary {
  height: var(--rs-control-md);
  padding: 0 var(--rs-space-4);
  background: var(--rs-surface);
  color: var(--rs-text);
  border: var(--rs-border-width) solid var(--rs-text);
}

.btn-secondary:hover { background: var(--rs-surface-alt); }

.btn-secondary:active { background: var(--rs-border); }

.btn-text {
  height: var(--rs-control-sm);
  padding: 0 var(--rs-space-3);
  background: transparent;
  color: var(--rs-primary);
  border: 0;
}

.btn-text:hover { background: var(--rs-primary-subtle-bg); }

.btn-destructive {
  height: var(--rs-control-md);
  padding: 0 var(--rs-space-4);
  background: transparent;
  color: var(--rs-error-text);
  border: var(--rs-border-width) solid var(--rs-error);
}

.btn-destructive:hover, .btn-destructive:active { background: var(--rs-error-bg); }

.btn-destructive:active { border-width: var(--rs-border-width-strong); }

.btn:disabled {
  background: var(--rs-surface-alt);
  color: var(--rs-border-strong);
  border: 0;
  cursor: default;
}

.btn-sm {
  height: var(--rs-control-sm);
  padding: 0 var(--rs-space-3);
  font-size: var(--rs-type-body-sm-size);
  line-height: var(--rs-type-body-sm-line);
}

.btn-block { width: 100%; }

/* Główny przycisk pierwszy w kodzie (Enter), na ekranie po prawej
   (BRANDBOOK 8.2); przy działaniu niszczącym zwykła kolejność. */
.actions {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: var(--rs-space-3);
  margin: var(--rs-space-5) 0 0;
}

.actions-destructive { flex-direction: row; }

/* ---------- Komunikaty w treści (BRANDBOOK 8.8) ---------- */

.msg {
  margin: 0 0 var(--rs-space-4);
  padding: var(--rs-space-3) var(--rs-space-4);
  border-radius: var(--rs-radius);
  border: var(--rs-border-width) solid;
  color: var(--rs-text);
  font-size: var(--rs-type-body-sm-size);
  line-height: var(--rs-type-body-sm-line);
}

.msg p { margin: 0; }

.msg-title {
  display: block;
  margin: 0 0 var(--rs-space-1);
  font-weight: var(--rs-type-label-weight);
}

.msg-info { background: var(--rs-info-bg); border-color: var(--rs-info); }

.msg-info .msg-title, p.msg-info { color: var(--rs-info-text); }

.msg-warning { background: var(--rs-warning-bg); border-color: var(--rs-warning); }

.msg-warning .msg-title, p.msg-warning { color: var(--rs-warning-text); }

.msg-error { background: var(--rs-error-bg); border-color: var(--rs-error); }

.msg-error .msg-title, p.msg-error { color: var(--rs-error-text); }

/* ---------- Pasek filtrów (formularz GET) ---------- */

.filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--rs-space-4);
  margin: 0 0 var(--rs-space-5);
  padding: var(--rs-space-4);
  background: var(--rs-surface);
  border: var(--rs-border-width) solid var(--rs-border);
  border-radius: var(--rs-radius);
}

.filter .field { margin: 0; }

.filter .field-search { flex: 1 1 var(--rs-layout-search); }

.filter-actions { display: flex; align-items: center; gap: var(--rs-space-3); }

/* ---------- Tabele (BRANDBOOK 8.6) ---------- */

.table-wrap {
  background: var(--rs-surface);
  border: var(--rs-border-width) solid var(--rs-border);
  border-radius: var(--rs-radius);
}

table { width: 100%; table-layout: fixed; border-collapse: collapse; }

caption {
  padding: var(--rs-space-4) var(--rs-space-5);
  text-align: left;
  font-size: var(--rs-type-h3-size);
  line-height: var(--rs-type-h3-line);
  font-weight: var(--rs-type-h3-weight);
}

th {
  position: sticky;
  top: 0;
  padding: var(--rs-space-3);
  background: var(--rs-bg);
  border-bottom: var(--rs-border-width) solid var(--rs-border);
  text-align: left;
  white-space: nowrap;
  font-size: var(--rs-type-overline-size);
  line-height: var(--rs-type-overline-line);
  font-weight: var(--rs-type-overline-weight);
  letter-spacing: var(--rs-type-overline-tracking);
  text-transform: uppercase;
  color: var(--rs-text-secondary);
}

td {
  height: var(--rs-control-md);
  padding: var(--rs-space-2) var(--rs-space-3);
  border-bottom: var(--rs-border-width) solid var(--rs-border);
  vertical-align: middle;
}

th:first-child, td:first-child { padding-left: var(--rs-space-5); }

th:last-child, td:last-child { padding-right: var(--rs-space-5); }

tbody tr:last-child td { border-bottom: 0; }

tbody tr:hover td { background: var(--rs-bg); }

.cell-sub {
  display: block;
  color: var(--rs-text-secondary);
  font-size: var(--rs-type-caption-size);
  line-height: var(--rs-type-caption-line);
}

/* Działania w wierszu: przyciski małe, do prawej */
.row-actions { white-space: nowrap; text-align: right; }

.row-actions .btn + .btn, .row-actions form + .btn, .row-actions .btn + form { margin-left: var(--rs-space-2); }

.row-actions form { display: inline; margin: 0; }

/* Stopka tabeli: liczba wierszy i stronicowanie */
.table-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rs-space-3);
  padding: var(--rs-space-3) var(--rs-space-5);
  background: var(--rs-surface);
  border: var(--rs-border-width) solid var(--rs-border);
  border-top: 0;
  color: var(--rs-text-secondary);
  font-size: var(--rs-type-body-sm-size);
  line-height: var(--rs-type-body-sm-line);
}

.table-foot .pager { margin: 0; }

/* Dane: JetBrains Mono tylko dla wartości (BRANDBOOK 4.4) */
.data, td.num {
  font-family: var(--rs-font-mono);
  font-size: var(--rs-type-data-size);
  line-height: var(--rs-type-data-line);
  font-weight: var(--rs-type-data-weight);
}

td.data { white-space: nowrap; }

.num { text-align: right; white-space: nowrap; }

.data.hash { white-space: normal; word-break: break-all; }

/* Długa wartość w komórce danych (dziennik): zawijanie zamiast przewijania */
td.data.wrap { white-space: normal; overflow-wrap: anywhere; }

/* Tabela mieszcząca się w szerokości strony (reguła właściciela 9.10, #495):
   bez przewijania w poziomie, komórki zawijają treść, a do progu md
   każdy wiersz jest listą „etykieta: wartość” (data-label, bez JavaScriptu). */
.table-wrap.table-fit { width: 100%; }

/* Układ według treści (auto): kolumny dostają szerokość proporcjonalnie do
   zawartości, więc krótkie wartości (NIP, data, system) nie są łamane tylko
   dlatego, że sąsiednia kolumna ma długi tekst. Stały układ (fixed) dzielił
   szerokość równo i łamał etykiety w środku słowa. */
table.table-fit { table-layout: auto; }

table.table-fit th, table.table-fit td {
  white-space: normal;
  overflow-wrap: anywhere;
  padding-left: var(--rs-space-2);
  padding-right: var(--rs-space-2);
}

/* Nagłówek kolumny łamie się tylko między słowami: podłoga szerokości
   kolumny to najdłuższe słowo nagłówka. */
table.table-fit th { overflow-wrap: normal; word-break: normal; hyphens: none; }

/* Dolna granica szerokości komórki: długa wartość nie zwija kolumny do
   pojedynczych znaków, a tabela nadal mieści się w stronie. */
table.table-fit td { min-width: var(--rs-space-7); }

/* Wartość techniczna (data, identyfikator, wersja) mieści co najmniej
   dziesięć znaków kroju mono, więc data nie jest łamana w środku. */
table.table-fit td.data { min-width: calc(var(--rs-space-9) + var(--rs-space-2)); }

table.table-fit td.num, table.table-fit th.num { white-space: nowrap; min-width: 0; }

/* Przyciski i znaczniki w tabeli nie łamią własnego napisu. */
table.table-fit .btn { min-width: 0; max-width: none; white-space: nowrap; }

table.table-fit .tag { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: normal; }

/* Kolumna działań ma szerokość najdłuższego przycisku. */
table.table-fit td.row-actions { width: var(--rs-space-1); white-space: nowrap; min-width: 0; }

table.table-fit .row-actions form { display: block; }

table.table-fit .row-actions .btn { margin: 0 0 var(--rs-space-1); }

table.table-fit th:first-child, table.table-fit td:first-child { padding-left: var(--rs-space-4); }

table.table-fit th:last-child, table.table-fit td:last-child { padding-right: var(--rs-space-4); }

@media (max-width: 768px) {
  table.table-fit thead { display: none; }
  table.table-fit td, table.table-fit td.data { min-width: 0; }
  table.table-fit td.row-actions { width: auto; }
  table.table-fit tr { display: block; padding: var(--rs-space-2) 0; border-bottom: var(--rs-border-width) solid var(--rs-border); }
  table.table-fit td, table.table-fit td.num, table.table-fit th[scope="row"] {
    display: block;
    height: auto;
    text-align: left;
    border-bottom: 0;
    padding: var(--rs-space-1) var(--rs-space-4);
  }
  table.table-fit th:first-child, table.table-fit td:first-child, table.table-fit th:last-child, table.table-fit td:last-child { padding-left: var(--rs-space-4); padding-right: var(--rs-space-4); }
  table.table-fit td[data-label]::before {
    content: attr(data-label) ": ";
    font-family: var(--rs-font-sans);
    font-size: var(--rs-type-caption-size);
    line-height: var(--rs-type-caption-line);
    color: var(--rs-text-secondary);
  }
  table.table-fit tbody tr:last-child { border-bottom: 0; }
}

/* Tabela z dziesięcioma kolumnami lub więcej nie mieści się obok menu
   do 1440 px, a z siedmioma lub więcej do 1024 px, bez łamania
   nagłówków i dat w środku słowa, więc od tego progu każdy wiersz jest
   listą „etykieta: wartość”, jak na telefonie. */
@media (max-width: 1440px) {
  table.table-fit:has(th:nth-child(10)) thead { display: none; }
  table.table-fit:has(th:nth-child(10)) td, table.table-fit:has(th:nth-child(10)) td.data { min-width: 0; }
  table.table-fit:has(th:nth-child(10)) td.row-actions { width: auto; }
  table.table-fit:has(th:nth-child(10)) tr { display: block; padding: var(--rs-space-2) 0; border-bottom: var(--rs-border-width) solid var(--rs-border); }
  table.table-fit:has(th:nth-child(10)) td, table.table-fit:has(th:nth-child(10)) td.num, table.table-fit:has(th:nth-child(10)) th[scope="row"] {
    display: block;
    height: auto;
    text-align: left;
    border-bottom: 0;
    padding: var(--rs-space-1) var(--rs-space-4);
  }
  table.table-fit:has(th:nth-child(10)) th:first-child, table.table-fit:has(th:nth-child(10)) td:first-child, table.table-fit:has(th:nth-child(10)) th:last-child, table.table-fit:has(th:nth-child(10)) td:last-child { padding-left: var(--rs-space-4); padding-right: var(--rs-space-4); }
  table.table-fit:has(th:nth-child(10)) td[data-label]::before {
    content: attr(data-label) ": ";
    font-family: var(--rs-font-sans);
    font-size: var(--rs-type-caption-size);
    line-height: var(--rs-type-caption-line);
    color: var(--rs-text-secondary);
  }
  table.table-fit:has(th:nth-child(10)) tbody tr:last-child { border-bottom: 0; }
}

@media (max-width: 1024px) {
  table.table-fit:has(th:nth-child(7)) thead { display: none; }
  table.table-fit:has(th:nth-child(7)) td, table.table-fit:has(th:nth-child(7)) td.data { min-width: 0; }
  table.table-fit:has(th:nth-child(7)) td.row-actions { width: auto; }
  table.table-fit:has(th:nth-child(7)) tr { display: block; padding: var(--rs-space-2) 0; border-bottom: var(--rs-border-width) solid var(--rs-border); }
  table.table-fit:has(th:nth-child(7)) td, table.table-fit:has(th:nth-child(7)) td.num, table.table-fit:has(th:nth-child(7)) th[scope="row"] {
    display: block;
    height: auto;
    text-align: left;
    border-bottom: 0;
    padding: var(--rs-space-1) var(--rs-space-4);
  }
  table.table-fit:has(th:nth-child(7)) th:first-child, table.table-fit:has(th:nth-child(7)) td:first-child, table.table-fit:has(th:nth-child(7)) th:last-child, table.table-fit:has(th:nth-child(7)) td:last-child { padding-left: var(--rs-space-4); padding-right: var(--rs-space-4); }
  table.table-fit:has(th:nth-child(7)) td[data-label]::before {
    content: attr(data-label) ": ";
    font-family: var(--rs-font-sans);
    font-size: var(--rs-type-caption-size);
    line-height: var(--rs-type-caption-line);
    color: var(--rs-text-secondary);
  }
  table.table-fit:has(th:nth-child(7)) tbody tr:last-child { border-bottom: 0; }
}

/* ---------- Stronicowanie ---------- */

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rs-space-2);
  margin: var(--rs-space-4) 0 0;
  font-size: var(--rs-type-body-sm-size);
  line-height: var(--rs-type-body-sm-line);
  color: var(--rs-text-secondary);
}

.pager-pages { display: flex; gap: var(--rs-space-1); margin: 0; padding: 0; list-style: none; }

.pager-pages a, .pager-pages span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--rs-control-sm);
  height: var(--rs-control-sm);
  padding: 0 var(--rs-space-2);
  border: var(--rs-border-width) solid var(--rs-border);
  border-radius: var(--rs-radius);
  background: var(--rs-surface);
  color: var(--rs-text);
  text-decoration: none;
  font-family: var(--rs-font-mono);
  font-size: var(--rs-type-data-size);
}

.pager-pages a:hover { border-color: var(--rs-border-strong); }

.pager-pages [aria-current="page"] {
  background: var(--rs-text);
  border-color: var(--rs-text);
  color: var(--rs-surface);
}

/* ---------- Znaczniki stanu (BRANDBOOK 8.7): kropka i tekst ---------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--rs-space-2);
  height: var(--rs-space-5);
  padding: 0 var(--rs-space-2);
  border-radius: var(--rs-radius);
  white-space: nowrap;
  font-size: var(--rs-type-caption-size);
  line-height: var(--rs-type-caption-line);
  font-weight: var(--rs-type-label-weight);
}

/* Odtworzone ustawienia: cały tekst mieści się w znaczniku po zawinięciu. */
.tag.local-reset-tag {
  height: auto;
  min-height: var(--rs-space-5);
  padding: var(--rs-space-1) var(--rs-space-2);
}

.tag.local-reset-tag::before { flex-shrink: 0; }

.tag::before {
  content: "";
  width: var(--rs-space-2);
  height: var(--rs-space-2);
  border-radius: 100%;
  background: currentColor;
}

.tag-success { background: var(--rs-success-bg); color: var(--rs-success-text); }

.tag-info { background: var(--rs-info-bg); color: var(--rs-info-text); }

.tag-warning { background: var(--rs-warning-bg); color: var(--rs-warning-text); }

.tag-error { background: var(--rs-error-bg); color: var(--rs-error-text); }

.tag-neutral { background: var(--rs-surface-alt); color: var(--rs-text-secondary); }

/* ---------- Pozostałe składniki sekcji etapu 1 ---------- */

/* Hasło pokazane raz: zaznaczenie całości jednym kliknięciem, bez skryptu */
.secret {
  padding: var(--rs-space-3) var(--rs-space-4);
  background: var(--rs-surface-alt);
  border: var(--rs-border-width) solid var(--rs-border-strong);
  border-radius: var(--rs-radius);
  font-family: var(--rs-font-mono);
  font-size: var(--rs-type-data-size);
  line-height: var(--rs-type-data-line);
  font-weight: var(--rs-type-data-weight);
  word-break: break-all;
  user-select: all;
}

/* Lista faktów: nazwa i wartość */
.facts {
  display: grid;
  grid-template-columns: max-content auto;
  gap: var(--rs-space-2) var(--rs-space-5);
  margin: 0 0 var(--rs-space-4);
}

.facts dt { color: var(--rs-text-secondary); font-weight: var(--rs-type-label-weight); }

.facts dd { margin: 0; overflow-wrap: anywhere; }

/* Braki kompletu i wyniki kroków */
.problems {
  margin: var(--rs-space-1) 0 0;
  padding: 0 0 0 var(--rs-space-4);
  font-size: var(--rs-type-body-sm-size);
  line-height: var(--rs-type-body-sm-line);
  color: var(--rs-text-secondary);
}

.steps { margin: 0; padding: 0 0 0 var(--rs-space-5); }

.steps li { margin: 0 0 var(--rs-space-4); }

/* Treść przesyłki: zawsze tekst, nigdy znaczniki */
pre.content {
  margin: 0;
  padding: var(--rs-space-4);
  overflow-x: auto;
  background: var(--rs-surface);
  border: var(--rs-border-width) solid var(--rs-border);
  border-radius: var(--rs-radius);
  font-family: var(--rs-font-mono);
  font-size: var(--rs-type-data-size);
  line-height: var(--rs-type-data-line);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Stopka strony */
.foot {
  margin: var(--rs-space-7) 0 0;
  padding: var(--rs-space-4) 0 0;
  border-top: var(--rs-border-width) solid var(--rs-border);
  font-size: var(--rs-type-body-sm-size);
  line-height: var(--rs-type-body-sm-line);
  color: var(--rs-text-secondary);
}

.foot p { margin: 0; }

/* Formularz sklepu (A7.2): wybór podmiotu, pola zaznaczenia, godziny
   otwarcia w tabeli dni. */
.choice { margin: 0 0 var(--rs-space-4); padding: 0; border: 0; }

.choice legend {
  margin: 0 0 var(--rs-space-2);
  padding: 0;
  font-size: var(--rs-type-body-sm-size);
  line-height: var(--rs-type-body-sm-line);
  font-weight: var(--rs-type-label-weight);
}

.check {
  display: flex;
  align-items: center;
  gap: var(--rs-space-2);
  min-height: var(--rs-control-md);
}

.check input, table.hours input[type="checkbox"] {
  width: var(--rs-space-5);
  height: var(--rs-space-5);
  margin: 0;
  accent-color: var(--rs-primary);
}

.indent { padding: 0 0 0 var(--rs-space-6); }

table.hours { width: 100%; margin: var(--rs-space-3) 0 0; }

table.hours th[scope="row"] { text-align: left; font-weight: var(--rs-type-label-weight); }

table.hours input[type="text"] {
  width: var(--rs-space-9);
  height: var(--rs-control-sm);
  padding: 0 var(--rs-space-2);
  background: var(--rs-surface);
  color: var(--rs-text);
  border: var(--rs-border-width) solid var(--rs-border-strong);
  border-radius: var(--rs-radius);
  font-family: var(--rs-font-mono);
  font-size: var(--rs-type-body-size);
}

table.hours tr.field-error input[type="text"] { border: var(--rs-border-width-strong) solid var(--rs-error); }

table.hours td .field-msg { margin: 0; }

/* ---------- Wyłącznie podgląd wzorców (web/wzorce/*.html) ---------- */

.wzorzec-frame {
  margin: 0 0 var(--rs-space-6);
  border: var(--rs-border-width) solid var(--rs-border-strong);
  background: var(--rs-bg);
}

.wzorzec-frame .shell { min-height: var(--rs-layout-search); }

/* Local pinned brand fonts (P0.7, DA-560). Licenses: fonts/*.txt. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Material Symbols Outlined';
  src: url('fonts/MaterialSymbolsOutlined-panel.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
.rs-icon {
  display: inline-block;
  flex-shrink: 0;
  font-family: var(--rs-font-icon);
  font-size: var(--rs-size-icon-lg);
  line-height: var(--rs-size-icon-lg);
  font-style: normal;
  font-weight: var(--rs-icon-wght);
  font-variation-settings: 'FILL' var(--rs-icon-fill), 'wght' var(--rs-icon-wght), 'GRAD' var(--rs-icon-grad), 'opsz' var(--rs-icon-opsz);
}
.nav a { gap: var(--rs-space-3); }
.nav a > span:last-child { min-width: 0; }
.nav a[aria-current="page"] .rs-icon {
  color: var(--rs-primary);
  font-variation-settings: 'FILL' var(--rs-icon-fill-active), 'wght' var(--rs-icon-wght), 'GRAD' var(--rs-icon-grad), 'opsz' var(--rs-icon-opsz);
}
.msg { position: relative; padding-left: calc(var(--rs-space-4) + var(--rs-size-icon-lg) + var(--rs-space-3)); }
.msg > .rs-icon { position: absolute; left: var(--rs-space-4); top: var(--rs-space-3); }
.field-msg > .rs-icon { font-size: var(--rs-size-icon-md); line-height: var(--rs-size-icon-md); margin-right: var(--rs-space-1); vertical-align: text-bottom; }
.msg-success { background: var(--rs-success-bg); border-color: var(--rs-success); }
.msg-success .msg-title, p.msg-success { color: var(--rs-success-text); }

.msg-info > .rs-icon { color: var(--rs-info-text); }
.msg-warning > .rs-icon { color: var(--rs-warning-text); }
.msg-error > .rs-icon { color: var(--rs-error-text); }
.msg-success > .rs-icon { color: var(--rs-success-text); }