/* Fix to avoid Rider warnings for MudBlazor css variables that exist */
:root {
    --mud-palette-surface: initial;
    --mud-palette-divider: initial;
    --mud-palette-primary: initial;
    --mud-palette-background-grey: initial;
}

/* Zentrierter Container */
#app {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: transparent;
    font-family: "Montserrat", sans-serif;
}

/* Logo Styling */
.loading-logo {
    width: 80px;
    height: auto;
    margin-bottom: 1rem;
    /*animation: fadeIn 1s ease-in-out;*/
}

/* Titel im Google Material Design Stil */
.loading-text {
    font-size: 1.5rem;
    font-weight: 500;
    color: #1b6ec2;
    margin-bottom: 1rem;
    /*animation: fadeIn 1s ease-in-out;*/
}

/* Ladebalken-Hintergrund */
.loading-bar {
    width: 250px;
    height: 6px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

/* Fortschrittsbalken */
.loading-progress {
    width: var(--blazor-load-percentage, 0%);
    height: 100%;
    background: #1A74F1FF;
    transition: width 0.2s ease-in-out;
    animation: loadingAnimation 1.5s infinite;
}

/* Animation für sanftes Laden */
@keyframes loadingAnimation {
    0% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.8;
    }
}

/* Weiches Einblenden */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.e-control {
    font-family: Montserrat, sans-serif;
}

.e-tab .e-toolbar-items .e-toolbar-item .e-tab-text {
    font-family: Montserrat, sans-serif;
}

.e-card {
    font-family: Montserrat, sans-serif;
}

.e-calendar .e-header .e-title {
    font-size: var(--mud-typography-body2-size);
    font-family: var(--mud-typography-body2-family);
    font-weight: var(--mud-typography-body2-weight);
    line-height: var(--mud-typography-body2-lineheight);
    letter-spacing: var(--mud-typography-body2-letterspacing);
    text-transform: var(--mud-typography-body2-text-transform);
}

/* Prevent text selection inside appointments */
.e-schedule .e-appointment,
.e-schedule .template-wrap,
.e-schedule .template-wrap * {
    -webkit-user-select: none; /* Safari, iOS */
    -ms-user-select: none; /* IE/Edge */
    user-select: none; /* Standard */
}

.e-schedule .e-vertical-view .e-content-wrap .e-appointment .e-appointment-details {
    padding: 0 !important;
    width: 100%;
    height: 100%;
}

.e-schedule .e-agenda-view .e-appointment {
    padding: 0;
    width: 100%;
    height: 100%;
    white-space: normal;
}

.e-schedule .template-wrap {
    width: 100%;
    height: 100%;
    white-space: normal;
}

.custom-rich-text-editor .e-toolbar,
.custom-rich-text-editor .e-toolbar-item,
.custom-rich-text-editor .e-toolbar-items {
    background: none !important;
}

.custom-rich-text-editor .e-toolbar .e-toolbar-item.e-active,
.custom-rich-text-editor .e-toolbar .e-toolbar-item.e-active .e-tbar-btn,
.custom-rich-text-editor .e-toolbar .e-toolbar-item .e-btn.e-active,
.custom-rich-text-editor .e-toolbar .e-toolbar-item button.e-active,
.custom-rich-text-editor .e-toolbar .e-toolbar-item button[aria-pressed="true"],
.custom-rich-text-editor .e-toolbar .e-toolbar-item.e-active button {
    background-color: var(--mud-palette-primary-hover) !important;
    color: var(--mud-palette-primary) !important;
    border-radius: 4px !important;
}

.custom-rich-text-editor .e-toolbar .e-toolbar-item.e-active .e-icons,
.custom-rich-text-editor .e-toolbar .e-toolbar-item button.e-active .e-icons,
.custom-rich-text-editor .e-toolbar .e-toolbar-item button[aria-pressed="true"] .e-icons {
    color: var(--mud-palette-primary) !important;
    font-weight: bold !important;
}

.custom-rich-text-editor.e-richtexteditor {
    border-radius: 8px !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    font-size: var(--mud-typography-body2-size) !important;
    font-family: var(--mud-typography-body2-family) !important;
    font-weight: var(--mud-typography-body2-weight) !important;
    line-height: var(--mud-typography-body2-lineheight) !important;
    letter-spacing: var(--mud-typography-body2-letterspacing) !important;
    text-transform: var(--mud-typography-body2-text-transform) !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 140px !important;
    position: relative !important;
}

.custom-rich-text-editor .e-rte-content {
    position: relative !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 90px !important;
    padding-bottom: 24px !important;
}

.custom-rich-text-editor .e-content {
    height: auto !important;
    min-height: 90px !important;
    padding: 12px 14px 28px 14px !important;
    overflow-y: auto !important;
    word-break: break-word !important;
}

