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

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

:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --radius: 0.65rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.141 0.005 285.823);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.141 0.005 285.823);
  --primary: oklch(0.56 0.21 280);
  --primary-foreground: oklch(0.98 0 0);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.967 0.001 286.375);
  --muted-foreground: oklch(0.552 0.016 285.938);
  --accent: oklch(0.967 0.001 286.375);
  --accent-foreground: oklch(0.21 0.006 285.885);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.92 0.004 286.32);
  --input: oklch(0.92 0.004 286.32);
  --ring: oklch(0.56 0.21 280);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.141 0.005 285.823);
  --sidebar-primary: oklch(0.56 0.21 280);
  --sidebar-primary-foreground: oklch(0.98 0 0);
  --sidebar-accent: oklch(0.967 0.001 286.375);
  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
  --sidebar-border: oklch(0.92 0.004 286.32);
  --sidebar-ring: oklch(0.56 0.21 280);
}

/* Bridge Ory Elements' theme tokens to this app's shadcn tokens above, so
   the Kratos-rendered login/registration/recovery/settings forms read as
   part of the same design system rather than a visually distinct plugin.

   Ory's theme is two-layered: component tokens (--input-*, --button-*)
   derive from a base --interface-* layer (see @ory/elements-react
   tailwind/generated/default-variables.css). We map the base layer here,
   and override individual component tokens only where shadcn's behavior
   diverges (e.g. inputs don't change background on hover, buttons do).
   Anything left unmapped falls back to Ory's slate palette — which also
   ignores our .dark class — so every base token gets a mapping.

   Selector note: Ory declares these tokens directly on `.ory-elements`
   (inside its `@layer ory-elements`), not on :root — and a property set on
   the element itself always beats one inherited from :root. So the bridge
   must also target `.ory-elements`; it wins because this block is
   unlayered, and unlayered CSS outranks any @layer. */
:root,
.ory-elements {
  --ory-background-default: var(--background);
  --ory-foreground-default: var(--foreground);
  --ory-border-default: var(--border);

  /* brand (primary buttons, links, focus) — hover mirrors shadcn's
     hover:bg-primary/90 */
  --interface-background-brand-primary: var(--primary);
  --interface-background-brand-primary-hover: color-mix(
    in oklab,
    var(--primary) 90%,
    transparent
  );
  --interface-foreground-brand-on-primary: var(--primary-foreground);
  --interface-foreground-brand-primary: var(--primary);
  --interface-foreground-brand-secondary: var(--muted-foreground);
  --interface-background-brand-secondary: var(--secondary);
  --interface-background-brand-secondary-hover: var(--accent);
  --interface-foreground-brand-on-secondary: var(--secondary-foreground);
  --interface-border-brand-brand: var(--ring);

  /* neutral surfaces + text */
  --interface-background-default-primary: var(--card);
  --interface-background-default-primary-hover: var(--accent);
  --interface-background-default-secondary: var(--muted);
  --interface-background-default-secondary-hover: var(--accent);
  --interface-background-default-tertiary: var(--muted);
  --interface-background-default-tertiary-hover: var(--accent);
  --interface-background-default-inverted: var(--foreground);
  --interface-background-default-inverted-hover: var(--foreground);
  --interface-foreground-default-primary: var(--foreground);
  --interface-foreground-default-secondary: var(--muted-foreground);
  --interface-foreground-default-tertiary: var(--muted-foreground);
  --interface-foreground-default-inverted: var(--background);
  --interface-border-default-primary: var(--border);
  --interface-border-default-inverted: var(--border);

  /* disabled — shadcn dims with opacity, so reuse muted rather than
     Ory's dedicated slate steps */
  --interface-background-disabled-disabled: var(--muted);
  --interface-foreground-disabled-disabled: var(--muted-foreground);
  --interface-foreground-disabled-on-disabled: var(--muted-foreground);
  --interface-border-disabled-disabled: var(--border);

  /* validation (success/warning keep Ory's universal green/yellow —
     this palette has no tokens for them) */
  --interface-background-validation-danger: var(--destructive);
  --interface-border-validation-danger: var(--destructive);
  --interface-foreground-validation-danger: var(--destructive);

  /* component-level divergences from the base layer */
  --input-border-default: var(--input); /* shadcn border-input */
  --input-border-hover: var(--input); /* inputs don't react to hover */
  --input-background-default: transparent; /* shadcn bg-transparent */
  --input-background-hover: transparent;

  /* radius + font, matching shadcn Card (rounded-xl), Button/Input
     (rounded-md), and the app's own font stack */
  --border-radius-buttons: var(--radius-md);
  --border-radius-forms: var(--radius-md);
  --border-radius-general: var(--radius-md);
  --border-radius-cards: var(--radius-xl);
  --font-sans-default: system-ui, Avenir, Helvetica, Arial, sans-serif;
}

/* shadcn inputs use dark:bg-input/30; Ory's dark block keys off
   [data-theme="dark"] which this app never sets, so mirror it here.
   (`.dark .ory-elements`, not `.dark`: it must out-cascade the light
   bridge's declaration directly on `.ory-elements` above.) */
.dark .ory-elements {
  --input-background-default: color-mix(
    in oklab,
    var(--input) 30%,
    transparent
  );
  --input-background-hover: color-mix(in oklab, var(--input) 30%, transparent);
}

