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

@layer components {
  /* 优化的输入框样式 - 与项目主题色协调 */
  .input-enhanced {
    @apply w-full px-3 py-2 border border-input rounded-lg bg-background text-sm;
    @apply focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary;
    @apply transition-colors duration-200;
    @apply placeholder:text-muted-foreground;
    @apply disabled:cursor-not-allowed disabled:opacity-50;
  }

  .select-enhanced {
    @apply w-full px-3 py-2 border border-input rounded-lg bg-background text-sm;
    @apply focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary;
    @apply transition-colors duration-200;
    @apply disabled:cursor-not-allowed disabled:opacity-50;
  }

  /* 单选框和复选框样式优化 */
  .radio-enhanced {
    @apply text-primary focus:ring-primary/20 focus:ring-2;
    @apply border-input bg-background;
  }

  .checkbox-enhanced {
    @apply text-primary focus:ring-primary/20 focus:ring-2;
    @apply border-input bg-background rounded;
  }
}

@layer base {
  /* 全局输入框样式优化 */
  input[type="text"],
  input[type="password"],
  input[type="number"],
  input[type="email"],
  input[type="url"],
  select,
  textarea {
    @apply focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary;
    @apply transition-colors duration-200;
  }

  /* 单选框和复选框样式 */
  input[type="radio"],
  input[type="checkbox"] {
    @apply accent-primary focus:ring-primary/20 focus:ring-2;
  }
}

:root {
  /* 浅色主题 */
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 217.2 91.2% 59.8%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 217.2 91.2% 59.8%;
  --radius: 0.5rem;
}

.dark {
  /* 深色主题 */
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --primary: 217.2 91.2% 59.8%;
  --primary-foreground: 222.2 84% 4.9%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 224.3 76.3% 94.1%;
}

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

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  padding: 0;
  width: 400px;
  min-height: 500px;
}

#root {
  width: 100%;
  height: 100%;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--muted));
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground));
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--primary));
}