@import "tailwindcss";

@plugin "tailwindcss-animate";

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

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-cta: var(--cta);
  --color-cta-foreground: var(--cta-foreground);
}

:root {
  --radius: 0.625rem;
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --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.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  /* Single restrained warm accent — used only on primary CTAs + focus rings. */
  --cta: oklch(0.72 0.15 65);
  --cta-foreground: oklch(0.16 0.02 60);
  /* Giant faded "dograh" wordmark (authentic Proxima Nova letterforms traced
     from the brand logo PNG — the font is commercial, so the lettering ships
     as static artwork in /public; fill + 0.9% opacity are baked into the
     files). Theme-switched here; consumed by .app-surface and .auth-imprint. */
  --brand-imprint: url("/brand-imprint-light.svg");
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --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.556 0 0);
  --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.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
  /* Warm accent, slightly brighter against the near-black surfaces. */
  --cta: oklch(0.78 0.16 67);
  --cta-foreground: oklch(0.16 0.02 60);
  --brand-imprint: url("/brand-imprint-dark.svg");
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

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

@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin-slow {
  animation: spin-slow 3s linear infinite;
}

/* Attention pulse applied by OnboardingTooltip to the element its arrow points
   at; removed automatically when the tooltip is dismissed. Blue matches the
   tooltip body so the ring and the callout read as one unit. Two shadow layers:
   a constant outline so the target stays highlighted between pulses, plus an
   expanding wave, with a slight breathing scale on top. */
.onboarding-pulse {
  animation: onboarding-pulse 1.5s ease-out infinite;
}

