/* ═══════════════════════════════════════════════════════════
   GROUND CONTROL — Vopts Console
   Industrial precision. Data-dense. Monospace-forward.

   Typography: Azeret Mono (data/display) + Outfit (UI/body)
   Works with all DaisyUI v5 themes via semantic color vars.
   ═══════════════════════════════════════════════════════════ */

/* ── Fonts ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap');

body {
  font-family: 'Outfit', system-ui, sans-serif;
}

/* Atmospheric grain — subtle CRT texture */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* Ensure content renders above grain */
.app-shell { position: relative; z-index: 1; }

/* ── Fleet Health Strip ────────────────────────────────── */
.fleet-strip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid color-mix(in oklab, var(--color-base-content) 7%, transparent);
  border-radius: 0.375rem;
  background: var(--color-base-100);
}
.fleet-label {
  font-family: 'Azeret Mono', monospace;
  font-size: 0.5625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-base-content) 35%, transparent);
  white-space: nowrap;
}
.fleet-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}
.fleet-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transition: transform 0.15s ease;
  cursor: default;
}
.fleet-dot:hover { transform: scale(1.75); }
.fleet-dot-ok {
  background: var(--color-success);
  box-shadow: 0 0 6px color-mix(in oklab, var(--color-success) 35%, transparent);
  animation: dot-breathe 3s ease-in-out infinite;
}
.fleet-dot-down {
  background: color-mix(in oklab, var(--color-base-content) 18%, transparent);
}
.fleet-dot-err {
  background: var(--color-error);
  box-shadow: 0 0 6px color-mix(in oklab, var(--color-error) 30%, transparent);
}
.fleet-summary {
  font-family: 'Azeret Mono', monospace;
  font-size: 0.75rem;
  font-weight: 500;
  margin-left: auto;
  white-space: nowrap;
}

@keyframes dot-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── Metric Tiles ─────────────────────────────────────── */
.metrics-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  border: 1px solid color-mix(in oklab, var(--color-base-content) 7%, transparent);
  border-radius: 0.375rem;
  overflow: hidden;
  background: color-mix(in oklab, var(--color-base-content) 7%, transparent);
}
.metric-tile {
  background: var(--color-base-100);
  padding: 0.625rem 0.875rem;
}
.metric-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
  margin-bottom: 0.125rem;
}
.metric-value {
  font-family: 'Azeret Mono', monospace;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-base-content);
}
.metric-value-sm {
  font-family: 'Azeret Mono', monospace;
  font-size: 0.9375rem;
  font-weight: 600;
  padding-top: 0.1875rem;
  color: var(--color-base-content);
}
.metric-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 0.5625rem;
  color: color-mix(in oklab, var(--color-base-content) 30%, transparent);
  margin-top: 0.125rem;
}

/* ── Data Panel ───────────────────────────────────────── */
.data-panel {
  border: 1px solid color-mix(in oklab, var(--color-base-content) 7%, transparent);
  border-radius: 0.375rem;
  overflow: hidden;
  background: var(--color-base-100);
}
.section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.875rem;
  border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 5%, transparent);
}
.section-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
  white-space: nowrap;
}
.section-rule {
  flex: 1;
  height: 1px;
  background: color-mix(in oklab, var(--color-base-content) 6%, transparent);
}

/* ── Data Table ───────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th {
  font-family: 'Outfit', sans-serif;
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-base-content) 35%, transparent);
  padding: 0.4375rem 0.75rem;
  text-align: left;
  font-weight: 500;
  border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 7%, transparent);
}
.data-table td {
  padding: 0.4375rem 0.75rem;
  border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 3.5%, transparent);
  font-size: 0.8125rem;
}
.data-table tbody tr {
  transition: background 0.1s ease;
}
.data-table tbody tr:hover td {
  background: color-mix(in oklab, var(--color-base-content) 2.5%, transparent);
}
.data-table tbody tr:last-child td { border-bottom: none; }

/* ── Status Indicators ────────────────────────────────── */
.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  vertical-align: middle;
}
.status-ok {
  background: var(--color-success);
  box-shadow: 0 0 4px color-mix(in oklab, var(--color-success) 30%, transparent);
}
.status-down {
  background: color-mix(in oklab, var(--color-base-content) 18%, transparent);
}
.status-err {
  background: var(--color-error);
  box-shadow: 0 0 4px color-mix(in oklab, var(--color-error) 30%, transparent);
}

/* ── Typography Helpers ───────────────────────────────── */
.gc-mono { font-family: 'Azeret Mono', monospace; }
.gc-muted { color: color-mix(in oklab, var(--color-base-content) 35%, transparent); }
.gc-muted-deep { color: color-mix(in oklab, var(--color-base-content) 20%, transparent); }

/* ── Refresh Button ───────────────────────────────────── */
.btn-refresh {
  font-family: 'Azeret Mono', monospace;
  font-size: 0.625rem;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.625rem;
  border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
  border-radius: 0.25rem;
  background: none;
  color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-refresh:hover {
  border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
  color: var(--color-base-content);
}

/* ── Sort arrows ──────────────────────────────────────── */
.sort-arrow {
  font-size: 0.5rem;
  margin-left: 0.25rem;
  color: color-mix(in oklab, var(--color-base-content) 25%, transparent);
}
.sort-arrow.active {
  color: var(--color-primary);
}

/* ── Nav brand override ───────────────────────────────── */
.app-nav .nav-brand {
  font-family: 'Azeret Mono', monospace !important;
  letter-spacing: 0.06em !important;
}

/* ── Staggered fade-in ────────────────────────────────── */
@keyframes gc-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.gc-anim { animation: gc-fade-up 0.35s ease forwards; opacity: 0; }
.gc-anim-1 { animation-delay: 0.04s; }
.gc-anim-2 { animation-delay: 0.1s; }
.gc-anim-3 { animation-delay: 0.16s; }

/* ── Mobile responsive ────────────────────────────────── */
@media (max-width: 767px) {
  .data-table .col-hide-mobile { display: none; }
  .metrics-row { grid-template-columns: repeat(2, 1fr); }
  .fleet-dots { flex-wrap: wrap; }
}