/*
 * components/server_hero.css — "Server details" showcase hero.
 *
 * Paired with the hero block in templates/server_dashboard.html and driven
 * live by static/js/server-dashboard.js. Token-driven only (D5): no
 * hardcoded colours, spacing, radius, shadow, or timing.
 *
 * Two overlay layers coexist by design:
 *   - the shared .help-indicator (tiny dark "what is this?" tooltip), and
 *   - .server-hero__pop (a light detail card showing the actual values),
 * both revealed on hover/focus-within and dismissed on blur / Escape
 * (server-dashboard.js) per D9.
 */

.server-hero {
  position: relative;
  margin-bottom: var(--space-5);
  padding: var(--space-5);
  background:
    linear-gradient(135deg, var(--color-info-bg) 0%, var(--color-surface) 42%),
    var(--color-surface);
  border: var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* ---- Identity banner --------------------------------------------------- */

.server-hero__banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: var(--border-1);
}

.server-hero__identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.server-hero__pulse {
  position: relative;
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--color-success-fg);
  box-shadow: 0 0 0 0 var(--color-success-fg);
  animation: server-hero-pulse 2.4s var(--ease-standard) infinite;
}

@keyframes server-hero-pulse {
  0% { box-shadow: 0 0 0 0 rgba(22, 121, 76, 0.5); }
  70% { box-shadow: 0 0 0 0.6rem rgba(22, 121, 76, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 121, 76, 0); }
}

.server-hero__names { min-width: 0; }

.server-hero__name {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-fg);
  word-break: break-word;
}

.server-hero__sub {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
}

.server-hero__addr { font-family: var(--font-mono); }

/* ---- Verdict pill (patch compliance headline) -------------------------- */

.server-hero__verdict {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: help;
  outline: none;
  transition: box-shadow var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.server-hero__verdict:hover,
.server-hero__verdict:focus-visible {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.server-hero__verdict-dot {
  flex: 0 0 auto;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--color-neutral-fg);
}

.server-hero__verdict-text { display: flex; flex-direction: column; line-height: 1.15; }

.server-hero__verdict-line { font-size: var(--fs-md); font-weight: var(--fw-semibold); }

.server-hero__verdict-sub {
  font-size: var(--fs-xs);
  color: var(--color-fg-muted);
  text-transform: lowercase;
}

/* Level tinting — background, border, dot. */
.server-hero__verdict--success { background: var(--color-success-bg); border-color: var(--color-success-fg); }
.server-hero__verdict--success .server-hero__verdict-dot { background: var(--color-success-fg); }
.server-hero__verdict--success .server-hero__verdict-line { color: var(--color-success-fg); }

.server-hero__verdict--info { background: var(--color-info-bg); border-color: var(--color-info-fg); }
.server-hero__verdict--info .server-hero__verdict-dot { background: var(--color-info-fg); }
.server-hero__verdict--info .server-hero__verdict-line { color: var(--color-info-fg); }

.server-hero__verdict--warning { background: var(--color-warn-bg); border-color: var(--color-warn-fg); }
.server-hero__verdict--warning .server-hero__verdict-dot { background: var(--color-warn-fg); }
.server-hero__verdict--warning .server-hero__verdict-line { color: var(--color-warn-fg); }

.server-hero__verdict--danger { background: var(--color-danger-bg); border-color: var(--color-danger-fg); }
.server-hero__verdict--danger .server-hero__verdict-dot { background: var(--color-danger-fg); }
.server-hero__verdict--danger .server-hero__verdict-line { color: var(--color-danger-fg); }

/* A pending-attention verdict gently pulses to draw the eye. */
.server-hero__verdict--danger .server-hero__verdict-dot,
.server-hero__verdict--warning .server-hero__verdict-dot {
  animation: server-hero-blink 1.6s var(--ease-standard) infinite;
}

@keyframes server-hero-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ---- Fact tile grid ---------------------------------------------------- */

.server-hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--space-3);
}

