/**
 * Combo HUD — тёмная и светлая палитра, изоляция от global dark-theme.css.
 */

/* Тёмная тема (по умолчанию) */
.combo-hud,
html.dark .combo-hud {
  --combo-bg: #0b0e14;
  --combo-surface: #141824;
  --combo-surface-2: #1a2030;
  --combo-surface-hover: #222a3d;
  --combo-header: #0f131c;
  --combo-inset-deep: #0f131c;
  --combo-border: #2a3148;
  --combo-border-hover: #3d4a66;
  --combo-accent: #4d7cfe;
  --combo-accent-soft: rgba(61, 90, 254, 0.15);
  --combo-accent-border: rgba(61, 90, 254, 0.45);
  --combo-queued-bg: rgba(61, 90, 254, 0.12);
  --combo-queued-border: rgba(61, 90, 254, 0.5);
  --combo-queued-glow: rgba(61, 90, 254, 0.12);
  --combo-text: #e8ecf4;
  --combo-text-strong: #f1f4fc;
  --combo-text-secondary: #c5cce0;
  --combo-muted: #8b93a8;
  --combo-muted-deep: #6b7289;
  --combo-accent-text: #9ec0ff;
  --combo-accent-text-bright: #7ba4ff;
  --combo-hp-fill: #00e5ff;
  --combo-hp-track: #27272a;
  --combo-combo-track: #27272a;
  --combo-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  --combo-section-accent: #a78bfa;
  --combo-brigade: #8a5cf5;
  --combo-overlay: rgba(0, 0, 0, 0.7);
  --combo-switch-off: #27272a;
  --combo-switch-knob: #ffffff;
  --combo-option-on-bg: rgba(61, 90, 254, 0.18);
  --combo-option-on-shadow: 0 0 10px rgba(61, 90, 254, 0.12);
  --combo-purple-soft: rgba(138, 92, 245, 0.2);
  --combo-purple-border: rgba(138, 92, 245, 0.45);
  --combo-purple-text: #c4b5fd;
}

/* Светлая тема */
html:not(.dark) .combo-hud {
  --combo-bg: #e8ecf4;
  --combo-surface: #ffffff;
  --combo-surface-2: #f1f4fa;
  --combo-surface-hover: #e2e8f4;
  --combo-header: #eef1f8;
  --combo-inset-deep: #f8fafc;
  --combo-border: #c5cdd9;
  --combo-border-hover: #94a3b8;
  --combo-accent: #3d5afe;
  --combo-accent-soft: rgba(61, 90, 254, 0.1);
  --combo-accent-border: rgba(61, 90, 254, 0.35);
  --combo-queued-bg: rgba(61, 90, 254, 0.08);
  --combo-queued-border: rgba(61, 90, 254, 0.45);
  --combo-queued-glow: rgba(61, 90, 254, 0.08);
  --combo-text: #1a2234;
  --combo-text-strong: #0f172a;
  --combo-text-secondary: #334155;
  --combo-muted: #64748b;
  --combo-muted-deep: #94a3b8;
  --combo-accent-text: #2563eb;
  --combo-accent-text-bright: #1d4ed8;
  --combo-hp-fill: #0891b2;
  --combo-hp-track: #cbd5e1;
  --combo-combo-track: #cbd5e1;
  --combo-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
  --combo-section-accent: #7c3aed;
  --combo-brigade: #7c3aed;
  --combo-overlay: rgba(15, 23, 42, 0.45);
  --combo-switch-off: #cbd5e1;
  --combo-switch-knob: #ffffff;
  --combo-option-on-bg: rgba(61, 90, 254, 0.12);
  --combo-option-on-shadow: 0 0 8px rgba(61, 90, 254, 0.08);
  --combo-purple-soft: rgba(124, 58, 237, 0.1);
  --combo-purple-border: rgba(124, 58, 237, 0.35);
  --combo-purple-text: #6d28d9;
}

html.dark .combo-hud,
html:not(.dark) .combo-hud {
  background-color: var(--combo-bg) !important;
  color: var(--combo-text) !important;
}

/* Не даём global html.dark перекрашивать карточки комбо */
html.dark .combo-hud .bg-white,
html.dark .combo-hud .bg-slate-50,
html.dark .combo-hud .bg-slate-100,
html.dark .combo-hud .bg-gray-50,
html:not(.dark) .combo-hud .bg-white,
html:not(.dark) .combo-hud .bg-slate-50,
html:not(.dark) .combo-hud .bg-slate-100 {
  background-color: var(--combo-surface) !important;
}

