@import '_content/Z.Blazor.Diagrams/Z.Blazor.Diagrams.ezdqu7jd9f.bundle.scp.css';

/* /Components/AI/Chat.razor.rz.scp.css */
.chat-container[b-6t95nrrfey] {
    display: flex;
    flex-direction: column;
    height: 70vh;
}

.chat-messages[b-6t95nrrfey] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.message[b-6t95nrrfey] {
    max-width: 80%;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    position: relative;
    margin-bottom: 1rem;
}

.user-message[b-6t95nrrfey] {
    align-self: flex-end;
    background-color: #007bff;
    color: white;
    border-bottom-right-radius: 0.25rem;
}

.assistant-message[b-6t95nrrfey] {
    align-self: flex-start;
    background-color: #f0f2f5;
    color: #212529;
    border-bottom-left-radius: 0.25rem;
}

.message-content[b-6t95nrrfey] {
    word-break: break-word;
    white-space: pre-wrap;
}

.message-timestamp[b-6t95nrrfey] {
    font-size: 0.7rem;
    opacity: 0.7;
    margin-top: 0.25rem;
    text-align: right;
}

.chat-input[b-6t95nrrfey] {
    margin-top: auto;
    padding: 1rem 0 0 0;
    border-top: 1px solid #dee2e6;
}

/* Modal styles */
.modal-backdrop[b-6t95nrrfey] {
    opacity: 0.5;
}
/* /Components/AI/Chat2.razor.rz.scp.css */
/* Chat2 — MCP test chat. Moved from app.css (was global) and bound to the
   active MudBlazor palette so both themes render correctly. */

.chat-container[b-wm2u7wcao5] {
    max-height: 400px;
    overflow-y: auto;
    padding: 1rem 0;
}

.chat-bubble[b-wm2u7wcao5] {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 12px;
    background-color: var(--mud-palette-surface);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.chat-bubble.user[b-wm2u7wcao5] {
    border-left: 4px solid var(--mud-palette-info);
    margin-left: 2rem;
}

.chat-bubble.assistant[b-wm2u7wcao5] {
    border-left: 4px solid var(--mud-palette-success);
    margin-right: 2rem;
}

.chat-bubble.tool[b-wm2u7wcao5] {
    border-left: 4px solid var(--mud-palette-warning);
    margin-left: 1rem;
    margin-right: 1rem;
}

.chat-title[b-wm2u7wcao5] {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--mud-palette-text-primary);
}

.chat-content[b-wm2u7wcao5] {
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.chat-input-container[b-wm2u7wcao5] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 1rem;
    background-color: var(--mud-palette-background-grey);
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
}

.chat-input[b-wm2u7wcao5] {
    flex: 1;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 6px;
    padding: 0.75rem;
    font-size: 1rem;
    outline: none;
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    transition: border-color var(--hm-motion-fast) var(--hm-ease);
}

.chat-input:focus[b-wm2u7wcao5] {
    border-color: var(--mud-palette-primary);
}

.chat-button[b-wm2u7wcao5] {
    padding: 0.75rem 1.5rem;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text, #fff);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    transition: opacity var(--hm-motion-fast) var(--hm-ease);
}

.chat-button:hover:not(:disabled)[b-wm2u7wcao5] {
    opacity: 0.85;
}

.chat-button:disabled[b-wm2u7wcao5] {
    opacity: 0.6;
    cursor: not-allowed;
}

.loading-container[b-wm2u7wcao5] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.loading-ring[b-wm2u7wcao5] {
    border: 4px solid var(--mud-palette-lines-default);
    border-top: 4px solid var(--mud-palette-primary);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: chat-spin-b-wm2u7wcao5 1s linear infinite;
}

@keyframes chat-spin-b-wm2u7wcao5 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.think-summary[b-wm2u7wcao5] {
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
    margin-top: 0.5rem;
}

.think-content[b-wm2u7wcao5] {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background-color: var(--mud-palette-background-grey);
    border-radius: 6px;
    border-left: 3px solid var(--mud-palette-lines-default);
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 0.9rem;
    white-space: pre-wrap;
}

.error-container[b-wm2u7wcao5] {
    margin-top: 1rem;
    padding: 1rem;
    background-color: var(--mud-palette-error-hover, rgba(239, 83, 80, 0.12));
    border: 1px solid var(--mud-palette-error);
    border-radius: 6px;
    color: var(--mud-palette-error);
}

.error-title[b-wm2u7wcao5] {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.error-content[b-wm2u7wcao5] {
    font-family: Consolas, monospace;
    font-size: 0.9rem;
    white-space: pre-wrap;
}
/* /Components/Common/HmTable/HmTable.razor.rz.scp.css */
/* HillMetrics Table Styles */

.hm-table-search[b-0z84a0a2z4] {
    min-width: 250px;
}

/* Custom row highlighting */
[b-0z84a0a2z4] .active-row {
    background-color: rgba(33, 150, 243, 0.08) !important;
}

[b-0z84a0a2z4] .error-row {
    background-color: rgba(244, 67, 54, 0.08) !important;
}

[b-0z84a0a2z4] .success-row {
    background-color: rgba(76, 175, 80, 0.08) !important;
}

[b-0z84a0a2z4] .warning-row {
    background-color: rgba(255, 152, 0, 0.08) !important;
}

/* Ensure proper spacing in toolbar */
.hm-table-search .mud-input-control[b-0z84a0a2z4] {
    margin-bottom: 0 !important;
}
/* /Components/Dataset/FilePreviewComponents/CodePreview.razor.rz.scp.css */
/* ============================================================================
   CodePreview - Scoped Styles
   Styles for JSON/XML code preview and mapping highlight legend
   ============================================================================ */

/* Code preview container */
.code-preview-container[b-1gr4fgnq6p] {
    max-height: 400px;
    overflow: auto;
    background-color: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
    .code-preview-container[b-1gr4fgnq6p] {
        max-height: 300px;
    }
    
    .code-preview-container pre[b-1gr4fgnq6p] {
        font-size: 12px;
    }
}

/* Pre element styling */
.code-preview-container pre[b-1gr4fgnq6p] {
    margin: 0;
    padding: 10px;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--mud-palette-text-primary);
}

/* Code element styling */
.code-preview-container code[b-1gr4fgnq6p] {
    font-family: inherit;
    color: var(--mud-palette-text-primary);
}

/* XML syntax highlighting (basic) */
.code-preview-container code.language-xml[b-1gr4fgnq6p] {
    color: var(--mud-palette-text-primary);
}
/* /Components/Dataset/FilePreviewComponents/ExcelGridPreview.razor.rz.scp.css */
/* ============================================================================
   ExcelGridPreview - Scoped Styles
   Styles for the Excel/CSV grid preview component
   ============================================================================ */

/* Main container */
.excel-container[b-evksjzfme7] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    overflow: auto;
    height: 400px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: relative;
    background-color: var(--mud-palette-surface);
}

/* Mobile responsiveness */
@media (max-width: 600px) {
    .excel-container[b-evksjzfme7] {
        height: 300px;
    }
}

/* Header row */
.excel-header[b-evksjzfme7] {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--mud-palette-background-gray);
    border-bottom: 2px solid var(--mud-palette-lines-default);
}

/* Corner cell (top-left) */
.excel-corner-cell[b-evksjzfme7] {
    border-right: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-background-gray);
    position: sticky;
    left: 0;
    z-index: 3;
}

/* Header cells */
.excel-header-cell[b-evksjzfme7] {
    text-align: center;
    font-weight: bold;
    border-right: 1px solid var(--mud-palette-lines-default);
    display: flex;
    flex-direction: column;
    color: var(--mud-palette-text-primary);
}

/* Column letter indicator */
.excel-column-letter[b-evksjzfme7] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    margin-bottom: 4px;
}

/* Header text */
.excel-header-text[b-evksjzfme7] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Body container */
.excel-body[b-evksjzfme7] {
    display: flex;
    flex-direction: column;
}

/* Data row */
.excel-row[b-evksjzfme7] {
    display: flex;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Row number header */
.excel-row-header[b-evksjzfme7] {
    padding: 8px 0;
    text-align: center;
    background-color: var(--mud-palette-background-gray);
    border-right: 1px solid var(--mud-palette-lines-default);
    position: sticky;
    left: 0;
    z-index: 1;
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

/* Data cell */
.excel-cell[b-evksjzfme7] {
    border-right: 1px solid var(--mud-palette-lines-default);
    position: relative;
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-surface);
    transition: background-color 0.15s ease;
}

/* Selectable cell state */
.excel-cell.selectable[b-evksjzfme7] {
    cursor: pointer;
}

.excel-cell.selectable:hover[b-evksjzfme7] {
    background-color: var(--mud-palette-primary-hover);
}

/* Cell content */
.excel-cell-content[b-evksjzfme7] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cell address tooltip */
.excel-cell-address[b-evksjzfme7] {
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 9px;
    color: var(--mud-palette-text-disabled);
    opacity: 0;
    transition: opacity 0.2s;
}

.excel-cell:hover .excel-cell-address[b-evksjzfme7] {
    opacity: 1;
}

/* Alternate row styling */
.excel-row:nth-child(even) .excel-cell[b-evksjzfme7] {
    background-color: var(--mud-palette-background);
}

.excel-row:nth-child(even) .excel-cell.selectable:hover[b-evksjzfme7] {
    background-color: var(--mud-palette-primary-hover);
}
/* /Components/Dataset/RuleCard.razor.rz.scp.css */
/* RuleCard scoped styles — dark mode compatible via CSS variables */

[b-1eki0f1tzo] .rule-card {
    border-left: 4px solid var(--mud-palette-primary);
    background-color: var(--mud-palette-surface);
}

[b-1eki0f1tzo] .rule-name {
    font-weight: 500;
}

[b-1eki0f1tzo] .section-label {
    font-weight: 500;
}

[b-1eki0f1tzo] .count-chip {
    height: 20px;
}

[b-1eki0f1tzo] .priority-chip {
    font-size: 0.7rem;
    height: 22px;
}
/* /Components/Dataset/RuleInputOutputSection.razor.rz.scp.css */
/* RuleInputOutputSection scoped styles */

[b-bs40n13exx] .section-label {
    font-weight: 500;
}

[b-bs40n13exx] .count-chip {
    height: 20px;
}

[b-bs40n13exx] .autocomplete-field {
    background-color: var(--mud-palette-surface);
}

/* Make the entered/selected variable value clearly legible regardless of the
   host component's background (the value can otherwise look faint or truncated). */
[b-bs40n13exx] .autocomplete-field input {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
    text-overflow: ellipsis;
}
/* /Components/Feed/FeedFetchingHistoryContentTable.razor.rz.scp.css */
/* Blink animation for next processing items */
[b-ukthos9307] .blink-next-processing {
    animation: blink-animation-b-ukthos9307 2s linear infinite;
    background-color: var(--mud-palette-info-lighten) !important;
}

@keyframes blink-animation-b-ukthos9307 {
    0%, 50% {
        opacity: 1;
        background-color: var(--mud-palette-info-lighten);
    }
    51%, 100% {
        opacity: 0.3;
        background-color: var(--mud-palette-info);
    }
}
/* /Components/HmComponents/Display/HmProcessIndicator.razor.rz.scp.css */
.hm-process-indicator[b-yd1wsu76s3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    border-radius: 4px;
    white-space: nowrap;
}

.hm-process-indicator--clickable[b-yd1wsu76s3] {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.hm-process-indicator--clickable:hover[b-yd1wsu76s3] {
    background-color: var(--mud-palette-action-default-hover);
}

.hm-process-indicator__date[b-yd1wsu76s3] {
    font-size: 0.75rem;
    font-family: Inter, Roboto, Helvetica, Arial, sans-serif;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
}
/* /Components/HmComponents/Display/HmTypeBadge.razor.rz.scp.css */
.hm-type-badge[b-nafrybh538] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 2px 8px;
    border-radius: 16px;
    border: 1px solid;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: Inter, Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    white-space: nowrap;
    transition: all 0.15s ease;
    user-select: none;
}

.hm-type-badge--sm[b-nafrybh538] {
    padding: 1px 8px 1px 6px;
    gap: 4px;
    font-size: 0.6875rem;
}

.hm-type-badge__dot[b-nafrybh538] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.hm-type-badge--sm .hm-type-badge__dot[b-nafrybh538] {
    width: 6px;
    height: 6px;
}

.hm-type-badge__label[b-nafrybh538] {
    color: var(--mud-palette-text-primary);
}
/* /Components/HmComponents/Layout/HmSplitter.razor.rz.scp.css */
/* HmSplitter - Resizable split panel component styles */

.hm-splitter[b-u5zsduggtr] {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 400px;
    overflow: hidden;
}

.hm-splitter.horizontal[b-u5zsduggtr] {
    flex-direction: row;
}

.hm-splitter.vertical[b-u5zsduggtr] {
    flex-direction: column;
}

/* Pane styles */
.hm-splitter-pane[b-u5zsduggtr] {
    overflow: auto;
    min-width: 0;
    min-height: 0;
}

.hm-splitter.horizontal .first-pane[b-u5zsduggtr] {
    flex-shrink: 0;
}

.hm-splitter.horizontal .second-pane[b-u5zsduggtr] {
    flex: 1;
    min-width: 0;
}

.hm-splitter.vertical .first-pane[b-u5zsduggtr] {
    flex-shrink: 0;
}

.hm-splitter.vertical .second-pane[b-u5zsduggtr] {
    flex: 1;
    min-height: 0;
}

/* Splitter bar */
.hm-splitter-bar[b-u5zsduggtr] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--mud-palette-background-gray);
    transition: background-color 0.15s ease;
    cursor: col-resize;
    user-select: none;
}

.hm-splitter.horizontal .hm-splitter-bar[b-u5zsduggtr] {
    width: 8px;
    cursor: col-resize;
}

.hm-splitter.vertical .hm-splitter-bar[b-u5zsduggtr] {
    height: 8px;
    cursor: row-resize;
}

.hm-splitter-bar:hover[b-u5zsduggtr],
.hm-splitter-bar:focus[b-u5zsduggtr] {
    background-color: var(--mud-palette-primary-lighten);
    outline: none;
}

.hm-splitter-bar:focus-visible[b-u5zsduggtr] {
    box-shadow: 0 0 0 2px var(--mud-palette-primary);
}

.hm-splitter-bar.dragging[b-u5zsduggtr] {
    background-color: var(--mud-palette-primary);
}

/* Handle indicator */
.hm-splitter-bar-handle[b-u5zsduggtr] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-secondary);
    transition: color 0.15s ease;
}

.hm-splitter.horizontal .hm-splitter-bar-handle[b-u5zsduggtr] {
    transform: rotate(90deg);
}

.hm-splitter-bar:hover .hm-splitter-bar-handle[b-u5zsduggtr],
.hm-splitter-bar:focus .hm-splitter-bar-handle[b-u5zsduggtr] {
    color: var(--mud-palette-primary);
}

.hm-splitter-bar.dragging .hm-splitter-bar-handle[b-u5zsduggtr] {
    color: var(--mud-palette-primary-contrasttext);
}

/* Dark mode support via MudBlazor CSS variables */
[b-u5zsduggtr] .mud-theme-dark .hm-splitter-bar {
    background-color: var(--mud-palette-dark);
}

