/* Basic styles for the toggle button */
#bp-dl-toggle {
    display: inline-block;
    margin-left: 10px;
}
.bp-dl-toggle-button {
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: inherit;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
}
.bp-dl-toggle-button:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Admin bar icon */
#wp-admin-bar-bp-dl-toggle-adminbar .ab-item {
    padding: 6px 8px;
}

/* theme variables */
body.bp-light {
    --bp-bg: #ffffff;
    --bp-text: #111827;
    --bp-muted: #6b7280;
    --bp-accent: #0366d6;
}

body.bp-dark {
    --bp-bg: #0b1220;
    --bp-text: #e6eef8;
    --bp-muted: #9aa4b2;
    --bp-accent: #60a5fa;
}

/* apply minimal site-wide overrides so BuddyPress elements look decent */
body.bp-dark,
body.bp-light {
    background-color: var(--bp-bg);
    color: var(--bp-text);
}

/* don't aggressively override site styles — just adjust common UI elements used in BP headers/nav */
.bp-nav,
.bp-toolbar,
#buddypress,
#buddypress * {
    color: inherit;
}

/* small label hide on narrow screens */
@media (max-width: 480px) {
    .bp-dl-label { display: none; }
}