@import 'tailwindcss';

:root {
  --background: #000000;
  --foreground: #ededed;
  --bg-primary: #000000;
  --bg-secondary: rgb(5, 5, 8);
  --bg-tertiary: rgb(12, 12, 16);
  --bg-panel: rgba(0, 0, 0, 0.85);
  --border-primary: rgba(8, 145, 178, 0.18);
  --border-secondary: rgba(8, 145, 178, 0.30);
  --border-glow: rgba(6, 182, 212, 0.12);
  --text-primary: rgb(243, 244, 246);
  --text-secondary: rgb(34, 211, 238);
  --text-muted: rgb(8, 145, 178);
  --text-heading: rgb(236, 254, 255);
  --hover-accent: rgba(8, 51, 68, 0.2);
  --scrollbar-thumb: rgba(255, 255, 255, 0.12);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25);
  --font-geist-sans:
    ui-sans-serif, system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans',
    sans-serif;
  --font-roboto-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
}

/* Light theme: only the map basemap changes — UI stays dark */
[data-theme='light'] {
  --background: #000000;
  --foreground: #ededed;
  --bg-primary: #000000;
  --bg-secondary: rgb(5, 5, 8);
  --bg-tertiary: rgb(12, 12, 16);
  --bg-panel: rgba(0, 0, 0, 0.85);
  --border-primary: rgba(8, 145, 178, 0.18);
  --border-secondary: rgba(8, 145, 178, 0.30);
  --border-glow: rgba(6, 182, 212, 0.12);
  --text-primary: rgb(243, 244, 246);
  --text-secondary: rgb(34, 211, 238);
  --text-muted: rgb(8, 145, 178);
  --text-heading: rgb(236, 254, 255);
  --hover-accent: rgba(8, 51, 68, 0.2);
  --scrollbar-thumb: rgba(255, 255, 255, 0.12);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-roboto-mono);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-roboto-mono), 'Roboto Mono', monospace;
}

/* Global interactive cursor hints */
button:not(:disabled),
[role='button']:not([aria-disabled='true']),
a[href],
summary,
label[for],
input[type='button']:not(:disabled),
input[type='submit']:not(:disabled),
input[type='reset']:not(:disabled) {
  cursor: pointer;
}

button:disabled,
[role='button'][aria-disabled='true'],
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
}

/* Styled thin scrollbar for dark HUD UI */
.styled-scrollbar::-webkit-scrollbar {
  width: 5px;
}

.styled-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.styled-scrollbar::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 10px;
}

.styled-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

.styled-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* DOS block cursor blink */
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* ── TERMINAL UTILITY CLASSES ── */

/* Subtle text glow for cyan headings */
.text-glow {
  text-shadow: 0 0 8px rgba(34, 211, 238, 0.3);
}

/* Terminal input — prompt style */
.terminal-input {
  border-radius: 0;
  border: 1px solid rgba(8, 145, 178, 0.25);
  background: rgba(0, 0, 0, 0.4);
}
.terminal-input:focus {
  border-color: rgba(34, 211, 238, 0.5);
  box-shadow: 0 0 6px rgba(34, 211, 238, 0.15);
  outline: none;
}

/* Map popup shared utilities */
.map-popup {
  background: rgba(10, 14, 26, 0.95);
  border-radius: 2px;
  border: 1px solid rgba(8, 145, 178, 0.25);
  padding: 10px 14px;
  color: #e0e6f0;
  font-family:
    var(--font-roboto-mono), 'Roboto Mono', monospace, 'Microsoft YaHei', 'PingFang SC',
    'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', sans-serif;
  font-size: 11px;
  min-width: 220px;
  max-width: 320px;
}

.map-popup-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
  letter-spacing: 1px;
}

.map-popup-row {
  margin-bottom: 4px;
}

.map-popup-subtitle {
  font-size: 9px;
  margin-bottom: 6px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* MapLibre Popup Overrides */
.maplibregl-popup-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.maplibregl-popup-tip {
  display: none !important;
}

/* ── MATRIX HUD COLOR THEME ── */
/* Remaps cyan accents → green within .hud-zone containers only */
[data-hud='matrix'] .hud-zone {
  --text-secondary: #4ade80;
  --text-muted: #16a34a;
  --text-heading: #bbf7d0;
  --hover-accent: rgba(5, 46, 22, 0.2);
  --scrollbar-thumb: rgba(255, 255, 255, 0.12);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25);
  --border-primary: rgba(22, 163, 74, 0.18);
  --border-secondary: rgba(22, 163, 74, 0.30);
  --border-glow: rgba(34, 197, 94, 0.12);
}
[data-hud='matrix'] .hud-zone .text-glow {
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
}