html.dark .combo-hud [class*='bg-white/'],
html.dark .combo-hud [class*='bg-slate-800/'],
html:not(.dark) .combo-hud [class*='bg-white/'],
html:not(.dark) .combo-hud [class*='bg-slate-50/'] {
  background-color: var(--combo-surface-2) !important;
}

/* Старые gradient-оболочки */
.combo-hud [class*='from-blue-50'][class*='rounded-xl'],
.combo-hud [class*='from-blue-900'][class*='rounded-xl'],
.combo-hud [class*='from-blue-950'][class*='rounded-xl'],
.combo-hud [class*='from-slate-900'][class*='rounded-2xl'],
.combo-hud [class*='from-blue-50/70'][class*='sticky'],
.combo-hud [class*='from-blue-50/90'][class*='sticky'] {
  background: var(--combo-header) !important;
  background-image: none !important;
  border-color: var(--combo-border) !important;
  color: var(--combo-muted) !important;
}

.combo-hud [class*='border-blue-200'][class*='bg-white/20'],
.combo-hud [class*='border-blue-800'][class*='bg-black/10'],
.combo-hud [class*='border-blue-200/60'][class*='bg-white/20'] {
  background: var(--combo-header) !important;
  border-color: var(--combo-border) !important;
}

html.dark .combo-hud .text-gray-900,
html.dark .combo-hud .text-slate-800,
html.dark .combo-hud .text-slate-700,
html.dark .combo-hud .text-slate-600,
html.dark .combo-hud .text-slate-500,
html.dark .combo-hud .dark\:text-gray-100,
html.dark .combo-hud .dark\:text-slate-200,
html.dark .combo-hud .dark\:text-slate-300,
html.dark .combo-hud .dark\:text-slate-400,
html:not(.dark) .combo-hud .text-gray-900,
html:not(.dark) .combo-hud .text-slate-800,
html:not(.dark) .combo-hud .text-slate-700,
html:not(.dark) .combo-hud .text-slate-600,
html:not(.dark) .combo-hud .text-slate-500 {
  color: var(--combo-text) !important;
}

html.dark .combo-hud .text-slate-400,
html:not(.dark) .combo-hud .text-slate-400 {
  color: var(--combo-muted) !important;
}

.combo-hud [class*='border-blue-200'],
.combo-hud [class*='border-blue-300'],
.combo-hud [class*='border-indigo-200'],
.combo-hud [class*='border-blue-200/40'],
.combo-hud [class*='dark:border-blue-700'],
.combo-hud [class*='dark:border-blue-800'] {
  border-color: var(--combo-border) !important;
}

html.dark .combo-hud .combo-hud-tab-active,
html:not(.dark) .combo-hud .combo-hud-tab-active {
  background-color: var(--combo-accent) !important;
  color: #fff !important;
}

html.dark .combo-hud .combo-hud-tab-brigade,
html:not(.dark) .combo-hud .combo-hud-tab-brigade {
  background-color: var(--combo-brigade) !important;
  color: #fff !important;
}

html.dark .combo-hud .combo-hud-section-title,
html:not(.dark) .combo-hud .combo-hud-section-title {
  background: var(--combo-header) !important;
  background-image: none !important;
  color: var(--combo-section-accent) !important;
  letter-spacing: 0.12em;
}

html.dark .combo-hud .combo-hud-settings-field,
html.dark .combo-hud select.combo-hud-settings-field,
html:not(.dark) .combo-hud .combo-hud-settings-field,
html:not(.dark) .combo-hud select.combo-hud-settings-field {
  background-color: var(--combo-surface-2) !important;
  border-color: var(--combo-border) !important;
  color: var(--combo-text) !important;
}

html.dark .combo-hud select.combo-hud-settings-field option {
  background-color: #141824;
  color: #e8ecf4;
}

html:not(.dark) .combo-hud select.combo-hud-settings-field option {
  background-color: #ffffff;
  color: #1a2234;
}

/* HP / combo полоски */
.combo-hud .combo-hud-hp-track {
  background-color: var(--combo-hp-track) !important;
}

.combo-hud .combo-hud-hp-fill {
  background-color: var(--combo-hp-fill) !important;
}

.combo-hud .combo-hud-combo-track {
  background-color: var(--combo-combo-track) !important;
}

/* Скрытые checkbox в комбо */
html.dark .combo-hud input.sr-only,
html:not(.dark) .combo-hud input.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  background: transparent !important;
}

/* Светлая тема: блок статуса боя внутри панели */
html:not(.dark) .combo-hud .combo-hud-status-shell {
  background: var(--combo-surface-2) !important;
  border-color: var(--combo-border) !important;
}

html:not(.dark) .combo-hud .combo-hud-top-damage-row {
  background: rgba(255, 255, 255, 0.75) !important;
  border-color: var(--combo-border) !important;
}