/* System wizualny panelu poczty.
   Przeniesiony z projektu Fakturowni (static/styl.css) - te same zmienne,
   te same nazwy klas, ten sam uklad z menu po lewej. Powod jest prosty:
   ten wyglad zostal juz przemyslany i sprawdzony w codziennym uzyciu,
   a dwa narzedzia tego samego wlasciciela nie powinny wygladac jak dwa
   rozne swiaty.
   Wyciete zostaly rzeczy, ktorych panel nie ma: paski zatwierdzania faktur,
   listy zdarzen, kolumny kwot.

   Zero javascriptu. Motyw wybiera sie odnosnikiem (serwer zapamietuje go
   w ciasteczku), a menu na telefonie odslania sie przez :focus-within.
   Dzieki temu regula CSP moze zostac scisla. */

/* --- motywy ---------------------------------------------------------- */

:root[data-motyw="ciemny"] {
  --tlo:#0f1216; --powierzchnia:#171b21; --powierzchnia-2:#1d222a;
  --ramka:#262c34; --tekst:#e6e9ee; --przygaszony:#8b95a3;
  --akcent:#3b82f6; --akcent-tlo:#1e3a5f;
  --ok:#22c55e; --ok-tlo:#14351f; --uwaga:#f59e0b; --uwaga-tlo:#3a2a0c;
  --alarm:#ef4444; --alarm-tlo:#3a1717; --cien:0 1px 2px rgba(0,0,0,.4);
  --tekst-na-akcencie:#fff;
  color-scheme:dark;
}
:root[data-motyw="jasny"] {
  --tlo:#f4f6f8; --powierzchnia:#ffffff; --powierzchnia-2:#f8fafc;
  --ramka:#dfe3e8; --tekst:#16202a; --przygaszony:#5b6670;
  --akcent:#1d4ed8; --akcent-tlo:#e0eaff;
  --ok:#15803d; --ok-tlo:#e3f6e9; --uwaga:#b45309; --uwaga-tlo:#fdf1dc;
  --alarm:#b91c1c; --alarm-tlo:#fbe6e6; --cien:0 1px 2px rgba(16,24,40,.06);
  --tekst-na-akcencie:#fff;
  color-scheme:light;
}

/* Zanim ktokolwiek wybierze motyw, idziemy za ustawieniem systemu.
   Bez tego pierwsze wejscie zawsze bylo by jasne, takze u kogos, kto ma
   caly system ciemny - a przelacznik jest dopiero po zalogowaniu. */
:root:not([data-motyw]) {
  --tlo:#f4f6f8; --powierzchnia:#ffffff; --powierzchnia-2:#f8fafc;
  --ramka:#dfe3e8; --tekst:#16202a; --przygaszony:#5b6670;
  --akcent:#1d4ed8; --akcent-tlo:#e0eaff;
  --ok:#15803d; --ok-tlo:#e3f6e9; --uwaga:#b45309; --uwaga-tlo:#fdf1dc;
  --alarm:#b91c1c; --alarm-tlo:#fbe6e6; --cien:0 1px 2px rgba(16,24,40,.06);
  --tekst-na-akcencie:#fff;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw]) {
    --tlo:#0f1216; --powierzchnia:#171b21; --powierzchnia-2:#1d222a;
    --ramka:#262c34; --tekst:#e6e9ee; --przygaszony:#8b95a3;
    --akcent:#3b82f6; --akcent-tlo:#1e3a5f;
    --ok:#22c55e; --ok-tlo:#14351f; --uwaga:#f59e0b; --uwaga-tlo:#3a2a0c;
    --alarm:#ef4444; --alarm-tlo:#3a1717; --cien:0 1px 2px rgba(0,0,0,.4);
    color-scheme:dark;
  }
}

* { box-sizing:border-box; }

