/* ============================================================================
   WORKFLOW MODULE STYLES
   Module.Workflow specific styling
   Location: App.Web/wwwroot/css/workflow.css
   ============================================================================ */

/* Workflow Layout Shell — mirrors .checklist-layout pattern.
   Establishes the 100vh flex column that lets every descendant use flex:1
   to fill remaining space without relying on calc(100vh - Npx) hacks. */
.workflow-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* Workflow Content — fills the space below the TcTabs tab bar.
   overflow: hidden lets the child .workflow-board control its own scroll. */
.workflow-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Workflow Board Layout */
.workflow-board {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: var(--space-12);
    padding: var(--space-12) var(--space-16);
}

/* Toolbar — compact left-aligned action bar; no card chrome.
   Buttons and inline selects sit flush with the board padding;
   the board gap (var(--space-16)) provides breathing room above and below. */
.workflow-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex-wrap: wrap;
}

/* Inline filter selects in the toolbar must not stretch to full width */
.workflow-toolbar select.app-input {
    width: auto;
    min-width: 140px;
    height: 30px;
    padding: 0 var(--space-8);
    font-size: 13px;
}

/* Filter Panel */
.filter-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-12);
    padding: var(--space-16);
    background: var(--color-grey-50);
    border-radius: var(--radius-medium);
    border: 1px solid var(--color-border-subtle);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.filter-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.filter-group .app-input {
    min-width: 120px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font-size: 13px;
    font-weight: normal;
    cursor: pointer;
    margin-top: 18px;
}

.checkbox-label input[type="checkbox"] {
    cursor: pointer;
}

.filter-actions {
    display: flex;
    align-items: flex-end;
}

/* Upper panel — wraps the kanban phase columns.
   flex: 1 1 0 gives it exactly half the available height in the board, split
   50/50 with .workflow-lower-panel (both have flex: 1 1 0, flex-basis 0).
   overflow: hidden keeps the phase columns from leaking past the panel.
   display: flex; flex-direction: column lets .phase-columns fill via flex: 1. */
.workflow-upper-panel {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Lower panel — fills the other half of the board below the kanban columns. */
.workflow-lower-panel {
    flex: 1 1 0;
    min-height: 0;
    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);
    overflow: auto;
    display: flex;
    flex-direction: column;
}

/* Phase Columns — fills the upper panel; columns overflow horizontally on
   narrow viewports, vertically each phase column's task list scrolls. */
.phase-columns {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    gap: var(--space-12);
    overflow-x: auto;
}

/* ── Short-viewport fallback (U01) ──────────────────────────────────────────
   When the viewport is < 800 px tall (e.g. laptop landscape / tablet), the
   fixed 100vh shell would make both panels too small to be usable.  Instead,
   let the page itself scroll and give both panels a comfortable minimum height
   so content is never crushed. */
@media (max-height: 800px) {
    .workflow-layout {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .workflow-content {
        overflow: visible;
    }

    .workflow-board {
        min-height: auto;
        overflow: visible;
    }

    .workflow-upper-panel,
    .workflow-lower-panel {
        flex: 0 0 auto;
        min-height: 300px;
        overflow: visible;
    }

    .workflow-upper-panel {
        overflow: hidden; /* keep phase-columns horizontal scroll working */
    }

    .workflow-lower-panel {
        overflow: auto;
    }

    .phase-columns {
        flex: 0 0 auto;
        min-height: 260px;
    }
}

.phase-column {
    flex: 1;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-sm);
    padding: var(--space-12);
    transition: opacity 0.2s;
}

.phase-column--dim {
    opacity: 0.4;
    pointer-events: none;
}

.phase-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-8) var(--space-12);
    margin-bottom: var(--space-12);
    border-bottom: 2px solid var(--color-brand-primary);
}

.phase-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.phase-count {
    background: var(--color-brand-primary);
    color: var(--color-white);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
}

.phase-tasks {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-height: 100px;
}

/* Task-priority badges — shape from .status-badge group (components.css); colours from status-badge--* groups there */
.task-priority { align-self: flex-start; }

/* Drawer Styles */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
}

.drawer {
    background: var(--color-white);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    max-width: 600px;
    width: 100%;
}

