/* style-avatar-menu.css — Avatar Dropdown Closed (ADC) + Expanded (ADE).
 *
 * Tokens (see style-tokens.css):
 *   --bz-bg, --bg-elevated, --text, --text-muted, --border, --accent.
 * Per spec: NO rounded corners on the ADE or its internal components.
 * The ADC avatar itself stays round (premise 1 calls it a "round avatar
 * circle"); display name has no background. Everything inside ADE is
 * rectangular.
 *
 * The glow sweep mirrors the bottom-to-top variant of glowTravel from
 * style-map-intro.css — same easing, same opacity ramp, transformed on
 * the Y axis.
 */

/* ── Avatar Dropdown Closed (ADC) ──────────────────────────────────── */
.bz-adc-host { display: inline-flex; }

.bz-adc {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    line-height: 1;
}

.bz-adc__avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent, #2EB5AA);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    overflow: hidden;
}
.bz-adc__avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Signed-out variant: no avatar image, no initial — just a single colour
   circle plus a tiny label (default "Conta"). Click navigates to /auth.html
   (configurable via the avatar_menu_config.properties.signedOut.href).
   The colour comes from the inline style set by paintSignedOutAdc() OR
   falls back to --bz-adc-signedout-bg (overridable via bzDesign tokens). */
.bz-adc--signed-out__circle {
    background: var(--bz-adc-signedout-bg, transparent);
    padding: 0;
}
.bz-adc--signed-out__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}
.bz-adc--signed-out__label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--bz-adc-signedout-label-color, var(--text, inherit));
}

.bz-adc__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text, inherit);
    background: transparent;
    max-width: 14ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* In the back-end sidebar the ADC is the topmost element, on its own row.
   Lay it out horizontally there so it matches the sidebar rhythm. */
.sidebar .bz-adc-host { display: flex; width: 100%; padding: 4px 0 8px; }
.sidebar .bz-adc {
    flex-direction: row;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 6px 4px;
}
.sidebar .bz-adc__avatar { width: 32px; height: 32px; font-size: 14px; }
.sidebar .bz-adc__name { max-width: none; flex: 1 1 auto; }

/* ── Avatar Dropdown Expanded (ADE) ────────────────────────────────── */
/* Open-phase opacity: explicit keyframes so the slow→accelerate intent
   reads as a deliberate hold-then-snap, not a generic ease. Held under
   25% opacity for the first 66% of the timeline, then jumps to fully
   visible in the last third. */
@keyframes bzAdeFadeIn {
    0%   { opacity: 0;    }
    33%  { opacity: 0.10; }
    66%  { opacity: 0.25; }   /* still dim — morph is happening but quiet */
    100% { opacity: 1;    }
}

.bz-ade {
    /* Morph animation: starts as a white circle the same diameter as
       the avatar, sitting JUST BELOW the avatar (never overlapping it),
       then expands sideways + downward into a narrow rectangle. The top
       edge stays anchored to the avatar gap throughout, so the rectangle
       "grows downward" rather than sliding. positionAde() sets:
         --bz-ade-init-size  → live avatar diameter
         --bz-ade-final-w    → final rectangle width                    */
    --bz-ade-init-size: 44px;
    --bz-ade-final-w: 200px;

    position: fixed;
    z-index: 2147483640;        /* below modals */
    transform: translateX(-50%); /* centred around `left`; no Y motion */
    width:      var(--bz-ade-init-size);
    max-height: var(--bz-ade-init-size);
    background: #ffffff;
    color: #14282e;
    border: 1px solid rgba(20, 40, 46, 0.10);
    border-radius: 50%;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    opacity: 0;
    transition:
        width         240ms cubic-bezier(0.4, 0, 0.2, 1),
        max-height    250ms cubic-bezier(0.4, 0, 0.2, 1),
        border-radius 220ms ease-out;
    pointer-events: none;
}
.bz-ade.is-open {
    width:         var(--bz-ade-final-w);
    max-height:    560px;
    border-radius: 0;
    pointer-events: auto;
    animation: bzAdeFadeIn 250ms linear forwards;
}
.bz-ade.is-revealed { overflow: visible; }
.bz-ade.is-closing {
    width:         var(--bz-ade-init-size);
    max-height:    var(--bz-ade-init-size);
    border-radius: 50%;
    opacity: 0;
    animation: none;
    transition:
        width         140ms cubic-bezier(0.4, 0, 0.2, 1),
        max-height    140ms cubic-bezier(0.4, 0, 0.2, 1),
        border-radius 120ms ease-out,
        opacity       110ms ease-out;
}

