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

:root {
  --background: oklch(0.98 0 0);
  --foreground: oklch(0.15 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.15 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.15 0 0);
  --primary: oklch(0.55 0 0);
  --primary-foreground: oklch(0.98 0 0);
  --secondary: oklch(0.94 0 0);
  --secondary-foreground: oklch(0.2 0 0);
  --muted: oklch(0.94 0 0);
  --muted-foreground: oklch(0.55 0 0);
  --accent: oklch(0.94 0 0);
  --accent-foreground: oklch(0.2 0 0);
  --destructive: oklch(0.58 0.24 28);
  --destructive-foreground: oklch(0.98 0 0);
  --success: oklch(0.55 0.15 142);
  --success-foreground: oklch(0.98 0 0);
  --warning: oklch(0.65 0.15 38);
  --warning-foreground: oklch(0.1 0 0);
  --border: oklch(0.9 0 0);
  --input: oklch(0.9 0 0);
  --ring: oklch(0.71 0 0);
  --chart-1: oklch(0.65 0.15 258);
  --chart-2: oklch(0.7 0.14 142);
  --chart-3: oklch(0.65 0.2 27);
  --chart-4: oklch(0.6 0.18 302);
  --chart-5: oklch(0.62 0.16 197);
  --sidebar: oklch(0.96 0 0);
  --sidebar-foreground: oklch(0.15 0 0);
  --sidebar-primary: oklch(0.2 0 0);
  --sidebar-primary-foreground: oklch(0.98 0 0);
  --sidebar-accent: oklch(0.92 0 0);
  --sidebar-accent-foreground: oklch(0.2 0 0);
  --sidebar-border: oklch(0.88 0 0);
  --sidebar-ring: oklch(0.71 0 0);
  --navbar: oklch(0.96 0 0);
  --navbar-foreground: oklch(0.15 0 0);
  --navbar-border: oklch(0.88 0 0);
  --font-sans: Geist Mono, monospace;
  --font-serif: Geist Mono, monospace;
  --font-mono: Geist Mono, monospace;
  --radius: 0rem;
  --shadow-2xs: 0px 1px 0px 0px hsl(0 0% 0% / 0);
  --shadow-xs: 0px 1px 0px 0px hsl(0 0% 0% / 0);
  --shadow-sm:
    0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0);
  --shadow: 0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0);
  --shadow-md:
    0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 2px 4px -1px hsl(0 0% 0% / 0);
  --shadow-lg:
    0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 4px 6px -1px hsl(0 0% 0% / 0);
  --shadow-xl:
    0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 8px 10px -1px hsl(0 0% 0% / 0);
  --shadow-2xl: 0px 1px 0px 0px hsl(0 0% 0% / 0);
  --tracking-normal: 0em;
  --spacing: 0.25rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: oklch(0.12 0 0);
    --foreground: oklch(0.98 0 0);
    --card: oklch(0.18 0 0);
    --card-foreground: oklch(0.98 0 0);
    --popover: oklch(0.22 0 0);
    --popover-foreground: oklch(0.98 0 0);
    --primary: oklch(0.55 0 0);
    --primary-foreground: oklch(0.98 0 0);
    --secondary: oklch(0.22 0 0);
    --secondary-foreground: oklch(0.98 0 0);
    --muted: oklch(0.22 0 0);
    --muted-foreground: oklch(0.71 0 0);
    --accent: oklch(0.3 0 0);
    --accent-foreground: oklch(0.98 0 0);
    --destructive: oklch(0.7 0.19 22);
    --destructive-foreground: oklch(0.22 0 0);
    --success: oklch(0.6 0.15 142);
    --success-foreground: oklch(0.98 0 0);
    --warning: oklch(0.7 0.15 38);
    --warning-foreground: oklch(0.1 0 0);
    --border: oklch(0.28 0 0);
    --input: oklch(0.35 0 0);
    --ring: oklch(0.55 0 0);
    --chart-1: oklch(0.7 0.15 258);
    --chart-2: oklch(0.75 0.14 142);
    --chart-3: oklch(0.7 0.2 27);
    --chart-4: oklch(0.65 0.18 302);
    --chart-5: oklch(0.67 0.16 197);
    --sidebar: oklch(0.08 0 0);
    --sidebar-foreground: oklch(0.98 0 0);
    --sidebar-primary: oklch(0.98 0 0);
    --sidebar-primary-foreground: oklch(0.08 0 0);
    --sidebar-accent: oklch(0.15 0 0);
    --sidebar-accent-foreground: oklch(0.98 0 0);
    --sidebar-border: oklch(0.25 0 0);
    --sidebar-ring: oklch(0.35 0 0);
    --navbar: oklch(0.08 0 0);
    --navbar-foreground: oklch(0.98 0 0);
    --navbar-border: oklch(0.25 0 0);
    --font-sans: Geist Mono, monospace;
    --font-serif: Geist Mono, monospace;
    --font-mono: Geist Mono, monospace;
    --radius: 0rem;
    --shadow-2xs: 0px 1px 0px 0px hsl(0 0% 0% / 0);
    --shadow-xs: 0px 1px 0px 0px hsl(0 0% 0% / 0);
    --shadow-sm:
      0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0);
    --shadow:
      0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0);
    --shadow-md:
      0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 2px 4px -1px hsl(0 0% 0% / 0);
    --shadow-lg:
      0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 4px 6px -1px hsl(0 0% 0% / 0);
    --shadow-xl:
      0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 8px 10px -1px hsl(0 0% 0% / 0);
    --shadow-2xl: 0px 1px 0px 0px hsl(0 0% 0% / 0);
  }
}

