/* SmartPay Mobile Hotfix v3 — real iPhone viewport, no horizontal drift */
html{
  width:100%;
  max-width:100%;
  overflow-x:clip!important;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body,.app{
  width:100%;
  max-width:100%;
  min-width:0!important;
  margin:0!important;
  overflow-x:clip!important;
  overscroll-behavior-x:none;
}

@media(max-width:980px){
  html,body{min-width:0!important;overflow-x:clip!important}
  body{position:relative!important;touch-action:pan-y pinch-zoom}

  /* Never reserve desktop/sidebar width on phones. Avoid 100vw: iOS can retain horizontal offset. */
  .shell,
  .shell.sp-sidebar-collapsed{
    display:block!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    overflow-x:clip!important;
  }
  .sidebar,
  .shell.sp-sidebar-collapsed .sidebar{
    position:fixed!important;
    top:0!important;
    bottom:0!important;
    left:-340px!important;
    width:min(86%,320px)!important;
    max-width:320px!important;
    height:100dvh!important;
    margin:0!important;
    z-index:2147483000!important;
    transition:left .2s ease!important;
  }
  .sidebar.open,
  .shell.sp-sidebar-collapsed .sidebar.open{left:0!important}

  .main{
    display:block!important;
    grid-column:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    overflow-x:clip!important;
  }

  /* True mobile toolbar. All columns are allowed to shrink inside the physical viewport. */
  .topbar{
    display:grid!important;
    grid-template-columns:42px minmax(82px,94px) minmax(0,1fr) 68px!important;
    align-items:center!important;
    justify-content:stretch!important;
    gap:5px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:60px!important;
    min-height:60px!important;
    margin:0!important;
    padding:7px 8px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  .top-left,.top-actions{display:contents!important}
  .search,.topbar .avatar.smartpay-avatar,.topbar .smartpay-pay-mark,.topbar .cc-command-btn,.topbar .cc-board-btn{display:none!important}
  .mobile-menu{
    grid-column:1!important;
    display:grid!important;
    place-items:center!important;
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:44px!important;
    min-height:44px!important;
    margin:0!important;
    padding:0!important;
    border-radius:13px!important;
    font-size:18px!important;
  }
  .topbar .pill{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    margin:0!important;
    padding:5px 7px!important;
    border-radius:13px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  .topbar .pill:has(#dateRange){grid-column:2!important;width:100%!important;max-width:none!important;justify-content:center!important}
  #dateRange{font-size:10px!important;line-height:1.08!important;text-align:center!important;white-space:normal!important;overflow:hidden!important}
  .topbar .pill:has(#topClient){grid-column:3!important;width:100%!important;max-width:none!important;gap:5px!important}
  #topClient{display:block!important;width:auto!important;max-width:calc(100% - 11px)!important;min-width:0!important;font-size:10.5px!important;line-height:1.1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .topbar .status-dot{width:6px!important;height:6px!important;min-width:6px!important;flex:0 0 6px!important}
  #exportBtn{
    grid-column:4!important;
    width:68px!important;
    max-width:68px!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    margin:0!important;
    padding:0 6px!important;
    border-radius:13px!important;
    font-size:10px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
  }

  /* Prevent Safari focus-zoom in actual form fields. */
  input,select,textarea{font-size:16px!important}

  /* Every content container follows the parent width, never viewport math. */
  .page,
  #content,
  .decision-shell,
  .grid,
  .card,
  .page-head,
  .cc-overview-entry,
  .os-overview-strip,
  .os-war-strip,
  .wc-hero,
  .cc-hero,
  .os-hero,
  .d360-hero,
  .erp-hero{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  .page{
    margin:0!important;
    padding:14px 12px calc(78px + env(safe-area-inset-bottom))!important;
    overflow-x:clip!important;
  }
  #content,.grid{overflow-x:visible!important}
  .grid{gap:10px!important}
  .c12,.c8,.c7,.c6,.c5,.c4,.c3{grid-column:span 12!important}

  /* Compact page heading */
  .page-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px 10px!important;
    align-items:start!important;
    margin:0 0 14px!important;
  }
  .page-head>div{min-width:0!important;max-width:100%!important}
  .page-head h1{
    font-size:24px!important;
    line-height:1!important;
    letter-spacing:-.7px!important;
    margin:0 0 6px!important;
    max-width:235px!important;
  }
  .page-head p{
    font-size:11px!important;
    line-height:1.4!important;
    margin:0!important;
    max-width:245px!important;
    overflow-wrap:anywhere!important;
  }
  .data-badge{
    align-self:start!important;
    font-size:8.5px!important;
    line-height:1!important;
    padding:7px 9px!important;
    border-radius:999px!important;
    white-space:nowrap!important;
  }

  /* General density */
  .card{padding:14px!important;border-radius:15px!important;overflow:hidden!important}
  .card h2{font-size:19px!important;line-height:1.15!important}
  .card h3{font-size:15px!important;line-height:1.25!important}
  .card h4{font-size:12.5px!important;line-height:1.3!important}
  .muted{font-size:11px!important;line-height:1.45!important}
  .primary,.ghost,.action-btn{min-height:40px!important;font-size:11.5px!important}

  /* Overview / Management score */
  .decision-hero{flex-direction:column!important;align-items:flex-start!important;gap:12px!important;padding:14px!important;margin-bottom:10px!important;border-radius:15px!important}
  .decision-hero h2{font-size:20px!important;line-height:1.08!important}
  .decision-hero p{font-size:10.5px!important;line-height:1.45!important}
  .decision-score{width:68px!important;height:68px!important;border-width:5px!important}
  .decision-score span{font-size:20px!important}.decision-score small{font-size:7px!important}
  .decision-card{min-height:0!important;gap:7px!important}
  .decision-card h3{font-size:14px!important}.decision-card p{font-size:10.5px!important}
  .decision-value{font-size:19px!important}
  .decision-metrics,.report-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}

  /* War Room entry should stack instead of pushing past the viewport. */
  .cc-overview-entry{
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:10px!important;
    padding:13px!important;
  }
  .cc-overview-entry>div{width:100%!important;min-width:0!important}
  .cc-overview-entry b,.cc-overview-entry small{white-space:normal!important;overflow-wrap:anywhere!important}
  .cc-overview-entry button{width:auto!important;max-width:100%!important;min-height:40px!important}

  /* Executive modules */
  .cc-hero,.os-hero,.d360-hero,.erp-hero,.wc-hero{
    grid-template-columns:minmax(0,1fr)!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:12px!important;
    padding:14px!important;
    border-radius:15px!important;
    overflow:hidden!important;
  }
  .cc-hero h2,.os-hero h2,.d360-hero h2,.erp-hero h2,.wc-hero h2{font-size:21px!important;line-height:1.08!important;margin-top:4px!important}
  .cc-hero p,.os-hero p,.d360-hero p,.erp-hero p,.wc-hero p{font-size:10.5px!important;line-height:1.45!important;max-width:100%!important}
  .cc-close,.os-health{width:100%!important;max-width:100%!important;min-height:0!important;padding:12px!important;box-sizing:border-box!important}
  .cc-pulse-grid,.os-pulse,.erp-kpis,.d360-kpis,.wc-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .cc-pulse,.os-pulse-card,.erp-kpis>div,.wc-stat{min-width:0!important;min-height:86px!important;padding:10px!important}
  .cc-pulse>b,.os-pulse-card b,.erp-kpis b,.wc-stat b{font-size:18px!important;line-height:1.05!important}

  /* Executive Brief generated by premium/overview enhancements. */
  [class*="brief"]{max-width:100%!important;min-width:0!important;box-sizing:border-box!important;overflow:hidden!important}
  [class*="brief"] h1,[class*="brief"] h2,[class*="brief"] h3{font-size:20px!important;line-height:1.16!important;overflow-wrap:anywhere!important}
  [class*="brief"] p{font-size:10.5px!important;line-height:1.48!important;overflow-wrap:anywhere!important}
  [class*="brief"] *{max-width:100%}

  /* Pills/summary rows may wrap, never force page width. */
  .cc-hero-tags,.cc-compare>div,.os-loop,.decision-metrics,.report-kpis{max-width:100%!important;min-width:0!important;flex-wrap:wrap!important}

  .chart-box{height:216px!important;max-width:100%!important;overflow:hidden!important}.chart-box.sm{height:186px!important}
  canvas{max-width:100%!important}
  .table-wrap,.wc-heat-wrap{max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}

  /* Bottom app nav: physical parent width, highest layer, touchable. */
  .sp-mobile-bottom{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:68px!important;
    padding:6px 7px calc(6px + env(safe-area-inset-bottom))!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:3px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    z-index:2147483646!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
  }
  .sp-mobile-bottom button{
    position:relative!important;
    z-index:2!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:54px!important;
    margin:0!important;
    padding:4px 2px!important;
    border-radius:11px!important;
    font-size:9.5px!important;
    line-height:1!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  .sp-mobile-bottom button span{font-size:17px!important;line-height:1!important;pointer-events:none!important}
}

@media(max-width:430px){
  .topbar{grid-template-columns:40px 88px minmax(0,1fr) 64px!important;gap:4px!important;padding:6px 7px!important}
  .mobile-menu{width:40px!important;min-width:40px!important;height:42px!important;min-height:42px!important}
  .topbar .pill,#exportBtn{height:42px!important;min-height:42px!important}
  #exportBtn{width:64px!important;max-width:64px!important;font-size:9.5px!important}
  #dateRange{font-size:9.5px!important}#topClient{font-size:10px!important}
  .page{padding:13px 11px calc(76px + env(safe-area-inset-bottom))!important}
  .page-head h1{font-size:23px!important;max-width:220px!important}.page-head p{font-size:10.5px!important;max-width:225px!important}.data-badge{font-size:8px!important;padding:6px 8px!important}
  .cc-hero h2,.os-hero h2,.d360-hero h2,.erp-hero h2,.wc-hero h2{font-size:20px!important}
  .cc-pulse>b,.os-pulse-card b,.erp-kpis b,.wc-stat b{font-size:17px!important}
}

@media(max-width:360px){
  .topbar{grid-template-columns:38px 80px minmax(0,1fr) 40px!important;gap:4px!important;padding:5px 6px!important}
  .mobile-menu{width:38px!important;min-width:38px!important;height:40px!important;min-height:40px!important}
  .topbar .pill,#exportBtn{height:40px!important;min-height:40px!important}
  #exportBtn{width:40px!important;max-width:40px!important;font-size:0!important;padding:0!important}
  #exportBtn:before{content:'⇩';font-size:15px!important}
  #dateRange{font-size:8.7px!important}#topClient{font-size:9.5px!important}
  .page-head{grid-template-columns:minmax(0,1fr)!important}
  .page-head h1{font-size:22px!important;max-width:100%!important}.page-head p{font-size:10.5px!important;max-width:100%!important}
  .data-badge{justify-self:start!important}
  .cc-pulse-grid,.os-pulse,.erp-kpis,.d360-kpis,.wc-stat-grid{grid-template-columns:1fr!important}
}