/* HASHRATE page: miner-reported average hashrate per GPU model (quantus)
   from the JetSki telemetry snapshot (/api/gpu-hashrate), grouped by GPU
   series. Opening a GPU adds indented rows to the same table: a summary line,
   then its OC profiles with their figures under the GPU's own columns. The
   shared theme stays inline in hashrate.html; the logic is in hashrate.js.
   Panel and table echo the PAYOUTS page. */

/* --- panel and toolbar --- */
.hr-panel {
    box-sizing: border-box;
    padding: 1.2rem 1.3rem 1.3rem;
    border: 2px solid var(--border-color);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.hr-toolbar {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1.3rem 1.2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--border-color);
}
.hr-heading {
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.hr-title {
    margin: 0;
    font-size: 0.85em;
    font-weight: normal;
    letter-spacing: 1.5px;
    color: var(--accent-color);
}
/* QUANTUS | UPDATED 13:32:30 | 2 MIN AGO, red once the snapshot is stale */
.hr-meta {
    font-size: 0.5em;
    letter-spacing: 1px;
    color: var(--muted);
}
.hr-meta.is-stale {
    color: var(--red-soft);
}
.hr-field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.hr-label {
    font-size: 0.5em;
    letter-spacing: 2px;
    color: var(--muted);
}
.hr-search {
    box-sizing: border-box;
    width: 270px;
    height: 38px;
    padding: 0 0.8rem;
    font-family: inherit;
    font-size: 0.6em;
    letter-spacing: 1px;
    color: var(--text-color);
    background: #0a0a0a;
    border: 2px solid var(--border-color);
    border-radius: 0;
}
.hr-search::placeholder {
    color: var(--muted);
    opacity: 0.8;
}
.hr-search:focus {
    outline: none;
    border-color: var(--accent-color);
}

/* Control line under the title: RANK BY and SHOW, the search on the right */
.hr-controls {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.9rem 1.6rem;
}
.hr-field-search {
    margin-left: auto;
}
/* ELECTRICITY: an optional price, "$ 0.00 / KWH" in one box like the other
   controls; a clear button once a price is typed and a green edge while
   PROFIT shows */
.hr-kwh-box {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 0.75rem;
    border: 2px solid var(--border-color);
    background: #0a0a0a;
    cursor: text;
}
.hr-kwh-box:focus-within {
    border-color: var(--accent-color);
}
.hr-kwh-box.has-value {
    border-color: rgba(169, 207, 107, 0.55);
}
.hr-kwh-unit {
    font-size: 0.55em;
    letter-spacing: 1px;
    color: var(--muted);
}
.hr-kwh {
    box-sizing: content-box;
    width: 4.5em;
    padding: 0;
    font-family: inherit;
    font-size: 0.6em;
    letter-spacing: 1px;
    text-align: right;
    color: var(--text-color);
    background: none;
    border: 0;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
}
.hr-kwh::placeholder {
    color: var(--muted);
    opacity: 0.6;
}
.hr-kwh::-webkit-outer-spin-button,
.hr-kwh::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.hr-kwh-clear {
    display: none;
    padding: 0 0 0 3px;
    font-family: inherit;
    font-size: 0.55em;
    color: var(--muted);
    background: none;
    border: 0;
    cursor: pointer;
}
.hr-kwh-box.has-value .hr-kwh-clear {
    display: inline-block;
}
.hr-kwh-clear:hover,
.hr-kwh-clear:focus-visible {
    color: var(--text-color);
    outline: none;
}
/* Refresh problems or an old snapshot, above the table */
.hr-status {
    margin: -0.2rem 0 1rem;
    padding: 0.7rem 0.9rem;
    font-size: 0.5em;
    letter-spacing: 1px;
    line-height: 1.7;
    color: var(--red-soft);
    border-left: 2px solid var(--red);
    background: rgba(255, 92, 92, 0.07);
}

/* --- table --- */
.hr-scroll {
    max-height: max(70vh, 540px);
    overflow: auto;
}
.hr-table {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    font-size: 0.72em;
}
.hr-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 12px 10px;
    font-size: 0.7em;
    font-weight: normal;
    letter-spacing: 1.5px;
    line-height: 1.6;
    white-space: nowrap;
    text-align: left;
    color: var(--muted);
    background: #111111;
    border-bottom: 2px solid var(--border-color);
}
/* Figures are right-aligned so digits and units line up down each column */
.hr-table th.num,
.hr-table td.num {
    text-align: right;
}
/* GPU MODEL takes about a third of the width (more when an open setup needs
   it) and the six figure columns share the rest, so the figures spread evenly
   instead of bunching at the right edge. Slim side padding keeps all seven
   columns and an open setup inside 1280 px. */
