/* 全局样式 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 自定义基础样式 */
@layer base {
  body {
    @apply font-sans bg-gray-50 text-gray-900 transition-colors duration-300;
  }

  body.dark {
    @apply bg-dark-background text-dark-text;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-semibold;
  }

  input, textarea, select {
    @apply transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary/50;
  }

  button {
    @apply transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary/50;
  }
}

/* 自定义组件样式 */
@layer components {
  .btn-primary {
    @apply bg-primary text-white px-4 py-2 rounded-md hover:bg-primary/90 active:bg-primary/80 focus:ring-primary;
  }

  .btn-secondary {
    @apply bg-gray-200 text-gray-800 px-4 py-2 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600;
  }

  .btn-danger {
    @apply bg-error text-white px-4 py-2 rounded-md hover:bg-error/90 active:bg-error/80 focus:ring-error;
  }

  .btn-success {
    @apply bg-success text-white px-4 py-2 rounded-md hover:bg-success/90 active:bg-success/80 focus:ring-success;
  }

  .sidebar-item {
    @apply flex items-center gap-3 px-4 py-3 rounded-md transition-all duration-200 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800;
  }

  .sidebar-item.active {
    @apply bg-primary/10 text-primary dark:bg-primary/20;
  }

  .card {
    @apply bg-white dark:bg-dark-card rounded-lg shadow-card p-4 transition-all duration-300 hover:shadow-card-hover;
  }

  .input-field {
    @apply w-full px-4 py-2 border rounded-md border-gray-300 dark:border-dark-border dark:bg-dark-card/50 dark:text-dark-text;
  }

  .text-area {
    @apply w-full px-4 py-2 border rounded-md border-gray-300 min-h-[200px] resize-y dark:border-dark-border dark:bg-dark-card/50 dark:text-dark-text;
  }

  .checkbox-input {
    @apply h-4 w-4 text-primary border-gray-300 rounded focus:ring-primary;
  }

  .radio-input {
    @apply h-4 w-4 text-primary border-gray-300 focus:ring-primary;
  }

  .select-input {
    @apply block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm bg-white dark:bg-dark-card dark:border-dark-border dark:text-dark-text;
  }

  .section-title {
    @apply text-xl font-bold mb-4 text-gray-800 dark:text-dark-text;
  }

  .divider {
    @apply border-t border-gray-200 my-4 dark:border-dark-border;
  }

  .badge {
    @apply px-2 py-1 text-xs font-medium rounded-full;
  }

  .badge-primary {
    @apply bg-primary/10 text-primary;
  }

  .badge-success {
    @apply bg-success/10 text-success;
  }

  .badge-warning {
    @apply bg-warning/10 text-warning;
  }

  .badge-error {
    @apply bg-error/10 text-error;
  }

  .history-item {
    @apply flex items-center justify-between p-3 mb-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors;
  }

  .help-tooltip {
    @apply relative inline-block cursor-help;
  }

  .help-tooltip::after {
    @apply content-[''] absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-40 p-2 bg-gray-800 text-white text-xs rounded opacity-0 invisible transition-all duration-300 z-10 pointer-events-none;
  }

  .help-tooltip:hover::after {
    @apply opacity-100 visible;
  }
}

/* 自定义工具类 */
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  .transition-all-300 {
    transition: all 300ms ease-in-out;
  }

  .rotate-y-180 {
    transform: rotateY(180deg);
  }

  .backface-hidden {
    backface-visibility: hidden;
  }

  .perspective {
    perspective: 1000px;
  }

  .preserve-3d {
    transform-style: preserve-3d;
  }
}

/* 动画样式 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInFromLeft {
  from { transform: translateX(-20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInFromRight {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInFromTop {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideInFromBottom {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* 加载动画 */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  @apply animate-spin rounded-full h-6 w-6 border-t-2 border-b-2 border-primary;
}

/* 响应式样式微调 */
@media (max-width: 768px) {
  .sidebar-item {
    @apply py-2;
  }
  
  .card {
    @apply p-3;
  }
}

