/* ============================================================
   ★★ PM Combobox Overlay — Component แทน Select2
   Docs: Docs/ComboBoxOverlay.md

   โครงสร้าง:
   (1) <select> เดิม — ซ่อน (display:none) แต่ยังเป็น source of truth
   (2) .pmc-trigger — ปุ่มหน้าตาเหมือน form-select แทรกต่อจาก select
   (3) .pmc-overlay — เปิดเมื่อกด trigger (instance เดียวต่อหน้า)

   Theme: ใช้ CSS vars ของระบบ (--bg-primary, --border-color, ฯลฯ)
   → dark theme ทำงานอัตโนมัติ ไม่ต้อง override
   ============================================================ */

/* ─────────────────────────────────────────────
   (2) Trigger — หน้าตาเหมือน .form-select
   ───────────────────────────────────────────── */
.pmc-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 38px;                 /* เท่า .form-control */
    padding: 0.375rem 0.75rem;        /* เท่า .form-control */
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-primary, #212529);
    background-color: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #ced4da);
    border-radius: 0.375rem;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

/* ★ form-select-sm / form-control-sm บน select เดิม → trigger เล็กลงตาม */
select.form-select-sm + .pmc-trigger,
select.form-control-sm + .pmc-trigger {
    min-height: 31px;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
}

.pmc-trigger:hover {
    border-color: var(--text-muted, #86909c);
}

.pmc-trigger:focus-visible,
.pmc-trigger.pmc-open {
    outline: 0;
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* ★ ค่าที่แสดง — ellipsis ถ้ายาว */
.pmc-value {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
}

/* ★ placeholder (ยังไม่เลือก) — สีจาง */
.pmc-trigger.pmc-placeholder .pmc-value {
    color: var(--text-muted, #6c757d);
}

/* ★ ปุ่มเคลียร์ ✕ — โผล่เมื่อมีค่าเท่านั้น (JS คุม display) */
.pmc-clear {
    flex: 0 0 auto;
    font-size: 0.8rem;
    padding: 2px 4px;
    border-radius: 4px;
    color: var(--text-muted, #6c757d);
    display: none;                    /* JS โชว์เมื่อมีค่า */
}
.pmc-clear:hover {
    color: #dc3545;
    background: rgba(220, 53, 69, 0.12);
}

/* ★ caret ▼ */
.pmc-caret {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--text-muted, #6c757d);
    transition: transform 0.15s;
}
.pmc-trigger.pmc-open .pmc-caret {
    transform: rotate(180deg);
}

/* ★ disabled select → trigger จาง คลิกไม่ได้ */
.pmc-trigger.pmc-disabled {
    opacity: 0.65;
    cursor: not-allowed;
    background-color: var(--bg-secondary, #e9ecef);
}
.pmc-trigger.pmc-disabled:hover {
    border-color: var(--border-color, #ced4da);
}

/* ★ is-invalid (validation) — ส่งต่อจาก select เดิม */
select.is-invalid + .pmc-trigger {
    border-color: #dc3545 !important;
}
select.is-invalid + .pmc-trigger:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* ★★ trigger ใน .input-group — ต่อกับปุ่มข้างๆ เหมือน form-select เดิม
   (Bootstrap ตัด border-radius ระหว่าง input-group children)
   โครงสร้าง: <div class="input-group"><select hidden><div class="pmc-trigger">...<button>⚙</button></div> */
.input-group > .pmc-trigger {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
/* ★ select ถูกซ่อน (display:none) → Bootstrap ไม่เห็น .form-select ใน input-group
   ต้องจัด z-index ให้ trigger อยู่เหนือปุ่ม (เหมือน .form-select ใน input-group) */
.input-group > .pmc-trigger {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}
/* ★ ปุ่มต่อท้าย trigger (เช่น ⚙ จัดการข้อมูลหลัก) — ไม่ต้องทำอะไร
   Bootstrap จัด border-radius ให้เองผ่าน .input-group-append / .btn */

/* ─────────────────────────────────────────────
   (3) Overlay — เหมือน master-overlay (JobClose)
   ───────────────────────────────────────────── */
.pmc-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    animation: pmcFadeIn 0.15s ease;
}
@keyframes pmcFadeIn { from { opacity: 0; } to { opacity: 1; } }

.pmc-overlay-content {
    display: flex;
    flex-direction: column;
    width: 92%;
    max-width: 480px;
    max-height: 85vh;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #212529);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.pmc-overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: var(--bg-secondary, #f8f9fa);
    border-bottom: 1px solid var(--border-color, #dee2e6);
}
.pmc-title {
    font-weight: 600;
    font-size: 0.95rem;
}
.pmc-close {
    border: 1px solid #dc3545;
    background: transparent;
    color: #dc3545;
    border-radius: 6px;
    padding: 2px 10px;
    font-size: 0.8rem;
    cursor: pointer;
}
.pmc-close:hover {
    background: #dc3545;
    color: #fff;
}

/* ★ ช่องค้นหา */
.pmc-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 16px 8px;
    padding: 6px 10px;
    border: 1px solid var(--border-color, #ced4da);
    border-radius: 8px;
    background: var(--bg-primary, #fff);
}
.pmc-search-wrap:focus-within {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.pmc-search-wrap i {
    color: var(--text-muted, #6c757d);
    font-size: 0.9rem;
}
.pmc-search {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-primary, #212529);
    font-size: 0.95rem;
    min-width: 0;                     /* ให้ flex ย่อได้ */
}
.pmc-search::placeholder {
    color: var(--text-muted, #6c757d);
}

/* ★ รายการ */
.pmc-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 8px 10px;
    -webkit-overflow-scrolling: touch;
}

.pmc-item {
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.92rem;
    overflow-wrap: anywhere;          /* ข้อความยาวไม่ล้น */
}
.pmc-item:hover,
.pmc-item.pmc-active {
    background: rgba(13, 110, 253, 0.12);
    color: var(--text-primary, #212529);
}
.pmc-item.pmc-selected {
    font-weight: 600;
    color: #0d6efd;
}
.pmc-item.pmc-selected::after {
    content: "\F26E";                 /* bi-check-lg */
    font-family: "bootstrap-icons";
    float: right;
    font-size: 0.9rem;
}

/* ★ optgroup header */
.pmc-group-header {
    padding: 8px 12px 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted, #6c757d);
}

/* ★ disabled option */
.pmc-item.pmc-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.pmc-item.pmc-disabled:hover {
    background: transparent;
}

/* ★ empty state */
.pmc-empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--text-muted, #6c757d);
    font-size: 0.9rem;
}

/* ★ mobile — overlay กว้างขึ้น + แตะง่าย */
@media (max-width: 767.98px) {
    .pmc-overlay-content {
        width: 96%;
        max-height: 88vh;
    }
    .pmc-item {
        padding: 12px;                /* แตะง่ายขึ้น */
        font-size: 1rem;
    }
    .pmc-search {
        font-size: 16px;             /* ★ กัน iOS zoom ตอน focus */
    }
    /* ★ trigger ใน bottom sheet มือถือ — แตะง่าย (สืบทอดจาก select เดิมที่กำหนด min-height) */
    .pm-bottom-sheet .pmc-trigger,
    .pmc-trigger.pmc-touch {
        min-height: 44px;
    }
}