/* Datalix and 24fire detail pages (views/dash/datalix_kvm_detail.ejs, 24fire_kvm_detail.ejs)
   Only what panel.css does not have. The traffic bar (.kvm-verbrauch-balken)
   is shared with other pages and lives in seiten/server-details.css. */

/* "Zurück zur Übersicht" as the last entry of the section menu, set apart
   from the sections above it */
.bereichsnav > .bereichsnav-zurueck { color: var(--z-muted); }
@media (min-width: 992px) {
  .bereichsnav > .bereichsnav-zurueck { margin-top: .75rem; }
}

/* Hint row inside a key/value list (loading, error, nothing reported):
   spans both columns of dl.kv */
.kv > .kv-hinweis { grid-column: 1 / -1; color: var(--z-muted); }

/* Datalix traffic: columns of the last 14 days, built by verbrauchEinsetzen().
   The height of the inner element is set inline in percent. */
.dl-saeulen { display: flex; align-items: flex-end; gap: .25rem; margin-bottom: .25rem; }
.dl-saeule { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; height: 4rem; }
.dl-saeule > div { border-radius: 2px 2px 0 0; background: rgba(var(--z-accent-rgb), .8); }

/* 24fire charts (kurve() and legende()): grid lines, axis labels, legend swatch.
   The SVG is scaled by its viewBox, so 11px is in chart units. */
.fire-kurve .fire-gitter { stroke: var(--z-border); }
.fire-kurve .fire-achse { fill: var(--z-muted); font-size: 11px; }
.fire-legende-farbe { display: inline-block; width: .625rem; height: .625rem; margin-right: .375rem; border-radius: 2px; vertical-align: -1px; }