/* ============================================================
   GANYMEDE — Vanta Design System
   CSS custom properties + base styles
   ============================================================ */

:root {
  /* Voids */
  --void-000: #03060d;
  --void-050: #070b16;
  --void-100: #0c1322;
  --void-200: #131c30;
  --void-300: #1c2742;
  --void-400: #2a3656;
  --void-500: #3d4a6e;

  /* Foreground */
  --fg-000: #f5f9ff;
  --fg-100: #c8d4ec;
  --fg-200: #8c9bbd;
  --fg-300: #5f6e8c;
  --fg-400: #3d4a6e;

  /* Signal — brand cyan */
  --signal-100: #b8f0ff;
  --signal-300: #5fdaff;
  --signal-500: #00b8e6;
  --signal-600: #0096bf;
  --signal-700: #006c8c;
  --signal-glow: rgba(0, 184, 230, 0.45);

  /* Plasma — success / production */
  --plasma-100: #c8ffe4;
  --plasma-300: #5fff9f;
  --plasma-500: #00e676;
  --plasma-700: #009a4d;
  --plasma-glow: rgba(0, 230, 118, 0.4);

  /* Amber — warnings, energy, build queues */
  --amber-100: #ffe9b8;
  --amber-300: #ffc966;
  --amber-500: #ffa01f;
  --amber-700: #c46f00;
  --amber-glow: rgba(255, 160, 31, 0.4);

  /* Crimson — danger, raids */
  --crimson-100: #ffc4cf;
  --crimson-300: #ff6b85;
  --crimson-500: #ff2d55;
  --crimson-700: #c20030;
  --crimson-glow: rgba(255, 45, 85, 0.45);

  /* Violet — premium, syndicate */
  --violet-100: #e1ccff;
  --violet-300: #b794ff;
  --violet-500: #8a55ff;
  --violet-700: #5a25cc;
  --violet-glow: rgba(138, 85, 255, 0.4);

  /* Resource accents */
  --res-credits:    #ffd43d;
  --res-energy:     #ffa01f;
  --res-materials:  #c8d4ec;
  --res-intel:      #5fdaff;
  --res-reputation: #8a55ff;
  --res-premium:    #ff6bff;

  /* Semantic aliases */
  --bg:          var(--void-000);
  --bg-elev-1:   var(--void-050);
  --bg-elev-2:   var(--void-100);
  --bg-elev-3:   var(--void-200);
  --bg-hover:    var(--void-300);

  --fg:          var(--fg-000);
  --fg-muted:    var(--fg-200);
  --fg-dim:      var(--fg-300);

  --border:        var(--void-400);
  --border-strong: var(--void-500);
  --border-accent: var(--signal-500);

  --accent:        var(--signal-500);
  --accent-strong: var(--signal-300);
  --success:       var(--plasma-500);
  --warning:       var(--amber-500);
  --danger:        var(--crimson-500);
  --premium:       var(--violet-500);

  /* Typography */
  --font-display: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;

  --size-h1:    32px;
  --size-h2:    24px;
  --size-h3:    18px;
  --size-h4:    15px;
  --size-body:  14px;
  --size-body-l: 16px;
  --size-small: 12px;
  --size-micro: 10.5px;
  --size-data-xl: 32px;
  --size-data-l:  22px;
  --size-data-m:  16px;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-loose:  1.7;

  --track-display: 0.02em;
  --track-label:   0.14em;
  --track-eyebrow: 0.22em;

  /* Spacing — 4px grid */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 72px;
  --sp-11: 96px;

  /* Radii */
  --radius-1:   2px;
  --radius-2:   4px;
  --radius-3:   6px;
  --radius-4:   10px;
  --radius-pill: 999px;

  /* Shadows + glows */
  --shadow-panel:        inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px var(--border), 0 10px 30px -10px rgba(0,0,0,0.6);
  --shadow-panel-strong: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px var(--border-strong), 0 16px 40px -12px rgba(0,0,0,0.8);
  --glow-signal:  0 0 0 1px var(--signal-500), 0 0 24px -4px var(--signal-glow);
  --glow-plasma:  0 0 0 1px var(--plasma-500), 0 0 24px -4px var(--plasma-glow);
  --glow-amber:   0 0 0 1px var(--amber-500), 0 0 24px -4px var(--amber-glow);
  --glow-crimson: 0 0 0 1px var(--crimson-500), 0 0 24px -4px var(--crimson-glow);
  --glow-violet:  0 0 0 1px var(--violet-500), 0 0 24px -4px var(--violet-glow);
  --glow-text-signal:  0 0 12px var(--signal-glow);
  --glow-text-plasma:  0 0 12px var(--plasma-glow);
  --glow-text-amber:   0 0 12px var(--amber-glow);
  --glow-text-crimson: 0 0 12px var(--crimson-glow);
  --glow-text-violet:  0 0 12px var(--violet-glow);

  /* Motion */
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-snap: cubic-bezier(0.5, 1.6, 0.4, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  400ms;

  /* SVG icon colour filters */
  --filter-credits:   invert(86%) sepia(50%) saturate(686%) hue-rotate(0deg) brightness(101%);
  --filter-energy:    invert(72%) sepia(64%) saturate(2000%) hue-rotate(2deg) brightness(101%);
  --filter-materials: invert(86%) sepia(13%) saturate(346%) hue-rotate(190deg) brightness(95%);
  --filter-intel:     invert(80%) sepia(50%) saturate(1300%) hue-rotate(160deg) brightness(101%);
  --filter-mission:    invert(80%) sepia(50%) saturate(1300%) hue-rotate(160deg) brightness(101%);
  --filter-raid:       invert(50%) sepia(80%) saturate(2000%) hue-rotate(320deg) brightness(101%);
  --filter-syndicate:  invert(50%) sepia(60%) saturate(1500%) hue-rotate(240deg) brightness(101%);
  --filter-outpost:    invert(80%) sepia(50%) saturate(1300%) hue-rotate(160deg) brightness(101%);
  --filter-reputation: invert(50%) sepia(60%) saturate(1500%) hue-rotate(240deg) brightness(101%);
  --filter-premium:    invert(60%) sepia(80%) saturate(2000%) hue-rotate(275deg) brightness(110%);
  --filter-signal:     invert(72%) sepia(80%) saturate(400%) hue-rotate(170deg) brightness(110%);
  --filter-violet:     invert(55%) sepia(60%) saturate(600%) hue-rotate(240deg) brightness(110%);
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  background: var(--bg);
  color: var(--fg-100);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-000);
  margin: 0;
  line-height: var(--lh-snug);
}

