/* Canonical analytics workspace styles. Stage 3B: calm operational dashboard. */
.analytics-view-v2 { padding: 0 1px 18px; }
.analytics-page-head { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.analytics-page-copy { min-width: 0; display: grid; gap: 2px; }
.analytics-page-copy b { font-size: 13px; }
.analytics-page-copy span { color: var(--muted); font-size: 10.5px; }
.analytics-top-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.analytics-select, .micro-select { width: auto; min-width: 130px; height: 30px; font-size: 11px; }
.analytics-date-range { display: flex; align-items: center; gap: 4px; }
.analytics-date-range > span { color: var(--muted); }
.compact-date { width: 128px; }
.analytics-filter-button { min-height: 30px; font-size: 11px; }

/* One flat scorecard instead of seven competing cards. */
.analytics-kpi-strip { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); margin-bottom: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.analytics-kpi-card { min-width: 0; min-height: 72px; display: grid; grid-template-columns: 22px minmax(0,1fr); align-items: center; gap: 8px; padding: 10px 11px; border-right: 1px solid var(--line); background: transparent; }
.analytics-kpi-card:last-child { border-right: 0; }
.kpi-icon { width: 22px; height: 22px; display: grid; place-items: center; color: var(--muted); }
.kpi-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.analytics-kpi-card.positive .kpi-icon { color: var(--success); }
.analytics-kpi-card.warning .kpi-icon { color: var(--warning); }
.kpi-copy { min-width: 0; display: grid; gap: 1px; }
.kpi-copy small { overflow: hidden; color: var(--muted); font-size: 9.5px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.kpi-copy b { color: var(--text); font-size: 17px; line-height: 1.12; letter-spacing: -.02em; }
.kpi-copy span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 9px; }

.analytics-section-label { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 7px; padding: 0 2px; }
.analytics-section-label b { font-size: 11.5px; }
.analytics-section-label span { color: var(--muted); font-size: 10px; }
.analytics-dashboard-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; align-items: stretch; }
.analytics-card { min-width: 0; min-height: 156px; padding: 12px; border-radius: 9px; }
.analytics-card[hidden] { display: none; }
.analytics-card-sparse { min-height: 156px; }
.analytics-card-sparse canvas { opacity: .55; }
.trend-card { grid-column: 1 / -1; min-height: 260px; }
.trend-card.analytics-card-sparse { min-height: 190px; }
.manager-table-card { grid-column: 1 / -1; }
.chart-wrap { min-width: 0; overflow: hidden; }
.chart-wrap canvas { width: 100%; max-width: 100%; }
.analytics-card .section-title { min-height: 28px; padding-bottom: 6px; margin-bottom: 7px; border-bottom: 1px solid var(--line); }
.analytics-card .section-title h3 { font-size: 11.5px; font-weight: 780; }
.trend-legend { display: flex; gap: 12px; margin-bottom: 2px; color: var(--text-2); font-size: 10px; font-weight: 700; }
.trend-legend span { display: inline-flex; align-items: center; gap: 5px; }
.trend-legend i { width: 12px; height: 3px; border-radius: 999px; }
.legend-blue { background: #2563eb; } .legend-green { background: #10b981; }

.donut-layout { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 14px; align-items: center; }
.donut-chart { --donut-1:#ef4444; --donut-2:#f59e0b; --donut-3:#10b981; --donut-4:#2563eb; --donut-5:#8b5cf6; width: 108px; height: 108px; display: grid; place-items: center; border-radius: 50%; }
.donut-chart > div { width: 72px; height: 72px; display: grid; place-items: center; align-content: center; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.donut-chart b { font-size: 17px; line-height: 1; } .donut-chart span { color: var(--muted); font-size: 9.5px; }
.donut-legend { min-width: 0; display: grid; gap: 7px; }
.donut-legend div { min-width: 0; display: grid; grid-template-columns: 9px minmax(0,1fr) auto auto; gap: 5px; align-items: center; color: var(--text-2); font-size: 10.5px; }
.donut-legend span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .donut-legend small { color: var(--muted); }
.dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; }
.dot-1 { background:#ef4444; } .dot-2 { background:#f59e0b; } .dot-3 { background:#10b981; } .dot-4 { background:#2563eb; } .dot-5 { background:#8b5cf6; }
.source-donut-block .donut-chart { --donut-1:#2563eb; --donut-2:#10b981; --donut-3:#8b5cf6; --donut-4:#f59e0b; --donut-5:#06b6d4; }
.source-donut-block .donut-layout { grid-template-columns: 108px minmax(0,240px); justify-content: start; }
.follow-list, .rank-list, .clean-bars, .bars { display: grid; gap: 8px; }
.follow-row { min-height: 27px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-2); font-size: 11px; font-weight: 720; }
.follow-row span { display: inline-flex; align-items: center; gap: 7px; } .follow-row i { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); }
.follow-row.red i { background: var(--danger); } .follow-row.green i { background: var(--success); }
.rank-row { min-width: 0; display: grid; grid-template-columns: 16px 26px minmax(80px,1fr) minmax(80px,1.4fr) auto; gap: 7px; align-items: center; }
.rank-num { color: var(--muted); font-size: 10px; font-weight: 800; }
.rank-avatar { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-3); color: var(--text-2); font-size: 9px; font-weight: 900; }
.rank-name { min-width: 0; display: grid; gap: 0; } .rank-name b,.rank-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-name b { font-size: 11px; } .rank-name small { color: var(--muted); font-size: 9.5px; }
.rank-track,.bar-track { height: 4px; overflow: hidden; border-radius: 999px; background: var(--surface-3); }
.rank-track i,.bar-fill { display:block; height:100%; border-radius:999px; background:var(--accent); }
.clean-bar-row,.bar-row { min-width:0; display:grid; grid-template-columns:minmax(90px,1fr) minmax(100px,1.5fr) auto; gap:7px; align-items:center; font-size:10.5px; }
.clean-bar-row>span,.bar-row>span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.clean-bar-row .mini,.bar-row .mini { grid-column:2/-1; margin-top:-5px; color:var(--muted); font-size:9.5px; }
.manager-table-v2 { overflow-x:auto; }
.manager-table-v2 .row { min-width:650px; display:grid; grid-template-columns:1.35fr repeat(5,.8fr); gap:7px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); font-size:10.5px; }
.manager-table-v2 .row.head { position:sticky; top:0; background:var(--surface); color:var(--muted); font-size:9.5px; font-weight:800; }
.insights { display:grid; gap:0; }
.insight { display:grid; grid-template-columns:12px minmax(0,1fr); gap:4px; padding:8px 0; border-bottom:1px solid var(--line); color:var(--text-2); font-size:10.5px; }
.insight:last-child { border-bottom:0; }
.insight b { color:var(--accent); }
@media (max-width: 1280px) { .analytics-kpi-strip { grid-template-columns:repeat(4,minmax(0,1fr)); } .analytics-kpi-card:nth-child(4n) { border-right:0; } .analytics-kpi-card:nth-child(n+5) { border-top:1px solid var(--line); } }
@media (max-width: 900px) { .analytics-page-head,.analytics-top-actions { display:grid; grid-template-columns:1fr; } .analytics-page-copy { display:none; } .analytics-date-range { justify-content:stretch; } .analytics-kpi-strip,.analytics-dashboard-grid { grid-template-columns:1fr; } .analytics-kpi-card { border-right:0; border-bottom:1px solid var(--line); } .analytics-kpi-card:last-child { border-bottom:0; } .analytics-card,.trend-card,.manager-table-card { grid-column:auto; } .donut-layout { grid-template-columns:1fr; justify-items:center; } }