/*
 * Wspólny arkusz serwisu WWW (body.strona--web) i panelu administratora (body.strona--admin).
 * Kontrakt klas: packages/ui/KLASY.md. Najpierw telefon, WCAG 2.1 AA, tylko jasny motyw (MVP),
 * czcionki systemowe, bez zewnętrznych zasobów (CSP: style-src 'self'; img-src 'self' data:).
 *
 * Kontrasty (WCAG relative luminance; tekst ≥ 4.5:1, elementy nietekstowe ≥ 3:1) — sprawdzone skryptem:
 *   tekst #1f2937 / #ffffff 14.68 · / #f8fafc 14.03 · / #f1f5f9 13.40 · / #f0fdfa 14.07
 *   tekst drugorzędny #4b5563 / #ffffff 7.56 · / #f8fafc 7.22 · / #f1f5f9 6.90
 *   link #0f766e / #ffffff 5.47 · / #f8fafc 5.23 · / #f1f5f9 5.00 · / #f0fdfa 5.25
 *   link hover, stawka #115e59 / #ffffff 7.58 · / #f0fdfa 7.27;  #134e4a / #f1f5f9 8.65
 *   przycisk główny #ffffff / #0f766e 5.47 · hover / #115e59 7.58
 *   przycisk niebezpieczny #ffffff / #b91c1c 6.47 · hover / #991b1b 8.31
 *   błąd pola #b91c1c / #ffffff 6.47 · / #f8fafc 6.18
 *   komunikaty: info #1e3a8a/#eff6ff 9.52 · sukces #064e3b/#ecfdf5 9.23 · ostrzeżenie #78350f/#fffbeb 8.75 · błąd #7f1d1d/#fef2f2 9.16
 *   znaczniki: neutralny #374151/#f3f4f6 9.37 · niebieski #1e40af/#dbeafe 7.15 · zielony #065f46/#d1fae5 6.78
 *              bursztynowy #92400e/#fef3c7 6.37 · czerwony #991b1b/#fee2e2 6.80 · fioletowy #5b21b6/#ede9fe 7.57 · indygo #3730a3/#e0e7ff 8.06
 *   stopka: #f9fafb/#1f2937 14.05 · link #99f6e4/#1f2937 11.64 · drobne #d1d5db/#1f2937 9.96
 *   nagłówek admina: #f8fafc/#1e293b 13.98 · logo #99f6e4/#1e293b 11.60 · aktywne #ffffff/#334155 10.35
 *   licznik #ffffff/#b91c1c 6.47 · pasek przedpremierowy #78350f/#fef3c7 8.15 · metka #374151/#f1f5f9 9.41
 *   treść użytkownika #78350f/#fffbeb 8.75 · rekomendacja #312e81/#eef2ff 10.22 · licznik znaków #92400e/#ffffff 7.09
 *   menu boczne: #1f2937/#f1f5f9 13.40 · aktywne #115e59/#ffffff 7.58 · hover #1f2937/#e2e8f0 11.91
 *   nietekstowe: ramka pola #6b7280 / #ffffff 4.83 · / #f8fafc 4.62 · / #f1f5f9 4.41
 *                fokus #1d4ed8 / #ffffff 6.70 · / #f8fafc 6.41 · / #f1f5f9 6.12 · / #f0fdfa 6.43
 *                fokus jasny #fde68a / #1f2937 11.79 · / #1e293b 11.75
 *                ramka przycisku drugorzędnego, checkbox, ikona #0f766e / #ffffff 5.47 · ramka błędu #b91c1c / #ffffff 6.47
 */

/* ── Zmienne ─────────────────────────────────────────────────────────────── */

:root {
  --glowny: #0f766e;
  --glowny-ciemny: #115e59;
  --glowny-najciemniejszy: #134e4a;
  --glowny-tlo: #f0fdfa;
  --glowny-tlo-mocne: #ccfbf1;

  --tekst: #1f2937;
  --tekst-drugi: #4b5563;
  --tlo: #ffffff;
  --tlo-strony: #f8fafc;
  --tlo-szare: #f1f5f9;
  --linia: #e2e8f0;            /* separatory dekoracyjne */
  --obramowanie-pola: #6b7280; /* ramki pól: ≥ 3:1 względem tła */

  --fokus: #1d4ed8;
  --fokus-jasny: #fde68a;      /* na ciemnych tłach (stopka, nagłówek admina) */

  --blad: #b91c1c;
  --blad-ciemny: #991b1b;
  --blad-tlo: #fef2f2;
  --blad-tekst: #7f1d1d;
  --sukces: #047857;
  --sukces-tlo: #ecfdf5;
  --sukces-tekst: #064e3b;
  --ostrzezenie: #b45309;
  --ostrzezenie-tlo: #fffbeb;
  --ostrzezenie-tekst: #78350f;
  --info: #1d4ed8;
  --info-tlo: #eff6ff;
  --info-tekst: #1e3a8a;

  --ciemne-tlo: #1f2937;
  --ciemne-tekst: #f9fafb;
  --ciemne-drobne: #d1d5db;
  --ciemne-link: #99f6e4;
  --admin-naglowek: #1e293b;
  --admin-naglowek-aktywne: #334155;

  --czcionka: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --czcionka-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --promien: 8px;
  --promien-duzy: 12px;
  --cien: 0 1px 2px rgb(15 23 42 / 0.06), 0 1px 3px rgb(15 23 42 / 0.08);
  --cien-uniesiony: 0 4px 12px rgb(15 23 42 / 0.10);
  --cel-dotyku: 44px;
  --odstep: 1.25rem;
}

