/* ============================================================
   PSU FILTER PANEL — แถบค้นหา/กรองข้อมูลแบบพับเก็บได้
   ไฟล์: wwwroot/css/psu-filter.css
 
   เปิด/ปิดด้วย class บน element นอกสุด:
     <div class="psu-filter">              → ปิด (ซ่อนส่วนค้นหา)
     <div class="psu-filter psu-filter--open">  → เปิด
 
   ใน Blazor ผูกกับ state ที่มีอยู่ได้เลย:
     class="psu-filter @(isSearch ? "psu-filter--open" : "")"
   ============================================================ */

.psu-filter {
    --pf-accent: #5b3ad6;
    --pf-accent-soft: #eae5fb;
    --pf-panel-bg: #f1eeff;
    --pf-panel-border: #c9c6f1;
    --pf-title: #1f3a68;
    --pf-subtitle: #7b8794;
    --pf-label: #3f4a56;
    --pf-field-border: #dfe3e8;
    --pf-field-bg: #ffffff;
    --pf-placeholder: #a7b0ba;
    --pf-soft-btn-bg: #e9f1fe;
    --pf-soft-btn-text: #29166e;
    --pf-soft-btn-border: #676fcc;
    --pf-radius: 12px;
    --pf-field-h: 40px;
    --pf-cols: 4;
    border: 1px solid var(--pf-panel-border);
    border-radius: var(--pf-radius);
    background: var(--pf-panel-bg);
    overflow: hidden;
}

/* ===== แถบหัว (เห็นตลอด) ===== */
.psu-filter__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    flex-wrap: wrap;
}

/* ปุ่มกดเปิด/ปิด — กินพื้นที่ทั้งฝั่งซ้ายเพื่อให้กดง่าย */
.psu-filter__toggle {
    display: flex;
    align-items: center;
    /* ต้องระบุ flex-start ชัด ๆ เพราะ UA stylesheet ของ <button> จัดเนื้อหาไว้กลาง
       ถ้าไม่ใส่ หัวเรื่องจะลอยไปกลางแถบแทนที่จะชิดซ้าย */
    justify-content: flex-start;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px;
    margin: -4px;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color .15s ease;
}

    .psu-filter__toggle:hover {
        background: rgba(91, 58, 214, .06);
    }

    .psu-filter__toggle:focus-visible {
        outline: 2px solid var(--pf-accent);
        outline-offset: 2px;
    }

/* กล่องไอคอนตัวกรอง */
.psu-filter__icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid var(--pf-panel-border);
    color: var(--pf-accent);
    transition: background-color .18s ease, border-color .18s ease;
}

    .psu-filter__icon svg {
        width: 20px;
        height: 20px;
    }

/* ตอนเปิด ไอคอนเปลี่ยนเป็นพื้นม่วงอ่อน บอกสถานะว่ากำลังกรองอยู่ */
.psu-filter--open .psu-filter__icon {
    background: #d3d0ff;
    border-color: #9a84ff;
}

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

.psu-filter__title {
    font-size: 15px;
    color: var(--pf-title);
    line-height: 1.35;
}

    .psu-filter__title b,
    .psu-filter__title strong {
        font-weight: 700;
    }

.psu-filter__subtitle {
    font-size: 12.5px;
    color: var(--pf-subtitle);
    line-height: 1.35;
}

/* ปุ่มล้างตัวกรอง */
.psu-filter__reset {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--pf-soft-btn-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--pf-soft-btn-text);
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

    .psu-filter__reset:hover {
        background: var(--pf-soft-btn-bg);
    }

    .psu-filter__reset svg {
        width: 16px;
        height: 16px;
    }

/* ===== ส่วนค้นหา (ซ่อน/แสดง) ===== */
.psu-filter__body {
    display: none;
    padding: 0 18px 18px;
}

.psu-filter--open .psu-filter__body {
    display: block;
    animation: psu-filter-in .18s ease;
}

@keyframes psu-filter-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.psu-filter__panel {
    background: #ffffff;
    border: 1px solid var(--pf-panel-border);
    border-radius: 10px;
    padding: 16px;
}

.psu-filter__grid {
    display: grid;
    grid-template-columns: repeat(var(--pf-cols), minmax(0, 1fr));
    gap: 14px 16px;
    align-items: end;
}