@theme inline {
  --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-destructive-foreground: var(--destructive-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --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-navbar: var(--navbar);
  --color-navbar-foreground: var(--navbar-foreground);
  --color-navbar-border: var(--navbar-border);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
}

/* Base styles for proper defaults */
* {
  border-color: var(--border);
}

html {
  font-family: var(--font-sans);
}

body {
  background-color: var(--background);
  color: var(--foreground);
}

/* Custom animations from original design */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes text-shimmer {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out forwards;
}

.animate-text-shimmer {
  animation: text-shimmer 2s ease-in-out infinite;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animation-delay-300 {
  animation-delay: 300ms;
}

.animation-delay-500 {
  animation-delay: 500ms;
}

.animation-delay-700 {
  animation-delay: 700ms;
}

/* Subtle background patterns for enhanced visual interest */
.bg-pattern-dots {
  background-image: radial-gradient(
    circle at 1px 1px,
    oklch(var(--border)) 1px,
    transparent 0
  );
  background-size: 20px 20px;
}

/* Sonner Toast Styles for beenvoice */
[data-sonner-toaster] {
  font-family: var(--font-geist-mono, ui-monospace, monospace) !important;
  --width: 380px;
}

[data-sonner-toast] {
  background: hsl(var(--card)) !important;
  background-color: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
  border-radius: 0 !important;
  box-shadow:
    0 1px 3px 0 rgb(0 0 0 / 0.1),
    0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
  font-size: 14px !important;
  padding: 16px 40px 16px 16px !important;
  font-family: var(--font-geist-mono, ui-monospace, monospace) !important;
  min-height: 56px !important;
  position: relative !important;
}

/* Toast types with colored left borders */
[data-sonner-toast][data-type="success"] {
  border-left: 4px solid hsl(142 76% 36%) !important;
}

[data-sonner-toast][data-type="error"] {
  border-left: 4px solid hsl(0 84% 60%) !important;
}

[data-sonner-toast][data-type="warning"] {
  border-left: 4px solid hsl(38 92% 50%) !important;
}

[data-sonner-toast][data-type="info"] {
  border-left: 4px solid hsl(221 83% 53%) !important;
}

/* Close button styling - comprehensive selectors */
[data-sonner-toast] [data-close-button],
[data-sonner-toast] button[data-close-button],
[data-sonner-toast] button[aria-label="Close toast"],
[data-sonner-toast] > button,
li[data-sonner-toast] [data-close-button],
li[data-sonner-toast] button,
.sonner [data-close-button],
.sonner button[aria-label="Close toast"],
[data-sonner-toaster] [data-close-button],
[data-sonner-toaster] button[aria-label="Close toast"] {
  background: hsl(var(--background)) !important;
  border: 1px solid hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
  border-radius: 0 !important;
  width: 20px !important;
  height: 20px !important;
  position: absolute !important;
  top: 50% !important;
  right: 8px !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 12px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  z-index: 100 !important;
  inset-inline-end: 8px !important;
  inset-inline-start: auto !important;
}

[data-sonner-toast] [data-close-button]:hover,
[data-sonner-toast] button[data-close-button]:hover,
[data-sonner-toast] button[aria-label="Close toast"]:hover,
[data-sonner-toast] > button:hover,
li[data-sonner-toast] [data-close-button]:hover,
li[data-sonner-toast] button:hover,
.sonner [data-close-button]:hover,
.sonner button[aria-label="Close toast"]:hover,
[data-sonner-toaster] [data-close-button]:hover,
[data-sonner-toaster] button[aria-label="Close toast"]:hover {
  background: hsl(var(--muted)) !important;
}

/* Very specific override for close button positioning */
[data-sonner-toast] > div > button,
[data-sonner-toast] button:last-child,
[data-sonner-toast] button:only-child {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: unset !important;
  transform: none !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  float: right !important;
  padding-right: 40px !important;
}

/* Override any flex or grid positioning that puts button on left */
[data-sonner-toast] {
  display: flex !important;
  align-items: flex-start !important;
  padding-left: 48px !important;
}

[data-sonner-toast] > div {
  position: relative !important;
  padding-right: 40px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

/* Toast icon positioning */
[data-sonner-toast] [data-icon] {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  flex-shrink: 0 !important;
  width: 20px !important;
  height: 20px !important;
}

/* Content styling */
[data-sonner-toast] [data-title] {
  color: hsl(var(--foreground)) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  font-family: var(--font-geist-mono, ui-monospace, monospace) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

[data-sonner-toast] [data-description] {
  color: hsl(var(--muted-foreground)) !important;
  font-size: 13px !important;
  font-family: var(--font-geist-mono, ui-monospace, monospace) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* Content wrapper to avoid icon overlap */
[data-sonner-toast] [data-content] {
  flex: 1 !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Mobile responsive */
@media (max-width: 640px) {
  [data-sonner-toaster] {
    --width: calc(100vw - 32px);
    left: 16px !important;
    right: 16px !important;
  }
}

.bg-pattern-grid {
  background-image:
    linear-gradient(oklch(var(--border)) 1px, transparent 1px),
    linear-gradient(90deg, oklch(var(--border)) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Enhanced backgrounds for main areas */
.bg-dashboard {
  background: var(--background);
  background-image: radial-gradient(
    circle at 20px 20px,
    oklch(var(--muted) / 0.3) 1px,
    transparent 0
  );
  background-size: 40px 40px;
}