/* Mission Control - design system layer (Phase 3).
   The UI is Tailwind/CDN-first; this file provides the 15 named design-system
   classes that Tailwind utilities cannot express cleanly (glassmorphism, feed
   transitions, fleet grid, wallboard scale, htmx swap transitions).

   Typography scale: EXACTLY 4 sizes (11px / 14px / 24px / 36px).
   Weights: ONLY 400 (regular) and 600 (semibold). No 500/700.
   Spacing: all multiples of 4px. */

/* ── Existing scrollbar tweak (keep) ───────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* ═══════════════════════════════════════════════════════════════════════════
   1. GLASS / PANEL SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

/* Base glass panel — translucent dark with hairline border and blur */
.glass {
  background: rgba(15, 25, 41, 0.40);       /* bg-slate-900/40 equivalent */
  border: 1px solid #1e293b;                  /* border-slate-800 */
  border-radius: 0.5rem;                      /* rounded-lg */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Glass with subtle inner glow — used on "active" or highlighted tiles */
.glass-glow {
  /* inherits .glass */
  box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.06),
              0 0 20px rgba(56, 189, 248, 0.04);
}

/* Critical state glass — rose tint + pulsing glow */
.glass-critical {
  /* inherits .glass */
  border-color: rgba(251, 113, 133, 0.40);
  box-shadow: 0 0 24px rgba(251, 113, 133, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. TILE SYSTEM (summary tiles)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Summary tile — big mono metric + label */
.tile {
  /* Use .glass + these additions */
  padding: 1rem 1.5rem;                       /* 16px/24px — both multiples of 4 */
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Metric numeral inside tile */
.metric {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 2.25rem;                          /* text-4xl: 36px */
  font-weight: 600;                            /* semibold — NOT 700 bold */
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Tile label (below metric) */
.tile-label {
  font-size: 0.6875rem;                        /* text-[11px] */
  font-weight: 600;                            /* semibold — NOT 500 medium */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;                              /* text-slate-500 */
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. NEON TEXT / GLOW UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */

.neon-cyan   { color: #38bdf8; }
.neon-emerald{ color: #34d399; }
.neon-amber  { color: #fbbf24; }
.neon-rose   { color: #fb7185; }
.neon-violet { color: #a78bfa; }

/* Pulsing rose glow — for critical active problem tiles */
.neon-rose-glow {
  color: #fb7185;
  text-shadow: 0 0 12px rgba(251, 113, 133, 0.60);
  animation: pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { text-shadow: 0 0 8px rgba(251, 113, 133, 0.45); }
  50%       { text-shadow: 0 0 20px rgba(251, 113, 133, 0.80); }
}
@media (prefers-reduced-motion: reduce) {
  .neon-rose-glow { text-shadow: 0 0 8px rgba(251, 113, 133, 0.45); animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. STATUS DOT
   ═══════════════════════════════════════════════════════════════════════════ */

/* Live status dot — used in header connection indicator and feed */
.status-dot {
  position: relative;
  display: inline-flex;
  width: 0.5rem;               /* w-2 */
  height: 0.5rem;              /* h-2 */
  border-radius: 9999px;
}
.status-dot-live::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: currentColor;
  opacity: 0.4;
  animation: ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .status-dot-live::before { animation: none; opacity: 0; }
}
/* Colors: apply text-emerald-400 for live, text-amber-400 for reconnecting, text-rose-400 for error */

/* ═══════════════════════════════════════════════════════════════════════════
   5. GAUGE CONTAINERS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ECharts gauge wrapper — fixed height, fills parent width */
.gauge {
  width: 100%;
  height: 200px;               /* desktop — 200px is multiple of 4 */
}
@media (max-width: 640px) {
  .gauge { height: 160px; }    /* mobile — 160px is multiple of 4 */
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. FEED ROW
   ═══════════════════════════════════════════════════════════════════════════ */

/* Live problem/alert feed row */
.feed-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;                /* gap-3: 12px — multiple of 4 */
  padding: 0.5rem 1rem;        /* 8px vertical / 16px horizontal — both multiples of 4 */
  min-height: 44px;
  transition: background 120ms ease;
  border-bottom: 1px solid #1e293b;
}
.feed-row:hover { background: rgba(30, 41, 59, 0.40); }

/* Slide-in for new SSE rows */
.feed-row-new {
  animation: slide-in 250ms ease-out;
}
@keyframes slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .feed-row-new { animation: none; }
}

/* Resolved / struck row */
.feed-row-resolved {
  opacity: 0.45;
  text-decoration: line-through;
  text-decoration-color: rgba(100, 116, 139, 0.50);
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. FLEET GRID (host status cells)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fleet grid layout */
.fleet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.5rem;                 /* gap-2: 8px — multiple of 4 */
}

/* Individual host cell */
.fleet-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;     /* 8px vertical / 12px horizontal — both multiples of 4 */
  border-radius: 0.375rem;    /* rounded-md */
  border: 1px solid #1e293b;
  background: rgba(15, 25, 41, 0.40);
  cursor: pointer;
  min-height: 60px;            /* 60px = 4×15 — acceptable fixed dimension */
  transition: border-color 150ms ease, background 150ms ease;
  overflow: hidden;
}
.fleet-cell:hover {
  border-color: rgba(56, 189, 248, 0.40);
  background: rgba(30, 41, 59, 0.50);
}
.fleet-cell:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

/* Status band modifiers on fleet cells */
.fleet-cell-good     { border-color: rgba(52, 211, 153, 0.30); }
.fleet-cell-warning  { border-color: rgba(251, 191, 36, 0.30); }
.fleet-cell-critical { border-color: rgba(251, 113, 133, 0.40);
                       box-shadow: 0 0 8px rgba(251, 113, 133, 0.10); }  /* 8px = multiple of 4 */
.fleet-cell-offline  { opacity: 0.55; border-color: rgba(100, 116, 139, 0.30); }

/* ═══════════════════════════════════════════════════════════════════════════
   8. GRID / SCANLINE BACKDROP
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ambient grid backdrop behind main content — NOC "instrument panel" feel */
.grid-backdrop {
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.025) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: -1px -1px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. WALLBOARD MODE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Full-screen NOC display — no nav, oversized, high contrast */
.wallboard {
  --tile-font-size: 4rem;      /* 64px metric numerals */
  --gauge-height: 280px;       /* 280px = 4×70 — multiple of 4 */
}
.wallboard .metric   { font-size: var(--tile-font-size); font-weight: 600; }
.wallboard .gauge    { height: var(--gauge-height); }
.wallboard .tile     { padding: 2rem; }                          /* 32px — multiple of 4 */
.wallboard .tile-label { font-size: 0.875rem; }                  /* 14px = body size, multiple of 4 */
.wallboard .feed-row { padding: 1rem 1.5rem; min-height: 56px; font-size: 1rem; }
/* 1rem/1.5rem = 16px/24px — both multiples of 4. min-height 56px = 4×14 — multiple of 4 */

/* ═══════════════════════════════════════════════════════════════════════════
   10. htmx SWAP TRANSITIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* All swappable fragments fade on swap */
.htmx-swapping {
  opacity: 0.5;
  transition: opacity 150ms ease-in-out;
}

/* Tiles fade in after SSE-triggered fragment swap */
.htmx-added {
  opacity: 0;
  animation: fade-in 300ms ease forwards;
}
@keyframes fade-in {
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .htmx-added { animation: none; opacity: 1; }
}