/* ─── Reset / base ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
    font-family: 'Montserrat', sans-serif !important;
    background: #050d1a !important;
    color: #fff;
    font-size: 1rem;
    margin: 0; padding: 0;
}
.container-fluid { padding: 0 !important; }

/* ─── CSS variables ─────────────────────────────────── */
:root {
    --male:          #2a7de0;
    --male-border:   #3a8ef0;
    --male-glow:     rgba(42,125,224,0.25);
    --female:        #c9206e;
    --female-border: #dc2d80;
    --female-glow:   rgba(201,32,110,0.25);
    --bg-deep:       #050d1a;
    --bg-card:       rgba(8, 22, 52, 0.85);
    --bg-row-alt:    rgba(255,255,255,0.03);
    --border:        rgba(255,255,255,0.10);
    --text-dim:      rgba(255,255,255,0.55);
    --gold:          #ffc940;
    --silver:        #c0c0c0;
    --bronze:        #cd7f32;
}

/* ─── Main header ───────────────────────────────────── */
.lb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 24px 12px;
    background: linear-gradient(180deg,#050d1a 0%,transparent 100%);
}
.lb-header__logo img { height: 56px; }
.lb-header__center { text-align: center; flex: 1; }
.lb-header__title {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 3px;
    margin: 0;
    line-height: 1.1;
}
.lb-header__title .highlight-blue { color: var(--male); }
.lb-header__sub {
    font-size: 0.72rem;
    letter-spacing: 3px;
    color: var(--text-dim);
    margin: 2px 0 0;
}
.lb-header__info {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 30px; height: 30px;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 0.9rem;
}

/* ─── Two-column layout ─────────────────────────────── */
.lb-columns {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 0 12px 12px;
    min-height: 60vh;
}
.lb-col {
    flex: 1;
    border-radius: 16px;
    padding: 0 0 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.lb-col--male {
    border: 1px solid var(--male-border);
    box-shadow: 0 0 24px var(--male-glow);
    background:
            radial-gradient(ellipse at 80% -10%, rgba(42, 125, 224, 0.35) 0%, transparent 55%), 
            radial-gradient(ellipse at 90% 55%, rgba(42, 125, 224, 0.14) 0%, transparent 45%), 
            rgb(10 26 61 / 45%);
    backdrop-filter: blur(10px) saturate(1.3);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
}
.lb-col--female {
    border: 1px solid var(--female-border);
    box-shadow: 0 0 24px var(--female-glow);
    background:
            radial-gradient(ellipse at 80% -10%, rgba(201, 32, 110, 0.35) 0%, transparent 55%), 
            radial-gradient(ellipse at 90% 55%, rgb(173 81 123 / 14%) 0%, transparent 45%), 
            rgb(35 10 21 / 61%);
    backdrop-filter: blur(10px) saturate(1.3);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
}

.lb-col-divider {
    display: flex;
    align-items: center;
    padding: 0 4px;
    align-self: stretch;
    justify-content: center;
}
.btn-arrow {
    background: rgba(255,255,255,0.08);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 30px; height: 30px;
    color: #fff;
    cursor: default;
    font-size: 0.75rem;
    display: flex; align-items: center; justify-content: center;
}

/* ─── Gender column header ──────────────────────────── */
.lb-col__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
}
.lb-col__gender { display: flex; align-items: center; gap: 10px; }
.gender-icon {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; font-weight: 700;
    border: 2px solid;
}
.gender-icon--male   { color: var(--male);   border-color: var(--male);   background: rgba(42,125,224,0.15); }
.gender-icon--female { color: var(--female); border-color: var(--female); background: rgba(201,32,110,0.15); }
.gender-label {
    display: flex; flex-direction: column;
    font-size: 0.8rem; font-weight: 700; letter-spacing: 1.5px;
    line-height: 1.25;
}
.gender-pill {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 20px;
    font-size: 0.65rem; font-weight: 700; letter-spacing: 1.5px;
    padding: 3px 10px;
    border: 1px solid;
    white-space: nowrap;
}
.gender-pill--male   { color: var(--male);   border-color: var(--male);   background: rgba(42,125,224,0.15); }
.gender-pill--female { color: var(--female); border-color: var(--female); background: rgba(201,32,110,0.15); }

