/* /Components/Architects/AiArchitect.razor.rz.scp.css */
/*
 * AiArchitect.razor.css
 * AI-Powered Floor Plan Analysis Interface
 * 
 * Features:
 * - Multi-step progress indicators
 * - Extraction summary cards with icons
 * - Consistent primary/secondary hover effects
 * - Modern card-based layout
 * - MudBlazor integration
 */

:root[b-yvm476i9g3] {
    --senzomatic-primary: #1a5fb4;
    --senzomatic-secondary: #f5793a;
    --senzomatic-accent: #26a269;
    --senzomatic-dark: #1e1e2e;
    --senzomatic-light: #f8f9fa;
    /* Primary/Secondary hover colors */
    --hover-color: var(--mud-palette-secondary);
    --hover-bg: rgba(245, 121, 58, 0.08);
    --hover-bg-strong: rgba(245, 121, 58, 0.15);
    --btn-hover-bg: rgba(245, 121, 58, 0.12);
    --btn-active-bg: rgba(245, 121, 58, 0.18);
}

.ai-architect-container[b-yvm476i9g3] {
    min-height: 100vh;
}

/* ============================================
   Analysis Cards
   ============================================ */
.analysis-card[b-yvm476i9g3] {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.analysis-card:hover[b-yvm476i9g3] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border-color: rgba(245, 121, 58, 0.4);
}

.result-header[b-yvm476i9g3] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.result-icon[b-yvm476i9g3] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    transition: transform 0.2s ease;
}

.result-icon:hover[b-yvm476i9g3] {
    transform: scale(1.05);
}

.result-icon.extraction[b-yvm476i9g3] {
    background: var(--mud-palette-primary);
}

.result-icon.placement[b-yvm476i9g3] {
    background: var(--mud-palette-secondary);
}

.result-icon.summary[b-yvm476i9g3] {
    background: var(--senzomatic-accent);
}

/* ============================================
   Statistics Grid
   ============================================ */
.stats-grid[b-yvm476i9g3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.stat-item[b-yvm476i9g3] {
    text-align: center;
    padding: 1rem;
    background: var(--mud-palette-background-gray);
    border-radius: 10px;
    transition: transform 0.2s ease;
    cursor: default;
}

.stat-item:hover[b-yvm476i9g3] {
    transform: translateY(-2px);
}

.stat-value[b-yvm476i9g3] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
    line-height: 1;
    transition: color 0.2s ease;
}

.stat-item:hover .stat-value[b-yvm476i9g3] {
    color: var(--hover-color);
}

.stat-label[b-yvm476i9g3] {
    font-size: 0.7rem;
    color: #666;
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ============================================
   Pipeline Preview (Before Analysis)
   ============================================ */
.pipeline-preview[b-yvm476i9g3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--mud-palette-background-gray);
    border-radius: 10px;
}

.pipeline-step[b-yvm476i9g3] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    background: white;
    border-radius: 20px;
    font-size: 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.pipeline-step:hover[b-yvm476i9g3] {
    border-color: var(--mud-palette-primary);
    transform: translateY(-1px);
}

.pipeline-step-text[b-yvm476i9g3] {
    font-weight: 500;
    color: #333;
}

/* ============================================
   Multi-Step Progress (During Analysis)
   ============================================ */
.steps-progress[b-yvm476i9g3] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    margin: 2rem auto;
    max-width: 900px;
    flex-wrap: wrap;
    padding: 0 1rem;
}

.step-item[b-yvm476i9g3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 80px;
    opacity: 0.4;
    transition: all 0.3s ease;
}

.step-item.active[b-yvm476i9g3] {
    opacity: 1;
}

.step-item.completed[b-yvm476i9g3] {
    opacity: 1;
}

.step-item.pending[b-yvm476i9g3] {
    opacity: 0.4;
}

.step-indicator[b-yvm476i9g3] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    transition: all 0.3s ease;
    border: 3px solid transparent;
}

/* Completed step - white background with secondary (orange) checkmark */
.step-item.completed .step-indicator[b-yvm476i9g3] {
    background: white !important;
    border: 3px solid var(--mud-palette-secondary) !important;
    color: var(--mud-palette-secondary) !important;
}

.step-item.active .step-indicator[b-yvm476i9g3] {
    background: var(--mud-palette-primary);
    box-shadow: 0 0 0 4px rgba(26, 95, 180, 0.25);
    animation: step-pulse-b-yvm476i9g3 1.5s infinite;
}

/* Ensure spinner in active state is visible (secondary/orange color) */
.step-item.active .step-indicator .mud-progress-circular[b-yvm476i9g3] {
    color: var(--mud-palette-secondary) !important;
}

.step-item.pending .step-indicator[b-yvm476i9g3] {
    background: #e0e0e0;
    color: #999;
}

@keyframes step-pulse-b-yvm476i9g3 {

    0%,
    100% {
        box-shadow: 0 0 0 4px rgba(26, 95, 180, 0.25);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(26, 95, 180, 0.1);
    }
}

.step-content[b-yvm476i9g3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.step-number[b-yvm476i9g3] {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.step-item.completed .step-number[b-yvm476i9g3] {
    color: var(--mud-palette-secondary);
}

.step-item.pending .step-number[b-yvm476i9g3] {
    color: #999;
}

.step-name[b-yvm476i9g3] {
    font-size: 0.7rem;
    color: #666;
    max-width: 80px;
    line-height: 1.2;
}

.step-connector[b-yvm476i9g3] {
    width: 30px;
    height: 3px;
    background: #e0e0e0;
    margin-top: 22px;
    transition: background 0.3s ease;
}

.step-connector.completed[b-yvm476i9g3] {
    background: var(--mud-palette-secondary);
}

/* ============================================
   Expansion Panel Headers
   ============================================ */
.expansion-header[b-yvm476i9g3] {
    display: flex;
    align-items: center;
    font-weight: 500;
}

/* ============================================
   Sensor List
   ============================================ */
.sensor-list[b-yvm476i9g3] {
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--mud-palette-secondary) transparent;
}

.sensor-list[b-yvm476i9g3]::-webkit-scrollbar {
    width: 6px;
}

.sensor-list[b-yvm476i9g3]::-webkit-scrollbar-track {
    background: transparent;
}

.sensor-list[b-yvm476i9g3]::-webkit-scrollbar-thumb {
    background-color: var(--mud-palette-lines-default);
    border-radius: 3px;
}

.sensor-list[b-yvm476i9g3]::-webkit-scrollbar-thumb:hover {
    background-color: var(--mud-palette-secondary);
}

.sensor-item[b-yvm476i9g3] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--mud-palette-background-gray);
    border-radius: 10px;
    margin-bottom: 0.75rem;
    transition: transform 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
    border: 1px solid transparent;
}

.sensor-item:hover[b-yvm476i9g3] {
    transform: translateX(4px);
    border-color: rgba(245, 121, 58, 0.4);
}