h1 { font-size: var(--size-h1); font-weight: var(--weight-bold); }
h2 { font-size: var(--size-h2); font-weight: var(--weight-semi); }
h3 { font-size: var(--size-h3); font-weight: var(--weight-semi); }
h4 { font-size: var(--size-h4); font-weight: var(--weight-semi); }

a {
  color: var(--signal-300);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--plasma-300); }

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--void-050); }
::-webkit-scrollbar-thumb { background: var(--void-400); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--signal-700); }

/* ============================================================
   FOCUS
   ============================================================ */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--void-000), 0 0 0 4px var(--signal-500), 0 0 16px var(--signal-glow);
}

::selection { background: var(--signal-500); color: var(--void-000); }

/* ============================================================
   TABLES
   ============================================================ */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
}

th {
  font-family: var(--font-display);
  font-size: var(--size-small);
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--fg-muted);
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev-2);
}

td {
  font-family: var(--font-body);
  font-size: var(--size-body);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  color: var(--fg-100);
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg-hover); }

/* ============================================================
   BUTTONS
   ============================================================ */
button, .btn {
  font-family: var(--font-display);
  font-size: var(--size-small);
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  color: var(--fg-100);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  line-height: 1.4;
}

button:hover:not(:disabled), .btn:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--signal-700);
  color: var(--fg-000);
  box-shadow: var(--glow-signal);
}

button:active:not(:disabled), .btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: none;
}

button:disabled, .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Primary button */
.btn-primary {
  background: linear-gradient(135deg, var(--signal-700), var(--signal-600));
  border-color: var(--signal-500);
  color: var(--fg-000);
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--signal-600), var(--signal-500));
  box-shadow: var(--glow-signal);
}

/* Danger button */
.btn-danger {
  background: var(--bg-elev-2);
  border-color: var(--crimson-700);
  color: var(--crimson-300);
}
.btn-danger:hover:not(:disabled) {
  background: rgba(255, 45, 85, 0.1);
  border-color: var(--crimson-500);
  box-shadow: var(--glow-crimson);
}

/* Locked / insufficient-resources state */
.btn-locked {
  border-color: var(--crimson-700);
  color: var(--crimson-300);
  opacity: 0.6;
}

/* Success / plasma button */
.btn-success {
  background: linear-gradient(135deg, var(--plasma-700), var(--plasma-500));
  border-color: var(--plasma-500);
  color: var(--void-000);
}
.btn-success:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--plasma-500), var(--plasma-300));
  box-shadow: var(--glow-plasma);
  color: var(--void-000);
}

/* Small button */
.btn-small {
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--size-micro);
}

/* ============================================================
   INPUTS
   ============================================================ */
input, select, textarea {
  font-family: var(--font-mono);
  font-size: var(--size-body);
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  color: var(--fg-000);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-2);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--signal-500);
  box-shadow: var(--glow-signal);
}
input::placeholder { color: var(--fg-dim); }

/* ============================================================
   PANELS (general card/panel utility)
   ============================================================ */
.panel {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-panel);
  padding: var(--sp-6);
}

/* ============================================================
   UTILITY
   ============================================================ */
