/* _content/Ayva.EventEngine/Components/Canvas/GhostNodesOverlay.razor.rz.scp.css */
/*
   Phase 5 Task 15 — GhostNodesOverlay styles.

   The overlay positions a small floating action bar at the top-center of
   the canvas viewport. The bar uses the glass-card background + radius-
   full pill shape so it floats naturally above the canvas content.

   The overlay container itself is pointer-events:none so clicks pass
   through to the canvas; the action-bar children re-enable pointer-
   events so the buttons remain interactive. This is the canonical
   "floating UI shouldn't block the canvas" pattern.

   All values resolve through ayva-theme.css custom properties — zero
   hardcoded colors / fonts / spacing / shadows / motion per CLAUDE.md.
*/

.ee-ghost-overlay[b-g8k1o7swhx] {
    position: absolute;
    top: var(--space-md);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none;
}

.ee-ghost-action-bar[b-g8k1o7swhx] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    backdrop-filter: var(--ee-node-blur);
    pointer-events: auto;
    box-shadow: var(--shadow-md);
}

.ee-ghost-count[b-g8k1o7swhx] {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    padding: var(--space-xs) var(--space-sm);
    font-family: var(--font-primary);
}

/* Shared button base for the three action buttons */
.ee-ghost-accept[b-g8k1o7swhx],
.ee-ghost-reject[b-g8k1o7swhx],
.ee-ghost-refine[b-g8k1o7swhx] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    transition: all var(--transition-fast);
}

.ee-ghost-accept .material-icons[b-g8k1o7swhx],
.ee-ghost-reject .material-icons[b-g8k1o7swhx],
.ee-ghost-refine .material-icons[b-g8k1o7swhx] {
    font-size: var(--text-base);
}

/* Accept = success (commit the ghosts) */
.ee-ghost-accept[b-g8k1o7swhx] {
    background: var(--success-color);
    color: white;
    border-color: transparent;
}

/* Reject = neutral muted (drop the proposal) */
.ee-ghost-reject[b-g8k1o7swhx] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Refine = accent (re-open the AI dock) */
.ee-ghost-refine[b-g8k1o7swhx] {
    background: var(--bg-secondary);
    color: var(--accent-color);
    border-color: var(--accent-color);
}

.ee-ghost-accept:hover[b-g8k1o7swhx],
.ee-ghost-reject:hover[b-g8k1o7swhx],
.ee-ghost-refine:hover[b-g8k1o7swhx] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.ee-ghost-accept:hover[b-g8k1o7swhx] {
    filter: brightness(1.1);
}

.ee-ghost-reject:hover[b-g8k1o7swhx] {
    background: var(--bg-hover);
}

.ee-ghost-refine:hover[b-g8k1o7swhx] {
    background: color-mix(in srgb, var(--accent-color) 12%, var(--bg-secondary));
}

.ee-ghost-accept:focus-visible[b-g8k1o7swhx],
.ee-ghost-reject:focus-visible[b-g8k1o7swhx],
.ee-ghost-refine:focus-visible[b-g8k1o7swhx] {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .ee-ghost-accept:hover[b-g8k1o7swhx],
    .ee-ghost-reject:hover[b-g8k1o7swhx],
    .ee-ghost-refine:hover[b-g8k1o7swhx] {
        transform: none;
    }
}

/* Mobile: stack the actions vertically when the canvas viewport is narrow.
   The pill shape relaxes into a rounded rectangle to absorb the height. */
@media (max-width: 640px) {
    .ee-ghost-action-bar[b-g8k1o7swhx] {
        flex-direction: column;
        align-items: stretch;
        border-radius: var(--radius-lg);
    }

    .ee-ghost-count[b-g8k1o7swhx] {
        text-align: center;
    }
}
/* _content/Ayva.EventEngine/Components/Canvas/WorkflowCanvas.razor.rz.scp.css */
/*
 * Phase 5 Task 8 — WorkflowCanvas scoped styles.
 *
 * Layered HTML+SVG container per spec §10.2. The dot-grid background sits
 * on the canvas root via a radial-gradient pattern keyed off
 * --ee-canvas-grid-* tokens (defined in wwwroot/assets/css/ayva-theme.css
 * by Task 1). The world layer is absolutely positioned and CSS-transformed
 * for pan/zoom — pointer-events flip from `none` on the world container to
 * `auto` on its children so the canvas root keeps receiving wheel/drag
 * events even when nodes are present.
 */

.ee-canvas-root[b-206et3blnh] {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 600px;
    overflow: hidden;
    background-color: var(--ee-canvas-bg);
    background-image: radial-gradient(
        circle,
        var(--ee-canvas-grid-color) var(--ee-canvas-grid-dot-size),
        transparent var(--ee-canvas-grid-dot-size)
    );
    background-size: var(--ee-canvas-grid-size) var(--ee-canvas-grid-size);
    background-position: var(--ee-grid-offset-x, 0) var(--ee-grid-offset-y, 0);
    cursor: default;
    outline: none;
}

.ee-canvas-root:focus-visible[b-206et3blnh] {
    box-shadow: inset 0 0 0 2px var(--accent-color);
}

/*
 * K4 — while the user is dragging a marquee-selection rectangle,
 * disable pointer-events on every node card. This makes the
 * mousemove events fall through to the canvas root regardless of
 * which child the cursor passes over, so the marquee end-coord
 * tracker stays accurate. Without this, when the cursor crosses a
 * node card mid-drag the event target switches and the rubber-band
 * coords would jump (the original cause of the K4 bug).
 *
 * The class is toggled by the canvas component when _isBoxSelecting
 * is true. Because this is scoped CSS, the selector applies only
 * within the canvas's render tree.
 */
.ee-canvas-root.ee-marquee-active[b-206et3blnh]  .ee-node {
    pointer-events: none;
}

.ee-canvas-world[b-206et3blnh] {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    pointer-events: none;
}

.ee-canvas-world > *[b-206et3blnh] {
    pointer-events: auto;
}

.ee-edge-layer[b-206et3blnh] {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: visible;
}

.ee-node-layer[b-206et3blnh] {
    position: relative;
    pointer-events: auto;
}

/* ─── Edges (Task 10) ───────────────────────────────────────────────── */
/*
 * These styles live in WorkflowCanvas.razor.css (not a separate
 * WorkflowEdgeSvg.razor.css) because Blazor scoped-CSS attaches its
 * `b-` attribute selector to the OWNING component — the canvas owns
 * the <svg class="ee-edge-layer"> that hosts every edge as a direct
 * <g> child, so styles applying to the SVG's children cascade cleanly
 * from this file. A WorkflowEdgeSvg.razor.css would attribute-scope
 * the styles to the <g> wrapper, making it harder to target the inner
 * <path> elements correctly.
 */
.ee-edge-line[b-206et3blnh] {
    transition: stroke-width var(--transition-fast),
                filter var(--transition-fast);
    pointer-events: none;
}

/* Audit issue #24 — edges were nearly invisible on hover, making it
   unclear they're clickable. Hover via the wider .ee-edge-hit-target
   thickens the visible stroke + adds a subtle accent glow so the user
   sees the edge respond before clicking. */
.ee-edge:hover .ee-edge-line[b-206et3blnh] {
    stroke-width: calc(var(--ee-edge-stroke-width) + 1.5px);
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent-color) 60%, transparent));
}

.ee-edge-selected .ee-edge-line[b-206et3blnh] {
    stroke-width: calc(var(--ee-edge-stroke-width) + 1px);
    filter: drop-shadow(0 0 4px var(--accent-color));
}

.ee-edge-hit-target[b-206et3blnh] {
    cursor: pointer;
}

/* ─── Rubber-band box-select (Task 13) ─────────────────────────────── */
/*
 * Drawn in screen space (above the world transform) so the four
 * corners ignore the canvas's pan/zoom — matches the user's mental
 * model of "I'm drawing a screen rectangle, not a world rectangle".
 * pointer-events:none keeps the overlay out of the click path so the
 * mouse-up that finalizes the selection still reaches the canvas root.
 */
.ee-canvas-rubber-band[b-206et3blnh] {
    position: absolute;
    background: var(--accent-color-10);
    border: 1px dashed var(--accent-color);
    border-radius: var(--radius-xs, 2px);
    pointer-events: none;
    z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
    /*
     * Disabling SMIL <animateMotion> via CSS is non-trivial because the
     * spec lets agents handle reduced-motion at their own discretion.
     * `display: none` on the animation element reliably halts the
     * motion in Chrome/Firefox/Safari — the dot stays at the path's
     * starting point until the user re-enables motion.
     */
    .ee-edge-flow-dot animateMotion[b-206et3blnh] {
        display: none;
    }
}
/* _content/Ayva.EventEngine/Components/Canvas/WorkflowNodeCard.razor.rz.scp.css */
/*
 * Phase 5 Task 9 — WorkflowNodeCard scoped styles.
 *
 * Glass node card per spec §10.3 + §10.6. All values reference the
 * `--ee-*` design tokens (defined by Task 1 in
 * wwwroot/assets/css/ayva-theme.css) plus the base `--*` token system.
 * The single hardcoded value is `#8b5cf6` — the secondary indigo accent
 * used in the AI-variant header gradient (also already pinned in the
 * theme as `--ee-accent-gradient`).
 *
 * The card is `position: absolute` so the parent
 * `.ee-node-layer` (Task 8 canvas root) places it via the
 * `left/top/width` set on the inline style. The world transform on the
 * canvas-world layer takes care of pan/zoom, so this component does
 * NOT apply any transforms of its own (selected/hover translateY is
 * the only exception).
 *
 * State precedence (CSS-side):
 *   ee-node-selected  > ee-node-executing > ee-node-hovered > ee-node-{status}
 * The Razor projection enforces the same order via StateClass — these
 * rules just style each individual class so the `IsSelected` override
 * works regardless of which Status was set on the model.
 */

/* ─── Card root ──────────────────────────────────────── */
.ee-node[b-0swetlgnm5] {
    position: absolute;
    background: var(--ee-node-bg);
    border: 1px solid var(--ee-node-border);
    border-radius: var(--ee-node-radius);
    backdrop-filter: var(--ee-node-blur);
    box-shadow: var(--ee-node-shadow);
    cursor: grab;
    user-select: none;
    transition: box-shadow var(--transition-fast),
                border-color var(--transition-fast),
                transform var(--transition-fast);
    /* G1: must stay `visible` — port circles use
       `left: calc(0px - var(--ee-port-size) / 2)` (and the mirror on
       the right edge) to intentionally protrude ~7px past the card's
       border. `overflow: hidden` here clips them to half-circles, which
       hides the click target. Header/body/footer text still ellipsises
       via its own white-space:nowrap + text-overflow:ellipsis. */
    overflow: visible;
    outline: none;
}

/* K3 — when the user is actively holding-and-dragging a node, the
   browser-applied :active state flips the cursor to `grabbing`. This
   is purely visual feedback; the actual drag state lives on the
   canvas and persists across pointer entry into sibling elements. */
.ee-node:active[b-0swetlgnm5] {
    cursor: grabbing;
}

.ee-node:focus-visible[b-0swetlgnm5] {
    box-shadow: 0 0 0 2px var(--accent-color), var(--ee-node-shadow);
}

/* The 3px module-color stripe down the left edge — driven by
   --ee-node-accent (set on the host element via inline style for
   per-node color overrides, or by the variant rules below).
   N4 fix — match the card's left-edge corner radius so the stripe
   doesn't poke past the rounded card corners. The right edge of the
   stripe stays square because it abuts the card body. */
.ee-node-stripe[b-0swetlgnm5] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--ee-node-stripe);
    background: var(--ee-node-accent);
    border-top-left-radius: var(--ee-node-radius);
    border-bottom-left-radius: var(--ee-node-radius);
}

/* ─── Header ─────────────────────────────────────────── */
.ee-node-header[b-0swetlgnm5] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    /* Pad the left side past the stripe so content doesn't crash into it. */
    padding-left: calc(var(--space-md) + var(--ee-node-stripe));
    border-bottom: 1px solid var(--border-color);
    height: 2.75rem;
}

.ee-node-icon[b-0swetlgnm5] {
    color: var(--ee-node-accent);
    font-size: 18px;
}

.ee-node-title[b-0swetlgnm5] {
    flex: 1;
    color: var(--text-primary);
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: text;
}

/* Inline rename input — swaps in for .ee-node-title on double-click. Sized
   to match the static title (.ee-node-title) so the swap doesn't reflow
   the header row. */
.ee-node-title-edit[b-0swetlgnm5] {
    flex: 1;
    color: var(--text-primary);
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--accent-color);
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}

/* Per-node test-run play button. Sits in the header right-slot alongside
   the status icons. Rendered for Action / Ai nodes only — Trigger fires
   from real events, Logic / Delay / Comment have no executable side. */
.ee-node-test-btn[b-0swetlgnm5] {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    padding: 2px 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: color var(--transition-fast),
                border-color var(--transition-fast),
                background var(--transition-fast);
    margin-left: var(--space-xs);
    flex-shrink: 0;
}

.ee-node-test-btn:hover[b-0swetlgnm5] {
    color: var(--accent-color);
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
}

.ee-node-test-btn .material-icons[b-0swetlgnm5] {
    font-size: 16px;
}

/* Status icons in the header right slot. */
.ee-node-status-icon[b-0swetlgnm5] {
    font-size: 18px;
    color: var(--ee-state-succeeded);
}

.ee-node-failed .ee-node-status-icon[b-0swetlgnm5] {
    color: var(--ee-state-failed);
}

/* Pulse dot — visible while executing. The animation pairs with
   --ee-pulse-duration so the timing is consistent with the
   ee-node-executing border-glow animation. */
.ee-node-pulse-dot[b-0swetlgnm5] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ee-state-executing);
    animation: ee-node-pulse-kf-b-0swetlgnm5 var(--ee-pulse-duration) ease-in-out infinite;
    box-shadow: 0 0 0 0 var(--ee-state-executing);
}

@keyframes ee-node-pulse-kf-b-0swetlgnm5 {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--ee-state-executing) 40%, transparent);
    }
    50% {
        box-shadow: 0 0 0 6px color-mix(in srgb, var(--ee-state-executing) 0%, transparent);
    }
}

/* ─── Body ───────────────────────────────────────────── */
.ee-node-body[b-0swetlgnm5] {
    padding: var(--space-sm) var(--space-md);
    padding-left: calc(var(--space-md) + var(--ee-node-stripe));
}

.ee-node-description[b-0swetlgnm5] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    line-height: 1.4;
}

/* ─── Ports ──────────────────────────────────────────── */
/* K2 — ports are direct children of `.ee-node` (not nested in a
   footer). Each `.ee-port` is `position: absolute` and the card
   itself is `position: absolute` (from the canvas-world placement),
   so the port's `top: calc(50% - port/2)` centers vertically against
   the FULL card height — vs. previously centering inside a 1rem-tall
   footer pinned at the bottom.

   N5b fix — Twilio Studio-style ring-with-inner-dot port marker. The
   port is now a hollow ring (background = card color, 2px colored
   border) with a smaller filled inner dot (::after pseudo-element).
   That gives a clearer "snap target" affordance: the dot reads as
   "you're connecting here" while the ring reads as the port boundary.
   Hover/drag-target states amplify the ring + scale up. */
.ee-port[b-0swetlgnm5] {
    position: absolute;
    width: var(--ee-port-size);
    height: var(--ee-port-size);
    border-radius: 50%;
    /* The ring itself: hollow center + colored border. */
    background: var(--bg-card);
    border: 2px solid currentColor;
    cursor: crosshair;
    box-sizing: border-box;
    transition: transform var(--transition-bounce),
                box-shadow var(--transition-fast),
                background var(--transition-fast);
}

/* Inner dot — fills 50% of the port for the "snap target" look. */
.ee-port[b-0swetlgnm5]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: width var(--transition-fast),
                height var(--transition-fast);
}

/* Expanded hit-target so dragging an edge from a port doesn't require
   pixel-perfect cursor positioning. Per spec §10.3 ports are 14px but
   target-size is 24px. */
.ee-port[b-0swetlgnm5]::before {
    content: "";
    position: absolute;
    inset: -5px;
}

/* When the user hovers anywhere on the node card, halo every port so
   the connection affordance is discoverable (audit issue #20 — ports
   were too easy to miss before). The halo is a soft 4px ring keyed
   off the port's own color so success/failure/branch ports retain
   their semantic tint. */
.ee-node:hover .ee-port[b-0swetlgnm5] {
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 32%, transparent);
}

.ee-port:hover[b-0swetlgnm5] {
    transform: scale(1.35);
    /* Stronger pulse on direct hover so the user knows this is the
       targeted port — the inner dot grows + the halo brightens. */
    box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 45%, transparent);
}

.ee-port:hover[b-0swetlgnm5]::after {
    /* Inner dot expands to fill more of the ring — emphasizes the
       "active target" state. */
    width: 65%;
    height: 65%;
}

/* Each port-color rule sets `color` so the ring border, inner dot,
   and node-hover halo all key off currentColor without restating
   each tint. */
.ee-port-success[b-0swetlgnm5] { color: var(--ee-edge-success); }
.ee-port-failure[b-0swetlgnm5] { color: var(--ee-edge-failure); }
.ee-port-branch-yes[b-0swetlgnm5] { color: var(--ee-edge-branch-yes); }
.ee-port-branch-no[b-0swetlgnm5] { color: var(--ee-edge-branch-no); }
.ee-port-generic[b-0swetlgnm5] { color: var(--ee-edge-generic); }

.ee-port-input[b-0swetlgnm5] {
    left: calc(0px - var(--ee-port-size) / 2);
    top: calc(50% - var(--ee-port-size) / 2);
}

.ee-port-output[b-0swetlgnm5] {
    right: calc(0px - var(--ee-port-size) / 2);
    top: calc(50% - var(--ee-port-size) / 2);
}

/* (port background+color rules consolidated above with the node-hover halo) */

/* ─── Variants (per Node.Kind) ───────────────────────── */
/* Trigger — amber accent. */
.ee-node-trigger[b-0swetlgnm5] {
    --ee-node-accent: var(--warning-color);
}

/* Action — uses whatever --ee-node-accent inherits from the cascade
   (default is --accent-color from the theme; per-node color overrides
   bind via inline style on the host element). */
