/* ============================================================
   JOBS@PSU — สไตล์ชีทหลัก
   ไฟล์: wwwroot/css/app.css

   สไตล์ของป๊อปอัปค้นหาตำแหน่ง (.psu-pm*) ถูกแยกไปไว้ที่
   wwwroot/css/psu-position-modal.css แล้ว
   ต้องเพิ่มลิงก์ต่อจากไฟล์นี้ใน App.razor หรือ _Layout.cshtml
       <link rel="stylesheet" href="css/psu-position-modal.css" />
   ============================================================ */

:root {
    --text-primary: rgba(0, 0, 0, 0.87);
    --text-secondary: rgba(0, 0, 0, 0.6);
    --character-primary-85: rgba(0, 0, 0, 0.85);
    --border-radius: 4px; /* --borderRadius:*/
    --primary-main: #2196F3;
    --blue-1: #0D99FF;
    --orange-1: #F24822;
    --psu-ocean-blue: #3B71B8;
    --blue-gray: #637381;
    --green-1: #14AE5C;
    --green-2: #2E7D32;
    --gray-text-1: rgba(173, 173, 173, 0.4);
    --gray-text-2: #BEBEBE;
    --purple-1: #9747FF;
    --psu-deep-blue: #0F4372;
    --components-alert-info: #E5F6FD;
    --components-alert-info-color: #014361;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #706d6d;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.txtTitleSubject {
    color: #2163bb;
    font-size: 15px;
    font-weight: bold;
}

.txtPositionName {
    color: var(--blue-1);
}

.txtData {
    color: #469ad8;
    font-size: 14px;
    line-height: 25px;
}

.txtDataProfile {
    color: #5f76bb;
    font-size: 14px;
    line-height: 25px;
}


.txtTitleData {
    font-size: 14px;
    font-weight: bold;
    color: #706d6d;
}

.mud-grid > .mud-grid-item > .selectedPosition {
    border: 2px solid #92deb2;
    border-radius: 10px;
    font-size: 14px !important;
    padding: 15px;
    box-shadow: 3px 5px #a8d9aa !important;
    cursor: pointer;
    background-color: #eefff4;
}

    .mud-grid > .mud-grid-item > .selectedPosition:hover {
        background-color: #e8fdff;
        box-shadow: 5px 8px #a8d9aa !important;
    }

.mud-grid > .mud-grid-item > .NotselectedPosition {
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    font-size: 14px !important;
    padding: 15px;
    box-shadow: 3px 5px #f1f1f1;
    cursor: pointer;
}


    .mud-grid > .mud-grid-item > .NotselectedPosition:hover {
        background-color: #e8f9ff;
        border: 1px solid #7ed0fd;
        box-shadow: 5px 8px #e7eded !important;
    }

.txtTitleSubjectGray {
    color: #706d6d;
    font-size: 15px;
    font-weight: bold;
}

.relatedPositionActive {
    background-color: #ecf7ff;
    padding: 15px;
    cursor: pointer;
    padding-top: 0px !important;
}

.dividerSkyBlue > .mud-divider-fullwidth .mud-divider {
    border: 1px solid #34b8e0 !important;
}

/*.mud-grid-item > .divRegist {
    padding: 20px !important;
    background-color: #9bd7fc !important;
    color: #f8fbff !important;
    font-weight: bold;
    font-size: 20px !important;
    border-radius: 10px;
    box-shadow: 3px 5px #f1f1f1 !important;
    cursor: pointer;*/
/*    text-shadow: -1px -1px 0 #74b8ff, 1px -1px 0 #74b8ff, -1px 1px 0 #74b8ff, 1px 1px 0 #74b8ff;
*/
/*}*/
.divRegist {
    padding: 20px !important;
    background-color: #94ddff59 !important;
    color: #2b75d8 !important;
    font-weight: bold;
    font-size: 20px !important;
    border-radius: 10px;
    border: 1px solid #52c1ff;
    box-shadow: 3px 5px #f1f1f1 !important;
    cursor: pointer;
    /* text-shadow: -1px -1px 0 #74b8ff, 1px -1px 0 #74b8ff, -1px 1px 0 #74b8ff, 1px 1px 0 #74b8ff; */
}
    /*.divRegist:hover {
    background-color: #93d3fa !important;
    box-shadow: 3px 5px #69ace1 !important;
    border: 1px solid #bbddf5;
}
*/
    .divRegist:hover {
        background-color: #94ddff70 !important;
        box-shadow: 3px 5px #8ab7e6 !important;
        border: 1px solid #45abe4;
    }

.divEditResume {
    border: 1px solid #9d90e6;
    padding: 20px !important;
    background-color: #dde1ff;
    color: #756cdf;
    font-weight: bold;
    font-size: 20px !important;
    border-radius: 10px;
    box-shadow: 3px 5px #f1f1f1;
    cursor: pointer;
    /* text-shadow: 1px 1px 0 #7971df, 1px -1px 0 #8a84d0, -1px 1px 0 #8a84d0, 1px 1px 0 #8a84d0; */
}

    .divEditResume:hover {
        background-color: #d1d7ff !important;
        box-shadow: 3px 5px #8086e6 !important;
        border: 1px solid #9a89fc;
    }

.divChangePWD {
    border: 1px solid #4fcac2;
    padding: 20px !important;
    background-color: #cffcff;
    color: #3e8f9a;
    font-weight: bold;
    font-size: 20px !important;
    border-radius: 10px;
    box-shadow: 3px 5px #f1f1f1;
    cursor: pointer;
    /* text-shadow: 1px 1px 0 #1aa493, 1px -1px 0 #1baa92, -1px 1px 0 #1baa92, 1px 1px 0 #1baa92; */
}

    .divChangePWD:hover {
        background-color: #b8f7fc !important;
        box-shadow: 3px 5px #4ca8ad !important;
        border: 1px solid #72c8bc;
    }
/*.divAddResume {
    padding: 20px !important;
    background-color: #FFC97E;
    color: #f8fbff;
    font-weight: bold;
    font-size: 20px !important;
    border-radius: 10px;
    box-shadow: 3px 5px #f1f1f1;
    cursor: pointer;*/
/*    text-shadow: -1px -1px 0 #ce9b54, 1px -1px 0 #ce9b54, -1px 1px 0 #ce9b54, 1px 1px 0 #ce9b54;
*/
/*}*/
.divAddResume {
    border: 1px solid #f8ab91;
    padding: 20px !important;
    background-color: #ffeab9;
    color: #c7805b;
    font-weight: bold;
    font-size: 20px !important;
    border-radius: 10px;
    box-shadow: 3px 5px #f1f1f1;
    cursor: pointer;
    /* text-shadow: -1px -1px 0 #ce9b54, 1px -1px 0 #ce9b54, -1px 1px 0 #ce9b54, 1px 1px 0 #ce9b54; */
}

.divGreenInner {
    background-color: #f4fff8;
    border: 1px solid #68cf6e;
    border-radius: 5px;
    font-size: 0.85rem;
    padding: 15px;
    margin: 5px;
    line-height: 25px;
    color: #27768a !important;
}

.divWarningInner {
    color: #8c6725;
    background-color: #fffee3;
    border: 1px solid #edd8c7;
    border-radius: 5px;
    font-size: 0.85rem;
    padding: 15px;
    margin: 5px;
    line-height: 25px;
}

.divLightSkyInner {
    color: #5a87b6;
    background-color: #eef9ff;
    border: 1px solid #9dd3ff;
    border-radius: 5px;
    font-size: 0.85rem;
    padding: 15px;
    margin: 5px;
    line-height: 25px;
}

.divPurpleInner {
    color: #6b55bf;
    background-color: #f7f6ff;
    border: 1px solid #c3b8ff;
    border-radius: 5px;
    font-size: 0.85rem;
    padding: 15px;
    margin: 5px;
    line-height: 25px;
}

.divAddResume:hover {
    background-color: #ffe097 !important;
    box-shadow: 3px 5px #edc296 !important;
    border: 1px solid #f8ab91;
}

.txtDescription {
    font-size: 0.85rem !important;
    line-height: 25px !important;
}

.txtTitleSubjectBig {
    color: #2163bb;
    font-size: 20px;
    font-weight: bold;
}

.txtTitleSubjectMedium {
    color: #2163bb;
    font-size: 16px;
    font-weight: bold;
}

.txtsmall {
    color: #4592e6;
    font-size: .9em;
}

.lnkApplyDtl {
    color: #00c57f;
    text-decoration: underline;
}

    .lnkApplyDtl:hover {
        background-color: #bbfff8;
        color: #1e7e5c;
    }

.lnkActiveApplyDtl {
    color: #40aed0;
    text-decoration: underline;
}

    .lnkActiveApplyDtl:hover {
        background-color: #bbfff8;
        color: #27b0db;
    }

.smallGreen {
    color: #228676;
    font-size: 0.75rem;
}

.smallBlue {
    color: #479fee;
    font-size: 0.75rem;
}

.btnMenuLightSky {
    background-color: #e9fbff;
    border: 1px solid #3aa9e7 !important;
    color: #0a2432 !important;
}

    .btnMenuLightSky:hover {
        background-color: #c7f5ff;
        border: 1px solid #3aa9e7 !important;
        color: #0a7ab8 !important;
    }

.btnMenuSuccess > .mud-button-outlined.mud-button-outlined-tertiary {
    background-color: #dcfff1;
}

    .btnMenuSuccess > .mud-button-outlined.mud-button-outlined-tertiary > mud-list .mud-list-item {
        color: green;
    }


.btnMenuInfo > .mud-button-outlined.mud-button-outlined-info {
    background-color: #e7f8ff !important;
}

.btnMenuInfoOver {
    max-height: inherit;
    overflow-y: auto;
    border: 1px solid #8eccff !important;
    background-color: #e7f8ff !important;
}
/*
.btnMenuSuccess.mud-popover .mud-list>.mud-list-item-clickable {
    background-color: red !important;
} */

