/* ==========================================================================
   Flow Platform Styles (Module.Flow + Flow Designer)
   All common layout primitives live in components.css / layout.css.
   This file contains only Flow-specific layout, canvas, and editor classes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Module shell layout (replaces inline style removed from FlowLayout.razor)
   -------------------------------------------------------------------------- */
.flow-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Portaled Mud tooltips sit outside the workspace. At 100%+ zoom they can
   extend past the right edge of the toolbox and grow a page scrollbar. */
html:has(.flow-designer-workspace--edit),
body:has(.flow-designer-workspace--edit) {
    overflow-x: hidden;
}

.flow-content {
    flex: 1;
    overflow: hidden;
    padding: var(--layout-page-margin, 20px);
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* --------------------------------------------------------------------------
   Designer page wrapper
   -------------------------------------------------------------------------- */
.flow-designer-page {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    height: 100%;
    min-height: 0;
    min-width: 0;
    width: 100%;
}

/* Edit canvas workspace: never grow a page-level horizontal scrollbar.
   Library table mode keeps its own scroll on .mud-table-container. */
.flow-designer-page:has(.flow-designer-workspace--edit) {
    overflow-x: hidden;
}

/* Auto-Scan: keep header fixed; scroll long status / cleanup content */
.flow-autoscan-body {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Status panels: 6 KPI cards (3×2), reuse pm-indicator-card (RDS / Cockpit) */
.flow-autoscan-status-header {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.flow-autoscan-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
    width: 100%;
    margin: 0;
}

.flow-autoscan-metrics-grid .flow-autoscan-metric-tooltip {
    min-width: 0;
    display: flex;
}

.flow-autoscan-metrics-grid .pm-indicator-card {
    min-height: 72px;
    padding: var(--space-8) var(--space-4);
    width: 100%;
    cursor: help;
}

.flow-autoscan-metrics-grid .pm-indicator-card__label {
    font-size: 0.75rem;
}

.flow-autoscan-metrics-grid .pm-indicator-card__value {
    font-size: 1.5rem;
    color: var(--color-primary);
}

.flow-autoscan-coverage-error-row td {
    padding-top: 0 !important;
    border-top: none !important;
}

.flow-autoscan-coverage-error {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
    margin: 0 0 var(--space-4);
    padding: var(--space-8) var(--space-12);
    border-left: 3px solid var(--mud-palette-error, #c62828);
    background: color-mix(in srgb, var(--mud-palette-error, #c62828) 8%, transparent);
    border-radius: 0 4px 4px 0;
}

.flow-autoscan-coverage-error__text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--mud-palette-error, #c62828);
    word-break: break-word;
}

.flow-autoscan-coverage-error__dismiss {
    flex: 0 0 auto;
    margin: -4px -4px 0 0;
}

@media (max-width: 960px) {
    .flow-autoscan-metrics-panels {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .flow-autoscan-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Save left + Include subdirs right-aligned under Folder column */
.flow-autoscan-cleanup-actions__left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    min-width: 0;
}

.flow-autoscan-cleanup-actions__left .mud-checkbox {
    margin-inline-start: auto;
}

/* --------------------------------------------------------------------------
   Overview (library only — no flow open): full width + full height table
   -------------------------------------------------------------------------- */
.flow-designer-overview {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    width: 100%;
    min-height: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.flow-designer-overview .flow-designer-col-table {
    flex: 1 1 0;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 0;
}

.flow-designer-grid-wrap {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    /* Single scrollport is .mud-table-container — keeps the vertical scrollbar
       on the visible right edge while the table scrolls horizontally. */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.flow-designer-grid-wrap .flow-designer-grid {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
}

.flow-designer-grid-wrap .mud-table-container {
    overflow: auto !important;
    max-height: 100%;
    width: 100%;
}

.flow-designer-grid-wrap .mud-table-root {
    min-width: max-content;
    width: 100%;
}

/* Pin row multimenu to the right edge of the grid scrollport */
.flow-designer-grid .flow-designer-grid-actions-col {
    position: sticky;
    right: 0;
    z-index: 2;
    background-color: var(--color-surface, #fff);
    width: 2.75rem;
    min-width: 2.75rem;
    max-width: 2.75rem;
    padding-left: 0.15rem !important;
    padding-right: 0.15rem !important;
    text-align: center;
    box-shadow: -6px 0 8px -6px rgba(0, 0, 0, 0.18);
}

.flow-designer-grid .mud-table-head .flow-designer-grid-actions-col,
.flow-designer-grid thead .flow-designer-grid-actions-col {
    z-index: 4;
    background-color: var(--color-table-header-bg, var(--color-surface, #fff));
}

@media (hover: hover) and (pointer: fine) {
    .flow-designer-grid.mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row:hover:not(.flow-designer-grid-row--selected):not(.mud-selected-item) .flow-designer-grid-actions-col,
    .flow-designer-grid .mud-table-container .mud-table-root .mud-table-body .mud-table-row:hover:not(.flow-designer-grid-row--selected):not(.mud-selected-item) .flow-designer-grid-actions-col {
        background-color: var(--color-grey-50) !important;
    }
}

.flow-designer-grid .mud-table-container .mud-table-root .mud-table-body .mud-table-row.flow-designer-grid-row--selected .flow-designer-grid-actions-col,
.flow-designer-grid .mud-table-container .mud-table-root .mud-table-body .mud-table-row.mud-selected-item .flow-designer-grid-actions-col {
    background-color: var(--color-primary-light) !important;
}

/* Metadata admin hosted under Designer: allow page scroll */
.flow-designer-page.infomodel-admin-surface {
    overflow: auto;
    min-height: 0;
}

/* Shared hover/selected — see .app-row--* in components.css */
.flow-designer-grid {
    --mud-palette-table-hover: var(--color-grey-50);
}

@media (hover: hover) and (pointer: fine) {
    .flow-designer-grid.mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row:hover:not(.flow-designer-grid-row--selected):not(.mud-selected-item),
    .flow-designer-grid .mud-table-container .mud-table-root .mud-table-body .mud-table-row:hover:not(.flow-designer-grid-row--selected):not(.mud-selected-item) {
        background-color: var(--color-grey-50) !important;
    }
}

.flow-designer-grid .mud-table-container .mud-table-root .mud-table-body .mud-table-row.flow-designer-grid-row--selected,
.flow-designer-grid .mud-table-container .mud-table-root .mud-table-body .mud-table-row.mud-selected-item {
    background-color: var(--color-primary-light) !important;
    border-left: 0.25rem solid var(--color-brand-primary-light) !important;
    box-shadow: none !important;
    color: inherit;
}

@media (hover: hover) and (pointer: fine) {
    .flow-designer-grid .mud-table-container .mud-table-root .mud-table-body .mud-table-row.flow-designer-grid-row--selected:hover,
    .flow-designer-grid .mud-table-container .mud-table-root .mud-table-body .mud-table-row.mud-selected-item:hover {
        background-color: var(--color-primary-light) !important;
    }
}

/* --------------------------------------------------------------------------
   Split workspace (browse / edit)
   - .flow-designer-workspace--browse   45% left + 55% graph
   - .flow-designer-workspace--edit      44% left + 45% graph + 11% toolbox
   -------------------------------------------------------------------------- */
.flow-designer-workspace {
    display: grid;
    flex: 1 1 0;
    gap: 0;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

.flow-designer-workspace--browse {
    grid-template-columns: var(--split-pane-0, 45%) 12px minmax(0, 1fr);
}

.flow-designer-workspace--browse.split-layout-host--first-collapsed {
    grid-template-columns: 0 48px minmax(0, 1fr);
}

.flow-designer-workspace--edit {
    /* minmax(0, 1fr) lets the canvas shrink instead of expanding the page. */
    grid-template-columns: var(--split-pane-0, 44%) 12px minmax(0, 1fr) 12px var(--split-pane-1, 11%);
    overflow-x: hidden;
}

.flow-designer-workspace--edit.split-layout-host--first-collapsed:not(.split-layout-host--last-collapsed) {
    grid-template-columns: 0 48px minmax(0, 1fr) 12px var(--split-pane-1, 11%);
}

.flow-designer-workspace--edit.split-layout-host--last-collapsed:not(.split-layout-host--first-collapsed) {
    grid-template-columns: var(--split-pane-0, 44%) 12px minmax(0, 1fr) 48px 0;
}

.flow-designer-workspace--edit.split-layout-host--first-collapsed.split-layout-host--last-collapsed {
    grid-template-columns: 0 48px minmax(0, 1fr) 48px 0;
}

/* Left card: table OR node/definition editor */
.flow-designer-col-left {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-sm);
}

.flow-designer-col-left .flow-designer-col-table {
    flex: 1 1 0;
    max-width: none;
    min-width: 0;
    min-height: 0;
}

.flow-designer-col-left-editor {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.flow-designer-col-left-editor-header {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-12);
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-grey-50);
    flex-shrink: 0;
}

.flow-designer-col-left-editor-header-actions {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.flow-designer-col-left-editor-body {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    display: block;
    padding: 0;
}

.flow-designer-col-left-editor-body > .editor-panel {
    display: block;
    height: auto;
    min-height: 0;
}

.flow-designer-col-left-editor-body > .editor-panel > .editor-body {
    display: block;
    height: auto;
    min-height: 0;
    padding: var(--space-12);
}

.flow-designer-col-left-editor-body > .editor-body {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: var(--space-12);
}

.flow-branch-routes {
    margin-top: var(--space-16);
    padding-top: var(--space-16);
    border-top: 1px solid var(--color-border-subtle);
}

.flow-branch-route-target {
    margin-bottom: var(--space-16);
}

.flow-branch-route-row {
    padding: var(--space-8) 0;
    border-top: 1px dashed var(--color-border-subtle);
}

.flow-branch-route-row:first-of-type {
    border-top: 0;
    padding-top: 0;
}

/* Definition settings: Flow kind / Phases / Disciplines on one row */
.flow-def-settings-meta-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
    align-items: start;
}

.flow-def-audience-add {
    display: flex;
    gap: var(--space-8);
    align-items: flex-end;
}

.flow-def-audience-add > .mud-input-control {
    flex: 1 1 auto;
    min-width: 0;
}

.flow-def-audience-add__btn {
    flex: 0 0 auto;
    align-self: flex-end;
    height: 40px;
    width: 40px;
    margin-bottom: 0;
}

.flow-def-audience-title {
    margin-top: var(--space-12);
    margin-bottom: var(--space-4);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary, inherit);
}

.flow-def-audience-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--space-8);
    font-size: 0.875rem;
}

.flow-def-audience-table th,
.flow-def-audience-table td {
    padding: var(--space-8) var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
    text-align: left;
    vertical-align: middle;
}

.flow-def-audience-table th {
    font-weight: 600;
    color: var(--color-text-secondary, rgba(0, 0, 0, 0.75));
}

.flow-def-audience-table__actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* Launch packages designer page — filter bar + three equal cards (Flow Work style) */
.flow-launch-packages-page {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    height: 100%;
    min-height: 0;
    gap: var(--space-12);
}

.flow-launch-packages-filter {
    flex-shrink: 0;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-sm);
    background: var(--color-grey-50);
}

.flow-launch-packages-workspace {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(320px, 1.4fr);
    gap: var(--space-20);
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

/* Naming Convention designer: narrower profiles column, equal rules + routes */
.flow-nc-profiles-workspace.flow-launch-packages-workspace {
    grid-template-columns: minmax(180px, 1fr) minmax(240px, 2fr) minmax(240px, 2fr);
}

.flow-launch-packages-col.panel-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
    margin-bottom: 0;
    overflow: hidden;
}

.flow-launch-packages-col .panel-card-header {
    flex-shrink: 0;
    min-height: 48px;
}

.flow-launch-packages-col__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.flow-launch-packages-editor {
    padding: var(--space-12);
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

/* Two-column field pairs (Package Settings, create form, etc.) */
.flow-form-pair-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: start;
}

@media (max-width: 520px) {
    .flow-form-pair-row {
        grid-template-columns: 1fr;
    }
}

.flow-launch-packages-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    text-align: left;
    padding: var(--space-8) var(--space-12);
    border: 0;
    border-bottom: 1px solid var(--color-border-subtle);
    border-left: 0.25rem solid transparent;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.1s ease, border-left-color 0.1s ease;
}

.flow-launch-packages-row--split {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-8);
}

@media (hover: hover) and (pointer: fine) {
    .flow-launch-packages-row:hover:not(.is-selected) {
        background: var(--color-grey-50);
    }
}

.flow-launch-packages-row.is-selected {
    background-color: var(--color-primary-light) !important;
    border-left: 0.25rem solid var(--color-brand-primary-light) !important;
    box-shadow: none !important;
}

.flow-launch-packages-row__title {
    font-weight: 500;
}

.flow-launch-packages-row__title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.flow-launch-packages-row--needs-update:not(.is-selected) {
    border-left-color: var(--color-warning);
}

.flow-launch-packages-needs-update-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    background: var(--color-warning-light, #fff3cd);
    color: var(--color-warning-text, #856404);
}

.flow-launch-packages-role-slot--missing .mud-input-outlined-border {
    border-color: var(--color-warning) !important;
}

.flow-launch-packages-row__main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.flow-launch-packages-row__audience {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    flex: 0 1 auto;
    max-width: 55%;
}

.flow-launch-package-audience-badge {
    display: inline-block;
    padding: 2px var(--space-8, 8px);
    border-radius: 12px;
    font-size: 11px;
    line-height: 1.4;
    background: var(--color-grey-100, #f3f5f7);
    color: var(--color-text-secondary, rgba(0, 0, 0, 0.75));
}

.flow-launch-packages-chip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

.flow-launch-packages-actions {
    display: flex;
    gap: var(--space-8);
    margin-top: var(--space-12);
}

.flow-launch-package-split {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.flow-launch-package-split__list,
.flow-launch-package-split__detail {
    flex: 1 1 50%;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-12);
}

.flow-launch-package-split__list {
    border-bottom: 1px solid var(--color-border-subtle);
}

.flow-designer-col-left-editor-body .flow-tree-rail {
    flex: 1 1 auto;
    min-height: 280px;
    margin: var(--space-8) calc(-1 * var(--space-12)) 0;
    width: calc(100% + 2 * var(--space-12));
}

/* ContentBlock: fill remaining left-panel height; scroll inside tree/editor panes
   (not grow with the question editor and scroll the whole body). */
.flow-designer-col-left-editor-body:has(.flow-tree-rail) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.flow-designer-col-left-editor-body:has(.flow-tree-rail) > .mud-alert {
    flex-shrink: 0;
}

.flow-designer-col-left-editor-body:has(.flow-tree-rail) > .editor-panel.flow-node-editor {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.flow-node-editor:has(.flow-tree-rail) > .editor-body.flow-node-editor-body {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.flow-node-editor:has(.flow-tree-rail) .flow-tree-rail {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.flow-designer-col-left-editor-body > .editor-panel + .editor-panel > .editor-body,
.flow-designer-col-left-editor-body > .editor-panel + .editor-panel > .page-header-bar {
    padding-left: var(--space-12);
    padding-right: var(--space-12);
}

/* Legacy alias — table column inside overview or left card */
.flow-designer-col-table {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* Centre column: graph canvas (always visible in workspace) */
.flow-designer-col-canvas {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    position: relative;
}

.flow-designer-canvas-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.flow-designer-preview-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    background: var(--color-white);
}

.flow-designer-preview-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.flow-designer-preview-panel__header {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-12);
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-grey-50);
    flex-shrink: 0;
}

.flow-designer-preview-panel__title {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.flow-designer-preview-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: var(--space-16);
}

.flow-designer-preview-actions {
    margin-top: var(--space-16);
    opacity: 0.65;
    pointer-events: none;
}

.flow-designer-preview-protocol-section {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-small);
    padding: var(--space-12);
}

.flow-designer-preview-protocol-subsection + .flow-designer-preview-protocol-subsection {
    margin-top: var(--space-12);
}

.flow-designer-preview-protocol-body {
    margin-top: var(--space-6);
    min-height: 4.5rem;
    padding: var(--space-12);
    border: 1px dashed var(--color-border-subtle);
    border-radius: var(--radius-small);
    background: var(--color-grey-50);
    font-size: 13px;
}

.flow-designer-canvas-host {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.flow-designer-canvas-host .react-flow__node.rf-node-validation-error:not(.rf-group-node) {
    border-width: 4px !important;
    border-color: var(--color-error, #d64545) !important;
}

.flow-designer-workspace--edit .react-flow-canvas-host,
.flow-designer-workspace--edit .react-flow-canvas-container {
    min-width: 0;
    overflow: hidden;
}

/* Right toolbox column — header fixed, body scrolls when needed */
.flow-designer-col-toolbox {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
    align-self: stretch;
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   Library / Launch Packages filter bar
   Layout: [New] [filters flex…] [search] [help]
   Dropdowns shrink with page width; never wrap to a second line.
   -------------------------------------------------------------------------- */
.flow-designer-filter-bar {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-8);
    align-items: flex-end;
    padding: var(--space-12) var(--space-16);
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-grey-50);
    min-width: 0;
    overflow-x: auto;
}

.flow-designer-filter-bar__action {
    flex: 0 0 auto;
    align-self: flex-end;
    padding-bottom: 5px;
}

.flow-designer-filter-bar__filters {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: var(--space-8);
    align-items: flex-end;
    min-width: 0;
}

.flow-designer-filter-bar__filters > * {
    flex: 1 1 0;
    min-width: 0;
}

.flow-designer-filter-bar__search {
    display: flex;
    flex: 0 1 220px;
    align-items: flex-end;
    gap: var(--space-8);
    min-width: 140px;
}

.flow-designer-filter-bar__search .mud-input-control {
    flex: 1 1 auto;
    min-width: 0;
}

.flow-designer-filter-bar__help {
    flex: 0 0 auto;
    align-self: flex-end;
    padding-bottom: 4px;
}

/* Naming Convention: match filled toolbar buttons to dense search field height */
.flow-nc-filter-bar.flow-designer-filter-bar {
    align-items: center;
}

.flow-nc-filter-bar .flow-designer-filter-bar__action {
    align-self: center;
    padding-bottom: 0;
}

.flow-nc-filter-bar .flow-designer-filter-bar__action .mud-button-root {
    min-height: 40px;
    height: 40px;
}

.flow-nc-filter-bar .flow-designer-filter-bar__search,
.flow-nc-filter-bar .flow-designer-filter-bar__filters,
.flow-nc-filter-bar .flow-designer-filter-bar__help {
    align-self: center;
    padding-bottom: 0;
}

.flow-nc-profile-row__main.flow-launch-packages-row__main {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    width: 100%;
}

.flow-nc-profile-row__title {
    min-width: 0;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-nc-profile-row__trailing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.flow-nc-profile-row__trailing .flow-nc-profile-upload,
.flow-nc-profile-row__trailing .mud-file-upload {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
}

.flow-nc-profile-row__trailing .mud-file-upload .mud-input-control,
.flow-nc-profile-row__trailing .mud-file-upload .mud-input {
    display: none;
}

/* Phase / discipline labels on Launch Packages definition list
   (same look for now; separate classes so they can diverge later).
   Inspired by .tag-badge in components.css. */
.flow-definition-phase-label,
.flow-definition-discipline-label {
    display: inline-block;
    padding: 2px var(--space-8, 8px);
    border-radius: 12px;
    font-size: 11px;
    line-height: 1.4;
    background: var(--color-grey-100, #f3f5f7);
    color: var(--color-text-secondary, rgba(0, 0, 0, 0.75));
}

.flow-launch-packages-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

/* --------------------------------------------------------------------------
   Graph canvas toolbar strip (Edit / Save / Delete / Definition settings)
   -------------------------------------------------------------------------- */
.flow-canvas-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-12);
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-grey-50);
    flex-shrink: 0;
}

.flow-canvas-toolbar .mud-divider-vertical {
    margin-inline: var(--space-4);
    height: 1.25rem;
}

.flow-toolbar-icon-danger:hover:not(:disabled) {
    color: var(--color-error);
}

.flow-canvas-toolbar-spacer {
    flex: 1;
}

/* Canvas host element — interactive graph mounts here */
.flow-canvas-host {
    flex: 1;
    position: relative;
    min-height: 0;
}

.flow-canvas-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: var(--color-grey-50);
}

.flow-canvas-edges-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 4000px;
    height: 4000px;
    pointer-events: none;
    z-index: 1;
}

.flow-canvas-nodes-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 4000px;
    height: 4000px;
    z-index: 2;
}

.flow-canvas-node {
    position: absolute;
    width: 120px;
    min-height: 40px;
    padding: var(--space-8) var(--space-12);
    border: 2px solid var(--color-border-subtle);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-sm);
    cursor: grab;
    user-select: none;
    box-sizing: border-box;
}

.flow-canvas-node:active {
    cursor: grabbing;
}

.flow-canvas-node--selected {
    border-color: var(--color-brand-primary);
    box-shadow: var(--shadow-md);
}

.flow-canvas-node-label {
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-canvas-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-brand-primary);
    border: 2px solid var(--color-white);
    z-index: 3;
}

