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

@layer base {
  :root {
    /* 亮色模式：保持清爽，略微加深边框对比度 */
    --background: 0 0% 100%;
    --foreground: 215 28% 17%;
    
    --muted: 210 40% 96.1%;
    --muted-foreground: 215 16% 47%;
    
    --popover: 0 0% 100%;
    --popover-foreground: 215 28% 17%;
    --card: 0 0% 100%;
    --card-foreground: 215 28% 17%;
    
    /* 提升亮色下的边框清晰度 */
    --border: 214 32% 88%;
    --input: 214 32% 88%;
    
    --primary: 221 83% 53%;
    --primary-foreground: 210 40% 98%;
    
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222 47% 11%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222 47% 11%;
    
    --destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 98%;
    
    --ring: 221 83% 53%;
    --radius: 0.35rem;

    --chart-1: 221 83% 53%;
    --chart-2: 200 90% 40%;
    --chart-3: 35 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;

    --sidebar-background: 210 40% 98%;
    --sidebar-foreground: 215 28% 17%;
    --sidebar-primary: 221 83% 53%;
    --sidebar-primary-foreground: 210 40% 98%;
    --sidebar-accent: 214 32% 91%;
    --sidebar-accent-foreground: 215 28% 17%;
    --sidebar-border: 214 32% 88%;
    --sidebar-ring: 221 83% 53%;
  }

  .dark {
    /* 背景：采用质感深灰 (Slate 900级别) 而不是纯黑 */
    --background: 215 20% 12%; 
    --foreground: 210 40% 98%; /* 更明亮的纯白主文本 */
    
    /* 卡片和悬浮层：比背景明显提亮一个色阶 (Slate 800级别)，形成物理层次感 */
    --card: 215 20% 16%; 
    --card-foreground: 210 40% 98%;
    --popover: 215 20% 16%;
    --popover-foreground: 210 40% 98%;
    
    /* 弱化背景：用于 Table 表头、Hover 状态，再次提亮 */
    --muted: 215 20% 22%; 
    /* 弱化文字：明度提高到 70%，确保在深色背景上不费眼 */
    --muted-foreground: 215 15% 70%; 
    
    /* 边框和输入框：使用高光轮廓线，对比度极强，切分区域极其清晰 */
    --border: 215 20% 28%; 
    --input: 215 20% 28%;
    
    /* 主色调：采用穿透力更强的高明度冰蓝色 */
    --primary: 217 90% 70%; 
    --primary-foreground: 215 20% 12%;
    
    --secondary: 215 20% 22%;
    --secondary-foreground: 210 40% 98%;
    --accent: 215 20% 22%;
    --accent-foreground: 210 40% 98%;
    
    --destructive: 0 70% 60%;
    --destructive-foreground: 210 40% 98%;
    
    --ring: 217 90% 70%;

    --chart-1: 217 90% 70%;
    --chart-2: 200 90% 60%;
    --chart-3: 35 90% 65%;
    --chart-4: 280 75% 75%;
    --chart-5: 340 85% 70%;

    /* 侧边栏：略微比主区域深一点点，起到画框包裹的视觉效果 */
    --sidebar-background: 215 20% 10%; 
    --sidebar-foreground: 210 40% 98%;
    --sidebar-primary: 217 90% 70%;
    --sidebar-primary-foreground: 215 20% 12%;
    --sidebar-accent: 215 20% 22%;
    --sidebar-accent-foreground: 210 40% 98%;
    --sidebar-border: 215 20% 28%;
    --sidebar-ring: 217 90% 70%;
  }
  

  /* styles.css */
  .CollapsibleContent {
    overflow: hidden;
  }
  .CollapsibleContent[data-state='open'] {
    animation: slideDown 300ms ease-out;
  }
  .CollapsibleContent[data-state='closed'] {
    animation: slideUp 300ms ease-out;
  }

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

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

  /* Prevent focus zoom on mobile devices */
  @media screen and (max-width: 767px) {
    input,
    select,
    textarea {
      font-size: 16px !important;
    }
  }
}

@layer utilities {
  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  .faded-bottom {
    @apply after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:hidden after:h-32 after:w-full after:bg-[linear-gradient(180deg,_transparent_10%,_hsl(var(--background))_70%)] after:md:block;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  html {
    @apply overflow-x-hidden;
  }
  body {
    @apply min-h-svh w-full bg-background text-foreground;
  }
}
