/**
 * shadcn-rails Base Styles
 *
 * This file contains the base CSS variables, animations, and utility styles
 * required for shadcn-rails components to work properly.
 *
 * Import this file in your application's stylesheet:
 *   @import "shadcn/base";
 *
 * Or with Tailwind CSS:
 *   @import "shadcn/base.css";
 */

/* ============================================
   CSS Custom Properties (Theme Variables)
   ============================================ */

/* Dark-first: matches DESIGN_SYSTEM.md (Mercury/Linear/Vercel aesthetic) */
:root {
  /* Backgrounds from DESIGN_SYSTEM.md */
  --background: 223 24% 6%;         /* #0B0D12 bg-body */
  --foreground: 220 9% 94%;         /* #EDEEF0 text-primary */

  --card: 223 17% 8%;               /* #111318 bg-surface */
  --card-foreground: 220 9% 94%;    /* #EDEEF0 */

  --popover: 223 17% 8%;            /* #111318 bg-surface */
  --popover-foreground: 220 9% 94%; /* #EDEEF0 */

  /* Accent: Indigo #6366F1 */
  --primary: 239 84% 67%;           /* #6366F1 accent */
  --primary-foreground: 0 0% 100%;

  --secondary: 222 14% 14%;         /* #1E2128 bg-hover */
  --secondary-foreground: 218 6% 65%; /* #A0A4AB text-secondary */

  --muted: 222 17% 11%;             /* #181B22 bg-elevated */
  --muted-foreground: 218 5% 44%;   /* #6B6F76 text-muted */

  --accent: 222 14% 14%;            /* #1E2128 bg-hover */
  --accent-foreground: 220 9% 94%;  /* #EDEEF0 */

  --destructive: 0 91% 71%;         /* #F87171 danger */
  --destructive-foreground: 0 0% 100%;

  --border: 0 0% 100% / 0.06;       /* rgba(255,255,255,0.06) border-default */
  --input: 0 0% 100% / 0.10;        /* rgba(255,255,255,0.10) border-strong */
  --ring: 239 84% 67%;              /* #6366F1 accent */

  /* Border Radius - from DESIGN_SYSTEM.md */
  --radius: 0.375rem;               /* 6px radius (default) */

  /* Chart Colors - platform brand colors */
  --chart-1: 239 84% 67%;           /* Indigo (default series) */
  --chart-2: 158 64% 52%;           /* #34D399 success/green */
  --chart-3: 43 96% 56%;            /* #FBBF24 warning/amber */
  --chart-4: 0 91% 71%;             /* #F87171 danger/red */
  --chart-5: 235 90% 74%;           /* #818CF8 accent-light */

  /* Sidebar - from DESIGN_SYSTEM.md */
  --sidebar-background: 223 17% 8%; /* #111318 bg-surface */
  --sidebar-foreground: 218 6% 65%; /* #A0A4AB text-secondary */
  --sidebar-primary: 239 84% 67%;   /* #6366F1 accent */
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 224 13% 17%;    /* #252830 bg-active */
  --sidebar-accent-foreground: 220 9% 94%;
  --sidebar-border: 0 0% 100% / 0.06;
  --sidebar-ring: 239 84% 67%;
}

/* Light mode override (secondary, rarely used) */
.light {
  --background: 0 0% 100%;
  --foreground: 223 24% 6%;

  --card: 0 0% 98%;
  --card-foreground: 223 24% 6%;

  --popover: 0 0% 100%;
  --popover-foreground: 223 24% 6%;

  --primary: 239 84% 67%;
  --primary-foreground: 0 0% 100%;

  --secondary: 220 14% 96%;
  --secondary-foreground: 223 17% 8%;

  --muted: 220 14% 96%;
  --muted-foreground: 218 5% 44%;

  --accent: 220 14% 96%;
  --accent-foreground: 223 17% 8%;

  --destructive: 0 91% 71%;
  --destructive-foreground: 0 0% 100%;

  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 239 84% 67%;

  --chart-1: 239 84% 67%;
  --chart-2: 158 64% 52%;
  --chart-3: 43 96% 56%;
  --chart-4: 0 91% 71%;
  --chart-5: 235 90% 74%;

  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 223 17% 8%;
  --sidebar-primary: 239 84% 67%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 220 14% 96%;
  --sidebar-accent-foreground: 223 17% 8%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 239 84% 67%;
}

