/* ============================================================================
 * Аналитика гильдии — ОБЩИЕ стили для mini-app и web (правка в одном месте).
 * Подключается <link href="/shared/guildAnalytics.css"> в обоих index.html.
 * ==========================================================================*/
.ga-view { --ga-accent: #38bdf8; --ga-ok: #34d399; --ga-bad: #f87171; --ga-warn: #fbbf24; padding: 12px 12px 40px; max-width: 760px; margin: 0 auto; }
.ga-head { display: flex; align-items: center; margin-bottom: 14px; }
.ga-head-title { display: flex; align-items: center; gap: 12px; }
.ga-head-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--ga-accent); background: linear-gradient(135deg, rgba(56,189,248,0.18), rgba(56,189,248,0.04)); border: 1px solid rgba(56,189,248,0.3); }
.ga-head-ic svg { width: 22px; height: 22px; }
.ga-head-txt { display: flex; flex-direction: column; }
.ga-title { font-size: 18px; font-weight: 700; color: var(--text-primary, #fff); line-height: 1.1; }
.ga-sub { font-size: 12px; color: var(--text-secondary, #8b8b8b); }

.ga-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 16px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.ga-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border-color, #2a2a4a); background: var(--bg-card, #16213e); color: var(--text-secondary, #8b8b8b); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all .15s; }
.ga-tab:hover { color: var(--text-primary, #fff); border-color: rgba(56,189,248,0.4); }
.ga-tab.active { color: #fff; background: linear-gradient(135deg, rgba(56,189,248,0.22), rgba(56,189,248,0.06)); border-color: var(--ga-accent); }
.ga-tab-ic { font-size: 14px; }

.ga-loading, .ga-empty, .ga-empty-sm { text-align: center; color: var(--text-secondary, #8b8b8b); padding: 28px 12px; font-size: 14px; }
.ga-empty span { font-size: 12px; opacity: 0.7; }
.ga-empty-sm { padding: 14px; font-size: 13px; }

/* Сводные карточки дня */
.ga-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.ga-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; border-radius: 14px; background: var(--bg-card, #16213e); border: 1px solid var(--border-color, #2a2a4a); position: relative; overflow: hidden; }
.ga-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.ga-card--ok::before { background: var(--ga-ok); }
.ga-card--bad::before { background: var(--ga-bad); }
.ga-card--pct::before { background: var(--ga-accent); }
.ga-card-num { font-size: 26px; font-weight: 800; color: var(--text-primary, #fff); line-height: 1; }
.ga-card-num small { font-size: 14px; font-weight: 600; color: var(--text-secondary, #8b8b8b); }
.ga-card-lbl { font-size: 11px; color: var(--text-secondary, #8b8b8b); }

/* Секции */
.ga-section { background: var(--bg-card, #16213e); border: 1px solid var(--border-color, #2a2a4a); border-radius: 14px; padding: 14px; margin-bottom: 14px; }
.ga-section-h { font-size: 14px; font-weight: 700; color: var(--text-primary, #fff); margin-bottom: 12px; display: flex; align-items: baseline; gap: 8px; }
.ga-section-sub { font-size: 11px; font-weight: 500; color: var(--text-secondary, #8b8b8b); }

/* Тренд (SVG) */
.ga-trend { width: 100%; height: 150px; display: block; }
.ga-trend-line { stroke: var(--ga-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ga-trend-dots circle { fill: var(--ga-accent); }
.ga-trend-axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-secondary, #8b8b8b); margin-top: 2px; }

/* Топ-нарушители */
.ga-offenders, .ga-today { display: flex; flex-direction: column; gap: 8px; }
.ga-off-row, .ga-today-row { display: flex; align-items: center; gap: 10px; }
.ga-off-rank { flex: 0 0 20px; font-size: 13px; font-weight: 700; color: var(--ga-accent); text-align: center; }
.ga-off-name, .ga-today-name { flex: 0 0 34%; min-width: 0; font-size: 13px; color: var(--text-primary, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ga-off-bar { flex: 1 1 auto; height: 8px; border-radius: 6px; background: rgba(255,255,255,0.06); overflow: hidden; }
.ga-off-fill { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--ga-warn), var(--ga-bad)); }
.ga-off-val { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--text-primary, #fff); }
.ga-off-val small { font-weight: 500; color: var(--text-secondary, #8b8b8b); margin-left: 2px; }

/* Сегодня не сдали */
.ga-today-bar { flex: 1 1 auto; height: 8px; border-radius: 6px; background: rgba(255,255,255,0.06); overflow: hidden; }
.ga-today-fill { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--ga-bad), var(--ga-warn)); }
.ga-today-val { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--text-secondary, #8b8b8b); }

/* Хитмап члены × дни */
/* Селектор периода (День/Неделя/…/Полгода) — общий для сайта и mini-app.
   На сайте web.css задаёт свои цвета через var(--accent) — эти правила остаются
   базовыми (mini-app раньше селектор вообще не показывал). */
.ga-period { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.ga-period-btn { padding: 6px 14px; background: rgba(255,255,255,0.05); border: 1px solid var(--border-color, #2a2a4a); border-radius: 8px;
    cursor: pointer; color: var(--text-secondary, #8b8b8b); font-size: 13px; transition: all .1s; }
.ga-period-btn:hover { border-color: var(--ga-accent); }
.ga-period-btn.is-active { background: var(--ga-accent); color: #0b1020; border-color: var(--ga-accent); font-weight: 700; }

/* Карта несдач: фиксированная ширина клетки (--ga-hm-cw) × число дней (--ga-hm-cols),
   шапка с датами сверху, горизонтальный скролл при длинном периоде. Имя игрока —
   sticky-колонка, чтобы при скролле было видно, чья строка. */
.ga-hm-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; }
.ga-heatmap { display: flex; flex-direction: column; gap: 4px; width: max-content; min-width: 100%; }
.ga-hm-row { display: flex; align-items: center; gap: 8px; }
.ga-hm-row--head { align-items: flex-end; }
.ga-hm-name { flex: 0 0 90px; font-size: 11px; color: var(--text-secondary, #8b8b8b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    position: sticky; left: 0; z-index: 2; background: var(--bg-card, #16213e); }
.ga-hm-cells { display: grid; grid-template-columns: repeat(var(--ga-hm-cols, 21), var(--ga-hm-cw, 14px)); gap: 3px; }
.ga-hm-cell { width: 100%; min-width: 0; height: 16px; border-radius: 3px; display: inline-block; }
.ga-hm-month { font-size: 10px; font-weight: 600; color: var(--text-secondary, #8b8b8b); white-space: nowrap; overflow: hidden;
    border-left: 1px solid var(--border-color, #2a2a4a); padding-left: 3px; line-height: 1.4; }
.ga-hm-day { font-size: 9px; color: var(--text-secondary, #8b8b8b); text-align: center; line-height: 1.3; overflow: visible; white-space: nowrap; }
.ga-hm-ok { background: rgba(52,211,153,0.22); }
.ga-hm-part { background: var(--ga-warn); }
.ga-hm-miss { background: var(--ga-bad); }
.ga-hm-legend { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-secondary, #8b8b8b); margin-top: 10px; flex-wrap: wrap; }
.ga-hm-legend .ga-hm-cell { flex: 0 0 14px; width: 14px; min-width: 14px; height: 14px; }

/* Заглушки «Скоро» */
.ga-placeholder { text-align: center; padding: 28px 18px 32px; background: var(--bg-card, #16213e); border: 1px dashed var(--border-color, #2a2a4a); border-radius: 16px; position: relative; }
.ga-ph-badge { position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 700; color: var(--ga-warn); background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.3); padding: 3px 9px; border-radius: 999px; }
.ga-ph-ic { font-size: 44px; margin-bottom: 8px; opacity: 0.9; }
.ga-ph-title { font-size: 17px; font-weight: 700; color: var(--text-primary, #fff); margin-bottom: 8px; }
.ga-ph-desc { font-size: 13px; color: var(--text-secondary, #8b8b8b); line-height: 1.5; max-width: 440px; margin: 0 auto 20px; }
.ga-ph-demo { max-width: 420px; margin: 0 auto; text-align: left; background: rgba(255,255,255,0.03); border: 1px solid var(--border-color, #2a2a4a); border-radius: 12px; padding: 14px; opacity: 0.85; }
.ga-ph-demo-h { font-size: 12px; font-weight: 600; color: var(--text-secondary, #8b8b8b); margin-bottom: 12px; }
.ga-ph-demo-h span { opacity: 0.6; }
.ga-ph-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.ga-ph-name { flex: 0 0 45%; min-width: 0; font-size: 12px; color: var(--text-primary, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ga-ph-bar { flex: 1 1 auto; height: 8px; border-radius: 6px; background: rgba(255,255,255,0.06); overflow: hidden; }
.ga-ph-fill { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--ga-accent), #818cf8); }
.ga-ph-val { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--text-secondary, #8b8b8b); }

.utility-icon--analytics { color: #38bdf8; }
@media (max-width: 480px) { .ga-hm-name { flex-basis: 64px; } .ga-card-num { font-size: 22px; } }