/* =====================================================
   DASHBOARD � HOME (AUTHORITATIVE)
===================================================== */

:root {
    --rt-primary: #2B988F;
    --rt-primary-dark: #17756D;
    --rt-bg: #FFFFFF;
    --rt-card: #ffffff;
    --rt-border: #e5e7eb;
    --rt-muted: #6b7280;
    --rt-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
}

/* =========================
   DASH SECTIONS
========================= */

.dash-section {
    background: var(--rt-card);
    border: 1px solid var(--rt-border);
    border-radius: 12px;   /* match the club cards' corner radius */
    padding: 18px 20px;
    margin-bottom: 18px;
    box-shadow: var(--rt-shadow-sm);
}

/* Flat (containerless) middle-column section — no box, just vertical rhythm.
   Used for Your Picks / Recent Activity so they match the borderless
   "Your Clubs" / Spotlight cards area. */
.dash-flat { margin-bottom: 40px; }
@media (max-width: 640px) { .dash-flat { margin-bottom: 28px; } }

.section-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-bottom: 14px;
}

/* Activity header override */
.activity-header-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.activity-header-row h4 {
    margin: 0;
}

.activity-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}



    /* h3 too: the profile main column uses h3 for its section titles
       (heading order beside the page h1/h2) and should look the same. */
    .section-header h4,
    .section-header h3 {
        font-size: 1.2rem;
        font-weight: 700;
        margin: 0;
        letter-spacing: 0.02em;
    }

.section-link {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rt-primary);
    text-decoration: none;
}

/* "View all" beside the Your Picks title. Mobile only — the id-free
   two-class selector is deliberate: .section-link would otherwise be an
   equal-specificity tie with the mobile rule that re-shows it. */
.picks-section-header .picks-view-all {
    display: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rt-primary);
    cursor: pointer;
    white-space: nowrap;
}

.section-subtitle {
    font-size: 0.72rem;
    color: #9ca3af;
    margin: 2px 0 0;
    font-weight: 400;
}

    .section-link:hover {
        text-decoration: underline;
    }

/* =========================
   WELCOME PANEL
========================= */

.dashboard-welcome {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 28px;
    background: #191919;
    border-top: 1px solid #4f4f4f;
    border-bottom: 1px solid #0c0c0c;
    height: 200px;
    width: 100%;
}

    .dashboard-welcome h2 {
        font-weight: 700;
        margin-bottom: 4px;
        color: white;
    }

    .dashboard-welcome .muted {
        font-size: 0.9rem;
        color: var(--rt-muted);
    }

.welcome-actions {
    display: flex;
    gap: 12px;
}

.dashboard-main {
    background-color: #F8F9FA;
    padding: 24px 28px;
    margin-top: -15px;
    border-top: 2px solid white;
    /* KEY */
    flex: 1;
    display: flex;
    flex-direction: column;
}


/* =========================
   ACTION BUTTONS
========================= */

.dash-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--rt-primary);
    background: rgba(43, 152, 143, 0.08);
    border: 1px solid rgba(43, 152, 143, 0.35);
    transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.14s ease;
}

    .dash-action-btn i {
        font-size: 0.85rem;
        opacity: 0.9;
    }

    .dash-action-btn:hover {
        background: rgba(43, 152, 143, 0.16);
        color: var(--rt-primary);

    }

    .dash-action-btn.primary {
        background: linear-gradient(135deg, #2B988F, #3bbfb4);
        color: #ffffff;
        border: none;
        box-shadow: 0 6px 16px rgba(43, 152, 143, 0.35);
    }

        .dash-action-btn.primary:hover {
            background: linear-gradient(135deg, #24897f, #33b0a6);
        }

/* =========================
   PROFILE FRIEND STATUS
========================= */

.profile-friend-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: default;
    border: none;
    background: none;
}

.profile-friend-status .material-icons {
    font-size: 18px;
}

.profile-friend-status.friends {
    color: #2B988F;
    background: rgba(43, 152, 143, 0.1);
    border: 1px solid rgba(43, 152, 143, 0.3);
}

.profile-friend-status.pending {
    color: #888;
    background: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.12);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

    .profile-friend-status.pending:hover {
        background: rgba(217,83,79,0.08);
        border-color: rgba(217,83,79,0.3);
        color: #d9534f;
    }

.profile-friend-status.pending .cancel-icon,
.profile-friend-status.pending .cancel-label { display: none; }

.profile-friend-status.pending:hover .pending-icon,
.profile-friend-status.pending:hover .pending-label { display: none; }

.profile-friend-status.pending:hover .cancel-icon,
.profile-friend-status.pending:hover .cancel-label { display: inline; }

/* Block / Report / Unblock on someone else's profile (profile.php). Ghost
   pills for the dark profile header: clearly buttons, but quieter and a
   touch smaller than the teal Add Friend / Message actions beside them.
   Block and Report warm to red on hover, the usual cue for these two. */
.profile-mod-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    color: rgba(255, 255, 255, 0.86);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.28);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.profile-mod-btn .material-icons {
    font-size: 16px;
    line-height: 1;
}
.profile-mod-btn:hover,
.profile-mod-btn:focus-visible {
    color: #ffb8b3;
    background: rgba(217, 83, 79, 0.18);
    border-color: rgba(240, 128, 122, 0.6);
    outline: none;
}
.profile-mod-btn--unblock:hover,
.profile-mod-btn--unblock:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.5);
}

/* =========================
   CLUB LIST (ROW-BASED)
========================= */

/* Your Clubs header row. Title on the left; the sort/filter cluster and
   the card/row view toggle group on the right (margin-left:auto pushes
   the cluster over rather than space-between, so the toggle stays beside
   the sort/filter controls). */
.your-clubs-header {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    /* Hairline divider separating the header from the cards/rows below. */
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid #e5e7eb;
}
.your-clubs-header .your-clubs-header-right {
    margin-left: auto;
}

/* Desktop / iPad: card-row switcher first, then the sort/filter control —
   [title] … [switcher][filter]. The switcher takes over the auto margin
   that pushes the cluster right, since it's now the leading element.
   DOM order is left alone so the phone layout below 640px is untouched. */
@media (min-width: 641px) {
    .your-clubs-header #clubsViewToggle {
        order: 1;
        margin-left: auto;
    }
    .your-clubs-header .your-clubs-header-right {
        order: 2;
        margin-left: 0;
    }
}

/* Your Picks and Recent Activity take the same header treatment on desktop:
   title on its own row with a hairline divider beneath it. Below 640px every
   .dash-msec-header already gets this (see the unified section-header block
   further down) — these two just weren't carrying it at desktop widths. */
.picks-section-header,
.activity-section-header {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid #e5e7eb;
}
/* Extra breathing room above Your Picks. Scoped to desktop — the rule above
   is unscoped, and the ≤640px layout sets its own section rhythm. */
@media (min-width: 641px) {
    .picks-section-header { margin-top: 50px !important; }
}
/* The subtitle would make this header two lines tall while the other two are
   one, so it moves onto the title's own line as a trailing note instead of
   stacking under it. Same reasoning as the mobile block, which drops it. */
.picks-section-header .picks-section-title {
    display: flex;
    /* Overrides the column stacking set on .picks-section-title further
       down the file — without this the subtitle keeps its own line. */
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}
.picks-section-header .section-subtitle { margin: 0; }

/* On phones, keep everything on one row: "Your Clubs" title on the left,
   the sort select and the card/row view toggle grouped on the right —
   same layout as desktop, just tighter gaps. */
@media (max-width: 640px) {
    .your-clubs-header {
        flex-wrap: nowrap;
        gap: 8px;
    }
    .your-clubs-header-left {
        min-width: 0;
    }
    .your-clubs-header-left h4 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .your-clubs-header #clubsViewToggle {
        flex-shrink: 0;
    }
}

/* Preloader: an overlay rather than a "display:none body + spinner"
   swap. The body MUST stay in the layout while loading — browsers
   skip lazy <img> loads for elements inside display:none, which would
   then deadlock the preloader (it'd wait forever for load events that
   never fire). With opacity+overlay, images start loading immediately
   and the spinner just sits on top until they're done. */
.your-clubs-section { position: relative; }
.your-clubs-section .your-clubs-loader {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    color: #6b7280;
    font-size: 0.85rem;
    /* Anchored to the TOP of the section (not a full-cover, vertically
       centered white box) so the spinner is visible immediately even when the
       loading card body below is very tall. The body itself is already hidden
       via opacity:0, so the loader doesn't need to cover it. */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 16px 0 22px;
    background: transparent;
    z-index: 5;
}
.your-clubs-section.is-loading .your-clubs-loader { display: flex; }
.your-clubs-section.is-loading .your-clubs-body {
    /* opacity (not visibility/display) — keeps the body fully in
       layout AND visually scrollable to the lazy-load IntersectionObserver
       so <img loading=lazy> can actually fire load events. */
    opacity: 0;
    pointer-events: none;
}
/* `backwards`, not `both`. `both` retains the final keyframe forever, and a
   filling transform animation keeps a stacking context alive on this element
   — which trapped the sort/filter dropdown inside it, so with the section
   collapsed the menu painted behind the Your Picks tiles below. The end
   frame is identical to the element's natural state anyway, so there's
   nothing to retain; `backwards` still covers the pre-start frame. */
.your-clubs-section .your-clubs-body {
    animation: yourClubsFadeIn .25s ease-out backwards;
}
@keyframes yourClubsFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}
.your-clubs-loader-anim {
    width: 120px;
    height: 120px;
    display: block;
}
.your-clubs-loader-label { font-weight: 500; letter-spacing: .02em; }
@media (prefers-reduced-motion: reduce) {
    .your-clubs-section .your-clubs-body { animation: none; }
}

.your-clubs-header-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.your-clubs-header-left h4 { margin: 0; }

/* Right-side cluster: filter toggles + sort dropdown share a row, wrap
   on narrow widths so neither squeezes the title. */
.your-clubs-header-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.club-sort-select {
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b7280;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s ease, color 0.15s ease;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3af'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
}

.club-sort-select:hover,
.club-sort-select:focus {
    border-color: #29B5A8;
    color: #29B5A8;
}

.club-card-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.club-section + .club-section {
    margin-top: 18px;
}
.club-section-header {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 4px 0 10px;
    padding: 6px 4px;
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #1e293b;
    background: none;
    border: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
}
.club-section-icon {
    font-size: 21px;
    color: #2b988f;
}
.club-section-label { flex: 0 0 auto; }
.club-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    padding: 2px 7px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #64748b;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
}
.club-section-toggle-icon {
    margin-left: auto;
    font-size: 16px !important;
    color: #94a3b8;
    transition: transform 0.18s ease, color 0.15s ease;
}
.club-section-header:hover .club-section-toggle-icon,
.club-section-header:focus-visible .club-section-toggle-icon {
    color: #2b988f;
}
.club-section-header[aria-expanded="false"] .club-section-toggle-icon {
    transform: rotate(-90deg);
}
.club-section.is-collapsed .club-card-grid {
    display: none;
}

.club-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 0px solid #dbe7e6;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

    .club-row:hover {
        background: rgba(0,0,0,.02);
    }

        .club-row:hover .club-row-main {
            color: #191919;
        }

.club-row-cover {
    position: relative;
    width: 74px;
    height: 74px;
    border-radius: 6px;
    overflow: hidden;
    background: #e5e5e5;
    flex-shrink: 0;
}

    /* Album cover image only */
    .club-row-cover > img:not(.picker-avatar):not(.dash-picker-avatar) {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


.club-row-main {
    flex: 1;
    min-width: 0;
}

.club-row-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.club-row-sub {
    font-size: 0.75rem;
    color: #555;
    display: flex;
    align-items: center;
    gap: 4px;
}

.club-row-album {
    font-size: 0.78rem;
    color: #333;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 3px;
}

.club-row-main .icon {
    font-size: 0.85rem;
    opacity: 0.7;
}

.muted {
    color: var(--rt-muted);
}

/* =========================
   CLUB META (RIGHT SIDE)
========================= */

.club-row-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    font-size: 0.72rem;
    color: #666;
}