[b-u5zsduggtr] .mud-theme-dark .hm-splitter-bar:hover,
[b-u5zsduggtr] .mud-theme-dark .hm-splitter-bar:focus {
    background-color: var(--mud-palette-primary-darken);
}
/* /Components/HmComponents/Workflow/WorkflowCanvas.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   WorkflowCanvas.razor.css — Scoped styles for the canvas wrapper
   ══════════════════════════════════════════════════════════════ */

/* ── Canvas Wrapper ── */
[b-6fad6a7til] .wf-canvas-wrapper {
    position: relative;
    margin-bottom: 16px;
}

/* ── Fullscreen Mode ── */
[b-6fad6a7til] .wf-canvas-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: var(--mud-palette-background);
    padding: 8px;
    display: flex;
    flex-direction: column;
}

[b-6fad6a7til] .wf-canvas-fullscreen .wf-canvas-controls {
    margin-bottom: 8px;
}

[b-6fad6a7til] .wf-canvas-fullscreen .wf-canvas-area {
    flex: 1;
    min-height: unset !important;
}

/* ── Controls bar ── */
[b-6fad6a7til] .wf-canvas-controls {
    margin-bottom: 12px;
}

/* ── Canvas area ── */
[b-6fad6a7til] .wf-canvas-area {
    position: relative;
}

/* ── Compact Mode ── */
[b-6fad6a7til] .wf-canvas-compact .wf-node {
    max-width: 180px;
    min-width: 140px;
}

[b-6fad6a7til] .wf-canvas-compact .wf-node-body {
    display: none;
}

[b-6fad6a7til] .wf-canvas-compact .wf-node-metrics {
    font-size: 0.65rem;
    padding: 3px 6px;
}

[b-6fad6a7til] .wf-canvas-compact .wf-node-actions {
    padding: 2px 6px;
}

[b-6fad6a7til] .wf-canvas-compact .wf-node-header {
    padding: 6px 8px;
}

[b-6fad6a7til] .wf-canvas-compact .wf-node-title {
    font-size: 0.75rem;
}

[b-6fad6a7til] .wf-canvas-compact .wf-db-chip {
    display: none;
}

/* ── Minimap ── */
[b-6fad6a7til] .wf-minimap {
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

[b-6fad6a7til] .wf-minimap:hover {
    opacity: 1;
}
/* /Components/HmComponents/Workflow/WorkflowNode.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   WorkflowNode.razor.css — Scoped styles for the workflow node
   Uses CSS variables from MudBlazor for dark mode support.
   ══════════════════════════════════════════════════════════════ */

/* ── Node Container ── */
[b-ekauzhmucr] .wf-node-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
    position: relative;
    width: max-content;
    min-width: 200px;
    box-sizing: border-box;
}

[b-ekauzhmucr] .wf-node-container.node-center {
    margin-left: auto;
    margin-right: auto;
}

/* ── The Node Card ("Box") ── */
[b-ekauzhmucr] .wf-node {
    background-color: var(--mud-palette-surface);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 200px;
    max-width: 280px;
    position: relative;
    overflow: hidden;
    animation: nodeAppear-b-ekauzhmucr 0.4s ease-out;
}

[b-ekauzhmucr] .wf-node:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

@keyframes nodeAppear-b-ekauzhmucr {
    0% {
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── Top Accent Bar ── */
[b-ekauzhmucr] .wf-node-accent {
    height: 3px;
    width: 100%;
    border-radius: 10px 10px 0 0;
}

[b-ekauzhmucr] .accent-success .wf-node-accent,
[b-ekauzhmucr] .wf-node-accent.accent-success {
    background-color: var(--mud-palette-success);
}

[b-ekauzhmucr] .accent-error .wf-node-accent,
[b-ekauzhmucr] .wf-node-accent.accent-error {
    background-color: var(--mud-palette-error);
}

[b-ekauzhmucr] .accent-info .wf-node-accent,
[b-ekauzhmucr] .wf-node-accent.accent-info {
    background-color: var(--mud-palette-info);
}

[b-ekauzhmucr] .accent-cancelled .wf-node-accent,
[b-ekauzhmucr] .wf-node-accent.accent-cancelled {
    background-color: var(--mud-palette-warning-darken);
}

[b-ekauzhmucr] .accent-default .wf-node-accent,
[b-ekauzhmucr] .wf-node-accent.accent-default {
    background-color: var(--mud-palette-lines-default);
}

/* ── Status-based node backgrounds ── */
[b-ekauzhmucr] .node-completed {
    background-color: color-mix(in srgb, var(--mud-palette-success) 6%, var(--mud-palette-surface));
}

[b-ekauzhmucr] .node-failed {
    background-color: color-mix(in srgb, var(--mud-palette-error) 6%, var(--mud-palette-surface));
}

[b-ekauzhmucr] .node-cancelled {
    background-color: color-mix(in srgb, var(--mud-palette-warning) 6%, var(--mud-palette-surface));
}

[b-ekauzhmucr] .node-inprogress {
    background-color: var(--mud-palette-surface);
    border: 1px dashed var(--mud-palette-lines-default);
}

/* ── Running animation (pulsing border) ── */
[b-ekauzhmucr] .node-running {
    animation: pulse-border-b-ekauzhmucr 2s ease-in-out infinite;
    border-color: var(--mud-palette-info) !important;
    border-style: solid !important;
}

@keyframes pulse-border-b-ekauzhmucr {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-info) 40%, transparent);
    }
    50% {
        box-shadow: 0 0 0 6px transparent;
    }
}

/* ── Highlight animation ── */
[b-ekauzhmucr] .node-highlight {
    animation: highlightBlink-b-ekauzhmucr 3s ease-in-out;
    outline: 2px solid var(--mud-palette-warning) !important;
    outline-offset: 2px;
}

@keyframes highlightBlink-b-ekauzhmucr {
    0%, 100% {
        outline-color: var(--mud-palette-warning);
        transform: scale(1);
    }
    25%, 75% {
        outline-color: color-mix(in srgb, var(--mud-palette-warning) 80%, transparent);
        transform: scale(1.05);
    }
    50% {
        outline-color: var(--mud-palette-warning);
        transform: scale(1.02);
    }
}

/* ── Hidden/dimmed state ── */
[b-ekauzhmucr] .node-dimmed {
    opacity: 0.4;
    filter: grayscale(0.6);
    transition: all 0.3s ease;
}

[b-ekauzhmucr] .node-dimmed:hover {
    opacity: 0.7;
    filter: grayscale(0.2);
}

/* ══════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════ */
[b-ekauzhmucr] .wf-node-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

[b-ekauzhmucr] .wf-node-status-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

[b-ekauzhmucr] .wf-node-title {
    flex: 1;
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-ekauzhmucr] .wf-db-chip {
    font-size: 0.6rem !important;
    height: 18px !important;
    padding: 0 5px !important;
}

