/* ============================================================
   ป๊อปอัปเพิ่มรายชื่อผู้รายงานตัว — AddApplicantDialog
   ใช้ชุดสีเดียวกับ psu-position-modal.css
     ฟ้าอ่อน    = สิ่งที่เลือกอยู่ และปุ่มเลือกในแถว
     ลาเวนเดอร์ = ปุ่มค้นหา
     หัวตาราง   = คลาส LightSky ของระบบ
   ============================================================ */

.psu-ad {
    --ad-btn-bg: #b19cff;
    --ad-btn-bg-hover: #9f87fb;
    --ad-btn-ink: #ffffff;
    --ad-blue-bg: #e6f4ff;
    --ad-blue-bg-hover: #d6ebff;
    --ad-blue-line: #91caff;
    --ad-blue-ink: #0958d9;
    --ad-blue-solid: #1677ff;
    --ad-line: #e6e8eb;
    --ad-line-soft: #f0f2f4;
    --ad-field-line: #d9dde2;
    --ad-ink: #2f3943;
    --ad-ink-soft: #6b7681;
    --ad-ink-faint: #9aa4af;
    --ad-ok: #15803D;
    --ad-err: #c5221f;
}

/* ===== หัวไดอะล็อก ===== */
.psu-ad__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.psu-ad__icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1eeff;
    border: 1px solid #c3b3f3;
    color: #5b3ad6;
}

.psu-ad__titles {
    flex: 1 1 auto;
    min-width: 0;
}

.psu-ad__title {
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--psu-deep-blue);
}

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

.psu-ad__body {
    padding: 4px 0 0;
}

/* ===== สลับโหมด + ช่องค้นหา บรรทัดเดียวกัน ===== */
.psu-ad__toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

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

.psu-ad__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(--ad-ink-soft);
    background: transparent;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

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

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

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

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

.psu-ad__search {
    flex: 1 1 300px;
    min-width: 0;
    display: flex;
    gap: 10px;
}

    .psu-ad__search .ant-input-affix-wrapper,
    .psu-ad__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(--ad-field-line) !important;
        font-size: 15px;
    }

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

        .psu-ad__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-ad .psu-ad__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(--ad-btn-bg);
    color: var(--ad-btn-ink);
    border: 0;
    box-shadow: 0 2px 6px rgba(124, 99, 214, .28);
}

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

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

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

/* แก้ — จัดการทั้งความสูงแถวและตำแหน่งข้อความ error */
.psu-ad__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    /* ไม่ยืดทุกช่องให้สูงเท่ากัน ช่องที่มี error จะสูงขึ้นเองได้
       ถ้าปล่อยเป็น stretch แถวจะสูงตามช่องที่สูงสุดแล้วข้อความล้นออกมา */
    align-items: start;
}

    .psu-ad__grid > .ant-form-item {
        margin-bottom: 0;
        min-width: 0;
    }

    /* ข้อความ error ใต้ช่องกรอก
   AntDesign บางธีมตั้ง .ant-form-item-explain เป็น absolute
   ทำให้ไม่กินความสูง ข้อความจึงไปทับ label ของแถวถัดไป
   บังคับกลับเป็น static เพื่อให้ดันแถวถัดไปลงตามปกติ */
    .psu-ad__grid .ant-form-item-explain,
    .psu-ad__grid .ant-form-item-extra {
        position: static !important;
        min-height: 0;
        margin-top: 4px;
        font-size: 11.5px;
        line-height: 1.35;
    }

    /* ถอดความสูงขั้นต่ำที่ AntDesign ใส่ไว้ ไม่งั้นแถวจะสูงเกินจำเป็นตอนไม่มี error */
    .psu-ad__grid .ant-form-item-control-input {
        min-height: 0;
    }

/* แก้ — เพิ่มคู่ซ้อนในช่องเดียว */
.psu-ad__full {
    grid-column: 1 / -1;
}

/* วันเกิด + เพศ อยู่ในช่องเดียวของ grid หลัก
   วันเกิดกว้างแค่พอแสดง dd/MM/yyyy เพศกินที่ที่เหลือ
   แยกเป็นสอง FormItem ไม่ได้เพราะ grid หลักเป็น 2 คอลัมน์
   จึงซ้อน grid อีกชั้นตรงนี้ */
.psu-ad__pair {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

    .psu-ad__pair > .ant-form-item {
        margin-bottom: 0 !important;
        min-width: 0;
    }

/* จอแคบ — เรียงลงมา */
@media (max-width: 760px) {
    .psu-ad__pair {
        grid-template-columns: 1fr;
    }
}

.psu-ad__fld {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.psu-ad__lbl {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ad-ink-soft);
    line-height: 1.3;
}

.psu-ad .req {
    color: #d93025;
    font-weight: 700;
}

.psu-ad__note {
    font-size: 11.5px;
    line-height: 1.35;
}

    .psu-ad__note.is-ok {
        color: var(--ad-ok);
    }

    .psu-ad__note.is-err {
        color: var(--ad-err);
    }

.psu-ad__ig {
    display: flex;
    gap: 8px;
    align-items: center;
}

    .psu-ad__ig .ant-input-affix-wrapper,
    .psu-ad__ig .ant-input {
        flex: 1 1 auto;
        min-width: 0;
    }

.psu-ad__chk {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

    .psu-ad__chk.is-ok {
        background: #e8f8ee;
        color: var(--ad-ok);
    }

    .psu-ad__chk.is-err {
        background: #fdecea;
        color: var(--ad-err);
    }

/* ปุ่มตัวเลือกแทน radio เล็ก ๆ — พื้นที่กดใหญ่ขึ้นมาก */
.psu-ad__rrow {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.psu-ad__rbtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    border: 1.5px solid var(--ad-field-line);
    background: #fff;
    color: var(--ad-ink-soft);
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

    .psu-ad__rbtn:hover {
        border-color: var(--ad-blue-line);
    }

    .psu-ad__rbtn.is-on {
        background: var(--ad-blue-bg);
        border-color: var(--ad-blue-line);
        color: var(--ad-blue-ink);
        font-weight: 600;
    }

.psu-ad__rdot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--ad-field-line);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.psu-ad__rbtn.is-on .psu-ad__rdot {
    border-color: var(--ad-blue-ink);
}

    .psu-ad__rbtn.is-on .psu-ad__rdot::after {
        content: '';
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--ad-blue-ink);
    }

/* ===== ตารางผลค้นหา ===== */
.psu-ad__resbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--ad-ink-soft);
    flex-wrap: wrap;
}

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

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

