:root {
  --tlo: #f4f5f7;
  --karta: #ffffff;
  --tekst: #1d2129;
  --szary: #6b7280;
  --linia: #e3e6eb;
  --akcent: #1f6feb;
  --akcent-jasny: #e8f0fe;
  --zielony: #15803d;
  --zielony-jasny: #dcfce7;
  --czerwony: #b91c1c;
  --czerwony-jasny: #fee2e2;
  --zolty: #a16207;
  --zolty-jasny: #fef3c7;
  --niebieski-jasny: #e0f2fe;
  --promien: 10px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--tlo); color: var(--tekst);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
a { color: var(--akcent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; margin: 0 0 14px; }
h2 { font-size: 17px; margin: 22px 0 10px; }
h3 { font-size: 15px; margin: 14px 0 8px; }
small, .maly:not(button):not(.przycisk) { font-size: 13px; color: var(--szary); }
::placeholder { color: #a3aab5; opacity: 1; }

/* górne menu */
.pasek {
  background: #111827; color: #fff; padding: 0 16px; display: flex; align-items: center; gap: 4px;
  flex-wrap: wrap; position: sticky; top: 0; z-index: 10;
}
.pasek .logo { font-weight: 700; margin-right: 14px; padding: 12px 0; color: #fff; }
.pasek a.poz { color: #cbd5e1; padding: 12px 10px; border-bottom: 3px solid transparent; }
.pasek a.poz:hover { color: #fff; text-decoration: none; }
.pasek a.poz.aktywny { color: #fff; border-bottom-color: #60a5fa; }
.pasek .prawo { margin-left: auto; }
.plakietka { background: #ef4444; color: #fff; border-radius: 9px; padding: 0 6px; font-size: 12px; margin-left: 3px; }

.tresc { max-width: 1180px; margin: 0 auto; padding: 20px 16px 60px; }
.tresc.waska { max-width: 560px; }

.karta { background: var(--karta); border: 1px solid var(--linia); border-radius: var(--promien); padding: 16px; margin-bottom: 16px; }
.siatka { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.kafel { background: var(--karta); border: 1px solid var(--linia); border-radius: var(--promien); padding: 12px 14px; }
.kafel .wart { font-size: 22px; font-weight: 700; }
.kafel .opis { font-size: 13px; color: var(--szary); }

/* komunikaty */
.komunikat { padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; border: 1px solid; }
.komunikat.ok { background: var(--zielony-jasny); border-color: #86efac; }
.komunikat.blad { background: var(--czerwony-jasny); border-color: #fca5a5; }
.komunikat.info { background: var(--akcent-jasny); border-color: #93c5fd; }
.komunikat.uwaga { background: var(--zolty-jasny); border-color: #fcd34d; }
.komunikat.haslo { font-size: 17px; }
.dymek { position: fixed; right: 16px; bottom: 16px; z-index: 50; max-width: min(420px, calc(100vw - 32px)); box-shadow: 0 6px 24px rgba(0,0,0,.18); transition: opacity .4s; }

/* formularze */
label { display: block; font-size: 13px; color: var(--szary); margin: 8px 0 3px; }
input, select, textarea {
  font: inherit; padding: 8px 10px; border: 1px solid #cfd4dc; border-radius: 7px; background: #fff; color: var(--tekst);
  width: 100%; max-width: 100%;
}
input[type=checkbox] { width: auto; }
input:focus, select:focus, textarea:focus { outline: 2px solid #93c5fd; border-color: var(--akcent); }
.wiersz-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.wiersz-form > * { flex: 1 1 120px; }
.wiersz-form > .waskie { flex: 0 0 auto; }
.przycisk, button {
  font: inherit; font-weight: 600; padding: 8px 14px; border-radius: 7px; border: 1px solid var(--akcent);
  background: var(--akcent); color: #fff; cursor: pointer; display: inline-block; white-space: nowrap;
}
.przycisk:hover, button:hover { filter: brightness(1.07); text-decoration: none; }
.przycisk.drugi, button.drugi { background: #fff; color: var(--akcent); }
.przycisk.zielony, button.zielony { background: var(--zielony); border-color: var(--zielony); }
.przycisk.czerwony, button.czerwony { background: #fff; color: var(--czerwony); border-color: #fca5a5; }
button.maly, .przycisk.maly { padding: 4px 9px; font-size: 13px; }
form.inline { display: inline; }
.check { display: flex; gap: 8px; align-items: center; color: var(--tekst); font-size: 15px; margin: 10px 0; }

/* tabele */
.tabela-wrap { overflow-x: auto; background: var(--karta); border: 1px solid var(--linia); border-radius: var(--promien); }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 7px 10px; border-bottom: 1px solid var(--linia); text-align: left; vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--szary); background: #fafbfc; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.liczba, th.liczba { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tr.weekend td { background: #fafafa; }
tr.swieto td { background: #fff7ed; }
tr.dzis td:first-child { box-shadow: inset 3px 0 0 var(--akcent); }
tr.suma td { font-weight: 700; background: #fafbfc; }

.znaczek { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.znaczek.zielony { background: var(--zielony-jasny); color: var(--zielony); }
.znaczek.czerwony { background: var(--czerwony-jasny); color: var(--czerwony); }
.znaczek.zolty { background: var(--zolty-jasny); color: var(--zolty); }
.znaczek.niebieski { background: var(--niebieski-jasny); color: #0369a1; }
.znaczek.szary { background: #eef0f3; color: var(--szary); }

.nawigacja-mies { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.nawigacja-mies .nazwa { font-size: 20px; font-weight: 700; min-width: 170px; text-align: center; text-transform: capitalize; }

/* grafik — siatka miesiąca */
.grafik-tab th, .grafik-tab td { padding: 3px; text-align: center; border-right: 1px solid var(--linia); }
.grafik-tab th.imie, .grafik-tab td.imie { text-align: left; padding: 6px 10px; position: sticky; left: 0; background: #fff; z-index: 1; min-width: 110px; }
.grafik-tab input { width: 68px; padding: 4px 3px; font-size: 13px; text-align: center; border-radius: 5px; }
.grafik-tab .weekend { background: #f3f4f6; }
.grafik-tab .swieto { background: #ffedd5; }
.grafik-tab .nieob input { background: var(--zolty-jasny); }
.grafik-tab th small { display: block; font-weight: 400; text-transform: none; }

details > summary { cursor: pointer; color: var(--akcent); list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary { margin-bottom: 8px; }
.edycja { background: #f8fafc; border: 1px solid #bfdbfe; border-radius: 8px; padding: 12px 14px; }
.edycja-wiersz > td { background: #eff6ff; padding: 8px 10px 12px; }
.edycja-tytul { font-weight: 700; margin-bottom: 6px; }
.edycja-rzad { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; padding: 6px 0; }
.edycja-rzad label { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.edycja-rzad label.szeroki { flex: 1 1 200px; }
.edycja-rzad label.check { flex-direction: row; align-items: center; font-size: 14px; margin-bottom: 7px; }
.edycja-rzad input, .edycja-rzad select { padding: 6px 8px; font-size: 14px; }
.edycja-rzad input.godz { width: 92px; }
.edycja-opis { width: 140px; font-size: 13px; font-weight: 600; color: var(--szary); padding-bottom: 8px; }
.nadgodziny-rzad { border-top: 1px dashed #cbd5e1; margin-top: 6px; padding-top: 10px; }
button.link { background: none; border: 0; color: var(--akcent); padding: 0; font-weight: 400; }
button.link:hover { text-decoration: underline; filter: none; }

/* rozliczenie */
.rozl td:first-child { color: var(--szary); }
.rozl td.liczba { font-weight: 600; }
.rozl tr.wynik td { font-size: 17px; font-weight: 700; color: var(--tekst); background: #f0fdf4; }
.przyklad { background: #f8fafc; border-left: 3px solid #93c5fd; padding: 8px 12px; font-size: 14px; border-radius: 4px; margin: 8px 0; }

/* panel pracownika */
.kod-karta { text-align: center; }
.kod-karta .qr { background: #fff; display: inline-block; width: min(100%, 320px); }
.kod-karta .qr svg { width: 100%; height: auto; display: block; }
.pasek-czasu { height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden; margin: 10px auto 4px; max-width: 320px; }
.pasek-czasu div { height: 100%; background: var(--akcent); width: 100%; transition: width 1s linear; }
.stan { font-size: 17px; font-weight: 600; margin-bottom: 10px; }
.potwierdzenie { font-size: 20px; font-weight: 700; padding: 14px; border-radius: 10px; background: var(--zielony-jasny); color: var(--zielony); margin-bottom: 12px; }
.lista-dni { list-style: none; margin: 0; padding: 0; }
.lista-dni li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--linia); gap: 10px; }
.lista-dni li:last-child { border-bottom: 0; }
.lista-dni li.wolne { color: var(--szary); }

/* czytnik (kiosk) */
body.kiosk { background: #0f172a; color: #e2e8f0; height: 100vh; overflow: hidden; }
.kiosk-ekran { display: grid; grid-template-columns: 1fr 280px; height: 100vh; }
.kiosk-glowny { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.kiosk-zegar { font-size: clamp(60px, 12vw, 150px); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -2px; }
.kiosk-data { font-size: 24px; color: #94a3b8; margin-bottom: 30px; text-transform: capitalize; }
.kiosk-podpowiedz { font-size: 26px; color: #cbd5e1; }
.kiosk-wynik { display: none; border-radius: 20px; padding: 30px 40px; max-width: 900px; }
.kiosk-wynik.widoczny { display: block; }
.kiosk-wynik.ok { background: #14532d; }
.kiosk-wynik.wyjscie { background: #1e3a8a; }
.kiosk-wynik.blad { background: #7f1d1d; }
.kiosk-wynik .duzy { font-size: clamp(36px, 6vw, 64px); font-weight: 800; }
.kiosk-wynik .sredni { font-size: clamp(22px, 3vw, 32px); margin-top: 10px; }
.kiosk-wynik .opis { font-size: 20px; margin-top: 14px; color: #e2e8f0; }
.kiosk-boczny { background: #111c33; padding: 20px; overflow-y: auto; border-left: 1px solid #1e293b; }
.kiosk-boczny h2 { color: #94a3b8; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; margin-top: 0; }
.kiosk-boczny ul { list-style: none; padding: 0; margin: 0; }
.kiosk-boczny li { padding: 8px 0; border-bottom: 1px solid #1e293b; font-size: 17px; display: flex; justify-content: space-between; }
.kiosk-wejscie { position: fixed; left: -1000px; top: 0; opacity: 0; width: 10px; }
.kiosk-stopka { position: fixed; bottom: 10px; left: 16px; font-size: 12px; color: #475569; }
.kiosk-stopka a { color: #64748b; }
@media (max-width: 760px) {
  .kiosk-ekran { grid-template-columns: 1fr; }
  .kiosk-boczny { display: none; }
}

.logowanie { max-width: 380px; margin: 60px auto; }

@media (max-width: 640px) {
  .tresc { padding: 14px 12px 50px; }
  .pasek { padding: 0 8px; }
  .pasek .logo { width: 100%; padding: 8px 0 0; }
  .pasek a.poz { padding: 8px 7px; font-size: 14px; }
  .pasek .prawo { margin-left: 0; }
  th, td { padding: 6px 7px; }
}

@media print {
  .pasek, .bez-druku, form, details, .nawigacja-mies a { display: none !important; }
  body { background: #fff; }
  .karta, .tabela-wrap { border: 0; padding: 0; }
  .tresc { padding: 0; max-width: none; }
}
button:disabled { opacity: .35; cursor: default; filter: none; }

/* grafik: dni w wierszach, osoby w kolumnach */
.grafik-pion-wrap { background: var(--karta); border: 1px solid var(--linia); border-radius: var(--promien); }
.grafik-pion { width: 100%; border-collapse: separate; border-spacing: 0; }
.grafik-pion th, .grafik-pion td { padding: 5px 12px; border-bottom: 1px solid #eef0f3; vertical-align: middle; }
.grafik-pion thead th { position: sticky; top: 44px; z-index: 3; background: #f8fafc; border-bottom: 2px solid var(--linia);
  font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--tekst); }
.grafik-pion thead th small { display: block; font-size: 12px; font-weight: 400; color: var(--szary); }
.grafik-pion td.dzien, .grafik-pion th.dzien { width: 1%; white-space: nowrap; }
.grafik-pion .dzien-tyg { display: inline-block; width: 34px; color: var(--szary); font-size: 13px; }
.grafik-pion .dzien-nr { font-weight: 700; font-variant-numeric: tabular-nums; }
.grafik-pion .nazwa-swieta { display: block; color: #c2410c; font-size: 12px; }
.grafik-pion .nazwa-dzis { display: block; color: var(--akcent); font-size: 12px; font-weight: 700; }
.grafik-pion tr.weekend td { background: #f3f4f6; }
.grafik-pion tr.weekend .dzien-nr, .grafik-pion tr.weekend .dzien-tyg { color: #9ca3af; }
.grafik-pion tr.swieto td { background: #fff1e6; }
.grafik-pion tr.poniedzialek td { border-top: 2px solid #94a3b8; }
.grafik-pion tr.dzis td.dzien { box-shadow: inset 4px 0 0 var(--akcent); }
.grafik-pion tbody tr:hover td { background: #eef4ff; }
.grafik-pion .komorka { display: flex; align-items: center; gap: 8px; }
.grafik-pion input { width: 104px; padding: 5px 6px; text-align: center; font-size: 15px; font-weight: 600;
  font-variant-numeric: tabular-nums; border: 1px solid transparent; background: transparent; border-radius: 6px; }
.grafik-pion input:placeholder-shown { font-weight: 400; }
.grafik-pion input:not(:placeholder-shown) { background: #dbeafe; border-color: #bfdbfe; color: #1e3a8a; }
.grafik-pion input:hover { border-color: #94a3b8; }
.grafik-pion input:focus { background: #fff; border-color: var(--akcent); outline: 2px solid #93c5fd; }
.grafik-pion input.zmienione { background: #fef9c3; border-color: #eab308; color: var(--tekst); }
.grafik-pion input.zly { background: var(--czerwony-jasny); border-color: #f87171; }
.grafik-pion input:disabled { opacity: .6; }
.grafik-pion .ile { font-size: 12px; color: var(--szary); min-width: 30px; }
.grafik-pion tfoot td { background: #f8fafc; border-top: 2px solid var(--linia); border-bottom: 0; padding: 10px 12px; }
.grafik-pion .suma-kol { font-size: 16px; }
.grafik-pion .suma-opis { display: block; }
.suma-ok { color: var(--zielony); }
.suma-malo { color: var(--zolty); }
.suma-za-malo { color: var(--czerwony); }
.pasek-zapisu { position: sticky; bottom: 0; z-index: 4; display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--linia); border-radius: var(--promien); padding: 10px 14px; margin-top: 12px;
  box-shadow: 0 -4px 14px rgba(0,0,0,.06); }
.licznik-zmian { font-weight: 700; color: var(--zolty); }
@media (max-width: 640px) {
  .grafik-pion th, .grafik-pion td { padding: 4px 6px; }
  .grafik-pion input { width: 78px; font-size: 14px; }
  .grafik-pion .ile { display: none; }
  .grafik-pion thead th { position: static; }
}
.grafik-pion tr.prognoza td { background: #fffbeb; border-top: 1px solid #fde68a; vertical-align: top; }
.grafik-pion tr.prognoza td.dzien small { color: var(--szary); font-weight: 400; }
.kroki { margin: 0 0 6px; padding-left: 22px; }
.kroki li { margin: 8px 0; }
.kroki li .maly { margin-left: 8px; }
.rozl tr.sekcja td { font-weight: 700; color: var(--tekst); padding-top: 14px; border-bottom: 2px solid var(--linia); }
.rozl tr.razem td { font-size: 18px; font-weight: 800; color: var(--tekst); background: #dcfce7; border-top: 2px solid #86efac; }
.rozl td small { color: var(--szary); font-weight: 400; }
th.grupa-reka { background: #f0fdf4; }