.btnMenuSuccessOver {
    max-height: inherit;
    overflow-y: auto;
    border: 1px solid #a1dacf !important;
    background-color: #effffd !important;
}

.btnDelCircle {
    background-color: #ffe1e1;
    color: #ef3f3f;
    border: 1px solid #fd9292;
    width: 35px !important;
    height: 25px !important;
}

    .btnDelCircle:hover {
        background-color: #ffcece;
        color: #ef3f3f;
        border: 1px solid #fd9292;
    }

    .btnDelCircle > .mud-fab .mud-fab-size-small {
        width: 35px !important;
        height: 25px !important;
    }

.btnLightSkyCircle {
    font-size: 12px;
    font-weight: 600;
    color: #096dd9;
    background-color: #d7f6ff;
    border: 1px solid #62b3ff;
    width: 35px !important;
    height: 25px !important;
}

    .btnLightSkyCircle:hover {
        background-color: #a9e6f8;
        color: #096dd9;
        border: 1px solid #62b3ff;
    }

    .btnLightSkyCircle > .mud-fab .mud-fab-size-small {
        width: 35px !important;
        height: 25px !important;
    }
/*    .btnLightSkyCircle > .mud-icon-button .mud-icon-button-size-small {
        width: 35px !important;
        height: 25px !important;
    } */
div:where(.swal2-icon) .swal2-icon-content {
    display: flex;
    align-items: center;
    font-size: 2em;
}

div:where(.swal2-icon) {
    position: relative;
    box-sizing: content-box;
    justify-content: center;
    width: 2em;
    height: 2em;
    margin: 2em auto .6em;
    border: 0.25em solid rgba(0, 0, 0, 0);
    border-radius: 50%;
    border-color: #000;
    font-family: inherit;
    line-height: 5em;
    cursor: default;
    user-select: none;
}

.ModalSuccess .ant-modal-title {
    color: #003C71 !important;
}

.ModalSuccess .ant-modal-header {
    padding: 16px 24px;
    color: #003c71d9 !important;
    background: #bffffaa6 !important;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 2px 2px 0 0;
}

.textTbdesc {
    color: #096dd9;
}

.LightSky table > thead > tr > th {
    border-top-left-radius: 2px;
    background-color: #dff4ff !important;
    border-bottom: 1px solid #acd9ff !important;
    padding: 10px 7px;
}

.LightSky-border > tr > td {
    border-bottom: 1px solid #91d5ed !important;
    transition: background 0.3s !important;
}

.ant-table-tbody > tr > td {
    border-bottom: 1px solid #e0efff !important;
    border-right: 1px solid #e0efff !important;
    border-left: 1px solid #e0efff !important;
    transition: background 0.3s !important;
}

.LightSky.ant-table table {
    width: 100%;
    text-align: left;
    border-radius: 2px 2px 0 0;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #acd9ff;
    border-right: none;
}

.LightBlue table > thead > tr > th {
    border-top-left-radius: 2px;
    background-color: #d3fdff !important;
    color: #437f85 !important;
    border-bottom: 1px solid #d3efff !important;
    padding: 6px 7px;
    font-size: 13px;
}

/* LightOrange - สำหรับตารางรายชื่อสำรอง */
.LightOrange table > thead > tr > th {
    border-top-left-radius: 2px;
    background-color: #cdd6fd !important;
    color: #29295f !important;
    border-bottom: 1px solid #cdd6fd !important;
    padding: 6px 7px;
    font-size: 13px;
}

.LightOrange.ant-table table {
    width: 100%;
    text-align: left;
    border-radius: 2px 2px 0 0;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #cdd6fd;
    border-right: none;
}

.LightOrange .ant-table-tbody > tr > td {
    border-bottom: 1px solid #cdd6fd !important;
    border-right: 1px solid #cdd6fd !important;
}

/* LightPink - สำหรับตารางรายชื่อผู้สละสิทธิ์ */
.LightPink table > thead > tr > th {
    border-top-left-radius: 2px;
    background-color: #dcdfe5 !important;
    color: #535359 !important;
    border-bottom: 1px solid #c0c5cf !important;
    padding: 6px 7px;
    font-size: 13px;
}

.LightPink.ant-table table {
    width: 100%;
    text-align: left;
    border-radius: 2px 2px 0 0;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #c0c5cf;
    border-right: none;
}

.LightPink .ant-table-tbody > tr > td {
    border-bottom: 1px solid #c0c5cf !important;
    border-right: 1px solid #c0c5cf !important;
}

table {
    border-collapse: collapse;
    width: 100%;
}

.table-border {
    border: 1px solid #939599;
    text-align: center;
    padding: 5px;
}

.floating-label-wrapper > .ant-floating-label-wrapper {
    padding-top: 12px !important;
}

.shrink-form-item .ant-form-item-control-input {
    padding-top: 12px !important;
}
/*.ant-form-item-control-input.ant-floating-label-wrapper {
    padding-top: 4px !important;
}*/
.floating-label-wrapper > .ant-picker.ant-floating-label-wrapper {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.floating-label-wrapper > .ant-select.ant-floating-label-wrapper {
    padding-top: 1px !important;
    padding-bottom: 8px !important;
}
/* เพิ่มใหม่ ต่อจากกฎ .floating-label-wrapper .ant-select .ant-select-selector
   ช่องเลือกหลายค่าต้องสูงตามจำนวน tag ไม่งั้น tag แถวที่สองจะล้นออกนอกกรอบ
   .ant-select-multiple เป็นคลาสที่ AntDesign ใส่ให้เองเมื่อ Mode="multiple" */
.floating-label-wrapper .ant-select-multiple .ant-select-selector {
    height: auto !important;
    min-height: var(--fl-field-h);
    padding-top: 3px;
    padding-bottom: 3px;
}

/* tag ยาว ๆ อย่าง "กฎหมายเปรียบเทียบ (Comparative Law)" ให้ตัดบรรทัดได้ ไม่ดันขอบ */
.floating-label-wrapper .ant-select-multiple .ant-select-selection-item {
    max-width: 100%;
    height: auto;
    white-space: normal;
    line-height: 1.6;
}
.mud-alert-filled-error {
    color: #a72c2c !important;
    font-weight: 500;
    background-color: #ffcccc !important;
    border: 1px solid #ff9595;
}

.page-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 24px;
}

.status-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.status-badge {
    padding: 4px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: white;
    font-size: 14px;
}

.status-arrow {
    color: #999;
}

.status-badge.active {
    background: #e6f7ff;
    border-color: #1890ff;
    color: #1890ff;
}

.content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.document-list {
    background: white;
}

.section-title {
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
    padding: 16px;
    background: #EDF7ED;
    border-radius: 8px;
    margin-bottom: 16px;
    color: #1E4620;
}

    .section-title.warning {
        background: #fffbf0;
        color: #fa8c16;
    }

.warning-text {
    font-size: 13px;
    color: #666;
    padding: 0 16px 8px;
}

.doc-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
}

    .doc-item:last-child {
        border-bottom: none;
    }

.doc-code {
    font-weight: 500;
    margin-right: 8px;
}

.upload-area {
    background: white;
    border: 2px dashed #d9d9d9;
    border-radius: 8px;
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    cursor: pointer;
    transition: all 0.3s;
}

    .upload-area:hover {
        border-color: #1890ff;
        background: #fafafa;
    }

    .upload-area.drag-over {
        border-color: #1890ff;
        background: #e6f7ff;
    }

.upload-icon {
    font-size: 48px;
    color: #1890ff;
    margin-bottom: 16px;
}

.upload-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

.upload-hint {
    font-size: 13px;
    color: #999;
}

.submit-btn {
    margin-top: 24px;
}

.uploaded-files {
    margin-top: 16px;
    width: 100%;
}

/* .file-item / .file-name / .file-size รวมไว้ที่ส่วนไฟล์แนบด้านล่าง
   เดิมประกาศซ้ำสองที่ ทำให้ค่าที่ใช้จริงเป็นค่าผสมของทั้งสองชุด
   ถ้าสองจุดต้องการหน้าตาต่างกันจริง ต้องแยกชื่อคลาสใน markup
   ไม่ใช่ประกาศ selector เดิมซ้ำ */

@media (max-width: 768px) {
    .content-wrapper {
        grid-template-columns: 1fr;
    }
}

.attachment-container {
    padding: 20px;
}

.attachment-header {
    font-size: 16px;
    font-weight: 500;
}

.file-list-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 500;
    color: #595959;
}

.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #f5f5f5;
    border-radius: 4px;
    margin-bottom: 8px;
}

.file-info {
    display: flex;
    align-items: center;
}

.file-name {
    font-size: 14px;
    color: #1890ff;
    text-decoration: none;
    font-weight: 500;
}

    .file-name:hover {
        text-decoration: underline;
    }

.file-meta {
    display: flex;
    align-items: center;
    color: #8c8c8c;
    font-size: 12px;
    margin-top: 4px;
    margin-left: 28px;
}

.file-size {
    font-size: 12px;
    color: #999;
    margin-left: 8px;
    margin-right: 8px;
}

.file-actions {
    display: flex;
    gap: 8px;
}

.empty-state {
    padding: 40px 20px;
}

.announcement-item {
    padding: 16px;
}

.announcement-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.announcement-title {
    font-size: 16px;
    font-weight: 500;
}

.announcement-date {
    display: flex;
    align-items: center;
    color: #8c8c8c;
    font-size: 14px;
    margin-left: 28px;
}

.seach-input {
    position: absolute;
    left: 12px;
    background: white;
    padding: 0 6px;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.45);
    z-index: 1000;
    color: rgb(12 86 151 / 79%);
    z-index: 1000;
    font-weight: bold;
}

