/* Homeapp — własny arkusz, bez frameworka. Jeden plik, zero kroku budowania. */

:root {
  color-scheme: light dark;

  --bg:          #f5f6f7;
  --surface:     #ffffff;
  --surface-alt: #f0f1f3;
  --border:      #d9dcdf;
  --text:        #1c1f22;
  --text-muted:  #666c72;

  --accent:        #2f6f4f;
  --accent-soft:   #e8f2ec;
  --accent-text:   #ffffff;
  --overdue:       #b3261e;
  --overdue-bg:    #fdecea;
  --soon:          #9a6400;
  --soon-bg:       #fdf4e3;
  --later:         #4a5157;

  --radius: 8px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .04);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #16181a;
    --surface:     #1e2124;
    --surface-alt: #26292d;
    --border:      #34383d;
    --text:        #e6e8ea;
    --text-muted:  #9aa1a8;

    --accent:      #4d9e74;
    --accent-soft: rgba(77, 158, 116, .16);
    --accent-text: #0f1112;
    --overdue:     #f2867c;
    --overdue-bg:  #3a1f1d;
    --soon:        #e0b25f;
    --soon-bg:     #362c17;
    --later:       #9aa1a8;
    --shadow:      0 1px 2px rgba(0, 0, 0, .4);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); }
a:hover { text-decoration: none; }

/* ---------------------------------------------------------------- Layout */

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-inner {
  max-width: 62rem;
  margin: 0 auto;
  padding: .6rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.brand {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -.01em;
}

.nav { display: flex; gap: .25rem; flex-wrap: wrap; flex: 1; }

.nav a {
  padding: .35rem .6rem;
  border-radius: var(--radius);
  color: var(--text-muted);
  text-decoration: none;
  font-size: .92rem;
  white-space: nowrap;
}

.nav a:hover { background: var(--surface-alt); color: var(--text); }
.nav a.active { background: var(--surface-alt); color: var(--text); font-weight: 600; }

.topbar-right { display: flex; align-items: center; gap: .5rem; font-size: .88rem; }

main {
  max-width: 62rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

.page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

h1 { font-size: 1.5rem; margin: 0; letter-spacing: -.02em; }
h2 { font-size: 1.1rem; margin: 2rem 0 .75rem; }
h3 { font-size: .95rem; margin: 0 0 .5rem; }

.muted { color: var(--text-muted); }
.small { font-size: .87rem; }

/* ----------------------------------------------------------------- Karty */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow);
  margin-bottom: 1rem;
}

.card-tight { padding: .75rem .9rem; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; margin-bottom: 1.5rem; }

.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .8rem .9rem;
}

.stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.stat-label { font-size: .82rem; color: var(--text-muted); margin-top: .15rem; }
.stat.is-overdue .stat-value { color: var(--overdue); }
.stat.is-soon .stat-value { color: var(--soon); }

/* -------------------------------------------------------------- Pozycje */

.item {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .7rem .9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--radius);
  margin-bottom: .5rem;
  text-decoration: none;
  color: inherit;
}

.item:hover { background: var(--surface-alt); }
.item.overdue { border-left-color: var(--overdue); }
.item.soon    { border-left-color: var(--soon); }
.item.later   { border-left-color: var(--border); }
.item.undated { border-left-color: var(--border); border-left-style: dashed; }

.item-main { flex: 1; min-width: 0; }
.item-name { font-weight: 600; }
.item-meta { font-size: .84rem; color: var(--text-muted); margin-top: .1rem; }
.item-due { text-align: right; font-size: .87rem; white-space: nowrap; }
.item-due strong { display: block; font-size: .95rem; }
.item.overdue .item-due strong { color: var(--overdue); }
.item.soon .item-due strong { color: var(--soon); }

