/* Light-only customer statistics. All styles are scoped to this view. */
#view-stats { color:var(--text-primary, var(--text-primary)); min-width:0; }
#view-stats h2 { margin:0; font-size:var(--type-body-lg-size); line-height:var(--type-heading-sm-leading); letter-spacing:var(--type-label-md-tracking); }
#view-stats h3 { margin:0 0 var(--space-4); font-size:var(--type-heading-sm-size); }
#view-stats button, #view-stats a { touch-action:manipulation; }
#view-stats button:focus-visible, #view-stats a:focus-visible, #view-stats [tabindex]:focus-visible { outline:var(--component-field-focus-ring-width) solid var(--border-default); outline-offset:var(--space-2); }
#view-stats .flow-toolbar { display:flex; align-items:flex-end; gap:var(--space-5); flex-wrap:wrap; padding:0 0 var(--space-6); border-bottom:var(--space-0) solid var(--border-default); }
#view-stats .flow-toolbar > label:first-child { display:grid; gap:var(--space-3); font-weight:var(--font-weight-bold); font-size:var(--type-body-xs-size); }
#view-stats .flow-toolbar select { width:calc(var(--space-14) * 1.3281); min-height:var(--space-9); background:var(--bg-raised); }
#view-stats .flow-check { display:flex; gap:var(--space-3); align-items:center; min-height:var(--space-9); font-size:var(--type-body-xs-size); }
#view-stats .flow-check input { width:var(--space-5); height:var(--space-5); accent-color:var(--text-primary); }
#view-stats .flow-toolbar > button { margin-left:auto; }
#view-stats [data-flow-status] { color:var(--text-primary); font-size:var(--type-body-xs-size); margin:var(--space-5) 0; min-height:var(--space-6); }
#view-stats .flow-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-0); background:var(--bg-raised); border:var(--component-card-border-width) solid var(--border-default); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:var(--space-7); }
#view-stats .flow-metrics > div { padding:var(--space-6); display:flex; flex-direction:column; background:var(--bg-raised); gap:var(--space-3); }
#view-stats .flow-metrics span { font-size:var(--type-body-xs-size); color:var(--text-primary); }
#view-stats .flow-metrics strong { font-size:var(--type-display-sm-size); line-height:var(--type-heading-sm-leading); letter-spacing:var(--type-label-md-tracking); }
#view-stats .flow-metrics small { font-size:var(--type-body-xs-size); color:var(--text-primary); }
#view-stats .flow-panel { border:var(--component-card-border-width) solid var(--border-default); border-radius:var(--radius-lg); background:var(--bg-raised); margin:var(--space-7) 0; overflow:hidden; }
#view-stats .flow-section-head { display:flex; gap:var(--space-6); justify-content:space-between; align-items:start; padding:var(--space-7) var(--space-7) 0; }
#view-stats .flow-muted { font-size:var(--type-body-xs-size); line-height:var(--type-body-md-leading); color:var(--text-primary); margin:var(--space-3) 0 0; }
#view-stats .flow-text-link { background:none; border:0; cursor:pointer; font-size:var(--type-body-xs-size); white-space:nowrap; color:var(--text-primary); text-decoration:underline; text-underline-offset:var(--space-1); padding:var(--space-2); }
#view-stats .flow-scroll-hint { display:none; color:var(--text-primary); font-size:var(--type-body-xs-size); padding:var(--space-4) var(--space-7) 0; margin:0; }
#view-stats .flow-scroll { width:100%; overflow-x:auto; overscroll-behavior-x:contain; padding:var(--space-3) 0 0; }
#view-stats .flow-graph { display:block; width:100%; height:auto; }
#view-stats .flow-column { fill:var(--text-primary); font-size:var(--type-body-xs-size); font-weight:var(--font-weight-bold); text-transform:uppercase; letter-spacing:var(--type-label-md-tracking); }
#view-stats .flow-link { opacity:.20; cursor:pointer; stroke-width:0; }
#view-stats .flow-link:hover, #view-stats .flow-link:focus, #view-stats .flow-link.is-selected { opacity:.55; stroke:var(--text-primary); stroke-width:1; }
#view-stats .flow-node { cursor:pointer; }
#view-stats .flow-node:hover rect, #view-stats .flow-node:focus rect, #view-stats .flow-node.is-selected rect { stroke:var(--text-primary); stroke-width:3; }
#view-stats .flow-label { fill:var(--text-primary); font-size:var(--type-body-xs-size); font-weight:var(--font-weight-bold); paint-order:stroke; stroke:var(--text-inverse); stroke-width:var(--space-2); stroke-linejoin:round; }
#view-stats .flow-count { fill:var(--text-primary); font-size:var(--type-body-xs-size); font-weight:var(--font-weight-regular); }
#view-stats .flow-caption { font-size:var(--type-body-xs-size); line-height:var(--type-body-md-leading); color:var(--text-primary); padding:var(--space-5) var(--space-7); margin:0; border-top:var(--space-0) solid var(--border-default); background:var(--bg-raised); }
#view-stats .flow-kicker { margin:0 0 var(--space-3); color:var(--text-primary); text-transform:uppercase; font-size:var(--type-body-xs-size); letter-spacing:var(--type-label-md-tracking); font-weight:var(--font-weight-bold); }
#view-stats #flow-stage-table { scroll-margin-top:var(--space-12); }
#view-stats .flow-selection { scroll-margin-top:var(--space-12); }
#view-stats .flow-next-paths { display:flex; flex-wrap:wrap; gap:var(--space-3); padding:var(--space-6) var(--space-7) 0; }
#view-stats .flow-next-paths button { border:var(--component-card-border-width) solid var(--border-default); background:var(--bg-raised); border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); text-align:left; font-size:var(--type-body-xs-size); cursor:pointer; }
#view-stats .flow-next-paths b { margin-left:var(--space-3); }
#view-stats .flow-next-paths span { display:block; color:var(--text-primary); font-size:var(--type-body-xs-size); margin-top:var(--space-2); }
#view-stats [data-flow-calls] { padding:0 var(--space-7) var(--space-6); }
#view-stats .flow-loading, #view-stats .flow-list-count { color:var(--text-primary); margin:var(--space-6) 0 var(--space-4); font-size:var(--type-body-xs-size); }
#view-stats .flow-call-list { max-height:calc(var(--space-14) * 4.375); overflow-y:auto; overscroll-behavior-y:contain; padding-right:var(--space-3); }
#view-stats .flow-call { padding:var(--space-5) 0; border-top:var(--space-0) solid var(--border-default); }
#view-stats .flow-call-main { display:flex; justify-content:space-between; gap:var(--space-4); align-items:baseline; }
#view-stats .flow-call-main a { font-weight:var(--font-weight-bold); font-size:var(--type-body-sm-size); text-decoration:underline; text-underline-offset:var(--space-1); }
#view-stats .flow-call-main > span { font-size:var(--type-body-xs-size); background:var(--bg-raised); padding:var(--space-2) var(--space-3); border-radius:var(--radius-sm); text-transform:capitalize; }
#view-stats .flow-call-path { font-size:var(--type-body-xs-size); line-height:var(--type-body-md-leading); color:var(--text-primary); margin:var(--space-3) 0; overflow-wrap:anywhere; }
#view-stats .flow-call dl { display:flex; flex-wrap:wrap; gap:var(--space-4) var(--space-7); margin:0; }
#view-stats .flow-call dt { font-size:var(--type-body-xs-size); color:var(--text-primary); text-transform:uppercase; letter-spacing:var(--type-label-md-tracking); }
#view-stats .flow-call dd { margin:var(--space-2) 0 0; font-size:var(--type-body-xs-size); text-transform:capitalize; }
#view-stats .flow-call details { font-size:var(--type-body-xs-size); margin-top:var(--space-4); color:var(--text-primary); }
#view-stats .flow-call summary { cursor:pointer; min-height:var(--space-7); }
#view-stats .flow-call li { line-height:var(--type-body-md-leading); overflow-wrap:anywhere; }
#view-stats .flow-pagination { display:flex; justify-content:space-between; gap:var(--space-4); padding-top:var(--space-3); }
#view-stats .flow-table-scroll { overflow-x:auto; margin-top:var(--space-5); }
#view-stats .flow-table { border-collapse:collapse; width:100%; font-size:var(--type-body-xs-size); text-align:left; }
#view-stats .flow-table th, #view-stats .flow-table td { padding:var(--space-4) var(--space-7); border-top:var(--space-0) solid var(--border-default); vertical-align:top; }
#view-stats .flow-table thead th { background:var(--bg-raised); font-size:var(--type-body-xs-size); color:var(--text-primary); white-space:nowrap; }
#view-stats .flow-table td { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
#view-stats .flow-table th button { background:none; border:0; padding:var(--space-2) 0; text-align:left; cursor:pointer; font-size:var(--type-body-xs-size); color:var(--text-primary); text-decoration:underline; text-underline-offset:var(--space-1); }
#view-stats .flow-table th small { display:block; font-size:var(--type-body-xs-size); color:var(--text-primary); font-weight:var(--font-weight-regular); max-width:calc(var(--space-14) * 4.375); line-height:var(--type-body-md-leading); }
#view-stats .flow-table .is-selected { background:var(--bg-raised); }
#view-stats .flow-breakdowns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-6); }
#view-stats .flow-breakdown { border:var(--component-card-border-width) solid var(--border-default); border-radius:var(--radius-lg); padding:var(--space-6); background:var(--bg-raised); }
#view-stats .flow-breakdown dl { margin:var(--space-3) 0 0; }
#view-stats .flow-breakdown dl > div { display:flex; justify-content:space-between; gap:var(--space-5); padding:var(--space-3) 0; border-bottom:var(--space-0) solid var(--border-default); font-size:var(--type-body-xs-size); }
#view-stats .flow-breakdown dd { margin:0; white-space:nowrap; font-weight:var(--font-weight-bold); }
#view-stats .flow-breakdown dd span { margin-left:var(--space-3); color:var(--text-primary); font-weight:var(--font-weight-regular); }
#view-stats .flow-method { padding:var(--space-7) 0; color:var(--text-primary); max-width:calc(var(--space-14) * 7.0312); }
#view-stats .flow-method h2 { font-size:var(--type-body-md-size); color:var(--text-primary); }
#view-stats .flow-coverage { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3) var(--space-8); margin:var(--space-5) 0; }
#view-stats .flow-coverage > div { display:flex; justify-content:space-between; gap:var(--space-4); font-size:var(--type-body-xs-size); line-height:var(--type-body-md-leading); }
#view-stats .flow-coverage dd { margin:0; font-weight:var(--font-weight-bold); white-space:nowrap; }
#view-stats .flow-method p { font-size:var(--type-body-xs-size); line-height:var(--type-body-md-leading); margin:var(--space-3) 0; }
#view-stats .flow-empty, #view-stats .flow-error { border:var(--component-card-border-width) solid var(--border-default); border-radius:var(--radius-lg); padding:var(--space-9) var(--space-7); margin:var(--space-6) 0; background:var(--bg-raised); }
#view-stats .flow-empty p, #view-stats .flow-error p { color:var(--text-primary); line-height:var(--type-body-md-leading); font-size:var(--type-body-sm-size); max-width:calc(var(--space-14) * 4.375); }
#view-stats .flow-empty-mark { display:inline-block; font-size:var(--type-display-sm-size); margin-bottom:var(--space-5); color:var(--text-primary); }
@media(max-width:700px) {
 #view-stats .flow-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
 #view-stats .flow-metrics > div { padding:var(--space-5); }
 #view-stats .flow-metrics > div:last-child:nth-child(odd) { grid-column:1 / -1; }
 #view-stats .flow-metrics strong { font-size:var(--type-display-sm-size); }
 #view-stats .flow-section-head { flex-direction:column; padding:var(--space-5) var(--space-5) 0; gap:var(--space-3); }
 #view-stats .flow-breakdowns, #view-stats .flow-coverage { grid-template-columns:1fr; }
 #view-stats .flow-caption, #view-stats .flow-next-paths { padding:var(--space-5); }
 #view-stats [data-flow-calls] { padding:0 var(--space-5) var(--space-5); }
 #view-stats .flow-toolbar > button { margin-left:0; }
 #view-stats .flow-table th, #view-stats .flow-table td { padding:var(--space-3) var(--space-5); }
 #view-stats .flow-call-main { flex-direction:column; }
 #view-stats .flow-table { min-width:calc(var(--space-14) * 3.4375); }
}

@media(max-width:1250px) { #view-stats .flow-scroll-hint { display:block; } }