/* Phase 5AC: global mobile width expansion
   Goal: stop mobile pages/cards/forms from rendering as narrow center columns after login.
   Scope: mobile/tablet only; desktop layout is untouched. */
@media (max-width: 768px){
  :root{--pp-mobile-gutter:12px;--pp-mobile-page-width:calc(100vw - 24px);}
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important;}

  /* Public and shared page containers */
  body .wide,
  body .container,
  body .site-container,
  body .page-container,
  body .section-container,
  body .content-container,
  body .public-page,
  body .public-shell,
  body .main-shell,
  body main,
  body .main,
  body .page-main{
    width:var(--pp-mobile-page-width)!important;
    max-width:var(--pp-mobile-page-width)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }

  /* Auth/login/register/reset cards across all roles */
  body .auth-wrap,
  body .auth-shell,
  body .login-wrap,
  body .register-wrap,
  body .password-wrap,
  body .auth-container,
  body .login-container,
  body .register-container,
  body .auth-card,
  body .login-card,
  body .register-card,
  body .password-card,
  body .reset-card,
  body .mfa-card,
  body .admin-login-card,
  body .pp-auth-card,
  body .pp-login-card,
  body .auth-panel,
  body .login-panel{
    width:var(--pp-mobile-page-width)!important;
    max-width:480px!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }

  body .auth-card,
  body .login-card,
  body .register-card,
  body .password-card,
  body .reset-card,
  body .mfa-card,
  body .admin-login-card,
  body .pp-auth-card,
  body .pp-login-card,
  body .auth-panel,
  body .login-panel{
    padding-left:clamp(18px,5vw,26px)!important;
    padding-right:clamp(18px,5vw,26px)!important;
  }

  /* Logged-in role shells: investor, fundraiser, issuer, admin and admin-role screens */
  body .role-shell,
  body .investor-shell,
  body .fundraiser-enterprise-shell,
  body .ppx-role-shell-fundraiser,
  body .admin-shell,
  body .enterprise-shell{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    box-sizing:border-box!important;
  }

  body .role-main,
  body .investor-main,
  body .issuer-main,
  body .ppx-main,
  body .ppx-role-main-fundraiser,
  body .admin-main,
  body .admin-content,
  body .admin-page,
  body .dashboard-main,
  body .dashboard-content,
  body .account-main,
  body .account-content,
  body .workspace-main,
  body .workspace-content{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding-left:var(--pp-mobile-gutter)!important;
    padding-right:var(--pp-mobile-gutter)!important;
    box-sizing:border-box!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* Common dashboard cards/sections should use available width instead of narrow caps */
  body .dashboard-card,
  body .metric-card,
  body .kpi-card,
  body .module-card,
  body .panel,
  body .card,
  body .section-card,
  body .form-card,
  body .table-card,
  body .command-card,
  body .fse-card,
  body .fcb-card,
  body .investor-card,
  body .admin-card{
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  /* Forms and inputs should be comfortably full width on phones */
  body form,
  body .form-grid,
  body .input-group,
  body .field,
  body label,
  body input,
  body select,
  body textarea,
  body button[type="submit"]{
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  body input,
  body select,
  body textarea{
    width:100%!important;
    min-height:48px;
    font-size:16px!important;
  }

  /* Prevent nested grids from creating narrow columns on mobile */
  body .grid,
  body .cards-grid,
  body .stats-grid,
  body .kpi-grid,
  body .dashboard-grid,
  body .content-grid,
  body .form-grid,
  body .two-col,
  body .three-col,
  body .four-col{
    min-width:0!important;
  }
}

@media (min-width: 390px) and (max-width: 768px){
  :root{--pp-mobile-gutter:14px;--pp-mobile-page-width:calc(100vw - 28px);}
}

@media (max-width: 380px){
  :root{--pp-mobile-gutter:10px;--pp-mobile-page-width:calc(100vw - 20px);}
}