/* „Twoja salka w Porcie" — jeden arkusz, zero zaleznosci.
 *
 * Telefon jest pierwszy: najemca oglada to w kurtce, jedna reka, czesto
 * na slabym zasiegu. Stad duze cyfry, wysoki kontrast, brak animacji
 * i brak czegokolwiek, co trzeba dociagac z sieci.
 *
 * Motyw jasny i ciemny sterowany ustawieniem telefonu — pracownia bywa
 * ciemna, a bialy ekran w ciemnej sali oslepia.
 */

:root {
  --tlo: #ffffff;
  --tlo-karty: #f4f6f8;
  --tekst: #10161c;
  --tekst-slaby: #59636e;
  --akcent: #0b6b53;
  --akcent-tlo: #d8efe7;
  --ostrzezenie: #8a4b00;
  --ostrzezenie-tlo: #fdeccd;
  --blad: #a01b1b;
  --blad-tlo: #fbe0e0;
  --kreska: #d3dae1;
  --weekend: #eef1f4;
  --slupek: #0b6b53;
  --slupek-przerwa: #8a4b00;
  --brak: #9aa4ae;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tlo: #101418;
    --tlo-karty: #1a2026;
    --tekst: #eef2f6;
    --tekst-slaby: #9aa7b3;
    --akcent: #4ecfa6;
    --akcent-tlo: #14312a;
    --ostrzezenie: #ffbe6a;
    --ostrzezenie-tlo: #3a2a10;
    --blad: #ff8f8f;
    --blad-tlo: #3a1717;
    --kreska: #2b343d;
    --weekend: #171d23;
    --slupek: #4ecfa6;
    --slupek-przerwa: #ffbe6a;
    --brak: #5d6a76;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

main {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
}

h1 { font-size: 1.4rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }

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

/* --------------------------------------------------------------- pasek gorny */

.pasek {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .7rem 1rem;
  background: var(--tlo-karty); border-bottom: 1px solid var(--kreska);
}
.marka { font-weight: 700; text-decoration: none; color: var(--tekst); }
.wyloguj { margin: 0; }
.link {
  background: none; border: 0; color: var(--akcent);
  font: inherit; cursor: pointer; padding: .3rem; text-decoration: underline;
}

.menu {
  display: flex; gap: .25rem; flex-wrap: wrap;
  padding: .5rem 1rem; background: var(--tlo-karty);
  border-bottom: 1px solid var(--kreska);
}
.menu a {
  padding: .4rem .7rem; border-radius: .4rem; text-decoration: none;
  background: var(--tlo); border: 1px solid var(--kreska); font-size: .95rem;
}
.menu-etykieta {
  align-self: center; margin-right: .4rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tekst-slaby);
}

/* Pasek „to tylko podglad" — wlasciciel pracowni oglada te same ekrany
   co najemca, wiec musi wiedziec, na czyim ekranie stoi. */
.pasek-podgladu {
  margin: 0 0 1rem; padding: .6rem .8rem; border-radius: .4rem;
  background: var(--ostrzezenie-tlo); color: var(--ostrzezenie);
  font-size: .9rem; display: flex; gap: .8rem;
  flex-wrap: wrap; justify-content: space-between; align-items: center;
}
.pasek-podgladu a { color: inherit; font-weight: 700; }

.stopka {
  padding: 1rem; text-align: center;
  color: var(--tekst-slaby); font-size: .85rem;
  border-top: 1px solid var(--kreska);
}

/* --------------------------------------------------------------- ekran glowny */

.glowna { margin-bottom: 1.2rem; }
.okres { margin: 0; color: var(--tekst-slaby); font-size: 1rem; }

/* Kwota jest najwiekszym elementem ekranu — to pierwsza rzecz, ktora
 * najemca ma zobaczyc, i jedyna, ktora realnie studzi zuzycie. */
