/** MEDIA BREAKS **/
/*   see: https://blazor.radzen.com/breakpoints 
        xs - Extra Small >= 576px
        sm - Small >= 768px
        md - Medium >= 1024px
        lg - Large >= 1280px
        xl - Extra Large >= 1920px
        xx - Extra Extra Large >= 2560px
    */

/** BLAZOR **/
#blazor-error-ui {
    background: lightyellow;
    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;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

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

/** RADZEN **/
.rz-row:not(:last-child) {
    margin-bottom: 0.75rem;
}
.rz-notification {
    position: fixed;
    bottom: 0px;
    right: 0px;
    left: 0px; 
    top: unset;
}
.rz-notification-item-wrapper {
    width: unset;
}

.rz-button.sc-icon-button {
    padding-bottom: 0;
}

/** RADZEN POPUP HARDENING
    Radzen's closePopup JS (Radzen.Blazor.js) does not set display:none
    synchronously — it registers popup.onanimationend = () =>
    popup.style.display = 'none' and adds .rz-close to trigger a CSS
    animation. Two things must happen: (1) the popup must visually
    disappear, and (2) onanimationend must fire, because togglePopup()
    reads popup.style.display (inline style, not computed) to decide
    whether the next click on the trigger should open or close. If the
    inline style isn't reset to 'none', the dropdown looks closed but
    cannot be reopened.

    Any consumer rule that suppresses CSS animations (a global
    `* { animation: none !important }` inside a prefers-reduced-motion
    media query, an ad-blocker stylesheet, Chrome devtools' "Emulate
    prefers-reduced-motion" toggle, etc.) breaks step (2). The naive fix
    `.rz-close { display: none !important }` solves (1) but breaks (2)
    because display:none prevents any animation.

    Hide via visibility, then force a guaranteed 1ms close animation
    that always fires onanimationend — beating any consumer animation
    suppression on specificity. !important is required to override
    Radzen's own animation rules. **/
.rz-popup.rz-close,
.rz-dropdown-panel.rz-close {
    visibility: hidden !important;
    pointer-events: none !important;
    animation: sc-rz-popup-close 1ms linear forwards !important;
}

@keyframes sc-rz-popup-close {
    from { opacity: 0; }
    to   { opacity: 0; }
}

/** ICON BUTTON CONTENT LAYOUT **/
.sc-icon-button-content {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.sc-icon-pos-left {
    flex-direction: row;
}

.sc-icon-pos-right {
    flex-direction: row-reverse;
}

.sc-icon-pos-top {
    flex-direction: column;
}

.sc-icon-pos-bottom {
    flex-direction: column-reverse;
}

/** COMMON **/
.sc-label {
    font-weight: bold;
}

/** MEDIA QUERIES **/
.sc-mobile {
}

.sc-tablet {
}

.sc-desktop {
}

/** BODY PADDING **/
.sc-remove-body-padding { }

/* allows list-details to take the whole page */
.rz-body:has(.sc-remove-body-padding) {
    padding: 0;
}

/** PROFILE IMAGE **/
.sc-profile-image {
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sc-profile-image-sm {
    width: 32px;
    height: 32px;
}

.sc-profile-image-md {
    width: 48px;
    height: 48px;
}

.sc-profile-image-lg {
    width: 80px;
    height: 80px;
}

.sc-profile-image-xl {
    width: 128px;
    height: 128px;
}

.sc-profile-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sc-profile-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e0e0e0;
    color: #757575;
    border-radius: 50%;
}

.sc-profile-image-sm .sc-profile-image-placeholder {
    font-size: 16px;
}

.sc-profile-image-md .sc-profile-image-placeholder {
    font-size: 22px;
}

.sc-profile-image-lg .sc-profile-image-placeholder {
    font-size: 36px;
}

.sc-profile-image-xl .sc-profile-image-placeholder {
    font-size: 56px;
}

/** CAPTIONED TEXT **/
.sc-captioned-text .rz-text-caption {
    margin-bottom: 0;
}

/** BUSY **/
.sc-loading-outer {
    position: relative;
}

.sc-loading-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-loading-cover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255,255,255,0.75);
    z-index: 999;
}

.sc-loading-spinner {
    border: 16px solid silver;
    border-top: 16px solid #337AB7;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 700ms linear infinite;
}

.sc-preload-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(255,255,255,0.75);
    z-index: 999;
}

.sc-preload-spinner {
    position: absolute;
    left: calc(50vw-40px);
    top: calc(50vw-40px);
    border: 16px solid silver;
    border-top: 16px solid #337AB7;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 700ms linear infinite;
}


/** SIDEBAR LEAVES **/
.sc-sidebar-leaf-group {
    display: flex;
    flex-direction: column;
}

.sc-sidebar-leaf {
    display: flex;
    align-items: center;
    padding: 0.375rem 1rem 0.375rem 2.75rem;
    font-size: 0.85rem;
    transition: background-color 0.2s;
}

.sc-sidebar-leaf:hover {
    background: rgba(0, 0, 0, 0.04);
}



.sc-sidebar-leaf-link {
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.sc-sidebar-leaf-text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-sidebar-leaf-close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.125rem 0.25rem;
    margin-left: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s;
    font-size: 0.75rem;
    color: inherit;
}

.sc-sidebar-leaf:hover .sc-sidebar-leaf-close {
    opacity: 0.5;
}

.sc-sidebar-leaf .sc-sidebar-leaf-close:hover {
    opacity: 1;
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

/** SCROLLABLE LIST PANE
    Companion CSS for BaseListPane / BaseFullListContainer /
    BaseListActionBar / BaseListFilterBar. Provides the structural
    bones for a full-page virtualized list:

      .sc-list-pane              outer flex column, owns 100% height
        ├ (filter / search rows)    normal flow children
        ├ .sc-list-pane__body    flex:1, scrolls, hosts <Virtualize>
        └ .sc-list-pane__footer  flex-shrink:0, action bar pinned bottom

    Pure layout — no colors, no borders, no breakpoints. Consumer CSS
    layers decoration via per-entity classes (e.g. .items-action-bar
    for background + border + breakpoint refinements). **/
.sc-list-pane {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.sc-list-pane__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.sc-list-pane__footer {
    flex-shrink: 0;
}