[b-ekauzhmucr] .wf-visibility-btn {
    padding: 2px !important;
    min-width: unset !important;
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════
   BODY
   ══════════════════════════════════════════════════════ */
[b-ekauzhmucr] .wf-node-body {
    padding: 8px 10px;
}

[b-ekauzhmucr] .wf-node-description {
    color: var(--mud-palette-text-secondary);
    line-height: 1.3;
    margin-bottom: 4px;
}

[b-ekauzhmucr] .wf-node-error {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding: 4px 6px;
    margin-top: 4px;
    border-radius: 4px;
    background-color: color-mix(in srgb, var(--mud-palette-error) 8%, transparent);
    border-left: 2px solid var(--mud-palette-error);
}

[b-ekauzhmucr] .wf-node-timing {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
}

[b-ekauzhmucr] .wf-timing-icon {
    color: var(--mud-palette-text-secondary);
    font-size: 0.9rem !important;
}

[b-ekauzhmucr] .wf-timing-text {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
}

[b-ekauzhmucr] .wf-timing-duration {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

[b-ekauzhmucr] .wf-timing-active .wf-timing-icon {
    color: var(--mud-palette-info);
}

[b-ekauzhmucr] .wf-timing-failed .wf-timing-icon {
    color: var(--mud-palette-error);
}

/* ══════════════════════════════════════════════════════
   METRICS RIBBON
   ══════════════════════════════════════════════════════ */
[b-ekauzhmucr] .wf-node-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    padding: 6px 10px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: 0.75rem;
}

[b-ekauzhmucr] .wf-metric {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 5px;
    border-radius: 4px;
    line-height: 1;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

[b-ekauzhmucr] .wf-metric-duration {
    background-color: color-mix(in srgb, var(--mud-palette-secondary) 12%, transparent);
    color: var(--mud-palette-text-secondary);
}

[b-ekauzhmucr] .wf-metric-added {
    background-color: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    color: var(--mud-palette-success);
    cursor: pointer;
}

[b-ekauzhmucr] .wf-metric-added:hover {
    background-color: color-mix(in srgb, var(--mud-palette-success) 20%, transparent);
    transform: translateY(-1px);
}

[b-ekauzhmucr] .wf-metric-modified {
    background-color: color-mix(in srgb, var(--mud-palette-info) 12%, transparent);
    color: var(--mud-palette-info);
    cursor: pointer;
}

[b-ekauzhmucr] .wf-metric-modified:hover {
    background-color: color-mix(in srgb, var(--mud-palette-info) 20%, transparent);
    transform: translateY(-1px);
}

[b-ekauzhmucr] .wf-metric-validated {
    background-color: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    color: var(--mud-palette-success);
}

[b-ekauzhmucr] .wf-metric-ignored {
    background-color: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent);
    color: var(--mud-palette-warning);
}

[b-ekauzhmucr] .wf-metric-errors {
    background-color: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    color: var(--mud-palette-error);
    cursor: pointer;
}

[b-ekauzhmucr] .wf-metric-errors:hover {
    background-color: color-mix(in srgb, var(--mud-palette-error) 20%, transparent);
    transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════
   ACTIONS
   ══════════════════════════════════════════════════════ */
[b-ekauzhmucr] .wf-node-actions {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 4px 10px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* ══════════════════════════════════════════════════════
   STEP ID
   ══════════════════════════════════════════════════════ */
[b-ekauzhmucr] .wf-node-step-id {
    position: absolute;
    left: 6px;
    bottom: 4px;
    display: flex;
    gap: 4px;
    z-index: 1;
}

[b-ekauzhmucr] .wf-step-link {
    font-size: 0.6rem !important;
    color: var(--mud-palette-text-disabled) !important;
    padding: 1px 4px;
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent);
    border-radius: 3px;
    transition: all 0.2s ease;
}

[b-ekauzhmucr] .wf-step-link:hover {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
    color: var(--mud-palette-text-primary) !important;
}

/* ══════════════════════════════════════════════════════
   ICON ANIMATIONS
   ══════════════════════════════════════════════════════ */
[b-ekauzhmucr] .icon-success {
    animation: successPop-b-ekauzhmucr 0.5s ease-out;
}

@keyframes successPop-b-ekauzhmucr {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

[b-ekauzhmucr] .icon-error-pulse {
    animation: errorPulse-b-ekauzhmucr 1.5s ease-in-out infinite;
}

@keyframes errorPulse-b-ekauzhmucr {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

[b-ekauzhmucr] .icon-cancelled {
    color: var(--mud-palette-warning-darken);
}

/* ══════════════════════════════════════════════════════
   CONNECTION LINES (arrows between nodes)
   ══════════════════════════════════════════════════════ */
[b-ekauzhmucr] .wf-arrow-down {
    height: 20px;
    width: 2px;
    background-color: var(--mud-palette-lines-default);
    margin: 0 auto;
    position: relative;
}

[b-ekauzhmucr] .wf-arrow-down::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid var(--mud-palette-lines-default);
}

[b-ekauzhmucr] .wf-branch-line {
    width: 90%;
    height: 2px;
    background-color: var(--mud-palette-lines-default);
    margin: 0 auto;
    max-width: 800px;
}

[b-ekauzhmucr] .wf-vertical-branch {
    height: 20px;
    width: 2px;
    background-color: var(--mud-palette-lines-default);
    margin-bottom: 5px;
}

/* ══════════════════════════════════════════════════════
   CHILDREN LAYOUT
   ══════════════════════════════════════════════════════ */
[b-ekauzhmucr] .wf-children {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    width: max-content;
    min-width: 100%;
    overflow: visible;
    box-sizing: border-box;
}

[b-ekauzhmucr] .wf-multi-children {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    margin-top: 10px;
    width: max-content;
    min-width: 100%;
    overflow: visible;
    box-sizing: border-box;
}

[b-ekauzhmucr] .wf-child-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    min-width: 200px;
    width: max-content;
    flex: 0 0 auto;
    box-sizing: border-box;
}

[b-ekauzhmucr] .wf-single-child {
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* /Components/HmComponents/Workflow/WorkflowTenantZone.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   WorkflowTenantZone.razor.css — Scoped styles for tenant zones
   ══════════════════════════════════════════════════════════════ */

/* ── Zone Container ── */
[b-qpc5m4kxru] .wf-tenant-zone {
    position: relative;
    flex: 0 0 auto;
    min-width: 300px;
    width: max-content;
    background: var(--mud-palette-surface);
    border-radius: 12px;
    border: 2px solid var(--mud-palette-lines-default);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    overflow: visible;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

[b-qpc5m4kxru] .wf-tenant-zone:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

[b-qpc5m4kxru] .wf-tenant-zone.collapsed {
    min-width: 200px;
}

/* Color variants for zone borders */
[b-qpc5m4kxru] .wf-tenant-zone-0 { border-color: #D32F2F; }
[b-qpc5m4kxru] .wf-tenant-zone-1 { border-color: #1976D2; }
[b-qpc5m4kxru] .wf-tenant-zone-2 { border-color: #388E3C; }
[b-qpc5m4kxru] .wf-tenant-zone-3 { border-color: #F57C00; }
[b-qpc5m4kxru] .wf-tenant-zone-4 { border-color: #7B1FA2; }
[b-qpc5m4kxru] .wf-tenant-zone-5 { border-color: #00796B; }
[b-qpc5m4kxru] .wf-tenant-zone-global { border-color: var(--mud-palette-lines-default); }

/* ── Avatar / Logo ── */
[b-qpc5m4kxru] .wf-tenant-logo-container {
    position: absolute;
    top: -20px;
    left: -20px;
    z-index: 10;
}

[b-qpc5m4kxru] .wf-tenant-avatar {
    width: 52px !important;
    height: 52px !important;
    font-size: 0.9rem;
    font-weight: 600;
}

[b-qpc5m4kxru] .wf-tenant-avatar-default {
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-secondary) 100%);
    color: white;
}

/* ── Header ── */
[b-qpc5m4kxru] .wf-tenant-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 10px 48px; /* left padding for logo */
    border-radius: 10px 10px 0 0;
}

[b-qpc5m4kxru] .wf-tenant-title {
    flex: 1;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

[b-qpc5m4kxru] .wf-tenant-counters {
    display: flex;
    gap: 2px;
}

[b-qpc5m4kxru] .wf-counter-chip {
    font-size: 0.65rem !important;
    height: 20px !important;
    padding: 0 4px !important;
}

[b-qpc5m4kxru] .wf-tenant-step-count {
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

[b-qpc5m4kxru] .wf-tenant-collapse-btn {
    padding: 2px !important;
    min-width: unset !important;
    width: 24px !important;
    height: 24px !important;
}

/* ── Content ── */
[b-qpc5m4kxru] .wf-tenant-content {
    padding: 16px;
    overflow: visible;
    box-sizing: border-box;
    width: max-content;
    min-width: 100%;
    animation: contentExpand-b-qpc5m4kxru 0.3s ease-out;
}

@keyframes contentExpand-b-qpc5m4kxru {
    0% {
        opacity: 0;
        max-height: 0;
    }
    100% {
        opacity: 1;
        max-height: 2000px;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* MainLayout — layout-level styles.
   The legacy Blazor-template rules (.page, .sidebar, .top-row) were removed:
   the layout is fully MudBlazor. */

#blazor-error-ui[b-r7av64rrty] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

/* ==========================================================================
   Unauthorized / session-expired panels
   ========================================================================== */

.unauthorized-container[b-r7av64rrty] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

.unauthorized-background[b-r7av64rrty] {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0D3034 0%, #1a4a50 50%, #5499A2 100%);
    opacity: 0.08;
    z-index: 0;
}

.unauthorized-background[b-r7av64rrty]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(84, 153, 162, 0.15) 0%, transparent 50%);
    animation: pulse-bg-b-r7av64rrty 8s ease-in-out infinite;
}

@keyframes pulse-bg-b-r7av64rrty {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

[b-r7av64rrty] .unauthorized-card {
    position: relative;
    z-index: 1;
    padding: 3rem 2.5rem;
    text-align: center;
    max-width: 420px;
    width: 100%;
    margin: 1rem;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.95) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(84, 153, 162, 0.15);
    animation: slide-up-b-r7av64rrty 0.5s ease-out;
}

@keyframes slide-up-b-r7av64rrty {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.unauthorized-icon-wrapper[b-r7av64rrty] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0D3034 0%, #5499A2 100%);
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 32px rgba(13, 48, 52, 0.25);
    animation: float-b-r7av64rrty 3s ease-in-out infinite;
}

@keyframes float-b-r7av64rrty {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

[b-r7av64rrty] .unauthorized-icon {
    color: white !important;
    font-size: 2.5rem !important;
}

[b-r7av64rrty] .unauthorized-title {
    font-weight: 600;
    color: #0D3034;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

[b-r7av64rrty] .unauthorized-subtitle {
    color: #5f6368;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

[b-r7av64rrty] .unauthorized-login-btn {
    margin-top: 0.5rem;
    padding: 12px 24px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 8px;
    transition: all var(--hm-motion-slow) var(--hm-ease);
}

[b-r7av64rrty] .unauthorized-login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(13, 48, 52, 0.3);
}

/* ==========================================================================
   Drawer — custom thin teal scrollbar
   ========================================================================== */

[b-r7av64rrty] .mud-drawer-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(84, 153, 162, 0.3) transparent;
}

[b-r7av64rrty] .mud-drawer-content::-webkit-scrollbar {
    width: 5px;
}

[b-r7av64rrty] .mud-drawer-content::-webkit-scrollbar-track {
    background: transparent;
}

[b-r7av64rrty] .mud-drawer-content::-webkit-scrollbar-thumb {
    background-color: rgba(84, 153, 162, 0.3);
    border-radius: 3px;
}

[b-r7av64rrty] .mud-drawer-content::-webkit-scrollbar-thumb:hover {
    background-color: rgba(84, 153, 162, 0.5);
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ==========================================================================
   NavMenu — MudBlazor Navigation Styling
   Colors sourced from HmTheme.cs via MudBlazor CSS variables.
   Drawer background is always dark (#001417), so we use
   var(--mud-palette-tertiary) = #5499A2 (constant across modes) as accent.
   ========================================================================== */

/* --- Base link styling with smooth transitions --- */
[b-sna1t1oxmy] .mud-nav-link {
    transition: background-color 0.25s ease,
                color 0.2s ease,
                border-left-color 0.25s ease;
    border-left: 3px solid transparent;
    border-radius: 0 6px 6px 0;
    margin: 2px 8px 2px 0;
    color: var(--mud-palette-drawer-text);
}

/* --- Hover — subtle light background with transition --- */
[b-sna1t1oxmy] .mud-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
}

/* --- Active link — teal accent bar + highlighted background --- */
[b-sna1t1oxmy] .mud-nav-link.active {
    border-left-color: var(--mud-palette-tertiary, #5499A2) !important;
    background-color: rgba(84, 153, 162, 0.15) !important;
    color: #FFFFFF !important;
    font-weight: 500;
}

/* Active icon — matches accent color, full opacity */
[b-sna1t1oxmy] .mud-nav-link.active .mud-icon-root {
    color: var(--mud-palette-tertiary, #5499A2) !important;
}

/* --- Nav group headers — dimmed for visual hierarchy --- */
[b-sna1t1oxmy] .mud-nav-group .mud-nav-group-text {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.6;
    font-weight: 600;
}

/* Group expand arrow — match the dimmed style */
[b-sna1t1oxmy] .mud-nav-group .mud-nav-link .mud-expand-icon {
    transition: transform 0.25s ease, opacity 0.2s ease;
    opacity: 0.5;
}

[b-sna1t1oxmy] .mud-nav-group .mud-nav-link:hover .mud-expand-icon {
    opacity: 0.8;
}

/* --- Spacing between nav groups --- */
[b-sna1t1oxmy] .mud-nav-group {
    margin-bottom: 2px;
}

/* --- MudDivider inside nav — subtle teal tint --- */
[b-sna1t1oxmy] .mud-divider {
    border-color: rgba(84, 153, 162, 0.15);
}

/* --- Section dividers — extra spacing for visual separation --- */
[b-sna1t1oxmy] .nav-section-divider {
    margin: 6px 12px;
}

/* --- Section labels (OPERATIONS / CONFIGURATION / SUPERVISION) --- */
[b-sna1t1oxmy] .nav-section-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mud-palette-tertiary, #5499A2);
    opacity: 0.7;
    font-weight: 700;
    padding: 8px 16px 2px;
    user-select: none;
}

/* --- Quick search field & Collapse button ---
   Styles moved to wwwroot/app.css as GLOBAL rules.
   Reason: the drawer background is always dark (#001417) but Blazor's scoped
   ::deep selectors cannot reliably reach MudBlazor-generated child elements
   (input, placeholder, border, icons) — especially in Light mode where the
   palette sets black text.  Global selectors using the unique class
   .nav-search-container work correctly in both themes.
   See app.css section "NavMenu — Drawer search field overrides" */

/* --- Favorites remove button — subtle until hover --- */
[b-sna1t1oxmy] .mud-nav-link + .mud-icon-button {
    opacity: 0;
    transition: opacity 0.2s ease;
}

[b-sna1t1oxmy] .d-flex:hover .mud-nav-link + .mud-icon-button {
    opacity: 0.6;
}

[b-sna1t1oxmy] .d-flex:hover .mud-nav-link + .mud-icon-button:hover {
    opacity: 1;
}
/* /Components/Orchestrator/FluxOrchestratorDashboard.razor.rz.scp.css */
/* FluxOrchestratorDashboard MudBlazor Styles */

/* Main container styling */
.mud-container[b-k6klmgosnt] {
    padding: 16px !important;
}

/* Summary cards with theme colors */
.mud-theme-primary .mud-card-content[b-k6klmgosnt] {
    background: linear-gradient(135deg, var(--mud-palette-primary-darken) 0%, var(--mud-palette-primary) 100%);
    color: var(--mud-palette-primary-text);
}

.mud-theme-success .mud-card-content[b-k6klmgosnt] {
    background: linear-gradient(135deg, var(--mud-palette-success-darken) 0%, var(--mud-palette-success) 100%);
    color: var(--mud-palette-success-text);
}

.mud-theme-warning .mud-card-content[b-k6klmgosnt] {
    background: linear-gradient(135deg, var(--mud-palette-warning-darken) 0%, var(--mud-palette-warning) 100%);
    color: var(--mud-palette-warning-text);
}

.mud-theme-info .mud-card-content[b-k6klmgosnt] {
    background: linear-gradient(135deg, var(--mud-palette-info-darken) 0%, var(--mud-palette-info) 100%);
    color: var(--mud-palette-info-text);
}

/* Card hover effects */
.mud-card[b-k6klmgosnt] {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 12px !important;
}

.mud-card:hover[b-k6klmgosnt] {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

/* Summary card specific styling */
.mud-grid .mud-item .mud-card .mud-card-content[b-k6klmgosnt] {
    padding: 24px !important;
}

.mud-grid .mud-item .mud-card .mud-icon[b-k6klmgosnt] {
    margin-bottom: 8px;
    opacity: 0.9;
}

/* Tab styling */
.mud-tabs[b-k6klmgosnt] {
    background: white;
    border-radius: 12px !important;
    overflow: hidden;
}

.mud-tabs .mud-tab[b-k6klmgosnt] {
    font-weight: 500;
    text-transform: none;
    min-height: 56px;
}

.mud-tabs .mud-tab.mud-tab-active[b-k6klmgosnt] {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
    color: var(--mud-palette-primary);
}

/* Table styling */
.mud-table[b-k6klmgosnt] {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.mud-table-head .mud-table-cell[b-k6klmgosnt] {
    background-color: var(--mud-palette-grey-lighten4);
    font-weight: 600;
    color: var(--mud-palette-dark);
    border-bottom: 2px solid var(--mud-palette-divider);
}

.mud-table-body .mud-table-row:hover[b-k6klmgosnt] {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.04);
}

/* Job status chips */
.mud-chip[b-k6klmgosnt] {
    font-weight: 500;
    border-radius: 16px;
}

.mud-chip .mud-icon[b-k6klmgosnt] {
    margin-right: 4px;
}

/* Button group styling */
.mud-button-group[b-k6klmgosnt] {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mud-button-group .mud-button[b-k6klmgosnt] {
    border-radius: 0;
}

.mud-button-group .mud-button:first-child[b-k6klmgosnt] {
    border-radius: 8px 0 0 8px;
}

.mud-button-group .mud-button:last-child[b-k6klmgosnt] {
    border-radius: 0 8px 8px 0;
}

/* Icon button styling */
.mud-icon-button[b-k6klmgosnt] {
    transition: all 0.2s ease;
}

.mud-icon-button:hover[b-k6klmgosnt] {
    transform: scale(1.1);
}

/* Switch styling */
.mud-switch[b-k6klmgosnt] {
    margin: 0;
}

.mud-switch .mud-switch-track[b-k6klmgosnt] {
    border-radius: 12px;
}

.mud-switch .mud-switch-thumb[b-k6klmgosnt] {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Progress circular styling */
.mud-progress-circular[b-k6klmgosnt] {
    color: var(--mud-palette-primary);
}

/* Alert styling */
.mud-alert[b-k6klmgosnt] {
    border-radius: 8px;
    border-left: 4px solid;
}

.mud-alert.mud-alert-filled-info[b-k6klmgosnt] {
    border-left-color: var(--mud-palette-info);
}

.mud-alert.mud-alert-filled-success[b-k6klmgosnt] {
    border-left-color: var(--mud-palette-success);
}

.mud-alert.mud-alert-filled-error[b-k6klmgosnt] {
    border-left-color: var(--mud-palette-error);
}

/* Tooltip styling */
.mud-tooltip[b-k6klmgosnt] {
    background-color: rgba(0, 0, 0, 0.87);
    color: white;
    font-size: 0.75rem;
    border-radius: 4px;
    padding: 6px 8px;
}

/* Paper header styling */
.mud-paper[b-k6klmgosnt] {
    border-radius: 12px !important;
}

/* Loading states */
.loading-state[b-k6klmgosnt] {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .mud-grid .mud-item[b-k6klmgosnt] {
        margin-bottom: 8px;
    }
    
    .mud-container[b-k6klmgosnt] {
        padding: 8px !important;
    }
    
    .mud-card .mud-card-content[b-k6klmgosnt] {
        padding: 16px !important;
    }
    
    .mud-table[b-k6klmgosnt] {
        font-size: 0.875rem;
    }
    
    .mud-button-group[b-k6klmgosnt] {
        flex-direction: column;
    }
    
    .mud-button-group .mud-button[b-k6klmgosnt] {
        border-radius: 0;
        margin-bottom: 1px;
    }
    
    .mud-button-group .mud-button:first-child[b-k6klmgosnt] {
        border-radius: 8px 8px 0 0;
    }
    
    .mud-button-group .mud-button:last-child[b-k6klmgosnt] {
        border-radius: 0 0 8px 8px;
        margin-bottom: 0;
    }
}

/* Dark theme adjustments */
@media (prefers-color-scheme: dark) {
    .mud-theme-primary .mud-card-content[b-k6klmgosnt] {
        background: linear-gradient(135deg, var(--mud-palette-primary-darken) 0%, var(--mud-palette-primary-dark) 100%);
    }
    
    .mud-table-head .mud-table-cell[b-k6klmgosnt] {
        background-color: var(--mud-palette-grey-darken3);
        color: var(--mud-palette-text-primary);
    }
}

/* Animation keyframes */
@keyframes pulse-b-k6klmgosnt {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 1;
    }
}

/* Running job status animation */
.mud-chip.status-running[b-k6klmgosnt] {
    animation: pulse-b-k6klmgosnt 2s infinite;
}

/* Enhanced elevation for active states */
.mud-elevation-8[b-k6klmgosnt] {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

/* Custom spacing utilities */
.mb-6[b-k6klmgosnt] {
    margin-bottom: 48px !important;
}

.pa-8[b-k6klmgosnt] {
    padding: 64px !important;
}
/* /Components/Pages/Audit/AuditFeedErrors.razor.rz.scp.css */
/* AuditFeedErrors Component Styles */

/* Compact table styling */
[b-3ridgpbcyu] .compact-table .mud-table-cell {
    padding: 2px 4px !important;
    font-size: 0.75rem !important;
}

[b-3ridgpbcyu] .compact-table .mud-table-cell * {
    font-size: inherit !important;
}

[b-3ridgpbcyu] .compact-table .mud-chip {
    font-size: 0.7rem !important;
}

/* Aggregation section */
.aggregation-section[b-3ridgpbcyu] {
    transition: max-height 0.3s ease-in-out;
}

.aggregation-chip[b-3ridgpbcyu] {
    cursor: pointer;
    transition: transform 0.1s ease-in-out;
}

.aggregation-chip:hover[b-3ridgpbcyu] {
    transform: scale(1.05);
}

.aggregation-chip.selected[b-3ridgpbcyu] {
    border: 2px solid currentColor;
}

/* Cell styling */
.cell-text[b-3ridgpbcyu] {
    font-size: 0.75rem;
}

.cell-label[b-3ridgpbcyu] {
    font-size: 0.65rem;
    color: var(--mud-palette-text-secondary);
}

.cell-link[b-3ridgpbcyu] {
    font-size: 0.75rem;
}

/* Error message styling */
.error-message[b-3ridgpbcyu] {
    padding: 1px 4px;
    border-radius: 2px;
}

/* Quick Stats Card styling */
.stat-card[b-3ridgpbcyu] {
    text-align: center;
    padding: 0.5rem;
}

.stat-value[b-3ridgpbcyu] {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
}

.stat-label[b-3ridgpbcyu] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* Error severity badges */
.severity-high[b-3ridgpbcyu] {
    color: var(--mud-palette-error-darken);
    background-color: var(--mud-palette-error-lighten);
}

.severity-medium[b-3ridgpbcyu] {
    color: var(--mud-palette-warning-darken);
    background-color: var(--mud-palette-warning-lighten);
}

.severity-low[b-3ridgpbcyu] {
    color: var(--mud-palette-info-darken);
    background-color: var(--mud-palette-info-lighten);
}

/* Date preset chips */
.date-preset-chip[b-3ridgpbcyu] {
    transition: all 0.2s ease;
}

.date-preset-chip:hover[b-3ridgpbcyu] {
    transform: translateY(-1px);
}

/* Filter panel adjustments */
[b-3ridgpbcyu] .filter-panel-content .mud-grid {
    gap: 8px;
}

/* Auto-fit table to prevent horizontal scrollbar */
[b-3ridgpbcyu] .auto-fit-table .mud-table {
    table-layout: fixed;
    width: 100%;
}

[b-3ridgpbcyu] .auto-fit-table .mud-table-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Pages/Audit/AuditFluxLogs.razor.rz.scp.css */
/* AuditFluxLogs Component Styles */

/* Compact table styling */
[b-pg4j7x3fyd] .compact-table .mud-table-cell {
    padding: 2px 4px !important;
    font-size: 0.75rem !important;
}

[b-pg4j7x3fyd] .compact-table .mud-table-cell * {
    font-size: inherit !important;
}

[b-pg4j7x3fyd] .compact-table .mud-chip {
    font-size: 0.7rem !important;
}

/* Aggregation section */
.aggregation-section[b-pg4j7x3fyd] {
    transition: max-height 0.3s ease-in-out;
}

.aggregation-chip[b-pg4j7x3fyd] {
    cursor: pointer;
    transition: transform 0.1s ease-in-out;
}

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

.aggregation-chip.selected[b-pg4j7x3fyd] {
    border: 2px solid currentColor;
}

/* Cell styling */
.cell-text[b-pg4j7x3fyd] {
    font-size: 0.75rem;
}

.cell-label[b-pg4j7x3fyd] {
    font-size: 0.65rem;
    color: var(--mud-palette-text-secondary);
}

.cell-link[b-pg4j7x3fyd] {
    font-size: 0.75rem;
}

/* Value styling */
.value-text[b-pg4j7x3fyd] {
    padding: 1px 4px;
}

/* Quick Stats Card styling */
.stat-card[b-pg4j7x3fyd] {
    text-align: center;
    padding: 0.5rem;
}

.stat-value[b-pg4j7x3fyd] {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
}

.stat-label[b-pg4j7x3fyd] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* View mode toggle */
.view-toggle[b-pg4j7x3fyd] {
    border-radius: 8px;
}

/* Auto-fit table to prevent horizontal scrollbar */
[b-pg4j7x3fyd] .auto-fit-table .mud-table-container {
    overflow-x: hidden;
}

[b-pg4j7x3fyd] .auto-fit-table .mud-table {
    table-layout: fixed;
    width: 100%;
}

[b-pg4j7x3fyd] .auto-fit-table .mud-table-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 0;
}

/* Date preset chips */
.date-preset-chip[b-pg4j7x3fyd] {
    transition: all 0.2s ease;
}

.date-preset-chip:hover[b-pg4j7x3fyd] {
    transform: translateY(-1px);
}
/* /Components/Pages/Dataset/Dashboard/FileDifficultyStats.razor.rz.scp.css */
/* FileDifficultyStats Component Styles */

/* Quick Stats Card styling */
.stat-card[b-3ze099x5o8] {
    text-align: center;
    padding: 0.75rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover[b-3ze099x5o8] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-value[b-3ze099x5o8] {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
}

.stat-label[b-3ze099x5o8] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 0.25rem;
}

/* Difficulty card specific */
.difficulty-card .stat-value[b-3ze099x5o8] {
    font-size: 1.5rem;
}

/* Table styling */
[b-3ze099x5o8] .mud-simple-table th {
    font-weight: 600;
    background-color: var(--mud-palette-background-grey);
}

[b-3ze099x5o8] .mud-simple-table td {
    vertical-align: middle;
}

/* Progress bar in table */
[b-3ze099x5o8] .mud-progress-linear {
    border-radius: 4px;
}

/* Chart container */
[b-3ze099x5o8] .mud-chart {
    margin: 0 auto;
}

/* Alert styling */
[b-3ze099x5o8] .mud-alert {
    margin-bottom: 0;
}
/* /Components/Pages/Dataset/FileUpload/FileDataMappingsNew.razor.rz.scp.css */
/* FileDataMappingsNew - Scoped styles */

/* Splitter container */
.splitter-container[b-o2hotr1peo] {
    min-height: calc(100vh - 220px);
    background-color: transparent;
}

/* Preview grid (standardization step) */
.preview-grid[b-o2hotr1peo]  .mud-grid-item {
    min-height: 300px;
}

/* Mapping workspace — no background */
.mapping-workspace[b-o2hotr1peo] {
    background-color: transparent;
}

/* Pane content wrapper */
.pane-content[b-o2hotr1peo] {
    padding: 8px;
    height: 100%;
    overflow-y: auto;
}

/* Responsive adjustments */
@media (max-width: 960px) {
    .splitter-container[b-o2hotr1peo] {
        min-height: auto;
    }
    
    .pane-content[b-o2hotr1peo] {
        padding: 4px;
    }
}

/* Dark mode support */
[b-o2hotr1peo] .mud-theme-dark .pane-content {
    background-color: transparent;
}
/* /Components/Pages/FamilyDataPoint/SearchFamilyDataPoints.razor.rz.scp.css */
[b-l10jpvysos] .drag-item {
    cursor: grab;
}

[b-l10jpvysos] .drag-item:active {
    cursor: grabbing;
}

[b-l10jpvysos] .panel-container {
    min-height: 500px;
}
/* /Components/Pages/FinancialDataPoint/CreateDataPoint.razor.rz.scp.css */
[b-cx41yhx1qv] .mud-drop-item-draghandle {
    cursor: move;
}

[b-cx41yhx1qv] .drag-indicator {
    cursor: move;
}

[b-cx41yhx1qv] .element-card {
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
    margin-bottom: 8px;
}

[b-cx41yhx1qv] .element-card:hover {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[b-cx41yhx1qv] .drag-item {
    opacity: 0.7;
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
    border: 2px dashed var(--mud-palette-primary) !important;
}

[b-cx41yhx1qv] .drop-zone {
    min-height: 80px;
    border: 2px dashed transparent;
    transition: all 0.3s ease;
    padding: 4px;
}

[b-cx41yhx1qv] .drop-zone-active {
    border: 2px dashed var(--mud-palette-primary);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.05);
}

[b-cx41yhx1qv] .min-width-120 {
    min-width: 120px;
}

[b-cx41yhx1qv] .min-width-140 {
    min-width: 140px;
}

[b-cx41yhx1qv] .min-width-180 {
    min-width: 180px;
}

[b-cx41yhx1qv] .children-section,
[b-cx41yhx1qv] .parent-section {
    background-color: #f5f7fa;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[b-cx41yhx1qv] .children-table {
    background-color: transparent;
}

[b-cx41yhx1qv] .treeview-node {
    background-color: #f5f7fa;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s;
    min-width: 480px;
    width: 100%;
    max-width: 900px;
}

[b-cx41yhx1qv] .treeview-node:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

[b-cx41yhx1qv] .dragged-highlight {
    background-color: #e3f2fd !important;
    border: 2px solid var(--mud-palette-primary) !important;
    opacity: 0.85;
    box-shadow: 0 4px 16px rgba(33, 150, 243, 0.2) !important;
}

[b-cx41yhx1qv] .treeview-node-list {
    background-color: #F5F7FE !important;
    border: 1px solid #58B1E6 !important;
}

[b-cx41yhx1qv] .tree-node-width-70 {
    width: 70% !important;
}
/* /Components/Pages/Flux/FeedSearch.razor.rz.scp.css */
/* FluxSearch.razor - Responsive & layout styles */


/* Compact checkbox column */
[b-eelrobjsto] .hm-col-checkbox {
    width: 48px;
    max-width: 48px;
    padding: 4px 8px !important;
}

/* Compact actions column */
[b-eelrobjsto] .hm-col-actions {
    width: 48px;
    max-width: 48px;
    padding: 4px !important;
}



/* Workflow active row highlight */
[b-eelrobjsto] .hm-flux-grid .workflow-active-row {
    background-color: rgba(66, 165, 245, 0.06);
}

/* Workflow icon pulse animation */
[b-eelrobjsto] .workflow-status-icon {
    animation: pulse-icon-b-eelrobjsto 1.5s infinite ease-in-out;
}

@keyframes pulse-icon-b-eelrobjsto {
    0% {
        opacity: 0.7;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        opacity: 0.7;
        transform: scale(1);
    }
}
/* /Components/Pages/Flux/FluxWorkflowLive.razor.rz.scp.css */
/* FluxWorkflowLive Component Scoped Styles
   ─── Uses MudBlazor CSS variables for light/dark mode support ─── */

/* ── Workflow Selector Table ── */
[b-ingredu7p1] .workflow-selector-table {
    width: 100%;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

[b-ingredu7p1] .workflow-selector-table th {
    padding: 4px 10px !important;
    font-size: 0.75rem;
}

[b-ingredu7p1] .workflow-selector-table th:first-child,
[b-ingredu7p1] .workflow-selector-table td:first-child {
    text-align: left;
}

[b-ingredu7p1] .workflow-selector-table td {
    padding: 4px 10px !important;
    text-align: center;
}

[b-ingredu7p1] .workflow-selector-table td:nth-child(1),
[b-ingredu7p1] .workflow-selector-table td:nth-child(2) {
    text-align: left;
}

[b-ingredu7p1] .workflow-active-row {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent) !important;
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

[b-ingredu7p1] .workflow-status-cell {
    width: 36px;
    padding: 4px 6px !important;
    text-align: center !important;
    vertical-align: middle;
}

[b-ingredu7p1] .workflow-status-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    vertical-align: middle;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 25%, transparent);
}

[b-ingredu7p1] .workflow-status-notstarted {
    background-color: var(--mud-palette-text-disabled);
}

[b-ingredu7p1] .workflow-status-completed {
    background-color: var(--mud-palette-success);
}

[b-ingredu7p1] .workflow-status-failed {
    background-color: var(--mud-palette-error);
    animation: workflow-status-pulse-b-ingredu7p1 1.4s ease-in-out infinite;
}

[b-ingredu7p1] .workflow-status-cancelled {
    background-color: var(--mud-palette-warning);
}

@keyframes workflow-status-pulse-b-ingredu7p1 {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-error) 60%, transparent); }
    50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--mud-palette-error) 0%, transparent); }
}

.workflow-container[b-ingredu7p1] {
    position: relative;
    width: 100%;
    min-height: 600px;
    overflow: hidden;
    background-color: var(--mud-palette-background);
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
}

/* Viewport for pan/zoom functionality */
[b-ingredu7p1] .workflow-viewport {
    position: relative;
    width: 100%;
    height: 80vh;
    min-height: 600px;
    overflow: hidden;
    background-color: var(--mud-palette-background);
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    cursor: grab;
    box-sizing: border-box;
}

[b-ingredu7p1] .workflow-viewport:active {
    cursor: grabbing;
}

/* Main layout with timeline sidebar */
[b-ingredu7p1] .workflow-main-layout {
    position: relative;
    display: flex;
    gap: 16px;
}

/* Timeline Sidebar */
[b-ingredu7p1] .timeline-sidebar {
    width: 300px;
    background: var(--mud-palette-surface);
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}

[b-ingredu7p1] .timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background);
}

[b-ingredu7p1] .timeline-content {
    overflow-y: auto;
    flex: 1;
    padding: 8px;
}

[b-ingredu7p1] .timeline-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--mud-palette-background);
}

[b-ingredu7p1] .timeline-item:hover {
    background: var(--mud-palette-background-grey);
    transform: translateX(4px);
}

[b-ingredu7p1] .timeline-item-selected {
    background: rgba(33, 150, 243, 0.12) !important;
    border-left: 3px solid #2196F3;
}

[b-ingredu7p1] .timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
}

[b-ingredu7p1] .timeline-dot.status-success {
    background: #4CAF50;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.5);
}

[b-ingredu7p1] .timeline-dot.status-failed {
    background: #f44336;
    box-shadow: 0 0 8px rgba(244, 67, 54, 0.5);
    animation: pulse-error-b-ingredu7p1 2s infinite;
}

[b-ingredu7p1] .timeline-dot.status-cancelled {
    background: #E65100;
    box-shadow: 0 0 8px rgba(230, 81, 0, 0.5);
}

[b-ingredu7p1] .timeline-dot.status-running {
    background: #2196F3;
    animation: pulse-running-b-ingredu7p1 1.5s infinite;
}

[b-ingredu7p1] .timeline-dot.status-pending {
    background: #FF9800;
}

[b-ingredu7p1] .timeline-dot.status-ignored {
    background: #9E9E9E;
}

@keyframes pulse-error-b-ingredu7p1 {
    0%, 100% {
        box-shadow: 0 0 8px rgba(244, 67, 54, 0.5);
    }
    50% {
        box-shadow: 0 0 16px rgba(244, 67, 54, 0.8);
    }
}

@keyframes pulse-running-b-ingredu7p1 {
    0%, 100% {
        box-shadow: 0 0 8px rgba(33, 150, 243, 0.5);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 16px rgba(33, 150, 243, 0.8);
        transform: scale(1.2);
    }
}

[b-ingredu7p1] .timeline-details {
    flex: 1;
    min-width: 0;
}

[b-ingredu7p1] .timeline-time {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 2px;
}

[b-ingredu7p1] .timeline-title {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-ingredu7p1] .timeline-duration {
    font-size: 0.75rem;
    color: var(--mud-palette-text-disabled);
    margin-top: 2px;
}

[b-ingredu7p1] .timeline-toggle-btn {
    position: fixed !important;
    top: 140px !important;
    left: 20px !important;
    z-index: 100 !important;
}

/* Workflow Statistics Bar */
[b-ingredu7p1] .workflow-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}

[b-ingredu7p1] .stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
}