/* ===== ช่องกรอกแต่ละช่อง ===== */
.psu-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.psu-field__label {
    font-size: 13px;
    font-weight: 500;
    color: var(--pf-label);
    line-height: 1.3;
}

/* กล่องครอบ input เพื่อวางไอคอนทับด้านขวา */
.psu-field__control {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.psu-field__input,
.psu-field__select {
    width: 100%;
    height: var(--pf-field-h);
    padding: 0 36px 0 12px;
    box-sizing: border-box;
    border: 1px solid var(--pf-field-border);
    border-radius: 6px;
    background: var(--pf-field-bg);
    color: #2f3943;
    font: inherit;
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .psu-field__input::placeholder {
        color: var(--pf-placeholder);
    }

    .psu-field__input:focus,
    .psu-field__select:focus {
        outline: none;
        border-color: var(--pf-accent);
        box-shadow: 0 0 0 3px rgba(91, 58, 214, .12);
    }

/* select — ซ่อนลูกศรของระบบ ใช้ไอคอนที่เราวางเองให้หน้าตาตรงกันทุกเบราว์เซอร์ */
.psu-field__select {
    appearance: none;
    -webkit-appearance: none;
    color: var(--pf-placeholder);
    cursor: pointer;
}

    .psu-field__select:valid,
    .psu-field__select.has-value {
        color: #2f3943;
    }

/* ไอคอนท้ายช่อง */
.psu-field__suffix {
    position: absolute;
    right: 10px;
    display: inline-flex;
    align-items: center;
    pointer-events: none;
    color: #9aa4af;
}

    .psu-field__suffix svg {
        width: 17px;
        height: 17px;
    }

/* ===== ช่วงวันที่ — สองช่องคั่นด้วยขีด ===== */
.psu-field__range {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

    .psu-field__range .psu-field__control {
        flex: 1 1 0;
    }

.psu-field__range-sep {
    flex: 0 0 auto;
    color: #9aa4af;
    user-select: none;
}

/* ===== แถวปุ่ม ===== */
.psu-filter__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.psu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: var(--pf-field-h);
    padding: 0 18px;
    border-radius: 8px;
    border: 1px solid transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, box-shadow .15s ease;
}

    .psu-btn svg {
        width: 17px;
        height: 17px;
    }

/* ปุ่มหลัก — ค้นหา */
.psu-btn--primary {
    background: var(--pf-accent);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(91, 58, 214, .28);
}

    .psu-btn--primary:hover {
        background: #4d2fc2;
    }

/* ปุ่มรอง — ตัวเลือกเพิ่มเติม */
.psu-btn--soft {
    background: var(--pf-soft-btn-bg);
    border-color: var(--pf-soft-btn-border);
    color: var(--pf-soft-btn-text);
}

    .psu-btn--soft:hover {
        background: #dce9fd;
    }

/* ===== responsive (ของกริดแบบ label อยู่บน — ไม่เกี่ยวกับ --inline) ===== */
@media (max-width: 1200px) {
    .psu-filter {
        --pf-cols: 2;
    }
}

@media (max-width: 640px) {
    .psu-filter {
        --pf-cols: 1;
    }

    .psu-filter__bar {
        padding: 12px 14px;
    }

    .psu-filter__body {
        padding: 0 14px 14px;
    }

    .psu-filter__panel {
        padding: 12px;
    }

    .psu-filter__reset {
        width: 100%;
        justify-content: center;
    }

    .psu-filter__actions .psu-btn {
        flex: 1 1 auto;
    }
}

/* ============================================================
   เพิ่มเติม — ใช้ร่วมกับ MudBlazor / AntDesign
   ============================================================ */

/* ไอคอนกรวยในกล่อง (MudIcon) */
.psu-filter__icon .mud-icon-root {
    width: 20px !important;
    height: 20px !important;
    font-size: 20px !important;
    margin: 0 !important;
}

/* ลูกศรบอกสถานะพับ/ขยาย — หมุน 180° ตอนเปิด */
.psu-filter__caret {
    flex: 0 0 auto;
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    color: #8b96a2;
    transition: transform .2s ease;
}

.psu-filter--open .psu-filter__caret {
    transform: rotate(180deg);
}

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

/* ปุ่มฝั่งขวาของแถบหัว (MudButton) — ไม่ให้ยืดตามและไม่ให้ตัวอักษรเป็นตัวใหญ่ */
.psu-filter__bar .mud-button-root {
    flex: 0 0 auto;
    text-transform: none;
    border-radius: 8px;
}

/* ---------- ปรับ AntDesign Select / Input ให้เข้ากับกริด ---------- */
.psu-filter .ant-select,
.psu-filter .ant-input-affix-wrapper,
.psu-filter .ant-input,
.psu-filter .ant-picker {
    width: 100% !important;
    border-radius: 6px;
}

/* เหลือแค่ Select กับ Picker ในกฎรวม
   เอา .ant-input-affix-wrapper / .ant-input ออก เพราะสองตัวนี้ซ้อนกัน
   (AllowClear ทำให้ AntDesign ห่อ <input class="ant-input"> ไว้ใน
    <span class="ant-input-affix-wrapper">) ถ้าใส่ขอบ+ความสูงให้ทั้งคู่
   จะได้ขอบสองชั้น และ input ข้างในสูงเท่าตัวห่อพอดีจนดันขอบล่าง/ขวาทะลุออกไป
   → เห็นเป็น "เส้นขอบไม่เต็ม" แบบที่เจอ */
.psu-filter .ant-select-selector,
.psu-filter .ant-picker {
    min-height: var(--pf-field-h) !important;
    height: var(--pf-field-h) !important;
    border-radius: 6px !important;
    border-color: var(--pf-field-border) !important;
    display: flex;
    align-items: center;
}

/* ---------- AntDesign Input: ให้ขอบอยู่ชั้นเดียว ---------- */

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

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

    /* 3) input ที่อยู่ข้างในตัวห่อ — ถอดขอบ/ความสูง/เงา/พื้นหลังออกให้หมด
      specificity 3 คลาส จึงทับกฎข้อ 1 ได้ */
    .psu-filter .ant-input-affix-wrapper > .ant-input,
    .psu-filter .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-filter .ant-input-affix-wrapper > .ant-input-suffix {
        flex: 0 0 auto;
        margin-left: 6px;
    }

    /* โฟกัส — วงแหวนอยู่ที่ชั้นที่มีขอบเท่านั้น */
    .psu-filter .ant-input-affix-wrapper-focused,
    .psu-filter .ant-input-affix-wrapper:focus-within,
    .psu-filter .ant-input:focus {
        border-color: var(--pf-accent) !important;
        box-shadow: 0 0 0 3px rgba(91, 58, 214, .12) !important;
    }

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

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

/* ปุ่มค้นหาในกริด (MudButton) ให้สูงเท่าช่องกรอก */
.psu-filter__actions .mud-button-root {
    height: var(--pf-field-h);
    text-transform: none;
    border-radius: 8px;
}

/* ============================================================
   ช่องกว้างพิเศษ + แถวปุ่มใต้กริด
   ============================================================ */

/* ช่องที่ต้องการกว้าง 2 คอลัมน์ (เช่นช่องค้นหาคำ) */
.psu-field--span2 {
    grid-column: span 2;
}

/* แถวปุ่มใต้กริด — ชิดขวาบนจอกว้าง, เต็มความกว้างบนมือถือ */
.psu-filter__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--pf-panel-border);
}

    .psu-filter__footer .mud-button-root {
        height: var(--pf-field-h);
        text-transform: none;
        border-radius: 8px;
    }

