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

/* Автоматическое применение темных цветов ко всем карточкам, модальным окнам, и т.д. */
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 .bg-slate-800\/50,
html.dark .bg-slate-900\/50 {
  background-color: rgb(30 41 59 / 0.8) !important; /* slate-800 с прозрачностью */
}

/* Текст - улучшенная читаемость для современного дизайна */
html.dark .text-slate-900,
html.dark .text-slate-800,
html.dark .text-gray-900,
html.dark .text-gray-800 {
  color: rgb(248 250 252) !important; /* slate-50 - максимальная читаемость */
}

html.dark .text-slate-700,
html.dark .text-slate-600,
html.dark .text-gray-700,
html.dark .text-gray-600 {
  color: rgb(226 232 240) !important; /* slate-200 - отличная читаемость */
}

html.dark .text-slate-500,
html.dark .text-gray-500 {
  color: rgb(203 213 225) !important; /* slate-300 - хорошая читаемость */
}

html.dark .text-slate-400 {
  color: rgb(203 213 225) !important; /* slate-300 - вместо slate-400 для лучшей читаемости */
}

html.dark .text-slate-300 {
  color: rgb(226 232 240) !important; /* slate-200 - еще светлее для лучшей читаемости */
}

/* Light mode - улучшенная читаемость */
html:not(.dark) .text-slate-500 {
  color: rgb(71 85 105) !important; /* slate-600 - темнее для лучшего контраста */
}

html:not(.dark) .text-slate-400 {
  color: rgb(100 116 139) !important; /* slate-500 - темнее для лучшего контраста */
}

/* Улучшенная читаемость для всех текстовых элементов в светлой теме */
html:not(.dark) .text-slate-600 {
  color: rgb(51 65 85) !important; /* slate-700 - еще темнее для лучшего контраста */
}

html:not(.dark) .text-slate-700 {
  color: rgb(30 41 59) !important; /* slate-800 - максимальный контраст */
}

/* КРИТИЧНО: Исправление для text-slate-300 в светлом режиме - должен быть темным */
html:not(.dark) .text-slate-300 {
  color: rgb(51 65 85) !important; /* slate-700 - темный для светлого фона */
}

html:not(.dark) .text-slate-200 {
  color: rgb(30 41 59) !important; /* slate-800 - очень темный для светлого фона */
}

html:not(.dark) .text-slate-100 {
  color: rgb(15 23 42) !important; /* slate-900 - максимально темный для светлого фона */
}

/* КРИТИЧНО: Белый текст на белом фоне - должен быть темным в светлом режиме */
html:not(.dark) .bg-white .text-white,
html:not(.dark) .bg-slate-50 .text-white,
html:not(.dark) .bg-slate-100 .text-white {
  color: rgb(15 23 42) !important; /* slate-900 - темный для светлого фона */
}

/* Улучшенная видимость выбранных кнопок в темном режиме */
html.dark .bg-purple-600 {
  background-color: rgb(147 51 234) !important; /* purple-500 - ярче для темного режима */
}

html.dark .bg-purple-500 {
  background-color: rgb(168 85 247) !important; /* purple-400 - еще ярче для темного режима */
}

html.dark .border-purple-500 {
  border-color: rgb(192 132 252) !important; /* purple-300 - ярче для темного режима */
}

html.dark .border-purple-400 {
  border-color: rgb(196 181 253) !important; /* purple-200 - еще ярче для темного режима */
}

/* Улучшенная видимость выбранных кнопок с emerald в темном режиме */
html.dark .bg-emerald-500 {
  background-color: rgb(16 185 129) !important; /* emerald-500 - ярче для темного режима */
}

html.dark .bg-emerald-600 {
  background-color: rgb(5 150 105) !important; /* emerald-600 - ярче для темного режима */
}

html.dark .border-emerald-500 {
  border-color: rgb(110 231 183) !important; /* emerald-300 - ярче для темного режима */
}

html.dark .border-emerald-400 {
  border-color: rgb(134 239 172) !important; /* emerald-200 - еще ярче для темного режима */
}

/* Границы */
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(248 250 252) !important; /* slate-50 - более светлый для лучшей читаемости */
  border-color: rgb(71 85 105) !important; /* slate-600 */
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: rgb(203 213 225) !important; /* slate-300 - светлее для лучшей читаемости */
}

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

/* Кнопки - исключаем все классы с прозрачностью и цветные классы */
html.dark button:not([class*="bg-white/"]):not([class*="bg-black/"]):not([class*="bg-slate-"]):not(.bg-emerald-500):not(.bg-emerald-600):not(.bg-blue-500):not(.bg-red-500):not(.bg-yellow-500):not(.bg-indigo-500):not(.bg-transparent):not(.bg-rose-500):not(.bg-rose-600):not(.bg-purple-500):not(.bg-purple-600):not(.bg-white):not([class*="!bg-"]) {
  background-color: rgb(51 65 85) !important; /* slate-700 */
  color: rgb(241 245 249) !important; /* slate-100 */
}

html.dark button:not([class*="bg-white/"]):not([class*="bg-black/"]):not([class*="bg-slate-"]):not(.bg-emerald-500):not(.bg-emerald-600):not(.bg-blue-500):not(.bg-red-500):not(.bg-yellow-500):not(.bg-indigo-500):not(.bg-rose-500):not(.bg-rose-600):not(.bg-purple-500):not(.bg-purple-600):not(.bg-white):not([class*="!bg-"]):hover {
  background-color: rgb(71 85 105) !important; /* slate-600 */
}

/* Бейджи (светлые) - улучшенная читаемость */
html.dark .bg-blue-50 {
  background-color: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
}

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

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

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

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

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

html.dark .bg-pink-50 {
  background-color: rgba(236, 72, 153, 0.15) !important;
  border-color: rgba(236, 72, 153, 0.4) !important;
}

/* Текст бейджей - улучшенная читаемость */
html.dark .text-blue-700,
html.dark .text-blue-600 {
  color: rgb(147 197 253) !important; /* blue-300 */
}

html.dark .text-blue-500,
html.dark .text-blue-400 {
  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-emerald-500,
html.dark .text-emerald-400 {
  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-red-500,
html.dark .text-red-400 {
  color: rgb(252 165 165) !important; /* red-300 - светлее для лучшей читаемости */
}

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

html.dark .text-yellow-500,
html.dark .text-yellow-400,
html.dark .text-amber-500,
html.dark .text-amber-400 {
  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 .text-indigo-500,
html.dark .text-indigo-400 {
  color: rgb(165 180 252) !important; /* indigo-300 - светлее для лучшей читаемости */
}

html.dark .text-purple-700,
html.dark .text-purple-600 {
  color: rgb(196 181 253) !important; /* purple-300 */
}

html.dark .text-purple-500,
html.dark .text-purple-400,
html.dark .text-purple-300 {
  color: rgb(196 181 253) !important; /* purple-300 - светлее для лучшей читаемости */
}

html.dark .text-pink-700,
html.dark .text-pink-600 {
  color: rgb(249 168 212) !important; /* pink-300 */
}

html.dark .text-pink-500,
html.dark .text-pink-400 {
  color: rgb(249 168 212) !important; /* pink-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 */
}