.select-fillter {
    position: absolute;
    top: 9px;
    background: white;
    padding: 0 6px;
    color: rgba(0, 0, 0, 0.45);
    z-index: 1000;
    color: rgb(12 86 151 / 79%);
    z-index: 1000;
    font-weight: bold;
}

.select-fillter-payment {
    position: absolute;
    top: 9px;
    background: white;
    padding: 0 6px;
    color: rgba(0, 0, 0, 0.45);
    z-index: 1000;
    color: rgb(12 86 151 / 79%);
    z-index: 1000;
    font-weight: bold;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: #333;
}

.form-input {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    font-family: 'Sarabun', Arial, sans-serif;
    border: 1px solid #ced4da;
    border-radius: 4px;
    outline: none;
    transition: all 0.3s ease;
    background: white;
}
/*.floating-label-wrapper{
    padding-top: 12px !important;
}

.shrink-form-item .ant-form-item-control-input {
    padding-top: 12px !important;
}*/
/*.ant-form-item-control-input.ant-floating-label-wrapper {
    padding-top: 4px !important;
}*/


.floating-label-wrapper > div.show {
    padding: 5px !important;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

.floating-label-wrapper > .ant-floating-label-wrapper {
    padding-top: 12px !important;
}

.shrink-form-item > div {
    padding-top: 2px !important;
}

.selectedRoundInOneDay {
    display: inline;
    padding-bottom: 4px;
    padding-right: 4px;
    border: 1px solid #afdffb;
    border-radius: 5px;
    background: #dafeff;
}

.btn-Search {
    background-color: #a69df9;
    color: white;
}

    .btn-Search:hover {
        background-color: #877de5;
        color: white;
    }

.btn-add {
    background-color: #50b0ff;
    color: white;
}

    .btn-add:hover {
        background-color: #3690d9;
        color: white;
    }

/* ============================================================
   PSU TABLE — ใช้ร่วมกับ AntDesign Blazor Table
   ไฟล์: wwwroot/css/psu-table.css
 
   *** อ่านก่อนใช้ ***
   การทำให้ตารางเลื่อนได้มี 2 วิธี และ "ห้ามใช้ซ้อนกัน"
   เพราะจะได้สกอร์ลบาร์ 2 ชั้น ผู้ใช้เลื่อนตัวนอกแล้วนึกว่าตารางไม่เลื่อน
 
     วิธี A (แนะนำ) — ให้ AntDesign จัดการเอง: ใส่ ScrollX / ScrollY ที่ <Table>
         <div class="psu-table">
             <Table ScrollX="1500" ScrollY="300" ...>
         </div>
       ห้ามมี .psu-table__scroll
 
     วิธี B — ทำสกอร์ลเอง (ใช้เมื่อไม่อยากใส่ ScrollX):
         <div class="psu-table psu-table--own-scroll">
             <div class="psu-table__scroll">
                 <Table ...>
             </div>
         </div>
 
   ไฟล์นี้ให้เรื่อง "ข้อความในเซลล์" เป็นหลัก (ตัดบรรทัด + Tag)
   ซึ่งจำเป็นทั้งสองวิธี
   ============================================================ */

.psu-table {
    --pt-min-w: 1000px; /* ใช้เฉพาะวิธี B */
}

    /* ============================================================
   1) ตัดบรรทัดในเซลล์
   ============================================================ */

    .psu-table .ant-table-thead > tr > th,
    .psu-table .ant-table-tbody > tr > td {
        /* ถ้าไม่ใส่ ค่า Width ที่ระบุจะเป็น "ความกว้างเนื้อหา" ไม่รวม padding
       คอลัมน์จริงจะกว้างกว่าที่ตั้งไว้เท่า padding ซ้าย+ขวา
       (วัดแล้ว: ตั้ง 110px ได้จริง 127px เพราะ padding 8px สองข้าง) */
        box-sizing: border-box;
        white-space: normal;
        word-break: normal;
        hyphens: none;
        vertical-align: top;
    }

    /* หัวตาราง — ใช้แค่ break-word ห้ามใช้ anywhere
   หัวคอลัมน์แคบ ๆ อย่าง "ไฟล์" / "ดำเนินการ" ถ้าเจอ anywhere จะถูกตัด
   ทีละตัวอักษร (ไ / ฟ / ล์) หัวตารางจะสูงผิดปกติ (วัดได้ 99px → 143px)
   break-word ปล่อยให้ Chromium ตัดตามขอบเขตคำไทย ("ดำเนิน / การ") */
    .psu-table .ant-table-thead > tr > th {
        overflow-wrap: break-word;
    }

    /* เนื้อตาราง — ใช้ anywhere ได้ เพราะข้อความยาวมากและตัดตรงไหนก็รับได้ */
    .psu-table .ant-table-tbody > tr > td {
        overflow-wrap: break-word;
        overflow-wrap: anywhere;
    }

        /* ลูกในเซลล์ที่เป็น flex item ต้อง min-width:0 ไม่งั้นยุบไม่ลงแล้วดันเซลล์ล้น */
        .psu-table .ant-table-tbody > tr > td > *,
        .psu-table .ant-table-tbody > tr > td .txtData {
            min-width: 0;
            max-width: 100%;
            overflow-wrap: anywhere;
        }

    /* ============================================================
   2) Tag ของ AntDesign — ต้นเหตุหลักที่คอลัมน์เพี้ยน
   ============================================================
   ตรวจจาก antd.css v4.24.16 (.ant-tag) ของจริง:
       display: inline-block;
       white-space: nowrap;      ← ตัวนี้ทำให้ Note ยาวไม่ยอมขึ้นบรรทัดใหม่
       line-height: 20px;
       padding: 0 7px;
       margin-right: 8px;
 
   nowrap อยู่ที่ตัว .ant-tag เอง จึงชนะกฎ white-space:normal ที่ใส่ไว้ที่ <td>
   ข้อความยาว ๆ จึงเป็นบรรทัดเดียวยาวไม่จำกัด แล้วล้นออกไปทับคอลัมน์ข้าง ๆ
   (วัดได้: คอลัมน์กว้าง 210px แต่ Tag กว้าง 310px = ล้นออกขวา 133px)
 
   selector เขียนคู่กับ .ant-table ด้วย เพื่อให้ทำงานแม้ลืมครอบ div.psu-table
   (เป็นสาเหตุที่เจอบ่อยที่สุดว่า "ใส่ CSS แล้วแต่ไม่มีผล") */
    .psu-table .ant-tag,
    .ant-table .ant-tag {
        /* inline-block ไม่ใช่ inline-flex
       inline-flex ทำให้ข้อความกลายเป็น anonymous flex item ซึ่งขึ้นบรรทัด
       ใหม่ "ใต้" ไอคอนทั้งก้อน Tag จึงสูงกว่าที่ควร (วัดได้ 60px เทียบกับ 42px)
       inline-block ปล่อยให้ข้อความไหลต่อจากไอคอนตามปกติ เตี้ยกว่าและหน้าตาใกล้ antd เดิม */
        display: inline-block;
        max-width: 100%;
        white-space: normal; /* ทับ nowrap ของ antd */
        overflow-wrap: break-word;
        overflow-wrap: anywhere; /* จำเป็น — ข้อความไทยยาวติดกันไม่มีช่องว่างให้ตัด */
        word-break: normal; /* ห้าม break-all จะตัดมั่วอ่านไม่รู้เรื่อง */
        height: auto; /* antd ตั้ง line-height:20px + height:auto ไว้ */
        line-height: 1.5; /* 20px แน่นเกินไปเมื่อขึ้นหลายบรรทัด */
        padding-top: 2px;
        padding-bottom: 2px;
        text-align: left;
        vertical-align: top;
    }

        /* Tag ที่สั้นและไม่ควรตัดบรรทัด เช่น "ต.เลขที่ 2819" — ใส่คลาสนี้เพิ่มที่ Tag นั้น */
        .psu-table .ant-tag.psu-tag-nowrap,
        .ant-table .ant-tag.psu-tag-nowrap {
            white-space: nowrap;
        }

/* ============================================================
   3) ตัวช่วยระดับข้อความ
   ============================================================ */

/* ก้อนที่ห้ามตัดกลาง — ช่วงวันที่ / รหัส / ตัวเลข */
.psu-nowrap {
    white-space: nowrap;
}

/* จำกัดจำนวนบรรทัด — ใส่ title="ข้อความเต็ม" ด้วย เพราะ line-clamp ตัดข้อความหายจริง */
.psu-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.psu-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* ============================================================
   4) วิธี B เท่านั้น — ทำสกอร์ลเอง
   กฎในบล็อกนี้ทำงานเมื่อมี .psu-table--own-scroll ที่ตัวนอก
   จึงไม่ไปชนกับ ScrollX/ScrollY ของ AntDesign
   ============================================================ */

.psu-table--own-scroll .psu-table__scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

    .psu-table--own-scroll .psu-table__scroll > .ant-table-wrapper,
    .psu-table--own-scroll .psu-table__scroll > .ant-table {
        min-width: var(--pt-min-w);
    }

/* ล็อกความกว้างคอลัมน์ตามที่ระบุไว้
   ใช้กับวิธี B เท่านั้น เพราะวิธี A AntDesign ใส่ table-layout:fixed
   และ width:{ScrollX} ให้เป็น inline style อยู่แล้ว
   ถ้าใส่ width:100% ทับ จะไปกวนตารางส่วนหัว (ซึ่งไม่มี inline width) */
.psu-table--own-scroll .ant-table table {
    table-layout: fixed;
    width: 100%;
}

/* ============================================================
   5) จอเล็ก
   ============================================================ */

@media (max-width: 900px) {
    .psu-table {
        --pt-min-w: 900px;
    }

        .psu-table .ant-table-thead > tr > th,
        .psu-table .ant-table-tbody > tr > td {
            padding: 10px 8px !important;
            font-size: 13px;
        }
}

