/* The auth screens (.fi-simple-layout) are styled in auth.css, shared by all
   four panels. The green/blue gradient that used to live here fought it. */

.ec-event-body {
    display: flex;
    flex-direction: row !important;
    width: 100%;
}

@media (min-width: 64rem) {
    .fi-sidebar {
        z-index: 0 !important;
    }
}

.fi-sidebar-nav-groups {
    margin-inline: calc(var(--spacing) * -2) !important;;
    row-gap: calc(var(--spacing) * 3) !important;;
}

/* Sidebar logo/header area */
.fi-sidebar-header {
    background-color: var(--primary-600);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    /* Was 3rem each side, which made a ~9rem band with a small logo adrift in
       the middle of it. The logo should fill the band, not float in it. */
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/*
 | The logo's height comes from brandLogoHeight as an inline style, so only the
 | width is constrained here — enough that a cabinet's own logo, whatever shape
 | they upload, can never push past the sidebar.
 */
.fi-sidebar-header .fi-logo,
.fi-sidebar-header img {
    max-width: 100%;
    object-fit: contain;
}

/* User menu under logo */
.fi-user-menu {
    margin-top: 0.75rem !important;
    padding-top: 0.75rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* User name */
.fi-user-menu .fi-user-name {
    color: #fff;
}

/* User role / email */
.fi-user-menu .fi-user-subtitle {
    color: rgba(255, 255, 255, 0.7);
}

/* ---------------------------------------------------------------------------
   Consultation workspace
   --------------------------------------------------------------------------- */

/* Below lg the vertical wizard falls back to the horizontal strip, where seven
   steps run out of room and the last label gets clipped ("Résumé" -> "R…").
   Scoped to this wizard: unscoped, flex-shrink:0 would make every other wizard
   in the panel overflow instead of fitting. */
.consultation-wizard-vertical .fi-sc-wizard-header {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}

.consultation-wizard-vertical .fi-sc-wizard-header::-webkit-scrollbar {
    height: 4px;
}

.consultation-wizard-vertical .fi-sc-wizard-header::-webkit-scrollbar-thumb {
    background-color: rgb(0 0 0 / 0.15);
    border-radius: 9999px;
}

.consultation-wizard-vertical .fi-sc-wizard-header-step {
    flex-shrink: 0;
}

/* --- Patient context panel ------------------------------------------------ */

/* Stack label above value: the panel is a narrow column, not a full-width page */
.consultation-context .fi-in-entry-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
}

/* The previous-consultations table is already inside a section card */
.consultation-context .fi-ta-ctn {
    border: 0;
    box-shadow: none;
    background: transparent;
}

.consultation-context .fi-ta-header-ctn {
    display: none;
}

/* --- Assistant vertical ----------------------------------------------------
   Filament's wizard root holds the header <ol>, one <div> per step and the
   footer as siblings. Auto-placing them in a two-column grid scatters the
   steps into the rail column, so place them explicitly: header down the left,
   everything else in the right column.

   Layout only: colours and active/completed states are left to Filament, which
   already themes them. Hand-written colours here cannot see the panel's palette
   (it is injected at runtime) and broke in dark mode. */
@media (min-width: 1024px) {
    .consultation-wizard-vertical {
        display: grid;
        grid-template-columns: 14rem minmax(0, 1fr);
        column-gap: 1.5rem;
        align-items: start;
    }

    .consultation-wizard-vertical > .fi-sc-wizard-header {
        grid-column: 1;
        /* Row 1 only: exactly one step is ever visible (Alpine display:none's the
           rest), so row 1 holds the header and the current step side by side.
           "1 / -1" would be ambiguous here because no explicit rows are defined. */
        grid-row: 1;
        align-self: start;
        position: sticky;
        top: 5rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0.125rem;
        overflow: visible;
        padding: 0;
    }

    /* Steps and the footer all live in the right-hand column */
    .consultation-wizard-vertical > :not(.fi-sc-wizard-header) {
        grid-column: 2;
    }

    .consultation-wizard-vertical > .fi-sc-wizard-header .fi-sc-wizard-header-step {
        width: 100%;
    }

    .consultation-wizard-vertical > .fi-sc-wizard-header .fi-sc-wizard-header-step-btn {
        width: 100%;
        justify-content: flex-start;
        gap: 0.625rem;
        padding: 0.5rem 0.625rem;
        border-radius: 0.5rem;
    }

    /* The chevron separators only make sense on a horizontal strip */
    .consultation-wizard-vertical > .fi-sc-wizard-header .fi-sc-wizard-header-step-separator {
        display: none;
    }

    .consultation-wizard-vertical > .fi-sc-wizard-header .fi-sc-wizard-header-step-label {
        white-space: normal;
        text-align: start;
    }
}