.ee-node-action[b-0swetlgnm5] {
    /* No-op — relies on the inherited --ee-node-accent. */
}

/* AI — wider card per spec §10.3, gradient header (indigo → purple). */
.ee-node-ai[b-0swetlgnm5] {
    width: var(--ee-node-width-ai);
}

.ee-node-ai .ee-node-header[b-0swetlgnm5] {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--accent-color) 18%, transparent),
        color-mix(in srgb, #8b5cf6 18%, transparent)
    );
}

/* Logic / Delay — info-color accent. */
.ee-node-logic[b-0swetlgnm5] {
    --ee-node-accent: var(--info-color);
}

.ee-node-delay[b-0swetlgnm5] {
    --ee-node-accent: var(--info-color);
}

/* Comment — amber-tinted body, no stripe. */
.ee-node-comment[b-0swetlgnm5] {
    background: color-mix(in srgb, var(--warning-color) 10%, var(--bg-card));
    border-color: color-mix(in srgb, var(--warning-color) 30%, var(--border-color));
}

.ee-node-comment .ee-node-stripe[b-0swetlgnm5] {
    display: none;
}

/* ─── States ─────────────────────────────────────────── */
.ee-node-idle[b-0swetlgnm5] {
    /* No-op — relies on the base .ee-node block. */
}

.ee-node-hovered[b-0swetlgnm5] {
    border-color: var(--ee-state-hover);
    transform: translateY(-1px);
}

.ee-node-selected[b-0swetlgnm5] {
    border-color: var(--ee-state-selected);
    box-shadow: 0 0 0 2px var(--ee-state-selected), var(--ee-node-shadow);
}

.ee-node-executing[b-0swetlgnm5] {
    border-color: var(--ee-state-executing);
    animation: ee-node-execute-glow-b-0swetlgnm5 var(--ee-pulse-duration) ease-in-out infinite;
}

@keyframes ee-node-execute-glow-b-0swetlgnm5 {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--ee-state-executing) 40%, transparent);
    }
    50% {
        box-shadow: 0 0 0 8px color-mix(in srgb, var(--ee-state-executing) 0%, transparent);
    }
}

.ee-node-succeeded[b-0swetlgnm5] {
    border-color: var(--ee-state-succeeded);
}

.ee-node-failed[b-0swetlgnm5] {
    border-color: var(--ee-state-failed);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ee-state-failed) 40%, transparent),
                var(--ee-node-shadow);
}

.ee-node-skipped[b-0swetlgnm5] {
    filter: grayscale(1);
    opacity: 0.4;
}

.ee-node-ghost[b-0swetlgnm5] {
    border-style: dashed;
    border-color: var(--ee-state-ghost);
    opacity: 0.6;
    animation: ee-node-ghost-shimmer-kf-b-0swetlgnm5 var(--ee-ghost-shimmer-duration) ease-in-out infinite;
}

@keyframes ee-node-ghost-shimmer-kf-b-0swetlgnm5 {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.75; }
}

/* ─── Recently-changed (post-AI-edit) ──────────────────
   Transient highlight: ~2.6s of pulsing accent-color glow that fades
   to nothing. The parent designer flips the IsRecentlyChanged flag
   off after 3s, so the run-once animation completes naturally just
   before the class disappears. Layered ON TOP of state classes —
   selecting, executing, succeeded, etc. all keep their styling and
   the AI-touched node still pulses. */
.ee-node-recently-changed[b-0swetlgnm5] {
    animation: ee-node-recently-changed-kf-b-0swetlgnm5 2.6s ease-out 1;
    /* layer on top of any state border without overriding it */
    z-index: var(--z-canvas-node, 1);
}

@keyframes ee-node-recently-changed-kf-b-0swetlgnm5 {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-color) 70%, transparent),
                    var(--ee-node-shadow);
        outline: 2px solid color-mix(in srgb, var(--accent-color) 80%, transparent);
        outline-offset: 2px;
    }
    35% {
        box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent-color) 0%, transparent),
                    var(--ee-node-shadow);
        outline: 2px solid color-mix(in srgb, var(--accent-color) 60%, transparent);
        outline-offset: 4px;
    }
    70% {
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 25%, transparent),
                    var(--ee-node-shadow);
        outline: 2px solid color-mix(in srgb, var(--accent-color) 30%, transparent);
        outline-offset: 3px;
    }
    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-color) 0%, transparent),
                    var(--ee-node-shadow);
        outline: 2px solid color-mix(in srgb, var(--accent-color) 0%, transparent);
        outline-offset: 2px;
    }
}

/* ─── Reduced-motion fallback ────────────────────────── */
/* Disable pulse, execute-glow, and ghost-shimmer animations for users
   with prefers-reduced-motion set. Border colors and static styling
   stay so the state is still readable. The recently-changed accent
   outline still appears on the first frame (so the user sees WHICH
   nodes changed) but the keyframed glow is suppressed. */
@media (prefers-reduced-motion: reduce) {
    .ee-node-pulse-dot[b-0swetlgnm5],
    .ee-node-executing[b-0swetlgnm5],
    .ee-node-ghost[b-0swetlgnm5] {
        animation: none;
    }
    .ee-node-recently-changed[b-0swetlgnm5] {
        animation: none;
        outline: 2px solid color-mix(in srgb, var(--accent-color) 60%, transparent);
        outline-offset: 3px;
    }
}
/* _content/Ayva.EventEngine/Components/Common/AvailabilityDot.razor.rz.scp.css */
/*
    Phase 5 Task 7 — AvailabilityDot scoped styles.

    Every value references an ayva-theme token (var(--…)) per
    docs/UI_DESIGN.md. The .ee-avail-* selectors are component-scoped
    by Blazor CSS isolation; the colors derive from the centralized
    --success-color / --warning-color / --text-muted tokens.
*/

.ee-avail-dot[b-btfi9wau7d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
}

.ee-avail-glow[b-btfi9wau7d] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--bg-base);
    transition: box-shadow var(--transition-fast);
}

/* Available — green with subtle pulse */
.ee-avail-available .ee-avail-glow[b-btfi9wau7d] {
    background: var(--success-color);
    box-shadow:
        0 0 0 2px var(--bg-base),
        0 0 8px var(--success-color);
}

/* Suspended — amber, signals waiting-for-module */
.ee-avail-suspended .ee-avail-glow[b-btfi9wau7d] {
    background: var(--warning-color);
    box-shadow:
        0 0 0 2px var(--bg-base),
        0 0 8px var(--warning-color);
}

/* Disabled — gray, no glow */
.ee-avail-disabled .ee-avail-glow[b-btfi9wau7d] {
    background: var(--text-muted);
    box-shadow: 0 0 0 2px var(--bg-base);
}
/* _content/Ayva.EventEngine/Components/Common/StatCard.razor.rz.scp.css */
/*
    Phase 5 Task 7 — StatCard scoped styles.

    Glass card with severity-driven left accent stripe + icon tint.
    Every value references an ayva-theme token.
*/

.ee-statcard[b-m9doqwkl6y] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    backdrop-filter: var(--ee-node-blur);
    border-left-width: 3px;
    transition: all var(--transition-fast);
}

.ee-statcard-clickable[b-m9doqwkl6y] {
    cursor: pointer;
}

.ee-statcard-clickable:hover[b-m9doqwkl6y] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* Severity left-stripe + icon color */
.ee-statcard-info[b-m9doqwkl6y]       { border-left-color: var(--info-color); }
.ee-statcard-info .ee-statcard-icon[b-m9doqwkl6y] { color: var(--info-text); }

.ee-statcard-success[b-m9doqwkl6y]    { border-left-color: var(--success-color); }
.ee-statcard-success .ee-statcard-icon[b-m9doqwkl6y] { color: var(--success-text); }

.ee-statcard-warning[b-m9doqwkl6y]    { border-left-color: var(--warning-color); }
.ee-statcard-warning .ee-statcard-icon[b-m9doqwkl6y] { color: var(--warning-text); }

.ee-statcard-error[b-m9doqwkl6y]      { border-left-color: var(--error-color); }
.ee-statcard-error .ee-statcard-icon[b-m9doqwkl6y] { color: var(--error-text); }

.ee-statcard-muted[b-m9doqwkl6y]      { border-left-color: var(--text-muted); }
.ee-statcard-muted .ee-statcard-icon[b-m9doqwkl6y] { color: var(--text-muted); }

.ee-statcard-icon[b-m9doqwkl6y] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    background: var(--bg-overlay-dark);
}

.ee-statcard-text[b-m9doqwkl6y] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ee-statcard-label[b-m9doqwkl6y] {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ee-statcard-value[b-m9doqwkl6y] {
    font-family: var(--font-primary);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    line-height: 1.2;
}
/* _content/Ayva.EventEngine/Components/Confirmations/PendingApprovalsPanel.razor.rz.scp.css */
/* Phase 5 Task 22 — PendingApprovalsPanel scoped styles.

   Glass-table operator surface for the Phase 4 Task 9 confirmation flow.
   Mirrors the DeadLettersList layout so operators get a consistent
   triage grid across pending-approval + dead-letter pages. Every value
   resolves to a var(--…) token from wwwroot/assets/css/ayva-theme.css
   per the project's no-hardcoded-styles rule. */

.ee-approvals[b-ijplbw3kqo] {
    padding: var(--space-lg);
    height: 100%;
    overflow-y: auto;
    color: var(--text-primary);
    font-family: var(--font-primary);
}

/* Header + filter row */

.ee-approvals-header[b-ijplbw3kqo] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
    gap: var(--space-md);
}

.ee-approvals-header h1[b-ijplbw3kqo] {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0;
}

.ee-approvals-filters[b-ijplbw3kqo] {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    align-items: flex-end;
}

.ee-filter-group[b-ijplbw3kqo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.ee-filter-group label[b-ijplbw3kqo] {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ee-filter-group input[b-ijplbw3kqo] {
    padding: var(--space-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    min-width: 14rem;
}

.ee-filter-group input:focus[b-ijplbw3kqo] {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-color-25);
}

.ee-filter-apply[b-ijplbw3kqo] {
    padding: var(--space-sm) var(--space-md);
    background: var(--accent-gradient);
    color: var(--text-primary);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ee-filter-apply:hover:not(:disabled)[b-ijplbw3kqo] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.ee-filter-apply:disabled[b-ijplbw3kqo] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Loading / error / empty states */

.ee-approvals-loading[b-ijplbw3kqo],
.ee-approvals-error[b-ijplbw3kqo],
.ee-approvals-empty[b-ijplbw3kqo] {
    text-align: center;
    padding: var(--space-2xl);
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.ee-approvals-empty .material-icons[b-ijplbw3kqo] {
    font-size: 4rem;
    color: var(--text-muted);
}

.ee-approvals-empty h3[b-ijplbw3kqo] {
    color: var(--text-primary);
    font-size: var(--text-xl);
    margin: 0;
}

.ee-approvals-empty p[b-ijplbw3kqo] {
    color: var(--text-secondary);
    margin: 0;
    max-width: 32rem;
}

.ee-approvals-error .material-icons[b-ijplbw3kqo] {
    color: var(--error-color);
    font-size: 2.5rem;
}

.ee-approvals-error button[b-ijplbw3kqo] {
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--font-primary);
    transition: all var(--transition-fast);
}

.ee-approvals-error button:hover[b-ijplbw3kqo] {
    background: var(--bg-hover);
}

/* Action banners — error (above the table) + success flash. */

.ee-action-error[b-ijplbw3kqo] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--error-bg);
    color: var(--error-color);
    border: 1px solid var(--error-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    font-size: var(--text-sm);
    backdrop-filter: var(--ee-node-blur);
}

.ee-action-error-text[b-ijplbw3kqo] {
    flex: 1;
}

.ee-action-error-close[b-ijplbw3kqo] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    transition: background var(--transition-fast);
}

.ee-action-error-close:hover[b-ijplbw3kqo] {
    background: var(--bg-hover);
}

.ee-approvals-flash[b-ijplbw3kqo] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--success-bg);
    color: var(--success-color);
    border: 1px solid var(--success-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    font-size: var(--text-sm);
    animation: ee-approvals-flash-fade-b-ijplbw3kqo var(--transition-base) ease-out;
}

