.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

/* Actor Card Styles */
.actor-card-image {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
    display: block;
}

.vibe-placeholder {
    width: 100%;
    aspect-ratio: 2 / 3;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 8px 8px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

#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 .reload {
        display: none;
    }

.dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Modernized borderless Nav Menu elements */
fluent-nav-menu, .fluent-nav-menu, [role="navigation"] {
    background: var(--geek-nav-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    border-right: var(--glass-border) !important;
    
    /* Override internal Fluent UI shadow DOM token variables for borderless links */
    --neutral-fill-stealth-rest: transparent !important;
    --neutral-fill-stealth-hover: rgba(255, 255, 255, 0.04) !important;
    --neutral-fill-stealth-active: var(--glass-active-bg) !important;
    --neutral-fill-stealth-selected: var(--glass-active-bg) !important;
    --neutral-fill-hover: rgba(255, 255, 255, 0.04) !important;
    --neutral-fill-rest: transparent !important;
}

fluent-nav-link, fluent-nav-group {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: var(--theme-border-radius-control, 6px) !important;
}

fluent-nav-link::part(link), fluent-nav-group::part(header) {
    background-color: transparent !important;
    background: transparent !important;
    border-radius: var(--theme-border-radius-control, 6px) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    padding-left: 12px !important; /* Inner padding for 16px total logo alignment */
}

/* Control nested sub-items indentation */
fluent-nav-group::part(items) {
    padding-inline-start: 16px !important;
}

fluent-nav-link::part(link):hover, fluent-nav-group::part(header):hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: white !important;
}

/* Active navigation item styling: Left Neon Border and purple hint */
fluent-nav-link[active], .fluent-nav-link[active], .nav-link.active, [role="navigation"] .active {
    background: var(--glass-active-bg) !important;
    border-left: 3px solid var(--nav-active-border) !important;
    border-radius: 0 var(--theme-border-radius-control, 6px) var(--theme-border-radius-control, 6px) 0 !important;
    color: var(--nav-active-color) !important;
    font-weight: 700 !important;
}

/* EasyData Dark Theme styling for lists, tables, grid headers and dialogs */
#EasyDataContainer,
.ed-root,
.ed-root-container,
.ed-container,
.ed-entities-block,
.ed-records-block,
.ed-grid-panel,
.ed-toolbar,
.easy-data-view, 
.ed-menu, 
.ed-grid, 
.ed-list-group,
.ed-list-group-item, 
.list-group-item, 
.table, 
.card, 
.modal-content, 
.ed-dialog,
.ed-dialog-body,
.ed-dialog-footer,
.keg-root,
.keg-container,
.keg-header,
.keg-row,
.keg-row-odd,
.kdlg-modal-window,
.kdlg-header,
.kdlg-body,
.kdlg-footer,
.ed-entity-item {
    background-color: #0a0514 !important;
    background: #0a0514 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(138, 43, 226, 0.2) !important;
}

/* Row states */
.keg-row-odd {
    background-color: rgba(255, 255, 255, 0.02) !important;
}
.keg-row:hover, .keg-row-odd:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}
.keg-row-active, .keg-row-active:hover {
    background-color: rgba(138, 43, 226, 0.2) !important;
    color: #00FFF0 !important;
}

