/* ── Баланс имущества ─────────────────────────────────────────────
   Ведомость, а не витрина. Своих цветов и своей типографики здесь нет:
   всё берётся из variables.css, как и на остальных экранах. Новое —
   только раскладка и полоса размещения.

   Полоса — единственный графический приём на странице. Она отвечает на
   вопрос «где имущество» за секунду, тогда как колонка чисел требует
   вчитывания. Больше графики экран не получает намеренно: цветные
   индикаторы на месте фактов подменяют суждение человека своим. */

.abl-section { margin-bottom: var(--space-5); }

/* ── Итог и полоса размещения ─────────────────────────────────── */

.abl-hero {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-5) var(--space-6);
}
@media (max-width: 860px) {
  .abl-hero { grid-template-columns: 1fr; gap: var(--space-4); }
}

.abl-total {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  border-right: 1px solid var(--border-subtle);
  padding-right: var(--space-6);
}
@media (max-width: 860px) {
  .abl-total { border-right: none; padding-right: 0; }
}

.abl-total__count {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  /* Цифры в учёте сравнивают взглядом по вертикали — моноширинные
     разряды здесь не украшение, а условие читаемости. */
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.abl-total__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.abl-total__value {
  margin-top: 2px;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.abl-bar {
  display: flex;
  height: 26px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--border-subtle);
}
.abl-bar__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3px;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-bg);
  transition: filter var(--transition-fast);
}
.abl-bar__seg:hover { filter: brightness(1.08); }
.abl-bar__num { opacity: .92; }

/* Оттенки различают состояния, но не оценивают их. Единственное
   исключение — «не закреплено»: это не плохо само по себе, однако
   именно оно требует решения, поэтому выделено предупреждающим
   токеном, а не выдуманным цветом. */
.abl-bar__seg--user       { background: var(--accent-primary); }
.abl-bar__seg--room       { background: var(--accent-secondary); }
.abl-bar__seg--workplace  { background: var(--accent-hover); }
.abl-bar__seg--unit       { background: var(--text-secondary); }
.abl-bar__seg--warehouse  { background: var(--text-muted); }
.abl-bar__seg--unassigned { background: var(--status-warning); }

/* Ровные колонки, а не поток: при переносе последний элемент оставался
   висеть один во второй строке, и легенда выглядела сломанной. */
.abl-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
}
.abl-legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
}
/* Нулевые состояния остаются в легенде приглушёнными: исчезнувшая
   строка читалась бы как «такого в системе нет». */
.abl-legend__item--zero { opacity: .45; }
.abl-legend__dot {
  width: 9px; height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}
.abl-legend__dot--user       { background: var(--accent-primary); }
.abl-legend__dot--room       { background: var(--accent-secondary); }
.abl-legend__dot--workplace  { background: var(--accent-hover); }
.abl-legend__dot--unit       { background: var(--text-secondary); }
.abl-legend__dot--warehouse  { background: var(--text-muted); }
.abl-legend__dot--unassigned { background: var(--status-warning); }
.abl-legend__label { color: var(--color-text-muted); }
.abl-legend__count {
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.abl-empty {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ── Разрезы ──────────────────────────────────────────────────── */

.abl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* По верху: иначе карточка с одной строкой растягивается до высоты соседней
     и половина её оказывается пустой. */
  align-items: start;
  gap: var(--space-4);
}
@media (max-width: 900px) {
  .abl-grid { grid-template-columns: 1fr; }
}

.abl-rows { padding: 0; }

.abl-row {
  display: grid;
  grid-template-columns: 1fr auto minmax(0, 140px);
  align-items: baseline;
  gap: var(--space-3);
  padding: 9px var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}
.abl-row:last-child { border-bottom: none; }

.abl-row__label {
  font-size: var(--text-sm);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.abl-row__count {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.abl-row__value {
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  text-align: right;
}

/* Пробел — не ошибка, поэтому строка не красная. Отличается только
   числом: оно набрано тем же предупреждающим токеном, что и сегмент
   «не закреплено» на полосе, чтобы связь читалась без подписи. */
.abl-row--gap .abl-row__count { color: var(--status-warning); }

.abl-gaps-clean {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.abl-link { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .abl-bar__seg { transition: none; }
}

/* Единственное состояние размещения — строкой, без полосы. */
.abl-single {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.abl-total__unknown {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}