.state-diagram {
    display: grid;
    grid-template-columns: auto auto auto auto auto; /* State1 Arrow1 State2 Arrow2 State3 */
    grid-template-rows: auto auto; /* States row, Buttons row */
    gap: 10px;
    justify-items: center;
    align-items: center;
    max-width: 700px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

.state {
    padding: 8px 16px;
    border-radius: 4px;
    text-align: center;
    font-size: 1rem;
}

.current {
    font-weight: bold;
    background-color: #fff3cd; /* Bootstrap warning light */
    border: 1px solid #ffca2c;
}

.arrow {
    font-size: 1.2em;
    color: #6c757d; /* Bootstrap secondary */
}

.action-button {
    grid-row: 2;
    font-weight: bold;
}

.open-button {
    grid-column: 3; /* Aligned under State2 (Open for voting) */
}

.close-button {
    grid-column: 5; /* Aligned under State3 (Closed) */
}

/* State positions */
#state-editing { grid-column: 1; grid-row: 1; }
#arrow1 { grid-column: 2; grid-row: 1; }
#state-open { grid-column: 3; grid-row: 1; }
#arrow2 { grid-column: 4; grid-row: 1; }
#state-closed { grid-column: 5; grid-row: 1; }

/* vote-on.ezt  */
.issue-item { margin-bottom: 1rem; }
.action-buttons { margin-left: 1rem; }
.vote-radio { margin-left: 1rem; }
.description { display: none; }
.description.show { display: block; }
.twiddle { cursor: pointer; }

/* State stepper dots in the info box card header within manage/EID */
.election-step-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #adb5bd;
    background: transparent;
    flex-shrink: 0;
}

.election-step-dot.step-current {
    border-color: #212529;
    border-width: 2.5px;
    background: transparent;
}

.election-step-dot.step-done {
    border-color: #495057;
    background: #495057;
}