/* Secure-VPN v5.3.2 — mobile heatmap readability + controlled horizontal scroll */
.heatmap-mobile-scroll-note{display:none}
@media (max-width:700px){
  body.heatmap-page .page-shell{padding:12px 8px 30px!important;gap:12px!important}
  body.heatmap-page .dashboard{min-width:0!important;width:100%}
  body.heatmap-page .page-title-row{gap:10px;margin-bottom:12px}
  body.heatmap-page .page-title-row h1{font-size:22px;line-height:1.12}
  body.heatmap-page .page-title-row p{font-size:12px;line-height:1.5}

  body.heatmap-page .heatmap-card{min-width:0!important;max-width:100%!important;overflow:hidden!important;border-radius:14px}
  body.heatmap-page .heatmap-head{padding:12px 12px 10px!important;gap:9px!important}
  body.heatmap-page .provider-line{font-size:14px;gap:7px;flex-wrap:wrap}
  body.heatmap-page .provider-logo{width:32px;height:32px;font-size:13px}
  body.heatmap-page .protocol-mark{font-size:16px;margin-left:2px}
  body.heatmap-page .heatmap-head p{font-size:11px;line-height:1.5;margin-top:6px}
  body.heatmap-page .heatmap-head .last-updated{width:100%;min-width:0;padding:9px 11px}

  body.heatmap-page .heatmap-mobile-scroll-note{display:block;padding:7px 12px;border-top:1px solid rgba(80,132,178,.18);border-bottom:1px solid rgba(80,132,178,.18);background:rgba(18,48,74,.36);color:#8da9c4;font-size:10px;text-align:center;letter-spacing:.01em}
  body.heatmap-page .heatmap-scroll{width:100%;max-width:100%;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#294866 #0a1626;touch-action:pan-x pan-y}
  body.heatmap-page .heatmap-table{width:max-content!important;min-width:100%!important;table-layout:fixed!important}

  body.heatmap-page .heatmap-table .destination-head,
  body.heatmap-page .heatmap-table td.destination{position:sticky!important;left:0!important;min-width:132px!important;width:132px!important;max-width:132px!important}
  body.heatmap-page .heatmap-table .destination-head{z-index:9!important;padding:0 7px!important;box-shadow:5px 0 12px rgba(0,0,0,.16)}
  body.heatmap-page .heatmap-table td.destination{z-index:8!important;padding:0 7px!important;grid-template-columns:19px minmax(0,1fr) auto!important;gap:4px!important;font-size:11px!important;box-shadow:5px 0 12px rgba(0,0,0,.16)}
  body.heatmap-page .heatmap-table td.destination .destination-link-cell{min-width:0;gap:5px}
  body.heatmap-page .heatmap-table td.destination .destination-link-cell>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.heatmap-page .heatmap-table td.destination .flag{font-size:15px}
  body.heatmap-page .heatmap-table td.destination small{font-size:8px}

  body.heatmap-page .heatmap-table th:not(.destination-head),
  body.heatmap-page .heatmap-table td.hm-cell{min-width:50px!important;width:50px!important;max-width:50px!important}
  body.heatmap-page .heatmap-table th{height:42px!important;font-size:10px!important;line-height:1.15;padding:0 3px!important}
  body.heatmap-page .heatmap-table td{height:42px!important;font-size:12px!important}
  body.heatmap-page .heatmap-table td.hm-cell:hover{transform:none!important}
  body.heatmap-page .heatmap-table th.selected-hour{box-shadow:inset 0 -3px #34baff, inset 0 0 0 1px rgba(52,186,255,.22)}

  body.heatmap-page .summary-grid{grid-template-columns:1fr!important;gap:12px!important;margin-top:12px}
  body.heatmap-page .summary-card,
  body.heatmap-page .detail-card{border-radius:14px;min-height:0}
}
@media (max-width:420px){
  body.heatmap-page .heatmap-table .destination-head,
  body.heatmap-page .heatmap-table td.destination{min-width:124px!important;width:124px!important;max-width:124px!important}
  body.heatmap-page .heatmap-table th:not(.destination-head),
  body.heatmap-page .heatmap-table td.hm-cell{min-width:48px!important;width:48px!important;max-width:48px!important}
}