/* ============================================================
   PSU STEPPER
   ไฟล์: wwwroot/css/psu-stepper.css
 
   state ของแต่ละ step กำหนดด้วย class บน <button class="psu-step ...">
     (ไม่ใส่อะไร)      = ยังไม่ทำ   → วงกลมขาว ขอบเทา icon เทา
     psu-step--active  = กำลังทำ    → พื้นหลังฟ้า ขอบฟ้า icon ฟ้า
     psu-step--done    = ทำเสร็จ    → ขอบเขียว icon เขียว
 
   class บน <div class="psu-stepper ..."> ที่ JS เป็นคนใส่ให้:
     is-at-start / is-at-end / is-no-scroll  → คุมการหรี่ปุ่มลูกศร
   ============================================================ */

.psu-stepper {
    /* ---------- ขนาด ---------- */
    --step-size: 58px; /* เส้นผ่านศูนย์กลางวงกลม */
    --step-gap: 22px; /* ระยะห่างระหว่าง step */
    --step-label-w: 124px; /* ความกว้างข้อความใต้วงกลม */
    --step-track-pt: 10px; /* padding ด้านบนของ track (เผื่อที่ให้ badge) */
    --nav-size: 28px; /* ขนาดปุ่มลูกศร */
    /* ---------- สี: ยังไม่ทำ ---------- */
    --c-pending-bg: #ffffff;
    --c-pending-ring: #e2e4e8;
    --c-pending-icon: #4a5159;
    /* ---------- สี: กำลังทำ (active) ---------- */
    --c-active-bg: #e8f5fe; /* พื้นหลังฟ้าอ่อนของวงกลม */
    --c-active-ring: #a9dcf7;
    --c-active-icon: #1a8fe3;
    /* ---------- สี: ทำเสร็จ (done) ---------- */
    --c-done-bg: #ffffff;
    --c-done-ring: #1eb980;
    --c-done-icon: #1eb980;
    /* ---------- สี: badge บอกจำนวน (มุมขวาบน) ---------- */
    --c-badge-bg: #e5393b;
    --c-badge-text: #ffffff;
    /* ---------- สี: อื่น ๆ ---------- */
    --c-label: #4a5159;
    --c-nav: #9aa1a9;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    max-width: 100%;
}

/* ===== ปุ่มลูกศรซ้าย/ขวา ===== */
.psu-stepper__nav {
    flex: 0 0 auto;
    /* จัดให้กึ่งกลางลูกศร อยู่ระดับเดียวกับกึ่งกลางวงกลมพอดี
       ต้องบวก --step-track-pt เข้าไปด้วย เพราะ track มี padding ด้านบน
       (เดิมคิดแค่ step-size/2 - 14px ลูกศรจึงลอยสูงกว่าวงกลมอยู่ 10px
        เท่ากับ padding-top ของ track ที่เผื่อไว้ให้ badge) */
    margin-top: calc(var(--step-track-pt) + var(--step-size) / 2 - var(--nav-size) / 2);
    width: var(--nav-size);
    height: var(--nav-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--c-nav);
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, opacity .15s ease;
}

    .psu-stepper__nav:hover {
        color: #4a5159;
        background: #f2f4f6;
    }

    .psu-stepper__nav svg {
        width: 22px;
        height: 22px;
        fill: currentColor;
    }

    /* กรณีใช้ MudIcon เป็นลูกศร — ล็อกขนาดและตัด margin/line-height ของ MudBlazor ออก
   ไม่งั้นกล่องไอคอนจะสูงเกินปุ่ม แล้วดันลูกศรเยื้องจากแนวกลาง */
    .psu-stepper__nav .mud-icon-root {
        width: 22px !important;
        height: 22px !important;
        font-size: 22px !important;
        line-height: 1 !important;
        margin: 0 !important;
        display: block;
    }

/* หรี่ปุ่มเมื่อเลื่อนสุดทางด้านนั้นแล้ว (JS ใส่ class ให้) */
.psu-stepper.is-at-start .psu-stepper__nav[data-psu-scroll="-1"],
.psu-stepper.is-at-end .psu-stepper__nav[data-psu-scroll="1"] {
    opacity: .3;
    pointer-events: none;
}

