:root {
  --atrament: #0f1b2d;
  --atrament-2: #1b2a41;
  --plotno: #edf0f4;
  --karta: #ffffff;
  --linia: #d8dee7;
  --linia-mocna: #b8c2d0;
  --tekst: #16202f;
  --tekst-2: #5b6878;
  --sygnal: #c2670a;
  --sygnal-tlo: #fdf3e6;
  --zielen: #0f766e;
  --zielen-tlo: #e6f2f1;
  --alarm: #b42318;
  --alarm-tlo: #fdecea;
  --niebieski: #1f5fa8;
  --niebieski-tlo: #e9f0f9;
  --r: 4px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--plotno);
  color: var(--tekst);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
}

a { color: var(--niebieski); }
h1, h2, h3 { margin: 0; font-weight: 620; letter-spacing: -0.01em; }
h1 { font-size: 19px; }
h2 { font-size: 16px; }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tekst-2); }

.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---- ukladpodstawowy ---- */

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

.rail {
  background: var(--atrament);
  color: #c8d2e0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.rail .marka {
  padding: 16px 16px 14px;
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 15px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.rail .marka span { display: block; font: 400 11px/1.3 var(--mono); color: #7d8ca3; letter-spacing: .04em; margin-top: 2px; }
.rail nav { padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; }
.rail nav a {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--r); color: #c8d2e0; text-decoration: none; font-weight: 500;
}
.rail nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.rail nav a.aktywny { background: var(--atrament-2); color: #fff; box-shadow: inset 2px 0 0 var(--sygnal); }
.rail nav a .licznik { font: 500 11px var(--mono); color: #8fa0b8; }
.rail .stopka { margin-top: auto; padding: 12px; border-top: 1px solid rgba(255,255,255,.09); font-size: 12px; color: #8fa0b8; }
.rail .stopka strong { display: block; color: #dbe3ee; font-weight: 600; }
.rail .stopka button { margin-top: 8px; width: 100%; }

.tresc { display: flex; flex-direction: column; min-width: 0; }

.pasek {
  background: var(--karta);
  border-bottom: 1px solid var(--linia);
  padding: 10px 18px;
  display: flex; align-items: center; gap: 12px;
  position: sticky; top: 0; z-index: 5;
}
.pasek .szukaj { flex: 1; max-width: 420px; }
.widok { padding: 18px; display: flex; flex-direction: column; gap: 14px; }

/* ---- elementy ---- */

.karta { background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r); }
.karta > header {
  padding: 10px 14px; border-bottom: 1px solid var(--linia);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.karta > .cialo { padding: 14px; }

button, .btn {
  font: inherit; font-weight: 550;
  padding: 7px 12px; border-radius: var(--r); border: 1px solid var(--linia-mocna);
  background: #fff; color: var(--tekst); cursor: pointer; text-decoration: none; display: inline-block;
}
button:hover, .btn:hover { border-color: #8d9cb0; }
button.glowny { background: var(--atrament); border-color: var(--atrament); color: #fff; }
button.glowny:hover { background: var(--atrament-2); }
button.sygnal { background: var(--sygnal); border-color: var(--sygnal); color: #fff; }
button.cichy { border-color: transparent; background: transparent; color: var(--tekst-2); padding: 4px 6px; }
button.cichy:hover { background: #eef1f5; color: var(--tekst); }
button.groza { color: var(--alarm); }
button:disabled { opacity: .5; cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--niebieski); outline-offset: 1px;
}

input, select, textarea {
  font: inherit; width: 100%;
  padding: 7px 9px; border: 1px solid var(--linia-mocna); border-radius: var(--r);
  background: #fff; color: var(--tekst);
}
textarea { min-height: 96px; resize: vertical; }
label { display: block; font-size: 12px; font-weight: 600; color: var(--tekst-2); margin-bottom: 4px; }
.pole { margin-bottom: 12px; }
.pola { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.przelacznik { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--tekst); }
.przelacznik input { width: auto; }
.podpowiedz { font-size: 12px; color: var(--tekst-2); margin-top: 4px; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--linia); vertical-align: top; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--tekst-2); font-weight: 650; }
tbody tr:hover { background: #f7f9fb; }
td.liczba, th.liczba { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }

.znacznik {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 11px/1 var(--sans); text-transform: uppercase; letter-spacing: .04em;
  padding: 4px 7px; border-radius: 3px; border: 1px solid transparent; white-space: nowrap;
}
.st-nowe { background: var(--sygnal-tlo); color: #8a4906; border-color: #f0d5b0; }
.st-otwarte { background: var(--niebieski-tlo); color: #17497f; border-color: #c3d7ee; }
.st-oczekuje { background: #f2f0fb; color: #4b3f8f; border-color: #d7d1ee; }
.st-zamkniete { background: var(--zielen-tlo); color: #0b5c55; border-color: #bfdedb; }
.pr-wysoki { color: var(--sygnal); font-weight: 700; }
.pr-krytyczny { color: var(--alarm); font-weight: 700; }

.pusto { padding: 40px 20px; text-align: center; color: var(--tekst-2); }
.pusto strong { display: block; color: var(--tekst); margin-bottom: 4px; }

/* ---- zgloszenia ---- */

.dwa-panele { display: grid; grid-template-columns: minmax(320px, 400px) 1fr; gap: 14px; align-items: start; }
.lista-zgloszen { max-height: calc(100vh - 130px); overflow: auto; }
.pozycja {
  display: block; padding: 10px 12px; border-bottom: 1px solid var(--linia);
  text-decoration: none; color: inherit;
}
.pozycja:hover { background: #f7f9fb; }
.pozycja.aktywna { background: var(--niebieski-tlo); box-shadow: inset 3px 0 0 var(--atrament); }
.pozycja .gora { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.pozycja .temat { font-weight: 600; }
.pozycja .meta { font: 400 12px/1.4 var(--mono); color: var(--tekst-2); margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; }

.naglowek-zgloszenia { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; }
.naglowek-zgloszenia .numer { font: 600 12px var(--mono); color: var(--tekst-2); }

.wiadomosc { border-bottom: 1px solid var(--linia); padding: 12px 14px; }
.wiadomosc:last-child { border-bottom: 0; }
.wiadomosc .kto { display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: var(--tekst-2); margin-bottom: 6px; }
.wiadomosc .kto b { color: var(--tekst); font-size: 13px; }
.wiadomosc .kierunek { font: 600 10px var(--sans); text-transform: uppercase; letter-spacing: .05em; padding: 2px 5px; border-radius: 3px; }
.w-in .kierunek { background: var(--sygnal-tlo); color: #8a4906; }
.w-out .kierunek { background: var(--niebieski-tlo); color: #17497f; }
.w-note { background: #fbfaf4; }
.w-note .kierunek { background: #f2eeda; color: #6b5c1a; }
.w-system { background: #f7f9fb; font-size: 12px; color: var(--tekst-2); }
.wiadomosc pre { margin: 0; white-space: pre-wrap; word-break: break-word; font: inherit; }
.zalaczniki { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.zalaczniki a { font: 500 12px var(--mono); border: 1px solid var(--linia); padding: 3px 7px; border-radius: 3px; background: #fff; text-decoration: none; }

/* Sygnaturowy element: pasek czasu pracy zlozony z bloczkow po 15 minut. */
.ksiega { display: flex; flex-direction: column; gap: 6px; }
.ksiega .bloczki { display: flex; flex-wrap: wrap; gap: 2px; }
.ksiega .bloczek { width: 9px; height: 16px; border-radius: 1px; background: var(--sygnal); opacity: .85; }
.ksiega .bloczek.nierozliczalny { background: var(--linia-mocna); }
.ksiega .suma { font: 600 13px var(--mono); }
.ksiega .opis { font-size: 12px; color: var(--tekst-2); }

.paski { display: flex; flex-direction: column; gap: 6px; }
.pasek-danych { display: grid; grid-template-columns: minmax(120px, 1fr) 3fr auto; gap: 10px; align-items: center; font-size: 13px; }
.pasek-danych .tor { background: var(--plotno); height: 10px; border-radius: 2px; overflow: hidden; }
.pasek-danych .tor i { display: block; height: 100%; background: var(--atrament); }

.zakladki { display: flex; gap: 2px; border-bottom: 1px solid var(--linia); flex-wrap: wrap; }
.zakladki button {
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent;
  color: var(--tekst-2); font-weight: 600; padding: 8px 12px;
}
.zakladki button.aktywna { color: var(--tekst); border-bottom-color: var(--sygnal); }

.kafle { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.kafel { background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r); padding: 12px 14px; }
.kafel .etykieta { font-size: 12px; color: var(--tekst-2); }
.kafel .wartosc { font: 650 22px/1.2 var(--mono); letter-spacing: -0.02em; margin-top: 2px; }

/* ---- logowanie ---- */

.logowanie { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: var(--atrament); }
.logowanie .karta { width: 100%; max-width: 360px; padding: 22px; }
.logowanie h1 { margin-bottom: 4px; }
.logowanie p { margin: 0 0 18px; color: var(--tekst-2); font-size: 13px; }

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

#toast {
  position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 50;
}
#toast div {
  background: var(--atrament); color: #fff; padding: 10px 14px; border-radius: var(--r);
  box-shadow: 0 6px 20px rgba(15,27,45,.25); max-width: 340px; font-size: 13px;
}
#toast div.blad { background: var(--alarm); }
#toast div.ok { background: var(--zielen); }

.rzad { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rozdziel { margin-left: auto; }
.male { font-size: 12px; color: var(--tekst-2); }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; flex-direction: row; align-items: center; overflow-x: auto; }
  .rail .marka { border-bottom: 0; border-right: 1px solid rgba(255,255,255,.09); white-space: nowrap; }
  .rail nav { flex-direction: row; padding: 8px; }
  .rail .stopka { margin-top: 0; border-top: 0; padding: 8px 12px; white-space: nowrap; }
  .rail .stopka button { width: auto; margin-top: 0; }
  .dwa-panele { grid-template-columns: 1fr; }
  .lista-zgloszen { max-height: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .pozycja, button, .karta { transition: background-color .12s ease, border-color .12s ease; }
}

/* ---- logowanie dwuskładnikowe ---- */

.karta-mfa { max-width: 400px; }
.komunikat-blad {
  background: var(--alarm-tlo); color: #7a1d13; border: 1px solid #f3c7c1;
  border-radius: var(--r); padding: 8px 10px; font-size: 13px; margin: 0 0 14px;
}
.kroki-mfa { margin: 0 0 16px; padding-left: 20px; font-size: 13px; color: var(--tekst-2); }
.kroki-mfa li { margin-bottom: 4px; }
.kroki-mfa strong { color: var(--tekst); font-weight: 600; }
.qr {
  display: grid; place-items: center; padding: 12px;
  background: #fff; border: 1px solid var(--linia); border-radius: var(--r); margin-bottom: 12px;
}
.qr svg { width: 200px; height: 200px; display: block; }
.sekret {
  display: inline-block; margin-top: 6px; font: 600 13px var(--mono); letter-spacing: .06em;
  background: var(--plotno); padding: 5px 8px; border-radius: 3px; user-select: all;
}
.pole-kod {
  font: 650 26px/1.2 var(--mono); letter-spacing: .28em; text-align: center; padding: 12px 8px;
}
.kody-zapasowe {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  background: var(--plotno); border: 1px solid var(--linia); border-radius: var(--r); padding: 12px;
}
.kody-zapasowe span { font: 600 13px var(--mono); letter-spacing: .04em; text-align: center; user-select: all; }

/* ---- bezpieczeństwo w ustawieniach ---- */

.stan-mfa { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; }
.stan-mfa.tak { color: var(--zielen); }
.stan-mfa.nie { color: var(--alarm); }
.wiersz-blokada { background: var(--alarm-tlo); }
.zdarzenie { font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .04em; padding: 3px 6px; border-radius: 3px; white-space: nowrap; }
.zd-ok { background: var(--zielen-tlo); color: #0b5c55; }
.zd-blad { background: var(--alarm-tlo); color: #8a2018; }
.zd-info { background: var(--niebieski-tlo); color: #17497f; }

.tor-limit { height: 5px; background: var(--plotno); border-radius: 3px; margin-top: 5px; overflow: hidden; }
.tor-limit i { display: block; height: 100%; background: var(--zielen); }
.tor-limit i.ponad { background: var(--sygnal); }
tr.pozycje td { border-top: 0; padding-top: 0; }

.blokada-zamkniecia {
  background: var(--sygnal-tlo); border: 1px solid #f0d5b0; border-radius: var(--r);
  padding: 12px 14px; margin-bottom: 12px;
}
.blokada-zamkniecia strong { display: block; margin-bottom: 2px; color: #8a4906; }
.blokada-zamkniecia p { margin: 0 0 10px; }