.meta-updated {
    opacity: 0.85;
}

    .meta-updated .material-icons {
        font-size: 0.85rem;
        opacity: 0.6;
    }


.meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

    .meta-item .material-icons {
        font-size: 0.9rem;
        opacity: 0.7;
    }

/* =========================
   INVITES
========================= */

/* Pending invite card — dialog-sheet style */
.invite-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rt-border);
    border-radius: 10px;
    background: #fff;
    margin-bottom: 10px;
    overflow: hidden;
}

.invite-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--rt-border);
    border-radius: 8px;
    background: #fafafa;
    margin-bottom: 8px;
}

.invite-card-body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px 12px;
}

.invite-avatar {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(43,152,143,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2B988F;
    font-size: 1rem;
    font-weight: 700;
}

.invite-meta {
    flex: 1;
    min-width: 0;
}

.invite-meta-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--rt-text);
    line-height: 1.2;
}

.invite-meta-by {
    font-size: 0.72rem;
    color: var(--rt-muted);
    margin-top: 2px;
}

.invite-meta-desc {
    font-size: 0.75rem;
    color: var(--rt-muted);
    margin-top: 5px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.invite-card-footer {
    display: flex;
    border-top: 1px solid var(--rt-border);
}

.invite-card-btn {
    flex: 1;
    padding: 11px 0;
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.15s;
    line-height: 1;
}

.invite-card-btn + .invite-card-btn {
    border-left: 1px solid var(--rt-border);
}

.invite-card-btn.accept {
    color: #2B988F;
}

.invite-card-btn.accept:hover {
    background: rgba(43,152,143,0.07);
}

.invite-card-btn.decline {
    color: #b91c1c;
}

.invite-card-btn.decline:hover {
    background: rgba(185,28,28,0.05);
}

/* =========================
   ACTIVITY FEED
========================= */

.activity-item {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--rt-border);
}

    .activity-item:last-child {
        border-bottom: none;
    }

.activity-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.activity-body {
    font-size: 0.75rem;
    color: #374151;
}

    .activity-body strong {
        font-weight: 600;
    }

/* =========================
   SEARCH
========================= */

.dash-search {
    width: 100%;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--rt-border);
    font-size: 0.8rem;
}

    .dash-search:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(43,152,143,0.18);
        border-color: var(--rt-primary);
    }

/* ── Create a Club grid ──────────────────────────────────────── */
.dash-create-club-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 4px 2px 6px;
}

.dash-club-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 14px 8px 12px;
    border-radius: 10px;
    border: 1.5px solid var(--rt-border);
    text-decoration: none;
    color: #1a1a2e;
    text-align: center;
    transition: border-color .15s, box-shadow .15s, background .15s;
    background: #fff;
}

    .dash-club-type-card:hover {
        border-color: var(--rt-primary);
        box-shadow: 0 2px 8px rgba(43,152,143,0.15);
        color: #1a1a2e;
    }

    .dash-club-type-card .material-icons {
        font-size: 1.6rem;
        color: var(--rt-primary);
    }

.dash-club-type-name {
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
}

.dash-club-type-desc {
    font-size: 0.65rem;
    color: #666;
    line-height: 1.3;
}

.dash-club-type-card--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

    .dash-club-type-card--disabled .material-icons {
        color: #aaa;
    }

.dash-club-type-coming-soon {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #999;
    background: #f0f0f0;
    border-radius: 99px;
    padding: 2px 7px;
}

/* =========================
   EMPTY STATES
========================= */

.dash-empty {
    text-align: center;
    padding: 24px 10px;
    color: var(--rt-muted);
    font-size: 0.75rem;
}

/* Picker avatar badge */
.dash-picker-avatar,
.picker-avatar {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2); 
    object-fit: cover;
    background: #eee;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    z-index: 2;
}

/* PROFILE � FAVORITE ARTISTS (V5) */

.favorite-artist-list {
    display: flex;
    flex-wrap: wrap;
}

.favorite-artist-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e5e7eb;
}

    .favorite-artist-row img {
        width: 35px;
        height: 35px;
        border-radius: 4px;
        object-fit: cover;
    }

    .favorite-artist-row .artist-name {
        font-size: 0.75rem;
        font-weight: 600;
        color: #111827;
        margin-left: 8px;
    }

.profile-avatar-dashboard {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    object-fit: cover;
    background: #e5e7eb;
    flex-shrink: 0;
    border:2px solid #555;
}

/* =========================
   CLUB CARD � RATING + UPDATE
========================= */

.club-row-rating {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 6px;
    font-size: 0.7rem;
    color: #9ca3af;
}

    .club-row-rating .star {
        font-size: 0.9rem;
        opacity: 0.5;
        color: #9ca3af;
    }

        .club-row-rating .star.filled {
            opacity: 1;
            color: #f5b301;
        }


    .club-row-rating .rating-label {
        margin-left: 6px;
        font-weight: 600;
        color: #6b7280;
    }

.rating-label {
    font-size: 0.75rem;
    font-weight: 600;
}

.rating-count {
    font-weight: 500;
    color: #6b7280;
    margin-left: 4px;
}


.club-row-updated {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 0.7rem;
    color: #6b7280;
}

    .club-row-updated .material-icons {
        font-size: 0.85rem;
        opacity: 0.7;
    }

    .club-row-updated .label {
        font-weight: 600;
    }

/* ======================================
   PROFILE � FAVORITE MUSICIANS (MEDIA LIST)
====================================== */

.media-list {
    list-style: none;
    padding: 0;
    margin: 0;
    
}

    .media-list .media {
        padding: 0;
        border-bottom: 1px solid #E5E7EB;
        margin-top: 5px;
    }

.list-item-thumb {
    width: 40px;
    height: 40px;
    margin-right: 12px;
    background-size: cover;
    background-position: center;
    background-color: #eee;
    flex-shrink: 0;
}

.list-item-text {
    line-height: 1.1;
}

.list-item-head {
    font-size: .8rem;
    font-weight: 500;
    margin: 0 0 4px 0;
    color: #111827;
    letter-spacing: .5px;
}

.list-item-info {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #DC506A;
    margin: 0;
}

/* =========================
   DASHBOARD � NOTIFICATIONS
========================= */

.notification-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notification-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid #e6eaee;
    transition: background-color .15s ease, transform .12s ease;
}


.notification-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.notification-body {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    font-size: 0.85rem;
    flex-grow: 1;
    /* Without this a long unbroken name/email (min-width:auto on a flex
       item) forces the row wider than the box and shoves the buttons out. */
    min-width: 0;
}

    .notification-body strong {
        font-weight: 600;
    }

    /* Truncate the name line with an ellipsis instead of overflowing —
       covers long usernames and email-address usernames. */
    .notification-body .username-link {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .notification-body .muted {
        font-size: 0.72rem;
        opacity: .7;
    }

/* Make button sit right */
.notification-item .cancel-friend-request-btn {
    margin-left: auto;
    flex-shrink: 0;
}


/* =========================
   Cancel Friend Request Button
========================= */

.cancel-friend-request-btn {
    background: rgba(220, 53, 69, 0.08);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.25);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.18s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

    .cancel-friend-request-btn:hover {
        background: rgba(220, 53, 69, 0.15);
        border-color: rgba(220, 53, 69, 0.45);
        color: #b02a37;
    }

    .cancel-friend-request-btn:active {
        transform: scale(0.97);
    }

    .cancel-friend-request-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* =========================
   Invite / Friend Action Buttons
========================= */

.invite-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

    /* Accept — solid brand teal, the primary action */
    .invite-btn.accept {
        background: #2B988F;
        border-color: #2B988F;
        color: #fff;
    }

        .invite-btn.accept:hover {
            background: #23807a;
            border-color: #23807a;
        }

    /* Decline — quiet neutral until hovered, then destructive red */
    .invite-btn.decline {
        background: #f3f4f6;
        border-color: #e5e7eb;
        color: #6b7280;
    }

        .invite-btn.decline:hover {
            background: #fdeaea;
            border-color: #f2c4c4;
            color: #b91c1c;
        }

    .invite-btn:disabled,
    .invite-btn.is-loading {
        opacity: .55;
        cursor: default;
        pointer-events: none;
    }

    /* Normalize Material Icons inside buttons */
    .invite-btn .material-icons {
        font-size: 12px !important;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }



/* =========================
   FRIEND REQUEST TABS
========================= */

/* Friend request tabs — a segmented control. The tabs sit on a tinted
   track and the active one is marked by a white rect sliding behind it
   (.fr-tab-slider), so switching reads as one object moving rather than
   two buttons swapping fills. --fr-slider-x is set by the JS from the
   clicked tab's data-translate-value. */
.friend-request-tabs {
    margin-bottom: 12px;
    --fr-slider-x: 0;
}
.fr-tabs-wrapper { position: relative; }

.fr-tab-list {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 3px;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(43, 152, 143, 0.08);
}
.fr-tab-list li {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1 0 50%;
}

.fr-tab {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #2B988F;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.4s ease-in-out;
}
.fr-tab:hover { color: #23807a; }
.fr-tab.active { color: #1a1d2e; }
.fr-tab:focus { outline: none; }
.fr-tab:focus-visible {
    outline: 2px solid #2B988F;
    outline-offset: -2px;
}

/* The moving marker. Inset by the track's own padding so the rect lands
   exactly on the tab rather than on the track edge. */
.fr-tab-slider {
    pointer-events: none;
    position: absolute;
    inset: 0;
    padding: 3px;
    z-index: 0;
}
.fr-tab-slider-rect {
    height: 30px;
    width: 50%;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 10px -4px rgba(0, 0, 0, 0.12);
    transition: transform 0.4s ease-in-out;
    transform: translateX(var(--fr-slider-x));
}
@media (prefers-reduced-motion: reduce) {
    .fr-tab-slider-rect,
    .fr-tab { transition: none; }
}

.fr-tab-pane {
    display: none;
}

    .fr-tab-pane.active {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

/* ===== DASHBOARD STYLES ===== */

.section-subtext {
    font-size: 12px;
    color: #777;
    margin-top: 4px;
}

    .section-subtext a {
        color: #666;
        text-decoration: underline;
    }

        .section-subtext a:hover {
            color: #000;
        }

/* ======================================
   FRIEND REQUEST ACTION BUTTONS (DASH)
====================================== */

.notification-item .invite-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1;
    height: 30px;
    padding: 0 12px;
    border-radius: 8px; /* match dashboard cards, not giant pills */
    font-size: 0.75rem;
    flex-shrink: 0; /* buttons hold size; the name line truncates instead */
}

    /* Fix Material Icon alignment */
    .notification-item .invite-btn .material-icons {
        font-size: 16px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
    }

/* ======================================
   HEADER NOTIFICATION FRIEND REQUESTS
====================================== */

.notification-dropdown .dropdown-friend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #eef1f4;
}

.notification-dropdown .notification-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.notification-dropdown .notification-body {
    flex: 1;
    font-size: 0.8rem;
    line-height: 1.2;
}

.notification-dropdown .dropdown-friend-item {
    padding: 10px 14px;
    border-bottom: 1px solid #eef1f4;
}

.notification-dropdown .notification-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notification-dropdown .notification-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Header dropdown friend rows: JS renders the name as a .flex-grow-1 div
   (not .username-link) — truncate it so a long name/email can't push the
   Accept/Decline buttons past the dropdown edge. */
.notification-dropdown .notification-item > .flex-grow-1 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-dropdown .invite-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 26px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 0.7rem;
}


/* ======================================
   HEADER NOTIFICATION DROPDOWN LAYOUT
====================================== */

/* Remove Bootstrap inner padding */
.notification-dropdown {
    padding: 0;
}

    /* Each request row should span full width */
    .notification-dropdown .dropdown-friend-item {
        list-style: none;
        width: 100%;
        padding: 10px 14px;
    }

    /* Make the flex container stretch */
    .notification-dropdown .notification-item {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* Keep buttons aligned right */
    .notification-dropdown .notification-actions {
        margin-left: auto;
        display: flex;
        gap: 6px;
    }

/* =========================
   FRIENDS WIDGET
========================= */

.friends-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.friend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    transition: .15s ease;
    cursor: default;
}

    .friend-item:hover {
        background: rgba(0,0,0,.03) !important;
    }

.friend-item-link {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

    .friend-item-link:hover .friend-name {
        color: var(--rt-primary);
    }

.friends-view-all {
    padding: 6px 12px 4px;
    font-size: 0.8rem;
}

    .friends-view-all a {
        color: var(--rt-primary);
        text-decoration: none;
        font-weight: 500;
    }

    .friends-view-all a:hover {
        text-decoration: underline;
    }

.friend-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.friend-meta {
    flex: 1;
    min-width: 0;
}

.friend-name {
    font-weight: 600;
    color: var(--text-dark);
}


.friend-status {
    font-size: 12px;
}

    .friend-status.online {
        color: #28a745;
    }

    .friend-status.offline {
        color: #6c757d;
    }

.friend-profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #444;
    text-decoration: none;
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}


    .friend-profile-btn .material-icons,
    .friend-message-btn .material-icons {
        font-size: 18px;
        line-height: 1;
    }


.friend-message-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(43, 152, 143, 0.35);
    background: rgba(43, 152, 143, 0.08);
    color: var(--rt-primary);
    cursor: pointer;
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}



    .friend-message-btn .material-icons {
        font-size: 16px;
        line-height: 1;
    }

    .friend-message-btn:hover {
        background: rgba(43, 152, 143, 0.16);
    }