/* 深色模式样式 */
@layer dark {
  body.dark {
    @apply bg-dark-bg text-dark-text;
  }
  
  .dark .bg-white {
    @apply bg-dark-hover;
  }
  
  .dark .text-gray-800 {
    @apply text-dark-text;
  }
  
  .dark .border-gray-200 {
    @apply border-dark-border;
  }
  
  .dark .bg-gray-50 {
    @apply bg-dark-hover;
  }
  
  .dark .text-gray-600 {
    @apply text-dark-text/80;
  }
  
  .dark .hover:bg-gray-100 {
    @apply hover:bg-dark-border;
  }
  
  .dark textarea,
  .dark input,
  .dark select {
    @apply bg-dark-hover text-dark-text border-dark-border;
  }
  
  .dark .sidebar-item.active {
    @apply bg-dark-border;
  }
  
  .dark .card {
    @apply bg-dark-hover border-dark-border;
  }
  
  .dark .btn-secondary {
    @apply bg-dark-border text-dark-text hover:bg-dark-border/80;
  }
  
  .dark .shadow-md {
    @apply shadow-gray-900/20;
  }
  
  .dark .toast {
    @apply bg-dark-hover text-dark-text shadow-lg;
  }
}

/* 响应式设计 */
@layer responsive {
  /* 超小屏幕 (360px以下) */
  @media (max-width: 359px) {
    .container {
      @apply px-2;
    }
    
    .btn {
      @apply px-3 py-1.5 text-sm;
    }
    
    .sidebar {
      @apply w-40;
    }
    
    .sidebar-item span {
      @apply hidden;
    }
  }
  
  /* 小屏幕 (360px - 639px) */
  @media (min-width: 360px) and (max-width: 639px) {
    .grid-mobile {
      @apply grid-cols-1;
    }
    
    .sidebar {
      @apply fixed inset-y-0 left-0 transform -translate-x-full z-50 w-64 transition-transform duration-300 ease-in-out;
    }
    
    .sidebar.open {
      @apply transform translate-x-0;
    }
    
    .main-content {
      @apply ml-0;
    }
    
    .right-panel {
      @apply hidden;
    }
    
    .mobile-menu-btn {
      @apply block;
    }
  }
  
  /* 平板屏幕 (640px - 1023px) */
  @media (min-width: 640px) and (max-width: 1023px) {
    .sidebar {
      @apply w-16;
    }
    
    .sidebar-item span {
      @apply hidden;
    }
    
    .main-content {
      @apply ml-16;
    }
    
    .right-panel {
      @apply hidden;
    }
    
    .input-output-container {
      @apply grid-cols-1 gap-4;
    }
  }
  
  /* 中等屏幕 (1024px - 1279px) */
  @media (min-width: 1024px) and (max-width: 1279px) {
    .sidebar {
      @apply w-40;
    }
    
    .sidebar-item span {
      @apply block text-xs;
    }
    
    .main-content {
      @apply ml-40;
    }
    
    .right-panel {
      @apply block w-72;
    }
    
    .input-output-container {
      @apply grid-cols-2 gap-6;
    }
  }
  
  /* 大屏幕 (1280px及以上) */
  @media (min-width: 1280px) {
    .sidebar {
      @apply w-40;
    }
    
    .sidebar-item span {
      @apply block text-xs;
    }
    
    .main-content {
      @apply ml-40;
    }
    
    .right-panel {
      @apply block w-80;
    }
    
    .input-output-container {
      @apply grid-cols-2 gap-8;
    }
  }
  
  /* 文本输入框响应式高度 */
  @media (max-height: 600px) {
    textarea {
      @apply h-40;
    }
  }
  
  @media (min-height: 601px) and (max-height: 800px) {
    textarea {
      @apply h-60;
    }
  }
  
  @media (min-height: 801px) {
    textarea {
      @apply h-80;
    }
  }
}

/* 主题切换动画 */
.theme-transition {
  @apply transition-colors duration-300 ease-in-out;
}

/* 滚动条样式 */
@layer utilities {
  .custom-scrollbar::-webkit-scrollbar {
    @apply w-2 h-2;
  }
  
  .custom-scrollbar::-webkit-scrollbar-track {
    @apply bg-transparent;
  }
  
  .custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-gray-300 dark:bg-gray-700 rounded-full hover:bg-gray-400 dark:hover:bg-gray-600 transition-colors;
  }
}

/* 可访问性增强 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 打印样式 */
@media print {
  body {
    background: white !important;
    color: black !important;
  }
  
  .sidebar, .right-sidebar, .btn, .history, .help-panel {
    display: none !important;
  }
  
  .main-content {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
}