/* ============================================================
   ปุ่มเปลี่ยนภาษา (DAS-LANG-008)
   ------------------------------------------------------------
   โหลด **หลัง** style.css · mobile.css และ head_extra ของหน้า (ดู base.html)
   เพราะกฎของหน้าบางหน้าเหมารวมปุ่มทุกตัวในหัวหน้า เช่น mobile.css มี
       .dashboard-header .btn { width: 100%; }
   ซึ่งจะยืดปุ่มเปลี่ยนภาษาเต็มแถวบนมือถือถ้าไฟล์นี้อยู่ก่อนมัน
   (ปุ่มนี้ไม่ได้ใช้คลาส .btn อยู่แล้ว แต่ลำดับ cascade คือสิ่งที่กันรุ่นหน้าไว้ด้วย)

   ของเดิม (.das-lang-bar / .das-lang-btn / .das-lang-menu ใน style.css)
   ไม่ได้ลบทิ้ง — ยังมีคนอ้างชื่อคลาสพวกนั้นในสไตล์ของหน้าอื่นได้ และการลบ CSS
   พร้อมกับการรื้อ markup ในคอมมิตเดียวทำให้แยกไม่ออกว่าอะไรพังเพราะอะไร
   markup ชุดใหม่ใช้ชื่อคลาสของตัวเอง (.das-lang*) จึงไม่ชนกับกฎชุดเดิม
   ============================================================ */

/* ------------------------------------------------------------
   1) ตะขอในหัวหน้า — [data-das-language-host]
   ปุ่มยังไม่ถูกย้ายเข้ามา (หรือ JS ไม่ทำงาน) ตะขอต้อง **ไม่กินที่เลย**
   ไม่ใช่ช่องว่างลอย ๆ ในแถวปุ่ม — หัวหน้าส่วนใหญ่เป็น flex ที่มี gap
   ถ้าตะขอยังเป็น element ที่มองไม่เห็นแต่ยังอยู่ในโฟลว์ จะได้ระยะห่างเกินมา
   หนึ่งช่องในทุกหน้าที่ปุ่มไม่ได้ลงมา (visibility/opacity จึงใช้ไม่ได้ ต้อง display:none)

   :empty ใช้ได้เพราะตะขอทุกตัวถูกเขียนเป็นแท็กเปล่าไม่มีช่องว่างข้างใน
   <span class="das-lang-host" data-das-language-host></span>
   **ห้ามเว้นบรรทัด/เว้นวรรคระหว่างแท็กเปิดกับแท็กปิด** ไม่งั้น :empty ไม่ตรง
   ------------------------------------------------------------ */
.das-lang-host {
    display: inline-flex;
    align-items: center;
    /* ตรงกับ .btn ของ Bootstrap — หัวหน้าหลายหน้าเรียงปุ่มแบบ inline ไม่ใช่ flex
       ถ้าไม่ตั้ง ปุ่มภาษาจะนั่งบนเส้น baseline แล้วสูงไม่เท่าปุ่มข้าง ๆ */
    vertical-align: middle;
    min-width: 0;
    /* หัวหน้าบางกลุ่มเป็น flex ที่มี gap อยู่แล้ว บางกลุ่มเป็นบล็อกที่ปุ่มเรียงแบบ
       inline ล้วน — ระยะห่างติดมากับตะขอเองจึงได้ผลเหมือนกันทั้งสองแบบ
       (ตอนว่างตะขอเป็น display:none ระยะนี้จึงไม่มีผลกับหน้าที่ปุ่มไม่ได้ลงมา) */
    margin-left: 8px;
}

.das-lang-host:empty {
    display: none;
}

/* ดันไปชิดขวาในหัวหน้าที่เป็น flex แถวเดียวและไม่มีตัวอื่นถือ ml-auto อยู่แล้ว */
.das-lang-host--end {
    margin-left: auto;
}

/* แถวของตัวเอง (ใช้ในหัวของการ์ด เช่น หน้าเข้าสู่ระบบ/สมัครสมาชิก
   ที่หัวการ์ดเป็นบล็อกจัดกลาง ไม่ใช่แถว flex ของปุ่ม)
   **ไม่ใช่แถบใหม่บนสุดของหน้า** — อยู่ในหัวของการ์ดที่มีอยู่แล้ว */
