/* SZP Departmental Stock - formatka NEW PROJECT (wariant A) + komponenty pulpitu.
   Baza z Audytow warstwowych SZP; uzupelnienia dashboardu na koncu pliku. */

@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;
  --dot:rgba(0,0,0,.045);
  --cien:0 1px 2px #0000000a, 0 12px 26px -16px #0000002e;
  --r:6px;
  --serif:'Instrument Sans','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; /* naglowki i duze liczby (nazwa zmiennej z formatki NP) */
  --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;
    --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;
  --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:400; 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:999px; 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:999px; 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:999px; 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); }
.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:999px; background:var(--surface); }
.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:var(--surface-2); color:var(--text); }
.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; }
  .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; }
}

/* 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:300; 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; max-width:70ch; }
.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; }
.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:300; 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:300; }
.lead { font-family:var(--serif); font-weight:300; font-size:clamp(1.05rem,2.4vw,1.3rem); color:var(--text-2); margin:0; max-width:46ch; line-height:1.5; }
.zegar-blok { position:absolute; right:0; top:52px; }
.zegar-blok .zegar { width:clamp(104px,11vw,150px); height:clamp(104px,11vw,150px); }
@media (max-width:720px) { .zegar-blok { display:none; } }
.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; align-items:baseline; gap:12px; padding-bottom:10px; margin-bottom:14px; border-bottom:1px solid var(--line); }
.sekcja-glowa h2 { font-family:var(--serif); font-weight:400; 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:300; 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 { max-width:96ch; 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:999px; 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:999px; 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:1fr; gap:0 14px; }
@media (min-width:640px) { .siatka-pol { grid-template-columns:1fr 1fr; } .siatka-pol .pelna { grid-column:1 / -1; } }
@media (min-width:900px) { .siatka-pol.trzy { grid-template-columns:1fr 1fr 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:999px; 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:999px; overflow:hidden; vertical-align:middle; }
.pasek span { display:block; height:100%; background:var(--dobrze); border-radius:999px; 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; 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; }

/* ---------- 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:400; 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; }

/* ---------- 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:#fff; }
.toast.dobry { background:var(--dobrze); color:#fff; }
@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:#fff; 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; }

/* ---------- druk ---------- */
@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; }
}

/* ================= SZP Departmental Stock (wspolne z Company Dashboard) ================= */
.topbar-w > .tytul-app { flex:0 1 auto; min-width:0; max-width:46%; }
.chip-tekst { display:block; }
.dolna { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:1fr; }
form.inline { display:inline; margin:0; }
.blok { display:block; }
.mocna { font-weight:600; }
tfoot td { font-weight:600; border-top:1px solid var(--line); background:var(--surface-2); padding:9px 10px; }
.wzrost { color:var(--dobrze); font-weight:600; }
.spadek { color:var(--zle); font-weight:600; }