.sensor-type-badge[b-yvm476i9g3] {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.sensor-item:hover .sensor-type-badge[b-yvm476i9g3] {
    transform: scale(1.05);
}

.sensor-type-badge.ht-interior[b-yvm476i9g3] {
    background: var(--mud-palette-primary);
    color: white;
}

.sensor-type-badge.mht[b-yvm476i9g3] {
    background: var(--mud-palette-secondary);
    color: white;
}

.sensor-type-badge.ht-exterior[b-yvm476i9g3] {
    background: var(--senzomatic-accent);
    color: white;
}

/* ============================================
   Progress Container
   ============================================ */
.progress-container[b-yvm476i9g3] {
    background: white;
    border-radius: 16px;
    padding: 3rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Legacy agent progress - keep for compatibility */
.agent-progress[b-yvm476i9g3] {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin: 2rem 0;
}

.agent-step[b-yvm476i9g3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.4;
    transition: all 0.3s ease;
}

.agent-step.active[b-yvm476i9g3] {
    opacity: 1;
}

.agent-step.completed[b-yvm476i9g3] {
    opacity: 1;
}

.agent-step.completed .step-icon[b-yvm476i9g3] {
    background: var(--senzomatic-accent);
}

.step-icon[b-yvm476i9g3] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.agent-step.active .step-icon[b-yvm476i9g3] {
    box-shadow: 0 0 0 4px rgba(26, 95, 180, 0.2);
    animation: step-pulse-b-yvm476i9g3 1.5s infinite;
}

.step-label[b-yvm476i9g3] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
}

.step-description[b-yvm476i9g3] {
    font-size: 0.75rem;
    color: #666;
}

/* ============================================
   Quality Meter
   ============================================ */
.quality-meter[b-yvm476i9g3] {
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.quality-fill[b-yvm476i9g3] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.quality-fill.excellent[b-yvm476i9g3] {
    background: var(--mud-palette-secondary);
}

.quality-fill.good[b-yvm476i9g3] {
    background: var(--mud-palette-primary);
}

.quality-fill.medium[b-yvm476i9g3] {
    background: var(--mud-palette-warning);
}

.quality-fill.low[b-yvm476i9g3] {
    background: var(--mud-palette-error);
}

/* ============================================
   Tab Panel Animation
   ============================================ */
.tab-panel[b-yvm476i9g3] {
    animation: fadeIn-b-yvm476i9g3 0.3s ease;
}

@keyframes fadeIn-b-yvm476i9g3 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   Upload Zone - Enhanced with hover
   ============================================ */
.upload-zone[b-yvm476i9g3] {
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 3rem 2rem;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    background: transparent;
}

.upload-zone:hover[b-yvm476i9g3] {
    border-color: rgba(245, 121, 58, 0.5);
}

.upload-zone.drag-over[b-yvm476i9g3] {
    border-color: var(--mud-palette-primary);
    background: rgba(26, 95, 180, 0.05);
    transform: scale(1.01);
}

.upload-icon[b-yvm476i9g3] {
    transition: transform 0.3s ease, color 0.3s ease;
}

.upload-zone:hover .upload-icon[b-yvm476i9g3] {
    transform: scale(1.15);
    color: var(--mud-palette-secondary) !important;
}

.file-preview[b-yvm476i9g3] {
    background: var(--mud-palette-background-gray);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: border-color 0.2s ease;
}

.file-preview:hover[b-yvm476i9g3] {
    border-color: rgba(245, 121, 58, 0.4);
}

.file-icon-box[b-yvm476i9g3] {
    width: 48px;
    height: 48px;
    background: var(--mud-palette-secondary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: transform 0.2s ease;
}

.file-preview:hover .file-icon-box[b-yvm476i9g3] {
    transform: scale(1.05);
}

/* ============================================
   Empty State Placeholder
   ============================================ */
.floorplan-placeholder[b-yvm476i9g3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    background: var(--mud-palette-background-gray);
    border-radius: 12px;
    border: 2px dashed var(--mud-palette-lines-default);
    transition: border-color 0.3s ease;
}

.floorplan-placeholder:hover[b-yvm476i9g3] {
    border-color: rgba(245, 121, 58, 0.5);
}

/* ============================================
   FloorplanViewer2D Integration
   ============================================ */
[b-yvm476i9g3] .tab-panel .floorplan-viewer-container {
    height: 580px;
    border-radius: 12px;
}

[b-yvm476i9g3] .tab-panel .floorplan-viewer-container.fullscreen {
    height: 100vh;
    border-radius: 0;
}

/* ============================================
   Button Hover Effects
   ============================================ */
[b-yvm476i9g3] .ai-architect-container .mud-icon-button:hover {
    background-color: transparent !important;
}

[b-yvm476i9g3] .ai-architect-container .mud-icon-button:hover svg,
[b-yvm476i9g3] .ai-architect-container .mud-icon-button:hover .mud-icon-root {
    color: var(--hover-color) !important;
}

[b-yvm476i9g3] .ai-architect-container .mud-icon-button:hover::before {
    opacity: 0 !important;
    background: transparent !important;
}

.ai-architect-container .mud-icon-button:hover[b-yvm476i9g3] {
    background-color: transparent !important;
}

.ai-architect-container .mud-icon-button:hover[b-yvm476i9g3]::before {
    opacity: 0 !important;
    background: transparent !important;
}

.ai-architect-container .mud-icon-button:hover svg[b-yvm476i9g3],
.ai-architect-container .mud-icon-button:hover .mud-icon-root[b-yvm476i9g3] {
    color: var(--hover-color) !important;
}

.ai-architect-container .mud-button-filled-primary:hover[b-yvm476i9g3] {
    filter: brightness(1.1);
}

.ai-architect-container .mud-button-filled-secondary:hover[b-yvm476i9g3] {
    filter: brightness(1.1);
}

.ai-architect-container .mud-button-outlined:hover[b-yvm476i9g3] {
    background-color: transparent !important;
    border-color: rgba(245, 121, 58, 0.5) !important;
}

.ai-architect-container .mud-button-outlined:hover .mud-icon-root[b-yvm476i9g3] {
    color: var(--hover-color) !important;
}

.ai-architect-container .mud-button-text:hover[b-yvm476i9g3] {
    background-color: transparent !important;
}

.ai-architect-container .mud-button-text:hover .mud-icon-root[b-yvm476i9g3],
.ai-architect-container .mud-button-text:hover .mud-button-label[b-yvm476i9g3] {
    color: var(--hover-color) !important;
}

/* ============================================
   Chip Hover Effects
   ============================================ */
.ai-architect-container .mud-chip:hover[b-yvm476i9g3] {
    filter: brightness(1.1);
}

/* ============================================
   Tab Hover Effects
   ============================================ */
.ai-architect-container .mud-tab:hover[b-yvm476i9g3] {
    background-color: transparent !important;
}

.ai-architect-container .mud-tab:hover .mud-tab-icon[b-yvm476i9g3],
.ai-architect-container .mud-tab:hover .mud-typography[b-yvm476i9g3] {
    color: var(--hover-color) !important;
}

/* ============================================
   Module Selection Buttons
   ============================================ */
.ai-architect-container .mud-button-group[b-yvm476i9g3] {
    border-radius: 8px;
    overflow: hidden;
}

.ai-architect-container .mud-button-group .mud-button[b-yvm476i9g3] {
    border-radius: 0 !important;
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 960px) {
    .steps-progress[b-yvm476i9g3] {
        gap: 0.5rem;
    }

    .step-item[b-yvm476i9g3] {
        min-width: 60px;
    }

    .step-indicator[b-yvm476i9g3] {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .step-connector[b-yvm476i9g3] {
        width: 20px;
        margin-top: 18px;
    }

    .progress-container[b-yvm476i9g3] {
        padding: 2rem 1.5rem;
    }

    .upload-zone[b-yvm476i9g3] {
        padding: 2rem 1rem;
        min-height: 220px;
    }
}

@media (max-width: 600px) {
    .steps-progress[b-yvm476i9g3] {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .step-item[b-yvm476i9g3] {
        flex-direction: row;
        min-width: auto;
        gap: 1rem;
        padding: 0.5rem 0;
    }

    .step-content[b-yvm476i9g3] {
        align-items: flex-start;
        text-align: left;
    }

    .step-connector[b-yvm476i9g3] {
        display: none;
    }

    .step-indicator[b-yvm476i9g3] {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .stats-grid[b-yvm476i9g3] {
        grid-template-columns: repeat(2, 1fr);
    }

    .ai-architect-container .mud-button-group[b-yvm476i9g3] {
        flex-direction: column;
    }

    .ai-architect-container .mud-button-group .mud-button[b-yvm476i9g3] {
        width: 100%;
    }

    .pipeline-preview[b-yvm476i9g3] {
        justify-content: center;
    }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {

    .upload-zone[b-yvm476i9g3],
    .progress-container[b-yvm476i9g3],
    .steps-progress[b-yvm476i9g3],
    .pipeline-preview[b-yvm476i9g3] {
        display: none !important;
    }

    .analysis-card[b-yvm476i9g3] {
        box-shadow: none;
        border: 1px solid #ccc;
        page-break-inside: avoid;
    }
}

/* ============================================
   Reduced Motion Support
   ============================================ */
@media (prefers-reduced-motion: reduce) {

    .analysis-card[b-yvm476i9g3],
    .stat-item[b-yvm476i9g3],
    .sensor-item[b-yvm476i9g3],
    .step-indicator[b-yvm476i9g3],
    .step-item[b-yvm476i9g3],
    .upload-zone[b-yvm476i9g3],
    .file-preview[b-yvm476i9g3],
    .pipeline-step[b-yvm476i9g3] {
        transition: none !important;
    }

    .step-item.active .step-indicator[b-yvm476i9g3] {
        animation: none !important;
    }

    @keyframes step-pulse-b-yvm476i9g3 {

        0%,
        50%,
        100% {
            box-shadow: 0 0 0 4px rgba(26, 95, 180, 0.25);
        }
    }
}



/* ============================================================================
   AiArchitect_history.css
   
   Additional styles for AI Architect history and import/export features
   ============================================================================ */

/* History Dialog */
.history-dialog .mud-dialog-content[b-yvm476i9g3] {
    padding: 16px 24px;
}

.history-item[b-yvm476i9g3] {
    transition: all 0.2s ease;
    cursor: pointer;
}

.history-item:hover[b-yvm476i9g3] {
    background-color: var(--mud-palette-action-default-hover);
}

.history-item.selected[b-yvm476i9g3] {
    background-color: var(--mud-palette-primary-lighten);
    border-left: 3px solid var(--mud-palette-primary);
}

.history-item .item-actions[b-yvm476i9g3] {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.history-item:hover .item-actions[b-yvm476i9g3] {
    opacity: 1;
}

/* Module type badges */
.module-badge[b-yvm476i9g3] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.module-badge.extraction[b-yvm476i9g3] {
    background: var(--mud-palette-info-lighten);
    color: var(--mud-palette-info-darken);
}

.module-badge.sensors[b-yvm476i9g3] {
    background: var(--mud-palette-primary-lighten);
    color: var(--mud-palette-primary-darken);
}

.module-badge.materials[b-yvm476i9g3] {
    background: var(--mud-palette-secondary-lighten);
    color: var(--mud-palette-secondary-darken);
}

/* Save/Import indicators */
.unsaved-indicator[b-yvm476i9g3] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--mud-palette-warning-lighten);
    color: var(--mud-palette-warning-darken);
    border-radius: 4px;
    font-size: 0.75rem;
    animation: pulse-subtle-b-yvm476i9g3 2s infinite;
}

@keyframes pulse-subtle-b-yvm476i9g3 {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* Quick action bar */
.action-bar[b-yvm476i9g3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--mud-palette-background-gray);
    border-radius: 12px;
    margin-bottom: 16px;
}

.action-bar .action-group[b-yvm476i9g3] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Import zone */
.import-zone[b-yvm476i9g3] {
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.import-zone:hover[b-yvm476i9g3],
.import-zone.drag-over[b-yvm476i9g3] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}

.import-zone .import-icon[b-yvm476i9g3] {
    font-size: 48px;
    color: var(--mud-palette-primary);
    margin-bottom: 16px;
}

/* Tag chips */
.tag-chip[b-yvm476i9g3] {
    font-size: 0.7rem;
    height: 20px;
    padding: 0 8px;
}

.tag-chip .mud-chip-content[b-yvm476i9g3] {
    padding: 0;
}

/* Analysis card enhancements for saved state */
.analysis-card.saved[b-yvm476i9g3] {
    border-left: 4px solid var(--mud-palette-success);
}

.analysis-card.modified[b-yvm476i9g3] {
    border-left: 4px solid var(--mud-palette-warning);
}

/* Empty state for history */
.history-empty-state[b-yvm476i9g3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    text-align: center;
}

.history-empty-state .empty-icon[b-yvm476i9g3] {
    font-size: 64px;
    color: var(--mud-palette-action-disabled);
    margin-bottom: 16px;
}

.history-empty-state .empty-title[b-yvm476i9g3] {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    margin-bottom: 8px;
}

.history-empty-state .empty-description[b-yvm476i9g3] {
    color: var(--mud-palette-text-secondary);
    max-width: 400px;
}

/* Quick access cards */
.quick-access-card[b-yvm476i9g3] {
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--mud-palette-background-gray);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 12px;
}

.quick-access-card:hover[b-yvm476i9g3] {
    background: var(--mud-palette-primary-hover);
    transform: translateX(4px);
}

.quick-access-card .card-icon[b-yvm476i9g3] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-primary);
    color: white;
}

.quick-access-card .card-content[b-yvm476i9g3] {
    flex: 1;
    min-width: 0;
}

.quick-access-card .card-title[b-yvm476i9g3] {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quick-access-card .card-meta[b-yvm476i9g3] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* Stats row in history items */
.history-stats[b-yvm476i9g3] {
    display: flex;
    gap: 16px;
    font-size: 0.75rem;
}

.history-stats .stat[b-yvm476i9g3] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.history-stats .stat-value[b-yvm476i9g3] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.history-stats .stat-label[b-yvm476i9g3] {
    color: var(--mud-palette-text-secondary);
}

/* Filter chips */
.filter-chips[b-yvm476i9g3] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

/* Loading overlay */
.loading-overlay[b-yvm476i9g3] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: inherit;
}

/* Responsive adjustments */
@media (max-width: 960px) {
    .history-stats[b-yvm476i9g3] {
        display: none;
    }

    .action-bar[b-yvm476i9g3] {
        flex-direction: column;
        gap: 12px;
    }

    .action-bar .action-group[b-yvm476i9g3] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .history-item .item-actions[b-yvm476i9g3] {
        opacity: 1;
    }

    .quick-access-card[b-yvm476i9g3] {
        padding: 10px 12px;
    }
}


/* ============================================================================
   New Visual Features
   ============================================================================ */

.ai-insights-card[b-yvm476i9g3] {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.05) 0%, rgba(255, 152, 0, 0.1) 100%);
    border-left: 4px solid #ff9800;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.insight-text[b-yvm476i9g3] {
    line-height: 1.6;
    color: var(--mud-palette-text-primary);
}

@media print {
    .ai-architect-container[b-yvm476i9g3] {
        padding: 0 !important;
    }

    .mud-appbar[b-yvm476i9g3],
    .mud-drawer[b-yvm476i9g3],
    .quick-actions-bar[b-yvm476i9g3],
    .mud-tabs-toolbar[b-yvm476i9g3],
    .mud-snackbar[b-yvm476i9g3],
    .mud-dialog-container[b-yvm476i9g3],
    .mud-button[b-yvm476i9g3] {
        display: none !important;
    }

    .ai-insights-card[b-yvm476i9g3] {
        margin-bottom: 2rem;
        background: #fff8e1 !important;
        border: 1px solid #ff9800 !important;
    }

    .mud-paper[b-yvm476i9g3] {
        box-shadow: none !important;
        border: 1px solid #eee !important;
    }

    .mud-tabs[b-yvm476i9g3] {
        box-shadow: none !important;
    }

    /* Force show all tab panels in print */
    .mud-tabpanel[b-yvm476i9g3] {
        display: block !important;
        opacity: 1 !important;
        margin-bottom: 2rem;
    }
}
/* /Components/Architects/Autocad/FloorplanCanvas.razor.rz.scp.css */
/* ============================================================================
   FloorplanCanvas.razor.css (Extended)
   
   Additional styles for background SVG layer and error highlighting.
   These styles should be appended to the existing FloorplanViewer2D_razor.css
   ============================================================================ */

/* ============================================
   BACKGROUND SVG LAYER STYLES
   ============================================ */

.layer-background-svg[b-o4s183lsdn] {
    pointer-events: none;
    /* Ensure background doesn't interfere with interactions */
}

.layer-background-svg path[b-o4s183lsdn],
.layer-background-svg line[b-o4s183lsdn],
.layer-background-svg polyline[b-o4s183lsdn],
.layer-background-svg polygon[b-o4s183lsdn],
.layer-background-svg rect[b-o4s183lsdn],
.layer-background-svg circle[b-o4s183lsdn],
.layer-background-svg ellipse[b-o4s183lsdn] {
    stroke: var(--background-layer-color, #888888);
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.layer-background-svg image[b-o4s183lsdn] {
    pointer-events: none;
    opacity: inherit;
}

/* Background layer indicator badge */
.background-indicator[b-o4s183lsdn] {
    pointer-events: none;
    user-select: none;
}

.background-indicator rect[b-o4s183lsdn] {
    transition: fill-opacity 0.2s ease;
}

.background-indicator text[b-o4s183lsdn] {
    font-family: inherit;
    font-weight: 500;
}

/* ============================================
   ERROR HIGHLIGHTING LAYER STYLES
   ============================================ */

.layer-error-highlights[b-o4s183lsdn] {
    pointer-events: none;
}

.error-highlight[b-o4s183lsdn] {
    animation: error-pulse-b-o4s183lsdn 2s ease-in-out infinite;
}

.error-highlight.error-low[b-o4s183lsdn] {
    --error-color: var(--mud-palette-warning, #ff9800);
}

.error-highlight.error-medium[b-o4s183lsdn] {
    --error-color: var(--mud-palette-error, #f44336);
}

.error-highlight.error-high[b-o4s183lsdn] {
    --error-color: var(--error-critical, #d32f2f);
}

.error-label[b-o4s183lsdn] {
    font-family: inherit;
    font-size: 10px;
    font-weight: 500;
    pointer-events: none;
}

@keyframes error-pulse-b-o4s183lsdn {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

/* ============================================
   COMPARISON MODE STYLES
   When background layer is visible, adjust 
   detected elements for better visibility
   ============================================ */

.floorplan-svg.comparison-mode .layer-walls .wall-line[b-o4s183lsdn] {
    stroke-width: 3;
    stroke: var(--detected-wall-color, #1976d2);
}

.floorplan-svg.comparison-mode .layer-walls .wall-exterior-line[b-o4s183lsdn] {
    stroke: var(--detected-exterior-wall-color, #d32f2f);
}

.floorplan-svg.comparison-mode .layer-rooms .room-fill[b-o4s183lsdn] {
    fill-opacity: 0.15;
}

.floorplan-svg.comparison-mode .layer-rooms .room-outline[b-o4s183lsdn] {
    stroke-width: 2;
    stroke: var(--detected-room-outline, #4caf50);
}

/* ============================================
   LAYER VISIBILITY TOGGLE ANIMATIONS
   ============================================ */

.layer-background-svg[b-o4s183lsdn],
.layer-error-highlights[b-o4s183lsdn] {
    transition: opacity 0.3s ease-in-out;
}

.layer-background-svg.hidden[b-o4s183lsdn],
.layer-error-highlights.hidden[b-o4s183lsdn] {
    opacity: 0;
    pointer-events: none;
}

/* ============================================
   BACKGROUND LAYER CONTROL PANEL
   (for toolbar integration)
   ============================================ */

.background-layer-controls[b-o4s183lsdn] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: var(--mud-palette-surface);
    border-radius: 4px;
    border: 1px solid var(--mud-palette-lines-default);
}

.background-layer-controls .control-label[b-o4s183lsdn] {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.background-layer-controls .opacity-slider[b-o4s183lsdn] {
    width: 80px;
}

.background-layer-controls .toggle-btn[b-o4s183lsdn] {
    padding: 4px;
    min-width: unset;
}

/* ============================================
   ERROR LEGEND STYLES
   ============================================ */

.error-legend[b-o4s183lsdn] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: var(--mud-palette-surface);
    border-radius: 4px;
    border: 1px solid var(--mud-palette-lines-default);
    font-size: 11px;
}

.error-legend-item[b-o4s183lsdn] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.error-legend-item .error-icon[b-o4s183lsdn] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.error-legend-item .error-icon.missing[b-o4s183lsdn] {
    border: 2px dashed var(--error-missing, #f44336);
    background: transparent;
}

.error-legend-item .error-icon.extra[b-o4s183lsdn] {
    background: var(--error-extra, #ff9800);
    opacity: 0.5;
}

.error-legend-item .error-icon.position[b-o4s183lsdn] {
    background: var(--error-position, #9c27b0);
}

/* ============================================
   DARK MODE ADJUSTMENTS
   ============================================ */

.dark-mode .layer-background-svg path[b-o4s183lsdn],
.dark-mode .layer-background-svg line[b-o4s183lsdn],
.dark-mode .layer-background-svg polyline[b-o4s183lsdn] {
    stroke: var(--background-layer-color-dark, #aaaaaa);
}

.dark-mode .background-indicator rect[b-o4s183lsdn] {
    fill: var(--mud-palette-surface-dark);
}

.dark-mode .error-legend[b-o4s183lsdn] {
    background: var(--mud-palette-surface-dark);
    border-color: var(--mud-palette-lines-default-dark);
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .layer-background-svg[b-o4s183lsdn] {
        opacity: 0.3 !important;
    }
    
    .layer-error-highlights[b-o4s183lsdn] {
        display: none;
    }
    
    .background-indicator[b-o4s183lsdn] {
        display: none;
    }
}

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

@media (max-width: 768px) {
    .background-layer-controls[b-o4s183lsdn] {
        flex-wrap: wrap;
    }
    
    .background-layer-controls .opacity-slider[b-o4s183lsdn] {
        width: 60px;
    }
}
/* /Components/Architects/Autocad/FloorplanViewer2D.razor.rz.scp.css */
/* ============================================================================
   FloorplanViewer2D.razor.css
   Professional CAD-style 2D floor plan visualization
   COMPLETE DARK MODE SUPPORT
   ============================================================================ */

/* CSS Variables for theming */
.floorplan-viewer-container[b-9u2svjwxes] {
    /* Light mode defaults */
    --bg-color: #ffffff;
    --canvas-bg: #fafafa;
    --grid-minor: rgba(0, 0, 0, 0.05);
    --grid-major: rgba(0, 0, 0, 0.12);
    --wall-stroke: #1a1a1a;
    --door-stroke: #333333;
    --window-stroke: #0066cc;
    --annotation-line: #666666;
    --dimension-line: #0066cc;
    --north-arrow-fill: #333333;
    --measure-line: #2196f3;
    --measure-total-bg: #1976d2;
    --snap-color: #ff5722;
    
    /* Text colors for light mode */
    --text-primary: #1a1a1a;
    --text-secondary: #555555;
    --text-muted: #777777;
    
    /* Canvas label colors - light mode */
    --label-room-id: #666666;
    --label-room-name: #1a1a1a;
    --label-room-area: #666666;
    --label-sensor: #666666;
    --label-dimension: #555555;
    --label-scale: #666666;
    --label-bg: rgba(255, 255, 255, 0.9);
    
    /* Room fills */
    --room-fill-living: rgba(200, 230, 255, 0.3);
    --room-fill-bathroom: rgba(180, 220, 255, 0.4);
    --room-fill-kitchen: rgba(255, 230, 200, 0.3);
    --room-fill-technical: rgba(220, 220, 220, 0.4);
    --room-fill-hallway: rgba(240, 240, 240, 0.3);
    --room-fill-default: rgba(245, 245, 245, 0.3);
    
    /* Sensor colors */
    --sensor-ht-interior: #ff9800;
    --sensor-mht: #00bcd4;
    --sensor-ht-exterior: #9c27b0;
    --sensor-motion: #4caf50;
    --sensor-smoke: #f44336;
    --sensor-default: #607d8b;
    
    /* Pink hover color for icons */
    --icon-hover: #e91e63;
    
    /* Border colors */
    --border-color: rgba(0, 0, 0, 0.12);
    --border-color-strong: rgba(0, 0, 0, 0.2);
    
    /* Properties panel colors - light mode */
    --panel-bg: #ffffff;
    --panel-header-bg: var(--mud-palette-primary, #1976d2);
    --panel-subheader-bg: #f5f5f5;
    --panel-label-bg: #fafafa;
    --panel-border: rgba(0, 0, 0, 0.12);
    --panel-text-primary: #1a1a1a;
    --panel-text-secondary: #666666;
    
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 600px;
    background: var(--bg-color);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ============================================================================
   DARK MODE - COMPLETE THEME OVERRIDE
   ============================================================================ */
.floorplan-viewer-container.dark-mode[b-9u2svjwxes] {
    --bg-color: #1a1a1a;
    --canvas-bg: #242424;
    
    /* IMPROVED: Much more visible grid lines */
    --grid-minor: rgba(255, 255, 255, 0.08);
    --grid-major: rgba(255, 255, 255, 0.18);
    
    /* IMPROVED: Brighter strokes for better visibility */
    --wall-stroke: #f0f0f0;
    --door-stroke: #e0e0e0;
    --window-stroke: #64b5f6;
    
    /* IMPROVED: Much brighter annotation colors */
    --annotation-line: #b0b0b0;
    --dimension-line: #64b5f6;
    --north-arrow-fill: #e0e0e0;
    
    /* IMPROVED: Brighter measurement colors */
    --measure-line: #64b5f6;
    --measure-total-bg: #1e88e5;
    --snap-color: #ff8a65;
    
    /* IMPROVED: High contrast text colors */
    --text-primary: #f5f5f5;
    --text-secondary: #c0c0c0;
    --text-muted: #a0a0a0;
    
    /* CANVAS LABEL COLORS - DARK MODE (HIGH CONTRAST) */
    --label-room-id: #a0a0a0;
    --label-room-name: #f0f0f0;
    --label-room-area: #b0b0b0;
    --label-sensor: #c0c0c0;
    --label-dimension: #b0b0b0;
    --label-scale: #a0a0a0;
    --label-bg: rgba(30, 30, 30, 0.95);
    
    /* IMPROVED: More visible room fills with better saturation */
    --room-fill-living: rgba(80, 140, 200, 0.35);
    --room-fill-bathroom: rgba(60, 130, 180, 0.4);
    --room-fill-kitchen: rgba(200, 140, 80, 0.35);
    --room-fill-technical: rgba(100, 100, 100, 0.4);
    --room-fill-hallway: rgba(80, 80, 80, 0.35);
    --room-fill-default: rgba(70, 70, 70, 0.35);
    
    /* IMPROVED: Brighter sensor colors for dark mode */
    --sensor-ht-interior: #ffb74d;
    --sensor-mht: #4dd0e1;
    --sensor-ht-exterior: #ba68c8;
    --sensor-motion: #81c784;
    --sensor-smoke: #ef5350;
    --sensor-default: #90a4ae;
    
    /* Border colors for dark mode */
    --border-color: rgba(255, 255, 255, 0.12);
    --border-color-strong: rgba(255, 255, 255, 0.25);
    
    /* PROPERTIES PANEL COLORS - DARK MODE */
    --panel-bg: #1e1e1e;
    --panel-header-bg: #2d2d2d;
    --panel-subheader-bg: #2a2a2a;
    --panel-label-bg: #252525;
    --panel-border: rgba(255, 255, 255, 0.15);
    --panel-text-primary: #f0f0f0;
    --panel-text-secondary: #b0b0b0;
}

/* ============================================================================
   DARK MODE - CANVAS SVG LABELS (CRITICAL FIX)
   ============================================================================ */

/* Room ID text */
.floorplan-viewer-container.dark-mode .room-id-text[b-9u2svjwxes] {
    fill: #b0b0b0 !important;
    opacity: 0.9 !important;
}

/* Room name text - most important, needs highest contrast */
.floorplan-viewer-container.dark-mode .room-name-text[b-9u2svjwxes] {
    fill: #f5f5f5 !important;
    font-weight: 600;
}

/* Room area text */
.floorplan-viewer-container.dark-mode .room-area-text[b-9u2svjwxes] {
    fill: #c0c0c0 !important;
}

/* Sensor index text (number inside sensor) */
.floorplan-viewer-container.dark-mode .sensor-index-text[b-9u2svjwxes] {
    fill: #ffffff !important;
}

/* Sensor label text (abbreviation below sensor) */
.floorplan-viewer-container.dark-mode .sensor-label-text[b-9u2svjwxes] {
    fill: var(--label-sensor) !important;
}

/* Scale bar text */
.floorplan-viewer-container.dark-mode .scale-text[b-9u2svjwxes] {
    fill: var(--label-scale) !important;
}

/* Measurement text */
.floorplan-viewer-container.dark-mode .measure-text-small[b-9u2svjwxes] {
    fill: #90caf9 !important;
}

.floorplan-viewer-container.dark-mode .measure-text-completed[b-9u2svjwxes] {
    fill: #64b5f6 !important;
}

.floorplan-viewer-container.dark-mode .measure-point-label[b-9u2svjwxes] {
    fill: #90caf9 !important;
}

/* Measurement backgrounds */
.floorplan-viewer-container.dark-mode .measure-text-bg[b-9u2svjwxes],
.floorplan-viewer-container.dark-mode .measure-text-bg-completed[b-9u2svjwxes] {
    fill: var(--label-bg) !important;
    stroke: var(--measure-line) !important;
}

/* Wall dimension labels */
.floorplan-viewer-container.dark-mode .wall-dimension text[b-9u2svjwxes] {
    fill: var(--label-dimension) !important;
}

.floorplan-viewer-container.dark-mode .wall-dimension rect[b-9u2svjwxes] {
    fill: var(--label-bg) !important;
}

.floorplan-viewer-container.dark-mode .wall-dimension line[b-9u2svjwxes] {
    stroke: var(--text-muted) !important;
}

/* Room outline in dark mode */
.floorplan-viewer-container.dark-mode .room-outline[b-9u2svjwxes] {
    stroke: var(--annotation-line) !important;
}

/* ============================================================================
   DARK MODE - TEXT AND TYPOGRAPHY OVERRIDES
   ============================================================================ */
.floorplan-viewer-container.dark-mode .mud-typography[b-9u2svjwxes],
.floorplan-viewer-container.dark-mode .mud-text[b-9u2svjwxes] {
    color: var(--text-primary) !important;
}

.floorplan-viewer-container.dark-mode .mud-typography.mud-text-secondary[b-9u2svjwxes],
.floorplan-viewer-container.dark-mode .text-muted[b-9u2svjwxes] {
    color: var(--text-secondary) !important;
    opacity: 1 !important;
}

/* Status bar text */
.floorplan-viewer-container.dark-mode .viewer-status-bar .drawing-name[b-9u2svjwxes],
.floorplan-viewer-container.dark-mode .viewer-status-bar .mud-text[b-9u2svjwxes] {
    color: var(--text-primary) !important;
}

/* Toolbar text and labels */
.floorplan-viewer-container.dark-mode .toolbar-label[b-9u2svjwxes] {
    color: var(--text-secondary) !important;
    opacity: 0.9 !important;
}

/* Legend text */
.floorplan-viewer-container.dark-mode .legend-title[b-9u2svjwxes] {
    color: var(--text-secondary) !important;
    opacity: 0.9 !important;
}

.floorplan-viewer-container.dark-mode .legend-item[b-9u2svjwxes] {
    color: var(--text-primary) !important;
}

.floorplan-viewer-container.dark-mode .stat .mud-text[b-9u2svjwxes] {
    color: var(--text-secondary) !important;
}

.floorplan-viewer-container.dark-mode .stat .mud-typography-h6[b-9u2svjwxes] {
    color: #90caf9 !important;
}

/* ============================================================================
   DARK MODE - ICON CONTRAST IMPROVEMENTS
   ============================================================================ */
.floorplan-viewer-container.dark-mode .mud-icon-root[b-9u2svjwxes] {
    color: var(--text-primary) !important;
}

.floorplan-viewer-container.dark-mode .status-icon[b-9u2svjwxes] {
    color: var(--text-secondary) !important;
    opacity: 0.9 !important;
}

.floorplan-viewer-container.dark-mode .toolbar-btn .mud-icon-root[b-9u2svjwxes],
.floorplan-viewer-container.dark-mode .mud-icon-button .mud-icon-root[b-9u2svjwxes] {
    color: var(--text-primary) !important;
}

/* Active/toggled state - pink for selected icons in dark mode (Color.Secondary) */
.floorplan-viewer-container.dark-mode .mud-icon-button.mud-icon-button-color-secondary .mud-icon-root[b-9u2svjwxes],
.floorplan-viewer-container.dark-mode .mud-toggle-icon-btn.mud-toggle-icon-btn-checked .mud-icon-root[b-9u2svjwxes] {
    color: #e91e63 !important;
}

/* ============================================================================
   DARK MODE - CHIP IMPROVEMENTS
   ============================================================================ */
.floorplan-viewer-container.dark-mode .mud-chip[b-9u2svjwxes] {
    border-color: var(--border-color-strong) !important;
}

.floorplan-viewer-container.dark-mode .mud-chip.mud-chip-outlined[b-9u2svjwxes] {
    border-color: var(--border-color-strong) !important;
    color: var(--text-primary) !important;
}

.floorplan-viewer-container.dark-mode .mud-chip .mud-chip-content[b-9u2svjwxes] {
    color: inherit !important;
}

.floorplan-viewer-container.dark-mode .coord-chip[b-9u2svjwxes] {
    background-color: #333333 !important;
    color: #e0e0e0 !important;
}

.floorplan-viewer-container.dark-mode .layer-chip[b-9u2svjwxes] {
    border-color: var(--border-color-strong) !important;
    color: var(--text-secondary) !important;
}

.floorplan-viewer-container.dark-mode .tool-chip[b-9u2svjwxes] {
    background-color: #e91e63 !important;
    color: white !important;
}

.floorplan-viewer-container.dark-mode .zoom-chip[b-9u2svjwxes] {
    color: var(--text-primary) !important;
}

/* ============================================================================
   DARK MODE - DIVIDERS AND BORDERS
   ============================================================================ */
.floorplan-viewer-container.dark-mode .mud-divider[b-9u2svjwxes] {
    border-color: var(--border-color-strong) !important;
}

.floorplan-viewer-container.dark-mode .toolbar-divider[b-9u2svjwxes] {
    border-color: rgba(255, 255, 255, 0.2) !important;
    opacity: 1 !important;
}

/* ============================================================================
   DARK MODE - PROPERTIES PANEL (COMPLETE FIX)
   ============================================================================ */
.floorplan-viewer-container.dark-mode .properties-panel[b-9u2svjwxes] {
    background: var(--panel-bg) !important;
}

.floorplan-viewer-container.dark-mode .properties-panel-container[b-9u2svjwxes]  .properties-panel {
    background: var(--panel-bg) !important;
    border-left-color: var(--panel-border) !important;
}

.floorplan-viewer-container.dark-mode .properties-panel-container[b-9u2svjwxes]  .properties-header {
    background: var(--panel-header-bg) !important;
    border-bottom: 1px solid var(--panel-border) !important;
}

.floorplan-viewer-container.dark-mode .properties-panel-container[b-9u2svjwxes]  .properties-header .mud-typography,
.floorplan-viewer-container.dark-mode .properties-panel-container[b-9u2svjwxes]  .properties-header .mud-text {
    color: #f0f0f0 !important;
}

.floorplan-viewer-container.dark-mode .properties-panel-container[b-9u2svjwxes]  .properties-header .mud-icon-root {
    color: #f0f0f0 !important;
}

.floorplan-viewer-container.dark-mode .properties-panel-container[b-9u2svjwxes]  .properties-header .mud-icon-button {
    color: #f0f0f0 !important;
}

.floorplan-viewer-container.dark-mode .properties-panel-container[b-9u2svjwxes]  .properties-content {
    background: var(--panel-bg) !important;
}

.floorplan-viewer-container.dark-mode .properties-panel-container[b-9u2svjwxes]  .properties-subheader {
    background: var(--panel-subheader-bg) !important;
    color: var(--panel-text-secondary) !important;
    border-bottom-color: var(--panel-border) !important;
}

.floorplan-viewer-container.dark-mode .properties-panel-container[b-9u2svjwxes]  .properties-subheader .mud-icon-root {
    color: var(--panel-text-secondary) !important;
}

.floorplan-viewer-container.dark-mode .properties-panel-container[b-9u2svjwxes]  .property-item {
    border-bottom-color: var(--panel-border) !important;
}

.floorplan-viewer-container.dark-mode .properties-panel-container[b-9u2svjwxes]  .property-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

.floorplan-viewer-container.dark-mode .properties-panel-container[b-9u2svjwxes]  .property-label {
    background: var(--panel-label-bg) !important;
    color: var(--panel-text-secondary) !important;
    border-right-color: var(--panel-border) !important;
}

.floorplan-viewer-container.dark-mode .properties-panel-container[b-9u2svjwxes]  .property-value {
    color: var(--panel-text-primary) !important;
}

.floorplan-viewer-container.dark-mode .properties-panel-container[b-9u2svjwxes]  .property-value .mud-text,
.floorplan-viewer-container.dark-mode .properties-panel-container[b-9u2svjwxes]  .property-value .mud-typography {
    color: var(--panel-text-primary) !important;
}

.floorplan-viewer-container.dark-mode .properties-panel-container[b-9u2svjwxes]  .reason-text {
    color: var(--panel-text-secondary) !important;
}

.floorplan-viewer-container.dark-mode .properties-panel-container[b-9u2svjwxes]  .mud-list {
    background: transparent !important;
}

.floorplan-viewer-container.dark-mode .properties-panel-container[b-9u2svjwxes]  .mud-list-item {
    color: var(--panel-text-primary) !important;
}

.floorplan-viewer-container.dark-mode .properties-panel-container[b-9u2svjwxes]  .property-item.highlight {
    background: var(--panel-subheader-bg) !important;
}

.floorplan-viewer-container.dark-mode .properties-panel-container[b-9u2svjwxes]  .property-item.clickable:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Scrollbar in dark mode */
.floorplan-viewer-container.dark-mode .properties-panel-container[b-9u2svjwxes]  .properties-content::-webkit-scrollbar-track {
    background: var(--panel-bg) !important;
}

.floorplan-viewer-container.dark-mode .properties-panel-container[b-9u2svjwxes]  .properties-content::-webkit-scrollbar-thumb {
    background: #444444 !important;
}

.floorplan-viewer-container.dark-mode .properties-panel-container[b-9u2svjwxes]  .properties-content::-webkit-scrollbar-thumb:hover {
    background: #555555 !important;
}

/* ============================================================================
   DARK MODE - TOOLTIP IMPROVEMENTS
   ============================================================================ */
.floorplan-viewer-container.dark-mode .hover-tooltip[b-9u2svjwxes] {
    background: #2a2a2a !important;
    border-color: var(--border-color-strong) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

.floorplan-viewer-container.dark-mode .tooltip-title[b-9u2svjwxes] {
    color: var(--text-secondary) !important;
    opacity: 1 !important;
}

.floorplan-viewer-container.dark-mode .tooltip-content[b-9u2svjwxes] {
    color: var(--text-primary) !important;
}

/* ============================================================================
   DARK MODE - CROSSHAIRS IMPROVEMENT
   ============================================================================ */
.floorplan-viewer-container.dark-mode .crosshair-center[b-9u2svjwxes]::before,
.floorplan-viewer-container.dark-mode .crosshair-center[b-9u2svjwxes]::after {
    background: #90caf9 !important;
}

/* ============================================================================
   FULLSCREEN MODE
   ============================================================================ */
.floorplan-viewer-container.fullscreen[b-9u2svjwxes] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    z-index: 99999 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================================================
   STATUS BAR
   ============================================================================ */
.viewer-status-bar[b-9u2svjwxes] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 12px;
    background: var(--canvas-bg);
    border-bottom: 1px solid var(--border-color);
    font-size: 12px;
    flex-shrink: 0;
}

.status-left[b-9u2svjwxes],
.status-center[b-9u2svjwxes],
.status-right[b-9u2svjwxes] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-icon[b-9u2svjwxes] {
    opacity: 0.85;
}

.drawing-name[b-9u2svjwxes] {
    font-weight: 500;
}

.layer-chip[b-9u2svjwxes] {
    font-size: 10px !important;
}

.tool-chip[b-9u2svjwxes] {
    font-size: 10px !important;
}

.coord-chip[b-9u2svjwxes] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 11px !important;
}

.snap-indicator[b-9u2svjwxes] {
    font-size: 10px !important;
}

/* ============================================================================
   TOOLBAR
   ============================================================================ */
.viewer-toolbar[b-9u2svjwxes] {
    background: var(--bg-color) !important;
    border-bottom: 1px solid var(--border-color);
    min-height: 40px !important;
    flex-shrink: 0;
}

.toolbar-label[b-9u2svjwxes] {
    margin-right: 8px;
    opacity: 0.8;
    text-transform: uppercase;
    font-size: 10px !important;
    letter-spacing: 0.5px;
}

.toolbar-btn[b-9u2svjwxes] {
    min-width: 32px !important;
    width: 32px !important;
    height: 32px !important;
    transition: all 0.15s ease !important;
}

/* PINK HOVER EFFECT FOR ALL TOOLBAR ICONS */
.toolbar-btn:hover[b-9u2svjwxes] {
    color: var(--icon-hover) !important;
    background-color: rgba(233, 30, 99, 0.08) !important;
}

.toolbar-btn:hover .mud-icon-root[b-9u2svjwxes] {
    color: var(--icon-hover) !important;
}

.mud-toggle-icon-btn:hover[b-9u2svjwxes] {
    color: var(--icon-hover) !important;
}

.mud-toggle-icon-btn:hover .mud-icon-root[b-9u2svjwxes] {
    color: var(--icon-hover) !important;
}

.layer-button-group[b-9u2svjwxes] {
    gap: 2px;
}

.tool-button-group[b-9u2svjwxes] {
    gap: 2px;
}

.zoom-chip[b-9u2svjwxes] {
    font-family: monospace;
    min-width: 50px;
    text-align: center;
}

/* ============================================================================
   SVG CANVAS WRAPPER
   ============================================================================ */
.svg-wrapper[b-9u2svjwxes] {
    flex: 1;
    position: relative;
    overflow: hidden;
    cursor: crosshair;
    background: var(--canvas-bg);
    min-height: 0;
    outline: none;
}

.svg-wrapper:focus[b-9u2svjwxes] {
    outline: none;
}

.svg-wrapper.cursor-select[b-9u2svjwxes] {
    cursor: default;
}

.svg-wrapper.cursor-crosshair[b-9u2svjwxes] {
    cursor: crosshair;
}

.svg-wrapper.cursor-none[b-9u2svjwxes] {
    cursor: none;
}

.floorplan-svg[b-9u2svjwxes] {
    width: 100%;
    height: 100%;
    transform-origin: center center;
}

.canvas-bg[b-9u2svjwxes] {
    fill: var(--canvas-bg);
}

.grid-layer[b-9u2svjwxes] {
    pointer-events: none;
}

/* ============================================================================
   ROOM STYLES
   ============================================================================ */
.room-entity[b-9u2svjwxes] {
    cursor: pointer;
    transition: opacity 0.2s;
}

.room-entity:hover[b-9u2svjwxes] {
    opacity: 0.8;
}

.room-entity.selected .room-outline[b-9u2svjwxes] {
    stroke: #2196f3;
    stroke-width: 2;
}

.room-entity.hovered .room-outline[b-9u2svjwxes] {
    stroke: #ff9800;
    stroke-width: 1.5;
}

.room-fill[b-9u2svjwxes] {
    stroke: none;
}

.room-fill-living .room-fill[b-9u2svjwxes] { fill: var(--room-fill-living); }
.room-fill-bathroom .room-fill[b-9u2svjwxes] { fill: var(--room-fill-bathroom); }
.room-fill-kitchen .room-fill[b-9u2svjwxes] { fill: var(--room-fill-kitchen); }
.room-fill-technical .room-fill[b-9u2svjwxes] { fill: var(--room-fill-technical); }
.room-fill-hallway .room-fill[b-9u2svjwxes] { fill: var(--room-fill-hallway); }
.room-fill-default .room-fill[b-9u2svjwxes] { fill: var(--room-fill-default); }

.room-outline[b-9u2svjwxes] {
    fill: none;
    stroke: var(--annotation-line);
    stroke-width: 0.5;
    stroke-dasharray: 4, 2;
}

/* ============================================================================
   WALL STYLES
   ============================================================================ */
.wall-line[b-9u2svjwxes] {
    stroke: var(--wall-stroke);
    stroke-linecap: square;
}

.wall-exterior[b-9u2svjwxes] {
    stroke-width: 3.5;
}

.wall-loadbearing[b-9u2svjwxes] {
    stroke-width: 3.0;
}

.wall-interior[b-9u2svjwxes] {
    stroke-width: 2.0;
}

.wall-partition[b-9u2svjwxes] {
    stroke-width: 1.5;
    stroke-dasharray: none;
}

.wall-entity[b-9u2svjwxes] {
    cursor: pointer;
}

.wall-entity.selected .wall-line[b-9u2svjwxes] {
    stroke: #2196f3;
}

.wall-entity.hovered .wall-line[b-9u2svjwxes] {
    stroke: #ff9800;
}

.wall-hit-area[b-9u2svjwxes] {
    cursor: pointer;
}

/* ============================================================================
   DOOR & WINDOW STYLES
   ============================================================================ */
.door-entity[b-9u2svjwxes],
.window-entity[b-9u2svjwxes] {
    pointer-events: none;
}

.door-entity.selected[b-9u2svjwxes],
.window-entity.selected[b-9u2svjwxes] {
    opacity: 1;
}

.door-entity.hovered[b-9u2svjwxes],
.window-entity.hovered[b-9u2svjwxes] {
    opacity: 0.8;
}

.door-opening[b-9u2svjwxes],
.window-opening[b-9u2svjwxes] {
    stroke: var(--bg-color);
}

.door-leaf[b-9u2svjwxes] {
    stroke: var(--door-stroke);
}

.door-swing[b-9u2svjwxes] {
    stroke: var(--door-stroke);
    opacity: 0.6;
}

.door-hit-area[b-9u2svjwxes] {
    cursor: pointer;
    pointer-events: all;
}

/* ============================================================================
   ANNOTATION STYLES (ROOM LABELS)
   ============================================================================ */
.room-annotation[b-9u2svjwxes] {
    pointer-events: none;
}

.room-id-text[b-9u2svjwxes] {
    font-size: 10px;
    font-weight: 600;
    fill: var(--label-room-id);
    opacity: 0.7;
}

.room-name-text[b-9u2svjwxes] {
    font-size: 11px;
    font-weight: 500;
    fill: var(--label-room-name);
}

.room-area-text[b-9u2svjwxes] {
    font-size: 9px;
    fill: var(--label-room-area);
}

/* ============================================================================
   SENSOR STYLES
   ============================================================================ */
.sensor-entity[b-9u2svjwxes] {
    cursor: pointer;
}

.sensor-entity.selected .sensor-marker[b-9u2svjwxes] {
    stroke-width: 2.5;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
}

.sensor-hit-area[b-9u2svjwxes] {
    cursor: pointer;
    pointer-events: all;
}

.sensor-marker[b-9u2svjwxes] {
    pointer-events: none;
}

.sensor-entity:hover .sensor-marker[b-9u2svjwxes] {
    stroke-width: 2;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));
}

.sensor-index-text[b-9u2svjwxes] {
    font-size: 8px;
    font-weight: 700;
    fill: white;
    pointer-events: none;
}

.sensor-label-text[b-9u2svjwxes] {
    font-size: 8px;
    font-weight: 500;
    fill: var(--label-sensor);
    pointer-events: none;
}

/* ============================================================================
   MEASUREMENT STYLES
   ============================================================================ */
.layer-measurements[b-9u2svjwxes] {
    pointer-events: none;
}

.measure-point[b-9u2svjwxes] {
    fill: var(--measure-line);
}

.measure-point-label[b-9u2svjwxes] {
    font-size: 10px;
    fill: var(--measure-line);
    font-weight: 500;
}

.measure-line[b-9u2svjwxes] {
    stroke: var(--measure-line);
    stroke-width: 1.5;
}

.measure-line-preview[b-9u2svjwxes] {
    stroke: var(--measure-line);
    stroke-width: 1;
    opacity: 0.7;
}

.measure-line-completed[b-9u2svjwxes] {
    stroke: var(--dimension-line);
    stroke-width: 1;
    opacity: 0.8;
}

.measure-point-completed[b-9u2svjwxes] {
    fill: var(--dimension-line);
}

.measure-text-bg[b-9u2svjwxes] {
    fill: var(--label-bg);
    stroke: var(--measure-line);
    stroke-width: 0.5;
}

.measure-text-bg-completed[b-9u2svjwxes] {
    fill: var(--label-bg);
    stroke: var(--dimension-line);
    stroke-width: 0.5;
    opacity: 0.95;
}

.measure-text-small[b-9u2svjwxes] {
    font-size: 9px;
    fill: var(--measure-line);
    font-weight: 500;
}

.measure-text-completed[b-9u2svjwxes] {
    font-size: 10px;
    fill: var(--dimension-line);
    font-weight: 500;
}

.measure-total-bg[b-9u2svjwxes] {
    fill: var(--measure-total-bg);
}

.measure-total-text[b-9u2svjwxes] {
    font-size: 11px;
    fill: white;
    font-weight: bold;
}

/* ============================================================================
   SCALE BAR & NORTH ARROW
   ============================================================================ */
.scale-bar[b-9u2svjwxes] {
    pointer-events: none;
}

.scale-text[b-9u2svjwxes] {
    font-size: 9px;
    fill: var(--label-scale);
}

.north-arrow[b-9u2svjwxes] {
    pointer-events: none;
}

/* ============================================================================
   CROSSHAIRS OVERLAY
   ============================================================================ */
.crosshairs-overlay[b-9u2svjwxes] {
    position: absolute;
    pointer-events: none;
    z-index: 100;
    transform: translate(-50%, -50%);
}

.crosshair-center[b-9u2svjwxes] {
    width: 16px;
    height: 16px;
    position: relative;
}

.crosshair-center[b-9u2svjwxes]::before,
.crosshair-center[b-9u2svjwxes]::after {
    content: '';
    position: absolute;
    background: var(--mud-palette-primary, #1976d2);
}

.crosshair-center[b-9u2svjwxes]::before {
    width: 16px;
    height: 1px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.crosshair-center[b-9u2svjwxes]::after {
    width: 1px;
    height: 16px;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

/* ============================================================================
   LEGEND PANEL
   ============================================================================ */
.viewer-legend[b-9u2svjwxes] {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background: var(--bg-color);
    border-top: 1px solid var(--border-color);
    gap: 16px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.legend-section[b-9u2svjwxes] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.legend-title[b-9u2svjwxes] {
    font-size: 10px !important;
    opacity: 0.8;
}

.legend-items[b-9u2svjwxes] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.legend-item[b-9u2svjwxes] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
}

.room-swatch[b-9u2svjwxes] {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid var(--annotation-line);
}

.room-swatch.living[b-9u2svjwxes] { background: var(--room-fill-living); }
.room-swatch.bathroom[b-9u2svjwxes] { background: var(--room-fill-bathroom); }
.room-swatch.kitchen[b-9u2svjwxes] { background: var(--room-fill-kitchen); }
.room-swatch.technical[b-9u2svjwxes] { background: var(--room-fill-technical); }

.legend-stats[b-9u2svjwxes] {
    display: flex;
    gap: 24px;
    margin-left: auto;
}

.stat[b-9u2svjwxes] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.text-muted[b-9u2svjwxes] {
    opacity: 0.8;
}

/* ============================================================================
   HOVER TOOLTIP
   ============================================================================ */
.hover-tooltip[b-9u2svjwxes] {
    position: absolute;
    background: var(--bg-color);
    border: 1px solid var(--border-color-strong);
    border-radius: 4px;
    padding: 8px 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    z-index: 200;
    max-width: 200px;
}

.tooltip-title[b-9u2svjwxes] {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.85;
    margin-bottom: 4px;
}

.tooltip-content[b-9u2svjwxes] {
    font-size: 12px;
}

/* ============================================================================
   PROPERTIES PANEL (BASE STYLES)
   ============================================================================ */
.properties-panel-container[b-9u2svjwxes] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 280px;
    z-index: 150;
    display: flex;
    flex-direction: column;
}

.properties-panel-container[b-9u2svjwxes]  .properties-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-left: 1px solid var(--panel-border);
    border-radius: 0 !important;
    background: var(--panel-bg);
}

.properties-panel-container[b-9u2svjwxes]  .properties-header {
    background: var(--panel-header-bg) !important;
    color: white !important;
    min-height: 40px;
    padding: 0 8px 0 12px;
}

.properties-panel-container[b-9u2svjwxes]  .properties-header .mud-icon-root {
    color: white !important;
}

.properties-panel-container[b-9u2svjwxes]  .properties-header .mud-typography {
    color: white !important;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.properties-panel-container[b-9u2svjwxes]  .properties-header .mud-icon-button {
    color: white !important;
}

.properties-panel-container[b-9u2svjwxes]  .properties-header .mud-icon-button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.properties-panel-container[b-9u2svjwxes]  .properties-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--panel-bg);
}

.properties-panel-container[b-9u2svjwxes]  .properties-content::-webkit-scrollbar {
    width: 6px;
}

.properties-panel-container[b-9u2svjwxes]  .properties-content::-webkit-scrollbar-track {
    background: var(--panel-bg);
}

.properties-panel-container[b-9u2svjwxes]  .properties-content::-webkit-scrollbar-thumb {
    background: #cccccc;
    border-radius: 3px;
}

.properties-panel-container[b-9u2svjwxes]  .properties-content::-webkit-scrollbar-thumb:hover {
    background: #aaaaaa;
}

.properties-panel-container[b-9u2svjwxes]  .properties-subheader {
    background: var(--panel-subheader-bg) !important;
    min-height: 32px !important;
    padding: 6px 12px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--panel-text-secondary) !important;
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    align-items: center;
}

.properties-panel-container[b-9u2svjwxes]  .properties-subheader .mud-icon-root {
    font-size: 1rem !important;
    color: var(--panel-text-secondary) !important;
}

.properties-panel-container[b-9u2svjwxes]  .property-item {
    padding: 0 !important;
    min-height: 32px !important;
    border-bottom: 1px solid var(--panel-border);
}

.properties-panel-container[b-9u2svjwxes]  .property-item:last-child {
    border-bottom: none;
}

.properties-panel-container[b-9u2svjwxes]  .property-item:hover {
    background: rgba(0, 0, 0, 0.04) !important;
}

.properties-panel-container[b-9u2svjwxes]  .property-item .mud-list-item-text {
    margin: 0 !important;
    width: 100%;
}

.properties-panel-container[b-9u2svjwxes]  .property-row {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 32px;
}

.properties-panel-container[b-9u2svjwxes]  .property-label {
    flex: 0 0 90px;
    padding: 6px 10px;
    background: var(--panel-label-bg);
    border-right: 1px solid var(--panel-border);
    color: var(--panel-text-secondary) !important;
    font-weight: 500 !important;
}

.properties-panel-container[b-9u2svjwxes]  .property-value {
    flex: 1;
    padding: 6px 10px;
    color: var(--panel-text-primary) !important;
    display: flex;
    align-items: center;
}

.properties-panel-container[b-9u2svjwxes]  .property-value .mud-chip {
    height: 24px !important;
    font-size: 0.75rem !important;
}

.properties-panel-container[b-9u2svjwxes]  .property-value .mud-rating {
    font-size: 1rem;
}

.properties-panel-container[b-9u2svjwxes]  .reason-text {
    padding: 8px 12px !important;
    line-height: 1.5;
    color: var(--panel-text-secondary);
}

.properties-panel-container[b-9u2svjwxes]  .mud-divider {
    border-color: var(--panel-border) !important;
}

.properties-panel-container[b-9u2svjwxes]  .mud-list {
    padding: 0 !important;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 768px) {
    .viewer-status-bar[b-9u2svjwxes] {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .status-center[b-9u2svjwxes] {
        order: 3;
        width: 100%;
        justify-content: center;
    }
    
    .viewer-legend[b-9u2svjwxes] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .legend-stats[b-9u2svjwxes] {
        margin-left: 0;
        width: 100%;
        justify-content: space-around;
    }
    
    .toolbar-label[b-9u2svjwxes] {
        display: none;
    }
    
    .properties-panel-container[b-9u2svjwxes] {
        width: 100%;
        max-width: none;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        height: auto;
        max-height: 50%;
    }
    
    .properties-panel-container[b-9u2svjwxes]  .properties-panel {
        border-left: none !important;
        border-top: 1px solid var(--panel-border);
    }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */
@media print {
    .viewer-status-bar[b-9u2svjwxes],
    .viewer-toolbar[b-9u2svjwxes],
    .viewer-legend[b-9u2svjwxes],
    .crosshairs-overlay[b-9u2svjwxes],
    .hover-tooltip[b-9u2svjwxes],
    .properties-panel-container[b-9u2svjwxes] {
        display: none !important;
    }
    
    .floorplan-viewer-container[b-9u2svjwxes] {
        border: none;
        box-shadow: none;
    }
    
    .svg-wrapper[b-9u2svjwxes] {
        background: white;
    }
    
    .floorplan-svg[b-9u2svjwxes] {
        transform: none !important;
    }
}
/* /Components/Architects/RoofMeasurement/RoofMeasurement.razor.rz.scp.css */
/* ============================================================================
   RoofMeasurement.razor.css
   
   Scoped styles for roof measurement component
   ============================================================================ */

.roof-measurement-container[b-2av94camgm] {
    display: grid;
    grid-template-columns: 380px 1fr;
    height: 600px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

/* Sidebar panel */
.panel[b-2av94camgm] {
    padding: 16px;
    background: linear-gradient(180deg, var(--mud-palette-background-grey), rgba(var(--mud-palette-background-grey-rgb), 0.85));
    overflow-y: auto;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}

[b-2av94camgm] .mud-dark .panel {
    background: linear-gradient(180deg, #111a33, rgba(17, 26, 51, 0.85));
    border-right-color: rgba(255, 255, 255, 0.08);
}

/* Step sections */
.step-section[b-2av94camgm] {
    margin-bottom: 4px;
}

/* KPI cards */
.kpi-card[b-2av94camgm] {
    background: rgba(var(--mud-palette-primary-rgb), 0.05);
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.15);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
}

[b-2av94camgm] .mud-dark .kpi-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
}

/* Edges card */
.edges-card[b-2av94camgm] {
    background: rgba(var(--mud-palette-primary-rgb), 0.05);
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.15);
    border-radius: 12px;
    padding: 12px;
}

[b-2av94camgm] .mud-dark .edges-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
}

.edges-card table[b-2av94camgm] {
    width: 100%;
}

.edges-card th[b-2av94camgm],
.edges-card td[b-2av94camgm] {
    padding: 4px 8px;
    font-size: 12px;
}

.edges-card th[b-2av94camgm] {
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}

/* Map container */
.map-container[b-2av94camgm] {
    height: 100%;
    width: 100%;
    min-height: 400px;
}

/* Leaflet overrides for dark theme */
[b-2av94camgm] .mud-dark .map-container .leaflet-control-zoom a,
[b-2av94camgm] .mud-dark .map-container .leaflet-draw-toolbar a {
    background-color: #1e1e2e;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

[b-2av94camgm] .mud-dark .map-container .leaflet-control-zoom a:hover,
[b-2av94camgm] .mud-dark .map-container .leaflet-draw-toolbar a:hover {
    background-color: #2e2e3e;
}

[b-2av94camgm] .mud-dark .map-container .leaflet-control-attribution {
    background: rgba(30, 30, 46, 0.8);
    color: #a0a0a0;
}

[b-2av94camgm] .mud-dark .map-container .leaflet-popup-content-wrapper {
    background: #1e1e2e;
    color: #fff;
}

[b-2av94camgm] .mud-dark .map-container .leaflet-popup-tip {
    background: #1e1e2e;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .roof-measurement-container[b-2av94camgm] {
        grid-template-columns: 1fr;
        grid-template-rows: auto 400px;
        height: auto;
    }

    .panel[b-2av94camgm] {
        max-height: 50vh;
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    [b-2av94camgm] .mud-dark .panel {
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }
}
/* /Components/Coauthor/Components/VisualLatexEditor.razor.rz.scp.css */
/* Visual LaTeX Editor - TipTap Styles */

/* CSS Custom Properties */
.visual-latex-editor[b-lwfmq9tcci] {
    --editor-text-color: #333;
    --editor-bg: white;
    --editor-border: #e0e0e0;
    --editor-accent: #1976d2;
    --editor-code-bg: #2d2d2d;
    --editor-code-color: #f8f8f2;
    --editor-muted: #666;

    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--editor-bg);
}

/* TipTap Editor Container */
.visual-latex-editor :deep(.tiptap)[b-lwfmq9tcci] {
    flex: 1;
    padding: 24px 32px;
    outline: none;
    overflow-y: auto;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 16px;
    line-height: 1.8;
    color: var(--editor-text-color) !important;
    max-width: 800px;
    margin: 0 auto;
}

.visual-latex-editor :deep(.tiptap *)[b-lwfmq9tcci] {
    color: inherit;
}

.visual-latex-editor :deep(.tiptap p)[b-lwfmq9tcci],
.visual-latex-editor :deep(.tiptap span)[b-lwfmq9tcci],
.visual-latex-editor :deep(.tiptap div)[b-lwfmq9tcci],
.visual-latex-editor :deep(.tiptap li)[b-lwfmq9tcci] {
    color: var(--editor-text-color);
}

.visual-latex-editor :deep(.tiptap:focus)[b-lwfmq9tcci] {
    outline: none;
}

/* Placeholder */
.visual-latex-editor :deep(.tiptap p.is-editor-empty:first-child::before)[b-lwfmq9tcci] {
    color: #adb5bd;
    content: attr(data-placeholder);
    float: left;
    height: 0;
    pointer-events: none;
}

/* Headings */
.visual-latex-editor :deep(.tiptap h1)[b-lwfmq9tcci],
.visual-latex-editor :deep(.tiptap h2)[b-lwfmq9tcci],
.visual-latex-editor :deep(.tiptap h3)[b-lwfmq9tcci],
.visual-latex-editor :deep(.tiptap h4)[b-lwfmq9tcci] {
    font-weight: 600;
    color: var(--editor-text-color);
}

.visual-latex-editor :deep(.tiptap h1)[b-lwfmq9tcci] {
    font-size: 2em;
    font-weight: 700;
    margin: 1.5em 0 0.8em 0;
    border-bottom: 2px solid var(--editor-border);
    padding-bottom: 0.3em;
}

.visual-latex-editor :deep(.tiptap h2)[b-lwfmq9tcci] {
    font-size: 1.5em;
    margin: 1.3em 0 0.6em 0;
}

.visual-latex-editor :deep(.tiptap h3)[b-lwfmq9tcci] {
    font-size: 1.25em;
    margin: 1.2em 0 0.5em 0;
}

.visual-latex-editor :deep(.tiptap h4)[b-lwfmq9tcci] {
    font-size: 1.1em;
    margin: 1em 0 0.4em 0;
}

/* Paragraphs */
.visual-latex-editor :deep(.tiptap p)[b-lwfmq9tcci] {
    margin: 0 0 1em 0;
    text-align: justify;
}

/* Lists */
.visual-latex-editor :deep(.tiptap ul)[b-lwfmq9tcci],
.visual-latex-editor :deep(.tiptap ol)[b-lwfmq9tcci] {
    padding-left: 1.5em;
    margin: 0.5em 0 1em 0;
}

.visual-latex-editor :deep(.tiptap li)[b-lwfmq9tcci] {
    margin: 0.3em 0;
}

.visual-latex-editor :deep(.tiptap li p)[b-lwfmq9tcci] {
    margin: 0;
}

/* Blockquote */
.visual-latex-editor :deep(.tiptap blockquote)[b-lwfmq9tcci] {
    border-left: 4px solid var(--editor-accent);
    margin: 1em 0;
    padding: 0.5em 0 0.5em 1.5em;
    background: #f8f9fa;
    font-style: italic;
    color: var(--editor-muted);
}

/* Code blocks */
.visual-latex-editor :deep(.tiptap pre)[b-lwfmq9tcci] {
    background: var(--editor-code-bg);
    color: var(--editor-code-color);
    font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: 14px;
    padding: 1em;
    border-radius: 4px;
    overflow-x: auto;
    margin: 1em 0;
}

.visual-latex-editor :deep(.tiptap code)[b-lwfmq9tcci] {
    font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: 0.9em;
    background: #f0f0f0;
    color: #c7254e !important;
    padding: 0.1em 0.3em;
    border-radius: 3px;
}

.visual-latex-editor :deep(.tiptap pre code)[b-lwfmq9tcci] {
    background: none;
    color: var(--editor-code-color) !important;
    padding: 0;
}

/* Horizontal rule */
.visual-latex-editor :deep(.tiptap hr)[b-lwfmq9tcci] {
    border: none;
    border-top: 1px solid var(--editor-border);
    margin: 2em 0;
}

/* Tables */
.visual-latex-editor :deep(.tiptap table)[b-lwfmq9tcci] {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
    font-size: 14px;
}

.visual-latex-editor :deep(.tiptap th)[b-lwfmq9tcci],
.visual-latex-editor :deep(.tiptap td)[b-lwfmq9tcci] {
    border: 1px solid var(--editor-border);
    padding: 8px 12px;
    text-align: left;
}

.visual-latex-editor :deep(.tiptap th)[b-lwfmq9tcci] {
    background: #f5f5f5;
    font-weight: 600;
}

.visual-latex-editor :deep(.tiptap tr:nth-child(even))[b-lwfmq9tcci] {
    background: #fafafa;
}

/* Math - Inline */
.visual-latex-editor :deep(.math-inline)[b-lwfmq9tcci] {
    display: inline;
    padding: 0 2px;
    background: rgba(9, 134, 88, 0.08);
    border-radius: 3px;
    cursor: pointer;
    color: var(--editor-text-color) !important;
}

.visual-latex-editor :deep(.math-inline:hover)[b-lwfmq9tcci] {
    background: rgba(9, 134, 88, 0.15);
}

/* Math - Display */
.visual-latex-editor :deep(.display-math-block)[b-lwfmq9tcci],
.visual-latex-editor :deep(.math-display)[b-lwfmq9tcci] {
    display: block;
    text-align: center;
    padding: 1em;
    margin: 1em 0;
    background: #f8f9fa;
    border-radius: 4px;
    overflow-x: auto;
    color: var(--editor-text-color) !important;
}

/* KaTeX - unified color rules */
.visual-latex-editor :deep(.katex)[b-lwfmq9tcci],
.visual-latex-editor :deep(.katex *)[b-lwfmq9tcci] {
    color: var(--editor-text-color) !important;
}

.visual-latex-editor :deep(.katex svg)[b-lwfmq9tcci],
.visual-latex-editor :deep(.katex svg *)[b-lwfmq9tcci] {
    fill: var(--editor-text-color) !important;
    stroke: var(--editor-text-color) !important;
}

.visual-latex-editor :deep(.katex .frac-line)[b-lwfmq9tcci],
.visual-latex-editor :deep(.katex .overline-line)[b-lwfmq9tcci],
.visual-latex-editor :deep(.katex .underline-line)[b-lwfmq9tcci],
.visual-latex-editor :deep(.katex .hline)[b-lwfmq9tcci],
.visual-latex-editor :deep(.katex .hdashline)[b-lwfmq9tcci],
.visual-latex-editor :deep(.katex .rule)[b-lwfmq9tcci] {
    border-color: var(--editor-text-color) !important;
    background-color: var(--editor-text-color) !important;
}

.visual-latex-editor :deep(.math-error)[b-lwfmq9tcci] {
    color: #d32f2f;
    background: #ffebee;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Fira Code', monospace;
    font-size: 0.9em;
}

/* Citations */
.visual-latex-editor :deep(.citation)[b-lwfmq9tcci] {
    display: inline;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.9em;
    cursor: pointer;
    user-select: none;
}

.visual-latex-editor :deep(.citation-cite)[b-lwfmq9tcci] {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #90caf9;
}

.visual-latex-editor :deep(.citation-ref)[b-lwfmq9tcci] {
    background: #fce4ec;
    color: #c2185b;
    border: 1px solid #f48fb1;
}

.visual-latex-editor :deep(.citation-label)[b-lwfmq9tcci] {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffcc80;
}

.visual-latex-editor :deep(.citation:hover)[b-lwfmq9tcci] {
    opacity: 0.8;
}

/* Raw LaTeX block */
.visual-latex-editor :deep(.raw-latex-block)[b-lwfmq9tcci] {
    background: #fff8e1;
    border: 1px dashed #ffc107;
    border-radius: 4px;
    padding: 1em;
    margin: 1em 0;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 13px;
    color: #5d4037;
    position: relative;
}

.visual-latex-editor :deep(.raw-latex-block::before)[b-lwfmq9tcci] {
    content: 'Raw LaTeX';
    position: absolute;
    top: -10px;
    left: 10px;
    background: #fff8e1;
    padding: 0 6px;
    font-size: 11px;
    color: #ff8f00;
    font-weight: 600;
}

/* Figures */
.visual-latex-editor :deep(.latex-figure)[b-lwfmq9tcci] {
    margin: 1.5em 0;
    padding: 1em;
    background: #fafafa;
    border: 1px solid var(--editor-border);
    border-radius: 4px;
    text-align: center;
}

.visual-latex-editor :deep(.latex-figure .figure-content)[b-lwfmq9tcci] {
    margin-bottom: 0.5em;
}

.visual-latex-editor :deep(.latex-figure figcaption)[b-lwfmq9tcci] {
    font-size: 0.9em;
    color: var(--editor-muted);
    font-style: italic;
}

/* Images */
.visual-latex-editor :deep(.tiptap img)[b-lwfmq9tcci] {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 1em auto;
    display: block;
}

/* Selection */
.visual-latex-editor :deep(.tiptap ::selection)[b-lwfmq9tcci] {
    background: color-mix(in srgb, var(--editor-accent) 30%, transparent);
}

/* Error state */
.visual-editor-error[b-lwfmq9tcci] {
    padding: 20px;
    color: #d32f2f;
    background: #ffebee;
    text-align: center;
    border-radius: 4px;
    margin: 20px;
}

/* Force text color for all elements (override dark mode inheritance) */
.visual-latex-editor :deep(.tiptap strong)[b-lwfmq9tcci],
.visual-latex-editor :deep(.tiptap b)[b-lwfmq9tcci],
.visual-latex-editor :deep(.tiptap em)[b-lwfmq9tcci],
.visual-latex-editor :deep(.tiptap i)[b-lwfmq9tcci],
.visual-latex-editor :deep(.tiptap u)[b-lwfmq9tcci],
.visual-latex-editor :deep(.tiptap s)[b-lwfmq9tcci],
.visual-latex-editor :deep(.tiptap mark)[b-lwfmq9tcci],
.visual-latex-editor :deep([data-node-view-wrapper])[b-lwfmq9tcci],
.visual-latex-editor :deep([data-node-view-content])[b-lwfmq9tcci],
.visual-latex-editor :deep(.ProseMirror)[b-lwfmq9tcci],
.visual-latex-editor :deep(.ProseMirror *:not(pre):not(code))[b-lwfmq9tcci] {
    color: var(--editor-text-color);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ===== Navigation Menu Animations ===== */

/* Base transition for all nav links */
[b-89z3jnf23b] .mud-drawer .mud-nav-link {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border-radius: 8px;
    margin: 2px 8px;
    overflow: hidden;
}

/* Animated hover background with gradient */
[b-89z3jnf23b] .mud-drawer .mud-nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(236, 64, 122, 0.1) 50%,
            transparent 100%);
    transition: left 0.5s ease;
    z-index: 0;
}

[b-89z3jnf23b] .mud-drawer .mud-nav-link:hover::before {
    left: 100%;
}

/* Pink hover state for navigation menu - text only */
[b-89z3jnf23b] .mud-drawer .mud-nav-item:hover .mud-nav-link-text {
    color: #ec407a !important;
}

/* Pink hover state for navigation menu - icons */
[b-89z3jnf23b] .mud-drawer .mud-nav-item:hover .mud-nav-link-icon {
    color: #ec407a !important;
    transform: scale(1.15);
}

/* Icon animation */
[b-89z3jnf23b] .mud-drawer .mud-nav-link-icon {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        color 0.2s ease-in-out;
}

/* Active/Selected item - text always pink */
[b-89z3jnf23b] .mud-drawer .mud-nav-link.active .mud-nav-link-text,
[b-89z3jnf23b] .mud-drawer .mud-nav-item.mud-nav-item-active .mud-nav-link-text {
    color: #ec407a !important;
}

/* Active/Selected item - icons always pink with subtle glow */
[b-89z3jnf23b] .mud-drawer .mud-nav-link.active .mud-nav-link-icon,
[b-89z3jnf23b] .mud-drawer .mud-nav-item.mud-nav-item-active .mud-nav-link-icon {
    color: #ec407a !important;
    filter: drop-shadow(0 0 4px rgba(236, 64, 122, 0.5));
}

/* Active item left border accent */
[b-89z3jnf23b] .mud-drawer .mud-nav-link.active,
[b-89z3jnf23b] .mud-drawer .mud-nav-link[aria-current="page"] {
    background: linear-gradient(90deg, rgba(236, 64, 122, 0.15) 0%, transparent 100%);
    border-left: 3px solid #ec407a;
    padding-left: calc(24px - 3px);
}

/* Smooth transition effect */
[b-89z3jnf23b] .mud-drawer .mud-nav-link-text,
[b-89z3jnf23b] .mud-drawer .mud-nav-link-icon {
    transition: color 0.2s ease-in-out;
    position: relative;
    z-index: 1;
}

/* Hover lift effect */
[b-89z3jnf23b] .mud-drawer .mud-nav-link:hover {
    transform: translateX(4px);
    background: rgba(236, 64, 122, 0.08);
}

/* NavGroup title animations */
[b-89z3jnf23b] .mud-drawer .mud-nav-group .mud-nav-group-title {
    transition: all 0.3s ease;
}

[b-89z3jnf23b] .mud-drawer .mud-nav-group:hover .mud-nav-group-title {
    color: var(--mud-palette-secondary);
}

/* Expand/collapse animation for nav groups */
[b-89z3jnf23b] .mud-drawer .mud-collapse-entering,
[b-89z3jnf23b] .mud-drawer .mud-collapse-entered {
    animation: slideDown-b-89z3jnf23b 0.3s ease-out;
}

@keyframes slideDown-b-89z3jnf23b {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Divider styling */
[b-89z3jnf23b] .mud-drawer .mud-divider {
    opacity: 0.3;
    margin: 8px 16px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(236, 64, 122, 0.3) 50%,
            transparent 100%);
}

/* Chip animations in menu */
[b-89z3jnf23b] .mud-drawer .mud-chip {
    transition: all 0.3s ease;
}

[b-89z3jnf23b] .mud-drawer .mud-nav-link:hover .mud-chip {
    transform: scale(1.1);
}

[b-89z3jnf23b] .mud-appbar .mud-select,
[b-89z3jnf23b] .mud-appbar .mud-input {
    color: inherit !important;
}

main[b-89z3jnf23b] {
    flex: 1;
}

.navbar-brand[b-89z3jnf23b] {
    font-size: 1.1rem;
    color: white;
}

@media (max-width: 640.98px) {
    .notificationButton[b-89z3jnf23b] {
        margin-right: 0 !important;
    }
}

.headerButtonLogged[b-89z3jnf23b] {
    display: none !important;
}

@media (min-width: 641px) {
    .headerButtonLogged[b-89z3jnf23b] {
        display: flex !important;
    }
}
/* /Components/Management/FileManager.razor.rz.scp.css */
/* FileManager.razor.css */

/* Custom styling for filter inputs */
[b-08cfrwvvxf] .filter-input .mud-input-outlined {
    border-radius: 50px !important; /* Makes the input oval */
}

[b-08cfrwvvxf] .filter-input .mud-input-outlined-border {
    transition: border-color 0.2s ease-in-out;
}

/* Pink (Secondary) border on hover */
[b-08cfrwvvxf] .filter-input.mud-input-control:hover .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--mud-palette-secondary) !important;
}

/* Pink (Secondary) border on focus */
[b-08cfrwvvxf] .filter-input .mud-input-root.mud-input-focused .mud-input-outlined-border {
    border-color: var(--mud-palette-secondary) !important;
    border-width: 2px;
}

/* Adornment icon color matches focus color when focused */
[b-08cfrwvvxf] .filter-input .mud-input-root.mud-input-focused .mud-input-adornment {
    color: var(--mud-palette-secondary) !important;
}

/* Smooth transitions for all interactive elements */
[b-08cfrwvvxf] .mud-button,
[b-08cfrwvvxf] .mud-chip,
[b-08cfrwvvxf] .mud-card {
    transition: all 0.2s ease-in-out !important;
}

    /* Enhanced hover effects for cards */
    [b-08cfrwvvxf] .mud-card:hover {
        box-shadow: 0 8px 16px rgba(0,0,0,0.1) !important;
    }

/* Enhanced table row hover effects */
[b-08cfrwvvxf] .mud-table-row:hover {
    background-color: var(--mud-palette-background-gray) !important;
}

/* Smooth expansion animations */
[b-08cfrwvvxf] .mud-collapse-container {
    transition: height 0.3s ease-in-out !important;
}

/* Enhanced chip hover effects */
[b-08cfrwvvxf] .mud-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Button hover enhancements */
[b-08cfrwvvxf] .mud-button-filled-primary:hover {
    box-shadow: 0 4px 8px rgba(var(--mud-palette-primary-rgb), 0.3) !important;
    transform: translateY(-1px);
}

[b-08cfrwvvxf] .mud-button-text-secondary:hover {
    background-color: rgba(var(--mud-palette-secondary-rgb), 0.05) !important;
}

/* Icon button hover with secondary accent */
[b-08cfrwvvxf] .mud-icon-button:hover {
    background-color: rgba(var(--mud-palette-secondary-rgb), 0.08) !important;
}

/* Enhanced avatar hover effect */
[b-08cfrwvvxf] .mud-avatar:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease-in-out;
}

/* Improved focus states for accessibility */
[b-08cfrwvvxf] *:focus-visible {
    outline: 2px solid var(--mud-palette-secondary);
    outline-offset: 2px;
}

/* Pagination controls styling */
[b-08cfrwvvxf] .mud-pagination-item {
    transition: all 0.2s ease-in-out;
}

    [b-08cfrwvvxf] .mud-pagination-item:hover:not(.mud-disabled) {
        transform: scale(1.1);
    }

/* Table styling enhancements */
[b-08cfrwvvxf] .mud-table {
    border-radius: 8px;
    overflow: hidden;
}

[b-08cfrwvvxf] .mud-table-head {
    background-color: var(--mud-palette-background-gray);
}

[b-08cfrwvvxf] .mud-table-cell {
    padding: 12px 16px;
}

/* Progress indicators */
[b-08cfrwvvxf] .mud-progress-circular {
    animation: pulse-b-08cfrwvvxf 1.5s ease-in-out infinite;
}

@keyframes pulse-b-08cfrwvvxf {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }

    100% {
        opacity: 1;
    }
}

/* File type chip colors */
[b-08cfrwvvxf] .file-type-pdf {
    background-color: rgba(var(--mud-palette-secondary-rgb), 0.1) !important;
    color: var(--mud-palette-secondary) !important;
}

[b-08cfrwvvxf] .file-type-doc {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.1) !important;
    color: var(--mud-palette-primary) !important;
}

/* Selected files highlight */
[b-08cfrwvvxf] .mud-table-row.mud-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.05) !important;
}

/* Card header actions alignment */
[b-08cfrwvvxf] .mud-card-header-actions {
    align-items: center;
    gap: 8px;
}

/* Stats section styling */
[b-08cfrwvvxf] .stats-container {
    background: linear-gradient(135deg, var(--mud-palette-background-gray) 0%, var(--mud-palette-background) 100%);
    border-radius: 12px;
}

/* Drag and drop area */
[b-08cfrwvvxf] .drop-zone {
    border: 2px dashed var(--mud-palette-lines);
    border-radius: 12px;
    transition: all 0.3s ease;
}

    [b-08cfrwvvxf] .drop-zone.drag-over {
        border-color: var(--mud-palette-primary);
        background-color: rgba(var(--mud-palette-primary-rgb), 0.05);
    }

/* Empty state styling */
[b-08cfrwvvxf] .empty-state {
    padding: 48px;
    text-align: center;
    border: 1px dashed var(--mud-palette-lines);
    border-radius: 12px;
    background-color: var(--mud-palette-background-gray);
}

/* Upload button prominence */
[b-08cfrwvvxf] .upload-button-primary {
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-darken) 100%);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    font-weight: 600;
    transition: all 0.3s ease;
}

    [b-08cfrwvvxf] .upload-button-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    }

