@import url('https://rsms.me/inter/inter.css');
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply bg-gray-900 text-gray-100;
  }
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-gray-800;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-500;
}

.drag {
  -webkit-app-region: drag;
}

.drag button {
  -webkit-app-region: no-drag;
}

/* 添加日期选择器样式 */
.react-datepicker-wrapper {
  z-index: 60;
}

.react-datepicker-popper {
  z-index: 60 !important;
}

.react-datepicker {
  @apply bg-gray-800 border-gray-700 text-gray-200;
}

.react-datepicker__header {
  @apply bg-gray-900 border-gray-700;
}

.react-datepicker__current-month,
.react-datepicker__day-name {
  @apply text-gray-200;
}

.react-datepicker__day {
  @apply text-gray-200 hover:bg-gray-700;
}

.react-datepicker__day--selected {
  @apply bg-blue-500 hover:bg-blue-600;
}

/* 添加拖拽相关样式 */
.dragging {
  @apply opacity-90 scale-[1.02] rotate-1;
}

/* 拖拽时的占位样式 */
.drop-placeholder {
  @apply border-2 border-dashed border-blue-500/50 bg-blue-500/5 rounded-xl;
}

/* 拖拽手柄的悬停效果 */
.drag-handle {
  @apply transition-all duration-200;
}

.drag-handle:hover .drag-dots {
  @apply bg-blue-400;
}
