/* ============================================================
   ป๊อปอัปค้นหาตำแหน่ง — PositionSelectionModal
   ไฟล์: wwwroot/css/psu-position-modal.css

   แยกออกมาจาก app.css เพราะใช้ที่เดียว และมีตัวแปรสีของตัวเอง
   ที่ไม่ควรรั่วไปกระทบหน้าอื่น

   บทบาทของสีในไฟล์นี้
     ฟ้าอ่อน    = สิ่งที่เลือกอยู่ และปุ่มเลือกในแถว (ชุดเดียวกับแท็กสถานะ)
     ลาเวนเดอร์ = ปุ่มค้นหา
     หัวตาราง   = ใช้คลาส LightSky ของระบบ ไม่กำหนดสีในไฟล์นี้
                  เพื่อให้แก้ที่เดียวแล้วตรงกันทุกหน้า

   หมายเหตุเรื่อง contrast ของปุ่มค้นหา
     #b19cff กับตัวอักษรขาวได้ราว 2.3:1 ต่ำกว่าเกณฑ์ WCAG AA (4.5:1)
     ตอนนี้ตั้งเป็นขาวตามที่เลือกไว้ ถ้าพบว่าอ่านยากบนจอสว่าง
     ให้เปลี่ยน --pm-btn-ink เป็น #241a5e จะได้ 6.8:1 โดยพื้นยังเป็นสีเดิม
   ============================================================ */

.psu-pm {
    /* ปุ่มค้นหา */
    --pm-btn-bg: #b19cff;
    --pm-btn-bg-hover: #9f87fb;
    --pm-btn-ink: #ffffff;
    /* ฟ้าอ่อน — สิ่งที่เลือกอยู่ และปุ่มเลือกในแถว */
    --pm-blue-bg: #e6f4ff;
    --pm-blue-bg-hover: #d6ebff;
    --pm-blue-line: #91caff;
    --pm-blue-ink: #0958d9;
    --pm-blue-solid: #1677ff;
    --pm-line: #e6e8eb;
    --pm-line-soft: #f0f2f4;
    --pm-field-line: #d9dde2;
    --pm-ink: #2f3943;
    --pm-ink-soft: #6b7681;
    --pm-ink-faint: #9aa4af;
}

/* ============================================================
   1) หัวป๊อปอัป
   ชื่อส่วนงานต่อท้ายหัวข้อด้วย · เพราะ Modal.Title รับเฉพาะ string
   ย้อมสีเฉพาะชื่อส่วนงานไม่ได้ จึงเน้นทั้งบรรทัดแทน
   ============================================================ */

.ant-modal-header .ant-modal-title {
    font-size: 17px;
    font-weight: 700;
    color: #241a5e;
}

.psu-pm__sub {
    font-size: 12.5px;
    color: var(--pm-ink-soft);
    line-height: 1.3;
}

/* ============================================================
   2) แถบเครื่องมือ — โหมด + ช่องค้นหาอยู่บรรทัดเดียวกัน
   โหมดไม่ยืด ช่องค้นหากินที่ที่เหลือทั้งหมด
   จอแคบลงจะตัดบรรทัดเองด้วย flex-wrap แล้วทั้งสองก้อนเต็มความกว้าง
   ============================================================ */

.psu-pm__toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

    .psu-pm__toolbar .psu-pm__seg {
        flex: 0 0 auto;
    }

    /* ขอพื้นที่อย่างน้อย 320px ถ้าไม่พอจะตกลงบรรทัดใหม่เอง */
    .psu-pm__toolbar .psu-pm__search {
        flex: 1 1 320px;
        min-width: 0;
        margin-bottom: 0;
    }

/* ============================================================
   3) ตัวเลือกแหล่งที่มา
   ตัวที่เลือกใช้ฟ้าอ่อนชุดเดียวกับแท็กสถานะ ไม่ใช่ม่วง
   เพราะม่วงสงวนไว้ให้ปุ่มที่กดแล้วเกิดการกระทำ
   ปุ่มที่ไม่ได้เลือกมีขอบโปร่งใส กันขนาดกระตุกตอนสลับ
   ============================================================ */

.psu-pm__seg {
    display: inline-flex;
    padding: 4px;
    gap: 4px;
    border-radius: 11px;
    background: var(--pm-line-soft);
    border: 1px solid var(--pm-line);
}

.psu-pm__segbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1.5px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--pm-ink-soft);
    background: transparent;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

    .psu-pm__segbtn:hover {
        background: rgba(9, 88, 217, .07);
        color: var(--pm-blue-ink);
    }

    .psu-pm__segbtn.is-on {
        background: var(--pm-blue-bg);
        color: var(--pm-blue-ink);
        font-weight: 700;
        border-color: var(--pm-blue-line);
        box-shadow: 0 1px 3px rgba(9, 88, 217, .14);
    }

        .psu-pm__segbtn.is-on:hover {
            background: var(--pm-blue-bg-hover);
        }

    .psu-pm__segbtn:focus-visible {
        outline: 2px solid var(--pm-blue-ink);
        outline-offset: 2px;
    }

    .psu-pm__segbtn .mud-icon-root {
        width: 17px !important;
        height: 17px !important;
        font-size: 17px !important;
    }

