/*
	This CSS file matches the color scheme from MudBlazor to Bootstrap when utilized for authentication.
	The file remains available at all times for demonstration purposes,
	but it is exclusively employed in the 'App.razor' component when authentication is enabled.
*/

:root {
    --organic: #DCEDC8;
}

.mud-input {
    font-size: inherit !important;
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

.mud-simple-table table * tr > td, .mud-simple-table table * tr th {
    font-size: inherit !important;
    line-height: inherit !important;
}

.mud-expand-panel .mud-expand-panel-header {
    font-size: inherit !important;
}

.mud-button-year {
    font-size: inherit !important;
}

.mud-table-cell {
    font-size: inherit !important;
}

.mud-typography-body1 {
    font-size: var(--mud-typography-body1-size);
}

.mud-typography-body2 {
    font-size: var(--mud-typography-body2-size);
}

.mud-button-outlined-size-small {
    font-size: var(--mud-typography-body2-size);
}

#blazor-error-ui {
    background: lightyellow;
    background-color: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
    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;
    padding: 0.6rem 1.75rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 9999;
}

#reconnect-modal {
    background: lightyellow;
    background-color: var(--mud-palette-warning-hover);
    color: var(--mud-palette-warning-darken);
    top: 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;
    padding: 0.6rem 1.75rem 0.7rem 1.25rem;
    margin: 0px;
    position: fixed;
    width: 100%;
    z-index: 9999;
}

.appheader {
    backdrop-filter: blur(5px);
    background: var(--mud-palette-appbar-background);
}

.mud-nav-link {
    white-space: normal !important;
}

.user-button {
    text-transform: none;
    background: rgba(var(--mud-palette-primary-rgb), 0.1)
}

.side-menu .mud-chip.mud-chip-size-small {
    font-size: 0.625rem;
    height: 1.125rem;
}

.vh-100 {
    height: calc(100vh - 64px - 16px - 16px - 5px);
}

.full-height {
    flex-grow: 1;
    overflow: auto;
}

.mud-table.full-height > .mud-table-container {
    overflow: clip;
    display: block;
}

.mud-tabs.full-height > .mud-tabs-panels {
    overflow: auto;
    display: block;
}

.mud-table-row {
    background-color: var(--mud-palette-background);
}

/* Overrides default hover background color */
.mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row:hover .mud-table-cell {
    background-color: var(--mud-palette-background);
    box-shadow: inset 0 0 0 100vw /* Large spread */ #00000010; /* Using box-shadow as a hover/selected effect, so we can still alter the color of the background, without altering the text colors */
}

.mud-table-row.selectedrow .mud-table-cell {
    box-shadow: inset 0 0 0 100vw #00000010;
}

.mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row.organicrow .mud-table-cell {
    background-color: var(--organic);
}

.searchfield {
    cursor: pointer;
}

.searchfield .mud-input {
    cursor: pointer; /*provide 'clickable' feedback to user*/
}

.searchfield input {
    cursor: pointer !important; /*provide 'clickable' feedback to user*/
}

.searchfield .mud-input.mud-input-underline:before {
    border-bottom: 1px solid var(--mud-palette-lines-inputs); /*same bottom border as an enabled field*/
}

.searchfield .mud-input.mud-input-underline:hover:before {
    border-bottom: 1px solid var(--mud-palette-action-default); /*same hover effect as an enabled field*/
}

.searchfield.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol.mud-disabled {
    color: var(--mud-palette-text-secondary); /*same text color as an enabled field*/
}

/* MUDBLAZOR FIX: Using stickyleft column in combination with fixed header will scroll the sticky header, this fix prevents this */
.mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell.sticky-left, .mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell.sticky-right {
    z-index: 3;
/*    background-color: var(--mud-palette-background);*/
}

.mud-table-sticky-footer * .mud-table-root .mud-table-foot * .mud-table-cell.sticky-left, .mud-table-sticky-footer * .mud-table-root .mud-table-foot * .mud-table-cell.sticky-right {
    z-index: 3;
/*    background-color: var(--mud-palette-background);*/
}

/*sticky left background color*/
.mud-data-grid .mud-table-cell.sticky-left {
    background-color: var(--mud-palette-background);
}

.mud-data-grid .mud-table-row.organicrow .mud-table-cell.sticky-left {
    background-color: var(--organic);
}
/*END MUDBLAZOR FIX*/

/*
 REMARK: This will enable the tab to be sticky and the content will scroll, but only when there is only a grid in the tab.
    Else other problems occur, so it might not be a good solution...
.mud-tabs {
    overflow: auto;
}

    .mud-tabs > .mud-tabs-panels {
        overflow: auto;
        display: flex;
    }*/

.sticky-left .mud-table-cell:has(>.sticky-footer-fix) {
    z-index: 9999 !important;
    background-color: blue !important;
}

.form-label {
    transform: translate(0, 1.5px) scale(0.75);
    transform-origin: top left;
}

.mud-radio-group > .mud-radio-content-placement-end {
    margin-left: 0;
}

.mud-table-row.row-onhold > .mud-table-cell {
    background-color: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
}

.mud-table-row.row-onhold:hover > .mud-table-cell {
    background-color: var(--mud-palette-error-darken);
    color: var(--mud-palette-error-text);
}

.mud-table-row.secondaryrow > .mud-table-cell {
    opacity: 0.5;
    background-color: var(--mud-palette-background-gray);
}

.mud-table-dense * .mud-table-row .mud-table-cell
{
    padding: 5px; /*top right bottom left*/
}

.mud-table-root .mud-table-head th.char-max-5 {
    width: 5ch;
}

.mud-table-root .mud-table-head th.char-max-10 {
    width: 10ch;
}

.mud-table-root .mud-table-head th.char-max-15 {
    width: 15ch;
}

.mud-table-root .mud-table-head th.char-max-20 {
    width: 20ch;
}

.mud-table-root .mud-table-head th.char-max-25 {
    width: 25ch;
}

.mud-table-root .mud-table-head th.char-max-30 {
    width: 30ch;
}

/* Responsiveness for phones/smaller devices */
@media only screen and (max-width: 600px) {
    .mud-table-container {
        width: 100% !important;
    }

    /* Only show the last 3 items in the breadcrumbs (still allows the user to go back one page easily, but is still small enough to fit in the header) */
    .mud-appbar .mud-breadcrumbs *:not(:nth-last-child(-n + 3)) {
        display: none;
    }

    .mud-appbar .mud-divider {
        display: none;
    }

    .mud-appbar .mud-typography {
        display: none;
    }
}

@media only screen and (min-width: 600px) {
    .user-menu .mud-primary-text {
        display: none;
    }
}

@media only screen and (max-width: 960px) {
    .full-height {
        overflow: visible;
    }

    .mud-toolbar.mud-toolbar-dense {
        height: auto;
        flex-wrap: wrap;
    }
}