/* ═══════════════════════════════════════════════════════════════════
   Оформление. Задача: узнаваемо как таблица, но читаемее Excel.

   Принципы:
   • плотность как в таблице — строк на экране должно быть много;
   • цветом говорят только статусы, продукты и перегруз, всё остальное
     чёрным по светлому: в исходной таблице цветом залито почти всё, и
     из-за этого не видно, куда смотреть;
   • липкие шапка и первые столбцы — без них горизонтальная прокрутка
     превращает таблицу в загадку.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#f5f6f8; --bg2:#fff; --bg3:#eef0f4;
  --line:#d8dce3; --line2:#eceff4;
  --tx:#1b1f27; --dim:#5d6673; --mute:#8b939f;
  --accent:#1d6ff2; --ok:#1e7d3a; --warn:#b8760a; --err:#c02b2b;
  --head:#1f4d3d;                      /* тёмно-зелёная шапка, как в таблице */
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--tx);font:13px/1.45 var(--sans);
  -webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}

/* ── Шапка ── */
.top{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--bg2);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;flex-wrap:wrap}
.brand{font-weight:800;letter-spacing:-.02em;font-size:15px}
.claim{font-size:11px;opacity:.55;white-space:nowrap}
@media(max-width:900px){.claim{display:none}}
.tabs{display:flex;gap:2px}
.tabs button{background:none;border:0;padding:6px 12px;border-radius:8px;cursor:pointer;
  color:var(--dim);font-size:13px}