.drawer-right {
    margin-left: auto;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-20);
    border-bottom: 1px solid var(--color-border-subtle);
}

.drawer-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.btn-close {
    background: transparent;
    border: none;
    font-size: 24px;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-small);
}

.btn-close:hover {
    background: var(--color-grey-100);
    color: var(--color-text-primary);
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-20);
}

.drawer-actions {
    display: flex;
    gap: var(--space-12);
    margin-top: var(--space-20);
    padding-top: var(--space-16);
    border-top: 1px solid var(--color-border-subtle);
}

/* Controls Table */
.controls-table {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-medium);
    overflow: hidden;
}

.controls-table-header,
.controls-table-row {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    gap: var(--space-8);
    padding: var(--space-12);
    align-items: center;
}

.controls-table-header {
    /* base styles from .app-table-grid-header */
}

.controls-table-row {
    border-top: 1px solid var(--color-border-subtle);
}

.controls-table-footer {
    padding: var(--space-12);
    border-top: 1px solid var(--color-border-subtle);
    background: var(--color-grey-50);
}

/* Save Status */
.save-status {
    margin-top: var(--space-16);
    padding-top: var(--space-16);
    border-top: 1px solid var(--color-border-subtle);
    font-size: 12px;
    text-align: center;
}

.saving {
    color: var(--color-text-muted);
}

.saved {
    color: var(--color-success);
}

/* Section Title */
.section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: var(--space-20) 0 var(--space-12) 0;
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--color-border-subtle);
}


.alert-danger {
    background: var(--color-error-light);
    color: var(--color-error);
    border: 1px solid var(--color-error);
}

/* Loading */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--color-text-muted);
    font-size: 14px;
}

/* ── WorkflowDefinitionEditor — 3-column layout (WU-12) ─────────────────── */

/* Definitions panel — fills the lower panel, hosts table + editor */
.workflow-definitions-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* U08: when editor open, split lower panel 30/70 (table on top, editor below). */
.workflow-definitions-panel--split .workflow-definitions-table-section {
    flex: 0 0 30%;
    min-height: 0;
    overflow: auto;
}

.workflow-definitions-panel--split .workflow-definitions-editor-section {
    flex: 1 1 70%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-top: 1px solid var(--color-border-subtle);
    padding-top: var(--space-12);
    margin-top: var(--space-12);
}

.workflow-definitions-table-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.workflow-definitions-editor-section {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.workflow-definitions-search {
    max-width: 240px;
    padding: 4px 8px;
    font-size: 13px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-small);
}

/* ── Library page workspace layout ─────────────────────────────────────── */

/* Library workspace — fills the board below the toolbar.
   Acts as the card shell; shows EITHER the table section OR the editor section. */
.library-workspace {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    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);
}

/* Table section — fills full workspace height; internal scroll when rows overflow */
.library-table-section {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Editor section — REPLACES the table and fills the full workspace height.
   Internal scroll keeps the viewport stable when the editor grows tall. */
.library-editor-section {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

/* Short-viewport fallback for library workspace */
@media (max-height: 800px) {
    .library-workspace {
        flex: 0 0 auto;
        min-height: 400px;
        overflow: auto;
    }

    .library-table-section,
    .library-editor-section {
        flex: 0 0 auto;
        min-height: 360px;
        overflow: visible;
    }
}

.workflow-definition-editor {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--space-12);
    border-bottom: 1px solid var(--color-border-subtle);
    margin-bottom: var(--space-16);
}

/* U02: make the WorkflowDefinitionEditor header sticky so it remains visible
   as the user scrolls within any of the three editor columns. */
.workflow-definition-editor .editor-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-white);
    padding-top: var(--space-4);
    margin-top: calc(-1 * var(--space-4)); /* compensate so content doesn't shift */
}

.editor-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.editor-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.editor-3col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-16);
    flex: 1;
    min-height: 0;
    overflow: hidden; /* U02: constrain grid to flex-allocated height so columns scroll */
}

.editor-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-height: 0;
    overflow-y: auto;
}

.editor-col-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-8) 0;
    padding-bottom: var(--space-8);
    border-bottom: 2px solid var(--color-brand-primary);
}

