@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
/*
    Use this .css file to modify site-wide styles only.
*/

/* Set .CSS variables here to use with dark and light themes 
    (these variables are accessible in component level .css files!)
*/

:root {
    /*light theme*/
    --bs-body-line-height: 20px;
    --nav-header-background: #0060a9;
    --nav-background: white;
    --nav-hover-color: black;
    --nav-hover-background: lightblue;
    --nav-selected-color: white;
    --nav-selected-background: #01579b;
    --title-background: #01579b;
    --title-color: white;
    --background-dark: #F5F5F5;
    --background: white;
    --background-locked: #dfdfdf;
    --popover-background: #afafaf;
    --popover-border: #dfdfdf;
    --background-border: #dfdfdf;
    --background-alt-row: #01579b;
    --background-alt-row-locked: #80a0df;
    --background-grid-headers: #afafaf;
    --background-grid-menu-button: lightblue;
    --tab-background: white;
    --tab-font-color: black;
    --tab-active-background: lightblue;
    --tab-active-color: black;
    --font-color: black;
    --font-color-locked: black;
    --highlight: green;
    --link: black;
    --moon: black;
    --bs-body-font-size: 14px;
    --logo-image: url("/FirstEnergyLogo.png");
    --modal-window-background: #b0d0ff;
    --overallocated-message-backcolor: #bd372f;
    --not-included-background: lightGray;
    --empty-field-label-color: #999999;
    --filled-field-label-color: #333333;
}

.dark-mode.dark-mode.dark-mode.dark-mode.dark-mode.dark-mode.dark-mode.dark-mode.dark-mode.dark-mode {
    --nav-background: #252526;
    --nav-hover-color: white;
    --nav-hover-background: #252526;
    --nav-selected-color: white;
    --nav-selected-background: darkblue;
    --title-color: white;
    --title-background: #252526;
    --background-dark: #252525;
    --background: #3e3e42;
    --background-locked: #5e5e62;
    --popover-background: #666666;
    --popover-border: #353536;
    --background-border: #353536;
    --background-alt-row: #353536;
    --background-alt-row-locked: #555556;
    --background-grid-headers: #666666;
    --background-grid-menu-button: darkgreen;
    --tab-background: #252526;
    --tab-font-color: white;
    --tab-active-background: #252526;
    --tab-active-color: white;
    --font-color: white;
    --font-color-locked: white;
    --highlight: green;
    --link: white;
    --moon: yellow;
    --logo-image: url("/FirstEnergyLogo_darkTheme.png");
    --modal-window-background: #454546;
    --overallocated-message-backcolor: #bd372f;
    --not-included-background: gray;
    --empty-field-label-color: #888888;
    --filled-field-label-color: #cccccc;
}

/* Form field label styling for empty vs filled states */
/* MudTextField labels when empty */
.mud-input-label:not(.mud-input-label-filled) {
    color: var(--empty-field-label-color) !important;
    opacity: 0.7;
}

/* MudTextField labels when filled */
.mud-input-label.mud-input-label-filled,
.mud-input-label.mud-shrink {
    color: var(--filled-field-label-color) !important;
    opacity: 1;
}

/* MudSelect labels when empty */
.mud-select:not(.mud-select-filled) .mud-input-label {
    color: var(--empty-field-label-color) !important;
    opacity: 0.7;
}

/* MudSelect labels when filled */
.mud-select.mud-select-filled .mud-input-label,
.mud-select .mud-input-label.mud-shrink {
    color: var(--filled-field-label-color) !important;
    opacity: 1;
}

/* MudDatePicker labels when empty */
.mud-picker:not(.mud-picker-filled) .mud-input-label {
    color: var(--empty-field-label-color) !important;
    opacity: 0.7;
}

/* MudDatePicker labels when filled */
.mud-picker.mud-picker-filled .mud-input-label,
.mud-picker .mud-input-label.mud-shrink {
    color: var(--filled-field-label-color) !important;
    opacity: 1;
}

