/* SZP Employee Leave - formatka NEW PROJECT (wariant A), typografia jak SZP Accounts Receivable
   (Instrument Sans w naglowkach i duzych liczbach, Inter w tresci), komponenty urlopowe 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; }
.sekcja-glowa > .kropka { align-self:flex-start; font-size:1.3rem; margin-top:calc(.84em - 4.5px); }
.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; }
.glowny.maly, .drugi.maly, .niebezpieczny.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; }
.podpowiedz { display:block; font-size:.8rem; color:var(--text-2); margin:10px 0 0; line-height:1.5; }
.pole .podpowiedz { font-size:.76rem; color:var(--text-3); margin-top:5px; }
input::placeholder, textarea::placeholder { color:var(--text-3); opacity:1; }
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 Incoming Transfers (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 Incoming Transfers: wplywy i raporty ================= */
@media (min-width:900px) {
  .filtry-pola.filtry-wplywy { grid-template-columns:140px 140px minmax(0, 1.2fr) minmax(0, 2fr) minmax(0, .8fr) minmax(0, .8fr) auto; }
}
.kategorie { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.kategorie .pigulka b { font-family:var(--mono); font-weight:500; margin-left:6px; }
.tabela-dni tbody + tbody { border-top:1px solid var(--line); }
.tabela-dni .dzien-glowa td { background:var(--surface-2); font-weight:600; }
.tabela-dni .wplyw td { font-size:.86rem; }
.tabela-dni .wplyw td:first-child { padding-left:22px; }
.wplyw-kto { font-weight:500; }
.raport .proza { max-width:96ch; }
.raport .tabela-w { margin:6px 0 14px; }
.lista-raportu { margin:0 0 14px; padding-left:22px; line-height:1.6; }
.lista-raportu li { margin:0 0 4px; }
.lista-odbiorcow { list-style:none; margin:16px 0 0; padding:0; border-top:1px solid var(--line-2); }
.lista-odbiorcow li { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid var(--line-2); }
.lista-odbiorcow .odbiorca { flex:1 1 200px; min-width:0; overflow-wrap:anywhere; }
.lista-odbiorcow li.wstrzymany .odbiorca { color:var(--text-3); }
.lista-odbiorcow .pusty { color:var(--text-3); }
.dni-tygodnia { border:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 14px; }
.dni-tygodnia legend { padding:0; margin-bottom:6px; font-size:.82rem; color:var(--text-2); }
.dni-tygodnia label { display:inline-flex; align-items:center; gap:6px; font-size:.9rem; }
.pola-2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap:0 12px; }
label.przelacznik { display:inline-flex; align-items:center; gap:8px; font-weight:500; }
.akcje-raportu, .przyciski form.inline { display:inline-flex; }
@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; }