@media (max-width: 600px) {
    .psu-table {
        --pt-min-w: 760px;
    }
}

/* ============================================================
   PSU FLOATING LABEL — ข้อความชื่อช่องลอยคาบบนเส้นขอบกล่อง
   ไฟล์: wwwroot/css/psu-floating-label.css
 
   โครงสร้างที่ใช้ (ไม่ต้องแก้ HTML เดิม นอกจากแก้ <lable> เป็น <label>)
 
     <div class="floating-label-wrapper mt-2">
         <label class="floating-label shrink">ค้นหา</label>
         <Input ... />          หรือ  <Select ... />
     </div>
 
   หลักการ:
   วางป้ายชื่อแบบ absolute ที่ top:0 แล้ว translateY(-50%)
   จุดกึ่งกลางของตัวอักษรจึงตรงกับ "เส้นขอบด้านบน" ของกล่องพอดี
   แล้วใช้พื้นหลังสีเดียวกับพื้นหน้า + padding ซ้ายขวา บังเส้นขอบเฉพาะช่วงตัวอักษร
   → ได้เอฟเฟกต์เหมือนเส้นขอบเว้าหลบข้อความ ไม่ใช่กล่องขาวลอยทับ
   ============================================================ */

.floating-label-wrapper {
    --fl-field-h: 40px; /* ความสูงช่องกรอก — ต้องตรงกับ Size ของคอนโทรล */
    --fl-bg: #ffffff; /* ต้องเป็นสีเดียวกับพื้นหลังด้านหลังกล่อง */
    --fl-size: 13.5px; /* ขนาดตัวอักษรป้ายชื่อ */
    --fl-weight: 500;
    --fl-text: #0c5697c9; /* น้ำเงิน PSU โปร่งแสง 79% */
    --fl-text-focus: #0c5697; /* ตอนโฟกัส ใช้สีเดียวกันแบบทึบ */
    --fl-border: #d9d9d9;
    --fl-gap: 6px; /* ระยะเว้นซ้ายขวาของป้ายชื่อ */

    position: relative; /* เดิมใส่เป็น inline style — ย้ายมาไว้ที่นี่ได้เลย */
    display: block;
    /* เผื่อที่ด้านบนให้ป้ายชื่อที่ยื่นขึ้นไปครึ่งตัว ไม่ถูกแถวด้านบนบัง */
    padding-top: 4px;
}