/* ===== Sidebar Widgets Upgrade ===== */

.sidebar-review-item,
.sidebar-thread-item {
    padding: 4px;
    margin-bottom: 10px;
    transition: all 0.2s ease;
    border-radius: 8px;
}

    .sidebar-thread-item:hover .sidebar-thread-title {
        color: #17756D;
    }

.sidebar-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.sidebar-review-title,
.sidebar-thread-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: #2B988F;
    line-height: 1.2;
    margin-bottom: 3px;
}

.sidebar-stars {
    font-size: 0.75rem;
    color: #f4b400;
    letter-spacing: 1px;
}

.sidebar-meta,
.sidebar-thread-meta {
    font-size: 0.72rem;
    color: #777;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .sidebar-thread-meta .material-icons {
        font-size: 0.8rem;
        color: #929292;
    }

.sidebar-snippet {
    font-size: 0.75rem;
    color: #555;
    margin-top: 4px;
    line-height: 1.2;
}

.sidebar-view-more {
    font-size: 0.7rem;
    color: #2B988F;
    margin-top: 3px;
    cursor: pointer;
    font-weight: 600;
}

.review-highlight {
    animation: reviewFlash 2.5s ease;
    border: 2px solid #2B988F !important;
}

@keyframes reviewFlash {
    0% {
        background: rgba(43,152,143,0.2);
    }

    100% {
        background: transparent;
    }
}

/* Sidebar discussions */
.sidebar-thread-item {
    cursor: pointer;
}

.sidebar-thread-author {
    margin-left: 6px;
    font-size: 0.7rem;
    color: #888;
}

/* =========================
   DASHBOARD � RECENT ACTIVITY
========================= */

.activity-feed {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
}

/* Avatar */
.dash-activity-avatar,
.activity-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Body */
.activity-body {
    flex: 1;
    min-width: 0;
}

    .activity-body p {
        margin: 0;
        font-size: 0.92rem;
        line-height: 1.4;
    }

    .activity-body strong {
        font-weight: 600;
    }

.activity-club {
    font-weight: 600;
    color: #2B988F;
    text-decoration: none;
}

    .activity-club:hover {
        text-decoration: underline;
    }

.username-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

    .username-link:hover {
        text-decoration: underline;
    }

/* Timestamp */
.activity-body small {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    color: #8a8f98;
}

/* Empty state */
.activity-feed .dash-empty {
    padding: 20px;
    text-align: center;
    color: #8a8f98;
    font-size: 0.9rem;
}


.chat-search-results {
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    padding: 10px;
}

.chat-search-highlight {
    background: #ffe58f;
    padding: 0 2px;
    border-radius: 3px;
}


.chat-search-item {
    padding: 6px 10px;
    border-radius: 6px;
    transition: background 0.15s ease;
}

    .chat-search-item:hover,
    .chat-search-active {
        background: rgba(43, 152, 143, 0.12);
    }

.chat-search-highlight {
    background: #fff3cd;
    padding: 0 2px;
    border-radius: 3px;
}

/* =========================
   STATS STRIP
========================= */

.dash-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #141414;
    border-bottom: 1px solid #2a2a2a;
}

.dash-stat-item {
    padding: 12px 0 20px;
    text-align: center;
    border-right: 1px solid #2a2a2a;
    cursor: pointer;
}

.dash-stat-item:last-child { border-right: none; }

.dash-stat-num {
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
}

.dash-stat-label {
    font-size: 0.62rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
.dash-stat-icon {
    font-size: 0.75rem !important;
    color: #29B5A8;
    line-height: 1;
}

/* =========================
   PENDING REVIEWS ALERT
========================= */

.dash-pending-section .section-header h4 {
    color: #29B5A8;
}

.dash-pending-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dash-pending-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 4px;
    border-bottom: 1px solid #f0f2f5;
    text-decoration: none;
    color: inherit;
    transition: background .12s ease;
    border-radius: 6px;
}

.dash-pending-item:last-child { border-bottom: none; }

.dash-pending-item:hover { background: rgba(41,181,168,0.05); }

/* Upcoming Picks filter. Desktop keeps the plain card — the header stays
   inside it and the dropdown is hidden; everything below only comes alive
   in the ≤640px block further down. [hidden] needs the explicit rule
   because .dash-pending-item is display:flex, which would win otherwise. */
/* Two-selector form on purpose: this element is also .mim-sort-wrap, and
   members.css (which sets that to display:flex) loads AFTER this file, so a
   bare .upcoming-picks-filter loses the tie and the filter shows on desktop. */
#upcomingPicksSection .upcoming-picks-filter { display: none; }

/* =========================
   COLLAPSIBLE MOBILE SECTIONS
   Every dashboard section (Pending Invites, Upcoming Picks, Your Clubs,
   Your Picks, Recent Activity) shares one header treatment on mobile:
   title + chevron on the left, controls on the right, hairline divider
   below, body collapsible. The toggle is a real <button> nested inside
   the section's existing <h4> so the heading keeps its semantics — the
   rules here reset it back to looking exactly like the plain title text
   it replaced, which is all desktop ever sees.
========================= */

.dash-msec-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-align: left;
    cursor: pointer;
}
.dash-msec-toggle:focus { outline: none; }
.dash-msec-toggle:focus-visible {
    outline: 2px solid #2b988f;
    outline-offset: 3px;
    border-radius: 4px;
}
/* Two-class selector on purpose: material-icons.css loads after this file
   and its `.material-icons { display: inline-block }` would otherwise win
   the tie. */
.dash-msec-toggle .dash-msec-chevron {
    display: inline-block;
    font-size: 20px;
    line-height: 1;
    color: #adb5bd;
    flex-shrink: 0;
    transition: transform .2s ease;
}
.dash-msec.is-collapsed .dash-msec-chevron { transform: rotate(-90deg); }
.dash-msec.is-collapsed .dash-msec-body    { display: none; }
/* Collapsed: the divider stays as the section's boundary, but it no longer
   needs to hold a gap open above content that isn't there. */
.dash-msec.is-collapsed .dash-msec-header  { margin-bottom: 0; }
.dash-pending-item[hidden] { display: none; }
.dash-pending-item.is-last { border-bottom: none; }

.dash-pending-empty {
    font-size: 0.75rem;
    color: #6c757d;
    padding: 12px 4px 6px;
}

