/* ==========================================================================
   Tansi Workflow Builder — written-steps list (.wfw-*) + accessible diagram
   (.wfd-*). Task 11, Phase 1 of the Inventory workflow builder. Everything
   here is driven by MudBlazor palette vars (--mud-palette-*) and the
   design-system tokens from app.css (--radius-md, --shadow-card*), plus a
   small set of kind-accent tokens scoped to these two components so dark
   mode can retune the one non-Mud colour (branch violet) without touching
   light-mode values — mirrors the .loop scope pattern in crm.css.

   Stage A Task 2 extends this file with the concept mockup's visual system
   (D:\tansi-workflow-builder_1 (1).html, .wf-* classes ~2956-3129): the About
   card, the problems-bar row treatment, and the slide-over panel/form family
   (.wf-panel/.wf-f/.wf-fs/.wf-check/...) that Tasks 3-4 build the step
   editor on top of. Token mapping is the same substitution used above
   (mockup --surface/--border/--text/--primary -> --mud-palette-*, mockup
   --radius(10px)/--radius-lg -> this file's --radius-md/14px convention
   everywhere), with one addition: the mockup's hand-picked stop/warn/ok
   hex pairs (one per theme) are replaced with color-mix() against the
   matching --mud-palette-error/warning/success token instead of a second
   .mud-theme-dark override block — same technique already used for
   .pport-errsum/.pport-pw in crm.css, and it adapts to dark mode for free
   instead of needing a maintained hex pair.
   ========================================================================== */

.wfw,
.wfd {
    --wf-accent-approval: var(--mud-palette-primary);
    --wf-accent-branch: #6b21a8;
    --wf-accent-end: var(--mud-palette-success);
}

.mud-theme-dark .wfw,
.mud-theme-dark .wfd {
    --wf-accent-branch: #b49df6;
}

/* --------------------------------------------------------------------------
   Written steps list
   -------------------------------------------------------------------------- */
.wfw-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.wfw-row {
    display: flex;
    align-items: stretch;
    gap: 4px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-left: 4px solid var(--wf-accent-approval);
    border-radius: var(--radius-md, 14px);
    box-shadow: var(--shadow-card);
    transition: outline-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.wfw-row--branch { border-left-color: var(--wf-accent-branch); }
.wfw-row--end    { border-left-color: var(--wf-accent-end); }
.wfw-row--other  { border-left-color: var(--mud-palette-lines-default); }

.wfw-row--selected {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -1px;
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
}

.wfw-row__body {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    text-align: left;
    background: none;
    border: none;
    padding: 13px 15px;
    margin: 0;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    border-radius: var(--radius-md, 14px) 0 0 var(--radius-md, 14px);
}

.wfw-row__body:hover { background: var(--mud-palette-action-default-hover); }

.wfw-row__body:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.wfw-row__num {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
    font-size: 12px;
    font-weight: 700;
    margin-top: 1px;
}

.wfw-row__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wfw-row__name {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.wfw-row__kind {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: .3px;
}

.wfw-row__sentence {
    font-size: 13.5px;
    color: var(--mud-palette-text-secondary);
}

.wfw-row__actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 8px 8px 8px 0;
}

/* --------------------------------------------------------------------------
   Diagram — Phase 1's single-column, keyboard-operable stand-in for the
   2-D canvas that lands in Phase 4.
   -------------------------------------------------------------------------- */
.wfd-column {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 440px;
}

.wfd-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wfd-box {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    background: var(--mud-palette-surface);
    border: 2px solid var(--mud-palette-lines-inputs);
    border-left: 4px solid var(--wf-accent-approval);
    border-radius: var(--radius-md, 14px);
    box-shadow: var(--shadow-card);
    padding: 11px 13px;
    margin: 0;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    text-align: left;
    transition: outline-color .15s ease, box-shadow .15s ease, background .15s ease, transform .15s ease;
}

.wfd-box:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}

.wfd-box:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.wfd-item--branch .wfd-box { border-left-color: var(--wf-accent-branch); }
.wfd-item--end    .wfd-box { border-left-color: var(--wf-accent-end); }
.wfd-item--other  .wfd-box { border-left-color: var(--mud-palette-lines-default); }

