/* _content/Ayva.ContentManager/Components/ContentEditorModal.razor.rz.scp.css */
/* ============================================
   CONTENT EDITOR MODAL
   Full-screen editor with side-by-side layout
   ============================================ */

/* ============================================
   MODAL OVERLAY & CONTAINER
   ============================================ */

.editor-modal-overlay[b-zh1jz91jx9] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--black-overlay-90);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    outline: none;
}

.editor-modal-container[b-zh1jz91jx9] {
    width: 95vw;
    height: 90vh;
    max-width: 1800px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

/* ============================================
   HEADER
   ============================================ */

.editor-header[b-zh1jz91jx9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.editor-header-left[b-zh1jz91jx9] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.editor-title[b-zh1jz91jx9] {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.editor-header-actions[b-zh1jz91jx9] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* ============================================
   BODY - SPLIT EDITOR LAYOUT
   ============================================ */

.editor-body[b-zh1jz91jx9] {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
    position: relative;
}

.editor-split-container[b-zh1jz91jx9] {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-width: 0;
    height: 100%;
}

/* Editor Pane */
.editor-pane[b-zh1jz91jx9] {
    display: flex;
    flex-direction: column;
    min-width: 300px;
    overflow: hidden;
    height: 100%;
}

.editor-pane-header[b-zh1jz91jx9],
.preview-pane-header[b-zh1jz91jx9] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    flex-shrink: 0;
}

.editor-pane-version[b-zh1jz91jx9] {
    margin-left: auto;
    font-size: var(--text-xs);
    color: var(--text-muted);
    padding: 2px 6px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.monaco-container[b-zh1jz91jx9] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    height: 100%;
    position: relative;
}

.monaco-container[b-zh1jz91jx9]  .monaco-editor,
.monaco-container[b-zh1jz91jx9]  .monaco-editor .overflow-guard {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    width: 100% !important;
}

.monaco-loading[b-zh1jz91jx9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: var(--space-sm);
    color: var(--text-secondary);
}

/* Resizable Divider */
.editor-divider[b-zh1jz91jx9] {
    width: 8px;
    background: var(--border-color);
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--transition-fast);
}

.editor-divider:hover[b-zh1jz91jx9],
.editor-divider.dragging[b-zh1jz91jx9] {
    background: var(--accent-color);
}

.divider-handle[b-zh1jz91jx9] {
    width: 4px;
    height: 40px;
    background: var(--text-muted);
    border-radius: var(--radius-full);
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.editor-divider:hover .divider-handle[b-zh1jz91jx9],
.editor-divider.dragging .divider-handle[b-zh1jz91jx9] {
    opacity: 1;
    background: white;
}

/* Preview Pane */
.preview-pane[b-zh1jz91jx9] {
    display: flex;
    flex-direction: column;
    min-width: 300px;
    overflow: hidden;
    background: var(--bg-base);
    height: 100%;
}

.preview-iframe[b-zh1jz91jx9] {
    flex: 1;
    width: 100%;
    border: none;
    background: white;
}

/* Content Preview Area (non-Razor) */
.content-preview-area[b-zh1jz91jx9] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    padding: var(--space-lg);
}

/* ============================================
   SIDEBARS
   ============================================ */

.properties-sidebar[b-zh1jz91jx9],
.version-history-sidebar[b-zh1jz91jx9] {
    width: 320px;
    min-width: 320px;
    background: var(--bg-card);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
    animation: slideInRight-b-zh1jz91jx9 0.2s ease-out;
}

@keyframes slideInRight-b-zh1jz91jx9 {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Properties Panel */
.properties-panel[b-zh1jz91jx9] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.properties-header[b-zh1jz91jx9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

.properties-content[b-zh1jz91jx9] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
}

.property-section[b-zh1jz91jx9] {
    margin-bottom: var(--space-lg);
}

.property-section .section-title[b-zh1jz91jx9] {
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

.property-section[b-zh1jz91jx9]  .mud-input-control {
    margin-bottom: var(--space-sm);
}

.detail-row[b-zh1jz91jx9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--space-sm);
}

/* ============================================
   FOOTER
   ============================================ */

.editor-footer[b-zh1jz91jx9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.editor-footer-left[b-zh1jz91jx9] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.editor-status[b-zh1jz91jx9] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.status-unsaved[b-zh1jz91jx9] {
    color: var(--warning-color);
}

.status-saved[b-zh1jz91jx9] {
    color: var(--success-color);
}

.version-indicator[b-zh1jz91jx9] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-card);
    border-radius: var(--radius-sm);
}

.editor-footer-actions[b-zh1jz91jx9] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* ============================================
   PREVIEW TYPES
   ============================================ */

.preview-image-container[b-zh1jz91jx9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.preview-image[b-zh1jz91jx9] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.preview-video[b-zh1jz91jx9] {
    max-width: 100%;
    max-height: 100%;
}

.preview-audio-container[b-zh1jz91jx9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.preview-audio[b-zh1jz91jx9] {
    width: 100%;
    max-width: 400px;
}

.preview-pdf[b-zh1jz91jx9] {
    width: 100%;
    height: 100%;
    border: none;
}

.preview-fallback[b-zh1jz91jx9],
.preview-directory[b-zh1jz91jx9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-sm);
    padding: var(--space-xl);
}

.preview-redirect[b-zh1jz91jx9] {
    width: 100%;
    max-width: 800px;
}

.redirect-url[b-zh1jz91jx9] {
    font-family: var(--font-mono);
    word-break: break-all;
}

.redirect-preview-frame[b-zh1jz91jx9] {
    width: 100%;
    height: 400px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.redirect-preview-frame iframe[b-zh1jz91jx9] {
    width: 100%;
    height: 100%;
    border: none;
}

/* ============================================
   LIVE PREVIEW
   ============================================ */

.preview-mode-toggle[b-zh1jz91jx9] {
    margin-left: auto;
    margin-right: var(--space-sm);
}

.preview-mode-toggle[b-zh1jz91jx9]  .mud-toggle-item {
    padding: 4px 8px;
    min-width: auto;
}

.live-preview-container[b-zh1jz91jx9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    background: var(--bg-primary);
}

.live-preview-loading[b-zh1jz91jx9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.live-preview-empty[b-zh1jz91jx9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    text-align: center;
    padding: var(--space-lg);
}

.live-preview-empty kbd[b-zh1jz91jx9] {
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.85em;
    border: 1px solid var(--border-color);
}

.live-preview-content[b-zh1jz91jx9] {
    flex: 1;
    padding: var(--space-md);
    overflow: auto;
}

.live-preview-errors[b-zh1jz91jx9] {
    flex: 1;
    padding: var(--space-md);
    overflow: auto;
}

.error-list[b-zh1jz91jx9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.error-item[b-zh1jz91jx9] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: var(--error-color-10);
    border: 1px solid var(--error-color-20);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s ease;
    font-size: 0.875rem;
}

.error-item:hover[b-zh1jz91jx9] {
    background: var(--error-color-15);
}

.error-location[b-zh1jz91jx9] {
    color: var(--accent-color);
    font-weight: 600;
    white-space: nowrap;
    min-width: 60px;
}

.error-code[b-zh1jz91jx9] {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.8em;
    white-space: nowrap;
}

.error-message[b-zh1jz91jx9] {
    color: var(--text-primary);
    flex: 1;
    word-break: break-word;
}

.error-header[b-zh1jz91jx9] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.generated-code-panel[b-zh1jz91jx9] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: auto;
    max-height: calc(100% - 60px);
}

.generated-code[b-zh1jz91jx9] {
    margin: 0;
    padding: var(--space-md);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.4;
    white-space: pre;
    color: var(--text-primary);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .editor-modal-container[b-zh1jz91jx9] {
        width: 98vw;
        height: 95vh;
    }

    .properties-sidebar[b-zh1jz91jx9],
    .version-history-sidebar[b-zh1jz91jx9] {
        width: 280px;
        min-width: 280px;
    }
}

@media (max-width: 768px) {
    .editor-modal-overlay[b-zh1jz91jx9] {
        padding: 0;
    }

    .editor-modal-container[b-zh1jz91jx9] {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }

    .editor-split-container[b-zh1jz91jx9] {
        flex-direction: column;
    }

    .editor-pane[b-zh1jz91jx9],
    .preview-pane[b-zh1jz91jx9] {
        width: 100% !important;
        min-width: 0;
        min-height: 200px;
    }

    .editor-divider[b-zh1jz91jx9] {
        width: 100%;
        height: 8px;
        cursor: row-resize;
    }

    .divider-handle[b-zh1jz91jx9] {
        width: 40px;
        height: 4px;
    }

    .properties-sidebar[b-zh1jz91jx9],
    .version-history-sidebar[b-zh1jz91jx9] {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 10;
        box-shadow: var(--shadow-lg);
    }

    .editor-header-left[b-zh1jz91jx9] {
        flex: 1;
        min-width: 0;
    }

    .editor-title[b-zh1jz91jx9] {
        max-width: 200px;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .properties-sidebar[b-zh1jz91jx9],
    .version-history-sidebar[b-zh1jz91jx9] {
        animation: none;
    }

    .editor-divider[b-zh1jz91jx9],
    .divider-handle[b-zh1jz91jx9] {
        transition: none;
    }
}
/* _content/Ayva.ContentManager/Components/ContentGrid.razor.rz.scp.css */
/* ============================================
   CONTENT GRID STYLES
   Ayva Design System - File grid explorer component
   ============================================ */

.content-grid-container[b-32m2hql3ne] {
    position: relative;
    min-height: 18.75rem;  /* 300px */
    transition: background var(--transition-fast);
}

.content-grid-container.drag-over[b-32m2hql3ne] {
    background-color: var(--accent-color-10);
}

.content-grid[b-32m2hql3ne] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));  /* 120px */
    gap: var(--space-lg);
    padding: var(--space-sm);
    position: relative;
    z-index: 1;
}

/* ============================================
   GRID ITEM - Interactive File/Folder Cards
   ============================================ */

.content-grid-item[b-32m2hql3ne] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    user-select: none;
}

