/**
 * Rogue Bocce League Stats — Plugin Styles
 * Typography and font sizing deferred to the theme.
 * Only layout, structure, and state classes live here.
 */

/* ── Reset ───────────────────────────────────────────────────────────────── */

.rbs-app *,
.rbs-app *::before,
.rbs-app *::after { box-sizing: border-box; }

.rbs-app {
    max-width: 1140px;
    margin: 0 auto;
}

/* ── Selectors bar ───────────────────────────────────────────────────────── */

.rbs-selectors {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.rbs-sel-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rbs-selectors select {
    padding: 6px 28px 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    min-width: 180px;
}

.rbs-selectors select:focus {
    outline: 2px solid #3a7bd5;
    outline-offset: 1px;
}

.rbs-sel-clear {
    background: none;
    border: none;
    padding: 0 4px;
    cursor: pointer;
    color: #999;
    font-size: 1.1em;
    line-height: 1;
}

.rbs-sel-clear:hover {
    color: #333;
}

/* ── Tab bar ─────────────────────────────────────────────────────────────── */

.rbs-tabs {
    display: flex;
    justify-content: center;
    border-bottom: 2px solid #ddd;
    margin-bottom: 28px;
}

.rbs-tab-btn {
    padding: 12px 32px;
    font-size: 1.05em;
    font-weight: 600;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    color: #555;
    transition: color 0.15s, border-color 0.15s;
    letter-spacing: 0.01em;
}

.rbs-tab-btn:hover { color: #222; }
.rbs-tab-btn.active { color: #1a1a1a; border-bottom-color: #c0392b; }

/* ── Panels ──────────────────────────────────────────────────────────────── */

.rbs-panel { display: none; }
.rbs-panel.active { display: block; }

.rbs-tab-hint {
    margin: 0 0 20px;
    color: #666;
    font-style: italic;
}

/* ── Conference pills ────────────────────────────────────────────────────── */

.rbs-pills {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.rbs-pill {
    padding: 4px 14px;
    font-weight: 600;
    border: 1px solid #ccc;
    border-radius: 20px;
    background: #fff;
    cursor: pointer;
    color: #666;
    transition: all 0.15s;
}

.rbs-pill:hover { border-color: #999; color: #333; }
.rbs-pill.active { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }

/* ── Conference blocks ───────────────────────────────────────────────────── */

.rbs-conf-block { margin-bottom: 36px; }

.rbs-conf-block h2 {
    padding-bottom: 8px;
    border-bottom: 2px solid #1a1a1a;
    margin-bottom: 16px;
}

.rbs-conf-block h3 {
    padding-bottom: 4px;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
}

.rbs-sub-sec { margin-bottom: 20px; }

/* ── Tables ──────────────────────────────────────────────────────────────── */

.rbs-table-wrap { overflow-x: auto; margin-bottom: 8px; }
.rbs-table-outer { position: relative; }

/* ── Scroll shadow overlay ───────────────────────────────────────────────── */

.rbs-scroll-shadow {
    position: absolute;
    right: 0;
    width: 16px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.12));
    transition: opacity 0.15s;
    z-index: 2;
}

.rbs-app table.dataTable {
    width: 100% !important;
    border-collapse: collapse;
}

.rbs-app table.dataTable thead th {
    font-weight: 700;
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    padding: 8px 10px;
    white-space: nowrap;
    text-align: right;
}

.rbs-app table.dataTable thead th.rbs-tl { text-align: left; }
.rbs-app table.dataTable thead th.rbs-tc { text-align: center; }

.rbs-app table.dataTable tbody td {
    padding: 7px 10px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
    text-align: center;
}

.rbs-app table.dataTable tbody td.rbs-tl { text-align: left; }
.rbs-app table.dataTable tbody td.rbs-tc { text-align: center; }

.rbs-app table.dataTable tbody tr:last-child td { border-bottom: none; }
.rbs-app table.dataTable tbody tr:hover td { background: #fafafa; }
.rbs-app table.dataTable tbody tr.rbs-highlight td { background: #fff8e1 !important; }
.rbs-app table.dataTable tbody tr.rbs-round-break td { border-top: 2px solid #ccc !important; }

/* ── Table cell helpers ──────────────────────────────────────────────────── */

.rbs-num   { text-align: center !important; }
.rbs-score { text-align: center !important; font-variant-numeric: tabular-nums; }
.rbs-rank  { color: #888; }
.rbs-winner { font-weight: 700; }
.rbs-forfeit { color: #aaa; font-style: italic; }

/* ── Match results collapsible ───────────────────────────────────────────── */

.rbs-collapsible-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    border-bottom: 1px solid #e5e5e5;
    cursor: pointer;
    padding: 0 0 6px;
    font-weight: 700;
    color: inherit;
    width: 100%;
    text-align: left;
    margin-bottom: 14px;
}

.rbs-collapsible-toggle .chevron {
    display: inline-block;
    transition: transform 0.2s;
    font-style: normal;
    color: #aaa;
}

.rbs-collapsible-toggle.open .chevron { transform: rotate(90deg); }

.rbs-collapsible-body { display: none; }
.rbs-collapsible-body.open { display: block; }

.rbs-matches-group { margin-bottom: 24px; }

/* ── Div-coloured pills ───────────────────────────────────────────────────── */

.rbs-div-pill-mon.active,
.rbs-div-pill-mon:hover { background-color: #c9daf8; border-color: #a4c0f4; color: #1a1a1a; }
.rbs-div-pill-tue.active,
.rbs-div-pill-tue:hover { background-color: #fff2cc; border-color: #ffe599; color: #1a1a1a; }
.rbs-div-pill-wed.active,
.rbs-div-pill-wed:hover { background-color: #d9d2e9; border-color: #b4a7d6; color: #1a1a1a; }
.rbs-div-pill-thu.active,
.rbs-div-pill-thu:hover { background-color: #ead1dc; border-color: #d5a6bd; color: #1a1a1a; }
.rbs-div-pill-sun.active,
.rbs-div-pill-sun:hover { background-color: #d9ead3; border-color: #b6d7a8; color: #1a1a1a; }
.rbs-div-pill-sat.active,
.rbs-div-pill-sat:hover { background-color: #fce5cd; border-color: #f9cb9c; color: #1a1a1a; }

/* ── Team name banner ────────────────────────────────────────────────────── */

.rbs-team-banner {
    margin-bottom: 12px;
    padding: 8px 12px;
    border-left: 3px solid #c0392b;
    background: #fafafa;
    font-size: inherit;
}

.rbs-aka-note {
    display: block;
    font-size: 0.85em;
    color: #666;
    margin: 0 0 10px;
}

.rbs-loading-spinner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2rem 0;
    color: #888;
}

.rbs-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #ddd;
    border-top-color: #c0392b;
    border-radius: 50%;
    animation: rbs-spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes rbs-spin { to { transform: rotate(360deg); } }

/* ── Division colour cells ───────────────────────────────────────────────── */

.rbs-app td.rbs-div-mon { background-color: #c9daf8; text-align: center; }
.rbs-app td.rbs-div-tue { background-color: #fff2cc; text-align: center; }
.rbs-app td.rbs-div-wed { background-color: #d9d2e9; text-align: center; }
.rbs-app td.rbs-div-thu { background-color: #ead1dc; text-align: center; }
.rbs-app td.rbs-div-sun { background-color: #d9ead3; text-align: center; }
.rbs-app td.rbs-div-sat { background-color: #fce5cd; text-align: center; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .rbs-tab-btn { padding: 8px 14px; }
    .rbs-selectors select { min-width: 150px; }
}
/* ── Compare tab ─────────────────────────────────────────────────────────── */

.rbs-cmp-selbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 10px 12px;
    background: #f0f7f0;
    border: 1px solid #c8e6c9;
    border-left: 4px solid #2e7d32;
    border-radius: 0 6px 6px 0;
}

.rbs-cmp-selbar label {
    font-weight: 600;
    color: #555;
    white-space: nowrap;
}

.rbs-cmp-selbar select {
    padding: 4px 24px 4px 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 7px center;
    min-width: 140px;
}

.rbs-cmp-selbar select:disabled {
    opacity: 0.5;
    cursor: default;
}

.rbs-cmp-div-btn {
    padding: 4px 12px;
    border: 1.5px solid #2e7d32;
    border-radius: 20px;
    background: #fff;
    color: #2e7d32;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.rbs-cmp-div-btn:hover {
    background: #2e7d32;
    color: #fff;
}

.rbs-cmp-div-btn.rbs-cmp-div-added {
    border-color: #aaa;
    color: #888;
    cursor: default;
}

/* ── Compare chips ───────────────────────────────────────────────────────── */

.rbs-cmp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.rbs-cmp-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.85em;
    border: 1.5px solid #bbb;
    background: #fff;
}

.rbs-cmp-chip.rbs-cmp-primary {
    background: #2e7d32;
    color: #fff;
    border-color: #2e7d32;
}

.rbs-cmp-rm {
    cursor: pointer;
    margin-left: 2px;
    opacity: 0.6;
    font-size: 0.85em;
    line-height: 1;
}

.rbs-cmp-rm:hover { opacity: 1; }

.rbs-cmp-clear {
    background: none;
    border: none;
    cursor: pointer;
    color: #888;
    font-size: 0.8em;
    text-decoration: underline;
    padding: 0 2px;
    margin-left: 4px;
}

.rbs-cmp-clear:hover { color: #c0392b; }

/* ── All-time comparison table ───────────────────────────────────────────── */

.rbs-app table.rbs-cmp-alltime-table {
    width: 100%;
    border-collapse: collapse;
}

.rbs-app table.rbs-cmp-alltime-table thead th {
    font-weight: 700;
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    padding: 8px 10px;
    white-space: nowrap;
    text-align: center;
}

.rbs-app table.rbs-cmp-alltime-table thead th.rbs-tl { text-align: left; }

.rbs-app table.rbs-cmp-alltime-table tbody td {
    padding: 7px 10px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
    text-align: center;
}

.rbs-app table.rbs-cmp-alltime-table tbody td.rbs-tl { text-align: left; }
.rbs-app table.rbs-cmp-alltime-table tbody tr:last-child td { border-bottom: none; }
.rbs-app table.rbs-cmp-alltime-table tbody tr:hover td { background: #fafafa; }

.rbs-cmp-primary-row td { background: #fff8e1 !important; }

/* ── H2H set wrapper ─────────────────────────────────────────────────────── */

.rbs-h2h-set {
    margin-bottom: 28px;
    padding: 16px 18px;
    border: 1px solid #e4e4e4;
    border-left: 4px solid #2e7d32;
    border-radius: 0 6px 6px 0;
    background: #fafafa;
}

.rbs-h2h-set h4 {
    margin: 0 0 14px 0;
}

/* ── H2H stat cards ──────────────────────────────────────────────────────── */

.rbs-h2h-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.rbs-h2h-stat {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 8px 14px;
    text-align: center;
    min-width: 80px;
}

.rbs-h2h-sv {
    font-size: 1.3em;
    font-weight: 700;
    line-height: 1;
}

.rbs-h2h-sk {
    font-size: 0.75em;
    color: #888;
    margin-top: 2px;
}

/* ── H2H win bar ─────────────────────────────────────────────────────────── */

.rbs-h2h-winbar {
    height: 18px;
    border-radius: 9px;
    overflow: hidden;
    display: flex;
    margin-bottom: 6px;
    background: #eee;
}

.rbs-h2h-primary-seg { background: #2e7d32; }
.rbs-h2h-opp-seg     { background: #c0392b; }

.rbs-h2h-winbar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.8em;
    color: #666;
    margin-bottom: 16px;
}

/* ── H2H match table ─────────────────────────────────────────────────────── */

.rbs-app table.rbs-h2h-table {
    width: 100%;
    border-collapse: collapse;
}

.rbs-app table.rbs-h2h-table thead th {
    font-weight: 700;
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    padding: 6px 8px;
    white-space: nowrap;
    text-align: center;
}

.rbs-app table.rbs-h2h-table thead th.rbs-tl { text-align: left; }

.rbs-app table.rbs-h2h-table tbody td {
    padding: 6px 8px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
    text-align: center;
}

.rbs-app table.rbs-h2h-table tbody td.rbs-tl { text-align: left; }
.rbs-app table.rbs-h2h-table tbody tr:last-child td { border-bottom: none; }
.rbs-app table.rbs-h2h-table tbody tr:hover td { background: #fafafa; }
.rbs-app table.rbs-h2h-table tbody tr.rbs-highlight td { background: #fff8e1 !important; }

/* ── Tournament badge ────────────────────────────────────────────────────── */

.rbs-tourn-badge {
    display: inline-block;
    font-size: 0.7em;
    background: #e8f4fd;
    color: #2980b9;
    border: 1px solid #aed4f0;
    border-radius: 3px;
    padding: 1px 4px;
    margin-left: 4px;
    vertical-align: middle;
}
/* ── Team performance chart ──────────────────────────────────────────────── */

.rbs-team-chart-wrap {
    position: relative;
    height: 600px;
    margin-bottom: 32px;
}