@keyframes onboarding-pulse {
  0% {
    box-shadow:
      0 0 0 3px rgba(59, 130, 246, 0.75),
      0 0 0 3px rgba(59, 130, 246, 0.6);
    transform: scale(1);
  }
  40% {
    transform: scale(1.04);
  }
  70% {
    box-shadow:
      0 0 0 3px rgba(59, 130, 246, 0.75),
      0 0 0 18px rgba(59, 130, 246, 0);
    transform: scale(1);
  }
  100% {
    box-shadow:
      0 0 0 3px rgba(59, 130, 246, 0.75),
      0 0 0 18px rgba(59, 130, 246, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-pulse {
    animation: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.6);
  }
}

@layer components {
  /* CSS-only audio-waveform motif for the auth brand panel. A row of bars that
     breathe at staggered intervals, evoking live voice. Decorative only. */
  .auth-waveform {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    height: 3.5rem;
  }

  .auth-waveform span {
    display: block;
    width: 0.25rem;
    border-radius: 9999px;
    background: linear-gradient(
      to top,
      color-mix(in oklch, var(--cta) 70%, transparent),
      color-mix(in oklch, var(--cta) 25%, transparent)
    );
    animation: auth-wave 1.4s ease-in-out infinite;
    transform-origin: center;
  }

  .auth-waveform span:nth-child(1) { animation-delay: 0s; height: 35%; }
  .auth-waveform span:nth-child(2) { animation-delay: 0.15s; height: 65%; }
  .auth-waveform span:nth-child(3) { animation-delay: 0.3s; height: 100%; }
  .auth-waveform span:nth-child(4) { animation-delay: 0.45s; height: 55%; }
  .auth-waveform span:nth-child(5) { animation-delay: 0.6s; height: 80%; }
  .auth-waveform span:nth-child(6) { animation-delay: 0.3s; height: 45%; }
  .auth-waveform span:nth-child(7) { animation-delay: 0.15s; height: 70%; }
  .auth-waveform span:nth-child(8) { animation-delay: 0s; height: 30%; }

  @keyframes auth-wave {
    0%, 100% { transform: scaleY(0.4); opacity: 0.7; }
    50% { transform: scaleY(1); opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .auth-waveform span { animation: none; }
  }

  /* Matte app background — flat charcoal (dark) / soft paper (light), NO
     gradients, with one subtle graphic in BOTH themes: the giant faded
     "dograh" wordmark (--brand-imprint, defined in :root/.dark) pinned to
     the bottom of the viewport, echoing the dograh.com footer. */
  /* NOTE: background-attachment: fixed positions in VIEWPORT space but only
     paints inside .app-surface, which starts right of the ~270px sidebar —
     the +135px x-shift recentres the wordmark on the VISIBLE canvas. */
  .app-surface {
    background-color: oklch(0.984 0.001 80);
    background-image: var(--brand-imprint);
    background-size: min(68vw, 980px) auto;
    background-position: calc(50% + 135px) calc(100% - 24px);
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  /* Sidebar is offcanvas on small screens — true centre there. */
  @media (max-width: 767px) {
    .app-surface {
      background-position: center calc(100% - 24px);
    }
  }
  .dark .app-surface {
    background-color: oklch(0.165 0.002 80);
  }

  /* Giant faded "dograh" imprint for the auth pages (applied to the AuthShell
     form column, shared by Stack + OSS login/signup). Same --brand-imprint as
     .app-surface; element-relative here (no fixed attachment), so it centers
     and scales to whatever element carries the class. */
  .auth-imprint {
    background-image: var(--brand-imprint);
    background-size: min(86%, 920px) auto;
    background-position: center calc(100% - 32px);
    background-repeat: no-repeat;
  }

  /* "On air" indicator for the event banner's LIVE eyebrow: the dot itself
     breathes while a halo ring expands out of it, so the label reads as a live
     signal rather than a static bullet. The ring is a box-shadow (no extra
     element), so the dot stays a 1.5x1.5 box in the flex row. */
  .signal-pulse {
    animation: signal-pulse 2s ease-out infinite;
  }

  @keyframes signal-pulse {
    0% {
      box-shadow: 0 0 0 0 color-mix(in oklab, var(--cta) 55%, transparent);
      opacity: 1;
    }
    70% {
      box-shadow: 0 0 0 4px color-mix(in oklab, var(--cta) 0%, transparent);
      opacity: 0.65;
    }
    100% {
      box-shadow: 0 0 0 0 color-mix(in oklab, var(--cta) 0%, transparent);
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .signal-pulse {
      animation: none;
    }
  }

}

/* ---------------------------------------------------------------------------
   UN-LAYERED overrides. These intentionally live OUTSIDE @layer blocks:
   they restyle elements that carry Tailwind utility classes (bg-sidebar,
   rounded-lg, shadow-sm, border-*) and utilities sit in a later cascade
   layer than @layer components — un-layered author CSS beats both.
--------------------------------------------------------------------------- */

/* Floating-dock sidebar: detached rounded panel. Targets the shadcn sidebar's
   inner panel; applied via .app-sidebar-dock on <Sidebar variant="floating">. */
.app-sidebar-dock [data-slot="sidebar-inner"] {
  border-radius: 1.25rem;
  overflow: hidden;
}
/* Flat carbon-charcoal panel with a soft light glow along the LEFT edge:
   a 1px highlight line plus an inner bloom fading rightwards. */
.dark .app-sidebar-dock [data-slot="sidebar-inner"] {
  border-color: rgb(255 255 255 / 0.1);
  background-color: oklch(0.18 0.002 80);
  box-shadow:
    inset 1px 0 0 rgb(255 255 255 / 0.1),
    inset 3px 0 6px -4px rgb(255 255 255 / 0.08),
    0 24px 50px -14px rgb(0 0 0 / 0.85);
}

/* Card surface ("Crosshatch + Top-Lit Edge", user-approved 2026-06-11 after a
   3-round design board): a 45° hairline twill weave at 1% laid over the panel
   colour, plus — dark mode only — a brighter SOLID top border, like light
   catching the machined top edge of the panel. Applied app-wide by the Card
   primitive (components/ui/card.tsx). Un-layered so border-top-color beats
   the border-border/60 utility. No gradients (user constraint). */
.card-weave {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M0 0l12 12M12 0L0 12' stroke='%23000000' stroke-opacity='.015' fill='none'/%3E%3C/svg%3E");
  background-repeat: repeat;
}
.dark .card-weave {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M0 0l12 12M12 0L0 12' stroke='%23ffffff' stroke-opacity='.01' fill='none'/%3E%3C/svg%3E");
  border-top-color: rgb(255 255 255 / 0.2);
}

/* Lead-form shell ("Ledger" treatment, user-approved 2026-06-11): neutral
   charcoal slab where ONLY the header band is darker (body and footer share
   the slab colour), muted compact labels, and underline-only fields with an
   amber underline on focus. Applied by LeadModalShell; CaptchaChallenge
   reuses slab + underline. */
.dark .lead-form-slab {
  background-color: oklch(0.215 0 0);
  border-color: rgb(255 255 255 / 0.1);
}
/* Muted, compact labels — the big white default labels read amateurish. */
.lead-form-underline label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
/* Ghost placeholders: present on every field, but barely-there. */
.lead-form-underline :is(input, textarea)::placeholder {
  color: var(--muted-foreground);
  opacity: 0.14;
}
.lead-form-underline [data-slot="select-trigger"][data-placeholder] {
  color: color-mix(in oklab, var(--muted-foreground) 17%, transparent);
}
/* Underline-only fields: transparent box, hairline bottom border, amber
   underline on the focused control. Compact heights keep rows tight. */
.lead-form-underline :is(input, textarea, [data-slot="select-trigger"]) {
  background-color: transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  padding-left: 2px;
  padding-right: 2px;
}
.lead-form-underline :is(input, [data-slot="select-trigger"]) {
  height: 2.125rem;
}
.lead-form-underline textarea {
  min-height: 3.25rem;
}
/* The phone country selector ships its own box — flatten it to match. */
.lead-form-underline .react-international-phone-country-selector-button {
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.lead-form-underline :is(input, textarea, [data-slot="select-trigger"]):focus-visible,
.lead-form-underline [data-slot="select-trigger"][data-state="open"] {
  outline: none;
  box-shadow: none;
  border-bottom-color: var(--cta);
}

/* Event banner (Dograh Cloud only, NEXT_PUBLIC_EVENT_BANNER=1). The bar is
   sticky at top-0 in the root layout, so while it is up it permanently owns
   --event-banner-h pixels at the top of the viewport. Two things have to give
   way, and both are utility-class'd primitives we do not want to fork:

   - the shadcn sidebar's FIXED container (inset-y-0 h-svh), which would
     otherwise start underneath the bar and run past the bottom of the screen;
   - every full-height page shell (min-h-screen / min-h-svh: the sidebar
     wrapper, the app shell, the auth shell), which would otherwise demand a
     full viewport BELOW the bar and add a phantom scrollbar.

   Both rules are gated on [data-event-banner], set on <html> by EventBanner
   only while the bar is actually rendered — dismissed or env-gated off, these
   selectors do not match and the layout is byte-for-byte what it was before
   this block existed. */
[data-event-banner] [data-slot="sidebar-container"] {
  top: var(--event-banner-h, 0px);
  height: calc(100svh - var(--event-banner-h, 0px));
}

[data-event-banner] [class~="min-h-screen"],
[data-event-banner] [class~="min-h-svh"] {
  min-height: calc(100svh - var(--event-banner-h, 0px));
}