/* ALUK Panel v3: interfejs aplikacji na poziomie Linear/Stripe/Plausible (kierunek A, 2026-10-06).
   Zasady: biała treść, przygaszony pasek boczny, obramowania zamiast cieni (cień tylko dla menu),
   skala pisma 12/13/14/16/20/28, wagi 400/500/600, liczby tabelaryczne, akcent tylko dla stanu aktywnego,
   linków i jednej serii danych. Kolory statusów tylko dla stanów (kropka, tekst, rzadko pigułka). */
@font-face { font-family: "Inter"; src: url("/zasoby/fonty/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --g0: #FFFFFF; --g25: #F8F9FB; --g50: #F3F4F7; --g100: #ECEEF2; --g200: #E3E6EB; --g300: #D0D4DB;
  --g400: #A6ACB7; --g500: #7E8592; --g600: #5B6270; --g800: #2B303A; --g900: #14171D;
  --a: #226BFD; --a-hover: #1A5BE0; --a-bg: #EEF4FF; --a-linia: #CADBFF; --a-tekst: #1550D6; --a-pasek: #E8F0FF;
  --ok: #15803D; --ok-bg: #F0FDF4; --ok-kropka: #22C55E; --ok-linia: #BBF7D0;
  --ostrz: #B45309; --ostrz-bg: #FFFBEB; --ostrz-kropka: #F59E0B; --ostrz-linia: #FDE68A;
  --blad: #B91C1C; --blad-bg: #FEF2F2; --blad-kropka: #EF4444; --blad-linia: #FECACA;
  --serwis: #6366F1;
  --cien-menu: 0 0 0 1px var(--g200), 0 8px 24px rgb(16 24 40 / .10);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --pasek-boczny: 232px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 14px/20px var(--font); color: var(--g900); background: var(--g0); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11"; }
::selection { background: var(--a-linia); }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.015em; text-wrap: balance; }
h2 { font-size: 14px; line-height: 20px; font-weight: 600; }
h3 { font-size: 13px; line-height: 20px; font-weight: 600; }
a { color: var(--a-tekst); text-decoration: none; }
a:hover { color: var(--a); }
:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--g0), 0 0 0 4px var(--a); border-radius: 6px; }
code { font: 500 12px/18px var(--mono); background: var(--g50); border: 1px solid var(--g200); border-radius: 4px; padding: 0 5px; overflow-wrap: anywhere; }
.ikona { flex: 0 0 auto; display: block; }
.sr, .ukryte { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wyciszony { color: var(--g600); }
.maly { font-size: 13px; }
.liczby, .num { font-variant-numeric: tabular-nums; }
.num { text-align: right; white-space: nowrap; }

/* ── szkielet ──────────────────────────────────────────────────────────── */
.aplikacja { display: grid; grid-template-columns: var(--pasek-boczny) minmax(0, 1fr); min-height: 100dvh; background: linear-gradient(to right, var(--g25) calc(var(--pasek-boczny) - 1px), var(--g200) calc(var(--pasek-boczny) - 1px), var(--g200) var(--pasek-boczny), var(--g0) var(--pasek-boczny)); }
.pasek-boczny { position: sticky; top: 0; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; background: var(--g25); border-right: 1px solid var(--g200); }
.marka { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px; margin-bottom: 8px; color: var(--g900); font-weight: 600; font-size: 14px; }
.marka:hover { color: var(--g900); }
.znak { width: 18px; height: 20px; }
.marka .rola { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--g500); }
.grupa-nawigacji > p { padding: 14px 8px 4px; font-size: 11px; line-height: 16px; letter-spacing: .04em; text-transform: uppercase; color: var(--g500); font-weight: 500; }
.nawigacja { display: grid; gap: 1px; }
.pozycja { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 8px; border-radius: 6px; color: var(--g600); font-weight: 500; transition: background-color 100ms var(--ease); }
.pozycja .ikona { color: var(--g500); width: 16px; height: 16px; }
.pozycja:hover { background: var(--g50); color: var(--g900); }
.pozycja[aria-current="page"] { background: var(--g100); color: var(--g900); }
.pozycja[aria-current="page"] .ikona { color: var(--g800); }
.licznik-nawigacji { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 4px; background: var(--g100); color: var(--g600); font-size: 12px; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.licznik-nawigacji.alarm { background: var(--blad-bg); color: var(--blad); }
.dol-paska { margin-top: auto; padding-top: 12px; display: grid; gap: 2px; }
.konto { position: relative; border-top: 1px solid var(--g200); padding-top: 8px; }
.konto > summary { list-style: none; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--g600); }
.konto > summary::-webkit-details-marker { display: none; }
.konto > summary:hover { background: var(--g50); }
.inicjal { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; background: var(--g100); color: var(--g800); font-size: 11px; font-weight: 600; text-transform: uppercase; }
.konto-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-konta { position: absolute; left: 0; right: 0; bottom: 46px; z-index: 20; padding: 4px; background: var(--g0); border-radius: 8px; box-shadow: var(--cien-menu); display: grid; }
.menu-konta p { padding: 8px 10px; font-size: 12px; color: var(--g500); border-bottom: 1px solid var(--g100); margin-bottom: 4px; overflow-wrap: anywhere; }
.menu-konta form { margin: 0; }
.menu-konta a, .menu-konta button { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 10px; border: 0; border-radius: 6px; background: none; font: 500 13px var(--font); color: var(--g800); cursor: pointer; text-align: left; }
.menu-konta a:hover, .menu-konta button:hover { background: var(--g50); color: var(--g900); }
.menu-konta .ikona { color: var(--g500); }