/* Step cards — inactive (header only, body hidden) */
.editor-step-card {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-medium);
    background: var(--color-white);
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Active state — enabled step card */
.editor-step-card.step-card-active {
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 2px rgba(0, 95, 158, 0.08);
}

.editor-step-card-header {
    padding: var(--space-12) var(--space-16);
    background: var(--color-grey-50);
    border-bottom: 1px solid var(--color-border-subtle);
    display: flex;
    align-items: center;
}

.editor-step-card.step-card-active .editor-step-card-header {
    background: rgba(0, 95, 158, 0.06);
}

.editor-step-card-body {
    padding: var(--space-16);
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

/* Non-checkbox card label (e.g. QA docs section header) */
.editor-card-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* CopyWorkflowModal styles (WU-12) */
.copy-workflow-modal {
    min-width: 500px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
}

.copy-modal-table-wrapper {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-medium);
}

.copy-modal-row-selected {
    background: rgba(0, 95, 158, 0.08) !important;
    outline: 2px solid var(--color-brand-primary);
    outline-offset: -2px;
}

/* Task Editor Panel — layout shell (component deleted in S26; rules retained
   because .editor-body / .editor-footer / .form-row are shared across modules) */
.task-editor-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* NOTE (U02): the duplicate .editor-header and .editor-header h3 blocks that
   appeared here were removed.  They were copied in from TaskEditorPanel (deleted
   S26) and silently competed with the .editor-header definition above.
   WorkflowDefinitionEditor uses .editor-header h4 (defined above).
   IdsTools editors use .editor-header without an inner h3/h4 heading rule. */

.editor-body {
    flex: 1;
    overflow-y: auto;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-16);
    margin-bottom: var(--space-16);
}

.form-row .form-group:only-child {
    grid-column: 1 / -1;
}

.editor-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-12);
    padding-top: var(--space-16);
    border-top: 1px solid var(--color-border-subtle);
    margin-top: var(--space-16);
}

/* ── User-search dropdown (S19) ─────────────────────────────────────────── */

.user-search-wrapper {
    position: relative;
}

.search-results {
    position: absolute;
    z-index: 200;
    left: 0;
    right: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-md);
    max-height: 200px;
    overflow-y: auto;
}

.search-result-item {
    padding: var(--space-8) var(--space-12);
    cursor: pointer;
    font-size: 13px;
}

.search-result-item:hover {
    background: var(--color-grey-50);
}

/* ── QA NewUpload lane CTA card (S19) ──────────────────────────────────── */

.qa-card-upload-cta {
    margin-top: var(--space-8);
}

/* Back-to-QA bar shown above ProcessUploadPanel when in QA override mode */
.qa-upload-back-bar {
    padding: var(--space-8) var(--space-12);
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-grey-50);
}

/* ── ChecklistReviewDrawer question parity (S20) ────────────────────────── */

.review-checklist-comment {
    margin-bottom: var(--space-12);
    padding: var(--space-8) var(--space-12);
    background: var(--color-grey-50);
    border-left: 3px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}

.review-sections {
    margin-top: var(--space-16);
}

.review-section-header {
    margin-bottom: var(--space-8);
}

.review-section {
    margin-bottom: var(--space-8);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
}

.review-section-title {
    padding: var(--space-8) var(--space-12);
    font-weight: 600;
    cursor: pointer;
    background: var(--color-grey-50);
    user-select: none;
    list-style: none;
}

.review-section-title::marker,
.review-section-title::-webkit-details-marker { display: none; }

.review-questions {
    padding: var(--space-4) 0;
}

.review-question {
    padding: var(--space-8) var(--space-12);
    border-bottom: 1px solid var(--color-border-subtle);
    font-size: var(--font-size-sm);
}

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

.review-question.question-review-approved {
    border-left: 3px solid var(--color-success);
}

.review-question.question-review-rejected {
    border-left: 3px solid var(--color-danger);
}