.bz-ade__inner {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    position: relative;
    z-index: 2;
}

.bz-ade__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    text-align: left;
    text-decoration: none;
    color: #14282e;
    background: transparent;
    border: 0;
    font: inherit;
    font-size: 13px;
    line-height: 1.3;
    cursor: pointer;
    border-radius: 0;
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity 80ms ease-out, transform 80ms ease-out, background-color 120ms ease-out;
}
.bz-ade.is-revealed .bz-ade__row { opacity: 1; transform: translateY(0); }

/* Stagger trails the previous row by 20 ms; all six are in within ~120 ms. */
.bz-ade.is-revealed [data-row="fav_beaches"]     { transition-delay:   0ms; }
.bz-ade.is-revealed [data-row="fav_businesses"]  { transition-delay:  20ms; }
.bz-ade.is-revealed [data-row="ranking"]         { transition-delay:  40ms; }
.bz-ade.is-revealed [data-row="rank_bar"]        { transition-delay:  60ms; }
.bz-ade.is-revealed .bz-ade__row--edit           { transition-delay:  80ms; }
.bz-ade.is-revealed .bz-ade__row--signout        { transition-delay: 100ms; }

.bz-ade__row--link:hover,
.bz-ade__row--edit:hover,
.bz-ade__row--signout:hover {
    background: rgba(20, 40, 46, 0.05);
}

