/* ======================================================================
 * UndoToolbar styling -- matches the theme tokens defined in base.html so
 * the buttons read correctly in both light and dark themes without any
 * per-theme overrides.
 * ====================================================================== */

.undo-redo-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
}

.undo-redo-toolbar .btn-group {
    /* Bootstrap default already collapses borders within a group; just
       ensure rounded corners on the outer edges read against the toolbar
       chrome of the survey header. */
    box-shadow: var(--shadow-sm);
}

.undo-redo-toolbar .undo-redo-main {
    /* Override Bootstrap's outline-secondary so the icon stays legible in
       dark mode where the token-driven border-default sits darker than the
       default. We rely on tokens rather than fixed colors so theme swap
       works automatically. */
    color: var(--text-primary);
    border-color: var(--border-default);
    background: var(--surface-1);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* Text labels next to the icons. With just icons, ↺ and ↻ were too easy to
   confuse at small sizes; the explicit "Undo" / "Redo" reads at a glance. */
.undo-redo-toolbar .undo-redo-label {
    font-weight: 500;
    font-size: 0.85rem;
    line-height: 1;
}
/* Undo: icon on the left, label on the right. Redo: label on the left,
   icon on the right -- mirroring the arrow direction so the eye reads
   "back" vs "forward" without needing the text. */
.undo-redo-toolbar .undo-main { padding-left: 0.55rem; padding-right: 0.7rem; }
.undo-redo-toolbar .redo-main { padding-left: 0.7rem; padding-right: 0.55rem; }

.undo-redo-toolbar .undo-redo-main:hover:not(:disabled),
.undo-redo-toolbar .undo-redo-chev:hover:not(:disabled) {
    background: var(--surface-hover);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.undo-redo-toolbar .undo-redo-main:focus-visible,
.undo-redo-toolbar .undo-redo-chev:focus-visible {
    box-shadow: 0 0 0 3px var(--accent-ring);
    border-color: var(--accent);
    z-index: 2;
}

.undo-redo-toolbar .undo-redo-main:disabled,
.undo-redo-toolbar .undo-redo-chev:disabled {
    color: var(--text-tertiary);
    background: var(--surface-1);
    border-color: var(--border-subtle);
    opacity: 0.65;
    cursor: not-allowed;
}

.undo-redo-toolbar .undo-redo-chev {
    color: var(--text-primary);
    background: var(--surface-1);
    border-color: var(--border-default);
}

/* History dropdown -- single-column list with label + timestamp on each
   row. The "and N more" cascade hint sits inline with the label so the
   timestamp column stays aligned. */

.undo-history-menu {
    min-width: 280px;
    max-width: 380px;
    max-height: 380px;
    overflow-y: auto;
    padding: 0.25rem 0;
}

.undo-history-menu .undo-history-header {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    padding: 0.35rem 0.85rem 0.25rem;
    margin: 0;
}

.undo-history-menu .undo-history-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.4rem 0.85rem;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    font-size: 0.875rem;
}

.undo-history-menu .undo-history-item:hover,
.undo-history-menu .undo-history-item:focus-visible {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.undo-history-menu .undo-history-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.undo-history-menu .undo-history-cascade {
    margin-left: 0.25rem;
}

.undo-history-menu .undo-history-time {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

.undo-history-menu .undo-history-empty {
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
}

/* Page badge inside each history-dropdown row. The badge tells the user
   which page the change lives on -- and that clicking the row will
   navigate them there if they're not already on it. Tinted per page
   using the existing flow-type-* color palette so Builder/Flow/Settings
   each get a distinct, theme-aware color. */
.undo-history-menu .undo-history-page {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.4;
    border: 1px solid transparent;
    vertical-align: 0.05em;
}
.undo-history-menu .undo-history-page[data-page="builder"] {
    color: var(--type-block);
    background: var(--type-block-soft);
    border-color: var(--type-block);
}
.undo-history-menu .undo-history-page[data-page="flow"] {
    color: var(--type-branch);
    background: var(--type-branch-soft);
    border-color: var(--type-branch);
}
.undo-history-menu .undo-history-page[data-page="settings"] {
    color: var(--text-secondary);
    background: var(--surface-2);
    border-color: var(--border-default);
}

/* Transient highlight applied by _scrollToEntity. After scrolling the
   affected element into view, we briefly outline it with the accent ring
   so the user's eye lands on the exact location of the change. The class
   is removed ~1.4s later, after which the element returns to its normal
   styling. Works on every researcher entity container thanks to the
   uniform .question-item / .page-block / .flow-element / [data-undo-key]
   selectors used by _scrollToEntity. */
.undo-flash {
    /* Outline rather than border, so it doesn't shift surrounding layout. */
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
    transition: outline-color 0.5s ease-out, background-color 0.5s ease-out;
    background-color: var(--accent-soft);
    animation: undo-flash-pulse 1.4s ease-out;
}
@keyframes undo-flash-pulse {
    0%   { outline-color: var(--accent);         background-color: var(--accent-soft); }
    60%  { outline-color: var(--accent);         background-color: var(--accent-soft); }
    100% { outline-color: transparent;           background-color: transparent; }
}

/* Header-bar placement: the toolbar lives in the survey-header-actions
   row, adjacent to the version controls. Add a divider after it via the
   shared .survey-header-divider class to cluster it visually as its own
   group, matching the existing divider pattern. */