/* Analytics page (admin). Uses the portal's own tokens, same as the design. */
.an-page { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.an-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-card); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 11px; }
.an-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.an-title { flex: none; font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.an-label { flex: none; font-family: var(--font-display); font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.an-muted { font-size: 11.5px; color: var(--ink-4); }
.an-info { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 1px solid var(--line); border-radius: 50%; font-family: var(--font-display); font-size: 9.5px; font-weight: 800; color: var(--ink-3); cursor: help; }
.an-empty { padding: 26px 0; text-align: center; font-size: 12.5px; color: var(--ink-4); }

/* sticky controls */
.an-controls { position: sticky; top: -20px; z-index: 12; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-card); }
.an-controls__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.an-controls__row--filters { gap: 7px; padding-top: 2px; border-top: 1px solid var(--line-soft); }
.an-controls__title { flex: none; font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--ink); }
.an-seg { flex: none; display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; }
.an-seg__btn { height: 26px; padding: 0 11px; border: none; border-radius: 999px; background: transparent; font-family: var(--font-body); font-size: 12px; color: var(--ink-2); cursor: pointer; }
.an-seg__btn:hover { background: var(--hover); }
.an-seg__btn.is-on { background: var(--chip-on); color: var(--chip-on-fg); font-weight: 700; }
.an-date { height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-family: var(--font-body); font-size: 12.5px; color: var(--ink); outline: none; }
.an-date:focus { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(44,110,209,0.15); }
.an-switch { flex: none; display: inline-flex; align-items: center; width: 36px; height: 21px; padding: 3px; border: none; border-radius: 999px; cursor: pointer; background: var(--smoke, var(--surface-3)); transition: background 140ms var(--ease-out); }
.an-switch.is-on { background: var(--blue-500); }
.an-switch__knob { display: block; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(12,30,51,0.25); transition: transform 140ms var(--ease-out); }
.an-switch.is-on .an-switch__knob { transform: translateX(15px); }
.an-picker { margin-top: 7px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-family: var(--font-body); font-size: 12px; color: var(--ink-2); cursor: pointer; }
.an-picker:hover { background: var(--surface-2); color: var(--ink); }
.an-pop { position: absolute; z-index: 30; top: 40px; left: 0; min-width: 190px; max-height: 280px; overflow: auto; padding: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-popover); }
.an-pop__item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.an-pop__item:hover { background: var(--hover); }
.an-chip { margin-top: 7px; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 6px 0 11px; border: 1px solid var(--chip-on-line); border-radius: 999px; background: var(--chip-on); font-size: 12px; color: var(--chip-on-fg); }
.an-chip__x { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border: none; border-radius: 50%; background: rgba(44,110,209,0.18); color: var(--chip-on-fg); cursor: pointer; }
.an-clear { margin-top: 7px; border: none; background: none; padding: 0 4px; font-size: 12px; font-weight: 600; color: var(--blue-500); cursor: pointer; }

/* tab bar */
.an-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; align-self: flex-start; max-width: 100%; }
.an-tab { height: 30px; padding: 0 14px; border: none; border-radius: 999px; background: transparent; font-family: var(--font-body); font-size: 12.5px; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.an-tab:hover { background: var(--hover); }
.an-tab.is-on { background: var(--chip-on); color: var(--chip-on-fg); font-weight: 700; }

/* KPI tiles */
.an-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1000px) { .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.an-kpi { padding: 12px 14px 13px; gap: 7px; }
.an-kpi__row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.an-kpi__value { font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.an-kpi__note { font-size: 11.5px; color: var(--ink-4); }
.an-delta { display: inline-flex; align-items: center; gap: 3px; height: 19px; padding: 0 7px; border-radius: 999px; font-family: var(--font-display); font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; }
.an-nbadge { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-display); font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* chart legend */
.an-legends { display: flex; flex-wrap: wrap; gap: 10px; }
.an-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); }
.an-legend__dot { width: 9px; height: 9px; border-radius: 2px; }

/* funnel, alerts, goals */
.an-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 14px; align-items: start; }
.an-conv { padding-left: 2px; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.an-funnel-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px; border: none; border-radius: 9px; background: none; cursor: pointer; text-align: left; }
.an-funnel-row:hover { background: var(--hover); }
.an-funnel-row__label { flex: 0 0 132px; min-width: 0; font-size: 12.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-funnel-row__count { flex: none; min-width: 42px; text-align: right; font-family: var(--font-display); font-size: 13px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.an-bar { flex: 1; min-width: 0; height: 22px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.an-alert { display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px; border: 1px solid var(--line-soft); border-radius: 10px; }
.an-alert__dot { flex: none; margin-top: 5px; width: 7px; height: 7px; border-radius: 50%; }
.an-goals { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.an-goal__value { flex: none; font-family: var(--font-display); font-size: 12.5px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.an-goal__track { height: 7px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }

/* drill side panel */
.an-drill-overlay { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; }
.an-drill-scrim { position: absolute; inset: 0; background: rgba(8,18,32,0.45); }
.an-drill { position: relative; width: min(460px, 100%); height: 100%; display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.an-drill__head { display: flex; align-items: flex-start; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line-soft); }
.an-drill__body { flex: 1; overflow: auto; padding: 6px 10px 16px; }
.an-drill-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 8px; border: none; border-bottom: 1px solid var(--line-soft); background: none; text-align: left; cursor: pointer; }
.an-drill-row:hover { background: var(--hover); }

/* tables */
.an-tablewrap { overflow-x: auto; }
.an-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.an-th { padding: 0 8px 8px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
.an-th.is-left, .an-td.is-left { text-align: left; }
.an-th__btn { border: none; background: none; padding: 0; cursor: pointer; font-family: var(--font-display); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.an-th__btn:hover { color: var(--ink); }
.an-td { padding: 8px; text-align: right; color: var(--ink); border-bottom: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-table tbody tr:hover { background: var(--hover); }
.an-foot .an-td { font-weight: 700; border-bottom: none; border-top: 1px solid var(--line); color: var(--ink-2); }

/* bars, heatmap, misc */
.an-hrow { display: flex; align-items: center; gap: 10px; }
.an-hrow__label { flex: 0 0 150px; min-width: 0; font-size: 12.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-hrow__val { flex: none; min-width: 46px; text-align: right; font-family: var(--font-display); font-size: 12.5px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.an-heat { display: grid; grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 2px; align-items: center; }
.an-heat__hr { font-size: 9px; color: var(--ink-4); text-align: center; white-space: nowrap; overflow: visible; }
.an-heat__day { font-size: 10.5px; color: var(--ink-3); }
.an-heat__cell { height: 18px; border-radius: 3px; }
.an-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; }
.an-mini { margin-left: 5px; font-size: 9px; }
.an-stuck { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line-soft); border-radius: 9px; }
.an-linkbtn { align-self: flex-start; border: none; background: none; padding: 0; font-size: 12px; font-weight: 600; color: var(--blue-500); cursor: pointer; }
.an-x { border: none; background: none; font-size: 16px; line-height: 1; color: var(--ink-4); cursor: pointer; }
.an-x:hover { color: #b23b36; }
.an-qrow { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.an-qrow:last-child { border-bottom: none; }
.an-field { display: flex; flex-direction: column; gap: 6px; }
.an-input { height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-family: var(--font-body); font-size: 13px; color: var(--ink); outline: none; }
.an-input:focus { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(44,110,209,0.15); }