/* ViewOra - arkusz stylów
   Kolory marki: amber #F5A623, orange #FF7A3D, charcoal #2F2F2F, cream #FFF7EB.
   Element rozpoznawczy: "wstęga czasu" - pasek dnia sklepu 9:30-22:15 z zaznaczonymi godzinami. */

@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("../fonts/poppins-regular.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("../fonts/poppins-medium.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("../fonts/poppins-bold.woff") format("woff"); }

:root {
  color-scheme: light;
  --amber: #F5A623;
  --orange: #FF7A3D;
  --orange-ink: #9A4214;
  --orange-soft: #FFEBDD;
  --charcoal: #2F2F2F;
  --cream: #FFF7EB;

  --page: #FFFBF5;
  --surface: #FFFFFF;
  --surface-2: #FBF6EF;
  --line: #EDE4D7;
  --line-strong: #DCCFBD;
  --track: #F3ECE2;
  --text: #2F2F2F;
  --muted: #6B6359;
  --faint: #8F8579;

  --ok: #1E7A50;      --ok-bg: #E4F3EA;
  --warn: #8A5A00;    --warn-bg: #FFF1D6;
  --bad: #B3332C;     --bad-bg: #FCE9E7;
  --idle: #6B6359;    --idle-bg: #F1ECE5;

  --font-display: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 9px;
  --shadow-float: 0 10px 30px rgba(47, 47, 47, .12), 0 2px 6px rgba(47, 47, 47, .06);
  --nav-h: 64px;
  --top-h: 56px;
  --focus: 0 0 0 3px rgba(255, 122, 61, .45);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 400 15px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 17px; font-weight: 500; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--orange-ink); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
.num { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ układ */

.shell { min-height: 100vh; min-height: 100dvh; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  height: var(--top-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  background: rgba(255, 251, 245, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar .brand img { height: 30px; width: auto; display: block; }
.topbar .spacer { flex: 1; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--charcoal); color: var(--cream);
  font: 500 13px var(--font-display); border: 0;
}
.main { padding: 20px 16px calc(var(--nav-h) + 96px + env(safe-area-inset-bottom)); max-width: 1080px; margin: 0 auto; min-width: 0; width: 100%; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 18px; }
.page-head h1 { flex: 1 1 auto; }

.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.navlink {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--muted); text-decoration: none;
  font: 500 11.5px var(--font-display);
}
.navlink svg.icon { width: 22px; height: 22px; }
.navlink[aria-current="page"] { color: var(--charcoal); }
.navlink[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--orange);
}
.navlink .dot {
  position: absolute; top: 9px; left: calc(50% + 7px);
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--orange); color: var(--charcoal);
  font: 700 11px/18px var(--font-display); text-align: center;
}
.sidebar { display: none; }

@media (min-width: 960px) {
  .shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); }
  .topbar, .bottomnav { display: none; }
  .sidebar {
    display: flex; flex-direction: column; gap: 6px;
    position: sticky; top: 0; height: 100vh;
    padding: 24px 16px;
    background: var(--surface); border-right: 1px solid var(--line);
  }
  .sidebar .brand { padding: 4px 10px 22px; }
  .sidebar .brand img { width: 168px; height: auto; display: block; }
  .sidebar .navlink {
    flex-direction: row; justify-content: flex-start; gap: 12px;
    padding: 11px 12px; border-radius: var(--r-md);
    font-size: 14.5px;
  }
  .sidebar .navlink:hover { background: var(--surface-2); color: var(--charcoal); }
  .sidebar .navlink[aria-current="page"] { background: var(--cream); }
  .sidebar .navlink[aria-current="page"]::before { top: 10px; bottom: 10px; left: 0; right: auto; width: 3px; height: auto; border-radius: 0 3px 3px 0; }
  .sidebar .navlink .dot { position: static; margin-left: auto; }
  .sidebar .who { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px; border-top: 1px solid var(--line); }
  .sidebar .who .name { font: 500 14px var(--font-display); }
  .main { padding: 36px 40px 64px; }
  h1 { font-size: 30px; }
}

/* ------------------------------------------------------------------ przyciski i pola */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border-radius: var(--r-md); border: 1px solid transparent;
  font: 500 15px var(--font-display);
  text-decoration: none; white-space: nowrap;
  transition: background-color .15s, border-color .15s, opacity .15s;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--charcoal); color: var(--cream); }