.psu-ad__per {
    display: flex;
    align-items: center;
    gap: 9px;
}

.psu-ad__av {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .psu-ad__av.is-act {
        background: #e8f8ee;
        color: var(--ad-ok);
    }

    .psu-ad__av.is-out {
        background: #fdecea;
        color: var(--ad-err);
    }

.psu-ad__pn {
    font-weight: 500;
    font-size: 13.5px;
    line-height: 1.35;
}

    .psu-ad__pn span {
        color: var(--ad-ink-faint);
        font-size: 11.5px;
        font-weight: 400;
    }

.psu-ad__pf {
    font-size: 11.5px;
    color: var(--ad-ink-faint);
    line-height: 1.35;
}

.psu-ad .psu-ad__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(--ad-blue-bg);
    color: var(--ad-blue-ink);
    border: 1.5px solid var(--ad-blue-line);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

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

/* ===== สถานะว่าง ===== */
.psu-ad__empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--ad-ink-faint);
    border: 1px dashed var(--ad-line);
    border-radius: 10px;
}

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

.psu-ad__empty-t {
    font-size: 14.5px;
    color: var(--ad-ink-soft);
    margin-bottom: 4px;
}

.psu-ad__empty-s {
    font-size: 12.5px;
}

/* ===== แถบท้าย ===== */
.psu-ad__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
}

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

.psu-ad__acts {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.psu-ad .psu-ad__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(--ad-field-line);
    background: #fff;
    color: var(--ad-ink-soft);
}

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

.psu-ad .psu-ad__save.mud-button-root {
    height: 38px;
    padding: 0 20px;
    border-radius: 8px;
    text-transform: none;
    font-size: 14px;
    font-weight: 600;
    background: var(--ad-blue-solid);
    color: #fff;
    border: 0;
}

    .psu-ad .psu-ad__save.mud-button-root:hover {
        background: var(--ad-blue-ink);
    }

/* ===== จอแคบ ===== */
@media (max-width: 640px) {
    .psu-ad__grid {
        grid-template-columns: 1fr;
    }

    .psu-ad__toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 8px;
    }
    .psu-ad__seg {
        display: flex;
    }

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

    .psu-ad__search {
        flex-direction: column;
    }

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

    .psu-ad__foot {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}
/* คำอธิบายสัญลักษณ์ท้ายไดอะล็อก
   แสดงไอคอนจริงคู่กับคำอธิบาย ผู้ใช้จึงเทียบกับในตารางได้ตรง ๆ
   ไม่ต้องแปลจากคำว่า "วงกลมเขียว" เอง */
.psu-ad__legend {
    display: inline-flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.psu-ad__legend-it {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

    /* ไอคอนในคำอธิบายเล็กกว่าในตาราง เพราะเป็นข้อมูลรอง */
    .psu-ad__legend-it .psu-ad__av {
        width: 22px;
        height: 22px;
    }

        .psu-ad__legend-it .psu-ad__av .mud-icon-root {
            width: 13px !important;
            height: 13px !important;
            font-size: 13px !important;
        }
/* ============================================================
   แก้ข้อความ error ทับ label แถวถัดไป (ชั่วคราว — รอผล DevTools)
   ครอบทุกชั้นที่เป็นไปได้ เพราะยังไม่รู้ว่า AntDesign เวอร์ชันนี้
   วางข้อความ error ไว้ที่ element ไหนและใช้ position อะไร
   ============================================================ */

/* 1) บังคับทุก element ในสาย explain ให้อยู่ใน flow ปกติ */
.psu-ad .ant-form-item-explain,
.psu-ad .ant-form-item-explain-error,
.psu-ad .ant-form-item-explain-connected,
.psu-ad .ant-form-item-margin-offset,
.psu-ad .ant-form-item-extra {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 4px 0 0 0 !important;
    font-size: 11.5px;
    line-height: 1.35;
    overflow: visible !important;
}

/* 2) ถอด min-height ที่ AntDesign ใส่ไว้ที่กล่องคอนโทรล */
.psu-ad .ant-form-item-control,
.psu-ad .ant-form-item-control-input,
.psu-ad .ant-form-item-control-input-content {
    min-height: 0 !important;
}

/* 3) ถ้ามีการใช้ transform/animation ซ่อนข้อความไว้ ให้ยกเลิก */
.psu-ad .ant-form-item-explain > div {
    transform: none !important;
    opacity: 1 !important;
}

/* แก้ — ลดระยะแถวลง เพราะข้อความ error กินที่อยู่แล้วเมื่อมี */
.psu-ad__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
    align-items: start;
}
    .psu-ad__grid > .ant-form-item {
        margin-bottom: 0 !important;
        min-width: 0;
    }
.psu-ad__fld {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}