/* Responsive adjustments */
@media (max-width: 960px) {
    [b-08cfrwvvxf] .mud-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    [b-08cfrwvvxf] .mud-card-header-actions {
        margin-top: 16px;
        width: 100%;
        justify-content: flex-end;
    }

    [b-08cfrwvvxf] .filter-input {
        margin-bottom: 8px;
    }
}

/* Loading skeleton animation */
[b-08cfrwvvxf] .skeleton-loader {
    background: linear-gradient(90deg, var(--mud-palette-background-gray) 25%, var(--mud-palette-background) 50%, var(--mud-palette-background-gray) 75%);
    background-size: 200% 100%;
    animation: loading-b-08cfrwvvxf 1.5s infinite;
}

@keyframes loading-b-08cfrwvvxf {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Custom scrollbar styling */
[b-08cfrwvvxf] .mud-table-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[b-08cfrwvvxf] .mud-table-container::-webkit-scrollbar-track {
    background: var(--mud-palette-background-gray);
    border-radius: 4px;
}

[b-08cfrwvvxf] .mud-table-container::-webkit-scrollbar-thumb {
    background: var(--mud-palette-lines);
    border-radius: 4px;
}

    [b-08cfrwvvxf] .mud-table-container::-webkit-scrollbar-thumb:hover {
        background: var(--mud-palette-secondary);
    }

/* Status chip animations */
[b-08cfrwvvxf] .status-chip-indexing {
    animation: pulse-border-b-08cfrwvvxf 1.5s infinite;
}

@keyframes pulse-border-b-08cfrwvvxf {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--mud-palette-secondary-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(var(--mud-palette-secondary-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--mud-palette-secondary-rgb), 0);
    }
}
/* /Components/Management/MembersManage.razor.rz.scp.css */
/* MembersManage.razor.css - Enhanced Styling */