/* ซ่อนปุ่มทั้งคู่เมื่อ step พอดีจอ ไม่มีอะไรให้เลื่อน
   ใช้ visibility ไม่ใช่ display เพื่อคงพื้นที่ไว้ แถบจะไม่ขยับเวลาปุ่มโผล่/หาย
   (เดิมใช้ opacity .3 ซึ่งดูเหมือนปุ่มเสีย ผู้ใช้กดแล้วไม่เกิดอะไร) */
.psu-stepper.is-no-scroll .psu-stepper__nav {
    visibility: hidden;
}

/* ===== แถบ step (เลื่อนแนวนอนได้) ===== */
.psu-stepper__track {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--step-gap);
    margin: 0;
    /* padding เผื่อไว้ให้ badge ที่ยื่นออกนอกวงกลม ไม่ถูก overflow ตัด
       (overflow-x:auto ทำให้ overflow-y กลายเป็น auto ตามไปด้วย = ตัดแนวตั้งด้วย) */
    padding: var(--step-track-pt) 8px 8px;
    list-style: none;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Edge เก่า */
}

    .psu-stepper__track::-webkit-scrollbar {
        display: none;
    }

    /* ===== จัดกลาง =====
   ห้ามใช้ justify-content:center กับกล่องที่ overflow:auto เพราะเวลาของล้น
   item ซ้ายสุดจะถูกดันออกนอกกล่องและเลื่อนกลับไปหาไม่ได้
   วิธีนี้ใช้ pseudo-element เปล่า 2 ตัวเป็น "ตัวดูดที่ว่าง":
   มีที่เหลือ = ดันเนื้อหาไปกลาง / ของล้น = ยุบเป็น 0 เองโดยไม่ตัดอะไร
   และไม่ต้องพึ่ง JS */
    .psu-stepper__track::before,
    .psu-stepper__track::after {
        content: '';
        margin: auto;
    }

/* ===== แต่ละ step ===== */
.psu-step {
    flex: 0 0 auto;
    width: var(--step-label-w);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: center;
}

    .psu-step:disabled {
        cursor: default;
    }

.psu-step__circle {
    position: relative;
    width: var(--step-size);
    height: var(--step-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c-pending-bg);
    /* ใช้ inset box-shadow ทำขอบ ไม่ใช้ border เพราะ border จะกินขนาดวงกลม
       ทำให้แต่ละ state วงใหญ่ไม่เท่ากัน */
    box-shadow: inset 0 0 0 2px var(--c-pending-ring);
    transition: background-color .18s ease, box-shadow .18s ease;
}

.psu-step__icon {
    width: 26px;
    height: 26px;
    fill: var(--c-pending-icon);
    transition: fill .18s ease, stroke .18s ease;
}

/* icon ที่วาดด้วยเส้น (เป้าหมายการพัฒนาฯ)
   ตั้ง color ด้วย เพราะ path ข้างในบางเส้นใช้ fill="currentColor" */
