@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 221 100% 21%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --radius: 0.5rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 221 100% 35%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  html, body {
    @apply bg-background text-foreground;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }
}

/* Swift Commerce App Styles
   className="Swift Commerce-app" → two classes: "Swift" + "Commerce-app"
   Use compound selector .Swift.Commerce-app (no space) to match the same element */
.Swift.Commerce-app {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
  width: 100%;
  display: flex;
}

.Swift.Commerce-app *,
.Swift.Commerce-app *::before,
.Swift.Commerce-app *::after {
  box-sizing: border-box;
}

#swift-commerce-root {
  height: 100%;
  width: 100%;
}

/* 
 * Note: We don't reset button styles globally as it interferes with 
 * component libraries like shadcn/ui. Each button component handles 
 * its own styling via Tailwind classes.
 */

.Swift.Commerce-app a {
  text-decoration: none;
  color: inherit;
}

/* Ensure proper scrolling */
.Swift.Commerce-app [data-sidebar="content"] {
  overflow-y: auto;
  overflow-x: hidden;
}

/* Fix sidebar menu items */
.Swift.Commerce-app [data-sidebar="menu-button"] {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  transition: background-color 0.2s, color 0.2s;
}

.Swift.Commerce-app [data-sidebar="menu-button"]:hover {
  background-color: hsl(var(--sidebar-accent));
  color: hsl(var(--sidebar-accent-foreground));
}

/* Shake animation for Pro upgrade button */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.animate-shake {
  animation: shake 0.6s cubic-bezier(.36,.07,.19,.97) both;
}

/* Pro locked content styles */
.pro-locked-value {
  filter: blur(4px);
  user-select: none;
  pointer-events: none;
}

.pro-locked-control {
  position: relative;
  cursor: not-allowed !important;
}

.pro-locked-control::after {
  content: '';
  position: absolute;
  inset: 0;
  cursor: not-allowed;
}

/* Color input swatch styling
   Selector uses .Swift.Commerce-app (compound — both classes on the same element).
   className="Swift Commerce-app" in React → class="Swift Commerce-app" in DOM →
   the element has two classes: "Swift" and "Commerce-app". */
.Swift.Commerce-app input[type="color"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 6px !important;
  box-shadow: none !important;
  cursor: pointer;
  padding: 0 !important;
  overflow: hidden;
}

.Swift.Commerce-app input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0 !important;
}

.Swift.Commerce-app input[type="color"]::-webkit-color-swatch {
  border: none !important;
}

.Swift.Commerce-app input[type="color"]::-moz-color-swatch {
  border: none !important;
}