/*
	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.
*/

.unauthorized-logo {
    width: clamp(200px, 100%, 300px);
}

.btn-primary {
    text-transform: uppercase;
    --bs-btn-bg: var(--mud-palette-primary) !important;
    --bs-btn-hover-bg: var(--mud-palette-primary-darken) !important;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--mud-palette-primary) !important;
}

.nav {
    --bs-nav-link-color: var(--mud-palette-primary) !important;
    --bs-nav-link-hover-color: var(--mud-palette-primary-darken) !important;
}

.mud-paper.highlight:hover {
    background-color: var(--mud-palette-primary-hover);
}

h1:focus {
    outline: none;
}

/* General table style override */
.mud-table {
    background-color: transparent !important;
}

/* --- Root Table Styling (for both inner and outer tables) --- */
.mud-table-root {
    border-collapse: separate;
    border-spacing: 0 8px; /* This provides the vertical space between rows */
}

/* --- Outer Table Row Styling --- */
.mud-table-body > .mud-table-row > .mud-table-cell {
    background-color: #FCFCFC;
    border: none !important;
}

.mud-table-body > .mud-table-row-error > .mud-table-cell {
    border-top: 2px solid var(--mud-palette-error-lighten) !important;
    border-bottom: 2px solid var(--mud-palette-error-lighten) !important;
}

    .mud-table-body > .mud-table-row-error > .mud-table-cell:first-child {
        border-left: 2px solid var(--mud-palette-error-lighten) !important;
    }

    .mud-table-body > .mud-table-row-error > .mud-table-cell:last-child {
        border-right: 2px solid var(--mud-palette-error-lighten) !important;
    }

.mud-table-body > .mud-table-row-warning > .mud-table-cell {
    border-top: 2px solid var(--mud-palette-warning-lighten) !important;
    border-bottom: 2px solid var(--mud-palette-warning-lighten) !important;
}

    .mud-table-body > .mud-table-row-warning > .mud-table-cell:first-child {
        border-left: 2px solid var(--mud-palette-warning-lighten) !important;
    }

    .mud-table-body > .mud-table-row-warning > .mud-table-cell:last-child {
        border-right: 2px solid var(--mud-palette-warning-lighten) !important;
    }


.mud-table-body > .mud-table-row:hover > .mud-table-cell {
    background-color: var(--mud-palette-primary-hover) !important;
}


.mud-table-body > .mud-table-row > .mud-table-cell:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.mud-table-body > .mud-table-row > .mud-table-cell:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Add shadow to the row container */
.mud-table-body > .mud-table-row {
    box-shadow: var(--mud-elevation-1);
    border-radius: 12px;
}

/* --- Shared Table Styles --- */
.mud-table-body .mud-table-row .mud-table-cell[colspan="1000"] {
    padding: 0 !important;
}

.mud-table-body > .mud-table-row:has(.inner-table-container) {
    box-shadow: none;
}

/* --- Inner Table Container --- */
.inner-table-container {
    padding: 8px 18px;
    background-color: #f7f7f7; /* A light grey background to contain the rows */
}

    /* --- Inner Table General --- */
    .inner-table-container .mud-table {
        background: none; /* Make the table background transparent */
    }

        /* --- Outer Table Row Styling --- */
        .inner-table-container .mud-table-body .mud-table-row > .mud-table-cell {
            background-color: #FCFCFC;
            border: none !important;
        }

    /* --- Inner Table Cells --- */
    .inner-table-container .mud-table-cell {
        border-bottom: none; /* Remove the default line border from cells */
    }

    /* --- Hover Effect --- */
    .inner-table-container .mud-table-body .mud-table-row:hover {
        background-color: var(--mud-palette-action-hover) !important;
    }

/* --- General & Header Styles --- */
.mud-table-cell {
    padding: 3px 16px;
    border-bottom: unset !important;
}



.mud-data-grid .mud-table-cell .column-header {
    text-transform: uppercase;
    color: #340E66 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

/*.mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell {
    background-color: transparent !important;
}*/

.form {
    background-color: #F7F7F7;
}

label.mud-input-label.mud-input-label-inputcontrol {
    text-transform: uppercase;
    color: #340E66 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    margin-left: 3px;
    display: block ruby;
}

/*Sets helper text to the right*/
.mud-input-helper-text {
    margin-left: 3px;
}

.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
    /*    margin-top: 25px;*/
    background-color: #FCFCFC;
    border-radius: 15px;
    height: 50px;
    padding-left: 10px;
    box-shadow: var(--mud-elevation-1);
}

    .mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text textarea {
        height: auto;
    }

    .mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text:has(textarea) {
        height: auto;
    }

.mud-input.mud-disabled {
    background-color: rgba(0,0,0,0.08) !important;
}

.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text.mud-input-text-with-label {
    margin-top: 25px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

/*Removes the line under inputs*/
.mud-input.mud-input-underline::before {
    content: unset;
}

/*Makes the line under input smaller*/
.mud-input.mud-input-underline::after {
    margin-left: 8px;
    margin-right: 8px;
}
/*Makes the line under tab content smaller*/
.mud-tab-slider.mud-tab-slider-horizontal {
    transform: scale(0.86);
}
/*Pushes Adorment Icon to the left when it's set to end*/
.mud-icon-button-edge-end {
    margin-inline-end: 0px;
}

.mud-button-label {
    font-weight: 600;
}

.mud-dialog .mud-dialog-actions {
    padding: 16px 18px;
}

.mud-elevation-1400 {
    z-index: 1400 !important;
}

.mud-nav-link {
    font-weight: 600;
    padding-left: 30px !important;
}

    .mud-nav-link.active:not(.mud-nav-link-disabled) {
        font-weight: 600 !important;
    }

    .mud-nav-link.active::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 9px;
        background-color: #B03ECC;
        height: 65%;
        border-radius: 10px;
        margin-top: auto;
        margin-bottom: auto;
        margin-left: -3px;
    }

/*NAVIGATION TEXT COLOR ACTIVE*/
.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: var(--mud-palette-primary);
    background-color: transparent;
}

/*NAVIGATION ICON COLOR ACTIVE*/
.mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon.mud-nav-link-icon-default {
    color: var(--mud-palette-primary);
}


.mud-nav-link:focus:not(.mud-nav-link-disabled) {
    background-color: transparent;
    color: var(--mud-palette-primary);
}

    .mud-nav-link:focus:not(.mud-nav-link-disabled) .mud-nav-link-icon.mud-nav-link-icon-default {
        color: var(--mud-palette-primary);
    }

.mud-breadcrumb-item > a {
    color: var(--mud-palette-primary);
}

.cropper {
    max-height: 500px;
    /* This rule is very important, please don't ignore this */
    max-width: 100%;
}

@media (hover: hover) and (pointer: fine) {
    .mud-nav-link:hover:not(.mud-nav-link-disabled) {
        color: var(--mud-palette-primary);
        background-color: transparent;
    }

    .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled):hover:not(.mud-nav-link-disabled) {
        background-color: transparent;
    }

    .mud-nav-link:hover:not(.mud-nav-link-disabled) .mud-nav-link-icon.mud-nav-link-icon-default {
        color: var(--mud-palette-primary);
    }
}

@media (hover: hover) and (pointer: fine) {
}