@keyframes ee-approvals-flash-fade-b-ijplbw3kqo {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ee-approvals-flash-text[b-ijplbw3kqo] {
    flex: 1;
    font-weight: var(--font-medium);
}

/* Glass table */

.ee-approvals-table[b-ijplbw3kqo] {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    backdrop-filter: var(--ee-node-blur);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.ee-approvals-table thead[b-ijplbw3kqo] {
    background: var(--bg-secondary);
}

.ee-approvals-table th[b-ijplbw3kqo],
.ee-approvals-table td[b-ijplbw3kqo] {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: var(--text-sm);
    vertical-align: middle;
}

.ee-approvals-table th[b-ijplbw3kqo] {
    color: var(--text-secondary);
    font-weight: var(--font-semibold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ee-col-actions[b-ijplbw3kqo] {
    width: 7rem;
    text-align: right;
}

.ee-approvals-table tbody tr[b-ijplbw3kqo] {
    transition: background var(--transition-fast);
}

.ee-approvals-table tbody tr:hover[b-ijplbw3kqo] {
    background: var(--bg-hover);
}

.ee-approvals-table tbody tr:last-child td[b-ijplbw3kqo] {
    border-bottom: none;
}

.ee-approvals-table code[b-ijplbw3kqo] {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    background: var(--bg-secondary);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
}

.ee-approvals-toolkey[b-ijplbw3kqo] {
    color: var(--accent-color) !important;
}

.ee-approvals-node[b-ijplbw3kqo],
.ee-approvals-notify[b-ijplbw3kqo] {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    margin-top: 0.125rem;
}

.ee-approvals-table tbody td a[b-ijplbw3kqo] {
    color: var(--accent-color);
    text-decoration: none;
}

.ee-approvals-table tbody td a:hover[b-ijplbw3kqo] {
    text-decoration: underline;
}

/* Per-row action buttons */

.ee-approvals-approve[b-ijplbw3kqo],
.ee-approvals-deny[b-ijplbw3kqo] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    margin-left: var(--space-xs);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
}

.ee-approvals-approve[b-ijplbw3kqo] {
    color: var(--success-color);
}

.ee-approvals-approve:hover:not(:disabled)[b-ijplbw3kqo] {
    background: var(--success-bg);
    border-color: var(--success-color);
}

.ee-approvals-deny[b-ijplbw3kqo] {
    color: var(--error-color);
}

.ee-approvals-deny:hover:not(:disabled)[b-ijplbw3kqo] {
    background: var(--error-bg);
    border-color: var(--error-color);
}

.ee-approvals-approve:disabled[b-ijplbw3kqo],
.ee-approvals-deny:disabled[b-ijplbw3kqo] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Justification modal */

.ee-approvals-modal-backdrop[b-ijplbw3kqo] {
    position: fixed;
    inset: 0;
    background: var(--dialog-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: var(--ee-node-blur);
}

.ee-approvals-modal[b-ijplbw3kqo] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    width: min(32rem, 90vw);
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    backdrop-filter: var(--ee-node-blur);
}

.ee-approvals-modal h3[b-ijplbw3kqo] {
    margin: 0 0 var(--space-md) 0;
    color: var(--text-primary);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
}

.ee-approvals-modal-meta[b-ijplbw3kqo] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-xs) var(--space-md);
    margin-bottom: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

.ee-approvals-modal-meta dt[b-ijplbw3kqo] {
    color: var(--text-secondary);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    font-size: var(--text-xs);
    letter-spacing: 0.03em;
}

.ee-approvals-modal-meta dd[b-ijplbw3kqo] {
    margin: 0;
    color: var(--text-primary);
}

.ee-approvals-modal label[b-ijplbw3kqo] {
    display: block;
    color: var(--text-secondary);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    font-size: var(--text-xs);
    letter-spacing: 0.03em;
    margin-bottom: var(--space-xs);
}

.ee-approvals-modal textarea[b-ijplbw3kqo] {
    width: 100%;
    padding: var(--space-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    resize: vertical;
    min-height: 5rem;
}

.ee-approvals-modal textarea:focus[b-ijplbw3kqo] {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-color-25);
}

.ee-approvals-modal-counter[b-ijplbw3kqo] {
    text-align: right;
    color: var(--text-muted);
    font-size: var(--text-xs);
    margin-top: var(--space-xs);
}

.ee-approvals-modal-error[b-ijplbw3kqo] {
    color: var(--error-color);
    font-size: var(--text-sm);
    margin-top: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: var(--error-bg);
    border: 1px solid var(--error-color);
    border-radius: var(--radius-sm);
}

.ee-approvals-modal-actions[b-ijplbw3kqo] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.ee-approvals-modal-cancel[b-ijplbw3kqo],
.ee-approvals-modal-confirm[b-ijplbw3kqo],
.ee-approvals-modal-confirm-deny[b-ijplbw3kqo] {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    transition: all var(--transition-fast);
    border: 1px solid var(--border-color);
}

.ee-approvals-modal-cancel[b-ijplbw3kqo] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.ee-approvals-modal-confirm[b-ijplbw3kqo] {
    background: var(--accent-gradient);
    color: var(--text-primary);
    border-color: transparent;
}

.ee-approvals-modal-confirm-deny[b-ijplbw3kqo] {
    background: var(--error-bg);
    color: var(--error-color);
    border-color: var(--error-color);
}

.ee-approvals-modal-cancel:hover:not(:disabled)[b-ijplbw3kqo],
.ee-approvals-modal-confirm:hover:not(:disabled)[b-ijplbw3kqo],
.ee-approvals-modal-confirm-deny:hover:not(:disabled)[b-ijplbw3kqo] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.ee-approvals-modal-cancel:disabled[b-ijplbw3kqo],
.ee-approvals-modal-confirm:disabled[b-ijplbw3kqo],
.ee-approvals-modal-confirm-deny:disabled[b-ijplbw3kqo] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Responsive — collapse the filter row + scale the table down on
   narrow viewports. */
@media (max-width: 768px) {
    .ee-approvals-filters[b-ijplbw3kqo] {
        width: 100%;
    }

    .ee-filter-group input[b-ijplbw3kqo] {
        min-width: 8rem;
    }

    .ee-col-actions[b-ijplbw3kqo] {
        width: auto;
    }
}

@media (max-width: 640px) {
    .ee-approvals[b-ijplbw3kqo] {
        padding: var(--space-md);
    }

    .ee-approvals-table th[b-ijplbw3kqo],
    .ee-approvals-table td[b-ijplbw3kqo] {
        padding: var(--space-xs) var(--space-sm);
    }
}
/* _content/Ayva.EventEngine/Components/DeadLetter/DeadLettersList.razor.rz.scp.css */
/* Phase 5 Task 18 — DeadLettersList scoped styles.

   Glass-table dead-letter triage surface. Every value resolves to a
   var(--…) token from wwwroot/assets/css/ayva-theme.css per the
   project's no-hardcoded-styles rule. */

.ee-dead-letters[b-3h1nydm9qx] {
    padding: var(--space-lg);
    height: 100%;
    overflow-y: auto;
    color: var(--text-primary);
    font-family: var(--font-primary);
}

/* Header + filter row */

.ee-dead-letters-header[b-3h1nydm9qx] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
    gap: var(--space-md);
}

.ee-dead-letters-header h1[b-3h1nydm9qx] {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0;
}

.ee-dead-letters-filters[b-3h1nydm9qx] {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    align-items: flex-end;
}

.ee-filter-group[b-3h1nydm9qx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.ee-filter-group label[b-3h1nydm9qx] {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ee-filter-group select[b-3h1nydm9qx],
.ee-filter-group input[b-3h1nydm9qx] {
    padding: var(--space-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    min-width: 10rem;
}

.ee-filter-group select:focus[b-3h1nydm9qx],
.ee-filter-group input:focus[b-3h1nydm9qx] {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-color-25);
}

.ee-filter-apply[b-3h1nydm9qx] {
    padding: var(--space-sm) var(--space-md);
    background: var(--accent-gradient);
    color: var(--text-primary);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ee-filter-apply:hover:not(:disabled)[b-3h1nydm9qx] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.ee-filter-apply:disabled[b-3h1nydm9qx] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Loading / error / empty states */

.ee-dead-letters-loading[b-3h1nydm9qx],
.ee-dead-letters-error[b-3h1nydm9qx],
.ee-dead-letters-empty[b-3h1nydm9qx] {
    text-align: center;
    padding: var(--space-2xl);
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.ee-dead-letters-empty .material-icons[b-3h1nydm9qx] {
    font-size: 4rem;
    color: var(--text-muted);
}

.ee-dead-letters-empty h3[b-3h1nydm9qx] {
    color: var(--text-primary);
    font-size: var(--text-xl);
    margin: 0;
}

.ee-dead-letters-empty p[b-3h1nydm9qx] {
    color: var(--text-secondary);
    margin: 0;
    max-width: 32rem;
}

.ee-dead-letters-error .material-icons[b-3h1nydm9qx] {
    color: var(--error-color);
    font-size: 2.5rem;
}

.ee-dead-letters-error button[b-3h1nydm9qx] {
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--font-primary);
    transition: all var(--transition-fast);
}

.ee-dead-letters-error button:hover[b-3h1nydm9qx] {
    background: var(--bg-hover);
}

/* Bulk-action toolbar */

.ee-dead-letters-bulk-bar[b-3h1nydm9qx] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    backdrop-filter: var(--ee-node-blur);
}

.ee-bulk-count[b-3h1nydm9qx] {
    color: var(--text-primary);
    font-weight: var(--font-medium);
    flex: 1;
}

.ee-bulk-progress[b-3h1nydm9qx] {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.ee-bulk-retry[b-3h1nydm9qx],
.ee-bulk-dismiss[b-3h1nydm9qx],
.ee-bulk-clear[b-3h1nydm9qx] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    transition: all var(--transition-fast);
}

.ee-bulk-retry[b-3h1nydm9qx] {
    background: var(--accent-gradient);
    color: var(--text-primary);
    border-color: transparent;
}

.ee-bulk-dismiss[b-3h1nydm9qx] {
    background: var(--error-bg);
    color: var(--error-color);
    border-color: var(--error-color);
}

.ee-bulk-clear[b-3h1nydm9qx] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.ee-bulk-retry:hover:not(:disabled)[b-3h1nydm9qx],
.ee-bulk-dismiss:hover:not(:disabled)[b-3h1nydm9qx],
.ee-bulk-clear:hover:not(:disabled)[b-3h1nydm9qx] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.ee-bulk-retry:disabled[b-3h1nydm9qx],
.ee-bulk-dismiss:disabled[b-3h1nydm9qx],
.ee-bulk-clear:disabled[b-3h1nydm9qx] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Action / bulk-result banners — render above the table when a per-row
   resolve fails (action) or when a bulk batch finished with non-zero
   failures (bulk-result). Both are dismissable via the small × button
   on the right edge. */

.ee-action-error[b-3h1nydm9qx],
.ee-bulk-result[b-3h1nydm9qx] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    font-size: var(--text-sm);
    backdrop-filter: var(--ee-node-blur);
}

.ee-action-error[b-3h1nydm9qx] {
    background: var(--error-bg);
    color: var(--error-color);
    border: 1px solid var(--error-color);
}

.ee-bulk-result[b-3h1nydm9qx] {
    background: var(--warning-bg);
    color: var(--warning-color);
    border: 1px solid var(--warning-color);
}

.ee-action-error-text[b-3h1nydm9qx],
.ee-bulk-result-text[b-3h1nydm9qx] {
    flex: 1;
}

.ee-action-error-close[b-3h1nydm9qx],
.ee-bulk-result-close[b-3h1nydm9qx] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    transition: background var(--transition-fast);
}

.ee-action-error-close:hover[b-3h1nydm9qx],
.ee-bulk-result-close:hover[b-3h1nydm9qx] {
    background: var(--bg-hover);
}

/* Glass table */

.ee-dead-letters-table[b-3h1nydm9qx] {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    backdrop-filter: var(--ee-node-blur);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.ee-dead-letters-table thead[b-3h1nydm9qx] {
    background: var(--bg-secondary);
}

.ee-dead-letters-table th[b-3h1nydm9qx],
.ee-dead-letters-table td[b-3h1nydm9qx] {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: var(--text-sm);
    vertical-align: middle;
}

.ee-dead-letters-table th[b-3h1nydm9qx] {
    color: var(--text-secondary);
    font-weight: var(--font-semibold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ee-col-select[b-3h1nydm9qx] {
    width: 2.5rem;
    text-align: center;
}

.ee-col-actions[b-3h1nydm9qx] {
    width: 9rem;
}

.ee-dead-letters-table tbody tr[b-3h1nydm9qx] {
    transition: background var(--transition-fast);
}

.ee-dead-letters-table tbody tr:hover[b-3h1nydm9qx] {
    background: var(--bg-hover);
}

.ee-dead-letters-table tbody tr:last-child td[b-3h1nydm9qx] {
    border-bottom: none;
}

/* Resolved-row dimming — visual signal that the row can't be re-actioned. */
.ee-row-resolved[b-3h1nydm9qx] {
    opacity: 0.5;
}

.ee-na[b-3h1nydm9qx] {
    color: var(--text-muted);
}

.ee-error-message[b-3h1nydm9qx] {
    color: var(--error-color);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: 24rem;
}

/* Status pills */

.ee-status-resolved[b-3h1nydm9qx] {
    background: var(--success-bg);
    color: var(--success-color);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}

.ee-status-pending[b-3h1nydm9qx] {
    background: var(--warning-bg);
    color: var(--warning-color);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}

/* Per-row action cell */

.ee-col-actions button[b-3h1nydm9qx],
.ee-col-actions a[b-3h1nydm9qx] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    margin-right: var(--space-xs);
    transition: all var(--transition-fast);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.ee-col-actions button:hover:not(:disabled)[b-3h1nydm9qx],
.ee-col-actions a:hover[b-3h1nydm9qx] {
    background: var(--bg-hover);
    color: var(--accent-color);
}

.ee-col-actions button:disabled[b-3h1nydm9qx] {
    opacity: 0.4;
    cursor: not-allowed;
}

.ee-action-link[b-3h1nydm9qx],
.ee-followup-link[b-3h1nydm9qx] {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--accent-color);
}

.ee-followup-link[b-3h1nydm9qx] {
    font-size: var(--text-xs);
}

/* Workflow-link styling — keep under the accent-color tone. */
.ee-dead-letters-table tbody td a[b-3h1nydm9qx] {
    color: var(--accent-color);
    text-decoration: none;
}

.ee-dead-letters-table tbody td a:hover[b-3h1nydm9qx] {
    text-decoration: underline;
}

/* Responsive — collapse the filter row + scale the table down on
   narrow viewports. The page is admin-facing so we don't optimise for
   mobile, but a tablet layout is a free win. */
@media (max-width: 768px) {
    .ee-dead-letters-filters[b-3h1nydm9qx] {
        width: 100%;
    }

    .ee-filter-group select[b-3h1nydm9qx],
    .ee-filter-group input[b-3h1nydm9qx] {
        min-width: 8rem;
    }

    .ee-error-message[b-3h1nydm9qx] {
        max-width: 12rem;
    }

    .ee-col-actions[b-3h1nydm9qx] {
        width: auto;
    }
}

@media (max-width: 640px) {
    .ee-dead-letters[b-3h1nydm9qx] {
        padding: var(--space-md);
    }

    .ee-dead-letters-table th[b-3h1nydm9qx],
    .ee-dead-letters-table td[b-3h1nydm9qx] {
        padding: var(--space-xs) var(--space-sm);
    }
}
/* _content/Ayva.EventEngine/Components/Designer/AiDock.razor.rz.scp.css */
/*
   Phase 5 Task 15 — AiDock styles.

   Two visual states:
       - Collapsed: 3rem circular pill at bottom-right (default).
       - Expanded: 380×480 glass panel with header + conversation +
                   input row.

   At ≤1024px the dock takes over the full viewport (mobile/narrow
   layouts) so the chat surface remains usable on tablets + phones.

   Conversation timeline stretches and scrolls; user vs assistant
   messages render with different alignment + chip color. Tool-call
   chips render under assistant messages with the success/fail icons.

   All styles use var(--…) tokens — zero hardcoded colors / fonts /
   spacing / motion per CLAUDE.md.
*/

/* ─── Dock shell ────────────────────────────────────────────────── */

.ee-ai-dock[b-0v9v4xs9w4] {
    position: fixed;
    z-index: 950;
    transition: width var(--transition-smooth),
                height var(--transition-smooth),
                bottom var(--transition-smooth),
                right var(--transition-smooth),
                border-radius var(--transition-smooth);
}

.ee-ai-dock.ee-collapsed[b-0v9v4xs9w4] {
    bottom: var(--space-md);
    right: var(--space-md);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    box-shadow: var(--shadow-lg);
}

.ee-ai-dock.ee-expanded[b-0v9v4xs9w4] {
    bottom: var(--space-md);
    right: var(--space-md);
    width: var(--ee-ai-dock-width);
    height: var(--ee-ai-dock-height);
    border-radius: var(--radius-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    backdrop-filter: var(--ee-node-blur);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ─── Collapsed pill ─────────────────────────────────────────────── */

.ee-ai-pill[b-0v9v4xs9w4] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: none;
    background: var(--accent-gradient);
    color: white;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-fast), filter var(--transition-fast);
    z-index: var(--z-fab-overlay);
}

.ee-ai-pill:hover[b-0v9v4xs9w4] {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.ee-ai-pill:focus-visible[b-0v9v4xs9w4] {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
}

.ee-ai-pill .material-icons[b-0v9v4xs9w4] {
    font-size: 1.5rem;
}

/* ─── Expanded header ───────────────────────────────────────────── */

.ee-ai-header[b-0v9v4xs9w4] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.ee-ai-header-icon[b-0v9v4xs9w4] {
    color: var(--accent-color);
    font-size: var(--text-xl);
}

.ee-ai-header h3[b-0v9v4xs9w4] {
    flex: 1;
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
}

.ee-ai-close[b-0v9v4xs9w4] {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ee-ai-close:hover[b-0v9v4xs9w4] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.ee-ai-close .material-icons[b-0v9v4xs9w4] {
    font-size: var(--text-lg);
}

/* ─── Conversation timeline ─────────────────────────────────────── */

.ee-ai-conversation[b-0v9v4xs9w4] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.ee-ai-msg[b-0v9v4xs9w4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    max-width: 85%;
}

.ee-ai-msg-user[b-0v9v4xs9w4] {
    align-self: flex-end;
}

.ee-ai-msg-assistant[b-0v9v4xs9w4] {
    align-self: flex-start;
}

.ee-ai-msg-streaming[b-0v9v4xs9w4] {
    align-self: flex-start;
}

.ee-ai-msg-text[b-0v9v4xs9w4] {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-lg);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    white-space: pre-wrap;
    word-break: break-word;
}

.ee-ai-msg-user .ee-ai-msg-text[b-0v9v4xs9w4] {
    background: var(--accent-gradient);
    color: white;
    border-bottom-right-radius: var(--radius-sm);
}

.ee-ai-msg-assistant .ee-ai-msg-text[b-0v9v4xs9w4] {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-bottom-left-radius: var(--radius-sm);
}

/* Typing-dots indicator while the agent is composing the next turn. */
.ee-ai-typing-dots[b-0v9v4xs9w4] {
    display: inline-flex;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.ee-ai-typing-dots span[b-0v9v4xs9w4] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--text-secondary);
    animation: ee-ai-dot-bounce-b-0v9v4xs9w4 1.4s ease-in-out infinite;
}

.ee-ai-typing-dots span:nth-child(2)[b-0v9v4xs9w4] { animation-delay: 0.2s; }
.ee-ai-typing-dots span:nth-child(3)[b-0v9v4xs9w4] { animation-delay: 0.4s; }

@keyframes ee-ai-dot-bounce-b-0v9v4xs9w4 {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ee-ai-typing-dots span[b-0v9v4xs9w4] {
        animation: none;
    }
}

/* ─── Tool-call chips ───────────────────────────────────────────── */

.ee-ai-tool-calls[b-0v9v4xs9w4] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
}

.ee-ai-tool-chip[b-0v9v4xs9w4] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.ee-ai-tool-chip .material-icons[b-0v9v4xs9w4] {
    font-size: 0.875rem;
}

.ee-ai-tool-ok[b-0v9v4xs9w4] {
    border-color: color-mix(in srgb, var(--success-color) 30%, transparent);
    color: var(--success-color);
}

.ee-ai-tool-fail[b-0v9v4xs9w4] {
    border-color: color-mix(in srgb, var(--error-color) 30%, transparent);
    color: var(--error-color);
}

/* ─── Input row ─────────────────────────────────────────────────── */

.ee-ai-input[b-0v9v4xs9w4] {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.ee-ai-input textarea[b-0v9v4xs9w4] {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    resize: none;
    transition: border-color var(--transition-fast);
}

.ee-ai-input textarea:focus[b-0v9v4xs9w4] {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 20%, transparent);
}

.ee-ai-input textarea:disabled[b-0v9v4xs9w4] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ee-ai-send[b-0v9v4xs9w4] {
    background: var(--accent-gradient);
    border: none;
    color: white;
    border-radius: var(--radius-md);
    cursor: pointer;
    padding: var(--space-sm) var(--space-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-fast), filter var(--transition-fast);
    flex-shrink: 0;
}

.ee-ai-send:hover:not(:disabled)[b-0v9v4xs9w4] {
    transform: translateY(-1px);
    filter: brightness(1.1);
}

.ee-ai-send:focus-visible[b-0v9v4xs9w4] {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.ee-ai-send:disabled[b-0v9v4xs9w4] {
    opacity: 0.4;
    cursor: not-allowed;
}

.ee-ai-send .material-icons[b-0v9v4xs9w4] {
    font-size: var(--text-lg);
}

/* ─── Responsive: full-screen at ≤1024px ────────────────────────── */

@media (max-width: 1024px) {
    .ee-ai-dock.ee-expanded[b-0v9v4xs9w4] {
        bottom: 0;
        right: 0;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        border-radius: 0;
        max-width: none;
    }
}
/* _content/Ayva.EventEngine/Components/Designer/DesignerToolbar.razor.rz.scp.css */
/*
 * Phase 5 Task 13 — DesignerToolbar scoped styles.
 *
 * Top-bar above the workflow designer canvas. Layout is a 3-column
 * CSS Grid (1fr auto 1fr) with the center region anchored, the left
 * region growing to push center off-balance toward the right (so the
 * back/name/version trio doesn't drift), and the right region right-
 * aligned. Everything keys off the --ee-* tokens registered in
 * ayva-theme.css so the indigo accent reasserts within the .ee-root
 * scope (admin shell uses orange globally).
 */

.ee-designer-toolbar[b-u9e29owkny] {
    height: var(--ee-toolbar-height);
    padding: 0 var(--space-md);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-md);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: var(--ee-node-blur);
}

.ee-toolbar-left[b-u9e29owkny],
.ee-toolbar-right[b-u9e29owkny] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.ee-toolbar-center[b-u9e29owkny] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    justify-content: center;
}

.ee-toolbar-right[b-u9e29owkny] {
    justify-content: flex-end;
}

.ee-toolbar-name[b-u9e29owkny] {
    flex: 1;
    max-width: 24rem;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
}

.ee-toolbar-name:hover[b-u9e29owkny],
.ee-toolbar-name:focus[b-u9e29owkny] {
    background: var(--bg-hover);
    outline: none;
}

.ee-toolbar-version[b-u9e29owkny] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    padding: var(--space-xs) var(--space-sm);
}

.ee-toolbar-btn[b-u9e29owkny] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    min-height: 2rem;
    line-height: 1;
}

.ee-toolbar-btn:hover:not(:disabled)[b-u9e29owkny] {
    background: var(--bg-hover);
    border-color: var(--accent-color);
}

.ee-toolbar-btn:disabled[b-u9e29owkny] {
    opacity: 0.4;
    cursor: not-allowed;
}

.ee-toolbar-btn .material-icons[b-u9e29owkny] {
    font-size: 18px;
}

/*
 * Save button uses the indigo accent gradient so it reads as the
 * primary action in the center cluster. The hover lift uses a tiny
 * translateY plus the small shadow token — same posture as the rest
 * of the design system's primary buttons.
 */
.ee-toolbar-save[b-u9e29owkny] {
    background: var(--accent-gradient);
    color: white;
    border-color: transparent;
}