.das-lang-host--row {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 12px;
}

/* ------------------------------------------------------------
   2) ตัวปุ่ม
   ------------------------------------------------------------ */
#langSwitcher.das-lang {
    position: relative;
    /* ท้ายเนื้อหา (ทางสำรอง): เป็นแถวของตัวเองชิดขวา ใต้เนื้อหา ไม่ลอยทับ */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin: 18px 0 4px;
    /* **ไม่ตรึงตำแหน่งกับขอบจอที่นี่โดยตั้งใจ** — ปุ่มที่ลอยทับเนื้อหาคือบั๊กเดิม
       ที่งานนี้มาแก้ (มันไปทับปุ่มบันทึกของหลายหน้าจนกดไม่ได้)
       ปุ่มจึงอยู่ในโฟลว์ของหน้าเสมอ ทั้งตอนอยู่ในหัวหน้าและตอนเป็นทางสำรองท้ายหน้า */
}

/* อยู่ในตะขอของหัวหน้าแล้ว ระยะห่างเป็นหน้าที่ของ gap ในหัวหน้านั้น */
[data-das-language-host] > #langSwitcher.das-lang {
    display: inline-flex;
    justify-content: flex-start;
    margin: 0;
}

.das-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* 44px คือขนาดที่นิ้วกดโดนจริงบนแท็บเล็ตหน้างาน */
    min-height: 44px;
    padding: 6px 14px;
    /* ความกว้างตามเนื้อหา — กันกฎ width:100% ของหัวหน้าบางหน้าบนมือถือ */
    width: auto;
    max-width: 100%;
    border: 1px solid #d5dce6;
    border-radius: 999px;
    /* พื้นขาว + ตัวอักษรเข้ม **กำหนดตรง ๆ ไม่ inherit**
       หัวหน้าหลายหน้าเป็นพื้นน้ำเงินเข้มที่ตั้ง color: white ไว้กับทั้งกล่อง
       ถ้าปล่อยให้สืบทอด ปุ่มจะกลายเป็นตัวหนังสือขาวบนพื้นขาว = อ่านไม่ออก */
    background: #ffffff;
    color: #334155;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(15, 42, 77, 0.10);
}

.das-lang-btn:hover {
    background: #f1f5f9;
    color: #0f2a4d;
    text-decoration: none;
}

/* วงโฟกัสต้องเห็นชัดบนพื้นทุกสี — คนที่ใช้คีย์บอร์ดอย่างเดียวต้องรู้ว่าอยู่ที่ปุ่มนี้
   :focus ธรรมดาไว้ก่อน แล้วให้ :focus-visible ทับ (เบราว์เซอร์เก่ายังได้วงโฟกัส) */
.das-lang-btn:focus,
.das-lang-opt:focus {
    outline: 3px solid #0055a5;
    outline-offset: 2px;
}

.das-lang-ico {
    color: #64748b;
    font-size: 0.95em;
}

.das-lang-caret {
    color: #94a3b8;
    font-size: 0.7em;
    margin-left: 2px;
    transition: transform 0.15s ease;
}

.das-lang-btn[aria-expanded="true"] .das-lang-caret {
    transform: rotate(180deg);
}

/* ------------------------------------------------------------
   3) เมนูตัวเลือก
   ปิดไว้ด้วย display:none แล้วเปิดตาม aria-expanded ของปุ่ม — สถานะที่
   โปรแกรมอ่านหน้าจอใช้ กับสถานะที่ตาเห็น จึงเป็นค่าตัวเดียวกันเสมอ
   ไม่มีทางเกิดกรณี "เมนูเปิดอยู่แต่ aria บอกว่าปิด"
   ถ้า i18n.js เลือกใช้ attribute hidden ด้วย ก็ยังได้ผลเหมือนกัน (กฎถัดไป)
   ------------------------------------------------------------ */