/* --- Kafle jako linki i listy z sortowaniem --- */
a.kpi-link { transition:border-color .15s, box-shadow .15s, transform .15s; }
a.kpi-link:hover, a.kpi-link:focus-visible { border-color:var(--clay); box-shadow:var(--cien); transform:translateY(-1px); }
.kpi-strzalka svg { width:13px; height:13px; vertical-align:-2px; color:var(--text-3); }
a.kpi-link:hover .kpi-strzalka svg { color:var(--clay); }
.szybkie { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.szybkie .pigulka { text-decoration:none; }
.suma-listy { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 22px; margin:4px 0 14px; }
.suma-listy .proza { margin:0; }
.suma-wartosc { font-family:var(--serif); font-weight:500; font-size:clamp(1.8rem, 4vw, 2.4rem); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.suma-waluta { color:var(--text-3); font-weight:500; }
.plakietka.uwaga-slabo { color:var(--uwaga); border-color:var(--line); background:transparent; }

/* =====================================================================================
   SZP Employee Leave: komponenty urlopowe
   Kolory serii sprawdzone walidatorem palety (skill dataviz, OKLab, symulacja CVD):
   wypoczynkowy / na zadanie / okolicznosciowy przechodza test wszystkich par w obu motywach
   (jasny: CVD 10,3, wzrok zwykly 18,9; ciemny: 12,5 i 20,8), "inne" to neutralna szarosc.
   Skale sekwencyjne: niebieska (dni urlopu), glinkowa (obsada, ile osob nieobecnych);
   najjasniejszy stopien celowo zlewa sie z tlem, bo oznacza "prawie zero".
   ===================================================================================== */
:root {
  --s-wyp:#2a75ba; --s-zad:#bd5b39; --s-okol:#8b327b; --s-inne:#8a877f;
  --s-kontekst:#d3d0c7; --s-akcent:#2a75ba;
  --q0:#eef4fb; --q1:#b4d5f8; --q2:#85b9ef; --q3:#519ae2; --q4:#2e7ac7; --q5:#235b9c; --q6:#194071;
  --c0:#fbefe9; --c1:#f8c8b5; --c2:#f2a589; --c3:#e2805e; --c4:#ca5f3b; --c5:#a6492d; --c6:#813522;
  --siatka:#ecebe4; --os:#d4d1c8; --etykieta-wykresu:#6f6d66;
  --tlo-weekend:rgba(38,38,37,.045); --tlo-swieto:rgba(189,91,57,.11); --tlo-dzis:rgba(189,91,57,.14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --s-wyp:#4e90d2; --s-zad:#d9704d; --s-okol:#9b418b; --s-inne:#8f8c84;
    --s-kontekst:#55534d; --s-akcent:#4e90d2;
    --q0:#2a323b; --q1:#2a4f77; --q2:#2c669f; --q3:#3781c7; --q4:#599ddf; --q5:#83baee; --q6:#b2d5f7;
    --c0:#3a2f2a; --c1:#703e2e; --c2:#974a30; --c3:#bf5d3c; --c4:#db7a58; --c5:#eb9f81; --c6:#f4c5b2;
    --siatka:rgba(255,255,255,.06); --os:rgba(255,255,255,.16); --etykieta-wykresu:#a7a59b;
    --tlo-weekend:rgba(255,255,255,.035); --tlo-swieto:rgba(217,119,87,.15); --tlo-dzis:rgba(217,119,87,.2);
  }
}
:root[data-theme="dark"] {
  --s-wyp:#4e90d2; --s-zad:#d9704d; --s-okol:#9b418b; --s-inne:#8f8c84;
  --s-kontekst:#55534d; --s-akcent:#4e90d2;
  --q0:#2a323b; --q1:#2a4f77; --q2:#2c669f; --q3:#3781c7; --q4:#599ddf; --q5:#83baee; --q6:#b2d5f7;
  --c0:#3a2f2a; --c1:#703e2e; --c2:#974a30; --c3:#bf5d3c; --c4:#db7a58; --c5:#eb9f81; --c6:#f4c5b2;
  --siatka:rgba(255,255,255,.06); --os:rgba(255,255,255,.16); --etykieta-wykresu:#a7a59b;
  --tlo-weekend:rgba(255,255,255,.035); --tlo-swieto:rgba(217,119,87,.15); --tlo-dzis:rgba(217,119,87,.2);
}
.g-wyp { --g:var(--s-wyp); } .g-zad { --g:var(--s-zad); } .g-okol { --g:var(--s-okol); } .g-inne { --g:var(--s-inne); }

/* Duze liczby: cyfry proporcjonalne (skill dataviz); rowne cyfry tylko w kolumnach tabel i na osiach. */
.kpi-wartosc, .kafel-liczby .wartosc, .suma-wartosc, .bohater-liczba { font-variant-numeric:normal; }

/* ---------- baner danych demonstracyjnych ---------- */
.baner-demo { background:repeating-linear-gradient(135deg, var(--tlo-uwaga) 0 14px, color-mix(in srgb, var(--tlo-uwaga) 70%, var(--surface)) 14px 28px);
  border-bottom:1px solid color-mix(in srgb, var(--uwaga) 35%, var(--line)); color:var(--text); font-size:.84rem; }
.baner-demo .kontener { padding-top:8px; padding-bottom:8px; display:flex; gap:10px; align-items:center; }
.baner-demo svg { width:18px; height:18px; color:var(--uwaga); flex:0 0 auto; }
.baner-demo b { color:var(--uwaga); }

/* ---------- pasek filtrow (jeden rzad nad wszystkim, co filtruje) ---------- */
.pasek-filtrow { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 12px; margin:0 0 18px; padding:10px 12px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); }
.pasek-filtrow .pole { margin:0; min-width:0; }
.pasek-filtrow label { font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--text-3); margin-bottom:3px; }
.pasek-filtrow select, .pasek-filtrow input { min-height:36px; padding:6px 10px; font-size:.88rem; }
.pasek-filtrow select { padding-right:30px; min-width:150px; }
.pasek-filtrow .pole.szukaj input { min-width:200px; }
.pasek-filtrow .przerwa { flex:1 1 auto; }
.pasek-filtrow .glowny, .pasek-filtrow .drugi { min-height:36px; padding:6px 14px; font-size:.84rem; }
.segmenty { display:inline-flex; padding:3px; border:1px solid var(--line); border-radius:999px; background:var(--surface-2); gap:2px; }
.segmenty a, .segmenty button { border:0; background:transparent; color:var(--text-2); padding:5px 12px; border-radius:999px; font-size:.82rem; cursor:pointer; text-decoration:none; font-family:var(--sans); line-height:1.3; }
.segmenty a:hover, .segmenty button:hover { color:var(--text); }
.segmenty .aktywny, .segmenty [aria-pressed="true"] { background:var(--surface); color:var(--text); box-shadow:0 1px 2px #0000001a; }
@media (max-width:640px) { .pasek-filtrow select { min-width:0; } .pasek-filtrow .pole { flex:1 1 140px; } .pasek-filtrow .pole.szukaj input { min-width:0; } }

/* ---------- siatki ---------- */
.siatka-2, .siatka-3 { display:grid; gap:14px; grid-template-columns:minmax(0, 1fr); }
@media (min-width:980px) {
  .siatka-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .siatka-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .siatka-2 .szeroki, .siatka-3 .szeroki { grid-column:1 / -1; }
  .siatka-2.s-2-1 { grid-template-columns:minmax(0, 2fr) minmax(0, 1fr); }
  .siatka-2.s-1-2 { grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); }
}
.siatka-2 > .karta + .karta, .siatka-3 > .karta + .karta { margin-top:0; }
.karta > .sekcja-glowa:first-child { margin-top:-2px; }
.sekcja-glowa .akcje-karty { margin-left:auto; display:flex; gap:6px; align-items:center; }
.sekcja-glowa .akcje-karty .liczba { max-width:none; margin-left:0; overflow:visible; }
.tabela td.kol-zrodlo { min-width:15rem; }
.opis-wykresu { color:var(--text-2); font-size:.86rem; margin:-4px 0 12px; max-width:96ch; }
.drobny-przypis { color:var(--text-3); font-size:.76rem; margin:10px 0 0; line-height:1.45; }

/* ---------- bohater pulpitu ---------- */
.bohater { display:grid; gap:18px; grid-template-columns:minmax(0, 1fr); align-items:stretch; }
@media (min-width:980px) { .bohater { grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); } }
.bohater-dzis { display:flex; flex-direction:column; gap:12px; min-width:0; }
.bohater-etykieta { font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
.bohater-liczba { font-family:var(--serif); font-weight:500; font-size:clamp(3rem, 7vw, 4.4rem); line-height:.95; letter-spacing:-.04em; }
.bohater-liczba small { font-size:.3em; letter-spacing:0; color:var(--text-2); margin-left:8px; font-weight:500; font-family:var(--sans); }
.bohater-opis { color:var(--text-2); font-size:.9rem; margin:0; }
.lista-dzis { display:flex; flex-direction:column; gap:6px; margin:4px 0 0; padding:0; list-style:none; max-height:250px; overflow:auto; }
.lista-dzis li { display:flex; align-items:center; gap:10px; font-size:.88rem; min-width:0; }
.lista-dzis .kto { min-width:0; flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lista-dzis .kto a { color:var(--text); text-decoration:none; font-weight:560; }
.lista-dzis .kto a:hover { color:var(--clay); }
.lista-dzis .kiedy { color:var(--text-3); font-size:.78rem; white-space:nowrap; }

/* awatary z inicjalami (kolor = rodzaj urlopu, plan = wzor ukosny) */
.awatar { --g:var(--s-wyp); flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%;
  font-size:.72rem; font-weight:650; letter-spacing:.02em; color:var(--text); background:color-mix(in srgb, var(--g) 22%, var(--surface));
  box-shadow:inset 0 0 0 2px var(--g); text-decoration:none; }
.awatar.duzy { width:64px; height:64px; font-size:1.25rem; box-shadow:inset 0 0 0 3px var(--g); }
.awatar.maly { width:24px; height:24px; font-size:.6rem; }
.awatar.plan { background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--g) 30%, var(--surface)) 0 3px, var(--surface) 3px 6px); }
.awatar.neutralny { --g:var(--line); background:var(--surface-2); color:var(--text-2); }
.awatary { display:flex; flex-wrap:wrap; gap:3px; }
.awatary .awatar { box-shadow:inset 0 0 0 2px var(--g), 0 0 0 2px var(--surface-2); }

