/* ELMEDICO WorkGo — jeden arkusz, mobile-first dla pracownika,
   gęstsze tabele dla administratora (rozdz. 18.1). */
:root{
  --granat:#23407a; --niebieski:#2e5aac; --jasny:#eef2f9; --tekst:#1c2333;
  --szary:#6b7280; --ramka:#d7dee9; --zielony:#2e7d32; --zolty:#f9a825;
  --czerwony:#c62828; --wolne:#e7f5e9; --tlo:#f6f8fb;
  --cien:0 1px 3px rgba(20,30,60,.10), 0 6px 18px rgba(20,30,60,.06);
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--tlo);color:var(--tekst);font-size:15px;line-height:1.45}
a{color:var(--niebieski);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:20px;margin:0 0 14px}
h2{font-size:16px;margin:22px 0 10px}
h3{font-size:14px;margin:14px 0 8px;color:var(--szary);text-transform:uppercase;letter-spacing:.04em}

/* ---------- pasek górny ---------- */
.pasek{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;
  background:var(--granat);color:#fff;padding:8px 14px;box-shadow:var(--cien)}
.pasek a{color:#fff}
.logo{font-size:16px;white-space:nowrap}
.logo b{font-weight:700}
.menu-przycisk{display:none;background:none;border:0;color:#fff;font-size:20px;cursor:pointer}
.szukajka{flex:1;display:flex;gap:6px;max-width:560px}
.szukajka input{flex:1;padding:7px 10px;border-radius:7px;border:1px solid #40598f;background:#f9fbff}
.szukajka button{padding:7px 12px;border-radius:7px;border:0;background:#4d74c8;color:#fff;cursor:pointer}
.pasek-prawo{display:flex;align-items:center;gap:12px;margin-left:auto}
.kto{display:flex;flex-direction:column;line-height:1.15;font-size:13px}
.kto small{opacity:.75;font-size:11px}
.dzwonek{position:relative;font-size:18px}
.licznik{position:absolute;top:-6px;right:-10px;background:var(--czerwony);color:#fff;
  border-radius:9px;padding:0 5px;font-size:11px}
.link{background:none;border:0;color:#fff;text-decoration:underline;cursor:pointer;font-size:13px}

/* ---------- menu boczne ---------- */
.menu{position:fixed;top:52px;left:0;bottom:0;width:212px;background:#fff;border-right:1px solid var(--ramka);
  padding:10px 0;overflow:auto}
.menu a{display:block;padding:8px 16px;color:var(--tekst);font-size:14px}
.menu a:hover{background:var(--jasny);text-decoration:none}
.menu a.aktywny{background:var(--jasny);border-left:3px solid var(--niebieski);font-weight:600}
.menu-sekcja{margin:14px 16px 4px;font-size:11px;color:var(--szary);text-transform:uppercase;letter-spacing:.06em}
main{padding:18px}
main.z-menu{margin-left:212px}

/* ---------- karty, tabele, formularze ---------- */
.karta{background:#fff;border:1px solid var(--ramka);border-radius:12px;padding:16px;
  box-shadow:var(--cien);margin-bottom:16px}
.karty{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.kafelek{background:#fff;border:1px solid var(--ramka);border-radius:12px;padding:14px;box-shadow:var(--cien)}
.kafelek .liczba{font-size:28px;font-weight:700;line-height:1.1}
.kafelek .opis{color:var(--szary);font-size:13px}
table{width:100%;border-collapse:collapse;font-size:14px;background:#fff}
th,td{border-bottom:1px solid var(--ramka);padding:7px 9px;text-align:left;vertical-align:top}
th{background:var(--jasny);font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:#44506b;position:sticky;top:52px}
tr:hover td{background:#fbfcfe}
.tabela-przewijana{overflow-x:auto;border:1px solid var(--ramka);border-radius:10px}
input,select,textarea{font:inherit;padding:7px 9px;border:1px solid var(--ramka);border-radius:8px;background:#fff;max-width:100%}
label{display:block;font-size:13px;color:#44506b;margin:8px 0 3px}
.pola{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
button,.przycisk{font:inherit;padding:8px 14px;border-radius:9px;border:1px solid var(--niebieski);
  background:var(--niebieski);color:#fff;cursor:pointer;display:inline-block}
button:hover,.przycisk:hover{filter:brightness(1.07);text-decoration:none}
.wtorny{background:#fff;color:var(--niebieski)}
.niebezpieczny{background:var(--czerwony);border-color:var(--czerwony)}
.maly{padding:4px 9px;font-size:13px;border-radius:7px}
.rzad{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.pomoc{color:var(--szary);font-size:12.5px;margin:4px 0}

/* ---------- komunikaty ---------- */
.komunikaty{margin-bottom:14px}
.komunikat{padding:9px 12px;border-radius:9px;margin-bottom:7px;border-left:4px solid}
.komunikat.sukces{background:#eaf6ec;border-color:var(--zielony)}
.komunikat.blad{background:#fdecec;border-color:var(--czerwony)}
.komunikat.info{background:#eaf0fb;border-color:var(--niebieski)}

/* ---------- ekran czasu pracy ---------- */
.stan{display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 12px}
.stan .etykieta{font-size:13px;letter-spacing:.14em;color:var(--szary);text-transform:uppercase}
.stan .status{font-size:26px;font-weight:700}
.stan .licznik-czasu{font-variant-numeric:tabular-nums;font-size:44px;font-weight:700;letter-spacing:.02em}
.duzy-przycisk{width:min(360px,92vw);padding:20px;font-size:20px;font-weight:700;border-radius:16px;border:0}
.start{background:var(--zielony)}
.stopp{background:var(--czerwony)}
.wznow{background:var(--niebieski)}
.pastylka{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;border:1px solid}
.pracuje{background:#eaf6ec;border-color:var(--zielony);color:#1f5c23}
.przerwa{background:#fff6e0;border-color:var(--zolty);color:#7a5900}
.stoi{background:#f1f3f7;border-color:var(--ramka);color:#4a5568}

/* ---------- kalendarz ---------- */
.miesiac{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.miesiac .naglowek{font-size:11px;color:var(--szary);text-align:center;padding:2px 0;text-transform:uppercase}
.dzien{position:relative;min-height:62px;border:1px solid var(--ramka);border-radius:8px;background:#fff;
  padding:4px 5px;font-size:12px;cursor:pointer;user-select:none}
.dzien.pusty{background:transparent;border:0;cursor:default}
.dzien.wolny{background:var(--wolne)}
.dzien .nr{font-weight:700;font-size:13px}
.dzien .znacznik{display:block;font-size:10.5px;margin-top:2px;padding:1px 4px;border-radius:5px;
  border:1px solid;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dzien.zazn{outline:3px solid var(--niebieski);outline-offset:-2px}
.dzien.dzis{box-shadow:inset 0 0 0 2px var(--granat)}
.rok{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.rok .mies h3{margin:0 0 6px;color:var(--tekst);text-transform:none;font-size:13.5px}
.rok .dzien{min-height:26px;font-size:11px;padding:2px}
.rok .dzien .znacznik{display:none}
.legenda{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:#44506b;margin:10px 0}
.legenda span{display:inline-flex;align-items:center;gap:5px}
.probka{width:14px;height:14px;border-radius:4px;border:1px solid var(--ramka);display:inline-block}
.pasek-zaznaczenia{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--ramka);
  padding:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;box-shadow:0 -3px 12px rgba(0,0,0,.05)}

/* ---------- drobiazgi ---------- */
.saldo-dodatnie{color:var(--zielony);font-weight:600}
.saldo-ujemne{color:var(--czerwony);font-weight:600}
.szary{color:var(--szary)}
.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
details.blok{border:1px solid var(--ramka);border-radius:10px;background:#fff;padding:10px 14px;margin-bottom:12px}
details.blok>summary{cursor:pointer;font-weight:600}
.alert-lista li{margin-bottom:4px}
.slad{background:#f7f9fc;border:1px solid var(--ramka);border-radius:10px}

@media (max-width:860px){
  /* pasek łamie się na dwa rzędy — szukajka schodzi pod logo, nic nie wystaje w bok */
  .pasek{flex-wrap:wrap;gap:8px;padding:8px 10px}
  .logo{font-size:15px}
  .szukajka{order:5;flex:1 0 100%;max-width:none}
  .pasek-prawo{margin-left:auto;gap:10px}
  .menu{top:auto;transform:translateX(-100%);transition:transform .18s;z-index:25;box-shadow:var(--cien)}
  body.menu-otwarte .menu{transform:none}
  .menu-przycisk{display:block}
  main.z-menu{margin-left:0}
  main{padding:12px}
  .kto{display:none}
  th{position:static}
  table{font-size:13.5px}
  .dzien{min-height:54px}
}
@media print{
  .pasek,.menu,.pasek-zaznaczenia,button,.przycisk{display:none!important}
  main.z-menu{margin:0}
  .karta{box-shadow:none;border:0}
}