.ee-toolbar-save:hover:not(:disabled)[b-u9e29owkny] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.ee-toolbar-publish[b-u9e29owkny] {
    background: var(--success-color);
    color: white;
    border-color: transparent;
}

.ee-toolbar-publish:hover:not(:disabled)[b-u9e29owkny] {
    background: color-mix(in srgb, var(--success-color) 85%, black);
}

/*
 * AI button uses the indigo→violet gradient that pairs with the
 * AI node variant (spec §10.3 #5). --secondary-accent is registered
 * in ayva-theme.css (#8b5cf6) so this stays token-driven.
 */
.ee-toolbar-ai[b-u9e29owkny] {
    background: linear-gradient(135deg, var(--accent-color), var(--secondary-accent));
    color: white;
    border-color: transparent;
}

.ee-toolbar-zoom-level[b-u9e29owkny] {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    min-width: 3rem;
    text-align: center;
}

/*
 * Phase B Task B1 — narrow-viewport icon-only mode.
 *
 * Below 1024px, hide the .ee-btn-label text inside Test/Save/Publish/AI
 * buttons so the toolbar shrinks gracefully. The button keeps its icon.
 */
@media (max-width: 1024px) {
    .ee-btn-label[b-u9e29owkny] {
        display: none;
    }
}
/* _content/Ayva.EventEngine/Components/Designer/NodeTestModal.razor.rz.scp.css */
/* L2 — NodeTestModal scoped CSS.

   All values flow from ayva-theme tokens — zero hardcoded colors /
   fonts / spacing per CLAUDE.md UI Standards. The modal hosts itself
   inside the MudBlazor MudDialog frame; we only style the inner content
   area we author. */

.ee-test-modal-title[b-sjtu0y5yd7] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.ee-test-modal-title .material-icons[b-sjtu0y5yd7] {
    color: var(--accent-color);
    font-size: 1.6rem;
}

.ee-test-modal-title-main[b-sjtu0y5yd7] {
    font-weight: 600;
    color: var(--text-primary);
}

.ee-test-modal-title-sub[b-sjtu0y5yd7] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-family: var(--font-mono, monospace);
}

.ee-test-modal-body[b-sjtu0y5yd7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 28rem;
    font-family: var(--font-primary);
}

.ee-test-modal-body h4[b-sjtu0y5yd7] {
    margin: 0 0 var(--space-sm);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.ee-test-modal-body h5[b-sjtu0y5yd7] {
    margin: var(--space-sm) 0 var(--space-xs);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ee-test-modal-body pre[b-sjtu0y5yd7] {
    margin: 0;
    padding: var(--space-sm);
    background: var(--bg-input, var(--bg-card));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono, monospace);
    font-size: var(--text-sm);
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
    max-height: 14rem;
    overflow-y: auto;
}

.ee-test-modal-no-inputs[b-sjtu0y5yd7] {
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    background: var(--bg-card);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
}

.ee-test-modal-running[b-sjtu0y5yd7] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.ee-test-modal-running .material-icons[b-sjtu0y5yd7] {
    animation: ee-test-spin-b-sjtu0y5yd7 1.2s linear infinite;
    color: var(--accent-color);
}

@keyframes ee-test-spin-b-sjtu0y5yd7 {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.ee-test-modal-response[b-sjtu0y5yd7] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
}

.ee-test-modal-status[b-sjtu0y5yd7] {
    display: inline-block;
    padding: 0.125rem var(--space-sm);
    border-radius: var(--radius-pill, var(--radius-sm));
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--bg-hover);
    color: var(--text-primary);
}

.ee-test-modal-status-success[b-sjtu0y5yd7] {
    background: var(--success-bg, var(--bg-hover));
    color: var(--success-color, var(--accent-color));
}

.ee-test-modal-status-failure[b-sjtu0y5yd7] {
    background: var(--error-bg);
    color: var(--error-color);
}

.ee-test-modal-status-info[b-sjtu0y5yd7] {
    background: var(--info-bg, var(--bg-hover));
    color: var(--info-color, var(--accent-color));
}

.ee-test-modal-message[b-sjtu0y5yd7] {
    margin: 0 0 var(--space-sm);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.ee-test-modal-logs[b-sjtu0y5yd7] {
    background: var(--bg-canvas, var(--bg-card)) !important;
    color: var(--text-secondary);
}

.ee-test-modal-error[b-sjtu0y5yd7] {
    margin-top: var(--space-sm);
}
/* _content/Ayva.EventEngine/Components/Designer/WorkflowDesigner.razor.rz.scp.css */
/*
   Phase 5 Task 14 — WorkflowDesigner root layout.

   Spec §10.1 mandates a 4-row grid:
       Row 1 — Toolbar (var(--ee-toolbar-height))
       Row 2 — Suspended/Disabled banner (auto height)
       Row 3 — Body (1fr) — palette / canvas / properties
       Row 4 — Execution monitor (var(--ee-monitor-height) — Task 15+)

   The body is itself a 3-column grid: palette on the left
   (var(--ee-palette-width)), canvas in the middle (1fr), properties
   panel on the right (var(--ee-properties-width)).

   Responsive collapses:
       ≤1024px — palette collapses to a 3rem icon-rail; properties panel
                 keeps full width
       ≤768px  — properties panel becomes a bottom-sheet (handled by
                 the panel's own data-collapsed attribute / .razor.css)
                 so the body grid drops to 2 columns

   All values come from ayva-theme.css custom properties. Zero hard-
   coded colors / fonts / spacing per CLAUDE.md UI Standards.

   ─────────────────────────────────────────────────────────────────────
   Phase B Task B2 (2026-05-09) — grid hardening.

   Outer shell now fills the viewport so the canvas always uses
   available vertical space. The 3-column body uses fixed CSS
   variables for palette and properties widths, so the canvas (1fr)
   absorbs the remainder cleanly without overlap. min-height: 0 on
   the body row is what allows the canvas (a CSS-grid track at 1fr
   containing an SVG with a fixed 3200px intrinsic size) to shrink to
   its container instead of blowing the row taller than the viewport.

   Fallbacks (3.5rem / 16rem / 20rem / 3rem / 18rem) are intentional
   defaults so the file remains self-contained even if the theme
   tokens are missing.

   Fixes addressed:
       #6  toolbar overflow            (B1 already; B2 hardens the wrapper)
       #8  properties overlaps canvas  (fixed via grid-template-columns)
       #10 designer < viewport         (height/max-height: 100vh)
       #11 properties below container  (overflow:hidden + min-height:0)
*/

.ee-designer-root[b-f69wi03sg7] {
    display: grid;
    grid-template-rows: var(--ee-toolbar-height, 3.5rem) auto auto 1fr;
    /* J1 (2026-05-09) — when embedded inside the /coms AdminPanel
       (deep route /coms/event-engine/workflows/{id}/edit), fill the
       parent's content area rather than the viewport. The parent
       (.grid-content / .admin-panel-content) provides a constrained
       height through the AdminPanel's CSS-grid layout, and
       min-height:0 lets the 1fr canvas row shrink to fit instead of
       forcing the SVG world's intrinsic 3200px to blow the row taller
       than the shell. */
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: var(--bg-primary);
    color: var(--text-primary);
    /* tabindex=-1 on the root — focusable so the @onkeydown handler
       receives every key the canvas / panels don't intercept first.
       Outline suppressed so focus doesn't paint a ring around the entire
       designer when Blazor moves focus to the root after a click. */
    outline: none;
}

.ee-designer-body[b-f69wi03sg7] {
    display: grid;
    grid-template-columns:
        var(--ee-palette-width, 16rem)
        1fr
        var(--ee-properties-width, 20rem);
    min-height: 0;            /* allow row 4 (1fr) to shrink under content */
    overflow: hidden;
}

.ee-designer-canvas-container[b-f69wi03sg7] {
    position: relative;
    overflow: hidden;
    min-width: 0;             /* prevent grid blow-up from SVG intrinsic size */
    min-height: 0;
    background: var(--bg-canvas, var(--bg-primary));
    /* The @ondrop handler needs a non-static positioned container so the
       child canvas's absolutely-positioned world stays anchored. */
}

@media (max-width: 1024px) {
    .ee-designer-body[b-f69wi03sg7] {
        grid-template-columns:
            var(--ee-palette-rail-width, 3rem)
            1fr
            var(--ee-properties-width, 18rem);
    }
}

@media (max-width: 768px) {
    .ee-designer-body[b-f69wi03sg7] {
        grid-template-columns:
            var(--ee-palette-rail-width, 3rem)
            1fr;
    }
    /* Properties panel becomes a slide-up bottom sheet at narrow widths.
       PropertiesPanel.razor.css owns its own bottom-sheet styling
       (`position: fixed`, translateY when collapsed). We just drop the
       grid column here so the canvas claims the freed space; the panel
       overlays from the bottom edge. The position: fixed declaration
       lives in PropertiesPanel.razor.css (N3 fix consolidated the
       layering there to keep the desktop in-grid path clean). */
}

/* ─── L1: right-click context menu ─────────────────────────────────
   Floating menu rendered when the user right-clicks a node card. The
   backdrop (.ee-context-menu-backdrop) intercepts an outside-click to
   dismiss; the menu itself sits on top of it, anchored to the cursor
   coords passed up from the node card. position: fixed reads the
   inline left/top values as viewport-relative CSS pixels — matches
   MouseEventArgs.ClientX/Y so the menu pops exactly under the cursor.

   All tokens from ayva-theme; no hardcoded colors / fonts / spacing. */
.ee-context-menu-backdrop[b-f69wi03sg7] {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: transparent;
}

.ee-context-menu[b-f69wi03sg7] {
    position: fixed;
    z-index: 9001;
    min-width: 12rem;
    background: var(--bg-card);
    backdrop-filter: var(--ee-node-blur, blur(12px));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-xs) 0;
    display: flex;
    flex-direction: column;
    font-family: var(--font-primary);
}

.ee-context-menu-item[b-f69wi03sg7] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.ee-context-menu-item:hover[b-f69wi03sg7],
.ee-context-menu-item:focus-visible[b-f69wi03sg7] {
    background: var(--bg-hover);
    outline: none;
}

.ee-context-menu-item .material-icons[b-f69wi03sg7] {
    font-size: 1.1rem;
    color: var(--text-secondary);
}

.ee-context-menu-item:hover .material-icons[b-f69wi03sg7] {
    color: var(--accent-color);
}

.ee-context-menu-divider[b-f69wi03sg7] {
    margin: var(--space-xs) 0;
    border: none;
    border-top: 1px solid var(--border-color);
}

.ee-context-menu-danger[b-f69wi03sg7] {
    color: var(--error-color, var(--text-primary));
}

.ee-context-menu-danger:hover[b-f69wi03sg7],
.ee-context-menu-danger:focus-visible[b-f69wi03sg7] {
    background: var(--error-bg, var(--bg-hover));
    color: var(--error-color, var(--text-primary));
}

.ee-context-menu-danger .material-icons[b-f69wi03sg7] {
    color: var(--error-color, var(--text-secondary));
}
/* _content/Ayva.EventEngine/Components/Designer/WorkflowReviewBanner.razor.rz.scp.css */
/*
   Phase 5 Task 15 — WorkflowReviewBanner styles.

   Three verdict variants share most of the layout, differing only in the
   accent color stripe + tint:
     - .ee-review-awaiting → var(--warning-color) accent on var(--warning-bg)
     - .ee-review-rejected → var(--error-color)   accent on var(--error-bg)
     - .ee-review-info     → var(--info-color)    accent on var(--info-bg)

   Concerns drawer is a native <details> element so the open/close state
   is browser-native (no JS, no extra state). The summary's open/close
   marker is suppressed so we can render our own caret.

   Override modal sits fixed-center with a darkened backdrop.

   All values resolve through ayva-theme.css custom properties — zero
   hardcoded colors / fonts / spacing / shadows / motion per CLAUDE.md.
*/

/* ─── Banner shell ──────────────────────────────────────────────── */

.ee-review-banner[b-boek95hjp7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: var(--ee-node-blur);
}

.ee-review-awaiting[b-boek95hjp7] {
    background: var(--warning-bg);
    border-left: 4px solid var(--warning-color);
}

.ee-review-awaiting .ee-review-banner-icon[b-boek95hjp7] {
    color: var(--warning-color);
}

.ee-review-rejected[b-boek95hjp7] {
    background: var(--error-bg);
    border-left: 4px solid var(--error-color);
}

.ee-review-rejected .ee-review-banner-icon[b-boek95hjp7] {
    color: var(--error-color);
}

.ee-review-info[b-boek95hjp7] {
    background: var(--info-bg);
    border-left: 4px solid var(--info-color);
}

.ee-review-info .ee-review-banner-icon[b-boek95hjp7] {
    color: var(--info-color);
}

/* ─── Banner header row ─────────────────────────────────────────── */

.ee-review-banner-header[b-boek95hjp7] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.ee-review-banner-icon[b-boek95hjp7] {
    font-size: var(--text-2xl);
    flex-shrink: 0;
}

.ee-review-banner-text[b-boek95hjp7] {
    flex: 1;
    min-width: 0;
}

.ee-review-banner-text strong[b-boek95hjp7] {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
    display: block;
}

.ee-review-banner-text p[b-boek95hjp7] {
    margin: var(--space-xs) 0 0 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}

/* ─── Override button ───────────────────────────────────────────── */

.ee-review-override[b-boek95hjp7] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.ee-review-override:hover:not(:disabled)[b-boek95hjp7] {
    background: var(--bg-hover);
    border-color: var(--accent-color);
}

.ee-review-override:focus-visible[b-boek95hjp7] {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.ee-review-override:disabled[b-boek95hjp7] {
    opacity: 0.4;
    cursor: not-allowed;
}

.ee-review-override .material-icons[b-boek95hjp7] {
    font-size: var(--text-base);
}

/* ─── Concerns drawer ───────────────────────────────────────────── */

.ee-review-concerns[b-boek95hjp7] {
    border-top: 1px solid var(--border-color);
    padding-top: var(--space-sm);
}

.ee-review-concerns summary[b-boek95hjp7] {
    cursor: pointer;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    list-style: none;
    padding: var(--space-xs) 0;
    user-select: none;
}

.ee-review-concerns summary[b-boek95hjp7]::-webkit-details-marker {
    display: none;
}

.ee-review-concerns summary[b-boek95hjp7]::before {
    content: "▶";
    display: inline-block;
    margin-right: var(--space-sm);
    transition: transform var(--transition-fast);
    font-size: var(--text-xs);
}

.ee-review-concerns[open] summary[b-boek95hjp7]::before {
    transform: rotate(90deg);
}

.ee-review-concerns-list[b-boek95hjp7] {
    list-style: none;
    margin: var(--space-sm) 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.ee-review-concern[b-boek95hjp7] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ee-review-concern:hover[b-boek95hjp7] {
    background: var(--bg-hover);
    transform: translateX(2px);
}

.ee-review-concern code[b-boek95hjp7] {
    background: var(--bg-secondary);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    color: var(--text-primary);
    font-size: 0.85em;
    margin-left: auto;
}

.ee-review-concern-severity[b-boek95hjp7] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.ee-review-concern-text[b-boek95hjp7] {
    flex: 1;
    color: var(--text-primary);
    font-size: var(--text-sm);
    min-width: 0;
}

/* Severity-tag colors */
.ee-severity-critical .ee-review-concern-severity[b-boek95hjp7] {
    background: var(--error-bg);
    color: var(--error-color);
}

.ee-severity-critical[b-boek95hjp7] {
    border-left: 3px solid var(--error-color);
}

.ee-severity-high .ee-review-concern-severity[b-boek95hjp7] {
    background: var(--warning-bg);
    color: var(--warning-color);
}

.ee-severity-high[b-boek95hjp7] {
    border-left: 3px solid var(--warning-color);
}

.ee-severity-medium .ee-review-concern-severity[b-boek95hjp7] {
    background: var(--info-bg);
    color: var(--info-color);
}

.ee-severity-low .ee-review-concern-severity[b-boek95hjp7] {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

/* ─── Override modal ────────────────────────────────────────────── */

.ee-override-modal-backdrop[b-boek95hjp7] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.ee-override-modal[b-boek95hjp7] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: min(560px, calc(100vw - var(--space-xl)));
    max-height: calc(100vh - var(--space-xl));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: var(--ee-node-blur);
}

.ee-override-modal-header[b-boek95hjp7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-color);
}

.ee-override-modal-header h3[b-boek95hjp7] {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
}

.ee-override-modal-close[b-boek95hjp7] {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ee-override-modal-close:hover[b-boek95hjp7] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.ee-override-modal-body[b-boek95hjp7] {
    padding: var(--space-md) var(--space-lg);
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.ee-override-modal-body p[b-boek95hjp7] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.ee-override-modal-body textarea[b-boek95hjp7] {
    width: 100%;
    min-height: 6rem;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    resize: vertical;
    transition: border-color var(--transition-fast);
}

.ee-override-modal-body textarea:focus[b-boek95hjp7] {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 20%, transparent);
}

.ee-override-counter[b-boek95hjp7] {
    text-align: right;
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    transition: color var(--transition-fast);
}

.ee-override-counter.ee-near-limit[b-boek95hjp7] {
    color: var(--error-color);
    font-weight: var(--font-semibold);
}

.ee-override-ack[b-boek95hjp7] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-primary);
    font-size: var(--text-sm);
    cursor: pointer;
    user-select: none;
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
}

.ee-override-ack input[type="checkbox"][b-boek95hjp7] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--accent-color);
    cursor: pointer;
}

.ee-override-modal-footer[b-boek95hjp7] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.ee-override-cancel[b-boek95hjp7] {
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    transition: all var(--transition-fast);
}

.ee-override-cancel:hover[b-boek95hjp7] {
    background: var(--bg-hover);
}

.ee-override-confirm[b-boek95hjp7] {
    padding: var(--space-sm) var(--space-lg);
    background: var(--error-color);
    color: white;
    border: 1px solid var(--error-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    transition: all var(--transition-fast);
}

.ee-override-confirm:hover:not(:disabled)[b-boek95hjp7] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    filter: brightness(1.1);
}

.ee-override-confirm:disabled[b-boek95hjp7] {
    opacity: 0.4;
    cursor: not-allowed;
}

