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

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

:root {
  /* Updated to modern, attractive frontend theme */
  --background: oklch(0.99 0.005 250);
  --foreground: oklch(0.15 0.02 250);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.15 0.02 250);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.15 0.02 250);
  /* Updated primary color from blue/purple to teal */
  --primary: oklch(0.45 0.1 180);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.92 0.01 180);
  --secondary-foreground: oklch(0.15 0.02 180);
  --muted: oklch(0.96 0.005 180);
  --muted-foreground: oklch(0.5 0.01 180);
  /* Updated accent to teal */
  --accent: oklch(0.92 0.005 180);
  --accent-foreground: oklch(0.15 0.02 180);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.99 0 0);
  --border: oklch(0.9 0.005 180);
  --input: oklch(0.94 0.005 180);
  --ring: oklch(0.45 0.1 180);
  --chart-1: oklch(0.45 0.1 180);
  --chart-2: oklch(0.55 0.12 175);
  --chart-3: oklch(0.5 0.08 185);
  --chart-4: oklch(0.6 0.1 170);
  --chart-5: oklch(0.4 0.08 190);
  --radius: 0.75rem;
  --sidebar: oklch(0.99 0.005 180);
  --sidebar-foreground: oklch(0.15 0.02 180);
  --sidebar-primary: oklch(0.45 0.1 180);
  --sidebar-primary-foreground: oklch(0.99 0 0);
  --sidebar-accent: oklch(0.96 0.005 180);
  --sidebar-accent-foreground: oklch(0.15 0.02 180);
  --sidebar-border: oklch(0.9 0.005 180);
  --sidebar-ring: oklch(0.45 0.1 180);

  /* Admin-specific design tokens */
  --admin-bg-gradient-start: oklch(0.97 0.01 265);
  --admin-bg-gradient-end: oklch(0.99 0.005 250);
  --admin-card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05), 0 1px 2px -1px rgb(0 0 0 / 0.05);
  --admin-card-shadow-hover: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
  --admin-glass-bg: oklch(1 0 0 / 0.8);
  --admin-glass-border: oklch(0.92 0.005 250);

  /* Updated frontend colors to match dark teal screenshot exactly */
  /* Frontend Primary Colors - Dark teal theme matching screenshot */
  --frontend-primary: oklch(0.4 0.08 180); /* Dark teal */
  --frontend-primary-light: oklch(0.5 0.1 178);
  --frontend-primary-dark: oklch(0.3 0.06 182);
  --frontend-secondary: oklch(0.45 0.09 175); /* Cyan accent */
  --frontend-secondary-light: oklch(0.55 0.1 173);

  /* Frontend Gradients - Dark teal gradient */
  --frontend-gradient-1: linear-gradient(
    135deg,
    oklch(0.3 0.06 182) 0%,
    oklch(0.4 0.08 180) 50%,
    oklch(0.45 0.09 175) 100%
  );
  --frontend-gradient-2: linear-gradient(
    135deg,
    oklch(0.45 0.09 175) 0%,
    oklch(0.4 0.08 180) 50%,
    oklch(0.3 0.06 182) 100%
  );
  --frontend-gradient-hero: linear-gradient(
    135deg,
    oklch(0.98 0.01 180) 0%,
    oklch(0.96 0.015 178) 35%,
    oklch(0.94 0.02 175) 100%
  );

  /* Footer gradient - very dark teal matching screenshot exactly (#0d2d2d to #1a4a4a) */
  --frontend-footer-gradient: linear-gradient(
    135deg,
    oklch(0.18 0.04 185) 0%,
    oklch(0.2 0.045 183) 25%,
    oklch(0.22 0.05 180) 50%,
    oklch(0.24 0.055 178) 75%,
    oklch(0.26 0.06 175) 100%
  );

  /* Button gradient - dark teal matching header button */
  --frontend-button-gradient: linear-gradient(
    135deg,
    oklch(0.35 0.08 182) 0%,
    oklch(0.4 0.09 180) 50%,
    oklch(0.45 0.1 178) 100%
  );

  /* Button hover gradient */
  --frontend-button-gradient-hover: linear-gradient(
    135deg,
    oklch(0.32 0.08 182) 0%,
    oklch(0.37 0.09 180) 50%,
    oklch(0.42 0.1 178) 100%
  );

  /* Auth page left panel gradient - dark teal */
  --frontend-auth-gradient: linear-gradient(
    135deg,
    oklch(0.25 0.06 185) 0%,
    oklch(0.3 0.07 182) 40%,
    oklch(0.35 0.08 178) 100%
  );

  /* Card shadow for depth */
  --frontend-card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --frontend-card-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --frontend-card-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Frontend Service Colors - updated to teal theme */
  --frontend-service-1: oklch(0.4 0.08 180); /* Vehicle - Teal */
  --frontend-service-2: oklch(0.55 0.2 30); /* Hotel - Orange */
  --frontend-service-3: oklch(0.45 0.09 175); /* Spiritual - Cyan */
  --frontend-service-4: oklch(0.35 0.07 185); /* Custom - Dark Teal */

  /* Added agent-specific dark/black gradient button */
  --agent-button-gradient: linear-gradient(
    135deg,
    oklch(0.22 0.01 250) 0%,
    oklch(0.28 0.015 250) 50%,
    oklch(0.32 0.02 250) 100%
  );

  --agent-button-gradient-hover: linear-gradient(
    135deg,
    oklch(0.18 0.01 250) 0%,
    oklch(0.24 0.015 250) 50%,
    oklch(0.28 0.02 250) 100%
  );

  /* Agent card with subtle dark gradient border */
  --agent-card-gradient: linear-gradient(135deg, oklch(0.25 0.02 250) 0%, oklch(0.3 0.025 250) 100%);
}

