/* Reports & dashboards: report catalog, ABC analysis, warehouse dashboard. Use the tokens from styles.css / docs/DESIGN.md only. */

/* report catalog: tree on the left, the chosen report on the right */
.rep-layout { display: grid; grid-template-columns: minmax(240px, 300px) 1fr; gap: var(--space-4); align-items: start; min-height: 0; }
.rep-tree { padding: var(--space-3); max-height: calc(100vh - 140px); overflow: auto; position: sticky; top: 0; }
.rep-tree details { margin: 0 0 var(--space-2); }
.rep-tree summary { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); cursor: pointer; padding: var(--space-1) 0; }
.rep-tree details details { margin-left: var(--space-3); }
.rep-tree ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rep-link { width: 100%; text-align: left; background: none; border: 0; font: inherit; font-size: 13px; color: var(--text); padding: 6px 8px; border-radius: var(--radius-s); cursor: pointer; }
.rep-link:hover { background: var(--surface-2); }
.rep-link.active { background: var(--pine-soft); color: var(--pine); box-shadow: inset 3px 0 0 var(--accent); }
.rep-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rep-main { padding: var(--space-4); min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.rep-head h2 { margin: 0 0 var(--space-1); }
.rep-head p { margin: var(--space-1) 0 0; }
.rep-params-box { display: grid; gap: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-m); padding: var(--space-4); }
.rep-sets { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.rep-sets select { width: auto; min-width: 200px; }
.rep-actions { padding: 0; border: 0; }
.rep-params .field.wide { grid-column: 1 / -1; }
.rep-out { display: grid; gap: var(--space-3); min-width: 0; }
.rep-meta { margin: 0; }
.rep-result { display: grid; gap: var(--space-2); min-width: 0; }
.rep-sheet { display: grid; gap: var(--space-2); min-width: 0; }
.rep-header { border: 1px solid var(--border); border-radius: var(--radius-s); padding: var(--space-3); }

/* result grid */
.rep-grid { border: 1px solid var(--border); border-radius: var(--radius-s); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.rep-grid .grid-wrap { max-height: 60vh; }
.rep-table { table-layout: auto; }
.rep-table th, .rep-table td { max-width: 320px; }
.rep-filter-row th { height: auto; padding: 4px 6px; top: 40px; }
.rep-filter { height: 28px; font-size: 12px; padding: 0 6px; min-width: 60px; width: 100%; }
.rep-table tfoot td { font-weight: 700; background: var(--surface); border-top: 1px solid var(--border); height: 36px; }

/* dashboard */
.rep-dash { display: flex; flex-direction: column; gap: var(--space-4); }
.rep-dash-bar { padding: 0; border: 0; align-items: flex-end; }
.rep-dash-bar .field { width: 180px; }
.rep-dash-body { display: grid; gap: var(--space-4); }
.rep-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.rep-kpi { padding: var(--space-4); display: grid; gap: var(--space-1); }
.rep-kpi .display-num { font-size: 36px; line-height: 40px; }
.rep-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--space-4); }
.rep-card { padding: var(--space-4); min-width: 0; }
.rep-card h2 { font-size: 16px; margin: 0 0 var(--space-3); }
.rep-card h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin: var(--space-3) 0 var(--space-1); }
.rep-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* simple SVG charts */
.rep-chart { width: 100%; height: auto; display: block; }
.rep-chart-label, .rep-chart-value, .rep-chart-axis { font: 12px var(--font); fill: var(--text); }
.rep-chart-axis { fill: var(--text-muted); }
.rep-bar { fill: var(--pine); }
.rep-bar-bg { fill: var(--surface-2); }
.rep-bar-plan { fill: var(--surface-2); stroke: var(--text-muted); stroke-width: 1; }
.rep-axis { stroke: var(--border); }
.rep-legend { font-size: 12px; color: var(--text-muted); margin: var(--space-2) 0 0; }
.rep-key { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: middle; }
.rep-key.plan { background: var(--surface-2); border: 1px solid var(--text-muted); }
.rep-key.act { background: var(--pine); }

@media (max-width: 900px) {
  .rep-layout { grid-template-columns: 1fr; }
  .rep-tree { position: static; max-height: 40vh; }
  .rep-cards { grid-template-columns: 1fr; }
}
.rep-dash .toolbar select { width: auto; min-width: 160px; }