/* VERSION: 2026-08-20-b */
/* =========================================================================
 * dropdown-unify.css — dropdown ทั้งระบบให้หน้าตาเดียวกัน (อาร์มสั่ง ๒๐ ส.ค. ๒๕๖๙)
 *
 * ต้นแบบที่ยึด (อาร์มเลือกเอง):
 *   1) แบบ "พิมพ์ค้นหาได้"   -> ช่อง "หน่วยงานรับผิดชอบดำเนินการ"  (select2)
 *   2) แบบ "เลือกอย่างเดียว" -> ช่อง "การแจ้งเตือน"                (.dropdown-select)
 *
 * ไฟล์นี้โหลดท้ายสุด จึงเป็นตัวตัดสินหน้าตาสุดท้าย — ถ้าจะแก้สไตล์ dropdown ให้แก้ที่นี่ที่เดียว
 * ห้ามแก้กระจายในไฟล์อื่นอีก (บทเรียนจากการไล่ตามแก้หลายรอบ)
 * ========================================================================= */

:root {
    --dd-h: 38px;              /* ความสูงช่อง (จอคอม) */
    --dd-h-m: 46px;            /* ความสูงช่อง (มือถือ) */
    --dd-radius: 10px;
    --dd-radius-m: 12px;
    --dd-border: #cfdcee;
    --dd-border-focus: #2563eb;
    --dd-bg: #fff;
    --dd-text: #22314f;
    --dd-muted: #98a2b3;
    --dd-fs: 13.5px;           /* ตัวในกล่อง */
    --dd-fs-m: 14.5px;
    --ddo-fs: 13.5px;          /* ตัวในรายการ - เท่ากล่อง ไม่ใหญ่กว่า */
    --ddo-fs-m: 14.5px;

    --ddl-radius: 12px;
    --ddl-border: #e8edf5;
    --ddl-shadow: 0 12px 28px rgba(16, 24, 40, .12);
    --ddo-radius: 8px;
    --ddo-hover: #f2f6fc;
    --ddo-active: #eaf1fd;
}

/* ---------------------------------------------------------------
 * 1) ตัวช่อง (สิ่งที่เห็นตอนยังไม่กด) — ทุกชนิดต้องเท่ากันหมด
 * --------------------------------------------------------------- */
html body:not(.cust-help) .selectize-control .selectize-input,
html body:not(.cust-help) .select2-container .select2-selection,
html body:not(.cust-help) .dropdown-select:not(.submit-us) > .label {
    display: flex !important;
    align-items: center;
    min-height: var(--dd-h) !important;
    padding: 0 34px 0 13px !important;
    border: 1px solid var(--dd-border) !important;
    border-radius: var(--dd-radius) !important;
    background: var(--dd-bg) !important;
    box-shadow: none !important;
    color: var(--dd-text);
    font-size: var(--dd-fs) !important;
    font-weight: 600;
    line-height: 1.4;
}

/* ช่องหลายค่า (ชิป) สูงตามเนื้อหาได้ แต่กรอบ/มุม/สีเดียวกัน */
html body:not(.cust-help) .select2-container .select2-selection--multiple {
    height: auto !important;
    padding: 5px 34px 5px 8px !important;
}

