/* Hero action buttons (Copy link + Check-in) and the check-in modal.
   Markup: Views/Tournament/_HeroActions.cshtml, behaviour: Scripts/tournament/hero-actions.js.
   Buttons are .sc-btn (components-v2.css); only layout + the modal live here. */

.ha-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ha-actions .ha-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ha-actions .ha-copy.is-copied {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Details hero (_TournamentHero) keeps its own top-right .td-hero-actions box; in the hub hero the buttons sit at the end of the CTA row. */
.fw-hero-cta-row .ha-actions { margin-left: auto; }

/* ---- Modal (X button, backdrop click and Escape are wired in hero-actions.js) ---- */
.ha-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 1050);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--modal-overlay-bg, rgba(0, 0, 0, 0.6));
    -webkit-backdrop-filter: var(--modal-overlay-blur, none);
    backdrop-filter: var(--modal-overlay-blur, none);
}

.ha-modal[hidden] { display: none; }

.ha-modal__panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 520px;
    max-height: 86vh;
    background: var(--color-modal-bg, var(--card-bg, #1b2130));
    border: 1px solid var(--color-border, var(--border-color, rgba(255, 255, 255, 0.12)));
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.45));
    overflow: hidden;
}

.ha-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border, var(--border-color, rgba(255, 255, 255, 0.12)));
}

.ha-modal__title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary, inherit);
}

.ha-modal__title i { color: var(--color-primary); }

.ha-modal__close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: var(--color-text-secondary, inherit);
    font-size: 18px;
    cursor: pointer;
}

.ha-modal__close:hover { color: var(--color-text-primary, inherit); background: var(--color-surface-hover, rgba(255, 255, 255, 0.08)); }
.ha-modal__close:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(80, 160, 255, 0.4)); }

.ha-modal__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    overflow-y: auto;
    flex: 1;
}

.ha-modal__intro,
.ha-modal__hint {
    margin: 0;
    font-size: 13px;
    color: var(--color-text-secondary, inherit);
}

.ha-field { display: flex; flex-direction: column; gap: 6px; }
.ha-field label { font-size: 13px; font-weight: 600; color: var(--color-text-secondary, inherit); }

.ha-status {
    margin: 0;
    padding: 9px 12px;
    border-radius: var(--radius-md, 8px);
    font-size: 13px;
    font-weight: 600;
    border: 1px solid transparent;
}

.ha-status[hidden] { display: none; }
.ha-status.is-error { color: var(--color-danger, #ff6b6b); border-color: currentColor; }
.ha-status.is-ok { color: var(--color-success, #3ddc84); border-color: currentColor; }
.ha-status.is-info { color: var(--color-text-secondary, inherit); border-color: var(--color-border, rgba(255, 255, 255, 0.12)); }

/* Registration list of the group (Details page) */
.ha-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ha-list[hidden] { display: none; }

.ha-list__all {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
}

.ha-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
}

.ha-item.is-disabled { opacity: 0.7; cursor: default; }
.ha-item input { margin-top: 3px; }
.ha-item__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ha-item__name { font-weight: 700; overflow-wrap: anywhere; }
.ha-item__sub { font-size: 12px; color: var(--color-text-secondary, inherit); overflow-wrap: anywhere; }
.ha-item__state { font-size: 12px; font-weight: 700; white-space: nowrap; }
.ha-item__state.is-ok { color: var(--color-success, #3ddc84); }
.ha-item__state.is-warn { color: var(--color-danger, #ff6b6b); }

.ha-modal__foot {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
}

@media (max-width: 600px) {
    .ha-modal { padding: 0; align-items: flex-end; }
    .ha-modal__panel { max-width: none; max-height: 92vh; border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0; }
    .ha-modal__foot .sc-btn { flex: 1 1 auto; }
}