@import url('app.css');
@import url('app.css');

.rotatable {
    transition: transform 0.4s ease;
}

    .rotatable.expanded {
        transform: rotate(-180deg);
    }

:root {
    --mud-bg-light-primary: #DEDBFC;
    --mud-bg-light-secondary: #FFD6E5;
    --mud-bg-light-info: #C3DEF4;
    --mud-bg-light-success: #C1F3D6;
    --mud-bg-light-error: #FFD2D2;
    --mud-bg-light-warning: #FFE4B0;
    --mud-bg-lighter-primary: #EEEDFC;
    --mud-bg-lighter-secondary: #FFE9F1;
    --mud-bg-lighter-info: #E1F0FA;
    --mud-bg-lighter-success: #E0F9E9;
    --mud-bg-lighter-error: #FFE6E6;
    --mud-bg-lighter-warning: #FFF1D6;
    --mud-bg-lightest-error: #fff4f4;
    --mud-palette-warning-hover: #FFE8C7;
}

.dense-grid .mud-grid-item {
    padding-top: 12px!important;
}


.mud-pallete-background-light-primary {
    background: var(--mud-bg-lighter-primary) !important;
}

.mud-pallete-background-light-secondary {
    background: var(--mud-bg-light-secondary) !important;
}

.mud-pallete-background-light-info {
    background: var(--mud-bg-light-info) !important;
}

.mud-pallete-background-light-success {
    background: var(--mud-bg-light-success) !important;
}

.mud-pallete-background-light-error {
    background: var(--mud-bg-light-error) !important;
}

.mud-pallete-background-light-warning {
    background: var(--mud-bg-light-warning) !important;
}

.mud-success-chip {
    background: var(--mud-bg-lighter-success) !important;
    color: var(--mud-palette-success) !important;
}
.mud-secondary-chip {
    background: var(--mud-bg-lighter-secondary) !important;
    color: var(--mud-palette-secondary) !important;
    border: 1px solid var(--mud-bg-light-secondary) !important;
}
.mud-info-chip {
    background: var(--mud-bg-lighter-info) !important;
    color: var(--mud-palette-info) !important;
    border: 1px solid var(--mud-bg-light-info) !important;
}