.text-center { text-align: center; }
.text-signal  { color: var(--signal-300);  text-shadow: var(--glow-text-signal); }
.text-plasma  { color: var(--plasma-300);  text-shadow: var(--glow-text-plasma); }
.text-amber   { color: var(--amber-300);   text-shadow: var(--glow-text-amber); }
.text-crimson { color: var(--crimson-300); text-shadow: var(--glow-text-crimson); }
.text-violet  { color: var(--violet-300);  text-shadow: var(--glow-text-violet); }
.text-muted   { color: var(--fg-muted); }
.text-dim     { color: var(--fg-dim); }

.label {
  font-family: var(--font-display);
  font-weight: var(--weight-semi);
  font-size: var(--size-small);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--fg-muted);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--size-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--signal-500);
}

.caption {
  font-family: var(--font-mono);
  font-size: var(--size-micro);
  color: var(--fg-dim);
  letter-spacing: 0.04em;
}

.data-xl { font-family: var(--font-mono); font-weight: var(--weight-semi); font-size: var(--size-data-xl); line-height: 1; font-variant-numeric: tabular-nums; }
.data-l  { font-family: var(--font-mono); font-weight: var(--weight-semi); font-size: var(--size-data-l);  line-height: 1; font-variant-numeric: tabular-nums; }
.data-m  { font-family: var(--font-mono); font-weight: var(--weight-medium); font-size: var(--size-data-m); line-height: 1; font-variant-numeric: tabular-nums; }

.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-4); }
.mt-4 { margin-top: var(--sp-6); }
.mb-1 { margin-bottom: var(--sp-1); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-4); }
.mb-4 { margin-bottom: var(--sp-6); }
.px-3 { padding-left: var(--sp-3); padding-right: var(--sp-3); }
.px-4 { padding-left: var(--sp-4); padding-right: var(--sp-4); }

/* ============================================================
   PROGRESS BAR (shared component)
   ============================================================ */
.progress-track {
  background: var(--void-300);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  height: 6px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width var(--dur-base) var(--ease-out);
}

.progress-fill-signal  { background: linear-gradient(90deg, var(--signal-700), var(--signal-300)); box-shadow: 0 0 8px var(--signal-glow); }
.progress-fill-plasma  { background: linear-gradient(90deg, var(--plasma-700), var(--plasma-300)); box-shadow: 0 0 8px var(--plasma-glow); }
.progress-fill-amber   { background: linear-gradient(90deg, var(--amber-700),  var(--amber-300));  box-shadow: 0 0 8px var(--amber-glow); }
.progress-fill-crimson { background: linear-gradient(90deg, var(--crimson-700),var(--crimson-300));box-shadow: 0 0 8px var(--crimson-glow); }

/* ============================================================
   PULSE ANIMATION (online dots, build timers)
   ============================================================ */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
.pulse { animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.blink { animation: blink 1.2s step-end infinite; }

/* ============================================================
   SKELETON LOADER
   ============================================================ */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--void-200) 25%, var(--void-300) 50%, var(--void-200) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-2);
}

/* ============================================================
   DIVIDER
   ============================================================ */
.divider {
  height: 1px;
  background: var(--border);
  border: none;
  margin: 0;
}

/* ============================================================
   FLEET SYSTEM
   ============================================================ */

.ship-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--void-300);
  transition: background 0.15s;
}
.ship-card:hover { background: var(--void-100); }

.ship-card-locked {
  opacity: 0.38;
}
.ship-card-locked .btn {
  pointer-events: auto;
}

.ship-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.ship-owned-badge {
  font-family: var(--mono);
  font-size: var(--size-data-m);
  color: var(--signal-300);
  background: var(--void-300);
  border-radius: 4px;
  padding: 2px 6px;
  min-width: 28px;
  text-align: center;
}

.ship-stats-row {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.ship-stats-row span {
  display: flex;
  align-items: baseline;
  gap: var(--sp-1);
}

.ship-cost-row {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.req-strip {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-1);
}

.req-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  border-radius: 3px;
  padding: 2px 5px;
}
.req-met {
  color: var(--plasma-300);
  background: rgba(0, 230, 118, 0.08);
  border: 1px solid rgba(0, 230, 118, 0.2);
}
.req-unmet {
  color: var(--crimson-300);
  background: rgba(255, 45, 85, 0.08);
  border: 1px solid rgba(255, 45, 85, 0.2);
}

.status-offline {
  background: rgba(255, 45, 85, 0.1);
  color: var(--crimson-300);
  border: 1px solid rgba(255, 45, 85, 0.25);
}
.status-offline .dot {
  background: var(--crimson-300);
}


/* Ant Design handoff overrides */
.resource-bar {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
}
.resource-item {
  min-width: 154px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 7px 10px;
}
.resource-item .res-label { color: rgba(255,255,255,0.58); }
.resource-item .res-rate { color: rgba(255,255,255,0.48); }