/* โฟกัส/เปิดอยู่: กรอบน้ำเงินบาง + วงแสง เหมือนกันทุกชนิด */
html body:not(.cust-help) .selectize-control.dropdown-active .selectize-input,
html body:not(.cust-help) .selectize-input.focus,
html body:not(.cust-help) .select2-container--open .select2-selection,
html body:not(.cust-help) .select2-container--focus .select2-selection,
html body:not(.cust-help) .dropdown-select.active:not(.submit-us) > .label {
    border-color: var(--dd-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
}

/* ---- กรอบซ้อนกรอบ: ช่องพิมพ์ข้างในต้องไม่มีกรอบ/พื้น/เงาของตัวเอง ---- */
html body:not(.cust-help) .selectize-input > input,
html body:not(.cust-help) .selectize-control .selectize-input > input[type="text"],
html body:not(.cust-help) .selectize-control.single .selectize-input > input,
html body:not(.cust-help) .selectize-control.multi .selectize-input > input,
html body:not(.cust-help) .selectize-control .selectize-input input[type="text"],
html body:not(.cust-help) .select2-search--inline .select2-search__field,
html body:not(.cust-help) .select2-selection__rendered > input {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    font-size: inherit !important;
    font-family: inherit !important;
    outline: 0 !important;
}
/* ช่องค้นหาที่อยู่ "ในลิสต์" (selectize ธีมเดิมวาดกรอบซ้ำอีกชั้น) */
html body:not(.cust-help) .selectize-dropdown .selectize-dropdown-content > .option:first-child input,
html body:not(.cust-help) .selectize-dropdown input[type="text"] {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* ลูกศรชี้ลง: ตำแหน่งเดียวกันทุกชนิด */
html body:not(.cust-help) .dropdown-select:not(.submit-us) > .label > svg,
html body:not(.cust-help) .select2-container .select2-selection__arrow,
html body:not(.cust-help) .selectize-control.single .selectize-input::after {
    right: 12px !important;
}

/* ---------------------------------------------------------------
 * 2) แผงรายการที่กางออก — หน้าตาเดียวกันทุกชนิด
 * --------------------------------------------------------------- */
html body:not(.cust-help) .selectize-dropdown,
html body:not(.cust-help) .select2-container .select2-dropdown,
html body:not(.cust-help) .dropdown-select .dropdown-list,
html body:not(.cust-help) .dropdown .dropdown-list {
    border: 1px solid var(--ddl-border) !important;
    border-radius: var(--ddl-radius) !important;
    background: var(--dd-bg) !important;
    box-shadow: var(--ddl-shadow) !important;
}

/* ⚠ padding / margin / height ของลิสต์ธีม ห้ามใส่ !important เด็ดขาด
   ธีมย่อ-กางลิสต์ด้วย jQuery slideUp/slideDown ซึ่งเขียนค่าพวกนี้เป็น inline style ระหว่างอนิเมชัน
   ถ้าเราล็อกด้วย !important ตอนกดปิดมันจะยุบไม่สุด เหลือแถบบาง ๆ ค้าง = "กดอีกทีไม่ยุบ"
   ระยะห่างจากกล่องจึงใช้ top แทน margin-top (top ไม่ถูกอนิเมชันแตะ) */
html body:not(.cust-help) .dropdown-select .dropdown-list,
html body:not(.cust-help) .dropdown .dropdown-list {
    padding: 6px;
    margin-top: 0 !important;
}
html body:not(.cust-help) .dropdown-select:not(.submit-us) .dropdown-list {
    top: calc(100% + 6px);
}
html body:not(.cust-help) .selectize-dropdown,
html body:not(.cust-help) .select2-container .select2-dropdown {
    padding: 6px !important;   /* สองตัวนี้ไม่ได้ใช้ jQuery slide จึงล็อกได้ */
}

html body:not(.cust-help) .selectize-dropdown .option,
html body:not(.cust-help) .select2-container .select2-results__option,
html body:not(.cust-help) .dropdown-select .dropdown-list > li,
html body:not(.cust-help) .dropdown .dropdown-list > li {
    padding: 9px 12px !important;
    border-radius: var(--ddo-radius) !important;
    color: var(--dd-text) !important;
    font-size: var(--ddo-fs) !important;
    font-weight: 500 !important;
    line-height: 1.4;
}

html body:not(.cust-help) .selectize-dropdown .option:hover,
html body:not(.cust-help) .select2-container .select2-results__option--highlighted,
html body:not(.cust-help) .dropdown-select .dropdown-list > li:hover,
html body:not(.cust-help) .dropdown .dropdown-list > li:hover {
    background: var(--ddo-hover) !important;
    color: var(--dd-text) !important;
}

html body:not(.cust-help) .selectize-dropdown .option.active,
html body:not(.cust-help) .selectize-dropdown .option.selected,
html body:not(.cust-help) .select2-container .select2-results__option[aria-selected="true"],
html body:not(.cust-help) .dropdown-select .dropdown-list > li.active,
html body:not(.cust-help) .dropdown-select .dropdown-list > li[aria-selected="true"] {
    background: var(--ddo-active) !important;
    color: #1d4ed8 !important;
    font-weight: 700 !important;
}

/* ป้ายหัวข้อกลุ่ม/ข้อความ "ไม่พบ" ให้จางลง ไม่ใช่ตัวเลือก */
html body:not(.cust-help) .selectize-dropdown .optgroup-header,
html body:not(.cust-help) .selectize-dropdown .no-results,
html body:not(.cust-help) .select2-results__message {
    padding: 8px 12px !important;
    color: var(--dd-muted) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
}

/* ---------------------------------------------------------------
 * 3) จอมือถือ — สูงขึ้นให้นิ้วกดง่าย แต่ยังเป็นชุดเดียวกัน
 * --------------------------------------------------------------- */
@media screen and (max-width: 899px) {
    /* กฎมือถือเดิมใน mobile-trip.css เจาะจง 4 คลาส + !important จึงต้องเขียนให้เจาะจงกว่า
       (เป้าหมาย: ไฟล์นี้เป็นตัวตัดสินหน้าตา dropdown ที่เดียว) */
    html body:not(.cust-help) .main__content .selectize-control > .selectize-input,
    html body:not(.cust-help) .main__content .select2-container .select2-selection.select2-selection,
    html body:not(.cust-help) .main__content .dropdown-select:not(.submit-us) > .label.label,
    html body:not(.cust-help) .selectize-control .selectize-input,
    html body:not(.cust-help) .select2-container .select2-selection,
    html body:not(.cust-help) .dropdown-select:not(.submit-us) > .label {
        min-height: var(--dd-h-m) !important;
        padding: 0 36px 0 14px !important;
        border-radius: var(--dd-radius-m) !important;
        font-size: var(--dd-fs-m) !important;
    }

    /* ลูกศรยึดแถวแรกของกล่อง (ค่ามือถือ) */
    html body:not(.cust-help) .selectize-control.single .selectize-input::after,
    html body:not(.cust-help) .selectize-control.single .selectize-input.focus::after,
    html body:not(.cust-help) .selectize-control.single .selectize-input.dropdown-active::after {
        top: calc(var(--dd-h-m) / 2) !important;
    }
    html body:not(.cust-help) .select2-container .select2-selection--multiple {
        padding: 6px 36px 6px 10px !important;
    }
    html body:not(.cust-help) .main__content .selectize-dropdown .option,
    html body:not(.cust-help) .selectize-dropdown .selectize-dropdown-content .option,
    html body:not(.cust-help) .main__content .select2-container .select2-results__option,
    html body:not(.cust-help) .main__content .dropdown-select .dropdown-list > li,
    html body:not(.cust-help) .main__content .dropdown .dropdown-list > li,
    html body:not(.cust-help) .selectize-dropdown .option,
    html body:not(.cust-help) .select2-container .select2-results__option,
    html body:not(.cust-help) .dropdown-select .dropdown-list > li,
    html body:not(.cust-help) .dropdown .dropdown-list > li {
        padding: 10px 12px !important;
        font-size: var(--ddo-fs-m) !important;
    }
}

/* select2 ธีมเดิมกำหนดมุมไว้เฉพาะเจาะจงกว่า จึงต้องย้ำอีกชั้น */
html body:not(.cust-help) .select2-container--default .select2-selection--single,
html body:not(.cust-help) .select2-container--default .select2-selection--multiple {
    border-radius: var(--dd-radius) !important;
}
@media screen and (max-width: 899px) {
    html body:not(.cust-help) .select2-container--default .select2-selection--single,
    html body:not(.cust-help) .select2-container--default .select2-selection--multiple {
        border-radius: var(--dd-radius-m) !important;
    }
}

/* กรอบซ้อนของช่องพิมพ์ใน selectize: มีกฎเก่าใน ticket-view.css ที่เจาะจงกว่า (4 คลาส + !important)
   จึงต้องเขียนให้เจาะจงกว่านั้นอีกชั้น ไม่งั้นจะเห็นกรอบสองชั้นซ้อนกันเวลาพิมพ์ค้นหา */
html body:not(.cust-help) .main__content.ticket .selectize-control .selectize-input > input,
html body:not(.cust-help) .main__content.ticket-create .selectize-control .selectize-input > input,
html body:not(.cust-help) .main__content .selectize-control .selectize-input > input,
html body:not(.cust-help) .main__content .selectize-control .selectize-input > input[type="text"] {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
    font-size: inherit !important;
    font-family: inherit !important;
}

/* วงแสงตอนโฟกัส: เขียนให้เจาะจงกว่ากฎกล่องพื้นฐานชัด ๆ (กันชนกันเองในไฟล์นี้) */
html body:not(.cust-help) .selectize-control .selectize-input.focus,
html body:not(.cust-help) .selectize-control .selectize-input.dropdown-active,
html body:not(.cust-help) .select2-container--open .select2-selection.select2-selection,
html body:not(.cust-help) .dropdown-select.active:not(.submit-us) > .label.label {
    border-color: var(--dd-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
}

/* ---------------------------------------------------------------
 * 4) ลูกศรต้องพลิกขึ้นเมื่อเปิดอยู่ (กฎเดิมของธีมไม่มี !important เลยแพ้กฎอื่น)
 * --------------------------------------------------------------- */
/* ⚠ ลูกศร svg ของธีม (.icon-chevron-down) ธีมหมุน 180° ให้อยู่แล้วตอน .active
   ห้ามหมุนซ้ำ ไม่งั้นจะครบ 360° กลายเป็นชี้ลงเหมือนเดิม — ที่นี่คุมแค่ transition ให้ลื่น */
html body:not(.cust-help) .dropdown-select > .label .icon-chevron-down,
html body:not(.cust-help) .dropdown > label .icon-chevron-down {
    transition: transform .15s ease;
}
/* select2 วาดลูกศรเป็นสามเหลี่ยมจากเส้นขอบ (<b>) ธีมไม่ได้พลิกให้ ต้องพลิกเอง */
html body:not(.cust-help) .select2-container .select2-selection__arrow b {
    transition: rotate .15s ease;
}
html body:not(.cust-help) .select2-container--open .select2-selection__arrow b {
    rotate: 180deg;
}
/* selectize วาดลูกศรด้วย ::after ของกล่อง (ไม่ใช่ <svg>)
   - ใช้ property `rotate` แยก ไม่ใช่ `transform` เพราะกฎอื่นใช้ transform จัดกึ่งกลางแนวตั้งอยู่
     (ถ้าเขียนทับด้วย transform ลูกศรจะหลุดกึ่งกลาง = ดูเอียง)
   - ตัว .ux-searchable ตอนเปิดจะเปลี่ยนเป็นไอคอนแว่นขยาย ห้ามหมุน */
/* ให้ transform ของลูกศร selectize ทำหน้าที่ "จัดตำแหน่ง" อย่างเดียว
   (ธีมเดิมเอา transform ไปหมุน 180° ตอน .focus ซึ่งไปลบการจัดกึ่งกลางทิ้ง
    พอเราหมุนซ้ำอีกชั้น มุมเลยเพี้ยนไปชี้มุมบนซ้าย) — การหมุนใช้ property `rotate` แยกต่างหาก */
html body:not(.cust-help) .selectize-control.single .selectize-input::after,
html body:not(.cust-help) .selectize-control.single .selectize-input.focus::after,
html body:not(.cust-help) .selectize-control.single .selectize-input.dropdown-active::after {
    top: 50% !important;
    margin-top: 0 !important;
    transform: translateY(-50%) !important;
    transition: rotate .15s ease;
}
html body:not(.cust-help) .selectize-control.single .selectize-input::after { rotate: none; }
html body:not(.cust-help) .selectize-control.single .selectize-input.dropdown-active::after { rotate: 180deg; }
/* ⚠ ของเดิม (admin-ui.css) สลับลูกศรเป็น "ไอคอนแว่นขยาย" ตอนเปิดช่องค้นหา
   ซึ่งดูเหมือนสัญลักษณ์เอียง ๆ ไม่เข้าพวกกับ dropdown ตัวอื่นในระบบ
   -> บังคับกลับมาใช้ลูกศรตัวเดียวกันทั้งระบบ แล้วพลิกขึ้นตอนเปิด */
/* ฝังไอคอนไว้ในไฟล์นี้เลย (data URI) จะได้ไม่ขึ้นกับว่าไฟล์ img/chevron-down.svg
   ถูกอัปขึ้นเซิร์ฟเวอร์แล้วหรือยัง — ลูกศรจะเหมือนกันทุกเครื่องแน่นอน */
html body:not(.cust-help) .selectize-control.single .selectize-input::after,
html body:not(.cust-help) .selectize-control.ux-searchable.single .selectize-input.dropdown-active::after {
    width: 9px !important;
    height: 9px !important;
    border: 0 !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1.2 4.5 4.7 8 1.2' fill='none' stroke='%237286a3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9px no-repeat !important;
}
html body:not(.cust-help) .selectize-control.ux-searchable.single .selectize-input.dropdown-active::after {
    rotate: 180deg;
}

/* ช่องพิมพ์ค้นหาบางตัวเป็น <textarea> ซึ่งเบราว์เซอร์วาด "มุมลากขยาย" ไว้มุมขวา
   เห็นเป็นขีดเฉียง ๆ คล้ายลูกศรเอียง — ปิดทิ้ง */
html body:not(.cust-help) .selectize-input textarea,
html body:not(.cust-help) .select2-search__field,
html body:not(.cust-help) .select2-search--inline textarea {
    resize: none !important;
    overflow: hidden !important;
}

/* =========================================================================
   ลิสต์ "กระพริบ" ตอนเปิด: โผล่ชิดขวาก่อนแล้วค่อยเด้งมากลางปุ่ม
   ต้นเหตุ: ธีมจัดกึ่งกลางด้วย transform (left:50% + translateX(-50%))
   แต่อนิเมชันเปิด (heskDdIn) ก็ใช้ transform เหมือนกัน ระหว่างเล่นอนิเมชัน
   translateX(-50%) จึงถูกแทนที่ ลิสต์เลยไปกองที่ left:50% (ดูเหมือนชิดขวา)
   พออนิเมชันจบถึงกระโดดกลับมากึ่งกลาง
   แก้: จัดกึ่งกลางแบบไม่ใช้ transform (left/right:0 + margin auto)
   ปล่อย transform ให้เป็นของอนิเมชันอย่างเดียว
   ========================================================================= */
html body:not(.cust-help) .dropdown-select.center > .dropdown-list,
html body:not(.cust-help) .dropdown.center > .dropdown-list {
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: max-content;
    min-width: 100%;
    max-width: min(340px, calc(100vw - 24px));
    transform: none;
}

/* =========================================================================
   ลูกศร: ลบของเดิมที่ HESK/ธีมวาดไว้ทุกตัว แล้ววาดใหม่จากไฟล์นี้ตัวเดียว
   (อาร์มเสนอเอง ๒๐ ส.ค. — ของเดิมมีทั้ง <svg> ในมาร์กอัป, ::after ของธีม
    และสามเหลี่ยม border ปนกัน ทำให้ซ้อนกัน/หมุนคนละมุมในแต่ละหน้า)
   ========================================================================= */

/* 1) ลบของเดิม */
html body:not(.cust-help) .dropdown-select:not(.submit-us) > .label > svg,
html body:not(.cust-help) .dropdown-select:not(.submit-us) > .label > .icon-chevron-down,
html body:not(.cust-help) .dropdown > label > svg.icon-chevron-down,
html body:not(.cust-help) .select2-container .select2-selection__arrow,
html body:not(.cust-help) .select2-container .select2-selection__arrow b {
    display: none !important;
}

/* 2) วาดใหม่: ตัวเดียว รูปเดียว ตำแหน่งเดียว ทุก widget */
html body:not(.cust-help) .dropdown-select:not(.submit-us) > .label,
html body:not(.cust-help) .select2-container .select2-selection {
    position: relative;
}
html body:not(.cust-help) .dropdown-select:not(.submit-us) > .label::after,
html body:not(.cust-help) .select2-container .select2-selection::after {
    content: "";
    position: absolute;
    right: 12px;
    top: calc(var(--dd-h) / 2);
    width: 9px;
    height: 9px;
    transform: translateY(-50%);      /* ตำแหน่งเท่านั้น */
    rotate: none;                     /* การหมุนแยกไปที่ property rotate */
    transition: rotate .15s ease;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1.2 4.5 4.7 8 1.2' fill='none' stroke='%237286a3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9px no-repeat;
    pointer-events: none;
}
/* 3) เปิดอยู่ = พลิกขึ้น */
html body:not(.cust-help) .dropdown-select.active:not(.submit-us) > .label::after,
html body:not(.cust-help) .select2-container--open .select2-selection::after {
    rotate: 180deg !important;
}

@media screen and (max-width: 899px) {
    html body:not(.cust-help) .dropdown-select:not(.submit-us) > .label::after,
    html body:not(.cust-help) .select2-container .select2-selection::after {
        top: calc(var(--dd-h-m) / 2);
        right: 14px;
    }
}

/* =========================================================================
   ที่ว่างด้านล่างไม่พอ -> กางขึ้นบนแทน (คลาสติดโดย dropdownAutoFlip ใน js/ux-enhance.js)
   ครอบทุกชนิด และเขียนให้ชนะกฎที่บังคับ top ไว้ตายตัวในไฟล์อื่น
   ========================================================================= */
html body:not(.cust-help) .dropdown-list.ux-dd-up,
html body:not(.cust-help) .selectize-dropdown.ux-dd-up,
html body:not(.cust-help) .main__content .dropdown-list.ux-dd-up,
html body:not(.cust-help) .main__content .selectize-dropdown.ux-dd-up,
html body:not(.cust-help) .main__content.ticket-create .wiz-panel .dropdown-list.ux-dd-up,
html body:not(.cust-help) .main__content.ticket .ux-submitrow .dropdown-list.ux-dd-up {
    top: auto !important;
    bottom: calc(100% + 6px) !important;
    transform-origin: center bottom;
}
/* select2 มีกลไกพลิกของตัวเอง — จัดหน้าตาให้เข้าชุดกัน */
html body:not(.cust-help) .select2-container--above .select2-dropdown {
    transform-origin: center bottom;
}

/* สีสถานะ/ความเร็ว: ให้ "จุดสี" เป็นตัวสื่อความหมาย ส่วนตัวหนังสือใช้สีเข้มอ่านง่ายเสมอ
   (ของเดิมใช้สีแดงสด #ff0000 เป็นสีตัวอักษรบนพื้นขาว คอนทราสต์แค่ 4.0 อ่านยาก) */
html body:not(.cust-help) .dropdown-select.status > .label span,
html body:not(.cust-help) .dropdown-select.priority > .label span,
html body:not(.cust-help) .dropdown-select.status > .label > span,
html body:not(.cust-help) .main__content .dropdown-select.status > .label span {
    color: var(--dd-text) !important;
}