/* Hover state with border glow */
.content-grid-item:hover[b-32m2hql3ne] {
    background-color: var(--bg-hover);
    border-color: var(--border-color);
    transform: translateY(-2px);
}

/* Active/pressed state */
.content-grid-item:active[b-32m2hql3ne] {
    transform: translateY(0);
    background-color: var(--bg-active);
}

/* Selected state */
.content-grid-item.selected[b-32m2hql3ne] {
    background-color: var(--accent-color-10);
    border-color: var(--accent-color);
    box-shadow: 0 0 0 1px var(--accent-color);
}

.content-grid-item.selected:hover[b-32m2hql3ne] {
    background-color: var(--accent-color-20);
}

/* Focus visible for keyboard navigation */
.content-grid-item:focus-visible[b-32m2hql3ne] {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* ============================================
   ITEM CONTENT
   ============================================ */

.item-icon[b-32m2hql3ne] {
    margin-bottom: var(--space-sm);
    transition: transform var(--transition-fast);
}

.content-grid-item:hover .item-icon[b-32m2hql3ne] {
    transform: scale(1.05);
}

.item-name[b-32m2hql3ne] {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-primary);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    transition: color var(--transition-fast);
}

.content-grid-item:hover .item-name[b-32m2hql3ne] {
    color: var(--accent-color);
}

