body {
}

/* Submenu popover z-index fix */
.submenu-popover {
    z-index: 2000 !important;
}

/* Submenu activator full width */
.submenu-activator {
    width: 100% !important;
    display: block !important;
}

    .submenu-activator > button,
    .submenu-activator > .mud-menu-activator {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        min-height: unset !important;
    }
/******tabStatus*****/
@media(hover: hover)and (pointer: fine) {
    .tabStatus > .mud-tabs-tabbar-info .mud-tab.mud-tab-active:hover {
        background-color: #d9ffff;
    }
}

.tabStatus > .mud-tabs-tabbar-info .mud-tab:hover {
    background-color: #d9ffff;
}

.tabStatus > .mud-tabs-tabbar-info {
    background-color: rgb(198 247 255);
    color: rgb(87 162 172);
    padding: 6px 18px;
}

    .tabStatus > .mud-tabs-tabbar-info .mud-tab {
        padding: 8px 30px 8px 16px;
    }

        .tabStatus > .mud-tabs-tabbar-info .mud-tab.mud-tab-active {
            color: #107a82;
            background: #9be9f6;
        }

    .tabStatus > .mud-tabs-tabbar-info .mud-tab-slider {
        background: #0fc1cf;
    }

.tabFileStatus > .mud-tabs-tabbar .mud-tab {
    padding: 8px 30px 8px 16px;
}
/******End tabStatus*****/
/******tabMainMenu*****/
/*@media(hover: hover)and (pointer: fine) {
    .tabMainMenu > .mud-tabs-tabbar .mud-tab.mud-tab-active:hover {
        background-color: rgb(173 219 255)
    }
}
.tabMainMenu >.mud-tab.mud-tab-active {
    color: #1e689a;
}
.tabMainMenu > .mud-tabs-tabbar {*/
/* background-color: rgb(198 247 255);*/
/*color: #6d6c7b;
}

    .tabMainMenu > .mud-tabs-tabbar .mud-tab.mud-tab-active {
        color: #1686df;
        background: #d9efff;
    }

    .tabMainMenu > .mud-tabs-tabbar .mud-tab-slider {
        background: #1686df;
    }*/

/* ✔ แก้ 1 — เส้นขอบตอน hover ถูกตัด
   เดิมใช้ box-shadow: 0px 0px 2px 0px #32c5ff; ซึ่งเป็นเงาแบบ outset
   คือวาด "นอก" กล่องของตัวเอง แต่ MudBlazor ตั้ง overflow: hidden ไว้ที่
   .mud-tabs-tabbar-content (ซอร์ส _tabs.scss บรรทัด 103) เงาจึงถูกตัด
   และเพราะ .mud-tab ไม่มี margin ซ้าย-ขวา เงาสองฝั่งนั้นหายทั้งเส้น
   เหลือแค่บน-ล่างที่มี margin 2px กันไว้ (เท่ากับค่า blur พอดี เลยโดนตัดครึ่ง)

   inset วาดอยู่ "ใน" กล่องของตัวเอง จึงไม่มีทางถูก overflow ตัด
   และลด min-height ลงเป็น 40px + margin 4px บน-ล่าง = 48px เท่าเดิม
   แถบเมนูจึงไม่ขยับตอน hover

   ลบ background-color ที่ประกาศซ้ำ 3 ครั้งในกฎเดียวกันออก
   (rgb(198 247 255) → #dcf7f4 → #e2ffff) เหลือเฉพาะตัวที่ทำงานจริง */
@media(hover: hover)and (pointer: fine) {
    .tabMainMenu .mud-tabs-tabbar-wrapper {
        margin-right: 5px !important;
    }

    .tabMainMenu > .mud-tabs-tabbar .mud-tab:hover {
        background-color: #e2ffff;
        border-radius: 5px;
        box-shadow: inset 0 0 0 1px #32c5ff;
        margin: 4px 2px;
        min-height: 40px;
    }

    .tabMainMenu > .mud-tabs-tabbar .mud-tab.mud-tab-active:hover {
        background-color: #c6f7ff;
        border-radius: 5px;
        box-shadow: inset 0 0 0 1px #32c5ff;
        margin: 4px 2px;
        min-height: 40px;
    }
}

