/**
 * Глобальные переопределения Tailwind-утилит для светлой и тёмной темы.
 * Палитра задаётся CSS-переменными; правила ниже только подставляют var().
 */

/* ── Токены светлой темы ── */
:root,
html:not(.dark) {
  --dt-text-slate-100: rgb(9 9 11);
  --dt-text-slate-200: rgb(39 39 42);
  --dt-text-slate-300: rgb(63 63 70);
  --dt-text-slate-400: rgb(100 116 139);
  --dt-text-slate-500: rgb(82 82 91);
  --dt-text-slate-600: rgb(63 63 70);
  --dt-text-slate-700: rgb(39 39 42);
  --dt-text-on-light-bg: rgb(9 9 11);
}

/* ── Токены тёмной темы ── */
html.dark {
  color-scheme: dark;

  /* Фоны */
  --dt-bg-card: rgb(39 39 42);
  --dt-bg-elevated: rgb(63 63 70);
  --dt-bg-overlay: rgb(30 41 59 / 0.8);
  --dt-bg-input: rgb(15 23 42);
  --dt-bg-hover-subtle: rgb(63 63 70);
  --dt-bg-hover-muted: rgb(82 82 91);

  /* Текст */
  --dt-text-primary: rgb(248 250 252);
  --dt-text-secondary: rgb(226 232 240);
  --dt-text-muted: rgb(203 213 225);
  --dt-text-input: rgb(248 250 252);
  --dt-text-placeholder: rgb(203 213 225);

  /* Границы */
  --dt-border-default: rgb(63 63 70);
  --dt-border-strong: rgb(82 82 91);
  --dt-border-input: rgb(37 99 235 / 0.45);
  --dt-border-focus: rgb(0 212 255);
  --dt-border-queue: rgb(51 65 85);
  --dt-border-queue-focus: rgb(99 102 241);
  --dt-border-checkbox: rgb(71 85 105);

  /* Акценты: purple */
  --dt-purple-bg-600: rgb(147 51 234);
  --dt-purple-bg-500: rgb(168 85 247);
  --dt-purple-border-500: rgb(192 132 252);
  --dt-purple-border-400: rgb(196 181 253);
  --dt-purple-text: rgb(196 181 253);

  /* Акценты: emerald */
  --dt-emerald-bg-500: rgb(16 185 129);
  --dt-emerald-bg-600: rgb(5 150 105);
  --dt-emerald-border-500: rgb(110 231 183);
  --dt-emerald-border-400: rgb(134 239 172);
  --dt-emerald-text: rgb(110 231 183);

  /* Тени и кольца */
  --dt-shadow-color: rgba(0, 0, 0, 0.3);
  --dt-ring-color: rgb(63 63 70);

  /* Бейджи */
  --dt-badge-blue-bg: rgba(59, 130, 246, 0.15);
  --dt-badge-blue-border: rgba(59, 130, 246, 0.4);
  --dt-badge-emerald-bg: rgba(16, 185, 129, 0.15);
  --dt-badge-emerald-border: rgba(16, 185, 129, 0.4);
  --dt-badge-red-bg: rgba(239, 68, 68, 0.15);
  --dt-badge-red-border: rgba(239, 68, 68, 0.4);
  --dt-badge-yellow-bg: rgba(234, 179, 8, 0.15);
  --dt-badge-yellow-border: rgba(234, 179, 8, 0.4);
  --dt-badge-indigo-bg: rgba(99, 102, 241, 0.15);
  --dt-badge-indigo-border: rgba(99, 102, 241, 0.4);
  --dt-badge-purple-bg: rgba(168, 85, 247, 0.15);
  --dt-badge-purple-border: rgba(168, 85, 247, 0.4);
  --dt-badge-pink-bg: rgba(236, 72, 153, 0.15);
  --dt-badge-pink-border: rgba(236, 72, 153, 0.4);
  --dt-badge-blue-text: rgb(147 197 253);
  --dt-badge-emerald-text: rgb(110 231 183);
  --dt-badge-red-text: rgb(252 165 165);
  --dt-badge-yellow-text: rgb(253 224 71);
  --dt-badge-indigo-text: rgb(165 180 252);
  --dt-badge-pink-text: rgb(249 168 212);

  /* Скроллбар */
  --dt-scrollbar-thumb: rgb(82 82 91);
  --dt-scrollbar-track: rgb(9 9 11);

  /* Вкладка «Ящики» */
  --dt-vzlom-chest-bg: rgba(49, 46, 129, 0.55);
  --dt-vzlom-chest-border: rgba(129, 140, 248, 0.55);
  --dt-vzlom-chest-text: rgb(241 245 249);
  --dt-vzlom-chest-bg-focus: rgba(49, 46, 129, 0.65);
  --dt-vzlom-chest-border-focus: rgba(232, 121, 249, 0.7);
  --dt-vzlom-primary-bg: rgba(192, 38, 211, 0.62);
  --dt-vzlom-primary-border: rgba(217, 70, 239, 0.65);
  --dt-vzlom-primary-text: rgb(250 245 255);
  --dt-vzlom-primary-bg-hover: rgba(217, 70, 239, 0.72);

  /* Вкладка «Защита» */
  --dt-vzlom-defense-cell-bg: rgba(63, 63, 70, 0.72);
  --dt-vzlom-defense-cell-border: rgba(125, 211, 252, 0.6);
  --dt-vzlom-defense-popup-bg: rgba(10, 18, 46, 0.96);
  --dt-vzlom-defense-popup-border: rgba(167, 139, 250, 0.7);
  --dt-vzlom-defense-popup-text: rgb(241, 245, 249);
  --dt-vzlom-defense-select-bg: rgba(63, 63, 70, 0.92);
  --dt-vzlom-defense-select-border: rgba(125, 211, 252, 0.5);
  --dt-vzlom-defense-select-bg-focus: rgba(63, 63, 70, 0.98);
  --dt-vzlom-defense-select-border-focus: rgba(196, 181, 253, 0.85);
  --dt-vzlom-defense-popup-btn-bg: rgba(127, 29, 29, 0.5);
  --dt-vzlom-defense-popup-btn-border: rgba(251, 113, 133, 0.6);
  --dt-vzlom-defense-popup-btn-text: rgb(254, 226, 226);
  --dt-vzlom-defense-popup-btn-bg-hover: rgba(153, 27, 27, 0.68);
  --dt-vzlom-defense-popup-btn-border-hover: rgba(251, 113, 133, 0.8);
  --dt-vzlom-defense-btn-bg: rgba(30, 64, 175, 0.45);
  --dt-vzlom-defense-btn-border: rgba(147, 197, 253, 0.5);
  --dt-vzlom-defense-btn-text: rgb(219, 234, 254);
  --dt-vzlom-defense-btn-bg-hover: rgba(37, 99, 235, 0.58);
  --dt-vzlom-defense-btn-border-hover: rgba(191, 219, 254, 0.75);
  --dt-vzlom-defense-btn-text-hover: rgb(239, 246, 255);
  --dt-vzlom-defense-tab-bg: rgba(24, 24, 27, 0.68);
  --dt-vzlom-defense-tab-border: rgba(96, 165, 250, 0.45);
  --dt-vzlom-defense-tab-text: rgb(226, 232, 240);
  --dt-vzlom-defense-tab-bg-hover: rgba(63, 63, 70, 0.8);
  --dt-vzlom-defense-tab-border-hover: rgba(147, 197, 253, 0.58);
  --dt-vzlom-defense-tab-text-hover: rgb(241, 245, 249);
  --dt-vzlom-defense-tab-active-bg: rgba(139, 92, 246, 0.45);
  --dt-vzlom-defense-tab-active-border: rgba(196, 181, 253, 0.9);
  --dt-vzlom-defense-tab-active-text: rgb(245, 243, 255);
  --dt-vzlom-defense-tab-active-shadow: 0 0 0 1px rgba(196, 181, 253, 0.45), 0 6px 14px -8px rgba(139, 92, 246, 0.8);

  /* Пресеты очереди */
  --dt-queue-preset-text: rgb(241 245 249);
}