/* MudNumericField labels when empty */
.mud-numeric-field:not(.mud-numeric-field-filled) .mud-input-label {
    color: var(--empty-field-label-color) !important;
    opacity: 0.7;
}

/* MudNumericField labels when filled */
.mud-numeric-field.mud-numeric-field-filled .mud-input-label,
.mud-numeric-field .mud-input-label.mud-shrink {
    color: var(--filled-field-label-color) !important;
    opacity: 1;
}

/* General MudBlazor input label styling for enhanced targeting */
.mud-input-outlined .mud-input-label:not(.mud-shrink) {
    color: var(--empty-field-label-color) !important;
    opacity: 0.7;
}

.mud-input-outlined .mud-input-label.mud-shrink {
    color: var(--filled-field-label-color) !important;
    opacity: 1;
}

/* JavaScript-managed field states for better browser compatibility */
.mud-input-label.field-is-empty {
    color: var(--empty-field-label-color) !important;
    opacity: 0.7;
}

.mud-input-label.field-has-value {
    color: var(--filled-field-label-color) !important;
    opacity: 1;
}

/* Additional targeting for form controls with values */
.mud-input-control:has(.mud-input-slot input:not(:placeholder-shown)) .mud-input-label,
.mud-input-control:has(.mud-select-input:not([data-placeholder])) .mud-input-label,
.mud-input-control:has(.mud-picker-input:not(:placeholder-shown)) .mud-input-label,
.mud-input-control:has(.mud-numeric-input:not(:placeholder-shown)) .mud-input-label {
    color: var(--filled-field-label-color) !important;
    opacity: 1;
}

/* Target numeric fields specifically for better browser support */
.mud-input-control:has(input[type="number"]:not(:placeholder-shown)) .mud-input-label {
    color: var(--filled-field-label-color) !important;
    opacity: 1;
}

/* Ensure proper contrast for focused states */
.mud-input-label.mud-input-label-inputfocused {
    color: var(--filled-field-label-color) !important;
    opacity: 1;
}

/* normal .css below */
html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: var(--bs-body-font-size);
    background-color: var(--background);
    color: var(--font-color);
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* Prevent default scrollbars */
}

/* Container styles for layout */
.my-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.my-titlebar {
    flex: 0 0 auto;
}

.titlebar {
    display: flex;
    align-items: center;
    background-color: var(--title-background);
    color: var(--title-color);
    height: 45px;
}

/* TitleBar layout components */
.my-collapse {
    flex: 0 0 auto;
    margin-right: 10px;
    display: flex;
    align-items: center;
}

.my-logo {
    flex: 0 0 auto;
    margin-right: 10px;
    display: flex;
    align-items: center;
}

.my-theme {
    flex: 0 0 auto;
    margin-right: 10px;
    display: flex;
    align-items: center;
}

.my-appinfo {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}