.kwota {
  margin: .1rem 0 .2rem;
  font-size: clamp(2.6rem, 14vw, 4rem);
  font-weight: 700; line-height: 1.05;
  letter-spacing: -0.02em;
}
.kwota.brak { color: var(--tekst-slaby); font-size: clamp(1.6rem, 8vw, 2.4rem); }
.pod-kwota { margin: 0; font-size: 1.05rem; color: var(--tekst-slaby); }

.pasek-teraz {
  margin-top: .8rem; padding-top: .6rem;
  border-top: 1px solid var(--kreska);
  font-size: .95rem; color: var(--tekst-slaby);
}
.ostrzezenie { color: var(--ostrzezenie); font-weight: 600; }

.drobne { font-size: .85rem; color: var(--tekst-slaby); }
.uwaga {
  background: var(--ostrzezenie-tlo); color: var(--ostrzezenie);
  padding: .5rem .7rem; border-radius: .4rem; font-size: .9rem;
}
.pusto { color: var(--tekst-slaby); }

/* --------------------------------------------------------------- przelacznik */

.miesiace { display: flex; gap: 1rem; margin: .5rem 0; font-size: .95rem; }

.przelacznik { display: flex; gap: .3rem; margin: .8rem 0; }
.przelacznik a {
  padding: .45rem 1.2rem; border: 1px solid var(--kreska);
  border-radius: .4rem; text-decoration: none; color: var(--tekst);
  background: var(--tlo-karty); font-weight: 600;
}
.przelacznik a.wybrany {
  background: var(--akcent); border-color: var(--akcent); color: var(--tlo);
}

/* --------------------------------------------------------------- kalendarz */

.kalendarz { width: 100%; border-collapse: collapse; table-layout: fixed; }
.kalendarz th {
  font-size: .75rem; color: var(--tekst-slaby); font-weight: 600;
  padding: .3rem 0; text-transform: uppercase;
}
.kalendarz th.weekend, .kalendarz td.weekend { background: var(--weekend); }
.kalendarz td {
  border: 1px solid var(--kreska); height: 3.4rem;
  vertical-align: top; padding: 0;
}
.kalendarz td.poza { border: 0; background: transparent; }
.kalendarz td a {
  display: block; height: 100%; padding: .2rem .25rem;
  text-decoration: none; color: var(--tekst);
}
.kalendarz .numer {
  display: block; font-size: .7rem; color: var(--tekst-slaby); line-height: 1.1;
}
.kalendarz .wartosc {
  display: block; font-size: .95rem; font-weight: 600; line-height: 1.2;
  margin-top: .15rem; overflow: hidden; text-overflow: ellipsis;
}
/* „Nie wiem" musi wygladac inaczej niz zmierzone zero — to sa dwie rozne rzeczy. */
.kalendarz .wartosc.brak { color: var(--brak); font-weight: 400; }
.kalendarz .znacznik-luki { font-size: .7rem; color: var(--brak); }
.kalendarz td.pusty { background: var(--tlo-karty); }
.kalendarz td.pusty .numer { color: var(--brak); }
.kalendarz td.wybrany-dzien { outline: 2px solid var(--akcent); outline-offset: -2px; }

/* --------------------------------------------------------------- wykres */

.rozpiska {
  margin-top: 1.2rem; padding: .8rem;
  background: var(--tlo-karty); border-radius: .5rem;
}
.rozpiska h2 { margin-top: 0; }
.wykres { width: 100%; height: auto; display: block; }
.wykres-os { stroke: var(--kreska); stroke-width: 1.5; }
.slupek { fill: var(--slupek); }
.slupek-przerwa { fill: var(--slupek-przerwa); }
.slupek-brak { fill: var(--brak); }
.podpis-os { fill: var(--tekst-slaby); font-size: 34px; }
.podpis-brak { fill: var(--brak); font-size: 38px; font-weight: 700; }
.suma-dnia { font-size: 1.05rem; font-weight: 600; margin: .6rem 0 .2rem; }

/* --------------------------------------------------------------- listy i tabele */

