/* =====================================================================
 *  Konewka - system projektowy panelu web
 *  Jasny motyw domyslnie, ciemny przez prefers-color-scheme. Zero
 *  zewnetrznych fontow/frameworkow CSS - panel dziala offline w sieci
 *  domowej, bez zaleznosci od internetu.
 * ===================================================================== */

:root {
  --tlo: #f4f6f4;
  --tlo-gradient: linear-gradient(160deg, #f4f6f4 0%, #eef4ee 100%);
  --karta: #ffffff;
  --karta-podniesiona: #ffffff;
  --tekst: #1c261f;
  --przygaszony: #667a6c;
  --linia: #dfe6e0;
  --linia-mocna: #c7d1c9;

  --akcent: #2e7d4f;
  --akcent-ciemny: #1f5c39;
  --akcent-tlo: #e3f3e8;

  --dobry: #2e7d4f;
  --uwaga: #b45309;
  --uwaga-tlo: #fef3c7;
  --blad: #b3261e;
  --blad-tlo: #fde2e1;
  --info: #2563a8;
  --info-tlo: #e2edf9;
  --neutralny: #667a6c;
  --neutralny-tlo: #e9ede9;

  --promien: 14px;
  --promien-mały: 8px;
  --cien: 0 1px 2px rgba(20, 30, 20, 0.04), 0 4px 14px rgba(20, 30, 20, 0.06);
  --cien-hover: 0 2px 4px rgba(20, 30, 20, 0.06), 0 10px 24px rgba(20, 30, 20, 0.09);
}

@media (prefers-color-scheme: dark) {
  :root {
    --tlo: #12160f;
    --tlo-gradient: linear-gradient(160deg, #12160f 0%, #141b14 100%);
    --karta: #1b221a;
    --karta-podniesiona: #212a20;
    --tekst: #e9efe7;
    --przygaszony: #93a696;
    --linia: #2b342a;
    --linia-mocna: #3a453a;

    --akcent: #4caf72;
    --akcent-ciemny: #7fd9a0;
    --akcent-tlo: #1c3324;

    --dobry: #4caf72;
    --uwaga: #e0a842;
    --uwaga-tlo: #3a2f10;
    --blad: #e5695f;
    --blad-tlo: #3b1c1a;
    --info: #6badf0;
    --info-tlo: #16283c;
    --neutralny: #93a696;
    --neutralny-tlo: #232b22;

    --cien: 0 1px 2px rgba(0, 0, 0, 0.25), 0 4px 14px rgba(0, 0, 0, 0.35);
    --cien-hover: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 28px rgba(0, 0, 0, 0.4);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--tlo-gradient);
  color: var(--tekst);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--akcent); }

/* --------------------------------------------------------------- nav */
nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.7rem 1.25rem;
  background: var(--karta);
  border-bottom: 1px solid var(--linia);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: saturate(1.4) blur(6px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--tekst);
  text-decoration: none;
  margin-right: 1rem;
  letter-spacing: -0.01em;
}
.brand svg { width: 26px; height: 26px; flex-shrink: 0; }
nav a.navlink {
  color: var(--przygaszony);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.45rem 0.7rem;
  border-radius: var(--promien-mały);
}
nav a.navlink:hover { color: var(--tekst); background: var(--neutralny-tlo); }
nav a.navlink.active { color: var(--akcent); background: var(--akcent-tlo); }
.nav-settings { margin-left: auto; display: inline-flex; align-items: center; padding: 0.45rem; }
.nav-settings:hover { color: var(--tekst); background: var(--neutralny-tlo); }
.nav-logout button {
  background: transparent; color: var(--przygaszony); border: 1px solid var(--linia);
}
.nav-logout button:hover { background: var(--blad-tlo); color: var(--blad); border-color: transparent; }

main { padding: 1.5rem 1.25rem 4rem; max-width: 1180px; margin: 0 auto; }
main.center { max-width: 380px; margin-top: 8vh; text-align: center; }

h1 { font-size: 1.5rem; margin: 0 0 0.2rem; letter-spacing: -0.01em; }
.page-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; }
.page-sub { color: var(--przygaszony); font-size: 0.92rem; margin: 0; }

/* ---------------------------------------------------------- stat bar */
.stat-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.stat {
  background: var(--karta);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  padding: 0.9rem 1rem;
  box-shadow: var(--cien);
}
.stat .num { font-size: 1.7rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.stat .lbl { color: var(--przygaszony); font-size: 0.82rem; margin-top: 0.15rem; }
.stat.accent-do_podlania .num { color: var(--uwaga); }
.stat.accent-w_trakcie .num { color: var(--info); }
.stat.accent-wstrzymane .num { color: var(--neutralny); }

/* ------------------------------------------------------------- today
   (.today-box/.today-head zastapione ponownym uzyciem .home-card/h2 -
   patrz plants.html/home.html - "rownorzedny" wyglad "Do zrobienia dzis"
   i "Zadania na dzis" w Przegladzie, jedna definicja karty zamiast dwoch) */
.today-list { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.today-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.65rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600;
  text-decoration: none; background: var(--neutralny-tlo); color: var(--tekst);
  border: 1px solid transparent;
}
.today-chip span { font-weight: 500; color: var(--przygaszony); }
.today-chip:hover { border-color: var(--linia-mocna); }
.today-spozniona { background: var(--blad-tlo); color: var(--blad); }
.today-termin { background: var(--uwaga-tlo); color: var(--uwaga); }
.today-w_trakcie { background: var(--info-tlo); color: var(--info); }
.today-nigdy { background: var(--info-tlo); color: var(--info); }

/* --------------------------------------------------------- search */
.toolbar { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 1.1rem; flex-wrap: wrap; }
.search-box { position: relative; flex: 1; min-width: 200px; max-width: 340px; }
.search-box svg {
  position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--przygaszony); pointer-events: none;
}
.search-box input {
  width: 100%; padding-left: 2.1rem;
}

