/* =============================================================================
   stay-header.css
   (wwwroot/css/stay-header.css)
   -----------------------------------------------------------------------------
   The Stay umbrella header entry-point — sits in .ikh-header-rightset next to
   the Tenant+, marketplace and auth controls. Matches their geometry exactly:
   a 44×44 chip with a 14px radius, a centred glyph, a hover glow, an optional
   status dot, and a drop-down popover (~260px, 14px radius) for the actions.

   Brand palette (Stay): sunset orange #F58220 / #F89622, sky #56C4F8, cream.
   Self-contained, namespaced under .ikh-stay-*. Stacks after site.css.
   ============================================================================= */

.ikh-stay-umbrella {
    position: relative;
    display: inline-flex;
    align-items: center;
    /* Raise our own stacking context (like the profile button does) so the
       tooltip — which hangs below the icon — paints ABOVE the header's animated
       gradient border instead of being cut by it. */
    z-index: 20;
    isolation: isolate;
}

/* ── The icon (bare glyph, like the other header icons — no chip wrapper) ── */
.ikh-stay-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: transform 150ms ease, filter 150ms ease;
    -webkit-tap-highlight-color: transparent;
}

    .ikh-stay-btn:hover {
        filter: drop-shadow(0 4px 10px rgba(245, 130, 32, 0.28));
    }

    .ikh-stay-btn:active {
        transform: translateY(1px);
    }

    .ikh-stay-btn:focus-visible {
        outline: 2px solid rgba(86, 196, 248, 0.6);
        outline-offset: 2px;
        border-radius: 12px;
    }

.ikh-stay-glyph {
    position: relative;
    display: inline-flex;
    line-height: 0;
}

/* Subtle halo behind the umbrella; intensifies on hover. The bare glyph
       has no chip, so the glow is the only hover affordance besides the lift. */
.ikh-stay-glyph-glow {
    fill: transparent;
    transition: fill 180ms ease;
}

.ikh-stay-btn:hover .ikh-stay-glyph-glow {
    fill: rgba(245, 130, 32, 0.10);
}

/* ── Status dot — green when the user is an approved/active host ────────── */
.ikh-stay-status-dot {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #10A65A;
    border: 2px solid #FFFFFF;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 160ms ease, transform 160ms ease;
}

.ikh-stay-umbrella[data-stay-authed="1"] .ikh-stay-status-dot {
    opacity: 1;
    transform: scale(1);
}

/* When the user is a host, tint the glow green to echo the auth widget. */
.ikh-stay-umbrella[data-stay-authed="1"] .ikh-stay-glyph-glow {
    fill: rgba(16, 166, 90, 0.12);
}

/* ── Tooltip ────────────────────────────────────────────────────────────── */
.ikh-stay-tooltip {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: #1A1A1F;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 6px 10px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 160ms ease, transform 160ms ease;
    /* Must paint ABOVE the header's animated gradient border (a ::after on the
       header). The other header icons solve this by raising their own stacking
       context; we mirror that on the umbrella wrapper (see .ikh-stay-umbrella
       z-index + isolation below) and keep the tooltip itself high here. */
    z-index: 60;
}

.ikh-stay-btn:hover .ikh-stay-tooltip,
.ikh-stay-btn:focus-visible .ikh-stay-tooltip {
    opacity: 1;
    transform: translateY(0);
}

/* ── Popover menu ───────────────────────────────────────────────────────── */
.ikh-stay-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 260px;
    max-width: 300px;
    background: #FFFFFF;
    border: 1px solid rgba(14, 14, 17, 0.08);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(14, 14, 17, 0.16);
    padding: 8px;
    z-index: 1200;
    transform-origin: top right;
    animation: ikhStayMenuIn 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

    .ikh-stay-menu[hidden] {
        display: none;
    }

@keyframes ikhStayMenuIn {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Brand header strip inside the menu */
.ikh-stay-menu-head {
    padding: 8px 10px 10px;
    border-bottom: 1px solid rgba(14, 14, 17, 0.06);
    margin-bottom: 6px;
}

.ikh-stay-menu-head-title {
    display: block;
    font-family: 'Clash Display', 'DM Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.02rem;
    color: #0E0E11;
    background: linear-gradient(135deg, #F58220, #F89622 55%, #56C4F8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ikh-stay-menu-head-sub {
    display: block;
    font-size: 0.74rem;
    color: #6C757D;
    margin-top: 2px;
    line-height: 1.35;
}

/* Items */
.ikh-stay-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border: none;
    background: transparent;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #1A1A1F;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: background 140ms ease, color 140ms ease;
}

    .ikh-stay-menu-item i {
        font-size: 1.02rem;
        color: #F58220;
        flex: 0 0 auto;
        transition: color 140ms ease;
    }

    .ikh-stay-menu-item:hover {
        background: #FFF4E9;
    }

    .ikh-stay-menu-item:focus-visible {
        outline: 2px solid rgba(86, 196, 248, 0.55);
        outline-offset: -2px;
    }

/* Primary action — browse / dashboard. Filled sunset pill. */
.ikh-stay-menu-item--primary {
    background: linear-gradient(135deg, #F58220, #F89622);
    color: #fff;
    margin-bottom: 2px;
}

    .ikh-stay-menu-item--primary i {
        color: #fff;
    }

    .ikh-stay-menu-item--primary:hover {
        background: linear-gradient(135deg, #ED7714, #F58220);
        color: #fff;
    }

.ikh-stay-menu-divider {
    height: 1px;
    background: rgba(14, 14, 17, 0.06);
    margin: 6px 4px;
}

/* State swap — anon vs host */
.ikh-stay-umbrella[data-stay-authed="1"] .ikh-stay-menu-state--anon {
    display: none;
}

.ikh-stay-umbrella[data-stay-authed="0"] .ikh-stay-menu-state--authed {
    display: none;
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ikh-stay-menu {
        animation: none;
    }

    .ikh-stay-btn,
    .ikh-stay-status-dot,
    .ikh-stay-tooltip {
        transition: none;
    }
}