/*
 * Benchmark listing.
 *
 * Reuses the tokens and topbar from styles.css; everything here is specific to
 * the results table and the detail overlay.
 */

.bench-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 88px 24px 48px;
}

/* Embedded in the management page's content area rather than standing alone.
   There the surrounding layout already supplies the header and the padding, so
   the clearance for the standalone fixed topbar would just be a gap at the top.
   Left-aligned too: inside a column that already has a sidebar beside it,
   re-centring the table would pull it away from the panels above it. */
.bench-page.bench-embedded {
    max-width: none;
    margin: 0;
    padding: 0;
}

.bench-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.bench-search {
    flex: 1;
    min-width: 220px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    outline: none;
    transition: border-color 0.2s ease;
}

.bench-search:focus {
    border-color: var(--primary);
}

.bench-count {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

/* Tabs ----------------------------------------------------------------- */

.bench-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}

.bench-tab {
    padding: 8px 18px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    font-weight: 600;
    font-size: 14px;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.bench-tab:hover {
    color: var(--text);
}

.bench-tab.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Results table -------------------------------------------------------- */

.bench-table {
    background: var(--surface);
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.bench-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px 92px 64px;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s ease;
}

.bench-row:last-child {
    border-bottom: none;
}

.bench-row:hover {
    background: #f8fbff;
}

/* GPU table: name, speed, encoder, runs. */
.bench-row-gpu {
    grid-template-columns: minmax(0, 1fr) 92px 150px 64px;
}

.bench-col-enc {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

.bench-head {
    cursor: default;
    background: var(--surface-muted);
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bench-head:hover {
    background: var(--surface-muted);
}

.bench-cpu {
    min-width: 0;
    font-weight: 600;
}

.bench-cpu-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bench-cpu-sub {
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bench-score {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    text-align: right;
}

.bench-muted {
    color: var(--muted);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Sortable headers */
.bench-sort {
    cursor: pointer;
    user-select: none;
    text-align: right;
}

.bench-sort.is-active {
    color: var(--primary);
}

/* Detail overlay ------------------------------------------------------- */

.bench-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 2000;
}

.bench-modal {
    background: var(--surface);
    border-radius: 18px;
    box-shadow: var(--shadow);
    width: min(760px, 100%);
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.bench-modal-head {
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.bench-modal-title {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
}

.bench-modal-sub {
    font-size: 12px;
    color: var(--muted);
    margin-top: 3px;
}

.bench-close {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    border-radius: 10px;
    width: 30px;
    height: 30px;
    font-size: 17px;
    line-height: 1;
    flex-shrink: 0;
}

.bench-close:hover {
    color: var(--text);
    border-color: var(--muted);
}

.bench-modal-body {
    padding: 14px 22px 20px;
    overflow-y: auto;
}

.bench-run {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 13px 15px;
    margin-bottom: 10px;
}

.bench-run:last-child {
    margin-bottom: 0;
}

.bench-run-top {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 9px;
}

.bench-run-scores {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.bench-run-date {
    margin-left: auto;
    font-size: 12px;
    color: var(--muted);
}

.bench-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px 16px;
}

.bench-meta-item {
    font-size: 13px;
    min-width: 0;
}

.bench-meta-label {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}

.bench-meta-value {
    word-break: break-word;
}

.bench-empty {
    padding: 48px 20px;
    text-align: center;
    color: var(--muted);
}

.bench-note {
    margin-top: 16px;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.55;
}

@media (max-width: 720px) {
    .bench-page {
        padding: 80px 14px 36px;
    }

    .bench-page.bench-embedded {
        padding: 0;
    }

    /* Drop the encoder and run-count columns; both stay in the detail view. */
    .bench-row {
        grid-template-columns: minmax(0, 1fr) 72px 78px;
        gap: 8px;
        padding: 12px 14px;
    }

    .bench-row-gpu {
        grid-template-columns: minmax(0, 1fr) 78px;
    }

    .bench-col-enc,
    .bench-col-runs {
        display: none;
    }
}