/* ── Podstawy ────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--czcionka);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tekst);
  background: var(--tlo-strony);
  overflow-wrap: break-word;
}

.strona {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.strona > .tresc,
.strona > .uklad-admina {
  flex: 1 0 auto;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4 {
  line-height: 1.25;
  margin: 0 0 0.75rem;
  font-weight: 700;
}

h1 {
  font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem);
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  margin-top: 2rem;
}

h3 {
  font-size: 1.125rem;
  margin-top: 1.5rem;
}

h4 {
  font-size: 1rem;
}

h1 + h2,
h2:first-child,
h3:first-child {
  margin-top: 0;
}

p,
ul,
ol,
dl {
  margin: 0 0 1rem;
}

.tresc p,
.tresc li {
  max-width: 75ch;
}

hr {
  border: 0;
  border-top: 1px solid var(--linia);
  margin: 2rem 0;
}

code,
kbd,
samp {
  font-family: var(--czcionka-mono);
  font-size: 0.9375em;
  background: var(--tlo-szare);
  padding: 0.0625em 0.3em;
  border-radius: 4px;
}

a {
  color: var(--glowny);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--glowny-ciemny);
  text-decoration-thickness: 2px;
}

/* Fokus: zawsze widoczny dla klawiatury; na polach formularzy także po kliknięciu myszą. */
:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

.wejscie:focus,
.wejscie:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
  border-color: var(--tekst);
}

/* Cel linku „Przejdź do treści” i podsumowań — fokus programowy bez ramki na całej treści */
.tresc:focus,
.tresc:focus-visible {
  outline: none;
}

.sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── Szkielet strony ─────────────────────────────────────────────────────── */

.przeskok {
  position: absolute;
  left: 0.75rem;
  top: -10rem;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: var(--cel-dotyku);
  padding: 0.5rem 1rem;
  background: var(--tlo);
  color: var(--tekst);
  font-weight: 700;
  border: 3px solid var(--fokus);
  border-radius: var(--promien);
  text-decoration: none;
}

.przeskok:focus,
.przeskok:focus-visible {
  top: 0.75rem;
  outline: none;
}

.pasek-przedpremierowy {
  background: #fef3c7;
  color: var(--ostrzezenie-tekst);
  border-bottom: 1px solid #fcd34d;
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  text-align: center;
}

.pasek-przedpremierowy a {
  color: var(--ostrzezenie-tekst);
  font-weight: 600;
}

.kontener {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 48rem) {
  .kontener {
    padding-inline: 1.5rem;
  }
}

.naglowek {
  background: var(--tlo);
  border-bottom: 1px solid var(--linia);
}

.naglowek__wnetrze {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding-block: 0.375rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--cel-dotyku);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--glowny-najciemniejszy);
  text-decoration: none;
}

.logo::before {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  background: url("ikona.svg") center / contain no-repeat;
}

.logo:hover {
  color: var(--glowny-ciemny);
}

.menu ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  max-width: none;
}

.menu a:not(.przycisk) {
  display: inline-flex;
  align-items: center;
  min-height: var(--cel-dotyku);
  padding: 0.25rem 0.625rem;
  color: var(--tekst);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--promien);
}

.menu a:not(.przycisk):hover {
  background: var(--tlo-szare);
  color: var(--glowny-najciemniejszy);
}

.menu a:not(.przycisk)[aria-current="page"] {
  color: var(--glowny-ciemny);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.4em;
}

/* Przycisk w menu (np. „Wyloguj” jako formularz POST) */
.menu form {
  margin: 0;
}

.menu .przycisk {
  min-height: var(--cel-dotyku);
}

.tresc {
  padding-block: 1.5rem 3rem;
}

@media (min-width: 48rem) {
  .tresc {
    padding-block: 2rem 4rem;
  }
}

.okruszki ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  font-size: 0.9375rem;
  color: var(--tekst-drugi);
}

.okruszki li {
  display: inline-flex;
  align-items: center;
}

.okruszki li + li::before {
  content: "›";
  margin: 0 0.5rem;
  color: var(--tekst-drugi);
}

