/* Audyty warstwowe SZP - formatka NEW PROJECT (wariant A) + komponenty aplikacji.
   Mobile first: audyt wykonuje sie na smartfonie na hali. */

@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/inter-latin-ext-v1.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/inter-latin-v1.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/instrument-sans-latin-ext-v4.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/instrument-sans-latin-v4.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root {
  --bg:#f4f3ed; --surface:#ffffff; --surface-2:#faf9f3;
  --text:#262625; --text-2:#67655e; --text-3:#82807a;
  --line:#e5e3dc; --line-2:#eceae3;
  --clay:#bd5b39; --przycisk:#a94e2c;
  --mineral:#4f7d6d; --plum:#6d68a4; --sky:#3f74a8; --gold:#a5762a; --sea:#3f8f86;
  --zle:#b03426; --dobrze:#3d6b53; --tlo-zle:#fdf1ef; --tlo-dobrze:#eff5f1;
  --uwaga:#9a5a12; --tlo-uwaga:#f9efdd;
  --na-kolorze:#fff; --odp-nd:#5e5c55;
  --dot:rgba(0,0,0,.045);
  --cien:0 1px 2px #0000000a, 0 12px 26px -16px #0000002e;
  --r:10px;
  --serif:'Instrument Sans','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'Cascadia Code','SF Mono',Consolas,monospace;
  --topbar:58px;
  --dolna:64px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#262625; --surface:#2d2d2b; --surface-2:#34332e;
    --text:#f2f0e9; --text-2:#a09e94; --text-3:#87857c;
    --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.055);
    --clay:#d97757; --przycisk:#b85838;
    --mineral:#7bb0a0; --plum:#a9a4de; --sky:#8fb8dd; --gold:#d8b25a; --sea:#79c3b7;
    --zle:#e0785f; --dobrze:#7bb0a0; --tlo-zle:#3a2b28; --tlo-dobrze:#2b352f;
    --uwaga:#e6b46a; --tlo-uwaga:#2e2413; --na-kolorze:#1f1e1d; --odp-nd:#a09e94;
    --dot:rgba(255,255,255,.05);
    --cien:0 1px 2px #0000000d, 0 10px 24px -14px #00000073;
  }
}
:root[data-theme="dark"] {
  --bg:#262625; --surface:#2d2d2b; --surface-2:#34332e;
  --text:#f2f0e9; --text-2:#a09e94; --text-3:#87857c;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.055);
  --clay:#d97757; --przycisk:#b85838;
  --mineral:#7bb0a0; --plum:#a9a4de; --sky:#8fb8dd; --gold:#d8b25a; --sea:#79c3b7;
  --zle:#e0785f; --dobrze:#7bb0a0; --tlo-zle:#3a2b28; --tlo-dobrze:#2b352f;
  --uwaga:#e6b46a; --tlo-uwaga:#2e2413; --na-kolorze:#1f1e1d; --odp-nd:#a09e94;
  --dot:rgba(255,255,255,.05);
  --cien:0 1px 2px #0000000d, 0 10px 24px -14px #00000073;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--topbar) + 12px); }
body {
  margin:0; background:var(--bg);
  background-image:radial-gradient(var(--dot) 1px, transparent 1px);
  background-size:22px 22px;
  color:var(--text); font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body.app { padding-bottom:calc(var(--dolna) + env(safe-area-inset-bottom)); }
a { color:var(--clay); }
img { max-width:100%; }
h1, h2, h3 { color:var(--text); }
.pomin { position:absolute; left:-999px; top:8px; background:var(--surface); padding:8px 12px; border:1px solid var(--line); border-radius:var(--r); z-index:100; }
.pomin:focus { left:8px; }

/* ---------- pasek gorny ---------- */
.topbar { position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.topbar-w { max-width:1280px; margin:0 auto; padding:0 14px; min-height:var(--topbar); display:flex; align-items:center; gap:14px; }
.topbar-marka { display:flex; flex-direction:column; justify-content:center; flex:0 1 auto; min-width:0; max-width:42%; }
.marka { font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-2); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tytul-app { display:block; min-width:0; overflow:hidden; text-decoration:none; color:var(--text); font-family:var(--serif); font-weight:600; font-size:1.05rem; line-height:1.15; white-space:nowrap; }
.tytul-app b { display:block; overflow:hidden; text-overflow:ellipsis; font-weight:500; }
.tytul-app span { display:block; overflow:hidden; text-overflow:ellipsis; font-family:var(--sans); font-size:.68rem; color:var(--text-3); letter-spacing:.02em; }
.nav { display:none; gap:2px; margin-left:auto; }
.nav a { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border-radius:10px; text-decoration:none; color:var(--text-2); font-size:.86rem; white-space:nowrap; }
.nav a svg { width:16px; height:16px; }
.nav a:hover { color:var(--text); background:var(--surface-2); }
.nav a.aktywny { color:var(--text); background:var(--surface-2); box-shadow:inset 0 -2px 0 var(--clay); }
.topbar-prawa { margin-left:auto; display:flex; align-items:center; gap:8px; }
.nav ~ .topbar-prawa { margin-left:0; }
.chip-uzytkownik { display:none; align-items:center; gap:8px; padding:4px 10px 4px 6px; border:1px solid var(--line); border-radius:10px; text-decoration:none; color:var(--text); background:var(--surface); line-height:1.1; }
.chip-uzytkownik svg { width:18px; height:18px; color:var(--text-2); }
.chip-nazwa { font-size:.82rem; }
.chip-rola { display:block; font-size:.66rem; color:var(--text-3); }
.wyloguj-form { margin:0; }
.wyloguj { display:inline-flex; align-items:center; gap:6px; background:transparent; border:1px solid var(--line); border-radius:10px; padding:6px 10px; color:var(--text-2); cursor:pointer; font-size:.82rem; font-family:var(--sans); }
.wyloguj svg { width:16px; height:16px; }
.wyloguj span { display:none; }
.wyloguj:hover { color:var(--text); border-color:var(--text-3); }
/* Zainstaluj aplikacje (PWA): w pasku od 900 px, na telefonie w menu "Wiecej". */
.instaluj { display:none; align-items:center; gap:6px; white-space:nowrap; background:transparent; border:1px solid var(--line); border-radius:10px; padding:6px 10px; color:var(--text-2); cursor:pointer; font-size:.82rem; font-family:var(--sans); }
.instaluj svg { width:16px; height:16px; }
.instaluj span { display:none; }
.instaluj:hover { color:var(--text); border-color:var(--text-3); }
.instaluj[hidden], .instaluj-menu[hidden] { display:none !important; }
.nav .instaluj-menu { display:none; }
body.menu-otwarte .nav .instaluj-menu { display:flex; align-items:center; gap:6px; padding:12px 10px; font-size:1rem; border:0; border-radius:var(--r); background:transparent; color:var(--text); font-family:var(--sans); cursor:pointer; text-align:left; }
body.menu-otwarte .nav .instaluj-menu svg { width:20px; height:20px; color:var(--text-2); }
.topbar-motyw { display:flex; align-items:center; gap:10px; }
.topbar-motyw .zegar { display:none; width:38px; height:38px; }
.motyw { display:inline-flex; gap:2px; padding:3px; border:1px solid var(--line); border-radius:10px; background:transparent; }
.motyw button { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; border:0; border-radius:999px; background:transparent; color:var(--text-2); cursor:pointer; transition:color .15s, background-color .15s; }
.motyw button:hover { color:var(--text); }
.motyw button[aria-pressed="true"] { background:transparent; color:var(--clay); }
.motyw svg { width:14px; height:14px; }
.zegar svg { display:block; width:100%; height:100%; overflow:visible; }

@media (min-width: 900px) {
  .nav { display:flex; }
  .chip-uzytkownik { display:inline-flex; }
  .instaluj { display:inline-flex; }
  .nav .instaluj-menu { display:none !important; }
  .topbar-motyw .zegar { display:block; }
  body.app { padding-bottom:0; }
  .dolna { display:none !important; }
  /* Nawigacja na desktopie tylko ikonami; podpis pokazuje sam aktywny punkt.
     Dziewiec pozycji admina nie miesci sie z pelnymi podpisami nawet w kontenerze 1280 px. */
  .nav a span { display:none; }
  .nav a.aktywny span { display:inline; }
  .chip-nazwa, .chip-rola, .wyloguj span { display:none; }
}
/* Gdy jest miejsce: podpis konta (nazwisko + rola) i przycisku wylogowania. */
@media (min-width: 1180px) {
  .chip-nazwa, .chip-rola { display:block; }
  .wyloguj span { display:inline; }
}
/* Podpis "Zainstaluj" dopiero od 1360 px; wezej sama ikona z podpowiedzia (nazwa portalu sie miesci). */
@media (min-width: 1360px) {
  .instaluj span { display:inline; }
}

/* menu mobilne: nawigacja jako arkusz od dolu */
body.menu-otwarte .nav { display:flex; flex-direction:column; position:fixed; left:0; right:0; bottom:calc(var(--dolna) + env(safe-area-inset-bottom)); background:var(--surface); border-top:1px solid var(--line); padding:10px 12px 14px; z-index:45; box-shadow:0 -12px 30px -12px #00000040; max-height:70vh; overflow:auto; }
body.menu-otwarte .nav a { padding:12px 10px; font-size:1rem; border-radius:var(--r); }
body.menu-otwarte .nav a svg { width:20px; height:20px; }
body.menu-otwarte .zaslona-menu { position:fixed; inset:0; background:#00000055; z-index:44; }

/* ---------- nawigacja dolna (telefon) ---------- */
.dolna { position:fixed; left:0; right:0; bottom:0; z-index:46; display:grid; grid-template-columns:repeat(5, 1fr); background:var(--surface); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); min-height:var(--dolna); }
.dolna a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:8px 4px 6px; text-decoration:none; color:var(--text-2); font-size:.66rem; letter-spacing:.01em; }
.dolna a svg { width:22px; height:22px; }
.dolna a.aktywny { color:var(--clay); }
.dolna .dolna-plus svg { width:34px; height:34px; color:var(--przycisk); }
.dolna .dolna-plus span { color:var(--przycisk); font-weight:600; }

/* ---------- uklad ---------- */
.kontener { position:relative; max-width:1040px; margin:0 auto; padding:18px 14px 40px; }
.kontener.szeroka { max-width:1280px; }
.strona-glowa { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 18px; margin:6px 0 18px; }
.strona-glowa h1 { font-family:var(--serif); font-weight:500; font-size:clamp(1.7rem,4.5vw,2.4rem); line-height:1.1; letter-spacing:-.02em; margin:0; }
.podtytul { margin:6px 0 0; color:var(--text-2); font-size:.95rem; }
.akcje { display:flex; flex-wrap:wrap; gap:8px; }
.stopka { max-width:1040px; margin:40px auto 0; padding:22px 14px 30px; border-top:1px solid var(--line); color:var(--text-3); font-size:.8rem; }
.stopka a { color:var(--clay); text-decoration:none; }
.stopka a:hover { text-decoration:underline; }
.adres-kanoniczny { font-family:var(--mono); font-size:.7rem; }
body.app .stopka { padding-bottom:36px; }

/* strona prosta (logowanie, reset) */
.kontener-prosta { max-width:1040px; padding:34px 24px 88px; }
.gora { position:absolute; top:34px; right:24px; z-index:5; }
@media (max-width:720px) { .gora { position:static; justify-content:flex-end; margin:0 0 12px; } }
.naglowek-prosty { position:relative; margin-bottom:8px; }
.naglowek-prosty .marka { display:block; margin:0 0 16px; font-size:.72rem; letter-spacing:.18em; }
.naglowek-prosty h1 { font-family:var(--serif); font-weight:500; font-size:clamp(2.2rem,6vw,3.4rem); line-height:1.05; letter-spacing:-.02em; margin:0 0 14px; }
.naglowek-prosty h1 .firma { display:block; font-size:.42em; color:var(--text-2); letter-spacing:0; margin-top:8px; font-weight:400; }
.lead { font-family:var(--serif); font-weight:400; font-size:clamp(1.05rem,2.4vw,1.3rem); color:var(--text-2); margin:0; line-height:1.5; }
.naglowek-prosty { --zegar-rozmiar:clamp(104px,11vw,150px); }
.zegar-blok { position:absolute; right:0; top:52px; }
.zegar-blok .zegar { width:var(--zegar-rozmiar); height:var(--zegar-rozmiar); }
@media (max-width:720px) { .zegar-blok { display:none; } }
/* Miejsce na cyferblat: tekst naglowka konczy sie przed zegarem, a sam naglowek
   jest co najmniej tak wysoki jak zegar, zeby ten nie wchodzil na kolejna sekcje. */
@media (min-width:721px) {
  .naglowek-prosty:has(.zegar-blok) { padding-right:calc(var(--zegar-rozmiar) + 32px); min-height:calc(52px + var(--zegar-rozmiar) + 8px); }
}
.logowanie { max-width:420px; margin-top:44px; }

/* ---------- karty, sekcje ---------- */
.karta { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px; }
.karta + .karta { margin-top:14px; }
section { margin-top:28px; }
section:first-child { margin-top:0; }
.sekcja-glowa { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; padding-bottom:10px; margin-bottom:14px; border-bottom:1px solid var(--line); }
.sekcja-glowa h2 { font-family:var(--serif); font-weight:500; font-size:1.3rem; letter-spacing:-.01em; margin:0; }
.sekcja-glowa .liczba { font-family:var(--mono); font-size:.76rem; color:var(--text-3); margin-left:auto; white-space:nowrap; }
.sekcja-glowa .akcje { margin-left:auto; }
.kropka { width:9px; height:9px; border-radius:50%; flex:0 0 auto; align-self:center; background:var(--clay); }
.kolor-I .kropka, .kropka.I { background:var(--sky); }
.kolor-L .kropka, .kropka.L { background:var(--sea); }
.kolor-M .kropka, .kropka.M { background:var(--mineral); }
.kolor-S .kropka, .kropka.S { background:var(--gold); }
.kolor-P .kropka, .kropka.P { background:var(--plum); }
.kolor-sky { --akc:var(--sky); } .kolor-sea { --akc:var(--sea); } .kolor-mineral { --akc:var(--mineral); } .kolor-gold { --akc:var(--gold); } .kolor-plum { --akc:var(--plum); } .kolor-clay { --akc:var(--clay); }

.siatka { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:12px; }
.kafel { position:relative; display:flex; flex-direction:column; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px 16px 14px; min-height:110px; text-decoration:none; color:inherit; transition:transform .16s cubic-bezier(0,0,.2,1), border-color .16s, background-color .16s; }
.kafel::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--akc,var(--clay)); opacity:.9; border-top-left-radius:var(--r); border-bottom-left-radius:var(--r); }
a.kafel:hover, a.kafel:focus-visible { transform:translateY(-2px); border-color:color-mix(in srgb, var(--akc,var(--clay)) 55%, var(--line)); background:var(--surface-2); outline:none; }
.kafel h3 { font-family:var(--sans); font-weight:560; font-size:1rem; letter-spacing:-.01em; margin:0; }
.kafel p { margin:0; color:var(--text-2); font-size:.88rem; line-height:1.5; }
.kafel .adres, .mono { font-family:var(--mono); font-size:.74rem; color:var(--text-3); }
.kafel .meta { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin-top:auto; padding-top:6px; font-size:.78rem; color:var(--text-3); }

/* KPI */
.kpi-siatka { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
@media (min-width:700px) { .kpi-siatka { grid-template-columns:repeat(4, 1fr); } }
.kpi { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 14px 12px; text-decoration:none; color:inherit; display:block; }
.kpi-wartosc { font-family:var(--serif); font-weight:500; font-size:2rem; line-height:1; letter-spacing:-.02em; }
.kpi-wartosc small { font-size:.5em; color:var(--text-3); }
.kpi-etykieta { color:var(--text-2); font-size:.82rem; margin-top:6px; }
.kpi-dopisek { color:var(--text-3); font-size:.74rem; margin-top:2px; }
.kpi.zle .kpi-wartosc { color:var(--zle); }
.kpi.ok .kpi-wartosc { color:var(--dobrze); }
.kpi.uwaga .kpi-wartosc { color:var(--uwaga); }

/* ---------- proza ---------- */
.proza { color:var(--text-2); font-size:.95rem; line-height:1.65; text-align:left; }
.proza h3 { font-family:var(--sans); font-weight:560; font-size:1.02rem; color:var(--text); margin:18px 0 8px; }
.proza p { margin:0 0 12px; }
.proza ul, .proza ol { margin:0 0 12px; padding-left:20px; }
.proza li { margin:0 0 5px; }
.proza b { color:var(--text); font-weight:600; }
.proza code, code { font-family:var(--mono); font-size:.85em; background:var(--surface-2); border:1px solid var(--line-2); border-radius:4px; padding:1px 5px; }
.proza.drobna { font-size:.84rem; color:var(--text-3); }
.tekst-2 { color:var(--text-2); }
.tekst-3 { color:var(--text-3); }
.drobny { font-size:.82rem; }
.nowrap { white-space:nowrap; }
.prawo { text-align:right; }
.srodek { text-align:center; }
.ukryty { display:none !important; }
.wiersz { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; }
.odstep { margin-top:14px; }
.odstep-duzy { margin-top:24px; }

/* ---------- przyciski ---------- */
.glowny, .drugi, .niebezpieczny { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--sans); font-size:.9rem; border-radius:10px; padding:9px 18px; cursor:pointer; text-decoration:none; line-height:1.2; min-height:40px; }
.glowny { color:#fff; background:var(--przycisk); border:1px solid var(--przycisk); transition:filter .15s; }
.glowny:hover { filter:brightness(1.08); }
.drugi { color:var(--text-2); background:var(--surface); border:1px solid var(--line); transition:color .15s, border-color .15s; }
.drugi:hover { color:var(--text); border-color:var(--text-3); }
.niebezpieczny { color:var(--zle); background:var(--surface); border:1px solid var(--zle); }
.niebezpieczny:hover { background:var(--tlo-zle); }
.glowny svg, .drugi svg, .niebezpieczny svg { width:16px; height:16px; }
.maly { padding:5px 12px; font-size:.8rem; min-height:32px; }
.glowny:disabled, .drugi:disabled, button[disabled] { opacity:.55; cursor:not-allowed; }
.przyciski { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:8px; }
.przycisk-ikona { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--text-2); cursor:pointer; padding:0; }
.przycisk-ikona svg { width:16px; height:16px; }
.przycisk-ikona:hover { color:var(--text); border-color:var(--text-3); }

/* ---------- formularze ---------- */
.pole { margin-bottom:14px; }
.pole label, .etykieta { display:block; font-size:.82rem; color:var(--text-2); margin-bottom:5px; }
.pole .podpowiedz { display:block; font-size:.76rem; color:var(--text-3); margin-top:5px; line-height:1.5; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="time"], input[type="number"], input[type="search"], select, textarea {
  width:100%; padding:10px 12px; font-family:var(--sans); font-size:.95rem; color:var(--text); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); transition:border-color .15s; min-height:42px;
}
textarea { min-height:84px; resize:vertical; line-height:1.5; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--clay); box-shadow:0 0 0 3px color-mix(in srgb, var(--clay) 18%, transparent); }
select { appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position:calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size:6px 6px, 6px 6px; background-repeat:no-repeat; padding-right:34px; }
.pole-z-okiem { position:relative; display:block; }
.pole-z-okiem input { padding-right:74px; }
.oko { position:absolute; top:50%; right:6px; transform:translateY(-50%); font-family:var(--sans); font-size:.76rem; color:var(--text-2); background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:5px 12px; cursor:pointer; }
.oko:hover, .oko[aria-pressed="true"] { color:var(--text); border-color:var(--text-3); }
.oko:focus-visible { outline:2px solid var(--clay); outline-offset:1px; }
.pole-wybor { display:flex; align-items:flex-start; gap:10px; font-size:.9rem; color:var(--text-2); margin:0 0 14px; cursor:pointer; }
.pole-wybor input { width:18px; height:18px; margin-top:3px; accent-color:var(--przycisk); }
.siatka-pol { display:grid; grid-template-columns:minmax(0,1fr); gap:0 14px; }
@media (min-width:640px) { .siatka-pol { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .siatka-pol .pelna { grid-column:1 / -1; } }
@media (min-width:900px) { .siatka-pol.trzy { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.filtry { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; margin-bottom:14px; }
.filtry .pole { margin:0; flex:1 1 140px; }
.filtry .pole.szerokie { flex:2 1 220px; }
.filtry select, .filtry input { min-height:38px; padding:7px 10px; font-size:.88rem; }
.filtry .glowny, .filtry .drugi { min-height:38px; }
.komunikat { margin:0 0 16px; padding:12px 16px; border-radius:var(--r); border:1px solid var(--line); font-size:.92rem; background:var(--surface); }
.komunikat.dobry { border-color:var(--dobrze); background:var(--tlo-dobrze); }
.komunikat.zly { border-color:var(--zle); background:var(--tlo-zle); }
.komunikat.uwaga { border-color:var(--uwaga); background:var(--tlo-uwaga); }
.komunikat.info { border-color:var(--sky); }

/* ---------- plakietki, paski ---------- */
.plakietka { display:inline-block; font-size:.72rem; line-height:1.2; padding:3px 9px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2); color:var(--text-2); white-space:nowrap; vertical-align:middle; }
.plakietka.ok { color:var(--dobrze); border-color:color-mix(in srgb, var(--dobrze) 50%, var(--line)); background:var(--tlo-dobrze); }
.plakietka.ok-slabo { color:var(--dobrze); border-color:var(--line); background:var(--tlo-dobrze); border-style:dashed; }
.plakietka.zle { color:var(--zle); border-color:color-mix(in srgb, var(--zle) 50%, var(--line)); background:var(--tlo-zle); }
.plakietka.uwaga { color:var(--uwaga); border-color:color-mix(in srgb, var(--uwaga) 50%, var(--line)); background:var(--tlo-uwaga); }
.plakietka.info { color:var(--sky); border-color:color-mix(in srgb, var(--sky) 50%, var(--line)); }
.plakietka.szara { color:var(--text-3); }
.plakietka.neutralna { color:var(--text-2); }
.plakietka.warstwa { color:#fff; border-color:transparent; background:var(--akc, var(--text-3)); }
:root[data-theme="dark"] .plakietka.warstwa, :root:not([data-theme="light"]) .plakietka.warstwa { color:#1d1c19; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .plakietka.warstwa { color:#fff; } }
:root[data-theme="light"] .plakietka.warstwa { color:#fff; }
.pasek { display:inline-block; width:100%; height:8px; background:var(--line-2); border-radius:10px; overflow:hidden; vertical-align:middle; }
.pasek span { display:block; height:100%; background:var(--dobrze); border-radius:10px; transition:width .3s; }
.pasek.zle span { background:var(--zle); }
.pasek.uwaga span { background:var(--uwaga); }
.pasek.clay span { background:var(--clay); }

/* ---------- tabele ---------- */
.tabela-w { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); }
table.tabela { width:100%; border-collapse:collapse; font-size:.88rem; }
.tabela th, .tabela td { padding:9px 10px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line-2); }
.tabela th { font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); font-weight:500; background:var(--surface-2); position:sticky; top:0; white-space:nowrap; }
.tabela tbody tr:hover { background:var(--surface-2); }
.tabela tbody tr:last-child td { border-bottom:0; }
.tabela td.liczba, .tabela th.liczba { text-align:right; font-variant-numeric:tabular-nums; }
.tabela .waska { width:1%; white-space:nowrap; }
.tabela a.wiersz-link { color:inherit; text-decoration:none; font-weight:560; }
.tabela a.wiersz-link:hover { color:var(--clay); }
.tabela tr.przeterminowane td:first-child { box-shadow:inset 3px 0 0 var(--zle); }
.pusty { padding:28px 16px; text-align:center; color:var(--text-3); font-size:.92rem; }
.lista-kart { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.wiersz-karta { display:grid; grid-template-columns:auto 1fr auto; gap:6px 12px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; text-decoration:none; color:inherit; }
.wiersz-karta:hover { background:var(--surface-2); }
.wiersz-karta .data { font-family:var(--mono); font-size:.78rem; color:var(--text-3); white-space:nowrap; }
.wiersz-karta .tytul { font-weight:560; font-size:.95rem; }
.wiersz-karta .opis { grid-column:1 / -1; color:var(--text-2); font-size:.86rem; }

/* ---------- harmonogram roczny ---------- */
.rok-nawigacja { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rok-nawigacja .rok { font-family:var(--serif); font-size:1.6rem; font-weight:500; min-width:4ch; text-align:center; }
.zakladki { display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:14px; }
.zakladki a, .zakladki button { padding:8px 14px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--text-2); font-size:.9rem; text-decoration:none; cursor:pointer; font-family:var(--sans); margin-bottom:-1px; }
.zakladki a.aktywna, .zakladki button.aktywna { color:var(--text); border-bottom-color:var(--clay); }
.siatka-roczna-w { position:relative; overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); }
.siatka-roczna { border-collapse:separate; border-spacing:0; font-size:.72rem; min-width:100%; }
.siatka-roczna th, .siatka-roczna td { border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2); text-align:center; padding:0; height:34px; }
.siatka-roczna th { background:var(--surface-2); color:var(--text-3); font-weight:500; font-family:var(--mono); font-size:.66rem; }
.siatka-roczna th.miesiac { height:24px; border-bottom:1px solid var(--line); color:var(--text-2); text-transform:uppercase; letter-spacing:.06em; }
.siatka-roczna th.tydzien { min-width:30px; }
.siatka-roczna .warstwa { position:sticky; left:0; z-index:2; background:var(--surface); text-align:left; padding:0 10px; min-width:160px; font-family:var(--sans); font-size:.8rem; color:var(--text); border-right:1px solid var(--line); }
.siatka-roczna .warstwa small { display:block; color:var(--text-3); font-size:.68rem; }
.siatka-roczna td.dzis { background:color-mix(in srgb, var(--clay) 10%, transparent); }
.siatka-roczna td.weekend { background:color-mix(in srgb, var(--line-2) 60%, transparent); }
.siatka-roczna a.punkt, .siatka-roczna span.punkt { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:999px; font-family:var(--mono); font-size:.62rem; font-weight:600; text-decoration:none; margin:2px 1px; position:relative; z-index:1; }
/* Kolor znacznika: tlo i tekst tylko tutaj i w regulach statusu. Regula .siatka-roczna a.punkt
   wyzej nie moze ustawiac tla, bo ma wyzsza specyficznosc i gasila kolory statusow. */
.punkt { color:var(--surface); background:var(--text-3); }
.punkt.wykonany { background:var(--dobrze); }
.punkt.wykonany_po_terminie { background:var(--dobrze); box-shadow:inset 0 0 0 2px var(--surface), inset 0 0 0 3px var(--uwaga); }
.punkt.przeterminowany { background:var(--zle); }
.punkt.dzis { background:var(--clay); }
.punkt.wkrotce { background:var(--sky); }
.punkt.planowany { background:var(--surface); color:var(--akc, var(--text-2)); box-shadow:inset 0 0 0 2px var(--akc, var(--text-3)); }
.punkt.odwolany { background:transparent; color:var(--text-3); border:1px dashed var(--text-3); }
.punkt.przeniesiony { background:var(--surface); color:var(--text-3); border:1.5px dashed var(--text-3); font-weight:500; }
.punkt.przeniesiony:hover { border-color:var(--clay); color:var(--clay); }
.siatka-roczna tr[class*="kolor-"] td.warstwa { box-shadow:inset 3px 0 0 var(--akc, transparent); }
.strzalki-przeniesien { position:absolute; left:0; top:0; z-index:0; pointer-events:none; overflow:visible; color:var(--clay); }
.legenda { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.78rem; color:var(--text-2); margin-top:10px; }
.legenda span.punkt { display:inline-block; width:14px; height:14px; border-radius:999px; margin:0 5px 0 0; vertical-align:-2px; box-sizing:border-box; }
.siatka-roczna .wynik { display:block; font-family:var(--mono); font-size:.6rem; color:var(--text-3); line-height:1; }

/* kalendarz miesieczny */
.kal { display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; }
.kal .dzien-nazwa { text-align:center; font-family:var(--mono); font-size:.68rem; color:var(--text-3); text-transform:uppercase; padding:4px 0; }
.kal .dzien { min-height:64px; background:var(--surface); border:1px solid var(--line-2); border-radius:4px; padding:4px; font-size:.72rem; }
.kal .dzien.poza { opacity:.45; }
.kal .dzien.dzis { border-color:var(--clay); box-shadow:inset 0 0 0 1px var(--clay); }
.kal .dzien .nr { font-family:var(--mono); color:var(--text-3); }
.kal .dzien a { display:block; margin-top:3px; padding:2px 5px; border-radius:4px; color:var(--surface); text-decoration:none; font-size:.66rem; line-height:1.3; background:var(--akc, var(--text-3)); }
.kal .dzien a.przeniesiony { background:transparent; color:var(--akc, var(--text-2)); border:1px dashed var(--akc, var(--text-3)); }
@media (max-width:640px) { .kal .dzien { min-height:48px; } .kal .dzien a { font-size:.6rem; padding:1px 3px; } }

/* ---------- wykonanie audytu ---------- */
.postep { position:sticky; top:var(--topbar); z-index:30; background:var(--bg); padding:8px 0 10px; margin:-8px 0 10px; }
.postep .pasek { height:10px; }
.postep .info { display:flex; justify-content:space-between; font-size:.78rem; color:var(--text-2); margin-top:4px; font-family:var(--mono); }
.pytanie { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px; margin-bottom:12px; scroll-margin-top:calc(var(--topbar) + 70px); }
.pytanie.z-odpowiedzia-T { border-left:4px solid var(--dobrze); }
.pytanie.z-odpowiedzia-N { border-left:4px solid var(--zle); }
.pytanie.z-odpowiedzia-ND { border-left:4px solid var(--text-3); }
.pytanie-glowa { display:flex; gap:10px; align-items:flex-start; }
.pytanie-nr { font-family:var(--mono); font-size:.78rem; color:var(--text-3); min-width:2.2ch; padding-top:3px; }
.pytanie-tresc { font-size:1rem; line-height:1.45; margin:0; font-weight:500; }
.pytanie details { margin-top:8px; }
.pytanie summary { cursor:pointer; font-size:.8rem; color:var(--clay); list-style:none; }
.pytanie summary::-webkit-details-marker { display:none; }
.pytanie summary::before { content:"+ "; font-family:var(--mono); }
.pytanie details[open] summary::before { content:"\2212 "; }
.pytanie .wyjasnienie { font-size:.84rem; color:var(--text-2); margin:6px 0 0; white-space:pre-line; }
.pytanie .wyjasnienie b { color:var(--text); }
.odp-przyciski { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:12px; }
.odp { min-height:54px; border-radius:var(--r); border:1px solid var(--line); background:var(--surface-2); color:var(--text); font-family:var(--sans); font-size:1rem; font-weight:600; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; -webkit-tap-highlight-color:transparent; }
.odp small { font-weight:400; font-size:.68rem; color:var(--text-3); }
.odp[aria-pressed="true"] small { color:inherit; opacity:.85; }
.odp.T[aria-pressed="true"] { background:var(--dobrze); color:var(--na-kolorze); border-color:var(--dobrze); }
.odp.N[aria-pressed="true"] { background:var(--zle); color:var(--na-kolorze); border-color:var(--zle); }
.odp.ND[aria-pressed="true"] { background:var(--odp-nd); color:var(--na-kolorze); border-color:var(--odp-nd); }
.odp:active { transform:scale(.98); }
.pytanie-dol { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:10px; }
.pytanie textarea { margin-top:10px; min-height:66px; }
.pytanie .komentarz-wymagany { border-color:var(--zle); }
.przycisk-aparat { display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border:1px dashed var(--line); border-radius:10px; background:var(--surface); color:var(--text-2); font-size:.82rem; cursor:pointer; font-family:var(--sans); }
.przycisk-aparat svg { width:18px; height:18px; }
.przycisk-aparat input { display:none; }
.zdjecia-lista { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.miniatura { position:relative; width:88px; height:88px; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:var(--surface-2); display:block; }
.miniatura img { width:100%; height:100%; object-fit:cover; display:block; }
.miniatura .usun { position:absolute; top:3px; right:3px; width:22px; height:22px; border-radius:999px; border:0; background:#000000aa; color:#fff; cursor:pointer; font-size:14px; line-height:1; padding:0; }
.miniatura .rodzaj { position:absolute; left:0; right:0; bottom:0; font-size:.6rem; padding:2px 4px; background:#000000aa; color:#fff; text-align:center; }
.miniatura.wysylanie::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(45deg, #ffffff55 0 8px, #00000022 8px 16px); animation:mig 1s linear infinite; }
@keyframes mig { to { background-position:32px 0; } }
.podsumowanie-audytu { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; text-align:center; margin:12px 0; }
.podsumowanie-audytu div { background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r); padding:10px 4px; }
.podsumowanie-audytu b { display:block; font-family:var(--serif); font-size:1.5rem; font-weight:500; }
.podsumowanie-audytu small { color:var(--text-3); font-size:.7rem; overflow-wrap:anywhere; }
.pasek-dolny { position:sticky; bottom:calc(var(--dolna) + env(safe-area-inset-bottom)); z-index:35; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:10px 12px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; box-shadow:var(--cien); margin-top:14px; }
@media (min-width:900px) { .pasek-dolny { bottom:12px; } }
.tryb-pulpit .odp-przyciski { max-width:420px; }
.tryb-pulpit .pytanie { display:grid; grid-template-columns:1fr 420px; gap:0 20px; align-items:start; }
.tryb-pulpit .pytanie-glowa, .tryb-pulpit .pytanie details { grid-column:1; }
.tryb-pulpit .odp-przyciski { grid-column:2; grid-row:1; margin-top:0; }
.tryb-pulpit .pytanie-dol, .tryb-pulpit .pytanie textarea, .tryb-pulpit .zdjecia-lista { grid-column:1 / -1; }
/* Samoocena z kodu QR (bez logowania) */
.kiosk-pytanie { border:0; border-top:1px solid var(--line-2); margin:0; padding:12px 0; }
.kiosk-pytanie legend { font-weight:600; line-height:1.35; padding:0; margin-bottom:8px; float:left; width:100%; }
.kiosk-odp { clear:both; display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.kiosk-odp label { position:relative; }
.kiosk-odp input { position:absolute; opacity:0; inset:0; margin:0; }
.kiosk-odp span { display:flex; align-items:center; justify-content:center; min-height:52px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2); font-weight:600; cursor:pointer; }
.kiosk-odp input:focus-visible + span { outline:2px solid var(--clay); outline-offset:2px; }
.kiosk-T input:checked + span { background:var(--dobrze); color:var(--na-kolorze); border-color:var(--dobrze); }
.kiosk-N input:checked + span { background:var(--zle); color:var(--na-kolorze); border-color:var(--zle); }
.kiosk-ND input:checked + span { background:var(--odp-nd); color:var(--na-kolorze); border-color:var(--odp-nd); }
.kiosk-pytanie textarea { display:none; margin-top:8px; width:100%; }
.kiosk-pytanie:has(.kiosk-N input:checked) textarea, .kiosk-pytanie.bhp:has(.kiosk-ND input:checked) textarea { display:block; }
/* Starsze telefony bez :has(): pole komentarza zawsze widoczne. */
@supports not selector(:has(a)) { .kiosk-pytanie textarea { display:block; } }
/* Pulpit "Moje dzis" (lider, mistrz, koordynator) */
.moje-dzis { margin-top:0; }
.moje-przyciski { margin:0 0 12px; }
.moje-przyciski a { min-height:48px; }
.moje-wiersz { padding:10px 0; border-top:1px solid var(--line-2); }
.moje-wiersz > a { text-decoration:none; color:var(--text); }
.moje-wiersz > a b { font-family:var(--serif); font-size:1.4rem; font-weight:500; margin-right:4px; }
.moje-wiersz ul { margin:6px 0 0; padding-left:18px; color:var(--text-2); font-size:.9rem; }
.moje-wiersz li { margin:2px 0; }
/* Ekran audytu: krotki na telefonie (pakiet 3) */
.pytanie:not(.z-odpowiedzia-N):not(.rozwiniete) [data-komentarz],
.pytanie:not(.z-odpowiedzia-N):not(.rozwiniete) .pytanie-dol,
.pytanie:not(.z-odpowiedzia-N):not(.rozwiniete) .zdjecia-lista { display:none; }
.uwaga-plus { display:none; margin-top:8px; min-height:44px; padding:0 12px; border:1px dashed var(--line); border-radius:var(--r); background:transparent; color:var(--text-2); font:inherit; font-size:.85rem; cursor:pointer; }
.pytanie:not(.z-odpowiedzia-N):not(.rozwiniete) .uwaga-plus { display:inline-flex; align-items:center; }
.pytanie-dol .drugi.maly, .pytanie-dol .przycisk-aparat { min-height:48px; }
.miniatura .usun, .miniatura .ustaw-miejsce { width:40px; height:40px; }
.wzorzec { display:flex; gap:12px; align-items:center; margin:0 0 12px; padding:8px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); color:var(--text); text-decoration:none; }
.wzorzec img { width:96px; height:72px; object-fit:cover; border-radius:6px; flex:0 0 auto; }
.wzorzec span { display:flex; flex-direction:column; gap:2px; }
.wzorzec small { color:var(--text-2); }
.wzorzec.maly { margin:10px 0 0; padding:6px; }
.wzorzec.maly img { width:64px; height:48px; }
.wzorzec.brak { display:block; color:var(--text-2); }
@media (max-width:720px) {
  body.ekran-audytu { padding-bottom:env(safe-area-inset-bottom); }
  .ekran-audytu .dolna { display:none !important; }
  .ekran-audytu .pasek-dolny { bottom:calc(6px + env(safe-area-inset-bottom)); padding:6px 8px; gap:6px; }
  .ekran-audytu .pasek-dolny .podsumowanie-audytu { gap:4px; }
  .ekran-audytu .pasek-dolny .podsumowanie-audytu div { padding:2px 2px; }
  .ekran-audytu .pasek-dolny .podsumowanie-audytu b { font-size:1rem; display:inline; }
  .ekran-audytu .pasek-dolny .podsumowanie-audytu small { font-size:.62rem; }
  .ekran-audytu .postep { padding:4px 0 6px; }
}
.bhp-usunieto, .bhp-uwaga, .bhp-nd { display:none; }
/* N/D w pytaniu BHP wymaga komentarza: pole widoczne od razu. */
.pytanie.bhp.z-odpowiedzia-ND [data-komentarz] { display:block; }
.pytanie.bhp.z-odpowiedzia-ND .bhp-nd { display:block; margin:6px 0 0; color:var(--text-2); }
.pytanie.bhp.z-odpowiedzia-N .bhp-usunieto { display:flex; align-items:center; gap:10px; min-height:48px; margin-top:10px; padding:6px 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2); font-weight:600; cursor:pointer; }
.pytanie.bhp.z-odpowiedzia-N .bhp-usunieto input { width:24px; height:24px; margin:0; }
.pytanie.bhp.z-odpowiedzia-N .bhp-uwaga { display:block; margin:6px 0 0; color:var(--text-2); }
.tryb-pulpit .bhp-usunieto, .tryb-pulpit .bhp-uwaga, .tryb-pulpit .bhp-nd, .tryb-pulpit .uwaga-plus, .tryb-pulpit .wzorzec.maly { grid-column:1 / -1; justify-self:start; }
.rodzaj-audytu { border:0; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rodzaj-audytu legend { grid-column:1 / -1; margin-bottom:6px; }
.wybor-kafel { display:flex; gap:10px; align-items:flex-start; min-height:56px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2); cursor:pointer; }
.wybor-kafel input { width:22px; height:22px; margin:2px 0 0; flex:0 0 auto; }
.wybor-kafel span { display:flex; flex-direction:column; gap:2px; }
.wybor-kafel small { color:var(--text-2); font-size:.8rem; }
.wybor-kafel:has(input:checked) { border-color:var(--clay); box-shadow:inset 0 0 0 1px var(--clay); }
@media (max-width:520px) { .rodzaj-audytu { grid-template-columns:1fr; } }
.skrot { display:inline-block; font-family:var(--mono); font-size:.66rem; border:1px solid var(--line); border-radius:4px; padding:0 4px; color:var(--text-3); margin-left:4px; }

/* ---------- okno dialogowe ---------- */
dialog.okno { border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--text); padding:0; width:min(560px, calc(100% - 24px)); max-height:calc(100vh - 40px); box-shadow:var(--cien); }
dialog.okno::backdrop { background:#00000066; backdrop-filter:blur(2px); }
dialog.okno .okno-glowa { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); }
dialog.okno .okno-glowa h2 { margin:0; font-family:var(--serif); font-weight:500; font-size:1.2rem; }
dialog.okno .okno-tresc { padding:16px; overflow:auto; max-height:calc(100vh - 160px); }
dialog.okno .okno-stopka { padding:12px 16px; border-top:1px solid var(--line); display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.zamknij-okno { border:0; background:transparent; color:var(--text-2); font-size:1.4rem; cursor:pointer; line-height:1; padding:4px 8px; }
/* Co nowego po aktualizacji: szersze okno na wyraznie rozmytym tle (jak w Monitorze OEE). */
dialog.okno-co-nowego { width:min(720px, calc(100% - 24px)); border-color:var(--clay); }
dialog.okno-co-nowego::backdrop { background:#0000004d; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
dialog.okno-co-nowego[open] { display:flex; flex-direction:column; max-height:calc(100dvh - 24px); }
dialog.okno-co-nowego .okno-tresc { flex:1 1 auto; min-height:0; max-height:none; overflow-x:hidden; }
dialog.okno-co-nowego .okno-stopka { flex:0 0 auto; }
dialog.okno-co-nowego .okno-stopka > * { flex:1 1 0; justify-content:center; text-align:center; white-space:nowrap; }
@media (min-width:560px) { dialog.okno-co-nowego .okno-stopka > * { flex:0 0 auto; } }
.co-nowego-omowienie { margin:0 0 12px; line-height:1.55; }
.co-nowego-lista { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.co-nowego-lista .wersja-zmian::before { display:none; }
dialog.okno-co-nowego .okno-stopka a.drugi { text-decoration:none; }

/* ---------- toasty ---------- */
.toasty { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--dolna) + 12px + env(safe-area-inset-bottom)); z-index:60; display:flex; flex-direction:column; gap:8px; pointer-events:none; width:min(92vw, 420px); }
@media (min-width:900px) { .toasty { bottom:20px; } }
.toast { background:var(--text); color:var(--bg); padding:10px 14px; border-radius:var(--r); font-size:.88rem; box-shadow:var(--cien); animation:toast-in .2s ease-out; pointer-events:auto; }
.toast.zly { background:var(--zle); color:var(--na-kolorze); }
.toast.dobry { background:var(--dobrze); color:var(--na-kolorze); }
@keyframes toast-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.offline-pasek { position:fixed; top:var(--topbar); left:0; right:0; z-index:39; background:var(--uwaga); color:var(--na-kolorze); text-align:center; font-size:.8rem; padding:5px 10px; }

/* ---------- wykresy SVG ---------- */
.wykres { width:100%; height:auto; display:block; overflow:visible; }
.wykres text { font-family:var(--sans); font-size:11px; fill:var(--text-2); }
.wykres .os { stroke:var(--line); }
.wykres .slupek { fill:var(--clay); }
.wykres .slupek.ok { fill:var(--dobrze); }
.wykres .slupek.zle { fill:var(--zle); }
.wykres .slupek.szary { fill:var(--text-3); }
.wykres .linia { fill:none; stroke:var(--clay); stroke-width:2; }
.wykres .cel { stroke:var(--dobrze); stroke-dasharray:4 4; }
.pareto-wiersz { display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line-2); font-size:.88rem; }
.pareto-wiersz .pasek { grid-column:1 / -1; height:6px; }
.pareto-wiersz b { font-family:var(--mono); font-weight:500; }

/* ---------- protokol i druk ---------- */
.protokol-naglowek { display:grid; grid-template-columns:repeat(2, 1fr); gap:6px 18px; font-size:.9rem; }
@media (min-width:700px) { .protokol-naglowek { grid-template-columns:repeat(3, 1fr); } }
.protokol-naglowek > div > span:first-child { display:block; font-size:.72rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.06em; }
.protokol-odp { font-family:var(--mono); font-weight:600; }
.protokol-odp.T { color:var(--dobrze); } .protokol-odp.N { color:var(--zle); } .protokol-odp.ND { color:var(--text-3); }
.galeria { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; }
.galeria a { display:block; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface-2); }
.galeria img { width:100%; height:130px; object-fit:cover; display:block; }
.galeria figcaption { font-size:.72rem; color:var(--text-3); padding:4px 6px; }
@media print {
  .topbar, .dolna, .stopka .adres-kanoniczny, .akcje, .toasty, .postep, .pasek-dolny, .nie-drukuj, .motyw, .zegar { display:none !important; }
  body { background:#fff; color:#000; font-size:11pt; padding:0; }
  .kontener { max-width:none; padding:0; }
  .karta, .tabela-w, .pytanie { border-color:#999; break-inside:avoid; }
  a { color:inherit; text-decoration:none; }
  .protokol-odp.T { color:#1c5a3a; } .protokol-odp.N { color:#a02010; }
  .stopka { margin-top:20px; font-size:9pt; color:#555; }
}

/* ---------- wiadomosci e-mail: formularz tekstow i podglad listu ---------- */
.wiad-uklad { display:grid; grid-template-columns:1fr; gap:16px; align-items:start; }
@media (min-width:1000px) { .wiad-uklad { grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); } .wiad-podglad { position:sticky; top:calc(var(--topbar) + 12px); } }
.wiad-uklad .karta { margin:0; }
.wiad-zmienne { margin:4px 0 14px; }
.znacznik-zmiennej { display:inline-block; margin:0 6px 6px 0; padding:3px 9px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); color:var(--text-2); font-family:var(--mono); font-size:.74rem; cursor:pointer; }
.znacznik-zmiennej:hover { border-color:var(--clay); color:var(--clay); }
.wiad-koperta { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:0 0 8px; font-size:.9rem; }
.wiad-koperta dt { font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-3); padding-top:3px; }
.wiad-koperta dd { margin:0; overflow-wrap:anywhere; }
#wiad-ramka { display:block; width:100%; height:520px; border:1px solid var(--line); border-radius:var(--r); background:#fff; margin-top:8px; }

/* Zmiana motywu: miekki, iskrzacy pas od lewej do prawej (wspolne.js, View Transitions) */
::view-transition-old(root), ::view-transition-new(root) { animation:none; mix-blend-mode:normal; }
::view-transition-new(root) { -webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 60%); mask-image:linear-gradient(90deg,#000 40%,transparent 60%); -webkit-mask-size:250% 100%; mask-size:250% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:100% 0; mask-position:100% 0; }
::view-transition-group(iskry-motywu), ::view-transition-old(iskry-motywu), ::view-transition-new(iskry-motywu) { animation:none; }
::view-transition-old(iskry-motywu) { display:none; }
.iskry-motywu { position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:2147483000; view-transition-name:iskry-motywu; }
.zmiana-motywu *, .zmiana-motywu *::before, .zmiana-motywu *::after { transition:none !important; }

/* Przelacznik jezyka */
/* Pigulka PL / EN obok przelacznika motywu: ta sama wysokosc (28 px), ramka i tlo co .motyw. */
.przel-jezyk { display:inline-flex; align-items:center; gap:2px; padding:3px; flex:0 0 auto; border:1px solid var(--line); border-radius:10px; background:transparent; }
.przel-jezyk a { display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:28px; padding:0 6px; border-radius:10px; font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.04em; line-height:1; text-decoration:none; color:var(--text-3); transition:color .15s, background-color .15s; }
.przel-jezyk a:hover { color:var(--text); }
.przel-jezyk a[aria-current="true"] { background:transparent; color:var(--clay); }
.gora { display:flex; align-items:center; gap:8px; }
/* W menu mobilnym (arkusz "Wiecej") przelacznik jest ostatnia pozycja; w pasku tylko od 600 px. */
.nav .przel-jezyk.w-menu { display:none; }
body.menu-otwarte .nav .przel-jezyk.w-menu { display:inline-flex; align-self:flex-start; margin:8px 0 0 6px; }
body.menu-otwarte .nav .przel-jezyk.w-menu a { padding:0 10px; font-size:.8rem; border-radius:10px; }
@media (max-width:599px) { .topbar-motyw .przel-jezyk { display:none; } }
@media (min-width:900px) { .nav .przel-jezyk.w-menu { display:none !important; } }
@media print { .przel-jezyk { display:none !important; } }
/* Arkusz menu mobilnego (i przelacznik w nim) byl poza ekranem: backdrop-filter paska tworzy
   blok zawierajacy dla position:fixed, wiec .nav liczyla bottom od paska, nie od okna.
   Przy otwartym menu pasek bez rozmycia i nad zaslona. */
body.menu-otwarte .topbar { backdrop-filter:none; -webkit-backdrop-filter:none; z-index:47; }

/* Waski telefon (do 479 px): wiersz listy w jednej kolumnie (data, opis, status z akcja),
   podpis sekcji moze sie zawinac; zadna czesc wiersza nie rozpycha strony. */
.wiersz-karta > * { min-width:0; }
@media (max-width:479px) {
  .wiersz-karta { grid-template-columns:minmax(0,1fr); }
  .wiersz-karta .data { grid-column:1 / -1; white-space:normal; }
  .wiersz-karta .wiersz { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
  .sekcja-glowa .liczba { white-space:normal; }
}

/* Raport na przeglad zarzadzania: podglad strony A4 */
.przeglad-ramka { margin-top:14px; border:1px solid var(--line); border-radius:var(--r); background:#fff; overflow:hidden; box-shadow:var(--cien); }
.przeglad-ramka img { display:block; width:100%; height:auto; }

/* Karta zmian: os wersji */
.os-zmian { list-style:none; margin:18px 0 0; padding:0 0 0 22px; border-left:2px solid var(--line); display:grid; gap:18px; }
.wersja-zmian { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px 12px; }
.wersja-zmian::before { content:""; position:absolute; left:-30px; top:18px; width:12px; height:12px; border-radius:50%; background:var(--surface); border:2px solid var(--text-3); }
.wersja-zmian.najnowsza::before { background:var(--clay); border-color:var(--clay); box-shadow:0 0 0 4px color-mix(in srgb, var(--clay) 22%, transparent); }
.wersja-glowa { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; margin-bottom:8px; }
.wersja-nr { font-family:var(--serif); font-weight:600; font-size:1.35rem; letter-spacing:-.01em; }
.wersja-glowa time { font-family:var(--mono); font-size:.78rem; color:var(--text-3); }
.wersja-zmian ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.wersja-zmian ul li { display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:baseline; line-height:1.5; }
.wersja-zmian ul li .plakietka { min-width:76px; justify-content:center; text-align:center; }
@media (max-width:479px) { .wersja-zmian ul li { grid-template-columns:minmax(0,1fr); gap:4px; } .wersja-zmian ul li .plakietka { justify-self:start; min-width:0; } }
.karta-zmian-link { position:relative; white-space:nowrap; }
.karta-zmian-link .kropka-nowa { display:none; width:7px; height:7px; border-radius:50%; background:var(--clay); margin-right:5px; vertical-align:1px; }
.karta-zmian-link.nowa .kropka-nowa { display:inline-block; }

/* Zegar (jak w portalach z 26.09.2026): po najechaniu tarcza sie powieksza, po zjechaniu szybko wraca.
   Tlo i cien, zeby powiekszona tarcza byla czytelna nad trescia. */
.zegar { position:relative; border-radius:50%; transform-origin:top right; transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.zegar:hover { z-index:60; transform:scale(3); background:var(--surface); box-shadow:0 10px 30px -10px rgba(0,0,0,.35); transition-duration:.25s; }
.zegar-blok { z-index:5; }
.zegar-blok .zegar:hover { transform:scale(1.9); }
@media (prefers-reduced-motion: reduce) { .zegar { transition:none; } }

/* Kafelek miejsca (obszar, stanowisko) ze zdjeciem z hali po najechaniu. */
.miejsce { text-decoration: underline dotted var(--text-3); text-underline-offset: 3px; cursor: default; }
.miejsce:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; border-radius: 3px; }
.kafel-miejsca { position: fixed; z-index: 80; display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 18px 40px -12px #00000055; pointer-events: none; transform-origin: left top; animation: kafel-miejsca .18s cubic-bezier(.2,.8,.2,1) both; text-align: left; }
.kafel-miejsca-obraz { display: block; aspect-ratio: 8 / 5; background: var(--surface-2); }
.kafel-miejsca-obraz img, .kafel-miejsca-obraz svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.kafel-miejsca-podpis { display: block; padding: 8px 12px 10px; font-size: .85rem; line-height: 1.35; }
.kafel-miejsca-podpis b { display: block; color: var(--text); }
.kafel-miejsca-podpis span { display: block; color: var(--text-2); font-size: .75rem; }
@keyframes kafel-miejsca { from { opacity: 0; transform: translateY(4px) scale(.94); } }
@media (prefers-reduced-motion: reduce) { .kafel-miejsca { animation: none; } }
@media print { .kafel-miejsca { display: none; } .miejsce { text-decoration: none; } }

/* Ustawienia: zdjecia obszarow i stanowisk. */
.miejsca-zdjecia { width: 100%; border-collapse: collapse; margin: 10px 0 4px; font-size: .9rem; }
.miejsca-zdjecia td { border-top: 1px solid var(--line-2); padding: 6px 8px; vertical-align: middle; }
.miejsca-zdjecia img { width: 64px; height: 40px; object-fit: cover; border-radius: 4px; display: block; border: 1px solid var(--line); }
.miejsca-zdjecia form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.plik-przycisk { position: relative; overflow: hidden; }
.plik-przycisk input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.miniatura .ustaw-miejsce { position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:999px; border:0; background:#000000aa; color:#fff; cursor:pointer; padding:0; display:grid; place-items:center; }
.miniatura .ustaw-miejsce svg { width:13px; height:13px; }

/* Raporty z przegladu portalu */
.ustalenia-przegladu { margin:0; padding-left:1.4em; display:grid; gap:14px; }
.ustalenia-przegladu li { line-height:1.55; padding-left:4px; }
.ustalenia-przegladu p { margin:4px 0 0; }

/* Uzytkownicy: tabela miesci sie w stronie; login i e-mail pod nazwiskiem, przyciski w rownej kolumnie. */
.wizualnie-ukryte { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.osoba-konta > * { display:block; }
.osoba-konta .drobny { margin-top:2px; overflow-wrap:anywhere; }
.akcje-konta { display:grid; gap:6px; min-width:132px; }
.akcje-konta form { display:block !important; margin:0; }
.akcje-konta .drugi { width:100%; justify-content:center; text-align:center; white-space:nowrap; }

/* ---------------------------------------------------------------- Program 5S */
.plakietka[class*=" s-"] { font-weight:600; color:var(--k); border-color:color-mix(in srgb, var(--k) 45%, var(--line)); background:color-mix(in srgb, var(--k) 9%, var(--surface)); }
.s-clay { --k:var(--clay); } .s-sky { --k:var(--sky); } .s-mineral { --k:var(--mineral); }
.s-gold { --k:var(--gold); } .s-plum { --k:var(--plum); } .s-sea { --k:var(--sea); } .s-neutralna { --k:var(--text-2); }
.grupa-s { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin:22px 0 8px; padding:0 0 6px; border-bottom:2px solid color-mix(in srgb, var(--k) 55%, var(--line)); font-family:var(--serif); font-weight:500; font-size:1.05rem; }
.grupa-s small { font-family:var(--sans); font-size:.8rem; color:var(--text-2); font-weight:400; }
.radar { width:100%; max-width:340px; height:auto; display:block; margin:0 auto; overflow:visible; }
.radar-os { font:600 9px var(--sans); fill:var(--text); }
.radar-os .radar-proc { font-weight:400; fill:var(--text-2); }
.radar-skala { font:7px var(--sans); fill:var(--text-3); }
.radar-uklad { display:grid; gap:14px; align-items:center; }
@media (min-width:860px) { .radar-uklad { grid-template-columns:minmax(260px, 340px) 1fr; } }
.legenda { display:flex; flex-wrap:wrap; gap:6px 16px; justify-content:center; margin-top:6px; font-size:.8rem; color:var(--text-2); }
.legenda i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.tabela-s .pasek-komorka { min-width:170px; }
.tabela-s .pasek-komorka .pasek { width:calc(100% - 52px); display:inline-block; vertical-align:middle; }
.trend { width:100%; height:auto; display:block; }
.trend-os { font:9px var(--sans); fill:var(--text-3); }
.haslo-dnia { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; margin:14px 0 0; padding:14px 18px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--clay); box-shadow:var(--cien); color:var(--text); text-decoration:none; }
.haslo-dnia:hover { border-color:color-mix(in srgb, var(--clay) 40%, var(--line)); }
.haslo-etykieta { font:.72rem var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--clay); }
.haslo-tekst { font-family:var(--serif); font-weight:500; font-size:1.15rem; }
.zespol-wiersz { display:grid; grid-template-columns:34px 1fr auto; gap:4px 12px; align-items:center; padding:10px 0; border-top:1px solid var(--line-2); }
.zespol-wiersz:first-of-type { border-top:0; }
.zespol-wiersz .pasek { grid-column:2 / 4; }
.zespol-miejsce { width:30px; height:30px; border-radius:999px; display:grid; place-items:center; font:600 .9rem var(--serif); background:var(--surface-2); border:1px solid var(--line); color:var(--text-2); grid-row:span 2; }
.zespol-miejsce.m1 { background:color-mix(in srgb, var(--gold) 22%, var(--surface)); border-color:var(--gold); color:var(--text); }
.zespol-nazwa { display:flex; flex-direction:column; gap:2px; min-width:0; }
.zespol-wynik { font-family:var(--serif); font-size:1.25rem; font-weight:500; }
.usun-zdjecie { position:absolute; top:4px; right:4px; width:26px; height:26px; border-radius:999px; border:0; background:#000a; color:#fff; cursor:pointer; font-size:16px; line-height:1; }
.siatka-pol > .karta { min-width:0; }
.kafle-materialy { display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); }
.kafel-m { display:flex; flex-direction:column; gap:6px; padding:16px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); box-shadow:var(--cien); color:var(--text); text-decoration:none; }
.kafel-m:hover { border-color:color-mix(in srgb, var(--clay) 40%, var(--line)); }
.kafel-m b { font-family:var(--serif); font-weight:500; font-size:1.05rem; }
.kafel-m > span:last-child { font-size:.86rem; color:var(--text-2); }
.kafel-ikona { width:36px; height:36px; display:grid; place-items:center; color:var(--k); background:none; }
.kafel-ikona svg { width:20px; height:20px; }
.filtr-hasel { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
.filtr-hasel a { font-size:.8rem; padding:5px 11px; border-radius:10px; border:1px solid var(--line); color:var(--text-2); text-decoration:none; background:var(--surface-2); }
.filtr-hasel a.aktywny { background:var(--clay); border-color:var(--clay); color:#fff; }
.pytanie-testu { margin:12px 0 0; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); }
.pytanie-testu legend { float:left; width:100%; padding:0; margin:0 0 10px; font-weight:600; line-height:1.4; }
.pytanie-testu.dobrze { border-left:4px solid var(--dobrze); }
.pytanie-testu.zle { border-left:4px solid var(--zle); }
.odpowiedz-testu { display:flex; gap:10px; align-items:flex-start; padding:9px 10px; margin:0 0 6px; border-radius:8px; border:1px solid var(--line-2); cursor:pointer; clear:both; }
.odpowiedz-testu:hover { background:var(--surface-2); }
.odpowiedz-testu input { margin-top:3px; flex:0 0 auto; }
.odpowiedz-testu.poprawna { border-color:var(--dobrze); background:var(--tlo-dobrze); }
.odpowiedz-testu.bledna { border-color:var(--zle); background:var(--tlo-zle); }
.pytanie-testu .wyjasnienie { margin:8px 0 0; font-size:.86rem; color:var(--text-2); }
.macierz-s td.komorka-s { font-weight:600; }
.macierz-s td.komorka-s.ok { background:var(--tlo-dobrze); color:var(--dobrze); }
.macierz-s td.komorka-s.uwaga { background:var(--tlo-uwaga); color:var(--uwaga); }
.macierz-s td.komorka-s.zle { background:var(--tlo-zle); color:var(--zle); }
/* Program 5S: marka nigdy sie nie ucina; menu ma 12 pozycji, wiec do 1180 px aktywny punkt tez bez podpisu. */
.topbar-marka { flex:0 0 auto; max-width:none; }
.tytul-app b { overflow:visible; }
.tytul-app span { max-width:150px; }
@media (min-width: 900px) and (max-width: 1179px) {
  .nav a { padding:7px 8px; }
  .nav a.aktywny span { display:none; }
}
/* Kolumna Lp. dokladana arkuszem (zasada: kazda tabela zaczyna sie od Lp.). */
.tabela.lp { counter-reset:lp; }
.tabela.lp thead tr::before { content:"Lp."; display:table-cell; padding:9px 10px; width:1%; white-space:nowrap; font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); font-weight:500; background:var(--surface-2); text-align:left; vertical-align:top; border-bottom:1px solid var(--line-2); }
:lang(en) .tabela.lp thead tr::before { content:"No."; }
.tabela.lp tbody tr { counter-increment:lp; }
.tabela.lp tbody tr::before { content:counter(lp); display:table-cell; width:1%; white-space:nowrap; color:var(--text-3); font-family:var(--mono); font-size:.8rem; vertical-align:top; padding:9px 10px; border-bottom:1px solid var(--line-2); }
.tabela.lp tbody tr:has(> td.pusty)::before { content:""; }
.tabela.lp tfoot tr::before { content:""; display:table-cell; padding:9px 10px; }
/* Okno Co nowego: przyciski na gorze (decyzja wlasciciela 20.10.2026), naglowek przyklejony. */
.okno-glowa.okno-glowa-przyciski { position:sticky; top:0; z-index:2; background:var(--surface); flex-wrap:wrap; gap:10px; }
.okno-przyciski { display:flex; gap:8px; margin-left:auto; flex-wrap:wrap; }

/* Pakiet C: sortowanie tabel, ranking z mala proba */
th.sortowalna { cursor:pointer; user-select:none; }
.sort-strzalka { white-space:nowrap; }
th.sortowalna:hover, th.sortowalna:focus-visible { color:var(--text); }
.sort-strzalka { margin-left:4px; color:var(--text-3); font-size:.85em; }
th[aria-sort] .sort-strzalka { color:var(--clay); }
.zespol-wiersz.za-malo { opacity:.7; }

/* Pakiet B (hala i telefon) */
.kiosk-wyczysc { margin-top:8px; align-self:flex-start; }
.wybor-zespolu { border:0; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(96px, 1fr)); gap:8px; }
.wybor-zespolu legend { grid-column:1 / -1; padding:0; margin-bottom:2px; }
.wybor-zespolu label { position:relative; }
.wybor-zespolu input { position:absolute; opacity:0; inset:0; margin:0; }
.wybor-zespolu span { display:flex; align-items:center; justify-content:center; min-height:52px; padding:0 8px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2); font-weight:600; text-align:center; cursor:pointer; }
.wybor-zespolu input:checked + span { border-color:var(--clay); box-shadow:inset 0 0 0 2px var(--clay); }
.wybor-zespolu input:focus-visible + span { outline:2px solid var(--clay); outline-offset:2px; }
.wiecej-pol > summary, .filtry-zwin > summary { display:flex; align-items:center; min-height:48px; cursor:pointer; color:var(--text-2); font-size:.9rem; }
.wiecej-pol[open] > summary { margin-bottom:8px; }
.filtry-zwin { margin:0 0 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:0 12px; }
.filtry-zwin[open] { padding-bottom:12px; }
.filtry-zwin > summary { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; line-height:48px; }
.filtry-zwin .filtry { margin:0; }
.miniatura .ustaw-miejsce { width:40px; height:40px; }
.przyciski-statusu, .siatka-decyzji { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0; }
.siatka-decyzji { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
.przyciski-statusu > *, .siatka-decyzji > button { min-height:48px; }
.przyciski-statusu [aria-pressed="true"], .siatka-decyzji [aria-pressed="true"] { border-color:var(--clay); box-shadow:inset 0 0 0 2px var(--clay); color:var(--text); }
.siatka-decyzji button:disabled { opacity:.55; cursor:default; }
.siatka-decyzji button[aria-pressed="true"]:disabled { opacity:1; }
.status-dzialania .podpowiedz { display:block; }
.miniatura.niewyslane img { opacity:.5; }
.miniatura .ponow-zdjecie { position:absolute; left:3px; right:3px; bottom:3px; min-height:32px; border:0; border-radius:6px; background:var(--zle); color:var(--na-kolorze); font:inherit; font-size:.7rem; font-weight:600; cursor:pointer; }
@media (max-width:720px) {
  .maly { min-height:48px; padding:8px 14px; font-size:.85rem; }
  .tabela-w:has(> table.karty-tel) { overflow:visible; max-height:none; border:0; background:transparent; }
  table.karty-tel, table.karty-tel tbody, table.karty-tel tr, table.karty-tel td { display:block; width:auto; }
  table.karty-tel thead { display:none; }
  table.karty-tel tr { position:relative; margin:0 0 10px; padding:8px 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); }
  table.karty-tel tr.przeterminowane { border-left:4px solid var(--zle); }
  table.karty-tel td { display:grid; grid-template-columns:33% minmax(0, 1fr); gap:10px; align-items:start; padding:5px 0; border:0; text-align:left; }
  table.karty-tel td.liczba { text-align:left; }
  table.karty-tel td::before { content:attr(data-etykieta); color:var(--text-3); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; line-height:1.3; padding-top:3px; overflow-wrap:anywhere; }
  table.karty-tel td:not([data-etykieta]) { display:block; }
  table.karty-tel td:not([data-etykieta])::before { content:none; }
  table.karty-tel tr.przeterminowane td:first-child { box-shadow:none; }
  table.karty-tel td:empty, table.karty-tel td.karta-pusta { display:none; }
  .tabela.lp.karty-tel tbody tr > td:first-child { padding-right:2.5em; }
  .tabela.karty-tel td.waska, .tabela.karty-tel td.nowrap { width:auto; white-space:normal; }
  .tabela.lp.karty-tel tbody tr::before { content:counter(lp); display:block; position:absolute; top:8px; right:12px; width:auto; padding:0; border:0; }
}
.wiecej-pol > summary::before, .filtry-zwin > summary::before { content:"+"; display:inline-block; width:1.2em; color:var(--clay); font-weight:700; }
.wiecej-pol[open] > summary::before, .filtry-zwin[open] > summary::before { content:"\2212"; }
.wiecej-pol > summary::-webkit-details-marker, .filtry-zwin > summary::-webkit-details-marker { display:none; }
.przyciski-statusu [hidden], .decyzje-etykiety [hidden] { display:none !important; }
.przyciski-statusu .glowny.przycisk-aparat { gap:8px; background:var(--przycisk); border-color:var(--przycisk); color:#fff; }
.przyciski-statusu .przycisk-aparat svg { margin-right:2px; flex:0 0 auto; }

/* ---------------------------------------------------------------- Sprzet kontrolno-pomiarowy */
fieldset.karta { margin:0; min-width:0; }
fieldset.karta legend { padding:0 6px; margin-left:-6px; font-family:var(--serif); font-weight:500; font-size:1.05rem; color:var(--text); }
.uklad-formularza { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
@media (min-width:1100px) { .uklad-formularza { grid-template-columns:repeat(3, minmax(0,1fr)); } }
.uklad-formularza .siatka-pol { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.uklad-formularza .pole { margin-bottom:10px; }
.uklad-wpisu { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; align-items:start; }
@media (min-width:1000px) { .uklad-wpisu { grid-template-columns:minmax(0,1fr) 300px; } .panel-wyliczen { position:sticky; top:calc(var(--topbar) + 12px); } }
.panel-wyliczen { background:var(--surface-2); }
.panel-wyliczen h2 { font-family:var(--serif); font-weight:500; font-size:1.5rem; margin:0; }
.panel-wyliczen > p { margin:2px 0 10px; color:var(--text-2); }
.panel-wyliczen dl { display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 12px; margin:0 0 10px; font-size:.9rem; }
.panel-wyliczen dt { color:var(--text-3); }
.panel-wyliczen dd { margin:0; }
.decyzje { border:0; padding:0; margin:14px 0; display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px; }
.decyzje legend { grid-column:1 / -1; padding:0; margin-bottom:6px; font-size:.82rem; color:var(--text-2); }
.decyzja { position:relative; }
.decyzja input { position:absolute; opacity:0; inset:0; margin:0; }
.decyzja span { display:flex; align-items:center; gap:8px; min-height:48px; padding:6px 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); cursor:pointer; }
.decyzja span b { font-family:var(--serif); font-size:1.2rem; font-weight:500; }
.decyzja input:focus-visible + span { outline:2px solid var(--clay); outline-offset:2px; }
.decyzja.d1 input:checked + span { border-color:var(--dobrze); background:var(--tlo-dobrze); box-shadow:inset 0 0 0 1px var(--dobrze); }
.decyzja.d2 input:checked + span { border-color:var(--uwaga); background:var(--tlo-uwaga); box-shadow:inset 0 0 0 1px var(--uwaga); }
.decyzja.d3 input:checked + span, .decyzja.d4 input:checked + span { border-color:var(--zle); background:var(--tlo-zle); box-shadow:inset 0 0 0 1px var(--zle); }
.wyniki-kontroli td, .charakterystyki-edycja td { vertical-align:middle; }
.wyniki-kontroli input, .charakterystyki-edycja input[type="text"] { min-height:38px; padding:7px 10px; }
.charakterystyki-edycja input[type="checkbox"] { width:20px; height:20px; accent-color:var(--przycisk); }
form.inline { display:inline-flex; margin:0 0 0 6px; vertical-align:middle; }
.pole[hidden] { display:none !important; }
.protokol-naglowek.karta { gap:10px 18px; }
.protokol-naglowek > div { min-width:0; overflow-wrap:anywhere; }
@media (min-width:1100px) { .protokol-naglowek { grid-template-columns:repeat(4, 1fr); } }
@media (max-width:720px) {
  .uklad-formularza .siatka-pol { grid-template-columns:minmax(0,1fr); }
  .tabela-w:has(> table.charakterystyki-edycja), .tabela-w:has(> table.wyniki-kontroli) { overflow-x:auto; }
}
@media (min-width:900px) { .siatka-pol.cztery { grid-template-columns:repeat(4, minmax(0,1fr)); } }
input[type="file"] { width:100%; min-height:42px; padding:6px; font:inherit; font-size:.85rem; color:var(--text-2); background:var(--surface); border:1px dashed var(--line); border-radius:var(--r); }
input[type="file"]::file-selector-button { margin-right:10px; padding:6px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); color:var(--text); font:inherit; cursor:pointer; }
.decyzje { grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width:720px) { .decyzje { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.decyzja span { line-height:1.25; font-size:.9rem; }
/* Marka w pasku: pelna nazwa, na waskim telefonie skrot (nazwa nie wypycha przelacznikow poza ekran). */
.tytul-app b .marka-pelna, .tytul-app b .marka-krotka { display:inline; font:inherit; color:inherit; overflow:visible; max-width:none; letter-spacing:inherit; }
.tytul-app b .marka-krotka { display:none; }
@media (max-width:599px) { .tytul-app b .marka-pelna { display:none; } .tytul-app b .marka-krotka { display:inline; } }

/* ---------- strzalki Wstecz i Dalej (jak w Monitorze OEE) ---------- */
.historia { position:relative; display:flex; align-items:center; flex:0 0 auto; margin-left:-6px; }
.historia > button { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:none; color:var(--text); cursor:pointer; touch-action:manipulation; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.historia > button:hover:not(:disabled) { color:var(--clay); background:var(--surface-2); }
.historia > button:disabled { color:var(--text-3); opacity:.4; cursor:default; }
.historia > button:focus-visible { outline:2px solid var(--clay); outline-offset:2px; }
.historia-menu { position:absolute; left:0; top:100%; z-index:60; margin-top:4px; width:min(22rem, calc(100vw - 2rem)); max-height:60vh; overflow-y:auto; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--cien); padding:4px 0; }
.historia-menu p { margin:0; padding:6px 12px 4px; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); }
.historia-menu button { display:flex; width:100%; min-height:40px; align-items:center; justify-content:space-between; gap:12px; padding:6px 12px; border:0; background:none; color:var(--text); text-align:left; font:inherit; font-size:.88rem; cursor:pointer; }
.historia-menu button span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.historia-menu button small { flex:0 0 auto; color:var(--text-3); font-variant-numeric:tabular-nums; }
.historia-menu button:hover, .historia-menu button:focus { background:var(--surface-2); outline:none; }
@media (max-width:420px) { .historia > button { width:32px; height:32px; } .historia { margin-left:-8px; } }

/* ---------- przyklejony naglowek tabel (jak stickyHead w Monitorze OEE) ----------
   Tabela szersza niz ekran: przewija sie w poziomie, a naglowek przesuwa wspolne.js (plywajNaglowki). */
.tabela-w thead { position:relative; z-index:3; }
.tabela-w .tabela th, .tabela-w .tabela.lp thead tr::before { position:sticky; top:0; z-index:3; background:var(--surface-2); box-shadow:inset 0 -1px 0 var(--line); }
/* Tabela miesci sie na szerokosc (klasa z wspolne.js): przewija sie ze strona, naglowek pod paskiem gornym. */
.tabela-w.przyklejony { max-height:none; overflow-x:clip; overflow-y:visible; }
.tabela-w.przyklejony .tabela th, .tabela-w.przyklejony .tabela.lp thead tr::before { top:var(--topbar); }
@media print { .tabela-w { overflow:visible; } .tabela-w thead { transform:none !important; } .tabela-w .tabela th { position:static; } .historia { display:none; } }

/* ---------- Wiedza (czesc dydaktyczna) ---------- */
.spis-wiedzy { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
.spis-wiedzy a { padding:5px 10px; border:1px solid var(--line); border-radius:10px; font-size:.82rem; color:var(--text-2); text-decoration:none; background:var(--surface); }
.spis-wiedzy a:hover { color:var(--text); border-color:var(--clay); }
.karta.wiedza { scroll-margin-top:calc(var(--topbar) + 12px); }
.pytanie-wiedzy { border-top:1px solid var(--line-2); padding:8px 0; }
.pytanie-wiedzy summary { cursor:pointer; line-height:1.5; }
.pytanie-wiedzy[open] summary { color:var(--text); }
.pytanie-wiedzy p { margin:6px 0 0 18px; color:var(--dobrze); }
.zakladki-male a { font-size:.82rem; padding:6px 10px; }
@media print {
  .filtry, .zakladki, .spis-wiedzy, .dolna { display:none !important; }
  .pytanie-wiedzy p { color:#000; }
}