/* SOLAR V4 - Combat > Skill Settings popup */
html body {
  color-scheme: dark !important;
}

/* Combobox/search popup containers */
body [role="combobox"] + *,
body [role="combobox"] ~ *,
body [aria-controls][aria-expanded="true"] + *,
body [data-state="open"],
body [data-state="open"] > *,
body [data-state="open"] [role="option"],
body [data-state="open"] [role="menuitem"],
body [data-state="open"] input,
body [data-state="open"] button {
  color: #e8edf4 !important;
}

/* Catch the common floating search/dropdown panels used by skill selectors. */
body [data-state="open"],
body [data-state="open"][data-side],
body [data-state="open"][data-align],
body [data-radix-popper-content-wrapper] > div,
body [data-radix-popper-content-wrapper] > div > div,
body [data-radix-popper-content-wrapper] [role="listbox"],
body [data-radix-popper-content-wrapper] [cmdk-root],
body [data-radix-popper-content-wrapper] [cmdk-list] {
  background: #0b1118 !important;
  background-color: #0b1118 !important;
  border-color: #293746 !important;
  color: #e8edf4 !important;
  opacity: 1 !important;
}

/* Search field inside skill selector */
body [role="combobox"],
body [cmdk-input],
body [data-slot="command-input"],
body [data-slot="input"] {
  background: #0b1118 !important;
  background-color: #0b1118 !important;
  color: #e8edf4 !important;
  border-color: #293746 !important;
}
body [role="combobox"]::placeholder,
body [cmdk-input]::placeholder {
  color: #728194 !important;
}

/* The actual skill rows. */
body [role="option"],
body [cmdk-item],
body [data-slot="command-item"] {
  background: #0b1118 !important;
  background-color: #0b1118 !important;
  color: #dce5ee !important;
}
body [role="option"]:hover,
body [role="option"]:focus,
body [role="option"][data-highlighted],
body [cmdk-item]:hover,
body [cmdk-item][data-selected="true"],
body [data-slot="command-item"]:hover,
body [data-slot="command-item"][data-selected="true"] {
  background: #173247 !important;
  background-color: #173247 !important;
  color: #ffffff !important;
}

/* Kill white utility classes specifically inside an open floating panel. */
body [data-state="open"] .bg-white,
body [data-state="open"] .bg-card,
body [data-state="open"] .bg-popover,
body [data-state="open"] .bg-background,
body [data-state="open"] .bg-gray-50,
body [data-state="open"] .bg-slate-50,
body [data-state="open"] .bg-zinc-50,
body [data-radix-popper-content-wrapper] .bg-white,
body [data-radix-popper-content-wrapper] .bg-card,
body [data-radix-popper-content-wrapper] .bg-popover,
body [data-radix-popper-content-wrapper] .bg-background,
body [data-radix-popper-content-wrapper] .bg-gray-50,
body [data-radix-popper-content-wrapper] .bg-slate-50,
body [data-radix-popper-content-wrapper] .bg-zinc-50 {
  background: #0b1118 !important;
  background-color: #0b1118 !important;
}

/* Force white text only where the panel is supposed to be dark. */
body [data-state="open"] .text-black,
body [data-state="open"] .text-gray-900,
body [data-state="open"] .text-gray-800,
body [data-state="open"] .text-slate-900,
body [data-radix-popper-content-wrapper] .text-black,
body [data-radix-popper-content-wrapper] .text-gray-900,
body [data-radix-popper-content-wrapper] .text-gray-800,
body [data-radix-popper-content-wrapper] .text-slate-900 {
  color: #e8edf4 !important;
}

/* Native option fallback */
select, option, optgroup {
  color-scheme: dark !important;
  background-color: #0b1118 !important;
  color: #e8edf4 !important;
}



/* =========================================================
   SOLAR V5 — EXACT FIX FOR COMBAT > THIẾT LẬP KỸ NĂNG
   The original React bundle uses literal arbitrary Tailwind
   classes on the portal:
     bg-[#f7f7f7]
     border-[#dcdcdc]
     dark:bg-[#282828]
     hover:bg-[#e9e9e9]
   Those are why the skill dropdown stayed white.
   ========================================================= */

/* Exact popup generated by component m2() */
body [class*="bg-[#f7f7f7]"] {
    background: #0b1118 !important;
    background-color: #0b1118 !important;
    color: #e8edf4 !important;
    border-color: #293746 !important;
    box-shadow: 0 18px 55px rgba(0,0,0,.55) !important;
}

/* Exact skill option hover class from component ei() */
body [class*="hover:bg-[#e9e9e9]"] {
    background: #0b1118 !important;
    background-color: #0b1118 !important;
    color: #dce5ee !important;
}

body [class*="hover:bg-[#e9e9e9]"]:hover,
body [class*="hover:bg-[#e9e9e9]"]:focus {
    background: #173247 !important;
    background-color: #173247 !important;
    color: #ffffff !important;
}

/* Override the dark-mode literals too, so both themes are controlled. */
body [class*="dark:bg-[#282828]"] {
    background: #0b1118 !important;
    background-color: #0b1118 !important;
    color: #e8edf4 !important;
}

body [class*="dark:hover:bg-[#383838]"]:hover,
body [class*="dark:hover:bg-[#383838]"]:focus {
    background: #173247 !important;
    background-color: #173247 !important;
    color: #ffffff !important;
}

/* Exact light border from the original popup. */
body [class*="border-[#dcdcdc]"] {
    border-color: #293746 !important;
}

/* Popup descendants */
body [class*="bg-[#f7f7f7]"] * {
    color: #dce5ee !important;
}

body [class*="bg-[#f7f7f7]"] [class*="text-muted-foreground"] {
    color: #8290a0 !important;
}

/* Selected skill row */
body [class*="bg-[#f7f7f7]"] [class*="bg-primary\\/15"] {
    background: rgba(57,198,255,.15) !important;
    background-color: rgba(57,198,255,.15) !important;
    color: #75dcff !important;
}

/* Search input immediately above the skill popup */
body input[placeholder="Tìm / chọn kỹ năng…"] {
    background: #0b1118 !important;
    background-color: #0b1118 !important;
    color: #e8edf4 !important;
    border-color: #293746 !important;
}

body input[placeholder="Tìm / chọn kỹ năng…"]::placeholder {
    color: #728194 !important;
}

/* In case React renders the same component with the alternate ellipsis glyph. */
body input[placeholder*="chọn kỹ năng"] {
    background: #0b1118 !important;
    background-color: #0b1118 !important;
    color: #e8edf4 !important;
    border-color: #293746 !important;
}