/* RINJANI V20.3 — Mobile viewport fit guard
   Overrides only small-screen layout. Desktop rules remain untouched. */
@media (max-width:700px){
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  body{position:relative}
  *,*::before,*::after{box-sizing:border-box}
  img,video,canvas,svg{max-width:100%;height:auto}
  input,select,textarea,button{max-width:100%;min-width:0}

  /* Primary page shells */
  .launcher,.app,.wrap,.container,.page,.content,.theme1View,.theme2View,.theme3View,.theme4View,.theme5View{
    width:100%!important;max-width:100%!important;min-width:0!important
  }
  .launcher,.app,.wrap{overflow-x:hidden}

  /* Prevent flex/grid children from forcing the viewport wider. */
  .top,.header,.hero,.heroTop,.hero-top,.topRight,.hero-actions,.actions,.head,.cardHead,.cardhead,.panelHead,
  .sectionTitle,.section-head,.toolbar,.grid,.grid2,.main-grid,.support-grid,.stats-grid,.bottom-panels,.info-row,
  .profile,.quickMenu,.homeStrip,.actionGrid,.moduleCards,.kpiGrid,.detailGrid,.detailgrid,.trackingBox,
  .card,.panel,.view,.form,.field,.stat,.kpi,.app-card,.support-card,.info-card,.modalCard,.modalbox,.box{
    min-width:0!important;max-width:100%!important
  }
  .top>*,.header>*,.hero>*,.heroTop>*,.hero-top>*,.actions>*,.hero-actions>*,.toolbar>*,.grid>*,.grid2>*{min-width:0!important}

  /* Headers: keep controls inside phone width instead of pushing the page sideways. */
  .top,.header,.hero-actions,.actions,.topRight{flex-wrap:wrap}
  .brand,.brandTitle,.brand-title,.headTitle,.welcome,.section-copy{min-width:0!important}
  .brand>div,.brandTitle>div,.brand-title>div{min-width:0!important}
  .brand b,.brand small,.brand h1,.title,.title small,.hero h1,.hero p{overflow-wrap:anywhere}
  .topRight,.actions,.hero-actions{max-width:100%!important}

  /* Forms and GPS controls */
  form,.form{max-width:100%!important}
  .field input,.field select,.field textarea,.toolbar input,.toolbar select,.gps input,input[type="file"],input[type="search"]{
    width:100%!important;max-width:100%!important;min-width:0!important
  }
  .gps{width:100%;max-width:100%;min-width:0}

  /* Tables scroll inside their card; the whole document no longer scrolls sideways. */
  .tablewrap,.tableWrap,.table-wrap,.msrTableWrap,.finx-table-wrap,.finx-recap-table-wrap{
    display:block!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:auto;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain
  }
  .tablewrap table,.tableWrap table,.table-wrap table,.msrTableWrap table,.finx-table-wrap table,.finx-recap-table-wrap table{
    max-width:none!important
  }

  /* Modals / sheets must never exceed physical phone viewport. */
  .modal,.msrModal{max-width:100vw!important;padding-left:8px!important;padding-right:8px!important}
  .modalCard,.modalbox,.box,.msrModalCard,.launcher-sheet,.app-sheet{
    width:calc(100vw - 12px)!important;max-width:calc(100vw - 12px)!important;margin-left:auto!important;margin-right:auto!important
  }

  /* Fixed navigation bars stay inside safe-area and phone edges. */
  .bottom-nav,.bottomNav{
    width:calc(100vw - 10px)!important;max-width:calc(100vw - 10px)!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important
  }
  .nav-item,.navBtn{min-width:0!important}
  .nav-item span,.navBtn span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* Long labels/IDs/coordinates wrap rather than expanding cards. */
  .row,.listrow,.member,.teamScheduleRow,.tracking-card,.detail,.detailBox,.field,.miniStatus,.woBox{
    min-width:0!important;max-width:100%!important
  }
  .row *,.listrow *,.member *,.teamScheduleRow *,.tracking-card *,.detail *,.detailBox *,.woBox *{
    overflow-wrap:anywhere
  }
}

