/* /Components/Layout/CultureSelector.razor.rz.scp.css */
/* Desktop: Hover effect สำหรับปุ่มธง */
.btn.rounded-circle:hover[b-3gkf5dta4k] {
    transform: translateY(-3px) scale(1.05);
    border-color: var(--bs-primary) !important;
}

/* Active state effect */
.btn.rounded-circle.border-primary[b-3gkf5dta4k] {
    transform: scale(1.1);
}

/* Smooth image scale transition */
.btn.rounded-circle img[b-3gkf5dta4k] {
    transition: transform 0.3s ease;
}

/* Focus visible for accessibility */
.btn.rounded-circle:focus-visible[b-3gkf5dta4k] {
    outline: 3px solid var(--bs-primary);
    outline-offset: 3px;
}

/* Desktop: ขนาดปุ่มธง */
@media (min-width: 992px) {
    .btn.rounded-circle[b-3gkf5dta4k] {
        width: 45px !important;
        height: 45px !important;
    }
}

/* ========== Mobile Custom Dropdown ========== */

/* Wrapper for positioning */
.culture-dropdown-wrapper[b-3gkf5dta4k] {
    position: relative;
}

/* Dropdown Toggle Button */
.culture-dropdown-toggle[b-3gkf5dta4k] {
    border: 1px solid var(--bs-secondary);
    border-radius: 6px;
    background-color: white;
    min-width: 45px;
    height: 32px;
    transition: all 0.3s ease;
}

    .culture-dropdown-toggle:hover[b-3gkf5dta4k] {
        border-color: var(--bs-primary);
        box-shadow: 0 2px 8px rgba(13, 110, 253, 0.2);
        background-color: white;
    }

    .culture-dropdown-toggle:focus[b-3gkf5dta4k] {
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        background-color: white;
    }

/* Flag Image */
.flag-image[b-3gkf5dta4k] {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
}

/* Short Name Text */
.culture-short-name[b-3gkf5dta4k] {
    font-size: 1rem;
    font-weight: 600;
}

/* Dropdown Menu */
.culture-dropdown-menu[b-3gkf5dta4k] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background-color: white;
    border: 1px solid var(--bs-secondary);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    /*min-width: 60px;*/
    overflow: hidden;
}

/* Dropdown Item */
.culture-dropdown-item[b-3gkf5dta4k] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 34px !important;
    border: none;
    background-color: white;
    text-align: left;
    transition: all 0.2s ease;
    font-size: 0.85rem;
    font-weight: 500;
}

    .culture-dropdown-item:hover[b-3gkf5dta4k] {
        background-color: rgba(13, 110, 253, 0.1);
    }

    .culture-dropdown-item.active[b-3gkf5dta4k] {
        background-color: rgba(13, 110, 253, 0.2);
    }

    .culture-dropdown-item:not(:last-child)[b-3gkf5dta4k] {
        border-bottom: 1px solid #e9ecef;
    }
/* /Components/Layout/Drawer.razor.rz.scp.css */
.drawer-container[b-w7htz9li5z] {
    height: 100%;
}

[b-w7htz9li5z] .panel-open:not(.mobile) .menu-button {
    display: none;
}

[b-w7htz9li5z] .navigation-drawer > .dxbl-drawer-panel {
/*    background-image: linear-gradient(180deg, var(--bs-primary, var(--DS-primary-90)) 0%, var(--bs-black, #000) 150%);*/
    background-color: #003875;
}

[b-w7htz9li5z] .navigation-drawer > .dxbl-drawer-content {
    overflow: auto;
}

[b-w7htz9li5z] .navigation-drawer > .dxbl-drawer-panel > .dxbl-drawer-header {
    border-bottom: none;
    padding: 2rem 1rem;
    background: none;
}

[b-w7htz9li5z] .navigation-drawer > .dxbl-drawer-panel > .dxbl-drawer-header > .navigation-drawer-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

[b-w7htz9li5z] .navigation-drawer > .dxbl-drawer-panel > .dxbl-drawer-body {
    --dxbl-drawer-panel-body-padding-x: 0;
    --dxbl-drawer-panel-body-padding-y: 1rem;
}

[b-w7htz9li5z] .navigation-drawer > .dxbl-drawer-panel > .dxbl-drawer-footer {
    --dxbl-drawer-panel-footer-justify-content: center;
    border-top: none;
    padding-bottom: 1.5rem;
    width: 240px;
    background: none;
}

[b-w7htz9li5z] .navigation-drawer > .dxbl-drawer-panel {
    display: flex;
}

[b-w7htz9li5z] .navigation-drawer.mobile > .dxbl-drawer-panel {
    display: none;
}

[b-w7htz9li5z] .navigation-drawer > .dxbl-drawer-content > .navigation-drawer-shading {
    display: none;
}

