/* =========================================================
   SOLAR V3 — AGGRESSIVE DROPDOWN / POPOVER DARK OVERRIDE
   Handles custom dropdowns whose white background comes from
   generated utility classes rather than native <select>.
   ========================================================= */

/* Every popup-like element gets a dark canvas. */
body [role="listbox"],
body [role="menu"],
body [role="tree"],
body [role="dialog"],
body [data-radix-popper-content-wrapper] > *,
body [data-radix-select-content],
body [data-radix-dropdown-menu-content],
body [data-radix-context-menu-content],
body [data-radix-popover-content],
body [data-slot="popover-content"],
body [data-slot="dropdown-menu-content"],
body [data-slot="select-content"],
body [data-slot="command"],
body [data-slot="command-list"],
body [cmdk-root],
body [cmdk-list] {
  background: #0d141c !important;
  background-color: #0d141c !important;
  color: #e8edf4 !important;
  border-color: #293746 !important;
  opacity: 1 !important;
}

/* Kill common generated light utility backgrounds inside popups. */
body [role="listbox"] .bg-white,
body [role="listbox"] .bg-background,
body [role="listbox"] .bg-popover,
body [role="listbox"] .bg-card,
body [role="menu"] .bg-white,
body [role="menu"] .bg-background,
body [role="menu"] .bg-popover,
body [data-radix-popper-content-wrapper] .bg-white,
body [data-radix-popper-content-wrapper] .bg-background,
body [data-radix-popper-content-wrapper] .bg-popover,
body [data-radix-popper-content-wrapper] .bg-card {
  background: #0d141c !important;
  background-color: #0d141c !important;
  color: #e8edf4 !important;
}

/* Text utility classes that otherwise remain dark/white incorrectly. */
body [role="listbox"] .text-black,
body [role="listbox"] .text-gray-900,
body [role="listbox"] .text-gray-800,
body [role="listbox"] .text-slate-900,
body [role="menu"] .text-black,
body [role="menu"] .text-gray-900,
body [data-radix-popper-content-wrapper] .text-black,
body [data-radix-popper-content-wrapper] .text-gray-900 {
  color: #e8edf4 !important;
}

/* All descendants of an open popup inherit a readable foreground
   unless they explicitly use an accent. */
body [role="listbox"] *,
body [role="menu"] *,
body [data-radix-popper-content-wrapper] * {
  color: #dce5ee;
}

/* Items: dark at rest, darker-blue on hover/highlight. */
body [role="option"],
body [role="menuitem"],
body [data-radix-select-item],
body [data-radix-dropdown-menu-item],
body [data-slot="select-item"],
body [data-slot="dropdown-menu-item"],
body [cmdk-item] {
  background: #0d141c !important;
  background-color: #0d141c !important;
  color: #dce5ee !important;
}

body [role="option"]:hover,
body [role="option"]:focus,
body [role="option"][data-highlighted],
body [role="menuitem"]:hover,
body [role="menuitem"]:focus,
body [role="menuitem"][data-highlighted],
body [data-radix-select-item][data-highlighted],
body [data-radix-dropdown-menu-item][data-highlighted],
body [cmdk-item][data-selected="true"] {
  background: #173247 !important;
  background-color: #173247 !important;
  color: #ffffff !important;
}

/* Radix selected/check state. */
body [data-state="checked"],
body [aria-selected="true"] {
  background: #153a50 !important;
  background-color: #153a50 !important;
  color: #75dcff !important;
}

/* Native select and its popup theme. */
body select,
body select option,
body select optgroup {
  color-scheme: dark !important;
  background: #0d141c !important;
  background-color: #0d141c !important;
  color: #e8edf4 !important;
}

/* WebKit/Chromium dropdown pseudo-elements where supported. */
body select::-ms-expand {
  background: #0d141c !important;
  color: #e8edf4 !important;
}

/* Any fixed/absolute dropdown with common popup data attributes. */
body [data-state="open"][data-side],
body [data-state="open"][data-align],
body [data-state="open"][data-radix-menu-content] {
  background: #0d141c !important;
  background-color: #0d141c !important;
  color: #e8edf4 !important;
}

/* Prevent translucent white overlays inside menus. */
body [role="listbox"] .bg-white\/5,
body [role="listbox"] .bg-white\/10,
body [role="menu"] .bg-white\/5,
body [role="menu"] .bg-white\/10 {
  background: rgba(255,255,255,.045) !important;
}


/* 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;
}