@media (max-width:480px){
  /* Phone layout: less horizontal pressure and easier touch targets. */
  .launcher{padding-left:7px!important;padding-right:7px!important}
  .app,.wrap{padding-left:7px!important;padding-right:7px!important}

  /* Launcher cards: 2 columns on typical 360–430px phones instead of squeezing 3 cards. */
  .main-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .app-card{width:100%!important}

  /* User Team forms are single-column. */
  .form .grid,.fieldGrid,.detailGrid,.detailgrid,.signatureGrid{grid-template-columns:1fr!important}
  .field.wide,.detailBox.wide{grid-column:auto!important}

  /* Keep phone headers readable. */
  .top,.header{gap:7px!important}
  .topRight,.actions,.hero-actions{gap:5px!important}
  .profilePhotoBtn{white-space:normal!important}

}

@media (max-width:350px){
  .main-grid,.support-grid{grid-template-columns:1fr!important}
}

/* RINJANI V20.6 — Launcher mobile precision pass
   Keeps consistent phone gutters and removes legacy full-bleed overflow. */
@media (max-width:700px){
  html,body{margin:0!important;padding-left:0!important;padding-right:0!important;width:100%!important;max-width:100%!important;overflow-x:clip!important}
  body{min-width:0!important}
  .launcher{
    width:100%!important;
    max-width:100%!important;
    margin:0 auto!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }
  .statusbar{width:100%!important;max-width:100%!important;padding-left:2px!important;padding-right:2px!important}
  .hero{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    border-left:1px solid var(--line)!important;
    border-right:1px solid var(--line)!important;
    border-radius:20px!important;
  }
  .hero-top{width:100%!important;max-width:100%!important;min-width:0!important}
  .brand{flex:1 1 auto!important;max-width:calc(100% - 82px)!important}
  .brand-title h1,.brand-title p{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .hero-actions{flex:0 0 auto!important;max-width:78px!important}
  .info-row,.main-grid,.support-grid,.stats-grid,.bottom-panels,.section,.search-wrap{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}
  .info-card,.app-card,.support-card,.stat-card,.panel{width:100%!important;max-width:100%!important;min-width:0!important}
  .app-copy{width:100%!important;min-width:0!important}
  .app-copy strong,.app-copy span{max-width:100%!important;overflow-wrap:anywhere!important}
  .bottom-nav{
    width:calc(100vw - 16px)!important;
    max-width:calc(100vw - 16px)!important;
    left:50%!important;
    right:auto!important;
  }
  .launcher-sheet,.modalCard,.modalbox,.box{
    width:calc(100vw - 16px)!important;
    max-width:calc(100vw - 16px)!important;
  }
}

@media (max-width:480px){
  .launcher{padding-left:9px!important;padding-right:9px!important}
  .hero{padding-left:10px!important;padding-right:10px!important;border-radius:18px!important}
  .main-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .app-card{min-height:132px!important;padding:9px 7px!important}
  .support-grid,.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .info-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .welcome-card{grid-column:1/-1!important}
  .clock-card,.prayer-card{grid-column:auto!important}
  .search-shell{width:100%!important;max-width:100%!important}
}

@media (max-width:350px){
  .launcher{padding-left:7px!important;padding-right:7px!important}
  .main-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
  .app-card{min-height:124px!important;padding:7px 5px!important}
  .app-icon{width:52px!important;height:52px!important}
  .app-icon svg{width:28px!important;height:28px!important}
  .app-copy strong{font-size:9px!important}
  .app-copy span{font-size:6.5px!important}
  .support-grid,.stats-grid{grid-template-columns:1fr!important}
  .info-row{grid-template-columns:1fr!important}
  .hero-actions{max-width:70px!important}
}