@media (max-width: 768px) {
    [b-w7htz9li5z] .panel-open:not(.mobile) .menu-button {
        display: inline-flex;
    }

    [b-w7htz9li5z] .navigation-drawer > .dxbl-drawer-panel {
        display: none;
    }

    [b-w7htz9li5z] .navigation-drawer.mobile > .dxbl-drawer-panel {
        display: flex;
        z-index: 1200;
    }

    [b-w7htz9li5z] .navigation-drawer > .dxbl-drawer-content > .navigation-drawer-shading {
        background-color: var(--dxbl-drawer-content-shading-bg);
        display: block;
        height: 100%;
        position: absolute;
        transition: ease var(--dxbl-drawer-animation-duration);
        transition-property: opacity, visibility;
        visibility: visible;
        width: 100%;
        z-index: 1100;
        opacity: var(--dxbl-drawer-content-shading-opacity);
    }

    [b-w7htz9li5z] .navigation-drawer.mobile.panel-closed .navigation-drawer-shading {
        opacity: 0;
        visibility: hidden;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-d3848414co] {
    height: 100%;
    font-family: var(--bs-font-sans-serif, var(--DS-font-family-sans-serif));
    min-height: 0;
}

.logo[b-d3848414co] {
    text-align: center;
}

[b-d3848414co] .icon-back {
    --icon-mask-image: var(--icon-back-mask-image);
}

[b-d3848414co] .icon-close {
    --icon-mask-image: var(--icon-close-mask-image);
}

[b-d3848414co] .icon-menu {
    --icon-mask-image: var(--icon-menu-mask-image);
}


[b-d3848414co] .docs-icon {
    --icon-mask-image: var(--icon-docs-mask-image);
}

[b-d3848414co] .demos-icon {
    --icon-mask-image: var(--icon-demos-mask-image);
}

[b-d3848414co] .footer-button:hover .demos-icon {
    background-color: var(--dxbl-btn-hover-color);
}

[b-d3848414co] .footer-button:hover .docs-icon {
    background-color: var(--dxbl-btn-hover-color);
}

[b-d3848414co] .menu-button:hover .icon {
    background-color: var(--dxbl-btn-hover-color);
}

[b-d3848414co] .menu-button-nav:hover .icon {
    background-color: var(--dxbl-btn-hover-color);
}

.panel-open .menu-button[b-d3848414co] {
    display: inline-flex;
}

.nav-buttons-container[b-d3848414co] {
    display: flex;
    gap: 10px;
    padding: 1rem 1rem;
}

.nav-buttons-container[b-d3848414co]  .menubutton-float-end {
    margin-left: auto;
}


/* แก้ไข header-controls ให้ align ตรง */
[b-d3848414co] .navigation-drawer-header .header-controls {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* แก้ไข logo ให้ align ตรง */
[b-d3848414co] .navigation-drawer-header .logo {
    display: flex;
    align-items: center;
}

/* =========== หัว drawer: โลโก้ MCIC + ปุ่มปิด =========== */
/* เส้นคั่นอยู่ใต้แถวโลโก้ (ไม่ใช่ใต้ "เมนูหลัก") ตามภาพที่ทีมส่งมา
   margin ติดลบ = ดันเส้นให้ยาวเต็มความกว้างแผง แม้ header จะมี padding ด้านข้าง */
[b-d3848414co] .drawer-brand {
    margin: 0 -1rem;
    padding: 0 1rem 1rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

[b-d3848414co] .drawer-logo-box {
    display: flex;
    align-items: center;
    margin-right: 0.5rem;
}

[b-d3848414co] .drawer-logo {
    width: 108px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* =========== หัวข้อ "เมนูหลัก" ด้านบนรายการเมนูใน drawer =========== */
.drawer-menu-title[b-d3848414co] {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0 1rem 0.75rem 1rem;
    margin-bottom: 0.25rem;
}

/* =========== ปุ่มปิด drawer (มุมขวาบน) =========== */
[b-d3848414co] .header-controls .menu-button-nav .icon {
    --icon-width: 1.375rem;
    --icon-height: 1.375rem;
    margin-left: 0;
}

@media (max-width: 991.98px) {
    .drawer-menu-title[b-d3848414co] {
        font-size: 1.5rem;
    }

    [b-d3848414co] .header-controls .menu-button-nav {
        min-width: 44px;
        min-height: 44px;
        padding: 0.4rem 0.55rem !important;
        border: 1px solid rgba(255, 255, 255, 0.45) !important;
        border-radius: 10px !important;
    }

        [b-d3848414co] .header-controls .menu-button-nav .icon {
            --icon-width: 1.625rem;
            --icon-height: 1.625rem;
        }
}
/* /Components/Layout/Navbar.razor.rz.scp.css */
/* =========== navbar container =========== */
.navbar-custom[b-ahiw4ygfju] {
    z-index: 1050; /* Ensure navbar is above page-level loading panel (1000) but below mobile drawer (1100+) */
    position: relative;
}

/* =========== dxmenu username button spacing =========== */
.navbar-custom[b-ahiw4ygfju]  .button-username {
    background: white; /* หรือ transparent แล้วแต่ธีม */
    /*color: white !important;*/
}

    .navbar-custom[b-ahiw4ygfju]  .button-username .dxbl-btn {
        /*color: white !important;*/
    }

        .navbar-custom[b-ahiw4ygfju]  .button-username .dxbl-btn:hover {
            cursor: auto;
            background-color: white !important;
        }

/*        .navbar-custom ::deep .button-username .dxbl-btn:active {
            background-color: white !important;
        }*/

/* =========== dxmenu logout button spacing =========== */
.navbar-custom[b-ahiw4ygfju]  .button-language {
    background: white; /* หรือ transparent แล้วแต่ธีม */
    z-index: 10; /* กันโดนเมนูทับ */
    color: white !important;
    border-radius: 50% !important;
}

    .navbar-custom[b-ahiw4ygfju]  .button-language .dxbl-btn {
        color: white !important;
    }

        .navbar-custom[b-ahiw4ygfju]  .button-language .dxbl-btn:hover {
            cursor: auto;
            background-color: white !important;
            border-radius: 50% !important;
        }

        .navbar-custom[b-ahiw4ygfju]  .button-language .dxbl-btn:active {
            border-radius: 50% !important;
            background-color: white !important;
            color: white !important;
        }

/* =========== logout button desktop =========== */
.navbar-custom[b-ahiw4ygfju]  .dxmenu-button-logout {
    background: white; /* หรือ transparent แล้วแต่ธีม */
    z-index: 10; /* กันโดนเมนูทับ */
    color: white !important;
    border-radius: 50% !important;
}

    .navbar-custom[b-ahiw4ygfju]  .dxmenu-button-logout .dxbl-btn {
        color: white !important;
    }

        .navbar-custom[b-ahiw4ygfju]  .dxmenu-button-logout .dxbl-btn:hover {
            cursor: auto;
            background-color: white !important;
            border-radius: 50% !important;
        }

        .navbar-custom[b-ahiw4ygfju]  .dxmenu-button-logout .dxbl-btn:active {
            border-radius: 50% !important;
            background-color: white !important;
            color: white !important;
        }

/* =========== logout button desktop =========== */
.navbar-custom .button-logout-desktop[b-ahiw4ygfju] {
    border: 1px solid red !important;
    z-index: 10;
    color: white !important;
    border-radius: 32px !important;
    transition: all 0.3s ease-in-out !important;
    background-color: red !important;
}

    .navbar-custom .button-logout-desktop:active[b-ahiw4ygfju] {
        border: 1px solid red !important;
        border-radius: 32px !important;
        transition: all 0.3s ease-in-out !important;
        background-color: white !important;
        color: red !important;
        transform: translateY(-3px) scale(1.05);
    }

    .navbar-custom .button-logout-desktop:hover[b-ahiw4ygfju] {
        cursor: pointer;
        transform: translateY(-3px) scale(1.05);
        border: 1px solid red !important;
        background-color: white !important;
        color: red !important;
        border-radius: 32px !important;
        transition: all 0.3s ease-in-out !important;
    }
 

/* =========== logout button mobile =========== */
.navbar-custom[b-ahiw4ygfju]  .button-logout-custom-mobile {
    top: 0.6rem; /* ระยะห่างจากขอบบน */
    right: 0.75rem; /* ระยะห่างจากขอบขวา */
    background: white; /* หรือ transparent แล้วแต่ธีม */
    z-index: 10; /* กันโดนเมนูทับ */
    padding: 6px 10px; /* ขนาดปุ่มพอดี */

    color: red !important;
    border-radius: 50% !important;
}

    .navbar-custom[b-ahiw4ygfju]  .button-logout-custom-mobile .dxbl-btn {
        color: red !important;
    }

        .navbar-custom[b-ahiw4ygfju]  .button-logout-custom-mobile .dxbl-btn:hover {
            border-radius: 50% !important;
        }

        .navbar-custom[b-ahiw4ygfju]  .button-logout-custom-mobile .dxbl-btn:active {
            border-radius: 50% !important;
            background-color: red !important;
            color: white !important;
        }

/* =========== center devexpress menu item text (navbar user profile) =========== */
.navbar-custom[b-ahiw4ygfju]  .dxbl-menu-item-text-container {
    margin-right: 0 !important;
}

/* =========== hamburger button =========== */
/* ขยายไอคอนจากค่า default 1rem ของ .icon (theme-bs.css) ให้เห็นชัดขึ้น */
.navbar-custom[b-ahiw4ygfju]  .menu-button-nav .icon {
    --icon-width: 1.375rem;
    --icon-height: 1.375rem;
    margin-left: 0;
}

/* mobile (< 992px) — ผู้ใช้แจ้งว่ามองไม่ค่อยเห็น จึงขยายทั้งไอคอนและกรอบปุ่ม
   ให้ได้ tap target ขนาด 44x44 ตามมาตรฐาน touch */
@media (max-width: 991.98px) {
    .navbar-custom[b-ahiw4ygfju]  .menu-button-nav {
        min-width: 44px;
        min-height: 44px;
        padding: 0.4rem 0.55rem !important;
        border: 1px solid rgba(0, 56, 117, 0.4) !important;
        border-radius: 10px !important;
        color: #003875 !important;
    }

        .navbar-custom[b-ahiw4ygfju]  .menu-button-nav .icon {
            --icon-width: 1.75rem;
            --icon-height: 1.75rem;
        }

        .navbar-custom[b-ahiw4ygfju]  .menu-button-nav:active {
            background-color: rgba(0, 56, 117, 0.12) !important;
        }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
[b-5ynoi5llro] .menu.display-mobile {
    margin-bottom: 2rem;
}

[b-5ynoi5llro] .menu {
    --dxbl-menu-bottom-left-border-radius: 0;
    --dxbl-menu-bottom-right-border-radius: 0;
    --dxbl-menu-top-left-border-radius: 0;
    --dxbl-menu-top-right-border-radius: 0;
    /* ⚠ ข้อความของ DxMenuItem เรนเดอร์เป็น .dxbl-btn ข้างในรายการ ซึ่ง DevExpress ตั้ง
       --dxbl-btn-font-size: var(--dxbl-menu-item-font-size) ด้วย selector ที่ specificity สูงมาก
       → ตั้ง font-size ที่ .menu-item ไม่มีผล ต้องเปลี่ยนที่ตัวแปรนี้เท่านั้น (ค่า theme = 0.875rem) */
    --dxbl-menu-item-font-size: 1.0625rem;
    --dxbl-menu-item-line-height: 1.35;
    background-color: inherit;
}

[b-5ynoi5llro] .menu .dxbl-menu-item-list {
    gap: 0rem;
}

[b-5ynoi5llro] .menu-item {
    color: var(--bs-white, #fff);
    padding: 10px 14px;
    position: relative;
    border-radius: 0;
}

/* รายการที่เปิดอยู่ = แถบสีฟ้าเต็มความกว้าง + ขีดขาวด้านซ้าย (ตามภาพที่ทีมส่งมา)
   ต้องใช้ !important เพราะ .active-menu ใน site.css ตั้ง background/color แบบ !important ไว้ */
[b-5ynoi5llro] .menu-item.active-menu {
    background-color: #0d5cb6 !important;
    color: #fff !important;
    border-radius: 0;
}

    [b-5ynoi5llro] .menu-item.active-menu::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background-color: #fff;
    }

[b-5ynoi5llro] .menu-item:not(.active-menu):hover {
    background-color: rgba(255, 255, 255, 0.12);
}

/* กันเหนียวอีกชั้น เผื่อ theme อื่นไม่ได้ผูก font-size ไว้กับตัวแปรข้างบน
   specificity (0,3,0) ชนะกฎ .dxbl-btn (0,1,0) ที่เป็นตัวกำหนดขนาดจริง จึงไม่ต้องใช้ !important */
[b-5ynoi5llro] .menu-item .dxbl-btn {
    font-size: 1.0625rem;
    font-weight: 500;
}

/* drawer กว้าง 240px — ฟอนต์ใหญ่ขึ้นแล้วข้อความยาว (vi / my) อาจล้น จึงให้ตัดบรรทัดแทนถูกตัดทิ้ง */
[b-5ynoi5llro] .menu-item .dxbl-menu-item-text {
    font-size: inherit;
    white-space: normal;
    line-height: 1.35;
}

[b-5ynoi5llro] .icon {
    margin-left: 0.5rem;
}

[b-5ynoi5llro] .home-icon {
    --icon-mask-image: var(--icon-home-mask-image);
}

[b-5ynoi5llro] .weather-icon {
    --icon-mask-image: var(--icon-weather-mask-image);
}

[b-5ynoi5llro] .counter-icon {
    --icon-mask-image: var(--icon-counter-mask-image);
}

/* .icon-sidebar เป็น <i> ของ Font Awesome — width/height คือกล่อง, font-size คือขนาดตัวไอคอนจริง
   ของเดิมไม่ได้ตั้ง font-size ไอคอนเลย inherit มาเล็กตามค่า default */
[b-5ynoi5llro] .icon-sidebar {
    width: 34px;
    height: 34px;
    font-size: 1.375rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 768px) {
    #sidebar[b-5ynoi5llro] {
        min-width: inherit;
        max-width: inherit;
        display: block;
    }

    .logo[b-5ynoi5llro] {
        text-align: inherit;
    }
}

/* mobile — แถวเมนูสูงขึ้นให้นิ้วแตะง่าย ตัวหนังสือใหญ่ขึ้นตามภาพที่ทีมส่งมา */
@media (max-width: 991.98px) {
    [b-5ynoi5llro] .menu {
        --dxbl-menu-item-font-size: 1.1875rem;
    }

    [b-5ynoi5llro] .menu-item {
        padding: 14px 16px;
    }

    [b-5ynoi5llro] .menu-item .dxbl-btn {
        font-size: 1.1875rem;
        font-weight: 600;
    }

    [b-5ynoi5llro] .icon-sidebar {
        width: 34px;
        height: 34px;
        font-size: 1.5rem;
    }
}

[b-5ynoi5llro] .nav-menu-disabled {
    pointer-events: none;
    opacity: 0.5;
}
/* /Components/Pages/Approve/Approve.razor.rz.scp.css */
.mobile-view[b-rn2d99aoy2] {
    display: none;
}

.desktop-view[b-rn2d99aoy2] {
    display: block;
}

@media (max-width: 768px) {
    .mobile-view[b-rn2d99aoy2] {
        display: block;
    }

    .desktop-view[b-rn2d99aoy2] {
        display: none;
    }
}
/* /Components/Pages/Approve/Component/Locationmapmodal.razor.rz.scp.css */
/* Modal Styles */
.location-modal-overlay[b-m87xldlk0m] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999 !important;
    padding: 20px;
}

.location-modal-content[b-m87xldlk0m] {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 1000px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    z-index: 100000 !important
}

.location-modal-header[b-m87xldlk0m] {
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .location-modal-header h2[b-m87xldlk0m] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: #1f2937;
    }

.location-modal-close[b-m87xldlk0m] {
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

    .location-modal-close:hover[b-m87xldlk0m] {
        background-color: #f3f4f6;
        color: #1f2937;
    }

.location-modal-body[b-m87xldlk0m] {
    flex: 1;
    padding: 20px;
    overflow: hidden;
    min-height: 500px;
}

/* Map Container - สำคัญมาก! */
#locationMapContainer[b-m87xldlk0m] {
    width: 100%;
    height: 100%;
    min-height: 500px;
    border-radius: 8px;
    background-color: #f3f4f6;
}

.location-modal-footer[b-m87xldlk0m] {
    padding: 20px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.location-modal-footer-desktop[b-m87xldlk0m] {
    padding: 10px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.location-info[b-m87xldlk0m] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.location-count[b-m87xldlk0m] {
    color: #6b7280;
    font-size: 0.875rem;
}

.location-modal-close-btn[b-m87xldlk0m] {
    padding: 8px 16px;
    background-color: #f3f4f6;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    color: #374151;
}

    .location-modal-close-btn:hover[b-m87xldlk0m] {
        background-color: #e5e7eb;
    }

/* Status Badges */
.status-badge[b-m87xldlk0m] {
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge-approve[b-m87xldlk0m] {
    background-color: #d1fae5;
    color: #065f46;
}

.status-badge-pending[b-m87xldlk0m] {
    background-color: #fef3c7;
    color: #92400e;
}

.status-badge-cancel[b-m87xldlk0m] {
    background-color: #fee2e2;
    color: #991b1b;
}

.status-badge-request[b-m87xldlk0m] {
    background-color: #dbeafe;
    color: #1e40af;
}

.status-badge-default[b-m87xldlk0m] {
    background-color: #f3f4f6;
    color: #374151;
}
/* /Components/Pages/Approve/Desktop/ApproveRqDesktop.razor.rz.scp.css */
.approve-request-desktop[b-gw460wgkjf]  .dxbl-grid-table > thead > tr > th {
    text-align: center !important;
    background-color: #0d6efd !important;
    color: white !important;
    padding: 12px !important;
}
/* เปลี่ยนสี checkbox ในหัวตาราง (Header checkbox) เท่านั้น */
.approve-request-desktop[b-gw460wgkjf] 
    .dxbl-grid-table > thead > tr > th:nth-child(1)
    .dxbl-checkbox:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio):not(.dxbl-readonly):not(.dxbl-disabled) {
    --dxbl-checkbox-check-element-border: white; /* สีขอบ */
}
/* /Components/Pages/Approve/Mobile/ApproveRqMobile.razor.rz.scp.css */
/* Mobile Approve Request Wrapper */
.mobile-approve-wrapper[b-486c7moon8] {
    min-height: 100vh;
    background-color: #f5f5f5;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    padding-bottom: 2rem;
}

/* Sticky Action Bar at Top */
.sticky-action-bar[b-486c7moon8] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: linear-gradient(135deg, #198754 0%, #20c997 100%);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: slideDown-b-486c7moon8 0.3s ease-out;
}

@keyframes slideDown-b-486c7moon8 {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.action-bar-content[b-486c7moon8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    gap: 1rem;
    background: linear-gradient(135deg, #198754 0%, #20c997 100%);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: slideDown-b-486c7moon8 0.3s ease-out;
}

.selected-info[b-486c7moon8] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
}

    .selected-info i[b-486c7moon8] {
        font-size: 1.1rem;
    }

    .selected-info strong[b-486c7moon8] {
        font-size: 1.1rem;
        font-weight: 700;
    }

.action-buttons-top[b-486c7moon8] {
    display: flex;
    gap: 0.5rem;
}

.btn-action-top[b-486c7moon8] {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

    .btn-action-top i[b-486c7moon8] {
        font-size: 0.9rem;
    }

.btn-approve-top[b-486c7moon8] {
    background: white;
    color: #198754;
}

    .btn-approve-top:active[b-486c7moon8] {
        transform: scale(0.95);
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

.btn-reject-top[b-486c7moon8] {
    background: #dc3545;
    color: white;
}

    .btn-reject-top:active[b-486c7moon8] {
        transform: scale(0.95);
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

/* Header - adjust position when sticky bar is shown */
.mobile-header[b-486c7moon8] {
    background: #0d6efd;
    color: white;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.sticky-action-bar ~ .mobile-header[b-486c7moon8],
.mobile-approve-wrapper:has(.sticky-action-bar) .mobile-header[b-486c7moon8] {
    top: 52px; /* Height of sticky action bar */
}

.mobile-back-btn[b-486c7moon8] {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.15rem;
    padding: 0.25rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.mobile-back-btn:active[b-486c7moon8] {
    opacity: 0.6;
}

.header-title[b-486c7moon8] {
    font-size: 1.1rem;
    font-weight: 500;
    flex: 1;
}

.badge-count[b-486c7moon8] {
    background: #fff;
    color: #0d6efd;
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Loading */
.loading-container[b-486c7moon8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
}

/* Tabs */
.tabs-container[b-486c7moon8] {
    background: white;
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 57px;
    z-index: 99;
}

/* Adjust tabs position when sticky bar is shown */
.sticky-action-bar ~ * .tabs-container[b-486c7moon8],
.mobile-approve-wrapper:has(.sticky-action-bar) .tabs-container[b-486c7moon8] {
    top: 109px; /* 52px (sticky bar) + 57px (header) */
}

/* เลื่อนแนวนอนได้ — แท็บมีหลายตัวจนล้นความกว้างจอ */
.tabs-wrapper[b-486c7moon8] {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: 0.5rem 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch; /* momentum scroll บน iOS */
    /* ซ่อน scrollbar — บนมือถือใช้การปัดนิ้วแทน */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .tabs-wrapper[b-486c7moon8]::-webkit-scrollbar {
        display: none;
    }

.tab-btn[b-486c7moon8] {
    flex: 0 0 auto; /* ไม่ยืด/ไม่หด — กว้างตามเนื้อหา ปล่อยให้ล้นแล้วเลื่อนเอา */
    min-width: 5.5rem;
    scroll-snap-align: start;
    background: transparent;
    border: none;
    padding: 0.75rem 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    position: relative;
    color: #6c757d;
    transition: all 0.3s;
}

    .tab-btn i[b-486c7moon8] {
        font-size: 1.25rem;
    }

    .tab-btn span[b-486c7moon8] {
        font-size: 0.75rem;
        font-weight: 500;
        white-space: nowrap; /* กันชื่อแท็บยาวตัดขึ้นบรรทัดใหม่ */
    }

    .tab-btn.active[b-486c7moon8] {
        color: #0d6efd;
    }

        .tab-btn.active[b-486c7moon8]::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 10%;
            right: 10%;
            height: 3px;
            background: #0d6efd;
            border-radius: 3px 3px 0 0;
        }

.tab-badge[b-486c7moon8] {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem; /* ค่าคงที่ — ความกว้างปุ่มไม่เท่ากันแล้ว % จะลอยไม่คงที่ */
    background: #dc3545;
    color: white;
    padding: 0.125rem 0.4rem;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    min-width: 18px;
    text-align: center;
}

/* Tab Content */
.tab-content[b-486c7moon8] {
    padding: 0.5rem;
}

.tab-pane[b-486c7moon8] {
    display: none;
}

    .tab-pane.active[b-486c7moon8] {
        display: block;
        animation: fadeIn-b-486c7moon8 0.3s;
    }

@keyframes fadeIn-b-486c7moon8 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Select All Header */
.select-all-header[b-486c7moon8] {
    background: #e7f3ff;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 8px;
}

.select-all-text[b-486c7moon8] {
    font-size: 0.9rem;
    color: #495057;
    font-weight: 500;
}

/* Custom Checkbox */
.custom-checkbox[b-486c7moon8] {
    position: relative;
    display: inline-block;
}

    .custom-checkbox input[type="checkbox"][b-486c7moon8] {
        width: 20px;
        height: 20px;
        border: 2px solid #dee2e6;
        border-radius: 4px;
        cursor: pointer;
        appearance: none;
        background: white;
        transition: all 0.2s;
    }

        .custom-checkbox input[type="checkbox"]:checked[b-486c7moon8] {
            background: #0d6efd;
            border-color: #0d6efd;
        }

            .custom-checkbox input[type="checkbox"]:checked + label[b-486c7moon8]::after {
                content: '✓';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: white;
                font-size: 14px;
                font-weight: bold;
                line-height: 1;
                padding-bottom: 4px;
            }

    .custom-checkbox label[b-486c7moon8] {
        margin: 0;
        cursor: pointer;
    }

/* Request Group - NEW STYLES */
.request-group[b-486c7moon8] {
    background: white;
    margin-bottom: 1rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.group-header-new[b-486c7moon8] {
    padding: 1rem;
}

.group-info-new[b-486c7moon8] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.dept-badge[b-486c7moon8] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    width: fit-content;
}

    .dept-badge i[b-486c7moon8] {
        font-size: 0.85rem;
    }

.group-name-new[b-486c7moon8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
}

    .group-name-new i[b-486c7moon8] {
        font-size: 1.25rem;
    }

.group-count[b-486c7moon8] {
    font-size: 0.85rem;
    opacity: 0.9;
}

/* Group Actions */
.group-actions[b-486c7moon8] {
    background: #f8f9fa;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid #e9ecef;
}

.group-checkbox input[type="checkbox"][b-486c7moon8] {
    width: 20px;
    height: 20px;
}

.group-select-text[b-486c7moon8] {
    font-size: 0.9rem;
    color: #495057;
    font-weight: 500;
}

/* Group Body */
.group-body[b-486c7moon8] {
    padding: 0.5rem;
}

/* Request Card NEW - สำหรับ TmStamp */
.request-card-new[b-486c7moon8] {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    transition: all 0.3s;
}

    .request-card-new.selected[b-486c7moon8] {
        border-color: #0d6efd;
        background: #f0f7ff;
    }
/* Request Card - Original */

.card-header-row[b-486c7moon8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #f8f9fa;
}

.card-container[b-486c7moon8] {
    flex: 1;
    display: flex;
}

.card-date[b-486c7moon8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: #495057;
    font-weight: 500;
    flex: 1;
}

    .card-date i[b-486c7moon8] {
        color: #0d6efd;
    }

    .card-date .btn[b-486c7moon8] {
        margin-left: auto;
    }
/* Timestamp Comparison Table */
.timestamp-table-container[b-486c7moon8] {
    overflow-x: auto;
    margin-top: 0.5rem;
}

.timestamp-comparison-table[b-486c7moon8] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
}

    .timestamp-comparison-table th[b-486c7moon8] {
        background: #f8f9fa;
        padding: 0.5rem 0.25rem;
        text-align: center;
        font-weight: 600;
        font-size: 0.75rem;
        color: #495057;
        border: 1px solid #dee2e6;
        border-right: none;
    }

        .timestamp-comparison-table th:first-child[b-486c7moon8] {
            border-left: 1px solid #dee2e6;
        }

        .timestamp-comparison-table th:last-child[b-486c7moon8] {
            border-right: 1px solid #dee2e6;
        }

    .timestamp-comparison-table td[b-486c7moon8] {
        padding: 0.6rem 0.25rem;
        text-align: center;
        border: 1px solid #dee2e6;
        border-top: none;
        border-right: none;
    }

        .timestamp-comparison-table td:first-child[b-486c7moon8] {
            border-left: 1px solid #dee2e6;
        }

        .timestamp-comparison-table td:last-child[b-486c7moon8] {
            border-right: 1px solid #dee2e6;
        }

/* แถวเวลาเก่า */
.old-time-row td[b-486c7moon8] {
    background: #f8f9fa;
    color: #6c757d;
    font-weight: 500;
}

/* แถวเวลาใหม่ - พื้นหลังสี warning */
.new-time-row td[b-486c7moon8] {
    background: #ffc107;
    color: black;
    font-weight: 600;
    border-bottom: 1px solid #dee2e6;
}

    /* เวลาที่เปลี่ยนแปลง - เน้นชัดขึ้น */
    .new-time-row td.changed-time[b-486c7moon8] {
        background: #ffc107;
        color: #000;
        font-weight: 700;
    }

/* Remark Section */
.remark-section[b-486c7moon8] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 6px;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: #495057;
}

    .remark-section i[b-486c7moon8] {
        color: #6c757d;
        margin-top: 0.2rem;
    }

/* Original Request Card - สำหรับ Leave และ OT */
.request-card[b-486c7moon8] {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    margin-bottom: 0.75rem;
    padding: 0;
    overflow: hidden;
    transition: all 0.3s;
}

    .request-card.selected[b-486c7moon8] {
        border-color: #0d6efd;
        background: #f0f7ff;
    }

.card-header-row[b-486c7moon8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #f8f9fa;
}

.card-body[b-486c7moon8] {
    padding: 0.75rem;
}

.dept-info[b-486c7moon8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #e7f3ff;
    border-radius: 6px;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: #0d6efd;
    font-weight: 500;
}

.leave-details[b-486c7moon8],
.ot-details[b-486c7moon8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detail-item[b-486c7moon8] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 0.85rem;
}

    .detail-item .label[b-486c7moon8] {
        color: #6c757d;
        font-weight: 500;
    }

    .detail-item .value[b-486c7moon8] {
        color: #212529;
        font-weight: 600;
    }

/* Attach Files */
.attach-files[b-486c7moon8] {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 6px;
}

.attach-header[b-486c7moon8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #495057;
}

.attach-file-item[b-486c7moon8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    text-decoration: none;
    color: #0d6efd;
    font-size: 0.85rem;
    transition: all 0.2s;
}

    .attach-file-item:hover[b-486c7moon8] {
        background: #f0f7ff;
        border-color: #0d6efd;
    }

    .attach-file-item:last-child[b-486c7moon8] {
        margin-bottom: 0;
    }

/* Empty State */
.empty-state[b-486c7moon8] {
    text-align: center;
    padding: 3rem 1rem;
    color: #6c757d;
}

    .empty-state i[b-486c7moon8] {
        font-size: 3rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .empty-state p[b-486c7moon8] {
        font-size: 1rem;
        margin: 0;
    }

.group-header[b-486c7moon8] {
    background: #f8f9fa;
    padding: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.2s;
}

    .group-header:hover[b-486c7moon8] {
        background: #e9ecef;
    }

.group-info[b-486c7moon8] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.group-name[b-486c7moon8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #212529;
}

    .group-name i[b-486c7moon8] {
        color: #0d6efd;
        font-size: 1.1rem;
    }

/* Responsive adjustments */
@media (max-width: 576px) {
    .timestamp-comparison-table[b-486c7moon8] {
        font-size: 0.75rem;
    }

        .timestamp-comparison-table th[b-486c7moon8],
        .timestamp-comparison-table td[b-486c7moon8] {
            padding: 0.4rem 0.15rem;
        }

    .action-buttons-top[b-486c7moon8] {
        flex-direction: row;
        gap: 0.35rem;
    }

    .btn-action-top[b-486c7moon8] {
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
    }
}

.accordion[b-486c7moon8] {
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.accordion-header[b-486c7moon8] {
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

    .accordion-header.collapsed i[b-486c7moon8] {
        transform: rotate(90deg);
    }

.accordion-title[b-486c7moon8] {
    font-size: 12px;
    font-weight: bold;
}

.budget-summary[b-486c7moon8] {
    width: 100%;
    padding: 10px;
    background-color: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.budget-checkbox[b-486c7moon8] {
    width: 14px;
    height: 13px;
    border: 1px solid #000;
    background-color: #fff;
}

.budget-info[b-486c7moon8] {
    font-size: 10px;
    font-weight: bold;
}

.table-header[b-486c7moon8] {
    width: 100%;
    display: flex;
    padding: 5px 10px;
    background-color: #fff;
}

.table-header-cell[b-486c7moon8] {
    font-size: 10px;
    font-weight: bold;
}

.table-row[b-486c7moon8] {
    width: 100%;
    display: flex;
    padding: 5px 10px;
    background-color: #fff;
}

.table-cell[b-486c7moon8] {
    font-size: 8px;
}

.checkbox-cell[b-486c7moon8] {
    width: 40px;
    display: flex;
    align-items: center;
}

.name-cell[b-486c7moon8] {
    width: 120px;
}

.date-cell[b-486c7moon8] {
    width: 100px;
}

.hours-cell[b-486c7moon8] {
    width: 40px;
    text-align: right;
}

.total-row[b-486c7moon8] {
    width: 100%;
    display: flex;
    padding: 5px 10px;
    background-color: #fff;
}

.total-label[b-486c7moon8] {
    font-size: 10px;
    font-weight: bold;
    width: 220px;
    text-align: right;
}

.total-value[b-486c7moon8] {
    font-size: 10px;
    font-weight: bold;
    color: #198754;
    width: 40px;
    text-align: right;
}

.checkbox[b-486c7moon8] {
    width: 14px;
    height: 13px;
    border: 1px solid #000;
    background-color: #fff;
}

* Leave/OT Info */
.leave-info[b-486c7moon8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.info-row[b-486c7moon8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 6px;
}

    .info-row .label[b-486c7moon8] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8rem;
        color: #6c757d;
        font-weight: 600;
    }

        .info-row .label i[b-486c7moon8] {
            font-size: 0.85rem;
        }

    .info-row .value[b-486c7moon8] {
        font-size: 0.85rem;
        font-weight: 600;
        color: #212529;
    }

/* Remark Section */
.remark-section[b-486c7moon8] {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
/*    background: #fff3cd;*/
    border-radius: 6px;
    border-left: 3px solid #ffc107;
}

    .remark-section i[b-486c7moon8] {
        color: #f59e0b;
        margin-top: 0.125rem;
        flex-shrink: 0;
    }

    .remark-section span[b-486c7moon8] {
        font-size: 0.8rem;
        color: #664d03;
        line-height: 1.4;
    }

/* Empty State */
.empty-state[b-486c7moon8] {
    text-align: center;
    padding: 3rem 1rem;
    color: #6c757d;
}

    .empty-state i[b-486c7moon8] {
        font-size: 3rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .empty-state p[b-486c7moon8] {
        font-size: 0.95rem;
        margin: 0;
    }

/* Responsive */
@media (max-width: 360px) {
    .tab-btn span[b-486c7moon8] {
        font-size: 0.7rem;
    }

    .tab-btn i[b-486c7moon8] {
        font-size: 1.1rem;
    }

    .group-name[b-486c7moon8] {
        font-size: 0.85rem;
    }

    .timestamp-grid[b-486c7moon8] {
        grid-template-columns: 1fr;
    }

    .action-buttons-top[b-486c7moon8] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .btn-action-top[b-486c7moon8] {
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .sticky-action-bar[b-486c7moon8],
    .tab-pane.active[b-486c7moon8],
    *[b-486c7moon8] {
        animation: none !important;
        transition: none !important;
    }
}

/* OT Accordion Styles */
.accordion[b-486c7moon8] {
    background: #fff;
/*    border: 1px solid #e0e0e0;*/
    border-radius: 8px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.accordion-header[b-486c7moon8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: #f8f9fa;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
}

    .accordion-header:hover[b-486c7moon8] {
        background: #e9ecef;
    }

    .accordion-header i[data-lucide][b-486c7moon8] {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        transition: transform 0.3s;
    }

.accordion-title[b-486c7moon8] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #212529;
    flex: 1;
}

.accordion-content[b-486c7moon8] {
    padding: 1rem;
    background: #fff;
}

/* Budget Summary */
.budget-summary[b-486c7moon8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #f0f8ff;
    border-radius: 6px;
    margin-bottom: 0.75rem;
    border-left: 3px solid #0d6efd;
}

.checkbox-cell[b-486c7moon8] {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.budget-info[b-486c7moon8] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #495057;
    white-space: nowrap;
}

/* Table Styles */
.table-header[b-486c7moon8] {
    display: flex;
    padding: 0.5rem;
    background: #e9ecef;
    border-radius: 4px;
    margin-bottom: 0.25rem;
}

.table-header-cell[b-486c7moon8] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #495057;
    text-align: center;
}

.name-cell[b-486c7moon8] {
    flex: 2;
    padding: 0 0.5rem;
}

.date-cell[b-486c7moon8] {
    flex: 1.5;
    text-align: center;
}

.hours-cell[b-486c7moon8] {
    flex: 1;
    text-align: right;
    padding-right: 0.5rem;
}

.table-row[b-486c7moon8] {
    display: flex;
    align-items: center;
    padding: 0.625rem 0.5rem;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .table-row:hover[b-486c7moon8] {
        background: #f8f9fa;
    }

    .table-row.selected[b-486c7moon8] {
        background: #e7f3ff;
    }

    .table-row:last-of-type[b-486c7moon8] {
        border-bottom: none;
    }

.table-cell[b-486c7moon8] {
    font-size: 0.8rem;
    color: #212529;
}

/* Total Row */
.total-row[b-486c7moon8] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
    background: #f8f9fa;
    border-radius: 6px;
    border-top: 2px solid #dee2e6;
}

.total-label[b-486c7moon8] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #495057;
}

.total-value[b-486c7moon8] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #198754;
    min-width: 60px;
    text-align: right;
}

/* Custom Checkbox */
.custom-checkbox[b-486c7moon8] {
    position: relative;
    display: inline-block;
}

    .custom-checkbox input[type="checkbox"][b-486c7moon8] {
        width: 18px;
        height: 18px;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        border: 2px solid #6c757d;
        border-radius: 3px;
        background: #fff;
        transition: all 0.2s;
    }

        .custom-checkbox input[type="checkbox"]:checked[b-486c7moon8] {
            background: #0d6efd;
            border-color: #0d6efd;
        }

            .custom-checkbox input[type="checkbox"]:checked + label[b-486c7moon8]::after {
                content: '✓';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: white;
                font-size: 12px;
                font-weight: bold;
                line-height: 1;
                padding-bottom: 4px;
            }

    .custom-checkbox label[b-486c7moon8] {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        cursor: pointer;
    }

/* Responsive */
@media (max-width: 480px) {
    .accordion-title[b-486c7moon8] {
        font-size: 1rem;
    }

    .budget-info[b-486c7moon8] {
        font-size: 0.9rem;
    }

    .table-cell[b-486c7moon8] {
        font-size: 0.85rem;
    }

    .name-cell[b-486c7moon8] {
        flex: 1.5;
    }

    .total-label[b-486c7moon8],
    .total-value[b-486c7moon8] {
        font-size: 1rem;
    }
}

@media (max-width: 360px) {
    .accordion-content[b-486c7moon8] {
        padding: 0.75rem;
    }

    .budget-summary[b-486c7moon8] {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .budget-info[b-486c7moon8] {
        font-size: 0.65rem;
    }
}

/* Container หลัก */
.history-container[b-486c7moon8] {
    height: 100%;
    overflow-y: auto;
    background: #f8f9fa;
}

/* Group ตามระดับอนุมัติ */
.history-level-group[b-486c7moon8] {
    background: white;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Header ของแต่ละระดับ */
.level-header[b-486c7moon8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bs-primary);
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
}

    .level-header i[b-486c7moon8] {
        font-size: 1.1rem;
    }

    .level-header span:first-of-type[b-486c7moon8] {
        flex: 1;
    }

.level-count[b-486c7moon8] {
    font-size: 0.85rem;
    background: rgba(255,255,255,0.2);
    padding: 2px 10px;
    border-radius: 12px;
}

/* รายการในแต่ละระดับ */
.level-items[b-486c7moon8] {
    padding: 8px;
}

/* แต่ละรายการประวัติ */
.history-item[b-486c7moon8] {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
    border-left: 3px solid var(--bs-primary);
}

    .history-item:last-child[b-486c7moon8] {
        margin-bottom: 0;
    }

/* Header ของรายการ */
.item-header[b-486c7moon8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

/*.approver-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

    .approver-info i {
        color: var(--bs-primary);
        font-size: 1rem;
    }*/

.approver-name[b-486c7moon8] {
    font-weight: 600;
    color: #2d3748;
    font-size: 0.95rem;
}

.level-badge[b-486c7moon8] {
    background: var(--bs-info);
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Empty state */
.empty-history[b-486c7moon8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #a0aec0;
}

    .empty-history i[b-486c7moon8] {
        font-size: 4rem;
        margin-bottom: 16px;
        opacity: 0.5;
    }

    .empty-history p[b-486c7moon8] {
        font-size: 1rem;
        margin: 0;
    }

/* Responsive สำหรับจอเล็ก */
@media (max-width: 576px) {
    .level-header[b-486c7moon8] {
        padding: 10px 12px;
        font-size: 0.9rem;
    }

        .level-header i[b-486c7moon8] {
            font-size: 1rem;
        }

    .level-count[b-486c7moon8] {
        font-size: 0.75rem;
        padding: 2px 8px;
    }

    .history-item[b-486c7moon8] {
        padding: 10px;
    }

    .approver-name[b-486c7moon8] {
        font-size: 0.9rem;
    }

    .date-row[b-486c7moon8] {
        font-size: 0.8rem;
    }

    .level-badge[b-486c7moon8] {
        font-size: 0.7rem;
        padding: 2px 8px;
    }
}

/* สำหรับจอที่เล็กมาก */
@media (max-width: 360px) {
    .level-header[b-486c7moon8] {
        padding: 8px 10px;
        font-size: 0.85rem;
    }

    .item-header[b-486c7moon8] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .level-badge[b-486c7moon8] {
        align-self: flex-start;
    }
}
/* /Components/Pages/Auth/Login.razor.rz.scp.css */
/* ===========================================================
   หน้า Login — ออกแบบตามภาพที่ทีมส่งมา (mobile-first)
   มือถือ = เต็มหน้าจอพื้นขาว จัดชิดซ้าย
   จอใหญ่  = การ์ดกลางจอบนพื้นเทาอ่อน (โครงเดียวกันทุกขนาด)
   =========================================================== */

.login-page[b-508ermksc5] {
    /* html/body ของ site.css ตั้ง overflow:hidden ไว้ — คอนเทนเนอร์นี้จึงต้องเลื่อนเอง */
    height: 100vh;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: #fff;
    padding: 28px 20px 40px;
}

.login-card[b-508ermksc5] {
    width: 100%;
    max-width: 420px;
}

/* ---------- โลโก้ + องค์กร ---------- */
.login-brand[b-508ermksc5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
}

.login-logo[b-508ermksc5] {
    width: 92px;
    max-width: 45%;
    height: auto;
    object-fit: contain;
}

.login-org[b-508ermksc5] {
    font-size: 12px;
    font-weight: 600;
    color: #5b6472;
    border: 1px solid #e3e6ea;
    border-radius: 999px;
    padding: 4px 12px;
    white-space: nowrap;
}

/* ---------- หัวข้อ ---------- */
.login-title[b-508ermksc5] {
    color: #0e2a63;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 6px;
}

.login-subtitle[b-508ermksc5] {
    color: #7a828e;
    font-size: 0.875rem;
    margin: 0 0 22px;
}

/* ---------- ฟอร์ม ---------- */
.login-form[b-508ermksc5] {
    display: flex;
    flex-direction: column;
}

.login-field[b-508ermksc5] {
    position: relative;
    margin-bottom: 14px;
}

.login-input[b-508ermksc5] {
    width: 100%;
    height: 56px;
    border: 1px solid #e3e6ea;
    border-radius: 12px;
    background: #fff;
    color: #1d2430;
    font-size: 1rem;
    padding: 0 16px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .login-input[b-508ermksc5]::placeholder {
        color: #a6adb8;
    }

    .login-input:focus[b-508ermksc5] {
        border-color: #1b3c8f;
        box-shadow: 0 0 0 3px rgba(27, 60, 143, 0.12);
    }

/* เว้นที่ให้ปุ่มลูกตาไม่ทับข้อความ */
.login-input-suffix[b-508ermksc5] {
    padding-right: 52px;
}

.login-eye[b-508ermksc5] {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 1.125rem;
    border-radius: 10px;
    cursor: pointer;
}

    .login-eye:hover[b-508ermksc5] {
        color: #1b3c8f;
        background: #f2f4f8;
    }

/* ---------- ลืมรหัสผ่าน ---------- */
.login-link[b-508ermksc5] {
    align-self: flex-start;
    border: none;
    background: transparent;
    padding: 2px 0;
    margin-bottom: 18px;
    color: #1a62d0;
    font-size: 0.875rem;
    cursor: pointer;
}

    .login-link:disabled[b-508ermksc5] {
        cursor: default;
        opacity: 0.75;
    }

/* ---------- ปุ่มเข้าสู่ระบบ ---------- */
.login-submit[b-508ermksc5] {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 12px;
    background: #1b3c8f;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}

    .login-submit:hover:not(:disabled)[b-508ermksc5] {
        background: #15306f;
    }

    .login-submit:disabled[b-508ermksc5] {
        opacity: 0.75;
        cursor: default;
    }

/* ---------- ตัวคั่น "หรือ" ---------- */
.login-divider[b-508ermksc5] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: #9aa2ae;
    font-size: 0.8125rem;
}

    .login-divider[b-508ermksc5]::before,
    .login-divider[b-508ermksc5]::after {
        content: "";
        flex: 1;
        height: 1px;
        background: #e6e9ee;
    }

/* ---------- ปุ่มลงทะเบียน ---------- */
.login-register[b-508ermksc5] {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #e3e6ea;
    border-radius: 12px;
    background: #fff;
    color: #2b3240;
    font-size: 1rem;
    cursor: pointer;
    position: relative;
}

    .login-register i[b-508ermksc5] {
        position: absolute;
        left: 18px;
        font-size: 1.125rem;
        color: #4b5563;
    }

    .login-register:hover:not(:disabled)[b-508ermksc5] {
        background: #f7f8fa;
    }

    .login-register:disabled[b-508ermksc5] {
        cursor: default;
        opacity: 0.75;
    }

/* ---------- จอใหญ่: ยกเนื้อหาใส่การ์ดกลางจอ ---------- */
@media (min-width: 576px) {
    .login-page[b-508ermksc5] {
        align-items: center;
        background: #f4f6f9;
        padding: 32px 20px;
    }

    .login-card[b-508ermksc5] {
        background: #fff;
        border-radius: 16px;
        padding: 32px;
        box-shadow: 0 10px 30px rgba(16, 34, 76, 0.08);
    }
}
/* /Components/Pages/Calendar/Calendar.razor.rz.scp.css */
.mobile-view[b-zxopobh3pi] {
    display: none;
}

.desktop-view[b-zxopobh3pi] {
    display: block;
}

@media (max-width: 768px) {
    .mobile-view[b-zxopobh3pi] {
        display: block;
    }

    .desktop-view[b-zxopobh3pi] {
        display: none;
    }
}

/* /Components/Pages/Calendar/Desktop/CalendarViewDesktop.razor.rz.scp.css */
.dot[b-h1u0eko8m1] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.text-warning-custom[b-h1u0eko8m1] {
    color: #fd7e14;
}

.text-gray[b-h1u0eko8m1] {
    color: #495057 !important;
}

.remark-text[b-h1u0eko8m1] {
    display: inline-block;
    padding-left: 2px; /* ปรับระยะเล็กน้อยให้ตรงกับ icon */
    white-space: normal;
    line-height: 1.3; /* ลดช่องระหว่างบรรทัดให้พอดี */
}

.remark-text2[b-h1u0eko8m1] {
    display: inline-block;
    white-space: normal;
    line-height: 1.3; /* ลดช่องระหว่างบรรทัดให้พอดี */
}

.calendar-desktop[b-h1u0eko8m1]  .dxbl-accordion .dxbl-group.dxbl-accordion-group:not(.dxbl-disabled):not(:disabled):not(.dxbl-accordion-filter):not(.dxbl-active) > .dxbl-accordion-group-header {
    background-color: var(--bs-light);
}

/*หัวตาราง*/
.calendar-desktop[b-h1u0eko8m1]  .dxbl-grid-table > thead > tr > th {
    text-align: center !important;
    background-color: #0d6efd !important;
    color: white !important;
    padding: 12px !important;
}

/*คอลัมน์ที่ 11-13*/
.calendar-desktop[b-h1u0eko8m1]  .dxbl-grid-table > tbody > tr > td:nth-child(n+11):nth-child(-n+13) {
    text-align: center !important;
}

.request-list-section[b-h1u0eko8m1] {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.section-title[b-h1u0eko8m1] {
    background: #f8f9fa;
    color: #495057;
    padding: 12px 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #e0e0e0;
}

    .section-title i[b-h1u0eko8m1] {
        font-size: 1.2em;
    }

.request-item[b-h1u0eko8m1] {
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
    background: white;
    transition: all 0.3s ease;
}

    .request-item:last-child[b-h1u0eko8m1] {
        border-bottom: none;
    }

    .request-item:hover[b-h1u0eko8m1] {
        background: #f8f9fa;
/*        transform: translateX(4px);*/
    }

.request-header[b-h1u0eko8m1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.request-type[b-h1u0eko8m1] {
    font-weight: 600;
    font-size: 1.05em;
    color: #2c3e50;
}

.request-details[b-h1u0eko8m1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.detail-row[b-h1u0eko8m1] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #555;
    font-size: 0.95em;
}

    .detail-row i[b-h1u0eko8m1] {
        width: 20px;
        text-align: center;
        color: #999;
    }

.request-actions[b-h1u0eko8m1] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.btn-danger[b-h1u0eko8m1] {
    transition: all 0.3s ease;
}

    .btn-danger:hover[b-h1u0eko8m1] {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
    }

/* Status Badges */
.badge-pending[b-h1u0eko8m1] {
    background: #fff3cd;
    color: #856404;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85em;
}

.badge-approved[b-h1u0eko8m1] {
    background: #d4edda;
    color: #155724;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85em;
}

.badge-rejected[b-h1u0eko8m1] {
    background: #f8d7da;
    color: #721c24;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85em;
}

/* TimeStamp Section */
.timestamp-section[b-h1u0eko8m1] {
    margin-top: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.timestamp-grid-compact[b-h1u0eko8m1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    padding: 16px;
    background: white;
}

.timestamp-compact[b-h1u0eko8m1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fafafa;
}

.stamp-label[b-h1u0eko8m1] {
    font-size: 0.8em;
    color: #999;
    margin-bottom: 4px;
}

.stamp-time[b-h1u0eko8m1] {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.95em;
}

.alert-warning-compact[b-h1u0eko8m1] {
    padding: 16px;
    background: #fff3cd;
    color: #856404;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}



/*CheckIn*/
#user-map[b-h1u0eko8m1] {
    height: 400px;
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.leaflet-popup-content[b-h1u0eko8m1] {
    margin: 8px;
    line-height: 1.4;
}

    .leaflet-popup-content strong[b-h1u0eko8m1] {
        font-size: 14px;
    }

    .leaflet-popup-content small[b-h1u0eko8m1] {
        font-size: 11px;
        color: #666;
    }







/* /Components/Pages/Calendar/Desktop/WorkingTimeStampDesktop.razor.rz.scp.css */
/* ===== Calendar Grid ===== */
.wts-cal-grid[b-lvkma6a3iu] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    background: #e9ecef;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.wts-cal-header[b-lvkma6a3iu] {
    background: #0d6efd;
    color: white;
    text-align: center;
    padding: 10px 4px;
    font-weight: 600;
    font-size: 0.85rem;
}

.wts-cal-cell[b-lvkma6a3iu] {
    background: white;
    min-height: 90px;
    padding: 6px 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

    .wts-cal-cell:hover[b-lvkma6a3iu] {
        background: #e8f0fe;
        transform: scale(1.02);
        z-index: 2;
        box-shadow: 0 2px 8px rgba(13,110,253,0.15);
    }

    .wts-cal-cell.wts-today[b-lvkma6a3iu] {
        border: 2px solid #0d6efd;
        background: #f0f6ff;
    }

    .wts-cal-cell.wts-selected[b-lvkma6a3iu] {
        background: #cfe2ff;
        border: 2px solid #0d6efd;
        box-shadow: 0 0 0 2px rgba(13,110,253,0.25);
    }

    .wts-cal-cell.wts-weekend[b-lvkma6a3iu] {
        background: #fafafa;
    }

        .wts-cal-cell.wts-weekend:hover[b-lvkma6a3iu] {
            background: #f0f0f0;
        }

.wts-day-number[b-lvkma6a3iu] {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 4px;
    color: #2c3e50;
}

.wts-today .wts-day-number[b-lvkma6a3iu] {
    background: #0d6efd;
    color: white;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.wts-day-icons[b-lvkma6a3iu] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: auto;
}

    .wts-day-icons i[b-lvkma6a3iu] {
        font-size: 0.8rem;
    }

/* ===== Detail Panel ===== */
.wts-detail-card[b-lvkma6a3iu] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    border: 1px solid #e9ecef;
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

.wts-detail-header[b-lvkma6a3iu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
    border-radius: 12px 12px 0 0;
    position: sticky;
    top: 0;
    z-index: 5;
}

.wts-detail-date[b-lvkma6a3iu] {
    font-weight: 700;
    font-size: 1.05rem;
    color: #2c3e50;
}

.wts-detail-body[b-lvkma6a3iu] {
    padding: 12px;
}

/* ===== Stamp Table ===== */
.wts-stamp-grid[b-lvkma6a3iu] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.wts-stamp-item[b-lvkma6a3iu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    background: #f8f9fa;
    transition: all 0.2s;
}

    .wts-stamp-item:hover[b-lvkma6a3iu] {
        background: #e8f0fe;
    }

.wts-stamp-label[b-lvkma6a3iu] {
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 2px;
}

.wts-stamp-time[b-lvkma6a3iu] {
    font-weight: 600;
    font-size: 0.9rem;
    color: #2c3e50;
}

/* ===== Reused styles ===== */
.text-gray[b-lvkma6a3iu] {
    color: #495057 !important;
}

.remark-text[b-lvkma6a3iu] {
    display: inline-block;
    padding-left: 2px;
    white-space: normal;
    line-height: 1.3;
}

.remark-text2[b-lvkma6a3iu] {
    display: inline-block;
    white-space: normal;
    line-height: 1.3;
}

.wts-desktop[b-lvkma6a3iu]  .dxbl-accordion .dxbl-group.dxbl-accordion-group:not(.dxbl-disabled):not(:disabled):not(.dxbl-accordion-filter):not(.dxbl-active) > .dxbl-accordion-group-header {
    background-color: var(--bs-light);
}

.request-list-section[b-lvkma6a3iu] {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.section-title[b-lvkma6a3iu] {
    background: #f8f9fa;
    color: #495057;
    padding: 12px 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #e0e0e0;
}

    .section-title i[b-lvkma6a3iu] {
        font-size: 1.2em;
    }

.request-item[b-lvkma6a3iu] {
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
    background: white;
    transition: all 0.3s ease;
}

    .request-item:last-child[b-lvkma6a3iu] {
        border-bottom: none;
    }

    .request-item:hover[b-lvkma6a3iu] {
        background: #f8f9fa;
    }

.request-header[b-lvkma6a3iu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.request-type[b-lvkma6a3iu] {
    font-weight: 600;
    font-size: 1.05em;
    color: #2c3e50;
}

.request-details[b-lvkma6a3iu] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.detail-row[b-lvkma6a3iu] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #555;
    font-size: 0.95em;
}

    .detail-row i[b-lvkma6a3iu] {
        width: 20px;
        text-align: center;
        color: #999;
    }

.request-actions[b-lvkma6a3iu] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

#user-map[b-lvkma6a3iu] {
    height: 400px;
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.leaflet-popup-content[b-lvkma6a3iu] {
    margin: 8px;
    line-height: 1.4;
}

    .leaflet-popup-content strong[b-lvkma6a3iu] {
        font-size: 14px;
    }

    .leaflet-popup-content small[b-lvkma6a3iu] {
        font-size: 11px;
        color: #666;
    }

.text-warning-custom[b-lvkma6a3iu] {
    color: #ff8c00 !important;
}

.wts-stamp-time.text-warning-custom[b-lvkma6a3iu] {
    color: #ff8c00 !important;
}

.wts-stamp-time.text-danger[b-lvkma6a3iu] {
    color: var(--bs-danger) !important;
}

/* ===== Transitions for Request Toggle Details ===== */
.request-details-expanded[b-lvkma6a3iu] {
    animation: fadeInDown-b-lvkma6a3iu 0.3s ease-in-out forwards;
}

.dot[b-lvkma6a3iu] {
    display: inline-block;
    width: 10px;
    height: 10px;
}

    @keyframes fadeInDown-b-lvkma6a3iu {
        from {
            opacity: 0;
            transform: translateY(-5px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
/* /Components/Pages/Calendar/Mobile/CalendarViewMobile.razor.rz.scp.css */
/* ========== Mobile Calendar Wrapper ========== */
.mobile-calendar-wrapper[b-lf3ww2e99j] {
    min-height: 100vh;
    background-color: #f5f5f5;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ========== Header ========== */
.mobile-header[b-lf3ww2e99j] {
    background: #0d6efd;
    color: white;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.back-btn[b-lf3ww2e99j] {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.2rem;
    padding: 0.5rem;
    cursor: pointer;
}

.header-title[b-lf3ww2e99j] {
    font-size: 1.1rem;
    font-weight: 500;
}

/* ========== Calendar Container ========== */
.calendar-container[b-lf3ww2e99j] {
    background: white;
    margin: 0.5rem;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* ========== Month Selector ========== */
.month-selector[b-lf3ww2e99j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e0e0e0;
}

.current-month[b-lf3ww2e99j] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: #333;
}

.nav-btn[b-lf3ww2e99j] {
    background: transparent;
    border: none;
    color: #0d6efd;
    font-size: 1rem;
    padding: 0.5rem;
    cursor: pointer;
    transition: transform 0.2s;
}

    .nav-btn:active[b-lf3ww2e99j] {
        transform: scale(0.95);
    }

/* ========== Weekday Header ========== */
.weekday-header[b-lf3ww2e99j] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.weekday[b-lf3ww2e99j] {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #999;
    padding: 0.5rem 0;
}

/* ========== Calendar Grid ========== */
.calendar-grid[b-lf3ww2e99j] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
}

.day-cell[b-lf3ww2e99j] {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    padding: 0.25rem;
}

    .day-cell:hover[b-lf3ww2e99j] {
        background-color: #f0f0f0;
    }

    .day-cell.other-month[b-lf3ww2e99j] {
        opacity: 0.3;
    }

    .day-cell.today[b-lf3ww2e99j] {
        background-color: #cfe2ff;
        font-weight: 600;
    }

    .day-cell.selected[b-lf3ww2e99j] {
        background: #0d6efd;
        color: white;
    }

        .day-cell.selected .day-number[b-lf3ww2e99j] {
            color: white;
        }

.day-number[b-lf3ww2e99j] {
    font-size: 0.875rem;
    color: #333;
}

.day-cell:nth-child(7n+1) .day-number[b-lf3ww2e99j] {
    color: #dc3545;
}

.day-cell.selected:nth-child(7n+1) .day-number[b-lf3ww2e99j] {
    color: white;
}

/* ========== Day Indicators with Icons ========== */
.day-indicators[b-lf3ww2e99j] {
    display: flex;
    gap: 2px;
    justify-content: center;
    align-items: center;
    margin-top: 2px;
    min-height: 12px;
    flex-wrap: wrap;
}

    .day-indicators i[b-lf3ww2e99j] {
        font-size: 0.6rem !important;
    }

/* Badge แสดงจำนวน */
.icon-badge[b-lf3ww2e99j] {
    position: absolute;
    top: -4px;
    right: -6px;
    background-color: #dc3545;
    color: white;
    font-size: 0.5rem;
    font-weight: 700;
    padding: 1px 3px;
    border-radius: 50%;
    min-width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ปรับสีเมื่อวันถูกเลือก */
.day-cell.selected .day-indicators i[b-lf3ww2e99j] {
    filter: brightness(1.5);
}

/* Hover effects */
.day-indicators i:hover[b-lf3ww2e99j] {
    transform: scale(1.2);
    transition: transform 0.2s ease;
}

/* ปรับขนาดเมื่อมีไอคอนเดียว */
.day-indicators > i:only-child[b-lf3ww2e99j] {
    font-size: 0.75rem;
}

/* ========== Modal/Popup ========== */
.modal-backdrop[b-lf3ww2e99j] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    display: none;
}

    .modal-backdrop.show[b-lf3ww2e99j] {
        display: block;
    }

.timestamp-popup[b-lf3ww2e99j] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-radius: 20px 20px 0 0;
    max-height: 85vh;
    z-index: 1050;
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    display: flex;
    flex-direction: column;
}

    .timestamp-popup.show[b-lf3ww2e99j] {
        transform: translateY(0);
    }

.popup-header[b-lf3ww2e99j] {
    padding: 1rem;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.close-btn[b-lf3ww2e99j] {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: #6c757d;
    cursor: pointer;
    padding: 0.25rem;
}

.timestamp-popup-content[b-lf3ww2e99j] {
    padding: 1rem;
    max-height: calc(85vh - 60px);
    overflow-y: auto;
    flex: 1;
}

/* ========== Request List Section ========== */
.request-list-section[b-lf3ww2e99j] {
/*    background: #f8f9fa;*/
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

    .request-list-section .section-title[b-lf3ww2e99j] {
        font-size: 0.95rem;
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #dee2e6;
    }

/* Request Item */
.request-item[b-lf3ww2e99j] {
    background: white;
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border: 1px solid #e9ecef;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    animation: slideInUp-b-lf3ww2e99j 0.3s ease-out;
}

    .request-item:last-child[b-lf3ww2e99j] {
        margin-bottom: 0;
    }

    .request-item:hover[b-lf3ww2e99j] {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transform: translateY(-1px);
        transition: all 0.2s ease;
    }

.request-header[b-lf3ww2e99j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f0f0f0;
}

.request-type[b-lf3ww2e99j] {
    font-weight: 600;
    color: #212529;
    font-size: 0.9rem;
}

.request-header .badge[b-lf3ww2e99j] {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
}

.request-details[b-lf3ww2e99j] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.detail-row[b-lf3ww2e99j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #6c757d;
}

    .detail-row i[b-lf3ww2e99j] {
        width: 16px;
        text-align: center;
        color: #adb5bd;
    }

.request-actions[b-lf3ww2e99j] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #f0f0f0;
}

    .request-actions .btn[b-lf3ww2e99j] {
        font-size: 0.8rem;
        padding: 0.35rem 0.75rem;
    }

/* ========== Timestamp Section ========== */
.timestamp-section[b-lf3ww2e99j] {
    margin-bottom: 1rem;
}

.section-title[b-lf3ww2e99j] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.timestamp-grid-compact[b-lf3ww2e99j] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.timestamp-compact[b-lf3ww2e99j] {
    background: #f8f9fa;
    padding: 0.5rem;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    text-align: center;
}

.stamp-label[b-lf3ww2e99j] {
    display: block;
    font-size: 0.65rem;
    color: #6c757d;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.stamp-time[b-lf3ww2e99j] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #212529;
}

    .stamp-time.text-warning-custom[b-lf3ww2e99j] {
        color: #fd7e14 !important;
    }

    .stamp-time.text-danger[b-lf3ww2e99j] {
        color: #dc3545 !important;
    }

.alert-warning-compact[b-lf3ww2e99j] {
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    background-color: #fff3cd;
    border: 1px solid #ffecb5;
    color: #664d03;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

/* ========== Accordion ========== */
.accordion-container[b-lf3ww2e99j] {
    margin-top: 1rem;
}

.accordion-item[b-lf3ww2e99j] {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.accordion-header[b-lf3ww2e99j] {
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s;
    user-select: none;
}

    .accordion-header:active[b-lf3ww2e99j] {
        background: #e9ecef;
    }

    .accordion-header.active[b-lf3ww2e99j] {
        background: #e7f3ff;
        color: #0d6efd;
    }

.accordion-header-content[b-lf3ww2e99j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.accordion-body[b-lf3ww2e99j] {
    padding: 1rem;
    background: white;
    animation: slideDown-b-lf3ww2e99j 0.3s ease-out;
}

/* ========== Form Elements ========== */
.form-label[b-lf3ww2e99j] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
    display: block;
}

/* ========== Badge Styles ========== */
.badge[b-lf3ww2e99j] {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}

    .badge.bg-warning[b-lf3ww2e99j] {
        background-color: #ffc107 !important;
    }

    .badge.bg-info[b-lf3ww2e99j] {
        background-color: #0dcaf0 !important;
    }

    .badge.bg-success[b-lf3ww2e99j] {
        background-color: #198754 !important;
    }

    .badge.bg-secondary[b-lf3ww2e99j] {
        background-color: #6c757d !important;
    }

    .badge.text-dark[b-lf3ww2e99j] {
        color: #000 !important;
    }

/* ========== Animations ========== */
@keyframes slideDown-b-lf3ww2e99j {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInUp-b-lf3ww2e99j {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== Utility Classes ========== */
.text-center[b-lf3ww2e99j] {
    text-align: center;
}

.text-muted[b-lf3ww2e99j] {
    color: #6c757d;
}

.text-warning-custom[b-lf3ww2e99j] {
    color: #fd7e14;
}

/* ========== Responsive ========== */
@media (max-width: 360px) {
    .day-number[b-lf3ww2e99j] {
        font-size: 0.75rem;
    }

    .current-month[b-lf3ww2e99j] {
        font-size: 0.9rem;
    }

    .timestamp-grid-compact[b-lf3ww2e99j] {
        grid-template-columns: repeat(3, 1fr);
    }

    .day-indicators i[b-lf3ww2e99j] {
        font-size: 0.55rem;
    }

    .day-indicators > i:only-child[b-lf3ww2e99j] {
        font-size: 0.65rem;
    }

    .icon-badge[b-lf3ww2e99j] {
        font-size: 0.45rem;
        min-width: 10px;
        height: 10px;
        padding: 0px 2px;
    }

    .request-item[b-lf3ww2e99j] {
        padding: 0.6rem;
    }

    .request-type[b-lf3ww2e99j] {
        font-size: 0.85rem;
    }

    .detail-row[b-lf3ww2e99j] {
        font-size: 0.75rem;
    }
}

/* File Attachment Styles */
.request-item .request-type i[b-lf3ww2e99j] {
    margin-right: 0.5rem;
}

.request-actions[b-lf3ww2e99j] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #f0f0f0;
}

    .request-actions .btn[b-lf3ww2e99j] {
        font-size: 0.8rem;
    }

.remark-text[b-lf3ww2e99j] {
    display: inline-block;
    padding-left: 2px; /* ปรับระยะเล็กน้อยให้ตรงกับ icon /
    white-space: normal;
    line-height: 1.3; / ลดช่องระหว่างบรรทัดให้พอดี */
}

.accordion-header.disabled[b-lf3ww2e99j] {
    pointer-events: none;  ❗ ปิดการคลิกทั้งก้อน 
    opacity: 0.5;  ทำให้ดูจางลง 
    cursor: not-allowed;  แสดงว่าคลิกไม่ได้ 
}

/* /Components/Pages/Counter.razor.rz.scp.css */
.counter-block[b-p9n3o6q8gk] {
    display: flex;
    padding: 2.5rem 1.5rem 1.5rem 1.5rem;
    flex-direction: column;
    border-radius: 1rem;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
    width: 16.875rem;
    height: 17rem;
    position: relative;
}

.counter-block .counter-content[b-p9n3o6q8gk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.counter-block .counter-count[b-p9n3o6q8gk] {
    font-size: 7.5rem;
    font-weight: 400;
    line-height: 7.75rem;
}

.counter-block .counter-block-back[b-p9n3o6q8gk] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bs-body-color, var(--DS-color-content-neutral-default-rest));
    opacity: 0.05;
    border-radius: 1rem;
    z-index: -2;
}
/* /Components/Pages/Dashboard/DashBoard.razor.rz.scp.css */
.mobile-view[b-d3w99yt5rg] {
    display: none;
}

.desktop-view[b-d3w99yt5rg] {
    display: block;
}

@media (max-width: 768px) {
    .mobile-view[b-d3w99yt5rg] {
        display: block;
    }

    .desktop-view[b-d3w99yt5rg] {
        display: none;
    }
}
/* /Components/Pages/Dashboard/Desktop/DashBoardViewDesktop.razor.rz.scp.css */
.dashboard-desktop-container[b-78xu53ygyq]  .dxbl-grid-table > thead > tr > th {
    text-align: center !important;
    background-color: #0d6efd !important;
    color: white !important;
    padding: 12px !important;
}

.dashboard-desktop-container[b-78xu53ygyq] {
    padding: 2rem;
    max-width: 1600px;
    margin: 0 auto;
}

.dashboard-header[b-78xu53ygyq] {
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
}

/* Summary Cards */
.summary-card[b-78xu53ygyq] {
    transition: all 0.3s ease;
    cursor: pointer;
}

    .summary-card:hover[b-78xu53ygyq] {
        transform: translateY(-5px);
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15) !important;
    }

.summary-icon[b-78xu53ygyq] {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* DataGrid Styling */
.leave-grid[b-78xu53ygyq] {
    border: none !important;
}

    .leave-grid .dxbl-grid-header-content[b-78xu53ygyq] {
        background: linear-gradient(135deg, var(--bs-primary) 0%, #0056b3 100%);
        color: white;
        font-weight: 600;
    }

    .leave-grid .dxbl-grid-header[b-78xu53ygyq] {
        border: none !important;
    }

    .leave-grid .dxbl-grid-cell[b-78xu53ygyq] {
        padding: 1rem 0.75rem;
        vertical-align: middle;
    }

    .leave-grid .dxbl-grid-data-row:hover[b-78xu53ygyq] {
        background-color: rgba(13, 110, 253, 0.05);
    }

.leave-icon-wrapper[b-78xu53ygyq] {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.stat-cell[b-78xu53ygyq] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-value[b-78xu53ygyq] {
    font-size: 1.1rem;
}

.progress-cell[b-78xu53ygyq] {
    width: 100%;
    padding: 0 1rem;
}

.progress[b-78xu53ygyq] {
    border-radius: 10px;
    background-color: #e9ecef;
}

.progress-bar[b-78xu53ygyq] {
    border-radius: 10px;
    background: linear-gradient(90deg, var(--bs-primary) 0%, #0056b3 100%);
}

/* Grid Footer Summary */
.leave-grid .dxbl-grid-footer[b-78xu53ygyq] {
    background-color: #f8f9fa;
    font-weight: 600;
    color: var(--bs-primary);
}

/* Error and Empty States */
.error-container[b-78xu53ygyq],
.empty-state[b-78xu53ygyq] {
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Responsive */
@media (max-width: 992px) {
    .dashboard-desktop-container[b-78xu53ygyq] {
        padding: 1rem;
    }
}

/* Search Panel Styling */
.leave-grid .dxbl-grid-search-panel[b-78xu53ygyq] {
    border-color: var(--bs-primary);
}

/* Badge Styling */
.badge[b-78xu53ygyq] {
    padding: 0.5rem 0.75rem;
    font-weight: 500;
}
/* /Components/Pages/Dashboard/Mobile/DashBoardViewMobile.razor.rz.scp.css */
/* Dashboard Container */
.dashboard-mobile-container[b-jkpw2h3kda] {
    padding: 16px;
    background-color: #f8f9fa;
    min-height: 100vh;
}

/* Loading & Error States */
.loading-container[b-jkpw2h3kda],
.error-container[b-jkpw2h3kda],
.empty-state[b-jkpw2h3kda] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

/* Header Section */
.dashboard-header[b-jkpw2h3kda] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: linear-gradient(135deg, var(--bs-primary) 0%, #0056b3 100%);
    border-radius: 12px;
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.header-title[b-jkpw2h3kda] {
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    color: white;
}

.refresh-btn[b-jkpw2h3kda] {
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--bs-primary);
    border-radius: 8px;
    padding: 6px 12px;
    transition: all 0.3s ease;
    font-weight: 600;
}

    .refresh-btn:hover[b-jkpw2h3kda] {
        background-color: white;
        transform: rotate(180deg);
    }

/* Summary Overview Section */
.summary-overview-section[b-jkpw2h3kda] {
    padding: 16px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.summary-card-mobile[b-jkpw2h3kda] {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
}

    .summary-card-mobile:active[b-jkpw2h3kda] {
        transform: scale(0.98);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

.summary-icon-mobile[b-jkpw2h3kda] {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-size: 1.2rem;
}

.summary-value-mobile[b-jkpw2h3kda] {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.summary-label-mobile[b-jkpw2h3kda] {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 500;
    line-height: 1.2;
}

/* Leave Detail Section */
.leave-detail-section[b-jkpw2h3kda] {
    margin-top: 20px;
}

.section-title[b-jkpw2h3kda] {
    color: #495057;
    font-weight: 600;
    font-size: 1rem;
}

/* Leave Summary Cards */
.leave-summary-cards[b-jkpw2h3kda] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.leave-card[b-jkpw2h3kda] {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

    .leave-card:active[b-jkpw2h3kda] {
        transform: scale(0.98);
    }

/* Card Header */
.card-header[b-jkpw2h3kda] {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f8f9fa !important;
}

.header-content[b-jkpw2h3kda] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 1rem;
}

.leave-icon-wrapper[b-jkpw2h3kda] {
    width: 35px;
    height: 35px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.leave-type[b-jkpw2h3kda] {
    color: #212529;
}

/* Card Body */
.card-body[b-jkpw2h3kda] {
    padding: 16px;
}

/* Statistics Row */
.stats-row[b-jkpw2h3kda] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.stat-item[b-jkpw2h3kda] {
    flex: 1;
    text-align: center;
}

.stat-label[b-jkpw2h3kda] {
    font-size: 0.7rem;
    color: #6c757d;
    margin-bottom: 4px;
    font-weight: 500;
    line-height: 1.2;
}

.stat-value[b-jkpw2h3kda] {
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

    .stat-value i[b-jkpw2h3kda] {
        font-size: 0.9rem;
    }

.stat-divider[b-jkpw2h3kda] {
    width: 1px;
    height: 40px;
    background-color: #e9ecef;
    margin: 0 8px;
}

/* Progress Section */
.progress-section[b-jkpw2h3kda] {
    margin-top: 12px;
}

.progress-header[b-jkpw2h3kda] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.progress-label[b-jkpw2h3kda] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #495057;
}

.progress-percentage[b-jkpw2h3kda] {
    font-size: 0.9rem;
    font-weight: 700;
}

.progress[b-jkpw2h3kda] {
    border-radius: 10px;
    background-color: #e9ecef;
    overflow: hidden;
}

.progress-bar[b-jkpw2h3kda] {
    border-radius: 10px;
    transition: width 0.6s ease;
    background: linear-gradient(90deg, var(--bs-primary) 0%, #0056b3 100%);
}

/* Alerts */
.alert[b-jkpw2h3kda] {
    border-radius: 8px;
    display: flex;
    align-items: center;
    font-size: 0.85rem;
}

/* Responsive */
@media (max-width: 576px) {
    .summary-value-mobile[b-jkpw2h3kda] {
        font-size: 1.3rem;
    }

    .summary-label-mobile[b-jkpw2h3kda] {
        font-size: 0.7rem;
    }

    .stat-value[b-jkpw2h3kda] {
        font-size: 0.95rem;
    }

    .stat-label[b-jkpw2h3kda] {
        font-size: 0.65rem;
    }

    .header-title[b-jkpw2h3kda] {
        font-size: 1.1rem;
    }

    .dashboard-mobile-container[b-jkpw2h3kda] {
        padding: 12px;
    }

    .summary-icon-mobile[b-jkpw2h3kda] {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

/* Animation */
@keyframes fadeIn-b-jkpw2h3kda {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.leave-card[b-jkpw2h3kda],
.summary-card-mobile[b-jkpw2h3kda] {
    animation: fadeIn-b-jkpw2h3kda 0.3s ease-out;
}
/* /Components/Pages/Employee/ByApprover/Component/EmpByApproverMenuComponent.razor.rz.scp.css */
/* ===== Desktop modal ===== */
.text-gray[b-9hqsobikxe] {
    color: #495057 !important;
}

.selected-employees-scroll-desktop[b-9hqsobikxe] {
    max-height: 120px;
    overflow: auto;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 8px;
}

/* ===== Mobile modal (bottom sheet) ===== */
.mobile-modal-overlay[b-9hqsobikxe] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 3;
    display: flex;
    align-items: flex-end;
    animation: fadeIn-b-9hqsobikxe 0.3s ease;
}

@keyframes fadeIn-b-9hqsobikxe {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.mobile-modal-content[b-9hqsobikxe] {
    background: white;
    width: 100%;
    max-height: 90vh;
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-9hqsobikxe 0.3s ease;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.2);
}

@keyframes slideUp-b-9hqsobikxe {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.mobile-modal-header[b-9hqsobikxe] {
    background: linear-gradient(135deg, #0d6efd 0%, #0056b3 100%);
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 20px 20px 0 0;
    flex-shrink: 0;
}

    .mobile-modal-header h5[b-9hqsobikxe] {
        font-size: 1.1rem;
        font-weight: 600;
        margin: 0;
    }

    .mobile-modal-header .btn-close-white[b-9hqsobikxe] {
        opacity: 1;
        filter: brightness(0) invert(1);
    }

.mobile-modal-body[b-9hqsobikxe] {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

    .mobile-modal-body .form-label[b-9hqsobikxe] {
        color: #495057;
        font-size: 0.95rem;
        margin-bottom: 0.5rem;
        font-weight: 500;
    }

    .mobile-modal-body .form-select[b-9hqsobikxe],
    .mobile-modal-body .form-control[b-9hqsobikxe],
    .mobile-modal-body textarea[b-9hqsobikxe] {
        border-radius: 8px;
        border: 2px solid #e9ecef;
        font-size: 1rem;
        padding: 12px;
    }

        .mobile-modal-body .form-select:focus[b-9hqsobikxe],
        .mobile-modal-body .form-control:focus[b-9hqsobikxe],
        .mobile-modal-body textarea:focus[b-9hqsobikxe] {
            border-color: #0d6efd;
            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.1);
        }

    .mobile-modal-body .alert[b-9hqsobikxe] {
        border-radius: 10px;
        border: none;
        padding: 15px;
        font-size: 0.9rem;
    }

.selected-employees-list[b-9hqsobikxe] {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.selected-employees-scroll[b-9hqsobikxe] {
    max-height: 150px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.selected-emp-item[b-9hqsobikxe] {
    background: white;
    padding: 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    border: 1px solid #e9ecef;
    font-size: 0.9rem;
}

/* Tabs for Mobile Modal — 4 เมนู จึงให้ตัดขึ้นบรรทัดใหม่ (2 คอลัมน์) บนจอแคบ */
.mobile-tabs[b-9hqsobikxe] {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 2px solid #e9ecef;
    margin-bottom: 20px;
    gap: 5px;
}

.mobile-tab[b-9hqsobikxe] {
    flex: 1 1 45%;
    min-width: 45%;
    padding: 10px 8px;
    font-size: 0.9rem;
    text-align: center;
    background: transparent;
    border: none;
    color: #6c757d;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    border-radius: 8px 8px 0 0;
}

    .mobile-tab:hover[b-9hqsobikxe] {
        color: #0d6efd;
        background: rgba(13, 110, 253, 0.05);
    }

    .mobile-tab.active[b-9hqsobikxe] {
        color: #0d6efd;
        font-weight: 600;
    }

        .mobile-tab.active[b-9hqsobikxe]::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 2px;
            background: #0d6efd;
        }

/* Fix z-index for DevExpress DateTime Picker */
.dx-overlay-wrapper[b-9hqsobikxe],
.dx-dropdowneditor-overlay[b-9hqsobikxe],
.dxbs-dropdown[b-9hqsobikxe],
.dxbs-popup[b-9hqsobikxe],
.dx-popup-wrapper[b-9hqsobikxe],
.dx-calendar[b-9hqsobikxe],
.dx-dateview-calendar[b-9hqsobikxe],
.dx-timeedit-overlay[b-9hqsobikxe] {
    z-index: 10000 !important;
}

.dx-overlay-content[b-9hqsobikxe] {
    z-index: 10000 !important;
}
/* /Components/Pages/Employee/ByApprover/Desktop/EmployeeDesktopView.razor.rz.scp.css */
/*หัวตาราง*/
.emp-by-approver[b-f321ujraki]  .dxbl-grid-table > thead > tr > th {
    text-align: center !important;
    background-color: #0d6efd !important;
    color: white !important;
    padding: 12px !important;
}

.text-gray[b-f321ujraki] {
    color: #495057 !important;
}

/* เปลี่ยนสี checkbox ในหัวตาราง (Header checkbox) เท่านั้น */
.emp-by-approver[b-f321ujraki] 
.dxbl-grid-table > thead > tr > th:nth-child(1)
.dxbl-checkbox:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio):not(.dxbl-readonly):not(.dxbl-disabled) {
    --dxbl-checkbox-check-element-border: white; /* สีขอบ */
}
/* /Components/Pages/Employee/ByApprover/Mobile/EmployeeMobileView.razor.rz.scp.css */
.mobile-container[b-toisgx33rn] {
    padding: 10px;
    background: #f8f9fa;
    min-height: 100vh;
}

.mobile-section[b-toisgx33rn] {
    background: white;
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.mobile-header[b-toisgx33rn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e9ecef;
}

    .mobile-header h6[b-toisgx33rn] {
        margin: 0;
        font-weight: 600;
        color: #495057;
    }

.btn-add-mobile[b-toisgx33rn] {
    background: linear-gradient(135deg, #0d6efd 0%, #0056b3 100%);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 0.95rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap; /* กันข้อความตัดบรรทัดแล้วปุ่มบวมสูง */
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
}

    .btn-add-mobile:hover[b-toisgx33rn] {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(13, 110, 253, 0.4);
    }

    .btn-add-mobile:active[b-toisgx33rn] {
        transform: translateY(0);
    }

.employee-card-compact[b-toisgx33rn] {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
    transition: all 0.2s ease;
    display: flex;
    align-items: start;
    gap: 12px;
}

    .employee-card-compact:hover[b-toisgx33rn] {
        border-color: #0d6efd;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15);
    }

    .employee-card-compact.selected[b-toisgx33rn] {
        border-color: #0d6efd;
        background: rgba(13, 110, 253, 0.05);
    }

    .employee-card-compact .form-check-input[b-toisgx33rn] {
        width: 1.15rem;
        height: 1.15rem;
        cursor: pointer;
        margin-top: 0;
    }

    .employee-card-compact .emp-name[b-toisgx33rn] {
        color: #212529;
        font-size: 0.95rem;
        line-height: 1.3;
    }

.employee-details-compact small[b-toisgx33rn] {
    color: #6c757d;
    font-size: 0.8rem;
}

.card-leave[b-toisgx33rn] {
    opacity: 0.6;
}

/* หมายเหตุ: style ของ modal จัดการ OT/ลา ย้ายไปที่
   Component/EmpByApproverMenuComponent.razor.css แล้ว (scoped ตาม component) */

/* Tabs (ใช้กับแท็บรายชื่อพนักงาน/ลาออก) */
.mobile-tabs[b-toisgx33rn] {
    display: flex;
    border-bottom: 2px solid #e9ecef;
    margin-bottom: 20px;
    gap: 5px;
}

.mobile-tab[b-toisgx33rn] {
    flex: 1;
    padding: 12px;
    text-align: center;
    background: transparent;
    border: none;
    color: #6c757d;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

    .mobile-tab:hover[b-toisgx33rn] {
        color: #0d6efd;
        background: rgba(13, 110, 253, 0.05);
    }

    .mobile-tab.active[b-toisgx33rn] {
        color: #0d6efd;
        font-weight: 600;
    }

        .mobile-tab.active[b-toisgx33rn]::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 2px;
            background: #0d6efd;
        }

/* /Components/Pages/Employee/EmpDocument/EmpDocMonitor.razor.rz.scp.css */
/*หัวตาราง*/
.emp-document[b-ri1an8o1pm]  .dxbl-grid-table > thead > tr > th {
    text-align: center !important;
    background-color: #0d6efd !important;
    color: white !important;
    padding: 12px !important;
}

.text-gray[b-ri1an8o1pm] {
    color: #495057 !important;
}
/* /Components/Pages/Employee/EmpDocument/Loan/EmpLoanGuarantorApproval/EmpLoanGuarantorApproval.razor.rz.scp.css */
.guarantor-section[b-xzevbk2p28] {
    transition: all 0.3s ease;
}

    .guarantor-section.border-primary[b-xzevbk2p28] {
        background-color: var(--bs-light) !important;
    }

    .guarantor-section.bg-light[b-xzevbk2p28] {
        background-color: #f8f9fa !important;
        opacity: 0.7;
    }

.approval-container[b-xzevbk2p28] {
    display: flex;
    justify-content: center;
    gap: 6px;
    max-width: 440px;
    margin: 0 auto;
}

[b-xzevbk2p28] .btn-custom {
    width: 25%;
}

/* ===== Mobile Responsive ===== */
@media (max-width: 576px) {
    .approval-container[b-xzevbk2p28] {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .approval-img[b-xzevbk2p28] {
        width: auto; /* ไม่บังคับย่อ */
        max-width: 100%; /* กันล้นจอ */
    }

    [b-xzevbk2p28] .btn-custom {
        width: 100%;
    }
}

.approval-img[b-xzevbk2p28] {
    max-width: 100%;
    height: auto;
    cursor: pointer;
    filter: grayscale(100%);
    opacity: 0.35;
    transition: filter 0.25s ease, opacity 0.25s ease;
}

    .approval-img.selected[b-xzevbk2p28] {
        filter: grayscale(0%);
        opacity: 1;
    }

    .approval-img:hover[b-xzevbk2p28] {
        opacity: 0.6;
    }

    .approval-img.selected:hover[b-xzevbk2p28] {
        opacity: 1;
    }

/* ===== Disabled Guarantor Section ===== */
.disabled-section[b-xzevbk2p28] {
    position: relative;
    border: 2px solid #dee2e6;
    background-color: #f1f3f5 !important;
}

    /* ทำให้ทั้ง section คลิกไม่ได้ */
    .disabled-section *[b-xzevbk2p28] {
        pointer-events: none;
    }

/* ลดความชัด */
.disabled-section[b-xzevbk2p28] {
    opacity: 0.65;
}

    /* แสดง visual overlay */
    .disabled-section[b-xzevbk2p28]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.65);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        color: #6c757d;
        font-size: 1rem;
        border-radius: 0.5rem;
        pointer-events: none;
    }
/* /Components/Pages/Employee/EmpDocument/Loan/EmployeeLoan.razor.rz.scp.css */
/* /Components/Pages/Employee/EmpDocument/ManPower/EmployeeManPower.razor.rz.scp.css */
.cursor-pointer[b-q1bgx59wfp] {
    cursor: pointer;
}

/*=========== verhicle ============*/
.driving-container[b-q1bgx59wfp] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px; /* ระยะห่างเล็ก */
    max-width: 580px; /* คุม block */
    margin: 0 auto;
}

.driving-img[b-q1bgx59wfp] {
    width: calc(50% - 3px); /* แถวละ 2 */
    max-width: 100%; /* ใช้ขนาดรูปเดิม */
    height: auto; /* ❗ คืนขนาดเดิม */

    cursor: pointer;
    filter: grayscale(100%);
    opacity: 0.35;
    transition: filter 0.25s ease, opacity 0.25s ease;
}

    .driving-img.selected[b-q1bgx59wfp] {
        filter: grayscale(0%);
        opacity: 1;
    }


/*========== Gender ==========*/
.gender-container[b-q1bgx59wfp] {
    display: flex;
    justify-content: center;
    gap: 6px; /* ระยะห่างเล็ก */
    max-width: 440px; /* คุม block */
    margin: 0 auto;
}

.gender-img[b-q1bgx59wfp] {
    max-width: 100%; /* ใช้ขนาดรูปเดิม */
    height: auto; /* ❗ คืนขนาดเดิม */

    cursor: pointer;
    filter: grayscale(100%);
    opacity: 0.35;
    transition: filter 0.25s ease, opacity 0.25s ease;
}

    .gender-img.selected[b-q1bgx59wfp] {
        filter: grayscale(0%);
        opacity: 1;
    }

/*=========== Language ===========*/
.language-logo[b-q1bgx59wfp] {
    
}

    .language-logo img[b-q1bgx59wfp] {
        max-width: 200px;
        height: auto;
    }

/*หัวตาราง*/
.table-header-custom[b-q1bgx59wfp]  .dxbl-grid-table > thead > tr > th {
    text-align: center !important;
    background-color: #0d6efd !important;
    color: white !important;
}
/* /Components/Pages/Employee/EmpDocument/Position/EmpPositionAllowanceForm.razor.rz.scp.css */
/* /Components/Pages/Employee/EmpDocument/Probation/EmpProbationForm.razor.rz.scp.css */
/* /Components/Pages/Employee/EmpIdCard/EmpIdCard.razor.rz.scp.css */
/* Outlined floating-label input */
.outlined-input[b-oweoge2h84] {
    padding: 10px 12px;
    font-size: 13px;
    color: #222;
    font-family: inherit;
    border: 1.5px solid #bbb;
    outline: none;
    transition: border-color 0.2s;
}

.outlined-input:focus[b-oweoge2h84] {
    border-color: #003875;
}

.outlined-input[readonly][b-oweoge2h84] {
    color: #444;
    background: #fafafa !important;
    cursor: default;
}

.outlined-label[b-oweoge2h84] {
    position: absolute;
    left: 10px;
    top: -9px;
    font-size: 12.5px;
    color: #003875;
    padding: 0 4px;
    pointer-events: none;
    line-height: 1;
}

/* keep label up when input has value */
.outlined-input:not(:placeholder-shown)~.outlined-label[b-oweoge2h84] {
    top: -9px;
    font-size: 12.5px;
}

.outlined-input:placeholder-shown~.outlined-label[b-oweoge2h84] {
    top: -9px;
    font-size: 12.5px;
}

/* Tab icon */
.tab-icon-wrapper[b-oweoge2h84] {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #ECEEF2;
    color: #5a6f8c;
    transition: all 0.2s;
}

.tab-icon-wrapper.active[b-oweoge2h84] {
    background: #003875;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 56, 117, 0.35);
}

/* Accordion chevron */
.accordion-chevron[b-oweoge2h84] {
    transition: transform 0.25s ease;
}

.accordion-chevron.open[b-oweoge2h84] {
    transform: rotate(180deg);
}

.accordian-icon-custom[b-oweoge2h84] {
    color: #003875;
    width: 22.5px;
    height: 20px;
}

[b-oweoge2h84] .accordian-arrow-custom .dxbl-group>.dxbl-group-header>.dxbl-btn.dxbl-group-expand-btn {
    display: none;
}

/* ID card placeholder dashed border */
.idcard-placeholder[b-oweoge2h84] {
    width: 110px;
    height: 70px;
    background: #f0f0f0;
    border: 1px dashed #ccc;
    border-radius: 6px;
}

/* Checkbox accent */
.checklist-checkbox[b-oweoge2h84] {
    width: 18px;
    height: 18px;
    accent-color: #003875;
    cursor: pointer;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 400px) {
    .idcard-img[b-oweoge2h84] {
        width: 90px !important;
        height: 58px !important;
    }

    .tab-icon-wrapper[b-oweoge2h84] {
        width: 46px !important;
        height: 46px !important;
    }
}

@keyframes slideUp-b-oweoge2h84 {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}


/* Slide-up animation สำหรับ popup */
.slide-up-popup .dxbl-popup[b-oweoge2h84] {
    animation: slideUpModal-b-oweoge2h84 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    transform-origin: bottom center;
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    position: fixed !important;
}

@keyframes slideUpModal-b-oweoge2h84 {
    from {
        transform: translateY(100%);
        opacity: 0.5;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn-b-oweoge2h84 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn-b-oweoge2h84 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* /Components/Pages/Employee/EmployeePayrollSlip/EmpPayrollSlip.razor.rz.scp.css */
.grid-desktop[b-h21e769bjl] {
    display: none;
}

/* Mobile: แสดง mobile grid */
.grid-mobile[b-h21e769bjl] {
    display: block;
}

/* Desktop & Tablet: แสดง desktop grid, ซ่อน mobile grid */
@media (min-width: 768px) {
    .grid-desktop[b-h21e769bjl] {
        display: block;
    }

    .grid-mobile[b-h21e769bjl] {
        display: none;
    }
}
/* /Components/Pages/HR/EmpContract/EmpContractForm.razor.rz.scp.css */
/* ใบสรุปว่าจ้าง — เฉพาะสิ่งที่ Bootstrap utility ทำไม่ได้ */

.ec-title[b-wu0541ibgc] {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 12px;
}

/* Card ตัวกรอง (แผนก / ตำแหน่ง / พนักงาน) — บรรทัดเดียว ประหยัดพื้นที่ (การ์ดเปล่า ไม่มีสี) */
.ec-filter-card[b-wu0541ibgc] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px 16px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

/* กลุ่ม label + dropdown — อยู่บรรทัดเดียวกันทั้ง 3 ตัว */
.ec-filter-group[b-wu0541ibgc] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
}

/* กลุ่มพนักงานกว้างกว่าเพราะมีทั้งรหัสและชื่อ */
.ec-filter-group--emp[b-wu0541ibgc] {
    flex: 2 1 0;
}

.ec-tool-label[b-wu0541ibgc] {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
}

/* dropdown กรอง แผนก / ตำแหน่ง / พนักงาน — ยืดเต็มกลุ่ม */
.ec-filter-picker[b-wu0541ibgc],
.ec-emp-picker[b-wu0541ibgc] {
    flex: 1 1 auto;
    min-width: 0;
}

/* badge นับจำนวนพนักงาน — สีกลาง ไม่มีสี Theme */
.ec-count-badge[b-wu0541ibgc] {
    background: #64748b;
    color: #fff;
    font-size: 12px;
    padding: 6px 10px;
    white-space: nowrap;
}

/* หัวการ์ดพนักงาน (Card Profile) */
.ec-card-head[b-wu0541ibgc] {
    background: #003875;
    color: #fff;
}

.ec-avatar[b-wu0541ibgc] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex: 0 0 auto;
}

.ec-emp-name[b-wu0541ibgc] {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

/* หัวข้อกลุ่มข้อมูลในการ์ด — สี Theme #003875 */
.ec-section-title[b-wu0541ibgc] {
    font-size: 15px;
    font-weight: 700;
    color: #003875;
    border-bottom: 2px solid #b3c6de;
    padding-bottom: 6px;
    margin-bottom: 12px;
}

/* ไอคอนในหัวข้อกลุ่ม ใช้สี Theme */
.ec-section-title i[b-wu0541ibgc] {
    color: #003875;
}

.ec-field-label[b-wu0541ibgc] {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 2px;
}

.ec-field-value[b-wu0541ibgc] {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    word-break: break-word;
}

@media (max-width: 576px) {
    /* จอแคบ — ยอมให้ตกบรรทัด แต่ละกลุ่มเต็มความกว้าง */
    .ec-filter-card[b-wu0541ibgc] {
        flex-wrap: wrap;
    }

    .ec-filter-group[b-wu0541ibgc],
    .ec-filter-group--emp[b-wu0541ibgc] {
        flex: 1 1 100%;
    }

    .ec-emp-name[b-wu0541ibgc] {
        font-size: 17px;
    }
}
/* /Components/Pages/HR/EmpDocHr/EmpDocMonitorHr.razor.rz.scp.css */
/*หัวตาราง*/
.emp-doc-monitor-hr[b-omgz45k500]  .dxbl-grid-table > thead > tr > th {
    background-color: #003875 !important;
    color: white !important;
}
/* /Components/Pages/HR/EmpSalaryExpense/Component/SalaryExpenseTableComponent.razor.rz.scp.css */
/*หัวตาราง*/
.salary-expense-table[b-4olwbqcbsi]  .dxbl-grid-table > thead > tr > th {
    background-color: #003875 !important;
    color: white !important;
}

/* ช่องกรอกแบบ inline ในเซลล์ (โหมดแก้ไข) — ให้กะทัดรัด เต็มความกว้างเซลล์ ไม่ดันความสูงแถว */
.salary-expense-table[b-4olwbqcbsi]  .se-cell-input {
    height: 26px;
    padding: 1px 6px;
    font-size: 12.5px;
    min-width: 60px;
}
/* /Components/Pages/Index.razor.rz.scp.css */
[b-50q7grph81] .welcome-gridlayout {
    margin: auto;
    width: auto;
    height: auto;
}

[b-50q7grph81] .welcome-gridlayout .dxbl-gridlayout-root {
    align-content: center;
    justify-content: center;
}

[b-50q7grph81] .title {
    text-align: center;
}

[b-50q7grph81] .welcome-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

[b-50q7grph81] .welcome-card {
    width: 26.25rem;
    height: 15rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s;
    border-radius: 1rem;
    color: var(--bs-link-color, var(--DS-primary-90));
    gap: 1.5rem;
    text-decoration: none;
    position: relative;
}

[b-50q7grph81] .welcome-card:hover {
    box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1);
}

[b-50q7grph81] .welcome-card .welcome-card-img {
    width: 6.5rem;
    height: 6.5rem;
}

[b-50q7grph81] .welcome-card .welcome-card-text {
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: 0em;
    text-align: center;
    text-decoration: unset;
}

[b-50q7grph81] .welcome-card .welcome-card-back {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bs-body-color, var(--DS-color-content-neutral-default-rest));
    opacity: 0.05;
    border-radius: 1rem;
    z-index: -2;
}
/* /Components/Pages/ViewFile/ViewFilePage.razor.rz.scp.css */
.image-container[b-u750opdl3q] {
    position: relative;
}

.alert-sm[b-u750opdl3q] {
    padding: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 0;
}

/* Image Popup Styles */
.image-popup-overlay[b-u750opdl3q] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.image-popup-content[b-u750opdl3q] {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.image-popup-content.doc-popup[b-u750opdl3q] {
    width: 70vw;
    max-width: 70vw;
}

.popup-image[b-u750opdl3q] {
    max-width: 100%;
    max-height: calc(90vh - 60px);
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.btn-close-popup[b-u750opdl3q] {
    position: absolute;
    top: -40px;
    right: 0;
    background: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    color: #333;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

    .btn-close-popup:hover[b-u750opdl3q] {
        background: #f8f9fa;
        transform: scale(1.1);
    }

.popup-filename[b-u750opdl3q] {
    color: white;
    margin-top: 15px;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .image-popup-content.doc-popup[b-u750opdl3q] {
        width: 95vw;
        max-width: 95vw;
    }
    .popup-image[b-u750opdl3q] {
        max-height: calc(90vh - 80px);
    }

    .btn-close-popup[b-u750opdl3q] {
        top: -50px;
        width: 35px;
        height: 35px;
        font-size: 18px;
    }

    .popup-filename[b-u750opdl3q] {
        font-size: 12px;
        padding: 8px 15px;
    }
}