/**
 * JVA Online users last 24 hours - optional BlushBloom appearance.
 * Copyright (c) 2026 Spiderpiggy, https://spiderpiggy.com/
 * Original extension copyright (c) 2014-2024 JVA, https://jv-arcade.com/
 * License: GNU GPL version 2.0.
 * Scoped to the BlushBloom template; uses its palette variables.
 */

/* The default extension uses a two-column table. In BlushBloom's narrow
   sidebar the group column squeezes user links into an unreadable strip.
   This template stacks the groups and makes each username list full-width. */
.bb-index-side .jv-oul24h {
    min-width: 0;
}
.bb-index-side .jv-oul24h .jv-oul24h-body {
    padding: 0 14px 15px;
    min-width: 0;
}
.bb-index-side .jv-oul24h .jv-oul24h-summary {
    padding: 2px 3px 12px;
    margin: 0 0 12px;
    border-bottom: 1px solid var(--bb-border, #eadde4);
    color: var(--bb-ink, #403543);
    font-size: 1.04em;
    line-height: 1.65;
    overflow-wrap: break-word;
}
.bb-index-side .jv-oul24h .jv-oul24h-summary strong {
    font-weight: 750;
}
.bb-index-side .jv-oul24h .jv-oul24h-groups {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
}
.bb-index-side .jv-oul24h .jv-oul24h-group {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--bb-border, #eadde4);
    border-radius: 10px;
    background: var(--bb-soft, #fff4f8);
}
.bb-index-side .jv-oul24h .jv-oul24h-group-title {
    margin: 0 0 5px;
    color: var(--bb-berry-deep, #8c2f5a);
    font-size: 1.02em;
    font-weight: 750;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.bb-index-side .jv-oul24h .jv-oul24h-group-title a {
    font-weight: inherit;
    text-decoration: none;
}
.bb-index-side .jv-oul24h .jv-oul24h-users {
    min-width: 0;
    color: var(--bb-ink, #403543);
    font-size: 1.02em;
    line-height: 1.7;
    overflow-wrap: anywhere;
    word-break: normal;
}
.bb-index-side .jv-oul24h .jv-oul24h-users a {
    font-weight: 650;
    text-decoration: none;
}
.bb-index-side .jv-oul24h .jv-oul24h-users a:hover,
.bb-index-side .jv-oul24h .jv-oul24h-group-title a:hover {
    text-decoration: underline;
}
.bb-index-side .jv-oul24h .jv-oul24h-group:focus-within {
    outline: 2px solid var(--bb-focus, #ad3976);
    outline-offset: 1px;
}
@media (max-width: 520px) {
    .bb-index-side .jv-oul24h .jv-oul24h-body {
        padding-right: 12px;
        padding-left: 12px;
    }
    .bb-index-side .jv-oul24h .jv-oul24h-group {
        padding: 10px;
    }
}