/* ---------------------------------------------------------- grid + card */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.plant-card, .device-card {
  background: var(--karta);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  padding: 1.1rem;
  box-shadow: var(--cien);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;       /* pozwala kurczyc sie w gridzie zamiast wypychac wiersz */
  max-width: 100%;
  overflow-x: hidden;  /* zabezpieczenie - zaden element wewnatrz nie moze juz rozepchac karty w bok */
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.plant-card:hover, .device-card:hover { box-shadow: var(--cien-hover); border-color: var(--linia-mocna); }

@keyframes zapisano {
  0% { background: var(--akcent-tlo); }
  100% { background: var(--karta); }
}
.plant-card.htmx-added { animation: zapisano 900ms ease-out; }

/* --- zdjecie: pasek "hero", TO SAMO miejsce w widoku i w edycji ---
   Zdjecie (gdy jest) jest ciasnym, przycietym paskiem na calej szerokosci
   karty (.photo-hero-wrap/.photo-hero) - klikniecie rozwija PELNE zdjecie
   w miejscu. W edycji zdjecie NIE zmienia polozenia (dawniej znikalo na
   rzecz malej ikonki w card-top - ten przeskok byl mylacy) - zamiast tego
   nad nim pojawiaja sie dwa male przyciski w rogu (.photo-hero-change/
   .photo-hero-delete). .photo-thumb (mala kwadratowa ikonka) zyje juz
   TYLKO dla rosliny BEZ zdjecia (dodanie pierwszego) - patrz
   _plant_card.html. */
.photo-hero-wrap {
  position: relative; margin: -1.1rem -1.1rem 0;
  border-radius: var(--promien) var(--promien) 0 0; overflow: hidden;
}
.photo-hero-change, .photo-hero-delete {
  display: none; position: absolute; top: 0.5rem; z-index: 1;
  align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border-radius: 50%;
  background: rgba(0, 0, 0, 0.55); color: white; border: none; cursor: pointer;
  transition: background-color 0.15s;
}
.plant-card.editing .photo-hero-change, .plant-card.editing .photo-hero-delete { display: flex; }
.photo-hero-change { right: 2.7rem; }
.photo-hero-change svg { width: 16px; height: 16px; }
.photo-hero-change:hover { background: rgba(0, 0, 0, 0.75); }
.photo-hero-delete { right: 0.6rem; font-size: 1rem; line-height: 1; }
.photo-hero-delete:hover { background: var(--blad); }
.photo-hero summary {
  list-style: none; cursor: pointer; display: block; overflow: hidden;
  max-height: 112px; transition: max-height 0.3s ease;
}
.photo-hero summary::-webkit-details-marker { display: none; }
/* Zamkniete (albo WLASNIE SIE ZAMYKA) - cover/112px, ale ze SPOZNIONYM
   przelaczeniem (delay tuz przed koncem animacji kontenera powyzej).
   Bez tego obrazek skakal natychmiast do maleńkiego, przycietego paska,
   podczas gdy kontener byl jeszcze przez chwile duzy - zwijanie
   wygladalo szarpanie, mimo ze rozwijanie (odwrotny kierunek, patrz
   nizej: przelacza sie NATYCHMIAST i jest stopniowo odslaniane przez
   rosnacy kontener) wygladalo plynnie. Teraz oba kierunki
   zaslaniaja/odslaniaja juz docelowo ustawiony obrazek, zamiast
   przeskakiwac w polowie animacji. */
.photo-hero summary img {
  width: 100%; height: 112px; object-fit: cover; object-position: center;
  display: block; transition: opacity 0.15s, height 0s ease 0.28s, object-fit 0s ease 0.28s;
}
.photo-hero summary:hover img { opacity: 0.88; }
/* Rozwiniete - W MIEJSCU (nie plywajaca nakladka): kontener rosnie do
   70vh z animacja (max-height animuje sie plynnie, w odroznieniu od
   "auto"), zdjecie w srodku przelacza sie na pelny, nieprzyciety rozmiar
   NATYCHMIAST (delay 0 - rosnacy kontener odslania juz gotowy, pelny
   obrazek zamiast skakac w trakcie). */
.photo-hero[open] summary { max-height: 70vh; }
.photo-hero[open] summary img {
  height: auto; max-height: 70vh; object-fit: contain; background: var(--neutralny-tlo);
  transition: height 0s, object-fit 0s;
}

.card-top { display: flex; align-items: center; gap: 0.55rem; position: relative; }

.photo-thumb {
  display: none;   /* domyslnie ukryta - patrz komentarz przy .photo-hero wyzej */
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: var(--neutralny-tlo); color: var(--przygaszony);
  align-items: center; justify-content: center; overflow: hidden;
  border: 1px solid var(--linia); transition: border-color 0.15s;
  cursor: pointer;
}
.plant-card.editing .photo-thumb { display: flex; }
.photo-thumb:hover { border-color: var(--akcent); color: var(--akcent); }
.photo-thumb svg { width: 18px; height: 18px; }

/* Zwiezla linia gatunek+lokalizacja, w miejscu dawnej 4-wierszowej listy
   (gatunek/lokalizacja/dawka/odstep) - dawka jest juz widoczna wyzej w
   .card-body (stat-main), powtarzanie jej tutaj bylo zbedne. */
.card-meta { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--przygaszony); min-width: 0; }
.card-meta-species { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; color: var(--tekst); font-weight: 600; }
.card-meta-species-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-meta-sep { flex-shrink: 0; }
.card-meta-location { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Przelacznik edycji PER ROSLINA (trybik w rogu karty, .card-edit-toggle
   nizej) - klasa "editing" na SAMEJ karcie (.plant-card), nie na <html>.
   Stan w localStorage per uid (patrz app.js::przelaczEdycjeKarty) -
   kazda karta przywraca go sobie sama przy kazdym renderze (maly
   <script> na koncu _plant_card.html), wiec przetrwa podmiane TEJ karty
   przez htmx, a INNE karty zostaja nietkniete (w odroznieniu od dawnego
   globalnego przelacznika, ktory rozwijal edycje wszystkich naraz). */
.plant-card.editing .name-text, .plant-card.editing .card-meta { display: none; }
.plant-card.editing .name-input { display: block; }
.plant-card.editing .edit-fields { display: flex; }

.card-edit-toggle {
  flex-shrink: 0; width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 50%;
  background: transparent; color: var(--przygaszony); border: none;
  display: flex; align-items: center; justify-content: center;
}
.card-edit-toggle svg { width: 16px; height: 16px; }
.card-edit-toggle:hover { background: var(--neutralny-tlo); color: var(--tekst); }
.plant-card.editing .card-edit-toggle { background: var(--akcent); color: white; }

.species-label {
  display: flex; flex-direction: column; gap: 0.25rem;
  font-size: 0.74rem; color: var(--przygaszony); font-weight: 600;
}

/* Combobox wlasnej roboty: <datalist> na telefonach czesto nie pokazuje
   ani strzalki, ani pelnej listy po kliknieciu (niespojne wsparcie w
   mobilnych przegladarkach) - to samo pole, ale strzalka NIEZAWODNIE
   pokazuje cala liste do wyboru, budowana w JS wprost z <datalist>
   (jedno zrodlo danych, patrz app.js::comboPrzelacz), a pisanie w polu
   dziala zwyczajnie i pozwala wpisac cokolwiek. */
.combo { position: relative; display: flex; gap: 0.3rem; flex: 1; min-width: 0; }
.combo input { flex: 1; min-width: 0; }
.combo-arrow {
  flex-shrink: 0; width: 2.1rem; padding: 0; background: var(--neutralny-tlo);
  color: var(--przygaszony); border: 1px solid var(--linia);
}
.combo-arrow:hover { background: var(--linia); color: var(--tekst); }
.combo-list {
  position: absolute; top: calc(100% + 0.25rem); left: 0; right: 0; z-index: 30;
  margin: 0; padding: 0.3rem; list-style: none;
  background: var(--karta); border: 1px solid var(--linia-mocna); border-radius: var(--promien-mały);
  box-shadow: var(--cien-hover); max-height: 12rem; overflow-y: auto;
}
.combo-list li {
  padding: 0.4rem 0.5rem; border-radius: 6px; font-size: 0.85rem; cursor: pointer;
}
.combo-list li:hover { background: var(--akcent-tlo); color: var(--akcent); }

.species-hint {
  display: flex; gap: 0.7rem; align-items: flex-start;
  background: var(--neutralny-tlo); border-radius: var(--promien-mały);
  padding: 0.6rem 0.7rem;
}
.species-hint img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.species-hint-text { min-width: 0; font-size: 0.8rem; }
.species-hint-text p { margin: 0 0 0.3rem; color: var(--tekst); }
.species-hint-text .species-note { color: var(--przygaszony); font-style: italic; }
.species-hint-text form { margin-top: 0.35rem; }
.species-hint-text button { font-size: 0.76rem; padding: 0.3rem 0.6rem; }

/* --- gatunek: dymek pielegnacji na karcie rosliny + katalog (species.html) --- */

.species-bubble { position: relative; flex-shrink: 0; }
.species-bubble summary {
  list-style: none; cursor: pointer; user-select: none;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-style: italic; font-weight: 700; font-family: Georgia, serif;
  background: var(--neutralny-tlo); color: var(--przygaszony);
  border: 1px solid var(--linia);
}
.species-bubble summary::-webkit-details-marker { display: none; }
.species-bubble summary:hover, .species-bubble[open] summary { background: var(--akcent-tlo); color: var(--akcent); border-color: var(--akcent); }

/* Przyciemnione tlo CALEGO ekranu, gdy dymek jest otwarty - czysto CSS
   (pseudo-element na <details>, position:fixed), zero JS. Sygnalizuje
   wyraznie "to jest teraz osobna warstwa NAD strona", nie fragment karty. */
.species-bubble[open]::before {
  content: ""; position: fixed; inset: 0; background: rgba(10, 15, 10, 0.5); z-index: 99;
}

/* NAPRAWA (zgloszenie): dymek byl przypiety (position:absolute) do przycisku
   wewnatrz karty - na waskich/gestych ukladach obcinal sie na krawedzi karty
   i tekst nie mial jak sie zawinac w waskiej, sztywnej szerokosci. Teraz
   position:fixed i wysrodkowany wzgledem CALEGO ekranu - fizycznie NAD
   kazda karta, niezalezny od tego, gdzie w gridzie/liscie karta lezy, z
   szerokoscia liczona od viewportu (zawijanie tekstu dziala normalnie). */
.species-bubble-content {
  position: fixed; z-index: 100; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(92vw, 340px); max-height: min(80vh, 480px); overflow-y: auto;
  background: var(--karta); border: 1px solid var(--linia-mocna); border-radius: var(--promien);
  box-shadow: var(--cien-hover); padding: 1rem 1.1rem;
  text-align: left; font-size: 0.82rem;
}
.species-bubble-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.55rem; }
.species-bubble-title { margin: 0; font-weight: 700; color: var(--tekst); font-size: 1rem; }
.species-bubble-close {
  flex-shrink: 0; background: transparent; border: none; color: var(--przygaszony); cursor: pointer;
  font-size: 1.3rem; line-height: 1; padding: 0; margin: -0.2rem -0.1rem 0 0;
}
.species-bubble-close:hover { color: var(--blad); }

