/* ===== Event Wizard details header (Phase 1 redesign) =====
   Bespoke header for /loggedin/wizard/details, shown ONLY under the ui-refresh
   flag (isUiRefreshEnabled). Replaces the legacy step indicator + breadcrumb
   sub-toolbar + Back/Next/Save buttons with a single header bar:
   icon badge + breadcrumb (Events › New event) + "Event details" title on the
   left; Cancel + Create event on the right.

   Everything is scoped to .ui-refresh so the non-refresh flow (and every other
   wizard step) renders exactly as before. Colors map to the semantic surface
   tokens so the header follows all surface-tone / accent modes automatically.
   A dedicated .wizard-details-head class (not .subpage-head) is used on purpose
   so the form body below keeps its existing column width and stays unchanged. */

/* Creation form: let the description textarea / rich-text editor (and any other
   textarea) span the full content column. Scoped to #event-wizard-container so
   only the quick-create form is affected, not the shared event edit page. */
.ui-refresh #event-wizard-container .event-settings-content textarea,
.ui-refresh #event-wizard-container .event-settings-content .html-editor,
.ui-refresh #event-wizard-container .event-settings-content .cke,
.ui-refresh #event-wizard-container .event-settings-content .ck.ck-editor {
    width: 100%;
    max-width: 100%;
}

.ui-refresh .page-body:has(#event-wizard-container) {
    padding-top: 0;
}

.ui-refresh .page-body:has(#event-wizard-container) #main-container {
    margin-top: 0;
}

/* The redesigned wizard is a complete page shell, not a content-height card.
   Fill the viewport so its canvas does not end below a short form. */
.ui-refresh #event-wizard-container {
    min-height: calc(100svh - 60px);
    background-color: var(--bg-page);
}

.ui-refresh .wizard-details-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5); /* 20px */
    flex-wrap: wrap;
    /* No horizontal padding — the header trusts #main-content's own side
       gutter (20px) so it lines up flush with the form body below it. */
    padding: 22px 15px;
    margin: 0 -15px var(--space-6);
    background: var(--bg-page);
    border-bottom: 1px solid var(--border-subtle);
    /* Stick to the top of the #main-content scroll container as the form body
       scrolls beneath it. The opaque --bg-surface covers scrolling content and
       the border-bottom keeps the divider visible while stuck. */
    position: sticky;
    top: 0;
    z-index: 20;
}

/* The wizard uses #event-wizard-container (NOT the #content-container that the
   shared event-page rules target), so those rules never reach it. Replicate
   PR #1828's #main-content / #main-content-inner split here, scoped to the
   wizard container:
   - #main-content is the full-width scroll container, so its overflow-y
     scrollbar sits at the window edge (and JS scroll-to-error still targets it).
     Now that the step indicator + breadcrumb sub-toolbar are removed, its height
     fills the viewport instead of the legacy `calc(100svh - 315px)` that reserved
     vertical space for them and left the form clipped ~225px short.
   - #main-content-inner carries the standard col-md-10/col-lg-{cols} width,
     unfloated and centered, so the content column matches every other page
     rather than being force-widened.
   :has(> #main-content-inner) keeps this scoped to the redesigned details page;
   every other wizard step keeps the legacy stepper layout untouched. */
.ui-refresh #event-wizard-container #main-content:has(> #main-content-inner) {
    width: 100%;
    max-width: 100%;
    margin: 0;
    max-height: calc(100svh - 91px);
    /* Drop the scroll container's top padding so the sticky header pins flush to
       the very top — otherwise the 20px padding band above it lets scrolling
       content peek through above the header. The header's own 22px top padding
       still provides breathing room. */
    padding-top: 0;
}
.ui-refresh #event-wizard-container #main-content > #main-content-inner {
    float: none;
    margin-left: auto;
    margin-right: auto;
    padding-top: var(--space-5);
}

/* ----- Left side: icon badge + text stack ----- */
.ui-refresh .wizard-details-head__left {
    display: flex;
    align-items: center;
    gap: var(--space-4); /* 16px */
    min-width: 0;
}

.ui-refresh .wizard-details-head__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 11px;
    /* Mockup #EEF0FF bg / #726BEA glyph — mapped to the accent tint so the
       badge follows the active accent and dark-surface overrides. */
    background: var(--accent-subtle);
    color: var(--accent-on-tint);
    font-size: 23px;
    flex-shrink: 0;
}

.ui-refresh .wizard-details-head__text {
    min-width: 0;
}

/* Breadcrumb typography mirrors the canonical .subpage-head .crumbs used on
   Registrant Types / Registration Form / Event Settings so all event-page
   breadcrumbs read identically: 13px medium, natural casing, muted ink with
   the current crumb in --ink and a --muted-2 "/" separator. */
.ui-refresh .wizard-details-head__crumbs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 3px;
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-lg);
    color: var(--muted);
}
.ui-refresh .wizard-details-head__crumbs a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}
.ui-refresh .wizard-details-head__crumbs a:hover {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ui-refresh .wizard-details-head__crumb-sep {
    font-size: 13px;
    color: var(--muted-2);
}
.ui-refresh .wizard-details-head__crumb-current {
    color: var(--ink);
    font-weight: var(--font-weight-semibold);
}

/* Title mirrors the canonical .list-title treatment (font-family, 700 weight,
   -0.015em tracking, 1.15 line-height, --ink) so the page title matches the
   other setup pages; size stays at 24px to suit the compact header bar. */
.ui-refresh .wizard-details-head__title {
    margin: 0;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: var(--font-size-2xl); /* 24px */
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--ink);
}

/* ----- Right side: Cancel + Create event ----- */
.ui-refresh .wizard-details-head__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
/* Header buttons run slightly taller than the standard 40px control to match
   the header scale in the mockup; everything else (color, radius, font) is
   inherited from the shared .btn-default / .btn-primary rules. */
.ui-refresh .wizard-details-head__actions .btn {
    white-space: nowrap;
}

/* ----- Event Website URL: validation status icon -----
   After the async availability check, Yii adds .has-success / .has-error to the
   field. Show a green check / red x at the right edge of the input. Scoped to
   the wizard container so it only appears in the create flow. */
.ui-refresh #event-wizard-container .field-event-display_url .input-group {
    position: relative;
}
.ui-refresh #event-wizard-container .field-event-display_url.has-success .input-group::after,
.ui-refresh #event-wizard-container .field-event-display_url.has-error .input-group::after {
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    font-size: 16px;
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 3;
}
.ui-refresh #event-wizard-container .field-event-display_url.has-success .input-group::after {
    content: "\f058"; /* fa-circle-check */
    color: var(--color-success);
}
.ui-refresh #event-wizard-container .field-event-display_url.has-error .input-group::after {
    content: "\f057"; /* fa-circle-xmark */
    color: var(--color-error);
}
/* Keep the slug text clear of the icon. */
.ui-refresh #event-wizard-container .field-event-display_url.has-success .form-control,
.ui-refresh #event-wizard-container .field-event-display_url.has-error .form-control {
    padding-right: 34px !important;
}

/* ----- Responsive: stack below the app's narrow (Bootstrap xs) breakpoint ----- */
@media only screen and (max-width: 767px) {
    .ui-refresh .wizard-details-head {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-4);
    }
    /* Hide the badge at narrow widths to avoid crowding the stacked header. */
    .ui-refresh .wizard-details-head__badge {
        display: none;
    }
    .ui-refresh .wizard-details-head__actions {
        flex-wrap: wrap;
    }
    .ui-refresh .wizard-details-head__actions .btn {
        width: 100%;
    }
}