/* Duratio Desktop, warstwa interfejsu. Tokeny marki siedzą w marka.css. */

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--tlo);color:var(--pismo);
  font-family:var(--font-tekst);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  user-select:none;
}
input,select,textarea,td,th{user-select:text}

/* ---------- szkielet ---------- */
.aplikacja{display:grid;grid-template-columns:216px 1fr;height:100vh}

.bok{
  background:var(--karta);border-right:1px solid var(--linia);
  display:flex;flex-direction:column;padding:14px 0;
}
.znak{
  font-family:var(--font-tytul);font-size:19px;font-weight:500;letter-spacing:-.01em;
  padding:2px 18px 2px;display:flex;align-items:baseline;gap:8px;
}
.znak .wersja{font-family:var(--font-liczby);font-size:11px;color:var(--pismo-3);letter-spacing:0}
.menu{margin-top:18px;display:flex;flex-direction:column}
.menu button{
  appearance:none;background:none;border:0;border-left:3px solid transparent;
  font:inherit;color:var(--pismo-2);text-align:left;padding:9px 18px;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.menu button:hover{background:var(--tlo);color:var(--pismo)}
.menu button[aria-current="true"]{
  border-left-color:var(--akcent);color:var(--pismo);font-weight:500;background:var(--akcent-tlo);
}
.menu .licznik{font-family:var(--font-liczby);font-size:11px;color:var(--pismo-3)}
.bok .stopka{margin-top:auto;padding:12px 18px 0;border-top:1px solid var(--linia);font-size:11px;color:var(--pismo-3);line-height:1.45}
.bok .stopka b{color:var(--pismo-2);font-weight:500}

.tresc{overflow:auto;padding:22px 26px 40px}
.naglowek{display:flex;align-items:flex-start;gap:16px;margin-bottom:18px}
.naglowek h1{font-family:var(--font-tytul);font-size:22px;font-weight:500;margin:0 auto 2px 0;letter-spacing:-.01em}
.naglowek p{margin:0;color:var(--pismo-2);font-size:13px}

/* ---------- przyciski ---------- */
.przycisk{
  appearance:none;font:inherit;font-weight:500;cursor:pointer;
  background:var(--akcent);color:#fff;border:1px solid var(--akcent);
  padding:7px 14px;border-radius:var(--promien);white-space:nowrap;
}
.przycisk:hover{background:var(--akcent-ciemny);border-color:var(--akcent-ciemny)}
.przycisk.drugi{background:var(--karta);color:var(--pismo);border-color:var(--linia-mocna)}
.przycisk.drugi:hover{background:var(--tlo);border-color:var(--pismo-3)}
.przycisk.maly{padding:4px 10px;font-size:13px}
.rzad{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- tabela ---------- */
/* overflow:auto zamiast hidden: przy wąskim oknie tabela dostaje własny suwak
   poziomy, zamiast po cichu ucinać ostatnią kolumnę. Zaokrąglenie rogów działa
   tak samo, bo auto też tworzy kontekst przycinania. */
.ramka{background:var(--karta);border:1px solid var(--linia);border-radius:var(--promien);overflow:auto;box-shadow:var(--cien)}
.ramka table{min-width:min(100%,860px)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{
  text-align:left;font-weight:500;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--pismo-3);background:var(--tlo);padding:8px 12px;border-bottom:1px solid var(--linia);
  white-space:nowrap;
}
td{padding:9px 12px;border-bottom:1px solid var(--linia);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--akcent-tlo)}
.liczba{font-family:var(--font-liczby);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.kod{font-family:var(--font-liczby);font-size:12.5px;color:var(--pismo-2)}
.glowna{font-weight:500}
.drobne{font-size:12px;color:var(--pismo-3)}

/* ---------- znaczniki stanu ---------- */
.stan{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;
  padding:2px 8px;border-radius:10px;white-space:nowrap;
}
.stan::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.stan-ok{color:var(--ok);background:var(--ok-tlo-slabe)}
.stan-uwaga{color:var(--uwaga);background:var(--uwaga-tlo-slabe)}
.stan-przekroczenie{color:var(--blad);background:var(--blad-tlo-slabe)}
.stan-brak-danych{color:var(--pusty);background:var(--pusty-tlo)}

/* pasek wypełnienia resursu, wypełnienia w kolorach kanonu */
.pasek{height:5px;border-radius:3px;background:var(--linia);overflow:hidden;min-width:56px;margin-top:4px}
.pasek i{display:block;height:100%;border-radius:3px}
.pasek.ok i{background:var(--ok-tlo)}
.pasek.uwaga i{background:var(--uwaga-tlo)}
.pasek.przekroczenie i{background:var(--blad)}

/* ---------- komunikaty ---------- */
.pusto{padding:44px 24px;text-align:center;color:var(--pismo-2)}
.pusto h2{font-family:var(--font-tytul);font-weight:500;font-size:17px;margin:0 0 6px}
.pusto p{margin:0 auto 16px;max-width:52ch}
.uwaga-blok{
  background:var(--uwaga-tlo);color:var(--uwaga-tekst-na-tle);
  padding:8px 12px;border-radius:var(--promien);font-size:13px;margin-bottom:14px;
}
.blad-blok{
  background:var(--blad-tlo-slabe);color:var(--blad);border:1px solid var(--blad);
  padding:8px 12px;border-radius:var(--promien);font-size:13px;margin-bottom:14px;
}

/* ---------- karta urządzenia ---------- */
.karta-gora{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-bottom:20px;align-items:start}
.kafel,.dane-urzadzenia{
  background:var(--karta);border:1px solid var(--linia);border-radius:var(--promien);
  padding:14px 16px;box-shadow:var(--cien);
}
.kafel-etykieta{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--pismo-3);margin-bottom:6px}
.kafel-wynik{font-family:var(--font-liczby);font-size:34px;font-weight:500;line-height:1.05;letter-spacing:-.02em}
.kafel-opis{font-size:12.5px;color:var(--pismo-2);margin-top:2px}
.kafel-brak{font-family:var(--font-liczby);font-size:15px;color:var(--pusty);margin:6px 0 8px}
.stan-tekst-ok{color:var(--ok)}
.stan-tekst-uwaga{color:var(--uwaga)}
.stan-tekst-przekroczenie{color:var(--blad)}
.stan-tekst-brak-danych{color:var(--pusty)}
.pasek.duzy{height:8px;margin:8px 0 2px}

dl.pary{margin:10px 0 12px;font-size:13px}
dl.pary div{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px solid var(--linia)}
dl.pary div:last-child{border-bottom:0}
dl.pary dt{color:var(--pismo-3);margin:0}
dl.pary dd{margin:0;text-align:right;font-family:var(--font-liczby);font-size:12.5px}
dl.pary.szeroko dd{font-family:var(--font-tekst);font-size:13px}
dl.pary.szeroko .kod,dl.pary .kod{font-family:var(--font-liczby)}

.sekcja{margin-bottom:24px}
.sekcja-naglowek{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.sekcja-naglowek h2{font-family:var(--font-tytul);font-size:15px;font-weight:500;margin:0 auto 0 0}
.pod-tabela{margin:8px 2px 0}
.ostrzezenie{color:var(--blad)}
.rzad.srodek{justify-content:center}
table.klikalna tbody tr{cursor:pointer}
.uwaga-blok.maly{font-size:12px;padding:6px 10px;margin:8px 0 0}

/* wykres przebiegu, rysowany bez bibliotek z sieci */
.wykres{width:100%;height:auto;background:var(--karta);border:1px solid var(--linia);
  border-radius:var(--promien);margin-bottom:10px;padding:6px}
.wykres .przebieg{fill:none;stroke:var(--akcent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.wykres .punkty circle{fill:var(--akcent)}
.wykres .prog-uwaga{stroke:var(--uwaga-tlo);stroke-width:1;stroke-dasharray:4 3}
.wykres .prog-blad{stroke:var(--blad);stroke-width:1;stroke-dasharray:4 3}
.wykres .opis-progu{font-family:var(--font-liczby);font-size:11px;fill:var(--pismo-3)}
.wykres .os{font-family:var(--font-liczby);font-size:11px;fill:var(--pismo-3)}

/* ---------- formularz w oknie ---------- */
dialog{
  border:1px solid var(--linia-mocna);border-radius:var(--promien);padding:0;
  background:var(--karta);color:var(--pismo);width:min(720px,92vw);box-shadow:0 8px 28px rgba(11,15,20,.18);
}
dialog::backdrop{background:rgba(11,15,20,.35)}
dialog .okno-naglowek{padding:14px 20px;border-bottom:1px solid var(--linia);font-family:var(--font-tytul);font-size:16px;font-weight:500}
dialog .okno-tresc{padding:18px 20px;max-height:64vh;overflow:auto}
dialog .okno-stopka{padding:12px 20px;border-top:1px solid var(--linia);display:flex;gap:8px;justify-content:flex-end;background:var(--tlo)}
/* Etykieta i pole leżą w dwóch wspólnych wierszach siatki, więc gdy jeden opis
   zawinie się do dwóch linii, pola i tak stoją równo. Bez tego rząd rozjeżdża się
   dokładnie o wysokość tego jednego zawinięcia. */
.siatka{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;
  grid-auto-rows:auto auto;align-items:end}
@supports (grid-template-rows:subgrid){
  .siatka{align-items:stretch}
  .siatka > .pole{display:grid;grid-template-rows:subgrid;grid-row:span 2;gap:4px}
  .siatka > .pole > label{align-self:end}
}
.pole{display:flex;flex-direction:column;gap:4px}
.pole label{font-size:12.5px;font-weight:500;color:var(--pismo-2)}
.pole .podpowiedz{font-weight:400;color:var(--pismo-3);font-size:11.5px}
input,select,textarea{
  font:inherit;padding:6px 9px;border:1px solid var(--linia-mocna);border-radius:4px;
  background:var(--karta);color:var(--pismo);width:100%;
}
input[type="number"],input[inputmode="numeric"]{font-family:var(--font-liczby)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--akcent);outline-offset:-1px;border-color:var(--akcent)}
fieldset{border:1px solid var(--linia);border-radius:var(--promien);padding:14px;margin:0 0 14px}
legend{font-size:12.5px;font-weight:500;color:var(--pismo-2);padding:0 6px}

/* komunikat informacyjny, spokojny; pomarańcz zostaje na stany wymagające działania */
.info-blok{
  background:var(--akcent-tlo);color:var(--pismo);border:1px solid var(--akcent);
  padding:8px 12px;border-radius:var(--promien);font-size:13px;margin-bottom:14px;
}
.wykres{height:200px}
.wykres .obszar{fill:var(--akcent);opacity:.10}
.wykres .wartosc{font-family:var(--font-liczby);font-size:10px;fill:var(--akcent);font-weight:500}

/* ---------- ekrany terminarza, dokumentów i ustawień ---------- */
.odstep{margin-bottom:18px}
.ramka-naglowek{
  display:flex;align-items:center;gap:10px;padding:11px 14px;
  border-bottom:1px solid var(--linia);background:var(--tlo);
}
.ramka-naglowek h2{font-family:var(--font-tytul);font-size:14px;font-weight:500;margin:0}
.ramka-naglowek .licznik{
  font-family:var(--font-liczby);font-size:11.5px;color:var(--pismo-3);
  background:var(--karta);border:1px solid var(--linia);border-radius:20px;padding:1px 7px;
}
.tresc-ramki{padding:14px}
.tresc-ramki p{margin:0 0 10px;font-size:13.5px;color:var(--pismo-2);max-width:78ch}
.tresc-ramki p:last-child{margin-bottom:0}
.tresc-ramki .siatka{margin:12px 0 14px}
/* Tabela dwukolumnowa w ustawieniach: opis po lewej, treść po prawej. */
.tresc-ramki .kv td:first-child{width:190px;color:var(--pismo-3);font-size:12.5px}
.tresc-ramki .kv td{border-bottom:1px solid var(--linia);vertical-align:top}
.tresc-ramki .kv tbody tr:last-child td{border-bottom:0}
.tresc-ramki .kv tbody tr:hover{background:transparent}

/* Pasek demo. Odwiedzający ma wiedzieć, gdzie jest i jak wrócić. */
.demo-pasek{
  position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:16px;align-items:center;
  justify-content:space-between;flex-wrap:wrap;
  background:var(--pismo);color:#fff;padding:8px 16px;font-size:12.5px;line-height:1.4;
}
.demo-pasek b{font-weight:600}
.demo-pasek a{color:#fff;text-decoration:underline;white-space:nowrap}
body.podglad .demo-pasek{display:none}
.aplikacja{height:calc(100vh - 40px)}
@media (max-width:720px){.aplikacja{height:calc(100vh - 72px)}}