/* Compact neutral controls; semantic color is an accent rather than a filled tile. */
body #workflowAdminView .workflow-metrics button.metric-card { text-align:left;font:inherit;cursor:pointer;color:var(--text);border:1px solid var(--stroke);border-radius:0; }
body #workflowAdminView .workflow-metrics button.metric-card[aria-pressed=true] { border-color:var(--link)!important;box-shadow:inset 0 -3px var(--link)!important;background:color-mix(in srgb,var(--link) 7%,var(--panel))!important; }
body #workflowAdminView .workflow-metrics button.metric-card:focus-visible { outline:2px solid var(--link);outline-offset:2px; }
.workflow-filter-status { margin:6px 0 10px;font-size:12px;color:var(--muted); }
body #workflowAdminView .workflow-system-label { display:inline-flex;width:fit-content;max-width:100%;padding:2px 6px;border:1px solid var(--stroke);background:var(--card);color:var(--text);font-size:11px;line-height:1.5;white-space:normal; }
body #workflowDesignerShell .btn,
body #workflowDesignerShell .wf-right-tab {
    background: var(--panel) !important;
    color: var(--text) !important;
    border: 1px solid var(--stroke) !important;
    box-shadow: none !important;
}
body #workflowDesignerShell .btn:hover,
body #workflowDesignerShell .wf-right-tab:hover {
    background: var(--card) !important;
    border-color: var(--muted) !important;
}
body #workflowDesignerShell .btn.primary {
    background: color-mix(in srgb, var(--link) 9%, var(--panel)) !important;
    border-color: color-mix(in srgb, var(--link) 40%, var(--stroke)) !important;
}
body #workflowDesignerShell #palette .btn.primary {
    background: var(--panel) !important;
    border-color: var(--stroke) !important;
}
body #workflowDesignerShell .btn.danger i { color: var(--bad) !important; }
body #workflowDesignerShell .btn.success i { color: var(--good) !important; }
body #workflowDesignerShell .wf-right-tab-list {
    display: grid;
    grid-template-columns: repeat(4,minmax(34px,1fr));
    gap: 5px;
}
body #workflowDesignerShell .wf-right-tab {
    min-width: 0;
    min-height: 36px;
    justify-content: center;
    padding: 7px;
}
/* Accessible names and native hover labels are supplied by the markup. */
body #workflowDesignerShell .wf-right-tab span { display:none; }
body #workflowDesignerShell .wf-right-tab.active {
    background: color-mix(in srgb, var(--link) 9%, var(--panel)) !important;
    border-bottom: 2px solid var(--link) !important;
}
body #workflowDesignerShell .wf-node-run-badge {
    background: var(--panel) !important;
    border: 1px solid var(--stroke) !important;
    box-shadow: none !important;
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    min-height:22px !important;
}
body #workflowDesignerShell .wf-node-run-badge.success,
body #workflowDesignerShell .wf-node-run-badge.success i { color: var(--good) !important; }
body #workflowDesignerShell .wf-node-run-badge.error,
body #workflowDesignerShell .wf-node-run-badge.error i { color: var(--bad) !important; }
body #workflowDesignerShell .wf-node-run-badge.running,
body #workflowDesignerShell .wf-node-run-badge.pending { color: var(--muted) !important; }
body #workflowDesignerShell button:focus-visible { outline:2px solid var(--link); outline-offset:2px; }

/* Canvas commands belong beside the view switch, outside the shared header. */
body .workflow-canvas-tools {
    margin-left:auto;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}
body .workflow-canvas-tools .btn {
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    gap:7px;
    flex:0 0 auto!important;
    min-height:34px!important;
    padding:6px 10px!important;
    background:var(--panel)!important;
    border:1px solid var(--stroke)!important;
    color:var(--text)!important;
    box-shadow:none!important;
    font:inherit;
    font-size:12px;
}
body .workflow-canvas-tools .btn.icon { width:34px!important;min-width:34px!important;padding:0!important; }
body .workflow-canvas-tools .btn:hover { background:var(--card)!important; }
body .workflow-canvas-tools .btn i { color:inherit!important;font-size:13px!important; }
body .workflow-canvas-tools #zoomLabel { min-width:48px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted);border:0!important;background:none!important; }
body .workflow-canvas-tools #btnCollapseAllNodes { margin-left:8px; }
body .workflow-canvas-tools .btn:focus-visible { outline:2px solid var(--link);outline-offset:2px; }
@media(max-width:700px) { body .workflow-canvas-tools { margin-left:0;flex-basis:100%; } }

