/* M4.5 polish — global overrides loaded after component-isolated styles. */

/* Pending join-request badge: sits on the mobile hamburger, admin/owner only. */
.join-request-global-badge {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 0.35rem);
    right: 0.35rem;
    z-index: 140;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.28rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    background: var(--accent-fill);
    color: var(--accent-text) !important;
    border: 2px solid var(--surface-2);
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    box-shadow: 0 3px 10px rgba(0,0,0,.28);
}

.join-request-global-badge i {
    font-size: 0.72rem;
}

@media (min-width: 1024px) {
    .join-request-global-badge {
        top: 0.8rem;
        right: 0.8rem;
    }
}

/* Member permissions must look like an action, not a passive pill. */
.settings-member-role-btn {
    min-height: 2.1rem;
    display: inline-flex !important;
    align-items: center;
    gap: 0.35rem;
    padding: 0.24rem 0.42rem !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius) !important;
    background: var(--surface-1) !important;
    color: var(--text-secondary) !important;
    cursor: pointer;
}

.settings-member-role-btn::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    opacity: 0.8;
    margin-right: 0.1rem;
}

.settings-member-role-btn:hover,
.settings-member-role-btn:focus-visible {
    border-color: var(--accent-border) !important;
    color: var(--text-primary) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(139, 30, 40, .16);
}

.settings-member-role-btn .pill {
    background: transparent !important;
    color: var(--text-secondary) !important;
    padding: 0.16rem 0.34rem !important;
}

.settings-member-role-btn .pill.pill-accent {
    background: var(--accent-bg) !important;
    color: #d88e96 !important;
}

/* Explicitly neutralize the ordinary Member role — no Bootstrap blue. */
.settings-member-role-btn .pill:not(.pill-accent) {
    background: var(--surface-2) !important;
    color: var(--text-secondary) !important;
}

/* Reconnect UI follows Bandlair's oxblood palette and focus treatment. */
#components-reconnect-modal {
    border: 1px solid var(--border-strong) !important;
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-card) !important;
}

#components-reconnect-modal button {
    background: var(--accent-fill) !important;
    color: var(--accent-text) !important;
    border: 1px solid var(--accent-border) !important;
    border-radius: var(--radius) !important;
    min-height: 2.4rem;
    font-weight: 600;
}

#components-reconnect-modal button:hover,
#components-reconnect-modal button:focus-visible {
    background: var(--accent-hover) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(139, 30, 40, .22) !important;
}

#components-reconnect-modal .components-rejoining-animation div {
    border-color: var(--accent) !important;
}

#components-reconnect-modal a,
#components-reconnect-modal :focus {
    --bs-focus-ring-color: rgba(139, 30, 40, .28);
}