.badge {
  display: inline-block;
  padding: .1rem .45rem;
  border-radius: 99px;
  font-size: .76rem;
  background: var(--surface-alt);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.badge.overdue { background: var(--overdue-bg); color: var(--overdue); border-color: transparent; }
.badge.soon    { background: var(--soon-bg); color: var(--soon); border-color: transparent; }
.badge.added   { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

/* Pozycja katalogu, którą gospodarstwo już ma. Delikatne tło zamiast
   mocnego koloru: to informacja, nie ostrzeżenie. */
tr.is-added > td { background: var(--accent-soft); }

/* ------------------------------------------------------------ Formularze */

label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: .25rem; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], select, textarea {
  width: 100%;
  padding: .5rem .6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

textarea { min-height: 5rem; resize: vertical; }

.field { margin-bottom: 1rem; }
.field .hint { font-size: .82rem; color: var(--text-muted); margin-top: .25rem; font-weight: 400; }
.field .error { font-size: .84rem; color: var(--overdue); margin-top: .25rem; }
.field.has-error input, .field.has-error select { border-color: var(--overdue); }

.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 1rem; }

fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1rem; margin: 0 0 1rem; }
legend { font-size: .88rem; font-weight: 600; padding: 0 .35rem; }

.radio-line { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .5rem; font-weight: 400; }
.radio-line input { width: auto; margin-top: .25rem; }

/* Kratki wyboru odstępów przypomnień — mają się czytać jak zestaw etykiet,
   nie jak formularz podatkowy. */
.checks { display: flex; flex-wrap: wrap; gap: .4rem; }

.checks label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: 0;
  padding: .35rem .6rem;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: var(--surface);
  font-size: .88rem;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
}

.checks label:hover { background: var(--surface-alt); }
.checks input { width: auto; margin: 0; }
.checks label:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}

/* -------------------------------------------------------------- Przyciski */

.btn {
  display: inline-block;
  padding: .45rem .9rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .92rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover { background: var(--surface-alt); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.btn-primary:hover { filter: brightness(1.08); background: var(--accent); }
.btn-danger { color: var(--overdue); }
.btn-sm { padding: .25rem .55rem; font-size: .84rem; }
.btn-link { border: none; background: none; color: var(--accent); padding: 0; }

.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------- Tabele */

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--border); }
th { font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); }
.table-wrap { overflow-x: auto; }

/* Tabele rozkładają się na bloki „etykieta: wartość" dopiero na telefonie.
   Przewijanie w bok chowało kolumny — w katalogu poza ekranem lądował
   przycisk „Dodaj", czyli jedyna rzecz, po którą się tam wchodzi.
   Na tablecie tabela mieści się w całości, więc zostaje tabelą. */
@media (max-width: 40rem) {
  .table-stack table,
  .table-stack tbody,
  .table-stack tr,
  .table-stack td { display: block; width: auto; }

  /* Nagłówek znika: po rozłożeniu wiersza etykiety są przy wartościach.
     Tabele w tym projekcie nie mają <thead> — nagłówkiem jest pierwszy <tr>
     z komórkami <th> — więc ukrywamy jedno i drugie. */
  .table-stack thead,
  .table-stack th { display: none; }
  .table-stack tr:first-child:has(th) { display: none; }

  .table-stack { overflow-x: visible; }

  .table-stack tr {
    padding: .7rem 0;
    border-bottom: 1px solid var(--border);
  }

  .table-stack tr:last-child { border-bottom: 0; }

  .table-stack td {
    border: 0;
    padding: .12rem 0;
  }

  .table-stack td:empty { display: none; }

  .table-stack td[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--text-muted);
    font-size: .82rem;
  }

  /* Komórka z przyciskami dostaje odstęp i pełną szerokość */
  .table-stack td.cell-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding-top: .5rem;
  }

  .table-stack td.cell-actions .btn { flex: 0 0 auto; }
}

/* ----------------------------------------------------------------- Flash */

.flash {
  padding: .7rem .9rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: .93rem;
  word-break: break-word;
}