.disabled-badge[b-32m2hql3ne] {
    position: absolute;
    top: var(--space-xs);
    right: var(--space-xs);
    opacity: 0.6;
}

/* ============================================
   DROP ZONE OVERLAY
   ============================================ */

/* Label wrapper for the drop zone - only interactive when dragging */
.drop-zone-label[b-32m2hql3ne] {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    pointer-events: none;
}

/* When dragging, raise the drop zone above all content and enable interaction */
.drop-zone-label.drag-over[b-32m2hql3ne] {
    z-index: 20;
    pointer-events: auto;
}

/* Drop zone input - covers entire area, invisible */
[b-32m2hql3ne] .drop-zone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    pointer-events: none;
}

.drop-zone-label.drag-over[b-32m2hql3ne]  .drop-zone-input {
    pointer-events: auto;
}

.drop-overlay[b-32m2hql3ne] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--accent-color-10);
    border: 3px dashed var(--accent-color);
    border-radius: var(--radius-md);
    pointer-events: none;
    z-index: 10;
    animation: fadeInUp 0.2s ease-out;
}

.drop-overlay .mud-icon-root[b-32m2hql3ne] {
    color: var(--accent-color);
    animation: bounce-b-32m2hql3ne 1s ease-in-out infinite;
}

@keyframes bounce-b-32m2hql3ne {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ============================================
   SELECTED TREE ITEM (for sidebar)
   ============================================ */

[b-32m2hql3ne] .selected-tree-item {
    background-color: var(--accent-color-10);
    border-left: 3px solid var(--accent-color);
}

/* ============================================
   CONTEXT MENU
   ============================================ */

.context-menu-backdrop[b-32m2hql3ne] {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: transparent;
}

.context-menu-container[b-32m2hql3ne] {
    position: fixed;
    z-index: 9999;
    animation: contextMenuAppear-b-32m2hql3ne 0.15s ease-out;
}

@keyframes contextMenuAppear-b-32m2hql3ne {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-4px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

[b-32m2hql3ne] .context-menu-paper {
    min-width: 11.25rem;  /* 180px */
    max-width: 13.75rem;  /* 220px */
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}

[b-32m2hql3ne] .context-menu-list {
    padding: var(--space-xs) 0;
}

[b-32m2hql3ne] .context-menu-list .mud-list-item {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    min-height: 2rem;
    color: var(--text-primary);
    transition: background var(--transition-fast), color var(--transition-fast);
}

[b-32m2hql3ne] .context-menu-list .mud-list-item:hover {
    background-color: var(--bg-hover);
}

[b-32m2hql3ne] .context-menu-list .mud-list-item .mud-icon-root {
    margin-right: var(--space-sm);
    font-size: 1.1rem;
    color: var(--text-secondary);
    transition: color var(--transition-fast);
}

[b-32m2hql3ne] .context-menu-list .mud-list-item:hover .mud-icon-root {
    color: var(--accent-color);
}

/* Delete action - danger state */
[b-32m2hql3ne] .context-menu-delete:hover {
    background-color: var(--error-bg) !important;
    color: var(--error-color);
}

[b-32m2hql3ne] .context-menu-delete:hover .mud-icon-root {
    color: var(--error-color);
}

/* ============================================
   NAME CELL
   ============================================ */

.name-cell[b-32m2hql3ne] {
    display: block;
    width: 100%;
    padding: var(--space-xs) 0;
}

/* ============================================
   LOADING STATE
   ============================================ */

.content-grid-loading[b-32m2hql3ne] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 12.5rem;  /* 200px */
    gap: var(--space-md);
    color: var(--text-secondary);
}

/* Skeleton grid items for loading */
.content-grid-skeleton[b-32m2hql3ne] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: var(--space-lg);
    padding: var(--space-sm);
}