/* Filter inputs with smooth transitions */
[b-fi12ik89sb] .filter-input .mud-input-outlined {
    border-radius: 8px !important;
    transition: all 0.2s ease-in-out;
}

[b-fi12ik89sb] .filter-input .mud-input-outlined-border {
    transition: border-color 0.2s ease-in-out;
}

/* Secondary color on hover */
[b-fi12ik89sb] .filter-input.mud-input-control:hover .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--mud-palette-secondary) !important;
}

/* Secondary color on focus */
[b-fi12ik89sb] .filter-input .mud-input-root.mud-input-focused .mud-input-outlined-border {
    border-color: var(--mud-palette-secondary) !important;
    border-width: 2px;
}

[b-fi12ik89sb] .filter-input .mud-input-root.mud-input-focused .mud-input-adornment {
    color: var(--mud-palette-secondary) !important;
}

/* Action buttons with gradient and shadow */
[b-fi12ik89sb] .primary-action {
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-darken) 100%) !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

    [b-fi12ik89sb] .primary-action:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important;
    }

[b-fi12ik89sb] .action-button {
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

    [b-fi12ik89sb] .action-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

/* Enhanced table styling */
[b-fi12ik89sb] .member-table .mud-table {
    border-radius: 12px;
    overflow: hidden;
}

[b-fi12ik89sb] .member-table .mud-table-head {
    background-color: var(--mud-palette-background-gray);
}

[b-fi12ik89sb] .member-table .mud-table-row:hover {
    background-color: var(--mud-palette-background-gray) !important;
    transition: background-color 0.2s ease;
}

[b-fi12ik89sb] .member-table .mud-table-cell {
    padding: 16px;
}

/* Avatar hover animation */
[b-fi12ik89sb] .avatar-hover {
    transition: transform 0.2s ease-in-out;
    cursor: pointer;
}

    [b-fi12ik89sb] .avatar-hover:hover {
        transform: scale(1.1);
    }

/* Chip hover effects */
[b-fi12ik89sb] .role-chip,
[b-fi12ik89sb] .org-role-chip {
    transition: all 0.2s ease-in-out;
    cursor: default;
}

    [b-fi12ik89sb] .role-chip:hover,
    [b-fi12ik89sb] .org-role-chip:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

/* Action icon buttons */
[b-fi12ik89sb] .action-icon-btn {
    transition: all 0.2s ease-in-out;
}

    [b-fi12ik89sb] .action-icon-btn:hover {
        transform: scale(1.1);
        background-color: rgba(var(--mud-palette-secondary-rgb), 0.08) !important;
    }

/* Invitation cards with smooth hover */
[b-fi12ik89sb] .invitation-card {
    transition: all 0.3s ease;
    border-radius: 12px;
}

    [b-fi12ik89sb] .invitation-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.1) !important;
    }