/* --- potwierdzenie akcji jako chmurka (patrz _confirm.html) - ten sam
   idiom co dymek gatunku powyzej (details + wysrodkowany popover +
   przyciemnione tlo), zamiast natywnego window.confirm()/hx-confirm.
   Powod: przegladarka po serii natywnych okien oferuje "nie pytaj wiecej" -
   jedno przypadkowe zaznaczenie i WSZYSTKIE kolejne confirm() na stronie
   przepadaja po cichu az do odswiezenia. Wlasny UI tego ryzyka nie ma. --- */
.confirm-bubble { position: relative; display: inline-block; }
.confirm-bubble > summary { list-style: none; cursor: pointer; }
.confirm-bubble > summary::-webkit-details-marker { display: none; }
.confirm-bubble > summary.confirm-trigger {
  display: block; width: 100%; text-align: center;
  border-radius: var(--promien-mały); padding: 0.45rem 0.8rem; font-size: 0.85rem; font-weight: 600;
}
.confirm-bubble[open]::before {
  content: ""; position: fixed; inset: 0; background: rgba(10, 15, 10, 0.5); z-index: 99;
}
.confirm-bubble-content {
  position: fixed; z-index: 100; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(92vw, 320px);
  background: var(--karta); border: 1px solid var(--linia-mocna); border-radius: var(--promien);
  box-shadow: var(--cien-hover); padding: 1.1rem 1.2rem; text-align: left;
}
.confirm-bubble-msg { margin: 0 0 1rem; color: var(--tekst); font-size: 0.88rem; }
/* "Przejmij tag" (patrz _plant_card.html) - formularz w chmurce, ktory
   oprocz przycisku potwierdzenia niesie tez WYBOR (select), wiec ukladany
   w kolumnie (select nad przyciskiem) zamiast samego przycisku. */