.skeleton-grid-item[b-32m2hql3ne] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md);
    gap: var(--space-sm);
}

.skeleton-icon[b-32m2hql3ne] {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-hover) 50%, var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-32m2hql3ne 1.5s infinite;
    border-radius: var(--radius-md);
}

.skeleton-name[b-32m2hql3ne] {
    width: 80%;
    height: 0.875rem;
    background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-hover) 50%, var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-32m2hql3ne 1.5s infinite;
    border-radius: var(--radius-xs);
}

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

/* ============================================
   EMPTY STATE
   ============================================ */

.content-grid-empty[b-32m2hql3ne] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 12.5rem;
    gap: var(--space-md);
    padding: var(--space-2xl);
    text-align: center;
    color: var(--text-secondary);
}

.content-grid-empty .empty-icon[b-32m2hql3ne] {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.content-grid-empty h4[b-32m2hql3ne] {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.content-grid-empty p[b-32m2hql3ne] {
    margin: 0;
    font-size: var(--text-sm);
    max-width: 18.75rem;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .content-grid[b-32m2hql3ne] {
        grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
        gap: var(--space-md);
    }

    .content-grid-item[b-32m2hql3ne] {
        padding: var(--space-sm);
    }

    .item-name[b-32m2hql3ne] {
        font-size: var(--text-xs);
    }
}

@media (max-width: 480px) {
    .content-grid[b-32m2hql3ne] {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-sm);
    }
}
/* _content/Ayva.ContentManager/Components/ContentManagerPanel.razor.rz.scp.css */
/* ============================================
   CONTENT MANAGER PANEL STYLES
   Ayva Design System - File explorer layout
   ============================================ */

.content-manager-explorer[b-uud9huex3s] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    flex: 1;
    background: var(--bg-base);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

/* ============================================
   TOOLBAR
   ============================================ */

.explorer-toolbar[b-uud9huex3s] {
    display: flex;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    gap: var(--space-sm);
    flex-shrink: 0;
}

.toolbar-actions[b-uud9huex3s] {
    flex-shrink: 0;
    display: flex;
    gap: var(--space-xs);
}

/* Toolbar button enhancements */
.toolbar-actions[b-uud9huex3s]  .mud-icon-button {
    transition: all var(--transition-fast);
    color: var(--text-secondary);
}

.toolbar-actions[b-uud9huex3s]  .mud-icon-button:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.toolbar-actions[b-uud9huex3s]  .mud-icon-button:active {
    transform: translateY(0);
}

.toolbar-actions[b-uud9huex3s]  .mud-icon-button:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* ============================================
   ADDRESS BAR
   ============================================ */

.explorer-address-bar[b-uud9huex3s] {
    display: flex;
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    gap: var(--space-xs);
    flex-shrink: 0;
    min-height: 2.5rem;
}

.breadcrumb-container[b-uud9huex3s] {
    flex: 1;
    overflow: hidden;
}

.breadcrumb-container[b-uud9huex3s]  .mud-breadcrumbs {
    padding: 0;
}

.breadcrumb-container[b-uud9huex3s]  .mud-breadcrumbs li {
    font-size: var(--text-sm);
}

/* Breadcrumb link interactions */
.breadcrumb-container[b-uud9huex3s]  .mud-breadcrumb-item a,
.breadcrumb-container[b-uud9huex3s]  .mud-breadcrumb-item button {
    color: var(--text-secondary);
    transition: color var(--transition-fast);
}

.breadcrumb-container[b-uud9huex3s]  .mud-breadcrumb-item a:hover,
.breadcrumb-container[b-uud9huex3s]  .mud-breadcrumb-item button:hover {
    color: var(--accent-color);
}

.breadcrumb-container[b-uud9huex3s]  .mud-breadcrumb-item:last-child {
    color: var(--text-primary);
    font-weight: var(--font-medium);
}

/* ============================================
   MAIN CONTENT AREA
   ============================================ */

.explorer-main[b-uud9huex3s] {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* ============================================
   DIRECTORY TREE (Sidebar)
   ============================================ */

.explorer-tree[b-uud9huex3s] {
    width: 15rem;  /* 240px */
    min-width: 15rem;
    background: var(--bg-card);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: width var(--transition-normal), min-width var(--transition-normal);
    overflow: hidden;
}

.explorer-tree.collapsed[b-uud9huex3s] {
    width: 3rem;
    min-width: 3rem;
}

.tree-header[b-uud9huex3s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.tree-header[b-uud9huex3s]  .mud-typography {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.explorer-tree.collapsed .tree-header[b-uud9huex3s] {
    justify-content: center;
    padding: var(--space-sm) var(--space-xs);
}

.explorer-tree.collapsed .tree-header[b-uud9huex3s]  .mud-typography {
    display: none;
}

/* Tree collapse button */
.tree-header[b-uud9huex3s]  .mud-icon-button {
    transition: all var(--transition-fast);
    color: var(--text-secondary);
}

.tree-header[b-uud9huex3s]  .mud-icon-button:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.tree-content[b-uud9huex3s] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-xs);
    min-height: 0;
}

/* Tree item interactions */
.tree-content[b-uud9huex3s]  .mud-treeview-item-content {
    transition: background var(--transition-fast);
    border-radius: var(--radius-sm);
}

.tree-content[b-uud9huex3s]  .mud-treeview-item-content:hover {
    background: var(--bg-hover);
}

.tree-content[b-uud9huex3s]  .mud-treeview-item.selected .mud-treeview-item-content {
    background: var(--accent-color-10);
    border-left: 3px solid var(--accent-color);
}

/* ============================================
   FILE LIST CONTENT
   ============================================ */

.explorer-content[b-uud9huex3s] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    background: var(--bg-base);
    min-width: 0;
}

.explorer-loading[b-uud9huex3s] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

/* ============================================
   EMPTY STATE
   ============================================ */

.explorer-empty[b-uud9huex3s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: var(--space-sm);
    padding: var(--space-2xl);
    text-align: center;
}

.explorer-empty[b-uud9huex3s]  .mud-icon-root {
    color: var(--text-muted);
}

.explorer-empty[b-uud9huex3s]  .mud-typography {
    color: var(--text-secondary);
}

/* ============================================
   SELECTION BAR
   ============================================ */

.explorer-selection-bar[b-uud9huex3s] {
    display: flex;
    align-items: center;
    padding: var(--space-sm) var(--space-lg);
    background: var(--accent-gradient);
    color: white;
    gap: var(--space-sm);
    flex-shrink: 0;
    animation: slideInDown-b-uud9huex3s 0.2s ease-out;
}

@keyframes slideInDown-b-uud9huex3s {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.explorer-selection-bar[b-uud9huex3s]  .mud-button {
    color: inherit;
    transition: all var(--transition-fast);
}

.explorer-selection-bar[b-uud9huex3s]  .mud-button:hover {
    background: var(--white-overlay-20);
}

.explorer-selection-bar[b-uud9huex3s]  .mud-typography {
    font-weight: var(--font-medium);
}

/* ============================================
   VIEW TOGGLE
   ============================================ */

.view-toggle[b-uud9huex3s] {
    display: flex;
    gap: var(--space-xs);
    padding: var(--space-xs);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.view-toggle[b-uud9huex3s]  .mud-icon-button {
    transition: all var(--transition-fast);
}

.view-toggle[b-uud9huex3s]  .mud-icon-button.active {
    background: var(--accent-color);
    color: white;
}

/* ============================================
   SEARCH INPUT
   ============================================ */

.explorer-search[b-uud9huex3s] {
    flex: 1;
    max-width: 18.75rem;  /* 300px */
}

.explorer-search[b-uud9huex3s]  .mud-input-outlined .mud-input-slot {
    background: var(--bg-card);
}

.explorer-search[b-uud9huex3s]  .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--border-color);
    transition: border-color var(--transition-fast);
}

.explorer-search[b-uud9huex3s]  .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--accent-color);
}

