/* Модуль «Графики стройки»: стили раздела, перенесённые из public/styles.css
   как были (24 сентября 2026). Подключаются отдельной ссылкой и только у
   включённого модуля. Кегль, отступы и цвета — токенами портала из :root:
   так раздел верно выглядит в любой теме. Общее для диаграммы (строки,
   подписи полос, выходные) — в стилях портала, раздел «Диаграмма». */

/* ── Стройка: графики подрядчиков ─────────────────────────────────────────

   Раздел живёт по тем же правилам, что и остальные: карточки в общей сетке,
   диаграмма во всю ширину, панель этапа под ней. Своих красок здесь нет —
   всё на тех же токенах, что и везде. */

.buildcard {
  display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start;
  /* Кнопка приносит свои поля браузера (1px 6px) — текст лип к рамке */
  padding: var(--s-4);
  text-align: left; font: inherit; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface);
}
.buildcard:hover { border-color: var(--border-strong); }
.buildcard__title { font-size: var(--t-md); }
.buildcard__tags { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; }
/* Проекты на карточке — одним рядом, лишние за «+N» (раскладывает
   `рядПроектов` в client.js). Ряд один, чтобы карточки в сетке оставались
   одной высоты. */
.buildtags {
  display: flex; flex-wrap: nowrap; gap: var(--s-1); align-items: center;
  width: 100%; min-width: 0; overflow: hidden;
}
/* Ряд в одну строку не должен распирать карточку: без этого ячейка сетки
   брала ширину всех плашек подряд, и на телефоне страница уезжала вбок */
.buildcard { min-width: 0; }
.buildtags > .ktag { flex: none; }
.buildtags > [hidden] { display: none; }
/* Осталась одна плашка — она ужимается многоточием, а не вылезает за край */
.buildtags.is-squeezed > .ktag--project { flex: 0 1 auto; min-width: 0; max-width: none; }
.ktag--more { background: var(--surface-2); color: var(--text-dim); font-weight: 600; }

/* Проекты в окне «завести график»: их бывает три, а бывает тридцать,
   и список должен переноситься, а не растягивать окно. */
.buildpicks {
  display: flex; flex-wrap: wrap; gap: var(--s-1);
  margin-top: var(--s-2); max-height: 220px; overflow: auto;
}
.buildpicks .chip { cursor: pointer; border: 1px solid var(--border); background: none; font: inherit; }
.buildpicks .chip.is-active {
  background: var(--accent-soft); color: var(--accent); border-color: var(--accent);
}

.buildlist__lead { margin: 0 0 var(--s-4); }

/* Страница графика — во всю высоту полотна, а диаграмма забирает всё, что
   осталось под шапкой и панелью. Раньше высота была числом от окна
   (58vh, не больше 720): на большом мониторе под диаграммой оставалась
   пустая треть экрана, а строки при этом прокручивались внутри неё. Теперь
   край диаграммы — край полотна, и прокрутка у страницы одна — внутри
   диаграммы. */
.page--build {
  height: 100%; display: flex; flex-direction: column; min-height: 0;
  padding-bottom: var(--s-4);
}
.page--build > .page__head, .page--build > .buildbar { flex: none; }

/* Заголовок графика — как у прочих экранов: «‹» к списку, название, метки
   проектов рядом, справа настройки. */
.buildhead { row-gap: var(--s-1); }
.buildhead__title { overflow-wrap: anywhere; }

/* Панель над диаграммой — группами. Группа переносится целиком, а не по
   кнопке: «+ Этап» без «+ Работа» на другой строке читался бы отдельным
   действием. Выгрузка и ссылки прижаты вправо своим полем, а не распоркой —
   при переносе распорка съедала остаток строки, и группа начинала новую
   строку от левого края. */
.buildbar {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.buildbar__grp { display: flex; align-items: center; gap: var(--s-1); flex: none; }
.buildbar__out { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-left: auto; }
.buildbar__sep { width: 1px; height: var(--s-5); background: var(--border); flex: none; }
.buildbar .seg button { height: 26px; }
.buildbar__short { display: none; }

/* Диаграмма занимает то, что осталось от полотна (см. .page--build). */
.gantt-host {
  flex: 1 1 auto; min-height: 320px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--surface);
}