.retag-confirm-form { display: flex; flex-direction: column; gap: 0.4rem; }

/* --- karta "nowy tag" w poczekalni (patrz _pending_tag_card.html) - te
   same wymiary co .plant-card (dziedziczy klase), przerywana ramka +
   przygaszone tlo odrozniaja ja na pierwszy rzut oka od prawdziwej
   rosliny, zanim ktos ja zatwierdzi. --- */
.pending-card {
  border-style: dashed; border-color: var(--linia-mocna); background: var(--neutralny-tlo);
}
.pending-uid {
  margin: 0; font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em; color: var(--tekst);
}
.pending-claim-form { display: flex; flex-direction: column; gap: 0.5rem; margin-top: auto; }
.confirm-bubble-actions { display: flex; gap: 0.5rem; }
.confirm-bubble-actions > button, .confirm-bubble-actions > form { flex: 1; margin: 0; }
.confirm-bubble-actions button { width: 100%; }

.care-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.3rem 0.7rem; font-size: 0.82rem; margin: 0; }
.care-grid dt { color: var(--przygaszony); }
.care-grid dd { margin: 0; color: var(--tekst); overflow-wrap: break-word; word-break: break-word; }
.care-problems { margin: 0.6rem 0 0; font-size: 0.82rem; color: var(--tekst); overflow-wrap: break-word; }
.care-toxic {
  margin: 0.6rem 0 0; padding: 0.4rem 0.55rem; border-radius: 6px; font-size: 0.8rem;
  background: var(--blad-tlo); color: var(--blad); overflow-wrap: break-word;
}
.care-safe {
  margin: 0.6rem 0 0; padding: 0.4rem 0.55rem; border-radius: 6px; font-size: 0.8rem;
  background: var(--akcent-tlo); color: var(--dobry); overflow-wrap: break-word;
}