/* Empty state styling */
[b-fi12ik89sb] .empty-state {
    border: 1px dashed var(--mud-palette-table-lines);
    border-radius: 12px;
    background-color: var(--mud-palette-background-gray);
}

/* Revoke button */
[b-fi12ik89sb] .revoke-button {
    transition: all 0.2s ease-in-out;
}

    [b-fi12ik89sb] .revoke-button:hover {
        background-color: rgba(var(--mud-palette-secondary-rgb), 0.08) !important;
    }

/* Stats section animations */
[b-fi12ik89sb] .stat-item {
    transition: transform 0.3s ease;
}

    [b-fi12ik89sb] .stat-item:hover {
        transform: scale(1.05);
    }

/* Badge animations */
[b-fi12ik89sb] .mud-badge {
    animation: fadeInScale-b-fi12ik89sb 0.5s ease-out;
}

@keyframes fadeInScale-b-fi12ik89sb {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Smooth transitions for all interactive elements */
[b-fi12ik89sb] .mud-button,
[b-fi12ik89sb] .mud-chip,
[b-fi12ik89sb] .mud-card,
[b-fi12ik89sb] .mud-icon-button {
    transition: all 0.2s ease-in-out !important;
}

/* Enhanced tab styling */
[b-fi12ik89sb] .mud-tabs-panels {
    border-radius: 12px;
    overflow: hidden;
}

[b-fi12ik89sb] .mud-tab {
    transition: all 0.2s ease-in-out;
}

    [b-fi12ik89sb] .mud-tab:hover {
        background-color: rgba(var(--mud-palette-primary-rgb), 0.05);
    }

/* Progress linear animation */
[b-fi12ik89sb] .mud-progress-linear {
    border-radius: 4px;
    overflow: hidden;
}

/* Custom scrollbar */
[b-fi12ik89sb] .mud-table-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[b-fi12ik89sb] .mud-table-container::-webkit-scrollbar-track {
    background: var(--mud-palette-background-gray);
    border-radius: 4px;
}

[b-fi12ik89sb] .mud-table-container::-webkit-scrollbar-thumb {
    background: var(--mud-palette-lines);
    border-radius: 4px;
}

    [b-fi12ik89sb] .mud-table-container::-webkit-scrollbar-thumb:hover {
        background: var(--mud-palette-secondary);
    }

/* Loading skeleton shimmer */
[b-fi12ik89sb] .mud-skeleton {
    animation: shimmer-b-fi12ik89sb 2s infinite;
    background: linear-gradient( 90deg, var(--mud-palette-background-gray) 0%, rgba(255, 255, 255, 0.1) 50%, var(--mud-palette-background-gray) 100% );
    background-size: 200% 100%;
}

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

    100% {
        background-position: 200% 0;
    }
}

