/*
 * «Аналитика» — раскладка модуля поверх токенов «графит и бордо» (tokens.css).
 * Свои классы — с приставкой an-; карточки, кнопки, поля и таблицы — из кита (fz-).
 */

/* ---------- Верх (вход прямо в модуль, без строки платформы) ---------- */
.an-top {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card); border-bottom: var(--border-width) solid var(--border);
}
.an-top .fz-brand { flex: 0 1 auto; }
.an-who { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.an-who-name { display: flex; flex-direction: column; min-width: 0; text-align: right; }
.an-who-name b { font: var(--fw-semibold) 13px/18px var(--font); }
.an-who-name span { font: var(--fw-regular) 12px/16px var(--font); color: var(--text-secondary); }
.an-ava {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--bordeaux); color: var(--text-on-dark); font: var(--fw-semibold) 13px/1 var(--font);
}
.an-exit { margin: 0; }
.an-exit .fz-iconbtn { width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; }

/* ---------- Вкладки-дашборды ---------- */
.an-tabs { background: var(--bg-card); border-bottom: var(--border-width) solid var(--border); }
.an-tabs-in {
  display: flex; gap: var(--space-1); max-width: 1280px; margin: 0 auto; padding: 0 var(--space-4);
  overflow-x: auto; scrollbar-width: thin;
}
.an-tab {
  position: relative; flex: none; display: flex; align-items: center; min-height: 48px;
  padding: 0 var(--space-3); color: var(--text-secondary); text-decoration: none; white-space: nowrap;
  font: var(--fw-regular) 15px/20px var(--font);
}
.an-tab:hover { color: var(--text-primary); }
.an-tab.is-on { color: var(--text-primary); font-weight: var(--fw-semibold); }
.an-tab.is-on::after {
  content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 0;
  height: 2px; background: var(--bordeaux);
}
.an-tab--aux { margin-left: auto; }

/* ---------- Страница ---------- */
.an-main { max-width: 1280px; margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-6); }
.an-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-4); }
.an-head .fz-h1 { flex: 1 1 auto; }
.an-board > * + * { margin-top: var(--space-3); }

.an-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
@media (min-width: 720px) {
  .an-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .an-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .an-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Показатели (FZ.kpi) */
.an-kpi { display: flex; flex-direction: column; gap: var(--space-1); }
.an-kpi-label { font: var(--fw-regular) 13px/18px var(--font); color: var(--text-secondary); }
.an-kpi-value { font: var(--fw-semibold) 24px/30px var(--font); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-kpi-hint { font: var(--fw-regular) 12px/16px var(--font); color: var(--text-secondary); }
.an-kpi-delta.is-up { color: var(--success); }
.an-kpi-delta.is-down { color: var(--danger-text); }

/* Графики (FZ.chart) */
.an-chart { position: relative; height: 320px; }
.an-chart--tall { height: 420px; }
.an-chart canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

/* Период (FZ.period) */
.an-period { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); }
.an-period .fz-field { width: 168px; }
.an-period .fz-btn { min-height: 44px; }
.an-period .fz-btn.is-on { border-color: var(--graphite); }

/* Таблицы (FZ.table) */
.an-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fz-table th.an-num { text-align: right; }
.an-note { margin-top: var(--space-2); }

/* Пусто, ошибка, загрузка */
.an-error { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3);
  border-radius: var(--radius-control); background: var(--danger-bg); color: var(--text-primary);
  font: var(--fw-regular) 13px/18px var(--font); }
.an-loading { color: var(--text-secondary); font: var(--fw-regular) 13px/18px var(--font); }

/* Источники */
.an-src td:first-child { font-weight: var(--fw-semibold); }
.an-src details summary { cursor: pointer; color: var(--bordeaux); }
.an-src ul { margin: var(--space-2) 0 0; padding-left: var(--space-4); color: var(--text-secondary);
  font: var(--fw-regular) 13px/18px var(--font); }

/* Вход */
.an-guest { min-height: 100vh; display: grid; place-items: center; padding: var(--space-4); }
.an-login { width: 100%; max-width: 400px; }
.an-login form { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.an-login .an-or { margin: var(--space-3) 0 0; }

@media (max-width: 720px) {
  .an-main { padding: var(--space-4) var(--space-4) var(--space-6); }
  .an-who-name { display: none; }
  .an-chart { height: 260px; }
}