.server-hero__tile {
  position: relative;
  padding: var(--space-3);
  background: var(--color-surface);
  border: var(--border-1);
  border-radius: var(--radius-md);
  outline: none;
  transition: box-shadow var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.server-hero__tile:hover,
.server-hero__tile:focus-visible,
.server-hero__tile:focus-within {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

/* Lift the active tile/verdict above its siblings so its dropdown detail
   popover is never painted underneath a later grid tile. The hover transform
   above creates a stacking context; without an explicit z-index that context
   keeps its DOM paint order, so a later tile (e.g. Workload) covered the
   earlier tile's popover (e.g. Operating system). */
.server-hero__tile:hover,
.server-hero__tile:focus-within,
.server-hero__verdict:hover,
.server-hero__verdict:focus-within {
  z-index: var(--z-popover);
}

.server-hero__tile-head {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.server-hero__ic {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  color: var(--color-accent);
}

.server-hero__tile-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-fg-muted);
}

.server-hero__tile-value {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-fg);
  line-height: 1.2;
  word-break: break-word;
}

.server-hero__tile-unit {
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
  color: var(--color-fg-muted);
}

/* ---- Detail popover (light card) --------------------------------------- */

.server-hero__pop {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  z-index: var(--z-popover);
  width: max-content;
  max-width: min(20rem, 88vw);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: var(--border-1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(-1 * var(--space-1)));
  transition: opacity var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
  pointer-events: none;
  text-align: left;
}

/* The verdict popover anchors to the right edge of the banner. */
.server-hero__verdict .server-hero__pop { left: auto; right: 0; }
.server-hero__pop--wide { max-width: min(26rem, 92vw); }

.server-hero__tile:hover .server-hero__pop,
.server-hero__tile:focus-within .server-hero__pop,
.server-hero__verdict:hover .server-hero__pop,
.server-hero__verdict:focus-within .server-hero__pop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.server-hero__pop-kv {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0 0 var(--space-1);
  font-size: var(--fs-sm);
}
.server-hero__pop-kv span { color: var(--color-fg-muted); }
.server-hero__pop-kv b { color: var(--color-fg); font-weight: var(--fw-semibold); text-align: right; word-break: break-word; }

.server-hero__pop-note {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--color-fg-muted);
  line-height: var(--lh-base);
}

/* Patch popover internals */
.server-hero__pop-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-fg);
}

.server-hero__pop-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--color-neutral-fg);
}
.server-hero__pop-dot--success { background: var(--color-success-fg); }
.server-hero__pop-dot--info { background: var(--color-info-fg); }
.server-hero__pop-dot--warning { background: var(--color-warn-fg); }
.server-hero__pop-dot--danger { background: var(--color-danger-fg); }

.server-hero__pop-lead {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-fg);
  line-height: var(--lh-base);
}

.server-hero__pop-stats {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.server-hero__pop-stat {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2);
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
}

.server-hero__pop-num { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-fg); }
.server-hero__pop-num--danger { color: var(--color-danger-fg); }
.server-hero__pop-cap { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-fg-muted); text-align: center; }

.server-hero__pop-subhead {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-fg-muted);
}

.server-hero__pop-list ul {
  margin: 0;
  padding-left: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-fg);
  max-height: 8rem;
  overflow-y: auto;
}
.server-hero__pop-list li { line-height: 1.5; word-break: break-all; }

.server-hero__pop-more { margin: var(--space-1) 0 0; font-size: var(--fs-xs); color: var(--color-fg-muted); }

.server-hero__pop-foot {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-2);
  border-top: var(--border-1);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-fg-muted);
}

/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 640px) {
  .server-hero { padding: var(--space-4); }
  .server-hero__banner { flex-direction: column; align-items: flex-start; }
  .server-hero__verdict { align-self: stretch; }
  .server-hero__verdict .server-hero__pop { left: 0; right: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .server-hero__pulse,
  .server-hero__verdict--danger .server-hero__verdict-dot,
  .server-hero__verdict--warning .server-hero__verdict-dot { animation: none; }
  .server-hero__pop,
  .server-hero__tile,
  .server-hero__verdict { transition: none; }
}