.okruszki a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cel-dotyku);
}

.okruszki [aria-current="page"] {
  color: var(--tekst);
  font-weight: 600;
}

.stopka {
  background: var(--ciemne-tlo);
  color: var(--ciemne-tekst);
  padding-block: 2rem;
  font-size: 0.9375rem;
}

.stopka a {
  color: var(--ciemne-link);
  display: inline-block;
  padding-block: 0.625rem; /* cel dotyku w liście linków */
}

.stopka a:hover {
  color: #ffffff;
}

.stopka :focus-visible {
  outline-color: var(--fokus-jasny);
}

.stopka .drobne {
  color: var(--ciemne-drobne);
}

.stopka ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}

/* ── Panel administratora ────────────────────────────────────────────────── */

.strona--admin {
  font-size: 0.9375rem;
}

.strona--admin .naglowek {
  background: var(--admin-naglowek);
  border-bottom-color: var(--admin-naglowek);
}

.strona--admin .logo {
  color: var(--ciemne-link);
  font-size: 1.125rem;
}

.strona--admin .logo:hover {
  color: #ffffff;
}

.strona--admin .naglowek .menu a:not(.przycisk) {
  color: var(--ciemne-tekst);
}

.strona--admin .naglowek .menu a:not(.przycisk):hover {
  background: var(--admin-naglowek-aktywne);
  color: #ffffff;
}

.strona--admin .naglowek .menu a:not(.przycisk)[aria-current="page"] {
  background: var(--admin-naglowek-aktywne);
  color: #ffffff;
  text-decoration: none;
}

.strona--admin .naglowek :focus-visible {
  outline-color: var(--fokus-jasny);
}

.strona--admin .naglowek .przycisk--drugorzedny {
  background: transparent;
  color: var(--ciemne-tekst);
  border-color: var(--ciemne-drobne);
}

.strona--admin .naglowek .przycisk--drugorzedny:hover {
  background: var(--admin-naglowek-aktywne);
  color: #ffffff;
}

.strona--admin .tresc {
  padding-block: 1.25rem 2.5rem;
}

.strona--admin h1 {
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
}

.strona--admin h2 {
  font-size: 1.25rem;
  margin-top: 1.5rem;
}

.strona--admin .karta {
  padding: 1rem;
}

.strona--admin .tabela th,
.strona--admin .tabela td {
  padding: 0.5rem 0.625rem;
}

.uklad-admina {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 60rem) {
  .uklad-admina {
    grid-template-columns: 15.5rem minmax(0, 1fr);
    align-items: stretch;
  }
}

.uklad-admina > .tresc {
  max-width: none;
  margin: 0;
  padding-inline: 1rem;
}

@media (min-width: 48rem) {
  .uklad-admina > .tresc {
    padding-inline: 1.5rem;
  }
}

.menu-boczne {
  background: var(--tlo-szare);
  border-bottom: 1px solid var(--linia);
  padding: 0.5rem;
}

@media (min-width: 60rem) {
  .menu-boczne {
    border-bottom: 0;
    border-right: 1px solid var(--linia);
    padding: 1rem 0.75rem;
  }
}

.menu-boczne ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem 0.25rem;
}

@media (min-width: 60rem) {
  .menu-boczne ul {
    flex-direction: column;
    flex-wrap: nowrap;
  }
}

.menu-boczne h2,
.menu-boczne .menu-boczne__grupa {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tekst-drugi);
  margin: 0.75rem 0.75rem 0.25rem;
  width: 100%;
}

.menu-boczne h2:first-child,
.menu-boczne .menu-boczne__grupa:first-child {
  margin-top: 0.25rem;
}

.menu-boczne a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: var(--cel-dotyku);
  padding: 0.375rem 0.75rem;
  border-radius: var(--promien);
  color: var(--tekst);
  font-weight: 500;
  text-decoration: none;
}

.menu-boczne a:hover {
  background: var(--linia);
}

.menu-boczne a[aria-current="page"] {
  background: var(--tlo);
  color: var(--glowny-ciemny);
  font-weight: 700;
  box-shadow: inset 4px 0 0 var(--glowny), var(--cien);
}

.licznik {
  display: inline-block;
  min-width: 1.5rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--blad);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ── Formularze ──────────────────────────────────────────────────────────── */

.formularz {
  max-width: 44rem;
}

.pole,
.grupa {
  margin: 0 0 var(--odstep);
}

.etykieta {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.wymagane {
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--tekst-drugi);
}

.pomoc {
  margin: 0 0 0.375rem;
  font-size: 0.9375rem;
  color: var(--tekst-drugi);
}

.blad-pola {
  margin: 0 0 0.375rem;
  font-weight: 700;
  color: var(--blad);
}