/* ============================================
   Base Styles
   ============================================ */

* {
  border-color: hsl(var(--border));
}

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

/* ============================================
   Animations
   ============================================ */

@keyframes accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height, auto);
  }
}

@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height, auto);
  }
  to {
    height: 0;
  }
}

@keyframes collapsible-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-collapsible-content-height, auto);
  }
}

@keyframes collapsible-up {
  from {
    height: var(--radix-collapsible-content-height, auto);
  }
  to {
    height: 0;
  }
}

@keyframes progress-indeterminate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes zoom-in {
  from {
    transform: scale(0.95);
  }
  to {
    transform: scale(1);
  }
}

@keyframes zoom-out {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.95);
  }
}

@keyframes slide-in-from-top {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slide-in-from-bottom {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slide-in-from-left {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slide-in-from-right {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slide-out-to-top {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

@keyframes slide-out-to-bottom {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

@keyframes slide-out-to-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes slide-out-to-right {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

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

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Tooltip animations - subtle pop effect */
@keyframes tooltip-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(2px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes tooltip-out {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.96) translateY(2px);
  }
}

/* ============================================
   Animation Utility Classes
   ============================================ */

.animate-accordion-down {
  animation: accordion-down 0.2s ease-out;
}

.animate-accordion-up {
  animation: accordion-up 0.2s ease-out;
}

.animate-collapsible-down {
  animation: collapsible-down 0.2s ease-out;
}

.animate-collapsible-up {
  animation: collapsible-up 0.2s ease-out;
}

.animate-progress-indeterminate {
  animation: progress-indeterminate 1.5s ease-in-out infinite;
}

.animate-in {
  animation-duration: 150ms;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

.animate-out {
  animation-duration: 150ms;
  animation-timing-function: ease-in;
  animation-fill-mode: both;
}

.fade-in-0 {
  animation-name: fade-in;
}

.fade-out-0 {
  animation-name: fade-out;
}

.zoom-in-95 {
  animation-name: zoom-in;
}

.zoom-out-95 {
  animation-name: zoom-out;
}

.slide-in-from-top-2 {
  animation-name: slide-in-from-top;
}

.slide-in-from-bottom-2 {
  animation-name: slide-in-from-bottom;
}

.slide-in-from-left-2 {
  animation-name: slide-in-from-left;
}

.slide-in-from-right-2 {
  animation-name: slide-in-from-right;
}

.slide-out-to-top {
  animation-name: slide-out-to-top;
}

.slide-out-to-bottom {
  animation-name: slide-out-to-bottom;
}

.slide-out-to-left {
  animation-name: slide-out-to-left;
}

.slide-out-to-right {
  animation-name: slide-out-to-right;
}

/* Tooltip animation classes */
.animate-tooltip-in {
  animation: tooltip-in 150ms ease-out both;
}

.animate-tooltip-out {
  animation: tooltip-out 100ms ease-in both;
}

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

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ============================================
   Portal Styles
   ============================================ */

.shadcn-dialog-portal,
.shadcn-sheet-portal {
  position: fixed;
  inset: 0;
  z-index: 50;
}

/* ============================================
   Focus Visible Styles
   ============================================ */

.focus-visible\:outline-none:focus-visible {
  outline: none;
}

.focus-visible\:ring-1:focus-visible {
  box-shadow: 0 0 0 1px hsl(var(--ring));
}

.focus-visible\:ring-2:focus-visible {
  box-shadow: 0 0 0 2px hsl(var(--ring));
}

.focus-visible\:ring-ring:focus-visible {
  --tw-ring-color: hsl(var(--ring));
}

.focus-visible\:ring-offset-2:focus-visible {
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

/* ============================================
   Scrollbar Styles
   ============================================ */

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}