[b-ingredu7p1] .stat-label {
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

[b-ingredu7p1] .stat-value {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

[b-ingredu7p1] .stat-divider {
    border-left: 2px solid var(--mud-palette-lines-default);
    padding-left: 20px;
}

[b-ingredu7p1] .progress-gauge {
    display: flex;
    align-items: center;
}

[b-ingredu7p1] .gauge-text {
    font-size: 0.625rem;
    font-weight: bold;
}

/* Canvas zoom controls */
[b-ingredu7p1] .canvas-controls {
    position: absolute;
    top: 200px;
    right: 30px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--mud-palette-surface);
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--mud-palette-lines-default);
}

[b-ingredu7p1] .workflow-canvas {
    position: relative;
    width: max-content; /* Take width needed by content */
    min-width: 100%;
    min-height: 100%;
    transform-origin: 0 0;
    transition: transform 0.1s ease-out;
    box-sizing: border-box;
}

/* Search input styles */
[b-ingredu7p1] .search-input {
    transition: all 0.3s ease;
}

[b-ingredu7p1] .search-input:focus-within {
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

/* ========================================
   TENANT ZONES STYLES
   ======================================== */

/* Container for all tenant groups - horizontal layout, no wrap */
[b-ingredu7p1] .tenant-groups-container {
    display: flex;
    flex-direction: row;
    gap: 24px;
    padding: 20px;
    width: max-content; /* Take the width needed by content */
    min-width: 100%;
    box-sizing: border-box;
    flex-wrap: nowrap;
    align-items: flex-start;
}

/* Individual tenant zone - takes width of its content */
[b-ingredu7p1] .tenant-zone {
    position: relative;
    flex: 0 0 auto;
    min-width: 300px;
    width: max-content;
    background: var(--mud-palette-surface);
    border-radius: 12px;
    border: 2px solid var(--mud-palette-lines-default);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: visible;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

[b-ingredu7p1] .tenant-zone:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* Tenant zone header */
[b-ingredu7p1] .tenant-zone-header {
    display: flex;
    align-items: center;
    padding: 12px 16px 12px 48px;
    background: var(--mud-palette-background);
    border-bottom: 2px solid var(--mud-palette-lines-default);
    font-weight: 600;
    font-size: 0.95rem;
}

[b-ingredu7p1] .tenant-zone-title {
    flex: 1;
    color: var(--mud-palette-text-primary);
}

/* Tenant logo - circular avatar positioned in top-left corner */
[b-ingredu7p1] .tenant-logo-container {
    position: absolute;
    top: -20px;
    left: -20px;
    z-index: 10;
}

[b-ingredu7p1] .tenant-logo {
    width: 56px !important;
    height: 56px !important;
    border: 3px solid var(--mud-palette-surface);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    font-size: 1rem;
    font-weight: 600;
}

[b-ingredu7p1] .tenant-logo-default {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

[b-ingredu7p1] .tenant-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Tenant zone content - allows horizontal children layout */
[b-ingredu7p1] .tenant-zone-content {
    padding: 16px;
    overflow: visible;
    box-sizing: border-box;
    width: max-content; /* Take width needed by content */
    min-width: 100%;
}

/* Color variants for different tenants */
[b-ingredu7p1] .tenant-zone-0 {
    border-color: #D32F2F;
}
[b-ingredu7p1] .tenant-zone-0 .tenant-zone-header {
    background: linear-gradient(90deg, rgba(211, 47, 47, 0.12) 0%, transparent 100%);
    border-bottom-color: rgba(211, 47, 47, 0.3);
}

[b-ingredu7p1] .tenant-zone-1 { border-color: #1976D2; }
[b-ingredu7p1] .tenant-zone-1 .tenant-zone-header {
    background: linear-gradient(90deg, rgba(25, 118, 210, 0.12) 0%, transparent 100%);
    border-bottom-color: rgba(25, 118, 210, 0.3);
}

[b-ingredu7p1] .tenant-zone-2 { border-color: #388E3C; }
[b-ingredu7p1] .tenant-zone-2 .tenant-zone-header {
    background: linear-gradient(90deg, rgba(56, 142, 60, 0.12) 0%, transparent 100%);
    border-bottom-color: rgba(56, 142, 60, 0.3);
}

[b-ingredu7p1] .tenant-zone-3 { border-color: #F57C00; }
[b-ingredu7p1] .tenant-zone-3 .tenant-zone-header {
    background: linear-gradient(90deg, rgba(245, 124, 0, 0.12) 0%, transparent 100%);
    border-bottom-color: rgba(245, 124, 0, 0.3);
}

[b-ingredu7p1] .tenant-zone-4 { border-color: #7B1FA2; }
[b-ingredu7p1] .tenant-zone-4 .tenant-zone-header {
    background: linear-gradient(90deg, rgba(123, 31, 162, 0.12) 0%, transparent 100%);
    border-bottom-color: rgba(123, 31, 162, 0.3);
}

[b-ingredu7p1] .tenant-zone-5 { border-color: #00796B; }
[b-ingredu7p1] .tenant-zone-5 .tenant-zone-header {
    background: linear-gradient(90deg, rgba(0, 121, 107, 0.12) 0%, transparent 100%);
    border-bottom-color: rgba(0, 121, 107, 0.3);
}

[b-ingredu7p1] .tenant-zone-null,
[b-ingredu7p1] .tenant-zone-global { border-color: #757575; }
[b-ingredu7p1] .tenant-zone-null .tenant-zone-header,
[b-ingredu7p1] .tenant-zone-global .tenant-zone-header {
    background: linear-gradient(90deg, rgba(117, 117, 117, 0.12) 0%, transparent 100%);
    border-bottom-color: rgba(117, 117, 117, 0.3);
}

/* ========================================
   END TENANT ZONES STYLES
   ======================================== */

/* Tenant zone column - wraps each zone with a vertical connector from the branch */
[b-ingredu7p1] .tenant-zone-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 0 0 auto;
    box-sizing: border-box;
}

/* The vertical-branch inside tenant-zone-column should connect into the zone */
[b-ingredu7p1] .tenant-zone-column > .vertical-branch {
    height: 20px;
    width: 2px;
    background-color: #B0BEC5;
    margin-bottom: 0;
    flex-shrink: 0;
}

/* Horizontal branch line variant for tenant zones - wider to span all zones */
[b-ingredu7p1] .tenant-branch-container {
    width: 90%;
    max-width: none;
}

/* Diagram styles */
[b-ingredu7p1] .workflow-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
}

[b-ingredu7p1] .workflow-node-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
    position: relative;
    width: max-content; /* Take width needed by content */
    min-width: 180px;
    box-sizing: border-box;
}

[b-ingredu7p1] .workflow-node {
    background-color: var(--mud-palette-surface);
    border-radius: 8px;
    box-shadow: var(--mud-elevation-2);
    padding: 12px 12px 20px 12px;
    cursor: default;
    transition: all 0.2s ease;
    min-width: 180px;
    max-width: 250px;
    text-align: center;
    border-left: 4px solid var(--mud-palette-lines-default);
    position: relative;
    animation: nodeAppear-b-ingredu7p1 0.5s ease-out;
}

@keyframes nodeAppear-b-ingredu7p1 {
    0% {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

[b-ingredu7p1] .workflow-node:hover {
    box-shadow: var(--mud-elevation-4);
}

[b-ingredu7p1] .node-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

[b-ingredu7p1] .node-header {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    width: 100%;
    position: relative;
}

[b-ingredu7p1] .node-header i {
    margin-right: 8px;
    flex-shrink: 0;
}

[b-ingredu7p1] .node-step-id-bottom {
    position: absolute;
    left: 4px;
    bottom: 4px;
    z-index: 1;
}

[b-ingredu7p1] .step-id-link {
    font-size: 0.65rem !important;
    color: var(--mud-palette-text-secondary) !important;
    text-decoration: none !important;
    font-weight: 500;
    padding: 1px 4px;
    background-color: var(--mud-palette-background-grey);
    border-radius: 3px;
    transition: all 0.2s ease;
}

[b-ingredu7p1] .step-id-link:hover {
    background-color: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary) !important;
    text-decoration: underline !important;
}

[b-ingredu7p1] .step-id-link.related-link {
    margin-left: 4px;
    background-color: rgba(33, 150, 243, 0.1);
    color: #2196F3 !important;
    border: 1px solid rgba(33, 150, 243, 0.3);
}

[b-ingredu7p1] .step-id-link.related-link:hover {
    background-color: rgba(33, 150, 243, 0.2);
    color: #1976D2 !important;
    border-color: rgba(33, 150, 243, 0.5);
}

[b-ingredu7p1] .node-visibility-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

[b-ingredu7p1] .visibility-toggle-btn {
    padding: 2px !important;
    min-width: unset !important;
    width: 24px !important;
    height: 24px !important;
}

[b-ingredu7p1] .node-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--mud-palette-text-primary);
    flex-grow: 1;
    line-height: 1.2;
    margin-bottom: 0;
    padding-right: 30px;
}

[b-ingredu7p1] .database-chip {
    font-size: 0.65rem !important;
    height: 18px !important;
    padding: 0 6px !important;
    font-weight: 500;
}

[b-ingredu7p1] .node-body {
    padding: 5px 0;
    margin-bottom: 8px;
}

[b-ingredu7p1] .node-description {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
    white-space: normal;
    line-height: 1.3;
}

[b-ingredu7p1] .node-completion-time {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 4px;
    font-style: italic;
}

[b-ingredu7p1] .node-details {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding-top: 8px;
    margin-top: auto;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

[b-ingredu7p1] .detail-item {
    display: inline-flex;
    align-items: center;
    padding: 2px 5px;
    border-radius: 4px;
    background-color: var(--mud-palette-background-grey);
    line-height: 1;
}

[b-ingredu7p1] .detail-item.success {
    background-color: rgba(76, 175, 80, 0.15);
    color: #4CAF50;
    font-weight: 500;
}

[b-ingredu7p1] .detail-item.warning {
    background-color: rgba(255, 193, 7, 0.15);
    color: #FFA726;
}

[b-ingredu7p1] .detail-item.error-link {
    background-color: rgba(244, 67, 54, 0.15);
    color: #f44336;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

[b-ingredu7p1] .detail-item.error-link:hover {
    background-color: rgba(244, 67, 54, 0.25);
    transform: translateY(-1px);
}

/* Connection lines */
[b-ingredu7p1] .arrow-down {
    height: 20px;
    width: 2px;
    background-color: var(--mud-palette-lines-default);
    margin: 0 auto;
    position: relative;
}

[b-ingredu7p1] .arrow-down::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid var(--mud-palette-lines-default);
}

/* Extended arrow when crossing a workflow zone boundary */
[b-ingredu7p1] .arrow-down-zone-transition {
    height: 48px;
    border-left: 2px dashed var(--mud-palette-lines-default);
    background-color: transparent;
    width: 0;
}

[b-ingredu7p1] .arrow-down-zone-transition::after {
    border-top-color: var(--mud-palette-lines-default);
}

/* Extended vertical branch when crossing a workflow zone boundary */
[b-ingredu7p1] .vertical-branch-zone-transition {
    height: 48px;
    border-left: 2px dashed var(--mud-palette-lines-default);
    background-color: transparent;
    width: 0;
}

[b-ingredu7p1] .branch-container {
    width: 90%;
    height: 2px;
    background-color: var(--mud-palette-lines-default);
    margin: 0 auto;
    position: relative;
    z-index: -1;
    max-width: 800px;
}

/* Status classes */
[b-ingredu7p1] .status-default {
    border-left-color: var(--mud-palette-lines-default);
}

[b-ingredu7p1] .status-info {
    border-left-color: #2196F3;
}

[b-ingredu7p1] .status-success {
    border-left-color: #4CAF50;
}

[b-ingredu7p1] .status-warning {
    border-left-color: #FFC107;
}

[b-ingredu7p1] .status-error {
    border-left-color: #F44336;
}

[b-ingredu7p1] .status-secondary {
    border-left-color: #9C27B0;
}

[b-ingredu7p1] .status-cancelled {
    border-left-color: #E65100; /* Dark orange */
}

[b-ingredu7p1] .node-completed {
    background-color: rgba(76, 175, 80, 0.1);
}

[b-ingredu7p1] .node-inprogress {
    background-color: rgba(33, 150, 243, 0.05);
    border-style: dashed;
    border-width: 1px;
}

/* In-progress node animation with pulsing border */
[b-ingredu7p1] .node-running {
    animation: pulse-border-b-ingredu7p1 2s ease-in-out infinite;
    border-color: #2196F3 !important;
}

@keyframes pulse-border-b-ingredu7p1 {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(33, 150, 243, 0);
    }
}

/* Progress indicator styling for in-progress nodes */
[b-ingredu7p1] .node-progress-indicator {
    margin-top: 8px;
    width: 100%;
}

[b-ingredu7p1] .node-inprogress-time {
    color: #2196F3;
    font-style: italic;
}

[b-ingredu7p1] .node-failed {
    background-color: rgba(244, 67, 54, 0.1);
    border-left-color: #F44336;
}

[b-ingredu7p1] .node-cancelled {
    background-color: rgba(230, 81, 0, 0.1); /* Dark orange with transparency */
    border-left-color: #E65100;
}

/* Badge styles */
[b-ingredu7p1] .badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: bold;
    color: white;
}

[b-ingredu7p1] .badge.success {
    background-color: #4CAF50;
}

[b-ingredu7p1] .badge.info {
    background-color: #2196F3;
}

[b-ingredu7p1] .badge.warning {
    background-color: #FFC107;
}

[b-ingredu7p1] .badge.error {
    background-color: #F44336;
}

[b-ingredu7p1] .badge.duration {
    background-color: #9C27B0;
    opacity: 0.7;
}

[b-ingredu7p1] .workflow-node:hover .badge {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Children container styles */
[b-ingredu7p1] .children-container {
    display: flex;
    flex-wrap: nowrap; /* Never wrap - always horizontal */
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    width: max-content; /* Take width needed by content */
    min-width: 100%;
    overflow: visible;
    box-sizing: border-box;
}

[b-ingredu7p1] .multi-children-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* Never wrap - always horizontal */
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    margin-top: 10px;
    width: max-content; /* Take width needed by content */
    min-width: 100%;
    overflow: visible;
    box-sizing: border-box;
}

[b-ingredu7p1] .child-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    min-width: 180px;
    width: max-content; /* Take width needed by content */
    flex: 0 0 auto; /* Don't grow or shrink */
    box-sizing: border-box;
}

[b-ingredu7p1] .vertical-branch {
    height: 20px;
    width: 2px;
    background-color: var(--mud-palette-lines-default);
    margin-bottom: 5px;
}

[b-ingredu7p1] .node-children.single-child {
    display: flex;
    flex-direction: column;
    align-items: center;
}

[b-ingredu7p1] .node-header .mud-progress-circular {
    margin-right: 8px;
}

[b-ingredu7p1] .node-error-message {
    font-size: 0.8rem;
    color: #F44336;
    margin-top: 4px;
    font-style: italic;
    border-left: 2px solid #F44336;
    padding-left: 8px;
    margin-bottom: 8px;
    white-space: normal;
    line-height: 1.3;
}

[b-ingredu7p1] .node-failed-time {
    color: #d32f2f;
}

/* Audit links */
[b-ingredu7p1] .audit-link {
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

[b-ingredu7p1] .audit-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

[b-ingredu7p1] .audit-link.success {
    color: #4CAF50;
}

[b-ingredu7p1] .audit-link.info {
    color: #2196F3;
}

/* Hidden/ignored states */
[b-ingredu7p1] .node-hidden {
    opacity: 0.4;
    filter: grayscale(0.7);
    background-color: var(--mud-palette-background-grey) !important;
    border-color: var(--mud-palette-lines-default) !important;
    transition: all 0.3s ease;
}

[b-ingredu7p1] .node-hidden:hover {
    opacity: 0.7;
    filter: grayscale(0.3);
}

[b-ingredu7p1] .node-hidden .node-title {
    color: var(--mud-palette-text-secondary) !important;
}

[b-ingredu7p1] .node-hidden .detail-item {
    opacity: 0.6;
}

/* Highlight animation */
[b-ingredu7p1] .node-highlight-blink {
    animation: highlightBlink-b-ingredu7p1 3s ease-in-out;
    border: 2px solid #ff9800 !important;
    box-shadow: 0 0 15px rgba(255, 152, 0, 0.6) !important;
}

@keyframes highlightBlink-b-ingredu7p1 {
    0%, 100% {
        background-color: rgba(255, 152, 0, 0.1);
        transform: scale(1);
        box-shadow: 0 0 15px rgba(255, 152, 0, 0.6);
    }
    16.67%, 50%, 83.33% {
        background-color: rgba(255, 152, 0, 0.4);
        transform: scale(1.08);
        box-shadow: 0 0 25px rgba(255, 152, 0, 0.8);
    }
    33.33%, 66.67% {
        background-color: rgba(255, 152, 0, 0.15);
        transform: scale(1.02);
        box-shadow: 0 0 10px rgba(255, 152, 0, 0.5);
    }
}

/* Floating buttons */
[b-ingredu7p1] .floating-refresh-btn {
    position: fixed !important;
    top: 80px !important;
    right: 20px !important;
    z-index: 1000 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

[b-ingredu7p1] .floating-refresh-btn:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}

[b-ingredu7p1] .floating-refresh-btn:active {
    transform: scale(0.95) !important;
}

[b-ingredu7p1] .node-actions {
    margin-top: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--mud-palette-lines-default);
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* Details button — primary CTA on each node */
[b-ingredu7p1] .node-details-btn {
    font-size: 0.75rem !important;
    text-transform: none !important;
    padding: 2px 8px !important;
    min-width: unset !important;
    min-height: unset !important;
    height: 24px !important;
}

/* Animated badges and icons */
[b-ingredu7p1] .badge-animated {
    animation: badgePulse-b-ingredu7p1 3s ease-in-out infinite;
}

@keyframes badgePulse-b-ingredu7p1 {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

[b-ingredu7p1] .icon-success-animated {
    animation: successCheckmark-b-ingredu7p1 0.6s ease-in-out;
}

@keyframes successCheckmark-b-ingredu7p1 {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

[b-ingredu7p1] .icon-error-pulse {
    animation: errorPulse-b-ingredu7p1 1.5s ease-in-out infinite;
}

[b-ingredu7p1] .icon-warning-pulse {
    color: #FF9800;
    animation: warningPulse-b-ingredu7p1 2s ease-in-out infinite;
}

[b-ingredu7p1] .icon-cancelled {
    color: #E65100;
}

@keyframes errorPulse-b-ingredu7p1 {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

@keyframes warningPulse-b-ingredu7p1 {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* ===================== */
/* Workflow Zone Styles   */
/* ===================== */

[b-ingredu7p1] .workflow-zones-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: max-content;
    min-width: 100%;
    padding: 16px;
}

[b-ingredu7p1] .workflow-zone-band {
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background-color: var(--mud-palette-surface);
    overflow: visible;
    transition: border-color 0.3s ease;
}

[b-ingredu7p1] .workflow-zone-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-background);
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

[b-ingredu7p1] .workflow-zone-header:hover {
    filter: brightness(0.95);
}

[b-ingredu7p1] .zone-collapse-icon {
    transition: transform 0.3s ease;
    color: var(--mud-palette-text-secondary);
}

[b-ingredu7p1] .zone-collapsed .workflow-zone-header {
    border-radius: 10px;
    border-bottom: none;
}

[b-ingredu7p1] .zone-collapsed {
    opacity: 0.85;
}

[b-ingredu7p1] .zone-icon {
    font-size: 1.4rem;
    opacity: 0.8;
}

[b-ingredu7p1] .zone-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--mud-palette-text-primary);
    letter-spacing: 0.02em;
}

[b-ingredu7p1] .zone-stats {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

[b-ingredu7p1] .zone-stat-chip {
    font-size: 0.75rem;
    padding: 2px 10px;
    border-radius: 12px;
    font-weight: 500;
    background-color: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
}

[b-ingredu7p1] .workflow-zone-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 80px;
    overflow: visible;
}

/* Within a zone, root steps should lay out horizontally when multiple */
[b-ingredu7p1] .workflow-zone-content > .workflow-diagram {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    gap: 30px;
    width: max-content;
    min-width: 100%;
    padding: 20px;
}

/* Zone color variants */
[b-ingredu7p1] .zone-raw {
    border-color: rgba(244, 67, 54, 0.4);
}

[b-ingredu7p1] .zone-raw .workflow-zone-header {
    background: linear-gradient(90deg, rgba(244, 67, 54, 0.08) 0%, transparent 100%);
    border-bottom-color: rgba(244, 67, 54, 0.2);
}

[b-ingredu7p1] .zone-raw .zone-icon,
[b-ingredu7p1] .zone-raw .zone-title {
    color: #F44336;
}

[b-ingredu7p1] .zone-normalized {
    border-color: rgba(33, 150, 243, 0.4);
}

[b-ingredu7p1] .zone-normalized .workflow-zone-header {
    background: linear-gradient(90deg, rgba(33, 150, 243, 0.08) 0%, transparent 100%);
    border-bottom-color: rgba(33, 150, 243, 0.2);
}

[b-ingredu7p1] .zone-normalized .zone-icon,
[b-ingredu7p1] .zone-normalized .zone-title {
    color: #2196F3;
}

[b-ingredu7p1] .zone-refined {
    border-color: rgba(76, 175, 80, 0.4);
}

[b-ingredu7p1] .zone-refined .workflow-zone-header {
    background: linear-gradient(90deg, rgba(76, 175, 80, 0.08) 0%, transparent 100%);
    border-bottom-color: rgba(76, 175, 80, 0.2);
}

[b-ingredu7p1] .zone-refined .zone-icon,
[b-ingredu7p1] .zone-refined .zone-title {
    color: #4CAF50;
}

/* Cross-zone connection indicator */
[b-ingredu7p1] .zone-transition-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 14px;
    margin: 8px auto;
    border-radius: 16px;
    background-color: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: default;
    border: 1px dashed var(--mud-palette-lines-default);
}

[b-ingredu7p1] .zone-transition-indicator .mud-icon-root {
    font-size: 1rem;
}

/* Cross-zone connection links between zone bands */
[b-ingredu7p1] .zone-cross-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
}

[b-ingredu7p1] .zone-cross-link-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

[b-ingredu7p1] .zone-cross-link-from,
[b-ingredu7p1] .zone-cross-link-to {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-background-grey);
    padding: 2px 10px;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
}

[b-ingredu7p1] .zone-cross-link-arrow {
    width: 2px;
    height: 24px;
    background-color: var(--mud-palette-lines-default);
    position: relative;
}

[b-ingredu7p1] .zone-cross-link-arrow::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid var(--mud-palette-lines-default);
}
/* /Components/Pages/Flux/FluxWorkflowLiveNew.razor.rz.scp.css */
/* FluxWorkflowLiveNew.razor.css — scoped styles for the tree-based workflow page */