.dash-pending-cover {
    width: 42px;
    height: 42px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.dash-pending-cover--empty {
    background: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
}

.dash-pending-cover--empty .material-icons { font-size: 20px; }

.dash-pending-meta { flex: 1; min-width: 0; }

.dash-pending-album {
    font-size: 0.8rem;
    font-weight: 700;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-pending-club {
    font-size: 0.7rem;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-pending-cta {
    font-size: 0.72rem;
    font-weight: 700;
    color: #2b988f;
    white-space: nowrap;
    flex-shrink: 0;
}

/* "Up for Review" sidebar box: match the other sidebar headers (no teal). */
#upForReviewBox .section-header h4 { color: inherit; }

/* Hide rows past the first 3 until expanded. */
.dash-pending-item--extra { display: none; }
#upForReviewBox.is-expanded .dash-pending-item--extra { display: flex; }

/* Collapsed: drop the last visible row's bottom border so it doesn't double
   up with the toggle's top border (only one grey divider above "Show more"). */
#upForReviewBox:not(.is-expanded) .dash-pending-item:nth-child(3) { border-bottom: none; }

.dash-pending-toggle {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 7px 0 2px;
    background: none;
    border: none;
    border-top: 1px solid #f0f2f5;
    font-size: 0.75rem;
    font-weight: 700;
    color: #2b988f;
    cursor: pointer;
    text-align: center;
}

.dash-pending-toggle:hover { text-decoration: underline; }

/* =========================
   REDESIGNED CLUB CARDS
========================= */

/* ── Club rows (my-clubs list view style) ───────────────────────── */
.club-row {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--rt-border);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.15s;
    margin-bottom: 8px;
}
.club-row:last-child { margin-bottom: 0; }
.club-row:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.07); }
.club-row--needs-review { border-left: 3px solid #2b988f; }

/* Head */
.crb-head {
    width: 190px;
    min-width: 190px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-right: 1px solid #f0f0f0;
    background: #fafafa;
}
.crb-thumb-wrap { position: relative; flex-shrink: 0; text-decoration: none; }
.crb-thumb {
    width: 57px;
    height: 57px;
    border-radius: 7px;
    object-fit: cover;
    display: block;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.crb-thumb-placeholder {
    width: 57px;
    height: 57px;
    border-radius: 7px;
    background: linear-gradient(135deg, #2d2d6a, #29B5A8);
    display: flex;
    align-items: center;
    justify-content: center;
}
.crb-thumb-placeholder .material-icons { font-size: 20px; color: rgba(255,255,255,0.75); }
.crb-unread-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2b988f;
    border: 2px solid #fafafa;
}
.crb-head-info { min-width: 0; flex: 1; }
.club-row-title {
    display: block;
    font-size: 0.87rem;
    font-weight: 700;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}
.club-row-title:hover { color: var(--rt-primary); text-decoration: none; }
.crb-head-sub {
    display: block;
    font-size: 0.67rem;
    color: #9ca3af;
    margin-top: 1px;
}
.crb-review-status {
    display: block;
    font-size: 0.67rem;
    font-weight: 600;
    margin-top: 3px;
}
.crb-review-status--pending { color: #c0392b; }
.crb-review-status--done    { color: #16a34a; }
.crb-np-time {
    font-size: 0.58rem;
    font-weight: 500;
    color: #9ca3af;
    letter-spacing: 0;
    text-transform: none;
}

/* Body */
.crb-body {
    flex: 1;
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 10px 14px;
    overflow: hidden;
}
.crb-now-playing {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1.5px dashed #d1d5db;
    border-radius: 9px;
    padding: 7px 10px;
    cursor: pointer;
    transition: border-color 0.15s;
}
.crb-now-playing:hover { border-color: rgba(41,181,168,0.5); }
.crb-np-label {
    font-size: 0.59rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rt-primary);
    margin-bottom: 1px;
}
.crb-np-title {
    font-size: 0.81rem;
    font-weight: 700;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.crb-np-artist {
    font-size: 0.72rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.crb-np-reviews {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
}
.crb-stats {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

/* Badges & pills */
.crb-badge {
    flex-shrink: 0;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.crb-badge--review {
    background: #fee2e2;
    color: #dc2626;
}
.crb-badge--reviewed {
    background: #dcfce7;
    color: #16a34a;
}
.crb-time {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
}
.crb-time--green  { background: #e6f9f0; color: #1a7f4b; }
.crb-time--amber  { background: #fef3cd; color: #926c00; }
.crb-time--red    { background: #fde8e8; color: #c0392b; }
.crb-avg          { font-size: 0.72rem; font-weight: 700; color: #f5b301; }
.crb-reviews      { font-size: 0.68rem; color: #9ca3af; font-weight: 500; }
.crb-reviews--none { color: #d1d5db; font-style: italic; }
.crb-no-pick      { font-size: 0.78rem; color: #9ca3af; font-style: italic; }

/* Footer */
.crb-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-left: 1px solid #f0f0f0;
}
.crb-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--rt-primary);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 7px 13px;
    border-radius: 7px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
}
.crb-open-btn:hover { background: var(--rt-primary-dark); color: #fff; text-decoration: none; }
.crb-open-btn .material-icons { font-size: 14px; }

/* =========================
   ALBUM ART SHELF
========================= */

.dash-art-shelf-wrap {
    overflow-x: auto;
    scrollbar-width: none;
    margin: -2px -4px;
    padding: 2px 4px;
}

.dash-art-shelf-wrap::-webkit-scrollbar { display: none; }

.dash-art-shelf {
    display: flex;
    gap: 7px;
    padding-bottom: 4px;
}

.dash-art-item {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    display: block;
    transition: transform .12s ease, opacity .12s ease;
    background: #f0f2f5;
}

.dash-art-item:hover { transform: scale(1.06); opacity: .9; }

.dash-art-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================
   REDISCOVER WIDGET
========================= */

.section-sub {
    font-size: 0.72rem;
    color: #9ca3af;
    margin-top: 1px;
}

/* ── Rediscover card (partials/rediscover-card.php) ─────────────────────
   Top: cover + title / artist / club · date.
   Scores: two aligned, labelled columns — Club avg | Your review — so the
   two ratings line up and read at a glance. Then the user's comment. */
.dash-rediscover-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    padding: 8px 6px 6px;
    border-radius: 12px;
    transition: background .12s ease;
}
.dash-rediscover-card:hover { background: rgba(15, 23, 42, .03); color: inherit; }

.dash-rediscover-top {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.dash-rediscover-cover-wrap {
    position: relative;
    flex-shrink: 0;
    width: 68px;
    height: 68px;
}
.dash-rediscover-cover {
    width: 68px;
    height: 68px;
    border-radius: 9px;
    object-fit: cover;
    display: block;
    box-shadow: 0 3px 10px rgba(0,0,0,.15);
}
.dash-rediscover-spotify {
    position: absolute;
    bottom: -7px;
    right: -7px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1DB954;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.35);
    transition: transform .15s;
}
.dash-rediscover-spotify:hover { transform: scale(1.12); color: #fff; }

.dash-rediscover-meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dash-rediscover-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-rediscover-artist {
    font-size: 0.76rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Club · date */
.dash-rediscover-context {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    min-width: 0;
    font-size: 0.7rem;
    color: #9aa1ad;
    white-space: nowrap;
}
.dash-rediscover-context .material-icons { font-size: 13px; color: #b7bec9; flex-shrink: 0; }
.dash-rediscover-club {
    font-weight: 600;
    color: #6b7280;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-rediscover-sep { flex-shrink: 0; }
.dash-rediscover-date { flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* Scores: the club's average stacked above yours, one row each, with a
   hairline between. Three columns so the stars line up down the card
   whatever the labels and numbers are: label, stars, number. */
.dash-rediscover-scores {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 6px;
}
.dash-rediscover-score {
    display: grid;
    grid-template-columns: 76px auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0 2px;
}
.dash-rediscover-score + .dash-rediscover-score {
    border-top: 1px solid #eef1f4;
    padding-top: 6px;
}
.dash-rediscover-score-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9aa1ad;
    line-height: 1.25;
    white-space: nowrap;
}
.dash-rediscover-score-value {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    min-height: 18px;
    /* A small step off the last star, not a whole column's worth. */
    margin-left: -2px;
}
/* No score for this row: nothing to draw stars for, so the message takes
   the stars' and the number's columns. */
.dash-rediscover-score .dash-rediscover-score-empty { grid-column: 2 / -1; }

/* Ten stars filled to the exact score — 5.8 fills 58% of the row, part-way
   through the sixth star. Two identical rows of ten glyphs: a grey track,
   and a tinted copy laid over it and clipped to the score's width (the
   inline width comes from dash_rating_stars()). The tint is the same hue as
   the pill beside it, set inline as --rating-hue, so the row reads as one
   colour. Clipping the overlay is what makes the fill exact — glyph swaps
   could only ever land on a whole or half star. */
.dash-stars {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    /* Last resort on a narrow card: the glyphs are a fixed size, so the row
       can't reflow and would otherwise push the number off the end. */
    overflow: hidden;
}
.dash-stars__row {
    display: flex;
    align-items: center;
    line-height: 1;
    white-space: nowrap;
}
.dash-stars__row--track { color: #dde1e7; }
/* Same origin and same glyphs as the track, so the two line up exactly;
   only the width differs. */
.dash-stars__row--fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    color: hsl(var(--rating-hue, 100) 62% 42%);
}
/* Qualified with the parent on purpose: material-icons.css loads after this
   file (header.php:58 vs :42) and sets font-size:24px on .material-icons, so
   a lone .dash-stars__i rule ties on specificity and loses on source order.
   Both rows take their size from here — if they ever differed the overlay
   would drift out of register with the track. */
.dash-stars .dash-stars__i {
    font-size: 15px;
    line-height: 1;
    flex: 0 0 auto;
}
/* Smaller than the pill everywhere else on the dashboard: in this row it
   sits next to the stars as the exact figure, not as the headline. Scoped
   so the Reviews / Picks sheets keep their own size. */
.dash-rediscover-score-value .dash-m-review-rating {
    padding: 2px 6px;
    font-size: .64rem;
}
@media (max-width: 1199.98px) {
    .dash-rediscover-score { grid-template-columns: 70px auto minmax(0, 1fr); gap: 6px; }
    .dash-stars .dash-stars__i { font-size: 14px; }
}
.dash-rediscover-score-empty {
    font-size: 0.74rem;
    font-style: italic;
    color: #b0b7c3;
}
.dash-rediscover-delta {
    font-size: 0.56rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 0;
    border-radius: 20px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.dash-rediscover-delta.delta--up   { color: #15803d; }
.dash-rediscover-delta.delta--down { color: #b91c1c; }
.dash-rediscover-delta.delta--even { color: #6b7280; }

.dash-rediscover-comment {
    font-size: 0.74rem;
    color: #6b7280;
    line-height: 1.45;
    font-style: italic;
    padding: 0 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Rediscover header row */
.rediscover-section-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.rediscover-header-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rediscover-header-left h4 { margin: 0; }

.rediscover-refresh-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #9ca3af;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}

.rediscover-refresh-btn:hover {
    color: #29B5A8;
    background: rgba(41, 181, 168, 0.08);
}

.rediscover-refresh-btn .material-icons {
    font-size: 1.1rem;
    transition: transform 0.5s ease;
}

.rediscover-refresh-btn.spinning .material-icons {
    animation: rediscover-spin 0.6s linear infinite;
}

@keyframes rediscover-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Shimmer skeleton */
.rediscover-shimmer {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 6px 4px;
}

.rediscover-shimmer-cover {
    width: 68px;
    height: 68px;
    border-radius: 9px;
    flex-shrink: 0;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer-sweep 1.2s infinite;
}

.rediscover-shimmer-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rediscover-shimmer-line {
    height: 10px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer-sweep 1.2s infinite;
}

@keyframes shimmer-sweep {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* Fade-in on card refresh */
#rediscoverCardWrap {
    transition: opacity 0.25s ease;
}

#rediscoverCardWrap.fading {
    opacity: 0;
}

/* =========================
   FRIENDS' RECENT RATINGS
========================= */

.dash-friend-ratings {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Your Picks grid ─────────────────────────────────────────── */
/* Desktop/tablet: unchanged from before — a wrapping grid where JS
   (adjustGrid) hides everything past what fits in one row, so See All is
   always visible with no scrolling needed. */
.dash-picks-shelf {
    position: relative;
}
.dash-picks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 150px);
    gap: 10px;
    padding: 2px 0 4px;
}

/* Mobile only: a horizontal scroll shelf (mobile-style) instead of the
   fit-based grid — all fetched picks (up to 10) plus See All render at
   once and the row scrolls instead of hiding anything. */
@media (max-width: 575px) {
    .dash-picks-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 10px;
        padding: 2px 2px 6px;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        /* No scrollbar — swipe sliders elsewhere hide it too; the right-edge
           fade below is the "there's more" cue. */
        scrollbar-width: none;
    }
    .dash-picks-grid::-webkit-scrollbar { display: none; }
    .dash-picks-grid .pick-shelf-tile,
    .dash-picks-grid .pick-shelf-see-all {
        scroll-snap-align: start;
    }
    /* Right-edge fade — the "there's more" cue. Fades out once the shelf
       is scrolled to its end so the affordance doesn't linger past its
       purpose. */
    .dash-picks-shelf.is-scrollable::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 6px;
        width: 40px;
        background: linear-gradient(to right, rgba(255,255,255,0), var(--rt-bg, #fff));
        pointer-events: none;
        opacity: 1;
        transition: opacity .2s ease;
    }
    .dash-picks-shelf.is-scrollable.is-at-end::after {
        opacity: 0;
    }
}

/* When picks are split by media type, stack the per-type sections with the
   same vertical rhythm we use for the Your Clubs split. */
.picks-section + .picks-section {
    margin-top: 18px;
}

.pick-shelf-tile {
    flex: 0 0 150px;
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease;
    background: #f3f4f6;
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
}
    .pick-shelf-tile:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 10px 24px rgba(0,0,0,0.14); }
    .pick-shelf-tile img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; display: block; }

.picks-row-item { overflow: hidden; }
/* (The "Open in archive" band that slid up over the caption on hover was
   removed — the caption stays readable on hover.) */

/* Picks section header — title on the left, media-type filter toggles
   on the right, on the same baseline. Falls back to stacked on narrow
   widths so the toggles don't squeeze the title. */
.section-header.section-header--row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.picks-section-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.picks-section-title h4 { margin: 0; }

.picks-filter {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
/* Modal variant — sits left of the card/list view toggle in the picks
   modal header. Small separator keeps it visually distinct from the
   view-toggle group. */
.mim-picks-filter { margin-right: 8px; }
.picks-filter-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: #8a92a0;
    margin-right: 3px;
    user-select: none;
}
@media (max-width: 768px) {
    .picks-filter-label { display: none; }
}
/* Mirrors .album-type-pill from the film/album picker so the dashboard
   feels consistent with the in-club picker UI. */
.picks-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 26px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid #d6dde6;
    background: #fff;
    color: #666;
    cursor: pointer;
    user-select: none;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: background-color .2s ease, border-color .2s ease,
                color .2s ease, box-shadow .2s ease;
}
.picks-filter-btn .material-icons { font-size: 15px; line-height: 1; }
.picks-filter-btn:hover { background: #f5f7fb; }
.picks-filter-btn.is-on {
    color: #2b988f;
    background: #e5f2f1;
    border-color: #2b988f;
    box-shadow: 0 3px 8px rgba(43, 152, 143, 0.18);
}
.picks-filter-btn:focus-visible {
    outline: 2px solid rgba(43, 152, 143, 0.4);
    outline-offset: 2px;
}
.picks-filter-btn:active { transform: scale(0.92); }
.picks-filter-btn.is-popping { animation: picksFilterPop .32s cubic-bezier(.34, 1.56, .64, 1); }

@keyframes picksFilterPop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.18); }
    65%  { transform: scale(0.94); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .picks-filter-btn,
    .picks-filter-btn.is-popping { animation: none; transition: none; }
}

@media (max-width: 540px) {
    .section-header.section-header--row { flex-wrap: wrap; }
}

/* Media-type indicator badge — top-left of pick tiles/cards. Translucent
   dark disc keeps the icon legible over any cover color without
   competing with the artwork. Used on home "Your Picks" shelf and on
   the picks modal grid + list cards. */
/* Flush to the top-left corner of the cover (mirrors the #statsToggle
   bottom-right tab on mobile). Only the inner corner is rounded so the
   badge sits cleanly in the corner instead of floating. */
.pick-media-badge {
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 22px;
    border-radius: 0 0 6px 0;
    background: rgba(0, 0, 0, 0.38);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: rgba(255, 255, 255, 0.92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}
.pick-media-badge .material-icons {
    font-size: 14px;
    line-height: 1;
}
.pick-media-badge--sm {
    width: 20px;
    height: 16px;
    border-radius: 0 0 4px 0;
}
.pick-media-badge--sm .material-icons {
    font-size: 11px;
}

/* "Live" flag on a Your Picks tile — the pick is the club's currently-open
   cycle. Sits top-right so it can't collide with .pick-media-badge in the
   top-left corner, and inset 6px because .pick-shelf-tile is overflow:hidden
   and would otherwise clip the glow. */
.pick-live-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px 3px 6px;
    border-radius: 999px;
    background: rgba(5, 38, 30, 0.74);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(52, 211, 153, 0.55);
    color: #6ee7b7;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: .09em;
    line-height: 1;
    text-transform: uppercase;
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.4);
    pointer-events: none;
}
.pick-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #34d399;
    animation: pickLivePulse 1.8s ease-in-out infinite;
}
@keyframes pickLivePulse {
    0%, 100% { opacity: 1;   box-shadow: 0 0 4px rgba(52, 211, 153, 0.85); }
    50%      { opacity: .55; box-shadow: 0 0 10px rgba(52, 211, 153, 1); }
}
@media (prefers-reduced-motion: reduce) {
    .pick-live-dot {
        animation: none;
        box-shadow: 0 0 6px rgba(52, 211, 153, 0.9);
    }
}

.pick-shelf-tile-empty {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    background: #e5e7eb;
}
    .pick-shelf-tile-empty .material-icons { font-size: 32px; }

/* The caption rides on the bottom of the cover on a translucent black
   band, instead of sitting in a grey strip underneath it — so the tile is
   the artwork, edge to edge, and the text reads off the darkened part of
   the image. Everything in here goes light to suit the new backing. */
.pick-shelf-meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 6px 7px 7px;
    background: rgba(0, 0, 0, 0.55);
}

.pick-shelf-title {
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.pick-shelf-club {
    font-size: 0.62rem;
    color: #7ad9d0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.pick-shelf-avg {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.72);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pick-shelf-see-all {
    background: #f3f4f6;
    border: 1.5px dashed #d1d5db;
    cursor: pointer;
    display: flex;
    align-items: stretch;
    transition: border-color .25s ease, background .25s ease, transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
    will-change: transform;
}
    .pick-shelf-see-all:hover {
        border-color: var(--rt-primary);
        border-style: solid;
        background: #edf9f8;
        transform: translateY(-4px) scale(1.03);
        box-shadow: 0 10px 24px rgba(0,0,0,0.10);
    }

.pick-shelf-see-all-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 100%;
    min-height: 130px;
    padding: 8px;
}

    .pick-shelf-see-all .material-icons {
        font-size: 1.6rem;
        color: #9ca3af;
        transition: color .25s ease, transform .25s cubic-bezier(.2,.7,.2,1);
    }
    .pick-shelf-see-all:hover .material-icons { transform: scale(1.1); }
    .pick-shelf-see-all:hover .material-icons { color: var(--rt-primary); }

.pick-shelf-see-all-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #374151;
}

.pick-shelf-see-all-count {
    font-size: 0.62rem;
    color: #9ca3af;
}

.dash-fr-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 4px;
    border-bottom: 1px solid #f0f2f5;
    text-decoration: none;
    color: inherit;
    transition: background .12s ease;
    border-radius: 6px;
}

.dash-fr-item:last-child { border-bottom: none; }
.dash-fr-item:hover { background: rgba(0,0,0,.03); }

.dash-fr-cover {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.dash-fr-cover--empty {
    background: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
}
.dash-fr-cover--empty .material-icons { font-size: 18px; }

.dash-fr-meta { flex: 1; min-width: 0; }

.dash-fr-line1 {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dash-fr-user {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-fr-rating {
    font-size: 0.75rem;
    font-weight: 700;
    color: #f5b301;
    white-space: nowrap;
    flex-shrink: 0;
}

.dash-fr-album {
    font-size: 0.7rem;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-fr-time {
    font-size: 0.65rem;
    color: #9ca3af;
}

.dash-fr-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* =========================
   RESPONSIVE ADDITIONS
========================= */

/* Stats toggle button — hidden on desktop */
.stats-mobile-toggle { display: none; }

@media (max-width: 575px) {
    /* Collapse stats strip by default; animate open */
    .dash-stats-strip {
        grid-template-columns: repeat(2, 1fr);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.28s ease;
    }
    .dash-stats-strip.open {
        max-height: 160px;
    }
    .dash-stat-item:nth-child(2) { border-right: none; }
    .dash-stat-item:nth-child(3) { border-top: 1px solid #2a2a2a; }
    .dash-stat-item:nth-child(4) { border-top: 1px solid #2a2a2a; border-right: none; }

    .dash-art-item { width: 54px; height: 54px; }
    .dash-rediscover-cover { width: 56px; height: 56px; }

    /* Stats toggle — matches .m-hero-caret style on club dash */
    .stats-mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 34px;
        height: 28px;
        background: rgba(255,255,255,0.08);
        border: none;
        border-radius: 6px 0 0 0;
        color: rgba(255,255,255,0.65);
        cursor: pointer;
        transition: background 0.15s;
        padding: 0;
        z-index: 2;
    }
    .stats-mobile-toggle .material-icons {
        font-size: 1.15rem;
        transition: transform 0.3s ease;
        line-height: 1;
    }
    .stats-mobile-toggle.open .material-icons {
        transform: rotate(180deg);
    }
    .stats-mobile-toggle:active {
        background: rgba(255,255,255,0.18);
    }
}

/* =========================
   DASHBOARD — MOBILE
========================= */
@media (max-width: 575px) {

    /* Welcome panel */
    .dashboard-welcome {
        height: auto !important;
        min-height: 0 !important;
        padding: 14px 44px 14px 14px !important; /* right padding clears the toggle button */
        gap: 12px !important;
        align-items: center !important;
        align-content: center !important;
    }
    .profile-avatar-dashboard {
        width: 44px !important;
        height: 44px !important;
    }
    .dashboard-welcome h2 {
        font-size: 1rem !important;
        margin-bottom: 2px;
    }
    .dashboard-welcome .muted {
        display: none;
    }
    .dash-action-btn {
        width: 36px;
        height: 36px;
        padding: 0 !important;
        justify-content: center;
        gap: 0;
        border-radius: 50% !important;
    }
    .dash-action-btn .dash-btn-label {
        display: none;
    }
    .dash-action-btn i {
        font-size: 0.95rem !important;
        opacity: 1;
    }
    /* Primary "Create" button shows label on mobile */
    .dash-action-btn.primary {
        width: auto;
        height: auto;
        padding: 9px 18px !important;
        border-radius: 999px !important;
        gap: 6px;
    }
    .dash-action-btn.primary .dash-btn-label {
        display: inline;
        font-size: 0.85rem;
    }

    /* Main grid */
    .dashboard-main {
        padding: 10px 12px !important;
    }
    .dash-section {
        padding: 12px 14px;
        margin-bottom: 10px;
    }
    .section-header {
        margin-bottom: 10px;
    }

    /* ── Unified section header ──────────────────────────────────────────
       Every section gets the "Your Clubs" treatment: the title lifts out of
       any card, sits on its own row with the controls, and takes a hairline
       divider underneath. Sections that are cards on desktop (Pending
       Invites, Upcoming Picks) shed their chrome here and hand it to their
       inner body wrapper instead, so the divider lands between the title and
       the container rather than inside it. */
    .dash-msec-header {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
        padding-bottom: 12px;
        margin-bottom: 14px;
        border-bottom: 1px solid #e5e7eb;
    }
    .dash-msec-header h4 { margin: 0; }
    /* The title block takes the free space so the whole row left of the
       controls is a tap target; min-width:0 lets the title ellipsize
       instead of shoving the controls off the edge. */
    .dash-msec-header > h4,
    .dash-msec-header > .your-clubs-header-left,
    .dash-msec-header > .picks-section-title {
        flex: 1 1 auto;
        min-width: 0;
    }
    /* The subtitle would make one header two lines tall while every other
       section's is one — drop it rather than break the shared rhythm. */
    .dash-msec-header .section-subtitle { display: none; }

    /* Sits opposite the title, on the divider row. */
    .picks-section-header .picks-view-all {
        display: inline-block;
        flex-shrink: 0;
        margin-left: auto;
    }
    .picks-section-header .picks-view-all:active { opacity: .6; }

    /* Collapse behaviour itself lives in the base rules now (it works at
       every width); these two are the phone-only parts — a full-row tap
       target, and a title that ellipsizes rather than pushing the chevron
       off the edge. */
    .dash-msec-toggle { width: 100%; }
    .dash-msec-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Sections that are cards on desktop drop the card here. The create-a-club
       tiles are self-bordered, so they stand on the page the same way the club
       cards and invite cards do. */
    #pendingInvitesBox,
    #upcomingPicksSection,
    #createClubSection {
        background: none;
        border: none;
        border-radius: 0;
        padding: 0;
        /* !important because these carry Bootstrap's .shadow-sm, which is
           itself !important — without this the card's shadow survives the
           un-boxing and leaves a ghost outline around the section. */
        box-shadow: none !important;
    }
    /* Consistent vertical rhythm between every section. */
    #pendingInvitesBox,
    #upcomingPicksSection,
    #yourClubsSection,
    #createClubSection,
    .dash-flat.dash-msec {
        margin-top: 26px;
        margin-bottom: 18px;
    }
    /* Keeps the inherited 3-column layout; only the grid's own top padding
       goes, since the header divider already provides that separation. */
    #createClubSection .dash-create-club-grid { padding-top: 0; }

    /* .dash-pending-section paints its title teal site-wide. Here it sits in
       a row of four otherwise-dark section titles, so opt it back into the
       inherited colour the rest of them use — the same way #upForReviewBox
       already does. The leading schedule icon keeps its teal as an accent. */
    #upcomingPicksSection .section-header h4 { color: inherit; }
    /* Drop the leading clock glyph too — no other section title carries an
       icon, and it's the last thing making this header look different.
       Scoped inside .dash-msec-title so the collapse chevron (a sibling,
       not a child) is untouched. */
    #upcomingPicksSection .dash-msec-title .material-icons { display: none; }
    /* Matches the id-scoped hide above so this re-show actually wins. */
    #upcomingPicksSection .upcoming-picks-filter {
        display: inline-flex;
        margin-left: auto;
        flex-shrink: 0;
        max-width: 48vw;
    }
    .upcoming-picks-filter .mim-sort-select {
        width: 100%;
        font-size: 0.75rem;
        padding: 6px 26px 6px 28px;
        text-overflow: ellipsis;
    }
    .dash-pending-box {
        background: var(--rt-card);
        border: 1px solid var(--rt-border);
        border-radius: 12px;
        padding: 12px 14px;
        box-shadow: var(--rt-shadow-sm);
    }

    /* Club rows */
    .club-row { flex-direction: column; }
    .crb-head {
        width: 100%;
        min-width: 0;
        border-right: none;
        border-bottom: 1px solid #f0f0f0;
    }
    .crb-body { flex-direction: column; align-items: stretch; gap: 8px; }
    .crb-now-playing { max-width: 100%; }
    .crb-footer { border-left: none; padding: 0 14px 12px; justify-content: flex-start; }

    /* Activity feed */
    .activity-item {
        padding: 8px 0;
        gap: 10px;
    }
    .dash-activity-avatar {
        width: 32px;
        height: 32px;
    }
    .activity-body p {
        font-size: 0.82rem;
    }
    .activity-body small {
        font-size: 0.68rem;
    }

    /* Friends */
    .friend-item {
        padding: 7px 8px;
    }
    .friend-avatar {
        width: 34px;
        height: 34px;
    }
    .friend-name {
        font-size: 0.85rem;
    }

    /* Invite cards */
    .invite-card-body {
        padding: 12px 12px 10px;
    }
}

/* =============================================
   INVITE PANEL – FRIEND / MEMBER SEARCH
   ============================================= */

.invite-search-wrap {
    position: relative;
}

.invite-user-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    max-height: 220px;
    overflow-y: auto;
    z-index: 200;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.invite-user-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    cursor: pointer;
    transition: background 0.12s;
}

.invite-user-item:hover,
.invite-user-item--selected {
    background: #f0f4ff;
}

.invite-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.invite-user-name {
    flex: 1;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.invite-user-badge {
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 10px;
    flex-shrink: 0;
}

.invite-user-badge--friend {
    background: #e0f2fe;
    color: #0369a1;
}

.invite-user-badge--check {
    background: #dcfce7;
    color: #15803d;
    font-weight: 700;
}

.invite-user-empty {
    padding: 12px 10px;
    font-size: 0.85rem;
    color: #6b7280;
    text-align: center;
}

/* Selected user chips */
.invite-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #e0f2fe;
    border-radius: 20px;
    padding: 2px 8px 2px 4px;
    font-size: 0.8rem;
    color: #0369a1;
}

.invite-chip-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}

.invite-chip-remove {
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    font-size: 1rem;
    color: #0369a1;
    cursor: pointer;
    opacity: 0.6;
}

.invite-chip-remove:hover {
    opacity: 1;
}

/* ── Global modal border ──────────────────────────────────────────────────── */
/* box-shadow ring renders outside the white background so opacity is real */
.modal-content {
    box-shadow: 0 24px 80px rgba(0,0,0,0.22), 0 0 0 4px rgba(255,255,255,0.5) !important;
    border: none !important;
}

/* Picks/Reviews/Archive modals wrap their card in an inner element with its
   own rounded corners, so the global ring above traces the outer rectangle
   and looks broken at the corners. Drop the ring on these two modals. */
#memberInfoModal .modal-content,
#profileDataModal .modal-content {
    box-shadow: none !important;
}

/* =========================
   CREATE CLUB MODAL
========================= */
.create-club-dialog {
    max-width: 420px;
}

.create-club-content {
    border-radius: 16px;
    overflow: hidden;
}

.create-club-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 22px 24px 14px;
    border-bottom: 1px solid #f0f0f0;
}

.create-club-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 2px;
    color: #1a1a2e;
}

.create-club-sub {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0;
}

.create-club-body {
    padding: 20px 24px 24px;
}

.create-club-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}


/* =========================
   DASHBOARD MOBILE NAV BAR
========================= */
/* While a modal is open, taps on this bar switch sheets (or close the open
   one) with the slide animation — see the script in templates/footer.php. */
.dash-m-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(62px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #fff;
    border-top: 1px solid #e8e8e8;
    display: flex;
    align-items: stretch;
    z-index: 9000;
    box-shadow: 0 -2px 12px rgba(0,0,0,.08);
}

.dash-m-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none;
    border: none;
    padding: 6px 4px 4px;
    font-size: .58rem;
    font-weight: 700;
    color: #999;
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .03em;
    transition: color .15s;
    position: relative;
}

.dash-m-nav-btn .material-icons,
.dash-m-nav-btn svg {
    font-size: 1.3rem;
    line-height: 1;
}

.dash-m-nav-btn:hover,
.dash-m-nav-btn:focus {
    color: #2B988F;
}

/* Lit when its modal is open, and persistently for the page you're on
   (.is-page, set server-side in partials/global-mobile-nav.php). */
.dash-m-nav-btn.is-active {
    color: #2B988F;
}
.dash-m-nav-btn.is-active .dash-m-nav-label {
    font-weight: 700;
}
.dash-m-nav-btn.is-active .material-icons {
    text-shadow: 0 0 10px rgba(43, 152, 143, 0.55);
}
.dash-m-nav-btn.is-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 3px;
    background: #2B988F;
    border-radius: 0 0 3px 3px;
    box-shadow: 0 0 10px rgba(43, 152, 143, 0.75);
}
/* Don't draw the indicator bar above the round Create button — it's already
   a filled green circle, so it lights by brightening its own glow instead. */
.dash-m-nav-btn--create.is-active::before {
    display: none;
}
.dash-m-nav-btn--create.is-active {
    background: linear-gradient(135deg, #31a99f, #46d6ca);
    box-shadow: 0 4px 18px rgba(43, 152, 143, .55),
                0 0 0 4px rgba(43, 152, 143, .18),
                0 0 22px rgba(59, 191, 180, .55);
}
.dash-m-nav-btn--create.is-active .material-icons {
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.65);
}

/* Centre Create button — rises above bar */
.dash-m-nav-btn--create {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2B988F, #3bbfb4);
    color: #fff !important;
    box-shadow: 0 4px 18px rgba(43,152,143,.45);
    border: none;
    padding: 0;
    margin: 0 10px;
    align-self: flex-end;
    position: relative;
    bottom: 12px;
    font-size: .62rem;
}

.dash-m-nav-btn--create .material-icons {
    font-size: 1.5rem;
}

.dash-m-nav-btn--create .dash-m-nav-label {
    font-size: .5rem;
    letter-spacing: .04em;
}

/* Hide top welcome actions on mobile (unrelated to the bottom nav, which
   dashboard.php no longer renders — it reads as a different page than a
   club's own dash.php, whose bottom tab bar has different options). */
@media (max-width: 991px) {
    .welcome-actions {
        display: none !important;
    }
}

/* =========================
   BOTTOM SHEET MODALS
========================= */
.dash-m-sheet-content {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dash-m-sheet-handle {
    width: 36px;
    height: 4px;
    background: #ddd;
    border-radius: 2px;
    margin: 12px auto 0;
    flex-shrink: 0;
}

.dash-m-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 12px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.dash-m-sheet-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: #1a1a2e;
}

.dash-m-sheet-body {
    padding: 8px 0 16px;
    overflow-y: auto;
    flex: 1;
}

/* Spotify modal body needs side padding so the connected card
   doesn't run flush to the viewport edges on mobile. */
#dashSpotifyModal .dash-m-sheet-body,
.dash-m-sheet-body--spotify {
    padding-left: 20px;
    padding-right: 20px;
}

/* Mobile-only handle row inside profileDataModal — hidden on desktop */
.pdm-mobile-handle {
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 10px 18px 0;
    border-bottom: 1px solid #edf0f3;
    background: #fff;
    border-radius: 20px 20px 0 0;
    flex-shrink: 0;
}
.pdm-mobile-handle-bar {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: #dde1e7;
    margin-bottom: 8px;
    flex-shrink: 0;
}
.pdm-mobile-handle-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 10px;
}
.pdm-mobile-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a2e;
}

/* ── Mobile modals: match dash.php pattern ─────────────────────────────── */
@media (max-width: 991px) {
    /* Sit BELOW nav bar (9000) so nav stays visible above modals */
    .modal-backdrop { z-index: 8800 !important; }
    .modal          { z-index: 8900 !important; }

    /* All bottom-sheet dialogs: stop at nav bar top, not viewport bottom */
    .dash-m-sheet-dialog,
    #createClubModal .modal-dialog,
    #profileDataModal .modal-dialog,
    #friendsModal .modal-dialog {
        position: fixed !important;
        top: 80px !important;
        bottom: var(--mnav-clearance) !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        max-height: none !important;
        min-height: 0 !important;   /* cancel modal-dialog-centered forcing full-vh height */
        width: 100% !important;
        height: auto !important;
    }

    /* Rounded top corners, fill the space */
    .dash-m-sheet-content,
    .create-club-content {
        border-radius: 20px 20px 0 0 !important;
        max-height: none !important;
        height: 100%;
    }

    /* profileDataModal mobile: solid sheet */
    #profileDataModal .album-modal-close-btn {
        display: none !important;   /* hide green floating btn; mobile handle has its own close */
    }
    #profileDataModal .modal-content {
        background: transparent !important;
        border: none !important;
        border-radius: 20px 20px 0 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        height: 100% !important;
    }
    #profileDataModal .member-info-modal {
        border-radius: 20px 20px 0 0 !important;
        box-shadow: none !important;
        max-height: 100% !important;
        height: 100% !important;
    }
    #profileDataModal .mim-body {
        padding-bottom: 20px;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    #profileDataModal .pdm-mobile-handle {
        display: flex !important;
    }

    /* Slide-up animation matching dash.php */
    #dashClubsModal.fade   .modal-dialog,
    #dashReviewsModal.fade  .modal-dialog,
    #dashPicksModal.fade    .modal-dialog,
    #dashSpotifyModal.fade  .modal-dialog,
    #createClubModal.fade   .modal-dialog,
    #profileDataModal.fade  .modal-dialog {
        transform: translateY(100%);
        transition: transform .35s cubic-bezier(0.32, 0.72, 0, 1) !important;
    }
    #dashClubsModal.show   .modal-dialog,
    #dashReviewsModal.show  .modal-dialog,
    #dashPicksModal.show    .modal-dialog,
    #dashSpotifyModal.show  .modal-dialog,
    #createClubModal.show   .modal-dialog,
    #profileDataModal.show  .modal-dialog {
        transform: none;
    }

    /* Modal ends at nav top so no extra bottom padding needed */
    .dash-m-sheet-body {
        padding-bottom: 16px;
    }
    #createClubModal .create-club-body {
        padding: 16px 20px;
    }
    .create-club-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .dash-club-type-card { padding: 18px 8px 14px; }
    .dash-club-type-card .material-icons { font-size: 1.8rem; }
    .dash-club-type-name { font-size: 0.82rem; }
    .create-club-header { padding: 20px 20px 12px; }
}

