:root {
  --tlo: #f4f6f9;
  --karta: #ffffff;
  --tekst: #1d2733;
  --tekst-2: #5b6878;
  --ramka: #d5dbe3;
  --glowny: #1f5f99;
  --glowny-hover: #184c7b;
  --jasny: #e9eef4;
  --blad: #b3261e;
  --blad-tlo: #fdecea;
  --ok: #1e7b34;
  --ok-tlo: #e6f4ea;
  --info-tlo: #e8f0fb;
  --uwaga: #8a5a00;
  --uwaga-tlo: #fff4d6;
  --cien: 0 1px 3px rgba(0, 0, 0, .08);
  --promien: 10px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tlo: #12171d;
    --karta: #1b222b;
    --tekst: #e6eaf0;
    --tekst-2: #9aa7b6;
    --ramka: #33404e;
    --glowny: #4d94d6;
    --glowny-hover: #6aa7e0;
    --jasny: #26303b;
    --blad: #f2877f;
    --blad-tlo: #3b1f1d;
    --ok: #7fd394;
    --ok-tlo: #1a3322;
    --info-tlo: #1d2a3a;
    --uwaga: #f1c56b;
    --uwaga-tlo: #3a2f16;
    --cien: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: var(--tlo);
  color: var(--tekst);
}

h1 { font-size: 1.6rem; margin: .25rem 0 1rem; }
h2 { font-size: 1.2rem; margin: 0 0 .75rem; }
a { color: var(--glowny); }

