.activity-charts{--ach-blue:var(--act-accent,var(--sysdash-accent,#3c8dbc));--ach-red:var(--sysdash-danger,#dd4b39);--ach-orange:var(--sysdash-warning,#f39c12);--ach-muted-color:#8996a5;--ach-line:var(--act-line,var(--sysdash-line,#ccd3db));--ach-surface:var(--act-surface,var(--sysdash-surface,#fff));--ach-secondary:var(--act-secondary,var(--sysdash-surface-2,#f3f5f7));--ach-text:var(--act-text,var(--sysdash-text,#263238));--ach-muted:var(--act-muted,var(--sysdash-muted,#5c6670));color:var(--ach-text);container-type:inline-size;min-width:0;font-size:13px}
.activity-charts *{box-sizing:border-box}.ach-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:14px 0}.ach-grid.ach-ratios{grid-template-columns:repeat(3,minmax(0,1fr))}.activity-charts .ach-card{border:1px solid var(--ach-line);padding:14px;background:var(--ach-surface);min-width:0;overflow-wrap:anywhere}.activity-charts .ach-card h3{font-size:14px;font-weight:600;margin:0 0 10px;color:var(--ach-text)}.activity-charts .ach-card p{font-size:12px;color:var(--ach-muted);margin:0 0 12px;line-height:1.5}.activity-charts ul{list-style:none;padding:0;margin:0}.activity-charts .ach-bars{max-height:320px;overflow:auto}.ach-bars li{display:grid;grid-template-columns:minmax(80px,1fr) minmax(60px,2fr) auto;align-items:center;gap:10px;margin:12px 0}.ach-bars li>span:first-child{overflow-wrap:anywhere}.ach-track{display:block;height:18px;background:var(--ach-secondary)}.ach-track i{display:block;height:100%;background:var(--ach-blue)}.ach-pie-layout{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px}.ach-pie{width:150px;height:150px;max-width:100%;flex:0 1 150px;overflow:visible}.ach-pie text{fill:var(--ach-text);font:600 15px sans-serif}.ach-legend{flex:1 1 155px;min-width:0}.ach-legend li{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin:8px 0}.ach-legend i{display:inline-block;width:10px;height:10px;flex:0 0 10px}.ach-legend li>span{flex:1 1 90px}.ach-legend strong{font-size:13px}.ach-legend small{font-size:12px;font-weight:400}.activity-charts .ach-empty{padding:16px 0;margin:0}.ach-widget-note{color:var(--sysdash-muted);font-size:12px;margin:8px 0}
@container(max-width:1000px){.ach-grid.ach-ratios{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container(max-width:620px){.ach-grid,.ach-grid.ach-ratios{grid-template-columns:minmax(0,1fr)}.activity-charts .ach-card{padding:10px}.ach-pie{width:125px;height:125px;flex-basis:125px}}
@media print{.activity-charts .ach-bars{max-height:none;overflow:visible}}
.activity-charts .ach-bars:focus-visible{outline:2px solid var(--ach-blue);outline-offset:3px}
/* Keep both charts and the existing grid reachable inside a fixed-height dashboard widget. */
#sysDashboardStudio .sysdash-widget-body:has(>.activity-charts){overflow-y:auto}
#sysDashboardStudio .sysdash-widget-body>.activity-charts{flex:0 0 auto}
#sysDashboardStudio .sysdash-widget-body:has(>.activity-charts)>.sysdash-table-scroll{flex:0 0 auto;max-height:360px;min-height:120px}

.activity-charts{--ach-green:var(--sysdash-success,#00a65a)}.ach-heading-icon{display:inline-block;margin-right:8px;color:var(--ach-blue);font-size:19px;vertical-align:middle}.ach-pie text.ach-center-label{font:400 8px sans-serif;fill:var(--ach-muted)}