.wejscie {
  display: block;
  width: 100%;
  max-width: 40rem;
  min-height: var(--cel-dotyku);
  margin: 0;
  padding: 0.5rem 0.75rem;
  font: inherit;
  line-height: 1.4;
  color: var(--tekst);
  background: var(--tlo);
  border: 2px solid var(--obramowanie-pola);
  border-radius: 6px;
}

textarea.wejscie {
  min-height: 8rem;
  resize: vertical;
  line-height: 1.5;
}

select.wejscie {
  padding-right: 2rem;
  cursor: pointer;
}

input[type="file"].wejscie {
  padding: 0.375rem;
  cursor: pointer;
}

input[type="file"].wejscie::file-selector-button {
  min-height: 2.25rem;
  margin-right: 0.75rem;
  padding: 0.25rem 0.875rem;
  font: inherit;
  font-weight: 600;
  color: var(--glowny);
  background: var(--tlo);
  border: 2px solid var(--glowny);
  border-radius: 6px;
  cursor: pointer;
}

input[type="number"].wejscie,
input[type="date"].wejscie {
  max-width: 14rem;
}

.wejscie::placeholder {
  color: var(--tekst-drugi);
  opacity: 1;
}

.wejscie:disabled,
.wejscie[readonly] {
  background: var(--tlo-szare);
  cursor: not-allowed;
}

/* Pole z błędem: ramka i pasek po lewej (nie tylko kolor — jest też tekst błędu) */
.pole--blad {
  border-left: 4px solid var(--blad);
  padding-left: 0.875rem;
}

.pole--blad .wejscie {
  border-color: var(--blad);
}

.grupa {
  border: 0;
  padding: 0;
  min-width: 0;
}

.grupa.pole--blad {
  border-left: 4px solid var(--blad);
  padding-left: 0.875rem;
}

.grupa:focus {
  outline: 3px solid var(--fokus);
  outline-offset: 4px;
}

.legenda {
  display: block;
  padding: 0;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.wybory {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 1rem;
}

@media (min-width: 40rem) {
  .wybory {
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  }
}

.wybor {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  min-height: var(--cel-dotyku);
  padding: 0.5rem 0;
  cursor: pointer;
}

.wybor input {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.0625rem 0 0;
  accent-color: var(--glowny);
  cursor: pointer;
}

.pole--zgoda .wybor {
  max-width: 44rem;
}

.bledy-formularza {
  max-width: 44rem;
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--tlo);
  border: 4px solid var(--blad);
  border-radius: var(--promien);
}

.bledy-formularza h2 {
  font-size: 1.125rem;
  margin: 0 0 0.5rem;
}

.bledy-formularza ul {
  margin: 0;
  padding-left: 1.25rem;
}

.bledy-formularza a {
  display: inline-block;
  padding-block: 0.25rem;
  color: var(--blad);
  font-weight: 700;
}

.bledy-formularza:focus,
.bledy-formularza:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
}

.licznik-znakow {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--tekst-drugi);
  font-variant-numeric: tabular-nums;
}

.licznik-znakow--blisko {
  color: #92400e;
  font-weight: 700;
}

/* ── Przyciski ───────────────────────────────────────────────────────────── */

.akcje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.akcje form {
  margin: 0;
}

/* Mały formularz z jednym przyciskiem w wierszu tabeli albo listy (np. „Usuń”) */
.formularz--w-wierszu {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  max-width: none;
}

.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--cel-dotyku);
  padding: 0.5rem 1.25rem;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--promien);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  .przycisk {
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  }
}

.przycisk--glowny {
  background: var(--glowny);
  border-color: var(--glowny);
  color: #ffffff;
}

.przycisk--glowny:hover {
  background: var(--glowny-ciemny);
  border-color: var(--glowny-ciemny);
  color: #ffffff;
}

.przycisk--drugorzedny {
  background: var(--tlo);
  border-color: var(--glowny);
  color: var(--glowny);
}

.przycisk--drugorzedny:hover {
  background: var(--glowny-tlo);
  color: var(--glowny-ciemny);
  border-color: var(--glowny-ciemny);
}

.przycisk--niebezpieczny {
  background: var(--blad);
  border-color: var(--blad);
  color: #ffffff;
}

.przycisk--niebezpieczny:hover {
  background: var(--blad-ciemny);
  border-color: var(--blad-ciemny);
  color: #ffffff;
}

.przycisk--maly {
  padding: 0.25rem 0.75rem;
  font-size: 0.9375rem;
}

/* Mały przycisk: przy myszy niższy, przy dotyku zostaje 44 px */
@media (pointer: fine) {
  .przycisk--maly {
    min-height: 2.25rem;
  }
}

.przycisk:active {
  transform: translateY(1px);
}