/* Main container */
.wf-v2-container[b-jr4jwjz00t] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px;
    min-height: calc(100vh - 200px);
    position: relative;
}

/* Toolbar row */
.wf-v2-toolbar[b-jr4jwjz00t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0;
}

/* ========================================
   VIEWPORT & CANVAS (Pan/Zoom)
   ======================================== */

[b-jr4jwjz00t] .workflow-viewport {
    position: relative;
    width: 100%;
    height: 75vh;
    min-height: 500px;
    overflow: hidden;
    background-color: var(--mud-palette-background);
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    cursor: grab;
    box-sizing: border-box;
}

[b-jr4jwjz00t] .workflow-viewport:active {
    cursor: grabbing;
}

[b-jr4jwjz00t] .workflow-canvas {
    position: relative;
    width: max-content;
    min-width: 100%;
    min-height: 100%;
    transform-origin: 0 0;
    transition: transform 0.1s ease-out;
    box-sizing: border-box;
}

/* Canvas zoom controls — fixed in top-right of viewport */
[b-jr4jwjz00t] .canvas-controls {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--mud-palette-surface);
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--mud-palette-lines-default);
}

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

@media (max-width: 960px) {
    .wf-v2-toolbar[b-jr4jwjz00t] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Pages/Flux/WorkflowLive/WorkflowDetailPanel.razor.rz.scp.css */
/* WorkflowDetailPanel.razor.css — scoped styles for the step detail drawer */

[b-97i8prhi71] .wf-detail-drawer {
    z-index: 1300;
}

/* Force drawer surface color for proper light/dark theme */
[b-97i8prhi71] .wf-detail-drawer .mud-drawer-content {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.wf-detail-header[b-97i8prhi71] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 3px solid var(--zone-color, var(--mud-palette-primary));
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    gap: 8px;
}

[b-97i8prhi71] .wf-detail-tabs .mud-tab {
    min-width: 100px;
    font-size: 0.8125rem;
}

[b-97i8prhi71] .wf-detail-tab-panel {
    padding: 0;
}

.wf-detail-content[b-97i8prhi71] {
    padding: 16px 20px;
    overflow-y: auto;
    max-height: calc(100vh - 170px);
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-surface);
}