/* Your Clubs modal: search + type filter toolbar */
.dash-m-club-toolbar {
    padding: 12px 16px 8px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
    background: #fff;
}
.dash-m-club-search {
    position: relative;
    margin-bottom: 10px;
}
.dash-m-club-search-icon {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    font-size: 18px;
    color: #9aa3b2;
    pointer-events: none;
}
.dash-m-club-search-input {
    width: 100%;
    padding: 9px 12px 9px 34px;
    border: 1px solid #e3e6ec;
    border-radius: 10px;
    background: #f6f7f9;
    font-size: 0.88rem;
    color: #1a1a2e;
    outline: none;
    transition: border-color .15s, background .15s;
}
.dash-m-club-search-input:focus {
    border-color: #2B988F;
    background: #fff;
}
.dash-m-club-filters {
    display: flex;
    gap: 6px;
}
.dash-m-club-filter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid #e3e6ec;
    border-radius: 999px;
    background: #fff;
    color: #4b5563;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.dash-m-club-filter .material-icons {
    font-size: 14px;
}
.dash-m-club-filter:hover {
    background: #f3f4f6;
}
.dash-m-club-filter.active {
    background: #2B988F;
    border-color: #2B988F;
    color: #fff;
}

/* Club list rows */
.dash-m-club-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 20px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f5f5f5;
    transition: background .12s;
}