.explorer-search[b-uud9huex3s]  .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-color-10);
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */

.tree-content[b-uud9huex3s]::-webkit-scrollbar,
.explorer-content[b-uud9huex3s]::-webkit-scrollbar {
    width: 0.5rem;
}

.tree-content[b-uud9huex3s]::-webkit-scrollbar-track,
.explorer-content[b-uud9huex3s]::-webkit-scrollbar-track {
    background: var(--black-overlay-20);
}

.tree-content[b-uud9huex3s]::-webkit-scrollbar-thumb,
.explorer-content[b-uud9huex3s]::-webkit-scrollbar-thumb {
    background: rgba(var(--primary-color-rgb), 0.4);
    border-radius: var(--radius-xs);
}

.tree-content[b-uud9huex3s]::-webkit-scrollbar-thumb:hover,
.explorer-content[b-uud9huex3s]::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--primary-color-rgb), 0.6);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
    .content-manager-explorer[b-uud9huex3s] {
        height: 100%;
        min-height: 0;
    }

    .explorer-tree[b-uud9huex3s] {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 100;
        box-shadow: var(--shadow-lg);
    }

    .explorer-tree:not(.collapsed)[b-uud9huex3s] {
        width: 17.5rem;  /* 280px */
    }

    .explorer-tree.collapsed[b-uud9huex3s] {
        width: 0;
        min-width: 0;
        border: none;
    }

    .explorer-toolbar[b-uud9huex3s] {
        flex-wrap: wrap;
        gap: var(--space-xs);
    }

    .explorer-search[b-uud9huex3s] {
        order: 3;
        flex: 1 1 100%;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .explorer-toolbar[b-uud9huex3s] {
        padding: var(--space-xs);
    }

    .explorer-address-bar[b-uud9huex3s] {
        padding: var(--space-xs);
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .explorer-tree[b-uud9huex3s],
    .explorer-selection-bar[b-uud9huex3s],
    .toolbar-actions[b-uud9huex3s]  .mud-icon-button,
    .tree-content[b-uud9huex3s]  .mud-treeview-item-content {
        transition: none;
    }

    .explorer-selection-bar[b-uud9huex3s] {
        animation: none;
    }
}
/* _content/Ayva.ContentManager/Components/ContentPreviewPanel.razor.rz.scp.css */
.preview-overlay[b-r0wv4jvffr] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--black-overlay-85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    outline: none;
}