@media (max-width: 640px) {
    /* จอแคบเหลือคอลัมน์เดียว span2 จึงต้องยุบตาม */
    .psu-field--span2 {
        grid-column: span 1;
    }

    .psu-filter__footer .mud-button-root {
        flex: 1 1 auto;
    }
}

/* ============================================================
   กลุ่มปุ่มฝั่งขวาของแถบหัว (ล้างตัวกรอง + เพิ่มข้อมูล)
   ============================================================ */
.psu-filter__bar-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

    .psu-filter__bar-actions .mud-button-root {
        height: 38px;
        text-transform: none;
        border-radius: 8px;
        white-space: nowrap;
    }

@media (max-width: 700px) {
    /* จอแคบ: ปุ่มลงมาอยู่บรรทัดใหม่และแบ่งความกว้างกันเอง */
    .psu-filter__bar-actions {
        width: 100%;
    }

        .psu-filter__bar-actions .mud-button-root {
            flex: 1 1 auto;
        }
}

/* ============================================================
   แบบ label อยู่ "ข้าง" ช่องกรอก — 2 บรรทัด
 
     บรรทัด 1   วิทยาเขต | ส่วนงาน | หน่วยงาน   | (ว่าง)
     บรรทัด 2   สถานะ    | ตำแหน่ง | ชื่อประกาศ | ปุ่มค้นหา
 
   ตำแหน่งทุกช่องกำหนดด้วย grid-template-areas ผ่านคลาส psu-fld-1..6
   ไม่ปล่อยให้ auto-placement จัดเอง จึงไม่มีทางเลื่อนแถวผิด
 
   *** ข้อควรระวังตอนทำ responsive ***
   เมื่อประกาศ grid-template-areas ไว้ จำนวนคอลัมน์จะถูก "ล็อก" ตามผัง
   การแก้แค่ grid-template-columns ใน media query จึงไม่มีผล ต้องแก้
   grid-template-areas ควบคู่กันไปทุกจุด (รอบก่อนพลาดข้อนี้ responsive จึงไม่ทำงาน)
   ============================================================ */