.bz-ade__row-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz-ade__row-count,
.bz-ade__row-rank {
    flex: 0 0 auto;
    font-size: 12px;
    color: rgba(20, 40, 46, 0.55);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bz-ade__row-count { max-width: 6ch; }     /* numeric: "0" .. "99+" */
.bz-ade__row-rank  { max-width: 14ch; }    /* rank names: "Alma Livre" etc. */

.bz-ade__row--bar {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding-top: 4px;
    padding-bottom: 12px;
    cursor: default;
}
.bz-ade__row--bar:hover { background: transparent; }
.bz-ade__bar {
    height: 4px;
    background: rgba(20, 40, 46, 0.10);
    overflow: hidden;
    border-radius: 0;
}
.bz-ade__bar-fill {
    height: 100%;
    background: var(--accent, #2EB5AA);
    transition: width 120ms ease-out;
}
.bz-ade__bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: rgba(20, 40, 46, 0.55);
}

.bz-ade__row--edit {
    border-top: 1px solid rgba(20, 40, 46, 0.08);
    padding-top: 12px;
    color: var(--accent, #2EB5AA);
    font-weight: 600;
}
.bz-ade__pencil { width: 14px; height: 14px; flex: 0 0 auto; }

.bz-ade__row--signout {
    justify-content: flex-start;
    color: var(--danger, #c04a45);
    font-weight: 600;
    padding-bottom: 14px;
}

/* ── Glow sweep (bottom → top) ─────────────────────────────────────── */
/* ── Glow sweep (bottom → top, full ADE width, contained) ─────────── */
/* Same visual language as the splash Explora button (white core + box-
   shadow halo + fast inner wiggle), but sized to the ADE rectangle's
   width and clipped to the panel so the halo never reaches the avatar
   above. Travels from the bottom edge of the panel to the top edge,
   then fades out in place. */
.bz-ade__glow {
    position: absolute;
    /* Shrunk by 25 px each side so the halo spills HALF as far past the
       panel sides as before (~25 px each side instead of ~50 px). */
    left: 25px;
    right: 25px;
    bottom: 0;
    height: 40px;
    z-index: 1;                    /* below the .bz-ade__inner rows (z 2) */
    opacity: 0;
    pointer-events: none;
}
.bz-ade.is-sweeping .bz-ade__glow {
    /* Slower than the rest of the animation on purpose — the morph and
       row stagger are 2× faster than before, but the glow is the
       climax and needs to be perceivable. 500 ms keeps the band
       visibly travelling without feeling sluggish next to the morph. */
    animation: bzAdeGlowTravel 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.bz-ade__glow-core {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 7px;
    background: rgba(255, 255, 255, 1);
    /* Halo slightly brighter than before to make the narrower spill
       still read clearly past the panel edges. Reach stays ~50 px so
       the natural feather happens within sight. */
    box-shadow:
        0 0 20px 8px  rgba(255, 255, 255, 0.95),
        0 0 44px 18px rgba(255, 255, 255, 0.55);
    filter: blur(2.5px);
}
.bz-ade.is-sweeping .bz-ade__glow-core {
    animation: bzAdeGlowWiggle 0.07s ease-in-out infinite;
}
/* Translation and opacity finish AT THE SAME instant: the band reaches
   the top edge of the panel at 100 % of the keyframe, with opacity 0.
   That guarantees the halo is invisible by the time it could reach the
   avatar above, no clip-path needed.
   Travel = panelHeight − glowHeight (JS writes --bz-ade-glow-travel). */
@keyframes bzAdeGlowTravel {
    0%   { opacity: 0;   transform: translateY(0); }
    12%  { opacity: 0.9; transform: translateY(0); }
    60%  { opacity: 0.9; transform: translateY(calc(-0.6 * var(--bz-ade-glow-travel, 280px))); }
    100% { opacity: 0;   transform: translateY(calc(-1   * var(--bz-ade-glow-travel, 280px))); }
}
@keyframes bzAdeGlowWiggle {
    0%   { transform: translate(-2px, 1.5px)  rotate(-4deg); }
    20%  { transform: translate(2.5px, -2px)  rotate(3deg); }
    40%  { transform: translate(-1.5px, -2px) rotate(-2deg); }
    60%  { transform: translate(2px, 2px)     rotate(4deg); }
    80%  { transform: translate(-2.5px, 1px)  rotate(-3deg); }
    100% { transform: translate(-2px, 1.5px)  rotate(-4deg); }
}

/* ── Admin preview pair (used by /admin-users.html → Avatar menu tab) ─ */
.bz-ade-preview {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    align-items: start;
    padding: 18px;
    background: var(--bg-elevated, rgba(255,255,255,0.02));
    border: 1px solid var(--border, rgba(255,255,255,0.08));
}
.bz-ade-preview__col { display: flex; flex-direction: column; gap: 10px; }
.bz-ade-preview__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, rgba(255,255,255,0.55));
}
.bz-ade-preview__adc {
    display: inline-flex;
    align-items: center;
    padding: 14px;
    background: var(--bg, #14282e);
    border: 1px solid var(--border, rgba(255,255,255,0.10));
}
.bz-ade.bz-ade--preview {
    position: static;
    width: 200px;
    max-height: none;
    overflow: visible;
    transform: none;
    border-radius: 0;
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
}

/* ── Front-end top container (Map / Beach / Profile / Public profile) ─ */
.bz-top {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 25;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: auto;
}
.bz-top__wordmark {
    font-family: 'Bebas Neue', 'Pacifico', sans-serif;
    font-size: 36px;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--text, #FAF2E1);
    text-decoration: none;
}
.bz-top__wordmark .io {
    color: var(--accent, #2EB5AA);
}
/* Defuse the legacy absolute positioning on .home-logo / .logo when they
   are children of the new top container. Their typography is still owned
   by the existing .home-logo / .logo / bzLogo selectors via theme-bridge
   + bzDesign — we just neutralise the positioning that fought our column
   layout. */
.bz-top .home-logo,
.bz-top .logo {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    pointer-events: auto;
}
.bz-top__menu { display: inline-flex; }

/* When the top container is hosted inside the profile shell, it should
   participate in normal flow rather than overlay. */
.profile-shell .bz-top {
    position: static;
    transform: none;
    left: auto;
    margin: 12px auto 18px;
}

/* Admin Users → Avatar menu tab right-side property panel */
.bz-amt-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    margin-top: 12px;
}
.bz-amt-preview-wrap {
    min-width: 0;
}
.bz-amt-panel {
    background: var(--bg-elevated, rgba(255,255,255,0.02));
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.bz-amt-panel h3 {
    margin: 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, rgba(255,255,255,0.6));
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
    padding-bottom: 6px;
}
.bz-amt-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
}
.bz-amt-toggle input { transform: scale(1.1); }
.bz-amt-props .field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted, rgba(255,255,255,0.6));
}
.bz-amt-props .field input,
.bz-amt-props .field select {
    padding: 6px 8px;
    background: var(--bg, #14282e);
    border: 1px solid var(--border, rgba(255,255,255,0.10));
    color: var(--text, #FAF2E1);
    font-size: 13px;
    border-radius: 0;
}
.bz-amt-deploy-row {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 6px;
    border-top: 1px solid var(--border, rgba(255,255,255,0.08));
}
.bz-amt-deploy-status {
    font-size: 12px;
    color: var(--text-muted, rgba(255,255,255,0.6));
}

@media (max-width: 880px) {
    .bz-amt-layout { grid-template-columns: 1fr; }
}