/* Executive dashboard layout (components live in styles/components.css). */
.dashboard-body { display: flex; flex-direction: column; gap: 18px; }
.dashboard-body > .stat-grid,
.dashboard-body .card { margin-bottom: 0; }
/* Two boxes per row, the wider one first (as in workshop_template.html). */
.chart-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; }
.dashboard .card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dashboard .chart-slot { min-height: 240px; }
.dash-custom { width: 260px; max-width: 100%; }
/* The table view takes the chart's place at the chart's height: its own scroll and sticky
   header, three columns that always fit (no mobile card flip, no 680px table minimum). */
.trend-table { max-height: 300px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.trend-table .table { min-width: 0; }
.trend-table:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.row-link { cursor: pointer; }
.row-link:hover td { background: var(--bg-2); }
.row-link:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }

@media (max-width: 1100px) {
  .chart-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .dashboard .filter-meta { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* Boxes in a row share a height; the donut sits in the middle of its box. */
.chart-grid > .card { display: flex; flex-direction: column; }
.chart-grid > .card > .card-body { flex: 1; }
.card-body-center { display: flex; align-items: center; }
.card-body-center > * { width: 100%; }