/* Mobile-first: jedna kolumna, duże cele dotyku, dolny pasek nawigacji.
   Kolory tylko z tych zmiennych; tests/test_kontrast.py pilnuje kontrastu WCAG w trybie jasnym i ciemnym
   (tekst ≥ 4,5:1, ramki pól i przycisków ≥ 3:1). --linia to delikatny podział, --ramka — obrys pól do dotknięcia. */
:root {
  --tlo: #f4f5ef; --karta: #ffffff; --tekst: #1d2a20; --przygaszony: #5b6a5f; --linia: #dde2d6; --ramka: #7d8a80;
  --pasek-test: #c2410c; --pasek-demo: #1d4ed8; --pasek-tekst: #ffffff;
  --akcent: #2f6b3a; --akcent-tekst: #ffffff; --blad: #b3261e; --blad-tekst: #ffffff; --ok-tlo: #e3f1e4; --ok-tekst: #1e5a2b;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --promien: 12px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --tlo: #121813; --karta: #1b231d; --tekst: #e6ece6; --przygaszony: #9fb0a3; --linia: #2e3a31; --ramka: #6b7c6f;
    --akcent: #6cc28e; --akcent-tekst: #0f1a12; --blad: #ff8a80; --blad-tekst: #2a0a08; --ok-tlo: #22402b; --ok-tekst: #a8e6bd;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--tlo); color: var(--tekst); font: 17px/1.5 var(--font); }
a { color: var(--akcent); }
.gora { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); background: var(--karta); border-bottom: 1px solid var(--linia); }
.logo { display: inline-flex; align-items: center; min-height: 48px; font-weight: 800; font-size: 1.15rem; color: var(--akcent); text-decoration: none; }
.gora select { max-width: 60vw; }
main { max-width: 640px; margin: 0 auto; padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(96px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 16px; }
h1 { font-size: 1.5rem; margin: 0; text-wrap: balance; }
h2 { font-size: 1.15rem; margin: 0; }
.karta { background: var(--karta); border: 1px solid var(--linia); border-radius: var(--promien); padding: 16px; display: grid; gap: 12px; }
.pole { display: grid; gap: 6px; }
.pole label { font-weight: 600; }
input, select, textarea { font: inherit; color: var(--tekst); background: var(--karta);
  border: 1px solid var(--ramka); border-radius: 10px; padding: 12px; min-height: 48px; width: 100%; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--akcent); outline-offset: 2px; }
.blad-pola { color: var(--blad); font-size: .92rem; }
.przycisk { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px;
  border: 0; border-radius: 10px; background: var(--akcent); color: var(--akcent-tekst); font: 700 1rem var(--font);
  text-decoration: none; cursor: pointer; }
.przycisk.drugi { background: transparent; color: var(--akcent); border: 1px solid var(--ramka); }
.przycisk.niebezpieczny { background: var(--blad); color: var(--blad-tekst); }
.szeroki { width: 100%; }
.komunikat { border-radius: 10px; padding: 12px 14px; background: var(--ok-tlo); color: var(--ok-tekst); }
.komunikat.blad { background: transparent; color: var(--blad); border: 1px solid var(--blad); }
.przygaszony { color: var(--przygaszony); }
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista li { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 12px; border: 1px solid var(--linia); border-radius: 10px; }
.wiersz { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kopiuj { word-break: break-all; font-family: ui-monospace, monospace; font-size: .9rem; }
.dol { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--karta); border-top: 1px solid var(--linia); padding-bottom: env(safe-area-inset-bottom, 0px); }
.dol a { display: grid; justify-items: center; gap: 2px; padding: 8px 2px; font-size: .75rem; color: var(--przygaszony); text-decoration: none; min-height: 56px; }
.dol a span { font-size: 1.35rem; line-height: 1; }
.dol a.aktywny { color: var(--akcent); font-weight: 700; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .85rem; font-weight: 600;
  background: var(--linia); color: var(--tekst); }
