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

/* Remove SOLAR PREVIEW badge completely */
#solar-preview-badge {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* Tab Train: Lịch trình & Waypoints full display without clipping */
[id$="-content-train"] {
    height: auto !important;
    overflow: visible !important;
}

[id$="-content-train"] section {
    overflow: visible !important;
    height: auto !important;
    flex: none !important;
}

[id$="-content-train"] section > div {
    overflow: visible !important;
    height: auto !important;
    flex: none !important;
}

.train-waypoint-scroll {
    min-height: 260px !important;
    max-height: 550px !important;
    overflow-y: auto !important;
}

/* =========================================================
   SOLAR LOGISTICS TAB (HẬU CẦN) - TỔ ĐỘI & THEO SAU
   ========================================================= */
div[data-slot="tabs-content"] div.flex.flex-col.solar-logistics-tab,
div[role="tabpanel"] div.flex.flex-col.solar-logistics-tab {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
    padding-bottom: 16px !important;
}

div[data-slot="tabs-content"] div.solar-logistics-grid,
div[role="tabpanel"] div.solar-logistics-grid {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    gap: 6px !important;
    min-height: 420px !important;
    height: 420px !important;
    max-height: 420px !important;
    flex: 0 0 420px !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
}

div[data-slot="tabs-content"] section.solar-logistics-card,
div[role="tabpanel"] section.solar-logistics-card {
    min-height: 420px !important;
    height: 420px !important;
    max-height: 420px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 420px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

div[data-slot="tabs-content"] div.flex.flex-col.solar-logistics-card-body,
div[role="tabpanel"] div.flex.flex-col.solar-logistics-card-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: calc(100% - 28px) !important;
    min-height: calc(100% - 28px) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

div[data-slot="tabs-content"] div.flex.solar-logistics-list-wrap,
div[role="tabpanel"] div.flex.solar-logistics-list-wrap {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 240px !important;
    height: 240px !important;
    overflow: hidden !important;
}

div[data-slot="tabs-content"] div.flex.solar-logistics-list-wrap > div,
div[role="tabpanel"] div.flex.solar-logistics-list-wrap > div {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

div[data-slot="tabs-content"] div.flex.solar-logistics-list-wrap div.overflow-y-auto,
div[role="tabpanel"] div.flex.solar-logistics-list-wrap div.overflow-y-auto {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

div[data-slot="tabs-content"] div.flex.flex-col.solar-logistics-bottom,
div[role="tabpanel"] div.flex.flex-col.solar-logistics-bottom {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    margin-top: auto !important;
    padding-top: 4px !important;
    overflow: visible !important;
}