/* ============================================================
   ADMIN · Activity section  (acx-)

   Metrics panels, charts and the per-user report. Composes the
   existing adminx- palette — buttons and state blocks come from
   admin.css and are not redefined here.
   ============================================================ */

/* ---------- controls ---------- */
.acx-controls { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.acx-tabs,
.acx-range { display: flex; gap: 6px; flex-wrap: wrap; }
.acx-tab,
.acx-chip {
    border: 1px solid #e2e8f0; background: #fff; color: #0f172a;
    border-radius: 999px; padding: 7px 16px;
    font: inherit; font-size: .9rem; cursor: pointer;
}
.acx-tab:hover,
.acx-chip:hover { border-color: #cbd5e1; background: #f8fafc; }
.acx-tab.is-active,
.acx-chip.is-active { background: #0f172a; color: #fff; border-color: #0f172a; }

/* ---------- KPI tiles ---------- */
.acx-kpis {
    display: grid; gap: 12px; margin-bottom: 18px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.acx-kpis-3,
.acx-kpis-5 { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

.acx-kpi { background: #fff; border: 1px solid #e6eaf0; border-radius: 14px; padding: 16px; }
.acx-kpi-v { font-size: 1.9rem; font-weight: 700; color: #0f172a; line-height: 1.1; }
.acx-kpi-l { font-size: .82rem; font-weight: 600; color: #334155; margin-top: 6px; }
.acx-kpi-s { font-size: .74rem; color: #64748b; margin-top: 2px; }

/* Stickiness and other health numbers earn a colour; nothing else does. */
.acx-kpi-good .acx-kpi-v { color: #0f766e; }
.acx-kpi-ok   .acx-kpi-v { color: #b45309; }
.acx-kpi-weak .acx-kpi-v { color: #b91c1c; }

/* ---------- panels ---------- */
.acx-panel { background: #fff; border: 1px solid #e6eaf0; border-radius: 16px; padding: 20px; margin-bottom: 18px; }
.acx-panel h3 { margin: 0 0 4px; font-size: 1.05rem; color: #0f172a; }
.acx-panel h4 { margin: 18px 0 6px; font-size: .92rem; color: #0f172a; }
.acx-note { margin: 0 0 14px; font-size: .82rem; color: #64748b; line-height: 1.5; }
.acx-note strong { color: #334155; }
.acx-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }

/* ---------- trend chart ---------- */
.acx-chart svg { width: 100%; height: 150px; display: block; }
.acx-chart-foot { display: flex; justify-content: space-between; font-size: .72rem; color: #94a3b8; margin-top: 6px; }

/* ---------- ranked bars ---------- */
.acx-bars { display: flex; flex-direction: column; }
.acx-bar-row {
    display: grid; gap: 12px; align-items: center;
    grid-template-columns: minmax(120px, 1.4fr) minmax(80px, 2fr) minmax(110px, auto);
    padding: 9px 0; border-bottom: 1px solid #f1f5f9;
}
.acx-bar-row:last-child { border-bottom: 0; }
.acx-bar-label strong { display: block; font-size: .88rem; color: #0f172a; }
.acx-bar-label span { display: block; font-size: .72rem; color: #94a3b8; }
.acx-bar-track { background: #f1f5f9; border-radius: 999px; height: 9px; overflow: hidden; }
.acx-bar-fill { height: 100%; border-radius: 999px; }
.acx-bar-val { text-align: right; }
.acx-bar-val strong { display: block; font-size: .86rem; color: #0f172a; }
.acx-bar-val span { display: block; font-size: .71rem; color: #94a3b8; }

.acx-empty { padding: 18px; text-align: center; color: #94a3b8; font-size: .85rem; }

/* ---------- cohort grid ---------- */
.acx-cohort { overflow-x: auto; }
.acx-cg-row { display: flex; gap: 4px; margin-bottom: 4px; min-width: 600px; }
.acx-cg-head { font-size: .72rem; color: #64748b; font-weight: 600; }
.acx-cg-wk { flex: 0 0 110px; font-size: .78rem; color: #334155; display: flex; align-items: center; }
.acx-cg-n { flex: 0 0 50px; font-size: .78rem; color: #64748b; display: flex; align-items: center; }
.acx-cg-cell {
    flex: 1 1 0; min-width: 46px; height: 32px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: .74rem; font-weight: 600;
}
.acx-cg-blank { background: #f8fafc; }

/* ---------- people ---------- */
.acx-people-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.acx-people-head h3 { flex: 1 1 auto; margin: 0; }
.acx-search {
    border: 1px solid #e2e8f0; border-radius: 999px; padding: 7px 14px;
    font: inherit; font-size: .86rem; min-width: 200px;
}

.acx-people { display: flex; flex-direction: column; }
.acx-person {
    display: grid; gap: 10px; align-items: center; width: 100%;
    grid-template-columns: 2fr .8fr .7fr .7fr .7fr 1fr;
    padding: 11px 8px; border: 0; border-bottom: 1px solid #f1f5f9;
    background: none; font: inherit; text-align: left; cursor: pointer; border-radius: 8px;
}
.acx-person:hover { background: #f8fafc; }
.acx-person-head {
    font-size: .72rem; color: #64748b; font-weight: 600;
    cursor: default; text-transform: uppercase; letter-spacing: .04em;
}
.acx-person-head:hover { background: none; }
.acx-person-id strong { display: block; font-size: .86rem; color: #0f172a; }
.acx-person-id em { display: block; font-size: .74rem; color: #94a3b8; font-style: normal; }
.acx-person span { font-size: .84rem; color: #334155; }

.acx-tier { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 600; }
.acx-tier-power   { background: #0f766e; color: #fff; }
.acx-tier-regular { background: #d1fae5; color: #065f46; }
.acx-tier-casual  { background: #fef3c7; color: #92400e; }
.acx-tier-trial   { background: #e2e8f0; color: #475569; }
.acx-tier-dormant { background: #f8fafc; color: #94a3b8; }

/* ---------- per-user report ---------- */
.acx-report { border-color: #c7d2fe; box-shadow: 0 8px 30px rgba(15, 23, 42, .07); }
.acx-report-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.acx-report-actions { display: flex; gap: 8px; }

/* One square per active day; opacity carries how many kinds of activity. */
.acx-strip { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 8px; }
.acx-strip-day { width: 13px; height: 13px; border-radius: 3px; display: block; }

@media (max-width: 720px) {
    .acx-person { grid-template-columns: 1.6fr .8fr .6fr .8fr; }
    .acx-person span:nth-child(5),
    .acx-person span:nth-child(6) { display: none; }
    .acx-bar-row { grid-template-columns: minmax(100px, 1.3fr) minmax(60px, 1fr) minmax(90px, auto); }
}

/* ---------- metric definitions ---------- */
/* Collapsed by default: present for the one time you need it, out of the way
   the rest of the time. A metric nobody can define is a metric nobody should
   act on, so every tab carries its own. */
.acx-defs {
    background: #f8fafc; border: 1px solid #e6eaf0; border-radius: 14px;
    padding: 14px 18px; margin-bottom: 18px;
}
.acx-defs > summary {
    cursor: pointer; font-size: .86rem; font-weight: 600; color: #334155;
    list-style: none;
}
.acx-defs > summary::-webkit-details-marker { display: none; }
.acx-defs > summary::before { content: '▸ '; color: #94a3b8; }
.acx-defs[open] > summary::before { content: '▾ '; }
.acx-defs[open] > summary { margin-bottom: 10px; }
.acx-defs dl { margin: 0; }
.acx-defs dt { font-size: .82rem; font-weight: 700; color: #0f172a; margin-top: 10px; }
.acx-defs dd { margin: 2px 0 0; font-size: .82rem; color: #475569; line-height: 1.55; }

/* Explicit refetch. Data is held across remounts so returning to #admin
   re-renders instead of re-querying; this is the only thing that re-queries. */
.acx-refresh { font-variant-numeric: tabular-nums; }