/* Ensure all text inside table cells, lists and dropdowns is clearly visible */
.table td, .table th, 
.ed-grid td, .ed-grid th, 
.keg-cell, .keg-header-cell,
.list-group-item, .ed-menu-title, 
.ed-dialog-title, .modal-title, 
.keg-page-info, .keg-page-info > span,
.keg-page-sizes-label,
.ed-entity-item-caption,
.ed-entity-item-descr,
.kdlg-header-title,
label {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Ensure table headers are styled and readable */
.keg-header-row {
    background-color: rgba(138, 43, 226, 0.15) !important;
    border-bottom: 2px solid rgba(138, 43, 226, 0.3) !important;
}
.keg-header-cell {
    color: #00FFF0 !important;
    font-weight: 700 !important;
}

/* Entity items list sidebar */
.ed-entity-item {
    border-bottom: 1px solid rgba(138, 43, 226, 0.2) !important;
}
.ed-entity-item:hover {
    background-color: rgba(138, 43, 226, 0.15) !important;
    color: #00FFF0 !important;
}

/* Pagination links styling */
.keg-page-link {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(138, 43, 226, 0.3) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}
.keg-page-link:hover {
    background-color: rgba(138, 43, 226, 0.2) !important;
    border-color: #00FFF0 !important;
    color: #00FFF0 !important;
}
.keg-page-item.active > .keg-page-link {
    background-color: rgba(138, 43, 226, 0.3) !important;
    border-color: #00FFF0 !important;
    color: #00FFF0 !important;
}
.keg-page-item.disabled > .keg-page-link {
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(138, 43, 226, 0.1) !important;
}

/* Dialog and inputs text color correction */
.ed-dialog input, .ed-dialog select, .ed-dialog textarea, 
.modal-content input, .modal-content select,
.keg-page-sizes-select, .kfrm-form input, .kfrm-form textarea, .kfrm-select select {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: white !important;
    border: 1px solid rgba(138, 43, 226, 0.3) !important;
}

/* Buttons correction */
.kfrm-button {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(138, 43, 226, 0.3) !important;
    color: white !important;
}
.kfrm-button:hover {
    background-color: rgba(138, 43, 226, 0.2) !important;
    border-color: #00FFF0 !important;
    color: #00FFF0 !important;
}

/* Color Admin settings icons to distinguish them */
.admin-nav-item::part(link),
.admin-nav-item::part(control) {
    color: #FFB900 !important; /* Premium Gold color override */
}

fluent-button {
    --accent-fill-rest: var(--geek-accent) !important;
    --accent-fill-hover: var(--geek-accent-light) !important;
    --neutral-fill-rest: rgba(255, 255, 255, 0.05) !important;
    --neutral-fill-hover: rgba(255, 255, 255, 0.1) !important;
}

/* ============================================================
   TOAST NOTIFICATIONS OVERRIDES (Studio Host Specific)
   ============================================================ */

/* Ensure Fluent UI Blazor Toasts are layered above all layouts, modals, overlays, and dialogs, and hover/layout correctly */
fluent-toast-provider,
.fluent-toast-provider,
fluent-toast-container,
.fluent-toast-container {
    position: fixed !important;
    top: 24px !important;
    right: 24px !important;
    z-index: 20000 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    pointer-events: none !important;
    width: auto !important;
    height: auto !important;
}

@keyframes toast-slide-in {
    from {
        opacity: 0;
        transform: translateX(45px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toast-fade-out {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(35px) scale(0.95);
    }
}

.toast-dismissing {
    animation: toast-fade-out 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    pointer-events: none !important;
}


/* Style the toast card. Target both custom element tag names and class wrappers for v4/v5 compatibility */
fluent-toast,
.fluent-toast,
fluent-toast-b,
.fluent-toast-b {
    pointer-events: auto !important;
    z-index: 20000 !important;
    
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    min-width: 320px !important;
    max-width: 450px !important;
    width: auto !important;

    background-color: var(--geek-dark-bg) !important;
    background: var(--geek-dark-bg) !important;
    backdrop-filter: var(--glass-blur-value) !important;
    border: var(--glass-border) !important;
    border-left: 4px solid var(--info-color, #0078d4) !important;
    border-radius: var(--theme-border-radius-card, 8px) !important;
    box-shadow: var(--theme-box-shadow-card) !important;
    color: #ffffff !important;
    font-family: var(--theme-font-family) !important;
    animation: toast-slide-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Fallback / Shadow DOM part override for backwards compatibility with v4 */
fluent-toast::part(control) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    min-width: 320px !important;
    max-width: 450px !important;
    width: auto !important;
    
    background-color: var(--geek-dark-bg) !important;
    background: var(--geek-dark-bg) !important;
    backdrop-filter: var(--glass-blur-value) !important;
    border: var(--glass-border) !important;
    border-left: 4px solid var(--info-color, #0078d4) !important;
    border-radius: var(--theme-border-radius-card, 8px) !important;
    box-shadow: var(--theme-box-shadow-card) !important;
    color: #ffffff !important;
    animation: toast-slide-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Push the close/dismiss button to the far right inside the flex container */
fluent-toast div[slot="title"],
fluent-toast-b div[slot="title"],
.fluent-toast div[slot="title"] {
    flex-grow: 1 !important;
    margin-right: 8px !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
}

/* Ensure close button aligns and highlights on hover */
.fluent-toast-provider fluent-button,
.fluent-toast-provider button,
fluent-toast-b fluent-button,
fluent-toast fluent-button {
    cursor: pointer !important;
    opacity: 0.65 !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.fluent-toast-provider fluent-button:hover,
.fluent-toast-provider button:hover,
fluent-toast-b fluent-button:hover,
fluent-toast fluent-button:hover {
    opacity: 1 !important;
    transform: scale(1.05) !important;
}

/* Ensure FluentStack or slot elements within the toast align horizontally and do not wrap */
.fluent-toast fluent-stack,
.fluent-toast .fluent-stack,
fluent-toast-b fluent-stack,
fluent-toast-b .fluent-stack {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Color-coded left-accent borders based on toast intents (supporting class, tags & intent attributes) */
fluent-toast.success,
.fluent-toast.success,
fluent-toast-b.success,
.fluent-toast-b.success,
fluent-toast[intent="success"],
.fluent-toast[intent="success"],
fluent-toast-b[intent="success"],
.fluent-toast-b[intent="success"],
fluent-toast.success::part(control),
.fluent-toast.success::part(control),
fluent-toast[intent="success"]::part(control),
.fluent-toast[intent="success"]::part(control) {
    border-left-color: var(--success-color, #107c41) !important;
}

fluent-toast.error,
.fluent-toast.error,
fluent-toast-b.error,
.fluent-toast-b.error,
fluent-toast[intent="error"],
.fluent-toast[intent="error"],
fluent-toast-b[intent="error"],
.fluent-toast-b[intent="error"],
fluent-toast.error::part(control),
.fluent-toast.error::part(control),
fluent-toast[intent="error"]::part(control),
.fluent-toast[intent="error"]::part(control) {
    border-left-color: var(--error-color, #EA00D9) !important;
}

fluent-toast.warning,
.fluent-toast.warning,
fluent-toast-b.warning,
.fluent-toast-b.warning,
fluent-toast[intent="warning"],
.fluent-toast[intent="warning"],
fluent-toast-b[intent="warning"],
.fluent-toast-b[intent="warning"],
fluent-toast.warning::part(control),
.fluent-toast.warning::part(control),
fluent-toast[intent="warning"]::part(control),
.fluent-toast[intent="warning"]::part(control) {
    border-left-color: var(--warning-color, #d83b01) !important;
}

fluent-toast.info,
.fluent-toast.info,
fluent-toast-b.info,
.fluent-toast-b.info,
fluent-toast[intent="info"],
.fluent-toast[intent="info"],
fluent-toast-b[intent="info"],
.fluent-toast-b[intent="info"],
fluent-toast.info::part(control),
.fluent-toast.info::part(control),
fluent-toast[intent="info"]::part(control),
.fluent-toast[intent="info"]::part(control) {
    border-left-color: var(--info-color, #0078d4) !important;
}