/* ─── Test sections inside columns ──────────────────── */
.lb-tests { padding: 0 12px; flex: 1; }

.test-section { margin-bottom: 10px; }
.test-section__title-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 4px 5px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
}
.test-section__name {
    font-size: 0.78rem; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
}
.test-section__toplink {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.62rem; font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid var(--male);
    background: rgba(42,125,224,0.12);
    color: var(--male);
    cursor: pointer;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.lb-col--female .test-section__toplink {
    border-color: var(--female);
    background: rgba(201,32,110,0.12);
    color: var(--female);
}
.test-section__toplink:hover { opacity: 0.8; }

/* mini table */
.mini-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mini-table .pos-cell  { width: 28px; }
.mini-table .col-score { width: 110px; text-align: right; }
.mini-table .col-rank  { width: 52px;  text-align: center; }
.mini-table .col-inst  { width: 30%;   text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-table thead th {
    font-size: 0.62rem; font-weight: 600; letter-spacing: 0.8px;
    color: var(--text-dim);
    padding: 5px 4px 3px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.mini-table thead th.text-right { text-align: right; }
.mini-table thead th.text-center { text-align: center; }
.mini-table tbody tr:nth-child(even) { background: var(--bg-row-alt); }
.mini-table td {
    font-size: 0.72rem !important; font-weight: 400;
    padding: 5px 4px;
    color: #fff !important;
    background: transparent !important;
    border: none !important;
    vertical-align: middle;
}
.mini-table td.text-right { text-align: right; }
.mini-table td.text-center { text-align: center; }

.pos-cell { text-align: center; }
.trophy { font-size: 0.85rem; }
.pos-num { font-size: 0.72rem; color: var(--text-dim); }

/* ─── View all / collapse ───────────────────────────── */
.test-section--hidden { display: none; }
.btn-view-all {
    display: block;
    width: calc(100% - 24px);
    margin: 8px 12px 0;
    background: rgba(255,255,255,0.07);
    border: 1px solid var(--male-border);
    border-radius: 8px;
    color: var(--male);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.5px;
    padding: 9px;
    cursor: pointer;
    text-align: center;
}
.lb-col--female .btn-view-all {
    border-color: var(--female-border);
    color: var(--female);
}
.btn-view-all:hover { background: rgba(255,255,255,0.12); }
.arrow-down { font-size: 0.6rem; }

/* ─── Stats bar ─────────────────────────────────────── */
.lb-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
    flex-wrap: wrap;
}
.stat {
    display: flex; align-items: center; gap: 8px;
    padding: 0 20px;
    flex-direction: row;
}
.stat__icon { font-size: 1.1rem; color: var(--text-dim); }
.stat__num { font-size: 1rem; font-weight: 700; }
.stat__lbl { font-size: 0.62rem; color: var(--text-dim); letter-spacing: 1.5px; }
.stat-sep {
    width: 1px; height: 36px;
    background: var(--border);
}

/* ─── Filter view ───────────────────────────────────── */
#filter-view {
    min-height: 100vh;
    background:
        radial-gradient(ellipse at 80% -5%,  rgba(42,125,224,0.38) 0%, transparent 50%),
        radial-gradient(ellipse at 90%  55%, rgba(42,125,224,0.18) 0%, transparent 45%),
        #050d1a;
    padding: 16px 20px 40px;
    position: relative;
    overflow: hidden;
}

.fv-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.8rem; font-weight: 600; letter-spacing: 0.5px;
    color: var(--text-dim);
    cursor: pointer;
    margin-bottom: 20px;
    padding: 6px 0;
}
.fv-back:hover { color: #fff; }
.fv-back__arrow { font-size: 1.4rem; line-height: 1; }

.fv-header {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 22px;
    position: relative;
}
.fv-header__icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 2px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.fv-header__icon img { width: 44px; height: 44px; object-fit: contain; }
.fv-header__info h2 {
    font-size: 1.3rem; font-weight: 800;
    letter-spacing: 2px; text-transform: uppercase;
    margin: 0 0 2px;
}
.fv-header__sub { font-size: 0.72rem; color: var(--text-dim); letter-spacing: 1px; }
.fv-header__silhouette {
    position: absolute; right: 0; top: -20px;
    width: 140px; height: 120px;
    background: url('/img/leaderboard/athlete-silhouette.png') no-repeat center/contain;
    opacity: 0.12;
    pointer-events: none;
}

/* ─── Search ────────────────────────────────────────── */
.fv-search-row {
    display: flex; align-items: center;
    background: rgba(255,255,255,0.07);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    gap: 10px;
}
.fv-search__icon { color: var(--text-dim); font-size: 1rem; }
#fv-search {
    flex: 1; background: transparent; border: none; outline: none;
    color: #fff; font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
}
#fv-search::placeholder { color: var(--text-dim); }
.fv-search__clear {
    background: none; border: none; color: var(--text-dim);
    cursor: pointer; font-size: 0.85rem; padding: 0;
}
.fv-search__clear:hover { color: #fff; }

/* ─── Selectize dark theme overrides ───────────────── */
.selectize-control.single .selectize-input,
.selectize-control.single .selectize-input.input-active {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.75rem !important;
    padding: 7px 28px 7px 12px !important;
    box-shadow: none !important;
    cursor: pointer !important;
    min-height: unset !important;
    line-height: 1.4 !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.selectize-control.single .selectize-input::after {
    border-color: var(--text-dim) transparent transparent !important;
}
.selectize-control.single .selectize-input.dropdown-active::after {
    border-color: transparent transparent var(--text-dim) !important;
}
.selectize-control.single .selectize-input.dropdown-active,
.selectize-control.multi .selectize-input.dropdown-active {
    border-radius: 10px 10px 0 0 !important;
    border-bottom: none !important;
    padding-bottom: calc(7px + 1px) !important; /* compensate for removed border so height stays the same */
}
.fv-filter-group .selectize-dropdown {
    margin-top: 0 !important;
}
.selectize-input.dropdown-active::before {
    display: none !important;
}
.selectize-dropdown .selectize-dropdown-content {
    border-top: none !important;
}
.selectize-dropdown-content {
    border-top: none !important;
    outline: none !important;
}
/* Arrow for multi-select controls */
.selectize-control.multi .selectize-input {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.75rem !important;
    padding: 5px 28px 5px 8px !important;
    box-shadow: none !important;
    cursor: pointer !important;
    min-height: unset !important;
    overflow: visible !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}
.selectize-control.multi .selectize-input::before {
    content: '';
    position: absolute;
    right: 10px; top: 50%;
    transform: translateY(-50%);
    border: 4px solid transparent;
    border-top-color: var(--text-dim);
    margin-top: 2px;
    pointer-events: none;
}
.selectize-control.multi .selectize-input.dropdown-active::before {
    border-top-color: transparent;
    border-bottom-color: var(--text-dim);
    margin-top: -2px;
}
/* Selected item tags inside multi-select */
.selectize-control.multi .selectize-input .item {
    background: rgba(42,125,224,0.3) !important;
    border: 1px solid var(--male-border) !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-size: 0.7rem !important;
    padding: 2px 20px 2px 7px !important;
    margin: 2px 3px 2px 0 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
}
.lb-col--female .selectize-control.multi .selectize-input .item {
    background: rgba(201,32,110,0.3) !important;
    border-color: var(--female-border) !important;
}
.selectize-control.multi .selectize-input .item .remove {
    color: rgba(255,255,255,0.6) !important;
    border-left: 1px solid rgba(255,255,255,0.2) !important;
    padding: 0 4px !important;
}
.selectize-control .selectize-input input {
    color: #fff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.75rem !important;
}
.selectize-control .selectize-input input::placeholder { color: var(--text-dim) !important; }
.selectize-dropdown {
    background: #0d1f45 !important;
    border: 1px solid var(--border) !important;
    border-top: none !important;
    border-radius: 0 0 10px 10px !important;
    color: #fff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.75rem !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
    min-width: 100% !important;
    width: auto !important;
    white-space: nowrap !important;
}
.selectize-dropdown .option {
    padding: 8px 12px !important;
    color: rgba(255,255,255,0.85) !important;
    cursor: pointer !important;
}
.selectize-dropdown .option:hover,
.selectize-dropdown .option.active {
    background: rgba(255,255,255,0.10) !important;
    color: #fff !important;
}
.selectize-dropdown .option.selected {
    background: rgba(42,125,224,0.25) !important;
    color: #fff !important;
}

/* ─── Filter row ────────────────────────────────────── */
.fv-filters-row {
    display: flex; align-items: flex-start; gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.fv-filters-row .fv-filter-group { flex-basis: 100%; }
.fv-filter-group { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }

.fv-filter-group > *,
.fv-filter-group > * .selectize-control { min-width: 180px; flex: 1; }

.fv-filter-group > *:first-child,
.fv-filter-group > *:first-child .selectize-control { min-width: 240px; }

.fv-filter-group select {
    width: 100%;
    background: rgba(255,255,255,0.07);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    padding: 7px 12px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.fv-filter-group select:focus { outline: none; border-color: rgba(255,255,255,0.3); }
.fv-filter-group select option { background: #0d1f45; color: #fff; }
.btn-reset {
    background: none; border: 1px solid var(--border);
    border-radius: 20px; color: var(--text-dim);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem; padding: 7px 14px;
    cursor: pointer; white-space: nowrap;
}
.btn-reset:hover { color: #fff; border-color: rgba(255,255,255,0.3); }

/* ─── Active filter chips ───────────────────────────── */
.fv-active-chips {
    display: flex; flex-wrap: wrap; gap: 8px;
    min-height: 30px;
    margin-bottom: 12px;
}
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(42,125,224,0.2);
    border: 1px solid rgba(42,125,224,0.5);
    border-radius: 10px;
    padding: 4px 10px;
    font-size: 0.72rem; font-weight: 600;
}
.chip__remove {
    background: none; border: none; color: inherit;
    cursor: pointer; font-size: 0.75rem; padding: 0;
    opacity: 0.8;
}
.chip__remove:hover { opacity: 1; }

/* ─── Filter table ──────────────────────────────────── */
.fv-table-wrap {
    background: rgba(8, 18, 40, 0.45);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}
.fv-table { width: 100%; border-collapse: collapse; }
.fv-table thead th {
    background: rgba(255,255,255,0.06);
    font-size: 0.68rem; font-weight: 700; letter-spacing: 1px;
    color: var(--text-dim);
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.10);
}
.fv-table thead .col-score,
.fv-table thead .col-rank  { text-align: center; }
.fv-table thead .col-inst  { text-align: right; }
.fv-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.06); }
.fv-table tbody tr:last-child { border-bottom: none; }
.fv-table tbody tr:hover { background: rgba(255,255,255,0.05); }
.fv-table td {
    padding: 10px 12px;
    font-size: 0.78rem !important;
    color: #fff !important;
    background: transparent !important;
    vertical-align: middle;
}
.fv-table .col-pos { width: 44px; text-align: center; }
.fv-table .col-score { text-align: center; }
.fv-table .col-rank  { text-align: center; }
.fv-table .col-inst  { text-align: right; }

.fv-pos-trophy { font-size: 1rem; }
.fv-pos-num    { font-size: 0.8rem; color: var(--text-dim); }
.rank-badge {
    display: inline-block;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 0.72rem;
    font-weight: 600;
}

/* ─── Current user highlight ────────────────────────── */
tr.row--me td {
    background: rgba(255, 210, 0, 0.08) !important;
    border-top: 1px solid rgba(255, 210, 0, 0.25) !important;
    border-bottom: 1px solid rgba(255, 210, 0, 0.25) !important;
}
tr.row--me-pinned td {
    border-top: 1px solid rgba(255, 210, 0, 0.4) !important;
    border-bottom: none !important;
}
tr.row--me-divider td {
    padding: 0 !important;
    height: 6px !important;
    background: linear-gradient(to bottom, rgba(255,210,0,0.08), transparent) !important;
    border-bottom: 1px solid var(--border) !important;
}
.me-badge {
    display: inline-block;
    background: rgba(255, 210, 0, 0.2);
    border: 1px solid rgba(255, 210, 0, 0.5);
    border-radius: 4px;
    color: #ffd200;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 5px;
    letter-spacing: 0.5px;
    vertical-align: middle;
    margin-left: 4px;
}
.loading-cell { text-align: center; color: var(--text-dim); padding: 30px !important; }

/* ─── Pagination ────────────────────────────────────── */
.fv-pagination {
    display: flex; justify-content: center; align-items: center;
    gap: 6px; flex-wrap: wrap;
    margin-bottom: 16px;
}
.pg-btn {
    min-width: 34px; height: 34px;
    background: rgba(255,255,255,0.07);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem; font-weight: 600;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0 8px;
}
.pg-btn:hover { background: rgba(255,255,255,0.15); }
.pg-btn--active {
    background: var(--male);
    border-color: var(--male);
}
.pg-btn--dots { cursor: default; background: transparent; border-color: transparent; }

.fv-footnote {
    text-align: center;
    font-size: 0.72rem; color: var(--text-dim);
    letter-spacing: 0.5px;
}

/* ─── Responsive ────────────────────────────────────── */
@media (max-width: 767px) {
    .lb-header { padding: 12px 12px 8px; }
    .lb-header__logo img { height: 40px; }
    .lb-header__title { font-size: 1.3rem; letter-spacing: 1.5px; }
    .lb-header__sub { font-size: 0.6rem; letter-spacing: 1.5px; }
    .lb-columns { flex-direction: column; gap: 12px; padding: 0 8px 8px; }
    .lb-col-divider { display: none; }
    .gender-label { font-size: 0.7rem; }
    .lb-header__title { font-size: 1.2rem; }
    .stat { padding: 0 10px; }
    .stat__num { font-size: 0.85rem; }
    .fv-filter-group select { font-size: 0.7rem; padding: 6px 10px; }
    .fv-table td, .fv-table thead th { padding: 8px 8px; font-size: 0.7rem !important; }
    .lb-header__logo { display: none; }

    /* Prevent silhouette from affecting layout */
    .fv-header__silhouette { display: none; }

    .gender-icon { display: none; }

    /* Let multi-select grow naturally but tighten item tag sizing */
    .selectize-control.multi .selectize-input {
        flex-wrap: wrap !important;
        overflow: visible !important;
        max-height: none !important;
        padding: 4px 28px 4px 6px !important;
    }
    .selectize-control.multi .selectize-input .item {
        font-size: 0.65rem !important;
        padding: 1px 16px 1px 5px !important;
        margin: 2px 2px 2px 0 !important;
    }
}
@media (max-width: 479px) {
    .lb-stats { gap: 0; }
    .stat { padding: 0 8px; }
    .stat__lbl { display: none; }
    .col-inst { display: none; }
    .fv-table thead .col-inst { display: none; }
}