.my-userinfo {
    flex: 0 0 auto;
    margin-left: auto;
    padding-right: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.theme-btn {
    background: transparent;
    border: none;
    color: var(--title-color);
    cursor: pointer;
    padding: 0;
}

.my-env {
    margin-left: 10px;
    font-size: 0.8em;
    opacity: 0.8;
}

.navMenu {
    flex: 0 0 auto;
    display: flex;
}

main.main {
    flex: 1 1 auto;
    overflow: auto; /* Only add scrollbar when needed */
    padding: 10px;
}

/* Navbar styles */
.navbar-common {
    background-color: var(--nav-background);
    height: 100%;
    padding: 0.5rem;
    overflow-y: auto;
}

.nav-container {
    height: 100%;
    width: 100%;
    overflow-y: auto;
}

.navbar-expanded {
    width: 220px;
    transition: width 0.3s ease;
}

.navbar-collapsed {
    width: 60px;
    transition: width 0.3s ease;
}

/* Navigation menu styling */
.nav-pills .nav-link {
    color: var(--font-color);
    border-radius: 4px;
    padding: 0.5rem 1rem;
    margin-bottom: 3px;
}

.nav-pills .nav-link:hover {
    background-color: var(--nav-hover-background);
    color: var(--nav-hover-color);
}

.nav-pills .nav-link.active {
    background-color: var(--nav-selected-background);
    color: var(--nav-selected-color);
}

/* Enhanced specificity for active navigation items to ensure white text */
.nav-pills .nav-link.active,
.nav-pills .nav-link.active span,
.nav-pills .nav-link.active i,
.nav-pills .nav-link.active .bi {
    color: white !important;
}

.nav-pills .sidebar-link.active,
.nav-pills .sidebar-link.active span, 
.nav-pills .sidebar-link.active i,
.nav-pills .sidebar-link.active .bi {
    color: white !important;
}

/* Override the general .bi color rule for active nav items */
.nav-pills .nav-link.active .bi,
.nav-pills .sidebar-link.active .bi {
    color: white !important;
}

.sidebar-link {
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
}

.sidebar-link i {
    margin-right: 0;
    min-width: 20px;
    text-align: center;
}

.mbu-card {
    background-color: var(--background);
}

a, a:hover {
    color: var(--link) !important;
    text-decoration: none !important;
}

strong {
    color: var(--font-color);
}

button, button.form-control {
    color: var(--font-color);
    background-color: var(--background-alt-row);
    place-content: center;
}

.transparent-btn {
    background-color: transparent;
    border-color: transparent;
}

.loading-mbu-app{
    font: x-large;
}

h1:focus {
    outline: none;
}

a:hover {
    color: var(--font-color);
}

.bi {
    color: var(--title-color);
}

.content {
    padding-top: 1.1rem;
}

input:read-only, select:read-only {
    color: gray;
    background-color: lightgray;
}

.input-group-text {
    background-color: #fff;
    border: 1px solid #ced4da;
    border-right: 0;
}

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

.invalid {
    outline: 1px solid red;
}

.inactive-dropdown-option {
    padding: 5px;
    border: 2px solid red;
}

.validation-message {
    position: relative;
    padding-left: 5px;
    top: -5px;
    z-index: 199;
    background-color: red !important;
    color: white !important;
}


#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+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDEgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA9NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

ul.k-tabstrip-items li.k-tabstrip-item.tab-error.tab-error span.k-link {
    background-color: red;
}

.moon {
    color: var(--moon);
}

.pad-left {
    padding-left: 15px;
}

.info-container {
    border: 1px hidden darkgray;
}

.form-control-wrapper {
    min-height: 70px;
}

input.form-control, .k-dropdownlist.k-dropdownlist {
    line-height: 17.5px;
}

input.form-control:read-only {
    color: gray;
    background-color: lightgray;
}

select.form-control {
    line-height: 17.5px;
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 14px;
}

.edit-container {
    margin-top: -50px;
}

.text-right-header.text-right-header.text-right-header.text-right-header.text-right-header.text-right-header.text-right-header.text-right-header {
    text-align: right;
    padding-right: 10px;
}

.text-right {
    text-align: right;
    padding-right: 10px;
}

.text-center {
    text-align: center;
    width: 100%;
}

.text-left {
    text-align: left;
}

/* Ensure the grid itself takes available space */
.mbu-grid {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Increase specificity to override MudBlazor's striped rows */
.mbu-grid .mud-table-row.selected-row,
.mbu-grid .mud-table-row.mud-table-row.mud-table-row.selected-row,
.mbu-grid .mud-table-row.mud-table-striped.selected-row,
.mbu-grid .mud-table-row:nth-child(odd).selected-row,
.mbu-grid .mud-table-row:nth-child(even).selected-row {
    background-color: rgba(1, 87, 155, 0.3) !important;
    color: inherit !important;
    font-weight: 500;
}

.dark-mode .mbu-grid .mud-table-row.selected-row,
.dark-mode .mbu-grid .mud-table-row.mud-table-row.mud-table-row.selected-row,
.dark-mode .mbu-grid .mud-table-row.mud-table-striped.selected-row,
.dark-mode .mbu-grid .mud-table-row:nth-child(odd).selected-row,
.dark-mode .mbu-grid .mud-table-row:nth-child(even).selected-row {
    background-color: rgba(0, 0, 139, 0.3) !important;
    color: white !important;
    font-weight: 500;
}

/* Make the header fixed and colored correctly */
.mbu-grid .mud-table-head {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--title-background) !important;
    color: var(--title-color) !important;
}

.mbu-grid .mud-table-header {
    background-color: var(--title-background) !important;
    color: var(--title-color) !important;
}

.mbu-grid .mud-table-footer {
    background-color: var(--title-background) !important;
    color: var(--title-color) !important;
}

/* Make the table container scrollable */
.mbu-grid .mud-table-container {
    flex: 1;
    overflow-y: auto;
    min-height: 0; /* Important for Firefox */
}

/* Ensure pagination controls are visible and fixed at bottom */
.mbu-grid .mud-table-pagination {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    background-color: var(--mud-palette-surface);
    z-index: 10;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Enhanced MudDataGrid Header Styling - Added for maximum specificity */
.mbu-grid.mud-data-grid .mud-table-head {
    background-color: var(--title-background) !important;
    color: var(--title-color) !important;
    position: sticky !important;
    top: 0;
    z-index: 10;
}

.mbu-grid.mud-data-grid .mud-table-head th {
    background-color: var(--title-background) !important;
    color: var(--title-color) !important;
}

.mbu-grid.mud-data-grid .mud-table-head .mud-table-cell {
    background-color: var(--title-background) !important;
    color: var(--title-color) !important;
}

.mbu-grid.mud-data-grid thead th {
    background-color: var(--title-background) !important;
    color: var(--title-color) !important;
}

.mbu-grid.mud-data-grid thead {
    background-color: var(--title-background) !important;
    color: var(--title-color) !important;
}

/* MudDataGrid Header Filter Icons - Make them white for better visibility */
.mbu-grid.mud-data-grid .mud-table-head .mud-icon,
.mbu-grid.mud-data-grid .mud-table-head .mud-icon-button,
.mbu-grid.mud-data-grid .mud-table-head .mud-icon-button .mud-icon,
.mbu-grid.mud-data-grid .mud-table-head .mud-table-sortlabel,
.mbu-grid.mud-data-grid .mud-table-head .mud-table-sortlabel .mud-icon,
.mbu-grid.mud-data-grid .mud-table-head .mud-button,
.mbu-grid.mud-data-grid .mud-table-head .mud-button .mud-icon,
.mbu-grid.mud-data-grid .mud-table-head .mud-sort-header-icon,
.mbu-grid.mud-data-grid .mud-table-head .mud-filter-header-icon,
.mbu-grid.mud-data-grid thead .mud-icon,
.mbu-grid.mud-data-grid thead .mud-icon-button,
.mbu-grid.mud-data-grid thead .mud-icon-button .mud-icon,
.mbu-grid.mud-data-grid thead .mud-table-sortlabel,
.mbu-grid.mud-data-grid thead .mud-table-sortlabel .mud-icon,
.mbu-grid.mud-data-grid thead .mud-button,
.mbu-grid.mud-data-grid thead .mud-button .mud-icon,
.mbu-grid.mud-data-grid thead .mud-sort-header-icon,
.mbu-grid.mud-data-grid thead .mud-filter-header-icon {
    color: var(--title-color) !important;
}

/* Additional targeting for filter and sort icons with high specificity */
.mbu-grid.mud-data-grid .mud-table-head th .mud-icon,
.mbu-grid.mud-data-grid .mud-table-head td .mud-icon,
.mbu-grid.mud-data-grid .mud-table-head .mud-table-cell .mud-icon,
.mbu-grid.mud-data-grid .mud-table-head .mud-table-cell .mud-icon-button .mud-icon,
.mbu-grid.mud-data-grid .mud-table-head .mud-table-header-cell .mud-icon,
.mbu-grid.mud-data-grid .mud-table-head .mud-table-header-cell .mud-icon-button .mud-icon {
    color: var(--title-color) !important;
}

/* Specific targeting for MudBlazor filter and sort icons */
.mbu-grid.mud-data-grid .mud-table-head svg,
.mbu-grid.mud-data-grid thead svg {
    fill: var(--title-color) !important;
    color: var(--title-color) !important;
}

/* Enhanced MudDataGrid Footer Styling - Comprehensive solution */
.mbu-grid.mud-data-grid .mud-table-header,
.mbu-grid.mud-data-grid .mud-table-header th,
.mbu-grid.mud-data-grid .mud-table-header td,
.mbu-grid.mud-data-grid .mud-table-header .mud-table-cell,
.mbu-grid.mud-data-grid .mud-table-header .mud-table-cell-content,
.mbu-grid.mud-data-grid .mud-table-header .mud-table-header-cell,
.mbu-grid.mud-data-grid thead,
.mbu-grid.mud-data-grid thead tr,
.mbu-grid.mud-data-grid thead th,
.mbu-grid.mud-data-grid thead td {
    background-color: var(--title-background) !important;
    color: var(--title-color) !important;
}

/* Enhanced MudDataGrid Footer Styling - Comprehensive solution */
.mbu-grid.mud-data-grid .mud-table-footer,
.mbu-grid.mud-data-grid .mud-table-footer th,
.mbu-grid.mud-data-grid .mud-table-footer td,
.mbu-grid.mud-data-grid .mud-table-footer .mud-table-cell,
.mbu-grid.mud-data-grid .mud-table-footer .mud-table-cell-content,
.mbu-grid.mud-data-grid .mud-table-footer .mud-table-footer-cell,
.mbu-grid.mud-data-grid .mud-table-pagination,
.mbu-grid.mud-data-grid .mud-table-pagination-container,
.mbu-grid.mud-data-grid tfoot,
.mbu-grid.mud-data-grid tfoot tr,
.mbu-grid.mud-data-grid tfoot th,
.mbu-grid.mud-data-grid tfoot td {
    background-color: var(--title-background) !important;
    color: var(--title-color) !important;
    min-height: 32px !important;
}

/* MudDataGrid pager/footer interactive elements */
.mbu-grid.mud-data-grid .mud-table-footer .mud-button,
.mbu-grid.mud-data-grid .mud-table-footer .mud-button-text,
.mbu-grid.mud-data-grid .mud-table-footer .mud-icon-button,
.mbu-grid.mud-data-grid .mud-table-footer .mud-select,
.mbu-grid.mud-data-grid .mud-table-footer .mud-select-input,
.mbu-grid.mud-data-grid .mud-table-footer .mud-input,
.mbu-grid.mud-data-grid .mud-table-footer .mud-input-control,
.mbu-grid.mud-data-grid .mud-table-footer .mud-input-slot,
.mbu-grid.mud-data-grid .mud-table-pagination .mud-button,
.mbu-grid.mud-data-grid .mud-table-pagination .mud-button-text,
.mbu-grid.mud-data-grid .mud-table-pagination .mud-icon-button,
.mbu-grid.mud-data-grid .mud-table-pagination .mud-select,
.mbu-grid.mud-data-grid .mud-table-pagination .mud-select-input,
.mbu-grid.mud-data-grid .mud-table-pagination .mud-input,
.mbu-grid.mud-data-grid .mud-table-pagination .mud-input-control,
.mbu-grid.mud-data-grid .mud-table-pagination .mud-input-slot,
.mbu-grid.mud-data-grid .mud-table-pagination button,
.mbu-grid.mud-data-grid .mud-table-footer button {
    color: var(--title-color) !important;
    background-color: transparent !important;
}

/* Pagination text and navigation elements */
.mbu-grid.mud-data-grid .mud-table-pagination .mud-table-pagination-caption,
.mbu-grid.mud-data-grid .mud-table-pagination .mud-table-pagination-select-label,
.mbu-grid.mud-data-grid .mud-table-pagination .mud-typography,
.mbu-grid.mud-data-grid .mud-table-pagination .mud-text,
.mbu-grid.mud-data-grid .mud-table-pagination span,
.mbu-grid.mud-data-grid .mud-table-footer span,
.mbu-grid.mud-data-grid .mud-table-footer .mud-typography,
.mbu-grid.mud-data-grid .mud-table-footer .mud-text {
    color: var(--title-color) !important;
}

/* Catch-all for any remaining footer elements */
.mbu-grid.mud-data-grid .mud-table-footer *,
.mbu-grid.mud-data-grid .mud-table-pagination *,
.mbu-grid.mud-data-grid tfoot * {
    color: var(--title-color) !important;
}

/* Pagination dropdown and select styling */
.mbu-grid.mud-data-grid .mud-table-pagination .mud-select-filled,
.mbu-grid.mud-data-grid .mud-table-pagination .mud-input-filled {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Pagination navigation button hover states */
.mbu-grid.mud-data-grid .mud-table-pagination .mud-icon-button:hover,
.mbu-grid.mud-data-grid .mud-table-footer .mud-icon-button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Additional specific targeting for pagination controls to reduce height */
.mbu-grid.mud-data-grid .mud-table-pagination-toolbar,
.mbu-grid.mud-data-grid .mud-table-pagination-actions,
.mbu-grid.mud-data-grid .mud-table-pagination-spacer {
    min-height: 32px !important;
}

/* Reduce spacing in pagination elements */
.mbu-grid.mud-data-grid .mud-table-pagination .mud-toolbar {
    min-height: 32px !important;
    padding: 0 0 !important;
}

/* Compact the pagination content */
.mbu-grid.mud-data-grid .mud-table-pagination .mud-table-pagination-display,
.mbu-grid.mud-data-grid .mud-table-pagination .mud-table-pagination-select {
    margin: 0 4px !important; /* Reduced margin */
    line-height: 1 !important;
}

/* Grid container styling for proper layout */
.grid-container {
    display: flex;
    flex-direction: column;
    height: 90%;
    width: 100%;
    overflow: hidden;
}

/* Action bar should not grow */
.grid-container > :first-child {
    flex-shrink: 0;
}

/* Grid paper styles */
.grid-paper {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0; /* Important for Firefox */
}

/* Grid cell text truncation styles */
.mbu-grid .mud-table-cell {
    max-width: 200px; /* Default max width for cells */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Specific width constraints for different column types */
.mbu-grid .mud-table-cell.cell-opco {
    max-width: 80px;
}

.mbu-grid .mud-table-cell.cell-short {
    max-width: 120px;
}

.mbu-grid .mud-table-cell.cell-medium {
    max-width: 180px;
}

.mbu-grid .mud-table-cell.cell-long {
    max-width: 250px;
}

.mbu-grid .mud-table-cell.cell-comments {
    max-width: 300px;
}

/* Ensure truncated text containers maintain proper layout */
.truncated-cell-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    display: block;
}

/* Tooltip positioning */
.mud-tooltip {
    max-width: 400px;
    word-wrap: break-word;
    white-space: normal;
}

.modal-window-background {
    background-color: var(--tab-active-background);
}

.start-date.start-date.start-date, .end-date.end-date.end-date {
    width: 200px;
    margin-right: 15px;
}

.side-padding {
    padding-left: 10px;
    padding-right: 10px;
}

button.default-button {
    color: var(--nav-selected-color);
    background-color: var(--nav-selected-background);
}