.bb-font {
    color: #1b1b7a;
}

.bb-background {
    background: linear-gradient(#134DA1, #2E3E66, #203463) !important;
    box-shadow: inset 0 1px 0 #1A394F;
    color: white;
}
.bb-background-invert {
    color: #1A3170;
    background: whitesmoke;
}
.bb-background-white {
    color: #9C9C9C;
    background: whitesmoke;
}


.bb-font-blue {
    color: #1b1b7a;
}
.bb-font-amber {
    color: #C28800;
}
.bb-font-gray {
    color: #878787;
}

.bb-font-green {
    color: #275710;
}

.bb-font-red {
    color: #700D13;
}
.bb-font-black {
    color: #212121;
}


.bb-table-error table {
    border-collapse: separate;
    box-shadow: inset 0 1px 0 #fff;
    font-size: 1rem; /* ไม่ให้ย่อ/ขยายเอง */
    line-height: 20px;
    width: max-content; /* กว้างตามเนื้อหาจริง */
    min-width: 100%; /* แต่อย่าเล็กกว่า container */
}

.bb-table-error th {
    background: linear-gradient(#A11313, #632020) !important;
    border-left: 1px solid #555;
    border-right: 1px solid #777;
    border-top: 1px solid #555;
    border-bottom: 1px solid #3E5173;
    box-shadow: inset 0 1px 0 #7D4D4D;
    color: #fff;
    font-weight: bold;
    padding: 0px 5px;
    position: relative;
    text-shadow: 0 1px 0 #000;
    white-space: nowrap; /* ห้ามหัวตารางขึ้นบรรทัดใหม่ */
}



.bb-table {
    background: transparent !important;
}

    .bb-table table.fixed {
        table-layout: auto; /* เดิม fixed -> เปลี่ยนเป็น auto */
    }

    .bb-table table {
        border-collapse: separate;
        box-shadow: inset 0 1px 0 #fff;
        font-size: 1rem; /* ไม่ให้ย่อ/ขยายเอง */
        line-height: 20px;
        width: max-content; /* กว้างตามเนื้อหาจริง */
        min-width: 100%; /* แต่อย่าเล็กกว่า container */
    }

    .bb-table th {
        background: linear-gradient(#134DA1, #203463) !important;
        border-left: 1px solid #555;
        border-right: 1px solid #777;
        border-top: 1px solid #555;
        border-bottom: 1px solid #3E5173;
        box-shadow: inset 0 1px 0 #4D697D;
        color: #fff;
        font-weight: bold;
        padding: 0px 5px;
        position: relative;
        text-shadow: 0 1px 0 #000;
        white-space: nowrap; /* ห้ามหัวตารางขึ้นบรรทัดใหม่ */
    }

    .bb-table thead tr:first-child th:first-child {
        border-radius: 10px 0px 0px 0px;
    }

    .bb-table thead tr:first-child th:last-child {
        border-radius: 0px 10px 0px 0px;
    }

    .bb-table td {
        border-right: 1px solid #fff;
        border-left: 1px solid #e8e8e8;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #e8e8e8;
        padding: 0px 5px;
        position: relative;
        transition: all 300ms;
        white-space: nowrap; /* ห้ามข้อมูลขึ้นบรรทัดใหม่ */
    }

        .bb-table td:first-child {
            box-shadow: inset 1px 0 0 #fff;
        }

        .bb-table td:last-child {
            border-right: 1px solid #e8e8e8;
            box-shadow: inset -1px 0 0 #fff;
        }

    .bb-table tr:nth-child(odd) td {
        background: #f1f1f1;
    }

    .bb-table tr:last-of-type td {
        box-shadow: inset 0 -1px 0 0 lightgray;
    }

    .bb-table tbody:hover tr:hover td {
        color: #444;
        background-color: rgba(255, 204, 0, 0.5); /* แก้จาก RGB(...) เป็น rgba(...) */
        text-shadow: 0 1px 0 #fff;
    }

    .bb-table .mud-table-cell {
        padding: 0px 0px !important;
        white-space: nowrap; /* กัน MudTable override */
    }

    .bb-table .mud-table-head > tr > th.mud-table-cell {
        color: #ffffff !important;
        padding: 3px 10px !important;
        white-space: nowrap;
    }

    .bb-table .mud-table-root,
    .bb-table .mud-table-toolbar,
    .bb-table .mud-table-container {
        background-color: transparent !important;
    }

    .bb-table .mud-table-container {
        overflow-x: auto !important; /* ให้เลื่อนแนวนอน */
        overflow-y: hidden !important;
    }








    .bb-table-white-th table.fixed {
        table-layout: fixed;
    }

    .bb-table-white-th table {
        border-collapse: separate;
        font-size: clamp(1.2rem, 1.8vw, 1rem);
        line-height: 20px;
    }

    .bb-table-white-th th {
        background: transparent;
        color: #000;
        font-weight: bold;
        padding: 0px 5px;
        position: relative;
        text-shadow: 0 1px 0 #000;
    }



    .bb-table-white-th td {
        border-right: 1px solid #fff;
        border-left: 1px solid #e8e8e8;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #e8e8e8;
        padding: 0px 5px;
        position: relative;
        transition: all 300ms;
    }

        .bb-table-white-th td:first-child {
            box-shadow: inset 1px 0 0 #fff;
        }

        .bb-table-white-th td:last-child {
            border-right: 1px solid #e8e8e8;
            box-shadow: inset -1px 0 0 #fff;
        }


    .bb-table-white-th tr:nth-child(odd) td {
        background: #f1f1f1;
    }

    .bb-table-white-th tr:last-of-type td {
        box-shadow: inset 0 -1px 0 0 lightgray;
    }



    .bb-table-white-th tbody:hover tr:hover td {
        color: #444;
        background-color: RGB(255, 204, 0,0.5);
        text-shadow: 0 1px 0 #fff;
    }

    .bb-table-white-th .mud-table-cell {
        padding: 0px 0px !important; /* vertical, horizontal */
    }

    .bb-table-white-th .mud-table-head > tr > th.mud-table-cell {
        color: #000 !important;
        padding: 3px 10px !important;
    }

.bb-table-white-th {
    background: transparent !important;
}

    .bb-table-white-th .mud-table-root,
    .bb-table-white-th .mud-table-toolbar,
    .bb-table-white-th .mud-table-container,
    .bb-table-white-th th.mud-table-cell {
        background-color: transparent !important;
    }







/* ลดความสูงจริง */
.bb-search .mud-input-slot {
    min-height: 20px !important;
}

.bb-search .mud-input-root {
    font-size: 14px !important;
}

/* ตัวหนังสือเข้มขึ้น */
.bb-search input {
    color: #5D616B !important;
    font-weight: 500;
}

    /* placeholder เข้มขึ้น */
    .bb-search input::placeholder {
        color: #64748b !important;
        opacity: 1 !important;
    }

/* border navy */
.bb-search .mud-input-outlined-border {
    border-color: #24572B !important;
}

/* focus navy */
.bb-search .mud-input-root.mud-input-focused .mud-input-outlined-border {
    border-color: #24572B !important;
    border-width: 3px !important;
}



/* ใช้ได้ทั้ง button และ MudButton */
.bb-btn {
    border-style: outset;
    background: linear-gradient(#134DA1, #2E3E66, #203463) !important;
    box-shadow: inset 0 1px 0 #1A394F;
    color: white;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    height: 30px; /* กำหนดความสูงชัดเจน */
    line-height: 1.2;
}

/* override MudButton เฉพาะ */
.mud-button.bb-btn {
    min-height: 30px !important;
    padding: 5px 10px !important;
    text-transform: none; /* กัน uppercase */
    color: white;
    display: inline-flex;
    align-items: center;
}

.bb-btn:hover {
    background: linear-gradient(#772585, #581663, #390F40 ) !important;
    color: white;
}

.bb-btn:disabled {
    background: lightgray !important;
    color: black;
}

.bb-btn:focus {
    background: orange !important;
    color: black;
}



/* ใช้ได้ทั้ง button และ MudButton */
.bb-btn-green {
    border-style: outset;
    background: linear-gradient(#13A153, #2E6647, #206334) !important;
    box-shadow: inset 0 1px 0 #1A394F;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    height: 30px; /* กำหนดความสูงชัดเจน */
    line-height: 1.2;
}

/* override MudButton เฉพาะ */
.mud-button.bb-btn-green {
    min-height: 30px !important;
    padding: 5px 10px !important;
    text-transform: none; /* กัน uppercase */
    display: inline-flex;
    align-items: center;
}

.bb-btn-green:hover {
    background: linear-gradient(#772585, #581663, #390F40 ) !important;
}


.bb-btn-green:disabled {
    background:gray !important;
    color: black;
}
.bb-btn-green:focus {
    background: orange;
}


/* จำกัดความกว้างให้ดู professional */
.bb-paper {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 !important;
    background: transparent;
}
.bb-h {
    font-size: 1.2rem;
    color: #134DA1;
    font-weight: 600;
    text-shadow: 1px 1px 2px gray;
}
bb-icon-btn {
    margin : 0px 0px;
}


.bb-table-sub tr:nth-child(odd) td {
    background: #E8E5DC;
}



.bb-table-sub tr:nth-child(even) td {
    background: #E8DCE1;
}

/* =========================================================================
   MudSelect popover — กว้างพอให้อ่าน text ในรายการครบ
   ใช้ผ่าน <MudSelect PopoverClass="bb-bond-config-popover" ...>
   เดิม MudSelect popover inherit width จาก anchor — ถ้า anchor (input) แคบ
   จะตัด text รายการเช่น "II&HNW"→"II&H", "PP10"→"PP1", "UHNW"→"UHW"
   ========================================================================= */
.bb-bond-config-popover.mud-popover {
    min-width: 260px !important;
    width: auto !important;
}
.bb-bond-config-popover .mud-list-item {
    white-space: nowrap !important;
    padding-right: 16px !important;
}
.bb-bond-config-popover .mud-list-item-text {
    white-space: nowrap !important;
}






.bb-table-no-header  .mud-table-head > tr > th.mud-table-cell {
    color: #000 !important;
    background-color:whitesmoke !important;
    padding: 3px 10px !important;
}

.bb-input {
}

    .bb-input .mud-input-control {
        min-height: 28px !important;
    }

    .bb-input .mud-input-root {
        height: 28px !important;
    }

    .bb-input .mud-input-slot {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

    .bb-input input {
        padding: 0px 6px !important;
        font-size: 0.85rem;
    }

    .bb-input .mud-input-outlined-border {
        border-color: gray !important;
    }
    /* Chrome / Edge */
    .bb-input input::-webkit-outer-spin-button,
    .bb-input input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    .bb-input input[type=number] {
        -moz-appearance: textfield;
    }

.bb-table .mud-input-control {
    min-height: 30px !important;
}



/* ใช้ได้ทั้ง button และ MudButton */
.bb-btn-white {
    background: whitesmoke;
    color: #636363;
    border: 1px solid #636363;
    padding: 5px 10px;
    border-radius: 8px;
    cursor: pointer;
    height: 30px; /* กำหนดความสูงชัดเจน */
    line-height: 1.2;
}

/* override MudButton เฉพาะ */
.mud-button.bb-btn-white {
    min-height: 30px !important;
    padding: 5px 10px !important;
    text-transform: none; /* กัน uppercase */
    display: inline-flex;
    align-items: center;
}

.bb-btn-white:hover {
    background: #DCE1E8 !important;
}

.bb-btn-white:active {
    background: #E8E6DC !important;
    box-shadow: 0 2px black;
    transform: translateY(1px);
}
.bb-input input {
    background-color: transparent !important;
}


.bb-table-bold table.fixed {
    table-layout: fixed;
}

.bb-table-bold table {
    border-collapse: separate;
    box-shadow: inset 0 1px 0 #fff;
    font-size: 1rem;
    line-height: 22px;
    font-weight:900;
}

.bb-table-bold th {
    background: linear-gradient(#134DA1, #203463) !important;
    border-left: 1px solid #555;
    border-right: 1px solid #777;
    border-top: 1px solid #555;
    border-bottom: 1px solid #3E5173;
    box-shadow: inset 0 1px 0 #4D697D;
    color: #fff;
    font-size: 1.0rem;
    font-weight: 900;
    padding: 5px 10px;
    position: relative;
    text-shadow: 0 1px 0 #000;
}

.bb-table-bold thead tr:first-child th:first-child {
    border-radius: 10px 0px 0px 0px;
}

.bb-table-bold thead tr:first-child th:last-child {
    border-radius: 0px 10px 0px 0px;
}

.bb-table-bold td {
    padding: 2px 5px;
    position: relative;
    transition: all 300ms;
    font-size: 0.9rem;
    font-weight: 600;
}
.bb-table-bold .mud-table-cell {
    border: none !important;
}

.bb-table-bold tr:nth-child(odd) td {
    background: white;
}



.bb-table-bold tbody:hover tr:hover td {
    color: #444;
    background-color: RGB(255, 204, 0,0.5);
    text-shadow: 0 1px 0 #fff;
}

.bb-table-bold .mud-table-cell {
    padding: 2px 2px !important; /* vertical, horizontal */
    color: black; /* vertical, horizontal */
}

.bb-table-bold .mud-table-head > tr > th.mud-table-cell {
    color: #ffffff !important;
    padding: 4px 5px !important;
}

.bb-table-bold {
    background: transparent !important;
}

    .bb-table-bold .mud-table-root,
    .bb-table-bold .mud-table-toolbar,
    .bb-table-bold .mud-table-container {
        background-color: transparent !important;
    }

/* ตัว select field */
.bb-select .mud-input-root {
    padding: 0px 0px !important;
}

/* ลด padding ข้างใน */
.bb-select .mud-input-slot {
    padding: 0px 8px !important;
}

/* dropdown */
.bb-select-popover .mud-list-item {
    padding: 4px 10px !important;
}