.custom-rich-text-editor .e-rte-character-count {
    position: absolute !important;
    right: 12px !important;
    bottom: 6px !important;
    font-size: 0.75rem !important;
    color: var(--mud-palette-text-secondary) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.custom-rich-text-editor .e-rte-placeholder {
    pointer-events: none !important;
    user-select: none !important;
    padding: 12px 14px !important;
    color: var(--mud-palette-text-disabled) !important;
    font-size: var(--mud-typography-body2-size) !important;
}

.custom-rich-text-editor:not(.e-placeholder) .e-rte-placeholder,
.custom-rich-text-editor .e-rte-placeholder.e-hide,
.custom-rich-text-editor .e-rte-placeholder.e-hidden,
.custom-rich-text-editor.e-focus .e-rte-placeholder,
.custom-rich-text-editor.e-rte-focus .e-rte-placeholder {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.dialog-content {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    padding-right: 10px; /* Optional: to add some space for scrollbar */
}

.mud-dialog-actions {
    position: sticky;
    bottom: 0;
}

.hide-headers .mud-table-head,
.hide-headers .mud-th {
    display: none;
}

.no-animation-drawer .mud-drawer,
.no-animation-drawer .mud-drawer--open,
.no-animation-drawer .mud-drawer--opening,
.no-animation-drawer .mud-drawer--closing,
.no-animation-drawer .mud-overlay {
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

button.mud-fab-default.fab-surface-solid {
    background-color: var(--mud-palette-surface) !important;
}

/* MudSelectExtended */
.mud-popover .dropdown-item-stack {
    padding-left: 10px;
    padding-top: 8px; /* Adjust this for the desired spacing */
    padding-bottom: 8px; /* Adjust this for the desired spacing */
}

.mud-popover .select-time-picker-item {
    padding-left: 2px;
    padding-top: 4px;
    padding-bottom: 4px;
}

/* SchedulerContextForm autocomplete: keep the dropdown within the viewport
   (100vw minus the mini nav rail and the input's offset) so wide recipe
   entries never extend past the screen edge, and stack it above the
   nav-menu-drawer (z-index 1240) AND above dialogs (z-index 1300) — the
   form is also used inside ScheduleAppointmentForm's MudDialog, where a
   lower value hides the dropdown behind the dialog */
.mud-popover.scheduler-context-popover {
    /* !important: overrides the inline styles from DropdownWidth.Adaptive */
    max-width: min(720px, calc(100vw - 110px)) !important;
    z-index: calc(var(--mud-zindex-popover) + 1) !important; /* 1341, see TheraflowTheme */
}

/* On small screens anchor-based positioning cannot keep the wide dropdown
   on screen, so span it across the viewport below the input instead */
@media screen and (max-width: 960px) {
    .mud-popover.scheduler-context-popover {
        left: 8px !important;
        right: 8px !important;
        max-width: none !important;
    }
}

.select-extended-small-padding-y .mud-input-slot {
    padding-top: 10.5px !important;
    padding-bottom: 10.5px !important;
}

.therapist-autocomplete .mud-input-adornment .mud-icon-root {
    color: var(--therapist-color);
}

/* z-index */

.main-layout-user-menu {
    z-index: 1301 !important;
}

.mud-drawer.nav-menu-drawer {
    z-index: 1240 !important;
}

.mud-drawer.theme-drawer {
    z-index: 1230 !important;
}

.mud-appbar.action-buttons-footer {
    z-index: 1220;
}

.mud-drawer.side-drawer {
    z-index: 1210 !important;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.mud-tabs.sticky-tabbar,
.mud-tabs-tabbar.sticky-tabbar,
.sticky-tabbar {
    position: sticky !important;
    top: var(--actual-appbar-height, var(--mud-appbar-height)) !important;
    z-index: 10 !important;
    background-color: var(--mud-palette-surface) !important;
}

.bb-thumbs-card, .bb-canvas-card, .bb-sidebar-card {
    box-sizing: border-box !important;
}

.bb-root.bb-compact .bb-thumbs-card,
.bb-root.bb-compact .bb-canvas-card {
    width: 100% !important;
}

.bb-root.bb-compact .bb-thumbs-card {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    overflow-y: hidden;
}

.bb-sidebar-item.bb-selected {
    background: var(--mud-palette-primary-hover) !important;
    border-left: 3px solid var(--mud-palette-primary) !important;
}

.bb-thumbs-card {
    overflow-y: auto;
    padding-bottom: 2px;
}

:root {
    --recipe-page-tabbar-height: 48px;
}

.doc-tab-breadcrumb-bar {
    position: sticky;
    top: calc(var(--mud-appbar-height) + var(--recipe-page-tabbar-height));
    z-index: 9;
    padding: 2px 8px;
}

.mud-divider-info {
    border-color:rgba(var(--mud-palette-info-rgb), 0.2) !important;
    border-width: 1px !important;
    border-style: solid none none none !important;
}

/* Reduce clutter of nested panels in mobile (Breakpoint.Xs) */
@media screen and (max-width: 599px) {
    .mud-expand-panel-gutters {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .mud-card-content {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

.scheduler-top-container {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
}

.scheduler-recipe-container {
    flex: 0 1 auto;
}

.scheduler-therapists-container {
    flex: 1 1 auto;
    min-width: 200px;
    align-content: center;
    justify-items: center;
}

.recipe-context-container {
    flex-wrap: nowrap;
}

.e-richtexteditor .e-content {
    padding-left: 15px !important;
}

.e-richtexteditor .e-content ul,
.e-richtexteditor .e-content ol {
    margin-left: 20px !important;
}

.e-calendar.custom-mini-calendar {
    background-color: var(--mud-palette-surface);
    min-height: fit-content;
}

.autocomplete-typography-body2 .mud-input-label {
    font-size: var(--mud-typography-body2-size) !important;
    font-family: var(--mud-typography-body2-family) !important;
    font-weight: var(--mud-typography-body2-weight) !important;
    line-height: var(--mud-typography-body2-lineheight) !important;
    letter-spacing: var(--mud-typography-body2-letterspacing) !important;
    text-transform: var(--mud-typography-body2-text-transform) !important;
}

/* Classes to fix for Mudblazor not resizing the helper text and input text field to body2 */
.mud-input-field-typography-body2 .mud-input-label-inputcontrol {
    font-size: var(--mud-typography-body2-size) !important;
    font-family: var(--mud-typography-body2-family) !important;
    font-weight: var(--mud-typography-body2-weight) !important;
    line-height: var(--mud-typography-body2-lineheight) !important;
    letter-spacing: var(--mud-typography-body2-letterspacing) !important;
    text-transform: var(--mud-typography-body2-text-transform) !important;
}

.mud-input-slot-typography-body2 .mud-input-slot {
    font-size: var(--mud-typography-body2-size) !important;
    font-family: var(--mud-typography-body2-family) !important;
    font-weight: var(--mud-typography-body2-weight) !important;
    line-height: var(--mud-typography-body2-lineheight) !important;
    letter-spacing: var(--mud-typography-body2-letterspacing) !important;
    text-transform: var(--mud-typography-body2-text-transform) !important;
}

/* SfTimePicker styling */
.e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input, .e-input-group textarea.e-input, .e-input-group.e-control-wrapper textarea.e-input {
    color: var(--mud-palette-text-primary) !important;
    font-size: var(--mud-typography-body2-size) !important;
    font-family: var(--mud-typography-body2-family) !important;
    font-weight: var(--mud-typography-body2-weight) !important;
    line-height: var(--mud-typography-body2-lineheight) !important;
    letter-spacing: var(--mud-typography-body2-letterspacing) !important;
    text-transform: var(--mud-typography-body2-text-transform) !important;
}

/* SfTimePicker styling */
.e-timepicker.e-popup .e-list-parent.e-ul li.e-list-item {
    color: var(--mud-palette-text-primary) !important;
    font-size: var(--mud-typography-body2-size) !important;
    font-family: var(--mud-typography-body2-family) !important;
    font-weight: var(--mud-typography-body2-weight) !important;
    line-height: var(--mud-typography-body2-lineheight) !important;
    letter-spacing: var(--mud-typography-body2-letterspacing) !important;
    text-transform: var(--mud-typography-body2-text-transform) !important;
}

/*customize the active element text color*/
.e-timepicker.e-popup .e-list-parent.e-ul li.e-list-item.e-active {
    color: var(--mud-palette-primary) !important;
    font-size: var(--mud-typography-body2-size) !important;
    font-family: var(--mud-typography-body2-family) !important;
    font-weight: var(--mud-typography-body2-weight) !important;
    line-height: var(--mud-typography-body2-lineheight) !important;
    letter-spacing: var(--mud-typography-body2-letterspacing) !important;
    text-transform: var(--mud-typography-body2-text-transform) !important;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.06) !important;
}

.e-timepicker.e-popup .e-list-parent.e-ul li.e-list-item {
    padding-top: 8px;
    padding-bottom: 8px;
}

.e-time-wrapper.dense-sf-time-picker {
    padding: 0 !important;
    border-color: var(--mud-palette-lines-inputs) !important;
}

.dense-sf-time-picker > .e-timepicker {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.dense-sf-time-picker > input.e-input {
    min-height: 39px !important;
}

.e-time-wrapper .e-time-icon.e-icons {
    margin-right: 6px !important;
}

.autocomplete-dense-padding .mud-input > input.mud-input-root-outlined,
.autocomplete-dense-padding div.mud-input-slot.mud-input-root-outlined {
    padding: 11px 12px; /* Original MudBlazor values: padding: 18.5px 14px */
}

.autocomplete-dense-padding .mud-input-label-outlined {
    transform: translate(12px, 12.5px) scale(1); /* Original MudBlazor values: transform: translate(14px, 20px) scale(1); */
}


.mud-alert-full-width .mud-alert-message {
    width: 100%;
}

.mud-switch-m3-small.mud-switch-m3 .mud-switch-span-m3 {
    transform: scale(0.92);
    transform-origin: left center;
    margin-right: 8px;
}

.mud-switch-m3-small.mud-switch-m3 .mud-typography.mud-typography-body1 {
    font-size: var(--mud-typography-body2-size);
    font-family: var(--mud-typography-body2-family);
    font-weight: var(--mud-typography-body2-weight);
    line-height: var(--mud-typography-body2-lineheight);
    letter-spacing: var(--mud-typography-body2-letterspacing);
    text-transform: var(--mud-typography-body2-text-transform);
}

.calendar-grid-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.calendar-grid-container > * {
    grid-column: 1;
    grid-row: 1;
}

.grid-overlay-button {
    justify-self: start;
    align-self: start;
    transform: translateY(12px);
    z-index: 10;
    border-radius: 4px;
}

.select-extended-no-margin.mud-input-control.mud-input-control-margin-dense {
    margin: 0;
}

.custom-mini-calendar .e-header .e-title {
    margin-left: 24px !important;
}

.custom-mini-calendar .e-header.e-month {
    padding-right: 5px !important;
}

.no-padding-field .mud-input-slot {
    padding: 4px !important;
}

.mud-list-xs .mud-list-item-icon {
    min-width: 40px;
}

.mud-list-xs.mud-list-item {
    padding-left: 0;
    padding-right: 0;
}

.recipe-form-layout-lg-and-up {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.recipe-form-layout-lg-and-up .recipe-form-left {
    /* Always take remaining space, independent of content size */
    flex: 1 1 0;
    min-width: 0;
}

.recipe-form-layout-lg-and-up .recipe-form-right {
    /* Fixed size */
    flex: 0 0 465px;
    max-width: 465px;
}

.recipe-form-layout-md-and-down {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.recipe-form-layout-md-and-down .recipe-form-right {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
}

.patient-form-layout-lg-and-up {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.patient-form-layout-lg-and-up .patient-form-left {
    /* Always take remaining space, independent of content size */
    flex: 1 1 0;
    min-width: 0;
}

.patient-form-layout-lg-and-up .patient-form-right {
    /* Fixed size */
    flex: 0 0 720px;
    max-width: 720px;
}

.patient-form-layout-md-and-down {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.patient-form-layout-md-and-down .patient-form-right {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
}

.inline-expand-panel .mud-expand-panel-header {
    padding-left: 8px !important;
    padding-right: 0 !important;
}

.inline-expand-panel .mud-panel-expanded {
    margin: 0 !important;
}

.inline-expand-panel .mud-expand-panel-content {
    padding: 0 !important;
}

.paper-expand-panel .mud-expand-panel {
    border-radius: 6px !important;
    border-color: var(--mud-palette-lines-default) !important;
    border-width: 1px !important;
}

.paper-expand-panel .mud-expand-panel:last-child,
.paper-expand-panel .mud-expand-panel.mud-panel-expanded:last-child {
    border-bottom: inherit;
}

.paper-expand-panel .mud-expand-panel-header {
    padding: 8px !important;
}

.paper-expand-panel .mud-panel-expanded {
    margin: 0 !important;
}

.panel--select-highlight-and-glow {
    position: relative;
    padding-top: 4px;
    padding-bottom: 4px;
    border: 8px solid var(--mud-palette-info);
    animation: mud-border-pulse 3.5s ease-in-out infinite,
    mud-surface-flash 600ms ease-out 1;
    box-shadow: 0 0 6px color-mix(in srgb, var(--mud-palette-info) 35%, transparent),
    0 2px 6px rgba(0, 0, 0, 0.15);
}

@keyframes mud-border-pulse {
    0% {
        border-color: color-mix(in srgb, var(--mud-palette-info) 60%, transparent);
        box-shadow: 0 0 4px color-mix(in srgb, var(--mud-palette-info) 25%, transparent),
        0 2px 6px rgba(0, 0, 0, 0.15);
    }
    50% {
        border-color: var(--mud-palette-info);
        box-shadow: 0 0 8px color-mix(in srgb, var(--mud-palette-info) 45%, transparent),
        0 2px 6px rgba(0, 0, 0, 0.15);
    }
    100% {
        border-color: color-mix(in srgb, var(--mud-palette-info) 60%, transparent);
        box-shadow: 0 0 4px color-mix(in srgb, var(--mud-palette-info) 25%, transparent),
        0 2px 6px rgba(0, 0, 0, 0.15);
    }
}

@keyframes mud-surface-flash {
    0% {
        background-color: transparent;
        box-shadow: 0 0 0 0 var(--mud-palette-info);
    }

    30% {
        background-color: color-mix(in srgb, var(--mud-palette-info) 100%, transparent);
        box-shadow: 0 0 8px 6px color-mix(in srgb, var(--mud-palette-info) 40%, transparent);
    }

    100% {
        background-color: transparent;
        box-shadow: 0 0 6px color-mix(in srgb, var(--mud-palette-info) 35%, transparent);
    }
}

.no-scroll-dialog .mud-dialog-content {
    overflow-y: hidden !important;
}

.appointment-ep-header {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.appointment-ep-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.appointment-ep-right {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.appointment-ep-title {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
}

.appointment-ep-truncate-text {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mud-radio-button-dense .mud-button-root {
    padding: 8px !important;
}

/* Shrink the date header row (theme default is a fixed 60px sized for two stacked lines).
   The td selector keeps this rule more specific than the Syncfusion theme css,
   which is injected at runtime after this file and would otherwise win. */
.e-schedule .e-vertical-view td.e-header-cells:not(.e-resource-cells) {
    height: 26px;
    padding: 0 4px;
    vertical-align: middle;
}

.date-header-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    line-height: 1;
    /* Same size as the time cells on the left */
    font-size: 14px;
}

.date-header-inline .date-header-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
}

.date-header-inline .date-header-today {
    background-color: rgba(var(--color-sf-primary));
    color: rgba(var(--color-sf-on-primary));
}

.employee-resource-header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 24px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.appointment-highlight-border {
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    animation: innerGlowTimeline 3s ease-out forwards;
}

/* white solid layer (contrast wash) */
.appointment-highlight-border::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: #fff;
    opacity: 0;
    animation: whiteWash 800ms ease-out 1;
}

/* colored overlay flash */
.appointment-highlight-border::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: rgba(var(--mud-palette-info-rgb), 0.22);
    opacity: 0;
    animation: overlayFlash 800ms ease-out 1;
}

@keyframes whiteWash {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes overlayFlash {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* glow: in (~0.6s) -> hold (until 5s) -> out (~0.6s) */
@keyframes innerGlowTimeline {
    0% {
        box-shadow: inset 0 0 0 0 rgba(var(--mud-palette-info-rgb), 0),
        inset 0 0 0 0 rgba(var(--mud-palette-info-rgb), 0);
    }

    /* 600 / 5600 ≈ 10.7% */
    10.7% {
        box-shadow: inset 0 0 0 3px rgba(var(--mud-palette-info-rgb), 0.95),
        inset 0 0 14px 6px rgba(var(--mud-palette-info-rgb), 0.45);
    }

    /* 5000 / 5600 ≈ 89.3% */
    89.3% {
        box-shadow: inset 0 0 0 2px rgba(var(--mud-palette-info-rgb), 0.70),
        inset 0 0 10px 4px rgba(var(--mud-palette-info-rgb), 0.25);
    }

    100% {
        box-shadow: inset 0 0 0 0 rgba(var(--mud-palette-info-rgb), 0),
        inset 0 0 0 0 rgba(var(--mud-palette-info-rgb), 0);
    }
}

.selected-toggle-group-item-primary {
    color: var(--mud-palette-primary) !important;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.06) !important;
}

.right-sidebar {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: visible;
}

.sidebar-item-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

.right-sidebar {
    overflow: visible !important;
}

.right-sidebar .mud-toggle-group {
    overflow: visible !important;
}

.right-sidebar .mud-toggle-item {
    overflow: visible !important;
}

.right-sidebar .mud-toggle-item-content {
    overflow: visible !important;
}

.sidebar-item-wrapper {
    position: relative;
    overflow: visible !important;
}

.side-drawer,
.side-drawer .mud-drawer-content,
.side-drawer .mud-drawer-container {
    overflow: visible !important;
}


.side-drawer-hint {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1250;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
}

.side-drawer-hint.show {
    animation: side-drawer-hint-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.side-drawer-hint.hide {
    animation: side-drawer-hint-exit 220ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes side-drawer-hint-enter {
    0% {
        opacity: 0;
        transform: translateY(-50%) translateX(12px);
    }
    100% {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

@keyframes side-drawer-hint-exit {
    0% {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-50%) translateX(6px);
    }
}

.side-drawer-hint-content {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid transparent;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
    font-size: 0.9rem;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
}

.side-drawer-hint-arrow {
    position: absolute;
    top: 50%;
    right: -7px;
    width: 14px;
    height: 14px;
    transform: translateY(-50%) rotate(45deg);
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
}

.side-drawer-hint-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

.side-drawer-hint-icon {
    position: relative;
    z-index: 1;
    font-size: 20px;
}

.side-drawer-hint-text-reveal {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
}

.side-drawer-hint-text {
    display: inline-block;
    text-transform: none;
    letter-spacing: normal;
}


/* SUCCESS */

.side-drawer-hint-success .side-drawer-hint-content {
    background: var(--mud-palette-success);
    color: var(--mud-palette-success-text);
    border-color: var(--mud-palette-success);
}

.side-drawer-hint-success .side-drawer-hint-arrow {
    background: var(--mud-palette-success);
    border-top-color: var(--mud-palette-success);
    border-right-color: var(--mud-palette-success);
}

.side-drawer-hint-success-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    transform: scale(1);
    animation: hint-success-settle-bounce 260ms ease-out 520ms both;
}

.side-drawer-hint-success-pulse {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
    transform: scale(0.55);
    animation: hint-success-pulse 360ms ease-out 280ms forwards;
}

.hint-success-check {
    position: relative;
    z-index: 1;
    width: 22px;
    height: 22px;
}

.hint-success-check-circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-dasharray: 57;
    stroke-dashoffset: 57;
    animation: hint-draw-circle 220ms ease 220ms forwards;
}

.hint-success-check-mark {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 12;
    stroke-dashoffset: 12;
    animation: hint-draw-check 170ms ease 400ms forwards;
}

/* SUCCESS VARIANT: EmptyThenReveal
   Popup fades/slides in, then icon animates, then text expands/reveals */
.variant-expand-then-reveal .success-text-reveal {
    max-width: 0;
    opacity: 0;
    animation: hint-text-container-reveal 150ms cubic-bezier(0.16, 1, 0.3, 1) 620ms forwards;
}

.variant-expand-then-reveal .success-text-reveal .side-drawer-hint-text {
    transform: translateX(-10px);
    opacity: 0;
    animation: hint-text-content-reveal 150ms cubic-bezier(0.16, 1, 0.3, 1) 780ms forwards;
}

/* SUCCESS VARIANT: EmptyThenReveal
   Popup appears full width but empty, then icon animates, then text reveals left to right */
.variant-empty-then-reveal .success-text-reveal {
    max-width: 500px;
    opacity: 1;
}

.variant-empty-then-reveal .success-text-reveal .side-drawer-hint-text {
    opacity: 1;
    transform: translateX(0);
    clip-path: inset(0 100% 0 0);
    animation: hint-text-clip-reveal 300ms ease 300ms forwards;
}

/* WARNING */

.side-drawer-hint-warning .side-drawer-hint-content {
    background: var(--mud-palette-warning);
    color: var(--mud-palette-warning-text);
    border-color: var(--mud-palette-warning);
}

.side-drawer-hint-warning .side-drawer-hint-arrow {
    background: var(--mud-palette-warning);
    border-top-color: var(--mud-palette-warning);
    border-right-color: var(--mud-palette-warning);
}

/* ERROR */

.side-drawer-hint-error .side-drawer-hint-content {
    background: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
    border-color: var(--mud-palette-error);
}

.side-drawer-hint-error .side-drawer-hint-arrow {
    background: var(--mud-palette-error);
    border-top-color: var(--mud-palette-error);
    border-right-color: var(--mud-palette-error);
}

/* INFO */

.side-drawer-hint-info .side-drawer-hint-content {
    background: var(--mud-palette-info);
    color: var(--mud-palette-info-text);
    border-color: var(--mud-palette-info);
}

.side-drawer-hint-info .side-drawer-hint-arrow {
    background: var(--mud-palette-info);
    border-top-color: var(--mud-palette-info);
    border-right-color: var(--mud-palette-info);
}

/* SURFACE */

.side-drawer-hint-surface .side-drawer-hint-content {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-lines-default);
}

.side-drawer-hint-surface .side-drawer-hint-arrow {
    background: var(--mud-palette-surface);
    border-top-color: var(--mud-palette-lines-default);
    border-right-color: var(--mud-palette-lines-default);
}

/* WARNING / ERROR ICON EFFECTS */

.icon-wobble-glow::before,
.icon-shake-glow::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
    transform: scale(0.7);
    z-index: 0;
}

/* LOADING ICON EFFECT */

.icon-loading-spin .side-drawer-hint-icon {
    animation: hint-icon-spin 900ms linear infinite;
    transform-origin: center;
}

.icon-wobble-glow::before {
    animation: hint-icon-glow 320ms ease-out forwards;
}

.icon-shake-glow::before {
    animation: hint-icon-glow-strong 340ms ease-out forwards;
}

.icon-wobble-glow .side-drawer-hint-icon {
    animation: hint-icon-wobble 420ms ease-out forwards;
}

.icon-shake-glow .side-drawer-hint-icon {
    animation: hint-icon-shake 320ms ease-out forwards;
}

/* KEYFRAMES */

@keyframes hint-draw-circle {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes hint-draw-check {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes hint-success-pulse {
    0% {
        transform: scale(0.55);
        opacity: 0;
    }
    40% {
        transform: scale(1.25);
        opacity: 0.16;
    }
    100% {
        transform: scale(1.55);
        opacity: 0;
    }
}

@keyframes hint-success-settle-bounce {
    0% {
        transform: scale(1);
    }
    35% {
        transform: scale(1.1);
    }
    70% {
        transform: scale(0.96);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes hint-text-container-reveal {
    0% {
        max-width: 0;
        opacity: 0;
    }
    100% {
        max-width: 500px;
        opacity: 1;
    }
}

@keyframes hint-text-content-reveal {
    0% {
        transform: translateX(-6px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes hint-text-clip-reveal {
    0% {
        opacity: 1;
        clip-path: inset(0 100% 0 0);
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

@keyframes hint-icon-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes hint-icon-wobble {
    0% {
        transform: rotate(0deg) scale(0.9);
        opacity: 0.85;
    }
    20% {
        transform: rotate(-10deg) scale(1.06);
    }
    40% {
        transform: rotate(8deg) scale(1);
    }
    60% {
        transform: rotate(-5deg);
    }
    80% {
        transform: rotate(3deg);
    }
    100% {
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }
}

@keyframes hint-icon-shake {
    0% {
        transform: translateX(0) scale(0.92);
        opacity: 0.85;
    }
    18% {
        transform: translateX(-2px) scale(1.04);
    }
    36% {
        transform: translateX(2px);
    }
    54% {
        transform: translateX(-2px);
    }
    72% {
        transform: translateX(2px);
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

@keyframes hint-icon-glow {
    0% {
        opacity: 0;
        transform: scale(0.7);
    }
    35% {
        opacity: 0.16;
        transform: scale(1.25);
    }
    100% {
        opacity: 0;
        transform: scale(1.55);
    }
}

@keyframes hint-icon-glow-strong {
    0% {
        opacity: 0;
        transform: scale(0.65);
    }
    35% {
        opacity: 0.2;
        transform: scale(1.3);
    }
    100% {
        opacity: 0;
        transform: scale(1.6);
    }
}

.side-drawer-focus-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, 0.18);
}

.side-drawer-focus-overlay.show {
    animation: side-drawer-focus-overlay-in 220ms ease forwards;
}

.side-drawer-focus-overlay.hide {
    animation: side-drawer-focus-overlay-out 180ms ease forwards;
}

@keyframes side-drawer-focus-overlay-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes side-drawer-focus-overlay-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/*
 * ------------------------
 * custom-mud-data-grid
 * ------------------------
 * For using MudDataGrid only for server data fetching and pagination but a custom data display layout
 *
 */

 .custom-data-grid-container {
     display: flex;
     flex-direction: column;
     height: calc(var(--app-height) - 182px);
 }

.custom-data-grid-scroll {
    position: relative;
    flex: 1;
    overflow-y: auto;
    min-height: 0; /* critical — prevents flex child from overflowing */
}

.custom-data-grid-island-grid {
    columns: 380px;
    column-gap: 16px;
    padding: 16px;
}

.island-backdrop {
    position: absolute;
    inset: 0;
    z-index: 9;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.custom-data-grid-scroll:has(.has-maximized) .island-backdrop {
    opacity: 1;
    pointer-events: all;
}

.custom-data-grid-island {
    break-inside: avoid;
    display: inline-block;
    width: 100%;
    margin-bottom: 16px;
    transition: opacity 180ms ease;
}

.custom-data-grid-island-grid.has-maximized .custom-data-grid-island:not(.is-maximized) {
    display: none;
}

.custom-data-grid-island.is-maximized {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: min(450px, 100%);
    z-index: 10;
    overflow-y: unset;
    max-height: calc(100% - 48px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
    margin-bottom: 0;
    animation: island-expand 220ms cubic-bezier(0.2, 0, 0, 1) forwards;
    display: flex;
    flex-direction: column;
}

.custom-data-grid-island-content {
    overflow-y: auto;
    height: 150px;
    padding: 8px;
}

.custom-data-grid-island.is-maximized .custom-data-grid-island-content {
    height: unset;
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

@keyframes island-expand {
    from {
        opacity: 0;
        transform: translateX(-50%) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}

.custom-data-grid-island.is-obscured {
    pointer-events: none;
    user-select: none;
}

.custom-data-grid-island-header {
    padding: 10px 12px;
}

.custom-data-grid-pager-toolbar .mud-input-underline:before,
.custom-data-grid-pager-toolbar .mud-input-underline:after {
    border-bottom: none !important;
}

.custom-data-grid-pager-toolbar .mud-input-underline:hover:not(.mud-disabled):before {
    border-bottom: none !important;
}

.custom-data-grid-pager-toolbar .mud-table-pagination-spacer {
    flex: 1 1 100%;
}

@media (max-width: 416px) {
    .custom-data-grid-pager-toolbar .mud-table-pagination-spacer {
        flex: none;
    }
}

@media (max-width: 416px) {
    .custom-data-grid-pager-toolbar .mud-table-pagination-toolbar {
        flex-wrap: wrap;
        padding-top: 16px;
        padding-right: 16px;
        min-height: 100px;
    }

    .custom-data-grid-pager-toolbar .mud-table-pagination-toolbar .mud-table-pagination-actions {
        margin-left: auto;
        margin-right: -14px;
    }
}

/* Hide MudBlazor's inline helper text when wrapped in SuppressInlineMessage */
.vld-suppress-inline-message .mud-input-control-helper-container {
    display: none !important;
}

/*
 * ------------------------
 * Severity Colouring
 * ------------------------
 */

/* Set the severity color variable on the control itself. */
.mud-input-control.vld-severity-warning { --vld-severity-color: var(--mud-palette-warning); }
.mud-input-control.vld-severity-info    { --vld-severity-color: var(--mud-palette-info); }

/* ---------------------------------------------------------------
 * Labels
 * --------------------------------------------------------------- */
.mud-input-control.vld-severity-warning.mud-input-error .mud-input-label,
.mud-input-control.vld-severity-warning.mud-input-error .mud-input-label-inputcontrol,
.mud-input-control.vld-severity-warning.mud-input-error .mud-input-label.mud-input-error,
.mud-input-control.vld-severity-warning.mud-input-error .mud-input-label-inputcontrol.mud-input-error,
.mud-input-control.vld-severity-info.mud-input-error .mud-input-label,
.mud-input-control.vld-severity-info.mud-input-error .mud-input-label-inputcontrol,
.mud-input-control.vld-severity-info.mud-input-error .mud-input-label.mud-input-error,
.mud-input-control.vld-severity-info.mud-input-error .mud-input-label-inputcontrol.mud-input-error {
    color: var(--vld-severity-color) !important;
}

/* ---------------------------------------------------------------
 * Icons and mud-error-text elements (SVGs, helper text children)
 * --------------------------------------------------------------- */
.mud-input-control.vld-severity-warning .mud-error-text,
.mud-input-control.vld-severity-info    .mud-error-text {
    color: var(--vld-severity-color) !important;
    fill:  var(--vld-severity-color) !important;
}

/* ---------------------------------------------------------------
 * Helper text row (the inline message). Even when hidden via
 * SuppressInlineMessage, if somehow visible these should be colored.
 * --------------------------------------------------------------- */
.mud-input-control.vld-severity-warning .mud-input-helper-text.mud-input-error,
.mud-input-control.vld-severity-info    .mud-input-helper-text.mud-input-error {
    color: var(--vld-severity-color) !important;
}

/* ---------------------------------------------------------------
 * Outer container pseudo-element underlines (filled variant)
 * --------------------------------------------------------------- */
.mud-input-control.vld-severity-warning.mud-input-error::before,
.mud-input-control.vld-severity-warning.mud-input-error::after,
.mud-input-control.vld-severity-info.mud-input-error::before,
.mud-input-control.vld-severity-info.mud-input-error::after {
    border-color: var(--vld-severity-color) !important;
}

/* ---------------------------------------------------------------
 * Outlined variant <fieldset> border
 * --------------------------------------------------------------- */
.mud-input-control.vld-severity-warning.mud-input-error fieldset,
.mud-input-control.vld-severity-info.mud-input-error    fieldset {
    border-color: var(--vld-severity-color) !important;
}

/* ---------------------------------------------------------------
 * Inner .mud-input ::before/::after underlines (autocomplete, text variants)
 * --------------------------------------------------------------- */
.mud-input-control.vld-severity-warning .mud-input.mud-input-error::before,
.mud-input-control.vld-severity-warning .mud-input.mud-input-error::after,
.mud-input-control.vld-severity-info    .mud-input.mud-input-error::before,
.mud-input-control.vld-severity-info    .mud-input.mud-input-error::after {
    border-bottom-color: var(--vld-severity-color) !important;
    border-color:        var(--vld-severity-color) !important;
}

/* ---------------------------------------------------------------
 * ValidationInlineMessage helper-text rows
 *
 * The component adds vld-helper-warning / vld-helper-info directly on each
 * message row so they can be colored individually (a field can have both a
 * Warning and an Info failure).
 * --------------------------------------------------------------- */
.vld-helper-warning {
    color: var(--mud-palette-warning) !important;
}

.vld-helper-info {
    color: var(--mud-palette-info) !important;
}

/* ---------------------------------------------------------------
 * Subtle, harmonious panel borders & dividers
 * --------------------------------------------------------------- */
.border-b {
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.08)) !important;
}

.border-t {
    border-top: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.08)) !important;
}

.border-l {
    border-left: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.08)) !important;
}

.border-r {
    border-right: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.08)) !important;
}

.border {
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.08)) !important;
}

/* ---------------------------------------------------------------
 * Documentation Workspace Resizer Bar
 * --------------------------------------------------------------- */
.split-resizer-bar {
    transition: background-color 0.15s ease;
}
.split-resizer-bar:hover, .split-resizer-bar:active {
    background-color: rgba(var(--mud-palette-primary-rgb, 92, 107, 192), 0.12);
}
.split-resizer-bar:hover .resizer-handle, .split-resizer-bar:active .resizer-handle {
    background-color: var(--mud-palette-primary) !important;
    width: 6px !important;
}