:root {
  color-scheme: light;
  --tlo: #f4f5f3;
  --karta: #ffffff;
  --tekst: #1f2a2c;
  --slaby: #5d6a6d;
  --linia: #dde1dd;
  --akcent: #17604f;
  --akcent-tekst: #ffffff;
  --blad: #a32424;
  --blad-tlo: #fbeaea;
  --ok-tlo: #e5f3ee;
  --szary-tlo: #e9ebe8;
  --zolty-tlo: #fbf1d6;
  --zolty: #7a5800;
  --niebieski-tlo: #e2edf8;
  --niebieski: #1b4f80;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--tlo); color: var(--tekst); font: 15px/1.45 system-ui, "Segoe UI", Roboto, sans-serif; }
a { color: var(--akcent); }
h1 { font-size: 1.5rem; margin: .5rem 0 1rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
h3 { font-size: 1rem; margin: 1rem 0 .5rem; }
main { max-width: 1180px; margin: 0 auto; padding: 16px; }

.gora { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; background: var(--akcent); color: var(--akcent-tekst); padding: 10px 16px; }
.logo { font-weight: 700; }
.logo span { font-weight: 400; opacity: .85; }
.gora nav { display: flex; flex-wrap: wrap; gap: 2px; flex: 1; }
.gora nav a { color: var(--akcent-tekst); text-decoration: none; padding: 5px 10px; border-radius: 6px; }
.gora nav a:hover { background: rgba(255,255,255,.14); }
.gora nav a.aktywna { background: rgba(255,255,255,.22); font-weight: 600; }
.gora .link { color: var(--akcent-tekst); }

.karta { background: var(--karta); border: 1px solid var(--linia); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.naglowek-karty { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; }
.kolumny { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.logowanie { max-width: 360px; margin: 12vh auto 0; }
.tabela-przewijana { overflow-x: auto; }
.odstep { margin-top: 12px; }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--linia); vertical-align: middle; }
th { font-size: .85rem; color: var(--slaby); font-weight: 600; }
.siatka td, .siatka thead th { text-align: center; white-space: nowrap; }
.wyszarzony { opacity: .55; }

input, select, textarea, button, .przycisk { font: inherit; }
input, select, textarea { padding: 6px 8px; border: 1px solid #b9c0bb; border-radius: 6px; background: #fff; color: var(--tekst); max-width: 100%; }
textarea { width: 100%; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--akcent); outline-offset: 1px; }
.krotki { width: 80px; }
label { display: inline-flex; flex-direction: column; gap: 3px; font-size: .88rem; color: var(--slaby); }
label.w-linii, .dni label { flex-direction: row; align-items: center; gap: 4px; }
.wiersz { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; }
.pionowo { display: flex; flex-direction: column; gap: 12px; }
.pionowo input { width: 100%; }
.pionowo label { display: flex; }
.w-linii { display: inline-flex; }
.dni { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; }
.siatka-pol { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 16px; align-items: end; }
.siatka-pol label { display: flex; }
.siatka-pol input { width: 100%; }

button, .przycisk { padding: 6px 12px; border: 1px solid #b9c0bb; border-radius: 6px; background: #fff; color: var(--tekst); cursor: pointer; text-decoration: none; display: inline-block; }
button:hover:not(:disabled), .przycisk:hover { background: var(--szary-tlo); }
button:disabled { opacity: .4; cursor: default; }
button.glowny { background: var(--akcent); border-color: var(--akcent); color: var(--akcent-tekst); }
button.glowny:hover { background: #124c3f; }
button.niebezpieczny { color: var(--blad); border-color: #dfb6b6; }
button.link { border: 0; background: none; padding: 0 4px; text-decoration: underline; color: var(--akcent); }
button.link:hover { background: none !important; }
.akcje { display: flex; flex-wrap: wrap; gap: 6px; }
td.akcje { display: table-cell; }
td.akcje form, td.akcje button { display: inline-block; margin-right: 4px; }

.komunikat { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; background: var(--ok-tlo); }
.komunikat.blad { background: var(--blad-tlo); color: var(--blad); }
.pusto { color: var(--slaby); }
.flaga { color: var(--zolty); }
.lista { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; }
.lista li { padding: 7px 0; border-bottom: 1px solid var(--linia); }
.lista li:last-child { border-bottom: 0; }
small { color: var(--slaby); }

.plakietka { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: .8rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.status-zaplanowany.plakietka { background: var(--szary-tlo); color: #454f50; }
.status-aktywny.plakietka, .status-w_toku.plakietka { background: var(--niebieski-tlo); color: var(--niebieski); }
.status-odroczony.plakietka, .status-zakonczony_z_pominieciami.plakietka, .status-pominiety.plakietka { background: var(--zolty-tlo); color: var(--zolty); }
.status-zakonczony.plakietka { background: var(--ok-tlo); color: var(--akcent); }
.status-niewykonany.plakietka { background: var(--blad-tlo); color: var(--blad); }

.os-czasu { list-style: none; margin: 0 0 12px; padding: 0; }
.os-czasu li { border-left: 4px solid var(--linia); margin-bottom: 4px; }
.os-czasu li a { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 6px 10px; color: inherit; text-decoration: none; }
.os-czasu li a:hover { background: var(--tlo); }
.os-czasu li.status-zakonczony { border-color: var(--akcent); }
.os-czasu li.status-niewykonany { border-color: var(--blad); }
.os-czasu li.status-aktywny, .os-czasu li.status-w_toku { border-color: var(--niebieski); }
.os-czasu li.status-odroczony, .os-czasu li.status-pominiety, .os-czasu li.status-zakonczony_z_pominieciami { border-color: #d8ab2e; }

.dane { display: grid; grid-template-columns: max-content 1fr; gap: 3px 16px; margin: 0; }
.dane dt { color: var(--slaby); }
.dane dd { margin: 0; }
.kod { font: 700 2rem/1.2 ui-monospace, Consolas, monospace; letter-spacing: .12em; margin: .25rem 0; }
.qr svg { max-width: 260px; height: auto; background: #fff; }
pre { background: var(--tlo); padding: 8px; border-radius: 6px; overflow-x: auto; }