/* ==========================================================================
   pages/ga-analytics.css — Google Analytics dashboard (UI shell).
   Mounts in the brand-view Optimize "Analytics" sub-tab. Light-SaaS
   aesthetic, design tokens, #6D28D9 accent. Per-engine brand colors +
   chart palette are applied by JS (gaAnalytics.js) via data-color — never
   hardcoded here.
   ========================================================================== */

/* === Optimize sub-tabs (Optimize | Analytics) === */
.opt-subtabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 0.5px solid var(--border);
}

.opt-subtab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 8px 12px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-m);
  cursor: pointer;
}

.opt-subtab:hover { color: var(--text); }
.opt-subtab.active { color: var(--accent); border-bottom-color: var(--accent); }

.opt-subpanel { display: none; }
.opt-subpanel.active { display: block; }

/* === STATE 1 — connect screen === */
.ga-connect {
  display: flex;
  justify-content: center;
  padding: 48px 16px;
}

.ga-connect__card {
  width: 100%;
  max-width: 420px;
  text-align: center;
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
}

.ga-connect__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: 14px;
  background: var(--accent-light);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ga-connect__icon-svg { width: 26px; height: 26px; }

.ga-connect__title {
  margin: 0 0 6px;
  font-family: var(--fh);
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
}

.ga-connect__value {
  margin: 0 0 22px;
  font-size: 13px;
  color: var(--text-m);
  line-height: 1.5;
}

.ga-connect__btn {
  appearance: none;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  padding: 11px 22px;
  cursor: pointer;
}

.ga-connect__btn:hover { background: var(--accent-hover); }

/* === STATE 2 — dashboard === */
.ga-dash { display: block; }

/* Header — property status + date range */
.ga-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.ga-head__status { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.ga-head__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.ga-head__prop { font-weight: 600; color: var(--text); }
.ga-head__sync { color: var(--text-d); }

.ga-head__range {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-m);
  background: var(--surface2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px 12px;
}

/* === Generic border-card === */
.ga-card {
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
}

.ga-card__label { font-size: 11.5px; color: var(--text-m); margin-bottom: 5px; }
.ga-card__value { font-family: var(--fh); font-size: 21px; font-weight: 700; color: var(--text); line-height: 1.1; }
.ga-card__note  { font-size: 11px; color: var(--text-d); }
.ga-card__title { font-size: 13px; font-weight: 700; color: var(--text); }

.ga-delta { display: inline-block; margin-top: 4px; font-size: 11.5px; font-weight: 600; }
.ga-delta--pos { color: var(--green); }
.ga-delta--neg { color: var(--red); }

/* === AI-referral hero === */
.ga-hero {
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 16px;
}

.ga-hero__strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface2);
  border-bottom: 0.5px solid var(--border);
}

.ga-hero__spark { color: var(--accent); display: inline-flex; flex-shrink: 0; }
.ga-hero__spark-svg { width: 20px; height: 20px; }
.ga-hero__titles { flex: 1; min-width: 0; }
.ga-hero__title { font-size: 14px; font-weight: 700; color: var(--text); }
.ga-hero__sub { font-size: 11.5px; color: var(--text-m); }

.ga-hero__badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: var(--bg);
  border: 0.5px solid var(--accent);
  border-radius: 999px;
  padding: 4px 9px;
}

.ga-hero__body { display: grid; grid-template-columns: 1fr 1.25fr; }
.ga-hero__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; }
.ga-hero__right { border-left: 0.5px solid var(--border); padding: 16px; }
.ga-hero__breakdown { display: flex; flex-direction: column; gap: 13px; }

/* Per-engine breakdown row */
.ga-eng { display: flex; align-items: center; gap: 10px; }
.ga-eng__icon {
  width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--bg); font-size: 11px; font-weight: 700; /* bg = brand color via JS */
}
.ga-eng__name { width: 68px; flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--text); }
.ga-eng__track { flex: 1; height: 7px; background: var(--surface2); border-radius: 4px; overflow: hidden; }
.ga-eng__fill { display: block; height: 100%; border-radius: 4px; } /* width + bg via JS */
.ga-eng__val { flex-shrink: 0; min-width: 62px; text-align: right; font-size: 12px; font-weight: 600; color: var(--text); }
.ga-eng__pct { margin-left: 5px; font-weight: 500; color: var(--text-d); }

/* === Standard metrics row === */
.ga-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

/* === Generic rows === */
.ga-row { display: grid; gap: 12px; margin-bottom: 16px; }
.ga-row--trend { grid-template-columns: 1.6fr 1fr; }
.ga-row--three { grid-template-columns: 1fr 1fr 1fr; }
.ga-row--two   { grid-template-columns: 1fr 1fr; }

.ga-card--chart { display: flex; flex-direction: column; }
.ga-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }

.ga-chart { position: relative; height: 220px; }

/* Custom chart legend */
.ga-legend { display: flex; gap: 14px; }
.ga-legend__item { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-m); }
.ga-legend__dot { width: 9px; height: 9px; border-radius: 50%; } /* bg via JS (chart palette) */

/* Devices */
.ga-devices { display: flex; align-items: center; gap: 14px; }
.ga-devices__chart { position: relative; width: 130px; height: 130px; flex-shrink: 0; }
.ga-devices__legend { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.ga-devices__row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.ga-devices__dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } /* bg via JS */
.ga-devices__name { flex: 1; color: var(--text); }
.ga-devices__pct { font-weight: 600; color: var(--text); }

/* === List cards (channels / pages / countries / cities / territories) === */
.ga-card--list { display: flex; flex-direction: column; }
.ga-list { display: flex; flex-direction: column; gap: 11px; margin-top: 12px; }
.ga-list__row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.ga-list__row--kv { justify-content: space-between; }
.ga-list__label { color: var(--text); white-space: nowrap; }
.ga-list__label--mono { font-family: var(--fm); font-size: 11.5px; color: var(--text-m); }
.ga-list__label--trunc { overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.ga-list__track { flex: 1; height: 6px; background: var(--surface2); border-radius: 4px; overflow: hidden; }
.ga-list__fill { display: block; height: 100%; border-radius: 4px; } /* width + bg via JS */
.ga-list__val { flex-shrink: 0; font-weight: 600; color: var(--text); }

/* === Responsive reflow === */
@media (max-width: 1100px) {
  .ga-row--trend { grid-template-columns: 1fr; }
  .ga-metrics { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .ga-hero__body { grid-template-columns: 1fr; }
  .ga-hero__right { border-left: 0; border-top: 0.5px solid var(--border); }
  .ga-row--three, .ga-row--two { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .ga-metrics { grid-template-columns: 1fr; }
  .ga-hero__stats { grid-template-columns: 1fr 1fr; }
}

/* === Phase-1 wire: states, property picker, AI sample marker === */
.ga-state {
  padding: 40px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-m);
}
.ga-state--err { color: var(--red); }

.ga-picker__select {
  width: 100%;
  margin-bottom: 16px;
  padding: 9px 12px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
}

/* AI-referral is sample data until Phase 2 — quiet violet-tinted chip. */
.ga-hero__sample {
  flex-shrink: 0;
  margin-right: 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-light);
  border-radius: 999px;
  padding: 4px 9px;
}

/* === Disconnect action (admin-only; hidden via .capability-hidden) === */
.ga-head__actions { display: flex; align-items: center; gap: 10px; }

.ga-head__disconnect {
  appearance: none;
  background: none;
  border: 0;
  padding: 5px 9px;
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-d);
  cursor: pointer;
}

.ga-head__disconnect:hover { color: var(--red); background: var(--surface2); }