.shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;height:100dvh;padding:22px 14px;border-right:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;gap:22px;overflow-y:auto;overscroll-behavior:contain}
.side .me{flex:none}
.side .logo{width:100%;max-width:200px;height:auto;margin:0 4px}
.nav{display:grid;gap:4px}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--muted);text-decoration:none;font-weight:500}
.nav a svg{width:19px;height:19px;flex:none}
.nav a:hover{background:var(--surface-2);color:var(--text)}
.nav a[aria-current=page]{background:var(--mint-dim);color:var(--mint)}
.nav .badge{margin-left:auto;background:var(--sun);color:var(--navy);border-radius:999px;font-size:12px;font-weight:700;padding:1px 8px}
.side .me{margin-top:auto;padding:12px;border-radius:12px;background:var(--surface-2);display:grid;gap:8px}
.main{padding:28px clamp(16px,3vw,40px) 60px;min-width:0;max-width:1280px;width:100%}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.page-head p{margin:6px 0 0;color:var(--muted)}
.seg{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:3px}
.seg button{border:0;background:none;color:var(--muted);padding:7px 14px;border-radius:8px;cursor:pointer;font-weight:500}
.seg button[aria-pressed=true]{background:var(--mint-dim);color:var(--mint)}
.who{display:flex;align-items:center;gap:10px;font-weight:500}
.av{width:32px;height:32px;border-radius:50%;background:var(--mint-dim);color:var(--mint);display:grid;place-items:center;font-size:13px;font-weight:600;flex:none}
.link{background:none;border:0;padding:0;color:var(--text);font-weight:500;cursor:pointer;text-align:left}
.link:hover{color:var(--mint);text-decoration:underline}
.thumb{width:40px;height:40px;border-radius:8px;object-fit:cover;background:var(--surface-3);cursor:pointer;border:1px solid var(--line)}
.photo-view{max-width:100%;border-radius:12px;display:block}