.floating-label {
    position: absolute;
    top: 4px; /* = padding-top ของ wrapper คือแนวเส้นขอบบน */
    left: 10px;
    z-index: 2;
    /* ยกขึ้นครึ่งตัว ให้เส้นขอบผ่ากลางตัวอักษร */
    transform: translateY(-50%);
    /* <label> เป็น inline โดยปริยาย ซึ่ง padding/background จะเพี้ยนเวลาขึ้นบรรทัด
       ต้องบังคับเป็น inline-block */
    display: inline-block;
    margin: 0;
    padding: 0 var(--fl-gap);
    background: var(--fl-bg);
    font-size: var(--fl-size);
    font-weight: var(--fl-weight);
    /* 1.15 ไม่ใช่ 1
       ถ้าใช้ line-height:1 คู่กับ overflow:hidden สระบนกับวรรณยุกต์ไทย
       (ผู้ / สิทธิ์ / ค้น) จะถูกตัดยอด เพราะกล่องเนื้อหาสูงเท่า font-size พอดี
       1.15 ให้ที่พอดีสำหรับสระบน และแถบพื้นหลังยังบางอยู่ (16px)
       ห้ามปล่อยให้ inherit ค่า 1.5715 ของ antd — แถบจะสูง 21px ดูเป็นกล่องลอย */
    line-height: 1.15;
    color: var(--fl-text);
    /* ป้ายชื่อยาวเกินกล่อง ให้ตัดด้วย … ไม่ให้ดันล้นออกไป */
    max-width: calc(100% - 20px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* คลิกทะลุไปโดนช่องกรอกด้านหลัง */
    pointer-events: none;
    transition: color .15s ease;
}

    /* คลาส .shrink ที่โค้ดเดิมใส่ไว้ — คงชื่อไว้เพื่อไม่ต้องแก้ HTML
   ในแบบ "ลอยคาบเส้นขอบ" ตลอดเวลา ไม่ต้องขยับอะไรเพิ่ม */
    .floating-label.shrink {
        top: 4px;
        font-size: var(--fl-size);
    }

    /* ป้ายชื่อที่บังคับกรอก — ดาวแดงต่อท้าย */
    .floating-label .required,
    .floating-label-Rank .required {
        color: #ff4d4f;
        font-weight: 700;
        margin-left: 2px;
    }

/* เปลี่ยนสีป้ายชื่อตามโฟกัสของช่องกรอกข้างใน */
.floating-label-wrapper:focus-within > .floating-label,
.floating-label-wrapper:focus-within > .floating-label-Rank {
    color: var(--fl-text-focus);
}

/* ============================================================
   ให้คอนโทรลของ AntDesign สูงเท่ากันทุกช่องในแถวเดียวกัน
   ไม่งั้นป้ายชื่อของแต่ละช่องจะอยู่คนละระดับ
   (Input ปกติสูง 32px แต่ Select ที่ใส่ Size="InputSize.Large" สูง 40px)
   ============================================================ */

.floating-label-wrapper .ant-input,
.floating-label-wrapper .ant-input-affix-wrapper,
.floating-label-wrapper .ant-select .ant-select-selector,
.floating-label-wrapper .ant-picker {
    box-sizing: border-box;
    width: 100%;
    min-height: var(--fl-field-h);
    height: var(--fl-field-h);
    border-radius: 6px;
    border-color: var(--fl-border);
}

    /* input ที่อยู่ในตัวห่อ (กรณีใช้ AllowClear) — ถอดขอบ/ความสูงซ้อนออก
   ไม่งั้นจะได้ขอบสองชั้นและป้ายชื่อจะไปคาบผิดเส้น */
    .floating-label-wrapper .ant-input-affix-wrapper > .ant-input,
    .floating-label-wrapper .ant-input-affix-wrapper input.ant-input {
        height: auto;
        min-height: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }

/* จัดข้อความใน Select ให้อยู่กลางแนวตั้งพอดีความสูงใหม่ */
.floating-label-wrapper .ant-select-single .ant-select-selector .ant-select-selection-item,
.floating-label-wrapper .ant-select-single .ant-select-selector .ant-select-selection-placeholder,
.floating-label-wrapper .ant-select-single .ant-select-selector .ant-select-selection-search-input {
    line-height: calc(var(--fl-field-h) - 2px);
    height: calc(var(--fl-field-h) - 2px);
}

/* ป้ายชื่อของช่อง "ลำดับที่" (InputNumber) ในหน้าจัดการผู้สมัคร
   ใช้กฎเดียวกัน แต่คนละชื่อคลาส จึงเขียนคู่ไว้ */
.floating-label-Rank {
    position: absolute;
    top: 4px;
    left: 10px;
    z-index: 2;
    transform: translateY(-50%);
    display: inline-block;
    margin: 0;
    padding: 0 var(--fl-gap, 6px);
    background: var(--fl-bg, #ffffff);
    font-size: var(--fl-size, 13.5px);
    font-weight: var(--fl-weight, 500);
    line-height: 1.15;
    color: var(--fl-text, #0c5697c9);
    max-width: calc(100% - 20px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.floating-label-wrapper .ant-input-number {
    box-sizing: border-box;
    width: 100%;
    height: var(--fl-field-h);
    border-radius: 6px;
    border-color: var(--fl-border);
}

.floating-label-wrapper .ant-input-number-input {
    height: calc(var(--fl-field-h) - 2px);
}

/* ============================================================
   ถ้าช่องนั้นวางอยู่บนพื้นที่ไม่ใช่สีขาว (เช่นการ์ดสีฟ้าอ่อน)
   ให้ตั้ง --fl-bg ที่ wrapper ให้ตรงกับพื้นหลังจริง
   เช่น <div class="floating-label-wrapper" style="--fl-bg:#f1eeff">
   ไม่งั้นจะเห็นเป็นแถบขาวคาดอยู่บนเส้นขอบ
   ============================================================ */

.psu-sgrid {
    --sg-label-w: 118px; /* ความกว้าง label — เท่ากันทุกช่อง */
    --sg-field-h: 40px; /* ความสูงช่องกรอก */
    --sg-btn-w: 116px;
    --sg-gap: 10px; /* ระยะ label ↔ ช่องกรอก */
    --sg-border: #d9d9d9;
    --sg-label-color: #3f4a56;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
        "f1 f2 f3"
        "f4 .  btn";
    gap: 14px 18px;
    align-items: center;
}

    /* กำหนดตำแหน่งตรง ๆ ไม่ปล่อยให้ auto-placement จัดเอง
   จึงไม่มีทางเลื่อนแถวผิดเวลามีช่องถูกซ่อนตามสิทธิ์ */
    .psu-sgrid > .psu-sfld-1 {
        grid-area: f1;
    }

    .psu-sgrid > .psu-sfld-2 {
        grid-area: f2;
    }

    .psu-sgrid > .psu-sfld-3 {
        grid-area: f3;
    }

    .psu-sgrid > .psu-sfld-4 {
        grid-area: f4;
    }

    /* ปุ่มค้นหา — เป็นลูกตรง ๆ ของกริด ห้ามมี div ครอบ */
    .psu-sgrid > .mud-button-root {
        grid-area: btn;
        justify-self: end;
        min-width: var(--sg-btn-w);
        height: var(--sg-field-h);
        text-transform: none;
        border-radius: 8px;
        white-space: nowrap;
    }

/* ===== แต่ละช่อง: label ซ้าย ช่องกรอกขวา ===== */
.psu-sfield {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--sg-gap);
    min-width: 0;
}

.psu-slabel {
    flex: 0 0 var(--sg-label-w);
    width: var(--sg-label-w);
    margin: 0;
    text-align: right;
    font-size: 14px;
    line-height: 1.3;
    color: var(--sg-label-color);
    /* label ไทยยาว ๆ เช่น "ค้นหาภายในวิทยาเขต:" ต้องยอมให้ตัดบรรทัดได้
       ไม่งั้นจะดัน label ให้กว้างเกินค่าที่ตั้งไว้ แล้วช่องกรอกเลื่อนไม่ตรงกัน */
    overflow-wrap: anywhere;
    word-break: normal;
}

/* ===== คอนโทรล AntDesign ในแถวแนวนอน ===== */
.psu-sfield > .ant-select,
.psu-sfield > .ant-input,
.psu-sfield > .ant-input-affix-wrapper,
.psu-sfield > .ant-picker {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important; /* ทับ width:100% ที่ธีมอื่นอาจตั้งไว้ */
}

.psu-sgrid .ant-select-selector,
.psu-sgrid .ant-picker {
    box-sizing: border-box;
    min-height: var(--sg-field-h) !important;
    height: var(--sg-field-h) !important;
    border-radius: 6px !important;
    border-color: var(--sg-border) !important;
    display: flex;
    align-items: center;
}

/* Input ที่ยืนเดี่ยว — ขอบอยู่ที่ตัวมันเอง */
.psu-sgrid .ant-input {
    box-sizing: border-box;
    min-height: var(--sg-field-h) !important;
    height: var(--sg-field-h) !important;
    padding: 0 11px !important;
    border: 1px solid var(--sg-border) !important;
    border-radius: 6px !important;
    background: #fff;
}

/* ตัวห่อ (มีเมื่อใช้ AllowClear) — ขอบอยู่ที่ตัวห่อ */
.psu-sgrid .ant-input-affix-wrapper {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    min-height: var(--sg-field-h) !important;
    height: var(--sg-field-h) !important;
    padding: 0 11px !important;
    border: 1px solid var(--sg-border) !important;
    border-radius: 6px !important;
    background: #fff;
}

    /* input ข้างในตัวห่อ — ถอดขอบ/ความสูงซ้อนออก ไม่งั้นได้ขอบสองชั้น
   และ input จะดันขอบล่าง/ขวาทะลุออกไป เห็นเป็น "เส้นขอบไม่เต็ม" */
    .psu-sgrid .ant-input-affix-wrapper > .ant-input,
    .psu-sgrid .ant-input-affix-wrapper input.ant-input {
        flex: 1 1 auto;
        min-width: 0;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .psu-sgrid .ant-input-affix-wrapper > .ant-input-suffix {
        flex: 0 0 auto;
        margin-left: 6px;
    }

/* จัดตัวอักษรใน Select ให้อยู่กลางแนวตั้งพอดีความสูงใหม่ */
.psu-sgrid .ant-select-single .ant-select-selector .ant-select-selection-item,
.psu-sgrid .ant-select-single .ant-select-selector .ant-select-selection-placeholder,
.psu-sgrid .ant-select-single .ant-select-selector .ant-select-selection-search-input {
    line-height: calc(var(--sg-field-h) - 2px) !important;
    height: calc(var(--sg-field-h) - 2px) !important;
}

/* ช่องที่ถูกล็อกตามสิทธิ์ผู้ใช้ ให้เห็นชัดว่าแก้ไม่ได้ */
.psu-sgrid .ant-select-disabled .ant-select-selector {
    background: #f4f6f8 !important;
    color: #9aa4af !important;
}

/* ============================================================
   responsive
   ลำดับการยอมถอย: ย่อ label → ปุ่มลงบรรทัดของตัวเอง
   → label ขึ้นไปอยู่บน + เหลือ 2 คอลัมน์ → คอลัมน์เดียว

   *** ข้อควรระวัง ***
   เมื่อประกาศ grid-template-areas ไว้ จำนวนคอลัมน์ถูกล็อกตามผัง
   การแก้แค่ grid-template-columns ใน media query จะไม่มีผล
   ต้องแก้ grid-template-areas ควบคู่กันทุกจุด
   ============================================================ */

@media (max-width: 1400px) {
    .psu-sgrid {
        --sg-label-w: 96px;
        --sg-btn-w: 108px;
        gap: 14px 14px;
    }
}

@media (max-width: 980px) {
    /* label ขึ้นไปอยู่บนช่องกรอก และเหลือ 2 คอลัมน์
       ปุ่มลงมาอยู่บรรทัดของตัวเอง ชิดขวา */
    .psu-sgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "f1 f2"
            "f3 f4"
            "btn btn";
        align-items: end;
    }

    .psu-sfield {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .psu-slabel {
        flex: 0 0 auto;
        width: auto;
        text-align: left;
        font-size: 13px;
    }

    .psu-sfield > .ant-select,
    .psu-sfield > .ant-input,
    .psu-sfield > .ant-input-affix-wrapper,
    .psu-sfield > .ant-picker {
        width: 100% !important;
    }

    .psu-sgrid > .mud-button-root {
        padding-left: 18px;
        padding-right: 18px;
    }
}

@media (max-width: 600px) {
    .psu-sgrid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "f1"
            "f2"
            "f3"
            "f4"
            "btn";
    }

        .psu-sgrid > .mud-button-root {
            justify-self: stretch;
            width: 100%;
        }
}
/* ============================================================
   แถบปุ่มท้ายฟอร์ม
   ยกเลิกชิดซ้าย แยกออกจากปุ่มบันทึกชัดเจน กันกดพลาด
   ปุ่มหลักอยู่ขวาสุดตามทิศทางการอ่าน
   ============================================================ */
.psu-formbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid #e6e8eb;
}

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

.psu-formbar .mud-button-root {
    text-transform: none;
    border-radius: 8px;
    min-height: 40px;
}

/* ยกเลิกเป็นปุ่มรอง ไม่ควรเด่นเท่าปุ่มบันทึก */
.psu-formbar__cancel {
    border: 1px solid #d4d4d4 !important;
    color: #6b7681 !important;
    background: #ffffff !important;
}

    .psu-formbar__cancel:hover {
        background: #f4f6f8 !important;
    }

/* จอแคบ — เรียงลงมา ปุ่มบันทึกอยู่บนเพราะใช้บ่อยกว่า */
@media (max-width: 640px) {
    .psu-formbar {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .psu-formbar__primary {
        flex-direction: column;
        align-items: stretch;
    }
}
/* ============================================================
   ช่องเลือกตำแหน่ง — ReportForm

   โครงสร้าง: เส้นใต้อยู่ที่แถวที่มีค่ากับปุ่มล้าง ส่วนปุ่มค้นหา
   อยู่นอกแถวนั้น ปุ่มล้างจึงชิดปลายเส้นพอดี และปุ่มค้นหาอยู่
   ตำแหน่งเดิมเสมอไม่ว่าชื่อตำแหน่งจะยาวแค่ไหน
   ============================================================ */
.psu-posfield {
    --pf-accent: #5b3ad6;
    --pf-line: #d9dde2;
    --pf-placeholder: #a7b0ba;
    --pf-pill-bg: #f1eeff;
    --pf-pill-line: #c3b3f3;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 8px;
}

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

.psu-posfield__label {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    color: #6b7681;
    margin-bottom: 2px;
    line-height: 1.3;
}

/* เส้นใต้อยู่ที่แถวนี้ ปุ่มล้างจึงจบที่ปลายเส้น */
.psu-posfield__line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 4px 0 6px;
    border-bottom: 1.5px solid var(--pf-line);
    transition: border-color .15s ease;
}

.psu-posfield__field:hover .psu-posfield__line {
    border-bottom-color: var(--pf-accent);
}

.psu-posfield__value {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .psu-posfield__value.is-empty {
        color: var(--pf-placeholder);
        font-style: italic;
    }

/* ปุ่มล้าง — MudIconButton ต้อง override ขนาด default ของมัน */
.psu-posfield .psu-posfield__clear.mud-icon-button {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    min-width: 22px;
    padding: 0;
    border-radius: 50%;
    background: #f0f2f4;
    color: #9aa4af;
    transition: background-color .15s ease, color .15s ease;
}

    .psu-posfield .psu-posfield__clear.mud-icon-button:hover {
        background: #ffe3e0;
        color: #c5221f;
    }

.psu-posfield .psu-posfield__clear .mud-icon-root {
    width: 14px !important;
    height: 14px !important;
    font-size: 14px !important;
}

/* ปุ่มค้นหา — เม็ดยาสีอ่อน อยู่นอกเส้นใต้ ชิดขวาเสมอ */
.psu-posfield .psu-posfield__search.mud-button-root {
    flex: 0 0 auto;
    height: 34px;
    margin-bottom: 4px;
    padding: 0 16px;
    border-radius: 999px;
    text-transform: none;
    white-space: nowrap;
    font-size: 13.5px;
    font-weight: 600;
    background: var(--pf-pill-bg);
    color: var(--pf-accent);
    border: 1.5px solid var(--pf-pill-line);
}

    .psu-posfield .psu-posfield__search.mud-button-root:hover {
        background: #e4dcff;
    }

.psu-posfield .psu-posfield__search .mud-icon-root {
    width: 16px !important;
    height: 16px !important;
    font-size: 16px !important;
}

/* จอแคบ — ปุ่มลงมาอยู่บรรทัดของตัวเองชิดขวา */
@media (max-width: 520px) {
    .psu-posfield {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

        .psu-posfield .psu-posfield__search.mud-button-root {
            align-self: flex-end;
            margin-bottom: 0;
        }
}


/* ============================================================
   ปุ่มค้นหาตำแหน่งตอนถูกปิด
   ให้ดูเทาจริง ไม่ใช่แค่กดไม่ได้ ผู้ใช้จะได้รู้ตั้งแต่เห็น
   ============================================================ */
.psu-posfield .psu-posfield__search.mud-button-root:disabled,
.psu-posfield .psu-posfield__search.mud-button-root.mud-button-disabled {
    background: #f4f6f8;
    color: #9aa4af;
    border-color: #e3e7eb;
    box-shadow: none;
}

/* ข้อความบอกว่ายังเลือกส่วนงานไม่ครบ */
.psu-posfield__warn {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 8px;
    font-size: 12px;
    color: #a86a00;
    line-height: 1.4;
}

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

/* ============================================================
   หัวข้อหมวดในฟอร์ม พร้อมปุ่มเปลี่ยนสังกัด
   ปุ่มดันไปชิดขวาด้วย justify-content: space-between

   ใช้ส้มอำพันไม่ใช่ม่วง เพราะม่วงเป็นสีของปุ่มค้นหาตำแหน่ง
   ถ้าใช้สีเดียวกันผู้ใช้จะเข้าใจว่าเป็นปุ่มประเภทเดียวกัน
   ทั้งที่อันหนึ่งคือค้นหา อีกอันคือปลดล็อกซึ่งล้างข้อมูลที่จัดไว้
   ============================================================ */
.psu-sechead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.psu-sechead__title {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    flex: 0 0 auto;
}

/* ปุ่มเปลี่ยนสังกัด — ส้มอำพัน แยกจากม่วงของปุ่มค้นหาตำแหน่ง */
.psu-sechead .psu-sechead__btn.mud-button-root {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    text-transform: none;
    font-size: 12.5px;
    font-weight: 600;
    color: #a86a00;
    background: #fff4e0;
    border: 1px solid #f0c678;
}

    .psu-sechead .psu-sechead__btn.mud-button-root:hover {
        background: #ffe9c7;
    }

.psu-sechead .psu-sechead__btn .mud-icon-root {
    color: #a86a00;
    width: 15px !important;
    height: 15px !important;
    font-size: 15px !important;
}

/* ============================================================
   คอลัมน์ชื่อ-สกุล พร้อมแท็กลำดับ
   ยุบคอลัมน์ "ลำดับ" เข้ามาอยู่ใต้ชื่อ ประหยัดพื้นที่หนึ่งคอลัมน์
   และทำให้ลำดับผูกกับคนชัดเจนกว่าแยกคนละคอลัมน์
   ============================================================ */
.psu-nm {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
}

.psu-nm__name {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.35;
}

.psu-nm__rank {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    background: #e6f4ff;
    border: 1px solid #91caff;
    color: #0958d9;
}

/* ลำดับสำรอง — เทาเพื่อไม่ให้เด่นเท่าลำดับในโควตา */
.psu-nm__rank--reserve {
    background: #f4f5f7;
    border-color: #dfe3e8;
    color: #5b6670;
}

/* ============================================================
   สถานะแก้ไขไม่ได้ — มีผู้รายงานตัวกรอกข้อมูลเข้ามาแล้ว
   ต่างจากสถานะล็อกปกติตรงที่ไม่มีปุ่มปลดล็อก
   จึงใช้เทาแทนส้มอำพัน เพื่อไม่ให้ผู้ใช้เข้าใจว่ากดได้
   ============================================================ */
.psu-sechead__frozen {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    background: #f4f5f7;
    border: 1px solid #dfe3e8;
    color: #5b6670;
    cursor: default;
}

    .psu-sechead__frozen .mud-icon-root {
        color: #8b96a2;
        width: 15px !important;
        height: 15px !important;
        font-size: 15px !important;
    }

.psu-posfield__warn--frozen {
    color: #5b6670;
}

    .psu-posfield__warn--frozen .mud-icon-root {
        color: #8b96a2;
    }
/* ลำดับผู้สละสิทธิ์ — แดงอ่อน บอกว่าหลุดจากกระบวนการแล้ว
   แต่ยังต้องอ่านออกว่าเคยอยู่ลำดับไหน เพราะมีผลต่ออัตราที่ว่าง */
.psu-nm__rank--waived {
    background: #fff1f0;
    border-color: #ffccc7;
    color: #a8071a;
}
/* ============================================================
   แถบแจ้งว่าฟอร์มถูกล็อกเพราะนำเข้าข้อมูลไปแล้ว
   ใช้เทาไม่ใช่แดง เพราะไม่ใช่ข้อผิดพลาด เป็นสถานะปกติของงานที่เสร็จแล้ว
   ============================================================ */
.psu-formlock {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.45;
    background: #f4f5f7;
    border: 1px solid #dfe3e8;
    color: #5b6670;
}

    .psu-formlock .mud-icon-root {
        flex: 0 0 auto;
        color: #8b96a2;
        width: 16px !important;
        height: 16px !important;
        font-size: 16px !important;
        margin-top: 1px;
    }
/* แถบแจ้งกรณีตำแหน่งมาจากระบบสมัครงานออนไลน์
   ใช้ฟ้าไม่ใช่เทา เพราะเป็นการบอกที่มาของข้อมูล ไม่ใช่สถานะงานที่จบแล้ว */
.psu-formlock--online {
    background: #e6f4ff;
    border-color: #91caff;
    color: #0958d9;
}

    .psu-formlock--online .mud-icon-root {
        color: #1677ff;
    }
/* ป้ายบอกว่าตำแหน่งถูกล็อกเพราะนำเข้าข้อมูลแล้ว
   เทาเพราะไม่ใช่ข้อผิดพลาด เป็นสถานะปกติของงานที่เดินจบไปแล้ว */
.psu-lockchip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    white-space: nowrap;
    background: #f4f5f7;
    border: 1px solid #dfe3e8;
    color: #5b6670;
}

    .psu-lockchip .mud-icon-root {
        width: 13px !important;
        height: 13px !important;
        font-size: 13px !important;
        color: #8b96a2;
    }
/* ═══════════════════════════════════════════════════════════
   แท็กเงื่อนไขค้นหา (ReportIndex) — วางต่อท้ายไฟล์ CSS เดียวกับที่มี .psu-filter อยู่
   ═══════════════════════════════════════════════════════════ */

/* แถบแท็ก — อยู่ระหว่าง __bar กับ __body */
.psu-filter__chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 16px;
    border-top: 1px dashed #d6e8fa;
    background-color: #f7fbff; /* ฟ้าอ่อนมาก แยกจากแถบหัวสีม่วง */
}

.psu-filter__chips-label {
    font-size: 13px;
    color: #6b6f85;
    margin-right: 4px;
    white-space: nowrap;
}

/* แท็ก 1 ตัว */
.psu-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    padding: 1px 4px 1px 10px;
    border: 1px solid #91caff; /* ฟ้าพาสเทล — ไม่กลืนกับสีม่วงของแถบด้านบน */
    border-radius: 999px;
    background-color: #e6f4ff;
    color: #0950a8; /* ตัวอักษรน้ำเงินเข้ม อ่านชัดบนพื้นฟ้าอ่อน */
    font-size: 13px;
    line-height: 22px;
}

    .psu-chip b {
        font-weight: 600;
    }

/* ชื่อยาวตัดด้วย … (hover ที่แท็กเห็นชื่อเต็มจาก title) */
.psu-chip__val {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ปุ่ม ✕ */
.psu-chip__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

    .psu-chip__x:hover {
        background-color: #bae0ff;
    }

    .psu-chip__x:disabled {
        opacity: .5;
        cursor: default;
    }

    .psu-chip__x .mud-icon-root {
        font-size: 16px;
    }

/* แท็กที่ล็อกตามสิทธิ์ — สีเทา ไม่มี ✕ */
.psu-chip--lock {
    padding-right: 10px;
    border-color: #cfd3dc;
    background-color: #eef0f4;
    color: #5f6474;
}

.psu-chip__icon.mud-icon-root {
    font-size: 15px;
    margin-right: 2px;
}

/* ลิงก์ "ล้างทั้งหมด" */
.psu-filter__chips-clear {
    margin-left: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: #1668dc;
    font: inherit;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

    .psu-filter__chips-clear:disabled {
        opacity: .5;
        cursor: default;
    }

/* ข้อความเตือนในส่วนค้นหา เมื่อเปลี่ยนเงื่อนไขแล้วยังไม่กดค้นหา */
.psu-filter__pending {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 10px;
    border: 1px solid #ffd99a;
    border-radius: 6px;
    background-color: #fff6e5;
    color: #a15c00;
    font-size: 13px;
}
/* ============================================================
   แท็บประวัติการสมัคร (UserIndex) — วางต่อท้าย wwwroot/css/app.css
   เพิ่มกฎใหม่เท่านั้น ไม่ได้แก้กฎเดิม
   จอเล็ก: ซ่อนคำว่า "ข้อมูลการสมัครงานที่" ในชื่อแท็บ
   เหลือ "กำลังดำเนินการ" / "เสร็จสิ้นแล้ว" ไม่ให้ชื่อแท็บตัดเป็นหลายบรรทัด
   ============================================================ */

/* ตัวเลขจำนวนรายการในชื่อแท็บ — อยู่ในบรรทัดเดียวกับชื่อ จึงไม่ถูกขอบแท็บตัด
   สีใช้ตัวแปรสีของ MudBlazor (info = ฟ้า, success = เขียว) ให้ตรงกับ badge เดิม */
.apply-tab-count {
    display: inline-block;
    min-width: 22px;
    margin-left: 6px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    color: #fff;
    vertical-align: middle;
}

.apply-tab-count--active {
    background-color: var(--mud-palette-info);
}

.apply-tab-count--close {
    background-color: var(--mud-palette-success);
}

@media (max-width: 600px) {
    .apply-tab-long {
        display: none;
    }
}

/* ============================================================
   สถานะ "รอชำระเงิน" (ป้ายส้ม) + ลิงก์ "แจ้งชำระเงินตอนนี้"
   ============================================================ */
.apply-badge-wait {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 1px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: #d46b08;
    background-color: #fff7e6;
    border: 1px solid #ffd591;
    white-space: nowrap;
}

.apply-badge-wait__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #fa8c16;
}

.apply-paylink {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #1677ff;
    text-decoration: none;
    white-space: nowrap;
}

    .apply-paylink:hover {
        text-decoration: underline;
    }

/* รายละเอียดตำแหน่งเพิ่มเติม (pos_display) ใต้ชื่อตำแหน่ง */
.apply-pos-display {
    margin: 2px 0;
    font-size: 13px;
    color: #595959;
}

/* ============================================================
   Responsive — ตาราง MudTable ที่ตั้ง Breakpoint="Sm"
   จอแคบกว่า 960px MudBlazor จะแสดงแต่ละแถวเป็นบล็อก (ชื่อคอลัมน์จาก DataLabel อยู่ซ้าย)
   กฎด้านล่างแต่งให้แต่ละรายการเป็นการ์ดแยกกันชัดเจน
   ใช้คลาส apply-table คู่กับ mud-sm-table จึงไม่กระทบตารางอื่นในระบบ
   ============================================================ */
@media (max-width: 959.98px) {
    /* แต่ละรายการเป็นการ์ด มีระยะห่างระหว่างการ์ด */
    .apply-table.mud-sm-table .mud-table-body .mud-table-row {
        margin-bottom: 12px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        overflow: hidden;
    }

    /* ทุกช่องชิดซ้าย (เดิมบางช่องตั้ง text-align:center ไว้แบบ inline จึงต้องใช้ !important) */
    .apply-table.mud-sm-table .mud-table-body .mud-table-cell {
        text-align: left !important;
        padding: 8px 12px !important;
    }

    /* ป้ายสถานะ/ค่าธรรมเนียม ขึ้นบรรทัดใหม่ได้ ไม่ดันการ์ดล้นจอ */
    .apply-table.mud-sm-table .ant-tag {
        white-space: normal;
        margin-bottom: 4px;
    }
}
/* ============================================================
   แท็บประวัติการสมัคร (UserIndex) — วางต่อท้าย wwwroot/css/app.css
   เพิ่มกฎใหม่เท่านั้น ไม่ได้แก้กฎเดิม
   จอเล็ก: ซ่อนคำว่า "ข้อมูลการสมัครงานที่" ในชื่อแท็บ
   เหลือ "กำลังดำเนินการ" / "เสร็จสิ้นแล้ว" ไม่ให้ชื่อแท็บตัดเป็นหลายบรรทัด
   ============================================================ */

/* ตัวเลขจำนวนรายการในชื่อแท็บ — อยู่ในบรรทัดเดียวกับชื่อ จึงไม่ถูกขอบแท็บตัด
   สีใช้ตัวแปรสีของ MudBlazor (info = ฟ้า, success = เขียว) ให้ตรงกับ badge เดิม */
.apply-tab-count {
    display: inline-block;
    min-width: 22px;
    margin-left: 6px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    color: #fff;
    vertical-align: middle;
}

.apply-tab-count--active {
    background-color: var(--mud-palette-info);
}

.apply-tab-count--close {
    background-color: var(--mud-palette-success);
}

@media (max-width: 600px) {
    .apply-tab-long {
        display: none;
    }
}

/* ============================================================
   สถานะ "รอชำระเงิน" (ป้ายส้ม) + ลิงก์ "แจ้งชำระเงินตอนนี้"
   ============================================================ */
.apply-badge-wait {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 1px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: #d46b08;
    background-color: #fff7e6;
    border: 1px solid #ffd591;
    white-space: nowrap;
}

.apply-badge-wait__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #fa8c16;
}

.apply-paylink {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #1677ff;
    text-decoration: none;
    white-space: nowrap;
}

    .apply-paylink:hover {
        text-decoration: underline;
    }

/* ============================================================
   Responsive
   - จอตั้งแต่ 960px: แสดงตาราง (.apply-desktop-only)
   - จอแคบกว่า 960px: แสดงรายการแบบกะทัดรัด (.apply-mobile-only)
   ใช้คลาสของเราเอง ไม่ใช้ d-md-* เพราะหน้านี้มีทั้ง Bootstrap และ MudBlazor
   ซึ่งกำหนด breakpoint "md" ต่างกัน (768px / 960px)
   ============================================================ */
.apply-mobile-only {
    display: none;
}

@media (max-width: 959.98px) {
    .apply-desktop-only {
        display: none;
    }

    .apply-mobile-only {
        display: block;
    }
}

/* ---- รายการ 1 ใบสมัคร (จอเล็ก) ---- */
.apply-mitem {
    padding: 12px 4px;
    border-bottom: 1px solid #eceff3;
}

/* แถวบนสุด: เลขที่สมัคร · วันที่ (ซ้าย) / สถานะ (ขวา) — ถ้ายาวเกินจะตัดลงบรรทัดใหม่และยังชิดขวา */
.apply-mitem__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 10px;
}

.apply-mitem__meta {
    font-size: 12.5px;
    color: #7a8494;
}

    .apply-mitem__meta a {
        font-weight: 600;
    }

.apply-mitem__status {
    margin-left: auto;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    color: #424242;
}

/* ชื่อตำแหน่งได้บรรทัดของตัวเองเต็มความกว้าง จึงไม่ชนกับสถานะ */
.apply-mitem__pos {
    display: block;
    margin-top: 6px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: #1f2a44;
    text-decoration: none;
}

.apply-mitem__seat {
    margin-top: 2px;
    font-size: 12.5px;
    color: #7a8494;
}

    .apply-mitem__seat b {
        color: #424242;
    }

/* แถวล่าง: ลิงก์แจ้งชำระเงิน (ซ้าย) / ปุ่มดำเนินการ (ขวา) */
.apply-mitem__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
}