.psu-filter__grid--inline {
    --pf-btn-w: 116px; /* คอลัมน์ที่ 4 — เฉพาะปุ่มค้นหา */
    --pf-label-w: 104px; /* label ทุกช่องกว้างเท่ากัน → ช่องกรอกตรงคอลัมน์กัน */

    grid-template-columns: repeat(3, minmax(0, 1fr)) var(--pf-btn-w);
    grid-template-areas:
        "f1 f2 f3 ."
        "f4 f5 f6 btn";
    gap: 14px 18px;
    align-items: center;
}

    .psu-filter__grid--inline > .psu-fld-1 {
        grid-area: f1;
    }

    .psu-filter__grid--inline > .psu-fld-2 {
        grid-area: f2;
    }

    .psu-filter__grid--inline > .psu-fld-3 {
        grid-area: f3;
    }

    .psu-filter__grid--inline > .psu-fld-4 {
        grid-area: f4;
    }

    .psu-filter__grid--inline > .psu-fld-5 {
        grid-area: f5;
    }

    .psu-filter__grid--inline > .psu-fld-6 {
        grid-area: f6;
    }

    /* ปุ่มค้นหา — ลูกตรง ๆ ของกริด ล็อกไว้บรรทัดเดียวกับช่องชื่อประกาศ */
    .psu-filter__grid--inline > .mud-button-root {
        grid-area: btn;
        width: 100%;
        min-width: 0;
        height: var(--pf-field-h);
        text-transform: none;
        border-radius: 8px;
        white-space: nowrap;
    }

/* ===== แต่ละช่อง: label ซ้าย ช่องกรอกขวา ===== */
.psu-field--inline {
    flex-direction: row; /* ทับ .psu-field ที่เป็น column */
    align-items: center;
    gap: 10px;
}

    .psu-field--inline > .psu-field__label {
        flex: 0 0 var(--pf-label-w);
        width: var(--pf-label-w);
        text-align: right;
        /* label ไทยยาว ๆ เช่น "ค้นหาภายในวิทยาเขต:" ต้องยอมให้ตัดบรรทัดได้ */
        overflow-wrap: anywhere;
        line-height: 1.3;
    }

    /* ตัวคอนโทรล AntDesign ในแถวแนวนอน — ยืดเต็มที่ว่างที่เหลือ
   ต้อง width:auto ทับ width:100%!important ของกฎด้านบน
   ไม่งั้น 100% = ความกว้างทั้งช่อง (รวม label) แล้วล้นออกไป */
    .psu-field--inline > .ant-select,
    .psu-field--inline > .ant-input,
    .psu-field--inline > .ant-input-affix-wrapper,
    .psu-field--inline > .ant-picker,
    .psu-field--inline > .psu-field__static {
        flex: 1 1 auto;
        min-width: 0;
        width: auto !important;
    }

/* ============================================================
   กล่องแสดงค่าแบบอ่านอย่างเดียว
   ใช้แทน Select เมื่อสถานะถูกล็อกจากปุ่ม stepper (แก้ไขไม่ได้)
   หน้าตาให้เหมือนช่องที่ถูก disabled เพื่อสื่อว่าแก้ไม่ได้
   ============================================================ */
.psu-field__static {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: var(--pf-field-h);
    height: var(--pf-field-h);
    padding: 0 11px;
    border: 1px solid var(--pf-field-border);
    border-radius: 6px;
    background: #f4f6f8;
    color: #6b7681;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: not-allowed;
    user-select: none;
}