/* Geometry: Ory's controls sit on a ~46px scale (inputs px-4 py-[13px],
   buttons p-4); this app's shadcn kit is the h-9 scale (36px, text-sm on
   md+). Keyed on Ory's stable data-testid hooks, not its compiled class
   names. */
.ory-elements input[data-testid^="ory/form/node/input"] {
  min-height: 2.25rem; /* h-9 */
  padding: 0.25rem 0.75rem; /* px-3 py-1 */
  font-size: 1rem; /* text-base (mobile, avoids iOS zoom) */
  line-height: 1.25rem;
}
.ory-elements input[data-testid^="ory/form/node/input"] ~ button {
  padding-block: 0.25rem; /* password show/hide toggle follows the input */
}
@media (min-width: 768px) {
  .ory-elements input[data-testid^="ory/form/node/input"] {
    font-size: 0.875rem; /* md:text-sm */
  }
}
.ory-elements button[data-testid^="ory/form/node/button"] {
  min-height: 2.25rem; /* h-9 */
  padding: 0.5rem 1rem; /* px-4 py-2 */
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem;
}
/* Focus: shadcn pairs the border swap with a soft 3px ring
   (focus-visible:ring-ring/50 ring-[3px]); Ory only swaps the border. */
.ory-elements input[data-testid^="ory/form/node/input"]:focus-visible,
.ory-elements div:focus-within > input[data-testid^="ory/form/node/input"],
.ory-elements button[data-testid^="ory/form/node/button"]:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}
/* Card: match shadcn Card's density and shadow-sm (Ory defaults to
   px-8 py-12 sm:px-12 sm:py-14 with gap-8 and no shadow). */
.ory-elements [data-testid="ory/card"] {
  gap: 1.5rem; /* gap-6 */
  padding: 1.5rem; /* p-6 */
  box-shadow:
    0 1px 3px 0 rgb(0 0 0 / 0.1),
    0 1px 2px -1px rgb(0 0 0 / 0.1); /* shadow-sm */
}
@media (min-width: 640px) {
  .ory-elements [data-testid="ory/card"] {
    padding: 2rem; /* sm:p-8 */
  }
}

@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);
}

.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.21 0.006 285.885);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.21 0.006 285.885);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.62 0.23 280);
  --primary-foreground: oklch(0.98 0 0);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.274 0.006 286.033);
  --muted-foreground: oklch(0.705 0.015 286.067);
  --accent: oklch(0.274 0.006 286.033);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.62 0.23 280);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.21 0.006 285.885);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.62 0.23 280);
  --sidebar-primary-foreground: oklch(0.98 0 0);
  --sidebar-accent: oklch(0.274 0.006 286.033);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.62 0.23 280);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
    /* Global scrollbar styling - theme-aware and modern */
  }

  body {
    @apply bg-background text-foreground;
  }
}

/* Hide Monaco Editor cursor in read-only mode */
.hide-cursor .cursor,
.hide-cursor .cursors-layer {
  display: none !important;
}

/* Highlighted line in Monaco Editor */
.highlighted-line {
  background: rgba(255, 235, 59, 0.15) !important;
}

.dark .highlighted-line {
  background: rgba(255, 235, 59, 0.1) !important;
}

.highlighted-line-inline {
  background: rgba(255, 235, 59, 0.08) !important;
}

.dark .highlighted-line-inline {
  background: rgba(255, 235, 59, 0.05) !important;
}

/**
 * Global Scrollbar Styling
 * 
 * Provides theme-aware, modern scrollbar styling across the entire application.
 * Inspired by shadcn/ui ScrollArea component design patterns.
 * 
 * Design Principles:
 * - Theme-aware: Uses CSS custom properties (--border, --muted-foreground) that
 *   automatically adapt to light/dark mode
 * - Minimal: Thin scrollbars (10px) with transparent tracks for a clean look
 * - Modern: Fully rounded thumbs with smooth hover transitions
 * - Consistent: Matches the visual style of shadcn/ui components
 * 
 * Cross-browser Support:
 * - Firefox: Uses scrollbar-width and scrollbar-color properties
 * - Webkit (Chrome, Safari, Edge): Uses ::-webkit-scrollbar pseudo-elements
 */

/* Firefox scrollbar styling */
* {
  /* Thin scrollbar width for a modern, minimal appearance */
  scrollbar-width: thin;
  /* Theme-aware colors: thumb uses border color, track is transparent */
  scrollbar-color: var(--border) transparent;
}

/* Webkit browsers (Chrome, Safari, Edge) scrollbar styling */
*::-webkit-scrollbar {
  /* 10px width matches shadcn/ui ScrollArea component (w-2.5 = 10px) */
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  /* Transparent track for a clean, minimal appearance */
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  /* Theme-aware thumb color using border variable */
  background-color: var(--border);
  /* Fully rounded thumb for modern appearance */
  border-radius: 9999px;
  /* Transparent border with padding creates visual spacing from edges */
  border: 2px solid transparent;
  /* Ensures background doesn't extend into border area */
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  /* Darker color on hover for better interactivity feedback */
  background-color: var(--muted-foreground);
  background-clip: padding-box;
}

*::-webkit-scrollbar-corner {
  /* Transparent corner where vertical and horizontal scrollbars meet */
  background: transparent;
}