.hr-table > thead > tr > th.col-gpu {
    width: 30%;
}
.hr-table > thead > tr > th.num,
.hr-table > tbody > tr > td.num {
    padding-left: 5px;
    padding-right: 5px;
    white-space: nowrap;
}
/* Second header line: what the figure covers (LAST 24 H, MINING NOW) */
.hr-th-sub {
    display: block;
    margin-top: 5px;
    font-size: 0.85em;
    letter-spacing: 1px;
    color: rgba(143, 141, 136, 0.75);
}
.hr-table td {
    padding: 11px 10px;
    vertical-align: middle;
    line-height: 1.6;
    border-bottom: 1px solid var(--border-color);
}
.hr-table td.hr-gpu {
    color: var(--text-color);
}

/* GPU series header rows (RTX 50XX, RTX 40XX, ...) between the models */
/* A quiet label with a hairline, not a filled band */
.hr-table tr.hr-cat th {
    position: static;
    padding: 20px 10px 8px;
    font-size: 0.8em;
    letter-spacing: 2px;
    color: var(--accent-color);
    background: none;
    border-bottom: 1px solid rgba(255, 107, 53, 0.3);
}
.hr-table tbody tr.hr-cat:first-child th {
    padding-top: 12px;
}
.hr-cat-count {
    margin-left: 12px;
    font-size: 0.75em;
    letter-spacing: 1px;
    color: var(--muted);
}

/* --- GPU rows: chevron, NVIDIA mark, name, profile count --- */
.hr-table tbody tr.hr-row.is-alt td {
    background: rgba(255, 255, 255, 0.025);
}
.hr-table tbody tr.hr-row:hover td {
    background: rgba(255, 255, 255, 0.055);
}
.hr-table tbody tr.hr-row.is-expandable {
    cursor: pointer;
}
.hr-table tbody tr.hr-row.is-open td {
    background: rgba(255, 107, 53, 0.07);
    border-bottom-color: transparent;
}
.hr-gpu-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.hr-chev {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    color: var(--muted);
    background: none;
    border: 0;
    cursor: pointer;
}
.hr-chev::before {
    content: "";
    border-left: 6px solid currentColor;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transition: transform 0.15s ease;
}
.hr-row:hover .hr-chev,
.hr-chev:focus-visible,
.hr-row.is-open .hr-chev {
    color: var(--accent-color);
    outline: none;
}
.hr-row.is-open .hr-chev::before {
    transform: rotate(90deg);
}
/* NVIDIA mark before the model name, sized like the benchmark page's */
.hr-logo {
    flex: none;
    width: 22px;
    height: 22px;
    object-fit: contain;
}
.hr-gpu-name {
    min-width: 0;
}
/* Leaders: the fastest GPU's name and AVERAGE in bright gold, the most
   efficient GPU's name and EFFICIENCY in green (a GPU leading both keeps the
   gold name) */
.hr-panel {
    --hr-lead-gold: #ffe08f;
    --hr-lead-green: #a9cf6b;
}
.hr-row.is-efficient .hr-gpu-name {
    color: var(--hr-lead-green);
}
.hr-row.is-fastest .hr-gpu-name {
    color: var(--hr-lead-gold);
}
.hr-table tbody tr.hr-row.is-fastest td.hr-rate {
    color: var(--hr-lead-gold);
    text-shadow: 0 0 10px rgba(255, 208, 110, 0.55);
}
.hr-table tbody tr.hr-row.is-efficient td.hr-eff {
    color: var(--hr-lead-green);
    text-shadow: 0 0 10px rgba(169, 207, 107, 0.45);
}
.hr-gpu-count {
    flex: none;
    margin-left: 4px;
    font-size: 0.7em;
    letter-spacing: 1px;
    color: var(--muted);
}