.przycisk:disabled,
.przycisk[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Stan „kliknij jeszcze raz, żeby potwierdzić” (app.js, data-potwierdz) */
.przycisk.czeka-na-potwierdzenie {
  background: var(--blad);
  border-color: var(--blad-ciemny);
  color: #ffffff;
  outline: 3px dashed var(--blad);
  outline-offset: 3px;
}

/* Przycisk wyglądający jak link (np. w tabeli) */
.przycisk-link {
  display: inline;
  min-height: 0;
  padding: 0;
  font: inherit;
  color: var(--glowny);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

/* ── Komunikaty i znaczniki ──────────────────────────────────────────────── */

.komunikat {
  max-width: 60rem;
  margin: 0 0 var(--odstep);
  padding: 0.875rem 1rem;
  border: 1px solid;
  border-left-width: 6px;
  border-radius: var(--promien);
}

.komunikat > :last-child {
  margin-bottom: 0;
}

.komunikat a {
  color: inherit;
  font-weight: 700;
}

.komunikat--info {
  background: var(--info-tlo);
  border-color: var(--info);
  color: var(--info-tekst);
}

.komunikat--sukces {
  background: var(--sukces-tlo);
  border-color: var(--sukces);
  color: var(--sukces-tekst);
}

.komunikat--ostrzezenie {
  background: var(--ostrzezenie-tlo);
  border-color: var(--ostrzezenie);
  color: var(--ostrzezenie-tekst);
}

.komunikat--blad {
  background: var(--blad-tlo);
  border-color: var(--blad);
  color: var(--blad-tekst);
}

.znacznik {
  display: inline-block;
  padding: 0.0625rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: 0.0625em;
  /* domyślnie neutralny */
  background: #f3f4f6;
  color: #374151;
}

/* neutralne: szkic, zamknięte, wycofane */
.znacznik--szkic,
.znacznik--zamknieta,
.znacznik--wycofana,
.znacznik--nieuzupelniony {
  background: #f3f4f6;
  color: #374151;
}

/* czeka na kogoś */
.znacznik--do_moderacji,
.znacznik--oczekuje,
.znacznik--wyslana,
.znacznik--wstrzymana {
  background: #dbeafe;
  color: #1e40af;
}

/* w porządku */
.znacznik--opublikowana,
.znacznik--zweryfikowany,
.znacznik--zweryfikowana,
.znacznik--zatrudnienie,
.znacznik--aktywny {
  background: #d1fae5;
  color: #065f46;
}

/* wymaga uwagi */
.znacznik--do_poprawy,
.znacznik--wygasla,
.znacznik--do_czlowieka,
.znacznik--otwarta {
  background: #fef3c7;
  color: #92400e;
}

/* negatywne */
.znacznik--odrzucona,
.znacznik--odrzucony,
.znacznik--odmowa,
.znacznik--zdjeta,
.znacznik--zablokowany {
  background: #fee2e2;
  color: #991b1b;
}

.znacznik--zaproszenie {
  background: #ede9fe;
  color: #5b21b6;
}

.znacznik--przeczytana {
  background: #e0e7ff;
  color: #3730a3;
}

/* ── Paginacja, szczegóły, tabele ────────────────────────────────────────── */

.paginacja {
  margin: 2rem 0 1rem;
}

.paginacja ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.375rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.paginacja li {
  display: inline-flex;
  align-items: center;
}

.paginacja a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--cel-dotyku);
  min-height: var(--cel-dotyku);
  padding: 0 0.75rem;
  background: var(--tlo);
  border: 1px solid var(--obramowanie-pola);
  border-radius: var(--promien);
  text-decoration: none;
  font-weight: 600;
}

.paginacja a:hover {
  background: var(--glowny-tlo);
}

.paginacja a[aria-current="page"] {
  background: var(--glowny);
  border-color: var(--glowny);
  color: #ffffff;
  font-weight: 800;
}

.szczegoly {
  margin: 0 0 var(--odstep);
}

.szczegoly > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.125rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--linia);
}

.szczegoly > div:first-child {
  border-top: 1px solid var(--linia);
}

@media (min-width: 40rem) {
  .szczegoly > div {
    grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr);
    gap: 1rem;
  }
}

.szczegoly dt {
  font-weight: 600;
  color: var(--tekst-drugi);
}

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

.tabela-przewijana {
  width: 100%;
  overflow-x: auto;
  margin: 0 0 var(--odstep);
  background: var(--tlo);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
}

.tabela-przewijana:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.tabela caption {
  padding: 0.75rem;
  text-align: left;
  font-weight: 700;
}

.tabela th,
.tabela td {
  padding: 0.625rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linia);
}

.tabela thead th {
  background: var(--tlo-szare);
  font-weight: 700;
  white-space: nowrap;
}

.tabela tbody tr:last-child > * {
  border-bottom: 0;
}

.tabela tbody tr:hover {
  background: var(--tlo-strony);
}

.tabela td form {
  margin: 0;
  display: inline;
}