@media (max-width: 760px) {
  /* На телефоне страница листается целиком, у полотна нет своей высоты —
     диаграмма берёт высоту экрана без шапки и нижней полосы разделов,
     чтобы, долистав до неё, человек видел её всю. */
  /* Низ — под полосу разделов, как у всякой страницы. Своё `padding-bottom`
     выше стоит позже общего телефонного правила `.page` и перебивало его:
     нижние шестьдесят точек диаграммы вместе с полосой прокрутки уходили
     под полосу разделов, и последние работы было не достать. */
  .page--build {
    height: auto; display: block;
    padding-bottom: calc(var(--nav-h, 82px) + var(--s-4) + env(safe-area-inset-bottom));
  }
  .gantt-host { height: calc(100dvh - 50px - var(--nav-h, 0px) - var(--s-4)); }
  .buildbar__sep { display: none; }
  .buildbar .seg button { height: 34px; }
  .buildbar__out { margin-left: 0; }
  .buildbar__long { display: none; }
  .buildbar__short { display: inline; }
}

/* Панель правки плавает поверх страницы, а не лежит под диаграммой.

   Под диаграммой она и оказывалась — и не работала: диаграмма занимает
   больше половины экрана, панель уезжала за нижний край, и человек, выбравший
   строку, не видел, что вообще что-то открылось. Выбрать соседнюю строку при
   этом — движение в один щелчок, и было непонятно, что правишь.

   Поэтому она прибита к правому краю окна и всегда на виду, а в заголовке
   у неё стоит имя строки. Диаграмму она перекрывает, но не ту её часть, где
   имена: колонка со строками слева. */
.buildpane {
  position: fixed; right: var(--s-4); top: 76px; bottom: var(--s-4); z-index: 40;
  width: min(380px, calc(100vw - var(--s-4) * 2));
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-4); overflow: auto;
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: var(--raised); box-shadow: 0 18px 48px rgb(0 0 0 / .28);
}
.buildpane__head { display: flex; align-items: center; gap: var(--s-2); flex: none; }
.buildpane__kind {
  flex: none; font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-faint);
}
/* Имя забирает всю середину заголовка: крестик закрытия стоит у правого
   края, а не прилипает к концу короткого имени */
.buildpane__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buildpane__by { font-size: var(--t-sm); color: var(--text-faint); min-width: 0; }
.buildpane__grid { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
.buildpane__f { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
/* Подпись поля — как в формах портала (.field__label): 500, тише текста.
   Раньше здесь стоял жирный .note — подписи читались громче значений. */
.buildpane__label { font-size: var(--t-sm); font-weight: 500; color: var(--text-dim); }
.buildpane__labelrow { display: flex; justify-content: space-between; gap: var(--s-2); }
.buildpane__hint { font-size: var(--t-xs); color: var(--text-faint); }
.buildpane__pct { font-family: var(--mono); font-size: var(--t-mono); color: var(--text); }
.buildpane__range { width: 100%; accent-color: var(--accent); }
/* Начало и окончание — рядом: это одна мысль «с … по …», и столбиком
   она растягивала панель на экран. На узкой панели встают друг под друга. */
.buildpane__row {
  display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  /* Поля — по нижнему краю: подпись «Закончили на самом деле» переносится
     на две строки, и без этого соседние поля стояли лесенкой */
  align-items: end;
}
.buildpane .input { width: 100%; min-width: 0; box-sizing: border-box; }

/* Связи строки списком: имя соседа нажимается и ведёт к нему */
.buildlinks__group { display: flex; flex-direction: column; gap: var(--s-05); }
.buildlinks__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.buildlinks__item { display: flex; align-items: center; gap: var(--s-1); min-width: 0; }
.buildlinks__name {
  flex: 1; min-width: 0; text-align: left; border: none; background: none; cursor: pointer;
  padding: var(--s-1) 0; font: inherit; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.buildlinks__name:hover { color: var(--accent); }

/* Окно настроек графика */
.buildset__check { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4); cursor: pointer; }
.buildset__row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-1); }
.buildset__danger { border-top: 1px solid var(--border); padding-top: var(--s-3); }

/* На телефоне правый край — это весь экран, поэтому панель ложится снизу
   листом: график остаётся виден сверху, а правка под пальцем. */
@media (max-width: 760px) {
  .buildpane {
    top: auto; left: var(--s-2); right: var(--s-2); bottom: var(--s-2);
    width: auto; max-height: 62vh;
  }
}


.buildpane__acts { display: flex; flex-wrap: wrap; gap: var(--s-1); flex: none; }
.buildpane__foot { display: flex; align-items: center; gap: var(--s-2); flex: none; }

/* «Начали сегодня» и «Закончили сегодня» — крупные, первыми под именем:
   это главное, что бригадир делает с телефона. Уже отмеченное стоит на том
   же месте тихой плашкой с датой — кнопка не пропадает бесследно, и видно,
   что отметка легла. */