/* One neutral activation control; only the switch carries the state accent. */
.wf-message-preview { margin:8px 0 12px;border:1px solid var(--stroke);background:var(--panel); }
.wf-message-preview summary { padding:8px 10px;min-height:34px;box-sizing:border-box;cursor:pointer;color:var(--text);font-size:12px; }
.wf-message-preview summary:focus-visible { outline:2px solid var(--link);outline-offset:2px; }
.wf-message-preview iframe { display:block;width:100%;height:200px;border:0;border-top:1px solid var(--stroke);background:var(--panel); }
.wf-message-preview p { margin:0;padding:8px 10px;font-size:11px;line-height:1.5;color:var(--muted); }
body #workflowDesignerShell .workflow-activation-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding-top:10px;
    margin-top:12px;
    border-top:1px solid var(--stroke);
}
body #workflowDesignerShell .workflow-activation-row > label { margin:0; color:var(--text); }
body #workflowDesignerShell #wfIsActiveToggle {
    display:inline-flex!important;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    min-width:108px!important;
    min-height:34px;
    padding:6px 9px!important;
    border:1px solid var(--stroke)!important;
    border-radius:3px;
    background:var(--panel)!important;
    color:var(--text)!important;
    box-shadow:none!important;
    filter:none!important;
    font:inherit;
    font-size:12px;
}
body #workflowDesignerShell #wfIsActiveToggle:hover { background:var(--card)!important; }
body #workflowDesignerShell #wfIsActiveToggle .wf-switch-label {
    background:transparent!important;
    color:var(--text)!important;
    border:0!important;
    font-weight:500;
}
body #workflowDesignerShell #wfIsActiveToggle .wf-switch-track {
    flex:0 0 30px;
    width:30px;
    height:18px;
    padding:2px;
    background:var(--stroke)!important;
    border:1px solid var(--muted)!important;
}
body #workflowDesignerShell #wfIsActiveToggle .wf-switch-thumb {
    width:12px;
    height:12px;
    background:var(--muted)!important;
    box-shadow:none;
}
body #workflowDesignerShell #wfIsActiveToggle.is-active .wf-switch-track {
    background:color-mix(in srgb,var(--link) 15%,var(--panel))!important;
    border-color:var(--link)!important;
}
body #workflowDesignerShell #wfIsActiveToggle.is-active .wf-switch-thumb {
    background:var(--link)!important;
    transform:translateX(12px);
}

/* Compact pairs preserve the existing actions and theme states. */
#workflowDesignerShell .workflow-definition-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}
#workflowDesignerShell .workflow-definition-actions > .btn {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    margin: 0 !important;
    padding: 6px 8px;
    gap: 6px;
    justify-content: flex-start;
    white-space: normal;
    line-height: 1.25;
}
#workflowDesignerShell .workflow-definition-actions > .btn > i {
    flex: 0 0 14px;
    color: inherit !important;
}
/* Light workflow: pale surfaces and dark, legible semantic icons. Shared action
   variables also cover classes assigned by the common action classifier. */
body[data-theme="light"] :is(#workflowDesignerShell, .workflow-canvas-tools) .btn {
    --action-tone: #3c8dbc !important;
    --action-bg: #edf4f8 !important;
    --action-fg: #245775 !important;
    --action-border: #bed1dd !important;
}
body[data-theme="light"] #workflowDesignerShell :is(.btn.success, .btn.btn-success, .btn.sys-btn-success) {
    --action-tone: #278361 !important;
    --action-bg: #eaf5ef !important;
    --action-fg: #216448 !important;
    --action-border: #b9d9c9 !important;
}
body[data-theme="light"] :is(#workflowDesignerShell, .workflow-canvas-tools) :is(.btn.danger, .btn.btn-danger, .btn.sys-btn-danger) {
    --action-tone: #b84a40 !important;
    --action-bg: #fbeeed !important;
    --action-fg: #963c34 !important;
    --action-border: #e7c3bf !important;
}
@layer sysimple-actions {
    body[data-theme="light"] :is(#workflowDesignerShell, .workflow-canvas-tools) .btn :is(i, svg) {
        color: inherit !important;
        opacity: 1 !important;
    }
    body[data-theme="light"] #workflowDesignerShell .wf-node-run-badge.success {
        background: #eaf5ef !important;
        border-color: #b9d9c9 !important;
        color: #216448 !important;
    }
    body[data-theme="light"] #workflowDesignerShell .wf-node-run-badge.error {
        background: #fbeeed !important;
        border-color: #e7c3bf !important;
        color: #963c34 !important;
    }
    body[data-theme="light"] #workflowDesignerShell .wf-node-run-badge i {
        color: inherit !important;
        opacity: 1 !important;
    }
}
body #workflowDesignerShell :is(#wfAlertEvents, #wfAlertChannels) {
    margin: 12px 0; padding: 8px 10px; border: 1px solid var(--stroke); min-width: 0;
}
body #workflowDesignerShell :is(#wfAlertEvents, #wfAlertChannels) legend {
    width: auto; font-size: 12px; color: var(--text); padding: 0 4px;
}
body #workflowDesignerShell :is(#wfAlertEvents, #wfAlertChannels) label {
    display: flex; align-items: flex-start; gap: 8px; margin: 6px 0; line-height: 1.4; color: var(--text);
}
body #workflowDesignerShell :is(#wfAlertEvents, #wfAlertChannels) input[type="checkbox"] {
    width: 15px !important; height: 15px !important; min-height: 0 !important; flex: 0 0 15px; margin: 1px 0 0; padding: 0;
}

