/* Скролл — глобальный (на body), как в остальных вкладках TMM.
   Высоту страницы НЕ ограничиваем — пусть растёт по содержимому,
   а sticky-элементы прилипают к viewport под main .header (56px). */
.capacity-page {
  display: flex; flex-direction: column; gap: 0;
  position: relative;
}
.capacity-toolbar {
  display: flex; gap: 12px; align-items: center; padding: 8px;
  border-bottom: 1px solid var(--border, #ddd);
  position: sticky;
  top: 56px;          /* под main .header */
  z-index: 12;
  background: var(--surface, #fff);
}
.capacity-wrap {
  position: relative;
}
.capacity-grid {
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid var(--border, #ddd);
  background: #fff;
}

/* ── Широкая верхняя полоса прокрутки (паттерн kanban-scroll-top из TMK) ── */
.capacity-scroll-top {
  overflow-x: auto;
  overflow-y: hidden;
  height: 22px;
  margin-top: 4px;
  margin-bottom: 4px;
  background: #fafafa;
  border: 1px solid var(--border, #ddd);
  border-radius: 4px;
  position: sticky;
  top: 108px;          /* 56 (main .header) + ~52 (capacity-toolbar) */
  z-index: 11;
}
.capacity-scroll-top__spacer { height: 1px; width: 100%; }
.capacity-scroll-top::-webkit-scrollbar { height: 22px; }
.capacity-scroll-top::-webkit-scrollbar-thumb {
  background: #888; border-radius: 10px;
  border: 4px solid #fafafa; min-width: 60px;
}
.capacity-scroll-top::-webkit-scrollbar-thumb:hover { background: #2c5282; }
.capacity-scroll-top::-webkit-scrollbar-track { background: #eee; border-radius: 10px; }
.capacity-scroll-top[hidden] { display: none; }

/* ── Боковые стрелки прокрутки ‹ › ─────────────────────────────────── */
/* arrows-host — sticky-обёртка нулевой высоты, чтобы стрелки оставались
   на месте при vertical-скролле страницы и не толкали контент. */
.capacity-arrows-host {
  position: sticky;
  top: 142px;          /* 56 + ~52 + ~30 (scroll-top) + чуть-чуть */
  z-index: 10;
  height: 0;
  pointer-events: none;
}
.capacity-scroll-btn {
  position: absolute;
  top: 8px;
  width: 32px; height: 64px;
  background: rgba(255,255,255,0.9);
  border: 1px solid #bbb;
  border-radius: 4px;
  font-size: 24px; line-height: 1;
  color: #444;
  cursor: pointer;
  opacity: 0.85;
  display: flex; align-items: center; justify-content: center;
  user-select: none;
  padding: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  pointer-events: auto;
}
.capacity-scroll-btn:hover { opacity: 1; background: #fff; color: #2c5282; }
/* 220px = ширина sticky-колонки лейблов (200px) + небольшой отступ.
   Левая стрелка должна быть НАД календарной сеткой, а не над фамилиями. */
.capacity-scroll-btn--left { left: 220px; }
.capacity-scroll-btn--right { right: 4px; }
.capacity-scroll-btn[hidden] { display: none; }
.capacity-row {
  display: grid; grid-template-columns: 200px 1fr;
  min-height: 60px; border-bottom: 1px solid var(--border, #eee);
}
.capacity-resource-label {
  padding: 8px; font-weight: 600; background: #fafafa;
  position: sticky; left: 0; z-index: 2;
  border-right: 1px solid #ddd;
}
.capacity-resource-label small { color: #777; font-weight: normal; display: block; }
.capacity-row__days { position: relative; display: grid; grid-auto-flow: column; }
.capacity-day { border-right: 1px solid #f0f0f0; height: 100%; min-height: 60px; }
.capacity-day--green  { background: rgba(0,200,0,0.10); }
.capacity-day--yellow { background: rgba(255,200,0,0.18); }
.capacity-day--red    { background: rgba(255,80,80,0.22); }
.capacity-day--weekend { background: #f3f3f3; }
.capacity-item {
  position: absolute; height: 28px; top: 14px;
  border-radius: 4px; padding: 2px 6px; color: #fff;
  cursor: grab; font-size: 12px; user-select: none; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.capacity-item--draft {
  opacity: 0.92;
  background-image: repeating-linear-gradient(45deg,
    rgba(255,255,255,0.55) 0 5px,
    rgba(0,0,0,0.18)       5px 10px);
  border: 1px dashed rgba(0,0,0,0.55);
}
.capacity-item--dragging { opacity: 0.75; cursor: grabbing; z-index: 10; }
.capacity-item__conflict::before { content: "⚠ "; }
.capacity-today {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: #d33; z-index: 1; pointer-events: none;
}
body.capacity-busy { cursor: wait; }
body.capacity-busy .capacity-item { cursor: wait; opacity: 0.6; pointer-events: none; }

/* ── Per-user lanes под каждой ролью ────────────────────────────────── */
.capacity-resource-section { border-bottom: 2px solid #ddd; }
.capacity-resource-section:last-child { border-bottom: none; }
.capacity-resource-summary { background: #f5f5f5; min-height: 38px; }
.capacity-resource-summary .capacity-resource-label { background: #ececec; }
.capacity-lane {
  display: grid; grid-template-columns: 200px 1fr;
  min-height: 36px; border-top: 1px dashed #eee;
}
.capacity-lane__label {
  padding: 6px 8px; font-size: 12px; color: #444;
  background: #fafafa; position: sticky; left: 0; z-index: 2;
  border-right: 1px solid #ddd;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.capacity-lane__days { position: relative; }
.capacity-lane--unassigned .capacity-lane__label { background: #fff5f5; color: #a00; font-weight: 600; }
/* Полоски в lanes кладутся выше — теперь видна высота 32 px и текст. */
.capacity-lane .capacity-item { height: 28px; top: 4px; font-size: 12px; }

/* ── Фильтр ролей ───────────────────────────────────────────────────── */
.capacity-roles-filter { position: relative; }
.capacity-roles-filter > summary { list-style: none; cursor: pointer; }
.capacity-roles-filter > summary::-webkit-details-marker { display: none; }
.capacity-roles-popup {
  position: absolute; top: 100%; left: 0; z-index: 50;
  background: #fff; border: 1px solid #ccc; border-radius: 4px;
  padding: 8px; min-width: 260px; max-height: 360px; overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.capacity-roles-actions { display: flex; gap: 6px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid #eee; }
.capacity-roles-item { display: flex; align-items: center; gap: 6px; padding: 3px 4px; cursor: pointer; user-select: none; }
.capacity-roles-item:hover { background: #f3f3f3; }
.capacity-roles-item__cnt { color: #888; font-size: 11px; margin-left: auto; }

/* ── Inline-легенда heatmap в шапке ─────────────────────────────────── */
.capacity-legend {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: #555;
  padding: 0 4px;
}
.capacity-legend__sw {
  display: inline-block; width: 12px; height: 12px;
  border: 1px solid #bbb; border-radius: 2px;
  vertical-align: middle; margin-right: 2px;
}
.capacity-legend__sw--green  { background: rgba(0,200,0,0.30); }
.capacity-legend__sw--yellow { background: rgba(255,200,0,0.50); }
.capacity-legend__sw--red    { background: rgba(255,80,80,0.55); }

/* ── Пресеты горизонта ──────────────────────────────────────────────── */
.capacity-horizon-presets .btn { padding: 2px 8px; }
.capacity-horizon-btn.is-active {
  background: #2c5282; color: #fff; border-color: #2c5282;
}

/* ── Спиннер на кнопке «Обновить» во время refetch ──────────────────── */
@keyframes capacitySpin { to { transform: rotate(360deg); } }
.btn.is-loading { position: relative; pointer-events: none; opacity: 0.85; }
.btn.is-loading::after {
  content: ""; display: inline-block; width: 12px; height: 12px;
  margin-left: 6px; vertical-align: middle;
  border: 2px solid rgba(0,0,0,0.2);
  border-top-color: #2c5282;
  border-radius: 50%;
  animation: capacitySpin 0.7s linear infinite;
}

/* ── h4 в подсказке ─────────────────────────────────────────────────── */
.capacity-modal h4 { margin: 14px 0 6px; font-size: 14px; color: #333; }
.capacity-modal ul { margin: 0; padding-left: 20px; }

/* ── Расширенная карточка этапа (двухколоночный layout) ─────────────── */
.capacity-modal--item-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px 24px;
}
@media (min-width: 720px) {
  .capacity-modal--item-card { grid-template-columns: 1fr 1fr; }
}
.capacity-modal--item-card .cap-card__section h4 {
  margin: 0 0 6px;
  font-size: 12px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
  border-bottom: 1px solid #eee;
  padding-bottom: 4px;
}
.capacity-modal--item-card dl { margin: 0; }
.cap-card__row {
  display: flex;
  gap: 8px;
  padding: 3px 0;
  font-size: 13px;
  align-items: baseline;
}
.cap-card__row dt {
  color: #666;
  flex: 0 0 145px;
  font-weight: 400;
}
.cap-card__row dd {
  margin: 0;
  color: #222;
  flex: 1;
  word-break: break-word;
}
.cap-card__actions {
  grid-column: 1 / -1;
  border-top: 1px solid #eee;
  padding-top: 12px;
  margin-top: 4px;
}
.cap-card__hint {
  margin: 8px 0 0;
  font-size: 11px;
  color: #777;
  line-height: 1.45;
}