.dash-m-club-row:last-child { border-bottom: none; }
.dash-m-club-row:hover { background: #f9fafb; }

.dash-m-club-img {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.dash-m-club-initial {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2B988F, #3bbfb4);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dash-m-club-meta {
    flex: 1;
    min-width: 0;
}

/* Now a row: media badge + name. The ellipsis moves to the text span so the
   icon can't be squeezed or clipped by a long club name. */
.dash-m-club-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a2e;
    min-width: 0;
}
.dash-m-club-name-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
/* Two-class selector: material-icons.css loads after this file and sets
   .material-icons { font-size: 24px }, which beats a single-class rule on the
   tie and leaves the badge oversized. */
.dash-m-club-name .dash-m-club-type {
    font-size: 15px;
    line-height: 1;
    color: #2B988F;
    flex-shrink: 0;
}

.dash-m-club-pick {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-m-club-pick--empty { color: #bbb; }
.dash-m-club-chevron {
    color: #ccc;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.dash-m-club-empty {
    color: #6b7280;
    text-align: center;
    padding: 24px 0;
}

/* On desktop: sheet modals become centered dialogs */
@media (min-width: 992px) {
    .dash-m-sheet-dialog {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: auto !important;
        max-width: 460px !important;
        max-height: none !important;
        margin: 1.75rem auto !important;
    }
    .dash-m-sheet-content {
        border-radius: 16px !important;
        max-height: 80vh;
        height: auto !important;
    }
    .dash-m-sheet-handle { display: none; }
    #createClubModal .modal-dialog {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        max-width: 420px !important;
        margin: 1.75rem auto !important;
    }
    .create-club-content {
        border-radius: 16px !important;
        height: auto !important;
    }
    #dashClubsModal.fade  .modal-dialog,
    #dashReviewsModal.fade .modal-dialog,
    #dashPicksModal.fade   .modal-dialog,
    #dashSpotifyModal.fade .modal-dialog,
    #createClubModal.fade  .modal-dialog,
    #friendsModal.fade     .modal-dialog,
    #profileDataModal.fade .modal-dialog {
        transform: none !important;
        transition: none !important;
    }
}

/* ── Friends Modal ────────────────────────────────────────────────────── */
.fm-dialog { max-width: 620px; }

.fm-content {
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: calc(100vh - 80px);
    border: none;
}

.fm-header {
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 16px;
    border-bottom: 1px solid #edf0f3;
    flex-shrink: 0;
    background: #fff;
}

.fm-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
}