/* Pagination controls */
[b-fi12ik89sb] .mud-pagination-item {
    transition: all 0.2s ease-in-out;
}

    [b-fi12ik89sb] .mud-pagination-item:hover:not(.mud-disabled) {
        transform: scale(1.1);
    }

    [b-fi12ik89sb] .mud-pagination-item.mud-selected {
        background-color: var(--mud-palette-primary);
        color: white;
    }

/* Enhanced focus states for accessibility */
[b-fi12ik89sb] *:focus-visible {
    outline: 2px solid var(--mud-palette-secondary);
    outline-offset: 2px;
}

/* Link hover effects */
[b-fi12ik89sb] .mud-link {
    transition: color 0.2s ease-in-out;
}

    [b-fi12ik89sb] .mud-link:hover {
        color: var(--mud-palette-primary-darken);
    }

/* Card header actions */
[b-fi12ik89sb] .mud-card-header-actions {
    align-items: center;
    gap: 8px;
}

/* Tooltip styling */
[b-fi12ik89sb] .mud-tooltip {
    background-color: var(--mud-palette-dark);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 0.875rem;
}

/* Snackbar animations */
[b-fi12ik89sb] .mud-snackbar {
    animation: slideInRight-b-fi12ik89sb 0.3s ease-out;
}

@keyframes slideInRight-b-fi12ik89sb {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Dialog entrance animation */
[b-fi12ik89sb] .mud-dialog {
    animation: fadeInUp-b-fi12ik89sb 0.3s ease-out;
}

@keyframes fadeInUp-b-fi12ik89sb {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments */
@media (max-width: 960px) {
    [b-fi12ik89sb] .stat-item {
        margin-bottom: 1rem;
    }

    [b-fi12ik89sb] .action-button {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    [b-fi12ik89sb] .mud-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    [b-fi12ik89sb] .mud-card-header-actions {
        margin-top: 16px;
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 600px) {
    [b-fi12ik89sb] .filter-input {
        margin-bottom: 8px;
    }

    [b-fi12ik89sb] .stat-item {
        padding: 8px;
    }
}

/* Improved mobile experience */
@media (max-width: 960px) {
    [b-fi12ik89sb] .mud-table {
        font-size: 0.875rem;
    }

    [b-fi12ik89sb] .mud-table-cell {
        padding: 12px 8px;
    }

    [b-fi12ik89sb] .action-button {
        font-size: 0.875rem;
        padding: 8px 16px;
    }
}

/* Print styles */
@media print {
    [b-fi12ik89sb] .action-button,
    [b-fi12ik89sb] .action-icon-btn,
    [b-fi12ik89sb] .revoke-button {
        display: none !important;
    }

    [b-fi12ik89sb] .member-table .mud-table-row:hover {
        background-color: transparent !important;
    }
}
/* /Components/Management/OrganizationalRolesManage.razor.rz.scp.css */
/* OrganizationalRolesManage.razor.css - Enhanced Styling */

/* Filter inputs with smooth transitions */
[b-bjsjqtn4bz] .filter-input .mud-input-outlined {
    border-radius: 8px !important;
    transition: all 0.2s ease-in-out;
}

[b-bjsjqtn4bz] .filter-input .mud-input-outlined-border {
    transition: border-color 0.2s ease-in-out;
}

/* Secondary color on hover */
[b-bjsjqtn4bz] .filter-input.mud-input-control:hover .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--mud-palette-secondary) !important;
}

/* Secondary color on focus */
[b-bjsjqtn4bz] .filter-input .mud-input-root.mud-input-focused .mud-input-outlined-border {
    border-color: var(--mud-palette-secondary) !important;
    border-width: 2px;
}

[b-bjsjqtn4bz] .filter-input .mud-input-root.mud-input-focused .mud-input-adornment {
    color: var(--mud-palette-secondary) !important;
}

/* Action buttons with gradient and shadow */
[b-bjsjqtn4bz] .primary-action {
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-darken) 100%) !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

    [b-bjsjqtn4bz] .primary-action:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important;
    }