.pusto {
  margin: 0 0 var(--odstep);
  padding: 1rem;
  color: var(--tekst-drugi);
  background: var(--tlo);
  border: 1px dashed var(--obramowanie-pola);
  border-radius: var(--promien);
  text-align: center;
}

/* ── Układ i ogólne ──────────────────────────────────────────────────────── */

.siatka-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 1.5rem;
}

@media (min-width: 48rem) {
  .siatka-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.siatka-2 .wejscie {
  max-width: none;
}

.uklad-z-boku {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 60rem) {
  .uklad-z-boku {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 2rem;
  }
}

.uklad-z-boku__glowna,
.uklad-z-boku__bok {
  min-width: 0;
}

.karta {
  margin: 0 0 var(--odstep);
  padding: 1.25rem;
  background: var(--tlo);
  border: 1px solid var(--linia);
  border-radius: var(--promien-duzy);
  box-shadow: var(--cien);
}

.karta > :last-child {
  margin-bottom: 0;
}

.karta > h2:first-child,
.karta > h3:first-child {
  margin-top: 0;
}

.drobne {
  font-size: 0.875rem;
  color: var(--tekst-drugi);
}

.wysrodkowany {
  text-align: center;
}

.wysrodkowany .akcje {
  justify-content: center;
}

/* ── Wyszukiwarka i filtry ───────────────────────────────────────────────── */

.wyszukiwarka {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem 1rem;
  margin: 0 0 2rem;
  padding: 1.25rem;
  background: var(--glowny-tlo);
  border: 1px solid var(--glowny-tlo-mocne);
  border-radius: var(--promien-duzy);
}

.wyszukiwarka .pole,
.wyszukiwarka .grupa {
  margin: 0;
}

.wyszukiwarka .wejscie {
  max-width: none;
}

.wyszukiwarka .przycisk {
  width: 100%;
}

@media (min-width: 48rem) {
  .wyszukiwarka {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
  }

  .wyszukiwarka .przycisk {
    width: auto;
  }
}

.filtry {
  margin: 0 0 1.5rem;
  padding: 1rem;
  background: var(--tlo);
  border: 1px solid var(--linia);
  border-radius: var(--promien-duzy);
}

.filtry .wejscie {
  max-width: none;
}

.filtry .pole,
.filtry .grupa {
  margin-bottom: 0.875rem;
}

@media (min-width: 48rem) {
  .filtry > .siatka-2,
  .filtry .filtry__pola {
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    display: grid;
    gap: 0 1rem;
  }
}

.filtry .akcje {
  margin-top: 0.5rem;
}

.filtry-wiecej {
  margin: 0.25rem 0 0.75rem;
}

.filtry-wiecej > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: var(--cel-dotyku);
  font-weight: 700;
  color: var(--glowny);
  cursor: pointer;
  list-style: none;
}

.filtry-wiecej > summary::-webkit-details-marker {
  display: none;
}

.filtry-wiecej > summary::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid currentColor;
  border-radius: 4px;
  font-size: 0.875rem;
  line-height: 1;
}

.filtry-wiecej[open] > summary::before {
  content: "−";
}

.filtry-wiecej > summary:hover {
  color: var(--glowny-ciemny);
  text-decoration: underline;
}

.wyniki-naglowek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0 0 1rem;
}

.wyniki-naglowek p,
.wyniki-naglowek h2 {
  margin: 0;
}

.wyniki-naglowek .pole {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.wyniki-naglowek .etykieta {
  margin: 0;
}

.wyniki-naglowek .wejscie {
  width: auto;
}

/* ── Lista ofert ─────────────────────────────────────────────────────────── */

.lista-ofert {
  display: grid;
  gap: 1rem;
  list-style: none;
  margin: 0 0 var(--odstep);
  padding: 0;
}

.lista-ofert > li {
  max-width: none;
}

.karta-oferty {
  position: relative;
  display: grid;
  gap: 0.375rem;
  padding: 1rem 1.25rem;
  background: var(--tlo);
  border: 1px solid var(--linia);
  border-radius: var(--promien-duzy);
  box-shadow: var(--cien);
}

@media (prefers-reduced-motion: no-preference) {
  .karta-oferty {
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
  }
}

.karta-oferty:hover {
  border-color: var(--glowny);
  box-shadow: var(--cien-uniesiony);
}

.karta-oferty__tytul {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.3;
}

.karta-oferty__tytul a {
  color: var(--tekst);
  text-decoration: none;
}

/* Cała karta klikalna (link w tytule rozciągnięty na kartę) */
.karta-oferty__tytul a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.karta-oferty__tytul a:hover {
  color: var(--glowny-ciemny);
  text-decoration: underline;
}

.karta-oferty:focus-within {
  border-color: var(--glowny);
}

/* Inne interaktywne elementy w karcie (np. „Zapisz”) nad warstwą linku */
.karta-oferty :is(a, button, form, input, select):not(.karta-oferty__tytul a) {
  position: relative;
  z-index: 1;
}

.karta-oferty__placowka {
  margin: 0;
  color: var(--tekst-drugi);
  font-weight: 600;
}

.karta-oferty__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
}