.kolumna { min-width: 0; display: flex; flex-direction: column; }
.gorny-pasek { display: none; }
.glowna { width: 100%; max-width: 1440px; margin: 0 auto; padding: 20px 32px 56px; display: grid; gap: 16px; align-content: start; }
.stopka-aplikacji { width: 100%; max-width: 1440px; margin: auto auto 0; padding: 16px 32px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: 12px; color: var(--g500); }
.stopka-aplikacji a { color: var(--g500); }

/* ── nagłówek strony ───────────────────────────────────────────────────── */
.naglowek-strony { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.naglowek-strony > div:first-child { display: grid; gap: 2px; min-width: 0; }
.sciezka { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--g500); }
.sciezka a { color: var(--g500); }
.sciezka a:hover { color: var(--g900); }
.sciezka .sep { color: var(--g300); }
.tytul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; }
.opis { color: var(--g600); font-size: 13px; max-width: 80ch; overflow-wrap: anywhere; }
.akcje-strony { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pasek-stanu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; font-size: 13px; color: var(--g600); }
.pasek-stanu b { font-weight: 500; color: var(--g900); }
.pasek-stanu .kropka { margin-right: 6px; }

/* ── przyciski i kontrolki ─────────────────────────────────────────────── */
.przycisk, .obrys { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 6px; font: 500 13px var(--font); white-space: nowrap; cursor: pointer; transition: background-color 100ms var(--ease), border-color 100ms var(--ease); }
.przycisk { background: var(--a); color: #fff; border: 1px solid var(--a); }
.przycisk:hover { background: var(--a-hover); border-color: var(--a-hover); color: #fff; }
.obrys, .przycisk.przycisk-drugi { background: var(--g0); color: var(--g800); border: 1px solid var(--g300); }
.obrys:hover, .przycisk.przycisk-drugi:hover { background: var(--g25); border-color: var(--g400); color: var(--g900); }
.przycisk.przycisk-maly, .obrys.maly { height: 28px; padding: 0 10px; font-size: 12px; }
.obrys.niebezpieczny { color: var(--blad); }
.obrys.niebezpieczny:hover { border-color: var(--blad-linia); background: var(--blad-bg); }
.przycisk .ikona, .obrys .ikona { width: 14px; height: 14px; color: currentColor; opacity: .8; }
.przycisk:disabled, .obrys:disabled { opacity: .5; cursor: not-allowed; }
.przycisk-tekst { background: none; border: 0; padding: 0; font: inherit; color: var(--a-tekst); cursor: pointer; }
.link-karty { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--a-tekst); white-space: nowrap; }
.link-karty .ikona { width: 14px; height: 14px; }
.inline { display: inline; margin: 0; }

.segment { display: inline-flex; padding: 2px; border-radius: 6px; background: var(--g50); }
.segment a, .segment span { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 4px; font-size: 12px; font-weight: 500; color: var(--g600); white-space: nowrap; }
.segment a:hover { color: var(--g900); }
.segment [aria-current] { background: var(--g0); color: var(--g900); box-shadow: 0 0 0 1px var(--g200), 0 1px 2px rgb(16 24 40 / .06); }
.zakladki { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.zakladki a { color: var(--g500); font-weight: 500; }
.zakladki a:hover { color: var(--g900); }
.zakladki [aria-current] { color: var(--g900); }

/* panele z zakładkami (radio + CSS, do 4 zakładek) */
.zakladkowa { position: relative; }
.zakladkowa > input { position: absolute; opacity: 0; pointer-events: none; }
.zakladkowa > .zakladka { display: none; }
.zakladkowa .zakladki label { color: var(--g500); font-weight: 500; cursor: pointer; padding: 2px 0; border-bottom: 2px solid transparent; }
.zakladkowa .zakladki label:hover { color: var(--g900); }
.zakladkowa > input:nth-of-type(1):checked ~ .zakladka:nth-of-type(1), .zakladkowa > input:nth-of-type(2):checked ~ .zakladka:nth-of-type(2),
.zakladkowa > input:nth-of-type(3):checked ~ .zakladka:nth-of-type(3), .zakladkowa > input:nth-of-type(4):checked ~ .zakladka:nth-of-type(4) { display: block; }
.zakladkowa > input:nth-of-type(1):checked ~ header label:nth-of-type(1), .zakladkowa > input:nth-of-type(2):checked ~ header label:nth-of-type(2),
.zakladkowa > input:nth-of-type(3):checked ~ header label:nth-of-type(3), .zakladkowa > input:nth-of-type(4):checked ~ header label:nth-of-type(4) { color: var(--g900); border-bottom-color: var(--g900); }
.zakladkowa > input:nth-of-type(1):focus-visible ~ header label:nth-of-type(1), .zakladkowa > input:nth-of-type(2):focus-visible ~ header label:nth-of-type(2),
.zakladkowa > input:nth-of-type(3):focus-visible ~ header label:nth-of-type(3), .zakladkowa > input:nth-of-type(4):focus-visible ~ header label:nth-of-type(4) { outline: 2px solid var(--a); outline-offset: 2px; border-radius: 2px; }
.segment label { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 4px; font-size: 12px; font-weight: 500; color: var(--g600); white-space: nowrap; cursor: pointer; }
.segment label:hover { color: var(--g900); }
details.wiecej > summary { list-style: none; cursor: pointer; padding: 8px 16px 12px; font-size: 13px; font-weight: 500; color: var(--a-tekst); }
details.wiecej > summary::-webkit-details-marker { display: none; }
details.wiecej[open] > summary { display: none; }
details.wiecej .lista-udzialu { padding-top: 0; }
.obrys.wlaczony { background: var(--a-bg); border-color: var(--a-linia); color: var(--a-tekst); }
.menu-rozwijane > summary.obrys .ikona { opacity: .6; }
.kolumna-pasek .spark { width: 100%; max-width: 160px; height: 24px; }

.menu-rozwijane { position: relative; }
.menu-rozwijane > summary { list-style: none; }
.menu-rozwijane > summary::-webkit-details-marker { display: none; }
.menu-rozwijane .lista-menu { position: absolute; right: 0; top: 38px; z-index: 20; min-width: 240px; padding: 4px; background: var(--g0); border-radius: 8px; box-shadow: var(--cien-menu); display: grid; }
.lista-menu a { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 10px; border-radius: 6px; font-size: 13px; color: var(--g800); }
.lista-menu a:hover { background: var(--g50); color: var(--g900); }
.lista-menu a[aria-current]::after { content: "✓"; color: var(--a); }
.lista-menu hr { border: 0; border-top: 1px solid var(--g100); margin: 4px 0; }
.lista-menu form { display: grid; gap: 8px; padding: 8px 10px; }
.lista-menu form .rzad { display: flex; gap: 8px; }
.lista-menu form label { display: grid; gap: 4px; font-size: 12px; color: var(--g600); font-weight: 500; }

/* ── stany: kropka, pigułka, tekst ─────────────────────────────────────── */
.kropka { display: inline-block; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--g300); vertical-align: 0; }
.kropka.s1, .kropka.ok { background: var(--ok-kropka); }
.kropka.s0, .kropka.blad { background: var(--blad-kropka); }
.kropka.s2, .kropka.ostrz { background: var(--ostrz-kropka); }
.kropka.s3 { background: var(--serwis); }
.kropka.sx { background: var(--g300); }
@media (prefers-reduced-motion: no-preference) { .kropka.s0 { animation: puls 1.6s var(--ease) infinite; } }
@keyframes puls { 50% { box-shadow: 0 0 0 4px rgb(239 68 68 / .18); } }
.pigulka, .znacznik { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--g200); background: var(--g50); color: var(--g600); font-size: 12px; font-weight: 500; white-space: nowrap; }
.pigulka-ok, .znacznik-zatwierdzona { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-linia); }
.pigulka-ostrz, .znacznik-oczekujaca { color: var(--ostrz); background: var(--ostrz-bg); border-color: var(--ostrz-linia); }
.pigulka-blad, .znacznik-odrzucona { color: var(--blad); background: var(--blad-bg); border-color: var(--blad-linia); }
.pigulka-serwis, .znacznik-przelozona { color: var(--a-tekst); background: var(--a-bg); border-color: var(--a-linia); }
.t-ok { color: var(--g900); } .t-ostrz { color: var(--ostrz); font-weight: 500; } .t-blad { color: var(--blad); font-weight: 500; } .t-brak { color: var(--g400); }
.licznik { display: inline-flex; justify-content: center; min-width: 20px; padding: 0 6px; margin-left: 6px; border-radius: 4px; background: var(--g100); color: var(--g600); font-size: 12px; line-height: 18px; font-weight: 500; font-variant-numeric: tabular-nums; vertical-align: 1px; }

