/* _content/WebGpos.Web/Components/Layout/BlazorErrorUi.razor.rz.scp.css */
#blazor-error-ui[b-sgr31scfay] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-sgr31scfay] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/WebGpos.Web/Components/Layout/MainLayout.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
   จุดยุบเมนู (nav collapse breakpoint) = 1080px

   Bootstrap 3 ยุบ navbar เป็น hamburger ที่ 768px แต่เมนูชุดนี้กว้างกว่านั้นมาก
   วัดจริง (Chromium, เมนูตอนล็อกอิน 6 items หลังตัดปุ่มออกจากระบบที่ซ้ำออกแล้ว):
   โลโก้ 198px + items 826px + ระยะขอบ ≈ 1054px
   ช่วง 768–1053px จึงตกลงมาเป็น 2 บรรทัด

   การลด font-size ไม่ช่วย — 2rem→1.9rem ประหยัดได้แค่ 5px เพราะความกว้าง
   ถูกครองโดย padding ของ BS3 (10px 15px × 6 items) กับโลโก้ ซึ่งไม่ขึ้นกับ font

   ทางแก้: เลื่อนจุดยุบมาที่ 1080px (= 1054 + slack) โดย override บล็อก
   @media (min-width: 768px) ของ BS3 ให้กลับไปเป็นโหมดยุบตลอดช่วง ≤1079px
   ── ถ้าจะขยับจุดยุบ ต้องแก้ค่า 1080/1079 ให้ครบทุกที่ในไฟล์นี้
   ══════════════════════════════════════════════════════════════════════ */

/* ── ขนาดตัวอักษรของ nav items ── */
.custom-nav .navbar-nav > li > a[b-mnvsytlam0],
.custom-nav .navbar-nav .btn-link[b-mnvsytlam0],
.custom-nav .dropdown-menu > li > a[b-mnvsytlam0] {
    font-size: 1.9rem;
}

/* ชื่อผู้ใช้ยาว ๆ จะดัน nav item จนเมนูแถวบนล้น/ตกบรรทัด
   จำกัดไว้ ~8 ตัวอักษร (8ch) ส่วนที่เกินตัดเป็น … ตัวเต็มดูได้จาก title */