/* ── Светлая тема: читаемость текста ── */
html:not(.dark) .text-slate-500 {
  color: var(--dt-text-slate-500);
}

html:not(.dark) .text-slate-400 {
  color: var(--dt-text-slate-400);
}

html:not(.dark) .text-slate-600 {
  color: var(--dt-text-slate-600);
}

html:not(.dark) .text-slate-700 {
  color: var(--dt-text-slate-700);
}

html:not(.dark) .text-slate-300 {
  color: var(--dt-text-slate-300);
}

html:not(.dark) .text-slate-200 {
  color: var(--dt-text-slate-200);
}

html:not(.dark) .text-slate-100 {
  color: var(--dt-text-slate-100);
}

/* Белый текст на светлом фоне → тёмный */
html:not(.dark) .bg-white .text-white,
html:not(.dark) .bg-slate-50 .text-white,
html:not(.dark) .bg-slate-100 .text-white {
  color: var(--dt-text-on-light-bg);
}

/* ── Тёмная тема: фоны карточек и контейнеров ── */
html.dark .bg-white,
html.dark .bg-slate-50,
html.dark .bg-slate-100,
html.dark .bg-gray-50,
html.dark .bg-gray-100 {
  background-color: var(--dt-bg-card);
}

html.dark .bg-slate-200 {
  background-color: var(--dt-bg-elevated);
}

