/* Green Goat Ecosystem Suite v1.29.3 — mobile viewport resilience.
   Scoped to Suite surfaces so ordinary public site layouts are not altered. */

@media (max-width:899px){
  body.gg-suite-route-page,
  body.gg-ecosystem-page,
  body.gg-suite-portal-template,
  body.gg-suite-blank-template,
  body.gg-internal-view-frame{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
    overflow-x:clip!important;
  }

  body.gg-suite-route-page *,
  body.gg-suite-route-page *::before,
  body.gg-suite-route-page *::after,
  body.gg-ecosystem-page *,
  body.gg-ecosystem-page *::before,
  body.gg-ecosystem-page *::after,
  body.gg-suite-portal-template *,
  body.gg-suite-portal-template *::before,
  body.gg-suite-portal-template *::after,
  body.gg-internal-view-frame *,
  body.gg-internal-view-frame *::before,
  body.gg-internal-view-frame *::after{
    box-sizing:border-box;
  }

  /* Theme wrappers and Suite workspaces must be allowed to shrink inside the viewport. */
  body.gg-suite-route-page :where(
    #page,#content,#primary,.site,.site-content,.content-area,.site-main,main,article,
    .entry-content,.page-content,.wp-site-blocks,.wp-block-post-content,.gg-ecosystem-parent,
    .ggapp-shell,.ggapp-main,.ggworkspace,.gg-suite-portal-content,
    .ggcrm,.ggcrm-app,.ctp-modern,.ctp-client-home,.ctp-esign-workspace,
    .ggi,.ggi-app,.gg-v114,.ggmsg116,.ggsuite-account,.gg-profile-page,#gg-account-settings,
    .gg-finance,.gg-fin-shell,.gg-payroll-workspace,.ggu-shell,.ggu-course,.gg-sim-workspace
  ),
  body.gg-ecosystem-page :where(
    #page,#content,#primary,.site,.site-content,.content-area,.site-main,main,article,
    .entry-content,.page-content,.wp-site-blocks,.wp-block-post-content,.gg-ecosystem-parent,
    .ggapp-shell,.ggapp-main,.ggworkspace,.gg-suite-portal-content,
    .ggcrm,.ggcrm-app,.ctp-modern,.ctp-client-home,.ctp-esign-workspace,
    .ggi,.ggi-app,.gg-v114,.ggmsg116,.ggsuite-account,.gg-profile-page,#gg-account-settings,
    .gg-finance,.gg-fin-shell,.gg-payroll-workspace,.ggu-shell,.ggu-course,.gg-sim-workspace
  ){
    min-width:0!important;
    max-width:100%!important;
  }

  /* Grid/flex cards are a common source of the one-card-off-screen mobile bleed. */
  body.gg-suite-route-page :where(
    .ggapp-main,.ggworkspace,.ggcrm,.ggcrm-app,.ctp-modern,.ctp-client-home,
    .ggi,.ggi-app,.ggmsg116,.ggsuite-account,.gg-payroll-workspace,
    .gg-payroll-panel,.gg-fin-card,.ggu-shell,.gg-sim-workspace
  ) > *,
  body.gg-ecosystem-page :where(
    .ggapp-main,.ggworkspace,.ggcrm,.ggcrm-app,.ctp-modern,.ctp-client-home,
    .ggi,.ggi-app,.ggmsg116,.ggsuite-account,.gg-payroll-workspace,
    .gg-payroll-panel,.gg-fin-card,.ggu-shell,.gg-sim-workspace
  ) > *{
    min-width:0;
    max-width:100%;
  }

  /* Media and embedded document surfaces can never establish a wider page. */
  body.gg-suite-route-page :where(img,video,canvas,iframe,embed,object),
  body.gg-ecosystem-page :where(img,video,canvas,iframe,embed,object),
  body.gg-suite-portal-template :where(img,video,canvas,iframe,embed,object){
    max-width:100%!important;
  }

  /* Forms remain touch friendly and may shrink even when a module supplied a desktop min-width. */
  body.gg-suite-route-page :where(form,fieldset,label,input,select,textarea,button),
  body.gg-ecosystem-page :where(form,fieldset,label,input,select,textarea,button){
    min-width:0;
    max-width:100%;
  }
  body.gg-suite-route-page :where(input:not([type]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]),select,textarea),
  body.gg-ecosystem-page :where(input:not([type]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]),select,textarea){
    width:100%;
  }

  /* Tables retain native table layout; JS gives unwrapped tables a dedicated scroll surface. */
  .gg-mobile-table-scroll{
    display:block;
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
  }
  .gg-mobile-table-scroll>table{
    width:100%;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* Existing dedicated table wrappers also own their scrolling. */
  body.gg-suite-route-page :where(
    .gg-fin-table-wrap,.ggi-manager-table,.ggstaff-leaderboard,.ggcrm-table-wrap,
    .ctp-table-wrap,.gg-payroll-table,.ggu-table-wrap,[class*="table-wrap"],[class*="table-scroll"]
  ),
  body.gg-ecosystem-page :where(
    .gg-fin-table-wrap,.ggi-manager-table,.ggstaff-leaderboard,.ggcrm-table-wrap,
    .ctp-table-wrap,.gg-payroll-table,.ggu-table-wrap,[class*="table-wrap"],[class*="table-scroll"]
  ){
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
  }

  /* Long IDs, URLs, file names and audit hashes must wrap rather than widen a card. */
  body.gg-suite-route-page :where(p,li,dd,td,th,small,strong,span,a,code,pre),
  body.gg-ecosystem-page :where(p,li,dd,td,th,small,strong,span,a,code,pre){
    overflow-wrap:anywhere;
    word-break:normal;
  }
  body.gg-suite-route-page pre,
  body.gg-ecosystem-page pre{
    max-width:100%!important;
    overflow:auto!important;
    white-space:pre-wrap;
  }

  /* Keep horizontal app navigation usable without allowing it to move the viewport. */
  body.gg-suite-route-page :where(
    .ggapp-nav,.ggworkspace-tabs,.gg-payroll-subnav,.ggsuite-tabs,.ggu-tabs,
    .ctp-tabs,.gg-fin-tabs,.ggcrm-tabs,.ggclient-progress,.ggmsg116__pending
  ),
  body.gg-ecosystem-page :where(
    .ggapp-nav,.ggworkspace-tabs,.gg-payroll-subnav,.ggsuite-tabs,.ggu-tabs,
    .ctp-tabs,.gg-fin-tabs,.ggcrm-tabs,.ggclient-progress,.ggmsg116__pending
  ){
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
  }

  /* Generic dialogs/drawers must respect the safe viewport even if an older module supplied a fixed width. */
  body.gg-suite-route-page :where([role="dialog"],.ggcrm-modal-card,.ctp-modal-card,.ggmsg116__dialog,.ggi-dialog),
  body.gg-ecosystem-page :where([role="dialog"],.ggcrm-modal-card,.ctp-modal-card,.ggmsg116__dialog,.ggi-dialog){
    max-width:calc(100dvw - 12px)!important;
    max-height:calc(100dvh - 12px)!important;
  }

  /* Enterprise payroll is dense; force mobile-safe stacking for action/header rows. */
  .gg-payroll-head-actions,
  .gg-payroll-payout-actions,
  .gg-payroll-detail-top,
  .gg-payroll-run-warning,
  .gg-payroll-panel-head{
    flex-wrap:wrap;
  }
  .gg-payroll-payout-main,
  .gg-payroll-worker-list>div,
  .gg-payroll-preview-list>div,
  .gg-payroll-file-lines>div,
  .gg-payroll-statement-list>a,
  .gg-payroll-snapshot-list>a{
    min-width:0;
  }
  .gg-payroll-payout-main>*,
  .gg-payroll-worker-list>div>*,
  .gg-payroll-preview-list>div>*,
  .gg-payroll-file-lines>div>*,
  .gg-payroll-statement-list>a>*,
  .gg-payroll-snapshot-list>a>*{
    min-width:0;
    max-width:100%;
  }

  /* Universal in-app viewer must account for notch/safe-area and never exceed the visual viewport. */
  .ggiv-overlay{
    width:100dvw!important;
    max-width:100dvw!important;
    overflow:hidden!important;
  }
  .ggiv-window,.ggiv-head,.ggiv-body,.ggiv-stage,.ggiv-frame{
    min-width:0!important;
    max-width:100%!important;
  }
  .ggiv-heading,.ggiv-actions{min-width:0}
}