.review-question-text {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.review-question-number {
    font-weight: 600;
    flex-shrink: 0;
    color: var(--color-text-secondary);
}

.review-question-review-status {
    margin-left: auto;
    flex-shrink: 0;
    font-size: var(--font-size-xs);
}

.review-question-review-status--approved { color: var(--color-success); }
.review-question-review-status--rejected { color: var(--color-danger); }

.review-question-answer,
.review-question-comment {
    padding-left: var(--space-16);
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
}

.review-files-section {
    margin-top: var(--space-16);
}

.review-files-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.review-file-item {
    display: flex;
    align-items: center;
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--color-border-subtle);
    font-size: var(--font-size-sm);
}

.review-file-item:last-child {
    border-bottom: none;
}

/* ============================================================================
   MISSING CLASS DEFINITIONS — added during CSS audit
   All classes used in Module.Workflow Razor files, resolved here.
   ============================================================================ */

/* NOTE: app-card-body, app-card-content, and app-badge were previously here.
   They have been promoted to components.css because they are app-prefixed
   generic classes used across multiple modules. */

/* ── btn-link-sm ──────────────────────────────────────────────────────────── */
.btn-link-sm {
    font-size: 12px;
    padding: 2px var(--space-4);
    color: var(--color-brand-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
}

.btn-link-sm:hover {
    text-decoration: underline;
}

/* ── Filter group checkbox modifier ──────────────────────────────────────── */
.filter-group--checkbox {
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
    margin-top: 20px;
}

/* ── Icon button dark-blue variant ───────────────────────────────────────── */
.icon-button--dark-blue {
    color: var(--color-brand-primary);
}

.icon-button--dark-blue:hover {
    background: rgba(0, 95, 158, 0.08);
}

/* ── Task kind badge ──────────────────────────────────────────────────────── */
.task-kind-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-small);
    font-size: 11px;
    font-weight: 600;
    background: var(--color-grey-200);
    color: var(--color-text-secondary);
}

.task-kind-action    { background: var(--color-grey-200); color: var(--color-text-secondary); }
.task-kind-checklist { background: rgba(0, 95, 158, 0.10); color: var(--color-brand-primary); }
.task-kind-workflow  { background: rgba(46, 133, 64, 0.12); color: var(--color-success); }

/* ── Workflow Definitions Panel (WorkflowBoardPage) ──────────────────────── */
.workflow-definitions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-12);
}

.workflow-definitions-table {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-medium);
    overflow: hidden;
}

.workflow-definitions-table-header,
.workflow-definitions-table-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: var(--space-8);
    padding: var(--space-12) var(--space-16);
    align-items: center;
}

.workflow-definitions-table-header .sortable {
    cursor: pointer;
    user-select: none;
}

.workflow-definitions-table-header .sortable:hover {
    color: var(--color-brand-primary);
}

.workflow-definitions-table-header {
    /* base styles from .app-table-grid-header */
}

.workflow-definitions-table-row {
    border-top: 1px solid var(--color-border-subtle);
    cursor: pointer;
    transition: background-color 0.15s;
}

.workflow-definitions-table-row:hover {
    background: var(--color-grey-50);
}

.workflow-definitions-table-row.selected {
    background: rgba(0, 95, 158, 0.06);
    border-left: 3px solid var(--color-brand-primary);
}

/* ── Process Checklist Panel ─────────────────────────────────────────────── */
.process-checklist-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.process-checklist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--color-border-subtle);
    margin-bottom: var(--space-12);
}

.process-checklist-header h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.process-checklist-table {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-medium);
    overflow: hidden;
}

.process-checklist-table-header,
.process-checklist-table-row {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-12);
    align-items: center;
}

.process-checklist-table-header {
    background: var(--color-grey-100);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.process-checklist-table-row {
    border-top: 1px solid var(--color-border-subtle);
}

/* Sequence badge */
.sequence-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--color-brand-primary);
    color: var(--color-white);
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

/* Source type badge */
.source-type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-small);
    font-size: 11px;
    font-weight: 600;
    background: var(--color-grey-200);
    color: var(--color-text-secondary);
    text-transform: capitalize;
}

.source-type-bc        { background: rgba(0, 95, 158, 0.12); color: var(--color-brand-primary); }
.source-type-checklist { background: rgba(46, 133, 64, 0.12); color: var(--color-success); }

/* Checklist ID cell */
.checklist-id-cell {
    font-family: monospace;
    font-size: 12px;
    color: var(--color-text-muted);
}

