/* Page styles: server details - loaded directly by views/partials/header.ejs
   after public/style/panel.css. Plain CSS on the panel.css tokens; only what
   the shared building blocks and Bootstrap utilities cannot express (hooks
   set by scripts, few shared patterns of this page group). */

/* ---------------------------------------------------------------------------
   AGENT (views/dash/server-agent-card.ejs, server-agent-values.ejs)
   --------------------------------------------------------------------------- */

/* Colour steps of the usage bar. The class sits on the inner element because
   public/js/agent-values.js copies exactly that className on every refresh. */
.agent-balken > .warnung { background: var(--z-warning); }
.agent-balken > .voll { background: var(--z-danger); }

/* The script in server-agent-card.ejs moves "betont" between the two
   operating system buttons of the install dialog - it marks the chosen one. */
.btn[data-agent-os].betont {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--z-accent);
  --bs-btn-border-color: var(--z-accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--z-accent-hover);
  --bs-btn-hover-border-color: var(--z-accent-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--z-accent-hover);
  --bs-btn-active-border-color: var(--z-accent-hover);
}

/* ---------------------------------------------------------------------------
   TRAFFIC BAR (Datalix and 24fire, built by the scripts of both detail pages)
   The markup comes from JavaScript with a modifier class on the track
   (.knapp from 75 %, .voll from 90 %) and the percentage as <b>, which sits
   inside the filled part (.innen) or, for small values, at the right end
   of the track (.aussen).
   --------------------------------------------------------------------------- */
.kvm-verbrauch-balken {
  position: relative;
  height: 1.25rem;
  margin: .625rem 0 .5rem;
  overflow: hidden;
  border: 1px solid var(--z-border);
  border-radius: 99px;
  background: var(--z-hover);
}
.kvm-verbrauch-balken > span { display: block; height: 100%; border-radius: 99px; background: var(--z-accent); transition: width .3s ease; }
.kvm-verbrauch-balken.knapp > span { background: var(--z-warning); }
.kvm-verbrauch-balken.voll > span { background: var(--z-danger); }
.kvm-verbrauch-balken > b {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: .7rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.kvm-verbrauch-balken > b.innen { left: .625rem; color: #fff; }
/* white is unreadable on the yellow step */
.kvm-verbrauch-balken.knapp > b.innen { color: var(--z-bg); }
.kvm-verbrauch-balken > b.aussen { right: .625rem; color: var(--z-muted); }

@media (prefers-reduced-motion: reduce) {
  .kvm-verbrauch-balken > span { transition: none; }
}

/* ---------------------------------------------------------------------------
   DETAIL PAGES (hetzner_kvm_detail.ejs, skrime_kvm_detail.ejs,
   prepaidhost_kvm_detail.ejs)
   --------------------------------------------------------------------------- */

/* "Zurück zur Übersicht" is the last entry of the section menu. In the
   column (lg and up) it stands apart from the sections. */
@media (min-width: 992px) {
  .bereichsnav > .detail-zurueck { margin-top: .75rem; }
}

/* Single fields that would otherwise run across the whole width
   (confirmation name, search, display name) */
.detail-feld { max-width: 24rem; }

/* Rows separated by a line, without a table (other firewalls of the project) */
.detail-liste > * + * { border-top: 1px solid var(--z-border); }