.apply-mitem .ant-tag {
    white-space: normal;
}
/* =========================================================
   แถบเมนูด้านบน (MainLayout) — แบบ A
   วางต่อท้าย wwwroot/css/app.css (แทนบล็อก psu-appbar ชุดก่อนหน้าทั้งหมด)

   ไฟล์นี้ไม่แตะ สี / เส้นขอบ / ขนาดตัวอักษร ของปุ่มและแท็บ — หน้าตามาจาก MudBlazor + app.css เหมือนเดิม
   ที่ทำมี 4 อย่าง:
     1) ห้ามข้อความในแถบตัดขึ้นบรรทัดใหม่ (ต้นเหตุที่เมนูเละ)
     2) ห้ามรายการใน dropdown ตัดบรรทัด (เดิมเมนูถูกขอบจอบีบจนเหลือคำละบรรทัด)
     3) จอ 760–1365px: ไม่ให้กลุ่มแท็บยืดเต็มที่ว่าง — แต่ละเมนูกว้างเท่าเนื้อหา (เปลี่ยนแค่ระยะห่าง)
     4) ซ่อน/แสดงเมนูตามความกว้างจอ แทน d-none d-md-flex เดิม
     5) ปุ่มเมนูบนแถบ: ตอนชี้เมาส์มีพื้นฟ้าอ่อน + เส้นขอบฟ้า แบบเดียวกับแท็บ "ติดต่อ"
   การย่อข้อความทำใน MainLayout.razor — ตัวเลขจุดเปลี่ยนต้องตรงกับ CompactQuery / IconOnlyQuery
   ========================================================= */

