@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "remixicon/fonts/remixicon.css";

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

@theme inline {
  --font-heading: var(--font-sans);
  --font-sans: var(--font-sans);
  --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);
  --color-foreground: var(--foreground);
  --color-background: var(--background);
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
}

:root {
  --vz-primary: #405189;
  --vz-primary-hover: #364574;
  --vz-success: #0ab39c;
  --vz-info: #299cdb;
  --vz-warning: #f7b84b;
  --vz-danger: #f06548;
  --vz-page-bg: #f3f3f9;
  --vz-sidebar-dark: #405189;
  --vz-sidebar-dark-text: #abb9e8;

  --background: #f3f3f9;
  --foreground: #212529;
  --card: #ffffff;
  --card-foreground: #212529;
  --popover: #ffffff;
  --popover-foreground: #212529;
  --primary: #405189;
  --primary-foreground: #ffffff;
  --secondary: #f3f6f9;
  --secondary-foreground: #405189;
  --muted: #f3f6f9;
  --muted-foreground: #878a99;
  --accent: #f3f6f9;
  --accent-foreground: #212529;
  --destructive: #f06548;
  --border: #e9ebec;
  --input: #ced4da;
  --ring: #405189;
  --chart-1: #405189;
  --chart-2: #0ab39c;
  --chart-3: #299cdb;
  --chart-4: #f7b84b;
  --chart-5: #f06548;
  --radius: 0.375rem;
  --sidebar: #405189;
  --sidebar-foreground: #abb9e8;
  --sidebar-primary: #0ab39c;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: rgba(255, 255, 255, 0.12);
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: rgba(255, 255, 255, 0.12);
  --sidebar-ring: #0ab39c;
}

[data-sidebar="light"] {
  --sidebar: #ffffff;
  --sidebar-foreground: #495057;
  --sidebar-primary: #405189;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #f3f6f9;
  --sidebar-accent-foreground: #405189;
  --sidebar-border: #e9ebec;
  --sidebar-ring: #405189;
}

.dark {
  --vz-page-bg: #1a1d21;
  --background: #1a1d21;
  --foreground: #ced4da;
  --card: #212529;
  --card-foreground: #ced4da;
  --popover: #262a2f;
  --popover-foreground: #ced4da;
  --primary: #4b5fa2;
  --primary-foreground: #ffffff;
  --secondary: #2a2f34;
  --secondary-foreground: #ced4da;
  --muted: #2a2f34;
  --muted-foreground: #878a99;
  --accent: #2a2f34;
  --accent-foreground: #ced4da;
  --destructive: #f06548;
  --border: #32383e;
  --input: #32383e;
  --ring: #4b5fa2;
  --sidebar: #212529;
  --sidebar-foreground: #a6adb4;
  --sidebar-primary: #4b5fa2;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #2a2f34;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #32383e;
  --sidebar-ring: #4b5fa2;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }
  body {
    @apply bg-background text-foreground;
    font-size: 0.875rem;
  }
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
  html {
    @apply font-sans;
  }
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.pipeline-bar {
  display: flex;
  align-items: stretch;
  gap: 0.625rem;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  cursor: pointer;
}

/* Exact df-laravel-crm UI behaviors */
.lead-border-left {
  border-left: 4px solid transparent;
  background-image: linear-gradient(to bottom, #ff4d4d, #b30000);
  background-repeat: no-repeat;
  background-size: 4px 100%;
  background-position: left center;
  transition: background-size 0.25s ease;
}

.lead-border-left:hover {
  background-size: 6px 100%;
}

.text-truncate-10 {
  display: inline-block;
  max-width: 14ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.pipeline-step {
  min-width: 155px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f7f8fa;
  display: flex;
  gap: 10px;
  align-items: center;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}
.dark .pipeline-step {
  background: #2a2f34;
}
.pipeline-step.completed {
  background: #e9faf0;
  border-color: #c8f0dc;
  color: #0ab39c;
}
.dark .pipeline-step.completed {
  background: rgba(10, 179, 156, 0.16);
  border-color: rgba(10, 179, 156, 0.35);
}
.pipeline-step.current {
  background: linear-gradient(90deg, #1abc9c, #16a085);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(22, 160, 133, 0.2);
}

.auth-bg-cover {
  background: linear-gradient(135deg, #405189 0%, #2a355b 55%, #0ab39c 100%);
}

.auth-one-bg {
  background: linear-gradient(155deg, rgba(64, 81, 137, 0.96), rgba(24, 34, 68, 0.96));
}

@keyframes spinSlow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

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