.wfd-item--selected .wfd-box {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -1px;
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
}

.wfd-box__icon {
    flex: none;
    color: var(--wf-accent-approval);
}

.wfd-item--branch .wfd-box__icon { color: var(--wf-accent-branch); }
.wfd-item--end    .wfd-box__icon { color: var(--wf-accent-end); }

.wfd-box__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wfd-box__name {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.wfd-box__caption {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: .3px;
}

.wfd-connector {
    width: 2px;
    height: 22px;
    margin: 0 0 0 24px;
    background: var(--mud-palette-lines-default);
}

.wfd-arms {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 4px 24px;
    padding-left: 14px;
    border-left: 2px dashed var(--mud-palette-lines-default);
}

.wfd-arm {
    background: var(--mud-palette-action-default-hover);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    padding: 4px 12px;
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    font-family: inherit;
}

.wfd-arm:hover {
    border-color: var(--wf-accent-branch);
    color: var(--wf-accent-branch);
}

.wfd-arm:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.wfd-arm:disabled {
    cursor: default;
    opacity: .6;
}

/* ==========================================================================
   About card — WorkflowUpsert.razor's "what this workflow is, and which
   requests reach it" section. Ported from the mockup's .wf-about block
   (~2956). The page renders its own TansiSection head above this (the
   "What this workflow is..." overline via Plain="true", which drops
   TansiSection's own card chrome per its documented "content that already
   has its own surfaces" use case) and this card supplies the surface.
   ========================================================================== */
.wf-about {
    padding: 15px 17px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--radius-md, 14px);
    background: var(--mud-palette-surface);
}

.wf-abouthead {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 11px;
}

.wf-abouthead-title {
    margin: 0;
    font-size: .98rem;
}

.wf-dl {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    margin: 0;
}

.wf-dl dt {
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.wf-dl dd {
    margin: 2px 0 0;
    font-size: .86rem;
    font-weight: 700;
}

.wf-desc {
    margin: 12px 0 0;
    font-size: .83rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.6;
    max-width: 78ch;
}

/* ==========================================================================
   Problems bar row — WorkflowProblemsBar.razor. Replaces the Phase-1
   deferred inline style="display:block;width:100%;padding:0;border:none;
   background:none;cursor:pointer;text-align:left;" on the row <button>.
   The stop/warn colour treatment itself already comes from MudAlert's own
   Severity.Error/Warning + Variant.Outlined styling (unchanged — no prop
   edits here); this class owns the button reset plus the hover/radius
   polish that gives each row the same bordered-card weight as .wf-pissues
   below (the mockup's equivalent "problem" treatment, ported for the
   step-editor panel Tasks 3-4 build).
   ========================================================================== */
.workflow-problem-row {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-md, 14px);
    transition: transform .15s ease;
}

.workflow-problem-row:hover {
    transform: translateY(-1px);
}

.workflow-problem-row:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: var(--radius-md, 14px);
}

.workflow-problem-row .mud-alert {
    border-radius: var(--radius-md, 14px) !important;
}

/* ==========================================================================
   Slide-over panel family — ported from the mockup's .wf-panel/.wf-pwrap/
   .wf-phead/.wf-pno/.wf-pbody/.wf-psay/.wf-pdl/.wf-pissues/.wf-pacts block
   (~3057-3086). Not wired into any component yet: this is the CSS
   foundation Tasks 3-4 build the step editor slide-over panel on top of,
   using these exact class names. The mockup's .wf-pbody is named
   .wf-panel-body here to read unambiguously next to .wf-about's card body.
   ========================================================================== */
.wf-panel {
    width: min(560px, 100%);
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0 0 0 auto;
    padding: 0;
    border: none;
    border-left: 1px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.wf-pwrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Programmatically focused on open (tansiA11y.focusAndRemember) so
       Escape works from the first keystroke — matches the outline:none
       convention already used on #wf-written-steps for the same reason. */
    outline: none;
}