/* Checklist status badge — shape from .status-badge group (components.css); colours from status-badge--* groups there */
.checklist-status-badge { text-transform: capitalize; }

/* ── Process Completed Panel ─────────────────────────────────────────────── */
.completed-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.completed-tab-panel {
    padding: var(--space-16);
    overflow-y: auto;
}

.completed-summary-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4) var(--space-16);
    margin-bottom: var(--space-16);
}

.summary-row {
    display: contents;
}

.summary-row-full {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    grid-column: 1 / -1;
    margin-top: var(--space-8);
}

.summary-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.summary-value {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.completed-table {
    width: 100%;
    margin-top: var(--space-8);
}

.completed-empty {
    margin: var(--space-20) 0;
    text-align: center;
}

/* ── IDS Validation Drawer ───────────────────────────────────────────────── */
.ids-validation-drawer {
    padding: var(--space-16);
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

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

.ids-progress {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-12);
    background: var(--color-grey-50);
    border-radius: var(--radius-medium);
}

.ids-run-section {
    display: flex;
    align-items: center;
    gap: var(--space-12);
}

.ids-result-summary {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-medium);
    padding: var(--space-12);
    background: var(--color-grey-50);
}

.ids-result-summary h5 {
    margin: 0 0 var(--space-8) 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.ids-summary-counts {
    display: flex;
    gap: var(--space-8);
    flex-wrap: wrap;
    margin-bottom: var(--space-8);
}

.ids-count {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-8) var(--space-12);
    border-radius: var(--radius-medium);
    font-size: 18px;
    font-weight: 700;
    min-width: 60px;
    text-align: center;
    background: var(--color-grey-200);
    color: var(--color-text-secondary);
}

.ids-count small {
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
}

.ids-count-total      { background: var(--color-grey-200); color: var(--color-text-secondary); }
.ids-count-applicable { background: rgba(0, 95, 158, 0.10); color: var(--color-brand-primary); }
.ids-count-passed     { background: var(--color-success-light); color: var(--color-success); }
.ids-count-failed     { background: var(--color-error-light); color: var(--color-error); }
.ids-count-warning    { background: var(--color-warning-light); color: #997300; }

.ids-run-meta {
    font-size: 11px;
    margin: 0;
}

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

.ids-failed-section h5 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.ids-failed-table {
    font-size: 12px;
}

.ids-entity-type {
    display: inline-block;
    padding: 1px 6px;
    background: var(--color-grey-200);
    border-radius: var(--radius-small);
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.ids-all-passed {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-12);
    background: var(--color-success-light);
    border-radius: var(--radius-medium);
    margin: 0;
}

.ids-pdf-section {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border-subtle);
}

.ids-no-files,
.ids-no-pdf {
    margin: var(--space-8) 0 0 0;
    font-size: 12px;
}

/* IDS definition name (inside qa-ids-card and QA panel) */
.ids-def-name {
    font-size: 11px;
    color: var(--color-text-muted);
}

/* IDS input group (ProcessCreationDrawer, TaskSettingsDrawer) */
.ids-input-group {
    display: flex;
    align-items: stretch;
    gap: var(--space-4);
}

.ids-input-group .app-input {
    flex: 1;
    min-width: 0;
}

/* ── Review Meta List (ChecklistReviewDrawer, IdsValidationDrawer) ───────── */
.review-meta-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4) var(--space-16);
    margin: 0 0 var(--space-16) 0;
    font-size: 13px;
}

.review-meta-list dt {
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.review-meta-list dd {
    margin: 0;
    color: var(--color-text-secondary);
}

/* ── Drawer header row & title (ChecklistReviewDrawer, IdsValidationDrawer) ─ */
.drawer-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--space-8);
}

.drawer-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drawer-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px var(--space-20);
    color: var(--color-text-muted);
}

/* ── Checklist Review Drawer content ─────────────────────────────────────── */
.checklist-review-drawer {
    padding: var(--space-16);
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

/* Status row: badge + counts + PDF link */
.review-status-row {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex-wrap: wrap;
    padding-bottom: var(--space-12);
    border-bottom: 1px solid var(--color-border-subtle);
}

/* QA counts inline */
.qa-counts-inline {
    display: inline-flex;
    gap: var(--space-4);
    align-items: center;
}

.qa-count {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--radius-small);
    background: var(--color-grey-100);
    color: var(--color-text-secondary);
}