/* siatka kalendarza raportu */
.cal{border-collapse:separate;border-spacing:3px;font-size:12px}
.cal th{padding:2px;text-align:center;font-size:11px;color:var(--faint);letter-spacing:0;text-transform:none;border:0}
.cal th.we{color:#98a4c2}
.cal td{padding:0;border:0;text-align:center}
.cal td.name{text-align:left;padding-right:12px;white-space:nowrap;font-size:13px}
.cal .c{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;font-size:11px;font-weight:600;background:var(--surface-2);color:var(--faint)}
.cal .c.present{background:var(--ok-dim);color:var(--ok)}
.cal .c.late{background:var(--warn-dim);color:var(--warn)}
.cal .c.absent{background:var(--danger-dim);color:var(--danger)}
.cal .c.leave{background:var(--info-dim);color:var(--info)}
.cal .c.free,.cal .c.holiday,.cal .c.future,.cal .c.pending{background:transparent;color:#b3bdd6}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);padding:14px 20px;border-top:1px solid var(--line)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;border-radius:3px;display:inline-block}

.login{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:20px;position:relative;overflow:hidden;
  background:radial-gradient(1.2px 1.2px at 12% 18%,#fff 98%,transparent),radial-gradient(1.6px 1.6px at 78% 12%,#fff 98%,transparent),radial-gradient(1.2px 1.2px at 30% 55%,#fff 98%,transparent),radial-gradient(1.4px 1.4px at 88% 48%,#fff 98%,transparent),radial-gradient(1.2px 1.2px at 55% 32%,#fff 98%,transparent),radial-gradient(1.6px 1.6px at 8% 72%,#fff 98%,transparent),radial-gradient(1.2px 1.2px at 66% 68%,#fff 98%,transparent),linear-gradient(#6aa6ff,#8fbcff 60%,#b5d2ff)}
.login::after{content:"";position:absolute;left:-15%;right:-15%;bottom:-140px;height:260px;border-radius:50%;background:radial-gradient(circle at 22% 38%,#f2a60f 0 26px,transparent 27px),radial-gradient(circle at 62% 30%,#f2a60f 0 40px,transparent 41px),radial-gradient(circle at 82% 55%,#f2a60f 0 20px,transparent 21px),#ffd83a;box-shadow:0 0 0 6px #14275c;pointer-events:none}
.login .card{width:min(420px,100%);display:grid;gap:18px;padding:32px;position:relative;z-index:1;text-align:center}
.login .card form,.login .card .stack{text-align:left}
.login .brand{width:min(320px,100%);height:auto;margin:0 auto;display:block}
.login .astro{position:absolute;right:max(10px,4vw);top:max(10px,3vh);width:clamp(90px,16vw,150px);height:auto;pointer-events:none;z-index:0}


.today-hero{display:grid;gap:8px;padding:26px;border-radius:var(--radius);background:linear-gradient(135deg,rgba(242,192,30,.26),rgba(106,166,255,.14));border:1px solid rgba(242,192,30,.5)}
.today-hero .big{font-family:var(--display);font-size:34px}
.punch-line{display:flex;gap:10px;align-items:center;font-family:var(--mono)}

.mobilebar{display:none}
@media (max-width:860px), (max-height:520px){
  .shell{grid-template-columns:1fr}
  .side{display:none}
  .main{padding-bottom:96px}
  .mobilebar{display:flex;position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:6px 6px max(6px,env(safe-area-inset-bottom));z-index:30;overflow-x:auto;gap:2px}
  .mobilebar a{flex:1 0 auto;min-width:64px;display:grid;justify-items:center;gap:2px;padding:6px 8px;border-radius:10px;color:var(--muted);text-decoration:none;font-size:11px;position:relative}
  .mobilebar a svg{width:21px;height:21px}
  .mobilebar a[aria-current=page]{color:var(--mint);background:var(--mint-dim)}
  .mobilebar .badge{position:absolute;top:0;right:8px;background:var(--sun);color:var(--navy);border-radius:999px;font-size:10px;font-weight:700;padding:0 6px}
  .topbar-m{display:flex!important}
}
.topbar-m{display:none;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface)}
.topbar-m img{height:24px}

@media print{
  :root{--bg:#fff;--surface:#fff;--surface-2:#f4f6f8;--surface-3:#eef1f4;--text:#111;--muted:#444;--faint:#777;--line:#ccc;--line-strong:#bbb;--mint:#0a7d57;--mint-dim:#dff5ec;--warn:#8a5a00;--warn-dim:#fff1cc;--danger:#b3202f;--danger-dim:#fde3e6;--info:#0a6f86;--info-dim:#dcf3f8}
  body{background:#fff;color:#111}
  .side,.mobilebar,.topbar-m,.noprint,.btn,.seg{display:none!important}
  .shell{display:block}.main{padding:0;max-width:none}
  .card{break-inside:avoid;border-color:#ccc}
}

.row>select.input,.row>label.f>select.input{width:auto;min-width:220px}

/* gdy pisze się na telefonie, chowamy dolny pasek nawigacji (i tak zasłaniałby pola) */
body.typing .mobilebar{display:none}
body.typing .main{padding-bottom:24px}

/* pomoc: rozwijane instrukcje */
.help-list{display:grid;gap:8px}
.help-item{border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.help-item summary{cursor:pointer;padding:12px 14px;font-weight:600;list-style:none;display:flex;align-items:center}
.help-item summary::-webkit-details-marker{display:none}
.help-item summary::before{content:"▸";margin-right:10px;color:var(--mint);transition:transform .15s}
.help-item[open] summary::before{transform:rotate(90deg)}
.help-body{padding:2px 16px 16px 16px}
.help-steps{margin:8px 0 0;padding-left:22px;display:grid;gap:8px}
.help-steps li{line-height:1.5}
.help-body b.mono{overflow-wrap:anywhere}
@media print{.help-item:not([open]) .help-body{display:block}}

/* ---------- grafik ---------- */
.grid-wrap{max-height:70vh;overflow:auto}
table.sched{border-collapse:separate;border-spacing:0;width:auto;font-size:12px}
table.sched th,table.sched td{padding:0;border-bottom:1px solid var(--line);border-right:1px solid var(--line);text-align:center;vertical-align:middle}
table.sched thead th{position:sticky;top:0;background:var(--surface);z-index:3;height:44px;text-transform:none;letter-spacing:0;font-size:11px}
table.sched .gname{position:sticky;left:0;z-index:2;background:var(--surface);min-width:150px;max-width:190px;text-align:left;padding:8px 12px;border-right:2px solid var(--line-strong)}
table.sched thead .gname{z-index:4}
table.sched .gcell{min-width:50px;width:50px}
table.sched .gh .gd{font-weight:600;color:var(--muted)}table.sched .gh .gn{font-size:13px;color:var(--text)}
table.sched .we,table.sched .hol{background:var(--surface-2)}
table.sched .hol.gh .gn{color:var(--danger)}
table.sched .wk{border-left:2px solid var(--line-strong)}
table.sched .ghead td{background:var(--surface-3);color:var(--navy);font-weight:700;text-align:left;padding:6px 12px;font-size:12px;position:sticky;left:0}
table.sched .gc{height:54px;padding:2px}
table.sched .gb{width:100%;height:100%;min-height:48px;border:0;background:transparent;cursor:pointer;border-radius:6px;color:inherit;display:grid;place-items:center;padding:0}
table.sched .gb:hover{background:var(--mint-dim)}
table.sched .gs{display:grid;gap:0;line-height:1.15;font-family:var(--mono);font-size:11px;background:rgba(242,192,30,.28);border-radius:6px;padding:3px 2px;width:100%;position:relative}
table.sched .gs em{font-style:normal;font-family:var(--font);font-size:10px;font-weight:700;color:var(--navy)}
table.sched .gs i{position:absolute;top:1px;right:2px;font-style:normal;font-size:9px;color:var(--info)}
table.sched .gs.leave{background:var(--info-dim);color:var(--info);font-family:var(--font);padding:12px 2px}
table.sched .gc.is-error{outline:2px solid var(--danger);outline-offset:-2px;background:var(--danger-dim)}
table.sched .gc.is-warn{outline:2px solid var(--sun-strong);outline-offset:-2px}
table.sched .gtot{min-width:64px;padding:4px 6px;position:sticky;right:0;background:var(--surface);border-left:2px solid var(--line-strong)}
@media (max-width:860px){table.sched .gname{min-width:104px;max-width:120px;padding:6px 8px}table.sched .gcell{min-width:46px;width:46px}}

table.sched .gb{position:relative}
table.sched .gm{position:absolute;right:1px;bottom:0;font-size:9px;line-height:1;padding:1px 3px;border-radius:4px;background:var(--surface)}
table.sched .gm.present{color:var(--ok)}table.sched .gm.late{color:var(--warn);font-weight:700}table.sched .gm.absent{color:var(--danger);font-weight:700}
@media print{.grid-wrap{max-height:none!important;overflow:visible!important}table.sched{font-size:9px}table.sched .gname{position:static}table.sched thead th{position:static}@page{size:A4 landscape;margin:8mm}}