.tabs button:hover{background:var(--bg3);color:var(--tx)}
.tabs button.on{background:var(--head);color:#fff;font-weight:600}
.grow{flex:1}
.save-state{font-family:var(--mono);font-size:11px;color:var(--mute)}

.btn{background:var(--bg3);border:1px solid var(--line);border-radius:8px;
  padding:6px 11px;cursor:pointer;font-size:12.5px;white-space:nowrap}
.btn:hover:not(:disabled){border-color:var(--accent)}
.btn:disabled{opacity:.45;cursor:default}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.danger{color:var(--err)}
.btn.danger:hover{border-color:var(--err)}
.btn.sm{padding:5px 9px;font-size:12px}

.view{display:block}
.view[hidden]{display:none}

/* ── Панель фильтров ── */
.bar{display:flex;align-items:flex-end;gap:10px;padding:8px 14px;background:var(--bg);
  border-bottom:1px solid var(--line);flex-wrap:wrap;position:sticky;top:41px;z-index:30}
.bar label{display:flex;flex-direction:column;gap:3px;font-size:10.5px;color:var(--mute);
  text-transform:uppercase;letter-spacing:.05em}
.bar select,.bar input{background:var(--bg2);border:1px solid var(--line);border-radius:7px;
  padding:5px 8px;font-size:12.5px;text-transform:none;letter-spacing:0;color:var(--tx)}
.bar input[type=search]{min-width:190px}
.bar .num{width:74px}
.bar .sep{width:1px;align-self:stretch;background:var(--line);margin:0 2px}
.bar .grow-in{flex:0 1 240px}
.bar .crumbs{font-weight:700;font-size:14px}
.chk{flex-direction:row!important;align-items:center;gap:6px;text-transform:none!important;
  letter-spacing:0!important;font-size:12px!important;color:var(--dim)!important}

/* ── Заголовок спринта со сводкой ── */
.sprint-head{padding:10px 14px 0;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sh-name{font-weight:700;font-size:15px}
.sh-dates{font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.pill{border-radius:999px;padding:3px 9px;font-size:11.5px;white-space:nowrap}
.pill b{margin-left:5px}
.pill.load{background:var(--bg3);color:var(--dim)}
.pill.load.over{background:#fbe3e3;color:var(--err);font-weight:600}
.pill.load.tight{background:#fdf1dc;color:var(--warn)}
.pill.done{background:#e3f2e6;color:var(--ok)}
.pill.count{background:var(--bg3);color:var(--dim)}

/* ── Таблица ── */
.board{padding:10px 14px 30px;overflow:auto;max-height:calc(100vh - 190px)}
table.grid{border-collapse:separate;border-spacing:0;width:100%;background:var(--bg2)}
table.grid th,table.grid td{border-bottom:1px solid var(--line2);
  border-right:1px solid var(--line2);padding:5px 7px;vertical-align:top;text-align:left}
table.grid thead th{position:sticky;top:0;z-index:12;background:var(--head);color:#fff;
  font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;font-weight:600;
  white-space:nowrap;vertical-align:middle;border-right-color:rgba(255,255,255,.18)}
/* Первые два столбца не уезжают при горизонтальной прокрутке: без этого
   при 16 столбцах непонятно, чью строку читаешь. */
table.grid th.stick1,table.grid td.stick1{position:sticky;left:0;z-index:11;background:var(--bg2)}
table.grid th.stick2,table.grid td.stick2{position:sticky;left:64px;z-index:11;background:var(--bg2)}
table.grid thead th.stick1,table.grid thead th.stick2{z-index:14;background:var(--head)}
table.grid tbody tr:hover td{background:#f7f9fc}
table.grid tbody tr:hover td.stick1,table.grid tbody tr:hover td.stick2{background:#f7f9fc}
td.title{min-width:250px;font-weight:600}
td.desc{min-width:280px;max-width:420px;color:var(--dim);white-space:pre-wrap}
td.dod{min-width:200px;max-width:300px;color:var(--dim);white-space:pre-wrap}
td.num,th.num{text-align:right;font-family:var(--mono);white-space:nowrap}
td.key{font-family:var(--mono);font-size:11.5px;white-space:nowrap}
td.who{min-width:150px}
.row-late td.date{background:#fde8e8;color:var(--err);font-weight:600}

/* Группа: строка спринта или команды внутри «всех команд» */
tr.group td{background:#dfe8f7;font-weight:700;border-bottom:1px solid var(--line);
  position:sticky;left:0}
tr.group.team td{background:#fdf3dd}
tr.group td .g-name{font-size:13px}
tr.group td .g-sub{font-family:var(--mono);font-size:11px;color:var(--dim);font-weight:400}

/* Чипы */
.chip{display:inline-block;border-radius:6px;padding:1px 7px;font-size:11px;
  white-space:nowrap;margin:1px 2px 1px 0;line-height:1.5}
.chip.dark{color:#fff}
.chip.person{font-family:var(--mono);font-size:10.5px}
.chip.role-BE{background:#f5e6cc;color:#7a4d05}
.chip.role-FE{background:#dbe8ff;color:#12459c}
.chip.role-QA{background:#d6efe9;color:#0a5a4f}
.chip.role-DES{background:#f7ddf0;color:#8a1f77}
.chip.role-PM{background:#e7e7e7;color:#444}
.cell-act{display:flex;gap:4px;align-items:center}
.mini{background:none;border:1px solid var(--line);border-radius:6px;cursor:pointer;
  padding:2px 6px;font-size:11px;color:var(--dim)}
.mini:hover{border-color:var(--accent);color:var(--tx)}

/* ── Люди под таблицей ── */
.people{padding:0 14px 40px}
.people h3{font-size:13px;margin:0 0 6px}
.people table{border-collapse:collapse;background:var(--bg2);width:auto;min-width:520px}
.people th,.people td{border:1px solid var(--line2);padding:4px 9px;font-size:12px}
.people th{background:var(--bg3);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--dim);font-weight:600;text-align:left}
.people td.num{text-align:right;font-family:var(--mono)}
.bar-load{position:relative;min-width:120px}
.bar-load i{position:absolute;left:0;top:0;bottom:0;background:#cfe0f8;z-index:0}
.bar-load.over i{background:#f6cccc}
.bar-load.tight i{background:#fae3c0}
.bar-load span{position:relative;z-index:1;font-family:var(--mono)}

/* ── Команды ── */
.teams{padding:12px 14px 30px;display:flex;flex-direction:column;gap:12px}
.team{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.team-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.team-h input.tname{font-weight:700;font-size:14px;border:1px solid transparent;
  background:none;border-radius:6px;padding:3px 6px;min-width:140px}
.team-h input.tname:hover,.team-h input.tname:focus{border-color:var(--line);background:var(--bg)}
.team-h .cap{font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.mem{display:grid;grid-template-columns:78px 1fr 92px 96px 110px 32px;gap:6px;
  align-items:center;padding:3px 0}
.mem select,.mem input{background:var(--bg);border:1px solid var(--line);border-radius:7px;
  padding:4px 7px;font-size:12.5px}
.mem .cap{font-family:var(--mono);font-size:12px;color:var(--dim);text-align:right}
.mem-head{grid-template-columns:78px 1fr 92px 96px 110px 32px;display:grid;gap:6px;
  font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--mute);
  padding-bottom:2px;border-bottom:1px solid var(--line2);margin-bottom:4px}
@media(max-width:720px){
  .mem,.mem-head{grid-template-columns:70px 1fr 80px;grid-auto-rows:min-content}
  .mem .cap,.mem-head span:nth-child(n+4){display:none}
}

/* ── Поля ── */
.fields{padding:12px 14px 40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:12px}
.fset{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.fset h3{font-size:13px;margin-bottom:8px}
.fitem{display:flex;align-items:center;gap:6px;padding:3px 0}
.fitem input[type=text]{flex:1;background:var(--bg);border:1px solid var(--line);
  border-radius:7px;padding:4px 7px;font-size:12.5px}
.fitem input[type=color]{width:30px;height:26px;border:1px solid var(--line);border-radius:6px;
  background:none;padding:1px;cursor:pointer}
.fitem input.num{width:64px}
.fset .add{margin-top:8px}

.note{padding:0 14px 40px;color:var(--dim);font-size:12.5px;max-width:760px}
.empty{padding:40px 14px;color:var(--mute)}

/* ── Окна ── */
dialog{border:1px solid var(--line);border-radius:12px;padding:18px;max-width:840px;
  width:94vw;background:var(--bg2);color:var(--tx)}
dialog::backdrop{background:rgba(20,26,36,.45)}
dialog h2{font-size:16px;margin-bottom:12px}
dialog label{display:flex;flex-direction:column;gap:3px;font-size:10.5px;color:var(--mute);
  text-transform:uppercase;letter-spacing:.05em;margin-top:9px}
dialog input,dialog select,dialog textarea{background:var(--bg);border:1px solid var(--line);
  border-radius:8px;padding:6px 9px;font-size:13px;text-transform:none;letter-spacing:0;
  color:var(--tx)}
dialog textarea{resize:vertical;font-family:var(--sans)}
dialog .num{max-width:120px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.row4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:620px){.row3,.row4{grid-template-columns:1fr 1fr}}
.assign{border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-top:12px}
.assign legend{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--mute);
  padding:0 5px}
.assign-list{display:flex;flex-wrap:wrap;gap:5px}
.assign-list label{flex-direction:row;align-items:center;gap:5px;margin:0;
  text-transform:none;letter-spacing:0;font-size:12px;color:var(--tx);
  border:1px solid var(--line);border-radius:999px;padding:3px 9px;cursor:pointer}
.assign-list label.on{border-color:var(--accent);background:#eaf2ff}
.dlg-btns{display:flex;gap:8px;align-items:center;margin-top:16px}
.len{font-family:var(--mono);font-size:13px;padding:6px 0;color:var(--dim)}
.muted{color:var(--dim);font-size:12px;margin-top:8px}

/* ── Тост ── */
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,14px);opacity:0;
  background:#1b1f27;color:#fff;padding:9px 15px;border-radius:9px;font-size:13px;
  max-width:min(560px,92vw);pointer-events:none;transition:.25s;z-index:60}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.bad{background:#8f2020}
.toast.good{background:#18603a}