.mud-elevation-4 {
    box-shadow: none !important;
}

.mud-nav-item a:hover {
    color: unset;
}

.mud-dialog .mud-dialog-content {
    padding: unset !important;
    margin: unset !important;
    height: calc(100% - 52px);
}

.mud-tab {
    text-transform: unset !important;
}

@media (hover: hover) and (pointer: fine) {
    .mud-tab.mud-tab-active:hover {
        background-color: var(--mud-palette-action-default-hover) !important;
    }
}

.mud-dialog .mud-dialog-actions {
    background-color: #ececec !important;
    padding: 6px !important;
}

hr:not([size]) {
    height: 3px !important;
}

.hr-with-title {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    padding-top: 5px;
}

.hr-with-title hr {
    flex-grow: 1;
    border: none;
    border-top: 1px solid #000;
}

.hr-with-title .title {
    padding-right: 10px;
    font-weight: bold;
    color: gray;
}

.hr-short {
    width: 20px;
    margin-right: 5px;
    flex-grow: 0 !important;
}

@media(min-width: 600px) {
    .mud-toolbar-gutters {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

@media (hover: hover) and (pointer: fine) {
    .mud-button:hover {
        box-shadow: var(--rz-button-hover-shadow) !important;
    }
}

legend {
    float: unset !important;
}

.mud-tabs-panels {
    height: 100% !important;
    background-color: white !important;
}

.mud-tabs-tabbar .mud-tabs-tabbar-inner,
.mud-tab {
    min-height: 40px !important
}

.mud-treeview-item-arrow {
    margin: 0px 0px 0px -3px !important;
    min-height: 30px !important;
}

.mud-treeview-item-selected .mud-treeview-item-label {
    font-weight: bold;
}

.mud-collapse-entered .mud-collapse-wrapper {
    overflow-y: hidden !important;
    display: contents !important;
}

.mud-input-control {
    flex: unset !important;
}

.mud-select-extended {
    width: 100%;
}

.mud-select-extended .mud-select-input-extended {
    min-height: 40px;
}

div.mud-input-slot.mud-input-root-outlined {
    padding: 10px 14px !important;
}

body .mud-primary-hover {
    background-color: #d5d5d5 !important;
}

.mud-combobox-item.mud-combobox-item-comfort {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    min-height: 40px !important;
}

.mud-input > textarea.mud-input-root-outlined {
    padding: 6px 14px !important;
    line-height: 30px !important;
    mask-image: unset !important;
    margin-top: 0px !important;
}

.mud-tabs-panels {
    height: calc(100% - 40px);
    overflow: auto;
}

.common-button-control {
    background-color: #6291a7 !important;
    color: white !important;
    height: 40px !important;
    box-shadow: var(--rz-button-shadow) !important;
}

.common-search-control {
    width: 300px !important;
    height: 40px !important;
    background-color: white !important;
}

.mud-menu-item {
    padding: 4px 12px !important;
}

/* MudMenuItem có Href render ra thẻ <a> (để chuột phải có "Open link in new tab"),
   nên bị trình duyệt tô màu link mặc định -> ép về màu chữ như item thường.
   Chừa .mud-disabled để item của view đang mở vẫn xám như cũ. */
a.mud-menu-item:not(.mud-disabled),
a.mud-menu-item:not(.mud-disabled):link,
a.mud-menu-item:not(.mud-disabled):visited,
a.mud-menu-item:not(.mud-disabled):hover,
a.mud-menu-item:not(.mud-disabled):focus,
a.mud-menu-item:not(.mud-disabled):active {
    color: inherit !important;
    text-decoration: none !important;
}

.mud-menu-list {
    padding: 0px 0 !important;
}

.mud-menu-list > .mud-divider {
    margin: 0px 0 !important;
}

.mud-treeview-item-content {
    padding: 3px 5px !important;
}

.mud-tabs-tabbar.mud-tabs-vertical.mud-tabs-border-right > .mud-tabs-tabbar-inner {
    height: 100%;
}

.mud-dialog-view {
    width: 450px;
    max-width: 450px;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 60px;
    max-height: 120px;
    padding-left: 10px;
    padding-top: 5px;
}

div.date-input > .mud-input-control.mud-input-input-control {
    width: 100% !important;
    margin-inline: 20px !important;
}

div.date-input > .mud-input-control.mud-input-input-control > .mud-input-control-input-container > .mud-input.mud-input-outlined.mud-input-adorned-end.mud-typography-subtitle1 {
    height: 40px !important;
}

.mud-tabs-scroll-button{
    height: 40px !important;
    width: 40px !important;
}

.mud-tabs-scroll-button > .mud-button-root {
    height: 40px !important;
    width: 40px !important;
}

.mud-search {
    margin-left: 5px !important;
    margin-right: 15px !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
    width: 100% !important;
}

/* Nhãn của mọi ô nhập (LabelWithTitle). MudBlazor đặt trên .mud-input-label:
   white-space:nowrap + overflow:hidden + text-overflow:ellipsis, cộng height cố
   định 20px ở đây, nên nhãn dài bị cắt cụt khi khung hẹp — rõ nhất ở sidebar điều
   kiện lọc của ReportDynamic, kéo hẹp lại là mất chữ. Cho xuống dòng và để chiều
   cao tự giãn. Nhãn ngắn vẫn cao đúng 20px như cũ nên các form hiện có không đổi.

   Cần !important: MudBlazor.min.css nạp SAU file này (xem Servers/App.razor) nên
   cùng độ ưu tiên thì rule của nó thắng. */
.mud-input-title {
    font-weight: bold;
    margin-inline: 20px;
    min-height: 20px;
    height: auto !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;   /* nhãn dài không có khoảng trắng vẫn ngắt được */
    line-height: 1.25;
}

.tab-display-none > .mud-tabs-tabbar.mud-tabs-tabbar-primary {
    display: none !important;
}

.tab-display-none > .mud-tabs-tabbar.mud-tabs-tabbar-dark {
    display: none !important;
}

/* Tắt hiệu ứng focus/active */
.mud-icon-button.mud-ripple-icon:focus-within,
.mud-icon-button.mud-ripple-icon:active {
    background-color: unset !important;
}

/* Hover giữ nguyên */
@media(hover: hover) and (pointer: fine) {
    .mud-icon-button.mud-ripple-icon:hover {
        background-color: var(--mud-palette-action-default-hover) !important;
    }
}

.cbbSearch .mud-input-adornment-end button {
    width: 35px;
    height: 35px;
    margin-right: -5px;
}

.numberic-prefix .mud-input-control-input-container .mud-input .mud-input-root-outlined {
    padding: 18.5px 40px 18.5px 14px !important;
}

.mud-dialog .mud-dialog-content {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

/*
 * Loading spinner phải LUÔN quay, kể cả khi user tắt animation trong Windows
 * (Performance Options → "Animate controls..." → prefers-reduced-motion: reduce).
 * Ép lại animation của MudProgressCircular indeterminate (tên keyframe theo MudBlazor 9.5.0).
 * html body để tăng specificity, thắng mọi rule reset reduced-motion (vd Bootstrap reboot).
 */
@media (prefers-reduced-motion: reduce) {
    html body .mud-progress-circular.mud-progress-indeterminate {
        animation: mud-progress-circular-keyframes-circular-rotate 1.4s linear infinite !important;
    }

    html body .mud-progress-circular-circle.mud-progress-indeterminate {
        animation: mud-progress-circular-keyframes-circular-dash 1.4s ease-in-out infinite !important;
    }
}
/*
 * Hiệu ứng phóng to / thu nhỏ dialog khi bấm nút Fullscreen.
 * Wrapper div (nơi gắn @DialogStyle) mới là phần tử đổi kích thước, .mud-dialog
 * co giãn theo nó nên chỉ cần transition ở đây là cả dialog chạy mượt.
 * Không tắt theo prefers-reduced-motion: Windows bật sẵn tùy chọn này cho nhiều máy
 * (xem ghi chú ở khối loading spinner bên dưới/bên trên).
 */
.dialog-resizable {
    transition: width .25s cubic-bezier(.4, 0, .2, 1), height .25s cubic-bezier(.4, 0, .2, 1), max-width .25s cubic-bezier(.4, 0, .2, 1), max-height .25s cubic-bezier(.4, 0, .2, 1);
    will-change: width, height;
}