/* ── uwagi (wymaga reakcji) ────────────────────────────────────────────── */
.uwagi { display: grid; gap: 8px; }
.uwaga { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; border: 1px solid var(--a-linia); background: var(--a-bg); border-radius: 8px; font-size: 13px; color: var(--g800); }
.uwaga-tresc { flex: 1; min-width: 220px; overflow-wrap: anywhere; }
.uwaga-tresc b { font-weight: 600; color: var(--g900); }
.uwaga a.uwaga-akcja { margin-left: auto; font-weight: 500; white-space: nowrap; }
.uwaga.blad { border-color: var(--blad-linia); background: var(--blad-bg); }
.uwaga.blad a.uwaga-akcja { color: var(--blad); }
.uwaga.ostrz { border-color: var(--ostrz-linia); background: var(--ostrz-bg); }
.uwaga.ostrz a.uwaga-akcja { color: #78350F; }

/* ── pas liczb (KPI) ───────────────────────────────────────────────────── */
.kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--g200); border-radius: 8px; background: var(--g0); }
.kpi.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi.k6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpi-pole { position: relative; display: grid; gap: 2px; align-content: start; padding: 14px 16px 16px; min-width: 0; color: var(--g900); }
.kpi-pole + .kpi-pole { border-left: 1px solid var(--g200); }
a.kpi-pole:hover { background: var(--g25); color: var(--g900); }
.kpi-pole[aria-current]::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--a); }
.kpi-etykieta { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 13px; color: var(--g600); white-space: nowrap; }
.kpi-pole:has(.spark) .kpi-etykieta { padding-right: 96px; }
.kpi-wartosc { margin-top: 4px; font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-wartosc small { font-size: 14px; font-weight: 500; color: var(--g500); margin-left: 2px; letter-spacing: 0; }
.kpi.k6 .kpi-wartosc { font-size: 24px; }
.kpi.k6 .kpi-pole:has(.spark) .kpi-etykieta { padding-right: 0; }
.kpi.k6 .kpi-pole .spark { position: static; width: 100%; height: 20px; margin-top: 8px; }
.kpi-opis { font-size: 12px; line-height: 16px; color: var(--g500); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi-pole .spark { position: absolute; top: 16px; right: 16px; width: 84px; height: 24px; }
.zm { font-weight: 500; }
.zm.lepiej { color: var(--ok); } .zm.gorzej { color: var(--blad); } .zm.bez { color: var(--g500); font-weight: 400; }
.pomoc { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--g300); color: var(--g500); font-size: 9px; font-weight: 600; cursor: help; flex: 0 0 14px; }

/* ── panele (sekcje z nagłówkiem) ──────────────────────────────────────── */
.panel, .karta, .sekcja-panelu { min-width: 0; border: 1px solid var(--g200); border-radius: 8px; background: var(--g0); }
.panel-glowa, .karta-naglowek, .sekcja-panelu > h2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; min-height: 48px; padding: 10px 16px; border-bottom: 1px solid var(--g200); }
.panel-glowa > div:first-child, .karta-naglowek > div:first-child { display: grid; min-width: 0; }
.panel-glowa h2, .karta-naglowek h2 { display: flex; align-items: center; gap: 6px; }
.panel-glowa p, .karta-naglowek p { font-size: 12px; line-height: 16px; color: var(--g500); overflow-wrap: anywhere; }
.panel-tresc { padding: 16px; }
.karta > :not(.karta-naglowek):not(.panel-glowa):not(.tabela-przewijana):not(.lista):not(.lista-udzialu):not(.naglowek-listy):not(.panel-stopka):not(.incydent):not(.zakladka):not(input):not(.panel-tresc):not(.wiecej):not(.pusto):not(.pusty-stan):not(.przelacznik-miary), .sekcja-panelu > :not(h2):not(.tabela-przewijana) { padding: 16px; }
.panel-stopka { display: block; padding: 10px 16px; border-top: 1px solid var(--g200); font-size: 13px; font-weight: 500; }
.siatka-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.siatka-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.siatka-pulpitu { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.stos { display: grid; gap: 16px; min-width: 0; align-content: start; }
.pusto { padding: 20px 16px !important; color: var(--g500); font-size: 13px; text-align: center; }
.pusty-stan { display: grid; justify-items: center; gap: 6px; padding: 40px 20px; text-align: center; color: var(--g600); }
.pusty-stan h2 { color: var(--g900); }
.pusty-stan .przycisk, .pusty-stan .obrys { margin-top: 8px; }

/* ── listy z paskiem udziału w tle ─────────────────────────────────────── */
.naglowek-listy { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px 2px; font-size: 12px; font-weight: 500; color: var(--g500); }
.lista-udzialu { list-style: none; margin: 0; padding: 4px 8px 8px; }
.lista-udzialu li { position: relative; display: flex; align-items: center; gap: 12px; height: 32px; padding: 0 8px; font-size: 13px; }
.lista-udzialu .tlo-paska { position: absolute; left: 0; top: 2px; width: 100%; height: 28px; }
.lista-udzialu .tlo-paska rect { fill: var(--a-pasek); }
.lista-udzialu .et { position: relative; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--g900); }
.lista-udzialu a.et:hover { color: var(--a-tekst); }
.lista-udzialu .v { position: relative; font-weight: 500; font-variant-numeric: tabular-nums; }
.lista-udzialu .p { position: relative; width: 40px; text-align: right; color: var(--g500); font-variant-numeric: tabular-nums; }
.lista-udzialu details { position: relative; width: 100%; }
.lista-udzialu .rozbicie { padding: 4px 8px 10px 16px; display: grid; gap: 2px; font-size: 12px; color: var(--g600); }