/* pasek tygodnia */
.tydzien { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:6px; }
.dzien-tyg { position:relative; display:flex; flex-direction:column; gap:6px; padding:10px 8px 8px; border:1px solid var(--line-2); border-radius:8px; background:var(--surface-2); min-height:150px; min-width:0; }
.dzien-tyg.wolny { background:repeating-linear-gradient(135deg, var(--surface-2) 0 6px, var(--surface) 6px 12px); }
.dzien-tyg.dzis { border-color:var(--clay); box-shadow:inset 0 3px 0 var(--clay); background:var(--surface); }
.dzien-tyg .dt-glowa { display:flex; justify-content:space-between; align-items:baseline; gap:4px; font-size:.7rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.05em; }
.dzien-tyg .dt-liczba { font-family:var(--serif); font-size:1.7rem; font-weight:500; line-height:1; letter-spacing:-.03em; }
.dzien-tyg .dt-liczba small { font-size:.42em; color:var(--text-3); font-family:var(--sans); letter-spacing:0; margin-left:3px; }
.dzien-tyg .dt-swieto { font-size:.68rem; color:var(--clay); line-height:1.25; }
.dzien-tyg .awatary { margin-top:auto; }
.dzien-tyg .awatar { width:22px; height:22px; font-size:.52rem; }
.dzien-tyg .wiecej { font-size:.68rem; color:var(--text-3); align-self:center; margin-left:2px; }
@media (max-width:640px) {
  .tydzien { grid-template-columns:repeat(7, minmax(60px, 1fr)); overflow-x:auto; padding-bottom:4px; }
  .dzien-tyg { min-height:96px; padding:8px 6px; }
  .dzien-tyg .awatary { display:none; }
  .dzien-tyg .dt-glowa { flex-direction:column; align-items:flex-start; gap:1px; white-space:nowrap; }
  .dzien-tyg .dt-liczba { font-size:1.35rem; }
  .dzien-tyg .dt-swieto { font-size:.62rem; }
  .lista-dzis li { display:grid; grid-template-columns:auto minmax(0, 1fr); column-gap:10px; row-gap:0; }
  .lista-dzis .awatar { grid-row:span 2; }
  .lista-dzis .kiedy { grid-column:2; white-space:normal; }
}

/* ---------- mierniki (skumulowany pasek poziomy) ---------- */
.miernik { display:flex; gap:2px; height:14px; border-radius:999px; overflow:hidden; background:var(--line-2); }
.miernik > span { display:block; height:100%; min-width:0; background:var(--g, var(--s-wyp)); }
.miernik .m-wyk { background:var(--s-wyp); }
.miernik .m-zatw { background:color-mix(in srgb, var(--s-wyp) 58%, var(--surface)); }
.miernik .m-plan { background:repeating-linear-gradient(135deg, var(--s-wyp) 0 2px, color-mix(in srgb, var(--s-wyp) 20%, var(--surface)) 2px 6px); }
.miernik .m-reszta { background:var(--line); }
.miernik .m-ponad { background:repeating-linear-gradient(135deg, var(--zle) 0 2px, var(--tlo-zle) 2px 6px); }
.miernik.duzy { height:22px; }
.miernik.maly { height:8px; }
.miernik-legenda { display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:10px; font-size:.82rem; color:var(--text-2); }
.miernik-legenda b { color:var(--text); font-weight:620; font-variant-numeric:tabular-nums; margin-left:4px; }
.klucz { display:inline-block; width:12px; height:12px; border-radius:3px; vertical-align:-1px; margin-right:6px; background:var(--g, var(--s-wyp)); flex:0 0 auto; }
.klucz.linia { height:3px; width:16px; border-radius:2px; vertical-align:3px; }
.klucz.linia.przerywana { background:repeating-linear-gradient(90deg, var(--g, var(--s-wyp)) 0 5px, transparent 5px 8px); }
.klucz.zatw { background:color-mix(in srgb, var(--s-wyp) 58%, var(--surface)); }
.klucz.plan { background:repeating-linear-gradient(135deg, var(--g, var(--s-wyp)) 0 2px, color-mix(in srgb, var(--g, var(--s-wyp)) 20%, var(--surface)) 2px 5px); box-shadow:inset 0 0 0 1px var(--g, var(--s-wyp)); }
.klucz.reszta { background:var(--line); }
.klucz.kontekst { background:var(--s-kontekst); }
.klucz.pasmo { background:color-mix(in srgb, var(--s-wyp) 16%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--s-wyp) 30%, transparent); }

