/* Розширена аналітика: 28-денні метрики + демографія аудиторії (IG/FB).
   Завантажується після style.css — токени --panel/--border-soft/--radius/… звідти. */

.apx-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  margin-top: 10px;
}

/* ── per-network group ─────────────────────────────────────────────────── */
.apx-net {
  background: linear-gradient(180deg, var(--panel-2, #16161c), var(--panel, #121218));
  border: 1px solid var(--border-soft, rgba(255, 255, 255, .06));
  border-radius: var(--radius, 14px);
  padding: 16px 18px 18px;
  box-shadow: var(--shadow-soft, 0 2px 10px rgba(0, 0, 0, .25));
}
.apx-net-h {
  font-size:  var(--fs-13);
  font-weight: 600;
  color: var(--text, #eaeaea);
  margin-bottom: 12px;
}
.apx-net-head { display: inline-flex; align-items: center; gap: 7px; }

/* ── extended metric tiles ─────────────────────────────────────────────── */
.apx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-12);
}
.apx-tile {
  background: var(--panel, #121218);
  border: 1px solid var(--border-soft, rgba(255, 255, 255, .06));
  border-radius: var(--radius-sm);
  padding: 14px 14px 12px;
  min-height: 78px;
  box-sizing: border-box;
  transition: transform var(--t-fast, .12s) var(--ease, ease), border-color var(--t-fast, .12s);
}
.apx-tile:hover {
  transform: translateY(-2px);
  border-color: var(--accent-t-edge-hi);
}
.apx-ic { font-size:  var(--fs-18); opacity: .9; margin-bottom: 6px; }
.apx-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--text, #fff);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.apx-lbl { font-size:  var(--fs-11); color: var(--text-mute, #8a8a94); margin-top: 4px; }

/* ── demographics ──────────────────────────────────────────────────────── */
.apx-demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--sp-14);
}
.apx-demo-card {
  background: var(--panel, #121218);
  border: 1px solid var(--border-soft, rgba(255, 255, 255, .06));
  border-radius: var(--radius-sm);
  padding: 13px 14px 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.apx-demo-h {
  font-size:  var(--fs-11);
  font-weight: 600;
  color: var(--text-mute, #8a8a94);
  margin-bottom: 10px;
}

/* ── horizontal bars (used by gender/age + geo lists) ──────────────────── */
.apx-bars { display: flex; flex-direction: column; gap: var(--sp-8); }
.apx-bar-row {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  align-items: center;
  gap: var(--sp-10);
}
.apx-bar-k {
  font-size:  var(--fs-12);
  color: var(--text-dim, #b6b6c0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.apx-bar-track {
  height: 8px;
  border-radius: var(--radius-xs);
  background: var(--border-soft, rgba(255, 255, 255, .06));
  overflow: hidden;
}
.apx-bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-xs);
  /* Той самий вигляд смуги значення, що й у .ana-posteff-bar. Раніше
     обидві були градієнтом «синій LinkedIn → рожевий Instagram»; тепер
     обидві — один бурштин. */
  background: var(--chart-1);
  transition: width var(--t-med, .3s) var(--ease, ease);
}
.apx-bar-v {
  font-size:  var(--fs-12);
  font-weight: 600;
  color: var(--text, #eaeaea);
  font-variant-numeric: tabular-nums;
  min-width: 40px;
  text-align: right;
}

.apx-demo-empty {
  padding: 18px;
  text-align: center;
  color: var(--text-mute, #8a8a94);
  font-size:  var(--fs-13);
  background: var(--panel, #121218);
  border: 1px dashed var(--border-soft, rgba(255, 255, 255, .08));
  border-radius: var(--radius-sm);
}

/* ── locked demographics (unlocks at ≥100 followers) ───────────────────── */
.apx-net-locked .apx-net-h {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  flex-wrap: wrap;
}
.apx-lock-badge {
  font-size:  var(--fs-11);
  font-weight: 600;
  color: var(--warn, #ffcf8b);
  background: rgba(245, 185, 66, .12);
  border: 1px solid rgba(245, 185, 66, .28);
  border-radius: 999px;
  padding: 3px 10px;
}
.apx-lock-progress { margin: 4px 0 14px; }
.apx-lock-progress-track {
  height: 8px;
  border-radius: var(--radius-xs);
  background: var(--border-soft, rgba(255, 255, 255, .06));
  overflow: hidden;
}
.apx-lock-progress-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-xs);
  /* Solid fill, matching every other progress bar in the app (onboarding,
     "Інформація" progress header) — this was the only gradient one, and the
     two-tone orange didn't track the --warn token across themes. */
  background: var(--warn, #eab04a);
  transition: width var(--t-med, .3s) var(--ease, ease);
}
.apx-lock-progress-lbl {
  margin-top: 7px;
  font-size:  var(--fs-12);
  color: var(--text-mute, #8a8a94);
  font-variant-numeric: tabular-nums;
}
.apx-lock-progress-lbl b { color: var(--text, #eaeaea); }

.apx-demo-locked { position: relative; overflow: hidden; }
.apx-demo-locked .apx-demo-h { opacity: .85; }
.apx-lock-body {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 0 2px;
}
.apx-lock-ic {
  font-size: 20px;
  opacity: .55;
  flex: 0 0 auto;
}
.apx-lock-desc {
  font-size:  var(--fs-12);
  line-height: 1.4;
  color: var(--text-mute, #8a8a94);
}

/* ── "Коли аудиторія онлайн" mini 24h histogram ─────────────────────────── */
.apx-hh-top{ display: flex; gap: var(--sp-8); flex-wrap: wrap; margin-bottom: 10px; }
.apx-hh-hist{
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  align-items: end;
  gap: 3px;
  height: 60px;
  padding: 2px 0;
}
.apx-hh-bar{
  background: var(--chart-1);
  border-radius: 3px 3px 1px 1px;
  min-height: 3px;
  cursor: help;
  transition: opacity var(--t-fast, .12s) var(--ease, ease);
}
.apx-hh-bar:hover{ opacity: .75; }

@media (max-width: 640px) {
  .apx-bar-row { grid-template-columns: 64px 1fr auto; }
  .apx-hh-hist{ height: 46px; }
}

/* Рядок ефективності поста веде в сам пост — раніше тут був глухий кут. */
.ana-posteff-row.is-clickable{ cursor: pointer; border-radius: var(--ctl-radius-sm);
  margin: 0 -6px; padding: 2px 6px; }
.ana-posteff-row.is-clickable:hover{ background: var(--fill-1); }
.ana-posteff-row.is-clickable:focus-visible{ outline: 2px solid var(--accent);
  outline-offset: 1px; }

/* ── вкладки мереж ───────────────────────────────────────────────────── */
.ana-tabs { display: flex; gap: var(--sp-6); flex-wrap: wrap; margin: 0 0 18px; }
.ana-tabs[hidden] { display: none; }
.ana-tab { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-soft);
  background: var(--panel-2); color: var(--text-dim); font: 600 var(--fs-13)/1 var(--sans); }
.ana-tab:hover { color: var(--text); }
.ana-tab.on { background: var(--accent-wash-3); color: var(--accent-hi);
  border-color: transparent; }
.ana-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── ЩО З ЦЬОГО РОБИТИ ────────────────────────────────────────────────────
   Блок висновків над графіком. Виглядає навмисно НЕ як плитка показника:
   плитки поруч — це те, що виміряли, а це — те, що з виміряного випливає.
   Різниця має читатись до читання слів, інакше висновок загубиться серед
   чисел як ще одне число.

   Тому рядки на всю ширину з лівою бурштиновою рискою і жодного числа
   всередині. */
.ana-take{
  display: flex; flex-direction: column; gap: 1px;
  margin: 14px 0 0; border-radius: var(--radius);
  background: var(--fill-0); overflow: hidden;
}
.ana-take-row{
  display: flex; align-items: center; gap: var(--sp-14);
  padding: 13px 16px 13px 14px;
  border-left: 2px solid var(--accent-solid);
  background: var(--fill-1);
}
.ana-take-txt{ display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; flex: 1; }
.ana-take-txt b{ font: 700 var(--fs-13)/1.35 var(--sans); color: var(--text); }
.ana-take-txt i{ font: 500 var(--fs-12)/1.45 var(--sans); font-style: normal; color: var(--text-mute); }
/* Кнопка тиха: бурштин на екрані вже витрачено на риску зліва, а головна
   дія розділу — «Оновити дані» вгорі. Три бурштинові предмети в одному
   екрані означають, що жоден не головний. */
.ana-take-go{ flex: none; }

@media (max-width: 700px){
  .ana-take-row{ flex-direction: column; align-items: flex-start; gap: var(--sp-10); }
  .ana-take-go{ align-self: stretch; }
}