/* --- /gatunki: katalog pelnej bazy gatunkow (species.html) --- */
/* Pojedyncza kolumna (nie wspoldzielone .grid auto-fill) - zdjecie "na
   jedna trzecia zakladki" ma sens tylko wtedy, gdy karta sama jest
   szeroka, nie waskim kaflem w siatce 3-4 kolumn. */
.species-grid { grid-template-columns: 1fr; }

.species-card {
  background: var(--karta); border: 1px solid var(--linia); border-radius: var(--promien);
  box-shadow: var(--cien); overflow: hidden;
}
.species-card summary {
  list-style: none; cursor: pointer; display: flex; align-items: stretch; gap: 0;
}
.species-card summary::-webkit-details-marker { display: none; }
/* Zdjecie dotyka krawedzi karty (bez paddingu summary) i zajmuje ok. 1/3
   szerokosci - stad karta MUSI byc pelnej szerokosci (patrz .species-grid
   wyzej), inaczej "1/3" byloby 1/3 waskiego kafla, nie strony. */
.species-card summary img {
  width: 33%; min-width: 96px; max-width: 220px; aspect-ratio: 1 / 1;
  object-fit: cover; flex-shrink: 0;
}
.species-card-info {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1rem;
}
.species-card-head { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.15rem; }
.species-card-name {
  font-weight: 700; font-size: 1.08rem; color: var(--tekst);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.species-card-cat { font-size: 0.78rem; color: var(--przygaszony); }
.species-card-arrow { width: 16px; height: 16px; color: var(--przygaszony); flex-shrink: 0; transition: transform 0.15s; }
.species-card[open] .species-card-arrow { transform: rotate(180deg); }
.species-card-body { padding: 0 1rem 1rem; border-top: 1px solid var(--linia); padding-top: 0.75rem; font-size: 0.85rem; }
.species-card-basic { margin: 0 0 0.4rem; color: var(--tekst); }
.species-card-note { margin: 0 0 0.6rem; color: var(--przygaszony); font-style: italic; font-size: 0.8rem; }
.species-card .care-grid { font-size: 0.82rem; }
.species-card .care-problems, .species-card .care-toxic, .species-card .care-safe { font-size: 0.82rem; }
.species-card-source { margin: 0.6rem 0 0; font-size: 0.76rem; }

.location-row { display: flex; align-items: center; gap: 0.4rem; }
.location-row svg { width: 15px; height: 15px; color: var(--przygaszony); flex-shrink: 0; }
.location-input {
  border: none; background: transparent; padding: 0.1rem 0.3rem; font-size: 0.82rem;
  color: var(--przygaszony); flex: 1; min-width: 0; border-radius: var(--promien-mały);
}
.location-input:hover { background: var(--neutralny-tlo); }
.location-input:focus { background: var(--karta); border: 1px solid var(--akcent); outline: none; color: var(--tekst); }
.dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dot-ok, .dot-w_trakcie { background: var(--dobry); }
.dot-termin { background: var(--uwaga); }
.dot-spozniona { background: var(--blad); }
.dot-pauza, .dot-odlozona { background: var(--neutralny); }
.dot-nigdy { background: var(--info); }

.name-text {
  flex: 1; min-width: 0; font-size: 1.05rem; font-weight: 700;
  padding: 0.15rem 0.35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.name-input {
  border: 1px solid transparent;
  background: transparent;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 0.15rem 0.35rem;
  border-radius: var(--promien-mały);
  flex: 1;
  min-width: 0;
  color: var(--tekst);
  display: none;
}
.name-input:hover { border-color: var(--linia); }
.name-input:focus { border-color: var(--akcent); background: var(--karta); outline: none; }

.badge {
  display: inline-flex; align-items: center; white-space: nowrap; flex-shrink: 0;
  padding: 0.15rem 0.55rem; border-radius: 999px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.01em;
  background: var(--neutralny-tlo); color: var(--neutralny);
}
.badge-termin { background: var(--uwaga-tlo); color: var(--uwaga); }
.badge-spozniona { background: var(--blad-tlo); color: var(--blad); }
.badge-w_trakcie { background: var(--info-tlo); color: var(--info); }
.badge-pauza, .badge-odlozona { background: var(--neutralny-tlo); color: var(--neutralny); }
.badge-ok { background: var(--akcent-tlo); color: var(--akcent); }
.badge-nigdy { background: var(--info-tlo); color: var(--info); }

/* -------------------------------------------------------- ring + body */
.card-body { display: flex; align-items: center; gap: 1rem; }

.ring {
  --size: 62px;
  width: var(--size); height: var(--size);
  border-radius: 50%;
  flex-shrink: 0;
  background: conic-gradient(var(--ring-kolor, var(--akcent)) calc(var(--pct, 0) * 1%), var(--linia) 0);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.ring::before {
  content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--karta);
}
.ring-value { position: relative; z-index: 1; font-weight: 800; font-size: 0.86rem; }

.state-termin .ring, .state-spozniona .ring { --ring-kolor: var(--uwaga); }
.state-spozniona .ring { --ring-kolor: var(--blad); }
.state-w_trakcie .ring { --ring-kolor: var(--info); }
.state-pauza .ring, .state-odlozona .ring { --ring-kolor: var(--neutralny); }
.state-nigdy .ring { --ring-kolor: var(--info); }

.card-stats { min-width: 0; flex: 1; }
.stat-main { font-size: 1.2rem; font-weight: 700; line-height: 1.2; }
.stat-main .unit { font-size: 0.85rem; font-weight: 500; color: var(--przygaszony); }
.over { color: var(--uwaga); font-weight: 700; font-size: 0.82rem; margin-top: 0.1rem; }
.stat-sub { color: var(--przygaszony); font-size: 0.82rem; margin-top: 0.15rem; }

/* ------------------------------------------------------------- edit */
.card-edit {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem;
  padding-top: 0.7rem; border-top: 1px dashed var(--linia);
}
.card-edit label {
  display: flex; flex-direction: column; gap: 0.2rem;
  font-size: 0.74rem; color: var(--przygaszony); font-weight: 600;
}
.card-edit input { width: 100%; }

.card-secondary { display: flex; gap: 0.4rem; }
.card-secondary > button { flex: 1; min-width: 0; }

/* Formularz "Zanotuj czynnosc" - <details> jak dymek gatunku, rozwijany
   W MIEJSCU (nie plywajacy popover), bo to formularz z realnym
   focusem/klawiatura, nie sam odczyt. */
.log-form { margin-bottom: 0; }
.log-toggle {
  display: block; cursor: pointer; user-select: none; list-style: none;
  background: transparent; color: var(--przygaszony); border: 1px dashed var(--linia);
  border-radius: var(--promien-mały); font-size: 0.78rem; padding: 0.45rem 0.8rem; text-align: center;
}
.log-toggle::-webkit-details-marker { display: none; }
.log-toggle:hover { background: var(--neutralny-tlo); color: var(--tekst); }
.log-form[open] .log-toggle { background: var(--akcent-tlo); color: var(--akcent); border-color: var(--akcent); }

.log-fields { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.log-fields select { flex: 1 1 100%; }
.log-fields .log-ml, .log-fields .log-note, .log-fields .log-ts { flex: 1 1 auto; min-width: 0; }
.log-fields button { flex: 1 1 100%; }

.hist-note { color: var(--tekst); }

.history-toggle {
  background: transparent; color: var(--przygaszony); border: 1px dashed var(--linia);
  font-size: 0.78rem;
}
.history-toggle:hover { background: var(--neutralny-tlo); color: var(--tekst); }

.edit-fields { display: none; flex-direction: column; gap: 0.7rem; }

.history { font-size: 0.82rem; display: none; }
.history.open { display: block; }
.history-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.history-list li { display: flex; justify-content: space-between; align-items: center; color: var(--przygaszony); }
.history-list b { color: var(--tekst); font-weight: 700; }
.history-empty { color: var(--przygaszony); font-style: italic; padding-top: 0.4rem; }
.history-heading {
  margin: 0.7rem 0 0; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--przygaszony);
}
.history-heading:first-child { margin-top: 0; }

/* Kasowanie pojedynczego wpisu historii - jak zdjecie/usuwanie rosliny,
   dostepne TYLKO po odblokowaniu edycji (ten sam globalny przelacznik). */
.hist-del-form { display: none; margin: 0; }
.plant-card.editing .hist-del-form { display: block; }
.hist-del {
  background: transparent; border: none; color: var(--przygaszony); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0 0 0 0.5rem;
}
.hist-del:hover { color: var(--blad); }

/* --------------------------------------------------------- devices */
.device-card { gap: 0.7rem; }
.device-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.device-id { font-weight: 800; font-size: 1.02rem; }
.device-type { color: var(--przygaszony); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }

.device-meta { display: flex; flex-direction: column; gap: 0.55rem; }
.meta-row { display: flex; align-items: center; gap: 0.55rem; font-size: 0.88rem; }
.meta-row svg { width: 17px; height: 17px; color: var(--przygaszony); flex-shrink: 0; }
.meta-row .meta-label { color: var(--przygaszony); min-width: 5.4rem; }
.meta-row .meta-val { font-weight: 600; }

.battery-track {
  width: 46px; height: 20px; border: 2px solid var(--linia-mocna); border-radius: 4px;
  position: relative; display: inline-flex; align-items: center; padding: 2px; flex-shrink: 0;
}
.battery-track::after {
  content: ""; position: absolute; right: -5px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 8px; background: var(--linia-mocna); border-radius: 0 2px 2px 0;
}
.battery-fill { height: 100%; border-radius: 2px; background: var(--dobry); }
.bat-niska .battery-fill { background: var(--uwaga); }
.bat-krytyczna .battery-fill { background: var(--blad); }
.bat-krytyczna .meta-val { color: var(--blad); }

.signal-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.signal-bars i { display: block; width: 4px; background: var(--linia-mocna); border-radius: 1px; }
.signal-bars i:nth-child(1) { height: 25%; }
.signal-bars i:nth-child(2) { height: 50%; }
.signal-bars i:nth-child(3) { height: 75%; }
.signal-bars i:nth-child(4) { height: 100%; }
.signal-bars.lvl-1 i:nth-child(1),
.signal-bars.lvl-2 i:nth-child(-n+2),
.signal-bars.lvl-3 i:nth-child(-n+3),
.signal-bars.lvl-4 i:nth-child(-n+4) { background: var(--akcent); }
.signal-bars.lvl-0 i { background: var(--blad); opacity: 0.4; }

.add-card {
  /* background:transparent jawnie - element bazowy "button" (patrz nizej
     w tym pliku) narzuca zielone tlo, .add-card jako <button> (plants.html)
     musi je jawnie zdjac; dla <a> (devices.html) to i tak no-op. */
  border: 1.5px dashed var(--linia-mocna); border-radius: var(--promien);
  background: transparent; width: 100%; font: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem; padding: 1.5rem; text-decoration: none; color: var(--przygaszony);
  min-height: 160px; transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.add-card:hover { border-color: var(--akcent); color: var(--akcent); background: var(--akcent-tlo); }
.add-card svg { width: 30px; height: 30px; }
.add-card span { font-weight: 700; font-size: 0.9rem; }

/* --------------------------------------------------------------- empty */
.empty {
  text-align: center; padding: 3.5rem 1.5rem; color: var(--przygaszony);
  background: var(--karta); border: 1px dashed var(--linia-mocna); border-radius: var(--promien);
}
.empty svg { width: 44px; height: 44px; margin-bottom: 0.75rem; opacity: 0.6; }
.empty p { margin: 0.25rem 0; }
.empty .empty-title { color: var(--tekst); font-weight: 700; font-size: 1.05rem; }

/* --------------------------------------------------------------- tables */
.table-wrap {
  overflow-x: auto; background: var(--karta); border: 1px solid var(--linia);
  border-radius: var(--promien); box-shadow: var(--cien); margin-bottom: 1.25rem;
}
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--linia); font-size: 0.88rem; white-space: nowrap; }
th { color: var(--przygaszony); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
tbody tr:last-child td { border-bottom: none; }

/* --------------------------------------------------------------- forms */
input[type="number"], input[type="text"], input[type="password"], input[type="date"], select {
  border: 1px solid var(--linia); border-radius: var(--promien-mały);
  padding: 0.4rem 0.55rem; font-size: 0.9rem; background: var(--karta); color: var(--tekst);
}
/* Bez tego przegladarka rysuje ikonke kalendarza NA CZARNO zawsze - w
   ciemnym motywie znikala na ciemnym tle. color-scheme mowi przegladarce,
   jakiej wersji swojego WLASNEGO, naturywnego UI (ikonka, natywny picker
   po kliknieciu) uzyc dla tego pola - reszta stylu (tlo/ramka/tekst) i tak
   idzie z reguly powyzej, to dotyczy tylko czesci, ktorej CSS nie dosiega. */
input[type="date"] { color-scheme: light dark; }
input:focus, select:focus { outline: 2px solid var(--akcent); outline-offset: 1px; border-color: transparent; }
form.card input, form.card select { width: 100%; }
.inline-form { display: inline-flex; gap: 0.35rem; align-items: center; }
.akcje { display: flex; gap: 0.4rem; flex-wrap: wrap; }

button {
  border: none; border-radius: var(--promien-mały); padding: 0.45rem 0.8rem;
  background: var(--akcent); color: white; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  transition: opacity 0.15s, transform 0.05s;
}
button:hover { opacity: 0.88; }
button:active { transform: scale(0.97); }
button.ghost { background: var(--neutralny-tlo); color: var(--tekst); }
button.danger-ghost { background: transparent; color: var(--blad); border: 1px solid var(--blad); }
button.danger-ghost:hover { background: var(--blad-tlo); }

/* ------------------------------------------------------------------ card (auth/forms) */
.card {
  background: var(--karta); border: 1px solid var(--linia); border-radius: var(--promien);
  padding: 1.4rem; display: flex; flex-direction: column; gap: 0.9rem; max-width: 420px;
  box-shadow: var(--cien);
}
.card label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; font-weight: 600; }

dl.card { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; }
dl.card dt { color: var(--przygaszony); font-weight: 600; }
dl.card dd { margin: 0; }
dl.card code {
  background: var(--neutralny-tlo); padding: 0.2rem 0.45rem; border-radius: 5px;
  font-size: 0.85rem; word-break: break-all;
}

.blad { color: var(--blad); font-weight: 600; }
.uwaga-txt { color: var(--uwaga); font-weight: 600; background: var(--uwaga-tlo); padding: 0.6rem 0.8rem; border-radius: var(--promien-mały); }

/* ---------------------------------------------------------------- login */
.login-logo { display: flex; justify-content: center; margin-bottom: 0.5rem; }
.login-logo svg { width: 54px; height: 54px; }
main.center h1 { font-size: 1.7rem; }
main.center .page-sub { margin-bottom: 1.5rem; }

/* ------------------------------------------------------------------ home */
.home-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem; margin-bottom: 1.5rem;
}
.home-card {
  background: var(--karta); border: 1px solid var(--linia); border-radius: var(--promien);
  padding: 1.1rem 1.2rem; box-shadow: var(--cien);
}
.home-card h2 { margin: 0 0 0.7rem; font-size: 0.95rem; }
.home-card-note { margin: -0.4rem 0 0.7rem; font-size: 0.76rem; color: var(--przygaszony); font-style: italic; }
.empty-hint { margin: 0; color: var(--przygaszony); font-size: 0.85rem; }

