/* ===== Event setup checklist dashlet (Phase 2) =====
   "Finish setting up your event" — a manual check-off guidance card injected as
   the first item in the right column of the event dashboard for ui-refresh users
   on a new (draft) event. Follows design 4a. All colors resolve to semantic
   surface/accent tokens so the card follows every surface tone + accent mode.
   Scoped to .ui-refresh so nothing leaks into the legacy dashboard. */

.ui-refresh .panel.dash-panel[data-type="event_setup_checklist"] .panel-body {
    padding: 0 !important;
}

.ui-refresh .panel.dash-panel[data-type="event_setup_checklist"] .panel-heading.dash-panel-heading {
    padding-bottom: var(--space-4) !important;
}

.ui-refresh .event-setup-checklist {
    position: relative; /* anchor for the confetti canvas */
}

/* ----- Header ----- */
.ui-refresh .event-setup-checklist__head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--accent-subtle);
    border-bottom: 1px solid var(--border-subtle);
}
.ui-refresh .event-setup-checklist__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--accent-primary);
    color: var(--fg-on-accent);
    font-size: 20px;
    flex-shrink: 0;
}
.ui-refresh .event-setup-checklist__intro {
    flex: 1;
    min-width: 0;
}
.ui-refresh .event-setup-checklist__title {
    font-family: var(--font-family);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    color: var(--fg-default);
    line-height: 1.25;
}
.ui-refresh .event-setup-checklist__subtitle {
    font-family: var(--font-family);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-sm);
    color: var(--fg-muted);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: wrap;
}
.ui-refresh .event-setup-checklist__progress {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}
.ui-refresh .event-setup-checklist__progress-label {
    font-family: var(--font-family);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
    color: var(--accent-on-tint);
    white-space: nowrap;
}
.ui-refresh .event-setup-checklist__progress-track {
    width: 80px;
    height: 7px;
    border-radius: var(--radius-full);
    background: var(--accent-muted);
    overflow: hidden;
}
.ui-refresh .event-setup-checklist__progress-fill {
    display: block;
    height: 100%;
    background: var(--accent-primary);
    border-radius: var(--radius-full);
    transition: width var(--transition-normal);
}
.ui-refresh .event-setup-checklist__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--fg-muted);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.ui-refresh .event-setup-checklist__icon-btn:hover {
    background: var(--state-hover);
}
.ui-refresh .event-setup-checklist__icon-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.ui-refresh .event-setup-checklist__icon-btn [data-chevron] {
    transition: transform var(--transition-normal);
}
.ui-refresh .event-setup-checklist.is-collapsed [data-chevron] {
    transform: rotate(180deg);
}
.ui-refresh .event-setup-checklist.is-collapsed .event-setup-checklist__body {
    display: none;
}

/* ----- Rows ----- */
.ui-refresh .event-setup-checklist__row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-subtle);
}
.ui-refresh .event-setup-checklist__row:last-child {
    border-bottom: none;
}
.ui-refresh .event-setup-checklist__row:hover {
    background: var(--state-hover);
}
.ui-refresh .event-setup-checklist__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    padding: 0;
    border: 2px solid var(--accent-muted);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--fg-on-accent);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.ui-refresh .event-setup-checklist__check i {
    font-size: 12px;
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.ui-refresh .event-setup-checklist__check:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.ui-refresh .event-setup-checklist__row.is-done .event-setup-checklist__check {
    background: var(--color-success);
    border-color: var(--color-success);
}
.ui-refresh .event-setup-checklist__row.is-done .event-setup-checklist__check i {
    opacity: 1;
}
.ui-refresh .event-setup-checklist__row-text {
    flex: 1;
    min-width: 0;
}
.ui-refresh .event-setup-checklist__row-title {
    font-family: var(--font-family);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--fg-default);
}
.ui-refresh .event-setup-checklist__row.is-done .event-setup-checklist__row-title {
    color: var(--fg-subtle);
    text-decoration: line-through;
}
.ui-refresh .event-setup-checklist__row-desc {
    font-family: var(--font-family);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-xs);
    color: var(--fg-muted);
    margin-top: 1px;
}

/* Done label (shown only when complete) */
.ui-refresh .event-setup-checklist__done-label {
    display: none;
    flex-shrink: 0;
    font-family: var(--font-family);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-success);
}
.ui-refresh .event-setup-checklist__row.is-done .event-setup-checklist__done-label {
    display: inline;
}

/* Set up link (shown only when pending) */
.ui-refresh .event-setup-checklist__setup-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    height: 32px;
    padding: 0 13px;
    border: 1.5px solid var(--accent-primary);
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--accent-primary);
    font-family: var(--font-family);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-segmented);
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.ui-refresh .event-setup-checklist__setup-btn:hover,
.ui-refresh .event-setup-checklist__setup-btn:focus {
    background: var(--accent-subtle);
    color: var(--accent-primary);
    text-decoration: none;
}
.ui-refresh .event-setup-checklist__row.is-done .event-setup-checklist__setup-btn {
    display: none;
}

/* ----- Completion state: swap the checklist rows for a "what's next" list ----- */
.ui-refresh .event-setup-checklist__complete {
    display: none;
}
.ui-refresh .event-setup-checklist.is-complete .event-setup-checklist__rows {
    display: none;
}
.ui-refresh .event-setup-checklist.is-complete .event-setup-checklist__complete {
    display: block;
    animation: event-setup-checklist-fade-in var(--transition-slow) ease both;
}
@keyframes event-setup-checklist-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .ui-refresh .event-setup-checklist.is-complete .event-setup-checklist__complete {
        animation: none;
    }
}

.ui-refresh .event-setup-checklist__celebrate {
    padding: var(--space-5) var(--space-5) var(--space-3);
    text-align: center;
}
.ui-refresh .event-setup-checklist__celebrate-title {
    font-family: var(--font-family);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    color: var(--fg-default);
}
.ui-refresh .event-setup-checklist__celebrate-sub {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--fg-muted);
    margin-top: 2px;
}

/* Suggestion rows — full-width links, styled like the checklist rows. */
.ui-refresh .event-setup-checklist__suggest {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-top: 1px solid var(--border-subtle);
    color: inherit;
    text-decoration: none;
    transition: background var(--transition-fast);
}
.ui-refresh .event-setup-checklist__suggest:hover,
.ui-refresh .event-setup-checklist__suggest:focus {
    background: var(--state-hover);
    text-decoration: none;
}
.ui-refresh .event-setup-checklist__suggest-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--radius-lg);
    background: var(--accent-subtle);
    color: var(--accent-on-tint);
    font-size: 15px;
}
.ui-refresh .event-setup-checklist__suggest-text {
    flex: 1;
    min-width: 0;
}
.ui-refresh .event-setup-checklist__suggest-title {
    display: block;
    font-family: var(--font-family);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--fg-default);
}
.ui-refresh .event-setup-checklist__suggest-desc {
    display: block;
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    color: var(--fg-muted);
    margin-top: 1px;
}
.ui-refresh .event-setup-checklist__suggest-arrow {
    flex-shrink: 0;
    color: var(--fg-subtle);
    font-size: 13px;
}

/* Confetti burst overlay (added/removed by JS). */
.ui-refresh .event-setup-checklist__confetti {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}