/* Page styles: hoster - 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). */

/* ---------------------------------------------------------------------------
   SERVER CARD (views/partials/server-card.ejs) - one card for every hoster
   --------------------------------------------------------------------------- */

/* Head: icon, name with subline, badges on the right. Unlike other card
   headers it does not wrap - the badges stay next to the name. */
.kvm-card .server-karte-kopf { flex-wrap: nowrap; align-items: flex-start; gap: .75rem; }
.server-karte-symbol {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius-sm);
  background: var(--z-hover);
  color: var(--z-muted);
  font-size: 1.1rem;
}
/* .card-header .card-title is a flex row in panel.css - an ellipsis only
   works on a block box. */
.kvm-card .card-title { display: block; line-height: 1.4; }
.kvm-card .card-subtitle { margin-top: .1rem; }
.server-karte-abzeichen { flex: none; justify-content: flex-end; gap: .35rem; }

/* 24fire: clicking the name renames the server */
.fire-umbenennen:hover { text-decoration: underline; text-underline-offset: .18em; }

/* Values right-aligned, as in a receipt; labels with their icon on the left */
.server-karte-werte > dt { white-space: nowrap; }
.server-karte-werte > dd { justify-content: flex-end; text-align: right; }

/* ---------------------------------------------------------------------------
   OVERVIEWS
   --------------------------------------------------------------------------- */

/* Empty state inside a card grid: spans the whole row */
.raster > .leer-karte { grid-column: 1 / -1; }
.leer-karte .leer p { margin: 0; }

/* Account tiles above the server list (views/partials/hoster-account.ejs) */
.konto-kachel .kennzahl-label { padding-right: 0; }
.konto-kachel .kv { margin-top: .75rem; }
.konto-kachel .kv > dd { justify-content: flex-end; text-align: right; }
.konto-kachel .konto-link { margin-top: 1rem; }

/* "Alle Server": hoster tiles, four per row on wide screens */
.hoster-raster { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
/* The hoster logos are made for a light background - a white plate is
   intended here and the only light surface of the panel. */
.hoster-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 6rem;
  padding: 1rem;
  border-radius: var(--z-radius-sm);
  background: #fff;
}
.hoster-logo img { max-width: 85%; max-height: 100%; object-fit: contain; }

/* ---------------------------------------------------------------------------
   NEXO DETAIL PAGE (views/dash/nexosystems_servers_details.ejs)
   --------------------------------------------------------------------------- */

/* All sections are visible at once; the menu jumps to them */
.nexo-abschnitt { scroll-margin-top: 1.5rem; }
@media (min-width: 992px) { .nexo-menue { position: sticky; top: 1.5rem; } }

/* rDNS row: address with a fixed width, field takes the rest */
.nexo-rdns-adresse { min-width: 14rem; }
.nexo-rdns-feld { flex: 1 1 12rem; min-width: 0; width: auto; }

/* Firewall: the drag script sets draggable on the grabbed row and toggles
   these classes. The insertion line is an INSET shadow and not a border: a
   border would make the row taller, and the table would jump on every
   pointer movement. */
.nexo-fw-griff { cursor: grab; color: var(--z-muted); }
.nexo-fw-griff:hover { color: var(--z-text); }
.nexo-fw-tabelle tr[draggable="true"] { cursor: grabbing; }
.nexo-fw-tabelle .fw-wird-gezogen { opacity: .4; }
.nexo-fw-tabelle .fw-einfuegen-davor > td { box-shadow: inset 0 2px 0 0 var(--z-accent); }
.nexo-fw-tabelle .fw-einfuegen-danach > td { box-shadow: inset 0 -2px 0 0 var(--z-accent); }