/* Pasek górny: kto jest zalogowany + wyloguj */
.pasek {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
  padding: .6rem 1rem;
  padding-top: max(.6rem, env(safe-area-inset-top));
  background: var(--glowny); color: #fff;
}
.pasek-logo { color: #fff; font-weight: 700; text-decoration: none; font-size: 1.1rem; }
.pasek-user { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.pasek-user form { margin: 0; }
.pasek-link { color: #fff; opacity: .9; font-size: .9rem; }
.pasek .btn-jasny { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.4); }

.tresc { max-width: 960px; margin: 0 auto; padding: 1rem 1rem 3rem; }
.okruszki { font-size: .9rem; color: var(--tekst-2); margin-bottom: .25rem; }
.opis { color: var(--tekst-2); margin-top: -.5rem; }

.karta {
  background: var(--karta); border: 1px solid var(--ramka); border-radius: var(--promien);
  box-shadow: var(--cien); padding: 1.25rem; margin-bottom: 1rem;
}
.karta-waska { max-width: 420px; margin: 3rem auto; }

/* Przyciski */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  min-height: 44px; padding: .55rem 1.1rem;
  border: 1px solid transparent; border-radius: 8px;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn-glowny { background: var(--glowny); color: #fff; }
.btn-glowny:hover { background: var(--glowny-hover); }
.btn-jasny { background: var(--jasny); color: var(--tekst); border-color: var(--ramka); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-maly { min-height: 34px; padding: .3rem .8rem; font-size: .9rem; }
.btn-pelny { width: 100%; margin-top: .5rem; }
.przyciski { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }

/* Pola formularzy */
.pole { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; font-weight: 600; }
.pole > label { font-weight: 600; }
input[type=text], input[type=search], input[type=password], input[type=number], input[type=date], select {
  width: 100%; min-height: 44px; padding: .5rem .75rem;
  font: inherit; font-weight: 400; color: var(--tekst);
  background: var(--karta); border: 1px solid var(--ramka); border-radius: 8px;
}
input:focus, select:focus, .btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--glowny) 40%, transparent); outline-offset: 1px; }
input.z-bledem { border-color: var(--blad); }
.checkbox { display: inline-flex; align-items: center; gap: .5rem; font-weight: 400; margin-top: .5rem; cursor: pointer; }
.checkbox input { width: 20px; height: 20px; }
.podpowiedz { color: var(--tekst-2); font-size: .88rem; font-weight: 400; margin: 0 0 .4rem; }
.blad { color: var(--blad); font-size: .9rem; font-weight: 400; }
.blad:empty { display: none; }

.siatka { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
@media (max-width: 640px) { .siatka { grid-template-columns: 1fr; } }

.wiersz { display: flex; gap: .5rem; align-items: stretch; }
.wiersz > input, .wiersz > .autocomplete { flex: 1; min-width: 0; }

/* Komunikaty */
.komunikat { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; background: var(--info-tlo); }
.komunikat-success { background: var(--ok-tlo); color: var(--ok); }
.komunikat-error { background: var(--blad-tlo); color: var(--blad); margin: .75rem 0 0; }

/* Pulpit */
.kafelki { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.kafelek {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  min-height: 150px; padding: 1rem;
  background: var(--karta); border: 1px solid var(--ramka); border-radius: var(--promien); box-shadow: var(--cien);
  color: var(--tekst); text-decoration: none; font-weight: 700; font-size: 1.15rem;
}
.kafelek:hover { border-color: var(--glowny); }
.kafelek-ikona { font-size: 2.5rem; }

/* Wyszukiwarka z podpowiedziami */
.autocomplete { position: relative; }
.podpowiedzi {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  list-style: none; margin: 0; padding: .25rem 0;
  max-height: 320px; overflow-y: auto;
  background: var(--karta); border: 1px solid var(--ramka); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
.podpowiedzi li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .8rem; cursor: pointer; }
.podpowiedzi li.aktywny, .podpowiedzi li:hover { background: var(--jasny); }
.podpowiedzi li.nieaktywny .podp-nazwa { text-decoration: line-through; opacity: .7; }
.podpowiedzi li.brak { color: var(--tekst-2); cursor: default; }
.podp-dzial { color: var(--tekst-2); font-size: .88rem; white-space: nowrap; }

/* Wybrany pracownik */
.wybrany { border-left: 4px solid var(--glowny); }
.wybrany.nieaktywny { border-left-color: var(--tekst-2); }
.znacznik { font-size: .8rem; font-weight: 600; background: var(--jasny); padding: .1rem .5rem; border-radius: 99px; vertical-align: middle; }
.dane { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
.dane dt { color: var(--tekst-2); }
.dane dd { margin: 0; }
@media (max-width: 480px) {
  .dane { grid-template-columns: 1fr; gap: 0; }
  .dane dd { margin-bottom: .5rem; }
}
.przyciski-akcje .btn { flex: 1 1 220px; }

.historia summary { cursor: pointer; font-weight: 600; margin-top: 1rem; }
.historia ul { padding-left: 1.2rem; }
.historia li { margin: .35rem 0; }
.pusto { text-align: center; color: var(--tekst-2); padding: 2rem 1rem; }

/* Okno skanera */
.skaner {
  width: min(560px, 100vw - 2rem); padding: 1rem; border: none; border-radius: var(--promien);
  background: var(--karta); color: var(--tekst);
}
.skaner::backdrop { background: rgba(0,0,0,.6); }
.skaner-naglowek { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
.skaner-obraz { width: 100%; min-height: 60px; border-radius: 8px; overflow: hidden; background: #000; }
.skaner-obraz video { width: 100% !important; display: block; }

.tylko-szeroki { display: inline; }
@media (max-width: 480px) {
  .tylko-szeroki { display: none; }
  h1 { font-size: 1.35rem; }
  .karta { padding: 1rem; }
  .pasek-kto { font-size: .9rem; }
}

.komunikat-uwaga { background: var(--uwaga-tlo); color: var(--uwaga); }
.komunikat-uwaga ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.komunikat-uwaga a, .link { color: inherit; font-weight: 600; }
.link { background: none; border: none; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; text-align: left; }
.btn-ikona { min-width: 44px; padding: .3rem .6rem; }

/* Wydawanie */
.panel-nowy { margin-top: 1rem; padding: 1rem; border: 2px dashed var(--glowny); border-radius: 8px; }
.koszyk { list-style: none; margin: 0 0 1rem; padding: 0; }
.pozycja { display: grid; grid-template-columns: 1fr auto auto auto; gap: .5rem; align-items: center;
  padding: .6rem 0 .6rem .6rem; border-bottom: 1px solid var(--ramka); border-left: 4px solid var(--glowny); }
.pozycja.wydanie { border-left-color: var(--uwaga); }
.pozycja-nazwa small { color: var(--tekst-2); }
.pozycja-typ select { min-width: 150px; }
.pozycja-ilosc { display: flex; gap: .25rem; }
.pozycja-ilosc input { width: 70px; text-align: center; }
@media (max-width: 640px) {
  .pozycja { grid-template-columns: 1fr auto; }
  .pozycja-nazwa { grid-column: 1 / -1; }
  .pozycja-typ select { min-width: 0; }
}

/* Rejestr */
.filtry-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 1rem; }
.filtry .pole { margin-bottom: .5rem; }
.filtry .przyciski { margin-top: .25rem; }
.podsumowanie { color: var(--tekst-2); }
.tabela { width: 100%; border-collapse: collapse; background: var(--karta); border: 1px solid var(--ramka);
  border-radius: var(--promien); overflow: hidden; }
.tabela th, .tabela td { padding: .55rem .6rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ramka); }
.tabela th { background: var(--jasny); font-size: .88rem; }
.tabela small { color: var(--tekst-2); }
.tabela tr.otwarta td:first-child { box-shadow: inset 4px 0 0 var(--uwaga); }
.tabela tr.anulowana { opacity: .6; }
.tabela tr.anulowana td { text-decoration: line-through; }
.tabela tr.anulowana td.akcje, .tabela tr.anulowana td small { text-decoration: none; }
.status { font-weight: 600; white-space: nowrap; }
.status-niezwrocone, .status-zwrocone-czesciowo { color: var(--uwaga); }
.status-zwrocone { color: var(--ok); }
.status-wydane { color: var(--tekst-2); }
.status-anulowana { color: var(--blad); }
.akcje form { display: flex; gap: .35rem; align-items: center; margin: 0 0 .35rem; }
.akcje input[type=number] { width: 70px; min-height: 34px; }
.akcje input[type=text] { min-height: 34px; }
.anuluj summary { cursor: pointer; color: var(--blad); font-size: .88rem; }
.stronicowanie { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 1rem; }
@media (max-width: 760px) {
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela thead { display: none; }
  .tabela { border: none; background: none; }
  .tabela tr { background: var(--karta); border: 1px solid var(--ramka); border-radius: var(--promien);
    margin-bottom: .75rem; padding: .4rem .2rem; }
  .tabela tr.otwarta { border-left: 4px solid var(--uwaga); }
  .tabela tr.otwarta td:first-child { box-shadow: none; }
  .tabela td { border: none; padding: .25rem .7rem .25rem 7.2rem; position: relative; min-height: 1.9rem; }
  .tabela td::before { content: attr(data-etykieta); position: absolute; left: .7rem; top: .3rem;
    color: var(--tekst-2); font-size: .88rem; }
  .tabela td.akcje { padding-left: .7rem; }
  .tabela td.akcje:empty { display: none; }
}

.tabela th a { color: inherit; text-decoration: none; }
.tabela tr.zaznaczony td { background: var(--info-tlo); }
.tabela-artykulow td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela-artykulow tr.anulowana td { text-decoration: none; }
.akcje > .btn { margin-bottom: .35rem; }