.ee-override-confirm.ee-double-confirm[b-boek95hjp7] {
    background: var(--bg-card);
    color: var(--error-color);
    border-color: var(--error-color);
    animation: ee-override-pulse-b-boek95hjp7 var(--transition-data) ease-in-out infinite;
}

@keyframes ee-override-pulse-b-boek95hjp7 {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--error-color) 40%, transparent); }
    50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--error-color) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
    .ee-override-confirm.ee-double-confirm[b-boek95hjp7] {
        animation: none;
    }
}

/* ─── Responsive ────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .ee-review-banner-header[b-boek95hjp7] {
        flex-wrap: wrap;
    }

    .ee-review-override[b-boek95hjp7] {
        margin-left: auto;
    }
}
/* _content/Ayva.EventEngine/Components/Designer/WorkflowSuspendedBanner.razor.rz.scp.css */
/*
   Phase 5 Task 14 — WorkflowSuspendedBanner styles.

   Two variants share most of the layout (flex row, icon + content +
   refresh button), differing only in the accent color stripe + tint.

   All values come from ayva-theme.css custom properties. Zero hard-
   coded colors / fonts / spacing per CLAUDE.md UI Standards.
*/

.ee-suspended-banner[b-ezj63xwpss],
.ee-disabled-banner[b-ezj63xwpss] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: var(--ee-node-blur);
}

.ee-suspended-banner[b-ezj63xwpss] {
    background: color-mix(in srgb, var(--warning-color) 10%, var(--bg-card));
    border-left: 4px solid var(--warning-color);
}

.ee-suspended-banner .material-icons[b-ezj63xwpss] {
    color: var(--warning-color);
    font-size: 24px;
}

.ee-disabled-banner[b-ezj63xwpss] {
    background: color-mix(in srgb, var(--text-muted) 8%, var(--bg-card));
    border-left: 4px solid var(--text-muted);
}

.ee-disabled-banner .material-icons[b-ezj63xwpss] {
    color: var(--text-muted);
    font-size: 24px;
}

.ee-suspended-content[b-ezj63xwpss] {
    flex: 1;
    min-width: 0;
}

.ee-suspended-content strong[b-ezj63xwpss] {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
    display: block;
}

.ee-suspended-content p[b-ezj63xwpss] {
    margin: var(--space-xs) 0 0 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}

.ee-suspended-content code[b-ezj63xwpss] {
    background: var(--bg-secondary);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    color: var(--text-primary);
    font-size: 0.95em;
}

.ee-suspended-refresh[b-ezj63xwpss] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    padding: var(--space-sm);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ee-suspended-refresh:hover:not(:disabled)[b-ezj63xwpss] {
    background: var(--bg-hover);
    border-color: var(--accent-color);
}

.ee-suspended-refresh:focus-visible[b-ezj63xwpss] {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.ee-suspended-refresh:disabled[b-ezj63xwpss] {
    opacity: 0.4;
    cursor: not-allowed;
}

.ee-suspended-refresh .material-icons[b-ezj63xwpss] {
    color: inherit;
    font-size: 20px;
}
/* _content/Ayva.EventEngine/Components/EventEnginePanel.razor.rz.scp.css */
/*
    Phase 5 Task 1 — EventEnginePanel scoped styles.

    Every value references an ayva-theme token (var(--…)) per
    docs/UI_DESIGN.md. The .ee-panel-* selectors are component-scoped
    by Blazor CSS isolation; the .ee-root wrapper inherits the indigo
    accent reassertion declared in ayva-theme.css.

    Revised 2026-05-09: actions now sit inside the header (right side)
    rather than a separate full-width grid below it, since the header
    is followed directly by the WorkflowList body.
*/

.ee-panel-shell[b-jdvwc68k7g] {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.ee-panel-header[b-jdvwc68k7g] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    backdrop-filter: var(--ee-node-blur);
    flex-wrap: wrap;
}

.ee-panel-icon[b-jdvwc68k7g] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: var(--accent-gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ee-panel-text[b-jdvwc68k7g] {
    flex: 1 1 240px;
    min-width: 0;
}

.ee-panel-text h1[b-jdvwc68k7g] {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-xs) 0;
}

.ee-panel-text p[b-jdvwc68k7g] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
}

.ee-panel-actions[b-jdvwc68k7g] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}