/* --- details of an opened GPU: indented rows on a gold rail --- */
.hr-table tr.hr-sub > td {
    padding-top: 9px;
    padding-bottom: 9px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px dashed rgba(44, 44, 43, 0.9);
}
.hr-table tr.hr-sub > td:first-child {
    padding-left: 26px;
    border-left: 2px solid var(--accent-color);
}
.hr-table tr.hr-sub.is-last > td {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}
/* REPORTING GPU SLOTS 0 | OBSERVED 21 MIN, led by the GPU's average clocks
   when it has no OC profile */
.hr-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 6px;
    font-size: 0.7em;
    letter-spacing: 0.5px;
}
.hr-pair {
    white-space: nowrap;
}
.hr-pair-label {
    color: var(--muted);
}
.hr-pair b,
.hr-pair .hr-figure {
    font-weight: normal;
    color: var(--text-color);
}
/* One OC profile: a small table with the OC setup (accent color) above what the card
   ran at, figures right-aligned under CORE / MEM / POWER heads, then the
   configuration line */
.hr-profile-info {
    white-space: nowrap;
}
.hr-oc {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: start;
    align-items: baseline;
    column-gap: clamp(14px, 1.2vw, 28px);   /* roomier on wide screens, still inside 1280 px */
    row-gap: 3px;
}
.hr-oc-head {
    font-size: 0.6em;
    letter-spacing: 1.5px;
    text-align: right;
    color: rgba(143, 141, 136, 0.75);
}
.hr-oc-name {
    font-size: 0.66em;
    letter-spacing: 1px;
    color: var(--muted);
}
.hr-oc-cell {
    font-size: 0.85em;
    text-align: right;
    color: var(--text-color);
}
.hr-oc-cell.is-setup {
    color: var(--accent-color);
}
.hr-profile-info .hr-config {
    display: flex;
    align-items: center;
    margin-top: 8px;
    font-size: 0.7em;
}
/* The configuration words keep the line's tighter spacing so it fits one line */
.hr-profile-info .hr-config-os,
.hr-profile-info .hr-config-cuda,
.hr-profile-info .hr-config-miner b {
    letter-spacing: inherit;
}
.hr-profile-info .hr-sep {
    margin: 0 6px 0 4px;
}
/* A setup or driver against its GPU's #1, under its hashrate and efficiency */
.hr-delta {
    display: block;
    margin-top: 3px;
    font-size: 0.7em;
    letter-spacing: 0.5px;
    color: var(--muted);
}
.hr-delta.is-up {
    color: var(--hr-lead-green);
}
.hr-delta.is-down {
    color: var(--red-soft);
}
/* DRIVERS: one line per OS / CUDA driver / miner version, its place first */
.hr-driver-line {
    display: flex;
    align-items: center;
    gap: 14px;
}
.hr-driver-info .hr-config {
    margin-top: 0;
}
.hr-driver td.num {
    font-size: 0.9em;
}
.hr-profile td.num {
    font-size: 0.9em;
}
.hr-profile td.hr-rate {
    color: var(--text-color);
}
/* A setup's configuration line is a row of its own under the setup, across the
   table, so a setup that merges rigs can list every OS, CUDA driver and miner
   version on one line without widening the GPU column */
.hr-table tr.hr-profile > td {
    padding-bottom: 0;
    border-bottom: 0;
}
.hr-table tr.hr-profile-config > td {
    padding-top: 8px;
}
.hr-profile-config .hr-config {
    margin-top: 0;
}
.hr-table td.hr-none {
    font-size: 0.75em;
    letter-spacing: 1px;
    color: var(--muted);
}

/* PROFIT in green next to REVENUE (red when power costs more than the GPU
   earns), and its head once a $/kWh is set; stacked under REVENUE below
   1500 px so every column still fits */
.hr-profit {
    margin-left: 10px;
    color: var(--hr-lead-green);
}
.hr-profit.is-negative {
    color: var(--red-soft);
}
.hr-th-profit {
    display: none;
    margin-left: 0.6em;
    color: var(--hr-lead-green);
}
.hr-table.has-profit .hr-th-profit {
    display: inline;
}
@media (max-width: 1499px) {
    .hr-profit {
        display: block;
        margin: 3px 0 0;
        font-size: 0.85em;
    }
    .hr-table.has-profit .hr-th-profit {
        display: block;
        margin: 3px 0 0;
    }
}

