/* Workflow list: shared dashboard density, readable dates and quiet status text.
   Loaded last because the historical designer stylesheet also contains list rules. */
.wf-bulk { flex-basis:100%; min-width:0; border-top:1px solid var(--stroke); padding-top:8px; }
.wf-bulk-commands { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.wf-bulk p { margin:6px 0; font-size:12px; line-height:1.5; }
.wf-bulk [data-bulk-confirm] { padding:10px; border:1px solid var(--warn); background:var(--panel); }
.wf-bulk [hidden] { display:none !important; }
.wf-bulk [data-bulk-errors] { max-height:160px; overflow:auto; overflow-wrap:anywhere; }
.wf-bulk button { min-height:34px; }
.wf-bulk button:focus-visible, .wf-row-select input:focus-visible { outline:2px solid var(--link); outline-offset:2px; }
.wf-row-select { display:flex; align-items:center; gap:8px; cursor:pointer; }
.wf-row-select input { width:18px; height:18px; flex:none; accent-color:var(--link); }
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView {
    --workflow-list-columns: minmax(240px, 1.6fr) minmax(160px, 1fr) 96px 108px 180px 144px;
    --workflow-list-min-width: 1012px;
    --panel: var(--wf-ref-surface);
    --text: var(--wf-ref-text);
    --muted: var(--wf-ref-muted);
    --stroke: var(--wf-ref-line);
    --link: var(--wf-ref-accent);
    --good: var(--wf-ref-success);
    --bad: var(--wf-ref-danger);
    --warn: var(--wf-ref-warning);
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-admin-main {
    grid-template-rows: auto auto 64px auto minmax(260px, 1fr) auto !important;
    min-width: 0;
    min-height: 0 !important;
    gap: 12px !important;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-dashboard-title h2 {
    font-size: 20px !important;
    line-height: 1.3;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-dashboard-title p {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-admin-toolbar {
    gap: 8px !important;
    align-items: center;
    flex-wrap: wrap;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-search-box {
    flex: 1 1 220px;
    min-width: 0;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-search-box input {
    min-height: 34px;
    font-size: 13px;
    min-width: 0;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-metrics .metric-card {
    height: 64px !important;
    min-height: 64px !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    grid-template-rows: 23px 17px !important;
    padding: 10px 12px !important;
    column-gap: 9px !important;
    border-radius: 2px !important;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-metrics .metric-card > i {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    color: var(--workflow-metric-color, var(--link)) !important;
    background: color-mix(in srgb, var(--workflow-metric-color, var(--link)) 12%, transparent) !important;
    font-size: 25px !important;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-metrics .metric-card > span {
    font-size: 21px !important;
    line-height: 23px !important;
    font-variant-numeric: tabular-nums;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-metrics .metric-card > small {
    line-height: 17px !important;
    font-size: 12px !important;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-list-shell {
    min-width: 0;
    overflow: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    border-radius: 2px !important;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-list-head,
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-list-body {
    min-width: var(--workflow-list-min-width) !important;
    width: 100%;
    box-sizing: border-box;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-list-head,
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-list-row {
    grid-template-columns: var(--workflow-list-columns) !important;
    gap: 12px !important;
    padding: 9px 12px !important;
    align-items: center;
    box-sizing: border-box;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-list-body {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-list-head {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 42px;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 12px !important;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-list-head > span {
    min-width: 0;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-sort {
    display: inline-flex;
    width: 100%;
    min-height: 34px;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    padding: 5px 0;
    margin: 0;
    border: 0 !important;
    border-radius: 2px;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--muted);
    text-align: left;
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-sort > i {
    flex: none;
    font-size: 11px;
    opacity: .55;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-sort:hover,
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView [aria-sort="ascending"] .workflow-sort,
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView [aria-sort="descending"] .workflow-sort {
    color: var(--link);
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView [aria-sort="ascending"] .workflow-sort > i,
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView [aria-sort="descending"] .workflow-sort > i {
    opacity: 1;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-sort:focus-visible,
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-list-actions .btn:focus-visible,
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .wf-status-toggle:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 2px;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-list-row {
    min-height: 64px !important;
    border-top: 0 !important;
    font-size: 12px;
    line-height: 1.45;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-list-row:last-child {
    border-bottom: 0 !important;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-list-name {
    min-width: 0;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-list-name strong {
    line-height: 1.4;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-run-time {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    width: 180px;
    min-width: 180px;
    max-width: none;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    font-size: 12px;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-run-time time {
    display: flex;
    flex-direction: column;
    gap: 1px;
    white-space: nowrap !important;
    color: var(--text);
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-run-time small {
    display: block;
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
}
/* Status and origin labels are text, not framed controls. The switch track
   remains visible so an editable activation state stays recognizable. */
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .wf-badge,
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-system-label,
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .wf-status-toggle,
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .wf-status-toggle:hover {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    color: var(--muted) !important;
    font-size: 12px;
    line-height: 1.5;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .wf-status-toggle {
    min-height: 34px !important;
    justify-content: flex-start;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-system-label {
    display: inline-flex;
    margin: 2px 0 0;
    font-size: 11px;
    gap: 5px;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .wf-badge.good {
    color: var(--good) !important;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .wf-badge.bad {
    color: var(--bad) !important;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .wf-badge.warn,
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .wf-badge.running,
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .wf-badge.pending {
    color: var(--warn) !important;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-list-actions {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: nowrap;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-list-actions .btn.icon {
    width: 33px;
    min-width: 33px;
    min-height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
/* Match the shared action layer, whose important rules precede unlayered styles. */
@layer sysimple-actions {
#workflowAdminView :is([data-action="run"], #btnRunSelectedWorkflow) { --workflow-action: var(--wf-ref-success); }
#workflowAdminView :is([data-action="open"], #btnOpenSelectedWorkflow) { --workflow-action: var(--wf-ref-accent); }
#workflowAdminView :is([data-action="duplicate"], #btnDuplicateSelectedWorkflow) { --workflow-action: #8560be; }
#workflowAdminView :is([data-action="delete"], #btnDeleteSelectedWorkflow) { --workflow-action: var(--wf-ref-danger); }
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView :is(.workflow-list-actions .btn.icon, #btnRunSelectedWorkflow, #btnOpenSelectedWorkflow, #btnDuplicateSelectedWorkflow, #btnDeleteSelectedWorkflow) {
    color: color-mix(in srgb, var(--workflow-action) 78%, var(--wf-ref-text)) !important;
    background: color-mix(in srgb, var(--workflow-action) 10%, var(--wf-ref-surface)) !important;
    border: 1px solid color-mix(in srgb, var(--workflow-action) 32%, var(--wf-ref-line)) !important;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView :is(.workflow-list-actions .btn.icon, #btnRunSelectedWorkflow, #btnOpenSelectedWorkflow, #btnDuplicateSelectedWorkflow, #btnDeleteSelectedWorkflow):hover:not(:disabled) {
    background: color-mix(in srgb, var(--workflow-action) 20%, var(--wf-ref-surface)) !important;
    border-color: var(--workflow-action) !important;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView :is(.workflow-list-actions .btn.icon, #btnRunSelectedWorkflow, #btnOpenSelectedWorkflow, #btnDuplicateSelectedWorkflow, #btnDeleteSelectedWorkflow):disabled {
    color: var(--wf-ref-muted) !important;
    background: var(--wf-ref-surface-2) !important;
    border-color: var(--wf-ref-line) !important;
    opacity: .55;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-list-actions .btn.icon i {
    color: inherit !important;
}
}
@layer sysimple-actions {
    body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-list-row.is-inactive {
        background: color-mix(in srgb, var(--wf-ref-warning) 8%, var(--wf-ref-surface)) !important;
    }
    body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-list-row.is-inactive:hover {
        background: color-mix(in srgb, var(--wf-ref-warning) 12%, var(--wf-ref-surface)) !important;
    }
    body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-list-row.is-inactive.selected {
        background: color-mix(in srgb, var(--wf-ref-warning) 16%, var(--wf-ref-surface)) !important;
    }
}
@media (max-width: 1040px) {
    body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-admin-main {
        grid-template-rows: auto auto 64px auto minmax(300px, 1fr) auto !important;
    }
}
@media (max-width: 600px) {
    body:has(#workflowAdminView:not(.hidden)) #workflowAdminView {
        padding: 10px !important;
        gap: 10px !important;
    }
    body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-admin-main {
        grid-template-rows: auto auto auto auto minmax(300px, 1fr) auto !important;
    }
    body:has(#workflowAdminView:not(.hidden)) #workflowAdminView .workflow-filter-bar .workflow-filter-status {
        flex-basis: 100%;
        margin-left: 0 !important;
    }
}

/* Les couleurs suivent les états et les variantes du thème du dashboard. */
#workflowAdminView .metric-card[data-workflow-filter="all"] { --workflow-metric-color: var(--link); }
#workflowAdminView .metric-card[data-workflow-filter="active"] { --workflow-metric-color: var(--good); }
#workflowAdminView .metric-card[data-workflow-filter="inactive"] { --workflow-metric-color: var(--muted); }
#workflowAdminView .metric-card[data-workflow-filter="running"] { --workflow-metric-color: var(--warn); }
#workflowAdminView .metric-card[data-workflow-filter="errors"] { --workflow-metric-color: var(--bad); }

/* Commandes de la liste : texte lisible sur la surface teintée du thème. */
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView #btnNewWorkflowFromList,
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView #btnNewWorkflowFromList > i {
    color: var(--text) !important;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView #btnRefreshWorkflowList {
    width: 36px !important;
    min-width: 36px !important;
    min-height: 34px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body:has(#workflowAdminView:not(.hidden)) #workflowAdminView #btnRefreshWorkflowList > i {
    margin: 0 !important;
}

/* Shared origin identity in filters, catalogue rows and details. */
#workflowOriginFilter[hidden] { display:none !important; }
.workflow-origin-options { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.workflow-origin-badge { display:inline-flex; align-items:center; gap:6px; width:fit-content; font-size:11px; line-height:1.5; padding:2px 7px; border:1px solid var(--adm-border,#d3d9df); border-radius:4px; }
.workflow-origin-badge i { color:var(--adm-primary,#3c8dbc); }
.workflow-custom-label { color:var(--adm-text); background:var(--adm-surface-2); }
.workflow-custom-label i { color:var(--adm-success,#00a65a); }
@layer sysimple-actions {
    #workflowAdminView .workflow-origin-options button { display:inline-flex; align-items:center; gap:7px; padding:7px 11px; min-height:34px; font:500 12px/18px "Segoe UI",Arial,sans-serif; border:1px solid var(--adm-border,#d3d9df)!important; border-radius:5px!important; background:var(--adm-surface-2,#f9fafb)!important; color:var(--adm-text,#263238)!important; box-shadow:none!important; }
    #workflowAdminView .workflow-origin-options button i { color:var(--adm-primary,#3c8dbc); }
    #workflowAdminView .workflow-origin-options button[data-workflow-origin="custom"] i { color:var(--adm-success,#00a65a); }
    #workflowAdminView .workflow-origin-options button[aria-pressed="true"], #workflowAdminView .workflow-origin-options button:hover { border-color:var(--adm-primary,#3c8dbc)!important; background:var(--adm-primary-soft,rgba(60,141,188,.12))!important; }
}
 #workflowAdminView .workflow-list-pager { display:flex !important; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 0; }
 #workflowAdminView .workflow-list-pager[hidden] { display:none !important; }
 #workflowAdminView .workflow-list-pager select { width:auto; min-height:34px; background:var(--panel); color:var(--text); border:1px solid var(--stroke); }
 .workflow-list-pager [role="status"] { margin-inline-end:auto; }
 @media(max-width:760px) { .workflow-list-pager .btn, .workflow-list-pager select { min-height:44px; min-width:44px; } }