.flow-canvas-handle-out {
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    cursor: crosshair;
}

/* Empty graph state */
.flow-canvas-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 14px;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Toolbox items
   -------------------------------------------------------------------------- */
.flow-toolbox {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.flow-toolbox-header {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-12);
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-grey-50);
    flex-shrink: 0;
}

.flow-toolbox-header-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-toolbox-header > .mud-tooltip-root,
.flow-toolbox-header > .mud-tooltip {
    flex-shrink: 0;
    margin-left: auto;
    width: auto;
    max-width: none;
    display: inline-flex;
}

.flow-toolbox-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: var(--space-8);
}

.flow-toolbox-section {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

.flow-toolbox-section-label {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    padding: var(--space-4) var(--space-4) var(--space-2);
    margin-top: var(--space-8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flow-toolbox-section:first-child .flow-toolbox-section-label {
    margin-top: 0;
}

/* MudTooltip wraps body items in an inline root — force full-width rows.
   Do NOT target .mud-tooltip: that is the popover bubble. Styling it as a
   100% block makes it sit in-flow over the next item (e.g. Email over PDF). */
.flow-toolbox-body .mud-tooltip-root {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.flow-toolbox-item {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-6) var(--space-8);
    border-radius: var(--radius-small);
    cursor: grab;
    font-size: 13px;
    color: var(--color-text-secondary);
    border: 1px solid transparent;
    user-select: none;
    transition: background-color 0.1s ease, border-color 0.1s ease;
}

.flow-toolbox-item:hover {
    background-color: var(--color-grey-100);
    border-color: var(--color-border-subtle);
}

.flow-toolbox-item:active {
    cursor: grabbing;
    background-color: var(--color-grey-200);
}

.flow-toolbox-item i {
    font-size: 14px;
    opacity: 0.75;
    flex-shrink: 0;
}

.flow-toolbox-item > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Content block tree rail (compact, collapsible — Flow-specific variant)
   Reuses checklist SectionTree markup with a Flow-specific wrapper.
   -------------------------------------------------------------------------- */
.flow-tree-rail {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Inside left editor card: tree rail on the far left */
.flow-tree-rail--in-left-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
}

.flow-tree-rail-split {
    /* Own pane var so we don't inherit Designer workspace --split-pane-0 (44%). */
    --split-pane-0: 32%;
    display: grid;
    grid-template-columns: var(--split-pane-0) 12px minmax(0, 1fr);
    flex: 1;
    min-height: 0;
    min-width: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.flow-tree-rail-split > .flow-tree-rail-tree,
.flow-tree-rail-split > .flow-tree-rail-editor {
    min-width: 0;
    min-height: 0;
}

.flow-tree-rail-split > .flow-tree-rail-tree {
    flex: none;
    max-width: none;
    border-right: 0;
}

.flow-tree-rail--collapsed .flow-tree-rail-split {
    /* Gutter is display:none when collapsed, so only two grid items remain.
       A 3-track template would put the editor in the 0-width middle track.
       56px fits 32px icons + badges without a horizontal scrollbar. */
    grid-template-columns: 56px minmax(0, 1fr);
}

.flow-tree-rail--collapsed .flow-tree-rail-split > .split-layout-gutter {
    display: none;
}

.flow-tree-rail--collapsed .flow-tree-rail-split > .flow-tree-rail-editor {
    min-width: 0;
    width: auto;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.flow-tree-rail--collapsed .flow-tree-rail-split > .flow-tree-rail-tree {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.flow-tree-rail--in-left-panel .flow-tree-rail-tree {
    flex: 0 0 200px;
    min-width: 140px;
    max-width: 220px;
}

.flow-tree-rail--in-left-panel .flow-tree-rail-split > .flow-tree-rail-tree {
    flex: none;
    min-width: 0;
    max-width: none;
}

.flow-tree-rail-tree {
    flex: 0 0 200px;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    border-right: 1px solid var(--color-border-subtle);
    padding: var(--space-8);
    background: var(--color-grey-50);
    transition: flex-basis 0.15s ease, min-width 0.15s ease;
}

.flow-tree-rail--collapsed .flow-tree-rail-tree {
    flex-basis: 56px;
    min-width: 56px;
    max-width: 56px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: var(--space-8) 6px;
}

.flow-tree-rail-collapse-btn {
    display: flex;
    justify-content: center;
    padding: var(--space-4) 0 var(--space-8);
    flex-shrink: 0;
}

.flow-tree-rail--collapsed .flow-tree-rail-collapse-btn .mud-icon-button {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
}

.flow-tree-rail--collapsed .flow-tree-rail-collapse-btn .mud-icon-button .mud-icon-root,
.flow-tree-rail--collapsed .flow-tree-rail-collapse-btn .mud-icon-button i {
    font-size: 0.875rem;
}

.flow-tree-rail-compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
}

.flow-tree-compact-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: var(--radius-small);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0;
}

.flow-tree-compact-item:hover {
    background: var(--color-grey-100);
}

.flow-tree-compact-item.selected {
    border-color: var(--color-brand-primary);
    background: var(--color-grey-100);
    color: var(--color-brand-primary);
}

.flow-tree-compact-item--question {
    width: 28px;
    height: 28px;
    font-size: 12px;
}

.flow-tree-compact-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 7px;
    background: var(--color-brand-primary);
    color: var(--color-white);
    font-size: 9px;
    line-height: 14px;
    text-align: center;
}

.flow-tree-rail-editor {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: var(--space-12);
    min-width: 0;
}

.flow-editor-panel-flat {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    min-height: 0;
}

.flow-editor-panel-flat + .flow-editor-panel-flat {
    border-top: 1px solid var(--color-border-subtle);
}

.flow-editor-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-8);
    align-items: start;
}

.flow-node-description-field textarea {
    font-size: 0.8125rem !important;
    line-height: 1.35 !important;
}

.flow-node-general-card .ws-card-header {
    align-items: flex-start;
}

.flow-node-general-card .ws-card-chevron {
    margin-top: 0.2rem;
}

.flow-node-header-field {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.flow-node-header-subtitle {
    font-size: 0.7rem;
    font-weight: 400;
    font-style: italic;
    color: var(--color-text-muted, rgba(0, 0, 0, 0.55));
    line-height: 1.2;
    white-space: nowrap;
}

.flow-node-header-field--order {
    flex: 0 0 auto;
    align-items: flex-start;
    width: auto;
    min-width: 2.75rem;
}

.flow-node-general-card .ws-card-header-actions {
    align-items: flex-start;
}

.flow-node-order-input {
    width: 2.75rem;
    max-width: 2.75rem;
    text-align: left;
    /* hide native number spinners — keep look like the title field */
    -moz-appearance: textfield;
    appearance: textfield;
}

.flow-node-order-input::-webkit-outer-spin-button,
.flow-node-order-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.flow-node-order-input[readonly] {
    cursor: default;
    opacity: 0.7;
}

.flow-node-order-field {
    max-width: 5.5rem;
}

.flow-node-order-field--header {
    max-width: 3.25rem;
    width: 3.25rem;
}

.flow-node-order-field--header .mud-input-control,
.flow-node-order-field--header .mud-input {
    margin-top: 0 !important;
}

.flow-node-order-field .mud-input-slot,
.flow-node-order-field input {
    text-align: center;
}

.flow-editor-row--three {
    grid-template-columns: minmax(80px, .4fr) minmax(120px, .7fr) minmax(140px, 1fr);
}

.flow-editor-row--four {
    grid-template-columns: repeat(4, minmax(80px, 1fr));
}

.flow-mono-input input,
.flow-mono-input textarea {
    font-family: monospace;
    font-size: 12px;
}

.flow-tree-root,
.flow-tree-row {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-8);
    border: 1px solid transparent;
    border-radius: var(--radius-small);
    cursor: pointer;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.flow-tree-root:hover,
.flow-tree-row:hover {
    background: var(--color-grey-100);
}

.flow-tree-root.selected,
.flow-tree-row.selected {
    background: var(--color-grey-100);
    border-color: var(--color-brand-primary);
}

button.flow-tree-root {
    width: 100%;
    background: transparent;
    /* Do not use font: inherit — it overrides .flow-tree-root font-size and picks up a larger parent size. */
    font-family: inherit;
    font-size: 13px;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    text-align: left;
    margin: 0;
}

button.flow-tree-root:disabled,
.flow-tree-compact-item:disabled {
    opacity: 0.55;
    cursor: default;
}

.flow-tree-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-6);
    width: 100%;
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
    padding: 0 var(--space-8);
    box-sizing: border-box;
}

