/* Небольшие дополнения к общему стилю приложений Искры: сетка дня и
   выделение выбранного интервала. Отдаётся маршрутом самого приложения,
   поэтому политика содержимого остаётся строгой. */

.slot--picked {
  background: var(--accent-soft);
}

.slot--full td {
  color: var(--text-soft);
}

.field--narrow {
  max-width: 190px;
}

.slot-day {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}

.slot-day__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}

.slot-day__item:hover {
  border-color: var(--border-strong);
  background: var(--hover);
}

.slot-day__time {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.slot-day__free {
  font-size: 12.5px;
  color: var(--text-soft);
}

.slot-day__item.is-full {
  background: var(--surface-sunken);
}

.slot-day__item.is-full .slot-day__free {
  color: var(--danger);
}

/* Сводка ошибок формы: список причин отказа без собственных отступов от
   общего .status. */
.error-list {
  margin: 0;
  padding-left: 18px;
  color: inherit;
}

.error-list strong {
  font-weight: 600;
}

/* Часы, где записей больше, чем машин на линии: полоса слева отличает
   нехватку от «мест нет», где записей ровно по числу машин. */
.slot-day__item.is-shortage {
  border-color: var(--danger-border);
  background: var(--danger-soft);
}

.slot-day__item.is-shortage .slot-day__time {
  color: var(--danger);
}

.slot-day__item.is-shortage .slot-day__free {
  color: var(--danger);
  font-weight: 600;
}

/* Строка состояния «не хватает техники» и её выделенные значения. */
.status--danger {
  color: var(--danger);
  background: var(--danger-soft);
  border-left: 3px solid var(--danger);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  margin: 0;
}

/* KPI, который меняет смысл при неполном парке: акцент, пока на линии
   меньше полного парка, и красный, когда есть часы с нехваткой. */
.kpi--accent .kpi__value {
  color: var(--accent);
}

.kpi--danger .kpi__label,
.kpi--danger .kpi__value {
  color: var(--danger);
}