/* ---------- wykresy SVG ---------- */
.wykres-w { position:relative; width:100%; min-height:40px; }
.wykres-w svg { display:block; width:100%; height:auto; overflow:visible; }
.wykres-w text { font-family:var(--sans); font-size:11px; fill:var(--etykieta-wykresu); font-variant-numeric:tabular-nums; }
.wykres-w .w-siatka { stroke:var(--siatka); stroke-width:1; shape-rendering:crispEdges; }
.wykres-w .w-os { stroke:var(--os); stroke-width:1; shape-rendering:crispEdges; }
.wykres-w .w-pas { fill:var(--text); opacity:0; }
.wykres-w .w-pas.aktywny { opacity:.045; }
.wykres-w .w-kol { transition:opacity .15s; }
.wykres-w.hover .w-kol:not(.aktywna) { opacity:.5; }
.wykres-w .w-linia { fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.wykres-w .w-linia.przerywana { stroke-dasharray:6 5; }
.wykres-w .w-linia.kontekst { stroke:var(--s-kontekst); stroke-width:1.5; }
.wykres-w .w-pasmo { opacity:.13; }
.wykres-w .w-punkt { stroke:var(--surface); stroke-width:2; }
.wykres-w .w-celownik { stroke:var(--text-3); stroke-width:1; shape-rendering:crispEdges; }
.wykres-w .w-podpis { fill:var(--text); font-weight:600; font-size:11.5px; }
.wykres-w .w-podpis-2 { fill:var(--text-2); font-size:11px; }
.wykres-w .w-dzis { stroke:var(--clay); stroke-width:1.5; }
.wykres-w .w-dzis-tekst { fill:var(--clay); font-weight:600; }
.dymek { position:absolute; z-index:20; pointer-events:none; min-width:150px; max-width:290px; background:var(--surface); border:1px solid var(--line);
  border-radius:8px; box-shadow:var(--cien); padding:8px 10px; font-size:.8rem; line-height:1.35; opacity:0; transform:translateY(4px); transition:opacity .12s, transform .12s; }
.dymek.widoczny { opacity:1; transform:none; }
.dymek .d-tytul { font-weight:620; color:var(--text); margin-bottom:5px; }
.dymek .d-wiersz { display:flex; align-items:center; gap:10px; justify-content:space-between; }
.dymek .d-wiersz .d-nazwa { color:var(--text-2); display:flex; align-items:center; gap:6px; }
.dymek .d-wiersz .d-wart { font-weight:650; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; }
.dymek .d-klucz { display:inline-block; width:12px; height:3px; border-radius:2px; background:var(--g); flex:0 0 auto; }
.dymek .d-klucz.plan { height:8px; background:repeating-linear-gradient(135deg, var(--g) 0 2px, transparent 2px 4px); box-shadow:inset 0 0 0 1px var(--g); }
.dymek .d-stopka { margin-top:6px; padding-top:5px; border-top:1px solid var(--line-2); color:var(--text-3); font-size:.74rem; }
.legenda { display:flex; flex-wrap:wrap; gap:6px 16px; margin:0 0 10px; font-size:.8rem; color:var(--text-2); }
.legenda span { display:inline-flex; align-items:center; }
.przelacz-tabele { font-size:.76rem; }
.widok-tabeli { margin-top:10px; }
.widok-tabeli[hidden] { display:none; }
.widok-tabeli .tabela { font-size:.8rem; }
.widok-tabeli .tabela th, .widok-tabeli .tabela td { padding:5px 8px; }

/* ---------- mapa ciepla (tabela z kolorowymi komorkami) ---------- */
.mapa { border-collapse:separate; border-spacing:2px; font-size:.74rem; width:100%; table-layout:fixed; }
.mapa th { font-weight:500; color:var(--text-3); padding:2px 3px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mapa th.wiersz { text-align:right; width:78px; padding-right:8px; }
.mapa td { height:30px; border-radius:4px; text-align:center; font-variant-numeric:tabular-nums; color:var(--text); background:var(--q0); position:relative; cursor:default; }
.mapa td.ciemne { color:#fff; }
.mapa td.pusta { background:transparent; box-shadow:inset 0 0 0 1px var(--line-2); color:var(--text-3); }
.mapa td:hover { outline:2px solid var(--text); outline-offset:-1px; }
.mapa td.q1 { background:var(--q1); } .mapa td.q2 { background:var(--q2); } .mapa td.q3 { background:var(--q3); }
.mapa td.q4 { background:var(--q4); } .mapa td.q5 { background:var(--q5); } .mapa td.q6 { background:var(--q6); }
.mapa.glina td { background:var(--c0); }
.mapa.glina td.q1 { background:var(--c1); } .mapa.glina td.q2 { background:var(--c2); } .mapa.glina td.q3 { background:var(--c3); }
.mapa.glina td.q4 { background:var(--c4); } .mapa.glina td.q5 { background:var(--c5); } .mapa.glina td.q6 { background:var(--c6); }
.mapa td.wolny { background:repeating-linear-gradient(135deg, var(--surface-2) 0 4px, var(--surface) 4px 8px) !important; color:var(--text-3); }
.mapa td.przekroczony { box-shadow:inset 0 0 0 2px var(--zle); }
.mapa-wrap { overflow-x:auto; }
.skala { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.74rem; color:var(--text-3); margin-top:8px; }
.skala .stopnie { display:flex; gap:2px; }
.skala .stopnie span { width:22px; height:10px; border-radius:2px; }

/* ---------- plakietki statusow (zawsze ikona + slowo) ---------- */
.status { display:inline-flex; align-items:center; gap:5px; font-size:.74rem; line-height:1.2; padding:3px 9px 3px 7px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--text-2); white-space:nowrap; vertical-align:middle; }
.status svg { width:13px; height:13px; flex:0 0 auto; }
.status.ok { color:var(--dobrze); border-color:color-mix(in srgb, var(--dobrze) 45%, var(--line)); background:var(--tlo-dobrze); }
.status.uwaga { color:var(--uwaga); border-color:color-mix(in srgb, var(--uwaga) 45%, var(--line)); background:var(--tlo-uwaga); }
.status.zle { color:var(--zle); border-color:color-mix(in srgb, var(--zle) 45%, var(--line)); background:var(--tlo-zle); }
.status.info { color:var(--s-wyp); border-color:color-mix(in srgb, var(--s-wyp) 40%, var(--line)); }
.status.plan { color:var(--text-2); background:repeating-linear-gradient(135deg, var(--surface-2) 0 4px, var(--surface) 4px 8px); }
.kropki-nz { display:inline-flex; gap:3px; vertical-align:middle; }
.kropki-nz i { width:8px; height:8px; border-radius:50%; background:var(--line); display:block; }
.kropki-nz i.pelna { background:var(--s-zad); }

/* ---------- alerty i odliczanie ---------- */
.alerty { display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.alert { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); text-decoration:none; color:inherit; transition:border-color .15s, transform .15s; }
a.alert:hover { border-color:var(--clay); transform:translateY(-1px); }
.alert .a-ikona { flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--surface-2); color:var(--text-2); }
.alert .a-ikona svg { width:18px; height:18px; }
.alert.zle .a-ikona { background:var(--tlo-zle); color:var(--zle); }
.alert.uwaga .a-ikona { background:var(--tlo-uwaga); color:var(--uwaga); }
.alert.ok .a-ikona { background:var(--tlo-dobrze); color:var(--dobrze); }
.alert .a-liczba { font-family:var(--serif); font-size:1.5rem; font-weight:500; line-height:1; letter-spacing:-.02em; }
.alert .a-liczba small { font-size:.55em; color:var(--text-3); font-family:var(--sans); margin-left:4px; letter-spacing:0; }
.alert .a-tekst { font-size:.84rem; color:var(--text-2); margin-top:4px; line-height:1.4; }
.odliczanie { display:flex; align-items:center; gap:14px; margin-bottom:10px; }
.odliczanie .o-dni { font-family:var(--serif); font-weight:500; font-size:3rem; line-height:1; letter-spacing:-.04em; color:var(--zle); }
.odliczanie .o-dni.spokojnie { color:var(--text); }
.odliczanie .o-opis { font-size:.86rem; color:var(--text-2); line-height:1.35; }
.odliczanie .o-opis b { color:var(--text); }
.lista-osob { list-style:none; margin:0; padding:0; }
.lista-osob li { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:4px 10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line-2); }
.lista-osob li:last-child { border-bottom:0; }
.lista-osob .lo-kto { min-width:0; }
.lista-osob .lo-kto a { color:var(--text); text-decoration:none; font-weight:560; font-size:.9rem; }
.lista-osob .lo-kto a:hover { color:var(--clay); }
.lista-osob .lo-kto span { display:block; font-size:.74rem; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lista-osob .lo-wart { text-align:right; font-variant-numeric:tabular-nums; font-weight:620; font-size:.9rem; white-space:nowrap; }
.lista-osob .lo-wart small { display:block; font-weight:400; color:var(--text-3); font-size:.72rem; }
.lista-osob .miernik { grid-column:2 / -1; }

/* ---------- tabela pracownikow ---------- */
.tabela-osob td { vertical-align:middle; }
.tabela-osob .osoba { display:flex; align-items:center; gap:10px; min-width:200px; }
.tabela-osob .osoba a { color:var(--text); text-decoration:none; font-weight:580; }
.tabela-osob .osoba a:hover { color:var(--clay); }
.tabela-osob .osoba small { display:block; color:var(--text-3); font-size:.74rem; }
.tabela-osob .kol-miernik { min-width:170px; }
.tabela-osob .kol-miernik .miernik { margin-top:4px; }
.tabela-osob .kol-miernik .opis-m { font-size:.72rem; color:var(--text-3); white-space:nowrap; }
.tabela-osob tr.nieaktywny td { color:var(--text-3); }
.tabela-osob tr.wykluczony td:first-child { box-shadow:inset 3px 0 0 var(--s-kontekst); }
.tabela th[data-sort] { cursor:pointer; user-select:none; }
.tabela th[data-sort]:hover { color:var(--text); }
.tabela th[data-sort]::after { content:''; display:inline-block; width:0; height:0; margin-left:5px; vertical-align:2px; border:4px solid transparent; }
.tabela th[aria-sort="ascending"]::after { border-bottom-color:currentColor; border-top-width:0; }
.tabela th[aria-sort="descending"]::after { border-top-color:currentColor; border-bottom-width:0; }
.licznik-wynikow { font-size:.8rem; color:var(--text-3); margin:0 0 8px; }

/* ---------- os czasu (kalendarz i planer) ---------- */
.os-narzedzia { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; margin:0 0 10px; }
.os-narzedzia .zakres-tytul { font-family:var(--serif); font-size:1.25rem; font-weight:500; letter-spacing:-.01em; min-width:190px; }
.os-karta { padding:0; overflow:hidden; }
.os-przewijanie { position:relative; overflow:auto; max-height:calc(100vh - 250px); min-height:320px; overscroll-behavior:contain; }
@media (max-width:899px) { .os-przewijanie { max-height:calc(100vh - 230px - var(--dolna)); } }
.os { position:relative; display:grid; grid-template-columns:var(--kol-osob, 250px) var(--szer-osi, 1000px); width:max-content; min-width:100%; }
.os-rog { position:sticky; left:0; top:0; z-index:7; background:var(--surface); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  display:flex; align-items:flex-end; padding:8px 12px; font-size:.7rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.06em; height:var(--wys-glowy, 52px); }
.os-glowa { position:sticky; top:0; z-index:5; background:var(--surface); border-bottom:1px solid var(--line); height:var(--wys-glowy, 52px); }
.os-glowa .m { position:absolute; top:0; height:22px; padding:3px 6px; font-size:.76rem; font-weight:620; color:var(--text); border-left:1px solid var(--line); white-space:nowrap; overflow:hidden; }
.os-glowa .d { position:absolute; top:22px; bottom:0; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:.68rem; color:var(--text-2); line-height:1.1; font-variant-numeric:tabular-nums; z-index:0; }
.os-glowa .d i { font-style:normal; font-size:.58rem; color:var(--text-3); text-transform:uppercase; }
.os-glowa .d.wolny { color:var(--text-3); }
.os-glowa .d.swieto, .os-glowa .d.swieto i { color:var(--clay); }
.os-glowa .d.dzis, .os-glowa .d.dzis i { color:#fff; }
.os-glowa .d.dzis::before { content:''; position:absolute; inset:3px 1px; background:var(--clay); border-radius:6px; z-index:-1; }
.os-osoba { position:sticky; left:0; z-index:4; background:var(--surface); border-right:1px solid var(--line); border-bottom:1px solid var(--line-2);
  display:flex; align-items:center; gap:9px; padding:0 10px; height:var(--wys-wiersza, 38px); min-width:0; }
.os-osoba .o-tekst { min-width:0; flex:1 1 auto; line-height:1.15; }
.os-osoba .o-nazwa { display:block; font-size:.84rem; font-weight:580; color:var(--text); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.os-osoba .o-nazwa:hover { color:var(--clay); }
.os-osoba .o-dzial { display:block; font-size:.68rem; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.os-osoba .o-saldo { flex:0 0 auto; font-size:.7rem; font-weight:620; font-variant-numeric:tabular-nums; padding:2px 7px; border-radius:999px; background:var(--surface-2); color:var(--text-2); border:1px solid var(--line-2); }
.os-osoba .o-saldo.duze { color:var(--uwaga); background:var(--tlo-uwaga); border-color:color-mix(in srgb, var(--uwaga) 35%, var(--line)); }
.os-osoba .o-saldo.zagrozony { color:var(--zle); background:var(--tlo-zle); border-color:color-mix(in srgb, var(--zle) 35%, var(--line)); }
.os-grupa { position:sticky; left:0; z-index:4; grid-column:1; background:var(--surface-2); border-bottom:1px solid var(--line-2); border-right:1px solid var(--line);
  padding:5px 12px; font-size:.7rem; font-weight:650; letter-spacing:.05em; text-transform:uppercase; color:var(--text-2); height:26px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.os-grupa-pas { grid-column:2; background:var(--surface-2); border-bottom:1px solid var(--line-2); height:26px; position:relative; z-index:1; }
.os-pas { position:relative; height:var(--wys-wiersza, 38px); border-bottom:1px solid var(--line-2); z-index:1; }
.os-pas.planuje { cursor:crosshair; }
.os-osoba.hover, .os-pas.hover { background:color-mix(in srgb, var(--s-wyp) 6%, transparent); }
.os-osoba.hover { background:color-mix(in srgb, var(--s-wyp) 6%, var(--surface)); }
.os-tlo { position:absolute; left:var(--kol-osob, 250px); top:var(--wys-glowy, 52px); bottom:0; width:var(--szer-osi, 1000px); pointer-events:none; z-index:0; }
.os-tlo .w { position:absolute; top:0; bottom:0; background:var(--tlo-weekend); }
.os-tlo .s { position:absolute; top:0; bottom:0; background:var(--tlo-swieto); }
.os-tlo .dz { position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; background:var(--clay); opacity:.8; }
.os-tlo .ms { position:absolute; top:0; bottom:0; width:1px; background:var(--line); }
.os-pas .pasek-urlopu { --g:var(--s-wyp); position:absolute; top:8px; height:calc(100% - 16px); border-radius:6px; background:var(--g); z-index:2;
  display:flex; align-items:center; padding:0 6px; overflow:hidden; font-size:.66rem; font-weight:650; color:#fff; white-space:nowrap; cursor:pointer;
  box-shadow:0 0 0 2px var(--surface); transition:transform .12s, box-shadow .12s; border:0; font-family:var(--sans); }
.os-pas .pasek-urlopu:hover, .os-pas .pasek-urlopu:focus-visible { transform:translateY(-1px); box-shadow:0 0 0 2px var(--surface), 0 4px 10px -4px #00000059; outline:none; z-index:3; }
.os-pas .pasek-urlopu.plan { background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--g) 50%, var(--surface)) 0 3px, color-mix(in srgb, var(--g) 12%, var(--surface)) 3px 7px);
  color:var(--text); box-shadow:inset 0 0 0 1.5px var(--g), 0 0 0 2px var(--surface); }
.os-pas .pasek-urlopu.plan.aplikacja { box-shadow:inset 0 0 0 2px var(--g), 0 0 0 2px var(--surface); }
.os-pas .pasek-urlopu.waski { padding:0; }
.os-pas .zaznaczenie { position:absolute; top:5px; bottom:5px; border-radius:6px; background:color-mix(in srgb, var(--s-wyp) 18%, transparent); box-shadow:inset 0 0 0 2px var(--s-wyp); z-index:1; pointer-events:none; }
.os-stopka-osoba { position:sticky; left:0; bottom:0; z-index:7; background:var(--surface); border-right:1px solid var(--line); border-top:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:center; padding:4px 12px; font-size:.7rem; color:var(--text-2); height:44px; line-height:1.25; }
.os-stopka-osoba b { color:var(--text); font-size:.76rem; }
.os-stopka { position:sticky; bottom:0; z-index:5; background:var(--surface); border-top:1px solid var(--line); height:44px; }
.os-stopka .ob { position:absolute; top:7px; bottom:7px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:.64rem; font-weight:620;
  color:var(--text); font-variant-numeric:tabular-nums; background:var(--c0); }
.os-stopka .ob.q1 { background:var(--c1); } .os-stopka .ob.q2 { background:var(--c2); } .os-stopka .ob.q3 { background:var(--c3); }
.os-stopka .ob.q4 { background:var(--c4); } .os-stopka .ob.q5 { background:var(--c5); } .os-stopka .ob.q6 { background:var(--c6); }
.os-stopka .ob.ciemne { color:#fff; }
.os-stopka .ob.wolny { background:transparent; }
.os-stopka .ob.przekroczony { box-shadow:inset 0 0 0 2px var(--zle); }
.os-pusto { padding:40px 16px; text-align:center; color:var(--text-3); }
.os-legenda { display:flex; flex-wrap:wrap; gap:6px 16px; padding:10px 14px; border-top:1px solid var(--line); font-size:.78rem; color:var(--text-2); align-items:center; }
.os-legenda .wskazowka { margin-left:auto; color:var(--text-3); }
@media (max-width:640px) { .os { --kol-osob:150px; } .os-osoba .o-saldo { display:none; } .os-osoba .awatar { display:none; } .os-legenda .wskazowka { margin-left:0; } }

/* okno planera */
.plan-podsumowanie { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin:6px 0 14px; }
.plan-podsumowanie div { background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r); padding:8px 10px; }
.plan-podsumowanie b { display:block; font-family:var(--serif); font-size:1.35rem; font-weight:500; letter-spacing:-.02em; }
.plan-podsumowanie span { font-size:.72rem; color:var(--text-3); }
.plan-podsumowanie .zle b { color:var(--zle); }
.okno .osoba-okna { display:flex; gap:10px; align-items:center; margin-bottom:12px; }
.okno .osoba-okna small { display:block; color:var(--text-3); font-size:.76rem; }
.okno .blad-okna { color:var(--zle); font-size:.84rem; margin:0 0 10px; }
.okno .info-wpisu { font-size:.86rem; color:var(--text-2); }
.okno .info-wpisu dt { font-size:.72rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.04em; margin-top:8px; }
.okno .info-wpisu dd { margin:2px 0 0; color:var(--text); }

/* ---------- karta pracownika ---------- */
.karta-osoby { display:grid; gap:16px; grid-template-columns:minmax(0, 1fr); align-items:center; }
@media (min-width:900px) { .karta-osoby { grid-template-columns:auto minmax(0, 1fr) auto; } }
.karta-osoby h2 { font-family:var(--serif); font-weight:500; font-size:clamp(1.5rem, 3.5vw, 2rem); letter-spacing:-.02em; margin:0; line-height:1.1; }
.karta-osoby .meta { display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:6px; font-size:.84rem; color:var(--text-2); }
.karta-osoby .meta span { white-space:nowrap; }
.karta-osoby .statusy { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-start; }
@media (min-width:900px) { .karta-osoby .statusy { justify-content:flex-end; max-width:320px; } }
.liczby-osoby { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
@media (min-width:700px) { .liczby-osoby { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (min-width:1100px) { .liczby-osoby { grid-template-columns:repeat(6, minmax(0, 1fr)); } }
.liczby-osoby > div { background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r); padding:10px 12px; min-width:0; }
.liczby-osoby b { display:block; font-family:var(--serif); font-weight:500; font-size:1.6rem; letter-spacing:-.03em; line-height:1.1; }
.liczby-osoby span { font-size:.74rem; color:var(--text-3); }
.liczby-osoby .wyroznione { background:var(--surface); border-color:var(--s-wyp); box-shadow:inset 0 3px 0 var(--s-wyp); }
.liczby-osoby .alarm { background:var(--surface); border-color:var(--zle); box-shadow:inset 0 3px 0 var(--zle); }
.liczby-osoby .alarm b { color:var(--zle); }

/* roczny kalendarz osoby: 12 wierszy x 31 dni */
.rok-kal { display:grid; grid-template-columns:42px repeat(31, minmax(0, 1fr)); gap:2px; font-size:.64rem; color:var(--text-3); }
.rok-kal .rk-m { display:flex; align-items:center; justify-content:flex-end; padding-right:6px; font-size:.7rem; }
.rok-kal .rk-n { text-align:center; font-variant-numeric:tabular-nums; }
.rok-kal .rk { aspect-ratio:1; min-height:12px; border-radius:3px; background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line-2); }
.rok-kal .rk.wolny { background:var(--tlo-weekend); box-shadow:none; }
.rok-kal .rk.brak { background:transparent; box-shadow:none; }
.rok-kal .rk.u { --g:var(--s-wyp); background:var(--g); box-shadow:none; }
.rok-kal .rk.u.plan { background:repeating-linear-gradient(135deg, var(--g) 0 2px, color-mix(in srgb, var(--g) 18%, var(--surface)) 2px 4px); box-shadow:inset 0 0 0 1px var(--g); }
.rok-kal .rk.dzis { outline:2px solid var(--clay); outline-offset:1px; }
@media (max-width:700px) { .rok-kal { grid-template-columns:30px repeat(31, minmax(0, 1fr)); gap:1px; } .rok-kal .rk { min-height:7px; border-radius:2px; } .rok-kal .rk-n { font-size:.5rem; } }

/* lista wpisow (urlopy osoby) */
.lista-wpisow { list-style:none; margin:0; padding:0; }
.lista-wpisow li { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:4px 12px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line-2); font-size:.88rem; }
.lista-wpisow li:last-child { border-bottom:0; }
.lista-wpisow .lw-pasek { width:6px; height:30px; border-radius:3px; background:var(--g); }
.lista-wpisow .lw-pasek.plan { background:repeating-linear-gradient(135deg, var(--g) 0 2px, transparent 2px 4px); box-shadow:inset 0 0 0 1px var(--g); }
.lista-wpisow .lw-kiedy { font-weight:580; }
.lista-wpisow .lw-typ { display:block; color:var(--text-3); font-size:.76rem; }
.lista-wpisow .lw-dni { font-variant-numeric:tabular-nums; font-weight:620; white-space:nowrap; }
.przewijana { max-height:420px; overflow:auto; }

/* ---------- menu "Wiecej" na telefonie ---------- */
.dolna button.dolna-wiecej { border:0; background:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:8px 4px 6px; color:var(--text-2); font-size:.66rem; font-family:var(--sans); cursor:pointer; }
.dolna button.dolna-wiecej svg { width:22px; height:22px; }
.zaslona-menu { display:none; }
body.menu-otwarte .zaslona-menu { display:block; }

/* ---------- stopka danych i wydruk ---------- */
.zrodlo-danych { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; font-size:.78rem; color:var(--text-3); margin-top:20px; }
.zrodlo-danych svg { width:15px; height:15px; }
@media print {
  .baner-demo, .pasek-filtrow, .os-narzedzia, .przelacz-tabele, .akcje-karty { display:none !important; }
  .os-przewijanie { max-height:none; overflow:visible; }
  .dymek { display:none !important; }
}

/* ---------- dodatki do wykresow, pulpitu i menu (etap 2) ---------- */
@media (min-width:900px) { .nav .tylko-mobile { display:none !important; } }
.klucz.odcien { background:color-mix(in srgb, var(--g, var(--s-wyp)) 50%, var(--surface)); }
.klucz.kontur { background:color-mix(in srgb, var(--g, var(--s-wyp)) 7%, transparent); box-shadow:inset 0 0 0 1.3px var(--g, var(--s-wyp)); }
.dymek .d-klucz.pelny { width:10px; height:10px; border-radius:2px; }
.dymek .d-klucz.odcien { width:10px; height:10px; border-radius:2px; background:color-mix(in srgb, var(--g) 50%, var(--surface)); }
.dymek .d-klucz.plan { width:10px; height:10px; border-radius:2px; }
.odstep-dol { margin-bottom:10px; }
.mapa.dzialy th.wiersz { width:200px; text-align:left; padding-right:10px; }
.mapa.dzialy th.wiersz a { color:inherit; text-decoration:none; }
.mapa.dzialy th.wiersz a:hover { color:var(--clay); }
.mapa th.dzis { color:var(--clay); font-weight:650; }
.mapa.dzialy { min-width:640px; }
.wykres-w .w-dzis-tekst { font-weight:650; }
.lista-dzis .kto .drobny { font-weight:400; }
.dzien-tyg[data-dymek] { cursor:default; }
.dzien-tyg:focus-visible, .mapa td:focus-visible { outline:2px solid var(--clay); outline-offset:1px; }

.alert .a-liczba, .alert .a-tekst { display:block; }
.mapa td.zero { background:var(--surface-2) !important; }
.mapa col.kol-nazwy { width:200px; }
.mapa.dzialy th.wiersz { width:auto; }
.liczby-roku { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin-top:18px; padding-top:14px; border-top:1px solid var(--line-2); }
.liczby-roku > div { display:flex; flex-direction:column; gap:2px; min-width:0; }
.lr-etykieta { font-size:.74rem; color:var(--text-3); letter-spacing:.02em; }
.lr-liczba { font-family:var(--serif); font-weight:500; font-size:clamp(1.5rem, 3vw, 2rem); line-height:1.1; letter-spacing:-.03em; }
.lr-liczba small { font-family:var(--sans); font-size:.45em; font-weight:500; color:var(--text-3); letter-spacing:0; }
.lr-dopisek { font-size:.76rem; color:var(--text-3); line-height:1.35; }
@media (max-width:640px) { .liczby-roku { grid-template-columns:minmax(0, 1fr); } }
.podnaglowek { font-family:var(--sans); font-size:.76rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); margin:20px 0 8px; }
.dzialy-mierniki { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.dzialy-mierniki li { display:grid; grid-template-columns:minmax(0, 190px) minmax(0, 1fr) 118px; gap:12px; align-items:center; }
.dzialy-mierniki .dm-nazwa { font-size:.84rem; color:var(--text); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dzialy-mierniki .dm-nazwa:hover { color:var(--clay); }
.dzialy-mierniki .dm-liczby { font-size:.82rem; font-weight:620; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.dzialy-mierniki .dm-liczby small { font-weight:400; color:var(--text-3); margin-left:6px; font-size:.72rem; }
@media (max-width:640px) { .dzialy-mierniki li { grid-template-columns:minmax(0, 1fr) auto; } .dzialy-mierniki .miernik { grid-column:1 / -1; grid-row:2; } }

/* ---------- kalendarz: dodatki ---------- */
.os [hidden], .os-glowa [hidden] { display:none !important; }
#kalendarz.laduje .os-przewijanie { opacity:.55; transition:opacity .15s; }
.os-narzedzia .przerwa, .okno-stopka .przerwa { flex:1 1 auto; }
.os-glowa .d.tydz { align-items:flex-start; justify-content:flex-end; padding:0 0 6px 3px; border-left:1px solid var(--line-2); font-size:.66rem; }
.os-glowa .d.punkt::before { inset:auto 0 6px 0; height:8px; border-radius:50%; }
.os-pas .poza-umowa { position:absolute; top:0; bottom:0; background:repeating-linear-gradient(135deg, var(--line-2) 0 3px, transparent 3px 7px); z-index:1; }
.os-osoba .o-plus { flex:0 0 auto; width:24px; height:24px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--text-2); font-size:1rem; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; padding:0; opacity:0; transition:opacity .12s; }
.os-osoba.hover .o-plus, .os-osoba .o-plus:focus-visible, .os-osoba:focus-within .o-plus { opacity:1; }
.os-osoba .o-plus:hover { color:#fff; background:var(--przycisk); border-color:var(--przycisk); }
@media (hover:none) { .os-osoba .o-plus { opacity:1; } }
.os-stopka-osoba span { color:var(--text-3); font-size:.66rem; }
.klucz.tlo-swieta { background:var(--tlo-swieto); box-shadow:inset 0 0 0 1px var(--line); }
.okno .osoba-okna b { display:block; font-weight:600; }
.plan-uwagi { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
.plan-uwagi:empty { display:none; }
.plan-podsumowanie b small { font-family:var(--sans); font-size:.55em; color:var(--text-3); letter-spacing:0; }
.pasek-filtrow .przelacznik-filtra { margin:0 0 8px; font-size:.84rem; align-self:flex-end; }
.pasek-filtrow .przelacznik-filtra input { margin-top:2px; }
.os.zakres-rok .pasek-urlopu { border-radius:3px; top:10px; height:calc(100% - 20px); box-shadow:none; }
.os.zakres-rok .pasek-urlopu.plan { box-shadow:inset 0 0 0 1px var(--g); }
.os.zakres-rok .os-stopka .ob { border-radius:1px; }
.os.zakres-kwartal .pasek-urlopu { border-radius:4px; }
dialog.okno .okno-stopka { align-items:center; }
.os-przewijanie { scrollbar-gutter:stable; }
[hidden] { display:none !important; }
.os-stopka .ob.zero { background:var(--surface-2); }
.os.zakres-rok .os-tlo .w { display:none; }
.statusy-wiersza { display:flex; flex-wrap:wrap; gap:4px; align-items:center; min-width:150px; }
.tabela-osob td.kol-miernik .opis-m { display:block; }
.pasek-filtrow a.drugi { text-decoration:none; }
.lata-osoby { margin-top:16px; flex-wrap:wrap; }
.info-osoby { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin:14px 0 0; font-size:.86rem; color:var(--text-2); }
.info-osoby .kropka-sep { color:var(--text-3); }
.karta-osoby .awatar.duzy.neutralny { box-shadow:inset 0 0 0 3px var(--line); }
.tabela-osob th, .tabela-osob td { padding:8px 8px; }
.tabela-osob .kol-dzial { max-width:170px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text-2); }
.tabela-osob .osoba { min-width:190px; }
.tabela-osob .kol-miernik { min-width:130px; }
.tabela-osob .statusy-wiersza { min-width:120px; }
.tabela-osob th { font-size:.66rem; letter-spacing:.03em; }
.tabela-osob .kol-dzial { max-width:140px; }
.tabela-osob .osoba a { white-space:nowrap; }
.tabela-osob .osoba small { max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.karta-osoby .meta-glowna { margin-top:0; font-size:.92rem; }
.karta-osoby .meta-glowna span:first-child { color:var(--text); font-weight:600; }
.lista-osob .lo-dol { grid-column:2 / -1; display:flex; gap:10px; align-items:center; }
.lista-osob .lo-dol .miernik { flex:1 1 auto; }
.lista-osob .lo-dol .drugi.maly { min-height:26px; padding:3px 10px; font-size:.74rem; }
.szukaj-karty { width:auto; min-height:32px; padding:5px 10px; font-size:.84rem; max-width:220px; }
.lista-top { list-style:none; margin:0; padding:0; counter-reset:top; }
.lista-top li { display:grid; grid-template-columns:28px minmax(0, 1fr) auto; gap:4px 10px; align-items:baseline; padding:8px 0; border-bottom:1px solid var(--line-2); font-size:.88rem; counter-increment:top; }
.lista-top li::before { content:counter(top); font-family:var(--serif); font-weight:500; color:var(--text-3); font-size:1rem; }
.lista-top li:last-child { border-bottom:0; }
.lista-top .lt-data { font-weight:580; }
.lista-top .lt-opis { grid-column:2; grid-row:2; font-size:.74rem; color:var(--text-3); }
.lista-top .lt-opis:empty { display:none; }
.lista-top .lt-wart { font-variant-numeric:tabular-nums; font-weight:620; white-space:nowrap; }
.mapa.mapa-lata th.wiersz { width:64px; }
.mapa .suma { background:transparent !important; color:var(--text); font-variant-numeric:tabular-nums; padding:0 6px; text-align:right; width:70px; }
.mapa th.suma { color:var(--text-3); }
.mapa-lata { min-width:620px; }

/* ---------- panel administratora ---------- */
.lista-stanu { display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:6px 16px; margin:0; font-size:.88rem; }
.lista-stanu dt { color:var(--text-3); }
.lista-stanu dd { margin:0; color:var(--text); overflow-wrap:anywhere; }
@media (max-width:560px) { .lista-stanu { grid-template-columns:minmax(0, 1fr); } .lista-stanu dd { margin-bottom:6px; } }
.wiersz-formularza { display:flex; flex-wrap:wrap; gap:10px 12px; align-items:flex-end; margin-bottom:12px; }
.wiersz-formularza .pole { margin:0; flex:0 0 auto; }
.wiersz-formularza .pole.szerokie { flex:1 1 220px; }
.lista-dni-wolnych { list-style:none; margin:0; padding:0; max-height:300px; overflow:auto; }
.lista-dni-wolnych li { display:grid; grid-template-columns:120px minmax(0, 1fr) auto; gap:10px; align-items:center; padding:7px 0; border-bottom:1px solid var(--line-2); font-size:.88rem; }
.lista-dni-wolnych li:last-child { border-bottom:0; }
.pole-waskie { width:90px !important; min-height:32px !important; padding:4px 8px !important; text-align:right; }
.wybor-dzialow { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap:0 14px; max-height:280px; overflow:auto; padding:8px 10px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--surface-2); }
.wybor-dzialow .pole-wybor, .pole .wybor-dzialow label.pole-wybor { display:flex; font-size:.88rem; line-height:1.4; margin:0; padding-top:5px; padding-bottom:5px; }
.wybor-dzialow .pole-wybor input { flex:none; margin-top:1px; }
.wybor-dzialow .drobny { white-space:nowrap; }
fieldset.pole { border:0; padding:0; margin:0 0 14px; min-width:0; }
fieldset.pole legend { padding:0; margin-bottom:6px; }
.wiersz-zakresu td { padding-top:0; background:var(--surface); }
.wiersz-zakresu summary { cursor:pointer; font-size:.8rem; color:var(--text-2); padding:2px 0 6px; }
.wiersz-zakresu summary:hover { color:var(--clay); }
.tabela tbody tr.wiersz-zakresu:hover { background:transparent; }
small.blok { display:block; }