/* Полупрозрачные фоны Tailwind (класс содержит «/») */
html.dark [class~="bg-slate-800/50"],
html.dark [class~="bg-slate-900/50"] {
  background-color: var(--dt-bg-overlay);
}

/* ── Тёмная тема: типографика ── */
html.dark .text-slate-900,
html.dark .text-slate-800,
html.dark .text-gray-900,
html.dark .text-gray-800 {
  color: var(--dt-text-primary);
}

html.dark .text-slate-700,
html.dark .text-slate-600,
html.dark .text-gray-700,
html.dark .text-gray-600 {
  color: var(--dt-text-secondary);
}

html.dark .text-slate-500,
html.dark .text-gray-500,
html.dark .text-slate-400 {
  color: var(--dt-text-muted);
}

html.dark .text-slate-300 {
  color: var(--dt-text-secondary);
}

/* ── Тёмная тема: акценты purple / emerald ── */
html.dark .bg-purple-600 {
  background-color: var(--dt-purple-bg-600);
}

html.dark .bg-purple-500 {
  background-color: var(--dt-purple-bg-500);
}

html.dark .border-purple-500 {
  border-color: var(--dt-purple-border-500);
}

html.dark .border-purple-400 {
  border-color: var(--dt-purple-border-400);
}

html.dark .bg-emerald-500 {
  background-color: var(--dt-emerald-bg-500);
}

html.dark .bg-emerald-600 {
  background-color: var(--dt-emerald-bg-600);
}

html.dark .border-emerald-500 {
  border-color: var(--dt-emerald-border-500);
}

html.dark .border-emerald-400 {
  border-color: var(--dt-emerald-border-400);
}

/* ── Тёмная тема: границы ── */
html.dark .border-slate-200,
html.dark .border-slate-100,
html.dark .border-gray-200,
html.dark .border-gray-100 {
  border-color: var(--dt-border-default);
}

html.dark .border-slate-300 {
  border-color: var(--dt-border-strong);
}

/* ── Тёмная тема: hover ── */
html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-white:hover {
  background-color: var(--dt-bg-hover-subtle);
}

html.dark .hover\:bg-slate-100:hover,
html.dark .hover\:bg-gray-100:hover {
  background-color: var(--dt-bg-hover-muted);
}

/* ── Тёмная тема: тени ── */
html.dark .shadow,
html.dark .shadow-sm,
html.dark .shadow-md,
html.dark .shadow-lg {
  --tw-shadow-color: var(--dt-shadow-color);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
}