.feed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.feed-list li { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.85rem; }
.feed-time { font-size: 0.72rem; color: var(--przygaszony); text-transform: uppercase; letter-spacing: 0.02em; }
.feed-what { color: var(--tekst); }
.feed-what b { font-weight: 700; }

.home-fact { background: var(--akcent-tlo); border-color: transparent; }
.home-fact h2 { color: var(--akcent-ciemny); }
.home-fact-text { margin: 0 0 0.4rem; color: var(--tekst); font-size: 0.92rem; }
.home-fact-src { margin: 0; color: var(--przygaszony); font-size: 0.78rem; font-style: italic; }

/* --------------------------------------------------------- home: kalendarz */
.home-calendar {
  background: var(--karta); border: 1px solid var(--linia); border-radius: var(--promien);
  padding: 1.1rem 1.2rem; box-shadow: var(--cien);
}
.calendar-head { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 0.3rem; }
.calendar-head h2 { margin: 0; font-size: 1.05rem; min-width: 11rem; text-align: center; }
/* .a (nie <button>) - .ghost w tym pliku to celowo "button.ghost" (zwiazany
   selektor), pierwszy link stylizowany "jak przycisk" w tym panelu dostaje
   wiec wlasna, samodzielna regule zamiast liczyc na .ghost. */
