/* Steps panel overrides on top of style.css.
   Ported from the gold-standard reviewer UI at
   /weka/oe-training-default/chrisk/data/how_to_use/static/annotator/gold.css.
   Only the steps-panel + active-step banner rules are included; the
   editable header/goal/order chrome from the reviewer is left out. */

.steps-panel {
    width: 480px;
    flex-shrink: 0;
    background: #181b20;
    border-right: 1px solid #2a2f38;
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* The right-hand Annotations list is redundant now; hide it. */
.side-panel { display: none !important; }

.steps-panel h2 {
    margin: 0 0 8px 0;
    font-size: 15px;
    color: #F472B6;
}

.steps-panel kbd {
    background: #0f3460;
    border: 1px solid #1e3a5f;
    border-radius: 3px;
    padding: 1px 6px;
    font-size: 11px;
    font-family: inherit;
    color: #e0e0e0;
}

.steps-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
    counter-reset: step;
}

.steps-list li {
    display: block;
    padding: 10px 12px 10px 34px;
    margin-bottom: 8px;
    border: 1px solid #2a2f38;
    border-radius: 6px;
    background: #1f232a;
    position: relative;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

.steps-list li:hover { border-color: #3b4250; }

.steps-list li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 10px;
    top: 10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2b3140;
    color: #bbb;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.steps-list li.active {
    border-color: #FF4DA6;
    background: #2c1a25;
}

.steps-list li.active::before {
    background: #FF4DA6;
    color: #fff;
}

.steps-list li.done {
    background: #1a2c20;
    border-color: #2d4a36;
}

.steps-list li.done::before {
    background: #2d7a43;
    color: #fff;
    content: "\2713";
}

.step-row-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    padding-right: 110px;
}

.step-drag-handle {
    cursor: grab;
    color: #8a8f9a;
    font-size: 14px;
    line-height: 1;
    user-select: none;
}
.step-drag-handle:hover { color: #d8dbe2; }
.step-drag-handle:active { cursor: grabbing; }

.step-type-select {
    flex: 1;
    min-width: 0;
    background: #0f172a;
    color: #FF4DA6;
    border: 1px solid #2a2f38;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 4px;
    font-family: inherit;
}
.step-type-select:hover { border-color: #3b4250; }
.step-type-select:focus { outline: none; border-color: #FF4DA6; }

.step-command-input {
    width: 100%;
    box-sizing: border-box;
    background: #161b22;
    border: 1px solid #2a2f38;
    color: #d8dbe2;
    border-radius: 4px;
    padding: 5px 7px;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.35;
    resize: vertical;
    min-height: 36px;
    overflow: hidden;
}
.step-command-input:focus {
    outline: none;
    border-color: #FF4DA6;
    background: #1b2028;
}

.step-placed-count {
    font-size: 10px;
    color: #8a8f9a;
    margin-top: 6px;
}

.step-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    align-items: center;
}

.step-delete-btn {
    background: transparent;
    border: 1px solid #3b4250;
    color: #8a8f9a;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1;
    padding: 1px 7px;
    cursor: pointer;
    font-family: inherit;
}
.step-delete-btn:hover {
    color: #fca5a5;
    border-color: #dc2626;
}

.steps-list li.step-dragging { opacity: 0.4; }
.steps-list li.step-drop-target {
    border-color: #FF4DA6;
    box-shadow: inset 0 -2px 0 0 #FF4DA6;
}

.add-step-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 8px;
    background: transparent;
    border: 1px dashed #3b4250;
    color: #F472B6;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.add-step-btn:hover {
    border-color: #FF4DA6;
    color: #fff;
    background: #2c1a25;
}

/* Inline annotation chips under each step. */
.step-annotations {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.step-ann-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px 3px 8px;
    background: #0f172a;
    border: 1px solid #2a2f38;
    border-radius: 999px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.2;
}
.step-ann-chip:hover { border-color: #3b4250; }
.step-ann-chip.active {
    border-color: #FF4DA6;
    background: #2c1a25;
}
.step-ann-chip .ann-letter {
    font-weight: 800;
    color: #fbbf24;
    letter-spacing: 0.5px;
    font-family: ui-monospace, Menlo, monospace;
}
.step-ann-chip .ann-dir {
    color: #93c5fd;
    font-weight: 700;
    width: 14px;
    text-align: center;
}
.step-ann-chip .ann-dir.into,
.step-ann-chip .ann-dir.out { color: #f472b6; }
.step-ann-chip .ann-dir.point { color: #6b7280; }
.step-ann-chip .ann-del-btn,
.step-ann-chip .ann-move-btn {
    background: transparent;
    border: none;
    color: #6b7280;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    padding: 2px 3px;
    border-radius: 3px;
    font-family: inherit;
}
.step-ann-chip .ann-del-btn { font-size: 13px; }
.step-ann-chip .ann-del-btn:hover { color: #fca5a5; background: rgba(220, 38, 38, 0.15); }
.step-ann-chip .ann-move-btn:hover:not(:disabled) { color: #d8dbe2; background: rgba(255, 255, 255, 0.06); }
.step-ann-chip .ann-move-btn:disabled { opacity: 0.25; cursor: default; }

/* In no-match steps, chips are muted. */
.steps-list li.no-match .step-annotations { opacity: 0.35; }

/* Canvas panel should shrink without pushing anything offscreen */
.canvas-panel {
    min-width: 0;
}

/* Persistent banner showing which step the next canvas click will land on. */
.active-step-banner {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(255, 77, 166, 0.18);
    border: 1px solid #FF4DA6;
    border-radius: 999px;
    font-size: 12px;
    color: #fff;
    max-width: min(720px, 80%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}
.active-step-banner .asb-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fbcfe8;
    font-weight: 700;
}
.active-step-banner .asb-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FF4DA6;
    color: #fff;
    font-weight: 800;
    font-size: 11px;
}
.active-step-banner .asb-cmd {
    color: #fef3f8;
    font-weight: 600;
    max-width: 460px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.active-step-banner .asb-type {
    font-size: 10px;
    color: #fbcfe8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    padding: 1px 6px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 4px;
}
.active-step-banner.none {
    background: rgba(251, 191, 36, 0.14);
    border-color: #fbbf24;
}
.active-step-banner.none .asb-num { background: #fbbf24; color: #1a1a2e; }

/* Per-step "no match" flag inside the Steps panel */
.steps-list li .step-no-match-btn {
    background: transparent;
    border: 1px solid #3b4250;
    color: #8a8f9a;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 2px 6px;
    cursor: pointer;
    font-family: inherit;
}
.steps-list li .step-no-match-btn:hover {
    color: #fca5a5;
    border-color: #dc2626;
}
.steps-list li.no-match {
    background: #2a1818;
    border-color: #7f1d1d;
    opacity: 0.85;
}
.steps-list li.no-match .step-command { text-decoration: line-through; color: #9ca3af; }
.steps-list li.no-match .step-placed-count { visibility: hidden; }
.steps-list li.no-match .step-no-match-btn {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
}
.steps-list li.no-match::before {
    background: #7f1d1d !important;
    color: #fff !important;
    content: "\2715" !important;
}