h1:focus {
    outline: none;
}

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

.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;
}

    .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;
}

.no-select {
    user-select: none;
}

.white-space-nowrap {
    white-space: nowrap
}


/* =======================   */
/* there is a bug in columns panel (the panel that opens when you click on grid setting icon then choose columns), when the table has many columns and you scroll to far right it does not show due to a bug, i added this style to fix this problem   */

/*@media (min-width: 960px) {
    div.mud-data-grid-columns-panel {
        left: 200px !important;
    }
}*/

/* Update to the above: they fixed that in version:8.8.0 in this PR https://github.com/MudBlazor/MudBlazor/pull/11452 
    BUUUUTT: they produced another more severe BUG: in datagrid mobile mode (when the screen width is small) the columns panel top,left calcutions don't work correctly resulting hidden columns panel !!!!!!!!!!!!
    so I added this workaround to fix that for smaller screen.
*/
@media (max-width: 960px) {
    div.mud-data-grid-columns-panel {
        left: auto !important;
        right: 30px !important;
        top: 240px !important;
    }
}
/* =======================   */

/* remove group button (the 3 bars) in columns panel when grouping is not used (as requested) */
div.mud-data-grid-columns-panel button[title="Group"]:disabled {
    display: none;
}

/* remove filter button in columns panel*/
div.mud-data-grid-columns-panel button[title="Filter"]:disabled {
    display: none;
}

/* this is a hacky solution to control the order of divs in columns panel, as requested we need the hide/show all buttons to be on top,
    this solution may cause problem in future releases if they changed the html structure of the ColumnsPanel component*/
/* =========  */
div.mud-data-grid-columns-panel {
    display: flex;
    flex-direction: column;
}

    div.mud-data-grid-columns-panel > div:nth-child(1) {
        order: 1 !important;
    }

    div.mud-data-grid-columns-panel > div:nth-child(2) {
        order: 2 !important;
        margin-top: 4px;
    }

    div.mud-data-grid-columns-panel > div:nth-child(3) {
        order: 0 !important;
        margin-top: 8px;
        align-self: start
    }
/* =========  */






/* just to fix a glitch for 1px border, i changed the border to 2px (the problem is that sometimes border:1px is not rendered at in the browser due to antialiasing issue) */
td.mud-table-cell {
    border-bottom: 2px solid var(--mud-palette-table-lines) !important;
}
/* style to add border and transparent background for input in table cell while editing */
.mud-table-cell .mud-input {
    background-color: rgba(0,0,0,.05);
    border-style: solid;
    border-width: 2px;
    border-color: rgba(0,0,0,.2);
    padding-left: 4px;
}

/* just a hack to collapse datagrid toolbar if we don't need to show it, there is no direct way to do that in MudDataGrid*/
.mud-toolbar:has(div.details-grid-details-toolbar) {
    height: 0 !important;
}

.striped div:nth-of-type(odd) {
    background-color: rgba(0,0,0,.075);
}

.dynamic-table-header {
    background: var(--mud-palette-background-gray) !important;
}

.mud-tab.mud-tab-active.mud-tab-active-improved {
    background-color: rgba(0,0,0,.2);
    border-bottom-color: var(--mud-palette-primary);
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

.mud-tab.mud-tab-inactive-improved {
    background-color: rgba(0,0,0,.075);
    border-bottom-color: var( --mud-palette-text-primary);
    border-bottom-style: solid;
    border-bottom-width: 1px;
}


.blink {
    animation: blink-keyframes .4s linear infinite;
}

@keyframes blink-keyframes {
    25% {
        opacity: 0.75;
    }

    50% {
        opacity: 0.1;
    }

    75% {
        opacity: 0.75;
    }
}

.mud-autocomplete-after-items:has(.autocomplete-pager) {
    position:sticky;
    bottom:0;
    padding:0 16px !important;
}

:root {
    /* Dense MudAppBar >= sm; update if Dense flag removed from MainLayout.razor:26. */
    --top-bar-h: 48px;
    /* matches .status-bar { height: 40px }; keep in sync. */
    --status-bar-h: 40px;
    --app-chrome-h: calc(var(--top-bar-h) + var(--status-bar-h));
}

.status-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: 40px !important;
    min-height: 40px !important;
    z-index: 1300;
}

.status-bar .mud-chip {
    cursor: default;
}

.status-bar .mud-chip.mud-clickable {
    cursor: pointer;
}

.environment-text {
    color: #616161 !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-right: 16px !important;
}

.mud-main-content {
    padding-bottom: var(--status-bar-h) !important;
}

.queue-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.chip-divider {
    display: inline-block;
    width: 1px;
    height: 16px;
    background-color: rgba(0, 0, 0, 0.2);
    margin: 0 4px;
}

.mud-theme-dark .chip-divider {
    background-color: rgba(255, 255, 255, 0.2);
}

.chip-count {
    font-weight: 600;
    font-size: 0.875rem;
}

.queue-item {
    padding: 6px 0;
}

.queue-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    gap: 12px;
    line-height: 1.4;
}

.queue-item-label {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #757575;
    flex-shrink: 0;
    min-width: 70px;
}

.mud-theme-dark .queue-item-label {
    color: #BDBDBD;
}

.queue-item-value {
    font-size: 0.85rem;
    font-weight: 400;
    text-align: right;
    word-break: break-word;
    flex-grow: 1;
    line-height: 1.4;
}

.queue-empty-state {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 120px;
}

.mud-theme-dark .queue-empty-state .mud-typography {
    color: #BDBDBD !important;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: 4px;
}

.stat-label {
    font-weight: 500;
    opacity: 0.7;
}

.stat-value {
    font-weight: 600;
}

.client-detail-card {
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}