/*
 * ความสำคัญ/ความเร็วของหน่วยงาน (priority) — ดอทสีตามธีม
 * แก้ปัญหาข้อความทับสัญลักษณ์ (ไอคอน SVG เดิมของ HESK + padding ที่ถูก dropdown.css ทับ)
 * ใช้กับทุกหน้า: ดรอปดาวน์ความสำคัญในฟอร์มหน่วยงาน / ตั๋ว / ตัวกรองค้นหา
 * โหลดหลัง dropdown.css จึง override ด้วย !important
 */

/* ปิดไอคอน label-*.svg เดิมทั้ง trigger และ option */
.dropdown-select.priority .label span,
.dropdown.priority .label span,
.dropdown-select.priority .dropdown-list > li[data-option],
.dropdown.priority .dropdown-list > li[data-option] {
    background-image: none !important;
}

/* ===== TRIGGER: ค่าที่เลือก = ดอท + ข้อความ ===== */
.dropdown-select.priority .label span,
.dropdown.priority .label span {
    position: relative;
    padding-left: 18px !important;
    font-weight: 600;
    color: #1d2939;
}
.dropdown-select.priority .label span::before,
.dropdown.priority .label span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -4.5px;
    border-radius: 50%;
    background: #98a2b3;
}

/* ===== OPTIONS ในลิสต์ = ดอท + ข้อความ (ไม่ทับกัน) ===== */
.dropdown-select.priority .dropdown-list > li[data-option],
.dropdown.priority .dropdown-list > li[data-option] {
    position: relative;
    min-height: 36px;
    margin: 1px 0 !important;
    padding: 9px 14px 9px 32px !important;
    border-radius: 8px !important;
    color: #344054 !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    display: flex;
    align-items: center;
}
.dropdown-select.priority .dropdown-list > li[data-option]::before,
.dropdown.priority .dropdown-list > li[data-option]::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -4.5px;
    border-radius: 50%;
    background: #98a2b3;
}
.dropdown-select.priority .dropdown-list > li[data-option]:hover,
.dropdown.priority .dropdown-list > li[data-option]:hover {
    background: #f4f4f5 !important;
    color: #18181b !important;
}
.dropdown-select.priority .dropdown-list > li[data-option].selected,
.dropdown.priority .dropdown-list > li[data-option].selected {
    background: #eff6ff !important;
    color: #1456b8 !important;
    font-weight: 700;
}

/* ===== สีดอทตามระดับ =====
   trigger ใช้ data-value (low/medium/high/critical หรือ 3/2/1/0)
   options ใช้ data-option (3/2/1/0 หรือ low/medium/high/critical) */

/* ปกติ (low / 3) = เขียว */
.dropdown-select.priority[data-value="low"] .label span::before,
.dropdown-select.priority[data-value="3"] .label span::before,
.dropdown.priority[data-value="low"] .label span::before,
.dropdown.priority[data-value="3"] .label span::before,
.priority .dropdown-list > li[data-option="low"]::before,
.priority .dropdown-list > li[data-option="3"]::before {
    background: #12b76a !important;
}
/* ด่วน (medium / 2) = เหลือง/อำพัน */
.dropdown-select.priority[data-value="medium"] .label span::before,
.dropdown-select.priority[data-value="2"] .label span::before,
.dropdown.priority[data-value="medium"] .label span::before,
.dropdown.priority[data-value="2"] .label span::before,
.priority .dropdown-list > li[data-option="medium"]::before,
.priority .dropdown-list > li[data-option="2"]::before {
    background: #f79009 !important;
}
/* ด่วนมาก (high / 1) = ส้ม */
.dropdown-select.priority[data-value="high"] .label span::before,
.dropdown-select.priority[data-value="1"] .label span::before,
.dropdown.priority[data-value="high"] .label span::before,
.dropdown.priority[data-value="1"] .label span::before,
.priority .dropdown-list > li[data-option="high"]::before,
.priority .dropdown-list > li[data-option="1"]::before {
    background: #ef6820 !important;
}
/* ด่วนมากที่สุด (critical / 0) = แดง */
.dropdown-select.priority[data-value="critical"] .label span::before,
.dropdown-select.priority[data-value="0"] .label span::before,
.dropdown.priority[data-value="critical"] .label span::before,
.dropdown.priority[data-value="0"] .label span::before,
.priority .dropdown-list > li[data-option="critical"]::before,
.priority .dropdown-list > li[data-option="0"]::before {
    background: #f04438 !important;
}

/* =========================================================================
   สถานะเรื่อง (.dropdown-select.status) — ดอทสีให้สวยเท่า priority
   ========================================================================= */
/* TRIGGER */
.dropdown-select.status .label span,
.dropdown.status .label span {
    position: relative;
    padding-left: 18px !important;
    font-weight: 700;
    color: #1d2939;
}
.dropdown-select.status .label span::before,
.dropdown.status .label span::before {
    content: "";
    position: absolute; left: 0; top: 50%;
    width: 9px; height: 9px; margin-top: -4.5px;
    border-radius: 50%; background: #98a2b3;
}
/* OPTIONS */
.dropdown-select.status .dropdown-list > li[data-option],
.dropdown.status .dropdown-list > li[data-option] {
    position: relative;
    min-height: 36px;
    margin: 1px 0 !important;
    padding: 9px 14px 9px 32px !important;
    border-radius: 8px !important;
    color: #344054 !important;
    font-size: 14px;
    display: flex; align-items: center;
}
.dropdown-select.status .dropdown-list > li[data-option]::before,
.dropdown.status .dropdown-list > li[data-option]::before {
    content: "";
    position: absolute; left: 13px; top: 50%;
    width: 9px; height: 9px; margin-top: -4.5px;
    border-radius: 50%; background: #98a2b3;
}
.dropdown-select.status .dropdown-list > li[data-option]:hover { background: #f4f4f5 !important; color: #18181b !important; }
.dropdown-select.status .dropdown-list > li[data-option].selected { background: #eff6ff !important; color: #1456b8 !important; font-weight: 700; }

/* สีดอทตามสถานะ (id 0..5 ตามค่าเริ่มต้น HESK — ตกแต่งให้ดูเป็นระเบียบ) */
.dropdown-select.status[data-value="0"] .label span::before, .status .dropdown-list > li[data-option="0"]::before { background: #1877f2 !important; } /* ใหม่ */
.dropdown-select.status[data-value="1"] .label span::before, .status .dropdown-list > li[data-option="1"]::before { background: #f79009 !important; } /* รอตอบกลับ */
.dropdown-select.status[data-value="2"] .label span::before, .status .dropdown-list > li[data-option="2"]::before { background: #06aed4 !important; } /* ตอบแล้ว */
.dropdown-select.status[data-value="3"] .label span::before, .status .dropdown-list > li[data-option="3"]::before { background: #12b76a !important; } /* เสร็จสิ้น */
.dropdown-select.status[data-value="4"] .label span::before, .status .dropdown-list > li[data-option="4"]::before { background: #6366f1 !important; } /* กำลังดำเนินการ */
.dropdown-select.status[data-value="5"] .label span::before, .status .dropdown-list > li[data-option="5"]::before { background: #98a2b3 !important; } /* พักไว้ */