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

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 250, 250, 250;
  --background-end-rgb: 255, 255, 255;
}

html {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 18, 18, 18;
    --background-end-rgb: 0, 0, 0;
  }

  html {
    color-scheme: dark;
  }
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}

/* Legacy button utilities, kept visually neutral for the FLNXI workspace. */
.btn-apple {
  @apply px-6 py-2.5 rounded-lg font-medium transition-colors duration-150 shadow-none;
}

.btn-primary {
  @apply btn-apple bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 hover:bg-slate-800 dark:hover:bg-white disabled:opacity-60;
}

.btn-secondary {
  @apply btn-apple bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 disabled:opacity-60;
}

/* 滑块样式 */
.slider::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #3b82f6;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #3b82f6;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.slider:focus {
  outline: none;
}

.slider:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.slider:focus::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.btn-danger {
  @apply btn-apple bg-red-600 dark:bg-red-700 text-white hover:bg-red-700 dark:hover:bg-red-600 disabled:opacity-60;
}

/* Legacy input utility, now matched to the restrained admin controls. */
.input-apple {
  @apply w-full px-4 py-3 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:border-slate-900 dark:focus:border-slate-500 focus:ring-2 focus:ring-slate-200 dark:focus:ring-slate-700 outline-none transition-colors;
}

/* Legacy card utility, no hover lift or showcase shadow. */
.card-apple {
  @apply bg-white dark:bg-slate-900 rounded-lg shadow-sm border border-slate-200 dark:border-slate-800;
}

/* Scrollbar styling (light & dark) */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
  background: rgba(107, 114, 128, 0.6);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

@media (prefers-color-scheme: dark) {
  *::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
  }

  *::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.7);
    border-color: rgba(15, 23, 42, 0.9);
  }
}

body {
  scrollbar-width: thin;
  scrollbar-color: rgba(107, 114, 128, 0.6) transparent;
}

@media (prefers-color-scheme: dark) {
  body {
    scrollbar-color: rgba(148, 163, 184, 0.7) rgba(15, 23, 42, 0.9);
  }
}

@keyframes modal-overlay-apple {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes modal-content-apple {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-overlay-apple {
  animation: modal-overlay-apple 0.15s ease-out forwards;
}

.modal-content-apple {
  position: relative;
  animation: modal-content-apple 0.18s ease-out forwards;
  transform-origin: top center;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
}

.dark .modal-content-apple {
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

/* Material 预览弹窗现在重新使用统一 UI Modal 样式，
   不再需要单独的溢出与尺寸覆盖规则。 */