/* ============================================================
   responsive ของแบบ label อยู่ข้างช่อง
   ลำดับการยอมถอย:
     1400px  ย่อ label / ย่อปุ่ม / ลด gap  — ยังครบบรรทัดเดิม
     1150px  ปุ่มลงมาอยู่บรรทัดของตัวเองชิดขวา — ยังคง 3 คอลัมน์
      980px  label ขึ้นไปอยู่บนช่องกรอก เหลือ 2 คอลัมน์
      600px  คอลัมน์เดียว ปุ่มเต็มความกว้าง
   ============================================================ */

@media (max-width: 1400px) {
    .psu-filter__grid--inline {
        --pf-label-w: 92px;
        --pf-btn-w: 108px;
        gap: 14px 14px;
    }
}

@media (max-width: 1150px) {
    /* ที่ไม่พอให้ปุ่มอยู่บรรทัดเดียวกันแล้ว — ปุ่มลงมาใต้กริดชิดขวา
       ยังคง 3 คอลัมน์ ตำแหน่งช่องกรอกจึงไม่ขยับ */
    .psu-filter__grid--inline {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas:
            "f1 f2 f3"
            "f4 f5 f6"
            "btn btn btn";
    }

        .psu-filter__grid--inline > .mud-button-root {
            justify-self: end;
            width: auto;
            min-width: var(--pf-btn-w);
            padding-left: 18px;
            padding-right: 18px;
        }
}

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

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

        .psu-field--inline > .psu-field__label {
            flex: 0 0 auto;
            width: auto;
            text-align: left;
        }

        /* กลับมาเต็มความกว้างเหมือนแบบ label อยู่บน */
        .psu-field--inline > .ant-select,
        .psu-field--inline > .ant-input,
        .psu-field--inline > .ant-input-affix-wrapper,
        .psu-field--inline > .ant-picker,
        .psu-field--inline > .psu-field__static {
            width: 100% !important;
        }
}

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

        .psu-filter__grid--inline > .mud-button-root {
            justify-self: stretch;
            width: 100%;
        }
}
/* ============================================================
   ReportIndex — 11 ช่อง + ปุ่มค้นหา, label อยู่บนช่องกรอก
   ใช้ auto-placement ของ .psu-filter__grid ตัวฐาน จึงไม่ต้องทำ
   grid-template-areas และ responsive ของฐาน (1200/640) ใช้ได้เลย
   ============================================================ */
.psu-filter__grid--report {
    align-items: end;
}

    /* ปุ่มค้นหา — ลูกตรง ๆ ของกริด ตกลงช่องสุดท้ายเอง */
    .psu-filter__grid--report > .mud-button-root {
        height: var(--pf-field-h);
        text-transform: none;
        border-radius: 8px;
        white-space: nowrap;
        justify-self: end;
        min-width: 116px;
    }

@media (max-width: 640px) {
    .psu-filter__grid--report > .mud-button-root {
        justify-self: stretch;
        width: 100%;
    }
}
/* ============================================================
   แถบความคืบหน้าผู้รายงานตัว — คอลัมน์ "ผู้รายงานตัว" ใน ReportIndex
   แทนไอคอนคนสองตัวแบบเดิม

   ตัวเศษ = นำเข้าแล้ว + สละสิทธิ์  (ทั้งคู่ถือว่าปิดเคสแล้ว)
   แต่แยกสีในแถบ เพราะนำเข้าแล้วคือได้คน ส่วนสละสิทธิ์คืออัตรายังว่าง
   ถ้าใช้สีเดียวกัน แถวที่สละสิทธิ์ยกชุดจะดูเหมือนได้คนครบ
   ============================================================ */
.psu-prog-cell {
    display: flex;
    justify-content: center;
}

.psu-prog {
    --pg-imported: #15803D;
    --pg-withdrawn: #B6BEC7;
    --pg-wait: #C2410C;
    --pg-track: #F0F2F4;
    --pg-track-line: #E0E4E8;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    min-width: 140px;
    max-width: 196px;
    text-align: left;
}

.psu-prog__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    color: #6b7681;
    line-height: 1.3;
}

.psu-prog__frac {
    font-weight: 700;
    font-size: 14.5px;
    color: #2f3943;
    font-variant-numeric: tabular-nums; /* ตัวเลขตรงคอลัมน์กันทุกแถว */
    white-space: nowrap;
}