/* ✔ แก้ 2 — ตรงนี้เคยมีปีกกา } เกินอยู่ 1 ตัว
   ไม่ใช่แค่ถูกมองข้าม แต่มันกลืนกฎถัดไปทิ้งไป 1 กฎ
   (ทดสอบแล้ว: 12 กฎ เบราว์เซอร์ parse ได้ 11)

   ✔ แก้ 3 — กฎที่ถูกกลืนคือ .MainAppBar > .mud-appbar:hover { background-color: red }
   เป็นโค้ดที่ทิ้งไว้ตอนดีบัก ลบออกแล้ว ถ้าไม่ลบและแก้ปีกกา
   แถบเมนูจะกลายเป็นสีแดงตอนเอาเมาส์ไปชี้ */

/* ✔ แก้ 4 — ตรงนี้เคยมีกฎนี้
       .tabMainMenu > .mud-tab.mud-tab-active { color: #6d6c7b !important; ... }
   เป็น selector ตาย เพราะ .mud-tab ไม่ได้เป็นลูกตรงของ .tabMainMenu
   โครงจริงซ้อนกัน 4 ชั้น:
       .mud-tabs.tabMainMenu > .mud-tabs-tabbar > .mud-tabs-tabbar-inner
         > .mud-tabs-tabbar-content > .mud-tabs-tabbar-wrapper > .mud-tab
   จึงลบทิ้ง ไม่ได้แก้ selector ให้ทำงาน เพราะ color: #6d6c7b !important
   จะไปทับสีน้ำเงิน #1686df ของกฎด้านล่าง แท็บ active จะกลายเป็นสีเทา
   ซึ่งไม่น่าใช่สิ่งที่ต้องการ */

.tabMainMenu > .mud-tabs-tabbar {
    /* background-color: rgb(198 247 255);*/
    color: #6d6c7b;
    background-color: #edffff !important;
}

    .tabMainMenu > .mud-tabs-tabbar .mud-tab.mud-tab-active {
        color: #1686df;
        background: #c6f7ff;
        background-color: #edffff !important;
    }

    .tabMainMenu > .mud-tabs-tabbar .mud-tab-slider {
        background: #0fc1cf;
        background: none;
    }


/*/******End tabMainMenu*****/
.MainAppBar > .mud-appbar {
    background-color: white !important;
    color: #1686df !important;
    background-color: #edffff !important;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 0px 5px 0px #2fe1f7;
}

.MainTxt {
    color: #1686df !important;
}

.btnNoBorder > .mud-button-outlined {
    color: var(--mud-palette-text-primary);
    border: none;
    padding: 5px 15px;
}

    .btnNoBorder > .mud-button-outlined:hover {
        color: #1686df;
        border: none;
        padding: 5px 15px;
        background: #d9efff;
        background: #d8fcff;
        border-radius: 5px;
        border: 1px solid #a2e5ff;
    }

        .btnNoBorder > .mud-button-outlined:hover > .mud-button-label {
            width: 100%;
            display: inherit;
            align-items: inherit;
            justify-content: inherit;
            padding: 7px;
        }

.btnNoBorderAdmin > .mud-button-outlined {
    color: white;
    border: none;
    padding: 5px 15px;
}

    .btnNoBorderAdmin > .mud-button-outlined:hover {
        color: #1686df;
        border: none;
        padding: 5px 15px;
        background: #d9efff;
    }

a.AdminMenu > .mud-button-root .mud-button:hover {
    color: #1686df;
    border: none;
    padding: 5px 15px;
    background: #d9efff;
}

.MainDrawner > .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: #1686df;
    background: #d9efff;
}

.mud-grid-spacing-xs-6 > .mud-grid-item {
    padding-top: 12px;
}

.mud-badge.mud-badge-default {
    color: rgb(255 255 255) !important;
    background-color: var(--mud-palette-gray-light);
}

.arrowBlue > .mud-icon-root.mud-svg-icon {
    fill: #60afff !important;
}

