/*
 * components/grid-hover-panel.css — hover-triggered rich detail panel for
 * data-grid cells (UI enhancement session: grid hover detail).
 *
 * Paired with static/js/components/grid-hover-panel.js. Visually matches
 * `.popover` (same tokens: border, radius, shadow, padding) but is a
 * standalone class — the interaction model (hover/focus vs. click-toggle)
 * is different enough that sharing `.popover`'s `.is-open` class would
 * risk cross-behavior bugs between the two JS modules. Token-driven (D5).
 */

.grid-hover-panel {
  position: absolute;
  z-index: var(--z-popover);
  background: var(--color-surface);
  border: 6px solid var(--color-hover-panel-ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 0;
  max-width: 40rem;
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  overflow: hidden;
}

/* Narrow variant for compact content (e.g. DNS server list) where the
 * default 40rem max-width leaves excessive whitespace. */
.grid-hover-panel--narrow {
  max-width: 24rem;
}

.grid-hover-panel__header {
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, var(--color-hover-panel-top-bg) 0%, var(--color-surface) 100%);
  border-bottom: 3px solid var(--color-hover-panel-ink);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  color: var(--color-hover-panel-ink);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grid-hover-panel__body {
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: var(--color-hover-panel-bottom-bg);
}

.grid-hover-panel__desc {
  margin: 0 0 var(--space-2);
  color: var(--color-fg);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.grid-hover-panel__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-2);
}

.grid-hover-panel__row {
  margin: var(--space-1) 0;
}

.grid-hover-panel__label {
  color: var(--color-fg-muted);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-right: var(--space-1);
}

.grid-hover-panel__hint {
  display: block;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  color: var(--color-fg-muted);
  font-size: var(--fs-xs);
  font-style: italic;
}

.grid-hover-panel__section {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-2) 0;
}