.psu-prog__bar {
    height: 7px;
    border-radius: 4px;
    background: var(--pg-track);
    border: 1px solid var(--pg-track-line);
    overflow: hidden;
    display: flex;
}

.psu-prog__seg {
    height: 100%;
    transition: width .25s ease;
}

.psu-prog__seg--imported {
    background: var(--pg-imported);
}

.psu-prog__seg--withdrawn {
    background: var(--pg-withdrawn);
}

/* ป้ายบอกจำนวนสละสิทธิ์ — แสดงเฉพาะแถวที่มีจริง
   แถวปกติจึงยังเตี้ยเท่าเดิม */
.psu-prog__tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    line-height: 1.5;
    white-space: nowrap;
    background: #F4F5F7;
    border: 1px solid #DFE3E8;
    color: #5B6670;
}

    .psu-prog__tag b {
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }

/* ดำเนินการครบแล้ว — ตัวเลขเขียวย้ำว่าจบงาน */
.psu-prog--all .psu-prog__frac {
    color: var(--pg-imported);
}

/* ยังไม่มีใครปิดเคส — ตัวเลขส้มเตือนว่ายังไม่เริ่ม */
.psu-prog--none .psu-prog__frac {
    color: var(--pg-wait);
}

/* ยังไม่มีผู้รายงานตัว — เงียบลง ไม่ดึงสายตา */
.psu-prog--empty .psu-prog__top {
    color: #9aa4af;
}

.psu-prog--empty .psu-prog__bar {
    opacity: .55;
}

@media (prefers-reduced-motion: reduce) {
    .psu-prog__seg {
        transition: none;
    }
}

/* ===== คำอธิบายสีแถบ ท้ายตาราง ===== */
.psu-prog-legend {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 13px;
}

.psu-prog-legend__it {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.psu-prog-legend__sw {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    flex: 0 0 auto;
}

.psu-prog-legend__sw--imported {
    background: #15803D;
}

.psu-prog-legend__sw--withdrawn {
    background: #B6BEC7;
}

.psu-prog-legend__sw--pending {
    background: #F0F2F4;
    border: 1px solid #E0E4E8;
}

.psu-prog-legend__hint {
    font-size: 12.5px;
    color: #6b7681;
    flex: 1 1 100%;
    line-height: 1.4;
}
/* ============================================================
   คอลัมน์ "ผู้รายงานตัว" — แถบความคืบหน้า

   เรียงจากซ้าย: นำเข้าแล้ว → สละสิทธิ์ → รอเจ้าหน้าที่ → พื้นว่าง
   พื้นว่างคือคนที่ยังรอมารายงานตัว จึงไม่วาดเป็นช่วงสี
   ทำให้แถวที่ไม่มีงานค้างเงียบสนิท เหลือแต่ส้มที่สะดุดตา
   ============================================================ */
.psu-th {
    background-color: #61bdcc !important;
    color: white !important; /* เข้มแทนขาว เพราะขาวบนพื้นนี้ contrast ต่ำกว่าเกณฑ์ */
    font-weight: 600 !important;
}

.psu-prog-cell {
    display: flex;
    justify-content: center;
}

.psu-prog {
    --pg-imported: #15803D;
    --pg-withdrawn: #8D98A5;
    --pg-waiting: #ef6c00;
    --pg-waiting-ink: #C75A00; /* เข้มกว่านิดสำหรับตัวหนังสือในป้าย */
    --pg-waiting-bg: #FFF4EA;
    --pg-waiting-line: #FFD4AD;
    --pg-track: #F0F2F4;
    --pg-track-line: #E0E4E8;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    min-width: 146px;
    max-width: 200px;
    text-align: left;
}

.psu-prog__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    color: #6b7681;
    line-height: 1.3;
}

.psu-prog__frac {
    font-weight: 700;
    font-size: 14.5px;
    color: #2f3943;
    font-variant-numeric: tabular-nums; /* ตัวเลขตรงคอลัมน์กันทุกแถว */
    white-space: nowrap;
}

.psu-prog__bar {
    height: 7px;
    border-radius: 4px;
    background: var(--pg-track);
    border: 1px solid var(--pg-track-line);
    overflow: hidden;
    display: flex;
}

.psu-prog__seg {
    height: 100%;
    transition: width .25s ease;
}