.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: #467bd1;
    /* background-color: #d9faff;
    background-color: #eafaff;*/
    border-radius: 10px;
    margin: 5px;
    background-color: #daecfc;
    /* background-color: #d9efff;*/
}

.mud-nav-group * .mud-navmenu .mud-nav-item .mud-nav-link {
    padding-left: 12px;
    padding-inline-start: 12px;
    padding-inline-end: unset;
}

@media(hover: hover)and (pointer: fine) {
    .mud-nav-link:hover:not(.mud-nav-link-disabled) {
        cursor: pointer;
        text-decoration: none;
        background-color: #effdff;
        border-radius: 10px;
        margin: 5px;
        /*background-color: #f1f9ff;*/
    }
}

.mud-nav-link {
    padding: 8px 8px 8px 8px;
    margin: 5px;
}
/*****tabFileStatus****/
@media(hover: hover)and (pointer: fine) {
    .tabFileStatus > .mud-tabs-tabbar .mud-tab.mud-tab-active:hover {
        background-color: rgb(173 219 255)
    }
}

/* ✔ แก้ 5 — ตรงนี้เคยมีกฎนี้
       .tabFileStatus > .mud-tab.mud-tab-active { color: #1e689a; }
   selector ตายแบบเดียวกับข้อ 4 และกฎด้านล่างตั้งสี #1686df ไว้อยู่แล้ว
   จึงลบทิ้ง ไม่มีผลกับหน้าจอ */

.tabFileStatus > .mud-tabs-tabbar {
    background-color: white;
    color: #6d6c7b;
}

    .tabFileStatus > .mud-tabs-tabbar .mud-tab.mud-tab-active {
        color: #1686df;
        background: #d9efff;
    }

    .tabFileStatus > .mud-tabs-tabbar .mud-tab-slider {
        background: #1686df;
    }
/*******End tabFileStatus*********/
.mud-divider {
    margin: 0;
    flex-shrink: 0;
    border-color: #b0afaf;
    border-width: 1px;
    border-style: solid none none none;
}

.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd) {
    background-color: #b9fffe21;
}


.mud-table-root .mud-table-head .mud-table-cell {
    text-align: center;
    font-weight: bold !important;
}

@media(hover: hover)and (pointer: fine) {
    .mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row:hover {
        background-color: #a6dfff21;
    }
}

@media(hover: hover)and (pointer: fine) {
    .mud-table-hover.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd):hover {
        background-color: #a6dfff21;
    }
}
/*******tbgreen *********/
.tbGreen .mud-table-root .mud-table-head .mud-table-cell {
    font-weight: 500;
    line-height: 1.5rem;
    background-color: #beebdf;
    color: #064c59;
    border: 1px solid #a0c9b7 !important;
}

.tbGreen .mud-table-cell {
    border: 1px solid #a0c9b7 !important;
}
/*******End tbgreen *********/
/*******tbBlue *********/
.tbBlue .mud-table-root .mud-table-head .mud-table-cell {
    font-weight: 500;
    line-height: 1.5rem;
    background-color: #c8e9ff;
    color: #0c74ba;
    border: 1px solid #add5ff !important;
}

.tbBlue .mud-table-cell {
    border: 1px solid #add5ff !important;
}
/*******End tbBlue *********/
.mud-table-root .mud-table-body .mud-table-cell {
    color: #7b7272;
}

.mud-alert-text-warning {
    border: 1px solid #f6d0aa;
}

.mud-button-outlined.mud-icon-button {
    padding: 5px
}

.MainAdminDrawner > .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: #d9eaff !important;
    color: #0c5697 !important;
}

.tabLeft .mud-tab {
    justify-content: left;
    padding-top: 15px;
    min-width: 200px !important;
}

    .tabLeft .mud-tab.mud-tab-active {
        color: var(--mud-palette-primary);
        background-color: #e8e2ff;
    }

.tabLeft .mud-tab-badge {
    margin-bottom: 5px !important;
}
/*.mud-chip > .mud-chip-content {
    display : flex;
}*/
.mud-chip.mud-chip-size-medium {
    height: 28px;
}

