@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 220 14% 96%;
    --foreground: 222 47% 11%;
    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;
    --primary: 196 100% 50%;
    --primary-foreground: 222 47% 11%;
    --secondary: 220 14% 90%;
    --secondary-foreground: 222 47% 11%;
    --muted: 220 14% 90%;
    --muted-foreground: 222 13% 40%;
    --accent: 320 100% 60%;
    --accent-foreground: 222 47% 11%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    --border: 220 14% 85%;
    --input: 220 14% 85%;
    --ring: 196 100% 50%;
    --radius: 0.75rem;
  }

  .dark {
    --background: 222 47% 5%;
    --foreground: 210 40% 96%;
    --card: 222 47% 7%;
    --card-foreground: 210 40% 96%;
    --primary: 184 100% 55%;
    --primary-foreground: 222 47% 5%;
    --secondary: 222 47% 11%;
    --secondary-foreground: 210 40% 96%;
    --muted: 222 47% 11%;
    --muted-foreground: 215 20% 65%;
    --accent: 320 100% 65%;
    --accent-foreground: 222 47% 5%;
    --destructive: 0 73% 50%;
    --destructive-foreground: 210 40% 96%;
    --border: 222 47% 14%;
    --input: 222 47% 14%;
    --ring: 184 100% 55%;
  }

  * {
    @apply border-border;
  }

  html,
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1;
    /* Avoid horizontal page scrolling on mobile when nested elements
       briefly overflow (e.g. while ReactFlow lays out).
       Use `clip` instead of `hidden` — `hidden` creates a scrolling
       context which breaks `position: sticky` on the site header. */
    overflow-x: clip;
  }

  body {
    /* Honour the iOS safe-area insets at the page edge. The header is
       sticky and the footer can also bump against the home indicator. */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    /* Remove the 300 ms tap delay on touch devices for fast UI. */
    touch-action: manipulation;
  }

  /* iOS momentum scrolling on horizontally scrolling containers
     (tables, the nav strip, the bucket filters). */
  [class~="overflow-x-auto"],
  [class~="overflow-auto"] {
    -webkit-overflow-scrolling: touch;
  }

  /* Stop iOS auto-zoom on focus by ensuring text inputs render at
     >= 16px on small screens — they shrink back to xs at sm+. */
  @media (max-width: 639px) {
    input,
    textarea,
    select {
      font-size: 16px;
    }
  }
}

/* ──────────────────────────────────────────────────────────────────
   xyflow (React Flow) Controls — dark-theme overrides.
   Placed OUTSIDE @layer so Tailwind never tree-shakes the rules and
   the chunk order can't lose to xyflow's own stylesheet.
   ────────────────────────────────────────────────────────────────── */
.react-flow__controls.react-flow__controls,
.react-flow .react-flow__controls {
  background-color: hsl(var(--card) / 0.85) !important;
  border: 1px solid hsl(var(--border) / 0.6) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
.react-flow .react-flow__controls-button,
button.react-flow__controls-button {
  background-color: hsl(var(--card)) !important;
  border: none !important;
  border-bottom: 1px solid hsl(var(--border) / 0.6) !important;
  color: hsl(var(--foreground)) !important;
}
.react-flow .react-flow__controls-button:last-child {
  border-bottom: none !important;
}
.react-flow .react-flow__controls-button:hover,
button.react-flow__controls-button:hover {
  background-color: hsl(var(--accent) / 0.4) !important;
}
.react-flow .react-flow__controls-button svg,
.react-flow .react-flow__controls-button svg *,
button.react-flow__controls-button svg,
button.react-flow__controls-button svg * {
  fill: hsl(var(--foreground)) !important;
  stroke: hsl(var(--foreground)) !important;
}

/* Touch-friendly size bump on small screens for the zoom/fit buttons. */
@media (max-width: 639px) {
  .react-flow .react-flow__controls-button,
  button.react-flow__controls-button {
    width: 32px !important;
    height: 32px !important;
  }
}

@layer utilities {
  .grid-bg {
    background-image:
      linear-gradient(rgba(0, 240, 255, 0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 240, 255, 0.06) 1px, transparent 1px);
    background-size: 32px 32px;
  }

  .glow-cyan {
    box-shadow:
      0 0 0 1px rgba(0, 240, 255, 0.25),
      0 0 24px -8px rgba(0, 240, 255, 0.45);
  }

  .glow-magenta {
    box-shadow:
      0 0 0 1px rgba(255, 0, 212, 0.25),
      0 0 24px -8px rgba(255, 0, 212, 0.45);
  }

  .text-balance {
    text-wrap: balance;
  }
}