@media (max-width:480px){
  /* Very narrow devices: stacked action rows are preferable to clipped controls. */
  .gg-payroll-head{align-items:stretch;flex-direction:column}
  .gg-payroll-head .gg-payroll-run-btn{width:100%}
  .gg-payroll-head-actions{width:100%}
  .gg-payroll-head-actions>*{flex:1 1 auto}
  .gg-payroll-detail-top{align-items:flex-start;gap:8px;flex-direction:column}
  .gg-payroll-run-warning{align-items:flex-start;flex-direction:column}
  .gg-payroll-payout-actions{gap:8px}
}


/* v1.29.7 CRM mobile stability recovery.
   Keep the CRM's own horizontal navigation and pagination geometry authoritative. */
@media (max-width:899px){
  body.gg-suite-route-page .ggcrm-sidebar,
  body.gg-ecosystem-page .ggcrm-sidebar{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;
    gap:5px!important;
  }
  body.gg-suite-route-page .ggcrm-sidebar .ggcrm-nav,
  body.gg-ecosystem-page .ggcrm-sidebar .ggcrm-nav,
  body.gg-suite-route-page .ggcrm-sidebar button,
  body.gg-ecosystem-page .ggcrm-sidebar button{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:max-content!important;
    max-width:none!important;
    white-space:nowrap!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  body.gg-suite-route-page .ggcrm-pagination,
  body.gg-ecosystem-page .ggcrm-pagination{
    width:100%!important;
    min-width:0!important;
  }
  body.gg-suite-route-page .ggcrm-page-nav,
  body.gg-ecosystem-page .ggcrm-page-nav{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:8px!important;
    width:100%!important;
    min-width:0!important;
    align-items:center!important;
  }
  body.gg-suite-route-page .ggcrm-page-nav #ggcrm-page,
  body.gg-ecosystem-page .ggcrm-page-nav #ggcrm-page{
    grid-column:1 / -1!important;
    grid-row:1!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  body.gg-suite-route-page .ggcrm-page-nav #ggcrm-prev,
  body.gg-ecosystem-page .ggcrm-page-nav #ggcrm-prev{
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
  }
  body.gg-suite-route-page .ggcrm-page-nav #ggcrm-next,
  body.gg-ecosystem-page .ggcrm-page-nav #ggcrm-next{
    grid-column:2!important;
    grid-row:2!important;
    width:100%!important;
  }
}