.dark {
  --background: oklch(0.13 0.02 180);
  --foreground: oklch(0.97 0.005 180);
  --card: oklch(0.16 0.02 180);
  --card-foreground: oklch(0.97 0.005 180);
  --popover: oklch(0.16 0.02 180);
  --popover-foreground: oklch(0.97 0.005 180);
  /* Dark mode primary to teal */
  --primary: oklch(0.55 0.1 180);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.25 0.02 180);
  --secondary-foreground: oklch(0.97 0.005 180);
  --muted: oklch(0.22 0.02 180);
  --muted-foreground: oklch(0.65 0.01 180);
  /* Updated dark mode accent to teal */
  --accent: oklch(0.22 0.02 180);
  --accent-foreground: oklch(0.97 0.005 180);
  --destructive: oklch(0.55 0.25 27);
  --destructive-foreground: oklch(0.99 0 0);
  --border: oklch(0.25 0.02 180);
  --input: oklch(0.22 0.02 180);
  --ring: oklch(0.55 0.1 180);
  --chart-1: oklch(0.55 0.1 180);
  --chart-2: oklch(0.6 0.12 175);
  --chart-3: oklch(0.55 0.08 185);
  --chart-4: oklch(0.65 0.1 170);
  --chart-5: oklch(0.5 0.08 190);
  --sidebar: oklch(0.16 0.02 180);
  --sidebar-foreground: oklch(0.97 0.005 180);
  --sidebar-primary: oklch(0.55 0.1 180);
  --sidebar-primary-foreground: oklch(0.99 0 0);
  --sidebar-accent: oklch(0.22 0.02 180);
  --sidebar-accent-foreground: oklch(0.97 0.005 180);
  --sidebar-border: oklch(0.25 0.02 180);
  --sidebar-ring: oklch(0.55 0.1 180);

  /* Dark mode admin tokens */
  --admin-bg-gradient-start: oklch(0.12 0.02 265);
  --admin-bg-gradient-end: oklch(0.14 0.015 250);
  --admin-card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2);
  --admin-card-shadow-hover: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.2);
  --admin-glass-bg: oklch(0.18 0.02 180 / 0.8);
  --admin-glass-border: oklch(0.28 0.02 180);

  /* Dark mode frontend tokens - same dark teal gradients */
  --frontend-primary: oklch(0.5 0.1 180);
  --frontend-primary-light: oklch(0.6 0.1 178);
  --frontend-primary-dark: oklch(0.4 0.08 182);
  --frontend-secondary: oklch(0.55 0.1 175);
  --frontend-secondary-light: oklch(0.65 0.1 173);

  --frontend-gradient-1: linear-gradient(
    135deg,
    oklch(0.35 0.07 182) 0%,
    oklch(0.45 0.09 180) 50%,
    oklch(0.55 0.1 175) 100%
  );
  --frontend-gradient-2: linear-gradient(
    135deg,
    oklch(0.55 0.1 175) 0%,
    oklch(0.45 0.09 180) 50%,
    oklch(0.35 0.07 182) 100%
  );
  --frontend-gradient-hero: linear-gradient(
    135deg,
    oklch(0.14 0.03 185) 0%,
    oklch(0.16 0.035 180) 35%,
    oklch(0.18 0.04 175) 100%
  );

  --frontend-footer-gradient: linear-gradient(
    135deg,
    oklch(0.15 0.04 185) 0%,
    oklch(0.17 0.045 183) 25%,
    oklch(0.19 0.05 180) 50%,
    oklch(0.21 0.055 178) 75%,
    oklch(0.23 0.06 175) 100%
  );

  --frontend-button-gradient: linear-gradient(
    135deg,
    oklch(0.4 0.09 182) 0%,
    oklch(0.45 0.1 180) 50%,
    oklch(0.5 0.1 178) 100%
  );

  --frontend-button-gradient-hover: linear-gradient(
    135deg,
    oklch(0.37 0.09 182) 0%,
    oklch(0.42 0.1 180) 50%,
    oklch(0.47 0.1 178) 100%
  );

  --frontend-auth-gradient: linear-gradient(
    135deg,
    oklch(0.22 0.05 185) 0%,
    oklch(0.27 0.06 182) 40%,
    oklch(0.32 0.07 178) 100%
  );

  --frontend-card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.2), 0 2px 4px -2px rgb(0 0 0 / 0.2);
  --frontend-card-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.25), 0 4px 6px -4px rgb(0 0 0 / 0.2);
  --frontend-card-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.25);

  --frontend-service-1: oklch(0.5 0.09 180);
  --frontend-service-2: oklch(0.6 0.18 30);
  --frontend-service-3: oklch(0.55 0.1 175);
  --frontend-service-4: oklch(0.45 0.08 185);

  /* Dark mode agent button gradient */
  --agent-button-gradient: linear-gradient(
    135deg,
    oklch(0.3 0.015 250) 0%,
    oklch(0.35 0.02 250) 50%,
    oklch(0.4 0.025 250) 100%
  );

  --agent-button-gradient-hover: linear-gradient(
    135deg,
    oklch(0.25 0.015 250) 0%,
    oklch(0.3 0.02 250) 50%,
    oklch(0.35 0.025 250) 100%
  );
}