.psu-prog__seg--imported {
    background: var(--pg-imported);
}

.psu-prog__seg--withdrawn {
    background: var(--pg-withdrawn);
}

.psu-prog__seg--waiting {
    background: var(--pg-waiting);
}

/* ป้ายขึ้นเฉพาะแถวที่มีงานค้างหรือมีสละสิทธิ์จริง แถวอื่นจึงยังเตี้ย */
.psu-prog__tags {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.psu-prog__tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    line-height: 1.5;
    white-space: nowrap;
    background: #F4F5F7;
    border: 1px solid #DFE3E8;
    color: #5B6670;
}

    .psu-prog__tag b {
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }

.psu-prog__tag--waiting {
    background: var(--pg-waiting-bg);
    border-color: var(--pg-waiting-line);
    color: var(--pg-waiting-ink);
    font-weight: 500;
}

.psu-prog__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.psu-prog--all .psu-prog__frac {
    color: var(--pg-imported);
}

.psu-prog--none .psu-prog__frac {
    color: var(--pg-waiting-ink);
}

.psu-prog--empty .psu-prog__top {
    color: #9aa4af;
}

.psu-prog--empty .psu-prog__frac {
    color: #9aa4af;
    font-weight: 500;
}

.psu-prog--empty .psu-prog__bar {
    opacity: .55;
}

@media (prefers-reduced-motion: reduce) {
    .psu-prog__seg {
        transition: none;
    }
}

/* ===== คำอธิบายสัญลักษณ์ ท้ายตาราง ===== */
.psu-prog-legend {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 13px;
}

.psu-prog-legend__it {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.psu-prog-legend__sw {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    flex: 0 0 auto;
}

.psu-prog-legend__sw--imported {
    background: #15803D;
}

.psu-prog-legend__sw--withdrawn {
    background: #8D98A5;
}

.psu-prog-legend__sw--waiting {
    background: #ef6c00;
}

.psu-prog-legend__sw--empty {
    background: #F0F2F4;
    border: 1px solid #E0E4E8;
}

.psu-prog-legend__hint {
    font-size: 12.5px;
    color: #6b7681;
    flex: 1 1 100%;
    line-height: 1.4;
}
/* ============================================================
   แถวตารางรายงานตัว — กดได้ทั้งแถว
   chevron เป็นตัวชี้สถานะ ไม่ใช่ปุ่ม เพราะจุดกดคือทั้งแถว
   ถ้าทำเป็นปุ่มจะสื่อผิดว่าต้องกดตรงนั้นเท่านั้น
   ============================================================ */
.psu-rowclick tbody tr {
    cursor: pointer;
}

    /* คอลัมน์ดำเนินการไม่ใช่พื้นที่ย่อขยาย */
    .psu-rowclick tbody tr td:last-child {
        cursor: default;
    }

.psu-row__pos {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.psu-row__chev {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    color: #8b96a2;
    transition: transform .18s ease, color .18s ease;
}

    .psu-row__chev.is-open {
        transform: rotate(90deg);
        color: #5b3ad6;
    }

.psu-row__body {
    min-width: 0;
}

.psu-row__name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    line-height: 1.35;
}

.psu-row__dept {
    font-size: 12px;
    color: #666;
    line-height: 1.35;
}

.psu-row__meta {
    margin-top: 5px;
}

/* แท็กช่วงวันที่ — อยู่ใต้ชื่อหน่วยงาน อ่านเป็นข้อมูลประกอบของตำแหน่ง */
.psu-row__date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    line-height: 1.5;
    white-space: nowrap;
    background: #f3efff;
    border: 1px solid #c3b3f3;
    color: #5b3ad6;
}
     .psu-row__date .mud-icon-root {
        width: 13px !important;
        height: 13px !important;
        font-size: 13px !important;
    }

@media (prefers-reduced-motion: reduce) {
    .psu-row__chev {
        transition: none;
    }
}
/* แก้ — ม่วงชุดเดียวกับ accent ของ psu-filter */
/* app.css — ใช้แทนบล็อกข้างบนถ้า selector แรกไม่ทำงาน */
.psu-filter__grid--report .psu-filter__gobtn {
    grid-column: -2 / -1;
    justify-self: end;
}

@media (max-width: 640px) {
    .psu-filter__grid--report .psu-filter__gobtn {
        grid-column: 1 / -1;
        justify-self: stretch;
        width: 100%;
    }
}