.preview-container[b-r0wv4jvffr] {
    width: 100%;
    max-width: 1400px;
    max-height: calc(100vh - 48px);
    background: var(--mud-palette-surface);
    border-radius: var(--mud-default-borderradius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--mud-elevation-16);
}

/* Header */
.preview-header[b-r0wv4jvffr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-grey);
    flex-shrink: 0;
}

.preview-header-left[b-r0wv4jvffr] {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
}

.preview-title[b-r0wv4jvffr] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
}

/* Body */
.preview-body[b-r0wv4jvffr] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Content Area */
.preview-content[b-r0wv4jvffr] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow: auto;
    background: var(--mud-palette-background);
}

.preview-loading[b-r0wv4jvffr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Image Preview */
.preview-image-container[b-r0wv4jvffr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.preview-image[b-r0wv4jvffr] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--mud-default-borderradius);
}

/* Video Preview */
.preview-video[b-r0wv4jvffr] {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--mud-default-borderradius);
}

/* Audio Preview */
.preview-audio-container[b-r0wv4jvffr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px;
}

.preview-audio[b-r0wv4jvffr] {
    width: 100%;
    max-width: 500px;
    margin-top: 16px;
}

/* PDF Preview */
.preview-pdf[b-r0wv4jvffr] {
    width: 100%;
    height: 100%;
    min-height: 500px;
    border: none;
    border-radius: var(--mud-default-borderradius);
}

/* Fallback */
.preview-fallback[b-r0wv4jvffr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    text-align: center;
}

/* Redirect Preview */
.preview-redirect[b-r0wv4jvffr] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 16px;
}

.redirect-url[b-r0wv4jvffr] {
    font-family: monospace;
    word-break: break-all;
    font-size: 0.875rem;
}

.redirect-preview-frame[b-r0wv4jvffr] {
    flex: 1;
    width: 100%;
    min-height: 400px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: white;
}

/* Razor Page Preview */
.preview-razor[b-r0wv4jvffr] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.razor-preview-frame[b-r0wv4jvffr] {
    flex: 1;
    width: 100%;
    min-height: 500px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: white;
}

/* Razor Editor Container - Full Height */
.razor-editor-container[b-r0wv4jvffr] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.razor-editor-container[b-r0wv4jvffr]  .mud-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.razor-editor-container[b-r0wv4jvffr]  .mud-tabs-panels {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.razor-editor-container[b-r0wv4jvffr]  .mud-tab-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0 !important;
}

.razor-editor-wrapper[b-r0wv4jvffr] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 8px;
    gap: 8px;
}