/* Metrics cards row */
.wf-detail-metrics[b-97i8prhi71] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.wf-detail-metric[b-97i8prhi71] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    min-width: 100px;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
}

/* Clickable metric cards */
[b-97i8prhi71] .wf-detail-metric-link {
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

[b-97i8prhi71] .wf-detail-metric-link:hover {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

[b-97i8prhi71] .wf-detail-metric-error:hover {
    border-color: var(--mud-palette-error);
}

/* Detail table */
[b-97i8prhi71] .wf-detail-table {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    overflow: hidden;
}

[b-97i8prhi71] .wf-detail-table td {
    padding: 6px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
}

[b-97i8prhi71] .wf-detail-table tr:last-child td {
    border-bottom: none;
}

[b-97i8prhi71] .wf-detail-table td:first-child {
    width: 120px;
    background: var(--mud-palette-background);
}

/* Action buttons row */
.wf-detail-actions[b-97i8prhi71] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Inline table overrides */
[b-97i8prhi71] .wf-inline-table {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
}

[b-97i8prhi71] .wf-inline-table .mud-table-cell {
    font-size: 0.75rem;
    padding: 4px 8px;
}
/* /Components/Pages/Flux/WorkflowLive/WorkflowStepNode.razor.rz.scp.css */
/* WorkflowStepNode.razor.css — scoped styles for connected-box workflow node */
/* Ported from original FluxWorkflowLive.razor.css with zone enhancements */

[b-8sfwlatez5] .workflow-node {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 12px 12px 20px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 180px;
    max-width: 250px;
    text-align: center;
    border-left: 4px solid #ccc;
    position: relative;
    animation: nodeAppear-b-8sfwlatez5 0.5s ease-out;
    overflow: hidden;
}

@keyframes nodeAppear-b-8sfwlatez5 {
    0% {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

[b-8sfwlatez5] .workflow-node:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Pipeline branch: a grouping node, not work. Dashed outline and a tinted background so it reads as a
   container for the pipeline's subtree rather than as a step that processed rows. */
[b-8sfwlatez5] .workflow-node.node-pipeline-branch {
    background-color: rgba(33, 150, 243, 0.06);
    border: 1px dashed rgba(33, 150, 243, 0.55);
    border-left: 4px solid rgba(33, 150, 243, 0.55);
    box-shadow: none;
}

[b-8sfwlatez5] .workflow-node.node-pipeline-branch .node-title {
    font-style: italic;
}

/* Zone indicator bar at top of node */
[b-8sfwlatez5] .node-zone-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 8px 8px 0 0;
}

/* Status border colors */
[b-8sfwlatez5] .status-default {
    border-left-color: #ccc;
}

[b-8sfwlatez5] .status-info {
    border-left-color: #2196F3;
}

[b-8sfwlatez5] .status-success {
    border-left-color: #4CAF50;
}

[b-8sfwlatez5] .status-warning {
    border-left-color: #FFC107;
}

[b-8sfwlatez5] .status-error {
    border-left-color: #F44336;
}

[b-8sfwlatez5] .status-cancelled {
    border-left-color: #E65100;
}

/* Completion background states */
[b-8sfwlatez5] .node-completed {
    background-color: rgba(76, 175, 80, 0.1);
}

[b-8sfwlatez5] .node-failed {
    background-color: rgba(244, 67, 54, 0.1);
    border-left-color: #F44336;
}

[b-8sfwlatez5] .node-cancelled {
    background-color: rgba(230, 81, 0, 0.1);
    border-left-color: #E65100;
}

/* Running animation */
[b-8sfwlatez5] .node-running {
    animation: pulse-border-b-8sfwlatez5 2s ease-in-out infinite;
    border-color: #2196F3 !important;
}

@keyframes pulse-border-b-8sfwlatez5 {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(33, 150, 243, 0);
    }
}

/* Selected state */
[b-8sfwlatez5] .node-selected {
    border-color: var(--mud-palette-primary) !important;
    box-shadow: 0 0 0 2px var(--mud-palette-primary);
}

/* Highlight blink animation */
[b-8sfwlatez5] .node-highlight-blink {
    animation: highlightBlink-b-8sfwlatez5 3s ease-in-out;
    border: 2px solid #ff9800 !important;
    box-shadow: 0 0 15px rgba(255, 152, 0, 0.6) !important;
}

@keyframes highlightBlink-b-8sfwlatez5 {
    0%, 100% {
        background-color: rgba(255, 152, 0, 0.1);
        transform: scale(1);
        box-shadow: 0 0 15px rgba(255, 152, 0, 0.6);
    }
    16.67%, 50%, 83.33% {
        background-color: rgba(255, 152, 0, 0.4);
        transform: scale(1.08);
        box-shadow: 0 0 25px rgba(255, 152, 0, 0.8);
    }
    33.33%, 66.67% {
        background-color: rgba(255, 152, 0, 0.15);
        transform: scale(1.02);
        box-shadow: 0 0 10px rgba(255, 152, 0, 0.5);
    }
}

/* Hidden/ignored states */
[b-8sfwlatez5] .node-hidden {
    opacity: 0.4;
    filter: grayscale(0.7);
    background-color: #f0f0f0 !important;
    border-color: #ccc !important;
    transition: all 0.3s ease;
}

[b-8sfwlatez5] .node-hidden:hover {
    opacity: 0.7;
    filter: grayscale(0.3);
}

/* Node content */
[b-8sfwlatez5] .node-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Header */
[b-8sfwlatez5] .node-header {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    width: 100%;
    position: relative;
}

[b-8sfwlatez5] .node-status-icon {
    margin-right: 8px;
    flex-shrink: 0;
}

[b-8sfwlatez5] .node-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
    flex-grow: 1;
    line-height: 1.2;
    margin-bottom: 0;
    padding-right: 30px;
    text-align: left;
}

[b-8sfwlatez5] .node-zone-badge {
    position: absolute;
    top: -2px;
    right: 24px;
    font-weight: 500;
}

[b-8sfwlatez5] .node-visibility-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

[b-8sfwlatez5] .visibility-toggle-btn {
    padding: 2px !important;
    min-width: unset !important;
    width: 24px !important;
    height: 24px !important;
}

/* Database chip */
[b-8sfwlatez5] .database-chip {
    font-size: 0.65rem !important;
    height: 18px !important;
    padding: 0 6px !important;
    font-weight: 500;
    margin-bottom: 4px;
}

/* Body */
[b-8sfwlatez5] .node-body {
    padding: 5px 0;
    margin-bottom: 8px;
    width: 100%;
}

[b-8sfwlatez5] .node-description {
    font-size: 0.8rem;
    color: #555;
    margin-bottom: 4px;
    white-space: normal;
    line-height: 1.3;
    text-align: left;
}

[b-8sfwlatez5] .node-error-message {
    font-size: 0.8rem;
    color: #F44336;
    margin-top: 4px;
    font-style: italic;
    border-left: 2px solid #F44336;
    padding-left: 8px;
    margin-bottom: 8px;
    white-space: normal;
    line-height: 1.3;
    text-align: left;
}

[b-8sfwlatez5] .node-completion-time {
    font-size: 0.7rem;
    color: #666;
    margin-top: 4px;
    font-style: italic;
}

[b-8sfwlatez5] .node-failed-time {
    color: #d32f2f;
}

[b-8sfwlatez5] .node-inprogress-time {
    color: #2196F3;
    font-style: italic;
}

/* Metrics footer */
[b-8sfwlatez5] .node-details {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding-top: 8px;
    margin-top: auto;
    border-top: 1px solid #eee;
    font-size: 0.75rem;
    color: #555;
    width: 100%;
}

[b-8sfwlatez5] .detail-item {
    display: inline-flex;
    align-items: center;
    padding: 2px 5px;
    border-radius: 4px;
    background-color: #f0f0f0;
    line-height: 1;
}

[b-8sfwlatez5] .detail-item.success {
    background-color: rgba(76, 175, 80, 0.15);
    color: #4CAF50;
    font-weight: 500;
}

[b-8sfwlatez5] .detail-item.warning {
    background-color: rgba(255, 193, 7, 0.15);
    color: #FFA726;
}

[b-8sfwlatez5] .detail-item.error-link {
    background-color: rgba(244, 67, 54, 0.15);
    color: #f44336;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

[b-8sfwlatez5] .detail-item.error-link:hover {
    background-color: rgba(244, 67, 54, 0.25);
    transform: translateY(-1px);
}

[b-8sfwlatez5] .detail-item.info {
    background-color: rgba(33, 150, 243, 0.1);
    color: #2196F3;
}

[b-8sfwlatez5] .detail-item.duration {
    background-color: rgba(156, 39, 176, 0.1);
    color: #9C27B0;
}

/* Audit links */
[b-8sfwlatez5] .audit-link {
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

[b-8sfwlatez5] .audit-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Node actions */
[b-8sfwlatez5] .node-actions {
    margin-top: 8px;
    padding-top: 4px;
    border-top: 1px solid #eee;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 4px;
}

/* Step ID at bottom left */
[b-8sfwlatez5] .node-step-id-bottom {
    position: absolute;
    left: 4px;
    bottom: 4px;
    z-index: 1;
}

[b-8sfwlatez5] .step-id-link {
    font-size: 0.65rem !important;
    color: #666 !important;
    text-decoration: none !important;
    font-weight: 500;
    padding: 1px 4px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    transition: all 0.2s ease;
}

[b-8sfwlatez5] .step-id-link:hover {
    background-color: rgba(0, 0, 0, 0.1);
    color: #333 !important;
    text-decoration: underline !important;
}

[b-8sfwlatez5] .step-id-link.related-link {
    margin-left: 4px;
    background-color: rgba(33, 150, 243, 0.1);
    color: #2196F3 !important;
    border: 1px solid rgba(33, 150, 243, 0.3);
}

[b-8sfwlatez5] .step-id-link.related-link:hover {
    background-color: rgba(33, 150, 243, 0.2);
    color: #1976D2 !important;
    border-color: rgba(33, 150, 243, 0.5);
}

/* Icon animations */
[b-8sfwlatez5] .icon-success-animated {
    animation: successCheckmark-b-8sfwlatez5 0.6s ease-in-out;
}

@keyframes successCheckmark-b-8sfwlatez5 {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

[b-8sfwlatez5] .icon-error-pulse {
    animation: errorPulse-b-8sfwlatez5 1.5s ease-in-out infinite;
}

@keyframes errorPulse-b-8sfwlatez5 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
/* /Components/Pages/Flux/WorkflowLive/WorkflowTreeRenderer.razor.rz.scp.css */
/* WorkflowTreeRenderer.razor.css — tree layout styles ported from original FluxWorkflowLive */

/* Main diagram container */
[b-mw8k498un7] .workflow-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* Each node + its children */
[b-mw8k498un7] .workflow-node-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
    position: relative;
    width: max-content;
    min-width: 180px;
    box-sizing: border-box;
}

[b-mw8k498un7] .workflow-node-container.node-center {
    /* Root-level nodes */
}

/* Connection line: arrow down */
[b-mw8k498un7] .arrow-down {
    height: 20px;
    width: 2px;
    background-color: #B0BEC5;
    margin: 0 auto;
    position: relative;
}

[b-mw8k498un7] .arrow-down::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid #B0BEC5;
}

/* Horizontal branch line for multiple children */
[b-mw8k498un7] .branch-container {
    width: 90%;
    height: 2px;
    background-color: #B0BEC5;
    margin: 0 auto;
    position: relative;
    z-index: -1;
    max-width: 800px;
}

/* Children containers */
[b-mw8k498un7] .children-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    width: max-content;
    min-width: 100%;
    overflow: visible;
    box-sizing: border-box;
}

[b-mw8k498un7] .multi-children-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    margin-top: 10px;
    width: max-content;
    min-width: 100%;
    overflow: visible;
    box-sizing: border-box;
}

