History/src/index.css

@import "tailwindcss";

/*
 * Dark "command center" theme. `:root` is the dark palette (the app is dark by
 * default); `.dark` mirrors it so any `.dark`-conditional component styling stays
 * consistent. shadcn/ui components read the `--color-*` aliases defined in
 * `@theme inline` below, which map onto these variables.
 */
:root {
  --background: #0a0e14;
  --foreground: #e2e8f0;
  --card: #101724;
  --card-foreground: #e2e8f0;
  --popover: #0d131e;
  --popover-foreground: #e2e8f0;
  --primary: #f59e0b;
  --primary-foreground: #0a0e14;
  --secondary: #1b2636;
  --secondary-foreground: #cbd5e1;
  --muted: #152030;
  --muted-foreground: #8aa0b8;
  --accent: #0e2a3a;
  --accent-foreground: #67e8f9;
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  --border: #1f2b3d;
  --input: #22304a;
  --ring: #f59e0b;
  --radius: 0.5rem;
}

.dark {
  --background: #0a0e14;
  --foreground: #e2e8f0;
  --card: #101724;
  --card-foreground: #e2e8f0;
  --popover: #0d131e;
  --popover-foreground: #e2e8f0;
  --primary: #f59e0b;
  --primary-foreground: #0a0e14;
  --secondary: #1b2636;
  --secondary-foreground: #cbd5e1;
  --muted: #152030;
  --muted-foreground: #8aa0b8;
  --accent: #0e2a3a;
  --accent-foreground: #67e8f9;
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  --border: #1f2b3d;
  --input: #22304a;
  --ring: #f59e0b;
  --radius: 0.5rem;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

@layer base {
  * {
    border-color: var(--border);
  }
  html,
  body,
  #root {
    height: 100%;
  }
  body {
    margin: 0;
    background-color: var(--background);
    color: var(--foreground);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
      "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  /* MapLibre canvas: give the map pane a solid dark base behind the tiles.
     `!important` keeps it from being overridden by maplibre-gl's own
     stylesheet (which is imported later in the bundle). */
  .maplibregl-canvas {
    background-color: var(--background) !important;
  }

  /* Radix portals (select dropdowns, tooltips) are rendered on <body>; keep
     them above the floating HUD windows, whose z-index grows on every raise. */
  [data-radix-popper-content-wrapper] {
    z-index: 5000 !important;
  }
}

/* ------------------------------------------------------------------ */
/* Map popups (MapLibre renders these in the DOM, so style them here). */
/* ------------------------------------------------------------------ */
.maplibregl-popup-content {
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 11px;
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.7);
  font-size: 12px;
  line-height: 1.35;
  max-width: 230px;
}
.maplibregl-popup-tip {
  border-color: var(--popover) var(--popover) var(--border) var(--border);
}
.maplibregl-popup-close-button {
  color: var(--muted-foreground);
  font-size: 18px;
  padding: 0 6px;
}
.hm-popup-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 2px;
}
.hm-popup-sub {
  color: var(--muted-foreground);
  font-size: 11px;
  margin-top: 2px;
}
.hm-popup-owner {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  margin-top: 5px;
}
.hm-popup-owner-big {
  font-size: 14px;
  font-weight: 700;
}
.hm-chip {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.hm-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  margin-top: 7px;
}
.hm-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.hm-stat-k {
  color: var(--muted-foreground);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.hm-stat-v {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* Micro-interactions: event cards slide in + flash on arrival; the     */
/* "simulating" dot pulses. Kept here (map/feed-specific animation CSS).*/
/* ------------------------------------------------------------------ */
@keyframes hm-event-slide {
  0% {
    opacity: 0;
    transform: translateY(-7px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes hm-event-flash {
  0% {
    box-shadow: 0 0 0 1px var(--primary), 0 0 22px -4px var(--primary);
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}
.event-new {
  animation:
    hm-event-slide 0.35s ease-out,
    hm-event-flash 1.1s ease-out;
}
@keyframes hm-sim-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.7);
  }
}
.sim-pulse {
  animation: hm-sim-pulse 1.1s ease-in-out infinite;
}