@import "tailwindcss";

/* Design tokens from spec §7 (ported from tailwind.config.ts for Tailwind v4) */
@theme {
  --color-brand-50: #fdf3f8;
  --color-brand-100: #fdeaf3;
  --color-brand-200: #f6cfe2;
  --color-brand-500: #d6046e;
  --color-brand-600: #b0035a;
  --color-brand-700: #a30354;

  --color-surface: #f9f1f5;

  --color-border: #eedde6;
  --color-border-subtle: #f7e8ef;

  --color-ink: #2d1c26;
  --color-ink-body: #503b47;
  --color-ink-muted: #7a636f;

  --color-success-bg: #dff6dd;
  --color-success-text: #0e700e;

  --color-danger-bg: #fde7e9;
  --color-danger-text: #b10e1c;
  --color-danger-solid: #c50f1f;

  --color-warning-bg: #fff4ce;
  --color-warning-text: #835b00;

  --color-info-bg: #d7f0f0;
  --color-info-text: #00666d;

  --color-purple-bg: #f0ecf7;
  --color-purple-text: #5c2e91;

  --radius: 8px;

  --font-sans: var(--font-nunito), system-ui, sans-serif;
}

body {
  background-color: var(--color-surface);
  color: var(--color-ink);
  /* iOS bounce-scrolls the whole document behind fixed overlays (drawer,
     modal) and shows the white page edge; contain keeps the rubber band
     inside the scroller that actually overflowed. */
  overscroll-behavior-y: none;
}

/* Mobile browsers zoom the page when a focused input is under ~16px. Every
   form control in this app is text-sm (14px), so without this, tapping any
   field on iOS Safari jumps the layout. */
@media (max-width: 767px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

/* Touch devices have no hover, so the grey flash Chrome/Safari paint on tap
   is the only press feedback — but their default is a hard blue box. */
@media (hover: none) {
  * {
    -webkit-tap-highlight-color: color-mix(in srgb, var(--color-brand-500) 12%, transparent);
  }
}

/* ── React Flow chrome ─────────────────────────────────────────────
   The library ships a generic grey control panel; these bring it onto the
   app's own palette and give the buttons a real touch target. */
.orgchart-canvas .react-flow__controls {
  gap: 2px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: #fff;
  box-shadow: 0 2px 10px rgb(45 28 38 / 0.08);
  overflow: hidden;
}

.orgchart-canvas .react-flow__controls-button {
  width: 32px;
  height: 32px;
  border: none;
  border-bottom: 1px solid var(--color-border-subtle);
  background: #fff;
  color: var(--color-ink-body);
}

.orgchart-canvas .react-flow__controls-button:last-child {
  border-bottom: none;
}

.orgchart-canvas .react-flow__controls-button:hover {
  background: var(--color-brand-100);
  color: var(--color-brand-700);
}

.orgchart-canvas .react-flow__controls-button svg {
  fill: currentColor;
  max-width: 14px;
  max-height: 14px;
}

.orgchart-canvas .react-flow__minimap {
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: #fff;
  box-shadow: 0 2px 10px rgb(45 28 38 / 0.08);
}

/* Node selection has to stay enabled (it is what gives the card pointer
   events at all — see GraphOrgChart), but the card carries its own hover and
   match styling, so React Flow's default selected/focus outline is noise. */
.orgchart-canvas .react-flow__node.selected,
.orgchart-canvas .react-flow__node:focus,
.orgchart-canvas .react-flow__node:focus-visible {
  outline: none;
  box-shadow: none;
}

.orgchart-canvas .react-flow__attribution {
  background: transparent;
  font-size: 10px;
}

.orgchart-canvas .react-flow__attribution a {
  color: var(--color-ink-muted);
}

/* The minimap costs more screen than it earns on a phone. */
@media (max-width: 1023px) {
  .orgchart-canvas .react-flow__minimap {
    display: none;
  }
}