/* Compact, scan-friendly overview for tablets and phones. */
@media (max-width: 800px){
  #page-overview .overview-compact-head{min-height:0;margin-bottom:12px;gap:8px}
  #page-overview .overview-compact-head>div:first-child small{font-size:11px;letter-spacing:.3px}
  #page-overview .overview-head-actions{display:flex;width:auto;gap:6px;align-items:center}
  #page-overview .overview-head-actions select,
  #page-overview .overview-head-actions button{min-height:38px;padding:7px 9px;font-size:11px}
  #page-overview .overview-head-actions #onboardingButton span{display:none}
  #page-overview .overview-head-actions #onboardingButton{min-width:42px;padding-inline:7px}
  #page-overview .overview-head-actions #onboardingButton em{margin:0;padding:3px 5px}
  #page-overview .kpi-grid{gap:9px}
  #page-overview .kpi-grid article{min-height:112px;padding:14px 13px;border-radius:13px}
  #page-overview .kpi-title>span{font-size:10px;line-height:1.2}
  #page-overview .kpi-title i{width:25px;height:25px;font-size:10px}
  #page-overview .kpi-grid strong{margin:8px 0 3px;font-size:22px}
  #page-overview .kpi-grid small{font-size:9px;line-height:1.3}
  #page-overview .kpi-grid em{margin:2px 0 0;font-size:8px}
  #page-overview .overview-grid,#page-overview .bottom-grid{gap:10px;margin-top:10px}
  #page-overview .panel-head{min-height:0;padding:13px 14px}
  #page-overview .panel-head h3{font-size:14px}
  #page-overview .panel-head p{margin-top:2px;font-size:9px}
  #page-overview .chart-wrap{padding:10px 12px 8px 30px}
  #page-overview .chart-wrap svg{height:156px}
  #page-overview .y-axis{left:8px;top:13px;bottom:27px;font-size:7px}
  #page-overview .x-axis{font-size:7px}
  #page-overview .opportunities #opportunityList{padding:0 14px}
  #page-overview .opp-item{grid-template-columns:30px minmax(0,1fr) auto;gap:8px;padding:10px 0}
  #page-overview .opp-item .product-pic{width:30px;height:30px;font-size:13px}
  #page-overview .opp-item b{font-size:10px;line-height:1.2}
  #page-overview .opp-item small{font-size:8px}
  #page-overview .distribution{padding-bottom:10px}
  #page-overview .donut{width:112px;height:112px;margin:12px auto}
  #page-overview .donut:before{width:72px;height:72px}
  #page-overview .distribution ul{padding:0 16px}
  #page-overview .distribution li{margin:6px 0;font-size:9px}
}
@media (max-width: 560px){
  #page-overview .overview-compact-head{align-items:center}
  #page-overview .overview-head-actions select{max-width:132px}
  #page-overview .overview-head-actions #overviewCustomizeButton{width:38px;padding:0;font-size:0}
  #page-overview .overview-head-actions #overviewCustomizeButton::before{content:'•••';font-size:15px;letter-spacing:1px}
  #page-overview .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #page-overview .kpi-grid article{min-height:100px;padding:12px}
  #page-overview .kpi-grid strong{font-size:20px}
  #page-overview .kpi-grid article:nth-child(2) em{display:none}
  #page-overview .chart-wrap svg{height:136px}
  #page-overview .opp-item:nth-child(n+4){display:none}
  #page-overview .opp-item>span b{font-size:9px}
  #page-overview .bottom-grid .table-wrap{max-height:300px;overflow:auto}
  #page-overview .bottom-grid table{min-width:520px}
}