.das-lang-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    /* ต่ำกว่า modal-backdrop ของ Bootstrap 4 (1040) และสูงกว่าแถบ sticky (1020) */
    z-index: 1030;
    min-width: 186px;
    max-width: calc(100vw - 32px);
    padding: 6px;
    background: #ffffff;
    border: 1px solid #e3e9f1;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(15, 42, 77, 0.20);
}

.das-lang-btn[aria-expanded="true"] + .das-lang-menu {
    display: block;
}

.das-lang-menu[hidden] {
    display: none !important;
}

.das-lang-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #1f2a44;
    font-family: inherit;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
}

.das-lang-opt:hover {
    background: #eef4fb;
    color: #0f2a4d;
}

.das-lang-opt[aria-checked="true"] {
    background: #e6f0fb;
    font-weight: 600;
}

/* เครื่องหมายถูกขึ้นเฉพาะภาษาที่ใช้อยู่ — ตัวที่ไม่ได้เลือกยังกินที่เท่ากัน
   ข้อความจึงไม่ขยับตอนเปลี่ยนภาษา (visibility ไม่ใช่ display) */
.das-lang-tick {
    margin-left: auto;
    font-size: 0.78em;
    color: #0f8fa6;
    visibility: hidden;
}

.das-lang-opt[aria-checked="true"] .das-lang-tick {
    visibility: visible;
}

/* ------------------------------------------------------------
   4) ช่องบอกผล (บันทึกภาษาไม่สำเร็จ ฯลฯ)
   ตกลงมาเป็นบรรทัดของตัวเองใต้ปุ่ม ไม่ยืดหัวหน้าให้เพี้ยน และไม่ลอยทับข้อความอื่น
   ------------------------------------------------------------ */
.das-lang-status {
    flex: 0 0 100%;
    max-width: 260px;
    font-size: 0.76rem;
    line-height: 1.45;
    color: #b45309;
}

.das-lang-status:empty {
    display: none;
}

/* ------------------------------------------------------------
   5) ฟอนต์ตามอักษรของ *ตัวปุ่มเอง* เท่านั้น
   ชื่อภาษาเขียนด้วยอักษรลาว/พม่า/เขมร ถ้าใช้ฟอนต์ไทยจะขึ้นเป็นกล่องสี่เหลี่ยม
   กฎนี้จำกัดอยู่ใน #langSwitcher — ไม่แตะฟอนต์ของข้อมูลที่ผู้ใช้กรอก
   ------------------------------------------------------------ */
#langSwitcher [lang="lo"] {
    font-family: 'Noto Sans Lao', 'Prompt', sans-serif;
}

#langSwitcher [lang="my"] {
    font-family: 'Noto Sans Myanmar', 'Prompt', sans-serif;
}

#langSwitcher [lang="km"] {
    font-family: 'Noto Sans Khmer', 'Prompt', sans-serif;
}

/* ------------------------------------------------------------
   6) จอแคบ — ให้ *ตกบรรทัด* ตามหัวหน้า ไม่ใช่กลายเป็นกล่องลอย
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .das-lang-btn {
        font-size: 0.8rem;
        padding: 6px 12px;
    }

    #langSwitcher.das-lang {
        margin: 12px 0 2px;
    }

    .das-lang-menu {
        min-width: 172px;
    }
}

/* ------------------------------------------------------------
   7) กระดาษ — เอกสารที่พิมพ์ออกมาไม่มีปุ่มให้กด
   ซ่อนทั้งตะขอด้วย เผื่อหน้าไหนใส่เส้นขอบ/พื้นหลังให้ตะขอไว้เอง
   ------------------------------------------------------------ */
@media print {

    #langSwitcher,
    #langSwitcher.das-lang,
    .das-lang-host,
    [data-das-language-host] {
        display: none !important;
    }
}

/* Header actions must wrap when the language control joins the date-range buttons. */
.kiosk-main { min-width: 0; }
.kiosk-page-head > .d-flex { flex-wrap: wrap; gap: 8px; min-width: 0; }
@media (max-width: 767px) { .kiosk-main { width: 100%; max-width: 100%; } .kiosk-page-head > .d-flex { margin-left: 0 !important; } }
@media (max-width: 767px) { .kiosk-main .kdash-grid2 { grid-template-columns: minmax(0, 1fr); } }