/* pulpit: kafle */
.kafle { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap:14px; }
.kafel.duzy { min-height:200px; padding:18px 20px 16px; gap:14px; }
.kafel-glowa { display:flex; align-items:center; gap:10px; }
.kafel-glowa svg { width:22px; height:22px; color:var(--clay); }
.kafel-glowa h3 { font-family:var(--serif); font-weight:400; font-size:1.35rem; }
.kafel-strzalka { margin-left:auto; color:var(--text-3); }
.kafel-strzalka svg { width:18px; height:18px; color:currentColor; }
a.kafel:hover .kafel-strzalka { color:var(--clay); }
.kafel-liczby { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.kafel-liczby > div { display:flex; flex-direction:column; gap:2px; min-width:0; }
.kafel-liczby .etykieta { margin:0; font-size:.76rem; color:var(--text-2); }
.kafel-liczby .wartosc { font-family:var(--serif); font-weight:300; font-size:clamp(1.6rem, 4vw, 2.1rem); line-height:1.1; letter-spacing:-.02em; color:var(--text); }
.kafel .meta { margin-top:auto; }
.swiezosc { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:22px 0 0; font-size:.82rem; color:var(--text-3); }
.swiezosc svg { width:16px; height:16px; flex:0 0 auto; }

/* sprzedaz: filtry */
.filtry.karta { display:block; margin-bottom:18px; }
.szybkie { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.pigulka { display:inline-flex; align-items:center; padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--text-2); font-size:.82rem; text-decoration:none; white-space:nowrap; }
.pigulka:hover { color:var(--text); border-color:var(--text-3); }
.pigulka.aktywna { color:#fff; background:var(--przycisk); border-color:var(--przycisk); }
.filtry-pola { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; align-items:end; }
.filtry-pola .pole { margin:0; min-width:0; }
.filtry-pola .pole.szerokie { grid-column:1 / -1; }
.filtry-pola .przycisk .glowny { width:100%; }
@media (min-width:900px) {
  .filtry-pola { grid-template-columns:150px 150px minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
  .filtry-pola .pole.szerokie { grid-column:auto; }
}

/* sprzedaz: waluty i kpi */
.kpi-siatka { grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (min-width:700px) { .kpi-siatka { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.kpi { min-width:0; }
.kpi-wartosc { overflow-wrap:anywhere; }
.waluty { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap:10px; margin-top:10px; }
.waluta-karta { display:flex; flex-direction:column; gap:2px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; min-width:0; }
.waluta-karta b { font-family:var(--serif); font-weight:400; font-size:1.25rem; overflow-wrap:anywhere; }
.waluta-kod { font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; color:var(--text-3); }

/* wykres */
.wykres .siatka-linia { stroke:var(--line-2); }
.wykres .slupek { fill:var(--clay); }
.wykres .slupek:hover { fill:var(--przycisk); }
.wykres .slupek.ujemny { fill:var(--zle); }
.sekcja-glowa .liczba { overflow:hidden; text-overflow:ellipsis; max-width:60%; }
.sekcja-glowa .liczba .drugi { vertical-align:middle; }

/* tabele */
.tabela-w { min-width:0; }
.udzial { min-width:120px; }
.udzial .pasek { width:70px; margin-right:8px; }
.udzial .pasek span { background:var(--clay); }

/* hasla i tokeny pokazywane raz */
.haslo-raz { border:1px dashed var(--uwaga); background:var(--tlo-uwaga); border-radius:var(--r); padding:12px 16px; margin:0 0 16px; }
.haslo-raz p { margin:4px 0; }
.duzy-kod { font-size:1.05rem; padding:3px 8px; user-select:all; overflow-wrap:anywhere; }
@media (max-width:560px) {
  .topbar-w { gap:8px; padding:0 10px; }
  .topbar-w > .tytul-app { max-width:none; flex:1 1 auto; font-size:.95rem; }
  .motyw button { width:26px; height:26px; }
}

/* ================= SZP Departmental Stock: zapas na wydziale i normy ================= */
.wykres-w { margin:4px 0 6px; }
.wykres .slupek.norma { fill:var(--mineral); }
.wykres .slupek.norma:hover { fill:var(--sea); }
.wykres .os-zero { stroke:var(--text-3); stroke-dasharray:3 3; }
.wykres .linia-stanu { fill:none; stroke:var(--sky); stroke-width:2; stroke-linejoin:round; }
.wykres .punkt-stanu { fill:var(--surface); stroke:var(--sky); stroke-width:2; }
.legenda { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; color:var(--text-2); margin:6px 0 0; }
.legenda .znak { display:inline-block; width:12px; height:12px; border-radius:3px; vertical-align:-1px; margin-right:-8px; }
.legenda .znak.slupek { background:var(--clay); }
.legenda .znak.norma { background:var(--mineral); }
.legenda .znak.linia { height:3px; border-radius:2px; background:var(--sky); }
.tabela td.ujemna, .ujemna { color:var(--zle); }
.tabela .kod { font-family:var(--mono); font-size:.84rem; white-space:nowrap; }
.tabela .nazwa-towaru { color:var(--text-2); font-size:.82rem; display:block; max-width:46ch; }
.tabela tfoot td { font-weight:600; background:var(--surface-2); border-top:1px solid var(--line); }
.alerty { display:grid; gap:10px; }
@media (min-width:900px) { .alerty { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.alerty .karta h3 { margin:0 0 6px; font-size:.95rem; }
.alerty ul { margin:0; padding-left:18px; line-height:1.55; font-size:.88rem; }
.metoda { font-size:.86rem; color:var(--text-2); }
.metoda ol { margin:6px 0 0; padding-left:20px; line-height:1.6; }
@media (min-width:900px) { .filtry-pola.tylko-daty { grid-template-columns:150px 150px 160px; } }
.formularz-spisu { display:grid; gap:10px; grid-template-columns:repeat(2, minmax(0, 1fr)); align-items:end; }
.formularz-spisu .pole { margin:0; }
.formularz-spisu .pole.szerokie { grid-column:1 / -1; }
@media (min-width:900px) { .formularz-spisu { grid-template-columns:160px 180px minmax(0, 1fr) auto; } .formularz-spisu .pole.szerokie { grid-column:auto; } }
@media (max-width:640px) {
  .sekcja-glowa { flex-wrap:wrap; row-gap:6px; }
  .sekcja-glowa .liczba { max-width:100%; overflow:visible; white-space:normal; }
}

/* --- Typografia: Instrument Sans (naglowki, duze liczby) + Inter (tresc, tabele), 23.09.2026 ---
   Instrument Sans ma grubosci 400-700: dawne 300 z Fraunces podnosimy do spokojnego 500. */
.strona-glowa h1, .naglowek-prosty h1 { font-weight:500; letter-spacing:-.025em; }
.naglowek-prosty h1 .firma, .lead { font-weight:400; }
.tytul-app { font-weight:600; letter-spacing:-.01em; }
.sekcja-glowa h2, .kafel-glowa h3, dialog.okno .okno-glowa h2, .waluta-karta b { font-weight:500; letter-spacing:-.015em; }
.kpi-wartosc, .kafel-liczby .wartosc { font-weight:500; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.kpi-wartosc small { font-family:var(--sans); font-weight:500; letter-spacing:0; }
.tabela .liczba, .tabela td.nowrap { font-variant-numeric:tabular-nums; }