.karta-oferty__meta li {
  padding: 0.125rem 0.625rem;
  font-size: 0.875rem;
  color: #374151;
  background: var(--tlo-szare);
  border-radius: 999px;
}

.karta-oferty__data {
  margin: 0;
  font-size: 0.875rem;
  color: var(--tekst-drugi);
}

.stawka {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--glowny-ciemny);
  font-variant-numeric: tabular-nums;
}

p.stawka {
  margin: 0.125rem 0 0;
}

/* ── Strona oferty ───────────────────────────────────────────────────────── */

/* Tytuł, placówka i stawka jedno pod drugim; z logo — logo po lewej, tekst w drugiej kolumnie */
.oferta-naglowek {
  display: block;
  margin: 0 0 1.5rem;
}

.oferta-naglowek:has(> .logo-placowki) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1rem;
  align-items: start;
}

.oferta-naglowek:has(> .logo-placowki) > :not(.logo-placowki) {
  grid-column: 2;
}

.oferta-naglowek > .logo-placowki {
  grid-row: 1 / span 4;
}

.oferta-naglowek h1 {
  margin-bottom: 0.375rem;
}

.oferta-naglowek p {
  margin: 0 0 0.375rem;
}

.logo-placowki {
  flex: none;
  width: auto;
  max-width: 96px;
  max-height: 96px;
  object-fit: contain;
  padding: 0.25rem;
  background: var(--tlo);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
}

.oferta-tresc {
  padding: 1.25rem;
  background: var(--tlo);
  border: 1px solid var(--linia);
  border-radius: var(--promien-duzy);
}

@media (min-width: 48rem) {
  .oferta-tresc {
    padding: 1.75rem 2rem;
  }
}

.oferta-tresc h2 {
  font-size: 1.25rem;
  margin-top: 1.75rem;
}

.oferta-tresc h2:first-child {
  margin-top: 0;
}

.oferta-bok {
  padding: 1.25rem;
  background: var(--tlo);
  border: 2px solid var(--glowny);
  border-radius: var(--promien-duzy);
  box-shadow: var(--cien);
}

.oferta-bok .stawka {
  display: block;
  font-size: 1.375rem;
  line-height: 1.3;
  margin: 0 0 0.75rem;
}

.oferta-bok .przycisk {
  width: 100%;
}

.oferta-bok .akcje {
  margin-top: 1rem;
}

@media (min-width: 60rem) {
  .oferta-bok {
    position: sticky;
    top: 1rem;
  }
}

/* ── Panel: treść użytkownika, rekomendacja, statystyki ──────────────────── */

/* Treść wpisana przez użytkowników — w panelu wyraźnie oddzielona od interfejsu.
   Opcjonalny podpis: data-etykieta="Treść od użytkownika". */
.tresc-uzytkownika {
  margin: 0 0 var(--odstep);
  padding: 0.75rem 1rem;
  background: var(--ostrzezenie-tlo);
  border: 1px dashed var(--ostrzezenie);
  border-left: 6px solid var(--ostrzezenie);
  border-radius: 4px;
  overflow-wrap: anywhere;
}

.tresc-uzytkownika[data-etykieta]::before {
  content: attr(data-etykieta);
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ostrzezenie-tekst);
}

.tresc-uzytkownika > :last-child {
  margin-bottom: 0;
}

.rekomendacja {
  margin: 0 0 var(--odstep);
  padding: 0.875rem 1rem;
  background: #eef2ff;
  color: #312e81;
  border: 1px solid #c7d2fe;
  border-left: 6px solid #4338ca;
  border-radius: var(--promien);
}

.rekomendacja > :last-child {
  margin-bottom: 0;
}

.rekomendacja h2,
.rekomendacja h3 {
  margin-top: 0;
  font-size: 1rem;
}

.statystyki {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.kafelek {
  margin: 0;
  padding: 1rem;
  background: var(--tlo);
  border: 1px solid var(--linia);
  border-radius: var(--promien-duzy);
  box-shadow: var(--cien);
}

.kafelek__liczba {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--glowny-ciemny);
  font-variant-numeric: tabular-nums;
}

.kafelek__opis {
  display: block;
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
  color: var(--tekst-drugi);
}

a.kafelek {
  display: block;
  text-decoration: none;
  color: inherit;
}

a.kafelek:hover {
  border-color: var(--glowny);
}

/* ── Kroki, zakładki, logowanie, przełącznik asystenta ───────────────────── */

.kroki {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  list-style: none;
  counter-reset: krok;
  margin: 0 0 1.5rem;
  padding: 0;
}

