/* Стили консоли сети: только то, чего нет в словаре arbor-ui, и только
   на токенах словаря. Словарь не правится; недостающее — здесь, в
   продукте. Логические свойства — ради письма справа налево. */

.head__count { color: var(--ink-muted); font-weight: var(--fw-normal, 400); font-size: var(--fs-sm); margin-inline-start: var(--gap-3); }
.v-empty { color: var(--ink-faint); }
.state__hint.block { display: block; }

/* Тревога: заголовок, подробность, выход — столбцом внутри полосы состояния */
.alarm { display: grid; gap: var(--gap-2); min-inline-size: 0; }
/* C-102: значок источника данных в шапке и переключатель глубины графиков */
.src-slot { display: flex; min-inline-size: 0; }
.src-badge { display: inline-block; max-inline-size: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
@media (max-width: 640px) { .src-badge { max-inline-size: 6.5rem; } }
.mon-range { display: flex; flex-wrap: wrap; gap: var(--gap-2); margin-block-end: var(--gap-3); }
.alarm__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-4); }

/* Полоса пространства OrgId: ячейки пропорциональны диапазонам, подпись — в ячейке */
.dirstrip { display: flex; gap: var(--gap-1); margin-block-end: var(--gap-6); min-inline-size: 0; }
.dirstrip__cell {
  min-inline-size: 0; padding: var(--gap-3) var(--gap-2); text-align: center;
  font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dirstrip__cell--0 { background: var(--accent-soft); }
.dirstrip__cell--1 { background: var(--neutral-bg); }
.dirstrip__cell--2 { background: var(--surface); border-style: dashed; }

/* Заполнение: полоса и подпись рядом; слово несёт смысл, полоса — вторична */
.meter { display: grid; gap: var(--gap-2); min-inline-size: 7rem; }
.meter__text { font-size: var(--fs-xs); color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* Значение поля только для чтения в формах заявок */
.field__static { padding: var(--gap-3) 0; font-size: var(--fs-sm); color: var(--ink); overflow-wrap: anywhere; }

.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-3); margin-block-start: var(--gap-6); }
.pager__gap { color: var(--ink-faint); padding-inline: var(--gap-2); }
.field--action { align-self: end; }

/* ── Наблюдение за нодой (C-098): полоса разделов, графики, отметка пика ── */

/* Вкладка наблюдения — одна колонка не шире панели: длинные строки переносятся */
.mon { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pad-section); align-content: start; min-inline-size: 0; }
.mon > * { min-inline-size: 0; }
.mon .state-bar + .state-bar { margin-block-start: 0; }
.mon .module-line { overflow-wrap: anywhere; }

/* Разделы диска полосой:ширина — доля LBA, узкие — не уже подписи */
.partstrip { display: flex; gap: 2px; min-inline-size: 0; margin-block-end: var(--gap-5); }
.partstrip__cell {
  flex: 1 1 0; min-inline-size: 2.75rem; padding: var(--gap-3) var(--gap-2); text-align: center;
  font-size: var(--fs-xs); color: var(--ink); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.partstrip__cell--k0 { background: color-mix(in oklab, var(--chart-1) 28%, var(--surface)); }
.partstrip__cell--k1 { background: color-mix(in oklab, var(--chart-2) 28%, var(--surface)); }
.partstrip__cell--k2 { background: color-mix(in oklab, var(--chart-2) 14%, var(--surface)); }
.partstrip__cell--k3 { background: color-mix(in oklab, var(--chart-3) 28%, var(--surface)); }
.partstrip__cell--k4 { background: color-mix(in oklab, var(--chart-4) 28%, var(--surface)); }
.partstrip__cell--k5 { background: color-mix(in oklab, var(--chart-1) 12%, var(--surface)); }
.partstrip__cell--kx { background: var(--surface); border-style: dashed; }
.swatch {
  display: inline-block; inline-size: .75rem; block-size: .75rem; margin-inline-end: var(--gap-3); vertical-align: -1px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-xs);
}

.mon__sub { margin-block: var(--gap-6) var(--gap-3); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink); }

/* График истории: подписи осей — HTML рядом с SVG (текст не растягивается) */
.mcharts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: var(--gap-7); min-inline-size: 0; }
.mchart {
  display: grid; grid-template-columns: auto minmax(0, 1fr); margin: 0; min-inline-size: 0;
  grid-template-areas: "title title" "y plot" ". x" ". legend"; gap: var(--gap-2) var(--gap-3);
}
.mchart__title { grid-area: title; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink); }
.mchart__y {
  grid-area: y; display: flex; flex-direction: column; justify-content: space-between; text-align: end;
  font-size: var(--fs-xs); color: var(--chart-label); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mchart__plot {
  grid-area: plot; display: block; inline-size: 100%; block-size: var(--chart-h-sm);
  border-inline-start: 1px solid var(--chart-axis); border-block-end: 1px solid var(--chart-axis);
}
.mchart__grid { stroke: var(--chart-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mchart__line { fill: none; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mchart__line--a { stroke: var(--chart-1); }
.mchart__line--b { stroke: var(--chart-2); }
.mchart__x { grid-area: x; display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--chart-label); }
.mchart__legend { grid-area: legend; display: flex; flex-wrap: wrap; gap: var(--gap-5); font-size: var(--fs-xs); color: var(--ink-muted); }
.mchart__key { display: inline-block; inline-size: .875rem; block-size: 3px; margin-inline-end: var(--gap-2); vertical-align: middle; border-radius: var(--radius-full); }
.mchart__key--a { background: var(--chart-1); }
.mchart__key--b { background: var(--chart-2); }

/* Отметка пика поверх полосы заполнения */
.meter-peak { position: relative; min-inline-size: 0; }
.meter-peak__mark {
  position: absolute; inset-block-start: -3px; inset-inline-start: var(--peak); block-size: 12px; inline-size: 2px;
  background: var(--ink); border-radius: var(--radius-full);
}