/* Autoscaling (M15): a service's replica slots, the scaling fields and its recent changes. */

.scaling-now { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.5rem 0.9rem; }
.scaling-now__text { margin: 0; }

/* One slot per replica it may run. */
.scaling-slots { display: flex; flex-wrap: wrap; gap: 4px; max-width: 13rem; }
.scaling-slot {
  width: 14px; height: 14px; border-radius: 4px;
  border: 1.5px dashed var(--line-strong);
}
.scaling-slot--floor { border-style: solid; border-color: var(--ink-soft); }
.scaling-slot--running { background: var(--chart); border: 1.5px solid var(--chart); }
.scaling-slot--over { border-color: var(--warn, var(--ink-soft)); }

.scaling-fields { display: grid; gap: 0.85rem; }
.scaling-fields__range { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.scaling-fields__range .input { width: 5rem; }
.scaling-rule { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.scaling-rule .input { width: 6.5rem; }
.scaling-rule__label { min-width: 10.5rem; }
.scaling-cost { margin: 0; font-variant-numeric: tabular-nums; }

.scaling-events { list-style: none; margin: 0; padding: 0; }
.scaling-events__title { margin: 0.75rem 0 0.2rem; }
.scaling-events__item {
  display: grid; grid-template-columns: 7.5rem 6.5rem 1fr; gap: 0.6rem; align-items: baseline;
  padding: 0.4rem 0; border-bottom: 1px solid var(--line); font-size: 0.9rem;
}
.scaling-events__item time { color: var(--muted); font-size: 0.84rem; }
.scaling-events__item--failed span { color: var(--danger); }
.scaling-setup { display: grid; gap: 0.5rem; }
.scaling-setup p { margin: 0; }

@media (max-width: 600px) {
  .scaling-now { grid-template-columns: 1fr; }
  .scaling-events__item { grid-template-columns: 1fr auto; }
  .scaling-events__item span { grid-column: 1 / -1; }
}

.scaling { display: grid; gap: 0.6rem; }
.scaling .note { margin: 0; }
.scaling-fields--off .scaling-rule { opacity: 0.55; }

/* Replica limits on the cluster (services/_tab_settings): Railway-style sliders. */
.replica-limits { gap: 0.75rem; }
.replica-limit { display: grid; gap: 0.35rem; padding-block: 0.35rem; }
.replica-limit + .replica-limit { border-top: 1px solid var(--line); padding-top: 0.75rem; }
.replica-limit__head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.replica-limit__range { width: 100%; accent-color: var(--focus, var(--accent)); }

/* A stateful service's disk (services/_tab_settings, disks/show): how full it is, and its size. */
.disk-fields { gap: 0.75rem; }
.disk { display: grid; gap: 0.75rem; }
.disk-usage { display: grid; gap: 0.4rem; --level: var(--ok); }
.disk-usage--warn { --level: var(--warn); }
.disk-usage--urgent { --level: var(--danger); }
.disk-usage__line { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; }
.disk-usage__bar { display: block; height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.disk-usage__bar i { display: block; height: 100%; background: var(--level); border-radius: inherit; }
.disk-usage__warning { margin: 0; color: var(--level); }
.disk-usage .spinner { display: inline-block; width: 11px; height: 11px; vertical-align: -1px; }
.input-with-unit { display: inline-flex; align-items: center; gap: 0.5rem; }

/* Restarting a service (services/_restart), under its Settings form. */
.restart { margin-top: 1.5rem; padding-top: 1.25rem; border-top: var(--rule-w, 1px) solid var(--line); }