.mud-default-icon {
    background: var(--mud-palette-gray-lighter) !important;
    color: var(--mud-palette-text-secondary) !important;
    border-radius: 50%;
    padding: 10px;
    width: 40px !important;
    height: 40px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.mud-succes-icon {
    background: var(--mud-bg-lighter-success) !important;
    color: var(--mud-palette-success) !important;
    border-radius: 50%;
    padding: 10px;
    width: 40px !important;
    height: 40px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.mud-succes-icon-dark {
    background: var(--mud-palette-success) !important;
    color: var(--mud-palette-white) !important;
    border-radius: 50%;
    padding: 10px;
    width: 40px !important;
    height: 40px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.mud-secondary-icon {
    background: var(--mud-bg-lighter-secondary) !important;
    color: var(--mud-palette-secondary) !important;
    border-radius: 50%;
    padding: 10px;
    width: 40px !important;
    height: 40px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.mud-info-icon {
    background: var(--mud-bg-lighter-info) !important;
    color: var(--mud-palette-info) !important;
    border-radius: 50%;
    padding: 10px;
    width: 40px !important;
    height: 40px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

html {
    overflow-y: scroll;
}

body, html {
    background-color: var(--mud-palette-background)!important;
    height: calc(100vh);
}

.info-btn-filled {
    color: rgb(154 142 255);
}

.info-btn-filled-gray {
    color: var(--mud-palette-lines-inputs);
}

.primary-action-btn {
    background-color: var(--mud-palette-primary) !important; /* main purple */
    color: #fff !important; /* white text */
    border: 1px solid var(--mud-palette-primary) !important;
    border-radius: 8px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    padding: 6px 16px !important;
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

    .primary-action-btn:hover {
        background-color: #5e35b1 !important; /* slightly darker purple */
    }

.primary-action-btn {
    background-color: var(--mud-palette-primary) !important; /* main purple */
    color: #fff !important; /* white text */
    border: 1px solid var(--mud-palette-primary) !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    padding: 6px 16px !important;
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

    .primary-action-btn:hover {
        background-color: #5e35b1 !important; /* slightly darker purple */
    }

.secondary-action-btn {
    background-color: #eee4ff !important; /* very light purple */
    color: var(--mud-palette-primary) !important; /* purple text */
    border: none !important; /* cleaner look */
    border-radius: var(--mud-default-borderradius);
    font-weight: 500 !important;
    text-transform: none !important;
    padding: 6px 16px !important;
    box-shadow: 0 1px 3px rgba(111, 66, 193, 0.12) !important; /* softer shadow */
    transition: all 0.2s ease-in-out;
    border: 1px solid #eee4ff !important;
}

    .secondary-action-btn:hover {
        border: 1px solid #e4d4ff !important;
        background-color: #f1e8ff !important; /* slightly darker background on hover */
        color: var(--mud-palette-primary-darken) !important;
        box-shadow: 0 2px 6px rgba(111, 66, 193, 0.18) !important; /* slightly stronger but still soft */
    }

.tertiary-action-btn {
    background-color: var(--mud-palette-table-lines) !important; /* very light purple */
    color: var(--mud-palette-dark-darken) !important; /* purple text */
    border: 1px solid rgb(229 229 229) !important; /* cleaner look */
    text-transform: none !important;
    border-radius: var(--mud-default-borderradius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important; /* softer shadow */
    transition: all 0.2s ease-in-out;
    padding: 8px 24px !important;
}

    .tertiary-action-btn:hover {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12) !important; /* slightly stronger but still soft */
    }

.no-wrap-stack {
    flex-wrap: nowrap; /* prevent line breaks */
    gap: 1rem; /* ensure spacing between text and button */
}

    .no-wrap-stack .shrink-section {
        min-width: 0; /* allows text to shrink properly */
        flex: 1; /* takes available space */
    }

.menu-dropdown-button button {
    padding: 8px 24px !important;
}

.fixed-section {
    white-space: nowrap; /* prevent wrapping of button text */
    flex-shrink: 0; /* keeps button from shrinking */
}

.vh100 {
    height: calc(100vh - var(--mud-appbar-height));
}

h1:focus {
    outline: none;
}

.gray-background {
    background: var(--mud-palette-background-gray) !important;
    background-color: var(--mud-palette-background-gray) !important;
}

.white-background {
    background: var(--mud-palette-background) !important;
    background-color: var(--mud-palette-background) !important;
}

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

.text-field-no-border fieldset {
    border:none!important;
}

.mud-switch .mud-switch-label-medium {
    font-size: var(--mud-typography-body1-size) !important;
}

.mud-gray-tabbar .mud-tabs-tabbar {
    background: var(--mud-background);
    color: var(--mud-palette-gray-dark);
}

.mud-checkbox {
    margin-left:-14px;
}
.mud-checkbox.mud-disabled p {
    color: var(--mud-palette-text-disabled); 
}
.mud-checkbox.mud-disabled{
    cursor: default;
}

/*Custom background colors*/
.mud-background-succes-light {
    background: #C1F3D6;
}

/*Custom select*/
.mud-select-primary .mud-input-control-input-container {
    border-radius: 8px;
    justify-content: center;
    height: 42px;
    background: #E9E8F7 !important;
}
    .mud-select-primary .mud-input-control-input-container:hover {
        background: #D0CDF2 !important;
        transition: background ease-in-out 0.3s;
    }
.mud-select-primary .mud-input, .mud-select-primary .mud-icon-root {
    color: var(--mud-palette-primary);
}
.mud-select-primary .mud-input-outlined-border {
    border: none !important;
}

/*Custom Button*/
.mud-buton-primary-light {
    justify-content: center;
    background: #EAE3F7 !important;
    height: 42px;
    color: var(--mud-palette-primary) !important;
}
    .mud-buton-primary-light:hover {
        background: #D9CEE8 !important;
    }

/* Custom styling text color */
.mud-text-gray {
    color: #43444d;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.dotted-string {
    display: -webkit-box; /* make it a flexible box container */
    -webkit-box-orient: vertical; /* vertical stacking */
    -webkit-line-clamp: 1; /* limit to 2 lines */
    overflow: hidden; /* hide anything beyond */
    text-overflow: ellipsis; /* show “…” at the end */
    white-space: normal; /* allow wrapping */
    line-height: 20px !important; /* match your font’s line-height */
    max-height: calc(20px * 1); /* exactly 2 lines worth of height */
}

.dotted-string-two-lines {
    display: -webkit-box; /* make it a flexible box container */
    -webkit-box-orient: vertical; /* vertical stacking */
    -webkit-line-clamp: 2; /* limit to 2 lines */
    overflow: hidden; /* hide anything beyond */
    text-overflow: ellipsis; /* show “…” at the end */
    white-space: normal; /* allow wrapping */
    line-height: 20px!important;/* match your font’s line-height */
    max-height: calc(20px * 2); /* exactly 2 lines worth of height */
}

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Custom styling full height container */
.full-height {
    min-height: calc(100vh - var(--mud-appbar-height));
}

.gray-background {
    background: var(--mud-palette-background-gray);
}


/* Custom styling button */
.gray-button {
    padding-left: 16px;
    padding-right: 16px;
    background: var(--mud-palette-gray-lighter) !important;
    border: 1px solid var(--mud-palette-divider) !important;
    border-radius: 6px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.gray-button:hover {
    background: var(--mud-palette-lines-default)!important;
}
.white-button {
    padding-left: 16px;
    padding-right: 16px;
    background: var(--mud-palette-white) !important;
    border: 1px solid var(--mud-palette-divider) !important;
    border-radius: 6px;
    color: #43444d!important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
    .white-button:hover {
        background: var(--mud-palette-gray-lighter) !important;
    }
.round-button {
    border-radius: 22px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
}
.light-primary-button {
    background: #eae7ff !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #e5ccfd !important
}
.light-primary-button:hover {
    background: #d2cdf5 !important;
}


/*Custom tablle styling*/
.gray-table-header th {
    background: var(--mud-palette-gray-lighter) !important;
    color: var(--mud-palette-text-secondary) !important;
}
.light-table-header th {
    color: var(--mud-palette-text-secondary) !important;
}
.mud-table-primary-checkbox .mud-checkbox-true {
    color: var(--mud-palette-primary) !important;
}

/*Custom text styling*/
.bold-primary-text {
    font-weight: 600!important;
    color: var(--mud-palette-primary);
}

.text-light-gray {
    color: var(--mud-palette-gray-default);
}

.text-dark-gray {
    color: var(--mud-palette-gray-darker);
}

.elevation-1 {
    box-shadow: 0 0 0 1px rgba(0,0,0,0.05), 0 1px 3px 0 rgba(0,0,0,.08), 0 1px 2px 0 rgba(0,0,0,.02)!important;
}

.elevation-2 {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(0, 0, 0, 0.02) !important;
}

.mud-breadcrumbs svg, .mud-breadcrumbs a{
    color: var(--mud-palette-gray-dark)!important;
}

.position-absolute {
    position: absolute;
}
.position-relative {
    position:relative;
}
.top-0{
    top:0;
}
.right-0 {
    right:0;
}