/* Hotspots table pager
 * =====================
 *
 * Loaded by both dashboard/index.html (v1) and v2/index.html; the markup is written by
 * renderHotspotsPager() in dashboard/app_v1.3.js into the #hotspots-pager slot, which sits
 * directly below the scrolling table. It is the thing you reach when you run out of rows,
 * so it lives where you run out of them and nothing about paging is left above the head.
 *
 * Colour: straw is the theme's "how much of the table you are being shown" hue, and
 * styles_v1.3.css allows it in exactly two shapes, a 10% wash and a 1px rule. Both are used
 * here and nothing else is: --straw fails AA on paper (3.0:1), so no text is ever painted in
 * it. Hover stays in straw as well, because hover and the keyboard walk are what straw is
 * for. The focus ring is olive, because focus is commitment.
 */

.hotspots-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 8px 16px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: var(--straw-wash);
    border-top: 1px solid var(--straw-line);
}

.hotspots-pager-range {
    margin: 0;
}

.hotspots-pager-size {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.hotspots-pager-select {
    padding: 4px 8px;
    font: inherit;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-color-strong);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.hotspots-pager-select:hover {
    border-color: var(--straw);
}

.hotspots-pager-select:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.hotspots-pager-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Reads as one unit with the buttons either side of it, so it carries the weight rather
 * than the count on the left, which is the detail you check rather than track. */
.hotspots-pager-pos {
    color: var(--text-primary);
    font-weight: 600;
    white-space: nowrap;
}

.hotspots-pager-btn {
    padding: 4px 12px;
    font: inherit;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-color-strong);
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.hotspots-pager-btn:hover:not(:disabled) {
    background: var(--bg-card-hover);
    border-color: var(--straw);
}

.hotspots-pager-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Kept visible rather than hidden at the ends of the range: a control that disappears
 * moves the two beside it, and the pair is a landmark you aim at. */
.hotspots-pager-btn:disabled {
    color: var(--text-muted);
    background: var(--bg-sunken);
    border-color: var(--border-color);
    cursor: default;
    opacity: 0.7;
}