/*
 * Dropdown menus — สไตล์ shadcn/Radix DropdownMenu
 * popover มน ขอบบาง เงานุ่ม padding 4px / item มน hover พื้นเทาอ่อน ตัวอักษรเข้ม
 * ครอบ dropdown ทั้งหมดของ HESK: .dropdown-list, .dropdown-select, .selectize-dropdown
 * โหลดต่อจาก bento-theme.css จึง override ด้วย !important ตามที่ของเดิมใช้
 */

/* ===== กล่อง popover ===== */
.dropdown .dropdown-list,
.dropdown-select .dropdown-list,
.selectize-control .selectize-dropdown {
    padding: 4px !important;
    border: 1px solid #e4e4e7 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #18181b !important;
    box-shadow:
        0 12px 28px rgba(16, 24, 40, .12),
        0 2px 6px rgba(16, 24, 40, .06) !important;
}

/* ===== รายการ (item) ===== */
.dropdown .dropdown-list > li,
.dropdown-select .dropdown-list > li {
    height: auto !important;
    min-height: 34px;
    margin: 1px 0;
    padding: 0 !important;
    border-radius: 7px;
    color: #3f3f46;
    white-space: nowrap;
    overflow: hidden;
    transition: background-color .12s ease, color .12s ease;
}

.dropdown .dropdown-list > li > a,
.dropdown-select .dropdown-list > li > a {
    padding: 8px 12px !important;
    border-radius: 7px;
    color: #3f3f46 !important;
    font-size: 14px;
    font-weight: 500;
}

/* hover/focus = accent เทาอ่อน + ตัวอักษรเข้ม (แทนพื้นน้ำเงินทึบเดิม) */
.dropdown .dropdown-list > li:hover,
.dropdown-select .dropdown-list > li:hover,
.dropdown .dropdown-list > li:focus,
.dropdown-select .dropdown-list > li:focus {
    background-color: #f4f4f5 !important;
    color: #18181b !important;
}

.dropdown .dropdown-list > li:hover > a,
.dropdown-select .dropdown-list > li:hover > a {
    color: #18181b !important;
}

.dropdown .dropdown-list > li:hover svg,
.dropdown-select .dropdown-list > li:hover svg {
    fill: #52525b !important;
}

/* icon ใน item */
.dropdown .dropdown-list > li svg,
.dropdown-select .dropdown-list > li svg {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    fill: #71717a;
}

/* รายการที่ถูกเลือกอยู่ */
.dropdown .dropdown-list > li.selected,
.dropdown-select .dropdown-list > li.selected {
    background-color: #eff6ff !important;
}

.dropdown .dropdown-list > li.selected > a,
.dropdown-select .dropdown-list > li.selected > a {
    color: #1d4ed8 !important;
    font-weight: 600;
}

/* ===== เส้นคั่น ===== */
.dropdown .dropdown-list .separator,
.dropdown-select .dropdown-list .separator {
    height: 1px !important;
    margin: 4px 6px !important;
    background-color: #ececef !important;
}

/* ===== selectize options ให้เข้าชุดกัน ===== */
.selectize-control .selectize-dropdown .option {
    padding: 8px 12px !important;
    border-radius: 7px;
    color: #3f3f46 !important;
    font-size: 14px;
}

.selectize-control .selectize-dropdown .option.active,
.selectize-control .selectize-dropdown .option:hover {
    background-color: #f4f4f5 !important;
    color: #18181b !important;
}

.selectize-control .selectize-dropdown .optgroup-header {
    padding: 6px 12px !important;
    color: #71717a !important;
    font-size: 12px;
    font-weight: 600;
}

/* ===== อนิเมชันเปิด (fade + zoom เล็กน้อย) เหมือน shadcn ===== */
@keyframes heskDdIn {
    from { opacity: 0; transform: translateY(-4px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.dropdown.active .dropdown-list,
.dropdown-select.active .dropdown-list,
.selectize-control .selectize-dropdown {
    transform-origin: top center;
    animation: heskDdIn .12s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .dropdown.active .dropdown-list,
    .dropdown-select.active .dropdown-list,
    .selectize-control .selectize-dropdown {
        animation: none;
    }
}