@import '_content/Docizr.Shared/Docizr.Shared.jxayc8e3ws.bundle.scp.css';

/* /Components/Documents/DocumentCard.razor.rz.scp.css */
/* DocumentCard Component Styles - Enhanced with Design System
 * Interactive document cards using comprehensive design system tokens
 */

.document-card[b-sabrvyahp2] {
    cursor: pointer;
    transition: var(--dz-transition-transform), var(--dz-transition-shadow);
    border-radius: var(--dz-radius-lg);
    background-color: var(--dz-card-bg);
    border: 1px solid var(--dz-card-border);
    box-shadow: var(--dz-shadow-sm);
    overflow: hidden;
}

.document-card:hover[b-sabrvyahp2] {
    transform: translateY(-2px);
    box-shadow: var(--dz-shadow-lg);
    border-color: var(--dz-border-focus);
}

.document-card:focus-visible[b-sabrvyahp2] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

.document-card .card[b-sabrvyahp2] {
    border: none;
    background-color: transparent;
    transition: var(--dz-transition-colors);
    border-radius: 0;
}

/* Card Header */
.document-card .card-header[b-sabrvyahp2] {
    background-color: var(--dz-bg-secondary);
    border-bottom: 1px solid var(--dz-border-secondary);
    padding: var(--dz-space-3) var(--dz-space-4);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.document-card .card-title[b-sabrvyahp2] {
    color: var(--dz-text-primary);
    font-weight: var(--dz-font-weight-semibold);
    font-size: var(--dz-font-size-base);
    line-height: var(--dz-line-height-tight);
    margin: 0;
    flex: 1;
    font-family: var(--dz-font-sans);
}

.document-type-badge[b-sabrvyahp2] {
    font-size: var(--dz-font-size-lg);
    flex-shrink: 0;
    opacity: 0.8;
    margin-left: var(--dz-space-2);
    color: var(--dz-text-accent);
}

/* Card Body */
.document-card .card-body[b-sabrvyahp2] {
    padding: var(--dz-space-4);
    background-color: var(--dz-card-bg);
}

.document-preview[b-sabrvyahp2] {
    color: var(--dz-text-secondary);
    font-size: var(--dz-font-size-sm);
    line-height: var(--dz-line-height-relaxed);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    min-height: calc(var(--dz-line-height-relaxed) * var(--dz-font-size-sm) * 3);
    margin-bottom: var(--dz-space-3);
    font-family: var(--dz-font-sans);
}

/* Document Metadata */
.document-metadata[b-sabrvyahp2] {
    border-top: 1px solid var(--dz-border-secondary);
    padding-top: var(--dz-space-3);
    margin-top: var(--dz-space-3);
}

.document-tags[b-sabrvyahp2] {
    margin-bottom: var(--dz-space-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--dz-space-1);
}

.document-tags .badge[b-sabrvyahp2] {
    font-size: var(--dz-font-size-xs);
    padding: var(--dz-space-0_5) var(--dz-space-1_5);
    border-radius: var(--dz-radius-full);
    font-weight: var(--dz-font-weight-medium);
    background-color: var(--dz-bg-tertiary);
    color: var(--dz-text-secondary);
    border: 1px solid var(--dz-border-secondary);
    font-family: var(--dz-font-sans);
}

/* Document Actions */
.document-actions[b-sabrvyahp2] {
    display: flex;
    gap: var(--dz-space-2);
    justify-content: flex-end;
    margin-top: var(--dz-space-3);
}

.document-actions .btn[b-sabrvyahp2] {
    padding: var(--dz-space-1) var(--dz-space-3);
    font-size: var(--dz-font-size-xs);
    border-radius: var(--dz-radius-md);
    transition: var(--dz-transition-colors), var(--dz-transition-transform);
    font-weight: var(--dz-font-weight-medium);
    font-family: var(--dz-font-sans);
}

.document-actions .btn:hover[b-sabrvyahp2] {
    transform: scale(1.05);
}

.document-actions .btn:focus-visible[b-sabrvyahp2] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

.document-actions .btn-primary[b-sabrvyahp2] {
    background-color: var(--dz-bg-accent);
    border-color: var(--dz-bg-accent);
    color: var(--dz-text-inverse);
}

.document-actions .btn-primary:hover[b-sabrvyahp2] {
    background-color: var(--dz-brand-primary-hover);
    border-color: var(--dz-brand-primary-hover);
}

.document-actions .btn-outline-secondary[b-sabrvyahp2] {
    background-color: transparent;
    border-color: var(--dz-border-primary);
    color: var(--dz-text-secondary);
}

.document-actions .btn-outline-secondary:hover[b-sabrvyahp2] {
    background-color: var(--dz-bg-tertiary);
    border-color: var(--dz-border-secondary);
    color: var(--dz-text-primary);
}

/* Collection Info */
.collection-info[b-sabrvyahp2] {
    border-top: 1px solid var(--dz-border-secondary);
    padding-top: var(--dz-space-2);
    margin-top: var(--dz-space-3);
}

.collection-info small[b-sabrvyahp2] {
    font-weight: var(--dz-font-weight-medium);
    color: var(--dz-text-muted);
    font-size: var(--dz-font-size-xs);
    font-family: var(--dz-font-sans);
}

.collection-name[b-sabrvyahp2] {
    color: var(--dz-text-accent);
    font-weight: var(--dz-font-weight-semibold);
}

/* Document Card States */

/* Loading state */
.document-card--loading[b-sabrvyahp2] {
    pointer-events: none;
    opacity: var(--dz-opacity-75);
    position: relative;
}

.document-card--loading[b-sabrvyahp2]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        var(--dz-bg-muted) 25%,
        var(--dz-border-secondary) 50%,
        var(--dz-bg-muted) 75%
    );
    background-size: 200% 100%;
    animation: shimmer-b-sabrvyahp2 var(--dz-duration-1000) infinite;
    z-index: var(--dz-z-10);
    border-radius: inherit;
}

@keyframes shimmer-b-sabrvyahp2 {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Selected state */
.document-card--selected[b-sabrvyahp2] {
    border-color: var(--dz-bg-accent);
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.25), var(--dz-shadow-md);
    transform: translateY(-1px);
}

.document-card--selected .card-header[b-sabrvyahp2] {
    background-color: var(--dz-bg-accent);
    color: var(--dz-text-inverse);
}

.document-card--selected .card-title[b-sabrvyahp2] {
    color: var(--dz-text-inverse);
}

.document-card--selected .document-type-badge[b-sabrvyahp2] {
    color: rgba(255, 255, 255, 0.9);
}

/* Error state */
.document-card--error[b-sabrvyahp2] {
    border-color: var(--dz-danger-base);
    background-color: var(--dz-danger-light);
}

.document-card--error .card-header[b-sabrvyahp2] {
    background-color: var(--dz-danger-base);
    color: var(--dz-text-inverse);
}

/* Document type indicators */
.document-card[data-type="markdown"][b-sabrvyahp2] {
    border-left: 4px solid var(--dz-info-base);
}

.document-card[data-type="mermaid"][b-sabrvyahp2] {
    border-left: 4px solid var(--dz-success-base);
}

.document-card[data-type="adr"][b-sabrvyahp2] {
    border-left: 4px solid var(--dz-warning-base);
}

.document-card[data-type="mixed"][b-sabrvyahp2] {
    border-left: 4px solid var(--dz-danger-base);
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .document-card .card-header[b-sabrvyahp2] {
        padding: var(--dz-space-2) var(--dz-space-3);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--dz-space-1);
    }
    
    .document-card .card-body[b-sabrvyahp2] {
        padding: var(--dz-space-3);
    }
    
    .document-card .card-title[b-sabrvyahp2] {
        font-size: var(--dz-font-size-sm);
    }
    
    .document-preview[b-sabrvyahp2] {
        font-size: var(--dz-font-size-xs);
        -webkit-line-clamp: 2;
        min-height: calc(var(--dz-line-height-relaxed) * var(--dz-font-size-xs) * 2);
    }
    
    .document-actions[b-sabrvyahp2] {
        flex-direction: column;
        gap: var(--dz-space-1);
    }
    
    .document-actions .btn[b-sabrvyahp2] {
        width: 100%;
        text-align: center;
        padding: var(--dz-space-2) var(--dz-space-3);
    }
    
    .document-tags .badge[b-sabrvyahp2] {
        font-size: 0.65rem;
        padding: var(--dz-space-0_5) var(--dz-space-1);
    }
}

@media (max-width: 575.98px) {
    .document-card[b-sabrvyahp2] {
        margin-bottom: var(--dz-space-3);
    }
    
    .document-type-badge[b-sabrvyahp2] {
        font-size: var(--dz-font-size-base);
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .document-card[b-sabrvyahp2] {
        border-width: 2px;
    }
    
    .document-card:hover[b-sabrvyahp2] {
        border-width: 3px;
    }
    
    .document-actions .btn[b-sabrvyahp2] {
        border-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .document-card[b-sabrvyahp2] {
        transition: none;
    }
    
    .document-card:hover[b-sabrvyahp2] {
        transform: none;
    }
    
    .document-card--loading[b-sabrvyahp2]::before {
        animation: none;
        background: var(--dz-bg-muted);
    }
    
    .document-actions .btn:hover[b-sabrvyahp2] {
        transform: none;
    }
}

/* Print styles */
@media print {
    .document-card[b-sabrvyahp2] {
        break-inside: avoid;
        transform: none !important;
        box-shadow: none !important;
        border: 1px solid #000 !important;
        background-color: white !important;
    }
    
    .document-actions[b-sabrvyahp2] {
        display: none !important;
    }
    
    .document-card .card-header[b-sabrvyahp2] {
        background-color: #f5f5f5 !important;
        color: #000 !important;
    }
    
    .document-preview[b-sabrvyahp2],
    .document-metadata[b-sabrvyahp2] {
        color: #000 !important;
    }
}

/* Performance optimizations */
.document-card[b-sabrvyahp2] {
    contain: layout style paint;
}

.document-card--loading[b-sabrvyahp2]::before {
    will-change: background-position;
}

.document-actions .btn[b-sabrvyahp2] {
    will-change: transform;
}

/* Accessibility enhancements */
.document-card[role="button"][b-sabrvyahp2] {
    /* Already has cursor: pointer */
}

.document-card[aria-pressed="true"][b-sabrvyahp2] {
    /* Selected state styling already applied via modifier class */
}

/* Status indicators */
.document-status[b-sabrvyahp2] {
    position: absolute;
    top: var(--dz-space-2);
    right: var(--dz-space-2);
    width: var(--dz-space-2);
    height: var(--dz-space-2);
    border-radius: var(--dz-radius-full);
    z-index: var(--dz-z-10);
}

.document-status--draft[b-sabrvyahp2] {
    background-color: var(--dz-warning-base);
}

.document-status--published[b-sabrvyahp2] {
    background-color: var(--dz-success-base);
}

.document-status--archived[b-sabrvyahp2] {
    background-color: var(--dz-text-muted);
}
/* /Components/Documents/DocumentList.razor.rz.scp.css */
/* DocumentList Component Styles - Enhanced with Design System
 * Document listing and management using comprehensive design system tokens
 */

.document-list[b-qy0nu7c4b5] {
    min-height: 400px;
    font-family: var(--dz-font-sans);
    background: var(--dz-card-bg);
    border-radius: var(--dz-radius-lg);
    border: 1px solid var(--dz-card-border);
    box-shadow: var(--dz-shadow-sm);
    overflow: hidden;
    transition: var(--dz-transition-colors);
}

/* Loading placeholders */
.loading-placeholder[b-qy0nu7c4b5] {
    background-color: var(--dz-bg-secondary);
    border: 1px solid var(--dz-border-secondary);
    border-radius: var(--dz-radius-md);
    padding: var(--dz-space-4);
    margin-bottom: var(--dz-space-3);
    animation: dz-pulse-b-qy0nu7c4b5 var(--dz-duration-2000) infinite ease-in-out;
}

.loading-title[b-qy0nu7c4b5] {
    height: var(--dz-space-4);
    background-color: var(--dz-bg-muted);
    border-radius: var(--dz-radius-sm);
    width: 70%;
    margin-bottom: var(--dz-space-2);
}

.loading-text[b-qy0nu7c4b5] {
    height: var(--dz-space-3);
    background-color: var(--dz-border-secondary);
    border-radius: var(--dz-radius-sm);
    margin-bottom: var(--dz-space-1);
}

.loading-text:nth-child(2)[b-qy0nu7c4b5] {
    width: 90%;
}

.loading-text:nth-child(3)[b-qy0nu7c4b5] {
    width: 85%;
}

.loading-text:last-of-type[b-qy0nu7c4b5] {
    width: 75%;
}

.loading-tags[b-qy0nu7c4b5] {
    height: var(--dz-space-2);
    background-color: var(--dz-border-muted);
    border-radius: var(--dz-radius-full);
    width: 50%;
    margin-top: var(--dz-space-2);
}

@keyframes dz-pulse-b-qy0nu7c4b5 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 1;
    }
}

/* List header */
.document-list-header[b-qy0nu7c4b5] {
    padding: var(--dz-space-4) var(--dz-space-6);
    background: var(--dz-bg-tertiary);
    border-bottom: 1px solid var(--dz-border-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.document-list-title[b-qy0nu7c4b5] {
    font-size: var(--dz-font-size-lg);
    font-weight: var(--dz-font-weight-semibold);
    color: var(--dz-text-primary);
    margin: 0;
}

.document-list-count[b-qy0nu7c4b5] {
    font-size: var(--dz-font-size-sm);
    color: var(--dz-text-muted);
    background: var(--dz-bg-primary);
    padding: var(--dz-space-1) var(--dz-space-2);
    border-radius: var(--dz-radius-full);
    border: 1px solid var(--dz-border-secondary);
}

.document-list-actions[b-qy0nu7c4b5] {
    display: flex;
    gap: var(--dz-space-2);
    align-items: center;
}

/* Empty state */
.document-list-empty[b-qy0nu7c4b5] {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--dz-space-8);
    text-align: center;
    background: var(--dz-bg-secondary);
    color: var(--dz-text-secondary);
}

.document-list-empty .empty-icon[b-qy0nu7c4b5] {
    font-size: var(--dz-font-size-6xl);
    color: var(--dz-text-muted);
    margin-bottom: var(--dz-space-4);
    opacity: 0.6;
}

.document-list-empty .empty-title[b-qy0nu7c4b5] {
    font-size: var(--dz-font-size-xl);
    font-weight: var(--dz-font-weight-semibold);
    color: var(--dz-text-primary);
    margin-bottom: var(--dz-space-2);
}

.document-list-empty .empty-message[b-qy0nu7c4b5] {
    font-size: var(--dz-font-size-sm);
    color: var(--dz-text-secondary);
    margin-bottom: var(--dz-space-4);
    max-width: 400px;
    line-height: var(--dz-line-height-relaxed);
}

.document-list-empty .empty-action[b-qy0nu7c4b5] {
    background-color: var(--dz-bg-accent);
    color: var(--dz-text-inverse);
    border: none;
    padding: var(--dz-space-3) var(--dz-space-6);
    border-radius: var(--dz-radius-md);
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-medium);
    cursor: pointer;
    transition: var(--dz-transition-colors);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--dz-space-2);
}

.document-list-empty .empty-action:hover[b-qy0nu7c4b5] {
    background-color: var(--dz-brand-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--dz-shadow-md);
}

/* Table view */
.document-list-table[b-qy0nu7c4b5] {
    padding: 0;
}

.document-list-table .table[b-qy0nu7c4b5] {
    background-color: var(--dz-card-bg);
    color: var(--dz-text-primary);
    border: none;
    margin-bottom: 0;
    font-size: var(--dz-font-size-sm);
}

.document-list-table .table thead th[b-qy0nu7c4b5] {
    background-color: var(--dz-bg-tertiary);
    border-bottom: 2px solid var(--dz-border-primary);
    border-top: none;
    font-weight: var(--dz-font-weight-semibold);
    color: var(--dz-text-primary);
    padding: var(--dz-space-3) var(--dz-space-4);
    font-size: var(--dz-font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--dz-letter-spacing-wide);
    position: sticky;
    top: 0;
    z-index: var(--dz-z-10);
}

.document-list-table .table tbody tr[b-qy0nu7c4b5] {
    border-top: 1px solid var(--dz-border-secondary);
    transition: var(--dz-transition-colors);
}

.document-list-table .table tbody td[b-qy0nu7c4b5] {
    padding: var(--dz-space-3) var(--dz-space-4);
    vertical-align: middle;
    border-top: 1px solid var(--dz-border-secondary);
}

.document-row[b-qy0nu7c4b5] {
    cursor: pointer;
    transition: var(--dz-transition-colors);
}

.document-row:hover[b-qy0nu7c4b5] {
    background-color: var(--dz-bg-secondary);
}

.document-row:focus-visible[b-qy0nu7c4b5] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

.document-row .document-title[b-qy0nu7c4b5] {
    font-weight: var(--dz-font-weight-semibold);
    color: var(--dz-text-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--dz-space-2);
}

.document-row .document-title:hover[b-qy0nu7c4b5] {
    color: var(--dz-text-accent);
    text-decoration: none;
}

.document-type-icon[b-qy0nu7c4b5] {
    width: var(--dz-space-4);
    height: var(--dz-space-4);
    flex-shrink: 0;
    opacity: 0.7;
}

.document-metadata[b-qy0nu7c4b5] {
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-muted);
    display: flex;
    flex-direction: column;
    gap: var(--dz-space-0_5);
}

.document-tags[b-qy0nu7c4b5] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dz-space-1);
}

.document-tag[b-qy0nu7c4b5] {
    font-size: var(--dz-font-size-xs);
    padding: var(--dz-space-0_5) var(--dz-space-1_5);
    border-radius: var(--dz-radius-full);
    background-color: var(--dz-bg-tertiary);
    color: var(--dz-text-secondary);
    border: 1px solid var(--dz-border-secondary);
    font-weight: var(--dz-font-weight-medium);
}

.document-actions[b-qy0nu7c4b5] {
    display: flex;
    gap: var(--dz-space-1);
    align-items: center;
}

.document-action-btn[b-qy0nu7c4b5] {
    background: none;
    border: 1px solid var(--dz-border-primary);
    color: var(--dz-text-secondary);
    padding: var(--dz-space-1) var(--dz-space-2);
    border-radius: var(--dz-radius-sm);
    font-size: var(--dz-font-size-xs);
    cursor: pointer;
    transition: var(--dz-transition-colors);
    font-family: var(--dz-font-sans);
}

.document-action-btn:hover[b-qy0nu7c4b5] {
    background-color: var(--dz-bg-secondary);
    border-color: var(--dz-border-focus);
    color: var(--dz-text-primary);
}

.document-action-btn:focus-visible[b-qy0nu7c4b5] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

.document-action-btn--primary[b-qy0nu7c4b5] {
    background-color: var(--dz-bg-accent);
    border-color: var(--dz-bg-accent);
    color: var(--dz-text-inverse);
}

.document-action-btn--primary:hover[b-qy0nu7c4b5] {
    background-color: var(--dz-brand-primary-hover);
    border-color: var(--dz-brand-primary-hover);
}

.document-action-btn--danger[b-qy0nu7c4b5] {
    border-color: var(--dz-danger-base);
    color: var(--dz-danger-base);
}

.document-action-btn--danger:hover[b-qy0nu7c4b5] {
    background-color: var(--dz-danger-base);
    color: var(--dz-text-inverse);
}

/* Pagination */
.document-list-pagination[b-qy0nu7c4b5] {
    padding: var(--dz-space-4) var(--dz-space-6);
    background: var(--dz-bg-tertiary);
    border-top: 1px solid var(--dz-border-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.document-list-pagination .pagination[b-qy0nu7c4b5] {
    margin-bottom: 0;
    gap: var(--dz-space-1);
}

.document-list-pagination .page-link[b-qy0nu7c4b5] {
    color: var(--dz-text-secondary);
    background-color: var(--dz-bg-primary);
    border: 1px solid var(--dz-border-primary);
    border-radius: var(--dz-radius-sm);
    padding: var(--dz-space-2) var(--dz-space-3);
    font-size: var(--dz-font-size-sm);
    transition: var(--dz-transition-colors);
    text-decoration: none;
    font-family: var(--dz-font-sans);
}

.document-list-pagination .page-link:hover[b-qy0nu7c4b5] {
    color: var(--dz-text-inverse);
    background-color: var(--dz-bg-accent);
    border-color: var(--dz-bg-accent);
    text-decoration: none;
}

.document-list-pagination .page-item.active .page-link[b-qy0nu7c4b5] {
    color: var(--dz-text-inverse);
    background-color: var(--dz-bg-accent);
    border-color: var(--dz-bg-accent);
}

.document-list-pagination .page-item.disabled .page-link[b-qy0nu7c4b5] {
    color: var(--dz-text-disabled);
    background-color: var(--dz-bg-muted);
    border-color: var(--dz-border-muted);
    cursor: not-allowed;
}

.pagination-info[b-qy0nu7c4b5] {
    font-size: var(--dz-font-size-sm);
    color: var(--dz-text-muted);
}

/* Filters and search */
.document-list-filters[b-qy0nu7c4b5] {
    padding: var(--dz-space-4) var(--dz-space-6);
    background: var(--dz-bg-secondary);
    border-bottom: 1px solid var(--dz-border-secondary);
    display: flex;
    gap: var(--dz-space-3);
    align-items: center;
    flex-wrap: wrap;
}

.document-search[b-qy0nu7c4b5] {
    flex: 1;
    min-width: 200px;
}

.document-search input[b-qy0nu7c4b5] {
    width: 100%;
    padding: var(--dz-space-2) var(--dz-space-3);
    border: 1px solid var(--dz-border-primary);
    border-radius: var(--dz-radius-md);
    background: var(--dz-bg-primary);
    color: var(--dz-text-primary);
    font-size: var(--dz-font-size-sm);
    transition: var(--dz-transition-colors);
}

.document-search input:focus[b-qy0nu7c4b5] {
    outline: none;
    border-color: var(--dz-border-focus);
    box-shadow: 0 0 0 3px var(--dz-focus-ring-color);
}

.document-filter[b-qy0nu7c4b5] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-2);
}

.document-filter-label[b-qy0nu7c4b5] {
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-medium);
    color: var(--dz-text-secondary);
}

.document-filter select[b-qy0nu7c4b5] {
    padding: var(--dz-space-2) var(--dz-space-3);
    border: 1px solid var(--dz-border-primary);
    border-radius: var(--dz-radius-md);
    background: var(--dz-bg-primary);
    color: var(--dz-text-primary);
    font-size: var(--dz-font-size-sm);
    cursor: pointer;
}

/* Grid view alternative */
.document-list-grid[b-qy0nu7c4b5] {
    padding: var(--dz-space-6);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--dz-space-4);
}

/* Responsive design */
@media (max-width: 767.98px) {
    .document-list-header[b-qy0nu7c4b5] {
        padding: var(--dz-space-3) var(--dz-space-4);
        flex-direction: column;
        gap: var(--dz-space-2);
        align-items: stretch;
    }
    
    .document-list-table .table[b-qy0nu7c4b5] {
        font-size: var(--dz-font-size-xs);
    }
    
    .document-list-table .table thead th[b-qy0nu7c4b5] {
        padding: var(--dz-space-2);
    }
    
    .document-list-table .table tbody td[b-qy0nu7c4b5] {
        padding: var(--dz-space-2);
    }
    
    .document-actions[b-qy0nu7c4b5] {
        flex-direction: column;
        gap: var(--dz-space-0_5);
    }
    
    .document-action-btn[b-qy0nu7c4b5] {
        width: 100%;
        text-align: center;
    }
    
    .document-list-pagination[b-qy0nu7c4b5] {
        padding: var(--dz-space-3) var(--dz-space-4);
        flex-direction: column;
        gap: var(--dz-space-3);
    }
    
    .document-list-pagination .pagination[b-qy0nu7c4b5] {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .document-list-filters[b-qy0nu7c4b5] {
        padding: var(--dz-space-3) var(--dz-space-4);
        flex-direction: column;
        align-items: stretch;
    }
    
    .document-filter[b-qy0nu7c4b5] {
        justify-content: space-between;
    }
}

@media (max-width: 575.98px) {
    /* Hide less important columns on mobile */
    .document-list-table .table th:nth-child(3)[b-qy0nu7c4b5],
    .document-list-table .table td:nth-child(3)[b-qy0nu7c4b5],
    .document-list-table .table th:nth-child(4)[b-qy0nu7c4b5],
    .document-list-table .table td:nth-child(4)[b-qy0nu7c4b5] {
        display: none;
    }
    
    .document-list-empty .empty-icon[b-qy0nu7c4b5] {
        font-size: var(--dz-font-size-5xl);
    }
    
    .document-list-grid[b-qy0nu7c4b5] {
        grid-template-columns: 1fr;
        padding: var(--dz-space-4);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .document-list[b-qy0nu7c4b5] {
        border-width: 2px;
    }
    
    .document-list-table .table thead th[b-qy0nu7c4b5] {
        border-bottom-width: 3px;
    }
    
    .document-action-btn[b-qy0nu7c4b5] {
        border-width: 2px;
    }
    
    .document-search input[b-qy0nu7c4b5] {
        border-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .loading-placeholder[b-qy0nu7c4b5] {
        animation: none;
    }
    
    .document-row[b-qy0nu7c4b5],
    .document-action-btn[b-qy0nu7c4b5],
    .page-link[b-qy0nu7c4b5],
    .document-search input[b-qy0nu7c4b5] {
        transition: none;
    }
    
    .document-list-empty .empty-action:hover[b-qy0nu7c4b5] {
        transform: none;
    }
}

/* Print styles */
@media print {
    .document-list-pagination[b-qy0nu7c4b5],
    .document-list-filters[b-qy0nu7c4b5],
    .document-actions[b-qy0nu7c4b5] {
        display: none !important;
    }
    
    .document-list[b-qy0nu7c4b5] {
        border: 1px solid #000;
        box-shadow: none;
        background: white;
    }
    
    .document-list-table .table[b-qy0nu7c4b5] {
        background-color: white !important;
        color: black !important;
    }
    
    .document-list-table .table thead th[b-qy0nu7c4b5] {
        background-color: #f5f5f5 !important;
        color: black !important;
        border-bottom: 2px solid #000 !important;
    }
    
    .document-row:hover[b-qy0nu7c4b5] {
        background-color: transparent !important;
    }
}

/* Performance optimizations */
.document-list[b-qy0nu7c4b5] {
    contain: layout style paint;
}

.document-list-table[b-qy0nu7c4b5] {
    contain: layout style;
}

.loading-placeholder[b-qy0nu7c4b5] {
    will-change: opacity;
}

/* Selection states */
.document-row.selected[b-qy0nu7c4b5] {
    background-color: var(--dz-bg-accent);
    color: var(--dz-text-inverse);
}

.document-row.selected .document-title[b-qy0nu7c4b5] {
    color: var(--dz-text-inverse);
}

.document-row.selected .document-metadata[b-qy0nu7c4b5] {
    color: rgba(255, 255, 255, 0.8);
}

/* Bulk actions */
.document-bulk-actions[b-qy0nu7c4b5] {
    padding: var(--dz-space-3) var(--dz-space-6);
    background: var(--dz-info-light);
    border-bottom: 1px solid var(--dz-info-base);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.document-bulk-actions .selected-count[b-qy0nu7c4b5] {
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-medium);
    color: var(--dz-info-dark);
}

.document-bulk-actions .bulk-actions[b-qy0nu7c4b5] {
    display: flex;
    gap: var(--dz-space-2);
}
/* /Components/Documents/SearchComponent.razor.rz.scp.css */
/* SearchComponent Styles - Enhanced with Design System
 * Advanced search interface using comprehensive design system tokens
 */

.search-component[b-yl46f66gqy] {
    padding: var(--dz-space-6);
    background-color: var(--dz-card-bg);
    border: 1px solid var(--dz-card-border);
    border-radius: var(--dz-radius-lg);
    margin-bottom: var(--dz-space-6);
    box-shadow: var(--dz-shadow-sm);
    font-family: var(--dz-font-sans);
    transition: var(--dz-transition-colors);
}

.search-component:focus-within[b-yl46f66gqy] {
    box-shadow: var(--dz-shadow-md);
    border-color: var(--dz-border-focus);
}

/* Search form header */
.search-header[b-yl46f66gqy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--dz-space-4);
    padding-bottom: var(--dz-space-3);
    border-bottom: 1px solid var(--dz-border-secondary);
}

.search-title[b-yl46f66gqy] {
    font-size: var(--dz-font-size-lg);
    font-weight: var(--dz-font-weight-semibold);
    color: var(--dz-text-primary);
    margin: 0;
}

.search-toggle[b-yl46f66gqy] {
    background: none;
    border: 1px solid var(--dz-border-primary);
    color: var(--dz-text-secondary);
    padding: var(--dz-space-1) var(--dz-space-2);
    border-radius: var(--dz-radius-sm);
    font-size: var(--dz-font-size-xs);
    cursor: pointer;
    transition: var(--dz-transition-colors);
}

.search-toggle:hover[b-yl46f66gqy] {
    background-color: var(--dz-bg-secondary);
    color: var(--dz-text-primary);
}

/* Search form inputs */
.search-form .input-group[b-yl46f66gqy] {
    margin-bottom: var(--dz-space-3);
}

.search-form .input-group-text[b-yl46f66gqy] {
    background-color: var(--dz-bg-tertiary);
    border-color: var(--dz-border-primary);
    color: var(--dz-text-secondary);
    font-size: var(--dz-font-size-sm);
    padding: var(--dz-space-2) var(--dz-space-3);
    border-right: none;
}

.search-form .form-control[b-yl46f66gqy],
.search-form .form-select[b-yl46f66gqy] {
    background-color: var(--dz-bg-primary);
    border-color: var(--dz-border-primary);
    color: var(--dz-text-primary);
    font-size: var(--dz-font-size-sm);
    padding: var(--dz-space-2) var(--dz-space-3);
    font-family: var(--dz-font-sans);
    transition: var(--dz-transition-colors);
}

.search-form .form-control:focus[b-yl46f66gqy],
.search-form .form-select:focus[b-yl46f66gqy] {
    background-color: var(--dz-bg-primary);
    border-color: var(--dz-border-focus);
    color: var(--dz-text-primary);
    box-shadow: 0 0 0 3px var(--dz-focus-ring-color);
    outline: none;
}

.search-form .form-control[b-yl46f66gqy]::placeholder {
    color: var(--dz-text-muted);
    font-style: italic;
}

/* Search input with icon */
.search-input-container[b-yl46f66gqy] {
    position: relative;
}

.search-input-icon[b-yl46f66gqy] {
    position: absolute;
    left: var(--dz-space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--dz-text-muted);
    font-size: var(--dz-font-size-sm);
    z-index: var(--dz-z-10);
}

.search-input-container .form-control[b-yl46f66gqy] {
    padding-left: var(--dz-space-10);
}

.search-clear-btn[b-yl46f66gqy] {
    position: absolute;
    right: var(--dz-space-2);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--dz-text-muted);
    cursor: pointer;
    padding: var(--dz-space-1);
    border-radius: var(--dz-radius-sm);
    transition: var(--dz-transition-colors);
    z-index: var(--dz-z-10);
}

.search-clear-btn:hover[b-yl46f66gqy] {
    color: var(--dz-text-secondary);
    background-color: var(--dz-bg-tertiary);
}

/* Search buttons */
.search-form .btn-outline-secondary[b-yl46f66gqy] {
    border-color: var(--dz-border-primary);
    color: var(--dz-text-secondary);
    background-color: transparent;
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-medium);
    padding: var(--dz-space-2) var(--dz-space-4);
    transition: var(--dz-transition-colors);
}

.search-form .btn-outline-secondary:hover[b-yl46f66gqy] {
    background-color: var(--dz-bg-secondary);
    border-color: var(--dz-border-secondary);
    color: var(--dz-text-primary);
}

.search-form .btn-primary[b-yl46f66gqy] {
    background-color: var(--dz-bg-accent);
    border-color: var(--dz-bg-accent);
    color: var(--dz-text-inverse);
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-medium);
    padding: var(--dz-space-2) var(--dz-space-4);
}

.search-form .btn-primary:hover[b-yl46f66gqy] {
    background-color: var(--dz-brand-primary-hover);
    border-color: var(--dz-brand-primary-hover);
}

.search-form .btn-primary:focus-visible[b-yl46f66gqy] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

/* Active filters */
.active-filters[b-yl46f66gqy] {
    padding-top: var(--dz-space-3);
    border-top: 1px solid var(--dz-border-secondary);
    margin-top: var(--dz-space-4);
}

.active-filters-title[b-yl46f66gqy] {
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-semibold);
    color: var(--dz-text-primary);
    margin-bottom: var(--dz-space-2);
}

.active-filters-list[b-yl46f66gqy] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dz-space-2);
}

.filter-badge[b-yl46f66gqy] {
    display: inline-flex;
    align-items: center;
    gap: var(--dz-space-1);
    background-color: var(--dz-info-light);
    color: var(--dz-info-dark);
    border: 1px solid var(--dz-info-base);
    border-radius: var(--dz-radius-full);
    padding: var(--dz-space-1) var(--dz-space-3);
    font-size: var(--dz-font-size-xs);
    font-weight: var(--dz-font-weight-medium);
}

.filter-badge-close[b-yl46f66gqy] {
    background: none;
    border: none;
    color: var(--dz-info-dark);
    cursor: pointer;
    padding: 0;
    width: var(--dz-space-3);
    height: var(--dz-space-3);
    border-radius: var(--dz-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--dz-transition-colors);
}

.filter-badge-close:hover[b-yl46f66gqy] {
    background-color: var(--dz-info-base);
    color: var(--dz-text-inverse);
}

.clear-all-filters[b-yl46f66gqy] {
    background: none;
    border: none;
    color: var(--dz-text-muted);
    font-size: var(--dz-font-size-xs);
    text-decoration: underline;
    cursor: pointer;
    padding: var(--dz-space-1) 0;
    transition: var(--dz-transition-colors);
}

.clear-all-filters:hover[b-yl46f66gqy] {
    color: var(--dz-text-secondary);
}

/* Search summary */
.search-summary[b-yl46f66gqy] {
    padding-top: var(--dz-space-2);
    font-size: var(--dz-font-size-sm);
    color: var(--dz-text-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search-results-count[b-yl46f66gqy] {
    font-weight: var(--dz-font-weight-medium);
    color: var(--dz-text-secondary);
}

.search-time[b-yl46f66gqy] {
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-muted);
}

/* Sort controls */
.sort-controls[b-yl46f66gqy] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-2);
    margin-top: var(--dz-space-3);
}

.sort-label[b-yl46f66gqy] {
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-medium);
    color: var(--dz-text-secondary);
}

.btn-group .btn-check:checked + .btn-outline-secondary[b-yl46f66gqy] {
    background-color: var(--dz-bg-accent);
    border-color: var(--dz-bg-accent);
    color: var(--dz-text-inverse);
}

.sort-direction-btn[b-yl46f66gqy] {
    background: none;
    border: 1px solid var(--dz-border-primary);
    color: var(--dz-text-secondary);
    padding: var(--dz-space-1) var(--dz-space-2);
    border-radius: var(--dz-radius-sm);
    cursor: pointer;
    transition: var(--dz-transition-colors);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sort-direction-btn:hover[b-yl46f66gqy] {
    background-color: var(--dz-bg-secondary);
    color: var(--dz-text-primary);
}

.sort-direction-btn.active[b-yl46f66gqy] {
    background-color: var(--dz-bg-accent);
    border-color: var(--dz-bg-accent);
    color: var(--dz-text-inverse);
}

/* Advanced search toggle */
.advanced-search-toggle[b-yl46f66gqy] {
    margin-top: var(--dz-space-4);
    padding-top: var(--dz-space-3);
    border-top: 1px solid var(--dz-border-secondary);
}

.advanced-search-content[b-yl46f66gqy] {
    margin-top: var(--dz-space-3);
    padding: var(--dz-space-4);
    background-color: var(--dz-bg-secondary);
    border-radius: var(--dz-radius-md);
    border: 1px solid var(--dz-border-secondary);
}

/* Loading state */
.search-component--loading[b-yl46f66gqy] {
    opacity: var(--dz-opacity-75);
    pointer-events: none;
    position: relative;
    overflow: hidden;
}

.search-component--loading[b-yl46f66gqy]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg, 
        transparent 25%, 
        rgba(255, 255, 255, 0.4) 50%, 
        transparent 75%
    );
    background-size: 200% 100%;
    animation: searching-b-yl46f66gqy var(--dz-duration-2000) infinite;
    z-index: var(--dz-z-10);
}

@keyframes searching-b-yl46f66gqy {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Search suggestions */
.search-suggestions[b-yl46f66gqy] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--dz-card-bg);
    border: 1px solid var(--dz-card-border);
    border-top: none;
    border-radius: 0 0 var(--dz-radius-md) var(--dz-radius-md);
    box-shadow: var(--dz-shadow-lg);
    max-height: 300px;
    overflow-y: auto;
    z-index: var(--dz-z-dropdown);
}

.search-suggestion[b-yl46f66gqy] {
    padding: var(--dz-space-2) var(--dz-space-3);
    cursor: pointer;
    border-bottom: 1px solid var(--dz-border-secondary);
    transition: var(--dz-transition-colors);
}

.search-suggestion:hover[b-yl46f66gqy] {
    background-color: var(--dz-bg-secondary);
}

.search-suggestion:last-child[b-yl46f66gqy] {
    border-bottom: none;
}

.search-suggestion-text[b-yl46f66gqy] {
    font-size: var(--dz-font-size-sm);
    color: var(--dz-text-primary);
}

.search-suggestion-type[b-yl46f66gqy] {
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-muted);
    margin-left: var(--dz-space-2);
}

/* Responsive design */
@media (max-width: 767.98px) {
    .search-component[b-yl46f66gqy] {
        padding: var(--dz-space-4);
        margin-bottom: var(--dz-space-4);
    }
    
    .search-header[b-yl46f66gqy] {
        flex-direction: column;
        gap: var(--dz-space-2);
        align-items: stretch;
    }
    
    .search-form .row > div[b-yl46f66gqy] {
        margin-bottom: var(--dz-space-3);
    }
    
    .search-form .row > div:last-child[b-yl46f66gqy] {
        margin-bottom: 0;
    }
    
    .active-filters[b-yl46f66gqy] {
        margin-top: var(--dz-space-3);
    }
    
    .filter-badge[b-yl46f66gqy] {
        font-size: 0.6875rem;
        margin-bottom: var(--dz-space-1);
    }
    
    .sort-controls[b-yl46f66gqy] {
        flex-wrap: wrap;
        gap: var(--dz-space-1);
    }
    
    .search-summary[b-yl46f66gqy] {
        flex-direction: column;
        gap: var(--dz-space-1);
        align-items: stretch;
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .search-component[b-yl46f66gqy] {
        padding: var(--dz-space-3);
    }
    
    .search-form .btn-group .btn[b-yl46f66gqy] {
        padding: var(--dz-space-1_5) var(--dz-space-2);
        font-size: var(--dz-font-size-xs);
    }
    
    .active-filters-list[b-yl46f66gqy] {
        flex-direction: column;
        gap: var(--dz-space-1);
    }
    
    .filter-badge[b-yl46f66gqy] {
        width: 100%;
        justify-content: space-between;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .search-component[b-yl46f66gqy] {
        border-width: 2px;
    }
    
    .search-form .form-control[b-yl46f66gqy],
    .search-form .form-select[b-yl46f66gqy],
    .search-form .btn-outline-secondary[b-yl46f66gqy] {
        border-width: 2px;
    }
    
    .filter-badge[b-yl46f66gqy] {
        border-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .search-component[b-yl46f66gqy],
    .search-form .form-control[b-yl46f66gqy],
    .search-form .form-select[b-yl46f66gqy],
    .search-form .btn-outline-secondary[b-yl46f66gqy],
    .filter-badge-close[b-yl46f66gqy],
    .search-suggestion[b-yl46f66gqy] {
        transition: none;
    }
    
    .search-component--loading[b-yl46f66gqy]::after {
        animation: none;
        background: rgba(255, 255, 255, 0.4);
    }
}

/* Print styles */
@media print {
    .search-component[b-yl46f66gqy] {
        display: none !important;
    }
}

/* Compact mode */
.search-component--compact[b-yl46f66gqy] {
    padding: var(--dz-space-4);
    margin-bottom: var(--dz-space-4);
}

.search-component--compact .search-header[b-yl46f66gqy] {
    margin-bottom: var(--dz-space-2);
    padding-bottom: var(--dz-space-2);
}

.search-component--compact .search-form .row[b-yl46f66gqy] {
    --bs-gutter-x: var(--dz-space-3);
}

.search-component--compact .active-filters[b-yl46f66gqy] {
    margin-top: var(--dz-space-2);
    padding-top: var(--dz-space-2);
}

/* Performance optimizations */
.search-component[b-yl46f66gqy] {
    contain: layout style paint;
}

.search-suggestions[b-yl46f66gqy] {
    contain: layout style;
}

.search-component--loading[b-yl46f66gqy]::after {
    will-change: background-position;
}
/* /Components/Editors/Canvas/CanvasDocumentWindow.razor.rz.scp.css */
/* Canvas Document Window Component Styles */

.document-window-content[b-gj2v4gas2j] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Document Tabs */
.document-tabs[b-gj2v4gas2j] {
    display: flex;
    background: var(--dz-bg-secondary);
    border-bottom: 1px solid var(--dz-border-primary);
    padding: 0;
    margin: 0;
}

.tab[b-gj2v4gas2j] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-1_5);
    padding: var(--dz-space-2) var(--dz-space-3);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--dz-text-secondary);
    font-size: var(--dz-font-size-sm);
    cursor: pointer;
    transition: var(--dz-transition-colors);
}

.tab:hover[b-gj2v4gas2j] {
    background: var(--dz-bg-tertiary);
    color: var(--dz-text-primary);
}

.tab.active[b-gj2v4gas2j] {
    background: var(--dz-bg-primary);
    color: var(--dz-brand-primary);
    border-bottom-color: var(--dz-brand-primary);
}

/* Tab Content */
.tab-content[b-gj2v4gas2j] {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.editor-pane[b-gj2v4gas2j],
.preview-pane[b-gj2v4gas2j] {
    overflow: hidden;
}

.editor-pane.full-width[b-gj2v4gas2j],
.preview-pane.full-width[b-gj2v4gas2j] {
    width: 100%;
}

.editor-pane.split-left[b-gj2v4gas2j] {
    width: 50%;
    border-right: 1px solid var(--dz-border-primary);
}

.preview-pane.split-right[b-gj2v4gas2j] {
    width: 50%;
}

/* Preview Content */
.preview-content[b-gj2v4gas2j] {
    padding: var(--dz-space-3);
    height: 100%;
    overflow: auto;
    background: var(--dz-bg-primary);
}

.empty-state[b-gj2v4gas2j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--dz-text-muted);
    text-align: center;
}

.empty-state i[b-gj2v4gas2j] {
    font-size: 2rem;
    margin-bottom: var(--dz-space-2);
    opacity: 0.5;
}

/* Document Status Bar */
.document-status-bar[b-gj2v4gas2j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--dz-space-1_5) var(--dz-space-3);
    background: var(--dz-bg-secondary);
    border-top: 1px solid var(--dz-border-primary);
    font-size: var(--dz-font-size-xs);
}

.status-left[b-gj2v4gas2j],
.status-right[b-gj2v4gas2j] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-3);
}

.status-item[b-gj2v4gas2j] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-1);
    color: var(--dz-text-secondary);
}

.status-item.unsaved[b-gj2v4gas2j] {
    color: var(--dz-warning-base);
}

.status-item.saved[b-gj2v4gas2j] {
    color: var(--dz-success-base);
}

.status-item i[b-gj2v4gas2j] {
    font-size: 0.75em;
}

/* Render Error */
.render-error[b-gj2v4gas2j] {
    color: var(--dz-danger-base);
    background: var(--dz-danger-bg);
    border: 1px solid var(--dz-danger-border);
    border-radius: var(--dz-radius-base);
    padding: var(--dz-space-2);
    margin: var(--dz-space-2);
}
/* /Components/Editors/Canvas/CanvasLayerPanel.razor.rz.scp.css */
/* Canvas Layer Panel Component Styles */

.layer-panel[b-l17fsvmhg2] {
    width: 260px;
    max-height: 500px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.layers-content[b-l17fsvmhg2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.layer-list[b-l17fsvmhg2] {
    flex: 1;
    overflow-y: auto;
    padding: var(--dz-space-2);
}

.no-layers[b-l17fsvmhg2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--dz-space-6);
    color: var(--dz-text-muted);
    text-align: center;
}

.no-layers i[b-l17fsvmhg2] {
    font-size: 2rem;
    margin-bottom: var(--dz-space-2);
    opacity: 0.5;
}

.no-layers .btn[b-l17fsvmhg2] {
    margin-top: var(--dz-space-2);
}

/* Layer Items */
.layer-item[b-l17fsvmhg2] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-2);
    padding: var(--dz-space-2);
    background: var(--dz-bg-secondary);
    border: 1px solid var(--dz-border-primary);
    border-radius: var(--dz-radius-base);
    margin-bottom: var(--dz-space-1);
    cursor: pointer;
    transition: var(--dz-transition-colors);
}

.layer-item:hover[b-l17fsvmhg2] {
    background: var(--dz-bg-tertiary);
    border-color: var(--dz-brand-primary);
}

.layer-item.selected[b-l17fsvmhg2] {
    background: var(--dz-brand-primary);
    color: white;
    border-color: var(--dz-brand-primary);
}

.layer-visibility[b-l17fsvmhg2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    border-radius: var(--dz-radius-sm);
    transition: var(--dz-transition-colors);
}

.layer-visibility:hover[b-l17fsvmhg2] {
    background: rgba(255, 255, 255, 0.1);
}

.layer-visibility.hidden[b-l17fsvmhg2] {
    opacity: 0.4;
}

.layer-icon[b-l17fsvmhg2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: inherit;
}

.layer-name[b-l17fsvmhg2] {
    flex: 1;
    font-size: var(--dz-font-size-sm);
    color: inherit;
}

.layer-name-input[b-l17fsvmhg2] {
    background: var(--dz-bg-primary);
    border: 1px solid var(--dz-border-primary);
    border-radius: var(--dz-radius-sm);
    padding: var(--dz-space-1);
    font-size: var(--dz-font-size-sm);
    color: var(--dz-text-primary);
    width: 100%;
}

.layer-z-index[b-l17fsvmhg2] {
    font-size: var(--dz-font-size-xs);
    color: inherit;
    opacity: 0.7;
    min-width: 20px;
    text-align: center;
}

.layer-actions[b-l17fsvmhg2] {
    display: flex;
    gap: var(--dz-space-1);
}

.layer-action-btn[b-l17fsvmhg2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    border-radius: var(--dz-radius-sm);
    transition: var(--dz-transition-colors);
}

.layer-action-btn:hover[b-l17fsvmhg2] {
    background: rgba(255, 255, 255, 0.1);
}

/* Layer Controls */
.layer-controls[b-l17fsvmhg2] {
    padding: var(--dz-space-2);
    border-top: 1px solid var(--dz-border-primary);
    background: var(--dz-bg-secondary);
}

.layer-control-row[b-l17fsvmhg2] {
    display: flex;
    gap: var(--dz-space-1);
    margin-bottom: var(--dz-space-1);
}

.layer-control-row:last-child[b-l17fsvmhg2] {
    margin-bottom: 0;
}

.layer-control-row .btn[b-l17fsvmhg2] {
    flex: 1;
    padding: var(--dz-space-1_5);
    font-size: var(--dz-font-size-xs);
    border-radius: var(--dz-radius-sm);
}

/* Layer Properties */
.layer-properties[b-l17fsvmhg2] {
    padding: var(--dz-space-2);
    border-top: 1px solid var(--dz-border-primary);
    background: var(--dz-bg-secondary);
}

.property-section-title[b-l17fsvmhg2] {
    font-size: var(--dz-font-size-xs);
    font-weight: var(--dz-font-weight-medium);
    color: var(--dz-text-primary);
    margin-bottom: var(--dz-space-2);
}

.property-row[b-l17fsvmhg2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dz-space-2);
    margin-bottom: var(--dz-space-2);
}

.property-row:last-child[b-l17fsvmhg2] {
    margin-bottom: 0;
}

.property-label[b-l17fsvmhg2] {
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-secondary);
    margin: 0;
}

.property-select[b-l17fsvmhg2],
.property-checkbox[b-l17fsvmhg2],
.property-range[b-l17fsvmhg2] {
    font-size: var(--dz-font-size-xs);
}

.property-select[b-l17fsvmhg2] {
    padding: var(--dz-space-1);
    background: var(--dz-bg-primary);
    border: 1px solid var(--dz-border-primary);
    border-radius: var(--dz-radius-sm);
    color: var(--dz-text-primary);
}

.property-checkbox[b-l17fsvmhg2] {
    width: 16px;
    height: 16px;
    accent-color: var(--dz-brand-primary);
}

.property-range[b-l17fsvmhg2] {
    flex: 1;
    margin: 0 var(--dz-space-1);
    accent-color: var(--dz-brand-primary);
}

.range-value[b-l17fsvmhg2] {
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-secondary);
    min-width: 40px;
    text-align: right;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .layer-panel[b-l17fsvmhg2] {
        width: 220px;
        max-height: 400px;
    }
    
    .layer-item[b-l17fsvmhg2] {
        padding: var(--dz-space-1_5);
        gap: var(--dz-space-1_5);
    }
    
    .layer-name[b-l17fsvmhg2] {
        font-size: var(--dz-font-size-xs);
    }
}
/* /Components/Editors/Canvas/CanvasPreviewWindow.razor.rz.scp.css */
/* Canvas Preview Window Component Styles */

.preview-window-content[b-6es6v8vggn] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Preview Controls */
.preview-controls[b-6es6v8vggn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--dz-space-2);
    background: var(--dz-bg-secondary);
    border-bottom: 1px solid var(--dz-border-primary);
    gap: var(--dz-space-2);
}

.control-group[b-6es6v8vggn] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-1);
}

.preview-controls .btn[b-6es6v8vggn] {
    padding: var(--dz-space-1) var(--dz-space-2);
    font-size: var(--dz-font-size-xs);
    border-radius: var(--dz-radius-sm);
}

.zoom-indicator[b-6es6v8vggn] {
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-secondary);
    min-width: 40px;
    text-align: center;
}

/* Preview Viewport */
.preview-viewport[b-6es6v8vggn] {
    flex: 1;
    overflow: auto;
    position: relative;
    background: var(--dz-bg-primary);
}

.rendered-content[b-6es6v8vggn],
.source-content[b-6es6v8vggn] {
    padding: var(--dz-space-3);
    min-height: 100%;
}

.source-content pre[b-6es6v8vggn] {
    margin: 0;
    background: transparent;
    border: none;
    padding: 0;
    font-family: var(--dz-font-mono);
    font-size: var(--dz-font-size-sm);
    line-height: 1.5;
    color: var(--dz-text-primary);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.empty-preview[b-6es6v8vggn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--dz-text-muted);
    text-align: center;
}

.empty-preview i[b-6es6v8vggn] {
    font-size: 2rem;
    margin-bottom: var(--dz-space-2);
    opacity: 0.5;
}

.empty-preview p[b-6es6v8vggn] {
    margin: var(--dz-space-1) 0;
    font-weight: var(--dz-font-weight-medium);
}

.empty-preview small[b-6es6v8vggn] {
    font-size: var(--dz-font-size-xs);
    opacity: 0.7;
}

/* Preview Status */
.preview-status[b-6es6v8vggn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--dz-space-1_5) var(--dz-space-3);
    background: var(--dz-bg-secondary);
    border-top: 1px solid var(--dz-border-primary);
    font-size: var(--dz-font-size-xs);
}

.status-left[b-6es6v8vggn],
.status-right[b-6es6v8vggn] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-3);
}

.status-item[b-6es6v8vggn] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-1);
    color: var(--dz-text-secondary);
}

.status-item.error[b-6es6v8vggn] {
    color: var(--dz-danger-base);
}

.status-item.success[b-6es6v8vggn] {
    color: var(--dz-success-base);
}

.status-item.loading[b-6es6v8vggn] {
    color: var(--dz-info-base);
}

.status-item i[b-6es6v8vggn] {
    font-size: 0.75em;
}

.status-item.loading i[b-6es6v8vggn] {
    animation: spin-b-6es6v8vggn 1s linear infinite;
}

@keyframes spin-b-6es6v8vggn {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* /Components/Editors/Canvas/CanvasPropertiesPanel.razor.rz.scp.css */
/* Canvas Properties Panel Component Styles */

.properties-panel[b-nnx63w2d27] {
    width: 280px;
    max-height: 600px;
    overflow-y: auto;
}

.properties-content[b-nnx63w2d27] {
    padding: 0;
}

.no-selection[b-nnx63w2d27] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--dz-space-6);
    color: var(--dz-text-muted);
    text-align: center;
}

.no-selection i[b-nnx63w2d27] {
    font-size: 2rem;
    margin-bottom: var(--dz-space-2);
    opacity: 0.5;
}

/* Property Sections */
.property-section[b-nnx63w2d27] {
    border-bottom: 1px solid var(--dz-border-secondary);
}

.section-header[b-nnx63w2d27] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-2);
    padding: var(--dz-space-3);
    background: var(--dz-bg-secondary);
}

.section-title[b-nnx63w2d27] {
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-medium);
    color: var(--dz-text-primary);
    margin: 0;
    padding: var(--dz-space-2) var(--dz-space-3);
    background: var(--dz-bg-secondary);
    border-bottom: 1px solid var(--dz-border-secondary);
}

/* Property Rows */
.property-row[b-nnx63w2d27] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--dz-space-2) var(--dz-space-3);
    border-bottom: 1px solid var(--dz-border-tertiary);
    gap: var(--dz-space-2);
}

.property-row:last-child[b-nnx63w2d27] {
    border-bottom: none;
}

.property-label[b-nnx63w2d27] {
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-secondary);
    min-width: 80px;
    margin: 0;
}

.property-input[b-nnx63w2d27],
.property-select[b-nnx63w2d27] {
    flex: 1;
    padding: var(--dz-space-1) var(--dz-space-1_5);
    background: var(--dz-bg-primary);
    border: 1px solid var(--dz-border-primary);
    border-radius: var(--dz-radius-sm);
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-primary);
    transition: var(--dz-transition-colors);
}

.property-input:focus[b-nnx63w2d27],
.property-select:focus[b-nnx63w2d27] {
    outline: none;
    border-color: var(--dz-brand-primary);
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
}

.property-checkbox[b-nnx63w2d27] {
    width: 16px;
    height: 16px;
    accent-color: var(--dz-brand-primary);
}

.property-color[b-nnx63w2d27] {
    width: 32px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--dz-border-primary);
    border-radius: var(--dz-radius-sm);
    cursor: pointer;
    background: none;
}

.property-range[b-nnx63w2d27] {
    flex: 1;
    margin: 0 var(--dz-space-1);
    accent-color: var(--dz-brand-primary);
}

.range-value[b-nnx63w2d27] {
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-secondary);
    min-width: 40px;
    text-align: right;
}

/* Property Actions */
.property-actions[b-nnx63w2d27] {
    display: flex;
    gap: var(--dz-space-2);
    padding: var(--dz-space-3);
    border-top: 1px solid var(--dz-border-primary);
    background: var(--dz-bg-secondary);
}

.property-actions .btn[b-nnx63w2d27] {
    flex: 1;
    padding: var(--dz-space-1_5) var(--dz-space-2);
    font-size: var(--dz-font-size-xs);
    border-radius: var(--dz-radius-sm);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .properties-panel[b-nnx63w2d27] {
        width: 240px;
        max-height: 400px;
    }
    
    .property-row[b-nnx63w2d27] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--dz-space-1);
    }
    
    .property-label[b-nnx63w2d27] {
        min-width: auto;
    }
    
    .property-input[b-nnx63w2d27],
    .property-select[b-nnx63w2d27] {
        width: 100%;
    }
}
/* /Components/Editors/Canvas/CanvasToolPalette.razor.rz.scp.css */
/* Canvas Tool Palette Component Styles */

.floating-panel[b-q8emll19mu] {
    position: fixed;
    background: var(--dz-bg-primary);
    border: 1px solid var(--dz-border-primary);
    border-radius: var(--dz-radius-lg);
    box-shadow: var(--dz-shadow-md);
    overflow: hidden;
    z-index: var(--dz-z-50);
    transition: var(--dz-transition-base);
}

.floating-panel.visible[b-q8emll19mu] {
    opacity: 1;
    transform: translateY(0);
}

.floating-panel.hidden[b-q8emll19mu] {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

.floating-panel.dragging[b-q8emll19mu] {
    z-index: var(--dz-z-modal);
    box-shadow: var(--dz-shadow-xl);
    transform: rotate(1deg);
}

/* Panel Header */
.floating-panel-header[b-q8emll19mu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--dz-space-2) var(--dz-space-3);
    background: var(--dz-bg-secondary);
    border-bottom: 1px solid var(--dz-border-primary);
    cursor: grab;
    user-select: none;
}

.floating-panel-header:active[b-q8emll19mu] {
    cursor: grabbing;
}

.panel-title[b-q8emll19mu] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-1_5);
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-medium);
    color: var(--dz-text-primary);
}

.panel-controls[b-q8emll19mu] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-1);
}

.panel-control-btn[b-q8emll19mu] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    border-radius: var(--dz-radius-sm);
    color: var(--dz-text-secondary);
    transition: var(--dz-transition-colors);
    cursor: pointer;
}

.panel-control-btn:hover[b-q8emll19mu] {
    background: var(--dz-bg-tertiary);
    color: var(--dz-text-primary);
}

/* Tool Palette Specific */
.tool-palette[b-q8emll19mu] {
    width: 220px;
    max-height: 500px;
}

.tool-categories[b-q8emll19mu] {
    padding: var(--dz-space-2);
}

.category-tabs[b-q8emll19mu] {
    display: flex;
    margin-bottom: var(--dz-space-2);
}

.category-tab[b-q8emll19mu] {
    flex: 1;
    padding: var(--dz-space-1_5) var(--dz-space-2);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--dz-text-secondary);
    font-size: var(--dz-font-size-xs);
    cursor: pointer;
    transition: var(--dz-transition-colors);
    text-align: center;
}

.category-tab:hover[b-q8emll19mu] {
    color: var(--dz-text-primary);
}

.category-tab.active[b-q8emll19mu] {
    color: var(--dz-brand-primary);
    border-bottom-color: var(--dz-brand-primary);
}

/* Tool Grid */
.tool-grid[b-q8emll19mu] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--dz-space-1_5);
    margin-bottom: var(--dz-space-3);
}

.tool-button[b-q8emll19mu] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--dz-bg-secondary);
    border: 1px solid var(--dz-border-primary);
    border-radius: var(--dz-radius-base);
    color: var(--dz-text-secondary);
    cursor: pointer;
    transition: var(--dz-transition-base);
}

.tool-button:hover[b-q8emll19mu] {
    background: var(--dz-bg-tertiary);
    color: var(--dz-text-primary);
    border-color: var(--dz-brand-primary);
    transform: translateY(-1px);
}

.tool-button.active[b-q8emll19mu] {
    background: var(--dz-brand-primary);
    color: white;
    border-color: var(--dz-brand-primary);
}

.tool-button i[b-q8emll19mu] {
    font-size: var(--dz-font-size-base);
}

/* Template Section */
.template-section[b-q8emll19mu] {
    border-top: 1px solid var(--dz-border-primary);
    padding: var(--dz-space-2);
}

.section-header[b-q8emll19mu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--dz-space-2);
}

.section-title[b-q8emll19mu] {
    font-size: var(--dz-font-size-xs);
    font-weight: var(--dz-font-weight-medium);
    color: var(--dz-text-primary);
}

.section-toggle[b-q8emll19mu] {
    background: transparent;
    border: none;
    color: var(--dz-text-secondary);
    cursor: pointer;
    padding: var(--dz-space-1);
    border-radius: var(--dz-radius-sm);
    transition: var(--dz-transition-colors);
}

.section-toggle:hover[b-q8emll19mu] {
    background: var(--dz-bg-tertiary);
    color: var(--dz-text-primary);
}

.template-grid[b-q8emll19mu] {
    display: flex;
    flex-direction: column;
    gap: var(--dz-space-1);
}

.template-item[b-q8emll19mu] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-2);
    padding: var(--dz-space-1_5);
    background: var(--dz-bg-secondary);
    border: 1px solid var(--dz-border-primary);
    border-radius: var(--dz-radius-base);
    cursor: pointer;
    transition: var(--dz-transition-colors);
}

.template-item:hover[b-q8emll19mu] {
    background: var(--dz-bg-tertiary);
    border-color: var(--dz-brand-primary);
}

.template-preview[b-q8emll19mu] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--dz-bg-primary);
    border-radius: var(--dz-radius-sm);
    color: var(--dz-text-secondary);
}

.template-name[b-q8emll19mu] {
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-primary);
}

/* Quick Actions */
.quick-actions[b-q8emll19mu] {
    display: flex;
    justify-content: space-between;
    gap: var(--dz-space-1);
    padding: var(--dz-space-2);
    border-top: 1px solid var(--dz-border-primary);
}

.quick-action-btn[b-q8emll19mu] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--dz-space-1_5);
    background: transparent;
    border: 1px solid var(--dz-border-primary);
    border-radius: var(--dz-radius-base);
    color: var(--dz-text-secondary);
    cursor: pointer;
    transition: var(--dz-transition-colors);
}

.quick-action-btn:hover[b-q8emll19mu] {
    background: var(--dz-bg-secondary);
    color: var(--dz-text-primary);
    border-color: var(--dz-brand-primary);
}
/* /Components/Editors/Canvas/CanvasWindow.razor.rz.scp.css */
/* Canvas Window Component Styles */

.floating-window[b-npt0p4buwz] {
    position: fixed;
    background: var(--dz-bg-primary);
    border: 2px solid var(--dz-border-primary);
    border-radius: var(--dz-radius-lg);
    box-shadow: var(--dz-shadow-lg);
    overflow: hidden;
    min-width: 200px;
    min-height: 150px;
    z-index: var(--dz-z-50);
    transition: var(--dz-transition-base);
}

.floating-window.selected[b-npt0p4buwz] {
    border-color: var(--dz-brand-primary);
    box-shadow: var(--dz-shadow-xl);
}

.floating-window.dragging[b-npt0p4buwz] {
    z-index: var(--dz-z-modal);
    transform: rotate(1deg);
    box-shadow: var(--dz-shadow-2xl);
    transition: none;
}

/* Window Header */
.floating-window-header[b-npt0p4buwz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--dz-space-2) var(--dz-space-3);
    background: var(--dz-bg-secondary);
    border-bottom: 1px solid var(--dz-border-primary);
    cursor: grab;
    user-select: none;
}

.floating-window-header:active[b-npt0p4buwz] {
    cursor: grabbing;
}

.floating-window-title[b-npt0p4buwz] {
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-medium);
    color: var(--dz-text-primary);
    margin: 0;
}

.floating-window-controls[b-npt0p4buwz] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-1);
}

.window-control-btn[b-npt0p4buwz] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    border-radius: var(--dz-radius-sm);
    color: var(--dz-text-secondary);
    transition: var(--dz-transition-colors);
    cursor: pointer;
}

.window-control-btn:hover[b-npt0p4buwz] {
    background: var(--dz-bg-tertiary);
    color: var(--dz-text-primary);
}

.window-control-btn.close:hover[b-npt0p4buwz] {
    background: var(--dz-danger-base);
    color: white;
}

.window-control-btn.maximize:hover[b-npt0p4buwz] {
    background: var(--dz-warning-base);
    color: white;
}

.window-control-btn.minimize:hover[b-npt0p4buwz] {
    background: var(--dz-info-base);
    color: white;
}

/* Window Content */
.floating-window-content[b-npt0p4buwz] {
    height: calc(100% - 40px); /* Subtract header height */
    overflow: auto;
    padding: 0;
}

/* Resize Handles */
.resize-handle[b-npt0p4buwz] {
    position: absolute;
    background: transparent;
    z-index: 1;
}

.resize-handle:hover[b-npt0p4buwz] {
    background: var(--dz-brand-primary);
    opacity: 0.3;
}

.resize-handle.n[b-npt0p4buwz],
.resize-handle.s[b-npt0p4buwz] {
    left: 0;
    right: 0;
    height: 4px;
    cursor: ns-resize;
}

.resize-handle.e[b-npt0p4buwz],
.resize-handle.w[b-npt0p4buwz] {
    top: 0;
    bottom: 0;
    width: 4px;
    cursor: ew-resize;
}

.resize-handle.n[b-npt0p4buwz] { top: -2px; }
.resize-handle.s[b-npt0p4buwz] { bottom: -2px; }
.resize-handle.e[b-npt0p4buwz] { right: -2px; }
.resize-handle.w[b-npt0p4buwz] { left: -2px; }

.resize-handle.ne[b-npt0p4buwz],
.resize-handle.nw[b-npt0p4buwz],
.resize-handle.se[b-npt0p4buwz],
.resize-handle.sw[b-npt0p4buwz] {
    width: 8px;
    height: 8px;
}

.resize-handle.ne[b-npt0p4buwz] {
    top: -4px;
    right: -4px;
    cursor: ne-resize;
}

.resize-handle.nw[b-npt0p4buwz] {
    top: -4px;
    left: -4px;
    cursor: nw-resize;
}

.resize-handle.se[b-npt0p4buwz] {
    bottom: -4px;
    right: -4px;
    cursor: se-resize;
}

.resize-handle.sw[b-npt0p4buwz] {
    bottom: -4px;
    left: -4px;
    cursor: sw-resize;
}
/* /Components/Editors/Layout/DockablePanel.razor.rz.scp.css */
/* Dockable Panel - Migrated to Design System */

.dockable-panel[b-71rry9fpq1] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--dz-bg-primary);
    position: relative;
    transition: var(--dz-transition-base);
}

/* Panel positioning with design system borders */
.dockable-panel.panel-left[b-71rry9fpq1] {
    border-right: 1px solid var(--dz-border-primary);
}

.dockable-panel.panel-right[b-71rry9fpq1] {
    border-left: 1px solid var(--dz-border-primary);
}

.dockable-panel.panel-top[b-71rry9fpq1] {
    border-bottom: 1px solid var(--dz-border-primary);
}

.dockable-panel.panel-bottom[b-71rry9fpq1] {
    border-top: 1px solid var(--dz-border-primary);
}

/* Panel Header using design system patterns */
.dockable-panel-header[b-71rry9fpq1] {
    flex-shrink: 0;
    background: var(--dz-bg-secondary);
    border-bottom: 1px solid var(--dz-border-primary);
    padding: var(--dz-space-3);
    cursor: pointer;
    user-select: none;
    transition: var(--dz-transition-colors);
}

.dockable-panel-header:hover[b-71rry9fpq1] {
    background: var(--dz-bg-tertiary);
}

/* Panel Header Content */
.panel-header-content[b-71rry9fpq1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-header-left[b-71rry9fpq1] {
    display: flex;
    align-items: center;
    flex: 1;
}

.panel-title[b-71rry9fpq1] {
    font-weight: var(--dz-font-weight-semibold);
    color: var(--dz-text-primary);
    font-size: var(--dz-font-size-sm);
    margin: 0;
}

.panel-header-right[b-71rry9fpq1] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-1);
}

.panel-action-btn[b-71rry9fpq1] {
    border: none !important;
    background: transparent !important;
    color: var(--dz-text-secondary);
    padding: var(--dz-space-1) !important;
    font-size: var(--dz-font-size-xs);
    line-height: 1;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--dz-radius-sm);
    transition: var(--dz-transition-colors);
}

.panel-action-btn:hover[b-71rry9fpq1] {
    color: var(--dz-text-primary);
    background: var(--dz-bg-tertiary) !important;
}

/* Panel Content */
.dockable-panel-content[b-71rry9fpq1] {
    flex: 1;
    overflow: auto;
    background: var(--dz-bg-primary);
}

/* Collapsed State */
.dockable-panel.panel-collapsed[b-71rry9fpq1] {
    overflow: hidden;
}

.dockable-panel.panel-collapsed .dockable-panel-content[b-71rry9fpq1] {
    display: none;
}

.dockable-panel.panel-collapsed .panel-header-content[b-71rry9fpq1] {
    justify-content: center;
}

.dockable-panel.panel-collapsed .panel-title[b-71rry9fpq1] {
    display: none;
}

.dockable-panel.panel-collapsed .panel-header-right[b-71rry9fpq1] {
    gap: 0;
}

/* Resizable panels */
.dockable-panel.panel-resizable[b-71rry9fpq1] {
    position: relative;
}

/* Resize handles using design system colors */
.panel-resize-handle[b-71rry9fpq1] {
    position: absolute;
    background: transparent;
    transition: var(--dz-transition-colors);
}

.panel-resize-handle:hover[b-71rry9fpq1] {
    background: var(--dz-brand-primary);
    opacity: 0.3;
}

.resize-handle-right[b-71rry9fpq1] {
    top: 0;
    right: -4px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
}

.resize-handle-left[b-71rry9fpq1] {
    top: 0;
    left: -4px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
}

.resize-handle-bottom[b-71rry9fpq1] {
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 8px;
    cursor: row-resize;
}

.resize-handle-top[b-71rry9fpq1] {
    top: -4px;
    left: 0;
    width: 100%;
    height: 8px;
    cursor: row-resize;
}

/* Panel states for layout communication */
.dockable-panel.panel-collapsed[b-71rry9fpq1] {
    /* This class is used by the parent layout to detect collapsed state */
}

/* Responsive behavior */
@media (max-width: 1200px) {
    .dockable-panel.panel-left[b-71rry9fpq1],
    .dockable-panel.panel-right[b-71rry9fpq1] {
        border-left: none;
        border-right: none;
        border-bottom: 1px solid var(--dz-border-primary);
    }
    
    .resize-handle-right[b-71rry9fpq1],
    .resize-handle-left[b-71rry9fpq1] {
        display: none;
    }
}
/* /Components/Editors/Layout/EditorFlyoutPanel.razor.rz.scp.css */
/* Editor Flyout Panel - VS Code inspired side panels */

.editor-flyout-panel[b-aldkf6ct4j] {
    position: fixed;
    left: 56px; /* Exact width of icon menu */
    top: 32px; /* FIXED: Start directly below menu bar (32px height) */
    bottom: 22px; /* Above status bar - exact status bar height */
    background: var(--dz-bg-secondary);
    border-right: 1px solid var(--dz-border-primary);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    transform: translateX(-100%);
    transition: transform var(--dz-duration-300) var(--dz-ease-out);
    z-index: 1025; /* Between icon menu (1020) and header (1030) */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.editor-flyout-panel.flyout-visible[b-aldkf6ct4j] {
    transform: translateX(0);
}

/* Flyout Header */
.flyout-header[b-aldkf6ct4j] {
    flex-shrink: 0;
    background: var(--dz-bg-secondary);
    border-bottom: 1px solid var(--dz-border-primary);
    padding: 10px 12px; /* Increased vertical padding for better balance */
    cursor: default;
    /* Increased height for better visual balance */
    height: 40px; /* 8px taller than menu bar for better prominence */
    min-height: 40px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
}

.flyout-header-content[b-aldkf6ct4j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.flyout-header-left[b-aldkf6ct4j] {
    display: flex;
    align-items: center;
    color: var(--dz-text-primary);
}

.flyout-title[b-aldkf6ct4j] {
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--dz-letter-spacing-wide);
}

.flyout-header-right[b-aldkf6ct4j] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-1);
}

.flyout-action-btn[b-aldkf6ct4j] {
    width: var(--dz-space-6); /* 24px */
    height: var(--dz-space-6); /* 24px */
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--dz-radius-sm);
    color: var(--dz-text-secondary);
    cursor: pointer;
    transition: var(--dz-transition-colors);
    font-size: var(--dz-font-size-xs);
}

.flyout-action-btn:hover[b-aldkf6ct4j] {
    background: var(--dz-bg-tertiary);
    color: var(--dz-text-primary);
}

/* Flyout Content */
.flyout-content[b-aldkf6ct4j] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
}

/* Scrollbar Styling - Light Theme */
.flyout-content[b-aldkf6ct4j]::-webkit-scrollbar {
    width: 10px;
}

.flyout-content[b-aldkf6ct4j]::-webkit-scrollbar-track {
    background: var(--dz-bg-secondary, #f8f9fa);
}

.flyout-content[b-aldkf6ct4j]::-webkit-scrollbar-thumb {
    background: var(--dz-border-primary, #dee2e6);
    border-radius: 5px;
}

.flyout-content[b-aldkf6ct4j]::-webkit-scrollbar-thumb:hover {
    background: var(--dz-text-muted, #6c757d);
}

/* Scrollbar Styling - Dark Theme */
[data-theme="dark"] .flyout-content[b-aldkf6ct4j]::-webkit-scrollbar-track {
    background: var(--dz-bg-secondary-dark, #343a40);
}

[data-theme="dark"] .flyout-content[b-aldkf6ct4j]::-webkit-scrollbar-thumb {
    background: var(--dz-border-primary-dark, #495057);
    border-radius: 5px;
}

[data-theme="dark"] .flyout-content[b-aldkf6ct4j]::-webkit-scrollbar-thumb:hover {
    background: var(--dz-text-secondary-dark, #adb5bd);
}

/* Firefox Scrollbar Styling */
.flyout-content[b-aldkf6ct4j] {
    scrollbar-width: thin;
    scrollbar-color: var(--dz-border-primary, #dee2e6) var(--dz-bg-secondary, #f8f9fa);
}

[data-theme="dark"] .flyout-content[b-aldkf6ct4j] {
    scrollbar-color: var(--dz-border-primary-dark, #495057) var(--dz-bg-secondary-dark, #343a40);
}

/* Resize Handle */
.flyout-resize-handle[b-aldkf6ct4j] {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    cursor: ew-resize;
    background: transparent;
    transition: var(--dz-transition-colors);
}

.flyout-resize-handle:hover[b-aldkf6ct4j] {
    background: var(--dz-brand-primary);
}

.flyout-resize-handle:active[b-aldkf6ct4j] {
    background: var(--dz-brand-primary-hover);
}

/* Animation for flyout appearing */
@keyframes flyout-slide-in-b-aldkf6ct4j {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.editor-flyout-panel.flyout-visible[b-aldkf6ct4j] {
    animation: flyout-slide-in-b-aldkf6ct4j var(--dz-duration-300) var(--dz-ease-out);
}

/* Dark theme adjustments */
[data-theme="dark"] .editor-flyout-panel[b-aldkf6ct4j] {
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .editor-flyout-panel[b-aldkf6ct4j] {
        border-right-width: 2px;
    }
    
    .flyout-action-btn:hover[b-aldkf6ct4j] {
        border: 1px solid var(--dz-text-primary);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .editor-flyout-panel[b-aldkf6ct4j] {
        transition: none;
        animation: none;
    }
    
    .flyout-resize-handle[b-aldkf6ct4j] {
        transition: none;
    }
}

/* Responsive behavior */
@media (max-width: 1199.98px) {
    .editor-flyout-panel[b-aldkf6ct4j] {
        /* TABLET: Same positioning as desktop */
        left: 56px; /* Icon menu width */
        top: 32px; /* Below menu bar */
        bottom: 22px; /* Above status bar */
    }
}

@media (max-width: 768px) {
    .editor-flyout-panel[b-aldkf6ct4j] {
        /* MOBILE: Full width overlay */
        left: 0;
        top: 40px; /* Below mobile menu bar (40px height) */
        bottom: 22px; /* Still above status bar */
        width: 100vw !important;
    }
    
    .flyout-header[b-aldkf6ct4j] {
        height: 40px; /* Taller on mobile to match mobile menu bar */
        min-height: 40px;
        padding: 8px 16px;
    }
}
/* /Components/Editors/Layout/EditorIconMenu.razor.rz.scp.css */
/* Editor Icon Menu - VS Code inspired left sidebar */

.editor-icon-menu[b-l63ehnsyxi] {
    position: fixed;
    left: 0;
    top: 32px; /* UPDATED: Start below menu bar (32px height) */
    bottom: 22px; /* Status bar height */
    width: 56px; /* Fixed width matching design system */
    background: var(--dz-bg-secondary); /* Use design system variable */
    border-right: 1px solid var(--dz-border-primary); /* Use design system variable */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 40px 0 8px 0; /* UPDATED: Top padding (40px) for icon spacing, bottom padding (8px) */
    z-index: 1020; /* Below header (1030) but above content */
    transition: var(--dz-transition-colors);
}

.icon-menu-top[b-l63ehnsyxi],
.icon-menu-bottom[b-l63ehnsyxi] {
    display: flex;
    flex-direction: column;
    gap: var(--dz-space-2); /* Increased to --dz-space-2 for even better visual separation */
    align-items: center; /* CENTER: Ensure icons are perfectly centered */
    width: 100%; /* FULL WIDTH: Allow centering to work properly */
}

/* Add padding above first icon to match gap between buttons */
.icon-menu-top[b-l63ehnsyxi] {
    padding-top: var(--dz-space-2);
}

/* Ensure bottom icons have adequate spacing */
.icon-menu-bottom[b-l63ehnsyxi] {
    margin-bottom: 0; /* Reduced since status bar is now compact */
}

.icon-menu-item[b-l63ehnsyxi] {
    width: var(--dz-space-10); /* 40px */
    height: var(--dz-space-10); /* 40px */
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--dz-radius-base);
    color: var(--dz-text-secondary);
    cursor: pointer;
    transition: var(--dz-transition-colors);
    position: relative;
    font-size: var(--dz-font-size-lg);
}

.icon-menu-item:hover[b-l63ehnsyxi] {
    background: var(--dz-bg-tertiary);
    color: var(--dz-text-primary);
}

.icon-menu-item.active[b-l63ehnsyxi] {
    background: var(--dz-brand-primary);
    color: var(--dz-text-inverse);
}

.icon-menu-item.active[b-l63ehnsyxi]::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 0; /* Start from the top of the button */
    bottom: 0; /* Extend to the bottom of the button */
    width: 2px;
    background: var(--dz-text-inverse);
    border-radius: 0 var(--dz-radius-sm) var(--dz-radius-sm) 0;
}

/* Focus states for accessibility */
.icon-menu-item:focus[b-l63ehnsyxi] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

/* Dark theme adjustments */
[data-theme="dark"] .editor-icon-menu[b-l63ehnsyxi] {
    background: var(--dz-bg-secondary);
    border-right-color: var(--dz-border-primary);
}

[data-theme="dark"] .icon-menu-item.active[b-l63ehnsyxi]::before {
    background: var(--dz-brand-primary);
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .icon-menu-item[b-l63ehnsyxi] {
        border: 1px solid transparent;
    }
    
    .icon-menu-item:hover[b-l63ehnsyxi],
    .icon-menu-item.active[b-l63ehnsyxi] {
        border-color: var(--dz-text-primary);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .editor-icon-menu[b-l63ehnsyxi],
    .icon-menu-item[b-l63ehnsyxi] {
        transition: none;
    }
}

/* Responsive positioning - EXACT TABLET ALIGNMENT */
@media (max-width: 1199.98px) {
    .editor-icon-menu[b-l63ehnsyxi] {
        /* UPDATED POSITIONING: Start below menu bar */
        position: fixed;
        left: 0;
        top: 32px; /* Start below menu bar (32px height) */
        bottom: 22px; /* Above status bar */
        width: 56px; /* Exact width */
        background: var(--dz-bg-secondary); /* Use design system variable */
        border-right: 1px solid var(--dz-border-primary); /* Use design system variable */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 40px 0 8px 0; /* Top padding for icon spacing */
        z-index: 1020; /* Below header but above content */
        box-shadow: none; /* Remove shadow - should blend seamlessly */
    }
    
    /* ENSURE: Icon containers are perfectly centered on tablets */
    .icon-menu-top[b-l63ehnsyxi],
    .icon-menu-bottom[b-l63ehnsyxi] {
        align-items: center;
        width: 100%;
    }
}
/* /Components/Editors/Layout/EditorLayout.razor.rz.scp.css */
/* Editor Layout - Migrated to Design System */

.editor-layout[b-y67jzdg24h] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: var(--dz-bg-secondary);
    
    /* Add smooth transition for sliding when flyout opens/closes */
    transition: transform var(--dz-duration-300) var(--dz-ease-out),
                margin-left var(--dz-duration-300) var(--dz-ease-out);
}

/* When used with icon menu, adjust only the main content area */
.editor-layout.with-icon-menu[b-y67jzdg24h] {
    /* Header and status bar now extend full width */
}

/* NEW: When flyout panel is open, slide ONLY the editor content, NOT the fixed UI elements */
.editor-layout.with-flyout-panel .editor-layout-content[b-y67jzdg24h] {
    transform: translateX(var(--flyout-panel-width, 0px));
    width: calc(100% - var(--flyout-panel-width, 0px));
}

/* Keep the body and status bar in place - remove the transforms */
.editor-layout.with-flyout-panel .editor-layout-body[b-y67jzdg24h] {
    /* Removed transform - body stays in place */
}

.editor-layout.with-flyout-panel .editor-layout-status[b-y67jzdg24h] {
    /* Removed transform - status bar stays in place */
}

/* Header using design system patterns - BULLETPROOF HEADER */
.editor-layout-header[b-y67jzdg24h] {
    /* FORCE ABSOLUTE VALUES - NO CSS VARIABLES */
    flex-shrink: 0;
    background: var(--dz-bg-secondary);
    border-bottom: 1px solid var(--dz-border-primary);
    z-index: 1030;
    
    /* CRITICAL POSITIONING - EXACT HEIGHT CALCULATION */
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 60px; /* EXACTLY 60px - this determines EditorIconMenu top position */
    min-height: 60px;
    max-height: 60px;
    box-sizing: border-box;
    margin: 0;
    
    /* LAYOUT: Perfect centering */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    
    /* DESKTOP: Add left padding to account for icon menu */
    padding: 12px 16px 12px calc(56px + 16px);
}

/* Body - Main layout container */
.editor-layout-body[b-y67jzdg24h] {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
    
    /* DESKTOP: No margin - let icon menu overlay naturally */
    /* Icon menu will be positioned absolute and won't affect layout */
}

/* Left Panel - Responsive to collapse state */
.editor-layout-left[b-y67jzdg24h] {
    flex-shrink: 0;
    background: var(--dz-bg-secondary);
    border-right: 1px solid var(--dz-border-primary);
    transition: width var(--dz-duration-300) var(--dz-ease-out), 
                min-width var(--dz-duration-300) var(--dz-ease-out);
    overflow: hidden;
    width: var(--left-panel-width, 280px);
    min-width: var(--left-panel-width, 280px);
}

/* When left panel width is 0 */
.editor-layout-left[style*="--left-panel-width: 0px"][b-y67jzdg24h] {
    width: 0 !important;
    min-width: 0 !important;
    border-right: none !important;
}

/* When left panel is collapsed */
.editor-layout-left:has(.dockable-panel.panel-collapsed)[b-y67jzdg24h] {
    width: var(--collapsed-panel-width, 40px);
    min-width: var(--collapsed-panel-width, 40px);
}

/* Right Panel - Responsive to collapse state */
.editor-layout-right[b-y67jzdg24h] {
    flex-shrink: 0;
    background: var(--dz-bg-secondary);
    border-left: 1px solid var(--dz-border-primary);
    transition: width var(--dz-duration-300) var(--dz-ease-out), 
                min-width var(--dz-duration-300) var(--dz-ease-out);
    overflow: hidden;
    width: var(--right-panel-width, 300px);
    min-width: var(--right-panel-width, 300px);
}

/* When right panel width is 0 */
.editor-layout-right[style*="--right-panel-width: 0px"][b-y67jzdg24h] {
    width: 0 !important;
    min-width: 0 !important;
    border-left: none !important;
}

/* When right panel is collapsed */
.editor-layout-right:has(.dockable-panel.panel-collapsed)[b-y67jzdg24h] {
    width: var(--collapsed-panel-width, 40px);
    min-width: var(--collapsed-panel-width, 40px);
}

/* Main Content Area - Expands when panels collapse */
.editor-layout-main[b-y67jzdg24h] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0; /* Allow flexbox to shrink */
    
    /* DESKTOP: Add left padding for icon menu to prevent content overlap */
    padding-left: 56px;
    
    /* Add top padding for fixed toolbar */
    padding-top: 32px; /* Height of the fixed toolbar */
}

/* Top Toolbar - FIXED POSITIONING LIKE ICON MENU */
.editor-layout-toolbar[b-y67jzdg24h] {
    flex-shrink: 0;
    background: var(--dz-bg-secondary);
    border-bottom: 1px solid var(--dz-border-primary);
    z-index: 1030; /* Same as header, above icon menu */
    
    /* FIXED POSITIONING - stays in place when flyout opens */
    position: fixed;
    top: 0; /* Stick to top of viewport */
    left: 56px; /* Start after icon menu */
    right: 0; /* Extend to right edge */
    width: calc(100vw - 56px); /* Full width minus icon menu */
    height: 32px; /* Fixed height for menu bar */
    
    /* Add small left padding for File menu */
    padding-left: 8px;
    
    /* Ensure the toolbar has proper layout */
    display: flex;
    align-items: center;
    
    /* CRITICAL: Prevent toolbar from being affected by parent transforms */
    transform: none !important;
}

/* Main Content */
.editor-layout-content[b-y67jzdg24h] {
    flex: 1;
    overflow: hidden;
    position: relative;
    background: var(--dz-bg-primary);
}

/* Bottom Panel */
.editor-layout-bottom[b-y67jzdg24h] {
    flex-shrink: 0;
    background: var(--dz-bg-secondary);
    border-top: 1px solid var(--dz-border-primary);
    overflow: hidden;
    height: var(--bottom-panel-height, 200px);
    min-height: var(--bottom-panel-height, 200px);
}

/* Status Bar - NOW EXTENDS FULL WIDTH AND COMPACT */
.editor-layout-status[b-y67jzdg24h] {
    flex-shrink: 0;
    background: var(--dz-bg-secondary);
    border-top: 1px solid var(--dz-border-primary);
    z-index: 1030; /* Same z-index as header */
    
    /* COMPACT: VS Code-style status bar */
    height: 22px;
    min-height: 22px;
    max-height: 22px;
    
    /* DESKTOP: Add left padding for icon menu */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    padding: 0 16px 0 calc(56px + 16px); /* Icon menu width + padding */
    
    /* Ensure proper centering of content */
    display: flex;
    align-items: center;
    
    /* CRITICAL: Prevent status bar from being affected by parent transforms */
    transform: none !important;
}

/* Fallback for browsers without :has() support */
@supports not selector(:has(*)) {
    .editor-layout-left.panel-collapsed[b-y67jzdg24h],
    .editor-layout-right.panel-collapsed[b-y67jzdg24h] {
        width: var(--collapsed-panel-width, 40px);
        min-width: var(--collapsed-panel-width, 40px);
    }
}

/* Responsive breakpoints */
/* TABLET BREAKPOINT - FIXED HEADER POSITIONING */
@media (max-width: 1199.98px) {
    .editor-layout-header[b-y67jzdg24h] {
        /* TABLET: Keep left padding for icon menu */
        padding-left: calc(56px + 16px); /* Icon menu width + padding */
    }
    
    .editor-layout-body[b-y67jzdg24h] {
        margin-left: 56px; /* Hard-coded icon menu width */
        margin-bottom: 22px; /* Account for fixed status bar */
    }
    
    .editor-layout-main[b-y67jzdg24h] {
        /* TABLET: Remove padding since body has margin */
        padding-left: 0;
    }
    
    .editor-layout-toolbar[b-y67jzdg24h] {
        /* TABLET: Toolbar stays fixed */
        left: 56px;
        width: calc(100vw - 56px);
        transform: none !important;
    }
    
    .editor-layout-status[b-y67jzdg24h] {
        /* TABLET: Status bar stays fixed */
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100vw;
        background: var(--dz-bg-secondary);
        border-top: 1px solid var(--dz-border-primary);
        padding-left: calc(56px + 16px);
        z-index: 1030;
        transform: none !important;
    }
    
    .editor-layout.with-flyout-panel .editor-layout-body[b-y67jzdg24h] {
        /* Only slide the body content on tablet */
        transform: translateX(var(--flyout-panel-width, 0px));
        width: calc(100vw - 56px - var(--flyout-panel-width, 0px));
    }
}

/* MOBILE-ONLY: Disable flyout sliding only on phones (narrow screens) */
@media (max-width: 768px) {
    .editor-layout-header[b-y67jzdg24h] {
        padding-left: 16px; /* Remove icon menu padding on mobile */
    }
    
    .editor-layout-body[b-y67jzdg24h] {
        margin-left: 0; /* Remove icon menu margin on mobile */
        margin-bottom: 22px; /* Account for fixed status bar */
    }
    
    .editor-layout-main[b-y67jzdg24h] {
        padding-left: 0; /* Remove icon menu padding on mobile */
    }
    
    .editor-layout-toolbar[b-y67jzdg24h] {
        /* MOBILE: Toolbar positioning */
        left: 0;
        width: 100vw;
        transform: none !important;
    }
    
    .editor-layout-status[b-y67jzdg24h] {
        /* MOBILE: Status bar stays fixed */
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100vw;
        padding-left: 16px; /* Remove icon menu padding on mobile */
        transform: none !important;
    }
    
    /* Disable flyout sliding on actual mobile phones */
    .editor-layout.with-flyout-panel .editor-layout-body[b-y67jzdg24h] {
        transform: none !important;
        width: 100vw !important;
    }
}

@media (max-width: 991.98px) {
    .editor-layout-body[b-y67jzdg24h] {
        flex-direction: column;
    }
    
    .editor-layout-left[b-y67jzdg24h],
    .editor-layout-right[b-y67jzdg24h] {
        width: 100% !important;
        min-width: 100% !important;
        height: auto;
        border-left: none;
        border-right: none;
        border-bottom: 1px solid var(--dz-border-primary);
    }
}

/* Animation for smooth transitions using design system easing */
.editor-layout-left[b-y67jzdg24h],
.editor-layout-right[b-y67jzdg24h],
.editor-layout-main[b-y67jzdg24h] {
    transition: all var(--dz-duration-300) var(--dz-ease-in-out);
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .editor-layout[b-y67jzdg24h],
    .editor-layout-left[b-y67jzdg24h],
    .editor-layout-right[b-y67jzdg24h],
    .editor-layout-main[b-y67jzdg24h] {
        transition: none;
    }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
    .editor-layout[b-y67jzdg24h] {
        border: 2px solid var(--dz-border-primary);
    }
}
/* /Components/Editors/Layout/EditorMenuBar.razor.rz.scp.css */
/* Editor Menu Bar - Desktop Application Style Menu */

.editor-menubar[b-obffihmn5i] {
    display: flex;
    align-items: center;
    background: var(--dz-bg-secondary);
    padding: 0;
    height: 32px;
    min-height: 32px;
    font-family: var(--dz-font-sans);
    font-size: var(--dz-font-size-sm, 0.875rem);
    user-select: none;
    position: relative;
    z-index: 1050;
    width: 100%; /* Ensure menubar fills the toolbar width */
}

.menubar-container[b-obffihmn5i] {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Back to space-between for proper spacing */
    height: 100%;
    width: 100%;
}

.menubar-left[b-obffihmn5i] {
    display: flex;
    align-items: center;
    height: 100%;
}

.menubar-right[b-obffihmn5i] {
    display: flex;
    align-items: center;
    height: 100%;
    padding-right: 8px; /* Small padding to prevent touching the absolute edge */
}

/* Menu Items */
.menu-item[b-obffihmn5i] {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.menu-item:hover[b-obffihmn5i] {
    background: var(--dz-bg-tertiary, #e9ecef);
}

.menu-item:focus[b-obffihmn5i] {
    outline: 2px solid var(--dz-primary, #0d6efd);
    outline-offset: -2px;
}

.menu-label[b-obffihmn5i] {
    padding: 6px 12px;
    color: var(--dz-text-primary, #212529);
    font-weight: 400;
    white-space: nowrap;
}

/* Dropdown Menus */
.menu-dropdown[b-obffihmn5i] {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--dz-bg-primary, #ffffff);
    border: 1px solid var(--dz-border-primary, #dee2e6);
    border-radius: var(--dz-radius-base, 0.25rem);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1060;
    padding: 4px 0;
    animation: menuFadeIn-b-obffihmn5i 0.15s ease-out;
}

@keyframes menuFadeIn-b-obffihmn5i {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Menu Groups and Dividers */
.menu-group[b-obffihmn5i] {
    margin: 0;
}

.menu-divider[b-obffihmn5i] {
    height: 1px;
    background: var(--dz-border-primary, #dee2e6);
    margin: 4px 0;
}

/* Menu Options */
.menu-option[b-obffihmn5i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    position: relative;
}

.menu-option:hover[b-obffihmn5i] {
    background: var(--dz-bg-secondary, #f8f9fa);
}

.menu-option:focus[b-obffihmn5i] {
    outline: none;
    background: var(--dz-primary-subtle, #cfe2ff);
}

.menu-option.disabled[b-obffihmn5i] {
    color: var(--dz-text-muted, #6c757d);
    cursor: not-allowed;
    pointer-events: none;
}

.menu-text[b-obffihmn5i] {
    flex: 1;
    color: var(--dz-text-primary, #212529);
    white-space: nowrap;
}

.menu-shortcut[b-obffihmn5i] {
    color: var(--dz-text-secondary, #6c757d);
    font-size: var(--dz-font-size-xs, 0.75rem);
    margin-left: 24px;
    font-family: var(--dz-font-mono, 'Fira Code', monospace);
}

/* Submenu Styling */
.submenu-trigger[b-obffihmn5i] {
    position: relative;
}

.submenu-arrow[b-obffihmn5i] {
    color: var(--dz-text-secondary, #6c757d);
    font-size: 0.75rem;
    margin-left: 8px;
}

.submenu-dropdown[b-obffihmn5i] {
    position: absolute;
    top: -4px;
    left: 100%;
    min-width: 180px;
    background: var(--dz-bg-primary, #ffffff);
    border: 1px solid var(--dz-border-primary, #dee2e6);
    border-radius: var(--dz-radius-base, 0.25rem);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1070;
    padding: 4px 0;
    animation: submenuSlideIn-b-obffihmn5i 0.15s ease-out;
}

@keyframes submenuSlideIn-b-obffihmn5i {
    from {
        opacity: 0;
        transform: translateX(-4px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Dark Theme Support */
[data-theme="dark"] .editor-menubar[b-obffihmn5i] {
    background: var(--dz-bg-secondary-dark);
}

[data-theme="dark"] .menu-item:hover[b-obffihmn5i] {
    background: var(--dz-bg-tertiary-dark, #495057);
}

[data-theme="dark"] .menu-label[b-obffihmn5i] {
    color: var(--dz-text-primary-dark, #f8f9fa);
}

[data-theme="dark"] .menu-dropdown[b-obffihmn5i],
[data-theme="dark"] .submenu-dropdown[b-obffihmn5i] {
    background: var(--dz-bg-primary-dark, #212529);
    border-color: var(--dz-border-primary-dark, #495057);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .menu-divider[b-obffihmn5i] {
    background: var(--dz-border-primary-dark, #495057);
}

[data-theme="dark"] .menu-option:hover[b-obffihmn5i] {
    background: var(--dz-bg-secondary-dark, #343a40);
}

[data-theme="dark"] .menu-option:focus[b-obffihmn5i] {
    background: var(--dz-primary-subtle-dark, #084298);
}

[data-theme="dark"] .menu-text[b-obffihmn5i] {
    color: var(--dz-text-primary-dark, #f8f9fa);
}

[data-theme="dark"] .menu-shortcut[b-obffihmn5i],
[data-theme="dark"] .submenu-arrow[b-obffihmn5i] {
    color: var(--dz-text-secondary-dark, #adb5bd);
}

[data-theme="dark"] .menu-option.disabled .menu-text[b-obffihmn5i] {
    color: var(--dz-text-muted-dark, #6c757d);
}

/* High Contrast Support */
@media (prefers-contrast: high) {
    .menu-dropdown[b-obffihmn5i],
    .submenu-dropdown[b-obffihmn5i] {
        border-width: 2px;
    }
    
    .menu-item:focus[b-obffihmn5i] {
        outline-width: 3px;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .menu-dropdown[b-obffihmn5i],
    .submenu-dropdown[b-obffihmn5i] {
        animation: none;
    }
    
    .menu-item[b-obffihmn5i],
    .menu-option[b-obffihmn5i] {
        transition: none;
    }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .editor-menubar[b-obffihmn5i] {
        height: 40px;
        min-height: 40px;
    }
    
    .menu-label[b-obffihmn5i] {
        padding: 8px 16px;
    }
    
    .menu-dropdown[b-obffihmn5i] {
        min-width: 240px;
    }
    
    .menu-option[b-obffihmn5i] {
        padding: 10px 16px;
    }
    
    .menu-shortcut[b-obffihmn5i] {
        display: none; /* Hide shortcuts on mobile */
    }
}

/* Accessibility - Focus Indicators */
.menu-item:focus-visible[b-obffihmn5i],
.menu-option:focus-visible[b-obffihmn5i] {
    outline: 2px solid var(--dz-primary, #0d6efd);
    outline-offset: -2px;
}

/* Keyboard Navigation Support */
.editor-menubar:focus-within .menu-item[b-obffihmn5i] {
    outline: none;
}

.editor-menubar[data-keyboard-nav="true"] .menu-item:focus[b-obffihmn5i] {
    background: var(--dz-bg-tertiary, #e9ecef);
}

.editor-menubar[data-keyboard-nav="true"] .menu-option:focus[b-obffihmn5i] {
    background: var(--dz-primary-subtle, #cfe2ff);
}

/* Recent Files Styling */
.recent-file-item[b-obffihmn5i] {
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 12px;
    min-height: auto;
}

.recent-file-item .menu-text[b-obffihmn5i] {
    display: flex;
    align-items: center;
    font-weight: 500;
    margin-bottom: 2px;
}

.recent-file-path[b-obffihmn5i] {
    font-size: var(--dz-font-size-xs, 0.75rem);
    color: var(--dz-text-secondary, #6c757d);
    margin-left: 20px; /* Align with icon */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

[data-theme="dark"] .recent-file-path[b-obffihmn5i] {
    color: var(--dz-text-secondary-dark, #adb5bd);
}

.recent-file-item:hover .recent-file-path[b-obffihmn5i] {
    color: var(--dz-text-primary, #212529);
}

[data-theme="dark"] .recent-file-item:hover .recent-file-path[b-obffihmn5i] {
    color: var(--dz-text-primary-dark, #f8f9fa);
}
/* /Components/Editors/Layout/EditorNavigationButton.razor.rz.scp.css */
/* Editor Navigation Button - Return to home or previous page */

.editor-navigation-button[b-81wvk0nmci] {
    /* FIXED POSITIONING - sits in top-left corner, spanning menu bar and icon menu top */
    position: fixed;
    left: 0;
    top: 0; /* Start at very top of viewport */
    width: 56px; /* Match icon menu width */
    height: 72px; /* Span menu bar (32px) + icon menu top space (40px) */
    
    /* Visual styling */
    background: var(--dz-bg-secondary);
    border: none;
    border-right: 1px solid var(--dz-border-primary);
    border-bottom: 1px solid var(--dz-border-primary);
    color: var(--dz-brand-primary); /* Blue color for the home icon */
    cursor: pointer;
    
    /* Layout */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Typography */
    font-size: var(--dz-font-size-lg, 1.125rem);
    
    /* Layering */
    z-index: 1025; /* Above icon menu (1020) but below toolbar (1030) */
    
    /* Transitions */
    transition: var(--dz-transition-colors);
}

.editor-navigation-button:hover[b-81wvk0nmci] {
    background: var(--dz-bg-tertiary);
    color: var(--dz-brand-primary-hover, var(--dz-brand-primary)); /* Keep blue on hover */
}

.editor-navigation-button:active[b-81wvk0nmci] {
    background: var(--dz-brand-primary);
    color: var(--dz-text-inverse);
}

.editor-navigation-button:focus[b-81wvk0nmci] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

/* Dark theme support */
[data-theme="dark"] .editor-navigation-button[b-81wvk0nmci] {
    background: var(--dz-bg-secondary);
    border-right-color: var(--dz-border-primary);
    border-bottom-color: var(--dz-border-primary);
    color: var(--dz-brand-primary); /* Keep blue in dark mode */
}

[data-theme="dark"] .editor-navigation-button:hover[b-81wvk0nmci] {
    background: var(--dz-bg-tertiary-dark, #495057);
    color: var(--dz-brand-primary-hover, var(--dz-brand-primary)); /* Keep blue on hover in dark mode */
}

[data-theme="dark"] .editor-navigation-button:active[b-81wvk0nmci] {
    background: var(--dz-brand-primary);
    color: var(--dz-text-inverse);
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .editor-navigation-button[b-81wvk0nmci] {
        border-width: 2px;
    }
    
    .editor-navigation-button:focus[b-81wvk0nmci] {
        outline-width: 3px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .editor-navigation-button[b-81wvk0nmci] {
        transition: none;
    }
}

/* Tablet breakpoint */
@media (max-width: 1199.98px) {
    .editor-navigation-button[b-81wvk0nmci] {
        /* Maintain positioning on tablet */
        left: 0;
        top: 0;
        width: 56px;
        height: 72px;
    }
}

/* Mobile breakpoint */
@media (max-width: 768px) {
    .editor-navigation-button[b-81wvk0nmci] {
        /* On mobile, position at very top-left */
        left: 0;
        top: 0;
        width: 48px; /* Slightly smaller on mobile */
        height: 72px; /* Maintain height on mobile */
        border-bottom: none; /* Remove bottom border on mobile */
    }
}
/* /Components/Editors/Layout/Panels/AboutVersionPanel.razor.rz.scp.css */
/* About and Version Panel Styles */
.about-version-panel[b-y5tmo4sajx] {
    padding: var(--dz-space-6);
    height: 100%;
    overflow-y: auto;
    background: var(--dz-bg-primary);
    color: var(--dz-text-primary);
    font-family: var(--dz-font-sans);
}

/* About Section */
.about-section .about-header[b-y5tmo4sajx] {
    display: flex;
    align-items: center;
    margin-bottom: var(--dz-space-4);
}

.about-section .about-header h3[b-y5tmo4sajx] {
    margin: 0;
    font-size: var(--dz-font-size-lg);
    font-weight: var(--dz-font-weight-semibold);
    color: var(--dz-text-primary);
}

.about-content .about-description[b-y5tmo4sajx] {
    font-size: var(--dz-font-size-base);
    line-height: 1.6;
    color: var(--dz-text-secondary);
    margin-bottom: var(--dz-space-5);
}

.about-features[b-y5tmo4sajx] {
    display: flex;
    flex-direction: column;
    gap: var(--dz-space-3);
}

.feature-item[b-y5tmo4sajx] {
    display: flex;
    align-items: center;
    font-size: var(--dz-font-size-sm);
    color: var(--dz-text-secondary);
    padding: var(--dz-space-2);
    border-radius: var(--dz-radius-base);
    background: var(--dz-bg-secondary);
}

.feature-item i[b-y5tmo4sajx] {
    min-width: 20px;
}

/* Section Divider */
.section-divider[b-y5tmo4sajx] {
    margin: var(--dz-space-6) 0;
    border: 0;
    border-top: 1px solid var(--dz-border-primary);
    opacity: 0.3;
}

/* Version Section */
.version-section .version-header[b-y5tmo4sajx] {
    display: flex;
    align-items: center;
    margin-bottom: var(--dz-space-4);
}

.version-section .version-header h3[b-y5tmo4sajx] {
    margin: 0;
    font-size: var(--dz-font-size-lg);
    font-weight: var(--dz-font-weight-semibold);
    color: var(--dz-text-primary);
}

.version-content[b-y5tmo4sajx] {
    display: flex;
    flex-direction: column;
    gap: var(--dz-space-5);
}

/* Version Groups */
.version-group[b-y5tmo4sajx] {
    background: var(--dz-bg-secondary);
    border-radius: var(--dz-radius-md);
    padding: var(--dz-space-4);
    border: 1px solid var(--dz-border-primary);
}

.version-group.primary-version[b-y5tmo4sajx] {
    background: linear-gradient(135deg, var(--dz-brand-primary), var(--dz-brand-primary-hover));
    color: white;
    border-color: var(--dz-brand-primary);
}

.version-group.primary-version .version-label[b-y5tmo4sajx],
.version-group.primary-version .version-number[b-y5tmo4sajx] {
    color: white;
}

.group-title[b-y5tmo4sajx] {
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-semibold);
    color: var(--dz-text-secondary);
    margin: 0 0 var(--dz-space-3) 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Version Items */
.version-item[b-y5tmo4sajx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--dz-space-2) 0;
    border-bottom: 1px solid var(--dz-border-primary);
}

.version-item:last-child[b-y5tmo4sajx] {
    border-bottom: none;
}

.version-label[b-y5tmo4sajx] {
    display: flex;
    align-items: center;
    font-size: var(--dz-font-size-sm);
    color: var(--dz-text-primary);
    font-weight: var(--dz-font-weight-medium);
}

.version-label i[b-y5tmo4sajx] {
    min-width: 18px;
}

.version-number[b-y5tmo4sajx] {
    font-family: var(--dz-font-mono);
    font-size: var(--dz-font-size-xs);
    font-weight: var(--dz-font-weight-semibold);
    color: var(--dz-text-secondary);
    background: var(--dz-bg-tertiary);
    padding: var(--dz-space-1) var(--dz-space-2);
    border-radius: var(--dz-radius-sm);
    border: 1px solid var(--dz-border-primary);
}

.primary-version .version-number[b-y5tmo4sajx] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

/* Actions Section */
.actions-section .actions-header[b-y5tmo4sajx] {
    display: flex;
    align-items: center;
    margin-bottom: var(--dz-space-4);
}

.actions-section .actions-header h3[b-y5tmo4sajx] {
    margin: 0;
    font-size: var(--dz-font-size-lg);
    font-weight: var(--dz-font-weight-semibold);
    color: var(--dz-text-primary);
}

.actions-content .actions-description[b-y5tmo4sajx] {
    font-size: var(--dz-font-size-sm);
    line-height: 1.5;
    color: var(--dz-text-secondary);
    margin-bottom: var(--dz-space-4);
}

.action-button-container[b-y5tmo4sajx] {
    display: flex;
    flex-direction: column;
    gap: var(--dz-space-2);
}

.action-button[b-y5tmo4sajx] {
    width: 100%;
    padding: var(--dz-space-3) var(--dz-space-4);
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-medium);
    border-radius: var(--dz-radius-md);
    border: 2px solid;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.action-button:hover[b-y5tmo4sajx] {
    transform: translateY(-1px);
    box-shadow: var(--dz-shadow-sm);
}

.action-button:active[b-y5tmo4sajx] {
    transform: translateY(0);
}

.action-button.btn-outline-primary[b-y5tmo4sajx] {
    color: var(--dz-brand-primary);
    border-color: var(--dz-brand-primary);
}

.action-button.btn-outline-primary:hover[b-y5tmo4sajx] {
    background: var(--dz-brand-primary);
    color: white;
}

.action-button.btn-outline-warning[b-y5tmo4sajx] {
    color: var(--dz-warning-base);
    border-color: var(--dz-warning-base);
}

.action-button.btn-outline-warning:hover[b-y5tmo4sajx] {
    background: var(--dz-warning-base);
    color: white;
}

.action-button i[b-y5tmo4sajx] {
    margin-right: var(--dz-space-2);
}

.action-description[b-y5tmo4sajx] {
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-muted);
    line-height: 1.4;
    margin-top: var(--dz-space-1);
    padding-left: var(--dz-space-1);
}

/* Footer */
.about-footer[b-y5tmo4sajx] {
    margin-top: var(--dz-space-6);
    padding-top: var(--dz-space-4);
    border-top: 1px solid var(--dz-border-primary);
    display: flex;
    flex-direction: column;
    gap: var(--dz-space-2);
    align-items: center;
}

.copyright-info[b-y5tmo4sajx],
.build-info[b-y5tmo4sajx] {
    text-align: center;
}

.copyright-info small[b-y5tmo4sajx],
.build-info small[b-y5tmo4sajx] {
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-muted);
}

/* Dark Theme Adjustments */
[data-theme="dark"] .version-group[b-y5tmo4sajx] {
    background: var(--dz-bg-tertiary);
    border-color: var(--dz-border-secondary);
}

[data-theme="dark"] .feature-item[b-y5tmo4sajx] {
    background: var(--dz-bg-tertiary);
}

[data-theme="dark"] .version-number[b-y5tmo4sajx] {
    background: var(--dz-bg-primary);
    border-color: var(--dz-border-secondary);
}

[data-theme="dark"] .action-button.btn-outline-primary[b-y5tmo4sajx] {
    color: var(--dz-brand-primary);
    border-color: var(--dz-brand-primary);
}

[data-theme="dark"] .action-button.btn-outline-warning[b-y5tmo4sajx] {
    color: #ffc107;
    border-color: #ffc107;
}

[data-theme="dark"] .action-button.btn-outline-warning:hover[b-y5tmo4sajx] {
    background: #ffc107;
    color: #000;
}

/* Responsive Design */
@media (max-width: 400px) {
    .about-version-panel[b-y5tmo4sajx] {
        padding: var(--dz-space-4);
    }
    
    .version-item[b-y5tmo4sajx] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--dz-space-2);
    }
    
    .version-number[b-y5tmo4sajx] {
        align-self: flex-end;
    }
    
    .action-button[b-y5tmo4sajx] {
        padding: var(--dz-space-2_5) var(--dz-space-3);
        font-size: var(--dz-font-size-xs);
    }
}

/* Accessibility Enhancements */
.about-version-panel:focus-within[b-y5tmo4sajx] {
    outline: 2px solid var(--dz-brand-primary);
    outline-offset: -2px;
}

.action-button:focus[b-y5tmo4sajx] {
    outline: 2px solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

/* Smooth Scrolling */
.about-version-panel[b-y5tmo4sajx] {
    scroll-behavior: smooth;
}

/* Print Styles */
@media print {
    .about-version-panel[b-y5tmo4sajx] {
        background: white !important;
        color: black !important;
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    .version-group.primary-version[b-y5tmo4sajx] {
        background: #f0f0f0 !important;
        color: black !important;
    }
    
    .actions-section[b-y5tmo4sajx] {
        display: none;
    }
}
/* /Components/Editors/Layout/Panels/MarkdownHelpPanel.razor.rz.scp.css */
/* Markdown Help Panel - Design System Styled */

.markdown-help-content[b-tq77y3xnjh] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Search Container */
.help-search-container[b-tq77y3xnjh] {
    padding: var(--dz-space-3);
    border-bottom: 1px solid var(--dz-border-primary);
    background: var(--dz-bg-secondary);
    flex-shrink: 0;
}

.help-search-input[b-tq77y3xnjh] {
    position: relative;
    display: flex;
    align-items: center;
}

.help-search-icon[b-tq77y3xnjh] {
    position: absolute;
    left: var(--dz-space-3);
    color: var(--dz-text-muted);
    z-index: 1;
    font-size: var(--dz-font-size-sm);
}

.help-search-field[b-tq77y3xnjh] {
    padding-left: calc(var(--dz-space-3) + var(--dz-font-size-sm) + var(--dz-space-2));
    padding-right: var(--dz-space-8);
    font-size: var(--dz-font-size-sm);
    border: 1px solid var(--dz-border-primary);
    border-radius: var(--dz-radius-base);
    background: var(--dz-bg-primary);
    color: var(--dz-text-primary);
    transition: var(--dz-transition-all);
}

.help-search-field:focus[b-tq77y3xnjh] {
    outline: none;
    border-color: var(--dz-brand-primary);
    box-shadow: 0 0 0 2px var(--dz-brand-primary-subtle);
}

.help-search-clear[b-tq77y3xnjh] {
    position: absolute;
    right: var(--dz-space-2);
    background: none;
    border: none;
    color: var(--dz-text-muted);
    cursor: pointer;
    padding: var(--dz-space-1);
    border-radius: var(--dz-radius-sm);
    transition: var(--dz-transition-colors);
}

.help-search-clear:hover[b-tq77y3xnjh] {
    color: var(--dz-text-primary);
    background: var(--dz-bg-tertiary);
}

/* Content Container */
.help-content-container[b-tq77y3xnjh] {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Help Sections */
.help-section[b-tq77y3xnjh] {
    border-bottom: 1px solid var(--dz-border-primary);
}

.help-section:last-child[b-tq77y3xnjh] {
    border-bottom: none;
}

.help-section-header[b-tq77y3xnjh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--dz-space-3) var(--dz-space-4);
    cursor: pointer;
    background: var(--dz-bg-secondary);
    transition: var(--dz-transition-colors);
    user-select: none;
}

.help-section-header:hover[b-tq77y3xnjh] {
    background: var(--dz-bg-tertiary);
}

.help-section-title[b-tq77y3xnjh] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-2);
    font-weight: var(--dz-font-weight-semibold);
    font-size: var(--dz-font-size-sm);
    color: var(--dz-text-primary);
}

.help-section-icon[b-tq77y3xnjh] {
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-secondary);
    transition: transform var(--dz-duration-200) var(--dz-ease-out);
}

.help-section.expanded .help-section-icon[b-tq77y3xnjh] {
    transform: rotate(90deg);
}

.help-section-count[b-tq77y3xnjh] {
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-muted);
    font-weight: var(--dz-font-weight-normal);
}

/* Section Content */
.help-section-content[b-tq77y3xnjh] {
    animation: slideDown-b-tq77y3xnjh var(--dz-duration-200) var(--dz-ease-out);
    overflow: hidden;
}

@keyframes slideDown-b-tq77y3xnjh {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 1000px;
    }
}

/* Help Items */
.help-item[b-tq77y3xnjh] {
    padding: var(--dz-space-3) var(--dz-space-4);
    border-bottom: 1px solid var(--dz-border-secondary);
    background: var(--dz-bg-primary);
}

.help-item:last-child[b-tq77y3xnjh] {
    border-bottom: none;
}

.help-item:hover[b-tq77y3xnjh] {
    background: var(--dz-bg-secondary);
}

.help-item-header[b-tq77y3xnjh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--dz-space-2);
}

.help-item-name[b-tq77y3xnjh] {
    font-weight: var(--dz-font-weight-medium);
    font-size: var(--dz-font-size-sm);
    color: var(--dz-text-primary);
}

.help-item-insert[b-tq77y3xnjh] {
    background: var(--dz-brand-primary);
    color: var(--dz-bg-primary);
    border: none;
    border-radius: var(--dz-radius-sm);
    padding: var(--dz-space-1) var(--dz-space-2);
    font-size: var(--dz-font-size-xs);
    cursor: pointer;
    transition: var(--dz-transition-colors);
    opacity: 0;
    transform: scale(0.9);
    transition: all var(--dz-duration-200) var(--dz-ease-out);
}

.help-item:hover .help-item-insert[b-tq77y3xnjh] {
    opacity: 1;
    transform: scale(1);
}

.help-item-insert:hover[b-tq77y3xnjh] {
    background: var(--dz-brand-primary-hover);
    transform: scale(1.05);
}

.help-item-insert:active[b-tq77y3xnjh] {
    background: var(--dz-brand-primary-active);
}

.help-item-description[b-tq77y3xnjh] {
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-secondary);
    margin-bottom: var(--dz-space-2);
    line-height: 1.4;
}

.help-item-syntax[b-tq77y3xnjh] {
    margin-bottom: var(--dz-space-2);
}

.help-item-syntax code[b-tq77y3xnjh] {
    background: var(--dz-bg-tertiary);
    color: var(--dz-text-primary);
    padding: var(--dz-space-1) var(--dz-space-2);
    border-radius: var(--dz-radius-sm);
    font-family: var(--dz-font-mono);
    font-size: var(--dz-font-size-xs);
    border: 1px solid var(--dz-border-secondary);
}

.help-item-example[b-tq77y3xnjh] {
    margin-top: var(--dz-space-2);
}

.help-example-label[b-tq77y3xnjh] {
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-muted);
    font-weight: var(--dz-font-weight-medium);
    display: block;
    margin-bottom: var(--dz-space-1);
}

.help-example-content[b-tq77y3xnjh] {
    background: var(--dz-bg-secondary);
    border: 1px solid var(--dz-border-secondary);
    border-radius: var(--dz-radius-base);
    overflow: hidden;
}

.help-example-content pre[b-tq77y3xnjh] {
    margin: 0;
    padding: var(--dz-space-2);
    background: transparent;
    border: none;
    font-family: var(--dz-font-mono);
    font-size: var(--dz-font-size-xs);
    line-height: 1.4;
    color: var(--dz-text-primary);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.help-example-content code[b-tq77y3xnjh] {
    background: transparent;
    padding: 0;
    border: none;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* No Results State */
.help-no-results[b-tq77y3xnjh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--dz-space-8) var(--dz-space-4);
    text-align: center;
    color: var(--dz-text-muted);
}

.help-no-results-icon[b-tq77y3xnjh] {
    font-size: var(--dz-font-size-2xl);
    margin-bottom: var(--dz-space-4);
    opacity: 0.5;
}

.help-no-results-text[b-tq77y3xnjh] {
    font-size: var(--dz-font-size-sm);
    margin-bottom: var(--dz-space-4);
    max-width: 250px;
}

.help-clear-search[b-tq77y3xnjh] {
    font-size: var(--dz-font-size-sm);
    padding: var(--dz-space-2) var(--dz-space-4);
}

/* Footer */
.help-footer[b-tq77y3xnjh] {
    padding: var(--dz-space-3) var(--dz-space-4);
    border-top: 1px solid var(--dz-border-primary);
    background: var(--dz-bg-secondary);
    flex-shrink: 0;
}

.help-external-link[b-tq77y3xnjh] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-2);
    color: var(--dz-brand-primary);
    text-decoration: none;
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-medium);
    transition: var(--dz-transition-colors);
}

.help-external-link:hover[b-tq77y3xnjh] {
    color: var(--dz-brand-primary-hover);
    text-decoration: underline;
}

.help-external-link i[b-tq77y3xnjh] {
    font-size: var(--dz-font-size-xs);
}

/* Dark Theme Adjustments */
[data-theme="dark"] .help-search-field[b-tq77y3xnjh] {
    background: var(--dz-bg-tertiary);
    border-color: var(--dz-border-secondary);
}

[data-theme="dark"] .help-item-syntax code[b-tq77y3xnjh] {
    background: var(--dz-bg-quaternary);
    border-color: var(--dz-border-tertiary);
}

[data-theme="dark"] .help-example-content[b-tq77y3xnjh] {
    background: var(--dz-bg-quaternary);
    border-color: var(--dz-border-tertiary);
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .help-search-field:focus[b-tq77y3xnjh] {
        box-shadow: 0 0 0 3px var(--dz-brand-primary);
    }
    
    .help-item-syntax code[b-tq77y3xnjh],
    .help-example-content[b-tq77y3xnjh] {
        border-width: 2px;
    }
    
    .help-item-insert:focus[b-tq77y3xnjh] {
        outline: 2px solid var(--dz-focus-ring-color);
        outline-offset: 2px;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .help-section-icon[b-tq77y3xnjh] {
        transition: none;
    }
    
    .help-section-content[b-tq77y3xnjh] {
        animation: none;
    }
    
    .help-item-insert[b-tq77y3xnjh] {
        transition: none;
        opacity: 1;
        transform: scale(1);
    }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .help-search-container[b-tq77y3xnjh] {
        padding: var(--dz-space-2);
    }
    
    .help-section-header[b-tq77y3xnjh] {
        padding: var(--dz-space-2_5) var(--dz-space-3);
    }
    
    .help-item[b-tq77y3xnjh] {
        padding: var(--dz-space-2_5) var(--dz-space-3);
    }
    
    .help-item-insert[b-tq77y3xnjh] {
        opacity: 1;
        transform: scale(1);
    }
    
    .help-footer[b-tq77y3xnjh] {
        padding: var(--dz-space-2_5) var(--dz-space-3);
    }
}

/* Focus States for Accessibility */
.help-section-header:focus-visible[b-tq77y3xnjh] {
    outline: 2px solid var(--dz-focus-ring-color);
    outline-offset: -2px;
}

.help-search-clear:focus-visible[b-tq77y3xnjh],
.help-item-insert:focus-visible[b-tq77y3xnjh],
.help-clear-search:focus-visible[b-tq77y3xnjh] {
    outline: 2px solid var(--dz-focus-ring-color);
    outline-offset: 2px;
}

/* Smooth Scrolling for Section Navigation */
.help-content-container[b-tq77y3xnjh] {
    scroll-behavior: smooth;
}

/* Loading State (for future use) */
.help-loading[b-tq77y3xnjh] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--dz-space-8);
    color: var(--dz-text-muted);
}

.help-loading i[b-tq77y3xnjh] {
    margin-right: var(--dz-space-2);
    animation: spin-b-tq77y3xnjh var(--dz-duration-1000) linear infinite;
}

@keyframes spin-b-tq77y3xnjh {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* /Components/Editors/Layout/Panels/MathHelpPanel.razor.rz.scp.css */
/* Math Help Panel Styles */
.math-help-content[b-hh9ewcr9s9] {
    --math-primary-color: #8B5A3C;
    --math-secondary-color: #A0522D;
    --math-accent-color: #D2691E;
    --math-text-color: var(--dz-text-primary);
    --math-bg-color: var(--dz-bg-primary);
    --math-border-color: var(--dz-border-primary);
    
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--math-bg-color);
    color: var(--math-text-color);
    font-size: var(--dz-font-size-sm);
}

/* Search Container */
.help-search-container[b-hh9ewcr9s9] {
    padding: var(--dz-space-3);
    border-bottom: 1px solid var(--math-border-color);
    background-color: var(--dz-bg-secondary);
}

.help-search-input[b-hh9ewcr9s9] {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--math-border-color);
    border-radius: var(--dz-radius-md);
    background-color: var(--math-bg-color);
    overflow: hidden;
}

.help-search-icon[b-hh9ewcr9s9] {
    position: absolute;
    left: var(--dz-space-3);
    color: var(--dz-text-muted);
    z-index: 2;
    pointer-events: none;
}

.help-search-field[b-hh9ewcr9s9] {
    width: 100%;
    padding: var(--dz-space-2) var(--dz-space-3) var(--dz-space-2) var(--dz-space-8);
    border: none;
    outline: none;
    background: transparent;
    color: var(--math-text-color);
    font-size: var(--dz-font-size-sm);
}

.help-search-field[b-hh9ewcr9s9]::placeholder {
    color: var(--dz-text-muted);
}

.help-search-clear[b-hh9ewcr9s9] {
    position: absolute;
    right: var(--dz-space-2);
    padding: var(--dz-space-1);
    border: none;
    background: transparent;
    color: var(--dz-text-muted);
    cursor: pointer;
    border-radius: var(--dz-radius-sm);
    font-size: var(--dz-font-size-xs);
    z-index: 2;
}

.help-search-clear:hover[b-hh9ewcr9s9] {
    background-color: var(--dz-bg-secondary);
    color: var(--math-secondary-color);
}

/* Help Content Container */
.help-content-container[b-hh9ewcr9s9] {
    flex: 1;
    overflow-y: auto;
    padding: var(--dz-space-2);
}

/* Help Sections */
.help-section[b-hh9ewcr9s9] {
    margin-bottom: var(--dz-space-3);
    border: 1px solid var(--math-border-color);
    border-radius: var(--dz-radius-md);
    background-color: var(--math-bg-color);
    overflow: hidden;
}

.help-section.expanded[b-hh9ewcr9s9] {
    border-color: var(--math-accent-color);
}

.help-section-header[b-hh9ewcr9s9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--dz-space-3);
    cursor: pointer;
    user-select: none;
    background-color: var(--dz-bg-secondary);
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

.help-section-header:hover[b-hh9ewcr9s9] {
    background-color: var(--dz-bg-tertiary);
}

.help-section.expanded .help-section-header[b-hh9ewcr9s9] {
    border-bottom-color: var(--math-border-color);
    background-color: var(--math-accent-color);
    color: white;
}

.help-section-title[b-hh9ewcr9s9] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-2);
    font-weight: var(--dz-font-weight-medium);
    font-size: var(--dz-font-size-sm);
}

.help-section-icon[b-hh9ewcr9s9] {
    font-size: var(--dz-font-size-xs);
    color: var(--math-primary-color);
    transition: transform 0.2s ease;
}

.help-section.expanded .help-section-icon[b-hh9ewcr9s9] {
    color: white;
}

.help-section-count[b-hh9ewcr9s9] {
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-muted);
    background-color: var(--dz-bg-tertiary);
    padding: var(--dz-space-1) var(--dz-space-2);
    border-radius: var(--dz-radius-full);
}

.help-section.expanded .help-section-count[b-hh9ewcr9s9] {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Help Section Content */
.help-section-content[b-hh9ewcr9s9] {
    padding: var(--dz-space-3);
}

/* Help Items */
.help-item[b-hh9ewcr9s9] {
    padding: var(--dz-space-3);
    border: 1px solid var(--math-border-color);
    border-radius: var(--dz-radius-md);
    background-color: var(--math-bg-color);
    margin-bottom: var(--dz-space-3);
    transition: all 0.2s ease;
}

.help-item:last-child[b-hh9ewcr9s9] {
    margin-bottom: 0;
}

.help-item:hover[b-hh9ewcr9s9] {
    border-color: var(--math-accent-color);
    box-shadow: var(--dz-shadow-sm);
}

.help-item-header[b-hh9ewcr9s9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--dz-space-2);
}

.help-item-name[b-hh9ewcr9s9] {
    font-weight: var(--dz-font-weight-medium);
    color: var(--math-primary-color);
    font-size: var(--dz-font-size-sm);
}

.help-item-insert[b-hh9ewcr9s9] {
    padding: var(--dz-space-1) var(--dz-space-2);
    border: 1px solid var(--math-accent-color);
    background-color: transparent;
    color: var(--math-accent-color);
    border-radius: var(--dz-radius-sm);
    cursor: pointer;
    font-size: var(--dz-font-size-xs);
    transition: all 0.2s ease;
}

.help-item-insert:hover[b-hh9ewcr9s9] {
    background-color: var(--math-accent-color);
    color: white;
}

.help-item-description[b-hh9ewcr9s9] {
    color: var(--dz-text-secondary);
    font-size: var(--dz-font-size-xs);
    margin-bottom: var(--dz-space-2);
    line-height: 1.4;
}

.help-item-syntax[b-hh9ewcr9s9] {
    margin-bottom: var(--dz-space-2);
}

.help-item-syntax code[b-hh9ewcr9s9] {
    background-color: var(--dz-bg-secondary);
    border: 1px solid var(--math-border-color);
    border-radius: var(--dz-radius-sm);
    padding: var(--dz-space-1) var(--dz-space-2);
    font-family: var(--dz-font-mono);
    font-size: var(--dz-font-size-xs);
    color: var(--math-secondary-color);
    font-weight: var(--dz-font-weight-medium);
}

.help-item-example[b-hh9ewcr9s9] {
    margin-bottom: var(--dz-space-2);
}

.help-example-label[b-hh9ewcr9s9] {
    display: block;
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-secondary);
    margin-bottom: var(--dz-space-1);
    font-weight: var(--dz-font-weight-medium);
}

.help-example-content[b-hh9ewcr9s9] {
    background-color: var(--dz-bg-secondary);
    border: 1px solid var(--math-border-color);
    border-radius: var(--dz-radius-sm);
    overflow-x: auto;
}

.help-example-content pre[b-hh9ewcr9s9] {
    margin: 0;
    padding: var(--dz-space-2);
    white-space: pre-wrap;
    word-break: break-word;
}

.help-example-content code[b-hh9ewcr9s9] {
    font-family: var(--dz-font-mono);
    font-size: var(--dz-font-size-xs);
    color: var(--math-secondary-color);
    background: transparent;
    border: none;
    padding: 0;
}

/* Math Rendered Examples */
.help-item-rendered[b-hh9ewcr9s9] {
    margin-bottom: var(--dz-space-2);
}

.help-rendered-content[b-hh9ewcr9s9] {
    background-color: var(--dz-bg-tertiary);
    border: 1px solid var(--math-border-color);
    border-radius: var(--dz-radius-sm);
    padding: var(--dz-space-3);
    font-family: var(--dz-font-sans);
    font-size: var(--dz-font-size-sm);
    line-height: 1.6;
    color: var(--math-text-color);
}

/* No Results */
.help-no-results[b-hh9ewcr9s9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--dz-space-12) var(--dz-space-6);
    text-align: center;
}

.help-no-results-icon[b-hh9ewcr9s9] {
    font-size: 2rem;
    color: var(--dz-text-muted);
    margin-bottom: var(--dz-space-4);
}

.help-no-results-text[b-hh9ewcr9s9] {
    color: var(--dz-text-secondary);
    margin-bottom: var(--dz-space-4);
}

.help-clear-search[b-hh9ewcr9s9] {
    padding: var(--dz-space-2) var(--dz-space-4);
    border: 1px solid var(--math-border-color);
    background-color: transparent;
    color: var(--math-primary-color);
    border-radius: var(--dz-radius-md);
    cursor: pointer;
    font-size: var(--dz-font-size-sm);
    transition: all 0.2s ease;
}

.help-clear-search:hover[b-hh9ewcr9s9] {
    background-color: var(--math-accent-color);
    border-color: var(--math-accent-color);
    color: white;
}

/* Footer */
.help-footer[b-hh9ewcr9s9] {
    padding: var(--dz-space-3);
    border-top: 1px solid var(--math-border-color);
    background-color: var(--dz-bg-secondary);
}

.help-external-link[b-hh9ewcr9s9] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-2);
    color: var(--math-primary-color);
    text-decoration: none;
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-medium);
    transition: color 0.2s ease;
}

.help-external-link:hover[b-hh9ewcr9s9] {
    color: var(--math-accent-color);
    text-decoration: none;
}

.help-external-link i[b-hh9ewcr9s9] {
    font-size: var(--dz-font-size-xs);
}

/* Dark Theme Adjustments */
[data-theme="dark"] .math-help-content[b-hh9ewcr9s9] {
    --math-primary-color: #D2691E;
    --math-secondary-color: #CD853F;
    --math-accent-color: #FF8C00;
}

/* Responsive Design */
@media (max-width: 768px) {
    .help-search-container[b-hh9ewcr9s9] {
        padding: var(--dz-space-2);
    }
    
    .help-content-container[b-hh9ewcr9s9] {
        padding: var(--dz-space-1);
    }
    
    .help-section-header[b-hh9ewcr9s9] {
        padding: var(--dz-space-2);
    }
    
    .help-section-content[b-hh9ewcr9s9] {
        padding: var(--dz-space-2);
    }
    
    .help-item[b-hh9ewcr9s9] {
        padding: var(--dz-space-2);
    }
}
/* /Components/Editors/Layout/Panels/MermaidHelpPanel.razor.rz.scp.css */
/* Mermaid Help Panel - Design System Styled (Shared styles with Markdown Help Panel) */

.mermaid-help-content[b-va13ln6jpn] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Search Container */
.help-search-container[b-va13ln6jpn] {
    padding: var(--dz-space-3);
    border-bottom: 1px solid var(--dz-border-primary);
    background: var(--dz-bg-secondary);
    flex-shrink: 0;
}

.help-search-input[b-va13ln6jpn] {
    position: relative;
    display: flex;
    align-items: center;
}

.help-search-icon[b-va13ln6jpn] {
    position: absolute;
    left: var(--dz-space-3);
    color: var(--dz-text-muted);
    z-index: 1;
    font-size: var(--dz-font-size-sm);
}

.help-search-field[b-va13ln6jpn] {
    padding-left: calc(var(--dz-space-3) + var(--dz-font-size-sm) + var(--dz-space-2));
    padding-right: var(--dz-space-8);
    font-size: var(--dz-font-size-sm);
    border: 1px solid var(--dz-border-primary);
    border-radius: var(--dz-radius-base);
    background: var(--dz-bg-primary);
    color: var(--dz-text-primary);
    transition: var(--dz-transition-all);
}

.help-search-field:focus[b-va13ln6jpn] {
    outline: none;
    border-color: var(--dz-brand-primary);
    box-shadow: 0 0 0 2px var(--dz-brand-primary-subtle);
}

.help-search-clear[b-va13ln6jpn] {
    position: absolute;
    right: var(--dz-space-2);
    background: none;
    border: none;
    color: var(--dz-text-muted);
    cursor: pointer;
    padding: var(--dz-space-1);
    border-radius: var(--dz-radius-sm);
    transition: var(--dz-transition-colors);
}

.help-search-clear:hover[b-va13ln6jpn] {
    color: var(--dz-text-primary);
    background: var(--dz-bg-tertiary);
}

/* Content Container */
.help-content-container[b-va13ln6jpn] {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Help Sections */
.help-section[b-va13ln6jpn] {
    border-bottom: 1px solid var(--dz-border-primary);
}

.help-section:last-child[b-va13ln6jpn] {
    border-bottom: none;
}

.help-section-header[b-va13ln6jpn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--dz-space-3) var(--dz-space-4);
    cursor: pointer;
    background: var(--dz-bg-secondary);
    transition: var(--dz-transition-colors);
    user-select: none;
}

.help-section-header:hover[b-va13ln6jpn] {
    background: var(--dz-bg-tertiary);
}

.help-section-title[b-va13ln6jpn] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-2);
    font-weight: var(--dz-font-weight-semibold);
    font-size: var(--dz-font-size-sm);
    color: var(--dz-text-primary);
}

.help-section-icon[b-va13ln6jpn] {
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-secondary);
    transition: transform var(--dz-duration-200) var(--dz-ease-out);
}

.help-section.expanded .help-section-icon[b-va13ln6jpn] {
    transform: rotate(90deg);
}

.help-section-count[b-va13ln6jpn] {
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-muted);
    font-weight: var(--dz-font-weight-normal);
}

/* Section Content */
.help-section-content[b-va13ln6jpn] {
    animation: slideDown-b-va13ln6jpn var(--dz-duration-200) var(--dz-ease-out);
    overflow: hidden;
}

@keyframes slideDown-b-va13ln6jpn {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 1000px;
    }
}

/* Help Items */
.help-item[b-va13ln6jpn] {
    padding: var(--dz-space-3) var(--dz-space-4);
    border-bottom: 1px solid var(--dz-border-secondary);
    background: var(--dz-bg-primary);
}

.help-item:last-child[b-va13ln6jpn] {
    border-bottom: none;
}

.help-item:hover[b-va13ln6jpn] {
    background: var(--dz-bg-secondary);
}

.help-item-header[b-va13ln6jpn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--dz-space-2);
}

.help-item-name[b-va13ln6jpn] {
    font-weight: var(--dz-font-weight-medium);
    font-size: var(--dz-font-size-sm);
    color: var(--dz-text-primary);
}

.help-item-insert[b-va13ln6jpn] {
    background: var(--dz-brand-primary);
    color: var(--dz-bg-primary);
    border: none;
    border-radius: var(--dz-radius-sm);
    padding: var(--dz-space-1) var(--dz-space-2);
    font-size: var(--dz-font-size-xs);
    cursor: pointer;
    transition: var(--dz-transition-colors);
    opacity: 0;
    transform: scale(0.9);
    transition: all var(--dz-duration-200) var(--dz-ease-out);
}

.help-item:hover .help-item-insert[b-va13ln6jpn] {
    opacity: 1;
    transform: scale(1);
}

.help-item-insert:hover[b-va13ln6jpn] {
    background: var(--dz-brand-primary-hover);
    transform: scale(1.05);
}

.help-item-insert:active[b-va13ln6jpn] {
    background: var(--dz-brand-primary-active);
}

.help-item-description[b-va13ln6jpn] {
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-secondary);
    margin-bottom: var(--dz-space-2);
    line-height: 1.4;
}

.help-item-syntax[b-va13ln6jpn] {
    margin-bottom: var(--dz-space-2);
}

.help-item-syntax code[b-va13ln6jpn] {
    background: var(--dz-bg-tertiary);
    color: var(--dz-text-primary);
    padding: var(--dz-space-1) var(--dz-space-2);
    border-radius: var(--dz-radius-sm);
    font-family: var(--dz-font-mono);
    font-size: var(--dz-font-size-xs);
    border: 1px solid var(--dz-border-secondary);
}

.help-item-example[b-va13ln6jpn] {
    margin-top: var(--dz-space-2);
}

.help-example-label[b-va13ln6jpn] {
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-muted);
    font-weight: var(--dz-font-weight-medium);
    display: block;
    margin-bottom: var(--dz-space-1);
}

.help-example-content[b-va13ln6jpn] {
    background: var(--dz-bg-secondary);
    border: 1px solid var(--dz-border-secondary);
    border-radius: var(--dz-radius-base);
    overflow: hidden;
}

.help-example-content pre[b-va13ln6jpn] {
    margin: 0;
    padding: var(--dz-space-2);
    background: transparent;
    border: none;
    font-family: var(--dz-font-mono);
    font-size: var(--dz-font-size-xs);
    line-height: 1.4;
    color: var(--dz-text-primary);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.help-example-content code[b-va13ln6jpn] {
    background: transparent;
    padding: 0;
    border: none;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* No Results State */
.help-no-results[b-va13ln6jpn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--dz-space-8) var(--dz-space-4);
    text-align: center;
    color: var(--dz-text-muted);
}

.help-no-results-icon[b-va13ln6jpn] {
    font-size: var(--dz-font-size-2xl);
    margin-bottom: var(--dz-space-4);
    opacity: 0.5;
}

.help-no-results-text[b-va13ln6jpn] {
    font-size: var(--dz-font-size-sm);
    margin-bottom: var(--dz-space-4);
    max-width: 250px;
}

.help-clear-search[b-va13ln6jpn] {
    font-size: var(--dz-font-size-sm);
    padding: var(--dz-space-2) var(--dz-space-4);
}

/* Footer */
.help-footer[b-va13ln6jpn] {
    padding: var(--dz-space-3) var(--dz-space-4);
    border-top: 1px solid var(--dz-border-primary);
    background: var(--dz-bg-secondary);
    flex-shrink: 0;
}

.help-external-link[b-va13ln6jpn] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-2);
    color: var(--dz-brand-primary);
    text-decoration: none;
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-medium);
    transition: var(--dz-transition-colors);
}

.help-external-link:hover[b-va13ln6jpn] {
    color: var(--dz-brand-primary-hover);
    text-decoration: underline;
}

.help-external-link i[b-va13ln6jpn] {
    font-size: var(--dz-font-size-xs);
}

/* Mermaid-specific color highlights */
.help-item-syntax code[b-va13ln6jpn] {
    color: #ff6600; /* Mermaid orange theme */
}

.mermaid-help-content .help-external-link[b-va13ln6jpn] {
    color: #ff6600; /* Mermaid brand color */
}

.mermaid-help-content .help-external-link:hover[b-va13ln6jpn] {
    color: #e55a00; /* Darker shade for hover */
}

.mermaid-help-content .help-item-insert[b-va13ln6jpn] {
    background: #ff6600;
}

.mermaid-help-content .help-item-insert:hover[b-va13ln6jpn] {
    background: #e55a00;
}

.mermaid-help-content .help-item-insert:active[b-va13ln6jpn] {
    background: #cc4d00;
}

/* Dark Theme Adjustments */
[data-theme="dark"] .help-search-field[b-va13ln6jpn] {
    background: var(--dz-bg-tertiary);
    border-color: var(--dz-border-secondary);
}

[data-theme="dark"] .help-item-syntax code[b-va13ln6jpn] {
    background: var(--dz-bg-quaternary);
    border-color: var(--dz-border-tertiary);
}

[data-theme="dark"] .help-example-content[b-va13ln6jpn] {
    background: var(--dz-bg-quaternary);
    border-color: var(--dz-border-tertiary);
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .help-search-field:focus[b-va13ln6jpn] {
        box-shadow: 0 0 0 3px var(--dz-brand-primary);
    }
    
    .help-item-syntax code[b-va13ln6jpn],
    .help-example-content[b-va13ln6jpn] {
        border-width: 2px;
    }
    
    .help-item-insert:focus[b-va13ln6jpn] {
        outline: 2px solid var(--dz-focus-ring-color);
        outline-offset: 2px;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .help-section-icon[b-va13ln6jpn] {
        transition: none;
    }
    
    .help-section-content[b-va13ln6jpn] {
        animation: none;
    }
    
    .help-item-insert[b-va13ln6jpn] {
        transition: none;
        opacity: 1;
        transform: scale(1);
    }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .help-search-container[b-va13ln6jpn] {
        padding: var(--dz-space-2);
    }
    
    .help-section-header[b-va13ln6jpn] {
        padding: var(--dz-space-2_5) var(--dz-space-3);
    }
    
    .help-item[b-va13ln6jpn] {
        padding: var(--dz-space-2_5) var(--dz-space-3);
    }
    
    .help-item-insert[b-va13ln6jpn] {
        opacity: 1;
        transform: scale(1);
    }
    
    .help-footer[b-va13ln6jpn] {
        padding: var(--dz-space-2_5) var(--dz-space-3);
    }
}

/* Focus States for Accessibility */
.help-section-header:focus-visible[b-va13ln6jpn] {
    outline: 2px solid var(--dz-focus-ring-color);
    outline-offset: -2px;
}

.help-search-clear:focus-visible[b-va13ln6jpn],
.help-item-insert:focus-visible[b-va13ln6jpn],
.help-clear-search:focus-visible[b-va13ln6jpn] {
    outline: 2px solid var(--dz-focus-ring-color);
    outline-offset: 2px;
}

/* Smooth Scrolling for Section Navigation */
.help-content-container[b-va13ln6jpn] {
    scroll-behavior: smooth;
}

/* Loading State (for future use) */
.help-loading[b-va13ln6jpn] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--dz-space-8);
    color: var(--dz-text-muted);
}

.help-loading i[b-va13ln6jpn] {
    margin-right: var(--dz-space-2);
    animation: spin-b-va13ln6jpn var(--dz-duration-1000) linear infinite;
}

@keyframes spin-b-va13ln6jpn {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* /Components/Editors/Renderers/EnhancedDocumentRenderer.razor.rz.scp.css */
/* EnhancedDocumentRenderer - Theme Inheritance Design
 * FIXED: Inherits preview theme from persistent .preview-pane parent container
 * No longer applies themes directly to transient content
 */

.enhanced-document-renderer[b-i4aopz6lrx] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    font-family: var(--dz-font-sans);
    /* FIXED: Inherit theme from parent .preview-pane[data-preview-theme] */
    background: inherit;
    color: inherit;
    /* MINIMAL STYLING: Remove heavy borders, shadows, and rounded corners */
    border: none;
    border-radius: 0;
    box-shadow: none;
    /* Subtle boundary indicator for zoom/pan/scroll navigation */
    position: relative;
    transition: var(--dz-transition-colors);
    /* Prevent scrollbar clipping without visual noise */
    padding-right: 4px;
    margin-right: -4px;
    box-sizing: border-box;
}

/* Subtle visual boundary indicator - only visible during interactions */
.enhanced-document-renderer[b-i4aopz6lrx]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid transparent;
    pointer-events: none;
    transition: border-color var(--dz-duration-200) var(--dz-ease-out);
}

/* Show boundary on hover/focus for navigation context */
.enhanced-document-renderer:hover[b-i4aopz6lrx]::before,
.enhanced-document-renderer:focus-within[b-i4aopz6lrx]::before {
    border-color: var(--dz-border-muted);
}

.enhanced-document-renderer.responsive[b-i4aopz6lrx] {
    max-width: 100%;
}

.enhanced-document-renderer:focus-within[b-i4aopz6lrx] {
    border-color: var(--dz-border-focus);
    box-shadow: var(--dz-shadow-md);
}

/* Document Header */
.document-header[b-i4aopz6lrx] {
    background: var(--dz-bg-secondary);
    border-bottom: 1px solid var(--dz-border-secondary);
    padding: var(--dz-space-4) var(--dz-space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.document-title[b-i4aopz6lrx] {
    font-size: var(--dz-font-size-xl);
    font-weight: var(--dz-font-weight-semibold);
    color: var(--dz-text-primary);
    margin: 0;
}

.document-meta[b-i4aopz6lrx] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-3);
    font-size: var(--dz-font-size-sm);
    color: var(--dz-text-muted);
}

.document-actions[b-i4aopz6lrx] {
    display: flex;
    gap: var(--dz-space-2);
}

.document-action[b-i4aopz6lrx] {
    background: none;
    border: 1px solid var(--dz-border-primary);
    color: var(--dz-text-secondary);
    padding: var(--dz-space-1) var(--dz-space-2);
    border-radius: var(--dz-radius-sm);
    font-size: var(--dz-font-size-xs);
    cursor: pointer;
    transition: var(--dz-transition-colors);
    font-family: var(--dz-font-sans);
}

.document-action:hover[b-i4aopz6lrx] {
    background-color: var(--dz-bg-secondary);
    color: var(--dz-text-primary);
}

/* Document Content - FIXED: Inherits theme from persistent parent container */
.document-content[b-i4aopz6lrx] {
    /* DEVELOPER-FOCUSED: Minimal padding for maximum content visibility */
    padding: var(--dz-space-3); /* Reduced from space-6 (24px) to space-3 (12px) */
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    /* Professional scrollbar styling */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--dz-scrollbar-thumb) var(--dz-scrollbar-track); /* Firefox */
    
    /* FIXED: Inherit theme from parent .preview-pane instead of direct tokens */
    background: inherit;
    color: inherit;
    transition: background-color var(--dz-duration-200) var(--dz-ease-out),
                color var(--dz-duration-200) var(--dz-ease-out);
                
    /* PROBLEM 1 FIX: Ensure document content doesn't constrain math rendering */
    contain: none; /* Remove CSS containment that might clip content */
}

/* Markdown Section - Clean, minimal styling with inherited theme */
.document-markdown-section[b-i4aopz6lrx] {
    /* Remove artificial container styling */
}

.markdown-content[b-i4aopz6lrx] {
    font-family: var(--dz-font-sans);
    line-height: var(--dz-line-height-relaxed);
    color: inherit; /* FIXED: Inherit from parent instead of direct token */
}

.markdown-content h1[b-i4aopz6lrx],
.markdown-content h2[b-i4aopz6lrx],
.markdown-content h3[b-i4aopz6lrx],
.markdown-content h4[b-i4aopz6lrx],
.markdown-content h5[b-i4aopz6lrx],
.markdown-content h6[b-i4aopz6lrx] {
    color: inherit; /* FIXED: Ensure headings inherit preview theme colors */
}

.markdown-content p[b-i4aopz6lrx],
.markdown-content li[b-i4aopz6lrx],
.markdown-content td[b-i4aopz6lrx],
.markdown-content th[b-i4aopz6lrx],
.markdown-content span[b-i4aopz6lrx],
.markdown-content div[b-i4aopz6lrx] {
    color: inherit; /* FIXED: Ensure all text elements inherit theme colors */
}

/* Enhanced scrollbar styling for webkit browsers */
.document-content[b-i4aopz6lrx]::-webkit-scrollbar {
    width: 12px; /* Reduced from 14px for less visual weight */
    background: var(--dz-scrollbar-track);
}

.document-content[b-i4aopz6lrx]::-webkit-scrollbar-track {
    background: var(--dz-scrollbar-track);
    border-radius: var(--dz-radius-sm);
    margin: 2px 0; /* Reduced margin */
}

.document-content[b-i4aopz6lrx]::-webkit-scrollbar-thumb {
    background: var(--dz-scrollbar-thumb);
    border-radius: var(--dz-radius-sm);
    border: 1px solid var(--dz-scrollbar-track); /* Reduced border thickness */
    min-height: 20px;
}

.document-content[b-i4aopz6lrx]::-webkit-scrollbar-thumb:hover {
    background: var(--dz-scrollbar-thumb-hover);
}

.document-content[b-i4aopz6lrx]::-webkit-scrollbar-thumb:active {
    background: var(--dz-scrollbar-thumb-active);
}

.document-content[b-i4aopz6lrx]::-webkit-scrollbar-corner {
    background: var(--dz-scrollbar-track);
}

/* Document Sections - Unified minimal styling */
.document-markdown-section[b-i4aopz6lrx],
.document-diagram-section[b-i4aopz6lrx],
.document-math-section[b-i4aopz6lrx],
.document-plaintext-section[b-i4aopz6lrx] {
    /* UNIFIED DESIGN: Remove visual fragmentation between sections */
    margin-bottom: var(--dz-space-4); /* Reduced spacing between sections */
    position: relative;
    /* Remove all borders, backgrounds, and padding that create "boxes" */
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

/* Math Section - Tighter spacing override */
.document-math-section[b-i4aopz6lrx] {
    margin-bottom: var(--dz-space-1); /* REDUCED: Minimal spacing after math sections */
}

.document-markdown-section:last-child[b-i4aopz6lrx],
.document-diagram-section:last-child[b-i4aopz6lrx],
.document-math-section:last-child[b-i4aopz6lrx],
.document-plaintext-section:last-child[b-i4aopz6lrx] {
    margin-bottom: 0;
}

/*Removed because it adds section lines, now thead user canvas decide iframe they want a line*/
/* Minimal divider between sections - subtle visual separation only */
/*.document-markdown-section:not(:last-child)::after,
.document-diagram-section:not(:last-child)::after,
.document-plaintext-section:not(:last-child)::after {
    content: '';
    display: block;
    height: 1px;
    background: var(--dz-border-muted);
    margin: var(--dz-space-4) 0 0 0;
    opacity: 0.3;
}*/

/* MATH THEMING FIX: Remove divider lines from math sections */
.document-math-section:not(:last-child)[b-i4aopz6lrx]::after {
    display: none !important;
}

/* ADDITIONAL FIX: Remove any pseudo-elements from math containers */
.document-math-section[b-i4aopz6lrx]::before,
.document-math-section[b-i4aopz6lrx]::after,
.math-content[b-i4aopz6lrx]::before,
.math-content[b-i4aopz6lrx]::after,
.math-container[b-i4aopz6lrx]::before,
.math-container[b-i4aopz6lrx]::after {
    display: none !important;
}

/* Diagram Section - Focused on content with preview theme support */
.document-diagram-section[b-i4aopz6lrx] {
    display: flex;
    flex-direction: column;
    min-height: 200px;
}

.diagram-container[b-i4aopz6lrx] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    /* Use inherited theme colors for proper theming - SIMPLIFIED */
    background: inherit; /* FIXED: Inherit background from parent */
    border-radius: var(--dz-radius-sm);
    border: 1px solid var(--dz-content-border);
    position: relative;
}

/* Math Section - Clean presentation with preview theming */
.document-math-section[b-i4aopz6lrx] {
    text-align: center;
    padding: var(--dz-space-1) 0; /* REDUCED: Minimal vertical padding */
    /* PROBLEM 1 FIX: Ensure sufficient height for tall math symbols */
    min-height: 120px; /* INCREASED from 100px */
    overflow: visible;
    /* ADDED: Ensure the section itself doesn't constrain child elements */
    display: block;
    position: relative;
}

.math-content[b-i4aopz6lrx] {
    font-family: var(--dz-font-mono);
    font-size: var(--dz-font-size-lg);
    color: inherit; /* FIXED: Inherit theme color instead of direct token */
    background: inherit; /* FIXED: Inherit background instead of direct token */
    /* PROBLEM 1 FIX: Much more vertical padding to prevent clipping */
    padding: var(--dz-space-8) var(--dz-space-3); /* INCREASED from space-5 to space-8 */
    border-radius: var(--dz-radius-sm);
    border: 1px solid var(--dz-content-border);
    display: inline-block;
    min-width: 200px;
    /* PROBLEM 1 FIX: Allow tall symbols to extend beyond container */
    overflow: visible;
    line-height: 2.0; /* INCREASED from 1.6 to 2.0 for more vertical space */
    /* ADDED: Ensure the container itself has adequate height */
    min-height: 80px;
    vertical-align: middle;
    box-sizing: border-box;
}

/* PROBLEM 1 FIX: Comprehensive MathJax clipping prevention */
.document-math-section mjx-container[b-i4aopz6lrx],
.document-math-section .MathJax[b-i4aopz6lrx],
.document-content mjx-container[b-i4aopz6lrx],
.document-content .MathJax[b-i4aopz6lrx],
mjx-container[b-i4aopz6lrx],
.MathJax[b-i4aopz6lrx] {
    overflow: visible !important;
    /* Ensure sufficient vertical space for tall symbols */
    padding: var(--dz-space-2) 0 !important;
    margin: var(--dz-space-2) 0 !important;
    /* Remove any height constraints that might clip symbols */
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
    /* THEME FIX: Force MathJax to inherit preview theme colors */
    color: var(--dz-preview-text) !important;
}

/* Target specific MathJax internal elements that might be clipping */
mjx-math[b-i4aopz6lrx],
mjx-mrow[b-i4aopz6lrx],
mjx-mo[b-i4aopz6lrx],
mjx-mi[b-i4aopz6lrx],
mjx-mn[b-i4aopz6lrx],
.MathJax_SVG[b-i4aopz6lrx],
.MathJax_Display[b-i4aopz6lrx] {
    overflow: visible !important;
    /* Ensure math elements can extend vertically */
    max-height: none !important;
    height: auto !important;
    /* THEME FIX: Ensure all MathJax elements inherit proper colors */
    color: var(--dz-preview-text) !important;
}

/* Specific fix for MathJax display math that might be in containers */
.document-content mjx-container[display="true"][b-i4aopz6lrx],
.document-content .MathJax_Display[b-i4aopz6lrx] {
    overflow: visible !important;
    padding: var(--dz-space-3) 0 !important;
    margin: var(--dz-space-3) 0 !important;
    /* THEME FIX: Display math color inheritance */
    color: var(--dz-preview-text) !important;
}

/* COMPREHENSIVE MATHJAX THEME INTEGRATION */
/* Force MathJax CHTML output to respect theme colors in all contexts */
.document-content mjx-container[b-i4aopz6lrx],
.document-content mjx-container *[b-i4aopz6lrx],
.document-content mjx-math[b-i4aopz6lrx],
.document-content mjx-math *[b-i4aopz6lrx],
.document-content mjx-mrow[b-i4aopz6lrx],
.document-content mjx-mrow *[b-i4aopz6lrx],
.document-content mjx-mo[b-i4aopz6lrx],
.document-content mjx-mi[b-i4aopz6lrx],
.document-content mjx-mn[b-i4aopz6lrx],
.document-content mjx-mfrac[b-i4aopz6lrx],
.document-content mjx-mfrac *[b-i4aopz6lrx],
.document-content mjx-msqrt[b-i4aopz6lrx],
.document-content mjx-msqrt *[b-i4aopz6lrx],
.document-content mjx-mroot[b-i4aopz6lrx],
.document-content mjx-mroot *[b-i4aopz6lrx],
.document-content mjx-msub[b-i4aopz6lrx],
.document-content mjx-msub *[b-i4aopz6lrx],
.document-content mjx-msup[b-i4aopz6lrx],
.document-content mjx-msup *[b-i4aopz6lrx],
.document-content mjx-msubsup[b-i4aopz6lrx],
.document-content mjx-msubsup *[b-i4aopz6lrx],
.document-content mjx-munder[b-i4aopz6lrx],
.document-content mjx-munder *[b-i4aopz6lrx],
.document-content mjx-mover[b-i4aopz6lrx],
.document-content mjx-mover *[b-i4aopz6lrx],
.document-content mjx-munderover[b-i4aopz6lrx],
.document-content mjx-munderover *[b-i4aopz6lrx],
.document-content mjx-c[b-i4aopz6lrx],
.document-content mjx-stretchy-h[b-i4aopz6lrx],
.document-content mjx-stretchy-v[b-i4aopz6lrx],
.document-content mjx-box[b-i4aopz6lrx],
.document-content mjx-line[b-i4aopz6lrx],
.document-content mjx-utext[b-i4aopz6lrx],
.document-content mjx-numerator[b-i4aopz6lrx],
.document-content mjx-denominator[b-i4aopz6lrx],
.document-content mjx-base[b-i4aopz6lrx],
.document-content mjx-script[b-i4aopz6lrx],
.document-content mjx-root[b-i4aopz6lrx],
.document-content mjx-sqrt-body[b-i4aopz6lrx],
.document-content mjx-sqrt-line[b-i4aopz6lrx],
.document-content .MathJax[b-i4aopz6lrx],
.document-content .MathJax *[b-i4aopz6lrx] {
    /* CRITICAL: Override MathJax's hardcoded colors with preview theme colors */
    color: var(--dz-preview-text) !important;
    fill: var(--dz-preview-text) !important;
    stroke: var(--dz-preview-text) !important;
    /* Ensure no background colors interfere */
    background: transparent !important;
}

/* Inline math theme integration - all possible containers */
.math-inline mjx-container[b-i4aopz6lrx],
.math-inline .MathJax[b-i4aopz6lrx],
.math-inline mjx-container *[b-i4aopz6lrx],
.math-inline .MathJax *[b-i4aopz6lrx],
span.math-inline mjx-container[b-i4aopz6lrx],
span.math-inline mjx-container *[b-i4aopz6lrx] {
    color: var(--dz-preview-text) !important;
    fill: var(--dz-preview-text) !important;
    stroke: var(--dz-preview-text) !important;
    background: transparent !important;
}

/* Display math theme integration - all possible containers */
.math-display mjx-container[b-i4aopz6lrx],
.math-display .MathJax[b-i4aopz6lrx],
.math-display mjx-container *[b-i4aopz6lrx],
.math-display .MathJax *[b-i4aopz6lrx],
div.math-display mjx-container[b-i4aopz6lrx],
div.math-display mjx-container *[b-i4aopz6lrx] {
    color: var(--dz-preview-text) !important;
    fill: var(--dz-preview-text) !important;
    stroke: var(--dz-preview-text) !important;
    background: transparent !important;
}

/* Additional MathJax CHTML element targeting - comprehensive */
mjx-c[b-i4aopz6lrx],
mjx-stretchy-h[b-i4aopz6lrx],
mjx-stretchy-v[b-i4aopz6lrx],
mjx-box[b-i4aopz6lrx],
mjx-line[b-i4aopz6lrx],
mjx-utext[b-i4aopz6lrx],
mjx-numerator[b-i4aopz6lrx],
mjx-denominator[b-i4aopz6lrx],
mjx-base[b-i4aopz6lrx],
mjx-script[b-i4aopz6lrx],
mjx-root[b-i4aopz6lrx],
mjx-sqrt-body[b-i4aopz6lrx],
mjx-sqrt-line[b-i4aopz6lrx] {
    color: var(--dz-preview-text) !important;
    fill: var(--dz-preview-text) !important;
    stroke: var(--dz-preview-text) !important;
    background: transparent !important;
}

/* SPECIFIC THEME OVERRIDES - Direct color application for each preview theme */
/* These rules provide fallback support in case JavaScript theming fails */

/* Light Theme Math Colors - Multiple selector patterns for robustness */
.document-content[style*="background: rgb(255, 255, 255)"] mjx-container[b-i4aopz6lrx],
.document-content[style*="background: rgb(255, 255, 255)"] mjx-container *[b-i4aopz6lrx],
.document-content[style*="background-color: rgb(255, 255, 255)"] mjx-container[b-i4aopz6lrx],
.document-content[style*="background-color: rgb(255, 255, 255)"] mjx-container *[b-i4aopz6lrx],
.document-content[style*="background: #ffffff"] mjx-container[b-i4aopz6lrx],
.document-content[style*="background: #ffffff"] mjx-container *[b-i4aopz6lrx],
.document-content[style*="background-color: #ffffff"] mjx-container[b-i4aopz6lrx],
.document-content[style*="background-color: #ffffff"] mjx-container *[b-i4aopz6lrx],
.document-content[style*="background: white"] mjx-container[b-i4aopz6lrx],
.document-content[style*="background: white"] mjx-container *[b-i4aopz6lrx] {
    color: #212529 !important;
    fill: #212529 !important;
    stroke: #212529 !important;
}

/* Dark Theme Math Colors - Multiple selector patterns for robustness */
.document-content[style*="background: rgb(26, 26, 26)"] mjx-container[b-i4aopz6lrx],
.document-content[style*="background: rgb(26, 26, 26)"] mjx-container *[b-i4aopz6lrx],
.document-content[style*="background-color: rgb(26, 26, 26)"] mjx-container[b-i4aopz6lrx],
.document-content[style*="background-color: rgb(26, 26, 26)"] mjx-container *[b-i4aopz6lrx],
.document-content[style*="background: #1a1a1a"] mjx-container[b-i4aopz6lrx],
.document-content[style*="background: #1a1a1a"] mjx-container *[b-i4aopz6lrx],
.document-content[style*="background-color: #1a1a1a"] mjx-container[b-i4aopz6lrx],
.document-content[style*="background-color: #1a1a1a"] mjx-container *[b-i4aopz6lrx] {
    color: #d4d4d4 !important;
    fill: #d4d4d4 !important;
    stroke: #d4d4d4 !important;
}

/* Sepia Theme Math Colors - Multiple selector patterns for robustness */
.document-content[style*="background: rgb(244, 241, 234)"] mjx-container[b-i4aopz6lrx],
.document-content[style*="background: rgb(244, 241, 234)"] mjx-container *[b-i4aopz6lrx],
.document-content[style*="background-color: rgb(244, 241, 234)"] mjx-container[b-i4aopz6lrx],
.document-content[style*="background-color: rgb(244, 241, 234)"] mjx-container *[b-i4aopz6lrx],
.document-content[style*="background: #f4f1ea"] mjx-container[b-i4aopz6lrx],
.document-content[style*="background: #f4f1ea"] mjx-container *[b-i4aopz6lrx],
.document-content[style*="background-color: #f4f1ea"] mjx-container[b-i4aopz6lrx],
.document-content[style*="background-color: #f4f1ea"] mjx-container *[b-i4aopz6lrx] {
    color: #5c4b37 !important;
    fill: #5c4b37 !important;
    stroke: #5c4b37 !important;
}

/* Additional MathJax element targeting for theme overrides */
.document-content[style*="#ffffff"] .MathJax[b-i4aopz6lrx],
.document-content[style*="#ffffff"] .MathJax *[b-i4aopz6lrx],
.document-content[style*="white"] .MathJax[b-i4aopz6lrx],
.document-content[style*="white"] .MathJax *[b-i4aopz6lrx] {
    color: #212529 !important;
    fill: #212529 !important;
    stroke: #212529 !important;
}

.document-content[style*="#1a1a1a"] .MathJax[b-i4aopz6lrx],
.document-content[style*="#1a1a1a"] .MathJax *[b-i4aopz6lrx] {
    color: #d4d4d4 !important;
    fill: #d4d4d4 !important;
    stroke: #d4d4d4 !important;
}

.document-content[style*="#f4f1ea"] .MathJax[b-i4aopz6lrx],
.document-content[style*="#f4f1ea"] .MathJax *[b-i4aopz6lrx] {
    color: #5c4b37 !important;
    fill: #5c4b37 !important;
    stroke: #5c4b37 !important;
}

/* Fallback - Force inherit color from parent elements */
.document-content mjx-container:not([style*="color"])[b-i4aopz6lrx],
.document-content .MathJax:not([style*="color"])[b-i4aopz6lrx] {
    color: inherit !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* Plain Text Section - Minimal styling with preview theming */
.document-plaintext-section[b-i4aopz6lrx] {
    /* No additional styling needed */
}

.plaintext-content[b-i4aopz6lrx] {
    font-family: var(--dz-font-mono);
    font-size: var(--dz-font-size-sm);
    line-height: var(--dz-line-height-relaxed);
    color: inherit; /* FIXED: Inherit theme color instead of direct token */
    background: inherit; /* FIXED: Inherit background instead of direct token */
    padding: var(--dz-space-3);
    border-radius: var(--dz-radius-sm);
    border: 1px solid var(--dz-content-border);
    margin: 0;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Interactive Features - Minimal hover effects only */
.section-interactive[b-i4aopz6lrx] {
    position: relative;
    cursor: pointer;
    transition: var(--dz-transition-transform);
}

.section-interactive:hover[b-i4aopz6lrx] {
    transform: translateY(-1px); /* Subtle hover feedback */
}

.section-overlay[b-i4aopz6lrx] {
    position: absolute;
    top: var(--dz-space-2);
    right: var(--dz-space-2);
    display: flex;
    gap: var(--dz-space-1);
    opacity: 0;
    transition: var(--dz-transition-opacity);
}

.section-interactive:hover .section-overlay[b-i4aopz6lrx] {
    opacity: 1;
}

.overlay-action[b-i4aopz6lrx] {
    background: var(--dz-bg-primary);
    border: 1px solid var(--dz-border-primary);
    color: var(--dz-text-secondary);
    padding: var(--dz-space-1);
    border-radius: var(--dz-radius-sm);
    cursor: pointer;
    transition: var(--dz-transition-colors);
    width: var(--dz-space-6);
    height: var(--dz-space-6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--dz-font-size-xs);
}

.overlay-action:hover[b-i4aopz6lrx] {
    background-color: var(--dz-bg-secondary);
    color: var(--dz-text-primary);
}

/* Responsive Design - Maintain minimal approach */
@media (max-width: 767.98px) {
    .document-header[b-i4aopz6lrx] {
        padding: var(--dz-space-3) var(--dz-space-4);
        flex-direction: column;
        gap: var(--dz-space-2);
        align-items: stretch;
    }
    
    .document-content[b-i4aopz6lrx] {
        padding: var(--dz-space-2); /* Further reduced for mobile */
    }
    
    .document-markdown-section[b-i4aopz6lrx],
    .document-diagram-section[b-i4aopz6lrx],
    .document-math-section[b-i4aopz6lrx],
    .document-plaintext-section[b-i4aopz6lrx] {
        margin-bottom: var(--dz-space-3); /* Tighter spacing on mobile */
    }
    
    .diagram-container[b-i4aopz6lrx] {
        min-height: 150px;
    }
    
    .document-actions[b-i4aopz6lrx] {
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .enhanced-document-renderer[b-i4aopz6lrx] {
        padding-right: 2px; /* Minimal scrollbar space */
        margin-right: -2px;
    }
    
    .document-content[b-i4aopz6lrx] {
        padding: var(--dz-space-1); /* Minimal padding for maximum content */
    }
    
    .math-content[b-i4aopz6lrx] {
        font-size: var(--dz-font-size-base);
        padding: var(--dz-space-2);
    }
    
    .plaintext-content[b-i4aopz6lrx] {
        font-size: var(--dz-font-size-xs);
        padding: var(--dz-space-2);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .enhanced-document-renderer[b-i4aopz6lrx]::before {
        border-width: 2px;
    }
    
    .diagram-container[b-i4aopz6lrx],
    .math-content[b-i4aopz6lrx],
    .plaintext-content[b-i4aopz6lrx] {
        border-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .enhanced-document-renderer[b-i4aopz6lrx],
    .enhanced-document-renderer[b-i4aopz6lrx]::before,
    .overlay-action[b-i4aopz6lrx],
    .section-interactive[b-i4aopz6lrx] {
        transition: none;
    }
    
    .section-interactive:hover[b-i4aopz6lrx] {
        transform: none;
    }
    
    .diagram-loading-spinner[b-i4aopz6lrx] {
        animation: none;
        border-top-color: var(--dz-bg-accent);
        border-right-color: var(--dz-bg-accent);
    }
}

/* Print styles */
@media print {
    .enhanced-document-renderer[b-i4aopz6lrx] {
        border: none;
        box-shadow: none;
        background: white;
        padding-right: 0;
        margin-right: 0;
    }
    
    .enhanced-document-renderer[b-i4aopz6lrx]::before {
        display: none;
    }
    
    .document-header[b-i4aopz6lrx],
    .document-actions[b-i4aopz6lrx],
    .section-overlay[b-i4aopz6lrx] {
        display: none;
    }
    
    .document-content[b-i4aopz6lrx] {
        padding: 0;
    }
    
    .diagram-container[b-i4aopz6lrx],
    .math-content[b-i4aopz6lrx],
    .plaintext-content[b-i4aopz6lrx] {
        border: 1px solid #000;
        background: white;
        break-inside: avoid;
    }
}

/* Performance optimizations */
.enhanced-document-renderer[b-i4aopz6lrx] {
    contain: layout style paint;
}

.diagram-container[b-i4aopz6lrx] {
    contain: layout style;
}

.diagram-loading-spinner[b-i4aopz6lrx] {
    will-change: transform;
}

/* Accessibility enhancements */
.enhanced-document-renderer[role="article"][b-i4aopz6lrx] {
    /* Semantic document structure */
}

.section-interactive[tabindex]:focus-visible[b-i4aopz6lrx] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

.overlay-action:focus-visible[b-i4aopz6lrx] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

/* Dark theme support for error fallback */
[data-theme="dark"] .section-error-fallback[b-i4aopz6lrx] {
    background: #2d3748;
    border-color: #fc8181;
}

[data-theme="dark"] .error-fallback-content[b-i4aopz6lrx] {
    background: #1a202c;
    border-color: #4a5568;
    color: #e2e8f0;
}

/* /Components/Rendering/DiagramRenderer.razor.rz.scp.css */
/* DiagramRenderer Styles - Enhanced with Design System
 * Leverages the new design system tokens and utility classes
 * for consistent styling and improved maintainability
 */

.diagram-renderer[b-3c01s7mma3] {
    width: 100%;
    position: relative;
}

/* Loading State - Using design system tokens */
.diagram-loading[b-3c01s7mma3] {
    min-height: 200px;
    padding: var(--dz-space-8);
    background: var(--dz-bg-secondary);
    border-radius: var(--dz-radius-md);
    border: 1px solid var(--dz-border-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: var(--dz-transition-colors);
}

.diagram-loading .spinner-border[b-3c01s7mma3] {
    width: var(--dz-space-8);
    height: var(--dz-space-8);
    color: var(--dz-bg-accent);
    margin-bottom: var(--dz-space-3);
}

.diagram-loading .loading-text[b-3c01s7mma3] {
    color: var(--dz-text-secondary);
    font-size: var(--dz-font-size-sm);
    font-family: var(--dz-font-sans);
}

/* Content - Enhanced with design system */
.diagram-content[b-3c01s7mma3] {
    width: 100%;
    overflow: auto;
    border-radius: var(--dz-radius-md);
    background: var(--dz-bg-primary);
    border: 1px solid var(--dz-border-secondary);
    padding: var(--dz-space-4);
    cursor: pointer;
    transition: var(--dz-transition-colors), var(--dz-transition-shadow);
    box-shadow: var(--dz-shadow-xs);
}

.diagram-content:hover[b-3c01s7mma3] {
    border-color: var(--dz-border-focus);
    box-shadow: var(--dz-shadow-md);
    transform: translateY(-1px);
}

.diagram-content:focus-visible[b-3c01s7mma3] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

.diagram-responsive[b-3c01s7mma3] {
    max-width: 100%;
}

.diagram-responsive svg[b-3c01s7mma3] {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
}

/* Enhanced Error State - Using design system components */
.diagram-error[b-3c01s7mma3] {
    margin: 0;
    border-left: 4px solid var(--dz-danger-base);
    background: var(--dz-danger-light);
    border-radius: var(--dz-radius-md);
    padding: var(--dz-space-4);
    margin-bottom: var(--dz-space-4);
    border: 1px solid var(--dz-danger-base);
    border-left-width: 4px;
}

.diagram-error .error-title[b-3c01s7mma3] {
    font-size: var(--dz-font-size-base);
    font-weight: var(--dz-font-weight-semibold);
    color: var(--dz-danger-dark);
    margin-bottom: var(--dz-space-2);
    display: flex;
    align-items: center;
}

.diagram-error .error-title i[b-3c01s7mma3] {
    margin-right: var(--dz-space-2);
    font-size: var(--dz-font-size-lg);
}

.diagram-error .error-content[b-3c01s7mma3] {
    font-family: var(--dz-font-mono);
    font-size: var(--dz-font-size-sm);
    line-height: var(--dz-line-height-normal);
    white-space: pre-line;
    color: var(--dz-danger-dark);
    background: rgba(255, 255, 255, 0.3);
    padding: var(--dz-space-2);
    border-radius: var(--dz-radius-sm);
    margin: var(--dz-space-2) 0;
}

.diagram-error .definition-preview[b-3c01s7mma3] {
    background: var(--dz-bg-primary);
    border: 1px solid var(--dz-border-secondary);
    border-radius: var(--dz-radius-sm);
    padding: var(--dz-space-3);
    max-height: 200px;
    overflow-y: auto;
    font-family: var(--dz-font-mono);
    font-size: var(--dz-font-size-xs);
    line-height: var(--dz-line-height-tight);
    margin-top: var(--dz-space-2);
}

.diagram-error details summary[b-3c01s7mma3] {
    cursor: pointer;
    user-select: none;
    padding: var(--dz-space-1) 0;
    border-radius: var(--dz-radius-sm);
    font-weight: var(--dz-font-weight-medium);
    color: var(--dz-danger-dark);
    transition: var(--dz-transition-colors);
}

.diagram-error details summary:hover[b-3c01s7mma3] {
    background: rgba(255, 255, 255, 0.2);
    padding-left: var(--dz-space-2);
    padding-right: var(--dz-space-2);
}

.diagram-error details[open] summary[b-3c01s7mma3] {
    margin-bottom: var(--dz-space-2);
}

/* Diagram Information */
.diagram-info[b-3c01s7mma3] {
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-muted);
    border-top: 1px solid var(--dz-border-secondary);
    padding-top: var(--dz-space-2);
    margin-top: var(--dz-space-3);
    font-family: var(--dz-font-sans);
}

/* Empty State - Enhanced with design system */
.diagram-empty[b-3c01s7mma3] {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--dz-bg-secondary);
    border-radius: var(--dz-radius-md);
    border: 2px dashed var(--dz-border-primary);
    padding: var(--dz-space-6);
    transition: var(--dz-transition-colors);
}

.diagram-empty .empty-icon[b-3c01s7mma3] {
    font-size: var(--dz-font-size-4xl);
    margin-bottom: var(--dz-space-3);
    opacity: 0.7;
    color: var(--dz-text-muted);
}

.diagram-empty .empty-title[b-3c01s7mma3] {
    font-size: var(--dz-font-size-lg);
    font-weight: var(--dz-font-weight-medium);
    color: var(--dz-text-secondary);
    margin-bottom: var(--dz-space-1);
}

.diagram-empty .empty-description[b-3c01s7mma3] {
    font-size: var(--dz-font-size-sm);
    color: var(--dz-text-muted);
    text-align: center;
}

/* Diagram Type Indicators - Enhanced with design system */
.diagram-renderer[data-type="c4"] .diagram-content[b-3c01s7mma3] {
    border-left: 4px solid var(--dz-warning-base);
}

.diagram-renderer[data-type="mermaid"] .diagram-content[b-3c01s7mma3] {
    border-left: 4px solid var(--dz-info-base);
}

.diagram-renderer[data-type="mixed"] .diagram-content[b-3c01s7mma3] {
    border-left: 4px solid var(--dz-danger-base);
}

/* Enhanced Tips Section */
.diagram-error .tips-section[b-3c01s7mma3] {
    background: rgba(13, 202, 240, 0.1);
    border: 1px solid var(--dz-info-base);
    border-radius: var(--dz-radius-sm);
    padding: var(--dz-space-3);
    margin-top: var(--dz-space-3);
}

.diagram-error .tips-section .tips-title[b-3c01s7mma3] {
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-semibold);
    color: var(--dz-info-dark);
    margin-bottom: var(--dz-space-2);
    display: flex;
    align-items: center;
}

.diagram-error .tips-section .tips-title i[b-3c01s7mma3] {
    margin-right: var(--dz-space-2);
}

.diagram-error .tips-section a[b-3c01s7mma3] {
    color: var(--dz-info-base);
    text-decoration: none;
    font-weight: var(--dz-font-weight-medium);
    transition: var(--dz-transition-colors);
}

.diagram-error .tips-section a:hover[b-3c01s7mma3] {
    color: var(--dz-info-dark);
    text-decoration: underline;
}

/* Responsive Design - Using design system breakpoints */
@media (max-width: 767.98px) {
    .diagram-content[b-3c01s7mma3] {
        padding: var(--dz-space-3);
    }
    
    .diagram-loading[b-3c01s7mma3] {
        min-height: 150px;
        padding: var(--dz-space-6) var(--dz-space-4);
    }
    
    .diagram-error .error-content[b-3c01s7mma3] {
        font-size: var(--dz-font-size-xs);
    }
    
    .diagram-error .definition-preview[b-3c01s7mma3] {
        font-size: 0.6875rem;
        max-height: 150px;
    }
    
    .diagram-info[b-3c01s7mma3] {
        font-size: 0.6875rem;
    }
    
    .diagram-empty[b-3c01s7mma3] {
        padding: var(--dz-space-4);
        min-height: 120px;
    }
    
    .diagram-empty .empty-icon[b-3c01s7mma3] {
        font-size: var(--dz-font-size-3xl);
    }
}

/* Accessibility Enhancements */
@media (prefers-contrast: high) {
    .diagram-content[b-3c01s7mma3] {
        border-width: 2px;
    }
    
    .diagram-error[b-3c01s7mma3] {
        border-left-width: 6px;
    }
    
    .diagram-empty[b-3c01s7mma3] {
        border-width: 3px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .diagram-content[b-3c01s7mma3] {
        transition: none;
        transform: none;
    }
    
    .diagram-content:hover[b-3c01s7mma3] {
        transform: none;
    }
    
    .diagram-fade-in[b-3c01s7mma3],
    .error-slide-in[b-3c01s7mma3] {
        animation: none;
    }
}

/* Animation for diagram appearance - Enhanced */
.diagram-content[b-3c01s7mma3] {
    animation: diagram-fade-in-b-3c01s7mma3 var(--dz-duration-300) var(--dz-ease-out);
}

@keyframes diagram-fade-in-b-3c01s7mma3 {
    from {
        opacity: 0;
        transform: translateY(var(--dz-space-2));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Error state animation - Enhanced */
.diagram-error[b-3c01s7mma3] {
    animation: error-slide-in-b-3c01s7mma3 var(--dz-duration-300) var(--dz-ease-out);
}

@keyframes error-slide-in-b-3c01s7mma3 {
    from {
        opacity: 0;
        transform: translateX(calc(-1 * var(--dz-space-2)));
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Print Styles - Enhanced */
@media print {
    .diagram-content[b-3c01s7mma3] {
        border: 1px solid #000;
        break-inside: avoid;
        box-shadow: none;
        transform: none;
    }
    
    .diagram-loading[b-3c01s7mma3],
    .diagram-error[b-3c01s7mma3],
    .diagram-empty[b-3c01s7mma3],
    .diagram-info[b-3c01s7mma3] {
        display: none;
    }
}

/* Performance optimizations */
.diagram-content[b-3c01s7mma3] {
    contain: layout style paint;
}

.diagram-loading[b-3c01s7mma3] {
    contain: layout style;
}

/* Interactive state enhancements */
.diagram-content[tabindex][b-3c01s7mma3] {
    outline: none;
}

.diagram-content[tabindex]:focus-visible[b-3c01s7mma3] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

/* Status indicators */
.diagram-renderer[data-status="loading"] .diagram-content[b-3c01s7mma3] {
    opacity: 0.7;
    pointer-events: none;
}

.diagram-renderer[data-status="error"] .diagram-content[b-3c01s7mma3] {
    border-color: var(--dz-danger-base);
}

.diagram-renderer[data-status="success"] .diagram-content[b-3c01s7mma3] {
    border-color: var(--dz-success-base);
}

/* Dark theme specific adjustments */
[data-theme="dark"] .diagram-error .error-content[b-3c01s7mma3] {
    background: rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .diagram-error .tips-section[b-3c01s7mma3] {
    background: rgba(13, 202, 240, 0.15);
}
/* /Components/Rendering/DocumentRenderer.razor.rz.scp.css */
/* DocumentRenderer Component Styles - Enhanced with Design System
 * Comprehensive document rendering using design system tokens
 */

.document-renderer[b-mbke715zmz] {
    line-height: var(--dz-line-height-relaxed);
    font-family: var(--dz-font-sans);
    color: var(--dz-text-primary);
    background: var(--dz-bg-primary);
    border-radius: var(--dz-radius-lg);
    padding: var(--dz-space-6);
    border: 1px solid var(--dz-border-secondary);
    box-shadow: var(--dz-shadow-sm);
    transition: var(--dz-transition-colors);
}

/* Loading State */
.document-loading[b-mbke715zmz] {
    padding: var(--dz-space-8) var(--dz-space-4);
    text-align: center;
    color: var(--dz-text-secondary);
    background: var(--dz-bg-secondary);
    border-radius: var(--dz-radius-md);
    border: 1px solid var(--dz-border-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--dz-space-3);
    min-height: 200px;
}

.document-loading-spinner[b-mbke715zmz] {
    width: var(--dz-space-8);
    height: var(--dz-space-8);
    border: 2px solid var(--dz-border-muted);
    border-top-color: var(--dz-bg-accent);
    border-radius: var(--dz-radius-full);
    animation: dz-spin var(--dz-duration-1000) linear infinite;
}

.document-loading-text[b-mbke715zmz] {
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-medium);
    color: var(--dz-text-secondary);
}

/* Document sections */
.document-section[b-mbke715zmz] {
    margin: var(--dz-space-8) 0;
    position: relative;
}

.document-diagram-section[b-mbke715zmz] {
    margin: var(--dz-space-8) 0;
    background: var(--dz-bg-secondary);
    border-radius: var(--dz-radius-lg);
    padding: var(--dz-space-6);
    border: 1px solid var(--dz-border-secondary);
    transition: var(--dz-transition-colors);
}

.document-diagram-section:hover[b-mbke715zmz] {
    background: var(--dz-bg-tertiary);
    border-color: var(--dz-border-primary);
}

/* Section headers */
.document-section-header[b-mbke715zmz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--dz-space-4);
    padding-bottom: var(--dz-space-2);
    border-bottom: 1px solid var(--dz-border-secondary);
}

.document-section-title[b-mbke715zmz] {
    font-size: var(--dz-font-size-lg);
    font-weight: var(--dz-font-weight-semibold);
    color: var(--dz-text-primary);
    margin: 0;
}

.document-section-type[b-mbke715zmz] {
    font-size: var(--dz-font-size-xs);
    font-weight: var(--dz-font-weight-medium);
    color: var(--dz-text-muted);
    background: var(--dz-bg-tertiary);
    padding: var(--dz-space-0_5) var(--dz-space-2);
    border-radius: var(--dz-radius-full);
    text-transform: uppercase;
    letter-spacing: var(--dz-letter-spacing-wide);
}

/* Content spacing and flow */
.document-renderer .markdown-renderer + .document-diagram-section[b-mbke715zmz],
.document-renderer .document-diagram-section + .markdown-renderer[b-mbke715zmz],
.document-renderer .document-section + .document-section[b-mbke715zmz] {
    margin-top: var(--dz-space-8);
}

/* First and last section spacing */
.document-renderer > .markdown-renderer:first-child[b-mbke715zmz],
.document-renderer > .document-diagram-section:first-child[b-mbke715zmz],
.document-renderer > .document-section:first-child[b-mbke715zmz] {
    margin-top: 0;
}

.document-renderer > .markdown-renderer:last-child[b-mbke715zmz],
.document-renderer > .document-diagram-section:last-child[b-mbke715zmz],
.document-renderer > .document-section:last-child[b-mbke715zmz] {
    margin-bottom: 0;
}

/* Document metadata */
.document-metadata[b-mbke715zmz] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-3);
    margin-bottom: var(--dz-space-4);
    padding: var(--dz-space-3);
    background: var(--dz-bg-tertiary);
    border-radius: var(--dz-radius-md);
    border-left: 4px solid var(--dz-info-base);
}

.document-metadata-item[b-mbke715zmz] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-1);
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-secondary);
}

.document-metadata-label[b-mbke715zmz] {
    font-weight: var(--dz-font-weight-medium);
    color: var(--dz-text-muted);
}

.document-metadata-value[b-mbke715zmz] {
    color: var(--dz-text-primary);
    font-weight: var(--dz-font-weight-normal);
}

/* Document table of contents */
.document-toc[b-mbke715zmz] {
    background: var(--dz-bg-secondary);
    border: 1px solid var(--dz-border-secondary);
    border-radius: var(--dz-radius-md);
    padding: var(--dz-space-4);
    margin-bottom: var(--dz-space-6);
    position: sticky;
    top: var(--dz-space-4);
    z-index: var(--dz-z-10);
}

.document-toc-title[b-mbke715zmz] {
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-semibold);
    color: var(--dz-text-primary);
    margin-bottom: var(--dz-space-3);
    text-transform: uppercase;
    letter-spacing: var(--dz-letter-spacing-wide);
}

.document-toc-list[b-mbke715zmz] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.document-toc-item[b-mbke715zmz] {
    margin-bottom: var(--dz-space-1);
}

.document-toc-link[b-mbke715zmz] {
    display: block;
    padding: var(--dz-space-1) var(--dz-space-2);
    color: var(--dz-text-secondary);
    text-decoration: none;
    border-radius: var(--dz-radius-sm);
    font-size: var(--dz-font-size-sm);
    transition: var(--dz-transition-colors);
}

.document-toc-link:hover[b-mbke715zmz] {
    background: var(--dz-bg-tertiary);
    color: var(--dz-text-primary);
    text-decoration: none;
}

.document-toc-link.active[b-mbke715zmz] {
    background: var(--dz-bg-accent);
    color: var(--dz-text-inverse);
    font-weight: var(--dz-font-weight-medium);
}

/* Document footer */
.document-footer[b-mbke715zmz] {
    margin-top: var(--dz-space-8);
    padding-top: var(--dz-space-4);
    border-top: 1px solid var(--dz-border-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-muted);
}

.document-footer-actions[b-mbke715zmz] {
    display: flex;
    gap: var(--dz-space-2);
}

.document-footer-btn[b-mbke715zmz] {
    background: none;
    border: 1px solid var(--dz-border-primary);
    color: var(--dz-text-secondary);
    padding: var(--dz-space-1) var(--dz-space-2);
    border-radius: var(--dz-radius-sm);
    font-size: var(--dz-font-size-xs);
    cursor: pointer;
    transition: var(--dz-transition-colors);
    font-family: var(--dz-font-sans);
}

.document-footer-btn:hover[b-mbke715zmz] {
    background-color: var(--dz-bg-secondary);
    border-color: var(--dz-border-focus);
    color: var(--dz-text-primary);
}

/* Error state */
.document-error[b-mbke715zmz] {
    background: var(--dz-danger-light);
    border: 1px solid var(--dz-danger-base);
    border-left: 4px solid var(--dz-danger-base);
    border-radius: var(--dz-radius-md);
    padding: var(--dz-space-4);
    margin: var(--dz-space-4) 0;
    color: var(--dz-danger-dark);
}

.document-error-title[b-mbke715zmz] {
    font-size: var(--dz-font-size-base);
    font-weight: var(--dz-font-weight-semibold);
    margin-bottom: var(--dz-space-2);
}

.document-error-message[b-mbke715zmz] {
    font-size: var(--dz-font-size-sm);
    line-height: var(--dz-line-height-relaxed);
}

/* Document navigation */
.document-nav[b-mbke715zmz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--dz-space-6);
    padding-top: var(--dz-space-4);
    border-top: 1px solid var(--dz-border-secondary);
}

.document-nav-btn[b-mbke715zmz] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-2);
    padding: var(--dz-space-2) var(--dz-space-4);
    background: var(--dz-bg-secondary);
    border: 1px solid var(--dz-border-primary);
    border-radius: var(--dz-radius-md);
    color: var(--dz-text-secondary);
    text-decoration: none;
    font-size: var(--dz-font-size-sm);
    transition: var(--dz-transition-colors);
    font-family: var(--dz-font-sans);
}

.document-nav-btn:hover[b-mbke715zmz] {
    background: var(--dz-bg-tertiary);
    border-color: var(--dz-border-focus);
    color: var(--dz-text-primary);
    text-decoration: none;
}

.document-nav-btn:focus-visible[b-mbke715zmz] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

/* Responsive design */
@media (max-width: 767.98px) {
    .document-renderer[b-mbke715zmz] {
        padding: var(--dz-space-4);
    }
    
    .document-diagram-section[b-mbke715zmz] {
        margin: var(--dz-space-6) 0;
        padding: var(--dz-space-4);
    }
    
    .document-renderer .markdown-renderer + .document-diagram-section[b-mbke715zmz],
    .document-renderer .document-diagram-section + .markdown-renderer[b-mbke715zmz],
    .document-renderer .document-section + .document-section[b-mbke715zmz] {
        margin-top: var(--dz-space-6);
    }
    
    .document-toc[b-mbke715zmz] {
        position: static;
        margin-bottom: var(--dz-space-4);
    }
    
    .document-metadata[b-mbke715zmz] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--dz-space-2);
    }
    
    .document-nav[b-mbke715zmz] {
        flex-direction: column;
        gap: var(--dz-space-3);
    }
    
    .document-nav-btn[b-mbke715zmz] {
        width: 100%;
        justify-content: center;
    }
    
    .document-footer[b-mbke715zmz] {
        flex-direction: column;
        gap: var(--dz-space-2);
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .document-renderer[b-mbke715zmz] {
        padding: var(--dz-space-3);
        border-radius: var(--dz-radius-md);
    }
    
    .document-section-header[b-mbke715zmz] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--dz-space-2);
    }
    
    .document-footer-actions[b-mbke715zmz] {
        flex-direction: column;
        width: 100%;
    }
    
    .document-footer-btn[b-mbke715zmz] {
        width: 100%;
        text-align: center;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .document-renderer[b-mbke715zmz] {
        border-width: 2px;
    }
    
    .document-diagram-section[b-mbke715zmz] {
        border-width: 2px;
    }
    
    .document-error[b-mbke715zmz] {
        border-width: 2px;
        border-left-width: 6px;
    }
    
    .document-nav-btn[b-mbke715zmz],
    .document-footer-btn[b-mbke715zmz] {
        border-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .document-renderer[b-mbke715zmz],
    .document-diagram-section[b-mbke715zmz],
    .document-nav-btn[b-mbke715zmz],
    .document-footer-btn[b-mbke715zmz],
    .document-toc-link[b-mbke715zmz] {
        transition: none;
    }
    
    .document-loading-spinner[b-mbke715zmz] {
        animation: none;
        border-top-color: var(--dz-bg-accent);
        border-right-color: var(--dz-bg-accent);
    }
}

/* Print styles */
@media print {
    .document-loading[b-mbke715zmz],
    .document-error[b-mbke715zmz],
    .document-toc[b-mbke715zmz],
    .document-nav[b-mbke715zmz],
    .document-footer[b-mbke715zmz] {
        display: none !important;
    }
    
    .document-renderer[b-mbke715zmz] {
        border: none;
        box-shadow: none;
        padding: 0;
        background: white;
        color: black;
    }
    
    .document-diagram-section[b-mbke715zmz] {
        margin: var(--dz-space-4) 0;
        break-inside: avoid;
        border: 1px solid #000;
        background: white;
    }
    
    .document-section[b-mbke715zmz] {
        break-inside: avoid;
    }
}

/* Performance optimizations */
.document-renderer[b-mbke715zmz] {
    contain: layout style paint;
}

.document-toc[b-mbke715zmz] {
    contain: layout style;
}

.document-loading-spinner[b-mbke715zmz] {
    will-change: transform;
}

/* Accessibility enhancements */
.document-section[role="region"][b-mbke715zmz] {
    /* Screen reader landmark support */
}

.document-toc[role="navigation"][b-mbke715zmz] {
    /* Navigation landmark for screen readers */
}

/* Animation on content load */
.document-fade-in[b-mbke715zmz] {
    animation: document-fade-in-b-mbke715zmz var(--dz-duration-500) var(--dz-ease-out);
}

@keyframes document-fade-in-b-mbke715zmz {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/Rendering/MarkdownRenderer.razor.rz.scp.css */
/* MarkdownRenderer Styles - Enhanced with Design System
 * Markdown content rendering using comprehensive design system tokens
 */

.markdown-renderer[b-2rgnrg04wj] {
    position: relative;
    font-family: var(--dz-font-sans);
}

/* Loading State */
.markdown-loading[b-2rgnrg04wj] {
    padding: var(--dz-space-4);
    color: var(--dz-text-secondary);
    font-size: var(--dz-font-size-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--dz-space-2);
    background-color: var(--dz-bg-secondary);
    border-radius: var(--dz-radius-md);
    border: 1px solid var(--dz-border-secondary);
}

.markdown-loading .spinner[b-2rgnrg04wj] {
    width: var(--dz-space-4);
    height: var(--dz-space-4);
    border: 2px solid var(--dz-border-muted);
    border-top-color: var(--dz-bg-accent);
    border-radius: var(--dz-radius-full);
    animation: dz-spin var(--dz-duration-1000) linear infinite;
}

/* Error State */
.markdown-error[b-2rgnrg04wj] {
    margin: 0;
    border-radius: var(--dz-radius-md);
    background-color: var(--dz-danger-light);
    border: 1px solid var(--dz-danger-base);
    border-left: 4px solid var(--dz-danger-base);
    padding: var(--dz-space-4);
}

.markdown-error .small[b-2rgnrg04wj] {
    opacity: 0.8;
    font-size: var(--dz-font-size-xs);
    color: var(--dz-danger-dark);
}

/* Empty State */
.markdown-empty[b-2rgnrg04wj] {
    padding: var(--dz-space-8) var(--dz-space-4);
    border: 2px dashed var(--dz-border-primary);
    border-radius: var(--dz-radius-lg);
    background-color: var(--dz-bg-secondary);
    text-align: center;
}

.markdown-empty div:first-child[b-2rgnrg04wj] {
    font-size: var(--dz-font-size-4xl);
    opacity: 0.5;
    color: var(--dz-text-muted);
    margin-bottom: var(--dz-space-2);
}

.markdown-empty .empty-text[b-2rgnrg04wj] {
    color: var(--dz-text-secondary);
    font-size: var(--dz-font-size-sm);
}

/* Markdown Content Styling */
.markdown-content[b-2rgnrg04wj] {
    line-height: var(--dz-line-height-relaxed);
    color: inherit; /* FIXED: Use inherit instead of direct token */
    font-size: var(--dz-font-size-base);
    max-width: none;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-family: var(--dz-font-sans);
    
    /* Enable proper emoji and symbol rendering */
    font-variant-emoji: emoji;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    text-rendering: optimizeLegibility;
}

/* Headings */
.markdown-content h1[b-2rgnrg04wj],
.markdown-content h2[b-2rgnrg04wj],
.markdown-content h3[b-2rgnrg04wj],
.markdown-content h4[b-2rgnrg04wj],
.markdown-content h5[b-2rgnrg04wj],
.markdown-content h6[b-2rgnrg04wj] {
    color: inherit; /* FIXED: Use inherit instead of direct token */
    font-weight: var(--dz-font-weight-semibold);
    line-height: var(--dz-line-height-tight);
    margin-top: var(--dz-space-8);
    margin-bottom: var(--dz-space-4);
    font-family: var(--dz-font-sans);
}

.markdown-content h1:first-child[b-2rgnrg04wj],
.markdown-content h2:first-child[b-2rgnrg04wj],
.markdown-content h3:first-child[b-2rgnrg04wj],
.markdown-content h4:first-child[b-2rgnrg04wj],
.markdown-content h5:first-child[b-2rgnrg04wj],
.markdown-content h6:first-child[b-2rgnrg04wj] {
    margin-top: 0;
}

.markdown-content h1[b-2rgnrg04wj] {
    font-size: var(--dz-font-size-4xl);
    font-weight: var(--dz-font-weight-bold);
    border-bottom: 1px solid var(--dz-border-primary);
    padding-bottom: var(--dz-space-2);
}

.markdown-content h2[b-2rgnrg04wj] {
    font-size: var(--dz-font-size-3xl);
    border-bottom: 1px solid var(--dz-border-secondary);
    padding-bottom: var(--dz-space-1);
}

.markdown-content h3[b-2rgnrg04wj] {
    font-size: var(--dz-font-size-2xl);
}

.markdown-content h4[b-2rgnrg04wj] {
    font-size: var(--dz-font-size-xl);
}

.markdown-content h5[b-2rgnrg04wj],
.markdown-content h6[b-2rgnrg04wj] {
    font-size: var(--dz-font-size-lg);
}

/* Embedded Mermaid Diagram Styles */
.markdown-content .mermaid-container[b-2rgnrg04wj] {
    margin: var(--dz-space-6) 0;
    padding: var(--dz-space-4);
    background: var(--dz-bg-primary);
    border: 1px solid var(--dz-border-primary);
    border-radius: var(--dz-radius-lg);
    text-align: center;
    position: relative;
    transition: var(--dz-transition-colors);
}

.markdown-content .mermaid-container .mermaid-loading[b-2rgnrg04wj] {
    padding: var(--dz-space-8);
    color: var(--dz-text-secondary);
    font-size: var(--dz-font-size-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--dz-space-2);
}

.markdown-content .mermaid-container .mermaid-loading i[b-2rgnrg04wj] {
    color: var(--dz-bg-accent);
}

.markdown-content .mermaid-container:not(.mermaid-rendered):not(.mermaid-error)[b-2rgnrg04wj] {
    background: var(--dz-bg-secondary);
    border-style: dashed;
    border-color: var(--dz-border-muted);
}

.markdown-content .mermaid-container.mermaid-rendered[b-2rgnrg04wj] {
    background: transparent;
    border: none;
    padding: 0;
}

.markdown-content .mermaid-container.mermaid-error[b-2rgnrg04wj] {
    background: var(--dz-danger-light);
    border-color: var(--dz-danger-base);
    border-left: 4px solid var(--dz-danger-base);
}

.markdown-content .mermaid-container .alert[b-2rgnrg04wj] {
    margin: 0;
    text-align: left;
    background: transparent;
    border: none;
    padding: var(--dz-space-3);
}

.markdown-content .mermaid-container .alert details[b-2rgnrg04wj] {
    margin-top: var(--dz-space-2);
}

.markdown-content .mermaid-container .alert summary[b-2rgnrg04wj] {
    cursor: pointer;
    font-weight: var(--dz-font-weight-medium);
    padding: var(--dz-space-1) 0;
    color: var(--dz-danger-dark);
    border-radius: var(--dz-radius-sm);
    transition: var(--dz-transition-colors);
}

.markdown-content .mermaid-container .alert summary:hover[b-2rgnrg04wj] {
    background: rgba(0, 0, 0, 0.05);
    padding-left: var(--dz-space-2);
    padding-right: var(--dz-space-2);
}

.markdown-content .mermaid-container .alert pre[b-2rgnrg04wj] {
    background: rgba(0, 0, 0, 0.1);
    padding: var(--dz-space-3);
    border-radius: var(--dz-radius-sm);
    font-size: var(--dz-font-size-xs);
    font-family: var(--dz-font-mono);
    margin: var(--dz-space-2) 0 0 0;
    overflow-x: auto;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Ensure embedded SVGs are responsive */
.markdown-content .mermaid-container svg[b-2rgnrg04wj] {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Paragraphs and text */
.markdown-content p[b-2rgnrg04wj] {
    margin-bottom: var(--dz-space-4);
    line-height: var(--dz-line-height-relaxed);
    color: inherit; /* FIXED: Use inherit instead of direct token */
}

.markdown-content p:last-child[b-2rgnrg04wj] {
    margin-bottom: 0;
}

/* Lists */
.markdown-content ul[b-2rgnrg04wj],
.markdown-content ol[b-2rgnrg04wj] {
    margin: var(--dz-space-4) 0;
    padding-left: var(--dz-space-8);
}

.markdown-content li[b-2rgnrg04wj] {
    margin-bottom: var(--dz-space-2);
    line-height: var(--dz-line-height-relaxed);
}

.markdown-content li:last-child[b-2rgnrg04wj] {
    margin-bottom: 0;
}

/* Nested lists */
.markdown-content li > ul[b-2rgnrg04wj],
.markdown-content li > ol[b-2rgnrg04wj] {
    margin-top: var(--dz-space-2);
    margin-bottom: 0;
}

/* Links */
.markdown-content a[b-2rgnrg04wj] {
    color: var(--dz-text-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: var(--dz-transition-colors);
    font-weight: var(--dz-font-weight-medium);
}

.markdown-content a:hover[b-2rgnrg04wj] {
    border-bottom-color: var(--dz-text-accent);
    color: var(--dz-brand-primary-hover);
}

.markdown-content a:focus-visible[b-2rgnrg04wj] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
    border-radius: var(--dz-radius-sm);
}

/* Code */
.markdown-content code[b-2rgnrg04wj] {
    background: var(--dz-bg-tertiary);
    color: inherit; /* FIXED: Use inherit instead of direct token */
    padding: var(--dz-space-0_5) var(--dz-space-1);
    border-radius: var(--dz-radius-sm);
    font-family: var(--dz-font-mono);
    font-size: 0.875em;
    border: 1px solid var(--dz-border-secondary);
}

.markdown-content pre[b-2rgnrg04wj] {
    background: var(--dz-bg-tertiary);
    color: inherit; /* FIXED: Use inherit instead of direct token */
    padding: var(--dz-space-4);
    border-radius: var(--dz-radius-lg);
    overflow-x: auto;
    font-family: var(--dz-font-mono);
    font-size: var(--dz-font-size-sm);
    line-height: var(--dz-line-height-normal);
    margin: var(--dz-space-6) 0;
    border: 1px solid var(--dz-border-primary);
    scrollbar-width: thin;
}

.markdown-content pre[b-2rgnrg04wj]::-webkit-scrollbar {
    height: 6px;
}

.markdown-content pre[b-2rgnrg04wj]::-webkit-scrollbar-track {
    background: transparent;
}

.markdown-content pre[b-2rgnrg04wj]::-webkit-scrollbar-thumb {
    background: var(--dz-border-primary);
    border-radius: var(--dz-radius-sm);
}

.markdown-content pre code[b-2rgnrg04wj] {
    background: transparent;
    padding: 0;
    color: inherit;
    border: none;
}

/* Blockquotes */
.markdown-content blockquote[b-2rgnrg04wj] {
    margin: var(--dz-space-6) 0;
    padding: var(--dz-space-4);
    background: var(--dz-bg-secondary);
    border-left: 4px solid var(--dz-text-accent);
    border-radius: 0 var(--dz-radius-lg) var(--dz-radius-lg) 0;
    font-style: italic;
    color: var(--dz-text-secondary);
}

.markdown-content blockquote p:last-child[b-2rgnrg04wj] {
    margin-bottom: 0;
}

.markdown-content blockquote > *:first-child[b-2rgnrg04wj] {
    margin-top: 0;
}

/* Tables */
.markdown-content table[b-2rgnrg04wj] {
    width: 100%;
    border-collapse: collapse;
    margin: var(--dz-space-6) 0;
    font-size: var(--dz-font-size-sm);
    border: 1px solid var(--dz-border-primary);
    border-radius: var(--dz-radius-md);
    overflow: hidden;
}

.markdown-content th[b-2rgnrg04wj],
.markdown-content td[b-2rgnrg04wj] {
    padding: var(--dz-space-3);
    text-align: left;
    border-bottom: 1px solid var(--dz-border-secondary);
}

.markdown-content th[b-2rgnrg04wj] {
    background: var(--dz-bg-secondary);
    font-weight: var(--dz-font-weight-semibold);
    color: var(--dz-text-primary);
    font-size: var(--dz-font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--dz-letter-spacing-wide);
}

.markdown-content tbody tr:hover[b-2rgnrg04wj] {
    background: var(--dz-bg-secondary);
}

.markdown-content tr:last-child td[b-2rgnrg04wj] {
    border-bottom: none;
}

/* Horizontal rules */
.markdown-content hr[b-2rgnrg04wj] {
    margin: var(--dz-space-8) 0;
    border: none;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--dz-border-primary), transparent);
    border-radius: var(--dz-radius-full);
}

/* Images */
.markdown-content img[b-2rgnrg04wj] {
    max-width: 100%;
    height: auto;
    border-radius: var(--dz-radius-lg);
    margin: var(--dz-space-4) 0;
    display: block;
    box-shadow: var(--dz-shadow-sm);
    border: 1px solid var(--dz-border-secondary);
}

/* Inline images */
.markdown-content p img[b-2rgnrg04wj] {
    display: inline-block;
    margin: 0 var(--dz-space-1);
    vertical-align: middle;
    border-radius: var(--dz-radius-sm);
    border: none;
    box-shadow: none;
}

/* Task lists */
.markdown-content input[type="checkbox"][b-2rgnrg04wj] {
    margin-right: var(--dz-space-2);
    transform: scale(1.1);
    accent-color: var(--dz-bg-accent);
}

/* Strikethrough */
.markdown-content del[b-2rgnrg04wj],
.markdown-content s[b-2rgnrg04wj] {
    color: var(--dz-text-muted);
    opacity: 0.7;
    text-decoration-color: var(--dz-text-muted);
}

/* Strong and emphasis */
.markdown-content strong[b-2rgnrg04wj] {
    font-weight: var(--dz-font-weight-bold);
    color: var(--dz-text-primary);
}

.markdown-content em[b-2rgnrg04wj] {
    font-style: italic;
    color: var(--dz-text-secondary);
}

/* Mark/highlight */
.markdown-content mark[b-2rgnrg04wj] {
    background-color: var(--dz-warning-light);
    color: var(--dz-warning-dark);
    padding: var(--dz-space-0_5);
    border-radius: var(--dz-radius-sm);
}

/* Keyboard keys */
.markdown-content kbd[b-2rgnrg04wj] {
    background: var(--dz-bg-tertiary);
    border: 1px solid var(--dz-border-primary);
    border-radius: var(--dz-radius-sm);
    padding: var(--dz-space-0_5) var(--dz-space-1);
    font-family: var(--dz-font-mono);
    font-size: var(--dz-font-size-xs);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .markdown-content[b-2rgnrg04wj] {
        font-size: var(--dz-font-size-sm);
    }
    
    .markdown-content h1[b-2rgnrg04wj] { font-size: var(--dz-font-size-3xl); }
    .markdown-content h2[b-2rgnrg04wj] { font-size: var(--dz-font-size-2xl); }
    .markdown-content h3[b-2rgnrg04wj] { font-size: var(--dz-font-size-xl); }
    .markdown-content h4[b-2rgnrg04wj] { font-size: var(--dz-font-size-lg); }
    
    .markdown-content .mermaid-container[b-2rgnrg04wj] {
        padding: var(--dz-space-3);
        margin: var(--dz-space-4) 0;
    }
    
    .markdown-content pre[b-2rgnrg04wj] {
        padding: var(--dz-space-3);
        font-size: var(--dz-font-size-xs);
    }
    
    .markdown-content table[b-2rgnrg04wj] {
        font-size: var(--dz-font-size-xs);
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .markdown-content th[b-2rgnrg04wj],
    .markdown-content td[b-2rgnrg04wj] {
        padding: var(--dz-space-2);
    }
    
    .markdown-content ul[b-2rgnrg04wj],
    .markdown-content ol[b-2rgnrg04wj] {
        padding-left: var(--dz-space-6);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .markdown-content code[b-2rgnrg04wj],
    .markdown-content pre[b-2rgnrg04wj],
    .markdown-content .mermaid-container[b-2rgnrg04wj] {
        border-width: 2px;
    }
    
    .markdown-content table[b-2rgnrg04wj] {
        border-width: 2px;
    }
    
    .markdown-content th[b-2rgnrg04wj],
    .markdown-content td[b-2rgnrg04wj] {
        border-bottom-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .markdown-loading .spinner[b-2rgnrg04wj] {
        animation: none;
        border-top-color: var(--dz-bg-accent);
        border-right-color: var(--dz-bg-accent);
    }
    
    .markdown-content a[b-2rgnrg04wj],
    .markdown-content .mermaid-container[b-2rgnrg04wj],
    .markdown-content .alert summary[b-2rgnrg04wj] {
        transition: none;
    }
}

/* Print styles */
@media print {
    .markdown-content[b-2rgnrg04wj] {
        color: #000;
        background: white;
    }
    
    .markdown-content .mermaid-container[b-2rgnrg04wj] {
        border: 1px solid #000;
        background: white;
        break-inside: avoid;
    }
    
    .markdown-content pre[b-2rgnrg04wj] {
        border: 1px solid #000;
        background: #f5f5f5;
    }
    
    .markdown-content table[b-2rgnrg04wj] {
        border: 1px solid #000;
        background: white;
    }
    
    .markdown-content a[b-2rgnrg04wj] {
        color: #000;
        text-decoration: underline;
    }
}

/* Performance optimizations */
.markdown-content[b-2rgnrg04wj] {
    contain: layout style;
}

.markdown-content .mermaid-container[b-2rgnrg04wj] {
    contain: layout style paint;
}

.markdown-loading .spinner[b-2rgnrg04wj] {
    will-change: transform;
}
/* /Components/Rendering/MermaidRenderer.razor.rz.scp.css */
/* MermaidRenderer Component Styles - Enhanced with Design System
 * Mermaid diagram rendering using comprehensive design system tokens
 */

.mermaid-renderer[b-t35qewpn3u] {
    position: relative;
    width: 100%;
    font-family: var(--dz-font-sans);
}

/* Loading State */
.mermaid-loading[b-t35qewpn3u] {
    min-height: 200px;
    padding: var(--dz-space-8);
    background: var(--dz-bg-secondary);
    border-radius: var(--dz-radius-md);
    border: 1px solid var(--dz-border-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--dz-space-3);
    transition: var(--dz-transition-colors);
}

.mermaid-loading .spinner-border[b-t35qewpn3u] {
    width: var(--dz-space-8);
    height: var(--dz-space-8);
    border: 2px solid var(--dz-border-muted);
    border-top-color: var(--dz-bg-accent);
    border-radius: var(--dz-radius-full);
    animation: dz-spin-b-t35qewpn3u var(--dz-duration-1000) linear infinite;
}

.mermaid-loading-text[b-t35qewpn3u] {
    color: var(--dz-text-secondary);
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-medium);
}

@keyframes dz-spin-b-t35qewpn3u {
    to {
        transform: rotate(360deg);
    }
}

/* Content Container */
.mermaid-content[b-t35qewpn3u] {
    width: 100%;
    overflow: auto;
    border-radius: var(--dz-radius-lg);
    background: var(--dz-card-bg);
    border: 1px solid var(--dz-card-border);
    padding: var(--dz-space-4);
    cursor: pointer;
    transition: var(--dz-transition-colors), var(--dz-transition-shadow);
    position: relative;
    scrollbar-width: thin;
}

.mermaid-content[b-t35qewpn3u]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.mermaid-content[b-t35qewpn3u]::-webkit-scrollbar-track {
    background: var(--dz-bg-secondary);
}

.mermaid-content[b-t35qewpn3u]::-webkit-scrollbar-thumb {
    background: var(--dz-border-primary);
    border-radius: var(--dz-radius-sm);
}

.mermaid-content:hover[b-t35qewpn3u] {
    border-color: var(--dz-border-focus);
    box-shadow: var(--dz-shadow-lg);
    transform: translateY(-1px);
}

.mermaid-content:focus-visible[b-t35qewpn3u] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

/* Responsive Mermaid diagrams */
.mermaid-responsive[b-t35qewpn3u] {
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.mermaid-responsive svg[b-t35qewpn3u] {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
    border-radius: var(--dz-radius-sm);
}

/* Mermaid diagram enhancements */
.mermaid-container[b-t35qewpn3u] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--dz-space-2);
}

.mermaid-title[b-t35qewpn3u] {
    font-size: var(--dz-font-size-lg);
    font-weight: var(--dz-font-weight-semibold);
    color: var(--dz-text-primary);
    text-align: center;
    margin-bottom: var(--dz-space-2);
}

.mermaid-toolbar[b-t35qewpn3u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--dz-space-2) var(--dz-space-3);
    background: var(--dz-bg-tertiary);
    border-radius: var(--dz-radius-md);
    margin-bottom: var(--dz-space-2);
}

.mermaid-actions[b-t35qewpn3u] {
    display: flex;
    gap: var(--dz-space-1);
}

.mermaid-action-btn[b-t35qewpn3u] {
    background: none;
    border: 1px solid var(--dz-border-primary);
    color: var(--dz-text-secondary);
    padding: var(--dz-space-1) var(--dz-space-2);
    border-radius: var(--dz-radius-sm);
    font-size: var(--dz-font-size-xs);
    cursor: pointer;
    transition: var(--dz-transition-colors);
    font-family: var(--dz-font-sans);
}

.mermaid-action-btn:hover[b-t35qewpn3u] {
    background-color: var(--dz-bg-secondary);
    border-color: var(--dz-border-focus);
    color: var(--dz-text-primary);
}

/* Error State */
.mermaid-error[b-t35qewpn3u] {
    margin: 0;
    border-left: 4px solid var(--dz-danger-base);
    background: var(--dz-danger-light);
    border: 1px solid var(--dz-danger-base);
    border-radius: var(--dz-radius-md);
    padding: var(--dz-space-4);
    color: var(--dz-danger-dark);
}

.mermaid-error .error-content[b-t35qewpn3u] {
    font-family: var(--dz-font-mono);
    font-size: var(--dz-font-size-sm);
    line-height: var(--dz-line-height-relaxed);
    white-space: pre-line;
    color: var(--dz-danger-dark);
}

.mermaid-error .definition-preview[b-t35qewpn3u] {
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: var(--dz-radius-sm);
    padding: var(--dz-space-3);
    max-height: 200px;
    overflow-y: auto;
    font-size: var(--dz-font-size-xs);
    line-height: var(--dz-line-height-normal);
    font-family: var(--dz-font-mono);
    margin-top: var(--dz-space-3);
    scrollbar-width: thin;
}

.mermaid-error .definition-preview[b-t35qewpn3u]::-webkit-scrollbar {
    width: 6px;
}

.mermaid-error .definition-preview[b-t35qewpn3u]::-webkit-scrollbar-track {
    background: transparent;
}

.mermaid-error .definition-preview[b-t35qewpn3u]::-webkit-scrollbar-thumb {
    background: var(--dz-danger-base);
    border-radius: var(--dz-radius-sm);
}

.mermaid-error details summary[b-t35qewpn3u] {
    cursor: pointer;
    user-select: none;
    padding: var(--dz-space-1) 0;
    border-radius: var(--dz-radius-sm);
    font-weight: var(--dz-font-weight-medium);
    color: var(--dz-danger-dark);
    transition: var(--dz-transition-colors);
}

.mermaid-error details summary:hover[b-t35qewpn3u] {
    background: rgba(0, 0, 0, 0.1);
    padding-left: var(--dz-space-2);
    padding-right: var(--dz-space-2);
}

.mermaid-error details summary:focus-visible[b-t35qewpn3u] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

.mermaid-error details[open] summary[b-t35qewpn3u] {
    margin-bottom: var(--dz-space-2);
}

.mermaid-error-title[b-t35qewpn3u] {
    font-size: var(--dz-font-size-base);
    font-weight: var(--dz-font-weight-semibold);
    color: var(--dz-danger-dark);
    margin-bottom: var(--dz-space-2);
}

/* Empty State */
.mermaid-empty[b-t35qewpn3u] {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--dz-bg-secondary);
    border-radius: var(--dz-radius-lg);
    border: 2px dashed var(--dz-border-muted);
    padding: var(--dz-space-8);
    text-align: center;
    transition: var(--dz-transition-colors);
}

.mermaid-empty:hover[b-t35qewpn3u] {
    border-color: var(--dz-border-primary);
    background: var(--dz-bg-tertiary);
}

.mermaid-empty-icon[b-t35qewpn3u] {
    font-size: var(--dz-font-size-4xl);
    color: var(--dz-text-muted);
    margin-bottom: var(--dz-space-3);
    opacity: 0.7;
}

.mermaid-empty-text[b-t35qewpn3u] {
    color: var(--dz-text-secondary);
    font-size: var(--dz-font-size-sm);
    margin-bottom: var(--dz-space-2);
}

.mermaid-empty-hint[b-t35qewpn3u] {
    color: var(--dz-text-muted);
    font-size: var(--dz-font-size-xs);
}

/* Diagram type indicators */
.mermaid-type-indicator[b-t35qewpn3u] {
    position: absolute;
    top: var(--dz-space-2);
    right: var(--dz-space-2);
    background: var(--dz-bg-accent);
    color: var(--dz-text-inverse);
    padding: var(--dz-space-0_5) var(--dz-space-2);
    border-radius: var(--dz-radius-full);
    font-size: var(--dz-font-size-xs);
    font-weight: var(--dz-font-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--dz-letter-spacing-wide);
    z-index: var(--dz-z-10);
}

/* Interactive diagram features */
.mermaid-interactive[b-t35qewpn3u] {
    cursor: grab;
}

.mermaid-interactive:active[b-t35qewpn3u] {
    cursor: grabbing;
}

.mermaid-zoomable[b-t35qewpn3u] {
    overflow: hidden;
    position: relative;
}

.mermaid-zoom-controls[b-t35qewpn3u] {
    position: absolute;
    bottom: var(--dz-space-2);
    right: var(--dz-space-2);
    display: flex;
    gap: var(--dz-space-1);
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--dz-radius-md);
    padding: var(--dz-space-1);
    box-shadow: var(--dz-shadow-md);
}

.mermaid-zoom-btn[b-t35qewpn3u] {
    background: none;
    border: 1px solid var(--dz-border-primary);
    color: var(--dz-text-secondary);
    padding: var(--dz-space-1);
    border-radius: var(--dz-radius-sm);
    cursor: pointer;
    transition: var(--dz-transition-colors);
    width: var(--dz-space-6);
    height: var(--dz-space-6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mermaid-zoom-btn:hover[b-t35qewpn3u] {
    background-color: var(--dz-bg-secondary);
    color: var(--dz-text-primary);
}

/* Responsive Design */
@media (max-width: 767.98px) {
    .mermaid-content[b-t35qewpn3u] {
        padding: var(--dz-space-3);
    }
    
    .mermaid-loading[b-t35qewpn3u] {
        min-height: 150px;
        padding: var(--dz-space-6) var(--dz-space-4);
    }
    
    .mermaid-toolbar[b-t35qewpn3u] {
        flex-direction: column;
        gap: var(--dz-space-2);
        align-items: stretch;
    }
    
    .mermaid-actions[b-t35qewpn3u] {
        justify-content: center;
    }
    
    .mermaid-error .error-content[b-t35qewpn3u] {
        font-size: var(--dz-font-size-xs);
    }
    
    .mermaid-error .definition-preview[b-t35qewpn3u] {
        font-size: 0.6875rem;
        max-height: 150px;
    }
    
    .mermaid-empty[b-t35qewpn3u] {
        min-height: 150px;
        padding: var(--dz-space-6);
    }
    
    .mermaid-zoom-controls[b-t35qewpn3u] {
        bottom: var(--dz-space-1);
        right: var(--dz-space-1);
    }
}

@media (max-width: 575.98px) {
    .mermaid-type-indicator[b-t35qewpn3u] {
        position: static;
        margin-bottom: var(--dz-space-2);
        align-self: center;
    }
    
    .mermaid-action-btn[b-t35qewpn3u] {
        flex: 1;
        text-align: center;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .mermaid-content[b-t35qewpn3u] {
        border-width: 2px;
    }
    
    .mermaid-error[b-t35qewpn3u] {
        border-left-width: 6px;
        border-width: 2px;
    }
    
    .mermaid-empty[b-t35qewpn3u] {
        border-width: 3px;
    }
    
    .mermaid-action-btn[b-t35qewpn3u],
    .mermaid-zoom-btn[b-t35qewpn3u] {
        border-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .mermaid-content[b-t35qewpn3u] {
        transition: none;
    }
    
    .mermaid-content:hover[b-t35qewpn3u] {
        transform: none;
    }
    
    .mermaid-loading .spinner-border[b-t35qewpn3u] {
        animation: none;
        border-top-color: var(--dz-bg-accent);
        border-right-color: var(--dz-bg-accent);
    }
    
    .mermaid-action-btn[b-t35qewpn3u],
    .mermaid-zoom-btn[b-t35qewpn3u],
    .mermaid-error details summary[b-t35qewpn3u] {
        transition: none;
    }
}

/* Print styles */
@media print {
    .mermaid-content[b-t35qewpn3u] {
        border: 1px solid #000;
        break-inside: avoid;
        background: white;
        color: black;
    }
    
    .mermaid-loading[b-t35qewpn3u],
    .mermaid-error[b-t35qewpn3u],
    .mermaid-empty[b-t35qewpn3u],
    .mermaid-toolbar[b-t35qewpn3u],
    .mermaid-zoom-controls[b-t35qewpn3u] {
        display: none;
    }
    
    .mermaid-responsive svg[b-t35qewpn3u] {
        max-width: 100% !important;
        max-height: 80vh !important;
    }
}

/* Performance optimizations */
.mermaid-renderer[b-t35qewpn3u] {
    contain: layout style paint;
}

.mermaid-content[b-t35qewpn3u] {
    contain: layout style;
}

.mermaid-loading .spinner-border[b-t35qewpn3u] {
    will-change: transform;
}

/* Accessibility enhancements */
.mermaid-content[role="img"][b-t35qewpn3u] {
    /* Screen reader support for diagram images */
}

.mermaid-content[tabindex]:focus-visible[b-t35qewpn3u] {
    /* Enhanced focus for keyboard navigation */
}

/* Animation on diagram load */
.mermaid-fade-in[b-t35qewpn3u] {
    animation: mermaid-fade-in-b-t35qewpn3u var(--dz-duration-500) var(--dz-ease-out);
}

@keyframes mermaid-fade-in-b-t35qewpn3u {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/Shared/EmptyState.razor.rz.scp.css */
/* Empty State Styles - Enhanced with Design System
 * Empty state component using comprehensive design system tokens
 */

.empty-state-container[b-q2sftvkliv] {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--dz-space-8) var(--dz-space-4);
    background-color: var(--dz-bg-secondary);
    border-radius: var(--dz-radius-lg);
    border: 1px solid var(--dz-border-secondary);
    margin: var(--dz-space-4) 0;
    transition: var(--dz-transition-colors);
}

.empty-state-content[b-q2sftvkliv] {
    max-width: 400px;
    text-align: center;
    padding: var(--dz-space-8);
    font-family: var(--dz-font-sans);
}

/* Icon and emoji styling */
.empty-state-icon[b-q2sftvkliv] {
    font-size: var(--dz-font-size-6xl);
    color: var(--dz-text-muted);
    opacity: 0.6;
    margin-bottom: var(--dz-space-4);
    display: block;
}

.empty-state-emoji[b-q2sftvkliv] {
    font-size: var(--dz-font-size-6xl);
    line-height: 1;
    margin-bottom: var(--dz-space-4);
    display: block;
    filter: grayscale(0.3);
    opacity: 0.8;
}

/* Typography */
.empty-state-title[b-q2sftvkliv] {
    font-size: var(--dz-font-size-xl);
    font-weight: var(--dz-font-weight-semibold);
    color: var(--dz-text-primary);
    margin-bottom: var(--dz-space-2);
    line-height: var(--dz-line-height-tight);
}

.empty-state-message[b-q2sftvkliv] {
    font-size: var(--dz-font-size-sm);
    color: var(--dz-text-secondary);
    line-height: var(--dz-line-height-relaxed);
    margin-bottom: var(--dz-space-4);
}

.empty-state-help[b-q2sftvkliv] {
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-muted);
    line-height: var(--dz-line-height-relaxed);
    margin-bottom: var(--dz-space-4);
    padding: var(--dz-space-3);
    background-color: var(--dz-bg-tertiary);
    border-radius: var(--dz-radius-md);
    border-left: 3px solid var(--dz-info-base);
}

/* Action button */
.empty-state-action[b-q2sftvkliv] {
    margin-top: var(--dz-space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dz-space-2);
}

.empty-state-btn[b-q2sftvkliv] {
    background-color: var(--dz-bg-accent);
    color: var(--dz-text-inverse);
    border: none;
    padding: var(--dz-space-3) var(--dz-space-6);
    border-radius: var(--dz-radius-md);
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-medium);
    font-family: var(--dz-font-sans);
    cursor: pointer;
    transition: var(--dz-transition-colors);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--dz-space-2);
}

.empty-state-btn:hover[b-q2sftvkliv] {
    background-color: var(--dz-brand-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--dz-shadow-md);
}

.empty-state-btn:focus-visible[b-q2sftvkliv] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

.empty-state-btn:active[b-q2sftvkliv] {
    transform: translateY(0);
    box-shadow: var(--dz-shadow-sm);
}

.empty-state-btn--secondary[b-q2sftvkliv] {
    background-color: transparent;
    color: var(--dz-text-secondary);
    border: 1px solid var(--dz-border-primary);
}

.empty-state-btn--secondary:hover[b-q2sftvkliv] {
    background-color: var(--dz-bg-tertiary);
    border-color: var(--dz-border-secondary);
    color: var(--dz-text-primary);
}

/* Empty state variants */
.empty-state-container--sm[b-q2sftvkliv] {
    min-height: 150px;
    padding: var(--dz-space-6) var(--dz-space-3);
}

.empty-state-container--sm .empty-state-content[b-q2sftvkliv] {
    padding: var(--dz-space-4);
}

.empty-state-container--sm .empty-state-icon[b-q2sftvkliv],
.empty-state-container--sm .empty-state-emoji[b-q2sftvkliv] {
    font-size: var(--dz-font-size-4xl);
}

.empty-state-container--lg[b-q2sftvkliv] {
    min-height: 300px;
    padding: var(--dz-space-12) var(--dz-space-6);
}

.empty-state-container--lg .empty-state-content[b-q2sftvkliv] {
    padding: var(--dz-space-12);
    max-width: 500px;
}

.empty-state-container--lg .empty-state-icon[b-q2sftvkliv],
.empty-state-container--lg .empty-state-emoji[b-q2sftvkliv] {
    font-size: 8rem;
}

/* Illustration-based empty states */
.empty-state-illustration[b-q2sftvkliv] {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--dz-space-4);
    opacity: 0.7;
    filter: grayscale(0.2);
}

.empty-state-illustration svg[b-q2sftvkliv] {
    width: 100%;
    height: 100%;
}

/* Interactive empty states */
.empty-state-container--interactive[b-q2sftvkliv] {
    cursor: pointer;
    border: 2px dashed var(--dz-border-muted);
    background-color: var(--dz-bg-primary);
    transition: var(--dz-transition-colors), var(--dz-transition-transform);
}

.empty-state-container--interactive:hover[b-q2sftvkliv] {
    border-color: var(--dz-border-focus);
    background-color: var(--dz-bg-secondary);
    transform: translateY(-2px);
    box-shadow: var(--dz-shadow-lg);
}

.empty-state-container--interactive:hover .empty-state-icon[b-q2sftvkliv],
.empty-state-container--interactive:hover .empty-state-emoji[b-q2sftvkliv] {
    opacity: 0.9;
    transform: scale(1.05);
}

/* Loading state overlay */
.empty-state-container--loading[b-q2sftvkliv] {
    position: relative;
    pointer-events: none;
}

.empty-state-container--loading[b-q2sftvkliv]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        var(--dz-bg-muted) 25%,
        var(--dz-border-secondary) 50%,
        var(--dz-bg-muted) 75%
    );
    background-size: 200% 100%;
    animation: shimmer-b-q2sftvkliv var(--dz-duration-1000) infinite;
    border-radius: inherit;
    z-index: var(--dz-z-10);
}

@keyframes shimmer-b-q2sftvkliv {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Search result specific styling */
.empty-state-search[b-q2sftvkliv] {
    background: linear-gradient(135deg, var(--dz-bg-secondary), var(--dz-info-light));
    border: 1px solid var(--dz-info-base);
}

.empty-state-search .empty-state-icon[b-q2sftvkliv] {
    color: var(--dz-info-base);
}

/* Error state styling */
.empty-state-error[b-q2sftvkliv] {
    background: linear-gradient(135deg, var(--dz-bg-secondary), var(--dz-danger-light));
    border: 1px solid var(--dz-danger-base);
}

.empty-state-error .empty-state-icon[b-q2sftvkliv] {
    color: var(--dz-danger-base);
}

.empty-state-error .empty-state-title[b-q2sftvkliv] {
    color: var(--dz-danger-dark);
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .empty-state-container[b-q2sftvkliv] {
        padding: var(--dz-space-6) var(--dz-space-3);
        min-height: 180px;
    }
    
    .empty-state-content[b-q2sftvkliv] {
        padding: var(--dz-space-4);
        max-width: 320px;
    }
    
    .empty-state-icon[b-q2sftvkliv],
    .empty-state-emoji[b-q2sftvkliv] {
        font-size: var(--dz-font-size-5xl);
    }
    
    .empty-state-title[b-q2sftvkliv] {
        font-size: var(--dz-font-size-lg);
    }
    
    .empty-state-message[b-q2sftvkliv] {
        font-size: var(--dz-font-size-xs);
    }
    
    .empty-state-illustration[b-q2sftvkliv] {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 575.98px) {
    .empty-state-container[b-q2sftvkliv] {
        padding: var(--dz-space-4) var(--dz-space-2);
        margin: var(--dz-space-2) 0;
    }
    
    .empty-state-content[b-q2sftvkliv] {
        padding: var(--dz-space-3);
    }
    
    .empty-state-action[b-q2sftvkliv] {
        flex-direction: column;
    }
    
    .empty-state-btn[b-q2sftvkliv] {
        width: 100%;
        justify-content: center;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .empty-state-container[b-q2sftvkliv] {
        border-width: 2px;
    }
    
    .empty-state-icon[b-q2sftvkliv] {
        opacity: 1;
    }
    
    .empty-state-message[b-q2sftvkliv],
    .empty-state-help[b-q2sftvkliv] {
        color: var(--dz-text-primary);
    }
    
    .empty-state-btn[b-q2sftvkliv] {
        border: 2px solid transparent;
    }
    
    .empty-state-btn--secondary[b-q2sftvkliv] {
        border-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .empty-state-container--interactive:hover[b-q2sftvkliv] {
        transform: none;
    }
    
    .empty-state-container--interactive:hover .empty-state-icon[b-q2sftvkliv],
    .empty-state-container--interactive:hover .empty-state-emoji[b-q2sftvkliv] {
        transform: none;
    }
    
    .empty-state-container--loading[b-q2sftvkliv]::before {
        animation: none;
        background: var(--dz-bg-muted);
    }
    
    .empty-state-btn:hover[b-q2sftvkliv] {
        transform: none;
    }
    
    .empty-state-btn:active[b-q2sftvkliv] {
        transform: none;
    }
}

/* Print styles */
@media print {
    .empty-state-container[b-q2sftvkliv] {
        background: white;
        border: 1px solid #000;
        color: #000;
    }
    
    .empty-state-action[b-q2sftvkliv] {
        display: none;
    }
}

/* Performance optimizations */
.empty-state-container[b-q2sftvkliv] {
    contain: layout style paint;
}

.empty-state-container--loading[b-q2sftvkliv]::before {
    will-change: background-position;
}

.empty-state-container--interactive[b-q2sftvkliv] {
    will-change: transform;
}

/* Accessibility enhancements */
.empty-state-container[role="button"][b-q2sftvkliv] {
    /* Already has cursor: pointer from interactive variant */
}

.empty-state-container[tabindex]:focus-visible[b-q2sftvkliv] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

/* Animation on first load */
.empty-state-container--animate[b-q2sftvkliv] {
    animation: empty-state-fade-in-b-q2sftvkliv var(--dz-duration-500) var(--dz-ease-out);
}

@keyframes empty-state-fade-in-b-q2sftvkliv {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/Shared/ErrorState.razor.rz.scp.css */
/* ErrorState Styles - Enhanced with Design System
 * Consistent error display using design system components
 */

.error-state-container[b-j9u29umbji] {
    border-radius: var(--dz-radius-md);
    overflow: hidden;
}

.error-state-container .alert[b-j9u29umbji] {
    margin-bottom: 0;
    border-radius: var(--dz-radius-md);
    border: 1px solid var(--dz-danger-base);
    background-color: var(--dz-danger-light);
    color: var(--dz-danger-dark);
    padding: var(--dz-space-4);
    font-family: var(--dz-font-sans);
}

.error-state-container .error-icon[b-j9u29umbji] {
    flex-shrink: 0;
    font-size: var(--dz-font-size-lg);
    margin-right: var(--dz-space-3);
    color: var(--dz-danger-base);
}

.error-state-container .alert-header[b-j9u29umbji] {
    margin-bottom: var(--dz-space-2);
    font-size: var(--dz-font-size-base);
    font-weight: var(--dz-font-weight-semibold);
    color: var(--dz-danger-dark);
}

.error-state-container .alert-body[b-j9u29umbji] {
    font-size: var(--dz-font-size-sm);
    line-height: var(--dz-line-height-normal);
    color: var(--dz-danger-dark);
}

.error-state-container .error-details[b-j9u29umbji] {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: var(--dz-radius-sm);
    padding: var(--dz-space-3);
    font-family: var(--dz-font-mono);
    font-size: var(--dz-font-size-xs);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
    margin-top: var(--dz-space-3);
    border: 1px solid rgba(0, 0, 0, 0.1);
    scrollbar-width: thin;
}

.error-state-container .error-details[b-j9u29umbji]::-webkit-scrollbar {
    width: 6px;
}

.error-state-container .error-details[b-j9u29umbji]::-webkit-scrollbar-track {
    background: transparent;
}

.error-state-container .error-details[b-j9u29umbji]::-webkit-scrollbar-thumb {
    background: var(--dz-danger-base);
    border-radius: var(--dz-radius-sm);
}

/* Error state variants */
.error-state-container--warning[b-j9u29umbji] {
    .alert {
        border-color: var(--dz-warning-base);
        background-color: var(--dz-warning-light);
        color: var(--dz-warning-dark);
    }
    
    .error-icon[b-j9u29umbji] {
        color: var(--dz-warning-base);
    }
    
    .alert-header[b-j9u29umbji],
    .alert-body[b-j9u29umbji] {
        color: var(--dz-warning-dark);
    }
    
    .error-details[b-j9u29umbji]::-webkit-scrollbar-thumb {
        background: var(--dz-warning-base);
    }
}

.error-state-container--info[b-j9u29umbji] {
    .alert {
        border-color: var(--dz-info-base);
        background-color: var(--dz-info-light);
        color: var(--dz-info-dark);
    }
    
    .error-icon[b-j9u29umbji] {
        color: var(--dz-info-base);
    }
    
    .alert-header[b-j9u29umbji],
    .alert-body[b-j9u29umbji] {
        color: var(--dz-info-dark);
    }
    
    .error-details[b-j9u29umbji]::-webkit-scrollbar-thumb {
        background: var(--dz-info-base);
    }
}

/* Error actions */
.error-actions[b-j9u29umbji] {
    margin-top: var(--dz-space-4);
    display: flex;
    gap: var(--dz-space-2);
    flex-wrap: wrap;
}

.error-retry-btn[b-j9u29umbji] {
    background-color: var(--dz-danger-base);
    color: var(--dz-text-inverse);
    border: none;
    padding: var(--dz-space-2) var(--dz-space-4);
    border-radius: var(--dz-radius-md);
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-medium);
    cursor: pointer;
    transition: var(--dz-transition-colors);
    font-family: var(--dz-font-sans);
}

.error-retry-btn:hover[b-j9u29umbji] {
    background-color: var(--dz-danger-dark);
}

.error-retry-btn:focus-visible[b-j9u29umbji] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

.error-dismiss-btn[b-j9u29umbji] {
    background-color: transparent;
    color: var(--dz-danger-base);
    border: 1px solid var(--dz-danger-base);
    padding: var(--dz-space-2) var(--dz-space-4);
    border-radius: var(--dz-radius-md);
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-medium);
    cursor: pointer;
    transition: var(--dz-transition-colors);
    font-family: var(--dz-font-sans);
}

.error-dismiss-btn:hover[b-j9u29umbji] {
    background-color: var(--dz-danger-base);
    color: var(--dz-text-inverse);
}

.error-dismiss-btn:focus-visible[b-j9u29umbji] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

/* Error with expandable details */
.error-expandable-details[b-j9u29umbji] {
    margin-top: var(--dz-space-3);
}

.error-details-toggle[b-j9u29umbji] {
    background: none;
    border: none;
    color: var(--dz-danger-base);
    font-size: var(--dz-font-size-sm);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font-family: var(--dz-font-sans);
    transition: var(--dz-transition-colors);
}

.error-details-toggle:hover[b-j9u29umbji] {
    color: var(--dz-danger-dark);
}

.error-details-toggle:focus-visible[b-j9u29umbji] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

/* Collapsible error details */
.error-details-collapsible[b-j9u29umbji] {
    overflow: hidden;
    transition: max-height var(--dz-duration-300) var(--dz-ease-out);
    max-height: 0;
}

.error-details-collapsible.expanded[b-j9u29umbji] {
    max-height: 300px;
}

/* Error state with icon variants */
.error-with-icon[b-j9u29umbji] {
    display: flex;
    align-items: flex-start;
}

.error-content[b-j9u29umbji] {
    flex: 1;
}

/* Dark theme adjustments */
[data-theme="dark"] .error-state-container .error-details[b-j9u29umbji] {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .error-state-container .alert[b-j9u29umbji] {
        border-width: 2px;
    }
    
    .error-state-container .error-icon[b-j9u29umbji] {
        opacity: 1;
    }
    
    .error-retry-btn[b-j9u29umbji],
    .error-dismiss-btn[b-j9u29umbji] {
        border-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .error-details-collapsible[b-j9u29umbji] {
        transition: none;
    }
    
    .error-retry-btn[b-j9u29umbji],
    .error-dismiss-btn[b-j9u29umbji],
    .error-details-toggle[b-j9u29umbji] {
        transition: none;
    }
}

/* Print styles */
@media print {
    .error-actions[b-j9u29umbji] {
        display: none;
    }
    
    .error-details-collapsible[b-j9u29umbji] {
        max-height: none !important;
    }
}

/* Mobile optimizations */
@media (max-width: 575.98px) {
    .error-state-container .alert[b-j9u29umbji] {
        padding: var(--dz-space-3);
    }
    
    .error-actions[b-j9u29umbji] {
        flex-direction: column;
    }
    
    .error-retry-btn[b-j9u29umbji],
    .error-dismiss-btn[b-j9u29umbji] {
        width: 100%;
        text-align: center;
    }
    
    .error-details[b-j9u29umbji] {
        font-size: var(--dz-font-size-xs);
        max-height: 150px;
    }
}

/* Performance optimizations */
.error-state-container[b-j9u29umbji] {
    contain: layout style paint;
}

.error-details[b-j9u29umbji] {
    contain: layout style;
}
/* /Components/Shared/LoadingState.razor.rz.scp.css */
/* LoadingState Styles - Enhanced with Design System
 * Consistent loading states using design system tokens
 */

.loading-state-container[b-lra6um0605] {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: var(--dz-bg-secondary);
    border-radius: var(--dz-radius-md);
    padding: var(--dz-space-4);
    border: 1px solid var(--dz-border-secondary);
    transition: var(--dz-transition-colors);
}

.loading-spinner-container[b-lra6um0605] {
    padding: var(--dz-space-8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loading-spinner[b-lra6um0605] {
    width: var(--dz-space-8);
    height: var(--dz-space-8);
    border: 2px solid var(--dz-border-muted);
    border-top-color: var(--dz-bg-accent);
    border-radius: var(--dz-radius-full);
    animation: dz-spin-b-lra6um0605 var(--dz-duration-1000) linear infinite;
}

@keyframes dz-spin-b-lra6um0605 {
    to {
        transform: rotate(360deg);
    }
}

.loading-message[b-lra6um0605] {
    font-size: var(--dz-font-size-sm);
    color: var(--dz-text-secondary);
    margin-top: var(--dz-space-2);
    text-align: center;
    font-family: var(--dz-font-sans);
    font-weight: var(--dz-font-weight-normal);
}

.loading-message-only[b-lra6um0605] {
    padding: var(--dz-space-8);
    font-size: var(--dz-font-size-sm);
    color: var(--dz-text-secondary);
    text-align: center;
    font-family: var(--dz-font-sans);
}

/* Loading state variants */
.loading-state-container--sm[b-lra6um0605] {
    min-height: 60px;
    padding: var(--dz-space-3);
}

.loading-state-container--sm .loading-spinner-container[b-lra6um0605] {
    padding: var(--dz-space-4);
}

.loading-state-container--sm .loading-spinner[b-lra6um0605] {
    width: var(--dz-space-6);
    height: var(--dz-space-6);
}

.loading-state-container--lg[b-lra6um0605] {
    min-height: 200px;
    padding: var(--dz-space-6);
}

.loading-state-container--lg .loading-spinner-container[b-lra6um0605] {
    padding: var(--dz-space-12);
}

.loading-state-container--lg .loading-spinner[b-lra6um0605] {
    width: var(--dz-space-12);
    height: var(--dz-space-12);
    border-width: 3px;
}

/* Loading overlay variant */
.loading-overlay[b-lra6um0605] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: var(--dz-z-50);
    border-radius: inherit;
}

[data-theme="dark"] .loading-overlay[b-lra6um0605] {
    background-color: rgba(26, 26, 26, 0.9);
}

/* Loading with progress */
.loading-with-progress[b-lra6um0605] {
    gap: var(--dz-space-4);
}

.loading-progress[b-lra6um0605] {
    width: 100%;
    max-width: 200px;
    height: var(--dz-space-1);
    background-color: var(--dz-bg-muted);
    border-radius: var(--dz-radius-full);
    overflow: hidden;
}

.loading-progress-bar[b-lra6um0605] {
    height: 100%;
    background-color: var(--dz-bg-accent);
    border-radius: inherit;
    transition: width var(--dz-duration-300) var(--dz-ease-out);
}

/* Loading skeleton variant */
.loading-skeleton[b-lra6um0605] {
    background: linear-gradient(
        90deg,
        var(--dz-bg-muted) 25%,
        var(--dz-border-secondary) 50%,
        var(--dz-bg-muted) 75%
    );
    background-size: 200% 100%;
    animation: shimmer-b-lra6um0605 var(--dz-duration-1000) infinite;
    border-radius: var(--dz-radius-sm);
}

@keyframes shimmer-b-lra6um0605 {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.loading-skeleton--text[b-lra6um0605] {
    height: var(--dz-space-4);
    margin-bottom: var(--dz-space-2);
}

.loading-skeleton--title[b-lra6um0605] {
    height: var(--dz-space-6);
    width: 60%;
    margin-bottom: var(--dz-space-3);
}

.loading-skeleton--paragraph[b-lra6um0605] {
    height: var(--dz-space-3);
    width: 100%;
    margin-bottom: var(--dz-space-1);
}

.loading-skeleton--paragraph:last-child[b-lra6um0605] {
    width: 70%;
}

/* Responsive adjustments */
@media (max-width: 575.98px) {
    .loading-spinner-container[b-lra6um0605] {
        padding: var(--dz-space-4);
    }
    
    .loading-state-container--lg[b-lra6um0605] {
        min-height: 150px;
        padding: var(--dz-space-4);
    }
    
    .loading-state-container--lg .loading-spinner-container[b-lra6um0605] {
        padding: var(--dz-space-6);
    }
    
    .loading-progress[b-lra6um0605] {
        max-width: 150px;
    }
}

/* Accessibility enhancements */
@media (prefers-reduced-motion: reduce) {
    .loading-spinner[b-lra6um0605] {
        animation: none;
        border-top-color: var(--dz-bg-accent);
        border-right-color: var(--dz-bg-accent);
    }
    
    .loading-skeleton[b-lra6um0605] {
        animation: none;
        background: var(--dz-bg-muted);
    }
    
    .loading-progress-bar[b-lra6um0605] {
        transition: none;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .loading-state-container[b-lra6um0605] {
        border-width: 2px;
    }
    
    .loading-spinner[b-lra6um0605] {
        border-width: 3px;
    }
}

/* Focus management */
.loading-state-container[tabindex][b-lra6um0605] {
    outline: none;
}

.loading-state-container[tabindex]:focus-visible[b-lra6um0605] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

/* Loading text animations */
.loading-dots[b-lra6um0605]::after {
    content: '';
    animation: loading-dots-b-lra6um0605 var(--dz-duration-1000) infinite;
}

@keyframes loading-dots-b-lra6um0605 {
    0%, 20% {
        content: '';
    }
    40% {
        content: '.',
    }
    60% {
        content: '..',
    }
    80%, 100% {
        content: '...',
    }
}

/* Performance optimizations */
.loading-state-container[b-lra6um0605] {
    contain: layout style paint;
}

.loading-spinner[b-lra6um0605] {
    will-change: transform;
}

.loading-skeleton[b-lra6um0605] {
    will-change: background-position;
}
/* /Components/UI/ConfirmationDialog.razor.rz.scp.css */
/* Modern Confirmation Dialog Styles */
.confirmation-overlay[b-6yzjkjyabw] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    z-index: 10000; /* Higher than unsaved changes dialog */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.confirmation-overlay.show[b-6yzjkjyabw] {
    opacity: 1;
    visibility: visible;
}

.confirmation-dialog[b-6yzjkjyabw] {
    background: white;
    border-radius: 16px;
    box-shadow: 
        0 32px 64px rgba(0, 0, 0, 0.2),
        0 12px 24px rgba(0, 0, 0, 0.15);
    width: 90%;
    max-width: 480px;
    transform: scale(0.85) translateY(40px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.confirmation-overlay.show .confirmation-dialog[b-6yzjkjyabw] {
    transform: scale(1) translateY(0);
}

.dialog-content[b-6yzjkjyabw] {
    padding: 0;
}

/* Icon Headers */
.dialog-icon[b-6yzjkjyabw] {
    display: flex;
    justify-content: center;
    padding: 40px 40px 32px 40px;
    border-bottom: 1px solid #f1f1f1;
}

.warning-icon-container[b-6yzjkjyabw] {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 24px rgba(255, 152, 0, 0.4);
}

.danger-icon-container[b-6yzjkjyabw] {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 24px rgba(244, 67, 54, 0.4);
}

.info-icon-container[b-6yzjkjyabw] {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 24px rgba(33, 150, 243, 0.4);
}

.warning-icon-container[b-6yzjkjyabw] {
    background: linear-gradient(135deg, #fef3e2 0%, #fff8f0 100%);
    border-bottom: 1px solid #f1f1f1;
}

.danger-icon-container[b-6yzjkjyabw] {
    background: linear-gradient(135deg, #fff5f5 0%, #fef9f9 100%);
    border-bottom: 1px solid #f1f1f1;
}

.info-icon-container[b-6yzjkjyabw] {
    background: linear-gradient(135deg, #f0f8ff 0%, #f7fbff 100%);
    border-bottom: 1px solid #f1f1f1;
}

.warning-icon-container i[b-6yzjkjyabw],
.danger-icon-container i[b-6yzjkjyabw],
.info-icon-container i[b-6yzjkjyabw] {
    font-size: 32px;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Dialog Body */
.dialog-body[b-6yzjkjyabw] {
    padding: 32px 40px;
    text-align: center;
}

.dialog-title[b-6yzjkjyabw] {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 20px 0;
    line-height: 1.2;
}

.dialog-message[b-6yzjkjyabw] {
    margin: 0;
}

.confirmation-message[b-6yzjkjyabw] {
    font-size: 18px;
    color: #4a4a4a;
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.warning-text[b-6yzjkjyabw] {
    background: linear-gradient(135deg, #fff3cd 0%, #fefbf0 100%);
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    padding: 16px;
    color: #856404;
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: flex-start;
    text-align: left;
    line-height: 1.4;
}

.warning-text i[b-6yzjkjyabw] {
    color: #f39c12;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Action Buttons */
.dialog-actions[b-6yzjkjyabw] {
    padding: 20px 40px 40px 40px;
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.dialog-actions .btn[b-6yzjkjyabw] {
    border: none;
    border-radius: 10px;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    text-decoration: none;
    outline: none;
    position: relative;
    overflow: hidden;
}

.dialog-actions .btn:focus[b-6yzjkjyabw] {
    outline: 3px solid rgba(0, 123, 255, 0.3);
    outline-offset: 2px;
}

.dialog-actions .btn i[b-6yzjkjyabw] {
    margin-right: 8px;
    font-size: 14px;
}

/* Cancel Button */
.btn-cancel[b-6yzjkjyabw] {
    background: #f8f9fa;
    color: #6c757d;
    border: 2px solid #e9ecef;
}

.btn-cancel:hover[b-6yzjkjyabw] {
    background: #e9ecef;
    color: #495057;
    border-color: #dee2e6;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.btn-cancel:active[b-6yzjkjyabw] {
    transform: translateY(0);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

/* Warning Button */
.btn-warning[b-6yzjkjyabw] {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    color: #212529;
    border: 2px solid #ffc107;
    box-shadow: 0 6px 16px rgba(255, 193, 7, 0.4);
}

.btn-warning:hover[b-6yzjkjyabw] {
    background: linear-gradient(135deg, #e0a800 0%, #d39e00 100%);
    border-color: #e0a800;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 193, 7, 0.5);
}

.btn-warning:active[b-6yzjkjyabw] {
    transform: translateY(0);
    box-shadow: 0 6px 16px rgba(255, 193, 7, 0.4);
}

/* Danger Button */
.btn-danger[b-6yzjkjyabw] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    border: 2px solid #dc3545;
    box-shadow: 0 6px 16px rgba(220, 53, 69, 0.4);
}

.btn-danger:hover[b-6yzjkjyabw] {
    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
    border-color: #c82333;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(220, 53, 69, 0.5);
}

.btn-danger:active[b-6yzjkjyabw] {
    transform: translateY(0);
    box-shadow: 0 6px 16px rgba(220, 53, 69, 0.4);
}

/* Primary Button */
.btn-primary[b-6yzjkjyabw] {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    border: 2px solid #007bff;
    box-shadow: 0 6px 16px rgba(0, 123, 255, 0.4);
}

.btn-primary:hover[b-6yzjkjyabw] {
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
    border-color: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.5);
}

.btn-primary:active[b-6yzjkjyabw] {
    transform: translateY(0);
    box-shadow: 0 6px 16px rgba(0, 123, 255, 0.4);
}

/* Dark Theme Support */
[data-bs-theme="dark"] .confirmation-dialog[b-6yzjkjyabw] {
    background: #2d3748;
    color: #e2e8f0;
}

[data-bs-theme="dark"] .dialog-icon[b-6yzjkjyabw] {
    border-bottom-color: #4a5568;
}

[data-bs-theme="dark"] .warning-icon-container[b-6yzjkjyabw] {
    background: linear-gradient(135deg, #744210 0%, #553308 100%);
}

[data-bs-theme="dark"] .danger-icon-container[b-6yzjkjyabw] {
    background: linear-gradient(135deg, #742a2a 0%, #553030 100%);
}

[data-bs-theme="dark"] .info-icon-container[b-6yzjkjyabw] {
    background: linear-gradient(135deg, #2a4365 0%, #2c5282 100%);
}

[data-bs-theme="dark"] .dialog-title[b-6yzjkjyabw] {
    color: #f7fafc;
}

[data-bs-theme="dark"] .confirmation-message[b-6yzjkjyabw] {
    color: #cbd5e0;
}

[data-bs-theme="dark"] .warning-text[b-6yzjkjyabw] {
    background: linear-gradient(135deg, #744210 0%, #553308 100%);
    border-color: #975a16;
    color: #fbd38d;
}

[data-bs-theme="dark"] .warning-text i[b-6yzjkjyabw] {
    color: #ed8936;
}

[data-bs-theme="dark"] .btn-cancel[b-6yzjkjyabw] {
    background: #4a5568;
    color: #e2e8f0;
    border-color: #718096;
}

[data-bs-theme="dark"] .btn-cancel:hover[b-6yzjkjyabw] {
    background: #718096;
    color: #f7fafc;
    border-color: #a0aec0;
}

/* Responsive Design */
@media (max-width: 520px) {
    .confirmation-dialog[b-6yzjkjyabw] {
        width: 95%;
        margin: 20px;
    }
    
    .dialog-icon[b-6yzjkjyabw] {
        padding: 32px 32px 24px 32px;
    }
    
    .warning-icon-container[b-6yzjkjyabw],
    .danger-icon-container[b-6yzjkjyabw],
    .info-icon-container[b-6yzjkjyabw] {
        width: 64px;
        height: 64px;
    }
    
    .warning-icon-container i[b-6yzjkjyabw],
    .danger-icon-container i[b-6yzjkjyabw],
    .info-icon-container i[b-6yzjkjyabw] {
        font-size: 28px;
    }
    
    .dialog-body[b-6yzjkjyabw] {
        padding: 24px 32px;
    }
    
    .dialog-title[b-6yzjkjyabw] {
        font-size: 24px;
    }
    
    .confirmation-message[b-6yzjkjyabw] {
        font-size: 16px;
    }
    
    .dialog-actions[b-6yzjkjyabw] {
        padding: 16px 32px 32px 32px;
        flex-direction: column;
    }
    
    .dialog-actions .btn[b-6yzjkjyabw] {
        width: 100%;
        min-width: auto;
        padding: 12px 24px;
        font-size: 15px;
    }
}

/* Enhanced entrance animation */
@keyframes confirmationSlideIn-b-6yzjkjyabw {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(40px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.confirmation-overlay.show .confirmation-dialog[b-6yzjkjyabw] {
    animation: confirmationSlideIn-b-6yzjkjyabw 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Pulse effect for important actions */
@keyframes pulseGlow-b-6yzjkjyabw {
    0%, 100% {
        box-shadow: 0 6px 16px rgba(255, 193, 7, 0.4);
    }
    50% {
        box-shadow: 0 8px 24px rgba(255, 193, 7, 0.6);
    }
}

.btn-warning[b-6yzjkjyabw] {
    animation: pulseGlow-b-6yzjkjyabw 2s ease-in-out infinite;
}

@keyframes dangerPulse-b-6yzjkjyabw {
    0%, 100% {
        box-shadow: 0 6px 16px rgba(220, 53, 69, 0.4);
    }
    50% {
        box-shadow: 0 8px 24px rgba(220, 53, 69, 0.6);
    }
}

.btn-danger[b-6yzjkjyabw] {
    animation: dangerPulse-b-6yzjkjyabw 2s ease-in-out infinite;
}
/* /Components/UI/LoadingOverlay.razor.rz.scp.css */
/* LoadingOverlay Styles - Full-screen overlay component
 * Extends the existing design system for modal-style loading overlays
 */

.loading-overlay-fullscreen[b-mjshcvkl7d] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--dz-z-modal, 1050);
    animation: fadeInOverlay-b-mjshcvkl7d 0.2s ease-out;
    font-family: var(--dz-font-sans);
}

@keyframes fadeInOverlay-b-mjshcvkl7d {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(4px);
    }
}

.loading-overlay-content[b-mjshcvkl7d] {
    background: var(--dz-bg-primary);
    border: 1px solid var(--dz-border-primary);
    border-radius: var(--dz-radius-lg);
    padding: var(--dz-space-8);
    box-shadow: var(--dz-shadow-xl);
    animation: slideInScale-b-mjshcvkl7d 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-width: 300px;
    max-width: 500px;
}

@keyframes slideInScale-b-mjshcvkl7d {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.loading-overlay-fullscreen .loading-spinner-container[b-mjshcvkl7d] {
    padding: 0;
}

.loading-overlay-fullscreen .loading-message[b-mjshcvkl7d] {
    color: var(--dz-text-primary);
    font-size: var(--dz-font-size-lg);
    font-weight: var(--dz-font-weight-medium);
    line-height: var(--dz-line-height-normal);
    text-align: center;
}

.loading-overlay-fullscreen .spinner-border[b-mjshcvkl7d] {
    width: 2.5rem;
    height: 2.5rem;
    border-width: 3px;
}

.loading-overlay-fullscreen .spinner-border-lg[b-mjshcvkl7d] {
    width: 3rem;
    height: 3rem;
    border-width: 4px;
}

.loading-overlay-fullscreen .spinner-border-sm[b-mjshcvkl7d] {
    width: 2rem;
    height: 2rem;
    border-width: 2px;
}

.loading-progress-container[b-mjshcvkl7d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.loading-progress-container .progress[b-mjshcvkl7d] {
    border-radius: var(--dz-radius-full);
    background-color: var(--dz-bg-muted);
    overflow: hidden;
}

.loading-progress-container .progress-bar[b-mjshcvkl7d] {
    transition: width 0.3s ease;
    border-radius: inherit;
}

.progress-text[b-mjshcvkl7d] {
    text-align: center;
}

.loading-actions[b-mjshcvkl7d] {
    display: flex;
    justify-content: center;
    width: 100%;
}

.loading-actions .btn[b-mjshcvkl7d] {
    min-width: 100px;
}

/* Dark theme adjustments */
[data-theme="dark"] .loading-overlay-fullscreen[b-mjshcvkl7d] {
    background-color: rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .loading-overlay-content[b-mjshcvkl7d] {
    background: var(--dz-bg-primary);
    border-color: var(--dz-border-primary);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* Responsive design */
@media (max-width: 767.98px) {
    .loading-overlay-content[b-mjshcvkl7d] {
        margin: var(--dz-space-4);
        padding: var(--dz-space-6);
        min-width: auto;
        max-width: calc(100vw - var(--dz-space-8));
    }
    
    .loading-overlay-fullscreen .loading-message[b-mjshcvkl7d] {
        font-size: var(--dz-font-size-base);
    }
    
    .loading-overlay-fullscreen .spinner-border[b-mjshcvkl7d] {
        width: 2rem;
        height: 2rem;
        border-width: 2px;
    }

    .loading-progress-container .progress[b-mjshcvkl7d] {
        width: 200px !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .loading-overlay-fullscreen[b-mjshcvkl7d] {
        background-color: rgba(0, 0, 0, 0.8);
    }
    
    .loading-overlay-content[b-mjshcvkl7d] {
        border-width: 2px;
        border-color: var(--dz-border-focus);
    }
    
    .loading-overlay-fullscreen .spinner-border[b-mjshcvkl7d] {
        border-width: 4px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .loading-overlay-fullscreen[b-mjshcvkl7d] {
        animation: none;
        backdrop-filter: none;
        background-color: rgba(0, 0, 0, 0.5);
    }
    
    .loading-overlay-content[b-mjshcvkl7d] {
        animation: none;
        transform: none;
    }
    
    .loading-overlay-fullscreen .spinner-border[b-mjshcvkl7d] {
        animation: none;
    }
    
    .loading-progress-container .progress-bar[b-mjshcvkl7d] {
        transition: none;
    }

    /* Provide alternative indication for reduced motion */
    .loading-overlay-fullscreen .spinner-border[b-mjshcvkl7d]::before {
        content: '⟳';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 1.5em;
        color: var(--dz-brand-primary-base);
    }
}

/* Focus management */
.loading-overlay-fullscreen[b-mjshcvkl7d] {
    contain: layout style paint;
}

.loading-overlay-fullscreen .btn:focus-visible[b-mjshcvkl7d] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

/* Performance optimizations */
.loading-overlay-fullscreen .spinner-border[b-mjshcvkl7d] {
    will-change: transform;
}

.loading-progress-container .progress-bar[b-mjshcvkl7d] {
    will-change: width;
}

/* Loading overlay variants */
.loading-overlay-fullscreen--compact .loading-overlay-content[b-mjshcvkl7d] {
    padding: var(--dz-space-6);
    min-width: 250px;
}

.loading-overlay-fullscreen--compact .loading-message[b-mjshcvkl7d] {
    font-size: var(--dz-font-size-base);
}

.loading-overlay-fullscreen--compact .spinner-border[b-mjshcvkl7d] {
    width: 2rem;
    height: 2rem;
}

.loading-overlay-fullscreen--large .loading-overlay-content[b-mjshcvkl7d] {
    padding: var(--dz-space-12);
    min-width: 400px;
}

.loading-overlay-fullscreen--large .loading-message[b-mjshcvkl7d] {
    font-size: var(--dz-font-size-xl);
}

.loading-overlay-fullscreen--large .spinner-border[b-mjshcvkl7d] {
    width: 3.5rem;
    height: 3.5rem;
    border-width: 4px;
}

/* Success/Error state transitions */
.loading-overlay-content--success[b-mjshcvkl7d] {
    border-color: var(--dz-success-base);
}

.loading-overlay-content--error[b-mjshcvkl7d] {
    border-color: var(--dz-danger-base);
}

.loading-overlay-content--warning[b-mjshcvkl7d] {
    border-color: var(--dz-warning-base);
}
/* /Components/UI/PreviewThemeSwitch.razor.rz.scp.css */
.preview-theme-switch[b-w92uyv3dtg] {
    display: flex;
    gap: 4px;
    align-items: center;
}

.theme-btn[b-w92uyv3dtg] {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #404040;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.theme-letter[b-w92uyv3dtg] {
    font-weight: bold;
    font-size: 14px;
}

.theme-btn-black[b-w92uyv3dtg] {
    background-color: #000000;
    border-color: #404040;
}

.theme-btn-black .theme-letter[b-w92uyv3dtg] {
    color: #ffffff;
}

.theme-btn-orange[b-w92uyv3dtg] {
    background-color: #cd853f;
    border-color: #404040;
}

.theme-btn-orange .theme-letter[b-w92uyv3dtg] {
    color: #000000;
}

.theme-btn-white[b-w92uyv3dtg] {
    background-color: #ffffff;
    border-color: #404040;
}

.theme-btn-white .theme-letter[b-w92uyv3dtg] {
    color: #000000;
}

.theme-btn:hover[b-w92uyv3dtg] {
    opacity: 0.8;
}

.theme-btn.active[b-w92uyv3dtg] {
    border-width: 2px;
    border-color: #0066cc;
    box-shadow: 0 0 0 1px #0066cc;
}
/* /Components/UI/UnsavedChangesDialog.razor.rz.scp.css */
/* Modern Unsaved Changes Dialog Styles */
.unsaved-changes-overlay[b-nh3am7faxr] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.unsaved-changes-overlay.show[b-nh3am7faxr] {
    opacity: 1;
    visibility: visible;
}

.unsaved-changes-dialog[b-nh3am7faxr] {
    background: white;
    border-radius: 16px;
    box-shadow: 
        0 24px 48px rgba(0, 0, 0, 0.15),
        0 8px 16px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 440px;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.unsaved-changes-overlay.show .unsaved-changes-dialog[b-nh3am7faxr] {
    transform: scale(1) translateY(0);
}

.dialog-content[b-nh3am7faxr] {
    padding: 0;
}

/* Warning Icon Header */
.dialog-icon[b-nh3am7faxr] {
    display: flex;
    justify-content: center;
    padding: 32px 32px 24px 32px;
    background: linear-gradient(135deg, #fff5e6 0%, #fef9f2 100%);
    border-bottom: 1px solid #f1f1f1;
}

.warning-icon-container[b-nh3am7faxr] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 16px rgba(255, 152, 0, 0.3);
}

.warning-icon-container i[b-nh3am7faxr] {
    font-size: 28px;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Dialog Body */
.dialog-body[b-nh3am7faxr] {
    padding: 24px 32px;
    text-align: center;
}

.dialog-title[b-nh3am7faxr] {
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 16px 0;
    line-height: 1.3;
}

.dialog-message[b-nh3am7faxr] {
    margin: 0;
}

.document-info[b-nh3am7faxr] {
    font-size: 16px;
    color: #4a4a4a;
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.document-info strong[b-nh3am7faxr] {
    color: #1a1a1a;
    font-weight: 600;
}

.action-message[b-nh3am7faxr] {
    font-size: 14px;
    color: #6b6b6b;
    margin: 0;
    line-height: 1.5;
}

/* Action Buttons */
.dialog-actions[b-nh3am7faxr] {
    padding: 16px 32px 32px 32px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.dialog-actions .btn[b-nh3am7faxr] {
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    text-decoration: none;
    outline: none;
    position: relative;
    overflow: hidden;
}

.dialog-actions .btn:focus[b-nh3am7faxr] {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

.dialog-actions .btn i[b-nh3am7faxr] {
    margin-right: 8px;
    font-size: 12px;
}

/* Cancel Button */
.btn-cancel[b-nh3am7faxr] {
    background: #f8f9fa;
    color: #6c757d;
    border: 2px solid #e9ecef;
}

.btn-cancel:hover[b-nh3am7faxr] {
    background: #e9ecef;
    color: #495057;
    border-color: #dee2e6;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-cancel:active[b-nh3am7faxr] {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Don't Save Button */
.btn-discard[b-nh3am7faxr] {
    background: #fff5f5;
    color: #dc3545;
    border: 2px solid #f5c6cb;
}

.btn-discard:hover[b-nh3am7faxr] {
    background: #dc3545;
    color: white;
    border-color: #dc3545;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.btn-discard:active[b-nh3am7faxr] {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
}

/* Save Button */
.btn-save[b-nh3am7faxr] {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    border: 2px solid #007bff;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.btn-save:hover[b-nh3am7faxr] {
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
    border-color: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 123, 255, 0.4);
}

.btn-save:active[b-nh3am7faxr] {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

/* Dark Theme Support */
[data-bs-theme="dark"] .unsaved-changes-dialog[b-nh3am7faxr] {
    background: #2d3748;
    color: #e2e8f0;
}

[data-bs-theme="dark"] .dialog-icon[b-nh3am7faxr] {
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    border-bottom-color: #4a5568;
}

[data-bs-theme="dark"] .dialog-title[b-nh3am7faxr] {
    color: #f7fafc;
}

[data-bs-theme="dark"] .document-info[b-nh3am7faxr] {
    color: #cbd5e0;
}

[data-bs-theme="dark"] .document-info strong[b-nh3am7faxr] {
    color: #f7fafc;
}

[data-bs-theme="dark"] .action-message[b-nh3am7faxr] {
    color: #a0aec0;
}

[data-bs-theme="dark"] .btn-cancel[b-nh3am7faxr] {
    background: #4a5568;
    color: #e2e8f0;
    border-color: #718096;
}

[data-bs-theme="dark"] .btn-cancel:hover[b-nh3am7faxr] {
    background: #718096;
    color: #f7fafc;
    border-color: #a0aec0;
}

[data-bs-theme="dark"] .btn-discard[b-nh3am7faxr] {
    background: #742a2a;
    color: #feb2b2;
    border-color: #9b2c2c;
}

[data-bs-theme="dark"] .btn-discard:hover[b-nh3am7faxr] {
    background: #e53e3e;
    color: white;
    border-color: #e53e3e;
}

/* Responsive Design */
@media (max-width: 480px) {
    .unsaved-changes-dialog[b-nh3am7faxr] {
        width: 95%;
        margin: 20px;
    }
    
    .dialog-icon[b-nh3am7faxr] {
        padding: 24px 24px 20px 24px;
    }
    
    .warning-icon-container[b-nh3am7faxr] {
        width: 56px;
        height: 56px;
    }
    
    .warning-icon-container i[b-nh3am7faxr] {
        font-size: 24px;
    }
    
    .dialog-body[b-nh3am7faxr] {
        padding: 20px 24px;
    }
    
    .dialog-title[b-nh3am7faxr] {
        font-size: 20px;
    }
    
    .dialog-actions[b-nh3am7faxr] {
        padding: 12px 24px 24px 24px;
        flex-direction: column;
    }
    
    .dialog-actions .btn[b-nh3am7faxr] {
        width: 100%;
        min-width: auto;
    }
}

/* Animation for smooth entrance */
@keyframes dialogSlideIn-b-nh3am7faxr {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.unsaved-changes-overlay.show .unsaved-changes-dialog[b-nh3am7faxr] {
    animation: dialogSlideIn-b-nh3am7faxr 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
/* /Components/UI/UserProfile.razor.rz.scp.css */
/* User Profile Component - Design System Integrated */

.user-profile[b-0ukhbhh8i7] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-2); /* Reduced gap for tighter fit */
    padding: 2px var(--dz-space-2); /* Minimal vertical padding to fit in 32px bar */
    border-radius: var(--dz-radius-base);
    transition: var(--dz-transition-colors);
    cursor: pointer;
    user-select: none;
    height: 28px; /* Fixed height to fit in 32px menu bar */
}

.user-profile:hover[b-0ukhbhh8i7] {
    background: var(--dz-bg-tertiary);
}

.user-profile:focus[b-0ukhbhh8i7] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

.user-avatar[b-0ukhbhh8i7] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px; /* Smaller to fit in 28px profile height */
    height: 24px;
    border-radius: 50%;
    background: var(--dz-brand-primary);
    color: var(--dz-text-inverse);
    font-size: var(--dz-font-size-sm); /* Smaller icon */
    flex-shrink: 0;
    overflow: hidden;
}

.avatar-image[b-0ukhbhh8i7] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.user-details[b-0ukhbhh8i7] {
    display: flex;
    flex-direction: column;
    gap: 0; /* Remove gap for tighter spacing */
    min-width: 0;
    justify-content: center; /* Center vertically within the 28px height */
}

.user-name[b-0ukhbhh8i7] {
    font-size: var(--dz-font-size-xs); /* Smaller font to fit */
    font-weight: var(--dz-font-weight-semibold);
    color: var(--dz-text-primary);
    line-height: 1.1; /* Tighter line height */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-email[b-0ukhbhh8i7] {
    font-size: 10px; /* Very small for second line */
    color: var(--dz-text-secondary);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Variants */
.user-profile.compact[b-0ukhbhh8i7] {
    gap: var(--dz-space-2);
    padding: var(--dz-space-1) var(--dz-space-2);
}

.user-profile.compact .user-avatar[b-0ukhbhh8i7] {
    width: 32px;
    height: 32px;
    font-size: var(--dz-font-size-base);
}

.user-profile.large[b-0ukhbhh8i7] {
    gap: var(--dz-space-4);
    padding: var(--dz-space-3) var(--dz-space-4);
}

.user-profile.large .user-avatar[b-0ukhbhh8i7] {
    width: 48px;
    height: 48px;
    font-size: var(--dz-font-size-xl);
}

.user-profile.large .user-name[b-0ukhbhh8i7] {
    font-size: var(--dz-font-size-base);
}

.user-profile.large .user-email[b-0ukhbhh8i7] {
    font-size: var(--dz-font-size-sm);
}

/* Avatar-only variant */
.user-profile.avatar-only[b-0ukhbhh8i7] {
    padding: var(--dz-space-1);
    gap: 0;
}

.user-profile.avatar-only .user-details[b-0ukhbhh8i7] {
    display: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .user-profile[b-0ukhbhh8i7] {
        gap: var(--dz-space-2);
        padding: var(--dz-space-1) var(--dz-space-2);
    }
    
    .user-avatar[b-0ukhbhh8i7] {
        width: 32px;
        height: 32px;
        font-size: var(--dz-font-size-base);
    }
    
    .user-details[b-0ukhbhh8i7] {
        display: none; /* Hide text on very small screens by default */
    }
    
    .user-profile.show-details-mobile .user-details[b-0ukhbhh8i7] {
        display: flex; /* Allow showing details on mobile when explicitly requested */
    }
}

@media (max-width: 992px) {
    .user-name[b-0ukhbhh8i7] {
        max-width: 120px;
    }
    
    .user-email[b-0ukhbhh8i7] {
        max-width: 150px;
    }
}

/* Dark theme support */
[data-theme="dark"] .user-profile:hover[b-0ukhbhh8i7] {
    background: var(--dz-bg-tertiary);
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .user-profile[b-0ukhbhh8i7] {
        border: 1px solid transparent;
    }
    
    .user-profile:hover[b-0ukhbhh8i7],
    .user-profile:focus[b-0ukhbhh8i7] {
        border-color: var(--dz-text-primary);
    }
    
    .user-avatar[b-0ukhbhh8i7] {
        border: 2px solid var(--dz-text-inverse);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .user-profile[b-0ukhbhh8i7] {
        transition: none;
    }
}

/* Accessibility - Focus and keyboard navigation */
.user-profile:focus-visible[b-0ukhbhh8i7] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

/* Status indicators */
.user-profile .status-indicator[b-0ukhbhh8i7] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--dz-bg-primary);
}

.user-profile .status-indicator.online[b-0ukhbhh8i7] {
    background: var(--dz-success-base);
}

.user-profile .status-indicator.away[b-0ukhbhh8i7] {
    background: var(--dz-warning-base);
}

.user-profile .status-indicator.offline[b-0ukhbhh8i7] {
    background: var(--dz-text-muted);
}

/* Interactive states */
.user-profile.interactive:active[b-0ukhbhh8i7] {
    transform: translateY(1px);
}

.user-profile.disabled[b-0ukhbhh8i7] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}
/* /Pages/Editors/CanvasEditor.razor.rz.scp.css */
/* Canvas Editor Styles - Migrated to Design System */

.canvas-editor-container[b-phr91gvdym] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: var(--canvas-bg);
    font-family: var(--dz-font-sans);
    user-select: none;
}

/* Light Theme using design system tokens */
.canvas-editor-container[data-theme="light"][b-phr91gvdym] {
    --canvas-bg: var(--dz-bg-muted);
    --canvas-grid: var(--dz-border-secondary);
    --floating-bg: var(--dz-bg-primary);
    --floating-border: var(--dz-border-primary);
    --floating-shadow: var(--dz-shadow-md);
    --toolbar-bg: var(--dz-bg-primary);
    --toolbar-border: var(--dz-border-primary);
    --accent-color: var(--dz-brand-primary);
    --text-primary: var(--dz-text-primary);
    --text-secondary: var(--dz-text-secondary);
    --btn-hover: var(--dz-bg-secondary);
}

/* Dark Theme using design system tokens */
.canvas-editor-container[data-theme="dark"][b-phr91gvdym] {
    --canvas-bg: var(--dz-bg-primary);
    --canvas-grid: var(--dz-border-primary);
    --floating-bg: var(--dz-bg-secondary);
    --floating-border: var(--dz-border-primary);
    --floating-shadow: var(--dz-shadow-lg);
    --toolbar-bg: var(--dz-bg-secondary);
    --toolbar-border: var(--dz-border-primary);
    --accent-color: var(--dz-brand-primary);
    --text-primary: var(--dz-text-primary);
    --text-secondary: var(--dz-text-secondary);
    --btn-hover: var(--dz-bg-tertiary);
}

/* Canvas Workspace */
.canvas-workspace[b-phr91gvdym] {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.canvas-background[b-phr91gvdym] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: 
        radial-gradient(circle at 2px 2px, var(--canvas-grid) 1px, transparent 1px);
    background-size: 20px 20px;
    cursor: grab;
    transition: var(--dz-transition-colors);
    transform-origin: 0 0;
}

.canvas-background:active[b-phr91gvdym] {
    cursor: grabbing;
}

/* Dragging States using design system shadows and transitions */
.floating-panel.dragging[b-phr91gvdym],
.floating-window.dragging[b-phr91gvdym] {
    z-index: var(--dz-z-modal);
    box-shadow: var(--dz-shadow-2xl);
    transform: rotate(1deg);
    transition: none;
}

.floating-panel-header[b-phr91gvdym] {
    cursor: grab;
}

.floating-panel-header:active[b-phr91gvdym] {
    cursor: grabbing;
}

/* Canvas Controls using design system spacing and shadows */
.canvas-controls[b-phr91gvdym] {
    position: absolute;
    bottom: var(--dz-space-5);
    right: var(--dz-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--dz-space-2_5);
    z-index: var(--dz-z-dropdown);
}

.zoom-controls[b-phr91gvdym] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-2);
    background: var(--toolbar-bg);
    border: 1px solid var(--toolbar-border);
    border-radius: var(--dz-radius-md);
    padding: var(--dz-space-1_5) var(--dz-space-2_5);
    box-shadow: var(--floating-shadow);
    transition: var(--dz-transition-base);
}

.zoom-controls .btn[b-phr91gvdym] {
    background: transparent;
    border: 1px solid var(--floating-border);
    color: var(--text-primary);
    transition: var(--dz-transition-colors);
    border-radius: var(--dz-radius-sm);
    padding: var(--dz-space-1) var(--dz-space-2);
}

.zoom-controls .btn:hover[b-phr91gvdym] {
    background: var(--btn-hover);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.zoom-level[b-phr91gvdym] {
    font-size: var(--dz-font-size-xs);
    font-weight: var(--dz-font-weight-medium);
    color: var(--text-secondary);
    min-width: var(--dz-space-10);
    text-align: center;
}

.canvas-info[b-phr91gvdym] {
    background: var(--toolbar-bg);
    border: 1px solid var(--toolbar-border);
    border-radius: var(--dz-radius-base);
    padding: var(--dz-space-1) var(--dz-space-2);
    box-shadow: var(--floating-shadow);
    color: var(--text-secondary);
    transition: var(--dz-transition-base);
    font-size: var(--dz-font-size-xs);
}

/* Main Toolbar using design system spacing and typography */
.canvas-editor-toolbar[b-phr91gvdym] {
    position: absolute;
    top: var(--dz-space-5);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--dz-space-1);
    background: var(--toolbar-bg);
    border: 1px solid var(--toolbar-border);
    border-radius: var(--dz-radius-lg);
    padding: var(--dz-space-2) var(--dz-space-3);
    box-shadow: var(--floating-shadow);
    z-index: var(--dz-z-fixed);
    transition: var(--dz-transition-base);
}

.toolbar-group[b-phr91gvdym] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-1);
}

.toolbar-separator[b-phr91gvdym] {
    width: 1px;
    height: var(--dz-space-6);
    background: var(--toolbar-border);
    margin: 0 var(--dz-space-2);
}

.canvas-editor-toolbar .btn[b-phr91gvdym] {
    border-radius: var(--dz-radius-base);
    padding: var(--dz-space-1_5) var(--dz-space-2);
    font-size: var(--dz-font-size-sm);
    line-height: 1;
    transition: var(--dz-transition-base);
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--floating-border);
}

.canvas-editor-toolbar .btn:hover[b-phr91gvdym] {
    transform: translateY(-1px);
    box-shadow: var(--dz-shadow-sm);
    background: var(--btn-hover);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.canvas-editor-toolbar .btn-primary[b-phr91gvdym] {
    background: var(--accent-color);
    color: var(--dz-text-inverse);
    border-color: var(--accent-color);
}

.canvas-editor-toolbar .btn-primary:hover[b-phr91gvdym] {
    background: var(--dz-brand-primary-hover);
    color: var(--dz-text-inverse);
    opacity: 0.9;
}

.canvas-editor-toolbar .btn-outline-primary[b-phr91gvdym] {
    color: var(--accent-color);
    border-color: var(--accent-color);
}

.canvas-editor-toolbar .btn-outline-primary:hover[b-phr91gvdym] {
    background: var(--accent-color);
    color: var(--dz-text-inverse);
}

.canvas-editor-toolbar .btn-outline-secondary[b-phr91gvdym] {
    color: var(--text-secondary);
    border-color: var(--floating-border);
}

.canvas-editor-toolbar .btn-outline-secondary:hover[b-phr91gvdym] {
    background: var(--btn-hover);
    color: var(--text-primary);
    border-color: var(--text-primary);
}

/* Context Menu using design system patterns */
.context-menu[b-phr91gvdym] {
    position: fixed;
    background: var(--floating-bg);
    border: 1px solid var(--floating-border);
    border-radius: var(--dz-radius-md);
    box-shadow: var(--dz-shadow-lg);
    z-index: var(--dz-z-popover);
    min-width: 180px;
    overflow: hidden;
    transition: var(--dz-transition-base);
}

.context-menu-item[b-phr91gvdym] {
    padding: var(--dz-space-2_5) var(--dz-space-3_5);
    font-size: var(--dz-font-size-sm);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--dz-space-2);
    transition: var(--dz-transition-colors);
}

.context-menu-item:hover[b-phr91gvdym] {
    background: var(--accent-color);
    color: var(--dz-text-inverse);
}

.context-menu-separator[b-phr91gvdym] {
    height: 1px;
    background: var(--floating-border);
    margin: var(--dz-space-1) 0;
}

/* Animation and Transitions using design system values */
@keyframes float-in-b-phr91gvdym {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.floating-window[b-phr91gvdym],
.floating-panel[b-phr91gvdym],
.context-menu[b-phr91gvdym] {
    animation: float-in-b-phr91gvdym var(--dz-duration-200) var(--dz-ease-out);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .canvas-editor-toolbar[b-phr91gvdym] {
        position: fixed;
        bottom: var(--dz-space-5);
        left: 50%;
        top: auto;
        transform: translateX(-50%);
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .toolbar-separator[b-phr91gvdym] {
        display: none;
    }
    
    .canvas-controls[b-phr91gvdym] {
        bottom: var(--dz-space-20);
    }
}

/* Accessibility - respecting user preferences */
@media (prefers-reduced-motion: reduce) {
    .floating-window[b-phr91gvdym],
    .floating-panel[b-phr91gvdym],
    .context-menu[b-phr91gvdym],
    .canvas-editor-toolbar .btn[b-phr91gvdym],
    .canvas-background[b-phr91gvdym],
    .zoom-controls[b-phr91gvdym],
    .canvas-info[b-phr91gvdym] {
        animation: none;
        transition: none;
    }
}

/* High contrast mode using design system patterns */
@media (prefers-contrast: high) {
    .canvas-editor-container[data-theme="light"][b-phr91gvdym] {
        --floating-border: var(--dz-text-primary);
        --canvas-grid: var(--dz-text-primary);
        --text-primary: var(--dz-text-primary);
    }
    
    .canvas-editor-container[data-theme="dark"][b-phr91gvdym] {
        --floating-border: var(--dz-text-primary);
        --canvas-grid: var(--dz-text-primary);
        --text-primary: var(--dz-text-primary);
    }
    
    .floating-window.selected[b-phr91gvdym] {
        border-width: 2px;
    }
}

/* Floating Windows - Always positioned relative to viewport */
.floating-window[b-phr91gvdym],
.floating-panel[b-phr91gvdym] {
    position: fixed !important; /* Ensure they're always viewport-relative */
    z-index: var(--dz-z-50);
}
/* /Pages/Editors/CodeEditor.razor.rz.scp.css */
/* Code Editor Styles - Full Screen Mode - Migrated to Design System */

.code-editor[b-fedvepsz9e] {
    background: var(--dz-bg-primary);
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

/* Ensure the editor layout fills the available space (not full viewport) */
.editor-layout[b-fedvepsz9e] {
    height: 100vh !important;
    width: 100% !important;
    max-height: 100vh !important;
    max-width: 100% !important;
}

/* Monaco Editor Container - Ensure it's visible */
.docizr-monaco-editor[b-fedvepsz9e] {
    border: 1px solid var(--dz-border-primary);
    border-radius: var(--dz-radius-base);
    overflow: hidden;
    background: var(--dz-bg-primary);
    position: relative;
    display: block !important;
}

/* Monaco Editor specific fixes */
.monaco-editor-container[b-fedvepsz9e] {
    width: 100% !important;
    min-height: 400px !important;
    height: 500px !important;
    background: var(--dz-bg-primary) !important;
    position: relative !important;
    display: block !important;
}

/* Ensure Monaco editor is visible even if initialization fails */
.monaco-editor-container:empty[b-fedvepsz9e]::before {
    content: "Loading Monaco Editor...";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--dz-text-secondary);
    font-family: var(--dz-font-mono);
}

/* Monaco editor DOM elements */
.monaco-editor[b-fedvepsz9e],
.monaco-editor .overflow-guard[b-fedvepsz9e],
.monaco-editor .monaco-scrollable-element[b-fedvepsz9e] {
    width: 100% !important;
    height: 100% !important;
}

/* Debug styles for troubleshooting */
.monaco-editor-container.debug[b-fedvepsz9e] {
    background: linear-gradient(45deg, var(--dz-bg-muted) 25%, transparent 25%), 
                linear-gradient(-45deg, var(--dz-bg-muted) 25%, transparent 25%), 
                linear-gradient(45deg, transparent 75%, var(--dz-bg-muted) 75%), 
                linear-gradient(-45deg, transparent 75%, var(--dz-bg-muted) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* Header Styles using design system patterns */
.editor-title[b-fedvepsz9e] {
    margin: 0;
    font-size: var(--dz-font-size-xl);
    font-weight: var(--dz-font-weight-semibold);
    color: var(--dz-text-primary);
    display: flex;
    align-items: center;
}

.editor-title .badge[b-fedvepsz9e] {
    font-size: var(--dz-font-size-xs);
    font-weight: var(--dz-font-weight-medium);
}

/* Toolbar Styles */
.editor-toolbar-content[b-fedvepsz9e] {
    display: flex;
    align-items: center;
    width: 100%;
    gap: var(--dz-space-2);
}

.toolbar-group[b-fedvepsz9e] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-2);
}

.toolbar-label[b-fedvepsz9e] {
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-medium);
    color: var(--dz-text-secondary);
    margin-bottom: 0;
}

.toolbar-divider[b-fedvepsz9e] {
    width: 1px;
    height: var(--dz-space-6);
    background: var(--dz-border-primary);
    margin: 0 var(--dz-space-2);
}

/* Status Bar Styles - NEW: Make it compact and right-align language info */
.status-bar-content[b-fedvepsz9e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 22px; /* Match VS Code status bar height */
    font-size: var(--dz-font-size-xs); /* 12px - smaller text */
    line-height: 1;
    padding: 0 var(--dz-space-2); /* Reduce vertical padding */
}

.status-left[b-fedvepsz9e] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-2);
}

.status-right[b-fedvepsz9e] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-2);
    margin-left: auto; /* Right-align the language/position info */
}

.status-item[b-fedvepsz9e] {
    display: flex;
    align-items: center;
    color: var(--dz-text-secondary);
    white-space: nowrap;
    font-size: inherit;
    line-height: 1;
}

.status-divider[b-fedvepsz9e] {
    color: var(--dz-text-muted);
    font-size: inherit;
    margin: 0 var(--dz-space-1);
}

/* Status bar hover effects */
.status-item:hover[b-fedvepsz9e] {
    color: var(--dz-text-primary);
    cursor: default;
}

/* Make the status bar ready icon blue */
.status-item .fa-code-branch.text-primary[b-fedvepsz9e] {
    color: var(--dz-brand-primary) !important;
}

/* Main Editor Container */
.main-editor-container[b-fedvepsz9e] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    
    /* Critical: Prevent coordinate system issues */
    transform: none;
    position: relative;
}

/* NEW: Combined Editor Tabs with Preview Controls */
.editor-tabs[b-fedvepsz9e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--dz-bg-secondary);
    border-bottom: 1px solid var(--dz-border-primary);
    padding: 0 var(--dz-space-4);
    flex-shrink: 0;
    min-height: 40px; /* Ensure consistent height */
    
    /* Ensure tabs don't affect Monaco's coordinate system */
    transform: none;
    position: relative;
}

/* Left section for editor tabs */
.tab-section-left[b-fedvepsz9e] {
    display: flex;
    align-items: center;
}

/* Right section for preview controls */
.tab-section-right[b-fedvepsz9e] {
    display: flex;
    align-items: center;
}

.tab[b-fedvepsz9e] {
    padding: var(--dz-space-2) var(--dz-space-4);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--dz-text-secondary);
    font-size: var(--dz-font-size-sm);
    display: flex;
    align-items: center;
    gap: var(--dz-space-2);
    cursor: pointer;
    transition: var(--dz-transition-colors);
    white-space: nowrap;
}

.tab:hover[b-fedvepsz9e] {
    color: var(--dz-text-primary);
    background: rgba(var(--dz-brand-primary), 0.1);
}

.tab.active[b-fedvepsz9e] {
    color: var(--dz-brand-primary);
    border-bottom-color: var(--dz-brand-primary);
    background: transparent;
}

/* Ensure the filename text and icon in active tab are blue */
.tab.active .fab[b-fedvepsz9e],
.tab.active .fas[b-fedvepsz9e],
.tab.active .fa-markdown[b-fedvepsz9e] {
    color: var(--dz-brand-primary);
}

/* Ensure ALL icons in tabs are blue (active and inactive) */
.tab .fab[b-fedvepsz9e],
.tab .fas[b-fedvepsz9e],
.tab .fa-markdown[b-fedvepsz9e],
.tab [class*="fa-"][b-fedvepsz9e] {
    color: var(--dz-brand-primary) !important;
}

.unsaved-circle[b-fedvepsz9e] {
    color: #ffc107; /* Warning color for unsaved indicator */
    font-size: 0.8rem;
    line-height: 1;
    font-weight: bold;
}

.unsaved-circle[b-fedvepsz9e]::before {
    content: "*"; /* Simple asterisk like Visual Studio */
}

/* Dark theme support */
[data-theme="dark"] .unsaved-circle[b-fedvepsz9e] {
    color: #f39c12; /* Slightly different orange for dark theme */
}

.unsaved-indicator[b-fedvepsz9e] {
    color: var(--dz-warning-base);
    font-weight: var(--dz-font-weight-bold);
}

/* NEW: Preview tab content styling */
.preview-tab-content[b-fedvepsz9e] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-3);
    
    /* Ensure consistent spacing */
    min-height: var(--dz-space-10); /* 40px - same as tab height */
}

.preview-controls[b-fedvepsz9e] {
    display: flex;
    align-items: center;
    
    /* Ensure controls are always properly aligned */
    justify-content: flex-end;
}

/* NEW: Make splitter control buttons blue to match design */
.preview-controls .btn-outline-secondary[b-fedvepsz9e] {
    border-color: var(--dz-brand-primary);
    color: var(--dz-brand-primary);
}

.preview-controls .btn-outline-secondary:hover[b-fedvepsz9e] {
    background-color: var(--dz-brand-primary);
    border-color: var(--dz-brand-primary);
    color: white;
}

.preview-controls .btn-outline-secondary:focus[b-fedvepsz9e] {
    border-color: var(--dz-brand-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--dz-brand-primary-rgb), 0.25);
}

/* Ensure icons inside splitter buttons are also blue */
.preview-controls .btn-outline-secondary i[b-fedvepsz9e] {
    color: inherit;
}

/* Split Editor Container - Critical for Monaco positioning */
.split-editor-container[b-fedvepsz9e] {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0; /* Critical for proper flex behavior */
    
    /* Ensure no coordinate transformation issues */
    transform: none;
    position: relative;
    left: 0;
    top: 0;
}

/* Editor Pane - Contains Monaco Editor */
.editor-pane[b-fedvepsz9e] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0; /* Allow flex child to shrink */
    
    /* Critical: Ensure Monaco's coordinate system isn't affected */
    transform: none;
    position: relative;
    left: 0;
    top: 0;
}

.editor-pane.full-width[b-fedvepsz9e] {
    flex: 1;
}

/* Monaco Editor Container within the editor pane */
.editor-pane .monaco-editor-container[b-fedvepsz9e] {
    flex: 1;
    min-height: 0; /* Allow container to shrink with flex parent */
    width: 100%;
    
    /* Critical: Prevent any coordinate system issues */
    transform: none;
    position: relative;
    left: 0;
    top: 0;
    
    /* Ensure consistent layout */
    box-sizing: border-box;
    overflow: hidden;
}

/* Splitter Handle using design system colors */
.splitter-handle[b-fedvepsz9e] {
    width: 4px;
    background: var(--dz-border-primary);
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--dz-transition-colors);
    
    /* Ensure splitter doesn't affect coordinates */
    transform: none;
    position: relative;
}

.splitter-handle:hover[b-fedvepsz9e] {
    background: var(--dz-brand-primary);
}

.splitter-handle i[b-fedvepsz9e] {
    color: var(--dz-text-secondary);
    font-size: var(--dz-font-size-xs);
}

.splitter-handle:hover i[b-fedvepsz9e] {
    color: var(--dz-text-inverse);
}

/* NEW: Preview Pane without header - content starts immediately */
.preview-pane[b-fedvepsz9e] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    background: var(--dz-preview-bg);
    
    /* Ensure preview doesn't affect editor coordinates */
    transform: none;
    position: relative;
}

.preview-pane.full-width[b-fedvepsz9e] {
    flex: 1;
}

/* NEW: Different preview modes based on content type */
.preview-pane.preview-markdown .preview-content[b-fedvepsz9e] {
    /* Markdown: Normal scrolling */
    overflow-y: auto;
    overflow-x: hidden;
}

.preview-pane.preview-mermaid .preview-content[b-fedvepsz9e] {
    /* Mermaid: No scrolling, pan & zoom will be enabled */
    overflow: hidden;
}

/* NEW: Preview content without header padding */
.preview-content[b-fedvepsz9e] {
    flex: 1;
    padding: var(--dz-space-4);
    background: var(--dz-preview-bg);
    color: var(--dz-preview-text);
    
    /* Ensure content starts at the same Y position as editor */
    margin-top: 0;
    padding-top: var(--dz-space-4);
}

/* Enable scroll mode styling - visible scrollbar for markdown */
.preview-content.enable-scroll[b-fedvepsz9e] {
    /* Professional scrollbar styling */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--dz-scrollbar-thumb) var(--dz-scrollbar-track); /* Firefox */
}

/* Enhanced scrollbar styling for webkit browsers */
.preview-content.enable-scroll[b-fedvepsz9e]::-webkit-scrollbar {
    width: 12px;
    background: var(--dz-scrollbar-track);
}

.preview-content.enable-scroll[b-fedvepsz9e]::-webkit-scrollbar-track {
    background: var(--dz-scrollbar-track);
    border-radius: var(--dz-radius-sm);
    margin: 2px 0;
}

.preview-content.enable-scroll[b-fedvepsz9e]::-webkit-scrollbar-thumb {
    background: var(--dz-scrollbar-thumb);
    border-radius: var(--dz-radius-sm);
    border: 1px solid var(--dz-scrollbar-track);
    min-height: 20px;
}

.preview-content.enable-scroll[b-fedvepsz9e]::-webkit-scrollbar-thumb:hover {
    background: var(--dz-scrollbar-thumb-hover);
}

.preview-content.enable-scroll[b-fedvepsz9e]::-webkit-scrollbar-thumb:active {
    background: var(--dz-scrollbar-thumb-active);
}

.preview-content.enable-scroll[b-fedvepsz9e]::-webkit-scrollbar-corner {
    background: var(--dz-scrollbar-track);
}

/* Pan & zoom mode styling - no scrollbar, different cursor */
.preview-content.enable-pan-zoom[b-fedvepsz9e] {
    cursor: grab;
    user-select: none;
}

.preview-content.enable-pan-zoom.dragging[b-fedvepsz9e] {
    cursor: grabbing;
}

.preview-loading[b-fedvepsz9e],
.preview-error[b-fedvepsz9e] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dz-text-secondary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .split-editor-container[b-fedvepsz9e] {
        flex-direction: column;
    }
    
    .editor-pane[b-fedvepsz9e],
    .preview-pane[b-fedvepsz9e] {
        flex: 1;
        min-height: 300px;
    }
    
    .splitter-handle[b-fedvepsz9e] {
        width: 100%;
        height: 4px;
        cursor: row-resize;
    }
    
    /* Mobile status bar adjustments */
    .status-bar-content[b-fedvepsz9e] {
        font-size: 11px; /* Even smaller on mobile */
    }
    
    .status-left[b-fedvepsz9e],
    .status-right[b-fedvepsz9e] {
        gap: var(--dz-space-1); /* Tighter spacing on mobile */
    }
    
    /* Mobile tab adjustments */
    .editor-tabs[b-fedvepsz9e] {
        flex-direction: column;
        gap: var(--dz-space-2);
        padding: var(--dz-space-2) var(--dz-space-4);
    }
    
    .tab-section-left[b-fedvepsz9e],
    .tab-section-right[b-fedvepsz9e] {
        width: 100%;
        justify-content: center;
    }
    
    .preview-tab-content[b-fedvepsz9e] {
        justify-content: center;
        gap: var(--dz-space-2);
    }
}
/* /Pages/TryYourFile.razor.rz.scp.css */
/* Try Your File Page Styles - Marketing Layout Version */

.try-file-page[b-6qn1rlybgj] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 0;
}

.page-header[b-6qn1rlybgj] {
    background: var(--dz-bg-secondary);
    border-bottom: 1px solid var(--dz-border-secondary);
    padding: var(--dz-space-8) 0 var(--dz-space-6) 0;
    flex-shrink: 0;
    margin-top: 80px; /* Push down from fixed navbar */
}

.page-title[b-6qn1rlybgj] {
    font-size: var(--dz-font-size-3xl);
    font-weight: var(--dz-font-weight-bold);
    margin: 0;
    color: var(--dz-text-primary);
}

.page-subtitle[b-6qn1rlybgj] {
    font-size: var(--dz-font-size-lg);
    color: var(--dz-text-secondary);
    margin: var(--dz-space-3) 0 0 0;
    line-height: var(--dz-line-height-relaxed);
}

/* Layout adjustments for marketing page */
.try-file-page .container[b-6qn1rlybgj] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: var(--dz-space-6);
    padding-bottom: var(--dz-space-8);
}

.try-file-page .row[b-6qn1rlybgj] {
    flex: 1;
    min-height: auto; /* Remove the 600px min-height */
    margin: 0;
}

.upload-panel[b-6qn1rlybgj],
.preview-panel[b-6qn1rlybgj] {
    padding: 0 var(--dz-space-3);
    display: flex;
    flex-direction: column;
}

/* Upload Card using design system card patterns */
.upload-card[b-6qn1rlybgj] {
    background: var(--dz-card-bg);
    border: 1px solid var(--dz-card-border);
    border-radius: var(--dz-radius-lg);
    padding: var(--dz-space-6);
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--dz-shadow-sm);
    transition: var(--dz-transition-shadow);
}

.upload-header[b-6qn1rlybgj] {
    margin-bottom: var(--dz-space-6);
}

.upload-title[b-6qn1rlybgj] {
    font-size: var(--dz-font-size-xl);
    font-weight: var(--dz-font-weight-semibold);
    margin: 0 0 var(--dz-space-2) 0;
    color: var(--dz-text-primary);
}

.upload-description[b-6qn1rlybgj] {
    color: var(--dz-text-secondary);
    margin: 0;
    font-size: var(--dz-font-size-sm);
    line-height: var(--dz-line-height-relaxed);
}

/* Drop Zone using design system patterns - Made more compact */
.drop-zone[b-6qn1rlybgj] {
    border: 2px dashed var(--dz-border-primary);
    border-radius: var(--dz-radius-lg);
    padding: var(--dz-space-6); /* Reduced from var(--dz-space-8) */
    text-align: center;
    cursor: pointer;
    transition: var(--dz-transition-base);
    background: var(--dz-bg-secondary);
    min-height: 140px; /* Reduced from 200px */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--dz-space-6);
}

.drop-zone:hover[b-6qn1rlybgj] {
    border-color: var(--dz-brand-primary);
    background: var(--dz-info-light);
}

.drop-zone.dragging[b-6qn1rlybgj] {
    border-color: var(--dz-success-base);
    background: var(--dz-success-light);
    transform: scale(1.02);
}

.drop-zone.has-content[b-6qn1rlybgj] {
    border-style: solid;
    border-color: var(--dz-success-base);
    background: var(--dz-success-light);
    cursor: default;
}

.drop-zone.has-content:hover[b-6qn1rlybgj] {
    transform: none;
}

/* Drop Zone Content */
.drop-zone-content[b-6qn1rlybgj] {
    width: 100%;
}

.upload-placeholder[b-6qn1rlybgj],
.drop-indicator[b-6qn1rlybgj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dz-space-3); /* Reduced from var(--dz-space-4) */
}

/* Reduced icon sizes by half */
.upload-icon[b-6qn1rlybgj],
.drop-icon[b-6qn1rlybgj] {
    font-size: var(--dz-font-size-3xl); /* Reduced from var(--dz-font-size-5xl) */
    opacity: 0.7;
    color: var(--dz-text-secondary);
}

.drop-icon[b-6qn1rlybgj] {
    animation: bounce-b-6qn1rlybgj var(--dz-duration-1000) var(--dz-ease-in-out) infinite;
    color: var(--dz-success-base);
}

@keyframes bounce-b-6qn1rlybgj {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.upload-text[b-6qn1rlybgj],
.drop-text[b-6qn1rlybgj] {
    font-size: var(--dz-font-size-base); /* Reduced from var(--dz-font-size-lg) */
    margin: 0;
    color: var(--dz-text-primary);
    font-weight: var(--dz-font-weight-medium);
}

.upload-formats[b-6qn1rlybgj] {
    font-size: var(--dz-font-size-sm);
    color: var(--dz-text-muted);
    margin: 0;
}

/* File Info using design system card patterns */
.file-info[b-6qn1rlybgj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dz-space-3);
    padding: var(--dz-space-6) var(--dz-space-4);
    background: var(--dz-card-bg);
    border-radius: var(--dz-radius-md);
    border: 1px solid var(--dz-card-border);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    position: relative;
}

.file-icon[b-6qn1rlybgj] {
    font-size: var(--dz-font-size-xl);
    flex-shrink: 0;
    color: var(--dz-brand-primary);
}

.file-details[b-6qn1rlybgj] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    width: 100%;
}

.file-name[b-6qn1rlybgj] {
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-semibold);
    margin: 0 0 var(--dz-space-1) 0;
    color: var(--dz-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: var(--dz-line-height-tight);
}

.file-type[b-6qn1rlybgj],
.file-size[b-6qn1rlybgj] {
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-secondary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: var(--dz-line-height-normal);
}

.clear-btn[b-6qn1rlybgj] {
    position: absolute;
    top: var(--dz-space-2);
    right: var(--dz-space-2);
    flex-shrink: 0;
    padding: var(--dz-space-1) var(--dz-space-2);
    font-size: var(--dz-font-size-xs);
    min-height: auto;
    line-height: var(--dz-line-height-normal);
}

/* Sample Files */
.sample-files[b-6qn1rlybgj] {
    margin-bottom: var(--dz-space-6);
}

.sample-title[b-6qn1rlybgj] {
    font-size: var(--dz-font-size-base);
    font-weight: var(--dz-font-weight-semibold);
    margin: 0 0 var(--dz-space-3) 0;
    color: var(--dz-text-primary);
}

.sample-subtitle[b-6qn1rlybgj] {
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-medium);
    margin: 0 0 var(--dz-space-3) 0;
    color: var(--dz-text-primary);
    display: flex;
    align-items: center;
}

.sample-buttons[b-6qn1rlybgj] {
    display: flex;
    gap: var(--dz-space-2);
    flex-wrap: wrap;
}

/* File Stats */
.file-stats[b-6qn1rlybgj] {
    background: var(--dz-bg-secondary);
    border: 1px solid var(--dz-border-secondary);
    border-radius: var(--dz-radius-md);
    padding: var(--dz-space-4);
    margin-top: auto;
}

.stat-item[b-6qn1rlybgj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--dz-space-2);
}

.stat-item:last-child[b-6qn1rlybgj] {
    margin-bottom: 0;
}

.stat-label[b-6qn1rlybgj] {
    font-size: var(--dz-font-size-sm);
    color: var(--dz-text-secondary);
}

.stat-value[b-6qn1rlybgj] {
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-semibold);
    color: var(--dz-text-primary);
}

/* Preview Card */
.preview-card[b-6qn1rlybgj] {
    background: var(--dz-card-bg);
    border: 1px solid var(--dz-card-border);
    border-radius: var(--dz-radius-lg);
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--dz-shadow-sm);
    overflow: hidden;
}

.preview-header[b-6qn1rlybgj] {
    background: var(--dz-bg-secondary);
    border-bottom: 1px solid var(--dz-border-secondary);
    padding: var(--dz-space-4) var(--dz-space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.preview-title[b-6qn1rlybgj] {
    font-size: var(--dz-font-size-xl);
    font-weight: var(--dz-font-weight-semibold);
    margin: 0;
    color: var(--dz-text-primary);
}

.preview-actions[b-6qn1rlybgj] {
    display: flex;
    gap: var(--dz-space-2);
}

.preview-content[b-6qn1rlybgj] {
    flex: 1;
    overflow: auto;
    padding: var(--dz-space-6);
    background: var(--dz-preview-bg) !important;
    color: var(--dz-preview-text) !important;
}

/* Preview Placeholder */
.preview-placeholder[b-6qn1rlybgj] {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--dz-space-12) var(--dz-space-8);
}

.placeholder-icon[b-6qn1rlybgj] {
    font-size: var(--dz-font-size-3xl); /* Reduced from var(--dz-font-size-5xl) */
    opacity: 0.6;
    margin-bottom: var(--dz-space-4); /* Reduced from var(--dz-space-6) */
    color: var(--dz-text-muted);
}

.placeholder-title[b-6qn1rlybgj] {
    font-size: var(--dz-font-size-2xl);
    font-weight: var(--dz-font-weight-semibold);
    margin: 0 0 var(--dz-space-4) 0;
    color: var(--dz-text-primary);
}

.placeholder-text[b-6qn1rlybgj] {
    font-size: var(--dz-font-size-base);
    color: var(--dz-text-secondary);
    margin: 0 0 var(--dz-space-8) 0;
    max-width: 400px;
    line-height: var(--dz-line-height-relaxed);
}

.feature-highlights[b-6qn1rlybgj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--dz-space-4);
    max-width: 500px;
}

.highlight-item[b-6qn1rlybgj] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-2);
    font-size: var(--dz-font-size-sm);
    color: var(--dz-text-secondary);
}

.highlight-icon[b-6qn1rlybgj] {
    font-size: var(--dz-font-size-lg);
    color: var(--dz-brand-primary);
}

/* Raw Content */
.raw-content[b-6qn1rlybgj] {
    background: var(--dz-bg-secondary);
    border: 1px solid var(--dz-border-secondary);
    border-radius: var(--dz-radius-md);
    overflow: auto;
}

.raw-content pre[b-6qn1rlybgj] {
    margin: 0;
    padding: var(--dz-space-4);
    background: none;
    border: none;
    font-size: var(--dz-font-size-sm);
    line-height: var(--dz-line-height-relaxed);
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--dz-font-mono);
}

.raw-content code[b-6qn1rlybgj] {
    background: none;
    padding: 0;
    color: var(--dz-text-primary);
    font-family: var(--dz-font-mono);
}

/* Preview Content Areas */
.markdown-preview[b-6qn1rlybgj],
.mermaid-preview[b-6qn1rlybgj] {
    background: var(--dz-preview-bg);
    border-radius: var(--dz-radius-md);
    min-height: 200px;
    color: var(--dz-preview-text);
}

/* Responsive Design adjustments for marketing layout */
@media (max-width: 1199.98px) {
    .upload-panel[b-6qn1rlybgj] {
        margin-bottom: var(--dz-space-6);
    }
    
    .try-file-page .row[b-6qn1rlybgj] {
        flex-direction: column;
        min-height: auto; /* Ensure no min-height on mobile */
    }
    
    .upload-panel[b-6qn1rlybgj],
    .preview-panel[b-6qn1rlybgj] {
        flex: none;
        height: auto;
    }
}

@media (max-width: 991.98px) {
    .page-header[b-6qn1rlybgj] {
        margin-top: 70px; /* Adjust for smaller navbar on tablet */
        padding: var(--dz-space-6) 0 var(--dz-space-4) 0;
    }
}

@media (max-width: 767.98px) {
    .page-header[b-6qn1rlybgj] {
        margin-top: 60px; /* Further adjust for mobile navbar */
        padding: var(--dz-space-4) 0 var(--dz-space-3) 0;
    }
    
    .try-file-page .container[b-6qn1rlybgj] {
        padding-top: var(--dz-space-4);
        padding-bottom: var(--dz-space-6);
    }
    
    .page-title[b-6qn1rlybgj] {
        font-size: var(--dz-font-size-2xl);
    }
    
    .page-subtitle[b-6qn1rlybgj] {
        font-size: var(--dz-font-size-base);
    }
    
    .upload-card[b-6qn1rlybgj],
    .preview-card[b-6qn1rlybgj] {
        padding: var(--dz-space-4);
    }
    
    .drop-zone[b-6qn1rlybgj] {
        padding: var(--dz-space-4); /* Further reduced for mobile */
        min-height: 120px; /* Smaller on mobile */
    }
    
    .upload-icon[b-6qn1rlybgj],
    .drop-icon[b-6qn1rlybgj] {
        font-size: var(--dz-font-size-2xl); /* Even smaller on mobile */
    }
    
    .placeholder-icon[b-6qn1rlybgj] {
        font-size: var(--dz-font-size-2xl); /* Reduced from var(--dz-font-size-4xl) */
    }
    
    .sample-buttons[b-6qn1rlybgj] {
        justify-content: center;
    }
    
    .feature-highlights[b-6qn1rlybgj] {
        grid-template-columns: 1fr;
        gap: var(--dz-space-3);
    }
    
    .placeholder-title[b-6qn1rlybgj] {
        font-size: var(--dz-font-size-xl);
    }
    
    .preview-header[b-6qn1rlybgj] {
        padding: var(--dz-space-3) var(--dz-space-4);
    }
    
    .preview-content[b-6qn1rlybgj] {
        padding: var(--dz-space-4);
    }
    
    .preview-actions[b-6qn1rlybgj] {
        flex-wrap: wrap;
        gap: var(--dz-space-1_5);
    }
}

@media (max-width: 575.98px) {
    .upload-panel[b-6qn1rlybgj],
    .preview-panel[b-6qn1rlybgj] {
        padding: 0;
    }
    
    .page-header[b-6qn1rlybgj] {
        padding: var(--dz-space-3) 0 var(--dz-space-2) 0;
    }
    
    .sample-buttons[b-6qn1rlybgj] {
        flex-direction: column;
        align-items: center;
    }
    
    .sample-buttons .btn[b-6qn1rlybgj] {
        width: 100%;
        max-width: 200px;
    }
}
/* /Shared/ContentPanel.razor.rz.scp.css */
/* ContentPanel Styles - Enhanced with Design System
 * Main content panel using comprehensive design system tokens
 */

.content-panel[b-n1zyx6dr6y] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--dz-bg-primary);
    border-radius: var(--dz-radius-lg);
    border: 1px solid var(--dz-border-secondary);
    box-shadow: var(--dz-shadow-sm);
    font-family: var(--dz-font-sans);
    transition: var(--dz-transition-colors);
}

/* Content Header */
.content-header[b-n1zyx6dr6y] {
    padding: var(--dz-space-6) var(--dz-space-8) var(--dz-space-4);
    border-bottom: 1px solid var(--dz-border-secondary);
    background: var(--dz-bg-primary);
    position: sticky;
    top: 0;
    z-index: var(--dz-z-20);
    backdrop-filter: blur(8px);
    background-color: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .content-header[b-n1zyx6dr6y] {
    background-color: rgba(26, 26, 26, 0.95);
}

/* Breadcrumb Navigation */
.breadcrumb-nav[b-n1zyx6dr6y] {
    margin-bottom: var(--dz-space-4);
}

.breadcrumb[b-n1zyx6dr6y] {
    margin-bottom: 0;
    padding: var(--dz-space-2) 0;
    background: transparent;
    font-size: var(--dz-font-size-sm);
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}

.breadcrumb-item[b-n1zyx6dr6y] {
    color: var(--dz-text-secondary);
    display: flex;
    align-items: center;
}

.breadcrumb-item + .breadcrumb-item[b-n1zyx6dr6y]::before {
    content: ">";
    color: var(--dz-text-muted);
    margin: 0 var(--dz-space-2);
    font-weight: var(--dz-font-weight-normal);
}

.breadcrumb-item a[b-n1zyx6dr6y] {
    color: var(--dz-text-accent);
    text-decoration: none;
    padding: var(--dz-space-1) var(--dz-space-2);
    border-radius: var(--dz-radius-sm);
    transition: var(--dz-transition-colors);
    font-weight: var(--dz-font-weight-medium);
}

.breadcrumb-item a:hover[b-n1zyx6dr6y] {
    text-decoration: none;
    background-color: var(--dz-bg-secondary);
    color: var(--dz-brand-primary-hover);
}

.breadcrumb-item a:focus-visible[b-n1zyx6dr6y] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

.breadcrumb-item.active[b-n1zyx6dr6y] {
    color: var(--dz-text-primary);
    font-weight: var(--dz-font-weight-medium);
}

/* Content Title Section */
.content-title-section[b-n1zyx6dr6y] {
    margin-bottom: var(--dz-space-4);
}

.content-title[b-n1zyx6dr6y] {
    font-size: var(--dz-font-size-4xl);
    font-weight: var(--dz-font-weight-bold);
    margin: 0 0 var(--dz-space-2) 0;
    color: var(--dz-text-primary);
    line-height: var(--dz-line-height-tight);
}

.content-subtitle[b-n1zyx6dr6y] {
    font-size: var(--dz-font-size-lg);
    color: var(--dz-text-secondary);
    margin: 0;
    line-height: var(--dz-line-height-relaxed);
    font-weight: var(--dz-font-weight-normal);
}

.content-meta[b-n1zyx6dr6y] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-4);
    margin-top: var(--dz-space-2);
    font-size: var(--dz-font-size-sm);
    color: var(--dz-text-muted);
}

.content-meta-item[b-n1zyx6dr6y] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-1);
}

.content-meta-icon[b-n1zyx6dr6y] {
    font-size: var(--dz-font-size-xs);
    opacity: 0.8;
}

/* Content Actions */
.content-actions[b-n1zyx6dr6y] {
    display: flex;
    gap: var(--dz-space-3);
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--dz-space-4);
}

.content-action[b-n1zyx6dr6y] {
    background: var(--dz-bg-secondary);
    border: 1px solid var(--dz-border-primary);
    color: var(--dz-text-secondary);
    padding: var(--dz-space-2) var(--dz-space-4);
    border-radius: var(--dz-radius-md);
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-medium);
    cursor: pointer;
    transition: var(--dz-transition-colors);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--dz-space-2);
    font-family: var(--dz-font-sans);
}

.content-action:hover[b-n1zyx6dr6y] {
    background-color: var(--dz-bg-tertiary);
    border-color: var(--dz-border-focus);
    color: var(--dz-text-primary);
    text-decoration: none;
}

.content-action:focus-visible[b-n1zyx6dr6y] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

.content-action--primary[b-n1zyx6dr6y] {
    background-color: var(--dz-bg-accent);
    border-color: var(--dz-bg-accent);
    color: var(--dz-text-inverse);
}

.content-action--primary:hover[b-n1zyx6dr6y] {
    background-color: var(--dz-brand-primary-hover);
    border-color: var(--dz-brand-primary-hover);
    color: var(--dz-text-inverse);
}

.content-action--danger[b-n1zyx6dr6y] {
    border-color: var(--dz-danger-base);
    color: var(--dz-danger-base);
}

.content-action--danger:hover[b-n1zyx6dr6y] {
    background-color: var(--dz-danger-base);
    color: var(--dz-text-inverse);
}

/* Content Status Indicators */
.content-status[b-n1zyx6dr6y] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-2);
    margin-left: auto;
}

.status-indicator[b-n1zyx6dr6y] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-1);
    padding: var(--dz-space-1) var(--dz-space-2);
    border-radius: var(--dz-radius-full);
    font-size: var(--dz-font-size-xs);
    font-weight: var(--dz-font-weight-medium);
}

.status-indicator--draft[b-n1zyx6dr6y] {
    background-color: var(--dz-warning-light);
    color: var(--dz-warning-dark);
    border: 1px solid var(--dz-warning-base);
}

.status-indicator--published[b-n1zyx6dr6y] {
    background-color: var(--dz-success-light);
    color: var(--dz-success-dark);
    border: 1px solid var(--dz-success-base);
}

.status-indicator--archived[b-n1zyx6dr6y] {
    background-color: var(--dz-bg-muted);
    color: var(--dz-text-muted);
    border: 1px solid var(--dz-border-muted);
}

/* Content Body */
.content-body[b-n1zyx6dr6y] {
    flex: 1;
    padding: var(--dz-space-6) var(--dz-space-8);
    overflow-y: auto;
    scrollbar-width: thin;
    position: relative;
}

.content-body[b-n1zyx6dr6y]::-webkit-scrollbar {
    width: 8px;
}

.content-body[b-n1zyx6dr6y]::-webkit-scrollbar-track {
    background: var(--dz-bg-secondary);
}

.content-body[b-n1zyx6dr6y]::-webkit-scrollbar-thumb {
    background: var(--dz-border-primary);
    border-radius: var(--dz-radius-sm);
}

.content-body[b-n1zyx6dr6y]::-webkit-scrollbar-thumb:hover {
    background: var(--dz-border-secondary);
}

/* Content Sections */
.content-section[b-n1zyx6dr6y] {
    margin-bottom: var(--dz-space-8);
}

.content-section:last-child[b-n1zyx6dr6y] {
    margin-bottom: 0;
}

.content-section-header[b-n1zyx6dr6y] {
    margin-bottom: var(--dz-space-4);
    padding-bottom: var(--dz-space-2);
    border-bottom: 1px solid var(--dz-border-secondary);
}

.content-section-title[b-n1zyx6dr6y] {
    font-size: var(--dz-font-size-xl);
    font-weight: var(--dz-font-weight-semibold);
    color: var(--dz-text-primary);
    margin: 0;
}

.content-section-description[b-n1zyx6dr6y] {
    font-size: var(--dz-font-size-sm);
    color: var(--dz-text-secondary);
    margin-top: var(--dz-space-1);
}

/* Content Footer */
.content-footer[b-n1zyx6dr6y] {
    padding: var(--dz-space-4) var(--dz-space-8);
    border-top: 1px solid var(--dz-border-secondary);
    background: var(--dz-bg-tertiary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--dz-font-size-sm);
    color: var(--dz-text-muted);
}

.content-footer-info[b-n1zyx6dr6y] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-4);
}

.content-footer-actions[b-n1zyx6dr6y] {
    display: flex;
    gap: var(--dz-space-2);
}

/* Editing mode adjustments */
.content-panel[data-editing="true"][b-n1zyx6dr6y] {
    border-color: var(--dz-info-base);
    box-shadow: var(--dz-shadow-md);
}

.content-panel[data-editing="true"] .content-header[b-n1zyx6dr6y] {
    border-bottom-color: var(--dz-info-base);
    background-color: var(--dz-info-light);
}

.content-panel[data-editing="true"] .content-title[b-n1zyx6dr6y] {
    color: var(--dz-info-dark);
}

.editing-indicator[b-n1zyx6dr6y] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-2);
    background-color: var(--dz-info-base);
    color: var(--dz-text-inverse);
    padding: var(--dz-space-2) var(--dz-space-3);
    border-radius: var(--dz-radius-full);
    font-size: var(--dz-font-size-xs);
    font-weight: var(--dz-font-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--dz-letter-spacing-wide);
}

.editing-indicator[b-n1zyx6dr6y]::before {
    content: '';
    width: var(--dz-space-1_5);
    height: var(--dz-space-1_5);
    background-color: currentColor;
    border-radius: var(--dz-radius-full);
    animation: pulse var(--dz-duration-1000) infinite;
}

/* Loading state */
.content-panel--loading[b-n1zyx6dr6y] {
    pointer-events: none;
    position: relative;
}

.content-panel--loading[b-n1zyx6dr6y]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        var(--dz-bg-muted) 25%,
        var(--dz-border-secondary) 50%,
        var(--dz-bg-muted) 75%
    );
    background-size: 200% 100%;
    animation: shimmer-b-n1zyx6dr6y var(--dz-duration-1000) infinite;
    z-index: var(--dz-z-10);
    border-radius: inherit;
}

@keyframes shimmer-b-n1zyx6dr6y {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Responsive Design */
@media (max-width: 1199.98px) {
    .content-header[b-n1zyx6dr6y] {
        padding: var(--dz-space-5) var(--dz-space-6) var(--dz-space-3);
    }
    
    .content-body[b-n1zyx6dr6y] {
        padding: var(--dz-space-5) var(--dz-space-6);
    }
    
    .content-footer[b-n1zyx6dr6y] {
        padding: var(--dz-space-3) var(--dz-space-6);
    }
    
    .content-title[b-n1zyx6dr6y] {
        font-size: var(--dz-font-size-3xl);
    }
}

@media (max-width: 767.98px) {
    .content-panel[b-n1zyx6dr6y] {
        border-radius: var(--dz-radius-md);
    }
    
    .content-header[b-n1zyx6dr6y] {
        padding: var(--dz-space-4) var(--dz-space-4) var(--dz-space-3);
    }
    
    .content-body[b-n1zyx6dr6y] {
        padding: var(--dz-space-4);
    }
    
    .content-footer[b-n1zyx6dr6y] {
        padding: var(--dz-space-3) var(--dz-space-4);
        flex-direction: column;
        gap: var(--dz-space-2);
    }
    
    .content-title[b-n1zyx6dr6y] {
        font-size: var(--dz-font-size-2xl);
    }
    
    .content-subtitle[b-n1zyx6dr6y] {
        font-size: var(--dz-font-size-base);
    }
    
    .breadcrumb[b-n1zyx6dr6y] {
        font-size: var(--dz-font-size-xs);
    }
    
    .content-actions[b-n1zyx6dr6y] {
        margin-top: var(--dz-space-3);
        flex-direction: column;
        align-items: stretch;
    }
    
    .content-action[b-n1zyx6dr6y] {
        width: 100%;
        justify-content: center;
    }
    
    .content-meta[b-n1zyx6dr6y] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--dz-space-1);
    }
}

@media (max-width: 575.98px) {
    .content-header[b-n1zyx6dr6y] {
        padding: var(--dz-space-3);
    }
    
    .content-body[b-n1zyx6dr6y] {
        padding: var(--dz-space-3);
    }
    
    .content-footer[b-n1zyx6dr6y] {
        padding: var(--dz-space-2) var(--dz-space-3);
    }
    
    .breadcrumb-item + .breadcrumb-item[b-n1zyx6dr6y]::before {
        margin: 0 var(--dz-space-1);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .content-panel[b-n1zyx6dr6y] {
        border-width: 2px;
    }
    
    .content-action[b-n1zyx6dr6y] {
        border-width: 2px;
    }
    
    .status-indicator[b-n1zyx6dr6y] {
        border-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .content-panel[b-n1zyx6dr6y],
    .content-action[b-n1zyx6dr6y],
    .breadcrumb-item a[b-n1zyx6dr6y] {
        transition: none;
    }
    
    .editing-indicator[b-n1zyx6dr6y]::before {
        animation: none;
    }
    
    .content-panel--loading[b-n1zyx6dr6y]::before {
        animation: none;
        background: var(--dz-bg-muted);
    }
}

/* Print styles */
@media print {
    .content-panel[b-n1zyx6dr6y] {
        box-shadow: none;
        border: 1px solid #000;
        background: white;
    }
    
    .content-header[b-n1zyx6dr6y] {
        background: white;
        border-bottom: 1px solid #000;
    }
    
    .content-actions[b-n1zyx6dr6y],
    .content-footer[b-n1zyx6dr6y] {
        display: none;
    }
    
    .content-body[b-n1zyx6dr6y] {
        overflow: visible;
    }
}

/* Performance optimizations */
.content-panel[b-n1zyx6dr6y] {
    contain: layout style paint;
}

.content-body[b-n1zyx6dr6y] {
    contain: layout style;
}

.content-panel--loading[b-n1zyx6dr6y]::before {
    will-change: background-position;
}
/* /Shared/EditLayout.razor.rz.scp.css */
/* EditingLayout.razor.css - Enhanced with Design System
 * Full-screen layout for editors using comprehensive design system tokens
 */

.editing-layout[b-zlduutvs0k] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: var(--dz-bg-primary);
    color: var(--dz-text-primary);
    z-index: var(--dz-z-modal);
    font-family: var(--dz-font-sans);
    transition: var(--dz-transition-colors);
}

/* Layout container */
.editing-container[b-zlduutvs0k] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

/* Editing header */
.editing-header[b-zlduutvs0k] {
    background: var(--dz-bg-secondary);
    border-bottom: 1px solid var(--dz-border-primary);
    padding: var(--dz-space-3) var(--dz-space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    z-index: var(--dz-z-20);
    box-shadow: var(--dz-shadow-sm);
}

.editing-title[b-zlduutvs0k] {
    font-size: var(--dz-font-size-lg);
    font-weight: var(--dz-font-weight-semibold);
    color: var(--dz-text-primary);
    margin: 0;
}

.editing-actions[b-zlduutvs0k] {
    display: flex;
    gap: var(--dz-space-2);
    align-items: center;
}

.editing-action[b-zlduutvs0k] {
    background: none;
    border: 1px solid var(--dz-border-primary);
    color: var(--dz-text-secondary);
    padding: var(--dz-space-2) var(--dz-space-3);
    border-radius: var(--dz-radius-md);
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-medium);
    cursor: pointer;
    transition: var(--dz-transition-colors);
    font-family: var(--dz-font-sans);
}

.editing-action:hover[b-zlduutvs0k] {
    background-color: var(--dz-bg-tertiary);
    border-color: var(--dz-border-focus);
    color: var(--dz-text-primary);
}

.editing-action:focus-visible[b-zlduutvs0k] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

.editing-action--primary[b-zlduutvs0k] {
    background-color: var(--dz-bg-accent);
    border-color: var(--dz-bg-accent);
    color: var(--dz-text-inverse);
}

.editing-action--primary:hover[b-zlduutvs0k] {
    background-color: var(--dz-brand-primary-hover);
    border-color: var(--dz-brand-primary-hover);
}

.editing-close[b-zlduutvs0k] {
    background: none;
    border: none;
    color: var(--dz-text-muted);
    cursor: pointer;
    padding: var(--dz-space-2);
    border-radius: var(--dz-radius-md);
    transition: var(--dz-transition-colors);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--dz-space-8);
    height: var(--dz-space-8);
}

.editing-close:hover[b-zlduutvs0k] {
    background-color: var(--dz-bg-tertiary);
    color: var(--dz-text-secondary);
}

/* Editing content */
.editing-content[b-zlduutvs0k] {
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
}

.editing-main[b-zlduutvs0k] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.editing-sidebar[b-zlduutvs0k] {
    width: 280px;
    background: var(--dz-bg-secondary);
    border-left: 1px solid var(--dz-border-primary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
}

.editing-sidebar--collapsed[b-zlduutvs0k] {
    width: 60px;
}

/* Editing toolbar */
.editing-toolbar[b-zlduutvs0k] {
    background: var(--dz-bg-tertiary);
    border-bottom: 1px solid var(--dz-border-secondary);
    padding: var(--dz-space-2) var(--dz-space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.editing-toolbar-left[b-zlduutvs0k] {
    display: flex;
    gap: var(--dz-space-2);
    align-items: center;
}

.editing-toolbar-right[b-zlduutvs0k] {
    display: flex;
    gap: var(--dz-space-2);
    align-items: center;
}

.editing-tool[b-zlduutvs0k] {
    background: none;
    border: 1px solid var(--dz-border-primary);
    color: var(--dz-text-secondary);
    padding: var(--dz-space-1) var(--dz-space-2);
    border-radius: var(--dz-radius-sm);
    font-size: var(--dz-font-size-sm);
    cursor: pointer;
    transition: var(--dz-transition-colors);
    display: flex;
    align-items: center;
    gap: var(--dz-space-1);
}

.editing-tool:hover[b-zlduutvs0k] {
    background-color: var(--dz-bg-secondary);
    color: var(--dz-text-primary);
}

.editing-tool--active[b-zlduutvs0k] {
    background-color: var(--dz-bg-accent);
    border-color: var(--dz-bg-accent);
    color: var(--dz-text-inverse);
}

/* Editing status bar */
.editing-status[b-zlduutvs0k] {
    background: var(--dz-bg-tertiary);
    border-top: 1px solid var(--dz-border-secondary);
    padding: var(--dz-space-2) var(--dz-space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-muted);
    flex-shrink: 0;
}

.editing-status-left[b-zlduutvs0k] {
    display: flex;
    gap: var(--dz-space-4);
    align-items: center;
}

.editing-status-right[b-zlduutvs0k] {
    display: flex;
    gap: var(--dz-space-4);
    align-items: center;
}

.editing-status-item[b-zlduutvs0k] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-1);
}

.editing-status-indicator[b-zlduutvs0k] {
    width: var(--dz-space-2);
    height: var(--dz-space-2);
    border-radius: var(--dz-radius-full);
    background-color: var(--dz-success-base);
}

.editing-status-indicator--saving[b-zlduutvs0k] {
    background-color: var(--dz-warning-base);
    animation: pulse var(--dz-duration-1000) infinite;
}

.editing-status-indicator--error[b-zlduutvs0k] {
    background-color: var(--dz-danger-base);
}

/* Ensure no margins or padding interfere */
.editing-layout *[b-zlduutvs0k] {
    box-sizing: border-box;
}

/* Remove any default browser margins/padding when in editing mode */
html.editing-mode[b-zlduutvs0k],
html.editing-mode body[b-zlduutvs0k] {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}

/* Enhanced scrollbar styling for editing mode */
.editing-layout [b-zlduutvs0k]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.editing-layout [b-zlduutvs0k]::-webkit-scrollbar-track {
    background: var(--dz-bg-secondary);
}

.editing-layout [b-zlduutvs0k]::-webkit-scrollbar-thumb {
    background: var(--dz-border-primary);
    border-radius: var(--dz-radius-sm);
}

.editing-layout [b-zlduutvs0k]::-webkit-scrollbar-thumb:hover {
    background: var(--dz-border-secondary);
}

.editing-layout [b-zlduutvs0k]::-webkit-scrollbar-corner {
    background: var(--dz-bg-secondary);
}

/* Responsive design */
@media (max-width: 1199.98px) {
    .editing-sidebar[b-zlduutvs0k] {
        width: 240px;
    }
    
    .editing-sidebar--collapsed[b-zlduutvs0k] {
        width: 50px;
    }
}

@media (max-width: 991.98px) {
    .editing-header[b-zlduutvs0k] {
        padding: var(--dz-space-2) var(--dz-space-4);
    }
    
    .editing-toolbar[b-zlduutvs0k] {
        padding: var(--dz-space-1) var(--dz-space-3);
    }
    
    .editing-status[b-zlduutvs0k] {
        padding: var(--dz-space-1) var(--dz-space-3);
    }
    
    .editing-sidebar[b-zlduutvs0k] {
        width: 200px;
    }
    
    .editing-title[b-zlduutvs0k] {
        font-size: var(--dz-font-size-base);
    }
}

@media (max-width: 767.98px) {
    .editing-header[b-zlduutvs0k] {
        padding: var(--dz-space-2) var(--dz-space-3);
        flex-direction: column;
        gap: var(--dz-space-2);
        align-items: stretch;
    }
    
    .editing-actions[b-zlduutvs0k] {
        justify-content: space-between;
    }
    
    .editing-toolbar[b-zlduutvs0k] {
        flex-direction: column;
        gap: var(--dz-space-2);
        align-items: stretch;
    }
    
    .editing-toolbar-left[b-zlduutvs0k],
    .editing-toolbar-right[b-zlduutvs0k] {
        justify-content: center;
    }
    
    .editing-status[b-zlduutvs0k] {
        flex-direction: column;
        gap: var(--dz-space-1);
        text-align: center;
    }
    
    .editing-sidebar[b-zlduutvs0k] {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        z-index: var(--dz-z-30);
        transform: translateX(100%);
        transition: transform var(--dz-duration-300) var(--dz-ease-out);
        box-shadow: var(--dz-shadow-xl);
    }
    
    .editing-sidebar--visible[b-zlduutvs0k] {
        transform: translateX(0);
    }
}

@media (max-width: 575.98px) {
    .editing-header[b-zlduutvs0k] {
        padding: var(--dz-space-2);
    }
    
    .editing-toolbar[b-zlduutvs0k] {
        padding: var(--dz-space-1) var(--dz-space-2);
    }
    
    .editing-status[b-zlduutvs0k] {
        padding: var(--dz-space-1) var(--dz-space-2);
    }
    
    .editing-sidebar[b-zlduutvs0k] {
        width: 100vw;
        max-width: 300px;
    }
    
    .editing-action[b-zlduutvs0k] {
        padding: var(--dz-space-1) var(--dz-space-2);
        font-size: var(--dz-font-size-xs);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .editing-header[b-zlduutvs0k],
    .editing-toolbar[b-zlduutvs0k],
    .editing-sidebar[b-zlduutvs0k],
    .editing-status[b-zlduutvs0k] {
        border-width: 2px;
    }
    
    .editing-action[b-zlduutvs0k],
    .editing-tool[b-zlduutvs0k] {
        border-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .editing-layout[b-zlduutvs0k] {
        transition: none;
    }
    
    .editing-action[b-zlduutvs0k],
    .editing-tool[b-zlduutvs0k],
    .editing-close[b-zlduutvs0k] {
        transition: none;
    }
    
    .editing-status-indicator--saving[b-zlduutvs0k] {
        animation: none;
    }
    
    .editing-sidebar[b-zlduutvs0k] {
        transition: none;
    }
}

/* Print styles */
@media print {
    .editing-layout[b-zlduutvs0k] {
        background: white;
        color: black;
    }
    
    .editing-header[b-zlduutvs0k],
    .editing-toolbar[b-zlduutvs0k],
    .editing-sidebar[b-zlduutvs0k],
    .editing-status[b-zlduutvs0k] {
        display: none;
    }
    
    .editing-content[b-zlduutvs0k] {
        overflow: visible;
    }
}

/* Focus trap for accessibility */
.editing-layout[aria-modal="true"][b-zlduutvs0k] {
    /* Modal behavior when editing */
}

/* Loading state */
.editing-layout--loading[b-zlduutvs0k] {
    pointer-events: none;
    position: relative;
}

.editing-layout--loading[b-zlduutvs0k]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: var(--dz-z-50);
    display: flex;
    align-items: center;
    justify-content: center;
}

.editing-layout--loading[b-zlduutvs0k]::after {
    content: 'Loading...';
    font-size: var(--dz-font-size-lg);
    color: var(--dz-text-secondary);
}

/* Performance optimizations */
.editing-layout[b-zlduutvs0k] {
    contain: layout style paint;
}

.editing-content[b-zlduutvs0k] {
    contain: layout style;
}

.editing-sidebar[b-zlduutvs0k] {
    contain: layout style paint;
}
/* /Shared/EditPanel.razor.rz.scp.css */
/* EditPanel Styles - Enhanced with Design System
 * Side editing panel using comprehensive design system tokens
 */

.edit-panel[b-20q7u71tpq] {
    width: 400px;
    height: 100vh;
    background: var(--dz-card-bg);
    border-left: 1px solid var(--dz-card-border);
    display: flex;
    flex-direction: column;
    transition: transform var(--dz-duration-300) var(--dz-ease-out), 
                opacity var(--dz-duration-300) var(--dz-ease-out);
    position: fixed;
    top: 0;
    right: 0;
    z-index: var(--dz-z-modal);
    transform: translateX(100%);
    opacity: 0;
    font-family: var(--dz-font-sans);
    box-shadow: var(--dz-shadow-xl);
}

.edit-panel[data-visible="true"][b-20q7u71tpq] {
    transform: translateX(0);
    opacity: 1;
}

.edit-panel--loading[b-20q7u71tpq] {
    pointer-events: none;
    position: relative;
}

.edit-panel--loading[b-20q7u71tpq]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        var(--dz-bg-muted) 25%,
        var(--dz-border-secondary) 50%,
        var(--dz-bg-muted) 75%
    );
    background-size: 200% 100%;
    animation: shimmer-b-20q7u71tpq var(--dz-duration-1000) infinite;
    z-index: var(--dz-z-10);
}

@keyframes shimmer-b-20q7u71tpq {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Edit Header */
.edit-header[b-20q7u71tpq] {
    padding: var(--dz-space-6);
    border-bottom: 1px solid var(--dz-border-secondary);
    background: var(--dz-bg-secondary);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--dz-space-4);
    position: relative;
}

.edit-title-section[b-20q7u71tpq] {
    flex: 1;
    min-width: 0;
}

.edit-title[b-20q7u71tpq] {
    font-size: var(--dz-font-size-xl);
    font-weight: var(--dz-font-weight-semibold);
    margin: 0 0 var(--dz-space-1) 0;
    color: var(--dz-text-primary);
    line-height: var(--dz-line-height-tight);
    word-wrap: break-word;
}

.edit-subtitle[b-20q7u71tpq] {
    font-size: var(--dz-font-size-sm);
    color: var(--dz-text-secondary);
    margin: 0;
    line-height: var(--dz-line-height-relaxed);
}

.edit-badge[b-20q7u71tpq] {
    display: inline-flex;
    align-items: center;
    gap: var(--dz-space-1);
    background-color: var(--dz-info-light);
    color: var(--dz-info-dark);
    border: 1px solid var(--dz-info-base);
    border-radius: var(--dz-radius-full);
    padding: var(--dz-space-1) var(--dz-space-2);
    font-size: var(--dz-font-size-xs);
    font-weight: var(--dz-font-weight-medium);
    margin-top: var(--dz-space-2);
}

/* Edit Actions */
.edit-actions[b-20q7u71tpq] {
    display: flex;
    gap: var(--dz-space-2);
    align-items: center;
    flex-shrink: 0;
}

.edit-action[b-20q7u71tpq] {
    background: none;
    border: 1px solid var(--dz-border-primary);
    color: var(--dz-text-secondary);
    padding: var(--dz-space-1) var(--dz-space-2);
    border-radius: var(--dz-radius-md);
    font-size: var(--dz-font-size-sm);
    cursor: pointer;
    transition: var(--dz-transition-colors);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--dz-space-8);
    height: var(--dz-space-8);
    font-family: var(--dz-font-sans);
}

.edit-action:hover[b-20q7u71tpq] {
    background-color: var(--dz-bg-tertiary);
    border-color: var(--dz-border-focus);
    color: var(--dz-text-primary);
}

.edit-action:focus-visible[b-20q7u71tpq] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

.edit-action--primary[b-20q7u71tpq] {
    background-color: var(--dz-bg-accent);
    border-color: var(--dz-bg-accent);
    color: var(--dz-text-inverse);
}

.edit-action--primary:hover[b-20q7u71tpq] {
    background-color: var(--dz-brand-primary-hover);
    border-color: var(--dz-brand-primary-hover);
}

.edit-action--danger[b-20q7u71tpq] {
    border-color: var(--dz-danger-base);
    color: var(--dz-danger-base);
}

.edit-action--danger:hover[b-20q7u71tpq] {
    background-color: var(--dz-danger-base);
    color: var(--dz-text-inverse);
}

.edit-close[b-20q7u71tpq] {
    background: none;
    border: none;
    color: var(--dz-text-muted);
    cursor: pointer;
    padding: var(--dz-space-1);
    border-radius: var(--dz-radius-sm);
    transition: var(--dz-transition-colors);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--dz-space-6);
    height: var(--dz-space-6);
}

.edit-close:hover[b-20q7u71tpq] {
    background-color: var(--dz-bg-tertiary);
    color: var(--dz-text-secondary);
}

/* Edit Body */
.edit-body[b-20q7u71tpq] {
    flex: 1;
    padding: var(--dz-space-6);
    overflow-y: auto;
    scrollbar-width: thin;
    position: relative;
}

.edit-body[b-20q7u71tpq]::-webkit-scrollbar {
    width: 6px;
}

.edit-body[b-20q7u71tpq]::-webkit-scrollbar-track {
    background: var(--dz-bg-secondary);
}

.edit-body[b-20q7u71tpq]::-webkit-scrollbar-thumb {
    background: var(--dz-border-primary);
    border-radius: var(--dz-radius-sm);
}

.edit-body[b-20q7u71tpq]::-webkit-scrollbar-thumb:hover {
    background: var(--dz-border-secondary);
}

/* Edit Sections */
.edit-section[b-20q7u71tpq] {
    margin-bottom: var(--dz-space-6);
}

.edit-section:last-child[b-20q7u71tpq] {
    margin-bottom: 0;
}

.edit-section-title[b-20q7u71tpq] {
    font-size: var(--dz-font-size-base);
    font-weight: var(--dz-font-weight-semibold);
    color: var(--dz-text-primary);
    margin-bottom: var(--dz-space-3);
    padding-bottom: var(--dz-space-2);
    border-bottom: 1px solid var(--dz-border-secondary);
}

.edit-section-content[b-20q7u71tpq] {
    display: flex;
    flex-direction: column;
    gap: var(--dz-space-3);
}

/* Form Elements */
.edit-form-group[b-20q7u71tpq] {
    display: flex;
    flex-direction: column;
    gap: var(--dz-space-1);
}

.edit-label[b-20q7u71tpq] {
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-medium);
    color: var(--dz-text-secondary);
}

.edit-input[b-20q7u71tpq] {
    padding: var(--dz-space-2) var(--dz-space-3);
    border: 1px solid var(--dz-border-primary);
    border-radius: var(--dz-radius-md);
    background: var(--dz-bg-primary);
    color: var(--dz-text-primary);
    font-size: var(--dz-font-size-sm);
    font-family: var(--dz-font-sans);
    transition: var(--dz-transition-colors);
}

.edit-input:focus[b-20q7u71tpq] {
    outline: none;
    border-color: var(--dz-border-focus);
    box-shadow: 0 0 0 3px var(--dz-focus-ring-color);
}

.edit-textarea[b-20q7u71tpq] {
    padding: var(--dz-space-3);
    border: 1px solid var(--dz-border-primary);
    border-radius: var(--dz-radius-md);
    background: var(--dz-bg-primary);
    color: var(--dz-text-primary);
    font-size: var(--dz-font-size-sm);
    font-family: var(--dz-font-sans);
    resize: vertical;
    min-height: 80px;
    transition: var(--dz-transition-colors);
}

.edit-textarea:focus[b-20q7u71tpq] {
    outline: none;
    border-color: var(--dz-border-focus);
    box-shadow: 0 0 0 3px var(--dz-focus-ring-color);
}

/* Edit Placeholder */
.edit-placeholder[b-20q7u71tpq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--dz-text-muted);
    padding: var(--dz-space-8);
}

.placeholder-icon[b-20q7u71tpq] {
    font-size: var(--dz-font-size-6xl);
    margin-bottom: var(--dz-space-4);
    opacity: 0.5;
    color: var(--dz-text-muted);
}

.placeholder-text[b-20q7u71tpq] {
    font-size: var(--dz-font-size-base);
    margin: 0 0 var(--dz-space-2) 0;
    font-weight: var(--dz-font-weight-medium);
    color: var(--dz-text-secondary);
}

.placeholder-subtitle[b-20q7u71tpq] {
    font-size: var(--dz-font-size-sm);
    margin: 0;
    color: var(--dz-text-muted);
    line-height: var(--dz-line-height-relaxed);
}

/* Edit Footer */
.edit-footer[b-20q7u71tpq] {
    padding: var(--dz-space-4) var(--dz-space-6);
    border-top: 1px solid var(--dz-border-secondary);
    background: var(--dz-bg-tertiary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--dz-space-3);
}

.edit-footer-info[b-20q7u71tpq] {
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-muted);
}

.edit-footer-actions[b-20q7u71tpq] {
    display: flex;
    gap: var(--dz-space-2);
}

.edit-footer-btn[b-20q7u71tpq] {
    padding: var(--dz-space-2) var(--dz-space-4);
    border-radius: var(--dz-radius-md);
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-medium);
    cursor: pointer;
    transition: var(--dz-transition-colors);
    border: 1px solid var(--dz-border-primary);
    background: var(--dz-bg-primary);
    color: var(--dz-text-secondary);
    font-family: var(--dz-font-sans);
}

.edit-footer-btn:hover[b-20q7u71tpq] {
    background-color: var(--dz-bg-secondary);
    color: var(--dz-text-primary);
}

.edit-footer-btn--primary[b-20q7u71tpq] {
    background-color: var(--dz-bg-accent);
    border-color: var(--dz-bg-accent);
    color: var(--dz-text-inverse);
}

.edit-footer-btn--primary:hover[b-20q7u71tpq] {
    background-color: var(--dz-brand-primary-hover);
    border-color: var(--dz-brand-primary-hover);
}

/* Status indicators */
.edit-status[b-20q7u71tpq] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-2);
    margin-top: var(--dz-space-2);
}

.edit-status-indicator[b-20q7u71tpq] {
    width: var(--dz-space-2);
    height: var(--dz-space-2);
    border-radius: var(--dz-radius-full);
    flex-shrink: 0;
}

.edit-status-indicator--saving[b-20q7u71tpq] {
    background-color: var(--dz-warning-base);
    animation: pulse var(--dz-duration-1000) infinite;
}

.edit-status-indicator--saved[b-20q7u71tpq] {
    background-color: var(--dz-success-base);
}

.edit-status-indicator--error[b-20q7u71tpq] {
    background-color: var(--dz-danger-base);
}

.edit-status-text[b-20q7u71tpq] {
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-muted);
}

/* Responsive Design */
@media (max-width: 1199.98px) {
    .edit-panel[b-20q7u71tpq] {
        width: 350px;
    }
}

@media (max-width: 991.98px) {
    .edit-panel[b-20q7u71tpq] {
        width: 100vw;
        max-width: 400px;
        box-shadow: var(--dz-shadow-2xl);
    }
}

@media (max-width: 767.98px) {
    .edit-panel[b-20q7u71tpq] {
        max-width: 100vw;
        width: 100vw;
    }
    
    .edit-header[b-20q7u71tpq] {
        padding: var(--dz-space-4);
    }
    
    .edit-body[b-20q7u71tpq] {
        padding: var(--dz-space-4);
    }
    
    .edit-footer[b-20q7u71tpq] {
        padding: var(--dz-space-3) var(--dz-space-4);
        flex-direction: column;
        align-items: stretch;
    }
    
    .edit-footer-actions[b-20q7u71tpq] {
        justify-content: space-between;
    }
    
    .edit-title[b-20q7u71tpq] {
        font-size: var(--dz-font-size-lg);
    }
    
    .edit-actions[b-20q7u71tpq] {
        flex-direction: column;
        gap: var(--dz-space-1);
    }
}

@media (max-width: 575.98px) {
    .edit-header[b-20q7u71tpq] {
        padding: var(--dz-space-3);
    }
    
    .edit-body[b-20q7u71tpq] {
        padding: var(--dz-space-3);
    }
    
    .edit-footer[b-20q7u71tpq] {
        padding: var(--dz-space-2) var(--dz-space-3);
    }
    
    .placeholder-icon[b-20q7u71tpq] {
        font-size: var(--dz-font-size-5xl);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .edit-panel[b-20q7u71tpq] {
        border-left-width: 2px;
    }
    
    .edit-action[b-20q7u71tpq],
    .edit-input[b-20q7u71tpq],
    .edit-textarea[b-20q7u71tpq],
    .edit-footer-btn[b-20q7u71tpq] {
        border-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .edit-panel[b-20q7u71tpq] {
        transition: none;
    }
    
    .edit-action[b-20q7u71tpq],
    .edit-input[b-20q7u71tpq],
    .edit-textarea[b-20q7u71tpq],
    .edit-footer-btn[b-20q7u71tpq] {
        transition: none;
    }
    
    .edit-status-indicator--saving[b-20q7u71tpq] {
        animation: none;
    }
    
    .edit-panel--loading[b-20q7u71tpq]::after {
        animation: none;
        background: var(--dz-bg-muted);
    }
}

/* Print styles */
@media print {
    .edit-panel[b-20q7u71tpq] {
        display: none;
    }
}

/* Performance optimizations */
.edit-panel[b-20q7u71tpq] {
    contain: layout style paint;
}

.edit-body[b-20q7u71tpq] {
    contain: layout style;
}

.edit-panel--loading[b-20q7u71tpq]::after {
    will-change: background-position;
}
/* /Shared/NavigationPanel.razor.rz.scp.css */
/* NavigationPanel Styles - Enhanced with Design System
 * Comprehensive navigation using design system tokens and patterns
 */

.navigation-panel[b-c1hpwyzr5g] {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--dz-nav-width);
    height: 100vh;
    /* FIXED: Use unified navigation background token for consistency */
    background: var(--dz-nav-bg, var(--dz-bg-secondary));
    border-right: 1px solid var(--dz-border-primary);
    z-index: var(--dz-z-sticky);
    display: flex;
    flex-direction: column;
    transition: transform var(--dz-duration-300) var(--dz-ease-out), 
                width var(--dz-duration-300) var(--dz-ease-out),
                background-color var(--dz-duration-200) var(--dz-ease-out);
    overflow-y: auto;
    scrollbar-width: thin;
    font-family: var(--dz-font-sans);
}

.navigation-panel[b-c1hpwyzr5g]::-webkit-scrollbar {
    width: 6px;
}

.navigation-panel[b-c1hpwyzr5g]::-webkit-scrollbar-track {
    background: transparent;
}

.navigation-panel[b-c1hpwyzr5g]::-webkit-scrollbar-thumb {
    background: var(--dz-border-primary);
    border-radius: var(--dz-radius-sm);
}

.navigation-panel[data-collapsed="true"][b-c1hpwyzr5g] {
    width: var(--dz-nav-width-collapsed);
}

/* Navigation Header */
.nav-header[b-c1hpwyzr5g] {
    height: var(--dz-topbar-height);
    padding: 0 var(--dz-space-4);
    border-bottom: 1px solid var(--dz-border-secondary);
    /* FIXED: Use consistent panel background - same depth as nav */
    background: var(--dz-panel-bg, var(--dz-bg-secondary));
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: background-color var(--dz-duration-200) var(--dz-ease-out);
}

.nav-brand[b-c1hpwyzr5g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

.nav-title[b-c1hpwyzr5g] {
    font-size: var(--dz-font-size-xl);
    font-weight: var(--dz-font-weight-semibold);
    margin: 0;
    color: var(--dz-text-accent);
    white-space: nowrap;
    overflow: hidden;
    transition: opacity var(--dz-duration-200) var(--dz-ease-out);
    line-height: var(--dz-line-height-tight);
}

.navigation-panel[data-collapsed="true"] .nav-title[b-c1hpwyzr5g] {
    opacity: 0;
    width: 0;
}

.nav-toggle[b-c1hpwyzr5g] {
    background: none;
    border: none;
    padding: var(--dz-space-1);
    color: var(--dz-text-secondary);
    cursor: pointer;
    border-radius: var(--dz-radius-sm);
    transition: var(--dz-transition-colors);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--dz-space-8);
    height: var(--dz-space-8);
}

.nav-toggle:hover[b-c1hpwyzr5g] {
    background-color: var(--dz-bg-tertiary);
    color: var(--dz-text-primary);
}

.nav-toggle:focus-visible[b-c1hpwyzr5g] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

.nav-toggle-icon[b-c1hpwyzr5g] {
    font-size: var(--dz-font-size-xs);
    font-weight: var(--dz-font-weight-bold);
    line-height: 1;
    display: block;
    text-transform: uppercase;
    letter-spacing: var(--dz-letter-spacing-wide);
}

/* Navigation Content */
.nav-content[b-c1hpwyzr5g] {
    flex: 1;
    padding: var(--dz-space-4) 0;
    overflow-y: auto;
}

.nav-section[b-c1hpwyzr5g] {
    margin-bottom: var(--dz-space-6);
}

.nav-section-header[b-c1hpwyzr5g] {
    padding: var(--dz-space-2) var(--dz-space-4);
    margin-bottom: var(--dz-space-2);
}

.nav-section-title[b-c1hpwyzr5g] {
    font-size: var(--dz-font-size-xs);
    font-weight: var(--dz-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--dz-letter-spacing-wider);
    color: var(--dz-text-muted);
    transition: opacity var(--dz-duration-200) var(--dz-ease-out);
}

.navigation-panel[data-collapsed="true"] .nav-section-title[b-c1hpwyzr5g] {
    opacity: 0;
}

.nav-list[b-c1hpwyzr5g] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-item[b-c1hpwyzr5g] {
    margin-bottom: var(--dz-space-1);
    position: relative;
}

/* Navigation Links - Enhanced with design system */
.nav-link[b-c1hpwyzr5g] {
    display: flex;
    align-items: center;
    padding: var(--dz-space-3) var(--dz-space-4);
    color: var(--dz-text-primary);
    text-decoration: none;
    border-radius: 0 var(--dz-radius-lg) var(--dz-radius-lg) 0;
    margin-right: var(--dz-space-2);
    transition: var(--dz-transition-colors);
    position: relative;
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-normal);
}

.nav-link:hover[b-c1hpwyzr5g] {
    background-color: var(--dz-bg-tertiary);
    color: var(--dz-text-accent);
    text-decoration: none;
}

.nav-link:focus-visible[b-c1hpwyzr5g] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

.nav-link.active[b-c1hpwyzr5g] {
    background-color: var(--dz-bg-accent);
    color: var(--dz-text-inverse);
    font-weight: var(--dz-font-weight-medium);
}

.nav-link.active[b-c1hpwyzr5g]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--dz-brand-primary-hover);
}

.nav-link.disabled[b-c1hpwyzr5g] {
    color: var(--dz-text-disabled);
    cursor: not-allowed;
    opacity: var(--dz-opacity-50);
}

.nav-link.disabled:hover[b-c1hpwyzr5g] {
    background-color: transparent;
    color: var(--dz-text-disabled);
}

/* Navigation Badge - Enhanced */
.nav-badge[b-c1hpwyzr5g] {
    position: absolute;
    top: var(--dz-space-1);
    right: var(--dz-space-3);
    font-size: var(--dz-font-size-xs);
    padding: var(--dz-space-0_5) var(--dz-space-1_5);
    border-radius: var(--dz-radius-full);
    font-weight: var(--dz-font-weight-semibold);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: var(--dz-letter-spacing-wide);
    z-index: var(--dz-z-10);
    background-color: var(--dz-warning-base);
    color: var(--dz-warning-dark);
}

.navigation-panel[data-collapsed="true"] .nav-badge[b-c1hpwyzr5g] {
    display: none;
}

/* Navigation Icons - Enhanced */
.nav-icon[b-c1hpwyzr5g] {
    width: var(--dz-space-6);
    height: var(--dz-space-6);
    margin-right: var(--dz-space-3);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* FontAwesome icons support */
.nav-icon i[b-c1hpwyzr5g] {
    font-size: var(--dz-font-size-base);
}

/* CSS-based Icons - Enhanced with design system */
.nav-icon:not(:has(i))[b-c1hpwyzr5g]::before {
    content: '';
    width: 16px;
    height: 16px;
    background: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

/* Icon definitions (existing icons maintained) */
.icon-home[b-c1hpwyzr5g]::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9,22 9,12 15,12 15,22'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9,22 9,12 15,12 15,22'/%3E%3C/svg%3E");
}

.icon-document[b-c1hpwyzr5g]::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14,2 14,8 20,8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10,9 9,9 8,9'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14,2 14,8 20,8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10,9 9,9 8,9'/%3E%3C/svg%3E");
}

.icon-folder[b-c1hpwyzr5g]::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

.icon-edit[b-c1hpwyzr5g]::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
}

.icon-settings[b-c1hpwyzr5g]::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
}

.icon-upload[b-c1hpwyzr5g]::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14,2 14,8 20,8'/%3E%3Cline x1='12' y1='18' x2='12' y2='12'/%3E%3Cline x1='9' y1='15' x2='12' y2='12'/%3E%3Cline x1='15' y1='15' x2='12' y2='12'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14,2 14,8 20,8'/%3E%3Cline x1='12' y1='18' x2='12' y2='12'/%3E%3Cline x1='9' y1='15' x2='12' y2='12'/%3E%3Cline x1='15' y1='15' x2='12' y2='12'/%3E%3C/svg%3E");
}

/* Tag Icon - Text-based */
.icon-tag[b-c1hpwyzr5g] {
    color: inherit;
    font-weight: var(--dz-font-weight-bold);
    font-size: var(--dz-font-size-lg);
}

/* Navigation Text */
.nav-text[b-c1hpwyzr5g] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity var(--dz-duration-200) var(--dz-ease-out);
    font-size: var(--dz-font-size-sm);
}

.navigation-panel[data-collapsed="true"] .nav-text[b-c1hpwyzr5g] {
    opacity: 0;
    width: 0;
}

.navigation-panel[data-collapsed="true"] .nav-link[b-c1hpwyzr5g] {
    justify-content: center;
    margin-right: 0;
    border-radius: var(--dz-radius-md);
    margin: var(--dz-space-1) var(--dz-space-2);
}

.navigation-panel[data-collapsed="true"] .nav-icon[b-c1hpwyzr5g] {
    margin-right: 0;
}

/* Navigation Footer - Enhanced with consistent theming */
.nav-footer[b-c1hpwyzr5g] {
    flex-shrink: 0;
    padding: var(--dz-space-4);
    border-top: 1px solid var(--dz-border-secondary);
    /* FIXED: Use consistent panel background - same depth as nav */
    background: var(--dz-panel-bg, var(--dz-bg-secondary));
    margin-top: auto;
    transition: background-color var(--dz-duration-200) var(--dz-ease-out);
}

.nav-version[b-c1hpwyzr5g] {
    text-align: center;
}

.version-info[b-c1hpwyzr5g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dz-space-1);
}

.version-text[b-c1hpwyzr5g] {
    font-size: var(--dz-font-size-sm);
    font-weight: var(--dz-font-weight-semibold);
    color: var(--dz-text-primary);
    line-height: var(--dz-line-height-tight);
}

.version-number[b-c1hpwyzr5g] {
    font-size: var(--dz-font-size-xs);
    font-weight: var(--dz-font-weight-medium);
    color: var(--dz-text-secondary);
    background: var(--dz-bg-tertiary);
    padding: var(--dz-space-0_5) var(--dz-space-2);
    border-radius: var(--dz-radius-md);
    border: 1px solid var(--dz-border-secondary);
}

.build-info[b-c1hpwyzr5g] {
    margin-top: var(--dz-space-2);
    text-align: center;
}

.build-date[b-c1hpwyzr5g] {
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-muted);
    font-weight: var(--dz-font-weight-normal);
}

/* Collapsed state version display */
.navigation-panel[data-collapsed="true"] .nav-footer[b-c1hpwyzr5g] {
    padding: var(--dz-space-2);
}

.navigation-panel[data-collapsed="true"] .version-info[b-c1hpwyzr5g] {
    flex-direction: row;
    justify-content: center;
}

.navigation-panel[data-collapsed="true"] .version-text[b-c1hpwyzr5g] {
    display: none;
}

.navigation-panel[data-collapsed="true"] .version-number[b-c1hpwyzr5g] {
    font-size: var(--dz-font-size-xs);
    padding: var(--dz-space-0_5) var(--dz-space-1);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    height: auto;
    line-height: 1;
}

/* Responsive Design - Using design system breakpoints */
/* FIXED: Adjust mobile breakpoint to handle tablets like Samsung A9 */
@media (max-width: 1199.98px) {
    .navigation-panel[b-c1hpwyzr5g] {
        transform: translateX(-100%);
        z-index: var(--dz-z-modal);
        box-shadow: var(--dz-shadow-lg);
        transition: transform var(--dz-duration-300) var(--dz-ease-out);
    }

    .navigation-panel[data-collapsed="false"][b-c1hpwyzr5g] {
        transform: translateX(0);
    }
}

@media (max-width: 767.98px) {
    .navigation-panel[b-c1hpwyzr5g] {
        width: 100vw;
        max-width: 320px;
    }
}

/* Mobile overlay */
@media (max-width: 1199.98px) {
    .navigation-panel[data-collapsed="false"][b-c1hpwyzr5g]::before {
        content: '';
        position: fixed;
        top: 0;
        left: 100%;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: -1;
    }
}

/* Accessibility enhancements */
@media (prefers-contrast: high) {
    .nav-link[b-c1hpwyzr5g] {
        border: 1px solid transparent;
    }
    
    .nav-link:hover[b-c1hpwyzr5g],
    .nav-link.active[b-c1hpwyzr5g] {
        border-color: currentColor;
    }
    
    .nav-badge[b-c1hpwyzr5g] {
        border: 1px solid currentColor;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .navigation-panel[b-c1hpwyzr5g] {
        transition: none;
    }
    
    .nav-title[b-c1hpwyzr5g],
    .nav-section-title[b-c1hpwyzr5g],
    .nav-text[b-c1hpwyzr5g] {
        transition: none;
    }
    
    .nav-link[b-c1hpwyzr5g] {
        transition: none;
    }
}

/* Performance optimizations */
.navigation-panel[b-c1hpwyzr5g] {
    contain: layout style paint;
    will-change: transform;
}

.nav-content[b-c1hpwyzr5g] {
    contain: layout style;
}
/* /Shared/StatusBar.razor.rz.scp.css */
/* StatusBar Styles - Enhanced with Design System
 * Bottom status bar using comprehensive design system tokens
 */

.status-bar[b-gu3q5fodux] {
    position: fixed;
    bottom: 0;
    left: var(--dz-nav-width);
    right: 0;
    height: var(--dz-statusbar-height);
    background: var(--dz-bg-tertiary);
    border-top: 1px solid var(--dz-border-primary);
    z-index: var(--dz-z-fixed);
    transition: left var(--dz-duration-300) var(--dz-ease-out);
    font-size: var(--dz-font-size-xs);
    font-family: var(--dz-font-sans);
}

.status-bar.nav-collapsed[b-gu3q5fodux] {
    left: var(--dz-nav-width-collapsed);
}

.status-content[b-gu3q5fodux] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 var(--dz-space-4);
    gap: var(--dz-space-4);
}

.status-left[b-gu3q5fodux],
.status-center[b-gu3q5fodux],
.status-right[b-gu3q5fodux] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-4);
}

.status-center[b-gu3q5fodux] {
    flex: 1;
    justify-content: center;
}

.status-item[b-gu3q5fodux] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-1_5);
    color: var(--dz-text-secondary);
    white-space: nowrap;
    font-size: var(--dz-font-size-xs);
    font-family: var(--dz-font-sans);
}

.status-text[b-gu3q5fodux] {
    line-height: 1;
    font-weight: var(--dz-font-weight-normal);
}

.status-text.small[b-gu3q5fodux] {
    font-size: 0.6875rem;
    opacity: 0.8;
    color: var(--dz-text-muted);
}

.status-icon[b-gu3q5fodux] {
    font-size: var(--dz-font-size-xs);
    font-weight: var(--dz-font-weight-semibold);
    letter-spacing: var(--dz-letter-spacing-wider);
    padding: var(--dz-space-0_5) var(--dz-space-1);
    border-radius: var(--dz-radius-sm);
    background: currentColor;
    color: var(--dz-bg-primary);
    opacity: 0.9;
    text-transform: uppercase;
    font-family: var(--dz-font-sans);
}

/* Status type colors using design system tokens */
.status-item.info .status-icon[b-gu3q5fodux] {
    background: var(--dz-info-base);
}

.status-item.success .status-icon[b-gu3q5fodux] {
    background: var(--dz-success-base);
}

.status-item.warning .status-icon[b-gu3q5fodux] {
    background: var(--dz-warning-base);
    color: var(--dz-warning-dark);
}

.status-item.error .status-icon[b-gu3q5fodux] {
    background: var(--dz-danger-base);
}

.status-item.loading .status-icon[b-gu3q5fodux] {
    background: var(--dz-bg-accent);
}

/* Enhanced loading spinner using design system */
.loading-spinner[b-gu3q5fodux] {
    width: 12px;
    height: 12px;
    border: 1.5px solid var(--dz-border-muted);
    border-top: 1.5px solid var(--dz-bg-accent);
    border-radius: var(--dz-radius-full);
    animation: dz-spin-b-gu3q5fodux var(--dz-duration-1000) linear infinite;
}

@keyframes dz-spin-b-gu3q5fodux {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Connection status indicator */
.connection-indicator[b-gu3q5fodux] {
    width: var(--dz-space-2);
    height: var(--dz-space-2);
    border-radius: var(--dz-radius-full);
    flex-shrink: 0;
    border: 1px solid transparent;
}

.status-item.connection.connected .connection-indicator[b-gu3q5fodux] {
    background: var(--dz-success-base);
    border-color: var(--dz-success-dark);
}

.status-item.connection.connecting .connection-indicator[b-gu3q5fodux] {
    background: var(--dz-warning-base);
    border-color: var(--dz-warning-dark);
    animation: pulse-b-gu3q5fodux var(--dz-duration-1000) var(--dz-ease-in-out) infinite;
}

.status-item.connection.disconnected .connection-indicator[b-gu3q5fodux] {
    background: var(--dz-text-muted);
    border-color: var(--dz-border-secondary);
}

.status-item.connection.error .connection-indicator[b-gu3q5fodux] {
    background: var(--dz-danger-base);
    border-color: var(--dz-danger-dark);
}

@keyframes pulse-b-gu3q5fodux {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
    }
    50% { 
        opacity: 0.7; 
        transform: scale(1.1);
    }
}

/* Status value displays */
.status-value[b-gu3q5fodux] {
    font-weight: var(--dz-font-weight-medium);
    color: var(--dz-text-primary);
}

.status-label[b-gu3q5fodux] {
    color: var(--dz-text-muted);
}

/* Progress indicator */
.status-progress[b-gu3q5fodux] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-2);
}

.status-progress-bar[b-gu3q5fodux] {
    width: 60px;
    height: 3px;
    background-color: var(--dz-bg-muted);
    border-radius: var(--dz-radius-full);
    overflow: hidden;
}

.status-progress-fill[b-gu3q5fodux] {
    height: 100%;
    background-color: var(--dz-bg-accent);
    border-radius: inherit;
    transition: width var(--dz-duration-300) var(--dz-ease-out);
}

.status-progress-text[b-gu3q5fodux] {
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-secondary);
    min-width: 30px;
}

/* Clickable status items */
.status-item--clickable[b-gu3q5fodux] {
    cursor: pointer;
    padding: var(--dz-space-1) var(--dz-space-2);
    border-radius: var(--dz-radius-sm);
    transition: var(--dz-transition-colors);
}

.status-item--clickable:hover[b-gu3q5fodux] {
    background-color: var(--dz-bg-secondary);
    color: var(--dz-text-primary);
}

.status-item--clickable:focus-visible[b-gu3q5fodux] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

/* Status separator */
.status-separator[b-gu3q5fodux] {
    width: 1px;
    height: 16px;
    background-color: var(--dz-border-secondary);
    margin: 0 var(--dz-space-1);
}

/* Responsive Design - Using design system breakpoints */
@media (max-width: 1199.98px) {
    .status-bar[b-gu3q5fodux] {
        left: var(--dz-nav-width);
    }
    
    .status-bar.nav-collapsed[b-gu3q5fodux] {
        left: var(--dz-nav-width-collapsed);
    }
}

@media (max-width: 991.98px) {
    .status-bar[b-gu3q5fodux] {
        left: 0;
    }
    
    .status-bar.nav-collapsed[b-gu3q5fodux] {
        left: 0;
    }
    
    .status-content[b-gu3q5fodux] {
        padding: 0 var(--dz-space-3);
        gap: var(--dz-space-3);
    }
}

@media (max-width: 767.98px) {
    .status-content[b-gu3q5fodux] {
        padding: 0 var(--dz-space-2);
        gap: var(--dz-space-2);
    }
    
    .status-left[b-gu3q5fodux],
    .status-center[b-gu3q5fodux],
    .status-right[b-gu3q5fodux] {
        gap: var(--dz-space-2);
    }
    
    .status-text.small[b-gu3q5fodux] {
        display: none;
    }
    
    .status-progress-bar[b-gu3q5fodux] {
        width: 40px;
    }
}

@media (max-width: 575.98px) {
    .status-center[b-gu3q5fodux] {
        display: none;
    }
    
    .status-content[b-gu3q5fodux] {
        gap: var(--dz-space-1);
    }
    
    .status-left[b-gu3q5fodux],
    .status-right[b-gu3q5fodux] {
        gap: var(--dz-space-1);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .status-bar[b-gu3q5fodux] {
        border-top-width: 2px;
    }
    
    .connection-indicator[b-gu3q5fodux] {
        border-width: 2px;
    }
    
    .status-progress-bar[b-gu3q5fodux] {
        border: 1px solid var(--dz-text-primary);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .status-bar[b-gu3q5fodux] {
        transition: none;
    }
    
    .loading-spinner[b-gu3q5fodux] {
        animation: none;
        border-top-color: var(--dz-bg-accent);
        border-right-color: var(--dz-bg-accent);
    }
    
    .connection-indicator[b-gu3q5fodux] {
        animation: none;
    }
    
    .status-progress-fill[b-gu3q5fodux] {
        transition: none;
    }
    
    .status-item--clickable[b-gu3q5fodux] {
        transition: none;
    }
}

/* Print styles */
@media print {
    .status-bar[b-gu3q5fodux] {
        display: none;
    }
}

/* Performance optimizations */
.status-bar[b-gu3q5fodux] {
    contain: layout style paint;
}

.loading-spinner[b-gu3q5fodux] {
    will-change: transform;
}

.connection-indicator[b-gu3q5fodux] {
    will-change: opacity, transform;
}

/* Status notification badges */
.status-badge[b-gu3q5fodux] {
    position: relative;
}

.status-badge[b-gu3q5fodux]::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: var(--dz-space-1_5);
    height: var(--dz-space-1_5);
    background-color: var(--dz-danger-base);
    border-radius: var(--dz-radius-full);
    border: 1px solid var(--dz-bg-tertiary);
}

/* Memory and performance indicators */
.status-metric[b-gu3q5fodux] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-1);
    font-variant-numeric: tabular-nums;
}

.status-metric-value[b-gu3q5fodux] {
    font-weight: var(--dz-font-weight-medium);
    color: var(--dz-text-primary);
}

.status-metric-unit[b-gu3q5fodux] {
    color: var(--dz-text-muted);
    font-size: 0.6875rem;
}
/* /Shared/ThemeToggle.razor.rz.scp.css */
/* Theme Toggle Switch Styles - Enhanced with Design System
 * Theme switching component using comprehensive design system tokens
 */

.theme-toggle-container[b-m511jofnrn] {
    display: flex;
    align-items: center;
    margin: 0 var(--dz-space-2);
}

.theme-toggle[b-m511jofnrn] {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    cursor: pointer;
    user-select: none;
    border-radius: var(--dz-radius-full);
}

.theme-toggle-input[b-m511jofnrn] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.theme-toggle-slider[b-m511jofnrn] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--dz-bg-secondary);
    border-radius: var(--dz-radius-full);
    transition: all var(--dz-duration-300) var(--dz-ease-out);
    overflow: hidden;
    box-shadow: var(--dz-shadow-sm);
    border: 1px solid var(--dz-border-primary);
}

/* Dark theme slider background */
.theme-toggle-input:checked + .theme-toggle-slider[b-m511jofnrn] {
    background: var(--dz-bg-tertiary);
    border-color: var(--dz-border-secondary);
}

/* Toggle handle */
.theme-toggle-slider[b-m511jofnrn]::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--dz-bg-primary);
    border-radius: var(--dz-radius-full);
    transition: all var(--dz-duration-300) var(--dz-ease-out);
    box-shadow: var(--dz-shadow-md);
    border: 1px solid var(--dz-border-secondary);
    z-index: var(--dz-z-20);
}

/* Handle position when checked (dark mode) */
.theme-toggle-input:checked + .theme-toggle-slider[b-m511jofnrn]::before {
    transform: translateY(-50%) translateX(24px);
}

/* Icons base styles */
.theme-toggle-icon[b-m511jofnrn] {
    position: absolute;
    top: 50%;
    font-size: var(--dz-font-size-xs);
    transition: all var(--dz-duration-300) var(--dz-ease-out);
    z-index: var(--dz-z-10);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--dz-text-secondary);
}

/* 
 * Theme Toggle Logic:
 * - Light mode (unchecked): Show MOON (to indicate "click to go to dark mode")
 * - Dark mode (checked): Show SUN (to indicate "click to go to light mode")
 */

/* Sun icon - positioned on the left */
.theme-toggle-sun[b-m511jofnrn] {
    left: 6px;
    color: var(--dz-warning-base);
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

/* Moon icon - positioned on the right */
.theme-toggle-moon[b-m511jofnrn] {
    right: 6px;
    color: var(--dz-info-base);
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

/* Light mode (unchecked): Show MOON, hide SUN */
.theme-toggle-container .theme-toggle-input:not(:checked) + .theme-toggle-slider .theme-toggle-sun[b-m511jofnrn] {
    opacity: 0 !important;
    transform: translateY(-50%) scale(0.8) !important;
}

.theme-toggle-container .theme-toggle-input:not(:checked) + .theme-toggle-slider .theme-toggle-moon[b-m511jofnrn] {
    opacity: 1 !important;
    transform: translateY(-50%) scale(1) !important;
    color: var(--dz-info-base) !important;
}

/* Dark mode (checked): Show SUN, hide MOON */
.theme-toggle-container .theme-toggle-input:checked + .theme-toggle-slider .theme-toggle-moon[b-m511jofnrn] {
    opacity: 0 !important;
    transform: translateY(-50%) scale(0.8) !important;
}

.theme-toggle-container .theme-toggle-input:checked + .theme-toggle-slider .theme-toggle-sun[b-m511jofnrn] {
    opacity: 1 !important;
    transform: translateY(-50%) scale(1) !important;
    color: var(--dz-warning-base) !important;
}

/* Enhanced visual feedback */
.theme-toggle-container .theme-toggle-input:not(:checked) + .theme-toggle-slider[b-m511jofnrn] {
    background: linear-gradient(135deg, var(--dz-bg-secondary), var(--dz-info-light));
}

.theme-toggle-container .theme-toggle-input:checked + .theme-toggle-slider[b-m511jofnrn] {
    background: linear-gradient(135deg, var(--dz-bg-tertiary), var(--dz-warning-light));
}

/* Hover effects */
.theme-toggle:hover .theme-toggle-slider[b-m511jofnrn] {
    transform: scale(1.02);
    box-shadow: var(--dz-shadow-lg);
    border-color: var(--dz-border-focus);
}

.theme-toggle:hover .theme-toggle-slider[b-m511jofnrn]::before {
    box-shadow: var(--dz-shadow-lg);
    transform: translateY(-50%) scale(1.05);
}

.theme-toggle:hover .theme-toggle-input:checked + .theme-toggle-slider[b-m511jofnrn]::before {
    transform: translateY(-50%) translateX(24px) scale(1.05);
}

/* Active state */
.theme-toggle:active .theme-toggle-slider[b-m511jofnrn] {
    transform: scale(0.98);
}

.theme-toggle:active .theme-toggle-slider[b-m511jofnrn]::before {
    transform: translateY(-50%) scale(0.95);
}

.theme-toggle:active .theme-toggle-input:checked + .theme-toggle-slider[b-m511jofnrn]::before {
    transform: translateY(-50%) translateX(24px) scale(0.95);
}

/* Focus state for accessibility */
.theme-toggle-input:focus-visible + .theme-toggle-slider[b-m511jofnrn] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

/* Loading state */
.theme-toggle--loading .theme-toggle-slider[b-m511jofnrn]::before {
    animation: theme-toggle-pulse-b-m511jofnrn var(--dz-duration-1000) ease-in-out infinite;
}

@keyframes theme-toggle-pulse-b-m511jofnrn {
    0%, 100% {
        transform: translateY(-50%) scale(1);
    }
    50% {
        transform: translateY(-50%) scale(1.1);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .theme-toggle-slider[b-m511jofnrn] {
        border-width: 2px;
    }
    
    .theme-toggle-slider[b-m511jofnrn]::before {
        border-width: 2px;
    }
    
    .theme-toggle-icon[b-m511jofnrn] {
        font-weight: var(--dz-font-weight-bold);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .theme-toggle-slider[b-m511jofnrn],
    .theme-toggle-slider[b-m511jofnrn]::before,
    .theme-toggle-icon[b-m511jofnrn] {
        transition: none;
    }
    
    .theme-toggle--loading .theme-toggle-slider[b-m511jofnrn]::before {
        animation: none;
    }
    
    .gentle-pulse[b-m511jofnrn],
    .gentle-glow[b-m511jofnrn] {
        animation: none;
    }
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .theme-toggle[b-m511jofnrn] {
        width: 48px;
        height: 26px;
    }
    
    .theme-toggle-slider[b-m511jofnrn]::before {
        height: 18px;
        width: 18px;
    }
    
    .theme-toggle-container .theme-toggle-input:checked + .theme-toggle-slider[b-m511jofnrn]::before {
        transform: translateY(-50%) translateX(22px);
    }
    
    .theme-toggle:hover .theme-toggle-input:checked + .theme-toggle-slider[b-m511jofnrn]::before {
        transform: translateY(-50%) translateX(22px) scale(1.05);
    }
    
    .theme-toggle:active .theme-toggle-input:checked + .theme-toggle-slider[b-m511jofnrn]::before {
        transform: translateY(-50%) translateX(22px) scale(0.95);
    }
    
    .theme-toggle-icon[b-m511jofnrn] {
        width: 18px;
        height: 18px;
        font-size: 0.6875rem;
    }
}

@media (max-width: 575.98px) {
    .theme-toggle-container[b-m511jofnrn] {
        margin: 0 var(--dz-space-1);
    }
    
    .theme-toggle[b-m511jofnrn] {
        width: 44px;
        height: 24px;
    }
    
    .theme-toggle-slider[b-m511jofnrn]::before {
        height: 16px;
        width: 16px;
        left: 3px;
    }
    
    .theme-toggle-container .theme-toggle-input:checked + .theme-toggle-slider[b-m511jofnrn]::before {
        transform: translateY(-50%) translateX(20px);
    }
}

/* Subtle animations for visible icons */
.theme-toggle-container .theme-toggle-input:not(:checked) + .theme-toggle-slider .theme-toggle-moon i[b-m511jofnrn] {
    animation: gentle-pulse-b-m511jofnrn var(--dz-duration-2000) infinite ease-in-out;
}

.theme-toggle-container .theme-toggle-input:checked + .theme-toggle-slider .theme-toggle-sun i[b-m511jofnrn] {
    animation: gentle-glow-b-m511jofnrn var(--dz-duration-2000) infinite ease-in-out;
}

@keyframes gentle-pulse-b-m511jofnrn {
    0%, 100% { 
        opacity: 0.8; 
        transform: scale(1);
    }
    50% { 
        opacity: 1; 
        transform: scale(1.05);
    }
}

@keyframes gentle-glow-b-m511jofnrn {
    0%, 100% { 
        opacity: 0.9; 
        transform: scale(1);
    }
    50% { 
        opacity: 1; 
        transform: scale(1.08);
    }
}

/* Theme toggle label */
.theme-toggle-label[b-m511jofnrn] {
    font-size: var(--dz-font-size-xs);
    color: var(--dz-text-muted);
    margin-left: var(--dz-space-2);
    font-family: var(--dz-font-sans);
    font-weight: var(--dz-font-weight-medium);
    user-select: none;
}

/* Tooltip enhancement */
.theme-toggle-container[b-m511jofnrn] {
    position: relative;
}

.theme-toggle-container[b-m511jofnrn]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--dz-bg-inverse);
    color: var(--dz-text-inverse);
    padding: var(--dz-space-1) var(--dz-space-2);
    border-radius: var(--dz-radius-sm);
    font-size: var(--dz-font-size-xs);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dz-duration-200) var(--dz-ease-out);
    z-index: var(--dz-z-tooltip);
}

.theme-toggle-container:hover[b-m511jofnrn]::after {
    opacity: 1;
}

/* Performance optimizations */
.theme-toggle[b-m511jofnrn] {
    contain: layout style paint;
}

.theme-toggle-slider[b-m511jofnrn]::before {
    will-change: transform;
}

.theme-toggle-icon[b-m511jofnrn] {
    will-change: opacity, transform;
}
/* /Shared/TopNavigationBar.razor.rz.scp.css */
/* TopNavigationBar Styles - Enhanced with Design System
 * Top navigation bar using comprehensive design system tokens
 */

.top-navigation-bar[b-i2jpvxcj78] {
    position: fixed;
    top: 0;
    left: var(--dz-nav-width);
    right: 0;
    height: var(--dz-topbar-height);
    background: var(--dz-bg-primary);
    border-bottom: 1px solid var(--dz-border-secondary);
    z-index: var(--dz-z-fixed);
    transition: left var(--dz-duration-300) var(--dz-ease-out);
    font-family: var(--dz-font-sans);
    box-shadow: var(--dz-shadow-sm);
}

.top-navigation-bar.nav-collapsed[b-i2jpvxcj78] {
    left: var(--dz-nav-width-collapsed);
}

.top-nav-content[b-i2jpvxcj78] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 var(--dz-space-6);
    gap: var(--dz-space-4);
}

/* Left section */
.top-nav-left[b-i2jpvxcj78] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-4);
    flex-shrink: 0;
}

.nav-toggle-mobile[b-i2jpvxcj78] {
    background: none;
    border: none;
    padding: var(--dz-space-1) var(--dz-space-2);
    color: var(--dz-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--dz-radius-sm);
    transition: var(--dz-transition-colors);
    font-family: var(--dz-font-sans);
}

.nav-toggle-mobile:hover[b-i2jpvxcj78] {
    background-color: var(--dz-bg-tertiary);
    color: var(--dz-text-primary);
}

.nav-toggle-mobile:focus-visible[b-i2jpvxcj78] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

.nav-menu-icon[b-i2jpvxcj78] {
    font-size: var(--dz-font-size-xs);
    font-weight: var(--dz-font-weight-bold);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: var(--dz-letter-spacing-wide);
}

.page-title[b-i2jpvxcj78] {
    font-size: var(--dz-font-size-xl);
    font-weight: var(--dz-font-weight-semibold);
    margin: 0;
    color: var(--dz-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: var(--dz-line-height-tight);
    font-family: var(--dz-font-sans);
}

/* Center section - Search */
.top-nav-center[b-i2jpvxcj78] {
    flex: 1;
    display: flex;
    justify-content: center;
    max-width: 500px;
    margin: 0 auto;
}

.global-search[b-i2jpvxcj78] {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.global-search input[b-i2jpvxcj78] {
    width: 100%;
    padding: var(--dz-space-2) var(--dz-space-12) var(--dz-space-2) var(--dz-space-4);
    background: var(--dz-bg-secondary);
    border: 1px solid var(--dz-border-secondary);
    border-radius: var(--dz-radius-full);
    font-size: var(--dz-font-size-sm);
    font-family: var(--dz-font-sans);
    color: var(--dz-text-primary);
    transition: var(--dz-transition-colors);
}

.global-search input[b-i2jpvxcj78]::placeholder {
    color: var(--dz-text-muted);
}

.global-search input:focus[b-i2jpvxcj78] {
    outline: none;
    background: var(--dz-bg-primary);
    border-color: var(--dz-border-focus);
    box-shadow: 0 0 0 3px var(--dz-focus-ring-color);
}

.search-icon-text[b-i2jpvxcj78] {
    position: absolute;
    right: var(--dz-space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--dz-text-muted);
    pointer-events: none;
    font-size: var(--dz-font-size-sm);
    font-family: var(--dz-font-sans);
}

/* Right section */
.top-nav-right[b-i2jpvxcj78] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-3);
    flex-shrink: 0;
}

.top-nav-actions[b-i2jpvxcj78] {
    display: flex;
    align-items: center;
    gap: var(--dz-space-2);
}

.theme-toggle-container[b-i2jpvxcj78] {
    display: flex;
    align-items: center;
}

/* User menu */
.user-menu[b-i2jpvxcj78] {
    display: flex;
    align-items: center;
}

.user-avatar[b-i2jpvxcj78] {
    background: none;
    border: 1px solid var(--dz-border-primary);
    padding: var(--dz-space-2);
    color: var(--dz-text-secondary);
    cursor: pointer;
    border-radius: var(--dz-radius-md);
    transition: var(--dz-transition-colors);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--dz-font-size-xs);
    font-weight: var(--dz-font-weight-semibold);
    min-width: 48px;
    height: 32px;
    font-family: var(--dz-font-sans);
}

.user-avatar:hover[b-i2jpvxcj78] {
    background-color: var(--dz-bg-tertiary);
    border-color: var(--dz-border-secondary);
    color: var(--dz-text-primary);
}

.user-avatar:focus-visible[b-i2jpvxcj78] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

.user-icon-text[b-i2jpvxcj78] {
    font-size: var(--dz-font-size-xs);
    font-weight: var(--dz-font-weight-semibold);
    letter-spacing: var(--dz-letter-spacing-wider);
    text-transform: uppercase;
}

/* Notification badge */
.notification-badge[b-i2jpvxcj78] {
    position: relative;
}

.notification-badge[b-i2jpvxcj78]::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: var(--dz-space-2);
    height: var(--dz-space-2);
    background-color: var(--dz-danger-base);
    border-radius: var(--dz-radius-full);
    border: 2px solid var(--dz-bg-primary);
}

/* Action buttons */
.top-nav-action[b-i2jpvxcj78] {
    background: none;
    border: 1px solid var(--dz-border-primary);
    color: var(--dz-text-secondary);
    padding: var(--dz-space-1) var(--dz-space-2);
    border-radius: var(--dz-radius-sm);
    font-size: var(--dz-font-size-xs);
    cursor: pointer;
    transition: var(--dz-transition-colors);
    font-family: var(--dz-font-sans);
    font-weight: var(--dz-font-weight-medium);
}

.top-nav-action:hover[b-i2jpvxcj78] {
    background-color: var(--dz-bg-secondary);
    border-color: var(--dz-border-focus);
    color: var(--dz-text-primary);
}

.top-nav-action:focus-visible[b-i2jpvxcj78] {
    outline: var(--dz-focus-ring-width) solid var(--dz-focus-ring-color);
    outline-offset: var(--dz-focus-ring-offset);
}

.top-nav-action--primary[b-i2jpvxcj78] {
    background-color: var(--dz-bg-accent);
    border-color: var(--dz-bg-accent);
    color: var(--dz-text-inverse);
}

.top-nav-action--primary:hover[b-i2jpvxcj78] {
    background-color: var(--dz-brand-primary-hover);
    border-color: var(--dz-brand-primary-hover);
}

/* Responsive Design - Using design system breakpoints */
/* FIXED: Adjust tablet breakpoint to handle devices like Samsung A9 */
@media (max-width: 1199.98px) {
    .top-navigation-bar[b-i2jpvxcj78] {
        left: 0; /* Remove navigation panel offset on tablets and mobile */
    }
    
    .top-navigation-bar.nav-collapsed[b-i2jpvxcj78] {
        left: 0;
    }
    
    .top-nav-content[b-i2jpvxcj78] {
        padding: 0 var(--dz-space-4);
    }
}

@media (max-width: 991.98px) {
    .top-nav-center[b-i2jpvxcj78] {
        max-width: 300px;
    }
    
    .global-search input[b-i2jpvxcj78] {
        padding: var(--dz-space-2) var(--dz-space-10) var(--dz-space-2) var(--dz-space-3);
    }
}

@media (max-width: 767.98px) {
    .top-nav-content[b-i2jpvxcj78] {
        padding: 0 var(--dz-space-3);
        gap: var(--dz-space-2);
    }
    
    .top-nav-center[b-i2jpvxcj78] {
        display: none;
    }
    
    .page-title[b-i2jpvxcj78] {
        font-size: var(--dz-font-size-lg);
    }
    
    .top-nav-actions[b-i2jpvxcj78] {
        gap: var(--dz-space-1);
    }
    
    .user-avatar[b-i2jpvxcj78] {
        min-width: 40px;
        height: 28px;
        padding: var(--dz-space-1);
    }
}

@media (max-width: 575.98px) {
    .top-nav-content[b-i2jpvxcj78] {
        padding: 0 var(--dz-space-2);
    }
    
    .page-title[b-i2jpvxcj78] {
        font-size: var(--dz-font-size-base);
        max-width: 150px;
    }
    
    .top-nav-right[b-i2jpvxcj78] {
        gap: var(--dz-space-1);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .top-navigation-bar[b-i2jpvxcj78] {
        border-bottom-width: 2px;
    }
    
    .nav-toggle-mobile[b-i2jpvxcj78],
    .user-avatar[b-i2jpvxcj78],
    .top-nav-action[b-i2jpvxcj78] {
        border-width: 2px;
    }
    
    .global-search input[b-i2jpvxcj78] {
        border-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .top-navigation-bar[b-i2jpvxcj78] {
        transition: none;
    }
    
    .nav-toggle-mobile[b-i2jpvxcj78],
    .user-avatar[b-i2jpvxcj78],
    .top-nav-action[b-i2jpvxcj78],
    .global-search input[b-i2jpvxcj78] {
        transition: none;
    }
}

/* Print styles */
@media print {
    .top-navigation-bar[b-i2jpvxcj78] {
        display: none;
    }
}

/* Performance optimizations */
.top-navigation-bar[b-i2jpvxcj78] {
    contain: layout style paint;
}

.global-search[b-i2jpvxcj78] {
    contain: layout style;
}

/* Search enhancement states */
.global-search--focused[b-i2jpvxcj78] {
    z-index: var(--dz-z-dropdown);
}

.global-search--has-results[b-i2jpvxcj78] {
    position: relative;
}

.search-results[b-i2jpvxcj78] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--dz-card-bg);
    border: 1px solid var(--dz-card-border);
    border-radius: var(--dz-radius-md);
    box-shadow: var(--dz-shadow-lg);
    margin-top: var(--dz-space-1);
    max-height: 300px;
    overflow-y: auto;
    z-index: var(--dz-z-dropdown);
}

.search-result-item[b-i2jpvxcj78] {
    padding: var(--dz-space-2) var(--dz-space-3);
    border-bottom: 1px solid var(--dz-border-secondary);
    cursor: pointer;
    transition: var(--dz-transition-colors);
    font-size: var(--dz-font-size-sm);
    font-family: var(--dz-font-sans);
}

.search-result-item:hover[b-i2jpvxcj78] {
    background-color: var(--dz-bg-secondary);
}

.search-result-item:last-child[b-i2jpvxcj78] {
    border-bottom: none;
}