.qa-count-yes     { background: var(--color-success-light); color: var(--color-success); }
.qa-count-partial { background: var(--color-warning-light); color: #997300; }
.qa-count-no      { background: var(--color-error-light); color: var(--color-error); }
.qa-count-open    { background: var(--color-grey-200); color: var(--color-text-muted); }
.qa-count-sep     { color: var(--color-text-muted); font-size: 12px; }

/* Review chain section */
.review-chain-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.review-chain-section h5 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.review-chain {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.review-chain-step {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-medium);
    padding: var(--space-12);
    background: var(--color-white);
}

.reviewer-status-approved { border-left: 3px solid var(--color-success); }
.reviewer-status-rejected { border-left: 3px solid var(--color-error); }
.reviewer-status-pending  { border-left: 3px solid var(--color-grey-300); }

.review-chain-step-header {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin-bottom: var(--space-4);
}

.review-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    background: var(--color-brand-primary);
    color: var(--color-white);
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.review-step-user {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    flex: 1;
}

.review-step-status {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-small);
    background: var(--color-grey-200);
    color: var(--color-text-secondary);
}

.reviewer-status-approved .review-step-status { background: var(--color-success-light); color: var(--color-success); }
.reviewer-status-rejected .review-step-status { background: var(--color-error-light); color: var(--color-error); }

.review-step-date {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: var(--space-4);
}

.review-step-comment {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: var(--space-4);
    padding: var(--space-8);
    background: var(--color-grey-50);
    border-radius: var(--radius-small);
    font-style: italic;
}

/* Review comment section (rejection comment field) */
.review-comment-section {
    margin-top: var(--space-8);
}

/* Review actions */
.review-actions {
    display: flex;
    gap: var(--space-8);
    padding-top: var(--space-16);
    border-top: 1px solid var(--color-border-subtle);
    margin-top: auto;
}

/* ── Process QA Panel ────────────────────────────────────────────────────── */
.qa-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: var(--space-12);
}

.qa-lanes {
    display: flex;
    gap: var(--space-12);
    flex: 1;
    min-height: 0;
    overflow-x: auto;
}

.qa-lane {
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    background: var(--color-grey-50);
    border-radius: var(--radius-medium);
    padding: var(--space-8);
    gap: var(--space-8);
}

.qa-lane-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-primary);
    padding-bottom: var(--space-8);
    border-bottom: 2px solid var(--color-border-subtle);
}

.qa-lane-count {
    background: var(--color-brand-primary);
    color: var(--color-white);
    padding: 1px 8px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
}

.qa-lane-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    overflow-y: auto;
    flex: 1;
}

/* QA transition message */
.qa-transition-msg {
    font-size: 12px;
    text-align: center;
    padding: var(--space-8);
    background: var(--color-success-light);
    border-radius: var(--radius-medium);
    margin: 0;
}

/* ── Process Release Panel ───────────────────────────────────────────────── */
.release-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    height: 100%;
}

.release-target-row {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font-size: 13px;
    padding: var(--space-8) var(--space-12);
    background: var(--color-grey-50);
    border-radius: var(--radius-medium);
    border: 1px solid var(--color-border-subtle);
}

.release-empty {
    text-align: center;
    padding: var(--space-20) 0;
}

.release-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-8) var(--space-12);
    /* background/font/color from .app-table-grid-header; font-size overridden to 13px */
    font-size: 13px;
    border-radius: var(--radius-medium) var(--radius-medium) 0 0;
    border: 1px solid var(--color-border-subtle);
}

.release-files-table {
    border-radius: 0 0 var(--radius-medium) var(--radius-medium);
    border-top: none;
}

/* Release status badge — shape from .status-badge group (components.css); colours from status-badge--* groups there */
.release-status-badge { text-transform: capitalize; }

.release-row--released { opacity: 0.55; }

/* Inline confirmation */
.release-confirm-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    margin-top: var(--space-12);
}

.release-confirm-text {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin: 0;
}