.nav-username[b-mnvsytlam0] {
    display: inline-block;
    max-width: 8ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* ปุ่มออกจากระบบมี 2 ที่ (ใน dropdown ผู้ใช้ / เป็น item แยก) — แสดงทีละอัน
   ตามพฤติกรรมเดิมของ #liSignOutPC / #liSignOutMB ใน Web Forms
   ค่าเริ่มต้น = โหมดยุบ แล้วค่อยสลับที่ ≥1080px ข้างล่าง */
.li-signout-pc[b-mnvsytlam0] {
    display: none;
}

.li-signout-mb[b-mnvsytlam0] {
    display: block;
}

/* ปุ่มออกจากระบบเป็น <button class="btn-link"> ไม่ใช่ <a> จึงไม่ได้ padding/เส้นขอบ
   ชุดเดียวกับรายการอื่น ต้องเซ็ตให้ตรงกันเองไม่งั้นข้อความเยื้องกว่าเพื่อน */
.custom-nav .navbar-nav .btn-link[b-mnvsytlam0] {
    border: 0;
    text-align: left;
}

.custom-nav .li-signout-pc .btn-link[b-mnvsytlam0] {
    padding: 3px 20px;
}

/* 10px = padding ของ <a> ตัวอื่นในเมนูตอนยุบ (วัดจาก computed style) ให้ข้อความตรงแนวกัน */
.custom-nav .li-signout-mb .btn-link[b-mnvsytlam0] {
    padding: 10px;
}

/* ไอคอนหน้าหลัก/ตะกร้าใน navbar-header — คู่กับ hamburger จึงโผล่เฉพาะตอนเมนูยุบ */
.nav-icon[b-mnvsytlam0] {
    display: none;
}


/* ══════════ โหมดเมนูยุบ (≤ 1079px) ══════════
   BS3 เปิดโหมดแถวเดียวตั้งแต่ 768px — ตรงนี้ยัดกลับให้เป็นโหมดยุบจนถึง 1079px */
@media (max-width: 1079px) {

    /* --- ปุ่มเมนู + เมนูที่กางออก (กลับค่าจาก @media (min-width: 768px) ของ BS3) --- */
    .custom-nav .navbar-toggle[b-mnvsytlam0] {
        display: block;
    }

    .custom-nav .navbar-header[b-mnvsytlam0] {
        float: none;
    }

    .custom-nav .navbar-collapse[b-mnvsytlam0] {
        width: auto;
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
    }

        /* BS3 บังคับ display: block !important ที่ ≥768px จึงต้องใช้ !important สู้ */
        .custom-nav .navbar-collapse.collapse[b-mnvsytlam0] {
            display: none !important;
        }

            .custom-nav .navbar-collapse.collapse.in[b-mnvsytlam0] {
                display: block !important;
                height: auto !important;
                overflow: visible !important;
            }

    .custom-nav .navbar-collapse.collapsing[b-mnvsytlam0] {
        display: block !important;
    }

    /* BS3 ตัด padding ข้างของ .navbar-fixed-top .navbar-collapse ทิ้งที่ ≥768px */
    .custom-nav .navbar-collapse[b-mnvsytlam0] {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* --- รายการเมนูเรียงลงล่าง ไม่ลอยซ้าย/ขวา --- */
    .custom-nav .navbar-nav[b-mnvsytlam0] {
        float: none;
    }

        .custom-nav .navbar-nav > li[b-mnvsytlam0] {
            float: none;
        }

            .custom-nav .navbar-nav > li > a[b-mnvsytlam0] {
                padding-top: 10px;
                padding-bottom: 10px;
            }

    .custom-nav .navbar-right[b-mnvsytlam0] {
        float: none !important;
        margin-right: -15px;
    }

    /* dropdown กางในบรรทัดแทนที่จะลอยทับ (BS3 ทำให้เฉพาะ ≤767px) */
    .custom-nav .navbar-nav .open .dropdown-menu[b-mnvsytlam0] {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        box-shadow: none;
    }

        .custom-nav .navbar-nav .open .dropdown-menu > li > a[b-mnvsytlam0] {
            padding: 5px 15px 5px 25px;
            line-height: 20px;
        }

    /* ออกจากระบบ: โหมดยุบใช้ item แยก ไม่ใช่อันใน dropdown (ค่าเริ่มต้นด้านบนถูกแล้ว) */

    /* --- แถวบน: โลโก้ชิดซ้าย, ไอคอนหน้าหลัก + ปุ่มเมนู ชิดขวาและอยู่กึ่งกลางแนวตั้ง
           (ของเดิมใช้ float + margin-top ค่าคงที่ 8px/37px ทำให้ไอคอนสองตัวเยื้องกัน) --- */
    .custom-nav .navbar-header[b-mnvsytlam0] {
        display: flex;
        align-items: center;
    }

    .custom-nav .navbar-brand[b-mnvsytlam0] {
        margin-right: auto;
        min-width: 0;
        padding: 15px;
    }

    /* จอแคบมาก (เช่น 320px) โลโก้ต้องย่อได้ ไม่งั้นดันไอคอนตกขอบ */
    .custom-nav .custom_nav_logo[b-mnvsytlam0] {
        height: auto;
        max-height: 90px;
        max-width: 100%;
    }

    .custom-nav .nav-icon[b-mnvsytlam0],
    .custom-nav .navbar-toggle[b-mnvsytlam0] {
        flex: none;
        float: none;
        margin: 0 0 0 12px;
        padding: 0;
        line-height: 1;
    }

    .custom-nav .nav-icon[b-mnvsytlam0] {
        display: inline-block;
    }

        /* .navbar-header มี margin ติดลบ -15px ตาม BS3 — เว้นขวาให้ปุ่มเมนูไม่ชิดขอบจอ */
        .custom-nav .navbar-toggle[b-mnvsytlam0] {
            margin-right: 15px;
        }

        .custom-nav .nav-icon .navfont[b-mnvsytlam0] {
            font-size: 2.2rem;
        }

    /* --- เมนูที่กางออก: BS3 ตรึง .navbar-fixed-top .navbar-collapse ไว้ที่ max-height 340px
           (และ 200px ตอนจอแนวนอน) ทำให้รายการล่าง ๆ ถูกตัดหายโดยไม่มีอะไรบอกว่าเลื่อนได้
           → ปล่อยความสูงเมนู แล้วให้ทั้ง navbar เลื่อนภายในตัวเองแทน สูงสุดเท่าที่จอเหลือ
           (45px = ความสูงแถบโซเชียล ตรงกับ .custom-nav { top: 45px } ใน Custom.css) --- */
    .custom-nav[b-mnvsytlam0] {
        max-height: calc(100vh - 45px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .custom-nav .navbar-collapse[b-mnvsytlam0] {
        max-height: none;
        overflow-y: visible;
        padding-top: 7.5px;
        padding-bottom: 7.5px;
    }

    /* ul สองก้อน (ซ้าย/ขวา) ต่อกันเป็นรายการเดียว ไม่ให้เกิดช่องว่างคั่นกลางเหมือนเมนูขาด
       (ทับ .navbar-nav { margin-top: 57px } ของ Custom.css ที่เปิดตั้งแต่ 768px) */
    .custom-nav .navbar-nav[b-mnvsytlam0] {
        margin-top: 0;
        margin-bottom: 0;
    }

    /* BS3 ตั้ง white-space: nowrap ให้ dropdown ทุกจอ — ชื่อรายการยาว ๆ (ประวัติการออม)
       จะล้นออกนอกจอตอนเมนูยุบ */
    .custom-nav .dropdown-menu > li > a[b-mnvsytlam0] {
        white-space: normal;
    }
}


/* ══════════ โหมดแถวเดียว (≥ 1080px) ══════════ */
@media (min-width: 1080px) {

    /* ออกจากระบบใช้อันที่อยู่ใน dropdown ผู้ใช้ ซ่อน item แยก */
    .li-signout-pc[b-mnvsytlam0] {
        display: block;
    }

    .li-signout-mb[b-mnvsytlam0] {
        display: none;
    }

    /* จัดเมนูให้อยู่กึ่งกลางแนวตั้งเทียบกับโลโก้
       ของเดิม Custom.css ดันเมนูลงด้วย .navbar-nav { margin-top: 57px } ซึ่งเป็นค่าตายตัว
       ทำให้เมนูไปกองชิดล่าง และพังทันทีถ้าความสูงโลโก้/ฟอนต์เปลี่ยน
       → ใช้ flex ที่ .container-fluid จัดกึ่งกลางแทน แล้วล้าง margin-top ทิ้ง
       (ข้างใน .navbar-collapse ยังเป็น float ตาม BS3 เหมือนเดิม — ul ซ้าย/ขวายังทำงานปกติ) */
    .custom-nav .container-fluid[b-mnvsytlam0] {
        display: flex;
        align-items: center;
    }

    .custom-nav .navbar-collapse[b-mnvsytlam0] {
        flex: 1 1 auto;
        min-width: 0;
    }

    .custom-nav .navbar-nav[b-mnvsytlam0] {
        margin-top: 0;
        margin-bottom: 0;
    }
}