/* listy wierszy */
.lista { list-style: none; margin: 0; padding: 0; }
.wiersz { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 40px; padding: 8px 16px; border-bottom: 1px solid var(--g100); }
.lista > li:last-child .wiersz, .lista > .wiersz:last-child { border-bottom: 0; }
.wiersz-srodek { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.wiersz-tytul { font-weight: 500; color: var(--g900); overflow-wrap: anywhere; }
a.wiersz-tytul:hover { color: var(--a-tekst); }
.wiersz-meta { font-size: 12px; color: var(--g500); overflow-wrap: anywhere; }
.wiersz-prawo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.wiersz .ikona-kafel, .tabela .ikona-kafel { display: none; }

/* ── tabele ────────────────────────────────────────────────────────────── */
.tabela-przewijana { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th { height: 36px; padding: 0 12px; text-align: left; font-size: 12px; font-weight: 500; color: var(--g500); border-bottom: 1px solid var(--g200); white-space: nowrap; }
.tabela td { height: 40px; padding: 6px 12px; border-bottom: 1px solid var(--g100); vertical-align: middle; }
.tabela th:first-child, .tabela td:first-child { padding-left: 16px; }
.tabela th:last-child, .tabela td:last-child { padding-right: 16px; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: var(--g25); }
.tabela .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela .liczby { white-space: nowrap; }
.tabela a { font-weight: 500; color: var(--g900); }
.tabela a:hover { color: var(--a-tekst); }
.tabela .host { margin-left: 6px; color: var(--g500); font-weight: 400; font-size: 12px; }
.tabela tr.wylaczony td, .tabela tr.wylaczony a { color: var(--g400); }
.wiersz-grupy td { height: 32px; background: var(--g25); font-size: 12px; font-weight: 500; color: var(--g600); }
.wiersz-grupy:hover td { background: var(--g25) !important; }
.komorka-nazwa { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tylko-m { display: none; }
.tabela-waska { max-width: 640px; }

/* ── paski dostępności i wykresy ───────────────────────────────────────── */
.kolumna-pasek { width: 32%; min-width: 180px; }
.historia-90 { display: grid; gap: 6px; }
.historia-90 .pasek-dni { height: 28px; }
.historia-podpis { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--g500); font-variant-numeric: tabular-nums; }
.historia-podpis span:nth-child(2) { color: var(--g800); font-weight: 500; }

.wykres { display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto 22px; column-gap: 8px; }
.wykres-os-y { display: flex; flex-direction: column; justify-content: space-between; margin: -7px 0; font-size: 11px; line-height: 14px; color: var(--g500); text-align: right; font-variant-numeric: tabular-nums; }
.wykres-pole { position: relative; min-width: 0; }
.wykres-svg { display: block; width: 100%; height: 220px; overflow: visible; }
.wykres-svg.niski { height: 160px; }
.wykres-os-x { grid-column: 2; display: flex; justify-content: space-between; padding-top: 6px; font-size: 11px; color: var(--g500); font-variant-numeric: tabular-nums; white-space: nowrap; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 12px; color: var(--g600); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 12px; height: 2px; border-radius: 1px; background: var(--a); }
.legenda i.porown { background: none; border-top: 1.5px dashed var(--g400); height: 0; }
.legenda i.ok { width: 10px; height: 10px; border-radius: 2px; background: var(--ok-kropka); }
.legenda i.czeka { width: 10px; height: 10px; border-radius: 2px; background: var(--ostrz-kropka); }
.legenda i.blad { width: 10px; height: 10px; border-radius: 2px; background: var(--blad-kropka); }
.legenda i.brak { width: 10px; height: 10px; border-radius: 2px; background: var(--g200); }
.spark { display: block; }

/* geometria wykresów (kolory z tokenów) */
.wykres-siatka, .wykres-nakladka { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wykres-siatka line { stroke: #EEF0F3; stroke-width: 1; }
.wykres-siatka line.baza { stroke: var(--g200); }
.wykres-svg { position: relative; }
.wykres-svg .linia { fill: none; stroke: var(--a); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.wykres-svg .porown { fill: none; stroke: var(--g400); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.wykres-svg .kropla { fill: var(--a); }
.wykres-nakladka .koniec { fill: var(--g0); stroke: var(--a); stroke-width: 2; }
.wykres-nakladka .strefa rect { fill: transparent; }
.wykres-nakladka .strefa line { stroke: var(--g300); stroke-width: 1; opacity: 0; }
.wykres-nakladka .strefa circle { fill: var(--a); stroke: var(--g0); stroke-width: 2; opacity: 0; }
.wykres-nakladka .strefa:hover line, .wykres-nakladka .strefa:hover circle { opacity: 1; }
.spark polyline { fill: none; stroke: var(--a); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pasek-dni { display: block; width: 100%; height: 20px; }
.pasek-dni.wysoki { height: 28px; }
.pasek-dni .d-ok { fill: var(--ok-kropka); }
.pasek-dni .d-ostrz { fill: var(--ostrz-kropka); }
.pasek-dni .d-blad { fill: var(--blad-kropka); }
.pasek-dni .d-brak { fill: var(--g200); }
.pasek-dni rect:hover, .pasek-beatow rect:hover { opacity: .7; }
.pasek-beatow { display: block; width: 100%; height: 28px; }
.pasek-beatow .b-1 { fill: var(--ok-kropka); }
.pasek-beatow .b-0 { fill: var(--blad-kropka); }
.pasek-beatow .b-2 { fill: var(--ostrz-kropka); }
.pasek-beatow .b-3 { fill: var(--serwis); }
.pasek-beatow .b-x { fill: var(--g200); }
.udzial { display: block; width: 100%; height: 4px; margin-top: 6px; }
.udzial rect { fill: var(--a); }
.udzial rect.tlo { fill: var(--g100); }

/* ── formularze ────────────────────────────────────────────────────────── */
.formularz, .blok-formularza { display: grid; gap: 16px; }
.siatka-formularza { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 16px; align-items: start; }
.formularz label, .pole { display: grid; gap: 6px; min-width: 0; font-size: 13px; font-weight: 500; color: var(--g800); }
.pole-szerokie { grid-column: 1 / -1; }
.pole-zaznacz, .pole-zgoda, .formularz label.pole-zaznacz { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--g800); }
.pole-zaznacz input, .pole-zgoda input { width: 16px; height: 16px; margin: 0; accent-color: var(--a); flex: 0 0 16px; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.ukryte), select, textarea {
  width: 100%; height: 32px; padding: 0 10px; font: 400 13px var(--font); color: var(--g900); background: var(--g0);
  border: 1px solid var(--g300); border-radius: 6px; transition: border-color 100ms var(--ease), box-shadow 100ms var(--ease);
}
textarea { height: auto; min-height: 88px; padding: 8px 10px; line-height: 20px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--g400); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--a); box-shadow: 0 0 0 3px var(--a-bg); }
::placeholder { color: var(--g400); }
fieldset { border: 1px solid var(--g200); border-radius: 8px; padding: 10px 12px; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; }
legend { grid-column: 1 / -1; }
legend { font-size: 13px; font-weight: 500; padding: 0 4px; }
.podpowiedz { font-size: 12px; font-weight: 400; color: var(--g500); }
/* stan strony: Aktywna / Wyłączona (radio jako dwie karty z opisem skutków) */
.wybor-stanu { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.formularz .wybor-stanu label { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--g200); border-radius: 8px; font-weight: 400; cursor: pointer; }
.formularz .wybor-stanu label:hover { border-color: var(--g300); }
.formularz .wybor-stanu label:has(input:checked) { border-color: var(--a); background: var(--a-bg); }
.wybor-stanu input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--a); flex: 0 0 16px; }
.wybor-stanu b { display: block; margin-bottom: 2px; font-weight: 500; color: var(--g900); }
.wybor-stanu .podpowiedz { display: block; line-height: 1.45; }
.opieka-zakonczona p { max-width: 520px; }
.blad-pola { font-size: 12px; color: var(--blad); }
.sekcja-formularza { display: grid; gap: 12px; }
.sekcja-formularza + .sekcja-formularza { padding-top: 16px; border-top: 1px solid var(--g100); }
.sekcja-formularza > h3 { font-size: 13px; color: var(--g900); }
.stopka-formularza { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px solid var(--g100); }
.filtr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.filtr select { width: auto; }

.komunikat { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--ok-linia); background: var(--ok-bg); color: var(--ok); font-size: 13px; font-weight: 500; }
.komunikat-blad { border-color: var(--blad-linia); background: var(--blad-bg); color: var(--blad); }
.ostrzezenie { padding: 8px 10px; border-radius: 6px; border: 1px solid var(--ostrz-linia); background: var(--ostrz-bg); color: var(--ostrz); font-size: 13px; }
.do-skopiowania { display: block; padding: 8px 10px; border-radius: 6px; background: var(--g50); border: 1px solid var(--g200); font: 500 12px/18px var(--mono); overflow-wrap: anywhere; user-select: all; }
.fakty { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 24px; margin: 0; font-size: 13px; }
.fakty > div { display: contents; }
.fakty dt { color: var(--g500); }
.fakty dd { margin: 0; color: var(--g900); overflow-wrap: anywhere; }
.dziennik { font-size: 13px; color: var(--g600); }
.notatka-kom { font-size: 12px; color: var(--g500); max-width: 40ch; overflow-wrap: anywhere; }
.akcje-kom, .akcje-rezerwacji, .akcje-statusu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.akcje-kom a:not(.przycisk) { color: var(--a-tekst); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.akcje-kom a:not(.przycisk):hover { color: var(--a); }
/* Stan rezerwacji: znacznik i dopisek pod sobą, bez nachodzenia. */
.stan-kom { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
/* Komunikat sprawdzenia (np. długi błąd SSL) łamie się zamiast rozpychać tabelę na telefonie. */
.komunikat-kom { min-width: 16ch; overflow-wrap: anywhere; }
.akcje-kom form, .akcje-statusu form { margin: 0; }

/* ── Kalendarz (widoki z modułu) ───────────────────────────────────────── */
.podmenu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 20px; border-bottom: 1px solid var(--g200); }
.podmenu a { display: inline-flex; align-items: center; height: 36px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--g500); font-size: 13px; font-weight: 500; }
.podmenu a:hover { color: var(--g900); }
.podmenu a[aria-current="page"] { color: var(--g900); border-bottom-color: var(--g900); }
.kal-admin { display: grid; gap: 16px; }
.kal-admin > h1 { display: none; }
.kal-admin > .tabela-przewijana, .kal-admin > form:not(.inline):not(.filtr), .kal-admin > .blok-formularza, .kal-admin > dl { border: 1px solid var(--g200); border-radius: 8px; padding: 16px; margin: 0; }
.kal-admin > .tabela-przewijana { padding: 0; }
.kal-admin > p.wyciszony { font-size: 13px; }
.sekcja-panelu > h2 { font-size: 14px; }
.sekcja-panelu > p.wyciszony { color: var(--g500); font-size: 13px; text-align: center; padding: 20px 16px; }
.sekcja-panelu > .tabela-przewijana { padding: 0; }

/* ── incydenty ─────────────────────────────────────────────────────────── */
.os-czasu { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 1px solid var(--g200); display: grid; gap: 14px; }
.os-czasu li { position: relative; display: grid; gap: 2px; }
.os-czasu li::before { content: ""; position: absolute; left: -20.5px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--g0); border: 1.5px solid var(--g400); }
.os-czasu li:first-child::before { border-color: var(--a); background: var(--a); }
.os-glowa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.os-czasu p { font-size: 13px; color: var(--g800); white-space: pre-line; overflow-wrap: anywhere; }
.incydent { display: grid; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--g100); }
.incydent:last-child { border-bottom: 0; }
.incydent > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.incydent h3 { font-size: 14px; }
.incydent.zamkniety .os-czasu li:first-child::before { border-color: var(--ok-kropka); background: var(--ok-kropka); }
.karta.incydenty-otwarte { border-color: var(--blad-linia); }