.release-confirm-actions {
    display: flex;
    gap: var(--space-8);
}

/* Complete section */
.release-complete-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-12);
    padding: var(--space-16);
    background: var(--color-success-light);
    border-radius: var(--radius-medium);
    margin-top: var(--space-12);
}

.release-all-done {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-success);
}

/* ── Upload Panels (SimpleUploadPanel, NamingConventionUploadPanel) ───────── */

/* Shared file input */
.app-file-input {
    display: block;
    width: 100%;
    padding: var(--space-8);
    font-size: 13px;
    border: 1px dashed var(--color-border-subtle);
    border-radius: var(--radius-medium);
    background: var(--color-grey-50);
    cursor: pointer;
}

.app-file-input:hover {
    border-color: var(--color-brand-primary);
    background: rgba(0, 95, 158, 0.03);
}

/* File table (used in SimpleUploadPanel and NamingConventionUploadPanel) */
.upload-file-table {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-medium);
    overflow: hidden;
    font-size: 12px;
}

.upload-file-table-header,
.upload-file-table-row {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-12);
    align-items: center;
}

.upload-file-table-header {
    /* base styles from .app-table-grid-header */
}

.upload-file-table-row {
    border-top: 1px solid var(--color-border-subtle);
}

.upload-file-table-row.row-success { background: var(--color-success-light); }
.upload-file-table-row.row-error   { background: var(--color-error-light); }

/* Upload action buttons */
.upload-actions {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

/* Simple Upload Panel */
.simple-upload-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.simple-upload-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
}

.simple-upload-left,
.simple-upload-right {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.simple-upload-folder-name {
    font-size: 12px;
    margin-bottom: var(--space-4);
}

.upload-progress-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--space-8);
    font-size: 12px;
}

.upload-progress-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-8);
}

.upload-progress-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.upload-progress-done {
    color: var(--color-success);
    font-weight: 600;
}

.upload-progress-error {
    color: var(--color-error);
    font-size: 11px;
}

/* NC Upload Panel */
.nc-upload-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.nc-upload-profile-header {
    font-size: 13px;
    padding: var(--space-8) var(--space-12);
    background: var(--color-grey-50);
    border-radius: var(--radius-medium);
    border: 1px solid var(--color-border-subtle);
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.nc-upload-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
}

.nc-upload-left,
.nc-upload-middle,
.nc-upload-right {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

@media (max-width: 1279px) {
    .nc-upload-columns {
        grid-template-columns: 1fr;
    }
}

/* Process Upload Panel (container) */
.process-upload-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
}

/* ── Process Order Detail Panel ──────────────────────────────────────────── */
.order-detail-panel {
    display: flex;
    flex-direction: column;
}

.order-detail-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4) var(--space-16);
    margin: 0 0 var(--space-16) 0;
    font-size: 13px;
}

.order-detail-list dt {
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.order-detail-list dd {
    margin: 0;
    color: var(--color-text-secondary);
}

.order-detail-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: var(--space-16) 0 var(--space-8) 0;
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--color-border-subtle);
}

.order-detail-counts {
    display: flex;
    gap: var(--space-16);
    padding: var(--space-12) 0;
    margin-bottom: var(--space-8);
}

.order-detail-count-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
    padding: var(--space-8) var(--space-12);
    background: var(--color-grey-50);
    border-radius: var(--radius-medium);
    border: 1px solid var(--color-border-subtle);
}

.count-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-brand-primary);
    line-height: 1;
}

.count-label {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: var(--space-4);
    text-align: center;
}

.order-detail-actions {
    display: flex;
    justify-content: flex-start;
    gap: var(--space-8);
    padding-top: var(--space-16);
    margin-top: var(--space-8);
    border-top: 1px solid var(--color-border-subtle);
}

/* ── Milestone table wrapper ─────────────────────────────────────────────── */
.milestone-table-wrapper {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-medium);
}

/* ── Editor controls-table column widths (WorkflowEditorDrawer) ───────────── */
.col-control-type,
.col-section,
.col-actions {
    min-width: 0;
}

.col-control-type { flex: 0 0 140px; }
.col-section      { flex: 1; }
.col-actions      { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-4); }