.psu-step__icon--stroke {
    fill: none;
    stroke: var(--c-pending-icon);
    color: var(--c-pending-icon);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.psu-step__label {
    font-size: 13px;
    line-height: 1.35;
    color: var(--c-label);
    /* ภาษาไทยไม่มีช่องว่างระหว่างคำ เบราว์เซอร์จึงหาจุดตัดบรรทัดไม่ได้เอง
       ต้องอนุญาตให้ตัดกลางคำ ไม่งั้นข้อความยาวจะล้นออกนอกกล่อง
       (ใส่ break-word ไว้ก่อนเพื่อรองรับเบราว์เซอร์เก่า แล้วให้ anywhere ทับ) */
    overflow-wrap: break-word;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: none;
    /* กันแถวสูงไม่เท่ากันเวลาบาง label สั้น บาง label 3 บรรทัด */
    min-height: calc(1.35em * 2);
}

/* ===== badge บอกจำนวน (มุมขวาบน) =====
   ใช้ min-width + padding + border-radius:999px เพื่อให้เลข 2-3 หลัก
   ยืดเป็นแคปซูลได้เอง ไม่ล้นออกนอกวง */
.psu-step__badge {
    position: absolute;
    top: -3px;
    right: -3px;
    box-sizing: border-box;
    width: auto; /* กันกรณีมี rule เก่าตั้ง width แบบ fix ค้างอยู่ */
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 2px solid #fff;
    background: var(--c-badge-bg);
    color: var(--c-badge-text);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* เลขยาว (3 ตัวอักษรขึ้นไป) — ลดฟอนต์/ระยะลงเล็กน้อย ให้ badge ไม่กว้างเกินวงกลม
   badge ถูก pin ที่ right จึงยืดไปทางซ้ายทับวงกลม ไม่ล้นออกนอกแถบ */
.psu-step__badge--wide {
    font-size: 10px;
    padding: 0 4px;
    letter-spacing: -.2px;
}

/* ===== STATE: กำลังทำอยู่ → พื้นหลังฟ้า ===== */
.psu-step--active .psu-step__circle {
    background: var(--c-active-bg);
    box-shadow: inset 0 0 0 2px var(--c-active-ring);
}

.psu-step--active .psu-step__icon {
    fill: var(--c-active-icon);
}

.psu-step--active .psu-step__icon--stroke {
    fill: none;
    stroke: var(--c-active-icon);
    color: var(--c-active-icon);
}

.psu-step--active .psu-step__label {
    color: var(--c-active-icon);
    font-weight: 600;
}

/* ===== STATE: ทำเสร็จแล้ว → เขียว ===== */
.psu-step--done .psu-step__circle {
    background: var(--c-done-bg);
    box-shadow: inset 0 0 0 2px var(--c-done-ring);
}

.psu-step--done .psu-step__icon {
    fill: var(--c-done-icon);
}

.psu-step--done .psu-step__icon--stroke {
    fill: none;
    stroke: var(--c-done-icon);
    color: var(--c-done-icon);
}

/* ===== hover / focus ===== */
.psu-step:hover:not(:disabled) .psu-step__circle {
    box-shadow: inset 0 0 0 2px var(--c-active-icon);
}

.psu-step:focus-visible {
    outline: none;
}

    .psu-step:focus-visible .psu-step__circle {
        box-shadow: inset 0 0 0 2px var(--c-active-icon), 0 0 0 3px rgba(26, 143, 227, .25);
    }

/* ===== จอเล็ก ===== */
@media (max-width: 600px) {
    .psu-stepper {
        --step-size: 48px;
        --step-gap: 14px;
        --step-label-w: 100px;
    }

    .psu-step__icon {
        width: 22px;
        height: 22px;
    }

    .psu-step__label {
        font-size: 12px;
    }

    .psu-step__badge {
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        font-size: 10px;
    }
}
/* =====================================================================
   แถบปุ่มสถานะ (หน้าแรก) — ลูกศรซ้าย/ขวาแสดงเฉพาะตอนปุ่มล้นความกว้างจอ
   คัดลอกไปต่อท้าย index.css (หลังสไตล์ .ui-stages / .ui-arrow เดิม)
   คลาส has-overflow / is-start / is-end ใส่โดย wwwroot/js/psu-stage-scroll.js
   ===================================================================== */

/* ค่าเริ่มต้น: ซ่อนลูกศร — ถ้า JS ไม่ทำงาน แถบยังเลื่อนด้วยนิ้ว/ทัชแพดได้ตามปกติ */
.psu-jobs .ui-stages .ui-arrow {
    display: none;
}

/* ปุ่มล้นความกว้าง → แสดงลูกศร */
.psu-jobs .ui-stages.has-overflow .ui-arrow {
    display: inline-flex;
}

/* ไม่ล้น: แถบปุ่มใช้ความกว้างทั้งหมด (กันกรณี .ui-stages เป็น grid 3 คอลัมน์ แล้วแถบไปตกช่องแรก) */
.psu-jobs .ui-stages:not(.has-overflow) {
    grid-template-columns: minmax(0, 1fr);
}

/* แถบปุ่มต้องย่อได้ จึงจะเกิดการเลื่อนแนวนอน */
.psu-jobs .ui-stages .ui-stage-strip {
    min-width: 0;
}

/* เลื่อนอยู่สุดทาง: ลูกศรด้านนั้นจางและกดไม่ได้ */
.psu-jobs .ui-stages.is-start .ui-arrow--prev,
.psu-jobs .ui-stages.is-end .ui-arrow--next {
    opacity: .35;
    pointer-events: none;
}