.ee-cta[b-jdvwc68k7g] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ee-cta:hover[b-jdvwc68k7g] {
    background: var(--bg-hover);
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
/* _content/Ayva.EventEngine/Components/Monitor/ExecutionDetail.razor.rz.scp.css */
/* Phase 5 Task 17 — ExecutionDetail scoped styles.
 *
 * All values flow through ayva-theme tokens (Task 1). The detail page
 * is a 2-column grid: canvas on the left, side panel on the right
 * (var(--ee-properties-width) — same width as the designer's
 * PropertiesPanel for visual continuity).
 *
 * Modal backdrop's rgba(0,0,0,0.5) is the only intentional non-token
 * value — it's a transparent overlay, not a theme color.
 */

.ee-execution-detail[b-o16778cqhg] {
    display: grid;
    grid-template-columns: 1fr auto;
    height: 100%;
    min-height: 30rem;
    position: relative;
}

.ee-execution-detail-canvas[b-o16778cqhg] {
    overflow: hidden;
    height: 100%;
    min-height: 30rem;
}

/* ── Side panel ─────────────────────────────────────────────────── */

.ee-execution-detail-side[b-o16778cqhg] {
    width: var(--ee-properties-width);
    background: var(--bg-card);
    border-left: 1px solid var(--border-color);
    backdrop-filter: var(--ee-node-blur);
    overflow-y: auto;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.ee-execution-detail-side-header[b-o16778cqhg] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

.ee-execution-detail-side-title[b-o16778cqhg] {
    flex: 1;
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    overflow-wrap: anywhere;
}

.ee-detail-close[b-o16778cqhg] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--space-xs);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ee-detail-close:hover[b-o16778cqhg] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.ee-detail-close:focus-visible[b-o16778cqhg] {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* ── Body sections ──────────────────────────────────────────────── */

.ee-execution-detail-body[b-o16778cqhg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.ee-execution-detail-body section[b-o16778cqhg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.ee-execution-detail-body label[b-o16778cqhg] {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ee-execution-detail-body code[b-o16778cqhg] {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-primary);
    word-break: break-all;
}

.ee-detail-json[b-o16778cqhg] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 16rem;
    overflow-y: auto;
}

.ee-detail-error[b-o16778cqhg] {
    background: var(--error-bg);
    border: 1px solid var(--error-color);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--error-color);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Action buttons ─────────────────────────────────────────────── */

.ee-detail-actions[b-o16778cqhg] {
    margin-top: var(--space-md);
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.ee-detail-retry[b-o16778cqhg],
.ee-detail-edit[b-o16778cqhg] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    transition: all var(--transition-fast);
}

.ee-detail-retry[b-o16778cqhg] {
    background: var(--accent-gradient);
    color: var(--text-primary);
    border-color: transparent;
}

.ee-detail-retry:hover:not(:disabled)[b-o16778cqhg] {
    background: var(--accent-gradient-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.ee-detail-edit[b-o16778cqhg] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.ee-detail-edit:hover:not(:disabled)[b-o16778cqhg] {
    background: var(--bg-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.ee-detail-retry:focus-visible[b-o16778cqhg],
.ee-detail-edit:focus-visible[b-o16778cqhg] {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.ee-detail-retry:disabled[b-o16778cqhg],
.ee-detail-edit:disabled[b-o16778cqhg] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Edit modal ─────────────────────────────────────────────────── */

.ee-edit-modal-backdrop[b-o16778cqhg] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    backdrop-filter: blur(2px);
}

.ee-edit-modal[b-o16778cqhg] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    width: min(64rem, 90vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: var(--ee-node-blur);
}

.ee-edit-modal-header[b-o16778cqhg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-color);
}

.ee-edit-modal-header h3[b-o16778cqhg] {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
}

.ee-edit-modal-close[b-o16778cqhg] {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ee-edit-modal-close:hover[b-o16778cqhg] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.ee-edit-modal-body[b-o16778cqhg] {
    padding: var(--space-lg);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    flex: 1;
}

.ee-edit-modal-body p[b-o16778cqhg] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.ee-edit-modal-body p code[b-o16778cqhg] {
    background: var(--bg-secondary);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.ee-edit-modal-body label[b-o16778cqhg] {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ee-edit-modal-json[b-o16778cqhg] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-primary);
    width: 100%;
    resize: vertical;
    transition: border-color var(--transition-fast);
}

.ee-edit-modal-json:focus[b-o16778cqhg] {
    outline: none;
    border-color: var(--accent-color);
}

.ee-edit-modal-error[b-o16778cqhg] {
    color: var(--error-color);
    font-size: var(--text-sm);
    padding: var(--space-sm);
    background: var(--error-bg);
    border-radius: var(--radius-sm);
}

.ee-edit-modal-footer[b-o16778cqhg] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--border-color);
}

.ee-edit-cancel[b-o16778cqhg] {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.ee-edit-cancel:hover[b-o16778cqhg] {
    background: var(--bg-hover);
}

/* ── Override prompt — bottom-center toast ──────────────────────── */

.ee-override-prompt[b-o16778cqhg] {
    position: fixed;
    bottom: var(--space-md);
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    background: var(--warning-bg);
    border: 1px solid var(--warning-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-md);
    max-width: 32rem;
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.ee-override-prompt .material-icons[b-o16778cqhg] {
    color: var(--warning-color);
}

.ee-override-prompt p[b-o16778cqhg] {
    margin: 0;
    flex: 1;
    color: var(--text-primary);
    font-size: var(--text-sm);
}

.ee-override-prompt code[b-o16778cqhg] {
    font-family: var(--font-mono);
    padding: 0.125rem 0.375rem;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.ee-override-prompt button[b-o16778cqhg] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-xs) var(--space-md);
    cursor: pointer;
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    transition: all var(--transition-fast);
}

.ee-override-prompt button:hover[b-o16778cqhg] {
    background: var(--bg-hover);
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .ee-execution-detail[b-o16778cqhg] {
        grid-template-columns: 1fr;
    }

    .ee-execution-detail-side[b-o16778cqhg] {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--border-color);
    }
}
/* _content/Ayva.EventEngine/Components/Monitor/ExecutionMonitor.razor.rz.scp.css */
/* Phase 5 Task 16 — ExecutionMonitor scoped styles.
 *
 * All values flow through ayva-theme tokens (Task 1). The monitor sits
 * inside the EventEngine /coms route's content area and is laid out as
 * a 3-row flex column: header / canvas / scrubber.
 */

.ee-execution-monitor[b-vlt8htjhdy] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 480px;
    background: var(--surface-color, var(--surface-1, #0e0e10));
    color: var(--text-primary, #e5e7eb);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    border: 1px solid var(--border-color, var(--border-subtle, rgba(255,255,255,0.08)));
}

/* ── Header row ────────────────────────────────────────────────────── */
.ee-monitor-header[b-vlt8htjhdy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    background: var(--surface-2, var(--surface-1, rgba(255,255,255,0.03)));
    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}

.ee-monitor-title[b-vlt8htjhdy] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2, 0.5rem);
    min-width: 0;
}

.ee-monitor-title h2[b-vlt8htjhdy] {
    margin: 0;
    font-family: var(--font-primary, inherit);
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: 600;
    color: var(--text-primary, #e5e7eb);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ee-monitor-id[b-vlt8htjhdy] {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-tertiary, #9ca3af);
    padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
    background: var(--surface-3, rgba(255,255,255,0.04));
    border-radius: var(--radius-sm, 4px);
}

.ee-monitor-meta[b-vlt8htjhdy] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    flex-shrink: 0;
}

.ee-monitor-elapsed[b-vlt8htjhdy] {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary, #d1d5db);
}

/* ── Canvas wrapper ────────────────────────────────────────────────── */
.ee-monitor-canvas-wrapper[b-vlt8htjhdy] {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 320px;
    background:
        radial-gradient(circle at 1px 1px, var(--ee-canvas-grid-dot, rgba(255,255,255,0.08)) 1px, transparent 0)
        var(--surface-color, #0e0e10);
    background-size: 24px 24px;
}

/* ── Loading + error states ────────────────────────────────────────── */
.ee-monitor-loading[b-vlt8htjhdy],
.ee-monitor-error[b-vlt8htjhdy] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-6, 2rem);
    color: var(--text-secondary, #9ca3af);
    text-align: center;
}

.ee-monitor-loading .material-icons[b-vlt8htjhdy] {
    font-size: 32px;
    color: var(--accent-color, #6366f1);
    animation: ee-monitor-spin-b-vlt8htjhdy 1.6s linear infinite;
}

.ee-monitor-error[b-vlt8htjhdy] {
    color: var(--error-color, #ef4444);
}

.ee-monitor-error .material-icons[b-vlt8htjhdy] {
    font-size: 32px;
    color: var(--error-color, #ef4444);
}

.ee-monitor-error p[b-vlt8htjhdy] {
    margin: 0;
    color: var(--text-primary, #e5e7eb);
}

.ee-monitor-retry-btn[b-vlt8htjhdy] {
    margin-top: var(--space-2, 0.5rem);
    padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
    background: var(--accent-color, #6366f1);
    color: var(--text-on-accent, #ffffff);
    border: none;
    border-radius: var(--radius-md, 6px);
    font-family: var(--font-primary, inherit);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition-fast, 120ms) ease;
}

.ee-monitor-retry-btn:hover[b-vlt8htjhdy] {
    background: var(--accent-color-hover, var(--accent-color, #6366f1));
    filter: brightness(1.1);
}

.ee-monitor-retry-btn:focus-visible[b-vlt8htjhdy] {
    outline: 2px solid var(--accent-color, #6366f1);
    outline-offset: 2px;
}

@keyframes ee-monitor-spin-b-vlt8htjhdy {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ee-monitor-header[b-vlt8htjhdy] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2, 0.5rem);
    }

    .ee-monitor-meta[b-vlt8htjhdy] {
        justify-content: space-between;
    }
}

@media (max-width: 640px) {
    .ee-monitor-title h2[b-vlt8htjhdy] {
        font-size: var(--font-size-md, 1rem);
    }

    .ee-monitor-canvas-wrapper[b-vlt8htjhdy] {
        min-height: 240px;
    }
}
/* _content/Ayva.EventEngine/Components/Monitor/ScrubberTimeline.razor.rz.scp.css */
/* Phase 5 Task 16 — bottom scrubber timeline.
 *
 * All colors / spacing / radii flow through the ayva-theme tokens
 * (Task 1) — never hardcoded. Status segments map to the
 * --ee-state-* family the canvas node-card uses, so the timeline
 * visually echoes the canvas state.
 */

.ee-scrubber[b-r3lulcvq7p] {
    position: relative;
    height: 32px;
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    background: var(--surface-1, var(--surface-color, rgba(0,0,0,0.2)));
    border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
    border-radius: 0 0 var(--radius-md, 6px) var(--radius-md, 6px);
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-fast, 120ms) ease;
}

.ee-scrubber:hover[b-r3lulcvq7p] {
    background: var(--surface-2, rgba(255,255,255,0.04));
}

.ee-scrubber-track[b-r3lulcvq7p] {
    position: relative;
    height: 100%;
    width: 100%;
}

.ee-scrubber-segment[b-r3lulcvq7p] {
    position: absolute;
    top: 25%;
    height: 50%;
    width: 6px;
    margin-left: -3px;        /* center the segment on its left% anchor */
    border-radius: var(--radius-sm, 2px);
    background: var(--ee-state-idle, var(--text-tertiary, #6b7280));
    opacity: 0.85;
    transition: opacity var(--transition-fast, 120ms) ease,
                transform var(--transition-fast, 120ms) ease;
}

.ee-scrubber-segment:hover[b-r3lulcvq7p] {
    opacity: 1;
    transform: scaleY(1.15);
}

/* Status → CSS color token. The ayva-theme + Task 1 EE theme tokens
 * already define each state; the scrubber just references them.
 */
.ee-scrubber-running[b-r3lulcvq7p]     { background: var(--ee-state-running,  var(--info-color, #3b82f6));    }
.ee-scrubber-succeeded[b-r3lulcvq7p]   { background: var(--ee-state-succeeded, var(--success-color, #10b981)); }
.ee-scrubber-failed[b-r3lulcvq7p]      { background: var(--ee-state-failed,    var(--error-color, #ef4444));   }
.ee-scrubber-skipped[b-r3lulcvq7p]     { background: var(--ee-state-skipped,   var(--text-tertiary, #6b7280)); }
.ee-scrubber-cancelled[b-r3lulcvq7p]   { background: var(--ee-state-cancelled, var(--text-tertiary, #6b7280)); }
.ee-scrubber-suspended[b-r3lulcvq7p]   { background: var(--ee-state-suspended, var(--warning-color, #f59e0b)); }
.ee-scrubber-idle[b-r3lulcvq7p]        { background: var(--ee-state-idle,      var(--text-tertiary, #6b7280)); }

/* Cursor — the vertical line that marks the active sequence number. */
.ee-scrubber-cursor[b-r3lulcvq7p] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: var(--accent-color, #6366f1);
    box-shadow: 0 0 4px var(--accent-color, #6366f1);
    pointer-events: none;
    transition: left var(--transition-base, 200ms) ease;
}

.ee-scrubber-empty[b-r3lulcvq7p] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-tertiary, #6b7280);
    font-size: var(--font-size-xs, 0.75rem);
    font-style: italic;
}

@media (max-width: 640px) {
    .ee-scrubber[b-r3lulcvq7p] {
        height: 28px;
    }
}
/* _content/Ayva.EventEngine/Components/Palette/WorkflowPalette.razor.rz.scp.css */
/* Phase 5 Task 11 — WorkflowPalette scoped CSS.
   Spec §10.1 + §10.5. Zero hardcoded colors / fonts / spacing —
   every value reads from ayva-theme tokens (var(--…)). */

.ee-palette[b-obdg4nni7i] {
    width: var(--ee-palette-width);
    height: 100%;
    background: var(--bg-card);
    border-right: 1px solid var(--border-color);
    backdrop-filter: var(--ee-node-blur);
    overflow-y: auto;
    overflow-x: hidden;
    transition: width var(--transition-normal);
    display: flex;
    flex-direction: column;
    /* Phase B Task B3 — let the parent grid track (which collapses to
       var(--ee-palette-rail-width) below 1024px) constrain our width
       rather than the intrinsic min-content of our children. Without
       this, the search input + section titles would force the palette
       wider than its grid track allows. */
    min-width: 0;
}

/* Sticky search bar at the top — stays visible while the section
   list scrolls underneath. */
.ee-palette-search[b-obdg4nni7i] {
    position: sticky;
    top: 0;
    background: var(--bg-card);
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-color);
    z-index: 1;
}

.ee-palette-search input[b-obdg4nni7i] {
    width: 100%;
    padding: var(--space-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ee-palette-search input:focus[b-obdg4nni7i] {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-color-alpha, rgba(99, 102, 241, 0.15));
}

/* Section grouping — one block per "Pinned & Recent" / per-module
   section. */
.ee-palette-section[b-obdg4nni7i] {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.ee-palette-section + .ee-palette-section[b-obdg4nni7i] {
    border-top: 1px solid var(--border-color);
}

.ee-palette-section-title[b-obdg4nni7i] {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 var(--space-sm) 0;
}

/* Per-row drag source. */
.ee-palette-item[b-obdg4nni7i] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    cursor: grab;
    transition: background var(--transition-fast);
    /* Stop the row from collapsing when its label overflows — the
       label uses ellipsis to truncate within the fixed-width palette. */
    min-width: 0;
}

.ee-palette-item:hover[b-obdg4nni7i] {
    background: var(--bg-hover);
}

.ee-palette-item:active[b-obdg4nni7i] {
    cursor: grabbing;
}

.ee-palette-dot[b-obdg4nni7i] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ee-palette-icon[b-obdg4nni7i] {
    color: var(--text-secondary);
    font-size: var(--text-base);
    flex-shrink: 0;
}

.ee-palette-label[b-obdg4nni7i] {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

.ee-palette-name[b-obdg4nni7i] {
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ee-palette-module[b-obdg4nni7i] {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ee-palette-sensitive[b-obdg4nni7i] {
    color: var(--warning-color, var(--text-secondary));
    font-size: var(--text-base);
    flex-shrink: 0;
    margin-left: auto;
}

/* Empty / error / loading states. */
.ee-palette-empty[b-obdg4nni7i],
.ee-palette-error[b-obdg4nni7i],
.ee-palette-loading[b-obdg4nni7i] {
    text-align: center;
    padding: var(--space-xl) var(--space-md);
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.ee-palette-empty .material-icons[b-obdg4nni7i],
.ee-palette-error .material-icons[b-obdg4nni7i],
.ee-palette-loading .material-icons[b-obdg4nni7i] {
    font-size: var(--text-2xl);
    color: var(--text-tertiary, var(--text-secondary));
}

.ee-palette-error[b-obdg4nni7i] {
    color: var(--error-color, var(--text-secondary));
}

.ee-palette-empty p[b-obdg4nni7i] {
    margin: 0;
    font-size: var(--text-sm);
}

.ee-palette-empty button[b-obdg4nni7i] {
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.ee-palette-empty button:hover[b-obdg4nni7i] {
    background: var(--bg-hover);
    border-color: var(--accent-color);
}

/* Phase B Task B3 — palette icon-rail mode at narrow viewports.
 *
 * When the WorkflowDesigner shell (Task B2) sets the palette grid
 * column to var(--ee-palette-rail-width) (~3rem) below 1024px, the
 * search input and per-section titles can't physically render. Hide
 * them and stack item icons vertically; full label is preserved on
 * hover via the title= attribute the palette already sets per item.
 *
 * The previous Phase 5 implementation tried a width:hover expand-back
 * trick, but the B2 grid hard-caps the column width so the expansion
 * is clipped and never visible — replaced with an unconditional hide. */
@media (max-width: 1024px) {
    .ee-palette[b-obdg4nni7i] {
        /* Override the wide-viewport width so the palette matches the
           narrow-mode grid track (~3rem). Without this, .ee-palette's
           explicit width:var(--ee-palette-width) wins over the grid
           track and the items overflow on top of the canvas. */
        width: var(--ee-palette-rail-width);
    }
    .ee-palette-search[b-obdg4nni7i],
    .ee-palette-section-title[b-obdg4nni7i],
    .ee-palette-label[b-obdg4nni7i],
    .ee-palette-name[b-obdg4nni7i],
    .ee-palette-module[b-obdg4nni7i],
    .ee-palette-sensitive[b-obdg4nni7i] {
        display: none;
    }
    .ee-palette-section[b-obdg4nni7i] {
        padding: var(--space-xs);
    }
    .ee-palette-item[b-obdg4nni7i] {
        display: flex;
        justify-content: center;
        padding: var(--space-xs);
    }
    .ee-palette-icon[b-obdg4nni7i] {
        font-size: var(--text-xl);
    }
}
/* _content/Ayva.EventEngine/Components/Properties/NodeRunHistory.razor.rz.scp.css */
/* L3 — NodeRunHistory scoped CSS.

   Glass list of recent executions for a single node. All values flow
   from ayva-theme tokens — no hardcoded colors / fonts / spacing per
   CLAUDE.md UI Standards. */

.ee-node-runs[b-34cer80osv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    overflow-y: auto;
    max-height: 100%;
    font-family: var(--font-primary);
}

.ee-node-runs-header[b-34cer80osv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.ee-node-runs-header h4[b-34cer80osv] {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ee-node-runs-refresh[b-34cer80osv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--space-xs);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.ee-node-runs-refresh:hover[b-34cer80osv] {
    background: var(--bg-hover);
    color: var(--accent-color);
}

.ee-node-runs-refresh .material-icons[b-34cer80osv] {
    font-size: 1rem;
}

.ee-node-runs-loading[b-34cer80osv],
.ee-node-runs-empty[b-34cer80osv],
.ee-node-runs-error[b-34cer80osv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-sm);
    padding: var(--space-2xl) var(--space-md);
    color: var(--text-secondary);
}

.ee-node-runs-error[b-34cer80osv] {
    color: var(--error-color);
}

.ee-node-runs-loading .material-icons[b-34cer80osv],
.ee-node-runs-empty .material-icons[b-34cer80osv],
.ee-node-runs-error .material-icons[b-34cer80osv] {
    font-size: 2rem;
    opacity: 0.6;
}

.ee-node-runs-list[b-34cer80osv] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.ee-node-runs-row[b-34cer80osv] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.ee-node-runs-row-summary[b-34cer80osv] {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.ee-node-runs-row-summary:hover[b-34cer80osv] {
    background: var(--bg-hover);
}

.ee-node-runs-row-caret[b-34cer80osv] {
    color: var(--text-secondary);
    font-size: 1rem;
}

.ee-node-runs-status[b-34cer80osv] {
    display: inline-flex;
    align-items: center;
}

.ee-node-runs-status .material-icons[b-34cer80osv] {
    font-size: 1.1rem;
}

.ee-node-runs-status-success .material-icons[b-34cer80osv] {
    color: var(--success-color, var(--accent-color));
}

.ee-node-runs-status-failure .material-icons[b-34cer80osv] {
    color: var(--error-color);
}

.ee-node-runs-status-running .material-icons[b-34cer80osv] {
    color: var(--info-color, var(--accent-color));
    animation: ee-node-runs-spin-b-34cer80osv 1.2s linear infinite;
}

.ee-node-runs-status-cancelled .material-icons[b-34cer80osv] {
    color: var(--text-muted);
}

@keyframes ee-node-runs-spin-b-34cer80osv {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.ee-node-runs-row-time[b-34cer80osv] {
    color: var(--text-secondary);
    font-family: var(--font-mono, monospace);
    font-size: var(--text-sm);
}

.ee-node-runs-row-duration[b-34cer80osv] {
    color: var(--text-muted);
    font-size: var(--text-sm);
    text-align: right;
}

.ee-node-runs-row-detail[b-34cer80osv] {
    border-top: 1px solid var(--border-color);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary, var(--bg-card));
}

.ee-node-runs-row-detail section[b-34cer80osv] {
    margin-bottom: var(--space-sm);
}

.ee-node-runs-row-detail section:last-child[b-34cer80osv] {
    margin-bottom: 0;
}

.ee-node-runs-row-detail h5[b-34cer80osv] {
    margin: 0 0 var(--space-xs);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ee-node-runs-row-detail pre[b-34cer80osv] {
    margin: 0;
    padding: var(--space-sm);
    background: var(--bg-input, var(--bg-card));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono, monospace);
    font-size: var(--text-sm);
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
    max-height: 16rem;
    overflow-y: auto;
}

.ee-node-runs-error-text[b-34cer80osv] {
    color: var(--error-color);
    border-color: var(--error-color);
}

.ee-node-runs-meta[b-34cer80osv] {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.ee-node-runs-meta strong[b-34cer80osv] {
    color: var(--text-primary);
    margin-right: var(--space-xs);
}
/* _content/Ayva.EventEngine/Components/Properties/PropertiesPanel.razor.rz.scp.css */
/* Phase 5 Task 12 Part B — PropertiesPanel scoped CSS.

   N3 fix (2026-05-09) — the panel was pinned `position: fixed` at every
   width, anchoring it to the viewport instead of sitting in the
   designer's CSS-grid column 3. That made it overlay the /coms shell
   sidebar and clip badly against the canvas. We now sit in normal grid
   flow (`position: relative`) and only escape to a bottom-sheet
   `position: fixed` at ≤768px, which is what the original media-query
   was trying to express. The grid container in WorkflowDesigner.razor.css
   already reserves column 3 at var(--ee-properties-width).

   N2 fix (2026-05-09) — the collapse caret had no desktop styling, so
   clicking it toggled `data-collapsed` but visually nothing happened.
   We now collapse the panel to a thin rail (just the caret button)
   when `[data-collapsed="true"]` so the user gets a clear
   collapse/expand affordance on desktop too.

   All values from ayva-theme tokens — zero hardcoded colors / fonts
   / spacing per CLAUDE.md UI Standards. */

.ee-properties-panel[b-55z4ohk260] {
    /* N3 — in-grid placement so the parent grid (.ee-designer-body's
       3-column template) controls the panel's column. */
    position: relative;
    height: 100%;
    width: 100%;
    background: var(--bg-card);
    backdrop-filter: var(--ee-node-blur);
    border-left: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* N2 — animate width changes for the collapse rail transition. */
    transition: width var(--transition-normal);
}

/* ─── N2: Desktop collapse — hide body, keep header rail ───────────
   When the user clicks the caret on desktop (≥769px), hide the body /
   tabs / header text. The header itself stays so the caret remains
   reachable. The mobile @media block below overrides this with a
   bottom-sheet translate behavior (and the bottom-sheet keeps the
   header VISIBLE while the body slides off-screen — different
   ergonomics for the narrow-width case).
   Restricted to (min-width: 769px) so it does not collide with the
   bottom-sheet rules at ≤768px below. */
@media (min-width: 769px) {
    .ee-properties-panel[data-collapsed="true"] .ee-properties-tabs[b-55z4ohk260],
    .ee-properties-panel[data-collapsed="true"] .ee-properties-body[b-55z4ohk260],
    .ee-properties-panel[data-collapsed="true"] .ee-properties-header-text[b-55z4ohk260] {
        display: none;
    }

    .ee-properties-panel[data-collapsed="true"] .ee-properties-header[b-55z4ohk260] {
        /* Center the caret in the rail. The header still claims its
           own width so the button sits flush. */
        justify-content: center;
        padding: var(--space-sm);
    }
}

/* ─── Header ──────────────────────────────────────────────────────── */
.ee-properties-header[b-55z4ohk260] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.ee-properties-header-text[b-55z4ohk260] {
    flex: 1;
    min-width: 0;
}

.ee-properties-header h3[b-55z4ohk260] {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ee-properties-subtitle[b-55z4ohk260] {
    margin-top: var(--space-xs);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ee-properties-collapse-toggle[b-55z4ohk260] {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--space-xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    flex-shrink: 0;
}

.ee-properties-collapse-toggle:hover[b-55z4ohk260],
.ee-properties-collapse-toggle:focus[b-55z4ohk260] {
    background: var(--ee-state-hover);
    color: var(--text-primary);
    border-color: var(--accent-color);
    outline: none;
}

.ee-properties-collapse-toggle .material-icons[b-55z4ohk260] {
    font-size: var(--text-lg);
}

/* N2 — desktop vs. mobile icon variants. The .razor renders both;
   media queries decide which is visible. Default (no media) shows
   the desktop chevron; the bottom-sheet block below flips it. */
.ee-properties-collapse-toggle .ee-collapse-icon-mobile[b-55z4ohk260] {
    display: none;
}
.ee-properties-collapse-toggle .ee-collapse-icon-desktop[b-55z4ohk260] {
    display: inline-flex;
}

/* ─── Tabs ────────────────────────────────────────────────────────── */
.ee-properties-tabs[b-55z4ohk260] {
    display: flex;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.ee-properties-tab[b-55z4ohk260] {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--space-xs) var(--space-sm);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.ee-properties-tab:hover[b-55z4ohk260],
.ee-properties-tab:focus[b-55z4ohk260] {
    color: var(--text-primary);
    background: var(--ee-state-hover);
    outline: none;
}

.ee-properties-tab-active[b-55z4ohk260] {
    color: var(--text-primary);
    background: var(--accent-color-15);
    border-color: var(--accent-color);
}

/* ─── Body ────────────────────────────────────────────────────────── */
.ee-properties-body[b-55z4ohk260] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.ee-properties-empty[b-55z4ohk260] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-secondary);
    padding: var(--space-xl);
    gap: var(--space-sm);
}

.ee-properties-empty .material-icons[b-55z4ohk260] {
    font-size: var(--text-2xl);
    color: var(--text-tertiary, var(--text-secondary));
    opacity: 0.6;
}

.ee-properties-empty p[b-55z4ohk260] {
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed, 1.6);
}

/* ─── Variables tab ──────────────────────────────────────────────── */
.ee-properties-variables p[b-55z4ohk260] {
    margin: 0 0 var(--space-md) 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.ee-properties-variables-empty[b-55z4ohk260] {
    color: var(--text-secondary);
    font-style: italic;
}

.ee-properties-variable-group[b-55z4ohk260] {
    margin-bottom: var(--space-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
}

.ee-properties-variable-group summary[b-55z4ohk260] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--text-primary);
    list-style: none;
}

.ee-properties-variable-group summary[b-55z4ohk260]::-webkit-details-marker {
    display: none;
}

.ee-properties-variable-group summary .material-icons[b-55z4ohk260] {
    font-size: var(--text-base);
    color: var(--accent-color);
}

.ee-properties-variable-display[b-55z4ohk260] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ee-properties-variable-key[b-55z4ohk260] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    background: var(--bg-card);
    padding: 0 var(--space-xs);
    border-radius: var(--radius-xs);
}

.ee-properties-variable-group ul[b-55z4ohk260] {
    list-style: none;
    padding: 0 var(--space-sm) var(--space-sm) var(--space-sm);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.ee-properties-variable-group li code[b-55z4ohk260] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--accent-color-light);
    background: var(--bg-card);
    padding: var(--space-xs);
    border-radius: var(--radius-xs);
    display: inline-block;
}

/* ─── Permissions tab ────────────────────────────────────────────── */
.ee-properties-permissions p[b-55z4ohk260] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-style: italic;
}

/* ─── Bottom-sheet at ≤768px (Product #1 review) ────────────────── */
@media (max-width: 768px) {
    .ee-properties-panel[b-55z4ohk260] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: auto;
        max-height: 70vh;
        border-left: none;
        border-top: 1px solid var(--border-color);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        transform: translateY(0);
        z-index: 100;
    }

    .ee-properties-panel[data-collapsed="true"][b-55z4ohk260] {
        /* Show only the header pill — translateY moves the body
           portion below the viewport bottom. The 3rem corresponds
           to the header padding + collapse toggle button height. */
        transform: translateY(calc(100% - 3rem));
    }

    /* N2 — at narrow widths, swap to vertical chevrons for
       sheet-up/sheet-down semantics. */
    .ee-properties-collapse-toggle .ee-collapse-icon-desktop[b-55z4ohk260] {
        display: none;
    }
    .ee-properties-collapse-toggle .ee-collapse-icon-mobile[b-55z4ohk260] {
        display: inline-flex;
    }
}
/* _content/Ayva.EventEngine/Components/Properties/VariablePicker.razor.rz.scp.css */
/* Phase 5 Task 12 Part B — VariablePicker scoped CSS.

   Popover anchored to the panel's top-right corner (Part B v1).
   Future iterations will anchor to the requesting field's input
   ElementReference; for now the position-absolute fallback keeps
   the popover in a deterministic spot relative to the panel.

   All values from ayva-theme tokens. */

.ee-variable-picker[b-l4d6qryzmt] {
    position: absolute;
    top: 4rem;
    right: 1rem;
    width: 18rem;
    max-height: 24rem;
    background: var(--bg-card);
    backdrop-filter: var(--ee-node-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 200;
    outline: none;
}

.ee-variable-picker:focus-visible[b-l4d6qryzmt] {
    box-shadow: var(--shadow-lg), 0 0 0 2px var(--accent-color);
}

/* ─── Search header ──────────────────────────────────────────────── */
.ee-variable-picker-search[b-l4d6qryzmt] {
    padding: var(--space-sm);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.ee-variable-picker-search input[b-l4d6qryzmt] {
    width: 100%;
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ee-variable-picker-search input:focus[b-l4d6qryzmt] {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: var(--shadow-focus);
}

/* ─── Row list ───────────────────────────────────────────────────── */
.ee-variable-picker-list[b-l4d6qryzmt] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-xs);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.ee-variable-picker-row[b-l4d6qryzmt] {
    display: flex;
    align-items: baseline;
    gap: 0;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    transition: background var(--transition-fast), color var(--transition-fast);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ee-variable-picker-row:hover[b-l4d6qryzmt] {
    background: var(--ee-state-hover);
    color: var(--text-primary);
}

.ee-variable-picker-row.ee-highlighted[b-l4d6qryzmt] {
    background: var(--ee-state-hover);
    color: var(--text-primary);
    border: 1px solid var(--accent-color);
}

.ee-variable-picker-node[b-l4d6qryzmt] {
    color: var(--accent-color-light);
    font-weight: var(--font-semibold);
}

.ee-variable-picker-path[b-l4d6qryzmt] {
    color: inherit;
}

/* ─── Empty state ────────────────────────────────────────────────── */
.ee-variable-picker-empty[b-l4d6qryzmt] {
    padding: var(--space-md);
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed, 1.6);
    font-style: italic;
}

/* ─── Bottom-sheet host (≤768px) ─────────────────────────────────── */
@media (max-width: 768px) {
    .ee-variable-picker[b-l4d6qryzmt] {
        /* Inside the panel's bottom-sheet variant, the picker reflows
           to span the panel width and float just above the rows. */
        top: auto;
        right: var(--space-sm);
        left: var(--space-sm);
        bottom: var(--space-md);
        width: auto;
    }
}
/* _content/Ayva.EventEngine/Components/Secrets/SecretsManagementPanel.razor.rz.scp.css */
/* Phase 5 Task 20 — SecretsManagementPanel scoped styles.

   Glass table + modal surface for the secret CRUD panel. Every value
   resolves to a var(--…) token from wwwroot/assets/css/ayva-theme.css
   per the project's no-hardcoded-styles rule. */

.ee-secrets-panel[b-jbw1v9kwf3] {
    padding: var(--space-lg);
    height: 100%;
    overflow-y: auto;
    color: var(--text-primary);
    font-family: var(--font-primary);
}

/* Header */

.ee-secrets-header[b-jbw1v9kwf3] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
    gap: var(--space-md);
}

.ee-secrets-header h1[b-jbw1v9kwf3] {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0;
}

.ee-secrets-actions[b-jbw1v9kwf3] {
    display: flex;
    gap: var(--space-sm);
}

/* Buttons */

.ee-btn-primary[b-jbw1v9kwf3],
.ee-btn-secondary[b-jbw1v9kwf3] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ee-btn-primary[b-jbw1v9kwf3] {
    background: var(--accent-gradient);
    color: var(--text-primary);
}

.ee-btn-primary:hover:not(:disabled)[b-jbw1v9kwf3] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.ee-btn-primary:disabled[b-jbw1v9kwf3],
.ee-btn-secondary:disabled[b-jbw1v9kwf3] {
    opacity: 0.4;
    cursor: not-allowed;
}

.ee-btn-secondary[b-jbw1v9kwf3] {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.ee-btn-secondary:hover:not(:disabled)[b-jbw1v9kwf3] {
    background: var(--bg-tertiary);
}

.ee-btn-icon[b-jbw1v9kwf3] {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--space-xs);
    cursor: pointer;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.ee-btn-icon:hover:not(:disabled)[b-jbw1v9kwf3] {
    color: var(--text-primary);
    border-color: var(--accent-color);
}

.ee-btn-icon.ee-btn-danger:hover:not(:disabled)[b-jbw1v9kwf3] {
    color: var(--color-error, #ff6b6b);
    border-color: var(--color-error, #ff6b6b);
}

.ee-btn-icon .material-icons[b-jbw1v9kwf3] {
    font-size: 1.1rem;
}

/* Banners */

.ee-action-error[b-jbw1v9kwf3] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border-left: 3px solid var(--color-error, #ff6b6b);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

.ee-action-error-text[b-jbw1v9kwf3] {
    flex: 1;
    color: var(--text-primary);
    font-size: var(--text-sm);
}

.ee-action-error-close[b-jbw1v9kwf3] {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--space-xs);
}

/* States */

.ee-secrets-loading[b-jbw1v9kwf3],
.ee-secrets-error[b-jbw1v9kwf3],
.ee-secrets-empty[b-jbw1v9kwf3] {
    text-align: center;
    padding: var(--space-2xl);
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.ee-secrets-empty .material-icons[b-jbw1v9kwf3] {
    font-size: 4rem;
    color: var(--text-muted);
}

.ee-secrets-empty h3[b-jbw1v9kwf3] {
    color: var(--text-primary);
    font-size: var(--text-xl);
    margin: 0;
}

.ee-secrets-empty code[b-jbw1v9kwf3] {
    background: var(--bg-secondary);
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--accent-color);
}

/* Table */

.ee-secrets-table[b-jbw1v9kwf3] {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.ee-secrets-table thead[b-jbw1v9kwf3] {
    background: var(--bg-tertiary);
}

.ee-secrets-table th[b-jbw1v9kwf3] {
    text-align: left;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--border-color);
}

.ee-secrets-table td[b-jbw1v9kwf3] {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.ee-secrets-table tbody tr:last-child td[b-jbw1v9kwf3] {
    border-bottom: none;
}

.ee-secrets-table tbody tr:hover[b-jbw1v9kwf3] {
    background: var(--bg-tertiary);
}

.ee-secrets-table code[b-jbw1v9kwf3] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--accent-color);
}

.ee-secrets-table time[b-jbw1v9kwf3] {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.ee-col-actions[b-jbw1v9kwf3] {
    text-align: right;
    display: flex;
    gap: var(--space-xs);
    justify-content: flex-end;
    align-items: center;
}

/* Scope badge */

.ee-scope-badge[b-jbw1v9kwf3] {
    display: inline-block;
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ee-scope-org[b-jbw1v9kwf3] {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.ee-scope-workflow[b-jbw1v9kwf3] {
    background: var(--accent-color-25);
    color: var(--accent-color);
}

/* Muted text */

.ee-muted[b-jbw1v9kwf3] {
    color: var(--text-muted);
    font-style: italic;
    font-size: var(--text-xs);
}

/* Modal */

.ee-modal-backdrop[b-jbw1v9kwf3] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--space-md);
}

.ee-modal[b-jbw1v9kwf3] {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 32rem;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.ee-modal-header[b-jbw1v9kwf3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-color);
}

.ee-modal-header h2[b-jbw1v9kwf3] {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}

.ee-modal-header code[b-jbw1v9kwf3] {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    color: var(--accent-color);
    margin-left: var(--space-xs);
}

.ee-modal-close[b-jbw1v9kwf3] {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--space-xs);
}

.ee-modal-body[b-jbw1v9kwf3] {
    padding: var(--space-lg);
    flex: 1;
    overflow-y: auto;
}

.ee-modal-footer[b-jbw1v9kwf3] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--border-color);
}

.ee-modal-error[b-jbw1v9kwf3] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    padding: var(--space-sm);
    background: var(--bg-secondary);
    border-left: 3px solid var(--color-error, #ff6b6b);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--text-primary);
}

/* Form fields */

.ee-form-group[b-jbw1v9kwf3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.ee-form-group label[b-jbw1v9kwf3] {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ee-form-group input[b-jbw1v9kwf3],
.ee-form-group select[b-jbw1v9kwf3] {
    padding: var(--space-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
}

.ee-form-group input:focus[b-jbw1v9kwf3],
.ee-form-group select:focus[b-jbw1v9kwf3] {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-color-25);
}

.ee-help[b-jbw1v9kwf3] {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.ee-help code[b-jbw1v9kwf3] {
    background: var(--bg-secondary);
    padding: 0 var(--space-2xs);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    color: var(--accent-color);
}

/* Spinner */

.ee-spin[b-jbw1v9kwf3] {
    animation: ee-spin-b-jbw1v9kwf3 1s linear infinite;
}

@keyframes ee-spin-b-jbw1v9kwf3 {
    to { transform: rotate(360deg); }
}
/* _content/Ayva.EventEngine/Components/Settings/DesignerSettingsPanel.razor.rz.scp.css */
/* Phase 5 Task 19A — DesignerSettingsPanel scoped styles.
   Every value references an ayva-theme token (var(--…)) per
   docs/UI_DESIGN.md. */

.ee-designer-settings[b-u69vsfr7rz] {
    padding: var(--space-lg);
    color: var(--text-primary);
    font-family: var(--font-primary);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.ee-designer-settings header h2[b-u69vsfr7rz] {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-xs) 0;
}

.ee-designer-settings .ee-help[b-u69vsfr7rz] {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin: 0;
    line-height: 1.6;
}

.ee-designer-settings .ee-help code[b-u69vsfr7rz] {
    font-family: var(--font-mono);
    background: var(--bg-card);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    font-size: var(--text-xs);
}

.ee-field-row[b-u69vsfr7rz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    max-width: 32rem;
}

.ee-field-row label[b-u69vsfr7rz] {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ee-field-row select[b-u69vsfr7rz] {
    padding: var(--space-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
}

.ee-field-row select:focus[b-u69vsfr7rz] {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-color-25);
}

.ee-actions[b-u69vsfr7rz] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-sm);
}

.ee-save-btn[b-u69vsfr7rz] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--accent-gradient);
    color: var(--text-primary);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ee-save-btn:hover:not([disabled])[b-u69vsfr7rz] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.ee-save-btn[disabled][b-u69vsfr7rz] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ee-saved[b-u69vsfr7rz] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--text-success, var(--accent-color));
    font-size: var(--text-sm);
    animation: ee-fade-in-b-u69vsfr7rz var(--transition-fast) ease-in;
}

@keyframes ee-fade-in-b-u69vsfr7rz {
    from { opacity: 0; transform: translateX(-4px); }
    to { opacity: 1; transform: translateX(0); }
}
/* _content/Ayva.EventEngine/Components/Settings/EventEngineSettings.razor.rz.scp.css */
/* Phase 5 Task 19A — EventEngineSettings tabbed container styles. */

.ee-settings-tabs[b-e7e6ipblyi] {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--text-primary);
    font-family: var(--font-primary);
}

.ee-settings-nav[b-e7e6ipblyi] {
    display: flex;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-lg) 0 var(--space-lg);
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    scrollbar-width: thin;
}

.ee-tab[b-e7e6ipblyi] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    color: var(--text-secondary);
    border: none;
    border-bottom: 2px solid transparent;
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.ee-tab:hover[b-e7e6ipblyi] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.ee-tab.ee-tab-active[b-e7e6ipblyi] {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
    background: var(--bg-card);
}

.ee-tab .material-icons[b-e7e6ipblyi] {
    font-size: 1.125rem;
}

.ee-tab-label[b-e7e6ipblyi] {
    line-height: 1;
}

.ee-settings-body[b-e7e6ipblyi] {
    flex: 1;
    overflow-y: auto;
}

@media (max-width: 640px) {
    .ee-settings-nav[b-e7e6ipblyi] {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }
    .ee-tab .ee-tab-label[b-e7e6ipblyi] {
        display: none;
    }
}
/* _content/Ayva.EventEngine/Components/Settings/InjectionCanariesPanel.razor.rz.scp.css */
/* Phase 5 Task 19A — InjectionCanariesPanel scoped styles. */

.ee-canaries-panel[b-nkthj39jid] {
    padding: var(--space-lg);
    color: var(--text-primary);
    font-family: var(--font-primary);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.ee-canaries-panel header h2[b-nkthj39jid] {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-xs) 0;
}

.ee-canaries-panel .ee-help[b-nkthj39jid] {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin: 0;
    line-height: 1.6;
}

.ee-canaries-panel .ee-help code[b-nkthj39jid] {
    font-family: var(--font-mono);
    background: var(--bg-card);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    font-size: var(--text-xs);
}

.ee-canaries-baseline[b-nkthj39jid],
.ee-canaries-editor[b-nkthj39jid] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
}

.ee-canaries-baseline h3[b-nkthj39jid],
.ee-canaries-editor h3[b-nkthj39jid] {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--space-sm) 0;
}

.ee-canaries-baseline ul[b-nkthj39jid] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--space-xs);
}

.ee-canaries-baseline li[b-nkthj39jid] {
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.ee-canaries-baseline code[b-nkthj39jid] {
    font-family: var(--font-mono);
    color: var(--text-primary);
    font-size: var(--text-xs);
}

.ee-editor-hint[b-nkthj39jid] {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    line-height: 1.5;
    margin: 0 0 var(--space-sm) 0;
}

.ee-canaries-editor textarea[b-nkthj39jid] {
    width: 100%;
    padding: var(--space-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    resize: vertical;
    min-height: 8rem;
}

.ee-canaries-editor textarea:focus[b-nkthj39jid] {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-color-25);
}

.ee-canary-error[b-nkthj39jid] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-error, rgba(239, 68, 68, 0.1));
    border: 1px solid var(--border-error, rgba(239, 68, 68, 0.4));
    border-radius: var(--radius-md);
    color: var(--text-error, #fca5a5);
    font-size: var(--text-sm);
    margin: var(--space-sm) 0 0 0;
}

.ee-canary-actions[b-nkthj39jid] {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-md);
    flex-wrap: wrap;
}

.ee-apply-button[b-nkthj39jid],
.ee-reset-button[b-nkthj39jid] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid var(--border-color);
}

.ee-apply-button[b-nkthj39jid] {
    background: var(--accent-gradient);
    color: var(--text-primary);
    border: none;
}

.ee-apply-button:hover:not([disabled])[b-nkthj39jid] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.ee-reset-button[b-nkthj39jid] {
    background: var(--bg-card);
    color: var(--text-secondary);
}

.ee-reset-button:hover:not([disabled])[b-nkthj39jid] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.ee-apply-button[disabled][b-nkthj39jid],
.ee-reset-button[disabled][b-nkthj39jid] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ee-canary-saved[b-nkthj39jid] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--text-success, var(--accent-color));
    font-size: var(--text-sm);
    margin: var(--space-sm) 0 0 0;
}
/* _content/Ayva.EventEngine/Components/Settings/ModelPricingPanel.razor.rz.scp.css */
/* Phase 5 Task 19A — ModelPricingPanel scoped styles. */

.ee-pricing-panel[b-4ibqe9tzeu] {
    padding: var(--space-lg);
    color: var(--text-primary);
    font-family: var(--font-primary);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.ee-pricing-panel header h2[b-4ibqe9tzeu] {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-xs) 0;
}

.ee-pricing-panel .ee-help[b-4ibqe9tzeu] {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin: 0;
    line-height: 1.6;
}

.ee-pricing-panel .ee-help code[b-4ibqe9tzeu],
.ee-help-secondary code[b-4ibqe9tzeu] {
    font-family: var(--font-mono);
    background: var(--bg-card);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    font-size: var(--text-xs);
}

.ee-pricing-empty[b-4ibqe9tzeu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    background: var(--bg-card);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
    text-align: center;
    gap: var(--space-sm);
}

.ee-pricing-empty .material-icons[b-4ibqe9tzeu] {
    font-size: 3rem;
    opacity: 0.5;
}

.ee-pricing-table[b-4ibqe9tzeu] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.ee-pricing-table thead[b-4ibqe9tzeu] {
    background: var(--bg-secondary);
}

.ee-pricing-table th[b-4ibqe9tzeu] {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--border-color);
}

.ee-pricing-table td[b-4ibqe9tzeu] {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.ee-pricing-table tbody tr:last-child td[b-4ibqe9tzeu] {
    border-bottom: none;
}

.ee-pricing-table code[b-4ibqe9tzeu] {
    font-family: var(--font-mono);
    color: var(--text-primary);
    font-size: var(--text-xs);
}

/* I1 fix — small inline badge identifying rows whose AppConfig keys
   carry an explicit operator override. Distinguishes saved overrides
   from seed-fallback rows so operators know which prices they've
   customized. Uses the accent palette like other status pills in the
   admin shell; sized to drop in next to the provider <code> tag. */
.ee-override-pill[b-4ibqe9tzeu] {
    display: inline-block;
    margin-left: var(--space-xs);
    padding: 0.0625rem 0.4rem;
    background: var(--accent-color-25);
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    vertical-align: middle;
}

.ee-pricing-table input[type='number'][b-4ibqe9tzeu] {
    width: 6.5rem;
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

.ee-pricing-table input[type='number']:focus[b-4ibqe9tzeu] {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-color-25);
}

.ee-col-actions[b-4ibqe9tzeu] {
    text-align: center;
    width: 6rem;
}

.ee-save-row[b-4ibqe9tzeu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xs);
    background: var(--accent-gradient);
    color: var(--text-primary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ee-save-row:hover:not([disabled])[b-4ibqe9tzeu] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.ee-save-row[disabled][b-4ibqe9tzeu] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ee-saved-inline[b-4ibqe9tzeu] {
    display: inline-flex;
    align-items: center;
    color: var(--text-success, var(--accent-color));
    margin-left: var(--space-xs);
    animation: ee-pricing-fade-b-4ibqe9tzeu var(--transition-fast) ease-in;
}

@keyframes ee-pricing-fade-b-4ibqe9tzeu {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ee-row-error td[b-4ibqe9tzeu] {
    background: var(--bg-error, rgba(239, 68, 68, 0.05));
    color: var(--text-error, #fca5a5);
    font-size: var(--text-xs);
    padding: var(--space-xs) var(--space-md);
}

.ee-row-error .material-icons[b-4ibqe9tzeu] {
    vertical-align: middle;
    font-size: 1rem;
    margin-right: var(--space-xs);
}

.ee-pricing-error[b-4ibqe9tzeu] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-error, rgba(239, 68, 68, 0.1));
    border: 1px solid var(--border-error, rgba(239, 68, 68, 0.4));
    border-radius: var(--radius-md);
    color: var(--text-error, #fca5a5);
    font-size: var(--text-sm);
}

.ee-pricing-add[b-4ibqe9tzeu] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
}

.ee-pricing-add h3[b-4ibqe9tzeu] {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--space-xs) 0;
}

.ee-help-secondary[b-4ibqe9tzeu] {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    line-height: 1.5;
    margin: 0 0 var(--space-sm) 0;
}

.ee-add-form[b-4ibqe9tzeu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--space-sm);
    align-items: center;
}

.ee-add-form input[b-4ibqe9tzeu] {
    padding: var(--space-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
}

.ee-add-form input:focus[b-4ibqe9tzeu] {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-color-25);
}

.ee-add-button[b-4ibqe9tzeu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--accent-gradient);
    color: var(--text-primary);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ee-add-button:hover:not([disabled])[b-4ibqe9tzeu] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.ee-add-button[disabled][b-4ibqe9tzeu] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* _content/Ayva.EventEngine/Components/Settings/ReviewerSettingsPanel.razor.rz.scp.css */
/* Phase 5 Task 19A — ReviewerSettingsPanel scoped styles. */

.ee-reviewer-settings[b-p1l90o8jg0] {
    padding: var(--space-lg);
    color: var(--text-primary);
    font-family: var(--font-primary);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.ee-reviewer-settings header h2[b-p1l90o8jg0] {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-xs) 0;
}

.ee-reviewer-settings .ee-help[b-p1l90o8jg0] {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin: 0;
    line-height: 1.6;
}

.ee-reviewer-settings .ee-help code[b-p1l90o8jg0] {
    font-family: var(--font-mono);
    background: var(--bg-card);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    font-size: var(--text-xs);
}

.ee-reviewer-error[b-p1l90o8jg0] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-error, rgba(239, 68, 68, 0.1));
    border: 1px solid var(--border-error, rgba(239, 68, 68, 0.4));
    border-radius: var(--radius-md);
    color: var(--text-error, #fca5a5);
    font-size: var(--text-sm);
}

.ee-field-grid[b-p1l90o8jg0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--space-md);
    max-width: 64rem;
}

.ee-field-row[b-p1l90o8jg0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.ee-field-row label[b-p1l90o8jg0] {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ee-field-row input[b-p1l90o8jg0],
.ee-field-row select[b-p1l90o8jg0] {
    padding: var(--space-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
}

.ee-field-row input:focus[b-p1l90o8jg0],
.ee-field-row select:focus[b-p1l90o8jg0] {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-color-25);
}

.ee-field-hint[b-p1l90o8jg0] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.4;
}

.ee-actions[b-p1l90o8jg0] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-sm);
}

.ee-save-btn[b-p1l90o8jg0] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--accent-gradient);
    color: var(--text-primary);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ee-save-btn:hover:not([disabled])[b-p1l90o8jg0] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.ee-save-btn[disabled][b-p1l90o8jg0] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ee-saved[b-p1l90o8jg0] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--text-success, var(--accent-color));
    font-size: var(--text-sm);
}
/* _content/Ayva.EventEngine/Components/StatusBadge.razor.rz.scp.css */
/*
    Phase 5 Task 7 — StatusBadge scoped styles.

    Every value references an ayva-theme token. Five severity buckets:
    info, success, warning, error, muted. Each maps to the matching
    --{name}-color / --{name}-bg / --{name}-border tokens.
*/

.ee-status[b-pbik8p17qr] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: 1.25rem;
    border-radius: var(--radius-md);
    border: 1px solid;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.ee-status-info[b-pbik8p17qr] {
    color: var(--info-text);
    background: var(--info-bg);
    border-color: var(--info-border);
}

.ee-status-success[b-pbik8p17qr] {
    color: var(--success-text);
    background: var(--success-bg);
    border-color: var(--success-border);
}

.ee-status-warning[b-pbik8p17qr] {
    color: var(--warning-text);
    background: var(--warning-bg);
    border-color: var(--warning-border);
}

.ee-status-error[b-pbik8p17qr] {
    color: var(--error-text);
    background: var(--error-bg);
    border-color: var(--error-border);
}

.ee-status-muted[b-pbik8p17qr] {
    color: var(--text-muted);
    background: var(--bg-card);
    border-color: var(--border-color);
}
/* _content/Ayva.EventEngine/Components/WorkflowDashboard.razor.rz.scp.css */
/*
    Phase 5 Task 7 — WorkflowDashboard scoped styles.

    Glass dashboard with 5-stat grid + tabbed content area. Every value
    references an ayva-theme token. Responsive at 768px (stat grid
    collapses to 2 columns, then 1 at narrower widths).
*/

.ee-dash[b-cb2ok2hln1] {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* ─── Header ────────────────────────────────────────────────────── */
.ee-dash-header[b-cb2ok2hln1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    backdrop-filter: var(--ee-node-blur);
}

.ee-dash-header-text[b-cb2ok2hln1] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-primary);
}

.ee-dash-header-text h1[b-cb2ok2hln1] {
    font-family: var(--font-primary);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0;
}

.ee-dash-subtitle[b-cb2ok2hln1] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.ee-dash-cta[b-cb2ok2hln1] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ee-dash-cta:hover:not(:disabled)[b-cb2ok2hln1] {
    background: var(--bg-hover);
    border-color: var(--accent-color);
    transform: translateY(-1px);
}

.ee-dash-cta:disabled[b-cb2ok2hln1] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ─── 6-stat grid (Phase 5 Task 22 added the Pending Approvals tile) ── */
.ee-dash-stats[b-cb2ok2hln1] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-md);
}

@media (max-width: 1280px) {
    .ee-dash-stats[b-cb2ok2hln1] { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .ee-dash-stats[b-cb2ok2hln1] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .ee-dash-stats[b-cb2ok2hln1] { grid-template-columns: 1fr; }
}

/* ─── Tabs ──────────────────────────────────────────────────────── */
.ee-dash-tabs[b-cb2ok2hln1] {
    display: flex;
    gap: var(--space-xs);
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    padding: 0 var(--space-xs);
}

.ee-dash-tab[b-cb2ok2hln1] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.ee-dash-tab:hover[b-cb2ok2hln1] {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.ee-dash-tab.active[b-cb2ok2hln1] {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

.ee-dash-tab-badge[b-cb2ok2hln1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    border-radius: 999px;
    background: var(--warning-color);
    color: var(--bg-base);
    font-size: 0.6875rem;
    font-weight: var(--font-bold);
}

.ee-dash-tab-badge-error[b-cb2ok2hln1] {
    background: var(--error-color);
}

/* ─── Tab content area ──────────────────────────────────────────── */
.ee-dash-tab-content[b-cb2ok2hln1] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    min-height: 240px;
    backdrop-filter: var(--ee-node-blur);
}

/* ─── Feed (Overview + Suspended tabs) ─────────────────────────── */
.ee-dash-feed[b-cb2ok2hln1] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.ee-dash-feed-row[b-cb2ok2hln1] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-overlay-dark);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.ee-dash-feed-row-suspended[b-cb2ok2hln1] {
    border-left: 3px solid var(--warning-color);
}

.ee-dash-feed-text[b-cb2ok2hln1] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.ee-dash-feed-name[b-cb2ok2hln1] {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ee-dash-feed-time[b-cb2ok2hln1] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.ee-dash-feed-cost[b-cb2ok2hln1] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--accent-color);
    flex-shrink: 0;
}

.ee-dash-empty[b-cb2ok2hln1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-xl);
    color: var(--text-muted);
    text-align: center;
}

/* ─── AI Cost tab ───────────────────────────────────────────────── */
.ee-dash-cost[b-cb2ok2hln1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.ee-dash-cost-summary[b-cb2ok2hln1] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.ee-dash-cost-label[b-cb2ok2hln1] {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ee-dash-cost-total[b-cb2ok2hln1] {
    font-family: var(--font-primary);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--accent-color);
}

.ee-dash-cost-chart[b-cb2ok2hln1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.ee-dash-cost-chart .ee-sparkline[b-cb2ok2hln1] {
    width: 100%;
    height: 96px;
}

.ee-dash-cost-axis[b-cb2ok2hln1] {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* ─── Suspended tab ─────────────────────────────────────────────── */
.ee-dash-suspended-actions[b-cb2ok2hln1] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.ee-dash-refresh-msg[b-cb2ok2hln1] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-style: italic;
}

/* ─── Dead Letters tab ──────────────────────────────────────────── */
.ee-dash-deadletters[b-cb2ok2hln1] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
}

.ee-dash-deadletters-count[b-cb2ok2hln1] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ee-dash-deadletters-num[b-cb2ok2hln1] {
    font-family: var(--font-primary);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--error-color);
}

.ee-dash-deadletters-label[b-cb2ok2hln1] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* ─── Errors ───────────────────────────────────────────────────── */
.ee-dash-error[b-cb2ok2hln1] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    border-radius: var(--radius-md);
    color: var(--error-text);
}
/* _content/Ayva.EventEngine/Components/WorkflowList.razor.rz.scp.css */
/*
    Phase 5 Task 7 — WorkflowList scoped styles.

    Glassmorphism dark theme: every row is a glass card with backdrop
    blur, border, and rounded corners. Suspended rows carry an amber
    left border to telegraph "this row needs attention".

    Every value references an ayva-theme token. Zero hardcoded colors,
    fonts, or sizes per CLAUDE.md UI Standards. Responsive at 768px.
*/

/* ─── Container ─────────────────────────────────────────────────── */
.ee-list[b-g3prfa6nhs] {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* ─── Header ────────────────────────────────────────────────────── */
.ee-list-header[b-g3prfa6nhs] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    backdrop-filter: var(--ee-node-blur);
}

.ee-list-title[b-g3prfa6nhs] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-primary);
}

.ee-list-title h1[b-g3prfa6nhs] {
    font-family: var(--font-primary);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    margin: 0;
    color: var(--text-primary);
}

.ee-list-count[b-g3prfa6nhs] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-left: auto;
}

.ee-list-actions[b-g3prfa6nhs] {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    align-items: center;
}

.ee-list-search[b-g3prfa6nhs] {
    flex: 1 1 240px;
    min-width: 200px;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    transition: border-color var(--transition-fast);
}

.ee-list-search:focus[b-g3prfa6nhs] {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-color-15);
}

.ee-list-search[b-g3prfa6nhs]::placeholder {
    color: var(--text-muted);
}

.ee-list-cta[b-g3prfa6nhs] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ee-list-cta:hover[b-g3prfa6nhs] {
    background: var(--bg-hover);
    border-color: var(--accent-color);
    transform: translateY(-1px);
}

.ee-list-cta-primary[b-g3prfa6nhs] {
    background: var(--accent-gradient);
    border-color: var(--accent-color);
    color: var(--text-primary);
}

.ee-list-cta-primary:hover[b-g3prfa6nhs] {
    background: var(--accent-gradient-hover);
    box-shadow: var(--shadow-sm);
}

.ee-list-cta-danger[b-g3prfa6nhs] {
    color: var(--danger-color, var(--error-color, #ef4444));
    border-color: var(--danger-color-30, rgba(239, 68, 68, 0.3));
}

.ee-list-cta-danger:hover[b-g3prfa6nhs] {
    background: var(--danger-color-10, rgba(239, 68, 68, 0.1));
    border-color: var(--danger-color, var(--error-color, #ef4444));
    color: var(--danger-color, var(--error-color, #ef4444));
}

.ee-list-cta-danger:disabled[b-g3prfa6nhs] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ─── Rows ─────────────────────────────────────────────────────── */
.ee-list-rows[b-g3prfa6nhs] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.ee-list-row[b-g3prfa6nhs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    backdrop-filter: var(--ee-node-blur);
    transition: all var(--transition-fast);
}

.ee-list-row:hover[b-g3prfa6nhs] {
    border-color: var(--accent-color);
    background: var(--bg-hover);
    transform: translateY(-1px);
}

/* Suspended rows — amber left border + subtle warning bg tint */
.ee-list-row-suspended[b-g3prfa6nhs] {
    border-left: 3px solid var(--warning-color);
    background: var(--warning-color-light);
}

.ee-list-row-suspended:hover[b-g3prfa6nhs] {
    border-color: var(--warning-color);
    background: var(--warning-bg);
}

.ee-list-row-main[b-g3prfa6nhs] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex: 1 1 auto;
    min-width: 0;             /* lets the name truncate inside flex */
}

.ee-list-row-text[b-g3prfa6nhs] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ee-list-row-name[b-g3prfa6nhs] {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.ee-list-row-name:hover[b-g3prfa6nhs] {
    color: var(--accent-color);
    text-decoration: underline;
}

.ee-list-row-desc[b-g3prfa6nhs] {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ee-list-row-suspended-subtitle[b-g3prfa6nhs] {
    font-size: var(--text-xs);
    color: var(--warning-text);
    font-style: italic;
    margin-top: 0.125rem;
}

.ee-list-row-meta[b-g3prfa6nhs] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}

/* ─── Chips ─────────────────────────────────────────────────────── */
.ee-list-row-chip[b-g3prfa6nhs] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.125rem 0.5rem;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    border-radius: var(--radius-md);
    border: 1px solid;
}

.ee-list-row-chip-ai[b-g3prfa6nhs] {
    color: var(--accent-color);
    background: var(--accent-color-10);
    border-color: var(--accent-color-30);
}

.ee-list-row-chip-sensitive[b-g3prfa6nhs] {
    color: var(--warning-text);
    background: var(--warning-bg);
    border-color: var(--warning-border);
}

/* ─── Toggle (custom checkbox styled as iOS-style switch) ────── */
.ee-list-row-toggle[b-g3prfa6nhs] {
    position: relative;
    display: inline-block;
    width: 2.25rem;
    height: 1.25rem;
    cursor: pointer;
}

.ee-list-row-toggle input[b-g3prfa6nhs] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ee-list-row-toggle-track[b-g3prfa6nhs] {
    position: absolute;
    inset: 0;
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    transition: background var(--transition-fast);
}

.ee-list-row-toggle-track[b-g3prfa6nhs]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.125rem;
    width: 1rem;
    height: 1rem;
    background: var(--text-secondary);
    border-radius: 50%;
    transform: translateY(-50%);
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.ee-list-row-toggle input:checked + .ee-list-row-toggle-track[b-g3prfa6nhs] {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.ee-list-row-toggle input:checked + .ee-list-row-toggle-track[b-g3prfa6nhs]::before {
    transform: translate(1rem, -50%);
    background: var(--text-primary);
}

.ee-list-row-edit[b-g3prfa6nhs] {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ee-list-row-edit:hover[b-g3prfa6nhs] {
    background: var(--bg-hover);
    color: var(--accent-color);
    border-color: var(--accent-color);
}

/* ─── Empty state ───────────────────────────────────────────────── */
.ee-list-empty[b-g3prfa6nhs] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
}

.ee-list-empty-card[b-g3prfa6nhs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    backdrop-filter: var(--ee-node-blur);
    max-width: 28rem;
    text-align: center;
}

.ee-list-empty-card h2[b-g3prfa6nhs] {
    font-family: var(--font-primary);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}

.ee-list-empty-card p[b-g3prfa6nhs] {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin: 0;
}

.ee-list-empty-actions[b-g3prfa6nhs] {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    justify-content: center;
}

.ee-list-no-match[b-g3prfa6nhs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xl);
    color: var(--text-muted);
    text-align: center;
}

.ee-list-error[b-g3prfa6nhs] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    border-radius: var(--radius-md);
    color: var(--error-text);
}

/* ─── Responsive: stack header actions at narrow widths ─────────── */
@media (max-width: 768px) {
    .ee-list-row[b-g3prfa6nhs] {
        flex-direction: column;
        align-items: stretch;
    }
    .ee-list-row-meta[b-g3prfa6nhs] {
        justify-content: flex-end;
        flex-wrap: wrap;
    }
}
/* _content/Ayva.EventEngine/Widgets/WorkflowExecutionFeedWidget.razor.rz.scp.css */
.widget-content[b-wqzv5pirdd] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
}

/* ── Loading / error / empty states ─────────────────────── */

.loading-state[b-wqzv5pirdd],
.empty-state[b-wqzv5pirdd],
.error-state[b-wqzv5pirdd] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    font-size: 0.875rem;
}

.loading-state[b-wqzv5pirdd] {
    color: var(--text-secondary);
}

.empty-state[b-wqzv5pirdd] {
    color: var(--text-secondary);
    font-style: italic;
}

.error-state[b-wqzv5pirdd] {
    color: var(--error-color);
    text-align: center;
}

/* ── Feed list ───────────────────────────────────────────── */

.execution-feed[b-wqzv5pirdd] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

/* ── Individual row ─────────────────────────────────────── */

.execution-row[b-wqzv5pirdd] {
    display: grid;
    grid-template-columns: 1.25rem 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--text-secondary) 12%, transparent);
    transition: background var(--transition-base);
}

.execution-row:last-child[b-wqzv5pirdd] {
    border-bottom: none;
}

/* ── Status icon ─────────────────────────────────────────── */

.status-icon[b-wqzv5pirdd] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.status-completed[b-wqzv5pirdd] {
    color: var(--success-color);
}

.status-failed[b-wqzv5pirdd] {
    color: var(--error-color);
}

.status-running[b-wqzv5pirdd] {
    color: var(--accent-color);
}

.status-other[b-wqzv5pirdd] {
    color: var(--text-secondary);
}

/* ── Workflow name ───────────────────────────────────────── */

.workflow-name[b-wqzv5pirdd] {
    font-size: 0.8125rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-primary);
}

/* ── Relative time ───────────────────────────────────────── */

.relative-time[b-wqzv5pirdd] {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}
/* _content/Ayva.EventEngine/Widgets/WorkflowRunsTodayWidget.razor.rz.scp.css */
.widget-content[b-hs0i4sfiy4] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: var(--spacing-md, 1rem);
}

/* ── Loading / error states ─────────────────────────────── */

.loading-state[b-hs0i4sfiy4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--text-secondary);
}

.error-state[b-hs0i4sfiy4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--spacing-md, 1rem);
    color: var(--error-color);
    font-size: 0.875rem;
    text-align: center;
}

/* ── Main layout ─────────────────────────────────────────── */

.runs-today-layout[b-hs0i4sfiy4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
    width: 100%;
}

/* ── Primary stat: large run count ──────────────────────── */

.primary-stat[b-hs0i4sfiy4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.runs-count[b-hs0i4sfiy4] {
    font-size: 3rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-primary);
    letter-spacing: -0.02em;
}

.runs-label[b-hs0i4sfiy4] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.125rem;
}

/* ── Secondary stats row ─────────────────────────────────── */

.secondary-stats[b-hs0i4sfiy4] {
    display: flex;
    gap: var(--spacing-lg, 1.5rem);
    align-items: flex-start;
}

.secondary-stat[b-hs0i4sfiy4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
}

.stat-value[b-hs0i4sfiy4] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    font-family: var(--font-primary);
}

.stat-label[b-hs0i4sfiy4] {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Error rate colouring ───────────────────────────────── */

.error-rate-good[b-hs0i4sfiy4] {
    color: var(--success-color);
}

.error-rate-warn[b-hs0i4sfiy4] {
    color: var(--warning-color);
}

.error-rate-bad[b-hs0i4sfiy4] {
    color: var(--error-color);
}

/* ── Suspended badge ────────────────────────────────────── */

.suspended-badge[b-hs0i4sfiy4] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.625rem;
    background: color-mix(in srgb, var(--warning-color) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning-color) 40%, transparent);
    border-radius: var(--radius-sm);
    color: var(--warning-color);
    font-size: 0.75rem;
    font-weight: 500;
}