.lightsky.mud-fab-info {
    color: rgb(99 164 255);
    --mud-ripple-color: var(--mud-palette-info-text) !important;
    --mud-ripple-opacity: var(--mud-ripple-opacity-secondary) !important;
    background-color: rgb(206 239 255);
    border: 1px solid #6dc4ff;
}

.lightgreen.mud-fab-info {
    color: rgb(62 151 128);
    --mud-ripple-color: var(--mud-palette-info-text) !important;
    --mud-ripple-opacity: var(--mud-ripple-opacity-secondary) !important;
    background-color: rgb(206 255 234);
    border: 1px solid #6dd6ff;
}

.mud-input.mud-input-outlined.mud-input-adorned-end {
    background-color: white;
}

.mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense, div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense {
    background-color: white;
}

.mud-alert-filled-success {
    color: var(--mud-palette-success-text) !important;
    font-weight: 500 !important;
    background-color: rgb(185 255 182) !important;
    color: #178613 !important;
}

.btnInline > .mud-icon-button {
    padding: 0px !important;
}
/* ให้ snackbar อยู่เหนือ MudDialog เสมอ */
#mud-snackbar-container {
    z-index: 3000 !important;
}

.swal2-container {
    z-index: 3000 !important;
}
/* กลบสีตัวอักษร/พื้นหลังของแท็บที่ MudBlazor ยังติดคลาส mud-tab-active ให้ */
.tabs-no-active .mud-tab.mud-tab-active {
    color: inherit !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* กันเหนียว — ปกติ HideSlider="true" จะไม่เรนเดอร์ element นี้อยู่แล้ว */
.tabs-no-active .mud-tab-slider {
    display: none !important;
}
/* ===================================================================
   Toast แจ้งเตือน — โทนพาสเทล Soft Amber
   สีพื้นบอกอารมณ์ / เส้นขอบกับเงาแยกตัวจากพื้นหลัง
   ห้ามลดความเข้มของ border — พื้นพาสเทลแยกจากพื้นหน้าด้วยตัวเองไม่ได้
   =================================================================== */

.mud-snackbar[class*="mud-alert-filled-"] {
    box-shadow: 0 6px 18px rgba(31, 41, 51, .16), 0 2px 4px rgba(31, 41, 51, .10) !important;
}

/* --- Warning --- */
.mud-snackbar.mud-alert-filled-warning {
    background-color: #FFF8E6 !important;
    color: #7A5A18 !important;
    border: 1px solid #D19E2E;
    border-left: 4px solid #B87D15;
}

    .mud-snackbar.mud-alert-filled-warning .mud-icon-root {
        color: #B87D15 !important;
    }

    .mud-snackbar.mud-alert-filled-warning .mud-button-root {
        color: #7A5A18 !important;
    }

/* --- Success --- */
.mud-snackbar.mud-alert-filled-success {
    background-color: #EAF8F0 !important;
    color: #1C6341 !important;
    border: 1px solid #2E8B57;
    border-left: 4px solid #2E8B57;
}

    .mud-snackbar.mud-alert-filled-success .mud-icon-root {
        color: #237A4A !important;
    }

    .mud-snackbar.mud-alert-filled-success .mud-button-root {
        color: #1C6341 !important;
    }

/* --- Info --- */
.mud-snackbar.mud-alert-filled-info {
    background-color: #E6F4FF !important;
    color: #0C4FA8 !important;
    border: 1px solid #4A96E8;
    border-left: 4px solid #1668DC;
}

    .mud-snackbar.mud-alert-filled-info .mud-icon-root {
        color: #1668DC !important;
    }

    .mud-snackbar.mud-alert-filled-info .mud-button-root {
        color: #0C4FA8 !important;
    }

/* --- Error --- */
.mud-snackbar.mud-alert-filled-error {
    background-color: #FEF1F0 !important;
    color: #9A2B25 !important;
    border: 1px solid #D1605A;
    border-left: 4px solid #CF4B43;
}

    .mud-snackbar.mud-alert-filled-error .mud-icon-root {
        color: #CF4B43 !important;
    }

    .mud-snackbar.mud-alert-filled-error .mud-button-root {
        color: #9A2B25 !important;
    }