index.css

@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --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-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --color-link: var(--link);
}

:root {
  --radius: 0.625rem;
  /* neutrals and text aligned with dark mode, keep airy light bg */
  --background: oklch(0.997 0.002 247.8); /* gray-50 */
  --foreground: oklch(0.30 0.089 257.8); /* text-dark */
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.347 0.089 257.8);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.347 0.089 257.8);

  /* brand parity with dark: primary = pink, accent = blue */
  --primary: oklch(0.548 0.19 354.2);      /* pink (secondary-color) */
  --primary-foreground: oklch(1 0 0);      /* white */
  --secondary: oklch(0.967 0.003 264.5);   /* gray-100 surface */
  --secondary-foreground: oklch(0.347 0.089 257.8);
  --muted: oklch(0.967 0.003 264.5);       /* gray-100 */
  --muted-foreground: oklch(0.458 0.016 244.9); /* text-muted */
  --accent: oklch(0.347 0.089 257.8);
  --accent-foreground: oklch(1 0 0);       /* white */

  /* status and surfaces */
  --destructive: oklch(0.712 0.181 22.8);
  --border: oklch(0.868 0.006 264.5);
  --input: oklch(0.868 0.006 264.5);
  --ring: oklch(0.693 0.165 254);          /* align with dark ring */

  /* charts stay consistent */
  --chart-1: oklch(0.548 0.19 354.2);
  --chart-2: oklch(0.693 0.165 254);
  --chart-3: oklch(0.708 0.154 123.6);
  --chart-4: oklch(0.769 0.165 70.1);
  --chart-5: oklch(0.449 0.095 252.4);

  /* sidebar consistent with dark emphasis */
  --sidebar: oklch(0.967 0.003 264.5);           /* gray-100 */
  --sidebar-foreground: oklch(0.347 0.089 257.8);
  --sidebar-primary: oklch(0.693 0.165 254);     /* accent-blue */
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.934 0.012 248);      /* light-blue */
  --sidebar-accent-foreground: oklch(0.347 0.089 257.8);
  --sidebar-border: oklch(0.868 0.006 264.5);
  --sidebar-ring: oklch(0.693 0.165 254);

  --link:oklch(55.8% 0.288 302.321);
}

