:root {
  --ink: #16212b;
  --muted: #5f7182;
  --faint: #8a97a3;
  --line: #dce3e9;
  --panel: #f4f7f9;
  --paper: #ffffff;
  --navy: #1f3b55;
  --accent: #185fa5;
  --ok: #2c6a50;
  --warn: #a8721a;
  --bad: #a32d2d;
  --ok-bg: #e8f2ec;
  --warn-bg: #fbf1de;
  --bad-bg: #fbeaea;
  --radius: 6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--panel);
}

button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- chrome ---------- */
header {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 14px 28px;
  background: var(--navy);
  color: #fff;
}
header h1 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
header .sub { font-size: 12px; opacity: 0.72; }

nav { display: flex; gap: 2px; margin-left: auto; }
nav button {
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.72);
  padding: 7px 16px;
  border-radius: var(--radius);
  cursor: pointer;
}
nav button:hover { background: rgba(255,255,255,0.1); color: #fff; }
nav button[aria-current="true"] { background: rgba(255,255,255,0.18); color: #fff; }

main { padding: 22px 28px 60px; max-width: 1500px; }
.view[hidden] { display: none; }

h2 { font-size: 16px; font-weight: 600; margin: 26px 0 10px; }
h2:first-child { margin-top: 0; }
h3 { font-size: 14px; font-weight: 600; margin: 18px 0 8px; }
p.hint { color: var(--muted); font-size: 12.5px; margin: 0 0 14px; max-width: 78ch; }

/* ---------- tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.tile {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
}
.tile .label { font-size: 11.5px; color: var(--muted); }
.tile .value { font-size: 22px; font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; }
.tile .foot { font-size: 11px; color: var(--faint); margin-top: 2px; }
.tile.bad .value { color: var(--bad); }
.tile.warn .value { color: var(--warn); }
.tile.ok .value { color: var(--ok); }

/* ---------- tables ---------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}
.card > .head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfd;
}
.card > .head strong { font-size: 14px; }
.card > .head .meta { font-size: 12px; color: var(--muted); }
.card > .head .meta + .meta::before { content: "·"; margin-right: 8px; color: var(--faint); }

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: none;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td { padding: 8px 10px; border-bottom: 1px solid #f0f3f5; vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: #f7fafc; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.small { font-size: 12px; color: var(--muted); }

/* ---------- badges ---------- */
.badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11.5px;
  white-space: nowrap;
}
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.bad { background: var(--bad-bg); color: var(--bad); }
.badge.none { background: #eef1f4; color: var(--muted); }

.chip {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 11px;
  color: var(--muted);
  background: #fafbfc;
}
.chip.ext { border-color: #e4cfa8; background: var(--warn-bg); color: var(--warn); }

/* ---------- progress ---------- */
.bar { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.bar .track {
  flex: 1;
  height: 7px;
  background: #e7ecf0;
  border-radius: 4px;
  overflow: hidden;
  min-width: 90px;
}
.bar .fill { height: 100%; background: var(--accent); border-radius: 4px; }
.bar .pct { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }

/* ---------- forms ---------- */
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 12px 14px; }
label.field { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--muted); }
label.field input, label.field select {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 8px;
  background: var(--paper);
  min-width: 150px;
}
label.field input:focus, label.field select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

button.action {
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  padding: 7px 14px;
  cursor: pointer;
}
button.action:hover { background: #12497f; }
button.ghost {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 12px;
  cursor: pointer;
  color: var(--ink);
}
button.ghost:hover { border-color: var(--muted); }
.err { color: var(--bad); font-size: 12px; padding: 0 14px 12px; }

/* ---------- drawer ---------- */
.drawer-bg {
  position: fixed; inset: 0;
  background: rgba(22,33,43,0.34);
  display: flex; justify-content: flex-end;
  z-index: 20;
}
.drawer {
  width: min(760px, 94vw);
  background: var(--paper);
  height: 100%;
  overflow-y: auto;
  padding: 20px 24px 40px;
}
.drawer .top { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.drawer h2 { margin: 0; }
.drawer .close { margin-left: auto; }

.params { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.param {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  background: #fbfcfd;
}
.param .k { font-size: 11px; color: var(--muted); }
.param .v { font-size: 13px; margin-top: 2px; }
.param .m { font-size: 11px; color: var(--faint); margin-top: 3px; }

.empty { padding: 26px 14px; text-align: center; color: var(--muted); font-size: 13px; }

/* ---------- edycja modelu ---------- */
button.ghost.tight { padding: 3px 9px; font-size: 12px; margin-left: auto; }
button.ghost.danger { color: var(--bad); border-color: #e7c9c9; }
button.ghost.danger:hover { border-color: var(--bad); background: var(--bad-bg); }
.card > .head button.ghost.tight { margin-left: auto; }

.grid4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 9px;
}
.grid4.pad { padding: 12px 14px; }
.grid4 .field.wide { grid-column: span 2; }
label.field .u { font-weight: 400; color: var(--faint); }
label.field input, label.field select { width: 100%; min-width: 0; }

fieldset.pblock {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 14px 12px;
  margin: 0 0 10px;
  background: #fbfcfd;
}
fieldset.pblock legend { font-size: 13px; font-weight: 600; padding: 0 6px; }
fieldset.pblock label.tick { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
fieldset.pblock:not(.on) {
  opacity: 0.65;
  padding: 0 14px;
  margin-bottom: 2px;
  border-color: transparent;
  background: transparent;
}
fieldset.pblock:not(.on) .grid4, fieldset.pblock:not(.on) .hint { display: none; }
fieldset.pblock.on { background: var(--paper); }
p.hint.tiny { font-size: 11.5px; margin: 2px 0 8px; }

/* ---------- tabela planu projektu ---------- */
.plan-wrap { overflow-x: auto; }
table.plan { font-size: 13px; }
table.plan tr.grp th {
  border-bottom: 0;
  padding-bottom: 0;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
}
table.plan td, table.plan th { padding: 5px 8px; }
table.plan td.dflt { color: var(--muted); white-space: nowrap; }
table.plan tr.ovr { background: #fdf8ec; }
table.plan tr.ovr td.dflt { text-decoration: line-through; color: var(--faint); }
table.plan tfoot td {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  background: #fbfcfd;
  padding-top: 8px;
}
input.mini, select.mini {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 3px 6px;
  width: 78px;
  text-align: right;
  background: var(--paper);
}
select.mini { text-align: left; width: 88px; }
input.mini.wide { width: 150px; text-align: left; }
input.mini:focus, select.mini:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
input.mini::placeholder { color: var(--faint); font-style: italic; }
.small.up { color: var(--bad); }
.small.down { color: var(--ok); }

/* Szuflada ze szczegółami projektu mieści całą tabelę planu — inaczej nazwy
   kroków łamią się na pojedyncze słowa i kolumna kosztu wypada poza ekran. */
.drawer.wide { width: min(1240px, 97vw); }
table.plan td:nth-child(2) { min-width: 190px; }
table.plan td:nth-child(2) .small { white-space: nowrap; }

/* ---------- zwijane podsumowanie pięciu parametrów ---------- */
.sum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.sum-cell {
  position: relative;
  text-align: left;
  background: var(--paper);
  border: 0;
  border-right: 1px solid var(--line);
  padding: 11px 26px 11px 14px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.sum-cell:last-child { border-right: 0; }
.sum-cell:hover { background: #f7fafc; }
.sum-cell.open { background: var(--panel); box-shadow: inset 0 -2px 0 var(--accent); }
.sum-cell .k { font-size: 11.5px; color: var(--muted); }
.sum-cell .v { font-size: 19px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.sum-cell .m { font-size: 11px; color: var(--faint); margin-top: 2px; }
.sum-cell .caret {
  position: absolute; right: 10px; top: 12px;
  color: var(--faint); font-size: 11px; transition: transform 0.12s;
}
.sum-cell.open .caret { transform: rotate(180deg); color: var(--accent); }
.sum-detail { border-top: 1px solid var(--line); background: #fbfcfd; }
.sum-detail table { font-size: 12.5px; }
.sum-detail tr.ovr { background: #fdf8ec; }
.chip.warn-chip { border-color: #e4cfa8; background: var(--warn-bg); color: var(--warn); }

/* ---------- trzy metryki projektu ---------- */
.tiles.metrics { grid-template-columns: repeat(3, 1fr); margin-bottom: 4px; }
.tiles.metrics .tile .value { font-size: 26px; }

/* paski postępu w tabeli projektów */
.bar .fill.cost { background: #6b7f94; }
.bar .fill.late { background: var(--bad); }

.ok-msg {
  color: var(--ok);
  background: var(--ok-bg);
  font-size: 13px;
  padding: 9px 14px;
  margin: 0 14px 12px;
  border-radius: var(--radius);
}
.ok-msg a { color: var(--accent); margin-left: 6px; }

/* ---------- gałęzie i ścieżka krytyczna ---------- */
.chip.cp { border-color: #c9d8e6; background: #eaf2fa; color: var(--accent); }
.chip.dep { border-color: #d8d2c0; background: #faf7ef; color: #7a6a42; }
.chip.par { border-color: #c9d8e6; background: #eaf2fa; color: var(--accent); }
.chip.proc { font-variant-numeric: tabular-nums; }
.thr { padding: 1px 0; }
.thr + .thr { border-top: 1px dashed var(--line); margin-top: 3px; padding-top: 4px; }
.thr .small { margin-left: 4px; }
.card.thread { margin-bottom: 10px; }
.card.thread > .head { background: #f3f7fa; }
.chip.off { border-color: #cfd8c0; background: #f2f6ec; color: #5a6b48; }

/* ---- zespół: role, osoby, skład ról kroku ---- */
input.mini.n { width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
input.mini.invalid { border-color: var(--bad); background: var(--bad-bg); }
table.roles td, table.roles th { vertical-align: middle; }
table.roles select.mini { width: 190px; }
#team-roles input.mini.wide, #team-people input.mini.wide { width: 240px; }
.tile.long .value { font-size: 17px; }
.tiles.metrics .tile.long .value { font-size: 17px; }
.roles-ed .empty a { color: var(--accent); }
tr.roles-row > td { background: #f7f9fb; }
label.tick.inline { display: inline-flex; gap: 4px; margin-right: 10px; white-space: nowrap; }
button.ghost.tight.on { border-color: var(--accent); color: var(--accent); }

/* ---- Gantt ---- */
.gantt-box { border: 1px solid var(--line); border-radius: 8px; background: #fff; margin: 12px 0 18px; }
.gantt-box > summary { cursor: pointer; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; list-style: none; }
.gantt-box > summary::before { content: "▸"; color: var(--muted); }
.gantt-box[open] > summary::before { content: "▾"; }
.gantt-box > summary .meta { font-size: 12px; color: var(--muted); }
.gantt { --glab: 340px; position: relative; font-size: 12px; max-height: 560px; overflow-y: auto; border-top: 1px solid var(--line); }
.g-head, .g-row, .g-proc { display: grid; grid-template-columns: var(--glab) 1fr; }
.g-head { position: sticky; top: 0; z-index: 3; background: #f7f9fb; border-bottom: 1px solid var(--line); height: 24px; }
.g-head .g-track { position: relative; }
.g-tick { position: absolute; top: 5px; font-size: 10.5px; color: var(--muted); white-space: nowrap; padding-left: 3px; border-left: 1px solid var(--line); }
.g-body { position: relative; }
.g-lab { padding: 3px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid var(--line); display: flex; align-items: center; gap: 4px; }
.g-row { height: 26px; border-bottom: 1px solid #f0f3f5; }
.g-row.sub { height: 22px; background: #fbfcfd; }
.g-row.sub .g-lab { padding-left: 22px; color: var(--muted); font-size: 11.5px; }
.g-proc { height: 20px; background: #eef2f5; font-weight: 600; font-size: 11px; color: var(--muted); }
.g-track { position: relative; }
.g-bar { position: absolute; top: 5px; height: 16px; border-radius: 4px; cursor: grab; touch-action: none; min-width: 4px;
  background: #8fb3d6; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); overflow: hidden; }
.g-bar.crit { background: var(--accent); }
.g-bar.sub { top: 5px; height: 12px; background: #b9cfe4; }
.g-bar.done { opacity: 0.55; }
.g-bar.cur { outline: 2px solid #e8a33a; outline-offset: 1px; }
.g-bar.pause { background: repeating-linear-gradient(45deg, #e9c27a 0 6px, #f6e2b8 6px 12px); }
.g-bar.pm { background: rgba(143,179,214,0.16); box-shadow: inset 0 0 0 1px rgba(24,95,165,0.18); cursor: default; }
.g-bar.pm.crit { background: rgba(24,95,165,0.10); }
.g-bar.sub.pm .g-occ { background: #7ea6cf; }
.g-occ { position: absolute; top: 2px; bottom: 2px; min-width: 2px; margin-left: -1px; border-radius: 1px; background: #4f86bd; }
.g-bar.pm.done .g-occ, .g-occ.past { background: #9db7d1; }
.g-bar.susp { background: transparent; border: 1px dashed var(--faint); box-shadow: none; min-width: 10px; }
.g-bar:active { cursor: grabbing; }
.g-bar .h { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; z-index: 2; }
.g-bar .h.l { left: 0; } .g-bar .h.r { right: 0; }
.g-bar:hover .h { background: rgba(255,255,255,0.45); }
.g-stop { position: absolute; right: 0; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, rgba(232,163,58,.85) 0 5px, rgba(255,255,255,.6) 5px 10px); }
.g-lag { position: absolute; top: 12px; height: 0; border-top: 2px dotted var(--faint); }
.g-today { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--bad); opacity: .6; pointer-events: none; z-index: 2; }
.g-act { margin-left: auto; border: 1px solid var(--line); background: #fff; border-radius: 4px; font-size: 11px; padding: 0 5px; cursor: pointer; color: var(--muted); }
.g-act:hover { border-color: var(--accent); color: var(--accent); }
.g-act.inline { margin-left: 6px; }
.gantt-legend { padding: 8px 14px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; border-top: 1px solid var(--line); }
.lg { display: inline-block; width: 18px; height: 9px; border-radius: 2px; margin-right: -8px; vertical-align: middle; }
.lg.crit { background: var(--accent); } .lg.norm { background: #8fb3d6; }
.lg.pause { background: repeating-linear-gradient(45deg, #e9c27a 0 4px, #f6e2b8 4px 8px); }
.lg.susp { border: 1px dashed var(--faint); } .lg.cur { outline: 2px solid #e8a33a; background: #8fb3d6; }
.lg.today { width: 2px; background: var(--bad); }
.lg.pmocc { background: rgba(143,179,214,0.16) repeating-linear-gradient(90deg, #4f86bd 0 2px, transparent 2px 6px);
  box-shadow: inset 0 0 0 1px rgba(24,95,165,0.18); }
.chip.susp-chip { border-style: dashed; border-color: var(--faint); background: #f4f5f6; color: var(--muted); }

/* ---- dialog ---- */
.modal-bg { position: fixed; inset: 0; background: rgba(22,33,43,.4); z-index: 40; display: flex; align-items: center; justify-content: center; }
.modal { background: #fff; border-radius: 10px; padding: 18px 20px; width: min(520px, 94vw); box-shadow: 0 10px 40px rgba(0,0,0,.2); }
.modal h3 { margin: 0 0 10px; } .modal h4 { margin: 12px 0 6px; font-size: 13px; }
.modal label.opt { display: flex; gap: 8px; align-items: flex-start; padding: 6px 4px; font-size: 13px; cursor: pointer; border-radius: 6px; }
.modal label.opt:hover { background: #f4f7fa; }
.modal label.field { display: block; margin-top: 8px; }
.modal label.field input { width: 100%; }
.modal .row { padding: 12px 0 0; }

.g-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-lab .chip { flex: none; font-size: 10.5px; padding: 0 5px; }
.g-act { flex: none; }

/* ---- modele ---- */
.model-pill { margin-left: 14px; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25);
  border-radius: 6px; padding: 4px 10px; font-size: 13px; cursor: pointer; }
.model-pill:hover { background: rgba(255,255,255,.2); }
.model-pill .v { opacity: .75; font-size: 11.5px; margin-left: 4px; }
.model-pill .v.draft { color: #f6d58f; opacity: 1; }
nav button:disabled { opacity: .4; cursor: not-allowed; }
.models-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 12px; }
.model-card.cur { box-shadow: 0 0 0 2px var(--accent); }
.model-card .pad, #new-model .pad { padding: 10px 14px 0; }
.mstats { display: grid; grid-template-columns: repeat(5, auto); gap: 4px 16px; padding: 10px 14px; }
.mstats span { display: block; font-size: 11px; color: var(--muted); }
.mstats b { font-size: 14px; font-variant-numeric: tabular-nums; }
.mstats small.warn { display: block; color: var(--warn); font-size: 11px; }
a.btn { display: inline-flex; align-items: center; text-decoration: none; color: inherit; border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 12px; font-size: 13px; background: #fff; }
a.btn.tight { padding: 2px 8px; font-size: 12px; }
#new-model label.opt { display: flex; gap: 8px; align-items: center; padding: 5px 0; font-size: 13px; }
#new-model label.opt select { margin-left: 8px; }
.vbar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 10px 14px; margin: 6px 0 12px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 13px; }
.vbar.draft { border-color: #e4cfa8; background: var(--warn-bg); }
.vbar.ro { background: #f4f6f8; }
.vbar .vmsg { flex: 1; min-width: 260px; }
.vbar .vbtn { display: flex; gap: 6px; flex-wrap: wrap; }
body.readonly .edit-only { display: none !important; }
.ro-only { display: none; }
body.readonly .ro-only { display: inline; }
.card.upgrade { border-color: #e4cfa8; background: var(--warn-bg); margin: 10px 0; }
.card.upgrade .pad { padding: 10px 14px; }
select.mini.wide2 { width: 320px; max-width: 100%; }
.deps-ed .pad { padding: 10px 14px 0; margin: 0; }
table.roles { width: 100%; }
table.roles select.mini.wide2 { width: 100%; min-width: 280px; }
#st-deps input.mini.wide, #st-devs input.mini.wide { width: 100%; min-width: 200px; }
#st-devs select[data-v="decided_by"] { width: 200px; }

/* kroki generowane automatycznie (kontrola jakości) */
.chip.auto { border-color: #b9cde4; background: #eef4fb; color: #3d5f86; }
.card.note-auto { padding: 10px 14px; border-left: 3px solid #7fa3cc; background: #f6f9fd; }
.card.note-auto p { margin: 0 0 6px; }
.card.risk-plan { border-left: 3px solid #d7a84a; }
.card .pad-x { padding: 0 14px; margin: 8px 0; }

/* zakładki harmonogramu */
.tabs { display: flex; gap: 4px; margin: 10px 0 8px; border-bottom: 1px solid #e3e1da; }
.tab { border: 1px solid transparent; border-bottom: none; background: none; padding: 6px 14px;
  border-radius: 6px 6px 0 0; cursor: pointer; color: #52514e; font: inherit; }
.tab.on { border-color: #e3e1da; background: #fff; color: #0b0b0b; font-weight: 600; margin-bottom: -1px; }

/* obciążenie i dostępność */
.wl { --wl-this: #2a78d6; --wl-other: #b8b6ad; --wl-cap: #0b0b0b; --wl-bad: #c0352b; --wl-badbg: #fbeceb;
  position: relative; }
.wl-head { align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.wl-facts { display: flex; gap: 22px; flex-wrap: wrap; }
.wl-legend { display: flex; gap: 16px; margin: 10px 0 4px; flex-wrap: wrap; color: #52514e; }
.wl-legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; }
.wl-legend .sw.this { background: var(--wl-this); }
.wl-legend .sw.other { background: var(--wl-other); }
.wl-legend .sw.cap { height: 2px; width: 16px; background: var(--wl-cap); vertical-align: 3px; border-radius: 0; }
.wl-legend .sw.over { background: var(--wl-badbg); border: 1px solid var(--wl-bad); }
.wl-chart { width: 100%; overflow-x: auto; }
.wl-chart svg { display: block; }
.wl-grid { stroke: #ecebe6; stroke-width: 1; }
.wl-base { stroke: #9a988f; stroke-width: 1; }
.wl-ax { fill: #6b6a64; font-size: 11px; }
.wl-this { fill: var(--wl-this); }
.wl-other { fill: var(--wl-other); }
.wl-overbg { fill: var(--wl-badbg); }
.wl-flag { fill: var(--wl-bad); font-size: 12px; }
.wl-cap { stroke: var(--wl-cap); stroke-width: 2; }
.wl-caplbl { fill: #0b0b0b; font-size: 11px; font-weight: 600; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.wl-now { stroke: #9a988f; stroke-dasharray: 3 3; }
.wl-hit { fill: transparent; cursor: default; }
.wl-hit.hov { fill: rgba(11, 11, 11, .05); }
.wl-bad { color: var(--wl-bad); font-weight: 600; }
.wl-tip { position: absolute; top: 40px; background: #fff; border: 1px solid #d9d7cf; border-radius: 6px;
  padding: 8px 10px; font-size: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.08); pointer-events: none; min-width: 180px; z-index: 5; }
.wl-table { margin-top: 8px; }
.own-hint { display: block; color: #8a6d1f; margin-top: 2px; }
.content-ed { padding: 6px 0; }

/* przeciążenie na Gantcie */
.g-bar.over { outline: 2px solid #c0352b; outline-offset: 1px; }
.g-warn { color: #c0352b; font-weight: 700; cursor: help; }
.g-who { color: #6b6a64; }
.lg.over { display: inline-block; width: 14px; height: 8px; border: 2px solid #c0352b; border-radius: 2px; vertical-align: -1px; }
.wl-tasks { color: #52514e; }
.wl-start { stroke: #2a78d6; stroke-width: 1.5; stroke-dasharray: 4 3; }

/* kamienie milowe */
.g-ms { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid #6b4fbf; z-index: 3; pointer-events: auto; }
.g-ms span { position: absolute; top: -2px; left: -9px; font-size: 13px; background: #fff; border-radius: 3px; cursor: help; }
.g-ms.late { border-left-color: #c0352b; }
.ms line { stroke: #6b4fbf; stroke-width: 2; }
.ms.late line { stroke: #c0352b; }
.ms text { font-size: 13px; cursor: help; }
.ms .ms-name { font-size: 11px; fill: #3f2f80; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.ms.late .ms-name { fill: #c0352b; }
.ms-target { stroke: #6b4fbf; stroke-width: 1.5; stroke-dasharray: 2 3; }
.ms-target.late { stroke: #c0352b; }
.ms-ico { font-size: 16px; text-align: center; width: 28px; }
tr.ms-late td { background: #fbeceb; }
.start-ed input[type=date] { font: inherit; font-size: 12px; padding: 1px 4px; margin-left: 4px; }

/* parametry na osi czasu */
.tl { position: relative; }
.tl-head { gap: 12px; align-items: center; flex-wrap: wrap; }
.seg { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.seg button.on { background: #0b0b0b; color: #fff; border-color: #0b0b0b; }
.tl-chart { width: 100%; overflow-x: auto; }
.tl-chart svg { display: block; }
.tl-line { fill: none; stroke: #2a78d6; stroke-width: 2; }
.tl-area { fill: #2a78d6; opacity: .08; }
.tl-cap { fill: #52514e; font-size: 11px; font-weight: 600; }
.tl-bar { fill: #8fb3e3; }
.tl-lab { fill: #3a3935; font-size: 11px; }
.tl-val { fill: #6b6a64; font-size: 10px; }
.tl-hit { fill: transparent; }
.tl-x { stroke: #9a988f; stroke-width: 1; }

/* przejścia do kroku */
.step-link { color: #1f5fae; text-decoration: none; border-bottom: 1px dotted #1f5fae; cursor: pointer; }
.step-link:hover { border-bottom-style: solid; }
@keyframes flashrow { 0%, 60% { background: #fff1b8; } 100% { background: transparent; } }
.g-row.flash, tr.flash td { animation: flashrow 2.6s ease-out; }
.g-row.flash .g-bar { outline: 2px solid #e0a800; outline-offset: 1px; }
.tl-row { cursor: pointer; }
.tl-row:hover .tl-bar { fill: #2a78d6; }
.tl-row:hover .tl-lab { text-decoration: underline; }
.wl-hit { cursor: pointer; }
.wl-hit.pin { fill: rgba(42, 120, 214, .10); stroke: #2a78d6; stroke-width: 1; }
.wl-pin { margin: 8px 0; }
.wl-pin-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wl-pin-b { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 6px; }
.wl-pin-o ul { margin: 4px 0 0; padding-left: 18px; }
.wl-pin-o li { margin: 2px 0; }
.g-warn { cursor: pointer; }
#op-plan input[type=date].mini { width: auto; min-width: 9.2em; font-size: 12px; }
table.plan td.nowrap { white-space: nowrap; }
table.plan td.nowrap input.mini { width: 4.5em; margin-right: 4px; }
.model-ref { color: var(--muted, #8a887f); }

/* ustawienia: menu boczne + podstrona */
.settings { display: grid; grid-template-columns: 210px 1fr; gap: 24px; align-items: start; }
.set-menu { position: sticky; top: 70px; display: flex; flex-direction: column; gap: 2px;
  background: #fff; border: 1px solid #e3e1da; border-radius: 8px; padding: 8px; }
.set-title { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #8a887f; padding: 4px 8px 6px; }
.set-menu button { text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 6px;
  font: inherit; color: #3a3935; cursor: pointer; }
.set-menu button small { display: block; color: #8a887f; font-size: 11px; }
.set-menu button:hover { background: #f3f2ee; }
.set-menu button[aria-current="true"] { background: #1f3a5f; color: #fff; }
.set-menu button[aria-current="true"] small { color: #c9d6e8; }
.set-body > .view { min-width: 0; }
@media (max-width: 760px) { .settings { grid-template-columns: 1fr; } .set-menu { position: static; flex-direction: row; flex-wrap: wrap; } }

/* portfel */
.filters { align-items: flex-end; gap: 12px; margin: 6px 0 10px; flex-wrap: wrap; }
table.pf td.nowrap { white-space: nowrap; }
.ms-late-chip { border-color: #e7b3ae; background: #fbeceb; color: #c0352b; }
a.btn.action { display: inline-block; text-decoration: none; }
.settings[hidden] { display: none; }
#io-body .pad { padding: 14px 18px; }
#io-body a.btn.action { background: #1f5fae; color: #fff; border-color: #1f5fae; padding: 8px 14px; border-radius: 6px; }
.chip.crit-chip { background: var(--accent); border-color: var(--accent); color: #fff; }
.oc-dep { justify-content: flex-start; gap: 8px; margin: 4px 0; }
.oc-dep select { width: auto; min-width: 26em; max-width: 100%; }
.g-lag-lg { display: inline-block; width: 18px; height: 6px; vertical-align: 1px; margin-left: 10px;
  background: repeating-linear-gradient(90deg, #b9b7ae 0 3px, transparent 3px 6px); }
#mgantt-ro { background: #fff7e0; border: 1px solid #ecd9a0; padding: 8px 12px; border-radius: 6px; }
.my-sec select.mini { min-width: 15em; max-width: 22em; }
.my-sec td.nowrap { white-space: normal; }
.my-sec summary { padding: 8px 12px; cursor: pointer; }

/* SLA */
.sla-tile { cursor: pointer; }
.sla-tile.sel { outline: 2px solid var(--accent); outline-offset: -2px; }
.sla-st { font-weight: 600; }
.sla-tile.bad .sla-st, .sla-badge.bad { color: var(--bad); }
.sla-tile.warn .sla-st, .sla-badge.warn { color: var(--warn); }
.sla-tile.ok .sla-st, .sla-badge.ok { color: var(--ok); }
.sla-badge { font-size: 12px; font-weight: 600; white-space: nowrap; }
#sla-settings .field input { width: 6em; }
#sla-settings { align-items: flex-end; flex-wrap: wrap; gap: 12px; }

/* ---------- organizacje: przełącznik w nagłówku ---------- */
header { align-items: center; }
body.demo header { box-shadow: inset 0 -3px 0 #e0a800; }
.orgsw { display: flex; gap: 0; border: 1px solid rgba(255,255,255,0.28); border-radius: var(--radius); overflow: hidden; }
.orgsw .org-btn, .orgsw .org-sel {
  background: transparent; border: 0; color: rgba(255,255,255,0.78);
  padding: 5px 12px; cursor: pointer; font-size: 13px;
}
.orgsw .org-sel { max-width: 240px; border-left: 1px solid rgba(255,255,255,0.28); }
.orgsw .org-btn + .org-btn { border-left: 1px solid rgba(255,255,255,0.28); }
.orgsw .org-sel option { color: var(--ink); }
.orgsw .on { background: rgba(255,255,255,0.2); color: #fff; font-weight: 600; }
body.demo .orgsw .org-btn.on { background: #e0a800; color: #1f2a33; }
.nav-pct { font-size: 11px; background: rgba(255,255,255,0.22); border-radius: 9px; padding: 0 6px; margin-left: 4px; }

/* ---------- listy kontrolne (organizacja, model) ---------- */
.check-box summary { cursor: pointer; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.check-box { margin-bottom: 14px; }
.check-bar { display: inline-flex; align-items: center; gap: 8px; }
.check-bar .track { width: 220px; height: 9px; background: var(--line); border-radius: 5px; overflow: hidden; }
.check-bar .fill { display: block; height: 100%; background: var(--accent); border-radius: 5px; }
.check-bar .fill.ok { background: var(--ok); }
.check-bar .pct { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ck-head { margin: 4px 0 8px; }
.ck-group { margin: 14px 0 4px; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: none; }
.ck-list { list-style: none; margin: 0; padding: 0; }
.ck-row { display: flex; gap: 12px; align-items: flex-start; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.ck-row:last-child { border-bottom: 0; }
.ck { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: 13px; font-weight: 700; margin-top: 1px; }
.ck-done { background: var(--ok); color: #fff; }
.ck-todo { border: 2px solid var(--faint); background: #fff; }
.ck-na { background: #eef1f3; color: var(--faint); }
.ck-body { flex: 1; min-width: 0; }
.ck-go { flex: none; }
.ck-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; margin-left: 4px; }
.ck-opt { font-size: 11px; color: var(--faint); border: 1px dashed var(--faint); border-radius: 9px; padding: 0 6px; }
.ck-row.opt .ck-body > div:first-child strong { font-weight: 500; }
.ck-row.na .ck-body { color: var(--faint); }
.ck-miss { margin-top: 4px; font-size: 12px; color: var(--muted); }
.ck-miss .chip { text-decoration: none; margin: 2px 2px 0 0; }
.card.flash { animation: flashrow 2.6s ease-out; }
#org-check, #org-export, .check-box { padding: 12px 18px; }

/* ---------- ewidencja czasu ---------- */
.timer-chip { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.14);
  border-radius: 16px; padding: 3px 6px 3px 12px; font-size: 13px; }
.timer-chip[hidden] { display: none; }
.timer-chip a { color: #fff; text-decoration: none; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timer-chip button { background: #c0392b; color: #fff; border: 0; border-radius: 12px; width: 26px; height: 22px; cursor: pointer; }
.tm-dot { width: 8px; height: 8px; border-radius: 50%; background: #4cd07d; animation: tmpulse 1.6s infinite; }
@keyframes tmpulse { 50% { opacity: .3; } }
.tm-warn { background: #e0a800; color: #1f2a33; border-radius: 9px; padding: 0 6px; font-size: 11px; font-weight: 600; }
.tm-btn { border: 1px solid var(--ok); background: var(--ok-bg); color: var(--ok); border-radius: 50%;
  width: 26px; height: 26px; cursor: pointer; font-size: 11px; vertical-align: middle; }
.tm-btn.stop { border-color: var(--bad); background: var(--bad-bg); color: var(--bad); }
.chip.tm-chip { border-color: #b7e0c4; background: var(--ok-bg); color: var(--ok); }
.modal.wide-modal { width: min(1100px, 96vw); max-height: 88vh; overflow: auto; }
.modal .top { display: flex; align-items: center; justify-content: space-between; }
pre.hist { margin: 0; font-size: 11px; white-space: pre-wrap; font-family: inherit; color: var(--muted); }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 60; background: var(--navy); color: #fff;
  padding: 10px 14px; border-radius: 8px; max-width: 420px; box-shadow: 0 6px 24px rgba(0,0,0,.25); font-size: 13px; }
.tm-btn:disabled { opacity: .35; cursor: not-allowed; }
.tm-ctl { display: inline-flex; gap: 4px; align-items: center; margin-top: 3px; }

/* ---------- logowanie i poziomy dostępu ---------- */
.login { display: flex; justify-content: center; padding: 60px 16px; }
.login[hidden] { display: none; }
.login-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 26px 30px; width: min(640px, 100%); }
.login-card select, .login-card input { min-width: 360px; }
.lg-legend { margin-top: 20px; font-size: 13px; }
.lg-legend td { padding: 4px 10px 4px 0; vertical-align: top; }
.user-chip { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.85); }
.user-chip[hidden] { display: none; }
.user-chip button { background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 6px; padding: 2px 8px; cursor: pointer; }
nav button[hidden], .set-menu button[hidden], #my-who-box[hidden] { display: none; }
.ro-banner { background: var(--warn-bg); color: var(--warn); border: 1px solid #e4cfa8; border-radius: 6px; padding: 8px 12px; margin-bottom: 10px; font-size: 13px; }
/* poniżej kierownika: projekt tylko do podglądu — zostają timer, „+ czas”, linki i zamykanie */
body:not(.lvl-pm) .drawer :is(input, select, textarea, button):not(.tm-btn):not(.close):not(.allow):not(.ai-btn):not(.ai-sugg button) { pointer-events: none; opacity: .45; }
body:not(.lvl-pm) .drawer button.ghost.tight[onclick^="timeDialog"] { pointer-events: auto; opacity: 1; }
/* zespół: kierownik widzi, edytuje tylko admin */
body.lvl-pm:not(.lvl-admin) #view-team :is(input, select, button) { pointer-events: none; opacity: .55; }
body:not(.lvl-admin) .admin-only { display: none !important; }


/* ---------- asystent AI ---------- */
.ai-box { border: 1px solid #d9cdf5; background: linear-gradient(180deg, #faf7ff, #fff); border-radius: 8px; padding: 10px 14px; margin: 10px 0 14px; }
.ai-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ai-head .small { color: var(--muted); flex: 1; min-width: 200px; }
.ai-mark { color: #6b4fd8; font-size: 16px; }
.ai-btn { background: #6b4fd8; color: #fff; border: 0; border-radius: 6px; padding: 6px 12px; cursor: pointer; }
.ai-btn:hover { background: #5a3fc4; }
.ai-out { margin-top: 10px; border-top: 1px dashed #d9cdf5; padding-top: 8px; }
.ai-out p { margin: 6px 0; }
.ai-title { font-weight: 600; margin-bottom: 4px; }
.ai-sugg { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.ai-note { margin-top: 8px; font-size: 11.5px; color: var(--faint); font-style: italic; }
.ai-wait { color: #6b4fd8; }
.public-banner { background: #fff6dc; border-bottom: 1px solid #e9d39a; color: #6b5212; padding: 7px 28px; font-size: 13px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
.public-banner a { color: inherit; font-weight: 600; }
.pb-tools { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pb-code { display: inline-flex; gap: 6px; margin: 0; }
.pb-code input { font: inherit; width: 150px; padding: 3px 7px; border: 1px solid #e0c983; border-radius: 6px; background: #fffdf5;
  text-transform: uppercase; letter-spacing: .04em; }
.pb-code .btn { padding: 3px 10px; }
.pb-bad { color: #a23a21; font-weight: 600; }
.pb-code input::placeholder { text-transform: none; letter-spacing: 0; }
/* publiczne demo tylko do odczytu: bez timerów (zapis czasu i tak jest zablokowany) */
body.public-ro .tm-btn, body.public-ro .g-act { display: none !important; }
.demo-switch { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; }
.demo-switch select { font: inherit; font-weight: 400; padding: 3px 6px; border: 1px solid #e0c983; border-radius: 6px; background: #fffdf5; color: #4d3b0b; }
body.public-demo .orgsw { display: none; }

/* ---------- język PL | EN ---------- */
.langsw { display: flex; border: 1px solid rgba(255,255,255,0.35); border-radius: var(--radius); overflow: hidden; align-self: center; }
.langsw button { background: transparent; border: 0; color: rgba(255,255,255,0.72); padding: 3px 9px; font-size: 12px; cursor: pointer; }
.langsw button.on { background: rgba(255,255,255,0.22); color: #fff; font-weight: 600; }
.langsw button:hover { color: #fff; }

/* ---------- zarządzanie projektem i powtarzanie ---------- */
.pm-form { display: grid; gap: 10px; margin: 10px 0; }
.pm-kind { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; background: var(--paper); }
.pm-kind:not(.on) .pm-fields, .pm-kind:not(.on) .pm-label { opacity: 0.45; }
.pm-fields { align-items: flex-start; margin-top: 6px; }
.pm-who { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.pm-sel { flex-basis: 100%; display: grid; gap: 4px; margin-top: 4px; }
.pm-card > summary { cursor: pointer; list-style: none; }
.pm-card > summary::-webkit-details-marker { display: none; }
.repeat-row { align-items: flex-end; }
.pm-sel[hidden], .repeat-row [hidden] { display: none !important; }