/* ==========================================================================
   Clubs & Events expansion — component styles
   Loaded as a standalone content stylesheet via layouts/main (after rb-core),
   so new UI added by the clubs/events feature is themed without rebuilding the
   Vite bundle. Uses the theme design tokens (--card/--border/--primary/...) with
   safe fallbacks. Scoped to rf-club-*/rf-event-*/rf-invite-* classes.
   ========================================================================== */

/* ---- Club discovery: filter bar ---------------------------------------- */
.rf-club-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.25rem;
}
.rf-club-filters .rf-club-sort {
    margin-left: auto;
}
.rf-club-filters select {
    padding: .45rem .7rem;
    border-radius: 8px;
    border: 1px solid var(--border, rgba(255, 255, 255, .14));
    background: var(--card, #1b1b1f);
    color: var(--foreground, inherit);
    font: inherit;
    cursor: pointer;
}
.rf-club-featured-star {
    color: #f5b50a;
    margin-right: .15rem;
}

/* ---- Invite: invitee banner ------------------------------------------- */
.rf-club-invite-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 0 0 1rem;
    padding: .85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--primary, #3b82f6) 45%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary, #3b82f6) 9%, transparent);
}
.rf-club-invite-banner > i {
    color: var(--primary, #3b82f6);
    font-size: 1.05rem;
}
.rf-club-invite-banner__text {
    flex: 1;
    min-width: 12rem;
    font-size: .92rem;
}
.rf-club-invite-banner form {
    display: inline;
}

/* ---- Invite: owner invite + pending list ------------------------------ */
.rf-club-invites {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border, rgba(255, 255, 255, .1));
}
.rf-club-invites h3 {
    font-size: .95rem;
    font-weight: 700;
    margin: 0 0 .6rem;
}
.rf-club-invites h3 + h3,
.rf-club-invites form + h3 {
    margin-top: 1rem;
}
.rf-invite-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .5rem;
}
.rf-invite-form .rf-invite-ac {
    flex: 1;
    min-width: 12rem;
}
.rf-invite-flash {
    font-size: .85rem;
    margin: 0 0 .5rem;
}
.rf-invite-flash--ok { color: #22c55e; }
.rf-invite-flash--err { color: #ef4444; }

/* ---- Invite: username autocomplete dropdown --------------------------- */
.rf-invite-ac {
    position: relative;
}
.rf-invite-ac input[type="text"] {
    width: 100%;
}
.rf-invite-ac__menu {
    position: absolute;
    z-index: 40;
    left: 0;
    right: 0;
    top: 100%;
    margin: .3rem 0 0;
    padding: .25rem;
    list-style: none;
    max-height: 14rem;
    overflow: auto;
    background: var(--popover, var(--card, #1b1b1f));
    color: var(--popover-foreground, var(--foreground, inherit));
    border: 1px solid var(--border, rgba(255, 255, 255, .14));
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}
.rf-invite-ac__item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .55rem;
    border-radius: 7px;
    cursor: pointer;
    font-size: .9rem;
}
.rf-invite-ac__item.is-active,
.rf-invite-ac__item:hover {
    background: var(--accent, rgba(255, 255, 255, .08));
    color: var(--accent-foreground, inherit);
}
.rf-invite-ac__item img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex: none;
    object-fit: cover;
}

/* ---- Events: relative-date badge -------------------------------------- */
.rf-event-rel {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    font-size: .78rem;
    color: var(--muted-foreground, #9aa0a6);
    background: var(--muted, rgba(255, 255, 255, .06));
}

/* ---- Events: capacity + waitlist -------------------------------------- */
.rf-event-capacity {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: .5rem 0;
    font-size: .85rem;
    color: var(--muted-foreground, #9aa0a6);
}
.rf-event-capacity__full {
    color: #f59e0b;
    font-weight: 700;
}
.rf-event-waitlist-note {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: .6rem 0;
    padding: .55rem .8rem;
    border-radius: 8px;
    font-size: .88rem;
    color: #f59e0b;
    background: color-mix(in srgb, #f59e0b 10%, transparent);
    border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent);
}

/* ---- Events: add-to-calendar ------------------------------------------ */
.rf-event-detail__addcal {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .65rem;
}
.rf-event-detail__addcal-label {
    font-size: .8rem;
    color: var(--muted-foreground, #9aa0a6);
}