body {
  margin:0; background:var(--tlo); color:var(--tekst);
  font:13.5px/1.5 ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* --- pola formularzy: jedna regula na caly system --------------------- */

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
select, textarea {
  background:var(--powierzchnia-2); color:var(--tekst);
  border:1px solid var(--ramka); border-radius:4px;
  padding:.45rem .5rem; font:inherit; max-width:100%;
}
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus {
  outline:none; border-color:var(--akcent);
  box-shadow:0 0 0 2px var(--akcent-tlo);
}
input::placeholder, textarea::placeholder { color:var(--przygaszony); }
textarea { width:100%; min-height:5rem; }

/* Pole na tyle szerokie, ile trzeba - nie na cala szerokosc ekranu.
   Adres pocztowy potrzebuje 22 znakow, data dziesieciu; rozciagniecie
   obu do tysiaca pikseli sprawia, ze formularz wyglada na niedokonczony. */
.pole-adres { width:min(100%, 24rem); }
.pole-data  { width:9rem; }
.pole-krotkie { width:12rem; }

label { display:block; margin:.7rem 0 .25rem; font-size:12px; color:var(--przygaszony); }
label.w-linii-etykieta { display:inline-flex; align-items:center; gap:.4rem; margin:.7rem 0 0; }

/* --- uklad ------------------------------------------------------------ */

.uklad { display:grid; grid-template-columns:220px 1fr; min-height:100vh; }

aside {
  background:var(--powierzchnia); border-right:1px solid var(--ramka);
  display:flex; flex-direction:column;
}
.marka { display:flex; align-items:center; gap:.6rem; padding:.9rem 1rem;
  border-bottom:1px solid var(--ramka); }
.marka .znak { width:26px; height:26px; border-radius:6px; background:var(--akcent);
  display:grid; place-items:center; color:var(--tekst-na-akcencie); font-weight:700; font-size:13px; }
.marka b { font-size:14px; letter-spacing:.2px; }
.marka small { display:block; color:var(--przygaszony); font-size:11px; font-weight:400; }

nav.menu { padding:.6rem .5rem; display:flex; flex-direction:column; gap:1px; }
nav.menu .grupa { color:var(--przygaszony); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.08em; padding:.8rem .6rem .3rem; }
nav.menu a { display:flex; align-items:center; gap:.55rem; padding:.42rem .6rem;
  border-radius:6px; color:var(--tekst); text-decoration:none; font-size:13px; }
nav.menu a:hover { background:var(--powierzchnia-2); }
nav.menu a.wybrany { background:var(--akcent-tlo); color:var(--akcent); font-weight:600; }
nav.menu a.podmenu { padding-left:1.5rem; font-size:12.5px; color:var(--przygaszony); }
nav.menu a.podmenu.wybrany { color:var(--akcent); }
nav.menu a .licznik { margin-left:auto; background:var(--uwaga-tlo); color:var(--uwaga);
  font-size:10.5px; font-weight:700; padding:.05rem .38rem; border-radius:999px; }

header { display:flex; align-items:center; gap:1rem; padding:.65rem 1.1rem;
  border-bottom:1px solid var(--ramka); background:var(--powierzchnia); }
.rozpychacz { margin-left:auto; }
.w-linii { display:inline-flex; align-items:center; }
.awatar { width:26px; height:26px; border-radius:50%; background:var(--akcent-tlo);
  color:var(--akcent); display:grid; place-items:center; font-weight:700; font-size:12px; }

main { padding:1.1rem; }
.tytul { display:flex; align-items:baseline; gap:.7rem; margin:0 0 .9rem; }
.tytul h1 { font-size:17px; margin:0; font-weight:600; }
.tytul span { color:var(--przygaszony); font-size:12.5px; }
/* Powrot stoi PRZED tytulem, nie na koncu ekranu - zeby dalo sie go znalezc
   bez przewijania dlugiej listy. Wyrownany do linii pisma tytulu. */
.tytul .wstecz { align-self:center; padding:.2rem .55rem; color:var(--przygaszony); }
.tytul .wstecz:hover { color:var(--tekst); }
h2 { font-size:13.5px; margin:1.4rem 0 .6rem; color:var(--przygaszony);
  text-transform:uppercase; letter-spacing:.06em; }

/* --- przyciski -------------------------------------------------------- */

.przycisk, button {
  background:transparent; border:1px solid var(--ramka); color:var(--tekst);
  padding:.35rem .7rem; border-radius:6px; cursor:pointer; font-size:12.5px;
  text-decoration:none; display:inline-block;
}
.przycisk:hover, button:hover { background:var(--powierzchnia-2); }
button.glowny, .przycisk.glowny {
  background:var(--akcent); border-color:var(--akcent); color:var(--tekst-na-akcencie);
}
button.glowny:hover, .przycisk.glowny:hover { filter:brightness(1.08); }
button.grozny { border-color:var(--alarm); color:var(--alarm); }
button.grozny:hover { background:var(--alarm-tlo); }
form { margin:0; }
form + form { margin-top:.5rem; }

/* --- karty ------------------------------------------------------------ */

.kafle { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:.7rem; }
.karta { background:var(--powierzchnia); border:1px solid var(--ramka);
  border-radius:8px; box-shadow:var(--cien); margin-bottom:.8rem; }
.karta > .naglowek { display:flex; align-items:center; gap:.45rem;
  padding:.6rem .8rem; border-bottom:1px solid var(--ramka); font-size:12.5px;
  color:var(--przygaszony); font-weight:600; }
.karta > .naglowek .prawa { margin-left:auto; font-size:11.5px; font-weight:400; }
.karta > .tresc { padding:.8rem; }
/* Dwa rodzaje kart pod jedna klasa: z naglowkiem (wypelnienie daje .tresc)
   i bez niego - formularze wkladaja tresc wprost do .karta. Rozroznienie
   przez :has(), zeby szablony nie musialy o tym wiedziec. */
.karta:not(:has(> .naglowek)) { padding:.9rem; }

.duza { font-size:26px; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; }
.pod { color:var(--przygaszony); font-size:12px; margin-top:.2rem; }
.przygaszone { color:var(--przygaszony); }
.numer { font-weight:600; }

.pigulka { display:inline-block; font-size:11px; font-weight:700; padding:.1rem .45rem;
  border-radius:999px; }
.p-ok { background:var(--ok-tlo); color:var(--ok); }
.p-uwaga { background:var(--uwaga-tlo); color:var(--uwaga); }
.p-alarm { background:var(--alarm-tlo); color:var(--alarm); }
.p-cicha { background:var(--powierzchnia-2); color:var(--przygaszony); }

/* --- tabela ----------------------------------------------------------- */

.tabela-scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--przygaszony); padding:.45rem .8rem; border-bottom:1px solid var(--ramka); font-weight:700; }
td { padding:.5rem .8rem; border-bottom:1px solid var(--ramka); vertical-align:middle; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:var(--powierzchnia-2); }
td a { color:var(--akcent); text-decoration:none; }
td a:hover { text-decoration:underline; }
.liczba { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* Kolumna z dzialaniem: waska, dosunieta do prawej, przycisk mniejszy niz
   w formularzu. Przycisk pod nazwa zamiast obok niej podwaja wysokosc
   wiersza i rozbija liste na pietra. */
td.dzialanie, th.dzialanie { text-align:right; width:1%; white-space:nowrap; }

/* Lista, w ktorej dzialanie ma stac TUZ OBOK nazwy, a nie przy prawej
   krawedzi ekranu. Tabela zwezona do tresci zamiast rozciagnietej na cala
   szerokosc - przy jednym krotkim aliasie przycisk ladowal pol ekranu dalej,
   a na telefonie wymuszalo to przewijanie w bok. */
/* Kolumna wypelniajaca pochlania cala wolna szerokosc, przez co nazwa
   i przycisk stoja obok siebie po lewej. Proba oparta na 'width:auto'
   dla tabeli nie zadziala - tabela i tak rozciagala sie na cala karte.
   Pusta komorka jest brzydka w kodzie, ale jest jedynym sposobem, ktory
   zachowuje sie tak samo w kazdej przegladarce. */
table.zwarta td { padding:.3rem .5rem; }
table.zwarta td:first-child { padding-left:0; }
table.zwarta td.dzialanie { text-align:left; padding-right:.5rem; width:1%; }
table.zwarta td.wypelniacz { width:100%; padding:0; }
table.zwarta tbody tr:hover { background:transparent; }
td.dzialanie button, td.dzialanie .przycisk { padding:.12rem .5rem; font-size:11.5px; }
table form { display:inline; }
th.liczba { text-align:right; }

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

.komunikat { padding:.55rem .8rem; border-radius:6px; margin:0 0 .8rem; font-size:13px; }
.komunikat.blad { background:var(--alarm-tlo); color:var(--alarm); }
.komunikat.ok   { background:var(--ok-tlo); color:var(--ok); }

code { font-size:12px; word-break:break-all; color:var(--przygaszony); }

/* --- ekran logowania -------------------------------------------------- */

.logowanie { max-width:22rem; margin:12vh auto; padding:0 1rem; }
.logowanie .marka { border:0; justify-content:center; margin-bottom:1rem; }

/* --- waski ekran ------------------------------------------------------ */

#menu-przycisk { display:none; }
@media (max-width:900px){
  .uklad { grid-template-columns:1fr; }
  #menu-przycisk { display:inline-flex; }
  aside {
    position:fixed; top:0; left:0; bottom:0; z-index:30;
    width:16rem; max-width:85vw; overflow-y:auto;
    transform:translateX(-100%);
    transition:transform .15s ease;
  }
  /* Bez javascriptu menu odslania sie klawiszem Tab (wejscie w odnosnik
     wewnatrz) oraz przyciskiem, ktory jest odnosnikiem do #menu. */
  aside:focus-within, aside:target { transform:translateX(0); box-shadow:var(--cien); }
  main { padding:.9rem; }
}