.kroki li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  counter-increment: krok;
  color: var(--tekst-drugi);
}

.kroki li::before {
  content: counter(krok);
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.875rem;
  height: 1.875rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-weight: 800;
  font-size: 0.875rem;
}

.kroki li[aria-current] {
  color: var(--glowny-ciemny);
  font-weight: 700;
}

.kroki li[aria-current]::before {
  background: var(--glowny);
  border-color: var(--glowny);
  color: #ffffff;
}

.kroki li.krok--zrobiony {
  color: var(--sukces-tekst);
}

.kroki li.krok--zrobiony::before {
  content: "✓";
  background: var(--sukces-tlo);
}

.zakladki {
  margin: 0 0 1.5rem;
}

.zakladki ul {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  border-bottom: 2px solid var(--linia);
}

.zakladki li {
  flex: none;
}

.zakladki a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cel-dotyku);
  margin-bottom: -2px;
  padding: 0.25rem 1rem;
  color: var(--tekst-drugi);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 4px solid transparent;
}

.zakladki a:hover {
  color: var(--glowny-ciemny);
  border-bottom-color: var(--linia);
}

.zakladki a[aria-current="page"] {
  color: var(--glowny-ciemny);
  border-bottom-color: var(--glowny);
}

.karta-logowania {
  max-width: 28rem;
  margin: 1rem auto 2rem;
  padding: 1.5rem 1.25rem;
  background: var(--tlo);
  border: 1px solid var(--linia);
  border-radius: var(--promien-duzy);
  box-shadow: var(--cien);
}

@media (min-width: 30rem) {
  .karta-logowania {
    padding: 2rem;
  }
}

.karta-logowania h1 {
  font-size: 1.5rem;
}

.karta-logowania .wejscie {
  max-width: none;
}

.karta-logowania .przycisk {
  width: 100%;
}

.karta-logowania .akcje {
  flex-direction: column;
  align-items: stretch;
}

/* Separator „albo” między logowaniem hasłem a kontem Google */
.albo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  color: var(--tekst-drugi);
  font-size: 0.875rem;
}

.albo::before,
.albo::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--linia);
}

/* Przełącznik asystenta: data-stan="wlaczony|reczny" albo modyfikatory --wlaczony / --reczny */
.wyroznienie-dostepu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding: 1.25rem;
  font-size: 1.125rem;
  font-weight: 700;
  background: var(--tlo);
  border: 3px solid var(--obramowanie-pola);
  border-radius: var(--promien-duzy);
}

.wyroznienie-dostepu p {
  margin: 0;
}

.wyroznienie-dostepu form {
  margin: 0;
}

.wyroznienie-dostepu[data-stan="wlaczony"],
.wyroznienie-dostepu--wlaczony {
  background: var(--sukces-tlo);
  border-color: var(--sukces);
  color: var(--sukces-tekst);
}

.wyroznienie-dostepu[data-stan="reczny"],
.wyroznienie-dostepu--reczny {
  background: var(--ostrzezenie-tlo);
  border-color: var(--ostrzezenie);
  color: var(--ostrzezenie-tekst);
}

/* ── Tryb wysokiego kontrastu (Windows) ──────────────────────────────────── */

@media (forced-colors: active) {
  .przycisk,
  .znacznik,
  .licznik,
  .paginacja a,
  .karta-oferty__meta li {
    border: 1px solid ButtonText;
  }

  :focus-visible,
  .wejscie:focus {
    outline: 3px solid Highlight;
  }

  .logo::before {
    forced-color-adjust: none;
  }
}

/* ── Ograniczenie ruchu ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .przycisk:active {
    transform: none;
  }
}

/* ── Druk ────────────────────────────────────────────────────────────────── */

@media print {
  .przeskok,
  .pasek-przedpremierowy,
  .menu,
  .menu-boczne,
  .okruszki,
  .stopka,
  .paginacja,
  .filtry,
  .wyszukiwarka,
  .akcje,
  .oferta-bok .przycisk,
  .zakladki {
    display: none !important;
  }

  body {
    background: #ffffff;
    color: #000000;
    font-size: 11pt;
  }

  .naglowek {
    border-bottom: 1px solid #000000;
  }

  .strona--admin .naglowek {
    background: #ffffff;
  }

  .strona--admin .logo {
    color: #000000;
  }

  .uklad-admina,
  .uklad-z-boku {
    display: block;
  }

  .karta,
  .karta-oferty,
  .oferta-tresc,
  .oferta-bok,
  .kafelek {
    box-shadow: none;
    border-color: #999999;
    break-inside: avoid;
  }

  .oferta-bok {
    position: static;
  }

  a {
    color: #000000;
  }

  .tresc a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }

  .tresc .karta-oferty__tytul a::after {
    content: none;
  }

  .tabela-przewijana {
    overflow: visible;
    border: 0;
  }
}