/* Composable dashboard cards. See DASHBOARD_GUIDE.md. */
.dashboard-demo { margin-top:24px; }
.dashboard-controls { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px; margin-bottom:24px; }
.dashboard-controls .field { margin-bottom:0; }
.dashboard-controls > div:first-child { display:grid; gap:6px; }
.dashboard-card { background:var(--pv-surface); border:1px solid var(--pv-border); border-radius:16px; padding:24px; min-width:0; display:flex; flex-direction:column; gap:16px; }
.dashboard-card-title { font-size:16px; line-height:24px; font-weight:600; }
.dashboard-card > .button,.dashboard-card > a:last-child { align-self:flex-start; margin-top:auto; }
.dashboard-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.dashboard-kpi { gap:10px; }
.dashboard-value { display:block; color:var(--pv-heading); font-size:32px; line-height:40px; font-weight:600; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.dashboard-kpi > [data-dash-trend] { font-size:12px; }
.dashboard-kpi > small { margin-top:auto; }
.dashboard-main-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:20px; margin-top:20px; }
.dashboard-secondary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:20px; }
.dashboard-chart { display:flex; align-items:stretch; gap:12px; min-height:220px; padding-top:12px; }
.dashboard-bar-column { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:8px; }
.dashboard-bar { width:min(100%,48px); height:var(--bar-height); min-height:2px; background:var(--pv-red); border-radius:8px 8px 2px 2px; }
.dashboard-bar-column small { font-size:11px; }
.dashboard-card progress { width:100%; height:12px; accent-color:var(--pv-red); }
.dashboard-note { padding:16px; border-radius:12px; background:var(--pv-brand-soft); display:grid; gap:8px; }
.dashboard-breakdown,.dashboard-activity,.dashboard-leaderboard { list-style:none; margin:0; padding:0; }
.dashboard-breakdown li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:12px 0; border-bottom:1px solid var(--pv-border); }
.dashboard-breakdown strong { font-variant-numeric:tabular-nums; }
.dashboard-activity li { display:grid; gap:4px; padding:12px 0; border-bottom:1px solid var(--pv-border); }
.dashboard-activity time { font-size:12px; color:var(--pv-secondary); }
.dashboard-leaderboard li { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--pv-border); }
.dashboard-leaderboard .avatar { flex:0 0 36px; }
.dashboard-leaderboard .dashboard-person { min-width:0; flex:1; overflow-wrap:anywhere; }
.dashboard-quick-actions { display:grid; gap:12px; }
.dashboard-quick-actions a { justify-content:space-between; text-align:left; }
.dashboard-health { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px 12px; align-items:center; }
.dashboard-health .badge { font-size:11px; justify-self:start; }
.dashboard-placeholder { min-height:320px; }
.dashboard-placeholder .button { margin-top:8px; }
.dashboard-skeletons { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
@media(max-width:1100px) { .dashboard-kpis,.dashboard-secondary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.dashboard-main-grid { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); } }
@media(max-width:640px) { .dashboard-card { padding:20px; }.dashboard-kpis,.dashboard-main-grid,.dashboard-secondary-grid,.dashboard-skeletons { grid-template-columns:minmax(0,1fr); }.dashboard-controls { align-items:stretch; }.dashboard-controls > .row { width:100%; }.dashboard-controls label { flex:1; min-width:0; }.dashboard-chart { gap:6px; }.dashboard-bar-column small { font-size:10px; }.dashboard-health { gap:12px 8px; } }