/* --- figures and states --- */
.hr-table td.table-message {
    padding: 2rem;
    text-align: center;
    color: var(--muted);
    line-height: 1.8;
}
.hr-table td.table-error {
    color: var(--red-soft);
}
.hr-rate {
    color: var(--flare-bright);
}
.hr-dim {
    color: var(--muted);
}
.hr-unit {
    font-size: 0.75em;
    font-style: normal;
    color: var(--muted);
    margin-left: 4px;
}
.hr-unknown {
    color: var(--muted);
    font-size: 0.85em;
    letter-spacing: 1px;
}

/* Sortable AVERAGE / EFFICIENCY heads: plain-text buttons matching the th */
.hr-sort {
    padding: 0;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}
.hr-sort:hover,
.hr-sort:focus-visible {
    color: var(--accent-color);
    outline: none;
}
/* The arrow marks the RANK BY column; its space is kept on the other head too,
   so the heads don't shift when the ranking changes */
.hr-sort::after {
    content: " \25BC";
    color: var(--accent-color);
    visibility: hidden;
}
.hr-sort.is-active::after {
    visibility: visible;
}
.hr-sort.is-active.is-asc::after {
    content: " \25B2";
}
.hr-sort:not(.is-active):hover::after {
    visibility: visible;
    opacity: 0.4;
}

/* RANK BY: HASHRATE | EFFICIENCY, styled like the calculator's unit switch */
.hr-seg {
    box-sizing: border-box;
    display: inline-flex;
    height: 38px;
    border: 2px solid var(--border-color);
    background: var(--tab-inactive);
}
.hr-seg-btn {
    padding: 0 0.8rem;
    font-family: inherit;
    font-size: 0.55em;
    letter-spacing: 1px;
    color: var(--muted);
    background: none;
    border: 0;
    border-left: 1px solid var(--border-color);
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}
.hr-seg-btn:first-child {
    border-left: 0;
}
.hr-seg-btn:hover {
    color: var(--text-color);
    background: rgba(255, 255, 255, 0.05);
}
.hr-seg-btn[aria-pressed="true"] {
    color: var(--main-bg);
    background: var(--accent-color);
}
.hr-seg-btn:focus-visible {
    outline: 2px solid var(--text-color);
    outline-offset: -2px;
}

/* A setup's place in the ranking, in its table's corner: #1 in the ranking's
   leader color (gold for hashrate, green for efficiency); LOW DATA / NO DATA
   for setups ranked after the rest */
.hr-oc-rank {
    font-size: 0.7em;
    letter-spacing: 1px;
    color: var(--muted);
}
.hr-table[data-rank="hashrate"] .hr-oc-rank.is-top {
    color: var(--hr-lead-gold);
}
.hr-table[data-rank="efficiency"] .hr-oc-rank.is-top {
    color: var(--hr-lead-green);
}

.hr-oc-rank.is-thin {
    font-size: 0.55em;
    letter-spacing: 0.5px;
}

/* SHOW 5 MORE SETUPS / SHOW THE BEST 3 ONLY, closing a GPU's details */
.hr-more-btn {
    padding: 0;
    font-family: inherit;
    font-size: 0.7em;
    letter-spacing: 1px;
    color: var(--accent-color);
    background: none;
    border: 0;
    cursor: pointer;
}
.hr-more-btn:hover,
.hr-more-btn:focus-visible {
    color: var(--text-color);
    outline: none;
}

/* Configuration: OS name | CUDA logo + driver version | JETSKI-MINER + version */
.hr-config {
    color: var(--text-color);
}
.hr-config-os {
    letter-spacing: 1px;
}
/* Separator bar: tight, even spacing on both sides (see sep() in hashrate.js).
   The left margin is smaller to offset the letter-spacing trailing the word
   before it and where the font draws "|" in its cell. */
.hr-sep {
    margin: 0 7px 0 5px;
    letter-spacing: 0;
    color: var(--muted);
    opacity: 0.55;
}
.hr-config-cuda {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #a9cf6b;
    letter-spacing: 1px;
}
.hr-icon {
    flex: none;
    width: 14px;
    height: 14px;
    object-fit: contain;
}
.hr-config-miner b {
    font-weight: normal;
    letter-spacing: 1px;
    color: var(--accent-color);
}