.psu-pm__hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 16px;
    font-size: 12.5px;
    color: var(--pm-ink-soft);
    line-height: 1.4;
}

    .psu-pm__hint .mud-icon-root {
        flex: 0 0 auto;
        color: var(--pm-ink-faint);
        width: 16px !important;
        height: 16px !important;
        font-size: 16px !important;
        margin-top: 1px;
    }

/* ============================================================
   4) แถวค้นหา
   ============================================================ */

.psu-pm__search {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-bottom: 18px;
}

    .psu-pm__search .ant-input-affix-wrapper,
    .psu-pm__search .ant-input {
        flex: 1 1 auto;
        min-width: 0;
        height: 42px !important;
        min-height: 42px !important;
        border-radius: 9px !important;
        border: 1.5px solid var(--pm-field-line) !important;
        font-size: 15px;
    }

        .psu-pm__search .ant-input-affix-wrapper-focused,
        .psu-pm__search .ant-input-affix-wrapper:focus-within,
        .psu-pm__search .ant-input:focus {
            border-color: var(--pm-btn-bg) !important;
            box-shadow: 0 0 0 3px rgba(177, 156, 255, .25) !important;
        }

        /* input ชั้นในของ AllowClear wrapper — ถอดขอบออกไม่ให้ซ้อนสองชั้น */
        .psu-pm__search .ant-input-affix-wrapper > .ant-input {
            height: auto !important;
            min-height: 0 !important;
            border: 0 !important;
            box-shadow: none !important;
            background: transparent !important;
        }

.psu-pm .psu-pm__searchbtn.mud-button-root {
    flex: 0 0 auto;
    height: 42px;
    padding: 0 22px;
    border-radius: 9px;
    text-transform: none;
    white-space: nowrap;
    font-size: 14.5px;
    font-weight: 600;
    background: var(--pm-btn-bg);
    color: var(--pm-btn-ink);
    border: 0;
    box-shadow: 0 2px 6px rgba(124, 99, 214, .28);
}

    .psu-pm .psu-pm__searchbtn.mud-button-root:hover {
        background: var(--pm-btn-bg-hover);
    }

.psu-pm .psu-pm__searchbtn .mud-icon-root {
    color: var(--pm-btn-ink);
}

/* ============================================================
   5) แถบบอกจำนวนผลลัพธ์
   ============================================================ */

.psu-pm__resbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--pm-ink-soft);
    flex-wrap: wrap;
}

    .psu-pm__resbar b {
        color: var(--pm-ink);
        font-weight: 700;
    }

/* ============================================================
   6) ตาราง
   หัวตารางมาจากคลาส LightSky ใน app.css จึงไม่กำหนดสีที่นี่
   ============================================================ */

.psu-pm__table .ant-table-tbody > tr > td {
    font-size: 14.5px;
}

.psu-pm__table .ant-table-tbody > tr:hover > td {
    background: var(--pm-blue-bg) !important;
}

.psu-pm__code {
    font-variant-numeric: tabular-nums;
    color: var(--pm-ink-soft);
}

/* ============================================================
   7) บรรทัดชื่อตำแหน่ง + JOB ID

   *** ห้ามใช้ display:flex ตรงนี้ ***
   flex มองชื่อตำแหน่งเป็นก้อนเดียว พอชื่อยาวจนเต็มบรรทัด
   JOB ID จะถูกดันไปบรรทัดใหม่ทั้งก้อน ซึ่งเป็นอาการที่เจอตอนแรก
   ใช้ inline flow ปกติ ข้อความจึงไหลต่อจากคำสุดท้ายเหมือนประโยคเดียว

   ใน .razor ต้องเขียน </span>@if ติดกัน ไม่มีเว้นวรรคหรือขึ้นบรรทัดใหม่
   ไม่งั้น Razor จะใส่ text node คั่น แล้วระยะจะเกินกว่า margin-left ที่ตั้งไว้
   ============================================================ */

.psu-pm__titleline {
    line-height: 1.5;
}

    .psu-pm__titleline .psu-pm__name {
        font-weight: 600;
    }