/* --- Text color overrides --- */
[data-hud='matrix'] .hud-zone .text-cyan-300 {
  color: #86efac !important;
}
[data-hud='matrix'] .hud-zone .text-cyan-400 {
  color: #4ade80 !important;
}
[data-hud='matrix'] .hud-zone .text-cyan-500 {
  color: #22c55e !important;
}
[data-hud='matrix'] .hud-zone .text-cyan-600 {
  color: #16a34a !important;
}
[data-hud='matrix'] .hud-zone .text-cyan-700 {
  color: #15803d !important;
}
[data-hud='matrix'] .hud-zone .text-cyan-500\/50 {
  color: rgba(34, 197, 94, 0.5) !important;
}
[data-hud='matrix'] .hud-zone .text-cyan-500\/70 {
  color: rgba(34, 197, 94, 0.7) !important;
}
[data-hud='matrix'] .hud-zone .text-cyan-500\/80 {
  color: rgba(34, 197, 94, 0.8) !important;
}

/* --- Background color overrides --- */
[data-hud='matrix'] .hud-zone .bg-cyan-400 {
  background-color: #4ade80 !important;
}
[data-hud='matrix'] .hud-zone .bg-cyan-300 {
  background-color: #86efac !important;
}
[data-hud='matrix'] .hud-zone .bg-cyan-500 {
  background-color: #22c55e !important;
}
[data-hud='matrix'] .hud-zone .bg-cyan-500\/10 {
  background-color: rgba(34, 197, 94, 0.1) !important;
}
[data-hud='matrix'] .hud-zone .bg-cyan-500\/20 {
  background-color: rgba(34, 197, 94, 0.2) !important;
}
[data-hud='matrix'] .hud-zone .bg-cyan-500\/30 {
  background-color: rgba(34, 197, 94, 0.3) !important;
}
[data-hud='matrix'] .hud-zone .bg-cyan-900\/30 {
  background-color: rgba(20, 83, 45, 0.3) !important;
}
[data-hud='matrix'] .hud-zone .bg-cyan-900\/50 {
  background-color: rgba(20, 83, 45, 0.5) !important;
}
[data-hud='matrix'] .hud-zone .bg-cyan-900\/60 {
  background-color: rgba(20, 83, 45, 0.6) !important;
}
[data-hud='matrix'] .hud-zone .bg-cyan-950\/10 {
  background-color: rgba(5, 46, 22, 0.1) !important;
}
[data-hud='matrix'] .hud-zone .bg-cyan-950\/30 {
  background-color: rgba(5, 46, 22, 0.3) !important;
}
[data-hud='matrix'] .hud-zone .bg-cyan-950\/40 {
  background-color: rgba(5, 46, 22, 0.4) !important;
}

/* --- Border color overrides --- */
[data-hud='matrix'] .hud-zone .border-cyan-400 {
  border-color: #4ade80 !important;
}
[data-hud='matrix'] .hud-zone .border-cyan-500 {
  border-color: #22c55e !important;
}
[data-hud='matrix'] .hud-zone .border-cyan-700 {
  border-color: #15803d !important;
}
[data-hud='matrix'] .hud-zone .border-cyan-800 {
  border-color: #166534 !important;
}
[data-hud='matrix'] .hud-zone .border-cyan-900 {
  border-color: #14532d !important;
}
[data-hud='matrix'] .hud-zone .border-cyan-500\/10 {
  border-color: rgba(34, 197, 94, 0.1) !important;
}
[data-hud='matrix'] .hud-zone .border-cyan-500\/20 {
  border-color: rgba(34, 197, 94, 0.2) !important;
}
[data-hud='matrix'] .hud-zone .border-cyan-500\/30 {
  border-color: rgba(34, 197, 94, 0.3) !important;
}
[data-hud='matrix'] .hud-zone .border-cyan-500\/40 {
  border-color: rgba(34, 197, 94, 0.4) !important;
}
[data-hud='matrix'] .hud-zone .border-cyan-500\/50 {
  border-color: rgba(34, 197, 94, 0.5) !important;
}
[data-hud='matrix'] .hud-zone .border-cyan-800\/40 {
  border-color: rgba(22, 101, 52, 0.4) !important;
}
[data-hud='matrix'] .hud-zone .border-cyan-800\/50 {
  border-color: rgba(22, 101, 52, 0.5) !important;
}
[data-hud='matrix'] .hud-zone .border-cyan-800\/60 {
  border-color: rgba(22, 101, 52, 0.6) !important;
}
[data-hud='matrix'] .hud-zone .border-cyan-900\/50 {
  border-color: rgba(20, 83, 45, 0.5) !important;
}
[data-hud='matrix'] .hud-zone .border-b-cyan-900 {
  border-bottom-color: #14532d !important;
}
[data-hud='matrix'] .hud-zone .border-l-cyan-500 {
  border-left-color: #22c55e !important;
}

