/* Глобальные переменные для темной темы */

/* Автоматическое применение темных цветов ко всем карточкам, модальным окнам, и т.д. */
html.dark {
  /* Основные фоны */
  --tw-bg-opacity: 1;
}

/* Белые карточки и контейнеры */
html.dark .bg-white {
  background-color: rgb(30 41 59) !important; /* slate-800 */
}

/* Светло-серый фон */
html.dark .bg-slate-50,
html.dark .bg-slate-100,
html.dark .bg-gray-50,
html.dark .bg-gray-100 {
  background-color: rgb(30 41 59) !important; /* slate-800 */
}

/* Темно-серый фон (еще темнее) */
html.dark .bg-slate-200 {
  background-color: rgb(51 65 85) !important; /* slate-700 */
}

/* Текст */
html.dark .text-slate-900,
html.dark .text-slate-800,
html.dark .text-gray-900,
html.dark .text-gray-800 {
  color: rgb(241 245 249) !important; /* slate-100 */
}

html.dark .text-slate-700,
html.dark .text-slate-600,
html.dark .text-gray-700,
html.dark .text-gray-600 {
  color: rgb(203 213 225) !important; /* slate-300 */
}

html.dark .text-slate-500,
html.dark .text-gray-500 {
  color: rgb(148 163 184) !important; /* slate-400 */
}

html.dark .text-slate-400 {
  color: rgb(100 116 139) !important; /* slate-500 */
}

/* Границы */
html.dark .border-slate-200,
html.dark .border-slate-100,
html.dark .border-gray-200,
html.dark .border-gray-100 {
  border-color: rgb(51 65 85) !important; /* slate-700 */
}

html.dark .border-slate-300 {
  border-color: rgb(71 85 105) !important; /* slate-600 */
}

/* Hover эффекты */
html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-gray-50:hover {
  background-color: rgb(51 65 85) !important; /* slate-700 */
}

html.dark .hover\:bg-slate-100:hover,
html.dark .hover\:bg-gray-100:hover {
  background-color: rgb(71 85 105) !important; /* slate-600 */
}

html.dark .hover\:bg-white:hover {
  background-color: rgb(51 65 85) !important; /* slate-700 */
}

/* Тени */
html.dark .shadow,
html.dark .shadow-sm,
html.dark .shadow-md,
html.dark .shadow-lg {
  --tw-shadow-color: rgba(0, 0, 0, 0.3);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
}

/* Input, Select, Textarea */
html.dark input,
html.dark select,
html.dark textarea {
  background-color: rgb(51 65 85) !important; /* slate-700 */
  color: rgb(241 245 249) !important; /* slate-100 */
  border-color: rgb(71 85 105) !important; /* slate-600 */
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: rgb(148 163 184) !important; /* slate-400 */
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: rgb(16 185 129) !important; /* emerald-500 */
  outline: none;
}

/* Кнопки */
html.dark button:not(.bg-emerald-500):not(.bg-emerald-600):not(.bg-blue-500):not(.bg-red-500):not(.bg-yellow-500):not(.bg-indigo-500) {
  background-color: rgb(51 65 85) !important; /* slate-700 */
  color: rgb(241 245 249) !important; /* slate-100 */
}

html.dark button:not(.bg-emerald-500):not(.bg-emerald-600):not(.bg-blue-500):not(.bg-red-500):not(.bg-yellow-500):not(.bg-indigo-500):hover {
  background-color: rgb(71 85 105) !important; /* slate-600 */
}

/* Бейджи (светлые) */
html.dark .bg-blue-50 {
  background-color: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

html.dark .bg-emerald-50 {
  background-color: rgba(16, 185, 129, 0.1) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}

html.dark .bg-red-50 {
  background-color: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

html.dark .bg-yellow-50 {
  background-color: rgba(234, 179, 8, 0.1) !important;
  border-color: rgba(234, 179, 8, 0.3) !important;
}

html.dark .bg-indigo-50 {
  background-color: rgba(99, 102, 241, 0.1) !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
}

html.dark .bg-purple-50 {
  background-color: rgba(168, 85, 247, 0.1) !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
}

/* Текст бейджей */
html.dark .text-blue-700,
html.dark .text-blue-600 {
  color: rgb(147 197 253) !important; /* blue-300 */
}

html.dark .text-emerald-700,
html.dark .text-emerald-600 {
  color: rgb(110 231 183) !important; /* emerald-300 */
}

html.dark .text-red-700,
html.dark .text-red-600 {
  color: rgb(252 165 165) !important; /* red-300 */
}

html.dark .text-yellow-700,
html.dark .text-yellow-600 {
  color: rgb(253 224 71) !important; /* yellow-300 */
}

html.dark .text-indigo-700,
html.dark .text-indigo-600 {
  color: rgb(165 180 252) !important; /* indigo-300 */
}

/* Специальные классы */
html.dark .ring-slate-200 {
  --tw-ring-color: rgb(51 65 85) !important; /* slate-700 */
}

html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(51 65 85) !important; /* slate-700 */
}

/* Scrollbar */
html.dark ::-webkit-scrollbar-thumb {
  background-color: rgb(71 85 105) !important; /* slate-600 */
}

html.dark ::-webkit-scrollbar-track {
  background-color: rgb(15 23 42) !important; /* slate-900 */
}