/* ── Tighter top padding on the page section ── */
.site-section:has(.sb-sidebar) {
    padding-top: 1.5em;
}

/* ── Sidebar (liga cards) ── */
.sb-sidebar {
    position: sticky;
    top: 90px;
}

.sb-sidebar-label {
    color: #64748B;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.sb-liga-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.sb-liga-card {
    text-align: left;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #E5E7EB;
    cursor: pointer;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: background 0.15s, border-color 0.15s;
}

.sb-liga-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

/* Non-active global: subtle gold tint */
.sb-liga-card.is-global {
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.25);
}

.sb-liga-card.is-global .sb-liga-tournament {
    color: #F59E0B;
}

/* Active regular liga: red */
.sb-liga-card.active {
    background: rgba(238, 30, 70, 0.16);
    border-color: #ee1e46;
    box-shadow: 0 0 0 1px rgba(238, 30, 70, 0.35);
}

/* Active global liga: gold (overrides red) */
.sb-liga-card.is-global.active {
    background: rgba(245, 158, 11, 0.18);
    border-color: #F59E0B;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.4);
}

.sb-liga-tournament {
    font-size: 11px;
    color: #64748B;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.sb-liga-card.active .sb-liga-tournament {
    color: #ee1e46;
}

.sb-liga-card.is-global.active .sb-liga-tournament {
    color: #F59E0B;
}

.sb-liga-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.sb-liga-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2px;
}

.sb-liga-members {
    font-size: 12px;
    color: #64748B;
}

.sb-liga-rank {
    font-size: 11px;
    font-weight: 700;
    color: #94A3B8;
    background: rgba(255, 255, 255, 0.04);
    padding: 2px 7px;
    border-radius: 999px;
}

.sb-liga-card.active .sb-liga-rank {
    color: #ee1e46;
    background: rgba(238, 30, 70, 0.18);
}

.sb-liga-card.is-global.active .sb-liga-rank {
    color: #F59E0B;
    background: rgba(245, 158, 11, 0.2);
}

/* ── Avatars ── */
.sb-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.sb-avatar-letter {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

/* ── Panel ── */
.sb-panel {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
}

.sb-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
}

.sb-toolbar-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.sb-toolbar-sub {
    font-size: 12px;
    color: #64748B;
    margin-top: 2px;
}

.sb-search {
    position: relative;
}

.sb-search input {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 7px 10px 7px 30px;
    color: #E5E7EB;
    font-size: 13px;
    width: 200px;
    outline: none;
}

.sb-search input::placeholder {
    color: #64748B;
}

.sb-search input:focus {
    border-color: rgba(238, 30, 70, 0.55);
}

.sb-search-icon {
    position: absolute;
    left: 10px;
    top: 7px;
    color: #64748B;
    font-size: 13px;
    pointer-events: none;
}

/* ── Table ── */
.sb-table {
    width: 100%;
    border-collapse: collapse;
}

.sb-table thead th {
    background: transparent;
    color: #64748B;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: left;
    white-space: nowrap;
}

.sb-table thead th.num {
    text-align: right;
}

.sb-table thead th.center {
    text-align: center;
}

.sb-table tbody td {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: rgba(229, 231, 235, 0.92);
    vertical-align: middle;
}

.sb-table tbody tr:last-child td {
    border-bottom: none;
}

.sb-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.025);
}

.sb-table tbody tr.row-me td {
    background: rgba(238, 30, 70, 0.10);
}

.sb-table tbody tr.row-me td:first-child {
    box-shadow: inset 3px 0 0 0 #ee1e46;
}

.sb-table tbody tr.row-me:hover td {
    background: rgba(238, 30, 70, 0.14);
}

/* ── Rank chips ── */
.rank-chip {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.rank-plain {
    color: #94A3B8;
    font-weight: 600;
}

.rank-gold {
    background: linear-gradient(140deg, #FCD34D, #D97706);
    color: #1F1300;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25), 0 4px 10px rgba(245, 158, 11, 0.18);
}

.rank-silver {
    background: linear-gradient(140deg, #E5E7EB, #94A3B8);
    color: #1F2937;
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.25), 0 4px 10px rgba(148, 163, 184, 0.18);
}

.rank-bronze {
    background: linear-gradient(140deg, #F4A574, #9A4A16);
    color: #1F0B00;
    box-shadow: 0 0 0 1px rgba(180, 83, 9, 0.25), 0 4px 10px rgba(180, 83, 9, 0.18);
}

/* ── Name cell ── */
.sb-name-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sb-name {
    font-size: 14px;
    color: #E5E7EB;
}

.sb-name-anon {
    color: #94A3B8;
}

.sb-name-me {
    font-weight: 700;
}

.sb-jij-pill {
    margin-left: 8px;
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: #ee1e46;
    color: #fff;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

/* ── Score & ratio ── */
.sb-score {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.3px;
    text-align: right;
}

.sb-ratio {
    text-align: right;
    color: #94A3B8;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.sb-ratio .num {
    color: #E5E7EB;
    font-weight: 600;
}

.sb-ratio .sep {
    color: #475569;
}

/* ── Badges ── */
.sb-badges {
    text-align: right;
    white-space: nowrap;
}

.sb-badges .badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 14px;
    margin-left: 4px;
    vertical-align: middle;
}

.sb-badges .badge-icon-img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    margin-left: 4px;
    vertical-align: middle;
}

.sb-badges .empty {
    color: #475569;
    font-size: 12px;
}

/* ── Empty filter state ── */
.sb-empty-row td {
    text-align: center;
    color: #64748B;
    padding: 28px 18px;
}

/* ── Mobile tweaks ── */
@media (max-width: 768px) {
    .sb-search input {
        width: 140px;
    }
}

/* ── Klikbare naam in scorebord ── */
.sb-name-link {
    color: inherit;
    text-decoration: none;
}

.sb-name-link:hover {
    text-decoration: underline;
    opacity: 0.85;
}