[b-mw8k498un7] .child-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    min-width: 180px;
    width: max-content;
    flex: 0 0 auto;
    box-sizing: border-box;
}

[b-mw8k498un7] .vertical-branch {
    height: 20px;
    width: 2px;
    background-color: #B0BEC5;
    margin-bottom: 5px;
}

[b-mw8k498un7] .node-children.single-child {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ========================================
   TENANT ZONES (ported from original)
   ======================================== */

[b-mw8k498un7] .tenant-groups-container {
    display: flex;
    flex-direction: row;
    gap: 24px;
    padding: 20px;
    width: max-content;
    min-width: 100%;
    box-sizing: border-box;
    flex-wrap: nowrap;
    align-items: flex-start;
}

[b-mw8k498un7] .tenant-zone {
    position: relative;
    flex: 0 0 auto;
    min-width: 300px;
    width: max-content;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 248, 248, 0.95) 100%);
    border-radius: 12px;
    border: 2px solid #e0e0e0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: visible;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

[b-mw8k498un7] .tenant-zone:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

[b-mw8k498un7] .tenant-zone-header {
    display: flex;
    align-items: center;
    padding: 12px 16px 12px 48px;
    background: linear-gradient(90deg, #f5f5f5 0%, #fafafa 100%);
    border-bottom: 2px solid #e0e0e0;
    font-weight: 600;
    font-size: 0.95rem;
}

[b-mw8k498un7] .tenant-zone-title {
    flex: 1;
    color: #333;
}

[b-mw8k498un7] .tenant-logo-container {
    position: absolute;
    top: -20px;
    left: -20px;
    z-index: 10;
}

[b-mw8k498un7] .tenant-logo {
    width: 56px !important;
    height: 56px !important;
    border: 3px solid white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    font-size: 1rem;
    font-weight: 600;
}

[b-mw8k498un7] .tenant-logo-default {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

[b-mw8k498un7] .tenant-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

[b-mw8k498un7] .tenant-zone-content {
    padding: 16px;
    overflow: visible;
    box-sizing: border-box;
    width: max-content;
    min-width: 100%;
}

/* Tenant color variants */
[b-mw8k498un7] .tenant-zone-0 { border-color: #D32F2F; }
[b-mw8k498un7] .tenant-zone-0 .tenant-zone-header {
    background: linear-gradient(90deg, rgba(211, 47, 47, 0.15) 0%, rgba(211, 47, 47, 0.05) 100%);
    border-bottom-color: rgba(211, 47, 47, 0.3);
}

[b-mw8k498un7] .tenant-zone-1 { border-color: #1976D2; }
[b-mw8k498un7] .tenant-zone-1 .tenant-zone-header {
    background: linear-gradient(90deg, rgba(25, 118, 210, 0.15) 0%, rgba(25, 118, 210, 0.05) 100%);
    border-bottom-color: rgba(25, 118, 210, 0.3);
}

[b-mw8k498un7] .tenant-zone-2 { border-color: #388E3C; }
[b-mw8k498un7] .tenant-zone-2 .tenant-zone-header {
    background: linear-gradient(90deg, rgba(56, 142, 60, 0.15) 0%, rgba(56, 142, 60, 0.05) 100%);
    border-bottom-color: rgba(56, 142, 60, 0.3);
}

[b-mw8k498un7] .tenant-zone-3 { border-color: #F57C00; }
[b-mw8k498un7] .tenant-zone-3 .tenant-zone-header {
    background: linear-gradient(90deg, rgba(245, 124, 0, 0.15) 0%, rgba(245, 124, 0, 0.05) 100%);
    border-bottom-color: rgba(245, 124, 0, 0.3);
}

[b-mw8k498un7] .tenant-zone-4 { border-color: #7B1FA2; }
[b-mw8k498un7] .tenant-zone-4 .tenant-zone-header {
    background: linear-gradient(90deg, rgba(123, 31, 162, 0.15) 0%, rgba(123, 31, 162, 0.05) 100%);
    border-bottom-color: rgba(123, 31, 162, 0.3);
}

[b-mw8k498un7] .tenant-zone-5 { border-color: #00796B; }
[b-mw8k498un7] .tenant-zone-5 .tenant-zone-header {
    background: linear-gradient(90deg, rgba(0, 121, 107, 0.15) 0%, rgba(0, 121, 107, 0.05) 100%);
    border-bottom-color: rgba(0, 121, 107, 0.3);
}

[b-mw8k498un7] .tenant-zone-null,
[b-mw8k498un7] .tenant-zone-global {
    border-color: #757575;
}
[b-mw8k498un7] .tenant-zone-null .tenant-zone-header,
[b-mw8k498un7] .tenant-zone-global .tenant-zone-header {
    background: linear-gradient(90deg, rgba(117, 117, 117, 0.15) 0%, rgba(117, 117, 117, 0.05) 100%);
    border-bottom-color: rgba(117, 117, 117, 0.3);
}
/* /Components/Pages/Flux/WorkflowLive/WorkflowZoneTransition.razor.rz.scp.css */
/* WorkflowZoneTransition.razor.css — zone transition marker between workflow nodes */

[b-a0j4barxcd] .wf-zone-transition {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 0;
    margin: 2px 0;
}

[b-a0j4barxcd] .wf-zone-line {
    width: 24px;
    height: 2px;
    background: var(--zone-color, #78909C);
    border-radius: 1px;
    opacity: 0.6;
}

[b-a0j4barxcd] .wf-zone-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    padding: 2px 8px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--zone-color, #78909C) 10%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--zone-color, #78909C) 30%, transparent);
    color: var(--mud-palette-text-primary);
}
/* /Components/Pages/Mappings/Components/DataMappingCardNew.razor.rz.scp.css */
/* DataMappingCardNew.razor — scoped styles */
/* Dark mode compatible via CSS variables */

/* ── UX#1: Progress summary bar ── */
.progress-summary-bar[b-t2jpnw5u3x] {
    background-color: var(--mud-palette-background);
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
}

/* ── Clickable chips ── */
.clickable-chip[b-t2jpnw5u3x] {
    cursor: pointer;
    transition: transform 0.1s ease;
}
.clickable-chip:hover[b-t2jpnw5u3x] {
    transform: scale(1.05);
}

/* ── Variables tab: fallback policy cell (Default value + Nullable) ── */
/* The fallback field is the one the user actually types in, so it takes the whole column.
   It used to be capped at 160px to leave room for a technical-data-point column that no longer
   exists — that cap is what truncated the "Default value" label. */
.variable-fallback-cell[b-t2jpnw5u3x] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Keep the Nullable checkbox compact and close to the field above it */
.variable-fallback-cell[b-t2jpnw5u3x]  .mud-checkbox {
    margin-left: -6px;
}

.variable-fallback-cell[b-t2jpnw5u3x]  .mud-checkbox .mud-typography {
    font-size: 0.75rem;
}

/* ── Variables tab: variable name and its technical data points ──
   Names reach fifty characters, so the chip must be allowed to wrap instead of forcing the column
   wider than the pane. The data points sit underneath as muted lines, one per data point — a nowrap
   caption used to define the cell's intrinsic width and drag a horizontal scrollbar in. */
[b-t2jpnw5u3x] .variable-name-chip {
    height: auto;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
    padding-top: 2px;
    padding-bottom: 2px;
}

.variable-tdp-caption[b-t2jpnw5u3x] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
    margin-left: 4px;
    word-break: break-word;
}

/* ── Variables tab: the rows own their wrapping, the pane never scrolls sideways ── */
.variable-table-scroll[b-t2jpnw5u3x] {
    overflow-x: hidden;
    max-width: 100%;
}

/* ── Rules tab: the "#" field that moves a whole block to a typed position ── */
[b-t2jpnw5u3x] .rule-block-position-field {
    width: 58px;
    flex: 0 0 auto;
}

/* ── JSON Mapping tab: the virtualized list owns its scrolling ──
   Virtualize needs an unambiguous viewport. Left to itself it walks up through the tab containers to
   the pane that holds the entire card, and stops loading rows partway. Bounding it here is what keeps
   the last mappings reachable. The min-height keeps it usable on short screens, where the calc would
   otherwise collapse. */
.mapping-list-scroll[b-t2jpnw5u3x] {
    height: calc(100vh - 620px);
    min-height: 340px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── Document type cards ── */
.used-doc-type-card[b-t2jpnw5u3x] {
    border-left: 4px solid var(--mud-palette-tertiary);
    background-color: var(--mud-palette-surface);
}
.doc-type-name[b-t2jpnw5u3x] {
    font-weight: 600;
}

/* ── Group title bar ── */
.group-title-bar[b-t2jpnw5u3x] {
    width: 100%;
}
.group-name[b-t2jpnw5u3x] {
    font-weight: 600;
}
.rule-name[b-t2jpnw5u3x] {
    font-weight: 500;
}

/* ── System variable badge ── */
.system-variable-badge[b-t2jpnw5u3x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Vertical align icon helper ── */
.vertical-align-icon[b-t2jpnw5u3x] {
    vertical-align: middle;
}

/* ── Expansion panel adjustments ── */
[b-t2jpnw5u3x] .mud-expansion-panel {
    margin-bottom: 8px;
}

/* ── Forward scoped styles into sub-components ── */
[b-t2jpnw5u3x] .inputs-section {
    /*background-color: var(--mud-palette-info-lighten);*/
    border-left: 3px solid var(--mud-palette-info);
}
[b-t2jpnw5u3x] .outputs-section {
    /*background-color: var(--mud-palette-warning-lighten);*/
    border-left: 3px solid var(--mud-palette-warning);
}
[b-t2jpnw5u3x] .definition-section {
    /*background-color: var(--mud-palette-tertiary-lighten);*/
    border-left: 3px solid var(--mud-palette-tertiary);
}
[b-t2jpnw5u3x] .rule-card {
    border-left: 4px solid var(--mud-palette-primary);
    background-color: var(--mud-palette-surface);
}

/* ── Form field backgrounds for dark mode ── */
[b-t2jpnw5u3x] .mud-input-control {
    background-color: var(--mud-palette-surface);
}
/* /Components/Pages/Mappings/Components/FilePreview.razor.rz.scp.css */
/* FilePreview — flex column: header + scrollable content + fixed toolbar */

.file-preview-panel[b-dk12n7dxdo] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.file-preview-header[b-dk12n7dxdo] {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
}

.file-preview-body[b-dk12n7dxdo] {
    /* Fill remaining space as a flex column so content scrolls, toolbar stays pinned */
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Content pane — takes all available space and scrolls independently */
.preview-content-pane[b-dk12n7dxdo] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 12px;
}

/* Toolbar pane — pinned at the bottom, never scrolls */
.preview-toolbar-pane[b-dk12n7dxdo] {
    flex-shrink: 0;
    border-top: 1px solid var(--mud-palette-lines-default);
    overflow: auto;
    max-height: 200px;
    padding: 8px 12px;
}
/* /Components/Pages/Mappings/Components/FileUploadCard.razor.rz.scp.css */
/* ============================================================================
   FileUploadCard - Scoped Styles
   Drop zone with drag-and-drop visual feedback
   ============================================================================ */

/* Drop Zone Container */
.drop-zone[b-2wy39c3y7g] {
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    padding: 2rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-color: var(--mud-palette-background);
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drop-zone:hover[b-2wy39c3y7g] {
    border-color: var(--mud-palette-primary);
    background-color: var(--mud-palette-primary-hover);
}

/* Active state when dragging file over */
.drop-zone-active[b-2wy39c3y7g] {
    border-color: var(--mud-palette-primary);
    border-style: solid;
    background-color: var(--mud-palette-primary-hover);
    transform: scale(1.01);
}

.drop-zone-active .drop-zone-icon[b-2wy39c3y7g] {
    color: var(--mud-palette-primary);
    transform: scale(1.1);
}

/* Drop Zone Content */
.drop-zone-content[b-2wy39c3y7g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.drop-zone-icon[b-2wy39c3y7g] {
    color: var(--mud-palette-text-secondary);
    transition: all 0.2s ease-in-out;
}

.drop-zone:hover .drop-zone-icon[b-2wy39c3y7g] {
    color: var(--mud-palette-primary);
}

/* Text Styles */
.text-muted[b-2wy39c3y7g] {
    color: var(--mud-palette-text-secondary);
}

.file-size-limit[b-2wy39c3y7g] {
    color: var(--mud-palette-warning);
    font-weight: 500;
}

.supported-formats[b-2wy39c3y7g] {
    color: var(--mud-palette-text-disabled);
}

/* Dark mode adjustments */
[b-2wy39c3y7g] .mud-theme-dark .drop-zone {
    border-color: var(--mud-palette-lines-inputs);
    background-color: var(--mud-palette-surface);
}

[b-2wy39c3y7g] .mud-theme-dark .drop-zone:hover,
[b-2wy39c3y7g] .mud-theme-dark .drop-zone-active {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.1);
}

/* File Upload wrapper full width */
[b-2wy39c3y7g] .mud-file-upload {
    width: 100%;
}

[b-2wy39c3y7g] .mud-file-upload-content {
    width: 100%;
}
/* /Components/Pages/Mappings/Components/MappingFocusBar.razor.rz.scp.css */
/* MappingFocusBar.razor — scoped styles */

/* The bar sits between the "add a business data point" block and the tabs, and has to read as the
   thing that governs all four of them — hence the full-width band rather than a field among fields. */
.focus-bar[b-u58z07opfg] {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
}

/* An active filter changes what every tab shows, including hiding things that were just added, so
   it must stay visible from anywhere on the card. */
.focus-bar-active[b-u58z07opfg] {
    border-color: var(--mud-palette-primary);
    box-shadow: inset 3px 0 0 0 var(--mud-palette-primary);
}

.focus-field[b-u58z07opfg] {
    flex: 1 1 260px;
    max-width: 420px;
}

/* Variable names run long: let the pin chips wrap instead of widening the bar. */
[b-u58z07opfg] .focus-pin-chip {
    height: auto;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
    padding-top: 2px;
    padding-bottom: 2px;
}
/* /Components/Pages/Mappings/Components/MappingHeaderBar.razor.rz.scp.css */
/* MappingHeaderBar - Scoped styles */

.unified-header[b-jaoztelprz] {
    border-radius: 8px;
}

.stepper-track[b-jaoztelprz] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stepper-step[b-jaoztelprz] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
    user-select: none;
}

.stepper-step:hover:not(.disabled)[b-jaoztelprz] {
    background-color: var(--mud-palette-action-default-hover);
}

.stepper-step.active .stepper-label[b-jaoztelprz] {
    font-weight: 600;
}

.stepper-step.disabled[b-jaoztelprz] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.stepper-connector[b-jaoztelprz] {
    flex: 0 0 24px;
    height: 2px;
    background-color: var(--mud-palette-lines-default);
    border-radius: 1px;
    transition: background-color 0.3s ease;
}

.stepper-connector.completed[b-jaoztelprz] {
    background-color: var(--mud-palette-success);
}

.stepper-label[b-jaoztelprz] {
    white-space: nowrap;
    font-size: 0.8125rem;
}

/* File summary toggle */
.file-summary-toggle[b-jaoztelprz] {
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.file-summary-toggle:hover[b-jaoztelprz] {
    background-color: var(--mud-palette-action-default-hover);
}

/* Compact date/time pickers in header */
[b-jaoztelprz] .header-date-picker {
    max-width: 150px;
}

[b-jaoztelprz] .header-time-picker {
    max-width: 120px;
}

/* Responsive: compact on smaller breakpoints */
@media (max-width: 1280px) {
    .unified-header[b-jaoztelprz]  .mud-grid-item {
        padding-bottom: 4px;
    }
}
/* /Components/Pages/Mappings/Components/VariableMappingRow.razor.rz.scp.css */
/* VariableMappingRow scoped styles */

/* --- Row wrapper --- */
.mapping-row[b-yhqmtw2x87] {
    padding: 6px 4px 6px 8px;
    border-radius: 4px;
    border-left: 4px solid transparent;
    transition: border-left-color 0.2s ease;
}

/* UX: visual incomplete indicator — only when no highlight color is set via inline style */
.mapping-row.incomplete-row[b-yhqmtw2x87] {
    border-left-color: var(--mud-palette-warning);
}

/* --- Variable header row --- */
.variable-header[b-yhqmtw2x87] {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    min-height: 28px;
}

.variable-icon[b-yhqmtw2x87] {
    opacity: 0.6;
}

/* Just wide enough for a three-digit rank */
[b-yhqmtw2x87] .mapping-position-field {
    width: 58px;
    flex: 0 0 auto;
}

.variable-name[b-yhqmtw2x87] {
    font-weight: 600;
    font-size: 0.875rem;
    word-break: break-all;
    line-height: 1.3;
}

[b-yhqmtw2x87] .type-badge {
    font-size: 0.7rem;
    height: 20px;
    opacity: 0.7;
}

/* --- Extracted value suggestion popover --- */
.extracted-value-wrapper[b-yhqmtw2x87] {
    position: relative;
}

[b-yhqmtw2x87] .variable-suggestions-popover {
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default);
}

/* --- Misc --- */
[b-yhqmtw2x87] .help-icon {
    cursor: help;
}

[b-yhqmtw2x87] .clickable-chip {
    cursor: pointer;
    margin-right: 2px;
    margin-bottom: 2px;
}

/* --- Fallback strategy section --- */
.fallback-section[b-yhqmtw2x87] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
}

[b-yhqmtw2x87] .fallback-toggle {
    flex-shrink: 0;
}

[b-yhqmtw2x87] .fallback-textfield {
    flex: 1;
    min-width: 0;
}

.fallback-hint[b-yhqmtw2x87] {
    flex: 1;
    opacity: 0.85;
}

/* Compact row alignment */
[b-yhqmtw2x87] .align-center .mud-input-control {
    margin-top: 0;
}
/* /Components/Pages/Mappings/FeedMappings.razor.rz.scp.css */
/* FeedMappings - Scoped styles */

/* STEP 2: Mapping workspace occupies remaining viewport height */
.mapping-workspace[b-0x91uosaso] {
    /*
     * 220px accounts for: breadcrumbs (~32px) + page header (~56px)
     * + stepper/header-bar (~100px) + container padding (~32px).
     * Adjust if layout above the workspace changes.
     */
    height: calc(100vh - 220px);
    min-height: 500px;
    background-color: transparent;
}

/* Splitter wrapper fills its parent entirely */
.splitter-container[b-0x91uosaso] {
    height: 100%;
}

/* Each pane inside the splitter: fill height + scroll independently */
.pane-content[b-0x91uosaso] {
    height: 100%;
    overflow-y: auto;
    padding: 8px;
}

/* Responsive: on small screens, stack and use auto height */
@media (max-width: 960px) {
    .mapping-workspace[b-0x91uosaso] {
        height: auto;
        min-height: auto;
    }

    .splitter-container[b-0x91uosaso] {
        min-height: auto;
    }

    .pane-content[b-0x91uosaso] {
        padding: 4px;
    }
}

/* Dark mode — transparent backgrounds */
[b-0x91uosaso] .mud-theme-dark .pane-content {
    background-color: transparent;
}
/* /Components/Pages/PeerGroups/CreatePeerGroup.razor.rz.scp.css */
.small-table[b-ycce25ds75] {
    font-size: 0.85rem;
}

.small-table td[b-ycce25ds75], .small-table th[b-ycce25ds75] {
    padding: 0.25rem 0.5rem;
}

.mb-4[b-ycce25ds75] {
    margin-bottom: 1.5rem;
}

.tab-rename-input[b-ycce25ds75] {
    margin-bottom: 0.5rem;
    max-width: 350px;
}

.float-right[b-ycce25ds75] {
    float: right;
}
/* /Components/Pages/Products/FinancialProduct.razor.rz.scp.css */
/* The family navigator follows the reader down a long list of data point cards. */
.hm-family-sidebar[b-98ob4zcsqc] {
    position: sticky;
    top: 8px;
}

/* The family currently being shown. A class rather than an inline style so the selected state is
   one rule instead of a string rebuilt for every list item on every render. */
.hm-family-item-selected[b-98ob4zcsqc] {
    background-color: var(--mud-palette-primary-hover);
    border-radius: 6px;
}
/* /Components/Pages/Refined/RefinedBuilder.razor.rz.scp.css */
/* ─── Step indicator ─── */
.cursor-pointer[b-dcm7oxwhs0] {
    cursor: pointer;
}

/* ─── BDP columns layout (Step 2) ─── */
[b-dcm7oxwhs0] .refined-bdp-columns-container {
    display: flex;
    flex-direction: row;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
}

[b-dcm7oxwhs0] .refined-bdp-column {
    min-width: 280px;
    max-width: 340px;
    flex: 1 0 280px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
}

[b-dcm7oxwhs0] .refined-bdp-column-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

[b-dcm7oxwhs0] .refined-bdp-column-content {
    padding: 8px;
    flex: 1;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

[b-dcm7oxwhs0] .refined-bdp-column-footer {
    padding: 8px 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* ─── Feed card (inside BDP column) ─── */
[b-dcm7oxwhs0] .refined-feed-card {
    position: relative;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: border-color 0.15s ease;
}

[b-dcm7oxwhs0] .refined-feed-card:hover {
    border-color: var(--mud-palette-primary);
}

[b-dcm7oxwhs0] .refined-feed-actions {
    opacity: 0;
    transition: opacity 0.15s ease;
    display: flex;
    gap: 2px;
    margin-left: auto;
}

[b-dcm7oxwhs0] .refined-feed-card:hover .refined-feed-actions {
    opacity: 1;
}

[b-dcm7oxwhs0] .refined-feed-order {
    font-size: 12px;
    font-weight: 600;
}

/* ─── Empty state ─── */
[b-dcm7oxwhs0] .refined-bdp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Pages/Refined/Steps/RefinedStep2FluxMapping.razor.rz.scp.css */
/* ─── BDP List Panel items ─── */
[b-01s76w74ms] .refined-bdp-list-item {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    transition: background-color 0.15s ease;
    cursor: pointer;
}

[b-01s76w74ms] .refined-bdp-list-item:hover {
    background-color: var(--mud-palette-action-default-hover);
}

[b-01s76w74ms] .refined-bdp-list-item-active {
    background-color: var(--mud-palette-primary-lighten) !important;
    border-left: 3px solid var(--mud-palette-primary);
}

[b-01s76w74ms] .refined-bdp-list-item-selected {
    background-color: var(--mud-palette-action-default-hover);
}

/* ─── Already-added row in search dialog ─── */
[b-01s76w74ms] .bdp-already-added {
    opacity: 0.6;
    background-color: var(--mud-palette-background-grey) !important;
}

[b-01s76w74ms] .bdp-already-added:hover {
    cursor: default;
}

/* ─── Text truncation utility ─── */
[b-01s76w74ms] .text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Pages/Tenants/SetEventsPropagationsNew.razor.rz.scp.css */
/* Layout for the event-propagation pipeline editor.
   Moved out of an in-razor <style> block (contract rule F07): these rules are
   page-specific, so they belong in this component's scoped stylesheet rather
   than in the global sheet. */

.propagation-layout[b-t3rweht8uy] {
    display: flex;
    gap: 16px;
    min-height: calc(100vh - 200px);
}

/* ── Sidebar ── */
.propagation-sidebar[b-t3rweht8uy] {
    width: 320px;
    min-width: 280px;
    flex-shrink: 0;
}

.sidebar-pipeline-list[b-t3rweht8uy] {
    max-height: calc(100vh - 360px);
    overflow-y: auto;
    padding-right: 4px;
}

/* The cards are MudPaper, i.e. a child component: CSS isolation does not stamp
   its markup, so these rules reach it through ::deep from the scoped list. */
.sidebar-pipeline-list[b-t3rweht8uy]  .sidebar-pipeline-card {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sidebar-pipeline-list[b-t3rweht8uy]  .sidebar-pipeline-card:hover {
    border-color: var(--mud-palette-secondary);
    background: var(--mud-palette-secondary-hover);
}

.sidebar-pipeline-list[b-t3rweht8uy]  .sidebar-pipeline-card.inactive {
    opacity: 0.65;
    border-style: dashed;
}

.sidebar-pipeline-list[b-t3rweht8uy]  .sidebar-pipeline-card.selected {
    border-color: var(--mud-palette-primary);
    border-width: 2px;
    background: var(--mud-palette-primary-hover);
}

/* ── Canvas ── */
.propagation-canvas-wrapper[b-t3rweht8uy] {
    flex: 1;
    min-width: 0;
}

.canvas-toolbar[b-t3rweht8uy] {
    padding: 8px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.canvas-diagram[b-t3rweht8uy] {
    width: 100%;
    height: calc(100vh - 280px);
    min-height: 500px;
    position: relative;
}

.canvas-table[b-t3rweht8uy] {
    padding: 16px;
    max-height: calc(100vh - 280px);
    overflow-y: auto;
}
/* /Components/Shared/Autocomplete/HmAutocomplete.razor.rz.scp.css */
/*
    Shared styling for rich HmAutocomplete dropdown items.
    The wrapper <div class="hm-ac-item"> is authored inside HmAutocomplete.razor, so the
    scoped-isolation attribute travels with it even though MudAutocomplete teleports the
    popover to the page root — the rule below still applies.
*/
.hm-ac-item[b-7vg30n2y7v] {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 2px 0;
    min-width: 0;
}