@import "tailwindcss";

@custom-variant dark (&:is(.dark *));
@config "../../tailwind.config.js";
@import "./body.css";

/* CSS变量定义 - 农业管理系统主题 */
:root {
  /* 基础色彩系统 */
  --input-background: #f3f3f5;
  --background: 240 10% 98%;
  --foreground: 240 10% 10%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 10%;
  --primary: 142 76% 36%;
  --primary-foreground: 355 100% 97%;
  --secondary: 217 91% 60%;
  --secondary-foreground: 240 10% 98%;
  --muted: 240 4% 96%;
  --muted-foreground: 240 4% 46%;
  --accent: 240 4% 96%;
  --accent-foreground: 240 10% 10%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 240 10% 98%;
  --border: 240 4% 90%;
  --input: 240 4% 90%;
  --ring: 142 76% 36%;
  --radius: 0.5rem;

  /* 农业管理系统特定颜色 */
  --agriculture-green: 142 76% 36%;
  --agriculture-green-50: 138 100% 97%;
  --agriculture-green-600: 142 76% 36%;
  --agriculture-green-700: 142 74% 31%;
  --agriculture-green-900: 142 72% 23%;
  --agriculture-blue: 217 91% 60%;
  --agriculture-blue-50: 217 100% 97%;
  --agriculture-amber: 38 92% 50%;
  --agriculture-amber-50: 38 100% 97%;
  --agriculture-brown: 27 48% 34%;
  --agriculture-brown-50: 27 48% 95%;

  /* 状态颜色 */
  --status-running: 142 76% 36%;
  --status-idle: 220 9% 90%;
  --status-maintenance: 38 92% 50%;
  --status-error: 0 84% 60%;
  --status-offline: 220 9% 75%;

  /* 间距系统 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;

  /* 圆角系统 */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --sidebar: hsl(0 0% 98%);
  --sidebar-foreground: hsl(240 5.3% 26.1%);
  --sidebar-primary: hsl(240 5.9% 10%);
  --sidebar-primary-foreground: hsl(0 0% 98%);
  --sidebar-accent: hsl(240 4.8% 95.9%);
  --sidebar-accent-foreground: hsl(240 5.9% 10%);
  --sidebar-border: hsl(220 13% 91%);
  --sidebar-ring: hsl(217.2 91.2% 59.8%);
}

.dark {
  --input-background:240 10% 98%;
  --background: 240 10% 3.9%;
  --foreground: 240 10% 98%;
  --card: 240 10% 3.9%;
  --card-foreground: 240 10% 98%;
  --popover: 240 10% 3.9%;
  --popover-foreground: 240 10% 98%;
  --primary: 142 70% 45%;
  --primary-foreground: 144 61% 20%;
  --secondary: 217 33% 17%;
  --secondary-foreground: 210 40% 98%;
  --muted: 240 3% 15%;
  --muted-foreground: 240 5% 65%;
  --accent: 240 3% 15%;
  --accent-foreground: 240 10% 98%;
  --destructive: 0 63% 31%;
  --destructive-foreground: 240 10% 98%;
  --border: 240 3% 15%;
  --input: 240 3% 15%;
  --ring: 142 70% 45%;
  --sidebar: hsl(240 5.9% 10%);
  --sidebar-foreground: hsl(240 4.8% 95.9%);
  --sidebar-primary: hsl(224.3 76.3% 48%);
  --sidebar-primary-foreground: hsl(0 0% 100%);
  --sidebar-accent: hsl(240 3.7% 15.9%);
  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
  --sidebar-border: hsl(240 3.7% 15.9%);
  --sidebar-ring: hsl(217.2 91.2% 59.8%);
}

/* 基础样式 */
@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

/* 组件样式 */
@layer components {
  /* 状态标签样式 */
  .status-running {
    @apply bg-green-100 text-green-800 border-green-200;
  }
  .status-idle {
    @apply bg-gray-100 text-gray-800 border-gray-200;
  }
  .status-maintenance {
    @apply bg-yellow-100 text-yellow-800 border-yellow-200;
  }
  .status-error {
    @apply bg-red-100 text-red-800 border-red-200;
  }
  .status-offline {
    @apply bg-gray-100 text-gray-600 border-gray-200;
  }

  /* 农业主题按钮 */
  .btn-agriculture {
    @apply bg-green-600 hover:bg-green-700 text-white;
  }

  .btn-agriculture-secondary {
    @apply bg-blue-600 hover:bg-blue-700 text-white;
  }

  /* 卡片样式 */
  .card-agriculture {
    @apply bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition-shadow;
  }

  /* 导航样式 */
  .nav-agriculture {
    @apply bg-green-600 text-white;
  }
}

/* 工具类 */
@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  /* 农业色彩工具类 */
  .text-agriculture-green {
    color: rgb(var(--agriculture-green));
  }

  .bg-agriculture-green {
    background-color: rgb(var(--agriculture-green));
  }

  .border-agriculture-green {
    border-color: rgb(var(--agriculture-green));
  }

  /* 响应式容器 */
  .container-agriculture {
    @apply container mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* 农业网格系统 */
  .grid-agriculture {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6;
  }
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 5px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

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

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

/* 动画 */
@keyframes agriculture-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.agriculture-fade-in {
  animation: agriculture-fade-in 0.3s ease-out;
}

/* 打印样式 */
@media print {
  .no-print {
    display: none !important;
  }

  .card-agriculture {
    @apply shadow-none border border-gray-300;
  }
}

@theme inline {
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  --color-input-background: var(--input-background);
  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }

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

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
  h2 {
      font-size: var(--text-xl);
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }
  
}

@layer utilities {
  .\@container\/card-header {
    container: card-header / inline-size;
  }
  .bg-input-background {
    background-color: var(--input-background);
  }
  .focus-visible\:ring-ring\/50:focus-visible {
    --tw-ring-color: var(--ring);
  }
}