/* ==========================================================================
   flow-work.css — Flow Work execution page styles
   Location: App.Web/wwwroot/css/flow-work.css (mandatory per StylingCSS.md)
   Owns the 50/50 workspace split, question chrome, and Flow Viewer3D status
   badges. Supplements workspace.css (left drawer).
   ========================================================================== */

/* ── Page root ─────────────────────────────────────────────────────────── */

/* .flow-work-page is the direct child of .flow-content (.flow-layout child).
   It must grow to fill the padded content area so WorkspaceShell fills height. */
.flow-work-page {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ── Two-column workspace (board | detail) ─────────────────────────────── */

/* workspace-main-content is already a flex column with height: 100%.
   Fill the flex parent rather than computing height from the viewport. */
.flow-work-page .flow-work-workspace {
    display: flex;
    gap: var(--space-20);
    height: unset;
    flex: 1;
    width: 100%;
    min-height: 0;
    overflow: hidden;
}

.flow-work-col-left {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    overflow: hidden;
    position: relative;
    min-width: 0;
}

.flow-work-workspace.flow-work-panel-open {
    gap: 0;
}

.flow-work-workspace.flow-work-panel-open .flow-work-col-left {
    flex: 0 0 var(--split-pane-0, 50%);
    min-width: 0;
    overflow: hidden;
}

.flow-work-workspace.flow-work-panel-open.split-layout-host--first-collapsed .flow-work-col-left {
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    max-width: 0;
}

.flow-work-col-right {
    flex: 1 1 0;
    background: var(--color-white);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-subtle);
    overflow-y: auto;
    min-width: 0;
    position: relative;
    z-index: 2;
    isolation: isolate;
}

.flow-work-panel-card {
    background: var(--color-white);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-subtle);
    padding: var(--space-16);
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Overview shell: panel card without default padding */
.flow-work-page .flow-work-panel-card {
    padding: 0;
    position: relative;
}

/* ── Content block question chrome ─────────────────────────────────────── */

.flow-work-question-item {
    padding: var(--space-16);
    background-color: var(--color-white);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-medium);
    margin-bottom: var(--space-12);
}

/* Question number is inline with title — no extra answer-area indent */
.flow-work-question-item .v3d-answer-area,
.flow-work-question-item .v3d-comment-area {
    padding-left: 0;
}

.flow-work-question-item .v3d-comment-area {
    margin-top: var(--space-8);
}

.flow-work-right-body .flow-work-question-item.v3d-question-row {
    margin-bottom: var(--space-12);
}

.flow-work-right-body .flow-work-question-item.v3d-question-row.focused {
    border-color: var(--color-primary, #1976d2);
    box-shadow: 0 0 0 1px var(--color-primary, #1976d2);
}

.flow-work-question-item.flow-work-question-item--required-missing {
    background-color: var(--color-error-light, #f8d7da);
    border-color: var(--color-error, #c62828);
}

.flow-work-section-tabs .mud-tab:has(.flow-work-section-tab--invalid) {
    background-color: var(--color-error-light, #f8d7da);
}

.flow-work-section-tabs .mud-tab:has(.flow-work-section-tab--invalid).mud-tab-active {
    background-color: var(--color-error-light, #f8d7da);
}

.flow-work-section-nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
    position: sticky;
    /* Cover .flow-work-right-body top padding so scrolled content cannot peek
       through as a white “floating” strip above the tabs. */
    top: 0;
    z-index: 3;
    margin: calc(-1 * var(--space-16, 16px)) calc(-1 * var(--space-16, 16px)) var(--space-8, 8px);
    padding: var(--space-16, 16px) var(--space-16, 16px) var(--space-8, 8px);
    background: var(--color-grey-50, #fafafa);
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
}

.flow-work-section-nav .flow-work-section-tabs {
    flex: 1 1 auto;
    min-width: 0;
}

.flow-work-section-nav .flow-work-section-tabs .mud-tabs-toolbar,
.flow-work-section-nav .flow-work-section-tabs .mud-tabs-tabbar,
.flow-work-section-nav .flow-work-section-tabs .mud-tabs-tabbar-wrapper {
    background-color: transparent;
}

.flow-work-section-view-toggle {
    flex: 0 0 auto;
    color: var(--color-text-secondary);
}

.flow-work-section-block {
    margin-bottom: var(--space-24);
    /* Sticky nav (incl. body-padding cover) + ~10px air under the tabs. */
    scroll-margin-top: calc(5rem + 10px);
}

.flow-work-section-heading {
    margin: 0 0 var(--space-12);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.flow-work-question-text {
    font-size: 15px;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-12);
    line-height: 1.5;
}

.flow-work-question-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-12);
    margin-bottom: var(--space-12);
}

.flow-work-question-header-row .flow-work-question-text {
    flex: 1;
    margin-bottom: 0;
}

.flow-work-question-number {
    color: var(--color-brand-primary);
    font-weight: 600;
}

.flow-work-right-body .flow-work-question-number {
    margin-right: var(--space-4);
}

.flow-work-question-options {
    display: flex;
    gap: var(--space-8);
    flex-wrap: wrap;
    margin-bottom: var(--space-8);
}

.flow-work-choice-btn {
    min-width: 80px;
}

.flow-bim-property-table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    width: 100%;
    margin-bottom: var(--space-8);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-medium);
    -webkit-overflow-scrolling: touch;
}

.flow-bim-property-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.flow-bim-property-table th,
.flow-bim-property-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--color-border-subtle);
    text-align: left;
    white-space: nowrap;
    vertical-align: top;
}