body #workflowDesignerShell .workflow-alert-settings { display: grid; gap: 7px; }
body #workflowDesignerShell .workflow-alert-settings > label { display: block; margin: 5px 0 0; color: var(--text); }
body #workflowDesignerShell .workflow-alert-settings > .btn { width: 100%; }
/* Execution history stays neutral, including shared semantic-button overrides. */
@layer sysimple-actions {
 body #workflowDesignerShell .execution-step-item {
    background:var(--panel)!important; color:var(--text)!important;
    border:1px solid var(--stroke)!important; border-radius:3px!important;
    box-shadow:none!important; padding:10px!important;
    display:grid!important; grid-template-columns:26px minmax(0,1fr)!important;
    gap:7px 9px!important; text-align:left; width:100%; min-width:0;
 }
 body #workflowDesignerShell .execution-step-item:hover {background:var(--card)!important;border-color:var(--link)!important;}
 body #workflowDesignerShell .execution-step-item.active {border-color:var(--link)!important;box-shadow:inset 3px 0 var(--link)!important;}
 body #workflowDesignerShell .execution-step-item:focus-visible {outline:2px solid var(--link)!important;outline-offset:2px;}
 body #workflowDesignerShell .execution-step-item .execution-step-icon {
    grid-column:1;grid-row:1;width:26px;height:26px;min-width:26px;
    background:var(--card)!important;border:1px solid var(--stroke)!important;color:var(--text)!important;
 }
 body #workflowDesignerShell .execution-step-item .execution-step-icon i {color:inherit!important;}
 body #workflowDesignerShell .execution-step-item.success .execution-step-icon {color:#247653!important;}
 body #workflowDesignerShell .execution-step-item.error .execution-step-icon {color:var(--bad)!important;}
 body #workflowDesignerShell .execution-step-main {grid-column:2;grid-row:1;min-width:0;}
 body #workflowDesignerShell .execution-step-main strong {display:block;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere;color:var(--text)!important;font-size:12px;line-height:1.45;}
 body #workflowDesignerShell .execution-step-node {color:var(--muted)!important;font-size:11px;}
 body #workflowDesignerShell .execution-step-status {grid-column:2;grid-row:2;justify-self:start;background:var(--card)!important;color:var(--text)!important;border:1px solid var(--stroke)!important;text-transform:none!important;font-size:11px!important;font-weight:500!important;padding:2px 6px;}
 body #workflowDesignerShell .execution-step-item .execution-step-meta {grid-column:2;grid-row:3;display:flex;flex-wrap:wrap;gap:4px 12px;color:var(--muted)!important;font-size:11px;line-height:1.5;}
 body #workflowDesignerShell .execution-step-item .execution-error {flex-basis:100%;overflow-wrap:anywhere;white-space:normal;}
 body #workflowDesignerShell .execution-summary-status {background:transparent!important;color:var(--text)!important;}
}
body #workflowDesignerShell .execution-output-details summary {cursor:pointer;padding:8px 0;font-weight:600;color:var(--text);}
body #workflowDesignerShell .execution-steps-list {display:grid;gap:8px;}
@layer sysimple-actions {
 body #workflowDesignerShell .execution-step-item {grid-template-areas:none!important;grid-template-rows:auto auto auto!important;}
 body #workflowDesignerShell .execution-step-item .execution-step-icon {grid-area:1 / 1!important;}
 body #workflowDesignerShell .execution-step-item .execution-step-main {grid-area:1 / 2!important;}
 body #workflowDesignerShell .execution-step-item .execution-step-status {grid-area:2 / 2!important;justify-self:start!important;}
 body #workflowDesignerShell .execution-step-item .execution-step-meta {grid-area:3 / 2!important;display:flex!important;flex-wrap:wrap!important;}
 body[data-theme="dark"] #workflowDesignerShell .execution-step-item.success .execution-step-icon,
 body[data-theme="sysimple"] #workflowDesignerShell .execution-step-item.success .execution-step-icon {color:#8ed5b1!important;}
}