/* Mobile handle (hidden by default — shown via mobile media query) */
.fm-mobile-handle {
    display: none;
    flex-direction: column;
    padding: 12px 18px 10px;
    border-bottom: 1px solid #edf0f3;
    background: #fff;
    border-radius: 20px 20px 0 0;
    flex-shrink: 0;
}

.fm-handle-bar {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: #dde1e7;
    margin: 0 auto 10px;
    display: block;
}

.fm-handle-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fm-handle-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a2e;
}

.fm-body {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 20px;
    background: #f9fafb;
}

/* Search */
.fm-search-wrap {
    position: relative;
    margin-bottom: 20px;
}

.fm-search-input {
    width: 100%;
    padding: 11px 16px 11px 42px;
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    font-size: 0.9rem;
    background: #fff;
    outline: none;
    transition: border-color .15s;
}

.fm-search-input:focus { border-color: #2B988F; }

.fm-search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: #aaa;
    pointer-events: none;
}

/* Sections */
.fm-section { margin-bottom: 22px; }

.fm-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #9ca3af;
    margin-bottom: 10px;
    padding: 0 2px;
}

/* Collapsible section header (e.g. Friend Requests) */
.fm-section-title--toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: 0;
    cursor: pointer;
    color: #9ca3af;
    transition: color .12s ease;
}
.fm-section-title--toggle:hover { color: #6b7280; }
.fm-section-title-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.fm-section-count {
    background: var(--rt-primary, #2B988F);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 7px;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0;
}
.fm-section-caret {
    font-size: 18px;
    color: inherit;
    transition: transform .18s ease;
}
.fm-section--collapsible.is-collapsed .fm-section-caret {
    transform: rotate(-90deg);
}
.fm-section-body {
    overflow: hidden;
    transition: max-height .2s ease;
    max-height: 1000px;
}
.fm-section--collapsible.is-collapsed .fm-section-body {
    max-height: 0;
}

/* Request tabs */
.fm-req-tabs { display: flex; gap: 6px; margin-bottom: 12px; }

.fm-req-tab {
    padding: 5px 14px;
    border-radius: 99px;
    border: 1.5px solid #e0e0e0;
    font-size: 0.78rem;
    font-weight: 600;
    background: #fff;
    color: #6b7280;
    cursor: pointer;
    transition: all .15s;
}

.fm-req-tab.active { background: #2B988F; border-color: #2B988F; color: #fff; }
.fm-req-panel { display: none; }
.fm-req-panel.active { display: block; }

/* Person rows */
.fm-person {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #f0f0f0;
    margin-bottom: 8px;
    transition: box-shadow .15s;
}

.fm-person:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }

.fm-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.fm-meta { flex: 1; min-width: 0; }

.fm-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    display: block;
}

.fm-name:hover { color: #2B988F; }

.fm-sub {
    font-size: 0.72rem;
    color: #9ca3af;
    margin-top: 1px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.fm-status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d1d5db;
    flex-shrink: 0;
}

.fm-status.online::before { background: #22c55e; }

/* Action buttons */
.fm-actions { display: flex; gap: 6px; flex-shrink: 0; }

.fm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: all .15s;
    white-space: nowrap;
    text-decoration: none;
    background: none;
}

.fm-btn .material-icons { font-size: 0.95rem; }

.fm-btn--accept  { background: #2B988F; color: #fff; border-color: #2B988F; }
.fm-btn--accept:hover  { background: #247f78; border-color: #247f78; color: #fff; }
.fm-btn--decline { background: #fff; color: #6b7280; border-color: #e0e0e0; }
.fm-btn--decline:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }
.fm-btn--cancel  { background: #fff; color: #9ca3af; border-color: #e5e7eb; }
.fm-btn--cancel:hover  { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }
.fm-btn--msg     { background: #f0faf9; color: #2B988F; border-color: #b2e0dc; }
.fm-btn--msg:hover     { background: #2B988F; color: #fff; border-color: #2B988F; }
.fm-btn--add     { background: #f0faf9; color: #2B988F; border-color: #b2e0dc; }
.fm-btn--add:hover     { background: #2B988F; color: #fff; border-color: #2B988F; }
.fm-btn--pending { background: #f9fafb; color: #9ca3af; border-color: #e5e7eb; cursor: default; }

/* Empty state */
.fm-empty {
    text-align: center;
    padding: 28px 20px;
    color: #9ca3af;
    font-size: 0.88rem;
}

.fm-empty .material-icons { font-size: 2.5rem; display: block; margin-bottom: 8px; opacity: .4; }

/* Mobile: bottom-sheet — #friendsModal shares the shared rule above for positioning */
@media (max-width: 991px) {
    #friendsModal .fm-content {
        border-radius: 20px 20px 0 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }
    #friendsModal.fade .modal-dialog {
        transform: translateY(100%);
        transition: transform .35s cubic-bezier(0.32, 0.72, 0, 1) !important;
    }
    #friendsModal.show .modal-dialog { transform: none; }
    #friendsModal .fm-body {
        padding-bottom: 20px;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    #friendsModal .fm-mobile-handle { display: flex; }
    #friendsModal .fm-btn span:not(.material-icons) { display: none; }
    #friendsModal .fm-btn { padding: 6px 8px; }
}

/* =========================
   SPOTIFY WIDGET (.dsw-*)
   Used by the dashboard inline widget AND the global mobile-nav
   Spotify modal — keep here so non-dashboard pages style correctly.
========================= */

.dsw-connected {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f6fdf8;
    border: 1px solid #d1fae5;
    border-radius: 10px;
    padding: 10px 12px;
}
.dsw-logo { width: 28px; height: 28px; flex-shrink: 0; }
.dsw-logo--lg { width: 34px; height: 34px; flex-shrink: 0; }
.dsw-connected-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.dsw-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dsw-badge {
    font-size: 0.7rem;
    font-weight: 600;
    color: #16a34a;
    display: flex;
    align-items: center;
    gap: 3px;
}
.dsw-disconnect-btn {
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.dsw-disconnect-btn:hover { color: #b91c1c; background: #fef2f2; }

.dsw-unconnected {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dsw-unconnected-top {
    display: flex;
    align-items: center;
    gap: 12px;
}
.dsw-unconnected-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #111;
    line-height: 1.2;
}
.dsw-unconnected-sub {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 2px;
    line-height: 1.3;
}
.dsw-connect-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1DB954;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 50px;
    text-decoration: none;
    border: none;
    align-self: flex-start;
    transition: background 0.15s, transform 0.12s;
}
.dsw-connect-btn:hover {
    background: #17a349;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Long-press preview hint + held-row feedback in the "Your Clubs" modal.
   Mirrors .ch-hero-switcher-hint / .m-sb-switcher-hint on the switchers. */
.dash-m-club-hint {
    margin: 8px 20px 0;
    font-size: .68rem;
    color: #9aa1b3;
    text-align: center;
}
.dash-m-club-row.is-holding {
    background: #eef2f5;
    transform: scale(.995);
}

/* ── "Your Clubs" modal: search + club-type filter on one row ────────── */
/* stretch, not center: the filter button then matches the search input's
   height automatically rather than hardcoding a number that can drift. */
.dash-m-club-toolbar-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.dash-m-club-toolbar-row .dash-m-club-search {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;   /* the row owns the spacing now */
}
.dash-m-club-typefilter { position: relative; flex: 0 0 auto; display: flex; }

/* Same control in the "Your Clubs" header. In the modal it sits in a
   stretch-aligned toolbar row and takes the search box's height; here it
   has to set its own, and it needs to open above the cards below it. */
/* Fixed 36px so it lines up exactly with the switcher and Join button. */
.your-clubs-sortfilter .dash-m-club-typebtn { height: 36px; padding: 0 8px 0 10px; }
.your-clubs-sortfilter .dash-m-club-typemenu { z-index: 60; }
.your-clubs-nomatch {
    padding: 18px 2px;
    color: #6b7280;
    font-size: .88rem;
}

/* "Media type" sort: a heading over each medium's clubs, spanning the
   whole grid row (ClubSortFilter.syncKindHeads in club-sort-filter.js).
   Used by the Your Clubs grid and the mobile clubs modal list. */
.csf-kind-head {
    grid-column: 1 / -1;
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 2px;
    color: #1a1d2e;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
    .csf-kind-head[hidden] { display: none; }
    .csf-kind-head:first-child,
    .csf-kind-head[hidden]:first-child + .csf-kind-head { margin-top: 0; }
    .csf-kind-head::after {
        content: "";
        flex: 1 1 auto;
        height: 1px;
        background: #e3e7ee;
    }
    .csf-kind-head-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 8px;
        background: #DEF1EF;
        color: #2B988F;
        font-size: 16px;
    }
    .csf-kind-head-count {
        min-width: 20px;
        padding: 1px 7px;
        border-radius: 999px;
        background: #f1f3f7;
        color: #6b7280;
        font-size: .7rem;
        letter-spacing: 0;
        text-align: center;
    }
#dashMClubList .csf-kind-head { margin: 16px 20px 4px; } /* rows pad 20px */
#dashMClubList .csf-kind-head:first-child { margin-top: 6px; }

.dash-m-club-typebtn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px 0 10px;
    border: 1px solid #e3e6ec;
    border-radius: 10px;
    background: #f6f7f9;
    color: #4b5563;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s, background .15s, color .15s;
}
.dash-m-club-typebtn:hover { border-color: #cfd5df; background: #fff; }
.dash-m-club-typebtn[aria-expanded="true"] { border-color: #2B988F; background: #fff; }
/* Anything other than "All" reads as an active filter. */
.dash-m-club-typebtn.is-filtered {
    border-color: #2B988F;
    background: #ecf8f6;
    color: #23807a;
}
.dash-m-club-typebtn .dash-m-club-typebtn-icon,
.dash-m-club-typebtn .dash-m-club-typecaret { font-size: 17px; color: #9aa3b2; }
.dash-m-club-typebtn.is-filtered .dash-m-club-typebtn-icon { color: #2B988F; }
.dash-m-club-typebtn[aria-expanded="true"] .dash-m-club-typecaret { transform: rotate(180deg); }

.dash-m-club-typemenu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    /* Wide enough that "Club type" and the two links each stay on one line. */
    min-width: 252px;
    max-width: calc(100vw - 32px);
    padding: 6px;
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(16,24,40,.16);
}
.dash-m-club-typemenu[hidden] { display: none; }
.dash-m-club-typemenu-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 8px 8px;
    border-bottom: 1px solid #f1f3f7;
    margin-bottom: 4px;
}
.dash-m-club-typemenu-title {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #9aa3b2;
    white-space: nowrap;
}
/* Second section head in the same menu ("Sort by" under the media filter).
   The rule above gives every head an underline; this one needs its line on
   TOP instead, as the divider between the two groups. */
.dash-m-club-typemenu-head--split {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid #f1f3f7;
    border-bottom: 0;
    padding-bottom: 4px;
}
.dash-m-club-typelinks {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    color: #c3c9d4;
    font-size: .68rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.dash-m-club-typelinks button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: #2B988F;
    cursor: pointer;
}
.dash-m-club-typelinks button:hover { text-decoration: underline; }

.dash-m-club-typeopt {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 8px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #6b7280;
    font-size: .84rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.dash-m-club-typeopt:hover { background: #f6f7f9; }
.dash-m-club-typeopt.is-on { color: #1a1a2e; }
.dash-m-club-typeopt .dash-m-club-typeopt-icon { font-size: 17px; color: #c3c9d4; }
.dash-m-club-typeopt.is-on .dash-m-club-typeopt-icon { color: #2B988F; }
.dash-m-club-typeopt-label { flex: 1 1 auto; min-width: 0; }
/* Checkmark is the checked state — hidden (not just faded) when off, so the
   row reads as an unticked box rather than a greyed-out tick. */
.dash-m-club-typeopt .dash-m-club-typeopt-check {
    font-size: 17px;
    color: #2B988F;
    visibility: hidden;
}
.dash-m-club-typeopt.is-on .dash-m-club-typeopt-check { visibility: visible; }

/* Sort rows share the filter row's layout, but they're single-choice: the
   selected one reads as the current order rather than as "included", so it
   gets the accent weight the checkbox rows don't. */
.dash-m-club-sortopt.is-on {
    background: #f4faf9;
    color: #14766e;
}
.dash-m-club-sortopt.is-on:hover { background: #eef6f5; }

/* ── "Your Reviews" sheet (dashboard.php #dashReviewsModal) ─────────────
   Reuses the "Your Clubs" row/toolbar classes; only the rating pill and the
   tap affordance are new. */
.dash-m-review-row { cursor: pointer; }
/* Pager pinned under the scrolling list, so it stays reachable on phones. */
.dash-m-review-pager {
    flex-shrink: 0;
    padding: 10px 12px;
    border-top: 1px solid #f0f0f0;
    background: #fff;
}
.dash-m-review-pager[hidden] { display: none; }
.dash-m-review-pager .mim-pagination { margin-top: 0; flex-wrap: wrap; }
.dash-m-review-row .dash-m-club-initial .material-icons { font-size: 22px; }
.dash-m-review-rating {
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: 999px;
    background: #fff7e6;
    color: #b7791f;
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
}
/* Rating colour scale (ratingPillHtml in dashboard.php sets --rating-hue:
   0 = red at the bottom, 40 = amber at 6, 100 = green at 8, 172 = teal at
   10). Same saturation/lightness at every point so the pills read as one set. */
.dash-m-review-rating--scaled {
    background: hsl(var(--rating-hue) 80% 93%);
    color: hsl(var(--rating-hue) 70% 30%);
    box-shadow: inset 0 0 0 1px hsl(var(--rating-hue) 60% 82%);
}
/* "Your Picks": a pick whose cycle is still running (not in the archive yet). */
.dash-m-review-rating.dash-m-pick-now {
    background: #e6f5f3;
    color: #1f7a72;
}

/* ── Your Clubs: ways in (dashboard.php empty state + header Join button,
   partials/clubs-modal.php). Join opens #joinClubModal
   (partials/join-club-modal.php) through [data-jc-open]. ─────────────── */
.yc-empty {
    text-align: center;
    padding: 8px 4px 6px;
}
.yc-empty__head h5 {
    font-weight: 800;
    color: #0c3530;
    margin: 6px 0 4px;
    font-size: 1.05rem;
}
.yc-empty__head p {
    color: #6b7280;
    font-size: 0.86rem;
    max-width: 460px;
    margin: 0 auto 16px;
    line-height: 1.45;
}
.yc-empty__icon {
    width: 52px; height: 52px; border-radius: 15px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #e1f2ef; color: #1b6b62; font-size: 28px;
}
.yc-empty__invites {
    display: flex; align-items: center; gap: 10px; text-align: left;
    max-width: 560px; margin: 0 auto 14px; padding: 10px 14px;
    border-radius: 12px; background: #fff7e6; border: 1.5px solid #fcd9a0;
    color: #7a4b00; font-size: 0.86rem; font-weight: 600; text-decoration: none;
}
.yc-empty__invites:hover { background: #ffefcc; color: #7a4b00; }
.yc-empty__go { margin-left: auto; font-size: 18px; }
.yc-empty__ctas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 640px;
    margin: 0 auto;
}
.yc-cta {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 16px 12px 14px; border-radius: 14px; cursor: pointer;
    border: 1.5px solid #e2ece9; background: #fff; color: #0c3530; font: inherit;
    transition: border-color .15s, background .15s, transform .15s;
}
.yc-cta:hover { border-color: #2B988F; background: #f6fbfa; transform: translateY(-2px); }
.yc-cta .material-icons {
    width: 40px; height: 40px; border-radius: 11px; margin-bottom: 4px;
    display: flex; align-items: center; justify-content: center;
    background: #e1f2ef; color: #1b6b62; font-size: 22px;
}
.yc-cta b { font-size: 0.9rem; }
.yc-cta small { color: #6b7280; font-size: 0.76rem; line-height: 1.35; }
.yc-cta--primary { background: linear-gradient(135deg, #1b6b62, #2B988F); border-color: transparent; color: #fff; }
.yc-cta--primary:hover { background: linear-gradient(135deg, #17605a, #26897f); border-color: transparent; }
.yc-cta--primary .material-icons { background: rgba(255,255,255,0.16); color: #fff; }
.yc-cta--primary small { color: rgba(255,255,255,0.8); }
@media (max-width: 575.98px) {
    .yc-empty__ctas { grid-template-columns: 1fr; }
    /* Phones: rows — icon on the left, title over subtitle beside it. */
    .yc-cta {
        display: grid;
        grid-template-columns: 40px 1fr;
        column-gap: 12px;
        row-gap: 1px;
        align-items: center;
        text-align: left;
        padding: 12px 14px;
    }
    .yc-cta .material-icons { grid-row: 1 / span 2; margin: 0; }
}

.yc-join-btn {
    display: inline-flex; align-items: center; gap: 4px;
    /* 36px, 1px border, .82rem: the card/row switcher (34px + border) and the
       filter dropdown either side of it in the Your Clubs header. */
    height: 36px; padding: 0 12px; border-radius: 10px; cursor: pointer;
    /* Same grey chrome as the filter dropdown beside it (.dash-m-club-typebtn). */
    border: 1px solid #e3e6ec; background: #f6f7f9; color: #4b5563;
    font-size: 0.82rem; font-weight: 600;
    transition: border-color .15s, background .15s;
}
.yc-join-btn:hover { border-color: #cfd5df; background: #fff; }
.yc-join-btn .material-icons { font-size: 17px; color: #9aa3b2; }

/* Clubs sheet (partials/clubs-modal.php) */
.dash-m-club-join {
    display: flex; flex-direction: column; align-items: stretch; gap: 8px;
    padding: 14px 4px 6px;
}
.dash-m-club-join.is-empty { text-align: center; padding-top: 18px; }
.dash-m-club-join__icon {
    align-self: center; width: 48px; height: 48px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: #e1f2ef; color: #1b6b62; font-size: 26px;
}
.dash-m-club-join__title { font-weight: 800; color: #0c3530; margin: 4px 0 0; }
.dash-m-club-join__sub { color: #6b7280; font-size: 0.85rem; margin: 0 0 6px; line-height: 1.4; }
.dash-m-club-join__btn {
    height: 46px; border-radius: 12px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1.5px solid #cfe3e0; background: #fff; color: #0c3530;
    font-weight: 700; font-size: 0.9rem;
}
.dash-m-club-join__btn.is-primary { border: 0; background: linear-gradient(135deg, #1b6b62, #2B988F); color: #fff; }
.dash-m-club-join__btn .material-icons { font-size: 20px; }
.dash-m-club-join__link { text-align: center; font-size: 0.84rem; font-weight: 600; color: #1b6b62; text-decoration: none; padding: 6px; }

/* ── Phones: slim welcome bar ─────────────────────────────────────────
   No avatar (the header already shows one right above it), one line of
   "Welcome back, Name", and the stats caret as a full-height button on the
   right instead of a corner tab. Last in the file so it outranks the
   earlier (max-width: 575px) welcome rules. */
@media (max-width: 575px) {
    .dashboard-welcome {
        flex-wrap: nowrap !important;
        min-height: 48px !important;
        padding: 0 52px 0 16px !important;
        align-items: center !important;
    }
    .dashboard-welcome .profile-avatar-dashboard { display: none !important; }
    .dashboard-welcome .welcome-text { min-width: 0; gap: 0 !important; }
    .dashboard-welcome .welcome-text > div { min-width: 0; }
    .dashboard-welcome h2 {
        margin: 0 !important;
        font-size: 1.02rem !important;
        line-height: 48px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .stats-mobile-toggle {
        top: 0;
        bottom: 0;
        width: 48px;
        height: auto;
        border-radius: 0;
        background: transparent;
    }
    .stats-mobile-toggle .material-icons { font-size: 1.5rem; }
}

/* ── Phones: quick menu under the welcome bar (dashboard.php #dashQuickMenu)
   Create club · Messages · Friends · Edit profile. Always shown — a sub menu
   between "Welcome back" and Your Clubs. (Only the stats strip still opens
   and closes with the welcome bar's down arrow.) */
.dash-quick-menu { display: none; }
@media (max-width: 575px) {
    .dash-quick-menu {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        padding: 10px 10px 20px 12px;
        background: #141414;
        border-bottom: 1px solid #2a2a2a;
    }
    .dash-quick-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 8px 2px;
        border: 0;
        border-radius: 14px;
        background: #1f1f1f;
        color: #e5e7eb;
        font-size: 0.72rem;
        font-weight: 600;
        line-height: 1.15;
        text-align: center;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.15s, transform 0.12s;
    }
    .dash-quick-item:hover { color: #fff; }
    .dash-quick-item:active { background: #2a2a2a; transform: scale(0.96); }
    .dash-quick-item .material-icons { font-size: 24px; color: #2B988F; }
}

/* ── Phones: someone else's profile keeps its action row ───────────────
   .welcome-actions is hidden below 992px for the dashboard's own welcome
   bar, which also took Add Friend / Message / Block / Report off every
   profile viewed on a phone or in the app — no way to block or report a
   person from their profile there. On another user's profile
   (.welcome-actions--other, profile.php) the row comes back as a wrapping
   line under the name, with slightly smaller pills. Last in the file so it
   outranks the slim welcome-bar rules above. */
@media (max-width: 991px) {
    .profile-page .dashboard-welcome:has(.welcome-actions--other) {
        flex-wrap: wrap !important;
        height: auto !important;
        padding-bottom: 12px !important;
        row-gap: 8px !important;
    }
    .profile-page .welcome-actions.welcome-actions--other {
        display: flex !important;
        flex: 0 0 100%;
        flex-wrap: wrap;
        gap: 8px;
    }
    .profile-page .welcome-actions--other .dash-action-btn,
    .profile-page .welcome-actions--other .dash-action-btn.primary,
    .profile-page .welcome-actions--other .profile-friend-status,
    .profile-page .welcome-actions--other .profile-mod-btn {
        width: auto;
        height: auto;
        padding: 8px 13px !important;
        border-radius: 999px !important;
        gap: 6px;
        font-size: 0.78rem;
    }
    .profile-page .welcome-actions--other .material-icons { font-size: 16px; }
}

/* ── Desktop: one page width for Home, My Clubs, Up Next and Friends ───
   Home's wrapper is a bare .main-content.dashboard and fills the 1280px
   .responsive-wrapper. My Clubs and Friends (and Browse / Messages) wrap in
   Bootstrap's .container as well, which inset them 12px a side and, between
   1200 and 1400px wide, capped them at 1140px — so their banner and boxes
   never lined up with Home's. Here the container stops constraining the
   page and Home's width wins. */
@media (min-width: 992px) {
    .container.main-content.dashboard {
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }
}