/* =====================================================
   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;
}



    .section-header h4 {
        font-size: 0.9rem;
        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;
}

.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; }

/* =========================
   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;
}

/* 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;
}
.your-clubs-section .your-clubs-body {
    animation: yourClubsFadeIn .25s ease-out both;
}
@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;
}

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

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

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

/* =========================
   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;
    border-radius: 6px;
}

    /* 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 {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.fr-tab {
    flex: 1;
    border: 1px solid rgba(43, 152, 143, 0.25);
    background: rgba(43, 152, 143, 0.06);
    color: #2B988F;
    border-radius: 8px;
    padding: 6px 0;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .fr-tab:hover {
        background: rgba(43, 152, 143, 0.14);
    }

    .fr-tab.active {
        background: #2B988F;
        color: white;
        box-shadow: 0 2px 6px rgba(43,152,143,0.35);
    }

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

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

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

/* Concerts */
.concerts-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.concert-item {
    display: flex;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    padding: 8px;
    border-radius: 10px;
    transition: background .15s ease;
}

    .concert-item:hover {
        background: rgba(0,0,0,.04);
    }

.concert-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
}

.concert-info {
    flex: 1;
}

.concert-name {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
}

.concert-meta {
    font-size: 12px;
    color: #666;
}

.concert-date {
    font-size: 12px;
    color: #888;
}

.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;
}

    /* 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;
}

.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); }

.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;
}

.dash-rediscover-card {
    display: flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
    color: inherit;
    padding: 6px 4px;
    border-radius: 10px;
    transition: background .12s ease;
}

.dash-rediscover-card:hover { background: rgba(0,0,0,.03); }

.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: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1DB954;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    text-decoration: none;
    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 { min-width: 0; padding-left: 5px; }

.dash-rediscover-title {
    font-size: 0.87rem;
    font-weight: 700;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.dash-rediscover-artist {
    font-size: 0.75rem;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
}

.dash-rediscover-rating {
    font-size: 0.78rem;
    font-weight: 700;
    color: #f5b301;
}

.dash-rediscover-rating-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}
.dash-rediscover-my-rating {
    font-size: 0.75rem;
    font-weight: 700;
    color: #f5b301;
}
.dash-rediscover-avg-line {
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b7280;
    margin-top: 3px;
    display: block;
}
.dash-rediscover-avg {
    font-size: 0.68rem;
    color: #9ca3af;
    font-weight: 400;
}
.dash-rediscover-delta {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 20px;
}
.dash-rediscover-delta.delta--up   { background: #dcfce7; color: #16a34a; }
.dash-rediscover-delta.delta--down { background: #fee2e2; color: #c0392b; }
.dash-rediscover-delta.delta--even { background: #f3f4f6; color: #6b7280; }
.dash-rediscover-comment {
    font-size: 0.7rem;
    color: #6b7280;
    margin-top: 5px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-style: italic;
}
.dash-rediscover-club {
    font-size: 0.68rem;
    color: #9ca3af;
    font-weight: 400;
}

/* 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;
        scrollbar-width: thin;
    }
    .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; }
.picks-row-item::after {
    content: 'Open in archive';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.72);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.04em;
    padding: 5px 4px;
    transform: translateY(100%);
    transition: transform 0.18s ease;
    pointer-events: none;
}
.picks-row-item:hover::after { transform: translateY(0); }

/* 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;
}

.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; }

.pick-shelf-meta { padding: 6px 7px 7px; }

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

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

.pick-shelf-avg {
    font-size: 0.6rem;
    color: #9aa5ae;
    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;
    }

    /* 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
========================= */
.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;
}

/* Active when its corresponding modal is open */
.dash-m-nav-btn.is-active {
    color: #2B988F;
}
.dash-m-nav-btn.is-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 2px;
    background: #2B988F;
    border-radius: 0 0 2px 2px;
}
/* Don't draw the indicator bar above the round Create button */
.dash-m-nav-btn--create.is-active::before {
    display: none;
}

/* 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,
    #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,
    #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;
}

.dash-m-club-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.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,
    #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);
}