.flow-tree-header .filter-label {
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
}

/* Match section-row action sizing (small plus / chevron) */
.flow-tree-header .mud-icon-button {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    flex-shrink: 0;
}

.flow-tree-header .mud-icon-button .mud-icon-root,
.flow-tree-header .mud-icon-button i {
    font-size: 0.875rem;
}

.flow-tree-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.flow-tree-row--question {
    margin-left: var(--space-12);
    font-size: 12px;
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.flow-question-editor {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.flow-question-editor-header {
    /* Keep header in normal document flow so the question title scrolls with the editor. */
    position: relative;
    z-index: 1;
}

.flow-question-editor-body {
    padding: var(--space-12) var(--space-16);
}

.flow-option-row {
    display: flex;
    gap: var(--space-8);
    align-items: flex-start;
    margin-bottom: var(--space-6);
}

.flow-option-row--inactive {
    opacity: 0.55;
}

.flow-followup-matrix {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.flow-followup-matrix-header,
.flow-followup-matrix-row {
    display: grid;
    grid-template-columns: minmax(72px, 1fr) 88px 88px 88px;
    gap: var(--space-8);
    align-items: center;
}

.flow-followup-matrix-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.flow-followup-matrix-header span,
.flow-followup-matrix-row .mud-checkbox {
    justify-self: center;
}

.flow-followup-matrix-header span:first-child,
.flow-followup-matrix-option {
    justify-self: start;
}

.flow-followup-matrix-option {
    font-size: 13px;
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-option-value {
    max-width: 140px;
}

.flow-option-value-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 72px;
    min-height: 40px;
    padding: 0 0 8px;
    flex: 0 0 auto;
}

.flow-option-value-label {
    font-size: 12px;
    line-height: 1.2;
    color: var(--color-text-muted);
}

.flow-option-value-fixed {
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-text-muted);
}

.flow-option-active {
    margin-top: 8px;
    flex: 0 0 auto;
}

.flow-question-type-badge {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-small);
    padding: 1px var(--space-4);
}

/* --------------------------------------------------------------------------
   Node graph canvas — React Flow custom node styles
   (Flow-specific; no overlap with Cytoscape used only in IdsCreator)
   -------------------------------------------------------------------------- */
.flow-node {
    background: var(--color-white);
    border: 2px solid var(--color-border-subtle);
    border-radius: var(--radius-medium);
    padding: var(--space-8) var(--space-12);
    font-size: 13px;
    color: var(--color-text-secondary);
    min-width: 120px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.flow-node--selected {
    border-color: var(--color-brand-primary);
    box-shadow: var(--shadow-md);
}

.flow-node--start {
    border-color: var(--color-success);
    background: var(--color-success-light);
    color: var(--color-success);
}

.flow-node--end,
.flow-node--approval {
    border-color: var(--color-error);
    background: var(--color-error-light);
}

.flow-node--branch {
    border-color: #e67e22;
    background: #fff4e6;
}

.flow-node--content {
    border-color: var(--color-info);
    background: #e6f0f9;
}

.flow-node--module {
    border-color: #c9a227;
    background: #fff9db;
}

.flow-node-label {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.flow-node-kind {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* --------------------------------------------------------------------------
   Rename dialog / dirty-guard — Flow-specific modal content
   Uses common .panel-card / .panel-card-header / .panel-actions from
   components.css; only Flow-specific constraints here.
   -------------------------------------------------------------------------- */
.flow-rename-dialog {
    min-width: 360px;
    max-width: 520px;
}

/* --------------------------------------------------------------------------
   Weather question designer panel
   -------------------------------------------------------------------------- */
.flow-weather-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin-top: var(--space-8);
}

.flow-weather-field-row {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-4) 0;
}

.flow-weather-search-row {
    display: flex;
    align-items: flex-end;
    gap: var(--space-8);
}

.flow-weather-search-row .flow-weather-search-field {
    flex: 1;
    min-width: 0;
}

/* Match Mud outlined medium input slot height (not the taller control with label gutter). */
.flow-weather-search-row .flow-weather-search-btn.mud-button-root.mud-icon-button {
    box-sizing: border-box;
    height: 56px !important;
    width: 56px !important;
    min-height: 56px !important;
    min-width: 56px !important;
    padding: 0;
    border-radius: var(--mud-default-borderradius);
}

/* --------------------------------------------------------------------------
   Validation summary strip (above canvas) — uses shared DismissibleMessageBanner
   -------------------------------------------------------------------------- */
.flow-designer-validation-banner {
    margin: var(--space-8) var(--space-12) 0;
}

/* Legacy aliases kept for any remaining call sites */
.flow-validation-errors {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-12);
    background: var(--color-error-light);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-small);
    margin-bottom: var(--space-8);
}