/* ── Тёмная тема: поля ввода ── */
html.dark input:not(.combo-hud-settings-field):not(.giveaway-prize-textarea),
html.dark select:not(.combo-hud-settings-field),
html.dark textarea:not(.combo-hud-settings-field):not(.giveaway-prize-textarea) {
  background-color: var(--dt-bg-input);
  color: var(--dt-text-input);
  border-color: var(--dt-border-input);
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: var(--dt-text-placeholder);
}

html.dark input:not(.combo-hud-settings-field):not(.giveaway-prize-textarea):focus,
html.dark select:not(.combo-hud-settings-field):focus,
html.dark textarea:not(.combo-hud-settings-field):not(.giveaway-prize-textarea):focus {
  border-color: var(--dt-border-focus);
  outline: none;
}

/* Бригадный рейд: фон задаёт обёртка */
html.dark input.raid-damage-input,
html.dark input.raid-damage-input:focus {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Пресеты очереди */
html.dark input.queue-preset-time-input {
  background-color: var(--dt-bg-input);
  border-color: var(--dt-border-queue);
  color: var(--dt-queue-preset-text);
  box-shadow: none;
}

html.dark input.queue-preset-time-input:focus {
  border-color: var(--dt-border-queue-focus);
}

html.dark input.queue-preset-checkbox {
  background-color: var(--dt-bg-input);
  border-color: var(--dt-border-checkbox);
}

/* ── Тёмная тема: бейджи ── */
html.dark .bg-blue-50 {
  background-color: var(--dt-badge-blue-bg);
  border-color: var(--dt-badge-blue-border);
}

html.dark .bg-emerald-50 {
  background-color: var(--dt-badge-emerald-bg);
  border-color: var(--dt-badge-emerald-border);
}

html.dark .bg-red-50 {
  background-color: var(--dt-badge-red-bg);
  border-color: var(--dt-badge-red-border);
}

html.dark .bg-yellow-50,
html.dark .bg-amber-50 {
  background-color: var(--dt-badge-yellow-bg);
  border-color: var(--dt-badge-yellow-border);
}

html.dark .bg-indigo-50 {
  background-color: var(--dt-badge-indigo-bg);
  border-color: var(--dt-badge-indigo-border);
}

html.dark .bg-purple-50 {
  background-color: var(--dt-badge-purple-bg);
  border-color: var(--dt-badge-purple-border);
}

html.dark .bg-pink-50 {
  background-color: var(--dt-badge-pink-bg);
  border-color: var(--dt-badge-pink-border);
}

html.dark .text-blue-700,
html.dark .text-blue-600,
html.dark .text-blue-500,
html.dark .text-blue-400 {
  color: var(--dt-badge-blue-text);
}

html.dark .text-emerald-700,
html.dark .text-emerald-600,
html.dark .text-emerald-500,
html.dark .text-emerald-400 {
  color: var(--dt-badge-emerald-text);
}

html.dark .text-red-700,
html.dark .text-red-600,
html.dark .text-red-500,
html.dark .text-red-400 {
  color: var(--dt-badge-red-text);
}

html.dark .text-yellow-700,
html.dark .text-yellow-600,
html.dark .text-yellow-500,
html.dark .text-yellow-400,
html.dark .text-amber-700,
html.dark .text-amber-600,
html.dark .text-amber-500,
html.dark .text-amber-400 {
  color: var(--dt-badge-yellow-text);
}

html.dark .text-indigo-700,
html.dark .text-indigo-600,
html.dark .text-indigo-500,
html.dark .text-indigo-400 {
  color: var(--dt-badge-indigo-text);
}

html.dark .text-purple-700,
html.dark .text-purple-600,
html.dark .text-purple-500,
html.dark .text-purple-400,
html.dark .text-purple-300 {
  color: var(--dt-purple-text);
}

html.dark .text-pink-700,
html.dark .text-pink-600,
html.dark .text-pink-500,
html.dark .text-pink-400 {
  color: var(--dt-badge-pink-text);
}

/* ── Вкладка «Ящики» ── */
html.dark .vzlom-chest-control {
  background-color: var(--dt-vzlom-chest-bg);
  border-color: var(--dt-vzlom-chest-border);
  color: var(--dt-vzlom-chest-text);
}

html.dark .vzlom-chest-control:focus {
  background-color: var(--dt-vzlom-chest-bg-focus);
  border-color: var(--dt-vzlom-chest-border-focus);
  outline: none;
}

html.dark .vzlom-chest-primary-btn {
  background-color: var(--dt-vzlom-primary-bg);
  border-color: var(--dt-vzlom-primary-border);
  color: var(--dt-vzlom-primary-text);
}

html.dark .vzlom-chest-primary-btn:hover {
  background-color: var(--dt-vzlom-primary-bg-hover);
}

/* ── Вкладка «Защита» / «Авто-взлом» ── */
html.dark .vzlom-defense-cell {
  background-color: var(--dt-vzlom-defense-cell-bg);
  border-color: var(--dt-vzlom-defense-cell-border);
}

html.dark .vzlom-defense-popup {
  background-color: var(--dt-vzlom-defense-popup-bg);
  border-color: var(--dt-vzlom-defense-popup-border);
  color: var(--dt-vzlom-defense-popup-text);
}

html.dark .vzlom-defense-select {
  background-color: var(--dt-vzlom-defense-select-bg);
  border-color: var(--dt-vzlom-defense-select-border);
  color: var(--dt-vzlom-defense-popup-text);
}

html.dark .vzlom-defense-select:focus {
  background-color: var(--dt-vzlom-defense-select-bg-focus);
  border-color: var(--dt-vzlom-defense-select-border-focus);
  outline: none;
}

html.dark .vzlom-defense-popup-btn {
  background-color: var(--dt-vzlom-defense-popup-btn-bg);
  border-color: var(--dt-vzlom-defense-popup-btn-border);
  color: var(--dt-vzlom-defense-popup-btn-text);
}

html.dark .vzlom-defense-popup-btn:hover {
  background-color: var(--dt-vzlom-defense-popup-btn-bg-hover);
  border-color: var(--dt-vzlom-defense-popup-btn-border-hover);
}

html.dark .vzlom-defense-btn,
html.dark button.vzlom-defense-btn {
  background-color: var(--dt-vzlom-defense-btn-bg);
  border-color: var(--dt-vzlom-defense-btn-border);
  color: var(--dt-vzlom-defense-btn-text);
}

html.dark .vzlom-defense-btn:hover,
html.dark button.vzlom-defense-btn:hover {
  background-color: var(--dt-vzlom-defense-btn-bg-hover);
  border-color: var(--dt-vzlom-defense-btn-border-hover);
  color: var(--dt-vzlom-defense-btn-text-hover);
}

html.dark button.vzlom-defense-tab-btn {
  background-color: var(--dt-vzlom-defense-tab-bg);
  border-color: var(--dt-vzlom-defense-tab-border);
  color: var(--dt-vzlom-defense-tab-text);
}

html.dark button.vzlom-defense-tab-btn:hover {
  background-color: var(--dt-vzlom-defense-tab-bg-hover);
  border-color: var(--dt-vzlom-defense-tab-border-hover);
  color: var(--dt-vzlom-defense-tab-text-hover);
}

html.dark button.vzlom-defense-tab-btn.vzlom-defense-tab-btn-active {
  background-color: var(--dt-vzlom-defense-tab-active-bg);
  border-color: var(--dt-vzlom-defense-tab-active-border);
  color: var(--dt-vzlom-defense-tab-active-text);
  box-shadow: var(--dt-vzlom-defense-tab-active-shadow);
}

html.dark .vzlom-defense-cell > button.bg-transparent {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* ── Кольца, разделители, скроллбар ── */
html.dark .ring-slate-200 {
  --tw-ring-color: var(--dt-ring-color);
}

html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--dt-border-default);
}

html.dark ::-webkit-scrollbar-thumb {
  background-color: var(--dt-scrollbar-thumb);
}

html.dark ::-webkit-scrollbar-track {
  background-color: var(--dt-scrollbar-track);
}