:root {
  --navy: #12305e;
  --navy-dark: #0d2549;
  --ink: #1c2b3a;
  --muted: #6b7a8c;
  --line: #dfe5ec;
  --bg: #f4f6f9;
  --card: #ffffff;
  --blue: #1a4fa0;
  --red: #d4342c;
  --green: #1e8e4a;
  --orange: #e08a1e;
  --rule-2: #eef2f6;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.layout { display: grid; grid-template-columns: 148px 1fr; min-height: 100vh; }

/* ------------------------------------------------------------- навигация -- */
.nav { background: var(--navy); color: #fff; padding: 22px 0 18px; display: flex; flex-direction: column; }
.nav .brand { font-size: 24px; font-weight: 700; letter-spacing: 1px; padding: 0 18px 26px; }
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 11px 18px;
  color: #c6d4e8; text-decoration: none; font-size: 14px; cursor: default;
}
.nav a.active { background: #1f4a86; color: #fff; font-weight: 600; }
.nav a .ico { width: 16px; height: 16px; opacity: .85; }
.nav .foot { margin-top: auto; padding: 0 18px; font-size: 11px; line-height: 1.5; color: #91a6c4; }

/* ------------------------------------------------------------------ шапка -- */
.main { padding: 20px 24px 40px; }
.head { display: flex; align-items: flex-start; justify-content: space-between; }
.head h1 { margin: 0; font-size: 27px; letter-spacing: -.2px; }
.head .sub { margin-top: 5px; color: var(--muted); font-size: 12.5px; }
.head .sub .sep { margin: 0 10px; color: var(--line); }
.head .clock { text-align: right; color: var(--muted); font-size: 13px; }

/* -------------------------------------------------------------------- KPI -- */
.kpi {
  margin: 16px 0 14px; background: var(--card); border: 1px solid var(--line); border-radius: 6px;
  display: grid; grid-template-columns: repeat(5, 1fr);
}
.kpi div { padding: 12px 18px 14px; text-align: center; border-left: 1px solid var(--line); }
.kpi div:first-child { border-left: 0; }
.kpi .label { color: var(--muted); font-size: 12.5px; }
.kpi .value { font-size: 30px; font-weight: 600; margin-top: 2px; letter-spacing: -.5px; }
.kpi .value .unit { font-size: 14px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.kpi .green { color: var(--green); }
.kpi .red { color: var(--red); }

/* ------------------------------------------------------------------ сетка -- */
.grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 6px; }

/* ---------------------------------------------------------------- таблица -- */
table.projects { width: 100%; border-collapse: collapse; }
table.projects th {
  text-align: left; font-weight: 500; color: var(--muted); font-size: 12.5px;
  padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: bottom;
}
table.projects td { padding: 12px; border-bottom: 1px solid #eef2f6; vertical-align: top; }
table.projects tr:last-child td { border-bottom: 0; }
table.projects tr.row { cursor: pointer; }
table.projects tr.row:hover { background: #f8fafc; }
table.projects tr.row.selected { background: #f2f6fc; box-shadow: inset 3px 0 0 var(--navy); }
.pname { color: var(--blue); font-weight: 600; }
.stage { font-size: 13px; }
.progress { height: 5px; background: #e7ecf2; border-radius: 3px; margin-top: 6px; width: 110px; }
.progress i { display: block; height: 5px; border-radius: 3px; background: var(--green); }
.num { white-space: nowrap; }
.dev-late { color: var(--red); font-weight: 600; }
.dev-soon { color: var(--orange); font-weight: 600; }
.dev-ok { color: var(--green); font-weight: 600; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.dot.Высокий { background: var(--red); }
.dot.Средний { background: var(--orange); }
.dot.Низкий { background: var(--green); }
.delta { color: var(--muted); font-size: 12.5px; }
.delta.over { color: var(--red); }

/* --------------------------------------------------------------- разбор ---- */
.detail { margin-top: 16px; padding: 16px 18px 18px; }
.detail h2 { margin: 0; font-size: 17px; color: var(--blue); display: inline-block; }
.detail .risknote { color: var(--red); font-weight: 600; margin-left: 16px; font-size: 13.5px; }
.steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; margin-top: 16px; }
.step { border: 1px solid var(--line); border-radius: 5px; padding: 9px 11px; background: #fcfdfe; }
.step.current { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy) inset; background: #fff; }
.step .title { font-size: 13px; font-weight: 600; margin-bottom: 7px; min-height: 34px; }
.step .kv { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.step .kv b { font-weight: 500; color: var(--ink); }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center; margin: 14px 0 2px; }
.rail .node { display: flex; align-items: center; }
.rail .bullet {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); background: #fff;
  color: var(--muted); font-size: 12px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.rail .bullet.done { background: var(--green); border-color: var(--green); color: #fff; }
.rail .bullet.current { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.rail .line { height: 2px; background: var(--line); flex: 1; }
.rail .line.done { background: var(--green); }

.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.chart { border: 1px solid var(--line); border-radius: 5px; padding: 12px 14px 8px; }
.chart h3 { margin: 0 0 4px; font-size: 13.5px; font-weight: 600; }
.chart .cap { color: var(--muted); font-size: 12px; }
.chart .cap b { color: var(--ink); }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--muted); padding: 4px 2px 2px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }

/* ------------------------------------------------------------- решения ----- */
.rail-title { padding: 13px 15px 10px; font-weight: 600; font-size: 14.5px; border-bottom: 1px solid var(--line); }
.dec { padding: 13px 15px; border-bottom: 1px solid var(--line); }
.dec:last-child { border-bottom: 0; }
.dec .top { display: flex; gap: 9px; align-items: baseline; }
.dec .rank {
  width: 19px; height: 19px; border-radius: 50%; background: var(--red); color: #fff;
  font-size: 12px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.dec .proj { color: var(--blue); font-weight: 600; font-size: 13.5px; }
.dec .title { margin: 5px 0 6px; font-size: 13.5px; }
.dec .meta { font-size: 12px; color: var(--muted); }
.dec .sect { margin-top: 9px; font-size: 12.5px; color: var(--blue); font-weight: 600; }
.dec ul { margin: 4px 0 0; padding-left: 16px; font-size: 12.5px; color: var(--ink); }
.dec ul li { margin-bottom: 3px; }
.btn {
  display: block; width: 100%; margin-top: 9px; padding: 8px 10px; border-radius: 4px;
  font-size: 13.5px; cursor: pointer; border: 1px solid var(--navy); font-family: inherit;
}
.btn.primary { background: var(--navy); color: #fff; }
.btn.ghost { background: #fff; color: var(--navy); }
.notice {
  margin: 10px 15px 14px; padding: 9px 11px; border: 1px solid #e6dcc0; background: #fdf8ec;
  border-radius: 4px; font-size: 12px; color: #7a6633;
}
.hint { padding: 10px 15px 14px; font-size: 11.5px; color: var(--muted); }

.src {
  display: inline-block; margin-top: 4px; padding: 1px 6px; border-radius: 3px;
  font-size: 10.5px; letter-spacing: .2px;
}
.src.unf { background: #e8f1e9; color: #1e6b3a; }
.src.b24 { background: #e8eef8; color: #24558f; }

.docs { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.docs h3 { margin: 0 0 8px; font-size: 13.5px; font-weight: 600; }
.docs .cnt { color: var(--muted); font-weight: 400; }
.doclist { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 22px; }
.doclist li { break-inside: avoid; padding: 5px 0 5px 10px; border-left: 2px solid var(--line); margin-bottom: 4px; }
.doclist li.est { border-left-color: var(--orange); background: #fdf8ec; }
.doclist .fn { display: block; font-size: 12.5px; }
.doclist .fm { display: block; font-size: 11.5px; color: var(--muted); }
.doclist .kind {
  display: inline-block; padding: 0 5px; border-radius: 3px; background: #eef2f7;
  color: var(--navy); font-size: 10.5px; font-weight: 600; vertical-align: 1px;
}
.doclist li.est .kind { background: var(--orange); color: #fff; }

.nav a[data-view] { cursor: pointer; }
.nav a[data-view]:hover { background: #1a3f74; color: #fff; }
.card.pad { padding: 0 0 4px; margin-bottom: 14px; }
.card.pad .vh { margin: 0; padding: 12px 14px 10px; font-size: 15px; border-bottom: 1px solid var(--line); }
.card.pad .hint { padding: 8px 14px 2px; }
.card.pad table.projects th { padding-top: 9px; }
#view-other a { color: var(--blue); }


/* Список проектов сверху, разбор выбранного сразу под ним — оба на первом
   экране. Таблица прокручивается внутри себя, шапка остаётся на месте. */
.projects-box { max-height: 40vh; overflow: auto; }
.projects-box table.projects thead th {
  position: sticky; top: 0; background: var(--card); z-index: 2;
  box-shadow: inset 0 -1px 0 var(--line);
}
.detail { margin-top: 14px; }
.grid > aside { position: sticky; top: 14px; max-height: calc(100vh - 30px); overflow: auto; }

/* Разбор проекта: текущая работа, а не история. Историю видно в Битриксе. */
.workhead { display: flex; justify-content: space-between; align-items: baseline;
            margin: 12px 0 4px; font-size: 13px; gap: 16px; flex-wrap: wrap; }
table.work { width: 100%; }
table.work td { padding: 7px 12px; }
table.work tr.late td { background: #fdf6f5; }
.main { overflow-x: hidden; }

/* ============================================================
   Плотная раскладка: показатели вдвое ниже, строка проекта в
   одну линию. Задача таблицы — окинуть взглядом все проекты
   разом и увидеть, какие требуют внимания, поэтому строки
   одинаковой высоты, длинный текст обрезается многоточием,
   а полное название показывает подсказка.
   ============================================================ */
.kpi { grid-template-columns: repeat(6, 1fr); }
.kpi div { padding: 8px 14px 9px; text-align: left; }
.kpi .label { font-size: 11px; letter-spacing: .02em; }
.kpi .value { font-size: 21px; margin-top: 0; line-height: 1.25; }
.kpi .value .unit { font-size: 11.5px; margin-left: 3px; }
.kpi .orange { color: var(--orange); }

table.projects th { padding: 7px 10px; font-size: 11.5px; white-space: nowrap; }
table.projects th.num, table.projects td.num { text-align: right; }
table.projects td {
  padding: 6px 10px; height: 34px; font-size: 13px; vertical-align: middle;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
table.projects tr.row td { border-bottom: 1px solid var(--rule-2, #eef2f6); }
.cell-name { max-width: 260px; }
.cell-act  { max-width: 300px; }
.cell-own  { max-width: 150px; }
.cell-name .pname { font-weight: 600; color: var(--blue); }
.cell-name .pcode {
  margin-left: 7px; font-size: 10.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
table.projects td.stage { color: var(--muted); font-weight: 600; }
table.projects td.risk { white-space: nowrap; }
table.projects td.num { font-variant-numeric: tabular-nums; }
/* Семь строк и шапка. Вся таблица всё равно не поместится, поэтому лучше
   отдать высоту разбору проекта, который под ней. Высота задана в пикселях,
   а не в долях экрана: так число видимых строк не пляшет от монитора. */
.projects-box { max-height: calc(34px * 7 + 31px); }


/* Таблица текущих дел выравнивается по левому и правому краю текста карточки:
   крайние ячейки без внешних отступов, иначе она визуально уезжает влево
   относительно заголовка проекта и строки этапа. */
table.work { width: 100%; table-layout: fixed; margin-top: 10px; }
table.work th, table.work td { padding: 7px 12px; }
table.work th:first-child, table.work td:first-child { padding-left: 0; }
table.work th:last-child,  table.work td:last-child  { padding-right: 0; }
table.work col.c-state { width: 104px; }
table.work col.c-owner { width: 170px; }
table.work col.c-date  { width: 96px; }
table.work col.c-dev   { width: 104px; }
table.work td.task { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.4; }
table.work th.num, table.work td.num { text-align: right; }
table.work td { height: auto; }


/* --- таблицы на вкладках --------------------------------------------------
   Здесь строки не сканируют глазом, а читают: текст переносится, ширины
   раздаются поровну, а не по содержимому, и ничего не уезжает за правый край. */
#view-other .card.pad { overflow-x: auto; }
#view-other table.projects { table-layout: fixed; width: 100%; }
#view-other table.projects th,
#view-other table.projects td {
  white-space: normal; overflow: hidden; text-overflow: clip;
  height: auto; line-height: 1.4; padding: 8px 12px; vertical-align: top;
}
#view-other table.projects th:first-child,
#view-other table.projects td:first-child { padding-left: 14px; }
#view-other table.projects th:last-child,
#view-other table.projects td:last-child { padding-right: 14px; }
#view-other table.projects td.num { white-space: nowrap; }

/* Боковое меню не должно терять фон на длинных страницах. */
.nav { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.nav .foot { padding-top: 18px; }


/* Карточки графиков не тянутся друг под друга: пустой блок больше не
   растягивается под высоту соседнего. Если рисовать нечего — строка, а не
   пустая карточка в полный рост. */
.charts { align-items: start; }
.chart { padding: 10px 12px 6px; }
.chart h3 { font-size: 13px; margin-bottom: 2px; }
.chart .cap { font-size: 11.5px; }
.nodata {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px;
  padding: 9px 12px; border: 1px dashed var(--line); border-radius: 4px;
  color: var(--muted); font-size: 12.5px; background: #fbfcfd;
}


/* Колонка кода — по ширине «ЗАНФ-260108»: четыре заглавные, тире, шесть цифр.
   Освободившееся место забирает название проекта. */
#view-other table.projects th:first-child,
#view-other table.projects td:first-child { width: 112px; }
#view-other table.projects td:nth-child(2) { width: 26%; }
.code {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 12px; letter-spacing: -.2px; white-space: nowrap; color: var(--ink);
}


/* Вкладка «Проекты»: числовые колонки ужаты до ширины своих значений и
   прижаты вправо, «Состояние» и «Заказчик» заданы явно. Всё, что осталось,
   забирает название проекта — там больше всего текста. */
.t-projects table.projects { table-layout: fixed; }
.t-projects th:nth-child(1), .t-projects td:nth-child(1) { width: 112px; }
.t-projects th:nth-child(2), .t-projects td:nth-child(2) { width: auto; }
.t-projects th:nth-child(3), .t-projects td:nth-child(3) { width: 186px; }
.t-projects th:nth-child(4), .t-projects td:nth-child(4) { width: 88px; }
.t-projects th:nth-child(5), .t-projects td:nth-child(5) { width: 96px; }
.t-projects th:nth-child(6), .t-projects td:nth-child(6) { width: 118px; }
.t-projects th:nth-child(7), .t-projects td:nth-child(7) { width: 96px; }
.t-projects th:nth-child(8), .t-projects td:nth-child(8) { width: 84px; }
.t-projects th:nth-child(n+5), .t-projects td:nth-child(n+5) {
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.t-projects td:nth-child(n+5) { padding-left: 6px; }


/* Вкладка «Сроки». Та же логика, что и в проектах: короткие значения
   получают ровно свою ширину, длинный текст — всё остальное. */
.t-overdue table.projects, .t-forgotten table.projects { table-layout: fixed; }

.t-overdue th:nth-child(1), .t-overdue td:nth-child(1) { width: 21%; }
.t-overdue th:nth-child(2), .t-overdue td:nth-child(2) { width: 168px; }
.t-overdue th:nth-child(3), .t-overdue td:nth-child(3) { width: auto; }
.t-overdue th:nth-child(4), .t-overdue td:nth-child(4) { width: 156px; }
.t-overdue th:nth-child(5), .t-overdue td:nth-child(5) { width: 96px; }
.t-overdue th:nth-child(6), .t-overdue td:nth-child(6) { width: 92px; }
.t-overdue th:nth-child(7), .t-overdue td:nth-child(7) { width: 96px; }
.t-overdue th:nth-child(n+5), .t-overdue td:nth-child(n+5) {
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.t-overdue td:nth-child(7) { text-align: left; }

.t-forgotten th:nth-child(1), .t-forgotten td:nth-child(1) { width: 21%; }
.t-forgotten th:nth-child(2), .t-forgotten td:nth-child(2) { width: auto; }
.t-forgotten th:nth-child(3), .t-forgotten td:nth-child(3) { width: 156px; }
.t-forgotten th:nth-child(4), .t-forgotten td:nth-child(4) { width: 100px; }
.t-forgotten th:nth-child(5), .t-forgotten td:nth-child(5) { width: 104px; }
.t-forgotten th:nth-child(n+4), .t-forgotten td:nth-child(n+4) {
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}


/* Свободное место должно доставаться названию проекта, а не колонке
   «Действие»: тексты действий короткие и повторяются, а названия длинные. */
.t-overdue th:nth-child(1), .t-overdue td:nth-child(1) { width: auto; }
.t-overdue th:nth-child(3), .t-overdue td:nth-child(3) { width: 34%; }
.t-forgotten th:nth-child(1), .t-forgotten td:nth-child(1) { width: auto; }
.t-forgotten th:nth-child(2), .t-forgotten td:nth-child(2) { width: 44%; }


/* Ужимаем колонки до ширины их самых длинных значений: «08. РЕАЛИЗАЦИЯ РАБОТ»,
   «Виталий Чередниченко», «21.08.2026», «+112 дн.». Всё, что высвободилось,
   уходит названию проекта. */
.t-overdue th:nth-child(2), .t-overdue td:nth-child(2) { width: 150px; }
.t-overdue th:nth-child(3), .t-overdue td:nth-child(3) { width: 30%; }
.t-overdue th:nth-child(4), .t-overdue td:nth-child(4) { width: 140px; }
.t-overdue th:nth-child(5), .t-overdue td:nth-child(5) { width: 86px; }
.t-overdue th:nth-child(6), .t-overdue td:nth-child(6) { width: 78px; }
.t-overdue th:nth-child(7), .t-overdue td:nth-child(7) { width: 86px; }
.t-overdue th, .t-overdue td { padding-left: 8px; padding-right: 8px; }

.t-forgotten th:nth-child(2), .t-forgotten td:nth-child(2) { width: 38%; }
.t-forgotten th:nth-child(3), .t-forgotten td:nth-child(3) { width: 150px; }
.t-forgotten th:nth-child(4), .t-forgotten td:nth-child(4) { width: 92px; }
.t-forgotten th:nth-child(5), .t-forgotten td:nth-child(5) { width: 92px; }
.t-forgotten th, .t-forgotten td { padding-left: 8px; padding-right: 8px; }


/* Ширина по содержимому вместо подбора пикселей: колонка с width:1% и запретом
   переноса сжимается ровно до своего текста, колонка с width:100% забирает
   весь остаток. Раскладка auto — иначе браузер игнорирует содержимое. */
.t-overdue table.projects, .t-forgotten table.projects { table-layout: auto; }

.t-overdue th:nth-child(1), .t-overdue td:nth-child(1) { width: 100%; }
.t-overdue th:nth-child(2), .t-overdue td:nth-child(2),
.t-overdue th:nth-child(4), .t-overdue td:nth-child(4),
.t-overdue th:nth-child(5), .t-overdue td:nth-child(5),
.t-overdue th:nth-child(6), .t-overdue td:nth-child(6),
.t-overdue th:nth-child(7), .t-overdue td:nth-child(7) { width: 1%; white-space: nowrap; }
.t-overdue th:nth-child(3), .t-overdue td:nth-child(3) { width: 30%; white-space: normal; }

.t-forgotten th:nth-child(1), .t-forgotten td:nth-child(1) { width: 100%; }
.t-forgotten th:nth-child(3), .t-forgotten td:nth-child(3),
.t-forgotten th:nth-child(4), .t-forgotten td:nth-child(4),
.t-forgotten th:nth-child(5), .t-forgotten td:nth-child(5) { width: 1%; white-space: nowrap; }
.t-forgotten th:nth-child(2), .t-forgotten td:nth-child(2) { width: 34%; white-space: normal; }


/* Проект — 60 % ширины, действие — 20 %, остальные пять сжимаются по своему
   содержимому. Задать всем процент нельзя: 60 + 30 + 15×5 = 165 %, браузер
   такую сумму нормализует и сжимает как раз то, что мы расширяли. */
.t-overdue th:nth-child(1), .t-overdue td:nth-child(1) { width: 60%; }
.t-overdue th:nth-child(3), .t-overdue td:nth-child(3) { width: 20%; }
.t-forgotten th:nth-child(1), .t-forgotten td:nth-child(1) { width: 60%; }
.t-forgotten th:nth-child(2), .t-forgotten td:nth-child(2) { width: 24%; }


/* Жёсткие проценты по каждой колонке, сумма ровно 100.
   Раскладка fixed — только она соблюдает заданные доли буквально;
   при auto браузер всё равно подгонял бы ширины под содержимое. */
.t-overdue table.projects { table-layout: fixed; }
.t-overdue th:nth-child(1), .t-overdue td:nth-child(1) { width: 44%; white-space: normal; }
.t-overdue th:nth-child(2), .t-overdue td:nth-child(2) { width: 12%; white-space: normal; }
.t-overdue th:nth-child(3), .t-overdue td:nth-child(3) { width: 22%; white-space: normal; }
.t-overdue th:nth-child(4), .t-overdue td:nth-child(4) { width: 12%; white-space: normal; }
.t-overdue th:nth-child(5), .t-overdue td:nth-child(5) { width: 4%;  white-space: nowrap; }
.t-overdue th:nth-child(6), .t-overdue td:nth-child(6) { width: 3%;  white-space: nowrap; }
.t-overdue th:nth-child(7), .t-overdue td:nth-child(7) { width: 3%;  white-space: nowrap; }

/* «Забытые дела»: те же доли, колонок пять — проект 44, дело 34,
   ответственный 12, срок 5, дней 5. */
.t-forgotten table.projects { table-layout: fixed; }
.t-forgotten th:nth-child(1), .t-forgotten td:nth-child(1) { width: 44%; white-space: normal; }
.t-forgotten th:nth-child(2), .t-forgotten td:nth-child(2) { width: 34%; white-space: normal; }
.t-forgotten th:nth-child(3), .t-forgotten td:nth-child(3) { width: 12%; white-space: normal; }
.t-forgotten th:nth-child(4), .t-forgotten td:nth-child(4) { width: 5%;  white-space: nowrap; }
.t-forgotten th:nth-child(5), .t-forgotten td:nth-child(5) { width: 5%;  white-space: nowrap; }


/* Просроченные действия: проект 35, действие 22, этап 12, ответственный 12 —
   вместе 81. Остаток 19 делится поровну между сроком, просрочкой и риском. */
.t-overdue th:nth-child(1), .t-overdue td:nth-child(1) { width: 35%; }
.t-overdue th:nth-child(5), .t-overdue td:nth-child(5) { width: 6.34%; }
.t-overdue th:nth-child(6), .t-overdue td:nth-child(6) { width: 6.33%; }
.t-overdue th:nth-child(7), .t-overdue td:nth-child(7) { width: 6.33%; }


/* Строки на вкладках, ведущие в проект, ведут себя как ссылки. */
#view-other tr.row { cursor: pointer; }
#view-other tr.row:hover { background: #f5f8fb; }
#view-other tr.row:hover .pname { text-decoration: underline; }

/* Пометки «стоит проверить» — не ошибки, поэтому спокойный янтарный,
   а не красный, который в пульте занят риском. */
.flag {
  display: inline-block; margin: 3px 4px 0 0; padding: 1px 6px; border-radius: 2px;
  background: #fdf3e0; color: #8a5d0c; font-size: 10px; letter-spacing: .02em; cursor: help;
}
.kvrow {
  display: flex; justify-content: space-between; gap: 16px; padding: 5px 0;
  border-bottom: 1px solid var(--rule-2); font-size: 13.5px;
}
.kvrow:last-child { border-bottom: 0; }
.kvrow b { font-variant-numeric: tabular-nums; }
.chart .cnt { color: var(--muted); font-weight: 400; font-size: 12px; }

/* --- закупки у поставщиков: таблица заказов в карточке проекта --- */
.purch { table-layout: fixed; width: 100%; }
.purch th { font-weight: 600; color: #6b7280; text-align: left; padding-bottom: 4px; }
.purch th.num, .purch td.num { text-align: right; }
.purch td.task { width: 34%; }
.purch td.ord  { width: 24%; color: #6b7280; white-space: nowrap; }
.purch td.num  { width: 14%; white-space: nowrap; }
/* Оплата есть, суммы заказа нет — строку видно, но она не в плане платежей. */
.purch tr.orphan td { color: #b45309; }
/* Валюта заказа: суммы в ней не складываются с рублёвыми. */
.purch .cur { color: #b45309; font-size: 11px; }

/* --- комплект документов: чек-лист по полям карточки сделки --- */
.kit { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 24px; }
.kitrow { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; border-bottom: 1px solid #eef1f5; font-size: 13px; }
.kitrow span:nth-child(2) { flex: 1; }
.kitrow b { font-weight: 500; white-space: nowrap; }
.kitrow .mark { width: 14px; text-align: center; }
.kitrow.ok .mark { color: #1e8e4a; }
.kitrow.no { color: #9aa3ad; }
.kitrow.no b { color: #b45309; }

/* --- пульс фоновых сервисов на вкладке «Данные» --- */
.workers { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.worker { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #e3e8ee; border-radius: 6px; background: #fff; font-size: 13px; }
.worker .dot { width: 9px; height: 9px; border-radius: 50%; background: #1e8e4a; }
.worker.bad .dot { background: #d4342c; }
.worker.bad { border-color: #f3c2bd; background: #fff7f6; }
.worker .note { color: #6b7a8c; font-size: 12px; }

/* --- вход и пользователи --- */
.nav .who { padding: 10px 16px 4px; font-size: 12px; color: #c9d3e0; line-height: 1.5; }
.nav .who .role { color: #8fa3bd; }
.nav .who a { color: #c9d3e0; text-decoration: underline; }
.userform { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.userform input, .userform select { padding: 6px 8px; border: 1px solid #cfd6df; border-radius: 4px; font-size: 13px; }
.userform button, button.mini { padding: 6px 12px; border: 0; border-radius: 4px; background: #12305e; color: #fff; font-size: 13px; cursor: pointer; }
button.mini { padding: 3px 8px; font-size: 12px; background: #6b7a8c; }
.userform .hint { flex-basis: 100%; }
.ok { color: #1e8e4a; }