/* --- Hover text --- */
[data-hud='matrix'] .hud-zone .hover\:text-cyan-300:hover {
  color: #86efac !important;
}
[data-hud='matrix'] .hud-zone .hover\:text-cyan-400:hover {
  color: #4ade80 !important;
}

/* --- Hover background --- */
[data-hud='matrix'] .hud-zone .hover\:bg-cyan-300:hover {
  background-color: #86efac !important;
}
[data-hud='matrix'] .hud-zone .hover\:bg-cyan-500\/20:hover {
  background-color: rgba(34, 197, 94, 0.2) !important;
}
[data-hud='matrix'] .hud-zone .hover\:bg-cyan-900\/50:hover {
  background-color: rgba(20, 83, 45, 0.5) !important;
}
[data-hud='matrix'] .hud-zone .hover\:bg-cyan-950\/30:hover {
  background-color: rgba(5, 46, 22, 0.3) !important;
}

/* --- Hover border --- */
[data-hud='matrix'] .hud-zone .hover\:border-cyan-300:hover {
  border-color: #86efac !important;
}
[data-hud='matrix'] .hud-zone .hover\:border-cyan-500:hover {
  border-color: #22c55e !important;
}
[data-hud='matrix'] .hud-zone .hover\:border-cyan-500\/40:hover {
  border-color: rgba(34, 197, 94, 0.4) !important;
}
[data-hud='matrix'] .hud-zone .hover\:border-cyan-500\/50:hover {
  border-color: rgba(34, 197, 94, 0.5) !important;
}
[data-hud='matrix'] .hud-zone .hover\:border-cyan-600:hover {
  border-color: #16a34a !important;
}
[data-hud='matrix'] .hud-zone .hover\:border-cyan-800:hover {
  border-color: #166534 !important;
}

/* --- Accent (range inputs) --- */
[data-hud='matrix'] .hud-zone .accent-cyan-500 {
  accent-color: #22c55e !important;
}

/* Focus mode: dim the map canvas (tiles + drawn layers) when a popup is active.
   Inside MapLibre's DOM, .maplibregl-canvas-container is a SIBLING of .maplibregl-popup,
   so this filter dims the map without affecting the popup at all. */
.map-focus-active .maplibregl-canvas-container {
  filter: brightness(0.3);
  transition: filter 0.3s ease;
}

/* Keep popups fully bright and interactive above the dimmed canvas */
.map-focus-active .maplibregl-popup {
  z-index: 10 !important;
}

/* ── INFONET CRT TERMINAL EFFECTS ── */

.infonet-font {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

/* CRT scanline overlay — scoped to .crt containers only */
.crt {
  position: relative;
  animation: crt-flicker 0.15s infinite;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
}

.crt::before {
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background:
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
    linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.06),
      rgba(0, 255, 0, 0.02),
      rgba(0, 0, 255, 0.06)
    );
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

@keyframes crt-flicker {
  0% {
    opacity: 0.95;
  }
  5% {
    opacity: 0.85;
  }
  10% {
    opacity: 0.95;
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crt {
    animation: none;
  }
  .crt::before {
    display: none;
  }
}

/* Ticker animation for InfoNet */
@keyframes infonet-ticker {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.animate-ticker {
  display: inline-block;
  white-space: nowrap;
  animation: infonet-ticker 90s linear infinite;
}

/* Scoped scrollbar for CRT terminal */
.crt ::-webkit-scrollbar {
  width: 8px;
}
.crt ::-webkit-scrollbar-track {
  background: #0a0a0a;
}
.crt ::-webkit-scrollbar-thumb {
  background: #4b5563;
}
.crt ::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}