/* Administration → System → Activity (M-328). Page-scoped presentation for the pre-deploy presence board: the
   traffic-light dots, the segmented click-bucket cell, the legend and the table. Token-driven so it re-skins with
   the theme (incl. dark mode); mobile-first — the table scrolls sideways on a narrow viewport rather than crushing
   its columns. Behaviour (the ~30s frame reload) lives in activity_refresh_controller.js (§4).

   The three tones are declared once as local custom properties so a host/theme can re-point them (§12). `amber`
   has no platform token of its own, so it carries a literal fallback here — the single seam to override. */
.platform-activity {
    --platform-activity-red: var(--platform-color-error, #c0392b);
    --platform-activity-amber: #d9822b;
    --platform-activity-gray: var(--platform-color-text-muted, #636e6f);
}

/* ── Legend ─────────────────────────────────────────────────────────────────────────────────────────────────
   States the deploy meaning so red/gray don't read backwards. Wraps to multiple lines on a narrow screen. */
.platform-activity__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--platform-space-md, 0.75rem) var(--platform-space-lg, 1.5rem);
    margin: 0 0 var(--platform-space-md, 0.75rem);
    color: var(--platform-color-text-muted, #636e6f);
    font-size: var(--platform-font-size-sm, 0.875rem);
}

.platform-activity__legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--platform-space-sm, 0.5rem);
}

/* ── Status dot ─────────────────────────────────────────────────────────────────────────────────────────────
   The traffic light: a filled circle tinted to the user's current level (also reused in the legend). */
.platform-activity__dot {
    flex: none;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: var(--platform-radius-pill, 999px);
    background: var(--platform-activity-gray);
}

.platform-activity__dot--red {
    background: var(--platform-activity-red);
}

.platform-activity__dot--amber {
    background: var(--platform-activity-amber);
}

.platform-activity__dot--gray {
    background: var(--platform-activity-gray);
}

/* ── Table ──────────────────────────────────────────────────────────────────────────────────────────────────
   Scrolls sideways on small screens instead of squeezing columns (mirrors the schedule/jobs pages). */
.platform-activity__table-wrap {
    overflow-x: auto;
}

.platform-activity__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--platform-font-size-sm, 0.875rem);
}

.platform-activity__table th,
.platform-activity__table td {
    padding: var(--platform-space-sm, 0.5rem) var(--platform-space-md, 0.75rem);
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--platform-color-border, #cfd8dc);
}

.platform-activity__table th {
    font-weight: 600;
    color: var(--platform-color-text-muted, #636e6f);
    white-space: nowrap;
}

.platform-activity__user {
    font-weight: 600;
}

/* Last-activity cell: the dot, the elapsed time, then a muted level label. */
.platform-activity__status {
    display: inline-flex;
    align-items: center;
    gap: var(--platform-space-sm, 0.5rem);
}

.platform-activity__level {
    color: var(--platform-color-text-muted, #636e6f);
}

/* The window sub-labels under the "Clicks" heading (1h · 1–2h · 2–8h). */
.platform-activity__clicks-windows {
    display: block;
    margin-top: 0.15rem;
    font-weight: 400;
    font-size: var(--platform-font-size-xs, 0.75rem);
}

/* ── Segmented click-volume cell ────────────────────────────────────────────────────────────────────────────
   Three counts aligned to the traffic-light windows, each tinted to its window's tone, the most-recent
   emphasised. A tinted surface with text-safe contrast, not a saturated fill, so the numbers stay readable. */
.platform-activity__clicks {
    display: inline-flex;
    align-items: stretch;
    gap: 2px;
    border-radius: var(--platform-radius-md, 0.375rem);
    overflow: hidden;
}

.platform-activity__bucket {
    min-width: 2.25rem;
    padding: 0.15rem 0.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--platform-color-text, #2c3e50);
    background: var(--platform-color-surface-muted, #ecf0f1);
    border-bottom: 2px solid var(--platform-activity-gray);
}

.platform-activity__bucket--red {
    border-bottom-color: var(--platform-activity-red);
}

.platform-activity__bucket--amber {
    border-bottom-color: var(--platform-activity-amber);
}

.platform-activity__bucket--gray {
    border-bottom-color: var(--platform-activity-gray);
}

/* The most-recent bucket carries the story — emphasise it. */
.platform-activity__bucket--now {
    font-weight: 700;
    font-size: var(--platform-font-size-md, 1rem);
}

/* Last login is muted, secondary context. */
.platform-activity__login {
    color: var(--platform-color-text-muted, #636e6f);
    white-space: nowrap;
}

/* Loading placeholder + empty state both read as muted secondary text. */
.platform-activity__loading,
.platform-activity__empty {
    margin: 0;
    padding: var(--platform-space-lg, 1.5rem);
    color: var(--platform-color-text-muted, #636e6f);
}