.calendar-nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: var(--promien-mały);
  background: var(--neutralny-tlo); color: var(--tekst); text-decoration: none;
  font-size: 0.95rem; flex-shrink: 0;
}
.calendar-nav:hover { background: var(--linia); }
.calendar-legend {
  display: flex; justify-content: center; gap: 1.1rem; margin-bottom: 0.9rem;
  font-size: 0.76rem; color: var(--przygaszony);
}
.calendar-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }

.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.calendar-dow { text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--przygaszony); padding-bottom: 0.3rem; }
.calendar-cell {
  min-height: 3.4rem; border-radius: var(--promien-mały); background: var(--neutralny-tlo);
  padding: 0.3rem; display: flex; flex-direction: column; gap: 0.25rem;
}
.calendar-cell.calendar-empty { background: transparent; }
.calendar-cell.calendar-today { background: var(--akcent-tlo); box-shadow: inset 0 0 0 1.5px var(--akcent); }
.calendar-daynum { font-size: 0.76rem; font-weight: 600; color: var(--przygaszony); }
.calendar-today .calendar-daynum { color: var(--akcent-ciemny); }
.calendar-dots { display: flex; flex-wrap: wrap; gap: 3px; margin-top: auto; }
.calendar-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.calendar-dot.done { background: var(--dobry); }
.calendar-dot.planned { background: transparent; border: 1.5px solid var(--info); }