.dark {
  /* dark background based on test.css primary-dark */
  --background: oklch(0.268 0.071 259.3);
  --foreground: oklch(1 0 0);

  /* surfaces */
  --card: oklch(0.236 0.073 258);              /* primary-color (slightly darker surface) */
  --card-foreground: oklch(1 0 0);
  --popover: oklch(0.236 0.073 258);
  --popover-foreground: oklch(1 0 0);

  /* interactive colors - slightly lighter pink for readability on dark backgrounds */
  --primary: oklch(61.202% 0.19764 353.887);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.373 0.031 259.7);       /* gray-700 for subtle surfaces */
  --secondary-foreground: oklch(1 0 0);
  --muted: oklch(0.373 0.031 259.7);
  --muted-foreground: oklch(0.872 0.009 258.3);
  --accent: oklch(0.548 0.19 354.2);           /* secondary-color as accent */
  --accent-foreground: oklch(1 0 0);

  /* status and controls */
  --destructive: oklch(0.712 0.181 22.8);
  --border: oklch(1 0 0 / 12%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.693 0.165 254);

  /* charts */
  --chart-1: oklch(0.548 0.19 354.2);
  --chart-2: oklch(0.693 0.165 254);
  --chart-3: oklch(0.708 0.154 123.6);
  --chart-4: oklch(0.769 0.165 70.1);
  --chart-5: oklch(0.449 0.095 252.4);

  /* sidebar */
  --sidebar: oklch(0.268 0.071 259.3);               /* primary-dark */
  --sidebar-foreground: oklch(1 0 0);
  --sidebar-primary: oklch(0.693 0.165 254);         /* accent-blue */
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.373 0.031 259.7);        /* gray-700 */
  --sidebar-accent-foreground: oklch(1 0 0);
  --sidebar-border: oklch(1 0 0 / 12%);
  --sidebar-ring: oklch(0.693 0.165 254);

  --link:oklch(71.4% 0.203 305.504);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
  /* Markdown typography prose styles */
  /* e.g. for use in Terms & Policies page content */
  .prose {
    @apply text-foreground leading-relaxed;
  }
  .prose h1 {
    @apply text-3xl font-bold tracking-tight mb-6 mt-8 first:mt-0;
  }
  .prose h2 {
    @apply text-2xl font-semibold tracking-tight mb-4 mt-8 first:mt-0;
  }
  .prose h3 {
    @apply text-xl font-semibold mb-3 mt-6 first:mt-0;
  }
  .prose h4 {
    @apply text-lg font-semibold mb-2 mt-4 first:mt-0;
  }
  .prose p {
    @apply mb-4 last:mb-0;
  }
  .prose a {
    @apply text-primary underline underline-offset-4 hover:text-primary/80 transition-colors;
  }
  .prose ul {
    @apply list-disc list-outside mb-4 pl-6;
  }
  .prose ol {
    @apply list-decimal list-outside mb-4 pl-6;
  }
  .prose li {
    @apply mb-1;
  }
  .prose li > ul,
  .prose li > ol {
    @apply mt-1 mb-2;
  }
  .prose blockquote {
    @apply border-l-4 border-primary/50 pl-4 italic my-4 text-muted-foreground;
  }
  .prose code {
    @apply bg-muted px-1.5 py-0.5 rounded text-sm font-mono;
  }
  .prose pre {
    @apply bg-muted p-4 rounded-lg overflow-x-auto my-4;
  }
  .prose pre code {
    @apply bg-transparent p-0;
  }
  .prose hr {
    @apply border-border my-8;
  }
  .prose strong {
    @apply font-semibold;
  }
  .prose em {
    @apply italic;
  }
  .prose table {
    @apply w-full border-collapse my-4;
  }
  .prose th {
    @apply border border-border px-3 py-2 text-left font-semibold bg-muted;
  }
  .prose td {
    @apply border border-border px-3 py-2;
  }
  /* END Markdown typography prose styles */
  .leaflet-container {
    @apply bg-card! font-[inherit]! text-primary;
  }
  .leaflet-container a {
    @apply text-inherit!;
  }
  .leaflet-div-icon {
    @apply bg-transparent! border-none!;
  }
  .leaflet-popup-content-wrapper, .leaflet-popup-content, .leaflet-popup-content p {
    @apply [all:unset]!;
  }
  .leaflet-popup {
    @apply animate-none!;
  }
  .leaflet-popup-close-button {
    @apply ring-offset-background focus:ring-ring bg-secondary rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:outline-hidden;
  }
  .leaflet-tooltip, .leaflet-draw-tooltip {
    @apply bg-foreground! text-background! animate-none! rounded-md! border-none! p-0! px-3! py-1.5 shadow-none!;
  }
  .leaflet-draw-tooltip:before {
    @apply bg-foreground top-1/2! right-0.5! size-2.5 translate-x-1/2 -translate-y-1/2 rotate-45 rounded-[2px] border-none!;
  }
  .leaflet-error-draw-tooltip {
    @apply bg-destructive! text-white!;
  }
  .leaflet-error-draw-tooltip:before {
    @apply bg-destructive;
  }
  .leaflet-draw-tooltip-subtext {
    @apply text-background!;
  }
  .leaflet-popup-tip-container, .leaflet-tooltip-top:before, .leaflet-tooltip-bottom:before, .leaflet-tooltip-left:before, .leaflet-tooltip-right:before {
    @apply hidden;
  }
  .leaflet-control-attribution {
    @apply bg-muted! rounded-md !px-[4px] !py-[2px] text-[10px] leading-none! text-inherit!;
  }
  .leaflet-draw-guide-dash {
    @apply rounded-full;
  }
  .leaflet-edit-marker-selected {
    @apply border-transparent! bg-transparent!;
  }
  .marker-cluster div {
    @apply font-[inherit];
  }
}

/* The following CSS fixes issues in the SparqlEditor component (CodeEditor)
 *
 * rehype-prism-plus line numbers for @uiw/react-textarea-code-editor
 *
 * The editor overlays a transparent <textarea> on top of a <pre> preview.
 * Both layers must share the same padding so that cursor/selection coordinates
 * in the textarea match the visually rendered code in the preview.
 *
 * The textarea is position:absolute and comes FIRST in DOM order, while the
 * preview div is static and comes SECOND — so the preview sits on top and
 * intercepts mouse clicks.  We fix this with z-index on the textarea and
 * pointer-events:none on the preview.
 *
 * Line numbers are rendered as absolutely-positioned ::before pseudo-elements
 * inside the left padding gutter so they don't shift the inline text flow.
 */

/* Ensure the textarea receives all mouse events (it's position:absolute but
   rendered before the preview in DOM order, so it's behind by default). */
.w-tc-editor .w-tc-editor-text {
  z-index: 1;
}

/* The preview layer is purely visual — let clicks pass through to textarea. */
.w-tc-editor .w-tc-editor-preview {
  pointer-events: none;
}

/* Add left padding to BOTH the textarea and the preview to make room for the
   line-number gutter.  The component sets padding via inline styles, so we
   need !important to override. */
.w-tc-editor .w-tc-editor-text,
.w-tc-editor .w-tc-editor-preview {
  padding-left: 3.5em !important;
}

/* Each code-line needs relative positioning so the absolutely-positioned
   ::before can anchor to it. */
.w-tc-editor .code-line {
  position: relative;
}

/* Line number pseudo-element: sits in the left gutter without affecting
   inline text flow, keeping textarea and preview perfectly aligned. */
.w-tc-editor .code-line::before {
  content: attr(line);
  position: absolute;
  left: -3em;
  width: 2.5em;
  text-align: right;
  color: #6e7781;
  user-select: none;
  pointer-events: none;
}

@import "@daveyplate/better-auth-ui/css";