/* 4) แสดงเมนูแบบแถวเดียว (เท่ากับ d-md-flex เดิม แต่เริ่มที่ 760px แทน 960px) */
.psu-appbar .psu-ab-item {
    display: flex !important;
}

    /* 1) ห้ามตัดบรรทัด: ข้อความในแท็บ และข้อความในปุ่มเมนู */
    .psu-appbar .psu-ab-item .mud-tab,
    .psu-appbar .psu-ab-item .mud-button-label {
        white-space: nowrap;
    }

/* 2) dropdown ของเมนูบนแถบ (PopoverClass="psu-ab-pop")
   popover ถูก render ไว้นอก .psu-appbar (ที่ MudPopoverProvider) จึงต้องใช้คลาสของมันเอง
   white-space สืบทอดลงไปทุกรายการ — เมนูจะกว้างตามข้อความยาวสุด */
.psu-ab-pop {
    white-space: nowrap;
}

    /* ชื่อเต็มของผู้ใช้ บนสุดของเมนูผู้ใช้ (แสดงเฉพาะตอนปุ่มถูกย่อ) */
    .psu-ab-pop .psu-ab-pop-head {
        padding: 8px 16px;
        margin-bottom: 4px;
        border-bottom: 1px solid #E3EEF0;
        font-weight: 700;
        color: #0c6487;
    }

/* 3) จอ 760–1365px: แต่ละเมนูกว้างเท่าเนื้อหา ไม่ยืดแบ่งพื้นที่กัน
   เดิมกลุ่มแท็บ (MudTabs) ยืดเต็มที่ว่างแล้วจัดแท็บไว้กลาง — แท็บจึงห่างกันมาก และดันเมนูผู้ใช้ล้นขอบขวา
   (MudBlazor v7.15.0 ตั้ง .mud-tabs-tabbar-content { width: 100%; flex: 1 1 auto } และ .mud-tab { width: 100% }
    ร่วมกับกฎใน app.css ของ .tabMainMenu ถ้ามี) — ทับทุกชั้นให้เป็น auto
   ใช้ !important เพราะต้องชนะกฎใน app.css ที่ไม่รู้ว่ามี !important หรือไม่
   แก้เฉพาะ "ความกว้าง/ระยะห่าง" ไม่แตะสีหรือเส้นขอบ • จอ ≥ 1366px ใช้ค่าเดิมทุกอย่าง */
