/* Analytics page */

/* ── Heatmap ── */
.heatmap-cell { transition: opacity 0.15s; }
.heatmap-cell:hover { outline: 1px solid #f97316; z-index: 1; }

/* ── Tooltip ── */
.tooltip {
    position: absolute;
    background: #1a1a25;
    border: 1px solid #242430;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    pointer-events: none;
    z-index: 50;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* ── Sortable table ── */
.sort-btn { cursor: pointer; user-select: none; }
.sort-btn:hover { color: #f97316; }
.sort-btn .arrow { opacity: 0.3; font-size: 10px; }
.sort-btn.active .arrow { opacity: 1; color: #f97316; }

/* ── Bar chart ── */
.bar-group { position: relative; }
.bar-group:hover .bar-tooltip { display: block; }
.bar-tooltip {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 4px;
}

/* ── Device bars ── */
.device-bar { transition: width 0.5s ease; }

/* ── Date range buttons ── */
.range-btn { transition: all 0.15s; }
.range-btn.active { background: #f97316; color: white; }

/* ── Auto-refresh pulse ── */
.auto-refresh-dot { animation: pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }