/* ─────────────────────────────────────────────────────────────────────────────
   My Vibe Hub — Chrome hiding + full-bleed (matches all other MSV hub pages)
───────────────────────────────────────────────────────────────────────────── */

/* Hide Astra header, nav, footer */
body.my-vibe-page .ast-above-header,
body.my-vibe-page .ast-below-header,
body.my-vibe-page .ast-main-header-wrap,
body.my-vibe-page .site-header,
body.my-vibe-page #masthead,
body.my-vibe-page .ast-primary-header,
body.my-vibe-page .ast-mobile-header-wrap,
body.my-vibe-page .main-header-bar,
body.my-vibe-page .ast-header-break-point,
body.my-vibe-page .site-footer,
body.my-vibe-page .ast-footer-overlay,
body.my-vibe-page .ast-small-footer,
body.my-vibe-page #colophon,
body.my-vibe-page footer.site-footer {
    display: none !important;
}

/* Strip all Astra container padding/margin */
body.my-vibe-page,
body.my-vibe-page #page,
body.my-vibe-page #content,
body.my-vibe-page .site-content,
body.my-vibe-page .ast-container,
body.my-vibe-page .site-main,
body.my-vibe-page .entry-content,
body.my-vibe-page article,
body.my-vibe-page .ast-article-single,
body.my-vibe-page .ast-separate-container .ast-article-single,
body.my-vibe-page .ast-separate-container .ast-article-post,
body.my-vibe-page .ast-plain-container,
body.my-vibe-page .post-content,
body.my-vibe-page .page-content {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

body.my-vibe-page .ast-separate-container .ast-article-single,
body.my-vibe-page .ast-separate-container #primary {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Catch-all for any remaining width constraints on plain WP pages */
body.my-vibe-page #primary,
body.my-vibe-page #main,
body.my-vibe-page .ast-article-post,
body.my-vibe-page .entry-content > *,
body.my-vibe-page .fl-builder-content,
body.my-vibe-page .wp-block-group {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Full page background */
body.my-vibe-page #page,
body.my-vibe-page #content,
body.my-vibe-page #primary,
body.my-vibe-page #main {
    background: #0f0f0f !important;
}

/* ── Full-bleed wrapper ───────────────────────────────────────────────────── */
body.my-vibe-page {
    background: #0f0f0f !important;
    overflow-x: hidden !important;
}

/* Force true full width on all parent containers — matches HS Hub approach */
body.my-vibe-page #page,
body.my-vibe-page #content,
body.my-vibe-page #primary,
body.my-vibe-page #main,
body.my-vibe-page .site-content,
body.my-vibe-page .ast-container,
body.my-vibe-page .site-main,
body.my-vibe-page .entry-content,
body.my-vibe-page article,
body.my-vibe-page .ast-article-single,
body.my-vibe-page .ast-separate-container .ast-article-single,
body.my-vibe-page .ast-separate-container .ast-article-post,
body.my-vibe-page .ast-plain-container,
body.my-vibe-page .post-content,
body.my-vibe-page .page-content {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    background: #0f0f0f !important;
}

.mv-hub {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    color: #e8e8e8;
    line-height: 1.6;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 0;
    background: #0f0f0f;
    min-height: 100vh;
}

/* ── Hub header — dark full-bleed bar ────────────────────────────────────── */
.mv-hub-header {
    background: linear-gradient(135deg, #1a1a1a 0%, #222222 100%);
    border-bottom: 1px solid #333;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mv-hub-avatar {
    width: 48px;
    height: 48px;
    background: #2a2a2a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border: 2px solid #48c7af;
    flex-shrink: 0;
}

.mv-hub-identity { flex: 1; }

.mv-hub-identity h2 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 .2rem;
    color: #e8e8e8;
}

.mv-hub-role-badge {
    display: inline-block;
    padding: .15em .65em;
    border-radius: 99px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: rgba(72,199,175,.15);
    color: #48c7af;
}
.mv-hub-role-badge[data-role="coach"]   { background: rgba(245,166,35,.15); color: #f5a623; }
.mv-hub-role-badge[data-role="fan"]     { background: rgba(176,126,248,.15); color: #b07ef8; }

.mv-hub-header-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-left: auto;
    flex-shrink: 0;
}

.mv-signout-link {
    font-size: .8rem;
    color: #555;
    text-decoration: none;
}
.mv-signout-link:hover { color: #888; }

/* ── Content area ────────────────────────────────────────────────────────── */
.mv-hub-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
}

/* Override base .mv-wrap padding since we handle it in .mv-hub-content */
.mv-hub.mv-wrap {
    max-width: 100%;
    padding: 0;
}

/* ── Guest state ─────────────────────────────────────────────────────────── */
.mv-hub-guest {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}
.mv-hub-guest-inner {
    text-align: center;
    padding: 3rem 2rem;
}
.mv-hub-icon    { font-size: 3.5rem; display: block; margin-bottom: 1rem; }
.mv-hub-guest-inner h2 { font-size: 1.8rem; margin: 0 0 .5rem; color: #e8e8e8; }
.mv-hub-guest-inner p  { color: #888; margin: 0 0 1.5rem; }

/* ── Loading ─────────────────────────────────────────────────────────────── */
.mv-hub-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
}

/* ─────────────────────────────────────────────────────────────────────────────
   My Vibe Hub — mv-hub.css
───────────────────────────────────────────────────────────────────────────── */

/* ── Canvas empty state ──────────────────────────────────────────────────── */
.mv-canvas-empty {
    text-align: center;
    padding: 5rem 2rem;
}
.mv-canvas-empty-inner {
    display: inline-block;
    max-width: 400px;
}
.mv-canvas-empty-icon { font-size: 3.5rem; margin-bottom: 1rem; }
.mv-canvas-empty h3   { font-size: 1.4rem; margin: 0 0 .5rem; }
.mv-canvas-empty p    { color: var(--mv-text-muted); margin: 0 0 1.5rem; }

/* ── Card grid ───────────────────────────────────────────────────────────── */
.mv-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    padding: .25rem 0 2rem;
}

/* ── Vibe card ───────────────────────────────────────────────────────────── */
.mv-vibe-card {
    background: var(--mv-surface-2);
    border: 1.5px solid var(--mv-border);
    border-radius: var(--mv-radius-lg);
    position: relative;
    transition: border-color var(--mv-transition), transform var(--mv-transition);
    cursor: grab;
}
.mv-vibe-card:hover { border-color: var(--mv-mint); }
.mv-vibe-card.dragging  { opacity: .5; cursor: grabbing; }
.mv-vibe-card.drag-over { border-color: var(--mv-mint); transform: scale(1.02); }

/* Color accent left border */
.mv-vibe-card--blue   { border-left: 4px solid #3b82f6; }
.mv-vibe-card--gold   { border-left: 4px solid #f59e0b; }
.mv-vibe-card--green  { border-left: 4px solid #10b981; }
.mv-vibe-card--cyan   { border-left: 4px solid #06b6d4; }
.mv-vibe-card--purple { border-left: 4px solid #8b5cf6; }
.mv-vibe-card--red    { border-left: 4px solid #ef4444; }
.mv-vibe-card--teal   { border-left: 4px solid #14b8a6; }
.mv-vibe-card--navy   { border-left: 4px solid #3b5bdb; }
.mv-vibe-card--orange { border-left: 4px solid #f97316; }
.mv-vibe-card--pink   { border-left: 4px solid #ec4899; }
.mv-vibe-card--indigo { border-left: 4px solid #6366f1; }
.mv-vibe-card--slate  { border-left: 4px solid #94a3b8; }

.mv-vibe-card-drag {
    position: absolute;
    top: .6rem;
    right: 2.8rem;
    color: var(--mv-text-faint);
    font-size: 1rem;
    cursor: grab;
    padding: .2rem .3rem;
    line-height: 1;
}
.mv-vibe-card-link {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.1rem;
    text-decoration: none;
    color: var(--mv-text);
}
.mv-vibe-card-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    color: var(--mv-mint);
}
.mv-vibe-card-icon svg { width: 100%; height: 100%; }
.mv-vibe-card-body  { flex: 1; min-width: 0; }
.mv-vibe-card-hub   { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--mv-text-faint); margin-bottom: .15rem; }
.mv-vibe-card-title { font-size: 1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-vibe-card-filters { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.mv-fc {
    background: var(--mv-surface-3);
    border-radius: var(--mv-radius-pill);
    padding: .1em .55em;
    font-size: .72rem;
    color: var(--mv-text-muted);
}
.mv-fc-all { font-size: .72rem; color: var(--mv-text-faint); font-style: italic; }
.mv-vibe-card-arrow { color: var(--mv-mint); font-size: 1.1rem; flex-shrink: 0; }

.mv-vibe-card-actions {
    display: flex;
    gap: .25rem;
    padding: 0 .5rem .5rem;
    justify-content: flex-end;
}
.mv-vibe-card-edit,
.mv-vibe-card-delete {
    background: none;
    border: none;
    cursor: pointer;
    font-size: .85rem;
    padding: .25rem .45rem;
    border-radius: var(--mv-radius);
    color: var(--mv-text-faint);
    transition: color var(--mv-transition), background var(--mv-transition);
}
.mv-vibe-card-edit:hover   { color: var(--mv-mint); background: var(--mv-mint-dim); }
.mv-vibe-card-delete:hover { color: #f08080; background: rgba(240,128,128,.1); }


/* ── Wizard overlay ──────────────────────────────────────────────────────── */
.mv-wizard-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.mv-wizard {
    background: var(--mv-surface);
    border: 1.5px solid var(--mv-border);
    border-radius: var(--mv-radius-lg);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    animation: mvFadeIn .2s ease;
}
.mv-wizard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.5rem 0;
    position: sticky;
    top: 0;
    background: var(--mv-surface);
    z-index: 1;
}
.mv-wizard-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
}
.mv-wizard-close {
    background: none;
    border: none;
    color: var(--mv-text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: .3rem .5rem;
    border-radius: var(--mv-radius);
    transition: color var(--mv-transition);
}
.mv-wizard-close:hover { color: var(--mv-text); }

.mv-wizard-step {
    padding: 1.2rem 1.5rem 1.5rem;
}
.mv-wizard-sub {
    color: var(--mv-text-muted);
    margin: 0 0 1rem;
    font-size: .9rem;
}
.mv-wizard-nav {
    display: flex;
    gap: .75rem;
    align-items: center;
    margin-top: 1.2rem;
}
.mv-wizard-saving {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--mv-text-muted);
}

/* ── Wizard step 1: hub grid ─────────────────────────────────────────────── */
.mv-wiz-hub-grid {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.mv-wiz-hub-btn {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: var(--mv-surface-2);
    border: 1.5px solid var(--mv-border);
    border-radius: var(--mv-radius);
    padding: .85rem 1rem;
    cursor: pointer;
    text-align: left;
    font-size: .95rem;
    font-weight: 600;
    color: var(--mv-text);
    transition: border-color var(--mv-transition), background var(--mv-transition);
}
.mv-wiz-hub-btn:hover, .mv-wiz-hub-btn.selected {
    border-color: var(--mv-mint);
    background: var(--mv-mint-dim);
}
.mv-wiz-hub-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Wizard step 2: type grid ────────────────────────────────────────────── */
.mv-wiz-type-grid {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.mv-wiz-type-btn {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: var(--mv-surface-2);
    border: 1.5px solid var(--mv-border);
    border-radius: var(--mv-radius);
    padding: .85rem 1rem;
    cursor: pointer;
    text-align: left;
    color: var(--mv-text);
    transition: border-color var(--mv-transition), background var(--mv-transition);
}
.mv-wiz-type-btn:hover, .mv-wiz-type-btn.selected {
    border-color: var(--mv-mint);
    background: var(--mv-mint-dim);
}
.mv-wiz-type-icon { width: 28px; height: 28px; flex-shrink: 0; }
.mv-wiz-type-icon svg { width: 100%; height: 100%; }
.mv-wiz-type-label { font-weight: 700; font-size: .95rem; }
.mv-wiz-type-desc  { font-size: .8rem; color: var(--mv-text-muted); margin-top: .1rem; }

/* Color accents on type buttons */
.mv-wiz-type-btn--blue   .mv-wiz-type-icon { color: #3b82f6; }
.mv-wiz-type-btn--gold   .mv-wiz-type-icon { color: #f59e0b; }
.mv-wiz-type-btn--green  .mv-wiz-type-icon { color: #10b981; }
.mv-wiz-type-btn--cyan   .mv-wiz-type-icon { color: #06b6d4; }
.mv-wiz-type-btn--purple .mv-wiz-type-icon { color: #8b5cf6; }
.mv-wiz-type-btn--red    .mv-wiz-type-icon { color: #ef4444; }
.mv-wiz-type-btn--navy   .mv-wiz-type-icon { color: #3b5bdb; }
.mv-wiz-type-btn--teal   .mv-wiz-type-icon { color: #14b8a6; }
.mv-wiz-type-btn--orange .mv-wiz-type-icon { color: #f97316; }
.mv-wiz-type-btn--pink   .mv-wiz-type-icon { color: #ec4899; }
.mv-wiz-type-btn--indigo .mv-wiz-type-icon { color: #6366f1; }
.mv-wiz-type-btn--slate  .mv-wiz-type-icon { color: #94a3b8; }

/* ── Wizard step 3: filter fields ────────────────────────────────────────── */
.mv-wiz-select {
    width: 100%;
    background: #2a2a2a;
    border: 1.5px solid #333;
    border-radius: var(--mv-radius);
    color: #e8e8e8;
    padding: .55em .8em;
    font-size: .95rem;
    transition: border-color var(--mv-transition);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2348c7af' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    padding-right: 2.2rem;
    color-scheme: dark;
}
.mv-wiz-select:focus { outline: none; border-color: #48c7af; }
.mv-wiz-select option {
    background: #1a1a1a;
    color: #e8e8e8;
}
.mv-wiz-select option:checked,
.mv-wiz-select option:hover {
    background: #48c7af;
    color: #0f0f0f;
}
.mv-wiz-label-field { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--mv-border); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .mv-card-grid { grid-template-columns: 1fr; }
    .mv-wizard { max-height: 95vh; }
}