/* Agenda (lista chronologiczna) - domyslnie ukryta, zamienia siatke na
   waskim ekranie (patrz @media nizej) - siatka z samymi kropkami traci
   tam czytelnosc (za malo miejsca na kontekst przy kazdym dniu). */
.calendar-agenda { display: none; list-style: none; margin: 1rem 0 0; padding: 0; flex-direction: column; gap: 0.7rem; }
.calendar-agenda > li > b { display: block; font-size: 0.78rem; color: var(--przygaszony); text-transform: capitalize; margin-bottom: 0.3rem; }
.calendar-agenda ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.calendar-agenda li li {
  display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.85rem; color: var(--tekst);
  padding: 0.35rem 0.55rem; border-radius: var(--promien-mały); background: var(--neutralny-tlo);
}
.calendar-agenda li li span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--przygaszony); flex-shrink: 0; }
.calendar-agenda li li.planned span { color: var(--info); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 640px) {
  main { padding: 1rem 0.85rem 3rem; overflow-x: hidden; }
  /* Wiecej pozycji w nav (Diagnostyka/Ustawienia) nie mieszcilo sie juz w
     jednym rzedzie na waskim ekranie i pchalo cala strone w bok - nav
     dostaje WLASNY poziomy scroll, zamiast psuc reszte strony. */
  nav {
    padding: 0.6rem 0.7rem; gap: 0.1rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap;
  }
  nav a.navlink { padding: 0.4rem 0.5rem; font-size: 0.85rem; white-space: nowrap; flex-shrink: 0; }
  .brand { margin-right: 0.4rem; flex-shrink: 0; }
  .brand span { display: none; }
  .nav-settings { flex-shrink: 0; }
  .nav-logout { flex-shrink: 0; }
  .grid { grid-template-columns: 1fr; }
  .stat-bar { grid-template-columns: repeat(2, 1fr); }
  .card-secondary { flex-wrap: wrap; }
  .home-grid { grid-template-columns: 1fr; }
  .calendar-grid, .calendar-legend { display: none; }
  .calendar-agenda { display: flex; }
  .calendar-head h2 { min-width: 0; }
}