.flow-validation-error-item {
    font-size: 13px;
    color: var(--color-error);
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.flow-validation-warning-item {
    font-size: 13px;
    color: var(--color-warning);
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

/* --------------------------------------------------------------------------
   Flow Type chips — shared across Flow Work and Project Manager Cockpit
   Set --flow-type-color inline (see FlowTypeFormatting.ChipStyle).
   -------------------------------------------------------------------------- */

.flow-type-chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid color-mix(in srgb, var(--flow-type-color, #9e9e9e) 40%, white);
    background: color-mix(in srgb, var(--flow-type-color, #9e9e9e) 14%, white);
    color: var(--flow-type-color, #616161);
    white-space: nowrap;
    line-height: 1.6;
    vertical-align: middle;
}

.flow-type-chip--muted {
    --flow-type-color: #9e9e9e;
    font-style: italic;
}

/* Compact status badges for Flow Work — geometry shared with
   .pm-attention-card__kind-badge / .workflow-card__* badges in components.css;
   colors kept via pm-indicator-card--* modifiers on the same element. */

/* --------------------------------------------------------------------------
   Flow Work history / approval overlay drawers
   Reuse review-detail-* (flow-work.css) + .tag-badge / .status-badge (components.css).
   -------------------------------------------------------------------------- */

.flow-history-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4, 4px);
    padding: var(--space-8, 8px) var(--space-12, 12px);
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
    flex-shrink: 0;
    background: var(--color-surface, #fff);
}

button.tag-badge.flow-history-filter {
    cursor: pointer;
    border: 1px solid transparent;
    margin-right: 0;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
}

button.tag-badge.flow-history-filter--active {
    background: color-mix(in srgb, var(--color-brand-primary, #005f9e) 14%, transparent);
    color: var(--color-brand-primary, #005f9e);
    border-color: color-mix(in srgb, var(--color-brand-primary, #005f9e) 35%, transparent);
}

.flow-history-day {
    margin-bottom: var(--space-16, 16px);
}

.flow-history-day__label {
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    color: var(--color-text-muted, #6b7280);
    margin-bottom: var(--space-8, 8px);
}

.flow-history-timeline {
    list-style: none;
    margin: 0;
    padding: 0 0 0 var(--space-12, 12px);
    border-left: 2px solid var(--color-border-subtle, #e5e7eb);
}

.flow-history-timeline__item {
    position: relative;
    padding: 0 0 var(--space-12, 12px) var(--space-12, 12px);
}

.flow-history-timeline__dot {
    position: absolute;
    left: -5px;
    top: 0.35rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-brand-primary, #005f9e);
}

.flow-history-timeline__row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-8, 8px);
}

.flow-history-timeline__event {
    font-size: 0.875rem;
    font-weight: 600;
}

.flow-history-timeline__time,
.flow-history-timeline__actor,
.flow-history-timeline__node {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-muted, #6b7280);
}

.flow-history-timeline__comment {
    margin-top: var(--space-4, 4px);
    font-size: 0.8125rem;
    color: var(--color-text-secondary, #4b5563);
    white-space: pre-wrap;
}

.flow-history-timeline__items {
    margin: var(--space-4, 4px) 0 0;
    padding-left: 1.1rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary, #4b5563);
}

.flow-history-timeline__items li {
    margin-bottom: 2px;
}

.flow-history-timeline__more {
    font-style: italic;
    color: var(--color-text-muted, #6b7280);
}

.flow-history-timeline__detail {
    margin-top: var(--space-4, 4px);
    font-size: 0.8125rem;
    color: var(--color-text-secondary, #4b5563);
}

.flow-approval-drawer__summary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4, 4px);
    margin-bottom: var(--space-16, 16px);
}

.flow-approval-drawer__summary p {
    margin: 0;
}

.flow-approval-drawer__section {
    margin-bottom: var(--space-16, 16px);
}

.flow-approval-drawer__section-title {
    margin: 0 0 var(--space-8, 8px);
    font-size: 0.875rem;
    font-weight: 600;
}

.flow-approval-drawer__assignees {
    margin: 0;
    padding-left: 1.1rem;
}

.flow-decisions-table {
    width: 100%;
    margin-bottom: 0;
}

.flow-decisions-table th,
.flow-decisions-table td {
    padding: 6px 8px;
    vertical-align: middle;
}

.flow-decisions-table__date,
.flow-decisions-table__decision {
    width: 1%;
    white-space: nowrap;
}

.flow-decisions-table .status-badge {
    display: inline-block;
    width: fit-content;
    max-width: max-content;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Flow Cockpit create drawer body — used in Module.ProjectManager
   -------------------------------------------------------------------------- */

.flow-cockpit-create-body {
    display: flex;
    flex-direction: column;
    padding: var(--space-16, 16px);
    overflow-y: auto;
    gap: var(--space-4, 4px);
}

.flow-cockpit-create-loading {
    display: flex;
    align-items: center;
    gap: var(--space-8, 8px);
    padding: var(--space-16, 16px);
    color: var(--color-text-muted, #9ca3af);
    font-size: 14px;
}

.flow-cockpit-create-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 4px);
    padding: var(--space-8, 8px) 0;
}

.flow-cockpit-create-def-header {
    display: flex;
    align-items: center;
    gap: var(--space-8, 8px);
    font-size: 14px;
    margin-bottom: var(--space-4, 4px);
}

.flow-cockpit-create-timing {
    display: flex;
    gap: var(--space-8, 8px);
    align-items: center;
}

.flow-cockpit-create-planning-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 4px);
    margin-bottom: var(--space-12, 12px);
}

.flow-cockpit-create-node-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary, #374151);
    margin-bottom: var(--space-4, 4px);
}

.flow-cockpit-create-footer {
    display: flex;
    align-items: center;
    gap: var(--space-8, 8px);
    justify-content: flex-end;
    padding: var(--space-8, 8px) 0;
}

.flow-cockpit-create-divider {
    border: none;
    border-top: 1px solid var(--color-border-subtle, #e5e7eb);
    margin: var(--space-4, 4px) 0;
}

/* --------------------------------------------------------------------------
   Responsive adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .flow-designer-workspace--browse,
    .flow-designer-workspace--browse.split-layout-host--first-collapsed,
    .flow-designer-workspace--edit,
    .flow-designer-workspace--edit.split-layout-host--first-collapsed,
    .flow-designer-workspace--edit.split-layout-host--last-collapsed,
    .flow-designer-workspace--edit.split-layout-host--first-collapsed.split-layout-host--last-collapsed {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .flow-designer-workspace--edit {
        grid-template-rows: auto 1fr auto;
    }
}

/* Node editor — compact general-info card + more room for step content */
.flow-node-editor .editor-body.flow-node-editor-body {
    padding: var(--space-8) var(--space-12);
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    height: auto;
    min-height: 0;
    overflow: visible;
}

.flow-node-editor .flow-node-general-card {
    margin-bottom: 0;
    flex-shrink: 0;
}

.flow-node-editor .flow-question-editor {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
}

.flow-node-editor .flow-tree-rail {
    flex: 1 1 0;
    min-height: 0;
    align-self: stretch;
}

.flow-tree-row-actions {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* Match section "+" (MudMenu dense) — default MudIconButton Small reads larger */
.flow-tree-row-actions .mud-icon-button,
.flow-tree-row-actions .mud-button-root {
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    padding: 0;
}

.flow-tree-row-actions .mud-icon-button .mud-icon-root,
.flow-tree-row-actions .mud-icon-button i,
.flow-tree-row-actions .mud-button-root .mud-icon-root,
.flow-tree-row-actions .mud-button-root i {
    font-size: 0.875rem;
}

.flow-tree-row .section-question-count {
    flex-shrink: 0;
}

.flow-planned-date-labels {
    margin-top: var(--space-4);
    grid-template-columns: 1fr 1fr;
}

.flow-ids-designer {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.flow-ids-file-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
}

.flow-ids-file-name {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-ids-pdf-output-row {
    margin-top: var(--space-8);
    align-items: flex-start;
}

.flow-ids-pdf-output-row .editor-folder-row {
    min-width: 0;
}

/* Folder select + refresh on one line (Upload Simple, NC routes, etc.) */
.editor-folder-row {
    display: flex;
    align-items: flex-end;
    gap: var(--space-8, 8px);
    width: 100%;
}

.editor-folder-row .editor-folder-select,
.editor-folder-row > .mud-input-control {
    flex: 1 1 auto;
    min-width: 0;
}

.editor-folder-row .mud-icon-button {
    flex: 0 0 auto;
    margin-bottom: 2px;
}

/* NC profile name + actions menu (save/copy/export/import/delete) */
.flow-nc-profile-name-row {
    align-items: flex-end;
}

.flow-nc-profile-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    margin-left: auto;
    margin-bottom: 2px;
}

.flow-nc-profile-actions .flow-nc-profile-upload,
.flow-nc-profile-actions .mud-file-upload {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
}

.flow-nc-profile-actions .mud-file-upload .mud-input-control,
.flow-nc-profile-actions .mud-file-upload .mud-input {
    display: none;
}

/* Designer: vertically align MudCheckBox icon + label */
.flow-designer-checkbox-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.flow-designer-checkbox-stack .mud-input-control-boolean-input,
.flow-designer-checkbox-stack .mud-checkbox {
    margin-inline: 0 !important;
}

.flow-designer-checkbox-stack .mud-checkbox .mud-button-root,
.flow-designer-checkbox-stack .mud-checkbox .mud-icon-button {
    align-self: center;
}

.flow-designer-checkbox-stack .mud-checkbox .mud-button-label,
.flow-designer-checkbox-stack .mud-checkbox .mud-typography {
    display: inline-flex;
    align-items: center;
    line-height: 1.35;
}

.flow-nc-route-folder {
    padding-right: 0;
}

.flow-question-editor--compact .flow-question-editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}

.flow-question-editor-body--compact {
    padding: 0;
}

.flow-create-wizard__planning-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
}

.flow-date-or-milestone {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.flow-date-or-milestone__hint {
    margin-top: 0;
}

.flow-create-wizard__approval-row {
    margin-bottom: var(--space-12);
}

.flow-create-wizard__reviewer-field {
    margin-top: var(--space-8);
}

/* --------------------------------------------------------------------------
   Upload designer — NC segment/route rows
   -------------------------------------------------------------------------- */
.flow-nc-segment-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}

.flow-nc-segment-row__meta {
    display: flex;
    align-items: flex-end;
    gap: var(--space-8);
    width: 100%;
}

.flow-nc-segment-type {
    flex: 1 1 auto;
    min-width: 110px;
}

.flow-nc-segment-sep {
    flex: 0 0 64px;
    width: 64px;
}

.flow-nc-segment-type .mud-input-control,
.flow-nc-segment-sep .mud-input-control,
.flow-nc-segment-title .mud-input-control,
.flow-nc-route-segment .mud-input-control,
.flow-nc-route-condition .mud-input-control {
    width: 100%;
    margin: 0;
}

.flow-nc-segment-title {
    flex: 1 1 220px;
    min-width: 180px;
}

.flow-nc-segment-side {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 0 0 auto;
    margin-bottom: 14px;
    gap: 0;
}

.flow-nc-segment-voluntary,
.flow-nc-segment-delete {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}

.flow-nc-add-btn {
    margin-top: var(--space-4);
    margin-bottom: var(--space-8);
    min-height:40px;
}

.flow-nc-route-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
    padding-bottom: var(--space-12);
    border-bottom: 1px solid var(--color-border-subtle);
}

.flow-nc-route-row:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.flow-nc-route-match {
    display: flex;
    align-items: flex-end;
    gap: var(--space-8);
    width: 100%;
}

.flow-nc-route-segment {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
}

.flow-nc-route-condition {
    flex: 2 1 0;
    min-width: 0;
}

.flow-nc-route-delete {
    flex: 0 0 auto;
    margin-bottom: 2px;
}

/* --------------------------------------------------------------------------
   Question template images (designer + work runtime)
   -------------------------------------------------------------------------- */
.flow-question-images {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.flow-question-image-thumb {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: var(--radius-small, 4px);
    border: 1px solid var(--color-border-subtle);
    cursor: pointer;
}

.flow-question-image-thumb:hover {
    opacity: 0.9;
}

/* --------------------------------------------------------------------------
   Question explanation tables (designer + work runtime)
   -------------------------------------------------------------------------- */
.flow-question-table-wrap {
    overflow-x: auto;
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
}

.flow-question-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.flow-question-table th,
.flow-question-table td {
    border: 1px solid var(--color-border-subtle, #ddd);
    padding: 6px 10px;
    text-align: left;
    vertical-align: top;
}

.flow-question-table thead th {
    background: var(--mud-palette-background-grey, #f5f5f5);
    font-weight: 600;
}

.flow-question-table--editor th,
.flow-question-table--editor td {
    padding: 4px;
    min-width: 120px;
}

.flow-table-cell-edit {
    display: flex;
    align-items: flex-start;
    gap: 2px;
}

.flow-table-row-actions {
    width: 40px;
    border: none !important;
    background: transparent !important;
}

.flow-calc-input-key {
    max-width: 88px;
}

.flow-approval-question-editor {
    padding: 8px;
    border: 1px solid var(--mud-palette-lines-default, #e5e7eb);
    border-radius: 6px;
}

.flow-approval-question-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 2px;
    margin-top: 4px;
}

.flow-calc-input-row {
    align-items: center;
}