/*
 * Stats Overlay — shared stylesheet
 *
 * Extracted from the demo dashboard (Demos.WebDashboard.Blazor) so that any
 * OFF host (including game clients) can reuse the stats panel without pulling
 * in the full dashboard CSS.
 *
 * Provides: expandable stats panel, chip filters, row/item layout,
 *           semantic colour classes, graph canvas, and mini FPS badge.
 */

/* --- Panel chrome --- */

.stats-panel {
    position: absolute;
    top: 4px;
    right: 4px;
    left: auto;
    z-index: 50;
    background: rgba(0, 0, 0, 0.85);
    border-radius: 6px;
    font: 11px/1.3 monospace;
    color: #e0e0e0;
    pointer-events: auto;
    width: 620px;
    user-select: text;
    overflow: hidden;
}

.stats-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.stats-header-label {
    font-size: 10px;
    color: #7b8fb8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stats-hint {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.25);
    margin-left: auto;
}

/* --- Buttons --- */

.stats-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e0e0e0;
    font: 10px monospace;
    padding: 0 5px;
    border-radius: 3px;
    cursor: pointer;
    line-height: 16px;
}
.stats-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* --- Chip filters --- */

.stats-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.stats-chip {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.3);
    font: 9px monospace;
    padding: 1px 5px;
    border-radius: 3px;
    cursor: pointer;
    line-height: 14px;
}
.stats-chip:hover {
    color: rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.2);
}
.stats-chip-on {
    color: #e0e0e0;
    border-color: rgba(76, 201, 240, 0.4);
    background: rgba(76, 201, 240, 0.1);
}

/* --- Body / rows --- */

.stats-body {
    padding: 2px 8px;
    overflow: hidden;
}

.stats-row {
    line-height: 1.5;
}

.stats-row-label {
    color: #7b8fb8;
    margin-right: 6px;
    font-size: 10px;
    text-transform: uppercase;
    /* Hover cue: the label carries a title tooltip that explains the
       row. Without this affordance readers don't know they can hover. */
    cursor: help;
}

.stats-row-content {
    display: inline;
}

.stats-item {
    margin-right: 8px;
    white-space: nowrap;
}

/* Sections that need an explicit second line (e.g. Pyramid wrapping
   the depth histogram below atlas/queue/dirty) wrap their secondary
   row in this — display:block forces a new line inside the otherwise
   inline .stats-row-content flow. */
.stats-subline {
    display: block;
    margin-top: 2px;
}

/* Multi-line section content (e.g. Render breakdown) */
.stats-line {
    display: block;
    line-height: 1.5;
}

/* Fixed-width stat values — prevents layout shift from changing numbers */
.stats-val {
    display: inline-block;
    min-width: 2.5em;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --- Semantic colours --- */

.stats-good { color: #06d6a0; }
.stats-warn { color: #ffd166; }
.stats-bad  { color: #f44; }
.stats-info { color: #4cc9f0; }

/* --- Graph --- */

.stats-graph-canvas {
    display: block;
    width: 100%;
}

/* --- Mini FPS badge --- */

.stats-mini {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 50;
    font: 12px/1 monospace;
    color: rgba(255, 255, 255, 0.4);
    pointer-events: auto;
    cursor: pointer;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
}
.stats-mini:hover {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.6);
}