.flow-bim-property-table thead th {
    background: var(--color-surface-subtle, #f5f5f5);
    font-weight: 600;
    color: var(--color-text-secondary);
}

.flow-bim-property-table tbody tr:last-child td {
    border-bottom: none;
}

.flow-bim-property-table__sticky {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--color-white, #fff);
    box-shadow: 1px 0 0 var(--color-border-subtle);
}

.flow-bim-property-table thead .flow-bim-property-table__sticky {
    background: var(--color-surface-subtle, #f5f5f5);
    z-index: 2;
}

.flow-bim-property-table__guid {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flow-work-choice-btn--selected {
    font-weight: 600;
    background: var(--color-info-border);
}

.flow-work-followup {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin-top: var(--space-4);
    margin-bottom: var(--space-8);
    padding: var(--space-8) var(--space-12);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-medium);
    background: var( --color-warning-light);
}

.flow-work-followup--missing {
    border-color: var(--color-error, #c62828);
    background: var(--color-error-light, #f8d7da);
}

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

.flow-work-followup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    align-items: center;
}

.flow-work-followup-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 4px 12px;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.23));
    border-radius: var(--radius-medium);
    background: var(--color-white, #fff);
    color: var(--color-text-primary, #212121);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25;
    text-transform: none;
    cursor: pointer;
}

.flow-work-followup-btn:hover:not(:disabled):not(.flow-work-followup-btn--disabled) {
    background: var(--color-surface-subtle, #f5f5f5);
}

.flow-work-followup-btn:disabled,
.flow-work-followup-btn--disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.flow-work-followup-btn--done {
    background: var(--mud-palette-success, #2e7d32);
    border-color: var(--mud-palette-success, #2e7d32);
    color: #fff;
}

.flow-work-followup-btn--done:hover:not(:disabled):not(.flow-work-followup-btn--disabled) {
    background: var(--mud-palette-success-darken, #1b5e20);
    border-color: var(--mud-palette-success-darken, #1b5e20);
    color: #fff;
}

.flow-work-followup-photo-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.flow-work-followup-btn--disabled .flow-work-followup-photo-input {
    pointer-events: none;
}

.flow-question-image-btn {
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    line-height: 0;
}

.flow-question-image-btn:focus-visible {
    outline: 2px solid var(--color-primary, #1976d2);
    outline-offset: 2px;
    border-radius: var(--radius-small);
}

/* ── Compact Viewer3D status badges ────────────────────────────────────── */

.v3d-badge.flow-work-status-badge,
.v3d-status-chip.flow-work-status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 0;
    white-space: nowrap;
}

.v3d-badge.flow-work-status-badge.flow-work-status-active,
.v3d-status-chip.flow-work-status-badge.flow-work-status-active {
    background-color: var(--color-success-light);
    color: var(--color-success-text);
    border: 1px solid var(--color-success-border);
}

.v3d-badge.flow-work-status-badge.flow-work-status-rejected,
.v3d-status-chip.flow-work-status-badge.flow-work-status-rejected {
    background-color: var(--color-error-light);
    color: var(--color-danger-text);
    border: 1px solid var(--color-danger-border);
}

.v3d-badge.flow-work-status-badge.flow-work-status-waiting,
.v3d-status-chip.flow-work-status-badge.flow-work-status-waiting {
    background-color: var(--color-warning-light);
    color: var(--color-warning-text);
    border: 1px solid var(--color-warning-border);
}

.v3d-badge.flow-work-status-badge.flow-work-status-draft,
.v3d-status-chip.flow-work-status-badge.flow-work-status-draft {
    background: var(--color-border-subtle, #e0e0e0);
    color: var(--color-text-muted, #6b7280);
    border: 1px solid var(--color-border-subtle, #e0e0e0);
}

/* ── View toggle bar (Status / Modules / Table) ────────────────────────── */

.flow-work-view-bar {
    display: flex;
    align-items: center;
    gap: var(--space-8, 8px);
    padding: var(--space-12, 12px) var(--space-16, 16px);
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
    background: var(--color-grey-50, #fafafa);
    flex-shrink: 0;
}

/* ── Overview body (table or placeholder) ─────────────────────────────── */

.flow-work-overview-body {
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── Overview placeholder (kanban coming in 5b) ───────────────────────── */

.flow-work-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: var(--space-12, 12px);
    color: var(--color-text-muted, #9ca3af);
    font-size: 14px;
}

.flow-work-right-body.flow-work-inspect-readonly {
    opacity: 0.72;
}

/* ── Right pane ────────────────────────────────────────────────────────── */

.flow-work-right-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

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

.flow-work-right-header-title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.flow-work-right-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    margin-left: auto;
}

.flow-work-right-header-actions .mud-tooltip-root {
    display: inline-flex;
    align-items: center;
}

/* Keep Help / Maximize / Close the same hit-target and glyph size. */
.flow-work-right-header-actions .flow-work-viewer-header-btn.mud-icon-button {
    width: 32px;
    height: 32px;
    padding: 0;
}

.flow-work-right-header-actions .flow-work-viewer-header-btn .mud-icon-root {
    font-size: 1.15rem;
    width: 1.15rem;
    height: 1.15rem;
}

.flow-work-header-panels-menu {
    display: inline-flex;
    align-items: center;
}

.flow-work-header-panels-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 2rem;
    padding: 0 8px;
    border: none;
    border-radius: var(--radius-sm, 4px);
    background: transparent;
    color: var(--color-text-secondary, #4b5563);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.flow-work-header-panels-btn:hover {
    background: var(--color-grey-100, #f3f4f6);
    color: var(--color-text-primary, #111827);
}

.flow-work-header-panels-btn .bi-chevron-down {
    font-size: 10px;
    opacity: 0.8;
}

.flow-work-panels-menu-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.flow-work-panels-menu-item i,
.flow-work-panels-menu-item .mud-icon-root {
    width: 1rem;
    height: 1rem;
    text-align: center;
    font-size: 14px;
}

.flow-work-panels-menu-item.is-active {
    color: var(--color-primary, #2563eb);
    font-weight: 600;
}

.flow-work-panels-menu-item--danger {
    color: var(--color-error, #dc2626);
}

.flow-work-header-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-small);
    background: transparent;
    color: var(--color-text-secondary, #6b7280);
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
}

.flow-work-header-icon-btn:hover:not(:disabled) {
    background: var(--color-grey-100, #f3f4f6);
    color: var(--color-text-primary, #111827);
}

.flow-work-header-icon-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.flow-work-header-icon-btn--danger {
    color: var(--color-error, #d32f2f);
}

.flow-work-header-icon-btn--danger:hover:not(:disabled) {
    background: rgba(211, 47, 47, 0.08);
    color: var(--color-error, #d32f2f);
}

.flow-work-header-icon-btn--active {
    color: var(--color-primary, #1976d2);
}

.flow-work-header-icon-btn--has-files:not(.flow-work-header-icon-btn--active) {
    color: var(--color-text-primary, #1a1a1a);
}

.flow-work-header-icon-btn i,
.flow-work-header-icon-btn .mud-icon-root {
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
    line-height: 1;
}

.flow-work-right-body {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-16, 16px);
    background: var(--color-grey-50);
}

.flow-delete-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
}

.flow-delete-modal {
    width: min(420px, calc(100vw - 32px));
    padding: var(--space-24, 24px);
    background: var(--color-white, #fff);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.15));
}

.flow-delete-modal h4 {
    margin: 0 0 var(--space-8, 8px);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.flow-delete-modal p {
    margin: 0 0 var(--space-16, 16px);
    font-size: 14px;
    color: var(--color-text-secondary);
}

.flow-delete-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-8, 8px);
}

.flow-delete-modal__btn {
    padding: var(--space-8, 8px) var(--space-16, 16px);
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-small);
    border: 1px solid transparent;
    cursor: pointer;
}

.flow-delete-modal__btn--cancel {
    color: var(--color-text-primary);
    background: var(--color-grey-100, #f3f4f6);
    border-color: var(--color-border, #d9d9d9);
}

.flow-delete-modal__btn--danger {
    color: #fff;
    background: var(--color-error, #d32f2f);
    border-color: var(--color-error, #d32f2f);
}

.flow-delete-modal__btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Drawer placeholders ───────────────────────────────────────────────── */

.flow-work-drawer-placeholder {
    padding: var(--space-12, 12px);
    color: var(--color-text-muted, #9ca3af);
    font-size: 13px;
}

/* ── Kanban wrapper ────────────────────────────────────────────────────── */

/* Horizontal + vertical scroll inside the overview pane (Status & Modules).
   Must fill the parent height so the horizontal scrollbar stays at the bottom
   of the visible area — not below a tall column of cards (clipped by
   .flow-work-overview-body { overflow: hidden }). */
.flow-kanban-wrap {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    align-content: flex-start;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow-x: auto;
    overflow-y: auto;
    padding: var(--space-12, 12px) var(--space-16, 16px);
    gap: var(--space-12, 12px);
}

/* Fixed column width so Status/Modules always scroll horizontally instead of shrinking to fit */
.flow-kanban-wrap .phase-column {
    flex: 0 0 260px;
    width: 260px;
    min-width: 260px;
    max-width: 260px;
    height: auto;
    overflow: visible;
}

.flow-kanban-wrap .phase-column-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    overflow: visible;
}

.flow-kanban-wrap .task-card {
    flex-shrink: 0;
}

/* ── Flow context card extras ──────────────────────────────────────────── */

/* BCF badges inline with card title (top-right) */
.flow-card-bcf-badges {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Kanban column header — light grey tone */
.phase-column-header {
    display: flex;
    align-items: center;
    gap: var(--space-8, 8px);
    padding: var(--space-8, 8px) var(--space-12, 12px);
    background: var(--color-grey-100, #f3f4f6);
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
    border-radius: var(--radius-small, 4px) var(--radius-small, 4px) 0 0;
    margin: calc(-1 * var(--space-12, 12px)) calc(-1 * var(--space-12, 12px)) var(--space-12, 12px);
}

.phase-column-header h3 {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    color: var(--color-text-secondary, #374151);
}

.phase-column-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-brand-primary, #005f9e);
    cursor: pointer;
    border-radius: var(--radius-small, 4px);
    line-height: 1;
}

.phase-column-toggle:hover {
    background: var(--color-primary-soft, #e8f0fe);
}

.phase-column-toggle .bi {
    font-size: 12px;
}

.phase-column--collapsed .phase-column-header {
    border-radius: var(--radius-small, 4px);
    margin-bottom: 0;
    border-bottom: none;
}

.phase-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    background: var(--color-brand-primary, #005f9e);
    color: #fff;
    border-radius: 10px;
}

.flow-card-module-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    background: var(--color-blue-100, #dbeafe);
    color: var(--color-blue-700, #1d4ed8);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.flow-card-step {
    font-size: 12px;
    color: var(--color-text-muted, #6b7280);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-card-overdue-badge {
    font-size: 11px;
    color: var(--color-red-600, #dc2626);
    font-weight: 600;
}

/* ── Current / Next summary block ──────────────────────────────────────── */

.flow-work-current-next {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12, 12px);
    font-size: 13px;
    padding: var(--space-8, 8px) var(--space-16, 16px);
    background: var(--color-grey-50, #f9fafb);
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
    flex-shrink: 0;
}

.flow-work-current-next-side {
    display: flex;
    align-items: center;
    gap: var(--space-8, 8px);
    min-width: 0;
}

.flow-work-current-next-side--end {
    justify-content: flex-end;
    text-align: right;
}

.flow-work-current-next-label {
    font-weight: 600;
    color: var(--color-text-secondary, #6b7280);
    white-space: nowrap;
}

.flow-work-current-next-value {
    color: var(--color-text-primary, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-work-current-next-value.muted {
    color: var(--color-text-muted, #9ca3af);
}

.flow-work-node-description {
    margin: 0;
    padding: var(--space-8, 8px) var(--space-16, 16px);
    font-size: 13px;
    font-style: italic;
    color: var(--color-text-secondary, #6b7280);
    background: var(--color-grey-50, #f9fafb);
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
    flex-shrink: 0;
    white-space: pre-wrap;
}

/* ── Previous steps stack (read-only, above the current step) ───────────── */

/* Capped and scrollable so five expanded steps cannot push the editable step off screen. */
.flow-previous-steps {
    flex-shrink: 0;
    max-height: 45%;
    overflow-y: auto;
    padding: var(--space-8, 8px) var(--space-16, 16px);
    background: var(--color-grey-50, #f9fafb);
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
}

.flow-previous-steps-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, #9ca3af);
}

.flow-previous-step {
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    border-radius: 4px;
    background: var(--color-surface, #fff);
    margin-bottom: 4px;
}

.flow-previous-step--expanded {
    border-color: var(--color-border, #d1d5db);
}

.flow-previous-step-header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    background: transparent;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.flow-previous-step-header:hover {
    background: var(--color-grey-50, #f9fafb);
}

.flow-previous-step-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-previous-step-meta {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: var(--color-text-secondary, #6b7280);
}

/* Reads as reference material rather than a second thing to fill in. */
.flow-previous-step-body {
    padding: 0 10px 10px;
    border-top: 1px solid var(--color-border-subtle, #e5e7eb);
    opacity: 0.85;
}

.flow-previous-step-body .flow-history-timeline__item:last-child {
    padding-bottom: 0;
}

.flow-previous-step-body .mud-progress-linear {
    margin: 8px 0;
}

/* Why this section / step is showing (given answer, dismissible). */
.flow-work-right-pane > .flow-answer-reason-banner {
    flex-shrink: 0;
    margin: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}

.flow-work-right-body .flow-answer-reason-banner {
    margin-bottom: 8px;
}

/* ── Approval gate panel ────────────────────────────────────────────────── */

.flow-approval-previous-node {
    padding: var(--space-12, 12px) 0;
}

.flow-approval-previous-node-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-secondary, #6b7280);
    margin-bottom: 4px;
}

.flow-approval-previous-node-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary, #111827);
}

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

.flow-approval-gate-panel {
    padding: var(--space-12, 12px) 0;
}

.flow-approval-waiting-msg {
    font-size: 14px;
    color: var(--color-text-muted, #6b7280);
    font-style: italic;
}

.flow-signature-bar {
    margin-top: var(--space-12, 12px);
    padding-top: var(--space-12, 12px);
    border-top: 1px solid var(--color-border-subtle, #e5e7eb);
}

.flow-signature-bar__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary, #111827);
    margin-bottom: var(--space-4, 4px);
}

.flow-signature-bar__actions {
    margin-top: var(--space-8, 8px);
}

.flow-approval-actions {
    display: flex;
    gap: var(--space-8, 8px);
    margin-top: var(--space-12, 12px);
}

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

.flow-approval-files-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8, 8px);
    margin-bottom: var(--space-8, 8px);
}

.flow-approval-files-title {
    font-size: 0.875rem;
    font-weight: 600;
}

.flow-approval-files-table .flow-approval-files-actions {
    white-space: nowrap;
    width: 1%;
}

.flow-approval-files-pending {
    font-size: 0.8125rem;
    color: var(--color-text-secondary, #6b7280);
    margin-bottom: 2px;
    line-height: 1.3;
}

.flow-approval-files-pending em {
    font-style: italic;
    font-weight: 400;
}

.flow-approval-files-name {
    line-height: 1.3;
}

.flow-approval-files-comment {
    font-size: 0.75rem;
    color: var(--color-text-muted, #6b7280);
    margin-top: 2px;
}

.flow-rejected-files-scroll {
    max-height: calc(10 * 2.5rem);
    overflow-y: auto;
}

button.flow-rejected-files-badge {
    cursor: pointer;
    border: none;
    font: inherit;
}

.flow-approval-file-reject-row td {
    background: var(--color-danger-light, #fef2f2);
}

.flow-not-started-briefing {
    padding: var(--space-8, 8px) 0 var(--space-16, 16px);
}

.flow-not-started-briefing__def-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-12, 12px);
    margin-bottom: var(--space-8, 8px);
}

.flow-not-started-briefing__def-icon {
    font-size: 1.5rem;
    color: var(--color-text-muted, #6b7280);
}

.flow-not-started-briefing__def-name {
    margin: 0 0 var(--space-4, 4px);
    font-size: 1.1rem;
    font-weight: 600;
}

.flow-not-started-briefing__def-description {
    font-size: 0.875rem;
    color: var(--color-text-secondary, #4b5563);
    margin: 0 0 var(--space-12, 12px);
}

.flow-not-started-briefing__dates {
    margin-top: var(--space-16, 16px);
}

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

.flow-not-started-briefing__dates-table {
    margin-bottom: var(--space-16, 16px);
}

.flow-not-started-briefing__assignments {
    margin-top: var(--space-16, 16px);
}

.flow-approval-pipeline-table__row--waiting {
    background: var(--color-warning-light, rgba(245, 158, 11, 0.08));
}

.flow-not-started-briefing__actions {
    display: flex;
    gap: var(--space-8, 8px);
    margin-top: var(--space-8, 8px);
}

.flow-file-review-status--new {
    background: var(--color-info-light, #dbeafe) !important;
    color: var(--color-info, #1d4ed8) !important;
}

.flow-file-review-status--accepted {
    background: var(--color-success, #15803d) !important;
    color: #fff !important;
    font-weight: 600;
}

.flow-file-review-status--pending {
    background: var(--color-warning-light, #ffedd5) !important;
    color: var(--color-warning-strong, #c2410c) !important;
}

.flow-file-review-status--rejected {
    background: var(--color-danger, #dc2626) !important;
    color: #fff !important;
    font-weight: 600;
}

/* ── Flow Work filter panel (pattern from Workflow; self-contained in flow-work.css) ── */

.flow-filter-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-12);
    padding: var(--space-16);
    background: var(--color-grey-50);
}

.flow-filter-panel:not(:has(+ .app-filter-badges--attached)),
.flow-files-filter-banner:not(:has(+ .app-filter-badges--attached)) {
    border-bottom: 1px solid var(--color-border-subtle);
}

.flow-filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    flex: 1 1 140px;
    min-width: 120px;
}

.flow-filter-panel__hint {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.flow-filter-group--mode {
    flex: 0 0 auto;
    min-width: auto;
    align-self: flex-end;
    padding-bottom: 4px;
}

.flow-assignment-mode-toggle {
    flex-wrap: nowrap;
}

.flow-filter-group .mud-input-control {
    margin-top: 0;
    width: 100%;
    min-width: 0;
}

.flow-filter-group--checkbox {
    justify-content: flex-end;
    align-self: flex-end;
    padding-bottom: 4px;
    flex: 0 0 auto;
}

@media (min-width: 801px) {
    .flow-filter-panel {
        flex-wrap: nowrap;
    }

    .flow-filter-group {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
    }
}

.flow-work-toolbar__checkboxes {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    margin-left: var(--space-4, 4px);
}

.flow-work-toolbar__checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6, 6px);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.flow-work-toolbar__checkbox input[type="checkbox"] {
    cursor: pointer;
}

.flow-work-toolbar__overdue {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6, 6px);
    margin-left: var(--space-4, 4px);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.flow-work-toolbar__overdue input[type="checkbox"] {
    cursor: pointer;
}

.flow-files-filter-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8, 8px);
    padding: var(--space-12, 12px) var(--space-16, 16px);
    background: var(--color-grey-50, #fafafa);
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
    font-size: 13px;
    color: var(--color-text-primary, #111827);
}

.flow-files-filter-banner > i {
    color: var(--color-text-secondary, #6b7280);
}

.flow-files-filter-banner__hint {
    flex: 1 1 220px;
    min-width: 0;
}

.flow-work-toolbar__group {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8, 8px);
    flex-wrap: wrap;
}

.flow-work-toolbar__divider {
    width: 1px;
    align-self: stretch;
    min-height: 24px;
    background: var(--color-border-subtle, #e5e7eb);
    flex-shrink: 0;
}

.flow-work-toolbar__dropdown-btn {
    position: relative;
}

.flow-work-toolbar__filters-label {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.flow-work-toolbar__views {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.flow-work-toolbar__views-label {
    display: inline-flex;
    align-items: center;
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-work-toolbar__views-hint {
    margin-left: 0.4rem;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary, #6b7280);
}

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

.flow-filter-views-table th,
.flow-filter-views-table td {
    padding: 0.45rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
    vertical-align: middle;
}

.flow-filter-views-table__row--active {
    background: var(--color-primary-soft, #eff6ff);
}

.flow-filter-views-table__actions {
    white-space: nowrap;
}

.flow-work-toolbar__filter-badge {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 2px;
    border-radius: 50%;
    background: var(--color-primary, #2563eb);
    vertical-align: middle;
}

.flow-work-toolbar__filter-item--active {
    font-weight: 600;
}

.flow-work-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-8, 8px);
    padding: var(--space-10, 10px) var(--space-16, 16px);
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
    background: var(--color-grey-50, #fafafa);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.flow-work-toolbar--collapsed {
    justify-content: center;
    flex-wrap: nowrap;
    min-height: 28px;
    padding: 2px var(--space-8, 8px);
}

.flow-work-toolbar__collapse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--color-text-secondary, #6b7280);
    cursor: pointer;
    line-height: 1;
}

.flow-work-toolbar__collapse .bi {
    font-size: 1rem;
}

.flow-work-toolbar__collapse:hover,
.flow-work-toolbar__collapse:focus-visible {
    color: var(--color-text-primary, #111827);
    background: var(--color-surface-hover, #f1f5f9);
}

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

.flow-work-toolbar__trailing {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4, 4px);
    margin-left: 0;
}

.flow-work-toolbar__search {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 10rem;
    max-width: 16rem;
    padding: 2px 8px;
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    border-radius: 4px;
    background: var(--color-bg-default, #ffffff);
}

.flow-work-toolbar__search-icon {
    color: var(--color-text-secondary, #6b7280);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.flow-work-toolbar__search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.8125rem;
    color: var(--color-text-primary, #111827);
    padding: 4px 0;
}

.flow-work-toolbar__search:focus-within {
    border-color: var(--color-primary, #4f46e5);
}

.flow-work-toolbar__refresh--spin {
    display: inline-block;
    animation: flow-work-toolbar-spin 0.8s linear infinite;
}

@keyframes flow-work-toolbar-spin {
    to { transform: rotate(360deg); }
}

/* ── Table column settings drawer ─────────────────────────────────── */

.flow-work-column-settings-overlay {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    justify-content: flex-end;
    background: rgba(15, 23, 42, 0.28);
}

.flow-work-column-settings-pane {
    width: min(360px, 100%);
    height: 100%;
    background: var(--color-surface, #fff);
    border-left: 1px solid var(--color-border-subtle, #e5e7eb);
    box-shadow: -8px 0 24px rgba(15, 23, 42, 0.12);
    overflow: auto;
}

.flow-work-column-settings {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.flow-work-column-settings__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
}

.flow-work-column-settings__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.flow-work-column-settings__layouts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
}

.flow-work-column-settings__layout-menu {
    width: 100%;
}

.flow-work-column-settings__layout-select {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
}

.flow-work-column-settings__layout-select-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-work-column-settings__layout-row {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 220px;
    padding: 0 4px;
}

.flow-work-column-settings__layout-pick {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    text-align: left;
    padding: 8px 10px;
    border-radius: 4px;
    color: inherit;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-work-column-settings__layout-pick:hover,
.flow-work-column-settings__layout-pick.is-active {
    background: var(--color-surface-hover, #f1f5f9);
}

.flow-work-column-settings__layout-delete {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--color-text-secondary, #4b5563);
    cursor: pointer;
}

.flow-work-column-settings__layout-delete:hover {
    background: var(--color-surface-hover, #f1f5f9);
    color: var(--color-danger, #b91c1c);
}

.flow-work-column-settings__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px 20px;
    overflow: auto;
}

.flow-work-column-settings__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
}

.flow-work-column-settings__move {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.flow-work-column-settings__move-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--color-text-secondary, #4b5563);
    cursor: pointer;
}

.flow-work-column-settings__move-btn:hover:not(:disabled) {
    background: var(--color-surface-hover, #f1f5f9);
    color: var(--color-text, #0f172a);
}

.flow-work-column-settings__move-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.flow-work-ag-cell--reviewers {
    align-items: flex-start;
    white-space: normal;
    line-height: 1.35;
    padding-top: 6px;
    padding-bottom: 6px;
}

.flow-work-ag-reviewers {
    white-space: normal;
}

/* ── Flowchart (read-only diagram) ──────────────────────────────────────── */

.flow-diagram-host {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* Selected step: thicker border on the existing stroke color (current / past / future). */
.flow-diagram-host .react-flow__node.selected:not(.rf-group-node) {
    border-width: 4px !important;
}

.flow-inspection-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--color-blue-50, #eff6ff);
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
    font-size: 13px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.flow-inspection-banner-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.flow-step-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    color: var(--color-text-secondary, #4b5563);
    font-size: 12px;
    min-width: 0;
    max-width: 100%;
}

.flow-step-meta--inline {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flow-step-meta-person,
.flow-step-meta-date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flow-step-meta-person i {
    font-size: 12px;
    opacity: 0.85;
}

.flow-edit-lease-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--color-amber-50, #fffbeb);
    border-bottom: 1px solid var(--color-amber-200, #fde68a);
    color: var(--color-amber-900, #78350f);
    font-size: 13px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.flow-idle-warning-toast {
    position: fixed;
    top: 72px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1600;
    max-width: min(640px, calc(100vw - 32px));
    pointer-events: auto;
}

.flow-idle-warning-toast__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-radius: 4px;
    background: var(--mud-palette-warning, #ff9800);
    color: var(--mud-palette-warning-text, #ffffff);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    font-size: 14px;
    line-height: 1.4;
}

.flow-idle-warning-toast__renew {
    color: inherit !important;
    border-color: currentColor !important;
    margin-left: auto;
    text-transform: none;
    white-space: nowrap;
}

.flow-designer-workspace-host {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100%;
}

.flow-gate-undo-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 13px;
    flex-shrink: 0;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 2;
}

.flow-gate-undo-banner--undo {
    background: var(--color-blue-50, #eff6ff);
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
    color: var(--color-blue-900, #1e3a8a);
}

.flow-gate-undo-banner--reject {
    background: var(--color-amber-50, #fffbeb);
    border-bottom: 1px solid var(--color-amber-200, #fde68a);
    color: var(--color-amber-900, #78350f);
}

.flow-completed-summary {
    padding: 8px 4px 16px;
}

.flow-completed-summary__hero {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.flow-completed-summary__hero i {
    font-size: 1.75rem;
    color: var(--color-success, #2E8540);
}

.flow-completed-summary__title {
    font-weight: 600;
    font-size: 1.05rem;
}

.flow-completed-summary__hint {
    margin: 4px 0 0;
    color: var(--color-text-secondary, #6b7280);
    font-size: 0.875rem;
}

.flow-completed-summary__link {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-info, #0066B3);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}

.flow-completed-summary__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px 16px;
}

.flow-completed-summary__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.875rem;
}

.flow-completed-summary__label {
    color: var(--color-text-secondary, #6b7280);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.flow-completed-summary__reports-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.flow-completed-summary__reports-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.flow-completed-summary__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}

.flow-completed-summary__steps {
    margin-top: 18px;
    overflow-x: auto;
}

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

.flow-completed-summary__table th,
.flow-completed-summary__table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
    vertical-align: top;
}

.flow-completed-summary__table th {
    color: var(--color-text-secondary, #6b7280);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 600;
}

/* ── File viewer overlay ─────────────────────────────────────────────────── */

.flow-viewer-host {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* ── Files panel ─────────────────────────────────────────────────── */

.flow-files-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ── Files toolbar: sort + filter dropdowns side by side ─────────── */

.flow-files-toolbar {
    display: flex;
    gap: 6px;
    padding: 8px 10px 6px;
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
    flex-shrink: 0;
}

.flow-files-toolbar--flush {
    border-bottom: none;
    padding-bottom: 4px;
}

/* Two equal dropdown columns + fixed trail (help) so row 2 lines up with row 1. */
.flow-files-filter-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 28px;
    column-gap: 6px;
    align-items: center;
}

.flow-files-toolbar.flow-files-filter-grid {
    display: grid;
}

.flow-files-search-row.flow-files-filter-grid {
    display: grid;
}

.flow-files-toolbar-trail {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.flow-files-toolbar-trail .app-help-btn {
    margin-left: 0 !important;
}

.flow-files-toolbar-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.flow-files-filter-grid .flow-files-toolbar-group {
    flex: unset;
    width: 100%;
}

.flow-files-filter-grid__span-2 {
    grid-column: 1 / span 2;
}

.flow-drawer-sort-anchor {
    display: inline-flex;
}

.flow-drawer-sort-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--color-text-muted, #6b7280);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
}

.flow-drawer-sort-btn:hover,
.flow-drawer-sort-btn.is-active {
    background: var(--color-grey-100, #f3f5f7);
    color: var(--color-text-primary, #111827);
}

.flow-drawer-sort-btn i {
    font-size: 16px;
}

.flow-files-toolbar-icon {
    font-size: 15px;
    color: var(--color-text-muted, #6b7280);
    flex-shrink: 0;
    width: 15px;
    text-align: center;
}

.flow-files-select {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    padding: 2px 4px;
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    border-radius: 4px;
    background: var(--color-bg-default, #ffffff);
    color: var(--color-text-primary, #111827);
    cursor: pointer;
    appearance: auto;
    outline: none;
}

.flow-files-select:focus {
    border-color: var(--color-primary, #4f46e5);
}

.flow-files-search-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px 8px;
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
    flex-shrink: 0;
}

.flow-files-search-row--flush {
    border-bottom: none;
    padding-bottom: 4px;
}

.flow-files-search-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    font-size: 12px;
    padding: 2px 6px;
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    border-radius: 4px;
    background: var(--color-bg-default, #ffffff);
    color: var(--color-text-primary, #111827);
    outline: none;
}

.flow-files-search-input:focus {
    border-color: var(--color-primary, #4f46e5);
}

/* ── File explorer body ──────────────────────────────────────────── */

.flow-files-explorer-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.flow-files-explorer-body .app-table-scroll {
    overflow-x: hidden;
    width: 100%;
}

.flow-files-refresh-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 8px 8px;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.3;
    flex-shrink: 0;
}

.flow-files-refresh-banner--ok {
    background: color-mix(in srgb, var(--color-success, #16a34a) 12%, transparent);
    color: var(--color-text-primary, #111827);
    border: 1px solid color-mix(in srgb, var(--color-success, #16a34a) 35%, transparent);
}

.flow-files-refresh-banner--error {
    background: color-mix(in srgb, var(--color-danger, #dc2626) 12%, transparent);
    color: var(--color-text-primary, #111827);
    border: 1px solid color-mix(in srgb, var(--color-danger, #dc2626) 35%, transparent);
}

.flow-files-refresh-spin {
    display: inline-block;
    animation: flow-files-refresh-spin 0.8s linear infinite;
}

@keyframes flow-files-refresh-spin {
    to { transform: rotate(360deg); }
}

.flow-files-icon-table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

.flow-files-icon-table th,
.flow-files-icon-table td {
    border: none;
    border-bottom: none;
}

.flow-files-icon-table .tc-file-picker__row {
    border: none;
}

.flow-files-select-col {
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    padding-left: 4px !important;
    padding-right: 2px !important;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
}

.flow-files-name-col {
    min-width: 0;
    max-width: 0; /* take remaining space under table-layout:fixed */
    width: auto;
    overflow: hidden;
    padding-right: 4px !important;
}

.flow-files-name-col .tc-file-picker__name {
    display: flex;
    max-width: 100%;
    overflow: hidden;
    align-items: center;
}

.flow-files-name-col .tc-file-picker__name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.flow-files-folder-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1;
    background: var(--color-primary, #4f46e5);
    color: #ffffff;
    vertical-align: middle;
}

.flow-files-required-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--color-warning, #d97706);
    line-height: 1;
}

.flow-files-icon-col {
    width: 22px;
    min-width: 22px;
    max-width: 22px;
    padding: 0 !important;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.flow-files-icon-table .task-card-action-btn {
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    border-radius: 4px;
    color: var(--color-text-secondary, #64748b);
    cursor: pointer;
    line-height: 1;
}

.flow-files-icon-table .task-card-action-btn:hover {
    background: var(--color-grey-100, #f1f5f9);
    color: var(--color-text-primary, #0f172a);
}

.flow-files-eye-disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    cursor: not-allowed;
}

.flow-files-eye-disabled .task-card-action-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    pointer-events: none;
}

.flow-file-review-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    border-radius: 4px;
    cursor: default;
    line-height: 1;
    font-size: 0.9rem;
}

button.flow-file-review-status-icon {
    cursor: pointer;
}

button.flow-file-review-status-icon:hover {
    background: var(--color-grey-100, #f1f5f9);
}

.flow-file-review-status-icon--rejected {
    color: var(--color-danger, #dc2626);
}

.flow-file-review-status-icon--accepted {
    color: var(--color-success, #16a34a);
}

.flow-file-review-status-icon--pending {
    color: var(--color-warning, #d97706);
}

.flow-file-review-status-icon--new {
    color: var(--color-text-muted, #6b7280);
}

.flow-file-review-detail-events {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.flow-file-review-detail-events li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
}

.flow-file-review-detail-summary__status-row {
    min-width: 0;
}

.flow-file-review-detail-step {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary, #4b5563);
}

.flow-files-row-actions .task-card-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    border-radius: 4px;
    color: var(--color-text-secondary, #64748b);
    cursor: pointer;
    line-height: 1;
}

.flow-files-row-actions .task-card-action-btn:hover {
    background: var(--color-grey-100, #f1f5f9);
    color: var(--color-text-primary, #0f172a);
}

.flow-files-row-actions-spacer {
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

/* ── Version rows ────────────────────────────────────────────────── */

.flow-files-version-row {
    background: var(--color-grey-50, #fafafa);
    font-size: 12px;
}

.flow-files-version-row td {
    padding: 2px 8px 2px 24px;
}

/* ==========================================================================
   Create Context Wizard — flow-create-wizard__*
   ========================================================================== */

.flow-create-wizard {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.flow-create-wizard__header {
    display: flex;
    align-items: center;
    gap: var(--space-8, 8px);
    padding: var(--space-12, 12px) var(--space-16, 16px);
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
    flex-shrink: 0;
}

.flow-create-wizard__title {
    flex: 1;
    font-weight: 600;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-create-wizard__step-indicator {
    font-size: 12px;
    color: var(--color-text-muted, #9ca3af);
    white-space: nowrap;
}

.flow-create-wizard__diagram .mud-icon-root {
    width: 1.125rem;
    height: 1.125rem;
    font-size: 1.125rem;
}

.flow-create-wizard__progress {
    flex-shrink: 0;
}

.flow-create-wizard__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-16, 16px);
}

.flow-create-wizard__step {
    display: flex;
    flex-direction: column;
    gap: var(--space-8, 8px);
}

.flow-create-wizard__footer {
    display: flex;
    align-items: center;
    gap: var(--space-8, 8px);
    padding: var(--space-12, 12px) var(--space-16, 16px);
    border-top: 1px solid var(--color-border-subtle, #e5e7eb);
    flex-shrink: 0;
    justify-content: space-between;
}

.flow-create-wizard__footer-actions {
    display: flex;
    align-items: center;
    gap: var(--space-8, 8px);
    margin-left: auto;
}

/* Step 1 — definition preview */

.flow-create-wizard__def-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8, 8px);
    margin-bottom: var(--space-12, 12px);
}

.flow-create-wizard__def-icon {
    font-size: 20px;
    color: var(--color-brand-primary, #0069aa);
    flex-shrink: 0;
    margin-top: 2px;
}

.flow-create-wizard__def-name {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--color-text-primary, #111827);
}

.flow-create-wizard__def-description {
    font-size: 13px;
    color: var(--color-text-secondary, #374151);
    margin: 0 0 var(--space-12, 12px);
}

.flow-create-wizard__node-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--space-8, 8px);
}

.flow-create-wizard__node-row {
    display: flex;
    align-items: center;
    gap: var(--space-6, 6px);
    font-size: 13px;
    padding: var(--space-4, 4px) 0;
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
}

.flow-create-wizard__node-row:last-child {
    border-bottom: none;
}

.flow-create-wizard__node-order {
    flex: 0 0 1.75rem;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-muted, #6b7280);
    text-align: right;
}

.flow-create-wizard__node-icon {
    font-size: 14px;
    color: var(--color-text-muted, #9ca3af);
    flex-shrink: 0;
}

.flow-create-wizard__node-title {
    flex: 1;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-create-wizard__node-kind {
    font-size: 11px;
    color: var(--color-text-muted, #9ca3af);
    flex-shrink: 0;
}

/* Step 3 — planning */

.flow-create-wizard__no-planning {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-8, 8px);
    padding: var(--space-24, 24px);
    color: var(--color-text-muted, #9ca3af);
    font-size: 14px;
    text-align: center;
}

.flow-create-wizard__no-planning i {
    font-size: 2rem;
    opacity: 0.4;
}

.flow-create-wizard__planning-hint {
    font-size: 13px;
    color: var(--color-text-secondary, #374151);
    margin: 0 0 var(--space-12, 12px);
}

.flow-create-wizard__planning-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 4px);
    margin-bottom: var(--space-12, 12px);
    padding-bottom: var(--space-12, 12px);
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
}

.flow-create-wizard__planning-row:last-child {
    border-bottom: none;
}

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

.flow-create-wizard__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
}

.flow-create-wizard__select {
    display: block;
    width: 100%;
    height: 36px;
    padding: var(--space-4) var(--space-8);
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-text-primary);
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border, #d9d9d9);
    border-radius: var(--radius-small);
    outline: none;
    box-sizing: border-box;
}

.flow-create-wizard__select:focus {
    border-color: var(--color-primary, #005f9e);
    box-shadow: 0 0 0 2px rgba(0, 95, 158, 0.15);
}

/* User search dropdown — constrained to input width */
.flow-create-wizard__field .user-search-wrapper,
.flow-create-wizard__reviewer-field .user-search-wrapper {
    position: relative;
    width: 100%;
}

.flow-create-wizard__field .search-results,
.flow-create-wizard__reviewer-field .search-results {
    top: 100%;
    margin-top: 2px;
}

/* ==========================================================================
   Drawer definition panels — flow-drawer-definition-*
   (FlowSystemFlowsPanel, FlowCustomFlowsPanel)
   ========================================================================== */

.flow-drawer-definitions-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.flow-drawer-sort-bar {
    display: flex;
    gap: 4px;
    padding: var(--space-8, 8px) var(--space-12, 12px);
    flex-shrink: 0;
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
}

.flow-drawer-definition-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.flow-drawer-definition-row {
    display: flex;
    align-items: center;
    gap: var(--space-8, 8px);
    padding: var(--space-10, 10px) var(--space-12, 12px);
    border: none;
    border-left: 0.25rem solid transparent;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
    transition: background-color 0.1s ease, border-left-color 0.1s ease;
}

@media (hover: hover) and (pointer: fine) {
    .flow-drawer-definition-row:hover:not(.is-selected) {
        background: var(--color-grey-50, #fafafa);
    }
}

.flow-drawer-definition-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-drawer-definition-icon {
    font-size: 15px;
    color: var(--color-brand-primary, #0069aa);
    flex-shrink: 0;
}

.flow-drawer-definition-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-primary, #111827);
}

.flow-drawer-definition-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.flow-drawer-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-8, 8px);
    padding: var(--space-24, 24px) var(--space-16, 16px);
    color: var(--color-text-muted, #9ca3af);
    font-size: 13px;
    text-align: center;
}

.flow-drawer-empty i {
    font-size: 2rem;
    opacity: 0.3;
}

/* ── File viewers (Phase 5h) ─────────────────────────────────────────── */

.flow-work-viewer-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.flow-work-viewer-panel--maximized {
    position: fixed;
    inset: 0;
    z-index: 1400;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    background: var(--color-white, #fff);
    box-shadow: none;
}

.flow-work-viewer-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

/* Lightweight PIN HUD over the active viewer (not detail, not kanban). */
.flow-pin-popup {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 30;
    width: min(320px, calc(100% - 24px));
    max-height: min(360px, calc(100% - 24px));
    overflow: auto;
    height: fit-content;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    background: var(--color-white, #fff);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.flow-pin-popup__main {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.flow-pin-popup__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

.flow-pin-popup__header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.flow-pin-popup__title-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

.flow-pin-popup__title-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    flex: 1 1 auto;
}

.flow-pin-popup__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.flow-pin-popup__header-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

.flow-pin-popup__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-secondary, #64748b);
    cursor: pointer;
}

.flow-pin-popup__icon-btn:hover {
    background: var(--color-surface-muted, #f1f5f9);
    color: var(--color-text-primary, #0f172a);
}

.flow-pin-popup__icon-btn--markup-active {
    color: var(--mud-palette-warning, #f59e0b);
}

.flow-pin-popup__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.flow-pin-popup__line {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--color-text-primary, #0f172a);
}

.flow-pin-popup__line i {
    margin-top: 2px;
    flex-shrink: 0;
    opacity: 0.7;
}

.flow-pin-popup__line span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.flow-pin-popup__line--muted {
    font-size: 0.75rem;
    color: var(--color-text-secondary, #64748b);
}

.flow-pin-popup__extra-badge {
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.15rem 0.35rem;
    border-radius: 0.25rem;
    color: var(--color-text-secondary, #64748b);
    background: var(--color-grey-100, #f1f5f9);
}

.flow-pin-popup__desc {
    font-size: 0.8125rem;
    line-height: 1.35;
    font-weight: 400;
    color: var(--color-text-secondary, #64748b);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.flow-pin-popup__flows {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
}

.flow-pin-popup__flow-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 4px 6px;
    margin: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-primary, #0f172a);
    font-size: 0.8125rem;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}

.flow-pin-popup__flow-row:hover {
    background: var(--color-surface-muted, #f1f5f9);
}

.flow-pin-popup__flow-row i {
    flex-shrink: 0;
    opacity: 0.7;
}

.flow-pin-popup__flow-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-pin-popup__flow-badge {
    flex: 0 0 auto;
    transform: scale(0.9);
    transform-origin: right center;
}

.flow-pin-popup__more {
    align-self: flex-start;
    margin: 2px 0 0 22px;
    padding: 0.15rem 0.4rem;
    border: none;
    border-radius: 0.25rem;
    background: var(--color-grey-100, #f1f5f9);
    color: var(--color-text-secondary, #64748b);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
}

.flow-pin-popup__more:hover {
    color: var(--color-text-primary, #0f172a);
}

.flow-pin-popup__bcf {
    align-self: flex-start;
    margin-top: 2px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-secondary, #64748b);
    font-size: 0.75rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.flow-pin-popup__bcf:hover {
    color: var(--color-text-primary, #0f172a);
}

.flow-ri-empty-hint {
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    max-width: 16rem;
}

/* ── Overview table (AG Grid) ────────────────────────────────── */

.flow-work-ag-grid-host,
.flow-work-ag-grid {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    height: 100%;
}

/* Shared hover/selected — Connect-aligned (see .app-row--* in components.css).
   Scoped to Flow Work grid only so IDS / other ag-theme-alpine hosts stay unchanged. */
.flow-work-ag-grid.ag-theme-alpine {
    --ag-background-color: var(--color-white);
    --ag-odd-row-background-color: var(--color-white);
    --ag-row-hover-color: var(--color-grey-50);
    --ag-selected-row-background-color: var(--color-primary-light);
}

/* Flat white body rows so grey-50 hover is visible (header unchanged). */
.flow-work-ag-grid.ag-theme-alpine .ag-center-cols-container .ag-row,
.flow-work-ag-grid.ag-theme-alpine .ag-pinned-left-cols-container .ag-row,
.flow-work-ag-grid.ag-theme-alpine .ag-pinned-right-cols-container .ag-row {
    background-color: var(--color-white);
}

.flow-work-ag-grid.ag-theme-alpine .ag-row-selected {
    background-color: var(--color-primary-light) !important;
    border-left: 0.25rem solid var(--color-brand-primary-light) !important;
}

.flow-work-ag-grid.ag-theme-alpine .ag-row-selected .ag-cell {
    background-color: transparent !important;
    font-weight: inherit;
}

.flow-work-ag-grid.ag-theme-alpine .ag-row-selected:hover {
    background-color: var(--color-primary-light) !important;
}

.flow-work-ag-grid .ag-root-wrapper {
    border: 1px solid var(--color-border-subtle, #e5e7eb);
}

.flow-work-ag-grid .ag-header-cell,
.flow-work-ag-grid .ag-cell {
    font-size: 0.8125rem;
}

.flow-work-ag-grid .ag-cell {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.flow-work-ag-cell--center {
    justify-content: center;
    text-align: center;
}

.flow-work-ag-cell--bcf {
    overflow: visible;
}

.flow-work-ag-bcf-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.flow-work-ag-cell--actions {
    overflow: visible;
    justify-content: flex-end;
}

.flow-work-ag-grid .ag-header-cell.flow-work-ag-cell--actions .ag-header-cell-label {
    justify-content: flex-end;
}

.flow-work-ag-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

.flow-work-ag-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--color-text-secondary, #4b5563);
    cursor: pointer;
}

.flow-work-ag-action-icon {
    display: block;
    flex-shrink: 0;
}

.flow-work-ag-action-btn:hover {
    background: var(--color-surface-hover, #f1f5f9);
    color: var(--color-text, #0f172a);
}

.flow-work-ag-col--yes {
    background-color: #e8f5e9 !important;
}

.flow-work-ag-col--no {
    background-color: #ffebee !important;
}

.flow-work-ag-col--partial {
    background-color: #fff8e1 !important;
}

.flow-work-ag-col--open {
    background-color: #f5f5f5 !important;
}

.flow-work-ag-actions-menu {
    position: fixed;
    z-index: 1200;
    min-width: 12rem;
    padding: 0.35rem 0;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
}

.flow-work-ag-actions-menu__item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 0.45rem 0.85rem;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 0.8125rem;
    color: var(--color-text, #0f172a);
    cursor: pointer;
}

.flow-work-ag-actions-menu__item .flow-work-panels-menu-item {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    pointer-events: none;
}

.flow-work-ag-actions-menu__item:hover {
    background: var(--color-surface-hover, #f1f5f9);
}

.flow-work-ag-actions-menu__divider {
    height: 1px;
    margin: 0.35rem 0;
    background: var(--color-border-subtle, #e5e7eb);
}

/* ── IFC / PDF / image viewer hosts ─────────────────────────────── */

.flow-work-viewer-ifc,
.flow-work-viewer-pdf,
.flow-work-viewer-image,
.flow-work-viewer-xlsx,
.flow-work-viewer-docx,
.flow-work-viewer-dxf {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.flow-work-viewer-pdf .pdf-viewer-container {
    flex: 1;
    min-height: 0;
}

.flow-work-viewer-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-8, 8px);
    padding: var(--space-8, 8px) var(--space-12, 12px);
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
    flex-shrink: 0;
}

.flow-work-viewer-toolbar-separator {
    width: 1px;
    align-self: stretch;
    min-height: 1.75rem;
    margin: 0 var(--space-4, 4px);
    background: var(--color-border-subtle, #e5e7eb);
}

.flow-work-viewer-toolbar-label {
    margin-left: var(--space-6, 6px);
    font-size: 0.8125rem;
    font-weight: 500;
}

.flow-work-viewer-selection-hint {
    font-size: 12px;
    color: var(--color-text-muted, #6b7280);
}

@keyframes flow-viewer-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.flow-work-viewer-icon--spinning {
    display: inline-block;
    animation: flow-viewer-spin 1s linear infinite;
}

.flow-work-viewer-canvas-host {
    flex: 1;
    min-height: 0;
    position: relative;
}

.flow-work-viewer-canvas-host .thatopen-viewer-host {
    height: 100%;
}

.flow-work-viewer-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8, 8px);
    padding: var(--space-24, 24px);
    color: var(--color-text-muted, #6b7280);
    font-size: 13px;
}

.flow-work-viewer-context-anchor {
    position: absolute;
    width: 0;
    height: 0;
    overflow: visible;
    pointer-events: none;
}

.flow-work-viewer-point-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: auto;
}

.flow-work-viewer-image-host {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #000;
    overflow: hidden;
}

.flow-work-viewer-image-host .image-inline-viewer {
    flex: 1;
    min-height: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
}

.flow-work-viewer-image-host .image-inline-viewer-scroll,
.flow-work-viewer-image-host .image-inline-viewer-img {
    pointer-events: none;
}

.flow-work-viewer-image-host--markup .image-inline-viewer-canvas-wrapper,
.flow-work-viewer-image-host--markup .pdf-markup-overlay {
    pointer-events: auto;
}

.flow-work-viewer-image-host .image-inline-viewer-toolbar {
    pointer-events: auto;
}

/* ── XLSX viewer ───────────────────────────────────────────────── */

.flow-work-viewer-xlsx-sheet-select,
.flow-work-viewer-xlsx-delimiter-select {
    min-width: 10rem;
    max-width: 18rem;
}

.flow-work-viewer-xlsx-truncated {
    margin: 0;
    border-radius: 0;
    flex-shrink: 0;
}

.flow-work-viewer-xlsx-host {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-surface, #fff);
}

.flow-work-viewer-xlsx-host--pending {
    display: none;
}

.flow-work-viewer-xlsx-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: var(--space-8, 8px);
}

.flow-work-viewer-xlsx-table {
    border-collapse: collapse;
    table-layout: fixed;
    background: var(--color-surface, #fff);
    color: var(--color-text, #111827);
    font-size: 12px;
    line-height: 1.25;
}

.flow-work-viewer-xlsx-table td {
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    padding: 2px 6px;
    vertical-align: middle;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 0;
}

.flow-work-viewer-xlsx-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.flow-work-viewer-dxf-host {
    flex: 1;
    min-height: 0;
    position: relative;
    background: #1e1e1e;
}

.flow-work-viewer-dxf-host--pending {
    /* Keep layout size for WebGL init (display:none → 0×0 canvas). */
    visibility: hidden;
    pointer-events: none;
}

.flow-work-viewer-dxf-progress {
    flex-wrap: wrap;
    gap: var(--space-8, 8px);
}

.flow-work-viewer-dxf-progress-label {
    flex: 1;
    min-width: 8rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted, #6b7280);
}

.flow-work-viewer-dxf-layers {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 4px);
    max-height: 10rem;
    overflow: auto;
    padding: var(--space-8, 8px) var(--space-12, 12px);
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
    flex-shrink: 0;
}

.flow-work-viewer-dxf-layer {
    display: flex;
    align-items: center;
    gap: var(--space-6, 6px);
    font-size: 0.8125rem;
    cursor: pointer;
}

.flow-work-viewer-dxf-layer-swatch {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 2px;
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    flex-shrink: 0;
}

.flow-work-viewer-dxf-layer-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-work-viewer-dxf-warning {
    margin: 0 var(--space-12, 12px);
    flex-shrink: 0;
}

.flow-work-viewer-docx-host {
    flex: 1;
    min-height: 0;
    position: relative;
    background: var(--color-surface-muted, #f3f4f6);
}

.flow-work-viewer-docx-host--pending {
    display: none;
}

.flow-work-viewer-docx-scroll {
    height: 100%;
    overflow: auto;
    padding: var(--space-12, 12px);
}

.flow-work-viewer-docx-zoom {
    display: inline-block;
    transform-origin: top left;
}

.flow-work-viewer-docx-styles {
    display: none;
}

.flow-work-viewer-docx-body {
    background: transparent;
}

.flow-work-viewer-docx-body .docx-wrapper {
    background: transparent;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-12, 12px);
}

.flow-work-viewer-docx-body section.flow-docx {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    margin: 0 auto;
}

.flow-work-viewer-docx-warning {
    margin: 0 var(--space-12, 12px);
    flex-shrink: 0;
}

.image-inline-viewer-canvas-wrapper {
    position: relative;
    display: inline-block;
    line-height: 0;
    max-width: 100%;
}

.image-inline-viewer-canvas-wrapper .pdf-markup-overlay {
    position: absolute;
    inset: 0;
}

.flow-work-viewer-marker {
    position: absolute;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    margin-top: -6px;
    border-radius: 50%;
    background: var(--color-brand-primary, #0069aa);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    z-index: 5;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
}

/* Other Review Items when Highlight is on — primary blue */
.flow-work-viewer-marker--highlight {
    background: var(--color-brand-primary, #0069aa);
    pointer-events: auto;
    cursor: pointer;
}

/* Open Review Item detail — red, stays until detail closes */
.flow-work-viewer-marker--selected {
    width: 16px;
    height: 16px;
    margin-left: -8px;
    margin-top: -8px;
    background: #ef4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.2);
    z-index: 6;
}

.flow-work-linked-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6, 6px);
    padding: 4px var(--space-12, 12px) var(--space-8, 8px);
    background: var(--color-grey-50);
}

.flow-work-linked-items--compact {
    padding: 0;
    background: transparent;
}

.flow-work-linked-items-label {
    font-size: 12px;
    color: var(--color-text-muted, #6b7280);
}

.flow-work-linked-items-empty {
    font-size: 12px;
    color: var(--color-text-muted, #6b7280);
}

.flow-work-relations {
    padding: 0 var(--space-12, 12px) var(--space-12, 12px);
}

.flow-work-relations__section {
    margin-top: var(--space-12, 12px);
}

.flow-work-relations__section:first-child {
    margin-top: 0;
}

.flow-work-relations__heading {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted, #6b7280);
    text-transform: none;
}

.flow-work-relations__hint {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--color-text-muted, #6b7280);
}

.flow-topology-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.flow-topology-section__title {
    margin: 0;
}

.flow-topology-section__create {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 6px;
    background: var(--color-surface, #fff);
    color: var(--color-text-muted, #6b7280);
    cursor: not-allowed;
    opacity: 0.55;
}

.flow-topology-section__create:not(:disabled) {
    cursor: pointer;
    opacity: 1;
    color: var(--color-text, #111827);
}

.flow-topology-section__create:not(:disabled):hover {
    border-color: var(--color-primary, #2563eb);
    color: var(--color-primary, #2563eb);
}

.flow-topology-create__fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.flow-topology-create__field {
    min-width: 0;
}

.flow-topology-create__footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--color-border, #e5e7eb);
}

.flow-topology-create__parents {
    margin-top: 4px;
}

.flow-topology-create__parents-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.flow-topology-create__parent-row {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    background: var(--color-surface-muted, #f9fafb);
}

.flow-topology-create__role-hint {
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--color-text-muted, #6b7280);
}

.flow-topology-section__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    background: var(--color-surface-muted, #f9fafb);
}

.flow-topology-section__summary--unavailable {
    border-color: #f59e0b;
    background: #fffbeb;
}

.flow-topology-section__summary-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.flow-topology-section__badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #92400e;
    background: #fde68a;
}

.flow-topology-section__summary-text {
    font-size: 15px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--color-text, #111827);
    word-break: break-word;
}

.flow-topology-section__summary-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.flow-topology-section__hint {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--color-text-muted, #6b7280);
}

.flow-topology-section__editor {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 4px;
    margin-bottom: 0.5rem;
}

.flow-topology-section__editor-field {
    min-width: 0;
}

@media (max-width: 720px) {
    .flow-topology-create__fields,
    .flow-topology-section__editor {
        grid-template-columns: 1fr;
    }
}

.flow-work-relations__open-pins {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    max-width: 100%;
    margin: 0 0 8px;
    padding: 6px 10px;
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    border-radius: 6px;
    background: var(--color-grey-50, #f9fafb);
    font: inherit;
    font-size: 13px;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.flow-work-relations__open-pins:hover {
    background: var(--color-grey-100, #f3f4f6);
}

.flow-work-relations__open-pins-chevron {
    margin-left: 2px;
    color: var(--color-text-muted, #6b7280);
}

.flow-work-linked-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    background: var(--color-grey-50, #f9fafb);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
    appearance: none;
    max-width: 100%;
}

.flow-work-linked-chip:hover {
    background: var(--color-grey-100, #f3f4f6);
}

.flow-work-linked-chip--with-eye {
    padding-right: 8px;
}

.flow-work-linked-chip-type-icon {
    flex-shrink: 0;
    font-size: 0.95rem;
    line-height: 1;
    color: var(--color-text-muted, #6b7280);
}

.flow-work-linked-chip-label {
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-work-linked-chip-eye-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 0.9rem;
    color: var(--color-text-primary, #1a1a1a);
}

.flow-work-linked-chip:hover .flow-work-linked-chip-eye-hint {
    color: var(--color-primary, #005f9e);
}

.flow-work-linked-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 180px;
}

.flow-work-linked-menu-type-icon {
    flex-shrink: 0;
    font-size: 0.95rem;
    color: var(--color-text-muted, #6b7280);
}

.flow-work-linked-menu-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.flow-work-linked-menu-title {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-work-linked-menu-anchor {
    font-size: 11px;
    color: var(--color-text-muted, #6b7280);
}

.flow-work-linked-menu-eye {
    flex-shrink: 0;
    color: var(--color-text-primary, #1a1a1a);
    font-size: 0.95rem;
}

.image-inline-viewer {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    min-height: 0;
    background: #000;
}

.image-inline-viewer-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--space-8, 8px);
}

.image-inline-viewer-img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    image-rendering: auto;
    -ms-interpolation-mode: bicubic;
}

.image-inline-viewer-img--zoomed {
    max-width: none;
}

.image-inline-viewer-toolbar {
    justify-content: flex-start;
}

.image-inline-viewer-empty {
    color: #888;
    font-size: 14px;
    margin: auto;
}

.flow-question-context-panel {
    margin: 0.5rem 0 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 6px;
    background: var(--color-surface-muted, #f9fafb);
}

.flow-question-context-panel-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.flow-question-context-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.flow-question-context-sheet-host {
    margin: 0.5rem 0 1rem;
}

.flow-question-context-sheet-hint {
    margin: 0 0 0.5rem;
}

/* ── Local question ReviewItem context editor ─────────────────────────── */
.flow-ri-editor {
    display: flex;
    flex-direction: column;
    min-height: 12rem;
}

.flow-ri-editor-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 8rem;
    text-align: center;
    padding: 1rem;
}

.flow-ri-open-details-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: 1px solid var(--color-border, #e2e8f0);
    cursor: pointer;
    color: var(--color-text-muted, #64748b);
    border-radius: 4px;
    padding: 0.15rem 0.35rem;
    font-size: 0.8rem;
    line-height: 1;
}

.flow-ri-open-details-btn:hover:not(:disabled) {
    background: var(--color-surface-hover, #f1f5f9);
    color: var(--color-text, #0f172a);
}

.flow-ri-open-details-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ── Shared ReviewItem detail overlay (P4) ────────────────────────────── */
/* Scope the absolute overlay to the center work region (not the left drawer). */
.flow-work-page .center-main-region {
    position: relative;
}

.review-detail-overlay {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    justify-content: flex-end;
    background: rgba(15, 23, 42, 0.25);
}

.review-detail-overlay-pane {
    position: relative;
    width: var(--overlay-drawer-width, 32rem);
    min-width: min(320px, 100%);
    max-width: 100%;
    height: 100%;
    min-height: 0;
    flex-shrink: 0;
    background: var(--color-surface, #ffffff);
    box-shadow: -4px 0 16px rgba(15, 23, 42, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.review-detail-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: var(--color-surface, #ffffff);
}

.flow-work-col-right > .review-detail-panel {
    border-radius: inherit;
}

.review-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    flex: 0 0 auto;
}

.review-detail-header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
}

.review-detail-header-title {
    font-weight: 600;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.review-detail-unsaved {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-warning-text, #7a5a00);
    background: color-mix(in srgb, var(--color-warning, #ffbf47) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-warning, #ffbf47) 35%, transparent);
    border-radius: 3px;
    padding: 1px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.review-detail-header-actions {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
}

.review-detail-header-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted, #64748b);
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
    font-size: 1rem;
    line-height: 1;
}

.review-detail-header-btn:hover:not(:disabled) {
    background: var(--color-surface-hover, #f1f5f9);
    color: var(--color-text, #0f172a);
}

.review-detail-header-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.review-detail-header-btn--danger {
    color: #dc2626;
}

.review-detail-header-btn--danger:hover:not(:disabled) {
    background: #fef2f2;
    color: #b91c1c;
}

.review-detail-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted, #64748b);
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
}

.review-detail-close:hover {
    background: var(--color-surface-hover, #f1f5f9);
    color: var(--color-text, #0f172a);
}

.review-detail-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.6rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Cards must not flex-shrink: with .ws-card { overflow: hidden }, shrinking
   clips card content instead of growing the scrollable menu. */
.review-detail-body > .ws-card {
    flex: 0 0 auto;
}

.review-detail-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.review-detail-viewer-group {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.review-detail-viewer-group + .review-detail-viewer-group {
    margin-top: 0.5rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--color-border-subtle, #f1f5f9);
}

.review-detail-viewer-group-title {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.15rem 0.25rem 0.25rem;
}

.review-detail-meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.75rem;
}

.review-detail-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.review-detail-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.25rem;
    border-bottom: 1px solid var(--color-border-subtle, #f1f5f9);
}

.review-detail-row-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.review-detail-row-title {
    font-size: 0.85rem;
    word-break: break-word;
}

.review-detail-row-sub {
    font-size: 0.72rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    word-break: break-word;
}

.review-detail-row-btn {
    flex: 0 0 auto;
    background: none;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 4px;
    cursor: pointer;
    color: var(--color-text-muted, #64748b);
    padding: 0.2rem 0.4rem;
}

.review-detail-row-btn:hover {
    background: var(--color-surface-hover, #f1f5f9);
    color: var(--color-text, #0f172a);
}

.review-detail-row-btn--danger:hover {
    background: var(--color-danger-light, #fee2e2);
    color: var(--color-danger, #b91c1c);
    border-color: var(--color-danger, #b91c1c);
}

.review-detail-chip {
    font-size: 0.65rem;
    font-weight: 600;
    background: var(--color-primary-soft, #eff6ff);
    color: var(--color-primary, #2563eb);
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
}

.flow-markup-btn--editing,
.v3d-comment-toggle-btn.flow-markup-btn--editing,
.protocol-markup-btn.flow-markup-btn--editing,
.review-detail-row-btn.flow-markup-btn--editing {
    background: color-mix(in srgb, var(--color-warning, #FFBF47) 38%, transparent);
    color: var(--color-warning, #FFBF47);
    border-color: color-mix(in srgb, var(--color-warning, #FFBF47) 55%, transparent);
}

.v3d-comment-toggle-btn.flow-markup-btn--editing:hover,
.protocol-markup-btn.flow-markup-btn--editing:hover,
.review-detail-row-btn.flow-markup-btn--editing:hover {
    background: color-mix(in srgb, var(--color-warning, #FFBF47) 48%, transparent);
    color: var(--color-warning, #FFBF47);
}

.protocol-markup-btn.has-context {
    color: var(--color-primary, #2563eb);
}

button.protocol-markup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    line-height: 1;
}

button.protocol-markup-btn:hover {
    background: color-mix(in srgb, currentColor 12%, transparent);
}

button.protocol-markup-btn .bi {
    font-size: 1.15rem;
}

.mud-icon-button.protocol-markup-btn.flow-markup-btn--editing,
.mud-icon-button.protocol-markup-btn.flow-markup-btn--editing .mud-icon-button-label,
.mud-icon-button.protocol-markup-btn.flow-markup-btn--editing .bi,
button.protocol-markup-btn.flow-markup-btn--editing .bi {
    color: var(--color-warning, #FFBF47) !important;
}

.mud-icon-button.protocol-markup-btn.has-context,
.mud-icon-button.protocol-markup-btn.has-context .mud-icon-button-label,
.mud-icon-button.protocol-markup-btn.has-context .bi,
button.protocol-markup-btn.has-context .bi {
    color: var(--color-primary, #2563eb);
}

.flow-approval-files-actions .mud-icon-button.protocol-markup-btn.has-context,
.flow-approval-files-actions .mud-icon-button.protocol-markup-btn.has-context .bi {
    color: var(--color-primary, #2563eb) !important;
}

.flow-approval-files-actions .mud-icon-button.protocol-markup-btn.flow-markup-btn--editing,
.flow-approval-files-actions .mud-icon-button.protocol-markup-btn.flow-markup-btn--editing .bi {
    color: var(--color-warning, #FFBF47) !important;
}

.flow-markup-file-list {
    margin: 0.5rem 0 0.75rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--color-border-subtle, #e0e0e0);
    border-radius: 6px;
    background: var(--color-surface, #fff);
}

.flow-markup-file-table {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.8rem;
}

.flow-markup-file-table-head,
.flow-markup-file-table-row {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) 3.2rem 4.5rem minmax(0, 0.8fr) 4.75rem;
    gap: 0.3rem;
    align-items: center;
}

/* Same column tracks as markup table; File spans the Markups track so Modified/User/Actions line up. */
.flow-doc-photo-table.flow-markup-file-table .flow-markup-file-table-head,
.flow-doc-photo-table.flow-markup-file-table .flow-markup-file-table-row {
    grid-template-columns: minmax(0, 1.6fr) 3.2rem 4.5rem minmax(0, 0.8fr) 4.75rem;
}

.flow-doc-photo-table .flow-doc-photo-file {
    grid-column: 1 / 3;
    min-width: 0;
}

.flow-doc-photo-table .flow-markup-file-table-actions {
    grid-column: 5;
    justify-self: end;
    width: 100%;
}

.flow-markup-file-table-head {
    font-weight: 600;
    color: var(--color-text-muted, #64748b);
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--color-border-subtle, #e0e0e0);
}

.flow-markup-file-table-row {
    padding: 0.2rem 0.25rem;
    border-radius: 4px;
}

.flow-markup-file-table-row.is-active {
    background: var(--color-warning-light, #fff3cd);
}

.flow-markup-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-markup-file-stack {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.flow-markup-file-stack > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-markup-file-user {
    font-size: 0.75rem;
}

.flow-markup-file-table-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    justify-content: flex-end;
}

.flow-doc-actions-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.flow-doc-actions-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 0.5rem 0.75rem;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 28rem;
}

.flow-doc-actions-grid__cell {
    min-width: 0;
}

.flow-doc-actions-grid__cell > .mud-button-root {
    width: 100%;
    justify-content: center;
}

.flow-doc-actions-grid__pager .flow-step-entry-navigator {
    margin: 0;
    justify-content: flex-start;
}

.flow-doc-actions-grid__markups {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.review-detail-card-add-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted, #64748b);
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    font-size: 0.95rem;
    line-height: 1;
}

.review-detail-card-add-btn:hover:not(:disabled) {
    background: var(--color-surface-hover, #f1f5f9);
    color: var(--color-text, #0f172a);
}

.review-detail-card-add-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.review-detail-add-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border-subtle, #f1f5f9);
    background: var(--color-surface-muted, #f8fafc);
}

.review-detail-inline-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    justify-content: flex-end;
}

.review-detail-inline-btn {
    background: none;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 4px;
    cursor: pointer;
    color: var(--color-text-muted, #64748b);
    padding: 0.2rem 0.45rem;
    line-height: 1;
}

.review-detail-inline-btn--confirm {
    color: var(--color-primary, #2563eb);
    border-color: color-mix(in srgb, var(--color-primary, #2563eb) 35%, #e2e8f0);
}

.review-detail-inline-btn--cancel:hover,
.review-detail-inline-btn--confirm:hover:not(:disabled) {
    background: var(--color-surface-hover, #f1f5f9);
}

.review-detail-inline-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.review-detail-file-prompt {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.35rem;
    border: 1px dashed var(--color-border, #e2e8f0);
    border-radius: 4px;
    background: var(--color-surface-muted, #f8fafc);
    font-size: 0.8rem;
}

.review-detail-file-count {
    font-size: 0.75rem;
    color: var(--color-text-muted, #64748b);
}

.review-detail-row--clickable {
    cursor: pointer;
}

.review-detail-row--clickable:hover {
    background: var(--color-surface-hover, #f8fafc);
}

/* Inline flow definition / context picker (ReviewItem detail Flow refs card) */
.review-flow-picker {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.review-flow-picker__toolbar {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.review-flow-picker__search {
    flex: 1 1 auto;
    min-width: 0;
    height: 1.85rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 4px;
    font-size: 0.8rem;
    background: var(--color-surface, #fff);
    color: var(--color-text, #0f172a);
}

.review-flow-picker__scope {
    flex: 0 0 auto;
    max-width: 7.5rem;
    height: 1.85rem;
    padding: 0.15rem 0.35rem;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 4px;
    font-size: 0.75rem;
    background: var(--color-surface, #fff);
    color: var(--color-text, #0f172a);
}

.review-flow-picker__list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    max-height: calc(5 * 2.15rem);
    overflow-y: auto;
    border: 1px solid var(--color-border-subtle, #f1f5f9);
    border-radius: 4px;
    background: var(--color-surface, #fff);
}

.review-flow-picker__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 2.15rem;
    text-align: left;
    padding: 0.3rem 0.5rem;
    border: none;
    border-bottom: 1px solid var(--color-border-subtle, #f1f5f9);
    background: none;
    cursor: pointer;
    color: inherit;
}

.review-flow-picker__row:last-child {
    border-bottom: none;
}

.review-flow-picker__row:hover,
.review-flow-picker__row.is-selected {
    background: var(--color-surface-hover, #f1f5f9);
}

.review-flow-picker__row.is-selected {
    outline: 1px solid color-mix(in srgb, var(--color-primary, #2563eb) 35%, transparent);
    outline-offset: -1px;
}

.review-flow-picker__row-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.review-flow-picker__row-scope {
    flex: 0 0 auto;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-text-muted, #64748b);
    background: var(--color-surface-muted, #f8fafc);
    border: 1px solid var(--color-border-subtle, #e2e8f0);
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
}

.review-flow-picker__status,
.review-flow-picker__empty,
.review-flow-picker__error {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    padding: 0.35rem 0.15rem;
}

.review-flow-picker__error {
    color: #b91c1c;
}

.review-item-picker-backdrop {
    z-index: 60;
}

.review-item-picker-dialog {
    width: min(28rem, 92vw);
}

.review-item-picker-toolbar {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.review-item-picker-search {
    flex: 1 1 auto;
    min-width: 0;
    height: 1.85rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 4px;
    font-size: 0.8rem;
    background: var(--color-surface, #fff);
    color: var(--color-text, #0f172a);
}

.review-item-picker-scope {
    flex: 0 0 auto;
    max-width: 7.5rem;
    height: 1.85rem;
    padding: 0.15rem 0.35rem;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 4px;
    font-size: 0.75rem;
    background: var(--color-surface, #fff);
    color: var(--color-text, #0f172a);
}

.review-item-picker-status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    padding: 0.35rem 0;
}

.review-item-picker-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    /* ~3 card rows visible, then scroll */
    max-height: calc(3 * 3.15rem);
    overflow-y: auto;
}

.review-item-picker-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    padding: 0.45rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 4px;
    background: none;
    cursor: pointer;
}

.review-item-picker-row:hover,
.review-item-picker-row.is-selected {
    background: var(--color-surface-hover, #f1f5f9);
    border-color: var(--color-border-subtle, #e2e8f0);
}

.review-item-picker-radio {
    flex: 0 0 auto;
    width: 0.85rem;
    height: 0.85rem;
    margin-top: 0.2rem;
    border-radius: 50%;
    border: 2px solid var(--color-border, #cbd5e1);
    background: var(--color-surface, #fff);
}

.review-item-picker-radio.is-selected {
    border-color: var(--color-primary, #2563eb);
    background: var(--color-primary, #2563eb);
    box-shadow: inset 0 0 0 2px var(--color-surface, #fff);
}

.review-item-picker-row-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.review-item-picker-row-title {
    font-size: 0.85rem;
    font-weight: 500;
    word-break: break-word;
}

.review-item-picker-row-sub {
    font-size: 0.72rem;
}

/* ── File picker row (text field + pick icon on the same line) ─────────── */
.flow-folder-picker-row {
    display: flex;
    align-items: center;
    gap: var(--space-8, 8px);
}

/* Text field grows; the pick/swap icon stays pinned to the far right. */
.flow-folder-picker-row > .mud-input-control {
    flex: 1 1 auto;
    min-width: 0;
}

.flow-folder-picker-row > .mud-button-root {
    flex: 0 0 auto;
}

/* ── ContentBlock validation summary ───────────────────────────────────── */
.flow-work-validation {
    color: var(--mud-palette-error, #c62828);
}

.flow-work-validation-title {
    margin: 0 0 var(--space-4, 4px);
    font-weight: 700;
    font-size: 0.9375rem;
}

.flow-work-validation-list {
    margin: 0;
    padding-left: 1.25rem;
}

.flow-work-validation-list li {
    margin-bottom: 0.25rem;
}

/* ── Action bar (consistent gap between bottom-row buttons) ─────────────── */
.flow-work-action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8, 8px);
    margin-top: var(--space-12, 12px);
}

.flow-work-action-bar__complete {
    margin-left: auto;
}

.flow-step-entry-navigator {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8, 8px);
    margin-top: var(--space-12, 12px);
}
.flow-step-entry-navigator__label {
    font-size: 0.875rem;
}
.flow-step-entry-navigator__max {
    color: var(--mud-palette-text-secondary);
    margin-left: 0.35rem;
}

/* Required Files — catalog toolbar matches action-bar button height */
.flow-required-files-catalog-toolbar .flow-required-files-catalog-btn.mud-button-root {
    height: 36px;
    min-height: 36px;
    white-space: nowrap;
}

.flow-required-files-catalog-toolbar .flow-required-files-catalog-search .mud-input-control,
.flow-required-files-catalog-toolbar .flow-required-files-catalog-search .mud-input-slot {
    margin-top: 0;
}

.flow-required-files-catalog-toolbar .flow-required-files-catalog-search .mud-input > input {
    height: 36px;
    box-sizing: border-box;
}

/* ── IDS Checker runtime layout ─────────────────────────────────────────── */

.flow-ids-inputs-row {
    display: flex;
    align-items: flex-end;
    gap: var(--space-8, 8px);
    width: 100%;
}

.flow-ids-inputs-row > .flow-ids-input-ids,
.flow-ids-inputs-row > .flow-ids-input-ifc {
    flex: 1 1 0;
    min-width: 0;
}

.flow-ids-inputs-row > .flow-ids-input-pick {
    flex: 0 0 auto;
    margin-bottom: 2px;
}

.flow-ids-results {
    gap: var(--space-4, 4px);
}

.flow-ids-colorize-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: center;
    padding: 0;
    margin: 0;
}

.flow-ids-results .flow-ids-colorize-cb {
    margin: 0 !important;
}

.flow-ids-results .flow-ids-tabs {
    margin-top: 0;
}

.flow-ids-results .flow-ids-tabs .mud-tabs-toolbar {
    min-height: 0;
}

.flow-ids-results .flow-ids-tab-panel {
    padding: 4px 0 0 0;
}

/* Grow the results grid with reclaimed chrome so ~1080p needs no pane scroll
   when Run history stays collapsed. */
.flow-ids-results .flow-ids-grid-host {
    height: clamp(280px, calc(100vh - 430px), 620px);
    min-height: 240px;
    overflow: hidden;
    padding: 0;
}

.flow-ids-results .flow-ids-grid-host > .idsc-ag-grid-container {
    width: 100%;
    height: 100%;
}

.flow-ids-results .ids-checker-tab-count {
    margin-left: 6px;
}

.flow-ids-results .idsc-viewer3d-no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: var(--space-8, 8px);
    color: var(--color-text-secondary, #6b7280);
}

/* IDS Checker AG Grid — row outcome colors + selection mark
   Classes are applied by ids-checker-grid-interop.js via getRowClass. */
.flow-ids-results .ag-theme-alpine .ag-row.idsc-row-pass,
.flow-ids-results .ag-theme-alpine .ag-row.idsc-row-pass .ag-cell {
    background-color: #e8f5e9 !important; /* light green */
}

.flow-ids-results .ag-theme-alpine .ag-row.idsc-row-fail,
.flow-ids-results .ag-theme-alpine .ag-row.idsc-row-fail .ag-cell,
.flow-ids-results .ag-theme-alpine .ag-row.idsc-row-error,
.flow-ids-results .ag-theme-alpine .ag-row.idsc-row-error .ag-cell {
    background-color: #ffebee !important; /* light red */
}

.flow-ids-results .ag-theme-alpine .ag-row.idsc-row-nis,
.flow-ids-results .ag-theme-alpine .ag-row.idsc-row-nis .ag-cell {
    background-color: #fff8e1 !important; /* light yellow */
}

/* Marked / viewer-linked row — wins over outcome colors on every tab */
.flow-ids-results .ag-theme-alpine .ag-row.idsc-row-selected,
.flow-ids-results .ag-theme-alpine .ag-row.idsc-row-selected .ag-cell {
    background-color: rgba(47, 128, 237, 0.28) !important; /* blue mark */
}

.flow-ids-results .ag-theme-alpine .ag-row.idsc-row-pass:hover .ag-cell,
.flow-ids-results .ag-theme-alpine .ag-row.idsc-row-fail:hover .ag-cell,
.flow-ids-results .ag-theme-alpine .ag-row.idsc-row-error:hover .ag-cell,
.flow-ids-results .ag-theme-alpine .ag-row.idsc-row-nis:hover .ag-cell {
    filter: brightness(0.97);
}

.flow-ids-results .ag-theme-alpine .ag-row.idsc-row-selected:hover .ag-cell {
    background-color: rgba(47, 128, 237, 0.36) !important;
}

/* Rename Files — NC name generator dialog */
.flow-rename-name-generator__preview {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default, #e0e0e0);
}

.flow-rename-name-generator__preview-value {
    font-size: 1rem;
    font-weight: 600;
    word-break: break-word;
    min-height: 1.4em;
}

.flow-rename-name-generator__segments {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: calc(5 * 36px);
    overflow-y: auto;
    padding-right: 4px;
}

.flow-rename-name-generator__row {
    display: grid;
    grid-template-columns: minmax(88px, 140px) auto minmax(0, 1fr) minmax(48px, 88px) 28px;
    gap: 6px 8px;
    align-items: center;
}

.flow-rename-name-generator__title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary, #333);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-rename-name-generator__type {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary, #666);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.flow-rename-name-generator__fixed {
    grid-column: 2 / 5;
    font-size: 0.875rem;
}

.flow-rename-name-generator__chosen {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary, #666);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-rename-name-generator__input .mud-input-control,
.flow-rename-name-generator__field.mud-input-control {
    margin: 0;
}

.flow-rename-name-generator__input .mud-input-root,
.flow-rename-name-generator__input .mud-input-root-outlined,
.flow-rename-name-generator__input .mud-select .mud-input-root,
.flow-rename-name-generator__input .mud-select .mud-input-root-outlined {
    font-size: 0.875rem;
    min-height: 0 !important;
    height: 1.6em;
    overflow: hidden;
}

.flow-rename-name-generator__input .mud-input-outlined,
.flow-rename-name-generator__input .mud-input-slot,
.flow-rename-name-generator__input .mud-select-input {
    font-size: 0.875rem;
    line-height: 1.25;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
}

.flow-rename-name-generator__input .mud-input > input.mud-input-root,
.flow-rename-name-generator__input input.mud-input-slot,
.flow-rename-name-generator__input .mud-select-input {
    font-size: 0.875rem;
    line-height: 1.25;
    height: 1.6em;
    padding-top: 0;
    padding-bottom: 0;
}

.flow-rename-name-generator__input .mud-input-outlined-border {
    border-radius: 4px;
}

.flow-rename-name-generator__input .mud-input-adorned-end {
    padding-right: 2px;
}

.flow-rename-name-generator__input .mud-input-adorned-end .mud-icon-root,
.flow-rename-name-generator__input .mud-select .mud-icon-root {
    font-size: 1.1em;
}

.flow-rename-name-generator__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

/* NC failure help dialog */
.flow-nc-failure-help__file {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default, #e0e0e0);
}

.flow-nc-failure-help__file-value {
    font-size: 0.95rem;
    font-weight: 600;
    word-break: break-word;
}

.flow-nc-failure-help__segments {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: calc(5 * 110px);
    overflow-y: auto;
    padding-right: 4px;
}

.flow-nc-failure-help__card {
    border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    border-radius: 6px;
    padding: 10px 12px;
    background: var(--mud-palette-background-grey, #fafafa);
}

.flow-nc-failure-help__card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.flow-nc-failure-help__seg-no {
    font-weight: 600;
    font-size: 0.85rem;
}

.flow-nc-failure-help__type {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--mud-palette-text-secondary, #666);
}

.flow-nc-failure-help__actual,
.flow-nc-failure-help__allowed,
.flow-nc-failure-help__regex {
    margin-top: 6px;
}

.flow-nc-failure-help__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.flow-nc-failure-help__pattern {
    display: block;
    margin-top: 4px;
    padding: 4px 8px;
    font-size: 0.8rem;
    background: var(--mud-palette-background, #fff);
    border-radius: 4px;
    word-break: break-all;
}

/* Compact MudTextField / MudSelect inside Flow Work tables (Rename, file matching, …) */
.app-table .flow-table-compact-field.mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

.app-table .flow-table-compact-field .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

.app-table .flow-table-compact-field .mud-input-root,
.app-table .flow-table-compact-field .mud-input-root-outlined,
.app-table .flow-table-compact-field .mud-select .mud-input-root,
.app-table .flow-table-compact-field .mud-select .mud-input-root-outlined {
    font-size: inherit;
    min-height: 0 !important;
    height: 1.6em;
    overflow: hidden;
}

.app-table .flow-table-compact-field .mud-input-outlined,
.app-table .flow-table-compact-field .mud-input-slot,
.app-table .flow-table-compact-field .mud-select-input {
    font-size: inherit;
    line-height: 1.25;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
}

.app-table .flow-table-compact-field .mud-input > input.mud-input-root,
.app-table .flow-table-compact-field input.mud-input-slot,
.app-table .flow-table-compact-field .mud-select-input {
    font-size: inherit;
    line-height: 1.25;
    height: 1.6em;
    padding-top: 0;
    padding-bottom: 0;
}

.app-table .flow-table-compact-field .mud-input-outlined-border {
    border-radius: 4px;
}

.app-table .flow-table-compact-field .mud-input-adorned-end {
    padding-right: 2px;
}

.app-table .flow-table-compact-field .mud-input-adorned-end .mud-icon-root,
.app-table .flow-table-compact-field .mud-select .mud-icon-root {
    font-size: 1.1em;
}

.app-table .flow-table-compact-field .mud-select {
    width: 100%;
}

.flow-rename-files-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-12);
}

.flow-rename-files-table td,
.flow-file-delivery-table td {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* Naming Convention — validation result rows (upload NC table + inline rename/required) */
.flow-nc-results-table .flow-nc-result-row--pass td,
.flow-rename-files-table .flow-nc-result-row--pass td,
.flow-required-files-manual-table .flow-nc-result-row--pass td {
    background-color: #e8f5e9;
}

.flow-nc-results-table .flow-nc-result-row--fail td,
.flow-rename-files-table .flow-nc-result-row--fail td,
.flow-required-files-manual-table .flow-nc-result-row--fail td {
    background-color: #ffebee;
}

.flow-nc-results-table .flow-nc-result-row--duplicate td,
.flow-rename-files-table .flow-nc-result-row--duplicate td,
.flow-required-files-manual-table .flow-nc-result-row--duplicate td {
    background-color: #fff3e0;
}

.flow-nc-segment-preview {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--mud-palette-text-secondary, #666);
    margin-top: 2px;
    line-height: 1.3;
    word-break: break-all;
}

.flow-nc-segment-preview__fail {
    color: #c62828;
    font-style: italic;
}

/* Upload step — WorkspaceCollapsibleCard wrappers around file / NC / results tables */
.flow-upload-section-card .app-table {
    margin-bottom: 0;
}

.flow-nc-rules-table {
    font-size: 0.85rem;
}

.flow-nc-rules-table__row--voluntary .flow-nc-rules-table__title {
    font-style: italic;
}

.flow-nc-rules-table__values {
    word-break: break-word;
}

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

.flow-nc-rules-help {
    position: relative;
    display: inline-flex;
}

.flow-nc-rules-labels-paper {
    padding: 6px 0;
}

.flow-nc-rules-labels {
    min-width: 12rem;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.flow-nc-rules-labels th,
.flow-nc-rules-labels td {
    padding: 4px 10px;
    text-align: left;
    white-space: nowrap;
}

.flow-nc-rules-labels th {
    font-weight: 600;
    border-bottom: 1px solid var(--mud-palette-lines-default, #e0e0e0);
}

/* Upload actual files + NC results: pin delete actions to the right edge */
.flow-upload-actual-files__icon,
.flow-upload-actual-files__meta,
.flow-upload-actual-files__actions,
.flow-nc-results-table__actions,
.flow-file-delivery-table__actions {
    width: 1%;
    white-space: nowrap;
}

.flow-upload-actual-files__name,
.flow-file-delivery-table__folder,
.flow-file-delivery-table__required,
.flow-file-delivery-table__uploaded {
    word-break: break-word;
}

.flow-file-delivery-table__folder {
    width: 20%;
}

.flow-file-delivery-table__required,
.flow-file-delivery-table__uploaded {
    width: 30%;
}

.flow-upload-actual-files__actions,
.flow-nc-results-table__actions,
.flow-file-delivery-table__actions {
    text-align: right;
}

.flow-file-delivery-table__action-btns {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-end;
}

.flow-file-delivery-table {
    font-size: 0.85rem;
}

.flow-file-delivery-table .flow-file-delivery-row--matched td {
    background-color: #e8f5e9;
}

.flow-file-delivery-table .flow-file-delivery-row--missing td {
    background-color: #ffebee;
}

.flow-file-delivery-table .flow-file-delivery-row--extra td {
    background-color: #fff8e1;
}

.flow-ids-results .ids-checker-entity-type,
.flow-ids-results .ids-checker-check-type {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    background: var(--color-grey-100, #f3f4f6);
    color: var(--color-text-secondary, #374151);
}

.flow-ids-results .idsc-vlines-on .ag-cell {
    border-right: 1px solid var(--color-border-subtle, #e5e7eb);
}

.flow-pdf-export-card {
    margin-top: var(--space-12, 12px);
}

.flow-pdf-export-body {
    padding: var(--space-8, 8px) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 4px);
}

.flow-pdf-export-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8, 8px);
}

/* ── Global Review Items drawer (UI Context 1) ─────────────────────────── */
.flow-ri-drawer {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.flow-ri-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px 0;
    flex-shrink: 0;
}

.flow-ri-toolbar-actions {
    padding: 6px 10px 8px;
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
}

.flow-ri-select {
    flex: 1;
}

.flow-ri-highlight-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    padding: 3px 8px;
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    border-radius: 4px;
    background: var(--color-bg-default, #ffffff);
    color: var(--color-text-muted, #6b7280);
    cursor: pointer;
}

.flow-ri-highlight-btn.is-active {
    background: var(--color-primary, #4f46e5);
    border-color: var(--color-primary, #4f46e5);
    color: #ffffff;
}

.flow-ri-limit {
    width: 48px;
    font-size: 12px;
    padding: 2px 4px;
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    border-radius: 4px;
}

.flow-ri-spacer {
    flex: 1;
}

.flow-ri-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    border-radius: 4px;
    background: var(--color-bg-default, #ffffff);
    color: var(--color-primary, #4f46e5);
    cursor: pointer;
}

.flow-ri-add-btn:hover {
    background: var(--color-surface-hover, #f1f5f9);
}

.flow-ri-drawer-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.flow-ri-room-tree {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.flow-ri-room-tree-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;
    padding-left: calc(8px + (var(--flow-ri-tree-depth, 0) * 14px));
    padding-right: 6px;
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
}

.flow-ri-room-tree-row--flow.is-selected {
    background: var(--color-primary-soft, #eef2ff);
}

.flow-ri-room-tree-row-main {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    padding: 6px 4px;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

.flow-ri-room-tree-folder-icon {
    flex-shrink: 0;
    color: var(--color-text-muted, #6b7280);
}

.flow-ri-room-tree-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.flow-ri-room-tree-count {
    flex-shrink: 0;
    font-size: 11px;
}

.flow-ri-drawer-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
    width: 100%;
    padding: 10px 8px 10px 12px;
    border: none;
    border-left: 0.25rem solid transparent;
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
    background: transparent;
    transition: background-color 0.1s ease, border-left-color 0.1s ease;
}

.flow-ri-drawer-row.is-flow-expanded {
    border-bottom-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
    .flow-ri-drawer-row:hover:not(.is-selected) {
        background: var(--color-grey-50, #fafafa);
    }
}

.flow-ri-drawer-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-ri-drawer-row-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
    text-align: left;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    color: inherit;
}

.flow-ri-drawer-row-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.flow-ri-drawer-row-title {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.flow-ri-drawer-row-chips {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-shrink: 0;
    max-width: 55%;
}

.flow-ri-media-chip {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    background: var(--color-bg-subtle, #f8fafc);
    color: var(--color-text-muted, #6b7280);
    text-transform: uppercase;
    line-height: 1.5;
    white-space: nowrap;
}

.flow-ri-drawer-row-subline,
.flow-ri-drawer-row-place {
    width: 100%;
    font-size: 11px;
    color: var(--color-text-muted, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.flow-ri-gear-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--color-text-muted, #6b7280);
    cursor: pointer;
}

.flow-ri-row-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.flow-ri-gear-btn:hover,
.flow-ri-gear-btn.is-active {
    background: var(--color-surface-hover, #f1f5f9);
    color: var(--color-text-primary, #111827);
}

.flow-ri-flow-expand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 8px 8px 1.5rem;
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
    background: var(--color-grey-50, #fafafa);
}

.flow-ri-flow-expand-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--color-text-primary, #111827);
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
}

.flow-ri-flow-expand-row i {
    flex-shrink: 0;
    color: var(--color-text-muted, #6b7280);
}

.flow-ri-flow-expand-row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-ri-flow-expand-row:hover {
    background: var(--color-surface-hover, #f1f5f9);
}

.review-detail-pin-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.review-status-chip {
    display: inline-block;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1.6;
    text-transform: lowercase;
}

.review-status-chip--open {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fca5a5;
}

.review-status-chip--inprogress {
    background: #fff3e0;
    color: #e65100;
    border-color: #ffcc80;
}

.review-status-chip--resolved {
    background: #e8f5e9;
    color: #2e7d32;
    border-color: #a5d6a7;
}

.review-status-chip--closed {
    background: #f3f4f6;
    color: #4b5563;
    border-color: #d1d5db;
}

/* ── Drawer loading / empty / error states (replaces inline styles) ─────── */
.flow-ri-status,
.flow-drawer-status {
    padding: 16px;
}

.flow-ri-empty,
.flow-drawer-empty {
    padding: 24px 12px;
}

.flow-drawer-error {
    padding: 8px 12px;
}

/* ── Kanban card active step row ─────────────────────────────────────────── */
.workflow-card__step {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: 11px;
    color: var(--color-text-secondary);
    min-width: 0;
}

.workflow-card__step i {
    flex-shrink: 0;
    color: var(--color-brand-primary, #005f9e);
}

.workflow-card__step span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Flow 3D Viewer (narrow TC sidebar) ──────────────────────────────────── */
.flow-v3d-layout {
    height: 100%;
    min-height: 0;
}

.flow-v3d-overview,
.flow-v3d-create,
.flow-v3d-work {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.flow-v3d-create-body,
.flow-v3d-work-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    position: relative;
}

.flow-v3d-files-strip {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px 10px;
    border-bottom: 1px solid var(--tc-v3d-toolbar-border, #e0e0e0);
    background: var(--color-surface, #fff);
}

.flow-v3d-files-strip-add {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--tc-v3d-toolbar-border, #d0d0d0);
    border-radius: 4px;
    background: var(--color-surface, #fff);
    color: var(--mud-palette-text-primary, #212121);
    font-size: 0.8125rem;
    line-height: 1.2;
    padding: 4px 10px;
    cursor: pointer;
}

.flow-v3d-files-strip-add:hover:not(:disabled) {
    background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04));
}

.flow-v3d-files-strip-add:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.flow-v3d-files-strip-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: min(40vh, 280px);
    overflow: auto;
}

.flow-v3d-files-strip-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 4px 2px;
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--mud-palette-text-primary, #212121);
}

.flow-v3d-files-strip-item .bi {
    flex: 0 0 auto;
    opacity: 0.7;
}

.flow-v3d-files-strip-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-v3d-files-strip-empty {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary, #757575);
    padding: 2px 0;
}

.flow-v3d-relations {
    padding: 0 0 var(--space-12, 12px);
}

.flow-v3d-relations .flow-work-relations__section:first-child {
    margin-top: 0;
}

.flow-v3d-relations__link-selected {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px 10px;
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    border-radius: 6px;
    background: var(--color-grey-50, #f9fafb);
    font: inherit;
    font-size: 13px;
    color: inherit;
    cursor: pointer;
}

.flow-v3d-relations__link-selected:hover:not(:disabled) {
    background: var(--color-grey-100, #f3f4f6);
}

.flow-v3d-relations__link-selected:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.flow-v3d-relations__object-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.flow-v3d-relations__object-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.flow-v3d-relations__object-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    border-radius: 6px;
    background: var(--color-grey-50, #f9fafb);
    font: inherit;
    font-size: 12px;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.flow-v3d-relations__object-chip:hover:not(:disabled) {
    background: var(--color-grey-100, #f3f4f6);
}

.flow-v3d-relations__object-chip:disabled {
    opacity: 0.6;
    cursor: wait;
}

.flow-v3d-relations__object-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-v3d-relations__object-hint {
    margin-left: auto;
    color: var(--color-text-muted, #6b7280);
}

.flow-v3d-relations__object-unlink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-muted, #6b7280);
    cursor: pointer;
}

.flow-v3d-relations__object-unlink:hover:not(:disabled) {
    background: rgba(211, 47, 47, 0.08);
    color: var(--color-error, #d32f2f);
}

.flow-v3d-relations__object-unlink:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.flow-v3d-overview .v3d-overview-flow-type {
    font-size: 0.7rem;
    padding: 1px 6px;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-v3d-overview .v3d-overview-bcf-badge {
    border: 0;
    cursor: pointer;
    font: inherit;
    line-height: 1.2;
    padding: 1px 6px;
}

.flow-v3d-overview .v3d-overview-bcf-badge:hover {
    filter: brightness(0.95);
}

.flow-v3d-work-overlay {
    position: absolute;
    inset: 0;
    z-index: 40;
    background: var(--color-surface, #ffffff);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.flow-v3d-work-overlay .flow-create-wizard,
.flow-v3d-work-overlay .flow-diagram-host,
.flow-v3d-work-overlay .review-detail-panel {
    height: 100%;
    min-height: 0;
    border: none;
    box-shadow: none;
}

.flow-v3d-work-pane .flow-work-right-body {
    padding: 8px 10px 16px;
}

.flow-v3d-create .flow-create-wizard {
    border: none;
    box-shadow: none;
    height: 100%;
}

.flow-v3d-create .flow-drawer-definitions-panel {
    padding: 8px 10px 16px;
}

/* ── PDF Compare result / history tables ─────────────────────────────── */

.pdf-compare-table-scroll {
    overflow-x: auto;
    max-width: 100%;
}

.pdf-compare-table-scroll .app-table {
    margin-bottom: 0;
}

.pdf-compare-actions-col {
    width: 1%;
    white-space: nowrap;
    text-align: right !important;
}

.pdf-compare-actions-col .mud-icon-button {
    margin-left: 2px;
}

.pdf-compare-open-btn.mud-icon-button,
.pdf-compare-actions-col .mud-icon-button.pdf-compare-open-btn {
    color: var(--color-text-secondary, #6b7280);
}

.pdf-compare-open-btn--has-markup.mud-icon-button,
.pdf-compare-actions-col .mud-icon-button.pdf-compare-open-btn--has-markup {
    color: var(--color-primary, #1976d2);
}

.pdf-compare-open-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin-left: 2px;
    border: none;
    border-radius: var(--radius-small, 4px);
    background: transparent;
    color: var(--color-text-secondary, #6b7280);
    cursor: pointer;
    vertical-align: middle;
}

.pdf-compare-open-btn:hover:not(:disabled) {
    background: var(--color-grey-100, #f3f4f6);
    color: var(--color-text-primary, #111827);
}

.pdf-compare-open-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pdf-compare-open-btn--has-markup {
    color: var(--color-primary, #1976d2);
}

.pdf-compare-open-btn--has-markup:hover:not(:disabled) {
    color: var(--color-primary, #1976d2);
    background: rgba(25, 118, 210, 0.08);
}

.pdf-compare-open-btn i {
    font-size: 1rem;
    line-height: 1;
}

/* ── IFC Compare file-row eye buttons ───────────────────────────────────── */

.flow-ifc-compare-file-row {
    display: flex;
    align-items: flex-start;
    gap: 0.15rem;
}

.flow-ifc-compare-file-row > .mud-input-control,
.flow-ifc-compare-file-row > .mud-select {
    flex: 1;
    min-width: 0;
}

.flow-ifc-compare-eye {
    margin-top: 0.35rem;
    flex-shrink: 0;
}

.flow-ifc-compare-results {
    position: relative;
    z-index: 1;
    pointer-events: auto;
}

.flow-ifc-compare-results .ifctools-compare-summary .mud-button {
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    padding: 0.45rem 0.3rem;
    text-transform: none;
    white-space: normal;
    pointer-events: auto;
}

.flow-ifc-compare-results .ifctools-compare-summary .mud-button-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.flow-ifc-compare-results .ifctools-compare-stat {
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: auto;
}

.flow-ifc-compare-tabs .mud-tabs-toolbar {
    min-height: 0;
    pointer-events: auto;
}

.flow-ifc-compare-tab-panel {
    padding: 4px 0 0 0;
}

.flow-ifc-compare-tabs .ids-checker-tab-count {
    margin-left: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 10px;
    background: var(--color-primary-light, #e8f0fe);
    color: var(--color-primary, #005f9e);
}

.flow-ifc-compare-table tbody tr {
    cursor: pointer;
}

.flow-work-compare-viewers {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
    gap: 0;
}

.flow-work-compare-viewer-pane {
    flex: 1 1 50%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.flow-work-compare-viewer-pane .flow-work-viewer-panel {
    flex: 1;
    min-height: 0;
    height: 100%;
}

.flow-work-child-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #eef2ff;
    border-bottom: 1px solid #e0e7ff;
    color: #3730a3;
    font-size: 13px;
    flex-shrink: 0;
}

.flow-work-child-banner__link {
    border: 0;
    background: none;
    padding: 0;
    color: #3730a3;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.flow-coordinator {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.flow-coordinator__hint,
.flow-coordinator__empty {
    margin: 0;
    color: var(--color-text-secondary, #4b5563);
    font-size: 13px;
}

.flow-coordinator__lanes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.flow-coordinator__lane {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    padding: 12px;
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    border-radius: 8px;
    background: #fff;
}

.flow-coordinator__lane-main,
.flow-coordinator__lane-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.flow-coordinator__lane-title {
    font-weight: 600;
}

.flow-coordinator__lane-meta {
    grid-column: 1 / -1;
    color: var(--color-text-secondary, #4b5563);
    font-size: 12px;
}

.flow-coordinator__open {
    align-self: start;
    border: 1px solid #c7d2fe;
    background: #eef2ff;
    color: #3730a3;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
}

.flow-coordinator__lane-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: flex-end;
    align-self: start;
    gap: 6px;
}

.flow-coordinator__counts {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.flow-coordinator__count {
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
}

.flow-coordinator__count--yes {
    background: #e8f5e9;
    color: #1b5e20;
}

.flow-coordinator__count--partial {
    background: #fff8e1;
    color: #8d6e00;
}

.flow-coordinator__count--no {
    background: #ffebee;
    color: #b71c1c;
}

.flow-coordinator__expand {
    align-self: start;
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    background: #fff;
    color: var(--color-text-secondary, #4b5563);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
}

.flow-coordinator__answers {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.flow-coordinator__answer-group h5 {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
}

.flow-coordinator__answer-group ul {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 12px;
}

.flow-coordinator__answer-step {
    margin-left: 6px;
    color: var(--color-text-secondary, #4b5563);
}

.flow-coordinator__answer-group--yes h5 { color: #1b5e20; }
.flow-coordinator__answer-group--partial h5 { color: #8d6e00; }
.flow-coordinator__answer-group--no h5 { color: #b71c1c; }

.flow-coordinator__answers-empty {
    margin: 0;
    font-size: 12px;
    color: var(--color-text-secondary, #4b5563);
}

.flow-coordinator__join {
    border: 1px solid #bbf7d0;
    background: #dcfce7;
    color: #166534;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.flow-coordinator__admin {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.flow-spawn-progress-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(2px);
}

.flow-spawn-progress {
    width: min(100%, 420px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.flow-spawn-progress__header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.flow-spawn-progress__header > i {
    font-size: 1.5rem;
    color: #6366f1;
    line-height: 1.2;
}

.flow-spawn-progress__title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text-primary, #111827);
}

.flow-spawn-progress__subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--color-text-secondary, #4b5563);
}

.flow-spawn-progress__bar {
    border-radius: 999px;
}

.flow-spawn-progress__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.flow-spawn-progress__step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-secondary, #6b7280);
}

.flow-spawn-progress__step--active {
    color: var(--color-text-primary, #111827);
    font-weight: 600;
}

.flow-spawn-progress__step--done {
    color: #059669;
}

.flow-spawn-progress__step i {
    font-size: 1rem;
}

.flow-work-ag-title {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.flow-work-ag-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-work-ag-topology {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-work-ag-topology--unavailable {
    color: var(--color-text-muted, #6b7280);
    font-style: italic;
}

.flow-work-ag-topology-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    min-width: 0;
}

.flow-work-ag-topology-chip {
    display: inline-block;
    max-width: 100%;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--color-grey-100, #f3f4f6);
    color: var(--color-text-secondary, #374151);
    font-size: 12px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-work-ag-tree-toggle {
    width: 22px;
    height: 22px;
    border: 0;
    background: transparent;
    color: #4b5563;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.flow-work-ag-tree-spacer {
    width: 22px;
    flex-shrink: 0;
}

/* ── Flow PDF batch launch / preview ──────────────────────────────────── */

.flow-work-toolbar__export,
.flow-work-toolbar__selection-count {
    white-space: nowrap;
}

.flow-work-toolbar__selection-count {
    color: var(--color-text-secondary, #4b5563);
    font-size: 0.875rem;
    font-weight: 600;
}

.flow-pdf-batch-dialog__scope,
.flow-pdf-batch-dialog__preview-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    margin-bottom: var(--space-12);
}

.flow-pdf-batch-dialog__scope span,
.flow-pdf-batch-dialog__preview-summary span {
    color: var(--color-text-secondary, #4b5563);
    font-size: 0.875rem;
}

.flow-pdf-batch-dialog__folder {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
    margin-top: var(--space-12);
}

.flow-pdf-batch-dialog__folder .mud-select {
    flex: 1;
    min-width: 0;
}

.flow-pdf-batch-dialog__preview-summary {
    margin-top: var(--space-16);
}

.flow-pdf-batch-dialog__preview-list {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    border-radius: var(--radius-medium, 6px);
}

.flow-pdf-batch-dialog__preview-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-8) var(--space-12);
    border-bottom: 1px solid var(--color-border-subtle, #e5e7eb);
}

.flow-pdf-batch-dialog__preview-row:last-child {
    border-bottom: 0;
}

.flow-pdf-batch-dialog__preview-row small {
    color: var(--color-text-muted, #6b7280);
    overflow-wrap: anywhere;
}