.lista { width: 100%; border-collapse: collapse; margin: .5rem 0; }
.lista td, .lista th {
  padding: .5rem .4rem; border-bottom: 1px solid var(--kreska);
  text-align: left; vertical-align: top;
}
.lista th { font-size: .8rem; color: var(--tekst-slaby); text-transform: uppercase; }
.lista .nazwa { font-weight: 600; }
.lista .liczba { text-align: right; white-space: nowrap; }
.lista tfoot td { font-weight: 700; border-top: 2px solid var(--kreska); border-bottom: 0; }
.wiersz-uwaga { background: var(--ostrzezenie-tlo); }

.linki { display: flex; gap: 1.2rem; margin-top: 1.5rem; flex-wrap: wrap; }
.lista-salek { padding-left: 1.2rem; font-size: 1.1rem; line-height: 2; }

/* --------------------------------------------------------------- kafelki admina */

.kafelki {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.kafelek {
  display: block; padding: .8rem; border-radius: .5rem;
  background: var(--tlo-karty); border: 1px solid var(--kreska);
  text-decoration: none; color: var(--tekst);
}
.kafelek.techniczny { border-style: dashed; }
.kafelek h2 { margin: 0 0 .4rem; font-size: .95rem; color: var(--tekst-slaby); }
.kafelek-kwota { margin: 0; font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.kafelek-kwota.brak { color: var(--tekst-slaby); }
.kafelek-kwh { margin: .1rem 0 .4rem; color: var(--tekst-slaby); font-size: .9rem; }
.kafelek-stan { margin: 0; font-size: .8rem; color: var(--tekst-slaby); }
.kafelek-stan.zle { color: var(--ostrzezenie); font-weight: 600; }

/* --------------------------------------------------------------- formularze */

.formularz { max-width: 24rem; }
.formularz label { display: block; margin: .8rem 0 .25rem; font-weight: 600; }
.formularz input[type=email],
.formularz input[type=password],
.formularz input[type=text] {
  width: 100%; padding: .6rem; font: inherit;
  border: 1px solid var(--kreska); border-radius: .4rem;
  background: var(--tlo); color: var(--tekst);
}
.pole-wyboru { font-weight: 400 !important; display: flex !important; gap: .5rem; align-items: center; }

button {
  margin-top: 1rem; padding: .6rem 1.2rem; font: inherit; font-weight: 600;
  border: 0; border-radius: .4rem; background: var(--akcent); color: var(--tlo);
  cursor: pointer;
}
button.ostroznie { background: var(--blad); }

.formularz-w-linii {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: end;
  margin: .6rem 0 1.2rem;
}
.formularz-w-linii input, .formularz-w-linii select {
  padding: .5rem; font: inherit; border: 1px solid var(--kreska);
  border-radius: .4rem; background: var(--tlo); color: var(--tekst);
}
.formularz-w-linii label { display: flex; flex-direction: column; font-size: .8rem; gap: .2rem; }
.formularz-w-linii button { margin-top: 0; }

/* --------------------------------------------------------------- komunikaty */

.komunikat { padding: .6rem .8rem; border-radius: .4rem; margin: .6rem 0; }
.komunikat.blad { background: var(--blad-tlo); color: var(--blad); }
.komunikat.sukces { background: var(--akcent-tlo); color: var(--akcent); }
.komunikat.info { background: var(--tlo-karty); color: var(--tekst); }
.blad-tekst { color: var(--blad); display: block; }

.znacznik { font-size: .85rem; font-weight: 600; white-space: nowrap; }
.znacznik.aktywne { color: var(--akcent); }
.znacznik.wyslano { color: var(--ostrzezenie); }
.znacznik.niewyslane { color: var(--tekst-slaby); }

.salka-dostepy, .salka-stawki {
  margin-bottom: 1.5rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--kreska);
}
.akcje { display: flex; gap: .4rem; flex-wrap: wrap; }
.akcje form { margin: 0; }
.akcje button { margin-top: 0; padding: .35rem .7rem; font-size: .85rem; }

@media (max-width: 30rem) {
  .lista td, .lista th { padding: .4rem .2rem; font-size: .9rem; }
  .akcje { flex-direction: column; }
}