.buildpane__factbtns {
  display: grid; gap: var(--s-2); flex: none;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
/* Поля у кнопки уже обычных крупных: на телефоне две кнопки делят лист
   пополам, и «Закончили сегодня» с полями в двадцать точек вылезало
   за свою половину */
.buildpane__factbtns .btn {
  width: 100%; justify-content: center; padding: 0 var(--s-2); font-size: var(--t-base);
}
.buildpane__factdone {
  display: flex; align-items: center; justify-content: center; min-height: var(--s-7);
  padding: 0 var(--s-3); border-radius: var(--radius);
  background: var(--ok-soft); color: var(--ok); font-weight: 500;
}

/* ── Список работ по датам ────────────────────────────────────────────────
   Второй вид графика, для телефона — и для всякого, кто выбрал его
   переключателем. В списке масштабу и «Сегодня» двигать нечего, а строки
   заводят кнопкой внизу, под пальцем. */
.page--build.is-list .buildbar__add,
.page--build.is-list .buildbar__chartonly { display: none; }

/* На компьютере список забирает остаток полотна, как и диаграмма, и
   листается внутри себя. Ширина ограничена: строка в полторы тысячи точек
   читается как таблица без столбцов, а справа ложится панель строки —
   её место и остаётся свободным. */
.buildlist {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  display: flex; flex-direction: column; gap: var(--s-3);
}
.buildlist > * { width: 100%; max-width: 720px; }

.buildgrp__head {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) 0; cursor: pointer; list-style: none;
  font-size: var(--t-base); font-weight: 600;
}
.buildgrp__head::-webkit-details-marker { display: none; }
/* Уголок — рисованный рамкой, а не знаком из шрифта: в подмножествах Onest
   стрелок нет, и браузер подставил бы чужой набор */
.buildgrp__head::before {
  content: ''; flex: none; width: var(--s-2); height: var(--s-2);
  border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint);
  transform: rotate(-45deg); transition: transform .15s;
}
/* Раскрытый уголок смотрит вниз и без подъёма садится ниже строки текста */
.buildgrp[open] > .buildgrp__head::before { transform: translateY(-2px) rotate(45deg); }
.buildgrp__count { font-family: var(--mono); font-size: var(--t-mono); font-weight: 400; color: var(--text-faint); }
/* Просроченное — цветом просрочки темы, у заголовка и полоской у строк:
   ради него бригадир и звонит в бюро */

.buildrows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.buildrow {
  position: relative; overflow: hidden;
  width: 100%; display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3); text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.buildrow:hover { border-color: var(--border-strong); }
.buildrow.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.buildrow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
/* Название — в две строки, как в диаграмме: работы на стройке длинные,
   и по первой половине «Устройство гидроизоляции…» работу не узнать */
.buildrow__name {
  font-size: var(--t-base); font-weight: 500; line-height: 1.3; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.buildrow__diamond { color: var(--accent); margin-right: var(--s-1); font-size: var(--t-xs); }
.buildrow__meta {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-2); row-gap: var(--s-05);
  min-width: 0; font-size: var(--t-sm); color: var(--text-dim);
}
.buildrow__dates { color: var(--text); font-variant-numeric: tabular-nums; }
.buildrow__stage { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buildrow__after { min-width: 0; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buildrow__side {
  flex: none; max-width: 40%; display: flex; flex-direction: column; align-items: flex-end;
  gap: var(--s-05); font-size: var(--t-xs); text-align: right; color: var(--text-dim);
}
.buildrow__fact.is-done { color: var(--ok); }
.buildrow__pct { font-family: var(--mono); font-size: var(--t-mono); color: var(--text); }
/* Готовность — волосом по низу строки: процент справа говорит число,
   полоска — сколько осталось, не читая */
.buildrow__bar {
  position: absolute; left: 0; bottom: 0; height: var(--s-05); width: var(--p, 0);
  background: var(--accent);
}
.buildgrp--done .buildrow__name { color: var(--text-dim); }

.buildlist__add {
  position: sticky; bottom: 0; margin-top: auto;
  display: flex; gap: var(--s-2); padding: var(--s-3) 0;
  background: var(--surface);
}
.buildlist__addmain { flex: 1; }

@media (max-width: 760px) {
  /* На телефоне страница листается целиком — список своей прокрутки
     не держит, иначе прокрутка внутри прокрутки */
  .buildlist { overflow: visible; }
  .buildlist__add .btn { height: var(--s-7); font-size: var(--t-md); }
  /* Кнопка «+ Работа» стоит над полосой разделов, а у гостя полосы нет */
  .buildlist__add { bottom: calc(var(--nav-h, 82px) + env(safe-area-inset-bottom)); }
  .page--guest .buildlist__add { bottom: env(safe-area-inset-bottom); }
  .page--build.page--guest { padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom)); }
}