.flash.success { border-left: 4px solid var(--accent); }
.flash.error   { border-left: 4px solid var(--overdue); background: var(--overdue-bg); color: var(--overdue); }
.flash.info    { border-left: 4px solid var(--later); }

/* Sekcja operacji nieodwracalnych — ma być widoczna i wyraźnie oddzielona
   od reszty strony, żeby dało się ją znaleźć, ale nie kliknąć przypadkiem. */
.danger-zone {
  border-color: var(--overdue);
  border-left-width: 4px;
}

.empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

/* ------------------------------------------------------------ Logowanie */

.guest-wrap { max-width: 24rem; margin: 3rem auto; padding: 0 1rem; }
.guest-wrap .brand { display: block; text-align: center; font-size: 1.4rem; margin-bottom: 1.25rem; }

/* --------------------------------------------------------------- Drobiazgi */

.divider { height: 1px; background: var(--border); margin: 1.5rem 0; border: 0; }
.inline-form { display: inline; }
.tag-list { display: flex; gap: .35rem; flex-wrap: wrap; }

/* ------------------------------------------------------- Telefon i PWA */

/* Wcięcia pod notch i pasek gestów — istotne po dodaniu skrótu na ekran
   główny, bo aplikacja rysuje się wtedy na całej wysokości ekranu. */
.topbar-inner {
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}

main {
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
  padding-bottom: max(4rem, calc(3rem + env(safe-area-inset-bottom)));
}

/* Na wąskim ekranie menu zjadało ćwierć wysokości: sześć pozycji łamało się
   na cztery rzędy. Zamiast tego jeden rząd przewijany w poziomę — wszystkie
   pozycje zostają jednym dotknięciem od użytkownika. */
@media (max-width: 48rem) {
  .topbar-inner { gap: .5rem .75rem; }

  .brand { flex: 1 1 auto; }

  .nav {
    order: 3;
    flex: 0 0 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin: 0 -1rem;
    padding: 0 1rem .1rem;
  }

  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: 0 0 auto; }
}

/* Poniżej ~26rem nazwa gospodarstwa w pasku przestaje się mieścić obok
   nazwy konta i wylogowania. Jest widoczna na pulpicie, więc tu ustępuje. */
@media (max-width: 26rem) {
  .topbar-right .household-name { display: none; }
}

@media (max-width: 40rem) {
  .item { flex-direction: column; gap: .35rem; }
  .item-due { text-align: left; }
  .topbar-inner { padding: .5rem max(.75rem, env(safe-area-inset-left)); }
  .nav { margin: 0 -.75rem; padding: 0 .75rem .1rem; }
  main { padding: 1rem max(.75rem, env(safe-area-inset-left)) 3rem; }

  /* Cel dotknięcia: 44 px to minimum, przy którym trafia się palcem
     bez powiększania. Domyślne 34 px z wersji biurkowej to za mało. */
  .nav a,
  .btn:not(.btn-link) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav { gap: .15rem; }
  .nav a { padding: .5rem .7rem; }

  /* Safari na iOS powiększa stronę przy kliknięciu w pole o czcionce
     mniejszej niż 16 px i już z tego nie wraca. */
  input[type=text], input[type=email], input[type=password], input[type=number],
  input[type=date], input[type=search], select, textarea {
    font-size: 16px;
    min-height: 44px;
  }

  textarea { min-height: 6rem; }

  /* Przyciski w formularzach na całą szerokość — łatwiej trafić kciukiem */
  form > .actions .btn:not(.btn-link) { flex: 1 1 auto; }

  /* Odnośniki tekstowe („usuń", „wyczyść", „nie teraz") zostają wizualnie
     lekkie, ale dostają wysokość, w którą da się trafić palcem. */
  .btn-link {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
}

/* Po instalacji jako skrót nie ma paska adresu, więc górna belka
   przejmuje rolę nagłówka systemowego. */
@media (display-mode: standalone) {
  .topbar { padding-top: env(safe-area-inset-top); }
}