@media (max-width: 1365.98px) {
    .psu-appbar .psu-ab-item,
    .psu-appbar .psu-ab-item .mud-tabs-tabbar,
    .psu-appbar .psu-ab-item .mud-tabs-tabbar-inner,
    .psu-appbar .psu-ab-item .mud-tabs-tabbar-content,
    .psu-appbar .psu-ab-item .mud-tooltip-root,
    .psu-appbar .psu-ab-item .mud-tab {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* 5) ปุ่มเมนูบนแถบ (ข้อมูลการสมัครงาน / ชื่อผู้ใช้ / เข้าสู่ระบบ) — ตอนชี้เมาส์ให้เหมือนแท็บ "ติดต่อ"
   ค่ายกมาจากกฎแท็บใน CSS ของโปรเจกต์ (.tabMainMenu > .mud-tabs-tabbar .mud-tab:hover):
       background-color: #e2ffff; border-radius: 5px; box-shadow: inset 0 0 0 1px #32c5ff; min-height: 40px;
   ต่างจากกฎปุ่มเดิม (.btnNoBorder > .mud-button-outlined:hover) ตรงที่:
     - เส้นขอบใช้ box-shadow inset สีเดียวกับแท็บ แทน border 1px #a2e5ff
       (border ทำให้ปุ่มกว้าง/สูงขึ้น 2px ตอนชี้ ส่วน inset วาดอยู่ข้างในกล่อง ปุ่มไม่ขยับ)
     - ไม่เพิ่ม padding 7px ที่ป้ายข้อความตอนชี้ (เดิมทำให้ปุ่มสูงขึ้นทันทีที่ชี้)
     - สูง 40px ตลอด เท่ากับแท็บตอนชี้ — ตอนปกติไม่มีพื้นจึงมองไม่เห็นความต่าง
   สีตัวอักษรตอนชี้ยังเป็น #1686df ตามกฎเดิมของ .btnNoBorder
   ใช้เฉพาะในแถบเมนู (.psu-appbar) ปุ่ม btnNoBorder ที่อื่นไม่กระทบ */
.psu-appbar .psu-ab-item.btnNoBorder > .mud-button-outlined,
.psu-appbar .psu-ab-item.btnNoBorder > .mud-button-outlined:focus,
.psu-appbar .psu-ab-item.btnNoBorder > .mud-button-outlined:active {
    min-height: 40px;
    border: none !important;
    border-radius: 5px;
    box-shadow: none;
    outline: none;
}

@media (hover: hover) and (pointer: fine) {
    .psu-appbar .psu-ab-item.btnNoBorder > .mud-button-outlined:hover {
        border: none !important;
        border-radius: 5px;
        background: #e2ffff !important;
        box-shadow: inset 0 0 0 1px #32c5ff;
    }

        .psu-appbar .psu-ab-item.btnNoBorder > .mud-button-outlined:hover > .mud-button-label {
            padding: 0;
        }
}

/* ใช้คีย์บอร์ด (Tab): แสดงกรอบแบบเดียวกับตอนชี้เมาส์ ให้รู้ว่าอยู่ปุ่มไหน */
.psu-appbar .psu-ab-item.btnNoBorder > .mud-button-outlined:focus-visible {
    box-shadow: inset 0 0 0 1px #32c5ff;
}

/* จอต่ำกว่า 760px: ซ่อนเมนูทั้งหมด ใช้ปุ่ม ☰ เปิด drawer */
@media (max-width: 759.98px) {
    .psu-appbar .psu-ab-item {
        display: none !important;
    }
}
/* =========================================================
   กล่องข้อมูลตำแหน่งที่รายงานตัว (แบบ G) — ต่อท้าย wwwroot/css/app.css
   ใช้กับ EmpAdmissionInfo.razor
   ========================================================= */
.adm-info {
    background: #F3FDF6;
    border: 1px solid #92deb2;
    border-radius: 10px;
    padding: 14px 18px;
    display: grid;
    grid-template-columns: minmax(220px, 300px) 1fr; /* ซ้ายตำแหน่ง | ขวาข้อมูล */
    gap: 0 22px;
    width: 100%;
    font-size: 15px;
}

/* ---------- ซ้าย: ตำแหน่ง ---------- */
.adm-info__pos {
    padding-right: 22px;
    border-right: 1px solid #cdebd8;
    min-width: 0;
}

.adm-info__cap {
    font-size: 12.5px;
    font-weight: 600;
    color: #389e0d;
    margin-bottom: 2px;
}

.adm-info__title {
    font-size: 17px;
    font-weight: 700;
    color: #14532d;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.adm-info__sub {
    font-size: 13px;
    color: #6b7280;
    margin-top: 2px;
}

/* ---------- ขวา: ข้อมูล ---------- */
.adm-info__data {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 24px;
    align-content: center;
    min-width: 0;
}

.adm-info__item {
    min-width: 0;
}

.adm-info__item--wide {
    grid-column: 1 / -1; /* ส่วนงานยาว → เต็มแถว */
}

.adm-info__k {
    font-size: 12.5px;
    color: #6b7280;
    margin-bottom: 2px;
}

.adm-info__v {
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* ---------- Tablet: ตำแหน่งขึ้นด้านบน ---------- */
@media (max-width: 899.98px) {
    .adm-info {
        grid-template-columns: 1fr;
    }

    .adm-info__pos {
        padding: 0 0 12px;
        margin-bottom: 12px;
        border-right: 0;
        border-bottom: 1px solid #cdebd8;
    }
}

/* ---------- Mobile: ข้อมูล 2 คอลัมน์ ---------- */
@media (max-width: 599.98px) {
    .adm-info {
        padding: 12px 14px;
    }

    .adm-info__title {
        font-size: 16px;
    }

    .adm-info__data {
        grid-template-columns: 1fr 1fr;
        gap: 10px 16px;
    }
}
/* =========================================================
   กล่องข้อมูลตำแหน่งที่สมัคร (แบบ 3) — ต่อท้าย wwwroot/css/app.css
   ใช้กับ ApplyJobInfo.razor
   ========================================================= */
.ajob {
    background: #F3FDF6;
    border: 1px solid #92deb2;
    border-radius: 10px;
    padding: 12px 18px 14px;
    width: 100%;
    font-size: 15px;
}

/* มุมขวาบน: ป้ายสถานะ + เมนู ⋮ (float ให้ชื่อตำแหน่งยาว ๆ ไหลอ้อมได้) */
.ajob__corner {
    float: right;
    display: flex;
    align-items: center;
    gap: 2px;
    margin: -6px -10px 4px 12px;
}

    .ajob__corner .ant-tag {
        margin-right: 0;
    }

.ajob__cap {
    font-size: 12.5px;
    font-weight: 600;
    color: #389e0d;
    margin-bottom: 2px;
}

.ajob__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}

.ajob__title {
    font-size: 17px;
    font-weight: 700;
    color: #14532d;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.ajob__sub {
    font-size: 13px;
    color: #6b7280;
    margin-top: 2px;
}

/* ข้อมูล 3 คอลัมน์ (ใต้เส้นประ) */
.ajob__data {
    clear: both;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #b7e4c7;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 10px 24px;
}

.ajob__item {
    min-width: 0;
}

.ajob__k {
    font-size: 12.5px;
    color: #6b7280;
    margin-bottom: 2px;
}

.ajob__v {
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* Tablet: ส่วนงานเต็มแถว + 2 คอลัมน์ */
@media (max-width: 899.98px) {
    .ajob__data {
        grid-template-columns: 1fr 1fr;
    }

    .ajob__item--unit {
        grid-column: 1 / -1;
    }
}

/* Mobile */
@media (max-width: 599.98px) {
    .ajob {
        padding: 12px 14px;
    }

    .ajob__corner {
        margin-right: -6px;
    }

    .ajob__title {
        font-size: 16px;
    }

    .ajob__data {
        gap: 10px 16px;
    }
}
.site-footer {
    background: #f6f7f9;
    border-top: 1px solid #e3e8ef;
    color: #5b6775;
    font-size: 13.5px;
    line-height: 1.7;
}

.site-footer__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 16px;
    text-align: center;
}

.site-footer p {
    margin: 0 0 8px;
}

/* <address> เบราว์เซอร์ทำตัวเอียงให้เอง ปิดไว้ให้เหมือนข้อความอื่น */
.site-footer__contact {
    font-style: normal;
    margin: 0 0 8px;
}

.site-footer a {
    color: var(--psu-deep-blue, #1d3a6e);
    text-decoration: none;
    white-space: nowrap; /* ไม่ให้เบอร์โทร/อีเมลถูกตัดกลางบรรทัด */
}

    .site-footer a:hover {
        text-decoration: underline;
    }

.site-footer__copy {
    color: #8c8c8c;
    font-size: 12.5px;
}

/* ===== [ใหม่] ปุ่มดาวน์โหลดไฟล์ประกาศ (ท้ายหัวฉบับ ใน PositionDetailComponent) =====
   วางต่อท้ายส่วน .pd-file-head ใน index.css
   margin-left:auto = ดันปุ่มไปชิดขวาของแถวหัวฉบับ */
.pd-file-dl {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid #c9d6ea;
    border-radius: 6px;
    background: #fff;
    color: #2f5aa8;
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    flex: 0 0 auto;
}

    .pd-file-dl:hover,
    .pd-file-dl:focus-visible {
        background: #eef3fb;
        border-color: #2f5aa8;
        color: #2f5aa8;
        text-decoration: none;
    }

    .pd-file-dl .pd-file-dl-icon {
        font-size: 18px;
    }

/* มือถือ (เส้นเดียวกับ NarrowQuery 760px): เหลือแค่ไอคอน — ชื่อฉบับไม่ตกบรรทัด */
@media (max-width: 760px) {
    .pd-file-dl {
        padding: 4px 6px;
    }

    .pd-file-dl-text {
        display: none;
    }
}