/* ── ekrany samodzielne ────────────────────────────────────────────────── */
.ekran-samodzielny { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; background: var(--g25); }
.ekran-samodzielny .karta { width: min(420px, 100%); display: grid; justify-items: center; gap: 8px; padding: 32px 28px; text-align: center; }
.ekran-samodzielny .znak { color: var(--g900); margin-bottom: 8px; }
.ekran-samodzielny p { color: var(--g600); font-size: 13px; }

/* ── responsywność ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .siatka-pulpitu { grid-template-columns: minmax(0, 1fr); }
  .kpi, .kpi.k6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi:not(.k3) .kpi-pole:nth-child(2n + 1) { border-left: 0; }
  .kpi:not(.k3) .kpi-pole:nth-child(n + 3) { border-top: 1px solid var(--g200); }
  .siatka-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .aplikacja { grid-template-columns: minmax(0, 1fr); background: var(--g0); }
  .pasek-boczny { display: none; }
  .gorny-pasek { display: flex; position: sticky; top: 0; z-index: 10; align-items: center; gap: 10px; height: 52px; padding: 0 16px; background: var(--g0); border-bottom: 1px solid var(--g200); }
  .gorny-pasek .marka { margin: 0; height: auto; padding: 0; }
  .menu-mobilne { position: relative; }
  .menu-mobilne > summary { list-style: none; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--g300); border-radius: 6px; cursor: pointer; }
  .menu-mobilne > summary::-webkit-details-marker { display: none; }
  .menu-mobilne .panel-menu { position: absolute; left: 0; top: 40px; z-index: 30; width: min(300px, calc(100vw - 32px)); max-height: calc(100dvh - 72px); overflow-y: auto; padding: 8px; background: var(--g0); border-radius: 8px; box-shadow: var(--cien-menu); }
  .glowna { padding: 16px 16px 40px; gap: 14px; }
  .stopka-aplikacji { padding: 16px; }
  .siatka-2, .siatka-3 { grid-template-columns: minmax(0, 1fr); }
  .kpi.k3 { grid-template-columns: minmax(0, 1fr); }
  .kpi.k3 .kpi-pole + .kpi-pole { border-left: 0; border-top: 1px solid var(--g200); }
  .kolumna-pasek, .ukryj-m { display: none; }
  .tabela .host.tylko-m { display: block; margin: 2px 0 0 16px; }
  .tabela-stron .komorka-nazwa { flex-wrap: wrap; row-gap: 4px; }
  .kpi-pole:has(.spark) .kpi-etykieta { padding-right: 0; }
  .kpi-pole .spark { display: none; }
  .wykres-os-x span:nth-child(2n) { display: none; }
  .wykres-svg { height: 180px; }
  .tabela td { height: auto; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; } }