.btn-primary:not(:disabled):hover { background: #1f1f1f; }
.btn-accent { background: var(--orange); color: var(--charcoal); font-weight: 700; }
.btn-accent:not(:disabled):hover { background: #ff6a26; }
.btn-ghost { background: transparent; color: var(--charcoal); border-color: var(--line-strong); }
.btn-ghost:not(:disabled):hover { background: var(--surface-2); }
.btn-link { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0 4px; min-height: 32px; color: var(--orange-ink); font: 500 14px var(--font-display); }
.btn-link svg.icon { width: 16px; height: 16px; }
.btn-danger { background: transparent; color: var(--bad); border-color: #EBC3BF; }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 14px; border-radius: var(--r-sm); }
.btn-block { width: 100%; }
.btn-lg { min-height: 52px; font-size: 16px; }

.field { display: grid; gap: 6px; }
.field > span { font: 500 13.5px var(--font-display); }
.input, .select, .textarea {
  width: 100%; min-height: 46px;
  padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font-size: 16px; /* brak zoomu na iOS */
}
.textarea { min-height: 84px; resize: vertical; }
.select {
  appearance: none; -webkit-appearance: none;
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat;
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--orange); box-shadow: var(--focus); }
.field-error { color: var(--bad); font-size: 13.5px; }

/* segmentowy przełącznik (miesiące, widoki) */
.seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: 12px; background: var(--idle-bg); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button {
  border: 0; background: transparent; border-radius: 9px;
  min-height: 36px; padding: 0 14px;
  font: 500 14px var(--font-display); color: var(--muted); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--charcoal); box-shadow: 0 1px 3px rgba(47,47,47,.12); }
.seg .count { font-size: 12px; color: var(--faint); }

/* statusy */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font: 500 12.5px/1.5 var(--font-display); white-space: nowrap;
}
.pill svg.icon { width: 14px; height: 14px; stroke-width: 2.2; }
.pill-ok { background: var(--ok-bg); color: var(--ok); }
.pill-warn { background: var(--warn-bg); color: var(--warn); }
.pill-bad { background: var(--bad-bg); color: var(--bad); }
.pill-idle { background: var(--idle-bg); color: var(--idle); }
.pill-accent { background: var(--orange-soft); color: var(--orange-ink); }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.notice {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line);
}
.notice svg.icon { margin-top: 1px; }
.notice.ok { background: var(--ok-bg); border-color: #C6E5D3; color: #164F36; }
.notice.warn { background: var(--warn-bg); border-color: #F3DDAE; color: #5E3E00; }
.notice strong { font-family: var(--font-display); font-weight: 500; }

.empty { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty img { width: 92px; opacity: .9; margin-bottom: 14px; }
.empty h2 { color: var(--charcoal); margin-bottom: 6px; }
.loading { padding: 40px 0; text-align: center; color: var(--muted); }

/* ------------------------------------------------------------------ wstęga czasu */

.ribbon { display: block; width: 100%; height: 10px; border-radius: 5px; overflow: hidden; }
.ribbon .track { fill: var(--track); }
.ribbon .closed { fill: url(#vo-closed); }
.ribbon .fill { fill: url(#vo-grad); }
.ribbon .fill.mine { fill: url(#vo-grad); }
.ribbon .fill.other { fill: #F4C886; }
.ribbon .off { fill: url(#vo-hatch); }
.ribbon .proposal { fill: none; stroke: var(--charcoal); stroke-width: 1.5; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.ribbon .tick { stroke: #FFFFFF; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .9; }
.ribbon-lg { height: 14px; border-radius: 7px; }

.axis { position: relative; height: 18px; font: 500 11px var(--font-display); color: var(--faint); }
.axis span { position: absolute; transform: translateX(-50%); }

/* ------------------------------------------------------------------ logowanie */

.login {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: 32px 20px;
  background: radial-gradient(1200px 500px at 50% -10%, var(--cream), var(--page) 70%);
}
.login-card { width: 100%; max-width: 400px; }
.login-card .logo { display: block; width: 210px; height: auto; margin: 0 auto 28px; }
.login-card form { display: grid; gap: 16px; padding: 24px; }
.login-card h1 { font-size: 22px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.check input { width: 20px; height: 20px; accent-color: var(--charcoal); }
.demo { margin-top: 18px; padding: 16px; }
.demo p { margin-bottom: 10px; }
.demo-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* ------------------------------------------------------------------ dostępność */

.avail { display: grid; gap: 16px; }
@media (min-width: 960px) {
  .avail { grid-template-columns: 220px minmax(0, 1fr); align-items: start; gap: 28px; }
  .avail .weeks { position: sticky; top: 24px; }
}
.status-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 14px; margin-bottom: 16px; }

.weeks { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; margin: 0 -2px; scrollbar-width: none; scroll-snap-type: x proximity; }
.weeks::-webkit-scrollbar { display: none; }
.weekpill {
  flex: none; scroll-snap-align: start;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px;
  min-width: 132px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  text-align: left;
}
.weekpill .mark {
  grid-row: span 2; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--line-strong);
  font: 700 12px var(--font-display); color: var(--muted);
}
.weekpill .t { font: 500 13.5px var(--font-display); }
.weekpill .s { font-size: 12px; color: var(--muted); }
.weekpill.done .mark { background: var(--charcoal); border-color: var(--charcoal); color: var(--cream); }
.weekpill.done .mark svg.icon { width: 14px; height: 14px; stroke-width: 2.6; }
.weekpill.auto { background: transparent; border-style: dashed; }
.weekpill[aria-current="step"] { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
.weekpill[aria-current="step"] .mark { border-color: var(--orange); color: var(--orange-ink); }
.weekpill.done[aria-current="step"] .mark { background: var(--orange); border-color: var(--orange); color: var(--charcoal); }
.weekpill:disabled { opacity: .5; cursor: not-allowed; }
.weekpill.summary .mark { border-style: dashed; }
@media (min-width: 960px) {
  .weeks { flex-direction: column; overflow: visible; }
  .weekpill { min-width: 0; width: 100%; }
}

.week-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; margin-bottom: 12px; }
.week-head .titles { flex: 1 1 220px; }
.week-head .eyebrow { color: var(--muted); font: 500 13.5px var(--font-display); }
.week-head h2 { font-size: 22px; }
.progress { display: flex; align-items: center; gap: 10px; font: 500 13.5px var(--font-display); color: var(--muted); }
.progress .bar { width: 96px; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.progress .bar svg { display: block; width: 100%; height: 100%; }
.progress .bar rect.v { fill: var(--charcoal); }
.tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

.days { overflow: hidden; }
.day { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 12px; padding: 16px 16px 16px 12px; border-top: 1px solid var(--line); }
.day:first-child { border-top: 0; }
.day .date { text-align: center; padding-top: 2px; }
.day .date .d { display: block; font: 700 24px/1 var(--font-display); }
.day .date .w { display: block; margin-top: 4px; font: 500 12.5px var(--font-display); color: var(--muted); }
.day .body { display: grid; gap: 10px; min-width: 0; }
.day .title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.day .title .name { font: 500 15px var(--font-display); }
.day.closed { background: var(--surface-2); padding-top: 12px; padding-bottom: 12px; }
.day.closed .date .d { color: var(--faint); }
.day.closed .title .name { color: var(--muted); }
.day.missing .date .d { color: var(--orange-ink); }
.day.flash { animation: flash 1.2s ease-out; }
@keyframes flash { from { background: var(--orange-soft); } to { background: transparent; } }

.chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.chips.custom { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  min-height: 48px; padding: 4px 6px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font: 500 13px/1.25 var(--font-display); color: var(--charcoal); text-align: center;
}
.chip small { font: 400 11px/1.3 var(--font-display); color: var(--muted); font-variant-numeric: tabular-nums; }
.chip:hover:not(:disabled) { border-color: var(--charcoal); }
.chip[aria-pressed="true"] { background: var(--orange-soft); border-color: var(--orange); color: var(--orange-ink); box-shadow: inset 0 0 0 1px var(--orange); }
.chip[aria-pressed="true"] small { color: var(--orange-ink); }
.chip.no[aria-pressed="true"] { background: var(--idle-bg); border-color: var(--charcoal); color: var(--charcoal); box-shadow: inset 0 0 0 1px var(--charcoal); }
.chip:disabled { opacity: .4; cursor: not-allowed; }
@media (min-width: 640px) {
  .chips, .chips.custom { display: flex; flex-wrap: wrap; }
  .chip { flex-direction: row; gap: 6px; min-height: 40px; padding: 0 14px; }
}

.times { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.times .field { flex: 1 1 120px; max-width: 180px; }
.times .fixed { flex: 1 1 120px; padding-bottom: 12px; color: var(--muted); font-size: 14px; }
.day .result { display: flex; align-items: center; gap: 12px; }
.day .result .ribbon { flex: 1; }
.day .result .txt { flex: none; font: 500 13.5px var(--font-display); font-variant-numeric: tabular-nums; }
.day .result .txt.no { color: var(--muted); }
.day .note-row { display: flex; align-items: center; gap: 8px; }
.day .note-row .input { min-height: 40px; font-size: 15px; }
.day .err { color: var(--bad); font-size: 13.5px; }
.saving { font-size: 12.5px; color: var(--faint); }

.footer-bar {
  position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); z-index: 25;
  padding: 12px 16px;
  background: rgba(255, 251, 245, .95); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
}
.footer-bar .hint { flex: 1; font-size: 13.5px; color: var(--muted); line-height: 1.35; }
@media (min-width: 960px) {
  .footer-bar { position: sticky; bottom: 16px; margin-top: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-float); }
}

/* podsumowanie */
.summary-lead { font-size: 16.5px; line-height: 1.55; max-width: 62ch; margin-bottom: 20px; }
.summary-lead b { font-family: var(--font-display); font-weight: 500; }
.sum-week { margin-bottom: 14px; }
.sum-week header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.sum-week header h3 { flex: 1; }
.sum-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 16px; border-top: 1px solid var(--line); }
.sum-row:first-of-type { border-top: 0; }
.sum-row .when { font: 500 14px var(--font-display); }
.sum-row .when span { color: var(--muted); font-weight: 400; }
.sum-row .what { display: grid; gap: 5px; min-width: 0; }
.sum-row .what .k { font-size: 14px; }
.sum-row .hrs { font: 500 13.5px var(--font-display); font-variant-numeric: tabular-nums; text-align: right; }
.sum-row.closed .when, .sum-row.closed .what { color: var(--faint); }
.sum-row .note { font-size: 13px; color: var(--muted); }
@media (min-width: 640px) { .sum-row { grid-template-columns: 90px minmax(0, 1fr) 110px; } }

/* ------------------------------------------------------------------ grafik */

.month-nav { display: inline-flex; align-items: center; gap: 4px; }
.month-nav .lbl { min-width: 150px; text-align: center; font: 500 15px var(--font-display); }
.icon-btn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); display: grid; place-items: center; color: var(--charcoal); }
.icon-btn:disabled { opacity: .35; cursor: not-allowed; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; }
.toolbar .grow { flex: 1; }

.shiftlist { overflow: hidden; }
.week-sep { padding: 10px 16px; background: var(--surface-2); border-top: 1px solid var(--line); font: 500 13px var(--font-display); color: var(--muted); }
.week-sep:first-child { border-top: 0; }
.srow {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 6px 12px;
  width: 100%; padding: 12px 16px 12px 12px;
  background: var(--surface); border: 0; border-top: 1px solid var(--line);
  text-align: left; position: relative;
}
.week-sep + .srow { border-top: 0; }
button.srow:hover { background: #FFFCF8; }
.srow .date { text-align: center; }
.srow .date .d { display: block; font: 700 20px/1 var(--font-display); }
.srow .date .w { display: block; margin-top: 3px; font: 500 12px var(--font-display); color: var(--muted); }
.srow .info { display: grid; gap: 6px; min-width: 0; }
.srow .line1 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.srow .hours { font: 500 16px var(--font-display); font-variant-numeric: tabular-nums; }
.srow .dur { font-size: 13px; color: var(--muted); }
.srow .free { color: var(--muted); font-size: 14px; }
.srow .chev { color: var(--faint); }
.srow.past { opacity: .55; }
.srow.today::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--orange); }
.srow.today .date .d { color: var(--orange-ink); }
.srow.closed { background: var(--surface-2); padding-top: 9px; padding-bottom: 9px; }
.srow.closed .date .d { font-size: 16px; color: var(--faint); }
.srow .pending { font-size: 13.5px; color: var(--warn); display: flex; align-items: center; gap: 6px; }
.srow .pending svg.icon { width: 15px; height: 15px; }

.datestrip { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; margin-bottom: 8px; scrollbar-width: thin; }
.dchip {
  flex: none; width: 50px; padding: 8px 0;
  display: grid; justify-items: center; gap: 2px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.dchip .w { font: 500 11.5px var(--font-display); color: var(--muted); }
.dchip .d { font: 700 17px/1.1 var(--font-display); }
.dchip .n { font-size: 11px; color: var(--faint); }
.dchip.closed { background: transparent; border-style: dashed; }
.dchip.closed .d { color: var(--faint); }
.dchip.today .d { color: var(--orange-ink); }
.dchip[aria-pressed="true"] { background: var(--charcoal); border-color: var(--charcoal); }
.dchip[aria-pressed="true"] .w, .dchip[aria-pressed="true"] .d, .dchip[aria-pressed="true"] .n { color: var(--cream); }

.gantt { padding: 16px; }
.gantt .head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 14px; }
.gantt .head h2 { font-size: 18px; flex: 1; }
.g-grid { display: grid; grid-template-columns: minmax(84px, 150px) minmax(0, 1fr); gap: 10px 14px; align-items: center; }
@media (max-width: 639px) { .g-grid { grid-template-columns: 112px minmax(0, 1fr); gap: 10px; } }
.g-name { font: 500 14px var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-name.me { color: var(--orange-ink); }
.g-name small { display: block; font: 400 12.5px var(--font-body); color: var(--muted); font-variant-numeric: tabular-nums; }
.g-axis { grid-column: 2; }

/* ------------------------------------------------------------------ wnioski */

.req { padding: 16px; display: grid; gap: 10px; border-top: 1px solid var(--line); }
.req:first-child { border-top: 0; }
.req .top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.req .top h3 { flex: 1 1 auto; }
.req .change { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 500 15px var(--font-display); font-variant-numeric: tabular-nums; }
.req .change s { color: var(--faint); font-weight: 400; }
.req .quote { padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); font-size: 14px; }
.req .quote b { font: 500 13px var(--font-display); display: block; margin-bottom: 2px; }
.req .quote.mgr { background: var(--cream); border-left: 3px solid var(--orange); }
.req .meta { font-size: 13px; color: var(--faint); }
.req.unseen { background: #FFFDF8; }
.newdot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); display: inline-block; }

/* ------------------------------------------------------------------ profil */

.profile { display: grid; gap: 16px; max-width: 560px; }
.profile .who { display: flex; align-items: center; gap: 14px; padding: 18px; }
.profile .who .avatar { width: 52px; height: 52px; font-size: 18px; }
.profile form { display: grid; gap: 14px; padding: 18px; }

/* ------------------------------------------------------------------ okna dialogowe i komunikaty */

dialog.sheet {
  width: 100%; max-width: 520px; max-height: 92dvh;
  margin: auto auto 0; padding: 0;
  border: 0; border-radius: 22px 22px 0 0;
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-float);
}
dialog.sheet::backdrop { background: rgba(47, 47, 47, .45); }
dialog.sheet[open] { animation: sheet-in .22s ease-out; }
@keyframes sheet-in { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.sheet-inner { display: grid; gap: 16px; padding: 22px 20px calc(20px + env(safe-area-inset-bottom)); overflow: auto; max-height: 92dvh; }
.sheet-head { display: flex; align-items: flex-start; gap: 12px; }
.sheet-head > div { flex: 1; }
.sheet-head .sub { color: var(--muted); font-size: 14px; margin-top: 2px; }
.sheet-actions { display: flex; flex-direction: column-reverse; gap: 10px; }
@media (min-width: 640px) {
  dialog.sheet { margin: auto; border-radius: 22px; }
  .sheet-actions { flex-direction: row; justify-content: flex-end; }
}
.choice { display: grid; gap: 8px; }
.choice > label {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md);
}
.choice > label:has(input:checked) { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); background: #FFFAF6; }
.choice input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--orange); }
.choice b { font: 500 15px var(--font-display); display: block; }
.choice span { font-size: 13.5px; color: var(--muted); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-family: var(--font-display); font-weight: 500; font-variant-numeric: tabular-nums; }

.toasts { position: fixed; left: 50%; transform: translateX(-50%); top: calc(var(--top-h) + 10px + env(safe-area-inset-top)); z-index: 100; display: grid; gap: 8px; width: min(92vw, 440px); pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--r-md);
  background: var(--charcoal); color: var(--cream);
  box-shadow: var(--shadow-float); font-size: 14.5px;
  animation: toast-in .2s ease-out;
}
.toast.bad { background: var(--bad); color: #fff; }
@keyframes toast-in { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 960px) { .toasts { top: auto; bottom: 28px; left: auto; right: 28px; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.mb { margin-bottom: 16px; }
.avail-notice { margin-bottom: 16px; }

a.avatar { text-decoration: none; }

/* telefon: data w jednym wierszu z nazwą dnia, przyciski na całą szerokość */
@media (max-width: 639px) {
  .day { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 10px; padding: 14px 14px; }
  .day .body { display: contents; }
  .day .body > * { grid-column: 1 / -1; }
  .day .body > .title { grid-column: 2; }
  .day .date { text-align: left; padding: 0; min-width: 30px; }
  .day .date .d { font-size: 26px; }
  .day .date .w { display: none; }
  .day.closed .date .d { font-size: 20px; }
  .chip { min-height: 46px; }
  .tools .btn { flex: 1 1 auto; }
}

.form-stack { display: grid; gap: 14px; }
.footer-bar { flex-wrap: wrap; }
@media (max-width: 639px) {
  .footer-bar:has(.btn-lg) .hint { flex-basis: 100%; }
  .footer-bar .btn-lg { flex: 1 1 100%; }
}

@media (min-width: 960px) {
  .avail.readonly { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
}
.req .actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* ------------------------------------------------------------------ planowanie (kierownik) */
.plan-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: center;
  padding: 16px; border-top: 1px solid var(--line);
}
.plan-row:first-child { border-top: 0; }
.plan-name h3 { font-weight: 700; margin-bottom: 6px; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.plan-progress { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.plan-action { grid-column: 2; grid-row: 1; align-self: start; }
.plan-bar { width: 120px; height: 8px; border-radius: 4px; overflow: hidden; flex: none; }
.plan-bar .t { fill: var(--track); }
.plan-bar .s { fill: var(--charcoal); }
.plan-bar .p { fill: var(--amber); }
@media (min-width: 760px) {
  .plan-row { grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto; }
  .plan-progress { grid-column: 2; grid-row: 1; }
  .plan-action { grid-column: 3; align-self: center; }
}
.back { margin-bottom: 8px; text-decoration: none; }
.back svg.icon { width: 16px; height: 16px; }
.plan-info { padding: 18px; display: grid; gap: 16px; max-width: 760px; }
.plan-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.section-title { margin: 28px 0 12px; font-size: 18px; }
.person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: 14px 16px; border-top: 1px solid var(--line); }
.person:first-child { border-top: 0; }
.person .who { display: grid; gap: 2px; min-width: 0; }
.person .who b { font: 500 15px var(--font-display); }
.person > .btn { grid-column: 2 / -1; justify-self: end; }
@media (min-width: 760px) {
  .person { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .person > .btn { grid-column: auto; }
}

/* ------------------------------------------------------------------ konta pracowników */
.person > .actions { grid-column: 2 / -1; justify-self: end; display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 760px) { .person > .actions { grid-column: auto; } }
.panel.inactive .person { opacity: .6; }
.pin-row { display: flex; gap: 8px; }
.pin-row .input { flex: 1; font-size: 20px; letter-spacing: .2em; }
.credentials { display: grid; grid-template-columns: 1fr; gap: 10px; }
.credentials > div { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--r-md); background: var(--cream); border: 1px solid #F3DDBE; }
.credentials span { font-size: 13px; color: var(--muted); }
.credentials b { font: 700 24px/1.2 var(--font-display); letter-spacing: .04em; overflow-wrap: anywhere; }
.badge-cell:empty { display: none; }
@media (max-width: 759px) { .person > .badge-cell { grid-column: 2 / -1; } }
.mode-switch { justify-self: center; }

/* obsada: liczba osób w 15-minutowych odcinkach */
.coverage .cv-off { fill: url(#vo-closed); }
.coverage .cv-0 { fill: #F2B8B3; }
.coverage .cv-1 { fill: #FBE3B5; }
.coverage .cv-2 { fill: var(--amber); }
.coverage .cv-3 { fill: var(--orange); }
.cv-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); }
.cv-legend i { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.cv-legend .l0 { background: #F2B8B3; } .cv-legend .l1 { background: #FBE3B5; }
.cv-legend .l2 { background: var(--amber); } .cv-legend .l3 { background: var(--orange); }

/* ------------------------------------------------------------------ kierownik: wspólne */
.warn-text { color: var(--warn); }
.form-2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 560px) { .form-2 { grid-template-columns: 1fr 1fr; } }
.small-head h2 { flex: 1; }
.notice.small { font-size: 13.5px; padding: 10px 12px; }
.plan-bar .o { fill: var(--orange); }
.plan-bar.wide { width: 100%; height: 10px; border-radius: 5px; }

/* ------------------------------------------------------------------ obecny grafik */
.emp-filter { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -2px 10px; scrollbar-width: thin; }
.fchip {
  flex: none; position: relative; min-height: 36px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface);
  font: 500 13.5px var(--font-display); color: var(--charcoal); white-space: nowrap;
}
.fchip[aria-pressed="true"] { background: var(--charcoal); border-color: var(--charcoal); color: var(--cream); }
.dot-warn { position: absolute; top: 4px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); }
.reqs, .emp-summary { margin-bottom: 16px; }
.reqs-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.reqs-head h2 { font-size: 17px; flex: 1; }
.reqs .req:first-of-type { border-top: 0; }
.srow-emp { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); }
.reqs-head + .srow-emp { border-top: 0; }
.srow-emp .who { display: grid; gap: 2px; min-width: 0; }
.srow-emp .who b { font: 500 15px var(--font-display); }
.srow-emp .nums { display: grid; justify-items: end; }
.srow-emp .nums .big { font: 700 18px var(--font-display); }
.srow-emp .norm { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.srow-emp .norm:empty { display: none; }
.srow-emp .viol { grid-column: 1 / -1; }
.srow-emp .viol:empty { display: none; }
.srow-emp details summary { cursor: pointer; list-style: none; display: inline-flex; }
.srow-emp details summary::-webkit-details-marker { display: none; }
.srow-emp details ul { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--bad); }
@media (min-width: 900px) {
  .srow-emp { grid-template-columns: minmax(200px, 1.4fr) 110px minmax(200px, 1fr) minmax(160px, auto); }
  .srow-emp .norm, .srow-emp .viol { grid-column: auto; }
  .srow-emp .norm:empty, .srow-emp .viol:empty { display: block; }
}
.week-days { display: grid; gap: 12px; }
.wday { padding: 14px 16px; }
.wday-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 12px; }
.wday-head h3 { font-weight: 700; }
.wday-head .muted { margin-left: auto; }
.wday.closed { background: var(--surface-2); }
.wday.closed .wday-head { margin-bottom: 4px; }
.cov-name { color: var(--muted); }
.gap-warn { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13.5px; color: var(--bad); }
.gap-warn svg.icon { width: 16px; height: 16px; }
.cv-legend { margin: 0 0 10px; }

.mgrid-wrap { overflow-x: auto; margin-bottom: 8px; }
.mgrid { border-collapse: separate; border-spacing: 0; font-size: 12px; min-width: 100%; }
.mgrid th, .mgrid td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 0; text-align: center; }
.mgrid thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.mgrid .sticky { position: sticky; left: 0; z-index: 2; background: var(--surface); text-align: left; padding: 6px 10px;
  font: 500 13px var(--font-display); white-space: nowrap; min-width: 112px; }
.mgrid thead .sticky { z-index: 3; }
.dhead { display: grid; width: 100%; padding: 6px 2px; border: 0; background: none; font: inherit; min-width: 40px; }
.dhead span { font: 500 10.5px var(--font-display); color: var(--muted); }
.dhead b { font: 700 13px var(--font-display); }
.mgrid td { height: 40px; min-width: 40px; position: relative; font-variant-numeric: tabular-nums; }
.mgrid td.has { background: #FFF1E4; font: 500 10.5px/1.25 var(--font-display); color: var(--orange-ink); }
.mgrid td.has span { display: block; }
.mgrid .closed { background: repeating-linear-gradient(-45deg, #F4EEE6, #F4EEE6 4px, #ECE4D8 4px, #ECE4D8 6px); }
.mgrid th.closed .dhead b { color: var(--faint); }
.mgrid .today { box-shadow: inset 2px 0 0 var(--orange), inset -2px 0 0 var(--orange); }
.mgrid th.tsun .dhead span { color: var(--orange-ink); }
.mgrid .pend { position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.mgrid .tot { font: 500 12.5px var(--font-display); padding: 0 10px; white-space: nowrap; }
.mgrid tfoot th, .mgrid tfoot td { font: 700 12.5px var(--font-display); height: 32px; }
.mgrid tfoot .cov-0 { background: #F8D3CF; color: var(--bad); }
.mgrid tfoot .cov-1 { background: #FDF0D5; }
.mgrid tfoot .cov-2, .mgrid tfoot .cov-3 { background: var(--surface); }

/* ------------------------------------------------------------------ planowanie grafiku */
.send-card { display: grid; gap: 14px; padding: 20px; margin-bottom: 18px; border-color: #F3DDBE; background: linear-gradient(135deg, #FFFFFF, var(--cream)); }
.send-card h2 { font-size: 20px; margin-bottom: 6px; }
.send-card .btn { justify-self: start; }
.send-card.compact { margin-top: 24px; background: var(--surface); border-color: var(--line); }
.send-card.compact h2 { font-size: 16px; }
@media (min-width: 900px) { .send-card { grid-template-columns: 1fr auto; align-items: center; } .send-card .btn { justify-self: end; } }
.plan-progress-big { display: grid; gap: 8px; }
.plan-progress-big p { font-size: 15px; }
.preview-list { max-height: 60dvh; overflow: auto; }

/* ------------------------------------------------------------------ pracownicy */
.emp-table { overflow: hidden; }
.emp-row { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--line); align-items: center; }
.emp-row:first-child { border-top: 0; }
.emp-row.head { display: none; }
.emp-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.emp-name > span:last-child { display: grid; gap: 2px; min-width: 0; }
.emp-name b { font: 500 15px var(--font-display); }
.emp-name .small { overflow-wrap: anywhere; }
.emp-row [data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: 13px; }
.emp-row .actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.tel { display: inline-flex; align-items: center; gap: 6px; color: var(--charcoal); text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tel svg.icon { width: 15px; height: 15px; color: var(--muted); }
@media (min-width: 1000px) {
  .emp-row { grid-template-columns: minmax(240px, 2fr) 1fr 1fr 0.8fr 130px 250px; gap: 12px; }
  .emp-row.head { display: grid; background: var(--surface-2); font: 500 12.5px var(--font-display); color: var(--muted); padding: 10px 16px; }
  .emp-row [data-label]::before { content: none; }
}

/* ------------------------------------------------------------------ administracja */
.admin-grid { display: grid; gap: 16px; margin-bottom: 32px; }
@media (min-width: 1000px) { .admin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } .admin-save { grid-column: 1 / -1; } }
.admin-card { display: grid; gap: 14px; padding: 18px; }
.admin-card h2 { font-size: 17px; }
.admin-save { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; }
.num-field { display: flex; align-items: center; gap: 10px; }
.num-field .input { max-width: 110px; font-family: var(--font-display); font-size: 17px; }
.num-field span { font-size: 14px; color: var(--muted); }
.ov-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); }
.ov-row:first-child { border-top: 0; }
.ov-row > div { display: grid; gap: 2px; }
.ov-row b { font: 500 14.5px var(--font-display); }
.ov-row.past { opacity: .55; }
@media (min-width: 760px) { .ov-row { grid-template-columns: minmax(0, 1fr) auto 110px auto; } }
.empty-row { padding: 16px; }
.auto-days { margin-top: 16px; }
.auto-days summary { cursor: pointer; font: 500 14.5px var(--font-display); padding: 8px 0; color: var(--orange-ink); }
.auto-days .panel { margin-top: 8px; }
.ov-row.auto { padding: 9px 16px; }
.pending-change { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13.5px; color: var(--warn); }
.pending-change svg.icon { width: 15px; height: 15px; }
.sum-row .what > .btn-link { justify-self: start; padding: 0; min-height: 28px; }
.shell.manager .main { max-width: 1320px; }
.week-days { margin-bottom: 16px; }
.ribbon .avail { fill: #D6EEDF; }
.toast.warn { background: #6B4A00; color: #FFF7EB; }
@media (min-width: 640px) { dialog.sheet.wide { max-width: min(1100px, 94vw); } }

/* ------------------------------------------------------------------ ręczna edycja grafiku */
.edit-hint { margin-bottom: 14px; background: var(--cream); border-color: #F3DDBE; color: var(--charcoal); font-size: 14px; }
.g-edit {
  display: block; width: 100%; text-align: left; padding: 6px 10px; margin: -6px 0;
  border: 1px dashed var(--line-strong); border-radius: var(--r-sm); background: var(--surface); cursor: pointer;
}
.g-edit:hover { border-color: var(--orange); background: #FFFAF6; }
.free-avail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.fchip.small-chip { min-height: 32px; padding: 0 12px 0 8px; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; background: #F1FAF4; border-color: #BFE2CC; }
.fchip.small-chip svg.icon { width: 15px; height: 15px; color: var(--ok); }
.fchip.small-chip small { font: 400 12px var(--font-body); color: var(--muted); font-variant-numeric: tabular-nums; }
.fchip.small-chip:hover { border-color: var(--ok); }
.mgrid.editing td.editable { padding: 0; }
.mgrid.editing td.av-yes { background: #EAF6EE; }
.mgrid.editing td.av-yes.has { background: #FFE6D1; }
.mgrid.editing td.av-no:not(.has) { background: repeating-linear-gradient(-45deg, #FBEDEB, #FBEDEB 4px, #F6DEDB 4px, #F6DEDB 6px); }
.mgrid.editing td.av-no.has, .mgrid.editing td.av-none.has { box-shadow: inset 0 0 0 2px #E8A49E; }
.cell-btn {
  display: grid; place-content: center; width: 100%; height: 100%; min-height: 40px; padding: 2px;
  border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
}
.cell-btn span { display: block; }
.cell-btn:hover { box-shadow: inset 0 0 0 2px var(--orange); }
.cell-btn .plus { font: 500 15px var(--font-display); color: var(--faint); opacity: 0; }
.cell-btn:hover .plus, .cell-btn:focus-visible .plus { opacity: 1; }
.av-yes .cell-btn .plus { opacity: .7; color: var(--ok); }
.sheet-actions .grow { display: none; }
@media (min-width: 640px) { .sheet-actions.split .grow { display: block; flex: 1; } }

/* ------------------------------------------------------------------ generowanie i propozycje */
.generate-card { display: grid; gap: 16px; padding: 20px; margin-bottom: 16px; border-color: #F3DDBE; background: linear-gradient(135deg, #FFFFFF, var(--cream)); }
.generate-card h3 { font-weight: 700; font-size: 18px; margin-bottom: 6px; }
.generate-card p { max-width: 70ch; }
.generate-card .btn { justify-self: start; }
@media (min-width: 900px) { .generate-card { grid-template-columns: 1fr auto; align-items: center; } }
.proposals-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; }
.proposals-head p { flex: 1 1 320px; color: var(--muted); font-size: 14.5px; }
.proposals { display: grid; gap: 14px; margin-bottom: 20px; }
@media (min-width: 760px) { .proposals { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.proposal { display: grid; gap: 14px; padding: 18px; align-content: start; }
.proposal.best { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
.proposal header { display: flex; align-items: center; gap: 8px; }
.proposal header h3 { flex: 1; font-weight: 700; }
.cov-big { display: grid; gap: 2px; }
.cov-big .num { font: 700 34px/1 var(--font-display); letter-spacing: -0.02em; }
.ppl { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--line); display: grid; gap: 4px; font-size: 13.5px; }
.ppl li { display: flex; justify-content: space-between; gap: 10px; }
.ppl .num { font: 500 13px var(--font-display); font-variant-numeric: tabular-nums; }
.proposal .plan-actions { justify-content: flex-end; }
.draft-bar { display: grid; gap: 14px; padding: 16px 18px; margin-bottom: 14px; }
.draft-bar > div:first-child { display: grid; gap: 3px; }
.draft-bar b { font: 700 16px var(--font-display); }
@media (min-width: 900px) { .draft-bar { grid-template-columns: 1fr auto; align-items: center; } }
.people-fold { margin-top: 28px; }
.people-fold summary { cursor: pointer; font: 500 15px var(--font-display); color: var(--orange-ink); padding: 8px 0; }
.people-fold .panel { margin-top: 8px; }

/* ------------------------------------------------------------------ powiadomienia */
.switch-row { display: flex; align-items: center; gap: 12px; padding: 4px 0; cursor: pointer; }
.switch-row input { width: 20px; height: 20px; accent-color: var(--orange); flex: none; }
.switch-row > span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.switch-row b { font: 500 15px var(--font-display); }
.notif-log { margin-bottom: 32px; }
.log-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 14px; }
.reqs-head + .log-row { border-top: 0; }
.log-row > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; grid-column: 1; }
.log-row > span:first-child { grid-column: 1 / -1; }
.log-row .pill { grid-column: 2; grid-row: 2; }
@media (min-width: 760px) {
  .log-row { grid-template-columns: 200px minmax(0, 1fr) auto; }
  .log-row > span:first-child { grid-column: auto; }
  .log-row > span:nth-child(2) { grid-column: auto; }
  .log-row .pill { grid-column: auto; grid-row: auto; }
}
.g-edit small { white-space: normal; }

/* ------------------------------------------------------------------ statystyki historyczne */
.shell.manager .bottomnav .navlink { font-size: 10.5px; }
.bottomnav .navlink span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.stats-intro { display: grid; gap: 12px; margin-bottom: 18px; }
.stats-intro p { max-width: 80ch; color: var(--muted); }
@media (min-width: 1000px) { .stats-intro { grid-template-columns: 1fr auto; align-items: center; } .stats-intro .plan-actions { justify-content: flex-end; } }
.stats-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (min-width: 900px) { .stats-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { display: grid; gap: 4px; padding: 14px 16px; align-content: start; }
.kpi .k { font: 500 13px var(--font-display); color: var(--muted); }
.kpi b { font: 700 26px/1.1 var(--font-display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.kpi.out { background: linear-gradient(135deg, #FFFFFF, #FFF3E2); border-color: #F3DDBE; }
.kpi.ok b { color: var(--ok); }
.kpi.bad b { color: var(--bad); }
.stats-empty { grid-column: 1 / -1; }
.stats-params { padding: 16px 18px; margin-bottom: 22px; display: grid; gap: 12px; }
.sp-grid { display: grid; gap: 14px; }
@media (min-width: 760px) { .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .sp-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; } }
.field.yellow > span:first-child::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; background: #FFE58A; box-shadow: inset 0 0 0 1px #E8C547; vertical-align: 1px; }
.field.yellow .input { background: #FFFBEA; }
.field .range { display: flex; align-items: center; gap: 6px; }
.field .range .select { flex: 1; min-width: 0; }
.sp-facts b { color: var(--charcoal); font-weight: 600; }
.stats-table-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 10px; }
.stats-table-head h2 { font-size: 18px; }
.stats-table-head .small.muted { flex: 1 1 320px; }
.switch-row.small { font-size: 13.5px; padding: 0; }
.switch-row.small input { width: 18px; height: 18px; }
.stats-table-wrap { overflow-x: auto; margin-bottom: 10px; }
.stats-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.stats-table th, .stats-table td { padding: 0 8px; height: 38px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.stats-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); font: 500 12px var(--font-display); color: var(--muted); height: 40px; white-space: normal; line-height: 1.2; vertical-align: bottom; padding-bottom: 8px; }
.stats-table thead th.in { background: #FFF6D1; color: #6B5300; }
.stats-table thead th.out { background: #FFE7CC; color: var(--orange-ink); }
.stats-table .c-day { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; min-width: 92px; font-weight: 400; }
.stats-table thead .c-day { z-index: 3; background: var(--surface-2); }
.stats-table .c-day b { font: 700 15px var(--font-display); display: inline-block; min-width: 20px; }
.stats-table .c-day .wd { font: 500 12px var(--font-display); color: var(--muted); }
.stats-table .c-day .pill, .stats-table .c-day .small { display: block; margin-top: 1px; font-size: 11px; }
.stats-table .c-day .pill { display: inline-flex; margin-left: 4px; padding: 0 6px; }
.stats-table .c-hist { text-align: left; color: var(--muted); font-size: 12.5px; }
.stats-table .c-note { text-align: left; }
.stats-table td.in { background: #FFFDF2; padding: 0 4px; }
.stats-table td.out { background: #FFF6EC; font: 500 13.5px var(--font-display); }
.stats-table td.out.strong { font-weight: 700; color: var(--orange-ink); }
.stats-table td.out.at-min { box-shadow: inset 3px 0 0 var(--amber); }
.stats-table .calc { display: none; color: var(--muted); }
.stats-table.show-calc .calc { display: table-cell; }
.stats-table tr.weekend > * { border-bottom-color: var(--line-strong); }
.stats-table tr.weekend .c-day b { color: var(--orange-ink); }
.stats-table tr.closed > *:not(.c-day) { background: repeating-linear-gradient(-45deg, #FAF6F0, #FAF6F0 4px, #F3EDE4 4px, #F3EDE4 6px); }
.stats-table tr.closed .c-day b { color: var(--faint); }
.stats-table tfoot th, .stats-table tfoot td { font: 700 13px var(--font-display); background: var(--surface-2); border-bottom: 0; }
.stats-table tfoot td.out { background: #FFE7CC; }
.cell-in {
  width: 100%; min-width: 72px; height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; font: inherit; color: var(--text); text-align: right;
}
.cell-in:not(.numc) { text-align: left; min-width: 110px; font-size: 12.5px; }
.cell-in:hover { border-color: var(--line-strong); background: var(--surface); }
.cell-in:focus { outline: none; border-color: var(--orange); background: var(--surface); box-shadow: var(--focus); }
.cell-in::placeholder { color: var(--faint); font-size: 12px; }
.cell-in.err { border-color: var(--bad); background: var(--bad-bg); }
.subst { display: inline-flex; margin-left: 4px; color: var(--warn); vertical-align: -2px; cursor: help; }
.subst svg.icon { width: 15px; height: 15px; }
.stats-table tr.subst-row .c-hist { color: var(--warn); }
.c-need { min-width: 150px; text-align: left !important; }
.need-cell { display: flex; align-items: center; gap: 8px; }
.need-strip { width: 110px; height: 10px; border-radius: 3px; overflow: hidden; flex: none; }
.need-strip .nd-1 { fill: #FBE3B5; }
.need-strip .nd-2 { fill: #F8C978; }
.need-strip .nd-3 { fill: var(--amber); }
.need-strip .nd-4 { fill: var(--orange); }
.need-strip .nd-5 { fill: #D9531A; }
.stats-foot-note { max-width: 110ch; margin-bottom: 24px; }
@media (max-width: 639px) {
  .kpi b { font-size: 21px; }
  .stats-table th, .stats-table td { padding: 0 5px; }
}

/* zapotrzebowanie na planszy grafiku */
.need-row-name { color: var(--muted); }
.mgrid tfoot .need-row th, .mgrid tfoot .need-row td { font-weight: 500; height: 28px; color: var(--muted); }
.mgrid tfoot td.short { background: #FDF0D5; color: var(--warn); font-weight: 700; }
.need-line { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.need-line b { color: var(--charcoal); font-weight: 600; }
.plan-demand { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; }
.plan-demand svg.icon { flex: none; margin-top: 2px; color: var(--orange-ink); }
.mgrid tfoot .need-row td span { display: block; font: 500 10.5px/1.25 var(--font-display); }
.mgrid tfoot .need-row td span + span { color: var(--faint); }
.mgrid tfoot .need-row td.short span + span { color: var(--warn); }
.cell-in.numc { min-width: 80px; }
.cell-in[data-field="turnover"] { min-width: 108px; }
.cell-in:not(.numc) { min-width: 150px; }
.field .btn-link { justify-content: flex-start; text-align: left; padding: 0; }
.stats-table .c-day .small { white-space: normal; max-width: 150px; line-height: 1.25; }
@media (max-width: 639px) {
  .shell.manager .bottomnav .navlink { font-size: 10px; }
  .stats-table .c-day { min-width: 58px; }
  .stats-table .c-day .small, .stats-table .c-hist .hy { display: none; }
  .cell-in:not(.numc) { min-width: 120px; }
}
.cell-in:not(.numc) { min-width: 128px; }
.need-strip { width: 88px; }
.c-need { min-width: 136px; }

/* ------------------------------------------------------------------ uprawnienia i tryb podglądu */
.main.view-only .needs-edit { display: none !important; }
.main.view-only::before {
  content: "Tylko podgląd – zmiany w tym module wprowadza osoba z uprawnieniem do edycji (uprawnienia nadaje administrator).";
  display: block; margin-bottom: 16px; padding: 10px 14px; border-radius: var(--r-md);
  background: var(--idle-bg); color: var(--idle); font-size: 13.5px; border: 1px solid var(--line);
}
.nav-title { margin: 14px 12px 4px; font: 500 11.5px var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.sidebar nav .nav-title:first-child { margin-top: 0; }
.navlink.switch { color: var(--orange-ink); }
.admin-note { align-self: center; }
.access-intro { max-width: 80ch; }
.access-cards { display: grid; gap: 14px; }
@media (min-width: 1100px) { .access-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.access-card { display: grid; gap: 12px; padding: 16px 18px; align-content: start; }
.access-card.warn { border-color: #F3DDAE; }
.access-card header { display: flex; align-items: center; gap: 12px; }
.access-card header .who { flex: 1; display: grid; gap: 2px; min-width: 0; }
.access-card header .who b { font: 500 16px var(--font-display); }
.access-card footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.access-card footer .grow { flex: 1; }
.select-sm { min-height: 38px; padding-top: 4px; padding-bottom: 4px; font-size: 14px; width: auto; }
.perms { display: grid; gap: 2px; }
.perm-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 14px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.perm-row:first-child { border-top: 0; }
.perm-row > div:first-child { display: grid; gap: 1px; }
.perm-row b { font: 500 14.5px var(--font-display); }
@media (min-width: 560px) { .perm-row { grid-template-columns: minmax(0, 1fr) auto; } }
.seg.seg-sm button { min-height: 32px; padding: 0 12px; font-size: 13px; }
.choice-inline { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; font-size: 14.5px; }
.choice-inline input { accent-color: var(--orange); width: 17px; height: 17px; }
.legend-levels .ov-row { grid-template-columns: 1fr; }
@media (min-width: 900px) { .legend-levels .ov-row { grid-template-columns: 200px 1fr 1fr 0; } }
.my-access { display: grid; gap: 8px; padding: 18px; }
.kv-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14.5px; }
.pos-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 5px; padding: 0 4px; border-radius: 5px;
  background: var(--charcoal); color: var(--cream); font: 700 10.5px/1 var(--font-display); vertical-align: 1px; }
.pos-badge.deputy { background: var(--surface-2); color: var(--charcoal); box-shadow: inset 0 0 0 1px var(--line-strong); }
.access-cards { grid-template-columns: minmax(0, 1fr); }
.access-card { min-width: 0; }
.access-card header { flex-wrap: wrap; }
.access-card header .select-sm { max-width: 100%; }
@media (max-width: 559px) {
  .access-card header .select-sm { flex: 1 1 100%; }
  .perm-row .seg { justify-self: start; }
}

/* ------------------------------------------------------------------ lista zadań */
.tasks-summary { display: grid; gap: 14px; padding: 18px 20px; margin-bottom: 16px; }
.tasks-summary h2 { font-size: 19px; margin-bottom: 4px; }
.tasks-progress { display: flex; align-items: center; gap: 12px; }
.tasks-progress .num { font: 700 22px var(--font-display); min-width: 52px; }
@media (min-width: 900px) { .tasks-summary { grid-template-columns: 1fr 320px; align-items: center; } }
.task-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; counter-reset: none; }
.task { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px 14px; padding: 16px 18px; align-items: start; }
.task.current { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
.task.done { background: #FBFDFB; }
.task.blocked { opacity: .72; }
.task-no { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line-strong); font: 700 15px var(--font-display); color: var(--muted); }
.task.current .task-no { background: var(--orange); border-color: var(--orange); color: var(--charcoal); }
.task.done .task-no { background: var(--ok-bg); border-color: #C6E5D3; color: var(--ok); }
.task.done .task-no svg.icon { width: 18px; height: 18px; stroke-width: 2.4; }
.task-body { display: grid; gap: 8px; min-width: 0; }
.task-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.task-top h3 { font-weight: 700; font-size: 16.5px; margin-right: 4px; }
.task-body > p { color: var(--muted); font-size: 14.5px; max-width: 80ch; }
.task-body > p b { color: var(--charcoal); }
.task-bar { max-width: 360px; }
.task-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.task-items li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: var(--r-sm); background: var(--cream); font-size: 14px; }
.icon-btn.sm { width: 32px; height: 32px; border-radius: 8px; }
.icon-btn.sm svg.icon { width: 16px; height: 16px; }
.task-actions { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (min-width: 900px) {
  .task { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .task-actions { grid-column: 3; grid-row: 1; flex-direction: column; align-items: stretch; min-width: 190px; }
  .task-actions .btn-link { justify-content: center; }
}
.profile-admin-link { justify-self: start; margin-top: 4px; }
.tasks-progress .plan-bar.wide { flex: 1; min-width: 0; width: auto; }

/* ------------------------------------------------------------------ godziny pracowników */
.hours-summary { display: grid; gap: 14px; padding: 16px 18px; margin-bottom: 16px; }
.hs-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.hs-head > div:first-child { flex: 1 1 320px; display: grid; gap: 3px; }
.hs-head h2 { font-size: 17px; }
.hs-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .hs-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hs-kpis > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); }
.hs-kpis .k { font: 500 12.5px var(--font-display); color: var(--muted); }
.hs-kpis b { font: 700 20px var(--font-display); font-variant-numeric: tabular-nums; }
.hours-cell {
  display: grid; gap: 4px; width: 100%; padding: 8px 10px; text-align: left; font: inherit; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer;
}
.hours-cell:hover { border-color: var(--orange); background: #FFFAF6; }
.hc-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.hc-top b { font: 700 16px var(--font-display); font-variant-numeric: tabular-nums; }
.hc-top .pill { padding: 1px 8px; font-size: 11.5px; }
.hours-cell .plan-bar.wide { height: 6px; }
.hours-cell .small b { font-weight: 600; }
.emp-row [data-label="Umowa"] .small { display: block; }
.hours-list { display: grid; max-height: 50dvh; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.hl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 14px; }
.hl-row:first-child { border-top: 0; }
.hl-row.done { color: var(--muted); }
.hl-row.now { background: #FFF6EC; }
.hl-row .pill { justify-self: end; font-size: 12px; }
@media (min-width: 560px) { .hl-row { grid-template-columns: minmax(0, 1fr) 110px 110px 120px; } }
@media (min-width: 1000px) {
  .emp-row { grid-template-columns: minmax(220px, 1.6fr) 1fr 1fr 130px minmax(200px, 1.3fr) auto; }
}
@media (min-width: 560px) { .hl-row { grid-template-columns: minmax(0, 1fr) 96px 72px auto; } }

/* ------------------------------------------------------------------ powiadomienia (dzwonek, push) */

.bell { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--charcoal); }
.bell svg.icon { width: 22px; height: 22px; }
.bell .dot {
  position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--orange); color: var(--charcoal); font: 700 11px/18px var(--font-display); text-align: center;
}
svg.icon.inline { width: 15px; height: 15px; vertical-align: -2px; }

.push-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 16px 18px; margin-bottom: 16px; }
.push-card.on { background: #F7FBF8; border-color: #CFE7D9; }
.push-text { flex: 1 1 300px; display: grid; gap: 4px; }
.push-text b { font: 500 15.5px var(--font-display); display: flex; align-items: center; gap: 6px; }
.push-text span { font-size: 14px; color: var(--muted); }
.push-card.on .push-text b svg.icon { color: var(--ok); }
.push-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

.notif-list { overflow: hidden; }
.notif {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: 14px 16px; border-top: 1px solid var(--line); color: inherit; text-decoration: none;
}
.notif:first-child { border-top: 0; }
a.notif:hover { background: var(--surface-2); }
.notif.unread { background: #FFFBF4; }
.notif-icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--idle-bg); color: var(--charcoal); }
.notif.unread .notif-icon { background: var(--orange-soft); color: var(--orange-ink); }
.notif.urgent.unread .notif-icon { background: var(--orange); color: var(--charcoal); }
.notif-text { display: grid; gap: 2px; min-width: 0; }
.notif-text b { font: 500 15px var(--font-display); }
.notif.unread .notif-text b { font-weight: 700; }
.notif-text span { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.notif-text small { font-size: 12.5px; color: var(--faint); }
.notif .newdot { margin-top: 8px; }

.switch-row small { flex-basis: 100%; font-size: 12.5px; }
.lock-row svg.icon { width: 16px; height: 16px; }
.lock-row b { display: inline-flex; align-items: center; gap: 6px; }

/* ------------------------------------------------------------------ grafik: blokady, historia, nieobecności */

.g-name .lk { display: inline-flex; vertical-align: -2px; margin-left: 4px; color: var(--muted); }
.g-name .lk svg.icon { width: 13px; height: 13px; }
.g-name .lk.offer { color: var(--orange-ink); }
.mgrid .lkd { position: absolute; bottom: 3px; right: 3px; width: 7px; height: 7px; border-radius: 2px; background: var(--charcoal); opacity: .55; }
.mgrid .ofr { position: absolute; top: 3px; left: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.mgrid td.absent { background: #EEF3F8; }
.mgrid td.conflict { box-shadow: inset 0 0 0 2px var(--bad); }
.mgrid .abs { display: block; font: 700 11px var(--font-display); color: #3D5A78; }
.mgrid td.locked { box-shadow: inset 0 0 0 2px var(--charcoal); }
.lock-note { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.proposals-head svg.icon { width: 15px; height: 15px; vertical-align: -2px; margin-left: 4px; }
.absent-row { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; font-size: 13.5px; color: #3D5A78; }
.absent-row svg.icon { width: 16px; height: 16px; margin-top: 2px; }
.replace-btn { justify-self: start; }
.replace-btn .pill { margin-left: 4px; }

.hist-list { display: grid; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; max-height: 60dvh; overflow-y: auto; }
.hist { border-top: 1px solid var(--line); }
.hist:first-child { border-top: 0; }
.hist summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 14px; cursor: pointer; list-style: none; }
.hist summary::-webkit-details-marker { display: none; }
.hist summary:hover { background: var(--surface-2); }
.hist-when { grid-column: 1 / -1; font: 500 12px var(--font-display); color: var(--faint); }
.hist-what { display: grid; gap: 1px; min-width: 0; }
.hist-what b { font: 500 14px var(--font-display); overflow-wrap: anywhere; }
.hist .pill { align-self: start; }
.hist.undone .hist-what b { color: var(--faint); text-decoration: line-through; }
.hist ul { margin: 0; padding: 0 14px 12px 32px; font-size: 13.5px; display: grid; gap: 2px; }

/* zastępstwo */
.cand-list { display: grid; gap: 8px; margin: 12px 0; max-height: 58dvh; overflow-y: auto; }
.cand {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px 12px; align-items: start;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
.cand.ok { border-color: #CFE7D9; background: #F9FCFA; }
.cand.blocked { opacity: .6; background: var(--surface-2); }
.cand .avatar { width: 40px; height: 40px; }
.cand-main { display: grid; gap: 6px; min-width: 0; }
.cand-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.cand-top b { font: 500 15px var(--font-display); }
.cand-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.cand-meta .pill { white-space: normal; }
.cand-warn { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: 13px; color: var(--warn); }
.cand-warn li { display: flex; gap: 6px; align-items: flex-start; }
.cand-warn svg.icon { width: 14px; height: 14px; margin-top: 2px; }
.cand-actions { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
@media (min-width: 640px) {
  .cand { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .cand-actions { grid-column: 3; flex-direction: column; align-items: flex-end; }
}

/* nieobecności */
.grow-text { flex: 1 1 320px; font-size: 14px; }
.conflicts ul { margin: 6px 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.conflicts li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.mb { margin-bottom: 14px; }

/* prośby o zastępstwo (pracownik) */
.offers { margin-bottom: 18px; }
.offers .section-title { margin-top: 0; display: flex; align-items: center; gap: 8px; }
.offer-card {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px 14px; padding: 16px; margin-bottom: 10px;
  border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); background: #FFFAF5;
}
.offer-icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: var(--charcoal); }
.offer-text { display: grid; gap: 3px; min-width: 0; }
.offer-text b { font: 700 16px var(--font-display); }
.offer-text span { font: 500 15px var(--font-display); }
.offer-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.hist .hist-note { padding: 0 14px 12px; }

/* ------------------------------------------------------------------ stały tydzień */

.tpl-bar, .tpl-profile { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 14px 18px; margin-bottom: 16px; }
.tpl-bar { background: #FFFAF4; border-color: #F6DDC2; }
.tpl-text { flex: 1 1 320px; display: grid; gap: 6px; min-width: 0; }
.tpl-text > b { font: 500 15.5px var(--font-display); display: flex; align-items: center; gap: 8px; }
.tpl-text > b svg.icon { width: 18px; height: 18px; color: var(--orange-ink); }
.tpl-text > span { font-size: 14px; color: var(--muted); }
.tpl-days { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.tpl-days span { font-size: 13px; padding: 2px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); white-space: nowrap; }
.tpl-days b { font: 700 12.5px var(--font-display); margin-right: 2px; }
.tpl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.tpl-rows { display: grid; gap: 8px; }
.tpl-row { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 6px 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.tpl-row:first-child { border-top: 0; }
.tpl-day { font: 500 14.5px var(--font-display); }
.tpl-times { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.tpl-times:empty { display: none; }
.tpl-times .field { flex: 1 1 110px; }
@media (min-width: 640px) {
  .tpl-row { grid-template-columns: 120px 190px minmax(0, 1fr); }
  .tpl-times { grid-column: auto; }
}
.sheet-actions.stack { flex-direction: column; align-items: stretch; }

/* ------------------------------------------------------------------ wydruk i eksport */

.export-list { display: grid; gap: 8px; margin: 4px 0 12px; }
.export-item {
  display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface); color: inherit; text-decoration: none;
}
.export-item:hover { border-color: var(--orange); background: #FFFAF6; }
.export-item > svg.icon { width: 24px; height: 24px; color: var(--orange-ink); margin-top: 2px; }
.export-item span { display: grid; gap: 2px; }
.export-item b { font: 500 15px var(--font-display); }
.export-item small { color: var(--muted); font-size: 13px; }
.hs-head > .btn { align-self: center; }
.backup-card { padding: 16px 18px; margin: 16px 0 28px; display: grid; gap: 10px; }
.backup-card .reqs-head { padding: 0; border: 0; flex-wrap: wrap; }
.backup-card h2 { display: flex; align-items: center; gap: 8px; }
.backup-card code { font-size: 12.5px; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.backup-list { border: 1px solid var(--line); border-radius: var(--r-md); padding: 4px 12px; }