/* ============================================================
   STIX Graph — Threat Intelligence Visualizer
   Global styles + design tokens

   Ported from the Figma Make source's src/styles/theme.css
   (Tailwind v4 "@theme" tokens) into plain CSS custom
   properties, since this build has no Tailwind/PostCSS step.
   ============================================================ */

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

:root {
  --background: #f4f6f8;
  --foreground: #1c2026;
  --card: #ffffff;
  --card-foreground: #1c2026;
  --popover: #161b22;
  --primary: #0a7c3e;
  --secondary: #e8ecf0;
  --secondary-foreground: #4a5568;
  --muted: #e8ecf0;
  --muted-foreground: #6b7280;
  --accent: #0077a8;
  --destructive: #cc2222;
  --border: rgba(0, 0, 0, 0.12);

  /* App-specific theme tokens (mirrors the `th` object computed
     in App.tsx, kept here as CSS vars so JS and CSS stay in sync) */
  --app-bg: #f4f6f8;
  --app-surface: #ffffff;
  --app-surface-2: #e8ecf0;
  --app-border: rgba(0, 0, 0, 0.1);
  --app-border-2: rgba(0, 0, 0, 0.08);
  --app-fg: #1c2026;
  --app-fg-muted: #6b7280;
  --app-fg-subtle: #9ca3af;
  --app-accent: #0a7c3e;
  --app-accent-blue: #0077a8;
  --app-danger: #cc2222;
  --app-graph-bg: #f0f2f5;
}

.dark {
  --background: #0a0c10;
  --foreground: #c9d1d9;
  --card: #0d1117;
  --card-foreground: #c9d1d9;
  --popover: #161b22;
  --primary: #00ff88;
  --secondary: #161b22;
  --secondary-foreground: #8b949e;
  --muted: #161b22;
  --muted-foreground: #8b949e;
  --accent: #00b4d8;
  --destructive: #ff4444;
  --border: rgba(48, 54, 61, 0.9);

  --app-bg: #0a0c10;
  --app-surface: #0d1117;
  --app-surface-2: #161b22;
  --app-border: #21262d;
  --app-border-2: #30363d;
  --app-fg: #c9d1d9;
  --app-fg-muted: #8b949e;
  --app-fg-subtle: #484f58;
  --app-accent: #00ff88;
  --app-accent-blue: #00b4d8;
  --app-danger: #ff4444;
  --app-graph-bg: #0a0c10;
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: var(--app-bg);
  color: var(--app-fg);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button,
input {
  font-family: inherit;
}

/* ---- thin scrollbar (matches DetailSidebar's scrollbarWidth/Color) ---- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--app-border) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-thumb {
  background: var(--app-border-2);
  border-radius: 4px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

/* ============================================================
   Minimal utility classes — the small subset of Tailwind
   utilities the original components used, hand-rolled here
   since there is no Tailwind build step.
   ============================================================ */

.size-full { width: 100%; height: 100%; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.shrink-0 { flex-shrink: 0; }
.min-h-0 { min-height: 0; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.hidden { display: none; }
.cursor-pointer { cursor: pointer; }
.text-center { text-align: center; }
.gap-1 { gap: 4px; }
.gap-1\.5 { gap: 6px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 20px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.py-1\.5 { padding-top: 6px; padding-bottom: 6px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.pt-3 { padding-top: 12px; }
.pb-2 { padding-bottom: 8px; }
.pb-4 { padding-bottom: 16px; }
.p-14 { padding: 56px; }
.top-4 { top: 16px; }
.right-4 { right: 16px; }
.bottom-4 { bottom: 16px; }
.left-4 { left: 16px; }
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.max-w-48 { max-width: 12rem; }
.min-w-0 { min-width: 0; }
.pointer-events-none { pointer-events: none; }

@media (max-width: 720px) {
  header span.app-tagline { display: none; }
  .app-detail-sidebar { position: absolute !important; right: 0; top: 0; bottom: 0; z-index: 20; }
}