.monaco-editor-wrapper[b-r0wv4jvffr] {
    flex: 1;
    min-height: 400px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    overflow: hidden;
}

.monaco-editor-wrapper[b-r0wv4jvffr]  .monaco-editor-container {
    height: 100%;
}

.editor-loading[b-r0wv4jvffr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-secondary);
}

.editor-toolbar[b-r0wv4jvffr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    background: var(--mud-palette-background-grey);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    gap: 8px;
}

.editor-help[b-r0wv4jvffr] {
    padding: 4px 8px;
    background: var(--mud-palette-background-grey);
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Sidebar */
.preview-sidebar[b-r0wv4jvffr] {
    width: 320px;
    min-width: 320px;
    background: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 16px;
    gap: 16px;
}

.sidebar-section[b-r0wv4jvffr] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sidebar-section-title[b-r0wv4jvffr] {
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.detail-row[b-r0wv4jvffr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-actions[b-r0wv4jvffr] {
    margin-top: auto;
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Responsive */
@media (max-width: 900px) {
    .preview-overlay[b-r0wv4jvffr] {
        padding: 8px;
    }

    .preview-body[b-r0wv4jvffr] {
        flex-direction: column;
    }

    .preview-sidebar[b-r0wv4jvffr] {
        width: 100%;
        min-width: 100%;
        max-height: 50vh;
        border-left: none;
        border-top: 1px solid var(--mud-palette-lines-default);
    }

    .preview-content[b-r0wv4jvffr] {
        min-height: 300px;
    }
}

@media (max-width: 600px) {
    .preview-header-left[b-r0wv4jvffr] {
        flex: 1;
    }

    .preview-title[b-r0wv4jvffr] {
        max-width: 200px;
    }
}
/* _content/Ayva.ContentManager/Components/DirectoryTree.razor.rz.scp.css */
/* DirectoryTree.razor.css - Component-specific styles only */
/* Base MudBlazor styling is handled by mudblazor-overrides.css */

.directory-tree[b-7s8rlgyubn] {
    padding: var(--space-xs);
}

.directory-tree[b-7s8rlgyubn]  .mud-treeview-item {
    border-radius: var(--radius-sm);
}

.directory-tree[b-7s8rlgyubn]  .mud-treeview-item-content {
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
}

.directory-tree[b-7s8rlgyubn]  .mud-treeview-item-content:hover {
    background-color: var(--bg-hover);
}

[b-7s8rlgyubn] .selected-tree-item {
    background-color: var(--accent-color-10) !important;
}

[b-7s8rlgyubn] .selected-tree-item .mud-icon-root {
    color: var(--accent-color) !important;
}
/* _content/Ayva.ContentManager/Components/DynamicBlazorHost.razor.rz.scp.css */
.dynamic-component-error[b-8yarw70czr] {
    background: var(--error-color-10);
    border: 1px solid var(--error-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin: 0.5rem 0;
}

.error-header[b-8yarw70czr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--error-text);
    margin-bottom: 0.5rem;
}

.error-icon[b-8yarw70czr] {
    font-size: 1.2em;
}

.error-message[b-8yarw70czr] {
    margin: 0;
    padding: 0.75rem;
    background: var(--black-overlay-20);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--white-overlay-90);
}

.dynamic-component-loading[b-8yarw70czr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: var(--text-secondary);
}
/* _content/Ayva.ContentManager/Components/EditorAIAssistant.razor.rz.scp.css */
/* ============================================
   EDITOR AI ASSISTANT
   Floating AI input bar at bottom of editor
   ============================================ */

.ai-assistant-bar[b-q4e6479s8s] {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: var(--space-sm) var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    flex-shrink: 0;
}

.ai-input-row[b-q4e6479s8s] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.ai-input-wrapper[b-q4e6479s8s] {
    flex: 1;
}

.ai-input-wrapper[b-q4e6479s8s]  .mud-input-outlined .mud-input-slot {
    background: var(--bg-card);
}

/* Response Area */
.ai-response-area[b-q4e6479s8s] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    max-height: 300px;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-q4e6479s8s 0.2s ease-out;
}

@keyframes slideUp-b-q4e6479s8s {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ai-response-header[b-q4e6479s8s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
}

.ai-response-header > span[b-q4e6479s8s] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.ai-response-actions[b-q4e6479s8s] {
    display: flex;
    gap: var(--space-xs);
}

.ai-response-content[b-q4e6479s8s] {
    flex: 1;
    overflow-y: auto;
    position: relative;
}

.streaming-indicator[b-q4e6479s8s] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

.response-text[b-q4e6479s8s] {
    margin: 0;
    padding: var(--space-sm);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    background: transparent;
    color: var(--text-primary);
}

.response-text.markdown[b-q4e6479s8s] {
    font-family: var(--font-primary);
}

.response-text.code[b-q4e6479s8s] {
    background: var(--bg-base);
}

/* Scrollbar */
.ai-response-content[b-q4e6479s8s]::-webkit-scrollbar {
    width: 6px;
}

.ai-response-content[b-q4e6479s8s]::-webkit-scrollbar-track {
    background: var(--black-overlay-10);
}

.ai-response-content[b-q4e6479s8s]::-webkit-scrollbar-thumb {
    background: var(--accent-color-40);
    border-radius: var(--radius-full);
}

.ai-response-content[b-q4e6479s8s]::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
}

/* Responsive */
@media (max-width: 768px) {
    .ai-response-area[b-q4e6479s8s] {
        max-height: 200px;
    }
}

/* Tool Activity Chips */
.tool-activity[b-q4e6479s8s] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    padding: var(--space-xs) 0;
}

.tool-chip[b-q4e6479s8s] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.tool-chip.running[b-q4e6479s8s] {
    background: var(--accent-color-15);
    border-color: var(--accent-color-40);
    color: var(--accent-color);
}

.tool-chip.complete[b-q4e6479s8s] {
    background: var(--success-color-15);
    border-color: var(--success-color-40);
    color: var(--success-text);
}

.tool-chip.error[b-q4e6479s8s] {
    background: var(--error-color-15);
    border-color: var(--error-color-40);
    color: var(--error-text);
}

.tool-spinner[b-q4e6479s8s] {
    width: 14px !important;
    height: 14px !important;
}

/* Mode Toggle Buttons */
.mode-toggles[b-q4e6479s8s] {
    flex-shrink: 0;
}

.mode-toggles[b-q4e6479s8s]  .mud-button-group-outlined {
    border-color: var(--border-color);
}

/* Validation Chip */
.validation-chip[b-q4e6479s8s] {
    margin-right: var(--space-xs);
}

/* Operation Info */
.operation-info[b-q4e6479s8s] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.operation-description[b-q4e6479s8s] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Compilation Errors */
.compilation-errors[b-q4e6479s8s] {
    background: var(--error-color-10);
    border-bottom: 1px solid var(--error-border);
    padding: var(--space-xs) var(--space-sm);
    max-height: 120px;
    overflow-y: auto;
}

.error-line[b-q4e6479s8s] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: 2px 0;
    font-size: var(--text-xs);
    color: var(--error-text);
}

