:root {
  --tlo: #F4F5F2;
  --karta: #FFFFFF;
  --tekst: #1F2421;
  --tekst2: #555B57;
  --tekst3: #6B716D;
  --linia: #E3E5E0;
  --akcent: #0F5C63;
  --akcent-jasny: #E6F0EF;
  --swieto-tlo: #F6D9CF;
  --swieto-tekst: #7A2A12;
  --swieto-ramka: #A3460A;
  --zamkniete: #3A3F3C;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--tlo); color: var(--tekst); font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 15px; }
a { color: var(--akcent); }
.gora { background: var(--karta); border-bottom: 1px solid var(--linia); display: flex; align-items: center; gap: 24px; padding: 10px 24px; flex-wrap: wrap; }
.logo { font-weight: 700; color: var(--akcent); font-size: 18px; text-decoration: none; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a { text-decoration: none; color: var(--tekst2); padding: 8px 12px; border-radius: 8px; font-size: 14px; }
.nav a.on { background: var(--akcent-jasny); color: var(--akcent); font-weight: 600; }
.uzytkownik { margin-left: auto; font-size: 13px; color: var(--tekst3); display: flex; gap: 10px; align-items: center; }
.link-przycisk { background: none; border: 0; color: var(--akcent); cursor: pointer; font: inherit; padding: 0; }
main { padding: 24px; max-width: 1280px; margin: 0 auto; }
h1 { font-size: 24px; margin: 0 0 4px; }
.podtytul { color: var(--tekst2); font-size: 14px; margin: 0 0 20px; }
.karta { background: var(--karta); border: 1px solid var(--linia); border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; }
.pasek { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.przelacznik { display: inline-flex; border: 1px solid var(--linia); border-radius: 8px; overflow: hidden; }
.przelacznik button { border: 0; background: var(--karta); padding: 8px 14px; font: inherit; font-size: 14px; cursor: pointer; color: var(--tekst2); }
.przelacznik button.on { background: var(--akcent); color: #fff; font-weight: 600; }
.lata a { text-decoration: none; padding: 6px 10px; border-radius: 6px; }
.lata strong { padding: 6px 10px; }
.uklad { display: grid; grid-template-columns: 1fr 280px; gap: 20px; align-items: start; }
.miesiace { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.miesiac h3 { margin: 0 0 8px; font-size: 15px; }
.siatka { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.siatka .naglowek { font-size: 11px; color: var(--tekst3); text-align: center; }
.siatka form { margin: 0; }
.dzien { width: 100%; aspect-ratio: 1; border: 1px solid var(--linia); border-radius: 6px; font: inherit; font-size: 12px; cursor: pointer; padding: 0; color: var(--tekst); }
.t-otwarte { background: #FFFFFF; }
.t-sobota { background: #F7F8F5; }
.t-niedziela_niehandlowa { background: repeating-linear-gradient(135deg, #E9EBE7 0 4px, #F5F6F3 4px 8px); color: var(--tekst3); }
.t-niedziela_handlowa { background: var(--akcent); color: #fff; font-weight: 700; border-color: var(--akcent); }
.t-swieto { background: var(--swieto-tlo); color: var(--swieto-tekst); font-weight: 700; }
.t-swieto-sobota { border: 2px solid var(--swieto-ramka); }
.t-swieto-otwarte { background: #fff; color: var(--swieto-tekst); font-weight: 700; border: 2px dashed var(--swieto-ramka); }
.t-zamkniete { background: var(--zamkniete); color: #fff; }
.legenda div { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 6px 0; }
.sw { display: inline-block; width: 22px; height: 18px; border-radius: 5px; border: 1px solid var(--linia); flex: none; }
.uwaga { font-size: 12px; color: var(--tekst3); line-height: 1.5; }
table.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th, .tabela td { padding: 7px 8px; border-bottom: 1px solid var(--linia); text-align: left; }
.tabela.liczby th:not(:first-child), .tabela.liczby td:not(:first-child) { text-align: right; }
.tabela th { color: var(--tekst2); font-weight: 600; background: #FAFBF9; }
.tabela tfoot td { font-weight: 700; }
.przewijanie { overflow-x: auto; }
.komunikat { background: var(--akcent-jasny); color: var(--akcent); padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; }
.logowanie { max-width: 360px; margin: 80px auto; }
.logowanie label { display: block; font-size: 13px; color: var(--tekst2); margin: 12px 0 4px; }
.logowanie input { width: 100%; height: 38px; border: 1px solid #D9DCD6; border-radius: 8px; padding: 0 10px; font: inherit; }
.przycisk { background: var(--akcent); color: #fff; border: 0; border-radius: 8px; padding: 10px 16px; font: inherit; font-weight: 600; cursor: pointer; margin-top: 16px; }
.blad { color: var(--swieto-tekst); font-size: 13px; }
@media (max-width: 900px) {
  .uklad { grid-template-columns: 1fr; }
  main { padding: 16px; }
}
@media print {
  .gora, .bez-wydruku { display: none; }
  body { background: #fff; }
}
.sw.t-swieto-sobota { border: 2px solid var(--swieto-ramka); }
.sw.t-swieto-otwarte { border: 2px dashed var(--swieto-ramka); }
.ok { color: #166534; }
.ostrzezenie { color: #92400e; }
.raport ul { margin: 4px 0 12px; padding-left: 20px; font-size: 14px; line-height: 1.5; }
.raport p { margin: 4px 0; }
table.siatka-grafiku { border-collapse: collapse; font-size: 12px; min-width: 100%; }
.siatka-grafiku th, .siatka-grafiku td { border: 1px solid var(--linia); text-align: center; padding: 2px; min-width: 34px; height: 38px; }
.siatka-grafiku th { background: #FAFBF9; font-weight: 600; color: var(--tekst2); }
.siatka-grafiku th span { display: block; font-size: 13px; color: var(--tekst); }
.siatka-grafiku th small, .siatka-grafiku td small { display: block; font-size: 9px; line-height: 1.15; color: var(--tekst3); font-weight: 400; }
.siatka-grafiku .osoba { text-align: left; white-space: nowrap; padding: 2px 8px; min-width: 110px; position: sticky; left: 0; background: var(--karta); z-index: 1; }
.siatka-grafiku td.praca { background: color-mix(in srgb, var(--kolor) 16%, white); }
.siatka-grafiku td.praca b { color: color-mix(in srgb, var(--kolor) 75%, black); font-size: 12px; }
.siatka-grafiku td.wolne { color: var(--tekst3); }
.siatka-grafiku td.nieob { background: #DCFCE7; color: #166534; font-weight: 700; }
.siatka-grafiku .zamk { background: repeating-linear-gradient(135deg, #E9EBE7 0 4px, #F5F6F3 4px 8px); }
.siatka-grafiku td.pref { position: relative; }
.siatka-grafiku td.pref::after { content: ""; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: #7c3aed; }
.siatka-grafiku td.suma { font-weight: 600; white-space: nowrap; padding: 2px 6px; }
.siatka-grafiku tfoot td { height: 26px; font-size: 11px; color: var(--tekst2); }
.siatka-grafiku tfoot td.brak { background: var(--swieto-tlo); color: var(--swieto-tekst); font-weight: 700; }
main.szeroki { max-width: 1760px; }
.wybor-lokalu select { font: inherit; font-size: 14px; height: 34px; border: 1px solid #D9DCD6; border-radius: 8px; padding: 0 8px; background: var(--karta); color: var(--tekst); max-width: 260px; }
.ukryte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.siatka-grafiku td { padding: 0; }
.siatka-grafiku .osoba small { display: block; font-size: 10px; color: var(--tekst3); }
button.komorka { width: 100%; height: 100%; min-height: 38px; border: 0; background: none; font: inherit; font-size: 12px; cursor: pointer; padding: 2px; color: inherit; }
button.komorka:hover, button.komorka:focus-visible { outline: 2px solid var(--akcent); outline-offset: -2px; }
.siatka-grafiku td.narusz { box-shadow: inset 0 0 0 2px #dc2626; }
.siatka-grafiku td.reczna { outline: 1px dashed #334155; outline-offset: -4px; }
.siatka-grafiku th.dzien-brak { color: var(--swieto-tekst); background: var(--swieto-tlo); }
.raport details { margin: 6px 0; }
.raport summary { cursor: pointer; }
dialog.okno { border: 1px solid var(--linia); border-radius: 12px; padding: 16px 20px; max-width: 560px; width: calc(100% - 32px); }
dialog.okno::backdrop { background: rgba(15, 23, 20, .35); }
.okno-naglowek { display: flex; justify-content: space-between; align-items: center; font-size: 16px; }
dialog.okno h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--tekst3); margin: 16px 0 8px; }
.przyciski { display: flex; flex-wrap: wrap; gap: 6px; }
.przyciski form, .okno form { margin: 0 0 8px; }
.przycisk-maly { font: inherit; font-size: 13px; border: 1px solid var(--linia); background: var(--karta); border-radius: 8px; padding: 6px 12px; cursor: pointer; border-left: 4px solid var(--kolor, var(--linia)); }
.przycisk-maly.akcent { background: var(--akcent); color: #fff; border-color: var(--akcent); }
.wiersz-formularza { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; font-size: 13px; }
.wiersz-formularza label { display: flex; flex-direction: column; gap: 2px; color: var(--tekst2); }
.wiersz-formularza select, .wiersz-formularza input { font: inherit; font-size: 13px; height: 32px; border: 1px solid #D9DCD6; border-radius: 6px; padding: 0 6px; }
#edycja-pref form { display: flex; gap: 8px; align-items: center; margin: 0 0 4px; }
.przycisk-drugi { border: 1px solid var(--akcent); color: var(--akcent); border-radius: 8px; padding: 9px 16px; font-weight: 600; text-decoration: none; background: var(--karta); }