[b-bjsjqtn4bz] .action-button {
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

    [b-bjsjqtn4bz] .action-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

/* Role cards with smooth hover */
[b-bjsjqtn4bz] .role-card {
    transition: all 0.3s ease;
    border-radius: 12px;
}

    [b-bjsjqtn4bz] .role-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.1) !important;
    }

/* Level chip hover */
[b-bjsjqtn4bz] .level-chip {
    transition: all 0.2s ease-in-out;
}

    [b-bjsjqtn4bz] .level-chip:hover {
        transform: scale(1.05);
    }

/* Card action button */
[b-bjsjqtn4bz] .card-action-btn {
    transition: all 0.2s ease-in-out;
}

    [b-bjsjqtn4bz] .card-action-btn:hover {
        background-color: rgba(var(--mud-palette-primary-rgb), 0.08) !important;
    }

/* User count badge */
[b-bjsjqtn4bz] .user-count-badge {
    transition: all 0.2s ease-in-out;
}

    [b-bjsjqtn4bz] .user-count-badge:hover {
        transform: scale(1.1);
    }

/* Menu button */
[b-bjsjqtn4bz] .menu-button {
    transition: all 0.2s ease-in-out;
}

    [b-bjsjqtn4bz] .menu-button:hover {
        background-color: rgba(var(--mud-palette-secondary-rgb), 0.08) !important;
    }

/* Level progress bar */
[b-bjsjqtn4bz] .level-progress {
    transition: all 0.3s ease;
}

    [b-bjsjqtn4bz] .level-progress:hover {
        transform: scaleY(1.1);
    }

/* Enhanced table styling */
[b-bjsjqtn4bz] .user-assignments-table .mud-table {
    border-radius: 12px;
    overflow: hidden;
}

[b-bjsjqtn4bz] .user-assignments-table .mud-table-head {
    background-color: var(--mud-palette-background-gray);
}

[b-bjsjqtn4bz] .user-assignments-table .mud-table-row:hover {
    background-color: var(--mud-palette-background-gray) !important;
    transition: background-color 0.2s ease;
}

[b-bjsjqtn4bz] .user-assignments-table .mud-table-cell {
    padding: 16px;
}

/* Avatar hover animation */
[b-bjsjqtn4bz] .avatar-hover {
    transition: transform 0.2s ease-in-out;
    cursor: pointer;
}

    [b-bjsjqtn4bz] .avatar-hover:hover {
        transform: scale(1.1);
    }

/* Role chip hover effects */
[b-bjsjqtn4bz] .role-chip {
    transition: all 0.2s ease-in-out;
    cursor: default;
}

    [b-bjsjqtn4bz] .role-chip:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

/* Action icon buttons */
[b-bjsjqtn4bz] .action-icon-btn {
    transition: all 0.2s ease-in-out;
}

    [b-bjsjqtn4bz] .action-icon-btn:hover {
        transform: scale(1.1);
        background-color: rgba(var(--mud-palette-secondary-rgb), 0.08) !important;
    }

/* Empty state styling */
[b-bjsjqtn4bz] .empty-state {
    border: 1px dashed var(--mud-palette-table-lines);
    border-radius: 12px;
    background-color: var(--mud-palette-background-gray);
}

/* Stats section animations */
[b-bjsjqtn4bz] .stat-item {
    transition: transform 0.3s ease;
}

    [b-bjsjqtn4bz] .stat-item:hover {
        transform: scale(1.05);
    }

/* Smooth transitions for all interactive elements */
[b-bjsjqtn4bz] .mud-button,
[b-bjsjqtn4bz] .mud-chip,
[b-bjsjqtn4bz] .mud-card,
[b-bjsjqtn4bz] .mud-icon-button {
    transition: all 0.2s ease-in-out !important;
}

/* Enhanced tab styling */
[b-bjsjqtn4bz] .mud-tabs-panels {
    border-radius: 12px;
    overflow: hidden;
}

[b-bjsjqtn4bz] .mud-tab {
    transition: all 0.2s ease-in-out;
}

    [b-bjsjqtn4bz] .mud-tab:hover {
        background-color: rgba(var(--mud-palette-primary-rgb), 0.05);
    }

/* Progress linear animation */
[b-bjsjqtn4bz] .mud-progress-linear {
    border-radius: 4px;
    overflow: hidden;
}

/* Custom scrollbar */
[b-bjsjqtn4bz] .mud-table-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[b-bjsjqtn4bz] .mud-table-container::-webkit-scrollbar-track {
    background: var(--mud-palette-background-gray);
    border-radius: 4px;
}

[b-bjsjqtn4bz] .mud-table-container::-webkit-scrollbar-thumb {
    background: var(--mud-palette-lines);
    border-radius: 4px;
}

    [b-bjsjqtn4bz] .mud-table-container::-webkit-scrollbar-thumb:hover {
        background: var(--mud-palette-secondary);
    }

/* Loading skeleton shimmer */
[b-bjsjqtn4bz] .mud-skeleton {
    animation: shimmer-b-bjsjqtn4bz 2s infinite;
    background: linear-gradient( 90deg, var(--mud-palette-background-gray) 0%, rgba(255, 255, 255, 0.1) 50%, var(--mud-palette-background-gray) 100% );
    background-size: 200% 100%;
}

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

    100% {
        background-position: 200% 0;
    }
}

/* Pagination controls */
[b-bjsjqtn4bz] .mud-pagination-item {
    transition: all 0.2s ease-in-out;
}

    [b-bjsjqtn4bz] .mud-pagination-item:hover:not(.mud-disabled) {
        transform: scale(1.1);
    }

    [b-bjsjqtn4bz] .mud-pagination-item.mud-selected {
        background-color: var(--mud-palette-primary);
        color: white;
    }

/* Enhanced focus states for accessibility */
[b-bjsjqtn4bz] *:focus-visible {
    outline: 2px solid var(--mud-palette-secondary);
    outline-offset: 2px;
}

/* Link hover effects */
[b-bjsjqtn4bz] .mud-link {
    transition: color 0.2s ease-in-out;
}

    [b-bjsjqtn4bz] .mud-link:hover {
        color: var(--mud-palette-primary-darken);
    }