/* ไฮไลต์คำค้นในชื่อตำแหน่ง */
.psu-pm__name mark {
    background: #fff3b0;
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

.psu-pm__jobid {
    margin-left: 8px;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--pm-ink-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.psu-pm__daterange {
    font-size: 11.5px;
    color: var(--pm-ink-soft);
    line-height: 1.4;
    margin-top: 2px;
}

/* ============================================================
   8) เลขที่อัตรา
   POS_NO บางรายการเก็บ HTML ไว้ใน DB ถูกถอดแท็กออกแล้วที่ฝั่ง C#
   ด้วย StripHtml ข้อความที่เหลืออาจยาว จึงตัดเหลือ 2 บรรทัด
   ตัวเต็มดูได้จาก title ตอนเอาเมาส์ชี้
   ============================================================ */

.psu-pm__posno {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--pm-ink);
    word-break: break-word;
    text-align: left;
}

    .psu-pm__posno.is-empty {
        display: block;
        text-align: center;
        color: var(--pm-ink-faint);
    }

/* ============================================================
   9) ปุ่มเลือกในแถว — ฟ้าอ่อนตอนปกติ ทึบตอนชี้ที่แถว
   ============================================================ */

.psu-pm .psu-pm__pick.mud-button-root {
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    text-transform: none;
    white-space: nowrap;
    font-size: 13.5px;
    font-weight: 600;
    background: var(--pm-blue-bg);
    color: var(--pm-blue-ink);
    border: 1.5px solid var(--pm-blue-line);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.psu-pm__table .ant-table-tbody > tr:hover .psu-pm__pick.mud-button-root {
    background: var(--pm-blue-solid);
    color: #fff;
    border-color: var(--pm-blue-solid);
}

.psu-pm__table .ant-table-tbody > tr:hover .psu-pm__pick .mud-icon-root {
    color: #fff;
}

/* ============================================================
   10) สถานะว่าง
   ============================================================ */

.psu-pm__empty {
    padding: 44px 20px;
    text-align: center;
    color: var(--pm-ink-faint);
    border: 1px dashed var(--pm-line);
    border-radius: 10px;
}

    .psu-pm__empty .mud-icon-root {
        width: 34px !important;
        height: 34px !important;
        font-size: 34px !important;
        opacity: .45;
        margin-bottom: 8px;
    }

.psu-pm__empty-title {
    font-size: 14.5px;
    color: var(--pm-ink-soft);
    margin-bottom: 4px;
}

.psu-pm__empty-sub {
    font-size: 12.5px;
}

/* ============================================================
   11) แถบท้าย
   ============================================================ */

.psu-pm__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
}

.psu-pm__foothint {
    font-size: 12.5px;
    color: var(--pm-ink-faint);
}

    .psu-pm__foothint kbd {
        display: inline-block;
        padding: 1px 5px;
        border-radius: 4px;
        font-size: 11px;
        font-family: inherit;
        border: 1px solid var(--pm-line);
        background: #fff;
        color: var(--pm-ink-soft);
    }

.psu-pm .psu-pm__close.mud-button-root {
    height: 38px;
    padding: 0 20px;
    border-radius: 8px;
    text-transform: none;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--pm-field-line);
    background: #fff;
    color: var(--pm-ink-soft);
}

    .psu-pm .psu-pm__close.mud-button-root:hover {
        background: var(--pm-line-soft);
        color: var(--pm-ink);
    }

/* ============================================================
   12) จอเล็ก
     820px  โหมดกับช่องค้นหาแยกคนละบรรทัด แต่ละก้อนยังเรียงแนวนอน
     560px  ปุ่มค้นหาลงใต้ช่องกรอก และปุ่มโหมดแบ่งครึ่งความกว้าง
   ============================================================ */

@media (max-width: 820px) {
    .psu-pm__toolbar .psu-pm__seg {
        flex: 1 1 100%;
        display: flex;
    }

    .psu-pm__toolbar .psu-pm__segbtn {
        flex: 1 1 0;
        justify-content: center;
        padding: 9px 10px;
    }

    .psu-pm__toolbar .psu-pm__search {
        flex: 1 1 100%;
    }
}

@media (max-width: 560px) {
    .psu-pm__search {
        flex-direction: column;
    }

    .psu-pm .psu-pm__searchbtn.mud-button-root {
        width: 100%;
        justify-content: center;
    }

    .psu-pm__foot {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}
/* ============================================================
   แถวที่คลิกเลือกได้
   ใส่ที่ td ด้วย เพราะบางธีมของ AntDesign ตั้ง cursor ที่ td ทับ tr
   ส่วนคอลัมน์ปุ่มคืนเป็น default เพราะปุ่มมีเคอร์เซอร์ของตัวเองอยู่แล้ว
   ============================================================ */
.psu-pm__table--click .ant-table-tbody > tr,
.psu-pm__table--click .ant-table-tbody > tr > td {
    cursor: pointer;
}

    /* ขอบซ้ายสีฟ้าโผล่ตอนชี้ บอกว่าทั้งแถวเป็นเป้าเดียวกัน
   ไม่ใช่แค่เซลล์ที่เมาส์อยู่ */
    .psu-pm__table--click .ant-table-tbody > tr > td:first-child {
        box-shadow: inset 3px 0 0 0 transparent;
        transition: box-shadow .12s ease;
    }

    .psu-pm__table--click .ant-table-tbody > tr:hover > td:first-child {
        box-shadow: inset 3px 0 0 0 var(--pm-blue-solid);
    }

    /* กดค้างแล้วแถวยุบลงเล็กน้อย ให้รู้ว่าคลิกติดแล้ว */
    .psu-pm__table--click .ant-table-tbody > tr:active > td {
        background: var(--pm-blue-bg-hover) !important;
    }