.error-line span[b-q4e6479s8s] {
    flex: 1;
    word-break: break-word;
}

.error-line.more[b-q4e6479s8s] {
    color: var(--text-secondary);
    font-style: italic;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .ai-response-area[b-q4e6479s8s] {
        animation: none;
    }

    .tool-chip[b-q4e6479s8s] {
        transition: none;
    }
}
/* _content/Ayva.ContentManager/Components/VersionHistoryPanel.razor.rz.scp.css */
/* ============================================
   VERSION HISTORY PANEL
   ============================================ */

.version-history-panel[b-q04amj8gzw] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-md);
}

.version-header[b-q04amj8gzw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.version-current[b-q04amj8gzw] {
    padding: var(--space-sm);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    text-align: center;
    border: 1px solid var(--accent-color-20);
}

.version-loading[b-q04amj8gzw],
.version-empty[b-q04amj8gzw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    gap: var(--space-sm);
    text-align: center;
}

.version-list[b-q04amj8gzw] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.version-entry[b-q04amj8gzw] {
    padding: var(--space-sm);
    background: var(--bg-base);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    transition: border-color var(--transition-fast);
}

.version-entry:hover[b-q04amj8gzw] {
    border-color: var(--accent-color);
}

.version-info[b-q04amj8gzw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.version-number[b-q04amj8gzw] {
    font-weight: var(--font-semibold);
    color: var(--accent-color);
}

.version-date[b-q04amj8gzw] {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.version-actions[b-q04amj8gzw] {
    display: flex;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
}

/* View Dialog */
.version-view-content[b-q04amj8gzw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.version-view-header[b-q04amj8gzw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.version-content-code[b-q04amj8gzw] {
    background: var(--bg-base);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    overflow: auto;
    max-height: 400px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Scrollbar */
.version-list[b-q04amj8gzw]::-webkit-scrollbar {
    width: 6px;
}

.version-list[b-q04amj8gzw]::-webkit-scrollbar-track {
    background: var(--black-overlay-10);
}

.version-list[b-q04amj8gzw]::-webkit-scrollbar-thumb {
    background: var(--accent-color-40);
    border-radius: var(--radius-full);
}

.version-list[b-q04amj8gzw]::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
}