@theme inline {
  --font-sans: "Geist", "Geist Fallback";
  --font-mono: "Geist Mono", "Geist Mono Fallback";
  --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-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);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --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);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  /* Added !important to ensure background color always applies */
  html {
    @apply bg-background;
  }
  body {
    @apply bg-background text-foreground min-h-screen;
  }
}

/* Admin-specific utility classes */
@layer utilities {
  .admin-gradient-bg {
    background: linear-gradient(135deg, var(--admin-bg-gradient-start) 0%, var(--admin-bg-gradient-end) 100%);
  }

  .admin-card {
    background: var(--admin-glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--admin-glass-border);
    box-shadow: var(--admin-card-shadow);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }

  .admin-card:hover {
    box-shadow: var(--admin-card-shadow-hover);
  }

  .admin-page-header {
    @apply mb-8;
  }

  .admin-page-title {
    @apply text-3xl font-bold tracking-tight bg-gradient-to-r from-foreground to-foreground/70 bg-clip-text;
  }

  .admin-page-description {
    @apply mt-2 text-muted-foreground;
  }

  .admin-section {
    @apply space-y-6;
  }

  .admin-content-padding {
    @apply p-6 lg:p-8;
  }

  /* Add custom scrollbar styles for sidebar */
  .scrollbar-thin {
    scrollbar-width: thin;
  }

  .scrollbar-thumb-border {
    scrollbar-color: var(--border) transparent;
  }

  .scrollbar-track-transparent {
    scrollbar-color: var(--border) transparent;
  }

  /* Webkit scrollbar styles for Chrome, Safari, Edge */
  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: var(--muted-foreground);
  }

  .hover\:scrollbar-thumb-border\/80:hover::-webkit-scrollbar-thumb {
    background: oklch(0.7 0.01 180);
  }

  /* Prevent layout shift during navigation */
  .prevent-layout-shift {
    min-height: 100vh;
  }

  /* Smooth content transitions */
  .smooth-transition {
    transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
  }

  /* Updated frontend utility classes with dark teal gradients */
  .frontend-gradient-primary {
    background: var(--frontend-button-gradient);
    color: white;
  }

  .frontend-gradient-primary:hover {
    background: var(--frontend-button-gradient-hover);
  }

  .frontend-gradient-secondary {
    background: var(--frontend-gradient-2);
    color: white;
  }

  .frontend-gradient-hero {
    background: var(--frontend-gradient-hero);
  }

  /* Footer gradient class - dark teal */
  .frontend-gradient-footer {
    background: var(--frontend-footer-gradient);
  }

  /* Auth page gradient class */
  .frontend-gradient-auth {
    background: var(--frontend-auth-gradient);
  }

  .frontend-text-gradient {
    background: var(--frontend-gradient-1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .frontend-service-card {
    @apply rounded-2xl border border-border/50 backdrop-blur-sm transition-all duration-300;
    box-shadow: var(--frontend-card-shadow);
  }

  .frontend-service-card:hover {
    @apply scale-105;
    box-shadow: var(--frontend-card-shadow-xl);
  }

  .frontend-section {
    @apply py-16 md:py-24;
  }

  /* Utility classes for consistent shadows */
  .frontend-shadow {
    box-shadow: var(--frontend-card-shadow);
  }

  .frontend-shadow-lg {
    box-shadow: var(--frontend-card-shadow-lg);
  }

  .frontend-shadow-xl {
    box-shadow: var(--frontend-card-shadow-xl);
  }

  /* Button variants using centralized gradients */
  .frontend-btn {
    background: var(--frontend-button-gradient);
    color: white;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
  }

  .frontend-btn:hover {
    background: var(--frontend-button-gradient-hover);
    box-shadow: 0 4px 8px rgb(0 0 0 / 0.15);
    transform: translateY(-1px);
  }

  .frontend-btn:active {
    transform: translateY(0);
  }

  /* Added agent button styles with dark/black gradient */
  .agent-btn {
    background: var(--agent-button-gradient);
    color: white;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.15);
  }

  .agent-btn:hover {
    background: var(--agent-button-gradient-hover);
    box-shadow: 0 4px 8px rgb(0 0 0 / 0.2);
    transform: translateY(-1px);
  }

  .agent-btn:active {
    transform: translateY(0);
  }

  /* Agent card with gradient border effect */
  .agent-card {
    position: relative;
    background: var(--card);
    border-radius: var(--radius);
    overflow: hidden;
  }

  .agent-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--agent-card-gradient);
  }

  /* Agent stat card hover effect */
  .agent-stat-card {
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.05);
  }

  .agent-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgb(0 0 0 / 0.1);
  }
}

/* Add view transitions API support for smooth page changes */
@supports (view-transition-name: none) {
  /* Removed view transition animations to eliminate any visual effects */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}