.wf-phead {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.wf-pno {
    margin: 0 0 3px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.wf-phead h2 {
    margin: 0;
    font-size: 1.05rem;
}

.wf-panel-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px 20px;
}

.wf-psay {
    margin: 0 0 16px;
    font-size: .9rem;
    line-height: 1.65;
}

.wf-pdl {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.wf-pdl div {
    display: flex;
    gap: 12px;
    align-items: baseline;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding-bottom: 9px;
}

.wf-pdl div:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.wf-pdl dt {
    flex: 0 0 140px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.wf-pdl dd {
    margin: 0;
    flex: 1 1 200px;
    font-size: .86rem;
}

/* Uses color-mix() against --mud-palette-error instead of the mockup's
   hand-picked --wf-stop/--wf-stopbg hex pair (one per theme) — one rule
   instead of a rule plus a .mud-theme-dark override, and it tracks the
   theme's actual error colour automatically. */
.wf-pissues {
    margin: 0 0 15px;
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-error);
    border-radius: var(--radius-md, 14px);
    background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent);
}

.wf-pissues h3 {
    margin: 0 0 7px;
    font-size: .88rem;
    color: var(--mud-palette-error);
}

.wf-pissues ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wf-pissues li {
    font-size: .83rem;
}

.wf-pissues span {
    display: block;
    margin-top: 1px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.5;
}

.wf-pacts {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
    padding: 14px 20px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-action-default-hover);
}

.wf-pacts .mud-button-root {
    min-height: 44px;
}

/* ==========================================================================
   Form field family — ported from the mockup's .wf-f/.wf-auto/.wf-fs/
   .wf-check/.wf-brow block (~3087-3123), for the step-editor panel body
   Tasks 3-4 build. Focus rings match this file's existing 2px solid
   --mud-palette-primary convention (see .wfd-arm/.wfd-box above) rather
   than the mockup's --focus/3px — same value app.css's global
   *:focus-visible rule already uses everywhere else in the app.
   ========================================================================== */
.wf-f {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    margin: 0 0 14px;
}

.wf-f > label {
    font-size: .79rem;
    font-weight: 700;
}

.wf-f > input,
.wf-f > select,
.wf-f > textarea {
    width: 100%;
    padding: 10px 12px;
    min-height: 44px;
    font: inherit;
    font-size: .9rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--radius-md, 14px);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.wf-f textarea {
    resize: vertical;
}

.wf-f input:focus-visible,
.wf-f select:focus-visible,
.wf-f textarea:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.wf-f .help {
    margin: 0;
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.5;
}

/* Stands in for the "which one" question when the chosen kind needs no
   further answer, so the panel body never just goes blank. */
.wf-auto {
    margin: 0 0 15px;
    padding: 11px 13px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-left: 4px solid var(--mud-palette-primary);
    border-radius: var(--radius-md, 14px);
    background: var(--mud-palette-action-default-hover);
}

.wf-auto b {
    display: block;
    font-size: .85rem;
}

.wf-auto span {
    display: block;
    margin-top: 3px;
    font-size: .79rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.55;
}

.wf-fs {
    margin: 0 0 15px;
    padding: 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--radius-md, 14px);
    background: var(--mud-palette-action-default-hover);
}

.wf-fs legend {
    padding: 0 6px;
    font-size: .83rem;
    font-weight: 800;
}

.wf-check {
    display: flex;
    gap: 11px;
    padding: 10px 12px;
    margin: 0 0 9px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--radius-md, 14px);
    background: var(--mud-palette-surface);
    cursor: pointer;
}

.wf-check input {
    margin-top: 1px;
    width: 24px;
    height: 24px;
    flex: none;
    accent-color: var(--mud-palette-primary);
}

.wf-check b {
    display: block;
    font-size: .85rem;
}

.wf-check .s {
    display: block;
    margin-top: 2px;
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.5;
}

.wf-brow {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 11px;
}

@media (max-width: 640px) {
    .wf-brow {
        grid-template-columns: minmax(0, 1fr);
    }
}

.wf-brow .wf-f {
    margin: 0;
}