/* Admin → Reports → Visitor Analytics.

   A dashboard is scanned and operated rather than read, so the work here is information design:
   state is encoded in shape as well as number (the conversion pills, the funnel bars), the summary
   sits above the detail, and the wide report table scrolls inside its own container so the page
   body never scrolls sideways. */

.wr-va__loading,
.wr-va__note {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--wr3-ink-3, #7c8798);
}

.wr-va__note code {
    font-size: 0.8rem;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--wr3-surface-2, #f1f4f9);
}

/* ---------- Collection status ---------- */

.wr-va__status {
    margin: 0 0 22px;
    padding: 14px 16px;
    border: 1px solid var(--wr3-border, #e4e8f0);
    border-radius: 10px;
    background: var(--wr3-surface-2, #f8fafc);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wr-va__status p { margin: 0; font-size: 0.86rem; line-height: 1.6; }

/* Full-IP storage is called out in warning colour whenever it is on. It is an opt-in that a
   deployment can inherit without anybody deciding it, and the whole point of surfacing it here is
   that somebody notices. */
.wr-va__warn { color: #9a6b12; font-weight: 600; }

/* ---------- Layout ---------- */

.wr-va__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 20px;
    margin: 24px 0;
}

.wr-va__subhead {
    margin: 14px 0 8px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wr3-ink-3, #7c8798);
}

/* ---------- Funnel ---------- */

.wr-va__funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.wr-va__funnelhead {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.86rem;
    margin-bottom: 5px;
}

/* Tabular figures so the counts line up down the column rather than shifting with each digit. */
.wr-va__funnelhead strong { font-variant-numeric: tabular-nums; }

.wr-va__bar {
    height: 8px;
    border-radius: 999px;
    background: var(--wr3-surface-2, #eef2f7);
    overflow: hidden;
}

.wr-va__bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #1d5ff5, #4b8bff);
}

/* ---------- Definition lists ---------- */

.wr-va__rates { margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; }
.wr-va__rates > div { display: flex; justify-content: space-between; gap: 12px; font-size: 0.86rem; }
.wr-va__rates dt { margin: 0; color: var(--wr3-ink-2, #4a5568); }
.wr-va__rates dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

.wr-va__split { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.wr-va__split li { display: flex; justify-content: space-between; font-size: 0.86rem; }
.wr-va__split strong { font-variant-numeric: tabular-nums; }

/* ---------- Filters ---------- */

.wr-va__filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    padding: 4px 0 18px;
}

.wr-va__filters label { display: flex; flex-direction: column; gap: 4px; }

.wr-va__filters label > span {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--wr3-ink-3, #7c8798);
}

.wr-va__input {
    width: 100%;
    padding: 7px 10px;
    font-size: 0.86rem;
    border: 1px solid var(--wr3-border, #e4e8f0);
    border-radius: 7px;
    background: #fff;
    color: inherit;
}

.wr-va__input:focus-visible { outline: 2px solid #1d5ff5; outline-offset: 1px; }

.wr-va__search { grid-column: span 2; }

.wr-va__filteractions {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.wr-va__count {
    margin: 0 0 10px;
    font-size: 0.82rem;
    color: var(--wr3-ink-3, #7c8798);
    font-variant-numeric: tabular-nums;
}

/* ---------- Report table ---------- */

/* Its own scroll container. Sixteen columns of event data will not fit a laptop, and a page body
   that scrolls sideways is the bug people report about admin tables. */
.wr-va__tablewrap {
    overflow-x: auto;
    border: 1px solid var(--wr3-border, #e4e8f0);
    border-radius: 10px;
}

.wr-va__table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }

.wr-va__table th {
    position: sticky;
    top: 0;
    text-align: left;
    padding: 10px 12px;
    white-space: nowrap;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--wr3-ink-3, #7c8798);
    background: var(--wr3-surface-2, #f8fafc);
    border-bottom: 1px solid var(--wr3-border, #e4e8f0);
}

.wr-va__table td {
    padding: 9px 12px;
    vertical-align: top;
    border-bottom: 1px solid var(--wr3-border, #eef2f7);
}

.wr-va__table tbody tr:last-child td { border-bottom: none; }
.wr-va__table td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; }

.wr-va__empty { text-align: center; padding: 26px 12px; color: var(--wr3-ink-3, #7c8798); }

/* A path is the one column that can outgrow its track. It wraps on the character rather than
   pushing the table wider, because a truncated URL is unreadable and a clipped one is a bug. */
.wr-va__path {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    word-break: break-all;
    max-width: 260px;
    display: inline-block;
}

.wr-va__muted { display: block; color: var(--wr3-ink-3, #7c8798); font-size: 0.76rem; }

.wr-va__link { color: #1d5ff5; text-decoration: none; font-weight: 600; }
.wr-va__link:hover { text-decoration: underline; }

.wr-va__back { margin-bottom: 14px; }

/* ---------- Conversion pills ---------- */

/* Status encoded in form as well as text, so the funnel stage of a row reads at a glance in a
   table of fifty. Semantic colour, separate from the accent used by the funnel bars. */
.wr-va__pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.wr-va__pill--anonymous { background: #eef2f7; color: #5a6676; }
.wr-va__pill--registered { background: #e4efff; color: #1a4fbf; }
.wr-va__pill--paid { background: #e3f6ec; color: #17683f; }
.wr-va__pill--unknown { background: #f5f0e4; color: #7a5a12; }

/* ---------- Pager ---------- */

.wr-va__pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 16px 0 4px;
    font-size: 0.84rem;
}

/* ---------- Timeline ---------- */

.wr-va__timeline { list-style: none; margin: 0; padding: 0; }

.wr-va__sessionbreak {
    margin: 18px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--wr3-border, #e4e8f0);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--wr3-ink-3, #7c8798);
}

.wr-va__sessionbreak:first-child { margin-top: 0; }

.wr-va__timelineitem { display: flex; gap: 14px; padding: 7px 0; font-size: 0.86rem; }

.wr-va__timelinetime {
    flex: 0 0 68px;
    font-variant-numeric: tabular-nums;
    color: var(--wr3-ink-3, #7c8798);
    font-size: 0.8rem;
    padding-top: 1px;
}

.wr-va__timelinebody { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.wr-reports-links { margin: 0 0 8px; }

@media (max-width: 720px) {
    .wr-va__search { grid-column: span 1; }
    .wr-va__path { max-width: 160px; }
}

/* The IP-hashing diagnostic. Warning-coloured because it names a configuration step that was
   missed, and sized to be read rather than skimmed past -- the failure it reports is silent
   everywhere else. */
.wr-va__alert {
    margin: 0;
    padding: 11px 13px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.84rem;
    line-height: 1.6;
    border: 1px solid #f0c36d;
    border-radius: 8px;
    background: #fdf6e6;
    color: #7a5a12;
}

.wr-va__alert i { margin-top: 3px; flex: 0 0 auto; }
.wr-va__alert code {
    font-size: 0.8rem;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(122, 90, 18, 0.10);
}

.wr-va__note i { color: #2fa66a; margin-right: 5px; }