@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html {
    /* Reserve scrollbar gutter so the page doesn't jiggle horizontally when
       content height crosses the viewport-height threshold (scrollbar appears
       /disappears). Fixes /report pages bouncing a few px on resize.
       Apply on html only — applying on body too creates phantom scroll. */
    scrollbar-gutter: stable;
}
html, body {
    font-family: "Sukhumvit Set",Icons !important;
    background: none;
    color:black;
}

/* form controls ไม่ inherit font จาก body โดย default → ใช้ font เริ่มต้นของ browser
   ที่บางเครื่อง render วรรณยุกต์ไทย (ไม้เอก ่ / ไม้โท ้) ไม่ออก
   บังคับให้ใช้ font ที่รองรับไทยครบ + fallback ข้ามแพลตฟอร์ม (Tahoma=Windows, Sukhumvit=Mac) */
input, textarea, select {
    font-family: "Sukhumvit Set", Tahoma, "Sarabun", "Noto Sans Thai", sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/********************** My CSS ***********************/
.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.lbl-mousepointer {
    cursor:pointer;
}
.ul-menu {
    padding-left: 15px;
}
.li-menu {
    list-style-type: square;
    margin: 5px;
    padding:0px 0px;
}

/* ===== Shared menu-list layout (used by Report/Transaction/Upload/UserMaintenance) =====
   User spec: menu pages ไม่มี dark mode — สีนวลตา hard-set ทุก theme
   .tm-page wrapper + !important + color-scheme:light → กัน body/parent leak สีเข้ม
   =================================================================================== */
.tm-page {
    background: #f5f7fb !important;       /* นวล-ขาวอ่อน (กัน dark mode leak) */
    color: #223046 !important;
    min-height: 100vh;
    padding: 18px 14px 30px;
    color-scheme: light !important;
    /* Force CSS vars เป็นค่าฝั่ง light ครอบ subtree — กันค่า dark จาก report-shell parent leak
       สำหรับ FundInfo/FundHoliday/อื่น ๆ ที่ใช้ var(--surface), var(--ink), ... */
    --surface: #ffffff !important;
    --surface-hover: #f4f6fa !important;
    --surface-strong: #ffffff !important;
    --surface-border: rgba(15,20,40,0.08) !important;
    --ink: #0A0F1F !important;
    --ink-strong: #0A0F1F !important;
    --ink-muted: #5A6075 !important;
    --ink-soft: #9098A8 !important;
    --accent-blu: #1A3A6E !important;
    --accent-blu-bright: #2D5294 !important;
    --accent-blu-soft: #DDE5F1 !important;
    --negative: #C5364D !important;
    --positive: #0a8b3b !important;
}
.tm-page * {
    color-scheme: light !important;
}
/* Force overrides ทุก tm-* ใน .tm-page — กัน body:has(...dark) ที่ขึ้น parent */
.tm-page .tm-main-title { color: midnightblue !important; }
.tm-page .tm-group-title { color: #1f3b73 !important; }
.tm-page .tm-link { color: #223046 !important; background: transparent !important; }
.tm-page .tm-link:hover { background-color: #f2f6fc !important; color: #0b51b7 !important; }
.tm-page .tm-link.active { background-color: #eaf2ff !important; color: #0b2b63 !important; }

/* FundHoliday — direct dark-mode rules ที่ set ค่าตรง (ไม่ผ่าน var) → ต้อง !important override */
.tm-page .fhp-cell.is-today { background: var(--fhp-accent-soft, #DDE5F1) !important; box-shadow: inset 0 0 0 2px var(--fhp-accent-bright, #2D5294) !important; }
.tm-page .fhp-cell-body.is-fund { color: var(--fhp-accent, #1A3A6E) !important; }
.tm-page .fhp-title { color: var(--fhp-accent, #1A3A6E) !important; }

.tm-main-section {
    padding: 4px 6px 6px 6px;
}

.tm-main-section + .tm-main-section {
    margin-top: 4px;
}

.tm-main-title {
    margin: 0 0 22px 0;
    color: midnightblue;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: underline;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.tm-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 14px 18px;
    align-items: start;
}

.tm-group-block {
    min-width: 0;
    margin-bottom: 15px;
}

.tm-group-title {
    margin: 0 0 2px 0;
    color: #1f3b73;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.tm-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tm-item {
    margin: 0 0 1px 0;
}

.tm-link {
    display: block;
    padding: 3px 8px;
    text-decoration: none;
    color: #223046;
    font-size: 0.92rem;
    line-height: 1.3;
    border-radius: 6px;
    font-weight: 400;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

.tm-link:hover {
    background-color: #f2f6fc;
    color: #0b51b7;
    text-decoration: none;
    font-weight: 700 !important;
}

.tm-link:visited {
    font-weight: 400;
}

.tm-link.active {
    background-color: #eaf2ff;
    color: #0b2b63;
    font-weight: 700;
}

/* Red count badge หลังชื่อเมนู — ใช้กับหน้า /transaction-menu + /upload-menu
   จำนวน alerts ที่ NavigateUrl ตรงกับ href ของเมนู (จาก IInboxClientService) */
.tm-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    margin-left: 8px;
    border-radius: 10px;
    background: #dc2626;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.amisButton {
    border-style: outset;
    background-color: #1C4E80;
    color: white;
    padding: 3px 15px 3px 15px;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 5px #999;
    transition-delay: 0s;
    transition: 0s;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

    .amisButton:hover {
        background-color: #008CBA;
    }

    .amisButton:active {
        background-color: #f44336;
        box-shadow: 0 2px black;
        transform: translateY(1px);
    }
    .amisButton:focus {
        background-color: darksalmon;
    }


.iconButton {
    border-style: outset;
    background-color: transparent;
    color: #1C4E80;
    padding: 0px 5px;
    text-align: center;
    cursor: pointer;
    transition-delay: 0s;
    transition: 0s;
    font-size: 1.1rem;
    font-weight: bold;
    user-select: none;
}

    .iconButton:hover {
        color: red;
    }

    .iconButton:active {
        color: #f44336;
        transform: translateY(1px);
    }

    .iconButton:focus {
        color: darksalmon;
    }

.iconButtonRed {
    border-style: outset;
    background-color: transparent;
    color: darkred;
    padding: 0px 5px;
    text-align: center;
    cursor: pointer;
    transition-delay: 0s;
    transition: 0s;
    font-size: 1.1rem;
    font-weight: bold;
    user-select: none;
}

    .iconButtonRed:hover {
        color: red;
    }

    .iconButtonRed:active {
        color: #f44336;
        transform: translateY(1px);
    }

    .iconButtonRed:focus {
        color: darksalmon;
    }

.noBorder {
    border:1px solid transparent;
}

.amisMenuActiveButton {
    font-weight: bold;
    border: 1px solid var(--accent-blu, #134DA1);
    background: linear-gradient(var(--accent-blu, #134DA1), var(--accent-blu-deep, #203463)) !important;
    box-shadow: 0 2px 6px rgba(15, 20, 40, 0.18);
    color: #fff;
    padding: 6px 18px;
    text-align: center;
    border-radius: 999px;
    cursor: pointer;
}

.amisMenuInactiveButton {
    font-weight: 600;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink, #1C4E80);
    padding: 6px 18px;
    text-align: center;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

    .amisMenuInactiveButton:hover {
        color: var(--accent-blu, #008CBA);
        background: var(--surface-hover, rgba(0,0,0,0.04));
    }

.amisReportButton {
    border-style: outset;
    background-color: PaleVioletRed;
    color: white;
    padding: 3px 15px 3px 15px;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 5px #999;
    transition-delay: 0s;
    transition: 0s;
}

    .amisReportButton:hover {
        background-color: #008CBA;
    }

    .amisReportButton:active {
        background-color: #f44336;
        box-shadow: 0 2px black;
        transform: translateY(1px);
    }

    .amisReportButton:focus {
        background-color: darksalmon;
    }
.navlink-menu {
    color: black;
    text-decoration: solid;
    cursor: pointer;
}

    .navlink-menu:hover {
        color: darkblue;
        font-weight: bolder;
        cursor: pointer;
    }

    .navlink-menu:active {
        color: darkred;
        text-decoration: underline solid;
        cursor: pointer;
    }

.xlsFormat {
    border: none;
    padding: 3px 7px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    background-color: darkgreen;
    color: white;
    font-weight: bolder;
}
.amisbuttonActive {
    border-radius: 6px;
    border: none;
    padding: 3px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    background-color: #1C4E80;
    color: white;
    font-weight: 500;
}
.amisbuttonInactive {
    border-radius: 6px;
    border: none;
    padding: 3px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    background-color: #D4D0D5;
    color: white;
    font-weight: 500;
}


.menu-web-active {
    border-radius: 5px;
    padding: 4px 10px 4px 10px;
    font-size: 0.85rem;
    background-color: #0059b3;
    color: white;
}

.my-table .mud-table-cell {
    padding: 0px 0px; /* vertical, horizontal */
}
.menu-web-inactive {
    border-radius: 5px;
    padding: 4px 10px 4px 10px;
    font-size: 0.85rem;
    background-color: transparent;
    color: #0059b3;
    font-weight: bold;
}

    table.fixed {
        table-layout: fixed;
    }

    table.fixed td {
        overflow: hidden;
    }

.span-alink {
    font-style: italic;
    color: blue;
    text-decoration: underline solid;
    cursor: pointer;
}

    .span-alink:hover {
        color: lightblue;
        text-decoration: underline solid;
        cursor: pointer;
    }

    .span-alink:active {
        color: black;
        text-decoration: underline solid;
        cursor: pointer;
    }


.BlueTemplateTable table.fixed {
    table-layout: fixed;
}

/* Rotated permission-matrix header (used by MenuConfigTable + UserMaintenance Matrix) */
.rtxt {
    transform: rotate(-90deg);
    transform-origin: top left;
    position: relative;
    top: 20px;
}

.rtd {
    white-space: nowrap;
    height: 180px;
    vertical-align: bottom;
    width: 20px;
}
.BlueTemplateTable .mud-table-cell {
    padding: 0px 0px; /* vertical, horizontal */
    color:black;
}

.BlueTemplateTable th {
    padding-left: 2px;
    border: 1px solid darkgray;
    background-color: #1D6189;
    color: white;
    font-weight: normal;
    border-collapse: collapse;
}

.BlueTemplateTable tr:nth-child(even) {
    background-color: aliceblue;
}
.BlueTemplateTable tr:nth-child(odd) {
    background-color: white;
}

.BlueTemplateTable {
    border: 1px solid darkgray;
    border-collapse: collapse;
}

    .BlueTemplateTable td, .BlueTemplateTable tr {
        padding-left: 2px;
        border: 1px solid darkgray;
        border-collapse: collapse;
        color: black;
    }

.CyanTemplateTable table.fixed {
    table-layout: fixed;
}

.CyanTemplateTable th {
    padding-left: 2px;
    background-color: #B3CCCC;
    border: 1px solid darkgray;
    color: black;
    font-weight: bold;
    border-collapse: collapse;
}
.CyanTemplateTable .mud-table-cell {
    padding: 0px 0px; /* vertical, horizontal */
    color: black;
}

.CyanTemplateTable tr:nth-child(even) {
    background-color: #EEF7F1;
}

.CyanTemplateTable {
    border: 1px solid darkgray;
    border-collapse: collapse;
}

    .CyanTemplateTable td, .CyanTemplateTable tr {
        padding-left: 2px;
        border: 1px solid darkgray;
        border-collapse: collapse;
        color: black;
    }

.PinkTemplateTable table.fixed {
    table-layout: fixed;
}

.PinkTemplateTable th {
    padding-left: 2px;
    border: 1px solid black;
    background-color: #d4bfca;
    font-weight: bold;
    border-collapse: collapse;
}
.PinkTemplateTable .mud-table-cell {
    padding: 0px 0px; /* vertical, horizontal */
    color: black;
}


.PinkTemplateTable tr:nth-child(even) {
    background-color: Linen;
}

.PinkTemplateTable {
    border: 1px solid black;
    border-collapse: collapse;
}

    .PinkTemplateTable td, .PinkTemplateTable tr {
        padding-left: 2px;
        border: 1px solid black;
        border-collapse: collapse;
        color: black;
    }

    .GreenTemplateTable table.fixed {
        table-layout: fixed;
    }

.GreenTemplateTable th {
    padding-left: 2px;
    border: 1px solid black;
    background-color: #a8c2b5;
    font-weight: bold;
    border-collapse: collapse;
}
.GreenTemplateTable .mud-table-cell {
    padding: 0px 0px; /* vertical, horizontal */
    color: black;
}


.GreenTemplateTable tr:nth-child(even) {
    background-color: Linen;
}

.GreenTemplateTable {
    border: 1px solid black;
    border-collapse: collapse;
}

    .GreenTemplateTable td, .GreenTemplateTable tr {
        padding-left: 2px;
        border: 1px solid black;
        border-collapse: collapse;
        color: black;
    }

    .BrownTemplateTable table.fixed {
        table-layout: fixed;
    }

.BrownTemplateTable th {
    padding-left: 2px;
    border: 1px solid black;
    background-color: #cdc4b6;
    font-weight: bold;
    border-collapse: collapse;
    color: black;
}
.BrownTemplateTable .mud-table-cell {
    padding: 0px 0px; /* vertical, horizontal */
    color: black;
}

.BrownTemplateTable tr:nth-child(even) {
    background-color: Linen;
}

.BrownTemplateTable {
    border: 1px solid black;
    border-collapse: collapse;
}
    .BrownTemplateTable td, .BrownTemplateTable tr {
        padding-left: 2px;
        border: 1px solid black;
        border-collapse: collapse;
        color: black;
    }



    .RedTemplateTable table.fixed {
        table-layout: fixed;
    }

    .RedTemplateTable th {
        padding-left: 2px;
        border: 1px solid black;
        background-color: darkred;
        color: white;
        font-weight: bold;
        border-collapse: collapse;
    }

    .RedTemplateTable tr:nth-child(even) {
        background-color: #F1D2D2;
    }
.RedTemplateTable .mud-table-cell {
    padding: 0px 0px; /* vertical, horizontal */
}

.RedTemplateTable {
    border: 1px solid black;
    border-collapse: collapse;
}

    .RedTemplateTable td, .RedTemplateTable tr {
        padding-left: 2px;
        border: 1px solid black;
        border-collapse: collapse;
        color: black;
    }


.WebTemplateTable {
    cursor: pointer;
}

    .WebTemplateTable table.fixed {
        table-layout: fixed;
    }

    .WebTemplateTable th {
        text-align:center;
        border: 1px solid darkgray;
        background-color: #1b1b7a;
        font-weight: bold;
        color: white;
    }

    .WebTemplateTable tr:nth-child(even) {
        background-color: aliceblue;
    }

    .WebTemplateTable .mud-table-cell {
        padding: 0px 0px; /* vertical, horizontal */
        color: black;
    }

    .WebTemplateTable td, .WebTemplateTable tr {
        border-top: 1px solid darkgray;
        color: black;
    }

.amis-mud-table-mobile .mud-table-cell {
    padding: 1px 1px; /* vertical, horizontal */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Global fix — SearchFilter modal table header sort labels ต้องขาว hover ก็ยังขาว
   (MudBlazor default hover เปลี่ยนเป็น primary blue → มองไม่เห็นบน blue header) */
.amis-mud-table .mud-table-head .mud-table-sort-label,
.amis-mud-table .mud-table-head .mud-table-sort-label:hover,
.amis-mud-table .mud-table-head .mud-table-sort-label:focus,
.amis-mud-table .mud-table-head .mud-table-sort-label:active {
    color: #FFFFFF !important;
}
.amis-mud-table .mud-table-head .mud-table-sort-label-icon,
.amis-mud-table .mud-table-head .mud-table-sort-label:hover .mud-table-sort-label-icon,
.amis-mud-table .mud-table-head .mud-table-sort-label:focus .mud-table-sort-label-icon {
    color: rgba(255,255,255,0.9) !important;
}

.flexfontS {
    font-size: clamp(0.7rem, 1.8vw, 0.8rem);
    vertical-align: top;
}
.flexfont {
    font-size: clamp(0.8rem, 1.8vw, 0.9rem);
    vertical-align: top;
}

.flexfontL {
    font-size: clamp(0.9rem, 1.8vw, 1rem);
    vertical-align: top;
}

.flexfontXL {
    font-size: clamp(1.2rem, 2vw, 1.4rem);
    vertical-align: top;
}

.btn:focus {
    background-color: #ff6e40;
}

input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button {
    color: #fff;
    position: relative;
    border:1px solid gray;
}

input[type="date"]::-webkit-datetime-edit-year-field {
    position: absolute !important;
    border-left: 1px solid #8c8c8c;
    padding: 2px;
    color: #000;
    left: 56px;
}

input[type="date"]::-webkit-datetime-edit-month-field {
    position: absolute !important;
    border-left: 1px solid #8c8c8c;
    padding: 2px;
    color: #000;
    left: 26px;
}


input[type="date"]::-webkit-datetime-edit-day-field {
    position: absolute !important;
    color: #000;
    padding: 2px;
    left: 4px;
}


/* The Modal (background) */
.dialog {
    display: block; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 999; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}


.dialog-loading {
    background-color: transparent;
    margin: auto;
    padding: 20px;
    border: 1px solid transparent;
    width: 90%;
    max-width: 500px;
    position: fixed;
    margin: 5% auto; /* Only centers horizontally not vertically! */
    left: 0;
    right: 0;
    text-align: center;
}

/* Modal Content */
.dialog-content {
    background-color: #204B63;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 90%;
    max-width: 500px;
    position: fixed;
    margin: 5% auto; /* Only centers horizontally not vertically! */
    left: 0;
    right: 0;
}

/* The Close Button */
.dialog-close {
    color: #aaaaaa;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top:-15px;
    right: 10px;
}

    .dialog-close:hover,
    .dialog-close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

/* ============================================================
   /report — extend report-shell edge-to-edge
   AmisMainLayout adds `px-md-4 px-lg-4` (Bootstrap 1.5rem) padding
   to .content; for /report we want the navy-tinted background to
   reach the viewport edges. Uses :has() — modern browsers only.
   ============================================================ */
.content:has(> .report-shell) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
}
/* On /report, pin html+body to the viewport so nothing scrolls at the page
   level. The .report-shell itself becomes the scroll container. This kills
   the "few px of phantom scroll below Log Out" symptom that
   min-height: 100vh + accumulated container heights kept producing. */
html:has(.report-shell),
body:has(.report-shell) {
    height: 100dvh;
    overflow: hidden;
}
body:has(.report-shell) > .page,
body:has(.report-shell) > .page > main {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}
body:has(.report-shell[data-theme="dark"]) {
    background: #0E1320 !important;
}
body:has(.report-shell[data-theme="light"]) {
    background: #E8ECF3 !important;
}
body:has(.report-shell) .nav-menu {
    /* Hide the legacy nav-menu rail when /report is active — sidebar replaces it */
    /* Already hidden for OnlyReportUser via hideNavMenu — this catches non-restricted users */
}

/* ============================================================
   AMIS MudSelect popover (Asset category dropdown) — themed to
   match navy + pink chrome. Popover renders in a portal so the
   styling lives in global app.css, not Dashboard.razor.css.
   ============================================================ */
body:has(.report-shell[data-theme="dark"]) .amis-cat-popover {
    background: #161B2A !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 14px 36px rgba(0,0,0,0.55) !important;
    border-radius: 12px !important;
}
body:has(.report-shell[data-theme="light"]) .amis-cat-popover {
    background: #FFFFFF !important;
    border: 1px solid rgba(15,20,40,0.08) !important;
    box-shadow: 0 8px 24px rgba(15,20,40,0.12) !important;
    border-radius: 12px !important;
}
body:has(.report-shell[data-theme="dark"]) .amis-cat-popover .mud-list-item {
    color: #C8CDDA !important;
}
body:has(.report-shell[data-theme="dark"]) .amis-cat-popover .mud-list-item:hover {
    background: rgba(122,156,210,0.15) !important;
    color: #F2F4FA !important;
}
body:has(.report-shell[data-theme="dark"]) .amis-cat-popover .mud-list-item.mud-selected-item {
    background: rgba(232,154,174,0.18) !important;
    color: #E89AAE !important;
}
body:has(.report-shell[data-theme="light"]) .amis-cat-popover .mud-list-item:hover {
    background: #E2EAF5 !important;
}
body:has(.report-shell[data-theme="light"]) .amis-cat-popover .mud-list-item.mud-selected-item {
    background: #FCE5EA !important;
    color: #A04A65 !important;
}

/* ============================================================
   AMIS MudDatePicker dialog — themed for /report navy + pink.
   PickerVariant="Dialog" → MudBlazor 9 renders picker inside
   .mud-overlay-dialog wrapping .mud-dialog wrapping .mud-dialog-content
   wrapping .mud-picker-static.
   ★ Override inline Style="width:..." ที่บางหน้าใส่บน <MudDatePicker>
   ซึ่ง cascade ลง dialog ทำให้ toolbar squash + month grid 1-col vertical
   Solution: บังคับ width ทุก layer ของ picker dialog ด้วย !important
   ============================================================ */
.mud-overlay-dialog .mud-picker,
.mud-overlay-dialog .mud-picker-content,
.mud-overlay-dialog .mud-picker-static,
.mud-dialog-content .mud-picker,
.mud-dialog-content .mud-picker-content,
.mud-dialog-content .mud-picker-static,
.mud-dialog .mud-picker,
.mud-picker.mud-picker-static {
    width: auto !important;
    min-width: 320px !important;
}
.mud-overlay-dialog .mud-picker-month-container,
.mud-dialog-content .mud-picker-month-container,
.mud-picker .mud-picker-month-container {
    width: 320px !important;
    display: flex !important;
    flex-wrap: wrap !important;
}
.mud-overlay-dialog .mud-picker-month-container .mud-picker-month,
.mud-dialog-content .mud-picker-month-container .mud-picker-month,
.mud-picker .mud-picker-month-container .mud-picker-month {
    flex: 1 0 33.33% !important;
    height: 60px !important;
}
.mud-overlay-dialog .mud-picker-year-container,
.mud-dialog-content .mud-picker-year-container,
.mud-picker .mud-picker-year-container {
    width: 320px !important;
}
.mud-overlay-dialog .mud-picker-calendar-container,
.mud-dialog-content .mud-picker-calendar-container,
.mud-picker .mud-picker-calendar-container {
    width: 320px !important;
}
.mud-overlay-dialog .mud-picker-toolbar,
.mud-dialog-content .mud-picker-toolbar,
.mud-picker .mud-picker-toolbar {
    width: 100% !important;
    min-width: 320px !important;
}
body:has(.report-shell[data-theme="dark"]) .mud-overlay-dialog {
    background: rgba(8, 12, 22, 0.72) !important;
}
body:has(.report-shell[data-theme="dark"]) .mud-dialog .mud-picker,
body:has(.report-shell[data-theme="dark"]) .mud-picker.mud-picker-static {
    background: #161B2A !important;
    color: #E5E8F0 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,0.55) !important;
    border-radius: 14px !important;
}
body:has(.report-shell[data-theme="dark"]) .mud-picker .mud-picker-toolbar {
    background: linear-gradient(135deg, #1E2840 0%, #161B2A 100%) !important;
    color: #F2F4FA !important;
}
body:has(.report-shell[data-theme="dark"]) .mud-picker .mud-picker-toolbar .mud-button-text,
body:has(.report-shell[data-theme="dark"]) .mud-picker .mud-picker-toolbar .mud-typography {
    color: #F2F4FA !important;
}
body:has(.report-shell[data-theme="dark"]) .mud-picker .mud-picker-calendar-header,
body:has(.report-shell[data-theme="dark"]) .mud-picker .mud-picker-calendar-header-transition {
    color: #C8CDDA !important;
}
body:has(.report-shell[data-theme="dark"]) .mud-picker .mud-picker-calendar-header .mud-icon-button {
    color: #C8CDDA !important;
}
body:has(.report-shell[data-theme="dark"]) .mud-picker .mud-picker-calendar-day {
    color: #C8CDDA !important;
}
body:has(.report-shell[data-theme="dark"]) .mud-picker .mud-picker-calendar-day:hover {
    background: rgba(122,156,210,0.18) !important;
}
body:has(.report-shell[data-theme="dark"]) .mud-picker .mud-picker-calendar-day.mud-current {
    border: 1px solid #7A9CD2 !important;
    color: #F2F4FA !important;
}
body:has(.report-shell[data-theme="dark"]) .mud-picker .mud-picker-calendar-day.mud-selected,
body:has(.report-shell[data-theme="dark"]) .mud-picker .mud-picker-calendar-day.mud-button-filled {
    background: #E89AAE !important;
    color: #1A1F2E !important;
}
body:has(.report-shell[data-theme="dark"]) .mud-picker .mud-picker-calendar-day.mud-disabled {
    color: rgba(200,205,218,0.32) !important;
}
body:has(.report-shell[data-theme="dark"]) .mud-picker .mud-picker-calendar-day-name {
    color: rgba(200,205,218,0.55) !important;
}
body:has(.report-shell[data-theme="dark"]) .mud-picker .mud-picker-year,
body:has(.report-shell[data-theme="dark"]) .mud-picker .mud-picker-month {
    color: #C8CDDA !important;
}
body:has(.report-shell[data-theme="dark"]) .mud-picker .mud-picker-year.mud-picker-year-selected,
body:has(.report-shell[data-theme="dark"]) .mud-picker .mud-picker-month.mud-picker-month-selected {
    color: #E89AAE !important;
}
body:has(.report-shell[data-theme="dark"]) .mud-picker .mud-picker-actions .mud-button-text {
    color: #E89AAE !important;
}

body:has(.report-shell[data-theme="light"]) .mud-overlay-dialog {
    background: rgba(15, 20, 40, 0.42) !important;
}
body:has(.report-shell[data-theme="light"]) .mud-dialog .mud-picker,
body:has(.report-shell[data-theme="light"]) .mud-picker.mud-picker-static {
    background: #FFFFFF !important;
    color: #1A1F2E !important;
    border: 1px solid rgba(15,20,40,0.08) !important;
    box-shadow: 0 12px 32px rgba(15,20,40,0.18) !important;
    border-radius: 14px !important;
}
body:has(.report-shell[data-theme="light"]) .mud-picker .mud-picker-toolbar {
    background: linear-gradient(135deg, #2C3A5C 0%, #1E2840 100%) !important;
    color: #FFFFFF !important;
}
body:has(.report-shell[data-theme="light"]) .mud-picker .mud-picker-toolbar .mud-button-text,
body:has(.report-shell[data-theme="light"]) .mud-picker .mud-picker-toolbar .mud-typography {
    color: #FFFFFF !important;
}
body:has(.report-shell[data-theme="light"]) .mud-picker .mud-picker-calendar-day:hover {
    background: #E2EAF5 !important;
}
body:has(.report-shell[data-theme="light"]) .mud-picker .mud-picker-calendar-day.mud-current {
    border: 1px solid #2C3A5C !important;
}
body:has(.report-shell[data-theme="light"]) .mud-picker .mud-picker-calendar-day.mud-selected,
body:has(.report-shell[data-theme="light"]) .mud-picker .mud-picker-calendar-day.mud-button-filled {
    background: #C4607A !important;
    color: #FFFFFF !important;
}
body:has(.report-shell[data-theme="light"]) .mud-picker .mud-picker-year.mud-picker-year-selected,
body:has(.report-shell[data-theme="light"]) .mud-picker .mud-picker-month.mud-picker-month-selected {
    color: #C4607A !important;
}
body:has(.report-shell[data-theme="light"]) .mud-picker .mud-picker-actions .mud-button-text {
    color: #C4607A !important;
}

/* ============================================================
   Month / Year picker — distinguish clickable items from disabled.
   MudBlazor 9 defaults: all months render in the same low-contrast
   text colour with no hover/current marker → users can't tell which
   month is "today" (selectable) and which is disabled.
   Fixes:
     • light theme: explicit dark text on every month/year (not just selected)
     • dark theme: brighten unselected months (was #C8CDDA, ↑ readable)
     • hover background on each item so the pointer feels alive
     • current-month outline (mud-picker-month-current) so today stands out
     • selected month gets a filled background, not just colour change
   ============================================================ */
/* Cover ALL MudBlazor 9 class variants: with and without container prefix +
   the .mud-button-color-primary class that 9.x actually uses for "selected" */
.mud-picker .mud-picker-month-container .mud-picker-month,
.mud-picker .mud-picker-year-container .mud-picker-year,
.mud-picker-month-container .mud-picker-month,
.mud-picker-year-container .mud-picker-year,
.mud-picker-month,
.mud-picker-year {
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.12s, color 0.12s, box-shadow 0.12s;
}

/* Light theme — base + hover + selected */
body:has(.report-shell[data-theme="light"]) .mud-picker-month,
body:has(.report-shell[data-theme="light"]) .mud-picker-year {
    color: #1F2937 !important;
    font-weight: 500;
    opacity: 1 !important;
}
body:has(.report-shell[data-theme="light"]) .mud-picker-month:hover,
body:has(.report-shell[data-theme="light"]) .mud-picker-year:hover {
    background: #DBEAFE !important;
    color: #0F172A !important;
}
body:has(.report-shell[data-theme="light"]) .mud-picker-month.mud-picker-month-selected,
body:has(.report-shell[data-theme="light"]) .mud-picker-year.mud-picker-year-selected,
body:has(.report-shell[data-theme="light"]) .mud-picker-month.mud-button-color-primary,
body:has(.report-shell[data-theme="light"]) .mud-picker-year.mud-button-color-primary {
    color: #FFFFFF !important;
    background: #C4607A !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 6px rgba(196, 96, 122, 0.40);
}

/* Dark theme — bright base, hover, selected */
body:has(.report-shell[data-theme="dark"]) .mud-picker-month,
body:has(.report-shell[data-theme="dark"]) .mud-picker-year {
    color: #F1F5F9 !important;
    font-weight: 500;
    opacity: 1 !important;
}
body:has(.report-shell[data-theme="dark"]) .mud-picker-month:hover,
body:has(.report-shell[data-theme="dark"]) .mud-picker-year:hover {
    background: rgba(255,255,255,0.14) !important;
    color: #FFFFFF !important;
}
body:has(.report-shell[data-theme="dark"]) .mud-picker-month.mud-picker-month-selected,
body:has(.report-shell[data-theme="dark"]) .mud-picker-year.mud-picker-year-selected,
body:has(.report-shell[data-theme="dark"]) .mud-picker-month.mud-button-color-primary,
body:has(.report-shell[data-theme="dark"]) .mud-picker-year.mud-button-color-primary {
    color: #FFFFFF !important;
    background: #E89AAE !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 8px rgba(232, 154, 174, 0.45);
}

/* Disabled — clearly un-clickable, both themes */
.mud-picker .mud-picker-month.mud-disabled,
.mud-picker .mud-picker-year.mud-disabled,
.mud-picker .mud-picker-month:disabled,
.mud-picker .mud-picker-year:disabled {
    cursor: not-allowed !important;
    opacity: 0.30 !important;
    box-shadow: none !important;
}

/* ============================================================
   GLOBAL LOADING OVERLAY — rendered at AmisMainLayout root so it
   always escapes any stacking context the page builds. Used as a
   fallback while child-component LoadingPage instances may be
   trapped inside their parent stacking contexts.
   ============================================================ */
.amis-global-loading {
    position: fixed;
    inset: 0;
    background: rgba(13, 19, 28, 0.92);
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    cursor: wait;
    user-select: none;
    -webkit-user-select: none;
}
.amis-global-loading * {
    cursor: wait;
    user-select: none;
    -webkit-user-select: none;
}
.amis-global-loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.amis-global-loading-inner img {
    opacity: 0.85;
}

/* ============================================================
   BACKGROUND LOADING BANNER — non-blocking indicator
   แสดงตอน BG loader ทำงาน (post-login bootstrap, global preload)
   pointer-events: none → user คลิกอย่างอื่นได้ ไม่ขวาง UI
   ============================================================ */
.amis-bg-loading-banner {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
    background: rgba(74, 108, 247, 0.96);
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(74, 108, 247, 0.45);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    pointer-events: none;
    user-select: none;
    animation: amisBgBannerPulse 1.6s ease-in-out infinite;
}
.amis-bg-loading-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: amisBgSpinnerRotate 0.85s linear infinite;
}
@keyframes amisBgSpinnerRotate { to { transform: rotate(360deg); } }
@keyframes amisBgBannerPulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(74, 108, 247, 0.35); }
    50%      { box-shadow: 0 6px 24px rgba(74, 108, 247, 0.55); }
}
@media (max-width: 600px) {
    .amis-bg-loading-banner {
        top: auto;
        bottom: 16px;
        right: 12px;
        left: auto;
        font-size: 12px;
        padding: 6px 12px;
    }
}

/* ============================================================
   ENV badge — bottom-center pill below floating bottom nav
   (was top-right red text; moved per UX request)
   ============================================================ */
.amis-env-badge {
    position: fixed;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    line-height: 1;
    color: #FFFFFF;
    background: rgba(220, 53, 69, 0.92);
    padding: 4px 12px 5px;
    border-radius: 6px 6px 0 0;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    font-weight: 800;
    z-index: 9090;
    pointer-events: none;
    box-shadow: 0 -2px 8px rgba(220, 53, 69, 0.30);
}

/* ============================================================
   MudList / MudAutocomplete dropdown — touchpad single-tap fix.
   Why: บน Windows touchpad (tap-to-click), MudAutocomplete / MudSelect
   dropdown items ต้อง double-tap จึงจะ select ได้ — เพราะ browser รอ
   300ms double-tap-zoom recognition แล้วบางครั้ง suppress click event
   เลย. mouse จริงไม่เป็นเพราะ click ส่งทันที.
   Fix: touch-action: manipulation บน list items + popover ทุกตัว
   → browser ข้าม delay ส่ง click ทันทีหลัง tap. -webkit-tap-highlight-color
   เอา highlight สีฟ้าแฟลชออกด้วย.
   Scope กว้างพอที่ครอบ MudAutocomplete / MudSelect / MudMenu / MudList
   ทุกที่ในแอป (รวม Bond / FeeConfig / Team / PerfReport / BIReport).
   ============================================================ */
.mud-popover .mud-list-item,
.mud-list .mud-list-item,
.mud-list-item,
.mud-autocomplete .mud-input-control,
.mud-select-input {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* MudAutocomplete/MudSelect: item ตัวแรกถูก auto-highlight (mud-selected-item) เป็น keyboard cursor
   default ของ MudBlazor render เป็นสีเทาจาง → ดูเหมือน inactive ขณะที่ตัวอื่นปกติ
   บังคับให้ดู "active" — text สีปกติ + พื้น highlight ฟ้าอ่อนชัดเจน (ไม่ override dark-theme report
   ที่ scope เฉพาะเจาะจงกว่า: body:has(.report-shell ...) จึงชนะ specificity) */
.mud-popover .mud-list-item.mud-selected-item,
.mud-popover .mud-list-item.mud-selected-item .mud-list-item-text {
    color: #163458 !important;
}

.mud-popover .mud-list-item.mud-selected-item {
    background-color: #eaf2fe !important;
}

/* ============================================================
   Mobile menu list — ทุกหน้า menu (ReportMenu / TransactionMenu /
   UploadMenu / UserMaintenanceMenu) ใช้ class .tm-* ร่วมกันจาก app.css
   ด้านบน. บนมือถือ (≤768px) เปลี่ยน menu เป็น native mobile list:
   group เป็น "card" รวม items บนพื้นหลังสะอาด + chevron › ด้านขวา
   ระบุการ tap ได้. Text ไทยยาวไม่ตกบรรทัดเพราะ align ซ้าย.
   Desktop คงเดิม — layout เดิมไม่ถูกแตะ.
   ============================================================ */
@media (max-width: 768px) {
    .tm-main-section {
        padding: 8px 4px 12px 4px;
    }

    .tm-main-title {
        font-size: 1.05rem;
        margin: 0 0 12px 4px;
    }

    /* แต่ละ group block = 1 card เต็มแถว */
    .tm-group-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .tm-group-block {
        margin: 0;
    }

    /* group title แบบ section header — uppercase + small caps */
    .tm-group-title {
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: #5a6b8c;
        margin: 0 0 6px 6px;
    }

    /* items รวมกันในกล่อง card เดียว — มี border + radius ใหญ่ */
    .tm-list {
        display: flex;
        flex-direction: column;
        background: #ffffff;
        border: 1px solid #d6e2f3;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(11, 43, 99, 0.06);
    }

    .tm-item {
        margin: 0;
        border-bottom: 1px solid #eef2f7;
    }

    .tm-item:last-child {
        border-bottom: none;
    }

    /* link = row ใน native mobile list — สูงพอ tap, ชิดซ้าย, chevron ขวา */
    .tm-link {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 12px 14px;
        font-size: 0.95rem;
        font-weight: 500;
        text-align: left;
        color: #223046;
        background: transparent;
        border-radius: 0;
        line-height: 1.3;
        word-break: break-word;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* chevron › ด้านขวา บอกชัดว่า tap ได้ */
    .tm-link::after {
        content: "›";
        margin-left: auto;
        padding-left: 10px;
        font-size: 1.4rem;
        font-weight: 300;
        color: #b0bbcc;
        flex-shrink: 0;
    }

    .tm-link:hover,
    .tm-link:active {
        background: #f2f6fc;
        color: #0b51b7;
        font-weight: 600 !important;
    }

    .tm-link.active {
        background: #eaf2ff;
        color: #0b2b63;
        font-weight: 700;
    }
}

/* ============================================================
   BondMainTransaction — dark mode overrides.
   Modern dark UI: monochrome slate surfaces, accent strips only.
   No washed-out rgba color tints on backgrounds (looks cheesy).
   ============================================================ */
body:has(.report-shell[data-theme="dark"]) .bond-main-shell {
    --surface: #161B2A;
    --surface-soft: #11162A;
    --line: rgba(255,255,255,0.12);
    --text: #ECEEF5;
    --text-soft: #A8AEC0;
    --navy-100: #1B2440;
    --navy-050: #11162A;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.50);
    --shadow-md: 0 8px 22px rgba(0,0,0,0.45);
    --shadow-lg: 0 16px 36px rgba(0,0,0,0.55);
}

/* Sidebar hero & inputs */
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .sidebar-hero {
    background: linear-gradient(170deg, #1A2640 0%, #0D1426 100%) !important;
}
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .sidebar-search-input {
    background: #161B2A !important;
    color: #E5E7EB !important;
    border-color: rgba(255,255,255,0.10) !important;
}
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .sidebar-search-input::placeholder {
    color: #6B7185 !important;
}
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .menu-item {
    color: #C7CCDB !important;
}
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .menu-item:hover {
    background: rgba(255,255,255,0.05) !important;
    color: #FFFFFF !important;
}
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .menu-item.active {
    background: rgba(122,156,210,0.18) !important;
    color: #E0E7FF !important;
    border-left: 3px solid #7A9CD2;
}

/* Bond cards — flat slate surface, no decorative gradient */
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .bond-card {
    background: #161B2A !important;
    border-color: rgba(255,255,255,0.08) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.50) !important;
}
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .bond-card:hover {
    background: #1A2138 !important;
    border-color: rgba(255,255,255,0.14) !important;
}
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .bond-title { color: #F1F5F9 !important; }
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .stat-label,
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .bond-date,
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .investor-label,
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .quota-footer,
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .quota-header {
    color: #A8AEC0 !important;
}
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .stat-value,
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .investor-value {
    color: #F1F5F9 !important;
}

/* Hero (ของฉันเหลือ) */
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .bond-hero {
    background: linear-gradient(135deg, #1B2440 0%, #161B2A 100%) !important;
    border-color: rgba(122,156,210,0.20) !important;
}
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .hero-label { color: #93C5FD !important; }
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .hero-pct { color: #A8AEC0 !important; }
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .hero-value { color: #E5E7EB !important; }
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .hero-progress {
    background: rgba(255,255,255,0.08) !important;
}
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .hero-progress-fill {
    background: linear-gradient(90deg, #6FA8FF, #93C5FD) !important;
}

/* Footer 3-col strip */
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .bond-foot {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .bond-foot .foot-cell {
    background: #161B2A !important;
}
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .bond-foot .foot-label { color: #A8AEC0 !important; }
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .bond-foot .foot-value { color: #E5E7EB !important; }
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .bond-foot .foot-cell.is-total {
    background: linear-gradient(135deg, #133527 0%, #161B2A 100%) !important;
}
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .bond-foot .foot-cell.is-total .foot-label { color: #6EE7B7 !important; }
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .bond-foot .foot-cell.is-total .foot-value { color: #34D399 !important; }

/* Stat row */
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .bond-stat-row .stat-label { color: #A8AEC0 !important; }
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .bond-stat-row .stat-value { color: #E5E7EB !important; }
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .bond-stat-row .stat-value.accent-navy { color: #93C5FD !important; }

/* Quota eyebrow */
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .bond-quota-eyebrow {
    color: #A8AEC0 !important;
}
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .bond-quota-eyebrow::after {
    background: linear-gradient(90deg, rgba(255,255,255,0.10) 0%, transparent 100%) !important;
}

/* Quota blocks — modern flat slate (no washed-out gradients) */
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .bond-quota-block {
    background: #1A2138 !important;
    border-color: rgba(255,255,255,0.06) !important;
    box-shadow: none !important;
}
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .bond-quota-block.personal .quota-header .quota-tag { color: #93C5FD !important; }
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .bond-quota-block.personal .quota-header .quota-remaining strong { color: #BFDBFE !important; }
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .bond-quota-block.team .quota-header .quota-tag { color: #C4B5FD !important; }
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .bond-quota-block.team .quota-header .quota-remaining strong { color: #DDD6FE !important; }
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .bond-quota-block.company .quota-header .quota-tag { color: #FDBA74 !important; }
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .bond-quota-block.company .quota-header .quota-remaining strong { color: #FED7AA !important; }
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .bond-quota-block.total .quota-tag.quota-total-label { color: #6EE7B7 !important; }
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .bond-quota-block.total .quota-total-amount { color: #A7F3D0 !important; }
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .quota-progress-track {
    background: rgba(255,255,255,0.08) !important;
}
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .quota-footer {
    color: #A8AEC0 !important;
}

/* Sold-out chip */
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .bond-status-chip.is-sold {
    background: rgba(255,255,255,0.06) !important;
    color: #A8AEC0 !important;
    border-color: rgba(255,255,255,0.10) !important;
}

/* Status chip */
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .bond-status-chip {
    background: rgba(255,255,255,0.08) !important;
    color: #E5E7EB !important;
    border-color: rgba(255,255,255,0.10) !important;
}

/* Sidebar all button */
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .sidebar-all-btn {
    background: rgba(255,255,255,0.05) !important;
    color: #C7CCDB !important;
    border-color: rgba(255,255,255,0.10) !important;
}
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .sidebar-all-btn:hover {
    background: rgba(122,156,210,0.14) !important;
    color: #FFFFFF !important;
}

/* Mobile back button */
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .mobile-back-btn {
    color: #C7CCDB !important;
}

/* Empty state */
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .empty-title { color: #F1F5F9 !important; }
body:has(.report-shell[data-theme="dark"]) .bond-main-shell .empty-sub { color: #A8AEC0 !important; }