/* Card header actions */
[b-bjsjqtn4bz] .mud-card-header-actions {
    align-items: center;
    gap: 8px;
}

/* Tooltip styling */
[b-bjsjqtn4bz] .mud-tooltip {
    background-color: var(--mud-palette-dark);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 0.875rem;
}

/* Badge animations */
[b-bjsjqtn4bz] .mud-badge {
    animation: fadeInScale-b-bjsjqtn4bz 0.5s ease-out;
}

@keyframes fadeInScale-b-bjsjqtn4bz {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Snackbar animations */
[b-bjsjqtn4bz] .mud-snackbar {
    animation: slideInRight-b-bjsjqtn4bz 0.3s ease-out;
}

@keyframes slideInRight-b-bjsjqtn4bz {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Dialog entrance animation */
[b-bjsjqtn4bz] .mud-dialog {
    animation: fadeInUp-b-bjsjqtn4bz 0.3s ease-out;
}

@keyframes fadeInUp-b-bjsjqtn4bz {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Card grid spacing */
[b-bjsjqtn4bz] .mud-grid-item {
    transition: all 0.3s ease;
}

/* Menu items hover */
[b-bjsjqtn4bz] .mud-menu-item {
    transition: all 0.2s ease-in-out;
}

    [b-bjsjqtn4bz] .mud-menu-item:hover {
        background-color: rgba(var(--mud-palette-primary-rgb), 0.08) !important;
    }

/* Progress bar in cards */
[b-bjsjqtn4bz] .mud-card .mud-progress-linear {
    margin-top: 8px;
}

/* Responsive adjustments */
@media (max-width: 960px) {
    [b-bjsjqtn4bz] .stat-item {
        margin-bottom: 1rem;
    }

    [b-bjsjqtn4bz] .action-button {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    [b-bjsjqtn4bz] .mud-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    [b-bjsjqtn4bz] .mud-card-header-actions {
        margin-top: 16px;
        width: 100%;
        justify-content: flex-end;
    }

    [b-bjsjqtn4bz] .role-card {
        margin-bottom: 1rem;
    }
}

@media (max-width: 600px) {
    [b-bjsjqtn4bz] .filter-input {
        margin-bottom: 8px;
    }

    [b-bjsjqtn4bz] .stat-item {
        padding: 8px;
    }

    [b-bjsjqtn4bz] .mud-card-content {
        padding: 12px;
    }
}

/* Improved mobile experience */
@media (max-width: 960px) {
    [b-bjsjqtn4bz] .mud-table {
        font-size: 0.875rem;
    }

    [b-bjsjqtn4bz] .mud-table-cell {
        padding: 12px 8px;
    }

    [b-bjsjqtn4bz] .action-button {
        font-size: 0.875rem;
        padding: 8px 16px;
    }
}

/* Print styles */
@media print {
    [b-bjsjqtn4bz] .action-button,
    [b-bjsjqtn4bz] .action-icon-btn,
    [b-bjsjqtn4bz] .menu-button,
    [b-bjsjqtn4bz] .card-action-btn {
        display: none !important;
    }

    [b-bjsjqtn4bz] .role-card,
    [b-bjsjqtn4bz] .user-assignments-table .mud-table-row {
        break-inside: avoid;
    }

        [b-bjsjqtn4bz] .role-card:hover,
        [b-bjsjqtn4bz] .user-assignments-table .mud-table-row:hover {
            background-color: transparent !important;
            transform: none !important;
            box-shadow: none !important;
        }
}

/* Staggered animation for role cards */
[b-bjsjqtn4bz] .role-card {
    animation: fadeInUp-b-bjsjqtn4bz 0.5s ease-out;
}

    [b-bjsjqtn4bz] .role-card:nth-child(1) {
        animation-delay: 0.1s;
    }

    [b-bjsjqtn4bz] .role-card:nth-child(2) {
        animation-delay: 0.2s;
    }

    [b-bjsjqtn4bz] .role-card:nth-child(3) {
        animation-delay: 0.3s;
    }

    [b-bjsjqtn4bz] .role-card:nth-child(4) {
        animation-delay: 0.4s;
    }

    [b-bjsjqtn4bz] .role-card:nth-child(5) {
        animation-delay: 0.5s;
    }

    [b-bjsjqtn4bz] .role-card:nth-child(6) {
        animation-delay: 0.6s;
    }

@keyframes fadeInUp-b-bjsjqtn4bz {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/Shared/AnalysisProgressDisplay.razor.rz.scp.css */
/*
 * AnalysisProgressDisplay.razor.css
 * Shared styles for multi-step progress display
 * Used by AI Architect and TestCase Floorplan
 */

/* ============================================
   Progress Container
   ============================================ */
.progress-container[b-7tk52sdujd] {
    background: white;
    border-radius: 16px;
    padding: 3rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* ============================================
   Multi-Step Progress Indicator
   ============================================ */
.steps-progress[b-7tk52sdujd] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    margin: 2rem auto;
    max-width: 900px;
    flex-wrap: wrap;
    padding: 0 1rem;
}

.step-item[b-7tk52sdujd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 80px;
    opacity: 0.4;
    transition: all 0.3s ease;
}

.step-item.active[b-7tk52sdujd] {
    opacity: 1;
}

.step-item.completed[b-7tk52sdujd] {
    opacity: 1;
}

.step-item.pending[b-7tk52sdujd] {
    opacity: 0.4;
}

.step-indicator[b-7tk52sdujd] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    transition: all 0.3s ease;
    border: 3px solid transparent;
}

/* Completed step - white background with secondary (orange) checkmark */
.step-item.completed .step-indicator[b-7tk52sdujd] {
    background: white !important;
    border: 3px solid var(--mud-palette-secondary) !important;
    color: var(--mud-palette-secondary) !important;
}

.step-item.active .step-indicator[b-7tk52sdujd] {
    background: var(--mud-palette-primary);
    box-shadow: 0 0 0 4px rgba(26, 95, 180, 0.25);
    animation: step-pulse-b-7tk52sdujd 1.5s infinite;
}

/* Ensure spinner in active state is visible (secondary/orange color) */
.step-item.active .step-indicator[b-7tk52sdujd]  .mud-progress-circular {
    color: var(--mud-palette-secondary) !important;
}

.step-item.pending .step-indicator[b-7tk52sdujd] {
    background: #e0e0e0;
    color: #999;
}

@keyframes step-pulse-b-7tk52sdujd {

    0%,
    100% {
        box-shadow: 0 0 0 4px rgba(26, 95, 180, 0.25);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(26, 95, 180, 0.1);
    }
}

.step-content[b-7tk52sdujd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.step-number[b-7tk52sdujd] {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.step-item.completed .step-number[b-7tk52sdujd] {
    color: var(--mud-palette-secondary);
}

.step-item.pending .step-number[b-7tk52sdujd] {
    color: #999;
}

.step-name[b-7tk52sdujd] {
    font-size: 0.7rem;
    color: #666;
    max-width: 80px;
    line-height: 1.2;
}

.step-connector[b-7tk52sdujd] {
    width: 30px;
    height: 3px;
    background: #e0e0e0;
    margin-top: 22px;
    transition: background 0.3s ease;
}

.step-connector.completed[b-7tk52sdujd] {
    background: var(--mud-palette-secondary);
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 960px) {
    .steps-progress[b-7tk52sdujd] {
        gap: 0.5rem;
    }

    .step-item[b-7tk52sdujd] {
        min-width: 60px;
    }

    .step-indicator[b-7tk52sdujd] {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .step-connector[b-7tk52sdujd] {
        width: 20px;
        margin-top: 18px;
    }

    .progress-container[b-7tk52sdujd] {
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 600px) {
    .steps-progress[b-7tk52sdujd] {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .step-item[b-7tk52sdujd] {
        flex-direction: row;
        min-width: auto;
        gap: 1rem;
        padding: 0.5rem 0;
    }

    .step-content[b-7tk52sdujd] {
        align-items: flex-start;
        text-align: left;
    }

    .step-connector[b-7tk52sdujd] {
        display: none;
    }

    .step-indicator[b-7tk52sdujd] {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
}

/* ============================================
   Reduced Motion Support
   ============================================ */
@media (prefers-reduced-motion: reduce) {

    .step-indicator[b-7tk52sdujd],
    .step-item[b-7tk52sdujd],
    .step-connector[b-7tk52sdujd] {
        transition: none !important;
    }

    .step-item.active .step-indicator[b-7tk52sdujd] {
        animation: none !important;
    }
}
/* /Components/Workflows/WorkflowBuilderComponent.razor.rz.scp.css */
.workflow-builder-container[b-gqpsafwa8b] {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .workflow-builder-container > .mud-card:first-child[b-gqpsafwa8b] {
        flex-shrink: 0;
    }

    .workflow-builder-container > .mud-divider[b-gqpsafwa8b] {
        flex-shrink: 0;
    }

.workflow-main-wrapper[b-gqpsafwa8b] {
    flex: 1;
    min-height: 0;
    max-height: calc(100vh - 350px);
    display: flex;
    gap: 16px;
    overflow: hidden;
    position: relative;
}

.sidebar-wrapper[b-gqpsafwa8b] {
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible;
    z-index: 20;
}

    .sidebar-wrapper.expanded[b-gqpsafwa8b] {
        flex: 0 0 25%;
        min-width: 320px;
        max-width: 400px;
    }

    .sidebar-wrapper.collapsed[b-gqpsafwa8b] {
        flex: 0 0 80px;
        min-width: 80px;
        max-width: 80px;
    }

.canvas-wrapper[b-gqpsafwa8b] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: canvasExpand-b-gqpsafwa8b 0.4s ease-out;
}

    .canvas-wrapper.expanded[b-gqpsafwa8b] {
        margin-left: 0;
    }

    .canvas-wrapper.collapsed-sidebar[b-gqpsafwa8b] {
        margin-left: 0;
    }

@keyframes canvasExpand-b-gqpsafwa8b {
    from {
        opacity: 0.95;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.workflow-builder-container > .mud-grid:last-child[b-gqpsafwa8b] {
    flex-shrink: 0;
    margin-top: auto;
}

@media (max-width: 960px) {
    .workflow-builder-container[b-gqpsafwa8b] {
        padding: 8px !important;
    }

    .workflow-main-wrapper[b-gqpsafwa8b] {
        flex-direction: column;
        max-height: calc(100vh - 400px);
    }

    .sidebar-wrapper.expanded[b-gqpsafwa8b] {
        flex: 0 0 auto;
        max-height: 250px;
        min-width: 100%;
        max-width: 100%;
        margin-bottom: 16px;
    }

    .sidebar-wrapper.collapsed[b-gqpsafwa8b] {
        flex: 0 0 60px;
        max-height: 60px;
        min-width: 100%;
        max-width: 100%;
    }

    .canvas-wrapper[b-gqpsafwa8b] {
        min-height: 300px;
        max-height: 400px;
    }
}

.sidebar-wrapper > *[b-gqpsafwa8b] {
    width: 100%;
    height: 100%;
}

.sidebar-wrapper.collapsed + .canvas-wrapper[b-gqpsafwa8b] {
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.05);
}

@keyframes pulseCanvas-b-gqpsafwa8b {
    0% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.2);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(99, 102, 241, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
    }
}

.canvas-wrapper.transitioning[b-gqpsafwa8b] {
    animation: pulseCanvas-b-gqpsafwa8b 0.6s ease-out;
}

/* Unsaved changes indicator */
.mud-chip.mud-chip-color-warning[b-gqpsafwa8b] {
    animation: pulse-warning-b-gqpsafwa8b 2s infinite;
}

@keyframes pulse-warning-b-gqpsafwa8b {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* Animace pro běžící node */
.workflow-node.executing[b-gqpsafwa8b] {
    animation: nodeExecuting-b-gqpsafwa8b 2s infinite;
    border-color: #10B981 !important;
}

@keyframes nodeExecuting-b-gqpsafwa8b {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4), 0 4px 20px rgba(0, 0, 0, 0.08);
    }

    50% {
        box-shadow: 0 0 0 15px rgba(16, 185, 129, 0), 0 4px 20px rgba(0, 0, 0, 0.08);
    }
}

/* Running status badge */
.node-status-badge.running[b-gqpsafwa8b] {
    color: #10B981;
    border-color: #10B981;
    background: rgba(16, 185, 129, 0.1);
    animation: pulse-running-b-gqpsafwa8b 2s infinite;
}

@keyframes pulse-running-b-gqpsafwa8b {
    0%, 100% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 0.7;
        transform: translateX(-50%) scale(1.05);
    }
}

/* Execution indicator - kolečko s animací */
.execution-indicator[b-gqpsafwa8b] {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #10B981;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.execution-pulse[b-gqpsafwa8b] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #10B981;
    animation: executionPulse-b-gqpsafwa8b 1.5s infinite;
}

@keyframes executionPulse-b-gqpsafwa8b {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.3;
        transform: scale(1.8);
    }
}

/* Více výrazný header pro běžící node */
.workflow-node.executing .node-header[b-gqpsafwa8b] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-bottom: 1px solid rgba(16, 185, 129, 0.2);
}

/* Animovaný okraj pro node porty při běhu */
.workflow-node.executing .port[b-gqpsafwa8b] {
    animation: portGlow-b-gqpsafwa8b 2s infinite;
}

@keyframes portGlow-b-gqpsafwa8b {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    50% {
        box-shadow: 0 0 15px rgba(16, 185, 129, 0.8);
    }
}

.sidebar-wrapper[b-gqpsafwa8b] {
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible;
    z-index: 20;
}

    .sidebar-wrapper.expanded[b-gqpsafwa8b] {
        flex: 0 0 25%;
        min-width: 320px;
        max-width: 400px;
    }

    .sidebar-wrapper.collapsed[b-gqpsafwa8b] {
        flex: 0 0 80px;
        min-width: 80px;
        max-width: 80px;
    }

.canvas-wrapper[b-gqpsafwa8b] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: canvasExpand-b-gqpsafwa8b 0.4s ease-out;
}

/* Logs toggle button styles */
.logs-toggle-button[b-gqpsafwa8b] {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 900;
    animation: slideInLeft-b-gqpsafwa8b 0.3s ease-out;
}

@keyframes slideInLeft-b-gqpsafwa8b {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.logs-fab[b-gqpsafwa8b] {
    box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: visible;
}

    .logs-fab:hover[b-gqpsafwa8b] {
        transform: scale(1.1);
        box-shadow: 0 12px 28px rgba(0,0,0,0.25) !important;
    }

.logs-badge[b-gqpsafwa8b] {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
}

.executing-pulse[b-gqpsafwa8b] {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 12px;
    height: 12px;
    background: #10B981;
    border-radius: 50%;
    animation: pulse-b-gqpsafwa8b 1.5s infinite;
    z-index: 10;
}

@keyframes pulse-b-gqpsafwa8b {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.3;
        transform: scale(1.8);
    }
}

/* Mobile responsive adjustments */
@media (max-width: 960px) {
    .logs-toggle-button[b-gqpsafwa8b] {
        bottom: 16px;
        left: 16px;
    }

    .logs-fab[b-gqpsafwa8b] {
        width: 48px !important;
        height: 48px !important;
    }
}