.shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;padding:22px 14px;border-right:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;gap:22px}
.side .logo{height:30px;margin:0 8px}
.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(--warn);color:#1a1400;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:#4b5568}
.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(--mint-dim);color:var(--mint)}
.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:#38404f}
.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;display:grid;place-items:center;padding:20px}
.login .card{width:min(400px,100%);display:grid;gap:18px;padding:32px}
.login img{height:34px}

.today-hero{display:grid;gap:8px;padding:26px;border-radius:var(--radius);background:linear-gradient(135deg,rgba(117,218,180,.16),rgba(117,218,180,.03));border:1px solid rgba(117,218,180,.25)}
.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){
  .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(--warn);color:#1a1400;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}