.pill.czerwona { background: var(--blad); color: var(--blad-tekst); }
.kolczyk { font-variant-numeric: tabular-nums; }
.kolczyk strong { font-size: 1.2em; }
.lista a.wpis { flex: 1; display: grid; gap: 4px; min-height: 48px; align-content: center; color: inherit; text-decoration: none; }
.szukaj { flex-wrap: nowrap; }
.szukaj input, .szukaj select { flex: 1; min-width: 0; width: auto; }
.szukaj .przycisk { flex: none; }
.akcje > * { flex: 1; }
.udoj { grid-template-columns: 1fr 6.5rem; align-items: center; column-gap: 12px; }
.udoj label { font-weight: 400; }
.udoj .blad-pola { grid-column: 1 / -1; }
.kafelki { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kafelki > div { display: grid; gap: 2px; }
.kafelki strong { font-size: 1.6rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.wykres { position: relative; height: 200px; }
.siatka2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.zaznacz { display: flex; gap: 12px; align-items: center; }
.zaznacz input { width: 24px; height: 24px; min-height: 0; flex: none; accent-color: var(--akcent); }
.bez-lamania .przycisk { white-space: nowrap; }
h3 { font-size: 1rem; margin: 0; }
.miesiace { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 8px; text-align: center; }
.miesiace .przycisk { padding: 0; font-size: 1.4rem; }
.przelacznik-roku { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 8px 0 12px; }
.przelacznik-roku .przycisk { justify-self: start; }
.przelacznik-roku .przycisk:last-child { justify-self: end; }
.bilans { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; font-variant-numeric: tabular-nums; }
.bilans dd { margin: 0; text-align: right; font-weight: 600; white-space: nowrap; }
.bilans .wynik { font-size: 1.2rem; font-weight: 800; }
.ujemny { color: var(--blad); }

a.kafelek { gap: 2px; padding: 12px 14px; color: inherit; text-decoration: none; }
.kafelek.caly { grid-column: 1 / -1; }
.przypomnienia li.zalegle { border-color: var(--blad); }
.przypomnienia li form { flex-basis: 100%; }
.przypomnienia li form .przycisk { width: 100%; }

.dodaj { display: grid; gap: 8px; }
.dodaj summary { list-style: none; }
.dodaj summary::-webkit-details-marker { display: none; }
.dodaj[open] summary { background: var(--karta); color: var(--akcent); border: 1px solid var(--akcent); }

.kalendarz { width: 100%; border-collapse: collapse; table-layout: fixed; }
.kalendarz th { font-size: .8rem; font-weight: 600; color: var(--przygaszony); padding: 2px 0; }
.kalendarz td { padding: 1px; }
.kalendarz a.dzien { display: grid; align-content: start; justify-items: center; gap: 2px; min-height: 52px; padding: 4px 0;
  border: 2px solid transparent; border-radius: 8px; color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; }
.kalendarz a.dzien.dzis { border-color: var(--akcent); font-weight: 800; }
.kalendarz a.dzien.wybrany { background: var(--ok-tlo); }
.kalendarz a.dzien.zalegle > span:first-child { color: var(--blad); font-weight: 800; }
.kalendarz .ikony { font-size: .7rem; line-height: 1; white-space: nowrap; }
.legenda { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: .9rem; }

.pogoda-teraz { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pogoda-teraz strong { font-size: 1.8rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pogoda-ikona { font-size: 2rem; line-height: 1; }
.pogoda-dni li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
.pogoda-dni .pogoda-temp { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pogoda-dni .pogoda-szczegoly, .pogoda-dni .pogoda-uwaga { grid-column: 1 / -1; }
.kosz li > div { flex: 1 1 14rem; }
/* Maszyny */
.szczegoly summary { display: flex; align-items: center; min-height: 48px; font-weight: 600; color: var(--akcent); cursor: pointer; }
.karta-wnetrze { display: grid; gap: 12px; }
.notatki { white-space: pre-line; }
/* Pliki i zdjęcia */
.wybor-pliku { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wybor-pliku .przycisk { position: relative; gap: 6px; padding: 0 10px; white-space: nowrap; }
.wybor-pliku .przycisk:focus-within { outline: 3px solid var(--akcent); outline-offset: 2px; }
.plik-ukryty { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; cursor: pointer; padding: 0; border: 0; }
.etykieta { font-weight: 600; }
.miniatura { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--linia); display: block; }
.lista a.wpis.z-mini { grid-template-columns: 56px 1fr; column-gap: 12px; }
.lista a.wpis.z-mini > .miniatura { grid-row: 1 / span 3; align-self: center; }
.lista a.wpis.z-mini > :not(.miniatura) { grid-column: 2; }
.zdjecie-karty img { width: 100%; height: auto; max-height: 320px; object-fit: cover; border-radius: 10px; display: block; background: var(--linia); }
.naglowek { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.naglowek > .przycisk { flex: 0 0 auto; white-space: nowrap; }
.galeria { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.galeria a { display: grid; gap: 2px; color: var(--przygaszony); text-decoration: none; font-size: .8rem; text-align: center; }
.galeria img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; background: var(--linia); }
.zdjecie-pelne img { width: 100%; height: auto; border-radius: 10px; display: block; background: var(--linia); }
.zdjecie-pelne p { margin: 0; }
.ikona-pliku { display: grid; place-items: center; font-size: 1.6rem; }
.duza-ikona { font-size: 2rem; }
.filtry { gap: 8px; }
.tekst { margin: 0; white-space: pre-line; }
.wiecej-szczegolow { display: grid; gap: 12px; }
.wiecej-szczegolow summary { min-height: 48px; display: flex; align-items: center; font-weight: 600; color: var(--akcent); cursor: pointer; }
.wiecej-szczegolow[open] > .pole { margin-top: 12px; }
/* Mapa pól (Leaflet) */
.mapa { height: 300px; border-radius: 10px; overflow: hidden; background: var(--linia); z-index: 0; }
.mapa-duza .mapa { height: min(70vh, 560px); }
.leaflet-control-layers label { min-height: 32px; display: flex; align-items: center; gap: 6px; }
/* Prace polowe: zakładki widoku */
.zakladki { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--linia); padding: 4px; border-radius: 12px; }
.zakladki a { min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 9px; font-weight: 600; color: var(--przygaszony); text-decoration: none; }
.zakladki a.aktywny { background: var(--karta); color: var(--akcent); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.lista li.przygaszone { opacity: .6; }
.leaflet-container input[type=radio], .leaflet-container input[type=checkbox] { width: auto; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; box-shadow: none; accent-color: var(--akcent); }
.leaflet-control-layers-expanded { padding: 4px 8px; font-size: .85rem; }
.siatka2 > form > .przycisk { width: 100%; }
.lista li > .siatka2 { flex-basis: 100%; }

/* Pasek wersji testowej / demo (na serwerze produkcyjnym go nie ma). */
.pasek-srodowiska { background: var(--pasek-test); color: var(--pasek-tekst); text-align: center; font-weight: 700; font-size: .85rem;
  padding: 6px 12px; letter-spacing: .02em; }
.pasek-srodowiska.demo { background: var(--pasek-demo); }