.hosts-card {
  width: 100%;
}

.host-remark-cell {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.host-remark {
  font-weight: 500;
}

.host-desc {
  font-size: 0.82em;
  color: var(--ant-color-text-secondary);
}

.host-endpoint {
  font-family: var(--font-mono, monospace);
  font-size: 0.92em;
}

.host-muted {
  color: var(--ant-color-text-quaternary);
}

/* card-toolbar is shared with the Clients/Inbounds list cards, but its rules
   live in a lazily-loaded page stylesheet — re-declare here so the Hosts page
   renders correctly when opened directly. */
.hosts-card .card-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 0;
}

@media (min-width: 769px) and (max-width: 920px) {
  .hosts-card .card-toolbar {
    gap: 6px;
  }
}

/* Empty-table state. The shared .card-empty rule otherwise lives only in the
   lazily-loaded Clients/Inbounds/Nodes stylesheets, so a direct /hosts refresh
   would render it unstyled (faint + uncentered) until another page is visited.
   Re-declare it here so it's correct on first load. */
.card-empty {
  text-align: center;
  color: var(--ant-color-text-secondary);
  padding: 24px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}