/*--------------------------------------------------------------
# DotEcho - Analytics page: charts, breakdown tables, insights and the report reader.
# Layered on dotecho.css and pages/app.css; only design-system tokens are used.
--------------------------------------------------------------*/

.de-scroll { overflow-x: auto; }
.de-chart { min-height: 240px; }

.de-table th.num, .de-table td.num { text-align: right; }
.de-breakdown { margin-top: 10px; }
.de-breakdown th, .de-breakdown td { padding: 7px 10px; font-size: .8rem; }

.de-swatch {
    display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px;
    vertical-align: middle; border: 1px solid rgba(0, 0, 0, .2);
}

/* Post rows: impressions, engagement and the rate at the right */
.de-metrics { display: flex; gap: 12px; align-items: center; font-size: .8rem; color: var(--text-muted); white-space: nowrap; flex: 0 0 auto; }
.de-metrics i { margin-right: 3px; }
.de-metrics strong { color: var(--text-strong); font-family: var(--nav-font); font-size: .88rem; }
.de-list-row .t a { color: var(--text-strong); }
.de-list-row .t a:hover { color: var(--emerald); }

/* Insights */
.de-insight { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--hairline); align-items: flex-start; }
.de-insight:last-child { border-bottom: 0; }
.de-insight .grow { flex: 1 1 auto; min-width: 0; }
.de-insight-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 4px; }
.de-insight-title { font-weight: 600; color: var(--text-strong); font-size: .92rem; }
.de-insight-body { font-size: .86rem; color: var(--text-soft); line-height: 1.55; margin: 4px 0 8px; white-space: pre-wrap; }
.de-evidence { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; margin: 0; }
.de-evidence dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); font-family: var(--nav-font); }
.de-evidence dd { margin: 0; font-size: .84rem; color: var(--text-strong); font-family: var(--nav-font); }

/* Learning reports */
.de-list-row.clickable { cursor: pointer; }
.de-list-row.clickable:hover { background: rgba(34, 197, 94, .05); border-radius: 8px; }
.de-report-detail { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hairline-strong); }
.de-report-detail h3 { font-size: 1rem; font-family: var(--nav-font); color: var(--text-strong); margin: 0 0 4px; }
.de-report-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
@media (max-width: 767px) { .de-report-lists { grid-template-columns: 1fr; } }
.de-report-lists h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: .6px; color: var(--text-faint); margin: 0 0 6px; font-family: var(--nav-font); }
.de-report-lists ul { margin: 0; padding-left: 18px; font-size: .86rem; color: var(--text-soft); line-height: 1.5; }